Jak pisać


Jak pisać – standaryzacja tekstów w Czytelni.

  1. Wstęp
  2. Pisanie tekstu
  3. Wstawianie odnośników
  4. Wstawianie grafiki
  5. Dodatkowe klasy

1. Wstęp

  • O poradniku:
    Niniejszy poradnik ma za zadanie przybliżyć standardy techniczne, jakie mają spełniać teksty zamieszczane w Czytelni. Tak jak każdy inny poważny serwis chcemy, aby wszystkie artykuły tworzyły pewną całość i nie różniły się bardzo pod względem wyglądu.

  • Dodawanie nowego wpisu w Czytelni:
    Aby móc dodać nowy artykuł należy się wcześniej zarejestrować i zalogować. Dzięki temu uzyskamy dostęp do panelu administracyjnego strony, gdzie w menu Publikuj dostępna będzie opcja Wpis.

    Na stronie edytora jest wiele zwijanych zakładek z dodatkowymi opcjami, jednak na początku istotne są jedynie 2 z nich – Tagi (tutaj należy podać słowa kluczowe dla danego artykułu) oraz Kategorie (tu należy wybrać odpowiednią kategorię dla pisanego artykułu). Domyślny status artykułu to Nieopublikowany (osoby z uprawnieniami wyższymi niż podstawowe mogą także skorzystać z opcji Zachowaj ten wpis jako prywatny spowoduje, że wpis będzie widoczny jedynie dla osoby, która go napisała oraz administratorów Czytelni; niezaznaczenie tej opcji pozwoli wszystkim osobom uprawnionym zobaczyć, edytować (za wiedzą i zgodą autora) oraz ewentualnie opublikować tekst).

    Ukończone artykuły należy zgłosić do opinii odpowiednim przyciskiem (Zgłoś do opinii) – po sprawdzeniu i wprowadzeniu ewentualnych poprawek przez uprawnione osoby wpisy zostaną opublikowane*.

    Artykuły nieukończone, bądź takie, do ukończenia których autor potrzebuje pomocy powinny zawierać stosowną informację w tytule, np. dopisek (…potrzebna pomoc…).

    * – Ostateczną decyzję, czy dany tekst zostanie opublikowany, czy też nie, podejmują administratorzy Czytelni.

  • Niezbędne podstawy języka XHTML:
    Techniczna konstrukcja każdego artykułu opiera się o podstawowe elementy języka XHTML, dlatego konieczne jest wyjaśnienie kilku istotnych zasad:

    Teksty piszemy tak, jak w każdym edytorze tekstu, dopiero, gdy konieczne jest sformatowanie tekstu, wstawienie odnośnika, grafiki itp. używamy odpowiednich znaczników (inaczej: elementów, tagów), których konstrukcja wygląda następująco:

    <zzz>tekst, który będzie pod wpływem znacznika zzz</zzz>

    Każdy element ma swój początek (tutaj: <zzz>) i koniec (tutaj: </zzz>).
    Jeśli znacznik składa się tylko z jednej części, wtedy jego konstrukcja wygląda następująco:

    <yyy />

    Elementy języka XHTML mogą mieć różne atrybuty:

    <zzz atrybut="wartość">jakiś tekst lub obiekt</zzz>

    Aby uprościć niektóre czynności stworzyliśmy kilka klas, zawierających różne ustawienia (o szczegółach później). Do ich zastosowania wykorzystuje się atrybut class. Czasami może zajść potrzeba użycia kilku klas na raz, wtedy w jednym atrybucie wystarczy podać ich nazwy oddzielone spacją:

    <zzz class="klasa1 klasa2">jakiś tekst lub obiekt</zzz>

    Ze względów bezpieczeństwa niektóre dodatkowe elementy (np. span) i atrybuty (jak class, czy style) mogą dodawać jedynie osoby z odpowiednimi uprawnieniami. W razie potrzeby należy zgłosić się do jednego z administratorów, bądź w treści tekstu odpowiednio opisać co i jak powinno zostać ustawione (przykładowo można zamienić nawiasy trójkątne <> przy znacznikach na kwadratowe [], wtedy osoba sprawdzająca tekst wprowadzi odpowiednie zmiany).

    Bez dodatkowych uprawnień, po zapisaniu dokumentu, skrypt automatycznie usunie atrybuty (np. style, class itp.), bądź całe znaczniki (np. span)!
    Dotyczy to także sytuacji, gdy osoba z większymi uprawnieniami wprowadzi zmiany, a użytkownik z mniejszymi uprawnieniami ponownie zapisze artykuł!

    Poszczególne elementy można zawierać w sobie (jeden w drugim), jednak nie wolno ich krzyżować ze sobą!

    Taki zapis jest niepoprawny:

    <xxx>tekst <yyy>tutaj inny tekst</xxx></yyy>

    Prawidłowo:

    <xxx>tekst <yyy>tutaj inny tekst</yyy></xxx>

    To są podstawy, które pomogą w zrozumieniu kolejnych rozdziałów tego poradnika.

    Większość opisanych w tym poradniku rzeczy można osiągnąć nie wpisując z klawiatury ani kawałka kodu. Edytor zaopatrzony jest w odpowiednie przyciski, które działają w sposób podobny, jak na forach internetowych – wystarczy zaznaczyć tekst i kliknąć guzik odpowiedzialny za dane formatowanie – odpowiednie tagi zostaną dodane automatycznie.

2. Pisanie tekstu

  • Znacznik p prawdę Ci powie:
    Każdy wolny tekst, wstawiamy w znacznik p:

    <p>Przykładowy tekst na stronie</p>
    Efekt:

    Przykładowy tekst na stronie

    Dzięki temu łatwiej zarządzać treścią. Kiedy chcemy zrobić jedno-liniowy odstęp (jedna linia pusta), wystarczy:

    <p>Przykładowy tekst, po którym ma być 1 linia wolna odstępu</p>
    
    <p>Dalszy ciąg tekstu, nowy akapit, przed którym jest 1 linia wolna odstępu</p>
    Efekt:

    Przykładowy tekst, po którym ma być 1 linia wolna odstępu

    Dalszy ciąg tekstu, nowy akapit, przed którym jest 1 linia wolna odstępu

    lub

    <p>Przykładowy tekst, po którym ma być 1 linia odstępu
    
    Dalszy ciąg tekstu, nowy akapit, przed którym jest 1 linia odstępu</p>
    Efekt:

    Przykładowy tekst, po którym ma być 1 linia wolna odstępu

    Dalszy ciąg tekstu, nowy akapit, przed którym jest 1 linia wolna odstępu

    Jeśli tekst ma należeć do jednego akapitu, ale przydałoby się zacząć zdanie od nowej linii, sprawę załatwia jeden enter:

    <p>... tutaj kończy się jakieś zdanie.
    Zaczynamy kolejne od nowej linii...</p>
    Efekt:

    … tutaj kończy się jakieś zdanie.
    Zaczynamy kolejne od nowej linii…

    WordPress, na którym bazuje Czytelnia, automatycznie uzupełnia znaczniki p, jednak nie zawsze radzi sobie z tym dobrze. Jeśli dany artykuł nie jest zbyt skomplikowany (nie zawiera wielu elementów formatujących) można pominąć tagi p, w przeciwnym wypadku należy je ręcznie wstawić w odpowiednie miejsca – tak, jak jest to pokazane w przykładach na tej stronie.

  • Pogrub, podkreśl, pochyl, przekreśl i pokoloruj
    Zdarza się, że chcemy wyróżnić jakiś tekst.

    <p>Dowolne litery, wyrazy, zdania możemy <strong>pogrubić</strong>, <em>pochylić</em>, <ins>podkreślić</ins> oraz <del>przekreślić</del>.</p>
    Efekt:

    Dowolne litery, wyrazy, zdania możemy pogrubić, pochylić, podkreślić oraz przekreślić.

    Zmiana koloru też jest możliwa – wykorzystamy do tego znacznik span i odpowidnią klasę:

    <p>Czarny tekst <span class="czerwony">teraz czerwony</span>, znów czarny.</p>
    Efekt:

    Czarny tekst teraz czerwony, znów czarny.

    Przygotowaliśmy 10 klas z podstawowymi kolorami:

    class="bialy"

    class="brazowy"

    class="czerwony"

    class="fioletowy"

    class="granatowy"

    class="niebieski"

    class="rozowy"

    class="szary"

    class="zielony"

    class="zolty"

    Klasy z kolorami można zastosować również do innych elementów, takich jak p, strong, em, ins, del itp.

    Bardziej wyszukane kolory można otrzymać poprzez edycję stylu i podanie koloru w postaci szesnastkowej (ten sposób przeznaczony jest dla bardziej doświadczonych użytkowników):

    <p>Czarny tekst <span style="color: #80AAFF">teraz błękitny</span>, znów czarny.</p>
    Efekt:

    Czarny tekst teraz błękitny, znów czarny.

    Ze względów bezpieczeństwa niektóre dodatkowe elementy (np. span) i atrybuty (jak class, czy style) mogą dodawać jedynie osoby z odpowiednimi uprawnieniami. W razie potrzeby należy zgłosić się do jednego z administratorów, bądź w treści tekstu odpowiednio opisać co i jak powinno zostać ustawione (przykładowo można zamienić nawiasy trójkątne <> przy znacznikach na kwadratowe [], wtedy osoba sprawdzająca tekst wprowadzi odpowiednie zmiany).

    Bez dodatkowych uprawnień, po zapisaniu dokumentu, skrypt automatycznie usunie atrybuty (np. style, class itp.), bądź całe znaczniki (np. span)!
    Dotyczy to także sytuacji, gdy osoba z większymi uprawnieniami wprowadzi zmiany, a użytkownik z mniejszymi uprawnieniami ponownie zapisze artykuł!

  • Punktujemy:
    Jeśli trzeba jakiś tekst wypunktować, należy zrobić to używając odpowiednich znaczników. Naciskamy na to szczególnie mocno w przypadku listingu przydatnych stron. Do punktowania służą głównie znaczniki ul oraz ol i ich właśnie się trzymajmy. Jeżeli coś ma być wypunktowane bez hierarchii/chronologii, po prostu równo w jednej linii, korzystamy z ul:

    <p>A teraz, na zakończenie, przydatne linki:</p>
    
    <ul>
      <li>Pierwszy link</li>
      <li>Drugi link</li>
      <li>Trzeci link</li>
      <li>...itd.</li>
    </ul>
    Efekt:

    A teraz, na zakończenie, przydatne linki:

    • Pierwszy link
    • Drugi link
    • Trzeci link
    • …itd.

    W przypadku chęci zrobienia podlisty, wstawiamy ją tak:

    <ul>
      <li>Pierwszy link
        <ul>
          <li>Podlink jeden</li>
          <li>Podlink drugi</li>
        </ul>
      </li>
      <li>...itd.</li>
    </ul>
    Efekt:
    • Pierwszy link
      • Podlink jeden
      • Podlink drugi
    • …itd.

    Kiedy lista ma być punktowana liczbami, od 1 do ileśtam, używamy ol:

    <ol>
      <li>Pierwszy link</li>
      <li>Drugi link</li>
      <li>Trzeci link</li>
      <li>...itd.</li>
    </ol>
    Efekt:
    1. Pierwszy link
    2. Drugi link
    3. Trzeci link
    4. …itd.

    Również tutaj, na tej samej zasadzie jak w przypadku ul, działają podlisty.

  • Kiedy co? Czyli quote, blockquote oraz code i pre:
    Znacznik blockqute, jak sama nazwa wskazuje, służy do cytowania. Chodzi tutaj o przytoczenie jakiejś długiej treści, np.:

    <p>...tekst...</p>
    
    <blockquote>Dłuższy cytat, np. fragment czyjejś wypowiedzi, jakiejś strony itp.</blockquote>
    
    <p>...tekst...</p>
    Efekt:

    …tekst…

    Dłuższy cytat, np. fragment czyjejś wypowiedzi, jakiejś strony itp.

    …tekst…

    Jeżeli cytujemy jakieś krótkie zdanie, tudzież pojedyncze słowo, używamy w tym celu quote, którego znacznik to zwykłe q. Przykład:

    <p>I ten <q>normalny</q> system zawiesił się...</p>
    Efekt:

    I ten normalny system zawiesił się…

    Do wstawiania poleceń wprowadzanych w konsoli (np. apt-get install nazwa_pakietu), używamy tylko i wyłącznie code:

    <p>...tekst...</p>
    
    <code>sudo apt-get install pakiet</code>
    
    <p>...tekst...</p>
    Efekt:

    …tekst…

    sudo apt-get install pakiet

    …tekst…

    Gdy trzeba wstawić kilka linii – wstawiamy pod sobą kilka znaczników code:

    <p>...tekst...</p>
    
    <code>sudo apt-get update</code>
    <code>sudo apt-get upgrade</code>
    
    <p>...tekst...</p>
    Efekt:

    …tekst…

    sudo apt-get update
    sudo apt-get upgrade

    …tekst…

    lub w jednym znaczniku kolejne linie rozdzielamy enterem:

    <p>...tekst...</p>
    
    <code>sudo apt-get update
    sudo apt-get upgrade</code>
    
    <p>...tekst...</p>
    Efekt:

    …tekst…

    sudo apt-get update
    sudo apt-get upgrade

    …tekst…

    Jako przykład poprawnego zastosowania blockquote oraz code może posłużyć tłumaczenie apt-file – poszukiwacz zaginionych paczek.

    W momencie, gdy przychodzi potrzeba wstawienia kodu źródłowego aplikacji, skryptu, wyników poleceń uruchamianych w konsoli itp. – używamy znacznika pre:

    <p>...teskt...</p>
    
    <pre>#!/bin/bash
    echo 'Hello world!'</pre>
    
    <p>...tekst...</p>
    Efekt:

    …teskt…

    #!/bin/bash
    echo 'Hello world!'

    …tekst…

  • Akapit wyróżniał będziesz:
    Zdarza się, że pisany tekst chcemy podzielić na części. Niekoniecznie muszą one być numerowane etc. Do tego wykorzystywać będziemy znacznik h4. Przykład:

    <p>tekst kończący np. pierwszy akapit</p>
    
    <h4>Tytuł następnego akapitu</h4>
    
    <p>treść następnego akapitu</p>
    Efekt:

    tekst kończący np. pierwszy akapit

    Tytuł następnego akapitu

    treść następnego akapitu

    Za przykład poprawnego użycia może posłużyć artykuł gnupg: Strażnik prywatności.

  • Jak podzielić długą treść?:
    Skrypt Czytelni nie dzieli długiej treści automatycznie – człowiek robi to lepiej, dlatego autor ma obowiązek wybrać miejsce, gdzie pojawi się …czytaj całość. Ponadto niektóre teksty w ogóle nie muszą być dzielone (tyczy się to wyłącznie krótkich Aktualności). Najlepszym zwyczajem jest napisać kilku zdaniowy wstęp – to rozwiązuje problem w zupełności. Jeśli jednak wstępu nie ma, tekst należy podzielić równo między dwoma akapitami. ZAWSZE! Przykład:

    <p>Tekst wprowadzający - skąd się wziął pomysł na napisanie całego artykułu, o czym on w ogóle jest, czego dowie się czytelnik itp.</p>
    
    <!--more-->
    <p>Długa treść</p>
  • O indeksie górnym i dolnym:
    Czasem może się zdarzyć, że potrzebujemy dodać jakiś przypis, do którego najwygodniej byłoby się posłużyć indeksem górnym. Aby go poprawnie wstawić, wystarczy zastosować znacznik sup:

    <p>Jakaś treść, do której chcemy zrobić przypis <sup>(1)</sup></p>
    Efekt:

    Jakaś treść, do której chcemy zrobić przypis (1)

    Co zaś, gdy chcemy napisać H2O z indeksem dolnym? Nic prostszego, wystarczy posłużyć się znacznikiem sub:

    <p>Mówię o H<sub>2</sub>O</p>
    Efekt:

    Mówię o H2O

3. Wstawianie odnośników

Do wstawiania odnośników służy znacznik a:

<a href="http://jakis.link.do.jakiejs.strony" title="Nazwa Strony">tekst lub obiekt, który będzie linkiem</a>
Efekt:

Atrybut title jest opcjonalny, jednak mile widziany, zwłaszcza, gdy nazwa strony różni się od tekstu, który jest do niej odnośnikiem.

Należy unikać odnośników, które same w sobie nic nie znaczą, np. kliknij tutaj. Bez czytania całego tekstu powinno być wiadome, gdzie zaprowadzi dany link. Jeśli nie jest możliwa zmiana nazwy hiperłącza, atrybut title powinien zawierać odpowiednią informację.

  • Stopka – informacje o autorze oryginału, źródle informacji itp.
    Pisząc newsy, tłumacząc teksty, czy zamieszczając czyjś artykuł w Czytelni (oczywiście zgodnie z licencją i za zgodą autora – jeśli jest wymagana) należy dodać informację gdzie znajduje się źródło informacji, czy też artykuł w oryginalnej wersji.
    W większości przypadków (m.in. dla aktualności):

    <p>Treść newsa...</p>
    
    <h5 class="alignright">Źródło: <a href="http://adres.do.strony.z.informacja" title="Oryginalny tytuł newsa">Oryginalny tytuł newsa</a></h5><br />
    Efekt:

    Treść newsa…

    Źródło: Oryginalny tytuł newsa


    Stopka dla tłumaczeń (gdy licencja na to pozwala):

    <h5 class="alignright">Autor: <a href="http://adres.do.strony.autora-jesli.taka.ma" title="Tytuł strony">Imię i nazwisko lub ksywka autora oryginału</a>
    Na podstawie: <a href="http://adres.do.strony.z.oryginalem" title="Oryginalny tytuł artykułu">Oryginalny tytuł artykułu</a></h5><br />
    Efekt:

    Stopka dla tłumaczeń (nie ma określonej licencji i wymagana jest zgoda autora):

    <h5 class="alignright">Autor: <a href="http://adres.do.strony.autora-jesli.taka.ma" title="Tytuł strony">Imię i nazwisko lub ksywka autora oryginału</a>
    Tłumaczenie za zgodą autora. Na podstawie: <a href="http://adres.do.strony.z.oryginalem" title="Oryginalny tytuł artykułu">Oryginalny tytuł artykułu</a></h5><br />
    Efekt:
    Autor: Imię i nazwisko lub ksywka autora oryginału
    Tłumaczenie za zgodą autora. Na podstawie: Oryginalny tytuł artykułu


4. Wstawianie grafiki

  • Miniatury takie jak trzeba:
    WordPress tworzy własne miniatury wgranych grafik, ale są one za małe w stosunku do rozmiarów całej strony. Dlatego do każdej grafiki sugerujemy robić miniatury samemu, o rozmiarach np. 400×400 pikseli (oczywiście za zachowaniem proporcji obrazu).

    Tylko użytkownicy z odpowiednimi uprawnieniami mogą wysyłać zdjęcia na serwer Czytelni. Pozostali użytkownicy powinni skorzystać z zewnętrznych serwerów takich, jak imageshack.us. Miniatura powinna być jednocześnie linkiem do pełnowymiarowego obrazu (oczywiście tylko, jeśli istnieje taka potrzeba).

  • Element img i atrybut alt:
    Za wstawianie grafik odpowiada element img, oprócz adresu pliku obowiązkowo musi posiadać atrybut alt z nazwą obrazka lub opisem tego, co przedstawia:

    <img src="http://adres.do.obrazka" alt="Nazwa obrazka" />
    Efekt:

    Nazwa obrazka

    Gdy obrazek jest miniaturą i jednocześnie odnośnikiem do dużej grafiki, bardzo dobrze by było, gdyby znacznik a również posiadał atrybut title, najlepiej taki sam jak atrybut alt obrazka. Przykład:

    <a href="http://adres.do.dużego.obrazka" title="Nazwa Obrazka"><img src="http://adres.do.miniatury.obrazka" alt="Nazwa Obrazka" /></a>
    Efekt:

    Nazwa Obrazka

  • Wtapianie w tekst:
    Grafiki można wstawiać dwojako. Przede wszystkim, gdy jest to podręcznik obrazkowy (tzn. niemal każde zdanie jest popierane odpowiednim zrzutem), każdy obrazek (ze swoją miniaturą) dodawany jest jako przerywnik:

    <p>...część artykułu...</p>
    
    <p class="center"><a href="http://adres.do.dużego.obrazka" title="Nazwa Obrazka"><img src="http://adres.do.miniatury.obrazka" alt="Nazwa Obrazka" /></a></p>
    
    <p>...dalsza część artykułu...</p>
    Efekt:

    …część artykułu…

    Nazwa Obrazka

    …dalsza część artykułu…

    Za przykład może posłużyć artykuł Aktualizacja do Ubuntu 7.04 (Feisty Fawn).

    Kolejnym sposobem wstawiania obrazków jest wtapianie ich w tekst. Robimy to wtedy, gdy sama grafika nie jest najważniejszą częścią artykułu, a służy wyłącznie do np. zaprezentowania interfejsu opisywanego programu. Aby uzyskać taki efekt wystarczy użyć klasy alignright i/lub alignleft. Przykład zastosowania:

    <p><img src="http://adres.do.obrazka" alt="Nazwa Obrazka" class="alignright" />Tekst, który jest powiązany z obrazkiem z boku.</p>
    Efekt:

    Nazwa ObrazkaTekst, który jest powiązany z obrazkiem z boku.

    Należy pamiętać o proporcjach. W tym wypadku obrazek nie może być większy niż 250×250 pikseli, bo po prostu będzie zbyt duży i za bardzo będzie wpływał na tekst. Jak wygląda to w praktyce można zobaczyć w newsie Enemy Territory: Quake Wars pod Linuksem.

  • Prezentuję się ładnie, ale kim jestem?:
    Dobrym zwyczajem jest podpisywanie grafik – jedynie, gdy obrazek stanowi przerywnik w tekście. Jak zrobić to najprzejrzyściej? Po elemencie img należy przejść do nowej linii (wykorzystując zwykły „enter” lub znacznik br) i dodać opis, najlepiej napisany kursywą (em). Przykład:

    <p class="center"><a href="http://adres.do.dużego.obrazka" title="Nazwa Obrazka"><img src="http://adres.do.miniatury.obrazka" alt="Nazwa Obrazka" /></a>
    <em>Obrazek 1. Nazwa Obrazka</em></p>
    <p class="center"><a href="http://adres.do.dużego.obrazka" title="Nazwa Obrazka"><img src="http://adres.do.miniatury.obrazka" alt="Nazwa Obrazka" /></a><br /><em>Obrazek 1. Nazwa Obrazka</em></p>
    Efekt:

    Nazwa Obrazka
    Obrazek 1. Nazwa Obrazka

    W praktyce wygląda to tak, jak w tym artykule: Zrób sobie Ubuntu – czyli jak powstawał Frywolny Fulmar.

  • Usuwanie obwódek obrazków:
    Domyślnie wszystkie wstawiane obrazki mają cienką czarną obwódkę, która niekiedy może przeszkadzać (np. przy obrazkach wtapianych w tekst lub gdy obrazek jest specjalnie przygotowany dla danego artykułu). Istnieje prosty sposób na usunięcie tego obramowania – klasa noborder:

    <p class="center"><a href="http://adres.do.dużego.obrazka" title="Nazwa Obrazka"><img src="http://adres.do.miniatury.obrazka" alt="Nazwa Obrazka" class="noborder" /></a>
    <em>Obrazek 1. Nazwa Obrazka</em></p>
    Efekt:

    Nazwa Obrazka
    Obrazek 1. Nazwa Obrazka

    W przypadku, gdy obrazek ma się pokazać po prawej stronie bez obwódki należy zastosować 2 klasy – tak, jak to zostało opisane we wstępie, czyli:

    <img src="http://adres.do.obrazka" alt="Nazwa Obrazka" class="alignright noborder" />
    Efekt:

    Nazwa Obrazka

    Jako przykład może posłużyć artykuł Ubuntu dla BabUni.

  • Czy to może się ruszać? Czyli poprawne wstawianie animacji Flash (swf):
    Niestety większość aplikacji, czy stron internetowych generujących kod do wstawienia na stronie, aby umieścić animację lub film poprzez plik Flasha (swf) robi to niepoprawnie. Do tego stopnia, że nie jest to zgodne z żadnym standardem HTML, czy XHTML. Dlatego należy ręcznie przystosować kod, aby był poprawny:

    <object type="application/x-shockwave-flash" data="http://adres.do.animacji.swf" width="450" height="350">
    <param name="movie" value="http://adres.do.animacji.swf" />
    <!-- może być więcej różnych tagów param - zależy od danej animacji //-->
    <p>Opcjonalna treść zastępcza (obrazek, tekst), gdyby ktoś nie miał wtyczki Flasha.</p>
    </object>
    

    Tyle wystarczy, aby animacja była poprawnie wyświetlana. Jeśli potrzeba – można dodać więcej parametrów (tagi param) lub zmienić wymiary obiektu (width – szerokość, height – wysokość). Treść zastępcza nie jest wymagana, ale czasem może się przydać. Jeśli kod animacji do wstawienia ma inne tagi (np. embed) należy je usunąć i przekształcić pozostałe dane w sposób podobny do przykładu powyżej.

5. Dodatkowe Klasy:

Wraz z zapotrzebowaniem będziemy dodawać kolejne klasy ułatwiające uzyskanie mniej lub bardziej skomplikowanych efektów.

Klasa info – jak nazwa wskazuje przeznaczona do zamieszczania informacji:

<p class="info">Treść informacji</p>
Efekt:

Treść informacji

Klasa uwaga – podobnie jak wcześniej, nazwa wskazuje na zastosowanie – ostrzeżenia i bardzo ważne informacje:

<p class="uwaga">Treść ostrzeżenia</p>
Efekt:

Treść ostrzeżenia

Na koniec jeszcze jedna istotna informacja – w razie jakichkolwiek problemów z osiągnięciem (opisanego tutaj, bądź nie) efektu, zawsze można zgłosić się do administratora od spraw technicznych – mario_7 (kontakt na stronie O nas).

Nawiązując do hasła Humanity to others, bądźmy zgodni ze standardami (tak dokładnie: XHTML 1.0 Transitional). Internet jest dla wszystkich.