HTML - Kurs
Block-Elemente
Es gibt Block- und Inline-Elemente. Block-Elemente erzeugen einen eigenen Absatz im Text, der die ganze Fensterbreite in Anspruch nimmt und so hoch wie erforderlich ist. Der Browser fügt zwischen Block-Elementen automatisch einen Abstand (engl. margin) ein. Block-Elemente können in der Regel normalen Text und Inline-Elemente enthalten. Einige Block-Elemente können auch andere Block-Elemente enthalten. Folgende Elemente gehören u. a. zu den Block-Elementen: center, div, form, h1-h6, hr, ol, p, table, ul. Das div-Element ist ein allgemein nutzbares und schachtelbares Block-Element, dass im Zusammenhang mit CSS häufig zur Layout-gestaltung eingesetzt wird.
Merke: Blockelemente sind so breit wie möglich und so hoch wie nötig!
Inline-Elemente
Inline-Elemente erzeugen keine neuen Zeilen im Textfluss. Inline-Elemente sind als untergeordnete, innere Elemente für Block-Elemente gedacht. Sie können in den meisten Fällen normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente. Folgende Elemente gehören u. a. zu den Inline-Elementen: a, b, br, img, span, sub, sup, u. Das span-Element ein allgemein nutzbares Inline-Element.
Merke: Inline-Elemente sind so breit wie nötig und so hoch wie nötig!
Aufgabe Nr. 4
Begründen Sie mit Hilfe der HTML-Elementreferenz, welche der folgenden Ausschnitte aus HTML-Dokumenten zulässig sind oder nicht. Beziehen Sie sich dabei auf die Angaben bei Elternelemente und Elementinhalt.
a) <html><h1>Überschrift</h1></html>
- nicht zulässig, da <html> kein zulässiges Elternelement von <h1> ist.
b) <h1><a href="http://www.google.de">Goooogle...</a></h1>
- zulässig, da <a> in Block-Elementen, wie z.B. <h1> verwendet werden darf.
c) <img src="bild.gif">Tolles Bild</img>
- zulässig, <img> kann in html5 unter allen Block- und Inline-Elementen verwendet werden.
d) <td><table><tr><td>Zelle</td></tr></table></td>
- nicht zulässig, da <td> kein Elternelement von <tr> ist.
e) <h1><table><tr><td>Zelle</td></tr></table></h1>
- nicht zulässig, <h1> und <table> sind Block-Elemente. <h1> ist kein Elternelement.
f) <a href="schueler.htm">Zu den <a href="fi2ba.htm">der Klasse FI2Ba</a></a>
- nicht zulässig, <a> kann sich selbst nicht als Elternelement haben. Es benötigt ein Block-Element.
g) <div align="center">Zentrierter <span style="color:blue">blauer</span> Text </div>
- zulässig, es wird nur der "Style" angepasst.
h) <p><h1>Öffungszeiten</h1><p>
- nicht zulässig, da <p> kein Elternelement von <h1> ist.
i) <ul>Vorstand<li>Hanno Wille-Boysen (Vorsitz)</li></ul>
- nicht zulässig, da <ul> keinen Text enthalten darf.
Tabellen
Aufgabe 1
| 1 | 5 |
| 2 | |
| 3 | |
| 4 |
Aufgabe 2
| 1 | 5 |
| 2 | |
| 3 | 6 |
| 4 |
Aufgabe 3
| 1 | |
| 2 | 5 |
| 3 | |
| 4 | |
Aufgabe 4
| 1 | 5 |
| 2 | |
| 4 | |
| 3 |
Aufgabe 5
| 1 | ||||
| 2 | 1 | |||
| 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | ||
| 10 | 11 | 12 | 13 | |
| 14 | ||||