Lista i wykorzystanie atrybutów globalnych HTML
LISTY NIENUMEROWANE <UL>
I NUMEROWANE <OL>
Kolejne ważne, bo często stosowane w praktyce tagi HTML to listy (numerowane
i nienumerowane). Czasem nazywamy je także uporządkowanymi i nieuporządkowanymi.
Lista nieuporządkowana (nienumerowana)
– jest definiowana przez znaczniki <ul></ul>, zaś pojedynczy element takiej listy zamknięty jest w znacznikach <li></li>.
Widok w kodzie HTML:
<ul>
<li>Królestwa Północy</li>
<li>Scoia’tael</li>
<li>Cesarstwo Nilfgaardu</li>
<li>Skellige</li>
</ul>
Rezultat w przeglądarce:
- Królestwa Północy
- Scoia’tael
- Cesarstwo Nilfgaardu
- Skellige
Lista uporządkowana (numerowana)
– jest definiowana przez znacznik <ol></ol>, zaś pojedynczy element takiej listy również zamknięty jest w znacznikach <li></li>.
Widok w kodzie HTML:
<ol>
<li>Królestwa Północy</li>
<li>Scoia’tael</li>
<li>Cesarstwo Nilfgaardu</li>
<li>Skellige</li>
</ol>
Rezultat w przeglądarce:
- Królestwa Północy
- Scoia’tael
- Cesarstwo Nilfgaardu
- Skellige
Zagnieżdżanie list
Oczywiście w niektórych przypadkach zajdzie potrzeba tzw. zagnieżdżenia list, czyli stworzenia listy wewnętrznej wewnątrz znaczników <li></li> listy zewnętrznej. W poniższym przykładzie lista zewnętrzna to lista numerowana, a wewnętrzna to lista nienumerowana (choć równie dobrze można by zagnieździć je odwrotnie):
<ol>
<li>Królestwa Północy
<ul>
<li>Sigismund Dijkstra</li>
<li>Keira Metz</li>
</ul>
</li>
<li>Scoia’tael
<ul>
<li>Iorveth</li>
<li>Isengrim Faoiltiarna</li>
</ul>
</li>
</ol>
Rezultat w przeglądarce:
- Królestwa Północy
- Sigismund Dijkstra
- Keira Metz
- Scoia’tael
- Iorveth
- Isengrim Faoiltiarna
Listy to także ważne znaczniki w kontekście egzaminu zawodowego – często pojawiają się tak w części pisemnej jak i w zadaniach praktycznych.
atrybuty globalne w html
Element <style> Za którego pomocą możemy dodawać język CSS, czyli język przeznaczony do formatowania treści strony.
<head>
<style>
…
</style>
</head>
Wszystko co zostanie zapisane pomiędzy znacznikami <style> oraz </style> zostanie potraktowane jako język CSS i też w taki sposób przetworzone przez przeglądarkę. Zastosowanie języka HTML wewnątrz elementu style zostanie potraktowane jako błąd i zignorowane przez przeglądarkę. Jednak znamy podstawy tworzenia języka CSS i kilka reguł CSS możemy uzupełnić element <style> o jakieś przykładowe style.
<head>
<style>
p {
font-size: 14px;
color: #fff;
}
</style>
</head>
CSS (ang. Cascading Style Sheets) to tak zwane kaskadowe arkusze stylów i jak wiemy służą one do opisania wyglądu elementów witryny, uprzednio zdefiniowanych w HTML. Kodem CSS możemy także wpływać na położenie elementów i wzajemne relacje między nimi. Natomiast w związku z taką definicją, pojawia się nam w głowach naturalne pytanie: W jaki sposób w praktyce dokonać przypisania stylów do konkretnego znacznika HTML? Otóż aby nadać style potrzebujemy ten konkretny element „uchwycić” (czyli wybrać spośród wszystkich innych) – jako uchwyty stosujemy w CSS tzw. selektory.
Selektor (jak sama nazwa wskazuje: selekcja = wybór) określa jednoznacznie do których elementów z kodu HTML zostaną zastosowane właściwości podane w tzw. ciele selektora (czyli pomiędzy nawiasami klamrowymi). Każda właściwość (ang. property = właściwość, atrybut, cecha) określa jakiś aspekt wyglądu elementu, zaś wartość tego atrybutu (ang. value) zapisana jest po dwukropku i zakończona średnikiem.
Identyfikatory
Identyfikatory ID mogą zostać użyte do uchwycenia tylko jednego elementu, za to w sposób unikalny – nie mogą istnieć w kodzie HTML dwa elementy o takiej samej wartości atrybutu id. Zapis prezentuje się następująco:
Arkusz stylów CSS:
#container
{
}
Kod HTML:
<div id=”container”></div>
Jak widać powyżej, w przypadku zastosowania identyfikatora, selektor w CSS dodatkowo poprzedzamy znakiem #. Jeśli chodzi o nazwę identyfikatora (tutaj jest to container w HTML5 identyfikator musi zawierać przynajmniej jeden znak i nie może zawierać żadnej spacji.
Unikalność identyfikatora w HTML jest wymagana i obsługiwana na poziomie tzw. hierarchii DOM (ang. Document Object Model). Zapamiętajmy to dobrze: w języku HTML nie mogą istnieć dwa atrybuty id o takiej samej wartości (nazwie), nawet jeżeli byłyby to atrybuty określone dla różnych znaczników (na przykład dla diva i dla paragrafu):
źle! <div id=”pierwszy”></div> <p id=”pierwszy”></p>
Atrybut ID musi jednoznacznie (unikalnie) identyfikować jeden konkretny element witryny. Tylko żebyśmy się dobrze rozumieli! Reguła unikalności identyfikatora mówi o tym, że nie mogą w HTML istnieć dwa identyfikatory o tej samej wartości, natomiast w HTML może istnieć wiele identyfikatorów, pod warunkiem, że każdy z nich ma inną wartość:
ok! <div id=”pierwszy”></div> <p id=”trzynasty”></p>
Klasy
Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!). Zapis prezentuje się następująco:
Arkusz stylów CSS:
.container
{
}
Kod HTML:
<div class=”container”></div>
Jak widać powyżej w przypadku zastosowania klas, selektor w CSS dodatkowo poprzedzamy znakiem kropki. Częstym błędem osób początkujących jest zakładanie, iż skoro za pomocą identyfikatora możemy uchwycić tylko jeden element, to w takim razie za pomocą klas można uchwycić tylko i wyłącznie kilka obiektów. Nieprawda – elementów posiadających atrybut class może być w HTML dowolna ilość, w tym także tylko jeden!
Źródło tekstów:
miroslawzelent.pl/kurs-css/
how2html.pl/style-html/
miroslawzelent.pl/kurs-css/id-vs-klasa-selektory/