ZASADY STOSOWANIA ZNACZNIKÓW

Główne elementy strony tj. nagłówek, opaskę, kolumny, stopkę, nawigację, określa znacznik uniwersalny typu div z atrybutem jedorazowego użytku id np; <div id="nazwa elementu"> po którym umieszcza się zawartość elementu także w znacznikach i kończy znacznikiem zamykającym </div> Wewnątrz uniwersalnego znacznika należy unikać następnych div stosując je w ostateczności. W razie konieczności powtórzenia znacznika id z tą samą nazwą elementu, atrybut id zastępujemy atrybutem wielokrotnego użytku typu class np. <div class="nazwa elementu">.

Użyty znacznik powinien odpowiadać spełnianej funkcji. I tak w nagłówku jego kolejne nazwy powinny być umieszczane w znacznikach <h1> ... </h1> <h2> ... </h2> <h3> ... </h3> natomiast krótki cytat w znacznikach <q> ... </q>. W kolejnych głównych elementach strony np. w kolumnach, możemy użyć tych samych znaczników. Ich inną prezentację uzyskamy w wyniku stosowania w arkuszu stylów CSS tzw. selektorów potomnych #nagłówek h1 {...} oraz #kolumna h1 {...}. W ten sposób zawartość znacznika h1 w nagłówku może wyglądać inaczej niż zawartość h1 w kolumnie. To samo odnosi się do innych znaczników np. dl dt dd zwłaszcza gdy stosujemy kilka kolumn. Stosując selektory potomne zmniejszamy ilość divitis i classitis.

ZNACZNIKI XHTML wg. spełnianych funkcji

Znaczniki elementów blokowych
<h1> ... </h1> do <h6> ... </h6> pary tworzące nagłówki od h1-maxi do h6-mini
<p> ... </p> para tworząca akapit
<hr /> pojedynczy bez pary - ukośnik poprzedzony odstępem, tworzy linie poziomą
Znaczniki elementów list (blokowe)
<dl>  ...  </dl> lista definicji, jak ta z znacznikami XHTML, łączami i odnośnikami
<dt>  ...  </dt> pojęcie definicji
<dd> ... </dd> definicja
<ul>  ...  </ul> lista nieuporządkowana - wypunktowana
<ol>  ...  </ol> lista uporządkowana - numerowana
<li>   ...   </li> element listy ( dla ul i ol)
Znaczniki semantycznych elementów wewnętrznych, opisują znaczenie tekstu
<cite>  ...  </cite> odwołanie do innego dokumentu np. tytułu książki
<code>  ...  </code> fragment kodu programu, pisany jest czcionką o stałej szerokości
<q>  ...  </q> krótki cytat,  pisany jest z dodanym cudzysłowem  niestety nie w IE7/Win
<em>  ...  </em> tekst zaakcentowany, pisany jest kursywą
<pre> ... </pre> tekst preformatowany, zachowuje białe znaki, do prezentacji kodu, poezji, odstępu
<strong>  ...  </strong> mocno zaakcentowany tekst, pisany jest jako pogrubiony
Znaczniki prezentacyjnych elementów wewnętrznych
<b> ... </b> pogrubienie tekstu zalecany jest znacznik <strong>
<br /> pojedynczy bez pary - ukośnik poprzedzony odstępem, złamanie wiersza
<sup> ... </sup> indeks górny, potęga liczby, indeks artykułu prawnego
Znaczniki elementów uniwersalnych
<div> ... </div> podział na bloki, służy do grupowania elementów
<span> ... </span> element wewnętrzny śródliniowy, stosowany do wyróżnienia słów w tekście
Znaczniki inne
<img /> pojedynczy bez pary - ukośnik poprzedzony odstępem, do grafiki ma atrybuty src i alt
<a> ... </a> - sygnalizuje łącza i odnośniki
Znaczniki struktury dokumentu
<html> ... </html> identyfikuje dokumenty jako XHTML
<head> ... </head> identyfikuje nagłówek dokumentu
<title> ... </title> nadaje stronie tytuł
<body> ... </body> identyfikuje ciało dokumentu przechowujące jego zawartość. Zawiera deklaracje dla całej strony np. rodzaj czcionki, marginesy, tło itp.
Znaczników XHTML jest około 100 a do budpwy tej witryny razem z przykładami wykorzystano podstawowe najczęściej używane w ilości 22, nie wliczając w to znaczników struktury dokumentu.

ŁĄCZA

Łącza (ang.link=związek) połączenia, hiperłącza, odsyłacze, wg. słownika - tekst objaśnienia umieszczony pod odpowiednim znakiem, faktycznie to polecenie łączące z nazwą miejsca   i/lub   adresem poszukiwanego źródła informacji podanego także w formie graficznej umieszczonego między znacznikami <a> ... </a>
Nawigacyjne łącza:   <a href=" adres poszukiwany "> nazwa </a>
Łącza realizują połączenia do określonych miejsc tej samej strony, do innych stron i miejsc na tej stronie, do stron katalogów lub witryn a także do miejsc na ich stronach.
<a href="#top">Do góry</a> połączenie do odnośnika w górnej części tej samej strony
<a href="#ekran3">Do ekran3</a> połączenie do miejsca z odnośnikiem na tej samej stronie
<a href="strona2.htm">Do strona2</a> połączenie do innej strony tego samego pliku
<a href="strona2.htm#ekran3">nazwa</a> połączenie do innej strony tego samego pliku oraz do określonego miejsca na tej stronie nazwanego #ekran3
<a href="katalog_niżej/strona2.htm#ekran3">nazwa</a> połączenie do katalogu w dół z plikami stron, dalej do strony2 z tego katalogu oraz do miejsca na tej stronie nazwanego #ekran3, to wszystko na tym samym serwerze, dysku i komputerze, stąd nazwa połączenia względne. W dużej witrynie pliki działów tematycznych umieszcza się w katalogach lokalnych leżących poniżej katalogu z plikami globalnymi wśród których jest plik główny index.html.
<a href=".. /katalog_wyżej/strona2.htm#ekran3">nazwa</a> połączenie do katalogu w górę z plikami stron, dalej do strony2 z tego katalogu oraz do miejsca na tej stronie nazwanego #ekran3, to wszystko na tym samym serwerze, dysku i komputerze, to jest także połączenia względne. To łącze służy do powrotu z plików katalogów lokalnych leżących niżej do katalogu globalnego leżącego wyżej.
<a href="http://www.helion.pl/nazwa2.htm">www.helion.pl</a> połączenie bez względne z dokładnym adresem URL witryny i jej stroną nazwa2
<a href="javascript:history.back()">Wstecz</a> połączenie do strony poprzedniej, także znajdującej się na innym serwerze, stąd może to być połączenie względne lub bezwzględne.
<a href="mailto:nazwa@adres.pl">nazwa adresata e-majla</a> połączenie otwierające okno programu pocztowego z elektronicznym adresem odbiorcy; nazwa@adres.pl w celu przekazania mu informacji. Nazywane także odnośnikiem pocztowym.

ODNOŚNIKI

Odnośnik (ang.anchor=kotwica) etykieta, zakotwiczenie, wg. słownika - znak graficzny w tekście odsyłający do opatrzonego takim samym znakiem przypiska, faktycznie to opis miejsca na stronie zawierającego informacje, które mogą być poszukiwane z pomocą opisanych poprzednio dwóch pierwszych łącz typu <a href="#nazwa miejsca"> nazwa </a>.
Nawigacyjne odnośniki:   <a id="nazwa miejsca"></a>
Umieszczane są zawsze przy górnej krawędzi tekstu strony w sekcji BODY z nazwą "top" oraz przy krawędzi kolejnych ekranów lub przy nagłówkach tekstów, które mogą być poszukiwane z racji zawartych tam informacji, są to przykładowe formy:
<a id="top"></a>   top = nazwa odnośnika przy krawędzi górnej strony
<a id="ekran3"></a>  ekran3 = nazwa odnośnika przy szukanym tekście na tej samej stronie.

ENCJE

Encje znakowe służą do wyświetlania na ekranie innych znaków niż diaktryczne "pl" np. symboli walutowych, handlowych, matematycznych, miar, interpunkcyjnych i różnych innych umieszczonych między znakami & i ;. Przykłady: &lt; to nierówność mniej <,   &gt; to nierówność więcej >.   Znak praw autorskich © to &copy;.   Ich odpowiednikiem są encje numeryczne i tak odpowiednikiem  &copy;   jest znak   &#169;

TERMINOLOGIA

Brak polskiej normy na tłumaczenia nazw angielskich powoduje że rodzimi autorzy książek stosują różne nazewnictwo nawet na tej samej stronie (przykłady to łącze i hiperłącze, odsyłacz lub połączenie, link i odnośnik), co dezorientuje czytającego nowicjusza i nie świadczy dobrze o wydawcy. Tłumacze są znacznie bardziej zdyscyplinowani. W Bibliotece staram się stosować jednolite słownictwo a każdy termin użyty po raz pierwszy posiada odpowiedniki wszystkich możliwych nazw stosowanych przez autorów różnych książek. Jako pierwszy użyty jest termin najczęściej stosowany przez tłumaczy i uznany przeze mnie za najwłaściwszy.

Celem wprowadzenia pewnego ładu w najbliższym czasie przekażę swoje sugestie wydawcy HELION, który przede wszystkim powinien zadbać o jednolite słownictwo. Jednocześnie w Bibliotece rozpocząłem publikacje słownika terminów, który będzie systematycznie uzupełniany.

SŁOWNIK

Określeń i zwrotów stosowanych na stronach anglojęzycznych opisujących elementy kodu.

Określenia kodu
classitis i divitis - zaśmiecanie strony zbędnym kodem w wyniku stosowania znaczników np typu; td, span, font z atrybutami class, lub konstrukcji <div class="naglowek">.   Najlepszym lekarstwem jest stosowanie selektorów potomnych o czym na stronie CSS.