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!
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:
W ╢rodowisku Windows 95/98/ME/2000/NT mo┐esz u┐ywaµ m.in.:
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 4 i Netscape Communicator (lub Sylaba Komunikator). Poniewa┐ jednak uczysz siΩ jΩzyka HTML, warto siΩ pos│ugiwaµ edytorami tekstowymi.
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?
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 (228 KB), 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:
Je╢li zamierzasz stosowaµ stronΩ kodow▒ Windows-1250 (nie zalecamy)
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).
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.
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.
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.
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?
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).
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.
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-mag.com.pl">Magazyn WWW</A>czyli,
Magazyn WWW
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:
<A HREF="mailto:pwimmer@www-mag.com.pl.">Redaktor</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:pwimmer@www-mag.com.pl.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.
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 normalna
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 white nie widaµ na bia│ym tle)
maroon red purple fuchsia
green lime olive yellow
navy blue teal aqua
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">
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 - wiele polskich serwis≤w, w tym i portale, udostΩpnia miejsce na swoich serwerach.