Szczególną rolę niektórych elementów treści sygnalizuje ich formatowanie (stylizacja). Poniżej prezentujemy przykłady, objaśnienia i - w razie potrzeby - instrukcje stosowania.
Skróty i akronimy oznaczamy za pomocą elementu HTML <abbr>, aby pokazać rozwinięcie skrótu, gdy znadjdzie się nad nim wskaźnik myszki.
<abbr>
Aby wyświetlić rozwinięcie skrótu, włącz atrybut title.
Skrótem słowa atrybut jest atr..
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Użyj klasy .initialism w przypadku skrótów i akronimów pisanych wielkimi literami, aby zmniejszyć nieco rozmiar fontów i uzyskać bardziej harmonijny wygląd.
HTML jest najlepszą rzeczą od czasu krojonego chleba.
Skróty opatrzone w znaczniku otaczającym atrybutem title są podkreślone cienką przerywaną linią i wyróżniane kursorem pomocy, gdy ustawimy nad nimi wskaźnik myszki. Są to dla użytkowników dodatkowe wskazówki, że mają do czynienia ze skrótem lub akronimem.
Wyróżnienia, adresy i skróty
Element
Stosowanie
Opcja
<strong>
Podkreśla ważny fragment tekstu
nie ma
<em>
Wzmacnia, podkreśla emocjonalność fragmentu tekstu
nie ma
<address>
Dane kontaktowe autora elementu będącego najbliższym przodkiem (np. sekcji, artykułu) lub całej strony
Zachowaj formatowanie, kończąc każdy wiersz znacznikiem <br>
Używanie wyróżnień (wzmocnienia)
Oto tekst wyróżniony pogrubieniem oraz tekst wyróżniony pochyleniem.
Uwaga: Zapraszamy do korzystania ze znaczników <b> oraz <i>. W HTML5 ich znaczenie zostało nieco zmienione. Element <b> wyróżnia tekst bez nadawania mu szczególnej ważności. Element <i> sygnalizuje np. termin techniczny, frazę idiomatyczną z innego języka, itp.
Przykłady adresu
Poniżej znajdują się dwa przykłady użycia znacznika<address>:
W prezentacji obrazków można zastosować trzy klasy opisujące ich obramowanie: img-rounded, img-circle, img-polaroid.
<img class="img-rounded" src="/image.jpg" />
<img class="img-circle" src="/image.jpg" />
<img class="img-polaroid" src="/image.jpg" />
Położenie grafiki
Ilustrację, którą chcemy wyświetlić po lewej stronie tekstu, oznaczamy atrybutem klasy: pull-left.
<img src="/..." class="pull-left" />
Ilustrację, którą chcemy wyświetlić po prawej stronie tekstu, oznaczamy atrybutem klasy: pull-right.
<img src="/..." class="pull-right" />
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<p><img class="pull-left" src="/images/sample/article.jpg" border="0" alt="Obrazek przykładowy po lewej stronie tekstu" /><img class="pull-right" src="/images/sample/article.jpg" border="0" alt="Obrazek przykładowy po prawej stronie tekstu" />tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</p>
Nagłówki
Nagłówki opisują strukturę zawartości stron. Nagłówki I i II poziomu generowane są przez system, w dodawanej zawartości używamy ich wyjątkowo. Do oznaczenia śródtytułów w artykułach i innych treściach stosujemy nagłówki h3, h4, h5 i h6.
Nagłówek I poziomu
Nagłówki najwyższego I poziomu (<h1>) opisują główną zawartość strony. Są generowane przez system.
Nagłówek II poziomu
Nagłówki II poziomu oznaczają tytuły pozycji - artykułów, przeglądów artykułów, list pozycji w komponentach. Rownież są generowane przez system.
Nagłówek III poziomu
Nagłówka <h3> używamy do oznaczenia śródtytułów oraz do oznakowania tytułów modułów, generowanych automatycznie. W tytułach modułów dodatkowym wyróżnikiem nagłówka bywa kolor czcionki, niekiedy tło.
Nagłówki IV, V i VI poziomu - śródtytuły
Nagłówków IV, V i VI poziomu również używamy jako śródtytułów.
Nagłówek IV poziomu
Akapit tekstu pod tytułem oznaczonym nagłówkiem <h4>. Fragment z tytułem oznaczonym nagłówkiem <h4>powinien następować po fragmentach oznaczonych nagłówkiem <h3> lub tuż za nagłówkiem <h3>.
Tytuł V poziomu
Akapit tekstu pod tytułem oznaczonym nagłówkiem <h5>. Fragment z tytułem oznaczonym nagłówkiem <h5>powinien następować po fragmentach oznaczonych nagłówkiem <h4> lub tuż za nagłówkiem <h4>.
Tytuł VI poziomu
Akapit tekstu pod tytułem oznaczonym nagłówkiem <h6>. Fragment z tytułem oznaczonym nagłówkiem <h6>powinien następować po fragmentach oznaczonych nagłówkiem <h5> lub tuż za nagłówkiem <h5>.
Blok numerowany
W przedstawianiu procedur wymagających szerszego objaśniania kolejne kroki można oznaczać numerowanymi blokami tekstu. Stosujemy wówczas atrybut klasy jm-block lub jm-block second opisujący akapit, a oznaczenie kolejności umieszczammy w znaczniku <span class="jm">01</span> .
01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
Bloki kolorowane
Wyróżnienia niektórych rodzajów informacji można dokonać za pomocą kolorowanych bloków tekstu
<div class="alert">Istotne informacje istotne, których nie można pominąć.</div>
<div class="alert alert-error">Informacje, na które koniecznie chcemy zwrócić uwagę, np. o błędach.</div>
<div class="alert alert-success">Wiadomość i inna informacja przeznaczona np. do zapamiętania</div>
<div class="alert alert-info">Ciekawostka, informacja rozszerzające, uzupełniająca tekst zasadniczy</div>
Blok z ikoną
Dla oznaczenia różnego typu informacji można również stosować bloki z ikoną umieszczaną po lewej stronie tektu, jak w tym opisie. Znacznik bloku, np. akapitu, wzbogacamy wówczas o atrybut klasy z nazwą ikony, np. <p class="jminfo" >.
<p class="jmbadge" >Tu umieszczony tekst</p>
<p class="jmcalendar" >Tu umieszczony tekst</p>
<p class="jmchat" >Tu umieszczony tekst</p>
<p class="jmcheck" >Tu umieszczony tekst</p>
<p class="jmcloud" >Tu umieszczony tekst</p>
<p class="jmdirection" >Tu umieszczony tekst</p>
<p class="jmdivide" >Tu umieszczony tekst</p>
<p class="jmerror" >Tu umieszczony tekst</p>
<p class="jmfire" >Tu umieszczony tekst</p>
<p class="jmflag" >Tu umieszczony tekst</p>
<p class="jmheart" >Tu umieszczony tekst</p>
<p class="jmhome" >Tu umieszczony tekst</p>
<p class="jminfo" >Tu umieszczony tekst</p>
<p class="jmlist" >Tu umieszczony tekst</p>
<p class="jmmail" >Tu umieszczony tekst</p>
<p class="jmpeople" >Tu umieszczony tekst</p>
<p class="jmstar" >Tu umieszczony tekst</p>
<p class="jmstat" >Tu umieszczony tekst</p>
Cytaty - blockquote
<blockquote> <p>Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie. </p> <footer><cite>Autor i źródło cytatu</cite></footer> </blockquote>
Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie.
<blockquote class="pull-right"> <p>Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj.</p> <footer class="pull-right"><cite>Autor i źródło cytatu</cite></footer> </blockquote>
Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj
Listy nieuporządkowane
Listy nieuporządkowane -<ul><li>....</li></ul>- z punktorami stosowane są do wyszczególnienia elementów lub czynności w przypadkach, gdy ich kolejność nie ma większego znaczenia.
<ul> <-- tu elementy listy --> </ul>
jakiś element wykazu,
również element wykazu,
jeszcze inny element wykazu,
element wykazu - podpunkt
element wykazu - podpunkt
element wykazu - podpunkt
również element wykazu - podpunkt
również element wykazu - podpunkt
również element wykazu - podpunkt
<ul class="jm-arrow"> <-- tu elementy listy --> </ul>
jakiś element wykazu,
również element wykazu,
jeszcze inny element wykazu,
element wykazu - podpunkt
element wykazu - podpunkt
element wykazu - podpunkt
również element wykazu - podpunkt
również element wykazu - podpunkt
również element wykazu - podpunkt
<ul class="jm-arrow2"> <-- tu elementy listy --> </ul>
jakiś element wykazu,
również element wykazu,
jeszcze inny element wykazu,
element wykazu - podpunkt
element wykazu - podpunkt
element wykazu - podpunkt
również element wykazu - podpunkt
również element wykazu - podpunkt
również element wykazu - podpunkt
Listy numerowane
Listy numerowane- <ol><li>....</li></ol>wskazują na wymaganą kolejność czynności, zwykle są stosowane w prezentacji procedur.
<ol> <-- tu elementy listy --> </ol>
Wykonaj najpierw tę czynność.
Potem wykonaj czynność kolejną.
Później wykonaj czynność trzecią, na którą złożą się
Działanie pierwsze
Działanie drugie złożone z trzech kroków
Krok 1 - polecenie
Krok 2 - polecenie
Krok 3 - polecenie
<ol class="jm-roman"> <-- tu elementy listy --> </ol>
Wykonaj najpierw tę czynność.
Potem wykonaj czynność kolejną.
Później wykonaj czynność trzecią, na którą złożą się
Działanie pierwsze
Działanie drugie złożone z trzech kroków
Krok 1 - polecenie
Krok 2 - polecenie
Krok 3 - polecenie
<ol class="jm-alpha"> <-- tu elementy listy --> </ol>
Wykonaj najpierw tę czynność.
Potem wykonaj czynność kolejną.
Później wykonaj czynność trzecią, na którą złożą się
Działanie pierwsze
Działanie drugie złożone z trzech kroków
Krok 1 - polecenie
Krok 2 - polecenie
Krok 3 - polecenie
Lista definicji (opisów)
Listy definicji (opisów) -<dl><dt></dt><dd></dd></dl>- mogą być stosowane do prezentacji słowników terminów, kalendariów
Według specyfikacji W3C listy definicji można stosować dla dowolnych typów danych, które są ze sobą powiązane bezpośrednią relacją typu nazwa::wartość lub nazwa::opis, a więc powiązanych w ten sposób, że treść elementu definiujacego (opisującego) <dd> jest w relacji z treścią elementu definiowanego (opisywanego) <dt>. Elementy <dt> nie mogą zawierać elementów blokowych, np. nagłówków <h3>.
Aby wyświetlić listę definicji w układzie poziomym, użyj znacznika <dl> z atrybutem klasy: <dl class="dl-horizontal">.
<dl> <-- tutaj umieszczamy listę --> </dl>
Joomla!,
Najlepszy CMS na świecie!
Najpopularniejszy obok WordPressa,
Definiowany termin
Definicja terminu
Kolejny element definicji
Rok 2015
Pierwsze ważne wydarzenie
Drugie ważne wydarzenie
Pozioma lista opisów
<dl class="dl-horizontal">
Lista opisów
Lista opisów jest doskonałym rozwiązaniem dla definicji terminów i innych par typu nazwa::wartość lub nazwa::opis.
Element opisywany, termin
Pierwszy człon opisu elementu opisywanego; pierwsze znaczenie
Drugi człon opisu elementu opisywanego, drugie znaczenie
Rok 2015
Pierwsze ważne wydarzenie.
Drugie ważne wydarzenie.
Trudne słowo
Szerokie objaśnienie bardzo trudnego słowa. Szerokie objaśnienie bardzo trudnego słowa. Szerokie objaśnienie bardzo trudnego słowa.
Uwaga! W liście opisów ułożonej poziomo zbyt długie elementy opisywane zostaną skrócone dzięki właściwości text-overflow i zmieszczą się w lewej kolumnie. Na węższych ekranach urządzeń wyświetlających elementy zostaną ułożone w domyślny układ - w stos, jak w standardowej liście pionowej
Przełącznik bocznego ukrywanego modułu menu użytecznego w urządzeniach przenośnych umieszczamy za pomocą kodu <p><a class="toggle-nav menu"><span class="icon-align-justify"></span></a></p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</em>.</p>
<p> </p>
<div class="jm-social">
<a href="/#" class="jm-facebook" target="_blank">facebook</a>
<a href="/#" class="jm-twitter" target="_blank">twitter</a>
<a href="/#" class="jm-link" target="_blank">linkedin</a>
<a href="/#" class="jm-skype" target="_blank">skype</a>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..
