WEBFEATURES: HTML für Einsteiger

Html für Einsteiger

Aufbau einer HTML-Seite

Ein Dokument besteht aus bestimmten untergeordneten Bestandteilen wie Überschriften, Absätzen oder Listen. Diese können selber ebenfalls definierte Eigenschaften besitzen, aber auch weitere Unterelemente. Eine Tabelle besteht z. B. aus Tabellenzellen, deren Eigenschaften sich von der übergeordneten Tabelle unterscheiden können.

Alle Befehle in HTML sind mit sogenannten Tags umschlossen:

<Befehl>Element</Befehl>

Die Tags bestehen immer aus < und >, wobei das abschließende Tag zusätzlich vorn noch einen Slash ( / ) aufweist.

<title>Meine Homepage</title>

Eine HTML-Seite hat einige Grundbestandteile, die bei jeder Seite gleich sind. Sie besteht aus einem sogenannten Kopf (head) und einem Körper (body). Im Dateikopf stehen Angaben, die Informationen über die Seite enthalten (sogenannte Metatags), Verweise auf StyleSheet-Dateien oder auch Programme, z. B. in JavaScript. Im Dateikörper sind alle Informationen über den Aufbau und das Aussehen der Seite und die dabei verwendeten Elemente wie Text und Grafiken enthalten.

Zu Beginn jeder Seite sollten oberhalb des ersten Tags Angaben über die verwendete DOCTYPE und die HTML-Version sowie die Sprache gemacht werden. Es folgt das HTML-Tag, dann der Kopfteil, von <head></head> umschlossen. Innerhalb des head sollte in <title></title> der Seitentitel angegeben werden. Dieser sollte möglichst aussagekräftig sein. Die Angabe eines Seitentitels ist zwar nicht zwingend erforderlich, aber wer möchte schon seine mühevoll erstellte Seite im Browser oder einer Suchmaschine als "untitled document" wiederfinden. Außerdem ist es ein wichtiges Kriterium für Suchmaschinen beim Ranking der Seiten (auch über Suchmaschinen ist bei Webfeatures ein Kapitel vorgesehen...demnächst! ;-) ). Nun wird mit <body></body> der Dateikörper definiert. Die folgenden Kapitel werden sich mit dem Füllen dieses "Körper"-Teils befassen.

Ein Beispiel für eine einfache HTML-Seite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Homepage von Hans Meyer</title>
</head>

<body>

Hier stehen die Inhalte.

</body>
</html>

Beispielseite anschauen

Das <body> - Tag hat einige Eigenschaften, die für die Gestaltung einer guten HTML-Seite wichtig sind:

Hintergrundfarbe:		bgcolor
Hintergrundbild:		background
Text und Links:		text, link, alink, vlink
Seitenabstände:		margin (allgemein), topmargin, leftmargin, marginwidth, marginheight

So sieht es dann im Quelltext aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Attibute des Body-Tags</title>

</head>

Hier stehen die Inhalte.

</body>
</html>

Beispielseite anschauen

Anm.: Da die Hintergrundgrafik transparent ist, ist auch die Hintergrundfarbe zu sehen. Bei nichttransparenten Hintergrundbildern überdeckt die Hintergrundgrafik die Hintergrundfarbe.

Angaben zu den Eigenschaften stehen in Anführungszeichen. Wichtig ist, daß man die Anführungszeichen nicht vergißt, sonst kann es sein, daß der Browser sie falsch interpretiert und die Seite ganz anders aussieht, als man beabsichtigt hatte.

Farben werden im HTML-Quellcode in sogenannten Hexadezimalzahlen angegeben. Als Zeichen, dass der Zahlenwert als Hexadezimalzahl zu verstehen ist, wird davor ein Lattenkreuz gesetzt. Farbwerte haben immer sechs Ziffern. Jeweils zwei davon stehen für Rot, Grün und Blau. "00" bedeutet, das die entsprechende Farbe nicht vorhanden ist, während "FF" den höchsten Anteil der Farbe bedeutet. Demnach hat die Farbe Weiß den Wert #FFFFFF, denn Weiß setzt sich aus dem höchsten Anteil aller Farben zusammen. Schwarz dagegen ist durch die Abwesenheit von Farbe definiert, hat also den Hexadezimalwert #000000.
Für Interessierte: Grundlage bildet hier die additive Farbenlehre.

	Rot	Grün	Blau
#	FF	00	00	Knallrot
#	00	FF	00	Quitschgrün
#	00	00	FF	Völlig Blau

Noch wird einiges, was in dem Beispiel im Quelltext angegeben ist, unverständlich sein, aber das wird sich schon bald ändern, falls Sie weiterlesen.... :-)

"Quelltext" wird übrigens die Sammlung von HTML-Tags genannt, die der Browser "liest" und dann in eine gut lesbare Internetseite umsetzt. Es gibt viele Browser - die bekanntesten sind der "Internet Explorer" von Microsoft und der "Netscape Navigator". Daneben gibt es noch viele andere Browser, z. B. "Opera" oder unter dem Betriebssystem Linux der "Konqueror".

Da Inhalte in Form von Texten sozusagen das Fleisch einer guten HTML-Seite darstellen (und außerdem gehört an einen richtig guten Body auch eine wohldosierte Menge Substanz - wer mag schon nur Haut und Knochen?), ist das das nächste Thema:

Formatierung von Texten