Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- e1:struktur_von_html-dokumenten [2017/07/03 08:56] – admin03
+++ e1:struktur_von_html-dokumenten [2017/09/19 12:29] (aktuell) – admin03
@@ Zeile 51: / Zeile 51: @@
 </code>
-====== Block-Elemente ======
+====== 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.
-Es gibt Block- und Inline-Elemente. Block-Elemente erzeugen einen eigenen Absatz im Text. Je nach
+{{:e1:html-kategorien.png?600|}}
-Elementtyp fügt der Browser dabei automatisch einen größeren Abstand zum vorangehenden Inhalt ein.
-So erzeugen die Browser beispielsweise beim p-Element einen sichtbaren Abstand, damit die Absatzschaltung
-vom einfachen Zeilenumbruch unterscheidbar ist. 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.
-====== Inline-Elemente ======
+Einen Überblick findest du unter [[https://wiki.selfhtml.org/wiki/HTML/Kategorien_von_Elementen|Selfhtml-Kategorien]]
-Inline-Elemente erzeugen keine neuen Zeilen im Textfluss. Inline-Elemente sind als untergeordnete,
+====== Aufgabe 2 ======
-"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 div-Element ist ein allgemein
-nutzbares Block-Element, das span-Element ein allgemein nutzbares Inline-Element.
-====== Aufgabe ======
 Rufe SelfHTML auf (http://de.selfhtml.org/) und folge den Verweisen Kurzreferenz HTML, HTMLReferenz
 und HTML-Elementreferenz.
-  - Bestimme mit Hilfe der Elementreferenz, ob es sich bei den HTML-Elementen aus Aufgabe 2a um Inline-, Block- oder sonstige HTML-Elemente handelt.
-  - Ein Browser stellt das HTML-Dokument aus Aufgabe 1a wie folgt dar. Markiere die Bereiche von Block- und Inline-Elementen.
-{{ :e1:felsterinhalt.png?direct&600 |}}
+  - Bestimme mit Hilfe der Elementreferenz, um welche HTML-Elementen es sich bei <a>, <table>, <tr>, <img> und <center> handelt.
+  - Ein Browser stellt das HTML-Dokument aus Aufgabe 1 wie folgt dar. Markiere die Bereiche von Block- und Inline-Elementen.
+====== Aufgabe 3 ======
-====== Aufgabe ======
 Begründe mit Hilfe der HTML-Elementreferenz, welche der folgenden Strukturen zulässig sind oder
 nicht:
- - <html><h1>Überschrift</h1></html>
+  - <html><h1>Überschrift</h1></html>
-<h1><a href=“http://www.google.de”>Goooogle…</a></h1>
+  - <h1><a href=“http://www.google.de”>Goooogle…</a></h1>
-<img src=”bild.gif”>Tolles Bild</img>
+  - <img src=”bild.gif”>Tolles Bild</img>
-<td><table><tr><td>Zelle</td></tr></table></td>
+  - <td><table><tr><td>Zelle</td></tr></table></td>
-<h1><table><tr><td>Zelle</td></tr></table></h1>
+  - <h1><table><tr><td>Zelle</td></tr></table></h1>
-<a href=”schueler.htm”>Zu den <a href=“6f.htm“>der Klasse 6f</a></a>
+  - <a href=”schueler.htm”>Zu den <a href=“6f.htm“>der Klasse 6f</a></a>
-<div align=“center“>Zentrierter <span style="color:blue">blauer</span> Text </div>
+  - <div align=“center“>Zentrierter <span style="color:blue">blauer</span> Text </div>
 ====== Aufgabe ======
-Ob sich Strukturfehler wie in Aufgabe 4 in einem HTML-Dokument befinden, kann man automatisch
+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
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code>
 und im head-Element die folgende Zeichensatzangabe stehen:
-<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+<code><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></code>
-a) Ergänze diese Angaben in deinem HTML-Dokument zur Sehenswürdigkeit, führe die Prüfung durch
+  - Ergänze diese Angaben in deinem HTML-Dokument zur Sehenswürdigkeit, führe die Prüfung durch und verbessere deine Fehler.
-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.
-b) Der Internet-Explorer in der Version 8 hat im Menü Extras den Befehl Entwicklertools. Rufe in den
+  - 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.
-Entwicklertools „Überprüfen/HTML“ auf und klicke im Strukturbaum von Aufgabe 2a HTMLElemente
-an. Beobachte die Darstellung im Browser.
-c) 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.