|
 Das World Wide Web
ist ein Teil des Internets und hat sich wegen seiner vielfältigen Möglichkeiten
und der einfachen Bedienung zum wichtigsten Dienst im Internet
entwickelt. Das WWW ist nicht nur leichter zu bedienen, jeder kann mit
mehr oder weniger geringem Aufwand eigene Seiten im WWW veröffentlichen.
Mit den entsprechenden Programmen ist die Gestaltung einer Webseite
heute nicht schwerer als eine Textverarbeitung. Doch auch mit den besten
grafischen Editoren steht jeder irgendwann einmal vor dem Problem,
direkt am HTML-Code etwas zu erstellen. Der folgende Artikel soll nun
die grundlegende Funktionsweise von HTML erläutern.
Was
ist HTML ?
HTML ist eine
Dokumentbeschreibungssprache und bedeutet HyperText
Markup Language. Eine
HTML Datei besteht aus reinem Text, besteht also aus Buchstaben, Zeichen
und Zahlen. Ein HTML Dokument besteht aus Steuerzeichen, denn
sogenannten Tags. Diese Tags bestimmen, wie Elemente wie Text, Überschriften,
Tabellen, Listen, Bilder etc. auf der Webseite aussehen. Die Anzeige der
HTML-Datei übernimmt letztendlich der Browser. Er liest den
HTML-Rohtext ein und interpretiert die Tags, die darin enthalten sind.
Anhand des folgenden Beispiels lässt sich der Aufbau eines
HTML-Dokumentes gut erkennen:
<html>
<head>
<title>Eine Webseite</title>
</head>
<body>
Ein HTML-Beispiel
</body>
</html>
Hierbei handelt es
sich um eine minimale HTML-Datei, die jeder Browser problemlos anzeigt.
Die Seite enthält einen Seitentitel, und eine Zeile Text. Innerhalb
einer HTML-Datei gibt es zwei Bereiche, den "Kopf" und den
"Körper". Im Kopf stehen Angaben, für die ganze Webseite.
Die Tags <title></title> umfassen den Text, der als
Seitentitel in der Titelleiste eines Browsers erscheinen soll. Der Titel
ist wichtig, wenn ein Surfer beispielsweise eine Internetseite in die
Favoritenliste des Browsers übernehmen möchte. Denn die meisten
Browser übernehmen als Listennamen hier den Titel der Webseite. Auch für
viele Suchmaschinen ist der <titel>-Tag der Seite wichtig. Im
Head-Bereich sind aber neben dem Seitentitel auch noch etliche andere
HTML-Tags erlaubt. Hier befinden sich beispielsweise die META-Tags für
die Suchmaschinen oder kleine Javascript-Programme. Der Körper (body)
enthält dagegen alle Angaben, die der Browser als Webseite in einem
Fenster darstellt. Die <body>-Tags begrenzen den sichtbaren Teil
der Webseite. Steht hier einfach nur Text, so würde der Browser in der
Standardschrift ohne weiteren Formatierungen den Text anzeigen.
Formatierungen
Der Browser kümmert
sich nicht im geringsten um die Formatierung von Texten. Zeilenumbrüche
setzt der Browser dort, wo sie entsprechend der Fenstergröße passen.
Mehrere Leerzeichen hintereinander gelten nur als ein Leerzeichen, ein
Return wird als Absatzzeichen einfach ignoriert. Damit der Browser nun
erkennen kann, welche Zeichen zur Überschrift und welche zum Fließtext
gehören, werden die Bereiche mit Tags markiert. HTML kann sechs
verschiedene Überschriften, die mit den Tags
<h1></h1>
bis <h6></h6>
gekennzeichnet sind.
H1 entspricht dabei der Hauptüberschrift und die anderen sind kleinere
Kapitelüberschriften. Wie eine Überschrift dargestellt wird
entscheidet der Browser. Als HTML-Code könnte das ganze so aussehen
<h1>1.
Überschrift</h1>
<h2>1.1 Überschrift 2</h2>
Vor und nach einer Überschrift
macht der Browser automatisch einen Zeilenumbruch. Auch Fließtext
gliedert sich in Absätze! In einer Webseite kennzeichnet man einen
Absatz mit den Tags <p></p>.
Vor und nach einem Absatz machen die meisten Browser einen
Zeilenumbruch. Möchte man einen Zeilenumbruch erzwingen, so kann dies
mit dem Tag <br>
erreicht werden. Doch sollte man bedenken, dass mehrere <br>-Tags
hintereinander nicht von allen Browsern mit mehreren Leerzeilen
interpretiert werden.
Attribute
Praktisch jeder Tag
darf innerhalb der spitzen Klammern durch zusätzliche Angaben ergänzt
werden. Diese Angeben sind die Attribute. Die Ausrichtung von Text wird
beispielsweise durch das Attribut align
definiert. Erlaubt sind dabei folgende Werte:
align=left
align=center
align=left
Von oben nach unten
bedeutet das linksbündig, zentriert und rechtsbündig. Linksbündig ist
dabei die Standardeinstellung und muss nicht angegeben werden. Die Tags
für Überschriften können beispielsweise so ergänzt werden:
<h1
align=center">Überschrift 1</h1>
Zugleich gibt es auch
einen universellen Tag: <div></div>. Zunächst markiert
dieser Tag nur einen bestimmten Bereich einer Webseite. Über die
Attribute kann aber festgelegt werden, welche Formatierungen auf diesen
Bereich angewandt werden.
Sonderzeichen
Ein Text kann auch
eine Menge Sonderzeichen enthalten. Das Problem beginnt beispielsweise
bei den deutschen Umlauten. Bei Betriebssystemen wie Apple Macintosh
oder Unix/Linux erscheinen die deutschen Umlaute als irgendwelche
Zeichen. Denn der Zeichensatz dieser Computer sind anders kodiert. Das
Internet kann ohne besondere Vorkehrungen nur einen Basiszeichensatz von
127 Zeichen übertragen. Die Umlaute befinden sich aber im zweiten Teil
des ASCII Zeichensatzes im Bereich 128 bis 255. Deshalb gibt es für
Umlaute und andere Sonderzeichen eigene Tags. Diese beginnen mit einem
kaufmännischen UND "&" und enden mit einem Strichpunkt
";". Für ein kleines "ä" steht im HTML-Text ä.
Das große "Ä" bekommt ein Ä.
Naturgemäß sind für Sonderzeichen Ersatzcodes erforderlich.
|
ä
|
ä
|
|
Ä
|
Ä
|
|
ö
|
ö
|
|
Ö
|
Ö
|
|
ü
|
ü
|
|
Ü
|
Ü
|
|
<
|
<
|
|
>
|
>
|
|
ß
|
ß
|
|
&
|
&
|
|
"
|
"
|
Hyperlinks
Hyperlinks oder
Verweise sind das entscheidende im Internet. Links sind der Kerngedanke
des World Wide Web und machen erst die grenzenlose Verknüpfung möglich.
Durch Anklicken einer bestimmten Textstelle oder einer Grafik springt
man zu einer anderen Stelle. Mit den Hyperlinks kann eine Homepage
elegant in mehrere überschaubare Bereiche aufgespaltet werden.
Verantwortlich dafür ist der <a>-Tag
mit einigen zusätzlichen Parametern:
<a
href="test.htm">Test</a>
href=
gibt an, zu welcher Datei oder Webseite verzweigt
werden soll, der Name folgt in Anführungszeichen. Dabei handelt es sich
um den Dateinamen, unter dem die Seite gespeichert wurde. Der Text
"Test" wird hier zum Hyperlink und verweist beim Anklicken auf
die Datei test.htm im selben Verzeichnis. Meistens ist der Text blau
oder unterstrichen. Den Abschluss bildet </a>.Doch
auch der Sprung zu anderen Seiten im Web ist möglich. Im HTML-Code ist
der Unterschied minimal. Ergänze den kompletten Dateinamen einfach
durch die Webadresse:
<a
href="http://www.pcglobe.de">PC Globe</a>
Dabei kann jede
Web-Adresse angegeben werden, die sonst auch der Browser akzeptiert. Es
ist auch möglich mit einem Link auf eine E-Mail Adresse zu verweisen:
<a
href="mailto:webmaster@pcglobe.de">Mail</a>
Bei einem Klick auf
"Mail" öffnet sich das Standardmailprogramm um eine E-Mail zu
versenden. Wer längere Dokumente hat, macht eine
"Sprungleiste" Sinn. Die einzelnen Unterpunkte werden
aufgelistet und mit einem Mausklick zeigt der Browser an die
entsprechende Stelle. Dazu müssen natürlich zuerst die Zielpunkte
gesetzt werden:
<a
name="Ziel">Ziel 1</a>
Damit wurde das Wort
"Hierher" als Ziel für einen Hyperlink definiert. Der
Hyperlink für das Ziel muss nun so aussehen:
<a
href="#Ziel">Ziel 1</a>
Befindet sich der
Anker in einer anderen Datei, so muss die Seite mit angegeben werden:
<a
href="seite.htm#Ziel">Ziel 1</a>
Bilder
 Eine Homepage besteht
natürlich nicht nur aus Text, sondern auch aus Bildern. Da eine
HTML-Datei eine reine Textdatei ist, sind die Bilder separat in
einzelnen Bilddateien gespeichert. Eine Webseite besteht also in der
Regel aus mehreren Dateien. Beim Dateiformat der Bilder haben sich zwei
Formate etabliert: JPEG-Bilder oder GIF-Bilder. JPEG eignet sich
allgemein eher für große Bilder mit vielen Farben und GIF für
kleinere Bilder mit bis zu 256 Farben. Sobald ein Bild fertiggestellt
wurde und in das Verzeichnis mit der HTML-Datei kopiert wurde, kann es
folgendermaßen eingebunden werden:
<img
src="bildname" alt="Beschreibung">
Ersetze Bildname mit
dem Namen eines Bildes, das im gleichen Verzeichnis wie die HTML-Datei
liegt. Das Bild muss im GIF- oder JPG-Format sein. Es kann aber auch
eine Internetadresse eines Bilde eingeben werden, z.B.:
<img
src="http://www.domain.de/bild.jpg">
Beschreibung wird mit
einer kurzen Information über das Bild ersetzt. Diese erscheint dann,
wenn das Bild gerade geladen wird oder wenn man mit der Maus über das
Bild fährt.
Mit Hife von folgenden Attributen kann die Höhe eines Bildes bestimmt
werden:
<img
src="bildname" height="X" width="X">
height bestimmt die Höhe,
width die Breite. Ersetze X mit der gewünschten Höhe bzw. Breite des
Bildes in der Einheit Pixel.
Wird nur die Höhe oder nur die Breite angegeben, wird die andere Größe
so angepasst, dass das Bild proportional bleibt. Durch die Angabe von
sowohl Größe als auch Breite könnten das Bild quetschen oder dehnen.
Normalerweise sollte immer dir Originalgröße angegeben werden, damit
der Browser Platz für die Bilder lässt und schon mal den Text aufbaut.
Genauso wie Text können auch Bilder als Hyperlink eingesetzt werden.
Das funktioniert dann genauso wie beim Text:
<a
href="test.htm"><img src="test.htm" height="15"
width="15"></a>
Damit der Leser der
Homepage auch erkennen kann, dass es sich um einen Hyperlink handelt,
wird das Bild normalerweise eingerahmt. Mit dem Attribut border="0"
im <img>
Tag kann dies aber unterbunden werden.
Der
Hintergrund
Mit dem <body>-Tag
kann ein Hintergrundbild eingefügt werden. Dieses Bild wiederholt sich
vertikal und horizontal unendlich oft, so dass es denn gesamten
Homepagehintergrund füllt Der erweiterte Body-Tag lautet:
<body
background="hintergrundbild">
"hintergrundbild"
wird durch den Namen des Bildes ersetzt, das sich im gleichen Ordner wie
die HTML-Datei befinden muss. Es muss sich außerdem um ein JPG- oder
GIF-Bild handeln oder um eine Internetadresse, welche auf ein Bild
verweist, beispielsweise:
<body
background="http://www.domain.de/bg.gif">
Der <body>-Tag
besitzt zwei weitere Erweiterungen womit Hintergrundfarbe und Textfarbe
bestimmt werden können:
<body
bgcolor="farbe" text="farbe">
Anstatt "farbe"
muss die englische Bezeichnung der gwünschen Farbe eingegeben werden.
Die 9 wichtigsten Farbkennzeichnungen sind:
Schwarz=black
Grün=green
Blau=blue
Kastanienbraun=maroon
Rot=red
Gelb=yellow
Silber=silver
Orange=orange
Weiß=white
Da man natürlich
noch mehr als diese 9 Farben anzeigen kann, werden andere Farben in
Hexcode angegeben. Beispielsweise wäre #000000 schwarz und #FFFFFF weiß.
Für die Angabe dieses Codes gibt es aber entspechende Tools und ein
guter HTML-Editor hat so eine Funktion ebenfalls integriert.
Die
Schriften
Desweiteren kann auch
die Schriftgröße wie folgt festgelegt werden:
<font
size="X">Text</font>
Anstatt von X kann
eine Zahl zwischen 1 und 7 eingesetzt werden, Die Standardschriftgröße
ist 3. Ihre Besucher werden allerdings nicht in allen Browsern den Text
gleich groß sehen. Denn Faktoren wie Bildschirmgröße, Bildschirmauflösung
und Voreinstellung im Browser können Schriftgrößen beeinflussen.
Die Schriftfarbe eines beliebigen Textes wird wie folgt bestimmt:
<font
color="farbe">Text</font>
Anstatt Farbe muss
der englische Name der gewünschten Farbe oder der entsprechende
Hex-Code eingegeben werden. Natürlich können Schriftgröße und
Schriftfarbe kombiniert werden, in dem man die Attribute in einen Tag übernimmt:
<font
color="farbe" size="X">Text</font>
Die Schriftart kann
ebenfalls bestimmt werden:
<font
face="Schriftart">Text</font>
 Schriftart wird durch
die entsprechende Schriftart ersetzt, beispielsweise Arial. Allerdings
sehen andere Internetsurfer den text nur dann in der ausgewähltem
Schriftart, wenn diese ebenfalls die Schriftart installiert haben.
Ansonsten wird der Text in der Standardschriftart, also "Times New
Roman" angezeigt. Bedenke, dass ausgefallene Schriftarten schwer zu
lesen sind. Beliebt dagegen sind seriflose Schriften wie
"Arial" oder "Verdana".
Die
Trennlinie
Um Abschnitte zu
trennen, bietet sich die Trennlinie an. Dabei handelt es sich um
horizontale Leisten. Der HTML-Tag ist einfach:
<hr>
(hr wie engl. horizontal
rule = horzizontale Leiste)
Um den Reliefeindruck
der Leiste aufzuheben, fügst Du das Attribut noshade (deutsch: kein
Schatten) hinzu:
<hr
noshade>
Mit size="X"
kann die Dicke und mit width="X%"
die Weite in Prozent, aber auch in Pixel angegeben
werden.
Die
Listen
Auch für
Aufzählungslisten gibt es Tags. Diese bewirken, dass die Liste mit Aufzählungspunkten
ausgestattet wird:
<ul>
<li>Punkt1
<li>Punkt2
</ul>
Schreibe einfach
hinter <li>
(li für engl. list )
auflisten) den gewünschten Text. Text zwischen <ul>-Tags (ul für
engl. unumbered list =
unnumerierte Liste) wird eingerückt.
Kommentare
In einem
HTML-Quelltext können Kommentare eingefügt werden, die nicht vom
Browser angezeigt werden. So können Layoutinformationen oder andere
relevante Informationen im Quelltext eingegeben werden:
<!--
Kommentar -->
Es können aber auch
ganze HTML-Tags unwirksam gemacht werden:
<!--
<img src="ich.gif" alt="Bild von mir"> -->
XHTML,
der neue Standard
Zum Jahresende will
das W3C einen Nachfolger von HTML 4.0 vorstellen: XHZML 1.0. Die Idee
dahinter ist zukunftsträchtig: XHTML definiert den aktuellen Standard
HTML 4.0 so um, dass er kompatibel zu XML wird. Die praktischen Änderungen
haben für Web-Autoren allerdings keine großen Auswirkungen. XHMTL ist
aber ein großer Schritt vorwärts, denn die Orientierung an XML
erleichtert die Erweiterung um zusätzliche Tags. Wenn der
XHTML-Standard verabschiedet ist, will das W3C XHTML-Module definieren.
Damit lässt sich die Sprache dann nach belieben erweitern. Die Änderungen
zielen vor allem auf den Wildwuchs im HTML-Code, denn die Browser oft
tolerieren. Nachzulesen sind die Änderungen unter www.w3.org/TR/xhtml1.
Weiterführende
Links
 Mit den HTML-Tags,
welche bis jetzt besprochen wurden, kannst Du schon sehr vieles
verwirklichen. Das heißt den "Grundwortschatz" kennst Du nun.
Natürlich ist das Thema noch lange nicht abgedeckt. HTML bietet noch
viel mehr Möglichkeiten zur Webseiten-Gestaltung. Mit DHTML lassen sich
Dinge auf der Webseite animieren und Javascript stellt eine komplexe
Script-Sprache zur Verfügung. Wer tiefer in die Welt von HTML, DHTML,
Javascript, CGI, CSS einsteigen möchte sollte sich Selfhtml von Stefan
Münz anschauen. In mühsamer Kleinarbeit hat der Autor eine
umfangreiche und präzise Dokumentation von HTML verfasst. Diese
Dokumentation hat mittlerweile Kultstatus und ist auch als Buch verfügbar:
Wie
schreibe ich ein HTML-Dokument ?
Eine sehr einfache Beschreibung von Grundelementen und dem Umgang
mit diesen. Von schwierigeren HTML-Elementen wie Tabellen oder Frames
wird hier nichts geschrieben.
(DEUTSCH / Für Anfänger)
pc
NETMAN's HTML-Info-Uebersicht
Sehr einfache Einführung der stilistischen Elemente und ausführliche
Beschreibung der Grundelemente. Gut geeignet als erweiterbares
Grundwissen über HTML.
(DEUTSCH / Für Anfänger)
Beginners
Guide to HTML...
Optisch sehr ansprechende Referenz über die Benutzung von
HTML und Erstellung von HTML-Seiten in Englisch.
(Englisch / SEHR GUT)
HTML-Dateien
selbst erstellen
Das "Kompedium für HTML-Entwickler beschäftigt sich
umfangreich mit allen möglichen Themen rund um HTML und das Internet.
beinhaltet auch Kurzbeschreibungen von Java, VRML, DHTML und CGI. Die
neuste Version kann online gelesen, downgeloaded oder als Buch bestellt
werden.
(DEUTSCH / SEHR GUT)
HTML
und mehr
Diese Referenz über HTML umfasst alle Gebiete und beschäftigt sich
auch teilweise mit der Einbindung von Java-Script. Voraussetzung ist ein
Mindestwissen über Tags und HTML.
("Östereicherisch" / GUT)
Die
goldenen Regeln des HTML
Hier wird auf lustige und sarkastische Art die negative
Gebrauchseise von HTML beschrieben die heutzutage häufig angewandt
wird. Das Dokument wird öfters aktualisiert.
(DEUTSCH / SEHR GUT)
W3-Konsortium
Gruppe von den führenden HTML-Autoren weltweit. Diese bestimmen die
neuen Standards von HTML und haben sich vor ca. 4 Jahren auf den ersten
Standard von HTML aus vielen kleinen spezifischen Programiersprachen
geeinigt. Auf dieser Webseite können englische Anleitungen angeschaut
werden.
(DEUTSCH / GUT, Nur für Profis) |
