Einleitung - Die Grundidee ist wichtig

Bei den meisten, die im Internet surfen, regt sich irgendwann der Wunsch eine eigene Homepage zu besitzen.
Als Anfänger steht man allerdings meist ziemlich im Wald. Es gibt zwar schon jede Menge Literatur zum Thema, aber wer will schon einen 500 Seiten Schmöker lesen, um ein 'Hallo Welt' hinaus schreien zu können.

Dieses Tutorium soll nun einen Einblick in die Grundtechniken der HTML - Programmierung geben, damit der Anfang leichter fällt (danach kann man immer noch die Schmöker lesen).

Grundsätzlich gilt: HTML ist kinderleicht. 

Mit 20 Befehlen und dem richtigen Grundgerüst (siehe dazu auch Links) kann man schon tolle Sachen machen. Aber um eine WIRKLICH gute Homepage zu erstellen, die gerne besucht wird, sind vor allem zwei Zutaten notwendig:

Ideen und Inhalte

Ein Konzept, was man eigentlich mit dem eigenen Internetauftritt bezweckt, ist wichtiger, als die programmier - technische Umsetzung. O.k., wer sich bis jetzt nicht hat abschrecken lassen, der möge sich ins Programmiervergnügen stürzen (und glaubt mir, es ist wirklich ein Vergnügen [o.k., meistens ;)]).
Das Tutorium geht schrittweise vor, um alle Klarheiten von Anfang an zu beseitigen.

Los geht's mit Schritt 1 

(Ein kleiner Schritt für Dich, ein großer Schritt... Blödsinn, der Menschheit ist das noch vollkommen Blunzn).

Schritt 1 - Grundgrüst

Die meisten 'Anfänger-Guides' sind etwa so aussagekräftig wie eine Windows Fehlermeldung (Access Violation in Module 007-08/15-4711 - Aha, da hab ich jetzt was davon).
Meistens wird nicht einmal beschrieben, wo man die verdammten HTML-Befehle überhaupt reinschreiben soll (ich wollte sie zuerst in Word (!) schreiben). 

Also: HTML ist nichts anderes als reiner Text, d.h. am Besten verwendet ihr den stinknormalen Windows - Editor (ja, genau den in der Zubehör-Gruppe mit dem Notizblock Symbol).

Dort werden alle Befehle hineingeschrieben und anschließend als Datei mit der Endung .html oder .htm abgespeichert. Das ist wichtig, da aus der Endung der Browser (Netscape, Microsoft Explorer) erkennt, daß es sich um ein Internet-File handelt.

	Tip: Notepad (also der Editor) hat keine Voreinstellung um HTML Files 	einzuspeichern. Ihr müßt also wirklich bei 'speichern unter' den Namen 'datei.htm' 	eingeben und darauf achten, daß der Dateityp auf 'all files' steht. Sonst hängt euch der 	Editor nämlich die Endung '.txt' an, wodurch die Datei wieder nicht als HTML File 	erkannt wird!

Und noch etwas: Alles in Kleinschreibung abspeichern! Das erspart euch später viel Mühe, glaubt mir.
Hier nun das Grundgerüst für jede Internet-Datei:

<html>
<head>
<title>DER TITEL DER SEITE</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ff0000" vlink="#00ff00">
HIER STEHT NUN DEIN INHALT!!!!
</body>
</html>

Versucht nun, dieses Grundgerüst (von <html> bis </html>) zu kopieren, in den Editor einzufügen und als HTML Datei abzuspeichern (s.o.).
Mit einem Browser könnt er nun die Datei ansehen (file, open file, [pfad]datei.html).
Na, war doch gar nicht so schwer, oder??

Tip: Was viele nicht wissen: Ihr braucht nicht mal eine Internet-Anbindung, um Seiten zu erstellen. Ihr braucht nur einen Browser (den findet ihr auf so gut wie jeder Computer-Zeitschrift CD-ROM). Mit dem oben beschriebenen file - open file – datei.html arbeitet ihr offline.

Nun zur Erklärung, was das alles bedeutet:
HTML ist sehr logisch aufgebaut. Die Befehle (auch Tags genannt [ausgesprochen: Täks, Tex, Teeegsch - je nach Englischkenntnis und Dialekt]) werden immer in spitze Klammern geschrieben (<>) und gelten genau für den Bereich zwischen öffnen (z.B. <body>) und schließen (z.B. </body>) desselben.

Die einzelnen Befehle im Grundgerüst:
<html> sagt dem Browser, daß es sich um eine HTML Datei handelt. 
<head> ist der Bereich der Zusatzinformation. Hier können Informationen über Autor, Entstehungsdatum oder Suchmaschineninfos stehen. Diese Infos sind für den Besucher normalerweise nicht sichtbar (!). Am Anfang werdet ihr wohl nur den
<title> verwenden. Wie der Name schon sagt, ist dies der Titel der Seite (in meinem Fall also "Axl's Black Hole"). Der Titel wird in der obersten Zeile des Browsers angezeigt.
Mit <body> beginnt der eigentlich sichtbare Teil, also der Inhalt der Seite. Alles was unterhalb von  <body> steht ist sichtbar! 
Aber da steht ja nicht nur <body>, da steht ja noch was in der Klammer. Diese Sachen (bgcolor, ...) nennt man Attribute, also Zusatzinformation zu einem Befehl. Sie sind optional, können also weggelassen werden. Je mehr Attribute allerdings verwendet werden, desto genauer weiß der Browser, wie er die Seite darzustellen hat.

Die Attribute des <body> - Tags:
 bgcolor: steht für ‘background color’, also die Hintergrundfarbe. Was bedeuten diese kryptischen Nullen und F's? Nun, wir wollen dem Browser mitteilen, welche Farben wir wünschen. Dies geschieht mittels hexadezimalem RGB - System. Das hört sich toll an und man kann damit sicher die Mutter der Freundin beeindrucken ("Ich arbeite als hexadezimales RGB - System" - "Und wieviel verdient man da?"). Übersetzt heiß das ROT - GRÜN - BLAU (nicht mehr so gut zum Angeben), im Bereich von 00 (gar nicht) bis ff (volle Pulle). 
Beispiel: "#000000" ist Schwarz (keine der drei Farben), "#ffffff" ist Weiß (alle Farben voll), "#ff0000" ist Rot (R hat ff, die anderen 0), usw. 
Hexadezimales System wird wie folgt gezählt: 0-9, dann a, b, c, d, e, f. Ihr könnt also auch folgenden Farbcode verwenden: "#86a39a".

	Tip: Immer darauf achten, daß der Farbcode 6 - Stellen zählt! "#0000" zählt also nicht. 	Auch wenn man nur Grün will, müssen auch die Nullen für Rot und Blau angegeben 	werden ("#00ff00").

Nachdem wir das Farbsystem kennen, sind die anderen Attribute keine Schwierigkeit mehr!

 text: Definiert die Textfarbe. Gleiches System wie Hintergrundfarbe. Achtet nur darauf, daß text und Hintergrund nicht gleich sind (Schwarz auf Schwarz wirkt zwar existentialistisch, sieht man aber im Allgemeinen schlecht!)
 link: steht für die Farbe der Verknüpfungen bevor sie angeklickt wurden, vlink (visited links) für schon besuchte Links.

Gut, das war alles, was man über das grundsätzliche Erstellen einer normalen HTML Datei wissen muß.
Bist Du noch da??
 Wenn ja, dann gehen wir jetzt zu Schritt 2 und beschäftigen uns mit den wichtigsten Befehlen, um eine Seite auch mit Inhalten füllen zu können.

Schritt 2 - Befehlsübersicht

Wir haben jetzt also ein Grundgerüst erstellt, das wir mit Inhalten füllen wollen.
Eine Menge Fragen tauchen auf: 

Wie schaffe ich es, meinen Namen bildschirmfüllend darzustellen? 
Wie krieg ich den Browser dazu, meine Pornobilder zu laden? 
Wie kann ich meinen Internetauftritt mit der Seite der südvietnamesischen Goldfischliebhaber verlinken?

Hier die wichtigsten Befehle
(zur Erinnerung: alle Befehle kommen in den Bereich zischen <body> und </body>)
 Reiner Text
Text, so er keine besonderen Formatierungen enthalten soll, wird einfach geschrieben (no na). 

 Zeilenumbruch
<br>
Steht für Break, also einen Zeilenumbruch. Wenn ihr im Editor einen Text hineintippt und 'Enter' drückt, springt der Cursor in die nächste Zeile. Nicht aber beim Browser!!! Der Browser schreibt so lange in die gleiche Zeile, bis entweder die Zeile aus ist, oder er ein <br> findet. Dieser Befehl muß nicht geschlossen werden, es gibt kein </br>!

 Überschriften
<h1>Überschrift</h1>
Der Befehl für Überschriften. Je nach gewünschter Größe ist ein Bereich von h1 bis h6 möglich. h1 ist riesig, h6 kaum mehr zu lesen. Am besten ausprobieren! Dieser Befehl muß geschlossen werden, sonst wird die ganze Seite in der entsprechenden Größe angezeigt. Achtung: Überschriftenbefehle setzen bei Beendigung (z.B. </h1>) automatisch einen Zeilenumbruch.

 Grafiken
<img src="datei.gif">
Dies ist der Befehl, um eine Grafik einzubinden. Zulässige Dateiformate für Internetgrafiken sind .gif und .jpg. Diese Formate sind nämlich komprimiert und brauchen daher relativ wenig Speicher. Zu Erklärung: img steht für image, src für source (Quelle). Nicht auf die Anführungszeichen vergessen! Wenn ihr ein eigenes Bilderverzeichnis mit dem Namen 'pics' anlegt, wäre der Pfad "pics/datei.gif". Muß nicht geschlossen werden!

	Tip: Es ist gut, dem Browser gleich die Bildgröße mitzuteilen, da er die Seiten dann 	schneller aufbauen kann. Die Bildgröße erfahrt ihr in eurem Grafikprogramm (z.B. in 	Paint Shop Pro unter 'Bildinformation'). Der img-Befehl wird dann also um folgende 	Attribute erweitert:  <img src="datei.gif" width="200" height="400"> für ein Bild das 	200 Pixel breit und 400 Pixel hoch ist. Auch Prozentangaben sind möglich 	(width="50%").

 Links
<a href="datei.htm">Klick hier drauf, um den Link zu öffnen</a>
Fragts mich nicht wofür das steht (hyper-reference??), jedenfalls kann man so Links in eine Seite einbinden. Im Beispielbefehl wird eine lokale Datei eingebunden, d.h. eine Seite die auf dem gleichen Server im gleichen Verzeichnis liegt. Klar?
Um eine Fremddatei anzulinken, müßt ihr die komplette Adresse (URL) angeben. Das kann zum Beispiel so aussehen: 
<a href="http://www.privatseite.com/" target="haupt">Fremddatei</a>
Um den target - Befehl braucht ihr euch noch nicht zu kümmern, wichtig ist nur, daß die fremde Adresse (inkl. http://, usw. ) angegeben wird. 
Achtung: Der Befehl muß mit </a> geschlossen werden! Sonst weiß der Browser nicht, bis wohin der Link gehen soll.

	Tip: Internetadressen sind eher kryptische Buchstabenkolonnen, bei denen man sich 	leicht vertippt. Besser (und schneller) ist es, die entsprechene Seite zu laden, die 	Adresse zu markieren und mittels 'Copy/Paste' in die Datei einzubinden.

 Mails
<a href="mailto:e-mail@adresse">Schick mir ein Mail</a>
Jeder will ein wenig Feedback erhalten. Die einfachste Möglichkeit ist, sich ein Mail schicken zu lassen. Das Prinzip ist das gleiche, wie bei einem Link. Nur, daß man statt des Dateinamens "mailto:deine@email" eingibt.

 Anker
<a href="datei.htm#anker1">Anker 1</a> und <a name="anker1"></a>
Ein Anker ist ein Sprungpunkt innerhalb einer Seite. Steht die gewünschte Info also auf einer längeren HTML - Seite in der Mitte, so setzt man vor Beginn dieser Info (also z.B. der Überschrift) den Befehl <a name="anker1"></a>. Dieser definiert den Anker, aufgerufen wird er durch <a href="datei.htm#anker1">Anker 1</a>.

 Tabellen
Mittels Tabellen kann man sehr gut layoutieren. Eine Mustertabelle schaut etwa folgendermaßen aus:

<table>
<tr>
<td>INHALT DER TABELLE 1</td>
<td>INHALT DER TABELLE 2</td>
</table>

<tr> steht für Table Row, d.h. das Aufmachen einer neuen Zeile. Anschließend muß ein
<td> kommen, also ein Table Data. Für den Browser heißt das, daß ab hier die Inhalte einer Tabelle beginnen.
Je mehr <td> definiert werden, desto mehr Zellen stehen nebeneinander. Erst mit der Definition eines neuen <tr> wird eine neue Zeile begonnen.

Eine Tabelle mit der Definition
<table>
<tr>
<td>INHALT DER TABELLE 1</td>
<td>INHALT DER TABELLE 2</td>
<tr>
<td>INHALT DER TABELLE 3</td>
<td>INHALT DER TABELLE 4</td>
</table>
sieht also folgendermaßen aus:
INHALT DER TABELLE 1 	INHALT DER TABELLE 2
INHALT DER TABELLE 3 	INHALT DER TABELLE 4

Als Attribute kann man der Tabelle einen Rahmen geben (<table border="1">), oder eine Hintergrundfarbe definieren (<table bgcolor="#cccccc">).

	Tip: Der Table - Befehl muß unbedingt geschlossen werden (</table>), ansonsten zeigt 	der Browser überhaupt nichts an.

Weitere Textformatierungen
 Ausrichtung
Um einen Bereich zu zentrieren, verwendet man den Befehl <center>. Wie immer gilt der Befehl so lange, bis er geschlossen wird (</center>). Die Voreinstellung des Browsers ist eine Linkszentrierung, die man mit dem Befehl <p align="left"> ebenfalls erreicht. Rechtszentrierung wäre <p align="right">. Geschlossen wird der Befehl mittels </p>.
Text hineinrücken erreicht man mittels <blockquote> (sollte wieder geschlossen werden).

	Tip: Man kann nicht nur Text ausrichten, sondern auch Grafiken, Überschriften, usw. 	Versucht mal <img src="datei.gif" align="right"> oder <h2 align="center">.

 Textgröße und -farbe
Um kleinere Textbereiche besonders hervorheben zu können, gibt es den <font> - Befehl mit einigen Attributen. 
Beispiel: <font size="4" color="#ff0000">Dieser Text wird mit Font besonders dargestellt</font>

 Listen
Aufzählungen schauen sehr gut aus, wenn man sie als Liste darstellt. Dazu gibt es den <li> - Befehl (so wie die einzelnen Punkte auf dieser Seite). Wenn einem der ausgefüllte Punkt zu fad wird, kann man auch <li type="square"> bzw. bullet, circle verwenden.

 Fett, Kursiv, Unterstrichen
Wie aus Textprogrammen bekannt, kann man auch im Internet Text fett (<b></b>), kursiv (<i></i>) oder unterstrichen (<u></u>) darstellen.

Und das waren auch schon die wichtigsten Befehle. Natürlich gibt es noch jede Menge anderer, aber für den Anfang reicht das absolut.
Für die, denen etwas noch unklar ist, hab ich eine Musterseite (nur online) erstellt.
Alle anderen bewegen sich zu Schritt 3.

Schritt 3 - Frames

Beim Stichwort Frames sagen die meisten einmal 'Oh Gott'. Dabei ist es gar nicht so schwer.
Zuerst: Was sind Frames? Frames sind, frei übersetzt, Rahmen. D.h. eine Homepage wird in verschiedene Bereiche untergliedert, die unterschiedliche Inhalte haben. 
Der Vorteil von Frames liegt auf der Hand: Leichtere Navigation, da z.B. ein Inhaltsverzeichnis - Frame ständig sichtbar ist.

Frames müssen auf der Startseite definiert werden, und zwar in folgender Form:

<html>
<head><title>Titel</title></head>
<!-- Beginn der Framedefinition -->
<frameset rows="50%,50%">
<frame src="datei1.htm">
<frame src="datei2.htm">
</frameset>
<!-- Ende der Framedefinition -->
</html>

Nicht so tragisch, oder?
Ist euch aufgefallen, daß es keinen <body> - Befehl gibt? Stattdessen wird der <frameset> - Befehl definiert.
Der Browser verarbeitet die Information der Reihe nach von oben nach unten, d.h. er erhält folgende Befehle:

<frameset rows="50%,50%">: Teile das Fenster in zwei Zeilen (Würde man Spalten wollen, müsste man cols statt rows einsetzen). Beide Teile sind gleich groß (50%). Natürlich kann man die Größe so ändern wie man sie wünscht, bzw. statt in Prozentzahlen in Pixel angeben.
Eine Homepage, die in Spalten geteilt sein soll, könnte also ungefähr folgenden Befehl haben: <frameset cols="100,*">. Das Fenster würde in zwei Teile geteilt, wovon der eine 100 Pixel groß ist (keine Prozentangabe), der andere den Rest (das Sternchen ist eine 'Wildcard').
<frame src="datei1.htm">: In dem ersten Fenster zeige den Inhalt der Datei "datei1.htm" an. Diese ist eine normale HTML - Seite mit body usw. 
<frame src="datei2.htm">: Zweites Fenster, "datei2.htm". 
</frameset>: Framedefinition abgeschlossen.

	Tip: Wenn ihr eine Testseite habt, und die Framedefinition ändert, müsst ihr beim 	Reload unbedingt die Shift-Taste gedrückt halten!!! Dies bewirkt, daß Seiten komplett 	neu angefordert werden, anstatt vom Cache (Zwischenspeicher) übernommen zu 	werden. Sonst kann es passieren, daß ihr trotz Änderungen immer noch die alte Seite zu 	sehen bekommt.

Target - Attribut
Und noch etwas sehr wichtiges: Wenn ihr nun vom Framefenster 1 in das Fenster Nr. 2 linken wollt, müsst ihr den Fenstern Namen geben und bei den Links das 'target' - Attribut setzen!!!
Also, Framedefinition wie gehabt, nur: <frame src="datei1.htm" name="hauptfenster"> und <frame src="datei2.htm" name="navigation">. Die Namen sind natürlich frei wählbar. Wenn ihr nun von Fenster 2 (navigation) auf Fenster 1 (hauptfenster) linken wollt, lautet der Befehl im Navigationsfenster <a href="xy.htm" target="hauptfenster">. Damit wird die Datei xy.htm nur im Hauptfenster angezeigt, die Navigation bleibt, wie sie ist (und trällert auch 'Ich will so bleiben, wie ich bin').
Wenn ihr ein komplett neues Zusatzfenster (bzw. ein neues Browserfenster) aufmachen wollt, dann schreibt target="_blank". Um aus dem Frameset wieder herauszukommen und eine Seite im ganzen (ursprünglichen) Fenster darzustellen, target="_parent".

Verschachtelung von Frames
Das ist natürlich nur die einfachste Variante!! Wirklich lustig wird es erst, wenn man versucht, Frames zu verschachteln:

<html>
<head><title>Titel</title></head>

<frameset rows="50%,50%">
<frame src="datei1.htm">
	<frameset cols="20%,80%">
		<frame src="datei2.htm">
		<frame src="datei3.htm">
	</frameset>
</frameset>
</html>

Da muß man schon mehr überlegen, wie :)
In diesem Fall werden insgesamt 3 Framefenster aufgebaut. Und zwar eine Zeile oben, mit dem Inhalt 'datei1.htm'. Dann allerdings kommt statt des 'frame src' - Befehls ein erneuter 'frameset' - Befehl! Für den Browser heißt das, daß er im zweiten Fenster (das erste ist ja schon definiert, indem es 'datei1.htm' erhält) noch einmal zwei Frames aufbaut. Jetzt erst bekommen diese ihre Inhalte (datei2.htm, datei3.htm) zugewiesen. Anschließend müssen alle geöffneten framesets wieder geschlossen werden, sonst zeigt der Browser gar nichts an!!!!
Versucht mal, ein paar Testdateien anzulegen und ein wenig  zu experimentieren.

Jetzt habt ihrs eigentlich schon fast geschafft!
Wagt nun noch den letzten Schritt 4 und ihr seid schon bald Profis.

Schritt 4 - Ins Netz stellen und bekannt machen

Eigentlich wißt ihr jetzt alles, was ihr zu wissen braucht. Nur eins noch nicht: Wie bringt man diese verdammte Homepage nun von der Festplatte ins Internet!?!
Die Geschichte ist ja die, daß man, um eine Seite im Internet ansehen zu könne, diese auf einen Server legen muß.
Selig die, die auf der Uni, in der Arbeit oder sonstwo Webspace (das heißt Platz auf dem Server) zur Verfügung haben. Alle anderen müssen ihn entweder bei einem Provider anmieten (was mitunter teuer sein kann), oder sich mit einem Gratis-Webspace Anbieter herumschlagen (siehe Links [online]).

Wie bringt man seine Homepage auf die Festplatte des Servers??
Es gibt vier Varianten:

1. FTP: Mittels File Transfer Protocol ist es möglich, Daten von einem Computer auf einen anderen zu schicken. Dazu braucht man auf dem anderen Computer allerdings eine Zugangsberechtigung.

2. Uploadformulare: Die Dateien werden auf der Webseite (im Admin-Bereich des Users) durch ein Formular übertragen. Bei umfangreichen Homepages etwas mühsam.

3. Mail: Hat man keinen FTP, kann man (je nach Provider!!!) seine Dateien per Mail schicken (als attachment). Leider ist man hier auf den Goodwill der Provider angewiesen.

4. Diskette: Hat man Zugang auf einem Server,  aber kein FTP, muß man alle Dateien auf Diskette speichern und auf den Server kopieren. 

	Tip: Wenn ihr zu Hause Windows verwendet, der Server aber unter UNIX läuft (was 	meistens der Fall ist), könnt ihr gröbere Probleme mit euren Dateinamen bekommen!!! 	Windows 95 / 98 verschlüsselt Dateinamen mit mehr als 8 Buchstaben und 	Dateiendungen, die mehr als 3 Buchstaben haben. UNIX entschlüsselt diese beim 	kopieren nicht, sondern man erhält so nette Files wie 'diesso~1.~ht', statt 	'diessollnureintestsein.html'. Besser man überschreitet die 8 bzw. 3 Buchstabengrenze 	nicht (also besser .htm als .html bei Disketten).
	Und noch etwas: UNIX ist casesensitiv, also unterscheidet Groß- und Kleinschreibung! 	Ein unter 'datei.htm' gespeichertes File wird durch den Aufruf 'Datei.htm' nicht 	gefunden!

Promotion

Falls ihr es jetzt geschafft habt, daß eure Homepage tatsächlich im Netz steht und bewundert werden kann, solltet ihr sie auch bekannt machen. Mehrere Möglichkeiten:

 Suchmaschinen:
 Mein Spezialgebiet :) => Lest euch die Artikel [nur online] (veröffentlicht in der Zeitschrift COM), die ich zu diesem Thema geschrieben habe, durch.

 Newsgroups:
Für bestimmte Inhalte gibt es bestimmte Newsgroups. Sucht euch die passenden heraus und postet eine Meldung, was ihr zu bieten habt. Vorsicht, Werbe-Postings sind nicht gerade beliebt in Newsgroups. Sucht euch nur wirklich gut passende Gruppen heraus.

 Linkverzeichnisse:
Je mehr Links auf die eigene Homepage verweisen, desto besser. Nutzt jede Gelegenheit, euch irgendwo einzutragen (gilt auch für Guestbooks. Allerdings sollte man trotz aller Euphorie bedenken, daß es sehr lästig sein kann, im Guestbook nur Fremdseitenwerbung ohne Aussage zu haben).

 Themenseiten:
Wie bei Newsgroups. Seiten mit ähnlichen Inhalten suchen und schauen, daß man ein Link bekommt. Je mehr Besucher die 'Bruderseite' hat, desto mehr fällt für euch ab.

 Webringe:
Zusammenschluß von Seiten mit ähnlichen Themen. Link garantiert, dafür muß man meist eine Grafik einbinden. Beispiel wäre 'Webfehler' (s.a. meine Literaturseite).

 Mails:
Trivial, aber wichtig. Legt euch ein Signature-File an, daß automatisch an eure Mails und Newsgroup Postings angehängt wird. Auf direkte Empfehlung reagieren immer noch die meisten User.

Ok, damit wären wir auch schon am Ende dieser HTML-Einführung. Wenn irgendwelche Unklarheiten auftauchen, zögert nicht, mir ein Mail (auer.alexander@somebuddy.com) zu schicken!
Aber auch sonst freue ich mich über jede Art von Feedback.
Viel Erfolg und wenn was aus eurer Seite geworden ist, lasst es mich wissen!