 |
|
Grundlagen
Nachdem wir jetzt ein Projekt eingerichtet haben, erstellen wir eine neue leere Seite, indem wir entweder oben links auf den Button mit dem weissen Blatt klicken oder "Datei" - "Neues HTML Dokument" wählen. Folgendes Fenster öffnet sich:
Hier geben wir in die oberste Zeile wie im Beispiel gezeigt "Meine Homepage - Startseite" ein. Der eingegebene Text erscheint später im Browser ganz oben links neben dem Explorer- oder Netscapesymbol (oder Opera, oder...). Alle weiteren Eingabemöglichkeiten lassen wir für dieses Beispiel wieder ausser Acht.
Nun klicken wir auf "Erstellen".
Im großen Hauptfenster sehen wir jetzt das HTML-Grundgerüst, welches der Editor automatisch erstellt. Jetzt muss das Dokument zunächst abgespeichert werden.
Das machen wir mit "Datei" "Speichern unter..."
Wir müssten uns jetzt im Ordner "Tutorial" befinden. Dort speichern wir die Seite mit dem Namen "index". Die Endung ".html" vergibt der Editor automatisch.
Jetzt eine Erläuterung zum HTML-Grundgerüst. Bitte nicht einfach "überlesen", weil du endlich anfangen möchtest. Es ist ziemlich wichtig.
Das Grundgerüst, das der Editor automatisch erstellt hat, sieht folgendermaßen aus:
Anmerkung: Da das Textfeld im Editor breiter ist als mein kleines Feld, werden sich die automatischen Zeilenumbrüche im Editor an anderer Stelle befinden als in diesem und den folgenden Beispielen. Das hat jedoch keine Auswirkungen auf das Dokument selbst.
Alles, was Blau ist, bezeichnet man als Tags (Englisch ausgesprochen, also "Tägs"). Sie sagen dem Browser, wie Texte, Bilder, Tabellen usw. angezeigt werden sollen.
Braun sind die einzelnen Werte zwischen den Anführungszeichen, z. B. die Hexadezimal-Zahl der Schriftfarbe, Schriftart, Größe usw.
Schwarz sind die Texte, die letztendlich auf der Homepage zu sehen sind.
Diese unterschiedlichen Farben sind keine Notwendigkeit bei HTML, sondern eine Unterstützung des Editors, um Texte und Tags leicht unterscheiden zu können.
!! Falls du keine unterschiedlichen Farben siehst, sondern nur schwarzen Text, klick hier!.
Das Grundgerüst ist in 3 Hauptbereiche geteilt.
Der Anfang <html> und das Ende </html> zeigen dem Browser, wo HTML anfängt und wo es aufhört.
Zwischen <head> und </head> stehen der Titel und die Meta-Tags. Was zwischen diesen beiden Tags eingesetzt ist, erscheint optisch nicht auf der Seite selbst, sondern wird z. B. für Suchmaschinen genutzt.
Die eigentliche Arbeit an der Seite findet zwischen <body> und </body> statt.
Dort befinden sich in der obersten Zeile die so genannten Body-Tags. Dort werden einige Grundeinstellungen für die Seite vorgenommen.
Die vorgegebenen Body-Tags sind:
text="#000000" bestimmt, in welcher Schriftfarbe der Text dargestellt wird.
bgcolor="#FFFFFF" ist die Hintergrundfarbe der Seite.
link="#FF0000" ist die Farbe der Links, die noch nicht angeklickt wurden.
alink="#FF0000" ist die Farbe der aktiven Links (die aktuell geöffnete Seite).
vlink="#FF0000" ist die Farbe der besuchten (visited) Links.
Die Werte in den Anführungszeichen können natürlich nach eigenem Geschmack verändert werden.
Es gibt noch weitere Body-Tags, die man durch Rechtsklick in die Body-Zeile auswählen kann. Auf diese gehe ich jedoch im Moment nicht weiter ein.
Jetzt aber endlich zum praktischen Teil!
|
|
|
