|
HTML - Grundlagen
1.1 Grundlagen
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.
1.2. 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.
1.3 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.
1.4 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.
1.5 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.
| Ersatzcode
|
Wirkung
|
| ä |
ä |
| Ä |
Ä |
| ö |
ö |
| Ö |
Ö |
| ü |
ü |
| Ü |
Ü |
| < |
< |
| > |
> |
| ß |
ß |
| & |
& |
| " |
" |
1.6 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.webmasternetz.de">WebTREND</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@webmasternetz.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>
1.7 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.
1.8 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.
1.9 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".
1.10 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.
1.11 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.
1.12 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"> -->
1.13 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.
1.14 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)
|
