HTML

Einleitung

HTML, die Hypertext Markup Language, ist die grundlegende Markierungssprache, die zum Erstellen von Webseiten verwendet wird. In diesem aiMOOC lernst Du, wie HTML funktioniert, seine Geschichte, die wichtigsten Tags und wie man sie verwendet, um strukturierte Webseiten zu erstellen. Durch interaktive Elemente und praktische Aufgaben erhältst Du nicht nur theoretisches Wissen, sondern auch praktische Fähigkeiten, die Du direkt anwenden kannst.

HTML: Die Grundlagen

HTML steht für Hypertext Markup Language. Es handelt sich um eine Standardmarkierungssprache, die für die Erstellung und Gestaltung von Inhalten im Internet verwendet wird. HTML-Dokumente sind die Bausteine des World Wide Web und werden von Webbrowsern interpretiert, um Webseiten visuell darzustellen.

Geschichte von HTML

HTML wurde erstmals von Tim Berners-Lee, einem britischen Informatiker, Ende der 1980er Jahre erfunden. Die erste Version von HTML wurde 1991 veröffentlicht. Seitdem hat es mehrere Updates und Versionen gegeben, die neue Funktionen und Möglichkeiten zur Webseitengestaltung hinzugefügt haben. Die aktuelle Version, HTML5, wurde 2014 offiziell veröffentlicht und beinhaltet eine Vielzahl an Neuerungen wie verbesserte Unterstützung für Multimedia-Inhalte.

Grundlegende HTML-Tags

HTML verwendet Tags, um den Inhalt zu strukturieren. Ein Tag besteht normalerweise aus einem öffnenden und einem schließenden Tag, zwischen denen der Inhalt steht. Hier sind einige grundlegende Tags, die in fast jeder Webseite zu finden sind:

<!DOCTYPE>: Definiert den Dokumenttyp und die HTML-Version.
<html>: Das Wurzelelement, das angibt, dass es sich um ein HTML-Dokument handelt.
<head>: Enthält Metadaten und Links zu Skripten und Stylesheets.
<body>: Enthält den sichtbaren Inhalt der Webseite.
<h1> bis <h6>: Überschriftentags für Titel und Zwischenüberschriften.
<p>: Definiert einen Absatz.
<a>: Definiert einen Hyperlink.

Interaktive Aufgaben

Quiz: Teste Dein Wissen

Welche Funktion hat das html Tag? (Dient als Wurzelelement eines HTML-Dokuments) (!Definiert einen Hyperlink) (!Erzeugt einen neuen Absatz) (!Legt die Größe einer Überschrift fest)

Welche Aussage über HTML ist korrekt? (HTML steht für Hypertext Markup Language) (!HTML ist eine Programmiersprache) (!HTML wird hauptsächlich für die Erstellung von Desktop-Software verwendet) (!HTML kann ohne Tags verwendet werden)

Was bedeutet das a Tag? (Definiert einen Hyperlink) (!Erzeugt eine Überschrift) (!Definiert einen Absatz) (!Fügt ein Bild ein)

Wofür steht DOCTYPE? (Definiert den Dokumenttyp und die HTML-Version) (!Beginnt einen neuen Absatz) (!Erstellt eine Liste) (!Definiert den Titel der Webseite)

Welche HTML-Version wurde 2014 offiziell veröffentlicht? (HTML5) (!HTML3.2) (!HTML4.01) (!XHTML)

Welches Tag wird verwendet, um eine Überschrift zu erstellen? (h1 bis h6) (!title) (!header) (!p)

Welches Tag definiert einen Absatz? (p) (!a) (!div) (!span)

Wer hat HTML erfunden? (Tim Berners-Lee) (!Steve Jobs) (!Bill Gates) (!Mark Zuckerberg)

Was beinhaltet das head-Element üblicherweise? (Metadaten und Links zu Skripten und Stylesheets) (!Den sichtbaren Inhalt der Webseite) (!Eine detaillierte Beschreibung der Webseite) (!Die Hauptüberschrift der Webseite)

Welche Aussage über das body-Tag ist korrekt? (Enthält den sichtbaren Inhalt der Webseite) (!Definiert den Dokumenttyp und die HTML-Version) (!Beinhaltet Metadaten der Webseite) (!Erstellt automatisch eine Fußzeile)

Memory

<!DOCTYPE>	Dokumenttyp und HTML-Version
<html>	Wurzelelement
<head>	Metadaten und Links
<body>	Sichtbarer Inhalt
<a>	Hyperlink

Kreuzworträtsel

doctype	Was definiert den Dokumenttyp und die HTML-Version?
html	Welches ist das Wurzelelement eines HTML-Dokuments?
head	Welches Element beinhaltet Metadaten und Links?
body	Was enthält den sichtbaren Inhalt der Webseite?
hyperlink	Wie wird ein <a>-Tag in HTML bezeichnet?

LearningApps

Lückentext

Offene Aufgaben

Leicht

Erstelle eine einfache HTML-Seite: Erstelle eine einfache HTML-Seite mit einem Absatz und einer Überschrift.
Experimentiere mit Farben: Verwende das <style>-Element, um die Farbe der Überschrift und des Absatzes auf Deiner Webseite zu ändern.
Erkunde Hyperlinks: Füge einen Link zu einer anderen Webseite hinzu.

Standard

Erstelle eine Webseite mit Bildern: Füge Deiner HTML-Seite Bilder und Beschreibungen hinzu.
Verwende Listen: Erstelle eine Webseite, die eine geordnete und eine ungeordnete Liste enthält.
Gestalte ein Formular: Erstelle eine Webseite mit einem Formular, das Name und E-Mail-Adresse abfragt.

Schwer

Responsive Webdesign: Gestalte Deine Webseite so, dass sie auf verschiedenen Geräten gut aussieht.
SEO-Optimierung: Optimiere Deine Webseite für Suchmaschinen.
Barrierefreiheit verbessern: Stelle sicher, dass Deine Webseite für Menschen mit Behinderungen zugänglich ist.

Lernkontrolle

Erkläre die Bedeutung der verschiedenen HTML-Tags und wie sie verwendet werden: Beschreibe die Funktion und Anwendung von mindestens fünf verschiedenen HTML-Tags.
Gestalte eine Webseite mit Multimedia-Inhalten: Erstelle eine Webseite, die sowohl Video- als auch Audioinhalte integriert.
Verbessere die Benutzerfreundlichkeit Deiner Webseite: Nimm Änderungen an Deiner Webseite vor, um die Benutzererfahrung zu verbessern.
Analysiere eine existierende Webseite: Wähle eine Webseite aus und analysiere, wie HTML zur Strukturierung des Inhalts verwendet wird.
Reflektiere über die Rolle von HTML im Webdesign: Schreibe einen kurzen Aufsatz über die Bedeutung von HTML im Kontext des Webdesigns und der Webentwicklung.

OERs zum Thema

Links

HTML-Elemente

Teilen - Diskussion - Bewerten

Schulfach+

aiMOOCs

aiMOOC Projekte

0.00

(0 Stimmen)