Samouczek: Elementy liniowe i blokowe w HTML - Kurs HTML i CSS
Autor: Mateusz Mikulski
Opublikowano: 2011-09-21
Podczas tworzenia stron WWW warto zadbać o odpowiednie grupowanie elementów na stronie i prawidłową strukturę dokumentu. Do wykonania takich zadań używane są znaczniki <span></span> oraz <div></div>. Znacznik <span> służy do grupowania elementów liniowych, np. wyróżnienia wybranych słów w zdaniu. Do grupowania elementów blokowych, takich jak np. listy czy kilka akapitów, używa się znacznika <div>.
Przed wykonaniem zadań powinieneś wiedzieć:
- Jak utworzyć stronę internetową
- Jak umieszczać style CSS
- Jak tworzyć listę wypunktowaną w HTML
- Jak formatować listę wypunktowaną w CSS
Po wykonaniu zadań nauczysz się:
- jak używać znaczników grupujących elementy liniowe oraz blokowe,
- jak zmieniać wygląd zgrupowanych elementów.
Implementacja
Twoim zadaniem jest przygotowanie strony internetowej, wypełnienie jej tekstem oraz dwiema listami, a następnie odpowiednie zgrupowanie elementów liniowych i blokowych. Na końcu, za pomocą CSS, zastosowanie odpowiednich stylów CSS dla każdej utworzonej grupy.
Efekt końcowy został przedstawiony na Rys. 1.
Rys. 1. Efekt końcowy.
Przygotowanie strony
Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.
- W edytorze HTML utwórz nowy plik pod nazwą index.html i wklej do niego szkielet strony:
<html>
<head>
<title>Elementy liniowe i blokowe w HTML</title>
</head>
<body>
</body>
</html>
- Pomiędzy znacznikami <body> i </body> wpisz:
<p>Poniżej znajdują się przykładowe listy Zwierząt oraz Roślin</p>
<p>Lista zwierząt:</p>
<ul>
<li>Kot</li>
<li>Pies</li>
<li>Kaczka</li>
</ul>
<p>Lista roślin:</p>
<ul>
<li>Kwiat</li>
<li>Drzewo</li>
<li>Krzew</li>
</ul>
- Zapisz stronę. Otwórz ją w przeglądarce. Powinna wyglądać tak, jak na Rys. 2.
Rys. 2. Strona internetowa wypełniona tekstem podanym w zadaniu.
Grupowanie elementów
- Zgrupuj elementy za pomocą znacznika <span>.
- Zmień zawartość pierwszego paragrafu, znajdującego się na stronie, w następujący sposób:
<p>Poniżej znajdują się przykładowe listy
<span id="spanZwierzeta">Zwierząt</span> oraz
<span id="spanRosliny">Roślin</span>:
</p>
Informacja |
Określenie atrybutu id w znaczniku pozwala na bezpośrednie odwoływanie się do elementów, znajdujących się w danej grupie, np. podczas zmiany ich wyglądu. |
- Zgrupuj elementy za pomocą znacznika <div>.
- Zmień listy znajdujące się na stronie w następujący sposób:
<div id="divZwierzeta">
<p>Lista zwierząt:</p>
<ul>
<li>Kot</li>
<li>Pies</li>
<li>Kaczka</li>
</ul>
</div>
<div id="divRosliny">
<p>Lista roślin:</p>
<ul>
<li>Kwiat</li>
<li>Drzewo</li>
<li>Krzew</li>
</ul>
</div>
- Zapisz stronę. Sprawdź, czy plik index.html wygląda tak, jak na Rys. 3.
Rys. 3. Plik index.html po zgrupowaniu elementów.
Informacja |
Dokument, zawierający elementy pogrupowane w ten sposób, nie będzie różnił się graficznie od pierwszej wersji, która nie zawiera znaczników <span> oraz <div>. Jest tak ze względu na to, że zastosowane znaczniki same w sobie nie zawierają żadnych właściwości graficznych, a służą jedynie do grupowania odpowiednich treści i ustalania struktury dokumentu. Pozwala to na operowanie na wyglądzie utworzonych w ten sposób grup. |
Zmiana wyglądu utworzonych grup
W poprzednim zadaniu pogrupowaliśmy elementy w cztery grupy: spanZwierzeta , spanRosliny, divZwierzeta oraz divRosliny. Dzięki temu teraz możemy zmienić wygląd i rozmieszczenie poszczególnych grup w naszym dokumencie.
- Dodaj do nagłówka dokumentu formatowanie pogrupowanych elementów.
- Do nagłówka dokumentu dopisz następującą treść (jeśli nie wiesz, jak to zrobić, zobacz Jak umieszczać style CSS):
<style type="text/css">
#spanZwierzeta {
color:Red; }
#spanRosliny {
color:Green; }
#divZwierzeta {
border: 1px solid green;
width: 100px;
height: auto; }
#divRosliny {
border:1px solid red;
width:100px;
height:auto; }
</style>
Informacja |
W powyższym przykładzie zmieniliśmy wygląd utworzonych wcześniej grup. Dodatkowo, dzięki takiemu zgrupowaniu elementów, możemy zmieniać również ich położenie względem siebie i innych obiektów. Więcej na ten temat zobacz w samouczku Układ elementów na stronie. |
- Zapisz stronę. Sprawdź, czy plik index.html wygląda tak, jak na Rys. 4.
Rys. 3. Plik index.html po dodaniu formatowania.
- Otwórz stronę w przeglądarce. Powinna ona wyglądać tak, jak na Rys. 1.
Strona końcowa
Poniżej możesz zobaczyć końcowy kod strony HTML:
<html>
<head>
<title>Elementy liniowe i blokowe w HTML </title>
<style type="text/css">
#spanZwierzeta {
color:Red; }
#spanRosliny {
color:Green; }
#divZwierzeta {
border: 1px solid green;
width: 100px;
height: auto; }
#divRosliny {
border:1px solid red;
width:100px;
height:auto; }
</style>
</head>
<body>
<p>Poniżej znajdują się przykładowe listy
<span id="spanZwierzeta">Zwierząt</span> oraz
<span id="spanRosliny">Roślin</span>:
</p>
<div id="divZwierzeta">
<p>Lista zwierząt:</p>
<ul>
<li>Kot</li>
<li>Pies</li>
<li>Kaczka</li>
</ul>
</div>
<div id="divRosliny">
<p>Lista roślin:</p>
<ul>
<li>Kwiat</li>
<li>Drzewo</li>
<li>Krzew</li>
</ul>
</div>
</body>
</html>
Podsumowanie
W tym artykule nauczyliśmy się, jak grupować elementy liniowe oraz blokowe, a dodatkowo, jak zmienić ich wygląd w dokumencie za pomocą stylów CSS.
W kolejnym artykule nauczymy się, jak Definiować układ elementów na stronie
Dodatkowo zobacz: