<commit_before><!DOCTYPE html>
<!--
@author  <NAME> <<EMAIL>> 2017
@license The MIT License (MIT)
-->
<title>Lerneinheit: HTML-Tags und Attribute</title>
<meta charset="utf-8">
<style>body { margin: 0; background-color: #00709B; }</style>
<link rel="stylesheet" type="text/css" href="../css/font.css">
<script src="../../../ccm-components/le/ccm.le.js"></script>

<ccm-le topic="HTML-Tags und Attribute">
  <script src="https://akless.github.io/ccm-components/quiz/ccm.quiz.min.js"></script>
  <script src="https://akless.github.io/ccm-components/cloze/ccm.cloze.min.js"></script>

  <h2>1. Motivation, Lernziele und Voraussetzungen</h2>

  <p>
    <!-- Motivation -->
    In <a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language">HTML</a> gibt es eine Vielzahl von
    <a href="https://de.wikipedia.org/wiki/Tag_(Informatik)">Tags</a> und
    <a href="https://de.wikipedia.org/wiki/Attribut_(Auszeichnungssprache)">Attributen</a>. Je mehr sie davon
    beherrschen, desto vielfältiger sind Sie in der Lage, die Inhalte einer Webseite selbst zu strukturieren.

    <!-- Lernziele und Voraussetzungen -->
    Wenn Sie bereits wissen, was es mit HTML, Tags und Attributen auf sich hat, lernen Sie in dieser Lerneinheit,
    welche konkreten HTML-Tags und Attribute die <a href="https://de.wikipedia.org/wiki/Webbrowser">Webbrowser</a> nativ unterstützen, wofür man diese nutzt und wie
    man sie einsetzt. Je nach Interesse und verfügbarer Zeit bleibt es dabei Ihnen überlassen, ob Sie sich gezielt nur
    mit einer Teilmenge davon beschäftigen oder alle nativen Tags und Attribute in HTML beherrschen wollen.
  </p>

  <ccm-le-audio src="https://akless.github.io/akless/we/audio/LE06_Motivation.mp3"></ccm-le-audio>

  <h3>1.1 Lernziele</h3>

  <ul>
    <li>Ich kenne die nativen Tags und Attribute in HTML und weiß, wofür man sie nutzt und bin in der Lage sie einzusetzen.
  </ul>

  <h3>1.2 Voraussetzungen</h3>

  <ul>
    <li>Ich weiß grob, was das Web, ein Webbrowser und eine Webseite ist.
    <li>Ich weiß, was HTML ist und wofür es eingesetzt wird.
    <li>Ich weiß, in welcher Version HTML aktuell vorliegt.
    <li>Ich weiß, was HTML-Tags und HTML-Attribute sind, wofür man sie nutzt und wie man sie einsetzt.
  </ul>

  <h2>2. Inhalt: <ccm-le-topic></ccm-le-topic></h2>

  <ccm-le-video src="https://akless.github.io/akless/we/video/LE06_Inhalt.mp4"></ccm-le-video>

  <h3>2.1 HTML-Nachschlagewerk</h3>

  <p>
    Im <a href="https://de.wikipedia.org/wiki/World_Wide_Web">Web</a> gibt es zahlreiche Referenzen, die eine
    vollständige Liste aller HTML-Tags und Attribute enthalten. Die aus meiner Sicht beste und kompakteste Referenz zu
    HTML ist die von <a href="https://www.w3schools.com">W3School</a>, die sich auch bestens als Nachschlagewerk eignet
    und für jeden HTML-Tag alle Infos dazu enthält, wie und wofür man den jeweiligen Tag nutzt.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_Inhalt.001.jpg"></ccm-le-img>

  <h3>2.2 Liste aller HTML-Tags</h3>

  <p>
    Die HTML-Referenz von W3School enthält eine komplette Liste aller nativen HTML-Tags. Am HTML5-Symbol ist
    erkennbar, dass ein Tag erst mit HTML5 neu eingeführt wurde. Umgekehrt sind auch Tags, die es in früheren
    HTML-Versionen gegeben hat, aber seit HTML5 nicht mehr unterstützt werden, ebenfalls als solche markiert.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_Inhalt.002.jpg"></ccm-le-img>

  <h3>2.3 Infos zu einem HTML-Tag</h3>

  <p>
    Durch einen Klick auf einen HTML-Tag erhält man weitere Informationen. Am Anfang bekommt man direkt ein kurzes
    ausführbares Beispiel, das eine typische Anwendung des HTML-Tags zeigt.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_Inhalt.003-1.jpg"></ccm-le-img>

  <p>Über den "Try it Yourself"-Button kann man das Beispiel live editieren und ausprobieren.</p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_Inhalt.003-2.jpg"></ccm-le-img>

  <p>
    Nach dem Beispiel folgt kurz und kompakt eine Beschreibung, wofür man den Tag nutzt und wie man ihn einsetzt, sowie
    wichtige Hinweise und Tipps. Anschließend folgt eine Tabelle, die zeigt, welche Webbrowser den Tag unterstützen. In
    der Regel ist dies bei allen Webbrowsern der Fall.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_Inhalt.003-3.jpg"></ccm-le-img>

  <h3>2.4 Liste aller Attribute zu einem HTML-Tag</h3>

  <p>
    Weiter unten in den Informationen zu einem konkreten HTML-Tag folgt eine Auflistung aller Attribute, die für den
    Tag gesetzt werden können. Die Liste ist nach dem selben Schema aufgebaut, wie die der HTML-Tags. Auch hier kann
    jedes Attribut angeklickt und sich weiter darüber informiert werden.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_Inhalt.004.jpg"></ccm-le-img>

  <h3>2.5 Aufruf zur Tat</h3>

  <p>
    Sie haben nun alle Informationen, die Sie benötigen, um sich die nativen Tags und deren Attribute in HTML
    anzueignen. Nehmen Sie sich die Zeit sich mit den Möglichkeiten, die diese Ihnen bieten, zu beschäftigen und
    diese auch selbst auszuprobieren. Beachten Sie insbesondere, dass sie dadurch unter anderem in die Lage versetzt
    werden in Ihre Webseite mittels HTML Audios
    (<a href="https://www.w3schools.com/tags/tag_audio.asp">&lt;audio></a>), Bilder
    (<a href="https://www.w3schools.com/tags/tag_img.asp">&lt;img></a>), Listen
    (<a href="https://www.w3schools.com/tags/tag_ol.asp">&lt;ol></a> und
    <a href="https://www.w3schools.com/tags/tag_ul.asp">&lt;ul></a>), Tabellen
    (<a href="https://www.w3schools.com/tags/tag_table.asp">&lt;table></a>), Videos
    (<a href="https://www.w3schools.com/tags/tag_video.asp">&lt;video></a>), und vieles mehr, einzubauen.<commit_msg>renaming of files in LE06<commit_after><!DOCTYPE html>
<!--
@author  <NAME> <<EMAIL>> 2017
@license The MIT License (MIT)
-->
<title>Lerneinheit: HTML-Tags und Attribute</title>
<meta charset="utf-8">
<style>body { margin: 0; background-color: #00709B; }</style>
<link rel="stylesheet" type="text/css" href="../css/font.css">
<script src="../../../ccm-components/le/ccm.le.js"></script>

<ccm-le topic="HTML-Tags und Attribute">
  <script src="https://akless.github.io/ccm-components/quiz/ccm.quiz.min.js"></script>
  <script src="https://akless.github.io/ccm-components/cloze/ccm.cloze.min.js"></script>

  <h2>1. Motivation, Lernziele und Voraussetzungen</h2>

  <p>
    <!-- Motivation -->
    In <a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language">HTML</a> gibt es eine Vielzahl von
    <a href="https://de.wikipedia.org/wiki/Tag_(Informatik)">Tags</a> und
    <a href="https://de.wikipedia.org/wiki/Attribut_(Auszeichnungssprache)">Attributen</a>. Je mehr sie davon
    beherrschen, desto vielfältiger sind Sie in der Lage, die Inhalte einer Webseite selbst zu strukturieren.

    <!-- Lernziele und Voraussetzungen -->
    Wenn Sie bereits wissen, was es mit HTML, Tags und Attributen auf sich hat, lernen Sie in dieser Lerneinheit,
    welche konkreten HTML-Tags und Attribute die <a href="https://de.wikipedia.org/wiki/Webbrowser">Webbrowser</a> nativ unterstützen, wofür man diese nutzt und wie
    man sie einsetzt. Je nach Interesse und verfügbarer Zeit bleibt es dabei Ihnen überlassen, ob Sie sich gezielt nur
    mit einer Teilmenge davon beschäftigen oder alle nativen Tags und Attribute in HTML beherrschen wollen.
  </p>

  <ccm-le-audio src="https://akless.github.io/akless/we/audio/LE06.mp3"></ccm-le-audio>

  <h3>1.1 Lernziele</h3>

  <ul>
    <li>Ich kenne die nativen Tags und Attribute in HTML und weiß, wofür man sie nutzt und bin in der Lage sie einzusetzen.
  </ul>

  <h3>1.2 Voraussetzungen</h3>

  <ul>
    <li>Ich weiß grob, was das Web, ein Webbrowser und eine Webseite ist.
    <li>Ich weiß, was HTML ist und wofür es eingesetzt wird.
    <li>Ich weiß, in welcher Version HTML aktuell vorliegt.
    <li>Ich weiß, was HTML-Tags und HTML-Attribute sind, wofür man sie nutzt und wie man sie einsetzt.
  </ul>

  <h2>2. Inhalt: <ccm-le-topic></ccm-le-topic></h2>

  <ccm-le-video src="https://akless.github.io/akless/we/video/LE06.mp4"></ccm-le-video>

  <h3>2.1 HTML-Nachschlagewerk</h3>

  <p>
    Im <a href="https://de.wikipedia.org/wiki/World_Wide_Web">Web</a> gibt es zahlreiche Referenzen, die eine
    vollständige Liste aller HTML-Tags und Attribute enthalten. Die aus meiner Sicht beste und kompakteste Referenz zu
    HTML ist die von <a href="https://www.w3schools.com">W3School</a>, die sich auch bestens als Nachschlagewerk eignet
    und für jeden HTML-Tag alle Infos dazu enthält, wie und wofür man den jeweiligen Tag nutzt.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_01.jpg"></ccm-le-img>

  <h3>2.2 Liste aller HTML-Tags</h3>

  <p>
    Die HTML-Referenz von W3School enthält eine komplette Liste aller nativen HTML-Tags. Am HTML5-Symbol ist
    erkennbar, dass ein Tag erst mit HTML5 neu eingeführt wurde. Umgekehrt sind auch Tags, die es in früheren
    HTML-Versionen gegeben hat, aber seit HTML5 nicht mehr unterstützt werden, ebenfalls als solche markiert.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_02.jpg"></ccm-le-img>

  <h3>2.3 Infos zu einem HTML-Tag</h3>

  <p>
    Durch einen Klick auf einen HTML-Tag erhält man weitere Informationen. Am Anfang bekommt man direkt ein kurzes
    ausführbares Beispiel, das eine typische Anwendung des HTML-Tags zeigt.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_03-1.jpg"></ccm-le-img>

  <p>Über den "Try it Yourself"-Button kann man das Beispiel live editieren und ausprobieren.</p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_03-2.jpg"></ccm-le-img>

  <p>
    Nach dem Beispiel folgt kurz und kompakt eine Beschreibung, wofür man den Tag nutzt und wie man ihn einsetzt, sowie
    wichtige Hinweise und Tipps. Anschließend folgt eine Tabelle, die zeigt, welche Webbrowser den Tag unterstützen. In
    der Regel ist dies bei allen Webbrowsern der Fall.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_03-3.jpg"></ccm-le-img>

  <h3>2.4 Liste aller Attribute zu einem HTML-Tag</h3>

  <p>
    Weiter unten in den Informationen zu einem konkreten HTML-Tag folgt eine Auflistung aller Attribute, die für den
    Tag gesetzt werden können. Die Liste ist nach dem selben Schema aufgebaut, wie die der HTML-Tags. Auch hier kann
    jedes Attribut angeklickt und sich weiter darüber informiert werden.
  </p>

  <ccm-le-img src="https://akless.github.io/akless/we/image/LE06_04.jpg"></ccm-le-img>

  <h3>2.5 Aufruf zur Tat</h3>

  <p>
    Sie haben nun alle Informationen, die Sie benötigen, um sich die nativen Tags und deren Attribute in HTML
    anzueignen. Nehmen Sie sich die Zeit sich mit den Möglichkeiten, die diese Ihnen bieten, zu beschäftigen und
    diese auch selbst auszuprobieren. Beachten Sie insbesondere, dass sie dadurch unter anderem in die Lage versetzt
    werden in Ihre Webseite mittels HTML Audios
    (<a href="https://www.w3schools.com/tags/tag_audio.asp">&lt;audio></a>), Bilder
    (<a href="https://www.w3schools.com/tags/tag_img.asp">&lt;img></a>), Listen
    (<a href="https://www.w3schools.com/tags/tag_ol.asp">&lt;ol></a> und
    <a href="https://www.w3schools.com/tags/tag_ul.asp">&lt;ul></a>), Tabellen
    (<a href="https://www.w3schools.com/tags/tag_table.asp">&lt;table></a>), Videos
    (<a href="https://www.w3schools.com/tags/tag_video.asp">&lt;video></a>), und vieles mehr, einzubauen.
{'fraction_non_alphanumeric': 0.13030721435968243, 'fraction_numerical': 0.016223679668622714, 'mean_word_length': 3.8147071042791856, 'pattern_counts': {'":': 0, '<': 211, '<?xml version=': 0, '>': 223, 'https://': 44, 'lorem ipsum': 0, 'www.': 14, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3052521', 'n_tokens_mistral': 4363, 'n_tokens_neox': 4365, 'n_words': 1173}