HTML-Grundanweisungen
- Grundgerüst einer HTML-Seite
- Überschrift 1
- Springen innerhalb von Dokumenten
- Springen zu externen Dokumenten
- Erstellen von Listen
- Tabellen
- Text als Adresse
- Vorformatierter Text
- Zitat
- Text mit nicht proportionalem Font
- Grafik einfügen
- Grafik als Verweis auf anderes Dokument
Grundgerüst einer HTML-Seite
| Beispiel-Dokument | Beschreibung |
|---|---|
|
<html> <head> <title>Text der in Titelleiste erscheint</title> </head> <body> <!-- Jetzt kommt der Text --> <h1>Überschrift 1</h1> <hr> Hier jetzt den Text eingeben:<br> <br> erzwingt Zeilenwechsel ohne Abstand zwischen Absätzen <p> erzwingt Absatzwechsel mit einer Zeile Abstand zum alten Absatz: <p> Text ohne Absatzschaltung <p> wird am Zeilenende automatisch umgebrochen.<br> <b>Fetter Text</b><br> <i>KursiverText><br> <b><i>Fett und kursiv</i></b> <u>Unterstrichener Text</u><br> "Anführungszeichen" <p> </body> </html> |
(markiert den Anfang eines html-Dokumentes) (Kopf-Anfang) ... (Kopf-Ende) (markiert den Anfang des Textteiles) (so läßt sich ein Kommentar in den Quelltext einfügen) Überschrift 1Hier jetzt den Text eingeben: Text ohne Absatzschaltung <p> wird
ä (Ende des Textes) (Ende des html-Dokumentes) |
Springen innerhalb von Dokumenten
| <a href=„#Vorwort“>Vorwort</a> | Link mit Text "Vorwort" (Verweis auf Sprungmarke "#Vorwort" markiert durch Rautensymbol; anklickbar) |
| ... | |
| <a name=„Vorwort“>Vorwort:</a> | Vorwort: (Ziel des Verweises) |
Springen zu externen Dokumenten
| <a href=„http://www.tu-muenchen.de/homepage.htm“>TUM</a> | Link mit Text "TUM" auf die Homepage der TU München (externe Adresse im WWW) |
| ... | |
| <a href=„file://c:/htm/homepage.htm“>Meine Homepage</a> | Link mit Text "Meine Homepage" auf externe Adresse auf Festplatte |
| <a href=„ftp://ftp.fu-berlin.de/pc/.../spiel.zip“>Doom</a> | Link mit Text "Doom" auf externe Adresse auf File-Server an UNI Berlin |
Erstellen von Listen
Punktliste (unsortierte Liste)
|
<ul> <li>Hauptliste <ul> <li>Unterliste</li> <li>bla bla ...</li> </ul> </li> <li>Weiterer Hauptlistenpunkt</li> </ul> |
|
Nummerierte Liste (sortierte Liste)
|
<ol> <li>Frühling <li>Sommer <ol> <li>Juli</li> <li>August</li> </ol> </li> <li>Herbst</li> <li>Winter</li> </ol> |
|
Definitionsliste
|
<ol> <li>Frühling <li>Sommer <ol> <li>Juli</li> <li>August</li> </ol> </li> <li>Herbst</li> <li>Winter</li> </ol> |
|
Tabellen
HTML-Quellcode:
<table border="1">
<tr>
<th rowspan="2"></th>
<th colspan="2">Durchschnitt</th>
<th rowspan="2">sonstige Angaben</th>
</tr>
<tr>
<th>Größe</th>
<th>Gewicht</th>
</tr>
<tr>
<th>männlich</th>
<td>1.80</td>
<td>85</td>
<td>dick</td>
</tr>
<tr>
<th>weiblich</th>
<td>1.70</td>
<td>65</td>
<td>nett</td>
</tr>
</table>
Ergebnis:
| Durchschnitt | sonstige Angaben | ||
|---|---|---|---|
| Größe | Gewicht | ||
| männlich | 1.80 | 85 | dick |
| weiblich | 1.70 | 65 | nett |
Text als Adresse
HTML-Quellcode:
<address>
<a href=„http://www.tu-muenchen.de/adressen/eichinger.html“>Ralf Eichinger</a>
</address>
Ergebnis:
Ralf Eichinger
Vorformatierter Text
HTML-Quellcode:
<pre>
Für Text, der genau so
umbrochen werden soll,
wie Sie ihn eingeben.
</pre>
Ergebnis:
Für Text, der genau so umbrochen werden soll, wie Sie ihn eingeben.
Zitat
HTML-Quellcode:
<blockquote>Zitat</blockquote>
Ergebnis:
Zitat
Text mit nicht proportionalem Font
HTML-Quellcode:
<tt>Text</tt>
Ergebnis:
Text
Grafik einfügen
| <img align=”center” alt=”Bild mit Landkarte von Brasilien” src=”karte.gif”> | Grafik „karte.gif“ wird zentriert eingefügt |
Grafik als Verweis auf anderes Dokument
| <a href=”karte.htm”><img src=”karte.gif” align=”center”></a> | Bei Klick auf das Kartenbild efolgt Sprung zum „karte.htm“-Dokument |