Lekcja 1 – 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ć:

https://youtu.be/WjqkE1HCvBY?si=2fvrQvSEfF_nr-3D

Gratulacje! Ukończyłeś lekcję 1.
Przejdź teraz do lekcji 2 >> Formatowanie tekstu, linki i obrazki



Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki: 
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: