Jetzt geht's los - Die erste Seite
Hier erfährst Du, mit welchen Werkzeugen man HTML-Dokumente erstellt und wie Texte in HTML geschrieben und gestaltet werden.
Themen in diesem Kapitel:
1. Notwendige Software:
Wie oben schon gesagt (ausführlichere Informationen siehe im Abschnitt Grundbegriffe), genügen Editor bzw. Notepad (Windows) oder ein beliebiger anderer Texteditor, der beim Betriebssystem üblicherweise dabei ist, um HTML-Dokumente zu erstellen. Wichtig ist hierbei nur, dass das Dokument nicht als Text (datei.txt) gespeichert ist, sondern als "datei.htm" oder "datei.html". Dazu wählt man beim Speichern unter "Dateityp" (wenn vorhanden) die Option "Alle Dateien" und gibt wie gewohnt den gewünschten Dateinamen ein.
Komfortablere Möglichkeiten, HTML-Dokumente zu erstellen, bieten jedoch spezielle HTML-Editoren, die sich grob in folgende drei Kategorien einteilen lassen:
Quelltext-Editoren
Hier muss man wie mit dem Editor oder Notepad alles selber tippen, aber zur besseren Übersicht werden verschiedene Tags unterschiedlich gefärbt ("Syntax-Highlighting").
Ein Beispiel für einen solchen Editor, den man über das Internet kostenlos downloaden kann, ist Araneae. Info: Araneae (Mark McIntyre, USA) Version 2.78, Stand 10/99. Download (0,6MB).
Quelltext-Tag-Editoren
Auch diese Editoren sind textbasiert, bieten allerdings Listen oder Buttons mit Tags an, sodass man diese nicht mehr selber tippen muss und außerdem Syntaxfehler vermindert werden.
Auch solche Editoren gibt es im Internet kostenlos:
- Phase 5 (Info):Phase5 (Ulli Meybohm, Deutschland) Version Second Edition, Stand 09/99. Download (0,8MB) erfolgt über FH-Giessen.
- 1stPage2000 (Info): 1stPage2000 (Evrsoft, Australien) 2.0 final, Stand 10/99. Download (5,2MB) erfolgt über deutschen Mirror.
Wohl einer der derzeit leistungsfähigsten HTML-Quelltext-Editoren, aber relativ komplex. - XEmacs (Info): XEmacs (XEmacs, USA) Version 21.1.8, Stand 11/99. Download Windows Version (22,6MB) über deutschen Mirror, Download Unix & weitere Betriebssysteme (Größe je nach Betriebssystem) über deutschen Mirror.
Die Einarbeitung soll hier nicht so ganz einfach sein, dafür kann man mit dem Editor wohl eine Menge machen (z.B. Makros schreiben). Ich persönlich kenne ihn jedoch nicht.
Graphische Editoren
Werden auch WYSIWYG-Editoren genannt ("What You See Is What You Get"), d.h. das Arbeitsfenster sieht (fast) so aus wie ein Browserfenster, und man kann mit Hilfe der Maus Texte, Bilder usw. anordnen. Beispiele hierfür sind Frontpage, Dreamweaver und auch Word für Windows; kostenlos erhält man sie aber (legalerweise)nicht.
So viele Editoren, so viele Möglichkeiten... (und das hier sind noch längst nicht alle)... Es ist durchaus empfehlenswert, sich einen Editor von den oben aufgeführten herunterzuladen und auf dem eigenen Rechner zu installieren, weil Notepad bzw. ein anderer reiner Texteditor ohne Syntax-Highlighting auf Dauer eher unkomfortabel sind. Welcher Editor einem zusagt, sollte man einfach selbst ausprobieren. Ich persönlich arbeite mit "Phase 5".
Nachdem nun die Frage nach der nötigen Software geklärt und alles auf dem Rechner installiert ist, soll es nun so richtig losgehen. Wie wäre es zunächst mit einem kleinen Text zum Thema: "Wer bin ich? Was mache ich?..." Oder mit ein paar schönen Gedichten, Zitaten oder Rezepten? Alles kein Problem mit der Hilfe des nächsten Kapitels: "Text in HTML".
2. Der Anfang
Hier gibt es nochmal eine kleine Zusammenfassung des Kapitels Die grundlegende Struktur eines HTML-Dokuments.
Ein HTML-Dokument besteht aus zwei Teilen, dem "Head" (Dokumentenkopf) und dem "Body" (Inhalt des Dokuments). Die absolut notwendigen Tags sind daher diejenigen, die das Dokument als HTML kennzeichnen (<HTML>...</HTML>) ganz am Anfang und ganz am Ende und diejenigen, die Head und Body kennzeichnen (<HEAD>...</HEAD> und <BODY>...</BODY>). Im Head muss außerdem der Titel (<TITLE>...</TITLE>) enthalten sein.
Insgesamt ist die Grundstruktur:
<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<BODY>
... Inhalt des Dokuments ...
</BODY>
</HTML>
Dieses Grundgerüst wird von HTML-Editoren wie Araneae und Phase5 bei Erstellen eines neuen Dokuments schon automatisch erstellt, so dass man sich die Mühe sparen kann, alles zu tippen.
3. Text in HTML
A. Überschriften
Überschriften gibt es in 6 verschiedenen Größen, eingeleitet durch die Tags <H1> bis <H6> und entsprechend beendet durch </H1> bis </H6>.
H steht für engl. "head" = Überschrift, die Zahlen stehen für die Größe der Überschrift: <H1> ist am größten, <H6> am kleinsten.
<H1> Große Überschrift </H1>
<H6> sehr kleine Überschrift </H6>
B. Text - Grundlagen
"Normaler" Text
Normaler Text steht in Absätzen (engl. "paragraphs"), die durch <P> eingeleitet und durch </P> beendet werden (letzteres ist jedoch nicht unbedingt notwendig, weil mit jedem <P> sowieso ein neuer Absatz begonnen wird).
Beispiel: <P> Hier steht der Text eines Absatzes... </P>
Wichtige Hinweise:
- Mehrere Leerzeichen hintereinander im Quelltext werden vom Browser als 1 Leerzeichen dargestellt, d.h.
1 2 3sieht im Browser genauso aus wie1 2 3, nämlich so: 1 2 3 - Es gibt diverse Buchstaben und Sonderzeichen, die nicht ohne Weiteres vom Browser dargestellt werden können, z.B. ä, ö, ü, ß usw. Diese müssen im Quelltext durch folgende HTML-Namen ersetzt werden, damit sie beim Leser der Seite richtig ankommen:
ä = ä
Ä = Ä
ö = ö
Ö = Ö
ü = ü
Ü = Ü
ß = ß
< = <
> = >
& = &
Hier gibt es eine Liste mit weiteren Sonderzeichen
Manche Editoren (z.B. Phase 5) ersetzen Sonderzeichen jedoch von sich aus durch HTML-Namen oder Unicode-Zeichen, so dass man wie gewohnt schreiben kann.
Erzwungene Zeilenumbrüche
Zwischen verschiedenen Absätzen wird vom Browser üblicherweise eine Leerzeile eingefügt. Will man dies vermeiden, so kann man mit <BR> (engl. "break") einen Zeilenumbruch erhalten, ohne dass ein neuer Absatz (mit Leerzeile) begonnen wird, was z.B. für Gedichte notwendig ist.
Beispiel:
"Es gibt nichts Gutes, <BR> außer man tut es." sieht im Browser so aus:
"Es gibt nichts Gutes,
außer man tut es."
Geschütztes Leerzeichen
Außerdem kann man Stellen definieren, an denen trotz Leerzeichen kein Zeilenumbruch erfolgen soll, was recht nützlich sein kann, um z.B. zu verhindern, dass Sachen wie 150 ml oder "Herzlichen Glückwunsch zum Geburtstag" getrennt werden (versuche es hier mal mit Verkleinern des Browserfensters). Statt eines Leerzeichens schreibt man (engl. "non-breaking-space" = kein Zeilenumbruch) zwischen die nicht zu trennenden Wörter.
Beispiele:
150 ml
Herzlichen Glückwunsch zum Geburtstag
C. Textgestaltung (Basics)
Textausrichtung ("Alignment")
Genau wie in Textverarbeitungsprogrammen kann man auch in HTML bestimmen, ob der Text in einem Absatz linksbündig, rechtsbündig, zentriert oder im Blocksatz stehen soll (Standardeinstellung ("default") ist linksbündig). Dafür wird das Paragraphentag <P> durch folgende Attribute modifiziert:
<P ALIGN="left">: linksbündig (gerade Kante links)
<P ALIGN="right">: rechtsbündig (gerade Kante rechts)
<P ALIGN="center">: zentriert (Text in der Mitte)
<P ALIGN="justify">: Blocksatz (gerade Kanten an beiden Seiten)
Logische Textauszeichnungen
Logische Textauszeichnungen sind Tags wie z.B. <EM> ("emphasized" = betont) oder <STRONG> (stark betont). Wie sie realisiert werden, hängt vom Browser ab, Einfluss darauf kann man aber über "Cascading Style Sheets" nehmen, was z.B. in diesem Dokument der Fall ist (siehe Style Sheets - Die Lösung aller Layoutprobleme?).
Die wichtigsten logischen Textauszeichnungen sind:
<EM>...</EM>: hervorgehobener Text<STRONG>...</STRONG>: stark hervorgehobener Text<CODE>...</CODE>: Schreibmaschinenartige Schrift wie der Quelltext im Editor<CITE>...</CITE>: Zitat<BLOCKQUOTE>...</BLOCKQUOTE>: Blockzitat; meistens auf beiden Seiten eingerückt<VAR>...</VAR>: Variable<ADDRESS>...</ADDRESS>: Addressinformation
Schriftgröße und Schriftart
Schriftgröße und Schriftart können mit dem Font-Tag <FONT>...</FONT> geändert werden oder, was weitaus eleganter ist, mit Style Sheets. Für den Anfang soll uns das Font-Tag jedoch genügen.
Die Schriftgröße wird relativ zu der vom Benutzer eingestellten Schriftgröße mit den Werten 1 bis 7 definiert, wobei 3 die normale Schriftgröße darstellt. Außerdem sind Angaben wie Schriftgröße +1 oder -1 usw. denkbar.
Beispiele:
<FONT SIZE="1">: ziemlich kleine Schrift
<FONT SIZE="7">: sehr große Schrift
<FONT SIZE="-1">: Schrift wird eine Stufe kleiner als der vorangehende Text
Und hier gibt's ein Dokument mit Beispielen zur Schriftgröße
Die Schriftart kann ebenfalls im Font-tag mit dem Attribut FACE="Schrift" festgelegt werden, wobei der Name der Schrift exakt angegeben werden muss (zur Not nachschauen, bei Windows in C:\Windows\Fonts).
Beispiel:
<FONT FACE="Verdana">: Text in der Schriftart "Verdana"
Ein Problem hierbei ist jedoch, dass der Benutzer den Text nur in den Schriftarten zu sehen bekommt, die er selbst installiert hat, d.h. ist die im Font-tag definierte Schrift beim Benutzer nicht vorhanden, wird der Text in der Standardschrift des Browsers (z.B. Times New Roman) angezeigt.
Etwas mehr Einfluss darauf kann man jedoch nehmen, indem man Schriftreihen definiert, also z.B. <FONT FACE="Verdana, Arial, Helvetica">. Ist die erste angegebene Schrift (hier Verdana) beim Benutzer nicht vorhanden, wird nach der zweiten Schrift gesucht (Arial) usw.
D. Trennlinien ("horizontal rules")
Ein weiteres Mittel zur Unterteilung und Auflockerung von Text sind Trennlinien. Diese werden durch das Tag <HR> in den Text eingefügt und erzeugen einen eigenen Absatz, d.h. vor und nach einer Trennlinie fügt der Browser normalerweise eine Leerzeile ein.
Die Schattierung der Trennlinie kann beseitigt werden, indem man <HR NOSHADE> in den Quelltext schreibt.
Beispiele für eine einfache und eine nicht schattierte Trennlinie
Breite und Dicke von Trennlinien
Bei der Dicke von Linien ist alles drin von feinen Strichen bis hin zu dicken Balken. Definiert wird die Dicke in Pixeln durch eine einfache Zahlenangabe im Size-Attribut (die Voreinstellung ist 2):
<HR SIZE="x">
Normalerweise sind Trennlinien so breit wie das Browserfenster. Die Breite kann jedoch geändert und auf zwei Arten festgelegt werden, nämlich absolut in Pixeln oder relativ in Prozent des Browserfensters.
Beispiele:
<HR WIDTH="300"> erzeugt eine Linie mit einer Breite von 300 Pixeln
<HR WIDTH="50%"> erzeugt eine Linie, die halb so groß ist wie das Browserfenster
Ausrichtung von Trennlinien
Hat man die Breite einer Horizontalen Linie so festgelegt, dass sie nun kleiner ist als das Browserfenster, gibt es drei Möglichkeiten, die Linie auszurichten: linksbündig, rechtsbündig oder zentriert. Dies geschieht wie bei Textabsätzen durch Einfügen von ALIGN= in das HR-Tag:
Beispiele:
<HR ALIGN="left">: linksbündig
<HR ALIGN="right">: rechtsbündig
<HR ALIGN="center">: zentriert
Beispiele für weitere Trennlinien mit unterschiedlicher Breite, Dicke und Ausrichtung
Farbe von Trennlinien
Im Internetexplorer von Microsoft (ab Version 3.0) ist es möglich, horizontalen Linien Farben zu geben. Dies geschieht mit dem Attribut COLOR=, in das entweder ein englischer Farbname (z.B. red, green, yellow...) oder ein RGB-Wert eingesetzt werden kann.
Beispiel:
<HR NOSHADE COLOR="blue">
4. Fragen und Aufgaben:
- Welche Arten von HTML-Editoren gibt es?
- Wie werden deutsche Sonderzeichen (ä, ö, ü usw.) kodiert?
- Welche Tags sind notwendig, um diese HTML-Seite zu erstellen? (erst überlegen, dann über die Menüleiste des Browsers in den Quelltext schauen)
So, Text sollte jetzt kein Problem mehr darstellen. Aber so eine schwarz-weiße Seite, bei der die Links die einzigen farbigen Dinge sind, ist schon etwas langweilig, und außerdem wäre es doch auch nett, die Fotos vom letzten Urlaub oder vom geliebten Haustier auf der eigenen Homepage zu haben, nicht wahr? All das und noch viel mehr gibt's im nächsten Kapitel: Jetzt wird's bunt - Farben in HTML