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ć.
!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
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
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
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
Efekt działania opisanego przykładu
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
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
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
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
Efekt działania opisanego przykładu
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
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
Efekt działania opisanego przykładu
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" |
Dawid Gałecki, dn. 01.02.2021 o godz. 19:30
Znalazłeś błąd w treści wpisu, masz uwagi dotyczące tekstu albo chcesz podsunąć pomysł na kolejny artykuł? Zapraszam do kontaktu ze mną. Dziękuję!