Strony internetowe to nic innego jak kod HTML zinterpretowany przez przeglądarkę internetową. Wspomniany kod składa się z wszelkiego rodzaju znaczników HTML, które spełniają jasno określone zadania.
Nie ma potrzeby uczyć się wszystkich znaczników HTML na pamięć z dwóch prostych powodów. Po pierwsze: nie wszystkie znaczniki HTML są wykorzystywane na każdej stronie internetowej. Po drugie: Tworzenie stron i aplikacji internetowych to nie sprawdzian w szkole czy na studiach, tutaj spokojnie można korzystać z podpowiedzi.
Poniższa lista nie zawiera wszystkich istniejących znaczników HTML. Nie zostały tu również opisane wszystkie możliwe atrybuty tych znaczników czy też wartości możliwe do przypisania tym atrybutom. Celem niniejszej listy jest przedstawienie najpopularniejszych, najczęściej stosowanych znaczników HTML wykorzystywanych do budowania stron internetowych.
Jeśli uznacie, że jakaś informacja powinna zostać dodana do tej listy, koniecznie dajcie mi o tym znać.
Znacznik !DOCTYPE (ang. document type – typ dokumentu)
Znacznik !DOCTYPE właściwie nie jest znacznikiem. To deklaracja typu dokumentu, niezbędna do prawidłowej interpretacji kodu przez przeglądarkę internetową.
Dla dokumentów HTML napisanych w standardzie HTML5 typ dokumentu deklarujemy umieszczając w pierwszej linii pliku <!DOCTYPE html>.
<!DOCTYPE html>
Przykład kodu
Znacznik a (ang. anchor – kotwica)
Znacznik a stosowany jest do tworzenia odnośników do innych stron lub podstron. Kliknięcie na odnośnik spowoduje przejście pod podany adres.
Atrybuty znacznika a, ich opis i przykłady użycia:
| Nazwa | Oczekiwana wartość | Wartość domyślna | Opis | Wymagany | Przykład |
|---|---|---|---|---|---|
href | Poprawny adres URL | Brak | Miejsce docelowe, do którego zostaniemy przeniesieni po kliknięciu w element. | Tak | href="https://dawidgalecki.pl" |
target | Jedna z poniższych: – _blank, – _self. | _self | Informacja o miejscu otwarcia klikniętego linku. Użycie _blank spowoduje otwarcie klikniętego linku w nowej karcie. Użycie _self spowoduje otwarcie klikniętego linku w bieżącej karcie. | Nie | target="_blank" |
<a href="https://dawidgalecki.pl/" target="_blank">Fotograf Dawid Gałecki</a>
Przykład kodu
Efekt działania opisanego przykładu
Znacznik body (ang. body – ciało)
Znacznik body to „kontener” na kod HTML, który będzie interpretowany przez przeglądarki internetowe. Musi być on umieszczony wewnątrz znacznika html.
<html>
<body>
Treść strony
</body>
</html>
Przykład kodu
Znaczniki h1-h6 (ang. heading – nagłówek)
Znaczniki od h1 do h6 to nagłówki specjalnego przeznaczenia. Oznacza się nimi tytuły na stronie internetowej, gdzie znacznikiem h1 oznacza się tytuły najważniejsze, znacznikiem h2 tytuły nieco mniej ważne i tak aż do znacznika h6.
<h3>Nagłówek trzeciego poziomu</h3>
Przykład kodu
Nagłówek trzeciego poziomu
Efekt działania opisanego przykładu
Znacznik head (ang. head – głowa)
Znacznik head to obszar strony internetowej, który nie jest interpretowanym przez przeglądarkę fragmentem wyglądu strony. Przechowuje on informacje niezbędne do prawidłowego wyświetlania strony w przeglądarce, pozycjonowania w wyszukiwarkach itp.
Znacznik head musi być umieszczony za otwierającym znacznikiem html i jednocześnie przed otwierającym znacznikiem body.
Informacje dotyczące strony są umieszczane wewnątrz znacznika head za pomocą następujących znaczników:
| Nazwa | Opis | Przykład |
|---|---|---|
title | Tytuł strony widoczny na zakładce w przeglądarce i w wynikach wyszukiwania w wyszukiwarce internetowej | <title>Fotograf Dawid Gałecki</title> |
<html>
<head>
<title>Fotograf Dawid Gałecki</title>
</head>
<body>
</body>
</html>
Przykład kodu
Znacznik html (ang. HTML, HyperText Markup Language – Hipertekstowy język znaczników)
Znacznik html to niezbędny element każdej strony internetowej. Informuje on przeglądarkę, że wewnątrz niego znajduje się kod HTML, który należy odpowiednio zinterpretować.
<html>
</html>
Przykład kodu
Znacznik li (ang. list item – element listy)
Znacznik li odpowiada za pojawienie się elementu na liscie uporządkowanej tworzonej za pomocą znacznika ol lub nieuporządkowanej tworzonej za pomocą znacznika ul. Nie istnieje maksymalna ilość elementów dodanych do listy.
Ten znacznik nie istnieje samodzielnie – musi być użyty wewnątrz listy.
<li>Element listy</li>
Przykład kodu
Znacznik ol (ang. ordered list – lista uporządkowana)
Znacznik ol odpowiada za stworzenie uporządkowanej (najczęściej numerowanej) listy. Elementy listy dodawane są za pomocą znacznika li. Każdy z nich jest poprzedzony domyślnie kolejną liczbą począwszy od 1.
<ol>
<li>Pierwszy element listy</li>
<li>Drugi element</li>
<li>Trzeci</li>
</ol>
Przykład kodu
- Pierwszy element listy
- Drugi element
- Trzeci
Efekt działania opisanego przykładu
Znacznik p (ang. paragraph – paragraf)
Znacznik p to element, którego zadaniem jest przechowywanie jednego akapitu tekstu.
<p>To jest jeden akapit tekstu.</p>
Przykład kodu
To jest jeden akapit tekstu.
Efekt działania opisanego przykładu
Znacznik ul (ang. unordered list – lista nieuporządkowana)
Znacznik ul odpowiada za stworzenie nieuporządkowanej listy. Elementy listy dodawane są za pomocą znacznika li. Każdy z nich jest domyślnie poprzedzony takim samym symbolem.
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element</li>
<li>Trzeci</li>
</ul>
Przykład kodu
- Pierwszy element listy
- Drugi element
- Trzeci
Efekt działania opisanego przykładu
Globalne atrybuty znaczników
Każdy opisany powyżej znacznik może przyjąć wymienione poniżej atrybuty:
| Nazwa | Oczekiwana wartość | Opis | Przykład |
|---|---|---|---|
class | Tekst | Nazwa klasy CSS przypisanej do elementu (nazwy kilku klas oddzielamy spacją) | class="col-sm-12" |
id | Tekst | Unikalny w obrębie strony identyfikator elementu | id="header" |
znaczniki html lista
