TWORZENIE STRON WWW W JĘZYKU HTML

Cel tworzenia

Serwis WWW czy pojedynczą stronę projektujemy zazwyczaj, biorąc pod uwagę jeden z takich celów jak:

• chęć dotarcia do jak największej liczby użytkowników Internetu

• stworzenie efektownego serwisu

• prezentacja konkretnej informacji

• zaprezentowanie własnych umiejętności

Niektóre z powyższych celów pozostają w konflikcie z innymi, co wymaga od projektanta starannego ich wyważenia, (dotyczy szczególnie dwóch pierwszych celów). W przeciwnym wypadku powstanie strona zawierająca mnóstwo informacji, aczkolwiek przerażająco nudna i nieciekawa estetycznie. Z kolei uatrakcyjnienie strony różnymi trikami i efektami może doprowadzić do narażenia Internautów na ciągłe komunikaty o błędach, a stronę obejrzeć będzie można tylko z wykorzystaniem jednego konkretnego programu klienckiego. Często też na stronach projektantów pragnących pochwalić się swoimi umiejętnościami w programowaniu lub posiadaniem najnowszych narzędzi często panuje taki natłok efektów specjalnych, że na treść nie starcza już miejsca.

Projekt strony - ogólne zasady

Największy wpływ na atrakcyjność strony ma jej ogólny wygląd. Projekt graficzny, czas ładowania, użyte czcionki czy łatwość nawigacji to czynniki decydujące o powodzeniu serwisu internetowego

Czynniki, które należy brać pod uwagę projektując stronę:

Szybkość połączenia

Staraj się unikać technologii typu Flash i "ciężkiej" grafiki jeśli spodziewasz się, że użytkownicy Twojego serwisu bedą w wiekszości łączyć się z Internetem przez modem.

Zgodność z przeglądarkami

Mimo rozwoju technologicznego przeglądarek niektóre problemy pozostają nierozwiązane. Netscape na przykład wspiera tylko niewielką liczbę funkcji arkuszy stylów CSS (Cascading Style Sheet). Jeśli decydujesz się na użycie CSS, a znaczna część osób, które będą odwiedzać Twój serwis będzie używać Netscape należy przygotować różne wersje stron dla różnych przeglądarek. Pamiętaj o sprawdzeniu, jak Twoja strona wygląda w różnych przeglądarkach. W tym celu możesz użyć narzedzia AnyBrowser.com

Wymagania sprzętowe

Nie zakładaj, że użytkownicy Twojego serwisu mają najnowsze, bardzo szybkie komputery. Z umiarem prezentuj ruchomą grafikę, czy też pliki muzyczne.

Rozdzielczość monitora

Projektuj swoje strony biorąc pod uwagę najczęściej stosowane przez użytkowników rozdzielczości monitora. Aktualnie standardowymi rozdzielczościami są: 800x600 oraz 1024x768.

Należy unikać typowych błędów:

Błędy językowe

Jeśli popełnisz błędy w wyrazach znajdujących się w meta tagach wyszukiwarki, trudno będzie znaleźć Twoją stronę. Także błędy w wyrazach występujących w treści stron świadczą o braku profesjonalizmu. Przed publikacją zawsze należy sprawdzać strony np. przy użyciu słownika z programu Microsoft Word.

Under constuction

Należy unikać "stron w budowie" - ani Internauci, ani redaktorzy katalogów internetowych nie lubia takich stron. Lepiej poczekać i pokazać gotową stronę.

Błędy na stronie

Sprawdź dokładnie wszystkie elementy serwisu: odnośniki, formularze, mechanizmy wysyłania maili czy też cookies. Błędy na stronach serwisów mogą powodować kłopoty z indeksowaniem przez roboty.

10 gwarantowanych sposobów położenia własnej kariery jako twórcy WWW

1. Nie rób nic

2. Jeśli już robisz, rób kiepsko

3. Wykaż się nieznajomością rynku

4. Bądź chamski

5. Obiecuj coś, czego nie możesz spełnić

6. Nie przyjmuj krytyki

7. Wykaż się nie znajomością procesu "produkcji"

8. Nie adaptuj się do nowych warunków

9. Bądź nieznośny w trakcie współpracy nad projektem

10. Bądź przekonany, że to łatwe

10 rzeczy, które musisz robić, jeśli chcesz zostać "dobrym" twórcą www.

1. Oglądaj mnóstwo witryn www (obserwuj dziedzinę, w której chcesz działać). Zwróć uwagę na to, co pojawia się na rynku. Dobre witryny odwiedzaj wielokrotnie. Poszukaj odpowiedzi na pytania: dlaczego ta witryna jest tak świetna i jak to zostało zrobione. Spróbuj pisać własne sprawozdania i recenzje z odwiedzonych witryn, które zrobiły na tobie dobre lub złe wrażenie.

2. Szukaj i czytaj case studies, wdrożeń komercyjnych serwisów www. Tyle ile się da.

3. Przyłącz się do jakiejś grupy dyskusyjnej, by wzbogacać swoje informacje, rozwijać sieć kontaktów, zdobywać wsparcie moralne oraz pozytywne sprzężenie zwrotne.

4. Subskrybuj i czytaj magazyny z branży, zarówno te papierowe jak i elektroniczne. Zdobywaj informacje o przemyśle sieciowym i bądź na bieżąco z wydarzeniami w kraju i na świecie, a przede wszystkim w USA.

5. Nie wierz statystykom. Jedyna prawdziwa statystyka to ta, że 100% tych, którzy robią udane witryny WWW kiedyś tego nie robili.

6. Codziennie i regularnie przykładaj swoje cztery litery do krzesła, choćby na godzinę. Wyznacz sobie minimum 30 minut dziennie albo jakąś minimalną docelową ilość pracy.

7. Rób to, co masz do zrobienia i skończ to, co robisz. Nie trać czasu. Baw się dobrze! Perfekcją będziesz się martwił później.

8. Bądź wytrwały i angażuj się w to, co robisz; jeśli nie potrafisz, naucz się tego.

9. Miej wiarę w siebie i swój talent: to Ty jesteś wartością - również w sensie handlowym - a nie twoje witryny. Jeśli Ty sam nie wierzysz w siebie, jak możesz oczekiwać tego od innych?

10. Co sześć miesięcy zadaj sobie pytanie: "Czy bawi mnie to wszystko?" Jeśli rzecz robi się bolesna, znajdź sobie inną zabawę.

Podstawowe błędy

1. Zawartość merytoryczna

Jeśli zawartość twojego artykułu (strony WWW) jest kiepska merytorycznie, a tekst zredagowany niefachowo, to czytelnik przerwie lekturę już po kilku linijkach. W sieci jest duża ilość stron bez jakichkolwiek konkretnych informacji, czy ogólnego pomysłu, a przecież wystarczy tak niewiele, aby prostymi środkami przedstawić coś naprawdę interesującego w atrakcyjny sposób. Wystarczy trochę się postarać i uruchomić wyobraźnię. Niejednokrotnie mamy też do czynienia z sytuacją, kiedy merytoryczna zawartość strony jest w stanie skutecznie zatuszować niedociągnięcia natury estetycznej, na które i tak najprawdopodobniej nie zwrócimy uwagi.

2. Nieczytelna nawigacja

Osoba odwiedzająca naszą stronę powinna w każdym jej zakątku wiedzieć, gdzie się aktualnie znajduje i mieć łatwy dostęp do innych podstron. Dobrym sposobem jest umieszczanie na każdej stronie pewnego charakterystycznego zbioru odnośników nawigacyjnych (tekstowych lub graficznych) nadających jednocześnie określony i rozpoznawalny charakter witrynie. Projektowanie powinno już od samego początku być tak opracowane, aby dodawanie kolejnych elementów (rozbudowa) nie niosło za sobą konieczności przebudowania całej strony i burzenia raz ustalonego porządku.

3. Kolorowo i błyskotliwie

Utrzymanie odpowiednio dopasowanej kolorystyki strony, to jeden z elementów sprawiający najwięcej problemów początkującym (ale i bardziej zaawansowanym). Czasami odnosi się wrażenie, iż autorzy niektórych stron założyli, że im bardziej agresywne zestawienie kolorów, tym większa będzie liczba odwiedzin na ich witrynie. Ekstremalnym przykładem może być strona, gdzie użyte zostało animowane tło o zmieniających się tęczowych kolorach. Oczywiście tekst na takim tle czyta się nie najlepiej.

4. Zbytnia strukturalizacja - ramki, rameczki

Dość częstym błędem w sztuce jest ustrukturyzowanie. Wchodzimy na stronę główną a tam cztery podstrony, każda w osobnej ramce. Na mnie robi to fatalne wrażenie. Prawie każdą witrynę da się tak skonstruować, aby nie było konieczności używania ramek. Nie neguję całkowicie ramek. Uważam że należy je stosować z umiarem. Zastosowanie ich, poza częstym psuciem estetyki całej strony (niezbyt ładnie wyglądające suwaki), komplikuje skutecznie nawigację, nierzadko doprowadza do zastojów podczas ładowania i dość często utrudnia zapis na dysku. Z prawidłowym interpretowaniem ramek przy zapisie radzą sobie jedynie najnowsze przeglądarki.

5. Dołączanie dużych plików

Muzyka i animacja są bardzo efektownym uzupełnieniem prezentacji. Niestety pliki z tego rodzaju elementami są bardzo duże i dlatego ich ściąganie może trwać bardzo długo. Zdarza się, że podajemy adres strony i czekamy, czekamy... . Nie jest to wina przeciążonego łącza, ale np. uroczego motywu muzycznego, który usłyszymy w podkładzie (jeżeli mamy ustawiony odtwarzacz dźwięku). Jeżeli już chce się zaprezentować motywy muzyczne lub animacje, to wypada się zapytać lub dać opcję ściągnięcia go na dysk.

6. Pokazywanie najnowszych sztuczek technicznych

Są osoby, których największą ambicją jest umieszczenie wszystkich możliwych do zastosowania nowinek technicznych, jakie ostatnio się ukazały, w połączeniu z czystym językiem (najczęściej html). Liczniki, zegary odmierzające czas dla kilku różnych stref czasowych, czy wyświetlanie ruchomych napisów na pasku nawigacyjno-informacyjnym na dole strony lub instrukcje interpretowane tylko przez jeden rodzaj przeglądarki. Takie sztuczki bardzo często denerwują nie tylko swoja formą, długim czasem ściągania, ale również tym, że nie zostaną uruchomione przez starszy typ przeglądarek. Trzeba brać pod uwagę, iż nie wszyscy maja szybkie łącza, najnowsze przeglądarki i nerwy ze stali. Irytację powodować może zwłaszcza duża częstotliwość pojawiania się okna informacyjnego o różnych błędach interpretowanych przez przeglądarki.

7. Ortografia

Niektórzy uważają, że Internet jest miejscem, w którym nie obowiązują żadne konwenanse istniejące w realnym życiu. Niestety jest to błędne pojęcie. Internauci jak najbardziej zwracają uwagę na ortografię i razi ich gdy ktoś robi podstawowe błędy ortograficzne.

Rodzaje standardów

Można wyróżnić kilka rodzajów standardów, które należy uwzględnić przy projektowaniu i tworzeniu serwisów WWW. Pierwszym z nich są standardy oficjalne, zawierające specyfikację protokołów, specyfikacje języków używanych przy programowaniu WWW, sposób kodowania znaków narodowych; drugim - standardy nieformalne, nie ustanawiające norm, będące jednak pomocą dla osób odpowiedzialnych za tworzenie stron i serwisów Web; można by do nich zaliczyć podział obowiązków w grupie webmasterów, język stron, wielkość zawartych plików graficznych itp. Standardy oficjalne są tymi, których przestrzegać należy zawsze i bezwzględnie, standardy nieformalne stanowią jedynie ułatwienie. Sposób, w jaki mogą być przestrzegane standardy jest różny, niekiedy opowiedzenie się za standardem ma miejsce w chwili wyboru oprogramowania (np. serwer HTTP-Hypertext Transfer Protocol), w innych zaś przypadkach jest kwestią stosowania odpowiednich norm w pracy projektanta czy administratora.

Konkretne standardy, mające bezpośredni związek z projektowaniem i uruchamianiem serwisów WWW to:

1.Standardy oficjalne

• standard definiujący protokół HTTP (najnowsza wersja 1.1)

• standard definiujący język HTML (najnowsza wersja 4.0)

• standard definiujący sposoby kodowania znaków narodowych

• specyfikacje używanych języków programowania, w wypadku, gdy stroną, po której odbywa się wykonanie programu jest strona klienta (Java, JavaScript)

1. Protokół HTTP

Protokół HTTP określa, najprościej mówiąc, metody porozumiewania się naszej przeglądarki z serwerem WWW abyśmy mogli obejrzeć wybraną stronę WWW. Zasada działania tego protokołu jest następująca: przeglądarka wysyła do serwera żądanie o wysłanie określonego dokumentu oraz kilka innych, istotnych dla serwera informacji, a serwer wysyła do przeglądarki dokument wraz z serią innych informacji. Każde zapytanie (żądanie) klienta (czyli przeglądarki) składa się z trzech części:

• linii zapytania (klient: polecenie method, adres dokumentu i wersja protokołu HTTP; serwer: wersja protokołu HTTP, kod stanu serwera, opisujący m.in. informację czy dana strona istnieje, czy nie i opis.

• listy nagłówków (klient: opcjonalne informacje powiadamiające serwer m.in. o tym, jakie rodzaje dokumentów potrafi obsłużyć przeglądarka, typ przeglądarki itp.; serwer: dane dotyczące serwera i dokumentu)

• części zasadniczej (klient: informacje dodatkowe wykorzystywane przez serwer np. podczas wykonywania skryptów CGI; serwer: treść dokumentu, wynik działania skryptu CGI bądź, w wypadku gdy żądany dokument nie istnieje, bądź skrypt nie może być wykonany, czytelną informację o zaistniałym błędzie)

Specyfikację protokołu HTTP jest istotna bezpośrednio tylko dla twórców serwerów i przeglądarek WWW, jednak znajomość mechanizmu działania HTTP przydatna jest także podczas projektowania stron.

1.  Język HTML

Hypertext Markup Language (HTML) jest prostym językiem formatowania tekstu używany do tworzenia dokumentów hipertekstowych niezależnych od platformy. To HTML jest językiem, który sprawia, iż oglądane przez nas strony wyglądają tak samo ( a przynajmniej podobnie), niezależnie od tego z jakiej przglądarki  korzystamy (Internet Explorera, Netscape Navigatora czy innej). Najnowsza specyfikacja HTML opisuje jego wersję oznaczoną numerem 4.0, większa część przeglądarek WWW pozwala na pełne korzystanie jedynie ze stron napisanych w starszych wersjach języka.

Generalnie zawsze, a przynajmniej wtedy, jeśli kierujemy się tym, by ze strony korzystać mogło jak najwięcej użytkowników, przy projektowaniu korzystać ze specyfikacji HTML o jedną wersje wstecz względem najnowszej (w chwili obecnej odpowiada to wersji 3.2). Pamiętać należy także o tym, że właściwie żaden z popularnych programów służących do korzystania z WWW nie jest w pełni zgodny z oficjalną specyfikacją HTML, co spowodowane jest powolnym, w stosunku do rozwoju wymagań użytkowników, rozwojem tejże specyfikacji. Aby sprostać wymaganiom i rosnącym możliwościom oferowanym przez Internet, firmy oferujące przeglądarki wprowadziły zmiany i rozszerzenia obejmujące rozwiązania niektórych, nie istniejących w standardzie, a oczekiwanych i potrzebnych funkcji, głównie, choć nie tylko, obejmujących funkcje multimedialne.

Z dużą ostrożnością należy traktować rozszerzenia stosowane przez poszczególnych producentów przeglądarek, nawet tych, które stosuje największa ilość Internautów. Nieufność tą uzasadnia przede wszystkim niemożność pewnego stwierdzenia, który z programów jest rzeczywiście najpopularniejszy (większość publikowanych sondaży jest częścią działań marketingowych producentów oprogramowania) oraz, co być może ważniejsze, nietrwałość takich standardów; któż bowiem zagwarantuje, że uznana za najpopularniejszą przeglądarka będzie taką za rok albo dwa. Przeprojektowywanie strony od początku jest bardziej pracochłonne niż stosowanie standardu.

Należy także pamiętać o użytkownikach, korzystających z przeglądarek tekstowych (wbrew pozorom np. lynx jest bardzo popularną przeglądarką). Jeśli nie jest możliwe stworzenie osobnej wersji strony, przeznaczonej dla przeglądarek tekstowych, dobrze jest pamiętać przynajmniej o umieszczeniu opisów do rysunków, które będą się pojawiać zamiast nich (przydatne także dla osób, które mają, ze względu na wolną transmisję (np. połączenie modemowe) wyłączoną obsługę rysunków w przeglądarce graficznej.

2. Kodowanie znaków narodowych

Czas przejść do problemu, który od dawien dawna stanowi powód wielu tzw. flame wars. Jest nim problem kodowania polskich znaków w serwisach WWW. Wydawałoby się, iż problem nie istnieje: Polska Norma (PN-93 T-42118) definiuje bowiem odpowiedni sposób kodowania. Polska Norma ma jednak to do siebie, iż obowiązuje jedynie w Polsce, natomiast większość oprogramowania powstaje jeśli nie za oceanem, to przynajmniej na pewno za granicą. Sam ten fakt nie powodowałby jeszcze zamieszania, biorąc pod uwagę, że Polska Norma zgodna jest w tym względzie ze standardem ogólnoświatowym, ISO-8859-2. Niestety, niektórzy producenci oprogramowania usiłowali wypromować własne pomysły dotyczące tego, jak mają być reprezentowane znaki polskiego alfabetu. Mowa o firmie Microsoft, która wprowadziła tzw. stronę kodową 1250, usiłując metodą faktów dokonanych uczynić ją standardem. Internet jednak, w przeciwieństwie do rynku aplikacji biurowych nie został praktycznie zmonopolizowany przez giganta z Redmond. Microsoft z czasem uznał ISO-8859-2 za standard w sieci i wszystkie aplikacje internetowe tej firmy pozwalają na jego obsługę. Problem nie zniknął jednak - w większości programów działających na platformie MS Windows CP-1250 nadal obowiązuje. Dotyczy to również narzędzi do tworzenia stron WWW, a także powoduje trudności przy konwertowaniu dokumentów napisanych przy pomocy innych aplikacji. Gdzieniegdzie w Internecie nadal pokutują strony, na których polskie znaki są do odczytania jedynie dla osób używających MS Windows, a co gorsza zdarza się nadal (chociaż na szczęście zauważalna jest tendencja spadkowa) nowe strony kodowane w CP-1250. Zupełnie niezrozumiałe jest (i wyraźnie nacechowane złą wolą) promowanie CP-1250 w publikacjach mających na celu nauczyć podstaw pisania stron w języku HTML i ze swej strony stanowczo odradzam korzystanie z takowych "samouczków". Niestety problem z kodowaniem polskich znaków nie kończy się na konflikcie ISO-8859-2 z CP-1250. Oliwy do ognia dolewa standard języka HTML, proponując własne metody oznaczania znaków nie znajdujących się w alfabecie łacińskim, z których korzystają niektóre aplikacje służące do tworzenia stron WWW, co gorsza niezależnie od platformy systemowej (te same metody stosuje np. Front Page Microsoftu, jak i tryb PGSGML w uniksowym edytorze Emacs). Generalnie, problem ten dotyczy narzędzi, które przewidują tworzenie stron zgodnych z ISO-8859-1, jednak dobrze jest zwrócić uwagę (podglądając efekt działania programu jakimkolwiek edytorem tekstowym), czy zamiast znaków polskiego alfabetu nie pojawiają się znaczki typu &oacute.

3. Języki programowania WWW

Od niedawna programowanie WWW jest jedną z szybciej rozwijających się i najbardziej obiecujących dziedzin internetowej informatyki. Programy działające via WWW podzielić można na dwa podstawowe rodzaje:

• Programy wykonywane na serwerze WWW

• Programy wykonywane po stronie klienta WWW

Przykładem języków wykorzystywanych w programach pierwszego typu są Java i JavaScript. Języki takie jak Java, dzięki temu, co stanowi ich istotę, czyli dzięki niezależności od platformy mają stać się językami przyszłości. Oficjalnie firma Sun (twórca języka Java) ma prawo ustanawiać standard tego języka, istnieje jednak kilka jego wersji różniących się w szczegółach. Nie polecam w związku z tym stosowania stron wykorzystujących Javę bez (przynajmniej) pozostawienia użytkownikowi możliwości wyboru strony bez tego udogodnienia.

Inaczej wygląda sytuacja, jeśli chodzi o języki, które wykonują programy służące modyfikacji zawartości stron bądź do tworzenia dynamicznie dokumentów WWW. Dzięki zastosowaniu mechanizmu CGI (Common Gateway Interface), który zleca serwerowi wykonanie odpowiedniego programu (np. na podstawie umieszczenia w URL adresu skryptu wraz z parametrami) i przesłanie wyników jego działania do klienta (w przeciwieństwie do języków pierwszego rodzaju, które przesyłają klientowi kod programu do wykonania) są one niewidoczne dla przeglądarki, która otrzymuje dokładnie takie same dane, jak w wypadku przesyłania przez serwer strony będącej zwykłym dokumentem HTML. W wypadku, gdy serwer WWW pracuje pod kontrolą systemu operacyjnego U*X, do pisania skryptów CGI można użyć dowolnego języka programowania, którego kompilator badź interpreter zainstalowany jest na serwerze, takiego jak C, C++, tcl, Pascal, czy nawet języka skryptów shella; najczęściej jednak używany jest język Perl (w dowolnej wersji, najlepiej jednak w wersji 5). Skrypt CGI pobiera parametry umieszczone w adresie URL, który go uruchamia i wyprowadza efekt swojego działania na standardowe wyjście, a serwer przesyła go do programu klienckiego.

2.Standardy nieoficjalne

• język używany na stronach serwisu

• standardy bezpieczeństwa

• wielkość pojedynczej strony, wielkość plików graficznych prezentowanych na stronach

Najważniejsze spośród standardów nieoficjalnych starają się określić dobre zwyczaje, które warto stosować podczas projektowania strony. Część z nich omówiłem wcześniej, teraz pozostaje jedynie zwrócić uwagę na pozostałe. Warto przygotować stronę w taki sposób, aby jej ładowanie wraz z rysunkami zajęło niezbyt wiele czasu. Dokonywane na Zachodzie badania dotyczące preferencji użytkowników pokazały, iż w wypadku, gdy strona ładuje się w całości dłużej niż 20 sekund, większość potencjalnych jej odbiorców przerywa ładowanie i rezygnuje z oglądania strony. Aby tak się nie działo, należy zadbać o to, by:

• pojedyncza strona nie była zbyt duża

• wielkość plików graficznych włączonych do strony pozwalała na ich szybkie ściągnięcie.

Lepiej jest stronę podzielić na niewielkie fragmenty, niż dopuścić, by jej wielkość nadmiernie wzrosła. Wielkość pojedynczego pliku graficznego powinna być najmniejsza z możliwych, nie większa jednak niż 40kb (optimum to 10-20kb).

3. Podsumowanie

Standardy nie są bynajmniej stworzone po to, by komukolwiek przeszkadzać, wręcz przeciwnie, mają one za zadanie jedynie pomoc projektantom. Z tego powodu dziwna może być niechęć do ich stosowania. Być może powodem jest niechęć do ciągłej nauki i trzymania ręki na pulsie, czytania wielu umieszczonych w różnych zakamarkach Internetu dokumentów, sprawdzania efektów swej pracy na wiele różnych sposobów. Standardy dla WWW są ustanawiane przez W3C i właśnie na stronach tej organizacji najlepiej szukać dokładniejszych informacji.

Struktura witryny

W trakcie planowania struktury witryny internetowej musimy myśleć przestrzennie, inaczej niż podczas tworzenia tradycyjnej papierowej publikacji, gdy myślimy tylko o następnych stronach ułożonych w niezmienialnym porządku. Tworząc witrynę www należy wziąć także pod uwagę niezmierzoną ilość czynników oraz różnorodne możliwości odbioru odwiedzającego.

Przejrzystość struktury ułatwi nam dotarcie przekazem do potencjalnego odbiorcy.
Dzięki użyciu łatwo zrozumiałych i krótkich nazw połączeń, odwiedzający witrynę łatwo zorientuje się w jej zawartości i bez trudu znajdzie drogę do potrzebnej strony między poziomami informacji zawartymi w:

Stronie Głównej Home Page,

Stronach Tematycznych Major Submenu

Stronami z Treścią Content Pages.

W zaawansowanej strukturze witryny, z informacją podzieloną na trzy poziomy, odwiedzający nie może błądzić miedzy kolejnymi stronami, a korzystając z kolejnych menu powinien osiągnąć każdą stronę za trzema najwyżej kolejnymi kliknięciami.

Odwiedzający witrynę www powinien łatwo orientować się w zawartości, a konstruktor HTML powinien stosować niezbędne ułatwienia - nie zapominając, że hipertekst nie powiększy ilości informacji, ale za to ułatwi jej znalezienie.
Stworzenie przejrzystej struktury nawigacyjnej, gdzie można zajrzeć do każdego zakątka witryny nie klikając więcej niż trzy razy, nie jest trudne. Do realizacji tego celu nie jest nawet konieczne używanie ramek.

Jeśli zależy nam aby odwiedzający nie tracił czasu, załączmy spakowaną zawartość i ten kogo to interesuje, po skopiowaniu będzie mógł uważnie poznać treść. Odwiedzający łatwo zauważą troskę webmastera i chętnie odwiedzą to miejsce w przyszłości. Podczas rozbudowy witryny łatwo rozbić dobrze zaplanowana strukturę. Wprowadzając kolejne zmiany należy zatem sprawdzać, czy nowe strony pasują do wcześniejszych. Również po zakończeniu konstrukcji witryny winniśmy jeszcze raz zastanowić się nad logiką struktury i ujednolicić ją tak, aby odwiedzający mogli się łatwo orientować.

Struktura sekwencyjna

Uporządkowana seria stron. Połączenia prowadzą od jednej strony do następnej. Ułatwieniem dla odwiedzających będzie dwupoziomowy dostęp, gdzie każda strona zawiera dodatkowe połączenie z pierwszą stroną. Taka struktura może być przydatna w opracowaniu stron dla dzieci i jest wygodnym sposobem podzielenia materiału, który w innym przypadku musiałby być pokazany na jednej stronie. Strony nie muszą zawierać menu.

Struktura hierarchiczna

Logiczny ciąg stron zawierających priorytetowo zorganizowaną treść. Mieści ona informacje dopasowane do poziomu lub potrzeb odwiedzających - zazwyczaj z ustopniowaną zawartością, od najważniejszej do najmniej istotnej. Pozwala na ułożenie informacji w dowolny sposób. Można ją łączyć ze strukturą sekwencyjną. Dla wygody odwiedzających zawiera ona indeksy alfabetyczne lub inne. Wadą tej struktury jest łatwość zakłócenia orientacji. W rezultacie odwiedzający może się pogubić i sfrustrowany nielogiczną strukturą przestanie interesować się zawartością takiej witryny.

Struktura formacyjna

Serie stron podporządkowanych określonemu celowi z łatwą możliwością wyszukiwania odpowiadających informacji, nawet jeśli znajdują się one w oddzielnych grupach tematycznych. Wszystkie strony powinny zawierać bezpośrednie połączenie z pierwszą stroną, by ułatwić zgubionemu odwiedzającemu łatwe odnalezienie się. Projektowanie witryny o strukturze formacyjnej jest zależne od jej przewidywanych funkcji i potrzeb odwiedzającego.

Struktura wirtualna

Strony z połączeniami do wszystkich stron i z dowolnym kluczem wyszukiwania. Tytuły i podtytuły bez hierarchii ważności. Wspólne tematy z informacją cząstkową lub jej rozwinięcia, prowadzące od gniazd tematycznych. Zorganizowana podobnie jak sieć Internetu z połączeniami w dowolnym kierunku. Może zawierać inne typy struktur. Wyrobiony gość nie pogubi się w internetowej autoorganizacji, ale niedoświadczony odwiedzający może tu łatwo pobłądzić.

Dobór formatów dla internetowych grafik

Twórcy stron internetowych podczas realizacji swoich projektów często nie uwzględniają niskiej przepustowości łączy przesyłowych. Dobór właściwego formatu grafik internetowych umieszczanych na stronach oraz zadbanie o rozsądny rozmiar plików jest wyrazem nie tylko troski o odwiedzającego witrynę, ale także pozwala zachować dobry wizerunek firmy.

Webmaster powinien zwrócić szczególną uwagę na ilość oraz objętość zamieszczanych na stronach WWW grafik i animacji. Wstawiając obiekty graficzne, należy pamiętać, czemu służy dany rodzaj grafiki. Dostosowanie jakości grafik do rzeczywistych potrzeb użytkownika odwiedzającego witrynę pozwoli na zoptymalizowanie jej rozmiaru. Przykładem mogą być miniatury (ang. thumbnails) umożliwiające uproszczony i natychmiastowy podgląd właściwego obrazu. Nie ma potrzeby zapisywania ich w dobrej jakości i rozmiarach większych niż 120 x 120 pikseli. Częstym błędem jest również stosowanie dużej rozdzielczości obrazów i ich "zmniejszanie" za pomocą atrybutów szerokości i wysokości w kodzie HTML.

Znajomość właściwości formatów graficznych pozwala projektować lepsze grafiki na potrzeby Internetu. Różne formaty plików graficznych umożliwiają znaczące zredukowanie rozmiarów plików przy jednoczesnym zachowaniu dobrej jakości obrazu. Aby to osiągnąć, trzeba odpowiednio dobrać format zapisu do cech obrazu. Nieprawidłowe stosowanie formatów nie tylko zwiększa rozmiary plików, ale także powoduje znaczną i często niepotrzebną utratę jakości wizualnej grafiki. Przykładem może być zastosowanie formatu JPG do zapisania obrazów o ostrych krawędziach i jednolitych kolorach.

Istniejące standardy

Popularne przeglądarki internetowe obsługują formaty grafiki statycznej: JPG, GIF, PNG; do animacji wykorzystuje się najczęściej pliki typu GIF i prezentacje Shockwave Flash.

Aby dobrać odpowiedni format, webmaster powinnien przede wszystkim sklasyfikować dostępne obiekty graficzne stosowane na stronach internetowych. Po określeniu cech różnych rodzajów grafik należy przyporządkować dla nich formaty i parametry zapisu, dzięki którym otrzymamy odpowiednią jakość i minimalny rozmiar plików (Tablica 1).

Tablica 1

Rodzaje obiektów graficznych i zalecane formaty
Obiekt graficzny	Cechy charakterystyczne	Optymalne formaty zapisu i parametry
Interaktywne przyciski - odnośniki	Zawierają napisy, liczba kolorów zależna od zawartości. Na obiekt składają się dwa obrazy. Dobra jakość.	Dobór formatu w zależności od cech. GIF, PNG. JPG 40% jakości. Flash.
Animacje	Średnia liczba kolorów (poniżej 128), niewielkie rozdzielczości. Dobra jakość.	GIF 16, 128 kolorów, optymalizacja. Flash.
Galerie internetowe	Duża liczba kolorów, łagodne przejścia tonalne, wysokie rozdzielczości. Konieczna wysoka jakość.	GIF, PNG do 4 kolorów (ryciny), pozostałe: JPG 40-50% jakości.
Miniatury, tzw. thumbnails	Duża liczba kolorów, niskie rozdzielczości, funkcja podglądu - zazwyczaj niska jakość.	GIF, PNG do 4 kolorów (ryciny), pozostałe: JPG 30% jakości.
Obrazki "tekstowe"	Zawierają napisy, niewielką liczbę kolorów. Wysoka jakość przy niewielkich rozmiarach.	GIF, PNG 16, 32 kolory.
Linie rozdzielające	Obrazy o dużych szerokościach, często animowane i przezroczyste - krzywoliniowe. Dobra jakość.	Dobór w zależności od liczby kolorów. GIF, PNG do 128 kolorów. JPG 50% jakości.
Obrazy tła stron Obrazy tła stron cd.	Często duża liczba kolorów. Średnia jakość.	Dobór w zależności od charakteru wzoru na obrazku. Niewielka liczba kolorów: formaty GIF, PNG. Duża liczba kolorów: JPG 30-40% jakości.

Aby zapewnić małe rozmiary plików, warto także skorzystać z możliwości, jakie udostępnia nam dany format. Zamiast podchodzić do całej wykorzystanej grafiki w ten sam sposób, powinniśmy dostosować parametry zapisu do każdego obrazu indywidualnie. Dzięki temu możemy dodatkowo zredukować rozmiary pliku, np. obraz 16-kolorowy zapisujemy w formacie GIF/PNG z paletą 16 kolorów, a nie 256.

Jeśli obraz ma kilka kluczowych cech, to trzeba spróbować dobrać odpowiedni format, np. za pomocą narzędzia eksportu znajdującego się w programach: Macromedia Fireworks, Adobe Photoshop czy też Paint Shop Pro. Można w nich dobierać różne formaty i ustalać parametry, na bieżąco obserwując zmiany (jakościowe i objętościowe) oraz porównywać z trzema pozostałymi obrazami (ekran podzielony jest na cztery części).

Obrazek z tekstem charakteryzuje się niewielką liczbą kolorów i powierzchniami o jednolitych kolorach. Po zastosowaniu formatu JPG otrzymujemy rozmyty obraz, a przy dużej kompresji - znaczną utratę jakości (pojawiają się nieestetyczne plamy). W przypadku formatów GIF i PNG nie występują żadne zniekształcenia obrazu, uzyskujemy przy tym niewielki rozmiar pliku.

Formaty GIF i PNG nie nadają się do obrazów o dużej liczbie kolorów, gdyż rozmiar palety jest ograniczony do 256. Co prawda w formacie PNG można zastosować paletę 16 mln kolorów, jednak plik będzie miał zbyt dużą objętość, aby umieścić go na stronie WWW. Obrazy o bogatej kolorystyce będą przytłumione i z plamami o jednolitych kolorach. Można to poprawić, stosując rozpraszanie kolorów (ang. dithering); jest to jednak półśrodek, lepiej użyć formatu JPG - uzyskamy ładniejszy wygląd i dużo mniejsze rozmiary.

W przypadku animacji GIF również możliwe jest zmniejszanie rozmiaru pliku. Najbardziej przydatną cechą formatu jest przezroczystość, która pozwala na zredukowanie wielkości kolejnych klatek animacji do rzeczywiście niezbędnych fragmentów obrazu. Zmieniające położenie elementy animacji widoczne są w postaci prostokątów - reszta obszaru klatki jest przezroczysta. Tłem animacji jest pierwsza klatka, która jest "widoczna" przez cały czas - w miejsce przezroczystych pikseli pojawiają się piksele z tła.

Jeśli podczas optymalizacji dodatkowo dostosujemy rozmiar palety kolorów do liczby kolorów występujących w animacji, uzyskamy łącznie kilkadziesiąt procent oszczędności rozmiaru przy niezmienionej jakości.

KOMPOZYCJA STRONY

Kompozycja strony www zawiera następujące funkcjonalne i estetyczne elementy struktury:

1. wyróżnienia — czyli podział znaczeniowy — na akapity, działy, części, rozdziały itp.

2. odsyłacze — czyli połączenia hipertekstowe w tekście i ilustracjach

3. typografia — czyli sztuka tworzenia łatwego w odbiorze przekazu wzrokowego

4. efekty — czyli elementy emocjonalne: ilustracje, animacje, dźwięk itp.

W dobrze opracowanej typografii, pojęcia i graficzne elementy przekazu uzupełniają się wzajemnie tworząc harmonijną całość. Celem tej kompozycji jest możliwie pełne i dobitne wyrażenie myśli autora, jak też i wywołanie pożądanej reakcji.

Skojarzenie myśli i wyobrażeń powinno pobudzić czytelnika do powiązania treści symbolów wyrażonych z pomocą sztuki typografii z dziełem artysty ilustratora.

System sygnałów działających na oko czytelnika można łatwo zakłócić każdym błędem w sztuce typografii, dekoncentrującym wyobraźnię czytelnika. Rezultatem może być nie odebranie przez niego przekazu.

Konstrukcja czytelnego przekazu

Dobrze napisany artykuł lub zaprojektowana strona internetowa powinny:

• informowanić, edukować lub zapewnić rozrywkę

• ułatwiać odszukanie informacji

• pomagać w ich zrozumieniu i zapamiętaniu

• sprawiać, by czytanie było przyjemnością

Konstrukcja merytoryczna:

Tytuł/Nagłówek

Tytuł jest bowiem pierwszym elementem który powinien wywołać zainteresowanie. Dlatego powinien być zwięzły i przedstawiać istotę artykułu (Internet-szczegółowe uwagi)

Lead

Artykuł powinien rozpoczynać się od paragrafu zawierającego abstrakt informacji z istotą przekazu i wyjaśniać dlaczego jest ważny. Zawsze rozpoczynać się od tego co najważniejsze. Ułatwi to ewentualny skrót wiadomości.

Rozwinięcie informacji

To miejsce na dodatkowe fakty, wyjaśnienie implikacji oraz zestawienie do podobnych zagadnień lub wydarzeń w branży.

Wyjaśnienie podłoża informacji

To miejsce na wyjaśnienie istoty informacji dla osób spoza branży (nie specjalistów).

Porady techniczne:

Wolna przestrzeń i paragrafy

Każda odrębna kwestia, myśl, temat powinny mieścić się w odrębnym paragrafie, oddzielonym od pozostałych przestrzenią. Pomiędzy paragrafami stosuj podwójne odstępy. Używanie wolnej przestrzeni sprawia bowiem, że przekaz jest bardziej przejżysty i zachęcający dla czytelnika. Strona sprawia wrażenie łatwej do czytania, gdy paragrafy są krótkie.

Na początku i na końcu dokumentu powinny znajdować się krótsze paragrafy (3-5 linii). W środku dokumentu mogą być trochę dłuższe, nie powinny jednak przekraczać 8, 9 linii.

Linie i odstępy między nimi

Nigdy nie ustawiaj tekstu tak aby był wyświetlany na całej szerokości ekranu - wzrok wtedy prędzej gubi linie. Każdy pewnie miał wątpliwą przyjemność czytania linijek tekstu długich na szerokość monitora, kończąc linie i zaczynając nową wzrok czasami zeskakuje dwie linie niżej, lub czytasz jeszcze raz to samo. Postaraj się układać tekst w wąskiej kolumnie (najłatwiej czyta się po 10-12 angielskich i 8-10 polskich słów w linii). Im większa czcionka użyta w tekście tym większy powinien być odstęp miedzy liniami, jest on bowiem pewnego rodzaju prowadnicą dla oczu i jako taki powinien być wyraźny. Tym ostatnim parametrem tekstu łatwo zarządzać przy użyciu CSS.

Nagłówki

Każdy z bloków opatrz nagłówkiem. Im krótszy i treściwszy nagłówek tym lepiej.

Nie pisz tekstu nagłówków w całości w dużych literach. Brzmi to zbyt reklamowo, gorzej się czyta i zajmuje więcej miejsca. Ludzkie oko rozpoznaje kształty małych liter, jedne są wyższe a inne nizsze (Projektowanie Stron Internetowych). Duże litery mają podobny zarys (PROJEKTOWANIE STRON INTERNETOWYCH) przez co czyta sie je wolniej.

Czysty tekst

Używaj jak najmniej średników, dwukropków i innych znaków specjalnych - wtedy twój tekst będzie bardziej przejrzysty, po prostu czystszy więc przyjemniejszy w czytaniu.

Wypunktowania

W celu zwiększenia przestrzeni i wprowadzenia wrażenie lekkości do dokumentu należy używać list. Listy z ponumerowanymi pozycjami tworzymy, gdy ich ilość lub kolejność jest ważna a punktowe gdy kolejność nie jest istotna. Poszczególne punkty w liście powinny być w tej samej formie gramatycznej, zarówno względem siebie jak i nadrzędnego zdania.

Czcionki

Używaj jak najmniejszej liczby czcionek, i do tego popularnych - nie odwracają one uwagi od treści przekazu, poza tym każdy ma je zainstalowane w systemie. Najbardziej popularne czcionki to:

• dla PC - Times New Roman, Arial, Verdana,

• dla Maca - Helvetica, Times, Courier, Geneva.

Możesz używać kilku alternatywnych czcionek, jeśli system użytkownika nie będzie miał zainstalowanej jednej z nich użyje następnej określonej przez ciebie.

Można to zrobić w następujący sposób:

<font face="Verdana, Arial, Helvetica, sans serif">tekst</font>

Czcionki typu szeryf (sherif) czyta się łatwiej. Popularny Times New Roman jest taką czcionką ponieważ na zakończeniach liter zawiera małe kreseczki (szeryfy właśnie), pomagające oku „ślizgać się po literach przez co ułatwia czytanie. Ten paragraf jest właśnie napisany przy pomocy czcionki szeryfowej.

Czcionki sans sherif (sans = bez, franc.), czyli bezszeryfowe jak np: Verdana, Helvetica świetnie nadają się na nagłówki i tytuły. Pisząc cały tekst przy życiu czcionki sherif warto użyć sans serif dla nagłówków. Odwrotne ustawienie daje także dobry efekt (szczegóły INTERNET

Kolor w tekście

Kolorowe wyróżnienia w tekście stosuj oszczędnie. Jeden dodatkowy kolor zupełnie wystarczy - więcej wprowadza chaos. Pamiętaj także o tym, że na większości stron wyrazy w innym kolorze niż reszta tekstu to po prostu odnośniki. Wyróżnienie ważnych informacji kolorem należy więc stosować rozważnie aby nie dezorientować użytkowników.

Wyróżnienia

Wyróżnianie fragmentów tekstu powinny być stosowane rozważnie. W celu oddzielenia jednego paragrafu od drugiego zupełnie wystarczy jedno- lub dwuliniowy odstęp albo wcięcie pierwszej linii, nie ma żadnego powodu stosować jednocześnie obu metod. Należy unikać paragrafów zawierających zbyt wiele pogrubionego tekstu. Pogrubienie powinno przyciągać uwagę użytkowników, dawać do zrozumienia, że czytają coś ważniejszego od reszty - gdy jest go zbyt wiele jego działanie po prostu znika, a do tego pogrubiony tekst czyta się gorzej.

Dla nagłówków i tytułów sekcji należy unikać stosowania kolorów - użytkownicy przyzwyczajeni są bowiem do tego, ze kolorowy tekst jest odnośnikiem i może próbować na niego klikać, z tych samych względów nie należy wyróżniać tekstu przez podkreślenie.

Wyróżniony fragment tekstu powinien różnić się od zwykłego jedną, góra dwoma cechami. Jeżeli wyróżniony tekst jest pogrubiony i większy od reszty, nie musi do tego być jeszcze pochyły i czerwony.

Centrowanie tekstu

Wycentrowany tekst czyta się znacznie gorzej od tego wyrównanego lewostronnie czy obustronnie, ponieważ czytelnik po skończeniu każdej linii musi przez cześć sekundy szukać wzrokiem początku następnej. Po drugie tekst wycentrowany (wyśrodkowany) wygląda znacznie mniej profesjonalnie.

 

Zapamiętaj:

1. Należy zadbać o klarowność przekazu.

2. Należy stworzyć dobre wrażenie tak aby wiadomość od ciebie przenosiła pozytywny wizerunek twojej osoby czy firmy i utrwalała więzi pomiędzy tobą a odbiorcą.

3. Należy utworzyć przekaz kompletny, tak aby czytelnik uzyskał odpowiedzi na wszystkie pytania i wątpliwości.

4. Należy unikać błędy każdego rodzaju

5. Należy ułatwić przyswajanie i zapamiętywanie informacji poprzez odpowiednie jej prezentowanie.

########222222Wyróżnienia
Użycie odpowiednich wyróżnień może zadecydować o estetyce strony oraz ułatwić czytelnikowi korzystanie z tekstu. W dobrze zaprojektowanej stronie wyróżnienia mogą ożywić tekst, uwydatnić jego ważniejsze partie, a także ograniczyć używanie ilustracji..............więcej

333333333Typografia a strony internetowe
Typografia to sztuka tworzenia łatwego w odbiorze przekazu wzrokowego. Pojęcie typografii wiąże się z procesem druku, podczas gdy w wypadku tekstu na ekranie monitora, mamy do czynienia z emisją świetlną znaków literniczych. Trudno więc mówić o typografii w klasycznym znaczeniu tego słowa. Jednak dobrze opracowana typograficzne witryna WWW zachęca do przeczytania i ułatwia zrozumienie, a informację w niej zawartą łatwiej zapamiętać........więcej

4444444444Konstrukcja nagłówków
Nagłówek jest słowem, zdaniem lub frazą pozwalającą szybko ocenić o czym opowiada następujący po nim tekst. Nagłówek rozbija ponadto tekst na mniejsze kawałki czyniąc go ciekawszym i bardziej zróżnicowanym. Zasadnicze znaczenie dla przyciągnięcia uwagi czytelnika mają właśnie tytuł oraz konstrukcja pozostałych nagałówków artykułu..............więcej

55555555Projektowanie odnośników
Odnośniki powinny być używane wtedy gdy jest to naprawdę uzasadnione a docelowa strona zawiera wartościowe i pokrewne zasoby. Struktura i specyfika Internetu zmusza nas aby pisać na jego potrzeby krótko i rzeczowo. Wszelkie fragmenty tekstu nie związane ściśle z tematem oraz informacje bardzo szczegółowe, mogące zainteresować tylko niektórych czytelników, lub materiały będące rozwinięciem i uzupełnieniem myśli przewodniej powinny znajdować się poza głównym tekstem i być z nim połączone za pomocą odnośników..............więcej

DOKUMENT HTML

Dokument HTML jest plikiem tekstowym zawierającym właściwą treść oraz znaczniki języka HTML (HyperText Markup Language).

Na treść składają się dowolne znaki drukowalne, natomiast znaczniki określają sposób prezentacji treści. Interpretacją dokumentów HTML zajmuje się przeglądarka internetowa a wynikiem jest wyświetlana na ekranie strona WWW. Przeglądarka rozpoznaje znaczenie przypisane poszczególnym elementom oznakowania tekstu i na tej podstawie oddaje na ekranie strukturę tekstu, szczegóły formatowania (np. rodzaj, wielkość i kolor czcionki), rysuje linie, umieszcza i wypełnia tabele, wstawia odsyłacze hipertekstowe do innych dokumentów HTML. Możliwość użycia w dokumencie wskazania na dowolny zasób internetowy pozwala osadzać na stronach WWW inne typy danych (grafikę, multimedia), uruchamiać programy (Java, ActiveX) a także ustanawiać połączenia w innych protokołach (FTP, SMTP, Telnet, itp.).
Zasady, na jakich przeglądarka łączy zewnętrzne źródła danych określane są przez protokół HTTP oraz metodę identyfikacji zasobów URL. Funkcjonalność dokumentu HTML można znacznie zwiększyć przez włączenie do niego bloków poleceń języków skryptowych - interpretowanych równolegle z dokumentem. Sposób tłumaczenia znaczników HTML, a właściwie pozostawiony przez twórców języka margines pozwalający na pewną dowolność ich interpretacji jest przyczyną niewielkich rozbieżności w wyglądzie strony w różnych przeglądarkach. Takie rozwiązanie posiada jednak ogromną zaletę - umożliwia otrzymanie podobnie wyglądających stron WWW na każdej maszynie, na której jest zainstalowana przeglądarka internetowa. Przełamywany jest w ten sposób odwieczny brak porozumienia między różnymi platformami. Nie jest istotne, pod kontrolą jakiego systemu operacyjnego działa sama przeglądarka (UNIX, DOS, Windows, OS/2), ale że posiada zaimplementowaną obsługę mechanizmów sieciowych oraz potrafi należycie interpretować znaczniki HTML.

 

Elementy struktury dokumentu HTML

Dokument HTML jest plikiem zawierającym kod napisany w języku HTML (HyperText Markup Language - hipertekstowy język opisu strony). Język ten służy do tworzenia i formatowania dokumentów multimedialnych. Wszystkie polecenia (TAGI) rozpoczynają się znakiem "<", a kończą ">".

Podstawowa struktura dokumentu HTML jest następująca:
<html> 
<head></head> 
<body></body> 
</html> 
Są to jedyne elementy wymagane w dokumencie, aby spełniał wymagania standardu.
Nazwy elementów mogą być pisane zarówno dużymi literami, jak i małymi.

<HTML></HTML>
Element <html> identyfikuje dokument jako zawierający elementy języka HTML. Powinien sie pojawiać jako pierwsze polecenie w dokumencie HTML.
Pomiędzy znacznikami <html></html>  zaiwera się tekst dokumentu i wszystkie niezbędne elementy.

Czasem pierwszym elementem, jaki pojawia się przy tworzeniu dokumentów specjalnymi narzędziami jest identyfikator wstępu. <!Doctype HTML Public " -//IETF//DD HTML 2.0//EN>. Współczesne przeglądarki nie wymagają tego elementu i same potrafią zidentyfikować dokument jako plik HTML.

<HEAD></HEAD>
Element <head> jest stosowany w celu dołączenia informacji o dokumencie HTML, nie mając bezposredniego wpływu na wygląd dokumentu w przeglądarce.
Poniżej przedstawiamy najważniejsze tagi, które są umieszczane pomiędzy tagami <HEAD></HEAD>:

• <LINK> Odnośnik do innego dokumentu

• <META> Przekazuje informacje serwerom i użytkownikom.

• <STYLE> Tworzy arkusz stylu dla dokumentu

• <TITLE> Określa tytuł dokumentu

<BODY></BODY>
Element zawiera tekst, skrypty i grafiki tworzące stronę HTML. Chociaż interpretacja tego znacznika nie ma bezposredniego wpływu na wygląd dokumentu, to jego obecność jest obowiązkowa.

 Publiczne identyfikatory tekstu HTML

W pierwszym wierszu dokumentu HTML, jeszcze przed znacznikiem <html> powinno się umieszczać prolog SGML, informujący o tym, z jaką wersją języka jest zgodny dokument. Ma on postać:
<!DOCTYPE HTML PUBLIC "-//organizacja//DTD HTML wersja//język">
Jako organizację można wstawić IETF (Internet Engineering Task Force) lub W3C (World Wide Web Consortium) - charakteryzuje on, która grupa rozwinęła specyfikację danej wersji.
Wersja to np. 2.0, 3.2 Final, 4.0 Draft itd. Język to, w przypadku HTML, EN (język angielski).

W HTML 4.0 można zdefiniować trzy wersje dokumentów. Są to:

1. Ścisły HTML 4.0 - dokument może zawierać wszystkie elementy, które nie zostały uznane za przestarzałe lub nie zawierają ramek:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
     "http://www.w3.org/TR/REC-html40/strict.dtd">

2. Przejściowy HTML 4.0 - dokument może zawierać elementy takie jak ścisły 4.0, plus przestarzałe:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
     "http://www.w3.org/TR/REC-html40/loose.dtd">

3. Obsługujący ramki - dokument może zawierać to co przejściowy 4.0, plus ramki:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"   "http://www.w3.org/TR/REC-html40/frameset.dtd">

 Nagłówek dokumentu HTML

<head> ... </head>

Element <head> określa nagłówek dokumentu HTML i może zawierać następujące elementy: <title>, <style>, <script>, <isindex>, <base>, <meta> i <link>.
Standard dopuszcza brak elementu <head>.

Pole tekstowe formularza

<isindex>

Tag generuje specjalne pole do wyszukiwania słów kluczowych. Tag ten służy do komunikacji ze skryptami CGI. Obecnie tag jest rzadziej używany, ponieważ tą funkcję przejęły formularze.

Atrybuty:

prompt - parametr określa tak zwany tekst zachęty do wpisania hasła, zamiast standardowego tekstu wyświetlanego przez przeglądarkę.
id, class - unikalny identyfikator i nazwa klasy CSS
lang, dir - język i kierunek wyświetlania tekstu bądź elementu
title - tytuł elementu
style - styl CSS elementu

Element ten wskazuje, że przeglądarka powinna wstawić jedno edytowalne pole tekstowe, poprzedzając je tekstem "txt". Po wypełnieniu pola i naciśnięciu ENTER jego zawartość jest wysyłana pod adres bazowy dokumentu, zgodnie ze standardem protokołu HTTP. Znacznik ten może również występować w części <body>.

Przykład:

Początek formularza

Możesz przeszukać indeks. Wpisz słowa kluczowe pomocne przy wyszukiwaniu:

Dół formularza

 

adres bazowy: http://www.netdesign.beep.pl
wpisz tekst: projektowanie stron internetowych
wygenerowane zapytanie: http://www.netdesign.beep.pl/kurs/html?projektowanie+stron+internetowych

 

 

 

CD

EDYTORY HTML

Edytory HTML są programami służącymi do tworzenia dokumentów internetowych w języku opisu strony HTML. Tworzenie stron HTML możliwe jest za pomocą każdego, nawet najprostszego edytora tekstów, jednak edytory HTML potrafią znacząco przyspieszyć i zautomatyzować ten proces. Większość z nich pozwala automatycznie wprowadzać wybrane elementy języka HTML posługując się systemem menu, z którego użytkownik wybiera potrzebne mu komendy. Takimi narzędziami są np. HomeSite, HotDog oraz polskie: Pajączek i Tiger.

Edytory WYSIWIG	Edytory tekstowe
Dreamweaver	Macromedia HomeSite 5
Adobe GoLive	HTMLowiec 5,0
MS FrontPage 98	NoteTab Light 4,80
MS FrontPage 2000	Tiger II
HotMetal Pro 6,0	Arachnopilia 5,1
Pajączek	Pajączek 2000 Pro
Pajączek 3.0 Light	Ace HTML 4 Free
NetObject Fusion 6	ASPEdit 2001
CoffeeCup Free	HotDog Pro 6,2
Netscape Composer	Under Construction 98
Free HTML 6.0
1st page 2000
Inne
MS VisualStudio.NET 7.0
edytory dla Linuksa

Korzystanie z bardziej zaawansowanych edytorów pracujących w trybie WYSIWYG nie wymaga nawet znajomości HTML. Zamiast posługiwać się poleceniami języka, użytkownik zestawia stronę WWW z gotowych elementów, które może umieścić w dowolnym miejscu strony przy pomocy kilku ruchów myszą. Edytory te zyskały sobie największą popularność; najpopularniejsze to Macromedia Dreamweaver oraz Front Page 2000 firmy Microsoft (którego bezpłatna lecz okrojona wersja Front Page Express wchodzi w skład pakietu Internet Explorer).

 

3

---