Ćwiczenia powtórzeniowe z HTML i CSS. - Powtórzenie podstaw HTML

Cel lekcji:

  • Utrwalenie wiedzy z zakresu podstawowych struktur HTML oraz ich zastosowania w praktyce.

Zakres materiału:

  1. Struktura dokumentu HTML:
  • Znaczniki <html>, <head>, <body>, ich funkcje i znaczenie w strukturze dokumentu.
  • Podstawowe atrybuty (np. lang w <html>).
  1. Nagłówki i paragrafy:
  • Hierarchia nagłówków: od <h1> (najważniejszy) do <h6> (najmniej ważny).
  • Znaczenie semantyczne nagłówków dla SEO i dostępności.
  • Paragrafy – struktura i użycie znacznika <p>.
  1. Listy:
  • Listy uporządkowane (<ol>) i nieuporządkowane (<ul>).
  • Pozycje listy przy użyciu znacznika <li>.
  1. Linki:
  • Znacznik <a> i jego podstawowe atrybuty: href, target.
  • Linki wewnętrzne i zewnętrzne.
  1. Obrazy:
  • Wstawianie obrazów (<img>) i atrybuty (alt, szerokość, wysokość)

Struktura dokumentu HTML przykłady

Znaczniki <html>, <head>, <body>, ich funkcje i znaczenie w strukturze dokumentu:

  • Znacznik <html>: Obejmuje cały dokument HTML i informuje przeglądarkę, że kod jest napisany w języku HTML.
  • Znacznik <head>: Zawiera informacje meta (np. kodowanie, tytuł strony) oraz odwołania do stylów i skryptów, które nie są wyświetlane bezpośrednio na stronie.
  • Znacznik <body>: Zawiera całą widoczną zawartość strony, czyli to, co użytkownik widzi w przeglądarce.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja Pierwsza Strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest przykładowy paragraf z treścią.</p>
</body>
</html>

W tym przykładzie mamy pełną strukturę dokumentu HTML. Znacznik <html> określa język dokumentu (lang="pl" oznacza, że strona jest w języku polskim), <head> zawiera informacje o kodowaniu i tytuł strony, a <body> wyświetla nagłówek i paragraf.

Nagłówki i paragrafy

Hierarchia nagłówków: od <h1> (najważniejszy) do <h6> (najmniej ważny):

  • Nagłówki są używane do podziału treści na sekcje. Każdy poziom nagłówka ma swoje znaczenie: <h1> jest głównym nagłówkiem na stronie, a kolejne <h2>, <h3>, aż do <h6> oznaczają podsekcje i podrozdziały.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład nagłówków</title>
</head>
<body>
<h1>Główny nagłówek</h1>
<p>To jest główny nagłówek strony, który powinien być używany tylko raz.</p>

<h2>Podtytuł 1</h2>
<p>To jest podtytuł, który wskazuje na kolejną sekcję treści.</p>

<h3>Podtytuł 2</h3>
<p>To jest kolejny podtytuł wewnątrz sekcji.</p>

<h4>Podtytuł 3</h4>
<p>Jeszcze niższy poziom nagłówka.</p>

<h5>Podtytuł 4</h5>
<p>Możemy kontynuować do kolejnych poziomów.</p>

<h6>Podtytuł 5</h6>
<p>Ostatni i najmniej ważny poziom nagłówka.</p>
</body>
</html>

W tym przykładzie widzimy całą hierarchię nagłówków, od najważniejszego <h1> po najmniej ważny <h6>. Zastosowanie właściwej hierarchii poprawia dostępność i SEO strony.

Paragrafy – struktura i użycie znacznika <p>:

  • Paragrafy służą do grupowania tekstu. Każdy blok tekstu, który tworzy spójny fragment treści, powinien być umieszczony w znaczniku <p>.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład paragrafów</title>
</head>
<body>
<p>To jest pierwszy paragraf, który wprowadza do tematu strony.</p>

<p>To jest drugi paragraf, który może zawierać dodatkowe informacje. Każdy paragraf jest domyślnie oddzielony odstępem od innych elementów na stronie.</p>
</body>
</html>

Każdy z tych paragrafów jest osobnym blokiem tekstu, co ułatwia czytelność treści.

Listy

Listy uporządkowane (<ol>) i nieuporządkowane (<ul>):

  • Listy uporządkowane używają numeracji do wyświetlania pozycji, podczas gdy listy nieuporządkowane używają punktów (bulletów).

Przykład listy uporządkowanej (<ol>):

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Lista uporządkowana</title>
</head>
<body>
<h2>Kroki do zrobienia kawy:</h2>
<ol>
    <li>Wsyp kawę do filiżanki.</li>
    <li>Zalej gorącą wodą.</li>
    <li>Dodaj cukier lub mleko wedle uznania.</li>
</ol>
</body>
</html>

Przykład listy nieuporządkowanej (<ul>):

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Lista nieuporządkowana</title>
</head>
<body>
<h2>Ulubione owoce:</h2>
<ul>
    <li>Jabłka</li>
    <li>Banany</li>
    <li>Winogrona</li>
    <li>Truskawki</li>
</ul>
</body>
</html>

W pierwszym przykładzie mamy numerowaną listę kroków, a w drugim przykładzie — listę ulubionych owoców z punktami.

Linki

Znacznik <a> i jego podstawowe atrybuty: href, target:

  • Znacznik <a> służy do tworzenia odnośników (linków) do innych stron lub zasobów. Atrybut href określa adres URL, na który prowadzi link, a target="_blank" powoduje otwarcie linku w nowej karcie przeglądarki.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład linku</title>
</head>
<body>
<p>Odwiedź moją <a href="https://www.mojastrona.pl" target="_blank">stronę internetową</a>, aby dowiedzieć się więcej!</p>
</body>
</html>

W tym przykładzie link prowadzi do zewnętrznej strony. Atrybut target="_blank" powoduje otwarcie nowej karty przeglądarki, gdy użytkownik kliknie na link.

Przykład 2:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład linku</title>
</head>
<body>
<p>Przejdź do <a href="/img" target="_blank">galerii</a>!</p>
</body>
</html>

W tym przykładzie link prowadzi do wewnętrznej strony. Atrybut href="/img" powoduje przejście do dokumentu index.html znajdującego się w folderze img.

Obrazy

Znacznik <img> i jego podstawowe atrybuty: src, alt, width, height:

  • Znacznik <img> służy do osadzania obrazów na stronie. Atrybut src określa ścieżkę do obrazu, natomiast alt to alternatywny tekst, który jest wyświetlany, jeśli obraz nie może zostać załadowany. Atrybuty width i height mogą służyć do określenia szerokości i wysokości obrazu.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład obrazu</title>
</head>
<body>
<h2>Mój ulubiony obrazek</h2>
<img src="obrazek.jpg" alt="Opis obrazu" width="300" height="200">
</body>
</html>

W tym przykładzie obraz „obrazek.jpg” zostanie wyświetlony w rozmiarze 300x200 pikseli, a jeśli obraz nie załaduje się poprawnie, użytkownik zobaczy tekst „Opis obrazu” zamiast obrazu.

Ćwiczenia:

Ćwiczenie 1: Utworzenie prostej strony informacyjnej

  • Zadanie: Utwórz stronę z nagłówkiem <h1>, krótkim opisem (<p>) i listą uporządkowaną oraz nieuporządkowaną.
  • Nagłówek powinien zawierać tytuł strony.
  • W paragrafie opisz tematykę strony.
  • Wykorzystaj <ul> do stworzenia listy punktowanej oraz <ol> do listy numerowanej.

Ćwiczenie 2: Tworzenie linków

  • Zadanie: Dodaj do wcześniej stworzonej strony linki:
  • Link do innej strony (np. Google).
  • Link wewnętrzny, który przekierowuje do sekcji z listą.

Ćwiczenie 3: Tworzenie wielopoziomowej listy

  • Zadanie: Dodaj wielopoziomową listę (zagnieżdżoną listę w <ul> lub <ol>) w jednym z paragrafów strony.

Ćwiczenie 4: Formatowanie tekstu w paragrafie

  • Zadanie: Dodaj do paragrafu różne style:
  • Pogrubienie (<strong> lub <b>),
  • Kursywa (<em> lub <i>),
  • Przekreślenie (<s> lub <del>),
  • Wyróżnienia (<mark>).

Ćwiczenie 5: Dodawanie obrazów

  • Zadanie:
  • Utwórz prostą stronę z nagłówkiem o treści „Moja galeria obrazów”.
  • Dodaj trzy obrazy o różnej wielkości, każdy z opisem w atrybucie alt.
  • Dla każdego z obrazów ustaw różne rozmiary przy użyciu atrybutów width i height.