Hypertext Markup Language (HTML)
Hypertext Markup Language (HTML)
HTML Grundlagen |
Einleitung
HTML (Hypertext Markup Language) ist die Standardauszeichnungssprache für die Erstellung von Webseiten und Webanwendungen. Mit Hilfe von HTML können Texte, Bilder, Videos und andere Inhalte strukturiert und für Webbrowser lesbar gemacht werden. In diesem aiMOOC wirst Du einen umfassenden Einblick in die Grundlagen von HTML, die verschiedenen Elemente und Tags, sowie deren Anwendungsmöglichkeiten erhalten. Dieser Kurs ist so gestaltet, dass er Dir nicht nur theoretisches Wissen vermittelt, sondern auch praktische Übungen bietet, um das Gelernte direkt anzuwenden.
Grundlagen von HTML
Was ist HTML?
HTML steht für "Hypertext Markup Language" und ist die Grundlage für die Erstellung von Webseiten. Eine HTML-Seite besteht aus einer Reihe von Elementen, die durch sogenannte Tags gekennzeichnet sind. Diese Tags geben an, wie der Inhalt innerhalb des Elements angezeigt werden soll. HTML-Dateien sind im Grunde Textdateien, die durch Webbrowser interpretiert und als Webseiten dargestellt werden.
Struktur einer HTML-Seite
Die grundlegende Struktur einer HTML-Seite umfasst das <!DOCTYPE html> Tag am Anfang, das den Dokumenttyp definiert, gefolgt von einem <html> Element, das den Anfang und das Ende der Webseite markiert. Innerhalb des <html>-Tags gibt es zwei Hauptteile: <head> und <body>. Der <head>-Bereich enthält Meta-Informationen und Links zu externen Ressourcen, während der <body>-Bereich den eigentlichen Inhalt der Seite enthält.
Wichtige HTML-Tags
Einige wichtige HTML-Tags, die Du kennen solltest, sind:
- <title>: Definiert den Titel einer Webseite, der in der Titelleiste des Browsers angezeigt wird.
bis
: Für Überschriften verschiedener Ebenen.
: Für Absätze.
- <a>: Für Hyperlinks.
- <img>: Für Bilder.
- ,
- : Für ungeordnete bzw. geordnete Listen und deren Listenelemente.
- : Für allgemeine Container.
- )
(!<list>)
Was enthält der <head>-Bereich einer HTML-Seite typischerweise?
(Meta-Informationen und Links zu externen Ressourcen)
(!Der eigentliche Inhalt der Seite)
(!Bilder und Videos)
(!Kommentare zum Code)
Wie markiert man den Beginn und das Ende einer Webseite?
(<html>)
(!<web>)
(!<site>)
(!<page>)
Was ist die Funktion des -Tags in HTML?
(Ein allgemeiner Container) (!Ein spezielles Bildformat) (!Eine definierte Absatzform) (!Ein Hyperlink)
Memory
<title> Titel der Webseite Wichtigster Titel Absatz <a> Hyperlink <img> Bild
Kreuzworträtsel
html Was ist die Standardauszeichnungssprache für Webseiten? title Welches Tag definiert den Titel einer Webseite? p Welches Tag wird für Absätze verwendet? a Tag für Hyperlinks img Tag für Bilder head Enthält Meta-Informationen und Links zu externen Ressourcen body Enthält den eigentlichen Inhalt der Seite div Allgemeiner Container
LearningApps
<iframe> https://learningapps.org/index.php?s=HTML </iframe>
Lückentext
Offene Aufgaben
Leicht
- Erstelle eine einfache Webseite mit einem Absatz und einer Überschrift. Nutze dabei die Tags
und
.
- Experimentiere mit verschiedenen Überschriftengrößen von
bis
und beobachte die Unterschiede.
- Füge deiner Webseite ein Bild mit dem <img>-Tag hinzu. Achte darauf, die richtige URL für das Bild zu verwenden.
Standard
- Gestalte eine persönliche Vorstellungsseite mit Überschriften, Absätzen und Bildern.
- Erstelle eine einfache Navigation für deine Webseite mit Hilfe von Hyperlinks (<a>-Tags).
- Experimentiere mit Listen (
- ,
- Integriere ein Video von einer Plattform wie YouTube in deine Webseite mit einem <iframe>.
- Erstelle eine kleine Webseite mit mehreren Seiten und verknüpfe diese miteinander über Hyperlinks.
- Experimentiere mit dem -Tag, um verschiedene Bereiche deiner Webseite visuell voneinander zu trennen und zu gestalten.
- Erkläre, warum die Strukturierung von Webinhalten mit HTML wichtig ist.
- Beschreibe die Funktion und die Notwendigkeit von <head> und <body> in einer HTML-Struktur.
- Vergleiche und kontrastiere die Verwendung von und Tags. Wann sollte man welches verwenden?
- Diskutiere die Bedeutung von semantischem HTML und wie es die Zugänglichkeit und Suchmaschinenoptimierung einer Webseite beeinflussen kann.
- Entwerfe eine komplexe Webseite, die verschiedene HTML-Elemente integriert und erkläre, warum du bestimmte Tags gewählt hast.
- 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
- Arbeitsheft
- And Thanks for Your Meat: #AntiFactoryFarming #AnimalRights #MeatIndustry
- ) und erstelle eine Einkaufsliste oder eine To-Do-Liste.
Schwer
<inputbox> type=create break=no preload=CHAT GPT TEXT HIER EINFÜGEN default= width=30 placeholder= Dein MOOC Titel buttonlabel=MOOC erstellen </inputbox>
Lernkontrolle
OERs zum Thema
<iframe> https://de.m.wikipedia.org/wiki/HTML </iframe>
Links
HTML Grundlagen
Teilen - Diskussion - Bewerten
Schulfach+
aiMOOCs
aiMOOC Projekte
THE MONKEY DANCE
{{#ev:youtube | https://youtu.be/rFhZlg38Zf8?si=9KdMNZYRkRD81YTo%7C 500 | center}}
© The Monkey Dance on Spotify, YouTube, Amazon, MOOCit, Deezer, ...{{#ev:youtube | https://youtu.be/Ob7etf9QuBo?si=t_NBA71bWg3Rq3LI%7C 500 | center}}
<inputbox> type=create break=no preload=MOOCit Vorlage default= width=30 placeholder= Dein MOOC Titel buttonlabel=MOOC erstellen </inputbox>
<iframe height=500> https://glanz-verlag.de/#!/all?listModeOverride=DESIGN </iframe>
- Erstelle eine einfache Webseite mit einem Absatz und einer Überschrift. Nutze dabei die Tags
- ,
Interaktive Aufgaben
Quiz: Teste Dein Wissen
Was steht die Abkürzung HTML für? (Hypertext Markup Language) (!Hyper Transfer Markup Language) (!Hyperlink Text Markup Language) (!Hyper Tool Markup Language)
Welches Tag wird für den wichtigsten Titel auf einer Webseite verwendet?
() (!<title>) (!
) (!
) Welches Element definiert einen Absatz in HTML? (
) (!) (!
)(!<section>)
Wie bindet man ein Bild in eine Webseite ein? (<img>) (!<picture>) (!<media>) (!<graphic>)
Was definiert das <a> Tag in HTML? (Einen Hyperlink) (!Eine Adresse) (!Einen Absatz) (!Ein Bild)
Welches Tag wird verwendet, um den Titel einer Webseite zu definieren, der in der Browser-Titelleiste angezeigt wird? (<title>) (!<header>)
(!) (!<meta>) Wie erstellt man eine ungeordnete Liste in HTML? (
- )
(!
- )
(!