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
O 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:
<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:
Śródtytuł wyrównany do prawego marginesu
<h1 style="text-align: center; ">Śródtytuł ustawiony na środku</h1>Śródtytuł ustawiony na środku
Obramowany śródtytuł z literami co 1mm
Ś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.
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:
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.
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
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.
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.
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; ">
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.
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:
<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)
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:
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.
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]](/images/grafika/enter.gif)
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>.
<legend>Ankieta</legend>
<textarea rows="3" cols="30">Wpisz opinię...</textarea>
</fieldset>
A oto wynik:
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:
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.
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 Konstantyno
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)
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 -->