Listy i inne

Siatka typograficzna, nagłówki i tekst główny

Skala typograficzna

Cała siatka typograficzna opiera się na dwóch zmiennych less zdefiniowanych w naszym pliku variables.less: @baseFontSize@baseLineHeight. Pierwsza z nich jest bazowym rozmiarem czcionki (font-size) stosowanym w całej witrynie, druga wyznacza odstęp międzywierszowy (line-height).

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, h5h6. Nagłówka <h3> używamy też do oznakowania tytułów modułów, generowanych automatycznie. W tytułach modułów dodatkowym wyróżnikiem nagłówka bywa kolor czcionki, niekiedy tło.

Przykładowy tekst główny

Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. Nazywał się dziś nagodzi do domu, pragnął go grzecznie, na siano. w końcu zażył. kichnął, aż u Woźnego lepiej zna się jako po.

Po cóż te łupy zdobyte. Tuż stało się. już składać zaczęto kopę żyta, niepełne jadą do domu, fortuny szczodrot objaśniają wrodzone wdzięki i zdrowie.

Przykłady nagłówków

h1. Nagłówek 1

h2. Nagłówek 2

h3. Nagłówek 3

h4. Nagłówek 4

h5. Nagłówek 5
h6. Nagłówek 6

Wyróżnienia, adresy i skróty

ElementStosowanieOpcja
<strong> Podkreśla ważny fragment tekstu nie ma
<em> Wzmacnia, podkreśla emocjonalność fragment tekstu nie ma
<abbr> Obejmuje skróty i akronimy, by wyświetlić rozwiniętą wersję po najechaniu wskaźnikiem myszki

Umieść opcjonalny atrybut title, aby objaśnić tekst.

Umieść opcjonalny atrybut lang, aby wskazać język skrótu.

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.
<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 skrótów

HTML jest najlepszą rzeczą od czasu krojonego chleba.

Skrótem słowa atrybut jest attr.

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. Jest to dla użytkowników dodatkowa wskazówka, że mają do czynienia ze skrótem lub akronimem.

Formatowanie bloków cytatów zostało zdefiniowane w arkuszach stylów odziedziczonych z ram projektowych Bootstrap. Z artykułu dowiesz się, jak znakować bloki cytatów, aby uzyskać zaprojektowany w szablonach wygląd.

Lista definicji (opisó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">.

Pionowa lista opisów

<dl>

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
Pierwszy człon opisu elementu opisywanego; pierwsze znaczenie.
Drugi człon opisu elementu opisywanego, drugie znaczenie.
Trudne słowo
Objaśnienie trudnego słowa.

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