Archiwum tagu: zasady pisania

Podczas tworzenia stron WWW trafisz na wiele niedogodności. Ponieważ istnieje kilkanaście przeglądarek stron WWW, niektóre polecenia mogą w nich dawać odmienny efekt. Czasem strona z niezamkniętymi poleceniami lub tabelami (co jest oczywiście błędem) będzie wyglądała poprawnie pod Internet Explorerem. Zdarzy się i tak, że poprawna strona, wykorzystująca standard języka XHTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez jakąś przeglądarkę. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku, przeglądać w telefonach komórkowych. O wszystkich potrzebach użytkownika musisz pomyśleć!

Pisząc w XHTML większość elementów to pary poleceń. Jest element otwierający i zamykający, np. tytuł został otoczony parą <title> i </title>. Dzięki temu przeglądarka wie, co ma wyświetlić na belce jako tytuł strony. Jeżeli w treści strony jakiś wyraz otoczysz parą elementów <b> i </b> zostanie on pogrubiony (b to skrót od angielskiego słowa bold).

Znając pary poleceń możesz z tekstem robić dowolne rzeczy. Tak na prawdę nie musisz uczyć się par - wystarczy pamiętać nazwę polecenia, bo konstrukcja jest zwykle taka sama: <polecenie> … </polecenie> lub ewentualnie <polecenie />, czyli forma zamknięcia elementów, które w starszym HTMLu nie miały pary, np. <br />.

Elementy XHTML mogą mieć jeszcze atrybuty. Oznacza to, że możesz zmieniać właściwości tych poleceń. Jeżeli chcesz utworzyć połączenie z inną stroną WWW wystarczy, że do elementu a dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco:

<a href="http://www.projektowanie-stron.szczecin.pl/">
odnośnik do www.projektowanie-stron.szczecin.pl</a>

Polecenia i atrybuty muszą być pisane małymi literami. Wymaga tego język XHTML. W niezalecanym już języku HTML 4.01 i we wcześniejszych, wielkość znaków nie miała znaczenia.

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, jaki obrazek ma wstawić. Element img odpowiada za obrazki (img to skrót od słowa image). Ma wiele atrybutów, a jednym z nich jest src (czyli source - źródło obrazka). Użyjmy ich ustalając od razu wymiary obrazka (atrybut width i height) oraz opis alternatywny (atrybut alt)…

<img src="/g/logo.gif" width="120" height="60"
alt="logo serwisu"/>

I oto mamy obrazek. Pamiętaj jeszcze, że wartości atrybutów powinno się umieszczać w cudzysłowach. Dzięki temu przeglądarka może je prawidłowo zidentyfikować. Pewnie chcesz mieć “klikalny” obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę:

<a href="http://www.projektowanie-stron.szczecin.pl"><img
src="/g/logo.gif" width="120" height="60"
alt="logo serwisu" border="0" /></a>

Nie jest to skomplikowane, choć pojawił się kolejny atrybut: border=”0″, który powoduje, że znika ramka otaczająca obrazek (oznaczająca, że obrazek jest odnośnikiem). Nie chcę ramki, bo szpeci logo - dlatego prawie zawsze element img w odnośnikach ma wyłączoną ramkę…

Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego:

<i>kilka <b>przykładowych</i> wyrazów</b>

Element i definiuje przekreślenie, ale zanim został on zamknięty, otwarto element b (pogrubienie), a następnie zamknięto i zamiast b. Są one założone “na krzyż”. Wygląda to mało czytelnie i nie jest zgodne z regułami, pomimo tego, że przeglądarka może pokazać efekt dobrze… Oto prawidłowa kolejność:

<i>kilka</i> <b><i>przykładowych</i> wyrazów</b>

To nic, że trzeba było użyć kilka razy i, ale opłaciło się. Przykład jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagę na jej czytelność. Nie przez przypadek wielu autorów robi charakterystyczne wcięcia w kodzie HTML. Ułatwia to odczytanie kodu po latach, gdy sam autor nie pamięta co miał na myśli tworząc stronę…

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) określa polecenie p. Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW.

Jednak, aby poznać wszystkie elementy i atrybuty języka XHTML, potrzeba bardzo dużo czasu. Dobrym treningiem jest podglądanie innych witryn i sprawdzanie, jak autorzy poradzili sobie z wykonaniem różnych efektów. Ucząc się na przykładach poznasz wiele technik i metod tworzenia stron.

Powodzenia!