Erstellen Sie eine richtige HTML-Seite

Gestalten und erzeugen Sie eine Webseite

Dies ist Ihre Chance, das anzuwenden, was Sie gelernt haben, und eine Webseite aus dem wirklichen Leben zu erzeugen. Keine zerstückelten oder übermäßig albernen Beispiele mehr. Die Webseite, die Sie in diesem Abschnitt erzeugen, ist echt, geeignet für den Gebrauch in der wirklichen Welt (oder zumindest der wirklichen Welt des Web).

Ihre Aufgabe in diesem Beispiel: Gestalten und erzeugen Sie die Webseite HTML-Lernen namens HTML-Lernen - Grundlagen und Tutorials (HTML-Webseite erstellen), die sich auf Grundlagen und Tutorials im HTML spezialisiert hat.

Planen der Seite

Ich habe darauf hingewiesen, dass eine Planung Ihrer Web-Site vor dem Schreiben es zumeist leichter macht, die Sache aufzubauen und zu pflegen. Also überlegen Sie sich zuerst den Inhalt, den Sie auf die Seite setzen wollen. Hier sind ein paar Ideen für die Themen auf der Seite:

Die Anschrift und Telefonnummer der Webseite HTML-Lernen
Eine kurze Beschreibung dessen, was die Grundlagen und Tutorials bietet und was die Webseite so einzigartig macht
Aktuelle Titel und Autoren
Kategorien-Beschreibung

So, nun überlegen Sie sich ein paar Ideen für die Inhalte, mit denen Sie diese Seite verknüpfen wollen. Jeder HTML-Artikel aus der Liste der aktuellen Tutorials dürfte ein logischer Kandidat dafür sein; Sie können zudem weitere Informationen über die Webseite selbst und seinen Autor anbieten und die HTML-Grundlagen.

Beginnen Sie mit dem Gerüst

Zunächst erzeugen Sie das Gerüst, das alle HTML-Dateien haben müssen: Angaben zur Strukturierung des Dokuments, einen Titel und eine erste Überschrift. Achten Sie darauf, dass der Titel aussagekräftig, aber kurz ist; Sie können sich einen längeren Titel für das <h1>-Element auf der Seite aufheben. Die vier <h2>- Unterpunkte helfen Ihnen die vier Hauptsektionen Ihrer Web-Site zu definieren.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
	<h1>
		Erstellen Sie eine richtige HTML-Seite
	</h1>
	<h2>
		Kategorie
	</h2>
	<h2>
		HTML - Info
	</h2>
	<h2>
		Aktuelle Artikel (ab dem 15-Nov-15)
	</h2>
	<h2>
		HTML - Text-Gestaltung
	</h2>
</body>
</html>

Jede der Überschriften Ihrer Seite markiert den Anfang eines speziellen Abschnitts dieser Seite. Erstellen Sie einen Anchor für jede der Themen-Überschriften, damit Sie leicht von Sektion zu Sektion springen können.

Die Anchor-Namen sind einfach: top (für die Hauptüberschrift), contents (für die Inhaltstabelle) und about, recent und upcoming für die drei Unterpunkte der Seite. Der revidierte Code mit den Anchor sieht wie folgt aus:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
	<h1>
		<a name="top">Erstellen Sie eine richtige HTML-Seite</a> 
	</h1> 
	<h2>
		<a name="contents">Kategorie</a> 
	</h2> 
	<h2>
		<a name="about">HTML - Info</a> 
	</h2> 
	<h2>
		<a name="recent">Aktuelle Artikel (ab dem 15-Nov-15)</a> 
	</h2> 
	<h2>
		<a name="upcoming">HTML - Text-Gestaltung</a> 
	</h2>

	<!-- Kommentar
		<a href="#top">Anker-Text - Sprung zur Überschrift Erstellen Sie eine richtige HTML-Seite</a>
		<a href="#contents">Anker-Text - Sprung zur Überschrift Kategorie</a>
		<a href="#about">Anker-Text - Sprung zur Überschrift HTML - Info</a>
		<a href="#recent">Anker-Text - Sprung zur Überschrift Aktuelle Artikel (ab dem 15-Nov-15)</a>
		<a href="#upcoming">Anker-Text - Sprung zur Überschrift HTML - Text-Gestaltung</a>
	-->

</body>
</html>

Fügen Sie Inhalt hinzu

Nun beginnen Sie damit, die Seite mit Inhalt zu füllen. Da es um ein literarisches Bestreben geht, würde sich ein kleines Zitat über die HTML-Artikel am Anfang der Seite gut machen. Da es ein Zitat ist, können Sie die <blockquote>-Kennung benutzen, um es als solches erscheinen zu lassen. Die Herkunft der Verse ist eine Quellenangabe, sodass Sie auch die <cite>-Kennung verwenden können.

Geben Sie folgenden Code in die Zeile nach der Überschrift 1. Ordnung ein:


<blockquote>
	"Die HyperText Markup Language oder kurz HTML
	<br />
	geht auf den Erfinder des Web, Tim Berners-Lee, zurück!"
	<br />
	- Darko Pipic, <cite>Grundlagen und Tutorials</cite>
</blockquote>

Fügen Sie gleich nach den Anführungszeichen die Adresse der Webseite "HTML-Lernen" hinzu. Es handelt sich hierbei um einen einfachen Paragraphen, dessen Zeilen mit Zeilenumbruch separiert wurden:


<p>
	HTML - Lernen
	<br />
	Neue Str. 12
	<br />
	18569 Ummanz
	<br />
	(038305) 529-799 
</p>

Fügen Sie ein Inhaltsverzeichnis hinzu

In der von Ihnen erstellten Seite muss man viel scrollen, um vom Anfang der Seite zu deren Ende zu gelangen. Sie könnten diese Seite verbessern und ein kleines Inhaltsverzeichnis am Seitenanfang hinzufügen, die die Sektionen in einer Merkpunktliste auflistet. Klickt ein Leser eines der Links dieser Inhaltstabelle an, wird er oder sie sofort zu der Sektion gelangen, die gewählt wurde. Da Sie die Anchor ja schon erstellt haben, ist es für Sie leicht zu sehen, wo Sie diese Links hinführen werden.

Die Überschriften der Inhaltstabellen haben Sie bereits. Sie müssen jetzt eine Liste und eine Trennlinie hinzufügen. Danach erstellen Sie die Links, die zu den anderen Sektionen der Seite führen. Der Code sieht wie folgt aus:


<h2>
	<a name="contents">Kategorie</a> 
</h2>  
<ul>
	<li><a href="#about">HTML - Info</a></li>
	<li><a href="#recent">Aktuelle Titles</a></li>
	<li><a href="#upcoming">HTML - Text-Gestaltung</a></li>
</ul>
<hr />

Bild zeigt den einführenden Teil der Webseite "HTML-Lernen"-Seite im Safari.

Erstellen die "HTML-Lernen"-Beschreibung

Wir kommen nun zum ersten deskriptiven Unterpunkt der Seite. Einen Unterpunkt haben Sie ja bereits erstellt. Diese Sektion liefert Ihnen eine Beschreibung der Webseite "HTML-Lernen". Nach der Überschrift (1. Zeile des folgenden Beispiels), habe ich die Beschreibung so erstellt, dass sie eine Feature-Liste enthält. Die Features stechen somit besser aus dem Text heraus.


<h2>
	<a name="about">HTML - Info</a> 
</h2> 
<p>
	Es handelt sich bei HTML um eine einfache Sprache, die definiert, welche Elemente eine Webseite enthält und wie diese aussehen:
</p>
<ul>
	<li>HTML-Dokumente sind reine Textdokumente mit Inhalt</li>
	<li>Texte, Überschriften, Bilder, Tabellen etc.</li>
	<li>Dies geschieht über spezielle Zeichenfolgen im Dokument</li>
	<li>die so genannten Tags (gesprochen Tägs)</li>
</ul>

Fügen Sie eine Notiz über die Öffnungszeiten hinzu und markieren Sie die Zahlen:


<p>
	Geöffnet <strong>10h bis 19h</strong> Mo-Fr, <strong>Geschlossen </strong> am Wochenende.
</p>

Beenden Sie die Sektion mit Links zu den Inhaltstabellen und zum Seitenanfang, gefolgt von einem Horizontallineal.


<p>
	<a href="#contents">Zurück zur Kategorie</a> | <a href="#top">Zurück zur Übersicht</a>
</p>
<hr />

Erstellen der Recent-Titles-Sektion

Die Recent-Titles-Sektion ist an und für sich ein klassisches Link-Menü. Sie können hier eine Titelliste in eine ungeordnete Liste eingeben, wobei die Titel selbst Zitate sind (wird mit dem <cite>-Tag erreicht).

Nach der Recent-Titles-Sektion (in der ersten Zeile des folgenden Beispiels aufgeführt), geben Sie folgenden Code ein:


<h2>
	<a name="recent">Aktuelle Artikel (ab dem 15-Nov-15)</a> 
</h2> 
<ul>
	<li>Darko Pipic, <cite>Was HTML ist und was nicht</cite></li>
	<li>Darko Pipic, <cite>So sehen HTML-Dateien aus</cite></li>
	<li>Darko Pipic, <cite>HTML-eigene Zeichen</cite></li>
	<li>Darko Pipic, <cite>XML Info</cite></li>
</ul>
<hr />

Fügen Sie jetzt die <a>-Tags hinzu, um die Links zu erstellen. Wie weit soll das Link erweitert werden? Soll es die gesamte Zeile (Autor und Titel) oder nur den Titel enthalten? Bei dieser Entscheidung sind einzig und allein Ihre Präferenzen ausschlaggebend. Ich persönlich möchte nur zu den wichtigsten Sachen verweisen und sichergehen, dass das Link auch aus dem Text heraussticht. Das ist mir allemal lieber als ein überladener Text. In diesem Beispiel habe ich nur auf die Titel verwiesen und habe Links zur Inhaltstabelle und zum Seitenanfang erstellt:


<h2>
	<a name="recent">Aktuelle Artikel (ab dem 15-Nov-15)</a> 
</h2> 
<ul>
	<li>Darko Pipic, <a href="was-html-ist-und-was-nicht.html"> <cite>Was HTML ist und was nicht</cite></a></li>
	<li>Darko Pipic, <a href="so-sehen-html-dateien-aus.html"> <cite>So sehen HTML-Dateien aus</cite></a></li>
	<li>Darko Pipic, <a href="html-eigene-zeichen.html"> <cite>HTML-eigene Zeichen</cite></a></li>
	<li>Darko Pipic, <a href="xml-info.html"> <cite>XML Info</cite></a></li>
</ul>
<p>
	<a href="#contents">Zurück zur Kategorie</a> | <a href="#top">Zurück zur Übersicht</a>
</p>
<hr />

Das <cite>-Tag befindet sich innerhalb des Link-Tag <a>. Ich hätte es auch genauso einfach außerhalb des <a>-Tag setzen können; Style-Tags können eben überall eingegeben werden. Doch wie ich schon erwähnt habe, passen Sie auf, dass Sie Tags nicht überlappen. Ihr Browser würde sich wahrscheinlich nicht mehr auskennen. Mit anderen Worte: unterlassen Sie Folgendes:


<a href="xml-info.html"><cite>XML Info</a></cite>

In Bild sehen Sie, wie die Recent-Titles-Sektion im Safari erscheint:

Die Kategorie-Beschreibungen vervollständigen

Fahren wir mit der Sektion der kommenden Ereignisse fort. Es macht nicht viel Sinn Links für ein paar Sätze zu erstellen. Für diese Sektion ersellen wir eine Menü-Liste (dabei wird das <ul>-Tag verwendet), die kurze Paragraphen aufzeigt (in einigen Browsern befinden sich Bullets am Anfang eines jeden Paragraphen). Einige Sätze, die sich in der Nähe eines neuen Paragraphen befinden, sind fett gedruckt. Diese Sätze markieren eine Zusammenfassung der Ereignisse selbst. Somit wird über jeden Paragraphen ein schneller Überblick verschafft. Sind die Leser jedoch nicht interessiert, können Sie bestimmte Paragraphen auch einfach ignorieren.

Wie in den vorherigen Sektionen auch, beenden Sie diese Sektion mit Links, die auf den Seitenanfang und den Inhalt verweisen, gefolgt von einer horizontalen Trennlinie:


<h2>
	<a name="upcoming">HTML - Text-Gestaltung</a> 
</h2> 
<ul>
	<li><b>Bevor Sie damit loslegen</b>, tatsächlich etwas in HTML zu schreiben, sollten Sie wissen, was HTML ist, was HTML kann, und besonders, was HTML nicht kann.</li>
	<li><b>In HTML geschriebene Seiten</b> bestehen aus schlichtem Text, was bedeutet, dass sie keine plattform- oder programm-spezifischen Informationen enthalten.</li>
	<li><b>Darko Pipic</b> Habe sehr viele interessante Artikel gefunden <cite>So sehen HTML-Dateien aus.</cite></li>
	<li><b>Heute werden wir die HTML-Tags eingehender behandeln</b>. Sie werden lernen, wie man Überschriften, Paragraphen und verschiedene Listen in die Webseite eingibt!</li>
</ul>
<p>
	<a href="#contents">Zurück zur Kategorie</a> | <a href="#top">Zurück zur Übersicht</a>
</p>
<hr />

Unterschreiben Sie die Seite

Sie sind fertig; unterschreiben Sie also, was Sie erstellt haben, damit Ihre Leser wissen, wer die Arbeit erledigt hat. Ich habe die Signatur hier mit einer Trennlinie vom Text abgesetzt, das letzte Aktualisierungsdatum eingefügt, meinen Namen als "Web-Master" (das ist Web-Jargon und bedeutet: die Person, die für ein Web-System verantwortlich ist) mit einer E-Mail-Anschrift eingesetzt und eine Copyright-Notiz (mit einem Copyright-Symbol, gekennzeichnet durch den numerischen Escape-Code ©):


<hr />
<address>
	Letztes Update: 21-Apr-15
	<br />
	WebMaster: Darko Pipic test@test.com
	<br />
	© copyright 2005 HTML Lernen - Grundlagen und Tutorials
	<br />
</address>

Bild zeigt den unteren Teil der Seite, welche die kommende Ereignis-Sektion und die Seitenunterschrift enthält, wie sie im Safari angezeigt wird.

Schauen wir einmal, was wir haben

Hier ist der bisherige HTML-Code (mit den numerischen Zeichenkodierungen der deutschen Umlaute) für die Seite:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
	<h1>
		<a name="top">Erstellen Sie eine richtige HTML-Seite</a> 
	</h1> 
	<blockquote>
		"Die HyperText Markup Language oder kurz HTML
		<br />
		geht auf den Erfinder des Web, Tim Berners-Lee, zurück!"
		<br />
		- Darko Pipic, <cite>Grundlagen und Tutorials</cite> 
	</blockquote>
	<p>
		HTML - Lernen
		<br />
		Neue Str. 12
		<br />
		18569 Ummanz
		<br />
		(038305) 529-799 
	</p>
	<h2>
		<a name="contents">Kategorie</a> 
	</h2> 
	<ul>
		<li><a href="#about">HTML - Info</a></li>
		<li><a href="#recent">Aktuelle Artikel</a></li>
		<li><a href="#upcoming">HTML - Text-Gestaltung</a></li>
	</ul>
	<hr />
	<h2>
		<a name="about">HTML - Info</a> 
	</h2>  
	<p>
		Es handelt sich bei HTML um eine einfache Sprache, die definiert, welche Elemente eine Webseite enthält und wie diese aussehen:
	</p>
	<ul>
		<li>HTML-Dokumente sind reine Textdokumente mit Inhalt</li>
		<li>Texte, Überschriften, Bilder, Tabellen etc.</li>
		<li>Dies geschieht über spezielle Zeichenfolgen im Dokument</li>
		<li>die so genannten Tags (gesprochen Tägs)</li>
	</ul>
	<p>
		Geöffnet <strong>10h to 19h</strong> Mo-Fr, <strong>Geschlossen </strong> am Wochenende.
	</p>
	<p>
		<a href="#contents">Zurück zur Kategorie</a> | <a href="#top">Zurück zur Übersicht</a>
	</p>
	<hr />
	<h2>
		<a name="recent">Aktuelle Artikel (ab dem 15-Nov-15)</a> 
	</h2>
	<ul>
		<li>Darko Pipic, <a href="was-html-ist-und-was-nicht.html"> <cite>Was HTML ist und was nicht</cite></a></li>
		<li>Darko Pipic, <a href="so-sehen-html-dateien-aus.html"> <cite>So sehen HTML-Dateien aus</cite></a></li>
		<li>Darko Pipic, <a href="html-eigene-zeichen.html"> <cite>HTML-eigene Zeichen</cite></a></li>
		<li>Darko Pipic, <a href="xml-info.html"> <cite>XML Info</cite></a></li>
	</ul>
	<p>
		<a href="#contents">Zurück zur Kategorie</a> | <a href="#top">Zurück zur Übersicht</a>
	</p>
	<hr />
	<h2>
		<a name="upcoming">HTML - Text-Gestaltung</a> 
	</h2>
	<ul>
		<li><b>Bevor Sie damit loslegen</b>, tatsächlich etwas in HTML zu schreiben, sollten Sie wissen, was HTML ist, was HTML kann, und besonders, was HTML nicht kann.</li>
		<li><b>In HTML geschriebene Seiten</b> bestehen aus schlichtem Text, was bedeutet, dass sie keine plattform- oder programm-spezifischen Informationen enthalten.</li>
		<li><b>Darko Pipic</b> Habe sehr viele interessante Artikel gefunden <cite>So sehen HTML-Dateien aus.</cite></li>
		<li><b>Heute werden wir die HTML-Tags eingehender behandeln</b>. Sie werden lernen, wie man Überschriften, Paragraphen und verschiedene Listen in die Webseite eingibt!</li>
	</ul>
	<p>
		<a href="#contents">Zurück zur Kategorie</a> | <a href="#top">Zurück zur Übersicht</a>
	</p>
	<hr />
	<address>
		Letztes Update: 21-Apr-15
		<br />
		WebMaster: Darko Pipic test@test.com
		<br />
		© copyright 2005 HTML - Lernen
		<br />
	</address>
</body>
</html>

Damit haben wir nun also ein paar Überschriften, etwas Text, einige Themen und einige Verknüpfungen. Das ist die Grundlage für eine gute Webseite. An dieser Stelle, wo der meiste Inhalt schon da ist, überlegen Sie sich, ob Sie noch weitere Verbindungen herstellen wollen oder welche anderen Merkmale Sie der Seite noch hinzufügen möchten.

Sie könnten diese Seite mit allen möglichen Sachen verbinden, wenn Sie einen interessanten Anlass für eine solche Verknüpfung hätten (und etwas, womit Sie verknüpfen können). Verbinden Sie die Anschrift der Webseite mit anderen interessanten Webseiten. Verbinden Sie das Zitat mit einer Online-Enzyklopädie von Zitaten. Verbinden Sie den Hinweis auf den kostenlosen Kaffee mit der Kaffee-Homepage.

Für den Zweck unseres Beispiels hören wir hier auf und begnügen uns mit den Verknüpfungen, die wir bereits erstellt haben. Wir sind nahe daran, alles erledigt zu haben, sodass ich dieses Kapitel nicht noch länger machen will, als es ohnehin schon ist!

Testen Sie das Ergebnis

Jetzt, wo der gesamte Code an seinem Platz steht, können Sie sich das Ergebnis mit Ihrem Browser ansehen. Die Abbildung zeigt, wie es im Safari aussieht. So, das ist es, nachdem Sie all Ihre Tippfehler korrigiert haben und die vergessenen abschließenden Kennungen und dergleichen seltsame Fehler, die sich scheinbar immer einschleichen, wenn man zum ersten Mal eine HTML-Datei erzeugt. Und das scheint stets zu passieren, egal wie sorgfältig Sie arbeiten. Wenn Sie einen HTML-Editor oder ein anderes Hilfsprogramm benutzen, wird es ein bisschen leichter, aber Fehler scheint es immer zu geben. Daher brauchen wir eine Vorschau, damit Sie Fehlern auf die Spur kommen, bevor Sie das Dokument tatsächlich für andere Leute verfügbar machen.

Verfeinerungen

Bis jetzt war alles auf der Seite einfaches HTML, sodass es in allen Browsern lesbar ist und auch ziemlich gleich aussieht. Wenn ich jedoch an diesen Punkt gekommen bin, kann ich zusätzliche Formatierungs-Tags und Attribute hinzufügen, die die Seite für viele Leser nicht ändern werden, sie jedoch in Browsern ein wenig schicker aussehen lassen, sofern diese Erweiterungen unterstützt werden.

Welche Erweiterungen wollen wir also verwenden? Ich habe zwei ausgewählt:

Den Titel der Seite, das Zitat und die Adresse des Ladens zentrieren
An der Adresse selbst eine geringfügige Änderung des Schriftgrads vornehmen

Um den obersten Teil der Seite zu zentrieren, werden wir die Überschrift, das Zitat und die Adresse der Webseite HTML-Lernen mit der <div>-Kennung folgendermaßen umschließen:


<div align=center>
	<h1>
		Erstellen Sie eine richtige HTML-Seite
	</h1>
	<blockquote>
		"Die HyperText Markup Language oder kurz HTML
		<br />
		geht auf den Erfinder des Web, Tim Berners-Lee, zurück!"
		<br />
		- Darko Pipic, <cite>Grundlagen und Tutorials</cite> 
	</blockquote>
	<p>
		HTML - Lernen
		<br />
		Neue Str. 12
		<br />
		18569 Ummanz
		<br />
		(038305) 529-799 
	</p>
</div>

Um den Schriftgrad der Adresse zu verändern, umschließen Sie die Zeilen, die die Adresse enthalten, mit der <font>-Kennung:


<p>
	<font size="+1">
		HTML - Lernen
		<br />
		Neue Str. 12
		<br />
		18569 Ummanz
		<br />
		(038305) 529-799
	</font>
</p>

Beachten Sie, dass keine dieser Änderungen die Lesbarkeit der Seite in den Browsern beeinträchtigt, die die <div>- oder <font>-Kennung nicht unterstützen; die Seite sieht auch dort noch gut aus, nur ein wenig anders.

Wann sollten Sie Textformatierungs-Attribute einsetzen? Die Faustregel, der ich am liebsten folge, ist, Erweiterungen nur dann einzusetzen, wenn ihre Verwendung nicht mit anderen Browsern in Konflikt gerät. HTML 4.01 empfiehlt Webseiten-Autoren mit den Style Sheets anstelle der Textformatierungs-Tags, beispielsweise <font>, und Attributen, wie etwa align, zu arbeiten. Allerdings werden Style Sheets nur von den neuesten Browsern unterstützt.