Materialien zum Unterricht

HTML-Strukturen

  1. HTML-Grundstruktur
  2. Absatz
  3. Überschrift
  4. Ungeordnete Liste
  5. Geordnete Liste
  6. Tabelle
  7. Bereiche (Boxen, <div>)
  8. Formulare
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 CSS-basierte Gestaltung einer HTLM-Seite

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.

8. Formulare
Struktur Beschreibung
Grundgerüst 
<form action="Programm, dass die Daten verarbeitet " method="get">
   hier stehen die Formularelemente 
</form>

Ein Formular fasst Eingabefelder zusammen. Zu einem Formular gehört ein Submit-Button, nach dessen Anklicken die Daten der Formularelenmente an des Programm übertragen werden, dass bei action angegeben ist. Dieses Programm (CGI, PHP ...) kümmert sich dann um die weitere Verarbeitung. Z.B. können die Inhalte der Formularelemente an eine e-Mail-Adresse geschickt werden.

Einzeiliges Textfeld

<input name="vorname" type="text" size="30" maxlength="30">


Einzeilige Textfelder dienen der Eingabe von einzelnen Wörtern oder kurzen Sätzen und Zahlen.

Der name ist für die Auswertung des Feldinhaltes im folgenden Programm notwendig.

size bestimmt die Größe des Eingabefeldes, maxlength die maximale Anzahl von Zeichen.

Mehrzeilige Eingabefelder

<textarea name="text" rows="4" cols="20"></textarea>

 

Mehrzeilige Textfelder dienen der Eingabe von richtig viel Text.

row bestimmt die Anzahl der Zeilen und cols die Anzahl der Zeichen pro Zeile.

Die Länge des Textes, der eingegeben werden kann, ist theoretisch unbegrenzt.

  alles über Felder

Knöpfe

<input type="submit" name="Submit" value="Senden">

<input type="reset" name="Leset" value="Löschen">

Der Knopf vom Typ submit schnürt ein Paket aus den Namen der Eingabefelder und deren Inhalten und schickt es an das Programm, dass in action eingetragen ist.

Der Reset-Knopf löscht mit einem Schlag alle Eingabefelder in dem Formular.

 

 

zurück