Deine erste Homepage
Kapitel 1
HTML
Was ist HTML?
HTML (englisch: Hypertext Markup Language) ist eine Sprache, mit der du deine eigene Homepage schreiben kannst.
Wie jede Sprache, so hat auch HTML eine eigene Grammatik. Man nennt diese Grammatik Syntax.
Und die Vokabeln von HTML sind die Tags.
Keine Angst, das war auch schon fast die ganze Theorie. Wir fangen besser gleich mit der Praxis an.
Unsere erste HTML Seite
Eine einfache HTML-Datei besteht nur aus wenigen Zeilen Quelltext.
Was müssen wir wissen?
Der Quelltext enthält sowohl den Text, der auf unserer Homepage angezeigt werden soll, als auch alle Informationen, wie der Text angezeigt werden soll. Diese Informationen sind die Tags.
Tags beginnen mit < und enden mit >
Es gibt öffnende Tags, z. B. <html>
und schließende Tags, z. B. </html>
Zu jedem öffnenden Tag gehört ein schließendes Tag.
Bedeutung der verwendeten Tags:
- <html> = Beginn der HTML-Datei
- <head> = Beginn des Kopfteiles (Head) der HTML-Datei
- <title> = Beginn des Titels (Title) der HTML-Datei
- </title> = Ende des Titels (Title) der HTML-Datei
- </head> = Ende des Kopfteiles (Head) der HTML-Datei
- <body> = Beginn des Körpers (Body) der HTML-Datei
- </body> = Ende des Körpers (Body) der HTML-Datei
- </html> = Ende der HTML-Datei
Die im Head angegebenen Informationen sind wichtig für Suchmaschinen und den Browser. Zudem ist dort der Titel enthalten. Der Titel wird in der oberen Rahmenleiste des Browsers angezeigt.
In den Body wird alles geschrieben, was auf deiner Homepage angezeigt werden soll. Also vor allem Text und eventuell Bilder.
Wir schreiben unsere erste HTML Seite
Zum Erstellen des Quelltextes sollten wir den Editor von Windows verwenden.
(zu finden unter: Start - Programme - Zubehör - Editor)
Ein Textverarbeitungsprogramm wie Winword ist weniger geeignet, und sollte für unsere ersten Schritte nicht verwendet werden.
Schreib' einfach den obigen Quelltext ab. Den Titel und den Inhalt kannst du dabei schon mal verändern, wenn du willst.
Einfacher geht das Nachvollziehen unserer Beispiele so:
mit Strg + A alles markieren,
mit Strg + C kopieren,
und im Windows-Editor mit Strg + V einfügen.
Wir speichern unsere erste HTML Seite
Im Windows-Editor geh' auf: Datei - Speichern unter
Wähle einen Ordner. Am besten ist es, wenn du für unser Tutorial einen neuen Ordner erstellst. Vielleicht nennst du diesen Ordner html?
Gib deiner Datei einen Namen, z.B. index.html.
Vergiss bitte nicht die Endung .html,
da der Editor die Datei sonst als .txt-Datei (einfache Textdatei) speichert.
Und verwende für den Dateinamen ausschließlich Buchstaben (am besten nur Kleinbuchstaben) und Ziffern, keine Leerzeichen, keine Umlaute, und keine Sonderzeichen.
Wenn du die Lesbarkeit der Dateinamen verbessern willst, solltest du dazu nur den Unterstrich oder den Bindestrich wählen.
Beispiele für erlaubte Dateinamen:
- testdatei1.html
- meine-erste-testdatei.html
- meine_erste_testdatei.html
- 3-2-1.html
Beispiele für nicht erlaubte Dateinamen:
- Test Datei.html - Leerzeichen!
- SchöneSeite.html - Umlaut!
- Die "schöne" Seite.html - Leerzeichen, Sonderzeihen, Umlaut!
- Testseite - erlaubt, aber Großbuchstaben sind nicht empfehlenswert
Fertig ist unsere allererste HTML Datei. Damit bist du deiner eigenen Homepage schon sehr nahe gekommen.
Wir kontrollieren unser Ergebnis
Wir öffnen die eben erstellte Datei mit unserem Browser (z.B. Internet Explorer).
Im Internet Explorer geh' auf Datei - Öffnen und suche deine Datei index.html.
Der Browser sollte jetzt genau den Text anzeigen, den du im Quelltext zwischen <body> und </body> geschrieben hast.
Was haben wir in dieser Lektion gelernt?
- Wir wissen jetzt, was HTML, und was Quelltext ist, und wie wir diesen erstellen und verändern können.
- Außerdem können wir HTML-Dateien speichern, benennen und im Browser zur Kontrolle ansehen.