Texte, die im Internet veröffentlicht werden sollen, müssen in einem bestimmten Format vorliegen: HTML (Hypertext Markup Language), der Seitenbeschreibungssprache für Internet-Seiten. Obwohl Sie mit modernen HTML-Editoren arbeiten können ohne HTML zu beherrschen, sind Grundkenntnisse darin immer noch sehr nützlich.
Für die Erstellung von Internet-Seiten benötigen Sie:
Nützliches Hintergrundwissen
Eine HTML-Datei kann im Prinzip mit jedem beliebigen Programm erstellt werden, das Texte erzeugen kann, also zum Beispiel Notepad, Wordpad oder Word. Dies liegt daran, dass die Formatierungsanweisungen direkt in die Text-Datei hereingeschrieben werden. Die HTML-"Markierungen" stehen immer in spitzen Klammern und sehen zum Beispiel so aus: <B> oder </H2>. Diese HTML-Befehle nennt man Tags. Sie enthalten Hinweise für den Browser, wie er einen Text anzeigen soll und sind selbst später in der Anzeige nicht sichtbar.
Die Besonderheit an HTML ist, dass man neben der konkreten Formatierung auch eine Struktur zuweisen kann. Man legt dann im Text nicht (nur) fest, wie groß ein Buchstabe sein soll und in welcher Schrift er erscheinen soll, sondern (auch), welche Funktion er hat, also zum Beispiel, dass er eine "Hauptüberschrift" (<H1>) ist.
Der Grund für dieses System ist, dass Internet-Seiten von den unterschiedlichen Betriebssystemen auf den variierenden Monitorgrößen optimal angezeigt werden sollen. Im Gegensatz zu einem Word-Dokument, das auf einer festen Papiergröße ausgedruckt wird, etwa einem Brief, ist es im Internet ungewiss, auf welche Hard- und Software Ihre Internet-Seiten beim Betrachter treffen werden. Eine 14 Punkt-Schrift, die auf einem 17-Zoll-Monitor gut aussieht, ist für einen Personal Digital Assistant wie etwa den Newton oder einen Psion zu groß. Die HTML-Erfinder dachten sich nun, dass man dieses Problem lösen könne, wenn dem Text nur eine Struktur zugeordnet wird, die dann von jedem Ausgabegerät und jedem Nutzer selbst den Gegebenheiten optimal angepasst werden kann.
Als Strukturelemente waren ursprünglich 6 verschiedene Überschriftsstufen vorgesehen (von <H1> bis <H6>, außerdem Elemente wie "Liste" (<LI>) oder "Zitat" (<BLOCKQUOTE>). Selbst die Schriftformate fett und kursiv sollten ursprünglich über logische Auszeichnungen wie <STRONG> und <EM> (Emphasis) erzeugt werden. Allerdings ist dieses Konzept mehr und mehr aufgeweicht, da viele Gestalter das Aussehen ihrer Texte in sehr viel stärkerem Maß festlegen wollten, als HTML dies ursprünglich gestattete. Mit der Zeit wurde HTML so entwickelt, dass es mittlerweile möglich ist, mit sogenannten "Style Sheets" feste Punktgrößen und Schriftarten anzugeben. Allerdings blieb das Grundproblem des Netzes bestehen: die Hard- und Software des Betrachters sind unbekannt und differieren sehr stark von einander. Insofern empfiehlt es sich nach wie vor nicht, mit solchen "absoluten" Angaben zu arbeiten.
Auch sollten Sie die neuesten
HTML-Entwicklungen nur sehr zögerlich verwenden, da der größte Teil der
Betrachter Ihrer Internet-Seiten Browser installiert hat, die nicht in der Lage
sind, diese Neuerungen darzustellen und statt dessen Fehler anzeigen.
So geht's Schritt für Schritt
Jede HTML-Datei ist nach folgendem
Grundmuster aufgebaut:
<HTML>
<HEAD>
<TITLE>Hier steht der Titel, der in der Kopfzeile des Browsers erscheinen
wird</TITLE>
</HEAD>
<BODY>
hier steht beliebiger Text mit beliebigen Formatierungen.
</BODY>
</HTML>
Diese Grundstruktur zeigt dem Browser, dass es sich um ein HTML-Dokument handelt und gliedert es in einen "Kopf" (<HEAD>) und einen "Körper" (<BODY>). Im "Body"-Bereich steht das, was dem Betrachter im Browserfenster angezeigt wird. Im Kopf finden sich allgemeine Angaben wie etwa der Titel und versteckte Stichworte für Suchmaschinen.
Übung:
Öffnen Sie ein Programm, in dem Texte erzeugt werden können, zum Beispiel Notepad,
und kopieren das obige Grundmuster. Denken Sie sich einen Titel aus, zum
Beispiel "Meine erste HTML-Datei" und schreiben ihn zwischen die <TITLE>-Tags.
Der Titel sollte in wenigen Worten ausdrücken, was auf der Seite zu finden ist,
da er von vielen Browsern automatisch als Name übernommen wird, wenn der Leser
ein Lesezeichen (Bookmark) auf die Datei setzt.
Erster Schritt: Text formatieren
Um einen Text zu formatieren (z.B. fett zu setzen), muss dieser von zwei Tags
umschlossen werden. Einem beginnenden Tag, der die Formatierung angibt
und einem schließenden Tag, der mit </ > anzeigt, dass die
Formatierung endet. Für eine Fettung (im Englischen bold) sieht dies
dann so aus:
<B>Ich bin ein fetter Text </B>
Verschiedene Formatierungen können durch Schachtelung miteinander kombiniert werden:
<B><I>Ich bin ein fetter und kursiver Text</I></B>
Die wichtigsten Formatierungsmöglichkeiten in HTML im Überblick:
<H1>...</H1> bis <H6>...</H6>
Die Überschriften werden vom Browser immer groß und meist fett gesetzt, so dass sie sich gut vom Fließtext abheben. Die Zahlen 1 bis 6 beschreiben nicht die Größe, sondern die "Ebene". H1 (vom englischen Heading 1) ist die oberste Überschriftenebene, H2 wäre eine Unterüberschrift und H3 eine Unter-Unterüberschrift. Die Reihenfolge sollte möglichst eingehalten werden, also nicht einfach aus optischen Gesichtspunkten eine H2 für Hauptüberschriften verwendet werden.
Die Schriftschnitte Fett (<B> wie bold - der englische Begriff für fett), Kursiv (<I> wie wie italic- der englische Begriff für kursiv) und Unterstrichen (<U> wie underlined- der englische Begriff für unterstrichen) können verwendet werden. Außerdem kann <TT> (wie teletyper - der englische Begriff für Fernschreiber) für eine schreibmaschinenartige Schrift mit fester Laufweite benutzt werden. Dazu kommen logische Auszeichnungen wie "hervorgehoben" (<STRONG>) und "betont" (<EM>). Wie die logischen Auszeichnungen vom Browser angezeigt werden, ist verschieden. <STRONG> wird oft als Fettung wiedergegeben und <EM> oft kursiv, aber dies muss nicht so sein.
Damit der Text nicht ohne Absätze
gerade herunterläuft, muss man in HTML spezielle Absatzzeichen einfügen: <P>
(vom englischen Begriff für Absatz paragraph). Will man nur
einen Zeilenumbruch einfügen, genügt ein <BR> (vom
englischen break - Umbruch). Beide Tags werden nicht mit einem
schließenden </..> versehen. Soll der Text nicht rechtsbündig
ausgerichtet werden, kann mit Hilfe von <P ALIGN=...> auch
linksbündig (<P ALIGN=right>) oder zentriert (<P
ALIGN=center>) gesetzt werden.
HTML beachtet dabei immer nur ein Absatzzeichen. Mehrere leere Absätze
hintereinander werden nicht angezeigt, sondern automatisch auf einen einzigen
reduziert. Das selbe gilt übrigens für Leerzeichen. Um mehrere Leerzeilen oder
-zeichen zu erhalten, kann man sich eines Tricks bedienen: Man fügt ein
(vom englischen nonbreaking space) ein, also etwa <P>
<P> <P> , um drei
Leerzeilen zu erhalten.
Listen können nummeriert oder nur mit Aufzählungzeichen versehen werden. Nummerierte Listen werden mit <OL> (Abkürzung des englischen Begriffs ordered list - geordnete Liste) begonnen, nichtnummerierte mit <UL> (Abkürzung des englischen Begriff unordered list - nicht geordnete Liste). Jeder Listeneintrag folgt dann mit <LI>. Am Schluß der Liste steht ein abschließendes </UL> oder </OL>.
Alle Sonderzeichen - dazu zählen für das im englischsprachigen Raum entstandene HTML auch die deutschen Umlaute - müssen nach einem festen Schema angegeben werden. Hierfür liegen eigene Tabellen vor. Im folgenden die wichtigsten Sonderzeichen:
ä : ä Ä:
Ä
ü : ü Ü: Ü
ö : ö Ö: Ö
ß : ß
" : "
&: &
Eine komplette Liste aller Sonderzeichen finden Sie zum Beispiel in Stefan Münz "Self HTML".
Horizontale Linien können über <HR>
(Abkürzung des englischen horizontal rule) eingefügt
werden. Mit der Angabe <HR WIDTH=...> kann die Breite in
Pixel (Bildpunkte) oder Prozent definiert werden, also zum Beispiel <HR
WIDTH=70%>, um eine Linie zu erzeugen, die 70% der
Browserfensterbreite einnimmt. Mit <HR SIZE=...> kann die
Dicke in Pixel angegeben werden, also zum Beispiel: <HR WIDTH=250 SIZE=10>
für eine recht dicke, 250 Pixel breite Linie.
Übung:
Legen Sie in Ihrer Datei (zwischen den <BODY>-Tags) eine
Überschrift und einen Text an. Zum Beispiel:
<H1>Hallo, dies ist die Überschrift meiner ersten HTML-Datei</H1>
Eigentlich ist HTML ja <B> gar nicht so schwer </B>. Dies zum Beispiel ist eine Liste:
<UL>
<LI>Äpfel
<LI>Birnen
<LI>Bananen
</UL>
Der Browser setzt automatisch Aufzählungszeichen vor die einzelnen Elemente.
<P>
<HR WIDTH=70% SIZE=7>
Das Besondere an HTML ist, dass Sie mit
Verweisen (Hyperlinks oder auch nur Links) von Ihren
Internet-Seiten aus auf andere Dateien im Internet verweisen können. Das geht
ganz einfach nach folgendem Schema:
<A HREF="Datei_auf_die_verwiesen_werden_soll.htm">Hier steht
der unterstrichene Link-Text</A>
Übung:
Speichern Sie Ihre Übungsdatei als "uebung1.htm" auf Ihre
Festplatte. Legen Sie im selben Ordner eine zweite Datei nach dem selben Muster
an. Speichern Sie diese zum Beispiel als "uebung2.htm". In diesem
Text schreiben Sie nun zwischen die Body-Tags den Link zu "Uebung1":
<A HREF="uebung1.htm">Wenn Sie hier klicken, erscheint Datei 1</A>
Liegt die Datei nicht im selben Ordner, müssen Sie den Verweis entsprechend anpassen. Ein detailliertes Schema dazu finden Sie z.B. in Stefan Münz´Anleitung SELFHTML im Abschnitt Verweise. Sie haben nun einen sogenannten "relativen Link" erzeugt. Ein relativer Link wird in der Regel innerhalb von Website-Projekten verwendet. Wenn Sie zu einer anderen Datei im Internet verweisen wollen, müssen Sie dagegen einen sogenannten "absoluten Link" angeben. Dazu schreiben Sie die komplette URL der Datei, also zum Beispiel: <A HREF="http://www.domain.de/verweisdokument.htm"> in den Verweis.
Für Links innerhalb ihrer eigenen Seiten ist es nicht sinnvoll, absolute Links zu verwenden, da der Link dann nicht mehr auf Ihrer Festplatte funktioniert, sondern Sie sich erst ins Netz einwählen müssen, um die Seite aufzurufen.
Links können jedoch nicht nur eine neue Datei aufrufen, sondern sie können auch einfach dazu benutzt werden, um innerhalb eines Dokumentes zu springen. Dazu müssen Sie an die Stelle, an die man springen können soll, einen "Anker" (englisch: anchor) setzen: <A NAME="MeinAnker">Sprungziel</a>. Der Link zu diesem Anker sieht so aus: <A HREF="#MeinßAnker">Ein Klick hier befördert Sie zu meinem Anker</a>. Der Browser zeigt bei Klick auf den Link dann am Kopf des Browserfensters das Sprungziel an. Dies funktioniert jedoch nur, wenn die Seite lang genug ist. Bei sehr kurzen Seiten wird der Sprung nicht sichtbar.
Konkret könnte man Anker zum Beispiel dazu benutzen, um am Anfang eines langen Textes ein kleines Inhaltsverzeichnis anzulegen, bei dem man per Mausklick zu den einzelnen Kapiteln gelangen kann.
Übung:
Legen Sie einen Anker am Fuß Ihres HTML-Übungsdokumentes an: <A
NAME="fuss"> hier ist das Ende des Dokumentes</a>.
Mit einem Verweis am Anfang Ihres Dokuments können Sie nun direkt ans Ende
springen: <A HREF="#fuss">Ein Klick hier befördert
Sie direkt ans Ende der Datei</a>
Eine Sonderform des Links ist der
sogenannte "E-Mail-Link":
<a href="mailto:ich@Ihr-Internetname.de">Mail an
mich</a>.
(Achtung: Im Gegensatz zu anderen Links, stehen hinter dem "mailto:"
keine // !). Klickt der Leser diesen Link an, wird ihm
automatisch eine neue E-Mail an die Mailadresse des Links angelegt.
Bilder werden in HTML-Dateien nicht mit hineingespeichert, wie dies zum Beispiel bei Word-Dateien möglich ist, sondern bleiben eigene Dateien auf der Festplatte/bzw. dem Server. Dies hat den Vorteil, dass der Betrachter entscheiden kann, ob die Bilder angezeigt werden sollen oder nicht. Die HTML-Datei selbst bleibt sehr klein und kann dadurch schnell und kostengünstig geladen werden. In der HTML-Datei ist nämlich nur ein Verweis enthalten, dass der Browser hier das entsprechende Bild einfügen soll. Diese Bildverweise werden nach dem selben Schema wie Links eingebunden, nur dass der Tag <img src="..."> (Abkürzung des englischen image source - Bildquelle) heißt. Dies sieht dann zum Beispiel so aus: <img src="meintestbild.gif">.
Als Bildformate sollten nur GIF und JPEG verwendet werden, da diese von allen Browsern ohne Zusatzprogramme (Plug Ins) angezeigt werden können. Mit einem Bildbearbeitungsprogramm wie etwa Paint Shop Pro können Sie vorhandene Bilder in diese Formate umwandeln. Außerdem finden Sie im Internet sogenannte ClipArt-Sammlungen, in denen frei verwendbare GIFs und JPGs zur Verfügung gestellt werden. Wir bieten Ihnen als besonderen Service eine attraktive Auswahl an Bildern für Ihre Internet-Präsenz. Verwenden Sie jedoch auf keinen Fall Bilder, die Sie von irgendeiner Homepage gespeichert haben. Abbildungen unterliegen dem Copyright und dürfen daher ohne Einwilligung des Urhebers nicht veröffentlich werden.
Auch bei Bildern kann mit absoluten und relativen Dateiangaben gearbeitet werden, wobei sich wieder die relative Angabe empfiehlt. Damit auch diejenigen, die Ihr Bild nicht sehen, weil sie die Grafikanzeige ausgeschaltet haben, sich vorstellen können, was dort dargestellt ist, gibt es die Möglichkeit, einen sogenannten Alt-Text anzulegen: <img src="mein_bild.gif" alt="Kurzbeschreibung Ihres Bildes">.
Ausrichten können Sie Ihr Bild ähnlich wie Text mit "ALIGN": <IMG SRC="..." ALIGN=RIGHT> setzt das Bild rechtsbündig, <IMG SRC="..." ALIGN=TOP> setzt den Text an den oberen Bildrand, <IMG SRC="..." ALIGN=MIDDLE> setzt das Bild im Verhältnis zum Text in die Mitte und <IMG SRC="..." ALIGN=BOTTOM> setzt es an den Fuß.
Übung:
Suchen Sie sich ein beliebiges JPEG oder GIF aus dem Internet (Anklicken mit
rechter Maustaste, Wahl der Option "Bild speichern unter" bzw.
"Save Image as") oder Ihrer Festplatte heraus und speichern Sie es im
selben Ordner wie Ihre anderen Übungsdateien. Nun können Sie nach folgendem
Muster einen Verweis darauf in Ihre Übungsdatei schreiben:
<img src="meintestbild.gif" ALIGN=RIGHT alt="Mein Testbild">.
Probieren Sie einmal die verschiedenen Ausrichtungsmöglichkeiten aus.
Nun haben Sie die Grundlagen von HTML schon kennengelernt. Ihre komplette Übungsdatei könnte zum Beispiel so aussehen:
<HTML>
<HEAD>
<TITLE>Meine erste HMTL-Übung</TITLE>
</HEAD>
<BODY>
<A HREF="#fuss">Ein Klick hier befördert Sie direkt ans
Ende der Datei</a>
<H1>Hallo, dies ist die Überschrift meiner ersten
HTML-Datei</H1>
Eigentlich ist HTML ja <B>gar nicht so schwer</B>. Dies zum Beispiel
ist eine Liste:
<UL>
<LI>Äpfel
<LI>Birnen
<LI>Bananen
</UL>
Der Browser setzt automatisch Aufzählungszeichen vor die einzelnen Elemente.
<HR WIDTH=70% SIZE=7>
Hier steht ein <A HREF="uebung1.htm">Link</A> zu meiner anderen Übungsdatei und daneben ein Bild: <img src="meintestbild.jpg" align=middle alt="Mein Testbild">.
<HR WIDTH=70% SIZE=7>
<A NAME="fuss">hier ist das Ende des Dokumentes</a>
</BODY>
</HTML>
Im Browser sieht das dann so aus
Wenn Ihre Datei nicht richtig angezeigt wird, dann haben Sie wahrscheinlich irgendwo einen Tippfehler gemacht. Kontrollieren Sie noch einmal Zeichen für Zeichen auf seine Richtigkeit.
Mit Hilfe moderner HTML-Editoren müssen
Sie die Tags nicht mehr von Hand schreiben, sondern Sie können, ähnlich
wie in einem Textverarbeitungsprogramm, Formatierungen direkt aus Menüs
zuweisen. Dies spart Ihnen eine Menge Arbeit und senkt die Fehlerquote, da man
sich nicht mehr vertippen kann. Die Grundkenntnisse in HTML erlauben Ihnen zu
kontrollieren, ob Ihr Editor den gewünschten HTML-Code produziert und diesen
bei Bedarf zu korrigieren.
Abschluss: Weiterlernen
Sie haben nun die Grundlagen der Internet-Sprache HTML kennen gelernt. Es bieten sich Ihnen noch sehr viel mehr Möglichkeiten als hier aufgezeigt werden konnten. Wir verweisen zum Weiterlernen auf die im Abschnitt "Weitere Informationen" aufgeführte, umfangreiche HTML-Referenz.
Häufige Frage:
Weitere Informationen
Eine umfangreiche und sehr gute Einführung
und Referenz von HTML bietet "SelfHTML" von Stefan Münz: http://www.teamone.de/selfhtml/