Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00507 008262 11004433 na godz. na dobę w sumie
HTML i XHTML. Ćwiczenia praktyczne - książka
HTML i XHTML. Ćwiczenia praktyczne - książka
Autor: Liczba stron: 152
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0568-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

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 definiowania i przypisywania elementom strony.

Przestań być biernym użytkownikiem sieci.
Stwórz własną stronę WWW.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREŒCI SPIS TREŒCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOŒCIACH O NOWOŒCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl HTML i XHTML. Æwiczenia praktyczne Autor: Bartosz Danowski ISBN: 83-246-0568-1 Format: 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 definiowania i przypisywania elementom strony. (cid:129) Niezbêdne narzêdzia webmastera (cid:129) Definiowanie strony kodowej, s³ów kluczowych i opisu strony (cid:129) Formatowanie tekstu, list, tabel i ³¹czy (cid:129) Tworzenie formularzy (cid:129) Wstawianie na stronê elementów graficznych (cid:129) Definiowanie stylów dla tekstu (cid:129) Testowanie witryny w ró¿nych przegl¹darkach Przestañ byæ biernym u¿ytkownikiem sieci. Stwórz w³asn¹ stronê WWW Wstęp Rozdział 1. Wprowadzenie Podstawowe różnice pomiędzy HTML a XHTML Potrzebne narzędzia — edytory, programy graficzne i przeglądarki Rozdział 2. Podstawy Rozdział 3. Elementy podstawowe Nagłówek dokumentu Ciało dokumentu Uwagi końcowe Elementy języków XHTML i HTML Komentarze Tekst Listy Hiperłącza Elementy graficzne Tabele Formularze Ramki Uwagi końcowe 5 7 9 11 19 19 24 32 33 35 35 36 44 47 54 59 68 77 82 4 HTML i XHTML. Ćwiczenia praktyczne Rozdział 4. Kaskadowe arkusze stylów Instalacja Wprowadzenie Style w praktyce Wybrane właściwości tekstu Wybrane właściwości czcionki Wybrane właściwości list Wybrane właściwości koloru i tła Wybrane właściwości marginesów Wybrane właściwości obramowania Wymiarowanie elementów Wybrane właściwości pozycjonowania elementów Rozdział 5. Praktyczne projekty Rozdział 6. Strona książki Testowanie Poprawność wyświetlania Zgodność ze specyfikacją Podsumowanie Dodatek 83 83 84 95 96 101 106 108 111 113 116 118 123 123 137 137 138 143 145 W trakcie pracy nad dużymi dokumentami stosuj komentarze. Są bardzo przydatne, zwłaszcza gdy nad jedną stroną pracuje kilku projektantów. Pozwoli to uniknąć zbędnego zamieszania. Komentarze bardzo ułatwiają poruszanie się po samym kodzie. Do umieszczenia komentarza służy: !--Tu znajduje się komentarz do naszej strony-- 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ż niepotrzebnie zwiększa to rozmiar dokumentu, który musi zostać pobrany przez przeglądarkę. Poza tym zbyt duża liczba komentarzy oraz rozbudowana treść mogą zostać uznane przez wyszukiwarki internetowe za spam — próbę oszustwa — co zazwyczaj owocuje usunięciem witryny z indeksu. 36 HTML i XHTML. Ćwiczenia praktyczne Do elementów odpowiedzialnych za prezentację tekstu w językach XHTML i HTML możemy zaliczyć nagłówki, akapity, cytaty, indeksy gó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ątrz znacznika body /body . Zgodnie ze specyfikacją XHTML oraz HTML 4.01 znaczniki opisane poniżej służą jedynie do nadania poszczególnym elementom określonej formy. Natomiast dokładne określenie struktury takiego elementu, np. koloru, wyrównania czy czcionki, zostało oddzielone od języka XHTML/HTML i weszło w skład kaskadowych arkuszy stylów. Nagłówki Specyfikacja języków XHTML i HTML przewiduje możliwość utwo- rzenia nagłówków o sześciu zróżnicowanych rozmiarach. Oto ogólny przepis na nagłówek: hx Nagłówek stopnia X /hx Za pomocą litery X oznaczyłem stopień nagłówka. W praktyce w to miejsce wstawiamy cyfry z przedziału od 1 do 6. Wbrew pozorom znacznik 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. Rozdział 3. • Elementy języków XHTML i HTML 37 Rysunek 3.1. Porównanie rozmiarów wszystkich sześciu stopni nagłó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ści dokumentu umieść nagłówki — od H1 do H6. Następnie całość zapisz do 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. Akapit Język XHTML i HTML umożliwia grupowanie tekstu w akapity. Tekst znajdujący się w akapicie automatycznie dopasowuje się do szeroko- ści okna przeglądarki lub jak kto woli — rozdzielczości. Dlatego na jednym komputerze akapit może mieć trzy wiersze tekstu, a na innym mogą 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. 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 HTML i XHTML. Ćwiczenia praktyczne egestas, quam ligula nonummy pede, ac viverra libero ligula sit amet urna. Praesent sed turpis non massa imperdiet placerat. Etiam tincidunt, sapien non aliquet pellentesque, odio leo volutpat erat, sed facilisis nisl lorem id libero. nonec ac nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dictum. Curabitur sem. Sed at felis. Ut eu lacus. Maecenas nisl mauris, tempus iaculis, posuere quis, tristique eget, erat. /p p 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. /p Strona może zawierać dowolną liczbę akapitów, a każdy z nich jest oddzielony od pozostałych pustym wierszem (rysunek 3.2). Przerwa ta jest domyślnie wstawiana przez przeglądarki, a do jej kontroli musisz uż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ć na stronie WWW. Wymaga to użycia kaskadowych arkuszy stylów, które opisałem w dalszej części niniejszych ćwiczeń. Rozdział 3. • Elementy języków XHTML i HTML 39 Ć 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ści dokumentu umieść trzy akapity tekstu. Następnie całość zapisz do pliku pod nazwą akapity.html. Otwórz plik akapity.html w swojej 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. Cytaty Jeżeli chcesz zacytować większy fragment tekstu w kodzie strony, musisz skorzystać ze znacznika blockquote /blockquote . Konstrukcja tego elementu jest następująca: 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 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.a1ie eceMe1 u cy s Tuk uTy jęiyka, cyyając gc . Tęce kaskayc.ych aTkusiy s 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. 40 HTML i XHTML. Ćwiczenia praktyczne Rysunek 3.3. Przykład działania cytatów Tekst cytowany za pomocą znacznika blockquote /blockquote jest nieznacznie 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ści dokumentu umieść trzy akapity tekstu. Pierwszy akapit pozostaw bez zmian. Drugi przekształć na cytat. Natomiast wewnątrz trzeciego aka- pitu wydziel fragment tekstu jako krótki cytat. Całość zapisz na dysku w pliku o nazwie cytaty.html. Otwórz gotowy plik w swojej 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. Indeks górny i dolny Korzystając z kolejnych znaczników języka XHTML i HTML, możemy wymusić 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 Rozdział 3. • Elementy języków XHTML i HTML 41 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łania indeksu górnego i 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órny i dolny. Całość zapisz na dysku w pliku o nazwie indeksy.html. Otwórz gotowy plik w swojej przeglądarce i sprawdź, czy wszystko działa po- prawnie. Jeżeli masz problem z samodzielnym wykonaniem tego ćwiczenia, przepisz przykład zawarty w tekście powyżej. Łamanie wierszy Przy okazji prezentacji znacznika odpowiedzialnego za definiowanie akapitów wspomniałem, że ich zawartość jest automatycznie dopaso- wywana do rozdzielczości ekranu. Innymi słowy, przeglądarka sama decyduje, kiedy złamać daną linię. Działanie takie jest przydatne, ale czasami może utrudnić pracę twórcy witryny zawierającej większą ilość tekstu. Na szczęście w specyfikacji języków XHTML i HTML znajdziemy 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 przypadku strony zgodnej z językiem HTML nie stanowi to najmniejszego problemu. Natomiast w przypadku gdy korzystasz z języka XHTML, musisz omawiany znacznik 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 42 HTML i XHTML. Ćwiczenia praktyczne aliquam, sem in mollis feugiat, nisi ligula mollis erat, sed lobortis ligula lectus sagittis pede. bT / 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 egestas, quam ligula nonummy pede, ac viverra libero ligula sit amet urna. Praesent sed turpis non massa imperdiet placerat. bT / Etiam tincidunt, sapien non aliquet pellentesque, odio leo volutpat erat, sed facilisis nisl lorem id libero. nonec ac nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dictum. 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 miejscach wymusił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órym wymuszono zł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ści dokumentu umieść jeden akapit. Następnie we wnętrzu tekstu dodaj jeden lub dwa znaczniki wymuszające złamanie linii. Całość zapisz na dysku w pliku o nazwie lamaniewiersza.html. Otwórz gotowy plik w swojej 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. Wyróżnianie tekstu Specyfikacja języków XHTML i HTML przewiduje kilka znaczników, za pomocą których możemy wyróżnić fragment tekstu lub pojedyncze słowo czy literę. Aby pogrubić tekst, musisz skorzystać ze znacznika strong /strong . p Wydawnictwo s Tc1g Helic1 /s Tc1g /p Rozdział 3. • Elementy języków XHTML i HTML 43 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 — za pomocą 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ład wyróżnionego sł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ści dokumentu umieść jeden akapit. Następnie we wnętrzu tekstu dodaj znaczniki wymuszające formatowanie fragmentów tekstu (pogrubie- nie, pochylenie i użycie czcionki o stałej szerokości). Całość zapisz na dysku w pliku o nazwie wyroznianietekstu.html. Otwórz gotowy plik w swojej 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. Twarda spacja Jeżeli w bloku tekstu lub nagłówku umieścisz dodatkowe znaki spacji za pomocą klawiatury i klawisza spacji, to przeglądarka automatycznie je zignoruje i wyświetli tylko jeden znak przerwy. h1 Nagłówek stopnia pierwszego /h1 44 HTML i XHTML. Ćwiczenia praktyczne Zgodnie z tym, co napisałem, podany przykład, pomimo że zawiera kilka 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 do kodu wstawić znak twardej spacji. W praktyce oznacza to skorzysta- nie z ciągu znaków nbsp;, 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 kilka literek wpisanych w kod strony, co przy nadużywaniu tego elementu moż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 tworzeniu stron WWW, są listy. Specyfikacja języka określa trzy rodzaje list. Są to listy wypunktowane, numerowane oraz listy definicji. Oczywiście można się jeszcze spotkać z podziałem na listy uporządkowane (nu- merowane) oraz nieuporządkowane (wypunktowane). Lista wypunktowana Do 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 . Rozdział 3. • Elementy języków XHTML i HTML 45 Przykład listy wypunktowanej jest widoczny na rysunku 3.7. Rysunek 3.7. Przykład list: wypunktowanej, numerowanej i definicji Lista numerowana Drugi typ listy to lista numerowana, której konstrukcja składa się ze znaczników ol /ol oraz li /li . Zasada jest dokładnie 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 Przykład listy numerowanej jest widoczny na rysunku 3.7. Lista definicji Trzeci 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 46 HTML i XHTML. Ćwiczenia praktyczne 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ści dokumentu 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ą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. Zagnieżdżanie list Na koniec został do omówienia jeszcze jeden ciekawy przypadek. Mam tutaj 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 konstrukcja wymaga zastosowania list zagnieżdżonych. Zagnieżdżanie polega na umieszczeniu 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 Rozdział 3. • Elementy języków XHTML i HTML 47 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 listy zagnież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ści dokumentu, 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 wszystko działa poprawnie. 48 HTML i XHTML. Ćwiczenia praktyczne Jeżeli masz problem z samodzielnym wykonaniem tego ćwiczenia, przepisz przykład zawarty w tekście powyżej. Hiperłącza są podstawą funkcjonowania stron WWW i całej sieci. Bez hiperłączy przeglądanie stron byłoby bardzo utrudnione i wymagało- by od odwiedzającego znajomości budowy danego serwisu WWW oraz rę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łącza Budowa hiperłącza jest stosunkowo prosta i wygląda tak: a href= strona.html Kliknij tu, by dowiedzeć się czegoś więcej o mnie. /a Jak łatwo wywnioskować, znacznikiem odpowiedzialnym za odsyła- cze jest a /a , wzbogacony o pewne atrybuty. I tak dla odsyłacza takim obowiązkowym atrybutem jest href= adres lub nazwa pliku , określający, do jakiego dokumentu bądź miejsca ma prowadzić nasz odnoś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.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML i XHTML. Ćwiczenia praktyczne
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: