Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:listen [2020/12/13 11:04] – angelegt lutz
+++ html:listen [2021/01/08 09:26] (aktuell) – [Aufgaben] lutz
@@ Zeile 1: / Zeile 1: @@
 ======Listen======
+Eine weitere Möglichkeit Texte zu formatieren sind Listen. In Textverarbeitungsprogrammen unterscheidet man zwischen geordneten Listen (Listen mit Nummerierung) und ungeordneten Listen (Listen mit Anstrichen ohne Nummerierung). Diese beiden Listenarten gibt es auch in HTML. Der Tag ''%%<ol>...</ol>%%'' steht für eine geordnete Liste, der Tag ''%%<ul>...</ul>%%'' für eine ungeordnete Liste. Innerhalb dieser Tags werden die einzelnen Listeneinträge in den Tag ''%%<li>...</li>%%'' geklammert.
+Der folgende Quelltext zeigt ein erstes Beispiel für die Verwendung von Listen.
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <title>Listenbeispiele</title>
+</head>
+<body>
+<h2>Listenbeispiele</h2>
+<h3>Eine geordnete Liste</h3>
+<ol>
+    <li>Erster Eintrag</li>
+    <li>Zweiter Eintrag</li>
+    <li>Dritter Eintrag</li>
+</ol>
+<h3>Eine ungeordnete Liste</h3>
+<ul>
+    <li>Ein Eintrag</li>
+    <li>Ein Eintrag</li>
+    <li>Ein Eintrag</li>
+</ul>
+</body>
+</html>
+</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. ~~