Lekcja: Bloki w HTML
Bloki w HTML to fundamentalne elementy, które pozwalają na organizowanie treści i struktury na stronie internetowej. Każdy element blokowy zajmuje całą dostępną szerokość swojego kontenera i jest renderowany w osobnej linii, co oznacza, że elementy blokowe „łamią” wiersz w dokumencie HTML. Dzięki tej właściwości elementy blokowe są niezwykle użyteczne do tworzenia układów i organizacji stron, umożliwiając projektowanie czytelnych i logicznych sekcji na stronie.
Elementy blokowe pozwalają na przejrzyste uporządkowanie i wyróżnienie różnych części strony, jak nagłówki, sekcje treści, listy czy artykuły, które mogą stanowić logiczną strukturę strony internetowej. W połączeniu z arkuszami stylów CSS mogą zostać wyróżnione i zaaranżowane w estetyczny układ strony.
Główne elementy blokowe HTML
-
<div>: Uniwersalny kontener HTML, który służy do grupowania i organizowania elementów.<div>to jeden z najczęściej używanych elementów, zwłaszcza w połączeniu z klasami lub identyfikatorami, co umożliwia zastosowanie specyficznego stylowania CSS. -
Nagłówki (
<h1>,<h2>,<h3>, ...,<h6>): Używane do definiowania tytułów i podtytułów.<h1>jest największym i najważniejszym nagłówkiem na stronie, a<h6>- najmniejszym. -
Paragrafy (
<p>): Służą do prezentacji treści tekstowych w zorganizowanych akapitach, które są od siebie odseparowane wizualnie. -
Sekcje (
<section>) i artykuły (<article>): Pomagają w dzieleniu treści strony na tematyczne części.<section>służy do wydzielania tematycznych sekcji, natomiast<article>używany jest do samodzielnych części, które mogą być zrozumiałe bez kontekstu strony (np. posty na blogu). -
Nagłówek i stopka (
<header>,<footer>): Zazwyczaj pojawiają się na górze i dole strony lub sekcji, zawierając takie elementy jak tytuły, menu nawigacyjne lub informacje kontaktowe. -
Listy (
<ul>,<ol>,<li>): Elementy blokowe przeznaczone do tworzenia list punktowanych (<ul>) i numerowanych (<ol>), a każdy element listy jest oznaczony jako<li>.
Właściwości elementów blokowych
Elementy blokowe mają specyficzne cechy, które pozwalają im na organizację treści w strukturze strony:
- Szerokość: Element blokowy zajmuje całą szerokość swojego kontenera (domyślnie).
- Łamanie linii: Każdy element blokowy pojawia się w osobnej linii, co pozwala na naturalne tworzenie sekcji na stronie.
- Możliwość grupowania: Można je łączyć, grupować i uzupełniać o style, dzięki czemu tworzą spójną, logiczną strukturę.
Zastosowanie stylów dla elementów blokowych
Dzięki wykorzystaniu CSS, elementy blokowe można stylizować i organizować na stronie. Na przykład za pomocą CSS możemy nadać elementom blokowym obramowania, kolory tła, marginesy, wymiary oraz pozycjonowanie, co znacznie poprawia wygląd strony i ułatwia nawigację.
Ćwiczenia
Ćwiczenie 1: Zastosowanie <div> do tworzenia bloków treści i stylów
Stwórz dokument HTML, który składa się z kilku sekcji oddzielonych za pomocą <div>. W jednej sekcji wstaw obrazek oraz opis, w innej sekcji stwórz przycisk i krótki tekst. Nadaj każdemu <div> unikalną klasę lub identyfikator, aby później można było zastosować do niego stylowanie w CSS.
Ćwiczenie 2: Użycie <div> do podziału treści strony
Stwórz dokument HTML, w którym za pomocą elementów <div> podzielisz stronę na główne sekcje: nagłówek, sekcję główną, panel boczny oraz stopkę. Nadaj każdemu <div> unikalną klasę lub identyfikator (np. header, main, sidebar, footer). W głównej sekcji umieść paragrafy tekstu, w panelu bocznym odnośniki do innych stron, a w nagłówku i stopce krótki tytuł strony oraz dane kontaktowe.
Ćwiczenie 3: Tworzenie prostego układu strony
Stwórz dokument HTML, który wykorzysta elementy <header>, <nav>, <section>, <article>, oraz <footer>. W nagłówku umieść tytuł strony, w <nav> dodaj kilka przykładowych odnośników nawigacyjnych, a w <section> dodaj paragrafy opisujące tematykę strony. W <article> umieść krótki tekst lub tytuł przykładowego artykułu, a w stopce zamieść informacje kontaktowe.
Ćwiczenie 4: Tworzenie artykułów z użyciem <section> i <article>
Stwórz dokument HTML, który zawiera główną sekcję tematyczną strony za pomocą <section>. Wewnątrz niej umieść dwa artykuły <article> o różnej tematyce, każdy z osobnym nagłówkiem <h2> oraz paragrafem <p> tekstu. Każdy artykuł powinien stanowić samodzielną część treści i być wizualnie oddzielony od reszty.