PODSTAWY HTML – BITEDU.PL

Czym są strony internetowe.

Strony internetowe to podstawowe elementy sieci WWW (World Wide Web), które pozwalają nam przeglądać informacje, oglądać filmy, grać w gry czy robić zakupy online. Są to pliki, które przeglądarka internetowa (np. Chrome, Firefox czy Edge) odczytuje i wyświetla na ekranie komputera, telefonu czy tabletu. Strona internetowa składa się z tekstu, obrazów, linków i innych elementów, które są zorganizowane w sposób czytelny dla użytkownika.

Rodzaje stron internetowych

Strony internetowe można podzielić na kilka głównych rodzajów w zależności od ich budowy i funkcji:

Statyczne strony: To proste strony, które nie zmieniają się w zależności od użytkownika. Zawierają stałą treść, np. strona z opisem szkoły czy blog z przepisami. Są łatwe do stworzenia i szybkie do ładowania, ale nie pozwalają na interakcje jak logowanie czy wyszukiwanie.
Dynamiczne strony: Te strony zmieniają się w zależności od działań użytkownika. Na przykład, sklep internetowy, gdzie możesz dodać produkt do koszyka, lub portal społecznościowy jak Facebook. Używają one baz danych i skryptów, które generują treść na bieżąco.
Responsywne strony: To nie tyle rodzaj, co cecha – strony, które dostosowują się do rozmiaru ekranu (np. na telefonie wyglądają inaczej niż na komputerze). Większość nowoczesnych stron jest responsywna.
Aplikacje webowe: Zaawansowane strony, które działają jak programy, np. edytory tekstu online (jak Google Docs) czy gry w przeglądarce.

Technologie do tworzenia stron internetowych

Do budowania stron internetowych używa się różnych technologii, które dzielą się na frontend (to, co widzi użytkownik) i backend (to, co dzieje się po stronie serwera). Oto najważniejsze:

HTML (HyperText Markup Language): Podstawa każdej strony – definiuje strukturę i treść (np. nagłówki, akapity, linki). To język znaczników, o którym opowiemy więcej poniżej.
CSS (Cascading Style Sheets): Odpowiada za wygląd strony, np. kolory, czcionki, układ elementów. Dzięki CSS strona staje się ładna i responsywna.
JavaScript: Dodaje interaktywność, np. animacje, formularze, gry. To język programowania, który działa w przeglądarce.
Backendowe technologie: Do dynamicznych stron, np. PHP, Python (z frameworkami jak Django), Node.js, czy bazy danych jak MySQL. Te technologie obsługują logikę serwera, np. zapisywanie danych użytkowników.
Frameworki i biblioteki: Ułatwiają pracę, np. Bootstrap (do CSS), React (do JavaScript) czy WordPress (gotowy system do stron).

Dla początkujących, jak uczniowie klasy 7 czy technikum, najlepiej zacząć od HTML i CSS, a potem dodać JavaScript.

Podstawowe znaczniki HTML

HTML to język, w którym piszemy stronę za pomocą znaczników (tagów). Każdy znacznik zaczyna się od <nazwa> i kończy </nazwa>. Między nimi umieszczamy treść. Plik HTML ma rozszerzenie .html i można go otworzyć w edytorze tekstu (np. Notepad) lub specjalistycznym programie jak Visual Studio Code.

Oto podstawowa struktura pliku HTML:

html

<!DOCTYPE html>  <!-- Deklaracja typu dokumentu -->
<html lang="pl">  <!-- Główny znacznik, lang="pl" oznacza język polski -->
<head>  <!-- Sekcja z metadanymi, niewidoczna na stronie -->
    <title>Tytuł strony</title>  <!-- Tytuł wyświetlany w zakładce przeglądarki -->
    <meta charset="UTF-8">  <!-- Kodowanie znaków, np. dla polskich liter -->
</head>
<body>  <!-- Sekcja z widoczną treścią strony -->
    <!-- Tu umieszczamy elementy strony -->
</body>
</html>

<!DOCTYPE html>  <!-- Deklaracja typu dokumentu -->
<html lang="pl">  <!-- Główny znacznik, lang="pl" oznacza język polski -->
<head>  <!-- Sekcja z metadanymi, niewidoczna na stronie -->
    <title>Tytuł strony</title>  <!-- Tytuł wyświetlany w zakładce przeglądarki -->
    <meta charset="UTF-8">  <!-- Kodowanie znaków, np. dla polskich liter -->
</head>
<body>  <!-- Sekcja z widoczną treścią strony -->
    <!-- Tu umieszczamy elementy strony -->
</body>
</html>

Najważniejsze podstawowe znaczniki

Oto lista podstawowych znaczników HTML, które warto znać na początek. Możesz je przetestować, tworząc prosty plik HTML i otwierając go w przeglądarce.

Znacznik	Opis	Przykład użycia
<h1> do <h6>	Nagłówki (h1 to największy, h6 najmniejszy). Używane do tytułów.	<h1>Witaj na stronie!</h1>
<p>	Akapit tekstu.	<p>To jest paragraf z tekstem.</p>
<a>	Link (hiperłącze). Atrybut href wskazuje adres.	<a href=”https://example.com”>Kliknij tutaj</a>
<img>	Obraz. Atrybut src wskazuje ścieżkę do pliku, alt to opis alternatywny.	<img src=”obraz.jpg” alt=”Opis obrazu”>
<ul> i <li>	Lista nieuporządkowana (z punktorami).	<ul><li>Punkt 1</li><li>Punkt 2</li></ul>
<ol> i <li>	Lista uporządkowana (z numerami).	<ol><li>Krok 1</li><li>Krok 2</li></ol>
<div>	Kontener do grupowania elementów (używany z CSS).	<div>To jest sekcja.</div>
<br>	Nowa linia (nie wymaga znacznika zamykającego).	Tekst<br> w nowej linii.
<strong> lub <b>	Pogrubiony tekst.	<strong>Ważny tekst</strong>
<em> lub <i>	Pochylony tekst (kursywa).	<em>Podkreślony tekst</em>

Pamiętaj, że znaczniki mogą mieć atrybuty, np. class=”nazwa-klasy” do stylizacji CSS lub id=”unikalny-id” do identyfikacji elementu.

Elementy struktury strony HTML

Nowoczesne strony HTML używają znaczników semantycznych (HTML5), które opisują strukturę strony. To pomaga wyszukiwarkom (jak Google) zrozumieć treść i ułatwia dostępność (np. dla osób niewidomych używających czytników ekranu). Zamiast używać tylko <div>, stosujemy specjalne znaczniki.

Oto typowa struktura strony:

html

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Przykład struktury</title>
</head>
<body>
    <header>  <!-- Nagłówek strony, np. logo i menu -->
        <h1>Moja Strona</h1>
        <nav>  <!-- Nawigacja, menu z linkami -->
            <ul>
                <li><a href="#glowna">Główna</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>  <!-- Główna treść strony -->
        <section>  <!-- Sekcja, np. część z artykułem -->
            <h2>Sekcja 1</h2>
            <p>Treść sekcji.</p>
        </section>
        
        <article>  <!-- Artykuł, samodzielna treść -->
            <h2>Artykuł</h2>
            <p>To jest niezależny artykuł.</p>
        </article>
        
        <aside>  <!-- Boczny panel, np. reklamy lub dodatkowe info -->
            <p>Dodatkowe informacje.</p>
        </aside>
    </main>
    
    <footer>  <!-- Stopka, np. prawa autorskie, kontakt -->
        <p>© 2025 Moja Strona. Wszelkie prawa zastrzeżone.</p>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Przykład struktury</title>
</head>
<body>
    <header>  <!-- Nagłówek strony, np. logo i menu -->
        <h1>Moja Strona</h1>
        <nav>  <!-- Nawigacja, menu z linkami -->
            <ul>
                <li><a href="#glowna">Główna</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>  <!-- Główna treść strony -->
        <section>  <!-- Sekcja, np. część z artykułem -->
            <h2>Sekcja 1</h2>
            <p>Treść sekcji.</p>
        </section>
        
        <article>  <!-- Artykuł, samodzielna treść -->
            <h2>Artykuł</h2>
            <p>To jest niezależny artykuł.</p>
        </article>
        
        <aside>  <!-- Boczny panel, np. reklamy lub dodatkowe info -->
            <p>Dodatkowe informacje.</p>
        </aside>
    </main>
    
    <footer>  <!-- Stopka, np. prawa autorskie, kontakt -->
        <p>© 2025 Moja Strona. Wszelkie prawa zastrzeżone.</p>
    </footer>
</body>
</html>

Wyjaśnienie elementów struktury:

<header>: Górna część strony, zawiera logo, tytuł i nawigację.
<nav>: Menu z linkami do innych części strony lub podstron.
<main>: Główna zawartość, gdzie jest najważniejsza treść.
<section>: Grupuje powiązane treści, np. rozdziały.
<article>: Samodzielny blok, np. post na blogu.
<aside>: Dodatkowe elementy, jak sidebar.
<footer>: Dolna część, z informacjami kontaktowymi czy copyrightem.