8. Februar 2010 um 19:04
Das HTML Einsteigerseminar – Lektion 1
Autor: Marc Koschel abgelegt unter Tutorials (2 Kommentare)
Auf Basis von HTML oder XHTML werden (die meisten) Internetseiten aufgebaut. Grund genug sich mit dieser Auszeichnungssprache zu beschäftigen, sofern man eigene Webseiten gestalten will. Auf koschel.IT biete ich daher ein Webseminar an, welches in mehreren Lektionen den Zugang zu (X)HTML erläutert. In der ersten Lektion sollen die grundlegenden Bausteine einer HTML-Datei gezeigt werden.
Lektion 1: Grundlagen
In der ersten Lektion sollen die grundlegenden Bausteine einer HTML-Datei gezeigt werden.
Das HTML Grundgerüst
An dieser Stelle soll das Grundgerüst einer (X)HTML-Datei aufgezeigt werden. Mit dem hier angegebenen Quellcode, kann jedes HTML-Dokument begonnen werden.
Quellcode
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">
<head>
<title>Der Titel der XHTML-Datei</title>
</head><body>
<!-- Der gesamte Inhalt, der im Browser angezeigt werden soll -->
</body>
</html>
Die Document Type Definition
In der ersten Zeile steht die Document Type Definition, die angibt welche Regeln bzw. Version von (X)HTML gültig sind. Es gibt folgende Möglichkeiten:
- Die Variante Strict für XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - Die Variante Transitional für XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""> - Die Variante Frameset für XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"">
Ich möchte an dieser Stelle nicht im Detail erläutern, was es mit diesen Angaben auf sich hat. Nur so viel sei gesagt, dass mit diesen Angaben festgelegt wird, welche Tags und deren Attribute erlaubt sind. Wir werden zunächst die Variante Transitional verwenden, da wir dabei die größten Freiheiten besitzen.
Das Grund-Tag <html> </html>
Nach der Document Type Definition steht das einleitende Anfangs-Tag <html> mit dem entsprechenden End-Tag </html> ganz am Ende. Dazwischen befinden sich weitere Tags und Inhalte. Generell besteht jedes HTML-Element aus einem Anfangs- und einem End-Tag (Es gibt Ausnahmen wie z.B. <img> oder <hr> – dies muss vor allem bei XHTML berücksichtigt werden, da dort alle Tags ein abschließendes Tag benötigen. Gibt es keines, setzt man den Schrägstrich”/” an das Ende vor der schließenden Klammer des Anfangs-Tags <hr/>). Das End-Tag unterscheidet sich vom Anfangs-Tag durch den Schrägstrich”/“.
Hinweis
Die Schreibkonventinen für HTML-Tags sind nicht festgelegt. Man kann also die Tags auch in Großbuchstaben schreiben (also:<HTML></HTML>), man kann sie sogar gemicht schreiben (also:<HtmL></hTMl>). In Hinblick auf XHTML jedoch sollte man sich aber angewöhnen Tags generell in Kleinbuchstaben zu schreiben (also:<html></html>).
Der allgemeine Aufbau eines Tags
Der generelle Aufbau eines Tags sieht folgendermaßen aus: <bezeichner attribut_1="wert_1" attribut_2="wert_2">Text</bezeichner>
Beispiel: <a href="http://www.koschel.it/"> Link mit Angabe der Webadresse</a>
Das <head> </head> Tag
Innerhalb des <html></html> Tags wird zunächst das <head></head> Tag notiert. In diesem Tag werden alle Angaben gemacht, die später im Browser nicht angezeigt werden sollen. Hierzu zählen zum Beispiel die sog. <meta> Tags und einige andere, auf die wir hier aber momentan nicht eingehen wollen.
Das einzige verpflichtende Tag innerhalb des Kopfbereiches ist das <title> </title> Tag. Der Text der hier eingegeben wird, ist später in der Titelzeile des Browsers zu sehen.
Das <body> </body> Tag
Im Anschluss an den Kopfbereich wird der Body-Bereich geschrieben, welcher durch das <body> </body> Tag gekennzeichnet wird. Innerhalb dieses Tags stehen alle Informationen, die später im Browser angezeigt werden sollen.
Hinweis
Tags können verschachtelt werden. Jedoch muss darauf geachtet werden, dass sie nicht über Kreuz geschrieben werden.
Verschachtelung von Tags
Wenn Sie mehrere Tags ineinander schachteln, müssen Sie darauf achtgeben, dass die Tags nicht über Kreuz geschachtelt werden. In den folgenden zwei Quellcodes finden Sie zunächst das falsche Beispiel, danach wie es richtig gehört.
Quellcode
<h1><em><strong> Dies ist eine Überschrift</em></strong></h1>Erläuterung
Wenn Sie von dem Text ausgehen (“Dies ist eine Überschrift”), so müssen Sie, wenn Sie sich von innen nach außen vorarbeiten immer die korrespondierenden Anfangs- und End-Tags vorfinden.
In unserem Beispiel also steht das Anfang-Tag <strong> direkt vor dem Text; nach dem Text steht aber das End-Tag </em>. Sie haben nun die Möglichkeit entweder das korrespondierende End-Tag zu <strong> direkt hinter den Text zu schreiben, oder aber das korrespondierende Anfang-Tag zu </em> direkt vor den Text.
Quellcode
<h1><em><strong> Dies ist eine Überschrift</strong></em></h1>oder
<h1><strong><em> Dies ist eine Überschrift</em></strong></h1>Zusammenfassung
Sie haben nun das Grundgerüst einer HTML-Datei kennengelernt. Dieses setzt sich aus der Document Type Definition und den ineinander geschachtelten HTML -Tags <html> <head> <title></title> </head> <body> </body> </html> zusammen.
Sie lernten ebenfalls, wie ein HTML-Tag generell aufgebaut ist, wie Sie Attribute zu den Tags notieren können und wie Sie HTML-Tags in einander richtig verschachteln können.
Das HTML Einsteigerseminar – ein Tutorial | koschel.IT
Pingback vom 17. Februar 2010 um 13:21
[...] Lektion 1: Grundlagen [...]
Das HTML Einsteigerseminar – Lektion 2 | koschel.IT
Pingback vom 04. März 2010 um 10:27
[...] er einen Absatz, Zeilenumbruch oder andere Formatierungen vornehmen soll. Dazu verwenden wir die in Lektion 1 angesprochenen [...]