Liceum Klasa II 45 minut PP: II.3f | s. 344

Lekcja 18: HTML - tabele, listy, formatowanie tresci

Tworzenie tabel, list uporzdkowanych i nieuporzdkowanych, formatowanie tekstu w HTML

📋 Podstawa programowa: II.3f
HTMLolstruktury danychtabele HTMLul
00:00
Wprowadzenie
5 min
00:05
Teoria
15 min
00:20
Cwiczenia
15 min
00:35
Podsumowanie
10 min
📚

Teoria

▼

Tabele w HTML

Tabele sluza do prezentowania danych w formie wierszy i kolumn. W HTML tabele tworzymy za pomoca nastepujacych znacznikow:

  • <table> - definiuje cala tabele
  • <thead> - naglowek tabeli (opcjonalny, ale zalecany)
  • <tbody> - cialo tabeli z danymi
  • <tfoot> - stopka tabeli (np. podsumowania)
  • <tr> - wiersz tabeli (table row)
  • <th> - komorka naglowkowa (table header) - domyslnie pogrubiona i wycentrowana
  • <td> - komorka z danymi (table data)

Przyklad tabeli

<table>
    <thead>
        <tr>
            <th>Imie</th>
            <th>Nazwisko</th>
            <th>Ocena</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jan</td>
            <td>Kowalski</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>Nowak</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

Laczenie komorek

Komorki mozna laczyc za pomoca atrybutow:

  • colspan="n" - laczenie n kolumn w poziomie
  • rowspan="n" - laczenie n wierszy w pionie
<tr>
    <td colspan="2">Ta komorka zajmuje 2 kolumny</td>
</tr>
<tr>
    <td rowspan="3">Ta komorka zajmuje 3 wiersze</td>
    <td>Normalna komorka</td>
</tr>

Listy w HTML

HTML oferuje trzy typy list:

1. Lista nieuporzdkowana (punktowana)

<ul>
    <li>Pierwszy element</li>
    <li>Drugi element</li>
    <li>Trzeci element</li>
</ul>

2. Lista uporzdkowana (numerowana)

<ol>
    <li>Krok pierwszy</li>
    <li>Krok drugi</li>
    <li>Krok trzeci</li>
</ol>

Atrybut type zmienia typ numeracji: type="A" (litery), type="I" (rzymskie), type="a" (male litery). Atrybut start okresla poczatkowy numer.

3. Lista definicji

<dl>
    <dt>HTML</dt>
    <dd>Jezyk znacznikow do tworzenia stron</dd>
    <dt>CSS</dt>
    <dd>Kaskadowe arkusze stylow</dd>
</dl>

Listy zagniedzone

Listy mozna zagniezdzac wewnatrz siebie, tworzac hierarchiczna strukture:

<ul>
    <li>Owoce
        <ul>
            <li>Jablka</li>
            <li>Gruszki</li>
        </ul>
    </li>
    <li>Warzywa
        <ul>
            <li>Marchewki</li>
            <li>Pomidory</li>
        </ul>
    </li>
</ul>

Formatowanie tekstu w HTML

  • <strong> - tekst wazny, pogrubiony (semantyczny)
  • <em> - tekst z emfaza, pochylony (semantyczny)
  • <b> - tekst pogrubiony (wizualny, bez znaczenia semantycznego)
  • <i> - tekst pochylony (wizualny)
  • <u> - tekst podkreslony
  • <s> - tekst przekreslony
  • <mark> - tekst podswietlony (zaznaczony)
  • <sub> - indeks dolny (np. H<sub>2</sub>O)
  • <sup> - indeks gorny (np. x<sup>2</sup>)
  • <code> - fragment kodu
  • <pre> - tekst preformatowany (zachowuje spacje i entery)
  • <blockquote> - cytat blokowy
  • <abbr title="..."> - skrot z rozwinieciem
Semantyka a wyglad: Uzywaj <strong> zamiast <b> i <em> zamiast <i>, gdy chcesz podkreslic znaczenie tekstu (nie tylko zmieniac jego wyglad). Przegladarki, czytniki ekranowe i wyszukiwarki rozumieja znaczniki semantyczne.
✏️

Zadania

▼
Latwe

Zadanie 1: Plan lekcji w tabeli HTML

Stworz strone HTML z tabela przedstawiajaca Twoj plan lekcji. Tabela powinna miec: naglowek z dniami tygodnia (poniedzialek-piatek), wiersze dla kazdej godziny lekcyjnej, polaczone komorki (colspan) tam, gdzie sa okienka. Dodaj naglowek strony i stopke.

Pokaz przykladowe rozwiazanie 
<table>
    <thead>
        <tr>
            <th>Godz.</th>
            <th>Pon</th>
            <th>Wt</th>
            <th>Sr</th>
            <th>Czw</th>
            <th>Pt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Matematyka</td>
            <td>Polski</td>
            <td>Angielski</td>
            <td>Fizyka</td>
            <td>Informatyka</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Matematyka</td>
            <td>Historia</td>
            <td colspan="2">WF</td>
            <td>Informatyka</td>
        </tr>
    </tbody>
</table>
Latwe

Zadanie 2: Przepis kulinarny z listami

Stworz strone HTML z przepisem na Twoje ulubione danie. Uzyj: listy nieuporzdkowanej (<ul>) do wypisania skladnikow, listy uporzdkowanej (<ol>) do opisania krokow przygotowania, naglowkow h1-h3 do struktury oraz znacznikow formatowania (<strong>, <em>, <mark>).

Srednie

Zadanie 3: Tabela z laczeniem komorek

Stworz tabele "Systemy liczbowe" z nastepujacymi kolumnami: Liczba dziesietna, Liczba dwojkowa, Liczba osemkowa, Liczba szesnastkowa. Wypelnij tabele liczbami od 0 do 15. Dodaj wiersz naglowkowy (thead) z tytulem "Porownanie systemow liczbowych" laczacym 4 kolumny (colspan="4").

Trudne

Zadanie 4: Slowniczek informatyczny

Stworz strone "Slowniczek informatyczny" uzywajac listy definicji (<dl>, <dt>, <dd>). Dodaj minimum 10 terminow informatycznych z definicjami. Kazdy termin powinien byc pogrubiony, a w definicjach uzyj linkow do stron z dodatkowymi informacjami. Dodaj tez spis tresci na gorze strony z linkami kotwicowymi (id i href="#...").

🎥

Materialy wideo

▼
HTML - formatowanie tekstu, wypunktowanie i tabela cz.2
Nauczanie Informatyki
KURS HTML I CSS OD PODSTAW - Tabele i listy. Semantyka w HTML
Daniel Noworyta
🎧

Podcasty

▼
✔️

Quiz - sprawdz sie!

▼