Specyfikacja
CSS Document
arkusz stylów dokumentu drukowanego
pomysł i opracowanie
Marcin Paweł Sadowski
wersja 1.2.0

Autor: Marcin Paweł Sadowski (sadowski.marcin@icloud.com)

Skład komputerowy: Marcin Paweł Sadowski

Copyright © 2015-2018 by Marcin Paweł Sadowski

Wszelkie prawa do niniejszego dokumentu zastrzeżone. Rozpowszechnianie możliwe jedynie ze wskazaniem autora.

Aktualnej wersji szukaj na stronie http://cssdoc.sadowski.edu.pl/

Wstęp

Niniejszy dokument stanowi opis specyfikacji „CSS Document”, a jednocześnie przykład jej zastosowania. Specyfikacja ta służy do przygotowywana broszur, książek, prac naukowych i innych dokumentów w postaci plików HTML, wyglądem jak najbardziej zgodnych z regułami profesjonalnego składu takich dokumentów w wersji drukowanej*. Poniżej zostały zaprezentowane elementy języka HTML [HTMLsp], do których zdefiniowano odpowiednie style CSS [CSSspe]*, oraz opisane funkcjonalności uzupełniane narzędziami javascript.

Pamiętaj! Specyfikacja „CSS Document” jest specyfikacją cały czas otwartą, poprawianą i aktualizowaną. Dlatego też przed użyciem jej w docelowym dokumencie sprawdź aktualność wersji.

Wygląd sformatowanego dokumentu (tj. zgodność z prawidłami składu tekstów drukowanych) zależy od wykorzystanej przeglądarki internetowej. Przyczynia się do tego fakt, że niektóre przeglądarki – nawet w najnowszych wersjach – mogą nie mieć zaimplementowanej obsługi wszystkich poleceń CSS zastosowanych w specyfikacji „CSS Document”.

Elementy języka HTML nie opisane w niniejszej specyfikacji formatowane będą zgodnie z predefiniowanymi stylami wykorzystywanej przeglądarki internetowej.

Przygotowanie dokumentu

Pliki do pobrania

Aby stosować specyfikację „CSS Document” w pierwszym kroku należy pobrać ze strony projektu [CSSdoc] wskazane poniżej pliki .js oraz .css:

Dodatkowo udostępnione zostały następujące pliki mogące służyć za żywy przykład implementacji specyfikacji „CSS Document”:

Struktura pliku

Przystępując do tworzenia dokumentu zgodnego ze specyfikacją „CSS Document” należy utworzyć dokument tekstowy z rozszerzeniem .html zawierający poniższy fragment kodu:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <title>… … tytuł dokumentu … …</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="Author" content="… … imię i nazwisko autora … …" />

        <link rel="Stylesheet" type="text/css" href="document.css" />        
        <script type="text/javascript" src="document.js"></script>
        
        <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
                TeX: { equationNumbers: {autoNumber: "all"} } });
        </script>
    </head>
    <body>
    …
    </body>
</html>

przy czym:

  1. dokładna wartość odnośnika href do pliku document.css zależy od lokalizacji tego pliku na dysku względem pliku .html z treścią dokumentu;
  2. linia <script type="text/javascript" src="document.js"></script> odpowiada za uruchomienie skryptu javascript automatyzującego formatowanie dokumentu:
    1. numerowanie nagłówków,
    2. numerowanie ilustracji,
    3. numerowanie tabel,
    4. dopisywanie do odnośników odwołujących się do elementów danego dokumentu numerów tych elementów;
  3. dokładna wartość odnośnika src do pliku document.js zależy od lokalizacji tego pliku na dysku względem pliku .html z treścią dokumentu;
  4. dwa ostatnie polecenia <script odpowiedzialne są za obsługę wzorów matematycznych (podrozdział).

Struktura dokumentu

Strona tytułowa

Stronę tytułową składa się z użyciem następujących bloków div:

<div id="title">tytuł dokumentu</div>
<div id="subtitle">podtytuł</div>
<div id="author">autor</div>
<div id="edition">wersja, miejsce i data wydania etc.</div>

Zawiera ona cztery bloki odpowiedzialne za tytuł i podtytuł dokumentu, wskazanie autora (autorów) dokumentu oraz za informacje o numerze, miejscu i dacie (roku) wydania.

Po stronie tytułowej zaleca się umieszczenie dodatkowego bloku imprint:

<div id="imprint">…</div>

który powoduje utworzenie nowej strony przeznaczonej na stopkę redakcyjną*. Wewnątrz tego bloku mogą zostać umieszczone zarówno akapity jak i listy numerowane lub punktowane, oraz inne elementy.

Rozdziały

Do tytułowania i oddzielania rozdziałów, podrozdziałów i mniejszych partii dokumentu, w ramach „CSS Document” zdefiniowane zostały nagłówki sześciu poziomów: h1, h2, h3, h4, h5 oraz h6. Nagłówki h1 składane są na wydruku począwszy od nowej strony, pozostałe natomiast – w sposób ciągły.

10.5. nagłówek 2

10.5.3. nagłówek 3

10.5.3.1. nagłówek 4

nagłówek 5
nagłówek 6

Włączając javascript opisany w podrozdziale nagłówki od h1 do h4 uzupełniane będą automatycznie numeracją urzędową – jak to widać powyżej tego akapitu.

Nagłówki wstępu, przedmowy, zakończenia, dodatków etc. zazwyczaj nie posiadają numeracji. Aby wstrzymać dodawanie numeracji do nagłówka należy użyć klasy nonumber, np. <h1 class="nonumber">…</h1>. Należy jednak pamiętać, iż nie wstrzymuje to numerowania podrozdziałów! Z tego powodu stosując klasę nonumber do danego nagłówka nadrzędnego, wymagane jest dopisywanie jej do wszystkich nagłówków niższych rzędów.

Akapity

Treść akapitów obejmuje się, zgodnie ze standardem HTML w znaczniki p. Wszystkie akapity, poza pierwszym, posiadają wcięcie pierwszej linii. W sytuacji, kiedy wcięcie akapitowe nie jest pożądane (np. kontynuując akapit po liście wypunktowanej lub numerowanej), znacznik p należy uzupełnić klasą noindent: <p class="noindent">…</p> (patrz przykład w podrozdziale poświęconym listom).

Wszystkie akapity, włącznie z pierwszym, są justowane (wyrównane zarówno do lewej, jak i prawej strony). Aby wymusić wyrównanie tylko do lewej lub prawej strony, albo do środka, należy posłużyć się klasami left, right albo center, jak na przykładzie poniżej:


Ten akapit utworzony jest z wykorzystaniem klasy left, tj. <p class="left">…<p>. Jego zawartość wyrównana jest tylko do lewej krawędzi strony. W ten sposób można nieznacznie wyróżniać zwykłe akapity, ponieważ ich prawe krawędzie poszczególnych wierszy nie tworzą równej linii do prawego marginesu.


Ten akapit utworzony jest z wykorzystaniem klasy right, tj. <p class="right">…<p>. Jego zawartość wyrównana jest tylko do prawej krawędzi strony. W tej sposób mogą być formatowane np. podziękowania lub adnotacje.


Ten akapit utworzony jest z wykorzystaniem klasy center, tj. <p class="center">…<p>. Jego zawartość wyrównana jest do środka strony. Tak sformatowany akapit nadaje się do prezentowania np. stopki technicznej dokumentu, typu: „Copyright © 2017 by …” albo „wersja dokumentu z dn. …”.


Użycie klas left, right albo center nie wyłącza wcięcia akapitowego. Aby poprawić wyrównanie akapitów wyśrodkowanych zaleca się użycie dodakowo klasy noindent, tj. <p class="center noindent">…<p>.

Treść dokumentu domyślnie składana jest w jednej kolumnie. Dla wyróżnienia pewnych fragmentów można złożyć go w dwóch kolumnach równej szerokości. W tym celu należy użyć klasy twocolumns wg. poniższych przykładów. Pamiętaj! Ten styl nie jest interpretowany przez wszystkie przeglądarki. Szczególnie starsze mogą go pomijać i wyświetlać tekst w jednej szpalcie.

Najprościej zastosować klasę twocolumns do pojedynczego akapitu poprzez użycie polecenia <p class="twocolumns">…</p>.

Jeżeli w obrębie tekstu dwukolumnowego chcemy zawrzeć więcej niż jeden akapit, poszczególne akapity oznaczamy zwyczajnie, tj. jako <p> (bez klasy twocolumns), natomiast wszystkie te akapity obejmujemy w znacznik <div class="twocolumns">…</div>, tj.

<div class="twocolumns">
    <p>…</p>
    <p>…</p>
</div>

Wszystkie akapity wewnątrz bloku dwukolumnowego <div class="twocolumns"> posiadają wcięcie pierwszego wiersza.

W układzie dwukolumnowym można składać również inne elementy strony, np.:

Listy

Specyfikacja „CSS Document” posiada zdefiniowane style list: wypunktowanej ul, numerowanej ol oraz definicyjnej dl.

Lista wypunktowana

Lista wypunkowana prezentuje się jak poniżej:

<ul>
	<li>…</li>
	<li>…</li>
	<li>…</li>
</ul>

Lista numerowana

Listę numerowaną tworzymy za pomocą poleceń:

<ol>
	<li>…</li>
	<li>…</li>
	<li>…</li>
</ol>
  1. punkt
  2. punkt
    1. podpunkt
      1. pod-podpunkt
      2. pod-podpunkt
        1. pod-pod-podpunkt
        2. pod-pod-podpunkt
        3. pod-pod-podpunkt
      3. pod-podpunkt
    2. podpunkt
    3. podpunkt
    4. podpunkt
  3. punkt
  4. punkt
  5. punkt

Lista definicyjna

Dodatkowo można tworzyć listy definicyjne:

<dl>
    <dt>hasło</dt>
        <dd>definicja</dd>
    <dt>hasło</dt>
        <dd>definicja</dd>
</dl>
hasło 1
jakiś bardzo długi i rozbudowany opis hasła 1, który zapewne nie zmieści się w jednej linijce i zostanie przełamany do następnej linijki
hasło 2
opis hasła 2

Ilustracje

Aby umieścić w dokumencie ilustrację z podpisem stosujemy następującą sekwencję poleceń:

<p class="image" id="rysKotek">
    <img src="… … …" /><br />
    <span class="title">opis rysunku</span>
</p>


Podpis do rysunku

Włączając javascript opisany w podrozdziale wszystkie rysunki uzyskują automatycznie numerację urzędową (analogiczną do numeracji nagłówków), z przedrostkiem „Rys.”. Numeracja jest ciągła w obrębie rozdziału (nagłówka h1).

Identyfikator id (w przykładzie „rysKotek”) służy do odwołania się wewnątrz dokumentu do danej ilustracji – patrz podrozdział.

Ilustracje można również zamieszczać bezpośrednio w tekście, np. – wówczas używamy jedynie znacznika <img src="…" />.

Tabele

Specyfikacja „CSS Document” zawiera predefiniowane style do formatowania tabel table: wszystkie tabele rozciągane są do pełnej szerokości strony, posiadają naprzemiennie kolorowane wiersze, nagłówek oddzielony jest wyraźniejszą linią, a komórki uzyskują delikatne obramowanie. Nagłówki kolumn th składane są z wyróżnieniem tła, pogrubieniem czcionki oraz wyśrodkowaniem tekstu. Pozostałe komórki td – z zawartością wyrównaną do lewej.

Przykładowa tabela
pierwsza kolumna druga kolumna
zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki zawartość komórki
zawartość komórki zawartość komórki
zawartość komórki zawartość komórki

Aby wymusić wyrównanie tekstu do lewej lub do prawej krawędzi komórki, albo do środka jej szerokości, znacznik td należy uzupełnić o klasę left, right albo center, tj. np. <td class="center">… … …</td>.

Przykład wyrównywania zawartości komórek tabeli
wyrównanie do lewej wyrównanie do środka wyrównanie do prawej
tekst inny tekst 1600 €
tekst 12 grudnia 2016 12 €
tekst inny tekst 1 €

W celu nadania tabeli opisu wystarczy w obrębie znacznika table dodać polecenie <caption>…</caption>. Dodatkowo włączając javascript opisany w podrozdziale wszystkie tabele uzyskują automatyczną numerację urzędową (analogiczną do numeracji nagłówków), z przedrostkiem „Tabela”. Numeracja ta jest ciągła w obrębie rozdziału (nagłówka h1).

Dodatkowy identyfikator id dla znacznika table służy do odwołania się wewnątrz dokumentu do danej tabeli – patrz podrozdział.

Zbiorczo, opisane powyżej możliwości formatowania tabel przedstawia poniższy kod źródłowy:

<table id="tblPrzyklad">
    <caption>Przykład wyrównywania zawartości komórek tabeli</caption>
    <thead>
        <tr>
            <th class="left">wyrównanie do lewej</th>
            <th class="center">wyrównanie do środka</th>
            <th class="right">wyrównanie do prawej</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="left">tekst</td>
            <td class="center">inny tekst</td>
            <td class="right">1600 €</td>
        </tr>
        <tr>
            <td class="left">tekst</td>
            <td class="center">12 grudnia 2016</td>
            <td class="right">12 €</td>
        </tr>
        <tr>
            <td class="left">tekst</td>
            <td class="center">inny tekst</td>
            <td class="right">1 €</td>
        </tr>
    </tbody>
</table>

Odnośniki

Odnośniki do dokumentów zewnętrznych

Odnośniki do dokumentów zewnętrznych (plików, stron WWW, etc.) tworzymy z użyciem standardowego polecenia HTML a.

<a href="www.google.pl">Google</a>

Odnośniki do elementów w danym dokumencie

Odwołania do elementów w danym dokumencie tworzymy zgodnie z regułami języka HTML:

W specyfikacji „CSS Document”, dla odnośników wskazujących na elementy w danym dokumencie, stworzona została klasa ref. Dodanie jej do odnośnika a (tj. użycie polecenia <a href="#hNagNumer" class="ref">rozdziale</a>) razem z użyciem javascript opisanego w podrozdziale, włącza dodatkową numerację referencyjną. Na przykład otrzymujemy wówczas odnośniki typu: „szczegóły opisane są w podrozdziale”, „jest to przedstawione na rysunku” albo „wartości współczynników zamieszczono w tabeli”.

Ostatecznie:

<h1 id="hNagNumer">Rozdział drugi</h1>
…
…
<a href="#hNagNumer" class="ref">rozdziale</a>

przy czym treść odnośnika (w przykładzie słowo „rozdziale”) nie jest zmieniane podczas dodawania numeracji referencyjnej, tak więc należy ją dostosować do kontekstu zdania podając właściwą nazwę wskazywanego obiektu (rozdział, podrozdział, rysunek, tabela), oraz stosując właściwą jego odmianę (rozdział, rozdziału, rozdziale).

Stopka redakcyjna może zawierać: pełną listę autorów, edytorów, redaktorów, ilustratorów i innych osób pracujących nad dokumentem; źródła ilustracji; informację o użytym oprogramowaniu komputerowym; notę typu „Copyright © 2018 by …”; notkę o zastrzeżeniu praw autorskich itp. [StoRed]

Formatowanie tekstu

Formatowania „w tekście”

Do wyróżnienia fragmentu tekstu w dokumencie (jedno słowo lub więcej słów wewnątrz bloku akapitu p) służą polecenia wymienione w tabeli.

Polecenia formatowania tekstu
polecenie efekt działania przykład zastosowania
zwykły tekst normalny tekst akapitu
<em>…</em> kursywa delikatne wyróżnienie
<strong>…</strong> pogrubienie silne wyróżnienie
<code>…</code> pismo maszynowe kod źródłowy, polecenie komputerowe, etc.
<tt>…</tt> pismo maszynowe kod źródłowy, polecenie komputerowe, etc.
<span class="s">…</span> przekreślenie wskazanie błędu, etc.
<span class="u">…</span> podkreślenie oznaczenie odnośnika internetowego; wyróżnienie hasła indeksu
<span class="w">…</span> rozstrzelenie wskazanie na przeczytanie tekstu ze zwiększoną uwagą
<mark>…</mark> zaznaczenie fragment, na który warto zwrócić uwagę*
<del>…</del> wykreślenie fragment wykreślony względem poprzedniej wersji dokumentu*
<ins>…</ins> wstawienie fragment dopisany względem poprzedniej wersji dokumentu*

Formatowanie bloków tekstu

Cytaty

Cytaty oznaczamy znacznikiem blockquote (z pominięciem obejmującego go p). Taki fragment wyróżniony jest większym marginesem z lewej strony oraz zredukowaną interlinią. Ponadto jest odsunięty z góry i z dołu od tekstu właściwego dokumentu.

<blockquote>Taki cytat zawiera jeden, długi akapit, jednakże bez dodatkowego wcięcia pierwszego wiersza. Wewnątrz cytowanego tekstu można stosować wyróżnienienia, np. <em>kursywę</em> lub <strong>pogrubienie</strong>. Tekst bloku cytowanego jest justowana, czyli wyrównana do lewej i prawej krawędzi strony.</blockquote>
Taki cytat zawiera jeden, długi akapit, jednakże bez dodatkowego wcięcia pierwszego wiersza. Wewnątrz cytowanego tekstu można stosować wyróżnienienia, np. kursywę lub pogrubienie. Tekst bloku cytowanego jest justowana, czyli wyrównana do lewej i prawej krawędzi strony.

W razie potrzeby zacytowania więcej niż jednego akapitu, listy (wypunktowanej lub numerowanej) albo ilustracji, można odpowiednie bloki p, ol, ul albo definiujące ilustrację z podpisem (opisane w rozdziale) objąć wspólnie blokiem blockquote:

<blockquote>
    <p>…</p>
    <p>…</p>
    <ul>
        <li>…</li>
        <li>…</li>
    </ul>
    …
    …
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec accumsan arcu. Aliquam hendrerit posuere congue. Pellentesque vitae luctus lorem, eget laoreet turpis. Suspendisse sodales lacus massa, non ullamcorper tortor rhoncus id. Vestibulum auctor sodales nulla, vitae dapibus ipsum gravida at.

Nam viverra lorem mauris, id cursus arcu malesuada non. Praesent lobortis quam non magna accumsan suscipit. Maecenas gravida euismod nisl et aliquam. Nam rutrum dictum ornare.

Ut luctus lacus non dolor hendrerit molestie. Morbi maximus in urna id convallis. Nulla at orci quis elit maximus vestibulum eu quis felis.


Podpis do rysunku

Vestibulum nisi purus, ullamcorper ac lacus at, cursus mollis neque. Nam congue placerat erat, vitae euismod velit vulputate id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Możliwe jest również zagnieżdżanie cytowań na kształt popularnych na formach dyskusyjnych i w mediach społecznościowych „komentarzy do komentarzy”. Należy jednak pamiętać, że każde dodatkowe, „wewnętrzne” cytowanie przesuwa lewą krawędź tekstu coraz to bardziej w prawo. Przy zbyt dużej liczbie zagnieżdżeń szerokość kolumny tekstu może stać się zbyt mała do poprawnego wyświetlania treści.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec accumsan arcu. Aliquam hendrerit posuere congue. Pellentesque vitae luctus lorem, eget laoreet turpis. Suspendisse sodales lacus massa, non ullamcorper tortor rhoncus id. Vestibulum auctor sodales nulla, vitae dapibus ipsum gravida at.

Nam viverra lorem mauris, id cursus arcu malesuada non. Praesent lobortis quam non magna accumsan suscipit. Maecenas gravida euismod nisl et aliquam. Nam rutrum dictum ornare.

Vestibulum nisi purus, ullamcorper ac lacus at, cursus mollis neque. Nam congue placerat erat, vitae euismod velit vulputate id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut luctus lacus non dolor hendrerit molestie. Morbi maximus in urna id convallis. Nulla at orci quis elit maximus vestibulum eu quis felis.

Kod źródłowy

Aby umieścić dłuższy (np. wielolinijkowy) kod źródłowy wewnątrz dokumentu obejmujemy go wewnątrz blok <pre> … … … </pre> zgodnie z zasadami języka HTML [HTMLsp]*.

<pre>… … …
…
…
… … …</pre>

Taki blok składany jest czcionką o stałej szerokości oraz wyróżniony szarym tłem i ramką.

Krótkie fragmenty kodu można umieszczać wewnątrz akapitów p z użyciem pisma maszynowego – patrz podrozdział.

Wyróżnienia mark, del oraz ins dodają lub zmienią tło pod tekstem. Jeżeli podczas drukowania strony w przeglądarce internetowej zostanie wyłączone drukowania teł, polecenia te stracą (całkowicie lub częściowo) swoje właściwości.

W szczególności należy pamiętać o zamianie wybranych znaków na odpowiednie encje [HTMLen]. Przede wszystkim dotyczy to symboli „<” na &lt;, „>” na &gt;. Jeśli użyjesz znaku mniejszości „<” lub większości „>”, przeglądarka może pomieszać je z tagami języka HTML, a przez to niewłaściwie wyświetlić dokument.

Dodatki

Przypisy

Przypisy boczne („na marginesie”)

Wewnątrz tekstu ciągłego, akapitu, można wstawić przypis, który będzie wyświetlany mniejszą czcionką, w ramce, przy prawym marginesie stronyTo jest treść przypisu bocznego. Przypis taki ma ustaloną szerokość i może zawierać jedynie tekst ciągły – pojedynczy akapit.. Przypis taki wstawiamy obejmując treść przypisu w znaczniki <span class="rightnote">…</span> (fragment ten powinien znajdować się w obrębie akapitu p). Dodatkowo można w treści akapitu wyróżnić słowo (lub większy fragment), którego przypis dotyczy, obejmując to słowo (ten fragment) w znaczniki <span class="w">…</span>. Wyróżnione słowo (fragment) uzyska wówczas rozstrzelenie.

<p>… … … <span class="w">słowo, do którego odnosi się przypis</span><span class="rightnote">treść przypisu</span> … … …</p>

Wyróżnianie słowa, do którego odnosi się przypis można pominąć. Można też zastosować inne wyróżnienie (np. pogrubienie zamiast rozstrzelenia).

Przypisy dolne (na końcu rozdziału)

Przypis dolny składa się z dwóch elementów: samego przypisu oraz odnośnika w tekście. Przypisy dolne tworzy się jako akapity p klasy footnote objęte blokiem div klasy footnotes, umieszczone na końcu rozdziału, tj. tuż przed znacznikiem h1 rozpoczynającym następny rozdział:

<div class="footnotes">
    <p class="footnote" id="przypis1">To jest treść przypisu dolnego.</p>
        
    <p class="footnote" id="przypis2">To jest jakiś inny przypis dolny.</p>
</div>

przy czym identyfikatory id muszą być unikatowe względem wszystkich innych identyfikatorów w obrębie całego dokumentu.

W tekście, w miejscu w którym ma nastąpić odwołanie do przypisu dolnego umieszcza się polecenie:

<a href="#przypis1" class="fnref">*</a>

gdzie adres odnośnika a musi wskazywać na identyfikator odpowiedniego przypisu dolnego (poprzedzony znakiem #).

Włączając javascript opisany w podrozdziale przypisy dolne uzyskują numerację (oddzielną dla każdego rozdziału h1), a w miejscach wskazanych linkiem z klasą fnref wstawiany jest właściwy numer przypisu, np. „…jakiś tekst z przypisem dolnym* a tutaj, nieco dalej kolejny przypis dolny*”.

Literatura, bibliografia

Tworzenie bibliografii rozpoczyna się od utworzenia rozdziału (zazwyczaj nienumerowanego, tj. z klasą nonumber) w skład którego będą wchodziły poszczególne pozycje bibliograficzne. Pojedyncza pozycja bibliograficzna jest akapitem p z klasą bib i unikatowym identyfikatorem:

<h1 class="nonumber">Bibliografia</h1>
        
<p class="bib" id="bibliografia1"><span class="bibname">[nazwa1]</span> <em>Tytuł książki</em>, autorzy, wydanie</p>

<p class="bib" id="bibliografia2"><span class="bibname">[nazwa2]</span> <em>Tytuł strony WWW</em> <a href="…">http://…</a></p>

przy czym identyfikatory id muszą być unikatowe względem wszystkich innych identyfikatorów w obrębie całego dokumentu.

Następnie, w tekście, w miejscu w którym wymagane jest odwołanie do pozycji bibliograficznej stosuje się polecenie

<a href="#bibliografia1" class="bibref">[nazwa1]</a>

gdzie adres odnośnika a musi wskazywać na identyfikator id odpowiedniej pozycji bibliograficznej (poprzedzony znakiem #). Nazwy w nawiasach kwadratowych, np. [nazwa1], służą odnalezieniu pozycji bibliograficznej i mogą być tworzone w dowolnym formacie.

Włączając javascript opisany w podrozdziale pozycje bibliograficzne uzyskują numerację w postaci […] zamiast nazw w nawiasach kwadratowych, a w miejscach wskazanych linkiem z klasą bibref wstawiany jest ten numer (również w formacie […] zamiast nazwy w nawiasach kwadratowych), np. „…najnowszą wersję specyfikacji «CSS Document» znajdziesz na stronie [CSSdoc]”.

W związku z powyższym pozycje bibliografii powinny być posortowane:

Spis treści

Tworzenie spisu treści ograniczone zostało do minumum: W miejscu, w którym ma zostać wstawiony wpis treści należy umieścić polecenie:

<div id="toc"></div>

a następnie włączyć javascript.

Spowoduje to zaprezentowanie w formie dwukolumnowej wszystkich nagłówków od poziomu 1. (h1) do poziomu 4. (h4) włączenie. Każda pozycja spisu treści będzie linkiem pozwalającym szybko przejść do właściwego fragmentu dokumentu**.

W razie potrzeby można wyłączyć dodawanie wybranych nagłówków do spisu treści. Służy do tego klasa notoc dodawana do tego nagłówka:

<h1 class="notoc">nagłówek, który nie zostanie dodany do spisu treści</h1>

Wzory matematyczne

W celu poprawnego wyświetlania w dokumencie wzorów należy zastosować bibliotekę MathJax [MathJa] zgodnie z tym, co zostało zaprezentowane w podrozdziale.

Wzory liniowe, tj. zawarte w ciągu tekstu akapitu zamieszczamy w notacji TeX obejmując je w $… … …$ albo \(… … …\). Dla przykładu, aby uzyskać wzór $y = ax^2 + bx + c$ należy użyć polecenia

$y = ax^2 + bx + c$

Wzory blokowe tworzymy w oddzielnych akapitach p obejmując same wzory w $$… … …$$

<p>$$f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz\label{eq1}$$</p>

co da następujący wzór

$$f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz\label{eq1}$$

albo obejmując w \[… … …\]

<p>\[\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^N (x_i - \mu)^2}\label{eq2}\]</p>

co da taki wzór

\[\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^N (x_i - \mu)^2}\label{eq2}\]

W powyższych przykładach wzory zostały uzupełnione o etykiety \label{…}. Dzięki nim można odwoływać się w tekście do numerów tych wzorów. Odwołanie takie powstaje poprzez umieszczenie w treści akapitu polecenia \eqref{…} z nazwą wpisaną w stosowną etykietę, np. stosując polecenia

…podstawiając równanie \eqref{eq1} do \eqref{eq2} dowodzimy, że…

uzyskamy taki fragment „…podstawiając równanie \eqref{eq1} do \eqref{eq2} dowidzimy, że…”

Linia pozioma

W celu oddzielenia fragmentów tekstu (lub wyróżnienia takiego tekstu) można wstawić linię poziomą. Do tego służy znacznik <hr />.


Przygotowana została również bardziej ozdobna wersja linii poziomej. Uzyskuje się ją poleceniem <hr class="graph" />. Jednak bazuje ona na modyfikacji tła elementu strony (dokumentu), więc nie zostanie wydrukowana jeżeli wyłączone jest drukowanie teł.


Oba, powyższe polecenia tworzenia linii poziomej nie posiadają dodatkowych opcji.

To jest treść przypisu dolnego, umieszczonego na końcu rozdziału lub podrozdziału niższego poziomu. Przypis taki składany jest mniejszą czionką niż tekst zwykłego akapitu. Przypis dolny może być obecnie tylko jednym akapitem p ewentualnie z podziałem linii poleceniem <br />
…tak jak w tym miejscu.

To jest jakiś inny przypis dolny.

Dodatkowo, nagłówki od h1 do h4 uzyskują funkcjonalność w postaci strzałki do góry „↑”, która jest linkiem powrotnym do spisu treści. Strzałka ta pojawia się przy prawym marginesie, na wysokości nagłówka, po wskazaniu go kursorem myszki. Strzałka ta nie jest uwidaczniana na wydruku.

Dodatkowo, nagłówki od h1 do h4 uzyskują funkcjonalność w postaci znaku „#”, który jest linkiem do tego nagłówka i pozwala na zapisanie zakładki do tego nagłówka. Znak ten pojawia po wskazaniu nagłówka kursorem myszki i nie jest uwidaczniany na wydruku.

Bibliografia

[CSSdoc] CSS Document (on-line, dostęp 24.2.2018) http://cssdoc.sadowski.edu.pl/

[CSSspe] CSS Specification (on-line, dostęp 2.3.2018) https://www.w3.org/Style/CSS/specs.en.html

[HTMLsp] HTML 4.01 Specification (on-line, dostęp 2.3.2018) https://www.w3.org/TR/html401/

[HTMLen] HTML Entities (on-line, dostęp 5.3.2018) https://www.w3schools.com/html/html_entities.asp

[MathJa] MathJax (on-line, dostęp 24.2.2018) https://www.mathjax.org

[StoRed] Stopka redakcyjna, hasło w serwisie Wikipedia (on-line, dostęp 24.2.2018) https://pl.wikipedia.org/wiki/Stopka_redakcyjna

Lista zmian