|
|
|
|
Wprowadzenie do HTML-a
WstΩpJe╢li wiesz ju┐ co to jest HTML i znasz jego podstawy, zapewne nie bΩdziesz czyta│ wstΩpu, ale zapewniam CiΩ, ┐e warto go przeczytaµ. Mam te┐ pro╢bΩ dla wszystkich znaj▒cych HTML-a, a czytaj▒cych ten kurs. Je╢li zauwa┐ycie jakie╢ b│Ωdy lub nie╢cis│o╢ci (nawet liter≤wki i orty), napiszcie do mnie. M≤j adres jest tutaj. Postaram siΩ poprawiµ b│Ωdy. Nale┐y r≤wnie┐ pamiΩtaµ, ┐e kursy programowania przekazuj▒ tylko koncepcjΩ jΩzyka, jego s│owa kluczowe i przyk│ady zastosowa±. Aby opanowaµ jΩzyk do perfekcji nale┐y, µwiczyµ, µwiczyµ i jeszcze raz µwiczyµ. Wprawdzie HTML jest bardzo prosty, ale dotyczy to r≤wnie┐ jego (w ko±cu to te┐ jest jΩzyk programowania :) Ten kurs dok│adnie opisuje tworzenie stron przy pomocy czystego HTML-a i prostego edytora tekstu, wiΩc je╢li kto╢ chce przy minimalnym wysi│ku zrobiµ stronΩ to od razu odsy│am go do dzia│u "Edytory HTML". Opisane s▒ w nim edytory WYSIWYG przy pomocy, kt≤rych mo┐na zrobiµ dobr▒ stronΩ bez znajomo╢ci HTMl-a. W tym kursie opr≤cz polece± jΩzyka HTML przedstawiΩ r≤wnie┐ sposoby przygotowania grafiki, pod k▒tem ich publikacji w Internecie oraz porady dotycz▒ce kompozycji stron. OpiszΩ tak┐e r≤┐nice w interpretacji kodu, wystΩpuj▒ce pomiΩdzy dwoma najpopularniejszymi przegl▒darkami jakimi s▒ Internet Explorer" i "Sylaba Komunikator". Oczywi╢cie wszystko zilustruje przyk│adami. Wszystkie przyk│adowe fragmenty kodu zosta│y wyr≤┐nione czcionk▒ "Courier New CE" dla lepszej czytelno╢ci. Je╢li kto╢ dopiero zaczyna, to od razu wyja╢niam, ┐e do stworzenia w│asnej witryny nie potrzeba specjalnego oprogramowania, nak│ad≤w finansowych lub potΩ┐nego komputera. Wystarczy tylko znaµ polecenia jΩzyka HTML, kt≤rych nauczysz siΩ czytaj▒c ten kurs oraz posiadaµ choµby najprostszy edytor tekstu, jakim jest Notatnik do│▒czany do sytemu Windows. Oczywi╢cie trzeba r≤wnie┐ chcieµ, bo dla chc▒cego nic trudnego :) Stworzenie w│asnej strony na pewno bΩdzie ╝r≤d│em osobistej satysfakcji lub sposobem zarabiania pieniΩdzy. Mo┐liwe, ┐e kto╢ znaj▒c HTML-a bΩdzie zarabia│, tworz▒c strony WWW lub komercyjny portal. Na pewno nie nale┐y siΩ zra┐aµ pierwszymi niepowodzeniami, nastΩpnym razem na pewno siΩ uda :) Co to jest HTML?HTML, to skr≤t od HyperText Markup Language. Jest to uniwersalny jΩzyk opisu dokument≤w, s│u┐▒cy do przetwarzania informacji, kt≤r▒ chcemy przekazaµ, na to, co przegl▒darka potrafi odczytaµ. Pozwala on na formatowanie tekstu, do│▒czanie grafiki, d╝wiΩk≤w lub klip≤w wideo oraz nadaje dokumentowi logiczn▒ ca│o╢µ. Ponadto dokumenty HTML mog▒ zawieraµ odno╢niki (z ang. links) do dokument≤w WWW lub innych plik≤w. Opracowanie tego jΩzyka umo┐liwi│o wymianΩ informacji pomiΩdzy komputerami i systemami operacyjnymi r≤┐nych typ≤w. W por≤wnaniu z innymi jΩzykami programowania, HTML jest bardzo prosty. Nie zawiera skomplikowanych struktur czy instrukcji, wiΩc powiniene╢ szybko opanowaµ ten jΩzyk i tworzyµ wspania│e strony. Je╢li po przeczytaniu tego kursu opublikowa│by╢ swoj▒ stronΩ w Internecie, to napisz do mnie. Zobaczymy czego CiΩ nauczy│em :) Oczywi╢cie w ka┐dej chwili mo┐esz napisaµ je╢li czego╢ nie rozumiesz. Historia HTML-aPierwsze prace nad systemem prezentowania i organizowania du┐ych ilo╢ci danych rozpoczΩ│a firma IBM w ko±cu lat 60. Efektem ich pracy by│ pierwszy jΩzyk umo┐liwiaj▒cy formatowanie i wyszukiwanie danych w du┐ych ilo╢ciach zbior≤w tekstowych. Nazwano go GML (General Markup Language). W 1978 roku na podstawie GML stworzono SGML (Standard Generalized Markup Language). Pozwala│ on na tworzenie uniwersalnych zestaw≤w symboli opisuj▒cych dokumenty, wiΩc okaza│ siΩ bardziej przydatny. SGML to metajΩzyk, czyli jΩzyk za pomoc▒, kt≤rego definiowane s▒ nowe jΩzyki podrzΩdne. Dopiero takie jΩzyki przeznaczone s▒ do tworzenia dokument≤w. Na podstawie SGML zesp≤│ laboratori≤w badawczych w CERN, w Szwajcarii opracowa│ HTML-a na potrzeby publikowania materia│≤w w World Wide Web. Z up│ywem czasu dynamika rozwoju HTML-a spowodowa│a powo│anie do ┐ycia miΩdzynarodowego forum, sprawuj▒cego nadz≤r nad rozwojem Sieci. W 1994 roku powsta│o W3C (World Wide Web Consortium) - za│o┐one i finansowane przez czo│owych producent≤w bran┐y informatycznej i telekomunikacyjnej, kt≤rego g│≤wnym zadaniem sta│o siΩ kszta│towanie obrazu Internetu poprzez tworzenie i standaryzowanie najnowszych rozwi▒za± technicznych. W rzeczywisto╢ci W3C nie jest jedynie organem opiniotw≤rczym, ale zajmuje siΩ tak┐e rozwijaniem dotychczasowych i tworzeniem nowych standard≤w dla WWW. Rozszerzenia HTML-aJak ju┐ m≤wi│em HTML jest bardzo prosty, wiΩc posiada wiele "rozszerze±", takich jak DHTML i XHTML. Ten pierwszy to dynamiczny HTML - jest to po prostu zestaw nowych polece± podobnych do tych z HTML-a. XHTML (Extensible HTML) powsta│ w wyniku zaimplementowania polece± HTML-a do XML-a (Extensible Markup Language) - daj▒cego znacznie wiΩksze mo┐liwo╢ci przetwarzania i prezentowania danych. Nowy standard umo┐liwi wiΩksz▒ swobodΩ w wykorzystywaniu danych dostΩpu do Sieci z telefon≤w kom≤rkowych. Jest r≤wnie┐ akceptowany przez istniej▒ce przegl▒darki HTML-a. Kolejnym jΩzykiem jest Java Script - jΩzyk ten s│u┐y do pisania skrypt≤w wewn▒trz strony, przypomina bardziej z│o┐one jΩzyki programowania, np. C, Pascal. Kolejnym jΩzykiem jest Java - przy pomocy tego jΩzyka mo┐na stworzyµ aplety, czyli programy wywo│ywane z poziomu strony. Du┐o os≤b myli jΩzyki Java i Java Script my╢l▒c, ┐e Java Script, to odmiana Javy. W rzeczywisto╢ci s▒ to dwa odrΩbne jΩzyki. Istniej▒ tak┐e skrypty CSS - Kaskadowe Arkusze Styl≤w pozwalaj▒ce szybciej zmieniaµ wygl▒d strony oraz skrypty CGI i PHP. CGI s│u┐y przede wszystkim do tworzenia r≤┐nego rodzaju ankiet, formularzy. Szczeg≤│owo om≤wiΩ te jΩzyki w osobnym kursie. Du┐o kurs≤w znajdziesz r≤wnie┐ w Sieci. Wystarczy podaµ wyszukiwarce nazwΩ jakiego╢ jΩzyka, a otrzymasz mn≤stwo odno╢nik≤w do stron zawieraj▒cych kursy programowania. ZnacznikiW tym momencie zaczyna siΩ teoria, wiΩc je┐eli czego╢ nie rozumiesz, to powstrzymaj siΩ z pytaniami, a┐ dojdziesz do dzia│u z µwiczeniami praktycznymi. Je╢li po przeczytaniu poszczeg≤lnych dzia│≤w nadal co╢ bΩdzie niezrozumia│e, to mo┐esz do mnie napisaµ. Ka┐da strona WWW, gdziekolwiek by╢my jej nie otworzyli, w edytorze tekstu, przegl▒darce, itd., zawsze bΩdzie plikiem tekstowym zapisanym w formacie ASCII. Polecenia jΩzyka HTML to "znaczniki" (tags), definiuj▒ce spos≤b wy╢wietlania informacji przez przegl▒darkΩ i nadaj▒ce mu pewne cechy lub w│a╢ciwo╢ci. Znaczniki to inaczej s│owa kluczowe. Tagi s▒ umieszczane pomiΩdzy nawiasami ostrymi "<" i ">". Znaczniki wystΩpuj▒ zazwyczaj parami, znacznik otwieraj▒cy i znacznik zamykaj▒cy charakteryzuje to samo s│owo, z tym ┐e przed s│owem kluczowym znacznika zamykaj▒cego, ale po nawiasie ostrym znajduje siΩ uko╢nik "/", slash z angielskiego (np. <TITLE> i </TITLE>). Istniej▒ te┐ znaczniki wystΩpuj▒ce pojedynczo, nie wymagaj▒ce zamkniΩcia (np. <BR>). Atrybuty i ich warto╢ciWiΩkszo╢µ znacznik≤w mo┐e (powinna!) byµ wzbogacana o okre╢lone dla danego znacznika, atrybuty. Atrybuty umo┐liwiaj▒ precyzyjne definiowanie sposob≤w wy╢wietlania element≤w przez przegl▒darkΩ. S▒ to rozszerzenia znacznik≤w, wpisywane wewn▒trz nawias≤w, po s│owie kluczowym. Wewn▒trz jednego znacznika mo┐e wyst▒piµ kilka atrybut≤w. Oddzielamy je od siebie pojedyncz▒ spacj▒. Prawie do ka┐dego atrybutu mo┐na (czytaj: nale┐y!) przypisaµ warto╢ci, jakie ma przyjmowaµ dany atrybut (np. w sk│ad znacznika <FONT> wchodzi atrybut "size", kt≤remu mo┐na przypisaµ warto╢µ np. 2 lub 5). Niekt≤re warto╢ci mo┐na wybraµ spo╢r≤d ╢ci╢le okre╢lonej grupy, inne bΩd▒ ignorowane (np. atrybut "size" posiada tylko cztery warto╢ci: "left", "right", "center" i "justify"). Innym atrybutom mo┐na przypisaµ bardziej obszerny zbi≤r warto╢ci, ale zamkniΩty w ramach jednego typu (np. liczba ca│kowita). Warto╢ci przypisujemy do atrybutu, stawiaj▒c po nim znak r≤wno╢ci "=" i warto╢µ ujΩt▒ w cudzys│≤w. W przypadku, gdy warto╢µ posiada jeden cz│on (jedno s│owo lub jedna cyfra) nie ma r≤┐nicy czy warto╢µ ujmiemy w cudzys│≤w czy nie. Jednak, chocia┐by dla zasady lepiej to zrobiµ. Zagnie┐d┐anie znacznik≤wCzΩsto te same fragmenty tekstu, grafiki s▒ modyfikowane przy u┐yciu wiΩkszej liczby znacznik≤w. Na przyk│ad, gdy zale┐y nam na pogrubieniu jednego s│owa, znajduj▒cego siΩ w tek╢cie, kt≤ry zosta│ ju┐ wcze╢niej wyr≤┐niony np. kursyw▒ mo┐na wprowadzaµ znaczniki dodatkowe. BΩdzie to wygl▒da│o tak: <I>tekst tekst tekst <B>s│owo</B> tekst tekst tekst</I> tekst W tym przypadku wyrazy "tekst" (opr≤cz ostatniego wyrazu)zosta│y wyr≤┐nione tylko kursyw▒ (znacznik <I>), a wyraz "s│owo" zosta│ dodatkowo wyr≤┐niony pogrubieniem (znacznik <B>). Przy zagnie┐d┐aniu tag≤w, nale┐y przestrzegaµ zasady, polegaj▒cej na zamykaniu ich w odwrotnej kolejno╢ci, ni┐ by│y one otwierane. Przyk│ad powy┐ej jest napisany prawid│owo, poniewa┐ znacznik <I> zosta│ otworzony jako pierwszy i zamkniΩty jako ostatni. Poni┐szy fragment kodu jest nieprawid│owy i mo┐e spowodowaµ b│Ωdy w wy╢wietlaniu: <I>tekst tekst tekst <B>s│owo tekst tekst tekst</I></B> tekst Czytelny i przejrzysty kodOpr≤cz znajomo╢ci polece± HTML-a, nale┐y siΩ jeszcze nauczyµ przestrzegania zasad dotycz▒cych czytelno╢ci i przejrzysto╢ci kodu. Ka┐dy programista pisz▒cy w jakimkolwiek jΩzyku stara siΩ, aby kod strony czy programu by│ przejrzysty i czytelny nawet dla osoby widz▒cej go pierwszy raz. Dla HTML-a znalaz│em dwie zasady: Pierwsza: zaleca siΩ stosowanie du┐ych liter w przypadku znacznik≤w, a dla atrybut≤w i warto╢ci - ma│ych liter. Praktycznie nie istnieje r≤┐nica jak bΩdziemy pisaµ - ma│ymi czy du┐ymi literami. I tak, i tak przegl▒darka zinterpretuje je poprawnie. Druga zasada: w sumie kod mo┐na napisaµ w jednej linijce bez znaku powrotu karetki (czyli bez naciskania klawisza Enter), ale wtedy kod bΩdzie ma│o przejrzysty. Nale┐y wiΩc stosuj▒c spacje, tabulatory i znaki powrotu karetki, zrobiµ odstΩpy poszczeg≤lnymi znacznikami. Jednak nie mo┐na przesadzaµ poniewa┐ ka┐dy dodatkowy znak zwiΩksza fizyczn▒ objΩto╢µ pliku. DziΩki tym dw≤m zasadom kod ╝r≤d│owy strony stanie siΩ czytelny i przejrzysty. Jak je stosowaµ, nauczysz siΩ czytaj▒c ten poradnik. Mo┐esz te┐ przejrzeµ kod tej strony wybieraj▒c polecenie "¼r≤d│o" z menu "Widok". Edytory HTMLWiesz ju┐, ┐e strony mo┐na przygotowaµ nawet przy pomocy Notatnika, ale przy du┐ej licznie stron o skomplikowanej budowie mo┐e to byµ k│opotliwe i czasoch│onne. Istniej▒ specjalne programy mog▒ce przy╢pieszyµ i zautomatyzowaµ proces tworzenia stron, ale posiadaj▒ r≤wnie┐ wady. Om≤wiΩ tutaj sposoby tworzenia stron przy pomocy edytor≤w HTML-a i przedstawiΩ najpopularniejsze z nich. Pierwszym typem edytor≤w, to edytory tekstowe HTML. U┐ywaj▒c takowych edytor≤w, trzeba znaµ HTML-a, ale praca jest ju┐ przyjemniejsza i szybsza. Programy takie potrafi▒ wyr≤┐niaµ kolorem i uzupe│niaµ fragmenty kodu, czΩsto posiadaj▒ kreatory tabel lub ramek oraz gotowe zestawy skrypt≤w lub szablon≤w stron do wykorzystania. Niekt≤re edytory sprawdzaj▒ tak┐e poprawno╢µ kodu oraz poprawno╢µ tekst≤w pod wzglΩdem gramatyki i ortografii. Pozwalaj▒ r≤wnie┐ obejrzeµ stronΩ we wbudowanej w program lub zainstalowanej w systemie przegl▒darce. Drugim rodzajem edytor≤w s▒ programy WYSIWYG ("What You See Is What You Get", czyli "Otrzymujesz To Co Widzisz", jest to oprogramowanie zapewniaj▒ce zgodno╢µ podgl▒du dokumentu w trybie edycji z wersj▒ docelow▒ np. wydrukiem lub stron▒ ogl▒dan▒ w przegl▒darce). Tworzenie stron w edytorach wizualnych zabiera ma│o czasu i sprowadza siΩ do metody przeci▒gnij-i-upu╢µ, tekst formatujemy podobnie jak w popularnym Wordzie. Korzystaj▒c z takich edytor≤w nie trzeba znaµ HTML-a, a tworzenie stron jest niezwykle intuicyjne. Niekt≤re wyposa┐one s▒ r≤wnie┐ w edytory kodu, dziΩki kt≤rym mo┐na dokonywaµ indywidualnych poprawek. Oczywi╢cie zawieraj▒ wszystkie udogodnienia, takie jak sprawdzanie pisowni, kreatory ramek, tabel, itp. Edytory wizualne s▒ dobre dla pocz▒tkuj▒cych lub tych, kt≤rzy chc▒ zrobiµ dobr▒ stronΩ przy minimalnym wysi│ku. Jednak nale┐y pamiΩtaµ, ┐e takie programy dodaj▒ do kodu strony du┐o zbΩdnych rzeczy, jest te┐ czΩsto ma│o przejrzysty, a pisz▒c w edytorze tekstowym mamy pe│n▒ kontrolΩ nad kodem. ZbΩdne polecenia wyd│u┐aj▒ czas pobierania stron z Sieci, a poza tym porz▒dne edytory WYSIWYG maj▒ stosunkowo du┐e wymagania sprzΩtowe. Coraz czΩ╢ciej mo┐na spotkaµ edytory typu WYSIWYG zintegrowane z edytorem kodu. Do najlepszych polskich edytor≤w zaliczany jest "Paj▒czek 2000". Umo┐liwia on tworzenie stron w trybie tekstowym, jak i wizualnym ("Paj▒czek Light"). Posiada przejrzysty interfejs i wiele opcji wspomagaj▒cych tworzenie stron. MiΩdzy innymi s▒ to: obs│uga polskiego standardu kodowania znak≤w ISO (om≤wiΩ go p≤╝niej), sprawdzanie pisowni, automatyczne uzupe│nianie i kolorowanie kodu. Zawiera r≤wnie┐ kreatory tabel, ramek i formularzy. AplikacjΩ mo┐na zam≤wiµ na stronie www.creamsoft.com.pl w cenie 89 z│otych. Inne dobre, polskie edytory to: bezp│atna "Kicia 4.0" oraz "Tiger 95/98" w cenie 55 PLN. Opr≤cz tego istniej▒ tak┐e inne: MS FrontPage - do│▒czany do przegl▒darki "Internet Explorer". Sylaba Kompozytor - do│▒czony do przegl▒darki "Sylab Komunikator". Zagraniczne: Na rynku dostΩpnych jest tak┐e kilka pakiet≤w przeznaczonych dla profesjonalnych projektant≤w serwis≤w i przygotowanych przez czo│owych producent≤w oprogramowania. ú▒cz▒ w sobie mo┐liwo╢ci oferowane przez edytory tekstowe i wizualne. Wyposa┐one s▒ r≤wnie┐ w opcje pozwalaj▒ce zarz▒dzaµ ca│o╢ci▒ serwisu. Do najpopularniejszych nale┐▒: Ogromn▒ bibliotek▒ narzΩdzi do tworzenia witryn WWW jest Internet. Wystarczy w odpowiedni polu wyszukiwarki wpisaµ "HTML editors" lub "Web tools", a otrzymamy setki odsy│aczy do stron oferuj▒cych aplikacje do edycji stron WWW. Do nauki najlepiej korzystaµ z Notatnika lub Worda (w Wordzie mo┐na te┐ tworzyµ strony w trybie WYSIWYG, ale jest on najmniej cenionym edytorem HTML pod tym wzglΩdem, poniewa┐ generuje du┐o nie potrzebnego kodu). Kolejna czΩ╢µ o strukturze dokumentu.
|
|
|
|
|
HTML
# 1
