Lekcja 48 - HTML - tabele, listy, formatowanie

📚

Teoria

▼

Listy w HTML

HTML oferuje trzy rodzaje list do organizacji tresci:

Lista nieuporządkowana (punktowana)

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

Lista uporzadkowana (numerowana)

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

Lista definicji

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

                    Listy zagniezdzone: Mozna umieszczac listy wewnatrz list, tworzac wielopoziomowa strukture. Wystarczy wstawic nowy element <ul> lub <ol> wewnatrz elementu <li>.
                

Tabele w HTML

Tabele sluza do prezentacji danych w formie wierszy i kolumn:

<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>

Elementy tabeli

<table> - kontener tabeli
<thead> - naglowek tabeli
<tbody> - cialo tabeli (dane)
<tfoot> - stopka tabeli
<tr> - wiersz tabeli (table row)
<th> - komorka naglowka (table header)
<td> - komorka danych (table data)
colspan="2" - laczenie kolumn
rowspan="2" - laczenie wierszy

Formatowanie tekstu

<strong> - tekst wazny (pogrubiony)
<em> - tekst wyroziony (pochylony)
<mark> - tekst podswietlony
<del> - tekst przekreslony
<ins> - tekst wstawiony (podkreslony)
<sub> - indeks dolny (H<sub>2</sub>O)
<sup> - indeks gorny (x<sup>2</sup>)
<code> - fragment kodu
<pre> - tekst preformatowany (zachowuje spacje i entery)
<blockquote> - cytat blokowy

Encje HTML

Znaki specjalne zapisujemy za pomoca encji:

& - znak &
< - znak <
> - znak >
  - spacja niedzielaca
© - symbol copyright

✏️

Zadania

▼

Latwe

Zadanie 1: Listy zakupow

Stworz strone z trzema listami: a) lista nieuporządkowana - zakupy na weekend (min. 8 pozycji), b) lista uporzadkowana - przepis krok po kroku na ulubione danie, c) lista zagniezdzona - kategorie zakupow (np. nabiał, pieczywo) z produktami pod kazdą kategorią.

Pokaz przykladowe rozwiazanie

<h2>Kategorie zakupow</h2>
<ul>
    <li>Nabial
        <ul>
            <li>Mleko</li>
            <li>Jogurt</li>
            <li>Ser</li>
        </ul>
    </li>
    <li>Pieczywo
        <ul>
            <li>Chleb razowy</li>
            <li>Bulki</li>
        </ul>
    </li>
</ul>

Srednie

Zadanie 2: Tabela - plan lekcji

Stworz tabele przedstawiajaca Twoj plan lekcji. Tabela powinna miec: naglowki kolumn (dni tygodnia), naglowki wierszy (numery lekcji z godzinami), polaczone komorki (colspan) dla lekcji trwajacych 2 godziny. Uzyj <thead>, <tbody> i <tfoot>.

Srednie

Zadanie 3: Formatowanie artykulu

Stworz strone z artykulem naukowym (temat dowolny, min. 3 akapity). Uzyj: <strong> dla waznych terminow, <em> dla nazw obcojezycznych, <mark> dla kluczowych informacji, <blockquote> dla cytatow, <code> dla fragmentow kodu lub wzory z <sub> i <sup>.

Trudne

Zadanie 4: Strona-portfolio

Stworz kompletna strone-portfolio ucznia zawierajaca: a) naglowek z imieniem i nawigacja (lista linkow), b) sekcje "O mnie" z formatowanym tekstem, c) tabele z umiejetnosciami i ich poziomem (1-5 gwiazdek), d) liste uporzadkowana osiagniec, e) stopke z danymi kontaktowymi. Uzyj znacznikow semantycznych.

🎥

Materialy wideo

▼

Automatyzacja raportów w programie Excel za pomocą skryptów pakietu Office – porada oszczędzająca...

Sharon Smith

KURS HTML I CSS OD PODSTAW - Tabele i listy. Semantyka w HTML

Daniel Noworyta

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

📜

Podstawa programowa

▼

Lekcja 48: HTML - tabele, listy, formatowanie