HTML dla bardzo początkujących, kurs sposób 2, O kursie


O kursie

Kilka słów na temat przeznaczenia oraz historia kursu.

Gdy w czerwcu 2002 r. tworzyłem pierwszą wersję kursu HTML, jego głównym celem było usystematyzowanie, pogrupowanie i opisanie wszystkich aktualnie zalecanych elementów oraz atrybutów języka HTML. Niedługo potem dodałem pełny opis stylów CSS.

Organizacja World Wide Web Consortium od lat wyznacza standardy języków HTML i CSS, które powinny być przestrzegane przez producentów przeglądarek. Firmy nie stosują się jednak do tych zaleceń i często wprowadzają w swoich przeglądarkach własne elementy języka HTML czy CSS, które nie działają poprawnie w pozostałych programach.

Kurs ma nauczyć posługiwania się tylko tymi poleceniami języka HTML i CSS, które mają przyszłość i są lub będą poprawnie interpretowane w każdej przeglądarce. Niektóre przeglądarki już radzą sobie z większością opisanych tutaj poleceń HTML i niemal wszystkimi stylami CSS 2.

Publikacja na pomóc w szybkim odnalezieniu polecenia i poznaniu jego składni oraz dopuszczalnych wartości lub atrybutów. Zgromadzone są także informacje o przeglądarkach, w których dany element języka jest poprawnie wyświetlany. Wśród wielu poleceń, które kiedyś były standardem, część nie jest już zalecana i w kursie znajdziesz ich zamienniki.

To ogromny podręcznik, który pomaga nie tylko początkującym twórcom stron, ale stanowi również świetną ściągawkę dla webmasterów doświadczonych. Każde z ponad 330 poleceń poparte jest przykładami, których łącznie w kursie jest niemal 700. Całość uzupełniają dodatkowe artykuły, tabele i wskazówki praktyczne.

Z kursu korzysta wiele szkół, uczelni, instytucji edykacyjnych, firm, dostawców Internetu i osób prywatnych. Kurs publikowany jest na krążkach CD czasopism, dołączany do różnych programów i umieszczany w niezliczonej ilości serwisów WWW.

W 2003 r. czytelnicy magazynu PC World Komputer wybrali kurs jednym z Produktów Roku - nigdy nie sądziłem, że zdobędzie on tak wielką popularność. Jestem bardzo wdzięczy za wszystkie uwagi i listy dotyczące kursu. Dziękuję. Mam nadzieję, że również Tobie kurs przypadnie do gustu i stanie się pomocnym narzędziem w codziennej pracy.

Sposób opisywania elementów, atrybutów i stylów.

Notacja zastosowana do opisywania poszczególnych poleceń może wydawać się skomplikowana, ale w rzeczywostości jest bardzo prosta. Wystarczy chwila aby poznać wszystkie symbole i oznaczenia.

• APPLET - czerwona kropka przy jakimkolwiek poleceniu informuje, że nie jest ono zalecane i w przyszłości przeglądarki mogą go nie obsługiwać. Przy opisie każdego takiego polecenia znajdziesz jego zalecany zamiennik.

Każde polecenie ma pewne cechy, które skrótowo opisane są w jego definicji. Aby przeczytać więcej informacji o wybranym atrybucie wystarczy kliknąć w jego nazwę. Czasami ten sam atrybut znaczy zupełnie coś innego w kilku elementach HTML więc opisy tego samego atrybutu w poszczególnych elementach mogą być inne. Wyjaśnienie przykładowych opisów dwóch atrybutów poniżej:

• alt =[tekst] opcjonalny - IE3, N2

opis dla przeglądarek, które nie pokazują tego elementu

• align =[bottom|middle|top|left|right] opcjonalny - IE3, N2, O3.5

wyrównanie względem innych elementów (nie zalecany)

1. Atrybut alt może przyjmować wartość tekstową, np. alt="Opis obrazka". Atrybut jest opcjonalny, co znaczy, że nie musi wystąpić w opisywanym elemencie HTML (niektóre atrybuty muszą wystąpić, np. "src" w elemencie IMG). Interpretowany jest poprawnie przez przeglądarki Internet Explorer w wersji 3 i nowsze oraz Netscape 2 i nowsze. Zawsze poniżej znajduje się skrócony opis atrybutu.

2. Atrybut align może przyjmować wartości "bottom" lub "middle" lub "top" lub "left" lub "right", np. align="right". Domyślną wartością jest "left". Atrybut jest opcjonalny, co znaczy, że nie musi wystąpić w opisywanym elemencie HTML. Interpretowany jest poprawnie przez przeglądarki Internet Explorer w wersji 3 i nowsze oraz Netscape 2 i nowsze oraz Opera 3.5 i nowsze. Poniżej znajduje się skrócony opis atrybutu. "Nie zalecany" oznacza, że atrybut jest wycofywany ze standardu HTML i kolejne przeglądarki mogą go nie interpretować poprawnie. Zwykle można go zastąpić innymi atrybutami lub stylami CSS.

Elementy, atrybuty i style bardzo często powiązane są z elemenatmi podobnymi, co pozwala natychmiast zobaczyć np. jakie atrybuty ma element TABLE lub do jakich elementów powinien być przypięty atrybut align.

Przy opisach elementów znajdują się także inne cechy poleceń, np. odpowiedniki HTML dla stylów CSS, informacje o obowiązkowym znaczniku zamykającym lub położeniu elementów wewnątrz określonej struktury (np. element TD musi być w elemencie TR).

Zanim stworzysz swoją stronę WWW

Wydawać by się mogło, że do wykonania dobrej strony WWW najważniejsza jest umiejętność posługiwania się językiem HTML, znajomość programów, wiedza techniczna i doświadczenie w pracy z komputerem. Jeżeli tak myślisz, postaram się przekonać Cię, że HTML i CSS to ostatnia rzecz, jakie musisz znać przy projektowaniu dobrej strony.

Dla mnie zakodowanie strony w języku HTML (lub jakimkolwiek innym) jest ostatnim etapem pracy przy witrynie. Wcześniej projekt serwisu dojrzewa od kilkunastu dni nawet do kilku lat (!) w mojej głowie i na wielu kartkach papieru. Gdybym chciał określić procentowo ilość czasu jaki poświęcam na kodowanie i projektowanie serwisu, to myślę, że projekt zajął by mi nawet do 98 proc. czasu potrzebnego na powstanie strony, a kodowanie wszystkiego w postaci stron HTML to dosłownie "chwila".

Wstęp do HTML i CSS

Wiedz czego chcesz

Wiele osób chce mieć stronę, jednak sama chęć nie wystarcza. Już po chwili rodzą się różne pytania. Jaki wygląd ma mieć strona? Co powinna zawierać? Jakich narzędzi użyć do jej stworzenia? Czy można na niej zarobić?

Warto usiąść i określić co chcemy na niej zamieścić oraz wypisać funkcje, które ma spełniać. Nie są to łatwe decyzje, ale trzeba je podjąć już na wstępie. Od nich zależy konstrukcja menu, wygląd strony głównej, ilość działów, nawigacja, liczba dokumentów i grafik, które będą nam potrzebne do zbudowania serwisu.

Wczuj się w rolę czytelnika, pomyśl co zrobi gdy wejdzie na Twoją witrynę, czego będzie szukał, co możesz mu zaoferować, jaki jest koszt stworzenia strony. Swoje przemyślenia przedstaw kilku osobom i zapytaj co sądzą o pomyśle. Z pewnością podpowiedzą Ci, co ich zdaniem należałoby dodać lub zmienić.

Pamiętaj, że serwis internetowy różni się od książki lub gazety. Nikt nie czyta długich tekstów, jeżeli nie musi lub nie chce. Treść musi być na tyle ciekawa, aby zatrzymać użytkownika na dłużej. Jeżeli witryna będzie interesująca i oryginalna, wiele osób będzie z niej korzystać, a przecież o to chodzi!

Pierwsze wrażenie

Pamiętaj, że pierwsze wrażenie można zrobić tylko raz. Internet to miliony stron - jeżeli wejdę na jedną z nich i nie zrobi na mnie dobrego wrażenia, już na nią nie powrócę. Szkoda czasu. Więc bardzo ważne jest, aby strona była możliwie najlepiej dopracowana już podczas jej pierwszej prezentacji w Internecie. Ba, ale jak to osiągnąć? Jest kilka sposobów...

Teksty - nie mogą być nudne, zbyt długie, rozlazłe i niestarannie napisane. Sprawdzaj błędy ortograficzne, czytaj je po kilka razy, zastanów się nad używanym słownictwem. Jeżeli tekst jest dłuższy stosuj punkty, akapity lub rozdziały. Gdy powołujesz się na jakieś informacje zawsze umieszczaj ich źródło. Nie możesz napisać, że w Polsce 10% ludzi korzysta z Internetu, jeżeli nie podasz skąd masz takie dane (no, chyba, że sam to zbadasz). Zastanów się, czy teksty będziesz pisać samemu, czy może pozyskasz je od innych autorów lub serwisów.

Grafika - musi być odpowiednio dobrana do serwisu. Jeżeli nie masz zdolności plastycznych, popytaj znajomych, czy nie mogliby pomóc. Ważny jest dobór kolorów, kształtów, zestawienie grafik z innymi elementami strony. Pomyśl o zdjęciach - urozmaicają tekst i przyciągają oko. Możesz je robić samodzielnie, zlecić wykonanie fotografowi lub postarać się o nie z innych źródeł. Jeżeli będziesz robić wiele zdjęć, może przydałby się aparat cyfrowy lub skaner? Pamiętaj, że grafika ma ułatwiać, a nie utrudniać poruszanie się po stronie.

Nawigacja - dzięki niej możesz bardzo wiele zyskać. Bezproblemowe poruszanie się po serwisie, wyszukiwanie informacji czy proste przechodzenie pomiędzy różnymi działami to jedne z najważniejszych cech dobrej witryny. Użytkownik zawsze wybierze serwis, który sprawia mu mniej kłopotów podczas wędrówki - pamiętaj o tym podczas projektowania przejść pomiędzy stronami. Im więcej kliknięć, pułapek i niespodzianek czega na odbiorcę, tym bardziej będzie on poirytowany. Przygotuj mapę serwisu, jeżeli jest bardzo rozbudowany. Nikt nie będzie szukał przez godzinę informacji, z których korzysta na co dzień. Jeżeli to możliwe zbadaj preferencje użytkowników i to, z czego korzystają najczęściej, umieść na stronie głównej. Pamiętaj o umożliwieniu kontaktu z Tobą lub z osobą, która odpowiada za witrynę. Jeżeli nie chcesz odpowiadać na listy użytkowników to najlepiej zapomnij o Internecie i zabierz się za uprawę buraków pastewnych - ułatwisz w ten sposób życie sobie i wielu osobom.

Prawa autorskie - przestrzegaj je zawsze i za wszelką cenę, a jeżeli masz wątpliwości, pytaj o zgodę autorów. Pamiętaj, że wszystko co nie jest Twoje należy do kogoś innego. Jeżeli chcesz użyć czyjegoś tekstu, grafiki, zdjęcia lub oryginalnego pomysłu, MUSISZ mieć jego zgodę i to najlepiej na piśmie. Jeżeli wykorzystasz czyjeś prace bez poszanowania praw autorskich grozi Ci nie tylko zepsucie opinii w środowisku, ale również odpowiedzialność karna, a wtedy straty finansowe mogą być bardzo dotkliwe i wielokrotnie przewyższać koszt zakupu wykorzystywanych materiałów. Zawsze pytaj o zgodę jeżeli chcesz coś przedrukować lub zamieścić na własnej stronie. Zwykle firmy lub osoby prywatne udzielają zgody bez problemu jeżeli nie prowadzisz serwisu komercyjnego. W Internecie jest też wiele materiałów bezpłatnych, z których można korzystać również do celów komercyjnych (jak ten kurs HTML). Ale musi to być wyraźnie napisane - jeżeli tak nie jest, najlepiej wyjaśnij wątpliwości u autora prac.

Aktualizacja - to magnes na czytelnika. Witryna nie może być martwa. Staraj się przewidzieć jak często będzie dodawana nowa zawartość. Im częściej będzie się pojawiać coś nowego, tym częściej ludzie będą przychodzić aby to zobaczyć. Jeżeli nie będziesz w stanie uzupełniać witryny codziennie, staraj się aby chociaż raz w tygodniu dodać choćby kilka słów od siebie.

Nie wiem co chcę pokazać!

To częsty problem. Chcesz mieć stronę, ale nie wiesz co na niej umieścić... Na szczęście jest wiele elementów, które są wspólne dla różnych witryn. Możesz też odwiedzić inne, podobne strony, aby zobaczyć jakie informacje umieszcza konkurencja. Warto zrobić własne "badanie rynku", bo dzięki temu zobaczysz, czy to co chcesz zrobić nie zostało już wcześniej wykonane. Pół biedy, jeżeli Twój pomysł ktoś zrealizował w kiepski sposób i możesz wykonać lepszą witrynę. Gorzej, gdy serwis, który planujesz uruchomić, konkurencja zrobiła już dawno temu i cieszy się on dużą popularnością, a na dodatek nie masz szans zrobić go lepiej. Wtedy masz poważny problem.

"Kontakt". Zacznij od strony kontaktowej - może to być adres e-mail, telefon, ulica, miasto, mapka opisująca jak do Ciebie dojechać. Jeżeli lubisz zaskakiwać podaj np. szerokość i długość geograficzną. Jeżeli ktoś ma GPS może dotrzeć do Ciebie wykorzystując dane satelitarne.

"O autorze/O firmie/O serwisie". Napisz kilka zdań o sobie - kim jesteś, co robisz, ile masz lat, czym się interesujesz. Możesz też dodać swoje zdjęcie. Firmy w tym miejscu opisują zwykle swoją historię, ofertę, dokonania. Możesz też napisać kilka zdań o serwisie - do kogo jest skierowany, co można w nim znaleźć.

"Nowości/Informacje prasowe". Wydziel stronę, na której opisywać będziesz zmiany i zapowiedzi nowych tekstów. Firmy tworzą zwykle sekcję dla prasy, aby dziennikarze mogli pobierać najnowsze doniesienia. Pomyśl o Newsletterze. Jeżeli chcesz mieć kontakt z czytelnikami daj im możliwość pozostawienia adresów e-mail. Mając bazę adresów, możesz wysyłać im co jakiś czas informacje o nowościach. Tylko pilnuj bazy i nie udostępniaj jej innym, jeżeli czytelnicy nie wyrazili na to zgody. Chroń dane czytelników, bo jeżeli trafią one w niepowołane ręce, nigdy więcej ludzie Ci nie zaufają.

"Katalog stron WWW". Spis podobnych witryn poukładany tematycznie. Umieść też adresy swojej konkurencji - nie zaszkodzi. Gdy ktoś będzie chciał zgłębić temat wejdzie do innych serwisów. I to nic, że teraz ucieknie z Twojej strony, ale będzie do niej wracał, bo wie, że tylko u Ciebie znajdzie kompletny zestaw adresów internetowych.

"Ankieta". Ważna rzecz - zadając pytania poznasz bliżej swoich odbiorców i lepiej dostosujesz serwis do ich wymogów. Jest wiele typów ankiet, więc też musisz przemyśleć, które będą Ci najbardziej odpowiadać.

Co jeszcze... Każda strona ma swoje specyficzne działy. Jeżeli prowadzisz serwis o muzyce to pewnie przedstawisz sylwetki muzyków, wywiady, książki, nagrania w MP3, teksty piosenek. Gdy myślisz o serwisie turystycznym opiszesz trasy wycieczek, schroniska, hotele, podasz rozkłady jazdy pociągów, pogodę na najbliższe dni w różnych regionach. Jeżeli masz serwis finansowy, rozsądne jest podanie aktualnych kursów walut. W prywatnym serwisie możesz opisać swoje hobby, ulubione książki, pokazać własną twórczość, opisać drzewo genealogiczne rodziny.

Chcesz osiągnąć sukces, prawda?

Zanim cokolwiek zrobisz, przemyśl jak to zrobisz! Katalog stron WWW ma każdy, więc dlaczego Twój ma być lepszy od innych i dlaczego to właśnie z Twojego katalogu stron mają korzystać ludzie? Wszystko zależy od tego, jak go wykonasz. Ważne jest grupowanie adresów w logiczne kategorie, umieszczanie ciekawych opisów, możliwość zgłaszania nieistniejących stron. Zastanów się czy dodasz wszystkie adresy stron WWW czy tylko te najepsze? Musisz mieć coś więcej niż konkurencja aby zaistnieć w Internecie. I nie jest to wcale zadanie proste.

Nie staraj się robić strony o wszystkim. Wiem, że interesują Cię sporty wodne, lotnictwo, książki, muzyka, aerobik, jazda konna i GSM. Lepiej jest się jednak skupić na jednym temacie, ale za to opracować go dokładnie. Tylko wtedy ludzie docenią Twój trud. Stron o telefonach komórkowych jest setki, ale czytelnicy najczęściej odwiedzają tylko kilka z nich. Wybierz jedną tematykę, na której znasz się najlepiej i jej poświęć swój czas.

Projekt musi być elastyczny i łatwy do szybkiego przebudowania. Jeżeli będziesz dodawać nowe pozycje do menu, grafika nie może Cię ograniczać. Stwórz "style book", czyli książkę standardów. Dzięki temu nie zapomnisz, jakich czcionek, kolorów i proporcji używasz do wykonania wszystkich elementów serwisu.

Już teraz pomyśl z jakimi serwisami i osobami będziesz współpracować, co zrobisz aby wypromować serwis, do których katalogów i wyszukiwarek go dodasz. Warto przemyśleć też sprawę reklamy (haseł reklamowych) i bannerów. Część miejsca w serwisie przeznacz na bannery innych. Reklama jest bardzo ważna - po co Ci serwis, o którym nikt nie wie?

Są jeszcze ograniczenia. Pewnych rzeczy nie warto robić jeżeli nie dysponujesz odpowiednimi narzędziami i technologiami. Krótka historyjka zobrazuje co mam na myśli... Zbieram bilety komunikacyjne z całego świata i mam ich niemal 10 tys. Wiele lat temu chciałem przenieść kolekcję do Internetu. Nie miałem wtedy dostępu do baz danych i PHP. Musiałbym stworzyć 10 tys. osobnych stron HTML opisujących każdy bilet. Zajęcie byłoby tak pracochłonne, że pewnie serwis tworzyłbym kilka lat, a teraz musiałbym wszystko przerabiać! To co kiedyś było niewykonalne, dzisiaj mogę zrobić szybciej i lepiej. Warto więc czasem czekać nawet kilka lat niż na siłę tworzyć coś, co z założenia nie ma sensu.

I najważniejsze - cierpliwość i pasja. W ciągu tygodnia nie osiągniesz sukcesu. Nie wystarczy miesiąc, a nawet pół roku. Dobry serwis wymaga stałej aktualizacji i wielu wyrzeczeń przez lata. Im bardziej się rozrasta tym więcej masz przy nim pracy. Zapał wygasa, przychodzą chwile zwątpienia. Reportera tworzę od 1996 r. i bardzo lubię przy nim pracować, ale miewałem okresy, kiedy chciałem rzucić to wszystko i zająć się czymś innym. Duży serwis potrafi też zmienić człowieka. Długie przebywanie przed komputerem nie jest dobre dla zdrowia, wpływa też na psychikę.

Jeżeli chcesz podjąć ryzyko i przeżyć przygodę swojego życia to zapraszam do Sieci - tu każdy ma równe szanse. Przenieś gotowy projekt do postaci stron HTML i zacznij rozwijać własną witrynę. Emocje gwarantowane...

Moja pierwsza strona WWW w 15 minut

Tworzenie stron WWW jest zajęciem w miarę prostym i bardzo przyjemnym. Podstaw języka HTML można nauczyć się w kilka godzin, a dosłownie po chwili zbudować prostą witrynę. Trzeba tylko pamiętać o przestrzeganiu kilku podstawowych zasad.

Aby wprawnie posługiwać się językiem HTML niezbędna jest praktyka. Identyczną stronę można wykonać na bardzo wiele sposobów, więc tylko doświadczony webmaster będzie w stanie stworzyć ją lepiej, szybciej, tak aby dobrze prezentowała się identycznie w każdej przeglądarce. Polecam więc eksperymentowanie, testowanie, sprawdzanie efektów w różnych przeglądarkach i ciągłe podnoszenie swoich umiejętności.

Pierwsza strona

Aby tworzyć strony WWW nie musisz mieć dostępu do Internetu. Wystarczy przeglądarka stron WWW zainstalowana Twoim komputerze. Stronę musisz zapisać w zwykłym pliku tekstowym i odpowiednio go nazwać. Do pisania stron WWW nadaje się każdy, nawet najbardziej banalny edytor tekstowy - od prostego Notatnika w systemie Windows czy Pico w Unixie, aż do specjalistycznych edytorów HTML. Każdy ma swój ulubiony edytor tekstowy, ja używam rewelacyjnego NoteTab Pro (mniej zaawansowana wersja tego edytora dostępna jest bezpłatnie).

Dokument zawierający HTML powinien mieć rozszerzenie .html lub .htm - co sugeruje, że to jest strona WWW. Przyjęło się, że główna strona serwisu ma zwykle nazwę index.html (czasem może się jednak nazywać inaczej). Pozostałe strony, do których można dotrzeć z index.html mogą mieć dowolne nazwy. Niech będą jednak czytelne i niezbyt długie.

W nazwach stron ważna jest wielkość liter - najlepiej stosować tylko małe litery bez polskich znaków. Strona Kontakt.html nie jest tą samą stroną co kontakt.html (zwróć uwagę na wielkość pierwszej litery K). Nie powinno się też używać polskich znaków w nazwach stron, uważaj też na znaki specjalne (np. %^&#$@). Nie stosuj też spacji (odstępów). Lepiej nadać nazwę: pokarm-dla-zolwia.html niż pokarm dla żółwia.html.

Każda strona ma pewne elementy wspólne. Musisz poinformować przeglądarkę, że ma do czynienia z językiem HTML, a nie zwykłym tekstem. W dodatku napisanym z polskimi znakami w standardzie ISO8859-2. Warto też nadać stronie tytuł.

Oto szablon każdej strony WWW, który możesz skopiować i modyfikować w zależności od dalszych potrzeb. Mając prostego "gotowca" szybko stworzysz dowolną inną stronę.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">

<title>Tu wstaw tytuł strony</title>

</head>

<body>

Moja pierwsza strona www!

</body>

</html>

Powyższy szablon to niezbędne minimum, więc powinien znajdować się w treści każdej strony WWW. Są także strony, których budowa może być inna, ale dla większości wszystkich witryn w Internecie wspomniana konstrukcja jest standardem.

!DOCTYPE określa wariant języka HTML (Transitional w wersji 4.0 jest stosowany najczęściej). Następnie informujemy przeglądarkę, że jest to dokument HTML umieszczając całą treść dokumentu w parze elementów: <HTML> i </HTML>. Każda strona ma nagłówek znajdujący się pomiędzy elementami <HEAD> i </HEAD>. Umieszczamy w nim tytuł strony w elementach <TITLE> i </TITLE> i informację o kodowaniu polskich znaków w ISO-8859-2. Po nagłówku znajduje się część, którą widzimy w oknie przeglądarki - określają ją elementy <BODY> i </BODY>. Tu znajduje się tekst, grafika, odnośniki, tabele i inne rzeczy.

Skopiuj zawartość do edytora tekstu, zapisz wszystko na dysku pod nazwą index.html i zobacz jak wygląda strona w przeglądarce. W zasadzie już masz swoją stronę...

Kilka zasad

Jak widzisz, większość elementów HTML 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 przeglądarki 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>.

Polecenia (w kursie sąto elementy HTML) 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 polecenia A dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco:

<A href="(strona) /">odnośnik do (nazwa)</A>

Jeżeli dodasz jeszcze atrybut target, możesz określić okno, w którym otwarta zostanie strona WWW. Niech to będzie nowe okno przeglądarki, a więc target będzie miał wartość _blank (blank to czyste, nowe okno).

<A href="(strona) /" target="_blank">zobacz (strona).pl</A>

Polecenia i atrybuty mogą być pisane dużymi lub małymi literami, nie ma to znaczenia. Wyłącznie na potrzeby kursu stosuję duże litery dla elementów (poleceń), a małe litery dla atrybutów ponieważ taki sposób jest bardziej czytelny. Ale równie dobrze powyższy odnośnik mógłby zostać zapisany tak:

<a HrEf="(strona) /" tarGET="_BLaNk">zobacz (strona).pl</a>

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, który 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 więc... Niech dodatkowo obrazek będzie na środku strony (polecenie centrujące nazywa się CENTER).

<center>

<img src="../p/logo.jpg">

</center>

0x01 graphic

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ę:

<center>

<a href="http://(strona) " target="_blank">

<img src="../p/logo.gif" width="120" height="60" border="0"></a>

</center>

0x01 graphic

Nie jest to skomplikowane, choć pojawiły się kolejne atrybuty: width to szerokość obrazka, height określa wysokość, a border="0" powoduje, że znika ramka oznaczająca, że obrazek jest odnośnikiem. Nie chcę ramki, bo tylko szpeci obraz - dlatego prawie zawsze element IMG na stronach WWW ma wyłączoną ramkę...

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

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

kilka przykładowych wyrazów

Element S definiuje przekreślenie, ale zanim został on zamknięty, otworzyłem element B (pogrubienie), a następnie zamknąłem S 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 pokazała efekt dobrze... Oto prawidłowa kolejność:

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

Wiem, że trzeba było użyć kilka razy S, 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 wiele 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 robiąc stronę...

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) rozpoczyna się od polecenia P (akurat on nie wymaga stosowania elementu zamykającego, choć warto go użyć). Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW.

Podczas tworzenia stron WWW trafisz też na wiele niedogodności. Ponieważ istnieje kilka 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 HTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez przeglądarkę Netscape. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku. O wszystkich potrzebach użytkownika musisz pomyśleć!

Jeżeli chcesz poznać wszystkie elementy i atrybuty języka HTML, wystarczy, że będziesz przeglądać kurs - wszędzie znajdziesz przykłady i omówienia - wystarczy je skopiować do szablonu aby sprawdzić jak działają. Dobrym treningiem jest też 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. Po jakimś czasie wypracujesz własne, najlepsze rozwiązania i wtedy inni będą mogli uczyć się od Ciebie...

Powodzenia!

Dołączanie i korzystanie ze stylów CSS

Style pozwalają kontrolować większość właściwości elementów HTML, które kiedyś można było ustawiać wyłącznie za pomocą atrybutów. Powtarzanie atrybutów w wielu elementach było nie tylko niewygodne, ale zwykle jakakolwiek zmiana koloru lub wyglądu strony wymagała dokonania poprawek na wszystkich stronach WWW, w każdym elemencie.

Gdy nagle tytuły miały być zielone i pogrubione, a dotychczas były czerwone i rozstrzelone, wtedy webmastera czekała bardzo niemiła robota - musiał ręcznie zmieniać wygląd wszystkich tytułów.

Organizacja W3C szybko doszła do wniosku, że trzeba oddzielić układ (konstrukcję) strony od właściwości elementów umieszczonych na niej. Za pomocą języka HTML tworzy się więc strukturę, jak np. tabele, tytuły czy akapity, a korzystając ze stylów nadaje się im odpowiednie właściwości i formatowanie, np. kolor, pogrubienie, pochylenie, tła, wielkość liter i inne elementy odpowiedzialne za kształt i wygląd.

Wystarczy więc przypisać do tytułu strony nazwę stylu, np. "glowny" i zdefiniować w jednym miejscu jakie właściwości ma mieć główny tytuł. Może być pogrubiony, niebieski, napisany czcionką Arial o wielkości 16 pikseli. Wszystkie tytuły główne mogą mieć ten sam styl zapisany w jednym pliku.

Gdy nagle trzeba zmienić wygląd tytułów, wystarczy w jednym miejscu zmienić właściwości stylu "glowny" i efekt będzie widoczny od razu na wszystkich stronach we wszystkich tytułach oznaczonych tym stylem. Prawda, że rewelacyjny (i rewolucyjny) wynalazek? Takie podejście pozwala szybko zmienić kolorystykę, kształt czy właściwości określonego stylu przypisanego konkretnym elementom HTML.

Jak zdefiniować swoje style?

Własne style możesz nazwać dowolnie, w sposób dla Ciebie czytelny. Mogą nazywać się np. "naglowek", "akapitczerwony" lub "pogrubienie". Aby je stworzyć musisz zadeklarować je w osobnym pliku lub wprost na wybranej stronie WWW.

W nagłówku strony, w sekcji HEAD umieść swoją definicję stylu pomiędzy tagami STYLE.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html><head>

<style type="text/css"><!--

h1,td {color: green;}

.naglowek {color: red; font-size:16px;}

.pogrubiony {font-weight: bold;}

--></style>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">

<title>Tytuł strony</title>

</head><body>

Dalsza treść strony, gdzie będą używane Twoje style...

</body></html>

W przykładzie został zdefiniowany jeden styl dla elementów H1 i TD i dwa style o nazwach "naglowek" i "pogrubiony". Najłatwiejszą notacją (bo style można definiować na kilka sposobów) i chyba najczęściej spotykaną jest przypisanie stylu do elementu HTML. Inną popularną notacją jest kropka i nazwa stylu. Kropka określa, że styl jest selektorem klasy, czyli oznacza, że klasa będzie miała nadaną przez nas nazwę, którą można potem użyć w definicji klasy dla elementu HTML.

Brzmi nieco zawile? Też tak myśle. Teorią się nie przejmuj, ważniejsza jest praktyka. Pamiętaj o kropce i za nią umieść nazwę stylu. Następnie w nawiasach klamrowych musisz opisać jakie cechy będzie miał stworzony przez Ciebie styl.

Wszystkie tytuły H1 i komórki tabeli TD będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 16 pikseli (font-size:16px;). Styl pogrubiony będzie tylko pogrubiony (font-weight: bold;).

Dowolny element HTML, który ma mieć styl naglowek powinien mieć atrybut class z nazwą naszego stylu (ale już bez kropki):

<p class=naglowek>Nagłówek strony</p>

Bez problemu możesz ten styl przypisać kilka razy do różnych elementów na stronie:

<p class=naglowek>Nagłówek strony</p>

<div class=naglowek>Inny nagłówek strony</div>

<a href="(strona) " class=naglowek>Duży link</a>

Kropka oznacza, że wszystkie elementy na stronie (polecenia HTML), dla których zdefiniujesz klasę "naglowek" będą miały ten styl. Gdy przypiszesz styl do elementu HTML, tylko te elementy mają określone właściwości (tak zrobiliśmy z komórkami tabeli i tytułami H1)

Jak już wiesz, aby kawałek tekstu miał pogrubiony styl, wystarczy go zdefiniować z kropką na początku:

.pogrubiony {font-weight: bold;}

Tak określony styl może się odnościć do dowolnych elementów HTML - możesz pogrubić akapity, tabele, linki i generalnie wszystkie tagi języka HTML. Dodając przed kropką nazwę elementu HTML, możesz ograniczyć działanie tego stylu tylko do wybranych poleceń języka HTML. Zastosujmy pogrubienie tylko w akapitach:

P.pogrubiony {font-weight: bold;}

I użyjmy go w praktyce:

<p class=pogrubiony>TYLKO TEN tekst zostanie pogrubiony</p>

<br class=pogrubiony>ten tekst nie zostanie pogrubiony</br>

<div class=pogrubiony>Ten tekst nie zostanie pogrubiony</div>

<a href="(strona) " class=pogrubiony>Link bez pogrubienia</a>

Takie zachowanie pozwala stworzyć wiele stylów o nazwie "pogrubiony", ale każdy będzie odnosił się tylko do określonego elementu języka HTML:

P.pogrubiony {font-weight: bold;}

BR.pogrubiony {font-weight: bold; color: red;}

Łatwo zapamiętać, że brak nazwy elementu przed kropką dotyczy wszystkich tagów HTML, a wyszczególniona nazwa przed kropką we własnej definicji stylu ogranicza działanie stylu tylko do tego elementu języka HTML.

Jest jeszcze jeden zapis własnej definicji stylu, gdzie zamiast kropki stosuje się znak #:

#zielony {color: green;}

Tym razem odwołanie do stylu nie następuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id:

<p id=zielony>zielony akapit</p>

Ważną rzeczą jest aby na jednej stronie nie było dwóch elementów HTML (np. dwóch lub więcej akapitów), które mają taką samą nazwę ID. Identyfikator jest unikalny. Jeżeli chcesz stosować więcej identyfikatorów musisz je np. ponumerować:

#zielony1 {color: green;}

#zielony2 {color: green;}

#zielony3 {color: green;}

<p id=zielony1>zielony akapit</p>

<span id=zielony2>zielony akapit</span>

<p id=zielony3>zielony akapit</p>

Tutaj również można ograniczyć zakres działania stylu dla wybranego elementu dodając jego nazwę przed definicją stylu:

P#zielony {color: green;}

W praktyce zapis z identyfikatorami ID nie jest często stosowany, ponieważ z definicji każdy element HTML musi mieć inny identyfikator i tych styli byłoby bardzo dużo. Natomiast styl zapisany w ten sposób ma zastosowanie w dynamicznym HTML, a więc w powiązaniu z JavaScriptem i DOMem, gdzie odwołania do elementów HTML możliwe są poprzez identyfikatory ID.

Zdecydowanie najczęściej spotykany jest przykład pierwszy, gdzie po kropce podajesz nazwę stylu, a w nawiasach określasz wszystkie style i parametry jakie mają być przypisane do danej nazwy. Potem w elementach HTML wystarczy za pomocą atrybutu class przypisać określoną nazwę stylu, aby go użyć w dowolnym miejscu na stronie.

Dołączanie stylów

Jednym ze sposobów jest umieszczenie stylów wprost przy elemencie, którego dotyczy korzystając z atrybutu style. Można w ten sposób nadać konkretny styl wybranemu elementowi HTML, bez konieczności stosowania arkusza zewnętrznego lub wewnętrznego:

<p style="color:red; font-size:16px;">

dowolny akapit

</p>

Takie rozwiązanie jest stosowane wyjątkowo, gdy trzeba zmienić wygląd jednego elementu (lub kilku elementów) na stronie lub nadpisać wygląd konkretnego elementu HTML, który wcześniej został zadeklarowany w stylach zewnętrznych lub osadzonych na stronie.

Nie powinno się stosować stylów wprost w elementach HTML, ponieważ trudno je potem znaleźć w kodzie strony i kłopotliwe jest ich poprawianie. Mimo chaosu, jaki może wprowadzić taki zapis, jest on w praktyce dosyć często stosowony z lenistwa, bo łatwiej dokonać zmiany stylu konkretnego elementu niż wypisywać wszystkie style w zewnętrznym arkuszu i potem przypisywać każdy ze stylów do poszczególnych elementów.

Definicje stylów można umieścić wprost na konkretnej stronie WWW, w sekcji nagłówkowej strony, czyli pomiędzy tagami <head> i </head>, np. zaraz po określeniu tytułu dla strony:

<head>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">

<title>Tytuł strony </title>

<style type="text/css"><!--

body, p {

font-family: Arial, sans-serif;

font-size: 14px;

}

a { text-decoration:none; }

.menu:active {color:navy;}

.menu:link {color:navy;}

.menu:visited {color:navy;}

.menu:hover {color:#3333cc;}

--></style>

</head>

Style są umieszczone wprost na konkretnej stronie WWW i nawet jeżeli ktoś skopiuje stronę na dysk lokalny i nie będzie miał połączenia z Siecią, w dalszym ciągu style będą w dokumencie zachowane.

To bardzo dobry sposób osadzania stylów w przypadku języków skryptowych (np. PHP), ponieważ style można dołączyć z jednego pliku za pomocą dyrektywy include.

Nieco gorzej jest z wykorzystaniem tej metody w wypadku statycznych stron HTML, gdyż modyfikacja stylu wymaga zmodyfikowania zapisu na wszystkich stronach należących do witryny. Wtedy wygodniej skorzystać z metody dołączenia zewnętrznego arkusza z dowolnego miejsca w Sieci lub z wybranego katalogu na stronie WWW.

Zamiast osadzać style CSS na stronie można je dołączyć z zewnętrznego pliku za pomocą elementu link:

<head>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">

<title>Tytuł strony </title>

<link rel="stylesheet" type="text/css" href="/style.css">

</head>

Można też podać pełną ścieżkę do serwera i dołączać więcej niż jeden arkusz stylów:

<link rel="stylesheet" type="text/css" href="http://serwer1/style.css">

<link rel="stylesheet" type="text/css" href="http://serwer2/style.css">

Dołączany plik style.css powinien zawierać od razu definicje stylów, jak poniżej:

body, p {

font-family: Arial, sans-serif;

font-size: 14px;

}

a { text-decoration:none; }

input { width:200px; }

Ten sposób dołączania stylów jest bardzo wygodny, ponieważ w praktyce istnieje tylko jeden plik ze stylami, który może być dołączany z dowolnej lokalizacji w Sieci. Modyfikacje wystarczy przeprowadzać tylko w jednym pliku. Jego wadą jest to, że podczas zapisywania strony na dysk, style mogą zostać zgubione i bez dostępu do pliku ze stylami strona może prezentować się mało ciekawie.

Dopuszczalna jest również kombinacja zastosowania stylów z zewnętrznego pliku w stylach znajdujących się na stronie:

<style type="text/css"><!--

@import url(http://serwer.pl/katalog/style.css)

body, p {

font-family: Arial, sans-serif;

font-size: 14px;

}

a { text-decoration:none; }

--></style>

W tym celu można skorzystać z polecenia @import dołączającego do stylów na stronie dodatkowe style znajdujące się w pliku w dowolnym miejscu w Sieci. Style znajdujące się poniżej dołączanego stylu mogą rozszerzyć style z pliku lub zastąpić je na konkretnej stronie.

Co jeszcze?

Szczerze mówiąc, o stylach można napisać całkiem sporą książkę, a przedstawione powyżej podstawy mają tylko zaznajomić Cię z tematyką i pomóc szybko zacząć je stosować na stronach. Nie przejmuj się, jeżeli od razu nie zroumiesz o co w tym wszystkim chodzi. Myśle, że każdy początkujący webmaster miał problemy ze zrozumieniem wszystkich zawiłości stylów CSS. Mam nadzieję, że ten krótki, ale treściwy wstęp, nieco wyjaśnił Ci posługiwanie się stylami w praktyce.

 

Kodowanie polskich znaków w ISO-8859-2

Polskie znaki narodowe, często nazywane potocznie "ogonkami", sprawiają problemy nie tylko autorom stron WWW. Do dziś istnieje wiele programów, w których zapisuje się je w różnych standardach kodowania. Doliczyłem się w sumie ok. 20 sposobów zapisywania polskich ogonków! Obecnie obowiązującą normą jest standard ISO-8859-2 (odpowiada on Polskiej Normie PN-93 T-42118). I rób wszystko co w Twojej mocy, aby strony WWW były zapisane właśnie w tym standardzie.

Każda strona WWW powinna mieć w sekcji HEAD następujący element META:

<head>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">

</head>

Informuje on przeglądarkę, że znaki na stronie WWW zapisane są w standardzie ISO-8859-2 i dzięki temu widzimy poprawnie polski litery. Przeglądarka mając taką deklarację sama przestawia się na zalecany przez autora zestaw znaków.

Może dwa słowa o standardach i kodowaniu... Komputer udostępnia nam do dyspozycji 256 różnych znaków zapisanych w tablicy znaków ASCII. Są to liczby, litery, znaki specjalne, wykrzykniki, małpki i jeszcze wiele innych, nieraz niewidocznych znaków, które pełnią jednak ważną rolę w komputerze. Wśród nich muszą się też znaleźć polskie znaki, których tradycyjny (amerykański) zestaw znaków nie przewiduje.

Aby je tam umieścić, trzeba z pewnych znaków zrezygnować. Ponieważ każdy standard kodowania rezygnuje z innych znaków, więc w tablicy ASCII polskie znaki znajdują się na różnych pozycjach w różnych standardach. Komputer znaki rozpoznaje po ich numerze - wciskając klawisz z literą A, informujemy komputer, że na ekranie ma się pojawić symbol o numerze 65, litera B ma numer 66, itd. Można to łatwo sprawdzić pisząc w języku HTML kod znaku, np. &#65; (litera A). Więcej o kodach znaków dowiesz się z artykułu Znaki i ich kody liczbowe

Aby móc korzystać z polskich znaków trzeba mieć polską czcionkę. Linux ma instalowaną domyślnie czcionkę ISO-8859-2 więc problem z głowy, natomiast Windows ma czcionkę w standardzie Windows-1250. Różni się ona jednak od ISO-8859-2 pozycją sześciu liter w tablicy ASCII (ąśźĄŚŹ). Aby móc pisać i widzieć czcionkę ISO trzeba nieco pokombinować...

Windows nie udostępnia polskich znaków ISO, ale nic straconego. Czcionki ISO (np. autorstwa firmy EuroFont) możemy pobrać z Internetu i po zainstalowaniu jej w edytorze tekstu bez problemu będziemy widzieć wszystkie polskie znaki w standardzie ISO. Jest też malutki programik KeyPlus autorstwa Adama Strzeleckiego, który pozwala pisać w standardzie ISO. Możemy więc pisać i widzieć czcionkę ISO-8859-2. O to chodziło.

Bardziej rozbudowane edytory do stron WWW mają wbudowane mechanizmy do konwersji znaków i nawet nie zauważymy problemu polskich znaków. Piszemy tak, jak zawsze, a otrzymane strony WWW są już poprawnie zakodowane z polskimi znakami w ISO-8859-2.

Oczywiście nie zawsze możemy zainstalować polską czcionkę ISO. Być może mamy też wiele dokumentów napisanych w Windowsie. Nic straconego. W Internecie dostępnych jest wiele programów do konwertowania tekstów z jednego standardu do innego, np. napisany przez Michała Jaskólskiego program Ogonki 97. Warto korzystać z takich narzędzi w razie potrzeby.

Na koniec niespodzianka. Strony WWW można też tworzyć w standardzie Windows-1250, czyli tym, w którym domyślnie piszemy korzystając z systemu operacyjnego Windows. Nie jest to jednak sposób zalecany i jeżeli tylko możesz, przestaw się na ISO-8859-2. Jeżeli już koniecznie musisz publikować strony w standardzie Windows-1250 nie zapomnij umieścić w dokumencie HTML innej zawartości elementu META:

<head>

<meta http-equiv="content-type"

content="text/html; charset=windows-1250">

</head>

 

Projektuj strony dostępne dla każdego

Odbiorcami naszych stron WWW są w większości osoby cieszące się dobrym zdrowiem, używające popularnych przeglądarek, nie mające kłopotów ze sprzętem komputerowym czy wyświetlaniem grafiki. Jednak o klasie autora stron WWW świadczy takie przygotowanie witryny, aby korzystać z niej mogli także pozostali użytkownicy Sieci.

Na co zwrócić uwagę? Po prostu wczuj się w rolę tych, którzy nie dysponują najnowszą technologią lub nie mają możliwości aby poprawnie odebrać zawartość stron internetowych. Wbrew pozorom takich osób jest sporo. Czasem mogą to być osoby ważne, mające wpływ na dalsze losy Twojej strony.

Przeglądarki

Przeciętny internauta wymieni cztery przeglądarki: Internet Explorer, Netscape Navigator, Mozilla i Opera. Pewnie część osób słyszała jeszcze o Lynxie - przeglądarce pracującej w trybie tekstowym, bez grafiki. Tymczasem na świecie wykorzystywanych jest ponad 50 różnych przeglądarek stron WWW, a także równie wiele przeglądarek stosowanych w tzw. kioskach multimedialnych czy budkach informacyjnych, spotykanych np. na dworcach kolejowych lub wystawach. Wiele z tych przeglądarek pracuje na różnych systemach operacyjnych, co powoduje kolejne ograniczenia, np. ilości stosowanych kolorów lub rozdzielczości ekranu.

Każda z przeglądarek jest nieco inna, zwykle nie obsługuje najnowszych standardów WWW, a części poleceń HTML nie wykonuje wcale. Jeżeli Twoja strona aż roi się od grafik, użytkownik przeglądarki tekstowej zobaczy pustkę i będzie rozczarowany. Gorzej, gdy nie będzie mógł z niej korzystać - nie zobaczy przecież menu i nie będzie wiedział co ma kliknąć aby przejść dalej. Wymogiem jest więc stosowanie atrybutu alt w grafikach istotnych dla użytkownika.

Innym problemem jest rozdzielczość ekranu i ilość kolorów. U Ciebie ekran jest duży i wszystko na nim możesz pomieścić, ale użytkownik palmtopa czy organizera będzie musiał stronę przewijać nie tylko w pionie, ale też w poziomie. Jeżeli wykorzystuje tylko 16 kolorów, to na niewiele zdadzą mu się Twoje kolorowe zdjęcia. Może też być sytuacja odwrotna - Ty masz niewielką rozdzielczość (np. 800x600), ale użytkownik dysponuje dużym ekranem i rozdzielczość ustawi sobie na 1280x1024. Nagle strona staje się dla niego mała, a teksty, które u Ciebie składały się z kilku wierszy zajmują tylko jeden wiersz... Całość może wyglądać nieczytelnie lub mało estetycznie.

Przed opublikowaniem strony warto przetestować jej wygląd przynajmniej w trzech najpopularniejszych przeglądarkach. Opera pozwala wyłączyć grafikę co dodatkowo pokaże, czy osoba bez grafiki będzie mogła w dalszym ciągu korzystać z serwisu. Utrudnieniem jest fakt, że Internet Explorer potrafi naprawiać drobne (ale czasem istotne) błędy w kodzie HTML, np. niezamknięte tabele. Więc strona która wygląda poprawnie, wcale nie musi być dobrze napisana i w innych przeglądarkach może wyglądać okropnie.

Osoby niepełnosprawne

Czemu osoby niewidome nie odwiedzają witryn wykonanych w technologii Flash? Bo nie mają szans zobaczyć grafik i tekstów zaszytych w kodzie animacji. Za to potrafią spędzić wiele godzin na prostych witrynach, gdzie nie ma wiele grafik, a cały tekst znajduje się na jednej stronie WWW. Bardzo wiele osób niewidomych poznałem dzięki Reporterowi - publikowane tam opowiadania i artykuły łatwo mogli odczytać za pomocą syntezatorów mowy. Nic im nie przeszkadzało w skopiowaniu artykułu i odłożeniu go na potem.

Rozmowa z osobą niewidomą, korzystającą z naszych stron WWW może być bardzo pouczająca. To trochę tak, jakbyśmy mieli korzystać z serwisu bez użycia monitora. Jeżeli to możliwe, nie utrudniaj korzystania osobom, które i tak mają z tym kłopoty. Ułatw im życie - docenią to z pewnością.

Wiele osób niedowidzi, a część ma kłopoty z rózróżnianiem kolorów. Czytanie z ekranu męczy wzrok i po kilku godzinach pracy przed monitorem łatwo o przeoczenie małych elementów lub pomyłkę w odcieniach barw poszczególnych wykresów. Staraj się aby strony były maksymalnie czytelne. Dobieraj tak kolory tła, aby nie męczyły wzroku po kilkunastu minutach czytania.

Spróbuj pochodzić przez chwilę po serwisie bez korzystania z myszy. Nie każdy ma sprawną rękę i mysz. Część osób korzysta z różnych manipulatorów - płytek dotykowych, małych gumowych pałeczek przypominających dżojstik, kulek, rysików. Sprawne ręce to cenna rzecz, ale wyobraź sobie, że z Twojego serwisu korzystają też osoby starsze, którym ręka drży i nie mogą łatwo wycelować myszką w mały, graficzny odnośnik lub link w postaci miniaturowego napisu. Dla nich korzystanie z serwisu będzie trudne, więc będą sfrustrowani, że nie mogą trafić w odnośnik. Będzie im przykro, że nikt o nich nie pomyślał.

Nie tylko monitor

Ekran monitora to nie jedyne urządzenie do prezentowania strony WWW. Można je przecież wydrukować, zsyntetyzować i przedstawić w postaci głosu elektronicznego lektora lub przenieść np. na specjalne czytniki alfabetu Braila, z których mogą korzystać niewidomi. Wiele osób kopiuje stronę do edytorów tekstu lub zapisuje ją na dysk lokalny. Dobra strona daje się przenieść do każdej z tych postaci. Czasem warto zadbać o kilka wersji swojej strony, np. większe opracowania można przygotować w postaci stron HTML i dokumentu PDF.

5 maja 1999 r. organizacja W3C opublikowała dokument "Web Content Accessibility Guidelines 1.0", który opisuje jak przygotować strony aby były one dostępne dla różnych urządzeń lub osób niepełnosprawnych. Warto go poznać, jeżeli chcesz tworzyć serwisy uniwersalne.

Zauważ, że już CSS2 przewiduje obsługę stron WWW na takich urządzeniach, jak: aural - syntezatory mowy, braille - dotykowe czytniki Braila, embossed - drukarki Braila, handheld - czytniki w urządzeniach naręcznych (np. palmtopy), print - drukarki, projection - projektory, screen - monitory komputerowe, tty - terminale, tv - telewizory.

Inne drobiazgi

Jest jeszcze wiele istotnych udogodnień, ważnych dla odbiorców naszych stron. Chociażby umożliwienie kontaktu z czytelnikiem bez potrzeby korzystania z programu pocztowego. Mały formularz z polem na tekst umożliwi wysłanie listu z dowolnego miejsca, chociażby z kawiarni internetowej. Ważne jest też podanie adresu e-mail, w formie łatwej do kopiowania i przenoszenia do edytora tekstu.

Warto stosować streszczenia i zapowiedzi tekstów. Aby oszczędzić czas osoby niewidomej można w dwóch zdaniach napisać o czym jest długi tekst. Podobnie w wypadku dokumentów nietypowych warto poinformować jaką mają objętość. Gdy ktoś korzysta z wolnego modemu i próbuje otworzyć dokument PDF mający 10 MB, a nie wie, jak długi jest ten dokument, może myśleć, że plik jest uszkodzony bo wciąż nie widać treści. Gdyby wiedział, że musi poświęcić wiele czasu na otwarcie go, być może nie podjąłby się pobierania pliku albo zrobiłby to w pracy, gdzie ma szybsze łącze.

Opisane przypadki nie są tylko rozważaniami teoretycznymi. Wiele serwisów, organizacji, dzienników i instytucji na całym świecie stara się sprostać opisanym przypadkom. Sam często korzystam z takich udogodnień, pomimo tego, że jestem sprawny i korzystam z nowoczesnego sprzętu.

 FTP, czyli jak dodać strony na serwer

Gdy tylko skończysz tworzyć stronę WWW na własnym komputerze oraz poprawisz wszystkie błędy i niedociągnięcia, stwierdzisz pewnie, że chcesz teraz pokazać ją całemu światu. I słusznie, bo taki jest cel tworzenia serwisów internetowych. Zanim jednak zaprezentujesz stronę innym, musisz podjąć kilka ważnych decyzji.

Wybór dostawcy usług internetowych

Strony musisz umieścić na serwerze WWW. Jest to komputer, który powinien gwarantować dostęp do stron przez całą dobę. Musi być szybki, wydajny, bezpieczny i niezawodny. Serwery WWW udostępniają dostawcy usług internetowych, nazywani również po polskawemu "prowajderami" lub ISP (Internet Service Provider).

Firmy ISP pobierają opłaty za utrzymywanie stron WWW. Nie martw się, jest też sporo firm i portali, które pozwalają "bezpłatnie" umieszczać strony w Internecie. Bezpłatne konta na strony udostępniają większe portale.

Darmowe usługi są bardzo popularne i często wykorzystują je młodzi webmasterzy lub osoby prywatne, które nie tworzą zaawansowanych witryn. Pomimo tego, że mają szereg wad, są często jedynym sposobem zaistnienia w Internecie. Co prawda nie płacisz wtedy za utrzymywanie stron, jednak zgadzasz się na emitowanie reklam innych firm na Twojej stronie. Często musisz też podać swój adres e-mail i informacje o sobie, które mogą być wykorzystywane do przysyłania listów reklamowych. Ponieważ jest to usługa darmowa, nie masz wsparcia technicznego i firma nie gwarantuje wysokiej jakości usług. Dla amatora wystarcza, ale gdy chcesz czegoś więcej warto zdecydować się na usługi wyspecjalizowanych firm, gdzie opłaty nie są wielkie, ale masz znacznie szerszy pakiet usług.

Dobrym rozwiązaniem jest też porozmawianie ze znajomymi. Mogą dysponować własnym serwerem i być może bezpłatnie zamieszczą Twoją stronę WWW. Jest to rozwiązanie lepsze niż darmowe usługi, bo wtedy nikt Cię o nic nie wypytuje i nie umieszcza reklam w Twoim serwisie. Jeżeli administrator jest uczynny, może też założyć Ci poddomenę, np. nazwa.jakisserwer.pl

Wybór programu FTP

Jeżeli już wybrałeś firmę lub serwis, w którym będziesz trzymać swoje strony WWW, trzeba je tam jakoś umieścić... Służą do tego programy nazywane potocznie "programy do FTP". Zwykle w swojej nazwie mają skrót FTP, który oznacza protokół przesyłania plików (File Transfer Protocol). Musisz więc wybrać program, którym będziesz się posługiwał przy przesyłaniu plików.

Bez względu na to, jaki program wybierzesz, wszystkie działają bardzo podobnie - różnią się tylko ilością dostępnych funkcji, wyglądem i wygodą działania. Program FTP pozwala przenosić dokumenty między własnym komputerem i serwerem zdalnym (np. dostacy usług internetowych). Umożliwia kasowanie, kopiowanie, podglądanie i sprawne zarządzanie nimi.

Zakładając konto u dostawcy usług lub w bezpłatnym serwisie otrzymasz trzy bardzo ważne informacje:

• nazwę serwera FTP, np. www.reporter.pl
• login (Twój identyfikator), np. czarek
• hasło dostępu, np. Xcr423hJ

Nazwa serwera FTP to często nazwa serwisu poprzedzona prefiksem "ftp", np. ftp.reporter.pl. Może być też identyczna z nazwą serwera WWW, czyli www.reporter.pl. Znajomość nazwy serwera FTP jest niezbędna, bo właśnie na nim będziesz trzymać strony. Login i hasło wymagane są do identyfikacji. Pamiętaj aby pod żadnym pozorem nie podawać hasła nikomu, nawet administratorom serwisu. Oni i tak mają dostęp do każdej części serwera. Hasło jest tylko i wyłącznie do Twojej wiadomości.

Poszukaj w programie FTP opcji konfiguracyjnych. Wpisz w odpowiednie pola nazwę serwera, login i hasło. Teraz możesz połączyć się z serwerem FTP dostawcy. Zwykle na serwerze FTP jest katalog o nazwie www, do którego możesz przesłać wszystkie strony WWW z dysku. Czasem nazwa katalogu może być inna, zapoznaj się zawsze z dokumentacją, jaką udostępniają poszczególni dostawcy usług.

W zależności od programu, kopiowanie plików z własnego dysku na serwer może polegać na przeciąganiu ich myszą lub zaznaczeniu i wciśnięciu odpowiedniego guzika z menu. Po chwili zostaną one przetransportowane na serwer i już każdy może je zobaczyć w Internecie. Jeżeli plików masz wiele i są one duże (np. muzyka, wideo), czas ich przesyłania może być długi.

Musisz się jeszcze dowiedzieć, pod jakim adresem będzie widoczna Twoja strona. Nazwy katalogów na serwerze FTP nie muszą odpowiadać ścieżkom w adresie strony. A więc fakt, że pliki kopiujesz do katalogu www, nie oznacza, że Twoja strona będzie widoczna pod adresem: http://jakisserwer.pl/www/.

Zasady przesyłania

Warto znać podstawowe zasady przesyłania stron. Często okazuje się, że pomimo skopiowania stron na serwer, nie można ich zobaczyć... Najważniejszą sprawą jest wielkość liter w nazwach plików. Pamiętaj, że ten sam plik pisany dużymi i małymi literami, to zupełnie inne dokumenty! Strona INDEX.HTML nie oznacza strony index.html - jeżeli to tylko możliwe staraj się używać zawsze małych liter, wtedy nie będziesz mieć problemu z nazwami. Dotyczy to nazw plików i odnośników w treści stron WWW. Niektóre programy umożliwiają automatyczną zamianę wszystkich znaków w nazwie plików na małe podczas ich przesyłania. Osobiście korzystam z tego udogodnienia i nie muszę pamiętać o problemie z wielkością znaków.

Pamiętaj o poprawnych ścieżkach i katalogach. Również zapisuj je z małych liter. Jeżeli nie widzisz obrazków, sprawdź czy pliki graficzne są pobierane z odpowiednich katalogów i czy odpowiadają one katalogom na serwerze FTP. Jeżeli używasz skryptów CGI, na serwerze FTP z pewnością będzie gdzieś katalog /cgi-bin/ umieść je w tym miejscu nadając im odpowiednie prawa (czytanie i wykonywanie dla wszystkich, zapisywanie tylko dla użytkownika).

Sprawdź ile zajmuje strona WWW. Zwykle każde konto ma określoną pojemność, np. 10 MB. To dużo dla zwykłego tekstu, ale jeżeli chcesz umieszczać pliki muzyczne i wideo, może okazać się, że po prostu zabraknie miejsca. Musisz poprosić o zwiększenie limitu lub dokupić większą przestrzeń w ramach swojego konta. Może też być tak, że objętość dotyczy konta WWW i poczty e-mail. Jeżeli masz dużo poczty, możesz nie mieć miejsca na strony WWW i również trzeba poprosić o zwiększenie limitu pojemności.

Czasem nawet najlepszym i najdroższym dostawcom usług zdarza się, że nie są dostępni w Sieci. Chwilowa awaria łącza lub wymiana serwera może powodować przerwy w działaniu. W razie kłopotów z połączeniem, sprawdź, czy administratorzy nie zapowiedzieli awarii. Upewnij się też, że jesteś prawidłowo połączony do Internetu.

Nie działa!!! Co robić???

Jeżeli wszystko dokładnie sprawdzisz i przeczytasz regulamin oraz instrukcje obsługi konta i programu FTP, po chwili będziesz się cieszyć własną stroną WWW dostępną w Internecie. Gdy w dalszym ciągu masz problemy z konfiguracją, zwróć się o pomoc do swojego administratora. Dobre serwisy komercyjne udostępniają bezpłatną pomoc nawet 24 godziny na dobę (jeżeli nie jest to bardzo pilny problem, nie dzwoń do administratora o pierwszej w nocy). Z serwisami darmowymi może być gorzej, bo bywa, że nikt nie odpisuje na maile. Wtedy popytaj innych użytkowników tego serwisu (jeżeli wszyscy jeszcze z niego nie zrezygnowali), a z pewnością pomogą.

W przypadku kłopotów nigdy nie pisz czegoś w stylu "Nie mogę uruchomić stron WWW. Co robić?". Bo odpowiedź (jeżeli w ogóle ktoś odpisze) będzie równie lakoniczna "Przeczytaj instrukcję obsługi". Zawsze gdy zgłaszasz problem opisz w miarę dokładnie jakiego programu używasz, w jakich okolicznościach występuje błąd, jakie są objawy i czy jesteś początkujący. Im dokładniej opiszesz problem, tym szybciej dostaniesz konkretną odpowiedź. Zaoszczędzisz więc czasu sobie i ludziom, którzy poświęcą czas aby Ci pomóc.

XHTML 1.0 - następca języka HTML

Język HTML od wersji 4.01 nie jest już dalej rozwijany - zastąpił go XHTML, obecnie w wersji 1.1 (jednak tekst dotyczy łatwiejszej do opisania wersji XHTML 1.0). Nazwa brzmi może groźnie, ale w praktyce jest on niemal identyczny z HTML 4.01, którego dobrze znasz z mojego kursu.

Kilka nowych reguł bardzo łatwo możesz opanować i już po chwili będziesz w stanie pisać strony zgodne z językiem XHTML. Po co więc powstał nowy język? Dla wygody. HTML został znormalizowany aby mógł być zgodny z językiem XML, który określa zasady tworzenia innych języków używanych w elektronicznych publikacjach. Jest też łatwy do przetwarzania przez różne translatory XML.

Pisząc nowe strony dobrze jest stosować się do zasad określonych w XHTMLu, jeżeli jednak chcesz nadal używać tylko języka HTML 4.01 nic nie stoi na przeszkodzie aby zapomnieć o tym tekście zaraz po jego przeczytaniu. Nowe przeglądarki stron WWW będą cały czas obsługiwać HTML na równi z XHTMLem - przynajmniej w najbliższej przyszłości. Miliony dokumentów na całym świecie zostały napisane w języku HTML - nikt nie będzie ich nagle przerabiał do XHTMLa, bo byłaby to czynność pozbawiona sensu. Warto jednak znać różnice pomiędzy językami.

Deklaracja dokumentu

Każda strona w języku XHTML musi zaczynać się od określenia wersji języka XML (obecnie jest to wersja 1.0) i sposobu kodowania znaków. Dla języka polskiego będzie to iso-8859-2:

<?xml version="1.0" encoding="iso-8859-2"?>

Zwróć uwagę na znak zapytania (nie ukośnik), "zamykający" wersję XML. Następnie trzeba zadeklarować odpowiednią definicję DTD, czyli określić reguły języka. Musimy wybrać jedną z trzech wersji.

1. Strict: strona będzie napisana zgodnie z deklarowanym standardem i nie dopuszcza innych elementów. Trudno jest napisać taką stronę, ale właśnie do takiego ideału dążymy...

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">

2. Transitional: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. W większości wypadków dobrze jest użyć tej właśnie definicji...

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

3. Frames: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. Ten wariant stosuje się gdy witryna zawiera ramki.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"DTD/xhtml1-frameset.dtd">

Powyższe polecenia przypominają element !DOCTYPE z języka HTML.

Trzeba również określić tzw. przestrzeń nazw. W języku XML sami decydujemy jaką rolę pełnią wszystkie elementy i ich atrybuty. Każdy element języka HTML może mieć wiele znaczeń, więc trzeba poinformować przeglądarkę co ma zrobić gdy natrafi np. na element img lub jak zareagować na atrybut src. W tym celu definiuje się przestrzeń nazw, gdzie określone są sposoby użycia poszczególnych poleceń. Odpowiedzialny jest za to atrybut xmlns (czyli XML namespace). Dla języka XHTML będzie to następujący fragment kodu:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

Szablon strony

Znając już podstawowe elementy możemy utworzyć szablon strony. Nie różni się on bardzo od szablonu w języku HTML.

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Tytuł strony</title>

</head>

<body>

<p>Przykładowy akapit</p>

</body>

</html>

Czas na szczegóły...

1. Zagnieżdżanie. W języku XHTML istotna jest kolejność otwierania i zamykania tagów. W HTML również powinniśmy o tym pamiętać, ale tutaj ma to kluczowe znaczenie. Nie można napisać:

To <b>nie jest poprawna <i>kolejność</b> elementów</i> - są skrzyżowane!

Trzeba też pamiętać, aby element A nie zawierał innych elementów A. PRE nie może zawierać elementów IMG, BIG, SUB, SUP, SMALL i OBJECT. BUTTON nie może zawierać elementów INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET, IFRAME i ISINDEX. LABEL nie może zawierać innych elementów LABEL, a FORM nie może zawierać innych elementów FORM.

2. Zamykanie znaczników. Każdy znacznik musi być zamknięty, nawet jeżeli nie ma znaczników zamykających. Brzmi to może dziwnie, bo jak zamknąć element <br>? Jest na to sposób - wystarczy użyć go w postaci <br />, podobnie jak np. <img src="zdjecie.jpg" />. Pamiętaj o spacji przed ukośnikiem, bo niektóre współczesne przeglądarki mogą mieć problem gdy odstępu nie będzie.

3. Wielkość liter. Wszystkie elementy i atrybuty muszą być zapisywane małymi literami. Wielkość znaków w XHTML ma znaczenie, więc co innego znaczy <B> (to nie jest pogrubienie), a co innego <b> (to jest pogrubienie). W całym kursie stosuję duże litery dla atrybutów aby kurs był bardziej czytelny. W XHTMLu elementy pisane są z użyciem małych liter.

4. Cudzysłów. Wszystkie atrybuty muszą być zapisane w cudzysłowach. Błędem jest napisanie <table align=left width=100>. Prawidłowo powinno być: <table align="left" width="100">.

5. Atrybuty puste. W HTML stosowane są atrybuty puste (logiczne), np. <hr noshade>. W XHTMLu muszą mieć przypisane wartości. Ponieważ nie mają wartości, przypisuje się im własną nazwę. Po zamianie na XHTML przykład wygląda tak: <hr noshade="noshade" />.

6. Znaki specjalne. Trzeba uważać przy stosowaniu znaków < i & w skryptach i deklaracjach CSS. Najlepiej zastępować je poprzez &lt; i &amp;.

7. Skrypty. Każdy skrypt powinien być "otoczony" przez następującą strukturę:

<script type="text/javascript">

<![CDATA[

dopiero tutaj umieść skrypt

]]>

</script>

8. Atrybut ID Zamiast atrybutu name stosuj id. Atrybut name nie jest zalecany i nie powinno się go używać w XHTML. Jeżeli używasz atrybutu name, uzupełnij element o atrybut id o takiej samej wartości.

Już znasz XHTML...

Jak widzisz, XHTML nie jest zbyt trudny, choć wydaje się nieco kłopotliwy w użyciu. To w zasadzie stary, dobrze znany HTML wzbogacony o pewne reguły, które dbają o zgodność zapisu z językiem XML.

 Gdy HTML przestaje wystarczać

Jeżeli dobrze opanujesz HTML i zaczniesz tworzyć bardziej zawansowane serwisy WWW, w pewnej chwili odkryjesz wiele niedoskonałości tego języka. Okazuje się, że w czystym HTMLu nie można stworzyć bazy danych z książkami, nie da się też napisać sklepu internetowego czy przetworzyć danych z formularza. Nie wspominając już o forach dyskusyjnych czy wyszukiwarkach stron WWW.

Nie znaczy to, że z języka HTML wkrótce zrezygnujesz. O nie! Jest on niezbędny, bowiem wyniki działania wszystkich skryptów i narzędzi pokazywane są w dalszym ciągu, jako zwykłe strony WWW napisane w języku HTML (ewentualnie z dołączonym skryptem). Jedyna różnica polega na tym, że strona staje się dynamiczna, a więc może za każdym razem wyglądać inaczej, czyli zawierać inne elementy języka HTML lub inne treści.

Dynamiczne strony

Aby lepiej zrozumieć ideę dynamicznych stron, zobacz jak zbudowane są serwisy prasowe publikujące aktualności. Tam nowe informacje pojawiają się nawet co kilka minut. Nikt przecież nie tworzy co chwilę nowej strony głównej z tytułami, które kierują do osobnych podstron, gdzie zamieszczane są poszczególne informacje. Byłoby to zbyt pracochłonne. Wyobraź sobie, co by się stało, gdyby nagle ktoś chciał zmienić wygląd wszystkich wiadomości - nie chciałbym być osobą, która musi ręcznie zmienić zawartość kilkunastu tysięcy osobnych dokumentów HTML!

Z problemem można sobie łatwo poradzić. Wystarczy skonstruować szablon strony, do którego z bazy danych wstawiane są w odpowiednie miejsca tytuły i treść informacji. W bazie danych są one zapisane jako zwykły tekst. Dopiero po ich pobraniu i wstawieniu w szablon strony WWW, który zawiera polecenia HTML, całość wysyłana jest do przeglądarki. Odbiorca widzi ją jako zwykła strona HTML. Różni się tylko nazwą - zamiast tradycyjnego index.html można spotkać np. index.php lub index.asp. Rozszerzenie określa język skryptowy, który został zastosowany do wygenerowania strony WWW.

Języki programowania pozwalają na przekazywanie różnych parametrów do wnętrza dokumentów. Wygląda to na przykład tak: index.php?id=1354. W ten sposób można poinformować program, że szablon ma być wypełniony informacją o określonym numerze ID, w tym wypadku jest to np. news numer 1354. Taki "trick" pozwala jedną stronę wykorzystać do wyświetlania wielu informacji w zależności, jakie dane zostały do niej przekazane.

Tym sposobem nie mamy już 10 tys. osobnych stron HTML, ale jedną stronę napisaną w wybranym języku programowania. Znając składnię języka możemy pobierać informacje z baz danych lub z innych serwisów, przetwarzać dokumenty, wyszukiwać informacje lub obsługiwać fora dyskusyjne.

Po stronie użytkownika

Część języków programowania uruchamianych jest w przeglądarce, która odpowiada za ich poprawne wykonanie. Sprawa wygląda podobnie, jak z językiem HTML - przeglądarka "czyta" kod i wykonuje go w swoim oknie. Użytkownik musi jednak mieć wersję przeglądarki (lub odpowiednią wtyczkę), obsługującą poprawnie wybrany język programowania.

Najczęściej jest to JavaScrypt i Java. Ponieważ każda przeglądarka różni się jednak nieco składnią poleceń, mogą pojawić się problemy z działaniem tych skryptów. Użytkownik może też zabronić przeglądarce wykonywania ich, przez co strona może stracić na jakości i czytelności.

Zaletą takiego rozwiązania jest szybkość działania. To przeglądarka wykonuje kod programu więc uruchamia się on znacznie szybciej niż przesłanie strony przez Internet. Natychmiast widać też efekty działania skryptu. Jeżeli skrypt nie pobiera dodatkowych danych przez Internet, można używać programu nawet po rozłączeniu się z Internetem (np. grać w gry napisane w Javie)

Języki JavaScript, JScript, ECMAScript

JavaScript (firmy Netscape) i JScript (Microsoftu) oraz ECMAScript (standard przemysłowy) funkcjonujące w zasadzie pod nazwą JavaScript to bardzo podobne języki, które można umieszczać na stronach WWW i mieszać je z HTMLem. Są bardzo przydatne gdy trzeba szybko poradzić sobie z prostym problemem, np. weryfikacją formularza lub wyświetleniem na stronie aktualnej daty z imieninami czy jakiegoś okienka z podpowiedzią. Oczywiście można je też stosować do bardziej zaawansowanych rzeczy - np. rozwijanych systemów menu.

JavaScript ma jednak poważną wadę - za jego wykonanie odpowiada przeglądarka, a ponieważ przeglądarki różnych firm inaczej interpretują polecenia języka JavaScript, wynik działania skryptu może być różny. W skrajnych przypadkach użytkownik nic nie zobaczy. Tym bardziej, że może wyłączyć w przeglądarce ten język lub jego przeglądarka może go wcale nie obsługiwać.

Do zalet należy niewątpliwie fakt, że nie trzeba za każdym razem przeładowywać strony aby zobaczyć efekty działania skryptu. W ten sposób można zrobić np. przyciski graficzne, które zmieniają się, gdy najedziemy na nie wskaźnikiem myszy.

Język Java

Potężny język pozwalający na umieszczenie na stronie WWW gotowego programu o dowolnym stopniu skomplikowania. Np. gry, edytora tekstów, arkusza kalkulacyjnego, interaktywnej mapy z pogodą. W wydzielonym miejscu na stronie można wstawić program nie ustępujący jakością programom tradycyjnym. Dodatkowo działa on w każdym systemie operacyjnym tak samo. Jedyna wada to fakt, że również wykonuje go przeglądarka, przez co nie zawsze można go uruchomić. Użytkownik może też wyłączyć działanie programów w Javie.

Po stronie serwera

Przeciwnością skryptów wykonywanych po stronie użytkownika są języki programowania wykonywane po stronie serwera. Serwer odpowiada za "wyprodukowanie" strony według naszych potrzeb i przesłanie jej w gotowej postaci do przeglądarki. Może to być czysty HTML lub wzbogacony również o skrypty wykonywane po stronie przeglądarki. Języki wykonywane po stronie serwera mają tą zaletę, że mogą współpracować z innymi aplikacjami uruchomionymi na serwerze, np. bazami danych. Mało tego - są niezależne od przeglądarki, więc każda otrzyma dokładnie ten sam wynik działania skryptu.

Najpopularniejszymi językami tego typu są PHP, PERL, ASP. Interfejs CGI pozwala na uruchamianie po stronie serwera programów w dowolnych językach, również w C. Dla programisty oznacza to dostęp do niemal wszystkich narzędzi znajdujących się na serwerze. Można w ten sposób zarządzać serwerem, dodawać nowych użytkowników, wysyłać pocztę, konfigurować i udostępniać różne usługi sieciowe oraz robić wiele innych rzeczy za pośrednictwem zwykłej przeglądarki stron WWW.

Język PHP

Szalenie popularny i niezbyt trudny język. Ma mnóstwo zalet i pozwala budować najbardziej skomplikowane serwisy i portale. Znając kilkanaście podstawowych poleceń można już pokusić się o tworzenie całkiem zaawansowanych serwisów. Udostępniają go obecnie wszyscy więksi dostawcy Internetu. Strony napisane w tym języku można poznać po rozszerzeniu nazwy, najczęściej .php.

Język PERL

Równie popularny, ale nieco trudniejszy do opanowania dla początkujących. Też pozwala budować najbardziej skomplikowane serwisy. Kiedyś, gdy nie było jeszcze PHP, był najpopularniejszym językiem skryptowym. Udostępniają go obecnie wszyscy więksi dostawcy Internetu. Strony napisane w tym języku można poznać po rozszerzeniu nazwy, najczęściej .cgi, .pl.

Technologia ASP

Produkt firmy Microsoft, więc wykorzystywany jest bardzo często na serwerach WWW tej firmy. Pozwala na zintegrowanie danych i programów pracujących pod kontrolą środowiska Windows. Zdecydowanie ustępuje popularnością językowi PHP. Jednak wielu twórców stron wybiera to rozwiązanie, jako najlepsze. Udostępniają go tylko wybrani dostawcy Internetu. Strony napisane w tym języku można poznać po rozszerzeniu nazwy, najczęściej .asp. Strony w ASP można pisać używając różnych języków, najczęściej są to VBScript, JScript, czasem PERL.

To nie koniec...

Powyższe języki są najpopularniejsze, ale nie jedyne. Narzędzi do tworzenia dynamicznych stron WWW jest wiele, a różne firmy oferują własne rozwiązania. Wybór odpowiedniego języka narzuca rodzaj i stopień zaawansowania serwisu WWW. Często też wykorzystuje się kilka języków jednocześnie.

Na początek proponuję Ci naukę języka PHP. Jest wystarczająco zaawansowany i jednocześnie na tyle prosty, że po jego opanowaniu w stopniu podstawowym możesz spokojnie konkurować z większymi serwisami. W Internecie znajduje się tysiące gotowych skryptów, więc wystarczy tylko umiejętność konfigurowania i dodawania ich do własnego serwisu, aby cieszyć się wyszukiwarką na stronie lub własnym forum. Wiele gotowych przykładów i skryptów opisanych jest w serwisie Web.Reporter.pl.

 

Przydatne tabele

 

Kolory na stronie WWW

Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając "bezpiecznego" zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, bezpiecznych 216 kolorów.

Dowolny kolor składa się z trzech barw podstawowych: czerwonej, zielonej i niebieskiej (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor.

Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF. W stylach CSS pojawia się jeszcze zapis dziesiętny koloru RGB w postaci rgb(RR,GG,BB), gdzie każda składowa może przyjmować wartości od 0 do 255. Bezpieczne kolory operują wielokrotnością liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiętnym (0, 51, 102, 153, 204, 255).

Można też używać nazw kolorów. Podstawowe 16 określeń pochodzi od nazw kolorów, które można było uzyskać na komputerach z kartą graficzną VGA (komputery pokazywały kiedyś tylko 16 kolorów): white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua.

Ostatecznie zwiększono jednak liczbę dostępnych nazw kolorów do 140. Tabela na końcu tekstu prezentuje wszystkie dostępne nazwy. Należy jednak pamiętać, że nie w pełni odpowiadają one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000 (nie ma takiego w tablicy bezpiecznych kolorów!).

Można nie zwracać uwagi na różnicę jeśli umieszczamy tylko zielony napis lub zieloną tabelę. Wtedy nawet lepiej jest stosować nazwy, bo nie trzeba zastanawiać się, jak zapisać kolor zielony za pomocą #RRGGBB. Informacja ta zaczyna nabierać znaczenia wyłącznie przy łączeniu bitmapy (GIF, JPEG) z kolorami na stronie WWW wprowadzonymi np. takimi instrukcjami:

color:#00ff66; - ustala kolor czcionki za pomocą stylu
background-color:#00ff66; - ustala kolor tła za pomocą stylu
<font color="#33ff22"> - ustala kolor czcionki
<tr bgcolor="blue"> - ustawia kolor rzędu komórek w tabeli
<td bgcolor="#cc9966"> - ustawia kolor komórki w tabeli
<body bgcolor="white"> - ustawia kolor tła strony

Grupa elementów wykorzystujących kolory:

BASEFONT, BODY, FONT, TABLE, TD, TH, TR

Grupa atrybutów wykorzystujących kolory:

alink, bgcolor, color, link, text, vlink

Grupa stylów wykorzystujących kolory:

active, background-color, border-bottom-color, border-color, border-left-color, border-right-color, border-top-color, color, link, outline, visited

Obecnie nie zaleca się stosowania atrybutów HTML. Powinno się je zamieniać na style CSS. W stylach, w miejsce #RRGGBB można wpisać kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub wartości RGB - rgb(20,20,99). Oto odpowiedniki:

• alink - A:active {color:#RRGGBB;}
• bgcolor - background-color:#RRGGBB;
• color - color:#RRGGBB;
• link - A:link {color:#RRGGBB;}
• text - color:#RRGGBB;
• vlink - A:visited {color:#RRGGBB;}

Projektując wygląd strony, warto zwrócić uwagę na dobór kolorów. W Internecie dostępne są serwisy wspomagające dobieranie kolorów i projektowanie bezpiecznych zestawów barwnych dla tabel, linków, tekstu czy tła. Takie narzędzie znajdziesz w serwisie Web.Reporter.pl.

zestawienie 216 "bezpiecznych" kolorów (HEX/RGB)

#FF0000
255 0 0

#FF0033
255 0 51

#FF0066
255 0 102

#FF0099
255 0 153

#FF00CC
255 0 204

#FF00FF
255 0 155

#FF3300
255 51 0

#FF3333
255 51 51

#FF3366
255 51 102

#FF3399
255 51 153

#FF33CC
255 51 204

#FF33FF
255 51 255

#FF6600
255 102 0

#FF6633
255 102 51

#FF6666
255 102 102

#FF6699
255 102 153

#FF66CC
255 102 204

#FF66FF
255 102 255

#FF9900
255 153 0

#FF9933
255 153 51

#FF9966
255 153 102

#FF9999
255 153 153

#FF99CC
255 153 204

#FF99FF
255 153 255

#FFCC00
255 204 0

#FFCC33
255 204 51

#FFCC66
255 204 102

#FFCC99
255 204 153

#FFCCCC
255 204 204

#FFCCFF
255 204 255

#FFFF00
255 255 0

#FFFF33
255 255 51

#FFFF66
255 255 102

#FFFF99
255 255 153

#FFFFCC
255 255 204

#FFFFFF
255 255 255

#CC0000
204 0 0

#CC0033
204 0 51

#CC0066
204 0 102

#CC0099
204 0 153

#CC00CC
204 0 204

#CC00FF
204 0 255

#CC3300
204 51 0

#CC3333
204 51 51

#CC3366
204 51 102

#CC3399
204 51 153

#CC33CC
204 51 204

#CC33FF
204 51 255

#CC6600
204 102 0

#CC6633
204 102 51

#CC6666
204 102 102

#CC6699
204 102 153

#CC66CC
204 102 204

#CC66FF
204 102 255

#CC9900
204 153 0

#CC9933
204 153 0

#CC9966
204 153 102

#CC9999
204 153 153

#CC99CC
204 153 204

#CC99FF
204 153 255

#CCCC00
204 204 0

#CCCC33
204 204 51

#CCCC66
204 204 102

#CCCC99
204 204 153

#CCCCCC
204 204 204

#CCCCFF
204 204 255

#CCFF00
204 255 0

#CCFF33
204 255 51

#CCFF66
204 255 102

#CCFF99
204 255 153

#CCFFCC
204 255 204

#CCFFFF
204 255 255

#990000
153 0 0

#990033
153 0 51

#990066
153 0 102

#990099
153 0 153

#9900CC
153 0 204

#9900FF
153 0 255

#993300
153 51 0

#993333
153 51 51

#993366
153 51 102

#993399
153 51 153

#9933CC
153 51 204

#9933FF
153 51 255

#996600
153 102 0

#996633
153 102 51

#996666
153 102 102

#996699
153 102 153

#9966CC
153 102 204

#9966FF
153 102 255

#999900
153 153 0

#999933
153 153 51

#999966
153 153 102

#999999
153 153 153

#9999CC
153 153 204

#9999FF
153 153 255

#99CC00
153 204 0

#99CC33
153 204 51

#99CC66
153 204 102

#99CC99
153 204 153

#99CCCC
153 204 204

#99CCFF
153 204 255

#99FF00
153 255 0

#99FF33
153 255 51

#99FF66
153 255 102

#99FF99
153 255 153

#99FFCC
153 255 204

#99FFFF
153 255 255

#660000
102 0 0

#660033
102 0 51

#660066
102 0 102

#660099
102 0 153

#6600CC
102 0 204

#6600FF
102 0 255

#663300
102 51 0

#663333
102 51 51

#663366
102 51 102

#663399
102 51 153

#6633CC
102 51 204

#6633FF
102 51 255

#666600
102 102 0

#666633
102 102 51

#666666
102 102 102

#666699
102 102 153

#6666CC
102 102 204

#6666FF
102 102 255

#669900
102 153 0

#669933
102 153 51

#669966
102 153 102

#669999
102 153 153

#6699CC
102 153 204

#6699FF
102 153 255

#66CC00
102 204 0

#66CC33
102 204 51

#66CC66
102 204 102

#66CC99
102 204 153

#66CCCC
102 204 204

#66CCFF
102 204 255

#66FF00
102 255 0

#66FF33
102 255 51

#66FF66
102 255 102

#66FF99
102 255 153

#66FFCC
102 255 204

#66FFFF
102 255 255

#330000
51 0 0

#330033
51 0 51

#330066
51 0 102

#330099
51 0 153

#3300CC
51 0 204

#3300FF
51 0 255

#333300
51 51 0

#333333
51 51 51

#333366
51 51 102

#333399
51 51 153

#3333CC
51 51 204

#3333FF
51 51 255

#336600
51 102 0

#336633
51 102 51

#336666
51 102 102

#336699
51 102 153

#3366CC
51 102 204

#3366FF
51 102 255

#339900
51 153 0

#339933
51 153 51

#339966
51 153 102

#339999
51 153 153

#3399CC
51 153 204

#3399FF
51 153 255

#33CC00
51 204 0

#33CC33
51 204 51

#33CC66
51 204 102

#33CC99
51 204 153

#33CCCC
51 204 204

#33CCFF
51 204 255

#33FF00
51 255 0

#33FF33
51 255 51

#33FF66
51 255 102

#33FF99
51 255 153

#33FFCC
51 255 204

#33FFFF
51 255 255

#000000
0 0 0

#000033
0 0 51

#000066
0 0 102

#000099
0 0 153

#0000CC
0 0 204

#0000FF
0 0 255

#003300
0 51 0

#003333
0 51 51

#003366
0 51 102

#003399
0 51 153

#0033CC
0 51 204

#0033FF
0 51 255

#006600
0 102 0

#006633
0 102 51

#006666
0 102 102

#006699
0 102 153

#0066CC
0 102 204

#0066FF
0 102 255

#009900
0 153 0

#009933
0 153 51

#009966
0 153 102

#009999
0 153 153

#0099CC
0 153 204

#0099FF
0 153 255

#00CC00
0 204 0

#00CC33
0 204 51

#00CC66
0 204 102

#00CC99
0 204 153

#00CCCC
0 204 204

#00CCFF
0 204 255

#00FF00
0 255 0

#00FF33
0 255 51

#00FF66
0 255 102

#00FF99
0 255 153

#00FFCC
0 255 204

#00FFFF
0 255 255

zestawienie nazw kolorów (nie są to kolory "bezpieczne"):
(pogrubionych zostało 16 podstawowych nazw)

nazwa koloru

HEX

RGB

kolor

AliceBlue

#F0F8FF

rgb(240,248,255)

 

AntiqueWhite

#FAEBD7

rgb(250,235,215)

 

Aqua

#00FFFF

rgb(0,255,255)

 

Aquamarine

#7FFFD4

rgb(127,255,212)

 

Azure

#F0FFFF

rgb(240,255,255)

 

Beige

#F5F5DC

rgb(245,245,220)

 

Bisque

#FFE4C4

rgb(255,228,196)

 

Black

#000000

rgb(0,0,0)

 

BlanchedAlmond

#FFEBCD

rgb(255,235,205)

 

Blue

#0000FF

rgb(0,0,255)

 

BlueViolet

#8A2BE2

rgb(138,43,226)

 

Brown

#A52A2A

rgb(165,42,42)

 

Burlywood

#DEB887

rgb(222,184,135)

 

CadetBlue

#5F9EA0

rgb(95,158,160)

 

Chartreuse

#7FFF00

rgb(127,255,0)

 

Chocolate

#D2691E

rgb(210,105,30)

 

Coral

#FF7F50

rgb(255,127,80)

 

CornflowerBlue

#6495ED

rgb(100,149,237)

 

Cornsilk

#FFF8DC

rgb(255,248,220)

 

Crimson

#DC143C

rgb(220,20,60)

 

Cyan

#00FFFF

rgb(0,255,255)

 

DarkBlue

#00008B

rgb(0,0,139)

 

DarkCyan

#008B8B

rgb(0,139,139)

 

DarkGoldenrod

#B8860B

rgb(184,134,11)

 

DarkGray

#A9A9A9

rgb(169,169,169)

 

DarkGreen

#006400

rgb(0,100,0)

 

DarkKhaki

#BDB76B

rgb(189,183,107)

 

DarkMagenta

#8B008B

rgb(139,0,139)

 

DarkOliveGreen

#556B2F

rgb(85,107,47)

 

DarkOrange

#FF8C00

rgb(255,140,0)

 

DarkOrchid

#9932CC

rgb(153,50,204)

 

DarkRed

#8B0000

rgb(139,0,0)

 

DarkSalmon

#E9967A

rgb(233,150,122)

 

DarkSeaGreen

#8FBC8F

rgb(143,188,143)

 

DarkSlateBlue

#483D8B

rgb(72,61,139)

 

DarkSlateGray

#2F4F4F

rgb(47,79,79)

 

DarkTurquoise

#00CED1

rgb(0,206,209)

 

DarkViolet

#9400D3

rgb(148,0,211)

 

DeepPink

#FF1493

rgb(255,20,147)

 

DeepSkyBlue

#00BFBF

rgb(0,191,191)

 

DimGrey

#696969

rgb(105,105,105)

 

DodgerBlue

#1E90FF

rgb(30,144,255)

 

Firebrick

#B22222

rgb(178,34,34)

 

FloralWhite

#FFFAF0

rgb(255,250,240)

 

ForestGreen

#228B22

rgb(34,139,34)

 

Fuchsia

#FF00FF

rgb(255,0,255)

 

Gainsboro

#DCDCDC

rgb(220,220,220)

 

GhostWhite

#F8F8FF

rgb(248,248,255)

 

Gold

#FFD700

rgb(255,215,0)

 

Goldenrod

#DAA520

rgb(218,165,32)

 

Green

#008000

rgb(0,128,0)

 

GreenYellow

#ADFF2F

rgb(173,255,47)

 

Gray

#808080

rgb(128,128,128)

 

Honeydew

#F0FFF0

rgb(240,255,240)

 

HotPink

#FF69B4

rgb(255,105,180)

 

IndianRed

#CD5C5C

rgb(205,92,92)

 

Indigo

#4B0082

rgb(75,0,130)

 

Ivory

#FFFFF0

rgb(255,255,240)

 

Khaki

#F0E68C

rgb(240,230,140)

 

Lavender

#E6E6FA

rgb(230,230,250)

 

LavenderBlush

#FFF0F5

rgb(255,240,245)

 

LawnGreen

#7CFC00

rgb(124,252,0)

 

LemonChiffon

#FFFACD

rgb(255,250,205)

 

LightBlue

#ADD8E6

rgb(173,216,230)

 

LightCoral

#F08080

rgb(240,128,128)

 

LightCyan

#E0FFFF

rgb(224,255,255)

 

LightGoldenrodYellow

#FAFAD2

rgb(250,250,210)

 

LightGreen

#90EE90

rgb(144,238,144)

 

LightGray

#D3D3D3

rgb(211,211,211)

 

LightPink

#FFB6C1

rgb(255,182,193)

 

LightSalmon

#FFA07A

rgb(255,160,122)

 

LightSeaGreen

#20B2AA

rgb(32,178,170)

 

LightSkyBlue

#87CEFA

rgb(135,206,250)

 

LightSlateGray

#778899

rgb(119,136,153)

 

LightSteelBlue

#B0C4DE

rgb(176,196,222)

 

LightYellow

#FFFFE0

rgb(255,255,224)

 

Lime

#00FF00

rgb(0,255,0)

 

LimeGreen

#32CD32

rgb(50,205,50)

 

Linen

#FAF0E6

rgb(250,240,230)

 

Magenta

#FF00FF

rgb(255,0,255)

 

Maroon

#800000

rgb(128,0,0)

 

MediumAquamarine

#66CDAA

rgb(102,205,170)

 

MediumBlue

#0000CD

rgb(0,0,205)

 

MediumOrchid

#BA55D3

rgb(186,85,211)

 

MediumPurple

#9370DB

rgb(147,112,219)

 

MediumSeaGreen

#3CB371

rgb(60,179,113)

 

MediumSlateBlue

#7B68EE

rgb(123,104,238)

 

MediumSpringGreen

#00FA9A

rgb(0,250,154)

 

MediumTurquoise

#48D1CC

rgb(72,209,204)

 

MediumVioletRed

#C71585

rgb(199,21,133)

 

MidnightBlue

#191970

rgb(25,25,112)

 

MintCream

#F5FFFA

rgb(245,255,250)

 

MistyRose

#FFE4E1

rgb(255,228,225)

 

Moccasin

#FFE4B5

rgb(255,228,181)

 

NavajoWhite

#FFDEAD

rgb(255,222,173)

 

Navy

#000080

rgb(0,0,128)

 

OldLace

#FDF5E6

rgb(253,245,230)

 

Olive

#808000

rgb(128,128,0)

 

OliveDrab

#6B8E23

rgb(107,142,35)

 

Orange

#FFA500

rgb(255,165,0)

 

OrangeRed

#FF4500

rgb(255,69,0)

 

Orchid

#DA70D6

rgb(218,112,214)

 

PaleGoldenrod

#EEE8AA

rgb(238,232,170)

 

PaleGreen

#98FB98

rgb(152,251,152)

 

PaleTurquoise

#AFEEEE

rgb(175,238,238)

 

PaleVioletRed

#DB7093

rgb(219,112,147)

 

PapayaWhip

#FFEFD5

rgb(255,239,213)

 

PeachPuff

#FFDAB9

rgb(255,218,185)

 

Peru

#CD853F

rgb(205,133,63)

 

Pink

#FFC0CB

rgb(255,192,203)

 

Plum

#DDA0DD

rgb(221,160,221)

 

PowderBlue

#B0E0E6

rgb(176,224,230)

 

Purple

#800080

rgb(128,0,128)

 

Red

#FF0000

rgb(255,0,0)

 

RosyBrown

#BC8F8F

rgb(188,143,143)

 

RoyalBlue

#4169E1

rgb(65,105,225)

 

SaddleBrown

#8B4513

rgb(139,69,19)

 

Salmon

#FA8072

rgb(250,128,114)

 

SandyBrown

#F4A460

rgb(244,164,96)

 

SeaGreen

#2E8B57

rgb(46,139,87)

 

Seashell

#FFF5EE

rgb(255,245,238)

 

Sienna

#A0522D

rgb(160,82,45)

 

Silver

#C0C0C0

rgb(192,192,192)

 

SkyBlue

#87CEEB

rgb(135,206,235)

 

SlateBlue

#6A5ACD

rgb(106,90,205)

 

SlateGrey

#708090

rgb(112,128,144)

 

Snow

#FFFAFA

rgb(255,250,250)

 

SpringGreen

#00FF7F

rgb(0,255,127)

 

SteelBlue

#4682B4

rgb(70,130,180)

 

Tan

#D2B48C

rgb(210,180,140)

 

Teal

#008080

rgb(0,128,128)

 

Thistle

#D8BFD8

rgb(216,191,216)

 

Tomato

#FF6347

rgb(255,99,71)

 

Turquoise

#40E0D0

rgb(64,224,208)

 

Violet

#EE82EE

rgb(238,130,238)

 

Wheat

#F5DEB3

rgb(245,222,179)

 

White

#FFFFFF

rgb(255,255,255)

 

WhiteSmoke

#F5F5F5

rgb(245,245,245)

 

Yellow

#FFFF00

rgb(255,255,0)

 

YellowGreen

#9ACD32

rgb(154,205,50)

 

 

Znaki, kody liczbowe i encje

Każdy znak umieszczony na stronie WWW można zapisać na kilka sposobów. Czasem tradycyjne znaki wprowadzane z klawiatury nie wystarczają i trzeba skorzystać ze specjalnych kodów tych znaków. Wiele liter czy symboli nie znajdziemy na klawiaturze - jedynym sposobem ich wyświetlenia na stronie WWW jest posłużenie się odpowiednim kodem znaku. Są też znaki niewidoczne (np. twarda spacja), której nie można zastąpić tradycyjnymi odstępami z klawiatury.

Na stronie WWW dowolne znaki alfabetu można wstawić na trzy sposoby:
- z klawiatury (co jest oczywiste i naturalne)
- w Unikodzie, którego składnia wygląda następujaco: &#D; lub &#xH; - gdzie D jest liczbą dziesiętną (np. 1,23,456,9001), a H jest liczbą szesnastkową (np. 0001, 00FF, 004B).
- za pomocą tzw. encji, czyli nazwy znaku zapisanej następująco: &nazwa; - nazwy dla takiego zapisu można znaleźć w tabeli. Ważna uwaga - wielkość liter ma tutaj znaczenie.

Oczywiście zestaw znaków dla każdego rodzaju czcionki jest inny. Czasem symbolu lub znaku może brakować. Poniższa tabela zawiera zestaw znaków dla czcionki Arial - występującej w większości komputerów. Nie bez znaczenia jest też kodowanie znaków na stronie WWW - polskie strony kodowane są w standardzie ISO-8859-2 i wtedy "ogonki" mogą nadpisać inne znaki, które dla angielskich stron kodowanych w ISO8859-1 są widoczne.

Stosowanie encji (nazw znaków) jest bardzo praktyczne, bo zamiast pamiętać numer znaku wystarczy napisać &reg; aby otrzymać znak zastrzeżenia (®). Duży odstęp pomiędzy wyrazami możliwy jest np. dzięki powtórzonej encji &nbsp; (spacje, które nie przechodzą do następnego wiersza). Również znaki narodowe często łatwiej jest wpisać za pomocą kodów - oto rosyjskie ż (Ж) zapisane jako &#1046;

Zapisywanie znaków w postaci Unikodu pozwala bezproblemowo umieszczać na jednej stronie nawet kilka różnych symboli narodowych. Można więc pisać po polsku, rosyjsku, czesku...

Poniższa tabela składa się z następujących pól:

• znak - symbol znaku zapisany w postaci &#D;
• Unikod - dziesiętny &#D; i szesnastkowy &#xH; kod znaku
• znak - symbol znaku zapisany w postaci &nazwa;
• encja - nazwa encji
• krótki opis - miejsce na uwagi

znak

Unikod

znak

encja

krótki opis

&#32; &#x0020;

!

&#33; &#x0021;

"

&#34; &#x0022;

#

&#35; &#x0023;

$

&#36; &#x0024;

%

&#37; &#x0025;

&

&#38; &#x0026;

'

&#39; &#x0027;

(

&#40; &#x0028;

)

&#41; &#x0029;

*

&#42; &#x002A;

+

&#43; &#x002B;

,

&#44; &#x002C;

-

&#45; &#x002D;

.

&#46; &#x002E;

/

&#47; &#x002F;

0

&#48; &#x0030;

1

&#49; &#x0031;

2

&#50; &#x0032;

3

&#51; &#x0033;

4

&#52; &#x0034;

5

&#53; &#x0035;

6

&#54; &#x0036;

7

&#55; &#x0037;

8

&#56; &#x0038;

9

&#57; &#x0039;

:

&#58; &#x003A;

;

&#59; &#x003B;

<

&#60; &#x003C;

=

&#61; &#x003D;

>

&#62; &#x003E;

?

&#63; &#x003F;

@

&#64; &#x0040;

A

&#65; &#x0041;

B

&#66; &#x0042;

C

&#67; &#x0043;

D

&#68; &#x0044;

E

&#69; &#x0045;

F

&#70; &#x0046;

G

&#71; &#x0047;

H

&#72; &#x0048;

I

&#73; &#x0049;

J

&#74; &#x004A;

K

&#75; &#x004B;

L

&#76; &#x004C;

M

&#77; &#x004D;

N

&#78; &#x004E;

O

&#79; &#x004F;

P

&#80; &#x0050;

Q

&#81; &#x0051;

R

&#82; &#x0052;

S

&#83; &#x0053;

T

&#84; &#x0054;

U

&#85; &#x0055;

V

&#86; &#x0056;

W

&#87; &#x0057;

X

&#88; &#x0058;

Y

&#89; &#x0059;

Z

&#90; &#x005A;

[

&#91; &#x005B;

\

&#92; &#x005C;

]

&#93; &#x005D;

^

&#94; &#x005E;

_

&#95; &#x005F;

`

&#96; &#x0060;

a

&#97; &#x0061;

b

&#98; &#x0062;

c

&#99; &#x0063;

d

&#100; &#x0064;

e

&#101; &#x0065;

f

&#102; &#x0066;

g

&#103; &#x0067;

h

&#104; &#x0068;

i

&#105; &#x0069;

j

&#106; &#x006A;

k

&#107; &#x006B;

l

&#108; &#x006C;

m

&#109; &#x006D;

n

&#110; &#x006E;

o

&#111; &#x006F;

p

&#112; &#x0070;

q

&#113; &#x0071;

r

&#114; &#x0072;

s

&#115; &#x0073;

t

&#116; &#x0074;

u

&#117; &#x0075;

v

&#118; &#x0076;

w

&#119; &#x0077;

x

&#120; &#x0078;

y

&#121; &#x0079;

z

&#122; &#x007A;

{

&#123; &#x007B;

|

&#124; &#x007C;

}

&#125; &#x007D;

~

&#126; &#x007E;

 

&#160; &#x00A0;

 

&nbsp;

twarda spacja

ˇ

&#161; &#x00A1;

ˇ

&iexcl;

odwrócony wykrzyknik

¢

&#162; &#x00A2;

¢

&cent;

£

&#163; &#x00A3;

£

&pound;

¤

&#164; &#x00A4;

¤

&curren;

¥

&#165; &#x00A5;

¥

&yen;

¦

&#166; &#x00A6;

¦

&brvbar;

§

&#167; &#x00A7;

§

&sect;

¨

&#168; &#x00A8;

¨

&uml;

©

&#169; &#x00A9;

©

&copy;

ª

&#170; &#x00AA;

ª

&ordf;

«

&#171; &#x00AB;

«

&laquo;

¬

&#172; &#x00AC;

¬

&not;

­

&#173; &#x00AD;

­

&shy;

®

&#174; &#x00AE;

®

&reg;

¯

&#175; &#x00AF;

¯

&macr;

°

&#176; &#x00B0;

°

&deg;

±

&#177; &#x00B1;

±

&plusmn;

²

&#178; &#x00B2;

²

&sup2;

³

&#179; &#x00B3;

³

&sup3;

´

&#180; &#x00B4;

´

&acute;

µ

&#181; &#x00B5;

µ

&micro;

&#182; &#x00B6;

&para;

·

&#183; &#x00B7;

·

&middot;

¸

&#184; &#x00B8;

¸

&cedil;

¹

&#185; &#x00B9;

¹

&sup1;

º

&#186; &#x00BA;

º

&ordm;

»

&#187; &#x00BB;

»

&raquo;

¼

&#188; &#x00BC;

¼

&frac14;

½

&#189; &#x00BD;

½

&frac12;

¾

&#190; &#x00BE;

¾

&frac34;

¿

&#191; &#x00BF;

¿

&iquest;

À

&#192; &#x00C0;

À

&Agrave;

Á

&#193; &#x00C1;

Á

&Aacute;

Â

&#194; &#x00C2;

Â

&Acirc;

Ã

&#195; &#x00C3;

Ã

&Atilde;

Ä

&#196; &#x00C4;

Ä

&Auml;

Å

&#197; &#x00C5;

Å

&Aring;

Æ

&#198; &#x00C6;

Æ

&AElig;

Ç

&#199; &#x00C7;

Ç

&Ccedil;

È

&#200; &#x00C8;

È

&Egrave;

É

&#201; &#x00C9;

É

&Eacute;

Ê

&#202; &#x00CA;

Ê

&Ecirc;

Ë

&#203; &#x00CB;

Ë

&Euml;

Ì

&#204; &#x00CC;

Ì

&Igrave;

Í

&#205; &#x00CD;

Í

&Iacute;

Î

&#206; &#x00CE;

Î

&Icirc;

Ï

&#207; &#x00CF;

Ï

&Iuml;

Ð

&#208; &#x00D0;

Ð

&ETH;

Ñ

&#209; &#x00D1;

Ñ

&Ntilde;

Ò

&#210; &#x00D2;

Ò

&Ograve;

Ó

&#211; &#x00D3;

Ó

&Oacute;

Ô

&#212; &#x00D4;

Ô

&Ocirc;

Õ

&#213; &#x00D5;

Õ

&Otilde;

Ö

&#214; &#x00D6;

Ö

&Ouml;

×

&#215; &#x00D7;

×

&times;

Ø

&#216; &#x00D8;

Ø

&Oslash;

Ù

&#217; &#x00D9;

Ù

&Ugrave;

Ú

&#218; &#x00DA;

Ú

&Uacute;

Û

&#219; &#x00DB;

Û

&Ucirc;

Ü

&#220; &#x00DC;

Ü

&Uuml;

Ý

&#221; &#x00DD;

Ý

&Yacute;

Þ

&#222; &#x00DE;

Þ

&THORN;

ß

&#223; &#x00DF;

ß

&szlig;

à

&#224; &#x00E0;

à

&agrave;

á

&#225; &#x00E1;

á

&aacute;

â

&#226; &#x00E2;

â

&acirc;

ã

&#227; &#x00E3;

ã

&atilde;

ä

&#228; &#x00E4;

ä

&auml;

å

&#229; &#x00E5;

å

&aring;

æ

&#230; &#x00E6;

æ

&aelig;

ç

&#231; &#x00E7;

ç

&ccedil;

è

&#232; &#x00E8;

è

&egrave;

é

&#233; &#x00E9;

é

&eacute;

ê

&#234; &#x00EA;

ê

&ecirc;

ë

&#235; &#x00EB;

ë

&euml;

ě

&#236; &#x00EC;

ì

&igrave;

í

&#237; &#x00ED;

í

&iacute;

î

&#238; &#x00EE;

î

&icirc;

ï

&#239; &#x00EF;

ï

&iuml;

ð

&#240; &#x00F0;

ð

&eth;

ñ

&#241; &#x00F1;

ñ

&ntilde;

ò

&#242; &#x00F2;

ò

&ograve;

ó

&#243; &#x00F3;

ó

&oacute;

ô

&#244; &#x00F4;

ô

&ocirc;

õ

&#245; &#x00F5;

õ

&otilde;

ö

&#246; &#x00F6;

ö

&ouml;

÷

&#247; &#x00F7;

÷

&divide;

ø

&#248; &#x00F8;

ø

&oslash;

ù

&#249; &#x00F9;

ù

&ugrave;

ú

&#250; &#x00FA;

ú

&uacute;

û

&#251; &#x00FB;

û

&ucirc;

ü

&#252; &#x00FC;

ü

&uuml;

ý

&#253; &#x00FD;

ý

&yacute;

þ

&#254; &#x00FE;

þ

&thorn;

ÿ

&#255; &#x00FF;

ÿ

&yuml;

ƒ

&#402; &#x0192;

ƒ

&fnof;

Α

&#913; &#x0391;

Α

&Alpha;

Β

&#914; &#x0392;

Β

&Beta;

Γ

&#915; &#x0393;

Γ

&Gamma;

Δ

&#916; &#x0394;

Δ

&Delta;

Ε

&#917; &#x0395;

Ε

&Epsilon;

Ζ

&#918; &#x0396;

Ζ

&Zeta;

Η

&#919; &#x0397;

Η

&Eta;

Θ

&#920; &#x0398;

Θ

&Theta;

Ι

&#921; &#x0399;

Ι

&Iota;

Κ

&#922; &#x039A;

Κ

&Kappa;

Λ

&#923; &#x039B;

Λ

&Lambda;

Μ

&#924; &#x039C;

Μ

&Mu;

Ν

&#925; &#x039D;

Ν

&Nu;

Ξ

&#926; &#x039E;

Ξ

&Xi;

Ο

&#927; &#x039F;

Ο

&Omicron;

Π

&#928; &#x03A0;

Π

&Pi;

Ρ

&#929; &#x03A1;

Ρ

&Rho;

Σ

&#931; &#x03A3;

Σ

&Sigma;

Τ

&#932; &#x03A4;

Τ

&Tau;

Υ

&#933; &#x03A5;

Υ

&Upsilon;

Φ

&#934; &#x03A6;

Φ

&Phi;

Χ

&#935; &#x03A7;

Χ

&Chi;

Ψ

&#936; &#x03A8;

Ψ

&Psi;

Ω

&#937; &#x03A9;

Ω

&Omega;

α

&#945; &#x03B1;

α

&alpha;

β

&#946; &#x03B2;

β

&beta;

γ

&#947; &#x03B3;

γ

&gamma;

δ

&#948; &#x03B4;

δ

&delta;

ε

&#949; &#x03B5;

ε

&epsilon;

ζ

&#950; &#x03B6;

ζ

&zeta;

η

&#951; &#x03B7;

η

&eta;

θ

&#952; &#x03B8;

θ

&theta;

ι

&#953; &#x03B9;

ι

&iota;

κ

&#954; &#x03BA;

κ

&kappa;

λ

&#955; &#x03BB;

λ

&lambda;

μ

&#956; &#x03BC;

μ

&mu;

ν

&#957; &#x03BD;

ν

&nu;

ξ

&#958; &#x03BE;

ξ

&xi;

ο

&#959; &#x03BF;

ο

&omicron;

π

&#960; &#x03C0;

π

&pi;

ρ

&#961; &#x03C1;

ρ

&rho;

ς

&#962; &#x03C2;

ς

&sigmaf;

σ

&#963; &#x03C3;

σ

&sigma;

τ

&#964; &#x03C4;

τ

&tau;

υ

&#965; &#x03C5;

υ

&upsilon;

φ

&#966; &#x03C6;

φ

&phi;

χ

&#967; &#x03C7;

χ

&chi;

ψ

&#968; &#x03C8;

ψ

&psi;

ω

&#969; &#x03C9;

ω

&omega;

ϑ

&#977; &#x03D1;

ϑ

&thetasym;

ϒ

&#978; &#x03D2;

ϒ

&upsih;

ϖ

&#982; &#x03D6;

ϖ

&piv;

•

&#8226; &#x2022;

•

&bull;

…

&#8230; &#x2026;

…

&hellip;

′

&#8242; &#x2032;

′

&prime;

″

&#8243; &#x2033;

″

&Prime;

‾

&#8254; &#x203E;

‾

&oline;

⁄

&#8260; &#x2044;

⁄

&frasl;

℘

&#8472; &#x2118;

℘

&weierp;

ℑ

&#8465; &#x2111;

ℑ

&image;

ℜ

&#8476; &#x211C;

ℜ

&real;

™

&#8482; &#x2122;

™

&trade;

ℵ

&#8501; &#x2135;

ℵ

&alefsym;

←

&#8592; &#x2190;

←

&larr;

↑

&#8593; &#x2191;

↑

&uarr;

→

&#8594; &#x2192;

→

&rarr;

↓

&#8595; &#x2193;

↓

&darr;

↔

&#8596; &#x2194;

↔

&harr;

↵

&#8529; &#x21B5;

↵

&crarr;

⇐

&#8556; &#x21D0;

⇐

&lArr;

⇑

&#8557; &#x21D1;

⇑

&uArr;

⇒

&#8558; &#x21D2;

⇒

&rArr;

⇓

&#8559; &#x21D3;

⇓

&dArr;

⇔

&#8560; &#x21D4;

⇔

&hArr;

∀

&#8704; &#x2200;

∀

&forall;

∂

&#8706; &#x2202;

∂

&part;

∃

&#8707; &#x2203;

∃

&exist;

∅

&#8709; &#x2205;

∅

&empty;

∇

&#8711; &#x2207;

∇

&nabla;

∈

&#8712; &#x2208;

∈

&isin;

∉

&#8713; &#x2209;

∉

&notin;

∋

&#8715; &#x220B;

∋

&ni;

∏

&#8719; &#x220F;

∏

&prod;

∑

&#8721; &#x2211;

∑

&sum;

−

&#8722; &#x2212;

−

&minus;

∗

&#8727; &#x2217;

∗

&lowast;

√

&#8730; &#x221A;

√

&radic;

∝

&#8733; &#x221D;

∝

&prop;

∞

&#8734; &#x221E;

∞

&infin;

∠

&#8736; &#x2220;

∠

&ang;

∧

&#8743; &#x2227;

∧

&and;

∨

&#8744; &#x2228;

∨

&or;

∩

&#8745; &#x2229;

∩

&cap;

∪

&#8746; &#x222A;

∪

&cup;

∫

&#8747; &#x222B;

∫

&int;

∴

&#8756; &#x2234;

∴

&there4;

∼

&#8764; &#x223C;

∼

&sim;

≅

&#8773; &#x2245;

≅

&cong;

≈

&#8776; &#x2248;

≈

&asymp;

≠

&#8800; &#x2260;

≠

&ne;

≡

&#8801; &#x2261;

≡

&equiv;

≤

&#8804; &#x2264;

≤

&le;

≥

&#8805; &#x2265;

≥

&ge;

⊂

&#8834; &#x2282;

⊃

&sup;

⊃

&#8835; &#x2283;

⊂

&sub;

⊄

&#8836; &#x2284;

⊄

&nsub;

⊆

&#8838; &#x2286;

⊆

&sube;

⊇

&#8839; &#x2287;

⊇

&supe;

⊕

&#8853; &#x2295;

⊕

&oplus;

⊗

&#8855; &#x2297;

⊗

&otimes;

⊥

&#8859; &#x22A5;

⊥

&perp;

⋅

&#8901; &#x22C5;

⋅

&sdot;

⌈

&#8968; &#x2308;

⌈

&lceil;

⌉

&#8969; &#x2309;

⌉

&rceil;

⌊

&#8970; &#x230A;

⌊

&lfloor;

⌋

&#8971; &#x230B;

⌋

&rfloor;

〈

&#9001; &#x2329;

〈

&lang;

〉

&#9002; &#x232A;

〉

&rang;

◊

&#9674; &#x25CA;

◊

&loz;

♠

&#9824; &#x2660;

♠

&spades;

♣

&#9827; &#x2663;

♣

&clubs;

♥

&#9829; &#x2665;

♥

&hearts;

♦

&#9830; &#x2666;

♦

&diams;

 

Najpopularniejsze typy MIME

MIME (Multipurpose Internet Mail Extensions) określa format danych, które przesyłane są drogą elektroniczną. Standard MIME obejmuje następujące typy danych: application (programy), audio (dźwięki), image (grafiki), message (komunikaty), model (modele), multipart (multi-dane), text (teksty), video (filmy).

MIME - typ/podtyp

rozszerzenia pliku

application/access

mdf

application/excel

xls

application/font-tdpfr

pfr

application/futuresplash

spl

application/hep

hep

application/lotus-123

wks

application/mac-binhex40

hqx

application/mac-compactpro

cpt

application/mspowerpoint

ppt

application/msword

doc

application/octet-stream

bin dms lha lzh exe class

application/oda

oda

application/pagemaker

pm5 pt5 pm

application/pdf

pdf

application/postscript

ai eps ps

application/powerpoint

ppt

application/rtf

rtf

application/smil

smi smil sml

application/toolbook

tbk

application/wordperfect

wp

application/wordperfect5.1

wp5

application/wordperfect6.1

wp6

application/wordperfectd

wpd

application/x-bcpio

bcpio

application/x-cdlink

vcd

application/x-cpio

cpio

application/x-csh

csh

application/x-director

dcr dir dxr

application/x-dvi

dvi

application/x-gtar

gtar

application/x-hdf

hdf

application/x-ica

ica

application/x-javascript

js

application/x-koan

skp skd skt skm

application/x-latex

latex

application/x-mif

mif

application/x-netcdf

nc cdf

application/x-sh

sh

application/x-shar

shar

application/x-shockwave-flash

swf

application/x-spss

sav spp sbs sps spo

application/x-stuffit

sit

application/x-sv4cpio

sv4cpio

application/x-sv4crc

sv4crc

application/x-tar

tar

application/x-tcl

tcl

application/x-tex

tex

application/x-texinfo

texinfo texi

application/x-troff-man

man

application/x-troff-me

me

application/x-troff-ms

ms

application/x-troff

t tr roff

application/x-ustar

ustar

application/x-wais-source

src

application/zip

zip

audio/basic

au snd

audio/midi

mid midi kar

audio/mpeg

mp2 mpa mpg mpga mp3

audio/mpeg3

mp3

audio/x-aiff

aif aiff aifc

audio/x-midi

mid

audio/x-mpeg

mp2

audio/x-mpegurl

mp3

audio/x-pn-realaudio-plugin

rpm

audio/x-pn-realaudio

ra ram rm rpm

audio/x-realaudio

ra

audio/x-wav

wav

image/gif

gif

image/ief

ief

image/jpeg

jpeg jpg jpe

image/png

png

image/tiff

tiff tif

image/x-cmu-raster

ras

image/x-portable-anymap

pnm

image/x-portable-bitmap

pbm

image/x-portable-graymap

pgm

image/x-portable-pixmap

ppm

image/x-rgb

rgb

image/x-xbitmap

xbm

image/x-xpixmap

xpm

image/x-xwindowdump

xwd

model/iges

igs iges

model/mesh

msh mesh silo

model/vrml

wrl vrml

text/css

css

text/html

html htm

text/plain

txt

text/richtext

rtx

text/tab-separated-values

tsv

text/x-setext

etx

text/x-sgml

sgml sgm

text/xml

xml dtd

video/mpeg

mpeg mpg mpe

video/quicktime

qt mov

video/x-ms-asf

asf asx

video/x-msvideo

avi

video/x-sgi-movie

movie

Kody języków narodowych

Określenie języka może odbywać się na dwa sposoby: pierwszy definiuje język na podstawie dwuliterowych skrótów z normy ISO 639, np. lang="en" (język angielski), a druga uzupełnia język o dodatkowy dialekt kraju, których dwuliterowe skróty definiuje norma ISO 3166, np. lang="en-US" (angielski używany w Stanach Zjednoczonych), lang="fr-CA" (francuski stosowany w Kanadzie).

kody języków (za ISO 639)
aa - Afar
ab - Abkhazian
af - Afrikaans
am - Amharic
ar - Arabic
as - Assamese
ay - Aymara
az - Azerbaijani
ba - Bashkir
be - Byelorussian
bg - Bulgarian
bh - Bihari
bi - Bislama
bn - Bengali; Bangla
bo - Tibetan
br - Breton
ca - Catalan
co - Corsican
cs - Czech
cy - Welsh
da - Danish
de - German
dz - Bhutani
el - Greek
en - English
eo - Esperanto
es - Spanish
et - Estonian
eu - Basque
fa - Persian
fi - Finnish
fj - Fiji
fo - Faroese
fr - French
fy - Frisian
ga - Irish
gd - Scots Gaelic
gl - Galician
gn - Guarani
gu - Gujarati
ha - Hausa
he - Hebrew (poprzednio iw)
hi - Hindi
hr - Croatian
hu - Hungarian
hy - Armenian
ia - Interlingua
id - Indonesian (poprzednio in)
ie - Interlingue
ik - Inupiak
is - Icelandic
it - Italian
iu - Inuktitut
ja - Japanese
jw - Javanese
ka - Georgian
kk - Kazakh
kl - Greenlandic
km - Cambodian
kn - Kannada
ko - Korean
ks - Kashmiri
ku - Kurdish
ky - Kirghiz
la - Latin
ln - Lingala
lo - Laothian
lt - Lithuanian
lv - Latvian, Lettish
mg - Malagasy
mi - Maori
mk - Macedonian
ml - Malayalam
mn - Mongolian
mo - Moldavian
mr - Marathi
ms - Malay
mt - Maltese
my - Burmese
na - Nauru
ne - Nepali
nl - Dutch
no - Norwegian
oc - Occitan
om - (Afan) Oromo
or - Oriya
pa - Punjabi
pl - Polish
ps - Pashto, Pushto
pt - Portuguese
qu - Quechua
rm - Rhaeto-Romance
rn - Kirundi
ro - Romanian
ru - Russian
rw - Kinyarwanda
sa - Sanskrit
sd - Sindhi
sg - Sangho
sh - Serbo-Croatian
si - Sinhalese
sk - Slovak
sl - Slovenian
sm - Samoan
sn - Shona
so - Somali
sq - Albanian
sr - Serbian
ss - Siswati
st - Sesotho
su - Sundanese
sv - Swedish
sw - Swahili
ta - Tamil
te - Telugu
tg - Tajik
th - Thai
ti - Tigrinya
tk - Turkmen
tl - Tagalog
tn - Setswana
to - Tonga
tr - Turkish
ts - Tsonga
tt - Tatar
tw - Twi
ug - Uighur
uk - Ukrainian
ur - Urdu
uz - Uzbek
vi - Vietnamese
vo - Volapuk
wo - Wolof
xh - Xhosa
yi - Yiddish (poprzednio ji)
yo - Yoruba
za - Zhuang
zh - Chinese
zu - Zulu

kody krajów (za ISO 3166)
AD - Andorra
AE - United Arab Emirates
AF - Afghanistan
AG - Antigua and Barbuda
AI - Anguilla
AL - Albania
AM - Armenia
AN - Netherlands Antilles
AO - Angola
AQ - Antarctica
AR - Argentina
AS - American Samoa
AT - Austria
AU - Australia
AW - Aruba
AZ - Azerbaijan
BA - Bosnia and Herzegovina
BB - Barbados
BD - Bangladesh
BE - Belgium
BF - Burkina Faso
BG - Bulgaria
BH - Bahrain
BI - Burundi
BJ - Benin
BM - Bermuda
BN - Brunei Darussalam
BO - Bolivia
BR - Brazil
BS - Bahamas
BT - Bhutan
BV - Bouvet Island
BW - Botswana
BY - Belarus
BZ - Belize
CA - Canada
CC - Cocos (Keeling) Islands
CF - Central African Republic
CG - Congo
CH - Switzerland
CI - Cote D'Ivoire (Ivory Coast)
CK - Cook Islands
CL - Chile
CM - Cameroon
CN - China
CO - Colombia
CR - Costa Rica
CS - Czechoslovakia
CU - Cuba
CV - Cape Verde
CX - Christmas Island
CY - Cyprus
CZ - Czech Republic
DE - Germany
DJ - Djibouti
DK - Denmark
DM - Dominica
DO - Dominican Republic
DZ - Algeria
EC - Ecuador
EE - Estonia
EG - Egypt
EH - Western Sahara
ER - Eritrea
ES - Spain
ET - Ethiopia
FI - Finland
FJ - Fiji
FK - Falkland Islands (Malvinas)
FM - Micronesia
FO - Faroe Islands
FR - France
FX - France, Metropolitan
GA - Gabon
GB - Great Britain (UK)
GD - Grenada
GE - Georgia
GF - French Guiana
GH - Ghana
GI - Gibraltar
GL - Greenland
GM - Gambia
GN - Guinea
GP - Guadeloupe
GQ - Equatorial Guinea
GR - Greece
GS - S. Georgia and S. Sandwich Isls.
GT - Guatemala
GU - Guam
GW - Guinea-Bissau
GY - Guyana
HK - Hong Kong
HM - Heard and McDonald Islands
HN - Honduras
HR - Croatia (Hrvatska)
HT - Haiti
HU - Hungary
ID - Indonesia
IE - Ireland
IL - Israel
IN - India
IO - British Indian Ocean Territory
IQ - Iraq
IR - Iran
IS - Iceland
IT - Italy
JM - Jamaica
JO - Jordan
JP - Japan
KE - Kenya
KG - Kyrgyzstan
KH - Cambodia
KI - Kiribati
KM - Comoros
KN - Saint Kitts and Nevis
KP - Korea (North)
KR - Korea (South)
KW - Kuwait
KY - Cayman Islands
KZ - Kazakhstan
LA - Laos
LB - Lebanon
LC - Saint Lucia
LI - Liechtenstein
LK - Sri Lanka
LR - Liberia
LS - Lesotho
LT - Lithuania
LU - Luxembourg
LV - Latvia
LY - Libya
MA - Morocco
MC - Monaco
MD - Moldova
MG - Madagascar
MH - Marshall Islands
MK - Macedonia
ML - Mali
MM - Myanmar
MN - Mongolia
MO - Macau
MP - Northern Mariana Islands
MQ - Martinique
MR - Mauritania
MS - Montserrat
MT - Malta
MU - Mauritius
MV - Maldives
MW - Malawi
MX - Mexico
MY - Malaysia
MZ - Mozambique
NA - Namibia
NC - New Caledonia
NE - Niger
NF - Norfolk Island
NG - Nigeria
NI - Nicaragua
NL - Netherlands
NO - Norway
NP - Nepal
NR - Nauru
NT - Neutral Zone
NU - Niue
NZ - New Zealand (Aotearoa)
OM - Oman
PA - Panama
PE - Peru
PF - French Polynesia
PG - Papua New Guinea
PH - Philippines
PK - Pakistan
PL - Poland
PM - St. Pierre and Miquelon
PN - Pitcairn
PR - Puerto Rico
PT - Portugal
PW - Palau
PY - Paraguay
QA - Qatar
RE - Reunion
RO - Romania
RU - Russian Federation
RW - Rwanda
SA - Saudi Arabia
SB - Solomon Islands
SC - Seychelles
SD - Sudan
SE - Sweden
SG - Singapore
SH - St. Helena
SI - Slovenia
SJ - Svalbard and Jan Mayen Islands
SK - Slovak Republic
SL - Sierra Leone
SM - San Marino
SN - Senegal
SO - Somalia
SR - Suriname
ST - Sao Tome and Principe
SU - USSR
SV - El Salvador
SY - Syria
SZ - Swaziland
TC - Turks and Caicos Islands
TD - Chad
TF - French Southern Territories
TG - Togo
TH - Thailand
TJ - Tajikistan
TK - Tokelau
TM - Turkmenistan
TN - Tunisia
TO - Tonga
TP - East Timor
TR - Turkey
TT - Trinidad and Tobago
TV - Tuvalu
TW - Taiwan
TZ - Tanzania
UA - Ukraine
UG - Uganda
UK - United Kingdom
UM - US Minor Outlying Islands
US - United States
UY - Uruguay
UZ - Uzbekistan
VA - Vatican City State (Holy See)
VC - Saint Vincent and the Grenadines
VE - Venezuela
VG - Virgin Islands (British)
VI - Virgin Islands (U.S.)
VN - Viet Nam
VU - Vanuatu
WF - Wallis and Futuna Islands
WS - Samoa
YE - Yemen
YT - Mayotte
YU - Yugoslavia
ZA - South Africa
ZM - Zambia
ZR - Zaire
ZW - Zimbabwe

 

 


Wyszukiwarka

Podobne podstrony:
HTML dla bardzo początkujących, kurs sposób 1, HTML dla bardzo początkujących
HTML dla bardzo początkujących, ELEMENTY HTML
HTML dla bardzo początkujących, ROZMIARY, • abbr - atrybut definiuje skrótowy opis zawartości k
HTML dla bardzo początkujących, OBRAMOWANIA, • abbr - atrybut definiuje skrótowy opis zawartośc
HTML dla bardzo początkujących, KOLORY, • abbr - atrybut definiuje skrótowy opis zawartości kom
HTML dla bardzo początkujących, KOLORY, • abbr - atrybut definiuje skrótowy opis zawartości kom
HTML dla bardzo początkujących, LISTY, • abbr - atrybut definiuje skrótowy opis zawartości komó
HTML dla bardzo początkujących, LINKI, • abbr - atrybut definiuje skrótowy opis zawartości komó
HTML dla bardzo początkujących, DRUK, • BODY - element definiuje "ciało" strony WWW c
HTML dla bardzo początkujących, TŁA, • BODY - element definiuje "ciało" strony WWW cz
HTML dla bardzo początkujących, STRUKTURA, • abbr - atrybut definiuje skrótowy opis zawartości
HTML dla bardzo początkujących, TEKST, • abbr - atrybut definiuje skrótowy opis zawartości komó
HTML dla bardzo początkujących, FORMULARZE, • abbr - atrybut definiuje skrótowy opis zawartości
HTML dla bardzo początkujących, ATRYBUTY HTML, • abbr - atrybut definiuje skrótowy opis zawarto
HTML dla bardzo początkujących, BLOKI, • abbr - atrybut definiuje skrótowy opis zawartości komó
HTML dla bardzo początkujących, CZCIONKI, • abbr - atrybut definiuje skrótowy opis zawartości k
Giełda dla bardzo początkujących Jak zacząć inwestować Marcin Szolke
03 Kurs HTML HTML HTML dla zielonych fajne

więcej podobnych podstron