HTML i XHTML. Ćwiczenia praktyczne

Wydawnictwo Helionul. Chopina 644-100 Gliwicetel. (32)230-98-63e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWOŒCIACH

ZAMÓW INFORMACJEO NOWOŒCIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIAFRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TREŒCISPIS TREŒCI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

HTML i XHTML.Æwiczenia praktyczneAutor: Bartosz DanowskiISBN: 83-246-0568-1Format: A5, stron: oko³o 170

Posiadanie w³asnej strony WWW przesta³o byæ czymœ niezwyk³ym. Mechanizmy oferowane przez wiêkszych dostawców us³ug internetowych pozwalaj¹ na jej stworzenie bez znajomoœci jêzyka HTML. Wystarczy wybraæ odpowiedni szablon,dodaæ do niego treœæ oraz grafikê i… gotowe. Jednak takie rozwi¹zanie zdecydowanie ogranicza mo¿liwoœci twórcze i nie gwarantuje, ¿e strona bêdzie zapadaæ w pamiêæ odwiedzaj¹cym j¹ osobom. Poznanie jêzyka HTML i mo¿liwoœci oferowanych przez technologiê CSS sprawi, ¿e Twoja strona bêdzie siê wyró¿niaæ na tle innych— nadasz jej indywidualny styl, a dodatkowo samodzielne stworzenie w³asnej witryny WWW da Ci ogromn¹ satysfakcjê.

Dziêki ksi¹¿ce „HTML i XHTML. Æwiczenie praktyczne” poznasz podstawowy „budulec” stron WWW — jêzyk HTML i jego wersjê rozwojow¹, nazywan¹ XHTML. Dowiesz siê,z jakich elementów sk³ada siê kod strony WWW, oraz nauczysz siê korzystaæ ze znaczników w celu rozmieszczenia elementów tekstowych i graficznych na stronie. Przeczytasz te¿ o kaskadowych arkuszach stylów — poznasz sposoby ich definiowaniai przypisywania elementom strony.

• Niezbêdne narzêdzia webmastera• Definiowanie strony kodowej, s³ów kluczowych i opisu strony• Formatowanie tekstu, list, tabel i ³¹czy• Tworzenie formularzy• Wstawianie na stronê elementów graficznych• Definiowanie stylów dla tekstu• Testowanie witryny w ró¿nych przegl¹darkach

Przestañ byæ biernym u¿ytkownikiem sieci. Stwórz w³asn¹ stronê WWW

http://helion.pl/view/2547w



http://helion.pl/add/2547w/cwhtxh




mailto:[email protected]

http://helion.pl/view/2547w/cwhtxh.htm

Wstęp 5

Rozdział 1. Wprowadzenie 7Podstawowe różnice pomiędzy HTML a XHTML 9Potrzebne narzędzia — edytory, programy graficzne

i przeglądarki 11

Rozdział 2. Podstawy 19Elementy podstawowe 19Nagłówek dokumentu 24Ciało dokumentu 32Uwagi końcowe 33

Rozdział 3. Elementy języków XHTML i HTML 35Komentarze 35Tekst 36Listy 44Hiperłącza 47Elementy graficzne 54Tabele 59Formularze 68Ramki 77Uwagi końcowe 82

4 H T M L i X H T M L . Ćw i c z e n i a p r a k t y c z n e

Rozdział 4. Kaskadowe arkusze stylów 83Instalacja 83Wprowadzenie 84Style w praktyce 95Wybrane właściwości tekstu 96Wybrane właściwości czcionki 101Wybrane właściwości list 106Wybrane właściwości koloru i tła 108Wybrane właściwości marginesów 111Wybrane właściwości obramowania 113Wymiarowanie elementów 116Wybrane właściwości pozycjonowania elementów 118

Rozdział 5. Praktyczne projekty 123Strona książki 123

Rozdział 6. Testowanie 137Poprawność wyświetlania 137Zgodność ze specyfikacją 138

Podsumowanie 143

Dodatek 145

W trakcie pracy nad dużymi dokumentami stosuj komentarze.Są bardzo przydatne, zwłaszcza gdy nad jedną stroną pracujekilku projektantów. Pozwoli to uniknąć zbędnego zamieszania.

Komentarze bardzo ułatwiają poruszanie się po samym kodzie. Doumieszczenia komentarza służy:



Komentarz nie ma wpływu na wyświetlany dokument, a jego zawar-tość jest zwyczajnie ignorowana przez każdą przeglądarkę.

Unikaj stosowania zbyt rozbudowanych komentarzy, gdyż niepotrzebniezwiększa to rozmiar dokumentu, który musi zostać pobrany przezprzeglądarkę. Poza tym zbyt duża liczba komentarzy oraz rozbudowanatreść mogą zostać uznane przez wyszukiwarki internetowe za spam— próbę oszustwa — co zazwyczaj owocuje usunięciem witryny z indeksu.


Do elementów odpowiedzialnych za prezentację tekstu w językachXHTML i HTML możemy zaliczyć nagłówki, akapity, cytaty, indeksygórne i dolne, znaczniki łamania wiersza, poziomie linie oraz znacznik<div></div>. Dalej przyjrzymy się konstrukcji każdego z tych elemen-tów. Pamiętaj, że wszystkie elementy muszą się znajdować wewnątrzznacznika <body></body>.

Zgodnie ze specyfikacją XHTML oraz HTML 4.01 znaczniki opisaneponiżej służą jedynie do nadania poszczególnym elementom określonejformy. Natomiast dokładne określenie struktury takiego elementu,np. koloru, wyrównania czy czcionki, zostało oddzielone od językaXHTML/HTML i weszło w skład kaskadowych arkuszy stylów.

NagłówkiSpecyfikacja języków XHTML i HTML przewiduje możliwość utwo-rzenia nagłówków o sześciu zróżnicowanych rozmiarach. Oto ogólnyprzepis na nagłówek:

<hx>Nagłówek stopnia X</hx>

Za pomocą litery X oznaczyłem stopień nagłówka. W praktyce w tomiejsce wstawiamy cyfry z przedziału od 1 do 6. Wbrew pozoromznacznik <h1></h1> jest największym nagłówkiem, a <h<></h<> najmniej-szym. Przykład nagłówka znajduje się poniżej.

<h1>Nagłówek stopnia pierwszego</h1><h2>Nagłówek stopnia drugiego</h2><h3>Nagłówek stopnia trzeciego</h3><h4>Nagłówek stopnia czwartego</h4><h5>Nagłówek stopnia piątego</h5><h<>Nagłówek stopnia szóstego</h<>

Natomiast na rysunku 3.1 widać wszystkie sześć stopni nagłówków.

R o z d z i a ł 3 . • E l e m e n t y ję z y k ó w X H T M L i H T M L 37

Rysunek 3.1.Porównanierozmiarówwszystkichsześciu stopninagłówków— od H1 do H6

Ć W I C Z E N I E

3.1 Tworzenie własnych nagłówków

Otwórz uprzednio przygotowany plik o nazwie szablon.html i w treścidokumentu umieść nagłówki — od H1 do H6. Następnie całość zapiszdo pliku pod nazwą naglowki.html. Otwórz plik naglowki.html w swo-jej przeglądarce i sprawdź, czy wszystko działa poprawnie.

Jeżeli masz problem z samodzielnym wykonaniem tego ćwiczenia,przepisz przykład zawarty w tekście powyżej.

AkapitJęzyk XHTML i HTML umożliwia grupowanie tekstu w akapity. Tekstznajdujący się w akapicie automatycznie dopasowuje się do szeroko-ści okna przeglądarki lub jak kto woli — rozdzielczości. Dlatego najednym komputerze akapit może mieć trzy wiersze tekstu, a na innymmogą to być zaledwie dwa wiersze.

Za tworzenie akapitu odpowiada znacznik <p></p>, który zawsze wy-stępuje z elementem zamykającym.

<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. Vivamusaliquam, sem in mollis feugiat, nisi ligula mollis erat, sed lobortisligula lectus sagittis pede. Phasellus id nibh eget magna egestas lobortis.In interdum, turpis eget sagittis eleifend, erat nisl varius quam, utultricies nunc sem id lacus. Fusce ultricies, ligula sit amet pharetra


egestas, quam ligula nonummy pede, ac viverra libero ligula sit ameturna. Praesent sed turpis non massa imperdiet placerat. Etiam tincidunt,sapien non aliquet pellentesque, odio leo volutpat erat, sed facilisisnisl lorem id libero. nonec ac nunc. Pellentesque habitant morbi tristiquesenectus et netus et malesuada fames ac turpis egestas. Proin dictum.Curabitur sem. Sed at felis. Ut eu lacus. Maecenas nisl mauris, tempusiaculis, posuere quis, tristique eget, erat.</p><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Morbi blandit. Etiam mattis pede at lacus. Aliquamtincidunt. Nullam facilisis. Etiam quis nulla. nonec sollicitudin. Fuscenisi 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 egestassapien sed nulla. Sed a erat sit amet arcu semper aliquam.</p>

Strona może zawierać dowolną liczbę akapitów, a każdy z nich jestoddzielony od pozostałych pustym wierszem (rysunek 3.2). Przerwa tajest domyślnie wstawiana przez przeglądarki, a do jej kontroli musiszużyć kaskadowych arkuszy stylów.

Rysunek 3.2. Przykład kilku akapitów na jednej stronie

Akapit w języku XHTML i HTML domyślnie nie ma wcięcia pierwsze-go wiersza, charakterystycznego dla niektórych dokumentów druko-wanych, co nie oznacza, że takiego efektu nie da się wprowadzić nastronie WWW. Wymaga to użycia kaskadowych arkuszy stylów, któreopisałem w dalszej części niniejszych ćwiczeń.


Ć W I C Z E N I E

3.2 Tworzenie akapitów

Otwórz uprzednio przygotowany plik o nazwie szablon.html i w treścidokumentu umieść trzy akapity tekstu. Następnie całość zapisz dopliku pod nazwą akapity.html. Otwórz plik akapity.html w swojejprzeglądarce i sprawdź, czy wszystko działa poprawnie.


CytatyJeżeli chcesz zacytować większy fragment tekstu w kodzie strony,musisz skorzystać ze znacznika <blockquote></blockquote>. Konstrukcjatego elementu jest następująca:

<blockquote>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Morbi blandit. Etiam mattis pede at lacus. Aliquamtincidunt. 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 egestastincidunt, elit augue rhoncus elit, sed feugiat elit enim at libero.Proin egestas sapien sed nulla. Sed a erat sit amet arcu semper aliquam.</blockquote>

Jak zapewne wiesz, cytować możemy również wewnątrz bloku tekstu.Aby skorzystać z tej możliwości na stronie WWW, musimy sięgnąćpo znacznik <q></q>.

<p>Autor książki napisał: <q>Specyfikacja HTML q>Sp cyyiieca fcTMa c.a1ieeceMe1 u cy s Tuk uTy jęiyka, cyyając gc . Tęce kaskayc.ych aTkusiys ycó.</q>, ale nie miał do końca racji, gdyż uważam, że…</p>

Na rysunku 3.3 przedstawiłem efekt działania znaczników odpowie-dzialnych za cytowanie. Aby dodatkowo wyróżnić cytowany tekst,zastosowałem pochyloną i pogrubioną czcionkę. Formatowanie to zo-stało nadane przeze mnie ręcznie i domyślnie nie występuje w przy-padku zastosowania samych znaczników.


Rysunek 3.3. Przykład działania cytatów

Tekst cytowany za pomocą znacznika <blockquote></blockquote> jestnieznacznie wcięty względem pozostałych akapitów na stronie. Na-tomiast element cytowany wewnątrz bloku tekstu za pomocą znacz-ników <q></q> został zamknięty w cudzysłów.

Ć W I C Z E N I E

3.3 Cytowanie tekstu

Otwórz uprzednio przygotowany plik o nazwie szablon.html i w treścidokumentu umieść trzy akapity tekstu. Pierwszy akapit pozostaw bezzmian. Drugi przekształć na cytat. Natomiast wewnątrz trzeciego aka-pitu wydziel fragment tekstu jako krótki cytat. Całość zapisz na dyskuw pliku o nazwie cytaty.html. Otwórz gotowy plik w swojej przeglą-darce i sprawdź, czy wszystko działa poprawnie.


Indeks górny i dolnyKorzystając z kolejnych znaczników języka XHTML i HTML, możemywymusić prezentację fragmentu tekstu jako indeksu górnego lub dol-nego. Niezbędne znaczniki to <sub></sub> oraz <sup></sup>.

Indeks górny

<p>E=mc<sup>2</sup></p>


Indeks dolny

<p>E=mc<sub>2</sub></p>

Rysunek 3.4 przedstawia efekt działania powyższego przykładu.

Rysunek 3.4.Przykład działaniaindeksu górnegoi dolnego

Ć W I C Z E N I E

3.4 Indeksy górne i dolne

Otwórz uprzednio przygotowany plik o nazwie szablon.html i w tre-ści dokumentu umieść fragment tekstu wykorzystujący indeks górnyi dolny. Całość zapisz na dysku w pliku o nazwie indeksy.html. Otwórzgotowy plik w swojej przeglądarce i sprawdź, czy wszystko działa po-prawnie.


Łamanie wierszyPrzy okazji prezentacji znacznika odpowiedzialnego za definiowanieakapitów wspomniałem, że ich zawartość jest automatycznie dopaso-wywana do rozdzielczości ekranu. Innymi słowy, przeglądarka samadecyduje, kiedy złamać daną linię. Działanie takie jest przydatne, aleczasami może utrudnić pracę twórcy witryny zawierającej większąilość tekstu. Na szczęście w specyfikacji języków XHTML i HTMLznajdziemy przydatny znacznik, którego celem jest bezwzględne wy-muszenie złamania linii. Mam tutaj na myśli znacznik <br />.

Znacznik <br> domyślnie nie ma elementu zamykającego. W przypadkustrony zgodnej z językiem HTML nie stanowi to najmniejszego problemu.Natomiast w przypadku gdy korzystasz z języka XHTML, musisz omawianyznacznik domknąć, wstawiając na końcu „/”: <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


aliquam, sem in mollis feugiat, nisi ligula mollis erat, sed lobortisligula lectus sagittis pede.<bT />Phasellus id nibh eget magna egestaslobortis. In interdum, turpis eget sagittis eleifend, erat nisl variusquam, ut ultricies nunc sem id lacus. Fusce ultricies, ligula sit ametpharetra egestas, quam ligula nonummy pede, ac viverra libero ligula sitamet urna. Praesent sed turpis non massa imperdiet placerat.<bT />Etiamtincidunt, sapien non aliquet pellentesque, odio leo volutpat erat, sedfacilisis nisl lorem id libero. nonec ac nunc. Pellentesque habitant morbitristique senectus et netus et malesuada fames ac turpis egestas. Proindictum. Curabitur sem. Sed at felis. Ut eu lacus. Maecenas nisl mauris,tempus iaculis, posuere quis, tristique eget, erat.</p>

Na rysunku 3.5 widać przykład akapitu, w którym w dwóch miejscachwymusiłem przełamanie wiersza. Ikony symbolizujące palec wskazu-jący wyróżniają miejsca wstawienia znacznika <br />.

Rysunek 3.5.Przykład akapitu,w którymwymuszonozłamanie wiersza

Ć W I C Z E N I E

3.5 Łamanie tekstu

Otwórz uprzednio przygotowany plik o nazwie szablon.html i w treścidokumentu umieść jeden akapit. Następnie we wnętrzu tekstu dodajjeden lub dwa znaczniki wymuszające złamanie linii. Całość zapiszna dysku w pliku o nazwie lamaniewiersza.html. Otwórz gotowy plikw swojej przeglądarce i sprawdź, czy wszystko działa poprawnie.


Wyróżnianie tekstuSpecyfikacja języków XHTML i HTML przewiduje kilka znaczników,za pomocą których możemy wyróżnić fragment tekstu lub pojedynczesłowo czy literę.

Aby pogrubić tekst, musisz skorzystać ze znacznika <strong></strong>.

<p>Wydawnictwo <s Tc1g>Helic1</s Tc1g></p>


Aby skorzystać z tekstu pochyłego (kursywy), musisz użyć znacznika<em></em>.

<p>Wydawnictwo <eM>Helic1</eM></p>

Aby przedstawić fragment tekstu — np. listing kodu programu — zapomocą czcionki o stałej szerokości, użyj znacznika <code></code>.

<p>Wydawnictwo <ccye>Helic1</ccye></p>

Na rysunku 3.6 przedstawiłem przykład wyróżnienia fragmentu tekstu.Za każdym razem obiektem działania było słowo „Helion”.

Rysunek 3.6.Przykładwyróżnionegosłowa

Ć W I C Z E N I E

3.6 Wyróżnianie tekstu

Otwórz uprzednio przygotowany plik o nazwie szablon.html i w treścidokumentu umieść jeden akapit. Następnie we wnętrzu tekstu dodajznaczniki wymuszające formatowanie fragmentów tekstu (pogrubie-nie, pochylenie i użycie czcionki o stałej szerokości). Całość zapisz nadysku w pliku o nazwie wyroznianietekstu.html. Otwórz gotowy plikw swojej przeglądarce i sprawdź, czy wszystko działa poprawnie.


Twarda spacjaJeżeli w bloku tekstu lub nagłówku umieścisz dodatkowe znaki spacjiza pomocą klawiatury i klawisza spacji, to przeglądarka automatycznieje zignoruje i wyświetli tylko jeden znak przerwy.

<h1>Nagłówek stopnia pierwszego</h1>


Zgodnie z tym, co napisałem, podany przykład, pomimo że zawierakilka dodatkowych spacji, będzie wyglądał dokładnie tak samo jak na-główek widoczny dalej.

<h1>Nagłówek stopnia pierwszego</h1>

Jeżeli chcesz wymusić kilka dodatkowych spacji w tekście, musisz dokodu wstawić znak twardej spacji. W praktyce oznacza to skorzysta-nie z ciągu znaków , popularnie zwanego encją.

<h1>Nagłówek stopnia &1bsp;&1bsp;&1bsp;&1bsp;&1bsp; pierwszego</h1>

Pamiętaj jednak o tym, że jedna spacja widoczna na ekranie to kilkaliterek wpisanych w kod strony, co przy nadużywaniu tego elementumoże znacznie zwiększyć rozmiar pliku strony. Dlatego znacznie lep-szym rozwiązaniem jest skorzystanie z możliwości, jakie oferują ka-skadowe arkusze stylów.

Następnym elementem, z jakim możesz spotkać się przy tworzeniustron WWW, są listy. Specyfikacja języka określa trzy rodzaje list. Sąto listy wypunktowane, numerowane oraz listy definicji. Oczywiściemożna się jeszcze spotkać z podziałem na listy uporządkowane (nu-merowane) oraz nieuporządkowane (wypunktowane).

Lista wypunktowanaDo utworzenia listy wypunktowanej będziemy potrzebowali kombi-nacji dwóch znaczników: <ul></ul> oraz <li></li>. Znacznik <ul></ul>określa ramy listy, natomiast <li></li> to każdy podpunkt listy. W prak-tyce wygląda to mniej więcej tak:

<ul> <li>Pierwsza pozycja listy wypunktowanej</li> <li>nruga pozycja listy wypunktowanej</li> <li>Trzecia pozycja listy wypunktowanej</li></ul>

W przypadku gdy tworzysz stronę WWW zgodną z językiem HTML,nie musisz zamykać znacznika <li>.


Przykład listy wypunktowanej jest widoczny na rysunku 3.7.

Rysunek 3.7.Przykład list:wypunktowanej,numerowaneji definicji

Lista numerowanaDrugi typ listy to lista numerowana, której konstrukcja składa się zeznaczników <ol></ol> oraz <li></li>. Zasada jest dokładnie taka samajak w przypadku list wypunktowanych.

<ol> <li>Pierwsza pozycja listy numerowanej</li> <li>nruga pozycja listy numerowanej</li> <li>Trzecia pozycja listy numerowanej</li></ol>

Przykład listy numerowanej jest widoczny na rysunku 3.7.

Lista definicjiTrzeci i ostatni typ listy to lista definicji. Ma bardzo podobną budowędo dwóch wcześniej omawianych typów. Na listę definicji składa sięgrupa znaczników: <dl></dl><dt></dt><dd></dd>.

<dl> <dt> Słowo definiowane</dt> <dd> opis słowa definiowanego</dd> <dt> Kolejne słowo definiowane </dt> <dd> opis kolejnego słowa definiowanego</dd>


<dt> Jeszcze jedno słowo definiowane</dt> <dd> opis nowego słowa definiowanego</dd> <dt> Ostatnie słowo definiowane</dt> <dd> opis ostatniego słowa definiowanego</dd></dl>

Przykład listy definicji jest widoczny na rysunku 3.7.

Ć W I C Z E N I E

3.7 Tworzenie prostych list

Otwórz uprzednio przygotowany plik o nazwie szablon.html. W treścidokumentu umieść trzy listy: wypunktowaną, numerowaną i definicji.Poszczególne listy rozdziel za pomocą nagłówków stopnia pierwsze-go z informacją na temat rodzaju listy. Całość zapisz na dysku w pli-ku o nazwie listy.html. Otwórz gotowy plik w swojej przeglądarcei sprawdź, czy wszystko działa poprawnie.


Zagnieżdżanie listNa koniec został do omówienia jeszcze jeden ciekawy przypadek. Mamtutaj na myśli listę, która zawiera podpunkty. Takie rozwiązanie bar-dzo często spotykamy na co dzień i na pewno już zastanawiałeś się,czy nie da się w jakiś sposób przenieść go na stronę WWW. Otóżodpowiedź jest bardzo prosta: jest to możliwe, a taka konstrukcjawymaga zastosowania list zagnieżdżonych. Zagnieżdżanie polega naumieszczeniu wewnątrz jednego elementu innego znacznika, np. w li-ście umieszczamy jeszcze jedną listę. Podczas zagnieżdżania możemyłączyć różne typy list, np. numerowaną z wypunktowaną. Odpowied-ni przykład zamieszczam dalej, a efekt jego działania przedstawia ry-sunek 3.8.

<ol><li>Produkty mleczne <ul> <li>mleko 3,2</li> <li>jogurt malinowy</li> <li>śmietanka do kawy</li> </ul></li>


<li>Owoce <ul> <li>jabłka</li> <li>cytrusy <ul> <li>pomarańcze</li> <li>mandarynki</li> </ul> </li> <li>brzoskwinie</li> </ul></li><li>Pieczywo <ul> <li>chleb</li> <li>bułki</li> <li>rogaliki</li> </ul></li></ol>

Rysunek 3.8.Przykład listyzagnieżdżonej

Ć W I C Z E N I E

3.8 Tworzenie zagnieżdżonych list

Otwórz uprzednio przygotowany plik o nazwie listy.html. W treścidokumentu, bezpośrednio pod już istniejącymi listami, dodaj kolejnąpozycję — listę zagnieżdżoną. Struktura i zawartość listy powinna byćtaka jak na rysunku 3.8. Całość zapisz na dysku w tym samym pliku.Otwórz gotowy plik w swojej przeglądarce i sprawdź, czy wszystkodziała poprawnie.



Hiperłącza są podstawą funkcjonowania stron WWW i całej sieci. Bezhiperłączy przeglądanie stron byłoby bardzo utrudnione i wymagało-by od odwiedzającego znajomości budowy danego serwisu WWW orazręcznego wpisywania odpowiednich adresów. Na szczęście mamy hi-perłącza i w dość prosty sposób możemy z nich korzystać. Jak na pew-no zauważyłeś, hiperłącza odnoszą się nie tylko do danego serwisu.Bardzo często prowadzą do innych serwisów, oddalonych od przeglą-danej witryny o tysiące kilometrów, często umieszczonych na serwe-rach na innym kontynencie. Użycie hiperłączy daje wręcz nieograni-czone możliwości, które poznamy w dalszej części.

Proste hiperłączaBudowa hiperłącza jest stosunkowo prosta i wygląda tak:

<a href="strona.html">Kliknij tu, by dowiedzeć się czegoś więcejo mnie.</a>

Jak łatwo wywnioskować, znacznikiem odpowiedzialnym za odsyła-cze jest <a></a>, wzbogacony o pewne atrybuty. I tak dla odsyłaczatakim obowiązkowym atrybutem jest href="adres lub nazwa pliku",określający, do jakiego dokumentu bądź miejsca ma prowadzić naszodnośnik. Ma on więc postać:

<a href="nazwa_pliku.html"><a href="http://danowski.pl"><a href="http://danowski.pl/nazwa_pliku.html">

To tylko pierwsza część odsyłacza, informująca, dokąd mamy się prze-nieść. Teraz musimy opisać nasz odsyłacz tak, by był widoczny i do-stępny ze strony:

<a href="http://www.helion.pl">Strona Wydawnictwa HELION</a>

Oczywiście musimy pamiętać o znaczniku zamykającym </a>, gdyżbez niego opis naszego odsyłacza będzie nieskończenie długi.

Andrzej

Prostokąt

Technology

HTML i XHTML. Ćwiczenia praktyczne