Podstawowe tagi HTML i struktura dokumentu

Struktura dokumentu HTML

W tej lekcji wyjaśnimy podstawową strukturę dokumentu HTML, aby użytkownicy wiedzieli, co każdy element robi. Zaczniemy od najważniejszych tagów.
Każdy dokument HTML ma swoją określoną strukturę. Pomyśl o tym jak o szkielecie strony – to, co umieścisz w odpowiednich sekcjach, decyduje o tym, jak strona będzie wyglądała i działała. Oto podstawowe elementy dokumentu HTML:

<!DOCTYPE html> – To deklaracja typu dokumentu. Mówi przeglądarce, że ma do czynienia z dokumentem HTML5. Umieszczamy ten tag na samym początku każdego pliku HTML.
<html> – To główny tag, który otacza cały dokument HTML. Wszystkie inne elementy muszą znajdować się wewnątrz tego znacznika.
<head> – W sekcji <head> umieszczamy informacje o stronie, które nie są widoczne dla użytkownika. Mogą to być metadane, informacje o kodowaniu znaków czy tytuł strony, który wyświetla się na karcie przeglądarki.
<title> – Ten tag znajduje się wewnątrz sekcji <head>. Odpowiada za nazwę strony, którą widzisz na karcie w przeglądarce. Na przykład, jeśli wpiszesz “Moja strona”, to właśnie taki tytuł pojawi się na karcie przeglądarki.
<body> – To najważniejsza część dokumentu, bo wszystko, co umieścisz wewnątrz tagu <body>, będzie widoczne na stronie. Tutaj umieszczamy tekst, obrazy, linki, przyciski – czyli wszystkie elementy strony, które zobaczy użytkownik.

Oto prosty schemat dokumentu HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Moja strona</title>
</head>
<body>
  <!-- Tutaj umieszczamy zawartość strony -->
</body>
</html>

Każdy plik HTML musi zaczynać się od tej podstawowej struktury. Jest to fundament, na którym budujesz wszystkie elementy swojej strony.

Omówienie podstawowych tagów HTML

HTML składa się z tagów, które otaczają zawartość i mówią przeglądarce, jak ma ona wyglądać. Każdy tag zaczyna się od otwierającego znaku “mniejszości” < i kończy znakiem “większości” >. Poniżej znajdziesz najważniejsze tagi, które warto znać na początku:

<h1> do <h6> – To są tagi nagłówków. Używamy ich do tworzenia nagłówków o różnym poziomie ważności. <h1> to najważniejszy nagłówek (największy), a <h6> to najmniej ważny (najmniejszy).
<p> – Ten tag służy do tworzenia akapitów. Jest używany do wyświetlania bloków tekstu na stronie.
<a> – Używamy tego tagu do tworzenia linków. Wewnątrz niego możemy umieścić adres URL, do którego link ma prowadzić.
<img> – Ten tag pozwala na dodanie obrazów na stronę. Musisz podać ścieżkę do obrazka, aby przeglądarka wiedziała, co ma wyświetlić.
<ul> i <ol> – Służą do tworzenia list. <ul> to lista nieuporządkowana (wypunktowana), a <ol> to lista uporządkowana (numerowana).
<li> – Każdy element listy jest oznaczony tym tagiem i umieszczany wewnątrz listy <ul> lub <ol>.

Oto przykłady użycia tych tagów (dla przypomnienia kod umieszczamy między znacznikami <body> </body>:

<h1>To jest nagłówek 1 poziomu</h1>
<p>To jest paragraf, czyli blok tekstu.</p>
<a href="https://example.com">Kliknij tutaj, aby przejść do strony</a>
<img src="obrazek.jpg" alt="Opis obrazka">
<ul>
  <li>Pierwszy element listy</li>
  <li>Drugi element listy</li>
</ul>

Tworzymy prosty dokument HTML

Twoje pierwsze zadanie: Teraz, gdy znasz podstawowe tagi i rozumiesz strukturę dokumentu HTML, spróbuj stworzyć prostą stronę samodzielnie. Oto przykładowy kod, który możesz wpisać w swoim edytorze:

<!DOCTYPE html>
<html>
<head>
  <title>Moja pierwsza strona</title>
</head>
<body>
  <h1>Witaj na mojej stronie!</h1>
  <p>To jest mój pierwszy dokument HTML. Teraz rozumiem, jak działają nagłówki i akapity!</p>
  <ul>
    <li>Pierwszy punkt na liście</li>
    <li>Drugi punkt na liście</li>
  </ul>
  <a href="https://example.com">Odwiedź stronę</a>
</body>
</html>

Wklej kod w pierwsze okno JSFiddle lub jeśli korzystasz z zainstalowanego oprogramowania to zapisz plik z rozszerzeniem .html i otwórz go w przeglądarce. Jeśli wszystko poszło zgodnie z planem, zobaczysz nagłówek, tekst, listę oraz link na stronie!
Obejrzyj film jak to zrobić: