Ładowanie
HTML/CSS INF.03

KURS – HTML5

Kurs HTML - Rozszerzony

Kurs HTML

Witaj w pełnym kursie HTML! Ten przewodnik pomoże Ci poznać zarówno podstawowe, jak i zaawansowane aspekty HTML, w tym HTML5, formularze, multimedia, semantykę i integrację JavaScript.

1. Co to jest HTML?

HTML (HyperText Markup Language) to język znaczników, który służy do tworzenia stron internetowych. Dzięki HTML możesz strukturyzować treści, dodawać obrazy, linki, multimedia oraz interaktywne elementy na stronach WWW.

2. Struktura dokumentu HTML

Każdy dokument HTML składa się z kilku kluczowych elementów:

  • <!DOCTYPE html> - deklaracja typu dokumentu (informuje przeglądarkę, że używamy HTML5)
  • <html>...</html> - główny kontener dokumentu
  • <head>...</head> - metadane dokumentu (np. tytuł strony, linki do stylów, charset)
  • <body>...</body> - treść strony, widoczna dla użytkownika
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>Tytuł strony</title>
            </head>
            <body>
                <h1>Nagłówek strony</h1>
                <p>To jest akapit tekstu.</p>
            </body>
            </html>

3. Nagłówki i akapity

W HTML do tworzenia nagłówków używamy znaczników od <h1> do <h6>, gdzie <h1> to największy i najważniejszy nagłówek, a <h6> to najmniejszy:

            <h1>Nagłówek 1</h1>
            <h2>Nagłówek 2</h2>
            <h3>Nagłówek 3</h3>

Akapity są tworzone przy użyciu znacznika <p>:

            <p>To jest przykładowy akapit tekstu.</p>

4. Listy

HTML oferuje dwa podstawowe rodzaje list:

  • Listy numerowane: <ol>
  • Listy punktowane: <ul>

Przykład listy numerowanej:

            <ol>
                <li>Pierwszy punkt</li>
                <li>Drugi punkt</li>
            </ol>

Przykład listy punktowanej:

            <ul>
                <li>Pierwszy punkt</li>
                <li>Drugi punkt</li>
            </ul>

5. Tabele

Tabele w HTML umożliwiają wyświetlanie danych w formacie tabelarycznym:

            <table>
                <tr>
                    <th>Nagłówek 1</th>
                    <th>Nagłówek 2</th>
                </tr>
                <tr>
                    <td>Komórka 1</td>
                    <td>Komórka 2</td>
                </tr>
                <tr>
                    <td>Komórka 3</td>
                    <td>Komórka 4</td>
                </tr>
            </table>

6. Formularze

Formularze są wykorzystywane do zbierania danych od użytkowników. Możemy używać różnych typów pól, takich jak pola tekstowe, przyciski, pola wyboru:

            <form action="submit.php" method="post">
                <label for="name">Imię:</label>
                <input type="text" id="name" name="name">
                <br>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                <br>
                <input type="submit" value="Wyślij">
            </form>

W HTML5 mamy dostęp do nowych typów pól formularzy, takich jak date, email, range, które poprawiają użyteczność formularzy:

            <input type="date" name="data">
            <input type="range" min="0" max="100">

7. Osadzanie multimediów

HTML5 pozwala na osadzanie plików wideo i audio bez użycia dodatkowych wtyczek:

Wideo

            <video controls>
                <source src="video.mp4" type="video/mp4">
                Twoja przeglądarka nie wspiera elementu video.
            </video>

Audio

            <audio controls>
                <source src="audio.mp3" type="audio/mpeg">
                Twoja przeglądarka nie wspiera elementu audio.
            </audio>

8. Semantyka HTML5

HTML5 wprowadza nowe, semantyczne znaczniki, które ułatwiają tworzenie bardziej zrozumiałych i dostępnych stron internetowych. Oto niektóre z nich:

  • <header> - nagłówek strony lub sekcji
  • <nav> - nawigacja
  • <article> - artykuł lub samodzielna część treści
  • <section> - sekcja strony
  • <footer> - stopka strony
  • <aside> - zawartość poboczna, np. pasek boczny
            <header>
                <h1>Tytuł strony</h1>
            </header>

            <nav>
                <a href="#home">Home</a>
                <a href="#about">O nas</a>
            </nav>

            <section>
                <article>
                    <h2>Nagłówek artykułu</h2>
                    <p>Treść artykułu...</p>
                </article>
            </section>

            <footer>
                <p>Stopka strony</p>
            </footer>

9. Style CSS w HTML

Style CSS mogą być dodawane bezpośrednio do znaczników HTML za pomocą atrybutu style:

            <p style="color: red; font-size: 18px;">To jest czerwony tekst.</p>

Zalecane jest jednak oddzielenie stylów od struktury HTML poprzez używanie zewnętrznych arkuszy stylów:

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

10. JavaScript w HTML

JavaScript można osadzić bezpośrednio w HTML, aby dodać interaktywność do strony. Poniżej przykład prostej funkcji JavaScript wywołanej po kliknięciu przycisku:

            <button onclick="alert('Witaj w świecie JavaScript!')">Kliknij mnie</button>

Można również używać zewnętrznych plików JavaScript, aby oddzielić skrypty od struktury HTML:

            <script src="script.js"></script>

11. Atrybuty globalne

HTML posiada zestaw atrybutów globalnych, które można stosować we wszystkich elementach HTML:

  • id - unikalny identyfikator elementu
  • class - klasa elementu, używana do stylowania w CSS
  • style - style CSS inline
  • title - tekst wyświetlany po najechaniu myszką na element
  • data-* - atrybuty do przechowywania niestandardowych danych

Related Posts