Typografia

Oceń ten artykuł
(0 głosów)

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.

Tytuł I poziomu - nazwa witryny

Tytułem najwyższego poziomu oznaczono nazwę witryny umieszczaną na każdej stronie. Tekst tytułu jest ukryty, ale "widzą" go wyszukiwarki, przeglądarki, urządzenia odczytujące. W miejscu ukrytego tekstu wyświetlane jest logo witryny. W żadnym innym miejscu znacznika<h1>nie stosujemy!

Tytuł II poziomu - tytuł strony

Sygnalizuje główną treść strony. Ustalany jest w konfiguracji pozycji menu. To, czy jest widoczny, zależy od ustawienia w konfiguracji pozycji menu. Oznaczenia generowane są przez Joomla!. Autorów upraszamy, by w swoich materiałach znacznika<h2>nie stosowali.

Tytuły stron oznaczone są dodatkowo atrybutem klasycontentpagetitle.

Tytuł III poziomu - tytuły pozycji

Nagłówek<h3>oznacza tytuły pozycji: - artykułów, przeglądów artykułów, list pozycji w komponentach, w sekcjach i w kategoriach praz tytuły treści towarzyszących - modułów. Dodatkowym wyróżnikiem np. tytułów w modułach bywa kolor czcionki, niekiedy tło.

Dodatkowo - zależnie od wyróżnianego elementu - oznaczono te tytuły atrybutami klascontentpagetitle,contentheadinglub componentheading.

Tytuł III poziomu - tytuły pozycji

Powyżej przykład tytułu III poziomu oznaczonego dodatkową klasącontentheading.

Tytuł III poziomu - tytuły pozycji

Powyżej przykład tytułu III poziomu oznaczonego dodatkową klasącomponentheading.

Tytuł IV, V i VI poziomu - śródtytuły

Nagłówki<h4>,<h5>i<h6>sygnalizują śródtytuły. Oznaczają treści przynależne do artykułów lub innych jednostek treści (np. modułów, kart informacyjnych czy opisów produktu).

Tytuł IV poziomu - śródtytuł

Akapit tekstu pod tytułem oznaczonym nagłówkiem<h4>.

Tytuł V poziomu - śródtytuł

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>.

Tytuł VI poziomu - śródtytuł

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>.

Listy numerowane

Listy numerowane- <ol><li>....</li></ol>wskazują na wymaganą kolejność czynności, zwykle są stosowane w prezentacji procedur.

Przykład:
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj kolejną.
  3. Następnie wykonaj czynność trzecią.
  4. Na koniec zrób to.

Blok numerowany

W przedstawianiu procedur wymagających szerszego objaśniania kolejne kroki oznaczane są numerowanymi blokami tekstu, np.

  • 1.Numerowany blok tekstu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
  • 2.Numerowany blok tekstu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
  • 3.Numerowany blok tekstu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Jest to odmiana listy nieuporządkowanej. Rozpocznij listę znacznikiem<ul class="blocknumber">, a każdy element listy liczbą porządkową objętą znacznikiem<span class="bignumber">, jak poniżej:

<ul class="blocknumber"> <li><span class="bignumber">01</span>Tekst punktu</li> <li><span class="bignumber">02</span>Tekst punktu</li> </ul>

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.

Przykład:
  • jakiś element wykazu,
  • inny element wykazu,
    • element listy - podpunkt
    • element listy - podpunkt
  • kolejny element wykazu,
  • ostatni element wykazu.

Listy definicji

Listy definicji -<dl><dt></dt><dd></dd></dl>- stosowane są do prezentacji słownika terminów.

Przykład:
Joomla!
Najlepszy CMS na świecie!
Definiowany termin
Definicja terminu

Tekst wstępnie sformatowany

Tekst wstępnie sformatowany<pre>i<span class="code">

Nazwy plików oraz funkcji, stałych i zmiennych, adresy internetowe, a także fragmenty kodu programów napisane są w całości czcionką o stałej szerokości. Wewnątrz tekstu wyglądają następująco:zmiennalubfunkcja ().

Natomiast bloki kodu programów i arkuszy stylów CSS wyróżnione są następująco:

Przykład:
#error {
width: 480px;
float: right;
color: #004080;
}
#nota {
width: 480px;
float: left;
color: #004080;}

Cytaty - blockquote

Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie.
Stosowanie

Umieść tekst cytatu między znacznikiem początkowym:<blockquote>i końcowym:</blockquote>.

Akronimy i skróty, terminy

Użycie terminu, skrótu, akronimu sygnalizowane jest podkreśloną kropkowaną linią. Po ustawieniu wskaźnika myszki nad podkreślonym słowem wyświetlane jest objaśnienie.

To jest akronim:HTML, to jest skrót:itp., to jest termin zdefiniowany w witrynie:termin

Stosowanie

Umieść akronim w znaczniku<acronym>, skrót w znaczniku<abbr>, termin w znaczniku<dfn>oraz dodaj atybut<title="Tu objaśnienie">, np.:

<acronym title="Polskie Centrum Joomla" lang="pl">PCJ</acronym>
<abbr title="i tak dalej" lang="pl">itd.</abbr>
<dfn title="Obszar przeznaczony na moduły" lang="pl">moduł</dfn>

Wyróżnienia typów informacji

Przykłady

Stylprzyklad(example) sygnalizuje - zgodnie z nazwą materiały przykładowe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="przyklad"> albo <div class="example">, np.:

<div class="przyklad">Tutaj tekst informacji… </div>
Ważne

Informacje istotne, których nie można pominąć, wyróżniane są stylemwazne.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="wazne"> lub <div class="important">, np.:

<div class="wazne">Tutaj tekst informacji… </div>
Zapamiętaj!

Stylempamietajoznaczone są wiadomości i inne informacje przeznaczone do zapamiętania.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="pamietaj"> lub <div class="toremember">, np.:

<div class="pamietaj">Tutaj tekst informacji… </div>
Termin, definicja

Definicje i omówienia zastosowanych w tekście terminów mogą być oznaczane stylemdefinicja.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="definicja"> lub <div class="definition">, np.:

<div class="definicja">Tutaj tekst informacji… </div>
Pobierz, pliki do pobrania

Stylpobierzwskazuje zestawy plików do pobrania lub inne informacje o pakietach instalacyjnych.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach w znacznikach blokudivz atrybutem klasy <div class="pobierz"> albo <div class="download">, np.:

<div class="pobierz">Tutaj tekst informacji… </div>
Uwagi, notatki, objaśnienia

Wyjaśnienia, uwagi, informacje skierowane do wybranej wąskiej grupy użytkowników sygnalizuje styluwaga.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="uwaga"> lub <div class="note">, np.:

<div class="uwaga">Tutaj tekst informacji… </div>
Ciekawostki, uzupełnienia

Ciekawostki, informacje rozszerzające, uzupełniające tekst zasadniczysygnalizuje stylciekawostki

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="ciekawostki"> albo <div class="curiosity">, np.:

<div class="ciekawostki">Tutaj tekst informacji… </div>
Ostrzeżenia

Styluostrzezenieużywamy do sygnalizowania informacji o skutkach działania niezgodnego z omawianymi regułami, lub usterek czy błędów w działaniu programów, a także informacji o możliwości pomyłki. Stylem tym oznakowane są także komunikaty o błędach w działaniu programu generowane przez Joomla!.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach w znacznikach blokudivz atrybutem klasy <div class="ostrzezenie"> lub <div class="warning">, np.:

<div class="ostrzezenie">Tutaj tekst informacji… </div>
Porady, wskazówki

Stylporada(tip) sygnalizuje różne praktyczne, nie zawsze oczywiste rozwiązania, sztuczki lub techniki, które pozwalają łatwiej i efektywniej wykonać jakąś czynność lub zadanie.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="porada"> lub <div class="tip">, np.:

<div class="porada">Tutaj tekst informacji… </div>
Pomoc, odniesienia, źródła

Stylupomoc(help) używamy na oznaczenie informacji o podręcznikach, poradnikach, instrukcjach dostepnych w Sieci lub publikacjach zwartych, a także informacje o wsparciu technicznym użytkowników.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="pomoc"> lub <div class="help">, np.:

<div class="pomoc">Tutaj tekst informacji… </div>
Komunikaty, dodatkowe informacje

Komunikaty systemu o pomyślnym wykonaniu jakiegoś działania oraz różne dodatkowe informacje sygnalizuje stylinfo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Umieść tekst informacji w znacznikach blokudivz atrybutem klasy <div class="info"> albo <div class="notice">, np.:

<div class="info">Tutaj tekst informacji… </div>
Niepoprawne dane, błąd programu

Stylerrorsygnalizuje błędy systemu oraz wprowadzenie niepoprawnych danych (np. w formularzach.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan volutpat libero. Sed fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris arcu risus, imperdiet.
Stosowanie

Styl stosowany jest dynamicznie przez Joomla!

Wyróżnienia w tekście

Nazwy aplikacji, programów

Stylemprogram(application) wyróżniamy nazwy programów, komponentów, modułów, dodatków i innych aplikacji, np.Joomla!, czySpinacz RSS[Newsfeed]. Angielskie nazwy wyróżnione są pochyłą czcionką.

Stosowanie

Umieść nazwę programu w znacznikuspanz atrybutem klasy <span class="program"> lub <span class="application">,, np.:

<span class="program">Program</span>
[<em class="application" lang="en">Name… </em>]
Opcje, etykiety ekranowe

Stylopcja(option) wyróżnia nazwy opcji, przycisków, etykiet ekranowych, itp., np.Zapisz, czyPokaż tytuł[Show Title]. Angielskie nazwy wyróżnione są pochyłą czcionką.

Stosowanie

Umieść nazwę opcji, treść polecenia w znacznikuspanz atrybutem klasy <span class="opcja"> albo <span class="option">, np.:

<span class="opcja">Parametr</span>
[<em class="option" lang="en">Parametters</em>]
Rozjaśnienie

Stylhighlightzastosowany w kodzie Joomla! wyróżniawyszukiwane słowa, frazyw wynikach wyszukiwania. Może być stosowany także w innych sytuacjach, by wskazać w tekście na szczególnie ważne fragmenty.

Stosowanie

Umieść ważną treść w znacznikuspanz atrybutem klasy <span class="highlight">, np.:

<span class="highlight">wyszukiwane słowo</span>

Pliki i katalogi

Stylfilewyróżnia nazwy plików, np.configuration.php.

Styldirectorywyróżnia nazwy katalogów, np./administrator.

Styldownloadsygnalizuje pakiet do pobrania.joomla_1_0_13-pl.zip.

Stosowanie

Umieść nazwę opcji, treść polecenia w znacznikuemz atrybutem klasy <p class="file">, np.:

<em class="file">nazwa pliku… </em>

Umieść nazwę opcji, treść polecenia w znacznikuemz atrybutem klasy <p class="directory">, np.:

<em class="directory">nazwa katalogu… </em>

Umieść nazwę opcji, treść polecenia w znacznikuemz atrybutem klasy <p class="download">, np.:

<em class="download">nazwa pliku… </em>

Inicjały

Formatowanie inicjału - pierwszej litery akapitu lub bloku tekstu.

Stosowanie: umieść pierwszą literę bloku tekstu między znacznikami<span class="dropcap">P</span>.

Ilustracje

Grafika po lewej, tekst po prawej albo grafika po prawej, tekst po lewej

ObrazekObrazektekst 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

Stosowanie

Ilustrację, którą chcemy wyświetlić po lewej stronie tekstu oznaczamy atrybutem klasy:image_left.

<img src="..." class="image_left" />

Ilustrację, którą chcemy wyświetlić po prawej stronie tekstu oznaczamy atrybutem klasy:image_right.

<img src="..." class="right_image" />
Ostatnio zmieniany Pt. 30 Sie 2013
comments powered by Disqus Powrót na górę

Aktualności - spis treści

Kalendarz publikacji

2018
2017
2016
2015
2014
2013
2012
2011
2010
2009
2008
2007
2006
2005
Oglądasz teraz:   StartPowiadomieniaNieprzypisaneTypografia

Twoje konto