Links zu den Teilen:
3D-wir_lernen_htmlxml-3.gif

Wir lernen in Fortsetzungs-Kursen auf dieser Seite Web-Technik und Web-Publishing in HTML, später auch in XML. Evtl. wird der Kurs noch erweitert in Javascripting und/ oder PHP-Programmierung. Auf der linken Navigations-Seite können Sie die Folgen anklicken, die bisher erschienen sind.


Teil 2:

Wir kommen zur Sache

Nach der Einleitung im ersten Teil unserer Serie "Wir lernen HTML", in dem wir die Entstehungs-Geschichte von HTML in Kurzfassung kennen gelernt haben, kommen wir in diesem 2. Teil zur Sache. Es werden hier und in weiteren Folgen tatsächlich nur die Strukturen und die Syntax von HTML erläutert, also die Technik vermittelt, wie man mit HTML eine Webseite erstellt. Das Design einer Webseite, wie man sie optisch gestaltet und welche Fehler man dabei unbedingt vermeiden sollte, ist wieder ein anderes Kapitel, dass in diesem Kurs nicht behandelt wird. Also gehen wir gleich in "medias res":

2.1:

Tags und Elemente

Tags sind die wichtigen Begrenzungszeichen für HTML-Elemente. Jedes HTML-Element ist in diesen Tags eingeschlossen. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Das einleitende Tag ist eine spitze offene Klammer <, wogegen das abschließende Tag durch die spitze schließende Klammer > dargestellt wird. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Alle Web-Browser (IE-Explorer, Mozilla, Opera usw.) suchen nach diesen Tags, den spitzen Klammern, um den Inhalt (Element) zu interpretieren und richtig auf dem Bildschirm darstellen zu können. Für die meisten Elemente sind Start- und Ende-Tags erforderlich. Beispielsweise beginnt das FORM-Element mit <FORM> und endet mit </FORM> Wenn eines dieser Tags weggelassen wird funktioniert das Formular nicht und verursacht möglicherweise sogar Fehler in den benachbarten Elementen.

Hier ein Beispiel eines Elements: <h1> HTML - die Sprache des Web </h1>

Erläuterung:
Das Beispiel zeigt eine Überschrift 1. Ordnung. Das einleitende Tag <h1> signalisiert, dass eine Überschrift 1. Ordnung folgt (h = heading = Überschrift). Das abschließende Tag </h1> signalisiert das Ende der Überschrift. Ein abschließendes Tag beginnt mit einem Schrägstrich "/".

Wichtig ist noch zu erwähnen, dass alle Elementnamen in Kleinbuchstaben zu schreiben sind. Im "alten" HTML spielte es kein Rolle, ob Groß-oder Kleinbuchstaben geschrieben wurden, dagegen verlangt XHTML zwingend die Angaben in Kleinbuchstaben. Es ist jedoch von Vorteil, sich von vornherein an Elementnamen in Kleinschreibweise zu gewöhnen.

Es gibt aber auch einige Elemente mit Tags, die für sich alleine stehen, d.h. Elemente, die keinen Inhalt haben und deshalb nur aus einem Tag bestehen statt aus Anfangs- und End-Tag.

Beispiel:
Eine Zeile, mit einem Zeilenumbruch <br>
und das ist die nächste Zeile.

Es gibt noch andere Elemente, die nur ein Start-Tag und kein Ende-Tag haben, beispielsweise das IMG-Element. Alles, was zum Einfügen eines Bildes nötig ist, ist im Start-Tag und seinen Attributen enthalten.

Beispiel:
<img src="Bild.gif" alt="Bild.gif" width="400" height="60" border="0">

Erläuterung:
Img= Image (das Bild); src= die URL der Bild-Datei; width= Breite, die für das Bild zu reservieren ist; height= Höhe, die für das Bild zu reservieren ist; border= das Bild soll ohne Rahmen dargestellt werden.
Innerhalb des IMG-Tags sind die Angaben "src", "alt", "width", "height" und "border" nur Attribute für das IMG-Element.
Eigentlich sind die oben aufgeführten Attribute schon veraltet, aber immer noch gültig. Wie man ein IMG-Element noch besser definieren kann, lernen wir später.

Verschachtelung von Elementen

Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. Deshalb sprechen Fachleute auch von strukturiertem Markup.

Beispiel:
<h1><i>HTML</i> - die Sprache des Web</h1>

Erläuterung:
Das <i>-Element steht für italic (= kursiver Text). Der Text zwischen <i> und </i> wird als kursiv interpretiert, abhängig von der eingestellten Schriftart und Schriftgröße für die Überschrift 1. Ordnung. Nach dem Ende-Tag </i> gilt für den Rest des Elementes wieder die vorher eingestellte Schriftart, also nicht mehr kursiv.

Friedhelm Rubach

Fortsetzung im Kurs-Teil 3

Notiz: Wenn Sie mit einem Link mehrere Seiten im Kurs "überspringen" wollen, müssen Sie sich oben der Pull-down-Menüs bedienen. Dazu muss aber in Ihrem Browser JavaSript aktiviert sein, sonst funktionieren diese nicht!


drucker.gif Druckversion von Teil 2 >



TOP

Zurück zur Hauptseite