Beispiele
- Überschriften, Absätze, Listen und Tabellen
- Hervorhebung von Text, Einbinden von Hyperlinks und Graphiken
1. Überschriften, Absätze, Listen und Tabellen
Dies ist eine Überschrift 1. Ordnung
... und dies eine der 2. Ordnung
... und auf welcher Stufe steht wohl diese Überschrift?
Dies ist ein Textabsatz. Er enthält einfach gewöhnlichen Text. Um den Zeilenumbruch braucht man sich nicht zu kümmern: den macht der Browser automatisch und paßt den Text so der jeweiligen Fensterbreite an. – Verändere einfach mal die Fensterbreite (die Breite des Vorschaufensters von Phase 5 kannst Du z.B. verändern, indem Du die Grenze zwischen Dateimanager und Editor verschiebst)!
Es folgt eine (ungeordnete) Aufzählungsliste:
- Dies ist der 1. Listeneintrag.
- Dies ist der 2. Listeneintrag – und zwei Einträge sollte eine jede Liste mindestens haben.
-
Dieses Listenelement enthält eine weitere Aufzählungsliste:
- Dies ist der 1. Listeneintrag der eingebetteten Liste ...
- ... und dies der zweite – upps: was ist denn mit den Aufzählungszeichen passiert :-)?
Und nun folgt eine nummerierte Liste:
- Der 1. Eintrag – muß man eine Liste eigentlich bei "1" beginnen? Schau Dir mal den Quelltext zu dieser Liste an ...
- Der 2. Eintrag – auf jeden Fall zählen wir bei den folgenden Einträgen einfach weiter.
Eine Tabelle mit 3 Spalten und Rahmen:
| Überschrift von Spalte 1 | ... von Spalte 2 | ... und von Spalte 3 |
|---|---|---|
| Eintrag in der 1. Spalte der 1. Zeile | und hier sind wir in der 2. Spalte ... | und nun in der 3. |
Ü: Tags für Blockelemente
Du hast jetzt die Tags in der folgenden Tabelle kennengelernt. Fülle die Tabelle aus (der Quelltext dieser Datei hilft Dir gegebenenfalls weiter)!
| Tag | erzeugt wird: |
|---|---|
| <h1> ... </h1> | |
| <h2> ... </h2> usw. | |
| <p> ... </p> | |
| <ol> ... </ol> | |
| <ol> ... </ol> | |
| <li> ... </li> | |
| <table> ... </table> | |
| <tr> ... </tr> | |
| <th> ... </th> | |
| <td> ... </td> |
2. Hervorhebung von Text, Einbinden von Hyperlinks und Graphiken
Dieser Text ist unbetont. Dies ist ein mit <em> betonter Textabschnitt. Und dies ist ein mit <strong> betonter Textabschnitt.
Dies ist ein (externer) Link auf die Sommeruni-Seite, und dies ein Projekt-interner Link auf den 2. Hauptabschnitt in der HTML-Einführung ("Tags"). Der Quelltext verrät Dir, wie die Links zustande kommen.
Zum Schluß wollen wir noch eine Graphik einbinden: <img src="img/beispiel.gif" alt="Beispiel"/> bindet die Datei "beispiel.gif" aus dem Verzeichnis "img" ein, wenn das Verzeichnis "img" im selben Verzeichnis liegt wie die HTML-Datei, in der die Graphik eingebunden wird. Das Ergebnis:
Was wird angezeigt, wenn der Mauszeiger eine Weile über der Graphik stillsteht?