Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:listen [2020/12/13 11:10] – lutz
+++ html:listen [2021/01/08 09:26] (aktuell) – [Aufgaben] lutz
@@ Zeile 24: / Zeile 24: @@
 </ol>
-<h2>Listenbeispiele</h2>
 <h3>Eine ungeordnete Liste</h3>
@@ Zeile 37: / Zeile 36: @@
 </code>
+Ergebnis im Webbrowser:
+{{ :html:listen1.png?400 |}}
+=====Verschachtelte Listen=====
+Listen können auch verschachtelt sein. Dies wird im folgenden Beispiel gezeigt:
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <title>Verschachtelte Listen</title>
+</head>
+<body>
+<h2>Verschachtelte Listen</h2>
+<h3>Eine geordnete Liste:</h3>
+<ol>
+    <li><h4>Der erste Listeneintrag ist eine ungeordnete Liste:</h4>
+        <ul>
+            <li>Ein Untereintag</li>
+            <li>Ein Untereintag</li>
+            <li>Ein Untereintag</li>
+        </ul>
+    </li>
+    <li><h4>Der zweite Listeneintrag ist eine geordnete Liste:</h4>
+        <ol>
+            <li>Erster Untereintag</li>
+            <li>Zweiter Untereintag</li>
+            <li>Dritter Untereintag</li>
+        </ol>
+    </li>
+</ol>
+</body>
+</html>
+</code>
+Ergebnis im Webbrowser:
+{{ :html:listen2.png?600 |}}
+=====Erklärvideo=====
+\\
+{{youtube>d0lyaErcKwQ}}
+\\
+=====Aufgaben====
+**Aufgabe 1**
+Teste die dargestellten Codebeispiele!
+**Aufgabe 2**
+Erstelle den HTML-Quelltext für das folgende Listenbeispiel!
+{{ :html:listen3.png?600 |}}
+**Aufgabe 3**
+Informiere dich unter [[https://wiki.selfhtml.org/]] über Definitionslisten, Verzeichnis- und Menülisten und HTML-Eigenschaften von Listen! Entwirf eine eigene Beispieldatei!
+**Beispiel:**
+{{ :html:listen4.png?400 |}}
+[[html:loesungen:listen| >> Lösungen]]
+[[html:tabellen| >> Tabellen]]
+~~DISCUSSION | Hier können Fragen zum Inhalt der Seite gestellt werden. ~~