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
,contentheading
lub 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:
- Wykonaj najpierw tę czynność.
- Potem wykonaj kolejną.
- Następnie wykonaj czynność trzecią.
- 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:
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:zmienna
lubfunkcja ()
.
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
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z 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
.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z atrybutem klasy <div class="wazne"> lub <div class="important">, np.:
<div class="wazne">Tutaj tekst informacji… </div>
Zapamiętaj!
Stylempamietaj
oznaczone są wiadomości i inne informacje przeznaczone do zapamiętania.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z 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
.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z atrybutem klasy <div class="definicja"> lub <div class="definition">, np.:
<div class="definicja">Tutaj tekst informacji… </div>
Pobierz, pliki do pobrania
Stylpobierz
wskazuje zestawy plików do pobrania lub inne informacje o pakietach instalacyjnych.
Stosowanie
Umieść tekst informacji w znacznikach w znacznikach blokudiv
z 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
.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z 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
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z atrybutem klasy <div class="ciekawostki"> albo <div class="curiosity">, np.:
<div class="ciekawostki">Tutaj tekst informacji… </div>
Ostrzeżenia
Styluostrzezenie
uż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!.
Stosowanie
Umieść tekst informacji w znacznikach w znacznikach blokudiv
z 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.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z 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.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z 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
.
Stosowanie
Umieść tekst informacji w znacznikach blokudiv
z atrybutem klasy <div class="info"> albo <div class="notice">, np.:
<div class="info">Tutaj tekst informacji… </div>
Niepoprawne dane, błąd programu
Stylerror
sygnalizuje błędy systemu oraz wprowadzenie niepoprawnych danych (np. w formularzach.
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 znacznikuspan
z 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 znacznikuspan
z atrybutem klasy <span class="opcja"> albo <span class="option">, np.:
<span class="opcja">Parametr</span> [<em class="option" lang="en">Parametters</em>]
Rozjaśnienie
Stylhighlight
zastosowany 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 znacznikuspan
z atrybutem klasy <span class="highlight">, np.:
<span class="highlight">wyszukiwane słowo</span>
Pliki i katalogi
Stylfile
wyróżnia nazwy plików, np.configuration.php.
Styldirectory
wyróżnia nazwy katalogów, np./administrator.
Styldownload
sygnalizuje pakiet do pobrania.joomla_1_0_13-pl.zip.
Stosowanie
Umieść nazwę opcji, treść polecenia w znacznikuem
z atrybutem klasy <p class="file">, np.:
<em class="file">nazwa pliku… </em>
Umieść nazwę opcji, treść polecenia w znacznikuem
z atrybutem klasy <p class="directory">, np.:
<em class="directory">nazwa katalogu… </em>
Umieść nazwę opcji, treść polecenia w znacznikuem
z 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
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
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" />