Kostenlose Foren für die eigene Homepage bei razyboard.com

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=“../datei2.htm“>...</a> „datei2.htm“ im übergeordneten Verzeichnis

<a href=“xyz/di4.html“>...</a> sucht im Unterverzeichnis „xyz“ die Datei „d4.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.

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):

Auch Bilder können von Links umschlossen sein. Ein Klick auf das Bild öffnet dann die Zieldatei.

Ausrichtung:

Der Parameter aling 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:

Diese Sprungmarke kann als Linkziel angeben werden, der Browser spring dann dorthin (scroll gebenenfalls automatisch hoch oder runter).

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 Bullets 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 www.rucksackshop.com. Hier der HTMl-Code:

<a href=“http://www.rucksackshop.com“ target=“_blank“ alt=“Rucksäcke, Rucksack, Kampftasche, Umhängetasche, Seesack, Palituch“>RUCKSACKSHOP.com</a>

ein Service von www.Orbit9.de

Dieses Thema hinzufügen bei

mit freundlicher Unterstützung von www.RUCKSACKSHOP.com