Kurs języka HTML - poradnik webmastera

Pismo dla chcących wiedzieć więcej...

Kurs języka HTML

Poradnik webmastera

  • Wstęp
  • Etykieta webmastera
  • HTML dla bardzo początkujących
  • Struktura dokumentu
  • Czcionki
  • Bloki
  • Odsyłacze
  • Wykazy
  • Grafika i multimedia
  • Tabele
  • Style
  • Ramki
  • Pływające ramki
  • Formularze
  • Response-O-Matic
  • TopNet Mailer
  • Księga gości
  • Kanały informacyjne
  • Wprowadzenie do JavaScript
  • Przykłady skryptów
  • Narzędzia
  • Słowniczek
  • Znaki specjalne
  • Ankieta

  • Dodatek: Kolory (autor Paweł Stokowski)
  • Dodatek: Wprowadzenie do FrontPage Express
  • Dodatek: Dokumenty w języku Esperanto

Aktualizacja: 20 sierpnia 1999

Uwaga: Kurs ma status freeware - możesz go przekazywać innym, wstawić go na swoją stronę (z zaznaczeniem autorstwa). Kurs nie ma charakteru public domain - nie możesz dokonywać w nim zmian; za treść odpowiada wyłącznie autor kursu.

© Paweł Wimmer; PCkurier, Wydawnictwo Lupus, Warszawa 1996-1999

W PCkurierze możesz sprawdzić, czy ukazała się nowsza wersja kursu


Kurs języka HTML - poradnik webmastera

Ważna informacja

Kurs w postaci HTML Help ma dwa ograniczenia:

  • Nie akceptuje większości multimediów
  • Nie wyświetla komunikatów w pasku statusu,
    co ma wpływ na zobrazowanie niektórych skryptów

Zaletą takiej postaci są jednak
wygodne narzędzia nawigacyjne i wyszukiwawcze,
co z pewnością Państwo docenią
(panel z nimi można chować i ujawniać).

Z wersji HTML Help mogą skorzystać
posiadacze Internet Explorera 4 lub 5

Strona główna


Wyjaśnienie

Wstęp

Na stronach poświęconych językowi HTML Czytelnik znajdzie praktyczne przedstawienie składni dokumentów internetowych.

Zaletą takiej formy prezentacji jest możność natychmiastowego zilustrowania opisywanych poleceń języka. Przy okazji Czytelnik zorientuje się, czy jego własna przeglądarka akceptuje wprowadzone kody języka. Najbardziej zaawansowanymi technicznie programami są Microsoft Internet Explorer oraz Netscape Communicator, które obsługują w największym zakresie przyjęty standard języka HTML. Należy jednak pamiętać, że nie wszystkie polecenia są interpretowane przez przeglądarki, a niekiedy interpretacja jest odmienna.

Źródła

W ciągu ponad trzech lat rozwoju kursu korzystałem w większej czy mniejszej mierze z różnych źródeł, ale do najważniejszych, zaliczyłbym następujące materiały:

  1. Stephen Le Hunte "HTML Reference Library 4", 1998, plik HTML Help dla Windows 95
  2. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996

W ostatnich miesiącach ukazało się wiele dobrych książek - warto zwłaszcza zwrócić uwagę na ofertę Wydawnictwa Helion, które wydaje najwięcej pozycji webmasterskich. Do szczególnie atrakcyjnych można zaliczyć "HTML 4 - Vademecum profesjonalisty" (Laura Lemay) i "Po prostu HTML 4" (Elisabeth Castro). Polecam też świetną edukacyjnie książkę "JavaScript" (Arman Danesh) oraz "HTML i JavaScript" (Wojciech Romowicz) - obie także wydane przez Helion.

Współautorzy

Kurs nie jest wyłącznie moim dziełem. Wprowadzenie do JavaScript jest tłumaczeniem pracy Stefana Kocha, którego uprzejmej zgodzie zawdzięczam możność dołączenia jej do kursu - tłumaczenie zostało wykonane wspólnie z moim redakcyjnym kolegą, Włodzimierzem Wypychem. Słowniczek internetowy jest sieciową wersją słowniczka przygotowanego kiedyś wspólnie z Krzysztofem Łabanowskim dla redakcji miesięcznika Enter. Dodatek o kolorach został napisany przez Pawła Stokowskiego, Narzędzia dla Amigi przygotowuje Michał Durys, Paweł Gajda pisze o narzędziach webmasterskich dla Linuksa, a o Narzędziach dla OS/2 - Lech Piotrowski. Narzędzia dla innych systemów operacyjnych są dostępne online.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Etykieta webmastera

Skoro trafiłeś Czytelniku na strony kursu HTML, najwidoczniej już usiłujesz tworzyć swój własny serwis, wystawiając witrynę w Internecie, albo zamierzasz się niedługo za to zabrać. A może zerknąłeś tutaj tylko z czystej ciekawości, gdyż problem Cię w jakimś stopniu intryguje, choć jesteś jeszcze odległy od samodzielnego pisania stron.

Tworzenie serwisu internetowego może być fascynującą zabawą. Dla jednych jest po prostu przyjemnością sam akt tworzenia. Dla innych najważniejsza jest nagroda, czyli pokazanie strony w Internecie. Dzisiejszy świat jest już zupełnie inny niż jeszcze dziesięć lat temu. Komputer osobisty, Internet i swoboda wyrażania opinii, których było pozbawione poprzednie pokolenie, są szerokim oknem na świat, które trzeba jak najlepiej wykorzystać. To nie tylko zabawa, to także wspaniałe uczucie wolności.

Tworzenie stron WWW nie jest wcale trudne i w zasadzie po tygodniu nauki będziesz w stanie pokazać w Sieci zupełnie dobrze wyglądającą stronę. Trzeba się jednak trzymać kilku podstawowych zasad, których przestrzeganie nie narazi Cię na krytykę innych. A społeczność internetowa potrafi być okrutna, gdyż obok ludzi sympatycznych i życzliwych całemu światu znajdziesz tam osobników, którzy za punkt honoru uznają konieczność pognębienia innych. Niech no tylko natrafią na jakieś uchybienia, a zaraz ogłoszą je całemu światu, opatrując kąśliwymi komentarzami.

Zebrałem tutaj kilka uwag, które nasunęły mi się po kilku latach intensywnej pracy w Internecie i w trakcie mojej webmasterskiej posługi w PCkurierze. Zbiór ten nie aspiruje do miana pełnej i jedynie słusznej wyroczni. Jest jedynie sugestią, przede wszystkim dla tych, którzy dopiero zaczynają zabawę z fascynującym medium, jakim jest Internet.

Podstawowe przykazanie webmastera

Jesteś zapewne młodym człowiekiem, koło dwudziestki - taki jest właśnie przeciętny internauta. Masz mnóstwo czasu przed sobą. Chcesz się zaprezentować w Internecie i zyskać oczywiście zainteresowanie innych. Pamiętaj, że Twoi goście oczekują przede wszystkim informacji. Nie usiłuj ich zwabiać wyłącznie fantazyjną formą Twojej strony, lecz skup się na treści. Bądź cierpliwy - nie od razu da się wszystko zrobić. Rozwijaj oryginalną zawartość strony, gdyż to właśnie będzie Twój wkład w Społeczeństwo Informacyjne. Staraj się sam być źródłem informacji, gdyż świecenie światłem odbitym nie wystarczy na długo - nawet obszerny i w miarę wyczerpujący zestaw odsyłaczy do innych materiałów w Sieci stanowi już jakąś wartość dodaną, jeśli nie jest to tylko kilka przypadkowo zebranych adresów. Zastanów się dobrze, co właściwie chciałbyś powiedzieć innym, a potem spokojnie, bez pośpiechu, rozwijaj swoją stronę zgodnie ze swoimi zainteresowaniami, wiedzą czy wykształceniem - za pół roku, za rok, będzie to już pokaźny zasób informacji, który coraz silniej będzie przyciągać czytelników. Czas jest potężnym webmasterem - rozwijaj uparcie swoją witrynę, a efekty przyjdą same, nawet nie zauważysz kiedy. Być może inni, mniej cierpliwi, zrezygnują, ale o Twojej stronie będzie się mówić coraz częściej. Naprawdę warto na to czekać, a przecież każdy z ćwierć miliarda internautów może się stać Twoim gościem.

Uwagi "ideologiczne"

Moje wyznanie wiary: Internet, a World Wide Web w szczególności, jest wspaniałą, otwartą księgą, do której mają prawo wszyscy. Zdecydowanie nie zgadzam się z tymi (a są wśród nich także ludzie, których bardzo cenię za wiedzę i kompetencje), którzy mieliby ochotę ograniczyć innym sposobność wypowiadania się, pod pozorem ograniczania "szumu informacyjnego" w Sieci. Tak jakby mieli prawo do arbitralnego decydowania, komu wolno, a komu nie. Zbyt długo żyliśmy w Polsce pod policyjnym nadzorem, żeby teraz zgadzać się na nowe formy autorytaryzmu.
Oczywiście w Internecie znajdziemy mnóstwo głupstw, a znaczna część stron ma małą wartość informacyjną, ale niech serwisy bronią się same. Jeśli będą nieciekawe, po prostu nie będą odwiedzane. Interesujące witryny prędzej czy później dojdą do głosu i zyskają większą popularność. Akurat tutaj, w demokratycznym Internecie, lepsza moneta wyprze powoli gorszą, nie potwierdzając starego prawa Kopernika-Greshama.

Przeczytaj uważnie zbiór zasad, opracowany przez Twojego usługodawcę internetowego. Skoro zawierasz z nim umowę (nawet nie ponosząc żadnych kosztów), musisz je akceptować. Jeśli Ci nie odpowiadają, pójdź do innego. Rozsądnie jest założyć, że nasz "internet provider" jest poważną instytucją i lepiej od nas wie, jakie są zasady publicznego zaistnienia w Internecie. Potraktuj jego kodeks jak zbiór dobrych i życzliwych porad. Nawet jeśli nie podpisywałeś żadnej pisemnej umowy, traktuj kodeks tak, jak ustną umowę w życiu - honor wymaga jej przestrzegania.

Respektuj zawsze prawa autorskie. Bardzo często serwis początkującego webmastera składa się z informacji o nim samym i odsyłaczy do cudzych stron, które z jakichś powodów uznał za interesujące. Nie jest to w żadnej mierze naruszenie niczyich praw. Wręcz przeciwnie - to bezpłatna reklama. Wystrzegaj się natomiast kopiowania innych stron i wstawiania ich do swojego serwisu. Na jednej ze stron znalazłem dzieło, którego autor (spuśćmy litościwie zasłonę milczenia na jego tożsamość) po prostu skopiował mnóstwo stron z Wydawnictwa Lupus, wstawił je do swojego folderu na serwerze, wyciął informacje identyfikujące autorstwo i dołożył ikonkę z napisem "Głosuj na mnie". Zasugerował więc szerokiej publiczności, że jest ich autorem. W innym miejscu pojawił się nasz właśnie kurs HTML, a posiadacz strony wyciął po prostu informacje o autorze, czyli mojej skromnej osobie, i wstawił własne nazwisko (wielkimi literami, a jakże...), takim oto szybkim ruchem stając się "twórcą". Nie mamy oczywiście zamiaru sądownie ścigać niefortunnych plagiatorów (zapewne jakichś ambitnych młodzianów), a w tym miejscu sygnalizujemy jedynie, że już zwykła przyzwoitość i szacunek dla cudzego wysiłku nakazują honorowanie tych praw. Jeśli koniecznie chcesz skopiować cudze strony, zapytaj na wszelki wypadek ich autora, a już w ostateczności wyraźnie zaznacz, skąd pochodzą.

Nie bój się konkurencji. Tematów są tysiące, a stron miliony, więc prawie na pewno w Sieci znajdą się inni, którzy zajmują się tym samym tematem. Choćby był tak egzotyczny, jak hodowla legwanów czy nauczanie Volapüku. Jeśli natrafisz na pokrewne tematycznie serwisy, poinformuj o nich swoich czytelników, choćby były ciekawsze od Twojego dzieła. Pamiętaj, że World Wide Web jest wielkim puclem, pracowicie układanym przez niezliczone rzesze webmasterów. Jest rzeczą oczywistą, że Microsoft nie będzie dawać odsyłacza do Netscape'a, a i ten ostatni nie będzie zbyt łaskawy dla swojego konkurenta. Ale te dwie firmy walczą o dominację na rynku. Większość stron w Internecie to jednak dzieła amatorskie, których autorzy nie muszą ze sobą konkurować. Informacyjna wartość strony zależy nie tylko od tego, co sam autor zechce na niej napisać, ale i od starannie dobranego zestawu odsyłaczy. Proszę zauważyć, że choć zaoferowaliśmy naszym gościom własny kurs HTML, na stronie Narzędzi internetowych nasi Czytelnicy znajdą listę najlepszych polskojęzycznych poradników. Uznajemy bowiem za swój obowiązek lojalność wobec autorów, a także wobec czytelników, którzy oczekują rzetelnej informacji. Ponadto autorzy różnią się sposobem pisania czy zakresem poruszanych spraw, więc w interesie czytelnika leży pokazanie mu jak najszerszej oferty.
Gdybyś miał jeszcze jakieś wątpliwości, czy wspominać o "konkurencji", pomyśl sobie, że jesteś wystarczająco dobry, by się jej nie bać, że możesz się nie niepokoić o popularność swojej własnej strony.

Staraj się o poprawność językową. To istotny problem. Webmasterzy to na ogół ludzie młodzi, często ze szkół średnich, którzy dorastali w ostatnich latach, w dobie wielkiej ekspansji nowoczesnych mediów. Mają często wiedzę techniczną, ale zabrakło im jednej bardzo ważnej rzeczy - oczytania, którego doświadczyło poprzednie pokolenie, nie bombardowane telewizją kablową i wideo. A oczytanie w największym stopniu decyduje o, nazwijmy to tak, ogładzie językowej. Wielokrotnie spotykamy w Sieci strony, których autorzy są najwyraźniej na bakier z ortografią ojczystego języka, o gładkości gramatycznej i stylistycznej nie wspominając. Oczywiście rozumiem, że nie sposób odrobić w krótkim czasie zaległości, ale jeśli już wystawiasz swoją stronę, postaraj się, aby była poprawna językowo. Jeśli masz wątpliwości, poproś kogoś z rodziny czy przyjaciół o pomoc. Jeśli piszesz jakiś tekst, skorzystaj ze słownika ortograficznego w edytorze tekstów (żeby choćby uniknąć zwykłych "literówek"), a dopiero potem przenieś ostateczną wersję do edytora HTML. Pamiętaj, że rażące błędy zniechęcają czytelnika strony (dla niektórych są okazją do publicznej krytyki), a przede wszystkim wystawiają nie najlepszą ocenę autorowi. Słowo mówione jest ulotne, ale słowo pisane pozostaje - verba volant, scripta manent.

Bądź życzliwy dla innych. Nie napadaj na nikogo, gdyż sam możesz być zaatakowany. Naprawdę lepiej jest wspólnie "pchać wózek" o nazwie Internet niż marnować energię na utarczki (bo jak porusza się wóz ciągnięty przez dwa silne konie w przeciwnych kierunkach?). Nie obrażaj swoich czytelników, nie imputuj im niewiedzy, nie pokazuj swojej wyższości, nie przechwalaj się. Jak ognia unikaj napuszoności swoich wywodów. Nie traktuj też nikogo jak głupca - zakładaj przynajmniej elementarny poziom inteligencji swoich gości. Zapewniam Cię, że znakomita większość internautów życzliwiej spojrzy na strony sympatyczne. Jeśli już musisz być krytyczny, rób to elegancko i staraj się zachować klasę. Na ogół szept jest skuteczniejszy od krzyku.

Nie unikaj humoru. Strona nie musi być śmiertelnie poważna i pisana urzędowym językiem. Jeśli nie prowadzisz akurat witryny biura pogrzebowego, możesz sobie pozwolić na większą potoczystość treści i lekkość stylu, a czasem wręcz swadę. Ale z drugiej strony nie usiłuj bawić innych koszarowym dowcipem.

Bądź odpowiedzialny za swoją stronę. Jeśli chcesz zainteresować swoich gości, staraj się nie tylko zachować poprawność techniczną, ale i aktualność. Sprawdzaj, czy starannie zebrane hiperłącza są aktualne. Ja doskonale wiem, że im większy serwis, tym trudniej to zrealizować, gdyż niekiedy nie staje czasu. Ale od czegóż są odpowiednie narzędzia?

Uwagi techniczne

Używaj dobrych narzędzi. Możesz korzystać z wielu programów darmowych, shareware'owych czy komercyjnych i starannie wybierz najlepszy dla siebie zestaw. Jeśli nie wiesz, czego używać, zapytaj innych, zajrzyj do czasopism komputerowych, rzuć okiem na strony internetowe (opisy czy klasyfikacje w serwisach shareware'owych), poproś o informację w grupach dyskusyjnych w Usenecie.
Ze swojej praktyki mogę polecić m.in. dobre edytory tekstowe (polskie Pajączek czy Tiger, amerykańskie HomeSite, HotDog, WebEdit) i graficzne (FrontPage 98, FrontPage Express, NetObjects Fusion).

Stosuj się do standardów. Pamiętaj, że w polskim Internecie przyjęło się używanie polskich znaków w stronie kodowej ISO-8859-2 (ISO Latin 2, czyli potoczna "izolatka"). Jeśli koniecznie chcesz używać nieformalnego standardu Windows-1250, nikt Ci tego nie zabroni, ale koniecznie podaj deklarację strony kodowej w nagłówku dokumentu, tak samo zresztą, jak w przypadku standardu ISO. Zwróć uwagę, że ten ostatni standard jest bardziej uniwersalny. Jeśli opracowałeś wcześniej strony w standardzie Windows, przekonwertuj je - mamy już kilka dobrych polskich narzędzi, np. Ogonki 97.

Nie nasycaj strony zbyt wielką ilością grafiki. Jeśli wydaje Ci się, że strona wygląda "super" na Twoim lokalnym dysku, tańczy, śpiewa i gada, przypomnij sobie, że inni muszą ją wczytać z Sieci. Im więcej bajerów - obrazków, wideo, apletów i czego tam jeszcze - tym dłużej to trwa i tym więcej innych kosztuje. Jeśli przesadzisz, nie będą Cię odwiedzać. Pamiętaj, że w Internecie, jak w życiu, elegancki szary garnitur wygląda znacznie lepiej niż bajecznie kolorowe łowickie pasiaki. Poza tym świadczy o lepszym guście.
Zauważ, jak stonowane bywają strony opracowywane przez środowiska akademickie, gdzie najbardziej ceni się informację, a nie graficzny sztafaż, czyli "cały ten multimedialny zgiełk".
Jeszcze jedna praktyczna porada: jeśli koniecznie chcesz zaprezentować więcej grafiki, nie zaskakuj nią już na stronie głównej. Jeśli dajesz odsyłacz do innej swojej strony, która jest mocno obciążona obrazkami, zaznacz przy nim, jak wiele kodu trzeba wczytać. Dobrym obyczajem jest uprzedzanie o stronach ważących powyżej 50 KB. Podobnie, zaznaczaj wielkość plików, do których dajesz bezpośrednie odsyłacze (na przykład do programów czy zarchiwizowanych dokumentów).
Jeśli stosujesz mapy odsyłaczy na grafikach, podawaj także w jakimś miejscu odsyłacze tekstowe. Nie wszystkie przeglądarki są w stanie zobaczyć mapy graficzne. Ponadto wielu internautów wyłącza wczytywanie grafiki w swoich przeglądarkach, nawet gdy pracują w graficznym systemie operacyjnym. Chcą w ten sposób przyspieszyć przeglądanie Internetu. Nie pozbawiaj ich szansy obejrzenia Twoich wiekopomnych dokonań.

Ostrożnie wykorzystuj cudzą grafikę. Bardzo często korzystamy z grafiki, którą znajdziemy na innych stronach. Zanim ją skopiujesz, zastanów się, czy jej specyfika nie skłoni w pewnym momencie jej autora do interwencji (zdarzyło się już kiedyś, że Corel nakazał jednemu z polskich webmasterów wycofanie bardzo ciekawego animowanego obrazka). Ale na pewno nikt nie będzie Cię ścigać za wykorzystanie jakiejś ikonki, bombki czy paska. Jest zresztą mnóstwo darmowych kolekcji w Internecie - na przykład corelowski serwis ClipArtCity oferuje za darmo ponad 100 tysięcy obrazków!.

Podawaj datę aktualizacji serwisu. Twój gość na ogół nie ma czasu na szperanie w serwisie i zastanawianie się, co się właściwie zmieniło. Jeśli twoja witryna ma kilka stron, podaj datę także przy hiperłączach. A jeśli z powodów estetycznych nie chcesz tego robić, wydziel osobną stroniczkę pod hasłem "Co nowego?" i opisz tam krótko zmiany i uzupełnienia. Zasłużysz na wdzięczność swoich gości, którzy płacą słone rachunki telefoniczne za czas połączenia.

Nie bądź anonimowy. Podaj w widocznym miejscu krótką informację o sobie, aby czytelnik wiedział, z kim ma do czynienia. Podaj także koniecznie adres poczty elektronicznej, aby można się było do Ciebie zwrócić z pytaniem, sprostowaniem czy uwagami. Przypomnij sobie, jaką irytację wzbudzają w nas anonimowe oferty handlowe opatrzone jedynie numerem skrytki pocztowej.

Wstaw licznik odwiedzin. Liczniki takie oferują usługodwcy internetowi i są one dość obiektywnym miernikiem popularności Twoich stron. Nie usiłuj jednak oszukiwać innych pracowitym wczytywaniem strony dziesięć razy z rzędu. Oszukasz w ten sposób także sam siebie, gdyż w pewnym momencie stracisz rozeznanie, na ile wiarygodne są wskazania licznika. Traktuj ten wskaźnik jako cenne narzędzie pomiaru. Uwierz mi, jeśli serwis jest ciekawy, sam się obroni. Nie sądź, że chwilowy brak zainteresowania to dla Ciebie dyshonor, lecz staraj się ulepszyć swoją ofertę.

Poinformuj innych o swoich stronach. Służy do tego specjalna grupa dyskusyjna pl.comp.www.nowe-strony. Została ona w tym właśnie celu wydzielona z grupy pl.comp.www, aby nie przeciążać forum dyskusyjnego WWW.
Staraj się podawać w nich informacje rzeczowe. Nie krzycz WIELKIMI LITERAMI !!!!!!, że strona jest genialna, jedyna, niepowtarzalna i koniecznie cały świat musi ją zobaczyć. Wzbudza to na ogół irytację innych i zgryźliwe uwagi. Zaznacz, jaka jest tematyka Twojego serwisu, czy jest optymalizowany dla jakiejś przeglądarki, jak wielki materiał trzeba na początku wczytać (tekst, obrazki, ActiveX, aplety).
Nie bombarduj wszystkich możliwych grup dyskusyjnych informacjami o swojej witrynie. Nie wysyłaj także setek listów, jeśli przypadkiem masz dostęp do jakiejś listy wysyłkowej (spamerstwo jest tępione w Internecie). Najwyżej poinformuj pocztą kilku-kilkunastu swoich znajomych, czego nikt nie będzie Ci miał za złe. Jeszcze raz przypominam - jeśli pokażesz w Internecie coś ciekawego, wieść o tym rozejdzie się stopniowo sama, jak kręgi na wodzie. Pamiętaj tylko, aby rzucony kamień miał odpowiedni "ciężar gatunkowy".

Ucz się. Po prostu ucz się, jak robić dobre i ciekawe strony. Samo nie przyjdzie. A przede wszystkim staraj się mieć coś interesującego do powiedzenia. Nie wystarczy znać kilka języków - trzeba także wiedzieć, co w nich mówić.

A może o czymś jeszcze zapomniałem?


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Edytor | Osnowa dokumentu | Tytuły | Akapit i wiersz Pozioma linia | Wykazy | Atrybuty czcionki | Odsyłacze Wielkość i kolor czcionki | Grafika na stronie | Co dalej?

HTML dla bardzo początkujących

Uwaga: Jeśli Czytelnik tego kursu jest człowiekiem bardzo zapracowanym i mającym mało czasu, zapewne ucieszy go fakt, że w zasadzie może zakończyć lekturę, przynajmniej chwilowo, po przestudiowaniu tego rozdziału. Polecam jednak sięgnięcie za jakiś czas do kursu i przyjrzenie się dodatkowym możliwościom. Na razie prezentuję w skróconej formie najważniejsze polecenia, które wystarczą do sporządzenia prostej strony. Jeśli poświęcisz jeden weekend na gruntowne przestudiowanie tego rozdziału, będziesz już webmasterem!

Edytor

Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware).

Osobiście polecam używanie edytorów tekstowych, a nie graficznych, gdyż mamy wtedy lepszą kontrolę nad tworzonym dokumentem.

W środowisku Windows 3.1 polecam w szczególności:

  • Pajączek 2 - jest to polski edytor, jeden z najlepszych programów na świecie, co z satysfakcją należy podkreślić, już darmowy!
  • WebEdit 2
  • HotDog 3

W środowisku Windows 95/98 możesz używać:

  • HomeSite, w wersjach od 2.x do 4.x - moim zdaniem najlepszy edytor w tym środowisku
  • Pajączek 2000
  • Tiger98 - także polski, bardzo silny edytor
  • HotDog od 3 do 5 - silny, ale dość trudny w obsłudze
  • WebEdit 3 - jeden z najlepszych programów w tym środowisku
  • WebPager Xpress - polski edytor, nieco słabszy od wyżej wymienionych, ale darmowy
  • ezHTML - polski edytor, także darmowy

Oczywiście możesz się także posłużyć graficznymi edytorami, a dla początkujących polecam szczególnie darmowe edytory dołączone do przeglądarek Internet Explorer i Netscape Communicator (lub Sylaba Komunikator). Ponieważ jednak uczysz się języka HTML, warto się posługiwać edytorami tekstowymi.

Osnowa dokumentu

Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</H1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami.

Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami.

Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>. Wygląda to następująco:

<HTML>

<HEAD>informacje nagłówkowe</HEAD>

<BODY>

właściwa treść (ciało) dokumentu

</BODY>

</HTML>

Tak spreparowany szkielet jest już "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek.

Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji.

Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE>.

<HEAD>

<TITLE>Tytuł strony</TITLE>

</HEAD>

TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład:

<HEAD>

<TITLE>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</TITLE>

</HEAD>

Proszę zwrócić teraz uwagę na pasek tytułowy przeglądarki, gdzie widnieje treść "Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących".

Drugim bardzo ważnym elementem jest informacja stronie kodowej dokumentu.

Zalecamy usilnie stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Powinieneś sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda następująco:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Ostatecznie więc, stosuj na początku standardową osnowę:

<HTML>

<HEAD>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

<TITLE>Tytuł strony</TITLE>

</HEAD>

<BODY>

właściwa treść (ciało) dokumentu

</BODY>

</HTML>

Jak uzyskać polskie znaki w edytorach?

UWAGA: czołowe polskie edytory HTML nie wymagają już stosowania odrębnych klawiatur i czcionek ekranowych, gdyż same automatycznie konwertują polskie znaki do wybranej przez nas strony kodowej.

Poniższe uwagi dotyczą głównie edytorów produkcji zachodniej.

Aby wygodnie redagować dokumenty w standardzie kodowania ISO-8859-2, należy się zaopatrzyć w czcionki w tym standardzie. Są one dostępne (czcionki TrueType) na polskiej stronie "ogonkowej", pod adresem http://www.agh.edu.pl/ogonki/pl.html. Użytkownikom edytorów dla Windows polecam darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie Polska Strona Windowsowa. Użytkownikom edytora HomeSite 2.5 (lub nowszego) należy zalecać używanie czcionki PolskieStrony2. Należy również używać nakładki klawiaturowej, która pozwala zdefiniować klawiaturę ISO, np. w pakietach Mako lub Zecer. Pakiet Zecer 2.1 zawiera nakładkę klawiaturową Polkeyb, autorstwa Andrzeja Górbiela. Nakładka pozwala zdefiniować klawiatury w trybie graficznym, choć możliwe jest to za pomocą ręcznego wpisu do pliku WIN.INI. A stąd możesz pobrać za darmo Polkeyb 2.4

Dla ułatwienia podaję treść wpisu. Wystarczy go skopiować do schowka, wstawić do sekcji [PolKeyb] w WIN.NI, zapisać plik na dysku i ponownie uruchomić Windows. Fragment WIN.INI powinien wyglądać następująco:

[PolKeyb]
settings=0 2 10 0 1 10 0

name0=ISO-8859-2
keys0=ACELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175

Darmową klawiaturę ISO można pobrać także w serwisie Polska Strona Windowsowa, czyli tam, gdzie jest czcionka ekranowa PolskieStrony.

Problem konwersji już istniejących dokumentów można załatwić "hurtowo" za pomocą specjalnych programów konwertujących. Polecamy przede wszystkim program Ogonki 97, Michała Jaskólskiego - Michał oferuje ją wszystkim za darmo i warto podkreślić, że jego program stał się jednym z najważniejszych narzędzi w "dziecięcym" okresie polskiego Internetu. Niezliczone tysiące osób konwertowały już nim swoje strony, dostosowując je do zalecanego standardu.

Gdy z jakichś powodów zechcesz używać w swojej witrynie internetowej strony kodowej Windows-1250 (co odradzamy), wpisz koniecznie odpowiednią informację META:

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

Podsumowanie:

Jeśli zechcesz stosować stronę kodową ISO-8859-2 (zalecamy), wykonaj następujące działania:

  • Zaopatrz się w dowolną czcionkę ekranową w standardzie ISO-8859-2, za pomocą której będziesz wyświetlać tekst dokumentu w edytorze HTML
  • Używaj polskiej klawiatury w standardzie ISO-8859-2
  • Wstaw deklarację strony kodowej ISO-8859-2 w nagłówku dokumentu

Jeśli zamierzasz stosować stronę kodową Windows-1250 (nie zalecamy)

  • Użyj dowolnej czcionki ekranowej w tym standardzie (jest ich sporo w Windows)
  • Używaj standardowej klawiatury Windows
  • Wstaw deklarację strony kodowej Windows-1250 w nagłówku dokumentu

Użytkownicy systemu operacyjnego Linux w ogóle nie mają problemu ze stroną kodową, gdyż system ten posługuje się międzynarodowymi standardami.

Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary). Możemy wstawić polecenie:

<BODY BGCOLOR="kolor">

przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugerujemy używanie wartości heksadecymalnych, jako bardziej uniwersalnych - zapoznaj się przy okazji z tabelą kolorów w naszym kursie, gdzie są w praktyczny sposób pokazane kolory i sposób ich kodowania (tabelę sporządził Paweł Stokowski).

Tytuły

W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające jedynie znacznik otwierający. Niektóre polecenia można używać w obu postaciach, choć coraz powszechniejsze używanie stylów wymusza ostatnio bardziej rygorystyczne stosowanie znaczników zamykających (np. akapit).

Podkreślmy od razu, że znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst.

Uwaga: Powszechnie używany termin "nagłówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota.

Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń H1, H2 itd.

Tytuł stopnia pierwszego

Tytuł stopnia drugiego

Tytuł stopnia trzeciego

Tytuł stopnia czwartego

Tytuł stopnia piątego
Tytuł stopnia szóstego

Akapit i wiersz

Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <P> (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego </P>.

Przykład:

<P>To jest treść pierwszego akapitu</P>

<P>To jest treść drugiego akapitu</P>

Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <BR>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.

To jest pierwszy wiersz<BR>
To jest drugi wiersz<BR>
To jest trzeci wiersz<BR>
To jest czwarty wiersz<BR>

Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami.

Pozioma linia

Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Zauważ, że w tym dokumencie bloki informacji są rozdzielane właśnie poziomymi liniami.

Wykazy

Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów tekstów spotykają się z tym elementem - np. w polskiej wersji edytora Word są one znane pod nazwą list numerowanych i list wypunktowanych.

Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia <LI>

<P>Dlaczego zajmuję się UFO?</P>

<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>

W efekcie uzyskamy:

Dlaczego zajmuję się UFO?

  • Uważam, że UFO istnieje
  • Uważam, że pozaziemskie cywilizacje mogą nam pomóc
  • Uważam, że należy się przygotować na spotkanie

Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika <LI>, czy też zastosujemy dodatkowo znacznik zamykający </LI>. Autorzy edytorów HTML stosują różne konwencje, a wynik w przeglądarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca się zamykanie znaczników.

Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <UL> i </UL> możemy zastosować <OL> i </OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich (w dalszej części podręcznika pokażemy inne sposoby numerowania).

  1. Uważam, że UFO istnieje
  2. Uważam, że pozaziemskie cywilizacje mogą nam pomóc
  3. Uważam, że należy się przygotować na spotkanie

Atrybuty czcionki

Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia:

To jest tekst normalny

<B>To jest tekst pogrubiony (bold)</B>

<I>To jest tekst pochylony (italic, kursywa)</I>

<U>To jest tekst podkreślony (underlined)</U>

Efekt działania tych poleceń:

To jest tekst normalny

To jest tekst pogrubiony

To jest tekst pochylony

To jest tekst podkreślony

Choć wszystkie przeglądarki akceptują atrybuty czcionki, warto zauważyć, że np. Netscape Navigator 2 i 3 ignoruje podkreślenie, natomiast Netscape Communicator 4 już je widzi.

Odsyłacze

Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji.

W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do innych stron WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one bowiem najpowszechniej stosowane.

Odsyłacz do innej strony jest tworzony za pomocą polecenia:

<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>

Przykładowy adres mógłby wyglądać następująco:

<A HREF="http://www.pckurier.pl">PCkurier</A>

czyli,

PCkurier
to tam, gdzie zarabiam na swoją miskę ryżu :-)

Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW).

Uwaga: zalecamy nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html

Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A HREF="... "> i </A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony.

Zwróćmy uwagę na to, że adres internetowy jest podawany w cudzysłowie. Dla działania odsyłacza nie jest to wprawdzie absolutnie konieczne, ale wymaga tego formalna poprawność składni. Edytory HTML na ogół respektują ten wymóg (choć nie wszystkie).

Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy dysponują przecież zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika (ale rzadko to czynią autorzy stron z informacjami dla hackerów!). Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem.

Stosujemy tutaj na przykład następujące polecenie:

<A HREF="mailto:autor@jego.adres">Imię i nazwisko</A>

Na przykład na stronie PCkuriera prowadząca ją osoba wstawiła swój adres w postaci:

<A HREF="mailto:pawel.wimmer@pckurier.pl.">Redaktor strony</A>

Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. Navigator wywoła swój własny moduł pocztowy Mail, Internet Explorer zaś skorzysta z Outlook Express (albo np. z Outlook 98, jeśli jest on domyślnym programem pocztowym). Także i tutaj stosujmy konsekwentnie w adresie cudzysłów. Fragment w postaci:

Jeśli masz jakieś uwagi, napisz do <A HREF="mailto:pawel.wimmer@pckurier.pl">autora strony</A>

zostanie przedstawiony w przeglądarce następująco:

Jeśli masz jakieś uwagi, napisz do autora strony

Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zredagować list do autora.

Wielkość i kolor czcionki

Gdyby autorowi strony znudził się tekst, w którym czcionka ma ten sam kolor i wielkość, zawsze może się posłużyć dodatkowymi poleceniami, zmieniającymi obie cechy. W dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w edytorach tekstów. Podstawowa czcionka ma wielkość 3 jednostek (nie mylić z wielkością w punktach typograficznych) i jest zazwyczaj wyświetlana w przeglądarkach WWW jako czcionka 10-12-punktowa. Przeglądarki pozwalają na ogół zdefiniować, jaka wartość punktowa odpowiada czcionce o wielkości 3. W dokumencie możemy stosować czcionkę o wielkości od 1 do 7. Im większa wartość, tym większa czcionka w przeglądarce.

Uwaga: Wielkości czcionki w przeglądarce WWW nie należy utożsamiać z wielkością czcionki, za pomocą której redagujemy tekst w edytorze HTML! Czcionka w edytorze nie ma żadnego znaczenia dla postaci strony WWW. Możemy na przykład posługiwać się czcionką System, a i tak w przeglądarce pojawią się czcionki, które definiuje sam dokument lub przeglądarka.

Oto przykłady odmiennych wielkości czcionki w przeglądarce World Wide Web.

To jest czcionka o wielkości 7
To jest czcionka o wielkości 6
To jest czcionka o wielkości 5
To jest czcionka o wielkości 4
To jest czcionka o wielkości 3
To jest czcionka o wielkości 2
To jest czcionka o wielkości 1

Polecenie, które określa wielkość czcionki, ma następującą postać:

<FONT SIZE="x">Tekst objęty definicją</FONT>

x = 1...7

Gdy w taki właśnie sposób definiujemy wielkość czcionki, nadajemy jej wartość absolutną. Możemy jednak także nadać wartość relatywną, czyli względną, podając wielkość zmiany. Skoro czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 jednostki lub odjąć co najwyżej 2. Gdyby czcionka podstawowa miała wielkość 1, moglibyśmy dodać 6, ale już niczego nie moglibyśmy odejmować.

<FONT SIZE="+x">Tekst objęty definicją </FONT>

<FONT SIZE="-x">Tekst objęty definicją </FONT>

x = 1...6

Gdy jakiś fragment tekstu obejmiemy definicją <FONT SIZE=+2> </FONT>, będzie on miał wielkość 5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia <FONT SIZE=-1> </FONT>, tekst będzie miał wielkość 2.

W ten sposób możemy manipulować wysokością czcionki w tekście, uwypuklając jakieś fragmenty. Jest to wygodne, gdyż możemy zmienić wielkość czcionki wewnątrz akapitu, do czego nie nadaje się definicja tytułu.

W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się tutaj poleceniem:

<FONT COLOR="kolor">Tekst objęty poleceniem</FONT>

Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości szesnastkowych (np. kolor biały ma wartość #FFFFFF, a czarny #000000), albo za pomocą ich nazw. Wszystkie popularne przeglądarki akceptują wartości heksadecymalne (w formacie RRGGBB, gdzie RR - składowa czerwona, GG - składowa zielona, BB - składowa niebieska), aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML. Niektóre z edytorów pozwalają wybrać barwę za pomocą suwaków i wstawiają odpowiedni kod do edytora. Można się również posłużyć specjalnym programem do wyznaczania tych wartości - w Internecie można znaleźć kilka robiących to aplikacji.

Internet Explorer i Netscape Navigator interpretują również nazwy kolorów. Początkowo można było się posłużyć jedną z 16 barw, zaś ostatnio paleta rozszerzyła się do 256 kolorów. Najczęściej jednak przy definiowaniu koloru tekstu wystarczy 16 barw i można przyjąć, że posługiwanie się nazwami kolorów jest najwygodniejszą metodą ich definiowania, ponieważ przeglądarki Netscape i Microsoftu zdominowały rynek, więc znaczna część czytelników strony będzie widziała właściwe kolory.

Oto lista szesnastu podstawowych barw:

black silver gray white
(koloru silver nie widać, gdyż zlewa się z tłem strony)

maroon red purple fuchsia

green lime olive yellow

navy blue teal aqua

Grafika na stronie

Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za następnym razem przeglądarka sięga do katalogu cache, gdzie gromadzą się grafiki z Internetu, co znacznie przyspieszy transmisję zawartości strony. Niemniej jednak warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści.

Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych - GIF i JPG (JPEG) - które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc zajmują znacznie mniej miejsca grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.

Grafikę możemy wprowadzić za pomocą polecenia:

<IMG SRC="nazwa_pliku">

W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na przykład:

<IMG SRC="../gambler/gambler.gif">

Co dalej?

Nie po to uczymy się języka HTML, aby bawić się nim w domu. W końcu każdy zechce wystawić swoją stronę w Internecie, aby podzielić się z innymi swoimi wiekopomnymi dokonaniami czy przemyśleniami. Dlatego trzeba sobie zapewnić miejsce na jakimś serwerze.

Możesz wykupić kilka megabajtów miejsca u dowolnego dostawcy usług internetowych, ale to oczywiście kosztuje nieco grosza. Możesz także skorzystać z jakiejś darmowej oferty. Jeśli nie zapewnia Ci miejsca na serwerze Twój pracodawca, szkoła czy uczelnia, skorzystaj z bezpłatnej oferty firmy Polbox, która "przytuliła" już wiele tysięcy webmasterów, albo z oferty kilku innych firm, które także udostępniają darmowe miejsce (KKI, Friko itp.).

logo Polboxu http://free.polbox.pl


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Czym jest dokument HTML? | Dlaczego stosujemy edytory HTML? | Podstawowe elementy dokumentu | Więcej szczegółów o HEAD | Więcej szczegółów o BODY | Kilka uwag o wlewaniu tekstu

Struktura dokumentu

[hand] Czym jest dokument HTML?

Być może wiele osób sądzi, że strona w języku HTML jest jakimś tajemnym dokumentem, o specjalnym formacie, do tworzenia której potrzebne są specjalistyczne narzędzia i daleko idąca wiedza. Nic z tych rzeczy! Do utworzenia takiej strony nie jest potrzebne nic więcej niż... zwykły edytor tekstów. Może to być, przynajmniej teoretycznie, najprostszy edytor dla DOS, który potrafi zapisywać dokument w postaci tekstowej, choćby Norton Editor, PC Write czy cokolwiek równie prostego.

W dokumentach powinniśmy stosować standard kodowania polskich liter ISO-8859-2. Jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy. Należy unikać używania innych standardów, np. Windows-1250. W tej chwili praktycznie wszystkie systemy operacyjne są obługiwane przez przeglądarki potrafiące rozpoznawać deklarację strony kodowej, umieszczanej w ramach części nagłówkowej strony (HEAD). Ma ona w tym wypadku następującą postać:

<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</HEAD>

Kosztem stosowania standardu ISO-8859-2 jest błędne wyświetlanie w starszych przeglądarkach (Internet Explorer 3) kilku polskich znaków w niektórych elementach strony - skryptach Javy, belce tytułowej, wierszu statusu, alternatywnych opisach grafik, formularzach. Jeśli będzie to razić poczucie estetyki autora, może zrezygnować w nich ze stosowania polskich liter. Pamiętajmy jednak, że IE3 ma już bardzo niewielki udział w rynku - góra 10 proc. - więc problem ma charakter coraz bardziej marginalny.

Stosowanie standardu kodowania Windows-1250 nie jest zabronione, ale nie jest również zalecane. Gdyby webmaster z jakichś powodów chciał stosować ten standard, powinien bezwględnie umieścić w dokumencie deklarację użytej strony kodowej:

<HEAD>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
</HEAD>

Uwaga praktyczna:

Aby wygodnie redagować dokumenty w standardzie kodowania ISO-8859-2, należy się zaopatrzyć w czcionki w tym standardzie. Są one dostępne na polskiej stronie "ogonkowej", pod adresem http://www.agh.edu.pl/ogonki/pl.html. Użytkownikom edytorów dla Windows polecam darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie Polska Strona Windowsowa. Użytkownikom edytora HomeSite 2.5 należy zalecać używanie czcionki PolskieStrony2. Należy również używać nakładki klawiaturowej, która pozwala zdefiniować klawiaturę ISO, np. w pakietach Mako lub Zecer. Pakiet Zecer 2.1 zawiera nakładkę klawiaturową Polkeyb, autorstwa Andrzeja Górbiela. Nakładka pozwala zdefiniować klawiatury w trybie graficznym, choć możliwe jest to za pomocą ręcznego wpisu do pliku WIN.INI.

Dla ułatwienia podaję treść wpisu. Wystarczy go skopiować do schowka, wstawić do sekcji [PolKeyb] w WIN.NI, zapisać plik na dysku i ponownie uruchomić Windows. Fragment WIN.INI powinien wyglądać następująco:

[PolKeyb]
settings=0 2 10 0 1 10 0

name0=ISO-8859-2
keys0=ACELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175

Aby tekst w edytorze HTML był poprawnie wyświetlany, należy wybrać czcionkę ISO.

Wygodną, darmową klawiaturę ISO można znaleźć w serwisie Polska Strona Windowsowa

A stąd możesz pobrać za darmo Polkeyb 2.4

Uwaga: powyższe uwagi nie dotyczą polskich edytorów Pajączek 2000, Tiger98 i WebPager Xpress, które automatycznie kodują znaki w wybranym standardzie kodowania. W przypadku tego ostatniego edytora potrzebna jest jedynie czcionka ekranowa ISO.

Dokument HTML jest więc najzwyczajniejszym plikiem tekstowym, który zawiera jednak pewne osobliwe znaczniki, zwane z angielska "tagami". "Tagi", których jest kilkadziesiąt (i jeszcze trochę dodatkowych parametrów), stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle określone litery. Na przykład <H1> jest otwierającym znacznikiem tytułu pierwszego stopnia. Większość znaczników składa się z części otwierającej oraz zamykającej, która zawiera dodatkowo tzw. ukośnik (slash).

Gdybyśmy chcieli wprowadzić tytuł drugiego stopnia, powinniśmy napisać:
<H2>Treść tytułu drugiego stopnia</H2>, co w efekcie powinno dać wynik:

Treść tytułu drugiego stopnia

W podobny sposób możemy wprowadzić do dokumentu poziomą linię, posługując się pojedynczym znacznikiem <HR>, dzięki czemu uzyskamy na ekranie przeglądarki

Doszliśmy w tym miejscu do związku dokumentu HTML z przeglądarką World Wide Web. Przeglądarka jest wyspecjalizowanym programem, który interpretuje znaczniki i "przetwarza" je na właściwą postać graficzną. Do tej pory zaprojektowano już wiele przeglądarek, różniących się zaawansowaniem technicznym, a najdoskonalszymi z nich są obecnie Netscape Communicator (wersja 4), wyprodukowany przez amerykańską firmę Netscape Communications, oraz Internet Explorer 4, firmy Microsoft.

Wróćmy jednak do HTML.

Do zbudowaniu dokumentu HTML nie potrzeba więc niczego więcej jak znajomości języka i prostego edytora tekstów (ale zalecam stosowanie specjalizowanych edytorów!). Powszechnie przyjętym standardem jest opublikowany w grudniu 1997 roku HTML 4.0. Obszerny opis specyfikacji HTML 4.0, czyli HTML 4.0 Reference Specification, znajduje się na internetowej stronie http://www.w3.org/TR/REC-html40/ - można tam również pobrać spakowane archiwum.

Ważna uwaga: formalnie zalecane jest stosowanie wyłącznie języka wchodzącego w skład oficjalnej specyfikacji HTML, obecnie w wersji 4.0. Jest to oczywiście zalecenie, a nie bezwzględny przymus stosowania, którego ignorowanie pociąga za sobą jakiekolwiek sankcje, np. usunięcie witryny z Sieci - przynajmniej w tej chwili. Decyzję o przestrzeganiu lub wykraczaniu poza standard powinien podjąć SAM AUTOR serwisu, który przyjmuje tym samym płynące z tego tytułu konsekwencje. Skutkiem nieprzestrzegania specyfikacji może być to, że niektóre przeglądarki będą wadliwie interpretować przygotowane strony. Pamiętajmy także, że nawet czołowe przeglądarki nie interpretują w pełni elementów HTML 4.0.

[hand] Dlaczego stosujemy edytory HTML?

Skoro tworzenie dokumentu jest technicznie tak proste, dlaczego pojawiło się na świecie tak wiele edytorów HTML? Odpowiedź jest także prosta. Zamiast pracowicie wpisywać ręcznie znaczniki, wystarczy np. nacisnąć Alt-p, aby wstawić otwierający i zamykający znacznik akapitu, albo Ctrl-b, aby wprowadzić znacznik pogrubienia czcionki (choć nie każdy edytor na to pozwala). Bardziej zaawansowane produkty wspomagają tworzenie wyspecjalizowanych elementów, jak tabele, odsyłacze, ramki czy formularze. I na tym właśnie polega istota ich pracy. Nie pozostawiają użytkownika samemu sobie, lecz intensywnie wspomagają jego pracę, znacznie ją przyspieszając i ułatwiając. Obszerniejsze informacje o edytorach HTML znajdzie Czytelnik na stronie poświęconej narzędziom.

W Internecie, np. w grupach dyskusyjnych, pojawiają się często opinie, że "prawdziwy webmaster" nie używa niczego innego niż najprostszy notatnik. Należy stanowczo i zdecydowanie odrzucić takie stanowisko - praca bez wspomagania ze strony specjalizowanego edytora HTML jest oczywiście możliwa, ale jest znacznie bardziej czasochłonna, a przede wszystkim naraża na popełnianie błędów składniowych. Tego rodzaju opinie wprowadzają w błąd niedoświadczonych webmasterów, którzy przejęci nonszalancją "uczonych w piśmie" chcą postępować w podobny sposób. Prawdziwy webmaster to ten, kto tworzy poprawny kod, a nie ten, kto używa najprostszych narzędzi.

[hand] Podstawowe elementy dokumentu

Dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać co najmniej trzy elementy. Choć często spotyka się w Internecie dokumenty nie zawierające wszystkich poleceń, należy unikać tej maniery.

Wcześniej warto jeszcze powiedzieć, że często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML. Jest on wstawiany jako pierwszy element dokumentu, JESZCZE PRZED otwarciem szkieletu strony, czyli <HTML>. Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.

Jeśli dokument jest zgodny ze specyfikacją HTML 4.0, powinniśmy stosować prolog:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Jeśli dokument jest zgodny z wcześniejszą specyfikacją HTML 3.2, powinniśmy stosować prolog:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

lub

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Takie deklaracje przyjmują parsery jako podstawę badania poprawności składniowej. Można tutaj wymienić m.in.:

W3C HTML Validation Service udostępniony przez World Wide Web Consortium. Jest on oparty na specyfikacji HTML 4.0.

Warto też zaglądać do serwisów:

S.W.A.T - polskojęzyczny parser Tomasza Piłata

WebTechs HTML Validation Service

A Kinder, Gentler Validator

Warto w tym miejscu powiedzieć kilka słów o programach, które weryfikują składnię offline, czyli na komputerze użytkownika. Jeśli pragniemy mieć pełną kontrolę z punktu widzenia obowiązującego standardu HTML 3.2, powinniśmy się posługiwać darmowym programem Spyglass HTML Validator (dla Windows 95), który jest oparty na kompletnym parserze SGML. Jest on dostępny na internetowej stronie firmy Spyglass. Należy przy tym pamiętać, że wersja z końca maja 1997 wskazuje jako błąd podany wyżej prolog 3.2, akceptując natomiast wersję:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Pamiętając o tym, możemy jednak bez przeszkód weryfikować dokumenty z "oficjalnym" prologiem.

Dobrymi narzędziami, aczkolwiek w chwili obecnej nie dysponującymi wbudowanym parserem SGML, są HTML Powertools dla Windows 3.1 i Windows 95, firmy Opposite Software, a także CSE 3310 HTML Validator dla Windows 95, firmy Alsoft Internet Solutions. Są to dobre korektory poprawności składniowej, wychwytujące wiele błędów, aczkolwiek nie traktujące tak rygorystycznie standardu HTML. Osoba, której zależy na absolutnej zgodności ze standardem, powinna je traktować tylko jako bardzo dobre narzędzie pomocnicze. Zaletą HTML Validatora jest dodatkowo bezpośrednia współpraca z doskonałym edytorem HomeSite.

Wróćmy do szkieletu strony.

<HTML> </HTML>

Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce.

<HEAD> </HEAD>

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa.

<BODY> </BODY>

Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.

W praktyce wygląda to następująco:

<HTML>
<HEAD>

Informacje o dokumencie, łącznie z tytułem

</HEAD>
<BODY>

Treść dokumentu - tekst, grafika, odsyłacze itp.

</BODY>
</HTML>

[hand] Więcej szczegółów o HEAD

Definiując <HEAD> możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie.

[zielona kropka] <TITLE></TITLE>

Najważniejszym elementem (koniecznie go używaj!) jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki. Tytułu nie należy mylić z pierwszym nagłówkiem strony, aczkolwiek oba te elementy mogą mieć oczywiście tę samą treść. Załączony fragment ekranu pokazuje w belce treść Netscape - (Kurs języka HTML), gdyż w dokumencie znalazła się definicja <TITLE>Kurs języka HTML</TITLE>.

[tytuł w belce]

[zielona kropka] <META>

Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim. HTTP-EQUIV definiuje zmienne systemowe, natomiast NAME - zmienne użytkownika.

Chociaż META jest poleceniem opcjonalnym, nie wymaganym dla poprawności dokumentu, używanie go jest zalecane (podkreślam to pogrubieniem i czerwonym kolorem!), gdyż usprawnia funkcjonowanie witryny w Sieci. META nie jest zbiorem nikomu niepotrzebnych zaklęć, lecz użytecznym instrumentem współpracującym z przeglądarkami internetowymi i sieciowymi wyszukiwarkami. Wstawienie tych "zaklęć" jest banalną czynnością, a korzyści są niezaprzeczalne, co widać choćby wtedy, gdy korzystamy z polskiej wyszukiwarki Infoseek.

Zwróćmy uwagę na kilka poleceń, które można umieścić w <META>. Polecamy w szczególności: strona kodowa, opis strony, wyrazy kluczowe, autor strony.

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">

Polecenie jest deklaracją strony kodowej dokumentu. Inna postać to charset=windows-1250. Nowe przeglądarki (Navigator/Communicator, Internet Explorer) potrafią się automatycznie przestawić na właściwą stronę kodową, zgodnie z podaną deklaracją. Nie jest potrzebna interwencja użytkownika, który nie musi nawet wiedzieć, z jakim standardem kodowania polskich znaków ma do czynienia. Polecenie to jest bezwzględnie zalecane przy tworzeniu stron WWW. Jego brak jest, niestety, powszechnym błędem na stronach HTML-owych nowicjuszy.

<META NAME ="Description" CONTENT="jakaś tam treść">

Polecenie to opisuje zawartość strony. Zalecam stosowanie go, gdyż dzięki niemu ułatwiamy pracę osobom korzystającym z wyszukiwarki. Przykładowo, gdy posłużymy się Infoseekiem, szukając np. stron poświęconym językowi Esperanto, łatwo dostrzeżemy funkcjonalność poleceń TITLE i Description. To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony. Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy naszego dokumentu, które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana zawartość Description da natychmiast orientację co do zawartości strony. Może to być na przykład:

<META NAME ="Description" CONTENT="Esperanto: strona zawiera podstawowe informacje o języku Esperanto, odsyłacze do najważniejszych stron, podręcznik i słowniczek.">

Zaleca się nieprzekraczanie 150-200 znaków.

<META NAME="Keywords" CONTENT="jakieś wyrazy kluczowe">

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: HTML, Lupus. Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. To my właśnie decydujemy tutaj, jakie są istotne elementy strony. Jeśli nasza strona zawiera opis jakiegoś produktu, moglibyśmy podać wyrazy kluczowe "marmolada śliwkowa, przemysł, spółdzielnia Lepsze Jutro, żywność". Poszczególne wyrazy kluczowe są oddzielane przecinkami.

<META NAME="Language" CONTENT="pl">

Polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań. Dla języka angielskiego użyjemy en, dla amerykańskiego angielskiego en-us, dla niemieckiego de, dla francuskiego fr.

<META NAME="Author" CONTENT="imię i nazwisko">

Polecenie informuje o autorze strony.

<META NAME="Generator" CONTENT="nazwa edytora">

Polecenie informuje o użytym narzędziu do tworzenia stron HTML, np. Homesite, Pajączek, Tiger98.

<META HTTP-EQUIV="Refresh" CONTENT="x">

Polecenie spowoduje regularne odświeżanie strony co x sekund. Może to mieć praktyczne zastosowanie w przypadku, gdy strona zawiera bardzo często aktualizowane informacje (wiele razy dziennie). Gdy użytkownik korzysta ze strony przez dłuższy czas, strona będzie się sama aktualizowała.

Uwaga: nie stosuj tego polecenia jako narzędzia do "podbijania" wartości swojego licznika wizyt. Goście Twojej strony prędko zrezygnują z wizyt, gdy w trakcie czytania strona będzie się nagle odświeżała. No, chyba że robisz rzeczywiste aktualizacje co pół godziny :-) ...

<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://.../strona.html">

Polecenie spowoduje automatyczne wczytanie nowej strony po x sekundach. W Internecie często spotyka się strony z informacją o zmianie adresu, gdy odsyłacz z innej strony jest już nieaktualny. Autor strony pozostawia pod starym adresem informację o zmianie, podając nowy adres, ale opatrując tę stronę zaprezentowanym poleceniem, które spowoduje automatyczne przejście pod właściwy adres po x sekundach. Tylko niektóre przeglądarki interpretują to polecenie.

<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

Polecenie informuje o dacie utworzenia dokumentu, zwracając wartość (np. sieciowemu indekserowi) Creation-Date: Tue, 04 Dec 1993 21:29:02 GMT.

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3,Transition=23)">

Polecenie jest przykładem zastosowania przejść między stronami, interpretowanym jedynie przez Internet Explorera 4.01 (polecam bardzo zaopatrzenie się w tę wersję, gdyż znacznie lepiej działa w niej cache!). Możemy tutaj zastosować page-enter, page-exit, site-enter i site-exit. W Transition stosujemy numery filtrów graficznych od 1 do 28 (ich zestaw zawiera m.in. FrontPage 98), natomiast Duration określa czas trwania przejścia w sekundach. Filtry dają podobny efekt wizualny, jak przejścia między stronami w programach grafiki prezentacyjnej. Polecenie jest umieszczane na pierwszym miejscu listy poleceń META.

Przykład (Transition=1)

Przykład (Transition=2)

Przykład (Transition=3)

Przykład (Transition=4)

Przykład (Transition=5)

Przykład (Transition=6)

Przykład (Transition=7)

Przykład (Transition=8)

Przykład (Transition=9)

Przykład (Transition=10)

Przykład (Transition=11)

Przykład (Transition=12)

Przykład (Transition=13)

Przykład (Transition=14)

Przykład (Transition=15)

Przykład (Transition=16)

Przykład (Transition=17)

Przykład (Transition=18)

Przykład (Transition=19)

Przykład (Transition=20)

Przykład (Transition=21)

Przykład (Transition=22)

Przykład (Transition=23)

Przykład (Transition=24)

Przykład (Transition=25)

Przykład (Transition=26)

Przykład (Transition=27)

Przykład (Transition=28)

<META http-equiv="PICS-Label" content='(PICS-1.0 "http://www.rsac.org/ratingsv01.html" l gen false comment "RSACi North America Server" by "htmlib@htmlib.demon.co.uk" for "http://subnet.virtual-pc.com/~le387818/index.html" on "1996.04.04T08:15-0500" exp "1997.01.01T08:15-0500" r (n 0 s 0 v 0 l 0))'>

Jest to przykład (pochodzący z "HTML Reference Library 4") polecenia definiującego "cenzuralność" (rating) strony. Aby je zastosować, należy zgłosić stronę do serwisu zajmującego się wyceną zawartości stron, np. Recreational Software Advisory Council (RSAC), wypełniając formularz. RSAC przesyła ostateczną treść polecenia. W nawiasie są widoczne wyceny przykładowej strony: nudity - 0, sex - 0, violence - 0, language - 0. Wspomaganie PICS (Platform for Internet Content Selection) zawierają m.in. HotDog 4.5 i WebEdit 3.

Przeglądarka (Internet Explorer) interpretuje zawartość strony według zadeklarowanych wartości i wczytuje stronę albo nie, zależnie od przyjętych w opcjach ograniczeń. Jest to narzędzie, które pozwala blokować dostęp do niektórych stron, np. nieletnim do serwisów pornograficznych.

[zielona kropka] <BASE>

Polecenie definiuje bazowy adres dokumentu.

<BASE HREF="http://www.firma.com/dokument.html">

Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu.

Gdy dokument zostanie przeniesiony, może się zdarzyć, że odsyłacze stracą swoją aktualność, gdyż przeglądarka będzie je odnosić do nowego położenia dokumentu. Oczywiście poprawność wymagałaby w takiej sytuacji albo przeniesienia wszystkich dokumentów, do których odsyłacze znajdują się na danej stronie, albo ręcznego poprawienia adresów. Jedno i drugie może być bardzo kłopotliwe, a przeniesienie nawet z jakichś powodów niemożliwe. W takiej sytuacji wygodnym rozwiązaniem jest podanie <BASE> w nagłówku przenoszonej strony. Przeglądarka będzie automatycznie, "w locie" poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym, który stanowi w tej sytuacji swoistą busolę.

[zielona kropka] <LINK>

Polecenie ma określać hierarchiczny porządek w zespole dokumentów dla celów nawigacyjnych. W tym miejscu warto o nim wspomnieć jedynie w kontekście stylów dołączanych, które w Internet Explorerze wpływają na postać wyświetlanego dokumentu (będzie o tym mowa w rozdziale poświęconym stylom).

Pełny zestaw poleceń LINK interpretuje jedynie przeglądarka NCSA Mosaic 3 (pamiętasz jeszcze taką nazwę?...)

[hand] Więcej szczegółów o BODY

Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony.

[zielona kropka] <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif">

Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML) Jeśli np. będzie to <BODY BACKGROUND="lupus.gif">, w przeglądarce zobaczymy dokument w takiej postaci:

Kliknij w tym miejscu, aby zobaczyć przykład

Zauważmy, że niewielki objętościowo obrazek lupus.gif został powielony na szerokość i długość strony.

[zielona kropka] <BODY BGCOLOR="kolor">

Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy:

Kliknij w tym miejscu, aby zobaczyć przykład

Mam nadzieję, że nikogo nie rozbolały oczy od tego przykładu.

Uwaga: należy deklarować kolor tła strony, gdyż jeśli tego nie zrobimy, czytelnik strony zobaczy tło zależne od jego własnych ustawień w przeglądarce, białe, szare czy jakiekolwiek inne. Może to "zrujnować" wyświetlanie strony. Ponadto, gdy używamy pliku graficznego jako tła, także podawajmy alternatywny kolor tła strony, gdyż wiele osób wyłącza grafikę w przeglądarce - wtedy widoczny jest jedynie kolor tła strony.

[zielona kropka] <BODY TEXT="kolor">

Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła.

Kliknij w tym miejscu, aby zobaczyć przykład

[zielona kropka] <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3">

Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania" informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany. Możemy przykładowo użyć kolorów:

<BODY LINK="blue" VLINK="red" ALINK="yellow">

[zielona kropka] <BODY LEFTMARGIN="xx">

Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo.

[zielona kropka] <BODY TOPMARGIN="xx">

Ta sama przeglądarka akceptuje kod wprowadzający górny margines strony. Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół.

Kliknij w tym miejscu, aby zobaczyć przykład

Oba polecenia nie wchodzą w zakres standardu HTML 4.0.

[hand] Kilka uwag o wlewaniu tekstu

Bardziej szczegółowy opis formatowania bloków tekstu znajduje się na stronie Bloki, ale już w tym miejscu warto zasygnalizować podstawowe, związane z tym problemy.

Gdy redagujemy tekst w edytorze, jesteśmy przyzwyczajeni do używania klawisza Enter, aby oddzielać od siebie akapity. Jednak przeglądarka ignoruje znak końca akapitu i mimo oddzielenia od siebie akapitów w edytorze zostaną one złączone w przeglądarce w ciągłą linię. Dlatego każdy akapit powinniśmy umieszczać między parą znaczników <P> </P>. Jeśli wlewamy do edytora HTML tekst z innego źródła, musimy objąć każdy z akapitów osobną parą znaczników. Akapity są w przeglądarce oddzielane dodatkową interlinią, która uwypukla podział.
Możemy też posłużyć się pojedynczym (otwartym) znacznikiem <BR>, umieszczanym na końcu akapitu, który pozwoli oddzielić od siebie akapity, nie wprowadzając interlinii. Tak właśnie zostały rozdzielone akapit bieżący (możemy też...) i poprzedni (gdy redagujemy...).

Kilka spacji obok siebie jest zamienianych na pojedynczą spację, tak więc nie można (poza tzw. stylem preformatowanym) wstawiać większej liczby spacji między wyrazami. Na tej samej zasadzie ignorowane są również tabulatory.

Można jednak wstawiać znak tzw. niełamliwej spacji (&nbsp;), który pozwala wstawić kilka kolejnych spacji. Przykładem jest niniejszy akapit, którego pierwszy wiersz jest odsunięty od lewego marginesu o 8 spacji.

Internet Explorer (wyłącznie) pozwala wykorzystać połączenie stylu preformatowanego z krojem czcionki, co daje swobodę w stosowaniu znaków końca akapitu, tabulatora i spacji, z zachowaniem czcionki normalnego tekstu.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Czcionka pogrubiona | Czcionka pochylona | Czcionka migająca | Czcionka podkreślona | Czcionka o stałej szerokości znaku | Czcionka przekreślona | Superskrypt (indeks górny) | Subskrypt (indeks dolny) | Duża czcionka | Mała czcionka | Cytat blokowy | Definicja | Element usunięty | Element wstawiony | Skrót i akronim | Czcionka mocno wyróżniona | Czcionka wyróżniona (emfaza) | Kod | Czcionka wprowadzana z klawiatury | Przykład | Zmienna | Kolor czcionki | Wielkość czcionki | Czcionka bazowa | Zmiana kroju czcionki

Znaczniki fizyczne i logiczne czcionki

Znaczniki fizyczne - atrybuty

Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów.

[hand] Czcionka pogrubiona

<B> </B>

Przykład:

To jest czcionka pogrubiona (bold)

[hand] Czcionka pochylona

<I> </I>

Przykład:

To jest czcionka pochylona (italic)

[hand] Czcionka migająca

<BLINK> </BLINK>

Przykład:

To jest czcionka migająca (blink) - jest to rozszerzenie Netscape'a, nie znajdujące się w specyfikacji HTML 4.

[hand] Czcionka podkreślona

<U> </U>

Przykład:

To jest czcionka podkreślona (underline)

[hand] Czcionka o stałej szerokości znaku

<TT> </TT>

Przykład:

To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype)

[hand] Czcionka przekreślona

<STRIKE> </STRIKE>

Przykład:

Czcionka przekreślona

Alternatywnie jest używane równoważne polecenie <S></S>:. Oba polecenia istnieją w specyfikacji HTML 4 i są w dalszym ciągu interpretowane przez przeglądarki, ale autorzy specyfikacji zalecają ich stopniowe zastępowanie przez nowsze konstrukcje języka.

[hand] Superskrypt (indeks górny)

<SUP> </SUP>

Przykład:

Czcionka z superskryptem

[hand] Subskrypt (indeks dolny)

<SUB> </SUB>

Przykład:

Czcionka z subskryptem

[hand] Duża czcionka (+1 punkt)

<BIG> </BIG>

Przykład:

Duża czcionka

[hand] Mała czcionka (-1 punkt)

<SMALL> </SMALL>

Przykład:

Mała czcionka

Znaczniki logiczne - style

Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu

[hand] Cytat blokowy

<CITE> </CITE>

Przykład:

To jest cytat (citation)

[hand] Definicja

<DFN> </DFN>

<DFN>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarka interpretuje DFN jako kursywę (IE4) lub nie wyróżnia czcionki (NC4). Na przykład:

Internet Explorer 5 to najnowsza przeglądarka firmy Microsoft.

[hand] Element usunięty

Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem <DEL>, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.:

<del>Dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.</del>

Dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.

Polecenie jest interpretowane przez IE4 i 5.

[hand] Element wstawiony

Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS.

<ins>To jest nowe opracowanie tematu.</ins>

To jest nowe opracowanie tematu

Polecenie jest interpretowane przez IE4 i 5.

[hand] Skrót i akronim

Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów.

<ABBR lang="pl">Prof.</ABBR>

<ACRONYM lang="en">WWW</ACRONYM>

[hand] Czcionka mocno wyróżniona

<STRONG> </STRONG>

Przykład:

To jest czcionka mocno wyróżniona (strong)

[hand] Czcionka wyróżniona (emfaza)

<EM> </EM>

Przykład:

To jest czcionka wyróżniona (emphasis)

[hand] Kod (tekst programu)

<CODE> </CODE>

Przykład:

To jest kod (code)

[hand] Czcionka wprowadzana z klawiatury

<KBD> </KBD>

Przykład:

Czcionka z klawiatury

[hand] Przykład

<SAMP> </SAMP>

Przykład:

Przykład (sample)

[hand] Zmienna (słowo kluczowe języka)

<VAR> </VAR>

Przykład:

Zmienna (variable)

[hand] Kolory czcionki

Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Poniżej przedstawiamy listę 16 podstawowych barw stosowanych w dokumentach internetowych - są one widoczne w przeglądarkach Netscape Navigator i Microsoft Internet Explorer. Naturalnie możemy w dowolny sposób kombinować barwy z atrybutami i stylami.

Składnia: <FONT COLOR="nazwa_koloru"> </FONT>

tekst próbny - black

tekst próbny - olive

tekst próbny - teal

tekst próbny - red

tekst próbny - blue

tekst próbny - maroon

tekst próbny - navy

tekst próbny - gray

tekst próbny - lime

tekst próbny - fuchsia

tekst próbny - white

tekst próbny - green

tekst próbny - purple

tekst próbny - silver(Tutaj jest kolor silver, ale nie widać go ze względu na kolor tła)

tekst próbny - yellow

tekst próbny - aqua

[hand] Wielkość czcionki

Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników <FONT SIZE="xx"> </FONT>. Na przykład:

To jest tekst normalny

To jest tekst nieco większy.

To jest tekst nieco mniejszy.

I znów tekst normalny.

A teraz całkiem już spory.

I całkiem malutki.

Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.

Gdy redagujemy tekst, możemy w dowolnej chwili zmienić wielkość czcionki, przypisując jej wartość bezwzględną z przedziału 1-7, posługując się podanym wyżej parametrem. Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.

<FONT SIZE="+x"> </FONT>

Na przykład:

To jest tekst normalny, który teraz powiększamy o 1, a następnie zmniejszamy o 1, po czym powracamy do standardowej wielkości.

[hand] Czcionka bazowa

Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić za pomocą polecenia:

<BASEFONT SIZE="x">

Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, <BIG> wprowadzi czcionkę o wielkości 6, <SMALL> - o wielkości 4, <FONT SIZE=-3> zmniejszy czcionkę do 2 punktów itd.

Uwaga: polecenie BASEFONT jest uznane za niepożądane i zalecane jest rezygnowanie z niego w dokumentach.

[hand] Zmiana kroju czcionki

Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie <FONT FACE="nazwa_kroju"> </FONT>. Pozwala ono zmienić krój czcionki dla danego dokumentu. Na przykład:

To jest tekst, który zapewne widzisz jako Times. A teraz zmieniamy go na moment na Arial, przechodzimy do kroju courier, aby powrócić do Times.

Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym). Szczególnie warto polecać w takich sytuacjach stosowanie ciągu w rodzaju <FONT FACE="Arial CE", Arial, Helvetica>, gdyż zabezpieczymy się w ten sposób przed ryzykiem niepoprawnego wyświetlania polskich znaków w Windows 3.1.

Uwaga: polecenie FONT FACE nie jest zalecanym poleceniem HTML i sugeruje się rezygnowanie z niego na rzecz stylów.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Tytuł pierwszego stopnia | Tytuł drugiego stopnia | Tytuł trzeciego stopnia | Tytuł czwartego stopnia | Tytuł piątego stopnia | Tytuł szóstego stopnia | Wyrównywanie tytułów | Znacznik akapitu | Znacznik końca wiersza | Pozioma linia | Blok preformatowany | Blok cytowany | Cytat w wierszu | Adres | Środkowanie | Komentarz | Wycinek dokumentu | Obramowanie | Przycisk | Blokada i wymuszenie przełamania | Pisanie w szpaltach | Pusta przestrzeń

Formatowanie bloków

[hand] Tytuł pierwszego stopnia

<H1> </H1>

Przykład:

To jest tytuł pierwszego stopnia

Zwróćmy od razu uwagę na pewien atrybut, który można wykorzystać w połączeniu z tytułem, akapitem czy niemal dowolnym innym elementem na stronie. Jest to atrybut TITLE, wyświetlający "dymek" z informacj. Na razie interpretuje go Internet Explorer 4.

W poleceniu dodajemy TITLE="jakiś tam tekst", np.:

<H1 TITLE="Mnóstwo ciekawych rzeczy do kupienia, koniecznie zobacz nasz katalog">Katalog Produktów</H1>

Przesuń kursor myszki nad tytuł - zobaczysz ciekawy efekt.

Katalog Produktów

[hand] Tytuł drugiego stopnia

<H2> </H2>

Przykład:

To jest tytuł drugiego stopnia

[hand] Tytuł trzeciego stopnia

<H3> </H3>

Przykład:

To jest tytuł trzeciego stopnia

[hand] Tytuł czwartego stopnia

<H4> </H4>

Przykład:

To jest tytuł czwartego stopnia

[hand] Tytuł piątego stopnia

<H5> </H5>

Przykład:

To jest tytuł piątego stopnia

[hand] Tytuł szóstego stopnia

<H6> </H6>

Przykład:

To jest tytuł szóstego stopnia

[hand] Wyrównywanie tytułów

<Hx ALIGN=CENTER> </Hx>

Przykład:

To jest tytuł na środku strony

<Hx ALIGN=RIGHT> </Hx>

To jest tytuł justowany do prawego marginesu

<Hx ALIGN=LEFT> </Hx>

To jest tytuł justowany do lewego marginesu

[hand] Znacznik akapitu

<P> </P>

Przykład:

To jest nieco dłuższy akapit, który powinien zająć więcej niż jeden wiersz, aby można było poprawnie zobrazować stosowanie tego znacznika. No, chyba już. Wiersz został przeniesiony.

To jest następny akapit, oddzielony od poprzedniego interlinią. Każdy akapit jest objęty parą znaczników.

Akapit można wyrównać do lewego marginesu (domyślne ustawienie)

<P ALIGN=LEFT> </P>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

... lub do prawego

<P ALIGN=RIGHT> </P>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

Można go też środkować

<P ALIGN=CENTER> </P>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

A także wyrównywać do obu marginesów

<P ALIGN=JUSTIFY> </P>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

[hand] Znacznik końca wiersza

<BR>

Przykład:

Pierwszy akapit, w którym zastosowaliśmy przenoszenie wiersza. Uwaga, przenosimy...
Następny wiersz tego samego akapitu, wpisywany po znaczniku <BR>, dzięki któremu został utworzony.

A teraz następny akapit, w którym zastosujemy...
ten sam manewr.
W taki sposób możemy skracać wiersze akapitu i przenosić je niżej, co bardzo się przyda we współczesnej poezji
pisanej
często
w słupkach (taka moda)

Pić
albo nie pić,
oto jest pytanie...
a odpowiedzi udzieli Ci na nie
Paweł Wimmer

Znacznik końca wiersza może być obecnie opatrywany dodatkowymi parametrami: CLEAR=LEFT, CLEAR=RIGHT i CLEAR=ALL. Parametry te są wykorzystywane przy pozycjonowaniu grafiki i tekstu.

<BR CLEAR=abc>

Gdy zastosujemy polecenie <IMG SRC="obrazek" ALIGN=LEFT>, obrazek zostanie ustawiony przy lewym marginesie strony, a znajdujący się za obrazkiem tekst będzie ustawiany na tym samym poziomie.

Użycie parametru CLEAR pozwoli nam w odpowiednim momencie "zrzucić" tekst, poniżej grafiki. Na przykład:

[ENTER]

To jest strona ENTER-a

ENTER to takie pismo.

Analogiczne polecenie można zastosować w przypadku obrazka przesuniętego w prawo (align=right), gdzie stosujemy <BR CLEAR=RIGHT>

[ENTER]

To jest strona ENTER-a

ENTER to takie pismo.

Gdy na jednym poziomie na stronie znajdują się np. dwa obrazki i będziemy chcieli "zrzucić" tekst poniżej ich poziomu, możemy użyć CLEAR=ALL.

Ten sam efekt uzyskalibyśmy, w tym konkretnym przypadku, stosując CLEAR=RIGHT, gdyż prawy obrazek jest większy. Użycie CLEAR=LEFT przesunie tekst poniżej lewego obrazka, ale nie poniżej prawego. CLEAR=ALL jest o tyle lepsze, że w pewnym momencie moglibyśmy zechcieć zmienić wielkość obu obrazków (lewy większy) i trzeba by pamiętać o zmianie parametru CLEAR.

Parametr CLEAR można również stosować w ustawianiu tabel i tekstu, ale nie przy wykazach.

[hand] Pozioma linia

<HR>

Przykład:

Linia może być pozbawiona cieniowania

<HR NOSHADE>

Linii możemy nadać dowolną grubość

<HR SIZE=5>

Linia może mieć określoną długość w pikselach

<HR WIDTH=300>

lub w procencie szerokości strony

<HR WIDTH=50%>

Linia może być umieszczona na środku (domyślnie)

<HR ALIGN=center>

<HR ALIGN=center SIZE=8 WIDTH=200>

Może być justowana do lewego brzegu strony...

<HR ALIGN=left>

<HR ALIGN=left NOSHADE SIZE=4 WIDTH=300>

... lub do prawego

<HR ALIGN=right>

<HR ALIGN=right SIZE=3 WIDTH=400>

Jeszcze jednym uzupełnieniem jest kolor poziomej linii, potocznie zwanej separatorem - jest to rozszerzenie Internet Explorera, nie wchodzące jednak w skład HTML 4. Zaleca się raczej stosowanie stylów.

Polecenie:

<hr color="nazwa_koloru">

w prosty sposób zmienia barwę separatora. Możemy oczywiście manipulować szerokością i długością linii.

[hand] Blok preformatowany

<PRE> </PRE>

Tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku)
pozwala     wprowadzać    dodatkowe    spacje,

    uwzględnia także
        punkty tabulacji,
i znaki końca akapitu.
a1	a2	a3	a4
b1	b2	b3	b4

Polecenie PRE jest zalecane zamiast przestarzałych (nie istniejących już w specyfikacji języka) konstrukcji LISTING, PLAINTEXT i XMP.

[hand] Blok cytowany

<BLOCKQUOTE> </BLOCKQUOTE>

Bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z uwzględnieniem tabulacji. Na przykład:

Wydaje mi się, że wiersz kończy się fragmentem

Soft you now, the fair Ophelia.
Nymph, in thy orisons,
be all my sins remembered.

Ale nie mam pewności.

(Przykład zaczerpnięty z HTML Reference Library)

[hand] Cytat w wierszu

Nowym poleceniem HTML jest krótki cytat w ramach wiersza (in-line quote), wprowadzany za pomocą <Q></Q>.

Polecenie ma automatycznie obejmować cytowany tekst cudzysłowem, przy czym od definicji języka zależy sposób wyświetlania cudzysłowu. Na przykład, dla języka angielskiego, zagnieżdżone polecenie:

John said, <Q lang="en">I saw Lucy at lunch, she says <Q lang="en">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

powinno dać w efekcie

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

Jak widać, "zewnętrzne" Q tworzy cudzysłów " ", a "wewnętrzne" apostrofy ' '.

Żadna z przeglądarek nie interpretuje tego polecenia (w przykładzie cudzysłowy zostały wprowadzone ręcznie).

(przykład pochodzi z HTML Reference Library)

[hand] Adres

<ADDRESS> </ADDRESS>

Polecenie jest interpretowane jako kursywa i jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.:

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

[hand] Środkowanie

<CENTER> </CENTER>

Polecenie służy do środkowania na stronie wskazanego elementu, np. tekst lub obrazka.

To jest tekst na samym środeczku

[hand] Komentarz

<!-- ... -->

Polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu. Na przykład:

<!-- Ten dokument jest w trakcie budowania. Najprawdopodobniej następne zmiany pojawią się w przyszłym miesiącu -->

[hand] Wycinek dokumentu

<DIV> </DIV>

Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania - środkowanie lub dosunięcie do prawego marginesu. DIV jest często stosowane przy definiowaniu stylów. Przykład użycia <DIV align=right>

Wykaz
  • pierwszy punkt wykazu
  • drugi punkt wykazu
  • trzeci punkt wykazu
jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst.

[ENTER]

[hand] Obramowanie

W specyfikacji HTML 4 pojawiło się polecenie FIELDSET, które tworzy obramowanie dla znajdującego się w jego ramach elementu. Interpretuje je na razie Internet Explorer 4.

<FIELDSET>jakiś tam element</FIELDSET>

To jest tekst objęty obramowaniem

Samo obramowanie można oczywiście uzyskać za pomocą stylów, więc wprowadzanie nowego polecenia nie byłoby zasadne. Rzeczywisty efekt widzimy dopiero po połączeniu go ze znacznikiem <LEGEND>.

<FIELDSET>
<LEGEND>Wykaz elementów</LEGEND>
pierwszy element
drugi element
trzeci element
</FIELDSET>

A oto wynik:

Wykaz elementów to jest pierwszy element wykazu
to jest drugi element wykazu
to jest trzeci element wykazu

Inny przykład, zaczerpnięty z HTML Reference Library

Wybierz kolor
Red : | Orange :
Green : | Purple :
Blue : | Aqua :

[hand] Blokada i wymuszenie przełamania

<NOBR> </NOBR>

Niekiedy zdarza się, że jakiś tekst powinien być wyświetlany w jednym wierszu. Aby zapobiec przełamaniu wiersza, możemy objąć tekst poleceniem <NOBR> </NOBR>.

Należy je stosować ostrożnie, gdyż przeglądarka jest wtedy zmuszona do sztucznego poszerzania okna. Gdyby tekst był długi, użytkownik byłby zmuszony do kłopotliwego przewijania okna wszerz, aby przeczytać całą zawartość wiersza.

tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać

Proszę zwrócić uwagę na dolny suwak przeglądarki.

<WBR>

Razem z <NOBR> stosuje się niekiedy wymuszenie przełamania wiersza, za pomocą <WBR> - Word Break. Wstawienie polecenia spowoduje przełamanie wiersza, tj. przeniesienie wyrazu za poleceniem i następującego po nim tekstu o jeden wiersz. W dalszym ciągu jednak całość jest objęta działaniem <NOBR>.

tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, a jednak go przełamaliśmy, ale dalej tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać

WBR i NOBR są poleceniami przestarzałymi, nie wchodzącymi w skład HTML 4, aczkolwiek obsługują je ciągle Navigator i Internet Explorer.

[hand] Pisanie w szpaltach

Wprowadzonym przez Netscape Communications poleceniem (nie uwzględnionym w specyfikacji HTML 4) jest <MULTICOL> </MULTICOL>, które pozwala redagować blok tekstu w szpaltach. Jak na razie, polecenie jest interpretowane przez Navigatora 3 i 4.

Jedynym obowiązkowym parametrem polecenia jest liczba szpalt. Wprowadzamy ją za pomocą polecenia:

<MULTICOL cols="x"> </MULTICOL>

Parametr GUTTER, podawany w pikselach, określa odstęp między szpaltami.

Parametr WIDTH, podawany w pikselach lub procencie szerokości okna, określa szerokość, jaką zajmują szpalty.

Przykład (tylko Navigator 3 i 4):

Coraz popularniejszy w ostatnim czasie Internet, a w szczególności jego "graficzna" część, znana pod potoczną nazwą World Wide Web (WWW lub W3), przyciąga miliony użytkowników komputerów na całym świecie. W Polsce dostęp do Internetu ma już kilkaset tysięcy osób i liczba ta bardzo szybko rośnie.

W Internecie znajdziemy już kilkaset tysięcy serwerów, zawierających dziesiątki milionów stron. To przeogromne bogactwo informacji, dostępnej za pośrednictwem komputera i przeglądarki WWW, stwarza wręcz kłopot swą obfitością, dając chleb rozmaitym serwisom, które usiłują zaprowadzić elementarny porządek w dostępie do niej.

Znakomita większość użytkowników Internetu jest zainteresowana czytaniem stron WWW, wymianą poczty elektronicznej czy uczestnictwem w grupach dyskusyjnych (Usenet). Coraz więcej jednak osób interesuje się także bardziej aktywnym zaistnieniem w Internecie, chcąc zaprezentować siebie samych, swoje poglądy i swoje dokonania - zawodowe i pozazawodowe. Osoby te, chcąc umieścić w Internecie swoje własne strony WWW, muszą jednak poznać specyficzny język HTML (HyperText Markup Language), dzięki któremu dokument HTML jest czytelny dla innych osób.

Język HTML jest zbiorem specjalnych znaczników (ang. tag), którymi są opatrywane poszczególne części dokumentu, a które z kolei są interpretowane przez przeglądarkę WWW, a także reguł ich stosowania. Znaczników nie jest wiele i można je opanować stosunkowo szybko - sprzyja temu fakt, że już znajomość 20-30 poleceń wystarcza z powodzeniem do konstruowania efektownie wyglądających stron. Dlatego zaczniemy nasz podręcznik od zaprezentowania elementarnego, naszym zdaniem, zbioru. Nabranie wprawy w ich stosowaniu zapewne zachęci wiele osób do sięgnięcia do bardziej zaawansowanych metod budowania stron, stosownie do pojawiających się potrzeb.

[hand] Pusta przestrzeń

<SPACER>

Netscape Communications wprowadziła w najnowszej wersji Navigatora interpretację polecenia <SPACER>, które wstawia pustą przestrzeń w danym miejscu strony (polecenie nie jest częścią HTML 4).

Polecenie zawiera kilka parametrów, które precyzują jego działanie:

TYPE=horizontal (vertical, block) określa, czy wolna przestrzeń jest wstawiana poziomo, pionowo czy też w postaci bloku.

SIZE=wartość_w_pikselach (dotyczy wersji poziomej lub pionowej)

WIDTH= wartość_w_pikselach (dotyczy bloku)

HEIGHT=wartość_w_pikselach (dotyczy bloku)

ALIGN=left (center, right) - wyrównanie bloku do lewego marginesu, środkowanie bloku lub dosunięcie bloku do prawego marginesu.

Przykładowo, polecenie <SPACER TYPE="horizontal" SIZE=100> wprowadzi w danym miejscu wiersza 100-punktowy odstęp.

A to jest przykład.

<SPACER TYPE="vertical" SIZE=50> pozwoli np. oddzielić od siebie dwa bloki tekstu o 50 punktów w pionie.

<SPACER TYPE="block" HEIGHT=50 WIDTH=100 ALIGN=LEFT> wprowadzi pusty blok przy lewym marginesie.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Istota odsyłaczy | Etykieta | Odsyłacze | Mapy odsyłaczy na obrazkach

Odsyłacze

[hand] Istota odsyłaczy

Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki) są chyba najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie.Dzięki odsyłaczom można wiązać ze sobą poszczególne strony, a doskonałym przykładem ich roli jest choćby niniejszy kurs, który został opracowany na wielu, powiązanych ze sobą stronach. Gdyby nie było odsyłaczy, cała treść kursu musiałaby zostać przedstawiona na jednej stronie, która byłaby dość uciążliwa w czytaniu.

Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata. Użytkownik nie musi nawet w gruncie rzeczy wiedzieć, że powiązane ze sobą tematycznie informacje znajdują się w miejscach oddalonych od siebie nawet o tysiące kilometrów. Najważniejsze jest ich tematyczne powiązanie, a nie lokalizacja. Gdy na przykład czytamy stronę zawierającą opis jakiejś choroby, możemy sięgnąć do całkiem innego miejsca w poszukiwaniu jej etiologii, a do jeszcze innego, gdy będziemy chcieli przeczytać o jej ogniskach.

Hipertekstowe odsyłacze w World Wide Web można porównać ze spisem treści czy odsyłaczami w książce. Informacja, że na stronie 154 znajduje się rozdział pod jakimś tytułem, a na stronie 87 tabela, na którą powołujemy się w jakimś miejscu książki, jest de facto odsyłaczem, choć czytelnik musi wykonać "skok" samodzielnie, wertując po prostu kartki. Elektroniczne odsyłacze są znacznie wygodniejsze w obsłudze, a dość znanym przykładem zastosowania jest edytor WordPerfect czy programy do tworzenia elektronicznych publikacji - Adobe Acrobat czy Novell Envoy. Odsyłacz można też potraktować jak swoistą dygresję. Warto jednak zwrócić uwagę, że zbyt duża liczba odsyłaczy, zwłaszcza w tekście o charakterze na poły "beletrystycznym", może rozpraszać czytelnika, chyba że strona zawiera po prostu z założenia odsyłacze do jakichś źródeł. Warto je jednak stosować z umiarem.

[hand] Etykieta

Można wyróżnić dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron.

Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu. Jej konstrukcja jest następująca:

<A NAME="nazwa_etykiety"> </A>

Zauważmy, że w taki właśnie sposób zostały utworzone etykiety na stronach kursu. Umożliwiło to zbudowanie czegoś w rodzaju spisów treści na poszczególnych stronach, które pozwalają szybko skoczyć do opisu wybranego zagadnienia.

Możemy utworzyć w dokumencie dowolną liczbę etykiet, które będą służyć jako punkty docelowe dla różnych odsyłaczy. Jest to szczególnie wygodne w przypadku dużych objętościowo stron, wymagających podzielenia na pewne logiczne fragmenty, aby były łatwiejsze w czytaniu. Spis zagadnień z wykorzystaniem odsyłaczy do etykiet-zakładek jest bardzo często stosowany w Internecie.

Dobrym obyczajem jest stosowanie cudzysłowu obejmującego etykiety, podobnie jak i adresów w odsyłaczach. Gdy etykieta zawiera kilka wyrazów, ich użycie jest wręcz konieczne, aby definicja była poprawna. Należy też zwracać uwagę na wielkość liter, gdyż są one na ogół rozróżniane. Można zalecać używanie małych liter zarówno w etykietach, jak i odsyłaczach do nich.

Uwaga: wielowyrazowe zakładki, nawet ujęte w cudzysłowy, są ignorowane przez niektóre przeglądarki, np. Lynx. Można temu zaradzić, łącząc wyrazy, np. "to_jest_zakładka_dla_pewnego_tematu".

[hand] Odsyłacze

[zielona kropka] Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci:

<A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A>

Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony. Na przykład odsyłacz do miesięcznika ENTER:

Tutaj znajdziesz miesięcznik ENTER

Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja http://www.enter.pl. Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to koszmarnie długo!).

ISTOTNA UWAGA: przy tworzeniu odsyłaczy należy zwracać uwagę na wielkość liter w odsyłaczach. Dla wielu serwerów internetowych ta sama wielka i mała litera są dwoma różnymi znakami, więc "MojaFirma" nie jest tym samym co "mojafirma". Praktyka pokazuje, że wiele osób nie zwraca na to uwagi, wskutek czego nie można wczytać strony albo obrazka czy pliku dźwiękowego na konkretnej stronie - gdy plik na serwerze zawiera jakieś wielkie litery, koniecznie należy to uwzględnić w odsyłaczu.

Do jakich miejsc możemy się odwoływać?

[zielona kropka] Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać:

<A HREF="http://host.domena>Tekst</A>.

W pokazanym wyżej przykładzie WordPerfect Magazine posłużyliśmy się adresem http://www.wpmag.com, gdzie host=www, a domena=wpmag.com. Konieczne jest oczywiście użycie w adresie na początku http://.

Zauważmy od razu, że taki adres powoduje wywołanie głównej (domyślnej) strony WWW. Nazwy strony nie podawaliśmy. Dlatego zaleca się, aby strona główna serwisu była plikiem o nazwie index.htm lub index.html.

Gdy zamieszczamy w naszym dokumencie jakiś odsyłacz do strony znajdującej się gdzieś w świecie, należy po prostu przepisać ten adres w trakcie sesji w Internecie. Często jednak będziemy się odwoływali do stron samodzielnie sporządzonych i wtedy wystarczy po prostu podawać ich nazwy, bez konieczności definiowania adresu http. Najwygodniej jest wówczas oczywiście ulokować wszystkie strony i niezbędne pliki graficzne, którymi upstrzyliśmy nasz dokument, w jednym katalogu. Znacznie uprości to życie w trakcie konstruowania dokumentu. Jeśli jednak prowadzimy większy serwis, lepiej jest utworzyć w naszym komputerze i na serwerze odrębne katalogi tematyczne, a dla grafiki wyznaczyć nawet osobny folder, dzięki czemu będziemy się mogli do nich wygodnie odwoływać, jeśli zajdzie taka potrzeba.

Praktyczna uwaga: gdy chcemy wstawić do dokumentu jakiś adres, który znaleźliśmy w Internecie, nie jest konieczne ręczne przepisywanie adresu. Można postąpić w następujący sposób:

  • Jeśli używasz Netscape Navigatora, ustaw kursor na odsyłaczu, kliknij prawym przyciskiem myszki i wybierz opcję Copy this link location. Przejdź do redagowanego dokumentu i wstaw ze schowka skopiowany adres.
  • Jeśli używasz Internet Explorera PL, ustaw kursor nad odsyłaczem, kliknij prawym przyciskiem myszki i wybierz opcję Kopiuj skrót. W redagowanym dokumencie wstaw ze schowka skopiowany adres.

[zielona kropka] W dokumencie możemy zamieszczać odsyłacze do różnych typów plików. Najczęściej jest to dokument HTML, choć równie dobrze może to być plik tekstowy (TXT), obrazek GIF lub JPG, plik dźwiękowy WAV, MID, AU czu AIFF, dokument Worda, plik Acrobata lub Envoya. Przeglądarki są uwrażliwione na pewne typy plików, zawierając wbudowane wewnętrzne przeglądarki (odtwarzacze) danych plików. Na przykład w Navigatorze i Internet Explorerze zostanie bez kłopotu zaprezentowany obrazek GIF czy plik tekstowy. Ponieważ jednak coraz częściej w dokumentach internetowych są umieszczane odsyłacze do innych plików, konieczne się stało zaangażowanie do ich obsługi albo zewnętrznych aplikacji, albo specjalnych wtyczek (plug-ins), które pozwalają obejrzeć dany dokument bezpośrednio z poziomu przeglądarki, z użyciem pojawiającego się dodatkowego menu (na ekranie lub pod prawym klawiszem myszki). Doczekaliśmy się już wielu "wtyczek" - VR, VRML, EVY, PDF, CMX itd. Są one bezpłatnie dostępne w Internecie, a ich przegląd można znaleźć m.in. na internetowej stronie Netscape Communications albo Windows95.com Web Browser Plug-ins

Warto też zaglądać do rozmaitych serwisów shareware'owych, jak TUCOWS czy Slaughterhouse. Ich spis znajdzie Czytelnik na stronie głównej PCkuriera.

Jeśli przeglądarka nie zawiera wbudowanej obsługi pliku danego typu ani nie istnieje stosowny plug-in, możemy się także posłużyć aplikacją w naszym komputerze. Na przykład plik Worda można obejrzeć za pomocą Worda lub Word Viewera, a nowsze wersje Internet Explorera potrafią bezpośrednio wczytać plik Worda, jeśli edytor jest obecny na dysku. Przeglądarkę można nauczyć reagowania na określone typy plików - Netscape Navigator pozwala to zrobić w okienku dialogowym Preferences (Options / General Preferences) na stronie Helpers.

Warto wiedzieć, że rozróżniamy odsyłacze absolutne i względne (relatywne). Pierwsze zawierają pełny adres internetowy strony, natomiast drugie jedynie fragment ścieżki dostępu.

Adresem absolutnym jest np. strona PCkuriera:

http://www.pckurier.pl

Adresem relatywnym jest adres numeru 13'99 PCkuriera:

/1999/13/index.html

Adres relatywny korzysta z pełnego adresu strony, na której się znajduje. Skoro strona główna PCkuriera ma adres:

http://www.pckurier.pl

to automatycznie odsyłacz relatywny numeru 13 jest interpretowany jako:

http://www.pckurier.pl/1999/13/index.html

Strona 13 numeru PCkuriera jest położona o dwa szczeble niżej w hierarchii katalogów.

Stosowanie odsyłaczy relatywnych jest charakterystyczne dla danego serwisu. Autor nie musi się troszczyć o podawanie pełnego adresu - wystarczy, jeśli poda tylko niezbędny fragment, gdyż resztę przeglądarka doda sama. Odsyłacze absolutne są (absolutnie :-)) konieczne, gdy wskazujemy miejsca na innych serwerach.

Przypomnijmy sobie w tym miejscu uwagi dotyczące polecenia <BASE> w nagłówku strony <HEAD>. Konsekwentne wpisywanie adresu strony bazowej w nagłówku może nas uchronić od konieczności przepisywania wszystkich adresów relatywnych, gdy z jakichś powodów przenosimy stronę w inne miejsce i grozi nam utrata aktualności odsyłaczy względnych.

Kilka prostych przykładów:

Odsyłacz do innej strony HTML (w tym samym katalogu):

<A HREF="nazwa_strony.html">Edytor Pajączek</A>

Edytor Pajączek

Odsyłacz do innej strony w katalogu podrzędnym

<A HREF="katalog_podrzędny/nazwa_strony.html">Inna strona</A>

Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:

<A HREF="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</A>

Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę.

Odsyłacz do pliku tekstowego TXT
<A HREF="plik_tekstowy.txt">Plik tekstowy TXT</A>
Plik tekstowy TXT

Odsyłacz do pliku graficznego GIF
<A HREF="plik_graficzny.gif">Plik graficzny GIF</A>
Plik graficzny GIF

Odsyłacz do pliku dźwiękowego
<a href="../multimed/pinkpant.mid">Plik dźwiękowy</a>
Plik dźwiękowy

Obszerniejsze informacje o sposobach dołączania plików multimedialnych do dokumentów WWW są zawarte na stronie Grafika i multimedia.

Powiedzieliśmy wyżej, jak tworzyć odsyłacze do innych dokumentów. Ale nieco wcześniej mówiliśmy także o etykietach, więc warto teraz powiedzieć, jak tworzyć odsyłacze do etykiet.

Konstrukcja jest bardzo prosta:

<A HREF="strona.htm#etykieta">Tekst</A>

Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli:

<A HREF="#etykieta">Tekst, na którym należy kliknąć</A>

Uwaga: należy zwrócić uwagę na wielkość liter w etykiecie. Gdy etykieta rozpoczyna się z wielkiej litery, także odsyłacz powinien zawierać nazwę etykiety pisaną z wielkiej litery.

Poniższy przykład pozwoli skoczyć do punktu poświęconego istocie odsyłaczy, na początku tej strony. Użyto tu odwołania do etykiety #istota , umieszczonej wcześniej przy punkcie Istota odsyłaczy.

Przeczytaj uwagi o istocie odsyłaczy

Informacje o odsyłaczach w dokumencie zawierającym ramki są podane na stronie poświęconej ramkom.

[zielona kropka] Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną. Jej konstrukcja wygląda następująco:

<A HREF=mailto:imie_nazwisko@adres>Tutaj kliknij</A>

Przykładowa zachęta do wysłania listu mogłaby wyglądać następująco:

<A HREF=mailto:pawel.wimmer@pckurier.pl>Jeśli chcesz mi nawrzucać, kliknij w tym miejscu</A>

co w praktyce przybrałoby postać:

Jeśli chcesz mi nawrzucać, kliknij w tym miejscu

albo, w bardziej stonowanej formie:

Wyślij list do autora strony

Oczywiście w miejscu, gdzie należy kliknąć, można też po prostu podać adres poczty, aby był widoczny bezpośrednio na ekranie przeglądarki.

Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym obrazkiem. W tym miejscu zastosujemy obrazek POCZTA.GIF, wstawiając definicję przed adresem.

[poczta] Wyślij list do autora strony

Zauważ, że gdy przesuniesz kursor nad odsyłacz, w wierszu statusu przeglądarki pojawi się kontrolna informacja
mailto:pawel.wimmer@pckurier.pl (Netscape Navigator) lub
Wysyła pocztę do: mailto:pawel.wimmer@pckurier.pl (Internet Explorer PL)

Gdybyśmy sobie zażyczyli, aby w momencie wysyłania poczty przez czytelnika strony w polu tematu listu pojawiła się jakaś domyślna treść, możemy zdefiniować odsyłacz na przykład tak:

<a href="mailto:pawel.wimmer@pckurier.pl?subject=Panie Wimmer, mam taką sprawę:">

W podobny sposób można predefiniować adres odbiorcy, do którego idzie kopia listu:

<a href="mailto:pawel.wimmer@pckurier.pl?cc=jan.kowalski@firma.pl">

albo tzw. ślepa lub ukryta kopia, czyli BCC (żaden inny odbiorca listu nie zobaczy tego adresu):

<a href="mailto:pawel.wimmer@pckurier.pl?bcc=jan.kowalski@firma.pl">

Można też zdefiniować fragment ciała listu, a więc już bezpośrednio w oknie edycji:

<a href="mailto:pawel.wimmer@pckurier.pl?body=Panie Wimmer, ja w takiej sprawie...">

Powstaje pytanie, czy można połączyć wszystkie te elementy "do kupy". Otóż można i robi się to bardzo prosto, stosując jako łącznik znak &.

<a href="mailto:pawel.wimmer@pckurier.pl?cc=jan.kowal@firma.pl&bcc=jozef.kwiatek@firma.pl&subject=Bardzo ważny list&body=Witajcie Panowie">Wyślij pocztę</a>

No to wypróbujmy - proszę, kliknij, ale nie wysyłaj :-)

Przy definiowaniu adresu poczty (a nawet szerzej, pełnego adresu) możesz się także posłużyć znacznikiem logicznym <ADDRESS></ADDRESS>, który automatycznie nada odpowiedni atrybut (zazwyczaj interpretowany przez przeglądarki jako kursywa), a całość umieścić w gustownej ramce (definicja tabeli)

Paweł Wimmer
Redaktor
PCkurier
Warszawa, ul. Stępińska 22/30, 00-739 Warszawa
Tel: 41-00-31 w. 128 lub 154, 41-51-21
Fax: 41-03-74
E-mail: pawel.wimmer@pckurier.pl

[zielona kropka] Równie często stosowaną usługą jest FTP, który pozwala sięgnąć do serwera FTP w poszukiwaniu jakichś plików - można w ten sposób wskazać położenie jakiegoś shareware'owego programu. Nasze wydawnictwo posiada swój własny serwer, z którego można skopiować np. listingi zamieszczane w dziale Dla Praktyków w PCkurierze, publikacje elektroniczne czy oprogramowanie. Korzystamy tutaj z protokołu File Transfer Protocol - stąd nazwa FTP.

Odpowiednia konstrukcja wskazująca na FTP ma postać:

<A HREF=ftp://ftp.adres>Jakiś tekst</A>

Gdybyśmy chcieli sięgnąć do serwera Wydawnictwa Lupus, możemy podać odsyłacz:

<A HREF=ftp://ftp.polbox.com.pl/library/!lupus>Tutaj znajdziesz listingi Dla Praktyków</A>

Możemy także dać bezpośredni odsyłacz do pliku:

<a href="ftp://ftp.polbox.com.pl/library/!lupus/hpauthor.zip">Podręcznik Home Page Author</a>

Zauważ, że na końcu adresu znalazł się ciąg HPAUTHOR.ZIP. Jest to nazwa pliku, który zawiera podręcznik. W ten sposób można od razu sięgnąć do konkretnego pliku, a nie tylko do katalogu z plikami. Przeglądarka WWW zapyta wówczas, co zrobić z plikiem. Wystarczy wybrać opcję Save to disk (Netscape Navigator), aby program przystąpił do ściągania pliku na dysk naszego komputera.

Dobrym (bardzo dobrym!) obyczajem jest podawanie przy odsyłaczu do pliku wielkości pobieranego materiału. Czytelnik strony nie powinien być zaskakiwany dużymi plikami, a przede wszystkim ma prawo wiedzieć, jak długo będzie trwać jego kopiowanie. Tę samą zasadę można zresztą stosować, gdy podajemy odsyłacz do strony, której wczytanie trwa dość długo, gdyż zawiera dużo tekstu i/lub obrazków. Można tu przyjąć granicę 50-100 KB.

[zielona kropka] Konstrukcje odsyłaczowe pozwalają wstawić odwołania do kilku innych usług, jak np. do:

pliku na dysku lokalnym <A HREF=file:///ścieżka/plik></A>,

gophera <A HREF=gopher://...></A>,

telnetu <A HREF=telnet://...></A>,

WAIS <A HREF=wais://...></A>

grup dyskusyjnych <A HREF=news://...></A>,

Jeśli podasz np. nazwę konkretnej grupy dyskusyjnej, kliknięcie na odsyłaczy do niej spowoduje uruchomienie domyślnego programu obsługi grup (Messenger w Navigatorze, Outlook Express w Internet Explorerze) i ustawienie kursora na na danej grupie. Na przykład:

<A HREF=news:pl.comp.www></A>

Odsyłacz do grupy dyskusyjnej pl.comp.www

Zauważmy, że uruchamiany jest domyślny serwer newsów.

Nigdy nie wiemy, który serwer newsów zaabonował nasz czytelnik. Jeśli chcemy skierować naszego gościa do ściśle określonego serwera, możemy podać w odsyłaczu adres, np.:

<A HREF="news://news.fuw.edu.pl">news.fuw.edu.pl</a>

Odsyłacz do serwera news.fuw.edu.pl (Netscape może mieć kłopoty).

Mało tego; możemy także skierować od razu do wskazanej grupy:

<A HREF="news://news.fuw.edu.pl/pl.comp.www">grupa dyskusyjna pl.comp.www</a>

grupa dyskusyjna pl.comp.www

[hand] Mapy odsyłaczy na obrazkach

Na zakończenie warto jeszcze podać sposób definiowania odsyłaczy na obrazkach. Jest to o tyle przydatne, że możemy w ten sposób wykorzystać grafikę. Taki sposób definiowania odsyłaczy jest już powszechnie spotykany w World Wide Web, aczkolwiek warto także stosować równoległe odsyłacze tekstowe, gdyż nie wszyscy stosują przeglądarki graficzne i byliby w ten sposób pozbawieni możliwości wykonania skoku.

W tym miejscu pokażemy tzw. mapowanie po stronie klienta, a więc nowocześniejszy sposób, akceptowany przez różne wersje Navigatora i Internet Explorera.

Wyobraźmy sobie, że mamy obrazek, na który chcielibyśmy nałożyć mapę odsyłaczy (niech Czytelnik łaskawie przymknie oko na brak precyzji). Zaznaczone prostokąty mają ilustrować zakres map.

Na razie jest to grafika bez odsyłaczy.

Poniżej widać obrazek z mapą odsyłaczy. Gdy Czytelnik przesunie kursor myszki nad zaznaczone prostokąty, kursor przyjmie postać "rączki", sygnalizującej istnienie odsyłacza. W wierszu statusu przeglądarki pojawią się adresy stron. Są to adresy fikcyjne, więc kliknięcie nie spowoduje skoku do tak nazwanej strony.

A oto pełna treść polecenia:

<IMG SRC="odsylacz.gif " USEMAP="#mapa1">
<MAP NAME ="mapa1">
<AREA SHAPE=RECT COORDS="1, 1, 50, 50" HREF="1.html">
<AREA SHAPE=RECT COORDS="51, 1, 100, 50" HREF="2.html">
<AREA SHAPE=RECT COORDS="1, 51, 51, 100" HREF="3.html">
<AREA SHAPE=RECT COORDS="51, 51, 100, 100" HREF="4.html">
</MAP>

Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek "odsylacz.gif" jest mapowany, i że mapa nosi nazwę "mapa1".
Drugi wiersz zapoczątkowuje definicję mapy.
Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom na rysunku. SHAPE=RECT mówi, że chodzi tutaj o prostokąty (RECT=rectangle). COORDS informuje o współrzędnych, przy czym pierwsze dwie liczby w wierszu podają lewy górny róg prostokąta, a następne dwa - prawy dolny. Warto unikać nakładania na siebie obszarów map, choć przeglądarka akceptuje nakładanie. HREF= stanowi przywołanie jakiegoś dokumentu HTML.
Ostatni wiersz stanowi zakończenie definicji mapy.

Oprócz prostokątów (kwadratów) możemy tworzyć mapy z użyciem okręgów i obszarów nieregularnych.

W przypadku okręgu stosujemy polecenie:

<AREA SHAPE=CIRCLE COORDS=" 25, 25, 19" HREF="dokument.html">

Proszę zwrócić uwagę na SHAPE=CIRCLE oraz przykładowe liczby 25,25,19. Pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia.

Gdybyśmy chcieli użyć obszaru nieregularnego, musielibyśmy podać przykładowe polecenie, zawierające przynajmniej trzy pary współrzędnych, definiujących "rogi" obszaru:

<AREA SHAPE=POLYGON COORDS=" 23, 33, 82, 16, 82, 80" HREF="dokument.html">


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Wykaz nieuporządkowany | Wykaz uporządkowany | Menu | Katalog | Lista definicyjna

Wykazy

[hand] Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego

<UL>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</UL>

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Parametr COMPACT teoretycznie pozwala wyświetlić listę z mniejszą interlinią, ale przeglądarki źle go interpretują. Specyfikacja HTML 4 uznaje parametr za schyłkowy i odradza jego stosowanie.

<UL COMPACT>

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Lista nieuporządkowana może dodatkowo zawierać definicję symbolu graficznego

<UL TYPE=disc>

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

<UL TYPE=circle>

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

<UL TYPE=square>

Przykład:

  • Pierwszy punkt
  • Drugi punkt
  • Trzeci punkt

Specyfikacja HTML 4 zaleca stopniową rezygnację z parametru TYPE i obsługę wykazów za pomocą stylów, które mają większe możliwości.

Możemy zagnieżdżać kilka poziomów listy nieuporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem

<UL>otwarcie listy na pierwszym poziomie

<LI>Punkt 1

<LI>Punkt 2

<UL>otwarcie listy na drugim poziomie

<LI>Podpunkt 2.1

<LI>Podpunkt 2.2

<UL>otwarcie listy na trzecim poziomie

<LI>Podpunkt 2.2.1

<LI>Podpunkt 2.2.2

</UL>zamknięcie listy na trzecim poziomie

</UL>zamknięcie listy na drugim poziomie

<LI>Punkt 3 - kontynuacja punktów pierwszego poziomu

<LI>Punkt 4 - kontynuacja punktów pierwszego poziomu

</UL>zamknięcie całej listy

Przykład:

  • Punkt 1
  • Punkt 2
    • Podpunkt 2.1
    • Podpunkt 2.2
      • Podpunkt 2.2.1
      • Podpunkt 2.2.2
  • Punkt 3
  • Punkt 4

[hand] Wykaz uporządkowany - służy do sporządzenia wykazu numerowanego

<OL>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</OL>

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Parametr COMPACT pozwala wyświetlić listę z mniejszą interlinią

<OL COMPACT>

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Parametr START=x pozwala rozpocząć numerowanie listy od x

<OL START=x>

Przykład:

  3. Pierwszy punkt
  4. Drugi punkt
  5. Trzeci punkt

Parametr TYPE=n pozwala określić typ numerowania listy

<OL TYPE=A> numerowanie według wielkich liter

<OL TYPE=a> numerowanie według małych liter

<OL TYPE=I> numerowanie według wielkich liczebników rzymskich

<OL TYPE=i> numerowanie według małych liczebników rzymskich

<OL TYPE=1> numerowanie według liczebników arabskich

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Przykład:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Możemy zagnieżdżać kilka poziomów listy uporządkowanej

Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem

<OL TYPE=n>otwarcie listy na pierwszym poziomie

<LI>Punkt 1

<OL>otwarcie listy na drugim poziomie

<LI>Podpunkt 1.1

<LI>Podpunkt 1.2

</OL>zamknięcie listy na drugim poziomie

<LI>Punkt 2 - kontynuacja punktów pierwszego poziomu

<OL>otwarcie listy na drugim poziomie

<LI>Podpunkt 2.1

<LI>Podpunkt 2.2

</OL>zamknięcie listy na drugim poziomie

</OL>zamknięcie całej listy

Przykład:

  1. Przeglądarki
    1. Netscape Navigator
    2. Microsoft Internet Explorer
    3. NCSA Mosaic
    4. Quarterdeck Internet Suite
    5. Chameleon
    6. NetRunner
    7. Ariadna
    8. Cyberjack
  2. Edytory HTML
    1. HomeSite
    2. Pajączek
    3. Web Designer
    4. WebEdit
    5. CMed
    6. Hot Dog
    7. Internet Assistant
    8. Webber
    9. Home Page Author
    10. Internet Publisher
    11. WebWizard
    12. HotMetal
    13. ReVOL WebWorker

[hand] Menu - służy do tworzenia nieuporządkowanego wykazu, po jednym elemencie w wierszu

<MENU>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</MENU>

Przykład:

  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci
    •

    [hand] Katalog - służy do tworzenia wykazu krótkich pozycji, który można ustawić w kolumnach. Elementy katalogu zawierają do 20 znaków.

    <DIR>

    <LI>Pierwszy punkt <LI>Drugi punkt

    <LI>Trzeci punkt <LI>Czwarty punkt

    </DIR>

    Przykład:

  • A-H
  • I-M
  • N-R
  • S-Z
    •

    Parametr TYPE=abc pozwala zastosować wybrany znacznik graficzny

    <DIR TYPE=square></DIR>

    Przykład:
  • A-H
  • I-M
  • N-R
  • S-Z
    •

    Uwaga: żadna przeglądarka nie interpretuje poprawnie poleceń <MENU> i <DIR>, a specyfikacja HTML 4 uznaje je za polecenia "schyłkowe" i zaleca stopniowe wycofywanie.

    [hand] Lista definicyjna - służy do tworzenia definicji terminów, a także do tworzenia tematycznie pokrewnych grup akapitów

    <DL> początek listy definicyjnej

    <DT> pierwszy termin

    <DD> wyjaśnienie pierwszego terminu

    <DT> drugi termin

    <DD> wyjaśnienie drugiego terminu

    </DL> koniec listy definicyjnej

    Polecenie DT powinno się znaleźć bezpośrednio za otwierającym tagiem DL.

    Przykład:

    Wyjaśnienie terminów
    Volapük
    język międzynarodowy utworzony w roku 1868 przez niemieckiego duchownego Martina Schleyera
    Esperanto
    język międzynarodowy zapoczątkowany w 1887 roku przez polskiego okulistę Ludwika Zamenhofa
    Interlingua
    język międzynarodowy zaprojektowany w latach 1924-1950 przez międzynarodową grupę lingwistów


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Uwagi ogólne | Wstawianie grafiki do dokumentu | Animacja Marquee | Publikacje elektroniczne w formacie Adobe PDF | Dźwięk, wideo, VRML

Grafika i multimedia

[hand] Uwagi ogólne

Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Im strona bogatsza graficznie, tym bardziej atrakcyjna w odbiorze. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w sieci i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi realiami technicznymi z drugiej strony.

Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i dźwiękowe, pozwalając przeglądarce sięgać do zasobów na dysku lokalnym, a nie do sieci, co wydatnie zmniejsza ruch na łączach. Z tego też powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Nie przyjął się jeszcze dostatecznie powszechnie chwalony przez specjalistów format PNG (Portable Network Graphics).

Zaprezentujmy zatem podstawowe metody posługiwania się grafiką w procesie budowania dokumentów internetowych.

[hand] Wstawianie grafiki do dokumentu

[zielona kropka] Podstawowa konstrukcja ma następującą postać: <IMG SRC="plik_graficzny">

IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło). Efekt zastosowania konstrukcji jest następujący:

Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka.

[zielona kropka] Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład:

<IMG SRC="tucows.gif" HEIGHT=150>

<IMG SRC="tucows.gif" WIDTH=200>

Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka:

<IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50>

Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy o malejącej rozdzielczości obrazka na ekranie przeglądarki.

[zielona kropka] Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli:

<IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5>

[zielona kropka] Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu:

<IMG SRC="tucows.gif" HSPACE=50>

Ten tekst [TUCOWS] jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten, [TUCOWS] o 100 pikseli

<IMG SRC="tucows.gif" VSPACE=50>

[TUCOWS] Ten obrazek jest odsunięty od akapitu poprzedzającego i następującego po nim o 100 pikseli w pionie

[zielona kropka] Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

Konstrukcja ma postać <IMG SRC="obrazek" ALIGN=abc>

[List] ALIGN=left abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

[List] ALIGN=right abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

[List] ALIGN=top abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

[List] ALIGN=bottom abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

[List] ALIGN=middle abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Przypomnijmy sobie również uwagi na temat roli parametru CLEAR, który pozwala regulować wzajemne położenie obrazka i tekstu (polecenie <BR> w Blokach).

[zielona kropka] Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron.

[zielona kropka] Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></CENTER>

[zielona kropka] Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań, na przykład:

Ciekawe tytuły

[ENTER] [PCkurier] [Gambler]

[hand] Animacja Marquee

Uwaga: animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0.

Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis.

Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu.

[zielona kropka] Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</MARQUEE>. Na przykład:

Tekst sobie pływa

Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE parametr>

[zielona kropka] Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>:

Oferta Wydawnictwa Lupus

[zielona kropka] Tekst może się poruszać na trzy sposoby:

BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.

behavior=scroll

BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.

behavior=slide

BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.

behavior=alternate

[zielona kropka] BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

Kolor Red

Kolor Yellow

Kolor Fuchsia

[zielona kropka] Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.

Ruch w lewo

Ruch w prawo

[zielona kropka] Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu.

Wysokość 50 pikseli

Szerokość 50 procent

[zielona kropka] Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy.

Ten napis przesunie się 20 razy i zatrzyma się

[zielona kropka] Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu.

Tekst przed animacjąTa animacja jest oddalona o 100 pikseli od sąsiadującego tekstuTekst za animacją

Tekst nad animacją
Ta animacja jest oddalona o 30 pikseli od sąsiadujących akapitów
Tekst pod animacją

Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>.

[zielona kropka] Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE.

Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT COLOR=kolor> Tekst </FONT>.

Kilka przykładów:

Biały tekst na czerwonym tle

Zauważmy, że w polu animacji można wstawić więcej spacji, w przeciwieństwie do zwykłego tekstu.

Czerwony tekst na żółtym tle

Biały, pogrubiony tekst na zielonym tle

Biały, pochylony tekst na zielonym tle

Biały, podkreślony tekst na zielonym tle

Uwaga: z nieznanych powodów nie jest możliwe zdefiniowanie białego tekstu na czarnym tle!

[zielona kropka] Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej.

Biały tekst na zielonym tle Biały tekst na czerwonym tle Biały tekst na czerwonym tle Biały tekst na zielonym tle

[zielona kropka] Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy.

Scrollamount=5

Scrollamount=30

Scrollamount=50

[zielona kropka] Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda.

Scrolldelay=500 - skok co 0,5 sekundy

Scrolldelay=2000 - skok co 2 sekundy o 50 pikseli

[zielona kropka] Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją:

Tekst u góry pola Animacja

Tekst w połowie pola Animacja

Tekst u dołu pola Animacja

[hand] Publikacje elektroniczne w formacie Adobe PDF

W ostatnich dwóch latach ostatecznie wykrystalizował się niekwestionowany standard w kategorii publikacji elektronicznych - jest nim Adobe Portable Document Format (lub Portable Digital Format), znany pod popularnym skrótem PDF. Jeszcze kilka lat temu bardzo poważnym konkurentem był Envoy, firmy Tumbleweed Software, który był dołączany za darmo do pakietu biurowego WordPerfect Office. Producent zrezygnował jednak z rozwijania Envoya i Corel dostarcza teraz WordPerfect Office 2000 razem z narzędziami do tworzenia dokumentów PDF bezpośrednio z poziomu edytora WordPerfect 9 i pakietu prezentacyjnego Corel Presentations 9, bez konieczności kupowania bardzo kosztownego oprogramowania Adobe - niewątpliwie będzie to sprzyjać zarówno samemu PDF, jak i WordPerfectowi.

Dokumentacja w formacie PDF jest bardzo rozpowszechniona na świecie i jest ogólnie przyjętym standardem w firmach, biurach czy na uczelniach. PDF współpracuje bezpośrednio z dokumentami w formacie HTML i możliwe jest użycie dość skomplikowanych sposobów wbudowania PDF, łącznie z zastosowaniem skryptów (zainteresowanym Czytelnikom polecamy tutaj dostępną w Polsce książkę Thomasa Merza, "Web Publishing with Acrobat PDF"). Na codzienne potrzeby można się jednak ograniczyć do trzech bardzo prostych metod. Należy jednak pamiętać, że czytelnik naszej strony musi dysponować Acrobat Readerem - jest to akurat jedyny składnik rozbudowanego oprogramowania PDF, który Adobe dostarcza za darmo (jeszcze kilka lat temu nawet za Readera trzeba było płacić). Najnowsza wersja finalna ma numer 3.2, natomiast w 1999 roku pojawiły się wersje beta Acrobat Readera 4. Webmaster, dołączając dokumentację PDF do swojej strony, powinien przypomnieć czytelnikowi o konieczności zainstalowania Readera, gdyż może on nim po prostu nie dysponować.

Pierwszy sposób polega na bezpośrednim odwołaniu się do dokumentu PDF w dokumencie HTML, np.

<a href=licence.pdf>kliknij tutaj</a>

Dokument PDF ukazuje się bezpośrednio w przeglądarce (testowane w IE 5 i NC 4.5) i jest opatrzony narzędziami nawigacyjno-zarządzającymi Acrobat Readera. Sam Reader uruchamia się także w tle (odrębna "instancja"), jeśli jest to wersja 3, natomiast w wersji 4 uruchamia się wyłącznie jako wtyczka w przeglądarce. Ponadto wersja 4 pozwala zapisywać plik PDF bezpośrednio z poziomu przeglądarki (ikonka dyskietki w menu Readera), na co nie pozwala wersja 3. Tym bardziej należy więc zachęcać czytelnika do zainstalowania nowszego Readera.

kliknij tutaj - dokument ma objętość 9 KB

Drugim sposobem, będącym tylko odmianą pierwszego, jest odwołanie do oddzielnej strony, na której z kolei jest zawarte odwołanie do dokumentu PDF.

kliknij tutaj

Trzecia metoda to użycie polecenia EMBED. Najwygodniej jest je oczywiście umieścić na odrębnej stronie, w przykładowej postaci:

<embed src="licence.pdf" width=700 height=500>

Użycie rozmiarów zagnieżdżenia jest konieczne, gdyż IE nie poradzi sobie z powiększeniem okienka Readera. Z kolei posiadacz Navigatora zobaczy wprawdzie wbudowany dokument, ale i tak będzie musiał kliknąć prawym przyciskiem myszki i wybrać polecenie Open this (plik.pdf). Dopiero wtedy ukaże się całe menu Readera.

kliknij tutaj

Jak z tego widać, najwygodniejsze jest użycie bezpośredniego odwołania do pliku PDF, czyli pierwsza z podanych metod.

[hand] Dźwięk, wideo, VRML

Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek, co ciekawe, dokumentacja HTML 4 właściwie milczy na temat dźwięku! Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady:

Plik dźwiękowy WAV (styl Netscape) - <embed src="../wav/complete.wav" border=0 width=x height=y>

Plik dźwiękowy WAV (styl Microsoft) <bgsound src="../wav/complete.wav" loop=infinite>

Plik dźwiękowy MIDI (styl Netscape) - <embed src="../midi/airwolf.mid" border=0>

Przykład dźwięku zagnieżdżonego:

loop=x określa liczbę powtórzeń dźwięku
width=x height=y określa rozmiary wyświetlanego obrazka wtyczki (np. dla natywnej wtyczki LiveAudio Netscape'a jest to 145x60, dla Crescendo 200x55, a dla WebTracks 56x50.)
autostart=true | false nakazuje lub zakazuje automatycznego startu odtwarzania
hidden=true|false nakazuje schować|wyświetlić obrazek wtyczki
palette=foreground|background pozwala uniknąć ewentualnego migotania palety kolorów, gdy przeglądarka pracuje w trybie 256 kolorów
pluginspace="url" wskazuje miejsce, gdzie znajduje się wtyczka, jeśli użytkownik jej jeszcze nie zainstalował. Adres ten powinien być zgodny ze wskazaniami producenta wtyczki.

Użycie hidden=true pozwala symulować dźwięk w tle (podobnie jak w przypadku BGSOUND dla IE). Jest to rozwiązanie uniwersalne dla obu czołowych przeglądarek Zaleca się wtedy umieszczenie polecenia EMBED na samym końcu dokumentu, gdyż wtedy wcześniej wczyta się tekstowa zawartość strony.

Starsze przeglądarki, które nie akceptują polecenia EMBED, mogą zobaczyć polecenie NOEMBED:
<EMBED SRC="plik.mid" WIDTH="200" HEIGHT="150">
<NOEMBED>Potrzebujesz Navigatora lub Internet Explorera aby to usłyszeć</NOEMBED>
</EMBED>

Polecenie EMBED sprawia trochę kłopotów, jeśli chodzi o wielkość wyświetlanego panelu. Każda z wtyczek jest wyświetlana najlepiej w sobie tylko należnych wymiarach, więc podanie 145x60, co miałoby honorować LiveAudio, spowoduje, że wtyczka Crescendo albo Windows Media Player będą wyświetlane "kulawo". Problem polega na tym, że nie wiemy, jakim programem dysponuje czytelnik naszej strony, choć możemy założyć z dużą dozą pewności, że posiadacze Internet Explorera (jakieś trzy czwarte internetowej populacji w Polsce) korzystają głównie z Windows Media Playera, a właściciele Navigatora, zwykle z LiveAudio. Oczywiście może się zdarzyć, że jakiś popularny odtwarzacz dźwiękowy, np. WinAmp, przejmuje domyślnie obsługę plików MIDI, zabierając je LiveAudio i Media Playerowi.

Gdybyśmy zrezygnowali z podawania wymiarów, jedynie Windows Media Player poprawnie wyświetli podstawową wersję panelu, natomiast inne wtyczki przyjmą rozmiary nie bardzo zgodne z właściwymi. Wszystko to powoduje, że webmaster staje przed problemem czysto estetycznym, choć takie brzydko wyglądające panele także jakoś tam spełniają swoje zadanie, zwłaszcza że pod lewym lub prawym klawiszem myszki widnieją polecenia wtyczki.

Plik dźwiękowy MIDI (styl Microsoft) - <bgsound src="../midi/antartic.mid" loop=1>

Przykład dźwięku w tle (IE):

loop=x oznacza liczbę powtórzeń. Loop=infinite nakazuje powtarzać dźwięk bez końca.
balance=x (x=-10000;10000) określa równowagę między głośnikami w przypadku dźwięku stereofonicznego
volume=x (x=-10000;0) wyznacza głośność. Wartość tę należy samodzielnie wypraktykować.

Jedynie Internet Explorer obsługuje konstrukcję BGSOUND. Navigator ignoruje ją i "milczy". Z kolei polecenie EMBED jest obsługiwane przez obie przeglądarki - Navigator obsługuje zagnieżdżony w ten sposób plik dźwiękowy przez wtyczkę (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przeglądarką Windows Media Playera. Obie przeglądarki mogą także korzystać z innych wtyczek - dość popularny jest program Cresendo, istniejący w wersjach ActiveX dla IE i wtyczki dla Navigatora (http://www.liveupdate.com), ale istnieją też inne wtyczki, np. WebTracks, firmy WildCat Software (http://www.wildcat.com). WebTracks obsługuje pliki MIDI, ale w pierwszym rzędzie swój własny format WTX.

Szczególnie interesującą nowością jest wtyczka Beatnik, firmy Headspace, która obsługuje format RMF, czyli Rich Music Format (proszę zauważyć podobieństwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalająca uzyskać bardzo bogate brzemienie, przy niewielkiej objętości pliku.

Przykładowe polecenie zagnieżdżające plik RMF może wyglądać następująco:

<EMBED SRC="affectio.rmf" TYPE="audio/rmf" WIDTH=144 HEIGHT=60 DISPLAY=SONG MODE=SCOPE AUTOSTART=TRUE LOOP=FALSE VOLUME=100>

A oto przykład (jeśli dysponujesz wtyczką Beatnik)

Beatnik jest dostępny w postaci wtyczki dla Navigatora lub ActiveX dla Internet Explorera. najlepiej jest skopiować z witryny Headspace program instalacyjny, który zawiera obie wtyczki jednocześnie.

Przeglądarka Mosaic akceptuje polecenie <SOUND SRC="filename.wav">

Problem plików WAVE

Każdy webmaster wie, że plików WAV w zasadzie się nie umieszcza na stronach, gdyż mają one dużą objętość, choć bez wątpienia także zwykle dobrą jakość. Co najwyżej wstawia się jakieś drobne pliczki z odgłosami strzału, zamykanych drzwi, spuszczanej, pardon, wody w pewnym przybytku itd. Istnieje jednak dość wiekowa już (1996 rok) technika kodowania plików WAV w formacie TrueSpeech, opracowanym przez DSP Group. Ze strony tej firmy można sobie ściągnąć za darmo i odtwarzacz, i konwerter plików (http://www.dspg.com/player/dwnld.htm).

Technika ta pozwala uzyskać 15-20-krotne zmniejszenie objętości plików. Co interesujące, są one bez problemu odtwarzane przez standardowe LiveAudio Netscape'a i Windows Media Playera, więc nawet ten oddzielny odtwarzacz nie jest potrzebny. Sam konwerter ma zaledwie 80 KB objętości i można go ściągnąć także stąd (samorozpakowywalne archiwum).

Technika tworzenia takich plików jest dość prosta. W dowolnym programie do nagrywania (np. CoolEdit) należy zarejestrować dźwięk, a następnie zapisać jako zwykły WAV, koniecznie 8KHz i 16 bit. Taki plik wczytujemy następnie do TrueSpeech Convertera i zapisujemy go pod jakąś inną nazwą, także jako plik WAV. Jakość dźwięku 8KHz/16bit siłą rzeczy nie jest idealna, a konwersja jeszcze trochę ją pogarsza. Tym niemniej, jeśli nie prezentujemy akurat laureatów konkursu krasomówczego, a tylko o czymś powiadamiamy naszych czytelników, takie rozwiązanie jest do przyjęcia. Jego plusem jest i to, że nie wymaga od gości strony instalowania dodatkowego oprogramowania, a i my mamy dość proste zadanie nagrania i konwersji dźwięku.

A oto przykład

Plik wideo AVI (styl Netscape) - <embed src="../DRAGDROP.AVI" border=0>

Przykład

Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

dynsrc=url podaje adres pliku AVI
loop=x określa liczbę powtórzeń, loop=infinite oznacza powtarzanie bez końca
loopdelay=n określa w milisekundach opóźnienie między kolejnymi powtórzeniami
start=fileopen|mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesunięciu kursora nad ikonę odtwarzacza
controls wyświetla panel kontrolny odtwarzacza AVI

Przykład

Uwaga: styl Microsoftu nie jest zalecany.

Plik VRML (styl Netscape)

<EMBED SRC="vrlm.wrl" WIDTH="200" HEIGHT="150">

Przykład (za "HTML Reference Library")

Pliki VRML jest obsługiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera.

Plik RealAudio

Na stronie możemy też umieścić plik RealAudio. Pliki takie można sporządzić za pomocą popularnego programu do obróbki dźwięku, CoolEdit, albo za pomocą oryginalnego RealAudio Encoder, dostępnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV. Do tworzenia plików RA najlepszy jest darmowy RealProducer G2, dostępny na stronie RealNetworks.

Wystarczy umieścić na stronie bezpośredni odsyłacz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a>

Przykład

Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest użycie polecenia EMBED, np.:

<embed src="plik.ra" height=105 width=275 autostart=true type=audio/x-pn-realaudio-plugin>

Spowoduje to wyświetlenie interfejsu RealPlayera, jeśli jest on zainstalowany w systemie użytkownika. Do odtwarzania dźwięku RealAudio w środowisku Windows najlepiej się nadaje darmowy RealPlayer G2.

Przykład

Pliki VQF

Od pewnego czasu popularnością cieszy się format VQF (TwinVQ Technology) japońskiej firmy Yamaha. Pliki w tym formacie charakteryzują się wysokością jakością przy dużym stopniu kompresji. Do odtwarzania używany jest darmowy YAMAHA SoundVQ Player, który jednocześnie stanowi wtyczkę dla przeglądarek internetowych. Do tworzenia dźwięku w tym formacie można wykorzystać również darmowy enkoder firmy Yamaha.

Webmaster chcący wstawić plik VQF na swoją stronę, musi sporządzić nie tylko ten plik, ale i specjalny, tekstowy plik "wprowadzający" .vqe, który podaje adres internetowy pliku VQF. Co istotne, konieczne jest w nim podanie adresu bezwzględnego, czyli http://www.../pliczek.vqf (takiego pliku nie da się odtworzyć lokalnie, natomiast podanie adresu względnego spowoduje, że nie będzie on odtwarzany w Sieci, choć na dysku będzie działać). Jest to tylko i wyłącznie adres pliku VQF, nic więcej.

Przykładowa składnia wywołująca panel odtwarzacza na stronie wygląda następująco:

<EMBED SRC="welcome.vqe" AUTOSTART="true"
REPEAT="FALSE" VOLUME="100"
WIDTH="150" HEIGHT="40"
TYPE="audio/x-twinvq-plugin"
PLUGINSPAGE="http://www.yamaha.co.jp/xg/SoundVQ/">

A oto przykład, w którym wykorzystujemy plik welcome.vqf, dostarczany z odtwarzaczem (ok. 70 KB).

Pliki EchoSpeech

Jeszcze jednym formatem dźwiękowym na stronach WWW jest format ES firmy Echo Software. Jest to wysoce skompresowany format dźwięku, który można wykorzystać zarówno dla mowy, jak i muzyki. Darmowy dla osób indywidualnych Encoder pozwalał przekształcić pliki WAV (koniecznie 16-bitowe, mono, 11 KHz) w pliki ES. Darmowy odtwarzacz (achiwum liczy zaledwie 100 KB w wersji 32-bitowej) współpracuje z 16- i 32-bitowymi przeglądarkami.

Niestety, EchoSpeech zniknął gdzieś w pomrokach historii Internetu i jego twórca, Echo Software, zajmuje się nieco innymi sprawami, choć też związanymi z dźwiękiem. A szkoda - osoby, które pobrały odtwarzacz, mogą się przekonać o krystalicznej wręcz czystości dźwięku w tym formacie.

Wstawienie pliku ES na stronę jest bardzo proste:

<embed src=plik.es width=120 height=40>

Wymiary są potrzebne, aby wyświetlić ikonę odtwarzacza na stronie. Kliknięcie lewym przyciskiem myszki na ikonie powoduje wyświetlenie interfejsu EchoCast Playera, gdzie możemy zatrzymać, chwilowo wstrzymać i wznowić odtwarzanie, a także zmienić głośność za pomocą suwaka.

Przykład

Plik MPEG i MP3

Pliki MPEG czy MP3 możemy umieszczać na stronie w postaci zwykłego odsyłacza albo zagnieżdżać je za pomocą polecenia EMBED, np.

<embed src="plik.mp3" autostart=true>

Przykład - (objętość ok. 63 KB).

Plik MOV (QuickTime)

<embed src="charriot.mov" border=0 width=200 height=17>

Przykład (Charriots of Fire)

Plik ASF (Advanced Streaming Format, Microsoft)

Kliknij tutaj (wymaga Windows Media Player)

Można także zagnieździć Windows Media Player na stronie.

Na przykład:

<Embed type="application/x-mplayer2" src="pliczek.asf" Name=MMPlayer1 Autostart=1 ShowControls=1 ShowDisplay=1 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=300>

Plik Flash (Macromedia)

Wersja 3 Shockwave Flash oferuje znacznie udoskonalone możliwości budowania efektownych, a zarazem zajmujących stosunkowo niewiele miejsca, interaktywnych animacji. Dobrym przykładem zastosowania tego formatu jest strona firmy Polbox, którą można oglądać zarówno w wersji tradycyjnej (HTML), jak i multimedialnej (Flash). A oto mały przykład zaczerpnięty z serwisu Webdesign.

Kliknij tutaj (15 KB) - konieczne jest posiadanie wtyczki w wersji 3, która jest dostarczana standardowo z Internet Explorerem i Netscape Navigatorem.

Oto przykład zagnieżdżenia animacji. Proszę w nim zwrócić uwagę na wymiary, kolor tła, typ MIME.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://www.ceti.com.pl/~flash/swflash.cab#version=3,0,0,0"
ID=film WIDTH=100 HEIGHT=120>
    <PARAM NAME=movie VALUE="film.swf">
    <PARAM NAME=loop VALUE=false>
    <PARAM NAME=quality VALUE=high>
    <PARAM NAME=scale VALUE=exactfit>
    <PARAM NAME=bgcolor VALUE=#FFFFFF>
    <EMBED SRC="film.swf"
       NAME=film swLiveConnect=TRUE WIDTH=100 HEIGHT=120
       LOOP=false QUALITY=high SCALE=exactfit BGCOLOR=#FFFFFF
       TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.ceti.com.pl/~flash">
   </EMBED>
  </OBJECT>


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Ogólne ramy tabeli | Wiersz tabeli | Komórka w wierszu | Obramowanie tabeli | Obramowanie komórek | Marginesy dla komórek | Szerokość tabeli | Szerokość komórki | Wyrównanie tabeli | Poziome wyrównanie danych w komórkach | Wysokość tabeli | Pionowe wyrównanie danych w komórkach | Kolor tła tabeli | Kolor obramowania tabeli | Odcień obramowania tabeli | Podpis pod tabelą | Nagłówek wiersza i kolumny | Łączenie komórek | Zagnieżdżanie tabel | Części tabeli | Obramowanie tabel i komórek w rozszerzeniach języka

Tabele

[hand] Ogólne ramy tabeli

<TABLE> </TABLE>

Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

[hand] Wiersz tabeli

<TR> </TR>

Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu:

<TABLE>

<TR> </TR>

<TR> </TR>

<TR> </TR>

</TABLE>

[hand] Komórka w wierszu

<TD> </TD>

Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład:

<TABLE>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

</TABLE>

Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTM warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza.

Przykład:

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwiłę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna.

[hand] Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

<TABLE BORDER> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład:

<TABLE BORDER=10> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

[hand] Obramowanie komórek

Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami).

<TABLE BORDER CELLSPACING=8> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

[hand] Marginesy dla komórek

Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1).

<TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Oczywiście należy w rozsądny sposób ustawiać wartości parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną.

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

[hand] Szerokość tabeli

Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Parametr WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany parametr jest "silniejszy" od innych parametrów, które wpływają na szerokość tabeli na ekranie.

<TABLE BORDER WIDTH=600> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki.

<TABLE BORDER WIDTH=50%> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

[hand] Szerokość komórki

Parametr WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki, umieszczając go w ramach definicji wybranej komórki, np. <TD WIDTH=100> </TD>. Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu (akceptują ją Navigator i Internet Explorer, ale HTML 4.0 zaleca unikania tego polecenia).

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

[hand] Wyrównanie tabeli

Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu, na przykład:

<TABLE BORDER ALIGN=right> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst

Jak widać, tekst wstawiony za definicją tabeli "oblewa" ją z jednej lub drugiej strony, zależnie od rodzaju wyrównania.

<TABLE BORDER=10 ALIGN=left> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst

[hand] Poziome wyrównanie danych w komórkach

Parametr ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - środkowania, justowania do lewej i justowania do prawej. Używamy wówczas odpowiednio konstrukcji
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy szerokość komórki za pomocą WIDTH.

a1 - do lewej | a2 - środkowanie | a3 - do prawej
b1 - do lewej | b2 - środkowanie | b3 - do prawej
c1 - do lewej | c2 - środkowanie | c3 - do prawej

[hand] Wysokość tabeli

Możemy zdefiniować nie tylko szerokość, ale i wysokość tabeli (polecenie nie wchodzi w skład HTML 4.0), podając parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony. W poniższym przykładzie zostały użyte parametry <TABLE BORDER WIDTH="50%" HEIGHT="30%">

Komórka a1 | Komórka a2
Komórka a3 | Komórka a4

[hand] Pionowe wyrównanie danych w komórkach

Parametr VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy wysokość tabeli za pomocą HEIGTH.

a1 - do górnego brzegu | a2 - do górnego brzegu | a3 - do górnego brzegu
b1 - do górnego brzegu | b2 - do dolnego brzegu | b3 - do środka

[hand] Kolor tła tabeli

Microsoft Internet Explorer i Nescape Communicator pozwalają wykorzystać kolor tła tabeli (HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów). W tym celu należy w definicji tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow>

.

Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver (silver), Yellow, Aqua

a1 - do górnego brzegu | a2 - do górnego brzegu | a3 - do górnego brzegu
b1 - do górnego brzegu | b2 - do dolnego brzegu | b3 - do środka

Możemy również "pomalować" poszczególne komórki, wstawiając definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa" - HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów.

a1 - do górnego brzegu | a2 - do górnego brzegu | a3 - do górnego brzegu
b1 - do górnego brzegu | b2 - do dolnego brzegu | b3 - do środka

Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka, stosując polecenie (HTML 4.0 nie przewiduje stosowania tego polecenia w tym kontekście - możemy jednak stosować style):

<table background="nazwa_obrazka">

111 | 222 | 333
444 | 555 | 666
777 | 888 | 999

[hand] Kolor obramowania tabeli

Internet Explorer i Navigator interpretują także kolor obramowania tabeli. W definicji tabeli należy wstawić parametr <BORDERCOLOR=barwa>, np. <TABLE BORDER=5 BORDERCOLOR=red>.

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

[hand] Odcień obramowania tabeli

Internet Explorer i Navigator pozwalają określić kolor cienia obramowania tabeli. Zauważmy, że cień konkretnego brzegu komórki dzieli się na dwie części: jasną - z lewej lub u góry, oraz ciemną - z prawej lub u dołu. Mamy optyczne wrażenie, jakbyśmy patrzyli na komórkę z lewej strony i od góry. Możemy nadać odrębną barwę cieniowi lewemu i górnemu oraz odrębną prawemu i dolnemu. Na przykład:

<TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Jeszcze wyraźniej widać to w przypadku pojedynczej komórki.

pojedyncza komórka

Definicję cienia możemy nawet zastosować w wierszu lub w pojedynczej komórce, na przykład:

<TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza komórka | Druga komórka
Trzecia komórka | Czwarta komórka

lub

<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza komórka Druga komórka

[hand] Podpis pod tabelą

Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólną definicją tabeli. Na przykład:

<TABLE BORDER WIDTH=300>
<CAPTION ALIGN=top>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u góry
a1 | a2 | a2
b1 | b2 | b3

lub

Tytuł tabeli umieszczony u dołu
a1 | a2 | a2
b1 | b2 | b3

Microsoft Internet Explorer pozwala dodatkowo dosunąć podpis do lewej lub prawej strony, przy użyciu parametru VALIGN. Na przykład:

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u góry i z lewej strony
a1 | a2 | a2
b1 | b2 | b3

a także

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=bottom ALIGN=right>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u dołu i z prawej strony
a1 | a2 | a2
b1 | b2 | b3

[hand] Nagłówek wiersza i kolumny

Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej. Na przykład:

Wzrost produkcji w latach 1991-1995 (w mln USD)
1991 | 1992 | 1993 | 1994 | 1995
1150 | 1240 | 1380 | 1420 | 1550

Nagłówek jest definiowany za pomocą parzystego kodu <TH> </TH>. Tak więc, aby sporządzić powyższą tabelę, z wierszem nagłówków kolumn i wierszem danych, należy wprowadzić następujący kod:

<TABLE BORDER CELLPADDING=10 WIDTH=400>

<CAPTION>Wzrost produkcji w latach 1991-1995 (w mln USD)</CAPTION>

<TR bgcolor="gray"><TH>1991</TH> <TH>1992</TH><TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR>

<TR ALIGN=center><TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

</TABLE>

Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajdują się dane liczbowe.

Podobnie, choć nieco inaczej, należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem.

<TABLE BORDER CELLPADDING=10 WIDTH=400>

<CAPTION>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</CAPTION>

<TR><TD></TD><TH>1991</TH> <TH>1992</TH> <TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR>

<TR ALIGN=center><TH>Masło</TH> <TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

<TR ALIGN=center><TH>Margaryna</TH> <TD>800</TD><TD>900</TD><TD>980</TD><TD>1150</TD><TD>1320</TD></TR>

</TABLE>

co da w rezultacie:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 | 1991 | 1992 | 1993 | 1994 | 1995
Masło | 1150 | 1240 | 1380 | 1420 | 1550
Margaryna | 800 | 900 | 980 | 1150 | 1320

W wierszach z danymi liczbowymi wystarczyło wstawić kody nagłówków (Masło i Margaryna), zaraz za definicją wiersza, a przed pierwszą definicją komórki z danymi.

Zauważmy też, że wiersz nagłówków z latami został poprzedzony pustą komórką, dzięki czemu nagłówki zostały we właściwy sposób ułożone w stosunku do kolumn z danymi. Gdybyśmy chcieli, aby ta pusta komórka była "wklęsła", możemy w niej wstawić "lepką spację", czyli kod &nbsp; (non-breaking space).

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 | 1991 | 1992 | 1993 | 1994 | 1995
Masło | 1150 | 1240 | 1380 | 1420 | 1550
Margaryna | 800 | 900 | 980 | 1150 | 1320

[hand] Łączenie komórek

Komórki danych i nagłówków można ze sobą łączyć. Na przykład:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 | 1991 | 1992 | 1993 | 1994 | 1995
Masło | 1950 | 2120 | 1380 | 1420 | 1550
Margaryna |  |  | 980 | 1150 | 1320

W powyższym przykładzie, znając łączną produkcję tłuszczów, ale nie znając jej struktury, przedstawiliśmy łączne dane dla dwóch kolejnych lat - 1991 i 1992.

Aby komórka w danym wierszu rozciągała się na x kolumn, należy użyć w jej definicji parametru <TD ROWSPAN=x>. W naszej tabeli zostały opatrzone parametrem ROWSPAN=2 dwie pierwsze komórki z danymi w wierszu Masło (i oczywiście podana łączna produkcja tłuszczów). Jednocześnie zostały usunięte dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata 1993-1995) dostosowały się do odpowiednich komórek w wierszu Masło.

Podobnie można łączyć komórki z nagłówkami:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 | 1991-1992 |  | 1993-1995
Masło | 2390 |  | 4350
Margaryna | 800 | 900 | 980 | 1150 | 1320

W przykładzie zostało pokazane poziome łączenie komórek, za pomocą parametru <TD COLSPAN=x>.Połączono w ten sposób komórki nagłówków z latami i komórki dotyczące produkcji masła, której czasowej struktury nie znamy.

I jeszcze jeden przykład:

Wzrost produkcji tłuszczów i przetworów owocowych w latach 1991-1995 (w mln USD)
 | Produkt | 1991 | 1992 | 1993 | 1994 | 1995
Tłuszcze | Masło | 1150 | 1240 | 1380 | 1420 | 1550
 | Margaryna | 800 | 900 | 980 | 1150 | 1320
Przetwory owocowe | Dżem | 750 | 840 | 880 | 1020 | 1150
 | Marmolada | 400 | 500 | 570 | 750 | 820

[hand] Zagnieżdżanie tabel

Możliwe jest zagnieżdżanie tabel w komórkach nadrzędnej tabeli. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <TD> </TD>. Na przykład:

100 200 300
AAA | BBB
CCC | DDD
400 500 600

Łatwo dostrzec, że tabela złożona z dwóch wierszy i dwóch kolumn została zagnieżdżona w komórce z wartością 300.

[hand] Tabele - nagłówek, ciało i stopka

Podobnie jak cały dokument, także i tabela może mieć swoją część nagłówkową, część główną i stopkę. Elementy te są (teoretycznie) przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli:

  • Wydzielenie nagłówka i stopki pozwoli wyświetlać zawsze na ekranie zawarte w nich informacje, gdy tabela przekracza wielkością ekran. Przewijana jest tylko główna część tabeli (dane), a informacje nagłówka i stopki pozostają cały czas widoczne. Analogicznie, gdybyśmy drukowali większą tabelę, która nie mieści się na jednej stronie druku, nagłówek i stopka tabeli będą drukowane na każdej kolejnej stronie, a zmieniać się będą oczywiście dane zawarte w BODY. Na razie ani Internet Explorer, ani Navigator nie interpretują w ten sposób nagłówka i stopki tabeli.
  • Wydzielenie części tabeli pozwala, razem z grupami kolumn, definiować obramowanie.

<TABLE WIDTH=50% BORDER=5 CELLPADDING=5>
<THEAD>To jest część nagłówkowa</THEAD>
<TBODY>
<TR>
<TD>Komórka 11</TD>
</TR>
<TR>
<TD>Komórka 21</TD>
</TR>
</TBODY>
<TFOOT>To jest stopka</TFOOT>
</TABLE>

Znaczniki zamykające są opcjonalne we wszystkich trzech poleceniach.

[hand] Obramowanie tabel i komórek w rozszerzeniach języka

HTML 4 zawiera szereg nowych poleceń pozwalających zdefiniować sposób wyświetlania obramowania tabel i komórek. Interpretuje je Internet Explorer.

Wyjdźmy od podstawowej definicji tabeli, zawierającej, przykładowo, 3 wiersze i 3 kolumny. W definicji tabeli znajduje się także obramowanie. <TABLE BORDER>

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

Seria znaczników FRAME= pozwala wyświetlać w specjalny sposób obramowanie tabeli. Polecenie FRAME wstawiamy bezpośrednio do definicji tabeli, czyli <TABLE BORDER FRAME=cośtam>.

FRAME=void pozwala usunąć zewnętrzne obramowanie tabeli.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=above wstawia górną krawędź obramowania, a FRAME=below - dolną.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=vsides wyświetla lewą i prawą krawędź obramowania tabeli, a FRAME=hsides - górną i dolną.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=lhs wyświetla lewą krawędź obramowania, a FRAME=rhs - prawą.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=box wyświetla wszystkie krawędzie obramowania.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

Pamiętajmy, że cały czas są niezależnie od tego wyświetlane wewnętrzne linie, dzielące komórki tabeli. Obecność BORDER pozwala definiować obramowanie. Linie te możemy jednak także osobno definiować, o czym będzie mowa niżej.

Seria znaczników RULES= pozwala manipulować wewnętrznymi liniami tabeli.

<TABLE BORDER RULES=cośtam>

RULES=none powoduje usunięcie linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

RULES=groups powoduje wyświetlenie tylko linii wewnętrznych dzielących część nagłówka, ciała i stopki tabeli oraz grup kolumn. Groups zastąpiły proponowane poprzednio polecenie basic.

Istotna informacja o kolumnach i grupach kolumn

W tabeli (zaraz za poleceniem <TABLE>) możemy definiować grupy kolumn, używając polecenia COLGROUP SPAN (grupa) lub COL (pojedyncza kolumna). Przykładowo:

<COLGROUP SPAN=4 ALIGN=center> spowoduje wydzielenie grupy 4 kolumn (span=4) i środkowanie ich zawartości.
<COL ALIGN=RIGHT> spowoduje wydzielenie 1 kolumny i wyrównanie jej zawartości do prawego marginesu.

Możemy zagnieżdżać definicje grup kolumn:

<COLGROUP>
<COL ALIGN=RIGHT>
<COL ALIGN=LEFT>
<COLGROUP>
<COL ALIGN=CENTER>

Pierwszy wiersz powoduje wydzielenie pierwszej grupy kolumn. Drugi wiersz definiuje parametry pierwszej kolumny w grupie. Trzeci wiersz definiuje parametry drugiej kolumny w grupie. Czwarty wiersz wydziela drugą grupę kolumn. Piąty wiersz definiuje parametry pierwszej kolumny w drugiej grupie. Cechy definiowanych kolumn mają pierwszeństwo przed cechami grup kolumn.

Przykładowa tabela, łącząca polecenia COLGROUP i RULES=GROUPS.

<TABLE border cellpadding=5 frame=void RULES=groups>
<COLGROUP SPAN=1 ALIGN=left>
<COLGROUP SPAN=4 ALIGN=center>
...

Pierwszy wiersz definiuje obramowanie, usuwa obramowanie zewnętrzne (frame=void) i definiuje obramowanie grup wierszy i kolumn (rules=groups).
Drugi wiersz wydziela grupę kolumn (de facto jedną) dla potrzeb nagłówków wierszy.
Trzeci wiersz wydziela grupę 4 kolumn dla potrzeb danych liczbowych.

W efekcie uzyskamy przykładową tabelę:

produkcja | 1993 | 1994 | 1995 | 1996
śliwki | 1,2 | 1,3 | 0,9 | 1,5
gruszki | 0,8 | 1,1 | 1,4 | 0,5
jabłka | 3,1 | 2,7 | 2,2 | 3,0
czereśnie | 0,4 | 0,3 | 0,6 | 0,5
wiśnie | 0,2 | 0,4 | 0,3 | 0,6
w mln ton |

RULES=rows powoduje wyświetlenie tylko poziomych linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

RULES=cols powoduje wyświetlenie tylko pionowych linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

RULES=all powoduje wyświetlenie wszystkich linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Wstęp | Narzędzia | Budowa stylów | Selektory | Kaskadowość i dziedziczenie | Wstawianie stylów | Style w przykładach

Style

[Uwaga: strona jest rekonstruowana, ale zakończenia można się spodziewać w sierpniu-wrześniu. Już teraz można się zapoznać z tłumaczonym sukcesywnie Przewodnikiem po stylach CSS2 - PW, czerwiec 1999]

[hand] Wstęp

Języki służące do budowy stron WWW zostały uzupełnione o potężne narzędzie do formatowania dokumentów internetowych - style (CSS - Cascading Style Sheets). Jest to rewolucyjna idea, w zasadniczy sposób zwiększająca elastyczność narzędzi i możliwości autorów stron. Warto zauważyć, że style leżą także u podstaw dynamicznego HTML (z technicznego punktu widzenia jest to połączenie stylów z językami skryptowymi, np. JavaScript) , który zdobywa sobie powoli prawo obywatelstwa na bardziej zaawansowanych stronach WWW. Style są niezbyt skomplikowane w konstrukcji, dając zarazem zaawansowane możliwości manipulowania postacią dokumentów, jakich brakowało w tradycyjnym języku HTML. Umiejętne stosowanie stylów pozwala całkowicie odmienić wygląd strony, nie szkodząc zarazem przeglądarkom, które stylów nie interpretują. Podkreślmy też wyraźnie, że CSS2 jest bardzo poważnym krokiem do przodu w stosunku do CSS1.

Jest to naturalny etap rozwoju języka, którego pojawienie się było łatwe do przewidzenia dla osób interesujących się głębiej edytorami tekstów, w których style zajmują bardzo eksponowane miejsce. Styl, będący zespołem kodów formatujących (jednego czy kilku), pozwala obecnie globalnie lub lokalnie zmieniać sposób formatowania wybranego fragmentu dokumentu. Style są obecnie (lato 1999) w znacznej mierze interpretowane przez przeglądarki Netscape Communicator 4.x i Internet Explorer 4 i 5. Wersja 3 programu Microsoftu interpretuje je szczątkowo i w pewnej mierze odmiennie od obowiązujących obecnie zasad. Na szczęście ta przestarzała wersja jest już "wymierająca", a jej udział w rynku nie przekracza 6-8 procent. Peryferyjna ciągle norweska Opera interpretuje CSS w wersji 1.

Zwróćmy też od razu uwagę na pewien istotny motyw powstania stylów. Język SGML, którego HTML jest pochodną, zajmuje się strukturą dokumentów i ich stroną semantyczną. Nie zajmuje się natomiast ich stroną wizualną, formatowaniem. HTML przekroczył tę barierę i z czysto praktycznych przyczyn od początku zaczął się rozszerzać o polecenia formatujące, dzięki którym dokumenty HTML są wizualnie dość różnorodne. Jednak ubocznym skutkiem tej sytuacji stał się "dziki wyścig" firm mających największy wpływ na rynku oprogramowania - Netscape i Microsoft, pewne swej silnej pozycji i roszcząc sobie prawo do swoistego ustawodawstwa zaczęły narzucać rozmaite rozszerzenia, interpretowane tylko przez ich przeglądarki, jak np. migotanie tekstu (NC) czy animacja Marquee (IE). Niektóre z tych rozszerzeń okazały się trafne i były sankcjonowane przez kolejne specyfikacje HTML, inne okazały się ślepym zaułkiem. Dobrym przykładem jest znacznik <font face>, który sterował czcionkami w dokumencie - w HTML 4 jest on określony jako przestarzały i odradza się jego stosowanie, zalecając przenoszenie informacji o czcionkach do stylów.

Arkusze stylów są próbą "powrotu do źródeł". Dzięki nim będzie można stopniowo rezygnować z formatowania bezpośrednio za pomocą HTML, przerzucając odpowiedzialność na style. W ten sposób HTML pozostanie w swej czystej, kanonicznej postaci i nie będzie już ryzyka niekontrolowanego rozbudowywania zestawu znaczników. Specyfikacja CSS2 jest narzędziem mocnym i wszechstronnym - problem jedynie w tym, aby ważniejsze przeglądarki poprawnie interpretowały wszystkie polecenia.

Na marginesie uwaga: jest niemal pewne, że podstawowe sposoby formatowania na zawsze pozostaną w HTML, i to z paru powodów. Po pierwsze, należy się liczyć z faktem, że niektóre egzotyczne przeglądarki nie będą sobie mogły poradzić z interpretacją stylów, po drugie zaś, miliony dokumentów w WWW są formatowane za pomocą klasycznego HTML i konieczne by było ich przetworzenie, zgodnie ze specyfikacją stylów - raczej nie jest to możliwe, więc konieczność zgodności "w dół" spowoduje, że te zaszłości będą zawsze honorowane przez przeglądarki.

Niniejszy opis powstaje na podstawie specyfikacji stylów poziomu drugiego (CSS2), zaprezentowanej w czerwcu 1998 roku przez World Wide Web Consortium. Organizacja skupia obecnie ok. 150 firm, wśród których znalazły się takie kompanie, jak Microsoft czy Netscape, deklarujące od pewnego czasu chęć respektowania ustaleń W3C, co jest szczególnie istotne, gdy przypomnimy sobie ich próby narzucania własnych rozwiązań. Za specyfikacje CSS odpowiada "czterech wspaniałych": Håkon Lie i Bert Bos (CSS1) oraz Håkon Lie, Bert Bos, Chris Lilley i Ian Jacobs (CSS2).

[hand] Narzędzia

Style można oczywiście konstruować ręcznie, gdyż jest to zwykły tekst. Jednak lepiej jest się posługiwać narzędziami wspomagającymi, które ułatwiają i przyspieszają ich tworzenie, zmniejszając zarazem ryzyko popełniania błędów składniowych - zachodzi tutaj pełna analogia z językiem HTML i edytorami.

Programiści wprowadzają do edytorów HTML kreatory stylów (wizards), pozwalające w komfortowy sposób definiować wielkość i kolor czcionki, kolor odsyłaczy, tło czy marginesy tekstu. Warto podkreślić, że własne edytory stylów zawierają m.in. HomeSite i polskie Pajączek 2000 i Tiger98, zaś pierwszym programem, który zaimplementował CSS2 jest Balthisar Cascade - dedykowany edytor stylów. Można go pobrać ze strony Narzędzi internetowych (programy) w witrynie PCkuriera. Warto też wykorzystywać spotykane coraz częściej w edytorach HTML funkcje definiowania własnych znaczników (custom tags), gdzie można zdefiniować ciekawe style i doraźnie przywoływać je w trakcie formatowania dokumentu.

W maju 1999 ukazał się najlepszy, jak dotąd, dedykowany edytor stylów. Jego autorem jest Nick Bradbury, znany doskonale jako autor HomeSite'a - Bradbury odszedł z firmy Allaire i założył Bradbury Software, tworząc od razu program TopStyle Editor - jego wersję testową można pobrać ze strony http://www.bradsoft.com. Opis wersji beta 1 można znaleźć w Narzędziach internetowych, w witrynie PCkuriera - http://www.pckurier.pl/inetools/topstyle.html. TopStyle Editor współpracuje też bezpośrednio z HomeSite'em, zastępując jego wbudowany edytor stylów.

[hand] Budowa stylu

Pokażmy od razu przykład stylu, obejmującego wybrany fragment tekstu. Jest to jeden z dwóch sposobów wstawiania stylu in-line.

<P STYLE="font-size: 20pt; font-weight: bold; background: yellow; color: red">Style to doskonałe narzędzie dla autora witryny</P>.

Style to doskonałe narzędzie dla autora witryny

.

Ogólne polecenie stylu ma postać selektor { cecha: wartość } (w jęz. angielskim selector { property: value }). Selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki. Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także mianem deklaracji stylu.

Przykłady:

P {font-family: Times}
Selektorem jest P, cechą - rodzina czcionek, wartością - Times.

To jest czcionka Times

H1 {font-size: 40pt}
Selektorem jest H1, cechą - wielkość czcionki, wartością - 30 punktów.

To jest 30-punktowy tytuł stopnia pierwszego

UL {font-weight: bold}
Selektorem jest UL, cechą - waga czcionki, wartością - pogrubienie.
  • punkt pierwszy wykazu
  • punkt drugi wykazu
  • punkt trzeci wykazu
H2 {color: #FF0000}
Selektorem jest H2, cechą - kolor, wartością - kolor czerwony.

Czerwony tytuł stopnia drugiego

Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie ze schematem:

Selektor { cecha1: wartość1; cecha2: wartość2 }

Proszę zwrócić uwagę na średnik rozdzielający pary cech-wartości.

H3 {font-variant: small-caps; font-size: 15pt; color: yellow; font-family: Courier}

Tytuł stopnia trzeciego, 15-punktowy, żółty, kapitaliki

UWAGA:
Ze względu na fakt, że przeglądarki interpretują jedynie część stylów, a ponadto Navigator i Internet Explorer robią to niekiedy "po swojemu", zaleca się ostrożne wykorzystywane stylów. Należy uważnie sprawdzić zachowanie obu głównych przeglądarek, zanim poślemy naszą stronę na serwer, gdyż interpretacje są niekiedy odmienne i poprawnie skonstruowana strona może być bez kłopotu wyświetlana w jednej z nich, a całkowicie błędnie w drugiej - zaskakujące bywają niekiedy interakcje stylów.

[hand] Selektory

W punkcie Budowa stylu powiedzieliśmy o ogólnej konstrukcji stylu, wprowadzając m.in. kluczowe pojęcie selektora. W tym miejscu odsyłamy do strony Selektory, w której znacznie rozszerzymy tę problematykę.

[hand] Kaskadowość i dziedziczenie

W Cascading Style Sheets istnieją dwa istotne pojęcia, o których należy pamiętać przy konstruowaniu stylów - dziedziczenie stylów i ich kaskadowy charakter.

Dziedziczenie polega na tym, że elementy niższe w hierarchii drzewa dokumentu (pojęcie drzewa jest wyjaśnione w rozdziale Selektory) dziedziczą formatowanie elementów leżących wyżej w hierarchii, chyba że wyraźnie nadamy im inne formatowanie. Przykładowo, jeśli ustalimy, że tekst w jakiejś tabeli ma być przedstawiony za pomocą pogrubionej czcionki Helvetica, to wszystkie komórki tabeli będą w ten sposób formatowane, gdyż komórka <TD> leży niżej w hierarchii (drzewie dokumentu) niż tabela <TABLE>. Jeśli natomiast nadamy odrębne formatowanie wybranej komórce (utworzymy wyjątek), to oczywiście wygląd czcionki w tej komórce zmieni się, gdyż bezpośrednie zdefiniowanie czcionki w wybranym miejscu ma pierwszeństwo przed ogólniejszym formatowaniem tabeli (na wyższym szczeblu). Taka jest właśnie ogólna zasada - jeśli wyraźnie nie zdefiniujemy formatowania dla jakiegoś elementu, dziedziczy on własności po swoich "przodkach", czyli elementach wyższych w hierarchii.

Niestety, zdarzają się odstępstwa interpretacyjne od tej zasady - przykładowo, zdefiniowanie czcionki w BODY (a więc na szczycie hierarchii) nie wpływa na postać czcionki w komórkach tabeli, jeśli stronę oglądamy w Netscape Communicatorze. Należy się liczyć z tego typu uchybieniami i sprawdzać wygląd strony przynajmniej w dwóch przeglądarkach. No i czekać na pełną implementację CSS2 :-)

Zasada dziedziczenia stylów jest bardzo wygodna, gdyż oszczędza autorowi strony czaso- i pracochłonnego wprowadzania mnóstwa informacji dla każdego elementu z osobna. Możemy na przykład ustalić pewne ogólne cechy dla całej strony, a dodać nieco konkretyzującej informacji dla niższych w hierarchii akapitów czy wykazów - połączą one wtedy w sobie "dziedziczoną" informację z wyższego szczebla i konkretyzującą informację ich samych. Dziedziczenie jest zresztą bardzo intuicyjnym i łatwo zrozumiałym pojęciem, jeśli ma się w sobie nieco kultury logicznej.

Kaskadowość, od której wzięły nazwę style, polega z kolei na ustaleniu hierarchii źródeł stylów. Jak Czytelnik będzie się mógł przekonać w następnym punkcie, style mogą być wprowadzane w nagłówku strony (HEAD), bezpośrednio w dokumencie, mogą też pochodzić z zewnętrznych źródeł, np. arkuszy wzorcowych. Konieczne jest więc ustalenie hierarchii ważności w przypadku konfliktu stylów. Może się bowiem zdarzyć, że zewnętrzny arkusz definiuje akapit za pomocą czcionki Times 12pt, w nagłówku strony akapit jest reprezentowany przez czcionkę Helvetica 11pt, a w samym dokumencie pojawia się akapit zdefiniowany za pomocą czcionki Times 11pt. Problem więc w tym, która definicja ma pierwszeństwo i jaka jest ich hierarchia.

Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to zaś może być modyfikowane przez style zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" konkretnego elementu. Przeglądarka sprawdza więc najpierw, czy istnieją jakieś arkusze zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie sprawdza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich ustaleniami. Następnie sprawdza style w samym dokumencie i ponownie modyfikuje fizyczną postać strony. To oczywiście model działania, ale pokazuje on, jak działa taka kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki, "wirtualny" styl.

Ta zasada pozwala też, co szczególnie ważne, wygodnie manipulować postacią całych kompleksów stron. Można na przykład ustalić pewne ogólne cechy całej witryny firmy i zawrzeć je w zewnętrznym arkuszu stylów. Następnie można zbudować odrębne arkusze dla wydziałów firmy i zawrzeć w nich bardziej konkretyzującą informację. Po ustaleniu hierarchii arkuszy można łatwo definiować style dla dziesiątek i setek stron, a jedna drobna zmiana w arkuszu powoduje zmiany we wszystkich objętych nimi dokumentach.

Jak z tego widać, kaskadowość i dziedziczenie uzupełniają się, tworząc zwarty system ogólnych zasad sterujących działaniem stylów. Kaskadowość ustala hierarchię różnych źródeł stylów, a dziedziczenie wpływa na wygląd strony z punktu widzenia hierarchii elementów w danym dokumencie (drzewie dokumentu).

[hand] Wstawianie stylów

Style mogą być umieszczane w dokumencie na kilka sposobów:

  • Kody formatujące są umieszczane w środku tekstu (in-line style) i dotyczą wybranego znacznika dokumentu.
  • Kody formatujące są umieszczane w środku tekstu, obejmują większy fragment dokumentu i nie są związne z wybranymi znacznikami.
  • Kody formatujące są umieszczane na początku strony i oddziałują na cały dokument.
  • Kody formatujące są umieszczane na wzorcowych stronach na serwerze, a w dokumentach wstawiamy odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do tzw. stylów zewnętrznych.
  • Kody formatujące są importowane z innej strony za pomocą polecenia @import.

Styl lokalny * Rozciąganie stylu * Wydzielone bloki * Zagnieżdżanie arkusza * Dołączanie do zewnętrznego arkusza * Importowanie arkusza

[hand] Style w przykładach

Poniższe odsyłacze prowadzą do stron zawierających przykłady stylów, które mogą być pojedynczo lub w grupach aplikowane rozmaitym elementom dokumentu WWW. Przykłady są sprawdzane w najnowszych wersjach Netscape Navigatora (4.6) i Internet Explorera (5.0). Oba programy zaimplementowały już większość stylów, ale ciągle pozostają poważne opóźnienia, zwłaszcza w przypadku Navigatora. Próby z nowym "engine'em" Mozilli, czyli Gecko, także wypadają dość skromnie - ten, w zamierzeniu, superszybki i znacznie udoskonalony mechanizm renderingu stron, w rzeczywistości jest okrutnie powolny i ma mnóstwo dziur w interpretacji elementów stylów. Dlatego na razie nie odwołujemy się do Gecko, czekając, aż "silnik" zostanie ostatecznie wbudowany do Navigatora. Może będzie to rewolucja, a może nie - zobaczymy.

Dział w rekonstrukcji...

Własności czcionek * Własności tekstu * Kolor i tło * Marginesy * Obramowania * Obrys * Wykazy * Tabele * Klasyfikacje * Rozmiary * Pozycjonowanie * Zawartość dynamiczna * Zawartość generowana * Własności międzynarodowe * Jednostki miary * Kursory * Własności drukowania * Dźwięk


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Czym są ramki w dokumencie HTML? | Ogólna struktura strony | Wyjaśnienie znaczników | Parametry FRAMESET | Parametry FRAME | Ramki w kolumnach i wierszach | Odsyłacze | NOFRAMES

Ramki

[hand] Czym są ramki w dokumencie HTML?

Coraz więcej przeglądarek potrafi interpretować ramki, które stały się już oficjalnym standardem języka HTML (w wersji 4.0). Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML i dlatego są chętnie stosowane przez wielu webmasterów.

W tej chwili (marzec 1998) Internet został zdominowany przez dwie firmy produkujące przeglądarki. Netscape i Microsoft dzielą się prawie po połowie tym wielkim rynkiem, pozostawiając zaledwie kilka procent dla innych produktów. Praktycznie wszystkie systemy operacyjne są obsługiwane przez produkty Netscape'a i/lub Microsoftu, więc używanie przeglądarek ignorujących ten element jest raczej kwestią wyboru, jak to czynią np. niektórzy użytkownicy Linuxa, posługujący się tekstową przeglądarką Lynx. Dla przykładu, strony Wydawnictwa Lupus są wizytowane w 98 procentach przez posiadaczy Internet Explorera i Navigatora, które akceptują stosowanie ramek na stronach.

Najbardziej typowym przykładem użycia ramek jest umieszczenie w jednej spisu treści i przeznaczenie drugiej na wywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Gdyby ktoś się martwił, że ramka przeznaczona na dokumenty jest zbyt mała, może ją łatwo powiększyć, przeciągając po prostu jej brzegi za pomocą myszki (o ile ramka nie jest zablokowana przez autora strony). W ten sposób można powiększyć ramkę do wielkości niemal całego obszaru roboczego przeglądarki, niezależnie od domyślnych parametrów utworzonych przez autora strony.

Na bieżącej stronie pokażemy sposoby tworzenia ramek - okaże się, że ich konstruowanie jest dość proste (na pewno nie trudniejsze niż tworzenie tabel), a uzyskany efekt wart pracy włożonej w poznanie niewielu poleceń.

[hand] Ogólna struktura strony

Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi.

Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie NOFRAMES.

Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka edytorów HTML. Za chwilę wyjaśnimy ich znaczenie, a oto przykład.

<HTML>

<TITLE>Edytory HTML</TITLE>

<FRAMESET COLS="25%,*%">

<FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">

<FRAME SCROLLING="yes" NAME="edytory" SRC="edyt.htm">

</FRAMESET>

<NOFRAMES>

<BODY>

</BODY>

</NOFRAMES>

</HTML>

[hand] Wyjaśnienie znaczników

Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.

Zwróćmy uwagę na "wyłamującą się" parę znaczników <NOFRAMES> </NOFRAMES>, o której będziemy mówić nieco niżej. Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki innej niż Navigator i Internet Explorer (pomijając mniej znane programy). Jeśli natomiast czytelnik strony używa Navigatora lub Internet Explorera, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki. Nietrudno się domyślić, że treść między znacznikami <NOFRAMES> </NOFRAMES> powinna stanowić swoisty równoważnik strony "ramkowej". Odradzamy raczej stosowany dość często komunikat "Twoja przeglądarka nie obsługuje ramek" - szacunek dla gości strony wymaga obsłużenia także tej wąskiej grupy, która z jakichś powodów posługuje się programami nie akceptującymi ramek.

Znacznik <FRAME> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.

[hand] Parametry FRAMESET

Aby konstrukcja mogła działać, konieczne jest podzielenie strony - pionowe lub poziome. Poniższy kod (kontynuujemy nasz przykład) zawiera informację o podzieleniu strony na dwie kolumny. Służy do tego parametr COLS="x,y", umieszczany w otwierającym znaczniku FRAMESET. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).

Możemy zastosować parametr BORDER=x, wprowadzonywany przez Navigatora i akceptowany przez Internet Explorera 4, który określa w pikselach szerokość obramowania rozdzielającego ramki. Parametr BORDERCOLOR=kolor pozwala określić kolor obramowania rozdzielającego ramki. Parametr FRAMEBORDER=yes|no lub 1|0 (zalecana jest "liczbowa" postać) pozwala wyświetlać lub chować obramowanie rozdzielające ramki (domyślnie jest ono wyświetlane). Parametr jest na pewno akceptowany przez Navigatora 4.04 i Internet Explorera 4.01.

Uwaga: aby usunąć obramowania w Internet Explorerze, oprócz FRAMEBOERDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0.

Powyższe trzy parametry nie są przewidziane do stosowania w definicji FRAMESET w specyfikacji HTML 4, aczkolwiek podaje je "HTML Reference Library 4".

<FRAMESET COLS="18%,82%">

Kliknij w tym miejscu, aby zobaczyć przykład:

Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji:

<FRAMESET ROWS="200,*,200">

Kliknij w tym miejscu, aby zobaczyć przykład:

[hand] Parametry FRAME

Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML (choć mógłby to być na przykład plik w formacie Envoya, który moglibyśmy obejrzeć za pomocą specjalnego programu wspomagającego Netscape'a - Envoy Plug-in.

Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji:

<FRAME SRC="nazwa_pliku.htm">

Byłoby dobrze, gdyby przywoływany plik znajdował się w tym samym katalogu, choć możemy także podać nazwę pliku z pełną ścieżką dostępu:

Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć parametru, który wyświetli ramkę razem z suwakami. Stosowny parametr ma postać:

<FRAME SCROLLING=yes>

Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić parametr SCROLLING=no, ustawiając zarazem odpowiednio szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy parametru SCROLLING=auto, suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.

Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.

<FRAME NAME="jakaś_tam_nazwa">

Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru

<FRAME NORESIZE>

zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne.

Parametr FRAMEBORDER=1|0 pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. W przypadku IE należy jeszcze dodać FRAMESPACING=0 (nie przewiduje go jednak HTML 4).

Parametr MARGINHEIGHT=x wymusza dodatkowy odstęp (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei MARGINWIDTH=x wymusza margines lewy i prawy.

Parametr BORDERCOLOR=kolor określa kolor obramowania danej ramki. Parametr jest akceptowany poprawnie przez Navigatora, natomiast IE akceptuje go z błędami. Element ten nie jest jednak przewidziany przez HTML 4 dla definicji FRAME.

Ostatecznie cała definicja ramki może mieć postać:

<FRAME SCROLLING=yes NAME="jakaś_tam_nazwa" SRC="nazwa_pliku.htm">

W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy w definicji FRAMESET. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe.

[hand] Ramki w kolumnach i wierszach

Powyżej zostały przedstawione dwa konkretne przykłady, obrazujące podział strony na dwie kolumny lub trzy wiersze. Możliwe jest jednak dość dowolne mieszanie definicji kolumn i wierszy, co pozwala np. na utworzenie strony, w której znajdują się trzy wiersze, wiersz środkowy jest podzielony na trzy, a wiersz ostatni na dwie kolumny (łącznie 6 ramek) Oczywiście należy dość ostrożnie zwiększać liczbę ramek, gdyż może to ujemnie wpłynąć na czytelność strony. Vide:

To chyba dość niefortunny podział, choć oczywiście bynajmniej nie zabroniony.

Cała sztuka polega na tym, że najpierw dzielimy (w naszym konkretnym przykładzie) stronę na wiersze, a następnie w drugim i trzecim wierszu deklarujemy dodatkowy podział na kolumny - trzy w drugim i dwie w trzecim. Odpowiedni kod mógłby mieć postać:

<FRAMESET ROWS=200,*,200>

<FRAME SRC=strona6.htm>

<FRAMESET COLS=35%,*,35%>

<FRAME SRC=strona7.htm>

<FRAME SRC=strona8.htm>

<FRAME SRC=strona9.htm>

</FRAMESET>

<FRAMESET COLS=50%,50%>

<FRAME SRC=strona10.htm>

<FRAME SRC=strona11.htm>

</FRAMESET>

</FRAMESET>

Objaśnienie:

Rozpoczęliśmy konstrukcję od zadeklarowania w pierwszej linii liczby wierszy (trzy).

W drugiej linii od razu wstawiliśmy ramkę z przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi.

W trzeciej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc drugi wiersz na trzy kolumny.

W czwartej, piątej i szóstej linii wstawiamy definicje konkretnych trzech ramek dla drugiego wiersza, przypisując im odpowiednie strony.

W siódmej linii musimy zakończyć tę "lokalną" definicję FRAMESET.

W ósmej linii tworzymy kolejną "lokalną" definicję FRAMESET, tym razem dla trzeciego wiersza, dzieląc go na dwie kolumny.

W dziewiątej i dziesiątej linii wstawiamy definicje dwóch konkretnych ramek dla trzeciego wiersza, przypisując im odpowiednie strony.

W jedenastej linii kończymy "lokalną" definicję FRAMESET.

W dwunastej linii kończymy "globalną" definicję FRAMESET.

[hand] Odsyłacze

Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom.

Powróćmy do przykładu przedstawionego wyżej w punkcie Ogólna struktura strony.

Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lista edytorów, natomiast prawej edytory.

<FRAMESET COLS="25%,*">

<FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">

<FRAME SCROLLING="auto" NAME="edytory" SRC="edyt.htm">

</FRAMESET>

<NOFRAMES>

</NOFRAMES>

Nietrudno się domyślić, że należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o nazwie lista edytorów. Do ramki tej jest ładowana strona zawarta w pliku o nazwie - spisedyt.htm.

Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie edytory. Można to uczynić za pomocą następującej konstrukcji:

<A HREF="fp97.htm" TARGET="edytory">FrontPage 97</A>
<A HREF="hs25.htm" TARGET="edytory">HomeSite 2.5</A>
<A HREF="paj2000.htm" TARGET="edytory">Pajączek 2000.5</A>

itd.

HREF="nazwa_ładowanej_strony" dotyczy nazwy pliku, w którym jest zapisana dana strona

TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek.

FrontPage 97, HomeSite 2.5 i Pajączek 2000 są konkretnymi tematami w ich spisie, pozwalającymi po prostu wybrać interesujące nas zagadnienie.

Oczywiście należy pamiętać o poprawnej konstrukcji, a więc <A HREF=...> </A>

Zwróćmy jeszcze uwagę na cztery zastrzeżone nazwy w przypadku parametru TARGET.

TARGET="_blank"
TARGET="_self"
TARGET="_parent"
TARGET="_top"

W pierwszym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nową kopię przeglądarki.
W drugim przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku.
W trzecim przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu.
W czwartym przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę".

Szczególnie przydatny i często stosowany jest ten ostatni parametr. Użycie "_top" pozwoli uniknąć dość kłopotliwej sytuacji, gdy do ramki jest ładowany dokument, który sam składa się z ramek. "_top" usuwa więc wszelkie istniejące ramki i wyświetla dokument "na czysto". Naturalnie moglibyśmy tutaj z powodzeniem użyć "_blank", ale pozbawiamy się w ten sposób "historii" skoków.

[hand] NOFRAMES

NOFRAMES jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce, a więc wszystkich tych osób, które nie posiadają nowej przeglądarki

Posiadacz starszej przeglądarki zobaczyłby pustą stronę, gdyby między <NOFRAMES> </NOFRAMES> nie było żadnej informacji. Dlatego musimy w tym miejscu powtórzyć informację zawartą w jednej z ramek. W naszym przykładzie podstawową stroną jest strona o nazwie Edytory HTML (plik edytory.htm). Strona ta zawiera definicję dwóch ramek: do lewej jest na stałe przypisana strona spisedyt.htm, do prawej natomiast są wlewane inne strony, zależnie od wskazanego tematu. Z kolei między <NOFRAMES> </NOFRAMES> znalazło się powtórzenie treści strony spisedyt.htm (lista edytorów), jako strony wyjściowej dla osób nie posiadających Navigatora czy Internet Explorera. Tym samym osoby te, wywołując kurs, zobaczą stronę Edytory HTML (edytory.htm), ale w taki sposób, jakby wywołały stronę Lista edytorów (spisedyt.htm). Z poziomu tej strony mogą sięgać do konkretnych tematów, które będą oczywiście zajmować cały ekran, a nie ramkę, jak w Navigatorze czy Internet Explorerze. Naturalnie powinny się tutaj znaleźć stosowne odsyłacze hipertekstowe, które pozwolą nawigować w całym, wielostronicowym kursie HTML.Przypomnijmy, że gdy używamy nowych programów, wszelkie informacje między znacznikami NOFRAMES zostaną zignorowane.

W naszym przykładzie będzie to następujący blok:

<noframes>
<body>
Twoja przeglądarka nie akceptuje ramek
<br>
<hr>
<h3>Edytory HTML</h3>
<ul type=square>
<li><a href="corelweb.htm" target="edytory">Corel WebGraphics Suite</a>
<li><a href="webmast.htm" target="edytory">Corel WebMaster Suite</a>
<li><a href="fp97.htm" target="edytory">FrontPage 97</a>
<li><a href="hedit11.htm" target="edytory">Hedit 1.1</a>
<li><a href="homesite.htm" target="edytory">HomeSite 2.5</a>
<li><a href="hotdog3.htm" target="edytory">HotDog 3</a>
<li><a href="composer.htm" target="edytory">Netscape Composer</a>
<li><a href="paj2000.htm" target="edytory">Pajączek 2</a>
</ul>
</body>
</noframes>

Uwaga: nie jest do końca jasne, czy NOFRAMES umieszczać w ramach FRAMESET, czy też poza nim. Uprzednio autorzy podręczników sugerowali tę drugą możliwość, ale w specyfikacji HTML 4 pojawiła się informacja, że NOFRAMES mogą być umieszczone w ramach FRAMESET "pierwszego rzędu". Niezależnie od tego przeglądarki interpretują poprawnie oba sposoby umieszczania NOFRAMES.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Pływające ramki

Pływające ramki, wprowadzone po raz pierwszy przez IE3, zyskały sobie ostatnio uznanie World Wide Web Consortium i znalazły się w oficjalnej specyfikacji języka. Nazwa "pływająca" pochodzi jeszcze z początków egzystencji tego elementu - "floating frame". W tej chwili coraz częściej używana jest nazwa "inline frame" i stosownie do tego zostało nawet zmienione definiujące ją polecenie - IFRAME. Moglibyśmy się więc równie dobrze posłużyć nazwą "ramka lokalna", co także poprawnie odzwierciedla istotę tego elementu.

Uwaga: pływające ramki są interpretowane obecnie (marzec 1998) jedynie przez Internet Explorera.

Klasyczne ramki pozwalają dzielić ekran przeglądarki na odrębne okna. Pływająca ramka jest ramką umieszczoną w dowolnym miejscu strony i jest prostsza w konstrukcji, gdyż ogranicza się w zasadzie do jednego polecenia:

<IFRAME WIDTH=ileśtampunktów HEIGHT=ileśtampunktów SRC="jakiśtamdokument">Twoja przeglądarka nie akceptuje pływających ramek!</IFRAME>

Przykład:

Zdanie "Oops! Twoja przeglądarka nie akceptuje pływających ramek" zostanie wyświetlone w przeglądarkach nie akceptujących pływających ramek. Możemy jednak podać w tym miejscu adres dokumentu, który jest wczytywany do pływającej ramki. Kliknięcie na tym adresie pozwoli użytkownikowi takiej przeglądarki, np. Navigatora, obejrzeć zawartość na odrębnej stronie. Przykład dla posiadaczy "nieInternetExplorera":

Tutaj akurat ramka ma 450x250 punktów i został do niej automatycznie wczytany dokument car1.html.

Oczywiście, gdyby dokument był nieco dłuższy, pojawiłby się suwak.

Gdybyśmy z kolei chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję:

<IFRAME WIDTH=300 HEIGHT=200 FRAMEBORDER=0 SRC="ie3font.htm">Oops! Twoja przeglądarka nie akceptuje pływających ramek</IFRAME>
Proszę zwrócić uwagę na parametr FRAMEBORDER.

Jeśli podamy w definicji parametr SCROLLING=NO, ramka zostanie pozbawiona suwaka.

No i nie dowiemy, się, gdyż dokumentu w ramce nie da się przewinąć.

HTML 4 przewiduje użycie parametrów MARGINWIDTH=x i MARGINHEIGHT=x. Pozwalają one wprowadzić dodatkowe marginesy w pływającej ramce (proszę porównać przykład, w którym użyto marginesów 70 pikseli, z następnym obrazkiem).

Pływająca ramka może być oddzielona od sąsiadujących z nią elementów o podaną liczbę pikseli, w pionie lub/i w poziomie.

VSPACE=x dotyczy odstępu pionowego, natomiast HSPACE=y - poziomego (HTML 4 nie przewiduje jednak stosowania tych parametrów w odniesieniu do pływających ramek).

Ta ramka jest odzielona o 50 pikseli w pionie od tekstu nad i pod nią.

Pływającą ramkę można ustawić po prawej stronie, używając polecenia ALIGN=RIGHT.

To były zabawy, a na zakończenie pokażemy jeszcze całkiem praktyczne zastosowanie pływających ramek, wykorzystując imienne ich adresowanie.

Autorzy stron, którzy stosowali ramki w postaci klasycznej, zetknęli się oczywiście z parametrem NAME. Parametr ten pozwalał nadać nazwę ramce, a następnie kierować do niej dokumenty HTML, powołując się na nazwę.

Także i tutaj można wykorzystać ten mechanizm. Wystarczy w definicji ramki podać NAME="jakaśnazwa". Na przykład:

<IFRAME WIDTH=300 HEIGHT=200 NAME="jakaśnazwa" SRC="dokument.htm"></IFRAME>

A teraz możemy zdefiniować odsyłacze do kilku stron, które po kliknięciu będą wczytywać do ramki podane strony. Na przykład:

<IFRAME WIDTH=300 HEIGHT=200 NAME="auto" SRC="car1.htm"></IFRAME>

<A HREF="car1.htm" TARGET="auto">Pickup</A>

<A HREF="car2.htm" TARGET="auto">Minivan</A>

i tak dalej.

Ostatecznie otrzymamy taki oto rezultat:

Oto moja menażeria

Pickup | Minivan | Compact | Sports Car


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Uwagi ogólne | Typy pól formularza | Ogólne ramy formularza | INPUT | BUTTON | SELECT | TEXTAREA | Plik w załączniku

Formularze

[hand] Uwagi ogólne

Formularze to jeden z najciekawszych i najważniejszych elementów stron internetowych. Pozwalają one autorom stron uzyskiwać informację od czytelników, zaś tym ostatnim, na przykład, wypełniać ankiety czy zamawiać jakieś towary i usługi. Przykładem formularza jest strona z ankietą w niniejszym kursie, za pomocą której Czytelnicy tego kursu zechcieli uprzejmie wysłać kilka cennych informacji o sobie i swoich narzędziach pracy. Jeszcze raz bardzo im dziękuję za poświęcony czas.

Warto zauważyć, że formularze nie należą bynajmniej do najprostszych i najbardziej potrzebnych na co dzień elementów. Są one w zasadzie stosowane przez nieco bardziej zaawansowanych autorów stron WWW. Na dodatek tematyka tworzenia formularzy wkracza już w zagadnienia pracy skryptów na serwerze, co jest już "wyższą szkołą jazdy".

Jednak stosunkowo niezbyt skomplikowany formularz można wykonać domowymi środkami, a kontakt z czytelnikami strony zapewnić sobie za pomocą poczty elektronicznej, tak jak ma to miejsce w przypadku wspomnianej ankiety. Tego rodzaju formularz będzie zapewne najczęściej stosowany przez znakomitą większość osób zainteresowanych zebraniem jakiejś informacji. Tutaj pokażemy właśnie w praktyczny i możliwie prosty sposób zasady konstruowania takiego formularza.

Na rynku programów shareware'owych i freeware'owych istnieje wiele narzędzi, które wspomagają tworzenie formularzy. Jeśli zamierzamy tworzyć dokumenty internetowe zawierające formularze, warto zaopatrzyć się w edytor, który zawiera kreator formularza lub przynajmniej okienka dialogowe do budowania poszczególnych elementów - w praktyce wszystkie zaawansowane edytory takie wspomaganie oferują. Istnieją też programy wyspecjalizowane, jak np. WebForms. Chodzi generalnie o to, aby program nie zmuszał do wprowadania wszystkich kodów ręcznie.

Uwaga: gdy stosujemy standard kodowania ISO-8859-2, kilka polskich znaków może być błędnie interpretowanych w elementach formularzy (Internet Explorer 3). Jeśli autor formularza uzna to za rażące, może zrezygnować ze stosowania w nich polskich liter. Na szczęście udział IE3 jest już szczątkowy, więc chyba nie jest to konieczne.

[hand] Ogólne ramy formularza

Elementy formularza są tworzone w pewnych ogólnych ramach, zakreślonych przez polecenie <FORM></FORM>. Między nimi umieszczamy wszystkie pozostałe elementy.

Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik strony zechce przesłać do autora jakieś informacje. Nas interesuje w tym miejscu wysyłanie informacji za pomocą poczty elektronicznej, w związku z czym w definicji formularza powinniśmy umieścić specjalne polecenie ACTION=jakaśtamakcja. Należy również określić sposób komunikowania się przeglądarki czytelnika z serwerem, a więc czy przesyła ona jakieś informacje, czy też je pobiera. Wybieramy zatem jedną z dwóch możliwych metod - POST lub GET. Wygląda to więc ostatecznie następująco (zakładamy, że czytelnik strony ma wysłać informacje za pomocą poczty elektronicznej):

<FORM ACTION="mailto:autor_strony@jego_domena" METHOD="Post">
....
</FORM>

Jeśli dodasz jeszcze temat listu, czyli subject po znaku zapytania, wypełniony formularz trafi do autora z taką właśnie informacją w polu tematu listu. Jeśli zamieszczamy na stronie kilka formularzy z ankietami, każdą z nich możemy opatrzyć innym tematem, co ułatwi np. organizację odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka.

<FORM ACTION="mailto:autor_strony@jego_domena?subject=Temat ankiety" METHOD="Post">
....
</FORM>

Jest jeszcze inne praktyczne zastosowanie tematu w definiowaniu akcji w formularzu. Darmowy program Aureate Group Mail (http://www.group-mail.com) to świetna aplikacja do grupowego wysyłania listów elektronicznych. Zawiera ona specjalną wtyczkę Subscriber, która potrafi budować bazę danych odbiorców przesyłek na podstawie wystawionej w Internecie ankiety-formularza. Jeśli podamy w ankiecie określony temat, a jednocześnie uwrażliwimy Subscribera na ten temat (konkretny ciąg znaków w temacie), będzie on automatycznie wstawiać osoby zamawiające do bazy. Bazę zaś możemy wykorzystać do przesyłania biuletynów, powiadomień i rozmaitych innych rzeczy. To doskonałe rozwiązanie, które warto polecać zwłaszcza osobom indywidualnym i małym firmom. Aureate Group Mail można pobrać z polskich serwisów shareware'wych, m.im. mirrorów TUCOWS, na przykład stąd: http://tucows.team.com.pl/mail95.html

Szerszy opis Aureate Group Mail znajdziesz pod adresem http://www.pckurier.pl/inetools/agm.html.

W formularzu ankiety w kursie jest tutaj zawarty mój redakcyjny adres poczty elektronicznej, dzięki czemu wypełniana przez Państwa ankieta trafia niezawodnie na moje biurko. Od kilku lat rozpoczynam swój redakcyjny dzień od czytania sporej ilości poczty - mam nadzieję, że nie zapomniałem nikomu podziękować.

Nawiasem mówiąc, istnieją specjalne skrypty, które generują odpowiedź autora strony automatycznie, co stanowi (nieco sztampowe) potwierdzenie odbioru, wsparte zazwyczaj jakimś grzecznym komentarzem. Zwalnia to od "ręcznego" wysyłania podziękowań, co ma sens w przypadku dużej ilości poczty.

[hand] Typy pól formularza

Formularz zawiera różnego typu pola, które są wypełniane informacjami - np. imię i nazwisko, zamawiany towar, dalsze informacje o sobie komentarz itd. Pola te są podzielone na kilka podstawowych grup:

  • INPUT, z dodatkowymi parametrami TYPE, NAME i VALUE, służy do tworzenia pól, gdzie czytelnik strony może wpisać informację lub wybrać jakąś opcję.

Na przykład:

Wpisz swoje imię i nazwisko:

lub

Ile masz lat?

Mniej niż 20 21-40 41-60 więcej niż 60

  • SELECT służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje.

Na przykład:

Jakiej przeglądarki WWW używasz?

  • TEXTAREA jest poleceniem do tworzenia większego pola na dodatkowy komentarz czytelnika.

Na przykład:

Wpisz swoje uwagi:

[hand] INPUT

Jak wspomnieliśmy wyżej, INPUT służy o wprowadzania pól, które pozwolą czytelnikowi wpisać jakąś informację lub wybrać jedną z opcji.

INPUT ma następującą składnię:

<INPUT TYPE="typ" NAME="nazwa" VALUE="wartosc">. Można jeszcze podać MAXLENGTH=n, ograniczające długość wpisywanej informacji do n znaków.

Rozpatrzmy po kolei składniki tego polecenia:

Parametr TYPE określa rodzaj pola.

[zielona kropka] Jeśli nie wpiszemy TYPE, pole będzie domyślnie polem tekstowym. Gdybyśmy pytali o imię i nazwisko, możemy wpisać: <INPUT NAME="nazwisko">. NAME jest nazwą pola, które je identyfikuje. W przypadku imienia i nazwiska nie musimy wpisywać wartości pola, czyli VALUE, gdyż wprowadziłoby to do formularza jakieś dane, gdy to my sami oczekujemy ich od czytelnika.

Podaj swoje imię i nazwisko:

[zielona kropka] TYPE="checkbox" pozwala wprowadzić pole w postaci kwadratu. Kliknięcie w nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. Jeśli zdefiniujemy kilka pól, czytelnik strony będzie mógł zaznaczyć parę z nich lub wszystkie, zależnie od treści. Na przykład w ten sposób moglibyśmy się dowiedzieć, jakimi językami kongresowymi włada.

<INPUT TYPE="checkbox" NAME="jezyk" VALUE="angielski"> angielski
<INPUT TYPE="checkbox" NAME="jezyk" VALUE="francuski"> francuski
...

NAME jest nazwą pola - w tym wypadku jest to język. Każdy kolejny INPUT zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych (tę samą zmienną). VALUE zmienia się, zależnie od języka. Wartość ta zostanie przesłana do autora. W kolejnych wierszach musimy wpisać różne języki. Za poleceniem INPUT wpisujemy jeszcze raz nazwę języka, aby była widoczna dla czytelnika.

Czy znasz któryś z języków kongresowych?

angielski
francuski
niemiecki
hiszpański
rosyjski
chiński
arabski

[zielona kropka] TYPE="radio" pozwala wprowadzić przełącznik (przycisk radiowy). Czytelnik będzie wybierał tylko jedną z możliwych wartości. Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. Typ ten stosujemy wtedy, gdy nie można podać kilku wartości, gdyż jest to nielogiczne. Trudno być na przykład jednocześnie kobietą i mężczyzną (proszę się powstrzymać od żartobliwych spekulacji medyczno-psychologicznych!).

<INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked> Kobieta
<INPUT TYPE="radio" NAME="plec" VALUE="mężczyzna"> Mężczyzna

Nazwą pola jest "plec", VALUE przybiera dwie możliwe wartości. Jeśli podamy przy jednej z możliwości "checked", pole to będzie domyślnie zaznaczone.

Podaj swoją płeć

Kobieta
Mężczyzna

[zielona kropka] TYPE="submit" służy do wysłania informacji do autora strony (ciągle zakładamy, że posługujemy się funkcją poczty elektronicznej).

<INPUT TYPE="submit" VALUE="Wyślij do nas informacje">

VALUE="jakaśtamtreść" spowoduje wyświetlenie informacji na przycisku. Kliknięcie na przycisku uruchomi z kolei domyślny program obsługujący pocztę elektroniczną i zapoczątkuje proces przesyłania poczty do osoby, która została zdefiniowana w ACTION. Proszę wypróbować działanie przycisku, ale zrezygnować potem z wysyłania, gdyż chyba nie ma w Polsce adresu jan.kowalski@firma.com.pl.

[zielona kropka] TYPE="reset" spowoduje usunięcie wszystkich danych wpisanych do formularza ( właściwie zresetowanie do wartości domyślnych). Czasem rozmyślimy się, więc zawsze warto mieć możliwość zrezygnowania i rozpoczęcia wszystkiego od nowa.

<INPUT TYPE="reset" VALUE="Usuń wszystkie informacje">

[hand] BUTTON

Nowym elementem HTML 4 jest polecenie BUTTON, które jest podobne do klasycznego INPUT, ale pozwala wprowadzić do "klikalnego" przycisku znacznie więcej elementów. Polecenie jest interpretowane tylko przez Internet Explorera 4 lub 5.

<BUTTON>Treść przycisku</BUTTON>

Przycisk z tekstem

Funkcjonalność przycisku można rozbudowywać o skrypty.

[hand] SELECT

SELECT służy do tworzenia rozwijanych menu, zawierających kilka opcji. Czytelnik strony może wybrać jedną lub kilka. Składnia jest następująca:

<SELECT NAME="nazwa_listy">
<OPTION> pierwsza pozycja
<OPTION> druga pozycja
<OPTION> trzecia pozycja
...
</SELECT>

w praktyce wygląda to następująco:

Wybierz produkt:

Gdybyśmy chcieli zapewnić możliwość wybrania kilku pozycji, powinniśmy podać <SELECT NAME="nazwa_listy" MULTIPLE>

Domyślnie program wyświetla cztery pozycje z listy, pozwalając ją przewijać. Wybieranie kilku pozycji wymaga trzymania naciśniętego klawisza Ctrl. Rezygnacja z wyboru także wymaga przyciśnięcia Ctrl.

Jeśli chcemy zaznaczyć domyślnie jedną z pozycji, musimy użyć przy niej parametru SELECTED (czyli <OPTION SELECTED> pozycja).

Możemy też zmienić wysokość okienka (długość listy), używając parametru SIZE. Na przykład:

<SELECT SIZE=10>

[hand] TEXTAREA

TEXTAREA jest poleceniem, które pozwala wprowadzić pole dla komentarza czytelnika. Jest to wygodne, gdyż jest w stanie przewidzieć wszystkie możliwości. Można więc zostawić miejsce, które wypełni czytelnik, jeśli uzna, że warto o czymś jeszcze napisać. A często autor wręcz prosi o dodatkowe uwagi.

<TEXTAREA NAME=nazwa> </TEXTAREA> wprowadza standardowe pole o 40 kolumnach i 4 wierszach.

Wpisz swoje uwagi:

Jeśli chcesz, aby pole miało inną wielkość, możesz podać dodatkowe wartości ROWS=x COLS=y. Na przykład:

<TEXTAREA NAME="komentarz" ROWS=10 COLS=50> </TEXTAREA>

Gdybyś podał jakiś tekst między otwierającym i zamykającym znacznikiem TEXTAREA, tekst ten ukazałby się w okienku. Można w ten sposób zasugerować coś czytelnikowi (ale to czasem naprawdę już nieco bezczelność...)

Wpisz swój komentarz na temat tego kursu:

Navigator 2.0 wprowadził interpretację zawijania tekstu (akceptuje to również Internet Explorer 3). Polecenie WRAP=off (domyślne) wyłącza zawijanie. WRAP=physical powoduje zawijanie tekstu w okienku i wysyłanie także tekstu zawiniętego. WRAP=virtual powoduje zawijanie tekstu w okienku, ale wysyłanie długich linii (akapitów) bez zawijania.

[hand] Wysyłanie plików

Specyfikacja HTML przewiduje jeszcze polecenie przesyłania plików, aczkolwiek jest ono w tej chwili źle interpretowane.

Polecenie ma przykładową postać:

<input name="pliczek" type="file">

Wyślij ten plik

W poleceniu definiującym akcję powinno być podane <FORM ENCTYPE="multipart/form-data" ACTION=... >

Niestety, tylko Netscape potrafi wysłać tekstowy załącznik (z polskimi literami są tu jednak kłopoty) w formularzu opracowanym według metody mailto:. Pliki binarne są przetwarzane na "sieczkę". Nie obsługuje tego także mailer Response-O-Matic, który obsługuje ankietę w naszym kursie. Internet Explorer, nawet w najnowszej wersji, nie dołącza plików w ogóle.

I na zakończenie pewna istotna uwaga:

Jeśli ktoś jest ciekaw, jak wygląda przesłany formularz, niech się przyjrzy temu oto dziwolągowi:

Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40&
zaj%EAcie=emerytura&Miejscowo%9C%E6=50-100&komputer=PC+Pentium&system=on&
Przegl%B9darka+WWW=Netscape+Navigator&
Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wy%9Clij

Problem polega na tym, że znaki z formularza są w dość osobliwy sposób konwertowane i docierają częściowo w postaci "krzaków". Wprawdzie da się to odczytać, ale z małymi kłopotami. istnieją jednak programy, które pozwalają odczytać przesyłkę i zaprezentować ją w bardziej ludzkiej formie. Polecałbym szczególnie mailto:Formatter i IndaloPost. Proszę zajrzeć do Windows95.com lub Tucows. A tutaj możesz pobrać maleńki polski programik Formater poczty dla DOS - tylko 9 KB.

Jeśli wolimy, aby odpowiedź przychodziła nie w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, możemy zastosować parametr enctype="text/plain", np:

<form enctype="text/plain" action="mailto:pawel.wimmer@pckurier.pl?subject=Temat ankiety" method="Post">
A oto, co zobaczymy w otrzymanym liście:

Imię i nazwisko=Jan Kowalski
Płeć=mężczyzna
Wiek=31-40
zajęcie=praca
Miejscowość=powyżej 1000
komputer=PC Pentium
system operacyjny=Windows 95
Przeglądarka WWW=Internet Explorer
Przeglądarka WWW=Netscape Navigator
Ocena=bdb
Opinia=Genialne
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
submit=Wyślij do nas informacje

Uwaga: Microsoft Internet Explorer 3 (a także IE4 beta 1) nie dołącza formularza do listu. Potrafi to zrobić Netscape Navigator, a także Interet Explorer 4 beta 2 lub nowszy. Alternatywne rozwiązanie stanowi polski TopNet Mailer, który jest opisany na stronie TopNet Mailer, a także Response-O-Matic, opisany tutaj. Są one oparte na skryptach CGI.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Response-O-Matic

Kłopoty z wysyłaniem formularzy przez wcześniejsze wersje Internet Explorera (2 i 3) skłaniają do stosowania uniwersalnych narzędzi, które będą w stanie przejąć na siebie to zadanie. Przez dłuższy czas takim narzędziem był Toolbox Mailer, który jednak zaprzestał swojej działalności, pozostawiając "na lodzie" wielu użytkowników. Także niektóre inne systemy nie działają idealnie, gdyż albo nie przetwarzają poprawnie całej informacji na stronie (MailForm), albo wymagają specjalnej konfiguracji serwera pocztowego (FormMail).

Dla przeciętnego użytkownika ideałem jest system przetwarzania formularzy, który nie wymaga specjalnych zabiegów, uzyskiwania haseł, kodów itd. Lwia część internautów nie musi stosować specjalnych zabezpieczeń, więc prosty i skuteczny system jest im naprawdę potrzebny, jeśli chcą zamieszczać na swojej stronie ankiety.

Choć rozwiązań jest wiele, pragnę przedstawić prosty w działaniu serwis, wystawiony pro publico bono przez firmę Response-O-Matic (http://www.response-o-matic.com/). Na nim jest w tej chwili oparta ankieta w naszym kursie.

Niezbędne minimum kodu jest zaskakująco małe. Wystarczy bowiem podanie adresu skryptu przetwarzającego formularz, mieszczącego się na serwerze Response-O-Matic, następnie ukryte pole definiujące adres autora formularza, a także dwa jawne pola: dla nazwy/nazwiska oraz adresu pocztowego osoby wypełniającej ankietę. Poza tym w ramach formularza należy, rzecz jasna, zamieścić właściwą treść.

Przykładowa postać formularza:

<FORM>

<FORM action="http://www.response-o-matic.com/cgi-bin/rom.pl" method="POST">

<INPUT TYPE="hidden" NAME="your_email_address" VALUE="p.wimmer@lupus.waw.pl">

<INPUT TYPE="text" NAME="visitor_name" VALUE="" SIZE=60>

<INPUT TYPE="text" NAME="visitor_email_address" VALUE="" SIZE=60>

...

Treść formularza

...

</FORM>

visitor_name i visitor_email_address są nazwami kluczowymi, podobnie jak i nazwy w szeregu innych ukrytych pól, o których powiemy niżej.

Gdybyśmy wysłali tak skonstruowaną ankietę, serwer wyświetli stronę potwierdzającą wysłanie wiadomości i pokaże jej zawartość.

Date: Wednesday, November 26, 1997
Time: 06:09 PM EST

Submitted by: Jan Kowalski (jan.kowalski@firma.com.pl)
Submitted to: (p.wimmer@lupus.waw.pl)

Oprócz tych informacji na stronie ukażą się także dwa bannery reklamowe, co potraktujmy już jako niezbędną rekompensatę za udostępnienie serwisu.

Z kolei autor ankiety otrzyma w poczcie następującą wiadomość

A visitor to your website submitted this form.
============================================================================

Date: Wednesday, November 26, 1997
Time: 06:09 PM EST

Submitted by: Jan Kowalski
Email address: (jan.kowalski@firma.com.pl)

============================================================================
End of submission
Thank you for using RESPONSE-O-MATIC!
http://www.response-o-matic.com

Oprócz pól niezbędnych do poprawnego funkcjonowania formularza, możemy zamieścić szereg dalszych pól, dostarczających dalszej informacji lub formatujących ją.

<input type=hidden name="your_name" value="Jane Smith">

Pole spowoduje wyświetlenie nazwy/nazwiska autora (Jane Smith) w polu Do: (To:) przesyłki pocztowej i na stronie potwierdzającej wysłanie formularza.

<input type=hidden name="email_subject_line" value="Odpowiedź na ankietę">

Pole służy do wyświetlania tematu (Odpowiedź na ankietę) na stronie potwierdzającej i w polu Temat: (Subject:) przesyłki pocztowej.

<input type=hidden name="required_fields" value="visitor_email_address,wiek,płeć,stan cywilny">

Pole służy do określenia, które pola należy wypełnić przed wysłaniem formularza. Autor powinien to wyraźnie zaznaczyć w formularzu, natomiast serwis wyświetli stronę z informacją o błędzie, gdyby któreś z tych przykładowych pól nie zostało wypełnione. Nazwy pól należy rozdzielać przecinkami, a w nazwach pól można stosować spacje.

<input type=hidden name="field_order" value="alphabetical">

Pole spowoduje alfabetyczne posortowanie pól na stronie potwierdzającej i w poczcie.

Alternatywnie możemy wyliczyć kolejność pól:

<input type=hidden name="field_order" value="pole1,pole4,pole2,pole8...">

Użycie tego pola nie jest konieczne - skrypt sam ustali kolejność wyświetlania.

<input type=hidden name="thank_you_title" value="Dziękuję za uwagi!">

Pole służy do wyświetlenia komentarza lub podziękowania za wypełnienie formularza.

<input type=hidden name="return_link_url" value="http://your-domain.com/index.html">

<input type=hidden name="return_link_name" value="Powrót do strony głównej">

Pierwsze pole zawiera adres strony, do której powracamy za pomocą kliknięcia na nazwie odsyłacza w następnym polu. Może to być np. adres strony głównej serwisu.

<input type=hidden name="background_image" value="http://www.your-domain.com/image.gif">

Pole zawiera adres pliku GIF, który może być tłem strony potwierdzającej wysłanie formularza.

<input type=hidden name="background_color" value="#FFFFFF">

W tym polu określamy kolor tła strony, za pomocą wartości heksadecymalnej.

<input type=hidden name="text_color" value="#000000">

<input type=hidden name="link_color" value="#FF0000">

<input type=hidden name="visited_link_color" value="#0000FF">

<input type=hidden name="active_link_color" value="#00FF00">

Cztery kolejne pola definiują kolor tekstu, odsyłaczy, odsyłaczy już odwiedzonych i odsyłaczy aktywnych (w trakcie łączenia) na stronie potwierdzająej wysyłkę.

Możesz od razu sprawdzić działanie formularza:

Imię i nazwisko lub jakikolwiek pseudonim:

Adres poczty elektronicznej:


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

TopNet Mailer

Bydgoska TopNet oferuje do użytku publicznego własny system przetwarzania formularzy, opracowany przez Marcina Ledworowskiego. System ten pozwala w nieskomplikowany sposób ominąć trudności związane z wysyłaniem formularzy z przeglądarki Internet Explorer 2 i 3, będąc uniwersalnym mechanizmem, akceptowanym przez wszystkie przeglądarki interpretujące formularze.

TopNet Mailer ma tę zaletę, że skrypt CGI, który przetwarza formularz, jest położony w kraju i osoba wysyłająca formularz nie jest zależna od ruchu na międzynarodowych łączach, które często są bardzo obciążone.

Konstrukcja formularza jest dość prosta. Jej kluczowe elementy są zawarte w ukrytych polach, odwołujących się do mechanizmu skryptu CGI. Przykładowa postać formularza wygląda następująco (wiersze wytłuszczone):

<form action="http://www.byd.top.pl/cgi-bin/mailform.cgi" method="POST">

Pierwszy wiersz odwołuje się do położenia skryptu na serwerze TopNet i określa metodę (POST).

<input type="hidden" name="includelabel" value="yes">

Drugi wiersz określa, czy poczta, którą otrzyma autor formularza, będzie zawierała opisy pól. Domyślnie jest przyjęta wartość "yes".

<input type="hidden" name="mailto" value="jan.kowalski@firma.com.pl">

Trzeci wiersz określa adres zwrotny, czyli na ogół adres autora ankiety, pragnącego otrzymywać informacje od czytelników.

<input type="hidden" name="mailfrom" value="Jan Kowalski">

Czwarty wiersz zawiera opis przesyłającego formularz (jego znaczenie jest nieco enigmatyczne)

<input type="hidden" name="mailsubject" value="Zamówienie">

Piąty wiersz określa temat przesyłki pocztowej, którą otrzyma autor formularza (treść w polu "temat" lub "subject").

<input type="hidden" name="desturl" value="http://www.firma.com.pl/dziekuje.htm">

Szósty wiersz podaje adres strony, która zostanie wyświetlona osobie wysyłającej. Strona ta zawiera po prostu potwierdzenie wysłania (a najlepiej uprzejme podziękowanie...)

Właściwa treść formularza, czyli po prostu pytania.

<input name="submit" type="SUBMIT" value="Wyślij do nas informacje">

Definicja przycisku wysyłającego ankietę.

<input name="reset" type="RESET" value="Usuń wszystkie informacje">

Definicja przycisku usuwającego wprowadzone już dane.

</form>

Jeśli autorowi formularza zależy na tym, aby pewne pola w formularzu zostały wypełnione, powinien umieścić po ostatniej literze nazwy pola (name) litery RQ - np. input name="Imię i nazwiskoRQ". Jest to skrót od "required", czyli "wymagane". Jeśli osoba wysyłająca formularz nie wypełni ich, serwer przypomni o tym obowiązku.

I przykładowy formularz, wysyłany na fikcyjny adres pocztowy, który obrazuje działanie. Jeśli chcesz sprawdzić, jak wygląda przesyłka pocztowa, przetestuj skrypt z własnymi danymi (będzie to coś w tym rodzaju):

Imie i nazwisko=PW
E-mail=p@w
Komputer=PC Pentium
System operacyjny=Windows 95
Przegladarka WWW=Internet Explorer
Przegladarka WWW=Netscape Navigator
Opinia=ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
submit=Wyślij do nas informacje

Message sent on :  Sat Dec  6 00:54:47 1997

-----------------------------------------

mailform 0.93 beta (C)1997 Marcin Ledworowski mailto:marcinl@top.pl  http://www.byd.top.pl

Sprawdź, jak to działa.

Imię i nazwisko (wymagane)

Adres poczty elektronicznej (wymagane)

Jeśli masz jakieś uwagi, wpisz je tutaj


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Księga gości

Gdy zakładamy stronę w Internecie, oczekujemy zainteresowania dla niej, jakiejś reakcji ze strony czytelników. Nasze pragnienie popularności zaspokajamy licznikiem wizyt, wystawiony adres pocztowy służy do bezpośredniego kontaktu z czytelnikiem, ale brakuje jeszcze zazwyczaj czego pośredniego - mniej anonimowego niż licznik, ale nie zmuszającego do reakcji. Rolę taką pełni księga gości, będąca swoistym pamiętnikiem (starsze pokolenie powiedziałoby z niemiecka "sztambuchem"), w którym znajdziemy opinie, życzenia, krytyki czy postulaty.

Mało jest w Sieci serwisów, które udostępniają ten rodzaj usługi za darmo. Pojawił się jednak serwis firmy Infobank, w którym możemy sobie założyć księgę gości i korzystać z niej do woli. Serwis ten mieści się pod adresem http://www.ib.torun.pl/ksiega/, a autorem obsługujących go skryptów jest Łukasz Skorwider

.

Udaj się więc pod wskazany adres i uważnie przeczytaj zawarte tam informacje, aby nie było żadnych wątpliwości co do zasad zakładania książki - skoro korzystamy z darmowej usługi, tym bardziej powinniśmy honorować wymagania tych, którzą ją nam udostępniają.

Przejdź do bloku Zakładanie księgi i wypełnij formularz:

Imię i nazwisko - chyba wszystko jasne.

Adres e-mail - to oczywiste.

Adres strony WWW - podaj sieciowy adres strony, na której założysz księgę, czyli odsyłacz do niej (sama księga mieści sie na serwerze Infobanku). Jeśli nie używasz ramek, nie ma kłopotu; jeśli je stosujesz, podaj najlepiej adres strony głównej, a nie konkretnej ramki, aby nie było kłopotu z nawigacją.

Nazwa strony WWW - hm..., w zasadzie dowolna, np. Księga Gości Jasia Kowalskiego.

Identyfikator - co najwyżej 8-znakowy identyfikator, który pozwoli odróżnić księgę od innych. Identyfikator pozwoli nam także, wraz z hasłem, modyfikować parametry księgi.

Hasło - to jasne; tylko my powinniśmy mieć dostęp do parametrów księgi.

Hasło - potwierdzenie hasła, gdyby nam się "omsknął" palec.

Przycisk Załóż spowoduje założenie księgi na serwerze i wyświetli ważne informacje, np.:

Twoja księga została założona!
Informacje, które podałeś:
Imię i nazwisko: Pawel Wimmer
E-mail: pawel.wimmer@lupus.waw.pl
Adres strony www: http://www.polbox.pl/lupus/guestbook/guestbook.html
Nazwa strony www: Ksiega Gosci Lupusa
Identyfikator księgi: cośtam
Hasło: cośtam

Umieść na swojej stronie kod:

[<A HREF="http://www.ib.torun.pl/cgi-bin/gbook.cgi?Wlupguest">Księga gości</A>]

Skopiuj podany kod i umieść go na swojej stronie. Gdy czytelnik strony kliknie na odsyłaczu, wejdzie do księgi gości i będzie mógł się dopisać.

Można też użyć podanej nieco niżej postaci kodu, która pozwoli dopisywać się do księgi bez jej oglądania.

A teraz wypróbujmy działanie księgi:

[Księga gości kursu HTML]

I tyle!


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Uwagi ogólne | Struktura kanału | Tworzenie strony wprowadzającej | Budowa pliku CDF

Tworzenie kanału informacyjnego

[hand] Uwagi ogólne

Kanały informacyjne to sposób dostarczania informacji na biurko użytkownika. Kanał jest swego rodzaju biuletynem, składającym się z pewnej liczby stron, do których mamy łatwy dostęp za pomocą funkcji przeglądarki Internet Explorer 4 lub nowszej.

Czytelnik naszego serwisu może zaabonować kanał informacyjny i przeglądać online lub wczytać na dysk i zająć się lekturą po odłączeniu od Internetu, co zmniejsza rachunki telefoniczne. Kanał informacyjny, sporządzony w zaproponowanym przez Microsoft formacie CDF (Channel Definition Format), automatyzuje szereg operacji i podsuwa czytelnikowi gotową informację, która zmienia się w czasie.

Zwróćmy uwagę, że dostarczane razem z IE4 definicje kanałów "platynowych" kryją pod sobą wielką pracę całych zespołów, a Microsoft stawia tej kategorii kanałów duże wymagania (codzienna aktualizacja, użycie dynamicznego HTML).

W Internet Explorerze 5 kanały straciły swoją uprzywilejowaną pozycję na rzecz przeglądania offline - zostały nawet usunięte z paska narzędziowego. Traktujmy je więc jak schyłkową formę przekazu informacji. Bill Gates sam stwierdził, że zainteresowanie użytkowników okazało się znacznie mniejsze niż pierwotnie sądzono. Obecnie można po prostu dołączyć dowolną stronę do listy Ulubionych i zaznaczyć, że chcemy ją także przeglądać offline.

W niniejszym rozdziale przedstawimy sposób sprzygotowania prostego kanału informacyjnego - pamiętajmy cały czas o odmiennym traktowaniu kanałów przez IE4 i IE5.

[hand] Struktura kanału

Kanał informacyjny składa się z trzech istotnych składników: strony wprowadzającej (Default Introduction Web Page), pliku CDF oraz właściwego serwisu informacyjnego.

Strona wprowadzająca, do której odsyłacz powinien się znajdować w prowadzonej przez nas witrynie internetowej, zawiera informacje o kanale informacyjnym oraz odsyłacz do pliku CDF, za pomocą którego czytelnik może dokonać subskrypcji kanału.

nasza witryna === > strona wprowadzająca kanału === > odsyłacz do pliku CDF

Plik CDF jest zwykłym plikiem tekstowym, który redagujemy przy użyciu stosunkowo prostych poleceń (tagów) pochodzących ze specyfikacji Channel Definition Format.

Właściwy serwis informacyjny to po prostu zestaw stron, które będą abonowane przez czytelnika, i które będzie mógł czytać.

[hand] Tworzenie strony wprowadzającej

Strona wprowadzająca jest zwykłą stroną HTML, informującą o zawartości kanału i zawierającą odsyłacz do pliku CDF. Informacja wstępna może być zredagowana w dowolny sposób, natomiast najistotniejszy jest odsyłacz do CDF, pozwalającego zaabonować kanał.

Jeśli mamy gotowy plik CDF a przynajmniej wiemy, jaka będzie jego nazwa), wystarczy dać do niego odsyłacz, np.:

<a href="http://.../plik.cdf">Zaabonuj nasz kanał</a>

Kliknięcie na takim odsyłaczu uruchomi proces subskrypcji, realizowany przez przeglądarkę (IE4).

Sukskrybent kanału może kliknąć na przycisku Dostosuj i określić kolejno:

  • czy pobierać tylko stronę główną, czy też całą zawartość określoną przez kanał
  • ewentualnie zażądać automatycznego powiadamiania o zmianach zawartości kanału
  • czy przyjąć harmonogram aktualizacji określony przez wydawcę (lub inny automatyczny), czy też aktualizować ręcznie

Warto wstawić grafikę zalecaną przez Microsoft (button.gif) i objąć ją odsyłaczem do kanału, np.:

<a href="przysmak.cdf"><img src="button.gif" width=110 height=24 alt="Dodaj kanał 'Przysmaki'" border="0"></a>

Uwaga 1: ponieważ kanały mogą abonować jedynie posiadacze Internet Explorera 4, od wersji Preview Release 2, inni użytkownicy nie mają dostępu do tej funkcji. Gdy posiadacz Navigatora kliknie na takim odsyłaczu, przeglądarka będzie chciała albo otworzyć plik CDF, albo zapisać go na dysku. Aby nie mylić posiadaczy przeglądarek innych niż IE4 Preview 2 lub nowsza, Microsoft zaleca wstawienie specjalnego skryptu, którego przykładowa postać wygląda następująco:

<!--- No CDF Support Redirect --->
<a href="niemasz.html" id="IEAnchor">
<script>
currVer = navigator.appVersion;
startMSIE = currVer.indexOf('MSIE ',0);
endMSIE = currVer.indexOf(';',startMSIE + 5)
if ((startMSIE > 0) && (parseFloat(currVer.substring(startMSIE+5, endMSIE)) >= 4.0) && (currVer.substring(startMSIE+5, endMSIE) != '4.0b1'))
{IEAnchor.href="plik.cdf"}
</script>zaabonuj nasz kanał
</a>
<!--- END No CDF Support Redirect --->

Proszę zwrócić uwagę na wyróżnione czerwonym kolorem elementy:
niemasz.html to nazwa strony, na której zamieścimy informację w rodzaju "przykro mi, nie używasz Internet Explorera 4 Preview 2 lub nowszego"
plik.cdf to nazwa naszego pliku konfiguracyjnego.
Gdy np. posiadacz Navigatora kliknie na odsyłaczu do CDF, zostanie przeniesiony na stronę "niemasz.html".

Oczywiście użycie tego skryptu nie jest obowiązkowe.

Uwaga 2: W Internet Explorerze 5 proces subskrypcji przebiega nieco inaczej. Gdy przeglądarka zapyta, co chcemy zrobić z plikiem, należy go otworzyć z bieżącej lokalizacji i w okienku Ulubione dodać do listy kanałów lub jakiegokolwiek innego foldera.

[hand] Budowa pliku CDF

Jak wspomniano wyżej, plik CDF jest plikiem tekstowym, który można utworzyć w najprostszym edytorze tekstów. Warto jednak korzystać z wyspecjalizowanych narzędzi - wspomaganie kanałów informacyjnych zawierają m.in. FrontPage 98, Tiger95 i szereg innych edytorów. Pojawiły się także odrębne kreatory plików CDF.

Przyjrzyjmy się budowie pliku konfiguracyjnego CDF dla przykładowego serwisu "Przysmaki", prowadzonego przez wyimaginowaną firmę PetLovers S.A.

<?XML VERSION="1.0" ENCODING="windows-1250" ?>

Deklaracja języka XML (Extensible Markup Language), na którym jest oparty format CDF.

<CHANNEL

Otwarcie pliku konfiguracyjnego, a tym samym kanału.

HREF="http://www.pckurier.pl/html/kanal/przysmak.htm"
BASE="http://www.pckurier.pl/html/kanal/"
SELF="http://www.pckurier.pl/html/kanal/przysmak.cdf">

Pierwszy wiersz informuje o adresie strony wprowadzającej kanału. Drugi wiersz podaje punkt bazowy dla wszystkich dokumentów - zazwyczaj jest nim adres całej witryny internetowej lub folderu z kanałem. Trzeci wiersz podaje adres pliku konfiguracyjnego CDF. Zwróćmy uwagę, że podawane są adresy absolutne plików (pełne adresy internetowe).

<TITLE>Przysmaki dla naszych zwierzaków</TITLE>

Tytuł kanału, który będzie widoczny jako opis na liście kanałów (gdy klikniemy na przycisku Kanały w przeglądarce) i jako taki sam opis kanału w folderze Ulubione - Kanały, a także jako dymkowa pomoc nad ikoną kanału w Channel Bar na pulpicie Windows 95.

<LOGO HREF="http://www.pckurier.pl/html/kanal/80x32.gif" STYLE="IMAGE" />

Adres obrazka GIF, który będzie ikoną kanału, widoczną w pasku z kanałami (Channel Bar) na pulpicie. Ikona powinna mieć 80 pikseli szerokości i 32 piksele wysokości. Jeśli nie podamy żadnej ikony, zastosowana zostanie domyślna ikona przeglądarki.

<LOGO HREF="http://www.pckurier.pl/html/kanal/194x32.gif" STYLE="IMAGE-WIDE" />

Adres obrazka GIF, który będzie ikoną kanału, widoczną w pasku z kanałami w przeglądarce, gdy przesuniemy kursor myszki nad dany kanał. Ikona powinna mieć 194 pikseli szerokości i 32 piksele wysokości. Jeśli nie podamy żadnej ikony, zastosowana zostanie domyślna ikona przeglądarki.

Możemy jeszcze zastosować ikonę o wymiarach 16x16, która będzie widoczna przy nazwie kanału w folderze Ulubione - Kanały.

<LOGO HREF="http://www.pckurier.pl/html/kanal/16x16.ico" STYLE="ICON" />

<ABSTRACT>Nasza firma prezentuje najlepszą karmę dla psów i kotów.</ABSTRACT>

Krótki opis zawartości kanału (jedno-dwa zdania).

<SCHEDULE>
<INTERVALTIME DAY="7"/>
<EARLIESTTIME HOUR="02" />
<LATESTTIME HOUR="06" />
</SCHEDULE>

Terminarz aktualizacji, w którym INTERVALTIME określa "rytm" przesyłania danych do użytkownika. Jeśli pominiemy ten blok, przeglądarka przyjmie domyślny.

EARLIESTTIME i LATESTTIME określają przedział czasowy dla automatycznej aktualizacji - zazwyczaj wybieramy czas najmniejszego ruchu w Sieci, aby aktualizacja przebiegła najszybciej.

<ITEM HREF="http://www.pckurier.pl/html/kanal/psy.htm" Precache="Yes">
<TITLE>przysmaki dla psów</TITLE>
<ABSTRACT>naprawdę świetne żarcie dla psów</ABSTRACT>
<LOGO HREF="http://www.pckurier.pl/html/kanal/16x16.ico" STYLE="ICON" /> </ITEM>

Definicja pierwszej strony właściwego serwisu informacyjnego - ITEM. Adres internetowy podaje położenie strony. Parametr Precache="Yes" nakazuje cache'ować zawartość strony. TITLE oznacza tytuł, który ukaże się po rozwinięciu zawartości kanału w pasku kanałów. ABSTRACT określa treść "dymkowej" pomocy, widocznej po przesunięciu kursora nad tytuł strony. LOGO definiuje adres ikonki o wymiarach 16x16 pikseli, towarzyszącej tej akurat stronie w kanale.

Analogiczne definicje pozostałych stron serwisu informacyjnego.

</CHANNEL>

Zamknięcie pliku konfiguracyjnego, a tym samym kanału.

Oczywiście specyfikacja CDF jest znacznie obszerniejsza i obejmuje kilkadziesiąt poleceń i atrybutów. Tutaj podajemy tylko kilka z nich. Pełna specyfikacja znajduje się na stronie Microsoftu, w części SiteBuilder. Można także skorzystać z pliku pomocy edytora Tiger95.

Dla zabawy można teraz dokonać subskrypcji naszego przykładowego "zwierzęcego" kanału (można go potem łatwo usunąć).


JavaScript-Intro by Voodoo

WPROWADZENIE DO JAVASCRIPT

© 1996 by Stefan Koch - All rights reserved.
Tłumaczenie: Paweł Wimmer & Włodzimierz Wypych
Ta sama strona bez obrazków i tabel...

Część 1:
  • Co to jest JavaScript?
  • Uruchamianie skryptów JavaScript
  • Zagnieżdżanie skryptów w dokumentach HTML
  • Pierwsza funkcja
  • Elementy formularzy
  • Ostatnia aktualizacja - data

Część 4:
  • Wiersz statusu
  • Funkcja setTimeout
  • Programowanie scrollera

Część 2:
  • Funkcja onMouseOver - właściwości
  • Więcej o funkcjach daty
  • Liczby losowe
  • Tworzenie okien

Część 5:
  • Tablice
  • Jak usunąć dokument?
  • Przyciski Back i Forward

Część 7:
  • Kontrola formularzy
  • Przesyłanie informacji z formularza
  • Jak położyć akcent na elemencie

Część 3:
  • Praca z ramkami

Część 6:
  • Ładowanie dwóch ramek jednym kliknięciem
  • Otwieranie nowego okna po kliknięciu na odsyłaczu
  • Operatory

You found this page at http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm

Stefan's Home - e-Mail


Przydatne skrypty

Sorry, tylko ramki! Ale tutaj jest spis tre¶ci.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Edytory HTML | Programy specjalizowane | Przeglądarki WWW | Programy graficzne | Programy sprawdzające poprawność składni | Inne narzędzia

Kilka słów o narzędziach

aktualizacja: 21 kwietnia 1999

Praca nad dokumentem HTML wymaga używania różnych narzędzi, które można podzielić umownie na kilka klas.

Polecam regularne śledzenie opisów narzędzi internetowych na stronach naszego wydawnictwa. Strona Narzędzia internetowe gromadzi opisy, które są jednocześnie publikowane w kolejnych numerach dwutygodnika PCkurier.

Edytory HTML

Wprawdzie dokument można zredagować w najprostszym edytorze tekstów, wymagałoby to jednak ręcznego wprowadzania wszystkich kodów, co jest dość uciążliwe i naraża na ryzyko popełniania błędów składniowych. Lepiej jest więc skorzystać z bogatej oferty wyspecjalizowanych edytorów HTML.

Edytory HTML można podzielić umownie na trzy klasy: edytory tekstowe, edytory graficzne i edytory "klockowe".

Przykładem tego ostatniego jest komercyjny program Home Page Author, wchodzący w skład pakietu Internet Mania, firmy Corel, który pozwala wstawiać do dokumentu bloki informacji. Ostateczny efekt widzimy w przeglądarce, nie mamy natomiast bezpośrednio do czynienia z samym dokumentem HTML, który jest tworzony automatycznie "w tle". Jest to łatwy i przyjemny w działaniu program, aczkolwiek nie nadaje się on do tworzenia bardziej skomplikowanych dokumentów i jest już mocno przestarzały. Wspominamy o nim jedynie jako o przykładzie pewnej podkategorii oprogramowania.

Pojawiły się polskie generatory do tworzenia stron HTML - darmowy Pajączek, autorstwa Rafała Płatka, jest dostępny w wersji 1.x dla Windows 3.1 i 3.x (Light) dla Windows 95/98. Filozofią pracy nieco przypomina Home Page Author. Ma nieco mniejszy potencjał niż jego corelowski konkurent, ale jest po polsku i ma możliwość zapisywania dokumentu w standardzie CP 1250 lub ISO-8859-2, z automatycznym zaznaczeniem strony kodowej w nagłówku - META. Ma on charakter kreatora, który zawiera ograniczoną liczbę funkcji, choć dodatkowe kody można wstawić do dokumentu ręcznie. Wersja 3 Light zawiera wbudowane narzędzie FTP do posyłania plików na serwer, a także opis zakładania stron w darmowych serwisach Polbox-Free i Optimus-Friko. Pajączek Light jest także dołączany do najnowszej wersji profesjonalnego Pajączek 2000. Program ten jest sympatycznym wstępem do amatorskiego webmasterstwa, ale nie za bardzo nadaje się do systematycznej pracy.

Mianem edytorów tekstowych określamy programy, które pozwalają pracować bezpośrednio z kodami HTML. Choć działają w środowisku graficznym, wyświetlają jedynie tekst dokumentu i kody sterujące.

Edytory tekstowe oferują bardzo zróżnicowane możliwości. Wśród przynajmniej setki programów dla Windows 3.x i Windows 95 znajdziemy pakiety liczące 100-200 KB, jak i potężne wielomegabajtowe "kombajny", zawierające wszystkie możliwe instrumenty.

Z codziennej praktyki wypływa pewien istotny wniosek, który poddaję pod uwagę autorom stron. Do pracy warto dysponować przynajmniej dwoma programami - dużym, zaawansowanym edytorem do tworzenia skomplikowanych konstrukcyjnie stron, oraz małym, szybkim edytorem do wprowadzania doraźnych poprawek i aktualizacji. Duży program pozwoli stosunkowo łatwo skonstruować cały zespół stron, jego niewielki "pomagier" natomiast posłuży do drobnych, bieżących uzupełnień, zwalniając od konieczności ładowania potężnego instrumentarium podstawowego edytora. Oczywiście to tylko sugestia - nic nie stoi na przeszkodzie, aby ograniczyć się do podstawowego programu.

Za najbardziej zaawansowane edytory, oferujące najwięcej narzędzi, a zarazem szczególnie przydatne dla polskiego użytkownika, można uznać programy:

  • Pajączek 2000 dla Windows 95/98
  • Tiger98 dla Windows 95/98
  • HomeSite 2.5, 3 i 4 dla Windows 95/98 (istnieje też darmowa wersja 1.2)
  • HotDog 2.x dla Windows 3.1 i Windows 95 oraz 3.x, 4.x i 5.x dla Windows 95/98

Wśród zachodnich programów na szczególną uwagę zasługuje bardzo nowocześnie zaprojektowany HomeSite, który obsługuje najnowsze rozszerzenia, jest zintegrowany z narzędziami zewnętrznymi (analizator składni CSE HTML Validator i HTML Reference Library) i jest niezwykle ergonomiczny, wynosząc tę cenną cechę na niedoścignione dla konkurencji szczyty. Pozwala szybciej i wygodniej tworzyć pojedyncze dokumenty i całe ich kompleksy (tzw. projekty). Jest to bez wątpienia jeden z najdoskonalszych programów tej klasy na rynku. Początkowo program był oferowany bezpłatnie, ale cieszył się tak ogromnym powodzeniem (najchętniej obecnie kopiowany edytor), że autor postanowił zdyskontować sukces wyznaczeniem opłaty (już dość sporej - co najmniej 80 USD) za shareware'owe wersję od 2.x do 4.x.

HotDog był w pewnym momencie najpotężniejszym edytorem pracującym w trybie tekstowym - dotyczyło to wersji 3.x, która jest dość powolna, ale konfigurowalna i bardzo silna. Wersja 4.x została całkowicie przebudowana i oferuje umiarkowaną funkcjonalność w wersji podstawowej, natomiast można zakupić szereg dodatkowych narzędzi wspomagających. Wersja 5 została ponownie przebudowana, aczkolwiek jest bezpośrednim kontynuatorem wersji 4. Z kolei w wersji 5.5 (dostępna jest też samodzielna odsłona, bez dodatków) autorzy skupili się na dołożeniu szeregu drobnych funkcji i przyspieszeniu działania. HotDog jest dobrym wyborem dla webmasterów tworzących na swoich stronach tzw. bajery.

Inne silne narzędzia produkcji zachodniej to:

  • WebEdit 2.x dla Windows 3.1 i 3.0 dla Windows 95
  • HotMetal 2 i 3 dla Windows 3.1
  • ReVol WebWorker 1.3 dla Windows 95
  • Aardvark Pro 1.1 dla Windows 95 i 2.4 dla Windows 3.1
  • Enhanced HTML 2.4 dla Windows 95
  • Hippie 97 dla Windows 95
  • WebWeaver dla Windows 95
  • SpiderPad dla Windows 95
  • FlexED dla Windows 95 i Windows 95

Na osobną uwagę zasługują polskie edytory. Silnym i zaawansowanym narzędziem jest shareware'owy Pajączek 2.1 dla Windows 3.1, który można zaliczyć do rzędu dziesięciu najmocniejszych edytorów w środowisku 16-bitowych Windows (warto powiedzieć, że Pajączek został w grudniu 1997 uhonorowany tytułem Produkt Roku, przyznawanym przez dwutygodnik PCkurier.) Obszerny opis funkcji edytora można przeczytać w tym miejscu. Pajączek 2.1 jest dostępny w tej chwili za darmo i był rozprowadzany z czasopismami komputerowymi (miesięcznik Enter - numer 4'99 - dostarczył go ze zaktualizowanym kursem HTML i krótkim kursem obsługi dla początkujących). 31 października 1998 roku pokazała się całkiem przebudowana wersja Pajączek 2000 Professional dla Windows 95/98. Edytor dysponuje bardzo obszernym instrumentarium, jest konfigurowalny, a integracja z narzędziami językowymi MS Office pozwala wykorzystać słownik ortograficzny do kontroli poprawności językowej. Współpracuje też bezpośrednio z edytorem Skryba (także autorstwa Rafała Płatka), najlepszym obecnie shareware'owym edytorem skryptów na świecie.

Autor: Rafał Płatek, Cream Software

Bezpośrednim konkurentem Pajączka jest Tiger98, którego opis znajdzie Czytelnik na stronie PCkuriera.. Tygrys, podobnie jak Pajączek, jest obecnie jednym z najmocniejszych narzędziowo edytorów na świecie, o dobrej ergonomii i szybkości działania, przystosowaniu do polskich warunków językowych (m.in. własny słownik ortograficzny). Zawiera obsługę nowoczesnych standardów i wspomaga pracę za pomocą licznych kreatorów. Najnowsza (kwiecień 1999) wersja, czyli 1.0.6, współpracuje już ze słownikiem MS Office, podobnie jak Pajączek 2000. Zawiera także wbudowane narzędzie do kontroli poprawności kodu HTML i wspomaganie budowy skryptów.

Autor: Jacek Szarapa, Vega

Oba polskie programy są w zasadzie równoważne narzędziowo, a wybór jest głównie kwestią osobistego gustu - każdy z nich zawiera jakieś swoje specjalności, które mogą odpowiadać użytkownikowi. Oba programy można skopiować w wersjach demonstracyjnych i zapoznać się z ich zaletami, zanim podejmie się decyzję o wyborze.

Niezłym, choć prostym narzędziem jest także darmowy Hedit 1.1, Sławomira Andryka i Witolda Ciżmowskiego, dla środowiska Windows 95, którego opis znajduje się tutaj. Dostępna jest już także znacznie rozbudowana wersja shareware'owa Hedit 2.0, która jest dostarczana na dysku kompaktowym, razem z obszernym materiałem referencyjnym.

Pojawiły się na rynku także inne polskie edytory, zaspokajające z powodzeniem podstawowe potrzeby webmastera - shareware'owy HTML-owiec, Piotra Szczepanika, oraz freeware'owe WebPager Xpress, Dawida Lorenza i ezHTML Pawła Przewłockiego.

Osobiście polecam używanie polskich programów, gdyż najlepiej odpowiadają naszym specyficznym potrzebom, zwłaszcza językowym. Siła narzędzi czołowych polskich programów jest wystarczająca, żeby zrezygnować z amerykańskich programów.

Do małych edytorów, wygodnych w codziennym użyciu, można zaliczyć np. HTMLed, DiDa, HTMLpad, CMED, WebDesigner, DerekWare HTML Author, HTML Notepad. Oczywiście jest ich znacznie więcej i każdy powinien wybrać coś stosownego dla siebie. Przede wszystkim warto przejrzeć internetowe serwisy shareware'owe, gdzie kilka razy w tygodniu pojawiają się nowości, a w archiwach znajdziemy mnóstwo całkiem dobrych programów.

Jakimi cechami powinien dysponować dobry edytor HTML?

Codzienna praktyka pokazuje, że przede wszystkim powinien dysponować obfitością skrótów klawiszowych. Bogato są w nie wyposażone takie programy, jak HomeSite, Pajączek czy Tiger98. Jest to cenna cecha, gdyż w edytorze pracujemy przede wszystkim w trybie "tekstowym" (podobnie jak w Notatniku-Notepadzie w Windows) i znacznie wygodniej jest korzystać ze skrótów niż nieustannie sięgać do myszki. Tiger98, Pajączek i HomeSite zawierają nawet możliwość przedefiniowania skrótów, co pozwala je dostosować do własnych upodobań.

Dla polskiego użytkownika istotną cechą jest dostosowanie do polskich warunków językowych. Oba polskie programy sprawują się tutaj bardzo dobrze, a Pajączek, Tiger i HTML-owiec pozwalają dodatkowo wykorzystać słownik Worda. HomeSite także to potrafi, ale przez brak automatycznej konwersji znaków nie mogą z tej funkcji skorzystać osoby piszące w standardzie kodowania ISO-8859-2. Ważne jest także wprowadzanie polskich znaków - polskie programy pozwalają już pisać z użyciem normalnej klawiatury Windows, a następnie automatycznie konwertują znaki zgodnie z zadeklarowaną w dokumencie stroną kodową.

Kolejną pożądaną cechą dobrego edytora (mówimy tutaj o dużych programach) powinna być obfitość funkcji. Byłoby dobrze, aby program obsługiwał wszystkie funkcje wchodzące w zakres przyjętego w grudniu 1997 kanonu HTML 4.0, a więc pozwalał tworzyć tabele, formularze, ramki, wspomagał definiowanie czcionek i barw, pomagał tworzyć mapy odsyłaczy na grafikach, ułatwiał wprowadzanie skryptów i apletów, a ostatnio także stylów i ActiveX. Niektóre edytory są nawet dostarczane z gotowymi skryptami (WebEtch, WebEdit, HomeSite, Pajączek, Tiger98, HotDog) i apletami.

Coraz więcej programów dysponuje kreatorami (Wizard) poszczególnych funkcji, a niektóre składniki dokumentu można wprowadzać w trybie graficznym, np. definiować ramki czy budować tabele. Czołowe polskie edytory zawierają obszerne zestawy kreatorów.

Jeszcze jedną cechą dobrego edytora jest jego konfigurowalność i otwartość. Konfigurowalność pozwala dostosowywać środowisko pracy do swoich wymagań (np. czcionka w edytorze, domyślna przeglądarka do podglądu strony, ścieżki dostępu dla różnych typów plików itd.). Otwartość pozwala z kolei definiować swoje własne znaczniki (tzw. custom tags). Dzięki niej możemy samodzielnie uzupełniać funkcje edytora o polecenia, których sam nie zawiera, albo budować gotowe, skonkretyzowane polecenia, np. adres poczty elektronicznej autora, konkretny styl, często używany adres pewnej strony w Internecie, jakaś specyficzna kombinacja polecenia i jego parametrów). Wszystkie zaawansowane edytory pozwalają na większą czy mniejszą inwencję właściciela.

Niektóre programy (WebEdit, ReVol WebWorker, HomeSite, HotDog, Tiger98, Pajączek 2000) dysponują wbudowanym podglądem graficznym dokumentu, który pozwala szybko kontrolować postać strony. Nowością jest stosowanie w charakterze podglądu tzw. obiektu Internet Explorera. Funkcją tą dysponują HotDog, HomeSite, Tiger98, Pajączek 2000. Można też korzystać z pracującej w tle przeglądarki WWW.

Na zakończenie tej części warto wspomnieć o edytorach HTML, które pracują w trybie graficznym.

Popularnym, choć dość prostym narzędziem jest Internet Assistant dla Worda 6 (Windows 3.x) i Worda dla Windows 95/98. Użytkownik Worda może zredagować swój dokument w edytorze w taki sam sposób, jak każdy plik .DOC, a następnie, za pomocą Assistanta, wyeksportować go do postaci HTML. Wszystkie kody HTML są generowane automatycznie. Zaletą posiadania Internet Assistanta jest fakt, że możemy dokonywać edycji strony wczytanej do Internet Explorera - po wybraniu funkcji edycja zostaje uruchomiony Word i Internet Assistant. Dobre narzędzia do edycji dokumentów HTML zaprezentował Word 97. Z kolei Word 2000 (jak i pozostałe aplikacje Office 2000) zapisują dokumenty HTML z użyciem języka XML - nie są to już proste i przejrzyste dokumenty, jak w poprzednich wersjach, ale i możliwości są tutaj znacznie większe, a obsługa łatwiejsza.

Dobrym narzędziem jest Internet Publisher dla edytora WordPerfect, zawarty w Corel WordPerfect Suite 8, który w najnowszej wersji potrafi (wreszcie) uwzględniać polskie znaki. Warto podkreślić, że WordPerfect jest obecnie najlepszym narzędziem do publikowania prac naukowych w Internecie, gdyż znacznie lepiej niż jego konkurenci przenosi do postaci hipertekstowej zastosowane w takiej pracy elementy referencyjne (spisy treści, skorowidze, odsyłacze itd.). Dla naukowca jest to bardzo dobry wybór, który pozwoli do maksimum wykorzystać zbudowany w edytorze aparat naukowy dokumentu. Zainteresowane osoby odsyłam do podręcznika online - "Corel WordPerfect 8 - narzędzie dla uczonego" - znajdującego się na stronach PCkuriera. Można się tam zapoznać nie tylko z technikami tworzenia prac naukowych, ale i generowania z nich dokumentów HTML. WordPerfect 2000 zawiera jeszcze wygodniejsze narzędzia webmasterskie.

Bardzo popularnym narzędziem jest FrontPage (nabytek Microsoftu, przejęty wraz z firmą Vermeer Technologies), który jest zresztą znacznie dalej sięgającym kombajnem do utrzymywania całego systemu stron WWW. Edytor pracuje w trybie graficznym, oferując zintegrowany system do tworzenia całych witryn. Pozwala tworzyć dynamiczne, nowocześnie skonstruowane strony i jest wspomagany przez programy graficzne MS Image Composer i MS GIF Animator. FrontPage 2000 jest z kolei bezpośrednim kontynuatorem FrontPage'a 98 - dokonany został w nim znaczny postęp, zarówno w narzędziach, jak też w organizacji programu i ergonomii pracy. Zdeklarowani zwolennicy tego programu koniecznie powinni dokonać upgrade'u do wersji 2000.

Polskiego użytkownika powinien zainteresować edytor FrontPage Express (okrojona wersja FrontPage'a), który jest dostarczany razem z pakietem Internet Explorer. Jest całkowicie spolszczony i uwzględnia strony kodowe. Jest to dobre narzędzie dla tych, którzy nie mają czasu na naukę języka HTML (analogicznym narzędziem firmy Netscape jest Composer).

Dobrym produktem jest Corel WEB.DESIGNER (wersja z pakietu Corel Web Graphics Suite), który oferuje sporo narzędzi i jest wspomagany szeregiem dodatkowych programów do tworzenia grafiki, animacji itd., a także zawiera ogromny zbiór 8 tys. gotowych grafik GIF i JPEG, do wykorzystania na stronach. Jest to wydajne i wszechstronnym narzędziem, aczkolwiek należy pamiętać, że jest to produkt komercyjny.

W marcu 1997 pojawił się potężny Corel WebMaster Suite, który zawiera znacznie ulepszony edytor, wspomagany przez niezwykle rozbudowane instrumentarium graficzne - wszystkie programy z GRAPHICS.SUITE oraz PhotoPaint, SiteManager i WebData. To jeden z najbardziej wszechstronnych pakietów graficznych do budowania i zarządzania serwisem internetowym. Poprawiony WebDesigner potrafi budować ramki. Wielką zaletą jego modułu SiteManager jest przenoszenie całych zestawów stron w inne miejsce na serwerze, z automatycznym przepisaniem wszystkich odwołań (z drobnymi wyjątkami wiążącymi się z użyciem stylów). Niestety, na razie nie jest zapowiadana aktualizacja programu, który wyraźnie się już zestarzał.

Bardzo oryginalnym pakietem do tworzenia całych witryn jest NetObjects Fusion, który zawiera najwygodniejsze narzędzia do tworzenia elementów strony i pozwala bardzo precyzyjnie umieszczać obiekty w dowolnym miejscu strony. Program zawiera rozbudowane kreatory i oryginalne narzędzia graficzne. Najnowsza wersja NOF 4 pozwala wreszcie bez kłopotu wprowadzać polskie znaki i zapisywać je w wybranym standardzie kodowania. Cały pakiet NOF jest potężnym kompleksem narzędzi do tworzenia skomplikowanych witryn, łącznie z handlem elektronicznym - zestaw ten daleko wykracza poza sam edytor i jest w zasadzie równoważny webmasterskiemu kombajnowi Microsoftu, w którym FrontPage jest też tylko jednym z elementów.

Wielu użytkowników skorzysta zapewne z edytora wbudowanego w Netscape Navigatora (w wersji Gold) lub Netscape Communicatora. Jest to raczej prosty program, ale wielu osobom wystarczy w ich pracy. Za to można polecać najnowszy edytor Netscape Composer, w pakiecie Netscape Communicator 4, który także jest edytorem poziomu elementarnego, ale potrafi uwzględniać stronę kodową dokumentu. Osoby lubiące polskojęzyczne programy docenią na pewno Kompozytora, czyli po prostu polską wersję Composera, zawartą w spolszczonym ostatnio zestawie Netscape'a - Sylaba Komunikator 4.5 PL.

W sieci jest także dostępny darmowy AOL Press, zaawansowany i dobrze zintegrowany z Internetem edytor America Online, pracujący w trybie graficznym. Autorzy przygotowali wersje dla Windows 3.x, Windows 95/NT i Macintosha. Z kolei komercyjny Claris HomePage 3 jest edytorem dość silnym, ale polski użytkownik będzie miał kłopoty z przystosowaniem go do polskich warunków.

Wybór między edytorami graficznymi i tekstowymi jest dość trudny. Edytory graficzne osiągnęły już znaczny stopień zaawansowania, a ich zaletą są dobre narzędzia do budowania całych witryn - szczególnie bryluje tutaj oprogramowanie Microsoftu i NetObjects. Edytory tekstowe dają z kolei znacznie lepszą kontrolę kodu źródłowego, a tworzony przez nie kod jest bardziej klarowny.

Programy specjalizowane

Do dyspozycji mamy nie tylko edytory HTML ogólnego użytku, ale i wiele wyspecjalizowanych narzędzi skupiających się na wybranych funkcjach.

I znowu, ze względu na popularność Microsoft Office, warto zwrócić uwagę na Internet Assistanta dla arkusza kalkulacyjnego Excel. Jest to biblioteka, która integruje się z Excelem i pozwala wyeksportować cały arkusz lub zaznaczony fragment do postaci HTML. Jest to po prostu proces generowania tabeli, efektywny i szybki w działaniu, jednakże po jego zakończeniu warto jeszcze dokonać drobnego ręcznego retuszu dokumentu. Gdy w pracy liczy się czas, a musimy dokonać transformacji obszernych danych tabelarycznych, nakładka na Excela sprawdza się doskonale. Excel 2000 wykorzystuje już przy eksporcie język XML.

Podobne narzędzie jest dostępne w arkuszu Quattro Pro Corela, choć i tutaj pojawiają się podobne kłopoty, jak w przypadku Internet Publishera. Także i pakiety grafiki prezentacyjnej w obu konkurujących zestawach Microsoftu i Corela potrafią zamieniać prezentacje na zespoły stron WWW.

Przykładowo, Corel Presentations 8, zawarte w pakiecie Corel Office Professional (istnieje także w wersji Standard), ma możność eksportowania prezentacji do kilku wyspecjalizowanych formatów. Gdy wybierzemy HTML, program dokonuje automatycznej konwersji poszczególnych stron do postaci HTML, łącznie z eksportem grafiki do formatu GIF. Można w ten sposób automatycznie (i bardzo szybko) utworzyć zespół powiązanych ze sobą stron, które wystarczy już tylko posłać na serwer WWW. Efekt jest bardzo dobry, a program bezbłędnie wiąże ze sobą wszystkie elementy prezentacji. Ciekawostką jest technika Corel Barista, dostępna w różnych programach Corela (także najnowsze zestawy typu Suite), pozwalająca budować strony oparte na technice języka Java.

Efektowne zestawy stron prezentacyjnych można budować za pomocą PowerPoint 2000 - zarówno dedykowane dla przeglądarki Internet Explorer, jak i bardziej uniwersalne, choć już wtedy mniej zaawansowane technicznie. Godna uwagi jest łatwość, z jaką najnowsze programy grafiki prezentacyjnej kompilują strony WWW - PowerPoint jest tutaj szczególnie dobrym przykładem.

Wyspecjalizowanym narzędziem jest Corel WEB.DATA dla Windows 95, który bardzo szybko i skutecznie zamienia na dokumenty WWW arkusze kalkulacyjne i bazy danych w wielu popularnych formatach. Dla osób i firm, które prezentują w Internecie bazy danych, jest to dobry wybór.

Wśród firm wyspecjalizowanych w dostarczaniu programów dla Internetu wyróżnia się Sausage Software, która jest twórcą bardzo silnego edytora HotDog. Oprócz edytora dostępne są programy do tworzenia specjalnych elementów. Program Flash generuje skrypty Javy, Clickette tworzy animowane przyciski, CrossEye potrafi budować mapy odsyłaczy internetowych na grafikach, FrameGang ułatwia tworzenie ramek. W Internecie są dostępne 15-30-dniowe, w pełni funkcjonalne wersje demonstracyjne tych programów. Wszystkie te programy zostały także zintegrowane z edytorem Hot Dog 3 - 5.

Pojawiło się kilka specjalnych programów do definiowania szesnastkowych wartości kolorów tła dokumentu i odsyłaczy. W niektórych zastosowano suwaki, pozwalające płynnie zmieniać wartości. Potem wystarczy już tylko kliknięciem skopiować kod do schowka i wstawić go do dokumentu. Za najlepszy (a w każdym razie jeden z najlepszych) program można uznać Color Wizard, dostarczany w ramach programu HTML Reference Library, gdyż oferuje najwięcej narzędzi i uwzględnia wymogi stylów. HTML Reference Library (wersja 3) dla Windows 3.1 i Windows 95, autorstwa Stephena Le Hunte, to nieodzowny instrument dla każdego bardziej ambitnego autora stron WWW. Jest to plik pomocy (Help), zawierający bardzo przystępny wykład języka HTML 3.2 (oczywiście w języku angielskim), ilustrowany przykładami użycia. Oczywiście także i ten program jest dostępny w Internecie, a w dodatku jest oferowany bezpłatnie. Najnowsza wersja tej pomocy jest wbudowana w edytor HomeSite 3 i 4.

Można również polecać śledzenie w Internecie macierzystych stron producentów oprogramowania internetowego, którzy zamieszczają tam materiały szkoleniowe (np. Netscape i Microsoft), organizacji World Wide Web Consortium, a także wielu innych serwisów, których nie sposób tu wymienić.

To tylko krótki przegląd ciekawego oprogramowania internetowego, uświadamiający istnienie wielu programów pomocniczych, które mogą się przydać przy tworzeniu stron. Warto także uważnie śledzić serwisy shareware'owe, gdyż programy takie pojawiają się niemal codziennie. Ci, którzy nie mają jeszcze dostępu do Internetu, niech poszukają innych możliwości zdobywania programów, które są często dostępne na dyskietkach i dyskach kompaktowych, zwłaszcza z czasopismami komputerowymi.

Przeglądarki WWW

Przez wiele lat na rynku dominowały tradycyjne przeglądarki graficzne wśród których standardem był program NCSA Mosaic. Obecnie walka o prymat bardzo się zaostrzyła i w zasadzie pozostały na placu boju dwa podstawowe standardy - Netscape Navigator/Communicator i Microsoft Internet Explorer, oba w wersjach dla Windows 3.1 i Windows 95/98. Pozostałe produkty bardzo wyraźnie odbiegają swym możliwościami od tych programów. Choć Navigator nieco ustępuje obecnie możliwościami Internet Explorerowi, jego przewagą jest dostępność na wielu platformach systemowych. W połowie marca 1999 była dostępna finalna wersja 4.5 Navigatora, 5.0 Internet Explorera (anglojęzyczna) i 4.01 Internet Explorera (polskojęzyczna). IE 5 PL został zapowiedziany na połowę 1999 roku.

W tej chwili zaimplementowano już standard języka HTML 3.2 i w znacznej części 4.0. Pierwszy był tutaj Internet Explorer i on właśnie dysponuje największymi możliwościami (zwłaszcza implementacja języków CSS i XML), aczkolwiek nie należy oczekiwać, że Netscape zrezygnuje z walki. Dotychczasowa przewaga Navigatora znacznie zmalała i rynek został podzielony po połowie między obu konkurentów. Navigator jest dostępny dla kilkunastu różnych platform, Internet Explorer natomiast obsługuje kilka (także dla Unixa, co można interpretować jako chęć przejęcia części rynku w konkurencyjnym systemie operacyjnym), więc praktycznie wszyscy zainteresowani mogą się zaopatrzyć w co najmniej jeden z dwóch najlepszych programów tej klasy.

Przeglądarki są bezpłatne dla osób indywidualnych i można zalecać zainstalowanie obu programów. Autorzy stron powinni zresztą dysponować kilkoma programami, za pomocą których będą sprawdzać praktyczne działanie swoich stron. Jest to konieczne w trakcie redagowania dokumentu, gdyż na bieżąco możemy się zorientować, jaki jest rzeczywisty efekt naszych starań - niektóre edytory HTML dysponują wbudowanym podglądem graficznym, korzystającym z funkcjonalności Internet Explorera, więc program Microsoftu warto mieć na podorędziu, nawet gdy się używa na stałe Navigatora.

Warto jeszcze wspomnieć, że pewną popularność zdobyła norweska przeglądarka Opera, która obsługuje standard HTML 3.2 i w sporej części 4.0. Jej zaletą jest duża szybkość działania i małe wymagania systemowe, a polskiego użytkownika zainteresuje zapewne fakt, że dostępna jest polska nakładka na ten program. Niestety, Opera kosztuje 30 USD.

Programy graficzne

Programy graficzne są przydatnym uzupełnieniem, gdy zamierzamy wstawiać na nasze strony grafikę. Wprawdzie nie są absolutnie konieczne, gdyż możemy skorzystać z grafiki znajdującej się na innych stronach w Internecie (jest to powszechna praktyka), ale niekiedy trzeba będzie samodzielnie zbudować jakiś obrazek i wtedy przyda się stosowne narzędzie.

Istnieje wiele powszechnie znanych programów komercyjnych, bitowych i wektorowych, które pozwalają eksportować grafikę do formatu GIF i JPEG. Są one jednak dość kosztowne. Warto się za to posłużyć tańszymi programami shareware'owymi.

Jednym z najwygodniejszych narzędzi jest znany program PaintShop Pro, dostępny w wersji 3.12 dla Windows a także 5.x dla Windows 95/98. Pozwala on tworzyć m.in. grafiki w formacie GIF, z opcjami 89a interlaced (z przeplotem, wyświetlane na ekranie przeglądarki w kolejnych, coraz bardziej precyzyjnych "przybliżeniach") i transparent (przezroczyste). Zwłaszcza ta druga opcja jest szczególnie cenna, gdyż zapisane w ten sposób grafiki są przezroczyste, a więc nie zawierają tła. Jest to szczególnie efektowne na stronie WWW. Wersja 5.0, jak wspomnieliśmy wyżej, zawiera wyspecjalizowany moduł Animation Shop, który pozwala tworzyć efektowne animowane GIF-y.

Bardzo interesującym programem dla Windows 3.x i Windows 95 jest GIF Construction Set, który pozwala tworzyć złożone, wieloramkowe pliki GIF, które "żyją" na stronie WWW, dzięki animacji. Jeszcze wygodniejszym w obsłudze programem jest PhotoImpact GIF Animator dla Windows 95, który ma nieco mniej funkcji, ale oferuje znacznie wygodniejsze środowisko do tworzenia złożonych obrazków. Z kolei VideoCraft GIF Animator jest programem, który chyba najdalej posunął technikę animowania, oferując niezmierzoną liczbę efektów specjalnych. Doskonałym narzędziem jest dostarczany z programem PaintShop Pro 5, bardzo nowoczesny moduł Animation Shop, który pozwala tworzyć efektowne animacje w formacie GIF.

Na uwagę bez wątpienia zasługuje także norweski WebPaint dla Windows 95, który jest połączeniem programu malarskiego i modułu do składania obrazków w animowaną całość. Dzięki temu jest bardziej wszechstronny. Rolę narzędzia do składania, z elementami retuszu, pełni również WebImage, który jest dostępny w wersjach od 1.78 (Windows 3.1) do 2.0 (Windows 95 i NT). Ten ostatni program jest rozwinięciem znanego wcześniej pakietu MetalWorks, dostarczanego razem z HotMetal Pro 2.0, firmy SoftQuad. Cechą wyróżniającą WebImage (mowa o wersji dla Windows 95) jest zdolność łatwego kreowania stylizowanych przycisków. Program pozwala również tworzyć graficznie mapy odsyłaczy na obrazku. Razem z WebImage jest dostarczany I Spy, który jest wygodną przeglądarką grafiki i narzędziem do budowania katalogów miniatur.

Osobne miejsce zajmują komercyjne CorelWEB GRAPHICS.SUITE (Windows 3.1) i Corel WebMaster Suite (Windows 95), który zawiera m.in. moduł Corel MOVE, pozwalający budować animowane GIF-y. Jest to dość skomplikowany i niezbyt łatwy w obsłudze program, ale mający potężne możliwości. Profesjonalista, który zdecyduje się na zakupienie całego pakietu, zyska tutaj ogromne możliwości. Produkt Corela powinien się znaleźć w narzędziowni zaawansowanego autora stron, gdyż oferuje praktycznie wszystkie potrzebne narzędzia graficzne.

Dobrym narzędziem jest Microsoft Image Composer, służący do tworzenia elementów graficznych dla stron WWW, także interaktywnych. Jest to pakiet do obróbki map bitowych, zawierający ok. 500 efektów specjalnych. Program ściśle współdziała z pakietem Microsoft GIF Animatorem. Image Composer pozwala tworzyć grafikę internetową, którą można wstawiać bezpośrednio na strony WWW, ale efekt pracy Image Composera można również przeciągać do okna roboczego GIF Animatora, składając z odrębnych grafik sekwencję ramek, czyli tzw. animowany GIF. Oczywiście całość pracuje pod kontrolą Windows 95. Oba programy wchodzą w skład FrontPage 98. FrontPage 2000 jest dostarczany ze zmodernizowaną wersją programu graficznego, czyli PhotoDraw 2000 - nowe narzędzie Microsoftu zostało skonstruowane w dużej mierze z myślą o Internecie i webmasterstwie.

Micrografx Windows Draw 6, który jest udoskonaloną wersją Windows Draw 4 i 5 dla Windows 95, dla rynku domowego i małych biur, składający się z programu rysunkowego, malarskiego i modułu do budowy 3D, został rozbudowany o funkcje internetowe, w tym także doskonałe, nowatorskie narzędzie do budowania animowanych GIF-ów. Pakiet zawiera wbudowany moduł Instant 3D (znany z ABC Graphics Suite), pozwalający tworzyć trójwymiarowe obiekty, m.in. napisy. Paletę instrumentów uzupełniają nowe narzędzia rysunkowe, efekty specjalne i biblioteki CoolShapes. Pakiet może bezpośrednio generować grafikę w formatach GIF i JPEG dla potrzeb dokumentów HTML. Na dysku kompaktowym znalazł się obszerny zbiór 20 tys. gotowych grafik oraz setki szablonów do natychmiastowego wykorzystania w różnych zastosowaniach. Obfitość funkcji i niska cena czynią ten zestaw bardzo dobrą propozycją dla każdego początkującego i zaawansowanego webmastera, który dba o wizualną stronę swojej witryny. Choć program został wydany w 1997 roku, do dzisiaj znakomicie się sprawdza jako w tej roli (to mój ulubiony program - pozwolę sobie na osobisty wtręt).

Grafiki z przeplotem można tworzyć także za pomocą programów Graphics Workshop, WinGIF, LViewPro, VuePrint dla Windows 3.1, LViewPro dla Windows 95 oraz GIFTOOL dla DOS. Grafiki przezroczyste tworzą LViewPro dla Windows 3.1 i Windows 95, VuePrint i GIF Construction Set dla Windows 3.1 i Windows 95. Użytkownicy Linuksa wskażą natychmiast na program GIMP, oceniany przez wiele osób jako najlepszy program do budowania grafiki internetowej.

Sausage Software oferuje darmowy program Reptile (Windows 95/98), który pozwala tworzyć "najdziksze" podkłady graficzne dla stron WWW.

Polecam wreszcie znakomity, rewelacyjnie szybki "podglądacz" plików graficznych w wielu formatach - darmowy IrfanView dla Windows 95 - który pozwala także dokonywać elementarnej obróbki plików.

Programy sprawdzające poprawność składni

Nawet najlepsi i najbardziej doświadczeni autorzy popełniają błędy, gdyż skomplikowane dokumenty zawierają mnóstwo kodów sterujących. Wiele z tych omyłek nie wpływa wprawdzie na wyświetlanie dokumentów w przeglądarce, ale są zaliczane do uchybień formalnych, jak na przykład błędy w zagnieżdżaniu poleceń czy brak cudzysłowu wokół adresu w odsyłaczu.

Poprawność składni można sprawdzić online, korzystając z tzw. parsera. Pod adresem http://ugweb.cs.ualberta.ca/~gerald/validate/ mieści się A Kinder, Gentler Validator, który pozwala podać w wyświetlonym formularzu adres strony WWW, którą chcemy skontrolować. Parser generuje raport, w którym "wytyka" wszystkie znalezione usterki, zgodnie z deklaracją typu dokumentu, znajdującą się na stronie. Kinder wprowadza do zakresu usług specyfikację poszerzonego języka HTML (Cougar). Analogicznym, wysokiej klasy serwisem WebTechs HTML Validation Service, dostępny pod adresem http://www.webtechs.com/html-val-svc/. WebTechs także oferuje eksperymentalne sprawdzanie poziomu HTML 3.2+

Niedawno pojawił się także Doctor HTML, również dokonujący online bardzo wszechstronnej analizy wskazanej strony. Jest on dostępny pod adresem http://imagiware.com/RxHTML/. Doctor HTML nie zawiera jednak na razie kompletnego parsera SGML.

Nowym nabytkiem jest również polski parser SWAT, który także obsługuje HTML 4.0.

Obszerną listę usług można znaleźć w serwisie wyszukiwawczym Yahoo: Yahoo! - Computers and Internet:Software:Data Formats:HTML:Validation/Checkers.

Jeśli zamierzamy sprawdzać poprawność składni w DOS-ie, będziemy mogli się posłużyć parserem J. Clarka, który jest już klasyką w Internecie i podstawą dla wielu sieciowych parserów. Opis program można znaleźć pod adresem http://www.jclark.com/sp/.

W serwisach shareware'owych znajduje się program CSE Validator 3.x dla Windows 95, który można skopiować na swój dysk, a następnie posłużyć się nim offline (samodzielnie lub we współpracy z edytorem HomeSite). Jest to skuteczne i szybkie w działaniu narzędzie, które wychwytuje błędy i wyświetla ich listę. Niekiedy drobna omyłka, polegająca na niezamknięciu cudzysłowu, powoduje na zasadzie domina lawinę dalszych błędów, jego poprawienie zaś natychmiast je usuwa. Jest to bardzo cenny instrument, nieodzowny nawet wtedy, gdy mamy już spore doświadczenie w konstruowaniu stron. Obfitość kodów na stronie powoduje czasem trudności w ich poprawnym ustawieniu. W końcu nawet najlepsi pisarze czy dziennikarze popełniają "literówki", które musi wychwycić korekta! Trzeba jedynie pamiętać, że program nie zawiera pełnego parsera SGML i nie jest ostateczną instancją, gdy zależy nam na pełnej zgodności z HTML.

Na internetowej stronie Spyglass znajdziemy darmowy program Spyglass HTML Validator dla Windows 95 - program zawierający kompletny parser SGML, który należy zalecać każdemu webmasterowi pracującemu w tym środowisku.

Nowością jest doskonały HTML Powertools dla Windows 3.1 i 95 (Opposite Software), będący rozbudowanym zestawem do analizowania składni stron, edycji składni poleceń dotyczących grafik, poleceń META, zastępowania ciągów znaków, zamykania par znaczników itd. Jego rozwinięcie stanowi SiteBoss, oferujący jeszcze większą funkcjonalność.

Wbudowany, proste analizatory składni (tag checker) zawierają też m.in. edytory WebEdit i Hot Dog oraz polskie ezHTML i Tiger 98.

Inne narzędzia

Wiele osób interesuje się językiem programowania Java i jego uproszczoną wersją JavaScript. Pojawił się także Visual Basic Script, promowany przez Microsoft. Starym (ale stale aktualnym) standardem, popularnym na platformie unixowej, jest język PERL, pozwalający tworzyć wyspecjalizowane skrypty CGI. Zapewne jednak znakomita większość autorów stron nie będzie się zajmować programowaniem, ale chętnie wykorzysta gotowe skrypty i aplety. W sieci pojawia się ich coraz więcej i często są one oferowane bezpłatnie. Na stronie Narzędzi internetowych znajdą Państwo liczne odsyłacze do tych serwisów. Nasz kurs zawiera także garść przydatnych skryptów.

Narzędzia wspomagające tworzenie skryptów zawierają polskie edytory Pajączek i Tiger, a rewelacją jest znakomity edytor skryptów (i DHTML) Skryba, przygotowany przez Rafała Płatka, autora Pajączka. Skryba współpracuje bezpośrednio z Pajączkiem 2000. Autor HTML-owca, Piotr Szczepanik, oferuje również dość prosty edytor skryptów - Skryptowiec.

Dla autora strony jest także ważny mechanizm posyłania swoich plików na serwer. Można to robić za pomocą zwykłego programu FTP. WebEdit i Hot Dog pozwalają to robić w tle, bezpośrednio z poziomu edytora. Szczególnie silne narzędzie zostało zaprezentowane w ostatniej wersji Hot Doga dla Windows 95. Bardzo ciekawym rozwiązaniem może się pochwalić HomeSite 2.0, który pozwala otwierać plik po prostu z serwera WWW, a następnie posyłać go z powrotem za pośrednictwem Web Publishing Wizard Microsoftu. Wszystko to dzieje się w tle, bez otwierania żadnego programu FTP. Microsoft promuje zresztą Web Publishing Wizard wśród autorów edytorów HTML, a HomeSite był pierwszym takim narzędziem (wersje 3 i 4 edytora zawierają własny moduł FTP). Podobne, ale swoje własne rozwiązania, stosuje edytor wbudowany w Netscape Navigator Gold, a narzędziem FTP dysponuje również Lotus WordPro. Program kliencki FTP zawierają także, oczywiście, Tiger98, Pajączek 2 i 2000. Świetnym narzędziem jest moduł FTP wbudowany w znakomitego zarządcę plików Windows Commander - pracujemy z nim tak, jakbyśmy kopiowali pliki na lokalnym dysku.

Autorzy stosujący formularze (np. typu mailto:) powinni się zaopatrzyć w narzędzie służące do odczytywania otrzymywanych informacji zwrotnych, czyli po prostu nadających im bardziej czytelną i usystematyzowaną postać. Znam dwa takie narzędzia dla Windows 95 - mailto:Formatter i Indalo Post (dostępne w serwisie Windows95.com). Polski program Formater poczty dla DOS także pozwala obejrzeć zawartość takiej przesyłki. Skopiuj go stąd - tylko 10 KB.

Interesującym narzędziem wspomagającym budowanie cenników na stronach WWW (cenny produkt dla firm) jest Cennik HTML, przygotowany przez Artura Stuczyńskiego - http://blue.profex.com.pl/~agat/

Na rynku jest także dostępny specjalny, darmowy program Microsoftu, który pozwala tworzyć tzw. HTML Help. Przykładem tego rodzaju pomocy są "helpy" dla programów wchodzących w skład Internet Explorera czy pomoc dla SuperMemo 98. HTML Help Workshop pozwala zintegrować w jednym interfejsie pliki HTML, opatrzone dodatkowo indeksem i systemem wyszukiwawczym. Microsoft dostarcza ostatnio swoje helpy w tym właśnie formacie.

Warto się zaopatrzyć w narzędzie do konwersji polskich znaków w dokumentach HTML. Polecam tutaj szczególnie doskonały polski konwerter (darmowy) dla środowiska Windows 95/98 - Ogonki 97, przygotowany przez Michała Jaskólskiego. Nie tylko konwertuje on polskie znaki, ale i modyfikuje/dodaje deklarację strony kodowej, o czym często zapominają webmasterzy.

No i wspomnijmy jeszcze o podstawowych narzędziach dla plików dźwiękowych.

Na rynku istnieje sporo rozmaitych programów, ale klasykiem jest oczywiście CoolEdit, szczególnie popularny w wersji 96, pozwalający nagrywać i swobodnie modyfikować nawet bardzo duże pliki. CoolEdit zapisuje pliki w wielu formatach, w tym oczywiście w podstawowym WAVE, który można konwertować do innych postaci.

Istnieje wiele programów do tworzenia plików MP3 - prostotą i łatwością obsługi wyróżnia się niewielki, darmowy Canna MP3 Maker, który można pobrać ze strony http://www.angelfire.com/ga/cannamp3.

RealNetworks oferuje darmowe narzędzia do obsługi swoich formatów RealAudio. Dostępny jest darmowy enkoder plików dla starszego standardu, a także RealProducer dla systemu G2, który przebojem zawładnął Internetem w ostatnich parunastu miesiącach. Bardziej zaawansowane narzędzia są już programami komercyjnymi.

W kwietniu 1999 pojawiły się narzędzia Microsoftu - ze strony firmy można pobrać Windows Media Tools, składające się z Windows Media Encoder, Windows Media Author i Windows Media Indexer. Efektem ich działania są pliki w formacie multimediów strumieniowych ASF (Advanced Streaming Format), konkurujący z produktami RealNetworks.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Słowniczek internetowy

Adres E-mail
Zob. E-mail.
Adres IP (ang. IP address)
Unikatowy adres maszyny w sieci internet. Format adresu to cztery jednobajtowe liczby oddzielone kropkami, np. 148.81.83.98.
Algorytm DES (ang. DES Encrypt)
Standard szyfrowania, algorytm służący m.in. do szyfrowania załączników w poczcie elektronicznej.
Anonimowy ftp (ang. Anonymous FTP)
Anonimowy FTP pozwala na skorzystanie z ogromnych zasobów sieciowych rozmieszczonych na serwerach na całym świecie. Do takiego sewera można się zalogować używając klienta ftp, na konto użytkownika Anonymous, jako hasło podając swój adres E-mail.
Aplet (ang. Applet)
Krótki program (mała aplikacja, "aplikacyjka"), stanowiący część dokumentu internetowego. Pojęcie applet jest odnoszone w Internecie do małych programów (skryptów) napisanych za pomocą języka programowania Java, firmy Sun. Applet wykonuje jakieś zadanie, np. pozwala wyświetlać animację. Applety Javy są interpretowane (akceptowane) przez przeglądarkę Netscape Navigator 2.0.
Archie
Sieć baz danych zawierających listy wszystkich plików dostępnych w internecie poprzez anonimowego ftp. Aby odnaleźć żądany plik trzeba podłączyć się do tzw. archie serwera i zadać pytanie o plik.
Artykuł (ang. article)
List lub wiadomość konkretnego użytkownika przeznaczona dla grupy dyskusyjnej.
Attachment
Zob. Załącznik

Baza danych (ang. database)
Uporządkowany zbiór danych, dający się łatwo przeszukiwać. W szczególności w internecie bazą danych może być zbiór artykułów list dyskusyjnych, spis użytkowników danej sieci, interaktywne bazy danych dostępne przez WWW itp.
BBS (ang. Bulletin Board System)
Elektroniczna "tablica ogłoszeniowa", system komputerowy, w którym użytkownicy mogą wymieniać między sobą informacje i pliki, prowadzić rozmowy, wysyłać i odbierać pocztę. Niektóre systemy oferują bardziej zaawansowane usługi, m.in. dostęp do Internetu.
Bod (ang. baud)
Jednostka miary szybkości transmisji danych.
Bookmark
Zob. Zakładka.
Bramka
Zob. Gateway.
Browser
Zob. Przeglądarka WWW
Brydż (ang. bridge)
Zob. Most.
Bundle
Zob. Zestaw internetowy

Cache
Specjalny katalog w przeglądarce WWW, gromadzący grafikę wczytywaną w trakcie przeglądania zasobów sieci. Gdy po raz kolejny sięgamy do tej samej strony, przeglądarka wczytuje na ekran grafikę z cache'a, a nie z Internetu, co znacznie przyspiesza wczytanie całej strony i oszczędza czas. Im większy cache, tym większa możliwość magazynowania grafiki. Optymalna wielkość powinna sięgać 10-15 megabajtów.
COM
Zob. Port szeregowy.
Czcionka fizyczna
Atrybut czcionki zmieniający jej wygląd w przeglądarce WWW, np. czcionka pochylona, pogrubiona, podkreślona, powiększona, zmniejszona, superskrypt, subskrypt itp.
Czcionka logiczna
Atrybut czcionki, zmieniający jej wygląd w przeglądarce WWW, związany z jej zastosowaniem, np. kod, zmienna, cytat, akronim. Do poszczególnych atrybutów są zwyczajowo przypisane style fizyczne, które są generowane w przeglądarce. Niektóre przeglądarki pozwalają użytownikowi samodzielnie zmienić atrybuty fizyczne przypisane poszczególnym czcionkom logicznym.

Demon (ang. Daemon)
Program serwera usług, pracujący zazwyczaj w tle na serwerze Unixowym i obsługujący zapytania klientów. Przykłady to demon ftp, demon http, demon irc itp.
Dial-up
Połączenie z internetem realizowane przez modem podłączony do komputera domowego i dzwoniący do usługodawcy internetowego.
DNS (ang. Domain Name Service)
System nazewnictwa domen w sieci internet. Pozwala nadawać komputerom nazwy zrozumiałe dla człowieka i tłumaczy je na numery IP.
Dokument źródłowy lub źródło dokumentu (ang. source document)
Oryginalna postać dokumentu internetowego, zapisana w kodach języka HTML. Zaawansowane preglądarki pozwalają obejrzeć postać źródłową oglądanego dokumentu, co pozwala użytkownikowi zorientować się w konstrukcji wybranych elementów, jeśli z jakichś powodów interesuje go sposób przedstawienia danych.
Domena (ang. domain)
Nazwa podsieci, czyli też część nazwy adresu e-mail. Niektóre domeny posiadają poddomeny. Np. domeną jest .pl, .ch, .su, itp. Poddomena to np. .edu, .gov, .mil. Przykładowy adres składa się z nazwy użytkownika i domeny z poddomenami, np. chris@ia.pw.edu.pl.
Download
Pobieranie pliku z innego komputera.

E-mail (ang. Electronic Mail)
Poczta elektroniczna. Usługa pozwalająca na przesyłanie w internecie listów. Każdy list musi być zaadresowany wg. schematu nazwa_użytkownia@adres_maszyny. Przykładowo użytkownik Jacek Kowalski posiadający konto w firmie xyz w Polsce mógłby mieć adres: JKowalski@xyz.com.pl. Do czytania i pisania listów służą specjalne programy takie jak np. PMail dla DOS-u i Windows, Elm lub Pine dla Unixa i inne. Poza tekstami można przesyłać pocztą elektroniczną, także pliki binarne odpowiednio przetworzone na format tekstowy. Do tego celu służą programy uuencode/uudecode.
Edytor HTML
Program służący do tworzenia dokumentów internetowych w standardzie HTML. Chociaż jest możliwe zbudowanie dokumentu internetowego za pomocą każdego, nawet najprostszego edytora tekstów, edytory HTML są tworzone, aby przyspieszać i automatyzować proces konstruowania stron WWW, uwalniając użytkownika od ręcznego wprowadzania poleceń HTML. Więkoszść edytorów pracuje w trybie "tekstowym", wyświetlając wszystkie znaki sterujące (polecenia) HTML, niektóre pozwalają tworzyć dokumenty w trybie "graficznym", masując kody języka, a stosowane są też edytory pozwalające wprowadzać poszczególne elementy w sposób całkowicie zautomatyzowany, za pomocą zestawiania "klocków".
Emoticon
Zob. Smiley.
Ethernet
Jeden ze standardów sieci lokalnych. Wykorzystuje metodę dostępu CSMA/CD (and. Carrier Sense Multiple Access/Collision Detection) polegającą na dostępie wielostacyjnym i detekcji kolizji. Użytkownik sieci nadaje tylko wtedy kiedy nikt więcej nie nadaje. Jeżeli wykryta zostanie kolizja (czyli zacznie nadawać dwóch lub więcej użytkowników) to transmisja jest wznawiana po losowym odstępie czasu. Prędkość w sieci ethernet wynosi 10 lub 100 Mbps (tzw. Fast Ethernet).
Extensions
Zob. Rozszerzenia.

FAQ (ang. Frequently Asked Questions)
Pliki tekstowe krążące w sieci internet, a zawierające wszystkie odpowiedzi na najczęściej zadawane pytania z danej dziedziny. Każda lista dyskusyjna ma swój własny FAQ. Akronim celowo kojarzy się z wulgarnym wyrazem z języka angielskiego.
FDDI (ang. Fiber Distributed Data Interface)
Standard sieci lokalnych i miejskich. Wykorzystuje metodę dostępu polegającą na przekazywaniu tokena. Nadawać może jedynie stacja posiadająca token, ale zaraz po nadaniu powinna wysłać token w sieć, aby umożliwić nadawanie innej stacji. Do transmisji używa się światłowodu, a prędkość wynosi 100 Mbps. Całość tworzy podwójna pętla światłowodowa. W przypadku poprawnej pracy sieci wykorzystywany jest tylko jeden kabel, natomiast w razie awarii jednego z urządzeń, sieć dalej działa, gdyż z dwóch pierścieni automatycznie tworzy się jeden omijający uszkodzone urządzenie.
Filtr (ang. filter)
Klucz pozwalający ignorować na liście dyskusyjnej, artykuły na dany temat lub pochodzące od danej osoby.
Finger
Usługa pozwalająca stwierdzić, kto w danej chwili jest zalgowany na danym serwerze. lub zebrać informacje o użytkowniku danego serwera. Przykładowo: finger @ia.pw.edu.pl podaje listę, zalogowanych na serwerze o tym adresie, użytkowników. Natomiast finger chris@ia.pw.edu.pl, podaje informacje o użytkowniku chris na serwerze ia.pw.edu.pl.
Flame
Obraźliwa wiadomość w poczcie elektronicznej lub na liście dyskusyjnej.
Flamer
Osoba generująca obraźliwe wiadmości.
Folder
Kontener zawierający np. zbiór listów. Użytkownik może przerzucać swoją pocztę do definiowanych przez siebie folderów. Każdy użytkownik na serwerze ma też swój folder, w którym umieszczane są przychodzące do niego listy.
Formularz
Dokument internetowy, który pozwala czytelnikowi strony w interakcyjny sposób pobierać lub przesyłać informacje. Przykładem formularza może być ankieta prowadzona przez autora strony, który zbiera od czytelników informacje pewnego typu (np. wiek, płeć, wykonywany zawód, posiadany sprzęt itp.). Formularzem jest strona Ankieta w niniejszym kursie, która zawiera pola wyboru i pola tekstowe.
Forum
Odpowiednik listy dyskusyjnej.
FTP (ang. File Transfer Protocol)
Protokół transmisji plików. Zazwyczaj usługa ftp służy do kopiowania plików z odległej maszyny do lokalnej lub odwrotnie. Działa na zasadzie klient-serwer i przeważnie z usługi korzystamy przy użyciu interaktywnej aplikacji. Zapewnia ochronę przy użyciu haseł dostępu.

Gateway
Komputer lub urządzenie tłumaczące komunikaty przesyłane między dwoma systemami (sieciami) korzystającymi z różnych sposobów kodowania lub formatu danych, czy też protokołów komunikacyjnych. Także: komputer pośredniczący w wysyłaniu zapytań w sieci Internet. Dostawcy usług internetowych stosują często osobne bramki dla przeglądarek WWW, poczty elektronicznej i list dyskusyjnych.
Gopher
System oparty o menu wspomagający poszukiwanie informacji w internecie. Jest to poprzednik WWW, gdyż w chwili obecnej wszelkie możliwości gophera zostały wbudowane w przeglądarki WWW. Z hostami typu gopher można się bez problemów łączyć klientem WWW i czytać je analogicznie do klienta gopher.
GIF
Format graficzny powszechnie stosowany w Internecie. Pliki w formacie GIF są w wysokim stopniu skomprymowane, dzięki czemu zajmują mało miejsca i są szybciej transmitowane w trakcie przeglądania dokumentów WWW, co oszczędza czas i koszt połączeń.
Grupa dyskusyjna (ang. newsgroup)
(Zob. też: Listy dyskusyjne) wyodrębnione formalnie miejsce w którym można wymieniać z innymi osobami informacje i poglądy na określone tematy, zdefiniowane przez zawartość grupy dyskusyjnej. Grupą dyskusyjną nazywamy także osoby urzestniczące w tej wymianie, które dokonały subskrypcji.
Grupa (lista) moderowana
Grupa (lista) dyskusyjna lub lista wysyłkowa kontrolowana przez określoną osobę decydującą jakie informacje mogą być udostępniane użytkownikom.

Hasło (ang. password)
Ciąg znaków znanych posiadaczowi konta, służący do jego autoryzacji przy wchodzeniu do systemu. Znajomość hasła jest niezbędna, aby odpowiedzieć na pytanie o nie np. przy procedurze logowania się.
Hipertekst (ang. hypertext)
System połączeń między dokumentami, pozwalający za pomocą kliknięcia myszką na zaznaczonym obszarze przenosić się w inne miejsce dokumentu lub w ogóle do innego dokumentu.
Home page
Dokument WWW wyświetlany jako pierwszy po połączeniu się pod żądany adres. Także: własna strona użytkownika, strona macierzysta.
Host
Maszyna w sieci posiadająca własny adres IP, nazwę i należąca do domeny. Często także: komputer podłączony do bezpośrednio do Internetu, pozwalający świadczyć usługi internetowe klientom.
Host lokalny (ang. local host)
Nazwa określa komputer z którego łączymy się z inna maszyną - tzw. hostem odległym. Pojęcie to jest względne i zależy od tego, z której strony danego połączenia się znajdujemy.
Host odległy (ang. remote host)
Nazwa określa odległy komputer z którym ustaliliśmy połączenie.
HTML (ang. HyperText MarkUp Language)
Język hipertekstowy używany do tworzenia dokumentów używanych przez WWW. Polecenia tekstowe pozwalają na realizację tzw. linków (odsyłaczy), wyświetlanie różnych fontów, grafiki itp. itd. Obowiązującym standardem jest HTML 2, natomiast w trakcie dyskusji znajduje się standard HTML 3, powszechnie jednak używany i coraz częściej interpretowany przez przeglądarki WWW.
HTTP (ang. HyperText Transfer Protocol)
Jeden z protokołów internetowych, używany do transferu stron WWW.

Internet
Ogólnoświatowa sieć komputerowa, łącząca większość podłączonych do jakiejkolwiek sieci komputerów. Skupia tysiące sieci lokalnych, setki miejskich, miliony komputerów i użytkowników (w grudniu było ich ok. 33 mln). W sieci udostępnione są ogromne zasoby do których między innymi należą spisy literatury, kopie obrazów, treści książek, utwory muzyczne, informacje na dowolne tematy itp. itd. Poza tym możliwe jest porozumiewanie się pomiędzy użytkownikami za pomocą poczty elektronicznej oraz programów typu IRC. Dostęp do sieci uzyskuje się łącząc się modmem do lokalnego usłgodwacy internetowego (ang. internet provider), który oferuje dostęp do całej reszty świata lepszymi niż modem łączami.
Internet Provider
Zob. Usługodawca internetowy.
Intranet
Wewnętrzna, wydzielona sieć firmy oparta na rozwiązaniach Internetu.
IP (ang. Internet Protocol)
Protokół dzięki, któremu działa sieć.
IRC (ang. Internet Relay Chat)
Program typu klient-serwer, dzięki któremu osoby z dowolnego miejsca na świecie mogą porozmawiać w czasie rzeczywistym ze sobą. W tym celu łączą się z tzw. IRC Serwerem i dołączają do kanału na którym chcą dyskutować. Możliwe jest również przesyłanie plików pomiędzy rozmówcami.

JPG - JPEG
Format graficzny stosowany w Internecie - Zob. GIF.

Katalog
Zob. Folder.
Katalog poczty nadchodzącej (ang. incoming mail folder)
Katalog zawierający pocztę elektroniczną otrzymywaną od innych użytkowników sieci.
Katalog poczty skasowanej (ang. deleted mail folder)
Katalog zawierający tymczasowo (do momentu ostatecznego usunięcia - ręcznego lub automatycznego) skasowane listy elektroniczne.
Katalog poczty wychodzącej (ang. outgoing mail folder)
Katalog zawierający listy elektroniczne przygotowane do wysłania, ale jeszcze nie wysłane.
Katalog poczty wysłanej
Katalog zawierający kopię wysłanej do innych użytkowników poczty elektronicznej.
Klient-serwer (ang. client/server)
Architektura systemu komputerowego, umożliwiająca korzystanie z serwerów baz danych, czy aplikacji. Serwer służy do przetrzymywania danych, przyjmowania zgłoszeń od klientów i świadczenia usług na ich rzecz. Klienci zgłaszają się do serwera z konkretnym zapytaniem i oczekują na odpowiedź. Ułatwiają użytkownikowi sieci zadanie, jeżeli są wyposażone w interfejs graficzny użytkownika. Zasadniczą zaletą architektury klient-serwer jest to, że przez sieć biegną jedynie konkretne odpowiedzi na konkretne pytania, a nie całe pliki, czy aplikacje do wykonania lokalnego, jak to miało miejsce w dawnych architekturach serwerowych.
Kompresja (ang. compression)
Metoda redukcji liczby danych. Istnieją metody kompresji plików "w locie", tzn. przed transmisją plik się komprymuje, a z drugiej strony, przesłany plik, dekomprymuje się. Pozwala to zaoszczędzić na czasie i kosztach transmisji, gdyż jak wiadomo mniej danych przesyła się szybciej. Powszechnie znane i stosowane metody kompresji to ZIP i ARJ.
Konto (ang. account)
Każdy sieciowy system operacyjny pozwala na zakładanie kont użytkownikom. Na definicje konta składa się nazwa użytkownika, hasło, dane o użytkowniku i jego prawa dostępu. Użytkownik nie posiadający konta w danym systemie nie może się do niego dostać, chyba, że korzysta z usługi FTP i przewidziano anonimowego użytkownika.
Kopia poczty elektronicznej (ang. carbon copy)
Kopia listu, wysłana do innej osoby niż odbiorca. Odbiorca listu wie do jakich innych osób zostały wysłane kopie.
Książka adresowa (ang. address book)
Katalog lub lista stron internetowych osób i instytucji w poczcie elektronicznej lub programie wspomagającym nawigację w Internecie.

LAN (ang. Local Area Network)
Sieć lokalna. Grupa komputerów rozmieszczona w niewielkiej odległości od siebie.
Linia dzierżawiona (ang. leased line)
Stałe połączenie telekomunikacyjne pomiędzy dwoma odległymi punktami. Linia taka może mieć różną przepustowość i w zależności od niej cenę. Cena zależy również od długości takiej linii, natomiast nie ma znaczenia liczba przesłanych danych.
Link
Zob. Odsyłacz
Lista
Zob. Wykaz.
Lista subskrypcyjna (ang. subscription list)
Lista osób, które zapisały się do danej listy dyskusyjnej pocztowej.
Lista wysyłkowa (ang. mailing list)
Lista użytkowników sieci, do których ma być wysłana poczta elektroniczna lub artykuł.
Listy dyskusyjne
Coraz bardziej powszechny sposób prowadzenia publicznych rozmów w internecie. Istnieją dwa rodzaje list dyskusyjnych, tzw. Usenet News oraz listy pocztowe. Listy pocztowe działają tak, że osoba, która chce brać udział w dyskusji zapisuje się do listy wysyłając zgłoszenie pod pewien adres i otrzymuje wszystkie teksty przysłane na listę. Jej odpowiedzi są odsyłane do wszystkich uczestników listy. Do list typu Usenet podłączamy się korzystając ze specjalnego programu klienta (newsreadera).
Listserwer (ang. listserver)
Zautomatyzowany system dystrybucji poczty dla potrzeb list dyskusyjnych.
Logowanie (ang. login, logon)
Wejście do sieciowego systemu operacyjnego. Logowanie zazwyczaj polega na podaniu nazwy użytkownika i hasła celem identyfikacji. Hasło powinno być tajne, natomiast nazwa użytkownika może być powszechnie znana.

MAN (ang. Metropolitan Area Network)
Sieć miejska. Łączy sieci lokalne w obrębie miasta. Oparta jest zazwyczaj o główne łącze dużej przepustowości do którego podłączani są klienci.
Marquee
Specjalna animacja, wprowadzona przez Microsoft do języka HTML i interpretowana jedynie przez Microsoft Internet Explorer 2.0. Polecenie Marquee, wraz z parametrami, pozwala wprowadzać do dokumentu "pływający" w poprzek ekranu tekst.
Microsoft Extensions
Zob. Rozszerzenia
MIME (ang. Multi Purpose Internet Mail Extension)
Metoda łączenia kodu binarnego w poczcie elektronicznej.
Modem (ang. MOdulator/DEModulator)
Urządzenie pozwalające na transmisje danych z komputera poprzez linie telefoniczną do drugiego modemu. Modem może być urządzeniem wewnętrznym (w postaci karty) lub zewnętrznym podłączanym kablem do interfejsu w komputerze.
Most (ang. bridge)
Urządzenie sieciowe służące do łączenia segmentów danej sieci. Potrafi filtrować adresy i przepuszczać tylko te pakiety, które są przeznaczone do segmentu po drugiej stronie mostu. Takie działanie odciąża sieć. Ponadto most działa w warstwie łącza danych (ang. data link) modelu ISO/OSI, a więc możliwe jest dzięki niemu połączenie ze sobą sieci w różnych architekturach, np. Ethernet i Token Ring.
MUD (ang. Multi User Dungeon)
Gra rozgrywana poprzez internet. Biorą w niej udział żywi ludzie i to właśnie oni są bohaterami gry. Mogą ze sobą rozmawiać, przekazywać sobie przedmioty, zabijać się itp. itd. Całość przebiega w trybie tekstowym i od gier typu Role Playing różni się tylko tym, że gracze nie widzą się nawzajem, reszta jest podobna.

Nagłówek (ang. header)
Część listu elektronicznego lub artykułu w grupie dyskusyjnej, zawierająca podstawowe informacje o liście (artykule), nadawcy, dacie, temacie, itp.
W dokumencie HTML jest to wyróżniony fragment tekstu, wprowadzany za pomocą specjalnego polecenia, interpretowany przez przeglądarkę za pomocą innej czcionki, zazwyczaj bezszeryfowej. Istnieje sześć stopni nagłówków, różniących się od siebie stopniem pisma. Nagłowków nie należy mylić z tytułem strony, który pojawia się w listwie tytułowej przeglądarki i jest wprowadzany odrębnym poleceniem TITLE.
Nazwa użytkownika (ang. username)
Nazwa użytkownika na serwerze. Nazwa użytkownika jest unikatowa w skali serwera i niezbędna do założenia konta.
Netscape Extensions
Zob. Rozszerzenia
Netiquette
Kodeks dobrych obyczajów, zbiór grzecznościowych zasad postępowania (etykieta sieciowa) w sieci Internet, szczególnie istotny w przypadku grup dyskusyjnych.
NewsSerwer
Komputer obsługujący listy dyskusyjne Usenet News. Do tego celu używa się specjalnego protokołu NNTP.
Numer IP (ang. IP number)
Unikatowy numer identyfikacyjny każdej maszyny podłączonej do internetu. Format numeru IP to cztery ośmiobitowe liczby rozdzielone kropkami. Przykładowy adres IP może wyglądać tak: 148.81.83.98.

Odpowiedź (ang. reply)
Wiadomość elektroniczna wysłana w odpowiedzi na czyjść artykuł lub list, bezpośrednio i wyłącznie do nadawcy.
Odsyłacz (ang. link)
Polecenie, które pozwala czytelnikowi dokumentu hipertekstowego przenieść się do miejsca wskazanego przez punkt docelowy odsyłacza. Odsyłacz jest zazwyczaj sygnalizowany niebieskim kolorem i podkreśleniem. Kliknięcie na nim spowoduje skok do innego miejsca na tej samej stronie, do innej strony WWW, do serwera FTP, wywoła moduł poczty elektronicznej itp.

Pakiet (ang. packet)
Najmniejsza porcja danych przesyłanych w sieci. W protokole TCP/IP dane grupuje się w pakiety, aby ułatwić i przyśpieszyć przesyłanie informacji.
Parser
Specjalny serwis w Internecie, który sprawdza poprawność składniową dokumentu HTML i jego zgodność z oficjalną specyfikacją języka HTML. Użytkownik podaje adres weryfikowanej strony, po czym parser przetwarza zawarte na niej informacje i wyświetla listę błędów wraz z komentarzem. Przykładem parsera jest specjalny serwis W3C, badający zgodność strony ze specyfikacją HTML 4.
Ping
Komenda pozwalająca sprawdzić połączenie internetowe poprzez wysłanie kontrolnego pakietu do i ze zdalnego hosta. Przy uzyskanym połączeniu istnieje możliwość pokazywania statystyk transmisji.
Plik ASCII (ang. ASCII file)
Typ pliku składającego się ze znaków ASCII (ang. American Standard Code for Information Interchange). Każdy znak ASCII jest zapisany za pomocą 7 bitów. Formatu pliku ASCII używa się do wysyłania poczty, artykułów na listach USENET itp.
Plik binarny (ang. binary file)
Typ pliku składającego się z ciągu bitów danych. Pliki tego typu to np. kody programów i zakodowane dane, bezpośrednio nieczytelne dla człowieka. Aby przesłać plik binarny używając e-maila należy go zakodować metodą uuencode, a aby go odczytać - zdekodować metodą uudecode.
Plug-in
Dosł. wtyczka. Program wspomagający przeglądarkę WWW, rozszerzający jej możliwości. Na przykład plug-in Adobe Acrobat Amber pozwala oglądać z poziomu Netscape Navigatora pliki publikacji elektronicznych Acrobata (PDF), czego nie potrafi zrobić sam Navigator. Obecnie istnieje już (w końcu marca br.) ok. 40 programów tego typu, głównie współpracujących z Navigatorem. Pojawiają się jednak także "wtyczki" dla Internet Explorera. Plug-iny pozwalają oglądać pliki animacji, wideo, 3D, virtual reality, dokumenty Worda, grafikę wektorową itd., zwalniając z konieczności posiadania oprogramowania natywnego dla danego typu pliku (np. Corela dla plików CMX czy Worda lub Word Viewera dla DOC) i bardzo wzbogacają możliwości przeglądarki.
Poczta elektroniczna
Zob. E-mail.
Pogawędka (ang. chat)
Bezpośrednia, prowadzona na bieżąco rozmowa dwóch lub więcej użytkowników, prowadzona za pomocą tekstu wpisywanego w specjalnym okienku. Zob. również IRC.
Połączenie (ang. connection)
Skomunikowanie się dwóch komputerów np. w sieci internet. Aby włączyć się do internetu, należy nawiązać połączenie z komputerem już obecnym w internecie.
Port szeregowy (ang. serial port)
Interfejs w komputerze, służący podłączeniu modemu lub drukarki. Zazwyczaj rozróżnia się porty nazwami COM1, COM2, itp.
PPP (ang. Point to Point Protocol)
Internetowy protokół komunikacyjny umożliwiający przesyłanie pakietów danych różnych formatów dzięki pakowaniu ich do postaci PPP. Podobnie jak SLIP także PPP działa poprzez łącze szeregowe. Protokół doskonale nadaje się do pracy z modemem.
Preferencje (ang. preferences)
Zestaw ustawień, pozwalający zdefiniować sposób zachowania programu, np. przeglądarki WWW czy edytora HTML. Zaawansowane przeglądarki pozwalają zdefiniować kilkanaście różnych parametrów, np. stronę początkową, domyślne kolory czcionki i odsyłaczy, wielkość cache'a, częstotliwość odświeżania danych, czcionki dla poszczególnych elementów tekstowych (ważne dla polskiego użytkownika), sposób wczytywania grafiki, aplikacje zewnętrzne obsługujące pewne rodzaje sesji (np. Telnet), aplikacje wspmagające, które są uruchamiane przy napotkaniu w Internecie pliku o nietypowym formacie, język, adresy serwerów poczty elektronicznej i grup dyskusyjnych, hasło, adres zwrotny poczty użytkownika, hasło.
Projekt (ang. project)
W edytorze HTML, zestaw powiązanych ze sobą stron, które będą tworzyć witrynę internetową lub jej fragment. Objęcie grupy stron ramą w postaci projektu ułatwia zarządzanie nimi, przyspiesza ich otwieranie, upraszcza wyszukiwanie informacji i weryfikowanie odsyłaczy, posyłanie na serwer.
Protokół (ang. protocol)
Zbiór sygnałów używanych przez grupę komputerów podczas wymiany danych (wysyłania, odbierania i kontroli poprawności informacji). Komputer może używać kilku protokołów. Np. jednego do komunikacji z jedym systemem, a drugiego z innym. W internecie mamy do czynienia z wieloma protokołami, a najważniejsze z nich to TCP/IP, SLIP, PPP.
Provider
Zob. Usługodawca internetowy.
Przeglądarka WWW (ang. browser)
Program pozwalający przeglądać strony w World Wide Web, w trybie tekstowym lub graficznym. Najpopularniejszym programem jest obecnie Netscape Navigator. Przeglądarki różnią się zakresem interpretowanych znaczników języka HTML i szeregiem dodatkowym możliwości - obsługa dodatkowych aplikacji, nawigacja, konfigurowanie itp.

Ramka (ang. frame)
Specjalny element dokumentu internetowego, wprowadzony w ramach Netscape Extensions i interpretowany jedynie przez Netscape Navigatora (wiadomo też, że będą one widoczne w Internet Explorerze 3.0). Użycie ramek pozwala dzielić ekran dokumentu na kilka odrębnych okienek, zwykle powiązanych ze sobą odsyłaczami, co ułatwia nawigowanie w skomplikowanych konstrukcyjnie dokumentach. Przykładem użycia ramek jest niniejszy kurs - stale widoczna ramka ze spisem treści pozwala szybko sięgać do różnych stron całego kursu, wprowadzanych za pomocą odsyłaczy do drugiej ramki. Użycie ramek nie pozbawia użytkowników innych przeglądarek możliwości czytania dokumentu, dzięki konstrukcji NOFRAMES, która zawiera "lustrzane" odbicie treści ramek.
Repeater
Urządzenie sieciowe pracujące w warstwie fizycznej modelu ISO/OSI. Pozwala na wzmocnienie sygnału w kablu sieciowym, a więc przedłużenie segmentu.
Rlogin (ang. remote login)
Zdalne logowanie się do innego komputera na którym mamy konto, bez konieczności podawania hasła.
Router
Urządzenie działające w warstwie sieciowej modelu ISO/OSI. Pozwala na kierowanie pakietów zgodnie z zawartą w nich informacją adresową. Urządzenie stosuje się do łączenia sieci LAN i sieci rozległych.
RFC (ang. Request for Comment)
Dokumenty opisujące wszelkie standardy związane z internetem. Ich zbiór można znaleźć na wielu serwerach, również w Polsce.
Rozszerzenia (ang. extensions)
Zestawy poleceń wprowadzone do języka HTML przez firmy Netscape i Microsoft (można tutaj także dodać najnowsze rozszerzenia Javy), wykraczające poza standardy HTML 2 i 3. Rozszerzenia obejmują polecenia, realizujące przede wszystkim specjalne efekty, np. kolory komórek i obramowania tabeli, animacja Marquee, migający tekst, ramki, dźwięk w tle, indeksowanie strony, wybór czcionki, applety Javy itd. Rozszerzenia są coraz powszechniej interpretowane przez przeglądarki, a ich tworzenie wspomagane przez coraz większą liczbę edytorów HTML. Rozszerzenia są częściowo wprowadzane do specyfikacji HTML 4.

Serwer
Dedykowany system komputerowy wydzielony z sieci w celu realizowania usług na rzecz innych. Przykładowo mogą to być usługi typu podawanie plików, obsługa drukarek, archiwizacja danych, translacja protokołów, itp.
Shell
Interpreter poleceń. Po zalogowaniu się do systemu zazwyczaj nasze działania nadzoruje proces shella. W zależności od tego jaki to shell, możemy stosować różne polecenia.
Sieć (ang. network)
Grupa komputerów połączona ze sobą w sposób umożliwiający wymianę informacji. Przykładem największej sieci jest internet.
Sieć lokalna
Zob. LAN.
Sieć miejska
Zob. MAN.
Sieć rozległa
Zob. WAN.
Site
Dowolny komputer z którym można się skontaktować w sieci Internet.
Site name
Nazwa komputera w sieci Internet.
Skrypt logowania (ang. login script)
Automatyczna procedura wykonująca uruchamiana podczas logowania się użytkownika do sieci.
Skrzynka pocztowa (ang. mailbox)
Plik w którym są przetrzymywane wszystkie otrzymane, kopie wysyłanych, jeszcze nie wysłane oraz usunięte listy.
SLIP (ang. Serial Line Interface Protocol)
Protokół transmisji poprzez łącze szeregowe. Protokół uzupełnia TCP/IP tak, aby można było przesyłać dane poprzez łącza szeregowe.
Smiley
Także emoticon, specjalny symbol, używany w poczcie elektronicznej oraz irc i listach dyskusyjnych, reprezentujący stan emocjonalny osoby przekazującej wiadomość. Symbol składa się ze znaków dostępnych bezpośrednio z klawiatury.
SNMP (ang. Simple Network Management Protocol)
Protokół zarządzania sieciami komputerowymi. Pozwala na zdalne, aczkolwiek ograniczone, monitorowanie sieci i zdalną konfigurację pewnych elementów.
Strona macierzysta
Zob. Home page.
Strona WWW (ang. Web page)
Dokument zapisany w formacie HTML, dostępny do powszechnego użytku w sieci Internet poprzez przeglądarki WWW.
Strona początkowa
Strona automatycznie wczytywana po uruchomieniu przeglądarki WWW. Netscape Navigator pozwala ustalić stronę początkową (home page), ale jednocześnie uruchamiać przeglądarkę z pustą stroną, bez konieczności łączenia się z siecią. Jest to wygodne np. wtedy, gdy sami konstruujemy dokument internetowy i kontrolujemy jego wygląd w pracującej w tle przeglądarce.
Subskrypcja
Przyłączenie się (bezpłatne) do istniejącej grupy dyskusyjnej. Wymaga to wybrania odpowiedniego serwera (np. news.nask.org.pl), przejrzenia dostępnych tam grup dyskusyjnych i zaznaczenia tych, które zamierzamy regularnie czytać.
Suite
Zob. Zestaw internetowy
Sygnatura (and. signature)
Podpis użytkownika, wstawiany pod treścią listu lub artykułu; zawiera zazwyczaj imię i nazwisko, a niekiedy także dodatkowe informacje identyfikujące, np. adres elektroniczny, firmę, tytuł, stanowisko, itp.
System wyszukiwawczy
Narzędzie do wyszukiwania informacji w Inernecie, oparty na zindeksowanych danych; bardziej zaawansowane systemy pozwalają wykorzystywać warunki logiczne i ograniczające. Największymi i najszybszymi systemami w Internecie są HotBot i Alta Vista, indeksujące dane z kilkudziesięciu mln stron internetowych, dokonując "obrotu" w ciągu 1-2 tygodni. Inny duży system - Lycos - gromadzi dane z ponad 10 mln stron.
Istnieją też systemy off-line - przykładem jest uproszczona baza Lycos na dysku kompaktowym, dostarczana z programem Internet Mania firmy Corel, która zawiera indeks ok. 400 tys. ważniejszych stron internetowych. System taki pozwala wyszukiwać informacje bez konieczności łączenia się z siecią.
Szyfrowanie (ang. encrypting)
Przekształcanie informacji do postaci nieczytelnej, dla zapewnienia jej poufności. Szyfrowanie wymaga dostarczenia klucza do odszyfrowania informacji przez odbiorcę.
Ślepa kopia poczty elektronicznej (ang. blind carbon copy)
Kopia listu wysłana do innej osoby, niż odbiorca poczty. Odbiorca listu nie wie, do jakich innych osób zostały wysłane kopie.

Tabela
Element dokumentu internetowego, pozwalający wprowadzać informacje w bardziej usystematyzowany sposób. Tabela składa się z kolumn i wierszy (zwykle obramowanych), które tworzą sieć komórek. Do komórek wprowadza się zazwyczaj dane liczbowe lub krótkie informacje tekstowe. Tabele mogą także posłużyć do symulowania szpalt.
Tag
Zob. Znacznik
TAR (ang. Tape ARchive)
Format archiwizacji plików w systemach Unix.
TCP/IP
Protokół komunikacyjny używany przez wszystkie komputery podłączone do Internetu.
TELNET
Program pozwalający na zdalne logowanie się do innego komputera i emulowanie zawartości jego ekranu tekstowego na ekranie maszyny lokalnej.
Temat (ang. subject)
Część nagłówka listu elektronicznego lub artykułu, zawierająca informację o temacie listu lub arykułu. Temat pozwala odbiorcy szybko zorientować się w charakterze informacji.
Token Ring
Jeden ze standardów sieci lokalnych. Działa w oparciu o przesyłanie tokena w kablu w formie pierścienia. Pierwszy standard przewidywał przesyłanie z szybkością 4 Mb/s, natomiast w obecnych sieciach osiągana prędkość to 16 Mb/s.
Tytuł
W dokumencie HTML jest to ciąg znaków, który przeglądarka WWW wyświetla w swojej belce tytułowej (w naszym kursie jest to napis "Kurs języka HTML"). Tytułu nie należy mylić z nagłówkami, które są wprowadzane do treści dokumentu.

Unix
System operacyjny stosowany dawniej na komputerach typu mainframe, a teraz nawet na personal. Na początku internet bazował na systemach unixowych, ale w chwili obecnej do połączeń można używać nawet PC pracujący w DOS lub Windows czy też Macintosh.
Upload
Przesłanie pliku z komputera lokalnego na odległy.
URL (ang. Uniform Resource Locator)
Próba standaryzowania formatu zapisu adresów i lokacji w internecie. Najczęściej używany dla opisania stron WWW. Przykładowe URL-e to: ftp://ftp.funet.fi/, http://www.gazeta.pl/, news://news.nask.org.pl/, mailto:pawel.wimmer@lupus.waw.pl.
USENET, USENET NEWS
Listy dyskusyjne w internecie. Nie są to listy rozsyłane pocztą do wszystkich zainteresowanych użytkowników, ale usługa typu klient-serwer. Osoba, która chce dyskutować podłącza się do tzw. News Serwera i czyta żądane listy.
Usługodawca inernetowy (ang. internet provider)
Dostawca usług internetowych. Zazwyczaj firma posiadająca szybkie łącze ze światem i wiele podłączeń telefonicznych (numerów dostępowych). Modemem podłączamy się do takiej firmy i dzięki niej łączymy się z dowolnym miejscem na świecie za cenę połączenia lokalnego. Usługodawca internetowy zazwyczaj oferuje szeroką gamę usług za które pobiera odpowiednie opłaty, choć wiele z nich jest oferowanych niekiedy za darmo (np. konta pocztowe, liczniki, statystyki, książki gości itp.)
UUCP (ang. Unix-to-Unix Copy)
Protokół służący dawniej do przesyłania poczty przy pomocy połączeń modemowych typu dial-up. Co jakiś czas dane maszyny łączyły się ze sobą dzwoniąc i przekazując wzajemnie oczekującą pocztę.
Uudecode
Metoda dekodowania plików ASCII do postaci binarnych, jeżeli wcześniej zakodowano je poprzez uuencode.
Uuencode
Metoda kodowania plików binarnych do postaci plików ASCII. Używając tej metody możliwe jest przesyłanie plików binarnych za pomocą poczty elektronicznej.

W3=World Wide Web
Walidacja
Proces weryfikowania poprawności składniowej dokumentu HTML. Wyróżnia się sprawdzanie poprawności składniowej połączone z kontrolą zgodności z oficjalną specyfikacją HTML, oraz sprawdzanie wyłącznie poprawności składniowej, nawet jeśli użyte polecenia wykraczają poza oficjalny HTML. W pierwszym przypadku stosowane są zazwyczaj serwisy sieciowe (tzw. parsery), w drugim na ogół specjalne programy instalowane na dysku (np. CSE 3310 HTML Validator).
WAN (ang. Wide Area Network)
Sieć złożona z komputerów znajdujących się w dużych odległościach od siebie (np. sieć internet). Wymagane jest zaangażowanie publicznej sieci telekomunikacyjnej. Sieć rozległa łączy sieci lokalne i miejskie.
Wątek (ang. thread)
Część artykułów w grupie dyskusyjnej, dotycząca tego samego tematu.
Wtyczka
Zob. Plug-in.
WWW (ang. World Wide Web)
Światowa pajęczyna. Rodzaj usługi polegającej na łączeniu się z różnymi miejscami na świecie za pomocą interfejsu graficznego lub tekstowego i oglądaniu tak zwanych stron WWW. Główną zaletą usługi jest jej bardzo wygodny interfejs, a co za tym idzie prosty sposób poruszania się po sieci i znajdowania dowolnych informacji.
Wykaz
Element dokumentu internetowego, składający się z kolejnych wierszy (punktów wykazu), zazwyczaj równoważników zdań. Stosowane są wykazy uporządkowane (wiersze są numerowane) i nieuporządkowane (opatrzone znakiem graficznym - kółeczkiem, kwadratem). Wykazy są przydatne przy tworzeniu hipertekstowego spisu treści czy wyliczaniu jakichś elementów.

Zakładka (ang bookmark)
Oznakowanie miejsca w Internecie, do którego chcemy szybko sięgnąć w następnych sesjach. Kliknięcie na zakładce pozwala wykonać skok do jakiegoś miejsca, zwalniając z konieczności ręcznego wpisywania adresu lub przechodzenia do niego poprzez inne strony. Zakładki pełnią rolę podręcznej książki adresowej, a w codziennej pracy wystarcza zazwyczaj kilkanaście-kilkadziesiąt zakładek. Istnieją też programy wspomagające, które służą do budowania obszernych i bardzo wygodnych w obsłudze książek adresowych - przykładem jest SmartMarks, współpracujący ściśle z Netscape Navigatorem.
Załącznik (ang. attachment)
Przesyłka w postaci pliku, dołączana do poczty elektronicznej, wysyłana zwykle dla oszczędzenia czasu w postaci skomprymowanej.
Zestaw internetowy (ang. Internet suite)
Zintegrowany zestaw programów obsługujących Internet. Zestawem jest np. Microsoft Internet Suite, Netscape Communicator, Quarterdeck Internet Suite i Delrina Cyberjack, które zawierają programy do obsługi WWW, FTP, poczty elektronicznej, grup dyskusyjnych itp. Zestawy są na ogół programami znacznie większymi objętościowo od zwykłych przeglądarek WWW i mogą należeć do kategorii oprogramowania komercyjnego.
Znacznik (ang. tag)
Polecenie języka HTML, wstawiane do dokumentu internetowego, które jest następnie interpretowane we właściwy sposób przez przeglądarkę WWW. Na przykład polecenie <P> powoduje utworzenie nowego akapitu, oddzielonego od poprzedzającego go elementu (np. tekstu) interlinią, polecenie <HR> powoduje wstawienie do dokumentu poziomej linii itd. Przeglądarki WWW różnią się zakresem interpretowanych znaczników, a największe możliwości oferuje tutaj Netscape Navigator.
Znaki specjalne (ang. special characters)
W szerokim rozumieniu jest to zestaw znaków (na ogół niedostępnych bezpośrednio z klawiatury) wprowadzanych do dokumentu HTML w specjalny sposób (np. ", &, < >, £, §, ©, ®, µ, ¶), z użyciem ich kodów. Niektóre znaki (np. nawiasy ukośne) są kodami sterującymi w dokumentach HTML, a więc ich odzwierciedlenie w dokumencie wymaga innego sposobu wprowadzenia.


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Znaki specjalne

W dokumentach WWW powinniśmy stosować standard kodowania ISO-8859-2, gdyż taka jest przyjęta w naszym kraju norma. Polskie znaki powinniśmy także zapisywać 8-bitowo, a więc "ą", "ę", a nie w postaci różnych dziwnych symboli, w rodzaju &bleble;. Podkreślam to mocno, gdyż wiele osób posługuje się nieświadomie edytorami (graficznymi i znakowymi), które domyślnie przetwarzają wprowadzone za pomocą klawiatury polskie znaki na takie właśnie 7-bitowe znaki symboliczne. Efektem jest "kasza" na ekranie przeglądarki.

Drugim ważnym powodem, dla którego powinniśmy się posługiwać znakami 8-bitowymi, jest możność wykorzystania w sposób "opisowy" znaków z innych języków, a przede wszystkim wprowadzenia różnych znaków specjalnych. W poniższej tabeli (będącej fragmentem obszerniejszego dokumentu w "HTML Reference Library") prezentujemy zestawienie przydatnych znaków. Zostały tutaj niemal w całości pominięte znaki, które można wprowadzić z klawiatury.

Pierwsza kolumna tabeli podaje numery znaków. Jeśli wpiszemy w edytorze HTML taki właśnie numer, otrzymamy wynik prezentowany w czwartej kolumnie. Druga kolumna zawiera alternatywne, "opisowe" sposoby wprowadzania znaków. Niektórych z nich warto się nawet nauczyć na pamięć, co nie będzie trudne ze względu na ich "mnemoniczny" charakter. Nie jest chyba trudno zapamiętać, że gdy napiszemy &pound;, dostaniemy w efekcie znak brytyjskiego funta - £. Podobnie jest w przypadku znaku copyright (&copy; = ©), zarejestrowanego znaku towarowego (&reg; = ®) czy ułamka 1/4 (&frac14; = ¼). Trzecia kolumna zawiera słowny opis znaku - pozostawiłem tutaj opisy angielskie, aby kojarzyły się z "opisową" metodą wprowadzania znaków.

Uwaga: niestety, wielu znaków nie interpretuje Netscape Navigator.

Numer | Nazwa | Opis | Reprezentacja w przeglądarce
&#38; | &amp; | Ampersand | &
&#60; | &lt; | Less than | <
&#62; | &gt; | Greater than | >
&#160; | &nbsp; | Non-breaking space |
&#161; | &iexcl; | Inverted exclamation | ¡
&#162; | &cent; | Cent sign | ¢
&#163; | &pound; | Pound sterling sign | £
&#164; | &curren; | General currency sign | ¤
&#165; | &yen; | Yen sign | ¥
&#166; | &brvbar; | Broken vertical bar | ¦
&#167; | &sect; | Section sign | §
&#168; | &uml; | Umlaut (dierisis) | ¨
&#169; | &copy; | Copyright | ©
&#170; | &ordf; | Feminine ordinal | ª
&#171; | &laquo; | Left angle quote, guillemot left | «
&#172; | &not; | Not sign | ¬
&#173; | &shy; | Soft hyphen |
&#174; | &reg; | Registered trademark | ®
&#175; | &macr; | Macron accent | ¯
&#176; | &deg; | Degree sign | °
&#177; | &plusmn; | Plus or minus | ±
&#178; | &sup2; | Superscript two | ²
&#179; | &sup3; | Superscript three | ³
&#180; | &acute; | Acute accent | ´
&#181; | &micro; | Micro sign | µ
&#182; | &para; | Paragraph sign | ¶
&#183; | &middot; | Middle dot | ·
&#184; | &cedil; | Cedilla | ¸
&#185; | &sup1; | Superscript one | ¹
&#186; | &ordm; | Masculine ordinal | º
&#187; | &raquo; | Right angle quote, guillemot right | »
&#188; | &frac14; | Fraction (one quarter) | ¼
&#189; | &frac12; | Fraction (one half) | ½
&#190; | &frac34; | Fraction (three quarters) | ¾
&#191; | &iquest; | Inverted question mark | ¿
&#192; | &Agrave; | Capital A, grave accent | À
&#193; | &Aacute; | Capital A, acute accent | Á
&#194; | &Acirc; | Capital A, circumflex accent | Â
&#195; | &Atilde; | Capital A, tilde | Ã
&#196; | &Auml; | Capital A, umlaut (dierisis) | Ä
&#197; | &Aring; | Capital A, ring | Å
&#198; | &AElig; | Capital AE dipthong (ligature) | Æ
&#199; | &Ccedil; | Capital C, cedilla | Ç
&#200; | &Egrave; | Capital E, grave accent | È
&#201; | &Eacute; | Capita E, acute accent | É
&#202; | &Eirc; | Capital E, circumflex accent | Ê
&#203; | &Euml; | Capital E, umlaut (dierisis) | Ë
&#204; | &Igrave; | Capital I, grave accent | Ì
&#205; | &Iacute; | Capital I, acute accent | Í
&#206; | &Icirc; | Capital I, circumflex accent | Î
&#207; | &Iuml; | Capital I, umlaut (dierisis) | Ï
&#208; | &ETH; | Capital Eth, Icelandic | Ð
&#209; | &Ntilde; | Capital N, tilde | Ñ
&#210; | &Ograve; | Capital O, grave accent | Ò
&#211; | &Oacute | Capital O, acute accent | Ó
&#212; | &Ocirc; | Capital O, circumflex accent | Ô
&#213; | &Otilde; | Capital O, tilde | Õ
&#214; | &Ouml; | Capital O, umlaut (dierisis) | Ö
&#215; | &times; | Multiply sign | ×
&#216; | &Oslash; | Capital O, slash | Ø
&#217; | &Ugrave | Capital U, grave accent | Ù
&#218; | &Uacute; | Capital U, acute accent | Ú
&#219; | &Ucirc; | Capital U, circumflex accent | Û
&#220; | &Uuml; | Capital U, umlaut (dierisis) | Ü
&#221; | &Yacute; | Capital Y, acute accent | Ý
&#222; | &THORN; | Capital Thorn, Icelandic | Þ
&#223; | &szlig; | Small sharp s, German (sz ligature) | ß
&#224; | &agrave; | Small a, grave accent | à
&#225; | &aacute; | Small a, acute accent | á
&#226; | &acirc; | Small a, circumflex accent | â
&#227; | &atilde; | Small a, tilde | ã
&#228; | &auml | Small a, umlaut (dierisis) | ä
&#229; | &aring; | Small a, ring | å
&#230; | &aelig; | Small ae dipthong (ligature) | æ
&#231; | &ccedil; | Small c, cedilla | ç
&#232; | &egrave; | Small e, grave accent | è
&#233; | &eacute; | Small e, acute accent | é
&#234; | &ecirc; | Small e, circumflex accent | ê
&#235; | &euml; | Small e, umlaut (dierisis) | ë
&#236; | &igrave; | Small i, grave accent | ì
&#237; | &iacute; | Small i, acute accent | í
&#238; | &icirc; | Small i, circumflex accent | î
&#239; | &iuml; | Small i, umlaut (dierisis) | ï
&#240; | &eth; | Small eth, Icelandic | ð
&#241; | &ntilde; | Small n, tilde | ñ
&#242; | &ograve; | Small o, grave accent | ò
&#243; | &oacute; | Small o, acute accent | ó
&#244; | &ocirc; | Small o, circumflex accent | ô
&#245; | &otilde; | Small o, tilde | õ
&#246; | &ouml; | Small o, umlaut (dierisis) | ö
&#247; | &divide; | Division sign | ÷
&#248; | &oslash; | Small o, slash | ø
&#249; | &ugrave; | Small u, grave accent | ù
&#250; | &uacute; | Small u, acute accent | ú
&#251; | &ucirc; | Small u, circumflex accent | û
&#252; | &uuml; | Small u, umlaut (dierisis) | ü
&#253; | &yacute; | Small y, acute accent | ý
&#254; | &thorn; | Small thorn, Icelandic | þ
&#255; | &yuml; | Small y, umlaut (dierisis) | ÿ
&#338; | &OElig; | Latin Capital OE (ligature) | Œ
&#339; | &oelig; | Latin Small OE (ligature) | œ
&#352; | &Scaron; | Capital S with caron | Š
&#353; | &scaron; | Small s with caron | š
&#376; | &Yuml; | Capital Y with dierisis | Ÿ
&#710; | &circ; | Circumflex accent | ˆ
&#732; | &tilde; | Small tilde | ˜
&#8211; | &ndash; | En dash | –
&#8212; | &mdash; | Em dash | —
&#8216; | &lsquo; | Left single quotation mark | ‘
&#8217; | &rsquo; | Right single quotation mark | ’
&#8218; | &sbquo; | Single low-9 quotation mark | ‚
&#8220; | &ldquo; | Left double quotation mark | “
&#8221; | &rdquo; | Right double quotation mark | ”
&#8222; | &bdquo; | Double low-9 quotation mark | „
&#8224; | &dagger; | Dagger | †
&#8225; | &Dagger; | Double Dagger | ‡
&#8240; | &permil; | Per mille (thousand) sign | ‰
&#8249; | &lsaquo; | Single left-pointing angle quotation mark | ‹
&#8250; | &rsaquo; | Single right-pointing angle quotation mark | ›
&#8364; | &euro; | Euro sign* | €

Źródło: Stephen Le Hunte, "HTML Reference Library 4", 1998.


Ankieta

Prosimy o wypełnienie ankiety, która pozwoli nam lepiej ocenić grono osób
zainteresowanych językiem HTML i publikowaniem w Internecie

[informacje mają jedynie statystyczny charakter i nie są udostępniane na zewnątrz]

[zielona kropka] Imię i nazwisko lub jakikolwiek pseudonim

[zielona kropka] Poczta elektroniczna (pole obowiązkowe)

[zielona kropka] Twoja płeć

Kobieta
Mężczyzna
[zielona kropka] Twój wiek

Do 20
21-30
31-40
41-50
51-60
ponad 60
[zielona kropka] Czym się zajmujesz?

Uczę się
Pracuję
Jestem na emeryturze
Co innego
[zielona kropka] Jak duża jest Twoja miejscowość (liczba mieszkańców)?

Do 10 tys.
10-50 tys.
50-100 tys.
100 tys.-1 milion
Powyżej 1 miliona
[zielona kropka] Jakiego komputera używasz?

PC XT
PC AT
PC 386
PC 486
PC Pentium
PC Pentium II
PC Pentium Celeron
PC Pentium III
PC AMD
Macintosh
Amiga
Atari
Inny
[zielona kropka] Jakiego systemu operacyjnego używasz?

DOS
Windows 3.x
Windows 95
Windows 98
Windows NT
Linux
inny Unix
OS/2 Warp
MacOS
AmigaOS
AtariOS
Inny
[zielona kropka] Jakiej przeglądarki WWW używasz?

Internet Explorer
Netscape Navigator
Opera
NCSA Mosaic
Web Explorer
Lynx
Quarterdeck Internet Suite
Delrina Cyberjack
Inna
[zielona kropka] Jak oceniasz kurs HTML?

Bardzo dobry
Dobry
Dostateczny
Niedostateczny
[zielona kropka] Jakie popularne czasopisma komputerowe czytasz?

Enter
PCkurier
Chip
PCWorld Komputer
Komputer Świat
Computerworld
Internet
WWW
Inne
[zielona kropka] Ile godzin tygodniowo pracujesz zazwyczaj w Internecie?

Do 5 godzin
5-10 godzin
10-20 godzin
20-30 godzin
Więcej niż 30 godzin
[zielona kropka] Jeśli masz jakieś dodatkowe uwagi, życzenia i postulaty, wpisz je tutaj.

[zielona kropka] Jeśli skończyłeś wpisywać informacje, kliknij na przycisku Wyślij. Jeśli chcesz wszystkie poprawić, kliknij na przycisku Usuń.


Kolory

 Wróć

Predefiniowane wartości kolorów
Wszystkie znajdujące się w poniższej tabeli wartości kolorów mogą być używane w języku HTML i JavaScript do definiowania kolorów tekstu i tła za pomocą alinkColor, bgColor, fgColor, linkColor, vlinkColor albo z wykorzystaniem metody fontColor. Tabela zawiera wszystkie predefiniowane nazwy kolorów oraz ich składowe RGB (czerwony, zielony, niebieski) w zapisie szesnastkowym.

Źródło: CHIP Special nr 3 pt. "HTML i Java" strona 150 i 151 ( Kwiecień 1997r. )

Kolor

Nazwa angielska

Definica RGB

Symbol
czerwony zielony niebieski
KOLOR
KOLOR 		  aliceblue F0F8FF 240 248 255
KOLOR
KOLOR 		  antiquewhite FAEBD7 250 235 215
KOLOR
KOLOR 		  agua 00FFFF 0 255 255
KOLOR
KOLOR 		  aquamarine 7FFFD4 126 255 212
KOLOR
KOLOR 		  azure F0FFFF 240 255 255
KOLOR
KOLOR 		  beige F5F5DC 245 245 220
KOLOR
KOLOR 		  bisque FFE4DC 255 228 220
KOLOR
KOLOR 		  black 000000 0 0 0
KOLOR
KOLOR 		  blanchedalmond FFEBCD 255 235 205
KOLOR
KOLOR 		  blue 0000FF 0 0 255
KOLOR
KOLOR 		  blueviolet 8A2BE2 138 43 226
KOLOR
KOLOR 		  brown A52A2A 165 42 42
KOLOR
KOLOR 		  burlywood DEB887 222 184 135
KOLOR
KOLOR 		  cadetblue 5F9EA0 95 158 160
KOLOR
KOLOR 		  chartreuse 7FFF00 127 255 0
KOLOR
KOLOR 		  chocolate D2691E 210 105 30
KOLOR
KOLOR 		  coral FF7F50 255 127 80
KOLOR
KOLOR 		  cornflowerblue 6495ED 40 149 237
KOLOR
KOLOR 		  cornsilk FFF8DC 255 248 220
KOLOR
KOLOR 		  crimson DC143C 220 20 60
KOLOR
KOLOR 		  cyan 00FFFF 0 255 255
KOLOR
KOLOR 		  darkblue 00008B 0 0 139
KOLOR
KOLOR 		  darkcyan 008B8B 0 139 139
KOLOR
KOLOR 		  darkgoldenrod B8860B 184 134 11
KOLOR
KOLOR 		  darkgray A9A9A9 169 169 169
KOLOR
KOLOR 		  darkgreen 006400 0 100 0
KOLOR
KOLOR 		  darkkhaki BDB76B 189 183 107
KOLOR
KOLOR 		  darkmagenta 8B008B 139 0 139
KOLOR
KOLOR 		  darkolivegreen 556B2F 85 107 47
KOLOR
KOLOR 		  darkorange FF8C00 255 140 0
KOLOR
KOLOR 		  darkorchid 9932CC 153 50 204
KOLOR
KOLOR 		  darkred 8B0000 139 0 0
KOLOR
KOLOR 		  darksalmon E9967A 233 150 122
KOLOR
KOLOR 		  darkseagreen 8FBC8F 143 188 143
KOLOR
KOLOR 		  darkslateblue 483D8B 72 61 139
KOLOR
KOLOR 		  darkslategray 2F4F4F 47 79 79
KOLOR
KOLOR 		  darkturquoise 00BFFF 0 191 255
KOLOR
KOLOR 		  darkviolet 9400D3 148 0 211
KOLOR
KOLOR 		  deeppink FF1493 255 20 147
KOLOR
KOLOR 		  deepskyblue 00BFFF 0 191 255
KOLOR
KOLOR 		  dimgray 696969 105 105 105
KOLOR
KOLOR 		  dodgerblue 1E90FF 30 144 255
KOLOR
KOLOR 		  firebrick B22222 178 34 34
KOLOR
KOLOR 		  floralwhite FFFAF0 255 250 240
KOLOR
KOLOR 		  forestgreen 228B22 34 139 34
KOLOR
KOLOR 		  fuchsia FF00FF 255 0 255
KOLOR
KOLOR 		  gainsboro DCDCDC 220 220 220
KOLOR
KOLOR 		  ghostwithe F8F8FF 248 248 255
KOLOR
KOLOR 		  gold FFD700 255 215 0
KOLOR
KOLOR 		  goldenrod DAA520 218 165 32
KOLOR
KOLOR 		  gray 808080 128 128 128
KOLOR
KOLOR 		  green 008000 0 128 0
KOLOR
KOLOR 		  greenyellow ADFF2F 173 255 47
KOLOR
KOLOR 		  honeydew F0FFF0 240 255 240
KOLOR
KOLOR 		  hotpink FF69B4 255 105 180
KOLOR
KOLOR 		  indianred CD5C5C 205 92 92
KOLOR
KOLOR 		  indigo 4B0082 75 0 130
KOLOR
KOLOR 		  ivory FFFFF0 255 255 240
KOLOR
KOLOR 		  khaki F0E68C 240 230 140
KOLOR
KOLOR 		  levender E6E6FA 230 230 250
KOLOR
KOLOR 		  levenderblush FFF0F5 255 240 245
KOLOR
KOLOR 		  lawngreen 7CFC00 124 252 0
KOLOR
KOLOR 		  lemonchiffon FFFACD 255 250 205
KOLOR
KOLOR 		  lightblue ADD8E6 173 216 230
KOLOR
KOLOR 		  lightcoral F08080 240 128 128
KOLOR
KOLOR 		  lightcyan E0FFFF 224 255 255
KOLOR
KOLOR 		  lightgoldenrodyellow FAFAD2 250 250 210
KOLOR
KOLOR 		  lightgreen 90EE90 144 238 144
KOLOR
KOLOR 		  lightgrey D3D3D3 211 211 211
KOLOR
KOLOR 		  lightpink FFB6C1 255 182 193
KOLOR
KOLOR 		  lightsalmon FFA07A 255 160 122
KOLOR
KOLOR 		  lightseagreen 20B2AA 170 178 32
KOLOR
KOLOR 		  lightskyblue 87CEFA 135 206 250
KOLOR
KOLOR 		  lightslategray 778899 119 136 153
KOLOR
KOLOR 		  lightsteelblue B0C4DE 176 196 222
KOLOR
KOLOR 		  lightyellow FFFFE0 255 255 224
KOLOR
KOLOR 		  lime 00FF00 0 255 0
KOLOR
KOLOR 		  limegreen 32CD32 50 205 50
KOLOR
KOLOR 		  linen FAF0E6 250 240 230
KOLOR
KOLOR 		  magenta FF00FF 255 0 255
KOLOR
KOLOR 		  maroon 800000 128 0 0
KOLOR
KOLOR 		  mediummaquamarine 66CDAA 102 205 170
KOLOR
KOLOR 		  mediumblue 0000CD 0 0 205
KOLOR
KOLOR 		  mediumorchid BA55D3 186 85 211
KOLOR
KOLOR 		  mediumpurple 9370DB 147 112 219
KOLOR
KOLOR 		  mediumseagreen 3CB371 60 179 113
KOLOR
KOLOR 		  mediumslateblue 7B68EE 123 104 238
KOLOR
KOLOR 		  mediumspringgreen 00FA9A 0 250 154
KOLOR
KOLOR 		  mediumturquoise 48D1CC 72 209 204
KOLOR
KOLOR 		  mediumvioletred CD1585 205 21 133
KOLOR
KOLOR 		  midnightblue 191970 25 25 112
KOLOR
KOLOR 		  mintcream F5FFFA 245 255 250
KOLOR
KOLOR 		  mistyrose FFE4E1 255 228 225
KOLOR
KOLOR 		  moccasin FFE4B5 255 228 181
KOLOR
KOLOR 		  navajowhite FFDEAD 255 222 173
KOLOR
KOLOR 		  navy 000080 0 0 128
KOLOR
KOLOR 		  oldlace FDF5E6 253 245 230
KOLOR
KOLOR 		  olive 808000 128 128 0
KOLOR
KOLOR 		  olivedrab 6B8E23 107 142 35
KOLOR
KOLOR 		  orange FFA500 255 165 0
KOLOR
KOLOR 		  orangered FF4500 255 69 0
KOLOR
KOLOR 		  orchid DA70D6 218 112 214
KOLOR
KOLOR 		  palegoldenrod EEE8AA 238 232 170
KOLOR
KOLOR 		  palegreen 98FB98 152 251 152
KOLOR
KOLOR 		  palaturquoise AFEEEE 175 238 238
KOLOR
KOLOR 		  palevioletred DB7093 219 112 147
KOLOR
KOLOR 		  papayawhip FFEFD5 255 239 213
KOLOR
KOLOR 		  peachpuff FFDAB9 255 218 185
KOLOR
KOLOR 		  peru CD853F 205 133 63
KOLOR
KOLOR 		  pink FFC0CB 255 192 203
KOLOR
KOLOR 		  plum DDA0DD 221 160 221
KOLOR
KOLOR 		  powderblue B0E0E6 176 224 230
KOLOR
KOLOR 		  purple 800080 128 0 128
KOLOR
KOLOR 		  red FF0000 255 0 0
KOLOR
KOLOR 		  rosybrown BC8F8F 188 143 143
KOLOR
KOLOR 		  royalblue 4169E1 29 105 225
KOLOR
KOLOR 		  saddlebrown 8B4513 139 69 19
KOLOR
KOLOR 		  salmon FA8072 250 128 114
KOLOR
KOLOR 		  sandybrown F4A460 244 164 96
KOLOR
KOLOR 		  seagreen 2E8B57 46 139 87
KOLOR
KOLOR 		  seashell FFF5EE 255 245 238
KOLOR
KOLOR 		  sienna A0522D 160 82 45
KOLOR
KOLOR 		  silver C0C0C0 192 192 192
KOLOR
KOLOR 		  skyblue 87CEEB 135 206 235
KOLOR
KOLOR 		  slateblue 6A5ACD 205 90 205
KOLOR
KOLOR 		  slategray 708090 112 128 144
KOLOR
KOLOR 		  snow FFFAFA 255 250 250
KOLOR
KOLOR 		  springgreen 00FF7F 0 255 127
KOLOR
KOLOR 		  steelblue 4682B4 70 130 180
KOLOR
KOLOR 		  tan D2B48C 210 180 140
KOLOR
KOLOR 		  teal 008080 0 128 128
KOLOR
KOLOR 		  thistle D8BFD8 216 191 216
KOLOR
KOLOR 		  tomato FF6347 255 99 71
KOLOR
KOLOR 		  turquoise 40E0D0 64 224 208
KOLOR
KOLOR 		  violet EE82EE 238 130 238
KOLOR
KOLOR 		  wheat F5DEB3 245 222 179
KOLOR
KOLOR 		  white FFFFFF 255 255 255
KOLOR
KOLOR 		  whitesmoke F5F5F5 245 245 245
KOLOR
KOLOR 		  yellow FFFF00 255 255 0
KOLOR
KOLOR 		  yellowgreen 9ACD32 154 205 50

Wróć


Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Wprowadzenie do FrontPage Express

Osobiście zalecam wszystkim zapoznanie się z poleceniami języka HTML i stosowanie tekstowych edytorów HTML. Jednak zdaję sobie doskonale sprawę z tego, że wiele osób pragnie szybko napisać swoją pierwszą stronę, nie wnikając zbytnio w szczegóły języka. Można to zrobić, zapoznając się z podstawowymi poleceniami opisanymi na stronie "HTML dla bardzo początkujących".

Gdyby jednak ktoś chciał jeszcze bardziej przyspieszyć swój debiut w World Wide Web, może skorzystać z niezłego edytora HTML o nazwie FrontPage Express, który jest dostarczany za darmo w ramach pakietu Internet Explorer. Jest to graficzne narzędzie, które pozwala bardzo szybko zbudować całkiem funcjonalną witrynę. Gdy już strona będzie funkcjonować, możemy stopniowo zaznajamiać się z językiem, a w pewnym momencie przejść na tekstowy edytor HTML, co da nam większą swobodę i lepszą kontrolę nad kodem naszych stron.

Aby strona utworzona za pomocą FrontPage Express była poprawna, warto poznać kilka istotnych faktów, co uchroni nas przed błędami i lepiej zdefiniuje stronę w Internecie. Temu właśnie jest poświęcone niniejsze Wprowadzenie.

Struktura witryny

Przede wszystkim utwórz katalog, w którym będziesz gromadzić elementy swojej witryny - strony i grafiki. Zakładamy tutaj, dla uproszczenia, że witryna jest niezbyt rozbudowana i zawiera kilka (co najwyżej kilkanaście) odrębnych stron, a także pewną liczbę obrazków. Możesz zatem zapisywać swoje strony we wskazanym katalogu na dysku, a dla grafik utwórz podkatalog, np. mający nazwę grafika, albo media, jeśli wstawiasz także pliki dźwiękowe. Jeśli twój usługodawca internetowy pozwala tworzyć podkatalogi na serwerze, niech struktura witryny na dysku ODPOWIADA DOKŁADNIE strukturze na serwerze. Znacznie łatwiej jest wtedy budować witrynę ze wszystkimi zależnościami stron, a zarazem posyłać ją na serwer.

Zapisywanie pliku

Otwórz edytor i od razu zapisz pustą stronę w swoim katalogu. Wykonaj następującą sekwencję działań:

Plik - Zapisz jako

W okienku dialogowym Zapisz jako wpisz od razu tytuł strony (w polu Tytuł strony), np. Strona domowa Jana Kowalskiego.

Zignoruj informację w polu Lokalizacja strony - kliknij na przycisku Jako plik i w okienku dialogowym Zapisz jako plik znajdź na dysku swój katalog, a następnie podaj nazwę strony index.htm lub index.html.

Podkreślam konieczność zapisania od razu pliku na dysku, gdyż dzięki temu będzie można stosować adresy względne dla różnych plików. Kilka słów na ten temat znajdziesz niżej.

Informacje o stronie

Na dysku masz już więc pierwszą stronę, ale to bynajmniej nie wszystko. Warto jeszcze wykonać kilka czynności, których efekty przydadzą się bardzo, gdy strona znajdzie się na serwerze i będzie widoczna dla stu milionów internautów na całym świecie.

Przede wszystkim musimy pamiętać, że strona powinna być kodowana w standardzie ISO-8859-2, który jest polską normą, zgodną ze światowymi standardami. Na razie twoja strona jest zapisana w standardzie Windows, o czym być może nawet jeszcze nie wiesz. Aby to zmienić, wykonaj następujące czynności:

Plik - Właściwości strony

Na początku zostanie wyświetlona zakładka Ogólne. Na dole okienka dialogowego znajdziesz blok Kodowanie HTML. Rozwiń listę Do zapisywania tej strony i wybierz pozycję Środkowoeuropejski (ISO 8859-2).

Dzięki temu twoja strona będzie automatycznie zapisywana w standardzie ISO, chociaż w samym edytorze używasz normalnej polskiej klawiatury Windows. Edytor sam dokona konwersji w tle. Pamiętaj, aby każda nowa strona była tak właśnie określona. Oczywiście dla każdej strony wystarczy wykonać tę czynność tylko raz.

Załatwiliśmy więc problem strony kodowej, ale to nie wszystko. Powinieneś koniecznie dodać kilka istotnych informacji (META), które będą lepiej identyfikować twoją strone w Sieci. Informacje te należą do nagłówka dokumentu i są istotne dla wszystkich ważnych systemów wyszukiwawczych, takich jak Infoseek, AltaVista, HotBot i wiele innych. Koniecznie je umieszczaj na wszystkich swoich stronach, gdyż ułatwisz innym dotarcie do twojego dzieła.

W okienku dialogowym Właściwości strony kliknij teraz na zakładce Niestandardowe. Zobaczysz tam, że twoja strona zawiera już dwie informacje - w zmiennych systemowych znajduje się informacja o stronie kodowej dokumentu, a w zmiennych użytkownika jest automatycznie wstawiona informacja o generatorze strony, czyli, w naszym przypadku, Microsoft FrontPage Express 2.0.

Kliknij na przycisku Dodaj w bloku Zmienne użytkownika. Na ekranie pojawi się okienko dialogowe Meta zmienne użytkownika.

W polu Nazwa wpisz author, a w polu Wartość - swoje imię i nazwisko. Zatwierdź wpis kliknięciem na OK.

Ponownie kliknij na Dodaj. Wpisz w Nazwa wyraz keywords, a w Wartość wyrazy kluczowe, które będą indeksowane przez wyszukiwarki. Jeśli przygotowujesz stronę poświęconą jakiemuś działowi muzyki, możesz podać np. muzyka,jazz,Armstrong. Rozdzielaj wyrazy przecinkami. Możesz podać nawet kilkanaście-kilkadziesiąt wyrazów kluczowych.

Kolejna informacja META to opis strony. Wpisz w odpowiednich polach Description i np. Strona poświęcona jazzowi, a przede wszystkim Louisowi Armstrongowi. Staraj się nie przekraczać 150-200 znaków.

Gdy ktoś będzie poszukiwać stron poświęconych jazzowi i użyje np. wyszukiwarki Infoseek PL, zobaczy informację:

Strona domowa Jana Kowalskiego
Strona poświęcona jazzowi, a przede wszystkim Louisowi Armstrongowi

Pierwszy wiersz odpowiada tytułowi strony i jest jednocześnie odsyłaczem do twojej strony. Drugi wiersz zawiera podany przez ciebie opis, czyli Description. Bardzo ułatwisz w ten sposób innym użytkownikom Internetu znalezienie potrzebnych im informacji. Tytuł, wyrazy kluczowe i opis strony wysuną zarazem twoją stronę do przodu na liście znalezionych adresów.

Więcej informacji o danych META znajdziesz na stronie Struktura dokumentu.

Wstawianie grafiki

Jeśli chcesz wstawić grafikę do dokumentu, przygotuj wcześniej pliki graficzne i skopiuj je do przeznaczonego na to katalogu, np. grafika lub media.

Wybierz w meny Wstaw - Obraz. W okienku dialogowym Obraz kliknij na przycisku Przeglądaj i przejdź do katalogu z grafikami, wybierz obrazek i kliknij na Otwórz.

W tym momencie ujawnia się korzyść z wcześniejszego zapisania dokumentu na dysku. Odsyłacz do grafiki jest wstawiany w postaci względnej, a więc np. grafika/obrazek.gif. Gdyby dokument nie był zapisany, pojawi się adres bezwzględny, czyli pokazujący dokładne położenie grafiki NA DYSKU. Edytor "nie wie" z góry, jakie będzie położenie naszego dokumentu i "na wszelki wypadek" tworzy dokładny odsyłacz. Podkreślam ten moment, gdyż jest to dość często spotykany błąd początkujących webmasterów, którzy dziwią się, dlaczego ich grafika nie jest widoczna w Sieci. Nie może być widoczna, skoro odwołaliśmy się do pliku na dysku! Gdyby natomiast w dokumencie był umieszczony adres względny grafiki, grafika będzie widoczna, gdyż "będzie jej wszystko jedno", czy jest na serwerze, czy na dysku. Taki adres zawsze będzie poprawny.

Inny błąd to odwoływanie się do grafiki, która w naszym komputerze jest położona na innym dysku. Nawet gdy zapiszemy wcześniej nasz dokument, edytor i tak będzie musiał wstawić bezwzględny adres pliku na innym dysku. Także i taki adres nie będzie poprawnie działać w Sieci.

Pamiętaj więc: zawsze kopiuj obrazki do odpowiedniego katalogu i zanim je wstawisz do dokumentu, zapisz plik HTML na dysku!

Czcionka

FrontPage Express zawiera w pasku narzędziowym formatowania rozwijaną listę czcionek. NIE UŻYWAJ ICH!. Domyślnie czcionka ekranowa jest wyświetlana jako Times New Roman. Początkujący webmaster sądzi niekiedy, że zmiana czcionki, np. wybranie Arial, spowoduje korzystną zmianę w dokumencie. Efektem jawnej zmiany czcionki jest wstawienie do dokumentu polecenia font face="nazwa czcionki". To polecenie nie jest zalecane. Użytkownicy Internetu dysponują różnymi czcionkami w swoich komputerach i gdy wstawisz np. polecenie zmieniające czcionkę na Avenida LET, zapewne mało kto dostrzeże zmianę, gdy niewiele osób ma ją w swoim komputerze. Ty ją widzisz w swoim systemie, ale inni jej nie widzą.

WebBots

Dynamiczne składniki WebBots są przydatne wtedy, gdy na serwerze znajdują się specjalne rozszerzenia Microsoftu - może je postawić jedynie administrator serwera. WebBots są szczególnie rozwinięte w edytorze FrontPage, natomiast wersja Express oferuje trzy przykłady.

Nie używaj Search, czyli robota do wyszukiwania informacji w witrynie. Bez rozszerzeń nie będzie on działać.

Możesz użyć TimeStamp do wyświetlania daty aktualizacji strony. Na przykład:

Wstaw - Składnik WebBot - TimeStamp - Data ostatniej edycji

Możesz wybrać format daty i czasu, ale wybierz jedynie wartości liczbowe, gdyż edytor niepoprawnie wyświetla przypadek gramatyczny; maj, zamiast maja itd.

Aby data i czas były poprawne, tuż przed ostatecznym zapisaniem strony odśwież ją w edytorze - przycisk Odśwież lub klawisz F5.

Bez rozszerzeń serwerowych nie używaj Include, który pozwala automatycznie aktualizować fragment strony na podstawie zmieniającej się zawartości innej strony. Możesz jednak zastosować "półautomatyczne" rozwiązanie, odświeżając stronę ręcznie w edytorze, a dopiero potem posłać ją na serwer. Oczywiście to tylko półśrodek.

Odsyłacze do stron

Gdy tworzysz w swojej witrynie odsyłacz do innej strony otwórz ją wcześniej, a jeśli jej jeszcze nie ma, utwórz ją i zapisz na dysku, a następnie otwórz. Jest to po prostu najwygodniejsza metoda.

Na stronie, na której tworzysz odsyłacz, zaznacz blokiem tekst odsyłacza i wybierz w menu Wstaw - Hiperłącze (lub Ctrl-k lub przycisk Hiperłącze).

W okienku dialogowym Utwórz hiperłącze, w części Otwarte strony, zobaczysz listę otwartych w edytorze plików. Wskaż po prostu jeden z nich i zatwierdź przyciskiem OK.

Uwaga: nie przestrasz się komunikatu Połączenie ze strony sieci Web do lokalnego pliku.... Kliknij na Tak.

Jeśli zechcesz utworzyć odsyłacz do strony w Internecie, poza twoją witryną, wybierz w okienku dialogowym Sieć Web, wskaż typ łącza http i w polu URL dopisz adres, np. www.polbox.pl/lupus.

Gdy tworzysz adres poczty elektronicznej, np. do siebie samego, wybierz typ mailto i dopisz adres pocztowy, np. jan.kowalski@firma.com.pl.

Edytor pozwala utworzyć odsyłacz do nie istniejącej jeszcze strony w twojej witrynie - Nowa strona. Wpisz tytuł i nazwę pliku, a w okienku Nowa strona wybierz pozycję Strona, czyli pusty szablon. Następnie zapisz od razu pustą stronę. Musisz użyć polecenia Plik - Zapisz jako i w okienku Zapisz jako wybrać Jako plik.

Dość często podajemy odsyłacze nie tylko do strony, ale i do konkretnego miejsca na stronie. Miejsce takie zaznacz na stronie docelowej zakładką. Zaznacz blokiem miejsce i wybierz w menu Edycja - Zakładka. Blok pojawi się od razu jako nazwa zakładki (możesz ją oczywiście zmienić). Zatwierdź wybór. Zakładka pojawi się w edytorze jako przerywane podkreślenie.

Przejdź do strony, na której będzie umieszczony odsyłacz. Zaznacz blokiem tekst odsyłacza i wybierz Wstaw - Hiperłącze. W Otwartych stronach wskaż stronę, do której się odwołujesz, a następnie w rozwijanym polu Zakładka wybierz nazwę utworzonej wcześniej zakładki.

Wstawianie plików

Do redagowanego dokumentu możemy wstawiać gotowe pliki dokumentów z zewnątrz - Wstaw - Plik. Najbezpieczniej jest wstawiać pliki HTML oraz pliki tekstowe (zazwyczaj TXT). W przypadku tych ostatnich przygotuj wersję w standardzie kodowania Windows-1250.

Kłopoty mogą się pojawić wtedy, gdy będziemy chcieli wstawić na przykład dokument Worda 2.0 czy Works. FP Express uparcie wstawia tutaj plik RTF. W takiej sytuacji należy wcześniej zamienić takie pliki na postać tekstową. Podobnie ma się rzecz z dokumentami WordPerfecta 5.


Jak publikować w języku Esperanto?

Nieszczęsne daszki i łuczki języka Esperanto (12 specjalnych liter) były przedmiotem niezliczonych dyskusji, kłótni, krytyk i kpin w esperanckim światku i poza nim. Kiedyś zastanawiano się, jak uzyskać daszki na maszynach do pisania lub składopisach (redagując "Pola Esperantisto", sam stosowałem specjalnie przygotowane rozetki dla składopisu Brother), potem w komputerze, a wreszcie - w Internecie.

ISO-8859-3

W ostatnim czasie w światowej sieci przyjął się ostatecznie standard ISO-8859-3, który zawiera wszystkie esperanckie litery. Do lamusa odchodzą więc powoli okropne zastępniki (np. litera+# lub litera+x). Co więcej, nowsze wersje przeglądarek Internet Explorer i Netscape Navigator akceptują bez kłopotu standard ISO-8859-3, dzięki czemu znika problem poprawnego wyświetlania liter w trakcie pracy w WWW. Jeśli użyłem słowa "powoli", to wynika to z faktu, że wielu autorów stron esperanckich w dalszym ciągu zapomina o deklaracji strony kodowej lub nie umie zainstalować czcionek i klawiatury. Zdarza się to nawet na oficjalnych stronach esperanckich, a już grozę i śmiech budzi fakt, że owe zastępniki stosuje webmaster samego centrum esperanckiego świata, czyli Universala Esperanto-Asocio - zobaczymy, jak długo :-). Aby więc nie było żadnych problemów, podaję w tym miejscu najrozsądniejsze rozwiązanie, które sprawdza się w praktyce.

Przede wszystkim zwróćmy uwagę na fakt, że dla wygodnej pracy musimy dysponować zarówno czcionkami dla przeglądarki, jak i czcionkami ekranowymi dla edytora HTML. Internet Explorer (od wersji 4.x) radzi sobie z wyświetlaniem esperanckich znaków w standardzie ISO, gdyż są one zakodowane w standardowych czcionkach Arial, Times New Roman i Courier New. Jednak nie radzi sobie z tym Netscape Navigator, a poza tym musimy dysponować czcionką dla edytora. Pierwsze kroki powinniśmy więc skierować na stronę, na której znajdują się odpowiednie czcionki. Jest nią Listo de Esperanto-tiparoj, uznawana za najlepsze źródło esperanckich krojów:

http://esperanto.agoranet.be/tiparoj.html

W punkcie Latin-3-tiparoj por TTT znajdziemy kilka czcionek TrueType, z których warto przede wszystkim skopiować Times SudEuro, Ariel SudEuro i Courier SudEuro (są też dostępne odrębne zestawy dla komputerów Atari, Amiga i Macintosh). Są to czcionki w wersjach normal, bold, italic i bold-italic. Posłużą one użytkownikom Netscape'a do wyświetlania liter w przeglądarce, a autorom stron jako czcionki ekranowe w edytorze. Archiwa do pobrania mają mniej więcej po 200 KB objętości. Po skopiowaniu wystarczy kliknąć na pliku wykonywalnym, co spowoduje rozpakowanie czcionek TTF. Instalujemy je w systemie za pomocą Panelu sterowania (Czcionki).

Gdy już mamy czcionki w systemie, możemy je wykorzystać w charakterze czcionki ekranowej w edytorze dokumentów HTML, co zazwyczaj wykonujemy w opcjach konkretnego programu.

W tym momencie pojawia się następny problem - kodowanie liter w redagowanym dokumencie. Oryginalne Windows, jak wiadomo, nie zawierają odrębnej klawiatury dla Esperanta (nie wiem natomiast, czy są one dostępne w innych systemach operacyjnych). Przejrzałem kilka dostępnych w Sieci rozwiązań i doszedłem do wniosku, że najlepszym sposobem jest wykorzystanie w tym celu klawiatury Polkeyb, o której już wspominałem w kursie HTML - niech wiecznie trwa pamięć o Andrzeju Górbielu...

Jeśli jej jeszcze nie masz, pobierz plik stąd - 35 KB. Jest to wersja 2.4p, która została umieszczona w Internecie dzięki zgodzie Autora tuż przed jego tragiczną śmiercią.

Umieść klawiaturę w dowolnym katalogu i daj do niej odwołanie w Autostarcie. Po restarcie systemu klawiatura zostanie uruchomiona. Kliknięcie na niej otworzy menu, w którym możemy ustawić (Opcje) na dowolnej pozycji jedną z predefiniowanych lub samodzielnie sporządzonych klawiatur, a także wybrać sposób wywoływania, np. z lewym lub prawym Altem albo z prefiksem.

Klawiaturę ISO-8859-2 i ISO-8859-3 (Esperanto) należy sporządzić samemu. Program zawiera moduł pozwalający wykonać to w trybie graficznym (trzeba kliknąć "prawą myszką" na ikonie programu w pasku zadań Windows i wybrać Edytor układów). Prościej jednak będzie wpisać odpowiednią informację do pliku win.ini - od razu podaję definicje dla obu klawiatur: skopiuj po prostu ten kod i wklej do win.ini - po restarcie Windows klawiatury będą gotowe i będziesz mogła/mógł ustawić je na odpowiedniej pozycji, klikając na przyciskach 1, 2 lub 3.

W moim komputerze sekcja [PolKeyb] pliku win.ini wygląda następująco:

[PolKeyb]
settings=0 2 6 0 6 5 0

name0=ISO-8859-2
keys0=ACELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175

name=Esperanto ISO-8859-3
keys=CGHJSU
lower=230,248,182,188,254,253
upper=198,216,166,172,222,221

Liczby w pozycjach lower i upper są właśnie numerami znaków w odpowiedniej tablicy ISO.

Aby zmienić klawiaturę, wystarczy kliknąć na ikonie programu w pasku zadań i kliknąć na jednej z trzech klawiatur.

Jeśli czcionką ekranową edytora będzie jedna z zainstalowanych czcionek esperanckich, zobaczysz na ekranie poprawne litery esperanckie. Wywoływać je możesz np. kombinacją PrawyAlt-litera.

Pamiętaj, aby dokument esperancki był wyświetlany w przeglądarce we właściwy sposób MUSISZ umieścić w sekcji META deklarację strony kodowej ISO-8859-3, czyli
<meta http-equiv="content-type" content="text/html; charset=iso-8859-3">
Na przykład:

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-3">
    <meta name="author" content="Pawel Wimmer">
    <meta name="description" content="Dokumento pri la historio de la Esperanto-movado">
    <meta name="keywords" content="Esperanto, historio, movado, lingvo, eminentuloj">
</head>

I jeszcze jedna bardzo ważna sprawa:

Jak wspomniałem wyżej, Navigator nie radzi sobie z wyświetlaniem esperanckich liter bez wyraźnego wskazania czcionki. Dlatego należy koniecznie opatrzyć dokument odpowiednią deklaracją - Internet Explorerowi to nie zaszkodzi, a Navigatorowi pomoże. Zaleca się przede wszystkim stosowanie stylów, gdzie użytym na stronie selektorom (poleceniom HTML) przypisujemy czcionki esperanckie. Oto przykład stylu w części nagłówkowej dokumentu, czyli w ramach HEAD:

<STYLE TYPE="text/css">
<!--
H1 {font-size: 20pt; font-family: Ariel Sudeuro; font-weight: normal}
P {font-size: 10pt; font-family: Times Sudeuro; font-weight: normal}
PRE {font-size: 10pt; font-family: Courier Sudeuro; font-weight: normal}
-->
</STYLE>

Rozwiązaniem alternatywnym jest opatrywanie fragmentów dokumentów poleceniem <font face>, ale nie jest ono zalecane.

A teraz przykład dokumentu, będący fragmentem strony IKEF, czyli Internacia Komerca kaj Ekonomia Fakgrupo - jej autor pracowicie zakodował znaki w ISO, ale także zapomniał o stronie kodowej!

Ekzemplo de dokumento en Esperanto

No i Esperantaj literoj

UWAGA: w dokumencie kodowanym zgodnie z ISO-8859-3 nie możemy stosować polskich liter zapisanych w ISO-8859-2 lub Windows-1250!

Unikod

Od 1993 roku istnieje Unicode, pozwalający zapisywać znaki 16-bitowo, a więc dający możność zakodowania w jednej tabeli aż 65 tysięcy znaków, co z powodzeniem wystarczy dla większości języków świata. Jest to bez wątpienia rozwiązanie przyszłościowe, gdyż w jednym dokumencie możemy stosować rozmaite języki, choćby właśnie polski i Esperanto. Nowsze przeglądarki dla Windows wyświetlają poprawnie dokumenty zapisane z deklaracją UTF-8 - na pewno robi to Internet Explorer 4 i 5 oraz Sylaba Komunikator 4.5 - choć wyświetlane są tylko niektóre zestawy znaków.

W środowisku Windows 9.x nie ma klawiatur unikodowych i możliwości bezpośredniego zapisywania znaków w tym standardzie - miejmy nadzieję, że zmieni się to w niedalekiej przyszłości, gdyż Unikod jest, używając zgrabnego określenia, które znalazłem w Sieci, Esperantem systemów kodowania.

Możemy jednak zastosować pewne "obejście" - dość jednak pracochłonne. Znaki polskie i esperanckie mają naturalnie odpowiednią numerację, zapisywaną w postaci &#xxx:

Esperanto
&#264 - wielkie c z daszkiem
&#265 - małe c z daszkiem
&#284 - wielkie g z daszkiem
&#285 - małe g z daszkiem
&#292 - wielkie h z daszkiem
&#293 - małe h z daszkiem
&#308 - wielkie j z daszkiem
&#309 - małe j z daszkiem
&#348 - wielkie s z daszkiem
&#349 - małe s z daszkiem
&#364 - wielkie u z łuczkiem
&#365 - małe u z łuczkiem
Polskie litery
&#260 - Ą
&#261 - ą
&#262 - Ć
&#263 - ć
&#280 - Ę
&#281 - ę
&#321 - Ł
&#322 - ł
&#323 - Ń
&#324 - ń
&#211 - Ó
&#243 - ó
&#346 - Ś
&#347 - ś
&#377 - Ź
&#378 - ź
&#379 - Ź
&#380 - ż

Nie jest mi znana klawiatura wprowadzająca te znaki bezpośrednio - autor dokumentu polsko-esperanckiego musiałby zapisać znaki polskie i esperanckie w tradycyjny sposób, a potem jakimś makrem przekonwertować je do postaci &#xxx. Taki dokument należy opatrzyć odpowiednią deklaracją strony kodowej, czyli:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Przykład takiego dokumentu:

I jeszcze ciekawostka. Poniższe znaki, polskie i esperanckie, zapisane unikodowo, są wyświetlane poprawnie w Internet Explorerze mimo "nie-unikodowej" deklaracji ISO-8859-2 (lub ISO-8859-3 czy Windows-1250). Niestety, Netscape Navigator nie pozwala na takie "numery", więc dla lepszej czytelności musimy takie mieszane dokumenty opatrywać stroną utf-8.

Esperanckie

Ĉ ĉ Ĝ ĝ Ĥ ĥ Ĵ ĵ Ŝ ŝ Ŭ ŭ

Polskie

Ą ą Ć ć Ę ę Ł ł Ń ń Ó ó Ś ś Ź ź Ż ż

I na zakończenie test Unikodu (niektóre tablice, cytowane za "Komputada Leksikono", Sergieja Pokrowskiego).


Ekzemplo de dokumento en Esperanto

[........]

Origino kaj ĝisnuna historio de IKEF
La Internacia Komerca kaj Ekonomia Fakgrupo estis fondita en 1985 laŭ
iniciato de s-roj Franz Josef Braun (Germanio) kaj Lawrence Mee (brito
loĝanta tiam en Roterdamo, Nederlando).

IKEF havis antaŭulon. Temis pri Instituto por Esperanto en Komerco kaj
Industrio (EKI), kies estraranoj, F.L.M. Wensing (Nederlando), Erik Carl‚n
(Svedio) kaj Bruno Vogelmann (Germanio) agadis en la 60aj kaj 70aj jaroj.

S-ro Braun pro profesiaj spertoj konvinkiĝis pri la valoro de la lingvo en
la kampo de internaciaj komercaj rilatoj. Li kaj s-ro Mee en 1984 ekinten-
cis revivigi la uzadon de Esperanto en komerco/ekonomio kaj kunlaborigi la
interesitajn homojn tiucele. Ili iniciatis sondadon de opinioj inter la
fakdelegitaro de UEA. La opinisonda cirkulero iris al pli ol 150 adresoj
en 67 landoj, kaj ĝi invitis al kunlaboro. La reagoj estis tiom
multnombraj ke, por grupe respondi, en aŭgusto 1984 eldoniĝis la unua
Laŭokaza Novaĵletero de IKEF (antaŭulo de La Merkato).

Unua laborkunsido okazis en Brugge, Belgio, la 19an de aprilo 1985, kun s-
roj Braun, Mee kaj Rotsaert. La fondkunveno okazis dum la 70a Universala
Kongreso en Augsburg, Germanio, je la 6a de aŭgusto 1985, kun 30 par-
toprenantoj.

Dekomence la membraro de IKEF sufiĉe rapide kreskis. Ok jarojn post la
fondo ĝi trapasis la membronombron 100. Sekve de tio UEA akceptis IKEF
dum la 70a UK en Seulo kiel aliĝintan fakan asocion. Komence de 1996 la
nombro de membroj estis 120.

[........]


Esperantaj literoj

ĉĝĥĵŝŭ

ĈĜĤĴŜŬ


Litery polskie i esperanckie w jednym dokumencie

Esperanto

Ĉ ĉ Ĝ ĝ Ĥ ĥ Ĵ ĵ Ŝ ŝ Ŭ ŭ

Polskie litery

Ą ą Ć ć Ę ę Ł ł Ń ń Ó ó Ś ś Ź ź Ż ż


Test Unikodu

European Latin

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
100 | Ā | ā | Ă | ă | Ą | ą | Ć | ć | Ĉ | ĉ | Ċ | ċ | Č | č | Ď | ď
110 | Đ | đ | Ē | ē | Ĕ | ĕ | Ė | ė | Ę | ę | Ě | ě | Ĝ | ĝ | Ğ | ğ
120 | Ġ | ġ | Ģ | ģ | Ĥ | ĥ | Ħ | ħ | Ĩ | ĩ | Ī | ī | Ĭ | ĭ | Į | į
130 | İ | ı | Ĳ | ĳ | Ĵ | ĵ | Ķ | ķ | ĸ | Ĺ | ĺ | Ļ | ļ | Ľ | ľ | Ŀ
140 | ŀ | Ł | ł | Ń | ń | Ņ | ņ | Ň | ň | ŉ | Ŋ | ŋ | Ō | ō | Ŏ | ŏ
150 | Ő | ő | Œ | œ | Ŕ | ŕ | Ŗ | ŗ | Ř | ř | Ś | ś | Ŝ | ŝ | Ş | ş
160 | Š | š | Ţ | ţ | Ť | ť | Ŧ | ŧ | Ũ | ũ | Ū | ū | Ŭ | ŭ | Ů | ů
170 | Ű | ű | Ų | ų | Ŵ | ŵ | Ŷ | ŷ | Ÿ | Ź | ź | Ż | ż | Ž | ž | ſ

Phonetic

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
200 | Ȁ | ȁ | Ȃ | ȃ | Ȅ | ȅ | Ȇ | ȇ | Ȉ | ȉ | Ȋ | ȋ | Ȍ | ȍ | Ȏ | ȏ
210 | Ȑ | ȑ | Ȓ | ȓ | Ȕ | ȕ | Ȗ | ȗ | Ș | ș | Ț | ț | Ȝ | ȝ | Ȟ | ȟ
220 | Ƞ | ȡ | Ȣ | ȣ | Ȥ | ȥ | Ȧ | ȧ | Ȩ | ȩ | Ȫ | ȫ | Ȭ | ȭ | Ȯ | ȯ
230 | Ȱ | ȱ | Ȳ | ȳ | ȴ | ȵ | ȶ | ȷ | ȸ | ȹ | Ⱥ | Ȼ | ȼ | Ƚ | Ⱦ | ȿ
240 | ɀ | Ɂ | ɂ | Ƀ | Ʉ | Ʌ | Ɇ | ɇ | Ɉ | ɉ | Ɋ | ɋ | Ɍ | ɍ | Ɏ | ɏ
250 | ɐ | ɑ | ɒ | ɓ | ɔ | ɕ | ɖ | ɗ | ɘ | ə | ɚ | ɛ | ɜ | ɝ | ɞ | ɟ
260 | ɠ | ɡ | ɢ | ɣ | ɤ | ɥ | ɦ | ɧ | ɨ | ɩ | ɪ | ɫ | ɬ | ɭ | ɮ | ɯ
270 | ɰ | ɱ | ɲ | ɳ | ɴ | ɵ | ɶ | ɷ | ɸ | ɹ | ɺ | ɻ | ɼ | ɽ | ɾ | ɿ
280 | ʀ | ʁ | ʂ | ʃ | ʄ | ʅ | ʆ | ʇ | ʈ | ʉ | ʊ | ʋ | ʌ | ʍ | ʎ | ʏ
290 | ʐ | ʑ | ʒ | ʓ | ʔ | ʕ | ʖ | ʗ | ʘ | ʙ | ʚ | ʛ | ʜ | ʝ | ʞ | ʟ
2a0 | ʠ | ʡ | ʢ | ʣ | ʤ | ʥ | ʦ | ʧ | ʨ | ʩ | ʪ | ʫ | ʬ | ʭ | ʮ | ʯ
2b0 | ʰ | ʱ | ʲ | ʳ | ʴ | ʵ | ʶ | ʷ | ʸ | ʹ | ʺ | ʻ | ʼ | ʽ | ʾ | ʿ
2c0 | ˀ | ˁ | ˂ | ˃ | ˄ | ˅ | ˆ | ˇ | ˈ | ˉ | ˊ | ˋ | ˌ | ˍ | ˎ | ˏ
2d0 | ː | ˑ | ˒ | ˓ | ˔ | ˕ | ˖ | ˗ | ˘ | ˙ | ˚ | ˛ | ˜ | ˝ | ˞ | ˟
2e0 | ˠ | ˡ | ˢ | ˣ | ˤ | ˥ | ˦ | ˧ | ˨ | ˩ | ˪ | ˫ | ˬ | ˭ | ˮ | ˯
2f0 | ˰ | ˱ | ˲ | ˳ | ˴ | ˵ | ˶ | ˷ | ˸ | ˹ | ˺ | ˻ | ˼ | ˽ | ˾ | ˿

Modifier Letters

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
2b0 | ʰ | ʱ | ʲ | ʳ | ʴ | ʵ | ʶ | ʷ | ʸ | ʹ | ʺ | ʻ | ʼ | ʽ | ʾ | ʿ
2c0 | ˀ | ˁ | ˂ | ˃ | ˄ | ˅ | ˆ | ˇ | ˈ | ˉ | ˊ | ˋ | ˌ | ˍ | ˎ | ˏ
2d0 | ː | ˑ | ˒ | ˓ | ˔ | ˕ | ˖ | ˗ | ˘ | ˙ | ˚ | ˛ | ˜ | ˝ | ˞ | ˟
2e0 | ˠ | ˡ | ˢ | ˣ | ˤ | ˥ | ˦ | ˧ | ˨ | ˩ | ˪ | ˫ | ˬ | ˭ | ˮ | ˯
2f0 | ˰ | ˱ | ˲ | ˳ | ˴ | ˵ | ˶ | ˷ | ˸ | ˹ | ˺ | ˻ | ˼ | ˽ | ˾ | ˿

Basic Greek

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
380 | ΀ | ΁ | ΂ | ΃ | ΄ | ΅ | Ά | · | Έ | Ή | Ί | ΋ | Ό | ΍ | Ύ | Ώ
390 | ΐ | Α | Β | Γ | Δ | Ε | Ζ | Η | Θ | Ι | Κ | Λ | Μ | Ν | Ξ | Ο
3a0 | Π | Ρ | ΢ | Σ | Τ | Υ | Φ | Χ | Ψ | Ω | Ϊ | Ϋ | ά | έ | ή | ί
3b0 | ΰ | α | β | γ | δ | ε | ζ | η | θ | ι | κ | λ | μ | ν | ξ | ο
3c0 | π | ρ | ς | σ | τ | υ | φ | χ | ψ | ω | ϊ | ϋ | ό | ύ | ώ | Ϗ

Cyrillic

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
400 | Ѐ | Ё | Ђ | Ѓ | Є | Ѕ | І | Ї | Ј | Љ | Њ | Ћ | Ќ | Ѝ | Ў | Џ
410 | А | Б | В | Г | Д | Е | Ж | З | И | Й | К | Л | М | Н | О | П
420 | Р | С | Т | У | Ф | Х | Ц | Ч | Ш | Щ | Ъ | Ы | Ь | Э | Ю | Я
430 | а | б | в | г | д | е | ж | з | и | й | к | л | м | н | о | п
440 | р | с | т | у | ф | х | ц | ч | ш | щ | ъ | ы | ь | э | ю | я
450 | ѐ | ё | ђ | ѓ | є | ѕ | і | ї | ј | љ | њ | ћ | ќ | ѝ | ў | џ
460 | Ѡ | ѡ | Ѣ | ѣ | Ѥ | ѥ | Ѧ | ѧ | Ѩ | ѩ | Ѫ | ѫ | Ѭ | ѭ | Ѯ | ѯ
470 | Ѱ | ѱ | Ѳ | ѳ | Ѵ | ѵ | Ѷ | ѷ | Ѹ | ѹ | Ѻ | ѻ | Ѽ | ѽ | Ѿ | ѿ
480 | Ҁ | ҁ | ҂ | ҃ | ҄ | ҅ | ҆ | ҇ | ҈ | ҉ | Ҋ | ҋ | Ҍ | ҍ | Ҏ | ҏ
490 | Ґ | ґ | Ғ | ғ | Ҕ | ҕ | Җ | җ | Ҙ | ҙ | Қ | қ | Ҝ | ҝ | Ҟ | ҟ
4a0 | Ҡ | ҡ | Ң | ң | Ҥ | ҥ | Ҧ | ҧ | Ҩ | ҩ | Ҫ | ҫ | Ҭ | ҭ | Ү | ү
4b0 | Ұ | ұ | Ҳ | ҳ | Ҵ | ҵ | Ҷ | ҷ | Ҹ | ҹ | Һ | һ | Ҽ | ҽ | Ҿ | ҿ
4c0 | Ӏ | Ӂ | ӂ | Ӄ | ӄ | Ӆ | ӆ | Ӈ | ӈ | Ӊ | ӊ | Ӌ | ӌ | Ӎ | ӎ | ӏ

Hebrew

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
5b0 | ְ | ֱ | ֲ | ֳ | ִ | ֵ | ֶ | ַ | ָ | ֹ | ֺ | ֻ | ּ | ֽ | ־ | ֿ
5c0 | ׀ | ׁ | ׂ | ׃ | ׄ | ׅ | ׆ | ׇ | ׈ | ׉ | ׊ | ׋ | ׌ | ׍ | ׎ | ׏
5d0 | א | ב | ג | ד | ה | ו | ז | ח | ט | י | ך | כ | ל | ם | מ | ן
5e0 | נ | ס | ע | ף | פ | ץ | צ | ק | ר | ש | ת | ׫ | ׬ | ׭ | ׮ | ׯ
5f0 | װ | ױ | ײ | ׳ | ״ | ׵ | ׶ | ׷ | ׸ | ׹ | ׺ | ׻ | ׼ | ׽ | ׾ | ׿

Arab

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
600 | ؀ | ؁ | ؂ | ؃ | ؄ | ؅ | ؆ | ؇ | ؈ | ؉ | ؊ | ؋ | ، | ؍ | ؎ | ؏
610 | ؐ | ؑ | ؒ | ؓ | ؔ | ؕ | ؖ | ؗ | ؘ | ؙ | ؚ | ؛ | ؜ | ؝ | ؞ | ؟
620 | ؠ | ء | آ | أ | ؤ | إ | ئ | ا | ب | ة | ت | ث | ج | ح | خ | د
630 | ذ | ر | ز | س | ش | ص | ض | ط | ظ | ع | غ | ػ | ؼ | ؽ | ؾ | ؿ
640 | ـ | ف | ق | ك | ل | م | ن | ه | و | ى | ي | ً | ٌ | ٍ | َ | ُ
650 | ِ | ّ | ْ | ٓ | ٔ | ٕ | ٖ | ٗ | ٘ | ٙ | ٚ | ٛ | ٜ | ٝ | ٞ | ٟ

General Punctuation

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
2000 |  |  |  |  |  |  |  |  |  |  |  | ​ | ‌ | ‍ | ‎ | ‏
2010 | ‐ | ‑ | ‒ | – | — | ― | ‖ | ‗ | ‘ | ’ | ‚ | ‛ | “ | ” | „ | ‟
2020 | † | ‡ | • | ‣ | ․ | ‥ | … | ‧ |  |  | ‪ | ‫ | ‬ | ‭ | ‮ |
2030 | ‰ | ‱ | ′ | ″ | ‴ | ‵ | ‶ | ‷ | ‸ | ‹ | › | ※ | ‼ | ‽ | ‾ | ‿
2040 | ⁀ | ⁁ | ⁂ | ⁃ | ⁄ | ⁅ | ⁆ | ⁇ | ⁈ | ⁉ | ⁊ | ⁋ | ⁌ | ⁍ | ⁎ | ⁏
2050 | ⁐ | ⁑ | ⁒ | ⁓ | ⁔ | ⁕ | ⁖ | ⁗ | ⁘ | ⁙ | ⁚ | ⁛ | ⁜ | ⁝ | ⁞ |
2060 | ⁠ | ⁡ | ⁢ | ⁣ | ⁤ | ⁥ | ⁦ | ⁧ | ⁨ | ⁩ | ⁪ | ⁫ | ⁬ | ⁭ | ⁮ | ⁯
2070 | ⁰ | ⁱ | ⁲ | ⁳ | ⁴ | ⁵ | ⁶ | ⁷ | ⁸ | ⁹ | ⁺ | ⁻ | ⁼ | ⁽ | ⁾ | ⁿ
2080 | ₀ | ₁ | ₂ | ₃ | ₄ | ₅ | ₆ | ₇ | ₈ | ₉ | ₊ | ₋ | ₌ | ₍ | ₎ | ₏
2090 | ₐ | ₑ | ₒ | ₓ | ₔ | ₕ | ₖ | ₗ | ₘ | ₙ | ₚ | ₛ | ₜ | ₝ | ₞ | ₟
20a0 | ₠ | ₡ | ₢ | ₣ | ₤ | ₥ | ₦ | ₧ | ₨ | ₩ | ₪ | ₫ | € | ₭ | ₮ | ₯
20b0 | ₰ | ₱ | ₲ | ₳ | ₴ | ₵ | ₶ | ₷ | ₸ | ₹ | ₺ | ₻ | ₼ | ₽ | ₾ | ₿
20c0 | ⃀ | ⃁ | ⃂ | ⃃ | ⃄ | ⃅ | ⃆ | ⃇ | ⃈ | ⃉ | ⃊ | ⃋ | ⃌ | ⃍ | ⃎ | ⃏
20d0 | ⃐ | ⃑ | ⃒ | ⃓ | ⃔ | ⃕ | ⃖ | ⃗ | ⃘ | ⃙ | ⃚ | ⃛ | ⃜ | ⃝ | ⃞ | ⃟
20e0 | ⃠ | ⃡ | ⃢ | ⃣ | ⃤ | ⃥ | ⃦ | ⃧ | ⃨ | ⃩ | ⃪ | ⃫ | ⃬ | ⃭ | ⃮ | ⃯
20f0 | ⃰ | ⃱ | ⃲ | ⃳ | ⃴ | ⃵ | ⃶ | ⃷ | ⃸ | ⃹ | ⃺ | ⃻ | ⃼ | ⃽ | ⃾ | ⃿

Letterlike Symbols

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
2100 | ℀ | ℁ | ℂ | ℃ | ℄ | ℅ | ℆ | ℇ | ℈ | ℉ | ℊ | ℋ | ℌ | ℍ | ℎ | ℏ
2110 | ℐ | ℑ | ℒ | ℓ | ℔ | ℕ | № | ℗ | ℘ | ℙ | ℚ | ℛ | ℜ | ℝ | ℞ | ℟
2120 | ℠ | ℡ | ™ | ℣ | ℤ | ℥ | Ω | ℧ | ℨ | ℩ | K | Å | ℬ | ℭ | ℮ | ℯ
2130 | ℰ | ℱ | Ⅎ | ℳ | ℴ | ℵ | ℶ | ℷ | ℸ | ℹ | ℺ | ℻ | ℼ | ℽ | ℾ | ℿ
2140 | ⅀ | ⅁ | ⅂ | ⅃ | ⅄ | ⅅ | ⅆ | ⅇ | ⅈ | ⅉ | ⅊ | ⅋ | ⅌ | ⅍ | ⅎ | ⅏
2150 | ⅐ | ⅑ | ⅒ | ⅓ | ⅔ | ⅕ | ⅖ | ⅗ | ⅘ | ⅙ | ⅚ | ⅛ | ⅜ | ⅝ | ⅞ | ⅟
2160 | Ⅰ | Ⅱ | Ⅲ | Ⅳ | Ⅴ | Ⅵ | Ⅶ | Ⅷ | Ⅸ | Ⅹ | Ⅺ | Ⅻ | Ⅼ | Ⅽ | Ⅾ | Ⅿ
2170 | ⅰ | ⅱ | ⅲ | ⅳ | ⅴ | ⅵ | ⅶ | ⅷ | ⅸ | ⅹ | ⅺ | ⅻ | ⅼ | ⅽ | ⅾ | ⅿ
2180 | ↀ | ↁ | ↂ | Ↄ | ↄ | ↅ | ↆ | ↇ | ↈ | ↉ | ↊ | ↋ | ↌ | ↍ | ↎ | ↏
2190 | ← | ↑ | → | ↓ | ↔ | ↕ | ↖ | ↗ | ↘ | ↙ | ↚ | ↛ | ↜ | ↝ | ↞ | ↟
21a0 | ↠ | ↡ | ↢ | ↣ | ↤ | ↥ | ↦ | ↧ | ↨ | ↩ | ↪ | ↫ | ↬ | ↭ | ↮ | ↯
21b0 | ↰ | ↱ | ↲ | ↳ | ↴ | ↵ | ↶ | ↷ | ↸ | ↹ | ↺ | ↻ | ↼ | ↽ | ↾ | ↿
21c0 | ⇀ | ⇁ | ⇂ | ⇃ | ⇄ | ⇅ | ⇆ | ⇇ | ⇈ | ⇉ | ⇊ | ⇋ | ⇌ | ⇍ | ⇎ | ⇏
21d0 | ⇐ | ⇑ | ⇒ | ⇓ | ⇔ | ⇕ | ⇖ | ⇗ | ⇘ | ⇙ | ⇚ | ⇛ | ⇜ | ⇝ | ⇞ | ⇟
21e0 | ⇠ | ⇡ | ⇢ | ⇣ | ⇤ | ⇥ | ⇦ | ⇧ | ⇨ | ⇩ | ⇪ | ⇫ | ⇬ | ⇭ | ⇮ | ⇯
21f0 | ⇰ | ⇱ | ⇲ | ⇳ | ⇴ | ⇵ | ⇶ | ⇷ | ⇸ | ⇹ | ⇺ | ⇻ | ⇼ | ⇽ | ⇾ | ⇿

Mathematical Operators

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
2200 | ∀ | ∁ | ∂ | ∃ | ∄ | ∅ | ∆ | ∇ | ∈ | ∉ | ∊ | ∋ | ∌ | ∍ | ∎ | ∏
2210 | ∐ | ∑ | − | ∓ | ∔ | ∕ | ∖ | ∗ | ∘ | ∙ | √ | ∛ | ∜ | ∝ | ∞ | ∟
2220 | ∠ | ∡ | ∢ | ∣ | ∤ | ∥ | ∦ | ∧ | ∨ | ∩ | ∪ | ∫ | ∬ | ∭ | ∮ | ∯
2230 | ∰ | ∱ | ∲ | ∳ | ∴ | ∵ | ∶ | ∷ | ∸ | ∹ | ∺ | ∻ | ∼ | ∽ | ∾ | ∿
2240 | ≀ | ≁ | ≂ | ≃ | ≄ | ≅ | ≆ | ≇ | ≈ | ≉ | ≊ | ≋ | ≌ | ≍ | ≎ | ≏
2250 | ≐ | ≑ | ≒ | ≓ | ≔ | ≕ | ≖ | ≗ | ≘ | ≙ | ≚ | ≛ | ≜ | ≝ | ≞ | ≟
2260 | ≠ | ≡ | ≢ | ≣ | ≤ | ≥ | ≦ | ≧ | ≨ | ≩ | ≪ | ≫ | ≬ | ≭ | ≮ | ≯
2270 | ≰ | ≱ | ≲ | ≳ | ≴ | ≵ | ≶ | ≷ | ≸ | ≹ | ≺ | ≻ | ≼ | ≽ | ≾ | ≿
2280 | ⊀ | ⊁ | ⊂ | ⊃ | ⊄ | ⊅ | ⊆ | ⊇ | ⊈ | ⊉ | ⊊ | ⊋ | ⊌ | ⊍ | ⊎ | ⊏
2290 | ⊐ | ⊑ | ⊒ | ⊓ | ⊔ | ⊕ | ⊖ | ⊗ | ⊘ | ⊙ | ⊚ | ⊛ | ⊜ | ⊝ | ⊞ | ⊟
22a0 | ⊠ | ⊡ | ⊢ | ⊣ | ⊤ | ⊥ | ⊦ | ⊧ | ⊨ | ⊩ | ⊪ | ⊫ | ⊬ | ⊭ | ⊮ | ⊯
22b0 | ⊰ | ⊱ | ⊲ | ⊳ | ⊴ | ⊵ | ⊶ | ⊷ | ⊸ | ⊹ | ⊺ | ⊻ | ⊼ | ⊽ | ⊾ | ⊿
22c0 | ⋀ | ⋁ | ⋂ | ⋃ | ⋄ | ⋅ | ⋆ | ⋇ | ⋈ | ⋉ | ⋊ | ⋋ | ⋌ | ⋍ | ⋎ | ⋏
22d0 | ⋐ | ⋑ | ⋒ | ⋓ | ⋔ | ⋕ | ⋖ | ⋗ | ⋘ | ⋙ | ⋚ | ⋛ | ⋜ | ⋝ | ⋞ | ⋟
22e0 | ⋠ | ⋡ | ⋢ | ⋣ | ⋤ | ⋥ | ⋦ | ⋧ | ⋨ | ⋩ | ⋪ | ⋫ | ⋬ | ⋭ | ⋮ | ⋯
22f0 | ⋰ | ⋱ | ⋲ | ⋳ | ⋴ | ⋵ | ⋶ | ⋷ | ⋸ | ⋹ | ⋺ | ⋻ | ⋼ | ⋽ | ⋾ | ⋿

Miscelaneous Dingbats

 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f
2600 | ☀ | ☁ | ☂ | ☃ | ☄ | ★ | ☆ | ☇ | ☈ | ☉ | ☊ | ☋ | ☌ | ☍ | ☎ | ☏
2610 | ☐ | ☑ | ☒ | ☓ | ☔ | ☕ | ☖ | ☗ | ☘ | ☙ | ☚ | ☛ | ☜ | ☝ | ☞ | ☟
2620 | ☠ | ☡ | ☢ | ☣ | ☤ | ☥ | ☦ | ☧ | ☨ | ☩ | ☪ | ☫ | ☬ | ☭ | ☮ | ☯
2630 | ☰ | ☱ | ☲ | ☳ | ☴ | ☵ | ☶ | ☷ | ☸ | ☹ | ☺ | ☻ | ☼ | ☽ | ☾ | ☿
2640 | ♀ | ♁ | ♂ | ♃ | ♄ | ♅ | ♆ | ♇ | ♈ | ♉ | ♊ | ♋ | ♌ | ♍ | ♎ | ♏
2650 | ♐ | ♑ | ♒ | ♓ | ♔ | ♕ | ♖ | ♗ | ♘ | ♙ | ♚ | ♛ | ♜ | ♝ | ♞ | ♟
2660 | ♠ | ♡ | ♢ | ♣ | ♤ | ♥ | ♦ | ♧ | ♨ | ♩ | ♪ | ♫ | ♬ | ♭ | ♮ | ♯


Don't click it!

You are visitor #26227 to this page.


Please push the start button to start this awesome game!


Rules

You have to bring the numbers in the first frame into the right order. The 0 is the 'empty' place. You can move any number which is besides the 0 onto the place of the 0. If you want to move a number just push the button the number is on. You have to bring the numbers into the following order:

Go back to my JavaScript- Homepage


Wprowadzenie do JavaScript - Część 1

Wprowadzenie do JavaScript
Część 1

Co to jest JavaScript?

JavaScript jest nowym językiem skryptowym dla dokumentów internetowych. Skrypty napisane za pomocą JavaScript mogą być umieszczane bezpośrednio na stronach HTML. Język daje obszerne możliwości wzbogacania stron w interesujące elementy. Na przykład możesz zdefiniować reakcję na zainicjowane przez czytelnika działania. Niektóre efekty jeszcze niedawno były możliwe jedynie przy użyciu CGI, a teraz jesteś w stanie zbudować wyrafinowane konstrukcyjnie strony za pomocą JavaScript. Wiele przykładów użycia języka możesz zobaczyć w Internecie - sporo odsyłaczy znajdziesz na stronie Gamelan (w części dotyczącej JavaScript). Pod adresem http://home.netscape.com znajdziesz dokumentację dostarczoną przez Netscape Communications.

Jaka jest różnica między językami Java i JavaScript?

Mimo zbieżności nazw Java nie jest tożsama z JavaScript. Są to dwie odrębne techniki programowania w Internecie. Java jest językiem programowania, natomiast JavaScript jest językiem skryptowym, jak zresztą sugeruje sama nazwa. Różnica polega na tym,że Java pozwala tworzyć rzeczywiste programy. Ale nie zawsze musisz sobie zaprzątać głowę prawdziwym programowaniem, aby uzyskaćładny efekt na swojej stronie. JavaScript jest pomyślany jako narzędzie łatwe do zrozumienia i zastosowania. Autorów piszących w JavaScript nie musi zbytnio obchodzić programowanie. Można powiedzieć,że JavaScript jest raczej rozszerzeniem HTML niż odrębnym językiem komputerowym. Oczywiście nie jest to "oficjalna" definicja, ale myślę,że pozwala ona łatwiej uchwycić różnicę między Javą i JavaScript. Więcej informacji na temat obu języków znajdziesz w serwisie Gamelan, a także na stronie Netscape.

Jak można uruchamiać skrypty JavaScript?

Pierwszą przeglądarką obsługującą JavaScript był Netscape Navigator 2.0, jak i, oczywiście, poźniejsze jego wersje. Być może wiesz,że nie wszystkie wersje Navigatora czytają Javę, ale JavaScript jest interpretowany na wszystkich platformach, choć występują pewne problemy w niektórych wersjach. Wersja dla Macintosha, dla przykładu, wydaje się mieć pewną ilość błędów. W najbliższej przyszłości dalsze przeglądarki będą wyposażone w możliwość interpretacji JavaScript, m.in. Microsoft Internet Explorer 3.0. Przeglądarki takie szybko się upowszechnią, więc warto poznać tę technikę już teraz. Wszystko, co powinieneś znać, to podstawowe techniki i radzenie sobie z problemami, które mogą się pojawić.
Naturalnie powinieneś już dysponować pewną znajomością języka HTML, zanim rozpoczniesz naukę JavaScript. Wiele wartościowych materiałów szkoleniowych na ten temat znajdziesz w sieci - przeszukaj choćby serwis Yahoo (możesz także skorzystać z polskiego podręcznika dla początkujących na stronie Wydawnictwa Lupus - przyp. tłum.). Materiały online są zazwyczaj bardziej aktualne niż książki - Internet zmienia się ostatnio bardzo szybko...

A teraz pokażę Ci kilka małych skryptów, które zilustrują sposób ich implementowania na stronie HTML i możliwości oferowane przez nowy język. Rozpocznę od skryptu, który będzie po prostu wyświetlał jakiś tekst.

<html>
<head>
My first JavaScript!
</head>
<body>
<br>
To jest normalny dokument HTML.
<br>
  <script language="LiveScript">
    document.write("To jest JavaScript!")
  </script>
<br>
I znowu dokument HTML.
</body>
</html>

Jeśli Twoja przeglądarka akceptuje JavaScript, powinieneś zobaczyć poniżej wszystkie trzy wiersze przykładu. Jeśli nie, zobaczysz tylko dwa.

To jest normalny dokument HTML.

I znowu dokument HTML.

Muszę przyznać, że nie jest to zbyt użyteczny skrypt. W języku HTML napiszesz to na pewno szybciej i prościej. Ale chciałem pokazać, jak powinieneś stosować znaczniki <script>. Możesz je zastosować w dowolnym miejscu swojego dokumentu HTML.

Nie chcę Ci zawracać głowy głupimi skryptami. Przejdźmy więc do funkcji. Nie są one trudne do zrozumienia, a za to, wierz mi, znacznie bardziej użyteczne! Funkcje najlepiej jest deklarować w ramach znacznika <head> dokumentu HTML. Są one wtedy ładowane zanim jeszcze czytelnik strony będzie mógł wykonać coś, co jest związane z funkcją. Skrypty powinny być umieszczone w ramach komentarzy, aby sama definicja skryptu nie była wyświetlana w przeglądarkach, które nie interpretują JavaScript.

<html>
<head>
  <script language="JavaScript">
     function pushbutton() {
       alert("Hello!");
  }
 </script>
</head>
<body>
<form>
  <input type="button" name="Button1" value="Naciśnij mnie" onclick="pushbutton()">
  </form>
</body>
</html>

Jeśli chcesz wypróbować działanie skryptu i dysponujesz przeglądarką interpretującą JavaScript, kliknij na poniższym przycisku.

Skrypt pozwala utworzyć przycisk, którego naciśnięcie powoduje wyświetlenie okienka informacyjnego z napisem "Hello!". Czyż to nie wspaniałe? A zatem, jak to działa?
Najpierw do pamięci jest ładowana sama funkcja. Potem, za pomocą zwykłego znacznika <form> jest tworzony przycisk. Coś nowego pojawia się przy znaczniku <input>. Możesz tam zobaczyć 'onclick', który mówi przeglądarce, jaką funkcję należy wywołać po kliknięciu na przycisku (jeśli, rzecz jasna, przeglądarka potrafi interpretować JavaScript). Funkcja 'pushbutton' jest zadeklarowana w nagłówku. Gdy naciśniemy przycisk zostanie uruchomiona ta właśnie funkcja. Jeszcze inna nowość w skrypcie to metoda 'alert'. Metoda jest wbudowana w JavaScript, a więc wystarczy ją jedynie przywołać. Jest wiele różnych metod, które możemy przywoływać. Niektóre z nich zostaną pokazane w naszym przewodniku. Pełny ich opis znajdziesz na serwerze Netscape. Sądzę,że ich lista w niedługim czasie znacznie się wydłuży. Ale już w tym momencie możesz zrobić z nimi sporo ciekawych rzeczy.

(Nie sądzę, aby metoda 'alert' miała być używana w taki właśnie sposób - ale w końcu dopiero się uczymy, a taki sposób jest dość łatwy do zrozumienia. Mam nadzieję, że mi darujecie...)

Jak dotąd zaszliśmy już całkiem daleko. W rzeczywistości zyskujemy mnóstwo możliwości, dodając po prostu kolejne funkcje do naszych skryptów. Teraz pokażę Ci, jak możesz odczytać coś, co czytelnik strony wprowadził do formularza.

<html>
<head>
<script language="JavaScript">
<!--  hide script from old browsers
  function getname(str) {
    alert("Hi, "+ str+"!");
  }
// end hiding contents -->
</script>
</head>
<body>
Wpisz swoje imię:
<form>
  <input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

A teraz przetestuj ponownie działanie skryptu:

Wpisz swoje imię:

W skrypcie ponownie znalazło się kilka nowych elementów. Po pierwsze, zapewne zauważyłeś obecność w skrypcie komentarza. W taki właśnie sposób możesz ukryć treść skryptu przed przeglądarkami, które nie potrafią interpretować JavaScript. Powinieneś się trzymać pokazanej tu kolejności! Początek komentarza powinien się znajdować zaraz za pierwszym znacznikiem <script>. Komentarz kończy się tuż przed znacznikiem </script>. W bieżącym dokumencie HTML znalazł się formularz, w którym czytelnik może wpisać swoje imię. 'onBlur' w znaczniku <input> mówi przeglądarce, jaką funkcję należy wywołać, gdy wprowadzimy jakąś treść do formularza. Funkcja 'getname(str)' zostanie uruchomiona wtedy, gdy usuniesz kursor z formularza lub naciśniesz klawisz Enter. Funkcja przyjmie ciąg znaków, wpisany w polu formularza, za pomocą polecenia 'getname(this.value)'. 'this.value' oznacza wartość, którą wpisałeś w tym elemencie formularza.

Myślę,że następna rzecz jest także całkiem przyjemna. W naszym skrypcie zaimplementujemy funkcję daty. Gdy tworzysz dokument HTML, możesz spowodować, aby przeglądarka czytelnika wyświetliła datę ostatniej aktualizacji dokumentu. Nie musisz wpisywać daty w dokumencie ręcznie. Wpisz po prostu mały skrypt, a gdy wprowadzisz jakieś zmiany na swojej stronie, data zmieni się automatycznie.

<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
  <script language="LiveScript">
  <!--  hide script from old browsers
    document.write(document.lastModified)
  // end hiding contents -->
  </script>

</body>
</html>
W pierwszej wersji Wprowadzenia użyłem lastmodified. Taki styl wymuszał Netscape 2.0 beta 2. Obecnie otrzymałem wersję beta 4, w której zmieniło się to na lastModified. Zauważ więc, że język JavaScript jest wrażliwy na wielkość liter. lastmodified i lastModified to dwie różne rzeczy. To był powód, dla którego pierwsze wydanie nie miało daty na końcu, gdy było oglądane za pomocą pewnych wersji Navigatora.

W tym momencie ta własność wydaje się funkcjonować nie na każdej maszynie. Niektóre serwery pokazują jedynie datę 1/1/1970. Z funkcją wiążą się pewne problemy. Musimy zaczekać na następną aktualizację i mam nadzieję, że język będzie działać na każdej maszynie. Ale Ty musisz sam wypróbować swoją maszynę - na niektórych działa to bardzo dobrze.

Jak już powiedziałem, sprawy toczą się bardzo szybko. Niech więc Was nie zdziwi, gdy w następnym tygodniu pojawi się w JavaScript jakaś poważniejsza zmiana. Musisz więc pilnie śledzić przyszłe zmiany w języku, który jest przecież jeszcze bardzo młody. Miej na uwadze, że niektóre szczegóły, o których tutaj mówimy, także mogły ulec modyfikacji. Ale sądzę, że zasady pozostaną niezmienne.

Indeks - Część 2 - Część 3 - Część 4 - Część 5 - Część 6 - Część 7

aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch


Wprowadzenie do JavaScript - Część 2

JavaScript
Wprowadzenie od JavaScript
Część 2

Funkcja The onMouseOver - właściwości

Kolejną cechę JavaScript ujrzysz przesuwając kursor myszy na wskazany tu odsyłacz. Spójrz teraz na wiersz statusu u dołu ekranu. Funkcję tę możesz z powodzeniem łączyć z innymi funkcjami JavaScript. Jeśli przesuniesz kursor na odsyłacz okno się zamknie. A teraz pokażę ci źródło obu tych efektów:
<a href="stupid.htm" onMouseOver="window.status='Kolejny głupi
odsyłacz ...'; return true">

Jedyne co musisz uczynić, to dodać właściwość onMouseOver do znaczniki <a>- tag. Zmienna 'window.status' pozwoli ci wprowadzić napis do wiersza statusu twojej przeglądarki. Jak widać, musisz zmienić cudzysłowy Nie możesz używać wyłącznie znaku ", gdyż JavaScript nie była zdolną rozpoznać ciągu znaków (stringu), który chcesz umieścić w wierszu statusu. Po stringu musisz napisać ;return true.
Drugi z przykładów używa JavaScript odwołując się do funkcji sygnałowej (alert-function). Oto kod źródłowy:
<html>
<head>
<script language="JavaScript">
<!-- Hiding
     function hello() {
       alert("Hello!");
     }
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

To jest całkiem proste. Wykorzystywana jest tu metoda onMouseOver a funkcja hello() zostaje wywoływana, gdy odpowiednie zdarzenie (umieszczenie kursora myszy) będzie miało miejsce.

Więcej o funkcjach daty

Chcę teraz pokazać inny przukład użycia metod 'time' i 'date'. Widziałeś już w działaniu właściwość lastModified. Teraz zamierzamy wprowadzić lokalny czas do naszego dokumentu. Metoda ta wykorzystuje czas i datę twojej maszyny - jeśli więc ustawiłeś datę systemową na - powiedzmy - 5/17/1983 (miesiąc/dzień/rok), to oczywiście otrzymasz błędną datę. Czas i data nie są pobierane z Internetu (lub z jakiegoś innego zewnętrznego źródła).

Oto kod źródłowy:

<script language="JavaScript">
<!-- Hiding
  today = new Date()
  document.write("The time now is: ",today.getHours(),":",today.getMinutes())
  document.write("
The date is: ",
today.getMonth()+1,"/",today.getDate(),"/",today.getYear());// end hiding
contents --></script>

Najpierw tworzymy zmienną dla daty. Robi się to deklarując today=new Date(). Jeśli nie określimy wyraźnie czasu i daty przeglądarka wykorzysta czas systemowy i przypisze zmiennej today odpowiednią wartość. Zauważ, że nie musieliśmy tu nigdzie deklarować zmiennej today. To właśnie różni JS od większości innych języków programowania, które wymagają określenia typu zmiennych zanim mogą one zostać użyte. Utworzyliśmy zatem obiekt 'time', który zawiera lokalny czas i datę. Teraz możemy wprowadzić jego wartość do dokumentu. Musisz napisać today przed każdym get...- method. W przeciwnym wypadku przeglądarka nie wiedziałaby, do którego objektu się odwołujesz. Metoda getMonth() zwraca liczbę z zakresu od 0 do 11 (0 oznacza styczeń a 11 - grudzień). Musimy więc dodać do tej liczby 1, aby otrzymać właściwy numer miesiąca.
Interesującą jest, jak zobaczysz, tworzenie daty - na przykład daty utworzenia dokumentu. Dzięki temu możesz obliczyć, ile dni później twój dokument jest przez kogoś odczytywany. I jeśli to jest więcej niż np. 10 dni, to możesz mu powiedzieć: "Hej - ten dokument naprawdę jest stary - nie czytaj go!"
Aby tego dokonać będziesz potrzebował bieżącej daty, jak w przykładzie wyżej, oraz daty utworzenia dokumentu. Tę ostatnią możesz ustawić tworząc objekt 'date'. Wygląda to tak: docStarted= new Date(96,0,13)
Musisz najpierw podać rok, poźniej miesiąc (nie zapomnij zmniejszyć numer miesiąca o jeden) i dzień. Możesz też podać czas: docStarted= new Date(96,0,13,10,50,0)
Pierwsze trzy liczby wskazują na datę. Za nimi następują godziny, minuty i sekundy.

Powiedziałem, że JavaScript nie posiada typów danych. Ale, jak widać, radzi sobie z datami całkiem dobrze. Dzieje się tak dlatego, że daty reprezentowane są przez liczby milisekund liczonych od 1/1/1970 0:0h. Brzmi dość skomplikowanie, ale jest to powszechny sposób oblicznia daty na komputerach. Nie musisz się zresztą tym się martwić. Musisz tylko użyć odpowiednich funkcji, a to nie jest wcale trudne. Chciałem to ci powiedzieć, abyś nie myślał, że wprowadziłem cię w błąd.

Liczby losowe

Korzystanie z liczb losowych jest znanym problemem przy programowaniu i tworzeniu skryptów. Obecnie JavaScript nie ma jeszcze funkcji generującej liczby losowe, ale wkrótce - jak sądzę - zostanie w nie wyposażona. Na razie trzeba uciec się do pewnych trików. W istocie, nie nie chodzi tu o żaden trik. Jest to dobrze znany sposób, z którego korzystają kompilatory rożnych języków do wyliczenia liczb losowych. Tak, one je wyliczają. Biorą czas i datę systemową i w pewien sposób nią manipulują. Sądzę, że ostateczna wersja JavaScript będzie także używała tej właśnie metody (lub pewnej jej odmiany). Jak powiedziałem wyżej, czas jest po prostu dużą liczbą. Może użyć tej liczby jako argumentu do pewnych obliczeń. Na przykład możesz obliczyć wartość funkcji sinus i uwzględnić wartość absolutną. Będzie to liczba z zakresu od 0 do 1. Skoro zaś z upływem czasu biegną też milisekundy, to nie otrzymasz dwa razy pod rząd tej samej wartości. Jeśli jednak chcesz obliczyć wiele liczb losowych w krótkim odcinku czasu, to nie powinieneś poprzestać jedynie na funkcji sinus, gdyż zwracane przez nią wartości odpowiadały by krzywej sinusoidalnej a więc nie byłyby przypadkowe.

Jeśli jednak chcesz obliczyć liczbę losową, powiedzmy co 20 sekund, to funkcja ta doskonale się do tego nadaje.

Oto generacja liczby losowej:

Kod źródłowy dla tego przykładu:

<html>
<head>
<script language="JavaScript">
function RandomNumber() {
  today = new Date();
  num= Math.abs(Math.sin(today.getTime()));
  return num;
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
  document.write("Oto liczba losowa:", RandomNumber());
// -->
</script>
</body>
</html>

Pokazana tu funkcja generująca liczby losowe nie nadaje się jednakowo do wszelkich zastosowań. Jest tu tylko po to, abyś dowiedział się , jak działa. Poniżej przedstawię funkcję, której autorem jest Maynard Demmon. Musisz podać granice dla wartoś ć zmiennej, np. - 100 a otrzymasz . 'dobrą' wartość przypadkową z zakresu od 0 do 99. Oto kod źródłowy:

  function random() {
     today = new Date();
     num = today.getTime();
     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
     return num;
  }

Tworzenie okien

Tworzenie okien jest wspaniałą własnością JavaScript. Możesz tworzyć nowe okna. Odczytywać dokumenty HTML. Nawigować poprzez Internet - wszystko za pomocą JavaScript. Tu zamierzam pokazać, jak możesz otworzyć okno i coś w nim zapisać. Jeśli naciśniesz ten przycisk, to się dowiesz, co zamierzam ci dalej wyjaśnić.

Zrywając z tradycją nie napisałem tu Hello world!...
Oto źródło:

<html>
<head>
<script language="JavaScript">
function WinOpen() {
   msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>To jest naprawdę fajne!
</B></h1></CENTER>
");}</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Naciśnij mnie" onclick="WinOpen()">
</form>
</body>
</html>

Jak zwykle - widzisz tu przycisk, który wywołuje funkcję. Funkcja WinOpen() tworzy nowe okno za pomocą motody 'open'. Pierwsza para cudzysłowów zawiera URL tej strony. Możesz tam umieścić adres dokumentu HTML, który chcesz odczytać. Jeśli nic nie podasz, to przeglądarka nie załaduje żadnej gotowej strony, ale będziesz mógł sam pisać na stronie za pomocą JavaScript!.
Druga para cudzysłowów zawiera nazwę okna. Tu możesz napisać prawie wszystko, co chcesz - nie ma to znaczenia dla naszego przykładu. Ale otrzymasz komunikat o błędzie, jeśli napiszesz Display Window (ze spacja pomiędzy słowami - Netscape bowiem się myli a ja przez pół godziny nie mogłem znaleźć błędu).
Następna para cudzysłowów zawiera właściwości okna. To jest rzeczywiście ważne. Możesz określić, czy chcesz mieć listwę z narzędziami (toolbar), suwaki (scrollbars) itd.
Jeśli napiszesz toolbar=yes to będziesz miał toolbar w swoim oknie. Poniżej zestawiłem kilka różnych właściwości, z których możesz skorzystać. Musisz te tylko zapisać w wyżej podany sposób. I zawsze bez spacji między nimi. Oto, co możesz zmienić na swojej stronie:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=piksele
height=piksele

W miejscu piksele musisz podać liczbę pikseli. W ten sposób możesz przekazać przeglądarce, jaka powinna być wielkość okna.
Po tym, jak otworzyłeś okno i nazwałeś je 'msg' (poprzedza open- method), możesz w nim pisać. Możesz pisać wykorzystując normalne znaczniki HTML!. To naprawdę wspaniałe. Możesz tworzyć dokument HTML używając podanych przez użytkownika w formularzu w tymże dokumencie. Możesz stworzyć stronę, na której użytkownik podaje w formularzu swoje nazwisko i tworzony jest nowy dokument HTML zawierający to nazwisko!. Jeszcze kilka miesięcy temu coś takiego było możliwe tylko za pomocą skryptów CGI (działających na serwerze a nie w przeglądarce - przypis. tlum.).

Zauważ: Cokolwiek piszesz w oknie, powinieneś zawsze wstawić <br> po ostatniej linijce tekstu. W przeciwnym razie tej ostatniej linijki zapewne nie zobaczysz, gdyż przeglądarki wypisują pełne wiersze - a kiedy nie ma w nich wyraźnie zaznaczonego końca wiersza - przeglądarka czeka aż na pojawienie się reszty tekstu.
Inna ważna sprawa: Jeśli chcesz umieścić jakieś obrazek w nowo utworzonym oknie, to musisz podać wartość dla height i width związanych ze znacznikiem <img>. W przeciwnym wypadku nie zobaczysz żadnego obrazka albo twoja się rozwali. Może to bowiem spowodować bardzo dziwacze zachowanie przegl ądarki, ch ociaż 'winy' za to nie będziesz przypisywał obrazkowi. A zatem podaj te wrtości, jeśli chcesz uniknąć kłopotu.

<img src="mycool.gif" height=100 width=100>

Indeks - Część 1 - Część 3 - Część 4 - Część 5 - Część 6 - Część 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch


Wprowadzenie do JavaScript - Część 3

JavaScript
Wprowadzenie do JavaScript
Część 3

Wiele osób pyta, jak współpracują ze sobą JavaScript i ramki. Aby widzieć ramki, musisz dysponować Netscape Navigatorem 2.0 lub późniejszym. Jest kilka innych przeglądarek, które akceptują ramki, ale nie potrafią interpretować JavaScript. Ale myślę, że jest to tylko kwestia czasu i pojawią się dalsze programy radzące sobie z jednym i drugim.
W pierwszej kolejności chciałbym powiedzieć kilka słów o ramkach. Wiele podręczników i instrukcji nie zawiera żadnej wzmianki o ramkach, ponieważ jest to nowa konstrukcja. Używając ramek, możesz 'dzielić' okno, zawierające dokumenty HTML, na kilka odrębnych części. W ten sposób masz do dyspozycji szereg niezależnych części, do których możesz ładować różne strony. Miłą cechą ramek jest to, że mogą on na siebie wzajemnie oddziaływać. Oznacza to, że mogą wymieniać między sobą informacje.

Dla przykładu, możesz utworzyć dwie ramki. Jedną z normalnym dokumentem HTML, drugą z paskiem narzędziowym. Pasek mógłby zawierać przyciski, za pomocą których nawigujemy w dokumencie. Pasek narzędziowy będzie zawsze widoczny, nawet gdy do drugiej ramki załadujesz inny dokument HTML. Najpierw chciałbym Ci pokazać, jak to będzie wyglądać w praktyce. Po prostu naciśnij poniższy przycisk i przyjrzyj się, jak wygląda strona z ramkami. (Jeśli oglądasz tę stronę w sieci, będziesz musiał chwilkę zaczekać, gdyż skrypty są ładowane z serwera).

A oto definicja ramek w języku HTML:

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%">
    <FRAME SRC="frtest1.htm" name="fr1">
    <FRAME SRC="frtest2.htm" name="fr2">
  </FRAMESET>
</HTML>

Najpierw informujesz przeglądarkę, ile ramek chcesz wyświetlić. Jest to zdefiniowane w znaczniku <frameset...>. Gdy podasz informację o wierszach, przeglądarka podzieli okno na wiersze. Możesz także utworzyć kolumny, wstawiając cols zamiast rows. Możesz również użyć kilku znaczników <frameset...>. A oto przykład:

<FRAMESET COLS="50%,50%">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="cell.html">
    <FRAME SRC="cell.html">
  </FRAMESET>
  <FRAMESET ROWS="33%,33%,33%">
    <FRAME SRC="cell.html">
    <FRAME SRC="cell.html">
    <FRAME SRC="cell.html">
  </FRAMESET>
</FRAMESET>

Definicja powoduje utworzenie dwóch kolumn, przy czym druga kolumna jest podzielona na trzy równe części. 50%,50% w pierwszym znaczniku <frameset> mówi przeglądarce, jak duże mają być ramki (jak szerokie kolumny).
Ramkom możesz przypisać nazwy (name). Jest to ważne dla działania JavaScript. W pierwszym przykładzie możesz zobaczyć, jak ramki pobierają dokumenty. Użycie znacznika <frame> mówi przeglądarce, jaki dokument należy załadować.

Myślę, że podstawowe zasady tworzenia ramek są łatwe do zrozumienia. A teraz spójrz na następny przykład:

Kliknięcie na przycisku wyświetli okno, w którym będziesz mógł kolejnymi kliknięciami na przyciskach przywołać tekst w drugiej ramce (po każdym kliknięciu użyj przycisku Back w listwie przeglądarki - przyp. tłum.)
A oto źródło:

Aby utworzyć ramki, będziesz potrzebował (frames.htm):

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%">
    <FRAME SRC="frame1.htm" name="fr1" noresize>
    <FRAME SRC="frame2.htm" name="fr2">
  </FRAMESET>
</HTML>

Oto źródło frame1.htm:

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function hi() {
       document.write("Hi!<br>");
     }
     function yo() {
       document.write("Yo!<br>");
     }
     function bla() {
       document.write("bla bla bla<br>");
     }
// -->
</script>
</HEAD>
<BODY>
To jest nasza pierwsza ramka!
</BODY>
</HTML>

A teraz frame2.htm:

<HTML>
<body>
To jest nasza druga ramka!
<p>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
     <INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
     <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>

Wow! Skrypty robią się coraz dłuższe! Co zostało zrobione? Użytkownik ładuje pierwszy plik (frames.htm). Ten z kolei tworzy ramki i ładuje do ramek dokumenty - frame1.htm do ramki o nazwie 'fr1' i frame2.htm do ramki o nazwie 'fr2'. Jak dotąd jest to język HTML. Jak możesz się przekonać, frame1.htm zawiera pewne funkcje JavaScript. Ale nie zostały one wywołane w pierwszym skrypcie. Czy te funkcje w ogóle są do czegoś potrzebne? A może jestem zbyt leniwy, żeby usunąć te niepotrzebne funkcje? Choć z pewnością jestem typem gnuśnego faceta, te akurat funkcje są naprawdę potrzebne. Są one wywoływane przez skrypt drugiej ramki 'frame2.htm'. W tym skrypcie tworzymy przyciski, w taki sam sposób, jaki opisaliśmy w pierwszej części Wprowadzenia. Własność onClick jest już nam także znana. Tylko co oznacza to 'parent.fr1'?

Jeśli są Ci znane obiekty, nie będzie to dla Ciebie nowość. Jak zobaczyliśmy wyżej, frame1.htm i frame2.htm są przywoływane przez frames.htm. Dokument frames.htm jest nazywany ramką nadrzędną dla tych dwóch ramek, te zaś, w konsekwencji, są ramkami podrzędnymi dla frames.htm. Możesz tutaj dostrzec rodzaj pewnej hierarchii, która powoduje interrelacje między różnymi ramkami. Spróbuję pokazać tę ideę za pomocą semigrafiki:

              frames.htm                nadrzędna
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   podrzędne

Tego rodzaju układ można oczywiście rozszerzać. Możesz utworzyć dalsze ramki podrzędne dla ramek które same są już podrzędne.

              frames.htm                nadrzędna
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   podrzędne szczebla 1
          /  \
         /    \
        /      \
    gchild1  gchild2                    podrzędne szczebla 2

Jeśli chcesz coś zindeksować w ramce nadrzędnej z frame2.htm, po prostu wstaw parent przed funkcją, którą wywołujesz. Adresowanie funkcji zdefiniowanych w frame1.htm z ramki nadrzędnej może być wykonane przez wstawienie fr1 przed wywołaniem funkcji. Dlaczego fr1? W skrypcie dla ramki nadrzędnej (frames.htm) utworzyłeś różne ramki i nadałeś im odmienne nazwy. Ja sam wybrałem fr1 dla pierwszej ramki. Następny krok jest łatwy. Jak jest wywoływana pierwsza ramka, gdy chcesz się do niej odnieść z poziomu drugiej ramki (trzymanej w drugim okienku, nazwanym fr2)? Jak widzisz na moim okropnym rysunku, nie ma bezpośredniego połączenia między ramkami frame1.htm i frame2.htm. Nie możesz więc bezpośrednio wywoływać z ramki frame2.htm funkcji zdefiniowanych w frame1.htm. Musisz je wywołać za pośrednictwem ramki nadrzędnej. Poprawnym indeksem jest więc parent.fr1. Jeśli chcesz wywołać funkcję hi() z ramki frame2.htm, napisz po prostu parent.fr1.hi(). To jest właśnie to, co zostało zrobione w drugim skrypcie we własności onClick.

Jeśli utworzyłeś jakieś ramki i ktoś korzysta z odsyłacza, ramki nie znikają. Tak jest w porządku, jeśli użytkownik 'pozostaje' w Twojej ramce. Mógłbyć utworzyć pasek z menu, który cały czas pozostaje na ekranie. Ale jeśli Twój czytelnik skacze do innej strony w Internecie, pasek z menu może nie być już wcale potrzebny. Jak więc możesz usunąć ramki, gdy zostały już utworzone?

Po prostu dodaj TARGET=_top do znacznika <a href...>. Wygląda to mniej więcej tak:

<a href="goaway.html" TARGET="_top">jeśli nie chcesz się już więcej gapić na moją stronę</a>

Oczywiście musisz dodać TARGET=_top do każdego odsyłacza, który wyprowadza czytelnika 'na zewnątrz'. Jeśli każdy odsyłacz na stronie prowadzi na zewnątrz, możesz także napisać <base target="_top"> w części nagłówkowej Twojego dokumentu HTML. Oznacza to, że każdy odsyłacz na stronie będzie usuwał ramki po kliknięciu.

Indeks - Część 1 - Część 2 - Część 4 - Część 5 - Część 6 - Część 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch


Wprowadzenie do JavaScript - Część 4

JavaScript
Wprowadzenie do JavaScript
 Część 4

Teraz chciałbym pokazać, jak można umieścić tekst w linii statusu (chodzi o wiersz u dołu ekranu przeglądarki, gdzie zwykle pokazywane są URL-e) i wyjaśnię, na czym polega przewijanie umieszczonego tam tekstu - chociaż tego akurat JavaScript bardzo nie lubi (powiem poźniej dlaczego).
Zacznijmy od pokazania, jak linia statusu jest właściwie "adresowana"? Poniższy skrypt pokazuje, jak można umieścić tam prosty tekst:

Ładnie, no nie? A oto skrypt:

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Pisz!" onclick="statbar('Hej! To jest linia statusu!');">
<input type="button" name="erase" value="Wymaż!" onclick="statbar('');">
</form>
</body>
</html>

Utworzyliśmy dwa przyciski i oba wywołują funkcję statbar(txt). Wyrażenie 'txt' wskazuje, że funkcja otrzymuje pewną zmienną przekazaną jej podczas wywołania. (Ja nazwałem tę zmienną po prostu txt - można by ją nazwać inaczej). Jeśli przyjrzysz się znacznikowi <form> w miejscu, gdzie jest definiowane są przyciski, dostrzeżesz, że jest tam wywoływana funkcja statbar(txt). Nie napisałem tam jednak txt tylko podałem tekst, który ma zostać umieszczony w linii statusu. Można to odczytać następująco: funkcja zostaje wywołana a zmienną txt uzyskuje wartość, która przekazana zostaje tej funkcji. Po naciśnięciu przycisku 'Pisz!' wywołana zostaje funkcja statbar(txt), a txt zawiera string 'Hej! To jest linia statusu'. Taka metoda przekazywania zmiennych do funkcji jest bardzo elastyczna. Spójrz teraz na drugi przycisk. Wywołuje on tę samą funkcję. Gdybyśmy nie mogli przekazywać funkcjom pewnych parametrów, musielibyśmy dla każdego przypadku tworzyć odrębną funkcję.
Co właściwie robi statbar(txt)? Jest to funkcja dość prosta. Przypisuje wartość zmiennej txt zmiennej 'window.status' czyli window.status = txt;. Jeśli podany zostanie pusty string ('') to wiersz statusu zostanie wyczyszczony. Zauważ, że musieliśmy tu użyć pojedynczych cudzysłowów ('), gdyż podwójne cudzysłowy (") użyte zostały do zdefiniowania 'onClick'. Kompilator musi jednoznacznie rozpoznać zawartość ujętą cudzysłowami, dlatego też trzeba było obu rodzajów użyć przemiennie. Sądzę, że to jest całkiem proste.

Własność 'onMouseOver' znasz już z drugiej części niniejszego podręcznika:
<a href="stupid.htm" onMouseOver="window.status='Jeszcze jeden głupi odsyłacz ...'; return true">
Czy nie irytuje cię, że linia statusu nie zostaje wyczyszczona, kiedy kursor nie wskazuje już na żaden odsyłacz. Mam na to dość prosty sposób. Napiszmy niewielką funkcję, która wykorzystuje tę samą technikę wymazywania linii statusu, jaką przedstawiliśmy wyżej.

Ale jak funkcja wymazująca ma być wywołana, skoro nie mamy metody ani własności, która pozwoliłaby nam do wiedzieć s ię, czy kursor myszki opuścił odsyłacz. Rozwiązanie polega na ustawieniu timera.

Wypróbujmy następujący skrypt: tu. Przesuń tylko kursor - nie klikaj!

Poszło dość gładko, prawda? Spójrz tylko na kod źródłowy - jest prostszy niż się na pierwszy rzut oka wydawało.

<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
   window.status = txt;
   setTimeout("erase()",1000);
}
function erase() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Znika!');return true;">
link</a>
</body>
</html>

Wiele części tego skryptu jest ci już znanych. Funkcja moveover(txt) jest funkcją statbar(txt) poddaną operacji kopiuj/wklej! Prawie to samo stało się z funkcją erase().

W obrębie dokumentu HTML (po znaczniku <body>) utworzyliśmy odsyłacz, wykorzystując znaną już własność onMouseOver. Nasza funkcja moveover(txt) wywoływana jest ze stringiem 'Znika!' przekazanym zmiennej txt - tak samo jest w przypadku funkcji statbar(txt). Jedynie funkcja setTimeout(...) jest nowa. Ustala ona timeout, czyli określa, jak długo timer będzie odliczał czas i co się stanie, gdy limit czasu zostanie przekroczony. W naszym przykładzie funkcja erase() jest wywołana po upływie 1000 milisekund (czyli po sekundzie, jak łatwo obliczyć). To fantastystyczna cecha! Funkcja moveover(txt) zostaje zakończona po upływie ustalonego z góry czasu. Przeglądarka automatycznie wywołuje funkcję erase() po upływie 1 sekundy. (Można wyobrazić sobie stronę, na której mówi się się użytkownikowi: Jeśli nie zrobisz tego a tego, to twój dysk twardy zostanie zniszczony wciągu 10 sekund!)
Gdy mija ustalony okres, timer nie jest uruchamiany ponownie. Ale może go uruchomić ponownie funkcja erase().
To prowadzi nas do powszechnie lubianych przewijaczy (scrollers) tekstu.

Jeśli wiesz już, jak umieścić tekst w linii statusu i jak działa funkcja setTimeout - zrozumiesz łatwo, jak działa przewijacz.

Naciśnij ten przycisk, aby zobaczyć mój przewijacz. Skrypt musi zostać załadowany z serwera, a więc bądź cierpliwy, jeśli nie zobaczysz przewijacza natychmiast.

Przyjrzyj się skryptowi:

<html>
<head>
<script language="JavaScript">
<!-- Hide

var scrtxt="To jest wiadomość, na którą odwiedzający twoją stronę będą "+
"patrzyli godzinami całkiem zafascynowani ...";

var lentxt=scrtxt.length;
var width=100;
var pos=1-width;

function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);
  }
  else {
    scroller=scroller+scrtxt.substring(pos,width+pos);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">

Oto twoja odlotowa strona!

</body>
</html>

Skrypt ten wykorzystuje te same funkcje (lub ich części ), które użyliśmy powyżej.
Funkcja setTimeout(...) 'mówi' timerowi, kiedy ma wywołać funkcję scroll(). Scroller przesunie tekst o krok dalej. Na początku jest wiele obliczeń, ale nie są one zbyt ważne dla zrozumienia, jak ten skrypt działa. Obliczenia są potrzebne do ustalenie pozycji, od której ma się zacząć przesuwanie.

Powiedziałem na początku tej części, że przewijacze nie są zbyt popularne, albo - jeśli są popularne - to wkrótce takimi nie będą. Ma to swoje przyczyny. Wymienię tu kilka, ale jest ich z pewnością więcej.
Jeśli zobaczysz przewijany tekst po raz pierwszy, efekt ten może ci się wydać dość fajny. Kiedy jednak widzisz go już milion razy, to już taki fajny nie jest. Prawdę mówiąc nie jest to całkiem dobry argument, gdyż to samo można powiedzieć prawie o każdym ciekawszym triku, który użyjesz na swojej stronie.
Są jednak argumenty poważniejsze. Nie podoba mi się to, że zmienia się prędkość przesuwania tekstu. Jeśli ruszysz myszkę - tekst przyspiesza!. Mnie w każdym razie to drażni. Ten efekt staje się znacznie bardziej wyraźny, jeśli chcąc uczynić przesuwanie szybszym, zmieni się wartość setTimeout. Może znajdzie się rozwiązanie tego problemu. Najgorsze jest jednak to, że jeśli pozwolisz działać swojemu skryptowi przez dłuższy czas, to otrzymasz komunikat Out of memory error. A to jest dość przykre. Jest to problem Netscape Navigatora 2.0. Być może w kolejnych wersjach ten błąd zostanie usunięty.

Jest jeszcze wiele innych procedur dostępnych w Sieci. Widziałem przewijacze, które wypisują tekst do ramki. Programowanie takich efektów nie jest zbyt trudne.

Indeks - Część 1 - Część 2 - Część 3 - Część 5 - Część 6 - Część 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch


Wprowadzenie do JavaScript - Część 5

JavaScript
Wprowadzenie do JavaScript
Część 5

Istotną techniką programistyczną jest posługiwanie się tablicami. Większość języków programowania obsługuje je w taki czy inny sposób. Być może dotarłeś już do etapu, na którym tablice pozwoliłyby pójść dalej. Ale jeśli miałeś okazję przejrzeć dokumentację dostarczoną przez Netscape, zauważyłeś zapewne, że niczego nie powiedziano tam o tablicach. Rzecz w tym, że tablice nie istnieją w JavaScript! Ale pokażę Ci oczywiście, o co tu chodzi.
Po pierwsze, czym są tablice? Można powiedzieć, że tablice to wiele połączonych ze sobą zmiennych. Powiedzmy, że chcesz użyć 10 zmiennych. Mógłbyś rozpocząć od zmiennych a, b, c ... Ale to jest naprawdę skomplikowane. Szczególnie wtedy, gdy chcesz użyć 100 lub więcej zmiennych. Jeśli dysponujesz zmienną, która została nazwana 'MyArray' i ma ona 10 elementów, mógłbyś zaadresować poszczególne elementy za pomocą MyArray[1], MyArray[2], MyArray[3]... (wiele języków programowania rozpoczyna od 0, jako pierwszego elementu, ale my zamierzamy zastosować 1 jako pierwszy element, ponieważ jest to sposób, w jaki używamy go dalej w JavaScript). Tak więc, jeśli chcesz użyć liczby 17 w pierwszym elemencie, musisz napisać MyArray[1]=17. Jak widzisz, możesz pracować z tablicami w taki sam sposób, jak ze zwykłymi zmiennymi. Ale pojawiają się pewne dalsze cechy. Jeśli chcesz użyć liczby 17 w każdym elemencie, możesz to zapisać następująco:
for (var i=1;i<11;i++) MyArray[i]=17
Polecenie for mówi komputerowi, jak często będzie używane następne polecenie. Pętla for rozpoczyna się od i=1. Najpierw komputer otrzymuje polecenie MyArray[1]=17. Następnie i jest zwiększane o 1 i następne polecenie brzmi MyArray[2]=17. i jest zwiększane o 1 do momentu osiągnięcia wartości 10. (Wyrażenie i<11 w pętli for musi być prawdziwe (true) - jeśli i równa się 11, wyrażenie nie jest prawdziwe).
A teraz pokażę Ci funkcję, która inicjalizuje tablice. Funkcja została omówiona w JavaScript Mailing list.

function initArray() {
      this.length = initArray.arguments.length
      for (var i = 0; i < this.length; i++)
      this[i+1] = initArray.arguments[i]
   }
Nie musisz rozumieć tej funkcji. Powinieneś jedynie wiedzieć, jak ją zastosować. Jeśli chcesz utworzyć tablicę z trzema elementami, po prostu napisz: var MyArray= new initArray(17,18,19). 17,18,19 są przypisane do elementów 1,2,3. Mógłbyś także wpisać ciągi do tablicy. Nie musisz się więc zastanawiać, jaki typ został użyty! var heyho= new initArray("This","is","cool"). Mieszanie różnych typów nie stanowi w ogóle problemu: var Mixedup= new initArray(17,"yo",103).

Zainicjuję teraz tablicę 'Mixedup' i pokażę wynik:

A oto treść odpowiedniego skryptu:

<script language="JavaScript">
<!-- Hide
  var Mixedup= new initArray(17,"yo",103);
  document.write("Element No. 1: "+Mixedup[1]+"<br>");
  document.write("Element No. 2: "+Mixedup[2]+"<br>");
  document.write("Element No. 3: "+Mixedup[3]+"<br>");
// -->
</script>

Napisałem wczoraj małą grę. Natknąłem się przy tym na problem, który także możesz napotkać. Jeśli zamierzasz usunąć okno czy ramkę, przekonasz się w dokumentacji Netscape, że JavaScript zna funkcję 'document.clear()'. Ale jeśli ją zastosujesz, nic się nie dzieje! Funkcja 'document.clear()' wydaje się nie działać na żadnej platformie. Gordon McComb pokazał mi następujący skrypt, który usuwa okno tak, jak sobie tego życzyłem.

     document.close();
     document.open();
     document.write("<P>");

Nie musisz wpisywać document.write("<P>");. Jest to ważne jedynie wtedy, gdy posyłasz coś do tego okna. Działa to także z ramkami.

A teraz przypatrzmy się skryptowi, który pozwala nawigować między różnymi dokumentami. Chodzi tutaj o funkcję back i forward. Jeśli masz na stronie odsyłacz do poprzedniej strony, nie jest on tym samym, co przycisk Back w Netscape Navigatorze. Dla przykładu, użyłem paru wstecznych odsyłaczy, które działają jak normalne odsyłacze, ale zdaję sobie sprawę, że czytelnik mógł dotrzeć do mojej strony z całkiem innego miejsca. Przycisk Back w Netscape Navigatorze przeniesie go wstecz w JEGO historii skoków. To samo możesz także zrobić za pomocą JavaScript. Kliknij w tym miejscu, aby wykonać krok wstecz! Odpowiedni skrypt ma postać:

<html>
<body>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Back" onClick="history.back()">
     <INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.htm'">
     <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>
Możesz także napisać history.go(-1) i history.go(1).

Indeks - Część 1 - Część 2 - Część 3 - Część 4 - Część 6 - Część 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch


Wprowadzenie do JavaScript - Część 6

JavaScript
Wprowadzenie od JavaScript
Część 6

Otrzymałem wiele listów dotyczących kwestii, jak można załadować dwie strony za pomocą jednego kliknięcia myszką. W zasadzie są trzy różne rozwiązania tego problemu. Pierwsze polega na utworzeniu przycisku, który - po naciśnięciu - wywołuje funkcję, która ładuje jednocześnie dwie strony - kążda do osobnej ramki czy też okna. Nie jest to trudne do zrealizowania, jeśli tylko przyjrzałeś sie przykładom w innych częściach tego Wprowadzenia. Mamy bowiem wszystkie potrzebne do tego elementy.

Tworzyny trzy ramki. Pierwsza będzie wykorzystana dla przycisku. Pierwsza strona HTML jest potrzebna tylko po to, aby otworzyć te ramki i odpowiednio jej nazwać. Nie jest to nic nowego, gdyż w części trzeciej używaliśmy tej techniki, aby poeksperymentować z ramkami. Zresztą zaraz to pokażę. (Nie wiem, czy też masz takie wrażenie, ale autor książki komputerowej zawsze myśli, że nie trzeba o wszystkim pisać, gdyż jest to proste - z tym właśnie mam problem. A zatem do dzieła :)

frames2.htm

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*">
  <FRAMESET ROWS="100%,*">
    <FRAME SRC="loadtwo.htm" NAME="fr1">
      </FRAMESET>
  <FRAMESET ROWS="75%,25%">
    <FRAME SRC="cell.htm" NAME="fr2">
    <FRAME SRC="cell.htm" NAME="fr3">
      </FRAMESET>
</FRAMESET>
</HTML>

Dokument loadtwo.htm jest ładowany do pierwszej ramki - jest to ta ramka z przyciskiem.

loadtwo.htm

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')"></FORM>
</BODY>
</HTML>

Funkcja 'loadtwo()' zostaje wywołana, gdy naciśnięty zostanie przycisk. Funkcji tej przekazane zostają dwa stringi. Jeśli przyjrzysz się funkcji 'loadtwo()', to zobaczysz, że druga ramka fr2 ładuje stronę, która została zdefiniowana przez pierwszy string w tym wywołaniu. Jeśli masz różne przyciski otwierające różne strony, to możesz taką funkcję ponowanie wykorzystać. Musisz tylko przekazać URL-e (adresy) odpowiednich stron.

Druga technika wykorzystuje "hiperlinki" czyli hipertekstowe odsyłacze. W Internecie krążą przykłady zawierające coś takiego:
<a href="twoj_link.htm onCLick="twoja_funkcja()">
Wydaje się, że ten sposób nie sprawdza się na wszystkich platformach sprzętowych, a zatem lepiej go nie używać. Nie jestem pewien, czy w ogóle może to działać - ale nie musimy się tym martwić, gdyż jest jeszcze inny sposób implementacji. Możemy bowiem wywołać funkcję następująco:

<a href="javascript:moja_funkcja()">Mój Link</a>
Jest to naprawdę proste i co ważniejsze - zdaje się działać bez problemów w wszystkich przeglądarkach. Wystarczy, że napiszesz javascript: a następnie podasz nazwę twojej funkcji jako 'link'. Jeśli wywołujesz funkcję 'loadtwo()' z powyższego przykładu, to możesz zaktualizować dwie ramki za pomocą jednego kliknięcia na odsyłaczu.

Trzecia technika załadowania dwóch stron za jednym kliknięciem może wykorzystać albo przyciski, albo normalne "hiperlinki". Możemy to osiągnąć za pomocą drugiej pokazanej wyżej metody, ale podejście, które teraz zaprezentuję, wydaje się bardziej właściwe. Chodzi o to, aby jedną stronę HTML załadować do jednej ramki. Robi się to tak:
<a href="getfr2.htm" target"fr2">Naciśniej tu!</a>
Już to znasz. Teraz dodamy własność 'onLoad' ładowanemu plikowi. Plik 'getfr2.htm' mógłby wyglądać następująco:

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>

Oczywiście musisz to dodać do każdego dokument ładowanego do drugiej ramki.

Innym, często pojawiającym się problem jest się kwestia, jak nowe strony można załadować do okna. Okno powinno się otworzyć, gdy użytkownik kliknie na odsyłaczu. Musisz tylko dodać ponownie własność 'target' do swojego znacznika <a href...>. Wygląda to tak:
<a href="goanywhere.html" target="Okno zasobów">Go!</a>

Teraz chcemy przyjrzeć się różnym operatorom, które możesz użyć w JavaScript. Operatory są silnym narzędziem pozwalając skrócić i udoskonalić skrypt. Jeśli na przykład chcesz sprawdzić, czy zmienną x jest większa od 3 i mniejsza od 10, to mogłbyś napisać to w ten sposób:

if (x>3)
  if (x<10)
    doroboty();

Funkcja 'doroboty()' jest wywoływana, jeśli x>3 i x<10. Jest jednak szybszy sposób zapisania:

if (x>3 && x<10) doroboty();
The && nazywa sie operatorem AND (logiczne 'i'). Jest też operator OR (logiczne 'lub'). Możesz go użyć, jeśli chcesz sprawdzić, czy spełniony jest warunek: zmienna x jest równa 5 'lub' zmienna y jest równa 17:

if (x==5 || y==17) doroboty();
Funkcja 'doroboty()' zostaje wywołana gdy x==5 lub y==17, jak też gdy oba te porównania są prawdziwe.
Porównań dokonuje się za pomocą operatora (są też oczywiście operatory <,>,<= and >=). Jeśli znasz C/C++, to i je znasz. Pojedynczy znak równości '=' jest używany do przypisania wartości pewnej zmiennej. Jeśli znasz język Pascal, to może to być trochę mylące, gdyż w Pascalu używa się znaku ':=' jako symbolu przypisania natomiast znaku '=' jako symbolu porównania.

Jeśli chcesz wiedzieć, czy wartość jakiejś zmiennej nie jest równa pewnej liczbie, to bez użycia operatorów mogło by to być dość skomplikowane. Dokonuje się to stosując po prostu '!=' ("nie jest równe"). Nasz przykład można zatem zapisać następująco: x != 17.

Jest wiele innych bardziej interesujących operatorów, które mogą uczynić twój program bardziej efektywnym. Zajrzyj do dokumentacji dostarczonej przez Netscape, aby zapoznać się z pełnym zakresem operatorów, które możesz używać w JavaScript.

Indeks - Część 1 - Część 2 - Część 3 - Część 4 - Część 5 - Część 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch


Wprowadzenie do JavaScript - Część7

JavaScript
Wprowadzenie do JavaScript
Część 7

Informacje wprowadzane do formularzy są bardzo ważne dla wielu stron WWW. Informacja od użytkownika jest często odsyłana z powrotem do serwera. JavaScript pozwala kontrolować zawartość informacji, zanim zostanie ona przesłana do serwera. Najpierw pragnę pokazać, w jaki sposób formularze mogą być kontrolowane. Później rzucimy okiem na możliwości przesyłania informacji za pomocą JavaScript lub HTML.

Przede wszystkim musimy utworzyć prosty skrypt. Strona HTML powinna zawierać dwa elementy tekstowe. Użytkownik ma wpisać swoje nazwisko do pierwszego i adres poczty elektronicznej do drugiego. Możesz wpisać dowolną treść i kliknąć na przycisku. Spróbuj także nie wpisać niczego i kliknąć.

Wpisz swoje nazwisko:

Wpisz adres swojej poczty elektronicznej:

Jeśli chodzi o pierwszy element, gdy nie podasz żadnej informacji, otrzymasz komunikat o błędzie. Dowolna inna informacja jest poprawna. Oczywiście nie chroni to przed podaniem błędnego nazwiska. Przeglądarka akceptuje nawet cyfry. Jeśli więc wpiszesz '17', otrzymasz komunikat 'Cześć, 17'!.
Drugi formularz jest nieco bardziej wyrafinowany. Spróbuj wpisać jakiś prosty ciąg, np. swoje nazwisko. Skrypt nie zadziała, dopóki w ciągu nie znajdzie się znak @. Kryterium zaakceptowania ciągu jest znak @. Sam znak @ będzie poprawny, choć raczej mało sensowny. Każdy adres poczty elektronicznej zawiera ten znak, więc kontrola tego znaku jest odpowiednim sprawdzianem.

Co wykonuje skrypt w przypadku tych dwóch formularzy i jak je sprawdza? A oto treść:

<html>
<head>
<script language="JavaScript">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("Podaj ciąg znaków!")
  else {
   alert("Cześć "+form.text1.value+"! Informacja poprawna!");
  }
}

function test2(form) {
  if (form.text2.value == "" ||
      form.text2.value.indexOf('@', 0) == -1)
        alert("Niepoprawny adres poczty elektronicznej!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Wpisz swoje nazwisko:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test" onClick="test1(this.form)">
<P>
Wpisz adres swojej poczty elektronicznej:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test" onClick="test2(this.form)">
</body>

Najpierw rzuć okiem na kod HTML w części BODY. Tworzymy po prostu dwa elementy tekstowe i dwa przyciski. Przyciski wywołują funkcje test1(...) lub test2(...), zależnie od tego, który przycisk jest naciśnięty. Funkcjom przypisujemy this.form, aby móc później adresować właściwe elementy w funkcjach.
Funkcja test1(form) sprawdza, czy ciąg znaków jest pusty. Jest to robione za pomocą if (form.text1.value =="").... 'form' jest zmienną, która otrzymuje wartość 'this.form' w wywołaniu funkcji. Wartość wprowadzoną do formularza możemy otrzymać używając 'value' w kombinacji z form.text1. Aby sprawdzić, czy ciąg jest pusty, porównujemy go z "". Jeśli wprowadzony ciąg równa się "", oznacza to, że nie wprowadzono żadnej informacji. Użytkownik otrzyma komunikat o błędzie. Jeśli zostanie wprowadzony jakiś ciąg znaków, użytkownik otrzyma komunikat potwierdzający poprawność.
Problemem jest to, że użytkownik mógłby wpisać ciąg spacji. Jest to rozpoznawane jako poprawna informacja! Jeśli chcesz, możesz oczywiście wprowadzić sprawdzanie takich sytuacji i wykluczyć je. Sądzę, że jest to już całkiem proste.
A teraz przyjrzyjmy się funkcji test2(form). Funkcja ta porównuje ponownie wprowadzony ciąg znaków z ciągiem pustym "", aby upewnić się, czy cokolwiek zostało wpisane. Ale do polecenia if coś zostało dodane. || jest nazywane operatorem OR. Uczyłeś się o nim już w części szóstej Wprowadzenia.
Polecenie if sprawdza, czy pierwsze lub drugie porównanie jest prawdziwe. Jeśli przynajmniej jedno z nich jest prawdziwe, całe polecenie if jest prawdziwe i wykonywane jest następne polecenie. Oznacza to, że otrzymasz komunikat o błędzie wtedy, gdy ciąg jest pusty albo nie zawiera znaku @. Druga operacja w poleceniu if sprawdza, czy wpisany ciąg zawiera znak @.

Jakie pojawiają się możliwości wysyłania zawartości formularza. Najprostszą jest wysłanie za pomocą poczty elektronicznej. Jest to metoda, której przyjrzymy się nieco bliżej. Jeśli chcesz otrzymać od użytkownika zawartość formularza bez użycia poczty i po przetworzeniu go na serwerze, musisz się posłużyć skryptem CGI. Skryptu takiego mógłbyś potrzebować np. w charakterze systemu wyszukiwawczego (choćby takiego, jak Yahoo), gdzie użytkownik otrzymuje wynik niemal natychmiast po podaniu szukanych ciągów znaków. Nie musi wcale czekać, aż osoby obsługujące serwis przeczytają zawartość formularza. Jest to wykonywane automatycznie przez serwer. JavaScript nie dysponuje takimi możliwościami. Nawet gdy chcesz utworzyć książkę gości (guestbook), nie możesz zmusić serwera, aby automatycznie dodawał informację do istniejącej strony za pomocą JavaScript. Tylko CGI potrafi to w tej chwili wykonywać. Oczywiście możesz utworzyć książkę gości aktualizowaną za pośrednictwem poczty elektronicznej. Musisz jednak wpisywać danę ręcznie. Ma to sens wtedy, gdy liczba odpowiedzi nie przekracza 1000 dziennie.
Poniższy skrypt to czysty kod HTML. JavaScript nie jest tutaj potrzebny! Oczywiście wtedy, gdy nie chcesz weryfikować wprowadzanej tu treści. Muszę zaznaczyć, że polecenie mailto nie działa w każdej przeglądarce, ale w większości nowszych programów - tak.

<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>Czy ta strona podoba Ci się?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Zupełnie nie.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Strata czasu.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Najgorsze badziewie w całym Internecie.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Wyślij odpowiedź">
</FORM>
Gdy w definicji podasz swój adres pocztowy, otrzymasz odpowiedzi za pomocą poczty elektronicznej. Problem jednak w tym, że odpowiedź taka może wyglądać na pierwszy rzut oka nieco tajemniczo. Niekiedy wszystkie spacje są wypełniane znakiem '+', niekiedy '%20'. Moze%20to+wiec+niekiedy+wygladac%20w+taki+sposob. W sieci jest jednak parę programów, które zamieniają te hieroglify na nieco bardziej ludzką postać (choćby mail:Formatter - przyp. tłum.).

Jest jeszcze inna sympatyczna rzecz, która może uczynić Twoje formularze nieco bardziej przyjaznymi. Możesz określić już na początku, na które elementy kładziemy akcent. Albo możesz nakazać przeglądarce sprawdzanie, które informacje od użytkownika są niepoprawne. Oznacza to, że przeglądarka będzie od razu powodowała wprowadzenie kursora do określonego pola formularza, bez ingerencji użytkownika. Można to wykonać za pomocą następującgo skryptu. :

function setfocus() {
        document.first.text1.focus();
        return;
}

Skrypt ten kładzie nacisk na pierwszy element tekstowy w pokazanym wyżej skrypcie. Musisz określić nazwę całego formularza, który nosi nazwę first - oraz nazwę konkretnego elementu formularza - tutaj text1. Jeśli chcesz położyć akcent na ten element, gdy formularz jest ładowany, możesz dodać własność onLoad do znacznika <body>. Wygląda to na przykład tak:

<body onLoad="setfocus()">

Indeks - Część 1 - Część 2 - Część 3 - Część 4 - Część 5 - Część 6

Aktualizacja: 11 maja 1996
(c) 1996 by Stefan Koch


JavaScript-Intro by Voodoo

I have mentioned it before but I think it is important to repeat it. Java is not JavaScript! There are many differences. Many postings about Java in the newsgroup comp.lang.javascript prove that there is a lack of information. The other way round questions about JavaScript shall be posted to comp.lang.javascript NOT to comp.lang.java. The techniques used in Java and JavaScript differ so much because Java is a programming language and JavaScript is a scripting language. This languages are two different languages with different purposes. I must admit that the two almost similar names may seem to be the same. But this is not so! Please take this into consideration when you ask somebody about Java or JavaScript.


JavaScript - Changes

About changes to JavaScript

Even if the Netscape Navigator 2.0 isn't in beta any longer JavaScript is still being developed. We will see many changes in the future because this scripting language is still very young. But at the moment we can already work with many features seriously. Some things of JavaScript are still about to change. The best example is the one I had trouble with myself. I had the property lastmodified in my document. This was correct for Netscape 2.0 beta2. But with newer versions this property changed to lastModified. You might think this is just a small mistake and the browser does not bother. But for the browser lastmodified and lastModified is something different. JavaScript is case sensitive! So you have to be certain about the case!
Some functions that are mentioned in the documentation provided by Netscape are not yet implemented. Still there are some nasty bugs. Some only affect some users. For example there is a known problem for Mac users. The date- functions do not work properly. Please have a look at the FAQ (frequently asked questions).

I hope you understand that I cannot know what further changes are made to JavaScript and in how far this is going to affect your scripts. But as things are moving so fast today I don't want to wait until the final version (if things like this exist today...) is ready. And I have the feeling you don't want to wait either... And if you realize a problem with my examples please write. I will write further parts for this introduction. So be sure to check back once in a while.

Voodoo's Home - Get Back - e-Mail


JavaScript-Intro by Voodoo

Ta sama strona z tabelami...

Jest to Wprowadzenie do JavaScript. Poznasz w nim podstawowe zasady umieszczanie skryptów w dokumencie HTML. We Wprowadzeniu podałem kilka łatwych do zrozumienia i zarazem kształcących przykładów.

  • Wprowadzenie do JavaScript - Część 1:
    • Co to jest JavaScript?
    • Uruchamianie skryptów JavaScript
    • Zagnieżdżanie skryptów w dokumentach HTML
    • Pierwsza funkcja
    • Elementy formularza
    • Ostatnia aktualizacja - data

  • Wprowadzenie do JavaScript - Część 2:
    • Funkcja onMouseOver - właściwości
    • Więcej o funkcjach daty
    • Liczby losowe
    • Tworzenie okien

  • Wprowadzenie do JavaScript - Część 3:
    • Praca z ramkami

  • Wprowadzenie do JavaScript - Część 4:
    • Wiersz statusu
    • Funkcja setTimeout
    • Programowanie scrollera

  • Wprowadzenie do JavaScript - Część 5:
    • Tablice
    • Jak usunąć dokument?
    • Przyciski Back and Forward

  • Wprowadzenie do JavaScript - Część 6:
    • Ładowanie dwóch ramek jednym kliknięciem
    • Otwieranie nowego okna po kliknięciu na odsyłaczu
    • Operatory

  • Wprowadzenie do JavaScript - Część 7:
    • Kontrola formularzy
    • Przesyłanie informacji z formularza
    • Jak położyć akcent na elemencie

  • Play a little JavaScript- game

  • Get a copy of this page so you can read it offline (62.1kB) (Last update: 9.April'96)
  • About changes to JavaScript
  • Java is not the same as JavaScript!

Mirror- Sites:

  • My german homepage
  • My site at Webconn

  • Australia - Vince Mankelow
  • Austria- Franz Knipp
  • Italy
  • Sweden - Mikael Nicolaidis
  • New Zealand

If you want to read this document in other languages:

  • Chinese - translated by Been-Chian Chien
  • Chinese - translated by Shii-Tyng Duann
  • Czech - translated by Pavel JANIK ml.
  • German - translated by Veikko Wuensche
Links to other JavaScript ressources:

  • Many links to other JavaScript pages
  • Read the JavaScript- FAQ (Frequently Asked Questions)
  • Netscape - Home
  • Download Netscape Navigator 2.0

Stefan's Home - e-Mail


Well, I told you this is a stupid link...


Kanał informacyjny "Przysmaki dla naszych zwierzaków"

Jeśli używasz Internet Explorer 4, zaabonuj nasz kanał

Dodaj kanał 'Przysmaki'


Liczniki

Webmedia zrezygnowały z darmowych liczników - czekamy na jakiś nowy serwis.


Example Page, Background Music with Beatnik and RMF Files

Pod prawym klawiszem myszki masz opcje


Pod prawym klawiszem myszki masz opcje


EchoSpeech - Voice of the Web

Kliknij lewym przyciskiem myszki na ikonie.


Adobe PDF - odsyłacz

 Dokument w formacie PDF


 Jeśli zainstalowałeś odtwarzacz RealAudio, kliknij w tym miejscu


TrueSpeech

Ten plik w formacie WAVE (TrueSpeech), o długości ok. 5 sekund, ma tylko 4,6 KB objętości!


To jest przykładowy dokument - plik TXT zapisany w standardzie kodowania Windows 1250.


Netscape Composer

(Opis z 2 czerwca 1997)

Jeśli ktoś uważa, że Netscape już przegrał wojnę o Internet, chyba się pomylił - prezentowany w kolejnych wersjach beta Netscape Communicator 4 (obecnie już beta 5), bezpośredni następca Navigatora, jest wyśmienitym, zaawansowanym produktem, który nie odda pola bez walki i zapewne zachowa wielki udział w tym coraz bardziej lukratywnym rynku.

Dodatkowym magnesem dla użytkowników będzie zapewne wspólna strategia Corela i Netscape'a, której owocem będzie w niedługim czasie corelowski superPIM - CorelCENTRAL, będący połączeniem Sidekicka, InfoCentrala i całej kolekcji internetowych programów Netscape'a. Rynek wielu milionów użytkowników WordPerfecta stanowi tutaj wdzięczne pole do penetracji.

W tym miejscu pragnę się ograniczyć do przedstawienia jednego z elementów Communicatora - graficznego edytora HTML - Netscape Composer.

Edytor ten stanowi niewątpliwie pewien krok do przodu w porównaniu z poprzednimi wersjami, zawartymi w wersji Navigator Gold. Netscape oferuje swój pakiet dla wielu platform i zapewne Composer będzie naturalnym wyborem dużej części zwolenników przeglądarki Netscape'a. Podejrzewam, że zainteresuje się nim również wielu polskich użytkowników, gdyż edytora można używać także do tworzenia polskojęzycznych dokumentów. W środowisku Windows mocną konkurencję będzie oczywiście stanowić polskojęzyczny FrontPad (integralna część Internet Explorera 4), ale chociaż Composer mocno ustępuje swojemu konkurentowi jakością narzędzi, w integracji ze świetnymi pozostałymi modułami (np. poczta i grupy dyskusyjne) jest atrakcyjnym narzędziem - instrumenty Composera służą do tworzenia poczty elektronicznej i wiadomości usenetowych w formacie HTML.

Na początku warto podkreślić dwa istotne fakty. Możliwe jest kodowanie dokumentu zgodnie ze standardem ISO (wystarczy tylko wybrać View - Encoding - Central European ISO-8859-2), a także używanie normalnej polskiej klawiatury; edytor, zgodnie z wybraną stroną kodową, dokonuje automatycznej konwersji znaków.

Nową stronę można budować od zera albo skorzystać z szablonu, jakim może być zapisany wcześniej dokument HTML lub szablon z internetowej strony Netscape'a. Na razie nie jest jeszcze zaimplementowany kreator (Wizard).

Choć dokument jest tworzony graficznie, mamy dwojakiego rodzaju dostęp do kodów formatujących. Z jednej strony można je obejrzeć na takiej samej zasadzie, jak kody dowolnego dokumentu w Internecie, bez możliwości ich edycji, z drugiej zaś możliwe jest wczytanie źródła do dowolnego edytora tekstów lub HTML i dokonanie poprawek. Jeśli zdecydujemy się na nie, zamknięcie edytora pomocniczego spowoduje ponowne wczytanie zmodyfikowanej strony.

Composer oferuje podstawową funkcjonalność, wystarczającą do sporządzenia stosunkowo prostej strony, pozbawionej wyrafinowanych elementów. Pozwala wstawić grafikę, kopiując ją zarazem z miejsca źródłowego do katalogu z dokumentem, ale możliwe jest pozostawienie na miejscu, a wtedy edytor zapamiętuje relatywny adres obrazka (jeśli, rzecz jasna, znajduje się na tym samym dysku). Gdy chcemy wstawić grafikę w formacie BMP, Composer dokonuje automatycznej konwersji do formatu JPEG i pozwala wybrać rozdzielczość. W analogiczny sposób edytor zapamiętuje ścieżki w odsyłaczach. W przypadku tych ostatnich dość kłopotliwy jest sposób wstawiania adresu poczty elektronicznej (konieczne jest wpisanie mailto:).

Dość wygodnym narzędziem jest edytor tabel, choć na pewno brakuje mu jeszcze paru zaawansowanych funkcji, za pomocą których są definiowane specjalne znaczniki formatujące, np. obramowania. Tym niemniej komfort edycji jest zapewniony dzięki możliwości dowolnego przedefiniowania w każdym momencie wstawionej już tabeli, np. dodania wiersza czy kolumny albo zmiany kolorów. Dokonywanie zmian jest zresztą bardzo łatwe w odniesieniu do wszystkich elementów, a wydatną pomocą służy prawy klawisz myszki, pod którym znajduje się zmieniające się, kontekstowe menu. W równie prosty sposób wprowadza się atrybuty tekstu, style fizyczne i logiczne czcionki czy rodzaj wyrównania tekstu na stronie.

Możliwe jest definiowanie globalnych parametrów strony, np. barw lub tła dokumentu, podstawowych kolorów czcionki w tekście i odsyłaczach, tytułu, autora, opisu, słów kluczowych.

Jeśli wczytujemy do edytora stronę, która zawiera nieznane mu elementy, pojawiają się one w towarzystwie specjalnych znaczków, sygnalizujących tę sytuację.

Z bardziej zaawansowanych funkcji można jeszcze wymienić posyłanie dokumentu na serwer, dzięki funkcji Publish. Edytor samodzielnie rozpoznaje wszystkie pliki skojarzone z daną stroną i proponuje ich wysłanie, aczkolwiek można z nich zrezygnować, jeśli wysyłamy tylko aktualizację danej strony. Osoba tworząca dokument anglojęzyczny może skorzystać ze słownika ortograficznego.

W Composerze brakuje na pewno wielu bardziej zaawansowanych funkcji, np. budowania ramek, formularzy, stylów, projektów, skryptów itd. Można jednak ręcznie wstawiać niektóre kody lub wspomagać się tekstowym edytorem HTML. Niestety, nie będą one poprawnie widziane w edytorze.

Generalnie, można uznać, że Composer jest edytorem poziomu podstawowego (entry level), przynajmniej w obecnej postaci. Wystarczy do szybkiego utworzenia prostego dokumentu i z pewnością zaspokoi potrzeby wielu webmasterów. Można go nawet zalecać jako dobre narzędzie szkoleniowe, zanim rosnące potrzeby nie skłonią do wybrania silniejszego narzędzia graficznego lub wręcz edytora tekstowego. Composer zwalnia jednak w pewnej mierze z konieczności uczenia się języka HTML, aczkolwiek należy jednak rozumieć sens wykonywanych operacji.


CorelWEB.GRAPHICS SUITE

(Opis z 22 grudnia 1996)

Jeden z najnowszych produktów Corela, CorelWEB.GRAPHICS SUITE (o dość osobliwej pisowni, jak widać) jest uniwersalnym pakietem przeznaczonym dla autorów stron WWW pracujących w środowisku Windows 3.1, Windows 95 lub Windows NT. W praktyce zaspokaja on wszelkie związane z tym potrzeby, dostarczając obszernego spektrum narzędzi graficznych.

Pakiet składa się z siedmiu elementów: CorelWEB.DESIGNER (graficzny edytor HTML), CorelWEB.GALLERY (galeria 8 tys. gotowych grafik GIF i JPEG), Corel.WEB.TRANSIT (narzędzie do konwersji dokumentów do postaci HTML), CorelWEB.DRAW (wersja CorelDRAW przystosowana do potrzeb grafiki internetowej), CorelWEB.MOVE (program do tworzenia animacji), CorelWEB.WORLD (narzędzie do tworzenia VRML) i WebSite (serwer WWW).

CorelWEB.DESIGNER jest graficznym edytorem o charakterze WYSIWYG. Jest nieco słabszy funkcjonalnie od znanego już dość dobrze Microsoft FrontPage, ale w zupełności powinien wystarczyć autorowi, który nie stawia edytorowi jakichś szczególnych wymagań. Możliwe jest użycie w nim czcionki w standardzie zarówno CP-1250, jak i ISO-8859-2, dzięki czemu nie będzie konieczne konwertowanie strony. deklarację Charset trzeba jednak wstawić ręcznie (możliwa jest edycja kodu źródłowego).

Edytor korzysta z obszernej biblioteki gotowych szablonów, pozwala tworzyć graficznie tabele i formularze, budować mapy odsyłaczy na grafikach, wstawiać inne pliki HTML i aplety, a także zagnieżdżać pliki. Z poziomu programu można także uruchamiać inne moduły pakietu, a współpraca jest tutaj bardzo efektywna. Kilka listew narzędziowych daje bezpośredni dostęp do wielu poleceń, choć brakuje wielu użytecznych skrótów klawiszowych (np. do tytułów różnego stopnia).

Ograniczony zestaw funkcji edytora, mimo całej wygody pracy, nie czyni go faworytem wśród programów tej klasy, choć zapewne większość użytkowników uzna go za wystarczające narzędzie w codziennej pracy, zwłaszcza we współpracy z pozostałymi modułami pakietu.

CorelWEB.DRAW to po prostu piąta wersja CorelDRAW, przystosowana do potrzeb webmastera. Najwygodniej jest uruchomić program z poziomu CorelWEB.DESIGNERA, wykonać rysunek, a następnie za pomocą funkcji Publish to WEB.DESIGNER powrócić do edytora, w którym automatycznie, w miejscu kursora, pojawia się grafika. Domyślnie jest przyjęta opcja przezroczystości rysunków. Możliwe jest także tworzenie map odsyłaczy, eksportowanie rysunku do postaci pliku GIF lub JPEG, bezpośrednie tworzenie strony HTML z rysunkiem oraz publikowanie w formacie Corel Barista (Java).

CorelWEB.MOVE to narzędzie do budowania animacji. Program zawiera obszar roboczy, do którego wstawiamy aktorów i własności (z gotowych bibliotek CorelMOVE lub samodzielnie narysowanych w WebDRAW, względnie importowanych z innych źródeł), a także dźwięki (gotowe lub samodzielnie nagrywane). Wstawiony obiekt możemy dodatkowo edytować (retuszować) w miniedytorze graficznym. Rolety z narzędziami pozwalają manipulować poszczególnymi klatkami animacji. Cues, czyli dodatkowe wskazówki, dają możliwość definiowania zachowania elementów animacji, a Path - określania jej ścieżki. Sporządzona animacja może być wyeksportowana jako plik HTML z Javą, animacja GIF, plik wideo AVI, zestaw odrębnych plików lub wstawiona bezpośrednio, w miejscu kursora, do WebDESIGNERA.

Wszystkie te narzędzia są skutecznymi instrumentami w sprawnych rękach, ale konieczne jest poeksperymentowanie i nabranie stosownego doświadczenia.

CorelWEB.WORLD jest unikatowym narzędziem do budowania obiektów VRML (rzeczywistość wirtualna). W obszarze roboczym wstawiamy obiekty (box), a następnie dekorujemy je barwami, tapetami, grafikami lub animacjami. W programie dostępne są gotowe galerie, ale możemy wstawiać pliki także w innych formatach. Trójwymiarowy podgląd pozwala natychmiast obejrzeć projekt w bieżącym stadium. Manipulując pozycją obserwatora i pozycją kamery, możemy wędrować po utworzonym środowisku 3D. Niektóre obiekty można opatrywać dźwiękiem i komentarzem tekstowym.

Gotowy projekt można bezpośrednio zapisać w formacie VRML lub skorzystać z funkcji Publish to WEB.DESIGNER, która wstawia projekt do edytora i kopiuje wszystkie niezbędne pliki, składające się na projekt, do odpowiedniego podkatalogu. Projekt jest zagnieżdżany w dokumencie i może być obejrzany w przeglądarce zaopatrzonej w funkcję interpretacji VRML (dysponują nią, dzięki licznym wtyczkom, Netscape Navigator i Microsoft Internet Explorer). Oczywiście oglądanie skomplikowanych projektów VRML w sieci wymaga dość szybkich łączy, ale autorzy programu podkreślają przydatność tego narzędzia w korporacyjnych intranetach, które oferują zazwyczaj większe możliwości. można także dystrybuować projekt z viewerem.

CorelWEB.GALLERY jest obszerną biblioteką plików GIF i JPEG (ok. 8 tysięcy), które można bezpośrednio wstawiać na strony WWW. Pliki są umieszczone w odpowiednich folderach (albumy) i można je wygodnie oglądać za pomocą specjalnej przeglądarki. Bezpośrednio z przeglądarki można je wstawiać do innych programów za pomocą drag and drop. WEB.DESIGNER pozwala uruchamiać galerię z poziomu edytora, a następnie wstawiać grafikę za pomocą copy & paste.

Galeria oferuje obszerną paletę narzędzi zarządzających. Możemy tworzyć nowe albumy, eksportować grafiki do innych formatów, oglądać pokaz slajdów, pozyskiwać grafiki za pomocą skanera, dowolnie manipulować obrazkami w ramach galerii, zmieniać sposób wyświetlania i sortowania, zmieniać nazwy, opatrywać wyrazami kluczowymi, wyszukiwać. Jest to silne i wygodne w obsłudze narzędzie, przydatne w całym środowisku Windows, zwłaszcza grafikom i autorom stron WWW.

CorelWEB.TRANSIT jest zaawansowanym programem do konwersji do formatu HTML gotowych dokumentów pochodzących z edytorów tekstów - Word, WordPerfect, AmiPro i RTF. Zawiera obszerne opcje konfigurujące, dzięki którym zautomatyzowane zostaje tworzenie wielu standardowych elementów stron WWW, łącznie z grafikami, przyciskami nawigacyjnymi, podziałem dokumentu itp. Próba wykonana na niezbyt skomplikowanym dokumencie Worda wykazała skuteczność programu (zachowane zostały także polskie znaki w standardzie kodowania CP-1250). Umiejętne skonfigurowanie programu (tworzona jest mapa konwersji) pozwoli wykorzystywać program jako standardowe narzędzie do automatycznego budowania dokumentów HTML, szczególnie wtedy, gdy dokumenty zachowują to samo lub zbliżone formatowanie. Oczywiście WEB.TRANSIT nie zastąpi edytora HTML w zaawansowanych zastosowaniach, ale może znacznie uprościć życie wielu osobom.

Ocena ogólna pakietu jest bardzo dobra. Słabszym punktem jest niewątpliwie edytor HTML (należy oczekiwać szybkiego upgrade`u), ale współpraca edytora z aplikacjami graficznymi, wszechstronność i elastyczność narzędzi, a także automatyzacja pracy z naddatkiem rekompensują niedostatki. Awaryjnie można się zawsze posłużyć innym edytorem, w którym zostaną uzupełnione brakujące elementy, ale gros pracy można wykonać za pomocą pakietu Corela - przede wszystkim kompozycję i elementy graficzne. Pakiet wymaga wprawdzie dość szybkiej maszyny i sporej ilości pamięci (szczególnie powolny, z natury rzeczy, jest WEB.WORLD), ale praca w środowisku Windows 3.1 czyni go dostępnym dla wszystkich zainteresowanych, pod warunkiem, naturalnie, że dysponują dyskiem kompaktowym.


Edytory HTML

Na tej stronie prezentujemy kilka ciekawych edytorów dla środowiska Windows 3.1 i Windows 95.


Edytory HTML

  • Corel WebGraphics Suite
  • Corel WebMaster Suite
  • FrontPage 97
  • Hedit 1.1
  • HomeSite 2.5
  • HotDog 3
  • Netscape Composer
  • Pajączek 2000


FrontPage 97

(Opis z 12 marca 1997)

Graficzne edytory HTML są niewątpliwie przyszłością "webmasterstwa", gdyż są wygodniejsze dla przeciętnego autora, choć ciągle pozostają w tyle pod względem potencjału. Skoro jednak WWW staje się w szybkim tempie areną wymiany informacji w skali masowej, nie ma od tego ucieczki i edytory tekstowe pozostaną domeną "świadomej" mniejszości.

Moja żywiołowa niechęć do programów tej klasy zmalała nieco ostatnio po pojawieniu się kapitalnego zestawu CorelWEB GRAPHICS.SUITE, a najnowszy FrontPage 97 nastroił mnie już wręcz optymistycznie, choć w dalszym ciągu nie mam zamiaru odejść od swojego ukochanego HomeSite'a. Produkt z Redmond to jednak kawał naprawdę rzetelnego softu i trudno się dziwić, że zyskuje sobie szybko popularność, także w naszym kraju.

FrontPage, przejęty wraz z Vermeer Technologies, wtapia się w ogólną strategię internetową Microsoftu, oferując wysoce zautomatyzowane narzędzia do budowania skomplikowanych stron, współdziałające z innymi produktami internetowymi firmy. To nie jest zwykły edytor HTML, choć odnosi się wrażenie, że sporo osób używa go wyłącznie w takim charakterze, gdyż "jak wygląda dokument, każdy koń widzi". Same narzędzia edycyjne ciągle jeszcze odbiegają od tego, co jest dostępne w najlepszych edytorach tekstowych. Siła programu tkwi w zintegrowaniu systemu, którego nie będą w stanie wykorzystać użytkownicy mniej zaawansowani - a takich przecież będzie najwięcej.

Całość składa się z dwóch części.

FrontPage Explorer jest wizualnym narzędziem, które prezentuje cały projekt (FrontPage Web), a więc zespół tworzonych dokumentów internetowych. Można nimi zarządzać właśnie z poziomu Explorera, określając m.in. szereg wspólnych cech, weryfikując odsyłacze, usuwając składniki, importując strony itd. Podstawowym narzędziem "produkcyjnym" jest natomiast FrontPage Editor. Jest on najlepszym mi znanym edytorem graficznym, przewyższającym niewątpliwie corelowskiego WebDesignera, AOL Press, edytor wbudowany w Netscape Navigatora czy Claris HomePage.

Dla polskiego użytkownika interesujący będzie niewątpliwie fakt, że edytor pozwala kodować strony zarówno w standardzie ISO 8859-2, jak i CP-1250, co wymaga jedynie odpowiednich ustawień w opcjach konfigurujących. Bezpośredni import dokumentów z różnych edytorów pozwala łatwo wykorzystać gotowe materiały, choć zauważyłem kłopoty na styku dokumentów Worda i strony kodowanej w ISO. A przecież będzie to bardzo często stosowana kombinacja.

Edytor zawiera obszerną listę kreatorów, które automatycznie generują różne typy dokumentów, m.in. interfejs dla baz danych, wykazy, spisy treści, bibliografie, abstrakty, agendy itp. Można również utworzyć dokument wieloramkowy. Zbudowane w ten sposób strony są dołączane do wspólnego projektu i uwidaczniane w FP Explorerze. Nietrudno się domyślić, że kreatory budują strony w języku angielskim, ale kto wie, czy nie doczekamy się za jakiś czas polskiej wersji programu.

Autorzy nie zapomnieli o obsłudze apletów Javy, wtyczek (plug-in), ActiveX oraz tzw. WebBot components, czyli dynamicznych obiektów zmieniających swoją zawartość, gdy strona jest zapisywana lub gdy użytkownik wczytuje stronę do przeglądarki - data aktualizacji, wyszukiwanie danych, spisy zawartości serwisu. Szczególny nacisk został położony na łączność z bazami danych, które stają się coraz powszechniej stosowanymi elementami zaawansowanych serwisów internetowych. Dla osób, które lubią jednak zaglądać do kodu źródłowego i robić ręczne poprawki, została przewidziana możliwość przeglądania i edycji kodu. Osoby piszące po angielsku mogą skorzystać z anglojęzycznego słownika ortograficznego i tezaurusa.

FP Editor dysponuje wygodnymi narzędziami graficznymi, oferując m.in. niewielki, ale przydatny zasób plików GIF, zwykłych i animowanych. Można je wstawiać za pośrednictwem specjalnego okienka dialogowego, przypominającego serwer OLE MS Clip Gallery. Oczywiście można sięgać do dowolnych zasobów na dysku. Program ściśle współdziała z graficznymi aplikacjami Bonus Pack. Na przykład podwójne kliknięcie na wstawionym obrazku uruchomi Image Composer, czyli świetny program retuszerski Microsoftu, z którym dodatkowo współdziała MS GIF Animator.

Nie ulega wątpliwości, że FrontPage jest w obecnej postaci poważnym narzędziem, które będzie zyskiwać popularność nie tylko dzięki swym narzędziom, ale i dzięki zintegrowaniu z pozostałymi produktami internetowymi firmy. Te zaś mają marketingowe wsparcie potężnego zestawu biurowego, a ten z kolei - samego systemu operacyjnego. Ten łańcuszek w naturalny sposób sprzyja sukcesowi handlowemu. A prosty webmaster może jedynie westchnąć z żalem, że na razie nie dysponujemy jeszcze kombinacją zalet FrontPage'a i corelowskiego zestawu internetowego. Gdyby połączyć doskonałe wsparcie graficzne Corela z edytorem Microsoftu, powstałby produkt o klasę doskonalszy.


Hedit 1.1

(Opis z 1 czerwca 1997)

W Internecie (strona http://www.amw.net.pl/hedit) jest dostępny kolejny polski edytor HTML - Hedit 1.1 (beta 1), którego autorami są Sławomir Andryk i Witold Ciżmowski.

Jest to program napisany w MS Visual C++ i przeznaczony dla środowiska Windows 95. Jest oferowany za darmo i cieszy się dość sporą popularnością wśród polskich użytkowników, preferujących tekstowe edytory dokumentów internetowych.

Hedit oferuje podstawowe narzędzi do edycji dokumentu. Jest dość przejrzyście zorganizowany, prezentując tradycyjny interfejs, typowy dla "starszej" szkoły edytorów ("nowa" szkoła posługuje się wbudowanym panelem zarządzającym plikami). Oprócz menu głównego zawiera cztery paski narzędziowe - pasek standardowy z poleceniami ogólnymi, pasek z poleceniami formatującymi tekst, pasek formularzy i, ostatni, pasek z barwami (imiennymi) i kilkoma znakami specjalnymi. W katalogu głównym programu znajduje się edytowalny plik poleceniaHTML.dat, w którym są zdefiniowane paski narzędziowe.

Stosunkowo ubogie są opcje konfigurujące, gdyż pozwalają na razie wybrać domyślne kolorowanie tagów (poleceń języka) oraz przeglądarkę WWW do testowania dokumentu. Dobrze się jednak stało, że autorzy zaimplementowali kolorowanie w pierwszej kolejności, gdyż, jak się okazuje, jest to opcja wymagana przez wielu użytkowników. Posiadacze słabszych komputerów muszą się jednak uzbroić w cierpliwość, gdyż wczytanie długiego dokumentu, przy zaznaczonej opcji kolorowania, trwa dość długo. Okienko z opcjami zawiera także szereg dalszych elementów, których jednak nie wprowadzono jeszcze w wersji beta 1 - heksadecymalne (szesnastkowe) zapisywanie barw, domyślne położenie biblioteki rysunków i wymuszanie małych nazw plików i katalogów. Bardzo brakuje możliwości zdefiniowania czcionki ekranowej, gdyż zazwyczaj stosuje się zgodny z Polską Normą standard kodowania ISO-8859-2 i wielu autorów pisze bezpośrednio w tym standardzie, z użyciem czcionki i klawiatury ISO. Obecnie trzeba się pogodzić z "krzakami" na ekranie, chyba że autor dokumentu świadomie wybiera standard Windows-1250.

Edytor zawiera zresztą możliwość automatycznego wprowadzenie deklaracji strony kodowej, co uzyskujemy za pomocą edytora META. Szkielet strony budujemy za pomocą trzech poleceń: nagłówek dokumentu, ciało dokumentu i META definicje. Byłoby jednak dobrze zorganizować wspólny interfejs, w którym zostałyby zdefiniowane wszystkie niezbędne elementy szkieletowe, tym bardziej, że na razie edytor nie dysponuje możliwością użycia choćby podstawowego szablonu.

Z narzędzi "organizacyjnych" warto wskazać na możliwość usuwania z ekranu i przywoływania paska standardowego i belki statusu, funkcję drag&drop w trakcie edycji dokumentu, porady dnia przy starcie, jednopoziomowe cofanie operacji, przechodzenie między dokumentami za pomocą wygodnego skrótu Ctrl-Tab, kasowanie wyrazów za pomocą Ctrl-BackSpace (wstecz) lub Ctrl-Del (do przodu), zapisywanie w formacie UNIX. Edytor zawiera kilka specyficznych skrótów klawiszowych, ale nie są one udokumentowane w menu, a jedynie w jednym z plików tekstowych - Ctrl-l dla odsyłaczy, Ctrl-w dla testu w przeglądarce czy skróty dla podstawowych atrybutów tekstu. zaznaczony tekst można objąć parzystym tagiem, ale gdy wstawiamy "pusty" znacznik, kursor ustawia się na zewnątrz, a zatem jest konieczne wstawienie go do środka.

Kilka okienek dialogowych pozwala zdefiniować niektóre elementy dokumentu:

Okienko dialogowe odsyłaczy, które pozwala określić wszystkie niezbędne składniki połączenia, choć zmusza do wpisywania adresu ręcznie, nie pozwalając go np. wybrać na dysku.

Okienko dialogowe dla grafik, które zawiera opcję szukania na dysku i rozpoznaje fizyczne parametry rysunku.

Okienko dla linii poziomej, zawierające rozszerzenie Internet Explorera (kolor linii).

Okienko czcionki, umożliwiające wstawienie konkretnej czcionki (font face).

Mianem edytorów autorzy określili okienka dialogowe dla komentarzy i wykazów. Pierwsze umożliwia wstawienie treści, natomiast drugie definiuje szkielet wykazu, pozostawiając wstawienie treści już bezpośrednio do dokumentu. Edytorem jest także, w innym miejscu, okienko dla adresu poczty elektronicznej.

Z kolei kreatorami zostały nazwane okienka dialogowe, które pozwalają wstawić szkielety poleceń dla ramek i tabel.

Zdecydowanie najlepiej jest zbudowane narzędzie do tworzenia formularzy, obsługiwane przez osobny pasek narzędziowy. Co ciekawe, funkcji tych nie zawiera menu główne, co zresztą powtarza się też w przypadku testowania strony w przeglądarce.

Generalnie, podział na kreatory, edytory i pozostałe polecenia posługujące się okienkami dialogowymi, nie wydaje się do końca konsekwentny i konieczne będzie chyba przemyślenie nazewnictwa w menu programu. Nie zmienia to oczywiście faktu, że wszystkie polecenia, wstawiane za pośrednictwem okienek dialogowych, działają skutecznie.

Z innych narzędzi można jeszcze wymienić wstawianie obiektów, podgląd wydruku i drukowanie, także w kolorze.

Edytor jest oczywiście stale rozwijany i zapewne doczeka się znaczących ulepszeń. Obecny poziom, w każdym razie, w zupełności wystarcza do zbudowania strony, aczkolwiek konieczna jest niezła znajomość języka HTML, aby dobrze rozumieć sens wstawianych poleceń. Na pewno edytor ustępuje funkcjonalnością konkurencyjnemu Pajączkowi, aczkolwiek jego przewagą jest fakt, że akceptuje długie nazwy plików (Pajączek jest 16-bitowy) i jest udostępniany za darmo.


HomeSite 2.5

(Opis z 22 grudnia 1996)

Tuż po świetnym HotDogu 3 w Internecie pojawiła się kolejna, finalna wersja edytora HTML - HomeSite 2 dla Windows 95 (nie ma wersji dla W31). Obecnie jest już nawet dostępna wersja beta 2.5. Program, zaprojektowany w Delphi przez amerykańskiego rysownika Nicka Bradbury, robi prawdziwą furorę, stanowiąc ogromną konkurencję dla najlepszych edytorów HTML dla środowiska Windows 95. HomeSite cieszy się fenomenalnym zainteresowaniem (usunął nawet HotDoga z listy 10 najbardziej popularnych programów shareware'owych) i wielką atencją samego Microsoftu. Właściwie należałoby powiedzieć, że pod wieloma względami HomeSite jest po prostu najlepszy.

Przede wszystkim jest stosunkowo niewielki - archiwum z programem zajmuje zaledwie ok. 1,2 megabajta. Po drugie jest bardzo szybki, co w jaskrawy sposób kontrastuje z powolnym HotDogiem. Po trzecie, jest niesłychanie ergonomiczny, oferując mnóstwo wygodnych narzędzi w zasięgu ręki i myszki. Po czwarte wreszcie, jest bardzo ładny optycznie. Zwróćmy uwagę przede wszystkim na wygodę pracy z edytorem.

Zgodnie z najnowszymi tendencjami edytor zawiera widoczny po uruchomieniu katalog plików (i okienko do nawigacji między dyskami i katalogami), znacznie wygodniejszy w wersji 2.5 niż w poprzednich. Wystarczy jedynie kliknąć dwa razy myszką na nazwie pliku, aby wczytać go do edytora. Gdybyśmy natomiast chwycili myszką plik i przeciągnęli go do otwartego dokumentu, w tym ostatnim pojawi się po prostu odsyłacz do przeciąganego pliku. Bardzo to wygodne. Co więcej, gdybyśmy chcieli wstawić odsyłacz do pliku w innym katalogu, edytor uwzględni nawet ścieżki! Jest to niezmiernie użyteczne, gdy prowadzimy strony i dysponujemy na lokalnym dysku dokładnym mirrorem plików w sieci, gdyż w ten sposób możemy w luksusowy sposób tworzyć powiązania między stronami, nie ryzykując błędów. Z kolei przeciągnięcie lub dwukrotne kliknięcie na pliku graficznym spowoduje wstawienie obrazka do dokumentu. Naturalnie w tym podręcznym menedżerze plików możemy swobodnie nawigować. Pod prawym klawiszem myszki mamy szereg funkcji, które pozwalają zarządzać plikami i uzyskiwać o nich informacje, a także tworzyć katalogi. Możemy nawet posłać plik na serwer WWW, korzystając z funkcji Publish i microsoftowego Web Publishing Wizard. Nawet nie trzeba uruchamiać żadnego programu FTP. HomeSite potrafi także otworzyć plik bezpośrednio z sieci.

Wyśmienite jest zarządzanie projektami. Edytor projektów pozwala utworzyć, usunąć i zmodyfikować dowolny projekt, czyli zespół powiązanych ze sobą logicznie stron. Można tam wstawiać i usuwać także pojedyncze pliki, uzyskując informacje o każdym z nich (zawarte odsyłacze, wielkość, daty itp.).

Prawy klawisz myszki w dokumencie pełni także mnóstwo funkcji. Pozwala zamknąć plik, skopiować i wstawić tekst, dokonać szeregu operacji na zaznaczonym bloku (np. zamiana kilku wierszy na wykaz), zmienić litery małe na wielkie i odwrotnie, usunąć znaczniki, cofnąć wiele operacji itp.

Gdy otworzymy kilka plików, są one dostępne w postaci zakładek. Gdy jakiś plik został zmodyfikowany, czerwony kwadracik sygnalizuje ten fakt. Każdy z dokumentów można obejrzeć na wbudowanym w edytor podglądzie graficznym, który interpretuje nawet większość poleceń HTML 3 i zawiera aktywne odsyłacze. Dwukrotne kliknięcie na znaczniku i wskazanie pod prawym klawiszem myszki funkcji Edit Tag (jeśli operacja taka ma sens) wyświetla okienko dialogowe, w którym możemy zmodyfikować parametry danego znacznika. Jest to naprawdę jedna z najlepszych funkcji edytora, bardzo ułatwiająca i przyspieszająca edycję parametrów.

Oprócz klasycznego menu edytor zawiera listwy narzędziowe, ułożone w modny sposób "zakładkowo". Można samodzielnie utworzyć szereg własnych, rozwijalnych listew (wprost luksusowa edycja), dostosowując ich zawartość do swoich potrzeb. Możliwe jest nawet wstawienie aplikacji pomocniczych, np. edytora grafiki, poczty itp. Kilka kreatorów wspomaga tworzenie niektórych elementów - tabel, wykazów, ramek, a nawet (to już chyba przesada) linii. Edytor formularzy jest dość sztampowy, ale można przypuszczać, że także i on znajdzie się na liście kreatorów. Lista skrótów klawiszowych jest dość spora - obejmuje ważniejsze polecenia i w praktyce zupełnie wystarcza. Nie można natomiast edytować własnych skrótów. Tak zwany Secondary Toolbar zawiera szereg dodatkowych poleceń, a możliwe jest również wyświetlenie zakładkowej listwy ze znakami specjalnymi.

W najnowszej wersji zostały zmienione niektóre skróty klawiszowe, które przedtem często były odmienne od zwyczajowo stosowanych. Obecnie praca z klawiaturą jest jeszcze bardziej ergonomiczna niż poprzednio. Możliwe jest wyłączenie funkcji skanowania katalogu z plikami, co trwało niekiedy dłuższą chwilę na słabszych komputerach, gdy katalog zawierał dużo plików. Pojawiła się funkcja tworzenia katalogu miniatur grafik, co ułatwia ich wybór przy redagowaniu dokumentu. Dwie nowe listwy narzędziowe dodają funkcje związane z Denali, czyli Microsoft Internet Information Server 3.0, a także ze skryptami ColdFusion.

Rozbudowane są opcje konfiguracyjne, gdzie ustalamy sporo parametrów pracy, m.in. sposób wyświetlania, przeglądarki WWW, zawijanie wierszy w edytorze, czcionki wyświetlające tekst w edytorze i na podglądzie, ścieżki do plików, rozszerzenia dokumentów, wielkość znaków i kolory w znacznikach itp. Bardzo dobrze jest zorganizowana pomoc, która m.in. pozwala "podpiąć" pod klawisz pomoc zewnętrzną. W praktyce bardzo się przydaje wstawienie tutaj HTML Reference Library, choć oczywiście edytor także zawiera swoją własną pomoc, w tym garść tzw. tips&tricks. Na uwagę zasługuje także funkcja Extended Replace, która pozwala zamienić ciągi znaków w wielu dokumentach jednocześnie - bieżącym, wszystkich otwartych, na folderze lub projekcie. Jest to wygodne, gdy decydujemy się na jakąś standardową zmianę (np. czcionki na naszych stronach) i musimy to robić we wszystkich dokumentach. Można nawet doraźnie zgromadzić takie strony pod postacią projektu i dokonać "hurtowej" zamiany, łącznie z plikami w podkatalogach.

Najciekawszą zmianą jest zintegrowanie z edytorem Internet Explorera 3, który może służyć w roli wewnętrznego podglądu graficznego dokumentu. Jest to identyczne rozwiązanie, jak w przypadku HotDoga 3, z zachowaniem minimalnego zestawu narzędzi nawigacyjnych. Wersja 3.0 (a więc także PL.) sprawia kłopot z wyświetlaniem (przesunięcie obrazu) i autor zaleca używanie wersji 3.01 Internet Explorera (na razie US).

Wielkim plusem HomeSite'a jest możliwość graficznego edytowania stylów, a następnie zapisywania ich na dysku. Edytor stylów jest bardzo dobrze zorganizowany i natychmiast wyświetla efekt dokonywanych zmian. HomeSite był zresztą pierwszym edytorem, który wprowadził style do swojego instrumentarium.

Kolejną nowością jest opcja weryfikacji odsyłaczy na wskazanej stronie w Internecie, która pozwala automatycznie sprawdzić aktualność wstawionych łączy.

Brakuje na razie edytora map odsyłaczy na grafikach (można się posłużyć gotową mapą na dysku). Jest za to cenna nowość - edytor obiektów ActiveX, korzystający ze znajdujących się w systemowym katalogu Windows obiektów. Oprócz tego mamy do dyspozycji edytor Marquee, edytor Meta i elementarne wspomaganie dla skryptów Javy i Visual Basica, apletów Javy oraz obiektów zagnieżdżanych. Nowością jest indeksowanie plików graficznych (thumbnails, czyli miniatury).

W wersji 2.5 pojawił się ScriptWizard, pozwalający wstawiać kilka rutynowych skryptów. Ciekawym i przydatnym narzędziem jest wspomaganie VB Script Microsoftu, zorganizowane w sposób bardzo przypominający działanie ActiveX Control Pad Microsoftu.

Wszystko razem robi bardzo budujące wrażenie. HomeSite, jako środowisko do tworzenia i pielęgnowania całego systemu stron, sprawdza się znakomicie, aczkolwiek niektóre funkcje są jeszcze zbyt skromne, aby polegać wyłącznie na edytorze. Jest to jednak program stosunkowo młody i zapewne będzie się dalej rozwijać. Duże powodzenie freeware'owej wersji 1.0 spowodowało, że autor postanowił rozwijać produkt, ale zmienił już kategorię wersji 2 na shareware. Koszt jest jednak nieduży, a produkt naprawdę wart uwagi, dzięki swej szybkości i niezwykłej ergonomii.


HotDog 3 Professional

HotDog Professional 3

(Opis z 26 grudnia 1996)

W Internecie pojawiło się ostatnio niezwykłe narzędzie - edytor HotDog Professional 3 dla Windows 95. Jest to dzieło wręcz sensacyjne, które wynosi na wyżyny tę kategorię oprogramowania.

Sausage Software toczy od dłuższego czasu upartą walkę o prymat z firmą Nesbitt Software, której WebEdit przodował ostatnio nieznacznie wśród edytorów HTML. "Parówkowa" kompania wystrzeliła nagle kapitalnym programem, który pozostawia konkurencję daleko w tyle i przeciera zupełnie nowe szlaki. Bardzo dobry dotychczas produkt został radykalnie zmieniony (zrezygnowano z niektórych dość uciążliwych fantazji) i wzbogacony o doświadczenia firmy wyniesione z produkcji innych programów wspomagających edycję HTML. Efekt jest wprost niebywały, o czym może się przekonać każdy posiadacz Windows 95, mogąc skopiować z Internetu 30-dniową, w pełni funkcjonalną wersję demonstracyjną. Przy okazji uprzedzam hackerów - z dziennikarskiego obowiązku sprawdziłem, :-), czy działa dość popularny crack, odkodowujący edytor - nie działa i (nie)chętni będą musieli wysupłać 100 dolarów na program. Sporo, ale HotDog wart jest każdych pieniędzy i każdej procedury, choćby tak niewdzięcznej, jak wyrobienie karty płatniczej.

Autorzy HotDoga wyraźnie preferują Internet Explorera 3, nie tylko zakresem udostępnionych funkcji, ale i zintegrowaniem z nim podglądu graficznego strony (tzw. Rover). Pozwala to widzieć poprawnie polskie znaki nie tylko w stronie kodowej Windows 1250, ale i ISO-8859-2. Interfejs edytora jest bardzo nowoczesny i sięga do najlepszego obecnie "wzornictwa" programistycznego, dzięki czemu przejrzystość narzędzi, mimo niezwykłego rozbudowania instrumentarium, jest zaskakująco dobra. Nie ma już prymitywnie wyglądających okienek z ikonami, lecz mamy do dyspozycji nowoczesne paski narzędziowe.

W edytorze znalazły się praktycznie wszystkie używane obecnie narzędzia. Już na wstępie można utworzyć stronę na podstawie gotowych szablonów (można je samemu tworzyć), a także wykorzystać kreatora, który pozwoli wstawić na stronę szereg "klocków", wypełnianych jedynie stosowną treścią. Gdyby ktoś chciał otworzyć stronę znajdującą się w sieci, może ją skopiować z serwera WWW, a potem, po wprowadzeniu poprawek, odesłać z powrotem - wszystko to z poziomu programu. Możnanawet pracować on-line, korzystając z wbudowanej funkcji FTP. Naturalnie menedżer projektów pozwala budować całe systemy stron, ułatwiając kontrolę nad ich układem i wzajemnymi zależnościami. Niewielkie okienko z poglądem graficznym pozwala przeglądać grafiki przed wstawieniem, a drag&drop umożliwia przeciąganie grafik na stronę oraz tworzenie odsyłaczy do innych stron. W taki sam sposób można wstawiać odsyłacze do stron zawartych w zakładkach Navigatora i Internet Explorera. Z poziomu edytora można także uruchomić dowolną usługę w Internecie.

Edytor grafik został zaopatrzony w konwerter formatów, a luksusowym w obsłudze i rozbudowanym narzędziem jest edytor map odsyłaczy na grafikach (client-side). Ciekawą funkcją jest dodawanie napisów na grafikach i zapisywanie obrazków pod inną nazwą. ActiveX zostały obsłużone w analogiczny sposób, jak w HTML ActiveX Control Pad - w specjalnym okienku dialogowym możemy wybrać obiekt znajdujący się w katalogu systemowym Windows i nadać mu odpowiednie parametry. Zbliżone rozwiązanie stosuje także edytor HomeSite.

Do dokumentu można wstawić kilka predefiniowanych skryptów, aczkolwiek wybór nie jest tutaj zbyt bogaty. Opcja Plug-in jest przewidziana do współpracy z firmami trzecimi i na razie nie daje żadnych możliwości (poza tym, jej uruchomienie powoduje "wysypywanie się" edytora). Ciekawym rozwiązaniem są tzw. Snaglets, które są de facto zintegrowanymi z edytorem programami, dostępnymi uprzednio samodzielnie. Jednym z nich jest wspomniane wyżej narzędzie do graficznego tworzenia map odsyłaczy na grafikach. Następnym jest moduł do budowania ramek (ale nie ramek pływających), kolejnym - narzędzie do budowania animacji (animowanych GIF-ów) z gotowych plików w formacie GIF. Ostatnim ze snagletów jest moduł do wprowadzania efektów specjalnych za pomocą gotowych apletów Javy. Zostały więc tutaj zintegrowane bogate doświadczenia firmy w tworzeniu drobnych programów wspomagających konstruowanie stron.

Edytor wspomaga tworzenie zaawansowanych elementów stron. Bardzo wygodne i przejrzyste w obsłudze okienka dialogowe do tworzenia formularzy oraz tabel to szczególnie ważne narzędzia tej klasy, choć nie można tutaj zapominać o odrębnym edytorze wykazów, uwalniającym od uciążliwości wprowadzania definicji. Nieco rozczarowuje edytor stylów, który w zasadzie ogranicza się do stylów zagnieżdżanych i dołączanych, natomiast zapomina o stylach lokalnych. Ma jednak dość spore możliwości definiowania, chociaż edycja nie jest zbyt przejrzysta, a wprowadzanie np. klas - mocno uciążliwe. Zdecydowanie lepiej rozwiązuje ten problem HomeSite. Zastępczo można się jednak posłużyć samodzielnie definiowanymi znacznikami.

Oprócz tego znajdziemy w programie mnóstwo innych bardziej i mniej ważnych ułatwień: dużą konfigurowalnośc środowiska pracy (m.in. edycja pasków narzędziowych i skrótów klawiszowych), usuwanie otagowania w dokumencie, sprawdzanie poprawności składniowej (parser), automatyczna konwersja pliku tekstowego do postaci HTML, z licznymi opcjami konfigurującymi, dość tajemnicza funkcja Open Market, która zapewne ma wspomagać budowanie interaktywnych baz danych dla internetowych klientów firmy, specjalny panel informacyjny w lewej części ekranu, który informuje o zasobach na dysku i w zdefiniowanych serwerach WWW, wyszukiwanie w ramach całego projektu, a nie tylko strony, zarządca plików i wprowadzanie znaków specjalnych za pomocą drag&drop z wyświetlonej listy.

Podstawową wadą edytora są jego wymagania. Sugerowałbym Pentium i 16 MB pamięci, gdyż w przeciwnym razie praca będzie zbyt uciążliwa. Początkujący (i nie tylko) użytkownik zapewne pogubi się w bogactwie dostępnych funkcji, choć niezbędna doza uporu i pracy na pewno doprowadzi dość szybko do opanowania większości funkcji. Doskonałe zintegrowanie z Internetem czyni HotDog 3 bardzo dobrym edytorem w warunkach biurowych, zwłaszcza gdy firma dysponuje dobrym łączem. Pozwoli to do maksimum wykorzystać w trakcie pracy zasoby Internetu.

Bez wątpienia HotDog 3 obejmuje teraz przodownictwo w wyścigu edytorów HTML i należy z zainteresowaniem oczekiwać odpowiedzi Nesbitt Software. Wydaje się jednak, że produkt Sausage Software osiągnął swoistą "masę krytyczną" i nie da sobie łatwo wydrzeć pierwszeństwa, na które zdecydowanie zasłużył.


Pajączek 2000

(Opis z 11 listopada 1998)

Pajączek, nagrodzony przez naszą redakcję tytułem Produkt Roku PCkuriera 1997, od kilkunastu miesięcy odnosi rynkowe sukcesy, ale coraz mocniej ciążył nad nim fakt, że jest programem 16-bitowym, a więc nie do końca dostosowanym do dzisiejszych potrzeb webmastera. Pod koniec października ukazała się długo oczekiwana wersja 32-bitowa (od 11 listopada dostępna jest wersja 4.01).

Język

Minęły już czasy, gdy narzędzia webmasterskie oceniane były przede wszystkim z punktu widzenia siły dostępnych narzędzi. W tej chwili szczególnie istotne staje się przystosowanie ich do potrzeb polskiego użytkownika. Oba nasze czołowe edytory, Tiger98 i Pajączek 2000, kładą duży nacisk na ten aspekt, rugując w ten sposób zagraniczną konkurencję.

Pajączek jest w tej chwili najlepiej przystosowanym językowo edytorem - z tego akurat punktu widzenia nie mogą się z nim równać żadne programy, łącznie z HomeSite'em, który jako pierwszy został zintegrowany z narzędziami językowymi MS Office. W Pajączku możemy także wykorzystać słownik Worda, jeśli jest on zainstalowany na dysku. Program Rafała Płatka bije jednak konkurencję - z jednej strony, współzawodniczący z nim Tiger zawiera tylko własny słownik, znacznie mniej funkcjonalny niż słownik MS Office, z drugiej zaś HomeSite nie zawiera automatycznej konwersji znaków, wskutek czego osoby stosujące standard ISO-8859-2 nie mogą z niego korzystać. Oba polskie edytory są zresztą pod tym względem sprawniejsze od amerykańskiego programu, gdyż w locie konwertują polskie znaki, zgodnie z zadeklarowaną stroną kodową (ISO, Windows, Unicode), pozwalając używać standardowej klawiatury Windows i dowolnej czcionki ekranowej w trakcie edycji dokumentu. Dodatkowo, Pajączek potrafi korzystać z autopoprawek (automatyczne poprawianie błędów literowych), ale nie dysponuje funkcją podświetlania błędnych wyrazów. Wygodnym narzędziem jest za to wbudowany konwerter polskich znaków, który można wykorzystać do zamiany liter w plikach.

Ergonomia

Edytor został napisany praktycznie na nowo, aczkolwiek użytkownicy starszej wersji dość szybko opanują jego obsługę. Martwi jednak nieco fakt, że edytor jest dość powolny - silny procesor jest konieczny, jeśli zależy nam na wygodnej pracy. Autor powinien się teraz skupić przede wszystkim na tym aspekcie działania Pajączka, bo pod względem funkcjonalności jest to edytor zaspokajający z nadmiarem potrzeby zaawansowanego nawet użytkownika.

Bardzo rozbudowane zostały możliwości przystosowania środowiska pracy do własnych potrzeb. Lista opcji konfiguracyjnych jest obszerna i warto dokładnie ją przejrzeć, aby jak najlepiej wykorzystać dostępne możliwości. Także interfejs programu jest elastyczny - możemy wstawiać i usuwać pływające paski narzędziowe, definiując przy okazji własny pasek użytkownika, w którym umieszczamy często używane funkcje. Możemy pracować w trybie pełnoekranowym lub z widocznym panelem katalogów i plików. Pajączek zawiera obszerną listę skrótów klawiszowych dla funkcji, a dodatkowo pozwala je przedefiniować i wprowadzić własne skróty, dzięki czemu możemy je dostosować do swoich przyzwyczajeń.

Pajączek oferuje funkcję reedycji już istniejących tagów - ułatwia to znacznie pracę w trakcie modyfikacji, gdyż w okienku dialogowym elementu widzimy wstawione wcześniej parametry, co pozwala je wygodnie poprawiać. Z kolei wprowadzanie kodu może być wspomagane przez technikę Code Insight lub dymkowe podpowiedzi do znaczników. Dodatkowo, edytor oferuje automatyczne uzupełnianie kodu, gdy wprowadzamy znaczniki ręcznie - listę takich uzupełnień możemy sami rozwijać.

Niezbyt dobrze została rozwiązana nawigacja w edytorze - brakuje m.in. tak fundamentalnego narzędzia, jak skok o akapit w górę czy w dół. Podobnie, zabrakło usuwania wyrazu wstecz lub do przodu za pomocą klasycznych już skrótów Ctrl-Backspace i Ctrl-Del. Istnieje natomiast bardzo ważne powtarzanie ostatniej operacji. Usterką jest niemożność cofnięcia ostatniej operacji po zapisaniu dokumentu i użyciu graficznego podglądu strony. Plusem jest funkcja ustawiania zakładek w kluczowych miejscach dokumentu i szybkiego przemieszczania się do nich.

Ergonomię zwiększają także takie ułatwienia, jak wielopoziomowe cofanie operacji i rozbudowana możliwość wklejania tekstu ze schowka. W edytor wbudowany jest podgląd graficzny, wykorzystujący funkcjonalność Internet Explorera - dotyczy to zarówno redagowanego dokumentu, jak i szeregu elementów, np. stylów.

Automatyzacja

Program dysponuje zestawem predefiniowanych szablonów (np. ankieta, kanał informacyjny CDF, ankieta, ramki) i generatorów (m.in. ramek, galerii grafik, spisu plików, arkusza stylów), które wydatnie pomagają w utworzeniu elementów stron. Większość elementów wstawiamy zresztą z udziałem okienek dialogowych, co znacznie pomaga w ich precyzyjnym zdefiniowaniu - tabele, formularze, mapy odsyłaczy na grafikach czy ramki. Zapewnione zostało także wspomaganie przy pisaniu lub wstawianiu gotowych skryptów, a także apletów Javy i ActiveX. Pajączek jest pierwszym polskim programem oferującym polecenia SSI+ (Server Side Include). Dobrze obsłużony został blok informacji META w dokumencie. Jest to bardzo ważny element strony ze względu na informacyjną funkcjonalność wyszukiwarek internetowych. Istotnym novum jest tutaj obsługa klasyfikacji zawartości, czyli coraz częściej stosowanej oceny "obyczajności" dokumentu.

Program pozwala tworzyć projekty, czyli zestawy powiązanych ze sobą stron. Tak zdefiniowanym zestawem jest łatwiej manipulować, a ponadto projekt można wysłać w całości na serwer. W obecnej wersji wystąpił jednak błąd w postaci niemożności odświeżenia projektu po zmianie zawartości strony. Możliwy jest import projektów utworzonych w poprzedniej wersji Pajączka.

Obszerną listę opcji znajdziemy pod prawym klawiszem myszki, po objęciu fragmentu tekstu blokiem - można tu tworzyć listy (wykazy) z odrębnych wierszy, obejmować fragment stylem, zmieniać wielkość liter, tworzyć komentarz, usuwać znaczniki czy też, oryginalna funkcja, zamieniać ukośne nawiasy tagów na ich SGML-ową reprezentację.

Pod nazwą makro-znaczniki kryją się dowolne ciągi znaków, które możemy gromadzić i wykorzystywać w miarę potrzeby. Można je budować zarówno w okienku Znaczniki i atrybuty, jak i tworzyć na bazie tekstu w edytorze. Wygodny skrót klawiszowy rozwija potem listę znaczników, które możemy wkleić do dokumentu.

Spore możliwości oferuje funkcja wyszukiwania i zamiany - Pajączek został tu wyposażony w proste i rozbudowane wyszukiwanie w dokumentach na ekranie, plikach na dysku lub projekcie, z użyciem języka wyrażeń regularnych. Aby móc się nim posłużyć, konieczne jest zapoznanie się z językiem w pliku pomocy.

Wyróżnia się lista poleceń, które można wykonywać na plikach w panelu plików - edycja, podgląd, konwersja znaków, wysłanie na serwer, weryfikacja odsyłaczy, filtr dla wyświetlanych zasobów, dodawanie folderu do listy ulubionych. Możemy też zaznaczyć opcję menu systemowego i wyświetlać zawartość menu kontekstowego znanego z Windows.

W Pajączka 2000 został wbudowany Pajączek Light, czyli znany już wcześniej generator strony. Umożliwia on szybkie utworzenie prostego dokumentu, aczkolwiek nie pozwala go ponownie edytować. Jest to możliwe już w pełnej wersji edytora.

Współpraca z otoczeniem

Edytor zawiera wbudowane mechanizmy internetowe. Przede wszystkim jest to wbudowany klient FTP, który pozwala wysyłać pliki na serwer. Konieczne jest jedynie sporządzenie definicji serwerów, z których korzystamy. Po połączeniu z Internetem wystarczy zbudować listę plików do wysłania lub pobrania, po czym uruchomić transmisję. Sam moduł FTP jest wygodny i przejrzysty w obsłudze, nie ustępując podobnym rozwiązaniom stosowanym w czołowych edytorach. Program pozwala też uzyskać obszerną informację o dokumencie i objętości wysyłanych plików (ikonka w głównym pasku narzędziowym lub menu w panelu plików).

Obecna wersja nie pozwala pobierać (ale wysyła) całych katalogów, aczkolwiek może wysyłać zdefiniowane projekty - błędem jest nieuwzględnianie przy wysyłce katalogowej struktury projektu, gdyż wszystko jest lokowane w docelowym miejscu "na płasko". Nie ma również w Pajączku mechanizmu do pobierania całych witryn, czyli stron z grafikami, dźwiękiem itd. (ma go jego bezpośredni konkurent).

Korzystając z działającego w tle mechanizmu, możemy otwierać dowolne pliki bezpośrednio z Internetu - wystarczy jedynie podać dokładny adres. Oczywiście zmodyfikowany plik możemy odesłać jedynie wtedy, gdy należy on do nas. Nie można też pominąć automatycznego sprawdzania poprawności odsyłaczy na redagowanych stronach, co pozwala łatwiej utrzymywać ich aktualność, a także trzech ciekawych mechanizmów - tworzenia statystyki, dodawania licznika odwiedzin i rejestrowania strony w wyszukiwarkach: Pajączek wykonuje to online.

Edytor współpracuje również z lokalnym otoczeniem - w trakcie instalacji program rozpoznaje obecność na dysku różnych istotnych programów i podpina je do menu, pozwalając je uruchamiać z poziomu edytora. Listę tę możemy sami rozbudować w opcjach. Możliwe jest ponadto importowanie plików TXT i RTF, dzięki czemu możemy wykorzystać sformatowane dokumenty utworzone w zaawansowanych procesorach tekstu (np. Wordzie), a wyeksportowane do formatu RTF. Umożliwi to łatwe wykorzystanie już istniejących materiałów, bez utraty ich formatowania.

Pomoc

Pomoc dla użytkownika jest bardzo obszerna. Najważniejszy jest oczywiście klasyczny plik pomocy (Help), który bardzo obszernie tłumaczy działanie poszczególnych funkcji programu. Co ważne, autor i współpracujące z nim osoby dołożyli starań, aby strona językowa pomocy była na właściwym poziomie - jest to jeden z istotnych wyróżników profesjonalnego programu, często ignorowany przez młodych programistów.

Pomoc ma charakter kontekstowy i to dwojakiego rodzaju. Z jednej strony możemy zawsze kliknąć na przycisku pomocy, wyświetlając plik pomocy, z drugiej zaś - użyć przycisku ze znakiem zapytania (lub klawisza F1), wskazując element okienka dialogowego, co spowoduje wyświetlenie "dymkowej" pomocy.

Dodatkową pomoc merytoryczną stanowi firmowany przez PCkurier kurs HTML. Jest to specjalna wersja, przykrojona dla potrzeb Pajączka i ściśle zintegrowana z interfejsem programu - edytor sięga do plików kursu umieszczonych w katalogu Pajączka. Kurs jest rozpowszechniany jako freeware i od razu zastrzegamy się, że nie ma żadnego związku natury komercyjnej między obiema firmami.

Ocena ogólna

Program Rafała Płatka jest silnym i ergonomicznym narzędziem, o wielu rozwiniętych funkcjach i wygodnych rozwiązaniach. Jest także bardzo urodziwym optycznie programem, co nie jest bez znaczenia. Nie ustrzegł się oczywiście uchybień, ale najpoważniejszym kłopotem jest jego słaba wydajność. Można podejrzewać, że dotychczasowi posiadacze programu chętnie się przesiądą na nowszą wersję, ale pod warunkiem posiadania mocnego komputera - praca na maszynie Pentium 133 z 64 MB RAM nie była zbyt komfortowa, a deklarowany przez autora komputer 486 z 8 MB pamięci to oczywiście tylko teoretyczne, acz zupełnie nierealne minimum.


Edytory HTML

Lista edytorów

  • Corel WebGraphics Suite
  • Corel WebMaster Suite
  • FrontPage 97
  • Hedit 1.1
  • HomeSite 2.5
  • HotDog 3
  • Netscape Composer
  • Pajączek 2000


Strona 1

To jest strona 1

Wróć


Mailer

To jest strona 2


Strona 3

To jest strona 3

Wróć


Mailer

To jest strona 4


Mailer

To jest strona 5


Strona 6

To jest strona 6

Wróć


Mailer

To jest strona 7


Mailer

To jest strona 8


Mailer

To jest strona 9


Mailer

To jest strona 10


Mailer

To jest strona 11


Corel WebMaster Suite

(Opis z 28 marca 1997)

Ledwo zdążyłem wygłosić pochwały na temat FrontPage'a 97, a już pojawiła się nowa wersja corelowskiego pakietu internetowego, tym razem przygotowanego dla Windows 95/NT i zaprezentowanego pod nazwą Corel WebGraphics Suite. Tym razem Corel, który najwyraźniej kontynuuje swoją politykę konkurowania z Microsoftem na wielu płaszczyznach, przeskoczył wyraźnie swojego najgroźniejszego rywala, oferując niebywale silny i omnipotentny zestaw.

Program jest kontynuacją i rozszerzeniem opisywanego w numerze 2'97 PCkuriera CorelWEB.GRAPHICS SUITE, przygotowanego dla Windows 3.1. Zawiera te same elementy co poprzednik, ale jest rozszerzony o kilka bardzo istotnych aplikacji. Tym razem pakiet składa się z jedenastu elementów: Corel WEB.SiteManager (centrum zarządzające), Corel WEB.DESIGNER (graficzny edytor HTML), Corel WEB.GALLERY (galeria 8 tys. gotowych grafik GIF i JPEG), Corel WEB.TRANSIT (narzędzie do konwersji dokumentów do postaci HTML), Corel WEB.DRAW (wersja CorelDRAW przystosowana do potrzeb grafiki internetowej), Corel WEB.PhotoPaint (program retuszerski), Corel WEB.MOVE (program do tworzenia animacji), Corel WEB.WORLD (narzędzie do tworzenia VRML), Corel WEB.DATA (program przetwarzający bazy danych dla WWW), O'Reilly WebSite Server (serwer WWW). Aplikacje graficzne są nieco okrojonymi i dostosowanymi do publikowania w Internecie wersjami swych "starszych braci". Dodatkowo można zainstalować wersję 3.01 Netscape Navigatora, a w pudełku znajdziemy także dokumentację pakietu, której zabrakło w poprzedniej wersji. Całość jest oferowana za 300 USD, ale upgrade z poprzedniej wersji kosztuje 60 USD. Zestaw zajmuje na dysku, w wersji maksymalnej, ok. 170 megabajtów i jest dostarczany na dwóch dyskach kompaktowych.

Większość narzędzi została już opisana we wspomnianym artykule (można go także przeczytać w naszym serwisie WWW na stronie Narzędzi internetowych), więc tutaj ograniczymy się do podania najciekawszych zmian i uzupełnień.

Tym razem punktem centralnym nie jest edytor, lecz WEB.SiteManager, który służy do budowania zrębu serwisu internetowego, a następnie sprawdzania jego integralności, posyłania plików na serwer, dokonywania zmian w zawartości. Z jego poziomu można przeglądać w postaci grafu strukturę serwisu, a także przeglądać zawartość poszczególnych stron (uruchamiana jest wtedy, w panelu SiteManagera, domyślna przeglądarka). Również z poziomu zarządcy można uruchomić edytor HTML (WEB.DESIGNER lub dowolny inny). Każdy plik serwisu można zmienić także za pomocą ingerencji w trybie Source View. Graf serwisu może pokazywać odsyłacze wewnętrzne, odsyłacze do stron w innych serwisach, zerwane lub zduplikowane odsyłacze i "osierocone" pliki. Można również wyświetlić listę stron zawierających aplety Javy, skrypty JavaScript lub VB Script, strony z ActiveX, zawierające formularze i ramki. Lewy panel zawiera listę plików i foldery, a kliknięcie na dowolnym pliku wyświetla pełną listę plików lub graf, w którym wskazany plik jest punktem odniesienia. Program pozwala wreszcie odszukać lub zamienić ciągi znaków w całym serwisie lub wybranych stronach.

SiteManager zawiera kreator stron internetowych (Site Builder Wizard), który pozwala automatycznie utworzyć szkielet serwisu i wypełnić go podstawowymi danymi. W ciągu niewielu minut można więc zbudować serwis, choć oczywiście należy go potem rozbudować o dalsze informacje, a także zmienić anglojęzyczne teksty na polskie. Nawet w naszych warunkach językowych jest to spore ułatwienie dla webmastera, gdyż nie będzie się musiał troszczyć o utworzenie struktury. Metoda drag&drop pozwala w prosty sposób przenosić pliki między folderami, przy czym możemy zażądać aktualizacji odsyłaczy w odpowiednich plikach, dzięki czemu zostanie zachowana integralność serwisu. Całość można potem w prosty sposób posłać na serwer, korzystając z wbudowanego programu FTP.

Zarządca serwisu jest instrumentem organizującym, ale podstawowa praca jest wykonywana w edytorze HTML. Domyślnym edytorem jest oczywiście WEB.DESIGNER, uruchamiany z poziomu menu. Gdybyśmy chcieli użyć jakiegoś innego narzędzia, wystarczy je zdefiniować w opcji Preferences (File locations). Nie jest to pozbawione sensu, gdyż WEB.DESIGNER ma dość poważną wadę, przynajmniej z punktu widzenia polskiego użytkownika - nie pozwala automatycznie tworzyć dokumentów w standardzie ISO. Oczywiście można odpowiednią deklarację wstawić ręcznie, wyświetlając źródło dokumentu, a w trakcie redagowania posługiwać się klawiaturą ISO-8859-2, ale jest to kłopotliwe. Gdyby jednak użytkownik wolał korzystać z graficznego edytora, a doraźnie pragnął skorzystać z edytora tekstowego, zawsze może otworzyć plik z poziomu SiteManagera za pomocą menu podręcznego (prawy klawisz myszki). W analogiczny sposób można edytować pliki graficzne, dla których domyślnym edytorem jest PhotoPaint.

WEB.DESIGNER został wyraźnie usprawniony w stosunku do poprzedniej wersji. Przede wszystkim można w nim tworzyć strony z ramkami, przy czym wszystkie ramki są widoczne na ekranie i można je wypełniać treścią. Do edytora można importować pliki w formacie WordPerfecta, Worda i RTF. Nie wiem jednak, dlaczego zabrakło na tej liście plików tekstowych.

Z poziomu edytora są uruchamiane pozostałe programy pakietu. Jest to bardzo wygodne rozwiązanie, gdyż wystarczy kliknąć na ikonie WEB.DRAW, WEB.MOVE czy WEB.PhotoPaint, aby przywołać program, wykonać w nim jakiś element graficzny i za pomocą opcji Publish to Designer automatycznie wczytać wynik do edytora. Programy te potrafią zresztą publikować obiekty w różnych postaciach. Na przykład WEB.DRAW pozwala nie tylko zapisać rysunek w różnych formatach (w tym GIF i JPEG), ale i tworzyć dokument HTML, a nawet stronę zawierającą aplet Javy. W tym ostatnim przypadku chodzi o nową technikę Corel Barista, która pozwala tworzyć obiekty o dowolnej postaci i wstawiać je do dokumentu w oparciu o szereg apletów składających się na tę technikę. Ma to zastosowanie przede wszystkim w odniesieniu do obiektów graficznych. Barista jest już stosowana we wszystkich aplikacjach Corela, ale firma zaleca używanie jej tylko w intranetach, ze względu na niezbyt dużą wydajność Javy.

Edytor korzysta z obszernej biblioteki gotowych szablonów, pozwala tworzyć graficznie tabele i formularze, budować mapy odsyłaczy na grafikach, wstawiać inne pliki HTML, aplety, ActiveX, skrypty CGI, a także zagnieżdżać inne pliki HTML, co pozwala wykorzystać technikę Baristy. Współpraca z WEB.GALLERY pozwala wykorzystać ogromny zestaw 8 tysięcy grafik GIF i JPEG.

Nowością w zestawie jest Corel WEB.DATA. Pakiet był do tej pory sprzedawany oddzielnie, a obecnie wspomaga budowanie stron. Moduł ten pozwala wybrać bazę danych w określonym formacie (dBase, Paradox, Access, Lotus, Excel, FoxPro, plik tekstowy delimitowany), określić format publikacji (np. tabela), zakres importowanych rekordów (według warunków logicznych), pola rekordu, sposób sortowania, dodatkowe atrybuty dla wyświetlania pól na stronie. Działanie jest bardzo szybkie i nawet kilka tysięcy rekordów można wczytać na stronę w ciągu niewielu sekund, posługując się maszyną średniej wydajności. WEB.DATA jest bardzo przydatnym programem dla firm, które publikują w Internecie zestawienia danych. Cenne jest to, że np. plik dBase czy arkusz Excela są wczytywane z zachowaniem polskich znaków (CP-1250).

Na temat programu retuszerskiego PhotoPaint nie ma sensu się specjalnie rozwodzić, gdyż jest on powszechnie znany ze względu na popularność Corela w Polsce. Obszerne spektrum narzędzi daje całkowitą swobodę w tworzeniu plików GIF czy JPEG, a dodatkową zaletą jest możność budowania animacji w formacie AVI, które można bezpośrednio wstawiać na stronę. PhotoPaint nie ma funkcji bezpośredniego tworzenia dokumentów HTML czy publikowania w Corel Barista, a jedynie wczytywania grafiki do WEB.DESIGNERA (Publish to Designer).

Cały pakiet zdecydowanie wyprzedza w tej chwili konkurencję, dostarczając bardzo wszechstronnego zestawu narzędzi. Najważniejsze jest znaczne wzbogacenie funkcji edytora oraz poszerzenie pakietu o ciekawy program SiteManager. Polski użytkownik będzie musiał stosować pewne "obejścia" i dodatkowe manipulacje, ale jakość corelowskiego instrumentarium jest bez wątpienia warta tych drobnych niewygód.


Adres bieżącego dokumentu

Skrypt jest przydatny dla czytelnika strony wtedy, gdy chce jednym rzutem oka ogarnąć pełny adres dokumentu, nie zawsze mieszczący się w widocznym polu adresowym przeglądarki.

Skopiuj poniższy kod

<script language="JavaScript" type="text/javascript">
<!--
    document.write("Adres bieżącego dokumentu to " + document.location);
// -->
</script>


Aktualizacja strony

Skrypt pokazuje datę (miesiąc/dzień/rok) i czas ostatniej aktualizacji dokumentu (zapisania go na dysku).

Skopiuj poniższy kod

<script language="JavaScript">
<!--
 document.write("Aktualizacja: " + document.lastModified);
// -->
</script>


Aktualizacja strony (po polsku)

Skrypt pokazuje datę (po polsku) i czas ostatniej aktualizacji dokumentu, czyli zapisania go na dysku. Internet Explorer niepoprawnie pokazuje czas (cofnięty o godzinę w stosunku do stanu faktycznego). Jest to spowodowane formatem zapisu i przesyłania tej informacji przez serwer, na którym jest zainstalowany skrypt. Przeglądarka przelicza to na format GMT, czyli uniwersalny. Pokazanie aktualnej dla naszego komputera daty wymaga zastosowania metody .toLocaleString().

Nie jest jasne zachowanie Netscape Navigatora, który na jednych serwerach pokazuje poprawną datę (na dysku lokalnym zawsze), na innych zaś - datę 1 stycznia 1970 roku! To z kolei jest spowodowane nierozumieniem przez Netscape wszystkich używanych na świecie sposobów zapisu lokalnego czasu. Jeśli serwer przyśle datę w formacie zrozumiałym wtedy Netscape ją prawidłowo pokazuje - jeśli nie, może pokazywać 1970 rok.

Opera zachowuje sie podobnie jak Netscape. Na dysku pokazuje poprawną date a na serwerze "niezrozumiałym" pokazuje środa, 31 grudnia 1969, g. 23:0:0.

Skopiuj poniższy kod

<script language="JavaScript">
function initArray()
{
this.length = initArray.arguments.length
for (var i=0;i<this.length;i++)
this[i+1] = initArray.arguments[i]
} // end initArray.

var DOWArray = new initArray("niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota");
var MOYArray = new initArray("stycznia", "lutego", "marca", "kwietnia", "maja", "czerwca", "lipca", "sierpnia","września", "października", "listopada", "grudnia");
var LastModDate = new Date(document.lastModified);
document.write("Aktualizacja strony:<br>");
document.write(DOWArray[(LastModDate.getDay()+1)],", ");
document.write(LastModDate.getDate()," ");
document.write(MOYArray[(LastModDate.getMonth()+1)]," ");
document.write((LastModDate.getYear()+1900),",");
document.write(" ","g.");
document.write(" ");
document.write((LastModDate.getHours()),":");
document.write((LastModDate.getMinutes()),":");
document.write((LastModDate.getSeconds()));
document.write(".");
</script>


Alert jako przycisk

Skopiuj poniższy kod i dostosuj treść alertu

<FORM>
<INPUT TYPE="button" VALUE="Uwaga, uwaga !" onClick="alert('Właściwie nic się nie dzieje !')")>
</FORM>


Alert przy wczytaniu strony

Skopiuj poniższy kod (treść alertu dostosuj do swoich potrzeb)

<body OnLoad="alert('A podatki powinny być obniżone, bo są kurczę za duże !!!\n');">


Menu otwierające oddzielne okno

Menu otwierające okno

Skrypt tworzy menu rozwijane z adresami - czytelnik może zaznaczyć opcję otwierania adresu w nowym oknie.

Otwórz w oddzielnym oknie

Skopiuj przykładowy kod

<form name="mycombowopt">
<select  name="example" size=1>
    <option value="http://www.pckurier.pl">PCkurier</option>
    <option value="http://www.enter.pl">Enter</option>
    <option value="http://www.gambler.com.pl">Gambler</option>
    <option value="http://www.chip.pl">Chip</option>
    <option value="http://www.pcworld.com.pl">PC World Komputer</option>
  </select> <input type="button" value="Go!" onClick="gothere()"> <br>
  <input type="checkbox" name="windowoption" value="ON">Otwórz w oddzielnym oknie</p>
</form>

<script language="javascript">
<!--

/*Combo box with "open in new window" credit
-By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

function gothere(){
var thebox=document.mycombowopt
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}
//-->
</script>


Banner 1

Napis pływający w okienku (banner 1)

Skopiuj przykładowy kod

<SCRIPT language="JavaScript">
<!-- W3e JAVAScript Preset. Original banner code by Timothy  (timothy@essex1.com)
Message = "Najświeższe wiadomości!!! Wygraliśmy mecz!";
Size = 90;
Pos=Size;
Speed = 1;

function Banner()
{
   Spaces = "";
   for (count=0; count<Pos; count++)
      Spaces+= " ";
   if (Pos < 1)
   {
      document.Banner.Bar.value = Message.substring(Math.abs(Pos), Message.length);
      if (Pos+Message.length < 1)
         {Pos = Size;}
   }
   else
      document.Banner.Bar.value = Spaces + Message;
   Pos-=Speed;
   setTimeout('Banner();', 15);
}
//-->
</SCRIPT>

<FORM NAME=Banner>
<INPUT Size=50 Name=Bar Value="">
</FORM>
<script>Banner();</script>


Banner 2

Napis pływający w okienku (banner 2)

Skopiuj przykładowy kod

W ramach HEAD

<script language="JavaScript">
<!-- begin
var id,pause=0,position=0,revol=9;
function banner() {
var i,k;
var msg="                              Bardzo ważna informacja                     ";
var speed=10;
document.form2.banner.value=msg.substring(position,position+80);
if(position++==msg.length) {
if (revol-- < 2) return;
position=0;
}
id=setTimeout("banner()",1000/speed);
}
// end -->
</script>

W ramach BODY

<form name="form2">
<input type="text" name="banner" size="50">
</FORM>


Banner z aktywnym odsyłaczem

Kliknięcie na przewijanej informacji przenosi nas do wskazanej witryny. Skrypt w tej postaci należy stosować na stronach bez ramek, gdyż nie daje on możliwości wczytania strony "na wierzch".

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
<!-- hide
//text to be shown
var mensaje=" *** Ważne wiadomości na stronach Internetowego Serwisu Informacyjnego. ***";

//substring to be shown
var ancho=50;

//scrolling message routine
function desliza(){
document.forms[0].panel.value=mensaje.substring(0,ancho);
mensaje+=mensaje.substring(0,1);
mensaje=mensaje.substring(1,mensaje.length);
setTimeout("desliza()",200);
}

function goTo(newUrl) {
self.location.href=newUrl;
}

// stop hiding -->
</SCRIPT>

W ramach BODY

<FORM>
<INPUT TYPE="text" NAME="panel" VALUE="" SIZE="50" onFocus="blur(); goTo('http://www.firma.pl');">
</FORM>

W BODY musimy też podać

<body onLoad="desliza(); return true;">

Te dziwne wyrazy w rodzaju "desliza" czy "mensaje" wzięły się stąd, że autorem skryptu jest Hiszpan.


Banner 4

Napis pływający w okienku (banner 4)

Skopiuj przykładowy kod

<FORM NAME="marquee1">
<INPUT NAME="text" SIZE=40 VALUE="     Witaj na moich stronach. Dobrej zabawy!    ">
</FORM>

<SCRIPT>
<!--
/*Text box marquee by Dave Methvin,
Windows Magazine
May be used/modified if credit line is
retained*/
ScrollSpeed = 100
ScrollChars = 1
function ScrollMarquee() {
window.setTimeout('ScrollMarquee()',ScrollSpeed);

var msg = document.marquee1.text.value;
document.marquee1.text.value =
msg.substring(ScrollChars) +
msg.substring(0,ScrollChars);
}
ScrollMarquee()
//-->
</SCRIPT>


Społeczeństwo informacyjne: Polski Internet - era informacyjnego barbarzyństwa

październik 1998

Polski Internet

Era informacyjnego barbarzyństwa

(głos zawodowego szperacza)

Paweł Wimmer

Internet jest nie tylko szybkim i wygodnym narzędziem komunikacyjnym czy źródłem rozrywki. Jedną z najważniejszych jego funkcji jest dostarczanie obszernej i stale aktualizowanej informacji. Z tego punktu widzenia Sieć można traktować jak naturalne przedłużenie twardego dysku w komputerze, zwielokrotniające niepomiernie jego zasoby. Kilka lat rozwoju technicznego wystarczy, aby koszt i szybkość uzyskania informacji z Internetu przestały być przeszkodą w efektywnym jej wykorzystywaniu.

Jednym z najpoważniejszych zadań, które czekają w najbliższych latach środowiska informatyków, uczonych, dziennikarzy, twórców kultury - jednym słowem, nowocześnie myślącą polską inteligencję - jest budowanie szeroko rozumianego społeczeństwa informacyjnego. Za jeden z najistotniejszych jego aspektów należy uznać udostępnianie informacji o charakterze (nazwijmy to umownie) kompendialnym, przy czym pod tym pojęciem rozumiem doraźnie wszelkie materiały encyklopedyczne, kompendialne czy słownikowe, a także uporządkowane opracowania - nie są w tym miejscu istotne precyzyjne ich definicje i wyraźne rozgraniczenie zakresów.

Kilka lat rozwoju polskiego Internetu, przede wszystkim World Wide Web, ukazuje wyraźnie, że poza nielicznymi wyjątkami brakuje systematycznych i zakrojonych na szeroką skalę działań grup ludzi, wspartych niezbędnym minimum środków finansowych i technicznych. W chwili obecnej polska Sieć dysponuje w zasadzie tylko jednym, powszechnie dostępnym źródłem wiedzy, które z powodzeniem konkuruje z najlepszymi tego rodzaju materiałami na świecie - mam tu na myśli WIEM, czyli Wielką Internetową Encyklopedię Multimedialną (http://www.encyklopedia.pl), której twórca, Wydawnictwo Fogra, nie obawiało się konkurowania z samym sobą - faktycznie, wystawienie tego monumentalnego dzieła w Internecie nie spowodowało osłabienia sprzedaży wersji encyklopedii na dysku kompaktowym.

Notujemy w tej chwili dość liczne próby utworzenia baz wiedzy, różnego rodzaju słowników i leksykonów, które mają jednak na ogół charakter wyraźnie amatorski. Ich autorzy są entuzjastami, którzy instynktownie, a niekiedy nawet w pełni świadomie, rozumieją potrzebę upowszechniania usystematyzowanej informacji. Próby te sprowadzają się do napisania kilkudziesięciu czy kilkuset haseł (w przypadku dwujęzycznych słowników, nawet kilku tysięcy), które pokrywają jakiś wycinek rzeczywistości, choć zazwyczaj nie sposób tu mówić o wyczerpaniu tematu. Z prób tych wyziera jednak w oczywisty sposób brak dostatecznych kwalifikacji merytorycznych i leksykograficznych, które gwarantowałyby rzetelność zaprezentowanych informacji. W wielu wypadkach motywacją dla takiej pracy jest chęć zabłyśnięcia, a gdy początkowy entuzjazm minie, wystawione dzieło zaczyna się pokrywać kurzem.

Z punktu widzenia informacyjnej roli Internetu, największą bolączką jest nieobecność w nim polskiej nauki. Środowiska naukowe należą do największych beneficjantów Sieci, ale praktyka pokazuje, że nader niechętnie biorą one udział w tworzeniu jej zasobów w roli "content providera" - podkreślam tu wyraźnie treść, gdyż szerokich rzesz użytkowników nie obchodzi techniczna infrastruktura Internetu. Jest rzeczą nienormalną, że próba odszukania stron zawierających terminy z jakiejś dziedziny wiedzy kończy się znalezieniem zaledwie kilkunastu czy kilkudziesięciu dokumentów (!), gdy sieciowe wyszukiwarki indeksują już ponad 1,6 mln polskich stron - pro domo sua: przypadłość ta nie ominęła także hasła "społeczeństwo informacyjne". Świat nauki mówi już o społeczeństwie informacyjnym, chętnie rozpatruje jego teoretyczne aspekty, ale w minimalnym stopniu przyczynia się do wypełniania treścią podstawowego medium, jakim jest światowa sieć. Brakuje w Internecie powszechnie dostępnych prac naukowych i opracowań o charakterze popularnonaukowym. Choć szczupłość środków finansowych nie pozwala publikować drukiem więcej niż 200-500 egzemplarzy prac habilitacyjnych (doktorskich w ogóle się nie drukuje), nie sposób ich znaleźć w Sieci, choć jest ona znakomitym medium upowszechniania osiągnięć naukowych. Nie można w niej również znaleźć pełnych tekstów artykułów w periodykach naukowych, choć ukazują się dziesiątki i setki uczelnianych wydawnictw, a czasopisma takie są wręcz idealnym budulcem informacyjnych zasobów Internetu. Jest to tym bardziej dziwne, że pisma te nie utrzymują się na ogół ze sprzedaży.

Na tym tle pewną ekstrawagancją może się już wydać postulat publikowania i regularnego aktualizowania materiałów kompendialnych, które rzetelnie opisując różne aspekty rzeczywistości, stanowiłyby łącznie swoiste SUPERKOMPENDIUM, znakomicie uzupełniające, a nawet wręcz zastępujące, coraz kosztowniejsze i mające ze względów ekonomicznych coraz mniejszy zasięg słowo drukowane - wystarczy tu przecież porównać przeciętny, kilkutysięczny nakład publikacji papierowej z co najmniej milionem osób mających dzisiaj w Polsce dostęp do Internetu. Szczególnie wdzięcznym odbiorcą takiej informacji będą w niedalekiej przyszłości miliony uczniów i studentów, a także liczne środowiska zawodowe, żądające szybkiej informacji o nowych zdarzeniach, zjawiskach i pojęciach.

Nie tłumaczy takiej postawy kręgów akademickich nadmiar pracy, codzienne zabieganie, brak środków finansowych w polskich ośrodkach naukowych i powszechna konieczność dorabiania do żenująco niskich pensji. Tradycyjny uczelniany powielacz z minionych szczęśliwie czasów najlepszego z możliwych ustrojów może być z powodzeniem zastąpiony przez nieskończenie bardziej efektywny Internet, ale najwyraźniej brakuje woli i dostatecznego zrozumienia informacyjnych potrzeb nowoczesnego społeczeństwa. Dystans dzielący nasz kraj od światowych standardów technicznych radykalnie zmalał, ale zapóźnienie w efektywnym ich wykorzystaniu jest wciąż dramatyczne.

Główna teza mojego głosu sprowadza się do następującego stwierdzenia: polska inteligencja ma do spełnienia misję, jaką jest zbudowanie zrębów społeczeństwa informacyjnego. Świadomość tej potrzeby jest w różnym stopniu zakorzeniona, ale najważniejsze jest przełożenie jej na zorganizowaną i systematyczną pracę, której nie mogą zastąpić doraźne wysiłki pojedynczych entuzjastów. Internet stanowi pierwszą w dziejach i niepowtarzalną w swojej omnipotencji sposobność upowszechniania informacji. Świat akademicki, ze względu na swoje kompetencje, ma tu do spełnienia największą rolę i widzę go jako siły główne, które wesprą harcowników, odpowiadając na Wielkie Wspólne Wyzwanie.


Uniwersalne tło dźwiękowe

Internet Explorer obsługuje polecenie BGSOUND, którego nie akceptuje z kolei Netscape Navigator. Istnieje jednak skrypt, który wybiera sposób zagnieżdżenia dźwięku, zależnie od użytej przeglądarki. Jeśli czytelnik strony używa IE, włącza się polecenie BGSOUND. Jeśli ma Navigatora, włącza się EMBED i aplikacja obsługująca dźwięk w Navigatorze.

Piotr Szczepanik dodał modyfikację dla polskojęzycznej wersji Netscape'a, czyli Sylaba Komunikator.

Uwaga: w Netscape Communicatorze kłopot może sprawiać obsługa dźwięku przez konkretny serwer!

Skopiuj przykładowy kod

<SCRIPT language="JavaScript">
 <!-- // Script MIDI playing. By Magic Maker
 // Please Keep Information along with credits
 // And feel free to alter this script as long as credits remain. Mail me at maligui@mvillage.com
 // Skrypt zmodyfikowany przez Piotra Szczepanika - dodanie obslugi przegladarki Sylaba Nawigator
 // Email: piotrsz@exe.pl, http://www.pszczepanik.exe.pl
  if (navigator.appName == "Netscape") {
   document.write('<EMBED SRC="../multimed/jazzball.mid" AUTOSTART=TRUE LOOP=FALSE WIDTH=145 HEIGHT=55></EMBED>') }
  else  if (navigator.appName == "Sylaba") {
   document.write('<EMBED SRC="../multimed/jazzball.mid" AUTOSTART=TRUE LOOP=FALSE WIDTH=145 HEIGHT=55></EMBED>') }
  else { if (navigator.appName == "Microsoft Internet Explorer")
   document.write('<BGSOUND SRC="../multimed/jazzball.mid" LOOP="1">')
 }
 //-->
 </SCRIPT>


Strona zależna od przeglądarki

Skrypt kieruje czytelnika do strony zależnej od wykrytej przeglądarki. Niekiedy zdarza się, że tworzymy strony przystosowane do konkretnej przeglądarki. Wynika to z tego, że programy różnie interpretują kod i chcemy, aby czytelnik zobaczył tę, która jest optymalna dla jego przeglądarki. Dobrym przykładem jest dynamiczny HTML, który w zasadzie istnieje w dwóch różnych wersjach - dla Internet Explorera i dla Netscape Navigatora.

Skrypt wykrywa wersje 3 i 4 (lub nowsze) obu przeglądarek. Jeśli czytelnik korzysta z jakiegoś innego programu, zostanie wczytana jeszcze inna strona. W ten sposób strona główna serwisu ma swój podstawowy adres http://www.costam.pl/index.html, ale skrypt powoduje automatyczne przekierowanie do optymalizowanej strony. Jeśli przeglądarka nie akceptuje JavaScript, mechanizm META (Refresh), zawarty w części NOSCRIPT, kieruje do odpowiedniej strony.

Tutaj jest przykład zastosowania skryptu.

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
    <!--
    setTimeout('checkBrowser()', 1000);
  function checkBrowser () {
   userAg = navigator.userAgent;
    bName = navigator.appName;
    bVer  = parseInt(navigator.appVersion);
    if (bVer >= 4) {
        if (bName.substring(0,9) == "Microsoft")
                // Redirect IE 4.0
                window.location.href="ie4.htm";
        else
            if (bName.substring(0,8) == "Netscape")
                    // Redirect Netscape 4.0
                    window.location.href="nn4.htm";
            else

window.location.href="inne.htm";
    } else {
        if (bVer == 3) {
            if (bName.substring(0,8) == "Netscape")
                    // Redirect Netscape 3.0
                    window.location.href="nn3.htm";
            else
                   // Redirect all other browsers
                   window.location.href="inne.htm";
        }
    else  {
            if (userAg.substring(0,31) == "Mozilla/2.0 (compatible; MSIE 3")  {
                    // Redirect IE 3.0
                    window.location.href="ie3.htm";
        }
            else
                   // Redirect all other browsers
                   window.location.href = "inne.htm";
          } // Else ...
       }  // IF Bver = 3/ELSE ...
   } // Function ...
     // -->
</SCRIPT>
<NOSCRIPT>
<META HTTP-EQUIV="Refresh" CONTENT='1; URL=inne.htm'>
</NOSCRIPT>


Menu z grafiką zamiast przycisku

Skrypt wyświetla rozwijane menu, ale zamiast klasycznego przycisku użyty jest obrazek.

Skopiuj przykładowy kod

<form name="mycombo">
<select name="example" size="1">
<option value="http://www.pckurier.pl">PCkurier</option>
<option value="http://www.enter.pl">Enter</option>
<option value="http://www.gambler.com.pl">Gambler</option>
<option value="http://www.chip.pl">Chip</option>
<option value="http://www.pcworld.com.pl">PC World Komputer</option>
</select>

<script language="javascript">
<!--

/*Image combo link box credit
-By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

function go()
{
location=
document.mycombo.example.options[document.mycombo.example.selectedIndex].value
}
//-->
</script>
<a href="JavaScript:go()"><img src="207.gif" border=0></a>
</form>


Okno otwierane po kliknięciu

Okienko otwierane po kliknięciu

Skrypt otwiera nowe okienko po klinięciu na odsyłaczu. Konstrukcja została tak pomyślana, aby jeden skrypt obsłużył "szkieletowo" wiele rozmaitych możliwości. Zawarty w HEAD kod definiuje funkcję, która pozwala wyświetlać "jakieś tam" okienko. Konkretny kod przypisany do odsyłacza precyzuje parametry tego okienka.

Strona 1 | Strona 2

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT>
<!--
function displayWindow(url, width, height) {
        var Win = window.open(url,"displayWindow",'width=' + width + ',height=' + height + ',resizable=0,scrollbars=yes,menubar=no' );
}
//-->
</SCRIPT>

W ramach BODY (przykładowo)

<A HREF="javascript:displayWindow('clikwin1.htm',300,200)">Strona 1</a> |
<A HREF="javascript:displayWindow('clikwin2.htm',200,300)">Strona 2</a>


Sugerowanie rozdzielczości ekranu

Skrypt wykrywa rozdzielczość ekranu i proponuje dalsze działanie. W podanym przykładzie sugerowana rozdzielczość jest oczywiście fikcyjna - w ten sposób treść skryptu będzie widoczna dla wszystkich. Jeśli rozdzielczość jest zgodna z tym, czego oczekuje autor strony, treść skryptu nie jest widoczna. Poprawna rozdzielczość jest podawana w var correctwidth=x i var correctheight=y. Skrypt wymaga NN4 lub IE4.

Skopiuj przykładowy kod

<script language="JavaScript1.2">
<!--

/*

Screen resolution detecter script: By Website Abstraction (www.wsabstract.com) More free scripts here! Note: Credit must stay intact for use.

*/

var correctwidth=1952
var correctheight=1283
if (screen.width!=correctwidth||screen.height!=correctheight)
document.write("<font color=#FF0000>Stronę najlepiej oglądać w rozdzielczości "+correctwidth+"*"+correctheight+". Rozdzielczość twojego ekranu to "+screen.width+"*"+screen.height+". Jeśli to możliwe, zmień rozdzielczość!</font>")
//-->
</script>


Data

Data w układzie Dzień/Miesiąc/Rok

Skopiuj poniższy kod

<script language="javascript">
<!-- W3e JAVAScript Preset/Date
var DDMMYY =0
var MMDDYY =1

function getdate(mode)
{
   var now = new Date();
   var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate();
   if (mode==DDMMYY)
      var MonthDayYear =(dayNr+"/"+(now.getMonth()+1)+"/"+now.getYear());
   else
      var MonthDayYear =((now.getMonth()+1)+"/"+dayNr+"/"+now.getYear());

   return MonthDayYear;
}

function gettime()
{
   var now = new Date();

   var ampm = (now.getHours() >= 12) ? " P.M." : " A.M."
   var hours = now.getHours();
       hours = ((hours > 12) ? hours - 12 : hours);

   var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();
   var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();
   var TimeValue =(" " + hours + minutes + seconds + " "  + ampm);

   return TimeValue;
}//-->
</script>
<script language="javascript">document.write(getdate(DDMMYY));</script>


Dostęp zabroniony

Skrypt sprawdza adres URL strony, z której wchodzi bezpośrednio czytelnik. Jeśli nie jest to żądany przez autora adres, dostęp jest zablokowany. Sens działania skryptu polega na tym, że autor może sobie życzyć, aby wejście na konkretną stronę odbywało się POPRZEZ wybraną przez niego stronę, a nie z jakiegoś innego miejsca, np. za pomocą cudzego odsyłacza. Mówiąc jeszcze inaczej - gdybym chciał, aby czytelnik kursu HTML wchodził na stronę ze skryptami wyłącznie ze strony głównej mojego kursu, powinienem stronę skryptów opatrzyć takim "sprawdzaczem". Jeśli wykryje on, że ktoś chce wejść na tę stronę z jakiegoś innego miejsca, np. z wyszukiwarki internetowej lub z cudzej strony, dostęp zostanie zablokowany. Mam wtedy pewność, że czytelnik, chciał nie chciał, będzie musiał zobaczyć stronę główną mojego wiekopomnego dzieła :-)

Wadą skryptu jest konieczność podawania pełnego, bezwględnego adresu URL w var previousurl.

Przykład (fikcyjny)

Wejdź tutaj

Jeśli nie wszedłeś, to niczego nie straciłeś. To jest tylko strona testowa.

Skopiuj przykładowy kod

W ramach HEAD strony docelowej

<script>
<!--
/*Referrer Checker- By Website Abstraction
(www.wsabstract.com) Over 200+ free JavaScripts here!
*/
var previousurl="http://www.pckurier.pl"
if (document.referrer!=previousurl){
history.go(-1)
alert("Dostęp zabroniony!\nMożesz wejść tylko ze strony\nhttp://www.pckurier.pl!")
}
//-->
</script>


Detekcja przeglądarki

Wykrycie przeglądarki i systemu operacyjnego

Skopiuj poniższy kod

<script language="JavaScript">
<!--
    document.write("Używasz " + navigator.appName + " " + navigator.appVersion);
// -->
</script>


Menu z grafiką zamiast przycisku

Skrypt ładuje stronę przystosowaną do wyświetlania w systemie operacyjnym użytkownika - Windows 95, Macintoshu, Windows 3.1 i pozostałych.

Bez ilustracji.

Skopiuj przykładowy kod

<SCRIPT>
<!--
/* (C)1998 Jonathan Hollingshead.  http://members.tripod.com/~the64center/  This copyright must be left unaltered to be used. This code loads different pages depending on OS. To use the code, follow the instructions below. First, insert the code into the head of a blank document. (The document will never be seen.) Secondly, make a page for Windows 95 and Other Windows, or one for all. Thirdly, make a page for Macintosh and other OS's. Fourthly, change the win95.html and win31.html to the document you made for Windows or, if you made two, win95.html to the one made for Windows 95, and win31.html to the one made for other Windows. Fithly, change the mac.html to the document you made for Macintosh. Finally, change other.html to one of the documents above, or make another one for it. Once you are finished with the instructions, you can delete them.
*/
{
  if((navigator.userAgent.indexOf('Win') != -1) &&
  (navigator.userAgent.indexOf('95') != -1))
    { window.location.href="win95.html"; }
  else if(navigator.userAgent.indexOf('Win') != -1)
    { window.location.href="win31.html"; }
  else if(navigator.userAgent.indexOf('Mac') != -1)
    { window.location.href="mac.html"; }
  else { window.location.href="win.html"; }
}
//-->
</SCRIPT>


Podwójne menu

Skrypt pozwala wyświetlać podwójne menu. W pierwszym wybieramy blok adresów, w drugim - konkretny adres. Kliknięcie na przycisku "Wczytaj" powoduje skok do strony. Skrypt działa w NN 3 i 4 oraz IE 4.

Skopiuj przykładowy kod

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Witryny techniczne</option>
<option>Witryny informacyjne</option>
<option>Wyszukiwarki</option>
</select>
<select name="stage2" size="1">
<option value="http://wsabstract.com">Website Abstraction</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Wczytaj!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By Website Abstraction (www.wsabstract.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Website Abstraction","http://wsabstract.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>


Drukarz

Drukarz (1)

Skopiuj przykładowy kod

<script language="JavaScript">
<!-- begin
// 1996 by Christoph Bergmann... http://acc.de/cb
// Please keep this note...
// global variables
var max=0;
function textlist()
{
 max=textlist.arguments.length;
 for (i=0; i<max; i++)
  this[i]=textlist.arguments[i];
}
tl=new textlist
(
 "Z ostatniej chwili: rewelacyjne produkty w naszej ofercie!"
);
var x=0; pos=0;
var l=tl[0].length;

function textticker()
{
 document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";

 if(pos++==l)
 {
  pos=0;
  setTimeout("textticker()",1000);
        x++;
        if(x==max)
            x=0;
        l=tl[x].length;
    } else
        setTimeout("textticker()",50);

}

// end -->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<FORM NAME=\"tickform\">");
document.write("<INPUT TYPE=TEXT NAME=\"tickfield\" SIZE=70>");
document.write("</FORM>");
textticker();
//-->
</SCRIPT>


Drukarz (2)

W skrypcie możemy regulować szybkość pojawiania się kolejnych liter (w milisekundach setTimeout("scrollit()",100)), a także szerokość okienka z informacją (input type="text" size=60 name="mesg").

Skopiuj przykładowy kod

W ramach HEAD

<Script language="javascript">

var m = "To jest właśnie ta niesłychanie ważna wiadomość"
var a = ""
i=0
function scrollit() {
i++
if(i > m.length) {
i = 1
 }
a = m.substring(0,i)
document.forms[0].elements[0].value = a+"_"
setTimeout("scrollit()",100)
}

</script>

W ramach BODY

<form name="msg">
<input type="text" size=60 name="mesg">
</form>

W BODY musimy też podać

<body onLoad="scrollit()">


Drukarz wielowierszowy

Treść komunikatów redagujemy w części skryptu zamieszczonej w HEAD.

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT language="JavaScript">
  // This script is made by Marnix Birza at 13-11-1996.
  var scrtxt="Cześć....   Witajcie na mojej stronie....*"+
             "To jest drugi wiersz komunikatu*"+
             "To jest trzeci wiersz komunikatu*"+
             "To jest czwarty wiersz komunikatu#";

  var startpos=0;
  var endpos=1;

 function scroll() {
  var scroller="";
  scroller=scrtxt.substring(startpos,endpos);
  document.sform.stxt.value = scroller;
  endpos++;
  if (scrtxt.substring(endpos-1,endpos)=='#')
   {startpos=0; endpos=1; setTimeout("scroll()",2500); }
   else
     if (scrtxt.substring(endpos-1,endpos)=='*')
       {startpos=endpos; endpos++; setTimeout("scroll()",2500);}
       else {setTimeout("scroll()",10);}
  }
</SCRIPT>

W ramach BODY

<FORM name="sform">
<INPUT name="stxt" type="TEXT" size="45" value="AARRGHHH....no javascript....">
</FORM>

W BODY musimy też podać

<body onload="scroll()">


Rozwijane menu bez przycisku

Otwarcie dwóch ramek jednocześnie

Webmasterzy często pytają o możliwość otwarcia dwóch ramek jednocześnie, mając ramkę nawigacyjną z lewej strony i dwie rami z prawej, które jednocześnie powinny zmienić zawartość. Prosty skrypt "załatwia" ten problem.

Przykład

Skopiuj przykładowy kod z ramki nawigacyjnej przykładu - prześledź też jego ramkową konstrukcję.

W ramach HEAD

<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3)
{
    parent.fr2.location.href=page2;
    parent.fr3.location.href=page3;
}
// -->
</script>

W ramach BODY

<a href="javascript:loadtwo('frtest1.htm','frtest2.htm')">Zmień zawartość dwóch ramek</a>


Dzisiaj jest...

Skopiuj poniższy kod

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide it
// Returns today's date in a string with full day and month names
// by Roger C. Scudder Jr. on 10-2-98
// corrected for Netscape by Grzegorz Golebiewski
DayName = new Array(7)
DayName[0] = "niedziela "
DayName[1] = "poniedziałek "
DayName[2] = "wtorek "
DayName[3] = "środa "
DayName[4] = "czwartek "
DayName[5] = "piątek "
DayName[6] = "sobota "

MonthName = new Array(12)
MonthName[0] = "stycznia "
MonthName[1] = "lutego "
MonthName[2] = "marca "
MonthName[3] = "kwietnia "
MonthName[4] = "maja "
MonthName[5] = "czerwca "
MonthName[6] = "lipca "
MonthName[7] = "sierpnia "
MonthName[8] = "września "
MonthName[9] = "października "
MonthName[10] = "listopada "
MonthName[11] = "grudnia "

function getDateStr(){
    var Today = new Date()
    var WeekDay = Today.getDay()
    var Month = Today.getMonth()
    var Day = Today.getDate()
    var Year = Today.getYear()

    if(Year <= 99)
        Year += 1900

    return DayName[WeekDay] + "," + " " + Day + " " + MonthName[Month] + ", " + Year
}
//-->
</SCRIPT>

<SCRIPT>document.write("Dzisiaj jest " + getDateStr())</SCRIPT>


Pocztowa książka adresowa z opisami

Książka adresowa naszej firmy

Skrypt został nieco skrócony w stosunku do oryginału (mniej pozycji), a konstrukcja zmodyfikowana, aby lepiej wyświetlać informacje opisowe (onBlur zmienione na onChange)

Skopiuj przykładowy kod.

<!-- This script came from the public archives of JavaScript Planet at http://www.js-planet.com -->
<!-- For more scripts, tutorials, links, discussion forums, help, or anything else JavaScript, -->
<!-- Please visit JavaScript Planet at http://www.js-planet.com. Please keep this header intact. -->

<script language="javascript">

function displayinfo(){
        var who=document.emails.list.options[document.emails.list.selectedIndex].value;
        var address=document.emails.address;
        var info=document.emails.information;
        var ss="@yourdomain.com";
if (who=="nameoflist"){
                address.value="";
                info.value="";}

if (who=="webmaster"){
                address.value="webmaster"+ss;
                info.value="Send email with problems and questions about this web site to this address.";}
if (who=="bteditor"){
                address.value="barrington"+ss;
                info.value="Send email about the editorial content of the Barrington Times to this address.";}
if (who=="bpeditor"){
                address.value="bristol"+ss;
                info.value="Send email about the editorial content of the Bristol Phoenix to this address.";}
}

</script>
<FORM name="emails">
<br>
<p><B>Książka adresowa naszej firmy</B></p>
<BR>
<SELECT NAME="list" onChange="displayinfo()">
<OPTION value="nameoflist">Wybierz adres z listy
<OPTION value="webmaster">Webmaster
<OPTION value="bteditor">Barrington Times Editor
<OPTION value="bpeditor">Bristol Phoenix Editor
</SELECT>
<TABLE BORDER WIDTH=300 BGCOLOR="#C0C0C0">
<TR>
<TD VALIGN=TOP>
<CENTER>
<INPUT TYPE="text" NAME="address" VALUE="" SIZE=45><BR>
<TEXTAREA NAME="information" ROWS=7 COLS=27 wrap=virtual></TEXTAREA><BR>
<INPUT TYPE="button" NAME="sendit" VALUE="Kliknij, aby wysłać pocztę" onClick="parent.location='mailto:'+document.emails.address.value">
</CENTER>
</TD>
</TR>
</TABLE>
</FORM>


Poczta elektroniczna pod przyciskiem

Skopiuj poniższy kod - oczywiście zmień adres poczty elektronicznej

<FORM>
<INPUT TYPE="button" VALUE="Napisz do mnie"  onClick="parent.location.href='mailto:pawel.wimmer@pckurier.pl'">
</FORM>


Poczta do dowolnej osoby

List do kogoś

lub

Skopiuj przykładowy kod.

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function mailsome1(){
who=prompt("Wpisz adres pocztowy odbiorcy: ","kowalski@firma.pl");
what=prompt("Wpisz temat listu: ","temat");
if (confirm("Czy jesteś pewien, że chcesz wysłać list do "+who+" z tematem "+what+"?")==true){
parent.location.href='mailto:'+who+'?subject='+what+'';
   }
}
// End -->
</SCRIPT>

W ramach BODY

<FORM>
<input type=button value="List do kogoś!" onClick="mailsome1()">
</FORM>


Poczta z CC: i tematem

List jest wysyłany do autora strony, a kopia (CC:, czyli carbon copy) do innej osoby. W temacie ukazuje się sugerowana wiadomość.

Skopiuj przykładowy kod.

<!-- This script is featured at JavaScript Planet at
     http://www.js-planet.com/  Check out
     JavaScript Planet for more scripts, links, etc.
     Please leave this comment intact. -->
<FORM>
<INPUT TYPE="button" VALUE="List do mnie i kopia do Kowalskiego"
onClick="parent.location='mailto:ja@firma.pl?subject=Temat listu&cc=kowalski@firma.pl'">
</FORM>


Poczta z weryfikacją adresu

Skrypt weryfikuje poprawność podawanego adresu poczty elektronicznej przy wypełnianiu formularzy i wysyłaniu ich za pomocą przycisku Submit. Sprawdza, czy w adresie znajduje się znak "małpy", czyli "@", a także, czy obecny jest prefiks przed "@" i właściwy sufiks (.com, .pl, .net itd.)

Skopiuj przykładowy kod.

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function emailCheck() {
txt=document.isn.email.value;
if (txt.indexOf("@")<3){
alert("Sorry! Ten adres jest chyba niepoprawny. Proszę,"
+" sprawdź prefiks przed znakiem '@'.");
}
if ((txt.indexOf(".com")<5)&&(txt.indexOf(".org")<5)
&&(txt.indexOf(".gov")<5)&&(txt.indexOf(".net")<5)
&&(txt.indexOf(".mil")<5)&&(txt.indexOf(".edu")<5)&&(txt.indexOf(".pl")<5)){
alert("Sorry! Ten adres jest chyba niepoprawny.\nProszę,"
+" sprawdź sufiks. (powinien zawierać "
+".com, .edu, .net, .org, .gov, .mil lub .pl)");
   }
}
// End -->
</SCRIPT>

W ramach BODY

<FORM NAME="isn">
<INPUT TYPE="text" NAME="email" SIZE=40 VALUE=""><BR><br>
<INPUT TYPE="button" NAME="email1" VALUE=" Submit " onClick="emailCheck()">
</FORM>


Wieczny kalendarz

Ten "wystrzałowy" skrypt z gigantycznym kodem tworzy wieczny kalendarz. Można w nim wybierać miesiąc z listy, przewijać kalendarz o miesiąc i rok do przodu i do tyłu, skoczyć do dnia bieżącego, a także wpisać rok w polu i za pomocą przycisku Utwórz wczytać dane.

W kalendarzu zostały spolszczone nazwy miesięcy i dni oraz polecenia. Trudno sprawdzić, czy naprawdę wszystko działa poprawnie - sprawdzenie z kilkoma przypadkowo wybranymi datami w kalendarzu ściennym pokazuje, że tak. A zatem, na los szczęścia, Baltazarze! :-)

Wybierz datę

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original:  Rob Patrick (rpatrick@mit.edu) -->
<!-- Begin
function setToday() {
var now   = new Date();
var day   = now.getDate();
var month = now.getMonth();
var year  = now.getYear();
if (year < 100) { year += 1900; }
else { year += 2000; }
this.focusDay = day;
document.calControl.month.selectedIndex = month;
document.calControl.year.value = year;
displayCalendar(month, year);
}
function isFourDigitYear(year) {
if (year.length != 4) {
alert ("Sorry, the year must be four-digits in length.");
document.calControl.year.select();
document.calControl.year.focus();
} else { return true; }
}
function selectDate() {
var year  = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day   = 0;
var month = document.calControl.month.selectedIndex;
displayCalendar(month, year);
    }
}

function setPreviousYear() {
var year  = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day   = 0;
var month = document.calControl.month.selectedIndex;
year--;
document.calControl.year.value = year;
displayCalendar(month, year);
   }
}
function setPreviousMonth() {
var year  = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day   = 0;
var month = document.calControl.month.selectedIndex;
if (month == 0) {
month = 11;
if (year > 1000) {
year--;
document.calControl.year.value = year;
}
} else { month--; }
document.calControl.month.selectedIndex = month;
displayCalendar(month, year);
   }
}
function setNextMonth() {
var year  = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day   = 0;
var month = document.calControl.month.selectedIndex;
if (month == 11) {
month = 0;
year++;
document.calControl.year.value = year;
} else { month++; }
document.calControl.month.selectedIndex = month;
displayCalendar(month, year);
   }
}
function setNextYear() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
year++;
document.calControl.year.value = year;
displayCalendar(month, year);
   }
}
function displayCalendar(month, year) {
month = parseInt(month);
year = parseInt(year);
var i = 0;
var days = getDaysInMonth(month+1,year);
var firstOfMonth = new Date (year, month, 1);
var startingPos = firstOfMonth.getDay();
days += startingPos;
document.calButtons.calPage.value  =   " Nd Pn Wt Śr Cz Pt So";
document.calButtons.calPage.value += "\n --------------------";
for (i = 0; i < startingPos; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += "\n ";
document.calButtons.calPage.value += "   ";
}
for (i = startingPos; i < days; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += "\n ";
if (i-startingPos+1 < 10)
document.calButtons.calPage.value += "0";
document.calButtons.calPage.value += i-startingPos+1;
document.calButtons.calPage.value += " ";
}
for (i=days; i<42; i++)  {
if ( i%7 == 0 ) document.calButtons.calPage.value += "\n ";
document.calButtons.calPage.value += "   ";
}
document.calControl.Go.focus();
}
function getDaysInMonth(month,year)  {
var days;
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)  days=31;
else if (month==4 || month==6 || month==9 || month==11) days=30;
else if (month==2)  {
if (isLeapYear(year)) { days=29; }
else { days=28; }
}
return (days);
}
function isLeapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
return (true);
} else { return (false); }
}
// End -->
</SCRIPT>

W ramach BODY (przykładowo)

<CENTER>
<H2>Wybierz datę</H2>
<FORM NAME="calControl" onSubmit="return false;">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR><TD COLSPAN=7>
<CENTER>
<SELECT NAME="month" onChange="selectDate()">
<OPTION>Styczeń
<OPTION>Luty
<OPTION>Marzec
<OPTION>Kwiecień
<OPTION>Maj
<OPTION>Czerwiec
<OPTION>Lipiec
<OPTION>Sierpień
<OPTION>Wrzesień
<OPTION>Październik
<OPTION>Listopad
<OPTION>Grudzień
</SELECT>
<INPUT NAME="year" TYPE=TEXT SIZE=4 MAXLENGTH=4>
<INPUT TYPE="button" NAME="Go" value="Utwórz!" onClick="selectDate()">
</CENTER>
</TD>
</TR>
</FORM>
<FORM NAME="calButtons">
<TR><TD align="center"><textarea FONT="Courier" NAME="calPage" WRAP=no ROWS=8 COLS=22></textarea></TD><TR><TD><CENTER>
<INPUT TYPE=BUTTON NAME="previousYear" VALUE=" <<  "    onClick="setPreviousYear()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE="  <  "    onClick="setPreviousMonth()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE="Dzisiaj"    onClick="setToday()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE="  >  "    onClick="setNextMonth()">
<INPUT TYPE=BUTTON NAME="previousYear" VALUE="  >> "    onClick="setNextYear()">
</CENTER></TD></TR>
</TABLE></FORM></FONT>

Dodatkowo podaj w definicji <body onLoad="setToday()">


Okno otwierane we wskazanym miejscu

Skrypt otwiera osobne okienko z informacjami, sytuując je we wskazanym miejscu ekranu. Pozycję ustalamy za pomocą parametrów left i top. Pamiętaj, że większość internautów korzysta z rozdzielczości 800x600. Prawy brzeg nowego okienka powinien się jeszcze mieścić na ekranie i dlatego wylicz precyzyjnie pozycję lewego brzegu, uwzględniając szerokość okienka.

Skopiuj przykładowy kod

<script language="JavaScript1.2">
<!--
window.open('fixwin1.htm', 'Wiadomości', 'toolbar,menubar,scrollbars,resizable,height=150,width=200,left=600,top=400');
//-->
</script>


Przewodnik po stronach

albo

Skrypt pozwala się poruszać w kolejności wymuszonej przez autora strony. Na każdej stronie serwisu może być umieszczony taki zestaw nawigacyjny, przy czym każdy zestaw będzie oczywiście zawierać inne odsyłacze do strony "poprzedniej" i "następnej". W ten sposób prowadzimy czytelnika przez serwis, każąc mu się przemieszczać zgodnie z naszym zamierzeniem (tylko do przodu lub wstecz). Możemy tutaj oczywiście swobodnie określać treść przycisków.

Rzecz jasna, możemy osiągnąć ten sam efekt bez przycisków, pisząc zwykłe odsyłacze.

Skopiuj poniższy kod (drugi przykład)

<form name="Przewodnik">
     <input type="button" value="&lt;&lt;" onClick="parent.location.href='strona1.html'">
     <input type="button" value="Strona główna" onClick="parent.location.href='strglown.html'">
     <input type="button" value="&gt;&gt;" onClick="parent.location.href='strona3.html'">
</form>


Ochrona hasłem

Login

Hasło

Jeśli podasz login=kurshtml i hasło=skrypty, przejdziesz do utajnionej strony.

Uwaga: skrypt nie jest bezpieczny i działa co najwyżej na internautów z "dolnej strefy stanów średnich". Nieco bardziej obyta osoba zajrzy po prostu do źródła strony i sprawdzi, do jakiej "utajnionej" strony prowadzi skrypt. Znacznie lepszy jest skrypt zaprezentowany w przykładzie na następnej stronie.

Skopiuj przykładowy kod. Zwróć w nim uwagę na definicję loginu, hasła i adresu docelowej strony.

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
<!----- Script CopyRight © 1996 - 1997  S.Chris Brown (Spikeman)   http://www.geocities.com/BourbonStreet/3843
// This JavaScript code Originally by S.Chris Brown (Spikeman) 1996-1997 ( http://www.geocities.com/BourbonStreet/3843 )
function Spikeman_password(form) {
 if (form.ID.value=="kurshtml") {
    if (form.pass.value=="skrypty") {
      location="haslo2.htm"

} else {
      alert("Sorry " +form.ID.value+ ", wrong password.")
    }
  } else {
    alert("Niewłaściwe informacje!")
  }
}
//-->
</SCRIPT>

W ramach BODY

<FORM name="login">
Login <INPUT NAME="ID"><br>
Hasło <INPUT NAME="pass" type="password"><br><br>
<INPUT TYPE="button" VALUE="Skocz" onClick="Spikeman_password(this.form)"> <INPUT TYPE="RESET" VALUE="Wyczyść">
</form>


Ochrona bezpiecznym hasłem

W przeciwieństwie do poprzedniego skryptu z hasłem, ten skrypt jest znacznie bezpieczniejszy. Wymagane jest w nim podanie nazwy strony, a tę otrzymają od webmastera tylko zaufane osoby - inne nie będą nawet wiedzieć o jej istnieniu.

Część skryptu jest umieszczana w ramach HEAD. Należy tam zwrócić uwagę na ciąg location.href= pass + ".htm";. Jeśli utajniona strona ma rozszerzenie .htm, pozostawiamy .htm. Jeśli .html, musimy zmienić rozszerzenie w tej części skryptu.

Użytkownik podaje samą tylko nazwę pliku, bez rozszerzenia, które jest automatycznie dodawane do skryptu. Konieczne jest KLIKNIĘCIE na przycisku Kliknij (klawisz Enter nie działa ze względu na polecenie OnClick).

Hasło

Wpisz haslo2 i kliknij na przycisku.

Skopiuj poniższy kod

W ramach HEAD

<!--
Created by Greg Boyd on July 30, 1997
To use this teleport/password feature as I call it, all you need to do
is cut and paste the entire code including what you are reading.
The file takes what you put in the box and takes you to the page of that name.
It is easier to use if you include a list of the sites on your pages.
If you have problems getting this to work, email me at mims@frontiernet.net.net .
-->

<script Language="JavaScript">
// Greg Boyd;   mims@frontiernet.net   URL:   http://www.frontiernet.net/~mims/
// Password Java Script (v1.0);
// Please honor my hard work, if you use a variant of this in your page, then
// please email me :) and keep the above comments in the Script.
//
//   This code is Copyright (c) 1997 Greg Boyd,
//   all rights reserved. In order to receive the right to license this
//   code for use on your site the original code must be copied from the
//   Web site http://www.frontiernet.net/~mims/. License is granted touser to
//   reuse this code on their own Web site if and only if this entire copyright
//   notice is included. Code written by Greg Boyd of http://www.frontiernet.net/~mims/.

function password (pass)  {

var password = ''

if (password != null){
        location.href= pass + ".htm";
}
}
</script>

W ramach BODY

Hasło
<FORM name="login">
<INPUT NAME="pass"><br><br>
<INPUT TYPE="button" VALUE="Kliknij" onClick="password(form.pass.value)">
<INPUT TYPE="RESET" VALUE="Wyczyść">
</form>


Historia skoków

Skrypt pełni tę samą funkcję, jak przyciski Wstecz i Dalej w przeglądarce internetowej.

Skopiuj poniższy kod

<form name="Historia">
     <input type="button" value="&lt;&lt;" onClick="history.back()">
     <input type="button" value="Strona główna" onClick="location='jakas_strona.html'">
     <input type="button" value="&gt;&gt;" onClick="history.forward()">
</form>


Skok do wskazanej strony

Skopiuj poniższy kod

<FORM>
<INPUT TYPE="button" VALUE="Microsoft" onClick="parent.location.href='http://www.microsoft.com'">
<INPUT TYPE="button" VALUE="Corel" onClick="parent.location.href='http://www.corel.com'">
<INPUT TYPE="button" VALUE="IBM" onClick="parent.location.href='http://www.ibm.com'">
</FORM>


Przeglądarka grafik

Skrypt pozwala wyświetlać na żądanie konkretne grafiki, znajdujące się na rozwijanej liście. Jeśli chcemy np. zaprezentować jakieś obrazki (choćby okładki książek, zdjęcia produktów czy nasze genialne twory graficzne), możemy skorzystać z tego skryptu - czytelnik sam sobie wybierze obrazek.

W poniższym skrypcie "na dzień dobry" jest wyświetlana okładka Entera, ale może to być cokolwiek, nawet puste miejsce.

Skopiuj przykładowy kod

<SCRIPT LANGUAGE="JavaScript">

<!--
function imgchange()
{
        var si =  document.frm.selbox.selectedIndex;
        var fname = document.frm.selbox.options[si].value
        document.img.src = fname
}
//-->

</SCRIPT>

<FORM name="frm">
<SELECT NAME="selbox" size=1>
<OPTION VALUE="../grafika/enter.gif" width=80 height=114>Okładka Entera
<OPTION VALUE="../grafika/pcq.gif" width=80 height=114>Okładka PCkuriera
<OPTION VALUE="../grafika/gambler.gif" width=80 height=114>Okładka Gamblera
</SELECT>
<INPUT type="button" value="Wczytaj" onClick="imgchange()">
</FORM>
<IMG SRC="../grafika/enter.gif" width=80 height=114 NAME="img">


Przeglądarka grafik 3

Skrypt pozwala wyświetlać sekwencję grafik bez klikania na przyciskach, lecz poprzez przesunięcie kursora myszki nad odsyłacz. Wadą jest konieczność wcześniejszego załadowania wszystkich grafik.

Enter | PCkurier | Gambler

Skopiuj przykładowy kod

W ramach HEAD

<script>

/*Rollover effect on different image script-
By Website Abstraction (http://wsabstract.com)
Over 200+ free scripts here!
*/

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("../grafika/enter.gif","../grafika/pcq.gif","../grafika/gambler.gif")
</script>

W ramach BODY

<p><a href="../grafika/enter.gif" onMouseover="changeimage(myimages[0],this.href)">Enter</a> |
<a href="../grafika/enter.gif" onMouseover="changeimage(myimages[1],this.href)">PCkurier</a> |
<a href="../grafika/enter.gif" onMouseover="changeimage(myimages[2],this.href)">Gambler</a></p>

<a href="javascript:warp()"><img src="../grafika/enter.gif" name="targetimage" border=0></a>

<script>
"
//myimages[0] would refer to "enter.gif", myimages[1] would refer to "pcq.gif" etc
preloadimages("../grafika/enter.gif","../grafika/pcq.gif","../grafika/gambler.gif")

</script>


Przeglądarka grafik 2

Skrypt pozwala wyświetlać sekwencję grafik. Nawigacja obejmuje krok do przodu, krok wstecz i powrót na początek. Grafiki nie muszą mieć tych samych rozmiarów - w takiej sytuacji przyciski nawigacyjne lepiej jest umieścić ponad obrazkami, aby nie zmieniały swojej pozycji, gdy zmieni się rozmiar wyświetlanego obrazka. Liczba grafik może być dowolna.

Czasopisma

Od początku

Skopiuj przykładowy kod

<center>
<strong>Czasopisma</strong><br><br>
<img src="../grafika/enter.gif" name="photoslider" alt=" ">
<form method="POST" name="rotater">
<script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="../grafika/enter.gif"
photos[1]="../grafika/pcq.gif"
photos[2]="../grafika/gambler.gif"

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script>
<input type="button" value=" << " name="B2"
onClick="backward()"> <input type="button" value=" >> " name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Od początku</small></a>
</form>
</center>


Test JavaScript

Skrypt wykrywa, czy przeglądarka akceptuje JavaScript. W ten sposób możemy na przykład zaproponować naszemu czytelnikowi dalszą wędrówkę po stronach opatrzonych skryptami albo skierować go na strony ich pozbawione. Choć może się to wydać dziwne, wiele osób nie ma pojęcia, czy ich przeglądarka jest "JavaScript enabled" - skrypt po prostu informuje je o tym fakcie.

Strony z JavaScript | Strony bez JavaScript

Skopiuj przykładowy kod strony roboczej

W ramach HEAD

<script language="JavaScript">
<!-- Hide the script from old browsers --
// Michael P. Scholtis (mpscho@planetx.bloomu.edu)
// All rights reserved.  December 22, 1995
// You may use this JavaScript example as you see fit, as long as the
// information within this comment above is included in your script.
function browsertest ()
        {document.write('<font color=#FF0000><b>Twoja przeglądarka przeszła pomyślnie test JavaScript</b></font>')}
// --End Hiding Here -->
</script>

W ramach BODY

<SCRIPT LANGUAGE="JavaScript">
<!--
   {browsertest();}
//-->
</SCRIPT>


Kalendarz z zegarem

Możesz manipulować czcionką i kolorami

Skopiuj przykładowy kod.

<script>
<!--
/*Copyright 1996 - Tomer and Yehuda Shiran
Feel free to "steal" this code provided that you leave this notice as is.
Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/
For more information contact Tomer or Yehuda Shiran <yshiran@iil.intel.com>*/

setCal()

function getTime() {
// initialize time-related variables with current time settings
var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""

// validate hour values and set value of ampm
if (hour >= 12) {
hour -= 12
ampm = "PM"
} else
ampm = "AM"
hour = (hour == 0) ? 12 : hour

// add zero digit to a one digit minute
if (minute < 10)
minute = "0" + minute // do not parse this number!

// return time string
return hour + ":" + minute + " " + ampm
}

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // Styczeń
ar[1] = (leapYear(year)) ? 29 : 28 // Luty
ar[2] = 31 // Marzec
ar[3] = 30 // Kwiecień
ar[4] = 31 // Maj
ar[5] = 30 // Czerwiec
ar[6] = 31 // Lipiec
ar[7] = 31 // Sierpień
ar[8] = 30 // Wrzesień
ar[9] = 31 // Październik
ar[10] = 30 // Listopad
ar[11] = 31 // Grudzień

// return number of days in the specified month (parameter)
return ar[month]
}

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12)
ar[0] = "Styczeń"
ar[1] = "Luty"
ar[2] = "Marzec"
ar[3] = "Kwiecień"
ar[4] = "Maj"
ar[5] = "Czerwiec"
ar[6] = "Lipiec"
ar[7] = "Sierpień"
ar[8] = "Wrzesień"
ar[9] = "Październik"
ar[10] = "Listopad"
ar[11] = "Grudzień"

// return name of specified month (parameter)
return ar[month]
}

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getYear()
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

// number of days in current month
var days = getDays(month, year)

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, 1900 + year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
var headerHeight = 50 // height of the table's header cell
var border = 2 // 3D height of table's border
var cellspacing = 4 // width of table's border
var headerColor = "blue" // color of table's header
var headerSize = "+3" // size of tables header font
var colWidth = 60 // width of columns in table
var dayCellHeight = 25 // height of cells containing days of the week
var dayColor = "blue" // color of font representing week days
var cellHeight = 40 // height of cells representing dates in the calendar
var todayColor = "red" // color specifying today's date in the calendar
var timeColor = "green" // color of font representing current time

// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
text += monthName + ' ' + year
text += '</FONT>' // close table header's font settings
text += '</TH>' // close header cell

// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'

// create array of abbreviated day names
var weekDay = new Array(7)
weekDay[0] = "Nie"
weekDay[1] = "Pon"
weekDay[2] = "Wto"
weekDay[3] = "Śro"
weekDay[4] = "Czw"
weekDay[5] = "Pia"
weekDay[6] = "Sob"

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol
}
text += '</TR>'

// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) { // current cell represent today's date
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
text += '<CENTER>' + getTime() + '</CENTER>'
text += '</FONT>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}

// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'

// print accumulative HTML string
document.write(text)
}
//-->
</script>


Przydatne skrypty

Lista skryptów

Wprowadzenie

    Data i czas

  1. Zegarek
  2. Data i czas
  3. Zegarek w wierszu statusu
  4. Zegarek w rogu ekranu
  5. Zegarek z grafikami
  6. Data
  7. Dni tygodnia
  8. Dzisiaj jest ...
  9. Jesteś tutaj już ...
  10. Odliczanie dni
  11. Odliczanie dni 2
  12. Odliczanie dni, godzin i minut
  13. Odliczanie dni, godzin i minut (PL)
  14. Minęło nn dni
  15. Uniwersalny kalendarz
  16. Wieczny kalendarz
  17. Kalendarz z zegarem
  18. Aktualizacja strony
  19. Aktualizacja strony (po polsku)

    20. Poczta

  20. Poczta do wskazanej osoby
  21. Poczta z CC: i tematem
  22. Formularz pocztowy
  23. Książka adresowa z opisami
  24. Poczta do dowolnej osoby
  25. Poczta z weryfikacją adresu

    26. Nawigacja

  26. Skok do strony
  27. Historia skoków
  28. Skok wstecz
  29. Przewodnik po stronach
  30. Rozwijana lista z odsyłaczami 1
  31. Rozwijana lista z odsyłaczami 2
  32. Rozwijane menu w ramce
  33. Rozwijane menu bez przycisku
  34. Otwarcie dwóch ramek jednocześnie
  35. Odsyłacze z opisami
  36. Podwójne menu
  37. Osobne okienko z rozwijanym menu
  38. Menu otwierające osobne okienko
  39. Menu z grafiką zamiast przycisku
  40. Adresowy "pokaz slajdów"
  41. Ucieczka z ramki
  42. Strona zależna od przeglądarki
  43. Strona zależna od systemu operacyjnego

    44. Komunikaty

  44. Alert jako przycisk
  45. Alert przy ładowaniu strony
  46. Wiadomość w pasku statusu 1
  47. Wiadomość w pasku statusu 2
  48. Wiadomość w pasku statusu 3
  49. Wiadomość w pasku statusu 4
  50. Wiadomość w pasku statusu 5
  51. Wiadomość w pasku statusu 6
  52. Banner 1
  53. Banner 2
  54. Banner 3 (z aktywnym odsyłaczem)
  55. Banner 4
  56. Ostrzeżenie
  57. Seria komunikatów
  58. Drukarz 1
  59. Drukarz 2
  60. Drukarz wielowierszowy
  61. Ostrzeżenie przed ramką
  62. Proszę czekać...

    63. Zabezpieczenie

  63. Ochrona hasłem
  64. Ochrona bezpiecznym hasłem
  65. Ochrona bezpiecznym hasłem 2
  66. Dostęp zabroniony

    67. Multimedia

  67. Uniwersalne tło dźwiękowe
  68. Uniwersalny odtwarzacz AVI
  69. A muzyczka ciągle gra
  70. Przeglądarka grafik 1
  71. Przeglądarka grafik 2
  72. Przeglądarka grafik 3

    73. Informacje systemowe

  73. Adres bieżącego dokumentu
  74. Detekcja przeglądarki
  75. Test JavaScript
  76. Test rozdzielczości ekranu

    77. Różne

  77. Źródło dokumentu
  78. Drukowanie strony
  79. Okienko pojawiające się i znikające
  80. Okienko z pływającym tekstem
  81. Okienko otwierane we wskazanym miejscu
  82. Okienko otwierane po kliknięciu


Odsyłacze z opisami

Skrypt pozwala zbudować listę odsyłaczy z opisami. Po przesunięciu kursora myszki nad odsyłacz w pierwszym polu pojawia się rozszerzona nazwa, natomiast w następnym - opis serwisu. Kliknięcie na odsyłaczu powoduje skok do strony, przy czym w tej wersji skryptu jest ona ładowana "on top", czyli na cały ekran przeglądarki. W definicji skryptu możemy się posługiwać zarówno odsyłaczami bezwzględnymi, jak i względnymi, w stosunku do położenia strony. Skrypt jest wygodnym narzędziem, gdy chcemy dać szerszą informację o odsyłaczach, nie zajmując nimi zarazem miejsca na stronie.

Moje odsyłacze

PCkurier
Kurs języka HTML
Poradniki dla internautów
Wiedza

Skopiuj przykładowy kod.

<table width=510 border=0>
<tr>
<td width=305 align=left>

<script language="JavaScript">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.geocities.com/ResearchTriangle/1500

function thetext(txt) {
   document.theform.thetext.value = txt
     return true;
}

// -->
</script>
<script language="JavaScript">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.geocities.com/ResearchTriangle/1500

function atext(txt) {
   document.aform.atext.value = txt
     return true;
}

// -->
</script>
<H3>Moje odsyłacze</H3>
<a href="http://www.pckurier.pl" onmouseover='thetext("PCkurier - strona główna"); atext("PCkurier zawiera opisy sprzętu i oprogramowania, relacje z wydarzeń, przeglądy technik i technologii.")' target=_top>PCkurier</a><br>
<a href="http://www.pckurier.pl/html/index.htm" onmouseover='thetext("Kurs języka HTML  - poradnik webmastera"); atext("Kurs zawiera praktyczny opis tworzenia stron WWW. Jest stale aktualizowany")' target=_top>Kurs języka HTML</a><br>
<a href="http://www.pckurier.pl/podreczniki/index.html" onmouseover='thetext("Poradniki i dokumentacje"); atext("Strona zawiera szereg poradników pomagających w lepszym wykorzystaniu oprogramowania i serwisów usługowych w Internecie.")' target=_top>Poradniki dla internautów</a><br>
<a href="http://www.pckurier.pl/wiedza/index.html" onmouseover='thetext("Katalog internetowy Wiedza"); atext("Katalog zawiera odsyłacze do miejsc związanych z szeroko rozumianą wiedzą - encyklopedii, poradników, bibliotek, uczelni, księgarni itd.")' target=_top>Wiedza</a><br>

<form name="theform">
<input type="text" name="thetext" size=40>
</form>
<form name="aform">
<TEXTAREA rows=5 cols=30 wrap="virtual" NAME="atext">
</TEXTAREA>
</form>
<center></center>
</td>
</tr>
</table>


Rozwijana lista z odsyłaczami 1

Odsyłacze wczytują stronę do tej samej ramki.

Skopiuj poniższy kod

<script language="JavaScript">
<!--
// origjnal code by Bill Trefzger 12/12/96
function go(){
if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none") {
location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value
 }
}
//-->
</script>

<script language="JavaScript">
<!--
document.write('<form name="selecter"><select name="select1" size=1>');
document.write('<option value=none>Wybierz firmę..');
document.write('<option value=none>--------------------');
document.write('<option value="http://www.microsoft.com">Microsoft');
document.write('<option value="http://www.corel.com">Corel');
document.write('<option value="http://www.novell.com">Novell');
document.write('<option value="http://www.ibm.com">IBM');
document.write('<option value="http://www.netscape.com">Netscape');
document.write('</select>');
document.write('<INPUT TYPE="button" VALUE="Hop !" onclick="go()">');
document.write('</form>');
//-->
</script>


Rozwijana lista z odsyłaczami 2

Wybierz system wyszukiwawczy

Odsyłacze wczytują stronę "na wierzch" (on top). Niestety, nie ma możliwości skierowania wczytywanej strony do innej ramki.

Skopiuj poniższy kod

<FORM>
<SELECT NAME="list">
<OPTION VALUE="http://www.hotbot.com" target="_top">HotBot
<OPTION VALUE="http://www.chip.pl" target="_top">NEToskop (PL)
<OPTION VALUE="http://archie.icm.edu.pl/" target="_top">Serwer Archie (PL)
<OPTION VALUE="http://www.altavista.digital.com" target="_top">Alta Vista
<OPTION VALUE="http://www.lycos.com" target="_top">Lycos
<OPTION VALUE="http://www.yahoo.com" target="_top">Yahoo!
<OPTION VALUE="http://www.infoseek.com" target="_top">Infoseek
<OPTION VALUE="http://www.webcrawler.com" target="_top">Web Crawler
<OPTION VALUE="http://www.opentext.com:8080" target="_top">Open Text Index
<OPTION VALUE="http://www.isleuth.com/" target="_top">Internet Sleuth
<OPTION VALUE="http://galaxy.einet.net/www/www.html" target="_top">EINet Galaxy Websearch
<OPTION VALUE="http://www.psy.uwa.edu.au/qrtrdeck.htm" target="_top">Quarterdeck's Quick Search
<OPTION VALUE="http://www.psy.uwa.edu.au/selfrms.htm#SAVVY" target="_top">SavvySearch
</SELECT>
<P>
<INPUT TYPE=BUTTON VALUE="Hop !"
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>


Formularz pocztowy

Skrypt obsługuje formularz pocztowy, a więc pozwala wysłać pocztę do wskazanej osoby. Co ważne, czytelnik strony może wskazać jedną z osób wymienionych na rozwijanej liście odbiorców (ale nie kilka jednocześnie). Skrypt taki jest szczególnie przydatny wtedy, gdy w małej firmie czy instytucji pracuje kilka osób - potencjalnych odbiorców korespondencji. W większych firmach należy raczej stosować bardziej profesjonalne narzędzia.

Redakcja PCkuriera

Adresat:
Twoje imię i nazwisko:
Twój E-mail:
Priorytet:
Temat listu:
Treść listu:

Skopiuj przykładowy kod i zmień listę adresów

<FORM NAME="mailer" METHOD="post" ACTION="" ENCTYPE="text/plain" onSubmit="(document.mailer.action += mailtoandsubject)">
<TABLE BORDER=0>
<TR VALIGN="top">
<TD>Adresat:</TD>
<TD><SELECT NAME="mailtoperson" onChange="msg(this.form)">
<OPTION VALUE="">Wybierz adresata listu
<OPTION VALUE="michal.adamczyk@pckurier.pl">Michał Adamczyk - redaktor (Wydarzenia)
<OPTION VALUE="cezary.czerwinski@pckurier.pl">Cezary Czerwiński - redaktor (Oprogramowanie)
<OPTION VALUE="krzysztof.golachowski@pckurier.pl">Krzysztof Golachowski - redaktor (Sieci i Telekomunikacja)
<OPTION VALUE="michal.setlak@pckurier.pl">Michał Setlak - redaktor (Sprzęt)
<OPTION VALUE="pawel.wimmer@pckurier.pl">Paweł Wimmer - redaktor (Internet)
</SELECT></TD>
</TR>
<TR VALIGN="top">
<TD>Twoje imię i nazwisko:</TD>
<TD><INPUT TYPE="text" SIZE=45 NAME="name" onChange="msg(this.form)"></TD>
</TR>
<TR VALIGN="top">
<TD>Twój E-mail:</TD>
<TD><INPUT TYPE="text" SIZE=45 NAME="email" onChange="msg(this.form)"></TD>
</TR>
<TR VALIGN="top">
<TD>Priorytet:</TD>
<TD>
<SELECT NAME="priority" onChange="msg(this.form)">
<OPTION VALUE="Normal">Normalny
<OPTION VALUE="Urgent">Pilne
<OPTION VALUE="No Reply Needed">Odpowiedź nie jest konieczna
</SELECT></TD>
</TR>
<TR VALIGN="top">
<TD>Temat listu:</TD>
<TD><INPUT TYPE="text" SIZE=45 NAME="subject" onChange="msg(this.form)"></TD>
</TR>
<TR VALIGN="top">
<TD>Treść listu:</TD>
<TD><TEXTAREA NAME="message" COLS=45 ROWS=7 WRAP="virtual" OnChange="msg(this.form)"></TEXTAREA></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="submit" VALUE="Wyślij list">
<INPUT TYPE="reset" VALUE="Usuń informacje"></TD>
</TR>
</TABLE>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
function msg() {
document.mailer.action = "mailto:"
mailtoandsubject = ((document.mailer.mailtoperson.options[document.mailer.mailtoperson.selectedIndex].value) + '?subject=' + document.mailer.subject.value);
}
</SCRIPT>


Wiadomość w pasku statusu 1

Informacja przewija się w pasku statusu przeglądarki (na dole).

Skopiuj przykładowy kod

W ramach HEAD

<script language="JavaScript">
<!-- W3e JAVA Script Preset. ScrollText
function ScrollText(seed)
{
var msg = " Informujemy uprzejmie, że wprowadziliśmy do sprzedaży trzy świetne produkty";
var out = " ";
var c   = 1;
if (seed > 100)
{
seed--;
var cmd="ScrollText(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0)
{
for (c=0 ; c < seed ; c++)
{
out+=" ";
}
out+=msg;
seed--;
var cmd="ScrollText(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0)
{
if (-seed < msg.length)
{
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="ScrollText(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else
{
window.status=" ";
timerTwo=window.setTimeout("ScrollText(100)",75);
}
}
}
//-->
</script>


Wiadomość w pasku statusu 2

Skrypt wyświetla kilka kolejnych wierszy z komunikatami w pasku statusu

Skopiuj przykładowy kod.

<!--

   http://www.geocities.com/CollegePark/Quad/3400
   http://javacentral.home.ml.org
   http://www.page4life.nl/javacentral/index.htm

   (c) 1997 Semian Software, Script by: Michiel steendam
   Modify and use anyway you want, just mention this site.
   -->

  <SCRIPT>
  <!-- Hide from old browsers

  // All you have to do is put another text in the variable message.
  // Don't forget to break all lines with a ^
  // When you do not place a ^ at the end of all the message, the
  // message will not repeat

  message     = "This is another example of a simple typewriter example^" +
                "You can enter an unlimited number of lines here^" +
                "Please, take a look at the code for a more detailed description^" +
                "Created by Michiel Steendam^" +
                "This typewriter will repeat now ...^" +
                "^"
  scrollSpeed = 20
  lineDelay   = 1500

  // Do not change the text below //

  txt         = ""

  function scrollText(pos) {
    if (message.charAt(pos) != '^') {
      txt    = txt + message.charAt(pos)
      status = txt
      pauze  = scrollSpeed
    }
    else {
      pauze = lineDelay
      txt   = ""
      if (pos == message.length-1) pos = -1
    }
    pos++
    setTimeout("scrollText('"+pos+"')",pauze)
  }

  // Unhide -->
scrollText(0)
  </SCRIPT>


Wiadomość w pasku statusu 3

Ten długi i skomplikowany skrypt wyświetla w efektowny sposób kilka kolejnych komunikatów w pasku statusu przeglądarki, składając je ze zbliżających się do siebie liter.

Skopiuj przykładowy kod.

<SCRIPT LANGUAGE="JavaScript">
<!--// Copyright 1996 - Tomer and Yehuda Shiran
// This example will appear in our forthcoming book on JavaScript.
// Feel free to "steal" this code provided that you leave this notice as is.
// Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/
// For more information contact Tomer or Yehuda Shiran <yshiran@iil.intel.com>

// set speed of banner (pause in milliseconds between addition of new character)
var speed = 10

// decrease value to increase speed (must be positive)
// set pause between completion of message and beginning of following message
var pause = 1500

// increase value to increase pause
// set initial values
var timerID = null
var bannerRunning = false

// create array
var ar = new Array()

// assign the strings to the array's elements
ar[0] = "Witaj na stronie ze skryptami"
ar[1] = "Mam nadzieję, żę skrypt Ci się podoba"
ar[2] = "To wprawdzie bajer, ale sympatyczny"
ar[3] = "Treść wierszy możesz samodzielnie zredagować"

// assign index of current message
var message = 0

// empty string initialization
var state = ""

// no value is currently being displayed
clearState()

// stop the banner if it is currently running
function stopBanner() {
    // if banner is currently running
    if (bannerRunning)
    // stop the banner
    clearTimeout(timerID)
    // timer is now stopped
    timerRunning = false
}

// start the banner
function startBanner() {
    // make sure the banner is stopped
    stopBanner()
    // start the banner from the current position
    showBanner()
}

// assign state a string of "0" characters of the length of the current message
function clearState() {
    // initialize to empty string
    state = ""
    // create string of same length containing 0 digits
    for (var i = 0; i < ar[message].length; ++i) {
        state += "0"
    }
}

// display the current message
function showBanner() {
    // if the current message is done
    if (getString()) {
        // increment message
        message++
        // if new message is out of range wrap around to first message
    if (ar.length <= message)
        message = 0
        // new message is first displayed as empty string
        clearState()
        // display next character after pause milliseconds
        timerID = setTimeout("showBanner()", pause)
    }
    else {
        // initialize to empty string
        var str = ""
        // built string to be displayed (only character selected thus far are displayed)
    for (var j = 0; j < state.length; ++j) {
        str += (state.charAt(j) == "1") ? ar[message].charAt(j) : "     "
    }
    // partial string is placed in status bar
    window.status = str
    // add another character after speed milliseconds
    timerID = setTimeout("showBanner()", speed)
    }
}

function getString() {
    // set variable to true (it will stay true unless proven otherwise)
    var full = true
    // set variable to false if a free space is found in string (a not-displayed char)
    for (var j = 0; j < state.length; ++j) {
        // if character at index j of current message has not been placed in displayed string
        if (state.charAt(j) == 0)
        full = false
    }
    // return true immediately if no space found (avoid infinitive loop later)
    if (full) return true
    // search for random until free space found (braoken up via break statement)
    while (1) {
        // a random number (between 0 and state.length - 1 == message.length - 1)
        var num = getRandom(ar[message].length)
        // if free space found break infinitive loop
    if (state.charAt(num) == "0")
        break
    }
    // replace the 0 character with 1 character at place found
    state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
    // return false because the string was not full (free space was found)
    return false
}

function getRandom(max) {
    // create instance of current date
    var now = new Date()
    // create a random number (good generator)
    var num = now.getTime() * now.getSeconds() * Math.random()
    // cut random number to value between 0 and max - 1, inclusive
    return num % max
}
startBanner()
// -->
</SCRIPT>


Wiadomość w pasku statusu 4

Informacja miga w pasku statusu przeglądarki (na dole).

var speed = 500; oznacza liczbę milisekund między powtórzeniami - im wyższa wartość, tym dłuższe przerwy.

Skopiuj przykładowy kod

W ramach HEAD

<script language="JavaScript">
<!--
/* MjM'S JAVA CODENAME = FLASH
   This JavaScript Code was written by MjM for Hyperchat UK
   I am not responsible for any damage caused by my code.
   This code can be modified as long as the Author's Name is still attached.
   Email : MjM@hyperchat.co.uk
   Š Copyright 1996
*/
var yourwords = "Dziękuję za odwiedzenie mojej strony!";
var speed = 500;
var control = 1;
function flash()
{
  if (control == 1)
    {
      window.status=yourwords;
      control=0;
    }
  else
    {
      window.status="";
      control=1;
    }
  setTimeout("flash();",speed);
}
// -->
</script>

W ramach BODY

Definicję BODY należy uzupełnić poleceniem ładowania onload

<body onload="flash();">


Wiadomość w pasku statusu 5

Jednowierszowy komunikat w pasku statusu jest składany ze zbliżających się do siebie liter.

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
<!--
// Following COPYRIGHT Š1997  Dennis & Family.  All Rights Reserved.
function snapIn(jumpSpaces,position)
{ var msg = "Welcome to My Homepage!"; var out = ""; for (var i=0; i<position; i++) { out += msg.charAt(i) } for (i=1;i<jumpSpaces;i++) { out += " " } out += msg.charAt(position); window.status = out;
if (jumpSpaces <= 1) { position++; if (msg.charAt(position) == ' ') { position++ } jumpSpaces = 100-position }
else if (jumpSpaces >  3) { jumpSpaces *= .09 } else { jumpSpaces-- } if (position != msg.length) { var cmd = "snapIn(" + jumpSpaces + "," + position + ")"; window.setTimeout(cmd,10); } return true }
//-->
</SCRIPT>

W ramach BODY

Definicję BODY należy uzupełnić poleceniem ładowania onload

<body onload="snapIn(50,0)">


Wiadomość w pasku statusu 6

Autorem skryptu jest Pior Zazakowny.

Skopiuj przykładowy kod

W ramach BODY

<SCRIPT LANGUAGE="JavaScript">
<!--
var scrlStr="To jest mój przykład. :))"
var width=100;
var strLen=scrlStr.length;
var pos=1-width; function type()
{ var type = "";
 pos++;
 if(pos==strLen) pos=1-width;
 if(pos<0){ for(var i=1;
i<=Math.abs(pos);
i++) type=type+"";
 type=type+scrlStr.substring(0,width-i+1);
 } else type=type+scrlStr.substring(pos,pos+width);
 window.status=type;
 setTimeout("type()",25);
 }
//-->
</SCRIPT>

Definicję BODY należy uzupełnić poleceniem ładowania onload

<body onload="type(); return true">


Minęło nn dni

Skopiuj przykładowy kod.

<script>
<!--
/*
Count up from any date script-
By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" dni"
document.write("Witryna Lupusa istnieje od 24.09.1995, czyli "+difference+"!")
}
//enter the count up date using the format year/month/day
countup(1995,09,24)
//-->
</script>


Muzyczka ciągle gra

Skrypt może być przydatny dla osób, które opatrują swoją witrynę tłem muzycznym, ale nie chcą, aby zmiana strony w ramach witryny powodowała przerwy w odtwarzaniu. Skrypt uruchamia po prostu małe okienko, w którym definiujemy muzykę (np. BGSOUND lub EMBED). W poniższym przykładzie zostało zastosowane polecenie BGSOUND dla IE.

Innym rozwiązaniem, stosowanym w serwisach z ramkami, jest przywiązanie muzyki do nawigacyjnej ramki, która nie znika z ekranu podczas przeglądania stron witryny.

Skopiuj poniższy kod

<script language="Javascript">
<!--
function loadToolbar(){
window.open('muztlo.htm','MMB','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=150,height=50');
}
// -->
</script>

W definicji BODY należy dodać onLoad="loadToolbar()", np.

<BODY onLoad="loadToolbar()">


Okienko pojawia się i znika

Skrypt pozwala wyświetlić na pewien okres czasu małe okienko, które samo znika. W tego rodzaju okienku można zaprezentować jakąś krótką wiadomość dla czytelnika strony.

Skopiuj przykładowy kod

<!-- Begin Pop Up Window -->
<script language="JavaScript">
config='toolbar=no,location=no,directories=no,status=no,menubar=no,width=200,height=150'
config += 'scrollbars=no,resizable=no'
pop = window.open ("","pop",config)

pop.document.write('<script language="javascript">');
pop.document.write('setTimeout(');
pop.document.write('"self.close()');
pop.document.write(';",7000)');
pop.document.write('</');
pop.document.write('script>');
pop.document.write('<body bgcolor=#808000>');
pop.document.write('<center><b><h2>Witaj</h2></b></center>');
pop.document.write('<center><b><h3><font color="#FFFFFF">Dzisiaj są imieniny Eleonory</font></h3></b></center>');
pop.document.write('<center><b><h5>okienko zamknie się za chwilę samo...</h5></b></center>');
pop.document.write('</body>');
</script>
<!-- End Up Window -->


Wprowadzenie

W tej części kursu prezentujemy garść przydatnych skryptów, które mogą nieco ubarwić wygląd lub usprawnić działanie naszych stron. Skrypty zostały zaczerpnięte z publicznych, powszechnie dostępnych źródeł - niektóre skrypty były anonimowe, kod innych został opatrzony informacjami o autorze.

Skryptów napisano już tysiące - wystarczy przyjrzeć się zawartości takich serwisów, jak Gamelan, Magazyn JavaScripts, JavaGoodies, JavaScript Source czy JavaScript Planet. Problem jednak w tym, że znakomita większość skryptów w zasadzie służy doraźnym potrzebom ich autorów i bardzo trudno jest znaleźć coś naprawdę atrakcyjnego. Zresztą różne osoby mają odmienne potrzeby, więc jednym spodobają się skrypty z "bajerami", zaś innych będą one tylko denerwować.

Nastepnym wielkim problemem jest kompatybilność skryptów. Jeśli autor pisał go i testował na MSIE, to skrypt może źle pracować w Netscape i na odwrót. Inna wschodząca gwiazda wśród przeglądarek, Opera, ma problemy ze stronami dynamicznie tworzonymi/modyfikowanymi przez JavaScript.

Zaprezentowana tutaj mała kolekcja zawiera przede wszystkim, choć nie wyłącznie, skrypty przydatne z punktu widzenia wartości informacyjnej strony czy nawigacji. Kolekcja będzie stale rozwijana.

Powrót do strony głównej kursu


Drukowanie strony

Skrypt pozwala wydrukować stronę. Wprawdzie funkcja drukowania jest bezpośrednio dostępna w przeglądarce, ale zawsze można zastosować urozmaicić stronę obrazkiem drukarki, uruchamiającym tę czynność. Jest to nawet wygodniejsze w przypadku drukowania ramki!

Skrypt działa na pewno w Navigatorze 4.x, a także w Internet Explorerze 5 beta 2, ale (chyba) nie w IE4.

Skopiuj przykładowy kod

<script>
<!--
function doit(){
if (!window.print){
alert("Musisz mieć NS4.x lub IE5,\naby użyć przycisku drukowania!")
return
}
window.print()
}
//-->
</script>


Panel sterujący z adresami

Skrypt powoduje wyświetlenie oddzielnego okienka z menu. Kliknięcie na adersie powoduje wczytanie go do głównego okna przeglądarki.

Przykład działania:

Skopiuj przykładowy kod

W ramach HEAD

<script>
<!--
/*Credit: Website Abstraction (www.wsabstract.com More scripts here*/
var win3=window.open("remote2.htm","","width=300,height=30,resizable")
win3.creator=self
//-->
</script>

Utwórz oddzielną stronę dla panelu sterującego i wstaw w niej przykładowy kod:

<script>
<!--
function gogo()
{
creator.location=document.combo.go.options[document.combo.go.selectedIndex].value
}
//-->
</script>

<form name="combo">
  <p><select name="go" size="1" onChange="gogo()">
    <option selected value="http://www.pckurier.pl">PCkurier</option>
    <option value="http://www.enter.pl">Enter</option>
    <option value="http://www.gambler.com.pl">Gambler</option>
    <option value="http://www.chip.pl">Chip</option>
    <option value="http://www.pcworld.com.pl">PC World Komputer</option>
  </select> <input type="button" value="Skocz" onClick="gogo()"> <input type="button"
  value="Zamknij" onClick="window.close()"> </p>
</form>


Oto jakaś tam strona


Rozwijane menu bez przycisku

Skrypt pozwala utworzyć rozwijanę listę z adresami, aktywizowanych w momencie wybrania pozycji, bez konieczności klikania na przycisku Go, Skocz, Idź itp. Strona jest wczytywana "na wierzch".

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
function selecturl(s) {
    var gourl = s.options[s.selectedIndex].value;	window.top.location.href = gourl;
}
</SCRIPT>

W ramach BODY

<FORM>
<SELECT NAME="urljump" OnChange="selecturl(this)">
    <OPTION VALUE="none">Wybierz adres</OPTION>
    <OPTION VALUE="http://www.corel.com">Corel Corporation</OPTION>
    <OPTION VALUE="http://www.microsoft.com">Microsoft Corporation</OPTION>
    <OPTION VALUE="http://www.netscape.com">Netscape Corporation</OPTION>
</SELECT>
</FORM>


Rozwijane menu w ramce

Ten pomysłowy skrypt rozwiązuje problem, o który często pytają webmasterzy tworzący strony z ramkami. Chodzi o to, aby odsyłacz w menu rozwijanym w jednej ramce przywoływał inną stronę do drugiej ramki. Pokażmy to na przykładzie:

Kliknij tutaj

Skrypt pokazuje przykład, w którym lewa ramka zawiera rozwijane menu, a w prawej ukazują się dokumenty. Skrypt można jednak przykroić do innego układu - proszę zwrócić uwagę na fragment parent.right.location.href. Right jest nazwą (name) prawej ramki.

Skopiuj przykładowy kod

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available online from -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function leapto(form) {
var myindex=form.dest.selectedIndex
parent.right.location.href=(form.dest.options[myindex].value);
}
// End -->
</SCRIPT>

W ramach BODY

<FORM NAME="myform">
<SELECT NAME="dest" SIZE=1>
<OPTION SELECTED VALUE="a.htm">AAAAA
<OPTION VALUE="b.htm">BBBBBB
<OPTION VALUE="c.htm">CCCCCC
<OPTION VALUE="d.htm">DDDDDD
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Go" onClick="leapto(this.form)">
</FORM>


Przewijane okno

Po wejściu na daną stronę skrypt wyświetla oddzielne okienko z tekstem. Skrypt można wykorzystać na przykład do prezentacji oferty firmy, najnowszych wiadomości itp. Fragment skryptu setInterval("scrollwindow()",xx) reguluje szybkość przewijania.

Skrypt wymaga Navigatora 4.x lub Internet Explorera 4.

Skopiuj przykładowy kod

Na stronie głównej

<script language="JavaScript1.2">
<!--
window.open('scrolprz.htm', 'Wiadomości', 'toolbar,menubar,scrollbars,resizable,height=300,width=300');
//-->
</script>

Na stronie wyświetlanego okienka

<script language="JavaScript1.2">

/*
Advanced window scroller script-
By Website Abstraction (www.wsabstract.com)
Over 200+ free JavaScripts here!
*/

var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",50)
}
window.onload=initialize
</script>

Poniżej skryptu umieść przewijaną treść. Na końcu dodaj trochę przestrzeni, np. za pomocą kilku-kilkunastu poleceń <br>


Ochrona bezpiecznym hasłem

Ochrona bezpiecznym hasłem 2

Autorem skryptu jest Dawid Sawczuk. Skrypt jest podobny do poprzedniego "bezpiecznego" skryptu, gdyż hasłem jest w nim nazwa strony. Także i tutaj należy zwrócić uwagę na ciąg location.href= ""user + ".htm";. Jeśli utajniona strona ma rozszerzenie .htm, pozostawiamy .htm. Jeśli .html, musimy zmienić rozszerzenie w tej części skryptu. Użytkownik podaje samą tylko nazwę pliku, bez rozszerzenia, które jest automatycznie dodawane do skryptu. Zawartość skryptu jest umieszczana w ramach BODY.

Przykład (hasło brzmi secur2b):

Skopiuj przykładowy kod

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
function haslo() {
var user= prompt('Podaj hasło',"");
          if (user == null )	alert('Rezygnujesz?')
                  else
                  {
                         location.href= ""+user+".htm";
        }
}
// end hide -->
</SCRIPT>

<a onClick="haslo()"><img src="cos.gif" width="63" height="61" style="cursor:hand" alt="Jakiś tam odsyłacz"></a>


-

 Jakiś tam odsyłacz


Jesteś tutaj już ...

Jesteś tutaj już przez:

sekund.

Nie trzeba tłumaczyć.

Skopiuj poniższy kod

<body onLoad="window.setTimeout('getSecs()',1)">

<script>

//       This script is written by Patrick Meirmans
//       If you want to use it, send me an e-mail at mijter@dds.nl
//       and be sure to include your URL, I'ld like to see how you used it
//       If you have mailed me you are free to change this script
//       anyway you like
//       by the way, my homepage is at:
//       http://www.geocities.com/Nashville/2956/
//       You might want to take a look at it.

startday = new Date();
clockStart = startday.getTime();
function initStopwatch()
{
 var myTime = new Date();
        var timeNow = myTime.getTime();
        var timeDiff = timeNow - clockStart;
        this.diffSecs = timeDiff/1000;
        return(this.diffSecs);
}
function getSecs()
{
        var mySecs = initStopwatch();
        var mySecs1 = ""+mySecs;
        mySecs1= mySecs1.substring(0,mySecs1.indexOf("."));
        document.tijd.hiero.value=mySecs1
        window.setTimeout('getSecs()',1000);
        if (mySecs1==60) {alert("jesteś tutaj już 60 sekund ...") }
        if (mySecs1==333) {alert("jesteś tutaj już 333 sekundy...") }
        if (mySecs1==666) {alert("jesteś tutaj już 666 sekund ...") }
        if (mySecs1==999) {alert("Ciągle jesteś zainteresowany tą stroną; to już 999 sekund...") }
}
//       To get rid of the alerts, you can just delete the three lines above
//       or just one or two of them
//       Change the 333, 666 and 999 to whatever you like
//       For the messages, just change the text between the " "
//       to whatever you like,
//       Have fun!!

</script>
</P>
<P><form name="tijd"><P>
<center>Jesteś tutaj już przez:
<br>
<input size=4 name=hiero>
<br>sekund.
</form>
</center>


Seria komunikatów

Skopiuj przykładowy kod

<FORM>
<INPUT TYPE="button" Value=" Przeczytaj te informacje "
onClick="alert('To jest pierwsza informacja');alert('To jest druga informacja');alert('To jest trzecia informacja')")>
</FORM>


Adresowy "pokaz slajdów"

Skrypt tworzy okienko z opisami, a kliknięcie na przycisku uruchamia skok do strony. Adresów i opisów może być znacznie więcej. Fragment setTimeout("slidemessage()",xxxx) określa, w milisekundach, czas pozostawiania pojedynczego opisu na ekranie. Liczbę wierszy w textarea musimy dostosować do wielkości opisów. Nie polecamy tego jako standardowej metody podawania odsyłaczy, ale warto zastosować tę dodatkową metodę np. do anonsowania nowości.

Nasze propozycje

Skopiuj przykładowy kod

<form name="slideshow">
<h3>Nasze propozycje</h3>
<textarea rows="5" name="S1" cols="30" wrap="virtual"></textarea><br>
<br><input type="button" value="Unieś mnie tam koniecznie!" name="B1" onClick="window.location=messagelinks[curmsg]"></p>
</form>

<script>

/*
Message Slideshow-
By Website Abstraction (www.wsabstract.com)
Over 200+ free JavaScripts here
*/

var curmsg=-1
var messages=new Array()
messages[0]="PCkurier - dwutygodnik komputerowy dla tych, którzy chcą wiedzieć więcej"
messages[1]="Enter - miesięcznik komputerowy z najlepszym działem technologicznym w Polsce."
messages[2]="Gambler - miesięcznik dla giercmanów, patronujący słynnej Gambleriadzie"
//add more messages as desired

var messagelinks=new Array()
messagelinks[0]="http://www.pckurier.pl"
messagelinks[1]="http://www.enter.pl"
messagelinks[2]="http://www.gambler.com.pl"
//add more links as indicated by the number of messages

function slidemessage(){
if (curmsg<messages.length-1)
curmsg++
else
curmsg=0
document.slideshow[0].value=messages[curmsg]
setTimeout("slidemessage()",4000)
}
slidemessage()
</script>


Źródło dokumentu

Prosty i użyteczny skrypt pozwala czytelnikowi strony szybko wczytać źródło oglądanej strony. Skrypt może się przydać tym webmasterom, którzy z jakichś powodów chcą pokazać technikę tworzenia strony. W Navigatorze jest uruchamiane okienko Source, natomiast w Internet Explorerze - Notatnik.

Skopiuj przykładowy kod strony roboczej

<FORM>
<INPUT TYPE=button NAME="view" VALUE="kod źródłowy strony "
OnClick='window.location="view-source:" +window.location.href'>
</FORM>


Zegar w pasku statusu

Skrypt pokazuje bieżący czas w pasku statusu przeglądarki

Skopiuj poniższy kod

W ramach HEAD

<!-- Scripts-->
<script Language="JavaScript">
<!-- hide// Navigation - Stop
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
//document.clock.face.value = timeValue;
// you could replace the above with this
// and have a clock on the status bar:
window.status = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock () {
// Make sure the clock is stopped
stopclock();
showtime();
}
// un hide --->
</script>

BODY

<BODY ONLOAD="startclock()">


Strona docelowa


Data i czas

Skopiuj poniższy kod

W ramach HEAD

<!-- Scripts-->
<script Language="JavaScript">
<!-- Helpers for JSI page...
// Navigation - Start
function goback(){
alert("Good Bye!");
history.go(-1);
}
function gettheDate() {
Todays = new Date();
TheDate = "" + (Todays.getMonth()+ 1) +" / "+ Todays.getDate() + " / " +
Todays.getYear()
document.clock.date.value = TheDate;
}
var timerID = null;
var timerRunning = false;
function stopclock (){
 if(timerRunning)
  clearTimeout(timerID);
 timerRunning = false;
}
function startclock () {
 // Make sure the clock is stopped
 stopclock();
    gettheDate()
    showtime();
}
function showtime () {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds()
    var timeValue = "" + ((hours >12) ? hours -12 :hours)
    timeValue += ((minutes < 10) ? ":0" : ":") + minutes
 timeValue += ((seconds < 10) ? ":0" : ":") + seconds
 timeValue += (hours >= 12) ? " P.M." : " A.M."
    document.clock.face.value = timeValue;
    timerID = setTimeout("showtime()",1000);
    timerRunning = true;
}
// end Helpers -->
</script>

W ramach BODY

<BODY ONLOAD="startclock()" bgcolor="#FFFFFF">

<table>
<tr>
<td>
<form name="clock" onSubmit="0">
<div align=right>
<input type="text" name="date" size=12 value="">
<input type="text" name="face" size=12 value="">
</div></form>
</td>
</tr>
</table>


Uniwersalny kalendarz

N | P | W | Ś | C | P | S

Skopiuj przykładowy kod

W ramach HEAD

<!--
This Java Script is free to the domain. All I ask is you send me an
email to ddelong@csci.csusb.edu to let me know that you will be using it.
This message must be included with the script if you copy it.
-->
<script language="JavaScript">
<!-- for sucky browsers

Months = new Array(12);
Months[0] = "Styczeń";
Months[1] = "Luty";
Months[2] = "Marzec";
Months[3] = "Kwiecień";
Months[4] = "Maj";
Months[5] = "Czerwiec";
Months[6] = "Lipiec";
Months[7] = "Sierpień";
Months[8] = "Wrzesień";
Months[9] = "Październik";
Months[10] = "Listopad";
Months[11] = "Grudzień";

function PadSpaces(TheString)
{
    var Spaces = "             ";
    len = Math.round((9 - TheString.length)/2);

    return Spaces.substring(0,len) + TheString;
}

function NumLeapYears(StartYear, EndYear)
{
     var LeapYears, i;

     if (EndYear >= StartYear){
         for(LeapYears = 0; StartYear <= EndYear; StartYear++)
         if (IsLeapYear(StartYear)) LeapYears++;
    }else{
    for(LeapYears = 0; EndYear <= StartYear; EndYear++)
         if (IsLeapYear(EndYear)) LeapYears++;
    }
     return LeapYears;
}

function IsLeapYear(Year)
{
    if(Math.round(Year/4) == Year/4){
        if(Math.round(Year/100) == Year/100){
            if(Math.round(Year/400) == Year/400)
                return true;
            else return false;
        }else return true;
    }
    return false;
}

function Trim(TheString)
{
    var len;

    len = TheString.length;
     while(TheString.substring(0,1) == " "){ //trim left
         TheString = TheString.substring(1, len);
          len = TheString.length;
    }

     while(TheString.substring(len-1, len) == " "){ //trim right
         TheString = TheString.substring(0, len-1);
          len = TheString.length;
     }
     return TheString;
}

function DetermineMonthIdx()
{
    var i, month, month_s, len;

    month = Trim(document.calform.elements[4].value);
    len = month.length;

    for( i = 0; i <12; i++){
            month_s = Months[i].substring(0,len);
        if (month_s.toUpperCase() == month.toUpperCase())
                return (i);
      }
      return -1;
}

function FindNewYearStartingDay(Year)
{
     var LeapYears, Years, Day;

     LeapYears = NumLeapYears(1995, Year);

     if  (Year >=1995)
         Years = (Year -1995)+LeapYears;
     else	Years = (Year -1995)-LeapYears;

     if  (Year >=1995)
        Day = Math.round(((Years/7 - Math.floor(Years/7))*7)+.1);
     else	Day = Math.round(((Years/7 -  Math.ceil(Years/7))*7)-.1);

    if (Year >=1995){
         if(IsLeapYear(Year)) Day--;
     }else Day += 7;

     if(Day < 0) Day = 6;
     if(Day > 6) Day = 0;
     return Day;
}

function FindNumDaysInMonth(Year, Month)
{
     if(Month == 1){
           if(IsLeapYear(Year)) return 29;
           else return 28;
     }else{
           if(Month >6) Month++;
           if(Month/2 == Math.round(Month/2))  return 31;
     }
 return 30;
}

function FindMonthStartDay(NewYearDay, Year, Month)
{
      var MonthStartDay;

      AddArray = new Array(12);

      AddArray[0]=0;AddArray[1]=3;AddArray[2]=3;AddArray[3]=6;
    AddArray[4]=1;AddArray[5]=4;AddArray[6]=6;AddArray[7]=2;
    AddArray[8]=5;AddArray[9]=0;AddArray[10]=3;AddArray[11]=5;

      MonthStartDay = NewYearDay + AddArray[Month];
      if(IsLeapYear(Year)  && (Month ) > 1) MonthStartDay ++;

      if (MonthStartDay > 6) MonthStartDay -= 7;

      return MonthStartDay;
}

function  FillCalendar()
{
      var Year, Month, Midx, NewYearDay, MonthStartDay;
    var NumDaysInMonth, i, t;

      Year = parseFloat(document.calform.elements[1].value);
      Month = document.calform.elements[4].value;

      Midx  =  DetermineMonthIdx();
      if (Midx == -1){
           alert ("Can't recognize that month");
           return;
      }

      NewYearDay = FindNewYearStartingDay(Year);
      MonthStartDay = FindMonthStartDay(NewYearDay, Year,  Midx);
      NumDaysInMonth = FindNumDaysInMonth(Year, Midx);

      for(i = 6;  i < 43;  i++){
        t = i-5-MonthStartDay;
        if ( t >= 1  &&  t <= NumDaysInMonth)
            document.calform.elements[i].value =t;
        else document.calform.elements[i].value = "";
      }
}

function IncDecYear(val)
{
    var valNum = parseInt(val);
    var valNum2 = parseInt(document.calform.elements[1].value)
    document.calform.elements[1].value = valNum2 + valNum;

    FillCalendar()
}

function IncDecMonth(val)
{
    var valNum = parseInt(val);
      var Midx  =  DetermineMonthIdx();

    Midx += valNum;
    if(Midx > 11) Midx = 0;
    if(Midx < 0)  Midx = 11;

    document.calform.elements[4].value = PadSpaces(Months[Midx]);

    FillCalendar()
}

// -->
</script>

W ramach BODY

<table border=1 bgcolor="#000000" cellpadding=1 cellspacing=1><tr><td
align=center>
<table border=0  cellpadding=0 cellspacing=0>
<form name="calform">
<tr>
    <td align=center cellpadding=0 cellspacing=0 bgcolor="#000000"><input
type=button value="<<" onClick="IncDecYear(-1)"></td>
    <th cellpadding=0 cellspacing=0 bgcolor="#aaaaaa" colspan=5
align=center><input size=4 type=text value="1993"></th>
    <td align=center cellpadding=0 cellspacing=0 bgcolor="#000000"><input
type=button value=">>" onClick="IncDecYear(1)"></td>
</tr>
<tr>
    <td align=center bgcolor="#000000"><input type=button value="<<"
onClick="IncDecMonth(-1)"></td>
    <th bgcolor="#aaaaaa" colspan=5 align=center><input size=9 type=text
value=" January "></th>
    <td align=center bgcolor="#000000"><input type=button value=">>"
onClick="IncDecMonth(1)"></td>
</tr>
<tr>
    <th  bgcolor="#ffcccc">N</td>
    <th  bgcolor="#ccccff">P</td>
    <th  bgcolor="#ccccff">W</td>
    <th  bgcolor="#ccccff">Ś</td>
    <th  bgcolor="#ccccff">C</td>
    <th  bgcolor="#ccccff">P</td>
    <th  bgcolor="#ccccff">S</td>
</tr>
<tr>
    <td  bgcolor="#ffcccc"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
</tr>
<tr>
    <td  bgcolor="#ffcccc"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
</tr>
<tr>
    <td  bgcolor="#ffcccc"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
</tr>
<tr>
    <td  bgcolor="#ffcccc"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
</tr>
<tr>
    <td  bgcolor="#ffcccc"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#ccccff" ><input type=text size=2></td>
</tr>
<tr>
    <td  bgcolor="#ffcccc"><input type=text size=2></td>
    <td  bgcolor="#ccccff"><input type=text size=2></td>
    <td  bgcolor="#aaaaaa" colspan=5><input type=text></td>
</tr>

</form>
</table>
</td></tr></table>

<script language="JavaScript">
<!--
//include this script segment if you want to set the calendar to today's date.
//this MUST come after the tabled form which contains the calendar

//set calendar to today's date
    myDate = new Date();
    var Month = parseInt(myDate.getMonth());

    document.calform.elements[1].value = 1900 + myDate.getYear();
    document.calform.elements[4].value = PadSpaces(Months[Month]);

    document.calform.elements[43].value = "Dziś jest: " +
        myDate.getDate() + " " + Months[Month].substring(0,3)
         + ", " + (1900 + myDate.getYear());

    FillCalendar();

// -->
</script>


Ostrzeżenie przed ramką

Skrypt jest niezmiernie przydatnym narzędziem dla osób tworzących serwisy z ramkami. Nierzadko się zdarza, że goście naszych stron docierają na nie nie poprzez stronę główną, ale poprzez wyniki poszukiwań prowadzonych za pomocą wyszukiwarek internetowych, np. Infoseek czy AltaVista. Wyszukiwarki takie indeksują strony w Internecie "jak leci", nie zwracając uwagi na to, czy jest to strona samoistna, czy też zawarta w jakiejś ramce. W efekcie zdarza nam się oglądać taką stronę poza właściwym dla niej kontekstem. Aby zapobiec takiej sytuacji, utworzono ten właśnie skrypt.

Proszę zauważyć, że wchodząc na stronę tego skryptu nie zauważyli Państwo niczego szczególnego, choć strona zawiera skrypt w treści. Polega to na tym, że ostrzeżenie uaktywnia się tylko wtedy, gdy strona zostanie otwarta nie w ramce, lecz w całym oknie przeglądarki. Proszę spróbować otworzyć tę ramkę w nowym oknie (pod prawym klawiszem myszki jest opcja Otwórz w nowym oknie lub Open Frame in new Window) - będzie tam widoczny komunikat Uwaga: to tylko ramka - idź do strony głównej. Kod skryptu jest umieszczony zaraz na początku części BODY.

Skopiuj przykładowy kod

<script language="javascript">
<!-- hide
if (self==parent){document.write('<font color=#ff000><b>Uwaga: to tylko ramka -
 idź do  <a href=skrypt.htm>strony głównej</a></b></font>
')};
<!-- end hide -->
</script>


Dni tygodnia

Dzięki temu skryptowi możemy powitać naszych czytelników automatycznie wyświetlanymi komunikatami, zależnymi od dnia tygodnia.

Skopiuj poniższy kod

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<center><b>")
now = new Date()
if (now.getDay() == 5)
document.write("Cudownie, już piątek!")

if (now.getDay() == 6)
document.write("Wreszcie upragniony weekend!")

if (now.getDay() == 0)
document.write("Ojej, weekend się powoli kończy!")

if (now.getDay() == 1)
document.write("Dzisiaj jest poniedziałek. To na pewno będzie udany tydzień!")

if (now.getDay() == 2)
document.write("Wtorek, poniedziałek już na szczęście za nami!")

if (now.getDay() == 3)
document.write("Środa, czy Twój tydzień jest również udany?")

if (now.getDay() == 4)
document.write("Czwartek, weekend już tuż tuż...")
document.write("</b></center>")

//-->
</SCRIPT>


Ucieczka z ramki

Niektórzy webmasterzy "ramkują" cudze strony, a więc dają do nich odsyłacze, kierując je do ramek w swoim serwisie. Przczyny są dwojakie. Po pierwsze, mogą chcieć stworzyć wrażenie, że cudza strona jest integralną częścią własnego serwisu. Po drugie, przez nieumiejętne użycie celu odsyłacza powodują wczytanie cudzej strony do ramki, a nie "na wierzch". Właściciele tak potraktowanych stron na ogół nie lubią tego rodzaju praktyk, więc mogą się zabezpieczyć przed nimi, wstawiając na swoje strony specjalny skrypt.

Przykład:

Kliknij tutaj. Po dwóch sekundach (2000 milisekund) wczytany do ramki dokument powinien się ukazać na całym ekranie.

Skopiuj poniższy kod i wstaw go na stronę, którą chcesz zabezpieczyć przed "framkowaniem".

<!-- frame buster - code by Gordon McComb -->
<script language="JavaScript" type="text/javascript">
    <!-- Hide script from older browsers
    setTimeout ("changePage()", 2000);

    function changePage() {
        if (self.parent.frames.length != 0)
            self.parent.location=document.location;
        }

    // end hiding contents -->
</script>


Uniwersalny odtwarzacz AVI

Jest to skrypt uruchamiający specyficzny dla przeglądarki sposób odtwarzania pliku AVI. Piotr Szczepanik utworzył go na bazie analogicznego skryptu dla dźwięku, dodając modyfikację dla polskojęzycznej wersji Netscape'a, czyli Sylaba Komunikator.

Skopiuj przykładowy kod

 <SCRIPT language="JavaScript">
 <!--
 // Autor: Piotr Szczepanik (modyfikacja kodu Magic Maker <maligui@mvillage.com>)
 // Email: piotrsz@exe.pl, http://www.pszczepanik.exe.pl
 // Jesli chcesz rozprowadzac ten skrypt, to zachowaj powyzsze informacje.
 // Skrypt ten umozliwia wstawienie animacji do przegladarek: IExplorer, NNavigator i SNawigator.
 if (navigator.appName == "Netscape") {
   document.write('<EMBED SRC="../multimed/nu.avi" AUTOSTART=TRUE LOOP=FALSE></EMBED>') }
  else if (navigator.appName == "Sylaba") {
   document.write('<EMBED SRC="../multimed/nu.avi" AUTOSTART=TRUE LOOP=FALSE></EMBED>') }
  else { if (navigator.appName == "Microsoft Internet Explorer")
   document.write('<IMG DYNSRC="../multimed/nu.avi" START="fileopen" LOOP="infinite">')
 }
 //-->
 </SCRIPT>


Proszę czekać...

Gdy nasz serwis zawiera duże strony, które długo się ładują, warto niekiedy zastosować skrypt, który informuje czytelnika, że strona jest ładowana. Na odrębnej stronie wstawiamy w ramach HEAD skrypt, który ukazuje się w momencie ładowania, po czym strona robocza jest zastępowana przez właściwą stronę. Skrypt ten możemy zastosować także wtedy, gdy wiemy, że łącza są marnej jakości i ładowanie trwa długo. Przedstawiony tutaj skrypt nie działa, niestety, w ramkach.

Przykład: skocz na stronę PCkuriera

Skopiuj przykładowy kod strony roboczej

W ramach HEAD

<SCRIPT LANGUAGE="JavaScript">
if(top.frames.length==0) {
      document.write("<B>PCkurier się ładuje... proszę czekać...</B>");
      window.clear;
 window.location.href="http://www.pckurier.pl";
  } else {
      document.write("<B><BR>Coś nie tak...</B>");
      top.frames[1].location.href="usterka.htm";
  }
</SCRIPT>


Ostrzeżenie

Poważne ostrzeżenie

No i nic się takiego nie stało! :-)

Skopiuj przykładowy kod

<SCRIPT LANGUAGE="JavaScript">
<!--
//modified by Coffeecup.com
function Info()
{if (!confirm("Wizyta na tej stronie może być bardzo niebezpieczna. Kliknij <OK>, jeżeli się nie boisz. Kliknij <Anuluj>, jeżeli nie chcesz ryzykować!"))
history.go(-1);return " "}
document.writeln(Info())
<!--End-->
</script>


Skok wstecz

Skrypt jest szczególnie przydatny dla osób redagujących poważniejsze dokumenty, np. naukowe. W pracach o charakterze akademickim stosuje się tzw. aparat naukowy, czyli obszerny zestaw różnego rodzaju przypisów, odsyłaczy, stopek itd. Gdy w jakimś miejscu w tekście odwołujemy się do przypisu na dole strony, dajemy do niego odsyłacz. Aby po przeczytaniu przypisu powrócić do głównego toku rozważań, czytelnik powinien kliknąć na przycisku Wstecz w przeglądarce. Możemy to ułatwić, wstawiając taki przycisk bezpośrednio przy przypisie.

Skopiuj poniższy kod

<form name="Historia">
     <input type="button" value="powrót" onClick="history.back()">
</form>


Zegarek

Skopiuj poniższy kod

<script language="javascript">
<!--W3e JAVAscript Preset
var timerID = null;
var timerRunning = false;
function stopclock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false;
}

function startclock()
{
    stopclock();
    showtime();
}

function showtime()
{
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
    timeValue  += ((minutes < 10) ? ":0" : ":") + minutes;
    timeValue  += ((seconds < 10) ? ":0" : ":") + seconds;
    timeValue  += (hours >= 12) ? " P.M." : " A.M.";
    document.clock.face.value = timeValue;
    timerID = setTimeout("showtime()",1000);
    timerRunning = true;
}
//-->
</script>

<form name="clock" onSubmit="0">
  <input type="text" name="face" size="24">
</form>

<script>startclock();</script>


Zegar z grafikami

Zwróć uwagę na położenie grafik na dysku! Grafiki możesz także tworzyć samodzielnie.

Skopiuj przykładowy kod, a także zestaw grafik.

W ramach HEAD

<script language="javascript1.1">
<!--
/*By George Chiang (WA's JavaScript tutorial)
http://www.geocities.com/SiliconValley/Vista/9892
Credit MUST stay intact for use*/
var dn
c1=new Image(); c1.src="gif/c1.gif"
c2=new Image(); c2.src="gif/c2.gif"
c3=new Image(); c3.src="gif/c3.gif"
c4=new Image(); c4.src="gif/c4.gif"
c5=new Image(); c5.src="gif/c5.gif"
c6=new Image(); c6.src="gif/c6.gif"
c7=new Image(); c7.src="gif/c7.gif"
c8=new Image(); c8.src="gif/c8.gif"
c9=new Image(); c9.src="gif/c9.gif"
c0=new Image(); c0.src="gif/c0.gif"
cb=new Image(); cb.src="gif/cb.gif"
cam=new Image(); cam.src="gif/cam.gif"
cpm=new Image(); cpm.src="gif/cpm.gif"
function extract(h,m,s,type){
if (!document.images)
return
if (h<=9){
document.images.a.src=cb.src
document.images.b.src=eval("c"+h+".src")
}
else {
document.images.a.src=eval("c"+Math.floor(h/10)+".src")
document.images.b.src=eval("c"+(h%10)+".src")
}
if (m<=9){
document.images.d.src=c0.src
document.images.e.src=eval("c"+m+".src")
}
else {
document.images.d.src=eval("c"+Math.floor(m/10)+".src")
document.images.e.src=eval("c"+(m%10)+".src")
}
if (s<=9){
document.g.src=c0.src
document.images.h.src=eval("c"+s+".src")
}
else {
document.images.g.src=eval("c"+Math.floor(s/10)+".src")
document.images.h.src=eval("c"+(s%10)+".src")
}
if (dn=="AM") document.j.src=cam.src
else document.images.j.src=cpm.src
}
function show3(){
if (!document.images)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
dn="AM"
if ((hours>=12)&&(minutes>=1)||(hours>=13)){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
extract(hours,minutes,seconds,dn)
setTimeout("show3()",1000)
}
//-->
</script>

W ramach BODY

<img src="gif/cb.gif" name="a">
<img src="gif/cb.gif" name="b">
<img src="gif/colon.gif" name="c">
<img src="gif/cb.gif" name="d">
<img src="gif/cb.gif" name="e">
<img src="gif/colon.gif" name="f">
<img src="gif/cb.gif" name="g">
<img src="gif/cb.gif" name="h">
<img src="gif/cam.gif" name="j">

W BODY dodaj informację

<BODY onLoad="show3()">


Zegar w rogu ekranu

Skopiuj poniższy kod (możesz manipulować położeniem i czcionką)

<span id="liveclock" style="position:absolute;left:0;top:0;">
</span>

<script language="JavaScript">
 <!--

/*Upper Corner Live clock script credit: Website Abstraction (www.wsabstract.com) More free scripts here!
*/
 function show5(){
if (!document.layers&&!document.all)
return
 var Digital=new Date()
 var hours=Digital.getHours()
 var minutes=Digital.getMinutes()
 var seconds=Digital.getSeconds()
 var dn="AM"
 if (hours>12){
 dn="PM"
 hours=hours-12
 }
 if (hours==0)
 hours=12
 if (minutes<=9)
 minutes="0"+minutes
 if (seconds<=9)
 seconds="0"+seconds
//change font size here to your desire
myclock="<font size='5' face='Arial' ><b><font size='1'>Bieżący czas:</font></br>"+hours+":"+minutes+":"
 +seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}
else if (document.all)
liveclock.innerHTML=myclock
setTimeout("show5()",1000)
 }
 //-->
 </script>

W BODY dodaj informację

<BODY onLoad="show5()">


Zostało xx dni

Odliczanie dni

Skrypt Henryka Gajewskiego przypomina, ile dni zostało do roku 2000. Pamiętaj jednak, że do końca wieku pozostało o 366 dni więcej, gdyż nowe tysiąclecie rozpoczyna się 1 stycznia 2001 roku! Należy zauważyć, że skrypt zlicza tylko całe dni (nie dodaje czasu z bieżącego dnia), co może być nieco mylące. Dokładniejszy jest skrypt "Odliczanie dni, godzin i minut" na następnej stronie.

W taki sam sposób można napisać

lub

Skopiuj kod pierwszego skryptu (nieco zmodyfikowany w stosunku do oryginału)

<SCRIPT LANGUAGE="JavaScript">
<!-- // (c) Henryk Gajewski
var urodz = new Date("January 1, 2000");
var now = new Date();
var ile = urodz.getTime() - now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni > 1)
   document.write("Do roku 2000 pozostało " + dni +" dni!")
else if (dni == 1)
     document.write("Tylko dwa dni pozostały do roku 2000!")
else if (dni == 0)
     document.write("Już jutro jest rok 2000!")
else
    document.write("1 stycznia roku 2000 - jak tam Twój komputer, koteczku?");
// -->
</SCRIPT>


Odliczanie dni

Skopiuj przykładowy kod.

<script>
<!--
/*
Count down until any date script-
By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

//change the text below to reflect your own,
var before="moich imienin!"
var current="Moje imieniny. Proszę o życzenia!"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d){
var today=new Date()
var todayy=today.getYear()
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var futurestring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)
if (difference==0)
document.write(current)
else if (difference>0)
document.write("Zostało "+difference+" dni do "+before)
}
//enter the count down date using the format year/month/day
countdown(2000,06,29)
//-->
</script>


Zostało xx dni

Odliczanie dni, godzin i minut

wersja zgodna z polską gramatyką oraz standardem HTML 4.0

Autor: Romuald Żyłła

Skrypt odlicza dokładnie liczbę dni, godzin i minut do wskazanej w
BigDay = new Date("January 1, 2000") daty.
Datę tę możemy oczywiście zmieniać, stosownie do naszych potrzeb
- należy ją podać w języku angielskim lub w postaci numerycznej
BigDay = new Date(2000,0,1)
Uwaga: jako numer miesiaca podaje sie liczbe o jeden mniej niz "powinno" byc

Skopiuj kod

W ramach HEAD

<SCRIPT type="text/javascript"><!-- // start hiding

//BigDay = new Date("January 1, 2000");
BigDay = new Date(2000,0,1);
msPerDay = 24 * 60 * 60 * 1000 ;
var id,pause=0,  position=0;

function showtime() {
today = new Date();
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
tdays = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
}

function Liczebnik( ile, rdzen, konc1, konc2, konc5 ) { //  Autor Romuald Zylla
var N0, N1, N2, R0;
  N0 = Math.floor( Math.abs( ile ) );  // funkcja ma sens dla liczb całkowitych
  N1 = N0 % 10;
  N2 = N0 % 100;
  R0 = konc1;
  if (N0 == 1)   R0 = konc1
    else if ((N2 > 4) && (N2 < 22))   R0 = konc5
        else if ((N1 > 1) && (N1 <= 4))   R0 = konc2
            else R0 = konc5;
  return rdzen + R0;
}

function imascroller() {
 // variables declaration
  var i, k;
  showtime();

 // Prosze zwrocic uwage na uzycie funkcji Liczebnik do generowania koncowek
  var msg= "   "+Liczebnik( daysLeft, "Został"," ","y ","o " )  +
    daysLeft+Liczebnik( daysLeft, " ","dzien, ","dni, ","dni, " ) +
    hrsLeft +Liczebnik( hrsLeft," godzin", "a","y","" ) +" i "+
    minsLeft+Liczebnik( minsLeft," minut",  "a ","y ","  " )+" do roku 2000!"+
    "                             ";
 // increase msg
  k=(150/msg.length)+1;
  for(i=0;i<=k;i++) msg+=" "+msg;
 // show it to the window

  document.forms[0].imascroller.value=msg.substring(position,position+300);
 // set new position
  if (position ++== 300) position = 0;
 // repeat at entered speed
  id = setTimeout( "imascroller()", 200 );
}
 //  End Hiding Here -->
</script>

Na poczštku w znaczniku BODY należy jeszcze dodać

<body onload="imascroller()">

W ciele strony należy dodać wywołanie okienka z tekstem

<form ID="form2" action=get>
<input type="text" name="imascroller" size="60" value="">
</form>
HTML 4 OK


Zostało xx dni

Odliczanie dni, godzin i minut

Skrypt odlicza dokładnie liczbę dni, godzin i minut do wskazanej w BigDay = new Date("January 1, 2000") daty. Datę tę możemy oczywiście zmieniać, stosownie do naszych potrzeb - należy ją podać w języku angielskim.

Skopiuj kod

W ramach HEAD

<SCRIPT LANGUAGE="JAVASCRIPT">
today = new Date();
BigDay = new Date("January 1, 2000")
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
tdays = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
var id,pause=0,position=0;
function imascroller() {
        // variables declaration
        var i,k,msg="Zostało " +daysLeft+" dni, "+hrsLeft+" godzin(y) i "+minsLeft+" minut(y) do roku 2000!                             ";

        // increase msg
        k=(150/msg.length)+1;
        for(i=0;i<=k;i++) msg+=" "+msg;
        // show it to the window

document.form2.imascroller.value=msg.substring(position,position+300);
        // set new position
        if(position++==300) position=0;
        // repeat at entered speed
        id=setTimeout("imascroller()",200); }
// -- End Hiding Here -->
</script>

W ramach BODY

<form name="form2">
<input type="text" name="imascroller" size="60" value="">
</form>
<script language=javascript1.1>
timerID = setTimeout("location.reload()",60000)
</script>
<script language=javascript>
timerID = setTimeout("history.go(0)",60000)
</script>

W BODY należy jeszcze dodać

<body onload="imascroller()">


Przykłady


Oto ramka wyj¶ciowa!


 Zmień zawarto¶ć dwóch ramek


Zaczekaj chwilę...


Kolor tła

Okropnie żółte tło
Wróć


Kolor tekstu

To jest tekst o wybranym kolorze
Wróć


Lewy i górny margines strony

Jeśli używasz Internet Explorera, ten nagłówek jest przesunięty o 100 pikseli w prawo i 200 pikseli w dół

Wróć


Przykład obrazka w tle

 Wróć


To jest jakiś tam tekst

To jest jakiś tam tekst

To jest jakiś tam tekst

To jest jakiś tam tekst

To jest jakiś tam tekst

To jest jakiś tam tekst

To jest jakiś tam tekst

To jest jakiś tam tekst


Obramowania

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

  • Szerokość górnego obramowania (top border width)
  • Szerokość prawego obramowania (right border width)
  • Szerokość dolnego obramowania (bottom border width)
  • Szerokość lewego obramowania (left border width)
  • Mieszane atrybuty szerokości obramowania (border width)
  • Kolor obramowania (border color)
  • Styl obramowania (border style)
  • Mieszane atrybuty górnego obramowania (top border)
  • Mieszane atrybuty prawego obramowania (right border)
  • Mieszane atrybuty dolnego obramowania (bottom border)
  • Mieszane atrybuty lewego obramowania (left border)
  • Mieszane atrybuty obramowania (border)

Szerokość górnego obramowania

Wielu elementom można nadawać obramowanie - z jednej lub kilku stron. Górny brzeg obramowania definiujemy następująco (tylko NC4 - IE4 realizuje polecenie w ramach definicji mieszanej):

<p style="border-top-width: 1mm">Akapit z górnym obramowaniem</p>

Akapit z górnym obramowaniem

Szerokość prawego obramowania

<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>

Akapit z prawym obramowaniem (tylko NC4)

Szerokość dolnego obramowania

<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>

Akapit z dolnym obramowaniem (tylko NC4)

Szerokość lewego obramowania

<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>

Akapit z lewym obramowaniem (tylko NC4)

Mieszane atrybuty szerokości obramowania

Elementowi można przypisać obramowanie, podając szerokości obramowania kilku stron jednocześnie (realizowane z błędami).

<p style="border-with: 3mm 2mm">Akapit</p>

Akapit

Kolor obramowania

Dodatkowym atrybutem, który można zastosować w obramowaniu, jest kolor.

<p style="border-bottom-width: thick; border-color: red">Akapit z dolnym, grubym czerwonym obramowaniem</p>

Akapit z dolnym, grubym czerwonym obramowaniem (tylko NC4)

<p style="border-top-width: thin; border-color: red">Akapit z górnym, cienkim czerwonym obramowaniem</p>

Akapit z górnym, cienkim czerwonym obramowaniem (tylko NC4)

<p style="border-left-width: medium; border-color: red">Akapit z lewym, średnim czerwonym obramowaniem</p>

Akapit z lewym, średnim czerwonym obramowaniem (tylko NC4)

Styl obramowania

Dodatkowe polecenie umożliwia zdefiniowanie stylu obramowania (IE4 realizuje tylko częściowo i odmiennie od NN). Border-style przybiera wartości: none, dotted (nie realizowane), dashed (nie realizowane), solid, double, groove, ridge, inset, outset.

<p style="border: styl">Akapit</p>

Przykłady:

border: none

border: dashed

border: dotted

border: solid 2mm

border: double 3mm

border: groove 5mm red

border: ridge 5mm

border: inset 5mm

border: outset 5mm

Mieszane atrybuty górnego obramowania

Górne obramowanie może mieć definicję mieszaną, np.:

<p style="border-top: solid red thick">Akapit</p>

To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.

Proszę zauważyć, że IE nie dostrzega polecenia border-top-width, ale poprawnie interpretuje definicję mieszaną! Odwrotnie zachowuje się NN!! To jeszcze jeden powód zachowywania należnej ostrożności w posługiwaniu się stylami.

Mieszane atrybuty prawego obramowania

Prawe obramowanie może mieć definicję mieszaną, np.:

<p style="border-right: solid olive double">Akapit</p>

To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.

Mieszane atrybuty dolnego obramowania

Dolne obramowanie może mieć definicję mieszaną, np.:

<p style="border-bottom: solid red fuchsia">Akapit</p>

To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.

Mieszane atrybuty lewego obramowania

Lewe obramowanie może mieć definicję mieszaną, np.:

<p style="border-left: groove yellow 2mm">Akapit</p>

To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.

Mieszane atrybuty obramowania

Definiując obramowanie, możemy stosować definicję mieszaną, w której podamy jedynie polecenie border i wartości, rezygnując z wymieniania własności. Zamiast:

border-width: thick; border-style: double; border-color: red

Możemy wpisać po prostu:

border: thick double red


Klasy

Klasy to elementy znakomicie rozszerzające możliwości działania webmastera. Gdyby ktoś zapytał, jak zróżnicować te same fizyczne elementy w odmiennych sytuacjach (np. odmienne czcionki w różnych akapitach), odpowiedź jest prosta - klasy całkowicie uniezależniają od jakichkolwiek ograniczeń. Możemy sobie przygotować np. kilka różnych klas akapitów, jak P.normalny, P.przypisy, P.uwagi, P.istotne itd. Przywołując odmienne klasy, uzyskujemy żądane formatowanie dokumentu. Pierwotnych poleceń języka nie jest wiele, ale klasy możemy tworzyć w dowolny sposób, zwielokrotniając swoje możliwości. Mało tego - w różnych arkuszach możemy tworzyć klasy o tych samych nazwach, ale definiować je odmiennie, wskutek czego zyskujemy jeszcze więcej swobody.

Posłużmy się przykładem. W definicji stylu zagnieżdżanego (w nagłówku) możemy przygotować kilka klas. Niech będą to klasy o nazwach podanym w poprzednim akapicie:

<head>
<STYLE TYPE="text/css">
<!--
P.normalny {font-family: Helvetica; font-size: 10pt}
P.przypisy {font-family: Helvetica; font-size: 8pt}
P.uwagi {font-family: Helvetica; font-size: 10pt; font-weight: bold}
P.istotne {font-family: Times; font-size: 12pt; color: red}
</STYLE>
</head>

W dokumencie możemy teraz przywoływać poszczególne klasy:

Najpierw definicje:

<p class=normalny>To jest akapit pisany za pomocą klasy P.normalny. Została w nim użyta czcionka Helvetica o wielkości 10 punktów. Klasę tę możemy wykorzystać przy zapisywaniu "normalnego" tekstu, nie mającego jakichś specjalnych wyróżnień.</p>

<p class=przypisy>W jakimś miejscu możemy umieścić przypisy. Zapisujemy je za pomocą zdefiniowanej czcionki Helvetica o wysokości 8 punktów.</p>

<p class=uwagi>Gdy zajdzie konieczność podania uwag, możemy wykorzystać klasę P.uwagi, która wyróżnia się dodatkowym pogrubieniem tekstu.</p>

<p class=istotne> Istotne fragmenty tekstu możemy w jakiś sposób wyróżnić. Tutaj korzystamy z definicji klasy P.istotne, która posługuje się czcionką Times i kolorem czerwonym. </p>

A teraz ich efekt na ekranie:

To jest akapit pisany za pomocą klasy P.normalny. Została w nim użyta czcionka Helvetica o wielkości 10 punktów. Klasę tę możemy wykorzystać przy zapisywaniu "normalnego" tekstu, nie mającego jakichś specjalnych wyróżnień.

W jakimś miejscu możemy umieścić przypisy. Zapisujemy je za pomocą zdefiniowanej czcionki Helvetica o wysokości 8 punktów.

Gdy zajdzie konieczność podania uwag, możemy wykorzystać klasę P.uwagi, która wyróżnia się dodatkowym pogrubieniem tekstu.

Istotne fragmenty tekstu możemy w jakiś sposób wyróżnić. Tutaj korzystamy z definicji klasy P.istotne, która posługuje się czcionką Times i kolorem czerwonym.

Do dyspozycji mamy jeszcze jedno udogodnienie. Klasy możemy uogólniać, nie wiążąc ich z konkretnym poleceniem. Nie jest konieczne wiązanie jakiegoś zestawu kodów np. wyłącznie z akapitem. Możemy sobie bowiem określić klasę BardzoWazne, która może się odnosić do różnych elementów dokumentu. Wystarczy, przykładowo, zapisać ją w definicji stylów w nagłówku dokumentu jako:

.BardzoWazne {font-family: Helvetica; font-size: 14pt; font-weight: bold; color: lime}

Proszę zwrócić uwagę na kropkę poprzedzającą BardzoWazne! Brak polskich liter jest ukłonem w stronę niedomogi Navigatora, który nie akceptuje polskich znaków :-)

Klasę tę możemy teraz wykorzystać np. w akapicie i wykazie, podając odpowiednio:

<p class=BardzoWazne>Treść akapitu</p>

< ul class=BardzoWazne>Tutaj są punkty wykazu</ul>

Efekt na ekranie:

To jest BardzoWażny akapit

  • Bardzo
  • Ważny
  • Wykaz


Własności koloru i tła

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

  • Kolor (color)
  • Kolor tła (background color)
  • Grafika jako tło (background image)
  • Powtarzanie tła (background repeat)
  • Zaczepienie tła (background attachment)
  • Pozycja tła (background position)
  • Mieszane atrybuty tła (background)

Kolor

Kolor możemy przypisywać dowolnym elementom. Kilka przykładów:

<h2 style="color: #FF0000">Czerwony tytuł drugiego stopnia</h2>

Czerwony tytuł drugiego stopnia

<p style="color: #FF00FF">Akapit w kolorze Fuchsia</p>

Akapit w kolorze Fuchsia

<table border>
<tr>
<td style="color: #808000">Komórka tabeli z oliwkowym tekstem</td>
</tr>
</table>

Komórka tabeli z oliwkowym tekstem

Numerowany wykaz w kolorze niebieskim

<ol style="color: blue">
<li>punkt pierwszy
<li>punkt drugi
<li>punkt trzeci
</ol>

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Kolor tła

Wiele elementów może mieć przypisany kolor tła. Przykłady (IE i NN wyświetlają je nieco odmiennie):

<h2 style="background-color: yellow">Tytuł stopnia drugiego na żółtym tle</h2>

Tytuł stopnia drugiego na żółtym tle

<p style="background-color: blue">Akapit na tle Aqua</p>

Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua.

<table border>
<tr>
<td style="background-color: #808000">Komórka tabeli z zielonym tłem</td>
</tr>
</table>

Komórka tabeli z zielonym tłem

Grafika jako tło

Rozmaitym elementom możemy przypisywać grafikę jako tło. Przykłady:

<h1 style="background-image: url(canvas2.gif)">Tytuł stopnia pierwszego na tle płótna</h1>

Tytuł stopnia pierwszego na tle płótna

<table border>
<tr>
<td style="background-image: url(greendot.gif)>Komórka tabeli z zieloną kropką jako tłem</td>
</tr>
</table>

Komórka tabeli z zieloną kropką jako tłem

Powtarzanie tła

Tło dokumentu może się powtarzać tylko w pionie, tylko w poziomie, w obu kierunkach lub nie powtarzać się w ogóle. Definiując w stylach ciało dokumentu (BODY), możemy podać następujące, przykładowe polecenie:

<style type="text/css">
<!--
BODY { background: #C0C0C0 url(greendot.gif);
background-repeat: repeat-y }
-->
</style>

Inne wartości to repeat-x, repeat, no-repeat.

Przykłady:

repeat-y | repeat-x | repeat | no-repeat |

Zaczepienie tła

Tłem strony może być grafika. Wystarczy podać w stylu definicję BODY {background: url(nazwa_obrazka)}, aby obrazek pojawił się w tle dokumentu. Obrazek może się przesuwać w miarę przewijania dokumentu (czyli tkwić w miejscu w stosunku do treści) lub pozostawać nieruchomo (tkwić w miejscu w stosunku do ekranu). W tym drugim przypadku powinniśmy podać definicję:

BODY {background: url(nazwa_obrazka); background-attachment: fixed}

Proszę porównać dwa przykłady, przesuwając pionowy suwak przeglądarki (tylko IE4):

obrazek przesuwa się na ekranie | obrazek tkwi nieruchomo na ekranie

Pozycja tła

Tło może mieć różną pozycję. Najbardziej typowym przykładem jest tło strony, którym jest obrazek.

Przykład: tło na środku strony

W tym akurat przykładzie zdefiniowaliśmy tło jako pojedynczy obrazek na środku ekranu, czyli za pomocą polecenia BODY {background: url(pcq.gif) fixed no-repeat center}. Najważniejszy jest tutaj parametr center.

To było tzw. polecenie mieszane, natomiast pełna składnia dla pozycji tła wygląda następująco (realizuje ją IE4):

background-position: wartość

W przykładowej tabeli (z jedną komórką) możemy wstawić grafikę jako tło, bez definiowania pozycji.

bez definiowania pozycji bez definiowania pozycji bez definiowania pozycji

Możemy jednak określić pozycję tła:

background-position: top

pozycja top pozycja top pozycja top pozycja top

background-position: center

pozycja center pozycja center pozycja center pozycja center

background-position: bottom

pozycja bottom pozycja bottom pozycja bottom

W powyższych przykładach grafika ustawiała się domyślnie na środku, jeśli chodzi o położenie poziome. Możemy jednak definiować także wartości dla położenia poziomego:

background-position: left

pozycja left pozycja left pozycja left

background-position: center

pozycja center pozycja center pozycja center

background-position: right

pozycja right pozycja right pozycja right

Zauważmy, że parametr center daje ten sam wynik w pionie i poziomie.

Możemy mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right:

background-position: top right

pozycja top right pozycja top right pozycja top right

background-position: bottom left

pozycja bottom left pozycja bottom left pozycja bottom left

Możliwe jest wreszcie podanie wartości liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od lewego brzegu i 2cm od prawego.

background-position: 1cm 2cm

pozycja 1cm 2cm pozycja 1cm 2cm pozycja 1cm 2cm

background-position: 20% 80%

pozycja 20% 80% pozycja 20% 80% pozycja 20% 80%

Mieszane atrybuty tła

Najwygodniejszym sposobem definiowania tła jest oczywiście wykorzystanie tzw. definicji mieszanej, w której nie powtarza się całego zestawu "zaklęć" background-repeat, background-position itd. Wykorzystujemy tu polecenie:

background: kolejne wartości

Na przykład, polecenie dla komórki tabeli:

<td style="background: url(obrazek) no-repeat bottom right>

spowoduje, że w komórce pokaże się dany obrazek (url), nie będzie się powtarzał (no-repeat) i będzie umieszczony w dolnym prawym rogu (bottom right).

Pokazana wyżej strona z pojedynczym obrazkiem jako tłem ma mieszaną definicję:

BODY {background: url(pcq.gif) fixed no-repeat center}

Dzięki takiej definicji strona ma tło w postaci pojedynczego (no-repeat) obrazka (url), który jest umieszczony na środku ekranu i nie porusza się (center fixed).


Wydzielone bloki

Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest wygodny, a doświadczenia z dynamicznym HTML, wprowadzanym intensywnie od momentu pojawienia się Internet Explorera 4, wskazują, że jest to jedno z podstawowych narzędzi (dynamiczny HTML jest jednym z kluczowych elementów kanałów informacyjnych).

Bloki wydzielamy za pomocą polecenia <DIV> </DIV>. Fragment dokumentu objęty blokiem możemy w swobodny sposób formatować za pomocą stylów. Możemy sobie wyobrazić, że w części nagłówkowej dokumentu znajdą się klasy tytułów czy akapitów, natomiast w bloku utworzonym doraźnie w dokumencie zdefiniujemy czcionki, barwy itp., a także powołamy się na klasy z nagłówka.

Przykład bloku ze stylami zdefniowanymi bezpośrednio w bloku:

<DIV style=""font-family: verdana, arial; color: olive; position: relative; left: 300; width: 550">
Fragment dokumentu objęty blokiem (tytuł, akapit i wykaz)
</DIV>

Tytuł stopnia pierwszego

Jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit.

  • punkt wykazu
  • punkt wykazu
  • punkt wykazu

Przykład bloku ze stylami zdefiniowanymi w części nagłówkowej dokumentu:

Zakładamy, że w nagłówku (albo w arkuszu dołączanym lub importowanym) utworzyliśmy klasę o nazwie notatka.

.notatka
{font-family: verdana, arial; font-weight: bold; color: blue; margin-left: 10%; margin-right: 10%}

A teraz skorzystamy z tego stylu, wydzielając jakiś fragment dokumentu blokiem i przypisując mu klasę notatka:

<div class=notatka>
fragment dokumentu objęty blokiem
</div>

Tytuł notatki

Treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki

Wydzielane bloki są podobne w działaniu do SPAN, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów dokumentów i nadawania im specyficznego formatowania za pomocą stylów.


Zagnieżdżanie arkusza stylów

Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami <HEAD> i </HEAD>.

Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej (w kolorze niebieskim):

<head>
<STYLE TYPE="text/css">
<!--
BODY {margin-left: 1cm; margin-right: 1cm}
P {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal}
-->
</STYLE>
 </head>

Zdefiniowano w nim 1-centymetrowe marginesy strony oraz 10-punktową czcionkę Arial (oraz inne czcionki "rezerwowe") dla akapitów. Proszę zwrócić uwagę na wiersz <!-- i -->, czyli znaki komentarza obejmujące definicję. "Chowają" one definicję przed przeglądarkami nie interpretującymi stylów, co zapobiega niepotrzebnemu wyświetleniu treści definicji stylów w tych przeglądarkach.

Style definiujemy w "klasyczny" sposób, za pomocą zestawu Selektor { cecha: wartość}. Na przykład P {font-family: Helvetica} czy UL {font-size: 10pt; font-family: Times}.

Zagnieżdżanie arkusza zaleca się w przypadku tych stron, w których stosuje się unikatowe style. Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej jest oczywiście stosować dołączanie wspólnego, zewnętrznego arkusza stylów (opisujemy to tutaj), co skraca czas przygotowania i zmniejsza wielkość plików.


Własności czcionek

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

W przypadku czcionek rozróżniamy kilka bloków informacji.

  • Rodzina czcionek (font-family)
  • Styl czcionki (font-style)
  • Wariant czcionki (font-variant)
  • Waga czcionki (font-weight)
  • Wielkość czcionki (font-size)
  • Atrybuty mieszane (font)
  • Poziome rozstrzelenie czcionek (font-stretch)
  • Pionowe proporcje czcionek (font-size-adjust)

Uprzedzając opis sposobów wprowadzania stylów do dokumentu, założymy w tym miejscu, że posługujemy się stylami lokalnymi (in-line) tworzonymi za pomocą konstrukcji:

<p style="definicja stylu">Treść akapitu</p>

Rodzina czcionek

Aby zdefiniować rodzinę czcionek, należy wpisać w definicji stylu font-family: czcionka. Gdybyśmy sobie zażyczyli, aby akapit był wyświetlany za pomocą czcionki Times, powinniśmy napisać

<p style="font-family: Times">Treść akapitu</p>

Efekt będzie następujący:

To jest akapit napisany za pomocą czcionki Times

Analogicznie, możemy podać czcionkę Courier:

To jest akapit napisany za pomocą czcionki Courier

Ponieważ nigdy nie wiemy, jakimi czcionkami dysponuje czytelnik strony, możemy się zabezpieczyć, podając kilka kolejnych czcionek, np:

<p style="font-family: Times, 'Times New Roman', 'Times New Roman CE'">Treść akapitu</p>

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki.

Proszę zwrócić uwagę, że gdy podajemy kilka czcionek, rozdzielamy je przecinkami i spacją. Gdy czcionka ma kilka wyrazów w nazwie, ujmujemy je w apostrof ', podczas gdy cała definicja jest objęta cudzysłowem.

Możemy także poslużyć się nazwą rodzajową, np. serif, co jeszcze bardziej zwiększa szansę, że akapit zostanie wyświetlony czcionką szeryfową, gdyby zabrakło w systemie czytelnika czcionek Times, Times New Roman itd..

<p style="font-family: serif">Treść akapitu</p>

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki szeryfowej.

Możemy wykorzystywać także inne nazwy rodzajowe, np. sans-serif, cursive, fantasy, monospace. A oto przykłady (niektóre wyświetlane z błędami):

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki bezszeryfowej.

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki pochyłej.

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki ozdobnej.

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki monotypicznej.

Wynik wyświetlania może być odmienny w każdym konkretnym przypadku i nie jestem w stanie przewidzieć, jaka konkretna czcionka jest u Państwa angażowana do wyświetlania. Znam tylko jej nazwę rodzajową.

Oczywiście można mieszać definicje, podając nazwy imienne i rodzajowe, np. "Times, 'Times New Roman', serif".

Styl czcionki

Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwie ostatnie są wyświetlane w podobny sposób.

<p style="font-style: normal">Treść akapitu</p>

Treść akapitu wyświetlana w stylu normal

<p style="font-style: italic">Treść akapitu</p>

Treść akapitu wyświetlana w stylu italic

<p style="font-style: oblique">Treść akapitu</p>

Treść akapitu wyświetlana w stylu oblique (tylko IE)

Wariant czcionki

Na razie rozróżniane są dwa warianty czcionek: normal i small-caps (małe kapitaliki). Przewiduje się wprowadzenie dalszych wariantów, np. condensed, expanded itd.

<p style="font-variant: normal">Treść akapitu</p>

Treść akapitu wyświetlana w wariancie normal

<p style="font-variant: small-caps">Treść akapitu</p>

Treść akapitu wyświetlana w wariancie small-caps (tylko IE)

Waga czcionki

Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je będzie niekiedy rozróżnić na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Pokażmy to na przykładach:

<p style="font-weight: waga">Treść akapitu wyświetlana za pomocą wybranej wagi</p>

Treść akapitu wyświetlana za pomocą wagi normal

Treść akapitu wyświetlana za pomocą wagi bold

Treść akapitu wyświetlana za pomocą wagi bolder

Treść akapitu wyświetlana za pomocą wagi lighter

Treść akapitu wyświetlana za pomocą wagi 100

Treść akapitu wyświetlana za pomocą wagi 200

Treść akapitu wyświetlana za pomocą wagi 300

Treść akapitu wyświetlana za pomocą wagi 400

Treść akapitu wyświetlana za pomocą wagi 500

Treść akapitu wyświetlana za pomocą wagi 600

Treść akapitu wyświetlana za pomocą wagi 700

Treść akapitu wyświetlana za pomocą wagi 800

Treść akapitu wyświetlana za pomocą wagi 900

Wielkość czcionki

Wielkość czcionki możemy regulować za pomocą czterech metod: imiennych wielkości absolutnych, wielkości relatywnych, wysokości w jednostkach miary i wysokości w procentach.

Imienne wielkości absolutne

xx-small, x-small, small, medium, large, x-large, xx-large

<p style="font-size: wielkość absolutna">Treść akapitu</p>

Treść akapitu wyświetlana za pomocą wielkości xx-small

Treść akapitu wyświetlana za pomocą wielkości x-small

Treść akapitu wyświetlana za pomocą wielkości small

Treść akapitu wyświetlana za pomocą wielkości medium

Treść akapitu wyświetlana za pomocą wielkości large

Treść akapitu wyświetlana za pomocą wielkości x-large

Treść akapitu wyświetlana za pomocą wielkości xx-large

Wielkości relatywne

larger, smaller (w stosunku do domyślnej)

<p style="font-size: wielkość relatywna">Treść akapitu</p>

Treść akapitu wyświetlana za pomocą wielkości larger

Treść akapitu wyświetlana za pomocą wielkości smaller

Wielkość w jednostkach miary

W dokumencie można użyć kilku klasycznych jednostek miary: centymetry (cm), cale (in), milimetry (mm), punkty (pt) i pica (pc).

1in = 2.54cm
1pt=1/72in
1pc=12pt

Na przykład:

<p style="font-size: 1cm"<>/p>

Treść akapitu wyświetlana za pomocą wielkości 1 cm

Treść akapitu wyświetlana za pomocą wielkości 8 mm

Treść akapitu wyświetlana za pomocą wielkości 0,1 cala

Treść akapitu wyświetlana za pomocą wielkości 14 punktów

Treść akapitu wyświetlana za pomocą wielkości 1,5 pica

Wielkość w procentach

Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp.
Obie przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu.

Na przykład:

<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>

To jest tytuł stopnia pierwszego

To jest tytuł stopnia pierwszego 125%

Atrybuty mieszane

Możliwe jest użycie mieszanej definicji czcionki, obejmującej różne atrybuty, np. rodziny czcionek, wagi, wielkości itp. Nie jest konieczne podawanie cech - wystarczą same wartości po początkowej deklaracji font:.

<h3 style="font: italic bold 20pt Arial, Helvetica, sans-serif"></h3>

Tytuł stopnia trzeciego, italic, bold, 20 pkt, Arial...

<p style="font: small-caps bold 14pt/18pt Times, 'Times New Roman', serif"></p>

Akapit małe kapitaliki, pogrubiony, 14 pkt, 18 pkt odstępu między liniami bazowymi wierszy, Times...

Należy zwracać uwagę na kolejność atrybutów. Poprawna kolejność to:

font-style font-variant font-weight font-size line-height font-family

Zmiana kolejności MOŻE spowodować wypadnięcie atrybutu, który nie został umieszczony we właściwym porządku.

Poziome rozstrzelenie czcionek

Czcionki mogą mieć rozmaitą szerokość - specyfikacja stylów przewiduje tutaj następujące wartości od najbardziej zwężonych do najbardziej rozszerzonych:

ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded

Przykład definicji:

<p style="font-stretch: ultra-condensed">To jest akapit ultra-condensed</p>

Żadna przeglądarka nie obsługuje tych wartości.

Pionowe proporcje czcionek

Niekiedy się zdarza, że zadeklarowana przez autora czcionka nie jest obecna w systemie czytelnika strony. U tego drugiego przeglądarka usiłuje zastąpić nieobecną czcionkę jakąś inną (lub sami ją podajemy jako alternatywę). Rozmaite czcionki mają odmienny stosunek wysokości małej litery do wysokości całej czcionki, np. w czcionce Verdana wynosi on 0,58, gdy w Times tylko 0,46. Dlatego właśnie Verdana o tej samej wysokości co Times wydaje się większa, co jest pozorem, ale na pewno jest czytelniejsza.

Gdyby autor zechciał utrzymać tę czytelną proporcję, mógłby ją zadeklarować w stylu, za pomocą polecenia:

<p style="font-size-adjust: 0.58">To jest jakiś akapit</p>

Wtedy, gdy czytelnik nie dysponuje Verdaną, ale ma Times, przeglądarka przyjmie zapewne Times i podwyższy stopień pisma, aby zachować właśnie nie wysokość, ale jego czytelność. Times zostałby zwiększony np. z 12 punktów do 12*(0.58/0.46) czyli do ok. 15 pkt.

Przeglądarki nie akceptują na razie tego polecenia.

Niektóre wartości: Verdana 0,58, Comic Sans MS 0,54, Trebuchet MS 0,53, Georgia 0,50, Minion Web 0,47, Flemish Script 0,28.

Zauważmy, że na pierwszych pozycjach znajdują się czcionki stosunkowo niedawno wprowadzone do obiegu, właśnie z myślą o czytelności stron WWW.


Import zewnętrznego arkusza stylów

Każdą stronę można opisać za pomocą importowanego arkusza stylów. Funkcję tę realizuje na razie jedynie Internet Explorer 4 i 5. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach HEAD:

<style>
<!--
@import url("adres arkusza");
-->
</style>

Można podać zarówno adres względny, jak i bezwzględny. Na przykład, korzystając ze stylu na innym serwerze, podamy adres bezwględny:

<style>
<!--
@import url("http://www.polbox.com.pl/lupus/style/toolstyl.css");
-->
</style>

Można więc sobie wyobrazić ujednolicenie wyglądu różnych witryn poprzez wykorzystanie imortowanych stylów, umieszczonych na czyimś serwerze.

Możliwe jest łączenie różnych definicji, np. uzupełnienie ustaleń importowanego arkusza stylów o własne definicje różnych elementów (style zagnieżdżane). W przypadku konfliktu pierwszeństwo mają ustalenia własne.

<style>
<!--
@import url("http://www.polbox.com.pl/lupus/style/toolstyl.css");
H1 {font-size: 30pt; font-family: Helvetica}
-->
</style>

W definicji możemy podać kilka kolejnych adresów importowanych arkuszy (polecenia @import muszą się znajdować na początku). W przypadku konfilktu definicji pierwszeństwo mają ostatnie w kolejności definicje @import.


Styl lokalny (in-line)

Styl lokalny pozwala nadawać atrybuty wybranym, pojedynczym elementom strony. Typowym zastosowaniem jest nadanie określonych atrybutów akapitowi.

<p style="definicja stylu">Treść akapitu</p>

Na przykład:

<p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New', monospace">Treść akapitu</p>

To jest akapit wyświetlany za pomocą czcionki Andale mono, Courier New lub innej monotypicznej, pogrubionej, o wielkości 12 punktów.

<h1 style="font-size: 25pt; font-weight: bold; font-family: Arial, sans-serif">Treść tytułu</h1>

Tytuł stopnia 1, Arial, pogrubiony, 25 punktów

<ul style="font: italic bold 14pt Times; color: red">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

<p style="text-transform: capitalize">to jest akapit, w którym pierwsze litery wyrazów są wyświetlane za pomocą kapitalików.</p>

to jest akapit, w którym pierwsze litery wyrazów są wyświetlane za pomocą kapitalików.

(tylko IE)

Pozioma linia z kilkoma atrybutami (tylko IE4 i 5)

<hr style="height: 3mm; width: 200pt; color: lime">

Wykaz numerowany

<ul style="list-style: lower-roman inside">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt


Kursory

Internet Explorer 4.0 interpretuje (jako jedyna przeglądarka) definicje kursorów. Zauważmy, że przesunięcie kursora nad jakiś element strony WWW powoduje niekiedy zmianę jego kształtu. Na przykład kursor nad odsyłaczem ma kształt "łapki", nad tekstem - kształt wielkiej litery I, nad grafiką - kształt strzałki. Okazuje się, że możemy sami wybrać kształt kursora, dając dodatkową informację czytelnikowi strony. Definicja taka nie wpływa na wyświetlanie strony w innych przeglądarkach, więc jej użycie jest bezpieczne.

Kursor możemy definiować w stylach, przypisując jakiś kształt każdemu elementowi określonego rodzaju na danej stronie, czy też doraźnie tworzyć styl i przypisywać go wybranej grafice, tytułowi itd.

Definicje są niezmiernie proste. Wystarczy jedynie napisać w stylu cursor:styl_kursora. Zaprezentujmy pierwszy z brzegu przykład, w którym przesunięcie kursora myszki nad grafikę spowoduje wyświetlenie kursora ze znakiem zapytania.

<img src="lupus.gif" width=176 height=200 alt="" border="0" style="cursor:help">

Oczywiście definiowanie kursorów nie jest tylko zwykłą zabawą. Jeśli jakiś element powoduje wyświetlenie kursora ze znakiem zapytania, może to sugerować istnienie jakiejś pomocy. Podobnie, strzałka zwrócona we wskazanym kierunku może zwracać uwagę na inny obiekt na stronie.

Oto cała lista kursorów, wraz z przykładami. Aby zobaczyć dany styl kursor, wystarczy przesunąć kursor myszki nad wyraz PRZYKŁAD. Przy "resize" n=north, s=south, w=west, e=east.

cursor:crosshair

PRZYKŁAD

cursor:hand

PRZYKŁAD

cursor:move

PRZYKŁAD

cursor:e-resize

PRZYKŁAD

cursor:ne-resize

PRZYKŁAD

cursor:nw-resize

PRZYKŁAD

cursor:n-resize

PRZYKŁAD

cursor:se-resize

PRZYKŁAD

cursor:sw-resize

PRZYKŁAD

cursor:s-resize

PRZYKŁAD

cursor:w-resize

PRZYKŁAD

cursor:text

PRZYKŁAD

cursor:wait

PRZYKŁAD

cursor:help

PRZYKŁAD

cursor:default

PRZYKŁAD

cursor:auto

PRZYKŁAD

Default, jeśli dobrze zauważyłem, generuje zawsze typowy kształt kursora myszki, czyli strzałkę. Auto jest zgodne z domyślnymi wartościami przeglądarki.


Dołączanie do zewnętrznego arkusza stylów

Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów. Na przykład, strony opisujące oprogramowanie internetowe w Narzędziach internetowych (w serwisie Wydawnictwa Lupus) są dołączane do zewnętrznego arkusza o nazwie toolstyl.css (rozszerzenie .css), umieszczonego na serwerze. Arkusz został zapisany następująco:

<HTML>
<STYLE TYPE="text/css">
<!--

BODY {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm}
P {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal; text-indent: 3 em}
A {text-decoration: none; color: blue}
H1 {font-size: 24pt}
H2 {font-size: 20pt}
H3 {font-size: 16pt}
H1, H2, H3 {font-family: "Arial CE", Arial, Helvetica; font-weight: bold; color: #808000}
TD {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}
LI {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}

-->
</STYLE>
</HTML>

Przykładowo, artykuł opisujący edytor Pajączek zawiera następującą część nagłówkową:

<head>
<title>Pajączek 2.0</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="author" content="Paweł Wimmer">
<meta http-equiv="authoring tool" content="HomeSite">
<meta http-equiv="distribution" content="global">
<meta http-equiv="resource-type" content="document">
<LINK REL=stylesheet HREF="../style/toolstyl.css" TYPE="text/css">
 </head>

Proszę zwrócić uwagę na wiersz (niebieski) zawierający odniesienie do arkusza. Jest on umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrzego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.

Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).


Wykazy

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

  • Typ stylu wykazu (list style type)
  • Obrazek jako wyróżnik wykazu (marker) (list style image)
  • Zawijanie punktów wykazu (pozycja markera) (list style position)
  • Mieszane atrybuty wykazu (list style)
  • Odstęp markera (marker offset)

Typ stylu wykazu

Punkty wykazu mogą być wyróżniane na kilka sposobów:

<ul style="list-style-type: disc">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: circle

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: square

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: decimal

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: lower-roman

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: upper-roman

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: lower-alpha

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: upper-alpha

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

list-style-type: none

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

Nie są na razie obsługiwane takie wartości list-style-type, jak decimal-leading-zero (wiodące zero, np. 01, 02, 03...), lower-greek, lower-latin, upper-latin, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, armenian, georgian, hebrew.

Obrazek jako wyróżnik wykazu

Możliwe jest zastosowanie grafiki jako wyróżnika pozycji wykazu. Na przykład (tylko IE):

<ul style="list-style-image: url(greendot.gif)">

  • pierwszy punkt
  • drugi punkt
  • trzeci punkt

Zawijanie punktów wykazu

Style pozwalają określić, czy punkty wykazu dłuższe niż jeden wiersz na ekranie będą zawijane z wcięciem do pozycji pierwszego wiersza (outside), czy też bez wcięcia, a więc do pozycji wyróżnika (markera) punktu (inside). Innymi słowy, czy markery będą "wewnątrz", czy też "na zewnątrz" punktów. Polecenie realizuje tylko IE - przykłady ze zwykłymi wyróżnikami i grafiką jako markerem.

<ul style="list-style-position: wartość">

list-style-position: inside

  • pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
  • drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
  • trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
  • pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
  • drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
  • trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt

list-style-position: outside

  • pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
  • drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
  • trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
  • pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
  • drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
  • trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt

Mieszane atrybuty wykazu

Podobnie jak w przypadku wielu innych elementów, możemy się posługiwać mieszanymi definicjami wykazu. Zamiast kolejno wyliczać poszczególne własności, możemy podać polecenie list-style, za którym znajdą się od razu wartości. Na przykład:

Zamiast

list-style-image: url(greendot.gif); list-style-type: circle; list-style-position: outside

Możemy użyć

list-style: url(greendot.gif) circle outside

Odstęp markera

Specyfikacja CSS2 przewiduje jawne deklarowanie odstępu markera od treści punktów wykazu. Można to realizować za pomocą polecenia marker-offset: wartość. Na przykład:

<li style="marker-offset: 5cm">punkt wykazu</li>

Żadna z przeglądarek nie obsługuje tego polecenia.


Marginesy zewnętrzne i wewnętrzne

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

  • Górny margines (top margin)
  • Prawy margines (right margin)
  • Dolny margines (bottom margin)
  • Lewy margines (left margin)
  • Mieszane atrybuty marginesu (margin)
  • Górny wewnętrzny margines (top padding)
  • Dolny wewnętrzny margines (bottom padding)
  • Prawy wewnętrzny margines (right padding)
  • Lewy wewnętrzny margines (left padding)
  • Mieszane atrybuty wewnętrznego marginesu (padding)

Górny margines

Polecenie margin-top: xxx pozwala wprowadzić górny margines dla danego elementu, a więc dodatkowy odstęp między nim a poprzedzającym go elementem.

<p style="margin-top: 2cm">To jest treść akapitu</p>

To jest pierwszy akapit.

To jest drugi akapit, w którym górny margines ma 2 cm.

Prawy margines

Polecenie margin-right: xxx pozwala wprowadzić prawy margines dla danego elementu, a więc dodatkowy odstęp między nim a prawym brzegiem strony czy następującym po nim elementem.

<p style="margin-right: 2cm">To jest treść akapitu</p>

To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm.

Dolny margines

Polecenie margin-bottom: xxx pozwala wprowadzić dolny margines dla danego elementu, a więc dodatkowy odstęp między nim a następującym po nim elementem.

<p style="margin-bottom: 2cm">To jest treść akapitu</p>

To jest pierwszy akapit, w którym dolny margines ma 2 cm.

To jest drugi akapit.

Lewy margines

Polecenie margin-left: xxx pozwala wprowadzić lewy margines dla danego elementu, a więc dodatkowy odstęp między nim a lewym brzegiem strony czy poprzedzającym go elementem.

<p style="margin-left: 10%">To jest treść akapitu</p>

To jest akapit, w którym lewy margines ma 10 procent.

Mieszane atrybuty marginesu

Możemy podawać mieszane wartości marginesów dla danego elementu, poslugując się poleceniem margin:. Przykładowo:

p style="margin: 1cm" wprowadzi 1-centymetrowy margines ze wszystkich stron.

p style="margin: 1cm 2cm" wprowadzi 1-centymetrowy margines u góry i u dołu oraz 2-centymetrowy margines z lewej i z prawej strony.

p style="margin: 1cm 2cm 0.5cm 1.5cm" wprowadzi odrębne marginesy dla każdej ze stron.

Górny wewnętrzny margines

Różne elementy możemy oddzielać od innych, definiując dodatkowy wewnętrzny margines, poszerzający "naturalny" odstęp.

<p style="padding-top: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>

Akapit oddzielony od górnego brzegu obramowania 1-centymetrowym odstępem.

Akapit oddzielony od górnego brzegu komórki tabeli 5-milimetrowym odstępem.

Akapit oddzielony od obrazka dodatkowym, 1-centymetrowym odstępem.

Dolny wewnętrzny margines

W analogiczny sposób tworzymy dolny wewnętrzny margines.

<p style="padding-bottom: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>

Akapit oddzielony od dolnego brzegu obramowania 1-centymetrowym odstępem.

Lewy wewnętrzny margines

<p style="padding-left: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>

Akapit oddzielony od lewego brzegu obramowania 1-centymetrowym odstępem.

Prawy wewnętrzny margines

<p style="padding-right: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>

Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstępem. Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstępem.

Mieszane atrybuty wewnętrznego marginesu

Możemy ustalić kilka atrybutów padding jednocześnie. Na przykład:

<p style="padding: 1cm">Akapit oddzielony od obramowania dodatkowymi odstępami.</p>

Akapit oddzielony od obramowania dodatkowymi odstępami

Możemy także podać odrębne wartości dla kolejnych marginesów, np. 1cm 2cm - górny/dolny prawy/lewy (realizowane z błędami).


Jednostki miary

Do dyspozycji mamy dwa rodzaje jednostek miary - absolutne i relatywne. Przykładem miary absolutnej jest centymetr, relatywnej - piksel. Jednostkę miary podajemy zawsze bezpośrednio po liczbie, np. 1cm, 0,1in itd.

Miary absolutne

  • in - cale, 1in = 2.54cm
  • cm - centymetry, 1cm
  • mm - milimetry, 1mm
  • pt - punkty, 1pt = 1/72in
  • pt - pika, 1pc = 12pt

Miary relatywne

  • em - wysokość czcionki elementu
  • ex - x-height - wysokość litery x
  • px - piksele, w odniesieniu do rozdzielczości tła

Oddzielnie wyróżnia się wielkości procentowe oraz absolutne (np. x-large) i relatywne (np. smaller) miary czcionek.

Przykłady wielkości absolutnych

<H1 style="font-size: 1.5cm">Tytuł stopnia 1</H1>

Tytuł stopnia 1

<p style="font-size: 2pc">Akapit 2 pika</p>

Akapit 2 pika

<ul style="margin-left: 30mm">
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>
</ul>

  • punkt 1
  • punkt 2
  • punkt 3

Przykłady wielkości relatywnych

<p style="text-indent: 3em; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki.</p>

Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki.

<p style="text-indent: 3em; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.</p>

Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.

<p style="text-indent: 3ex; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery.</p>

Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery.

<p style="text-indent: 3ex; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.</p>

Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.

<p style="text-indent: 100px; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.</p>

Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.

Stosowanie miar relatywnych ma sens przede wszystkim w sytuacjach, w których chcemy zachować proporcje wyświetlania różnych elementów. Na przykład na 14-calowym monitorze piksel ma inną wartość w centymetrach w rozdzielczości 800x600 niż 1024x768.


Obrys

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

  • Informacje ogólne
  • Kolor obrysu (outline color)
  • Styl obrysu (outline style)
  • Szerokość obrysu (outline-width)
  • Mieszane atrybuty obrysu (outline)

Informacje ogólne

Obrys elementu (outline) jest podobny do obramowania, ale istnieje między nimi kilka różnic: obrys nie musi być prostokątem, nie da się oddzielnie regulować rozmaitych boków obrysu (wszystkie mają te same cechy), wreszcie obrys nie zabiera miejsca, tzn. jest tworzony na elemencie, a nie na zewnątrz elementu.

Niestety, na razie żadna przeglądarka nie obsługuje obrysów.

Kolor obrysu

Kolor obrysu jest wprowadzany za pomocą polecenia outline-color: kolor. Na przykład, grafikę można obrysować na czerwono poleceniem:

<img SRC="../grafika/enter.gif" style="outline-color: red">

Styl obrysu

Styl obrysu wprowadzamy za pomocą polecenia outline-style: styl

<p style="outline-style: solid">jakiś akapit</p>

Wartości dla stylów są następujące: none, dotted, dashed, solid. groove, ridge, inset, outset, double.

Szerokość obrysu

Szerokość obrysu jest definiowana za pomocą polecenia outline-width. Na przykład:

<p style="outline-width: 2mm">jakiś akapit</p>

Wartości dla szerokości są następujące: thin, medium, thick, wartość w jednostce miary.


Elementy pozycjonowania

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

  • Praktyczne przykłady
  • Pozycjonowanie absolutne
  • Pozycjonowanie względne
  • Nakładanie elementów
  • Pozycja pionowa w stosie
  • Kadrowanie
  • Rozmiary

Fundamentalną rolę w nadchodzącej fali witryn nowej generacji będzie pełnić pozycjonowanie elementów na stronie, ważne zwłaszcza w dynamicznym HTML. Obecnie dostępny jest tzw. Working Draft - szkic poleceń opracowanych przez W3C Consortium. Część tych poleceń jest akceptowana przez najnowsze przeglądarki, a praktyczne ich zastosowanie można obejrzeć m.in. na stronach kanałów informacyjnych, interpretowanych przez Internet Explorera 4 Preview 2.

Praktyczne przykłady

<span style="position: relative; left: 200px; top: 50px; width: 400px">Ten akapit...</span>

Ten akapit ma pozycję względną (relative), jest odsunięty od lewego marginesu o 200 pikseli i o 50 pikseli w dół. Pole akapitu ma 400 pikseli szerokości. W rzeczywistości powinien być wyświetlany zaraz pod podaną wyżej definicją, ale pozycjonowanie spowodowało przesunięcie w prawo i w dół.

<div style="position:absolute; left:0%; top:0%"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div>

Obrazek odpowiadający tej definicji jest ustawiony "na sztywno" w lewym, górnym rogu strony.

<div style="position: relative; left: 300px; width: 400px">Wykaz odsunięty o 300 pikseli i mający 400 pikseli szerokości</div>

  • To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu
  • To jest drugi punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu
  • To jest trzeci punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu

Najwygodniej (i najbezpieczniej) jest się posługiwać blokami DIV, które są najlepiej interpretowane przez przeglądarki.

Pozycjonowanie absolutne

Elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów i zajmują tam miejsce bez względu na pozycję innych elementów. W taki właśnie sposób jest ustawiony obrazek "Enter". Elementy te mogą się nakładać na inne elementy absolutne lub względne, które akurat się tutaj znalazły.

Polecenie pozycjonowania absolutnego może mieć przykładową postać:

position:absolute; left:800px; top:20px

Zalecane jest bardzo uważne i ostrożne stosowanie definicji absolutnych, aby nie popsuć widoku strony, zwłaszcza przy zmianach wielkości okna przeglądarki.

Pozycjonowanie względne

Pozycjonowanie względne odnosi się do miejsca wstawienia definicji. W zaprezentowanym na początku strony przykładzie akapit został przesunięty w prawo i w dół w stosunku do umiejscowienia definicji, za pomocą polecenia:

position:relative; left: 200px; top: 50px

Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę.

Pozycjonowanie względne jest bezpieczniejsze z punktu widzenia ostatecznego wyglądu strony i łatwiejsze do kontrolowania.

Nakładanie elementów

Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów:

<img src="ami.gif" width=80 height=114 border=0 alt=" ">
<div style="position: relative; top: -84px; left: 30px"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div>
<div style="position: relative; top: -168px; left: 60px"><img src="pcq.gif" width=80 height=114 border=0 alt=" "></div>

Wyjaśnienie konstrukcji:

Obrazki mają 80 pikseli szerokości i 114 pikseli wysokości. Blok DIV powoduje ustawianie ich jeden pod drugim. Chcemy jednak, aby kolejne obrazki były przesunięte o 30 pikseli w dół i w prawo w stosunku do poprzedniego. Pierwszy obrazek można wstawić bez definiowania pozycji. Drugi obrazek jest ustawiany pod pierwszym, Musimy więc "cofnąć" go o 84 piksele w górę (114-30), a także przesunąć w prawo o 30 pikseli. Trzeci obrazek musimy przesunąć w górę już o 114+114-60 pikseli, czyli top: -168px. Trzeba go także przesunąć w prawo o 60 pikseli, czyli left: 60px.

Zrozumienie konstrukcji nie nastręcza chyba większych trudności.

W analogiczny sposób można nakładać na siebie bloki tekstu:

To jest jakiś tam tekst
To jest inny tekst

Pozycja pionowa w stosie

Możemy regulować pionową pozycję w stosie nałożonych na siebie elementów (tzw. z-order). Służy do tego polecenie z-index: n.

<:div style="position: relative; z-index: 1"><img src="ami.gif" width=80 height=114 border=0 alt=" "><:/div>
<:div style="position: relative; top: -84px; left: 30px; z-index: 3"><img src="enter.gif" width=80 height=114 border=0 alt=" "><:/div>
<:div style="position: relative; top: -168px; left: 60px; z-index: 2"><img src="pcq.gif" width=80 height=114 border=0 alt=" "><:/div>

Obrazki są układane w kolejności od z-index: 1 (na dole) do z-index: 3 (na górze). Poprzednio mieliśmy kolejność Amiga - Enter - PCkurier, a obecnie - Amiga - PCkurier - Enter.

Analogicznie, w przypadku tekstu:

To jest jakiś tam tekst
To jest inny tekst

Kadrowanie

Netscape Communicator pozwala kadrować elementy, czyli "wycinać" z nich widoczny na ekranie fragment. Przykład:

<div style="position:relative; clip: rect(1,60,90,1)">
<img src="ami.gif" width=80 height=114 border=0 alt=" ">
</div>

Liczby 1, 60, 90 i 1 wyznaczają rogi prostokąta - top, right, bottom, left. Obecnie jest możliwe jedynie wycinanie prostokątów.

Rozmiary

Elementy mogą przyjmować szerokość i wysokość, definiowane za pomocą poleceń:

width: xx i height: yy

<div style="width: 200px">Ten akapit...</div>

Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli.

Ustalenie szerokości bloku tekstu pozwala ograniczyć do tej szerokości koloru tła (background-color):

Ustalenie szerokości bloku tekstu pozwala ograniczyć do tej szerokości kolor tła:

Wysokość elementów nie jeszcze interpretowana.


Własności drukowania

Wbrew przewidywaniom, że biuro bez papieru zawładnie bez reszty naszą codziennością, papier i drukarki mają się całkiem dobrze. Choć Internet jest medium w pełni elektronicznym, często się zdarza, że pobrane informacje chcemy przelać na papier, który możemy łatwo przenosić, choćby do łóżka czy wanny :-)

Nic więc dziwnego, że WWW Consortium przykłada do problemu drukowania należną wagę i rozwija poświęcone mu fragmenty specyfikacji nowej wersji języka HTML. Najnowsza wersja Internet Explorera 4 (i tylko ona - stan na grudzień 1997) obsługuje już fragmenty tej specyfikacji. Inne przeglądarki zignorują wstawione polecenia.

Nowe własności pozwalają autorowi strony określić, jak ma być drukowany dokument HTML. Wyobraźmy sobie, że tworzymy duży, jednostronicowy dokument, który dzielimy na logiczne bloki, np. rozdziały. Gdyby czytelnik takiego dokumentu zechciał go wydrukować, przeglądarka wydrukuje go "jak leci", strona po stronie, bez zważania na te logiczne fragmenty. Nowa wersja języka HTML pozwala jednak wstawić odpowiednie otagowanie, które nakaże drukarce "przełamywać" strony. Odpowiada to znanej z bardziej zaawansowanych edytorów tekstów funkcji twardego przełamania strony (zazwyczaj kombinacją Ctrl-Enter), czyli wymuszenia nowej strony. Do drukarki zostanie po prostu wysłany sygnał, że w tym miejscu należy przestać drukować stronę, choćby pozostało jeszcze na niej wolne miejsce. Drukowanie zostanie podjęte dopiero na następnej stronie. Jest to wygodne rozwiązanie, gdyz w ten sposób wydruk będzie bardziej przejrzysty - lepiej jest przecież czytać początek rozdziału od nowej strony.

Strony możemy przełamywać za pomocą dwojakiego rodzaju poleceń:

page-break-before: wartość spowoduje przełamanie strony PRZED otagowanym elementem.

page-break-after: wartość spowoduje przełamanie strony PO otagowanym elemencie.

Polecenia przyjmują cztery wartości: auto, always, left, right. Zachowanie Internet Explorera nie jest jednoznaczne w przypadku auto, left i right (specyfikacja jest ciągle w fazie opracowania). Funkcjonuje jednak bez kłopotu najważniejsza wartość - always.

Załóżmy, że tytuły rozdziałów w naszym dokumencie są oznaczone tagiem tytułu pierwszego stopnia, czyli H1. Życzymy sobie, aby drukarka przerywała drukowanie strony tuż przed tytułem pierwszego stopnia i przenosiła drukowanie na następną stronę. Wystarczy w takim razie opatrzyć każdy tytuł odpowiedniem otagowaniem (styl lokalny):

<H1 style="page-break-before: always">Rozdział 4</H1>

Możemy skorzystać także ze stylu zagnieżdżonego i umieścić odpowiednią deklarację jeszcze w ramach nagłówka HEAD.

Można jednak postąpić inaczej. Każdy z rozdziałów możemy zakończyć np. poleceniem:

<p style="page-break-after: always">treść ostatniego akaptu w rozdziale</p>

Teoretycznie polecenia powinny działać w stosunku do elementów blokowych poza tabelami. Obecnie nie funkcjonuje ono jednak np. w odniesieniu do <br>, czyli przełamania wiersza.

Definując przełamania możemy się także posłużyć klasami. W definicji stylu zagnieżdżonego (w ramach HEAD) możemy na przykład zdefiniować klasę:

.nowastrona {page-break-after: always}

a następnie przywołać tę klasę w ostatnim akapicie rozdziału:

<p class=nowastrona>treść ostatniego akapitu w rozdziale</p>

Drukarka zakończy druk strony po tak zdefiniowanym akapicie i rozpocznie drukowanie dalszego ciągu dokumentu już na następnej stronie.


Własności koloru i tła

Powtarzanie tła w pionie i poziomie


Własności koloru i tła

Powtarzanie tła w pionie


Własności koloru i tła

Powtarzanie tła w poziomie


Własności koloru i tła

Brak powtarzania tła


Selektory

Wprowadzenie

Selektory należą do kluczowych pojęć Cascading Style Sheets. To one właśnie wskazują obiekty, którym przypisujemy jakiś zestaw własności. Selektorem może być dowolny element języka HTML. Przykładem jest choćby element P, który w języku HTML, jak wiadomo, oznacza akapit, albo UL, czyli wykaz nieuporządkowany. Jest to tzw. selektor prosty.

Ogólna konstrukcja stylu ma następującą postać:

selektor { cecha: wartość }

W języku angielskim: selector { property: value }

Widać z tego, że selektor pełni tutaj zasadniczą rolę określając, jakiemu elementowi przypiszemy pewne własności. Gdybyśmy chcieli przypisać akapitowi czcionkę Helvetica o rozmiarze 12pt, powinniśmy to zdefiniować następująco:

P { font-family: Helvetica; font-size: 12pt}

Podobnie, gdyby wykaz nieuporządkowany miał być przedstawiony za pomocą czcionki pogrubionej, koloru czerwonego, definicja powinna wyglądać następująco:

UL { font-weight: bold; color: #FF0000 }

Pojęcie selektora jest więc proste i zrozumienie jego znaczenia nie powinno przysparzać żadnych trudności.

Grupowanie selektorów

Te same wartości stylu możemy nadać jednocześnie kilku selektorom, wyliczając ich listę przed deklaracją własności i wartości. Na przykład, chcąc przypisać taką samą czcionkę i kolor tytułom stopnia pierwszego, drugiego i trzeciego, zamiast definiować każdy tytuł z osobna, możemy napisać:

H1, H2, H3 {font-family:Helvetica; color:blue}

Zwróćmy uwagę na przecinki rozdzielające selektory.

Selektory elementów

Kilka ważnych pojęć:

  • Drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii.
  • Dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu.
  • Potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu.
  • Rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu.
  • Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu.
  • Brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling).

Przykładowe drzewo:

Źródło: Cascading Style Sheets, level 2 - CSS2 Specification

a. Selektor prosty

Selektor ten został opisany na początku rozdziału.

b. Selektor uniwersalny

Wartości ogólne (uniwersalne) można przypisywać dokumentowi na najwyższym poziomie, czyli w BODY, ale można także stosować tzw. selektory uniwersalne, oznaczane gwiazdką.

Selektor o postaci:

* {color:#FF0000; font-weight:bold}

spowoduje, że cały tekst (w akapitach, wykazach, tabelach itd.) będzie wyświetlany jako pogrubiony i w czerwonym kolorze.

Z kolei selektor

*.klasa1 {font-family:Helvetica}

spowoduje, że wszystkie elementy opatrzone klasą o nazwie klasa1 będą wyświetlane za pomocą czcionki Helvetica.

Tylko IE intepretuje selektor uniwersalny.

c. Selektor potomka (descendant selector)

Selektor potomka (w CSS1 jest to selektor kontekstowy) pozwala nadawać styl tym elementom, które mają określonych przodków. Na przykład:

H1 I {color:red}

Oznacza to, że jeśli fragment tytułu stopnia pierwszego będzie przedstawiony za pomocą czcionki pochylonej, to automatycznie zyska on także czerwony kolor, np.

To jest tytuł pierwszego stopnia

Podobnie, definicja

UL UL LI {color:green}

spowoduje, że elementy wykazu na drugim poziomie zagnieżdżenia będą przedstawione w zielonym kolorze, podczas gdy elementy wykazu pierwszego poziomu będą miały domyślny kolor, np.

  • punkt 1
  • punkt 2
    • punkt 2.1
    • punkt 2.2
  • punkt 3

IE interpretuje selektor kontekstowy poprawnie, natomiast NC tylko częściowo poprawnie (przykłady są sprawdzane w wersjach IE5PL i Netscape Communicator 4.6).

Zauważmy, że w definicji selektora potomka poszczególne elementy są rozdzielone spacjami. Spacja jest tzw. kombinatorem - w CSS2 rozróżniamy trzy rodzaje kombinatorów: spacja, znak + i znak >. Spacje wokół znaków + i > są opcjonalne.

d. Selektor dziecka (child selector)

Element jest dzieckiem w stosunku do innego elementu, jeśli jest w nim zawarty i jest o jeden szczebel niżej w hierarchii. Na przykład, w <h1> <h3> </h3> </h1>, H3 jest dzieckiem H1, ale wszystko w ramach H3 jest już dzieckiem wobec H3, a nie H1 (chociaż jest zarazem potomkiem H1). Jeśli chcemy , aby wszystkie H3, które są dziećmi H1, były czerwone, użyjemy polecenia:

H1 > H3 { color : red }

Żadna przeglądarka nie realizuje tego polecenia.

e. Selektor braci (adjacent sibling selector)

Selektor pozwala nadawać określone formatowanie sąsiadującym ze sobą elementom, mającym tego samego rodzica, np. fragmentowi pogrubionemu i fragmentowi pochylonemu w ramach akapitu. Stosujemy tutaj kombinator w postaci znaku +.

B + I (color:green}

Polecenie nie jest na razie realizowane.

Selektory atrybutów

Selektory zostały rozszerzone na atrybuty elementów. Jak pamiętamy, elementy mogą przybierać określone atrybuty, na przykład akapit może być wyrównany do prawego marginesu (align=right). Można to wykorzystać do nadawania pewnych wartości: jeśli akapit jest wyrównany do prawej, to jest wyświetlany na czerwono.

Ogólna postać selektora atrybutów jest następująca:

element[atrybut relacja wartość] {deklaracja stylu}

Przykładowo:

P[align=right] {color: red}

Relacja może być przedstawiona czterema sposobami, co odpowiada czterem typom selektora atrybutów. Jedną z relacji jest zastosowany tu znak =.

a. Prosty selektor atrybutu

Element[atrybut] {deklaracja stylu}

lub

[atrybut] {deklaracja stylu}

Na przykład:

H1[title] {font-family: Helvetica}

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut title, będzie wyświetlany za pomocą czcionki Helvetica.

[title] {font-family: Helvetica}

Każdy element z atrybutem title (o dowolnej jego wartości) będzie wyświetlany za pomocą czcionki Helvetica.

b. Selektor atrybutu o określonej wartości

Element[atrybut="wartość"] {deklaracja stylu}

lub

[atrybut="wartość"] {deklaracja stylu}

Na przykład:

H1[title="rozdział"] {font-family: Helvetica}

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut title="rozdział", będzie wyświetlany za pomocą czcionki Helvetica.

[title="ważne"] {font-weight: bold}

Każdy element z atrybutem title="ważne" będzie wyświetlany za pomocą czcionki pogrubionej.

Jak łatwo zauważyć, selektor atrybutu o określonej wartości różni się od prostego selektora atrybutu konkretną wartością atrybutu.

Selektor atrybutu o określonej wartości ma jeszcze dwie odmiany, które można przedstawić następująco:

[atrybut~=wartość] [atrybut|=wartość]

W pierwszej odmianie ciąg znaków podany jako wartość może być fragmentem wartości atrybutu konkretnego elementu. Przykładowo:

H1[title~="rozdział"] {font-family: Verdana}

Taka postać stylu będzie się odnosić do wszystkich tytułów stopnia pierwszego, w których atrybut title będzie zawierać wyraz rozdział, np. title="rozdział pierwszy", title="rozdział drugi" itd. Zwróćmy uwagę, że wyrazy w title są rozdzielone spacjami.

Druga odmiana została przewidziana do obsługi wartości zawierających dywizy (łączniki). Podanie definicji

*[title|="bleble"] {color: red}

spowoduje objęcie nią wszystkich elementów, które mają atrybut title zawierający bleble-a, bleble-b itd. Jest to wykorzystywane np. w obsłudze języków, których kody są rozróżniane, choć początek jest taki sam: en-us, en-uk.

Żadna z przeglądarek, jak na razie, nie obsługuje selektorów atrybutów.

Specjalne selektory HTML

a. Klasy selektorów

W powyższych przykładach posłużyliśmy się prostym selektorem w postaci elementu HTML. Język CSS przewiduje jednak tworzenie tzw. klas, które pozwalają zróżnicować ten sam element zależnie od pojawiających się okoliczności. Bardzo dobrym przykładem jest tutaj ponownie element P.

Jest oczywiste, że w większym dokumencie, składającym się z wielu akapitów, nie wszystkie akapity muszą mieć taki sam wygląd, np. czcionka Times, o rozmiarze 12 punktów, w kolorze czarnym. Może się przecież zdarzyć, że niektóre akapity będziemy chcieli wyróżnić pogrubieniem, inne zaznaczyć odmiennym kolorem, a jeszcze inne - mniejszą czcionką. Te "nietypowe" akapity możemy łatwo zdefiniować za pomocą klas i tylko w odpowiednim miejscu przywoływać stosowne definicje, podczas gdy gros tekstu będzie wyświetlane za pomocą podstawowego formatowania przewidzianego dla akapitu.

Na przykład, definicja stylów akapitów w części nagłówkowej dokumentu może mieć taką postać:

P {font-family: Helvetica; font-size: 10pt}
P.uwagi {font-family: Helvetica; font-size: 10pt; font-weight: bold}
P.istotne {font-family: Times; font-size: 10pt; color: red}
P.przypisy {font-family: Helvetica; font-size: 8pt}

Natomiast w samym tekście będziemy przywoływać klasy za pomocą polecenia

<p class=konkretna_klasa>Akapit</p>

To jest akapit pisany za pomocą normalnej czcionki. Została w nim użyta czcionka Helvetica o wielkości 10 punktów. Klasę tę możemy wykorzystać przy zapisywaniu "normalnego" tekstu, nie mającego jakichś specjalnych wyróżnień.

W jakimś miejscu możemy umieścić przypisy. Zapisujemy je za pomocą zdefiniowanej czcionki Helvetica o wysokości 8 punktów.

Gdy zajdzie konieczność podania uwag, możemy wykorzystać klasę P.uwagi, która wyróżnia się dodatkowym pogrubieniem tekstu.

Istotne fragmenty tekstu możemy w jakiś sposób wyróżnić. Tutaj korzystamy z definicji klasy P.istotne, która posługuje się czcionką Times i kolorem czerwonym.

b. Selektor ID

Selektor ID (identyfikatora) został pomyślany jako narzędzie do wskazywania elementu mającego jednoznaczny atrybut ID, a więc występującego raz jeden w drzewie dokumentu. Identyfikator jest budowany z liter od a do z, cyfr, łączników i kropek, przy czym na początku musi się znajdować litera.

#[etykieta ID] {deklaracja stylu

Przykład:

H1#chapter {letter-spacing: 0.3em}

Selektory pseudoklas

a. Pseudoklasy odsyłaczowe

CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu.

Selektor a:link pozwala nadać formatowanie odsyłaczowi na stronie, na przykład:

a:link {color:yellow; background: blue}

To jest odsyłacz do firmy

Selektor a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu, na przykład:

a:visited {color:green}

To jest odsyłacz do PCkuriera - jeśli byłeś już na stronie PCkuriera, odsyłacz będzie zielony.

Internet Explorer obsługuje oba selektory, natomiast NC obsługuje fragmentarycznie a:link.

b. Pseudoklasa :hover

Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go. Jest to szczególnie często wykorzystywane do zmiany wyglądu odsyłacza, co ułatwia czytelnikowi śledzenie, nad jakim odsyłaczem znajduje się w danym momencie kursor myszki.

Przykład:

A:hover {background:blue; color:white}

To jest odsyłacz do serwisu About.com. Gdy nasuniesz kursor myszki nad odsyłacz, zmieni się jego wygląd.

Spowoduje to, że odsyłacz mający domyślnie np. niebieski kolor na białym tle, po nasunięciu kursora zostanie wyświetlony jako biały na niebieskim tle.

Selektor jest interpretowany jedynie przez IE.

c. Pseudoklasa :active

Selektor :active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz.

A:active {background:olive; color:black}

To jest odsyłacz do serwisu World Wide Web Consortium. Gdy klikniesz na odsyłaczu, zmieni się jego wygląd (czarny odsyłacz na oliwkowym tle).

Selektor jest interpretowany tylko przez IE.

d. Pseudoelement :focus

Selektor :focus formatuje w wybrany sposób element, który przyjmuje w danym momencie zogniskowanie, np. kursor na danym odsyłaczu (po wybraniu go za pomocą klawisza tabulatora) czy pole formularza, w którym znalazł się kursor.

a:focus {color:black; background:white}

Selektor jest obsługiwany tylko przez IE, a i to jedynie w kontekście odsyłacza hipertekstowego.

e. Pseudoklasa :lang

Selektor :lang pozwala formatować elementy, które mają podany atrybut języka, np.:

p:lang(en) {font-weight:bold}

Żadna przeglądarka nie obsługuje tego selektora.

f. Pseudoklasa :first-child

Pierwszym dzieckiem elementu jest pierwszy zawarty w nim element niższego szczebla. Na przykład, pierwszym dzieckiem akapitu może być pierwszy znacznik pogrubienia.

to jest akapit, a to jest pogrubienie i dalszy ciąg akapitu

p:first-child {color:red}

Selektor

p:first-child EM {color:red}

jest zawężony, gdyż wyróżnia formatowaniem jedynie elementy EM, które są pierwszym dzieckiem jakiegoś akapitu.

Żadna przeglądarka nie akceptuje tego selektora.

Selektory pseudoelementów

a. Pseudoelement first-line

Selektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu.

Przykład:

P:first-line {text-transform: uppercase}

W deklaracji stylu dla :first-line można stosować następujące własności: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.

Żadna z przeglądarek nie interpretuje tego polecenia.

b. Pseudoelement first-letter

Selektor :first-letter teoretycznie powinien powodować nadanie odrębnego formatowania pierwszej literze danego bloku, np. akapitu. Został on pomyślany przede wszystkim jako wygodne narzędzie o charakterze typograficznym, pozwalające zbliżyć wygląd strony WWW do tradycyjnych rozwiązań spotykanych w publikacjach papierowych, np. rozciągnięcie pierwszej litery na kilka kolejnych wierszy tekstu. Technika ta (drop-cap) jest znana choćby z popularnych edytorów tekstów. Niestety, żadna z przeglądarek nie interpretuje tego polecenia.

Przykład:

P:first-letter { font-size: 200%; float: left }

W deklaracji stylu dla :first-letter można stosować następujące własności: font properties, color properties, background properties, 'text-decoration', 'vertical-align', 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'.

Żadna z przeglądarek nie obsługuje tego polecenia.

c. Pseudoelement :before i :after

Selektor ten pozwala automatycznie generować określoną treść przed i/lub po określonym elemencie. Na przykład, polecenie

p:before {content : "Początek akapitu: "}
p:after {content : " :Koniec akapitu"}

spowoduje automatyczne wstawienie ciągów (bez cudzysłowów) "Początek akapitu: " i " :Koniec akapitu" przed i po każdym akapicie.

Polecenie

p.uwaga:before {content : "Uwaga: "}

opatrzy każdy akapit o klasie class=uwaga dodatkową inwokacją "Uwaga: ".

Jako content mogą występować nie tylko zwykłe ciągi znaków (string), ale i adresy internetowe (address), liczniki (counter), apostrofy i cudzysłowy (quotes).

Żadna z przeglądarek nie obsługuje tego polecenia.

Podsumowanie

Jak widać z powyższego przeglądu, zakres selektorów w CSS2 został znacznie zwiększony w stosunku do poprzedniej specyfikacji stylów, ale ich interpretacja ciągle pozostawia sporo do życzenia, nawet w przodującym pod tym względem Internet Explorerze 5 - oficjalna specyfikacja ciągle wyprzedza jej implementację w przeglądarkach i w zasadzie można stwierdzić, że nie wyszły one poza selektory zaprezentowane w CSS1, a i to z brakami. Dochodzą jednak wieści o znacznym postępie Gecko, który będzie odpowiadać za rendering kodu HTML w kolejnej generacji przeglądarki Netscape'a - musimy jednak poczekać na konkretne efekty. Natomiast webmasterzy na razie muszą stosować selektory z niezbędną ostrożnością i sprawdzać ich działanie w wersjach 4+ obu przeglądarek.


Rozciąganie stylu

Rozciąganie stylu polega na objęciu stylem pewnego bloku w dokumencie HTML. Posługujemy się tutaj poleceniem <SPAN> </SPAN>.

Na przykład:

<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">To jest akapit objęty poleceniem SPAN</span>

To jest akapit objęty poleceniem SPAN

Poleceniem SPAN możemy obejmować łącznie także niejednorodne elementy, np. akapit i wykaz.

<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">
<p>To jest akapit objęty poleceniem SPAN</p>
<ul>
<li>pierwszy punkt wykazu
<li>drugi punkt wykazu
<li>trzeci punkt wykazu
</ul>
</span>

To jest akapit objęty poleceniem SPAN

  • pierwszy punkt wykazu
  • drugi punkt wykazu
  • trzeci punkt wykazu

W polecenu SPAN możemy wykorzystać także klasy, jeśli są zdefiniowane w nagłówku dokumentu (arkusz zagnieżdżony) czy jakimś zewnętrznym arkuszu. Gdybyśmy wstawili w nagłówku dokumentu, w definicji stylów, polecenie (bez polskich znaków, gdyż Navigator wykazuje tutaj błąd)

.BardzoWazne {font-family: Helvetica; font-size: 14pt; font-weight: bold; color: lime}

możemy je wykorzystać w definicji SPAN. Na przykład:

<span class=BardzoWazne>To jest fragment dokumentu, formatowany zgodnie z definicją klasy BardzoWazne.</span>

To jest fragment dokumentu, formatowany zgodnie z definicją klasy BardzoWażne.

Inny przykład, w którym kilka pierwszych wyrazów akapitu jest wyświetlanych za pomocą małych kapitalików. Korzystamy tutaj z definicji:

.PierwszeWyrazy {font-variant: small-caps}

którą obejmujemy pierwsze trzy wyrazy - <span class=PierwszeWyrazy>.

To jest akapit, w którym trzy pierwsze wyrazy są wyświetlane za pomocą małych kapitalików.


Własności koloru i tła

Własności tekstu

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów. Communicator może błędnie pozycjonować niektóre elementy, zwłaszcza grafikę.

  • Odstępy między wyrazami (word spacing)
  • Odstępy między literami (letter spacing)
  • Dekoracja tekstu (text decoration)
  • Pusta przestrzeń (white space)
  • Transformacja tekstu (text transformation)
  • Wyrównanie tekstu (text alignment)
  • Wcięcie tekstu (text indent)
  • Odstępy między wierszami (line height)

Odstępy między wyrazami

Odstępy między wyrazami podajemy jednostkach miary. Na przykład:

<p style="word-spacing: 1cm">1-centymetrowe odstępy między wyrazami.</p>

1-centymetrowe odstępy między wyrazami.

Na razie nie akceptuje ich żadna przeglądarka

Odstępy między literami

Odstępy między literami podajemy jednostkach miary. Na przykład:

<p style="letter-spacing: 2mm">2-milimetrowe odstępy między literami.</p>

2-milimetrowe odstępy między literami, akceptowane przez IE.

Dekoracja tekstu

Rozróżnia się pięć rodzajów dekoracji tekstu: pozostawienie bez zmiany (none), podkreślenie (underline), nadkreślenie (overline), przekreślenie (line-throguh) i migotanie (blink)

. <a style="text-decoration: none" href="http://www.corel.com">To jest odsyłacz do firmy Corel.</a>

To jest odsyłacz do firmy Corel.

Jak widać, można się w ten sposób pozbyć domyślnego podkreślenia w odsyłaczu.

<p style="text-decoration: underline">To jest podkreślenie tekstu.</p>

To jest podkreślenie tekstu.

<p style="text-decoration: overline">To jest nadkreślenie tekstu.</p>

To jest nadkreślenie tekstu.

<p style="text-decoration: line-through">To jest przekreślenie tekstu.</p>

To jest przekreślenie tekstu.

<p style="text-decoration: blink">To jest migotanie tekstu.</p>

To jest migotanie tekstu w NC4.

Pusta przestrzeń

Polecenie white-space określa, w jaki sposób mają być wyświetlane spacje w tekście.

white-space: normal powoduje zamianę wielu sąsiadujących spacji na jedną.
white-space: pre powoduje wyświetlenie wszstkich sąsiadujących spacji.
white-space: nowrap nie pozwala na przełamanie wiersza, do momentu napotkania polecenia <br>.

Przykłady:

<p style="white-space: normal">Tutaj jest pięć spacji</p>

Tutaj jest pięć spacji.

<p style="white-space: pre">Tutaj jest pięć spacji</p>

Tutaj jest pięć spacji.

nowrap nie jest realizowane

.

Transformacja tekstu

Możliwa są cztery rodzaje transformacji tekstu: pozostawienie bez zmiany (none), zamiana pierwszych liter wyrazów na wielkie (capitalize), zamiana wszystkich liter na wielkie (uppercase) i zamiana wszystkich liter na małe (lowercase) - realizuje je IE.

To jest jakiś przykładowy akapit. Poddamy go transformacjom.

<p style="text-transform: capitalize">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p>

To jest jakiś przykładowy akapit. Poddamy go transformacjom.

<p style="text-transform: uppercase">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p>

To jest jakiś przykładowy akapit. Poddamy go transformacjom.

<p style="text-transform: lowercase">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p>

To jest jakiś przykładowy akapit. Poddamy go transformacjom.

Wyrównanie tekstu

Tekst w bloku możemy wyrównywać za pomocą czterech sposobów: do lewego marginesu (left), do prawego marginesu (right), do środka (center) i do obu marginesów jednocześnie).

<p style="text-align: left">To jest przykładowy akapit wyrównany do lewego marginesu.</p>

To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu.

<p style="text-align: right">To jest przykładowy akapit wyrównany do prawego marginesu.</p>

To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu.

<p style="text-align: center">To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów.</p>

To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów.

<p style="text-align: justify">To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów.</p>

To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów, jak w edytorach tekstów - prawy brzeg akapitu powinien być równy, a nie postrzępiony. To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów, jak w edytorach tekstów - prawy brzeg akapitu powinien być równy, a nie postrzępiony. .

Wcięcie tekstu

Wcięcie tekstu odnosi się do bloków tekstu i oznacza odstęp pierwszego wiersza bloku od lewego marginesu strony.

<p style="text-indent: 10%">To jest akapit, w którym pierwszy wiersz...</p>

To jest akapit, w którym pierwszy wiersz jest odsunięty od lewego marginesu o 10 procent , natomiast drugi wiersz i każdy następny rozpoczyna się już dokładnie od lewego marginesu.

<h2 style="text-indent: 1in">Tytuł rozpoczynający się w odległości 1 cala...</h2>

Tytuł rozpoczynający się w odległości 1 cala od lewego marginesu

Odstępy między wierszami

Style pozwalają regulować odstępy między liniami bazowymi elementów, np wierszy akapitu. Możemy podać wielkość absolutną, np. w centymetrach, albo względną, w procentach. 200% oznacza podwojenie odstępu, 50% - zmniejszenie o połowę.

<p style="line-height: 1cm">To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm...</p>

To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm.

<p style="line-height: 50%">To jest akapit, w którym odstęp między wierszami wynosi 50 proc. normalnego</p>

To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%.