Materialien zum Unterricht

HTML-Strukturen

  1. HTML-Grundstruktur
  2. Absatz
  3. überschrift
  4. Ungeordnete Liste
  5. Geordnete Liste
  6. Tabelle
  7. Bereiche (Boxen, <div>)

1. HTML-Grundstruktur

Struktur Beschreibung 
<html>
   <head>
      <title> </title>
   </head>
   <body>

   </body>
</html>

<html> Wurzelelement der HTML-Datei
<head> Kopfes
<title> Titel der Seite

<body> Seitenkörper

 

2. Absatz

Struktur Beschreibung 
<p>...</p>

Ein Text wird durch diese Tags als Absatz dargestellt. Absätze werden durch einen Zwischenraum getrennt.

  mehr zu Textabsätzen
3. Überschrift
Struktur Beschreibung 
<h1>...</h1>
.
.
.
<h6>...</h6>

HTML unterscheidet 6 Überschriftenebenen. Damit lassen sich im Dokument Hierarchieverhältnisse darstellen.
1 ist die höchste Ebene, 6 die niedrigste.
Vor und nach einer Überschrift wird Zwischenraum geschaltet.

  mehr zur Gestaltung von Überschriften

4. Ungeordnete Liste

Struktur Beschreibung 
<ul>
  <li>...</li>
  <li>...</li>
<ul>

Aufzählungen kann man als Liste darstellen.
<ul> leitet die Liste ein.
<li>...</li> enthält die einzelnen Listenelemente
Die Form des Punkts vor dem Listeneintrag wird vom Browser bestimmt.
Eine komfortable Formatierung von Listen ist nur mit CSS möglich.

  mehr zu Listen

5. Geordnete Liste

Struktur Beschreibung 
<ol>
  <li>...</li>
  <li>...</li>
<ol>

Die Struktur ist wie bei der ungeodneten Liste. An Stelle des Punktes vor dem Listeneintrag erscheinen hier automatisch Ziffern.
Der Startwert ist 1, kann aber geändert werden. Mit
<ol start=20>
wird z.B. ab 20 gezählt.

6. Tabelle

Struktur Beschreibung 
<table>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td> 
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td> 
  </tr>
</table>

Das Beispiel stellt eine Tabelle mit zwei Zeilen und drei Spalten dar.
Die Zeile wird mit <tr> eingeleitet. Danach muss ein <td> für die erste Spalte stehen.
Jede Zeile muss die gleiche Anzahl Spalten enthalten.

In der ersten Zeile können die <td>-Tags durch <th> ersetzt werden. Dadurch lässt sich der Kopf der Tabelle extra formatieren. (Beispiel: diese Tabelle)

Sollen in einer Zeile weniger Spalten als gefordert dargestellt werden, müssen Spalten mittels colspan="Anzahl der Spalten" miteinander verbunden werden.

  alles über Tabellen

7. Bereich

Struktur Beschreibung 
<div>
....
</div>

Zusammengehörende Elemente auf einer HTML-Seite können mit <div> zu Bereichen zusammengefasst werden.
Das <div>-Tag bewirkt nichts weiter, als dass der Bereich in einer neuen Zeile beginnt.

Mit Hilfe von CSS-Formatierungen ist es dann möglich, der HTML-Seite eine ordentliche Strukturierung zu verpassen.

Jeder moderne Internetauftritt wird heute mit Hilfe von Bereichen formatiert.

  einiges über Textstrukturierung

Die Größe einer Box wird von 4 Größen bestimmt.

  1. margin: Abstand zum nächsten Element
  2. border: Rahmen
  3. padding: Abstand zwischen Inhalt und Rahmen
  4. width: der eingentliche Inhalt

Die Breite einer Box setzt sich demnach so zusammen:

Breite des Inhalts +
paddig-left +
padding-right +
border-left +
border-right +
margin-left +
margin-right

Beispiel: Der Inhalt einer Box ist 300 px breit. Der Inhalt soll zum Rahmen einen Abstand von 5 px haben. Der Rahmen ist 1 px breit und die Box hat zum nächsten Element einen Abstand von 2 px. Damit ist die Box insgesamt

300+5+5+1+1+2+2 = 316 px breit.

zurück