Professional Documents
Culture Documents
SPIS TRECI
PRZYKADOWY ROZDZIA
"
"
"
"
"
Wstp ................................................................................................................................... 8
HTML w piguce............................................................................................................... 10
Czym jest dokument HTML?......................................................................................... 10
Ramy dokumentu ........................................................................................................... 11
Ciao dokumentu ............................................................................................................ 12
Tytuy ................................................................................................................................ 12
Akapity.............................................................................................................................. 13
Wiersze.............................................................................................................................. 14
Pozioma linia..................................................................................................................... 15
Grafika............................................................................................................................... 15
Wykazy ............................................................................................................................. 16
Atrybuty czcionki.............................................................................................................. 17
Wielko i kolor czcionki ................................................................................................. 18
Odsyacze .......................................................................................................................... 20
Cz nagwkowa dokumentu...................................................................................... 21
Tytu strony ....................................................................................................................... 22
Strona kodowa dokumentu ............................................................................................... 22
Struktura witryny ........................................................................................................... 23
Problem schykowych znacznikw ................................................................................ 23
Koniec wieczy dzieo ................................................................................................... 25
Struktura dokumentu....................................................................................................... 26
HTML a sprawa polska.................................................................................................. 26
Podstawowe elementy dokumentu ................................................................................. 27
Wicej szczegw o Head ............................................................................................ 28
Wicej szczegw o Body ............................................................................................ 32
Kilka uwag o wlewaniu tekstu.......................................................................................... 34
Czcionki ............................................................................................................................. 35
Znaczniki fizyczne atrybuty ........................................................................................ 36
Znaczniki logiczne style.............................................................................................. 37
Kolory czcionki.............................................................................................................. 37
Wielko czcionki .......................................................................................................... 38
Zmiana kroju czcionki.................................................................................................... 39
Elementy blokowe............................................................................................................. 44
Specyfika bloku.............................................................................................................. 44
Wyrwnywanie blokw ................................................................................................. 45
Przeamanie wiersza i parametr clear............................................................................. 47
Pozioma linia.................................................................................................................. 48
Blok preformatowany..................................................................................................... 50
Blok cytowany ............................................................................................................... 51
Cytat w wierszu.............................................................................................................. 51
Adres .............................................................................................................................. 52
rodkowanie................................................................................................................... 53
Komentarz...................................................................................................................... 53
Wycinek dokumentu Div ............................................................................................... 53
Wycinek dokumentu Span ............................................................................................. 54
Obramowanie Fieldset ................................................................................................... 55
Wykazy .............................................................................................................................. 56
Wykaz nieuporzdkowany ............................................................................................. 56
Wykaz uporzdkowany.................................................................................................. 58
Lista definicji ................................................................................................................. 61
Odsyacze........................................................................................................................... 62
Istota odsyaczy.............................................................................................................. 62
Odsyacze do etykiet ...................................................................................................... 63
Odsyacze do stron ......................................................................................................... 64
Odsyacze do innych witryn........................................................................................... 65
Odsyacze absolutne i wzgldne .................................................................................... 66
cieki dostpu .............................................................................................................. 66
Odwoania do innych dokumentw................................................................................ 68
Publikacje elektroniczne w formacie Adobe PDF ............................................................ 70
Odsyacze do poczty elektronicznej............................................................................... 71
Odsyacze do innych usug sieciowych.......................................................................... 75
Odsyacze do ramek ....................................................................................................... 78
Mapy odsyaczy na obrazkach ....................................................................................... 78
Grafika............................................................................................................................... 81
Uwagi oglne ................................................................................................................. 81
Wstawianie grafiki do dokumentu ................................................................................. 81
Ikona przy adresie .......................................................................................................... 91
Multimedia ........................................................................................................................ 93
Stare sposoby zagniedania multimediw.................................................................... 93
Plik RealAudio lub RealMedia ......................................................................................... 94
Plik Macromedia Flash ..................................................................................................... 95
Plik Apple QuickTime ...................................................................................................... 96
Nowe sposoby zagniedania multimediw .................................................................. 96
Flash .................................................................................................................................. 98
QuickTime ........................................................................................................................ 98
RealMedia ......................................................................................................................... 99
Tabele............................................................................................................................... 100
Szkielet tabeli............................................................................................................... 100
Obramowanie ............................................................................................................... 101
Pozycjonowanie tabeli i jej zawartoci ........................................................................ 103
Kolory tabeli ................................................................................................................ 106
Podpisy i nagwki kolumn.......................................................................................... 108
czenie komrek i zagniedanie tabel...................................................................... 110
Nagwek, ciao i stopka tabeli .................................................................................... 112
Sterowanie obramowaniem .......................................................................................... 113
Grupy kolumn .............................................................................................................. 118
Ramki............................................................................................................................... 120
Oglna struktura strony................................................................................................ 120
Informacje o Frameset.................................................................................................. 123
Informacje o Frame ...................................................................................................... 124
Odsyacze ..................................................................................................................... 125
Urozmaicenia ............................................................................................................... 126
Ramki w kolumnach i wierszach ................................................................................. 129
Informacje o Noframes ................................................................................................ 131
Dobrym zwyczajem, spotykanym czsto w podrcznikach dla pocztkujcych, jest przedstawienie opisywanych zagadnie w postaci krtkiego szkicu, ktry da pogld na cao
problematyki. W biecym rozdziale zaprezentujemy wic podstawowe informacje o budowaniu dokumentu HTML. Po uwanym przestudiowaniu treci tego rozdziau, co zajmie niewiele czasu, kady bdzie potrafi sporzdzi prosty dokument, a nawet nazwa si
webmasterem.
Pozostae rozdziay bd stanowiy rozwinicie tematyki. Warto je przeczyta po opanowaniu i przewiczeniu informacji zawartych w tym rozdziale. Okae si, e ich zrozumienie nie nastrczy wikszych trudnoci, gdy bd logicznie wynikay z tego zasobu wiedzy, ktry czytelnik pozna w pierwszym rozdziale.
Bierzmy si zatem do pracy.
Wszystkie znaczniki tworz jzyk HTML. Zostay one skodyfikowane przez jedn z najwaniejszych instytucji wspczesnego wiata World Wide Web Consortium
(http://www.w3.org). To grupa pracujcych spoecznie specjalistw, ktrzy w drodze dyskusji wypracowali obowizujcy standard jzyka HTML.
Jak wic wida, trzeba si nauczy kilkunastu czy kilkudziesiciu znacznikw, aby mona
byo budowa strony internetowe. Powiedzmy wicej nie trzeba si ich wcale uczy na
pami. Wystarczy je rozumie, a wyspecjalizowany edytor HTML uatwi nam ich wstawianie. Nie trzeba bdzie robi tego rcznie.
Na pocztku polecamy jednak uywanie Notatnika (czy jakiekolwiek innego edytora,
ktry potrafi zapisywa pliki jako zwyky tekst) i wstawianie znacznikw rcznie. To
znakomite wiczenie, ktre pozwoli lepiej wyczu istot znacznikw.
Ramy dokumentu
Jak powiedzielimy, polecenie (znacznik, tag) HTML jest specjalnym cigiem znakw
objtym nawiasami ostrymi. Gdybymy, na przykad, chcieli zaznaczy jaki fragment
tekstu jako tytu, moglibymy obj go poleceniem <h1>tre tytuu</h1>. Wielko liter jest obojtna - znaczniki wpisane maymi i wielkimi literami s interpretowane
w ten sam sposb. Staranniej wykonane edytory HTML pozwalaj nawet zdefiniowa, czy
polecenia HTML bd wpisywane maymi, czy wielkimi literami. Polecamy stosowanie
maych liter.
Polecenia powinny si znale w pewnych standardowych ramach. Zostao przyjte, e
dokument HTML zawiera szkielet, ktry stanowi osnow dla wszystkich innych polece.
Spotyka si wprawdzie w Internecie strony, ktre szkieletu nie zawieraj (czasem tylko
jego cz), ale odradzamy tak praktyk, gdy w pewnych okolicznociach moe ona
zaowocowa niespodziewanymi efektami.
Cay dokument powinien by objty par znacznikw <html> </html>. Midzy nimi
powinna za si znale para znacznikw <head> </head>, ktra stanowi ramy dla
informacji nagwkowych. Pozostae informacje powinny by objte z kolei znacznikami
<body> </body>. Wyglda to nastpujco:
<html>
<head>
informacje nagwkowe
</head>
<body>
waciwa tre (ciao) dokumentu
</body>
</html>
Tak wanie wyglda dokument z lotu ptaka. Wszystkie te zadziwiajce rzeczy, ktre
widzimy na wielu stronach w Internecie, s umieszczane wanie w tych ramach. Przyjrzyjmy im si nieco bliej.
Ciao dokumentu
Dla czytelnika naszej strony najwaniejsze jest oczywicie ciao dokumentu, gdy zawiera
ono to wszystko, co zobaczymy w przegldarce. Umiecimy w nim tekst podzielony na
akapity, rdtytuy, tabele, obrazki, muzyk wszystko, co nam tylko przyjdzie do gowy
i na co pozwoli jzyk HTML. Poszczeglne elementy s umieszczane midzy znacznikami
<body> </body>.
Tytuy
Mianem tytuw okrelamy specjalnie wyrnione akapity, ktre nazywaj w jaki sposb
pewne fragmenty tekstu. Niektrzy uywaj okrelenia nagwki, inni mwi
rdtytuy, a sens jest taki sam. Na potrzeby naszego podrcznika przyjmijmy okrelenie
tytuy. Maj one rny stopie, od 1 do 6.
Aby wstawi tytu stopnia pierwszego (najwyszy w hierarchii), naley poda polecenie:
<h1>Tre tytuu</h1>
Widzimy od razu, e <h1> rozpoczyna oznaczanie tekstu jako tytuu pierwszego stopnia,
natomiast </h1> koczy. Wikszo znacznikw ma tak wanie konstrukcj. Zwrmy
uwag na ukonik wskazujcy zamknicie znacznika.
Analogicznie, tytuy niszych stopni tworzymy za pomoc h2, h3 itd.
I przykad:
Jak atwo zauway, tytuy s doskonaym narzdziem do rozdzielania logicznych fragmentw tekstu i hierarchizowania ich. Zachodzi tutaj pena analogia z ksikami, gdzie
spotykamy rozmaite stopnie rdtytuw, pozwalajce wydzieli bloki tekstu i pokaza
logik caej pracy.
Akapity
Tytuy s nazwami fragmentw tekstu, ale najwaniejsze s oczywicie akapity, gdy to
wanie w nich zawarta jest gwna tre naszego dokumentu.
Take i tutaj stosujemy znacznik wskazujcy otwarcie akapitu i jego zamknicie:
<p>Tre akapitu</p>
Zobaczmy ponownie, jak wygldaj akapity w przegldarce.
Wiersze
Niekiedy zdarza si, e chcemy przeama tekst, nie wprowadzajc przy tym znaku koca
akapitu. Moemy wwczas zastosowa pojedyncze polecenie <br>, ktre przenosi tekst
o jeden wiersz w d, cho nie wprowadza dodatkowej interlinii. Nie stosuje si tutaj
znacznika zamykajcego.
To
To
To
To
jest
jest
jest
jest
pierwszy wiersz<BR>
drugi wiersz<BR>
trzeci wiersz<BR>
czwarty wiersz<BR>
Ilustracja pokae rnic midzy odstpami tworzonymi przez akapity i odstpami tworzonymi przez znaczniki przeamania wiersza.
Ponadto polecenie <br> ma jeszcze jedn zalet. Napisanie kilku kolejnych <br> pozwala zwikszy pionowy odstp midzy elementami.
Pozioma linia
Nastpnym, czsto spotykanym elementem jest pozioma linia, ktr wstawiamy za pomoc polecenia <hr> (ang. horizontal rule). Pozwala ono wywietli w dokumencie poziom
lini, na szeroko caej strony, rozdzielajc ni logiczne fragmenty tekstu, dziki czemu
strona jest bardziej przejrzysta. Ilustracja pokazuje oddzielenie tekstu od innych za pomoc dwch poziomych linii.
Grafika
Nie sposb wyobrazi sobie stron WWW bez grafiki. Moe to by zwyky ozdobnik, ale
take np. rodzinne zdjcia, obrazki z wakacji, domowe zwierzaki czy cokolwiek innego.
Coraz popularniejsze s cyfrowe aparaty fotograficzne, z ktrych moemy bezporednio
pobiera obrazki w internetowych formatach. Moemy te skanowa zwyke zdjcia za
pomoc skanera. Ponadto w Internecie znajdziemy ogromne zasoby darmowych grafik,
ktre moemy wykorzysta na swoich stronach (obszern list adresw znajdzie Czytelnik
na pycie CD).
W dokumentach HTML moemy umieszcza grafiki zapisane w formatach GIF, JPG lub
PNG. Szczeglnie popularne s te dwa pierwsze formaty. Aby w przegldarce pojawi si
obrazek, naley wpisa polecenie:
<img src=nazwa_obrazka>
Dla przykadu, wstawmy do dokumentu polecenie, ktre wywietli zdjcie zrobione doranie domowemu kotu za pomoc aparatu cyfrowego.
<img src=kot.jpg>
IMG oznacza image (obrazek), SRC to source (rdo), kot.jpg to oczywicie nazwa
pliku z obrazkiem. Plik ten powinien by umieszczony w katalogu razem z dokumentem
HTML. Dokument wywietlany w przegldarce odwouje si do tego pliku i przywouje
zawarto we wskazanym miejscu.
Wykazy
Na stronach WWW powszechnie stosuje si wykazy (zwane te listami). S to po prostu
systematyczne wyliczenia jakich punktw, ktre w przeciwiestwie do tekstu o charakterze opisowym w skondensowany sposb prezentuj jak myl czy zesp zagadnie.
Uytkownicy edytorw tekstw 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 nieuporzdkowanego, naley uy polecenia <ul>
</ul> (ang. unordered list). W ramach szkieletu znajd si poszczeglne punkty wykazu,
ktre wprowadzamy za pomoc polecenia <li>.
<p>aby wygra wojn, naley mie:<p>
<ul>
<li>po pierwsze, pienidze</li>
<li> po drugie, pienidze</li>
<li> po trzecie, pienidze</li>
</ul>
W efekcie uzyskamy:
Jest w zasadzie obojtne, czy uyjemy pojedynczego znacznika <li>, czy te zastosujemy dodatkowo znacznik zamykajcy </li>. Autorzy edytorw HTML stosuj rne
konwencje, a wynik w przegldarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca si zamykanie znacznikw.
Gdy chcemy utworzy wykaz uporzdkowany, wwczas zamiast <ul> i </ul> moemy
zastosowa <ol> i </ol> (ang. ordered list). Uzyskamy wwczas list numerowan za
pomoc liczebnikw arabskich (w dalszej czci podrcznika pokaemy inne sposoby
numerowania).
Atrybuty czcionki
Aby tekst w przegldarce nie wyglda wszdzie tak samo, stosuje si dodatkowe atrybuty
czcionki - pogrubienie (bold), pochylenie (italic) i podkrelenie (underlined). Atrybuty
pozwalaj uwypukli jakie fragmenty tekstu, np. nazwy za pomoc kursywy, a waniejsze pojcia 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 podkrelony (underlined)</U>
Efekt dziaania tych polece:
silver
red
lime
blue
gray
purple
olive
teal
white
fuchsia
yellow
aqua
Ich reprezentacja w przegldarce internetowej (w czarno-biaej ksice tego nie wida, ale
na pycie CD znajduje si przegld kolorw):
Odsyacze
Charakterystyczn cech Internetu jest obecno na stronach hipertekstowych odsyaczy
do innych stron, ktre znajduj si w wiatowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzie, gdzie znajduj si te strony - wane jest, aby mia do nich
atwy dostp. Na tym polega istota hipertekstu - jaki temat moe by opisany za pomoc
stron tworzonych przez rnych autorw, mieszkajcych w rnych krajach, nawet czsto
nie znajcych si wzajemnie. Gdy na zbudowanych przez nich stronach znajd si odsyacze, ich wsplne zainteresowania zostan zjednoczone za pomoc hipertekstu, ktry poczy te strony w jedn logiczn cao. Czytelnik jakiego dokumentu bdzie, po prostu za
pomoc klikni myszk na odsyaczach, przenosi si do rnych miejsc w Internecie,
skaczc np. z Polski do Japonii, z Japonii do USA, a stamtd do Francji. Z jego punktu
widzenia jest zupenie obojtne, gdzie strony si znajduj. Dla niego wany jest atwy
dostp do informacji.
W tym miejscu przedstawimy dwa szczeglnie wane odsyacze: odsyacze do innych
stron WWW i odsyacz uruchamiajcy poczt elektroniczn. S one bowiem najpowszechniej stosowane.
Odsyacz do innej strony jest tworzony za pomoc polecenia:
<a href="adres_strony_internetowej">Nazwa tej strony</a>
Przykadowy adres mgby wyglda nastpujco:
<a href="http://www.onet.pl">Portal Onet.pl</a>
Ukonik (slash) na kocu adresu wymusza wczytanie strony domylnej, zazwyczaj o nazwie index.html (lub index.htm - zaley to od typu serwera WWW).
Uwaga: zalecamy nadawanie stronie gwnej serwisu nazwy index.htm lub index.html.
Jest to powszechnie przyjta praktyka w Internecie. W ostatnich latach stosuje si
take niekiedy default.htm lub default.html.
Na ekranie przegldarki wywietlany jest tekst, ktry znajduje si midzy znacznikami
<a href="... "> i </a>. Jest on domylnie wywietlany na niebiesko z podkreleniem (moemy to jednak zmieni). Gdy przesuniemy kursor myszki nad odsyacz,
w pasku stanu przegldarki zobaczymy kryjcy si pod tekstem adres internetowy.
Kliknicie na nim spowoduje skok do strony.
Zwrmy uwag na to, e adres internetowy jest podawany w cudzysowie. Dla dziaania
odsyacza nie jest to wprawdzie absolutnie konieczne, ale wymaga tego formalna poprawno skadni.
Drugim wanym odsyaczem jest adres poczty elektronicznej. Bardzo czsto autorzy stron,
ktrzy przecie dysponuj zazwyczaj swoim wasnym adresem, wstawiaj go na stronie,
proszc o uwagi czytelnika. Jest to dobry obyczaj, ktry daje czytelnikowi atwy kontakt
z autorem.
Stosujemy tutaj na przykad nastpujce polecenie:
<A HREF="mailto:autor@jego.adres">Imi i nazwisko</A>
Na przykad:
<A HREF="mailto:prwimmer@poczta.onet.pl">Pawe Wimmer</A>
Napis mailto daje sygna przegldarce WWW, e ma uruchomi poczt elektroniczn.
Navigator wywoa swj wasny modu pocztowy Mail, Internet Explorer za wywoa
Outlook Express (albo Outlook z pakietu MS Office, jeli jest on domylnym programem
pocztowym). Take i tutaj konsekwentnie stosujmy cudzysw w adresie. Fragment
w postaci:
Jeli masz jakie uwagi, napisz do <A HREF="mailto:
prwimmer@poczta.onet.pl">autora strony</A>
zostanie przedstawiony w przegldarce nastpujco:
Przesunicie kursora myszki nad tekst "autora strony" wywietli w pasku stanu adres
poczty elektronicznej, natomiast kliknicie myszk spowoduje uruchomienie moduu
pocztowego, w ktrym czytelnik strony bdzie mg zredagowa list do autora.
Cz nagwkowa dokumentu
W czci nagwkowej dokumentu mona umieci rozmaite informacje opisowe decydujce, jak nasza strona bdzie wywietlana, a take jak bd j postrzega sieciowe wyszukiwarki. Powiemy na ten temat wicej w innym rozdziale, a ju teraz zwrcimy uwag
na te elementy, ktre przydadz si pocztkujcemu uytkownikowi.
Tytu strony
Gdy otwieramy jak stron w przegldarce, w belce tytuowej widzimy zazwyczaj jej
tytu, np. Strona Jana Kowalskiego. Nie wolno zapomina o tym elemencie, gdy peni
on istotn rol informacyjn. Gdybymy o nim zapomnieli, w tym miejscu ukae si jedynie nazwa fizycznego pliku i jego adres (na dysku lub w Internecie). W czci nagwkowej Head wstawiaj wic zawsze tytu, na przykad:
<head>
<title>Strona Jana Kowalskiego</title>
</head>
Tytuu strony nie naley myli z tytuami (rdtytuami, nagwkami) wewntrz dokumentu, definiowanymi za pomoc H1, H2 itd.
Struktura witryny
Gdy stawiamy pierwsze kroki, tworzymy zazwyczaj pojedyncze dokumenty. Witryna
internetowa skada si jednak na og z wielu powizanych ze sob dokumentw. czymy je za pomoc odsyaczy, za gwny dokument zapisujemy w pliku index.htm lub
index.html. Inne mog mie dowolne nazwy, nawet wielowyrazowe. Ale uwaga, nie uywaj w nazwach plikw polskich liter i nie stosuj spacji. Tak wic nie twrz pliku kcik
humoru.htm, lecz kacik_humoru.htm. W wielowyrazowych nazwach cz wyrazy podkreleniem.
Na dalszym etapie nauczysz si tworzenia wielu stron i czenia ich ze sob, ale na pocztku warto przewiczy tworzenie pojedynczych dokumentw.
Bardzo wana uwaga: zapisuj zawsze pliki maymi literami. Nie Index.htm czy
INDEX.HTM, lecz index.htm. Wynika to std, e serwery internetowe pracuj zazwy-
czaj pod kontrol systemu operacyjnego Unix, ktry rozrnia wielko liter. Zatem
pliki takie s dla nich rnymi plikami, cho pozornie nazywaj si tak samo. Na lokalnym dysku nie ma to znaczenia, ale kopot moe si pojawi wanie na serwerze.
Konsekwentnie stosuj wic mae litery.
W rozdziale o narzdziach webmasterskich powiemy o sposobach posyania plikw na
serwer. Jednak ju teraz zapamitaj, e struktura witryny na lokalnym dysku powinna by
identyczna ze struktur na serwerze. W przeciwnym razie pojawi si kopoty z odsyaczami.
Trudno sobie wyobrazi nauk jzyka HTML bez poznania tych intuicyjnie zrozumiaych i wygodnych w stosowaniu znacznikw. Byoby to tak, jak gdyby pocztkujcy adept rachunku prawdopodobiestwa zaczyna poznawanie tej pasjonujcej dyscypliny od aksjomatycznej definicji prawdopodobiestwa, a nie od
prostych wicze z rzucaniem kostk do gry, ktre kiedy natchny jakie genialne umysy do stworzenia caej teorii.
Polecenie
Zamiennik
<applet>
<object>
<basefont>
Arkusze stylw
<center>
<dir>
<ul>
<font>
Arkusze stylw
<isindex>
<input>
<menu>
<ul>
<s>
Arkusze stylw
<strike>
Arkusze stylw
<u>
Arkusze stylw