Hallo HTML-Neuling!

Willkommen zu Deinem Crash-Kurs über HTML!
Wenn Du mit der rechten Maustaste irgendwo auf die Seite klickst und "Quelltext anzeigen" (oder ähnlich) wählst, kannst Du sehen, wie man so eine Seite baut. Zum besseren Verständnis empfehle ich Dir, dies jetzt zu tun :-). Wenn Du das Gelernte gleich ausprobieren willst, (wovon ich ausgehe), dann öffne einfach den Windows-Editor Notepad. Dort kannst Du dann nach Belieben eigenen HTML-Code eingeben. Wenn Du diesen dann auf Deinem Desktop als Datei mit der Endung .htm oder .html speicherst, brauchst Du nur noch draufklicken, und schon kannst Du Dir in Deinem Internetbrowser das Ergebnis Deiner (hoffentlich erfolgreichen) Bemühungen betrachten.
Und damit Du schnell etwas zu tun bekommst, legen wir gleich los mit der Theorie:

So. Zeit, einen neuen Absatz anzufangen ( <p> im Quelltext).

Und schon wieder ein Absatz... ;-) (+ ein erzwungener Zeilenumbruch ( <br> ).
Die meisten Tags können sogenannte "Attribute" bekommen, die ebenfalls innerhalb der Klammern des Tags "definiert" werden.

Mit dem Attribut "style" kann man zum Beispiel jede Menge Formatierungen machen. Ein <p style="text-align:right"> bedeutet zum Beispiel "Dieser Absatz soll rechtsbündig auf der Seite stehen".

Besser sieht man das bei kurzen Sätzen...

Oder mal was zentriertes?
Mit Zeilenumbruch?

Mit "style" kann man auch Farben festlegen.

Oder Schriftgrößen ändern. Und das alles kombinieren...

Kleine Ergänzung hierzu: Eigentlich gibt es für all diese verschiedenen Eigenschaften eigene Attribute. Die werden jedoch über kurz oder lang aus HTML verschwinden. Deshalb ist es besser, sich gleich an die "moderne" Beschreibung mittels "style" zu gewöhnen. "style" ist streng genommen kein richtiges HTML mehr. Der moderne Webdesigner meint, HTML ist NUR für die Struktur des Textes da, nicht für das Aussehen. Und deshalb bedeutet "style" streng genommen nur "Achtung, jetzt kommt eine Designbeschreibung". Für diese Beschreibung (also zum Beispiel das Codewort "text-align") ist dann etwas anderes zuständig, was Du unter dem Stichwort CSS finden wirst. Ist aber (noch) nicht so wichtig...

Da wir gerade bei "Strukturen" angelangt sind: Wir hatten jetzt schon Absätze und Listen. (siehe weiter oben). Wichtig sind natürlich auch Überschriften, die HTML in 6 Stufen kennt. Überschrift 1 findest Du am Anfang der Seite (schau mal im Quelltext zu <h1>). Je geringer die Stufe, desto kleiner macht der Browser die Überschrift (sofern Du ihm nicht mittels "style" etwas anderes vorschreibst).

Überschrift zweiten Grades

Überschrift dritten Grades

Überschrift vierten Grades

Überschrift fünften Grades, Wie Du siehst, standardmäßig linksbündig ausgerichtet
Überschrift sechsten Grades, durch "style" zentriert ausgerichtet

Und - sofern ich das will - kann ich mittels "style" falsche Tatsachen vortäuschen:

Überschrift ersten Grades, aber sehr klein

Überschrift sechsten Grades, aber etwas vergrößert

Zeit für Grafiken! Grafiken bindest Du mit dem <img>-Tag ein. Als Attribute brauchst Du src=(Verzeichnis), um zu beschreiben, wo die Grafik zu finden ist. Auch das alt=(alternativer Text anstelle der Grafik) Attribut schreibt der Standard vor. Der dabei angegebene Text wird angezeigt, falls der Browser die Grafikdatei nicht finden kann. Die Attribute width=(Breite) und height=(Höhe) kann man mit angeben, damit der Browser sofort weiß, wieviel Platz er für die Grafik reservieren soll.
Schau am besten in den Quelltext, wie ich die Grafik einbinde:

Landschaft

Und damit wir noch ein bisschen verschachteln üben, setzen wir das Bild noch zweimal in eine grün gefärbte Tabelle - in Zeile1, Spalte1 und in Zeile2, Spalte2...

Noch einmal Landschaft
Noch mal Landschaft

Jetzt bleiben nur noch die "Links", welche mit Hilfe das <a>-Tags definiert werden. Hinter dem Attribut "href=" muss man nun nur noch die Adresse angeben, zu der der Link führen soll.

Mit folgendem Link kannst Du eine Datei in einem Unterverzeichnis ansprechen: Link zu einer Datei in einem Unterverzeichnis

Wenn Du in obigem Beispiel den Quelltext anschaust, siehst Du auch wieder eine typische Verschachtelung: Das "a-Tag" (also der Link) liegt innerhalb des "p-Tags" (also innerhalb des Absatzes)...

Natürlich kannst Du auch auf eine feste Internetadresse linken. Dafür, dass es funktioniert, musst Du natürlich online sein...
Wo der Link wohl hinführt?

Ein Link muß nicht zwangsläufig auf eine HTML-Seite führen. Da ein Browser auch mit Grafikdateien klarkommt, können wir uns das Bild von der Straße nach Sa Calobra auch folgendermaßen betrachten:
Link zum Bild

Durch die Möglichkeit, in HTML Elemente zu verschachteln, ist es jetzt nicht mehr schwierig, dem Benutzer auch beim Klick auf

einen Link anzubieten. Probier es gleich aus!

Eine Überschrift mit Link

Jetzt verlinken wir noch ein Bild: Kannenpflanze
Schau Dir hier im Quelltext noch mal die Verschachtelung an: ein Absatz (p), in dem wir einen Link (a) platzieren. Und als Inhalt des Links verwenden wir das Bild (img).

Das Verlinken ist das A und O. Wenn Du das kannst, hast Du das Schwierigste hinter Dir.

 

Gleich geschafft...

So, jetzt sind wir auch schon am Ende des HTML-Crash-Kurses. Du solltest nun einen kleinen Einblick in die Geheimnisse von HTML bekommen haben. Vielleicht hast Du ja beim "Probieren" Gefallen daran gefunden und möchtest Dich weiter damit beschäftigen? Dann empfehle ich Dir selfhtml. Dort findest Du sämtliche HTML-Tags in allen Einzelheiten und mit Beispielen erläutert. Es gibt keine bessere Referenz!

Falls Dir der Windows-Editor zum Bearbeiten Deiner eigenen HTML-Dateien zu spartanisch vorkommt, findest Du im Netz jede Menge Alternativen. Ich beispielsweise komme wunderbar mit Editpad klar.

Und jetzt bleibt mir nur noch...

Dir viel Spaß beim Erstellen Deiner eigenen Webseiten

...zu wünschen.

An dieser Stelle vielen Dank an meine Freundin Yvonne, die mich nicht nur zu diesem HTML-Tutorial inspirierte, sondern mich auch dazu "überrede", es der Allgemeinheit verfügbar zu machen.

03.08.2005
Veikko Voigt