MOOCit

Hypertext Markup Language (HTML)



Hypertext Markup Language (HTML)


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:

  1. <title>: Definiert den Titel einer Webseite, der in der Titelleiste des Browsers angezeigt wird.

  2. bis

    : Für Überschriften verschiedener Ebenen.

  3. : Für Absätze.

  4. <a>: Für Hyperlinks.
  5. <img>: Für Bilder.
    6. ,
        ,
      1. : Für ungeordnete bzw. geordnete Listen und deren Listenelemente.
      2. : Für allgemeine Container.


      Interaktive Aufgaben


      Quiz: Teste Dein Wissen

      Welches Tag wird für den wichtigsten Titel auf einer Webseite verwendet?

      (

      ) (!<title>) (!

      ) (!

      ) Welches Element definiert einen Absatz in HTML? (

      ) (!) (!

      )

      (!<section>)

      (!

      ) (!<meta>) Wie erstellt man eine ungeordnete Liste in HTML? (
        ) (!
          ) (!
        1. ) (!<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?





          Memory

          Wichtigster Titel<title>

          AbsatzTitel der WebseiteHyperlink<a><img>

          Bild





          Kreuzworträtsel

                                  
                                  
                                  
                                  
                                  
                                  
                                  
          ×

          Eingabe

          Benutzen Sie zur Eingabe die Tastatur. Eventuell müssen sie zuerst ein Eingabefeld durch Anklicken aktivieren.

          Waagrecht →Senkrecht ↓
          1
          Tag für Hyperlinks
          2
          Was ist die Standardauszeichnungssprache für Webseiten?
          3
          Welches Tag definiert den Titel einer Webseite?
          4
          Welches Tag wird für Absätze verwendet?




          LearningApps

          Lückentext

          Vervollständige den Text.

          HTML steht für

          und ist die Grundlage für die

          . Eine HTML-Seite besteht aus

          , die durch Tags gekennzeichnet sind. Diese Tags geben an, wie

          innerhalb des Elements angezeigt werden soll.



          Offene Aufgaben

          Leicht

          1. Erstelle eine einfache Webseite mit einem Absatz und einer Überschrift. Nutze dabei die Tags

            und

            .

          2. Experimentiere mit verschiedenen Überschriftengrößen von

            bis

            und beobachte die Unterschiede.
          3. Füge deiner Webseite ein Bild mit dem <img>-Tag hinzu. Achte darauf, die richtige URL für das Bild zu verwenden.

          Standard

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

              Schwer

              1. Integriere ein Video von einer Plattform wie YouTube in deine Webseite mit einem
                "http://.%7B%7Bo%7D%7DErstelleeinekleineWebseitemitmehrerenSeitenundverkn%C3%BCpfediesemiteinander%C3%BCberHyperlinks.%7B%7Bo%7D%7DExperimentieremitdem%3Cdiv%3E-Tag,umverschiedeneBereichedeinerWebseitevisuellvoneinanderzutrennenundzugestalten.%7B%7B:OffeneAufgabe-MOOCerstellen%7D%7D=Lernkontrolle=%7B%7Bo%7D%7DErkl%C3%A4re,warumdieStrukturierungvonWebinhaltenmitHTMLwichtigist.%7B%7Bo%7D%7DBeschreibedieFunktionunddieNotwendigkeitvon%3Chead%3Eund%3Cbody%3EineinerHTML-Struktur.%7B%7Bo%7D%7DVergleicheundkontrastieredieVerwendungvon%3Cdiv%3Eund%3Cspan%3ETags.Wannsolltemanwelchesverwenden?%7B%7Bo%7D%7DDiskutieredieBedeutungvonsemantischemHTMLundwieesdieZug%C3%A4nglichkeitundSuchmaschinenoptimierungeinerWebseitebeeinflussenkann.%7B%7Bo%7D%7DEntwerfeeinekomplexeWebseite,dieverschiedeneHTML-Elementeintegriertunderkl%C3%A4re,warumdubestimmteTagsgew%C3%A4hlthast.%3Cbr%3E%3Cbr%3E=OERszumThema=%3Ciframe%3Ehttps://de.m.wikipedia.org/wiki/HTML" is not a valid URL. "http://.%7B%7Bo%7D%7DErstelleeinekleineWebseitemitmehrerenSeitenundverkn%C3%BCpfediesemiteinander%C3%BCberHyperlinks.%7B%7Bo%7D%7DExperimentieremitdem%3Cdiv%3E-Tag,umverschiedeneBereichedeinerWebseitevisuellvoneinanderzutrennenundzugestalten.%7B%7B:OffeneAufgabe-MOOCerstellen%7D%7D=Lernkontrolle=%7B%7Bo%7D%7DErkl%C3%A4re,warumdieStrukturierungvonWebinhaltenmitHTMLwichtigist.%7B%7Bo%7D%7DBeschreibedieFunktionunddieNotwendigkeitvon%3Chead%3Eund%3Cbody%3EineinerHTML-Struktur.%7B%7Bo%7D%7DVergleicheundkontrastieredieVerwendungvon%3Cdiv%3Eund%3Cspan%3ETags.Wannsolltemanwelchesverwenden?%7B%7Bo%7D%7DDiskutieredieBedeutungvonsemantischemHTMLundwieesdieZug%C3%A4nglichkeitundSuchmaschinenoptimierungeinerWebseitebeeinflussenkann.%7B%7Bo%7D%7DEntwerfeeinekomplexeWebseite,dieverschiedeneHTML-Elementeintegriertunderkl%C3%A4re,warumdubestimmteTagsgew%C3%A4hlthast.%3Cbr%3E%3Cbr%3E=OERszumThema=%3Ciframe%3Ehttps://de.m.wikipedia.org/wiki/HTML"


              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



              Trust Me It's True
              Video laden
              YouTube


              The Monkey Dance | aiMOOCs

              1. Trust Me It's True: #Verschwörungstheorie #FakeNews
              2. Gregor Samsa Is You: #Kafka #Verwandlung
              3. Who Owns Who: #Musk #Geld
              4. Lump: #Trump #Manipulation
              5. Filth Like You: #Konsum #Heuchelei
              6. Your Poverty Pisses Me Off: #SozialeUngerechtigkeit #Musk
              7. Hello I'm Pump: #Trump #Kapitalismus
              8. Monkey Dance Party: #Lebensfreude
              9. God Hates You Too: #Religionsfanatiker
              10. You You You: #Klimawandel #Klimaleugner
              11. Monkey Free: #Konformität #Macht #Kontrolle
              12. Pure Blood: #Rassismus
              13. Monkey World: #Chaos #Illusion #Manipulation
              14. Uh Uh Uh Poor You: #Kafka #BerichtAkademie #Doppelmoral
              15. The Monkey Dance Song: #Gesellschaftskritik
              16. Will You Be Mine: #Love
              17. Arbeitsheft


              © The Monkey Dance on Spotify, YouTube, Amazon, MOOCit, Deezer, ...

              Who Owns Who
              Video laden
              YouTube



              Text bearbeiten Bild einfügen Video einbetten Interaktive Aufgaben erstellen

              Teilen Facebook Twitter Google Mail an MOOCit Missbrauch melden Zertifikat beantragen


              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.




      Wie bindet man ein Bild in eine Webseite ein?

      Welches Tag wird verwendet, um den Titel einer Webseite zu definieren, der in der Browser-Titelleiste angezeigt wird?

      Was definiert das <a> Tag in HTML?

      Was steht die Abkürzung HTML für?

Abgerufen von „https://moocit.de/index.php?title=Hypertext_Markup_Language_(HTML)&oldid=74866“