1 klasa. Temat 21. Podstawy pracy z HTML‐em

 

Plan lekcji

Jak sprawić, by twoja strona była bardziej przejrzysta i interaktywna. 

Jak wyróżniać tekst.

Jak budować tabele.

Jak stworzyć pierwszy formularz.

Krok 1. Formatowanie tekstu 

W HTML nie chodzi tylko o wygląd, ale o znaczenie słów. Przeglądarki i roboty Google muszą wiedzieć, co jest ważne.

• <strong>ważne słowo</strong> – Pogrubia tekst i oznacza go jako istotny.
• <em>akcent</em> – Pochyla tekst (kursywa), nadając mu akcent logiczny.
• <mark>zakreślenie</mark> – Tworzy żółte tło pod tekstem (efekt zakreślacza).
• <u>podkreślenie</u> – Stosuj ostrożnie, by użytkownik nie pomylił go z linkiem.

Krok 2. Budowa Tabel (Znaczniki strukturalne)

Tabele służą do prezentowania danych w uporządkowany sposób. Składają się z wierszy i komórek:

• <table> – Główny worek na całą tabelę.

• <tr> (table row) – Jeden poziomy wiersz.

• <th> (table header) – Komórka nagłówkowa (domyślnie pogrubiona).

• <td> (table data) – Zwykła komórka z danymi.

Przykład:

<table border="1">

  <tr>

    <th>Przedmiot</th>

    <th>Poziom trudności</th>

  </tr>

  <tr>

    <td>HTML</td>

    <td>Łatwy</td>

  </tr>

</table>

Krok 3. Interakcja – Formularze

Formularz to sposób, w jaki użytkownik "rozmawia" ze stroną (np. logowanie, kontakt).

• <form> – Kontener formularza.

• <label> – Podpis do pola (bardzo ważne dla dostępności!).

• <input type="text"> – Pole na imię lub krótki tekst.

• <input type="email"> – Pole, które sprawdza, czy wpisano poprawny adres e-mail.

• <button type="submit"> – Przycisk, który "wysyła" dane.

Krok 4. Zadania praktyczne

Zadanie 1. Wyróżnienia w tekście

Wróć do swojego pliku index.html. W opisie swoich celów użyj znacznika <strong>, aby pogrubić najważniejszą część zdania (np. nazwę zawodu, o którym marzysz).

Zadanie 2. Tabela Twoich umiejętności

Poniżej listy punktowanej ze skilla-mi, dodaj tabelę. 

Zadanie 3. Sekcja kontaktowa

Na samym dole strony stwórz prosty formularz kontaktowy.

<h2>Kontakt</h2>

<form>

    <label>Twoje imię:</label><br>

    <input type="text" placeholder="Jak masz na imię?"><br><br>

    

    <label>Twój e-mail:</label><br>

    <input type="email" placeholder="mail@przyklad.pl"><br><br>

    

    <button type="button" onclick="alert('Brawo! Kliknąłeś przycisk!')">

        Wyślij wiadomość

    </button>

</form>

Różnica między front-endem (to, co widać) a back-endem (to, co dzieje się „pod maską”).

 

Wyobraźcie sobie, że formularz na stronie to skrzynka pocztowa. HTML to tylko ta metalowa puszka z napisem 'Listy'. Możecie do niej wrzucić kartkę, ale sama puszka nie zawiezie listu do adresata.

Aby wiadomość gdzieś dotarła, potrzebujemy listonosza (to jest język programowania, np. PHP lub Python) oraz sortowni (to jest serwer). Na tym etapie uczymy się budować tylko 'puszkę'. Żeby formularz naprawdę wysłał e-maila, musielibyśmy postawić serwer

Krok 5. Podsumowanie 

Zapisz plik i odśwież stronę w przeglądarce. Zobacz, jak tabela porządkuje informacje, a pola formularza pozwalają na wpisanie tekstu.

Dla ambitnych: Spróbuj dodać do tabeli trzecią kolumnę o nazwie "Uwagi" i wpisz tam, od jak dawna zajmujesz się daną umiejętnością