Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
HTML i XHTML.
wiczenia praktyczne
Autor: Bartosz Danowski
ISBN: 83-246-0568-1
Format: A5, stron: okoo 170
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Wstp
Rozdzia 1. Wprowadzenie
Podstawowe rnice pomidzy HTML a XHTML
Potrzebne narzdzia edytory, programy graficzne
i przegldarki
Rozdzia 2. Podstawy
Elementy podstawowe
Nagwek dokumentu
Ciao dokumentu
Uwagi kocowe
5
7
9
11
19
19
24
32
33
35
Komentarze
Tekst
Listy
Hipercza
Elementy graficzne
Tabele
Formularze
Ramki
Uwagi kocowe
35
36
44
47
54
59
68
77
82
Rozdzia 6. Testowanie
83
83
84
95
96
101
106
108
111
113
116
118
123
123
137
Poprawno wywietlania
Zgodno ze specyfikacj
137
138
Podsumowanie
143
Dodatek
145
Komentarz nie ma wpywu na wywietlany dokument, a jego zawarto jest zwyczajnie ignorowana przez kad przegldark.
Unikaj stosowania zbyt rozbudowanych komentarzy, gdy niepotrzebnie
zwiksza to rozmiar dokumentu, ktry musi zosta pobrany przez
przegldark. Poza tym zbyt dua liczba komentarzy oraz rozbudowana
tre mog zosta uznane przez wyszukiwarki internetowe za spam
prb oszustwa co zazwyczaj owocuje usuniciem witryny z indeksu.
36
Nagwki
Specyfikacja jzykw XHTML i HTML przewiduje moliwo utworzenia nagwkw o szeciu zrnicowanych rozmiarach. Oto oglny
przepis na nagwek:
<hx>Nagwek stopnia X</hx>
stopnia
stopnia
stopnia
stopnia
stopnia
stopnia
pierwszego</h1>
drugiego</h2>
trzeciego</h3>
czwartego</h4>
pitego</h5>
szstego</h<>
37
Rysunek 3.1.
Porwnanie
rozmiarw
wszystkich
szeciu stopni
nagwkw
od H1 do H6
W I C Z E N I E
3.1
Akapit
Jzyk XHTML i HTML umoliwia grupowanie tekstu w akapity. Tekst
znajdujcy si w akapicie automatycznie dopasowuje si do szerokoci okna przegldarki lub jak kto woli rozdzielczoci. Dlatego na
jednym komputerze akapit moe mie trzy wiersze tekstu, a na innym
mog to by zaledwie dwa wiersze.
Za tworzenie akapitu odpowiada znacznik <p></p>, ktry zawsze wystpuje z elementem zamykajcym.
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in quam.
In quam lorem, convallis convallis, fermentum et, scelerisque interdum,
diam. Proin lobortis mi porta libero. Aliquam erat volutpat. Vivamus
aliquam, sem in mollis feugiat, nisi ligula mollis erat, sed lobortis
ligula lectus sagittis pede. Phasellus id nibh eget magna egestas lobortis.
In interdum, turpis eget sagittis eleifend, erat nisl varius quam, ut
ultricies nunc sem id lacus. Fusce ultricies, ligula sit amet pharetra
38
Akapit w jzyku XHTML i HTML domylnie nie ma wcicia pierwszego wiersza, charakterystycznego dla niektrych dokumentw drukowanych, co nie oznacza, e takiego efektu nie da si wprowadzi na
stronie WWW. Wymaga to uycia kaskadowych arkuszy stylw, ktre
opisaem w dalszej czci niniejszych wicze.
39
W I C Z E N I E
3.2
Tworzenie akapitw
Cytaty
Jeeli chcesz zacytowa wikszy fragment tekstu w kodzie strony,
musisz skorzysta ze znacznika <blockquote></blockquote>. Konstrukcja
tego elementu jest nastpujca:
<blockquote>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Morbi blandit. Etiam mattis pede at lacus. Aliquam
tincidunt. Nullam facilisis. Etiam quis nulla. nonec sollicitudin.
Fusce nisi nulla, vestibulum non, pellentesque eget, ullamcorper vel,
odio. Aliquam egestas rutrum libero. nonec placerat, nisl eget egestas
tincidunt, elit augue rhoncus elit, sed feugiat elit enim at libero.
Proin egestas sapien sed nulla. Sed a erat sit amet arcu semper aliquam.
</blockquote>
Na rysunku 3.3 przedstawiem efekt dziaania znacznikw odpowiedzialnych za cytowanie. Aby dodatkowo wyrni cytowany tekst,
zastosowaem pochylon i pogrubion czcionk. Formatowanie to zostao nadane przeze mnie rcznie i domylnie nie wystpuje w przypadku zastosowania samych znacznikw.
40
3.3
Cytowanie tekstu
41
Indeks dolny
<p>E=mc<sub>2</sub></p>
3.4
Otwrz uprzednio przygotowany plik o nazwie szablon.html i w treci dokumentu umie fragment tekstu wykorzystujcy indeks grny
i dolny. Cao zapisz na dysku w pliku o nazwie indeksy.html. Otwrz
gotowy plik w swojej przegldarce i sprawd, czy wszystko dziaa poprawnie.
Jeeli masz problem z samodzielnym wykonaniem tego wiczenia,
przepisz przykad zawarty w tekcie powyej.
amanie wierszy
Przy okazji prezentacji znacznika odpowiedzialnego za definiowanie
akapitw wspomniaem, e ich zawarto jest automatycznie dopasowywana do rozdzielczoci ekranu. Innymi sowy, przegldarka sama
decyduje, kiedy zama dan lini. Dziaanie takie jest przydatne, ale
czasami moe utrudni prac twrcy witryny zawierajcej wiksz
ilo tekstu. Na szczcie w specyfikacji jzykw XHTML i HTML
znajdziemy przydatny znacznik, ktrego celem jest bezwzgldne wymuszenie zamania linii. Mam tutaj na myli znacznik <br />.
Znacznik <br> domylnie nie ma elementu zamykajcego. W przypadku
strony zgodnej z jzykiem HTML nie stanowi to najmniejszego problemu.
Natomiast w przypadku gdy korzystasz z jzyka XHTML, musisz omawiany
znacznik domkn, wstawiajc na kocu /: <br />.
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in quam.
In quam lorem, convallis convallis, fermentum et, scelerisque interdum,
diam. Proin lobortis mi porta libero. Aliquam erat volutpat. Vivamus
42
3.5
amanie tekstu
Wyrnianie tekstu
Specyfikacja jzykw XHTML i HTML przewiduje kilka znacznikw,
za pomoc ktrych moemy wyrni fragment tekstu lub pojedyncze
sowo czy liter.
Aby pogrubi tekst, musisz skorzysta ze znacznika <strong></strong>.
<p>Wydawnictwo <s Tc1g>Helic1</s Tc1g></p>
43
W I C Z E N I E
3.6
Wyrnianie tekstu
Twarda spacja
Jeeli w bloku tekstu lub nagwku umiecisz dodatkowe znaki spacji
za pomoc klawiatury i klawisza spacji, to przegldarka automatycznie
je zignoruje i wywietli tylko jeden znak przerwy.
<h1>Nagwek stopnia
pierwszego</h1>
44
Lista wypunktowana
Do utworzenia listy wypunktowanej bdziemy potrzebowali kombinacji dwch znacznikw: <ul></ul> oraz <li></li>. Znacznik <ul></ul>
okrela ramy listy, natomiast <li></li> to kady podpunkt listy. W praktyce wyglda to mniej wicej tak:
<ul>
<li>Pierwsza pozycja listy wypunktowanej</li>
<li>nruga pozycja listy wypunktowanej</li>
<li>Trzecia pozycja listy wypunktowanej</li>
</ul>
45
Lista numerowana
Drugi typ listy to lista numerowana, ktrej konstrukcja skada si ze
znacznikw <ol></ol> oraz <li></li>. Zasada jest dokadnie taka sama
jak w przypadku list wypunktowanych.
<ol>
<li>Pierwsza pozycja listy numerowanej</li>
<li>nruga pozycja listy numerowanej</li>
<li>Trzecia pozycja listy numerowanej</li>
</ol>
Lista definicji
Trzeci i ostatni typ listy to lista definicji. Ma bardzo podobn budow
do dwch wczeniej omawianych typw. Na list definicji skada si
grupa znacznikw: <dl></dl><dt></dt><dd></dd>.
<dl>
<dt>
<dd>
<dt>
<dd>
Sowo definiowane</dt>
opis sowa definiowanego</dd>
Kolejne sowo definiowane </dt>
opis kolejnego sowa definiowanego</dd>
46
3.7
Zagniedanie list
Na koniec zosta do omwienia jeszcze jeden ciekawy przypadek. Mam
tutaj na myli list, ktra zawiera podpunkty. Takie rozwizanie bardzo czsto spotykamy na co dzie i na pewno ju zastanawiae si,
czy nie da si w jaki sposb przenie go na stron WWW. Ot
odpowied jest bardzo prosta: jest to moliwe, a taka konstrukcja
wymaga zastosowania list zagniedonych. Zagniedanie polega na
umieszczeniu wewntrz jednego elementu innego znacznika, np. w licie umieszczamy jeszcze jedn list. Podczas zagniedania moemy
czy rne typy list, np. numerowan z wypunktowan. Odpowiedni przykad zamieszczam dalej, a efekt jego dziaania przedstawia rysunek 3.8.
<ol>
<li>Produkty mleczne
<ul>
<li>mleko 3,2</li>
<li>jogurt malinowy</li>
<li>mietanka do kawy</li>
</ul>
</li>
47
<li>Owoce
<ul>
</li>
</ul>
</li>
<li>Pieczywo
<ul>
</li>
</ol>
</ul>
<li>jabka</li>
<li>cytrusy
<ul>
<li>pomaracze</li>
<li>mandarynki</li>
</ul>
<li>brzoskwinie</li>
<li>chleb</li>
<li>buki</li>
<li>rogaliki</li>
Rysunek 3.8.
Przykad listy
zagniedonej
W I C Z E N I E
3.8
48
Proste hipercza
Budowa hipercza jest stosunkowo prosta i wyglda tak:
<a href="strona.html">Kliknij tu, by dowiedze si czego wicej
o mnie.</a>
Jak atwo wywnioskowa, znacznikiem odpowiedzialnym za odsyacze jest <a></a>, wzbogacony o pewne atrybuty. I tak dla odsyacza
takim obowizkowym atrybutem jest href="adres lub nazwa pliku",
okrelajcy, do jakiego dokumentu bd miejsca ma prowadzi nasz
odnonik. Ma on wic posta:
<a href="nazwa_pliku.html">
<a href="http://danowski.pl">
<a href="http://danowski.pl/nazwa_pliku.html">
To tylko pierwsza cz odsyacza, informujca, dokd mamy si przenie. Teraz musimy opisa nasz odsyacz tak, by by widoczny i dostpny ze strony:
<a href="http://www.helion.pl">Strona Wydawnictwa HELION</a>