HTML zur inhaltlichen Strukturierung



Hypertext Markup Language: Normale Texte werden Tags ("Etiketten", Elementen) dieser Sprache versehen, um den Inhalt (Texte, Bilder, Formulare usw.) zu strukturieren.

  • Grundgerüst <html><head>...</head><body>...</body></html>

  • Titel <title>...</title>

  • Überschrift <h2>...</h2>

  • Paragraph <p>...</p>

  • Zeilenumbruch <br />

  • Link <a href="...">...</a>

  • Bild <img src="..." />

  • Tabelle <table><tr><td>...</td><td>...</td></tr></table>

  • Liste <ul><li>...</li><li>...</li></ul>

  • Formular <form><input type="button" value="Klick" /></form>

Die Html-Befehle zerfallen in zwei Gruppen: Was unterscheidet zum Beispiel <h2>...</h2> und <br />?

Der Quelltext einer Webseite innerhalb von <body>...</body> könnte also so aussehen:

<h2>Beispiel</h2>
<p>Eine Webseite könnte diese Elemente enthalten.</p>
<a href="http://www.eike-teiwes.de">ein Link</a>
<br />
<!-- Kommentar: Das vorangehende Element erzeugt einen Zeilenumbruch -->
<img src="http://www.eike-teiwes.de/images/download.gif" />
<form>
    <input type="text" name="ausgabe">
    <input type="button" value="Absenden">
</form>
<table>
    <tr>
        <td colspan="2">
            Die erste Zeile eine Tabelle
        </td>
    </tr>
    <tr>
        <td>
            Das erste Feld in der zweiten Zeile
        </td>
        td>
            Das zweite Feld in der zweiten Zeile
        </td>
    </tr>
</table>

Aufgabe
Erzeuge eine Webseite mit den oben vorgestellten Elementen.



Weiteres bei SELFHTML: Elemente zur Textstrukturierung, HTML-Elementereferenz