Lekcja podstaw HTML

Spis treści

Potrzebne narzędzia

Ćwiczenie 1: Struktura strony

Ćwiczenie 2: Podstawy CSS

Ćwiczenie 3: Linkowanie podstron i dziedziczenie stylu

Ćwiczenie 4: Dodanie nowej podstrony i ujednolicenie menu

Ćwiczenie 5: Wstawianie obrazka na stronę

Ćwiczenie 6: Znaczniki SEO

Potrzebne narzędzia

Dowolna przeglądarka internetowa
Edytor kodu html – można użyć programu Notatnik, jednakże posiadanie specjalnego edytora bardzo ułatwia pracę i zrozumienie kodu, gdyż mamy w nim zaznaczoną składnię.

Textadept

Proponuję wykorzystać bezpłatny edytor Textadept, który nie wymaga instalacji (jest to oprogramowanie typu portable), wystarczy, że rozpakujemy plik zip na swoim komputerze i uruchomimy textadept.exe

Pobierz Textadept

Ćwiczenie 1: Struktura strony

Cel: Stworzenie podstawowego szkieletu strony HTML.

➡ Treść zadania:
Utwórz w edytorze Textadept plik index.html i dodaj poniższą strukturę.

Możesz zmienić tekst nagłówka, elementy menu (zawarte pomiędzy znacznikami <nav>) tak aby odpowiadały treści Twojej strony.

Pomiędzy znacznikami <article> ..</article> znajduje się treść artykułu. Zamień go na treść związaną z Twoją stroną. Możesz dodać kolejne akapity poprzez dodanie znaczników <p>...</p>

<!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>
</head>
<body>
    <header>
        <h1>Witaj na mojej stronie!</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Strona główna</a></li>
            <li><a href="#">O mnie</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>Pierwszy artykuł</h2>
            <p>To jest przykładowy tekst artykułu.</p>
        </article>
    </main>
    <footer>
        <p>© 2025 Moja Strona</p>
    </footer>
</body>
</html>

Zapisz plik i otwórz go w przeglądarce internetowej.

Ćwiczenie 2: Podstawy CSS

Teraz nasza strona zawiera tylko treści tekstowe bez żadnego formatowania.

Cel: Dodanie prostego stylu do strony.

➡ Treść zadania:
Utwórz w edytorze plik style.css i podłącz go do index.html.

Aby strona html „wiedziała” z jakiego pliku ma korzystać musimy dodać deklarację arkusza stylów (czyli pliku style.css) w nagłówku pliku index.html czyli pomiędzy znacznikami <head>..</head>.

Deklaracja arkusza stylów:

<link rel="stylesheet" href="style.css">

W nowoutworzonym pliku style.css dodaj poniższy kod:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
header {
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}
nav ul li {
    display: inline;
    margin: 0 15px;
}
nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
main {
    width: 80%;
    margin: 20px auto;
}

Zapisz zmiany w obydwu plikach i uruchom index.html w przeglądarce. Teraz powinno być widoczne formatowanie nagłówka, menu i artykułu.

➡ Dodatkowe zadanie:

Nadaj sekcji article odstęp od góry (np. margin-top: 20px).

Zmień wygląd stopki (footer):

Ustaw wysokość stopki na np. 60px.
Ustaw inny kolor tła – możesz wybrać kolor ze strony HTML Color Codes.
Wyrównaj tekst stopki do środka (text-align: center).

Komenda CSS	Opis
`background-color`	Ustawia kolor tła elementu. Można używać nazw kolorów, kodów HEX, RGB itp.
`color`	Określa kolor tekstu w elemencie.
`margin`	Ustawia margines wokół elementu (odstęp od innych elementów).
`padding`	Określa wewnętrzny odstęp (między treścią a krawędzią elementu).
`text-align`	Ustawia wyrównanie tekstu (`left`, `center`, `right`, `justify`).
`height`	Określa wysokość elementu (np. `60px`, `auto`).
`border-radius`	Zaokrągla rogi elementu (np. `5px` dla lekko zaokrąglonych rogów).
`display`	Określa sposób wyświetlania elementu (`block`, `inline`, `flex` itd.).
`list-style`	Ustawia wygląd list (`none`, `circle`, `square` itp.).
`font-family`	Określa czcionkę używaną w tekście (`Arial, sans-serif`, `Times New Roman`, itp.).

Ćwiczenie 3: Linkowanie podstron i dziedziczenie stylu

Cel: Nauczymy się tworzyć linki między stronami oraz zobaczymy, jak CSS działa na wielu podstronach.

➡ Treść zadania:

Utwórz drugą stronę
Stwórz nowy plik o nazwie about.html i dodaj do niego kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>O mnie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>O mnie</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">Strona główna</a></li>
            <li><a href="about.html">O mnie</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>Kim jestem?</h2>
            <p>To jest przykładowa podstrona 'O mnie'.</p>
        </article>
    </main>
    <footer>
        <p>© 2025 Moja Strona</p>
    </footer>
</body>
</html>

Nowoutworzona strona about.html również zawiera link do arkusza stylów, zatem powinna wyglądać podobnie do strony głównej.

Zaletą arkusza stylów jest to, że możemy dokonać w nim zmian, które będą natychmiast widoczne na wszystkich podstronach serwisu korzystających z tego arkusza.

Za nawigację pomiędzy stronami odpowiada sekcja <nav> </nav>. Są w niej linki do poszczególnych podstron. Aby podstrony były ze sobą połaczone musimy umieścić prawidłowe linki w elementach <a href="...">

Zapisz strony z wykonanymi zmianami i sprawdź czy linki w menu działają prawidłowo.

Ćwiczenie 4: Dodanie nowej podstrony i ujednolicenie menu

➡ Treść zadania:

Dodaj nową podstronę, np. „Kontakt” (contact.html).
Upewnij się, że każda strona (index.html, about.html, contact.html) zawiera menu, które działa poprawnie i pozwala przechodzić między stronami.
Strona powinna korzystać z tego samego pliku CSS (style.css), aby zachować spójny wygląd.

Ćwiczenie 5: Wstawianie obrazka na stronę

Cel: Nauczymy się dodawać obrazy w HTML oraz dostosowywać je w CSS.

➡ Treść zadania:

Dodaj obrazek do folderu projektu
- Umieść plik obrazek.jpg w katalogu z plikami HTML.
- Możesz użyć własnego obrazka lub pobrać darmowy z Unsplash lub Pexels.
Wstaw obrazek do index.html w sekcji <main> za pomocą kodu:

<img src="obrazek.jpg" alt="Opis obrazka">

Dostosuj obrazek w CSS (style.css) np.:

img { display: block; max-width: 80%; margin: 20px auto; border-radius: 10px; }

Ćwiczenie 6: Optymalizacja pod SEO

Cel: Dodanie znaczników istotnych dla pozycjonowania.

➡ Treść zadania:
Dodaj do sekcji <head>:

<meta name="description" content="Moja pierwsza strona internetowa o HTML i SEO">
<meta name="keywords" content="HTML, CSS, SEO, pozycjonowanie">
<meta name="author" content="Imię i Nazwisko">

Zmień nagłówki na bardziej opisowe i odpowiadające treści Twojej strony. Dodaj alt do obrazka:

<h1>Podstawy HTML i pozycjonowania stron</h1>
<img src="obrazek.jpg" alt="Przykładowy obrazek związany z HTML">