Um
eine Webseite darzustellen, benötigen wir, das haben wir
gelernt, im Prinzip nur eine Datei: die "index.html".
Nun verhält es sich jedoch so, dass es verschiedene
html-Darstellungsformen gibt, die vom html-Konsortium (W3C-Konsortium)
rund um Tim
Berner-Lee (dem Erfinder des Webbrowsers) definiert werden.
Danach muss eine html-Datei folgende Strukturelemente aufweisen:
1. Die Definition, welche html-Version verwendet wird
2. Einen Kopf-Bereich ("head"), in den wichtige Informationen
für den Browser geschrieben stehen
3. Einen Seiten- oder Hauptbereich ("body"), in dem sich der
eigentliche Text befindet
Dieses
html-Grundgerüst sieht so aus:
|
<!DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Hallo Welt!</title>
</head>
<body>
Hier steht der gesamte
Inhalt der Website
</body>
</html>
|
Erklärung:
- zwei
html-tags
rahmen das Gerüst oben und unten ein (
<html>
... </html>), ein Anfangs- und ein
Endtag.
- zwei
head-tags
mit Angaben zum Seiteninhalt und zum Schriftsatz
folgen (
<head>
... </head>, Anfangs- und Endtag)
- von den head-tags eingerahmt: die
<title>
... </title> - tags, mit deren
Hilfe die Seite kurz beschrieben wird
- es folgen zwei
body-tags,
innerhalb derer der gesamte Inhalt der
html-Seite steht (
<body>
... </body>, Anfangs- und
Endtag)
Exkurs: Der gesamte Inhalt einer
Website, auch die
Layoutbereiche, die sich waagerecht ausbreiten, wird in der Codeansicht
senkrecht, also untereinander, angeordnet!
Aufgabe:
1. Kopieren Sie nun dieses Gerüst
(linke
Maustaste festhalten, Rahmeninhalt überstreichen)
und fügen es in den
Editor ein, wie zu Beginn des Kurses. Tragen Sie einen Seitennamen
zwischen den <title> -- </title> -
tags ein, z.B. "meine erste html-Seite" (ohne die
Anführungszeichen).
2. Schreiben Sie in den body-Bereich etwas Sinnvolles, zum Beispiel
"Hallo Welt!".
3. Speichern Sie die Seite im Editor als "index.html" auf dem
Desktop ab.
4. Rufen Sie diese index.html-Datei nun durch Doppelklick auf.
5. Was erkennen Sie im Browser?
Um 100 Punkte reicher und stolze(r) Besitzer(in) einer gebrauchten
Waschmaschine sind Sie, wenn Sie folgendes auf dem Monitor sehen:
Das sieht doch
erstmal nach gar nichts aus!?
Interpretation:
Die
html-Kürzel werden natürlich
(oder auch Gottseidank) nicht im Browser angezeigt! Unser Seitentitel,
also das, was wir zwischen die
"<title>...</title>" - tags
[tä:gs] eintrugen, wird ganz oben in der
Titelleiste angezeigt (daher ihr Name).
Der Nutz- oder Gebrauchstext ("Hallo Welt!") zeigt sich
linksbündig oben auf der Seite. Der Hintergrund ist
weiß, die Schrift schwarz. Der Schriftfont ist ARIAL 16 Pixel
(in NVU festgelegt). Das ist die sogenannte
Standardeinstellung.
Achten sie auf penible, korrekte Schreibweise. Im Zweifelsfalle immer
alles klein und zusammenschreiben; Buchstaben mittels Bindestrichen
oder Unterstrichen verbinden. Lücken werden als Fehler
interpretiert! Ein Buchstabe an entscheidender Stelle zuviel
oder zuwenig, ein Kürzel falsch gesetzt, und der Browser
verweigert die
Anzeige oder stellt etwas anderes dar.
Html heilt Legastheniker! Pardon, kleiner Scherz am Rande! Genau
diese geforderte Exaktheit hat meine Nerven schon bis an die
Grenzen strapaziert. Falls Sie also Schwierigkeiten mit dieser Art der
Kommunikation bekommen, dann seien Sie sich meines Trostes sicher! Wenn
Sie sich allerdings darauf einlassen,
wird Ihre Ausdauer vom Applaus der Internet-Community begleitet sein.
Menschen sind nunmal nicht dazu geboren, stundenlang Codezeilen zu
schreiben. Wäre es so, hätte die Erde schon längst den
Ausstieg des Menschen aus der Evolution erlebt.
Wir wollen uns aus diesem Grunde nicht länger mit dem
html-Klein-Klein aufhalten. Wir suchen uns ein Tool, womit
man,
ähnlich komfortabel wie mit "MS Office Word", html-Seiten
verfassen kann.
Dieses Tool, dieser
"Editor" heißt:
N V U
- "en-View" ausgesprochen. NVU gibt's kostenlos
hier
herunterzuladen.
Obwohl
NVU
- bedauerlicherweise! - nicht mehr weiterentwickelt wird,
ziehe
ich ihn
für kleinere Arbeiten anderen, mächtigeren
Editoren wie Dreamweaver MX oder Netobjects Fusion 9 vor (mit Fusion "baute" ich meine Hauptseite).
Für das
Erstellen einer kleinen Bewerbungshomepage oder eines Webauftritts
für die Familie reicht NVU allemal!
