oldwiki>Glanz: Die Seite wurde neu angelegt: „{{:MOOCit - Oben}} {| align=center {{:D-Tab}} '''HTML Grundlagen''' {{o}} Struktur einer Seite {{o}} Wichtige Tags {{o}} Listen {{o}} Bilder und Multimedia {{o}} Links und Navigation |} = Einleitung = HTML (Hypertext Markup Language) ist die Standardauszeichnungssprache für die Erstellung von Webseiten und Webanwendu…“

2024-03-11T11:58:06Z

Die Seite wurde neu angelegt: „{{:MOOCit - Oben}} {| align=center {{:D-Tab}} '''HTML Grundlagen''' {{o}} Struktur einer Seite {{o}} Wichtige Tags {{o}} Listen {{o}} Bilder und Multimedia {{o}} Links und Navigation |} = Einleitung = HTML (Hypertext Markup Language) ist die Standardauszeichnungssprache für die Erstellung von Webseiten und Webanwendu…“

Neue Seite

{{:MOOCit - Oben}}
{| align=center
{{:D-Tab}}
'''HTML Grundlagen'''
{{o}} [[HTML - Struktur einer Seite|Struktur einer Seite]]
{{o}} [[HTML - Wichtige Tags|Wichtige Tags]]
{{o}} [[HTML - Listen|Listen]]
{{o}} [[HTML - Bilder und Multimedia|Bilder und Multimedia]]
{{o}} [[HTML - Links und Navigation|Links und Navigation]]
|}
= 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.

{{:BRK}}
= Grundlagen von HTML =

{{:BRK}}
== 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.

{{:BRK}}
== 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.

{{:BRK}}
== Wichtige HTML-Tags ==
Einige wichtige HTML-Tags, die Du kennen solltest, sind:
{{o}} <title>: Definiert den Titel einer Webseite, der in der Titelleiste des Browsers angezeigt wird.
{{o}} <h1> bis <h6>: Für Überschriften verschiedener Ebenen.
{{o}} <p>: Für Absätze.
{{o}} <a>: Für Hyperlinks.
{{o}} <img>: Für Bilder.
{{o}} <ul>, <ol>, <li>: Für ungeordnete bzw. geordnete Listen und deren Listenelemente.
{{o}} <div>: Für allgemeine Container.

{{:BRK}}
= Interaktive Aufgaben =

{{:BRK}}
== Quiz: Teste Dein Wissen ==
{{:Multiple-Choice Anfang}}

'''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?'''
(<h1>)
(!<title>)
(!<h2>)
(!<p>)

'''Welches Element definiert einen Absatz in HTML?'''
(<p>)
(!<span>)
(!<div>)
(!<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>)
(!<h1>)
(!<meta>)

'''Wie erstellt man eine ungeordnete Liste in HTML?'''
(<ul>)
(!<ol>)
(!<li>)
(!<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 <div>-Tags in HTML?'''
(Ein allgemeiner Container)
(!Ein spezielles Bildformat)
(!Eine definierte Absatzform)
(!Ein Hyperlink)

{{:Multiple-Choice Ende}}
<br>

{{:BRK}}
== Memory ==

<div class="memo-quiz">
{|
|-
| <title> || Titel der Webseite
|-
| <h1> || Wichtigster Titel
|-
| <p> || Absatz
|-
| <a> || Hyperlink
|-
| <img> || Bild
|}
{{:Memo Ende}}
<br>
{{:BRK}}
== Kreuzworträtsel ==

<div class="kreuzwort-quiz">
{|
|-
| 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
|}
{{:Kreuzwort Ende}}
<br>
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=HTML </iframe>
== Lückentext ==
<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
HTML steht für { Hypertext Markup Language } und ist die Grundlage für die { Erstellung von Webseiten }. Eine HTML-Seite besteht aus { Elementen }, die durch Tags gekennzeichnet sind. Diese Tags geben an, wie { der Inhalt } innerhalb des Elements angezeigt werden soll.
</quiz>

{{:BRK}}
= Offene Aufgaben =

=== Leicht ===
{{o}} Erstelle eine einfache Webseite mit einem Absatz und einer Überschrift. Nutze dabei die Tags <p> und <h1>.
{{o}} Experimentiere mit verschiedenen Überschriftengrößen von <h1> bis <h6> und beobachte die Unterschiede.
{{o}} Füge deiner Webseite ein Bild mit dem <img>-Tag hinzu. Achte darauf, die richtige URL für das Bild zu verwenden.

=== Standard ===
{{o}} Gestalte eine persönliche Vorstellungsseite mit Überschriften, Absätzen und Bildern.
{{o}} Erstelle eine einfache Navigation für deine Webseite mit Hilfe von Hyperlinks (<a>-Tags).
{{o}} Experimentiere mit Listen (<ul>, <ol>) und erstelle eine Einkaufsliste oder eine To-Do-Liste.

=== Schwer ===
{{o}} Integriere ein Video von einer Plattform wie YouTube in deine Webseite mit einem <iframe>.
{{o}} Erstelle eine kleine Webseite mit mehreren Seiten und verknüpfe diese miteinander über Hyperlinks.
{{o}} Experimentiere mit dem <div>-Tag, um verschiedene Bereiche deiner Webseite visuell voneinander zu trennen und zu gestalten.

{{:Offene Aufgabe - MOOC erstellen}}

= Lernkontrolle =

{{o}} Erkläre, warum die Strukturierung von Webinhalten mit HTML wichtig ist.
{{o}} Beschreibe die Funktion und die Notwendigkeit von <head> und <body> in einer HTML-Struktur.
{{o}} Vergleiche und kontrastiere die Verwendung von <div> und <span> Tags. Wann sollte man welches verwenden?
{{o}} Diskutiere die Bedeutung von semantischem HTML und wie es die Zugänglichkeit und Suchmaschinenoptimierung einer Webseite beeinflussen kann.
{{o}} Entwerfe eine komplexe Webseite, die verschiedene HTML-Elemente integriert und erkläre, warum du bestimmte Tags gewählt hast.

<br>
<br>
= OERs zum Thema =
<iframe> https://de.m.wikipedia.org/wiki/HTML </iframe>
<br>
= Links =
{| align=center
{{:D-Tab}}
'''HTML Grundlagen'''
{{o}} [[HTML - Struktur einer Seite|Struktur einer Seite]]
{{o}} [[HTML - Wichtige Tags|Wichtige Tags]]
{{o}} [[HTML - Listen|Listen]]
{{o}} [[HTML - Bilder und Multimedia|Bilder und Multimedia]]
{{o}} [[HTML - Links und Navigation|Links und Navigation]]
|}

[[Kategorie:HTML]]
[[Kategorie:Webentwicklung]]
[[Kategorie:AI_MOOC]]

= Teilen - Diskussion - Bewerten =
{{:Teilen - MOOCit}}
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]] [[Kategorie:Geschichte]]

Hypertext Markup Language (HTML) - Versionsgeschichte