HTML-Kurs für Webdesign-Anfänger

1.1 Einführung

1.1.1 Was ist eigentlich HTML?

Die genaue Bezeichnung von HTML lautet Hypertext Markup Language und es handelt sich nicht - wie einige glauben - um eine Programmiersprache, sondern um eine Auszeichnungssprache (Markup Language). Das bedeutet, dass die verwendeten Befehle lediglich die Art und Weise der Darstellung des Dokumentes im Browser beschreiben. Salopp ausgedrückt kann man auch von einer Formatierung sprechen, denn in HTML wird definiert, ob etwas z.B. kursiv oder fett dargestellt wird. Darauf beschränkt sich HTML natürlich nicht, aber das gehört auch dazu.

Kurzer Ausflug in die Geschichte: der Ursprung von HTML liegt in SGML (Standard Genaralized Markup Language). Diese Sprache wurde 1978 von IBM als eine einheitliche Sprache zur Darstellung von Dokumenten entwickelt. Später wurde diese Sprache als HTML weiterentwickelt und z. Zt. als Standard im WWW (World Wide Web) eingesetzt.

Bei der Gestaltung der Seite ist zu berücksichtigen, dass vielleicht nicht jeder Nutzer aus der eigenen Zielgruppe einen DSL-Anschluss besitzt und schnell surfen kann. Zwar ist das In Deutschland relativ selten geworden, aber insbesondere für Seiten, die für ausländische Nutzer gestaltet werden sollte man darauf achten. Es empfiehlt sich daher, zu prüfen ob auf der Homepage wirklich große Videos und Grafiken eingebunden werden sollen. Auf www.dslweb.de kann man sehen, was aktuell an Internetverbindungen möglich ist. Dabei ist jedoch zu beachten, dass kleinere Dörfer oft noch keine so schnelle Verbindung haben wie größere Städte.

1.1.2 Wie funktioniert HTML?

Der HTML-Code befindet sich (anders als bei den meisten Programmiersprachen) in dem Dokument selbst, das angezeigt werden soll. Der Browser lädt das Dokument, erkennt den darin enthaltenen Code und interpretiert die Befehle zum Darstellen des Dokumentinhaltes. Die Befehle sind von einem Konsortium standardisiert worden - dem W3C. Es gibt verschiedene HTML-Versionen. Dem/der interessierten LeserIn sei die Originalseite des Konsortiums (englisch) ans Herz gelegt. Wissensdurstige erhalten hier alle Fragen beantwortet, die sie je über HTML hatten oder noch haben werden.

1.1.3 Grundgerüst einer HTML-Datei

1.1.3.1 Head

In diesen Bereich werden Angaben eingefügt, die zwar nicht im Browser dargestellt werden, die aber trotzdem von einiger Bedeutung, z.B. für Suchmaschinen, sind. So gehört der Titel der Seite <title> Meine schöne neue Website </title> in diesen Bereich. Er wird in der Titelzeile des Browsers angezeigt. Weiterhin werden hier sogenannte Meta-Tags, die ebenfalls für Suchmaschinen gedacht sind, angegeben.

1.1.3.1.1 Meta-Tags

Es gibt eine ganze Reihe von unterschiedlichen Meta-Tags, die für verschiedene Suchmaschinen von unterschiedlicher Wichtigkeit sind.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Hier wird der Suchmaschine mitgeteilt, mit welchem Zeichensatz die Seite erstellt wurde. Wir hier in Deutschland und anderen westlichen Ländern benutzen ISO-8859-1
<meta name="description" content="Hier kommt die Beschreibung Ihrer Seite rein">
<meta name="keywords" content="Hier schreiben Sie in Stichworten rein, welchen Inhalt Ihre Seite hat">
<meta name="language" content="de"> Hier wird der Suchmaschine mitgeteilt, in welcher Sprache Ihre Seite erstellt wurde. DE steht für deutsch.
<meta name="robots" content="index, follow"> Hier sagen Sie der Suchmaschine, ob sie die Seite indizieren soll und ob sie eventuellen Links folgen soll.

Es gibt noch einige andere Meta-Tags, doch ich denke, das sind die wichtigsten.

In der Rubrik Tools finden sie einen Websitecheck. Testen Sie Ihre Seite online mit diesem Tool und Sie bekommen ein paar wertvolle Ergebnisse zum Aufbau Ihrer Website analysiert.

1.1.3.2 Body

In diesem Bereich wird der ganze darzustellende Inhalt hinterlegt mitsamt den zugehörigen Codes, hierzu gehört z.B. auch die Angabe der Hintergrund- und Schriftfarbe. Ebenfalls werden hier Grafiken, bei Bedarf Sound- und Videodateien eingebunden uvm.

1.1.4 Zusammenfassung

Die Grundstruktur einer Website sieht zusammengefasst in etwa so aus:

<html>
<head>
   <title>Meine schöne neue Website</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="description" content="...">
   <meta name="keywords" content="...">
   <meta name="language" content="de">
   <meta name="robots" content="index, follow">
</head>
<body>
   In diesem Bereich befindet sich alles, was angezeigt wird.
</body>
</html>

weiter zu Textumbruch (1) »

« zurück zur Übersicht