Listy HTML
Listy są kluczowym elementem struktury HTML, służącym do przedstawienia zbioru informacji w sposób uporządkowany lub nieuporządkowany. Zrozumienie, jak i kiedy korzystać z różnych rodzajów list, jest ważnym aspektem tworzenia przejrzystych i łatwych do zrozumienia stron internetowych.
Nieuporządkowane listy (ang. nordered Lists)
Nieuporządkowane listy, zaznaczane w HTML przez znacznik
<ul><li>Oto przykład nieuporządkowanej listy:
1<ul>
2 <li>Element listy</li>
3 <li>Drugi element listy</li>
4</ul>W powyższym fragmencie kodu, utworzyliśmy listę z dwoma elementami, każdy z nich oznaczony punktorem.
Uporządkowane listy (ang. ordered Lists)
Z kolei uporządkowane listy, oznaczane przez znacznik
<ol>Oto przykład uporządkowanej listy:
1<ol>
2 <li>Element listy</li>
3 <li>Drugi element listy</li>
4</ol>W tym przypadku, każdy z elementów na liście jest numerowany, co podkreśla ich kolejność.
Różnorodność list w HTML
Warto zaznaczyć, że HTML pozwala na większą elastyczność przy tworzeniu list. Możemy na przykład tworzyć listy zagnieżdżone, gdzie jedna lista znajduje się wewnątrz innej. Jest to szczególnie przydatne przy tworzeniu struktury typu "drzewo", np. menu nawigacyjnego na stronie.
Ponadto, dla uporządkowanych list, atrybut type pozwala na zmianę stylu numeracji - może to być liczba (1), litera (A, a, I, i) lub nic, co skutkuje brakiem numeracji.
Korzystając z list w HTML, mamy wiele możliwości, by skutecznie i klarownie przedstawić informacje na naszej stronie.
Listy w HTML są użytecznym narzędziem do organizowania i prezentowania informacji na stronie internetowej w czytelny sposób. Możemy również zagnieżdżać listy w sobie, tworząc bardziej złożone struktury.
Listy zagnieżdżone
Listy można zagnieżdżać wewnątrz siebie, tworząc hierarchię lub strukturę wielopoziomową. Może to być użyteczne, np. przy tworzeniu menu nawigacyjnego.
Przykład:
1<ul>
2 <li>Element nadrzędny 1</li>
3 <ul>
4 <li>Pod-element 1.1</li>
5 <li>Pod-element 1.2</li>
6 </ul>
7 <li>Element nadrzędny 2</li>
8</ul>Ćwiczenie: Tworzenie list HTML z informacjami o starożytnym Egipcie
W tym ćwiczeniu wykorzystasz listy HTML do przedstawienia różnych faktów i informacji o starożytnym Egipcie. Twoim zadaniem będzie stworzenie strony internetowej, która zawiera uporządkowane i nieuporządkowane listy, a także listy zagnieżdżone, aby przedstawić różne aspekty kultury i historii starożytnego Egiptu.
Krok 1: Stwórz podstawową strukturę dokumentu HTML
Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML.
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Starożytny Egipt</title>
7</head>
8<body>
9 <main>
10 <!-- Tutaj umieścisz swoje sekcje -->
11 </main>
12</body>
13</html>Krok 2: Dodaj nieuporządkowaną listę najważniejszych faraonów
Teraz dodaj sekcję w elemencie
<main>1<section>
2 <h2>Najważniejsi faraonowie</h2>
3 <ul>
4 <li>Cheops</li>
5 <li>Ramses II</li>
6 <li>Tutanchamon</li>
7 <li>Hatszepsut</li>
8 <li>Akhenaten</li>
9 </ul>
10</section>Krok 3: Dodaj uporządkowaną listę najważniejszych osiągnięć starożytnych Egipcjan
Następnie dodaj kolejną sekcję z uporządkowaną listą przedstawiającą najważniejsze osiągnięcia starożytnych Egipcjan.
1<section>
2 <h2>Najważniejsze osiągnięcia starożytnych Egipcjan</h2>
3 <ol>
4 <li>Budowa piramid w Gizie</li>
5 <li>Rozwój pisma hieroglificznego</li>
6 <li>Opracowanie kalendarza słonecznego</li>
7 <li>Postępy w medycynie i anatomii</li>
8 <li>Tworzenie zaawansowanych systemów irygacyjnych</li>
9 </ol>
10</section>Krok 4: Dodaj listę zagnieżdżoną przedstawiającą strukturę społeczną starożytnego Egiptu
Na koniec dodaj sekcję z listą zagnieżdżoną, która będzie przedstawiać strukturę społeczną starożytnego Egiptu.
1<section>
2 <h2>Struktura społeczna starożytnego Egiptu</h2>
3 <ul>
4 <li>Faraon
5 <ul>
6 <li>Najwyższy władca</li>
7 <li>Uważany za żywego boga</li>
8 </ul>
9 </li>
10 <li>Kapłani
11 <ul>
12 <li>Odpowiedzialni za rytuały religijne</li>
13 <li>Sprawowali władzę nad świątyniami</li>
14 </ul>
15 </li>
16 <li>Urzędnicy
17 <ul>
18 <li>Zarządzali administracją państwa</li>
19 <li>Odpowiedzialni za pobieranie podatków</li>
20 </ul>
21 </li>
22 <li>Rzemieślnicy
23 <ul>
24 <li>Tworzyli wyroby rękodzielnicze</li>
25 <li>Zajmowali się handlem</li>
26 </ul>
27 </li>
28 <li>Chłopi
29 <ul>
30 <li>Uprawiali ziemię</li>
31 <li>Byli podstawą gospodarki</li>
32 </ul>
33 </li>
34 </ul>
35</section>Wynik
Po wykonaniu wszystkich kroków twój plik HTML powinien wyglądać następująco:
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Starożytny Egipt</title>
7</head>
8<body>
9 <main>
10 <section>
11 <h2>Najważniejsi faraonowie</h2>
12 <ul>
13 <li>Cheops</li>
14 <li>Ramses II</li>
15 <li>Tutanchamon</li>
16 <li>Hatszepsut</li>
17 <li>Akhenaten</li>
18 </ul>
19 </section>
20 <section>
21 <h2>Najważniejsze osiągnięcia starożytnych Egipcjan</h2>
22 <ol>
23 <li>Budowa piramid w Gizie</li>
24 <li>Rozwój pisma hieroglificznego</li>
25 <li>Opracowanie kalendarza słonecznego</li>
26 <li>Postępy w medycynie i anatomii</li>
27 <li>Tworzenie zaawansowanych systemów irygacyjnych</li>
28 </ol>
29 </section>
30 <section>
31 <h2>Struktura społeczna starożytnego Egiptu</h2>
32 <ul>
33 <li>Faraon
34 <ul>
35 <li>Najwyższy władca</li>
36 <li>Uważany za żywego boga</li>
37 </ul>
38 </li>
39 <li>Kapłani
40 <ul>
41 <li>Odpowiedzialni za rytuały religijne</li>
42 <li>Sprawowali władzę nad świątyniami</li>
43 </ul>
44 </li>
45 <li>Urzędnicy
46 <ul>
47 <li>Zarządzali administracją państwa</li>
48 <li>Odpowiedzialni za pobieranie podatków</li>
49 </ul>
50 </li>
51 <li>Rzemieślnicy
52 <ul>
53 <li>Tworzyli wyroby rękodzielnicze</li>
54 <li>Zajmowali się handlem</li>
55 </ul>
56 </li>
57 <li>Chłopi
58 <ul>
59 <li>Uprawiali ziemię</li>
60 <li>Byli podstawą gospodarki</li>
61 </ul>
62 </li>
63 </ul>
64 </section>
65 </main>
66</body>
67</html>Teraz masz kompletną stronę internetową z listami przedstawiającymi informacje o starożytnym Egipcie. Eksperymentuj dalej, dodając więcej szczegółów lub stylizując elementy za pomocą CSS, aby poprawić wygląd strony.