Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Elementy blokowe i liniowe

Email Drukuj PDF

Tematy: Tytuły (nagłówki) | Znacznik akapitu | Znacznik końca wiersza | Pozioma linia | Blok preformatowany | Blok cytowany | Adres | Blok dokumentu | Wykazy | Obramowanie formularza | Zbiór elementów multimedialnych | Elementy liniowe | Zakres | Przełamanie wyrazu |Cytat w wierszu | Czcionki | Komentarz

logo HTML 5O rozdziale (aktualizacja 10.03.2013): W tej części mówimy o poleceniach języka HTML, które wprowadzają tzw. elementy blokowe, będące podstawowymi, strukturalnymi składnikami budulcowymi strony, jak śródtytuły, akapity, poziome linie czy bloki elementów multimedialnych. Elementy blokowe są takimi fragmentami, które zajmują samodzielne miejsce - nie można umieścić obok siebie, w jednej linii, dwóch elementów blokowych, np. dwa akapity, dwie poziome linie czy dwa śródtytuły mogą występować zawsze jeden pod drugim. Przeciwieństwem elementów blokowych są elementy wierszowe (liniowe), które mogą występować obok siebie, w jednym wierszu, jak <span> czy <small>.

Tytuły (nagłówki)

Tytuły, zwane też śródtytułami lub nagłówkami (heading), są podstawowymi elementami dzielącymi dokument na logiczne części. Pełnią one analogiczną rolę, jak nagłówki w gazecie. W języku HTML mamy do dyspozycji sześć poziomów tytułów, które można stosować hierarchicznie - tytuł stopnia drugiego, z punktu widzenia logiki treści, jest podrzędny w stosunku do tytułu stopnia pierwszego, a trzeci - w stosunku do drugiego.

Kod:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Przykłady:

To jest tytuł pierwszego stopnia

To jest tytuł drugiego stopnia

To jest tytuł trzeciego stopnia

To jest tytuł czwartego stopnia

To jest tytuł piątego stopnia
To jest tytuł szóstego stopnia

HTML zrezygnował z formatowania śródtytułów za pomocą atrybutów polecenia Hx - można je za to swobodnie, i znacznie bogaciej, formatować za pomocą stylów, określając atrybuty czcionki, wyrównanie i wcięcie tekstu, kolor, marginesy i obramowania itd. Przykład prostego formatowania widzi Czytelnik w tym rozdziale - śródtytuły dowolnego szczebla mają kropkowane podkreślenie subtelnie wyróżniające poszczególne sekcje, zdefiniowane w zewnętrznym arkuszu stylów za pomocą klasy .tyt { border-bottom: dotted 1px black; padding-bottom:10px; }. Po zapisaniu definicji klasy w arkuszu jest ona za każdym razem przywoływana poleceniem <hx class="tyt">treść śródtytułu</hx>.

Kilka innych przykładów, z użyciem stylu lokalnego:

<h1 style="text-align: right; ">Śródtytuł wyrównany do prawego marginesu</h1>

Śródtytuł wyrównany do prawego marginesu

<h1 style="text-align: center; ">Śródtytuł ustawiony na środku</h1>

Śródtytuł ustawiony na środku

<h1 style="letter-spacing: 1mm; border: 3px double; padding: 10px; ">Obramowany śródtytuł z literami co 1mm</h1>

Obramowany śródtytuł z literami co 1mm

<h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-color: black; ">Śródtytuł w kolorze darkseagreen na tle black</h1>

Śródtytuł w kolorze darkseagreen na tle black

Jak widać, śródtytuły powinniśmy traktować jako podstawowe elementy strukturalne dokumentu, natomiast cała strona prezentacyjna, wizualna, jest przenoszona do kaskadowych arkuszy stylów, za pomocą których możemy swobodnie manipulować tymi elementami, mając nieograniczoną wręcz swobodę ich wizualizacji. Mam nadzieję, że te uwagi wystarczająco dobitnie podkreślają fundamentalną rolę stylów we współczesnym webmasterstwie i konieczność ich biegłego opanowania.

Informacje o Hx

Znacznik akapitu

Akapit jest podstawowym elementem zawierającym tekst w dokumentach HTML i służy do wydzielania fragmentów zawierających jakąś zwartą myśl. Obok śródtytułów jest najważniejszym elementem strukturalnym dokumentu HTML.

Kod:

<p> </p>

Przykład:

To jest nieco dłuższy akapit, który powinien zająć więcej niż jeden wiersz, aby można było poprawnie zobrazować stosowanie tego znacznika w dokumencie internetowym. No, chyba już. Wiersz został przeniesiony.

To jest następny akapit, oddzielony od poprzedniego interlinią. Każdy akapit jest objęty parą znaczników.

Dawniej do poziomego wyrównania akapitu (np. do prawego marginesu strony) stosowane atrybut align, jednak w HTML 4 i XHTML 1.0 został on uznany za przestarzały, a z XHTML 1.1 został wycofany. Wszelkie formatowanie, nieporównanie bogatsze, jest wykonywane za pomocą stylów, podobnie jak w opisanych wyżej śródtytułach.

Kilka innych przykładów formatowania, z użyciem stylu lokalnego:

<p style="text-align: right; ">Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu</p>

Akapit wyrównany do prawego marginesu

<p style="text-align: center; ">Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. </p1>

Akapit ustawiony na środku.

<p style="word-spacing:1em; border: 1px dashed brown; padding:5px; ">Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli</p>

Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli

<p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>

Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza

Jak widać, użytkownik ma pełną swobodę formatowania akapitu, ograniczoną jedynie własną wyobraźnią i bieżącymi potrzebami.

Informacje o P

Znacznik końca wiersza

Znacznik końca wiersza służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem.

Kod:

<br>

Przykład:

Pierwszy akapit, w którym zastosowaliśmy przenoszenie wiersza. Uwaga, przenosimy...
Następny wiersz tego samego akapitu, wpisywany po znaczniku <br>, dzięki któremu został utworzony.

A teraz następny akapit, w którym zastosujemy...
ten sam manewr.
W taki sposób możemy skracać wiersze akapitu i przenosić je niżej, co bardzo się przyda we współczesnej poezji
pisanej
często
w słupkach (taka moda)

Pić
albo nie pić,
oto jest pytanie...
a odpowiedzi
udzieli Ci na nie...
stosowna komisja parlamentarna Sejmu RP

Dawniej stosowano niekiedy kilka kolejnych poleceń <br> do zwiększania pionowych odstępów między elementami, jednak nie jest to technika zalecana i powinno się w tym celu stosować odstępy definiowane za pomocą stylów, np. margin.

W starszych wersjach HTML wykorzystywano atrybut clear służący do "zrzucania" w dół elementów liniowych, aby nie występowały obok siebie, jednak atrybut ten, choć jest obecny w specyfikacji HTML 4 i XHTML 1.0, jest uznany za przestarzały, a z XHTML 1.1 i HTML 5 został usunięty. Zaleca się stosowanie stylów.

Informacje o BR

Pozioma linia

Pozioma linia to po prostu kreska ciągnąca się przez całą szerokość okna lub pojemnika, w którym została umieszczona.

Kod:

<hr>

Przykład:


W starszych wersjach HTML stosowano szereg atrybutów, które zachowały się jeszcze w HTML 4 i XHTML 1.0, ale tylko w wersjach Transition i Frameset, natomiast w wersji Strict są to atrybuty uznane za przestarzałe, zaś w XHTML 1.1 i HTML 5 już w ogóle nie istnieją. Są to atrybuty noshade (pozbawienie cieniowania), width (szerokość), size (grubość) i align (poziome wyrównanie). Formatowanie poziomych linii zostało przeniesione do stylów CSS.

Kilka innych przykładów formatowania, z użyciem stylu lokalnego:

Linia może mieć określoną długość w pikselach lub procentach: <hr style="width: 50%; ">


Linia może być dosunięta do prawego marginesu: <hr style="width: 50%; text-align: right; ">


Informacje o HR

Blok preformatowany

Blok preformatowany jest blokiem tekstu, w którym uwzględniane są białe znaki znajdujące się w kodzie źródłowym, np. dodatkowe spacje, punkty tabulacji, znaki końca akapitu itd., które są pomijane w innych poleceniach, np. w akapicie.

Kod:

<pre> </pre>

Rezultat:

Tekst preformatowany, wyświetlany czcionką monotypiczną
(o stałej szerokości znaku)
pozwala wprowadzać dodatkowe spacje,
uwzględnia także
punkty tabulacji,
i znaki końca akapitu.
a1 a2 a3 a4
b1 b2 b3 b4

Porównaj ten sam tekst umieszczony w ramach akapitu - jak widać, wszystkie białe znaki zostały "zlane".

Tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku) pozwala wprowadzać dodatkowe spacje, uwzględnia także punkty tabulacji, i znaki końca akapitu. a1 a2 a3 a4 b1 b2 b3 b4

Zwróć uwagę, że jeśli umieścimy w obrębie pre zbyt długi wiersz, w oknie przeglądarki pojawi się dolny suwak, gdyż wiersz nie jest zawinięty.

Informacje o PRE

Blok cytowany

<blockquote> </blockquote>

Bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z wcięciem i z automatycznie nadanym cudzysłowem:

<p>Wydaje mi się, że wiersz kończy się fragmentem:</p>
<blockquote>
Soft you now, the fair Ophelia.<br>
Nymph, in thy orisons,<br>
be all my sins remembered.
</blockquote>
<p>Ale nie mam pewności.</p>

Wydaje mi się, że wiersz kończy się fragmentem:

Soft you now, the fair Ophelia.
Nymph, in thy orisons,
be all my sins remembered.

Ale nie mam pewności.

(Przykład zaczerpnięty z HTML Reference Library)

Informacje o BLOCKQUOTE

Adres

Polecenie (wyświetlane za pomocą kursywy) jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.:

Kod:

<address> </address>

Rezultat:

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

Informacje o ADDRESS

Blok dokumentu

Polecenie div (blok, sekcja) jest we współczesnym semantycznym webmasterstwie jednym z fundamentalnych poleceń języka HTML, które odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach pozycjonowanych i formatowanych za pomocą kaskadowych arkuszy stylów oparte są nowoczesne układy stron (ang. layouty). w HTML 5 polecenie div utraciło jednak część swoich funkcji, gdyż autorzy specyfikacji postanowili wydzielić specjalną grupę poleceń - header, footer, nav, section, article, hgroup, aside (mówimy o nich w rozdziale o strukturze dokumentu) - które tworzą szkielet strony, natomiast poleceniu div pozostawili uzupełniające zadanie tworzenia pozostałych bloków elementów.

<div> </div>

Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania, np. środkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd.

<div style="text-align:right">zawartość bloku</div>

Wykaz

  • pierwszy punkt wykazu
  • drugi punkt wykazu
  • trzeci punkt wykazu

jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst.

[ENTER]

Informacje o DIV

Wykazy (listy)

Do elementów blokowych zaliczane są wykazy, zwane też potocznie listami. Ze względu na obszerność tematu poświęcamy im osobny rozdział w kursie.

Obramowanie formularza

W specyfikacji HTML 4 pojawiło się polecenie fieldset, które tworzy obramowanie dla znajdujących się w jego ramach elementów formularza - każdy element, jak przyciski radiowe, pole tekstowe czy rozwijana lista wyboru, może być objęty taką ramką.

<fieldset>definicja elementu formularza</fieldset>

Samo obramowanie można oczywiście uzyskać za pomocą stylów, więc wprowadzanie nowego polecenia nie byłoby zasadne. Rzeczywisty efekt widzimy dopiero po połączeniu go ze znacznikiem <legend>.

<fieldset>
<legend>Ankieta</legend>
<textarea rows="3" cols="30">Wpisz opinię...</textarea>
</fieldset>

A oto wynik:

Ankieta

Informacje o FIELDSET

Informacje o LEGEND

Zbiór elementów multimedialnych

Nowe w HTML 5 polecenie figure definiuje zbiór elementów we wspólnym kontenerze, szczególnie multimedialnych, jak obrazy, wideo, diagramy, i niektórych tekstowych, jak np. listingi. Kontener taki można formatować, a formatowanie obejmuje wtedy wszystki elementy, np. wyrównanie na stronie, obramowanie czy margines.

Poleceniu towarzyszy zazwyczaj uzupełniające polecenie figcaption zawierające tytuł kontenera - od jego położenia w stosunku do grafik zależy pozycja podpisu (nad lub pod zbiorem elementów).

Przykład:

<figure>

  <img src="/bread.jpg" alt="Tytuł" width="150" height="159">

  <img src="/coffee.jpg" alt="Tytuł" width="150" height="112">

  <img src="/milk.jpg" alt="Tytuł" width="150" height="183">

<figcaption>Rys. 1 Śniadanie</figcaption>

</figure>

Przykład:

breadcoffeemilk

Rys.1 Śniadanie

Informacje o FIGURE

Informacje o FIGCAPTION

Elementy liniowe

Zakres

Zakres definiowany jest za pomocą polecenia <span> </span>. Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle.

<span> </span>

<p>W tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span style="font-style:italic; background-color:green">ten fragment jest pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p>

W tym akapicie ten fragment jest pogrubiony i w niebieskim kolorze, natomiast ten fragment jest pochylony i na zielonym tle, a tu jest koniec akapitu.

Informacje o SPAN

Przełamanie wyrazu

Polecenie wstawia punkt przełamania wyrazu (word break). Jest stosowane w przypadku długich wyrazów (np. zbitek technicznych terminów pisanych w "wielbłądziej" konwencji, a więc z wielkimi literami w środku sygnalizującymi nowy wyraz bez spacji, jak np. w programowaniu), które w niewielkim oknie powinny być poprawnie łamane, a nie przypadkowo dzielone w dowolnych miejscach. Może to mieć miejsce w pojemniku, którego szerokość została ustalona przez autora lub w oknie zmniejszonym przez samego czytelnika.

<wbr>

Przykład:

<p>Konstantyno<wbr>politańczy<wbr>kiewiczówna.</p>

Najpiękniejsza na świecie jest Konstancja Konstantynopolitańczykiewiczówna

 

Informacje o WBR

Cytat w wierszu

Nowym poleceniem HTML jest krótki cytat w ramach wiersza (in-line quote), wprowadzany za pomocą <q></q> (porównaj je z blokiem cytowanym).

Polecenie ma automatycznie obejmować cytowany tekst cudzysłowem, przy czym od definicji języka zależy sposób wyświetlania cudzysłowu. Na przykład, dla języka angielskiego, zagnieżdżone polecenie:

John said, <q lang="en">I saw Lucy at lunch, she says <q lang="en">Mary wants you to get some ice cream on your way home.</q> I think I will get some at Ben and Jerry's, on Gloucester Road.</q>

powinno dać w efekcie

John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road.

"Zewnętrzne" Q tworzy cudzysłów " ", a "wewnętrzne" - apostrofy ' '. W pełni poprawnie interpretuje je Opera, natomiast Firefox, Chrome i Internet Explorer wyświetlają w obu miejscach cudzysłów.

(przykład pochodzi z HTML Reference Library)

Informacje o Q

Czcionki

Elementami liniowymi są fizyczne i logiczne style czcionek - poświęcamy im odrębny rozdział.

Komentarz

<!-- ... -->

Polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu. Na przykład:

<!-- Ten dokument jest w trakcie budowania. Najprawdopodobniej następne zmiany pojawią się w przyszłym miesiącu -->

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15502151