3. Eine neue HTML-Seite erstellen
Ein wenig Theorie! |
| Die Grundstruktur einer HTML-Seite |
||
|---|---|---|
|
HTML-Grundgerüst <html>
<head>
<body> </html> |
Ein HTML-Dokument hat einen Kopf- und einen Inhaltsteil.
Der Kopf steht zwischen den Befehlen <HEAD> ... </HEAD>, der Inhaltsteil zwischen den Befehlen <BODY> ...</BODY>. Die HEAD-Angaben werden im Browserfenster nicht angezeigt. Sie enthalten Angaben, die z.B. von Suchmaschinen ausgewertet werden (sog. Meta-Tags). Der Text zwischen <TITLE> ... </TITLE> wird in der Titelzeile des Browsers angezeigt. Zwischen dem BODY-Anfangsbefehl und - Endbefehl können Texte, Graphiken, Sound, interne und externe Links, eMail-Adressen ... eingefügt werden. |
|
Jetzt zur Praxis! |
Über die Schaltfläche 
, die dir aus anderen Windows-Programmen bekannt sein sollte, lässt sich leicht eine neue HTML-Seite erstellen. Es öffnet sich ein Fenster, in das du verschiedene Angaben, die bei der Neuanlage wichtig sind, eingeben kannst.
Schlüsselwörter und Beschreibung: Die Einträge werden als Meta-Tags dargestellt und sind für Suchmaschinen-Roboter, die diese Seite indizieren wollen, wichtig, weil sie in deren Datenbanken gespeichert werden.
Die anderen Eingabefelder brauchen nicht ausgefüllt zu werden.
Ein Klick auf "Erstellen" führt zu folgendem Ergebnis im Editorbereich des Programms:
Vergleiche die gemachten Eingaben mit dem Ergebnis!
Dir ist sicher schon aufgefallen, dass der BODY-Anfangsbefehl (<body ...>) um einige Parameter erweitert worden ist:
- text="#000000": gibt die Schriftfarbe an, hier "schwarz". Der Farbcode kann über die Karteikarte "Colors" verändert werden.
- bgcolor="#FFFFFF": Bgcolor bedeutet "Backgroundcolor" und legt die Hintergrundfarbe der HTML-Seite fest, hier "weiß" link="#FF0000": Die Farbe des Links, der noch nicht angeklickt worden ist, hier "rot"
- alink="#FF0000": Farbe eines aktiven Links, d.h. ein Link, der z.B. in einem Auswahlmenü gerade angeklickt ist, hier auch "rot"
- vlink="#FF0000": Visited Link, also "besuchter Link". Einem früher angeklickten Link kann man eine andere Farbe zuweisen, damit man daran erinnert wird, dass man die Seite bereits gesehen hat!
Tipp! Der Befehl bgcolor="#..." weist den Browser an, der Seite eine bestimmte Hintergrundfarbe zu geben. Du hast aber schon oft gesehen, dass der Hintergrund aus einem Bild oder einer Grafik (Wasserzeichen) besteht. Wenn du über eine solche Hintergrundgrafik im gif- oder jpg-Format verfügst, dann kannst du sie mit dem Befehl background="Hier musst du den Dateinamen eintragen" als Body-Erweiterung anzeigen lassen.
Zwischen dem BODY-Anfangsbefehl (<body>) und dem -Endbefehl (</body>) kannst du nun das eingeben, was auf deiner Seite mit dem Browser dargestellt werden soll.
Willst du dir das Ergebnis ansehen, dann klicke auf die Schaltfläche 
. Sollte die erstellte HTML-Seite noch nicht gespeichert worden sein, dann wirst du jetzt hierzu aufgefordert:
Wichtig! HTML-Seiten können sowohl mit der Dateiendung .htm oder .html gespeichert werden. Deswegen wird die Dateiendung durch den Editor nicht automatisch - wie z.B. bei anderen Windowsprogrammen üblich - ergänzt. Du musst also auf jeden Fall den gesamten Dateinamen, einschließlich der Endung, eintragen!
Nach dem Speichern wird der Browser gestartet und die Seite angezeigt - natürlich nur, wenn du zwischen dem Body-Anfangs- und -Endbefehl Eingaben getätigt hast! - Wie du die Darstellung dieser Eingaben verbesserst, das lernst du in der folgenden Lektion ...
Arbeitsaufgaben |
- Leg den Titel, verschiedene Suchbegriffe und eine Seitenbeschreibung fest, und trage sie in die entsprechenden Eingabefelder ein.
- Erweitere den Bodybefehl um die Text- und Hintergrundfarbe nach deinem Geschmack, und weise auch den Links Farben zu!
- Gib zwischen <body> und </body> ein paar Wörter oder kurze Sätze ein.
- Betrachte das Ergebnis im Browsermodus, nachdem du die Datei gespeichert hast.
- Experimentiere mit verschiedenen Farbkombinationen, und entscheide dich für eine - deinen persönlichen Vorstellungen entsprechende - Darstellung!
Home