### Inhaltsverzeichnis ###
Einleitung und Grundgerüst (dieser Post)
Verweise zu anderen Seiten (Hyperlinks)
Verweise zu Dokumenten auf dem selben Webspace (relative Hyperlinks)
Wir binden nen Bildche ein
Relative Hyperlinks 2
Umlaute
Doctype
Punt Machen! (Elemente und Text einfärben)
Linkfarben und die erste Überschrift
Setzen von Links auf einen Punkt innerhalb der selben Seite
Tabellen
Tabellen: coll- und rowspan
DIVs
DIV- Seite
Es erschweren Bilder von eurer Webseite zu speichern
Hotlinking verhindern (.htaccess)
Favicon
### Einleitung und Grundgerüst ###
Viele möchten gerne eine Homepage machen, die nicht bei Beepworld liegt.
So etwas bedeutet aber auch, daß man dafür HTML können muss.
Deshalb fange ich hier einen kleinen Kurs an und möchte jeden, der Interesse hat, dazu einladen =)
Fangen wir also an:
Als erstes müssen wir einstellen, daß Windows uns die Dateiendungen anzeigt. Das ist wichtig, weil wir unseren Code als "Dateiname.html" abspeichern wollen. Tun wir das nicht speichert der Editor das ganze als Textdatei (txt).
Arbeitsplatz --> Extras --> Ordneroptionen --> Ansicht -->
beim 5ten von oben "Erweiterungen bei bekannten Dateitypen ausblenden" den Haken entfernen.
Nun sind wir bereit und legen los:
Start --> (alle) Programme --> Zubehör --> Editor
Jetzt haben wir ein leeres Blatt vor uns.
Die erste und wichtigste Regel: Alle Tags müssen immer geschlossen sein!
Ein "Tag" ist ein Codeteil / Codeschnipsel, der etwas aussagt was passieren soll.
Das Grundgerüst:
Als erstes müssen wir festlegen, daß das ganze ein Html-Dokument werden soll. Das machen wir so:
<html>
</html>
<html> sagt aus, daß ab hier alles ein html-Dokument ist.
</html> sagt aus, daß das ganze hier zuende ist.
Die Seite selbst besteht aus einem Kopf und einem Körper. Quasi wie ein Lebewesen. Ohne diese Beiden kann niemand leben *g*
Daher müssen wir unserer Seite nun einen Kopf und einen Körper geben.
<html>
<head>
</head>
<body>
</body>
</html>
Wir sehen: Die Seite hat nun einen Kopf (head) und einen Körper (body)
Die Html-Tags aussenrum besagen das das alles ein Html-Dokument ist.
Die Seite ist aber bis jetzt noch leer. Hmm.. füllen wir sie also *g*
Der Head-Tag ( Kopf der Seite )
Hier kommen Sachen rein, die man nicht sehen kann. Das hört sich jetzt vielleicht etwas bescheuert an, aber ist es gar nicht.
Der Browser (das Ding mit dem man im Internet unterwegs ist zB der Internetexplorer) muss zB wissen welche Sprache man benutzt hat. Dann kann man noch Sachen reinschreiben, wie zB wer die Homepage geschrieben hat oder Schlüsselworte für die Suchmaschinen. Sowas muss niemand lesen, es reicht wenns der Browser tut und die Suchmaschinen =)
In diesem Beispiel nehme ich jetzt mal die Sprache, wiel die auf jeden Fall reinmuss.
<meta http-equiv="content-language" content="de" />
Das sagt aus, daß die verwendete Sprache Deutsch ist.
Die Seite sähe jetzt so aus:
<html>
<head>
<meta http-equiv="content-language" content="de" />
</head>
<body>
</body>
</html>
Was man auch noch in den Head-Tag reinschreibt ist der Titel der Seite, also das was dann ganz oben im Browser zu sehen ist. Noch vor dem Menüzeugs.
Dieser Tag geht eigentlich einfach.
<title>Der Titel der Seite</title>
Das schreiben wir jetzt mal rein
<html>
<head>
<meta http-equiv="content-language" content="de" />
<title>Beispielseite</title>
</head>
<body>
</body>
</html>
Sie ist jetzt für unsere Augen immer noch leer. Also füllen wir sie doch mal =)
Der Körper einer Seite (Body-Tag)
Am einfachsten ist es wenn man seine Seite mit Schrift füllt.
Machen wir das doch einfach mal =)
<html>
<head>
<meta http-equiv="content-language" content="de" />
<title>Beispielseite</title>
</head>
<body>
Hallo Welt!
</body>
</html>
Jetzt haben wir eine Seite, die beim Aufrufen dem Text "Hallo Welt" ausgibt.
wird fortgesetzt =)