HTML
Einführung
WWW Browser wie der Internet Explorer verwenden eine besondere Sprache, um Informationen darzustellen und zu bearbeiten, HyperText Marked Language (HTML). In Hypertext wird ganz normaler Text mit zusätzlichen Befehlen, sogenannten Tags, verbunden, die angeben, wie der Text erscheint und wo Links zu anderen Dokumenten und Seiten angeklickt werden können.
Ein HTML Dokument hat folgenden Aufbau:
<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 4.0//E“>
<HTML>
<HEAD>
<TITLE> … </TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
Während die erste Zeile die Sprache als HTML in der Version 4.0 ausweist, und von der übergeordneten SGML-Sprache (Standard Generalized Markup Language) vogeschrieben wird, sind im übrigen Teil die typischen Merkmale von HTML bereits zu erkennen:
Jeder Befehl, als Tag bezeichnet) wird mit dem Relationszeichen < und > eingeschlossen. Gekennzeichnet wird das Ende des Blockes bei fast allen Befehlen durch </Tag>. Ausnahme sind Befehle bei denen das Ende vom logischen Zusammenhang klar ist, wie <BR> und <HR>.
Ei HTML Dokument wird mit <HMTL> … </HTML> eingeschlossen. Als erstes kommt mit <HEAD> … </HEAD> der Dokumentkopf. In Head <HEAD> … </HEAD>, wird <TITLE> … </TITLE> eingeschlossen, dort wird lediglich der Titel der Homepage angezeigt. Dieser erscheint in der Titelleiste als auch im Menü, wo die bisherigen Homepages angezeigt werden. Dem Dokumentenkopf dann <BODY> … </BODY>, alles was im Bodybereich geschrieben wird, ist später auf der Homepage zu sehen.
Zum Schluss der Einführung noch ein wichtiger und nützlicher Befehl: <!-- … -->.
Der Befehl wird vom Browser überlesen und ermöglicht so den Quelltext vernünftig zu strukturiren.
Gliederung
HTML Dokumente bestehen in erster Linie aus Text, welcher Informationen wiedergeben soll, darum muss dieser, wenn er später auf dem Browser angezeigt wird, auch gegliedert sein. Da Browser alle Zeilenumbrüche und doppelte Leerzeichen überlesen, müssen die gewollten Umbrüche und Absätze per Tag eingetragen werden.
Dafür werden folgende Tags benötigt:
<P> (Paragraph): Erzeugt eine Leerzeile und kennzeichnet damit einen neuen Abschnitt.
ALIGIN=left, center, right – geben hierbei die Textausrichtung an.
<BR> (Line Break): Geht zum Anfang der nächsten Zeile.
CLEAR=left, right, all – sucht die nächste Zeile wo Platz auf einer linken/rechten Seite Platz oder wo eine ganze Leerzeile (all) vorhanden ist.
<NOBR> (No Break): In dem Block, den der Befehl einschließt, finden keine Zeilenumbrüche statt.
<WBR> (Wrapped Break): Bricht den Text an dieser Stelle nur wenn erforderlich.
<HR> (Horizental Rule): Zeichnet eine waagerechte Linie.
SIZE=n – Dicke der Linie in Pixeln (Standard= 2)
WIDTH=n – Breite, in Pixel oder in Prozent zu Dokumentbreite (Standard= 100%)
ALIGIN=left, right, center – Ausrichtung der Linie
NOSHADE – in 2D (grau) statt als 3D
<H1-6> (Heading): Überschrift mit Schriftgröße (1= groß, 6= klein), die dick erscheint und durch einen Absatz davor und danach vom übrigen Text getrennt wird.
ALIGIN=left, right, center – Ausrichtung der Überschrift.
Listen
Als Listen werden unter HTML Aufzählungslisten bezeichnet. Das sind Listen, in denen man alle möglichen Sachen aufzählen kann, wie zum Beispiel Produkte oder einen Tagesplan.
Es stehen fünf verschieden Listentypen zur Verfügung. Alle erhalten im Browser am Anfang und am Ende eine Leerzeile, falls sie nicht in eine andere Liste verpackt sind.
Die Liste wird folgendermaßen aufgebaut:
<OL> (Orderd List): Erzeugt eine geordnete aufsteigende Liste, in der jeder Listenpunkt mit <LI> (List Item) angeführt wird.
START=n – Startet mit der Aufzählung bei n anstatt 1
TYPE=A, a, I, i – Verwendet man anstatt arabischer Ziffern als:
A – Großbuchstaben
a – Kleinbuchstaben
I – große römische Ziffern
i – kleine römische Ziffern
Beispiel:
I. Erster Listenpunkt
II. Zweiter Listenpunkt
<OL TYPE=I>
<LI> Erster Listenpunkt
<LI> Zweiter Listenpunkt
</OL>
<UL> (Unorderd List): Eine ungeordnete Liste. Auch hier wird jeder Punkt mit <LI> angeführt.
TYPE=disc, circle, square – verwendete Anführung:
disc – ausgefüllter Kreis
circle – leerer Kreis
square – ausgefülltes Quadrat
Beispiel:
• Erster Listenpunkt
• Zweiter Listenpunkt
<UL TYPE=disc>
<LI> Erster Listenpunkt
<LI> Zweiter Listenpunkt
</UL>
<DL> (Definition List): Diese Liste erzeugt eine Liste wie im Lexikon. Vor dem Begriff den man erklären will steht <DT> (Definition Term) und vor der Beschreibung des Wortes <DD> (Definition Description).
Beispiel:
E-Mail
Elektronische Kommunikation
World Wide Web (WWW)
Weltweites Informationssystem <DL>
<DT> E-Mail
<DD> Elektronische Kommunikation
<DT> World Wide Web (WWW)
<DD> Weltweites Informationssystem
</DL>
<DIR> (Directory List): Eine Liste von kurzem bis zum 20 Zeichen langen Listenpunkten, jeder wird mit <LI> gekennzeichnet.
Beispiel:
• Punkt 1
• Punkt 2
• Punkt 3
<DIR>
<LI> Punkt 1
<LI> Punkt 2
<LI> Punkt 3
</DIR>
<LI> (List Item): Führt einen Eintrag einer Liste (<UL>, <OL>, <DIR>, <MENU>) an.
TYPE=disc, circle, square/A, a, I, i – der Typ der Anführung dieses einzelnen Eintrags (siehe bei <UL> bzw. <OL>).
VALUE=n – Zählt bei einer geordneten Liste (<OL>) von diesem Wert an weiter.
Hyperlinks
Was wäre das Internet ohne Hyperlinks, mit denen man sich auf Mausklick durch die Welt des Internets klicken könnte. Erst durch diese Verbindung der einzelnen Internetseiten, wird uns ermöglicht zu surfen. Damit dann auf der Website aber nicht „www.google.de“ sondern „Google“ steht und man mit einem Klick auf „Google“ auch auf die Website kommt muss man folgendes tun:
<A> … </A> (Anchor): Dieser Befehl hat zwei mögliche Formen:
<A NAME=“Marke“></A> – Ist zum setzen einer Marke in einem Dokument
<A HREF=“URL“> Text </A> – Der eigentliche Hyperlink, der vom Browser hervorgehoben angezeigt wird (meistens in blau und unterstrichen). Was zwischen Anfang und Endtag steht, springt beim Anklicken des Textes an die im URL Format angegebene Adresse.
TARGET=“name“ – Gibt bei Hompages mit Frame- Technologie den Namen des Fensters an, in dem die neue Seite erscheinen soll.
TITLE=“name“ – Der Titel des verbundenen Dokumentes
Beispiel:
Google
<A HREF=”www.google.de”>Google</A>
Was ist eine URL Adresse
Eine URL (Uniform Resource Locator) Adresse ist, wie der Name schon sagt, eine Adresse, die auf ein Objekt im Internet oder auf einen lokalen Rechner (meistens auf die Festplatte C) verweist. Dabei ist die Aktion des Browsers von der Art des Dateityps abhängig.
Die URL Adresse ist folgendermaßen aufgebaut:
Transferprotokoll://Servername[:Port]/Pfadangabe/Dokumentenname#Sprungmarke
Transferprotokolle:
file – Für den direkten Zugriff auf eine Datei oder ein Verzeichnis
ftp – Bei der Nutzung eines FTPs (File Transport Protocol)
http – Für den Zugriff auf einen HTTP (HyperText Transmission Protocol)-Server oder auf
einen HTML-Text
gopher – Zugriff auf einen Gopher-Server
mailto – Direkter Zugriff auf eine E-Mailadresse
news – Zugriff auf einen News-Server
telnet – Aufbau einer Terminalemulation (Telnet)-Sitzung
wais – Zur Suche im Internet mit Hilfe einer WAIS (Wide Area Information Server)-Datenbank
Servername[:Port] – Gibt den Namen des Servers an, auf dem das Objekt vorliegt.
Pfadangabe – Laufwerk und Verzeichnis auf dem Server in dem das Objekt vorliegt.
Dokumentname – Name des Dokuments. Steht der URL in einem Hyperlink, wählt der Browser nach der Dateiendung die Aktion aus (bei jedem Browser unterschiedlich):
*HTM – Die Datei wird geladen
*.GIF, *.JPG – Der Browser zeigt eine Grafikdatei an. (Browserabhängig im eigenen Fenster)
*.BIN, *.EXE, *.DLL – Beim Klicken auf den Hyperlink, wird der Benutzer aufgefordert, ein Verzeichnis auf dem Zugrifffsrechner einzugeben, in dem diese Datei gespeichert wird.
#Sprungmarke – Gibt die Sprungmakierung an, zu der der Browser bei einem Hyperlink im Dokument springen soll.
Grafiken & Design
Beim Erstellen eines HTML-Dokuments sollte besonders auf die graphische Gestaltung geachtet werden, da durch sie die enthaltenen Informationen verständlicher und interessanter dargestellt werden. Eine graphisch gut gestaltete Seite sorgt auch dafür, dass mehr Leute die Seite besuchen.
Hier werden nun alle gestalterischen Befehle aufgeführt:
Als erstes das bearbeiten wir das allgemeine Aussehen des gesamten Dokumentes. Es wird durch Parameter bestimmt, die dem <BODY> Tag am Anfang des Dokuments hinzugefügt werden:
BACKGROUND=“URL“ – Bei “URL“ wird die Adresse eines Bildes eingefügt, das dann als Hintergrund angezeigt wird. Damit es keine Probleme gibt, sollte man immer ein PNG, GIF oder JPG Format nehmen.
BGCOLOR=color (Backgroundcolor) – Farbe des Hintergrundes, angegeben in 8 Bit RGB-Hexwerten (Rot, Blau, Gelb etc.) oder in einem Farbnamen („white, black, yellow, red“ etc.). Auch wenn ein Hintergrundbild angegeben ist, sollte man eine Hintergrundfarbe auswählen, noch während die Seite lädt, das ungefähre Aussehen der Seite zu erkennen ist.
Weitere Parameter, die in den Bodybereich eingebaut werden können:
LINK=color – Noch nicht angeklickter Hyperlink enthält diese Farbe.
VLINK=color (Viewed Links) – Bereits angeklickter Hyperlink enthält diese Farbe.
ALINK=color (Activated Links) – Farbe des Hyperlinks, solange die Maus auf ihm ist.
TEXT=color – Textfarbe für den Rest des Dokumentes (Wenn mit <FONT> verändert).
LEFTMARGIN=n – Abstand des linken Randes des Dokumenteninhaltes zum linken Rand des Fensters.
TOPMARGIN=n – Abstand des oberen Randes der ersten Zeile zum oberen Rand des Fensters.
Beispiel (Aussehen eines Standarddokumentes):
<BODY BGCOLOR=C0C0C0 TEXT=00040 LINK=0080FF VLINK=008080 ALINK=FF000>
Ein weiterer wichtiger Befehl, der das WWW zum World Wide Web macht, findet auf fast jeder Homepage seine Anwendung.
<IMG> (Inline Image) – Dieser Befehl zeigt an derselben Stelle auf der Homepage ein GIF (Graphics Interchange Format) oder JPG (JPEG - Joint Photographic Experts Group) Bild an. In Verbindung mit dem <A> Tag, kann man einen Hyperlink noch einmal hervorheben, z.B. mit einem Bild von einer Sonne.
SRC="URL" (Source) – URL-Position der Grafikdatei
LOWSRC="URL" (Low Source) – URL-Position derselben Grafik mit niedriger Auflösung. Dieses Bild wird als erstes geladen. Durch die niedrige Auflösung kann es fast sofort im Browser erscheinen und eine ungefähre Vorstellung von dem vollständigen Bild vermitteln.
ALIGN=left, right, top, middle, bottom - Ausrichtung des Bildes, relativ zur aktuellen Textzeile
ALT="..." – Text der als Platzhalter für die Grafik steht
WIDTH=n – Breite des Bildes in Pixeln (zum Skalieren)
HEIGHT=n - Höhe des Bildes in Pixeln (zum Skalieren)
VSPACE=n (Vertical Space) – Pixel die über und unter dem Bild frei bleiben
HSPACE=n (Horizontal Space) – Pixel die neben dem Bild frei bleiben
BORDER=n – zeichnet einen Rahmen um das Bild (Dicke mit n bestimmen)
<IMG ALT=“Die Sonne“ SRC=“sonne.gif“ VSPACE=10 VSPACE=10 HSPACE=10 ALIGIN=middle>
Bockbefehle
<B> (Boldface) – Der Text wird Fett dargestellt
<I> (Italic) – Der Text wird Kursiv dargestellt
<U> (Underlined) – Der Text wird Unterstrichen dargestellt
<STRIKE> – Durchgestrichener Text
<CENTER> – Alles d.h. Texte, Bilder und Linien, werden zentriert
<BIG> – Groß und Fett geschriebener Text
<SMALL> - Klein und schmächtig
<SUB> (Subordinated) – Tiefgestellter Text
<SUP> (Suberior) – Hochgestellter Text
<EM> (Emphasis) – Betont den Text (kursiv geschrieben)
<STRONG> (Strong Emphasis) – Betont den Text besonders stark (fett geschrieben)
<BLINK> – Der Text blinkt
<ADDRESS> – Makiert eine Adresse (kursiv und in einer neuen Zeile geschrieben)
Sollte noch weitere Fragen entstehen, so zögert nicht und fragt!
Gruß Klaric
