Cel lekcji:
Celem tej lekcji jest zrozumienie, jak formatować tekst w dokumentach HTML za pomocą różnych znaczników i atrybutów. Uczniowie nauczą się, jak używać podstawowych elementów HTML do stylizacji tekstu oraz jak te elementy wpływają na wygląd strony.
Wprowadzenie do formatowania tekstu w HTML:
HTML (HyperText Markup Language) to język znaczników, który służy do tworzenia stron internetowych. Umożliwia on nie tylko strukturyzację treści, ale również jej formatowanie. W HTML istnieje wiele znaczników, które pozwalają na stylizację tekstu, co zwiększa jego czytelność i atrakcyjność wizualną.
Kluczowe elementy formatowania tekstu w HTML:
Nagłówki: Nagłówki są używane do oznaczania tytułów i podtytułów. HTML oferuje sześć poziomów nagłówków, od <h1> (najważniejszy) do <h6> (najmniej ważny). Na przykład, nagłówek poziomu 1 może wyglądać tak: <h1>To jest nagłówek poziomu 1</h1>.
Akapity: Akapity są tworzone za pomocą znacznika <p>, który oznacza tekst jako akapit. Przykład akapitu to: <p>To jest przykładowy akapit tekstu.</p>.
Formatowanie tekstu: W HTML można wyróżniać tekst na różne sposoby. Pogrubienie uzyskuje się za pomocą znaczników <strong> lub <b>, natomiast kursywę można uzyskać poprzez <em> lub <i>. Dodatkowo, tekst można podkreślać za pomocą znacznika <u>.
Cytaty i bloki cytatów: Cytaty w linii są oznaczane za pomocą znacznika <q>, natomiast blokowe cytaty tworzy się przy użyciu znacznika <blockquote>.
Złamanie linii: Aby wprowadzić złamanie linii w tekście, można użyć znacznika <br>, a do dodania linii poziomej jako separatora treści używa się znacznika <hr>. Ogólny kontener dla tekstu, który pozwala na stosowanie stylów CSS, to znacznik <span>.
Przykład zastosowania:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatowanie tekstu</title>
</head>
<body>
<h1>Moja strona o programowaniu</h1>
<p><strong>Programowanie</strong> to fascynująca dziedzina.</p>
<p>Ucz się, <em>eksperymentuj</em> i twórz!</p>
<h2>Lista rzeczy do zrobienia:</h2>
<p>Nauczyć się HTML</p>
<p>Stworzyć stronę internetową</p>
<p>Opanować CSS</p>
<blockquote>
<p>"Programowanie to jak taniec z logiką." - Autor nieznany</p>
</blockquote>
</body>
</html>
Ćwiczenia Praktyczne
Ćwiczenie 1: Utworzenie nagłówków
Utwórz dokument HTML i dodaj przynajmniej trzy nagłówki różnego poziomu. Oznacz odpowiednio nagłówki i stwórz podział tematyczny w treści.
Ćwiczenie 2: Formatowanie akapitów
Stwórz dokument HTML z pięcioma akapitami. W każdym akapicie użyj różnych znaczników do formatowania tekstu (pogrubienie, kursywa, podkreślenie). Przykład: w jednym akapicie podkreśl ważne słowa, w innym użyj pogrubienia.
Ćwiczenie 3: Cytaty i bloki cytatów
Stwórz dokument HTML, w którym umieścisz przynajmniej dwa cytaty: jeden w linii i jeden jako blokowy cytat. Pamiętaj, aby odpowiednio oznaczyć źródło cytatu.
Ćwiczenie 4: Tworzenie strony z kompleksowym formatowaniem tekstu Utwórz złożony dokument HTML, który będzie pełnił rolę mini-artykułu. Strona powinna zawierać co najmniej trzy sekcje tematyczne, każda z nagłówkiem poziomu 2. W każdej sekcji umieść:
- Przynajmniej dwa akapity z różnymi stylami formatowania (pogrubienie, kursywa, podkreślenie).
- Przynajmniej jeden cytat w linii i jeden blokowy cytat, z odpowiednimi źródłami.
- Użyj znacznika
<ul>lub<ol>, aby dodać listę rzeczy do zrobienia lub kluczowych punktów w każdej sekcji. - Upewnij się, że każda sekcja ma spójną tematykę i sensownie powiązane treści.
Wymagania:
- Użyj różnych znaczników HTML do formatowania tekstu i strukturyzacji treści.
- Dokument powinien być dobrze zorganizowany i czytelny.
- Opcjonalnie zastosuj style CSS (inline lub w stylach) dla poprawy wyglądu, np. różne kolory dla nagłówków, tła sekcji itp.