HTML - Kurs 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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: