In diesem Schnellkurs geht darum, möglichst schnell, z.B. in einer halben Stunde, eine einfache Webseite erstellen zu können. Auf theoretische bzw. weiterführende Ausführungen oder Hintergrundinformationen wird weitestgehend verzichtet. Themen wie Tabellen, Formulare, Frames oder CSS wurden gänzlich weggelassen.

HTML (=Hypertext Markup Language) ist die primäre Sprache, in der Webseiten geschrieben sind. HTML besteht aus einzelnen Anweisungen, den Tags. -Damit z.B. Text in HTML schräg erscheint, bindet ihr diesen in ein i (=italic)- Tag ein: <i>Schräger Text</i> ergibt dann: Schräger Text. Also eigentlich ganz einfach. Die meisten Tags sind sog. Container-Tags, d.h. sie umschliessen einen Bereich, so z.B. das <i>-Tag. Daneben gibt es einige wenige Stand-Alone-Tags, welche kein abschliessendes Tag erfordern, z.B. <img>, <br> oder <hr>.
Die meisten Tags lassen sich noch durch Attribute näher spezifieren, z.B. ergibt die Anweisung <hr size="5" color="red" width="400" align="right"> eine rote, fünf Pixel dicke und 400 Pixel lange Trennlinie, welche am rechten Rand ausgerichtet ist.

Beispiel	ergibt	Bemerkungen
<h3>Ein Titel Grösse 3</h3> <p>Ein Absatz.</p> <p>Noch einer. Text, please. Text, please. Text, please. Text, please. <b>Fett.</b> <br> Text, please. Text, please.</p>	Ein Titel Grösse 3 Ein Absatz. Noch einer. Text, please. Text, please. Text, please. Text, please. Fett. Text, please. Text, please.	<h3>: =heading. Mit h1- h6 (h1 grösste, h6 kleinste) werden Titel erzeugt. <p>: =paragraph. damit werden Absätze erzeugt. <br>: =break. ist ein einfacher Zeilenumbruch. <b>: =bold. Text wird fett. <h3>, <p> und <b> sind Container- Tags, <br> ein Stand-Alone-Tag.
<img src="xild01.jpg" width="52" height="21" alt="Iceland"> <img src="xd.gif">		<img>: =image. Damit wird eine Grafik eingefügt. Das Attribut src (=source) ist zwingend. width, height und alt sind optional, aber empfohlen.
<a href="../index.html">www.flexdax.org</a> <a href="index.html">flexdax.org/htmlkurs/</a> <a href="../m-net/bjorkland/">bjorkland</a> <a href="http://flexdax.org/">www.flexdax.org</a> <a href="../"><img src="xb.gif" border="0"></a>	www.flexdax.org flexdax.org/htmlkurs/ bjorkland www.flexdax.org	<a>: =anchor. Mit diesem Tag werden Links eingebunden. Das Attribut href (=hypertext reference) ist zwingend (Bzw. name bei Ankern).

Am einfachsten: die einzelnen Seiten werden in einem (ASCII-) Texteditor eingetippt, mit der Endung .htm oder .html abgespeichert und anschliessend in einem Browser überprüft- bzw. von Zeit zu Zeit in mehreren, um Unterschiede auszugleichen. Weitverbreitete Browser sind im Moment (2000/2001) Internet Explorer 5/5.5 (70- 80%) und die 4er- Versionen von Netscape (10- 20%).

Der simpelste, geeignete ASCII- Editor unter Windows ist Notepad, das Mac-Äquivalent nennt sich Simple Text. Auf keinen Fall dürfen Programme wie Winword oder ähnl. verwendet werden, die sind ungeeignet.

• Wie das Notepad öffnen?

Los geht's! Als erstes erhält das Dokument einen Titel. Dieser ist in der Titelleiste des Browsers zu sehen (nicht aber im Doku selber!) und wird zudem als Bezeichnung für Bookmarks verwendet. Dafür kommt das <title>- Tag zum Einsatz.

Reiner Text lässt sich ohne Tags einbinden, Zeilenumbrüche werden allerdings nicht erkannt. Einige wichtige Tags, um Text zu strukturieren und formatieren:

Grafiken werden mit dem <img> - Tag eingebunden.
zum <img> - Tag gehört eine Reihe von Attributen:

src="...": bezeichnet den Platz (= engl. source) der Grafik. Dieses Attribut ist zwingend.
Die Grafik wird entweder absolut oder relativ eingebunden (Einbinden von Dateien), die beiden gebräuchlichen Formate sind jpg & gif (kurze Einführung).

width und height: damit werden Breite und Höhe der Grafik angegeben. Eine Angabe ist nicht zwingend, jedoch von Vorteil, da die Seite dadurch schneller geladen wird.
Werden andere Werte als die tatsächlichen angegeben, wird das Bild dementsprechend verzerrt.

alt: Alternativ- bzw. Beschreibungstext für die Grafik. Dieser wird angezeigt, falls das Bild nicht geladen werden kann bzw. noch nicht geladen ist.

Beispiel : <img src="xild01.jpg" width=200 height=133 alt="vulkanisch... ;)"> ergibt :

Text und Grafiken

Wird kein Zeilenumbruch gesetzt, wird nachfolgender Text standardmässig [rechts] unten ausgerichtet. Anschliessender Text lässt sich jedoch auch anders positionieren, und zwar mit dem align - Attribut und den folgenden dazugehörigen Werten:

• top : Text wird oben ausgerichtet .
• middle : Text wird mittig ausgerichtet .
• bottom : Text wird unten ausgerichtet ( Voreinstellung ) .
• left : Text fliesst links um das Bild herum .
• right : Text fliesst rechts um das Bild herum .

Bei top und middle wird jeweils nur eine Zeile ausgerichtet - der Rest des Textes erscheint unterhalb des Bildes. left und right eignen sich für mehrzeiligen Text.

Mit <br clear=all> wird eine anschliessende Fortsetzung unterhalb des Bildes erzwungen.

Beispiel : <img src="xild01.jpg" width="200" height="133" align="left"> <p>Dieser Absatz wurde mit Hilfe von align="left" rechts vom Bild angeordnet.</p> <br clear=all> <p>Dieser Absatz wird unterhalb des Bildes fortgesetzt, weil vorher <br clear=all> notiert wurde.</p> ergibt : Dieser Absatz wurde mit Hilfe von align="left" rechts vom Bild angeordnet. Dieser Absatz wird unterhalb des Bildes fortgesetzt, weil vorher <br clear=all> notiert wurde.

Mit den Attributen hspace (horizontal) und vspace können noch die Seitenabstände definiert werden:

Dieser Absatz wurde mit Hilfe von align="left" rechts vom Bild angeordnet. Zusätzlich beträgt der Abstand des Bildes zu den umgebenden Elementen 14 px horizontal und 10 px vertikal- das gesamte <img>- Tag lautet in diesem Fall: <img src="xild01.jpg" width="200" height="133" align="left" hspace="14" vspace="10">

Links werden mit dem <a href> ... </a>- Tag eingebunden.

Bemerkungen:

• "a href" bedeutet 'anchor to hypertext reference' (anchor= engl. Anker).
• Im einleitenden Tag wird die Adresse entweder absolut oder relativ eingebunden (Einbinden von Dateien).
• Anstelle von Text können auch andere Elemente eingebunden werden, beispielsweise Grafiken. Dabei muss das Attribut (+ ="Wert") border="0" gesetzt werden, soll ein Rahmen um das Bild vermieden werden (Beispiele siehe oben).

Listen und Trennlinien sind zwei einfache Hilfsmittel innerhalb von HTML, um Inhalt (Trennlinien) oder Text (Listen) zu gliedern.

Horizontale Trennlinien werden mit dem <hr> - Tag eingebunden . (hr = horizontal rule)

Die Gestalt der Trennlinie lässt sich durch folgende Attribute noch genauer festlegen:

• noshade: Eine Trennlinie wird vom Browser per Voreinstellung schattiert angezeigt. Mit 'noshade' erreicht man eine unschattierte, solide Darstellung.
• width: Mit diesem Attribut kann die Länge der Trennlinie bestimmt werden. Die Angabe erfolgt entweder in Prozentwerten oder in ganzen Zahlen (= Pixelwerte).
• color: Damit wird eine Farbe vergeben.
• size: Dieses Attribut bestimmt die Dicke der Trennlinie.
• align=[left, center oder right]: horizontale Ausrichtung der Trennlinie.

Grundsätzlich kann zwischen ungeordneten und geordneten Listen unterschieden werden:

Erläuterung :

• Die ganze Liste wird innerhalb des <ul> ...</ul> - bzw. <ol> ... </ol> - Tags definiert (ul=unordered list , ol=ordered list).
• jeder einzelne Listenpunkt wird innerhalb eines <li> ... </li> - Tags definiert (li=list item).

Die Gestalt der Listenpunkte kann auch noch näher beeinflusst werden.

Mittlerweile habt ihr sicher das so far erwähnte HTML eingesetzt und eine super kuhle Seite geschrieben. Jetzt könnt ihr sie ins Netz laden. Bei einem Gratisanbieter wie Tripod ist das in fünf Minuten erledigt. Einfach deren Homepage besuchen und den Schildern bzw. Anweisungen folgen (z.B. "Gratis- Ihre Homepage auf ...":).

• upload der homepage