Grundaufbau einer HTML Datei
HTML besteht aus so genannten "Tags" (= Befehle): Beispiel: <h1> Anfang </h1>
Es beginnt mit einem einleitenden Tag (bestehend aus dem "Kleinerzeichen",
dem HTML-Befehl (h1) und dem Größerzeichen).
Alles, was nun folgt (in diesem Beispiel das Wort "Anfang"),
wird als Überschrift erster Ordnung (h1 = heading 1 = Überschrift 1) ausgegeben,
das abschließende Tag </h1> stellt den Abschluss der Formatierung dar,
der Schrägstrich vor h1 weist auf diesen Abschluss hin.
Soll auf der Seite nur Text ausgegeben werden,
wird dieser Text einfach zwischen <body> und </body> geschrieben.
Fast alle HTML-Befehle bestehen aus einleitendem und abschließendem Tag
ausnahmen gibt es natürlich überall). Die Groß/Kleinschreibung
ist bei HTML-Befehlen vernachlässigbar. (<H1> = <h1>)
Das Grundgerüst einer HTML Datei
<html> Der Browser erfährt, dass es sich um eine HTML-Datei handelt.
<head> Dateikopf, hier werden allgemeine Informationen ausgegeben
<title> Titel, der oberhalb der Menüzeile im Browser steht
</title> Ende des Titels
</head> Ende des Dateikopfs
<body> Hier beginnt der eigentliche und für den Anfänger wichtigste
Teil des HTML-Dokuments.
Alles was nach diesem Tag eingetragen wird,
erscheint entsprechend der Formatierungen - auf dem Bildschirm.
Natürlich können in diesem Bereich weitere Tags
verwendet werden (z. B. das schon erwähnte <h1>),
die Tags können also verschachtelt werden.
Achtung: Nicht den Abschluss der einzelnen Tags vergessen!
</body> Ende des Textkörpers
</html> Ende des HTML-Dokuments
Hintergrund und Grafiken
Selbstverständlich können auch Grafiken bzw. Bilder in eine
Webseite eingebunden werden.
Als Formate sind *.gif (für Grafiken) bzw. *.jpg oder *.jpeg
für Fotos geeignet, da diese Formate einen nur geringen Speicherplatzbedarf haben.
Beispiel:
<img src="bild1.gif">
Mit img (= image) src (= source =Quelle) wird die Grafikdatei mit
Namen und Pfad eingebunden.
Achtung: In diesem Beispiel befindet sich die Grafik im selben
Verzeichnis wie das HTML-Dokument, ansonsten muss der
Pfad (z. B. Bilder/bild1.gif) angegeben werden.
Man sollte beim Erstellen von Webseiten immer darauf achten,
keine absoluten Pfade zu verwenden wie z. B. "C:ProgrammeCoffeeCupSoftwareworkingbilder",
da solche Pfade auf dem Server natürlich nicht funktionieren können.
ACHTUNG: Die Windows-Pfadangaben mit "" funktionieren nicht -
es muss statt dessen der Slash "/" verwendet werden.
Einige Zusatzattribute bei Grafiken:
<img src="bild1.gif" width = 250 height = 450 align=right>
Mit "width" und "height" wird die Größe der Grafiken in
Pixel (= Bildpunkte) angegeben bzw. erzwungen. Diese Grafik
würde also bei einer Auflösung von 600 x 800 rund die Hälfte
des Bildschirms einnehmen.
Mit "align" kann die Ausrichtung der Grafik bestimmt werden,
Grundeinstellung ist "left", trotzdem kann die Zusatzangabe align = left sinnvoll sein,
da nur dann ein Textfluss um die Grafik erfolgt.
Auch im Bodytag können neben anderen Zusatzattributen
Grafiken als Hintergrund eingebunden werden.
Die erste Webseite
Folgend soll das Entstehen einer ersten, einfachen Webpage dokumentiert werden.
Die Seite soll eine Überschrift erhalten, das Tag für Überschriften wurde oben bereits vorgestellt.
Nach dem einleitenden Bodytag wird also die Überschrift folgendermaßen eingefügt:
<h1>Meine erste Webpage</h1>
Der Text würde in diesem Fall groß (h1 = größte Überschrift, h6 die kleinste) und linksbündig ausgegeben.
Um den Text zentriert auszugeben, können dem einleitenden Tag Attribute hinzugefügt werden.
<h1 align=center>Meine erste Webpage</h1>
Darstellung im Browser:
Meine erste Webpage
Durch die Zusatzangabe "align" (= alignment = Ausrichtung) kann der Text
zentriert (= center) oder auch rechtsbündig (= right) ausgegeben werden.
Grundeinstellung ist die linksbündige Ausgabe.
Nun kann ein kurzer Text eingegeben werden, Absätze im Text können entweder
durch das Tag <p> (=paragraph = Absatz) oder das Tag <br> (= break) erzeugt werden,
<br> verlangt kein abschließendes Tag.
Nach dem Einleitungsabsatz soll eine kurze Aufzählung erfolgen,
um diese zu strukturieren, gibt es zwei Möglichkeiten:
1. <ol> (= ordered list): erzeugt eine Liste mit alphanumerischen Aufzählungen
2. <ul> (= unordered list): Aufzählung mit Bullets
Außerdem müssen die einzelnen Listenpunkt noch mit dem Tag <li> eingeleitet werden.
Alle mit Listen verbundenen Befehle verlangen auch ein abschließendes Tag.
Beispiel (für eine durch Bullets strukturierte Aufzählung:
<ul>
<li>1. Punkt</li>
<li>2. Punkt</li>
<li>3. Punkt</li>
</ul>
Darstellung im Browser:
· 1. Punkt
· 2. Punkt
· 3. Punkt
Durch <ul> wird die Aufzählung eingeleitet,
der zwischen <li> und </li> stehende Text wird im Dokument schließlich ausgegeben.
Mit </ul> wird die Aufzählung abgeschlossen.
Zusatzelemente zur Schriftformatierung:
<b>Dieser Text ist fett</b> (b = bold =fett)
<i>Dieser Text ist kursiv</i> (i = italic = kursiv)
<u>Dieser Text ist unterstrichen</u> (u = underline = unterstrichen)
Darstellung im Browser:
Dieser Text ist fett
Dieser Text ist kursiv
Dieser Text ist unterstrichen
Neben
diesen physischen Textauszeichnungen (das Tag <u> sollte mit
Zurückhaltung verwendet werden, da normalerweise Links = Seitenverweise
unterstrichen dargestellt werden) kann man auch Schriftgröße,
Schriftfarbe und evtl. Schriftart bestimmen. Bei der Einstellung der
Schriftart sollte man jedoch auf exotische Schriftarten weitgehend
verzichten, da die Browser diese oft nicht darstellen können.
Beispiele:
<font size=6>Dieser Text ist sehr groß</font>
<font size=1>Dieser Text ist recht klein</font>
<font size=+1>Dieser Text ist ein wenig größer als normalerweise</font>
<font size=-2>Dieser Text ist deutlich kleiner als normalerweise</font>
Darstellung im Browser:
Dieser Text ist sehr groß
Dieser Text ist recht klein
Dieser Text ist ein wenig größer als normalerweise
Dieser Text ist deutlich kleiner als normalerweise
Der Befehl zur Schriftgröße wird mit <font> eingeleitet,
durch das Attribut "size" wird die Größe der Schrift bestimmt.
Farben können in HTML durch vordefinierte Bezeichnungen (white, blue, green, etc.)
oder hexadezimal angegeben werden.
Beispiele:
<font color = "#0000FF">Blauer Text</font>
<font color = "green">Grüner Text</font>
<font color = "#000000">Schwarzer Text</font>
Darstellung im Browser:
Blauer Text
Grüner Text
Schwarzer Text
Nach "font color" erfolgt die Zuweisung der Farbe (unter Anführungszeichen;
es geht bei den meisten Browsern zwar auch ohne, aber man weiß ja nie ...).
Erklärung der Hexadezimalzahlen: Die Farbkomponenten Rot, Grün und Blau werden gemischt,
Angaben von 0 bis F sind möglich (Hexadezimalzählweise: 0, 1, 2, ...8, 9, A, B, ...F),
wobei 0 die geringste und F die höchste Farbintensität darstellen.
Bei Hexadezimalschreibweise sollte am Beginn das Zeichen "#" eingefügt werden,
es funktioniert meist auch ohne, aber ... siehe oben.
Tabellen
Tabellen gehören zum Wichtigsten für die Gestaltung einer Website.
Nur mit ihrer Hilfe können Grafiken exakt ausgerichtet
oder Text spaltenweise wiedergegeben werden.
Beispiel:
<table border>
<tr>
<th>Mädchen</th>
<th>Jungen</th>
</tr>
<tr>
<td>Sonja</td>
<td>Elias</td>
</tr>
<tr>
<td>Anika</td>
<td>Samuel</td>
</tr>
</table>
Darstellung im Browser:
Eine Tabelle wird mit "table" begonnen, "tr" bedeutet table row und leitet
die erste Reihe einer Tabelle ein. "th" bedeutet table head,
dadurch wird die erste Reihe der Tabelle fett dargestellt,
"th" kann auch durch "td" (= table data) ersetzt werden,
wenn keine Tabellenüberschrift ausgegeben werden soll.
Mit </tr> wird die erste Reihe abgeschlossen, es folgt die zweite,
wobei die Anzahl der "td"-Einträge die Zahl der Spalten bestimmt.
Das "table-tag" kann einige Zusatzattribute aufweisen;
das wichigste ist "border".
Wenn es nicht angegeben wird, fehlen die Zellenumrandungen,
dadurch kann ein "Spaltentext" erzeugt werden.
Weitere Attribute:
align: bestimmt die Ausrichtung (z.B. align=center)
cellpadding: Abstand zwischen Text und Zellrand
(z.B. cellpadding=5, alle Angaben in Pixel)
cellspacing: Abstand zwischen den Zellen, dickere Zellwände (z.B. cellspacing=3)
bgcolor: bestimmt die Hintergrundfarbe der Tabelle
(siehe Farben im Bodytag), es kann auch einzelnen Zellen eine Farbe
zugewiesen werden, dann steht das Attribut bgcolor im td-Tag.
Beim Internet Explorer können auch Hintergrundgrafiken zugewiesen
werden (background="bild2.gif"), Netscape ignoriert diese Zuweisung.
Beispiel für ein "tabletag" mit Attributen:
<table border=5 cellpadding=4 cellspacing=3
bgcolor=#CCFFFF background="clouds.jpg" align=center>
Darstellung im Browser:
Bei Netscape gibts kein Hintergrundbild, da ist's zartblau!
Beim Internet Explorer sollte man Wolken sehen!
In den einzelnen Zellen kann auch die Breite und die Höhe definiert
werden (siehe Breiten- und Höhendefinition bei Grafiken).
Es können statt des Textes auch Bilder eingefügt werden,
dann wird im obigen Beispiel einer der Namen durch das img-Tag ersetzt.
Dies findet sehr häufig Anwendung, da dadurch Bilder und Grafiken
auf einer Seite genau angeordnet werden können.
Hyperlinks [Anker und Verweise]
Das Grundprinzip des WWW (= World Wide Web) besteht darin,
sich anhand von Links von einer Seite zur anderen zu
bewegen (vgl. auch Browser: to browse = blättern, schmökern).
Hierbei muss zwischen internen, externen und Verweisen innerhalb
einer Seite unterschieden werden.
a) interne Verweise
Beispiel:
<a href="kurs.htm">Kurs</a>
Das "a" bedeutet anchor (= Anker), href steht für hyperreference (= Bezugnahme),
kurs.htm ist eine Datei, die sich im selben Verzeichnis wie die
Hauptdatei befinden muss (siehe Pfadangaben bei Grafiken),
zwischen den Tags steht der im Browser angezeigte Text (beliebig),
der, wenn er angeklickt wird, die neue Datei "kurs.htm" öffnet.
(Es können auch Grafiken statt des Textes zwischen den Tags stehen.)
</a> beendet den Hypertextbereich.
b) externe Verweise
Beispiel:
<a href=" http://linux1.pa.asn-graz.ac.at/~fstadlho/"> Franzis Homepage </a>
Mit diesem Hyperlink würde auf die Hauptseite meiner Homepage verwiesen werden,
anstatt einer Datei muss die gesamte Internetadresse des
gewünschten Dokuments eingegeben werden.
c) Verweise innerhalb einer Seite
Beispiel:
<a name="teil3">3. Kapitel</a>
<a href="#teil3">3. Kapitel</a>
Zuerst muss man bei der entsprechenden Kapitelüberschrift eine Zielmarke definieren.
Die Kapitelüberschrift "3. Kapitel" erhält den Namen teil3.
Auf diesen Namen wird schließlich innerhalb des am Beginn
stehenden Inhaltsverzeichnisses hingewiesen.
Das Zeichen "#", das bei href vor der Zielmarke steht, ist ein Hinweis für den Browser,
dass der Verweis auf der selben Seite zu suchen ist.
Der aktive Bereich, der angeklickt werden kann, ist wieder der Text,
der zwischen den Tags steht.
Framesets
Frames dienen dazu, Navigation und Orientierung auf Webseiten zu erleichtern.
Es spricht einiges für das Verwenden von Frames in HTML-Dokumenten,
mindestens genausoviel jedoch dagegen.
Der Trend bei anspruchsvollen Seiten tendiert immer mehr zu Lösungen
bei welchen "frames" umgangen werden. Spricht man von "frames",
dann meint man damit nichts anderes als Rahmen.
In diese Rahmen werden dann Inhalte gesetzt, hier in Form von HTML-Dateien.
Folgend werden Sie den Aufbau eines Frameset-Grundgerüstes
mit zwei "frame-Ebenen" betrachten können.
<html>
<head>
<title>HTML-Kurs</title>
</head>
<frameset cols=25%,* frameborder=yes>
<frame src=htminhalt.htm name=inhalt>
<frame src=htmkurs.htm name=kurs>
</frameset>
<noframes> Hier steht jener Text, der angezeigt wird, wenn der verwendete Browser
Framesets nicht darzustellen in der Lage ist!
</noframes>
</html>
Dieses Frameset wird als eigene HTML-Datei abgespeichert
(z. B. unter dem Namen "main.htm") und dient als "Behälter" für
die beiden anderen Dateien (htminhalt.htm und htmkurs.htm).
Für zwei Frames innerhalb einer Seite braucht man also drei Dateien.
Jenes "Hauptdokument", in dem die Framesets definiert werden, hat keinen "Body";
eigentlich logisch, da es bloß als "Behälter" dient und kein Text ausgegeben werden soll.
Mit <frameset> wird die Definition eingeleitet, die Art der Aufteilung wird
durch "cols" (= Spalten) oder rows (= Reihen) festgelegt.
Danach erfolgt die Festlegung der Spaltenbreite (25% bedeutet,
dass ein Viertel der Seitenbreite wird für die erste Spalte reserviert wird,
der Rest, durch den Platzhalter * repräsentiert, wird der zweiten Spalte zugeordnet).
Die Angabe kann auch in Pixel erfolgen; der Nachteil einer solchen Angabe besteht darin,
dass durch die unterschiedlichen Bildschirmauflösungen die Seitenaufteilung
leidet (100 pixel umfassen bei einer Auflösung von 640 x 480 fast ein Sechstel,
bei 1600 x 1200 ein Sechzehntel der Bildbreite). Sowohl in <frameset> als auch
in <frame> sind zahlreiche Zusatzangaben möglich, für Rahmen sind die Angaben border,
frameborder (unterschiedliche Interpretationen durch IE und Netscape,
am besten einfach ausprobieren)und framespacing (Abstand zwischen den Texten beider Frames) möglich.
Wichtig bei <frame> ist die Angabe src (= source), die auf die zu ladende Datei hinweist,
und der Name (wichtig für Verweise), der frei gewählt
werden kann (im obigen Beispiel "inhalt" und "kurs").
Die Framesetdefinition wird mit </frameset> abgeschlossen, der Text zwischen <noframes>
und </noframes> wird von jenen Browsern ausgelesen, die Frames nicht darstellen
können (ein äußerst seltener und daher zu vernachlässigender Fall).
Bei Verweisen und Hyperlinks in Framesets ist Vorsicht geboten: meist muss ein
zusätzliches Ziel (= target) angegeben werden. Bei Verweisen innerhalb der gleichen
Datei eines Framesets gelten die oben angeführten Regeln,
ansonsten muss "target" angegeben werden:
1.Verweis von Frame htminhalt zu htmkurs:
<a href="htmkurs.htm#oben" target=kurs>Einleitung </a>
Zuerst erfolgt die Angabe des Dokuments, dann das dort definierte Ziel (oben), dann der im
Frameset vergebene Name als "target" des Verweises. Ohne die "Targetangabe" würde die
Datei htmkurs im linken Frame geöffnet, das Inhaltsverzeichnis wäre verschwunden.
2.Hyperlinks (externe Verweise):
<a href="http://www.kostnixx.de" target=_top>Kostenloses Allerlei</a>
<a href="http://www.kostnixx.de" target=_blank>Kostenloses Allerlei</a>
Auch bei externen Links würden die Seiten ohne die "Targetangabe" im entsprechenden Frame angezeigt,
die Zusatzangaben "_top" und "_blank" verhindern dies.
top: Das neue Fenster wird im alten Fenster, von dem aus der Link aufgerufen wird, angezeigt.
blank: Ein neues Instanzenfenster wird aufgerufen, das alte Fenster bleibt im Hintergrund bestehen.
Die zweite Methode bewährt sich bei Linksammlungen, da häufig mehrere solcher
Links angewählt werden und die ursprüngliche Seite erhalten bleibt.
Außerdem läuft man bei der Angabe "_top" Gefahr, seine Besucher allzu schnell
an andere Webpages zu verlieren.
Weitere Informationen über die Grundlagen von HTML und Web-Formularen
finden sie unter http://www.teamone.de/selfhtml/
html_kurs.pdf - 178 kB
