====== Struktur von HTML-Dokumenten ======
Webseiten im Internet haben eine Struktur, einen Inhalt und ein Layout. Die Struktur wird durch die
HTML-Elemente beschrieben, der Inhalt wird vom Autor geschrieben und das Layout wird über CSS
(Cascading Style Sheets) festgelegt. Die Struktur eines HTML-Dokuments kann mittels Überschriften,
Absätzen, Listen und Tabellen usw. festgelegt werden. Wir wissen, dass jedes HTML-Dokument aus
einem head- und einem body-Element besteht und dass das head-Element ein title-Element enthält. Das
stellen wir grafisch wie im Bild als Strukturbaum dar.
Das Programm, mit dem das folgende Diagramm erstellt wurde findest du unter [[http://arbeitsplattform.bildung.hessen.de/fach/informatik/htmlbaum.html|arbeitsplattform.bildung.hessen.de]]
{{ :e1:baum.png?600 |}}
Die Wurzel dieses Baumes ist das html-Element. Der Inhalt des html-Elements besteht aus einem headund
einem body-Element. Das title-Element ist der Inhalt des head-Elements.
====== Aufgabe ======
Zeichne für das nachfolgende HTML-Dokument einen Strukturbaum:
Modellschule Obersberg
Modellschule Obersberg
7. Juli 20017, Stefan Zerr
====== Kategorien von HTML-Elementen (Ehemals Block und Inline) ======
HTML-Elemente kann man in unterschiedliche Kategorien einsortieren. Insbesondere wird so beschrieben, welche HTML-Elemente innerhalb anderer Elemente verwendet werden dürfen und nicht hinsichtlich ihrer Ausdrucksart.
Mit Einführung von HTML5 wurde die Kategorisierung von HTML-Elementen grundlegend überarbeitet bzw. erweitert. Während es bei HTML4 nur die Unterscheidung zwischen Block- und Inline-Elementen gab, wird dies seit Einführung des HTML5-Standards weiter differenziert und der inhaltsspezifische Charakter der Kategorien stärker betont.
{{:e1:html-kategorien.png?600|}}
Einen Überblick findest du unter [[https://wiki.selfhtml.org/wiki/HTML/Kategorien_von_Elementen|Selfhtml-Kategorien]]
====== Aufgabe 2 ======
Rufe SelfHTML auf (http://de.selfhtml.org/) und folge den Verweisen Kurzreferenz HTML, HTMLReferenz
und HTML-Elementreferenz.
- Bestimme mit Hilfe der Elementreferenz, um welche HTML-Elementen es sich bei ,
, ,
und handelt.
- Ein Browser stellt das HTML-Dokument aus Aufgabe 1 wie folgt dar. Markiere die Bereiche von Block- und Inline-Elementen.
====== Aufgabe 3 ======
Begründe mit Hilfe der HTML-Elementreferenz, welche der folgenden Strukturen zulässig sind oder
nicht:
- Überschrift
-
-
Tolles Bild
- |
-
- Zu den der Klasse 6f
- Zentrierter blauer Text
====== Aufgabe ======
Ob sich Strukturfehler wie in der vorherigen in einem HTML-Dokument befinden, kann man automatisch
über http://validator.w3.org/ prüfen lassen. Dazu muss vor dem html-Element die Prüfangabe
und im head-Element die folgende Zeichensatzangabe stehen:
- Ergänze diese Angaben in deinem HTML-Dokument zur Sehenswürdigkeit, führe die Prüfung durch und verbessere deine Fehler.
- Der Internet-Explorer in der Version 8 hat im Menü Extras den Befehl Entwicklertools. Rufe in den Entwicklertools „Überprüfen/HTML“ auf und klicke im Strukturbaum von Aufgabe 2a HTMLElemente an. Beobachte die Darstellung im Browser.
- Der Google-Chrome-Browser hat im Menü Tools auch Entwicklertools zur Verfügung. Falls du Google-Chrome installiert klicke auch hier auf HTML-Elemente. Für Firefox installierst du dir das Add-On Firebug.