HTML

Ein Kurs für AnfängerInnen wurde freundlicherweise von Enno Erchinger zur Verfügung gestellt.

Danke, danke, danke Enno!!!

Grundlagen
Eigenschaften der Seite (Veränderungen im <body>-tag)
Text-Formatierungen
Bilder
Links (Verweise)
Tabellen
Formulare

textbox
Passwort-Feld
Textarea
Radio Buttons
Checkbox
Menus (mit Auswahl)

Frames
Listen
Layout

Referenz

Bemerkungen: Im Gegensatz zur Javascript-Abteilung werde ich hier kaum Übungen geben (die machen wir dann im Kurs), die beste Übung ist einfach immer wieder mit den Tags "herum zu spielen" und html-Dokumente zu erstellen, die sie einbeziehen. Dabei ist es wichtig, das Resultat in verschiedenen Browsern anzuschauen, da die Unterschiede in der Interpretation zum Teil sehr gross sind.

Grundlagen

HTML bedeutet HyperText Markup Language. Es ist eine text-basierte Sprache, die es erlaubt Dokumente in eine Form zu bringen, die ein Browser verstehen und wiedergeben kann. Es ist nicht wirklich eine Programmiersprache sondern eher eine Skriptsprache. Die Möglichkeiten sind sehr beschränkt. Man kann dem Text zwar Formatierungen mitgeben, leider sind solche Funktionen wie das genaue Positionieren von Bild und Text oder die Interaktivität mit den BesucherInnen bisher nur mit anderen Techniken, wie Cascading Style Sheets oder Javascript etc... zu verwirklichen.

HTML entwickelt sich sehr schnell und man kann sich bei W3C immer über den letzten Stand informieren.

Zur Information: Dynamic HTML (dHtml) ist nichts anderes als ein Zusammenspiel dieser verschiedenen Techniken. Es ist nicht eine Sprache!

Man kann eine ganze Website von Hand schreiben, nur mit Hilfe eines Text-Editors, wie Notepad oder (mein Liebling!) Editpad. Es gibt aber inzwischen unzählige WYSIWIG (what you see is what you get) Editoren, die es ermöglichen, sich auf den Text, die Bilder, die Darstellung zu konzentrieren, ohne jemals eine Zeile Code sehen zu müssen. Mit allen möglichen drag-and-drop und andere Funktionen ausgestattet übernehmen sie das Codieren im Hintergrund und man kann sich auf Design und Inhalt beschränken. Ein solcher Editor ist GoLive 4, der auch in diesem Kurs behandelt wird.

Trotzdem, dass die Arbeit der Webpublisher, Webdesigner etc... durch einen solchen Editor ungemein vereinfacht wird gibt es verschiedene Gründe, warum ich (und nicht nur ich) der Meinung bin, dass man HTML, zumindest in den Grundfunktionen, schreiben und lesen können sollte.

Diese Editore schreiben bisher noch keinen wirklich guten Code. Solange man keine (vor allem grafische oder layout-) Änderungen an einem Dokument vornimmt, ist die Qualität des Codes noch in Ordnung. Sobald man aber z.B. eine Grafik anders positionieren möchte, muss das Programm versuchen sich vorzustellen, was wir eigentlich machen wollen. Vieles wird mit unzähligen Tabellenzeilen - und -spalten gelöst und das Resultat ist immer wieder ein Code, das aufgeblasen wird, mehr Platz auf dem Server und mehr Zeit zum Laden braucht, als wirklich nötig wäre.

Sie sind zum Teil aufwendig zum Erlernen, die Bedienung ist nicht immer sehr Benutzerfreundlich. Eine kleine Änderung am Dokument wird oft schneller in einem html-Editor bewältigt. Diese wysiwyg-Programme haben auch deswegen ALLE einen integrierten html-Editor.

HTML ist sehr einfach!!! Man kann es in sehr kurzer Zeit lernen, zumindest passiv (lesen und verändern).

Der Aufbau einer html-Seite:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Die meisten tags haben einen Anfangs-tag und einen Schluss-tag, der dem Browser mitteilt, dass die mit dem Anfangs-tags gegebene Anweisung jetzt nicht mehr gültig ist.

Ein Anfangs-tags wird in dieser Form wiedergegeben:

<****>

Ein Schluss-tag so:

</****>

Alles was zwischen <html> und </html> kommt wird vom Browser als html-Datei interpretiert (es gibt ja noch andere Sprachen, sgml, xml etc...und der Browser muss sie anders interpretieren (parse)). Im Header, zwischen <head> und </head> kommen Informationen, die nicht auf das Dokument im Browser-Fenster dargestellt werden aber Informationen über das Dokument und Informationen für die Suchmaschinen etc... liefern. Zwischen <title> und </title> wird der Titel des Dokuments eingegeben. Das erscheint dann auf der obersten blauen Leiste, ganz oben auf dem Bildschirm.

Wir befassen uns vorläufig mit dem, was zwischen den tags <body> und </body> stattfindet. Diese tags beeinflussen das Aussehen und die Darstellung des Dokuments, der eigentlich im Fenster des Browsers erscheint.

Eigenschaften der Seite (Veränderungen im <body>-tag)

Man kann den Hintergrund der Seite bestimmen, die Textfarbe, die Standardschrift auswählen das Aussehen der Links verändern. Fast alle dieser Eigenschaften der Seite werden im <body>-tag definiert.

Die Hintergrundfarbe kann man mit diesem tag bestimmen:

<body bgcolor=" "> wobei zwischen " und " entweder der Name einer Farbe auf englisch kommt (white, black, yellow, red....) oder den hexadezimalen Wert, mit einem # davor. Beispiel

Eine Aufstellung der 216 Browser-sicheren Farben und ihrer hexadezimalen Wert ist u.a. hier zu finden. Dabei sollte man beachten, dass die Farben, je nach Browser recht verschieden aussehen können.

Man kann auch ein Bild als Hintergrund benutzen:

<body background="bild.ext"> wobei bild.ext der Name der Datei (inkl. extension und falls nicht im selben Ordner, link dazu) bedeutet.

Internet Explorer erlaubt auch die Option bgproperties=fixed, also z.B.

Das verursacht das Hintergrundbild, sich auch beim Scrollen der Seite nicht zu bewegen. Funktioniert nicht in Netscape! Beispiel

<body text=" "> ähnlich wie bei bgcolor, diemal beeinflusst es die Farbe des Textes

<body link=" ">, <body alink=" "> und <body vlink=" "> ändern die Farbe der Links, resp. unbesuchter Link, aktiver Link und besuchter Link. Auch hier mit Farbename oder Hexadezimaler Wert eingeben.

Text-Formatierungen

<b></b> macht den Text fett
<i></i> macht ihn kursiv
<tt></tt> sieht aus wie von einer Schreibmaschine geschrieben<cite></cite> Zitat, wird normalerweise Kursiv wiedergegeben
<em></em> "Betonter" Text, sieht meistens aus wie <cite> und <i>
<strong></strong>"Betonter" Text aber noch entweder Fett oder Kursiv dazu
<s></s> ~~strike through, streicht den Text durch~~
<u></u> underline, unterstreicht den text
<pre></pre>

 text    wird      mit allen  Leerschlähgen und 

Zeilen           -abständen    eingegeben

<sub></sub>wird weiter _{unten als der Rest geschrieben}

<sup></sup>wird weiter ^{oben geschrieben}
<blink></blink> der Text blinkt (nur in Netscape)
<basefont size="n">die Grösse des Texts im gesamten Dokument
<font size="?"></font> Grösse der Schrift Werte von 1 bis 7 oder falls ein Basefont definiert wurde Werte von -7 bis + 7 im Verhältnis zum basefont
<font color="?"></font> Farbe der Schrift (Wort/Hex)
<font face="erste Schrift, zweite Schrift, dritte Schrift> Schrift des Dokuments, man sollte immer eine Auswahl von ca. 3 Schriften bieten

Bilder

Mit dem folgenden Befehl kann man ein Bild einfügen

Bilder, die zu einer anderen Seite einen Link haben werden immer mit einem Rand eingefügt, sodass man es ausdrücklich schreiben muss, wenn man keinen will. Sonst kann man es auslassen. Das <img>-tag braucht man nicht wieder zu schliessen.

alt="" bringt einen 'Tooltip' auf, eine kleine Textbox in der der Text geschrieben ist, der zwischen den Ausführungszeichen steht. Es wird eigentlich vom W3C als benötigtes Attirbut definiert. Es auszulassen verursacht keinen Fehler aber es ist eine Hilfe für Leute, die keine Bilder sehen können. Computer-Sprachprogramme lesen auch den Text vor, wenn etwas eingeschrieben ist.

Will man einen Link dem Bild anfügen ist die Syntax diese:

mit width und heigth gibt man dem Browser die Dimensionen des Bildes mit, sodass die Seite schon formatiert werden kann bevor die Bilder vollkommen geladen wurden. z.B.

Wenn man sehr grosse Bilder hat und man sie unbedingt auch zeigen möchte kann man eine Miniaturversion des Bildes auf die Seite tun und einen Link zu einer anderen Seite, wo das Bild in voller Grösse gezeigt wird. Dann können die BesucherInnen selber entscheiden, ob Sie die lange Ladezeit auf sich nehmen wollen.

Man kann den Effekt erziehlen, dass ein Bilder langsam klarer und klarer wird, indem man eigentlich 2 Bilder verwendet. Eines, das schlechter Qualität ist, dafür aber sehr wenig KB hat und das eigentliche Bild. Das Bild mir wenigen KB's wird zuerst geladen und erscheint schnell und das gute Bild hat Zeit zum laden ohne, dass die BesucherInnen auf einen weissen Flecken schauen müssen.

mit align=left oder align=right kann man das Bild links oder rechts plazieren, und der Text wird entsprechend rechts oder links geschrieben. mit <br clear=left> und <br clear=right> kann man bestimmen, wieviel des Textes neben dem Bilde sein soll und ab wo es unter dem Bild weiterführen soll.

hspace=xx vspace=xx beeinflussen den Raum, der um das Bild frei bleiben soll, wie ein unsichtbarer Rahmen. Beim Positionieren eines Bildes in Bezug auf den Text sollte man eher auf Style Sheets zurückgreifen, da die Optionen von html sehr ungenau sind und manchmal unvorhershebar ist,wie es wirklich aussehen wird.

Eine Linie wird mit <hr> eingefügt. Man hat folgende Argumente zur Verfügung:

Links (Verweise)

a href ist der dafür verwendete tag, wobei href eine Abkürzung von Hypertext REFerence ist.

ein Link zu einer anderen (externen) Seite:

<a href="http://www.dieseSeite.org">Beschreibung des Links und den Text, den man anklicken muss, unterstrichen</a>

ein Link zu einer anderen (internen) Seite:

<a href="../dokument.html>Text, der erscheint</a> wobei man ../ auslassen kann wenn sich die Seite im gleichen Verzeichnis befindet. Falls man aber einen Verzeichnis meineHomepage hat und darin die erste Seite, meistens index.html, und von dieser Seite aus einen Verweis auf ein Dokument machen will, dass in einem Verzeichnis namens Ferienbilder im Verzeichnis meineHomepage dann würde der Link so aussehen:

Es gibt 2 Arten von Links, die absoluten und die relativen Links. Ein Link zu einer externen Seite muss immer absolut sein, da es von überall her erreichbar sein soll. Ein Link zu einer Seite, die zu einer einzelnen Website (nicht seite, sondern site!) gehört darf relativ sein, dass heisst in Beziehung zum Ort von wo aus er aufgerufen wird. Dabei muss man sehr aufpassen, sie immer aktuell zu halten, also falls eine Änderung an der Struktur der Website vorgenommen wird, müssen alle relativen Links , die davon betroffen sind, überprüft werden.

ein Link zu einem anderen Ort innerhalb der selben Seite (Anker):

<a href="#nameDesAnkers">siehe weiter unten</a>

Den Anker muss man ja aber auch kennzeichnen, wie folgt:

<a name="nameDesAnkers">Teil des Dokuments, der aufkommt wenn man auf den Link klickt</a>

Man kann einen Anker auch zu einer anderen Seite verbinden, wenn man z.B. will, dass der Link dazu nicht zum Anfang des Dokuments führt aber zu einem ganz bestimmten Punkt:

<a href="seiteSoundso.html#nameDesAnkers">gehe dorthin</a>

Mit target=_blank zwingt man den Browser für den Link ein neues Fenster aufzumachen.

Mit dem Tag <base target=xxxx> innerhalb der <head></head>-tags kann man einen Fenster definieren, der für alle Links dann benutzt wird.

ein email-Link

<a href="mailto:xxx@xxx.xx">schicke mir ein email</a>

Tabellen

Tabellen werden zwischen <table></table>-tags geschrieben. Mit <caption align=xxxx>Titel</caption> wir der Tabelle einen Titel gegeben.
<th></th> heisst table header und bedeutet die Überschriften der Spalten (oder Zeilen, je nachdem wie man sie formatiert)
<tr></tr> heisst table row und bedeutet eine Zeile
<td</td> heisst table definition und bedeutet den Inhalt einer Zelle

Die Form der Tabelle bestimmt man indem man <tr>, für die Zeilen und <td> (jedes <td> schreibt einen Spalten) einfügt. So bekommt man aber eine Tabelle, die alles gleich grosse Zellen beinhaltet. Will man Zellen, die entweder über x Zeilen oder über x Zellen reichen braucht man den Befehl <td colspan="x"> oder <td rowspan="x">

Formulare

Formulare werden benutzt um mit einem Skript zu kommunizieren, der auf einem Server liegt. Auch sie werden bei SELFHTML ausfürhlich beschrieben.

Es sind 2 bis 3 veschiedene Aktionen notwendig, um einen Formulare zum funktionieren zu bringen.

Erstens, sie in html 'schreiben', also die Struktur, das Aussehen und die angewendete Methode bestimmen. Das ist die äusserliche Form eines Formulars und wenn wir nur dies erstellen, dann bekommen wir etwas, was wie ein Formular aussieht und das man auch anklicken kann etc... Bewirken tut es aber gar nichts.

Zweitens (nicht zwingend), sie mit Hilfe von einer Skriptsprache (Javascript ist sehr verbreitet) zu 'validieren'. Hier kann man bestimmen, wie die Angaben der User formatiert werden müssen (z.B. sicher stellen, dass eine email-Adresse auch einen @-Zeichen enthaltet, oder Zahlen in einem Namensfeld verwerfen etc....), man kann auf die Eingabe reagieren, aber immer noch ausschliesslich auf der client-seite.

Drittens (zwingend) braucht man einen Programmteil auf einem Server, der die ganzen Eingaben interpretiert und entsprechend seiner Funktionen manipuliert(z.B. weiterleitet oder eine andere html-Seite aufruft und dem User zurückschickt etc...). Dies basiert auf was man einen cgi-Skript nennt. CGI bedeutet Common Gateway Interface und ist eigentlich selber nicht eine Programmiersprache, sondern so etwas wie ein Standard oder eine Methode, die Interaktion zwischen html-Dokument beim client und server zu steuern.

cgi-Skripts werden sehr oft in Perl geschrieben aber man kann sie auch in anderen Sprachen schreiben, sowie C++, tcl, Visual Basic, Apple Script etc....

html-Tags für die verschiedenen Formulare:

Textbox

<html>
<head>
<title>Eine Textbox</title>
</head>
<body>
Bitte schreibe Deinen Vorname hier unten
<form method=POST action="http://www.dort.com/cgi-bin/skript.pl">
<input type="text" name="vorname" size="20">
</form>
</body>
</html>

Die Angaben im ersten Form-tag beziehen sich auf das Skript, das auf den Server liegt und sind nur ein Beispiel dessen, wie es aussehen könnte. Davon dann mehr im Javascript-Kurs. Hier befassen wir uns mal mit dem Aussehen und darum lasse ich sie von jetzt an aus.

input type="...." gitb dem Formular seine Form und es hat verschiedene Möglichkeiten. name="..." gibt dem Feld in dem die Eingabe erfolgt einen Namen und ist wichtig für die Weiterverarbeitung auf dem Server. In diesem Fall wird size verwendet um die Breite des Textfeldes in pixels zu bestimmen.

Passwort-Feld

<html>
<head>
<title>Ein Passwort Feld</title>
</head>
<body>
Bitte schreibe Deinen Passwort
<form>
<input type="password" name="PW" size="8">

<input type="submit" value="OK">

<input type="reset" value="Doch Nicht!"

</form>
</body>
</html>

Das sind jetzt 3 verschiedene 'input types', also Formulararten. Ersten ein Passwort-Feld, es ist zu der Textbox sehr ähnlich, ausser, dass es Sterne tipt anstellen von Buchstaben. Dann das submit und das reset Formular. Klickt man auf submit, wird die Information abgeschickt, klickt man auf reset wird es abgebrochen. Mit value kann man den Text beeinflussen, der auf die Knöpfe geschrieben wird.

Textarea

<html>
<head>
<title>Eine grössere Textbox</title>
</head>
<body>
Platz für einen längeren Text
<form>
<textarea name="textfeld" rows="8" cols="50" wrap>hier kommt der Text, kann aber auch leer sein</textarea>
</form>
</body>
</html>

Diesmal kommen die Angaben zwischen <textarea> und </textarea> -tags. Mit rows= und cols= Höhe und Breite beeinflussen, wenn man nichts eingibt wird die Textbox automatisch auf rows="4" und cols="40" formatiert. wrap verursacht einen Zeilenumbruch an den Rändern. Wenn man es nicht schreibt wird die Linie weitergeschrieben, bis die BenutzerInnen selber auf enter drucken.

Radio Buttons

<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
Bitte wählen Sie Ihre Liebling-Skriptsprache aus
<form>
<input type="radio" name="sprache" value"js">Javascript<br>
<input type="radio" name="sprache" value"php">PHP 3 <br>
<input type="radio" name="sprache" value"perl">Perl <br><br>

<input type="submit" value="OK">

<input type="reset" value="Doch Nicht!"

</form>
</body>
</html>

Hier wird der Name des Buttons in einem Set identifiziert. Der Inhalt von value wird dem Skript aurf den Server geschickt. Radio Buttons erlauben nur eine mögliche Auswahl. Will man mehrere Auswahlmöglichkeiten geben muss man Checkboxes erstellen.

Checkbox

<html>
<head>
<title>Checkbox</title>
</head>
<body>
Was für Musik hören Sie gerne?
<form>
<input type="checkbox" name="musik" value"tech">Techno<br>
<input type="checkbox" name="musik" value"klass">Klassik<br>
<input type="checkbox" name="musik" value"pop">POP<br><br>

<input type="submit" value="OK">

<input type="reset" value="Doch Nicht!"

</form>
</body>
</html>

Menus (mit Auswahl)

<html>
<head>
<title>Menus</title>
</head>
<body>
Wie alt bist Du?

<form>
<select name"alter" size="5">
<option value="bis9">0 - 9
<option value="bis19">10 - 19
<option value="bis29">20 - 29
<option value="bis39">30 - 39
<option value=bis100>40 - 100

<hr>

<input type="submit" value="OK">

<input type="reset" value="Doch Nicht!"

</form>
</body>
</html>

Mit <option selected value> kann man ein Feld definieren, das dann als Standard schon bezeichnet ist

Frames

Frame bedeutet eigentlich Rahmen und ist eine Art, die Seite in verschiedenen Seiten zu unterteilen. Zuerst braucht man einen Frameset. Das ist die Datei, die schlussendlich den Namen index.html oder default.html bekommt, also die Hauptseite. Alleine nützt sie aber nichts, sondern die einzelnen Abteilung müssen mit je einer Seite aufgefüllt werden. Das Frameset verweist dann in jedem Frame auf die Datei, die darin geladen werden soll.

(kurze, nicht vollständige) HTML-Referenz

die ganze Spezifikation kann bei W3C gefunden werden und Infos auf deutsch bei SELFHTML

Grundtags

<html></html> Erstellt einen HTML-Dokument

<head></head> Informationen, die nicht auf der Seite erscheinen

<body> </body> Was zwischen diesen Tags liegt, wird im Dokument wiedergegeben

Header Tags (zwischen <head> und </head>)

<title></title> Der Titel des Dokuments, wie er in der obersten (meistens blauen) Leiste erscheint

Attribute von <meta>

Attribute von <body>

<body bgcolor="?"> Farbe des Hintergrunds, als Wort einzugeben (englisch) oder als Hexadezimales Wert (#CC0033)

<body text="?"> Farbe des Texts, auch als Wort oder Hex einzugeben

<body link="?"> Farbe der Links der ganzen Seite (Wort/Hex)

<body vlink="?"> Farbe der schon besuchten Links (Wort/Hex)

<body alink="?"> Farbe des aktiven Links (on click, Wort/Hex)

Tags für Textformatierungen (man sollte sie ausprobieren, manche haben den selben Effekt)

<pre></pre> Beibehaltet die Formatierung z.B. eines in Tabellenform eingegebenen Texts (mehrere Leerschläge, Zeilenabständen, pre=preformatted)

<h1></h1> bis <h6></h6> Die grösste bis zur kleinsten Überschrift (h=Headline)

<b></b> Fett (b=bold)

<i></i> Kursiv (i=italic)

<tt></tt> Schreibmaschinen-Schrift (tt=teletype/typewriter)

<cite></cite> Zitat, wird normalerweise Kursiv wiedergegeben (cite kommt von citation)

<em></em> "Betonter" Text (em=emphasis)

<strong></strong>"Betonter" Text aber noch entweder Fett oder Kursiv dazu

<font size="?"></font> Grösse der Schrift Werte von -7 bis +7

<font color="?"></font> Farbe der Schrift (Wort/Hex)

Links

<a href="URL"></a> Hyperlink

<a href="mailto:EMAIL"></a> email-Link

<a name="NAME"></a> Anchor im Dokument

<a href="#NAME"></a> der Links zu einem Anchor im Dokument

Absatz-Formatierungen

<p></p> ein neuer Absatz (p=paragraph)

<p align=?></p> richtet den Absatz auf der Seite aus, Werte: left, right, center

<br> Zeilenumbruch (br= line BReak)

<blockquote></blockquote> Setzt Bünde links UND rechts

<div align=?></div> ein generischer Tag um grössere Absätze zu unterteilen (div=division), wird auch zusammen mit stylesheets benutzt

Grafik

<img src="name"> Plaziert einen Bild auf die Seite

<img src="name" alt="text, der im tooltip erscheinen soll"> Bringt eine Boxe auf, wenn die Maus über das Bild fährt, mit dem nach alt geschrieben Text

<img src="name" align=?> richtet das Bild auf die Seite aus. Werte: left, right, center, bottom, top, middle

<img src="name" border=?> Setzt die Grösse des Randes um das Bild, Werte von 0 (kein Rand) bis ?. Die Zahl bezieht sich auf pixels

<hr> eine horizontale Linie

<hr size=?> Höhe der Linie (in pixels)

<hr width=?> Breite der Linie, als Prozentzahl oder absolut

<hr noshade> Eine Linie ohne Schatten (normal ist ein Schatten dabei)

Tabellen

<table></table> Erstellt eine Tabelle

<th></th> Estellt eine Definitionszelle, eine normale Zelle mit fetter Text, centered (th = table header)

<tr></tr> Beginnt jede Zeile der Tabelle (tr = table row)

<td></td> Beginnt jede Zelle der Tabelle (td = table definition)

Attribute von Tabellen

<table border=#> Rand der Tabelle in pixels

<table cellspacing=#> Definiert den Abstand zwischen den Zellen in pixels

<table cellpadding=#> Definiert den Abstanz des Inhaltes der Zelle von den "Wänden" der Zelle in pixels

<table width=# or %> Breite der Tabelle, absolut oder in prozentualer Beziehung zur Breite des Dokuments

<tr align=?> or <td align=?> horizontale Ausrichtung der Zellen. Werte: left, right, center

<tr valign=?> or <td valign=?> vertikale Ausrichtung der Zellen. Werte: top, middle, bottom

<td colspan=#> erweitert die Breite einer Zelle auf eine bestimmte Anzahl Zellen

<td rowspan=#> erweitert die Höhe einer Zelle auf eine bestimmte Anzahl Zeilen

<td nowrap> hindert die Linien der Zellen daran gebrochen zu werden

Frames

<frameset></frameset> Erstellt das Grunddokument für Frames

framesets

<frame>

Attribute von Frames

Formulare

Damit sie wirklich funktionieren müssen Formulare einen cgi-Skript ansprechen. Oft wird es mir Perl geschrieben

Listen