Kto to powiedział, że milczenie jest złotem?

Style fizyczne

Czcionka pogrubiona:
Ten tekst jest pisany czcionką pogrubioną

Kursywa:
Ten tekst jest pisany kursywą

Czcionka maszynowa:
Wpisz copy nazwa_pliku lpt:, aby wydrukować plik

Czcionka powiększona:
Moje oczy zrobiły się wielkie

Czcionka pomniejszona:
Krasnoludki są tak <small>malutkie, że ich nie widać

Indeks dolny:
H<sub>2O

Indeks górny:
<sup>31P

Style logiczne

Emfaza:
Lubię Cię <em>bardzo.

Wyraźne wyróżnienie:
Lubię Cię <strong>ogromnie.

Kod programu:
For a=1 to 100

Tekst przykładowy:
Adres URL: <samp>http://www.microsoft.com.pl

Tekst z klawiatury:
Podaj komendę: find . -name ”prune” print

Zmienna:
chown twoje_imie nazwa_pliku

Definicja:
Podane w tabeli znaczniki definiują <def>style znaków.

Cytat:
Kto to powiedział, że milczenie jest złotem?

Koty duże

Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.

Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.

Koty małe

Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata).

Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.

Koty duże

Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.

Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.

Koty małe

Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata).

Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.

Lista wypunktowana:

• pierwsza pozycja listy
• druga pozycja listy
• trzecia pozycja listy

. Oto wartości atrybutu type dla listy wypunktowanej: ‰

"disc" – znak domyślny – czarna kropka

‰

"circle" – kółko (puste w środku)

‰

"square" – kwadrat

Na wydruku 3.9 pokazano różne przykłady definicji list wypunktowanych, a rysunek 3.10 prezentuje wygląd list w oknie przeglądarki. Wydruk 3.9. Lista wypunktowana – znaki wypunktowania

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Kropki jako znaki wypunktowania:

• Brzoza
• Topola
• Lipa
• Dąb

Kółka jako znaki wypunktowania:

• Brzoza
• Topola
• Lipa
• Dąb

Kwadraty jako znaki wypunktowania:

• Brzoza
• Topola
• Lipa
• Dąb


Rys. 3.10. Różne przykłady list wypunktowan ych – atrybut type znacznika
umożliwia zdefiniowanie znaku wypunktowani a

Jak zdefiniować listę numerowaną? Drugim typem listy jest lista numerowana. Definiuje ją para znaczników
. Znacznik zamykający jest absolutnie konieczny. Pozycje listy są oznaczane w taki sam sposób, jak w przypadku listy wypunktowanej i podobnie jak tam znacznik zamykający jest opcjonalny. Wydruk 3.10 prezentuje podstawową postać listy numerowanej: Wydruk 3.10. Lista numerowana <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Lista numerowana:

1. pierwsza pozycja listy
2. druga pozycja listy
3. trzecia pozycja listy





Czy można modyfikować znak numerowania listy? Sposób numeracji listy numerowanej można zmieniać, korzystając z tego samego atrybutu type, co w przypadku listy wypunktowanej. Inne są oczywiście jego wartości. Atrybut type umieszczany jest w znaczniku otwierającym
. W przypadku list numerowanych, wartości atrybutu type są następujące: ‰

"l" – numeracja standardowa (1, 2, 3...)

‰

"a" – małe litery alfabetu (a, b, c...)

‰

"A" – wielkie litery alfabetu (A, B, C...)

‰

"i" – kolejne liczby rzymskie pisane małymi literami (i, ii, iii...)

‰

"I" – kolejne liczby rzymskie (I, II, III...)

Na wydruku 3.11 pokazano różne przykłady definicji list numerowanych, a rysunek 3.11 prezentuje wygląd list w oknie przeglądarki. Wydruk 3.11. Lista numerowana – typy numeracji <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Lista numerowana:

1. Lipa
2. Dąb
3. Klon
4. Kasztan

Lista alfabetyczna – wielkie litery:

1. Lipa



2. Dąb
3. Klon
4. Kasztan

Lista alfabetyczna – małe litery:

1. Lipa
2. Dąb
3. Klon
4. Kasztan

Numeracja rzymska:

1. Lipa
2. Dąb
3. Klon
4. Kasztan

Liczby rzymskie pisane małymi literami:

1. Lipa
2. Dąb
3. Klon
4. Kasztan


Rys. 3.11. Różne przykłady list numerowanych – atrybut type znacznika
umożliwia zdefiniowanie znaku numeracji

Jak utworzyć listę definicji? Trzecim i ostatnim typem listy jest lista definicji. Umożliwia ona prezentacje terminów wraz z definicjami. Listę definicji otwiera znacznik

, a zamyka znacznik

. Terminy wstawiane są za pomocą pary
, a ich definicje przy użyciu pary
. Znaczniki i są opcjonalne. Wydruk 3.12 pokazuje podstawowy przykład takiej listy, a jej wygląd możesz zobaczyć na rysunku 3.12. Wydruk 3.12. Lista definicji <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">



Lista definicji:

Pieniądze

Środek płatniczy.

Woda

Substancja chemiczna, złożona z dwóch atomów wodoru i jednego atomu tlenu.



Rys. 3.12. Lista definicji

Czy listy różnego typu można ze sobą łączyć? Tak, listy różnego typu można łączyć – jest to tak zwane zagnieżdżanie list. Jest ono przydatne, gdy trzeba na przykład zdefiniować podpunkty określonego punktu listy. Wówczas wystarczy wstawić listę jako element innej listy. Brzmi może trochę tajemniczo, ale przykład wyjaśni Ci o co chodzi. Skorzystajmy z wydruku 3.10 listy numerowanej i dodajmy do jej kolejnych numerowanych pozycji podpunkty oznaczone znakiem wypunktowania. Efekty tej operacji prezentuje wydruk 3.13. Wpisz kod html w edytorze, zapisz swój plik i przetestuj w przeglądarce (patrz rysunek 3.13).

Wydruk 3.13. Zagnieżdżanie list <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Lista numerowana z podpunktami:

1. Pierwsza pozycja listy
• punkt pierwszy
• punkt drugi
2. Druga pozycja listy
• punkt pierwszy
• punkt drugi
3. Trzecia pozycja listy
• punkt pierwszy
• punkt drugi


Rys. 3.13. Lista numerowana, której każda pozycja ma podpunkty

Czy w obrębie listy można korzystać z innych znaczników? Jeśli pozycję listy stanowi długi tekst, można skorzystać na przykład ze znaczników akapitu,

lub nagłówków, , aby nadać mu znośniejszą dla oka postać. Można także wprowadzić do listy trochę wolnej przestrzeni – tu przyda się znacznik
, lub wydzielić punkty podstawowe podkreślając je. Spróbujmy tak właśnie potraktować naszą listę numerowaną z podpunktami (patrz wydruk 3.13, rysunek 3.13). W obecnej postaci sprawia ona wrażenie przeładowanej i jest mało czytelna. Wprowadźmy więc wolny obszar, a liniami poziomymi podkreślmy główne punkty. Otwórz więc plik z wydruku 3.13 i wstaw za każdą z pozycji listy numerowanej znacznik

---

. Aby podkreślony został sam tekst, można w znaczniku

---

dodać atrybut width=”wartość” określający długość linii poziomej (patrz tabela 3.2) oraz atrybut align=”left”, który spowoduje dosunięcie linii do lewego marginesu. Za podpunktami warto wprowadzić trochę wolnego miejsca – wówczas łatwiej będzie czytać listę. Tak więc wstaw za wyrażeniem
1. punkt drugi
dwa znaczniki
. Wydruk 3.14 prezentuje cały kod, a efekty wprowadzonych zmian możesz zobaczyć na rysunku 3.14. Wydruk 3.14. Poprawianie czytelności listy za pomocą linii poziomych i wolnej przestrzeni

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Lista numerowana z podpunktami:

1. Pierwsza pozycja listy

---

• punkt pierwszy
• punkt drugi



2. Druga pozycja listy

---

• punkt pierwszy
• punkt drugi



3. Trzecia pozycja listy

---

• punkt pierwszy
• punkt drugi


Rys. 3.14. Lista numerowana z podpunktami – wprowadzono trochę wolnej przestrzeni i podkreślono główne punkty

Najważniejsze informacje ‰

Atrybuty opisują właściwości elementów strony WWW. Definiuje się je za pomocą par: atrybut=”wartość” i umieszcza zawsze w znaczniku otwierającym danego elementu HTML. Wartości należy podawać w cudzysłowie – pojedynczym, ’’ lub podwójnym, ””.

‰

Aby przekształcić tekst w nagłówek, należy zawrzeć go między znacznikami nagłówka, , umieszczonymi w sekcji body dokumentu.

‰

W języku HTML istnieje sześć poziomów nagłówka: h1, h2, h3, h4, h5 i h6. Poziom ważności nagłówka maleje wraz ze wzrostem jego numeru.

‰

Nagłówek może być dowolnie długi.

‰

Aby wyśrodkować nagłówek, znaczniki nagłówka można zagnieździć w obrębie znacznika : Nagłówek, lub dodać w znaczniku nagłówka atrybut align=”center”. W ten sam sposób można wypośrodkowywać obrazy lub tekst.

‰

Akapit tekstu definiowany jest przez parę znaczników
umieszczaną w obrębie znaczników .

‰

Aby zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym akapicie można skorzystać ze znacznika
.

‰

Aby zachować istniejący układ tekstu, w którym użyto dodatkowych odstępów i łamań wierszy, można skorzystać z elementu pre: <pre>Tekst Preformatowany.

‰

Aby zastosować do tekstu formatowanie takie jak pogrubienie, kursywa, indeks dolny lub górny, czy któryś ze stylów logicznych, należy formatowany tekst umieścić między parą znaczników formatujących. Lista znaczników znajduje się w tabeli 3.1 oraz w tabeli A1 z dodatku A.

‰

Do tego samego fragmentu tekstu można zastosować jednocześnie różne style, pamiętając jednak o znacznikach zamykających i poprawnej kolejności znaczników.

‰

Znacznik definiujący linię poziomą to

---

. Nie ma on znacznika zamykającego.

‰

Listy numerowane – to listy, których elementy są numerowane. Takie listy są objęte znacznikami
, a każdy element listy rozpoczyna się od znacznika
2. .
   
   ‰
   
   Listy wypunktowane – w tych listach elementy są oznaczane znakiem wypunktowania i podobnie jak poprzednio poprzedza je znacznik
3. . Lista wypunktowana zawiera się między znacznikami
   .
   
   ‰
   
   Listy definicji – to listy, w których są dwie składowe: pojęcie i definicja. Znacznik
   definiuje pojęcie, a znacznik
   definicję. Np.:
   Kot
   Zwierzę futerkowe
   . Elementy umieszczane są w obrębie pary znaczników
   .
   
   ‰
   
   Listy wypunktowane i numerowane można modyfikować. Atrybut type pozwala na zmianę domyślnego znaku wypunktowania, a w przypadku list numerowanych, znaku numerowania.
   
   Rozdział 4. Kaskadowe arkusze stylów Ogólna postać kaskadowego arkusza stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie tekstu oraz obrazów na stronie, a pełna lista ich możliwości jest znacznie dłuższa. Znaczniki HTML zostały pierwotnie zaprojektowane jako narzędzia definiowania zawartości dokumentu. I tak znacznik nagłówka określał: „To jest nagłówek”, znacznik akapitu stwierdzał: „To jest akapit tekstu”, znacznik tabeli informował: „To jest tabela”, a o układzie strony decydowała przeglądarka. Wraz z rozbudową możliwości przeglądarek zaczęły pojawiać się coraz to nowe znaczniki i atrybuty. Tworzenie stron WWW, których zawartość byłaby dobrze odseparowana od układu dokumentu, stawało się coraz trudniejsze. Z tego właśnie powodu konsorcjum W3C powołało do życia kaskadowe arkusze stylów – wprowadzono je do specyfikacji HTML 4.0. Obecnie są one standardem i zarówno Netscape 4, jak i Internet Explorer 4 je obsługują. Co daje stosowanie arkuszy CSS? Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz aktualizacja postaci dokumentu w przypadku takich zmian. One naprawdę zaoszczędzą Twój czas! Wyobraź sobie, że w rozbudowanej witrynie trzeba zmienić sposób formatowania dziesiątków nagłówków czy połączeń! To wiele godzin pracy, jeśli będziesz ręcznie wyszukiwał elementy i zmieniał ich atrybuty, lub kilka chwil, jeśli zastosujesz w dokumencie arkusze CSS – wówczas modyfikacja stylu to parę stuknięć w klawisze, a aktualizacja to automat. Czym są kaskadowe arkusze stylów? Kaskadowy arkusz stylów to mechanizm definiujący formatowanie dla danej strony przy zastosowaniu stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą.
   
   Jakie są rodzaje arkuszy stylów? Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym elemencie HTML – wówczas mówimy o stylu wpisanym , w obrębie elementu head strony HTML (to znaczy między znacznikami ) – takie arkusze stylów nazywa się osadzonymi, lub może zostać pobrana z pliku zewnętrznego – jest to wtedy zewnętrzny lub łączony arkusz stylów. Wszystkie typy arkuszy CSS – wpisane, osadzone i zewnętrzne – można stosować jednocześnie. Łączone arkusze stylów są przechowywane w zewnętrznym pliku o rozszerzeniu nazwy .css. Składnia takiego arkusza jest podobna jak w przypadku arkusza osadzonego, a sformatowanie strony wymaga jedynie umieszczenia połączenia do pliku zawierającego definicję stylu. Jaki styl zostanie zastosowany, jeśli w dokumencie zdefiniowano kilka arkuszy stylów (czyli jak działa kaskada stylów)? W przypadku obecności różnych arkuszy stylów na jednej stronie, hierarchia ich ważności rośnie w następującej kolejności: 1.
   
   Domyślne ustawienia przeglądarki
   
   2.
   
   Zewnętrzny arkusz stylów
   
   3.
   
   Osadzony arkusz stylów (umieszczony między znacznikami )
   
   4.
   
   Styl wpisany (dotyczący konkretnego elementu HTML)
   
   Najwyższy priorytet ma styl wpisany, co oznacza, że jego ustawienia są dominujące względem zadeklarowanych w sekcji head oraz pobranych z pliku zawierającego zewnętrzny arkusz stylów. Dominują także nad domyślnymi ustawieniami przeglądarki. Jaka jest ogólna postać kaskadowego arkusza stylów? Postać arkusza stylu CSS zależy od typu arkusza. I tak w przypadku stylu wpisanego – a więc umieszczonego w konkretnym znaczniku – ma ona taką oto postać:
   
   Ogólna postać osadzonego arkusza CSS jest następująca: <style type="text/css">
   
   Zawarta w obrębie elementu style definicja następującą składnię: selektor{właściwość: wartość}
   
   Selektorem nazywa się znacznik czy też element, który chcesz zdefiniować, właściwość to jego atrybut, który zmieniasz przypisując mu nową wartość. Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych, tak jak w tym przykładzie: body {color: black}
   
   Jeśli wartość ma postać wielowyrazową – na przykład sans serif – umieszcza się ją w cudzysłowie:
   
   p {font-family: "sans serif"}
   
   Oto przykład rzeczywistej definicji: <style type="text/css">
   
   Między znacznikami <style> i umieszczana jest lista znaczników HTML wraz z właściwościami arkusza, które je definiują. Definicja zaprezentowana powyżej zawiera tylko jeden symboliczny selektor definiowany przez jedną właściwość CSS. W przypadku większej liczby właściwości, wszystkie muszą być umieszczone w nawiasie klamrowym ({}) oraz oddzielone średnikami (;). Zwróć uwagę na znaczniki komentarza html, obejmujące wszystkie znaczniki i właściwości CSS – dzięki temu, że zostały zastosowane, przeglądarki, które nie potrafią obsługiwać arkuszy stylów nie wyświetlą śmieci, lecz potraktują kod jako komentarz. Te z kolei, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów. Co oznacza ta definicja stylu? W zaprezentowanej definicji stylu zdefiniowany jest krój pisma, który zostanie zastosowany do tekstu strony w sekcji body. Innymi słowy tekst w tej sekcji będzie pisany czcionką Verdana (lub czcionką Arial, ewentualnie czcionką Helvetica, jeśli Verdana nie zostanie znaleziona na komputerze użytkownika – jak widzisz, arkusze stylu uwzględniają nawet ewentualny brak zaplanowanej przez twórcę strony czcionki). Styl czcionki zostanie zastosowany także do tekstu umieszczonego między znacznikami

   i

   , natomiast tekst umieszczony w komórkach tabeli wymaga odrębnej definicji stylu. W jaki sposób w jednej definicji stylu określić kilka właściwości? Jeśli chciałbyś zdefiniować w definicji stylu kilka właściwości, musisz je rozdzielać średnikami, tak jak w poniższym wyrażeniu przykładowym, w którym do tekstu stosowane jest wyrównanie i kolor: p {text-align: center; color: red}
   
   Aby definicja była bardziej czytelna, każdą z właściwości możesz umieszczać w osobnym wierszu: p { text-align: center; color: black; font-family: arial }
   
   Czy jedną właściwość można przypisać kilku elementom? W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są przecinkami. Oto przykład definicji, w której wszystkim poziomom nagłówka (od h1 do h6) przypisany zostaje kolor czerwony:
   
   h1, h2, h3, h4, h5, h6 { color: red }
   
   Czy jednemu elementowi można przyporządkować różne style? Powiedzmy, że chcesz w swoim dokumencie zastosować do akapitów dwa różne sposoby wyrównania tekstu: pewne akapity chcesz dosunąć do prawego marginesu, a pozostałe wycentrować. W takim przypadku przydatny będzie atrybut class. Pozwala on zdefiniować różne style dla tego samego elementu – inaczej mówiąc pozwala zdefiniować klasy stylu. Klasę określa się w taki oto sposób: element.nazwa_klasy{właściwość: wartość}
   
   W naszym przykładzie musimy więc zdefiniować dwie klasy: pierwsza, nazwijmy ją prawy, w której ustawimy sposób wyrównania tekstu do prawego marginesu, i klasa center, w której tekst jest wyśrodkowany: p.prawy {text-align: right} p.center {text-align: center}
   
   Teraz wystarczy wstawić nazwę klasy do tych znaczników, w których chcemy mieć określony sposób formatowania i gotowe:

   
   
   Ten akapit zostanie wyrównany do prawej.

   Ten akapit zostanie wyśrodkowany.

   
   
   Nazwy klas mogą być dowolne, pamiętaj jednak, by nie stosować w nich polskich liter. Nazwę selektora w definicji klasy można pominąć: .nazwa_klasy{właściwość: wartość}
   
   Wówczas zdefiniowany zostanie styl, który można zastosować do wielu elementów. W przykładzie przedstawionym poniżej klasa prawy została zastosowana zarówno do elementu h1, jak i do akapitu p:

   Ten nagłówek został wyrównany do prawego marginesu.

   Ten akapit został wyrównany do prawego marginesu.
   
   

   
   
   Czy można narzucić styl pojedynczym wystąpieniom danego elementu? Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Atrybut id pozwala więc oznaczać elementy podobnie jak atrybut class – id jest czymś w rodzaju identyfikatora elementów. Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id:

   Do tego akapitu zostaną zastosowane ustawienia stylu zdefiniowane w definicji id o nazwie wstep.

   
   
   Atrybut id można zdefiniować na dwa sposoby: tak, by styl stosowany był do dowolnego elementu o określonym id lub tak, by styl był stosowany do określonego elementu o danym id. Ta definicja stanowi, że styl zostanie zastosowany do każdego elementu oznaczonego identyfikatorem wstep: #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
   
   A oto drugi przypadek. Tutaj styl będzie zastosowany tylko do elementu p o id=”wstep”: p#wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
   
   Zwróć uwagę, że w obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak: #nazwa_id.
   
   Komentarze CSS Definicje stylu nie zawsze są proste, a nawet jeśli są, nie zawsze pamiętamy dlaczego wybraliśmy takie, a nie inne właściwości. Aby zabezpieczyć się przed skutkami niepamięci wstecznej, stosuj komentarze. Będą bardzo przydatne przy przyszłej edycji arkusza stylów. Jaką postać ma komentarz CSS? Komentarz CSS rozpoczyna się od znaku prawego ukośnika, nim pojawia się gwiazdka, potem tekst komentarza i wreszcie zamknięcie komentarza gwiazdką i ukośnikiem. Oto przykład: /* To jest komentarz CSS */ p { text-align: right; /* To też jest komentarz CSS */ color: green; font-family: arial }
   
   Styl wpisany Informacje ogólne na temat arkuszy stylów sprawdzimy teraz w praktyce. Zaczniemy od zdefiniowania stylu wpisanego. Co to jest styl wpisany? Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki. Jeśli chcesz na przykład zastosować kursywę do zawartości znacznika

   , odpowiednią informację musisz umieścić w tym właśnie znaczniku. Ogólna postać definicji stylu wpisanego jest taka:
   
   Oto przykład:

   Treść tytułu

   
   
   Styl wpisany powinien być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu do pojedynczego wystąpienia danego elementu, z reguły tylko tam, gdzie niezbędne są drobne korekty stylu. Nie spełnia on bowiem zasadniczego celu kaskadowego arkusza stylów, a więc globalnej kontroli stylu całej strony. Jak zdefiniować w dokumencie html styl wpisany? Aby lepiej zrozumieć o co tu chodzi, sformułujmy razem taką lokalną definicję stylu.
   
   Otwórz w edytorze kod źródłowy szkieletu strony mojastrona.html lub wpisz go ręcznie. Między znacznikami wstaw parę akapitów tekstu. Zdefiniuj w wybranych akapitach inny rozmiar czcionki – użyj do tego celu właściwości font-size (w końcowej części rozdziału znajdziesz wyjaśnienia wykorzystywanych tu właściwości – patrz tabele 4.1 i 4.2). Możesz skorzystać z pomocy wydruku 4.1. Zapisz plik pod nazwą wpisany.html i otwórz stronę w oknie przeglądarki (patrz rysunek 4.1). Wydruk 4.1. Styl wpisany <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Styl zastosowany w obrębie znacznika p.

   W tym akapicie nie zastosowano stylu.

   Styl zastosowano w obrębie znacznika p.

   Zawartość tego znacznika p nie jest formatowana.

   
   
   Rys. 4.1. Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu
   
   Wpisany arkusz stylów oddziałuje tylko na te akapity, w znacznikach których umieszczona została definicja stylu. Pozostałe akapity zachowują domyślne formatowanie.
   
   Osadzony arkusz stylów Co to jest osadzony arkusz stylów i jaką ma postać? Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami <style>. Element ten powinien znaleźć się w nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony. Oto przykład: <style type="text/css"> <--! hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/kot.gif")} -->
   
   Przeglądarka przeczyta te definicje stylów i sformatuje dokument zgodnie z nimi. Zwróć uwagę, że atrybut type znacznika <style> ma wartość text/css – jest to dla przeglądarki informacja, że następne
   
   instrukcje to arkusz stylów. Instrukcje te zawarte są w znaczniku komentarza – jest to zabezpieczenie na wypadek, gdyby strona trafiła do przeglądarki starego typu, która nie potrafi obsłużyć arkuszy stylów. Wówczas instrukcje formatowania zostaną zignorowane, a nie wyświetlone na ekranie jako tekst. Globalne formatowanie oznacza, że styl zostanie zastosowany do wszystkich instancji elementu, dla którego został zdefiniowany. Wyjątki od reguły? Tak, już o nich wspominaliśmy przy okazji omawiania klas i atrybutów id. W dalszej części rozdziału zobaczysz, jak w praktyce rozwiązać taki problem. Jak zdefiniować osadzony arkusz stylów? Aby utworzyć i przetestować osadzony arkusz stylów, otwórz edytor HTML i wpisz podstawowe znaczniki definiujące szkielet strony: , i . Wstaw znaczniki <style> i – definicje stylów są umieszczane właśnie między nimi. Dodatkowe informacje na temat zasad tworzenia definicji stylów znajdziesz we wstępie do tego rozdziału. Możesz też skorzystać z definicji zawartych na wydruku 4.2. Wydruk 4.2. Osadzony arkusz stylów <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css">

   Czerwony nagłówek na białym tle

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

   
   
   

   Ten nagłówek ma takie samo formatowanie jak poprzedni

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

   
   
   Zapisz plik pod nazwą osadzony.html i wyświetl dokument html w przeglądarce (patrz rysunek 4.2). Rys. 4.2. Osadzony arkusz stylów określa style na całej stronie
   
   Skąd się wzięła taka postać strony? Jak już wspomniałam, osadzony arkusz stylów definiuje style dla całego dokumentu. Definicja stylu z wydruku 4.2: <style type="text/css">
   
   
   
   definiuje domyślny wygląd całej sekcji body, lecz narzuca specyficzne ustawienia dla wszystkich nagłówków h2 (w przeciwnym razie do nagłówków zastosowane zostałyby także ustawienia sekcji body – wynika to z zasady dziedziczenia ustawień stylu przez elementy podrzędne) i dodatkowe dla wszystkich akapitów p. Odnośnie sekcji body stanowi ona, że: ‰
   
   Tło strony będzie koloru niebieskiego – decyduje o tym wartość właściwości background: #0000FF. Symbol, #0000FF, to kod koloru. Zamiast niego możesz użyć nazwy koloru, blue. Kody kolorów znajdziesz w dodatku D.
   
   ‰
   
   Tekst dokumentu (akapitów i nagłówków) będzie koloru żółtego. Określa to para: color: #FFFF00 (wynika stąd, że nagłówki h2 powinny być pisane czcionką żółtą, lecz my chcemy czerwoną na białym tle i dlatego musimy przygotować specjalną definicję stylu dla h2).
   
   ‰
   
   Z obu stron pojawią się marginesy o szerokości 2 cm: margin-left: 2cm; marginright: 2cm.
   
   Jeśli chodzi o nagłówki h2, definicja stylu określa, że: ‰
   
   Czcionka ma mieć rozmiar 20 (bo font-size: 20pt).
   
   ‰
   
   Tekst ma pojawiać się na białym tle i ma być koloru czerwonego: color: #FF0000; background: #FFFFFF.
   
   Do akapitów z kolei zastosowane zostaną domyślne ustawienia zawarte w definicji stylów sekcji body, a więc marginesy i kolor tekstu. Dodatkowo jednak: ‰
   
   Narzucony zostanie rozmiar czcionki – font-size: 14pt.
   
   ‰
   
   oraz wcięcie pierwszego wiersza: text-indent: 4cm.
   
   Jak widzisz, pomimo tajemniczego wyglądu, osadzony arkusz stylów nie jest wcale tak tajemniczy. Wyjaśnienia dotyczące stosowania właściwości odnoszących się do czcionki i tekstu znajdziesz w tabelach 4.1 i 4.2. W jaki sposób do jednej instancji elementu zastosować inny styl? Powiedzmy więc, że chcesz, aby jeden z akapitów tekstu miał zupełnie inne formatowanie niż pozostałe. Realizacja tego jest prosta, jeśli skorzystamy z atrybutu id (patrz informacje wstępne do tego rozdziału). Na wydruku 4.3 przedstawiony został kod źródłowy dokumentu z wydruku 4.2, w którym jednemu z akapitów zmieniono styl. Akapitowi przypisano identyfikator id=”wyjatek”, a styl #wyjatek dołączono do listy definicji stylów w elemencie style. Zgodnie z definicją, tekst pojawi się na białym tle i będzie koloru czerwonego. Pozostałe ustawienia stylu akapitu zostaną zachowane. Wygląd strony pokazany został na rysunku 4.3. Wydruk 4.3. Osadzony arkusz stylów, w którym wykorzystano atrybut id
   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css">

   Czerwony nagłówek na białym tle

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

   Ten nagłówek ma takie samo formatowanie jak poprzedni

   Ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane.

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

   
   
   Rys. 4.3. Osadzony arkusz stylów określa style na całej stronie, lecz można spod jego działania wyłączyć określone instancje elementu
   
   Jak zastosować w dokumencie klasy? Czas już, aby przyjrzeć się klasom od strony praktycznej (wstępne informacje na temat klas znajdziesz na początku tego rozdziału). Sformułujmy najpierw problem: chcemy, aby akapity tekstu były wyrównywane naprzemiennie – raz do prawego, a raz do lewego marginesu. Zgodnie z tym, co już wiemy o klasach, musimy zdefiniować dwie klasy – nazwiemy je prawa i lewa – a ich definicje wstawić do elementu style. Otwórz więc plik osadzony.html w edytorze tekstu i dodaj w nim jeszcze kilka akapitów tekstu, aby efekt dywersyfikacji wyrównania akapitów po zastosowaniu klas stał się lepiej widoczny. Zdefiniujmy nasze klasy – skorzystamy w nich z właściwości text-align, która umożliwia określenie sposobu wyrównania tekstu: .lewa {text-align: left} .prawa {text-align: right}
   
   Umieśćmy klasy tam, gdzie ich miejsce – w sekcji head, między znacznikami <style>. Pozostaje jedynie oznaczyć elementy strony, do których zastosujemy klasy stylu – w znacznikach

   trzeba dodać atrybut class i przypisać mu odpowiednie wartości: prawa lub lewa. Szczegóły tej operacji znajdziesz na wydruku 4.4. Wydruk 4.4. Osadzony arkusz stylów i klasy
   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css">

   Czerwony nagłówek na białym tle

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

   Ten nagłówek ma takie samo formatowanie jak poprzedni

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

   
   
   

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

   
   
   Efekty możesz podziwiać na rysunku 4.4. Rys. 4.4. Klasy pozwalają modyfikować właściwości arkusza stylów
   
   Zwróć uwagę, że w definicjach klas nie użyliśmy nazwy elementu – postać definicji to .lewa {textalign: left} i .prawa {text-align: right}, a nie p.lewa {text-align: left} i p.prawa {text-align: right}. Ta druga forma jest także prawidłowa, lecz mniej ogólna – dotyczyłaby tylko elementów p. Ogólna postać pozwala nam skorzystać z klas także w przypadku stosowania wyrównania do innych elementów, na przykład do nagłówków.
   
   Zewnętrzny arkusz stylów Kiedy stosowany jest zewnętrzny arkusz stylów? Zewnętrzny (lub inaczej: łączony) arkusz stylów to doskonałe rozwiązanie dla witryn, czyli układów wielu stron. Wówczas te same style mogą być stosowane do wszystkich stron witryny. Jeśli przyjdzie Ci ochota zmienić wygląd swojej witryny, wprowadzisz zmiany tylko w pliku arkuszy stylów, a zmiany zostaną automatycznie uwzględnione na wszystkich stronach. Zewnętrzny arkusz stylów rezyduje zgodnie z nazwą poza dokumentem html, w zewnętrznym pliku o rozszerzeniu nazwy .css. Jak wygląda zewnętrzny arkusz stylów? W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi zostać zdefiniowane połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje się za pomocą znacznika , który umieszczany jest w sekcji head dokumentu:
   
   Definicje stylów rezydują w pliku mojestyle.css – nazwa pliku może być dowolna, ale musi mieć rozszerzenie .css. Przeglądarka odczyta plik i sformatuje dokument zgodnie z zawartymi w nim instrukcjami. W znaczniku musi znaleźć się atrybut rel o wartości stylesheet. Dzięki temu przeglądarka będzie wiedziała, że atrybut href podaje jej adres URL pliku, który zawiera arkusz stylów. Jak przygotować plik .css? Plik .css można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników HTML. Oto przykład zawartości: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/obraz.gif")}
   
   Jak w praktyce zastosować zewnętrzny arkusz stylów? Przećwiczmy stosowanie zewnętrznego arkusza stylów na przykładzie dokumentu z wydruku 4.4. W dokumencie tym stosowany jest osadzony arkusz stylów. Wyrzucimy z kodu źródłowego strony element style, w którym znajdują się definicje stylów, i zastąpimy go znacznikiem z odpowiednimi atrybutami. Najpierw jednak przygotujmy plik zawierający arkusz stylów. Otwórz edytor i wyświetl w nim kod dokumentu z wydruku 4.4. Wytnij z niego definicje stylów i wklej wycięty fragment kodu do nowego okna. Jego zawartość powinna być taka jak na wydruku 4.5. Zapisz plik na przykład pod nazwą zewnetrzny.css (bez polskich liter i z rozszerzeniem .css).
   
   Wydruk 4.5. Zewnętrzny arkusz stylów body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} .lewa {text-align: left} .prawa {text-align: right}
   
   Wróć do dokumentu HTML, w którym chcesz zastosować plik zewnętrzny. W obrębie znaczników , poniżej znacznika <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   Zapisz plik i wyświetl go w przeglądarce. Prezentuje się identycznie jak plik korzystający z arkusza osadzonego – nic dziwnego, w końcu zewnętrzny arkusz stylów zawiera zestaw tych samych definicji – tylko tytuł na pasku tytułu uświadamia nam, że to nie ta sama strona (patrz rysunek 4.5).
   
   Rys. 4.5. Na stronie korzystającej z zewnętrznego arkusza stylów umieszczane jest odwołanie do pliku zawierającego definicje stylów; przedłużenie nazwy tego pliku to .css
   
   Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników <span> . Co umożliwia element span? Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu – na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span jest następująca: <span style=”definicja_stylu”>
   
   W jaki sposób zastosować element span w kodzie HTML? Powiedzmy, że w dokumencie z wydruku 4.4 chcesz w drugim z nagłówków wyraz „formatowanie” napisać wielkimi literami w kolorze niebieskim, a cały wyraz podkreślić. Co robimy? Obejmujemy znacznikami <span> żądany wyraz (lub frazę) – w naszym przypadku wyraz znajduje się w obrębie nagłówka h2, i umieszczamy w znaczniku otwierającym <span> atrybut style, któremu przypisujemy odpowiednie właściwości. Rzuć okiem na wydruk 4.6. Skuteczność metody prezentuje rysunek 4.6.
   
   Wydruk 4.6. Wykorzystanie elementu span

   Ten nagłówek ma takie samo <span style="font-variant: small-caps; color:blue; text-decoration: underline">formatowanie jak poprzedni

   
   
   Rys. 4.6. Element span pozwolił na wyróżnienie jednego wyrazu w drugim z nagłówków formatowanym za pomocą arkuszy stylów
   
   Czy zmieniając formatowanie przy użycie elementu span można korzystać z klas? Stosowanie klas z elementem span jest oczywiście możliwe. Powiedzmy, że chcesz na swojej stronie WWW pierwszy wyraz wszystkich akapitów pisać czcionką o innym rozmiarze i w innym kolorze niż pozostały tekst. Otwórz w edytorze plik z wydruku 4.4 (lub otwórz plik zawierający arkusze stylów) i dodaj w sekcji head jeszcze jedną definicję klasy. Nazwijmy ją kolorowa: .kolorowa {font-size: 24pt; color: #FFFFFF}
   
   Definiuje ona czcionkę o rozmiarze 24 pt w kolorze białym. Trzeba teraz objąć znacznikami <span> pierwsze wyrazy wszystkich akapitów i wstawić w znacznikach otwierających atrybut class przypisując mu jako wartość nazwę utworzonej klasy. Przeanalizuj pełny kod dokumentu na wydruku 4.7. Aktualny wygląd strony prezentuje rysunek 4.7. Wydruk 4.7. Wykorzystanie elementu span
   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css">

   Czerwony nagłówek na białym tle

   <span class="kolorowa">Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

   <span class="kolorowa">Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

   Ten nagłówek ma takie samo formatowanie jak poprzedni

   <span class="kolorowa">Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

   
   
   

   <span class="kolorowa">Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

   
   
   Rys. 4.7. Element span pozwolił na wyróżnienie pierwszego wyrazu każdego akapitu – skorzystaliśmy tu z klasy, aby nie powtarzać wielokrotnie definicji stylu
   
   Wydzielone bloki Istnieje jeszcze jedna metoda pozwalająca na nadawanie blokom dokumentu innego stylu. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest on często wykorzystywany w dokumentach dynamicznych (a więc tworzonych przy wykorzystaniu języka DHTML). Bloki wydzielamy za pomocą pary znaczników

   . Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej poprzednio, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki,
   
   akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów. Jaki efekt daje stosowanie elementu div? Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym znacznikami

   . Sprawdź to, wydzielając w dokumencie fragment tekstu (patrz wydruk 4.8 – fragment wydzielony za pomocą elementu div został oznaczony czcionką pogrubioną). Efekt działania elementu div pokazuje rysunek 4.8. Wydruk 4.8. Wykorzystanie elementu div <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css">

   Czerwony nagłówek na białym tle

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest
   
   żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.

   Fragment dokumentu objęty znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.

   Ten nagłówek ma takie samo formatowanie jak poprzedni

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

   Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

   
   
   Rys. 4.8. Element div umożliwia wydzielenie fragmentów dokumentu i narzucenie im innego formatowania
   
   Przykłady stylów CSS dla tła strony WWW W tej części rozdziału znajdziesz proste recepty zaspokajające podstawowe potrzeby odnośnie arkuszy stylów CSS. Na ich podstawie będziesz mógł tworzyć własne definicje. Jak zdefiniować kolor tła elementu? Ten przykład nauczy Cię określać dla danego elementu inne tło niż tło całej strony – możesz na przykład zmienić tło dla obszaru tekstu lub nagłówka. Wydruk 4.9 pokazuje jak zróżnicować tło strony i elementu, a na rysunku 4.9 zobaczysz jakie to daje efekty. Wydruk 4.9. Tło strony i elementu <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p.magenta {font-size: 16pt; background-color: rgb(250,0,255)}

   Nagłówek na zielonym tle

   Nagłówek na transparentnym tle

   Tekst tego akapitu umieszczono na tle w kolorze fioletowym! Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie magenta.

   Ten akapit ma żółte tło, bo tak stanowi styl elementu body.

   
   
   Rys. 4.9. Inne tło strony i elementów
   
   Oto znaczenie poszczególnych definicji stylów: ‰ ‰
   
   body {background-color: yellow} – tło sekcji body będzie żółte. h1 {background-color: #00ff00} – nagłówki h1 mają być umieszczane na tle w
   
   kolorze zielonym. ‰
   
   h2 {background-color: transparent} – wszystkie nagłówki h2 mają tło transparentne (to daje na przykład możliwość umieszczania tekstu na tle obrazu).
   
   ‰
   
   p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} – utworzono klasę o nazwie magenta, która umożliwia zmianę tła wybranych akapitów na kolor magenta. Dodatkowo zwiększono rozmiar czcionki.
   
   Jak zdefiniować obraz jako tło? Na wydruku 4.10 znajdziesz definicję stylu CSS, dzięki której będziesz mógł jako tło strony zastosować obraz. Rysunek 4.10 pokazuje efekt. Wydruk 4.10. Obraz jako tło strony
   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/obraz.jpg") }

   Tu umieszczasz resztę zawartości swojej strony!

   
   
   Rys. 4.10. Obraz jako tło strony – możesz na nim umieszczać tekst i inne elementy strony
   
   Oto znaczenie definicji stylów:
   
   ‰
   
   {background-image: url("images/obraz.jpg")} – adres URL określa ulokowanie obrazu stanowiącego tło strony. W tym przypadku umieszczono go w folderze images (nazwa jest oczywiście dowolna) utworzonym w folderze przechowującym plik strony WWW.
   
   Jak zbudować tło strony z powtórzeń obrazu? Oto definicja, która pozwala zbudować tło z mniejszych obrazów powtórzonych w pionie (patrz wydruk 4.11). Rysunek 4.11 prezentuje ten ciekawy efekt. Wydruk 4.11. Budowanie tła z powtórzeń obrazu <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: repeat-y }
   
   Rys. 4.11. Tło zostało zbudowane z powtórzeń w pionie niewielkiego obrazu
   
   Oto znaczenie definicji stylów: ‰
   
   {background-image: url("images/kot.gif"); background-repeat: repeaty} – adres URL określa ulokowanie obrazu, który zostanie powtórzony w kolumnie z lewej przy lewej krawędzi strony. Powtórzenia definiuje właściwość background-repeat: repeat-y. Gdybyś chciał umieścić pasek tła w poziomie, użyj właściwości backgroundrepeat: repeat-x. background-repeat: repeat spowoduje pokrycie całej
   
   powierzchni powtórzeniami. Jak umiejscowić na stronie obraz stanowiący tło? Czasami obraz stanowiący tło strony wcale nie pokrywa jej całkowicie. Najczęściej wynika to z układu strony i daje całkiem interesujące rezultaty. Tak więc, nawet niewielki obraz można zastosować jako tło. Postać definicji stylów znajdziesz na wydruku 4.12, a na rysunku 4.12 zobaczysz jak to wygląda w praktyce. Wydruk 4.12. Umiejscawianie obrazu-tła na stronie
   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center center }

   Uwaga: Netscape 4 nie obsługuje właściwości "background-position".

   
   
   Rys. 4.12. Tło zostało zbudowane z powtórzeń w pionie niewielkiego obrazu
   
   Oto znaczenie definicji stylów: ‰
   
   {background-image: url("images/kot.gif"); background-repeat: norepeat; background-position: center center} – w tej definicji użyto
   
   właściwości: o o
   
   background-repeat: no-repeat – wartość no-repeat określa, że obraz stosowany
   
   jako tło strony nie będzie powtarzany. background-position: center center – dzięki takiemu ustawieniu tej właściwości obraz znalazł się w centralnym punkcie strony. Gdybym chciała umieścić go, powiedzmy, w połowie lewej krawędzi, użyłabym wyrażenia backgroundposition: center left (inne możliwości to top left, top center, top right, center right, bottom left, bottom center, bottom right). Wyspecyfikowanie tylko jednego słowa kluczowego spowoduje, że jako drugie domyślnie zostanie przyjęte słowo center. A jeśli konieczne byłoby ulokowanie obrazu-tła gdzieś w innym, określonym miejscu strony, skorzystałabym z takiej definicji: background-position: 20% 80% lub bacground-position: 0px,0px. Te tajemnicze pary wartości center, left, 20% czy 80% to po prostu współrzędne określające ulokowanie obrazu-tła w poziomie i pionie. Lewy górny narożnik ma współrzędne 0%,0% lub 0px,0px. Jednostki można mieszać.
   
   Atrybuty stylu odnoszące się do tekstu Style CSS definiujące krój, kolor, rozmiar i styl czcionki są bardzo często stosowane. Zmiana koloru tła zazwyczaj wymaga dostosowania koloru tekstu, aby był on czytelny. Konieczność zdefiniowania parametrów tekstu wynika także z potrzeby zabezpieczenia się na wypadek braku u użytkownika takich czcionek, jakie zaplanowałeś na swojej stronie WWW. No i oczywiście powód najważniejszy – przecież jednym z podstawowych zamiarów twórcy dokumentu html jest nadanie mu atrakcyjnej postaci, a ma na to wpływ także wygląd i układ tekstu. Co należy wiedzieć o czcionce, aby napisać definicję jej stylu? Czcionki to znaki, które można wyświetlić na ekranie lub wydrukować. Mogą mieć krój – na pewno słyszałeś takie nazwy jak, np. Arial, Times New Roman czy Helvetica; to są właśnie różne kroje pisma, mają specyficzne wykończenia – nazywa je się wówczas czcionkami szeryfowymi lub są tych wykończeń pozbawione, jak czcionki bezszeryfowe. Cechy czcionki to także jej rozmiar – jest to wysokość podawana w punktach (gdzie jeden punkt to około 1/29 centymetra) i styl (kursywa, pogrubiona, podkreślona). Tekst charakteryzują też odstępy pomiędzy znakami. Czcionki szeryfowe (serif) to czcionki z wykończeniami liter i cyfr. Dodatkowe elementy zaokrąglające i wykańczające pełnią nie tylko funkcję dekoracyjną, ale też ułatwiają czytanie. Stąd też czcionki szeryfowe najczęściej stosuje się do tekstu podstawowego, a rzadziej do tytułów. Przykładem takiej czcionki jest Times New Roman. Czcionki bezszeryfowe (sans serif) pozbawione są dodatkowych ornamentów, a stosuje je się zazwyczaj do nagłówków i małych bloków tekstu. Przykładem czcionki bezszeryfowej jest Arial. Jak zdefiniować arkusz stylów formatujący tekst? Proces definiowania arkusza stylów wymaga więc w przypadku tekstu określenia poszczególnych cech pisma. Zacząć należy od kwestii najważniejszej – od wskazania rodziny czcionek (arkusze stylów rozpoznają następujące rodziny czcionek: serif, sans serif, cursive, fantasy i monospace) i podania nazwy czcionki lub ciągu nazw alternatywnych (z przecinkami) – wówczas w przypadku braku czcionki podstawowej, zastosowana zostanie pierwsza alternatywna, a gdy tej także nie będzie, kolejna alternatywna, itd. Jeśli nazwa czcionki składa się z kilku wyrazów, np. Goudy Old Style, w definicji stylu powinna być podana w cudzysłowach: font-family: times, ”goudy old style”. W dalszej kolejności definiowane są kolejne atrybuty. Oddzielasz je średnikami. Czy sposób podawania atrybutów jest ważny? Kolejność atrybutów jest istotna. Atrybuty grubości czcionki – font-weight, i stylu – font-style, muszą pojawić się przed innymi atrybutami czcionki, a rozmiar czcionki – font-size, poprzedza odstępy. Wartości atrybutów nie oddziela się przecinkami – jedyny wyjątek to rodziny czcionek. Wydruk 4.13 prezentuje osadzony arkusz stylów dla h1 i h2, w których zdefiniowano krój czcionek (font-family), styl (font-style) oraz rozmiar (font-size). Wydruk 4.13. Formatowanie tekstu <style>
   
   Jak zachować porządek w definicjach stylów CSS? W definicjach stylu powinien być porządek. Nie wynika to wcale ze względów estetycznych, lecz z praktycznych. Organizacja stylów pozwoli zredukować liczbę definicji, a co najważniejsze, ułatwi wprowadzanie ewentualnych modyfikacji stylów. O potrzebie grupowania elementów, do których stosowane będą te same właściwości, już była mowa. Teraz czas na konkretny przykład. Przyglądając się sekcji <style> z przykładu pokazanego na wydruku 4.13 zauważysz, że dla nagłówków h1 i h2 większość atrybutów jest identyczna. Różnica dotyczy jedynie wielkości czcionki. Zapiszmy więc naszą obserwację w postaci kodu. Wydzielmy to, co różni sposób formatowania elementów h1 i h2, a cechy identyczne przedstawmy w jednej definicji wspólnej dla obu (patrz wydruk 4.14). Pomimo zmiany postaci sekcji style – jest ona teraz znacznie prostsza w odbiorze, wygląd tekstu pozostanie taki sam (patrz rysunek 4.13). Wydruk 4.14. Grupowanie stylów – identyczne atrybuty stylu przyporządkowano różnym elementom. <style>
   
   Rys. 4.13. Po uporządkowaniu definicji stylów efekt wizualny jest taki sam, a kod dokumentu znacznie się uprościł
   
   Nie tylko elementy można grupować, lecz także atrybuty. Na przykład długą definicję body: body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; lineheight: 14pt; font-weight: bold}
   
   można zapisać w następujący sposób: body {font: bold 12/14pt arial, sans-serif}
   
   Jakie są najczęściej stosowane atrybuty tekstu? Listę najczęściej stosowanych atrybutów tekstu prezentuje tabela 4.1. Tabela 4.1. Podstawowe atrybuty umożliwiające zdefiniowanie stylu tekstu. Atrybut color:
   
   kontroluje czcionki.
   
   Przykład definicji – kolor
   
   h1 {color: #00ff00} – tutaj kod koloru podany jest w zapisie
   
   szesnastkowym. Ostateczna postać kodu koloru w HTML-u to trzy liczby szesnastkowe połączone razem i poprzedzone znakiem #. h2 {color: red} – jeśli korzystasz ze standardowych kolorów, możesz posługiwać się ich nazwami, np. red, blue, white czy green, zamiast
   
   kodami heksadecymalnymi.
   
   font-family: –
   
   kontroluje czcionki.
   
   krój
   
   p {color: rgb(0,0,255)} – każdemu kolorowi można przyporządkować kod RGB w postaci trzech liczb z przedziału 0-255. Liczby określają natężenie barw podstawowych: czerwonej, zielonej i niebieskiej. W tym zapisie kod 0 0 0 odpowiada kolorowi czarnemu, a 255 255 255 białemu, kolor żółty to 255 255 0, a niebieski 0 0 255. RGB daje do dyspozycji 16,7 milionów kolorów (24 bity). {font-family: times} – podano nazwę czcionki Times, {font-family: times , arial} – w tym przypadku podana została nazwa czcionki wraz z nazwą czcionki alternatywnej, {font-family: serif} – tu wskazano rodzinę czcionek, dzięki czemu przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu odpowiadają Twojemu wyborowi.
   
   -
   
   font-size:
   
   rozmiar czcionki.
   
   font-style:
   
   określa tekstu.
   
   styl
   
   font-weight: określa grubość czcionki. textdecoration:
   
   -
   
   umożliwia określenie efektów dodatkowych. line-height: -
   
   definiuje wysokość wiersza.
   
   {font-size: 12pt} – w tej definicji rozmiar podany jest w punktach drukarskich. Jest to standard najczęściej stosowany. Rozmiar można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {font-style: italic} – definiuje tekst pisany kursywą. {font-style: normal} – przywraca ustawienia domyślne. {font-style: oblique} – wprowadza pochylenie odmiany prostej danej czcionki. {font-weight; bold} – definiuje czcionkę pogrubioną (do dyspozycji masz tu jeszcze atrybuty takie jak: extra-light, demi-light, medium, extra-bold oraz demi-bold). {text-decoration: none} – brak efektów. {text-decoration: underline} – podkreślenie. {text-decoration: italic} – kursywa. {text-decoration: line-through} – przekreślenie. p {line-height: 12pt}
   
   Odstępy między wierszami w akapicie można podawać w punktach, pikselach, calach, centymetrach i w procentach, podobnie jak wielkość czcionki.
   
   Jak definiować marginesy, wcięcia i wyrównanie tekstu? Oto kolejna porcja atrybutów – grupa zgromadzona w tabeli 4.2 służy do określenia marginesów, sposobów wyrównania oraz wcięć. Tabela 4.2. Atrybuty formatowania akapitu. Atrybut
   
   Przykład definicji
   
   margin-left –
   
   {margin-left: 2cm} – margines wynosi 2 cm.
   
   określa szerokość lewego marginesu. margin-right – określa szerokość prawego marginesu margin-top – ustawienie marginesu górnego. text-indent – ustawienie wcięcia. Jednostki takie jak dla marginesów. text-align –
   
   Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {margin-right: 2in} – tu ustawiono margines równy 2 cale. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {margin-top: 20pt} – margines górny wynosi 20 punktów. Jednostki są takie same jak w przypadku marginesów bocznych. {text-indent: 0.5in} – wcięcie o głębokości 0.5 cala. Internet Explorer dopuszcza wcięcia ujemne – wysunięcia.
   
   {text-align: right} – tekst zostanie wyrównany do prawego marginesu.
   
   opcja wyrównania tekstu.
   
   Atrybut może przyjmować wartości: left (do lewej), center (wyśrodkowanie), right (do prawej) i justify (do obu marginesów).
   
   Atrybuty z tabeli 4.2 pozwalają kontrolować marginesy, wcięcia i wyrównanie tekstu – decydują więc o wyglądzie akapitu. Jak w praktyce zastosować wszystkie zdobyte informacje o stylach CSS? Aby sprawdzić w praktyce zdobytą wiedzę, zacznij od przygotowania dokumentu pozbawionego formatowania. Zobaczymy jak wygląda w przeglądarce i zastanowimy się nad sposobami sformatowania go przy użyciu arkuszy stylów CSS. Otwórz w edytorze dokument mojastrona.html – jak pamiętasz, zawiera on podstawowy kod dokumentu html – i dodaj w nim nagłówki oraz akapity tekstu, tak jak na wydruku 4.15. Zapisz plik, na przykład pod nazwą nostyle.html, i wyświetl go w przeglądarce (patrz rysunek 4.14). Wydruk 4.15. Dokument html, w którym nie są stosowane arkusze stylów <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Windows XP!

   Co będzie dalej?

   Już w tym roku czeka nas rewolucja w licencjonowaniu oprogramowania, zapowiadana przez firmę Microsoft w związku z premierami jednych z najważniejszych produktów przez nią sprzedawanych - systemu operacyjnego Windows XP oraz pakietu biurowego Office XP.

   Pomysłem Billa Gatesa na ukrócenie piractwa i zmniejszenie strat firmy jest obowiązkowa telefoniczna rejestracja produktu przy każdej jego instalacji. Pomyślmy teraz, jak zareaguje rynek na taką sytuację. Czy nagle półki sklepów zostaną ogołocone z pudełek z programami ze znakiem Microsoft?

   
   
   Rys. 4.14. W tym dokumencie nie są stosowane style CSS
   
   Zawartość dokumentu z rysunku 4.14 jest czytelna, aczkolwiek wygląda nieatrakcyjnie. Zajmijmy się więc jej sformatowaniem. Wykorzystamy tu podstawowe informacje odnośnie formatowania czcionki, akapitu i tła dokumentu html. Powróćmy do pliku nostyle.html (patrz wydruk 4.15) i zdefiniujmy w nim osadzony arkusz stylów, który będzie formatował tło i marginesy strony, nagłówki tekstu oraz sam tekst. Wstaw więc w sekcji head element style ujęty w znacznikach komentarza html i wprowadź odpowiednie definicje formatowania wymienionych elementów strony. Pamiętaj, że na ekranie lepiej prezentuje się strona WWW, w której jest dużo wolnej przestrzeni, marginesy nie powinny więc być symboliczne. Oto przykładowa definicja stylów dla sekcji body: body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top: 1cm}.
   
   Wprowadza ona kolor tła – jeśli chciałbyś, by tło było inne, wróć do serii przykładów definiowania tła strony z wcześniejszej części rozdziału, oraz marginesy – w tabeli 4.2 znajdziesz wyjaśnienia stosowanych atrybutów oraz inne sposoby formatowania akapitu. W kolejnym kroku zajmiemy się nagłówkami. Pogrupujemy elementy, do których zastosowane zostanie to samo formatowanie: h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal}
   
   oraz dodamy definicje specyfikujące właściwości o różnych wartościach: h1 {font-size: 20pt; text-align: left} h2 {font-size: 14pt; text-align: right}
   
   Następny etap to styl akapitu. Określimy krój czcionki, jej styl i rozmiar oraz wysokość wiersza – inne właściwości znajdziesz w tabeli 4.1: p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; lineheight: 16pt}
   
   Aby zastosować do akapitów różne sposoby wyrównania, możesz skorzystać z klas – zajmowaliśmy się już takim rozwiązaniem tej kwestii – lub użyć w elemencie p stylu wpisanego:

   
   
   Możesz także inaczej sformatować połączenia, na przykład pozbawiając je domyślnego podkreślenia, w zamian stosując czcionkę pogrubioną (już najwyższa pora, by zacząć mówić o połączeniach – poświęcony jest im rozdział 6.): a {text-decoration: none; font-weight: bold}
   
   Wydruk 4.16 prezentuje kod html naszego dokumentu, w którym uwzględnione zostały wszystkie omawiane zmiany. Po sformatowaniu dokument prezentuje się zupełnie inaczej. Aby się o tym przekonać, zapisz go i obejrzyj w przeglądarce (patrz rysunek 4.15). Wydruk 4.16. Dokument html, w którym sformatowano tekst i tło przy wykorzystaniu arkuszy stylów <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style>
   -->

   Windows XP!

   Co będzie dalej?

   Już w tym roku czeka nas rewolucja w licencjonowaniu oprogramowania, zapowiadana przez firmę Microsoft w związku z premierami jednych z najważniejszych produktów przez ni± sprzedawanych - systemu operacyjnego Windows XP oraz pakietu biurowego Office XP.

   Pomysłem Billa Gatesa na ukrócenie piractwa i zmniejszenie strat firmy jest obowiązkowa telefoniczna rejestracja produktu przy każdej jego instalacji. Pomyślmy teraz, jak zareaguje rynek na taką sytuację. Czy nagle półki sklepów zostaną ogołocone z pudełek z programami ze znakiem Microsoft?

   
   
   Rys. 4.15. Oto dokument po dodaniu formatowania za pomocą stylów CSS
   
   Pomyśl, jak prosta teraz będzie modyfikacja formatowania, nawet jeśli dokument znacznie się rozrośnie!
   
   Najważniejsze informacje ‰
   
   Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają korzystać ze stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą.
   
   ‰
   
   Arkusze stylów mogą być stosowane w odniesieniu do konkretnego elementu html – wówczas mówimy o stylu wpisanym, w odniesieniu do całego dokumentu html – takie arkusze stylów nazywa się osadzonymi, lub mogą rezydować w pliku zewnętrznym – wtedy jest to zewnętrzny lub łączony arkusz stylów.
   
   ‰
   
   Atrybut style pozwala zastosować arkusz stylów do konkretnego elementu. Ogólna postać stylu wpisanego jest następująca:
   
   ‰
   
   Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki.
   
   ‰
   
   Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami <style>. Element style powinien znaleźć się w nagłówku dokumentu: <style type="text/css"> <--! selektor{właściwość: wartość} -->
   
   ‰
   
   Selektorem nazywa się definiowany znacznik czy też element, właściwość to jego atrybut. Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych.
   
   ‰
   
   Aby zdefiniować w definicji stylu kilka właściwości, należy je rozdzielać średnikami. Na przykład: p {text-align: center; color: red}
   
   ‰
   
   Znaczniki komentarza html obejmują wszystkie znaczniki i właściwości CSS – dzięki temu przeglądarki, które nie potrafią obsługiwać arkuszy stylów, potraktują kod jako komentarz.
   
   ‰
   
   W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są przecinkami. Na przykład: h1, h2 {color: red}
   
   ‰
   
   Atrybut class pozwala zdefiniować różne style dla tego samego elementu – inaczej mówiąc pozwala zdefiniować klasy stylu.
   
   ‰
   
   Klasa to szeroko zdefiniowany styl, który określa właściwości dla pewnych lub wszystkich elementów dokumentu.
   
   ‰
   
   Ogólna postać definicji klasy jest następująca: element.nazwa_klasy{właściwość: wartość}
   
   ‰
   
   Nazwy klas mogą być dowolne, nie należy jednak stosować w nich polskich liter.
   
   ‰
   
   W definicji klasy można pominąć nazwę selektora: .nazwa_klasy{właściwość: wartość} – co umożliwia stosowanie klasy do różnych elementów.
   
   ‰
   
   Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Atrybut ten powinien mieć jednoznaczną nazwę.
   
   ‰
   
   Atrybut id pozwala oznaczać elementy podobnie jak atrybut class – id jest czymś w rodzaju identyfikatora elementów:

   
   
   ‰
   
   Ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak: #nazwa_id
   
   ‰
   
   Komentarze CSS są bardzo przydatne przy ewentualnej edycji arkusza stylów. Oto ich postać: /* To jest komentarz CSS */
   
   ‰
   
   Zewnętrzny arkusz stylów rezyduje poza dokumentem html, w zewnętrznym pliku o rozszerzeniu nazwy .css. W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi zostać zdefiniowane połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje się za pomocą znacznika , który umieszczany jest w sekcji head dokumentu :
   
   ‰
   
   Plik .css można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników HTML.
   
   ‰
   
   Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu – na przykład tekst i listy.
   
   ‰
   
   Ogólna postać definicji stylu wykorzystującej element span jest następująca: <span style=”definicja_stylu”>
   
   ‰
   
   Bloki wydzielamy za pomocą pary znaczników

   . Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Wydzielone fragmenty mogą zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.
   
   ‰
   
   Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym znacznikami

   .
   
   Rozdział 5. Obrazy w dokumencie HTML Gdzie wstawiać obrazy? Strona bez obrazów to smutna strona. Nawet strony traktujące o super poważnej tematyce zyskują na atrakcyjności, gdy znajdzie się na nich choćby malutki obrazek. Obrazy można wstawiać w odrębnym akapicie, wewnątrz tekstu lub w obszarze nagłówka – wystarczy umieścić znacznik wewnątrz odpowiedniego elementu. Jeśli chcesz, by obraz ubarwił nagłówek, umieść znacznik między znacznikami nagłówka. Obrazy można wstawiać na stronie bezpośrednio lub zastępować je połączeniami prowadzącymi do odpowiednich plików. W tym drugim przypadku mówimy o obrazach zewnętrznych. Mając do dyspozycji połączenie czytelnik sam podejmuje decyzję, czy chce zobaczyć obraz. Obraz może także stanowić tło strony, lecz tym nie będziemy się tutaj zajmować. W rozdziale 4. znajdziesz parę przykładów stosowania obrazów jako tła. Jaką postać ma element img? Zacznij od tego, aby zobaczyć jak to robią inni. Przejrzyj zasoby sieciowe, wyświetl postaci źródłowe stron WWW i przyglądnij się znacznikowi , bowiem on właśnie pozwala na wstawianie obrazów. Znacznik ten jest pusty – oznacza to, że nie posiada znacznika zamykającego, ale ma szereg atrybutów, które kontrolują sposób prezentacji obrazu na stronie. Atrybuty te zostały zgromadzone w tabeli 5.1. Najważniejszym z nich jest atrybut src. Umożliwia on określenie ulokowania obrazu i zdefiniowanie jego nazwy. Wygląda to mniej więcej tak: .
   
   Dlaczego mniej więcej? Bo dokładna postać tego wyrażenia zależy od tego, gdzie umieściłeś obraz, oraz od jego formatu (to znaczy typu pliku). Co jest wartością atrybutu src? Wartością atrybutu src jest adres URL, który określa ulokowanie obrazu – inaczej mówiąc jest to adres, pod którym obraz jest dostępny. Jeśli więc obraz o nazwie obraz.gif jest przechowywany w katalogu images witryny www.mojastrona.com, to bezwzględny adres URL będzie miał
   
   postać http://www.mojastrona.com/images/obraz.gif. Adres względny zależeć będzie natomiast od ulokowania pliku html. Więcej informacji na temat adresowania znajdziesz w rozdziale 6. poświęconym połączeniom. Jak przeglądarka zinterpretuje znacznik ? Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element img. Jeśli znacznik zostanie umieszczony między dwoma akapitami (definiowanymi za pomocą elementów p), to najpierw wyświetlony zostanie tekst pierwszego akapitu, potem obraz, a za nim tekst drugiego akapitu (patrz wydruk 5.1 i rysunek 5.1). Jeśli obraz się nie pojawia, sprawdź poprawność podanej nazwy, a jeśli plik nie znajduje się w tym samym katalogu co strona, poprawność ścieżki dostępu. Wydruk 5.1. Wstawiamy obrazy <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.
   
   Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.

   
   
   

   Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata).
   
   Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.

   
   
   
   
   Rys. 5.1. Obraz wstawiono między dwoma akapitami tekstu
   
   Jaki powinien być format wstawianych obrazów? Skąd wziąć obrazy? Poszukaj ich w swoich zasobach, w sieci (pamiętając o prawach autorskich!) lub zeskanuj coś – obrazy powinny być w formacie GIF lub JPEG (innymi słowy rozszerzenie nazwy pliku powinno być .gif lub .jpg). Zapisz je w tym samym katalogu, w którym zapisany jest plik html zawierający Twoją stronę – to uprości znacznie definiowanie atrybutu src lub w osobnym katalogu, podrzędnym względem katalogu przechowującego pliki Twojej strony WWW (patrz informacja zamieszczona powyżej). Co to jest GIF? Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format GIF (Graphics Interchange Format). Obrazy GIF są interpretowane niemal przez wszystkie typy przeglądarek (oczywiście zawsze są wyjątki). Obrazy GIF najbardziej nadają się do szkiców i prostych ilustracji (do fotografii stosuj format JPEG, o którym później). Format GIF pozwala również wybrać liczbę kolorów. Pamiętaj, że im
   
   więcej kolorów, tym większy plik. Pliki GIF można jednak poddawać kompresji. Inna zaleta formatu GIF to możliwość zdefiniowania obrazu jako przeźroczystego. Co to jest JPEG? Drugim na liście formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint Photographics Experts Group). Format JPEG to najlepszy wybór dla prezentacji fotografii. Stosowany do szkiców i prostych ilustracji spowoduje pojawienie się na obrazach rozmyć (naszą one nazwę artefaktów), z których na pewno nie byłbyś zadowolony, oraz zupełnie zbędny przyrost wielkości pliku. Za to fotografie zapisane w formacie JPEG wyglądają wspaniale. Czy sam obraz wystarczy? Sam obraz, nawet najwspanialszy, to za mało. Musisz pomyśleć o tych, którzy wyłączyli opcję ładowania obrazów oraz tych, choć nielicznych, którzy nie korzystają z przeglądarek graficznych. Jeśli wstawiasz w swoim dokumencie obrazy, powinieneś zaopatrzyć je w tekst alternatywny. Informuje on użytkowników o treści obrazu, jeśli przeglądarka z jakichś względów go nie wyświetla. Strona pozbawiona grafiki straci niewątpliwie na atrakcyjności, ale znacznie ważniejsze jest to, że nie ucierpi przekaz informacji. Choć oglądający Twoją stronę nie będą obrazów widzieć, dowiedzą się przynajmniej co przedstawiają. Jak dodać tekst alternatywny? Dodanie tekstu alternatywnego umożliwia atrybut alt znacznika . Atrybut ten działa w ten sposób, że wstawia na miejsce obrazu coś, co jest go w stanie zastąpić w tych przeglądarkach, które nie mogą go obsłużyć (patrz rysunek 5.2) . Tekst ten jest przydatny także wówczas, gdy przeglądarka wyświetla obrazy – nie zawsze bowiem są one oczywiste dla oglądającego (czy ktoś sam domyśli się, że zwierzak na obrazie to Twoja maskotka?). Rys. 5.2. Jeśli przeglądarka nie może wyświetlić obrazu, zastępuje go tekstem alternatywnym Aby zaopatrzyć obraz w tekst alternatywny, wyświetl kod źródłowy tworzonej strony w oknie edytora – możesz skorzystać z przykładu zaprezentowanego na wydruku 5.1. Zdefiniuj tekst alternatywny opisujący obraz i dodaj do znacznika atrybut alt. Przypisz mu jako wartość tekst alternatywny: .
   
   Zapisz plik i zobacz jak wygląda w przeglądarce (patrz rysunek 5.3).
   
   Rys. 5.3. Obraz zaopatrzono w tekst alternatywny
   
   Tekst alternatywny pojawi się nad obrazem, gdy przesuniesz nad niego wskaźnik myszki. Jak wstawić obrazy w nagłówkach? Wróćmy do naszej strony testowej o zwierzakach i dodajmy nagłówki anonsujące omawianą tematykę. Duże zwierzaki prezentowane będą z pomocą nagłówka h1, a dla małych zarezerwujemy nagłówek h2. Aby prezentacja lepiej przemawiała do wyobraźni, oprócz samego tekstu, umieścimy w elementach h1 i h2 obrazy. Wyświetl kod źródłowy tworzonej strony w oknie edytora. Umieść znaczniki w obrębie elementów h1 i h2. Na wydruku 5.2 odpowiednie fragmenty kodu zaznaczono czcionką pogrubioną. Zapisz plik i zobacz jak wygląda Twoja strona (patrz rysunek 5.4). Wydruk 5.2. Wstawiamy obrazy w obszarze nagłówka <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   

   Koty duże

   Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.
   
   Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.

   ---

   Koty małe

   Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata).
   
   Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.

   
   
   Rys. 5.4. Obrazy umieszczono w nagłówkach
   
   Czy można wstawić obraz w akapicie? Jeśli chcesz wstawić obraz w odrębnym akapicie, umieść znacznik między znacznikami

   :

   

   .
   
   Obraz może się także pojawić w akapicie zawierającym tekst. Jest wówczas traktowany dokładnie tak samo jak sam tekst. Jeśli chcesz skorzystać z tej opcji, musisz zastanowić się nad kwestią wyrównania obrazu względem otaczającego tekstu. W jaki sposób zastosować do obrazu wyrównanie? Korektę umiejscowienia obrazu w obszarze tekstu umożliwia atrybut align. Sprawdźmy jego działanie na prostych przykładach. Na wydruku 5.3 znajdziesz akapity tekstu, w których wstawiono element img stosując do niego atrybut align z różnymi wartościami: bottom, middle i top. Kontrolują one pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu co obraz. Przeanalizuj ten kod i porównaj z zaprezentowanymi na rysunku 5.5 efektami działania. Przećwicz sam wyrównywanie obrazów w tekście – wyświetl kod źródłowy tworzonej strony w oknie edytora, wstaw element img w tekście akapitu, dodaj do znacznika atrybut align i przypisz mu różne wartości.
   
   Wydruk 5.3. Wyrównujemy obraz względem tekstu otaczającego <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Obraz w obrębie tekstu.

   Obraz w obrębie tekstu.

   Obraz w obrębie tekstu

   Oto domyślny sposób wyrównania - odpowiada on wartości bottom:

   Obraz w obrębie tekstu.

   Obraz przed tekstem.

   Obraz za tekstem

   
   
   Rys. 5.5. Oto różne sposoby wyrównywan ia obrazu względem otaczającego tekstu
   
   Jak zdefiniować wyrównanie obrazu względem marginesu? Sposób wyrównania obrazu względem marginesu także kontroluje się za pomocą atrybutu align. Jeśli nadasz mu wartość left, obraz zostanie wyrównany do lewego marginesu, jeśli right, przesunięty zostanie do prawego marginesu. Innymi słowy te dwie wartości umożliwiają określenie relacji między obrazem i tekstem. Jeśli obraz po lewej stronie, to tekst po prawej i odwrotnie. Tę relację określa się też mianem obłamywania tekstu. Możesz też wymusić umieszczenie tekstu pod obrazem – skorzystaj w tym celu z atrybutu clear elementu br i przypisz mu wartość all. Szczegóły tej operacji poznasz analizując wydruk 5.4, a efekty zobaczysz na rysunku 5.6. Wydruk 5.4. Wyrównujemy obraz względem marginesów <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   

   Ten tekst pojawi się z prawej strony obrazu, który zostanie wyświetlony przy lewym marginesie.

   
   
   

   Ten tekst pojawi się z lewej strony obrazu, który zostanie wyświetlony przy prawym marginesie.

   
   
   

   
   Aby wymusić umieszczenie tekstu pod obrazem, skorzystaj z atrybutu clear elementu br i przypisz mu wartość all, tak jak w tym przypadku.

   
   
   Rys. 5.6. Oto różne sposoby wyrównywan ia obrazu względem marginesów
   
   Jak dostosować rozmiary obrazu? Jeśli uważnie analizowałeś kod z wydruków 5.3 i 5.4, zauważyłeś zapewne, że w znaczniku img znajdują się pewne dodatkowe atrybuty, o których nie było jeszcze mowy. To atrybuty width i height – definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu. W tej przykładowej definicji znacznika :
   
   rozmiary obrazu zdefiniowano w pikselach. Na podstawie kodu z wydruku 5.5 i rysunku 5.7 możesz prześledzić, w jaki sposób ustawienia takie jak width i height wpływają na sposób prezentacji obrazu. Wydruk 5.5. Dostosowujemy rozmiar obrazu <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Tu szerokość i wysokość są równe 40:

   

   Tu szerokość i wysokość są równe 80:

   

   Tu szerokość i wysokość są równe 140:

   

   
   
   Rys. 5.7. Atrybuty width i height pozwalają dostosować rozmiar obrazu
   
   Jeśli musisz już zmieniać rozmiary obrazu, pamiętaj że lepiej jest zmniejszyć obraz niż powiększać. Powiększanie prowadzi do utraty jakości obrazu. Jak dodać wokół obrazu nieco wolnej przestrzeni? Jeśli umieszczasz obraz bezpośrednio w tekście, warto pomyśleć o dodaniu wokół obrazu nieco wolnej przestrzeni, aby tekst nie zlewał się z obrazem. Umożliwiają to dwa kolejne atrybuty znacznika : vspace i hspace. Pierwszy definiuje szerokość wolnego obszaru nad i pod obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony. Choć możesz jednocześnie zdefiniować oba ustawienia, nie da się niestety wprowadzić wolnego obszaru tylko z jednej strony obrazu. Oto postać znacznika z atrybutami vspace i hspace:
   
   Wolny obszar wokół obrazów także można zdefiniować korzystając z atrybutów Cell Padding i Cell Spacing (jeśli układ strony został oparty na tabeli) lub z kaskadowych arkuszy stylów. Jak ważne jest oddzielenie obrazu od tekstu jest pokazuje rysunek 5.8. Po odsunięciu tekstu od obrazu, strona prezentuje się znacznie lepiej.
   
   Rys. 5.8. Atrybuty vspace i hspace pozwalają dodać wokół obrazu trochę wolnej przestrzeni – u góry tekst zlewa się z obrazem; u dołu całość prezentuje się znacznie lepiej
   
   Jakie są najczęściej stosowane atrybuty znacznika ? Tabela 5.1 prezentuje niektóre z atrybutów, które można stosować ze znacznikiem . Tabela 5.1 Niektóre atrybuty znacznika Atrybut
   
   Opis
   
   align=”left”
   
   Obraz jest wyświetlany przy lewym marginesie, a tekst pojawia się obok, w obszarze między obrazem a prawym marginesem.
   
   align=”right”
   
   Obraz jest wyświetlany przy prawym marginesie, a tekst pojawia się obok, w obszarze między obrazem a lewym marginesem.
   
   align=”top”
   
   Kontrolują pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu
   
   align=”middle” align=”baseline” align=”bottom” vspace=”piksele”
   
   Odległość obrazu od tekstu w pionie
   
   hspace=”piksele”
   
   Odległość obrazu od tekstu w poziomie
   
   longdesc=”url”
   
   Pod wskazanym adresem URL umieszczono długi opis obrazu.
   
   height=”piksele|wartość%”
   
   Określa wysokość obrazu w pikselach lub w procentach rozmiaru oryginalnego.
   
   widght=”piksele|wartość%”
   
   Określa szerokość obrazu w pikselach lub w procentach rozmiaru oryginalnego.
   
   Najważniejsze informacje ‰
   
   Obrazy można wstawiać w odrębnym akapicie, wewnątrz tekstu czy nawet w obszarze nagłówka.
   
   ‰
   
   Wstawianie obrazów umożliwia znacznik . Znacznik ten jest pusty – oznacza to, że nie posiada znacznika zamykającego, ale ma szereg atrybutów, które kontrolują sposób prezentacji obrazu na stronie (patrz tabela 5.1).
   
   ‰
   
   Najważniejszym z atrybutów jest atrybut src. Umożliwia on określenie ulokowania obrazu i zdefiniowanie jego nazwy: .
   
   ‰
   
   Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element img.
   
   ‰
   
   Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format GIF (Graphics Interchange Format). Obrazy GIF są interpretowane niemal przez wszystkie typy przeglądarek. Drugim na liście formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint Photographics Experts Group). Format JPEG to najlepszy wybór dla prezentacji fotografii.
   
   ‰
   
   Umieszczając na stronie obrazy należy pamiętać o tekście alternatywnym. Informuje on użytkowników o treści obrazu, jeśli przeglądarka obrazu z jakichś względów nie wyświetla.
   
   ‰
   
   Dodanie tekstu alternatywnego umożliwia atrybutu alt znacznika .
   
   ‰
   
   Wyrównywanie obrazów w tekście i względem marginesów strony umożliwia atrybut align znacznika . Odpowiednie wartości atrybutu podano w tabeli 5.1.
   
   ‰
   
   Rozmiary obrazu umieszczanego na stronie można dostosowywać. Służą do tego atrybuty width i height – definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu.
   
   ‰
   
   Aby dodać wokół obrazu wolny obszar, należy skorzystać z atrybutów vspace i hspace znacznika . Pierwszy definiuje szerokość wolnego obszaru nad i pod obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony.
   
   Rozdział 6. Połączenia Uniform Resource Locator Co to jest URL? Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW. Ogólna postać adresu WWW, na przykład: http://www.mojastrona.com/html/strona.htm spełnia następujące reguły składni: protokół://host.domena:port/ścieżka/nazwa_pliku
   
   Co oznaczają poszczególne elementy adresu URL? ‰
   
   Nazwa protokołu określa typ usługi internetowej – w przypadku stron WWW jest to http. Inne nazwy to na przykład file, ftp, gopher, news, telnet.
   
   ‰
   
   Domena to nazwa domeny internetowej, na przykład microsoft.com.
   
   ‰
   
   Host to oczywiście host domeny. Domyślnym hostem dla http jest www.
   
   ‰
   
   :port definiuje numer portu hosta – zazwyczaj go pomijamy. Domyślny numer dla serwerów http to 80.
   
   ‰
   
   Ścieżka określa ścieżkę dostępu na serwerze. Jeśli nie jest podana, dokument musi znajdować się w katalogu głównym witryny WWW.
   
   ‰
   
   Nazwa pliku definiuje nazwę dokumentu. Nazwa domyślna to index.html lub default.asp, co zależy od ustawień serwera sieciowego.
   
   Ulokowanie dokumentu a ścieżka dostępu Zrozumienie relacji między adresem lokalnym dokumentu, w którym połączenie jest tworzone, a adresem dokumentu, do którego ono prowadzi, jest niezwykle istotne z punktu widzenia zrozumienia procesu definiowania połączeń.
   
   Jakie są rodzaje ścieżek dostępu? Każda strona WWW ma swój unikatowy adres URL (ang. Uniform Resource Locator). Jednak w przypadku połączeń lokalnych – a więc z dokumentu do dokumentu tej samej witryny – nie ma potrzeby wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem dokumentu bieżącego lub względem katalogu głównego witryny. Ścieżki dostępu mogą być więc następujące: ‰
   
   bezwzględne (np. http:/www.magsoft.com.pl/~rsokol/nmr/index.html)
   
   ‰
   
   względne o zdefiniowane względem dokumentu (np.katalog/katalog.html) o
   
   zdefiniowane względem foldera głównego (np. /katalog/katalog.html)
   
   Co to jest adres bezwzględny? Adres bezwzględny to po prostu pełny adres URL, wraz z nazwą protokołu. Jeśli więc odwołujesz się do dokumentu na innym serwerze, musisz podać pełny adres. Lokalnie nie ma potrzeby definiowania połączeń absolutnych – jest to wręcz szkodliwe. Kiedy i jak korzystać z adresów względnych definiowanych względem dokumentu? Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych. Szczególnie wówczas, gdy dokumenty – bieżący oraz te, których prowadzą połączenia – znajdują się w jednym folderze. Nawet jeśli są w innym, wystarczy wskazać hierarchię folderów startując od bieżącego dokumentu. Tak więc, w przypadku odwoływania się do dokumentu w tym samym folderze wystarczy podać nazwę pliku. Jeśli odwołanie ma prowadzić do dokumentu w folderze podrzędnym, adres składa się z nazwy foldera podrzędnego i nazwy pliku rozdzielonych prawym ukośnikiem. Jak definiować adresy względne? Oto przykłady adresów względnych: ‰ Aby utworzyć połączenie prowadzące od pliku a1.html do pliku a2.html w tym samym folderze A, wystarczy podać nazwę pliku: a2.html (patrz rysunek 6.1). Rys. 6.1. Połączenie z pliku a.html do pliku b.html umieszczonego w folderze podrzędnym B
   
   ‰
   
   Aby utworzyć połączenie z pliku a.html do pliku b.html (umieszczonego w folderze podrzędnym B), zdefiniuj adres względny: B/b.html (patrz rysunek 6.2).
   
   Rys. 6.1. Połączenie z pliku a.html do pliku b.html umieszczonego w folderze podrzędnym B
   
   ‰
   
   Aby utworzyć połączenie od pliku b.html (folder podrzędny B) do pliku a.html (folder nadrzędny A), zdefiniuj adres jako ../a.html (../ oznacza przejście o poziom wyżej w hierarchii folderów).
   
   Rys. 6.2. Połączenie z pliku b.html do pliku a.html umieszczonego w folderze nadrzędnym A
   
   ‰
   
   Aby utworzyć połączenie z pliku c.html (folder podrzędny C) do pliku b.html (w innym folderze podrzędnym, o nazwie B), zdefiniuj adres jako ../B/b.html (../ spowoduje przejście do foldera nadrzędnego, a / przejście w dół hierarchii, do foldera podrzędnego B).
   
   Rys. 6.3. Połączenie z pliku c.html do pliku b.html – oba w folderach podrzędnych względem A
   
   W przypadku przesuwania całej grupy plików, bez naruszania powiązań między nimi, połączenia względne nie wymagają aktualizacji. Przesunięcie pojedynczych plików taką konieczność spowoduje.
   
   Co to są adresy względne definiowane względem foldera nadrzędnego? W tym przypadku adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu. Adres rozpoczyna się od ukośnika, który oznacza folder witryny. Adres tego rodzaju: /A/a.html jest adresem pliku a.html z foldera A, który jest folderem podrzędnym foldera całej witryny. Korzystanie z tego typu adresów jest trudniejsze. Jeśli sprawia Ci ono kłopot, stosuj adresowanie względem dokumentu. Ten typ adresowania sprawdza się najlepiej, gdy pliki witryny są często przemieszczane. Jeśli połączenia zostały zdefiniowane względem foldera prezentacji, zachowają swoją poprawność. Połączenia definiowane względem foldera nadrzędnego są interpretowane przez serwery, a nie przeglądarki.
   
   Definiowanie połączeń Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz. Jaki znacznik HTML umożliwia utworzenie połączenia? Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika zakotwiczenia i ma taką postać: Tekst połączenia
   
   Znacznik ten oprócz atrybutu href może mieć także inne atrybuty. Co umożliwiają połączenia? Zanim zabierzemy się za definiowane połączeń, jeszcze kilka istotnych informacji na temat połączeń. Ich możliwości są ogromne: ‰
   
   Połączenia mogą prowadzić do innych dokumentów, w tym również do obrazów, plików dźwiękowych, sekwencji wideo.
   
   ‰
   
   Zakotwiczenia można definiować także w obrębie tej samej strony WWW (jeśli oznaczysz w dokumencie cele, będziesz mógł sterować sposobem odbioru strony).
   
   ‰
   
   Dzięki połączeniom e-mail (które już poznałeś), ułatwisz użytkownikom nawiązanie kontaktu.
   
   ‰
   
   Listy menu to nic innego jak listy połączeń stanowiące ciekawy element strony.
   
   ‰
   
   Połączenia skryptowe pozwalają przypisać obiektom określone zachowanie. Powodują one wykonanie określonego kodu języka JavaScript.
   
   Jak wygląda połączenie? Wiesz to na pewno. Połączenia mają postać niebieskiego podkreślonego tekstu (w przypadku, gdy są tekstowe), którego kliknięcie wywołuje określoną akcję – przejście do wskazanego miejsca. Strona WWW, do której prowadzi kliknięte połączenie zostanie wyświetlona w bieżącym oknie przeglądarki, chyba że ustawienia dodatkowe stanowią inaczej. Na rysunku 6.4 pokazany jest przykład strony, która z racji funkcji zbudowana jest w znacznej mierze z połączeń. Rys. 6.4. Oto portal internetowy, w którym połączenia pełnią dominującą rolę
   
   Do tworzenia połączeń służy, jak się już dowiedziałeś, para znaczników . Element a nazywa się zakotwiczeniem. Podstawowym jego atrybutem jest href – Hypertext REFerence. Jak definiować atrybut href? Wartością atrybutu href jest adres URL (Uniform Resource Locator). W najprostszej sytuacji, gdy obie łączone strony znajdują się w tym samym katalogu, stosuje się tylko nazwę pliku. Na przykład: Wyświetl dodatkowe informacje na ten temat.
   
   Znacznik definiuje też styl – powoduje podkreślenie tekstu i zmianę jego koloru na niebieski. Można go umieszczać w dowolnym elemencie HTML. Z oczywistych względów nie można zagnieżdżać znaczników w sobie. Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów e-mail).
   
   Aby utworzyć połączenie do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład: Lista moich publikacji wydanych w 1999r.
   
   Aby odwołać się do pliku w katalogu nadrzędnym, zastosujesz taką oto składnię: Powrót do Spisu treści.
   
   W tym przypadku wykorzystywane są ścieżki względne. Ścieżki bezwzględne zawsze rozpoczynają się od ukośnika, co różni je od ścieżek względnych. Po ukośniku pojawiają się nazwy wszystkich katalogów, od katalogu najwyższego poziomu po nazwę pliku, do którego tworzone jest łącze. Adresowanie względne jest wygodniejsze i bezpieczniejsze – umożliwia swobodne przenoszenie stron między katalogami i systemami. Jeśli w adresie URL na końcu nie pojawia się nazwa pliku (a jedynie nazwa katalogu), serwer będzie szukał pliku o nazwie domyślnej – najczęściej jest to plik index.html. Jeśli nie znajdzie takiego pliku, zwróci listę plików w katalogu. Do czego służy atrybut name? Innym ważnym atrybutem elementu a jest atrybut name. Stosowany jest on do zdefiniowania odnośnika: Terminy i definicje
   
   Wartością tego atrybutu jest słowo kluczowe. W przeciwieństwie do połączeń, odnośniki nie są widoczne na stronie. Żeby skierować połączenie na wybrany odnośnik, skorzystamy z elementu o podobnej składni jak w przypadku zwykłych połączeń. Przed nazwą należy jednak dodać znak #: Patrz Dodatek A.
   
   Zakotwiczenia o zdefiniowanych nazwach są często stosowane do utworzenia czegoś w rodzaju „spisu treści strony WWW” – w poszczególnych sekcjach dokumentu umieszczane są zakotwiczenia o zdefiniowanych nazwach, a na początku strony pojawiają się połączenia do oznaczonych nazwami fragmentów. Co to jest połączenie e-mail? Specjalne połączenie – także je już poznałeś – umożliwia czytelnikowi przesłanie listu e-mail do autora strony. Składnia jest tutaj następująca: Wyślij do mnie list
   
   Czy można wskazać miejsce otwieranego połączeniem dokumentu? Kliknięcie połączenia poprowadzi Cię do dokumentu, który jest dostępny pod adresem wskazanym przez atrybut href. Dokument ten wyświetlony zostanie w bieżącym oknie Twojej
   
   przeglądarki, zastępując wcześniejszą zawartość. Czy możemy to zmienić? Jak najbardziej. Służy do tego atrybut target. Atrybut ten może przyjmować jedną z czterech wartości: _blank, _parent, _self (jest to wartość domyślna) lub _top. Szczegółowy opis wpływu poszczególnych ustawień znajdziesz w dodatku A. Najczęściej wykorzystuje się wartość _blank, która pozwala otwierać nową stronę w nowym oknie. Jeśli chcesz otworzyć stronę w nowym oknie, postać kodu html jest następująca: Odwiedź tę stronę!
   
   W dalszej części rozdziału poświęcimy atrybutom znacznika więcej miejsca. Sprawdzimy różne sposoby jego wykorzystania w dokumentach html.
   
   Definiowanie połączenia do innej strony Zaopatrzony we wstępne informacje na temat tworzenia połączeń możesz spróbować utworzyć połączenie prowadzące ze strony głównej do innego dokumentu html. Jak zdefiniować połączenie do innej strony tej samej witryny? Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni w niej rolę centrum dowodzenia – nazywamy ją stroną główną, ale wielu użytkowników stosuje też określenie strona domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na stronach podrzędnych. Aby zdefiniować połączenie spinające dwie strony, musimy więc zacząć od przygotowania dwóch plików html. Wykorzystamy w naszych eksperymentach z połączeniami stronę o zwierzakach, z poprzedniego rozdziału. To będzie strona główna. Strona podrzędna będzie zawierała dodatkowe informacje na temat określony tekstem połączenia. Przyjrzyj się postaci strony WWW i zastanów się, w jakich miejscach chciałbyś umieścić połączenia (patrz rysunek 6.5).
   
   Rys. 6.5. Przekształcimy w połączenia nazwy gatunków kotów – będą prowadziły do stron poświęconych im konkretnie
   
   Wybierz fragmenty tekstu, które w najbardziej reprezentatywny sposób będą charakteryzowały punkt docelowy. W przykładzie przekształcimy w połączenia nazwy gatunków kotów, na razie wyróżnione czcionką pogrubioną – połączenia te poprowadzą do stron poświęconych im tematycznie. Wyświetl w oknie edytora kod źródłowy swojej strony głównej – kod tego przykładowego dokumentu znajdziesz w rozdziale 5., na wydruku 5.2. Zamień w nim wszystkie elementy b na elementy a, zgodnie ze składnią: Tekst połączenia
   
   Oczywiście jeśli w swoim pliku nie stosowałeś znaczników , obejmij znacznikami żądany tekst. Wartościami atrybutu href będą nazwy poszczególnych plików html, do których wiodą połączenia (tak będzie, jeśli wszystkie podrzędne pliki html umieścisz w tym samym folderze, w którym znajduje się plik strony głównej – patrz rozważania na temat adresowania, na początku rozdziału). Przygotuj pliki html w taki sam sposób jak plik strony głównej i zapisz. Zapisz kod strony głównej i sprawdź działanie połączeń wczytując stronę główną do przeglądarki i klikając je (patrz wydruk 6.1 oraz rysunki 6.6 i 6.7). Wydruk 6.1. Połączenia prowadzące ze strony głównej do stron podrzędnych
   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Koty duże

   Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.
   
   Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.

   ---

   Koty małe

   Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata).
   
   Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.

   
   
   
   
   Rys. 6.6. Wszystkie nazwy zostały przekształcone w połączenia do innych dokumentów html tej samej witryny
   
   Rys. 6.7. Kliknięcie połączenia powoduje wyświetlenie w oknie przeglądarki pliku kot_domowy.ht ml
   
   Jak zdefiniować połączenie do zewnętrznej strony? Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego samego elementu a. Cała tajemnica tkwi w adresie url, który musi być w tym przypadku pełny. Jeśli więc chcesz umieścić na swojej stronie połączenie prowadzące do innej interesującej strony, spoza Twojej witryny, musisz jako wartość atrybutu href podać adres bezwzględny witryny. Na wydruku znajdziesz proste porównanie kodu html definiującego połączenie lokalne z odpowiednim kodem dla połączenia zewnętrznego. Zwróć uwagę, że na ekranie nie ma różnicy (patrz rysunek 6.8). Wydruk 6.2. Połączenia lokalne i zewnętrzne <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Ten fragment tekstu to połączenie do innej strony tej samej witryny.

   Ten fragment tekstu to połączenie prowadzące do witryny Microsoft.

   
   
   Rys. 6.8. Połączenia lokalne nie różnią się wyglądem od zewnętrznych
   
   Czy można dowiedzieć się pod jaki adres URL prowadzą połączenia? Podglądając postać źródłową strony WWW dowiesz się jak zdefiniowano na niej połączenia. Jest jednak prostsza metoda. Wystarczy spojrzeć na pasek stanu, z lewej strony (patrz rysunek 6.9). Rys. 6.9. Na pasku stanu wyświetlany jest adres URL wskazywanego myszką połączenia Jak wrócić do strony głównej? Element a pozwala zdefiniować połączenie, które poprowadzi Cię do innego dokumentu html Twojej witryny. A jak z niego wrócić? Jeśli chcesz tworzyć poprawne technicznie strony WWW, nie możesz skazywać czytelnika Twoich stron na korzystanie z przycisków nawigacyjnych przeglądarki. Zaplanowanie odpowiedniego systemu nawigacji między stronami jest tym ważniejsze, że daje Ci on możliwość sterowania sposobem przeglądania stron, co zwiększa prawdopodobieństwo skutecznego przekazu informacji. Co to oznacza? Oznacza mianowicie, że na wszystkich stronach witryny powinieneś wstawić połączenia prowadzące do strony głównej, a w idealnym przypadku także do pozostałych stron.
   
   Czy obraz może być połączeniem? Jak wiesz, nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do tego celu obrazy. Ikony nawigacyjne zamiast zwykłych połączeń na pewno uatrakcyjnią Twoje strony. Mogą one mieć na przykład postać przycisków lub niewielkich obrazków – jest to kwestia Twojej inwencji. Odpowiednie ikony znajdziesz wśród rysunków dołączonych do pakietu Microsoft Office lub możesz je sam przygotować. Posłużmy się takim obrazkiem, aby utworzyć graficzne połączenie pozwalające powrócić do strony głównej. Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w przypadku tekstu:
   
   Element a obejmuje tym razem znacznik a nie tekst. Przygotuj lub wybierz plik .GIF lub .JPG, który chcesz zastosować jako ikonę nawigacyjną. Otwórz plik. Oddziel treść strony od menu ikon nawigacyjnych linią poziomą (użyj w tym celu znacznika

   ---

   ). Dodaj na początku lub na końcu strony połączenie do strony głównej. Oto odpowiedni kod (patrz wydruk 6.3): Wydruk 6.3. Ikona nawigacyjna <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   KOT DOMOWY (Felis domestica) pochodzi od dzikich gatunków kotów (m.in. od żbika). Istnieje wiele ras i odmian barwnych kotów, a główne rasy to: kot syjamski — krótkowłosy o długiej, proporcjonalnej głowie z dużymi, szeroko rozstawionymi uszami i skośnymi, niebieskimi oczami, oraz kot perski — długowłosy o okrągłej, masywnej głowie z małymi, zaokrąglonymi na końcach uszami i dużymi, okrągłymi, zwykle pomarańczowymi oczami.

   Długość ciała kota to 70–80 cm, ogona 25–35 cm, masa ciała ok. 3–5 kg (wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6–10 miesiącu życia. Ruja występuje u kotek 2–3 razy w roku, a ciąża trwa ok. 60 dni. Zazwyczaj rodzi się od 4–8 młodych.

   ---

   Oto obraz, który pełni rolę połączenia powrotnego:
   
   

   
   
   W tym przypadku kod został dodany na końcu strony. Zwróć uwagę, że obok ikony umieszczono też tekst opisujący dokąd prowadzi obraz-połączenie. Taki tekst można także przekształcić w połączenie. W naszym przykładzie ma on jedynie aspekt informacyjny. Ponieważ skorzystaliśmy z obrazu, możemy też dołączyć dodatkowe informacje definiując za pomocą atrybutu alt tekst alternatywny (patrz rysunek 6.10).
   
   Rys. 6.10. Ikona dodana na końcu strony pozwala powrócić do strony głównej bez konieczności korzystania z przycisków nawigacyjnych przeglądarki
   
   Odnośniki Jak już wspominałam, odnośniki – zakotwiczenia o zdefiniowanych nazwach – tworzy się przy użyciu tego samego znacznika , który poznaliśmy przy okazji połączeń. Zamiast atrybutu href stosowany jest tu atrybut name. Atrybut ten zawiera słowa kluczowe, które będą stanowiły nazwę odnośnika:
   
   tekst
   
   Żeby skierować połączenie na wybrany odnośnik, musimy utworzyć „zwykłe” połączenie, z tym że wartością atrybutu href jest w tym przypadku nazwa odnośnika poprzedzona znakiem #. inny tekst
   
   Jakie może być zastosowanie odnośników? Zdarza się, że strona zawiera omówienie jakiegoś zagadnienia (jest na przykład instrukcją obsługi lub zawiera wybrane fragmenty literackie). W takich obszernych tekstowo stronach przydatna jest komunikacja wewnętrzna, która umożliwi czytelnikowi przechodzenie do wybranych tematów oraz powrót. W przełożeniu na język praktyki chodzi tu o umieszczenie na początku dokumentu czegoś w rodzaju spisu treści strony, którego pozycje będą prowadziły do kolejnych fragmentów. Z tej samej opcji można skorzystać definiując połączenie prowadzące na początek strony. Jak zdefiniować odnośniki? Utworzymy prosty plik, w którym zbudujemy spis treści strony. Na początku dokumentu pojawią się połączenia prowadzące do umieszczonych gdzieś w tekście zakotwiczeń o zdefiniowanych nazwach. Po przeanalizowaniu wydruku 6.4, bez trudu złapiesz, o co w tego typu konstrukcji chodzi. Zapisz swój plik, wczytaj stronę do przeglądarki i sprawdź działanie odnośników (patrz rysunek 6.11). Wydruk 6.4. Definiujemy odnośniki <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Do rozdziału 1.

   Do rozdziału 2.
   
   

   Do Rozdziału 3.

   Do rozdziału 4.

   Do rozdziału 5.

   Do rozdziału 6.

   Do rozdziału 7.

   Rozdział 1

   Ten rozdział zawiera bla bla bla bla

   
   
   

   Rozdział 2

   Ten rozdział zawiera bla bla bla bla

   Rozdział 3

   Ten rozdział zawiera bla bla bla bla

   Rozdział 4

   Ten rozdział zawiera bla bla bla bla

   Rozdział 5

   Ten rozdział zawiera bla bla bla bla

   Rozdział 6

   Ten rozdział zawiera bla bla bla bla

   Rozdział 7

   Ten rozdział zawiera bla bla bla bla

   
   
   Rys. 6.11. Strona, na której utworzony został spis treści – kliknięcie pozycji spisu przeniesie Cię do odpowiedniego rozdziału
   
   Jak wykorzystać odnośniki do przechodzenia na początek strony? Oczywiście w tym przypadku obowiązuje ten sam mechanizm. Spróbujmy jednak troszeczkę utrudnić sobie życie i przygotujmy obraz-połączenie. Scenariusz jest następujący: gdzieś na początku strony, na przykład w elemencie h1 (w przykładowym pliku jest on pierwszym elementem zawartości) umieścimy zakotwiczenie o zdefiniowanej nazwie; na końcu strony wstawimy element a, w którym atrybut href ma wartość odpowiadającą nazwie zakotwiczenia ze znakiem #. I to wszystko. Wydruk 6.5 zawiera przekład tego, co powiedzieliśmy na język HTML. Odpowiednie fragmenty kodu zostały wyróżnione czcionką pogrubioną. Pamiętaj, aby umieścić obraz stanowiący połączenie na początek strony w odpowiednim folderze!
   
   Wydruk 6.5. Powrót na początek strony <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   KOT DOMOWY (Felis domestica)

   Pochodzi od dzikich gatunków kotów (m.in. od żbika). Istnieje wiele ras i odmian barwnych kotów, a główne rasy to: kot syjamski - krótkowłosy o długiej, proporcjonalnej głowie z dużymi, szeroko rozstawionymi uszami i skośnymi, niebieskimi oczami, oraz kot perski - długowłosy o okrągłej, masywnej głowie z małymi, zaokrąglonymi na końcach uszami i dużymi, okrągłymi, zwykle pomarańczowymi oczami.

   Długość ciała kota to 70-80 cm, ogona 25-35 cm, masa ciała ok. 3-5 kg (wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6-10 miesiącu życia. Ruja występuje u kotek 2-3 razy w roku, a ciąża trwa ok. 60 dni. Zazwyczaj rodzi się od 4-8 młodych.

   ---

   

   ---

   Oto obraz, który jest połączeniem powrotnym:
   
   

   Oto obraz, który prowadzi na początek strony:

   
   
   Rysunek 6.12 prezentuje nasz nowy element nawigacji w obszarze strony. Rys. 6.12. Strona, na której utworzony został spis treści – kliknięcie pozycji spisu przeniesie Cię do odpowiedniego rozdziału
   
   Więcej o obrazach pełniących funkcję połączeń Ja wykorzystać ikony do prezentacji obrazów? Często na stronie umieszcza się ikonę obrazu – obrazek o niewielkich rozmiarach, i konfiguruje ją jako połączenie prowadzące do zewnętrznego pliku zawierającego obraz. Zmniejsza to rozmiar strony, skraca czas jej ładowania i daje czytelnikowi swobodę w podejmowaniu decyzji odnośnie ściągania pliku. Jeśli chciałbyś skorzystać z tego sposobu, przygotuj miniaturę obrazu i zapisz – rozmiar takiego pliku jest o jeden rząd wielkości mniejszy od pliku obrazu. Umieść ikonę na stronie i przekształć ją w połączenie prowadzące do pliku zawierającego obraz w pełnych wymiarach. Można tu wykorzystać w połączeniu atrybut target znacznika , aby obraz oryginalny był wyświetlany w nowym oknie. Kod strony przedstawiony jest na wydruku 6.6, a efekt jego działania na rysunku 6.13. Wydruk 6.6. Stosowanie pomniejszonych obrazów jako połączeń do większych odpowiedników <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Kot w worku

   
   
   Rys. 6.13. Ikona jest tu połączeniem prowadzącym do zewnętrznego pliku obrazu; dzięki użyciu atrybutu target z wartością _blank obraz jest wyświetlany w nowym oknie
   
   Jak dodać do ikon informacje o wielkości plików? Do ikon zapraszających użytkownika do ściągnięcia obrazu można dołączyć informację o wielkości pliku. Ta sama metoda może posłużyć do podłączania także innych plików, niekoniecznie graficznych. Wydruk 6.7. Informacja o plikach <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Kot w worku

   

   • Kot (plik GIF; 1.03 MB)
   • Kot (plik JPEG; 342 KB)

   
   
   
   
   Rys. 6.14. Miniatura może zachęcać do wyświetlenia obrazu; informacja o rozmiarze pliku będzie cenna dla tych, którzy chcą obraz ściągnąć
   
   Co to są mapy odsyłaczy? Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. Kliknięcie zwykłego połączenia – tekstowego czy też w postaci obrazu – prowadzi pod konkretny adres URL z nim stowarzyszony. W przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy będzie zależny od obszaru obrazu, w którym nastąpiło kliknięcie. Mapy odsyłaczy działające po stronie klienta stanowią element specyfikacji HTML 3.2. Ze względu na swoją naturę działają tylko w przeglądarkach graficznych. W tekstowych, na przykład w przeglądarce Lynx, nie będzie ani obrazu, ani jego funkcji nawigacyjnych. Musisz więc utworzyć ekwiwalent tekstowy obrazu, dzięki któremu użytkownicy przeglądarek tekstowych nie stracą dostępu do strony. Mapy odsyłaczy mogą z powodzeniem być stosowane jako centra nawigacji na stronach głównych. Jak przygotować mapę odsyłaczy? Proces przygotowania mapy odsyłaczy działającej po stronie klienta składa się z następujących etapów: 1. Wybór obrazu – obraz powinien zawierać odrębne wizualnie obszary, aby
   
   definicje połączeń mogły być jednoznaczne.
   
   ‰ ‰
   
   2. Przygotowanie definicji mapy: Naszkicuj obraz i podziel go ręcznie na obszary (obszar może być prostokątem, wielokątem lub okręgiem).
   
   Wyświetl obraz w oknie programu do obróbki grafiki (np. może być to program Paint Shop Pro) i zanotuj współrzędne wskaźnika myszki w punktach krańcowych obszarów. W przypadku prostokąta, będą to współrzędne lewego górnego wierzchołka i prawego
   
   dolnego; w przypadku okręgu – współrzędne jego środka i długość promienia. Jeśli obszar jest wielokątem, zanotuj współrzędne wszystkich wierzchołków. ‰
   
   Przygotuj adresy URL (lub odsyłacze działające w obrębie strony), z którymi stowarzyszysz poszczególne obszary. 3. Umieszczenie mapy odsyłaczy w dokumencie HTML – służy do tego znacznik <map>. Jego składnia jest następująca:
   
   <map name="nazwa_mapy">współrzędne i adresy
   
   Wartością atrybutu name jest nazwa definicji mapy. Nazwa ta będzie wykorzystywana później w celu stowarzyszenia obrazu z odpowiadającymi mu współrzędnymi i odwołaniami. Między znacznikami <map> umieszczane są współrzędne każdego z obszarów mapy odsyłaczy oraz adresy miejsc docelowych, do których wiodą poszczególne połączenia. Pojawiają się one w obrębie kolejnego znacznika – <area>. Jego postać może być następująca: <area shape="poly" coords="x1,y1,x2,y2,x3,y3,xN,yN" href="URL">, <area shape ="rect" coords="x1,y1,x2,y2" href="URL">
   
   lub
   
   <area shape ="circle" coords="x,y,promień" href="URL">
   
   Atrybut shape określa kształt obszaru. Jego wartości to "poly" (wielokąt), "rect" (prostokąt) lub "circle" (okrąg). Jak wygląda w praktyce proces definiowania mapy odsyłaczy? Proces przygotowania obrazu jako mapy odsyłaczy jest naprawdę prosty. Spróbujmy prześledzić go na konkretnym przykładzie. Zacznijmy od wybrania obrazu zdefiniowaniu obszarów, które będą pełniły rolę łączy. Wybierz odpowiedni obraz i przygotuj jego szkic na kartce. Może to być na przykład prosta struktura Twojej witryny. Podziel obraz na reprezentatywne obszary (patrz rysunek 6.16.). Rys. 6.15. Orientacyjny podział rysunku na obszary
   
   Wyświetl obraz w programie umożliwiającym obróbkę grafiki (np. takim jak Paint Shop Pro). Umieszczaj wskaźnik myszki w tych punktach obrazu, które definiują współrzędne obszarów – w
   
   tym przypadku obszary mogą mieć postać okręgów (patrz rysunek 6.15). Gdy przesuniesz kursor nad środek okręgu, w lewym dolnym rogu okna programu pojawiają się jego współrzędne x i y (patrz rysunek 6.16) – zanotuj je. Trzeba jeszcze oszacować promień okręgu, a to można zrobić umieszczając kursor nad krawędzią okręgu – uzyskamy w ten sposób wartość współrzędnej x1. Różnica x-x1 to promień. Rys. 6.16. Rejestracja współrzędnych obszarów mapy odsyłaczy – w lewym dolnym rogu okna programu pojawiają się współrzędne
   
   Czas na umieszczenie definicji mapy odsyłaczy w kodzie dokumentu. Mapa, którą tutaj preparujemy, świetnie nadaje się na centrum nawigacyjne (musisz ją jednak dopracować pod względem graficznym). Wstawimy ją wobec tego na pustej stronie, utworzonej w oparciu o szablon. Zaczniemy od nagłówka

   informującego użytkownika co powinien zrobić, aby uzyskać określone informacje, a za nim umieścimy obraz, który będzie pełnił rolę mapy odsyłaczy. Dołącz do znacznika atrybut usemap i przypisz mu jako wartość nazwę mapy zdefiniowanej za pomocą znacznika <map name="nazwa_mapy"> – w naszym przykładzie mapa nosi nazwę strony. Nazwa mapy musi być poprzedzona znakiem # (patrz wydruk 6.8). Wydruk 6.8. Mapa odsyłaczy

   Kliknij interesujący Cię obszar tematyczny:

   <map name="mapa_witryny">
   
   W kolejnych wierszach kodu pojawią się definicje obszarów mapy (patrz wydruk 6.9). Obszary jak pamiętasz są okręgami (a więc atrybut shape ma wartość ”circle”). Wartością atrybutów href będą połączenia do innych stron witryny wiążących się z danym fragmentem obrazu. Zamiast odwołań tego typu możesz tu umieścić odnośniki do sekcji danej strony. Wydruk 6.9. Mapa odsyłaczy – c.d. …
   
   <area shape="circle" coords="186,44,45" href="podstawy.html" alt="Informacje podstawowe"> <area shape="circle" coords="42,171,45" href="Style.html" alt="Style i nie tylko.."> <area shape="circle" coords="186,171,45" href="Skrypty.html" alt="Trochę skryptów"> <area shape="circle" coords="318,173,45" href="DHTML.html" alt="Dynamiczny HTML"> …
   
   Zapisz swój plik i przetestuj. Pełny kod html mapy odsyłaczy prezentuje wydruk 6.10. Na rysunkach 6.17 i 6.18 możesz zobaczyć mapę w działaniu. Wydruk 6.10. Pełny kod html mapy odsyłaczy <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Kliknij interesujący Cię obszar tematyczny:

   <map name="mapa_witryny"> <area shape="circle" coords="186,44,45" href="podstawy.html" alt="Informacje podstawowe"> <area shape="circle" coords="42,171,45" href="Style.html" alt="Style i nie tylko.."> <area shape="circle" coords="186,171,45"
   
   href="Skrypty.html" alt="Trochę skryptów"> <area shape="circle" coords="318,173,45" href="DHTML.html" alt="Dynamiczny HTML">

   
   
   Rys. 6.17. Mapa odsyłaczy jest gotowa do pracy – po umieszczeniu wskaźnika myszki nad obszarem aktywnym, forma wskaźnika zmienia się w typową dla połączeń
   
   Rys. 6.18. Po kliknięciu, w oknie wyświetlony został dokument, do którego prowadziło połączenie stowarzyszone z obszarem aktywnym
   
   Połączenia do archiwów FTP Czasami można spotkać w Internecie strony, na których autorzy oferują własne programy lub pliki mp3. Jeśli chciałbyś na swojej stronie umieścić połączenie do takiego archiwum, zrób to tak (patrz wydruk 6.11): Wydruk 6.11. Połączenie prowadzące do archiwum FTP <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Archiwum FTP

   Jeśli interesują Cię moje pliki, idź do mojego archiwum FTP!

   
   
   Rysunek 6.19 pokazuje efekt działania kodu. Rys. 6.19. To połączenie prowadzi do archiwum FTP
   
   Najważniejsze informacje ‰
   
   Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW.
   
   ‰
   
   Ogólna postać adresu WWW, na przykład: http://www.mojastrona.com/html/strona.htm spełnia następujące reguły składni: protokół://host.domena:port/ścieżka/nazwa_pliku
   
   ‰
   
   Połączenia lokalne – a więc z dokumentu do dokumentu tej samej witryny – nie wymagają wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem dokumentu bieżącego lub względem katalogu głównego witryny.
   
   ‰
   
   Adres bezwzględny to pełny adres URL, wraz z nazwą protokołu.
   
   ‰
   
   Adresy względne mogą być zdefiniowane względem dokumentu (np.katalog/katalog.html) lub względem foldera głównego (np. /katalog/katalog.html).
   
   ‰
   
   Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych.
   
   ‰
   
   W przypadku gdy adresy względne są definiowane względem foldera nadrzędnego, adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu.
   
   ‰
   
   Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do
   
   innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz. ‰
   
   Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika zakotwiczenia i ma taką postać: Tekst połączenia. Wartością atrybutu href jest adres URL.
   
   ‰
   
   Połączenie e-mail umożliwia czytelnikowi przesłanie listu e-mail do autora strony. Składnia jest tutaj następująca: Tekst
   
   ‰
   
   Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni rolę centralną – jest to tak zwana strona główna lub domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na stronach podrzędnych.
   
   ‰
   
   Połączenia są definiowane przy pomocy elementu a. Składnia wyrażenia jest następująca: Tekst połączenia. Wartościami atrybutu href są nazwy poszczególnych plików html, do których wiodą połączenia.
   
   ‰
   
   Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego samego elementu a, lecz adres url, musi być w tym przypadku bezwzględny.
   
   ‰
   
   Nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do tego celu obrazy. Element a obejmuje w takim przypadku znacznik a nie tekst.
   
   ‰
   
   Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w przypadku tekstu: .
   
   ‰
   
   Odnośniki – zakotwiczenia o zdefiniowanych nazwach – tworzy się przy użyciu tego samego znacznika , który służy do tworzenia połączeń. Zamiast atrybutu href stosowany jest tu atrybut name. Atrybut ten zawiera słowa kluczowe, które będą stanowiły nazwę odnośnika: tekst.
   
   ‰
   
   Żeby skierować połączenie na wybrany odnośnik, należy utworzyć „zwykłe” połączenie, z tym że wartością atrybutu href jest w tym przypadku nazwa odnośnika poprzedzona znakiem #: inny tekst.
   
   ‰
   
   Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. W przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy będzie zależny od obszaru obrazu, w którym nastąpiło kliknięcie.
   
   Rozdział 7. Tabele HTML Do czego służą tabele? Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek. Każda tabela ma swój podpis – definiuje go element caption – który pozwala na dołączenie krótkiego opisu zawartości tabeli. Dłuższe opisy można dołączać korzystając z atrybutu summary. Tabele języka HTML umożliwiają prezentację danych na stronach WWW oraz kontrolowanie umiejscawiania elementów strony – tekstu, tekstu preformatowanego, obrazów, pól formularzy, czy też innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach tabeli. Unikaj jednak stosowania tabel jako szablonu układu dokumentu – W3C, konsorcjum opracowujące standardy języka HTML, zaleca stosowanie arkuszy stylów. Jakie są elementy strukturalne tabeli? W tabeli można wyróżnić trzy sekcje: nagłówka, stopki i treści. Umożliwiają to elementy thead, tfoot i tbody. Nadają one tabeli strukturę, a w najnowszych typach przeglądarek stwarzają możliwość przewijania zawartości tabeli niezależnie od sekcji nagłówka i stopki. Opcja ta jest szczególnie wygodna w przypadku długich tabel, bo opisy kolumn są zawsze wyświetlane na ekranie. Na narzucenie tabeli określonej struktury pozwala też opcja grupowania kolumn. Dzięki specjalnym właściwościom elementów colgroup i col, HTML 4 pozwala też na stopniowe wyświetlanie zawartości tabeli, bez konieczności czekania na jej pełne załadowanie. Tabele mogą zawierać dane nagłówka – służy do tego element th – lub zwykłe dane – w tym przypadku elementem podstawowym jest td. Komórki tabeli można „rozpinać” na wielu wierszach i kolumnach, a każdą komórkę można zaopatrzyć w etykietę, co ułatwia przekazywanie informacji użytkownikom z wadami wzroku i pozwala prezentować tabele w przeglądarkach o ograniczonych możliwościach graficznych, na przykład zainstalowanych w telefonach komórkowych. Jak się zabrać do konstruowania tabeli? Zanim napiszesz kod tabeli, pobaw się w konstruktora. Naszkicuj tabelę na papierze, zaznacz komórki rozpięte na n wierszach i/lub kolumnach. Otwórz szablon strony w oknie edytora. Wpisz kod tabeli, rozpoczynając od zewnętrznego znacznika i dodając kolejne wiersze – elementy tr – a w wierszach komórki nagłówka – elementy th – oraz danych – elementy td.. Nie
   
   zapomnij o znacznikach zamykających. Wydruk 7.1 prezentuje prosty schemat kodu tabeli – skorzystaj z jego pomocy. Wydruk 7.1. Podstawowy kod tabeli <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   Tabela przykładowa

   NAGŁÓWEK, komórka 1	NAGŁÓWEK, komórka 2
   wiersz 1, komórka 1	wiersz 1, komórka 2
   wiersz 2, komórka 1	wiersz 2, komórka 2

   
   
   Ten kod pomoże nam rozszyfrować zagadnienia związane z tworzeniem tabel. Zapisz go na dysku (na przykład pod nazwą tabela.html) i zobacz w przeglądarce jak wygląda przygotowana tabela (patrz rysunek 7.1).
   
   Rys. 7.1. Tabela ma podpis – umieszczony nad nią, oraz wiersz nagłówka i dwie komórki danych. Atrybut border pozwolił na dodanie obramowania – domyślnie go nie ma
   
   Jakie są funkcje poszczególnych elementów tabeli? Element table to zasobnik przechowujący wszystkie elementy składowe tabeli. Atrybut border definiuje szerokość obramowania tabeli w pikselach. Jego wartość w tym przypadku to 1 – oznacza to, że chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to brak obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji. Element tr tworzy wiersz – a każdy wiersz podzielony jest na komórki. Komórki to elementy th i td – zawierają one dane nagłówka i dane tabeli. Czy można zwiększyć nieco wolny obszar w obrębie komórek? Przykładowa tabela nie wygląda najlepiej, a jednym z powodów tego stanu rzeczy jest zlewanie się ze sobą zawartości i obramowania. Czy możemy temu zaradzić? Tak, bo mamy do dyspozycji atrybut elementu table o nazwie cellpadding. Jak kolosalne ma on znaczenie przekonasz się, gdy zastosujesz atrybut w kodzie naszej tabeli, tak jak tutaj:
   
   Oczywiście wartość atrybutu cellpadding może być dowolna. Na rysunku 7.2 możesz sprawdzić, jak zmienił się wygląd tabeli.
   
   Rys. 7.2. Do elementu table dodano atrybut cellpaddig
   
   Czy można zwiększyć wolny obszar rozsuwając komórki? Jeśli takie rozwiązanie nie wystarczy, masz do dyspozycji inną możliwość – rozsunięcie samych komórek. Umożliwia to atrybut cellspacing, także dodawany do elementu table. Oto przykład jego definicji:
   
   Dodaj atrybut cellspacing o wartości 10 do kodu html tabeli i zobacz, co tym razem się stanie. Komórki rozsuną się i tabela uzyska „lekki” wygląd (patrz rysunek 7.3). Rys. 7.3. Do elementu table dodano atrybut cellspacing
   
   Uzyskany efekt wizualny zależy w dużym stopniu od tła tabeli, co pokazuje rysunek 7.4. Dobierając atrybuty bgcolor=”kod_koloru” – określa kolor tła, i bordercolor=”kod_koloru” – określa kolor obramowania, można uzyskać ciekawe efekty. Na rysunku 7.4 w pierwszym przypadku atrybuty te dodano w elemencie table, w drugim zdefiniowano tło w elementach tr, ale można też zmieniać kolory pojedynczych komórek tabeli.
   
   Rys. 7.4. Kolor tła i obramowań także wpływają na wizualny efekt oddzielenia komórek
   
   Na końcu tego rozdziału znajdziesz tabelę 7.1, w której wymienione zostały podstawowe atrybuty elementów tabeli. Bardziej rozbudowany wykaz jest dostępny w dodatku A.
   
   Jaka jest właściwie różnica między atrybutami cellpadding i cellspacing? Rysunek 7.5 wizualizuje relacje pomiędzy zawartością komórek, odstępami między zawartością a krawędziami (cellpadding) i między samymi komórkami (cellspacing). Rys. 7.5. Cellspacing, cellpadding a zawartość komórek
   
   Jak zdefiniować szerokość tabeli? Szerokość tabeli można zdefiniować korzystając z atrybutu width. Jego wartość można podawać w dwojaki sposób: w pikselach lub jako wartość procentową odległości między marginesami lewym i prawym. Jeśli więc w kodzie html przykładowej tabeli zdefiniujemy element table w taki oto sposób:
   
   to spowoduje to, że tabela w oknie przeglądarki będzie miała szerokość równą połowie szerokości jej okna. Sprawdź to na rysunku 7.6. Co więcej, relacja ta zostanie zachowana nawet wówczas, gdy użytkownik zmieni rozmiary okna przeglądarki.
   
   Rys. 7.6. Szerokość tabeli została zdefiniowana za pomocą atrybutu width i stanowi 50% szerokości okna
   
   Jaki mamy wpływ na sposób wyrównania tekstu w komórkach? Domyślnie przeglądarki wycentrowują zawartość komórek nagłówka (definiowanego za pomocą elementu th). Dane komórek „zwykłych” (tych definiowanych za pomocą elementu td) są natomiast wyrównywane względem lewej krawędzi komórki. Zmianę ustawień domyślnych umożliwia atrybut align, który można dodawać do elementów td lub tr. Dostępne wartości to center, right i left. Na wydruku 7.2 przedstawiony został uaktualniony kod naszej tabeli. Między innymi do wierszy danych dodano atrybut align=”center”. W jaki sposób to wpływa na sposób wyrównania zawartości komórek możesz zaobserwować na rysunku 7.7. Wydruk 7.2. Podstawowy kod tabeli rozbudowany o pewne atrybuty <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   

   Tabela przykładowa

   NAGŁÓWEK, komórka 1	NAGŁÓWEK, komórka 2
   wiersz 1, komórka 1	wiersz 1, komórka 2
   wiersz 2, komórka 1	wiersz 2, komórka 2

   
   
   Rys. 7.7*. Zawartość komórek danych została wycentrowana
   
   Czy można zmienić sposób wyrównania także w pionie? Sposób wyrównania zawartości komórek można modyfikować także w pionie. Służy do tego atrybut valign. Jest on stosowany z wartościami top, middle lub bottom i można go stosować w każdej komórce lub wierszu. Jak zdefiniować w tabeli pustą komórkę? Większość przeglądarek nie wyświetli komórek tabeli, w których nie umieszczono danych. Jeśli więc dodamy do kodu naszej przykładowej tabeli kolejne komórki danych, lecz będą wśród nich puste:
   
   wiersz 1, komórka 1 wiersz 1, komórka 2 wiersz 1, komórka 3 wiersz 2, komórka 1 wiersz 2, komórka 2
   
   to przeglądarka wyświetli tabelę w niezbyt eleganckiej postaci (patrz rysunek 7.8). Zwróć uwagę, że komórka nie ma obramowań, nie widać jej wcale. Rys. 7.8. Jeśli w tabeli jest pusta komórka, przeglądarka
   
   Aby temu zaradzić, należy umieszczać w „pustych” komórkach twarde spacje,   o tak: wiersz 1, komórka 1 wiersz 1, komórka 2 wiersz 1, komórka 3
   
   wiersz 2, komórka 1 wiersz 2, komórka 2  
   
   Teraz przeglądarka nie ma wyjścia i musi wyświetlić pustą komórek danych wraz z obramowaniem (patrz rysunek 7.9). Rys. 7.9. Twarde spacje zmuszają przeglądarkę do wyświetlenia pustych komórek
   
   Jak rozpiąć komórkę na kilku kolumnach? Komórki rozpięte na kilku wierszach lub kolumnach można zaobserwować najczęściej w nagłówkach. I tam są najbardziej przydatne. Aby zdefiniować taką komórkę, należy do znacznika lub dodać atrybuty rowspan i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub kolumnach komórka jest rozpięta. Komórki są rozpinane w dół i na prawo, a więc aby utworzyć komórkę rozpiętą na kilku kolumnach, należy dodać atrybut colspan do komórki wysuniętej najbardziej w lewo, a w przypadku rozpinania komórki na wierszach, atrybut rowspan powinien być dodany do komórki pierwszej od góry. Rozbudujmy więc nagłówek naszej przykładowej tabeli wykorzystując możliwość rozpinania komórek, tak by uzyskać coś takiego, jak na rysunku 7.10.
   
   Rys. 7.10. Plan tabeli – nowa postać nagłówka z komórką rozpiętą na trzech kolumnach
   
   Dodamy w nagłówku jeszcze jeden wiersz i w elemencie tr umieścimy atrybut colspan. Ponieważ chcemy rozpiąć komórkę na trzech kolumnach, atrybut ten musi mieć wartość 3. Kod nagłówka tabeli jest teraz taki, jak na rysunku 7.11: Rys. 7.11. Nowa postać kodu html nagłówka z komórką rozpiętą na trzech kolumnach
   
   W naszej tabeli można jeszcze dodać parę atrybutów zmieniających kolor tła wierszy. Finalny kod html tabeli przedstawiony jest na wydruku 7.3.
   
   Wydruk 7.3. Tabela, w której wiersz nagłówka rozpięty jest na trzech kolumnach <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   

   Tabela przykładowa

   Bardzo ważny nagłówek!!!
   NAGŁÓWEK, komórka 1	NAGŁÓWEK, komórka 2	NAGŁÓWEK, komórka 3
   wiersz 1, komórka 1	wiersz 1, komórka 2	wiersz 1, komórka 3
   wiersz 2, komórka 1	wiersz 2, komórka 2

   
   
   Tabela, którą tworzy kod z wydruku 7.3 (patrz rysunek 7.12) odpowiada projektowi z rysunku 7.10 – porównaj sam. Rys. 7.12. Tabela, w której wiersz nagłówka został rozpięty na trzech kolumnach
   
   Jak rozpiąć komórkę na kilku wierszach? Przeanalizujmy jeszcze jeden przykład. Uwzględnia on większość z tego, czego nauczyłeś się już o tabelach: są tu komórki nagłówka, zwykłe komórki danych, do których zastosowane zostanie wyrównanie oraz są oczywiście komórki rozpięte na wierszach i kolumnach.
   
   Przeanalizuj kod źródłowy tabeli z wydruku 7.4 – bez trudu zorientujesz się, które fragmenty definiują komórki rozpięte i skąd to wynika. Zapisz kod i wyświetl tabelę w przeglądarce (patrz rysunek 7.13). Wydruk 7.4. Rozbudowana tabela <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   
   

   Tabela opisująca schemat wydatków

   	Wydatki		Liczba stałych pracowników	Liczba zleceń
   	Planowane	Rzeczywiste
   Styczeń	5700	3800	88	59
   Luty	10800	9600	45	67
   Marzec	14900	23000	36	24
   Kwiecień	22700	15000	34	45

   
   
   Rys. 7.13. Nieco bardziej skomplikowana tabela – przyda Ci się do najróżniejszych prezentacji
   
   Jak do tabeli zastosować style CSS? Z pewną nieśmiałością opisywałam możliwość zmiany tła tabeli, wiersza czy komórki przy użyciu atrybutu bgcolor. Przede wszystkim dlatego, że standard HTML 4.01 kładzie bardzo mocny nacisk na stosowania formatowania za pośrednictwem stylów CSS. Cóż nam zostaje? Spróbować zdefiniować arkusz stylów, który zajmie się wyglądem naszej tabeli. Na pocieszenie powiem, że niemal wszystkie przeglądarki obsługują poprawnie atrybut bgcolor, nie musisz więc z nim się całkowicie rozstawać Zdefiniujmy style, które zostaną zastosowane w tabeli. Wydruk 7.5 prezentuje pełny kod tabeli formatowanej przy pomocy kaskadowego arkusza stylówi. Arkusz CSS został zaznaczony czcionką pogrubioną. Wydruk 7.5. Kaskadowy arkusz stylów formatujący tabelę <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css">
   border-color: white; } th { font-family: sans-serif; background: rgb(204, 204, 153) } td { font-family: sans-serif; background: rgb(255, 255, 153) } -->
   
   

   Tabela opisująca schemat wydatków

   	Wydatki		Liczba stałych pracowników	Liczba zleceń
   	Planowane	Rzeczywiste
   Styczeń	5700	3800	88	59
   Luty	10800	9600	45	67
   Marzec	14900	23000	36	24
   Kwiecień	22700	15000	34	45

   
   
   Efekt graficzny formatowania tabeli przy użyciu arkusza CSS prezentuje rysunek 7.14. Rys. 7.14. Tabela sformatowana przy użyciu arkusza stylów CSS
   
   A może jednak tabela bez obramowań? Jak wspomniałam, o tym, czy obramowania będą wyświetlane, czy nie, decyduje atrybut border. Jeśli więc nie chcesz widzieć obramowań, wystarczy, że w znaczniku zdefiniujesz border=”0” i cellspacing=”0”, o tak:
   
   Przypisanie wartości 0 atrybutowi cellspacing jest konieczne, aby zlikwidować odstępy między komórkami, które choć niewielkie, są jednak widoczne. W jakich przypadkach przydają się tabele bez obramowań? Do czego może być przydatna tabela bez obramowań? A choćby do definiowania układu strony. Lecz nie tylko. Czasami po prostu tak jest lepiej. Na rysunku 7.15 możesz popodziwiać naszą tabelę właśnie bez obramowań – wcale nie wygląda gorzej. Rys. 7.15. Tabela bez obramowań
   
   Czy w tabeli można umieścić inne elementy HTML? Już wspominałam, że komórka może zawierać dowolne dane – tekstowe, liczbowe, łącza, zagnieżdżoną inną tabelą, a także obraz. Wydruk 7.6 prezentuje kod tabeli, w której komórkach zastały ulokowane inne elementy html:

   ,

   , i

   . To pierwszy krok do zdefiniowania układu strony w oparciu o tabelę. Wystarczy, że zrezygnujesz z obramować (patrz punkt wcześniejszy) i to wszystko. Na rysunku 7.16 pokazana została tabela z umieszczonymi w niej elementami. Wydruk 7.6. Tabela a inne znaczniki <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

   
   
   

   Tutaj pojawia się tekst. I jeszcze jeden akapit tekstu...	W tej komórce zagnieżdżono inną tabelę! AAAAAA BBBBBB CCCCCC DDDDDD
   Ta komórka zawiera listę. Pozycja pierwsza Pozycja druga Pozycja trzecia

   
   
   Rys. 7.16. Ta tabela zawiera tekst, listę, inną tabelę oraz obraz
   
   O czym trzeba pamiętać wstawiając w komórce tabeli obraz? Jeśli decydujesz się umieścić w komórce obraz, użyj takiej postaci kodu:
   
   Jest to ważne – umieszczenie znaczników i w osobnych wierszach może zaburzyć umiejscowienie obrazu. Jak zapobiec problemom z wyświetlaniem tabel w przeglądarkach? Tabele nie są równie dobrze obsługiwane we wszystkich typach przeglądarek. Może się więc zdarzyć, że zamiast wypieszczonej tabeli, na ekranie pojawi się kaszka. Można tego uniknąć, aczkolwiek wymaga to bardzo pieczołowitego dopracowania układu tabeli. Jeśli umieścisz w komórkach tabeli nagłówki i cytaty blokowe, w środowisku, w którym tabela nie jest obsługiwana, tekst pojawi się w sposób uporządkowany i czytelny. Można też skorzystać ze znaczników

   lub
   umieszczanych na końcu wybranych komórek, np.: Dane
   Tam, gdzie tabele są obsługiwane, te dodatkowe znaczniki będą ignorowane, natomiast tam, gdzie są kłopoty z obsługą tabel, zadziałają złamania wiersza. Pamiętaj o znacznikach zamykających , i . Pomimo, że są one opcjonalne, ich brak może być przyczyną nieoprawnego wyświetlania tabeli w pewnych przeglądarkach.
   
   Elementy konstrukcyjne tabeli Tabela 5.1 prezentuje podstawowe znaczniki definiujące tabelę, ich funkcje oraz niektóre atrybuty, które mogą Ci się najbardziej przydać. Szerszy wybór znajdziesz w dodatku A.
   
   Tabela 5.1. Znaczniki tabeli i podstawowe atrybuty Znaczniki
   
   Funkcja znacznika i jego atrybuty
   
   

   
   
   Tworzy tabelę – jest „opakowaniem” pozostałych elementów. Domyślnie tabele nie mają obramowań. Niektóre atrybuty: cellspacing=”piksele” wolny obszar między komórkami align=”left|right” sposób wyrównania tabeli cellpadding=”piksele” wolny obszar między krawędziami komórki a zawartością bgcolor=”kod_koloru” zmienia tło tabeli; wartością jest nazwa koloru lub liczba szesnastkowa background=”url” width=”warto••%|piksele” szerokość tabeli w procentach względem szerokości strony lub w pikselach height=”warto••%|piksele” wysokość tabeli w procentach względem wysokości strony lub w pikselach
   
   
   
   Wiersz tabeli. Niektóre atrybuty: align="left|center|right|justyfy|char” wyrównanie tekstu bgcolor="rrggbb" (lub nazwa koloru) kolor tła bordercolor=="rrggbb" (lub nazwa koloru) kolor obramowania
   
   
   
   Komórka tabeli. Komórki umieszcza się między znacznikami wiersza tabeli. Niektóre atrybuty: rowspan="n_wierszy" rozpięcie komórki na n wierszach colspan="n_kolumn"
   
   rozpięcie komórki na n kolumnach width=”wartość%|piksele” szerokość komórki w procentach względem szerokości tabeli lub w pikselach
   
   Komórka nagłówka. Od komórki danych różni się tym, że zastosowano w niej czcionkę pogrubioną i wycentrowanie. Niektóre atrybuty: rowspan="n_wierszy" rozpięcie komórki na n wierszach colspan="n_kolumn" rozpięcie komórki na n kolumnach width=”wartość%| piksele” szerokość komórki w procentach względem szerokości tabeli lub w pikselach
   
   
   
   Podpis – informuje o zawartości tabeli. Podpis jest opcjonalny i umieszcza się go w obrębie elementu , przed definicjami wierszy.
   
   Atrybut: align="top|bottom|left|right"
   
   Stopka – utworzona podobnie jak nagłówek ze zgrupowanych wierszy.
   
   
   
   Nagłówek – tworzą go zgrupowane wiersze.
   
   .
   
   Obszar treści tabeli.
   
   Najważniejsze informacje ‰
   
   Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek.
   
   ‰
   
   Tabele umożliwiają prezentację danych na stronach WWW oraz kontrolowanie umiejscawiania elementów strony – tekstu, tekstu preformatowanego, obrazów, pól formularzy, czy też innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach tabeli.
   
   ‰
   
   Element table to zasobnik przechowujący wszystkie elementy składowe tabeli: tr, th i td. Element tr tworzy wiersz – a każdy wiersz podzielony jest na komórki. Komórki to elementy th i td – zawierają one dane nagłówka i dane tabeli.
   
   ‰
   
   Atrybut border definiuje szerokość obramowania tabeli w pikselach. Jego wartość równa 1 oznacza to, że chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to brak obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji.
   
   ‰
   
   Atrybut cellpadding elementu table pozwala zwiększyć wolny obszar w obrębie komórek. Oto przykładowa definicja:
   
   ‰
   
   Zwiększenie odstępu między komórkami umożliwia atrybut cellspacing, także dodawany do elementu table. Oto przykład jego definicji:
   
   ‰
   
   Za pomocą atrybutów bgcolor=”kod_koloru” i bordercolor=”kod_koloru” można zdefiniować kolor tła i kolor obramowania. Atrybuty te można ~wstawiać w elemencie table oraz innych w elementach tr i td.
   
   ‰
   
   Szerokość tabeli można zdefiniować korzystając z atrybutu width. Jego wartość można podawać w pikselach lub w procentach szerokości okna przeglądarki. Oto przykład:
   
   ‰
   
   Zmianę sposobu wyrównania zawartości komórek umożliwia atrybut align, który można dodawać do elementów td lub tr. Dostępne wartości to center, right i left.
   
   ‰
   
   Sposób wyrównania zawartości komórek można modyfikować także w pionie. Służy do tego atrybut valign. Jest on stosowany z wartościami top, middle lub bottom i można go stosować w każdej komórce lub wierszu.
   
   ‰
   
   Aby puste komórki tabeli zostały poprawnie wyświetlone, należy umieszczać w nich twarde spacje,   o tak:
   
   ‰
   
   Aby zdefiniować komórkę rozpiętą na kilku wierszach lub kolumnach, należy do znacznika

   	lub	dodać atrybuty rowspan i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub kolumnach komórka jest rozpięta. ‰ Aby wyłączyć wyświetlanie obramowań, należy w znaczniku zdefiniować border=”0” i cellspacing=”0”, o tak: ‰ W przypadku umieszczania w komórce tabeli obrazu, należy zastosować taką oto składnię: Jest to ważne – umieszczenie znaczników i w osobnych wierszach może zaburzyć umiejscowienie obrazu. Rozdział 8. Ramki i układy ramek Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument html. Każdy z takich dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie niezależne. Wadą takiego sposobu prezentacji jest jedynie utrudnienie procesu drukowania strony. Co to jest ramka? Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie od pozostałej zawartości okna. Można też swobodnie zmieniać jej rozmiary. Zawartość ramki tworzy standardowy plik HTML. Wszystkie cechy ramek określane są za pomocą atrybutów znacznika , generującego ramkę. Lista podstawowych atrybutów została zebrana w tabeli 8.1. Rozszerzony zestaw atrybutów znajdziesz w dodatku A. Co to jest układ ramek? Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w „zewnętrznym” układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy – dzięki temu można tworzyć połączenia do ramek oraz stosować nazwy ramek w skryptach. O ile strona WWW w klasycznej formie nie odbiega od tego, co zwykliśmy sobie wyobrażać pod pojęciem strona, to prezentacja informacji w układzie ramek jest już czymś typowym dla aplikacji komputerowych. Zazwyczaj w układzie ramek jedna z ramek prezentuje informacje, a druga, często statyczna, jest wyposażona w system nawigacji i stanowi coś w rodzaju systemu dowodzenia – tu decydujesz, co będzie wyświetlane w pierwszej ramce. Wybranie połączenia w pierwszej ramce powoduje uaktualnienie zawartości drugiej ramki. Strony WWW z ramkami są niewątpliwie bardziej atrakcyjne wizualnie, lecz znacznie trudniejsze w projektowaniu i przygotowaniu. Do czego służy znacznik ? Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset. W elemencie tym określane są następujące cechy układu ramek: ‰ Sposób podziału okna na ramki. ‰ Liczba wierszy lub kolumn. ‰ Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom. Do czego służy znacznik ? Znacznik definiuje dokument, który zostanie umieszczony w danej ramce. Wartością jego atrybutu src jest adres url dokumentu html. Jaka jest ogólna postać definicji układu ramek? Ogólna postać definicji układu ramek przedstawiona została na wydruku 8.1. Przy tworzeniu ramek należy pamiętać, że znaczniki i wzajemnie się wykluczają. Co więcej, znacznik nie może zawierać innych znaczników formatujących, połączeń oraz dokumentów tekstowych. Wydruk 8.1. Definicja układu ramek ... Aby zdefiniować układ ramek, konieczne jest: ‰ Określenie liczby ramek w układzie. ‰ Przygotowanie plików, które wypełnią poszczególne ramki. Jeśli na przykład w układzie będą trzy ramki, konieczne będą trzy pliki HTML (patrz rysunek 8.1). Rys. 8.1. Plik definiujący układ ramek bazuje na plikach definiujących zawartość poszczególnych ramek W jaki sposób można podzielić okno przeglądarki na pionowe ramki? Znacznik przyjmuje dwa atrybuty: cols i rows. Pierwszy z nich, cols, umożliwia określenie liczby kolumn, na które zostanie podzielone okno przeglądarki – a więc liczby ramek pionowych. Co więcej, atrybut ten pozwala także wskazać sposób przypisania kolumnom obszaru okna. Zobaczmy jak wykorzystać ten atrybut. Oto podstawowa definicja znacznika z atrybutem cols: Liczba kolumn określana jest liczbą wartości atrybutu cols. Wartości te podawane są kolejno, z przecinkami. Wartości – czyli szerokość ramki – można definiować w pikselach, w procentach (względem całkowitej szerokości układu ramek) oraz za pomocą znaku „*” (w tym przypadku przydzielana jest ramce maksymalna możliwa szerokość). Jak podzielić okno na ramki o jednakowej szerokości? Aby podzielić okno na ramki, o jednakowej szerokości, przypisz atrybutowi cols wartości określone za pomocą symbolu ”*”. Jeśli więc układ ramek ma składać się z trzech identycznych ramek, definicja elementu frameset będzie następująca: Unikaj definiowania rozmiarów ramek w jednostkach bezwzględnych. Jeśli jednak musisz, to wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona. Jak w praktyce poradzić sobie z kodem html układu ramek? Wydruk 8.2 pokazuje przykładowy podział okna przeglądarki na trzy pionowe ramki. Wydruk 8.2. Układ trzech ramek pionowych Układ ramek z wydruku 8.3 to układ dwóch ramek. Za pomocą atrybutu name przypisano pierwszej z ramek nazwę nawigacja, a drugiej strona. Wydruk 8.4. Nawigacja.html <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> Wybierz interesujący cię temat: strona 1 strona 2 strona 3 W tym pliku html został wykorzystany element ul tworzący listę wypunktowaną. Elementami listy są połączenia prowadzące do kolejnych plików html: strona 2 Połączenia są definiowane za pomocą znacznika , który przyjmuje dwa atrybuty: href i target. Wartością atrybutu src są adresy url plików wyświetlanych w szerszej z ramek Ramka ta jest wskazywana jako cel połączeń za pomocą atrybutu target – jego wartością jest nazwa szerszej ramki. Atrybut target ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami. Ramkom warto nadawać nazwy, nawet jeśli w danej chwili nie korzystasz z nich. Jeśli będziesz rozwijał swoją stronę WWW, może się to okazać bardzo przydatne. Istnieją jednak nazwy, do których należy podchodzić z niezwykłą ostrożnością – nazwy te rozpoczynają się od znaku podkreślenia i mają specjalne funkcje. Te wyjątkowe nazwy prezentuje tabela 8.2. Wydruk 8.5. strona.html <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> To jest plik o nazwie strona.html. Jeśli chcesz wyświetlić inny plik, kliknij połączenie... Plik html z wydruku 8.5 to dowolny plik html. Może to być strona główna Twojej witryny. W takim przypadku połączenia będą prowadziły do kolejnych stron witryny. Na rysunku 8.3 możesz zobaczyć układ ramek, który właśnie skonstruowaliśmy. Klikając połączenia w ramce nawigacyjnej, będziesz wyświetlał w ramce z prawej strony kolejne dokumenty html składające się na Twoją witrynę. Rys. 8.3. Ramki dzielą okno w pionie Taki układ ramek można także wykorzystać do prezentacji „zewnętrznych” stron WWW. Wymaga to jedynie odpowiedniego zdefiniowania adresów url przy wykorzystaniu adresowania bezwzględnego (patrz rozdział Połączenia) (patrz rysunek 8.4). Rys. 8.4. Teraz połączenia prowadzą do innych witryn Kiedy pojawiają się w ramkach paski przewijania, a kiedy nie? Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to konieczne. Jeśli chciałbyś zablokować przewijanie zawartości ramki, umieść w znaczniku atrybut scrolling i przypisz mu wartość no. Czy użytkownik może zmieniać rozmiary ramek? Ramki są oddzielane obramowaniem, z którego możesz skorzystać, aby zmienić zadane rozmiary ramki. Złap za obramowanie oddzielające ramki i przeciągnij w odpowiadające Ci położenie. Jak wyłączyć wyświetlanie obramowania? Aby pozbyć się obramowań, skorzystaj z takiej definicji znacznika: Wyłączenie wyświetlania obramowań ramek znacznie utrudni użytkownikowi zmianę rozmiarów ramek. Nie jest on jednak w sytuacji beznadziejnej – nad obramowaniem, którego wyświetlanie wyłączono, wskaźnik myszki zmienia postać (patrz rysunek 8.5). Rys. 8.5. Obramowania ramek zostały ukryte. Zwróć jednak uwagę na postać wskaźnika myszki – informuje ona, że tam jest obramowanie Jak podzielić okno przeglądarki w poziomie? Drugim atrybutem znacznika jest rows. Umożliwia on określenie liczby wierszy, na które zostanie podzielone okno przeglądarki – a więc liczby ramek poziomych. Oto postać definicji: Unikaj stosowania absolutnych rozmiarów ramek. Jeśli jednak musisz, to wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona. Aby podzielić okno na trzy poziome ramki, o jednakowej wysokości, zastosuj atrybut rows="*, *, *". Jak napisać kod html poziomego układu ramek? Przygotujemy prosty układ dwóch ramek, dzielących ekran w poziomie. W pierwszej, węższej, możemy umieścić banner, a w drugiej, szerszej, dokument html. Wąskiej rameczce narzucimy stałą wysokość, na przykład 75 pikseli. Druga ramka niech wypełni pozostałą część ekranu. Wydruk 8.6 pomoże Ci w zaprojektowaniu układu ramek. Wydruki 8.7 i 8.8 to pliki HTML z zawartością ramek – banner.html i strona.html. Możesz je dowolnie modyfikować. Na razie nie ma w nich nic szczególnego. Wydruk 8.6. Prosty układ ramek Ten układ ramek różni się od układu zdefiniowanego na wydruku 8.3 tylko tym, że element frameset ma tu atrybut rows. Jego wartości wskazują, że okno podzielone zostanie na dwie ramki, przy czym jednej narzucona została wysokość 75 pikseli, a wysokość drugiej to pozostała część okna. W wąskiej ramce pojawi się baner reklamowy, a w wysokiej Twoja strona WWW. Wydruk 8.7. Banner.html <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <marquee> Oto najwspanialsza strona WWW na świecie!!! Plik baner.html to prostu dokument html, który zawiera napis reklamowy. Napis ten będzie płynnie przewijany w poprzek ekranu. Wykorzystana tu została prosta metoda tworzenia animacji tekstowych, tak zwanych animacji Marquee. Aby utworzyć taką animację, wpisz między znacznikami <marquee> dowolny tekst. Znacznik ten ma swoje atrybuty – zostały one zebrane w tabeli 8.3. Jest to bardzo prosta metoda, lecz należy pamiętać, że udostępnia ją tylko Internet Explorer. W Netscape napis będzie nieruchomy. Wydruk 8.8. Strona.html <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> To jest ramka, w której wyświetlana będzie strona Plik strona.html tozwykły dokument html. Zastąp go swoją stroną WWW. Na rysunku 8.6 pokazane zostały efekty naszej pracy – okno przeglądarki zostało podzielone na dwie poziome ramki. Rys. 8.6. Okno przeglądarki podzielone zostało na dwie ramki poziome Czy można mieszać ramki poziome i pionowe? Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy, przypominające szachownicę. Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu frameset w innym elemencie frameset. Utwórzmy taki układ ramek, który umożliwia jednoczesną prezentację trzech dokumentów (patrz rysunek 8.7). Rys. 8.7. Okno przeglądarki podzielone zostało na dwie ramki poziome Kod html takiego dokumentu znajdziesz na wydruku 8.9. Wydruk 8.9. Mieszany układ ramek Konieczne jest oczywiście przygotowanie plików ramka_A.html – zawartość górnej ramki, ramka_B.html – zawartość dolnej lewej ramki, i ramka_C.html – zawartość dolnej prawej ramki. Jak wygląda taki podział okna możesz zobaczyć na rysunku 8.8. Rys. 8.8. Mieszany układ ramek Jak zabezpieczyć się przed nieprawidłową obsługą ramek? Nie wszyscy mogą i chcą korzystać z ramek. Dla nich właśnie dołącz do swojej strony połączenie umożliwiające wyświetlenie strony w środowisku bez ramek. Umożliwia to element noframes. Umieszcza się go w obrębie elementu frameset: <noframes>Przeglądarka nie obsługuje ramek! Tekst zawarty między znacznikami <noframes> nie będzie wyświetlany tam, gdzie ramki są obsługiwane, a pojawi się w przypadku kłopotów z ich obsługą, umożliwiając wyświetlenie strony w wersji bez ramek. Wartą polecenia praktyką jest udostępnianie zawartości strony w dwóch wersjach: z ramkami i bez. W przypadku długich dokumentów zawierających wiele połączeń da to czytelnikom możliwość wyboru między wersją „nawigacyjną” strony, wyposażoną w ramkę z połączeniami, a wersją pozbawioną ramek, kładącą nacisk na treść i umożliwiającą czytelnikowi przeglądanie dokumentu w większym oknie. Jak zdefiniować ramkę lokalną? Ramki lokalne lub pływające, to ramki, które pojawiają się jako wpisane w dokument, a więc stosuje się je podobnie jak obrazy. Jeśli chcesz wstawić jakiś dokument html w dowolnym miejscu innego dokumentu html, skorzystaj z ramki pływającej. Definiowana jest ona przy pomocy pary znaczników <iframe>. Atrybuty tego elementu to: name, width, height, src i align. Znacznik <iframe> umożliwia tworzenie ramek w dowolnym miejscu dokumentu HTML. ‰ <iframe name="nazwa_ramki"> – atrybut name pozwala nadać ramce nazwę. Umożliwia to tworzenie celów i połączeń. ‰ <iframe width="wartość%|piksele"> – atrybut width pozwala definiować szerokość ramki (w pikselach lub w procentach szerokości okna przeglądarki). Przykładowa postać kodu: <iframe width="40%"> ‰ <iframe height="wartość%|piksele"> – atrybut height pozwala definiować wysokość ramki (w pikselach lub w procentach szerokości okna przeglądarki). Przykładowy kod to: <iframe height="40%"> ‰ <iframe src="url"> – atrybut src jest stosowany do zdefiniowania źródła dokumentu HTML umieszczanego w ramce. Oto przykład definicji: <iframe src="url_pliku.html"> ‰ <iframe align="wartość"> – atrybut align umożliwia zdefiniowanie sposobu wyrównania qwzględem linii tekstu, w której ramka się pojawia. Możliwe wartości to: left, middle, right, top i bottom (wartość domyślna). <iframe align="top"> Tabela 8.1. Podstawowe atrybuty znacznika Nazwa Opis longdesc=”url” Połączenie do strony zawierającej obszerny opis ramki. Stosuj tam, gdzie spodziewasz się, że ramki nie będą obsługiwane. marginheight=”piksele” Wysokość marginesu. marginwidth”piksele” Szerokość marginesu. frameborder=”0|1” Określa, czy obramowanie ramki ma być wyświetlane. noresize=”true|false” Określa, czy użytkownik ma możliwość zmiany rozmiarów ramki. scrolling=”yes|no|auto” Definiuje sposób przewijania ramki. name=”nazwa_ramki” Nazwa ramki. src=”url” Podaje ulokowanie pliku, który zostanie wyświetlony w ramce. Tabela 8.2. Nazwy specjalne ramek azwa Opis _blank Otwiera stronę w nowym oknie. _self Otwiera stronę w bieżącej ramce lub oknie. Jest to ustawienie domyślne. Korzysta się z tej nazwy, aby zniwelować działanie ustawienia w znaczniku (czyli wyświetlenie dokumentu w ramce domyślnej, wskazanej przez ten znacznik). _top Powoduje, że ładowany dokument jest wyświetlany w oknie umieszczonym na wierzchu stosu i zajmuje całe okno, zastępując układ ramek. Umożliwia to ucieczkę ze środowiska ramek. _parent Dokument jest ładowany do ramki nadrzędnej względem ramki zawierającej bieżący dokument. Tabela 8.3. Atrybuty znacznika <marquee> Atrybut Działanie behavior=” scroll|slide|alternate” scroll – napis przesuwa się z prawej strony do lewej. slide – napis przesuwa się do lewego marginesu i zatrzymuje się. alternate – tekst pojawia się z lewej strony, po czym odbija się od marginesów. direction=” right|left” Tylko z atrybutem scroll; określa kierunek animowanego tekstu. loop=” liczba|infinite” Liczba powtórzeń przewinięć tekstu. scrollamount=” liczba” Liczba pikseli, o jaką przesuwa się tekst w pojedynczym kroku. scrolldelay=” milisekundy” Opóźnienie między kolejnymi krokami animacji. bgcolor=”definicja koloru” Zmienia kolor w obszarze, po którym przesuwa się napis. height=”wartość%|piksele” Wymiary obszaru, po którym przesuwa się napis. width=”wartość%|piksele hspace=”piksele” vspace=”piksele” align=”top|middle|bottom” Odległość obszaru od bocznych (hspace) oraz górnej i dolnej krawędzi okna (vspace). Określa wyrównanie tekstu otaczającego względem obszaru, po którym przesuwa się tekst. Nie ma wpływu na położenie tekstu animowanego – ten jest zawsze umieszczany przy górnej krawędzi obszaru. Najważniejsze informacje ‰ Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w „zewnętrznym” układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy – dzięki temu można tworzyć połączenia do ramek oraz stosować nazwy ramek w skryptach. Układ ramek definiowany jest za pomocą znaczników . ‰ Znaczniki i wzajemnie się wykluczają. ‰ Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument html. Każdy z takich dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie niezależne. ‰ Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. Atrybutem znacznika jest src – wartością atrybutu jest adres url dokumentu html, który zostanie umieszczony w danej ramce. ‰ W elemencie frameset określane są następujące cechy układu ramek: sposób podziału okna na ramki, liczba wierszy lub kolumn oraz obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom. ‰ Znacznik przyjmuje dwa atrybuty: cols i rows. Pierwszy z nich, cols, umożliwia określenie liczby kolumn, na które zostanie podzielone okno przeglądarki, a drugi liczby wierszy. ‰ Aby podzielić okno przeglądarki na ramki pionowe, należy zastosować znacznik z atrybutem cols: ‰ Liczba kolumn określana jest liczbą wartości atrybutu cols. Wartości te podawane są kolejno, z przecinkami. Wartości – czyli szerokość ramki – można definiować w pikselach, w procentach (względem całkowitej szerokości układu ramek) oraz za pomocą znaku „*” (w tym przypadku przydzielana jest ramce maksymalna możliwa szerokość). Aby podzielić okno na ramki, o jednakowej szerokości, należy przypisać atrybutowi cols wartości określone za pomocą symbolu ”*”. ‰ Atrybut rows znacznika umożliwia określenie liczby wierszy, na które zostanie podzielone okno przeglądarki – a więc liczby ramek poziomych. Oto postać definicji: ‰ Atrybut target znacznika ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami. Umożliwia kierowanie połączeń na ramki o określonych nazwach. Z tego względu ramkom warto nadawać nazwy, nawet jeśli w danej nie są one konieczne. ‰ Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to konieczne. Aby zablokować przewijanie zawartości ramki, należy umieścić w znaczniku atrybut scrolling i przypisać mu wartość no. ‰ Obramowanie ramek można wykorzystać do zmiany ich rozmiarów. ‰ Aby pozbyć się obramowań, skorzystaj z takiej definicji znacznika: ‰ Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy ramek. Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu frameset w innym elemencie frameset. ‰ Aby zabezpieczyć się przed nieprawidłową obsługą ramek, należy stosować element noframes. Umieszcza się go w obrębie elementu frameset. ‰ Tekst zawarty między znacznikami <noframes> nie będzie wyświetlany tam, gdzie ramki są obsługiwane, a pojawi się w przypadku kłopotów z ich obsługą, umożliwiając wyświetlenie strony w wersji bez ramek. Rozdział 9. HTML a XHTML Co to jest XHTML? ‰ XHTML to EXtensible HyperText Markup Language ‰ XHTML jest niemal identyczny z HTML 4.01 ‰ XHTML ma czystszą formę niż HTML ‰ XHTML jest aplikacją XML XHTML 1.0 jest od 26 stycznia 2000 oficjalnym standardem sieciowym. Rekomendacja W3C oznacza, że specyfikacja jest stabilna i przetestowana. Po co XHTML? W sieci umieszczanych jest coraz więcej stron WWW, rośnie też liczba „złych” stron – stron, napisanych niepoprawnie. Taki kod HTML: TU JEST EWIDENTNY BŁĄD! będzie wyświetlany poprawnie w większości przeglądarek, mimo, że zawiera błąd składni – brakuje w nim znacznika zamykającego . XML nie dopuszcza takich wpadek. Dlatego połączenie języków XML i HTML daje nadzieję na stworzenie dobrego i stabilnego narzędzia. Dokumenty XHTML są interpretowane przez wszystkie urządzenia radzące sobie z językiem XML. XHTML pozwala tworzyć dokumenty o poprawnej strukturze, które działają we wszystkich przeglądarkach i są kompatybilne wstecznie. Czy XHTML wymaga specjalnych przygotowań? XHTML to kolejna generacja języka HTML, ale niewątpliwie trochę czasu upłynie zanim ludzie i urządzenia do niej się dostosują. Trochę, lecz niezbyt wiele. Należy pamiętać, że między HTML 4.01 a XHTML nie ma wiele różnic, nie będzie więc to trudny proces. Podstawowe wymagania to kod pisany małymi literami i zamykanie znaczników – chyba możesz je spełnić. Jakie są najważniejsze różnice między XHTML a HTML? ‰ Elementy XHTML muszą być poprawnie zagnieżdżane ‰ Dokumenty XHTML muszą mieć poprawną formę ‰ Nazwy znaczników muszą być pisane małymi literami ‰ Wszystkie elementy XHTML muszą być zamknięte Co to oznacza konieczność poprawnego zagnieżdżania elementów? W języku HTML wymaganie prawidłowego zagnieżdżania nie musi być restrykcyjnie spełniane. Na przykład wyrażenie sformułowane w HTML tak: Tekst pogrubiony i pisany kursywą... będzie w XHTML absolutnie niepoprawne. W XHTML zagnieżdżenie musi być prawidłowe: Tekst pogrubiony i pisany kursywą... Na przykład częstym błędem w zagnieżdżonych listach jest zapominanie, że lista zagnieżdżona musi być umieszczona w obrębie elementu li. Oto zły zapis: Punkt 1 Punkt 2 Zagnieżdżony 1 Zagnieżdżony 2 Punkt 3 A tutaj poprawny odpowiednik błędnego kodu: Punkt 1 Punkt 2 Zagnieżdżony 1 Zagnieżdżony 2 Punkt 3 W poprawnym przykładzie znacznik został wstawiony za znacznikiem listy zagnieżdżanej. Co oznacza, że dokument musi mieć poprawną formę? Oto wymagania, które określają poprawność formy. Wszystkie elementy XHTML muszą być zagnieżdżone w podstawowym elemencie html. Elementy podrzędne danych elementów stosowane są w parach i są prawidłowo zagnieżdżone w elemencie nadrzędnym. Podstawowa struktura dokumentu prezentuje się tak: ... ... Dlaczego należy stosować małe litery? Konieczność stosowania małych liter wynika z tego, że dokumenty XHTML są aplikacjami XML, a XML to język czuły na wielkość znaku. Tak więc znaczniki i zostaną zinterpretowane jako różne. Zgodnie z tym, zapisz kodu w takiej formie: Tekst jest niepoprawny. Poprawna postać powinna wyglądać tak: Tekst Dlaczego należy pamiętać o znacznikach zamykających? Wszystkie elementy, które nie są puste, muszą mieć znaczniki zamykające. Zgodnie z tym, zapisz kodu w takiej formie: Tekst Kolejny akapit jest niepoprawny. Poprawna postać powinna wyglądać tak: Tekst Kolejny akapit. A co z elementami pustymi? Elementy puste muszą także zostać zaopatrzone w znacznik zamykający lub znacznik otwierający musi kończyć się znakami />. Oto nieprawidłowa postać wyrażenia: Tu dodamy łamanie wiersza A tu pojawi się linia pozioma Poprawny zapis wygląda tak: Tu dodamy łamanie wiersza A tu pojawi się linia pozioma lub Kolejna linia Dodatkowa spacja w zapisie znacznika zamykającego, , jest konieczna, aby zachować zgodność z obecnymi przeglądarkami. Co oznacza stwierdzenie, że XHTM ma czystszą formę? XHTML nie dopuszcza dowolności. Nazwy znaczników i atrybutów muszą być pisane małymi literami, wartości atrybutów muszą być podawane w cudzysłowach, skracanie definicji atrybutu jest niedopuszczalne, atrybut id zastępuje nazwę atrybutu, a DTD definiuje w dokumentach XHTML elementy obowiązkowe. Skoro tak, to zapis: będzie nieprawidłowy z dwóch powodów: nazwa atrybutu pisana jest wielkimi literami, a wartość nie została ujęta w cudzysłowach. Oto zapis poprawny: Rezygnacja z możliwości skróconego zapisu atrybutów oznacza, że nie wolno zapisać tak: Należy zastosować pełną postać zapisu: Co oznacza, że atrybut id zastępuje nazwę? W HTML 4.01 stosowany jest atrybut name, który definiuje nazwy następujących elementów: a, frame, iframe, img i map. W XHTML jego rolę przejmuje atrybut id. Taki zapis będzie w XHTML niepoprawny: A tu postać prawidłowa: W celu zachowania zgodności z obecnymi wersjami przeglądarek, na razie należy stosować oba atrybuty, name i id, z tymi samymi wartościami. Na przykład: Należy także pamiętać o dodatkowej spacji przed /> (patrz uwaga o znacznikach zamykających w XHTML). Co to jest atrybut lang? Atrybut lang jest stosowany niemal z każdym elementem XHTML. Określa on język, w jakim zdefiniowana została zawartość: Kici kici! Jakie są obowiązkowe elementy XHTML? Wszystkie dokumenty XHTML muszą zawierać deklarację DOCTYPE. Obowiązkowe są także elementy html, head i body, a element title musi być zawarty w obrębie elementu head. Oto podstawowy szablon dokumentu XHTML: Zawartość dokumentu Deklaracja DOCTYPE nie jest częścią samego dokumentu XHTML, nie jest też elementem XHTML i nie może mieć znacznika zamykającego. Deklaracja DOCTYPE jest zawsze umieszczana w pierwszym wierszu kodu dokumentu XHTML. Jak wygląda przykładowy dokument XHTML? Oto przykład dokumentu XHTML: Tekst Deklaracja DOCTYPE określa typ dokumentu: Reszta dokumentu wygląda jak zwykły dokument HTML: Tekst Deklaracje typu dokumentu zostały zawarte w dodatku A. Dodatek A. Znaczniki HTML i ich funkcje W tabeli A1 przedstawiono listę znaczników języka HTML 4.01 pogrupowanych zgodnie z ich funkcjami. Sposób definiowania poszczególnych elementów podany został w przykładach. Do każdego elementu dołączony jest krótki opis jego funkcji oraz lista podstawowych atrybutów opcjonalnych (atrybuty standardowe omówione zostały w dodatku C). Dołączono także informacje o wersjach przeglądarek, począwszy od których element jest obsługiwany, oraz o wersji specyfikacji W3C, w której został po raz pierwszy zamieszczony. Tabela A1. Lista znaczników HTML 4.01 w podziale na funkcje. Legenda: NN – Netscape, IE – Internet Explorer, W3C – specyfikacja World Wide Web Consortium Możliwe wartości danego atrybutu są oddzielone znakiem |, np. rows=”piksele|wartość%|*”. Kursywą oznaczona jest wartość atrybutu, którą należy podać w postaci liczby lub tekstu. Znacznik otwierający Przykład Opis NN IE W3C Znaczniki podstawowe Definiuje typ dokumentu. Deklaracja ta powinna pojawić się jako pierwszy Strict DTD Transitional DTD Frameset DTD 3.2 Zawartość dokumentu...... Informuje przeglądarkę, że plik zawiera kod HTML. 3.0 3.0 3.2 Definiuje zawartość dokumentu. 3.0 3.0 3.2 Definiują nagłówki. 3.0 3.0 3.2 Definiuje akapit. 3.0 3.0 3.2 Wprowadza w akapicie złamania wiersza. 3.0 3.0 3.2 Umożliwia wstawienie na stronie linii poziomej. 3.0 3.0 3.2 Znacznik stosowany jest do wstawienia w kodzie HTML komentarza (komentarz jest ignorowany przez przeglądarkę). Komentarz jest pomocny przy wyjaśnianiu funkcji kodu, ale ma jeszcze jedną niezwykle istotną rolę – pozwala wprowadzać do kodu 3.0 3.0 3.2 do To jest nagłówek poziomu 1 To jest nagłówek poziomu 2 To jest nagłówek poziomu 3 To jest nagłówek poziomu 4 To jest nagłówek poziomu 5 To jest nagłówek poziomu 6 To jest akapit. To kolejny akapit. W tym akapicie zła mano wiersz Znacznik hr wprowadza linię poziomą: między akapitami skrypty. Formatowanie znaku Ten tekst jest pisany czcionką pogrubioną Wprowadza formatowanie fizyczne – tekst pogrubiony. 3.0 3.0 3.2 <strong> <strong>Ten tekst też jest pisany czcionką pogrubioną Wprowadza formatowanie logiczne – tekst pogrubiony. 3.0 3.0 3.2 Ten tekst jest pisany kursywą Wprowadza formatowanie fizyczne – kursywa. 3.0 3.0 3.2 <em> <em>Ten tekst będzie wyróżniony Wprowadza formatowanie logiczne – tekst przypominający kursywę. 3.0 3.0 3.2 Tekst wyświetlany Definiuje tekst o większym rozmiarze czcionką powiększoną. czcionki niż tekst otaczający. 3.0 3.0 3.2 <small> <small>Tekst wyświetlany czcionką pomniejszoną 3.0 3.0 3.2 <sup> W tekście pojawi się indeks Definiuje indeks dolny. <sub>dolny 3.0 3.0 3.2 <sub> W tekście umieszczono indeks <sup>górny Definiuje indeks górny. 3.0 3.0 3.2 Tekst będzie pisany na opak! Zmienia kierunek tekstu. Wymagany atrybut dir. 5.0 4.0 Umożliwia wstawienie do tekstu terminu definicji (tekstu o określonym sposobie formatowania, który wyróżnia go względem pozostałego tekstu). 3.0 3.2 Definiuje tekst o mniejszym rozmiarze czcionki niż tekst otaczający. Efekt: !kapo an ynasip eizdębtskeT Ten tekst stanowi termin definicji Jest odradzany. W zamian należy stosować style. Formatowanie tekstu <pre> <pre>Tekst preformatowany W tekście umieszczonym w elemencie 3.0 pre zachowane zostaną odstępy i łamania wierszy. Tekst będzie wyświetlany czcionką o stałej szerokości. 3.0 3.2 Tekst kodu programu Stosowany do prezentacji kodu programu. Tekst będzie wyświetlany 3.0 3.2 3.0 czcionką o stałej szerokości. Tekst pisany czcionką o Stosowany do prezentacji kodu stałej szerokości programu. 3.0 3.0 3.2 Tekst pisany czcionką komputerową Stosowany do prezentacji kodu programu. 3.0 3.0 3.2 Zmienna Stosowany do prezentacji kodu programu – wskazuje nazwę zmiennej. 3.0 3.0 3.2 <samp> <samp>Tekst przykładowy Stosowany do prezentacji kodu programu lub tekstu przykładowego. Efekt podobny, jak w przypadku . 3.0 3.0 3.2 4.0 4.0 Element definiuje blok adresu. Można 4.0 wykorzystać go także do formatowania sygnatur. Zazwyczaj tekst wyświetlany jest kursywą, a pod i nad adresem przeglądarka doda pusty wiersz. Łamania wierszy w samym adresie musisz definiować sam, tak jak w przykładzie. 4.0 3.2 3.0 Element blockquote pozwala definiować długie cytaty, a element q cytaty krótkie. W przypadku długich cytatów przeglądarka wstawi łamania wierszy i marginesy, natomiast krótkie cytaty zostaną wyświetlone bez jakichkolwiek dodatków. 3.0 3.2 4.0 4.0 Są odradzane. W zamian zaleca się stosować znacznik <pre>. &lt;listing> &lt;xmp><br /> <br /> Blok tekstu <acronym rel="nofollow"><br /> <br /> <acronym title="World Wide Web" rel="nofollow"> WWW </acronym><br /> <br /> W niektórych przeglądarkach wartość atrybutu title można wykorzystać do wyświetlenia pełnego tekstu skrótu. Pojawi się on po umieszczeniu nad skrótem wskaźnika myszki (w przykładzie obok, nad skrótem WWW). Element acronim pozwala nadać tekstowi strukturę.<br /> <br /> <address rel="nofollow"><br /> <br /> <address rel="nofollow"> Jan Kowalski<br> Gliwice<br> ul. Zwycięstwa 888</address><br /> <br /> <blockquo te>, <q><br /> <br /> <html> <body> Oto tekst cytowany: <blockquote> To cytat. To cytat. To cytat. To cytat. To bardzo długi cytat. </blockquote><br /> <br /> Atrybuty opcjonalne elementu blockquote:<br /> <br /> A teraz niezbyt długi cytat:<br /> <br /> cite=”url” – adres URL strony, z<br /> <br /> której pochodzi cytowana informacja.<br /> <br /> <q> A to cytat. </q> </body> </html> <cite><br /> <br /> <cite>Tekst cytatu</cite><br /> <br /> <ins><br /> <br /> zapadało<ins>osiemdziesiąt< Umożliwia zaznaczenie tekstu /ins> procent dróg wstawionego. Stosuj z &lt;del>, aby<br /> <br /> Do tekstu zastosowane zostanie 3.0 wyróżnienie przypominające kursywę.<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> opisać aktualizacje i modyfikacje kolejnych wersji dokumentu. Tekst zawarty w tym elemencie będzie wyświetlany jako podkreślony. Atrybuty opcjonalne: cite=”url” – pozwala wstawić<br /> <br /> połączenie do dokumentu, w którym zmiany zostały wyjaśnione. daytime=”yyyymmdd” – określa czas wprowadzenia zmian &lt;del><br /> <br /> zapadało&lt;del>osiemdziesiąt< Umożliwia zaznaczenie tekstu /del> procent dróg usuniętego. Tekst będzie wyświetlany<br /> <br /> jako przekreślony. Atrybuty opcjonalne takie same jak dla elementu ins. &lt;strike>, &lt;s><br /> <br /> Odradzane. Stosuj w zamian &lt;del>.<br /> <br /> Połączenia <a><br /> <br /> <a href="stronaX.html" rel="nofollow">Oto połączenie </a>do strony X danej witryny.<br /> <br /> Efekt: Oto połączenie do strony X danej witryny.<br /> <br /> Definiuje zakotwiczenie. Umożliwia ono tworzenie połączeń do innych dokumentów oraz tworzenie połączeń do określonych miejsc w tym samym dokumencie. Ważniejsze atrybuty opcjonalne:<br /> <br /> href=”url” – połączenie do innego <a href="http://www.microsoft. dokumentu com/" rel="nofollow"> Oto połączenie</a> do<br /> <br /> 3.0<br /> <br /> strony w Internecie.<br /> <br /> Efekt: Oto połączenie do strony w Internecie. <a href=" http://main.magsoft.com.pl/ ~rsokol/"<br / rel="nofollow"> <br /> name=”nazwa_sekcji” – definiuje<br /> <br /> nazwę zakotwiczenia, z której można korzystać w atrybucie href . Dzięki zakotwiczeniom o zdefiniowanych nazwach możesz definiować połączenia do określonej sekcji strony.<br /> <br /> target="_blank">Odwiedź nas!!</a><br /> <br /> target = “_blank|_parent|_self|_top” –<br /> <br /> Aby utworzyć połączenie do określonej sekcji danej strony, zdefiniuj zakotwiczenie i jego nazwę:<br /> <br /> określa miejsce otwarcia strony: w nowym oknie | w oknie nadrzędnym | w bieżącej ramce lub oknie | w pełnym oknie na wierzchu stosu.<br /> <br /> <a name="opis" rel="nofollow">Opis </a><br /> <br /> A potem w dowolnym miejscu strony wstaw połączenie do sekcji o zdefiniowanej nazwie: < a href="#opis">Przeczytaj opis</a> <link><br /> <br /> W przykładzie pokazano zastosowanie znacznika w definiowaniu połączenia do zewnętrznego arkusza stylów: <head> <link rel="stylesheet" type="text/css" href="theme.css"><br /> <br /> </head><br /> <br /> Określa relację pomiędzy dwoma 4.0 dokumentami. Jest elementem pustym – oznacza to, że zawiera tylko atrybuty. Umieszczany jest w sekcji head i może pojawiać się wielokrotnie.<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> Znacznik zamykający jest zabroniony. Niektóre atrybuty opcjonalne: href=”url” – adres do innego<br /> <br /> dokumentu. target = “_blank|_parent|_self|_top” –<br /> <br /> określa miejsce otwarcia strony: w nowym oknie | w oknie nadrzędnym | w bieżącej ramce lub oknie | w pełnym oknie na wierzchu stosu. type=”typ_MIME|text/css|text /javascript” – określa typ MIME. Ramki <frameset><br /> <br /> Prosty układ pionowych ramek: <frameset cols="25%,75%"><br /> <br /> Definiuje układ ramek i sposób podziału okna przeglądarki na<br /> <br /> 3.0<br /> <br /> <frame src="ramka_a.html"> <frame src="ramka_b.html"> </frameset><br /> <br /> Prosty układ poziomych ramek: <frameset rows="25%,50%,25%"> <frame src="ramka_a.html"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset><br /> <br /> Złożony układ ramek: <frameset rows="50%,50%"><br /> <br /> poszczególne ramki. Każda z ramek (kreowanych przez elementy frame) wyświetla osobny dokument – definiujesz go korzystając z atrybutu src. Element frameset zastępuje element body. Pamiętaj o przygotowaniu plików HTML – każda ramka to osobny plik. Atrybuty opcjonalne: cols=”piksele|wartość%|*” – określa liczbę kolumn układu ramek i ich rozmiar: w pikselach | w procentach szerokości całego układu ramek | względem pozostałych ramek. rows=”piksele|wartość%|*” – określa liczbę wierszy układu ramek i ich rozmiar w pikselach | w procentach szerokości całego układu ramek | względem pozostałych ramek.<br /> <br /> <frame src="ramka_a.html"> <frameset cols="25%,75%"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset> </frameset> <frame><br /> <br /> Patrz przykład powyżej<br /> <br /> Definiuje ramkę. Korzystając z ramek 3.0 nie stosuj elementu body – zastępuje go frameset. Atrybuty opcjonalne: longdesc=”url” – połączenie do<br /> <br /> dokumentu zawierającego opis ramki; przydatne w przypadku przeglądarek, które nie obsługują ramek. marginheight=”piksele” –<br /> <br /> szerokość marginesu w pionie marginwidth=”piksele” – szerokość marginesu w poziomie frameborder=”0|1” – wyświetlanie<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> obramowania (wartość 1) lub wyłączanie go (wartość 0). noresize=”true|false” – umożliwienie użytkownikowi zmiany rozmiarów ramki – wartość true (lub zablokowanie tej opcji – wartość false) scrolling=”yes|no|auto” –<br /> <br /> włączanie przewijania zawartości (włączone przewijanie, wyłączone i wprowadzane automatycznie, gdy zawartość obszerna) name=”nazwa” – nazwa ramki src=”nazwa_pliku|url” – plik, którego zawartość pojawi się w ramce &lt;noframes><br /> <br /> <frameset cols = "25%, 25%,*"> &lt;noframes>Opis zawartości ramek lub inna informacja</noframes> <frame src ="plik1.html"> <frame src ="plik2.html"> <frame src ="plik3.html"> </frameset><br /> <br /> Ten element przeznaczony jest dla przeglądarek, które nie obsługują ramek. Umieszczany jest w obrębie elementu frameset. i zawiera informację zastępczą.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> &lt;iframe><br /> <br /> <html><br /> <br /> Definiuje ramkę wpisaną – jest to ramka w obrębie strony WWW. Nie wszystkie przeglądarki obsługują ten element.<br /> <br /> 6.0<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> <body> &lt;iframe src ="plik.html" width="500" scrolling="yes"> </iframe> </body> </html><br /> <br /> Atrybuty opcjonalne: src=”url” – określa adres dokumentu, który zostanie wyświetlony w ramce wpisanej. height=”piksele” – wysokość<br /> <br /> ramki w pikselach. width=”piksele” – szerokość<br /> <br /> ramki w pikselach. name=”nazwa_ramki” longdesc=”url” – adres<br /> <br /> dokumentu, w którym umieszczono opis zawartości ramki marginheight=”piksele” –<br /> <br /> szerokość marginesu w pionie marginwidth=”piksele” – szerokość marginesu w poziomie frameborder=”0|1” – wyświetlanie<br /> <br /> obramowania scrolling=”yes|no|auto” –<br /> <br /> włączanie przewijania zawartości Wprowadzanie danych – formularze <form><br /> <br /> <form action="http://www.uiuc.edu /cgi-bin/post-query" method="post" target="_blank"> Imię: <input type="text" name="imie"> <br> Nazwisko: <input type="text" name="nazwisko"> <br> <input type="submit" value="Prześlij"><br /> <br /> Definiuje formularz. Może on zawierać pola tekstowe, pola wyboru, przyciski opcji, itp. Formularze pozwalają przesyłać dane do serwera w celu ich dalszej obróbki.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Atrybut wymagany: action=”url” – określa miejsce przesłania danych po naciśnięciu przez użytkownika przycisku submit. Może to być adres serwera, na którym rezyduje skrypt CGI dekodujący dane formularza (patrz przykład) lub wyrażenie mailto:adres@pocztowy).<br /> <br /> Niektóre atrybuty opcjonalne:<br /> <br /> <input type="reset" value="Wyczyść"><br /> <br /> method=”get|post” – metoda HTTP przesyłania danych do serwera.<br /> <br /> </form><br /> <br /> Metoda get jest metodą domyślną. Jeśli formularz zawiera znaki inne niż ASCII lub więcej niż 100 znaków, musi korzystać z metody post. enctype=”typ_MIME” – typ MIME stosowany do kodowania zawartości formularza. target=”_blank|_self|_parent |_top” – miejsce otwierania<br /> <br /> dokumentów: w nowym oknie | w oknie nadrzędnym | w bieżącej ramce lub oknie | w pełnym oknie na wierzchu stosu. <input><br /> <br /> Pole tekstowe: <form><br /> <br /> Definiuje pole wprowadzania danych. Jest to element pusty – zawiera<br /> <br /> Imię: <input type="text" name="imie"> <br> Nazwisko: <input type="text" name="nazwisko"> </form><br /> <br /> Przyciski opcji:<br /> <br /> wyłącznie atrybuty. Nie stosuje się znacznika zamykającego. Atrybuty opcjonalne: type=”text|checkbox|radio|pa ssword|hidden|submit|reset|b utton|file|image” – typ pola danych; domyślnym typem jest text<br /> <br /> (tekst | pole wyboru | opcja | hasło | pole ukryte | przycisk przesyłania danych | przycisk czyszczenia zawartości | przycisk | plik | obraz).<br /> <br /> <form><br /> <br /> accept=”typ_pliku” – stosowany<br /> <br /> <input type="radio" name="opcja" value="kot"> Kot<br /> <br /> gdy type=”file”. name=”nazwa_pliku” – nazwa<br /> <br /> <input type="radio" name="opcja" value="pies"> Pies<br /> <br /> pola; przyciski opcji są grupowane poprzez nadawanie im tych samych nazw, dzięki czemu możliwe jest wybranie tylko jednego przycisku z grupy.<br /> <br /> </form><br /> <br /> value=”wartość” – w przypadku<br /> <br /> Pola wyboru:<br /> <br /> pól wyboru i przycisków opcji określa wartość zwracaną po przekazaniu kontroli; w przypadku przycisków, umożliwia podanie tekstu, którym przycisk jest opisany; w przypadku pól typu hidden, password i text określa wartość domyślną.<br /> <br /> <br><br /> <br /> <form> <input type="checkbox" name="lady">Kobieta <br> <input type="checkbox" name="man">Mężczyzna<br /> <br /> size=”liczba_znaków” – pozwala określić rozmiar pola w znakach </form> (domyślna wartość to 20); stosowany Przycisk wysyłania formularza: dla pól typu password i text. Zamiast liczby można stosować znak <form name="input" action="http://www.myserver #. .com.cgi-bin/uploadit/" method="get"> Użytkownik: <input type="text" name="user"> <input type="submit" value="Prześlij"> </form><br /> <br /> Formularz wysyłający list e-mail:<br /> <br /> maxlenght=”liczba” – określa maksymalną liczbę znaków, jaką użytkownik może wpisać w polu typu text lub password. checked=”checked” – wskazuje domyślnie wybrany przycisk opcji readonly=”readonly” – określa, że zawartość pola tekstowego nie podlega zmianie. src=”url” – adres pliku<br /> <br /> <html> <body><br /> <br /> zawierającego obraz; stosowany dla pól typu image.<br /> <br /> disabled=”disabled” – określa, <form że użytkownik nie ma żadnych action="MAILTO:adres@poczto uprawnień w stosunku do tego pola. wy " method="post" enctype="text/plain"> <h3>Ten formularz wyśle email pod wskazany adres.</h3> Imię:<br><input type="text" name="imie" value="Wpisz swoje imię" size="20"><br> Adres e-mail:<br><input type="text" name="mail"value="Podaj adres e-mail" size="20"><br> Uwagi:<br><input type="text" name="uwagi" value="Twoje uwagi" size="40"><br><br> <input type="submit" value="Wyślij"><input type="reset" value="Wyczyść"> </form> </body> </html> <textarea><br /> <br /> Definiuje wielowierszowe pole tekstowe. W takim polu użytkownik może wprowadzać dowolnie długi tekst. Wymagane atrybuty: cols=”liczba” – szerokość pola w<br /> <br /> znakach rows=”liczba” – wysokość pola w<br /> <br /> znakach Atrybuty opcjonalne: disabled=”disabled” –<br /> <br /> uniemożliwia korzystanie z pola tekstowego. name=”nazwa_pola”<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> readonly=”readonly” –<br /> <br /> użytkownik nie może zmieniać zawartości pola Definiuje przycisk. W obrębie elementu button możesz umieścić tekst lub obraz – na tym polega różnica pomiędzy elementem button a przyciskami utworzonymi za pomocą elementu input.<br /> <br /> <button><br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Atrybuty opcjonalne: disabled=”disabled” – przycisk<br /> <br /> niedostępny dla użytkownika type=”button|reset|submit” –<br /> <br /> definiuje typ przycisku name=”nazwa_przycisku” – określa nazwę przycisku, dzięki czemu można odwoływać się do niej w skryptach i formularzach. value=”dowolna_wartość” –<br /> <br /> określa wartość domyślną, którą można modyfikować za pomocą skryptu &lt;select><br /> <br /> &lt;select> <option value ="kot">Kot <option value ="pies">Pies <option value ="rybka">Rybka <option value ="krokodyl">Krokodyl </select><br /> <br /> Element select definiuje pole listy rozwijanej.<br /> <br /> 3.0<br /> <br /> Atrybuty opcjonalne: disabled=”disabled” –<br /> <br /> uniemożliwia użytkownikowi korzystanie z listy multiple=”true|false” – określa, czy użytkownik może wybrać więcej niż jedną pozycję z listy (true – tak, false – nie). name”tekst” – nazwa listy. size=”liczba” – określa liczbę wyświetlanych pozycji listy<br /> <br /> <optgroup><br /> <br /> &lt;select> <optgroup label="Samochody"> <option value ="volvo">Fiat <option value ="Syrena">Mercedes<br /> <br /> Grupuje opcje. Atrybuty opcjonalne: disabled=”disabled” – wyłącza<br /> <br /> grupę opcji<br /> <br /> 6.0<br /> <br /> 4.0<br /> <br /> </optgroup> <optgroup label="Dobre samochody"> <option value ="mercedes">Maluch <option value ="audi">Syrena </optgroup> </select> <option><br /> <br /> label=”tekst” – etykieta grupy<br /> <br /> opcji<br /> <br /> Patrz przykład dla elementu select Jest to pozycja listy zdefiniowanej za pomocą elementu select.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> Element ten można stosować bez atrybutów, aczkolwiek zazwyczaj konieczny jest atrybut value, który określa, co zostanie przesłane do serwera. Znacznik ten stosowany jest w elemencie form – poza nim nie ma sensu. Atrybuty opcjonalne: disabled=”disabled” – wyłącza<br /> <br /> możliwość wyboru opcji. label=”tekst” – etykieta opcji. value=”tekst” – określa wartość<br /> <br /> opcji selected=”selected” – wskazuje<br /> <br /> domyślnie wybraną pozycję listy. <label><br /> <br /> <form> <label for="Imie" accesskey="I"><u>I</u>mię:< /label> <input type="text" id="Imie" size=30><br /> <br /> Umożliwia zdefiniowanie etykiet dla pól formularza. Atrybuty opcjonalne: for=”id_pola” – wskazuje element, któremu przyporządkowana zostanie etykieta.<br /> <br /> <label for="email" accesskey="E"><u>E</u>mail: accesskey=”klawisz” – określa </label> <input type="text" klawisz skrótu klawiaturowego id="Email" size=30> Alt+klawisz, który pozwoli na <label for="Tel" accesskey="T"><u>T</u>el:</ label> <input type="text" id="Tel" size=30> <label for="uwagi"<br /> <br /> uaktywnienie pola i automatyczne przeniesienie do niego punktu wstawiania. W przykładzie naciśnięcie skrótu Alt+E spowoduje uaktywnienie pola Email.<br /> <br /> accesskey="C"><u>C</u>o powiesz:</label> <textarea id="uwagi" cols="10" rows="2"></textarea> </form> <fieldset><br /> <br /> <fieldset> Waga <input type="text" size="3"> Wzrost<input type="text" size="3"> </fieldset><br /> <br /> Pozwala umieścić obramowanie wokół tekstu i innych elementów. Stosowany tylko w formularzach.<br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> <legend><br /> <br /> <fieldset><br /> <br /> Pozwala dołączyć etykietę do elementu fieldset. Stosowany tylko w formularzach.<br /> <br /> 4.0<br /> <br /> 4.0<br /> <br /> <legend>Informacje o wadze i wzroście:</legend> Waga <input type="text" size="3"> Wzrost<input type="text" size="3"> </fieldset><br /> <br /> Ten element jest odradzany. Stosuj w zamian <input>.<br /> <br /> <isindex><br /> <br /> Listy <ul><br /> <br /> <ul> <li>Amelia</li> <li>Gladiator</li> </ul><br /> <br /> Definiuje listę wypunktowaną – jej pozycje oznaczone są znakami wypunktowania.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <ol><br /> <br /> <ol> <li>Amelia</li> <li>Gladiator</li> </ol><br /> <br /> Definiuje listę numerowaną – jej pozycje oznaczone są liczbami.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <li><br /> <br /> Patrz przykłady dla elementów ul i ol.<br /> <br /> Definiuje pozycję listy.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <dl><br /> <br /> <dl> <dt>Kot</dt> <dd>Mały drapieżnik futerkowy</dd> <dt>Człowiek</dt> <dd>Duży drapieżnik</dd> </dl><br /> <br /> Definiuje listę definicji.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <dt><br /> <br /> Patrz przykład dla elementu dl.<br /> <br /> Definiuje termin na liście definicji.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <dd><br /> <br /> Patrz przykład dla elementu dl.<br /> <br /> Definiuje wyjaśnienie terminu z listy definicji.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <dir>, &lt;menu><br /> <br /> Odradzane. W zamian stosuj <ul>.<br /> <br /> Obrazy <img><br /> <br /> <p>To jest moje zdjęcie: <img border="0" src="mary.gif" alt="Mary"></p><br /> <br /> Pozwala wstawić obraz.<br /> <br /> Obraz jako mapa odnośników:<br /> <br /> ulokowanie pliku zawierającego obraz.<br /> <br /> <p>Kliknij na jednej z planet Układu:</p> <img src ="images/planets.gif" width ="145" height ="126" usemap ="#planetmap"> &lt;map name ="planetmap"> &lt;area shape ="rect" coords ="0,0,82,126" href ="sun.html" target ="_blank"> &lt;area shape ="circle" coords ="90,58,3" href ="mercur.html" target ="_blank"> &lt;area shape ="circle" coords ="124,58,8" href ="venus.html" target ="_blank"> </map><br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Definiuje obraz jako mapę odsyłaczy 3.0 (obraz podzielony na obszary aktywne o funkcjach połączeń). Nazwa stosowana w elemencie map występuje jako wartość atrybutu<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Wymagane atrybuty: src=”url” – tu podajesz<br /> <br /> alt=”tekst” – krótki opis obrazu<br /> <br /> (tak zwany tekst alternatywny). Atrybuty opcjonalne: longdesc=”url” – stosowany, gdy<br /> <br /> konieczne skierowanie użytkownika do dokumentu zawierającego długi komentarz tekstowy dotyczący obrazu. vspace=”piksele” – wolny obszar<br /> <br /> u góry/dołu obrazu. hspace=”piksele” – wolny obszar z lewej/prawej strony obrazu. align=”top|bottom|middle|lef t|right” – wyrównanie obrazu<br /> <br /> względem otaczającego tekstu. usemap=”url” – definiuje obraz jako mapę odsyłaczy działającą po stronie klienta. ismap=”url” – definiuje obraz jako mapę odsyłaczy działającą po stronie serwera. height=”piksele|wartość%” – określa wysokość obrazu w pikselach lub względem rzeczywistego rozmiaru obrazu. width=”piksele|wartość%” –<br /> <br /> określa szerokość obrazu w pikselach lub względem rzeczywistego rozmiaru obrazu. &lt;map><br /> <br /> Patrz przykład dla elementu img.<br /> <br /> usemap znacznika <img>.<br /> <br /> Atrybut opcjonalny: name=”nazwa_mapy”<br /> <br /> Patrz przykład dla elementu img.<br /> <br /> Definiuje obszar aktywny mapy odsyłaczy. Jest to element pusty, zawierający jedynie atrybuty. Zawsze jest zagnieżdżony w elemencie map. Znacznik zamykający jest zabroniony.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Atrybut wymagany:<br /> <br /> &lt;area><br /> <br /> alt=”tekst” – tekst alternatywny.<br /> <br /> Atrybuty opcjonalne: coords=x,y,r| x1,y1,..xn,yn|x1,y1,x2,y2 –<br /> <br /> współrzędne określające obszar: współrzędne środka okręgu i promień | współrzędne wierzchołków wielokąta | dla prostokąta: współrzędne wierzchołków lewego górnego i prawego dolnego. shape=”circle|poly|rect|defa ult” – definiuje kształt obszaru:<br /> <br /> okrąg | wielokąt | prostokąt | domyślny. href=”url” – adres URL do<br /> <br /> dokumentu, do którego prowadzi połączenie stowarzyszone z obszarem aktywnym. nohref=”true|false” – wyłącza<br /> <br /> obszar z mapy odsyłaczy. target = “_blank|_parent|_self|_top” –<br /> <br /> określa miejsce otwarcia dokumentu po kliknięciu obszaru aktywnego: w nowym oknie | w oknie nadrzędnym | w bieżącej ramce lub oknie | w pełnym oknie na wierzchu stosu. Stosowany z atrybutem href. <html> <head> <title>Tabela</title> </head> <body><br /> <br /> Tworzy tabelę – jest „opakowaniem” pozostałych elementów. Domyślnie tabele nie mają obramowań.<br /> <br /> <table><br /> <br /> <table> <caption>Podpis tabeli</caption> <!--Pierwszy wiersz – ma komórki nagłówka --> <tr> <th>NAGŁÓWEK</th> <th>NAGŁÓWEK</th> </tr> <!--Drugi wiersz to dwie komórki danych --> <tr> <td>DANE</td> <td>DANE</td> </tr> <!--kontynuuj dodawanie kolejnych wierszy i komórek --> </table> </body> </html><br /> <br /> Atrybuty opcjonalne: border=”piksele” –szerokość obramowania w pikselach cellspacing=”piksele|wart o••%” – wolny obszar między komórkami. cellpadding=”piksele|warto••% ” – wolny obszar między krawędziami komórki a zawartością width=”piksele|warto••%” – szerokość tabeli w pikselach lub względna. frame=”void|above|below|hsid es|lhs|rhs|vsides|box|border ” – elementy zewnętrznego<br /> <br /> obramowania; aby atrybut działał, konieczne zdefiniowanie także atrybutu border. rules=”none|groups|rows|cols |all|basic” – poziome i pionowe<br /> <br /> linie dzielące tabelę; także wymagane zdefiniowanie atrybutu border. <caption><br /> <br /> Patrz przykład dla elementu table.<br /> <br /> Podpis tabeli informuje o zawartości tabeli. Jest opcjonalny i umieszczany w obrębie elementu table, przed definicjami wierszy.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <th><br /> <br /> Patrz przykład dla elementu table.<br /> <br /> Komórka nagłówka. Od komórki danych różni się tym, że zastosowano w niej czcionkę pogrubioną i wycentrowanie.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Atrybuty opcjonalne: abbr=”tekst” – skrócona wersja<br /> <br /> zawartości. align=”left|right|center|jus tify|char” – poziome wyrównanie<br /> <br /> zawartości komórki. char=”znak” – znak, względem którego tekst zostanie wycentrowany w przypadku zastosowania atrybutu align=”char”. colspan=”liczba_kolumn” –<br /> <br /> liczba kolumn, na których komórka jest rozpięta. rowspan="liczba_wierszy" – liczba wierszy, na których komórka jest rozpięta. valign=”top|middle|bottom|ba seline” – wyrównanie zawartości<br /> <br /> komórki w pionie. width=”piksele|wartość%” – szerokość komórki; odradzany; w zamian stosuj styl, np.: <th style="width:100px"> height=”piksele|%” – wysokość komórki; odradzany; w zamian stosuj styl, np.: <th style="height:100px"><br /> <br /> <tr><br /> <br /> Patrz przykład dla elementu table.<br /> <br /> Wiersz tabeli.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Atrybuty opcjonalne: align=”left|right|center|jus tify|char” – poziome wyrównanie<br /> <br /> zawartości. valign=”top|middle|bottom|ba seline” – wyrównanie zawartości w<br /> <br /> pionie. <td><br /> <br /> Patrz przykład dla elementu table.<br /> <br /> Komórka tabeli. Komórki umieszcza się między znacznikami wiersza tabeli. Atrybuty opcjonalne: abbr=”tekst” – skrócona wersja<br /> <br /> zawartości. align=”left|right|center|jus tify|char” – poziome wyrównanie<br /> <br /> zawartości komórki. char=”znak” – znak, względem którego tekst zostanie wycentrowany w przypadku zastosowania atrybutu align=”char”. colspan=”liczba_kolumn” –<br /> <br /> liczba kolumn, na których komórka<br /> <br /> jest rozpięta. rowspan="liczba_wierszy" – liczba wierszy, na których komórka jest rozpięta. valign=”top|middle|bottom|ba seline” – wyrównanie zawartości<br /> <br /> komórki w pionie. width=”piksele|wartość%” – szerokość komórki; odradzany; w zamian stosuj styl, np.: <td style="width:100px"> height=”piksele|wartość%” –<br /> <br /> wysokość komórki; odradzany; w zamian stosuj styl, np.: <td style="height:100px"> <thead>, <tbody>, <tfoot><br /> <br /> <col><br /> <br /> <table border = "1"> <thead> <tr> <td>Ten tekst znajduje się w obszarze THEAD</td> </tr> </thead> <tfoot> <tr> <td>Ten tekst znajduje się w obszarze TFOOT</td> </tr> </tfoot> <tbody> <tr> <td>Ten tekst znajduje się w obszarze TBODY</td> </tr> </tbody> </table><br /> <br /> Nagłówek – tworzą go zgrupowane wiersze, obszar treści tabeli oraz stopka – utworzona podobnie jak nagłówek ze zgrupowanych wierszy. Taki podział umożliwia przeglądarkom obsługę przewijania obszaru treści tabeli niezależnie od przewijania nagłówka i stopki. Elementy te są jednak rzadko używane ze względu na niedostateczną obsługę w przeglądarkach.<br /> <br /> 4.0<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> Elementy thead, tbody i tfoot są umieszczane – w tej właśnie kolejności – w elemencie table.<br /> <br /> W tym przykładzie każda kolumna z Umożliwia zdefiniowanie wartości grupy kolumn ma inną szerokość: atrybutów dla kolumn tabeli. Stosuj, <table border="1"> gdy chcesz do grupy kolumn <colgroup span="3"> zastosować inne atrybuty niż do <col width="20"> reszty. Jest to element pusty. <col width="50"> Znacznik zamykający jest <col width="80"> zabroniony. </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><br /> <br /> 4.0<br /> <br /> Atrybuty opcjonalne: align=”left|right|center|jus tify|char” – poziome wyrównanie<br /> <br /> zawartości komórki kolumny.<br /> <br /> </table><br /> <br /> char=”znak” – znak, względem którego tekst zostanie wycentrowany w przypadku zastosowania atrybutu align=”char”. valign=”top|middle|bottom|ba seline” – wyrównanie zawartości<br /> <br /> komórki kolumny w pionie. width=”piksele|wartość%|wzgl ędna_wartość” – szerokość<br /> <br /> kolumny; dominuje nad ustawieniami dokonanymi w colgroup. span=”liczba” – liczba kolumn, do których ustawienia określone w elemencie col są stosowane. <colgroup ><br /> <br /> W tym przykładzie tworzona jest tabela o 4 kolumnach – 3 z nich tworzą jedną grupę, a czwarta drugą. Do grup zastosowano różne atrybuty: <table border="1"> <colgroup span="3" style="color:#FF0000;"> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table><br /> <br /> Definiuje grupę kolumn, na przykład w celu zróżnicowania formatowania grup kolumn. Element umieszcza się w obrębie elementu table.<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Atrybuty opcjonalne: align=”left|right|center|jus tify|char” – poziome wyrównanie<br /> <br /> zawartości komórek w grupie kolumn. char=”znak” – znak, względem którego tekst zostanie wycentrowany w przypadku zastosowania atrybutu align=”char”. valign=”top|middle|bottom|ba seline” – wyrównanie zawartości<br /> <br /> komórek grupy kolumn w pionie. width=”piksele|wartość%|wzgl ędna_wartość” – szerokość<br /> <br /> kolumn; ustawienia wprowadzone w elemencie col dominują nad tymi. span=”liczba” – liczba kolumn.<br /> <br /> Style &lt;style><br /> <br /> Przykład formatowania dokumentu za pomocą stylów zdefiniowanych w elemencie style : <html> <head> &lt;style><br /> <br /> Definiuje styl w dokumencie. Umieszczany jest w sekcji head. Atrybuty: type=”text/css| text/javascript”<br /> <br /> 4.0<br /> <br /> h1 {color: red} h3 {color: blue} </style> </head> <body> <h1>Nagłówek 1</h1> <h3>Nagłówek 3</h3> </body> </html><br /> <br /> Przykład osadzonego arkusza stylów: <head> &lt;style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head><br /> <br /> Zewnętrzny arkusz stylów: <head> <link rel="stylesheet" type="text/css" href="moj_styl.css"> </head><br /> <br /> Styl wpisany: <p style="color: red; margin-left: 20px"> To jest akapit! </p> <div><br /> <br /> To jest tekst <div style="color:#FF0000;">Ten fragment jest pisany czcionką w kolorze czerwonym i stanowi sekcję dokumentu. Znacznik <div> wstawia łamanie wiersza przed i za sekcją. Tu sekcja div kończy się. </div> Ten tekst jest już innego koloru - sprawdź.<br /> <br /> 3.0 Element div definiuje sekcję dokumentu. Umożliwia to stosowanie do sekcji różnych stylów. Przeglądarki zazwyczaj wprowadzają przed i za sekcją łamanie wiersza.<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> &lt;span><br /> <br /> <p>To jest tekst akapitu &lt;span style="color:#0000FF;">Tu wydzielono sekcję w kolorze niebieskim.</span> Dalej tekst akapitu jest znów czarny.</p><br /> <br /> 4.0 Element span definiuje sekcję dokumentu. Umożliwia to stosowanie do sekcji różnych stylów. Przeglądarki zazwyczaj nie wprowadzają przed i za sekcją łamania wiersza.<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <font> <basefont> <center><br /> <br /> Odradzane. Zastąp je stylami.<br /> <br /> Informacje o dokumencie <head><br /> <br /> <title><br /> <br /> 3.0 Element head może zawierać informacje o dokumencie – nie są one przez przeglądarkę wyświetlane (poza tytułem, który pojawi się na pasku tytułu). Umieszczane są w nim następujące znaczniki: <base>, <link>, &lt;meta>, &lt;script>, &lt;style> i <title>.<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Definiuje tytuł dokumentu. Tytuł <title>Tutuł strony</title> będzie wyświetlany na pasku tytułu przeglądarki.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Ten element meta zawiera słowa kluczowe dla wyszukiwarek:<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> <head><br /> <br /> </head> &lt;meta><br /> <br /> &lt;meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML"><br /> <br /> Ten element meta zawiera opis strony:<br /> <br /> W elemencie meta umieszczane są opisy i słowa kluczowe wykorzystywane przez serwisy wyszukujące. Znacznik zamykający jest zabroniony. Atrybut wymagany:<br /> <br /> content=”tekst” – dostarcza informacji, które są stowarzyszone z &lt;meta name="description" content="Strona o HTML, XML atrybutami name i http-equiv. i XHTML"><br /> <br /> Tu umieszczono informacje o ostatniej aktualizacji strony: &lt;meta name="revised" content="dane_autora, 6/10/99"><br /> <br /> Atrybuty opcjonalne:<br /> <br /> name=”author|description|key words|generator|revised|inne ” – definiuje nazwę obiektu meta. http-equiv=”contenttype|expires|refresh|setcookie” – definiuje dodatkową<br /> <br /> Tu wykorzystano znacznik meta do załadowania innej strony: akcję, która być wykonana (w przykładzie obok będzie to &lt;meta http-equiv=”refresh” załadowanie innej strony po czasie content="6";url=http://nowy równym 6 sekund). adres.com/strona.html”> <base><br /> <br /> Definiowanie odwołania domyślnego do zasobów zewnętrznych:<br /> <br /> Definiuje domyślne odwołanie do zasobów zewnętrznych.<br /> <br /> Jeśli strona stanowi układ ramek, można zastosować element base z atrybutem target, aby wskazać wszystkim połączeniom na stronie konkretną ramkę, w której dokumenty <base href="http://adres_url_zaso będą otwierane. bu.com/"> Jeśli strona nie jest układem ramek,<br /> <br /> W sekcji head umieść element base i podaj w nim pełny adres URL zasobu:<br /> <br /> element base z atrybutem href W dokumencie wystarczy już podać pozwoli zdefiniować odwołanie do tylko adres względny: zewnętrznych zasobów, takich jak <img src="images/mary.gif"> dokumenty, obrazy i arkusze stylów. Znacznik zamykający jest zabroniony. Atrybuty opcjonalne: href=”url” – definiuje pełny adres URL dla połączeń korzystających z adresowania względnego. target = “_blank|_parent|_self|_top” –<br /> <br /> określa miejsce otwarcia dokumentu: w nowym oknie | w oknie nadrzędnym | w bieżącej ramce lub oknie | w pełnym oknie na wierzchu stosu. Programowanie &lt;script><br /> <br /> &lt;script type="text/javascript"> <!-document.write("Hej, to ja!") //--> </script><br /> <br /> Umożliwia umieszczenie w dokumencie skryptu, na przykład skryptu JavaScript. Kod zawarty w tym elemencie jest wykonywany natychmiast po załadowaniu strony (o ile nie jest funkcją). Skrypty pojawiające się za znacznikiem <frameset> będą ignorowane. Skrypty umieszczaj w znaczniku komentarza – dzięki temu przeglądarki, które nie obsługują skryptów pominą ten kod (inaczej pojawi się on jako tekst na ekranie).<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 3.0 Element noscript definiuje zawartość alternatywną, która będzie przydatna, jeśli skrypt nie będzie mógł<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> Atrybut konieczny: type=”text/ecmascript|text/j avascript|text/jscript|text/ vbscript|text/vbs|text/xml”<br /> <br /> – typ MIME skryptu. Atrybuty opcjonalne: charset=”strona_kodowa” src=”url” – adres do pliku zawierającego skrypt. &lt;noscript><br /> <br /> JavaScript: &lt;script type="text/javascript"> <!--<br /> <br /> document.write("Hej, to ja!") //--> </script> &lt;noscript>Twoja przeglądarka nie obsługuje skryptów JavaScript!</noscript><br /> <br /> zostać wykonany. Przeglądarki, które obsługują skrypty, ignorują ten element.<br /> <br /> VBScript: &lt;script type="text/vbscript"> <!-document.write("Hej, to ja!") '--> </script> &lt;noscript>Twoja przeglądarka nie obsługuje skryptów VBScript!</noscript> <object><br /> <br /> <object classid="clsid:F08DF9548592-11D1-B16A00C0F0283628" id="Slider1" width="100" height="50"> &lt;param name="BorderStyle" value="1"> &lt;param name="MousePointer" value="0"> &lt;param name="Enabled" value="1"> &lt;param name="Min" value="0"> &lt;param name="Max" value="10"> </object><br /> <br /> Definiuje obiekt osadzony. Służy do umieszczania na stronie multimediów. Można go umieszczać w sekcji head lub body. Między znacznikami <object> i </object> umieszczany jest tekst alternatywny lub zamienny kod HTML. Znacznik &lt;param> definiuje ustawienia dla wstawianego obiektu. Niektóre atrybuty opcjonalne: archive=”url1,url2,...,urln”<br /> <br /> – lista adresów URL do zasobów wykorzystywanych przez obiekt. classid=”url” – URL określający implementację obiektu. Składnia adresu URL zależy od typu obiektu. Przykładowo, dla zarejestrowanych obiektów kontrolnych ActiveX składnia jest następująca: CLSID:class-identifier codebase=”url” – URL określający<br /> <br /> bazę kodu (codebase) dla obiektu. Składnia zależy od obiektu. codetype=”typ_MIME” – typ MIME<br /> <br /> obiektu. data=”url” – URL odnoszący się do<br /> <br /> 3.0<br /> <br /> 4.0<br /> <br /> danych obiektu. height=”piksele|wartość%” –<br /> <br /> wysokość okna obiektu. width=”piksele|wartość%” –<br /> <br /> szerokość okna obiektu. name=”tekst” – nazwa obiektu. standby=”tekst” – informacja dla<br /> <br /> użytkownika wyświetlana w trakcie ładowania obiektu. type=”typ_MIME” – typ danych<br /> <br /> wyspecyfikowanych w atrybucie data. usemap=”url” – ulokowanie stowarzyszonej z obiektem mapy odnośników. &lt;param><br /> <br /> Patrz przykład dla obiektu object.<br /> <br /> Element param pozwala zdefiniować ustawienia dla obiektów wstawianych w dokumentach HTML. Atrybut wymagany: name=”tekst” – nazwa parametru.<br /> <br /> Atrybuty opcjonalne: id=”tekst” – jednoznaczny<br /> <br /> identyfikator parametru. value=”wartość” –wartość<br /> <br /> parametru. valuetype=”data|ref|object” –<br /> <br /> typ atrybutu value. type=”typ_MIME” – typ MIME. <applet rel="nofollow"><br /> <br /> Odradzany. W zamian stosuj <object>.<br /> <br /> 3.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> Dodatek B. Podstawowe moduły kodu HTML W tym dodatku zaprezentowano najczęściej stosowane moduły kodu HTML.<br /> <br /> Dokument HTML <html> <head> <title>Nazwa dokumentu</title> </head> <body> Treść dokumentu </body> </html><br /> <br /> Nagłówki <h1>Nagłówek najwyższego poziomu</h1> <h2>Nagłówek poziomu 2</h2> <h3>Nagłówek poziomu 3</h3> <h4>Nagłówek poziomu 4</h4> <h5>Nagłówek poziomu 5</h5> <h6>Nagłówek poziomu 6</h6><br /> <br /> Elementy tekstowe <p>Akapit</p> <br> //łamanie wiersza <hr> //linia pozioma &lt;pre>Tekst preformatowany</pre><br /> <br /> Style logiczne &lt;em>Do tego tekstu zastosowano emfazę</em> &lt;strong>Ten tekst wyróżniono</strong> <code>Tekst pisany czcionką o stałej szerokości</code><br /> <br /> Style fizyczne <b>Tekst pogrubiony</b> <i>Tekst pisany kursywą</i><br /> <br /> Połączenia, zakotwiczenia i obrazy-połączenia <a href="http://adres.com/strona.html/" rel="nofollow">To jest połączenie</a> <a href="http://adres.com/strona.html/" rel="nofollow"><img src="adresURL" alt="Tekst alternatywny"></a> <a href="#nazwa_zakotwiczenia" rel="nofollow">Zakotwiczenie</a> <a href="mailto:adres@pocztowy" rel="nofollow">Prześlij do mnie list</a><br /> <br /> Lista wypunktowana <ul> <li>Pierwsza pozycja</li> <li>Kolejna pozycja</li> ... <li>Ostatnia pozycja</li> </ul><br /> <br /> Lista numerowana <ol> <li>Pierwsza pozycja</li> <li>Kolejna pozycja</li> ... <li>Ostatnia pozycja</li> </ol><br /> <br /> Lista definicji <dl> <dt>Pierwszy termin</dt> <dd>Definicja</dd> <dt>Drugi termin</dt><br /> <br /> <dd>Definicja</dd> ... <dt>Ostatni termin</dt> <dd>Definicja</dd> </dl><br /> <br /> Tabela <table border="1"> <tr> <th>Tekst nagłówka</th> <th>Tekst nagłówka</th> </tr> <tr> <td>Zawartość komórki</td> <td>Zawartość komórki</td> </tr> </table><br /> <br /> Ramki Prosty układ pionowych ramek: <frameset cols="25%,75%"> <frame src="ramka_a.html"> <frame src="ramka_b.html"> </frameset><br /> <br /> Prosty układ poziomych ramek: <frameset rows="25%,50%,25%"> <frame src="ramka_a.html"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset><br /> <br /> Złożony układ ramek: <frameset rows="50%,50%"> <frame src="ramka_a.html"><br /> <br /> <frameset cols="25%,75%"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset> </frameset><br /> <br /> Formularz <form action="mailto:adre@pocztowy" method="post"> <input type="text" name="nazwisko" value="Kowalski" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> &lt;select> <option>Tekst1 <option selected>Tekst2 <option>Tekst3 </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form><br /> <br /> Identyczności < to to samo co < > to to samo co > © to to samo co ©<br /> <br /> Przykłady postaci innych elementów <!—Komentarz --> <blockquote> Tekst cytowany. </blockquote><br /> <br /> <address rel="nofollow"> Adres1<br> Adres 2<br> Miasto<br> </address><br /> <br /> Dodatek C. Atrybuty standardowe Atrybuty specyficzne dla poszczególnych znaczników zostały opisane w dodatku A. Atrybuty zgromadzone tabelach C1, C2 i C3 są atrybutami standardowym i mogą być zastosowane niemal do wszystkich znaczników (z pewnymi wyjątkami). Tabela C1. Atrybuty podstawowe. Atrybut<br /> <br /> Opis<br /> <br /> class=”nazwa_definicji_klas y”<br /> <br /> Klasa elementu.<br /> <br /> id=”nazwa”<br /> <br /> Łańcuch, który identyfikuje obiekt.<br /> <br /> style=”definicja_stylu”<br /> <br /> Definicja stylu.<br /> <br /> title=”tekst”<br /> <br /> Tekst, który będzie wyświetlany jako<br /> <br /> Atrybuty te są stosowane ze wszystkimi elementami za wyjątkiem: base, head, html, meta, param, script, style, title Tabela C2. Atrybuty dotyczące języka. Atrybut<br /> <br /> Opis<br /> <br /> dir=”ltr | rtl”<br /> <br /> Określa kierunek tekstu.<br /> <br /> lang=”kod_języka”<br /> <br /> Kod języka.<br /> <br /> Atrybuty te są nie stosowane z elementami: base, br, frame, frameset, hr, iframe, param, script<br /> <br /> Tabela C3. Atrybuty określające dostęp do elementów za pomocą klawiatury. Atrybut<br /> <br /> Opis<br /> <br /> accesskey=”znak”<br /> <br /> Atrybut określa<br /> <br /> tabindex=”liczba”<br /> <br /> Określa porządek przechodzenia między polami formularza.<br /> <br /> Atrybuty te są nie stosowane z elementami: base, br, frame, frameset, hr, iframe, param, script<br /> <br /> Dodatek D. Kolory w HTML Tabela D.1. Podstawowe kolory i ich nazwy, kod szesnastkowy oraz zapis w systemie RGB. Kolor<br /> <br /> Nazwa<br /> <br /> Kod szesnastkowy<br /> <br /> Kod RGB<br /> <br /> Czarny<br /> <br /> black<br /> <br /> #000000<br /> <br /> rgb(0,0,0)<br /> <br /> Czerwony<br /> <br /> red<br /> <br /> #FF0000<br /> <br /> rgb(255,0,0)<br /> <br /> Zielony<br /> <br /> green<br /> <br /> #00FF00<br /> <br /> rgb(0,255,0)<br /> <br /> Niebieski<br /> <br /> blue<br /> <br /> #0000FF<br /> <br /> rgb(0,0,255)<br /> <br /> Żółty<br /> <br /> yellow<br /> <br /> #FFFF00<br /> <br /> rgb(255,255,0)<br /> <br /> Jasnoniebieski<br /> <br /> lightblue<br /> <br /> #00FFFF<br /> <br /> rgb(0,255,255)<br /> <br /> Fiolet<br /> <br /> magenta<br /> <br /> #FF00FF<br /> <br /> rgb(255,0,255)<br /> <br /> Szary<br /> <br /> gray<br /> <br /> #C0C0C0<br /> <br /> rgb(192,192,192)<br /> <br /> Biały<br /> <br /> white<br /> <br /> #FFFFFF<br /> <br /> rgb(255,255,255)<br /> <br /> 000000<br /> <br /> 000033<br /> <br /> 000066<br /> <br /> 000099<br /> <br /> 0000CC<br /> <br /> 0000FF<br /> <br /> 003300<br /> <br /> 003333<br /> <br /> 003366<br /> <br /> 003399<br /> <br /> 0033CC<br /> <br /> 0033FF<br /> <br /> 006600<br /> <br /> 006633<br /> <br /> 006666<br /> <br /> 006699<br /> <br /> 0066CC<br /> <br /> 0066FF<br /> <br /> 009900<br /> <br /> 009933<br /> <br /> 009966<br /> <br /> 009999<br /> <br /> 0099CC<br /> <br /> 0099FF<br /> <br /> 00CC00<br /> <br /> 00CC33<br /> <br /> 00CC66<br /> <br /> 00CC99<br /> <br /> 00CCCC<br /> <br /> 00CCFF<br /> <br /> 00FF00<br /> <br /> 00FF33<br /> <br /> 00FF66<br /> <br /> 00FF99<br /> <br /> 00FFCC<br /> <br /> 00FFFF<br /> <br /> 330000<br /> <br /> 330033<br /> <br /> 330066<br /> <br /> 330099<br /> <br /> 3300CC<br /> <br /> 3300FF<br /> <br /> 333300<br /> <br /> 333333<br /> <br /> 333366<br /> <br /> 333399<br /> <br /> 3333CC<br /> <br /> 3333FF<br /> <br /> 336600<br /> <br /> 336633<br /> <br /> 336666<br /> <br /> 336699<br /> <br /> 3366CC<br /> <br /> 3366FF<br /> <br /> 339900<br /> <br /> 339933<br /> <br /> 339966<br /> <br /> 339999<br /> <br /> 3399CC<br /> <br /> 3399FF<br /> <br /> 33CC00<br /> <br /> 33CC33<br /> <br /> 33CC66<br /> <br /> 33CC99<br /> <br /> 33CCCC<br /> <br /> 33CCFF<br /> <br /> 33FF00<br /> <br /> 33FF33<br /> <br /> 33FF66<br /> <br /> 33FF99<br /> <br /> 33FFCC<br /> <br /> 33FFFF<br /> <br /> 660000<br /> <br /> 660033<br /> <br /> 660066<br /> <br /> 660099<br /> <br /> 6600CC<br /> <br /> 6600FF<br /> <br /> 663300<br /> <br /> 663333<br /> <br /> 663366<br /> <br /> 663399<br /> <br /> 6633CC<br /> <br /> 6633FF<br /> <br /> 666600<br /> <br /> 666633<br /> <br /> 666666<br /> <br /> 666699<br /> <br /> 6666CC<br /> <br /> 6666FF<br /> <br /> 669900<br /> <br /> 669933<br /> <br /> 669966<br /> <br /> 669999<br /> <br /> 6699CC<br /> <br /> 6699FF<br /> <br /> 66CC00<br /> <br /> 66CC33<br /> <br /> 66CC66<br /> <br /> 66CC99<br /> <br /> 66CCCC<br /> <br /> 66CCFF<br /> <br /> 66FF00<br /> <br /> 66FF33<br /> <br /> 66FF66<br /> <br /> 66FF99<br /> <br /> 66FFCC<br /> <br /> 66FFFF<br /> <br /> 990000<br /> <br /> 990033<br /> <br /> 990066<br /> <br /> 990099<br /> <br /> 9900CC<br /> <br /> 9900FF<br /> <br /> 993300<br /> <br /> 993333<br /> <br /> 993366<br /> <br /> 993399<br /> <br /> 9933CC<br /> <br /> 9933FF<br /> <br /> 996600<br /> <br /> 996633<br /> <br /> 996666<br /> <br /> 996699<br /> <br /> 9966CC<br /> <br /> 9966FF<br /> <br /> 999900<br /> <br /> 999933<br /> <br /> 999966<br /> <br /> 999999<br /> <br /> 9999CC<br /> <br /> 9999FF<br /> <br /> 99CC00<br /> <br /> 99CC33<br /> <br /> 99CC66<br /> <br /> 99CC99<br /> <br /> 99CCCC<br /> <br /> 99CCFF<br /> <br /> 99FF00<br /> <br /> 99FF33<br /> <br /> 99FF66<br /> <br /> 99FF99<br /> <br /> 99FFCC<br /> <br /> 99FFFF<br /> <br /> CC0000<br /> <br /> CC0033<br /> <br /> CC0066<br /> <br /> CC0099<br /> <br /> CC00CC<br /> <br /> CC00FF<br /> <br /> CC3300<br /> <br /> CC3333<br /> <br /> CC3366<br /> <br /> CC3399<br /> <br /> CC33CC<br /> <br /> CC33FF<br /> <br /> CC6600<br /> <br /> CC6633<br /> <br /> CC6666<br /> <br /> CC6699<br /> <br /> CC66CC<br /> <br /> CC66FF<br /> <br /> CC9900<br /> <br /> CC9933<br /> <br /> CC9966<br /> <br /> CC9999<br /> <br /> CC99CC<br /> <br /> CC99FF<br /> <br /> CCCC00<br /> <br /> CCCC33<br /> <br /> CCCC66<br /> <br /> CCCC99<br /> <br /> CCCCCC<br /> <br /> CCCCFF<br /> <br /> CCFF00<br /> <br /> CCFF33<br /> <br /> CCFF66<br /> <br /> CCFF99<br /> <br /> CCFFCC<br /> <br /> CCFFFF<br /> <br /> FF0000<br /> <br /> FF0033<br /> <br /> FF0066<br /> <br /> FF0099<br /> <br /> FF00CC<br /> <br /> FF00FF<br /> <br /> FF3300<br /> <br /> FF3333<br /> <br /> FF3366<br /> <br /> FF3399<br /> <br /> FF33CC<br /> <br /> FF33FF<br /> <br /> FF6600<br /> <br /> FF6633<br /> <br /> FF6666<br /> <br /> FF6699<br /> <br /> FF66CC<br /> <br /> FF66FF<br /> <br /> FF9900<br /> <br /> FF9933<br /> <br /> FF9966<br /> <br /> FF9999<br /> <br /> FF99CC<br /> <br /> FF99FF<br /> <br /> FFCC00<br /> <br /> FFCC33<br /> <br /> FFCC66<br /> <br /> FFCC99<br /> <br /> FFCCCC<br /> <br /> FFCCFF<br /> <br /> FFFF00<br /> <br /> FFFF33<br /> <br /> FFFF66<br /> <br /> FFFF99<br /> <br /> FFFFCC<br /> <br /> FFFFFF<br /> <br /> </div> </div> </div> <div class="row hidden-xs"> <div class="col-md-12"> <h2></h2> <hr /> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc.html"> <img src="https://epdf.tips/img/300x300/abc_5fdc935e9a3be2f12f8b516c.jpg" alt="abc" /> <h3 class="note-title">abc</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/html.html"> <img src="https://epdf.tips/img/300x300/html_5bfc77e4b7d7bcf41f505654.jpg" alt="HTML" /> <h3 class="note-title">HTML</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/html.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-american-airlines-abc-airliner.html"> <img src="https://epdf.tips/img/300x300/abc-american-airlines-abc-airliner_5b6bd1f0b7d7bc2741b5a906.jpg" alt="ABC American Airlines (ABC Airliner)" /> <h3 class="note-title">ABC American Airlines (ABC Airliner)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-american-airlines-abc-airliner.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-rheumatology-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-rheumatology-abc-series_5b2d95e9b7d7bcda54dd1d5a.jpg" alt="ABC of Rheumatology (ABC Series)" /> <h3 class="note-title">ABC of Rheumatology (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-rheumatology-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-allergies-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-allergies-abc-series_5aced969b7d7bc0d07fc9ca7.jpg" alt="ABC of Allergies (ABC Series)" /> <h3 class="note-title">ABC of Allergies (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-allergies-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-copd-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-copd-abc-series_5acbfd5ab7d7bce313f1afd5.jpg" alt="ABC of COPD (ABC Series)" /> <h3 class="note-title">ABC of COPD (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-copd-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-urology-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-urology-abc-series_5aed207eb7d7bcd96cf345c7.jpg" alt="ABC of Urology (ABC Series)" /> <h3 class="note-title">ABC of Urology (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-urology-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-asthma-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-asthma-abc-series_5afcda73b7d7bc7769327724.jpg" alt="ABC of Asthma (ABC Series)" /> <h3 class="note-title">ABC of Asthma (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-asthma-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-transfusion-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-transfusion-abc-series_5b38494bb7d7bc0d4064bac6.jpg" alt="ABC of Transfusion (ABC Series)" /> <h3 class="note-title">ABC of Transfusion (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-transfusion-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-obesity-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-obesity-abc-series_5ade5d64b7d7bc824d4825d7.jpg" alt="ABC of Obesity (ABC Series)" /> <h3 class="note-title">ABC of Obesity (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-obesity-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-subfertility-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-subfertility-abc-series_5acbfd5bb7d7bce113a107b2.jpg" alt="ABC of Subfertility (ABC Series)" /> <h3 class="note-title">ABC of Subfertility (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-subfertility-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ucigasul-abc.html"> <img src="https://epdf.tips/img/300x300/ucigasul-abc_5be98f3eb7d7bcf71f8cc789.jpg" alt="Ucigasul ABC" /> <h3 class="note-title">Ucigasul ABC</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ucigasul-abc.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-book.html"> <img src="https://epdf.tips/img/300x300/abc-book_5bfd5f57b7d7bcf41f505f7f.jpg" alt="ABC Book" /> <h3 class="note-title">ABC Book</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-book.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-interventional-cardiology-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-interventional-cardiology-abc-series_5b2e0e9fb7d7bcca0b36b0ae.jpg" alt="ABC of Interventional Cardiology (ABC Series)" /> <h3 class="note-title">ABC of Interventional Cardiology (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-interventional-cardiology-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-kidney-disease-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-kidney-disease-abc-series_5b557cbdb7d7bc5112bc7300.jpg" alt="ABC of Kidney Disease (ABC Series)" /> <h3 class="note-title">ABC of Kidney Disease (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-kidney-disease-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/workshop-html.html"> <img src="https://epdf.tips/img/300x300/workshop-html_5becca75b7d7bcf41f4fe636.jpg" alt="Workshop HTML" /> <h3 class="note-title">Workshop HTML</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/workshop-html.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/-htmlbe084745a5e191336cfe5b1b83bfee2854954.html"> <img src="https://epdf.tips/img/300x300/-html_5c0b1bbfb7d7bcfc22bb9dde.jpg" alt="Самоучитель HTML" /> <h3 class="note-title">Самоучитель HTML</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/-htmlbe084745a5e191336cfe5b1b83bfee2854954.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-gitary.html"> <img src="https://epdf.tips/img/300x300/abc-gitary_5b36ddf0b7d7bce95802547e.jpg" alt="ABC gitary" /> <h3 class="note-title">ABC gitary</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-gitary.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/-html.html"> <img src="https://epdf.tips/img/300x300/-html_5a8a5a6fb7d7bc5f66b1d1b7.jpg" alt="Самоучитель HTML" /> <h3 class="note-title">Самоучитель HTML</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/-html.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/null-abc6811a4ddd5c851be02ae65d9edca055133529.html"> <img src="https://epdf.tips/img/300x300/null-abc_5b006ae1b7d7bc7969fdbea2.jpg" alt="Null-ABC" /> <h3 class="note-title">Null-ABC</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/null-abc6811a4ddd5c851be02ae65d9edca055133529.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/hesse-abc.html"> <img src="https://epdf.tips/img/300x300/hesse-abc_5ae49ce9b7d7bc3732fcb13a.jpg" alt="Hesse-ABC" /> <h3 class="note-title">Hesse-ABC</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/hesse-abc.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-spinal-disorders-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-spinal-disorders-abc-series_5b466aaeb7d7bc9e590547c2.jpg" alt="ABC of Spinal Disorders (ABC Series)" /> <h3 class="note-title">ABC of Spinal Disorders (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-spinal-disorders-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-imaging-in-trauma-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-imaging-in-trauma-abc-series_5ae3ed6bb7d7bc47576e9af3.jpg" alt="ABC of Imaging in Trauma (ABC Series)" /> <h3 class="note-title">ABC of Imaging in Trauma (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-imaging-in-trauma-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-practical-procedures-abc-seriesf4366370f1583bf3401f996eb7ec3c3658881.html"> <img src="https://epdf.tips/img/300x300/abc-of-practical-procedures-abc-series_5ad2b457b7d7bc1b31722bae.jpg" alt="ABC of Practical Procedures (ABC Series)" /> <h3 class="note-title">ABC of Practical Procedures (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-practical-procedures-abc-seriesf4366370f1583bf3401f996eb7ec3c3658881.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-clinical-leadership-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-clinical-leadership-abc-series_5bf35986b7d7bcf41f50144e.jpg" alt="ABC of Clinical Leadership (ABC Series)" /> <h3 class="note-title">ABC of Clinical Leadership (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-clinical-leadership-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-dermatology-5th-edition-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-dermatology-5th-edition-abc-series_5b2c5849b7d7bcd46a30c471.jpg" alt="ABC of Dermatology, 5th Edition (ABC Series)" /> <h3 class="note-title">ABC of Dermatology, 5th Edition (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-dermatology-5th-edition-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-medical-law-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-medical-law-abc-series_5ad0199db7d7bc585fade561.jpg" alt="ABC of Medical Law (ABC Series)" /> <h3 class="note-title">ABC of Medical Law (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-medical-law-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/abc-of-health-informatics-abc-series.html"> <img src="https://epdf.tips/img/300x300/abc-of-health-informatics-abc-series_5b4beae3b7d7bc2a05062ec4.jpg" alt="ABC of Health Informatics (ABC Series)" /> <h3 class="note-title">ABC of Health Informatics (ABC Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/abc-of-health-informatics-abc-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/teddybears-abc.html"> <img src="https://epdf.tips/img/300x300/teddybears-abc_5b2c2a4fb7d7bcc470248017.jpg" alt="Teddybears ABC" /> <h3 class="note-title">Teddybears ABC</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/teddybears-abc.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/kindernotfall-abc.html"> <img src="https://epdf.tips/img/300x300/kindernotfall-abc_5b5a907fb7d7bcd5795211bd.jpg" alt="Kindernotfall-ABC" /> <h3 class="note-title">Kindernotfall-ABC</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/kindernotfall-abc.html">Read more</a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-xs-12"> <div class="panel-recommend panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Recommend Documents</h4> </div> <div class="panel-body"> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc.html"> <img src="https://epdf.tips/img/60x80/abc_5fdc935e9a3be2f12f8b516c.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc.html"> abc </a> </label> <div class="note-meta"> <div class="note-desc">abcd</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/html.html"> <img src="https://epdf.tips/img/60x80/html_5bfc77e4b7d7bcf41f505654.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/html.html"> HTML </a> </label> <div class="note-meta"> <div class="note-desc">2 3 ББК 32.988.02-18 УДК 004.738.5 К63 К63 Н. Комолова, Е. Яковлева HTML: Самоучитель. 2-е изд. — СПб.: Питер, 20...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-american-airlines-abc-airliner.html"> <img src="https://epdf.tips/img/60x80/abc-american-airlines-abc-airliner_5b6bd1f0b7d7bc2741b5a906.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-american-airlines-abc-airliner.html"> ABC American Airlines (ABC Airliner) </a> </label> <div class="note-meta"> <div class="note-desc">Also available from Plymouth Press: Famous Airliners, 2nd edition From biplane to jetliner the SIOry or travel by air ...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-rheumatology-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-rheumatology-abc-series_5b2d95e9b7d7bcda54dd1d5a.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-rheumatology-abc-series.html"> ABC of Rheumatology (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">Rheumatology Fourth edition Rheumatology Fourth edition E D I TE D B Y Ade Adebajo Associate Director of Teaching Un...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-allergies-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-allergies-abc-series_5aced969b7d7bc0d07fc9ca7.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-allergies-abc-series.html"> ABC of Allergies (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">Downloaded from bmj.com on 6 January 2009 ABC of allergies The epidemiology of allergic disease Prevalence Time trend...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-copd-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-copd-abc-series_5acbfd5ab7d7bce313f1afd5.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-copd-abc-series.html"> ABC of COPD (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">COPD Second Edition COPD Second Edition EDITED BY Graeme P. Currie Consultant in Respiratory and General Medicine Ab...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-urology-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-urology-abc-series_5aed207eb7d7bcd96cf345c7.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-urology-abc-series.html"> ABC of Urology (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">ChapFM.qxd 6/7/06 9:19 PM Page i ABC OF UROLOGY Second Edition ABC of Urology Second Edition Edited by Chris Dawson a...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-asthma-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-asthma-abc-series_5afcda73b7d7bc7769327724.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-asthma-abc-series.html"> ABC of Asthma (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">Asthma Sixth Edition John Rees Consultant Physician and Professor of Medical Education, Sherman Education Centre, Guy’...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-transfusion-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-transfusion-abc-series_5b38494bb7d7bc0d4064bac6.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-transfusion-abc-series.html"> ABC of Transfusion (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">Transfusion Fourth Edition E D I TE D B Y Marcela Contreras, DBE Royal Free & University College Hospitals Medical Sch...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/abc-of-obesity-abc-series.html"> <img src="https://epdf.tips/img/60x80/abc-of-obesity-abc-series_5ade5d64b7d7bc824d4825d7.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/abc-of-obesity-abc-series.html"> ABC of Obesity (ABC Series) </a> </label> <div class="note-meta"> <div class="note-desc">Downloaded from bmj.com on 13 January 2009 Practice ABC of obesity Obesity—time to wake up This is the first article...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://epdf.tips/report/abc-jzyka-html" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Report "ABC języka HTML"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6Lemmz0UAAAAAANSnNH_YtG0406jaTUcUP7mxrLr"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright &copy; 2024 EPDF.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://epdf.tips/about">About Us</a></span> | <span><a href="https://epdf.tips/privacy">Privacy Policy</a></span> | <span><a href="https://epdf.tips/term">Terms of Service</a></span> | <span><a href="https://epdf.tips/copyright">Copyright</a></span> | <span><a href="https://epdf.tips/dmca">DMCA</a></span> | <span><a href="https://epdf.tips/contact">Contact Us</a></span> | <span><a href="https://epdf.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer> <!-- Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://epdf.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://epdf.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> <hr style="margin-top: 15px;" /> <a href="https://epdf.tips/login/facebook" class="btn btn-facebook btn-block"><i class="fa fa-facebook"></i> Login with Facebook</a> </div> </div> </div> </div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111550345-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-111550345-1'); </script> <script src="https://epdf.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://epdf.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://epdf.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script> <!-- cookie policy --> <div id="EPDFTIPS_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://epdf.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_EPDFTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_EPDFTIPS_cookie_box() { document.cookie = "EPDFTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_EPDFTIPS_cookie_box(); } function hide_EPDFTIPS_cookie_box() { var cb = document.getElementById('EPDFTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var EPDFTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('EPDFTIPS_cookie_box_viewed'); if (EPDFTIPS_cookie_box_viewed) { hide_EPDFTIPS_cookie_box(); } })(); </script> <!-- end cookie policy --> </body> </html>