Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jakie elementy są blokowe - Kurs HTML i CSS   Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-09-19

Język HTML, na stronach internetowych, w obecnej formie odpowiada jedynie za semantykę dokumentu. Co za tym idzie zostały w nim wydzielone elementy, pozwalające na logiczne określenie układu treści w dokumencie. Tego typu elementy dzielimy na blokowe oraz liniowe:

  • elementy blokowe – to takie elementy, które otaczają tekst i tworzą podział innych elementów na stronie. Najczęściej występują pojedynczo w jednej linii, mogą w sobie zawierać elementy liniowe oraz, w szczególnych wypadkach, inne elementy blokowe.

Elementami blokowymi są:

  1. Nagłówki dokumentu – elementy, określające nagłówki treści w dokumencie HTML. Dostępnych jest sześć poziomów nagłówków w HTML. Im poziom nagłówka wyższy, tym zawarta w nim treść jest bardziej podrzędna względem nagłówków o poziomie niższym. Wstawianie nagłówków odpowiedniego typu odbywa się w następujący sposób:
<html> 
    <head>
        <title>Nagłówki dokumentu</title>
</head>
    <body>
    <h1>Nagłówek h1 - hierarchicznie najwyższy</h1>
    <h2>Nagłówek h2 - podrzędny względem h1</h2>
    <h3>Nagłówek h3 - podrzędny względem h2</h3>
    <h4>Nagłówek h4 - podrzędny względem h3</h4>
    <h5>Nagłówek h5 - podrzędny względem h4</h5>
    <h6>Nagłówek h6 - podrzędny względem h5</h6>

    </body>
</html>

Przykład użycia nagłówków został przedstawiony na Rys. 1.

Rys. 1. Nagłówki html.

  1. Akapity oraz znaki złamania linii – jeśli nie jest to konieczne, nie należy używać znaków łamania linii wewnątrz paragrafów (wiesze, dialogi etc.). Paragrafy oznaczamy za pomocą znaczników <p></p>, natomiast złamanie linii oznaczane jest poprzez znacznik<br />.
<html>
    <head>
        <title>Akapity</title>
</head>
<body>
    <p>Paragraf 1</p><p>Paragraf <br />2</p>
</body>
</html>

Mimo, iż w powyższym kodzie wpisaliśmy paragrafy obok siebie, to zostaną one wyświetlone jako dwa oddzielne bloki, jeden po drugim, tak, jak na Rys. 3.

Rys. 2. Paragrafy w html.

  1. Listy wypunktowane, numerowane, definicji – listy, mimo że są elementami blokowymi, mogą zawierać w sobie inne elementy blokowe, w tym listy. Nie można ich natomiast umieszczać wewnątrz paragrafów. Lista nieuporządkowana, to lista w której kolejność pozycji nie ma znaczenia, lista uporządkowana prezentuje elementy w przypadku, gdy ich kolejność ma znaczenie, lista definicji służy do prezentowania dwóch typów obiektów terminu <dt> oraz opisu terminu <dd>. Aby umieścić w dokumencie listę danego typu, należy posłużyć się następującym kodem (Rys. 4.):
<html>
    <head>
        <title>Listy wypunktowane, numerowane, definicji</title>
</head>
    <body>
    <p>Lista wypunktowana</p>
    <ul>
        <li>Element nieuporządkowany</li>
        <li>Kolejny element nieuporządkowany</li>
    </ul>
    <p>Lista numerowana</p>
    <ol>
        <li>Pierwszy element</li>
        <li>Drugi element</li>
    </ol>
    <p>Lista definicji</p>
    <dl>
        <dt>Termin</dt>
        <dd>Jego opis</dd>
    </dl>
    </body>
</html>

Rys. 3. Listy w html.

  1. Cytowane fragmenty tekstu – znacznik <blockquote> służy do prezentowania dużych fragmentów cytowanego tekstu. Jest on kolejnym przykładem znacznika typu blokowego, wewnątrz którego można używać innych znaczników blokowych. Poniższy kod prezentuje przykładowe wykorzystanie znacznika <blockquote>, wynik użycia poniższego kodu został przedstawiony na Rys. 5.:
<html>
    <head>
        <title>Cytowane fragmenty tekstu</title>
</head>
<body>
    <p>Tekst ujęty w blockquote</p>
    <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nisl   risus.Phasellus tincidunt.
    </p>
    </blockquote>
</body> 
</html>

Rys. 4. Przykładowy tekst ujęty w znacznik <blockquote>

  1. Pozioma linia podziału <hr /> – znacznik, wprowadzający pustą linię podziału, stosowany zwykle tam, gdzie nie ma możliwości oddzielenia tekstu za pomocą nagłówków. Pozioma linia podziału nie może być umieszczana wewnątrz akapitów (<p>), ponieważ służy ona do oddzielenia ich od siebie tak, jak na Rys. 5.
<html>
    <head>
        <title>Pozioma linia podziału</title>
</head>
<body>
    <p>Akapit pierwszy</p>
    <hr />
    <p>Akapit drugi</p>
</body>
</html>

Rys. 5. Akapity podzielone za pomocą znacznika <hr />.

  1. Tekst preformatowany <pre> – służy do przedstawienia tekstu dokładnie w taki sposób, w jaki został zapisany w kodzie HTML, z zachowaniem wszystkich znaków białych – spacji, tabulatorów i podziału wierszy tak, na Rys. 6.
<html>
    <head>
        <title>Tekst preformatowany</title>
</head>
<body>
    <pre>
        Ala
        Ma
        Kota
    </pre>
</body>
</html>

Rys. 6. Tekst ujęty wewnątrz znacznika <pre>.

  1. Znacznik <address> – znacznik, który definiuje adresy umieszczone na stronie i związane  z nią, np. dane kontaktowe tak, jak na Rys. 7.
<html>
    <head>
        <title>Znacznik address</title>
</head>
<body>
    <address>
    Jan Kowalski<br />
    ul. Kowalskich<br />
    01-000 Kowalowo
    </address>
</body>
</html>

Rys. 7. Tekst ujęty wewnątrz znacznika address.

  1. Element <div> – służy do grupowania elementów i dzielenia layoutu strony. Przykładowe zastosowanie prezentuje Rys. 8.
<html>
<head>
    <title>Element div</title>
    <style type="text/css">
        div { 
            border: solid 1px #000; 
            height:100%; }
        #menu {
            float: right;
            width:30%;}
        #zawartosc {
            float:left;
            width:70%; }
    </style>
</head>
<body>
    <div id="menu">
        <a href="">Kontakt</a>
    </div>
    <div id="zawartosc">
        <h1>Nagłówek</h1>
        <p>treść</p>
    </div>
</body>
</html>

Rys. 8. Przykładowe zastosowanie elementu <div>.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać elementy blokowe w samouczkach: