Podstawy HTML

HTML (HyperText Markup Language) to język znaczników używany do tworzenia struktury stron internetowych.

CIEKAWOSTKA

Pierwsza wersja HTML została stworzona przez Tima Bernersa-Lee w 1991 roku i zawierała tylko 18 tagów!

Co to jest tag HTML?

Tag HTML to podstawowy element składni HTML, który mówi przeglądarce jak wyświetlać zawartość.

Przykład

<nazwa_tagu>treść</nazwa_tagu>

Większość tagów ma formę otwierającą i zamykającą, ale niektóre są samozamykające (np. <img>).

Podstawowe tagi HTML

Oto najważniejsze tagi HTML, które powinien znać każdy początkujący web developer:

<html>

Główny kontener dla całej strony HTML. Wszystkie inne elementy znajdują się wewnątrz tego tagu.

<html lang="pl">
    <!-- cała zawartość strony -->
</html>

<head>

Zawiera metadane o dokumencie, takie jak tytuł, linki do arkuszy stylów, skrypty i inne informacje nie widoczne bezpośrednio na stronie.

<head>
    <title>Moja Strona</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>

Zawiera całą widoczną zawartość strony, taką jak nagłówki, akapity, obrazy, linki itp.

To jest zawartość body

Wszystko co widzisz na stronie znajduje się w tym tagu.

<h1> - <h6>

Nagłówki o różnym poziomie ważności, gdzie <h1> jest najważniejszy, a <h6> najmniej ważny.

Nagłówek 1

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5

Nagłówek 6

<p>

Definiuje akapit tekstu. Przeglądarka automatycznie dodaje margines przed i po akapicie.

To jest przykład akapitu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

To jest drugi akapit. Nullam in dui mauris.

<a>

Tworzy hiperłącze do innych stron internetowych, plików lub lokalizacji na tej samej stronie.

<a href="https://example.com" target="_blank">Przykładowy link</a>

Przykładowy link (najedź kursorem)

<img>

Wyświetla obraz na stronie. Jest to tag samozamykający.

<img src="obraz.jpg" alt="Opis obrazu" width="200">

[Miejsce na obraz]

Opis obrazu

<ul>, <ol>, <li>

Tworzą listy: nieuporządkowane (z punktami), uporządkowane (numerowane) i elementy listy.

Lista nieuporządkowana

Pierwszy element
Drugi element
Trzeci element

Lista uporządkowana

Pierwszy element
Drugi element
Trzeci element

<div> i <span>

Pojemniki używane do grupowania i stylizowania elementów. <div> jest elementem blokowym, a <span> liniowym.

To jest div - zajmuje całą dostępną szerokość

To jest span w linii tekstu.

Struktura dokumentu HTML

Każda strona HTML powinna mieć określoną strukturę. Oto kompletny przykład:

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Pierwsza Strona</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Witaj na mojej stronie!</h1>
        <nav>
            <a href="#home">Strona główna</a> |
            <a href="#about">O mnie</a> |
            <a href="#contact">Kontakt</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>O mnie</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            <img src="moje-zdjecie.jpg" alt="Moje zdjęcie">
        </article>
    </main>
    
    <footer>
        <p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
    </footer>
</body>
</html>

Semantyczne tagi HTML5

HTML5 wprowadził nowe tagi semantyczne, które lepiej opisują strukturę strony:

Tag	Opis
`<header>`	Nagłówek strony lub sekcji
`<nav>`	Nawigacja strony
`<main>`	Główna zawartość strony
`<article>`	Samodzielna treść (np. wpis blogowy)
`<section>`	Tematyczna grupa zawartości
`<aside>`	Treść poboczna (np. sidebar)
`<footer>`	Stopka strony lub sekcji