Inhaltsverzeichnis -> Erstellung einer Homepage

HTML: Die Erstellung einer ersten Homepage

In diesem Kapitel möchte ich die praktische Arbeit mit Ihnen fortsetzen und eine erste Homepage mit Ihnen erstellen. Die Homepage soll als Online-Visitenkarte fungieren. Wir werden daher unser Ziel schnell erreichen.

Unter dem folgenden Link finden Sie die Beispieldatei, die ich nun mit Ihnen erstellen möchte: Erste Homepage

Diese Seite ist graphisch noch nicht aufgereitet, weil man am Anfang eines HTML-Projekts grundsätzlich nur die inhaltlichen Elemente darstellt und sich erst später um graphische kümmert. HTML ist auch nur eine rein inhaltliche Auszeichnungssprache. Um z.B. Schriften, Farben oder Hintergründe fest vorzugeben, verwendet man zusätzlich die Auszeichnungssprache CSS, die in einem anderen Kapitel behandelt wird.

In diesem Beispiel haben wir es nun mit zwei neuen Elementen zu tun: mit Absätzen und mit Listen. Der Absatz ist das vielleicht am häufigsten benutzte Element in HTML. Absätze zeichnen sich dadurch aus, dass vor und nach dem Text ein Abstand von einer Zeile eingehalten wird. Absätze werden mit einem p-Tag markiert.

Die Liste wird in unserem Dokument mit einem ul-Tag eingeleitet. Dieser Tag steht für eine nichtnummerierte Liste. Um nummerierte Listen zu erzeugen benutzen Sie das ol-Tag. Die einzelnen Listenelemente werden immer mit li-Tags markiert.

Damit Sie den folgenden Code besser verstehen können, habe ich Kommentaren hinter einige Anweisungen gesetzt. Kommentare werden in der Sprache HTML zu Beginn mit den Zeichen <!-- und am Ende mit den Zeichen --> markiert, damit der Browser erkennt, dass dieser Text nicht dargestellt werden soll.

Auch Sie können Kommentare später dazu verwenden, Ihren eigenen Code besser lesbar zu machen.

<html>

<head> <!-- Der Kopfbereich -->

<title>Homepage von XY</title>

</head>

<body> <!-- Der Bereich, der im Browser angezeigt wird -->

<h1>Homepage von XY</h1>

<p>Herzlich Willkommen auf meiner Homepage!</p> <!-- ein Absatz -->

<p>Links:</p> <!-- noch ein Absatz -->

<p>

<ul> <!-- Unsere Liste beginnt -->
<li>Hobby</li> <!-- Der erste Punkt -->
<li>Urlaubsbilder</li> <!-- Der zweite ... -->
<li>Impressum</li>
</ul> <!-- Unsere Liste ist zuende -->

</p>

</body>

</html>

nächstes Kapitel - Inhaltsverzeichnis