• Artykuł

          

Samouczek: Elementy liniowe i blokowe w HTML - Kurs HTML i CSS  Udostępnij na: Facebook

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

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.

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

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

  1. 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: