Einstieg in das Thema
Worum geht es?
In den folgenden Stunden geht es um HTML. HTML ist die
Beschreibungssprache zur Erstellung von Webseiten.
Nur wenige Menschen erstellen Webseiten noch mit der Hand.
Warum machen wir das aber trotzdem? Zum einen ist es ein
einfacher Einstieg in eine bestimmte Arbeitsweise. Weiterhin
laufen im Browser mittlerweile richtige Programme, ja
ganze Betriebssystemoberflächen sind nur noch Browser.
Es ist also ein Einstieg in die Programmierung.
Und natürlich kannst du auch lernen, Webseiten durch Programme
erstellen zu lassen.
Was ist das Ziel?
Am Ende sollst du natürlich in der Lage sein, per Hand
anspruchsvolle Webseiten zu erstellen. Aber für diese
Lektion sollst du
- wissen, was HTML eigentlich ist und
- wie man HTML-Dokumente erstellt,
- die Struktur von HTML kennen und
- head und body unterscheiden können.
Am Ende musst du in der Lage sein, den Aufbau
solcher Dokumente in Grundzügen zu verstehen.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Webseite zum Radebeuler Waldpinguin</title>
<meta charset="utf-8">
</head>
<body>
<h1>Der Radebeuler Waldpinguin</h1>
<h2>Aussehen</h2>
<p>Geht so...</p>
<h2>Ernährung</h2>
<p>Viel zu ungesund!</p>
</body>
</html>
Erarbeitung
Aufgaben
Aufgabe 1
Erstelle nun wie beschrieben eine HTML-Datei. Welche Endung gibst du der Datei, wenn sich beim Doppelklick der Browser öffnen soll?
Aufgabe 2
Kopiere obigen HTML-Quelltext in diese Text-Datei. Vergiss Speichern (Diskettensymbol oder CTRL-S) nicht.
Aufgabe 3
Öffne nun die Datei zusätzlich mit einem Webbrowser (Doppelklick). Was siehst du auf dem Bildschirm?
Aufgabe 4
Was ist im Quelltext (also im Texteditor), aber nicht im Webbrowser zu sehen? Nenne zwei oder drei Beispiele.
Aufgabe 5
Suche die Zeile mit <title> im Texteditor. Wo erscheint der Text beim Browser, der von <title> und </title> umfasst wird?
Aufgabe 6
Oft findet man zu einem Wort in spitzen Klammern (Tags) ein gleiches Wort mit einem Slash (/). Suche zwei oder drei Beispiele.
Aufgabe 7
Was bezweckt man mit der Schreibweise <abc> .... </abc>?
Aufgabe 8
Folgt auf alle <abc> ein </abc>?
Aufgabe 9
Kann es ein </abc> ohne <abc> geben?
Aufgabe 10
Welche Bedeutung haben die Bereiche <body> und <head>?
Aufgabe 11
Was passiert, wenn man in einer HTML-Datei alle Tags weglässt? Erstelle unbedingt eine Kopie (z.B. mit "Speichern unter") und lösche alle Tags. Öffne die neue Datei im Browser.
Aufgaben zum Browser
Nimm wieder die originale Datei vom Anfang, die Datei ohne Tags
ist nicht mehr wichtig.
Aufgabe 12
Entferne das erste <h1>. Was ändert sich?
Aufgabe 13
Füge das <h1> wieder hinzu, entferne aber </h1>. Was ändert sich nun?
Aufgabe 14
Entferne <body>. Was ändert sich?
Aufgabe 15
Entferne weiterhin </body>. Was ändert sich nun?
Aufgabe 16
Wie würdest du das Verhalten eines Webbrowsers in Bezug auf Fehler beschreiben?
Vertiefende Aufgaben
Aufgabe 17
Man spricht von Tags. Wie würdest du Tag übersetzen bzw. was wäre ein passender deutscher Begriff?
Aufgabe 18
Wofür steht eigentlich HTML und wie kann man das mit einfachen Worten übersetzen?
Aufgabe 19
Wir sind faul und wollen bestimmte Dinge nicht immer wieder schreiben. Wie sieht eine leere HTML-Seite aus, die immer wieder als Vorlage verwendet werden kann?
Zusammenfassung
Was muss man wissen/können?
Du musst wissen
- wie der grundsätzliche Aufbau einer HTML-Datei ist,
- wofür HTML steht,
- was Tags sind und wie man diese erkennt,
- warum diese Tags notwendig sind und
- was der Schrägstrich bei diesen bedeutet.
Du kannst
- erkennen, ob es sich wirklich um eine HTML-Datei handelt,
- erkennen, wo das steht, was dann auf dem Bildschirm erscheint,
- anderen Personen erklären, was HTML ist und wofür man das braucht,
- selbst eine HTML-Datei erstellen und diese mit obigem Inhalt füllen.
Du hast auch eine Vorlage für eine leere HTML-Datei.
Wie geht es weiter?
Du hast schon gesehen, dass man Text strukturieren, also in
Absätze und Überschriften einteilen kann. Das wird nun vertieft.
