Elemente/Tags einer HTML-Seite

Dies sind die wichtigsten Elemente/Tags einer HTML-Seite.

Eine komplette Liste aller möglichen HTML-Elemente ist unter diesem Link zu finden.

Mit Hilfe von CSS kann man das Layout (Größe, Position etc.) bzw. die Erscheinung (Farbe, Hintergrund etc.) dieser Element ändern.

Wichtig ist, dass die Formatierung immer getrennt von den Daten sein sollte: Formatierungen sollten demnach durch die Manipulierung

durch JavaScript oder durch ein CSS-Stylesheet geschehen.

Überschriften:

<h[1-6]>Text</h[1-6]>

Sechs Überschriftenebenen sind erlaubt, also z.B. <h1>Text</h1>.

Aber es ist meistens nicht sinnvoll mehr als 3 Ebenen zu verwenden.

Textabsätze:

<p>Text</p>

Erzeugt einen Text mit Absatz.

Zeilenumbruch erzwingen:

Text alte Zeile<br>Text neue Zeile

Beispiel:

Text alte Zeile
Text neue Zeile

Aufzählungslisten:

<ul>
 <li>Listeneintrag</li>
 <li>Listeneintrag</li>
 </ul>

Beispiel:

Listeneintrag
Listeneintrag

Nummerierte Listen:

 <ol>
 <li>Listeneintrag</li>
 <li>Listeneintrag</li>
 </ol>

Beispiel:

Listeneintrag
Listeneintrag

Tabellen:

<table border="Dicke">
 <tr>
 <th>Kopfzelle</th>
 <th>Kopfzelle</th>
 </tr>
 <tr>
 <td>Datenzelle</td>
 <td>Datenzelle</td>
 </tr>
 </table>

Beispiel:

Kopfzelle	Kopfzelle
Datenzelle	Datenzelle

Hyperlinks:

<a href="http://www.htwg-konstanz.de">Webseite der HTWG</a>

Grafiken einbinden:

<img src="http://www.johner.org/logo.gif " alt="GoogleLogo">

Formulare:

 <form action="URI" method="Methode" enctype="MIME-Typ">
 <!-- Formularelemente und andere Elemente innerhalb des Formulars-->
 <!-- Einzeilige Formularfelder--> 
 <input type="text" size="Länge" maxlength="MaxLänge" name="Name">
 <!-- Passwortfeld --> 
 <input type="password" size="Länge" maxlength="MaxLänge" name="Name">
 <!-- Auswahlliste --> 
 <select size="Höhe" name="Name">
 <option>Eintrag</option>
 <option>anderer Eintrag</option>
</select> 
 <!-- Radiobuttons --> 
 <input type="radio" name="Name" value="Wert"> Text 
 <!-- Checkboxen --> 
 <input type="checkbox" name="Name" value="Wert"> Text 
 <!-- Absende und Resetbutton -->
 <input type="submit" name="Name" value="Abschicken">
 <input type="reset" name="Name" value="Zurücksetzen"> 
 </form>

Beispiel: Ein mögliches Web-Formular mit oben genannten Techniken