HTML-notatki, podstawowe tagi

Notatka HTML / Formularze / Multimedia / Tabele

I. HTML – struktura i tagi

1️⃣ Podstawowe tagi

• <ul> – lista nieuporządkowana
• <ol> – lista uporządkowana
• <li> – element listy
• <dl> – lista definicji
• <dt> – termin w liście definicji
• <dd> – definicja w liście definicji
• <p> – akapit
• <br> – nowa linia (bez nowego akapitu)
• <span> – element inline, używany do stylowania fragmentu tekstu, nie tworzy nowej linii
• <div> – element blokowy, służy do grupowania innych elementów

2️⃣ Nagłówki i teksty

• <h1> … <h6> – nagłówki, <h1> największy, <h6> najmniejszy
• <em> – podkreśla tekst semantycznie (kursywa)
• <strong> – semantycznie ważny tekst (domyślnie pogrubienie)

3️⃣ Linki i atrybuty

• <a> – anchor (kotwica)
• href – adres docelowy linku
• target="_blank" – otwiera link w nowej karcie
• rel – relacja linku do strony (nofollow, noopener, canonical)
• aria-label – dostępność dla czytników ekranowych

4️⃣ Obrazki

• <img> – wstawia obraz
• src – ścieżka do obrazka (lokalny lub URL)
• alt – opis obrazka dla SEO i dostępności
• title – tekst wyświetlany po najechaniu
• srcset – zestaw obrazków o różnych rozdzielczościach
• loading="lazy" – ładowanie leniwe
• fetchpriority – priorytet pobierania (high, low)
• oneerror – obsługa błędów w ładowaniu
• Formaty: jpg, png, avif

5️⃣ Formularze

• <form> – formularz do przesyłania danych
  • action – adres, gdzie wysyłamy dane
  • method – GET / POST
  • enctype – sposób kodowania danych (np. multipart/form-data)
  • novalidate – wyłącza domyślną walidację
• <label> – etykieta pola, for="id_pola"
• <input> – różne typy pól
  • type="text", type="checkbox", type="radio", type="file"
  • checked – zaznaczone checkbox/radio
  • value – wartość pola
  • accept – ogranicza pliki do określonych typów (np. pdf, doc)
  • required – wymusza wypełnienie pola
  • placeholder – podpowiedź w polu
  • autocomplete – automatyczne uzupełnianie
  • step – krok w liczbach (np. dla type="number")
  • pattern – wyrażenie regularne do walidacji
  • aria-* – dostępność (np. aria-label)
• <textarea> – większe pole tekstowe
• <select> – lista rozwijana
  • <option> – opcja w liście
  • <optgroup> – grupa opcji
  • multiple – wielokrotny wybór
  • disabled – wyłączone pole
• <fieldset> – grupowanie pól w formularzu
• <legend> – podpis dla <fieldset>

6️⃣ Tabela

• <table> – tabela
• <tr> – wiersz tabeli
• <td> – komórka danych
• <th> – nagłówek tabeli
  • scope="row|col" – określa zakres nagłówka
• <caption> – opis tabeli
• Atrybuty:
  • colspan="5" – łączy 5 kolumn
  • rowspan="2" – łączy 2 wiersze

7️⃣ Struktura semantyczna i nawigacja

• <nav> – główna nawigacja
• <aside> – element poboczny (np. panel boczny, reklamy)
• <section> – sekcja tematyczna strony
• <header> – nagłówek strony/sekcji
• <footer> – stopka strony/sekcji
• Breadcrumbs – ścieżka nawigacyjna (Home > Elektronika > Komputery)

8️⃣ API i JavaScript

• API – interfejs programistyczny umożliwiający komunikację między aplikacjami
• JS używa API np. do pobierania danych (fetch) lub logowania przez Google/Facebook

9️⃣ Google Fonts

• Darmowa biblioteka czcionek online
• Dodanie przez <link> w HTML lub @import w CSS
• Przykład:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
p { font-family: 'Roboto', sans-serif; }