Einführung in HTML Testbericht

Heute möchte ich einmal allen Nichtwebmastern, das HTML etwas näher bringen. Nach dem Lesen dieses Berichtes sollte jeder in der Lage sein, eine einfache Homepage selber zu erstellen.


Was ist HTML?
-----------------

Das ist eine Art Programiersprache, um grafische Darstellungen und einfache Programme zu erstellen, die dann im Intenet zu sehen sind. Im Gegensatz zu richtigen Programmen, wird der HTML Quelltext nur einmal ausgeführt und hat weder Schleifen noch Sprünge innerhalb des Quelltextes. Außnahme sind natürlich die Links, die auf andere Seiten (Quelltexte) verweisen. Eine Homepage besteht also meist nicht nur aus einem \"Programm\", sondern häufig aus vielen.


Wie kann ich HTML Schreiben?
--------------------------------

Im einfachsten Fall kann man dazu jeden belieben Texteditor nehmen. z.B. das WordPad. Man muß nur hinterher die Dateiendung von .txt oder .doc in .html oder .htm ändern.
Natürlich gibt es auch Programme, mit denen man ohne HTML-Kenntnisse eine Seite erstellen kann, welche dann automatisch den Quelltext erzeugen. Für Anfänger ist das auch keine schlechte Wahl. Aber ich habe die Erfahrung gemacht, daß solche Programme extrem viel Quelltext erzeugen, der meist unnütz ist. Mit der Handprogrammierung kann man viel mehr machen und zudem ist der Quelltext, und somit auch die Ladezeit der Seite, erheblich kürzer.


Eine einfache Seite
-----------------

Damit der Browser erkennt, daß es sich um eine HTML-Datei handelt, wird am Anfang und Ende jeweils der Tag (HTML) bzw. (/HTML) stehen.
Alle Befehle (Tags) werden in eckigen Klammern geschrieben, wobei der Endtag noch einen Slash beinhaltet.
Weitehin sollte ein (head) Tag nicht fehlen, in dem der Titel und einige andere Eigenschaften der Seite angegeben werden können. Beispielsweise die Hintergrundfarbe oder Grafik. Das Grundgerüst einer Seite könnte dann so aussehen:

(html)
(head)
(title)Titel der Seite(/title)
(/head)
(body bgcolor=#555555)

Weiterer Quelltext

(/body)
(/html)

Das Ergebnis ist eine leere Seite mit der Hintergrundfarbe (bgcolor) Hellgrau. Die Zahl 555555 steht für die drei Grundfarben in hexadezimaler Schreibweise. 000000 ist Weiß und FFFFFF ist demzufolge schwarz, Wobei jeweils zwei Ziffern eine der Grundfarben darstellen.
Altenativ dazu kann natürlich auch eine Grafik als Hintergrund gewählt werden. (body backgraund=\"Grafik.jpg\")
Die Farbe kann auch mit z.B. \"Yello\" \"Blue\" u.s.w. angegeben werden, wem die hex-schreibweise zu aufwendig ist.

Natürlich soll auf der Seite etwas stehen. Dazu kann man einfach einen Text schreiben, der dann wie folgt formatiert werden kann. Textfarbe: (Font color=#555555)Eigener Text(/Font)
Fontart: (Font Face=\"Fontart\")Eigener Text(/Font)
Fontgröße: (Font Size=1)Eigener Text(/Font) wobei die Zahl 1 sehr kleiner Text ist und die Zahl 7 der größte ist.
Diese Tags können natürlich auch kombiniert werden. (Font color=#555555 Face=\"Fontart\" Size=1)

Um den Text in die Mitte der Seite zu setzen wird der (center) Tag verwendet. Für einen Zeilenumbruch, der erzwungen werden soll ist (BR) der richtige Tag. Das könnte dann so aussehen.:

(html>
(head>
(title>Titel der Seite(/title)
(/head)
(body bgcolor=#555555)

(center)
(Font color=#999999 Face=\"Fontart\" Size=1)Eigener Text(BR) Weiter Eigener Text(/Font)
(/center)

Weiterer Quelltext

(/body)
(/html)

Das Ergebnis ist eine graue Seite mit dunkelgrauer Schrift.

Damit die Seite etwas Bunt wird, sollten natürlich Grafiken nicht fehlen. Dazu verwendet man den Tag (img src=\"Bild.jpg) Diese Grafik kann dan genau wie der Text mit (center) oder (BR) angeordnet werden. Wenn sich die Grafik auf einem anderen Server befindet, muß natürlich die komplette URL angegeben werden. (img src=\"http://www.Beispielseite.de/Grafik.jpg\")

Natürlich gehören in jede Seite auch Links. Hier verwendet man den Tag (a href=\"NächteSeite.html\")Hier gehts zu nächsten Seite(/a)
Das funktioniert natürlich auch mit einer Grafik: (a href=\"NächteSeite.html\")(img src=\"Grafik.jpg)(/a)
Das könnte dann so aussehen:

(html)
(head)
(title)Titel der Seite(/title)
(/head)
(body bgcolor=#555555)

(center)
(Font color=#999999 Face=\"Fontart\" Size=1)Eigener Text(BR)Weiter Eigener Text(/Font)
(/center)

(HR)

(a href=\"NächteSeite.html\")(img src=\"Grafik.jpg)(/a)


(/body)
(/html)

Das Ergebnis ist eine Seite mit dem Text und der darunterliegenden Grafik als Link, wobei dazwischen mit dem (HR) Tag noch eine horizontale Trennlinie eingefügt wurde.



Schlußwort
------------

Das war eine ganz kleine Einführung in die HTML-Programmierung. Es gibt natürlich noch viel mehr Tags um eine Seite ansprechend zu gestalten. Das würde aber den Rahmen eines Berichtes sprengen. Daher empfehle ich SELFHTML. Das ist eine Sammlung von Seiten, die man sich überall im Netz herrunterladen kann, worin alle Befahle mit super guten Beispielen erklärt werden.


Fazit
-----

Ich kann jedem nur empfehlen sich mit der Internetprogrammiersprache HTML mal zu beschäftigen. Wenn man einmal den Einstieg geschafft hat, und die Grundtags kennt, ist es sehr einfach. Jeder der früher mal in BASIC was geschrieben hat, sollte damit keine Probleme haben, da HTML noch einfacher ist, wenn man einmal von Java absieht.


Viel Spaß beim Webmastern wünscht Jan

PS: Da Yopi keine Eckigen Klammern akzeptiert, mußte ich alle als normale schreiben.