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

Memory

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

Kreuzworträtsel

Waagrecht →	Senkrecht ↓
2 Wie wird ein <a>-Tag in HTML bezeichnet? 3 Was definiert den Dokumenttyp und die HTML-Version? 4 Was enthält den sichtbaren Inhalt der Webseite?	1 Welches ist das Wurzelelement eines HTML-Dokuments? 2 Welches Element beinhaltet Metadaten und Links?

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

KI-STIMMEN: WAS WÜRDE ... SAGEN?

YouTube Music: THE MONKEY DANCE

Spotify: THE MONKEY DANCE

Apple Music: THE MONKEY DANCE

Amazon Music: THE MONKEY DANCE

The Monkey Dance SpreadShirtShop

The Monkey Dance | aiMOOCs

Trust Me It's True: #Verschwörungstheorie #FakeNews
Gregor Samsa Is You: #Kafka #Verwandlung
Who Owns Who: #Musk #Geld
Lump: #Trump #Manipulation
Filth Like You: #Konsum #Heuchelei
Your Poverty Pisses Me Off: #SozialeUngerechtigkeit #Musk
Hello I'm Pump: #Trump #Kapitalismus
Monkey Dance Party: #Lebensfreude
God Hates You Too: #Religionsfanatiker
You You You: #Klimawandel #Klimaleugner
Monkey Free: #Konformität #Macht #Kontrolle
Pure Blood: #Rassismus
Monkey World: #Chaos #Illusion #Manipulation
Uh Uh Uh Poor You: #Kafka #BerichtAkademie #Doppelmoral
The Monkey Dance Song: #Gesellschaftskritik
Will You Be Mine: #Love

The Monkey Dance - Arbeitsheft

0.00

(0 Stimmen)

Children for a better world >> Förderung der AI Fair-Image Challenge

Für unsere deutschlandweite AI Fair-Image Challenge werden wir von CHILDREN JUGEND HILFT! gefördert. Alle Infos zur Challenge hier >>. Wenn auch Ihr Euch ehrenamtlich engagiert und noch finanzielle Unterstützung für Eurer Projekt braucht, dann stellt gerne einen Antrag bei JUGEND HILFT.