HTML: Unterschied zwischen den Versionen
Glanz (Diskussion | Beiträge) Die Seite wurde neu angelegt: „{{:HTML (Hypertext Markup Language)}}“ |
Glanz (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Manuelle Zurücksetzung |
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |
(kein Unterschied)
| |
Aktuelle Version vom 5. April 2024, 16:30 Uhr
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
Teilen - Diskussion - Bewerten
Schulfach+
|
|
aiMOOCs
aiMOOC Projekte
|
|
YouTube Music: THE MONKEY DANCE
Spotify: THE MONKEY DANCE
Apple Music: THE MONKEY DANCE
Amazon Music: THE MONKEY DANCE
The Monkey Dance SpreadShirtShop
|
|
|
|
 |
Children for a better world >> Förderung der AI Fair-Image Challenge
Fair-Image wird von CHILDREN JUGEND HILFT! gefördert und ist mit der deutschlandweiten AI Fair-Image Challenge SIEGERPROJEKT 2025. Alle Infos zur Challenge hier >>. Infos zum Camp25 gibt es 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.
