Ćwiczenia - HTML i CSS

W tej sekcji znajdziesz ćwiczenia dotyczące struktury dokumentu HTML oraz podstawowych znaczników, atrybutów i formatowania.

Struktura dokumentu HTML

Ćwiczenie 1: Składnia języka HTML

Stwórz podstawowy dokument HTML. Użyj odpowiednich znaczników, aby poprawnie zdefiniować strukturę strony (nagłówek, ciało, sekcje):

            <!DOCTYPE html>
            <html>
                <head>
                    <title>Moja pierwsza strona</title>
                </head>
                <body>
                    <h1>Witaj na mojej stronie</h1>
                    <p>To jest przykładowy tekst.</p>
                </body>
            </html>

Ćwiczenie 2: Nagłówek dokumentu

Wstaw nagłówek do dokumentu HTML i opisz, co on zawiera (tytuł strony, informacje meta, itp.).

Ćwiczenie 3: Narzędzia do edycji dokumentów HTML

Przejrzyj edytory HTML (np. Sublime Text, Visual Studio Code) i stwórz prosty plik HTML. Następnie załaduj go w przeglądarkę.

Podstawowe znaczniki i atrybuty w języku HTML

Ćwiczenie 4: Elementy liniowe i blokowe

Użyj odpowiednich znaczników do utworzenia listy oraz paragrafu. Wykorzystaj elementy blokowe i liniowe:

            <h1>Nagłówek</h1>
            <p>To jest paragraf tekstu.</p>
            <ul>
                <li>Element 1</li>
                <li>Element 2</li>
            </ul>

Ćwiczenie 5: Atrybuty znaczników HTML

Dodaj atrybuty do znaczników, np. class, id, src, href:

            <a href="https://example.com">Kliknij tutaj</a>
            <img src="obrazek.jpg" alt="Opis obrazka">

Ćwiczenie 6: Formatowanie tekstu

Wstaw tekst w różnych formatach: pogrubiony, kursywa, podkreślony:

            <b>Pogrubiony tekst</b>
            <i>Kursywa</i>
            <u>Podkreślony tekst</u>

Ćwiczenie 7: Znaki specjalne

Użyj znaków specjalnych w HTML, takich jak <, >, &, ", ©:

            < p > &copy; 2025 </ p >

Ćwiczenie 8: Formatowanie tekstu w bloki i wykazy

Wstaw tekst w blokach za pomocą elementów takich jak div i ul:

            <div>Tutaj znajduje się blok tekstu.</div>
            <ul>
                <li>Pierwszy punkt</li>
                <li>Drugi punkt</li>
            </ul>

Odsyłacze

Ćwiczenie 9: Odnośniki nawigacyjne

Utwórz prosty odnośnik nawigacyjny do innych sekcji dokumentu:

            <a href="#sekcja1">Przejdź do sekcji 1</a>

Ćwiczenie 10: Grupowanie elementów liniowych

Grupuj elementy liniowe (np. linki) w blokach nav:

            <nav>
                <a href="home.html">Strona główna</a>
                <a href="about.html">O nas</a>
            </nav>

Barwa na stronie internetowej

Ćwiczenie 11: Modele barw

Zmodyfikuj tło strony za pomocą kolorów w modelu RGB i HEX:

            <body style="background-color: rgb(255, 0, 0);">
            </body>
            <body style="background-color: #ff0000;">
            </body>

Ćwiczenie 12: Kodowanie barw w HTML5 i CSS3

Użyj kolorów w HTML5 i CSS3, stosując wartości HEX, RGB i HSL do ustawienia kolorów:

            <body style="background-color: hsl(120, 100%, 50%);">
            </body>

Podział strony i obsługa danych w języku HTML

Ćwiczenie 13: Bloki

Utwórz blokowy układ strony z użyciem div:

            <div class="blok">Zawartość bloku</div>

Ćwiczenie 14: Sekcje

Podziel stronę na sekcje z użyciem section:

            <section>
                <h2>Nagłówek sekcji</h2>
                <p>Treść sekcji</p>
            </section>

Tabele w HTML

Ćwiczenie 15: Tworzenie tabeli

Stwórz prostą tabelę z danymi:

            <table>
                <tr>
                    <th>Nagłówek 1</th>
                    <th>Nagłówek 2</th>
                </tr>
                <tr>
                    <td>Dane 1</td>
                    <td>Dane 2</td>
                </tr>
            </table>

Formularze w HTML

Ćwiczenie 16: Typy znaczników do tworzenia formularzy

Stwórz formularz z różnymi polami wejściowymi, np. tekstowe, przyciski, pola wyboru:

            <form action="/submit" method="POST">
                <input type="text" name="imie">
                <input type="submit" value="Wyślij">
            </form>

Ćwiczenie 17: Metody wysyłania formularzy

Spróbuj wysłać formularz używając metod GET i POST:

            <form action="/submit" method="GET">

Grafika statyczna w dokumentach HTML

Ćwiczenie 18: Dodawanie grafiki

Wstaw obrazek na stronę za pomocą znacznika img:

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

Ćwiczenie 19: Tworzenie mapy obrazu

Utwórz mapę obrazu, która pozwala na kliknięcie w różne części obrazu:

            <img src="mapa.jpg" usemap="#mapa">
            <map name="mapa">
                <area shape="rect" coords="34,44,270,350" href="link.html">
            </map>

Ćwiczenie 20: Element Canvas

Użyj elementu canvas do narysowania prostokąta:

            <canvas id="myCanvas" width="200" height="200"></canvas>
            <script>
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(20, 20, 150, 100);
            </script>

Multimedia na stronach internetowych

Ćwiczenie 21: Dodawanie wideo i audio

Wstaw wideo i audio do dokumentu HTML:

            <video width="320" height="240" controls>
                <source src="video.mp4" type="video/mp4">
            </video>
            <audio controls>
                <source src="audio.mp3" type="audio/mp3">
            </audio>