Eike Teiwes

HTML zur inhaltlichen Strukturierung

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

Grundgerüst
<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
    </head>
    <body>...</body>
</html>
Ü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> 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>
<img src="http://www.eike-teiwes.de/images/download.gif" />
<form>
    <input type="text" name="ausgabe">
    <input type="submit" value="Absenden">
</form>
<table>
    <tr>
        <td colspan="2">Die erste Zeile eine Tabelle geht über 2 Felder</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.