Professional Documents
Culture Documents
Spis treci
Przykadowy rozdzia
Katalog ksiek
Katalog online
Zamw drukowany
katalog
miao wkrocz w wiat technologii internetowych
Twj koszyk
Dodaj do koszyka
Cennik i informacje
Zamw informacje
o nowociach
Zamw cennik
Czytelnia
Fragmenty ksiek
online
Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912011
Spis treci
Wstp...............................................................................................7
Czym s HTML i XHTML?....................................................................................8
Jak wyglda znacznik HTML............................................................................... 10
Wymagane oprogramowanie i sprzt ................................................................ 11
Przykady................................................................................................................ 11
Zagniedanie listy................................................................................................ 45
Lista numerowana................................................................................................. 46
Wstawianie znakw specjalnych......................................................................... 47
Podzia dokumentu na sekcje.............................................................................. 49
Podsumowanie....................................................................................................... 51
Rozdzia 3. Odnoniki......................................................................................53
Tworzenie odnonika............................................................................................ 54
Tworzenie odnonika pocztowego...................................................................... 56
Definiowanie domylnego tematu wiadomoci pocztowej.............................. 57
Definiowanie etykiety........................................................................................... 58
Tworzenie odnonika prowadzcego do etykiety............................................. 59
Tworzenie odnonika prowadzcego do etykiety
zadeklarowanej na innej stronie WWW............................................................ 60
Tworzenie obszaru nawigacyjnego..................................................................... 62
Podsumowanie....................................................................................................... 63
Rozdzia 4. Obrazy...........................................................................................65
Format GIF............................................................................................................. 66
Format JPEG.......................................................................................................... 67
Pobieranie i instalowanie programu IrfanView................................................ 68
Umieszczanie obrazu na stronie WWW............................................................ 80
Przeksztacanie obrazu w odnonik.................................................................... 84
Zamieszczanie miniatur zdj............................................................................. 85
Obrazy w HTML5................................................................................................. 92
Mapy odnonikw................................................................................................. 93
Usuwanie obrazu................................................................................................... 97
Podsumowanie....................................................................................................... 98
Rozdzia 5. Tabele..........................................................................................101
Jak w jzyku HTML opisuje si tabel?............................................................ 102
Tworzenie tabeli.................................................................................................. 102
Zmiana treci komrki tabeli............................................................................. 106
Wstawianie nowego wiersza tabeli.................................................................... 107
Wstawianie nowej kolumny tabeli.................................................................... 108
Scalanie komrek tabeli...................................................................................... 110
Dzielenie scalonej komrki tabeli..................................................................... 114
Okrelanie struktury logicznej tabeli................................................................ 116
Podsumowanie..................................................................................................... 118
Rozdzia 6. Kaskadowe arkusze stylu............................................................119
Atrybuty stylu...................................................................................................... 120
Styl wpisany.......................................................................................................... 121
Styl osadzony....................................................................................................... 122
Styl doczony...................................................................................................... 122
Dlaczego kaskadowe?...................................................................................... 122
Jednostki CSS....................................................................................................... 123
Kolory wCSS....................................................................................................... 124
Zakoczenie................................................................................210
3
Odnoniki
Odnoniki jeszcze do niedawna odrniay strony WWW od wszystkich innych dokumentw elektronicznych. Dzisiaj moliwo deklarowania w prawie kadym typie dokumentu odnonikw do dowolnych innych materiaw niezalenie od ich
umiejscowienia w globalnej sieci zrewolucjonizowaa wiat informacji. Czy klikajc odnonik przenoszcy Ci z jednego artykuu do drugiego, moesz sobie wyobrazi, e kiedy korzystano z globalnej sieci komputerowej bez ich pomocy?
Odnoniki, nazywane czasem poczeniami (lub linkami od angielskiego sowa
link), s niesamowicie uytecznym i wygodnym narzdziem. Co ciekawe, tworzy si
je wyjtkowo atwo.
Adresy internetowe dziel si na:
bezwzgldne (np. http://www.helion.pl/) podany adres od pocztku do
koca (bezwzgldnie) definiuje pooenie strony WWW i moe by stosowany
w takiej samej postaci, niezalenie od strony WWW, na ktrej go uyjemy,
wzgldne (np. ../teksty/opis.html lub te nowy.html) podany adres definiuje
pooenie strony WWW wycznie wzgldem aktualnej strony; uycie go na
innej stronie WWW (umieszczonej w innym katalogu tego samego serwera lub
na innym serwerze) uniemoliwi odszukanie wskazywanego przez odnonik
dokumentu.
54
Tworzenie odnonika
Adresy internetowe czsto nazywane s te adresami URL lub URI od angielskich nazw
Uniform Resource Locator oraz Uniform Resource Identifier (jednolity lokalizator zasobu).
Tworzenie odnonika
Odnonik reprezentuje obiekt o nazwie <a>. Bdzie si on pojawia we wszystkich
przykadach w tym rozdziale.
1. Umie kursor w tym miejscu kodu, w ktrym ma si pojawi odnonik.
Najczciej odnoniki umieszcza si wewntrz akapitu tekstu, czyli wewntrz
elementu <p>. Mog pojawia si jednak i w innych elementach tekstowych
byle nie bezporednio na poziomie dokumentu.
2. Wprowad kod elementu <a>.
3. Rozbuduj element <a> o atrybut href zawierajcy zapisany w cudzysowie
docelowy adres URL odnonika:
<a href=adres-docelowy>
Wprowadzajc bezwzgldny adres strony WWW, nie zapominaj o jego poprawnym zapisaniu. Adres bezwzgldny musi zaczyna si od nazwy protokou internetowego (w przypadku
stron WWW: http://). Jeeli adres zawiera tylko nazw serwera, musi koczy si znakiem /.
Pominicie tych elementw a w szczeglnoci prefiksu okrelajcego protok dostpu
do danych uniemoliwi funkcjonowanie odnonikw w niektrych przegldarkach WWW.
Tworzenie odnonika
Staraj si unika definiowania jako odnonikw sformuowa typu kliknij tutaj nie naley to do dobrego stylu.
5. Zamknij element,
wpisujc </a>.
6
5
6. Zapisz wprowadzone
zmiany.
3
4
10
55
56
<a href=mailto:adres-pocztowy>
To, w jaki sposb zachowa si system operacyjny po klikniciu odnonika, zaley od zainstalowanego programu pocztowego. Jeeli na danym komputerze nie zosta skonfigurowany (lub wrcz zainstalowany) program pocztowy, uytkownik ujrzy po klikniciu jedynie okno dialogowe z komunikatem bdu.
3. Zapisz wprowadzone
zmiany.
57
58
Definiowanie etykiety
Definiowanie etykiety
Nie zawsze informacja, do ktrej naley zapewni szybki dostp za pomoc odnonika, znajduje si na innej stronie WWW. Czsto przydaje si moliwo zdefiniowania odnonika przenoszcego czytelnika do innego miejsca tej samej strony WWW.
Pierwszym krokiem przy tworzeniu takiego odnonika jest zdefiniowanie etykiety
(zwanej te czasem zakotwiczeniem od jej angielskiej nazwy anchor), czyli punktu
docelowego dla odnonikw.
Najczstszym zastosowaniem etykiet i prowadzcych do nich odnonikw s odnoniki umoliwiajce czytelnikowi powrt na pocztek strony. Stosuje si rwnie
czasem spisy treci, umoliwiajce przejcie z pocztku strony od razu do waciwej
sekcji duszego dokumentu. Najbardziej logicznym i przydatnym zastosowaniem
zakotwicze jest przenoszenie czytelnika od razu do waciwego fragmentu dugiego
artykuu, wyjaniajcego kwesti, do ktrej odnonik zosta kliknity.
1. Umie kursor wewntrz kodu znacznika
otwierajcego element,
do ktrego ma prowadzi etykieta.
2. Dodaj do znacznika
atrybut id i jako jego
warto wprowad
unikatow nazw
etykiety:
id=nazwa-etykiety
Nazwa etykiety powinna skada si wycznie z liter alfabetu aciskiego i nie moe zawiera znakw spacji. Zastosowanie innych znakw moe spowodowa, e odnoniki prowadzce do etykiety nie bd funkcjonowa.
Tworzenie odnonika
prowadzcego do etykiety
1. Umie kursor w tym miejscu kodu, w ktrym ma si pojawi odnonik.
2. Wprowad kod elementu <a>.
3. Rozbuduj element <a> o atrybut href zawierajcy znak # oraz zapisan
w cudzysowie nazw utworzonej wczeniej docelowej etykiety:
<a href=#etykieta-docelowa>
6
1
5. Zamknij element,
wpisujc </a>.
6. Zapisz wprowadzone
zmiany.
59
60
11
Tworzenie odnonika
prowadzcego do etykiety
zadeklarowanej na innej stronie WWW
Etykiety i prowadzce do nich odnoniki najatwiej wykorzysta do uproszczenia nawigacji w ramach jednej strony WWW. Jednak odnonik moe rwnie prowadzi do
etykiety znajdujcej si na zupenie innej stronie! Wykorzystujc t moliwo jzyka
HTML, umoliwisz czytelnikowi Twojego serwisu WWW przechodzenie do okrelonego fragmentu dowolnej strony za pomoc jednego tylko kliknicia odnonika.
1. Umie kursor w tym miejscu kodu, w ktrym na stronie WWW ma si pojawi odnonik.
Pamitaj odnonik musi znajdowa si w innym pliku ni etykieta. Krtko mwic, musisz przygotowa dwie strony WWW (dwa pliki .html): jedn z etykiet (jak w poprzednim
wiczeniu), a drug z odnonikiem (przygotowywana tutaj).
Adresem docelowym moe by po prostu nazwa drugiego pliku .html oba pliki musz
si w takim przypadku znajdowa w tym samym folderze na dysku. To najprostsza posta
odnonika o adresie wzgldnym.
8
1
7. Zamknij element,
wpisujc </a>.
5
8. Zapisz wprowadzone
zmiany.
10
11
61
62
12
13
5
1
2
4
Podsumowanie
Podsumowanie
Prawidowo skonstruowany system odnonikw moe znacznie poprawi jako
Twojego serwisu internetowego. Jeli dusze strony WWW wyposaysz w prosty spis treci utworzony z odnonikw prowadzcych do fragmentw tekstu, a na
kocu kadego fragmentu umiecisz dyskretny odnonik umoliwiajcy powrt do
pocztku strony oraz do gwnej strony serwisu, nawigacja bdzie znacznie przyjemniejsza i efektywniejsza. Nie zapominaj przy tym o korzystaniu z blokw nawigacyjnych <nav>, wprowadzonych w jzyku HTML5, gdy ich obecno zauwaalnie
uproci pniejsze formatowanie dokumentu z wykorzystaniem kaskadowych
arkuszy stylu.
Postaraj si przewiczy najwaniejsze zagadnienia dotyczce odnonikw:
Utwrz dug stron WWW (moesz j wypeni bezsensownym zbiorem
znakw), podziel j na fragmenty opatrzone tytuami, a nastpnie wykorzystujc etykiety i odnoniki opracuj na pocztku strony menu prowadzce do
poszczeglnych czci tekstu.
Przygotuj stron zawierajc odnoniki prowadzce do serwisw internetowych najczciej przez Ciebie odwiedzanych. Jeli dobrze j przygotujesz,
moesz nawet pokusi si o wykorzystanie jej jako Twojej strony domowej
i rozpoczynanie surfowania po Sieci wanie od niej.
63