Einstiegs-E-Learning HTML

AB-Hinweis

Zu dieser E-Learning Einheit gibt es ein Arbeitsblatt. Bitte fülle das AB parallel zu der E-Learning-Einheit aus.

Was ist HTML?

HTML (Hypertext Markup Language) ist die Standardauszeichnungssprache für Dokumente, die im Web angezeigt werden. Mit HTML kannst du die Struktur und das Layout von Webseiten festlegen. In dieser Einheit wirst du die Grundlagen von HTML erlernen und erste Elemente kennenlernen. Ziel der Einheit soll es sein, dass du deine eigene Homepage erstellst.

Wie ist HTML aufgebaut?

HTML ist die grundlegende Sprache des Internets, die verwendet wird, um Webseiten zu strukturieren und Inhalte darzustellen. Der Aufbau eines HTML-Dokuments folgt einem festen Schema, das aus verschiedenen Elementen besteht, die den Inhalt der Seite beschreiben.
Dieses feste Schema kennt ihr auch aus Sprachen wie Deutsch, Englisch oder Spanisch: die Grammatik. Auch HTML folgt einer klaren Grammatik. Sie ist eine Tag-Sprache oder auch Auszeichnungssprache genannt. Das bedeutet, dass jedes HTML-Element durch Tags definiert wird, die in spitzen Klammern geschrieben werden. Die meisten Tags haben einen öffnenden und einen schließenden Tag, zwischen denen der Inhalt platziert wird. Es gibt aber auch Tags, die nicht geschlossen werden müssen. Jedes HTML-Dokument beginnt mit einer DOCTYPE-Deklaration, die den Dokumenttyp festlegt.
Danach folgt das HTML-Element, das den gesamten Inhalt der Seite umschließt.
Innerhalb dieses Elements gibt es zwei Hauptbereiche: den Head und den Body. Quasi der "Kopf" und der "Körper" des Dokuments. Der Head-Bereich enthält Metainformationen über das Dokument, wie den Titel der Seite, der im Browser-Tab angezeigt wird, sowie Links zu externen Ressourcen wie CSS-Dateien. Der Body-Bereich hingegen enthält den eigentlichen Inhalt der Webseite, wie Texte, Bilder, Links und mehr.
Zusammengefasst bildet HTML das Gerüst einer Webseite, indem es den Inhalt durch eine hierarchische Struktur von Elementen in Tags organisiert und anschließend mit Hilfe des Browsers angezeigt wird.

Die Sprache html gibt es seit 1989. Seither hat sich die Sprache entwickelt, sodass wir mittlerweile bei der Sprachenversion 5 "HTML5" angekommen sind.

Es hört sich komisch an, aber: html ist eine sehr einfache Sprache, die von Programmen gesprochen und/oder verstanden wird. Genauso wie wir Deutsch sprechen, können Programme auf dem Computer "HTML" sprechen. Allerdings ist das Verstehen einer Sprache in diesem Kontext viel zentraler, denn egal in welchem Programm man einen html-Text schreibt, das Programm, welches den Text liest, muss ihn verstehen und umsetzen. Dazu gibt es den Browser. Alle Browser übernehmen sechs zentrale Aufgaben: Interpretation des Codes, Rendering, Fehlerkorrektur, Verwaltung externer Ressourcen, Interkaktivität und Sicherheit.
Interpretation des Codes: Der Browser liest den HTML-Code eines Dokuments und interpretiert die darin enthaltenen Tags und Elemente. Er erkennt dabei die Struktur des Dokuments, wie z.B. Überschriften, Absätze, Listen, Links, Bilder und eingebettete Multimedia-Inhalte.

Verstehen und Erstellen der ersten HTML-Datei

				
					<!DOCTYPE html>
					<html>
						<head>
							<title>Meine erste Webseite</title>
						</head>
						<body>
							<h1>Hallo Welt</h1>
							<br>
							<b>Willkommen im Informatik-Unterricht!</b>
						</body>
					</html>

Aufgabe 1: Markiere jeweils dir bereits aus dem obigen Text bekannte Elemente im Code in einer Farbe, benenne und beschreibe sie. Beispiel: <!DOCTYPE html> Doctype-Deklaration. Dient zum Festlegen des Dokumententyps html.

Aufgabe 2: Nenne kurz, welche Elemente im Head und welche im Body des obigen Codes stehen. Woran erkennt man das?.

Aufgabe 3: Vervollständige das html-Glossar. Markiere alle dieser Tags, die man nicht schließen muss, mit einer Farbe. Wenn du nicht weiterkommst, recherchiere im Internet.

Aufgabe 4: Stelle dir vor, du bist jetzt der Browser und musst den folgenden Code interpretieren. Beschreibe die eindeutige Ausgabe!

Aufgabe 5: Öffne das Programm "Notepad" und kopiere den Code in das Dokument. Wähle im Menüreiter "Sprache" die Sprache "html" aus. Beschreibe kurz, was dir auffällt.

Aufgabe 6: Modifiziere die Datei mit drei neuen Elementen, die du dir von der Website w3schools.com findest. Beschreibe jedes Tag mit seinen Auswirkungen kurz in eigenen Worten.

Aufgabe 7: Notiere deinen gesamten Code auf dem Arbeitsblatt. Achte auf die Formatierung (Einrückung) und die Vollständigkeit aller Zeichen beim Abschreiben.

Hinweis: Speichere die Datei und öffne sie mit einem Webbrowser. So kannst du schnell überprüfen, ob dein Code die gewünschte Darstellung hervorruft.

HTML-Glossar

Hier sind einige grundlegende HTML-Tags, die du kennen solltest:

<html>...</html>: Definiert den Beginn ____________________________.
<head>...</head>: Enthält ____________________________ und den ____________________________ der Webseite.
<body>...</body>: Der ____________________________ der Webseite wird hier eingefügt.
<h1>...</h1> bis <h6></h6>: ____________________________ in verschiedenen Größen.
<p>...</p>.: Absätze für ____________________________.
<img>...</img>.: ____________________________ einfügen.
<b>...</b>.: ____________________________ schreiben.
<br>: ____________________________

Quellen

Hier sind einige nützliche Quellen, die dir beim Lernen von HTML helfen können: