HTML in 10 Minuten

Grundlegendes:

HTML

ist eine Text-Markierungs-Sprache (HyperTextMarkupLanguage). Teilen

eines Textes werden durch Markierungen bestimmte Eigenschaften

zugewiesen. Die Browser interpretieren diese Markierungen und stellen

den Text entsprechend dar. Die Markierung und ihre Anordnung ist in

den Standards des W3C festgelegt und nur diese Standards sollten

verwendet werden.

Die

Markierungen werden „tags“ genannt und diese werden

grundsätzlich in eckigen Spitzklammern gesetzt („<“

und „>“). Eine Markierung beginnt mit einem tag und

endet mit einem schließenden tag (durch „/“). Der

ganze Text zwischen Eröffnung und Schließung hat die

zugewiesene Eigenschaft. Die wichtigsten Eigenschaften sind:

Absatz

(paragraph) <p>…</p>

Fettdruck

(bold) <b>…</b>

Kursiv

(italic) <i>…</i>

Unterstrichen

(underlined) <u>…</u>

Überschrift

1 (headline 1) <h1>…</h1>

Überschrift

2 (headline 2) <h2>…</h2>

Überschrift

3 (headline 3) <h3>…</h3>

<h1>Beispiel</h1>

<p>Ein

Absatz sieht so aus. Er kann <b>fettgedruckte</b>,

<u>unterstrichene</u> und <i>kursive<i>

Textteile enthalten. Diese sind nicht an Wör<u>ter oder

Worttei</u>le gebunden und können auch

<b><i>kombiniert</i> werden</b>.</p>

Beispiel

Ein

Absatz sieht so aus. Er kann fettgedruckte, unterstrichene

und kursive Textteile enthalten. Diese sind nicht an Wörter

oder Wortteile gebunden und können auch kombiniert

werden.

 

Links:

Auch

Verlinkungen werden als Markierung dargestellt. Dem tag <a>

wird hierzu der Parameter href (HyperText Reference) gegeben.

Parameter beschreiben die Eigenschaften der Markierung zusätzlich.

Es können mehrere Parameter angegeben werden.

<a

href=“zieladresse“>Text auf dem der Link liegt</a>

<a

href=“zieladresse“ target=“_blank“>dieser

Text öffnet sich in einem neuen Fenster</a>

 

Relative Angaben:

Zieladresse

ist dabei die Adressangabe der Datei, auf die verlinkt wird (die also

geöffnet werden soll). Adressangaben sind immer entweder relativ

zur aktuellen Seite oder absolut. Relative Angaben zeigen auf den

gleichen Pfad wie die aufrufende Seite oder einen Pfad relativ dazu.

<a

href=“datei2.htm“>…</a> Link zu „datei2.htm“

im gleichen Verzeichnis

<a

href=“../datei3.htm“>…</a> „datei3.htm“

im übergeordneten Verzeichnis

<a

href=“xyz/datei4.html“>…</a> sucht im

Unterverzeichnis „xyz“ die Datei „datei4.html“

 

Absolute Angaben:

Eine

absolute Angabe enthält die vollständige Adresse der

Zieldatei. Es ist daher völlig egal, wo die aufrufende Datei

liegt. Es wird immer die gleiche Ziel-Datei aufgerufen.

<a

href=“http://www.orbit9.de“>Link zu Orbit9</a>

Selbstschließende tags:

Bestimmte

tags schließen sich logikbedingt selbst, sind also nicht

zweigeteilt:

Zeilenumbruch

(break) <br />

Bild

(image) <img />

 

Bilder:

Bilder

werden wieder durch Parameter näher bestimmt.

<img

src=“bildquelle“ border=“0“ alt=“alternative

Textangabe“ />

Bildquelle

ist ähnlich wie bei den Links eine relative oder absolute

Adressangabe. Border sollte immer auf 0 sein, sonst erscheint ein

Rahmen um das Bild. Alternative Textangaben werden einblendet, wenn

das eigentliche Bild nicht verfügbar ist. Sie sind auch wichtig

für barrierefreie Darstellung von Webseiten (z. B. sind

Sehbehinderte auf diese Angaben angewiesen).

Bilder

können von Text umflossen werden. Siehe hierzu Ausrichtung. Um

Bildern mehr Abstand zum Text zu geben dienen die Parameter hspace

(horizontal space) und vspace (vertical space):

<img

src=“…“ alt=“…“ border=“0“

hspace=“10“ vspace=“20“ />

Auch

Bilder können von Links umschlossen sein. Ein Klick auf das Bild

öffnet dann die Zieldatei.

<a

href=“bild_gross.jpg“><img src=“bild_vorschau.jpg“

border=“0“ alt=“Großansicht“ /></a>

 

Ausrichtung:

Der

Parameter align gibt die Ausrichtung von Elementen an:

<h1

align=“center“>…</h1> Überschrift

erscheint zentriert.

<p

align=“right“>…</p> Absatz erscheint

rechtsbündig.

<img

… align=“right“ /> Das Bild erscheint rechtsbündig,

der Text fließt links darum.

 

Sprungmarken:

Das

tag <a> kann auch eine Sprungmarke (ancor) innerhalb einer

Datei setzen:

<a

name=“anker18“> </a>

Diese

Sprungmarke kann als Linkziel angeben werden, der Browser spring dann

dorthin (scroll gebenenfalls automatisch hoch oder runter).

<a

href=“#anker18“>…</a> oder <a

href=“datei.htm#anker18“>…</a>

 

Listen:

Listen

bieten den Vorteil, dass die Formatierung und Einrückung von

Zeilenumbrüchen automatisch geschieht. Eine Liste startet mit

<ul> (unordered list) für normale Listen mit Punkten am

Anfang oder <ol> (ordered list) mit Numerierung am Anfang. Die

einzelnen Listenelemente werden mit <li> umschlossen:

<ul>

  <li>Punkt 1</li>

<li>Punkt 2</li>

<li>…</li>

</ul>

 

Sinnvolle Schreibweise:

Wie

im Beispiel bei Listen zu sehen werden tags, die innerhalb anderer

tags stehen, meist um zwei Zeichen eingerückt. Das macht das

Schreiben und insbesondere das Lesen einer HTML-Datei wesentlich

einfacher und übersichtlicher.

 

Tabellen:

Tabellen

(<table>) bestehen aus Tabellenzeilen (<tr>), die die

Zellen (<td>) in der Reihenfolge der Spalten enthalten:

<table>

  <tr>

<td>Zelle 1 in Zeile 1</td>

<td>Zelle 2 in Zeile 1</td>

</tr>

<tr>

<td>Zelle 1 in Zeile 2</td>

<td>Zelle 2 in Zeile 2</td>

</tr>

</table>

 

Grundstruktur einer HTML-Seite:

HTML-Seiten

bestehen aus einem Kopfbereich (<head>) der allgemeine, nicht

zur Anzeige bestimmte Informationen enthält und einem

Hauptbereich (<body>), der den eigentlichen Inhalt der Seite

enthält. Es gibt dabei einige Standard-Formate, die man

einbinden sollte, um eine ordentliche Darstellung der Seite

(insbesondere mit Umlauten) zu gewährleisten.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>

<html>

<head>

<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />

<title>Seitentitel</title>

</head>

<body>

<p><b>Hallo Welt.</b></p>

</body>

</html>

 

Danke?

Wenn Sie diese Anleitung hilfreich fanden, dann setzen Sie doch bitte auf Ihre Internet-Seite einen Link zu Orbit9.de. Hier der HTMl-Code:

<a href=“http://www.orbit9.de“ target=“_blank“ alt=“Orbit9“>Orbit9</a>