Nachdem wir im ersten Teil das Grundgerüst einer HTML Seite kennen gelernt haben, sollen im zweiten Teil nun Inhalte formatiert dargestellt werden.
Nachdem wir geklärt haben, welche Teile es in einem HTML-Dokument
gibt, wollen wir uns jetzt um den Körper, den <body>
der Seite kümmern, und unsere ersten Ausgaben machen. Legen
Sie dazu ein neues Dokument an, mit folgenden HTML-Code.
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<h1>Hallo HTML</h1><hr>
<p align = "left">Das ist das erste HTML-Dokument<br>
welches ich verfasse</p>
</body>
</html>
Speicher Sie diese Seite ab, und schauen sie in ihrem Browser an.
Das Ergebnis sieht müsste (sollte) dem hier gleichen.
Hallo HTML!
Wie Sie sehen haben Sie jetzt insgesamt 4 neue Befehle, oder Tags
kennen gelernt. Die Ausgabe "Hallo HTML" ist größer
als der Rest des Textes, dies liegt daran, das wir den Text zwischen
<h1> Tags gesetzt haben. Dieser <h1> Tag ist
vordefiniert, und gibt den dazwischen liegenden Text als Überschrift
aus. Es gibt unterschiedliche Größen dieser Überschriften,
<h1> ist die größte Überschrift, <h6>
die kleinste. Sie können das ganze in ihrer HTML Seite ja ausprobieren.
Nach der Überschrift folgt ebenfalls ein neuer Teil. Der <hr>
Tag. Er ist für die Horizontale Linie (der graue Balken)
verantwortlich. Dieses hr steht aus dem englischen für horizontal
rule. Dem aufmerksamen Leser wird aufgefallen sein, dass dieser
Tag gar keinen schließenden Tag hat. Der <hr> Tag gehört
zu den wenigen Ausnahmefällen. Warum sollte eine Horizontale
Linie denn eigentlich einen schließenden Tag haben, es macht
eigentlich keinen Sinn.
Der nächste (und letzte) Teil ist für die Ausgabe des
Textes verantwortlich. Es wird durch den <p> Tag ein
sogenannter Blocksatz eingeleitet. Dieser Text soll nach Links ausgerichtet
sein. Diese Ausrichtung wird durch das erste Attribut welches Sie
kennen lernen erreicht, dem align Attribut. Dieses Attribut
gibt die Richtung an, nach welcher der gesamte Text, der zwischen
den <p>-Tags steht, ausgerichtet werden soll. In diesem Fall
ist es left also Links. Weitere Werte die dieses Attribut
annehmen kann sind "right" und "center"
für Rechts oder zentriert.
In diesem sogenannten "Fließtext" finden
Sie einen <br> Tag. Lassen Sie diesen im Code weg,
dann erstreckt sich der Text über eine gesamte Zeile. Er ist
also für einen Absatz verantwortlich, d.h. alles was hinter
diesem <br> steht, erscheint in einer neuen Zeile.
Auch hier wieder das kleine Phänomen, es gibt keinen schließenden
Tag, logischerweise.
Die Standardschriftart der Browser ist meistens "Times New
Roman". Nicht alle Webworker finden diese Schriftart ansprechend,
man sollte auch andere Schriftarten verwenden können, wie in
Word oder anderen Textverarbeitungsprogrammen. Dies kann man mit
der Verwendung des <font> Tags erreichen. Verändern
Sie den Code aus dem ersten Dokument wie folgt.
<p align = "left"><font
face="Arial" size="2pt" color="red">Das
ist das erste HTML-Dokument<br>
welches ich verfasse</font></p>
In der Ausgabe des Textes hat sich noch ein wenig mehr ergeben.
Die Ausgabe
Wie Sie sehen sollten, hat sich die Schriftart in Arial umgewandelt.
Dies wurde durch das "face" Attribut erreicht.
Diesem Attribut wird der Name der Schriftart zugewiesen, in welchem
der Text erscheinen soll. Zudem wurden zwei weitere Attribute verwendet.
Das "size" Attribut, welches die Schriftgröße
in Punkten angibt (probieren Sie einfach mal verschiedene Werte
aus), und das "color" Attribut, welches die Schriftfarbe
angibt. Diese Angabe der Schriftfarbe erfolgt mit dem Namen der
Farbe in Englisch. Mehr zu Farbangaben im Web erfahren Sie später.
Hier ein Hinweiß: Das "color" Attribut können
Sie auf alle Elemente anwenden, sei es jetzt die Horizontale Linie,
oder die Überschriften.
Im zweiten Teil des Kurses haben Sie gelernt, wie Sie Texte ausgeben,
Sie haben die verschiedenen Überschriftsformen, sowie die Horizontale
Linie kenne gelernt.