Pe│ny kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami autor: Dariusz Majgier • ostatnia modyfikacja: 2002.06.10 • wersja kursu: 1.1

[0-9]  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z 
[g│≤wne menu] - [elementy HTML] - [atrybuty HTML] - [style CSS] - [artyku│y]
tabele • listy • formularze • multimedia • el. strukturalne • el. blokowe • el. liniowe

Wydawaµ by siΩ mog│o, ┐e do wykonania dobrej strony WWW najwa┐niejsza jest umiejΩtno╢µ pos│ugiwania siΩ jΩzykiem HTML, znajomo╢µ program≤w, wiedza techniczna i do╢wiadczenie w pracy z komputerem. Je┐eli tak my╢lisz, postaram siΩ przekonaµ CiΩ, ┐e HTML to ostatnia rzecz, jak▒ musisz znaµ przy projektowaniu dobrego serwisu.

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

Wiedz czego chcesz

Wiele os≤b chce mieµ stronΩ, jednak sama chΩµ nie wystarcza. Ju┐ po chwili rodz▒ siΩ r≤┐ne pytania. Jaki wygl▒d ma mieµ strona? Co powinna oferowaµ? Jakich narzΩdzi u┐yµ do jej stworzenia? Czy mo┐na na niej zarobiµ?

Warto wiΩc usi▒╢µ i okre╢liµ co chcemy na niej zamie╢ciµ oraz wypisaµ funkcje, kt≤re ma spe│niaµ. Nie s▒ to │atwe decyzje, ale trzeba je podj▒µ ju┐ teraz. Od nich zale┐y konstrukcja menu, wygl▒d strony g│≤wnej, ilo╢µ dzia│≤w, nawigacja, liczba dokument≤w i grafik, kt≤re bΩd▒ nam potrzebne do zbudowania serwisu.

Wczuj siΩ w rolΩ czytelnika, pomy╢l co zrobi gdy wejdzie na Twoj▒ witrynΩ, czego bΩdzie szuka│, co mo┐esz mu zaoferowaµ, jaki jest koszt stworzenia strony. Swoje przemy╢lenia przedstaw kilku osobom i zapytaj co s▒dz▒ o pomy╢le. Z pewno╢ci▒ podpowiedz▒ Ci, co ich zdaniem nale┐a│oby dodaµ lub zmieniµ. PamiΩtaj, ┐e serwis internetowy r≤┐ni siΩ od ksi▒┐ki lub gazety. Nikt nie czyta d│ugich tekst≤w, je┐eli nie musi lub nie chce. Tre╢µ musi byµ na tyle ciekawa, aby zatrzymaµ u┐ytkownika na d│u┐ej. Je┐eli witryna bΩdzie interesuj▒ca i oryginalna, wiele os≤b bΩdzie z niej korzystaµ, a przecie┐ o to chodzi!

Pierwsze wra┐enie

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

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

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

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

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

Aktualizacja - to magnes na czytelnika. Witryna nie mo┐e byµ martwa. Staraj siΩ przewidzieµ jak czΩsto bΩdzie dodawana nowa zawarto╢µ. Im czΩ╢ciej bΩdzie siΩ pojawiaµ co╢ nowego, tym czΩ╢ciej ludzie bΩd▒ przychodziµ aby to zobaczyµ. Je┐eli nie bΩdziesz w stanie uzupe│niaµ witryny codziennie, staraj siΩ aby chocia┐ raz w tygodniu dodaµ choµby kilka s│≤w od siebie.

Nie wiem co chcΩ pokazaµ!

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

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

"O autorze/O firmie/O serwisie". Napisz kilka zda± o sobie - kim jeste╢, co robisz, ile masz lat, czym siΩ interesujesz. Mo┐esz te┐ dodaµ swoje zdjΩcie. Firmy w tym miejscu opisuj▒ zwykle swoj▒ historiΩ, ofertΩ, dokonania. Mo┐esz te┐ napisaµ kilka zda± o serwisie - do kogo jest skierowany, co mo┐na w nim znale╝µ.

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

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

"Ankieta". Wa┐na rzecz - zadaj▒c pytania poznasz bli┐ej swoich odbiorc≤w i lepiej dostosujesz serwis do ich wymog≤w. Jest wiele typ≤w ankiet, wiΩc te┐ musisz przemy╢leµ, kt≤re bΩd▒ Ci najbardziej odpowiadaµ.

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

Chcesz osi▒gn▒µ sukces, prawda?

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

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

Projekt musi byµ elastyczny i │atwy do szybkiego przebudowania. Je┐eli bΩdziesz dodawaµ nowe pozycje do menu, grafika nie mo┐e CiΩ ograniczaµ. Stw≤rz "style book", czyli ksi▒┐kΩ standard≤w. DziΩki temu nie zapomnisz, jakich czcionek, kolor≤w i proporcji u┐ywasz do wykonania serwisu.

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

S▒ jeszcze ograniczenia. Pewnych rzeczy nie warto robiµ je┐eli nie dysponujesz odpowiednimi narzΩdziami i technologiami. Kr≤tka historyjka zobrazuje co mam na my╢li... Zbieram bilety komunikacyjne z ca│ego ╢wiata i mam ich niemal 10 tys. Kilka lat temu chcia│em przenie╢µ kolekcjΩ do Internetu. Nie mia│em wtedy dostΩpu do baz danych i PHP. Musia│bym stworzyµ 10 tys. osobnych stron HTML opisuj▒cych ka┐dy bilet. ZajΩcie by│oby tak pracoch│onne, ┐e pewnie serwis tworzy│bym kilka lat, a teraz musia│bym wszystko przerabiaµ! To co kiedy╢ by│o niewykonalne, dzisiaj mogΩ zrobiµ szybciej i lepiej. Warto wiΩc czasem czekaµ nawet kilka lat ni┐ na si│Ω tworzyµ co╢, co z za│o┐enia nie ma sensu. Wci▒┐ o tym serwisie my╢lΩ i jeszcze nie jestem gotowy aby go uruchomiµ, bo pewne rozwi▒zania nie do ko±ca mnie zadowalaj▒.

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

Je┐eli chcesz podj▒µ ryzyko i prze┐yµ przygodΩ swojego ┐ycia to zapraszam do Sieci - tu ka┐dy ma r≤wne szanse. Przenie╢ gotowy projekt do postaci stron HTML i zacznij rozwijaµ w│asn▒ witrynΩ. Emocje gwarantowane...