Znaczniki HTML HTML (HyperText Markup Language), po polsku język hipertekstowy. Podstawą budowy każdej strony internetowej jest język znaczników HTML. Składa się on z kilkudziesięciu komend, tzw. tagów. Poniżej znajdują się przykłady tagów. <b>tekst pogrubiony</b> tekst pogrubiony <hr> Polecenia te to właśnie tagi. Dzielimy je na dwa rodzaje: podwójne (pierwszy przykład) - polecenie odnosi się do informacji zawartych pomiędzy tagiem otwierającym (<b>) i zamykającym (</b>); otwarte, pojedyncze (drugi przykład) - polecenie nie potrzebuje zamknięcia, ponieważ wstawia jakiś element; Zasadą jest, że poszczególne tagi nawzajem się oblewają, np.: <b><i>jakiś tekst <u>teraz podkreślony</u></i></b> Pierwsze dwa wyrazy zostaną napisane pogrubioną kursywą, a ostatnie dwa dodatkowo zostaną podkreślone. jakiś tekst teraz podkreślony Większość tagów zawiera również dodatkowe parametry, np.: <img src="jakisplik.jpg"> Tag ten wstawia grafikę, parametr src="jakisplik.jpg" określa źródło pliku (w tym przypadku jakisplik.jpg). Dokument HTML ma następującą strukturę: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>... </head> <body>... </body> </html> Struktura dokumentu Dzięki tagom <html> </html> dokument zostanie zdefiniowany jako plik HTML, a więc przeznaczony do publikacji w Internecie. Pomiędzy <head> </head> są ustalone właściwości strony. To, co widzimy w oknie przeglądarki, zawarte jest pomiędzy <body> </body>. Pierwszy znacznik <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, informuje przeglądarkę o typie dokumentu - zgodnym ze specyfikacją HTML 4.0. Wielu webmasterów o nim zapomina, jest on jednak czasami bardzo ważny. W nagłówku strony definiujemy jej właściwości. Oto one: tytuł strony: <title>jakiś tytuł</title> tytuł strony pojawi się na samej górze okna przeglądarki: Nagłówek strony Strona 1
standart kodowania: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> dzięki niemu przeglądarka nie będzie miała problemu np. z polskimi literami; jednak jeśli tworzysz stronę pod notatnikiem musisz użyć innego standardu: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> przy wysyłaniu strony na serwer powinna mieć ona ustalony pierwszy standard (ISO-8859-2); do zamiany strony kodowania służy konwerter, np.: Ogonki; data utworzenia dokumentu (opcjonalnie): <meta http-equiv="creation-date" content="tue, 24 Dec 1999 21:29:02 GMT"> adres e-mail autora strony: <meta http-equiv="reply-to" content="webmaster@serwer.pl"> słowa kluczowe: <meta name="keywords" content="słowo1, słowo2, słowo3"> dzięki nim wyszukiwarka internetowa znajdzie naszą stronę; opis strony: <meta name="description" content="moja pierwsza, wspaniała strona!"> opis strony, który również pokaże się w oknie wyszukiwarki; informacja o autorze: <meta name="author" content="adam Słodowy"> w tym miejscu zaleca się, aby wpisywać prawdziwe imię i nazwisko, a nie pseudonimy; język: <meta name="language" content="pl"> tylko niektóre przeglądarki używają tego polecenia; inne skróty: język angielski: en, amerykańsko angielsko: en-us, niemiecki: de, francuski: fr; edytor HTML-a (opcjonalnie): <meta name="generator" content="notepad"> jeśli robisz stronę w edytorze HTML, niemalże zawsze jest to opcja automatyczna. odświeżanie strony (opcjonalnie): <meta name="refresh" content="5"> strona po (przykładowo) 5 sekundach sama się odświeży; używanie tej opcji jest zalecane tylko w skrajnych przypadkach; znacznie bardziej przydatna bywa to polecenie: <meta name="refresh" content="5; url=http://www.adres.pl/strona.html"> po (przykładowo) 5 sekundach strona zmieni adres na http://www.adres.pl/strona.html; Strona 2
Ciało dokumentu Pomiędzy znacznikami <body> </body> zawarte jest to, co nam się pokaże w oknie przeglądarki. Część opcji możemu ustalić bezpośrednio pod tym tagiem: kolor tła strony: <body bgcolor="white"></body> obraz tła strony: <body background="plik.jpg"></body> kolor linków: <body color="blue"></body> kolor odwiedzonych linków: <body color="purpure"></body> kolor aktywnych linków: <body color="yellow"></body> górny margines (w pikselach): <body topmargin="5"></body> lewy margines (w pikselach): <body leftmargin="5"></body> Wszystkie podane wartości (oprócz drugiej) są domyślnie ustawione w przeglądarce. Należy pamiętać, że umieszczmy je w jednym znaczniku, np.: <body bgcolor="white" text="black" link="blue" alink="red" vlink="purpure"> Kolory możemy podawać na trzy sposoby: słownie - używamy angielskich nazw kolorów, np.: black, red, green; za pomocą trypletu szesnastkowego, np. #000000, #FF0000, #008000; systemem Red-Green-Blue, np. rgb(0,0,0), rgb(255,0,0), rgb(0,128,0); Kilka istotnych uwag Podczas pracy z edytorem tekstowym po kliknięciu klawisza ENTER rozpoczynamy nowy wiersz w dokumencie. W HTML sprawa ma się trochę inaczej. Wszelkie wielokrotne spacje i entery przeglądarka potraktuje jako jedną spację i zawinie w miejscu, które uzna za odpowiednie. Dlatego w takich sytuacjach stosujemy znaczniki akapitów: <p> </p>. Możemy je wyrównywać za pomocą parametru align="wyrównanie": <p align="left">po lewej</p> po lewej <p align="center">na środku</p> na środku <p align="right">po prawej</p> po prawej Poszczególne akapity zostaną oddzielone tzw. interlinią: pierwsza linijka druga linijka Strona 3
trzecia linijka Pamiętaj o strukturze znaczników. Są one ułożone wg zasady: Dobrze <b> <i> <u> </u> </i> </b> Źle <b> <i> <u> </b> </i> </u> Następna uwaga dotyczy wywoływania plików. Jeżeli znajduje się w tym samy katalogu, w parametrze wywołującym plik wpisujemy po prostu nazwę pliku, np.: src="plik.html". Jeśli jest on w katalogu podrzędnym, piszemy pełną ścieżkę dostępu: src="katalog/plik.html". Jeśli jednak plik znajduje się w katalogu nadrzędnym, stosujemy../. Pliki zapisuj z nazwą *.html. Dopuszczalne jest również rozszerzenie *.htm. Część formatowania uzyskujemy poprzez uzupełnienie znacznika <font> parametrami: wielkośc czcionki (od 1 do 7); size="3" krój czcionki; face="times New Roman" Formatowanie tekstu </font> trzema kolor czcionki (można pominąć, jeśli parametr ten jest zdefiniowany w tagu <body></body>); color="black" Oto przykład: <font face="times New Roman" size="4" color="green">być albo nie być...</font><br> <font face="comic Sans MS" size="5" color="blue">...oto jest pytanie</font><br> Być albo nie być......oto jest pytanie Polecenie <font> </font> nie jest zalecane, lepiej używać stylów (CSS). Inne tagi służące do formatowania tekstu: wytłuszczenie; <b> </b> podkreślenie; <u> </u> kursywa; <i> </i> przekreślenie; <strike> </strike> indeks górny; <sup> </sup> Strona 4
indeks dolny; <sub> </sub> Nagłówki Mamy sześć stopni nagłówków: <h1>nagłówek stopnia pierwszego</h1> nagłówek stopnia pierwszego <h2>nagłówek stopnia drugiego</h2> nagłówek stopnia drugiego <h3>nagłówek stopnia trzeciego</h3> nagłówek stopnia trzeciego <h4>nagłówek stopnia czwartego</h4> nagłówek stopnia czwartego <h5>nagłówek stopnia piątego</h5> nagłówek stopnia piątego <h6>nagłówek stopnia szóstego</h6> nagłówek stopnia szóstego Za pomocą parametru align="wyrównanie" możemy dowolnie wyrównać nagłówek. Pozioma linia Poziomą linię wstawiamy za pomocą tagu <hr>. Bez żadnego formatowania wygląda ona tak: Ale zawsze możemy dodać różne parametry: szerokośc linii, wartość można podawać w procentach i w pikselach; width="50%" wielkość (grubość) linii; size="5" wyrównanie linii; align="wyrównanie" kolor linii (zaleca się zarzucenie tego parametru na rzecz stylów); color="green" brak cienia linii; noshade Strona 5
Tekst preformatowany Tekst preformatowany wstawiamy przy pomocy tagów <pre> </pre>. W takim tekście wszystkie znaki mają taką samą wielkość (w tym szerokość), najczęściej jest to czcionka Courier New. To jest tekst preformatowany. Można wstawiać wielokrotne spacje. / @ @ \ \ " / \ u / Obramowanie tekstu wstawiamy za pomocą tagów <fieldset> </fieldset>: Obramowanie Opcja ta nabiera większego sensu z połączeniem z tagami <legend> </legend>: <fieldset><legend>spis treści</legend> - rozdział pierwszy<br> - rozdział drugi<br> - rozdział trzeci<br> </fieldset> Opcja ta jest na razie interpretowana tylko przez MS Internet Explorer 4.0 w górę. Komentarze Znaczniki komentarza pozwalają wprowadzić tekst, który zostanie zignorowany przez przeglądarkę. Są one też używane podczas pisania skryptów. Taki znacznik wygląda tak: <!--coś, czego nie zobaczymy w oknie przeglądarki--> lub <!-- tego zresztą też nie //--> Najprostszy tag wstawiający grafikę ma postać: <img src="skrzynka.gif"> A oto efekt: Grafiki, multimedia Strona 6
Parametr src="" określa źródło. Tag ten ma również inne parametry: szerokość grafiki; width="100" wysokość grafiki; height="100" tekst alternatywny, wyświetlany jest kiedy przeglądarka jest ustawiona w trybie tekstowym; parametr ten jest równy parametrowi title="tekst"; alt="tekst alternatywny"; grubość obramowania grafiki w pikselach; border="0" wyrównanie grafiki względem tekstu; align="left" odległość od tekstu w poziomie; hspace="0" odległość od tekstu w pionie; vspace="0" Należy pamiętać, że im większa grafika, tym gorsza jakość podczas zmiany wielksci: <img src="skrzynka.gif" alt="grafika" width="200" height="200"> W podobny sposób możemy wstawić filmy typu *.avi lub *.mpeg (zwróć uwagę na inny parametr źródła): <img dynsrc="szukaj.avi" border="0"> Można również wstawić parametr informujący przeglądarkę o rozpoczęciu odtwarzania filmu: odtwarzanie filmu zostanie rozpoczęte po wgraniu strony; start="onload" odtwarzanie filmu zostanie rozpoczęte po najechaniu kursorem na film; start="mouseover" Strona 7
Należy pamiętać, aby nie umieszczać zbyt dużej ilości grafik na stronie. Może to bowiem spowodować znaczne wydłużenie czasu wgrywania strony. Ramki Ramki są przydatnym elementem przy tworzeniu stron www. Polegają one na podzieleniu okna przeglądarki na kilka części i załadowaniu w nich kilku plików HTML. Ułatwiają w ten sposób webmasterowi pracę. Obecnie ramki straciły nieco na popularności na rzecz metody SSI, jednak ta metoda wymaga znajomości języka skryptowego PHP. Okno dzielimy za pomocą znaczników <frameset> </frameset>, a właściwości poszczególnych ramek ustalamy za pomocą <frame>: <frameset rows="150,*"> <frame name="gorna" src="gora.html"> <frame name="lewa" src="lewa.html"> </frameset> Okno podzieli się tak: Stało się tak dzięki parametrowi rows="150,*". Górna ramka zajmie 150 pikseli, druga resztę wolnej przestrzeni. Dzielenie okna w pionie odbywa się przy użyciu parametru cols="150,*": Ramki można ze sobą łączyć: <frameset cols="150,*"> <frame src="menu.html"> <frameset rows="50,*"> <frame src="banner.html"> <frame src="homepage.html"> </frameset> </frameset> Część opcji definiujemy pod <frameset> </frameset>: grubość obramowania ramek; Strona 8
frameborder="0" grubość linii dzielącej ramki; border="0" kolor linii dzielącej ramki; bordercolor="gray" Ale najważniejsze rzeczy definiujemy pod <frame>: źródło pliku; src="plik.html" nazwa ramki; name="nazwa" zablokowanie możliwości zmiany rozmiaru ramki; noresize ustalenie widoczności paska przewijania: yes - widoczny cały czas, auto - widoczny tylko w razie potrzeby, no - ukryty cały czas; scrollling="yes" Pamiętaj, że jeżeli są ramki, dokument ma następującą budowę: <html> <head> </head> <frameset> </frameset> <noframes> </noframes> </html> Znaczniki <noframes></noframes> wczytane zostaną jeśli przeglądarka nie posiada obsługi ramek. Oto przykładowa strona ustalająca nam ramki: <html> <head> <title>przykład z ramkami</title> </head> <frameset rows="15%,*" frameborder="0" border="0"> <frame name="gorna" src="prgora.html" noresize scrolling="no"> <frameset cols="25%,*" frameborder="0" border="0"> <frame name="lewa" src="prlewa.html"> <frame name="prawa" src="prprawa.html" scrolling="auto"> </frameset> </frameset> <noframes>niestety, twoja przeglądarka nie obsługuje ramek. </noframes> </html> Odsyłacze Odsyłacze (linki) służą do łączenia poszczególnych stron ze sobą. Kiedy klikniesz odsyłaczu wczytana zostanie jakaś strona lub wysłana poczta. Miejsca aktywne służą również do obsługi skryptów JavaScript. Domyślnie linki będą podkreślone i przyjmą taki kolor, jaki został ustalony w znaczniku <body> </body>. Formatowanie łączy można zmieniać za pomocą stylów. Strona 9
Odsyłacze bliskie (miejscowe) przenoszą nas do dokumentu na tym samym serwerze, na którym znajduje się strona z odsyłaczem. Moją one postać: <a href="strona.html">jakiś link</a> Parametr href="strona.html" określa źródło wczytywanego pliku. Link nie musi być do pliku HTML. Pliki o rozszerzeniach *.txt, *.jpg, *.gif i inne graficzne wczytane zostaną w oknie przeglądarki, inne wymagają uruchomienia dodatkowych programów, np. dla pliku MP3 uruchomiony domyślny odtwarzacz plików tego typu. W przypadku plików *.exe, *.zip, *.rar oraz innych spakowanych przeglądarka zapyta się nas, czy chcemy zapisać plik na dysku, czy otworzyć z bierzącej lokalizacji. W linku możemy użyć paramertu target="nazwa_ramki". Spowoduje on wyświetlenie pliku w podanej ramce. Jeśli chcemy, aby była to nowa ramka (okno), ustawiamy target="_blank", target="_top" skasuje nam wszystkie ramki w dokumencie. Dzięki odsyłaczom dalekim przeniesiemy się na stronę umieszczoną na innym serwerze niż nasza strona: <a href="http://www.pu.kielce.pl/">akademia Świętokrzyska</a> W podobny sposób można wysłać pocztę. Oto przykład: <a href="mailto:webmaster@serwer.pl">napisz do mnie</a> Wybranie takiego linku spowoduje uruchomienie domyślnego klienta poczty. Poczta zostanie wysłana na adres: webmaster@serwer.pl. Możemy także zdefiniować: temat listu; webmaster@serwer.pl?subject=temat_listu kopia jawna listu; webmaster@serwer.pl?cc=ktos@gdzies.pl kopia ukryta listu (kopie można wysłać na kilka adresów e-mail, wtedy adresy oddzielamy średnikami); webmaster@serwer.pl?bcc=inny_ktos@gdzies.pl część treści listu; webmaster@serwer.pl?body=poczatek_listu To wszystko można połączyć w jedno za pomocą znaku anpersant &. Zakładki Innym typem linków są zakładki. Dzięki nim przenosimy się do określonego miejsca w dokumencie. Najpierw oczywiście musimy to miejsce oznaczyć: <a name="miejsce_dokumentu">zaznaczone miejsce w dokumencie</a> Później robimy zwykły link, ale przed wartością href dodajemy hash (#): <a href="#miejsce_dokumentu">link do tekstu: 'Zaznaczone miejsce w dokumencie'</a> Jeśli jako wartość wpiszemy tylko #, przeniesiemy się na górę dokumentu. Można zrobić również link do jakiegoś miejsca w innym dokumencie: <a href="plik.html#miejsce_dokumentu">...</a> Odsyłacze na grafice Opcja ta polega na wydzieleniu obszarów na rysunku, które przejmą rolę odsyłaczy. Poniżej widać rysunek, dla którego została napisany przykład: <map name="mapa"> Strona 10
<area shape="rectangle" coords="7, 10, 84, 84" href="1.html"> <area shape="rectangle" coords="107, 15, 145, 65" href="2.html"> <area shape="circle" coords="129, 130, 38" href="3.html"> <area shape="polygon" coords="141, 83, 173, 7, 192, 98" href="4.html"> <area shape="polygon" coords="11, 97, 31, 111, 99, 93, 72, 133, 114, 1 87, 55, 169, 2, 187" href="5.html"> </map> <img src="linki.jpg" border="0" usemap="#mapa"> Pomiędzy tagami <map> </map> zdefiniowane są poszczególne obszary. Później w dodana zostaje informacja o obszarach, które zostaną użyte do grafiki <img usemap="#mapa">. Możemy stosować trzy rodzaje map: kwadrat - podajemy współrzędne przeciwległych rogów; shape="rectangle" okrąg - podajemy współrzędne środka okręgu oraz długość promienia; shape="circle" wielokąt - podajemy współrzędne co najmniej trzech wierzchołków; shape="polygon" Link docelowy może być daleki, bliski jak również może to być zakładka. Mamy dwa typy wykazów: nieuporządkowany (punktory); uporządkowany (numeracja); Wykazy nieuporządkowane tworzymy następująco: <ul> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt Wykazy Znaczniki <ul> </ul> otwierają i zamykają listę, a <li> to poszczególne punkty. Symbolem graficznym wcale nie musi być kropka: Strona 11
<ul type="sqare"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt <ul type="circle"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> o pierwszy punkt o drugi punkt o trzeci punkt Wykaz uporządkowany jest wykazem ponumerowanym, a poszczególne punkty zamykamy tagami <ol> : <ol> <li> punkt pierwszy <li> punkt drugi <li> punkt trzeci 1. pierwszy punkt 2. drugi punkt 3. trzeci punkt Dzięki parametrowi start="3" możemy ustalić od jakiej liczby ma zacząć się lista. Ponadto mamy do wyboru jeszcze cztery sposoby numerowania (oprócz powyższego): <ol type="a"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt a. pierwszy punkt b. drugi punkt c. trzeci punkt <ol type="a"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt A. pierwszy punkt B. drugi punkt C. trzeci punkt <ol type="i"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt i. pierwszy punkt ii. drugi punkt iii. trzeci punkt <ol type="i"> Strona 12
<li>pierwszy punkt <li>drugi punkt <li>trzeci punkt I. pierwszy punkt II. drugi punkt III. trzeci punkt Wykazy różnego typu możemy ze sobą łączyć, np.: <ol type="i"> <li>część pierwsza <ol type="1"> <li>rozdział pierwszy <ul type="square"> <li>dodatek <li>dodatek </ul> <li>rozdział drugi <li>rozdział trzeci <ul type="square"> <li>dodatek <li>dodatek </ul> <li>rozdział czwarty <li>część druga <ol type="1"> <li>rozdział pierwszy <ol type="a"> <li>podrozdział <li>podrozdział <li>podrozdział <li>rozdział drugi <li>rozdział trzeci <ol type="a"> <li>podrozdział I. Część pierwsza 1. Rozdział pierwszy dodatek dodatek 2. Rozdział drugi 3. Rozdział trzeci dodatek dodatek 4. Rozdział czwarty II. Część druga 1. Rozdział pierwszy a. podrozdział b. podrozdział c. podrozdział 2. Rozdział drugi 3. Rozdział trzeci a. podrozdział Strona 13
Tabele Przy tworzeniu tabel będziemy posługiwać się głównie czterema tagami: definicja tabeli; <table> </table> definicja wiersza; definicja komórki; <td> </td> definicja nagłówka; <th> </th> Najprostsza tabela wygląda tak: <table> <th>nagłówek a1</th> <th>nagłówek a2</th> <th>nagłówek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> </table> nagłówek a1 nagłówek a2 nagłówek a3 komórka b1 komórka b2 komórka b3 komórka c1 komórka c2 komórka c3 Jak widać nagłówek od zwykłej komórki różni się tym, że w nagłówku czcionka jest automatycznie pogrubiona. Aby tabela miała obramowanie, w znaczniku rozpoczynającym tabelę dodajemy parametr border="piksele", którego wartością jest grubość obramowania, np.: <table border="5"> <th>nagłówek a1</th> <th>nagłówek a2</th> <th>nagłówek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> Strona 14
<td>komórka c3</td> </table> nagłówek a1 nagłówek a2 nagłówek a3 komórka b1 komórka b2 komórka b3 komórka c1 komórka c2 komórka c3 Obramowanie inne niż domyślne mogą mieć również komórki. Ustalamy to za pomocą parametru cellspacing="piksele". Dodatkowo istnieje parametr cellpadding="piksele", dzięki któremu ustalamy marginesy dla komórek, tzn. odległość zawartości komórki od jej obramowania Za pomocą parametru bordercolor="kolor" możemy ustalić kolor obramowania: <table border="5" bordercolor="blue"> <th>nagłowek a1</th> <th>nagłowek a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> </table> nagłowek a1 nagłowek a2 nagłowek a3 komórka b1 komórka b2 komórka b3 komórka c1 komórka c2 komórka c3 Można również zastosować metodę cieniowanego obramowania za pomocą tagów: bordercolorlight="kolor" oraz bordercolordark="kolor". Pierwszy tag odnosi się do jasnego obramowania (górna i lewa krawędź) drugi do ciemnego (dolna i prawa krawędź): <table border="5" bordercolorlight="yellow" bordercolordark="brown"> <th>nagłowek a1</th> <th>nagłowek a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> Strona 15
</table> Jak widać w powyższym przykładzie w komórkach kolor obramowania jest odwrotny niż całej tabeli. Ale kolor cieniowanego obramowania można zastosować również do poszczególnego wiersza lub komórki. Wystarczy zastosować odpowiednie parametry do definicji wiersza lub komórki. Za pomocą parametru bgcolor="kolor" możemy ustalić kolor tła tabeli (lub poszczególnych komórek, np.: <table border="5" bgcolor="aqua" bordercolorlight="yellow" bordercolordark="brown"> <th>nagłowek a1</th> <th>nagłowek a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> </table> Szerokość tabeli (lub komórki) podajemy za pomocą parametru width="piksele", a wysokość height="piksele": Zawartość komórek możemy wyrównywać w pionie valign="wyrównanie"; możliwe wartości to: top - do góry, center - do środka, bottom - do dołu i poziomie align="wyrównanie"; możliwe wartości to: left - do lewej, center - do środka, right - do prawej: <table border="2" width="500" bordercolor="brown"> <tr height="50" align="center"> <th width="200" valign="top">nagłowek a1</th> <th valign="center">nagłowek a2</th> <th valign="bottom">nagłowek a3</th> <tr align="left"> <td width="200">komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <tr align="right"> <td width="200">komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> Strona 16
</table> Komórki można łączyć używając parametrów rowspan="ilość_złączonych_komórek_w_pionie" i colspan="ilość_złączonych_komórek_w_poziomie", np.: <table border="2" bgcolor="aqua" bordercolorlight="yellow" bordercolordark="brown"> <th colspan="2">nagłowek a1 i a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td rowspan="2">komórka b2 i c2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c3</td> </table> Kaskadowe arkusze stylów Kaskadowe Arkusze Stylów (CSS) są stosunkowo nowym narzędziem webmastera, jednak już są bardzo popularne. Dzięki nim możemy dokładniej określić wygląd strony, rezygnując nawet z niektórych znaczników HTML. CSS 2.0 zawiera aż 122 właściwości dotyczące nie tylko tekstu. Definiuje się je wg schematu: selektor1 {właściwość1: wartość1; właściwość2: wartość2} selektor2 {właściwość3: wartość3; właściwość4: wartość4} Selektor to jakiś tag (np. h2 - nagłówek drugiego stopnia), któremu zostaną przypisane jakieś właściwości zamknięte nawiasami klamrowymi {}. Teraz pojawia się pytanie gdzie to umieścić? Są trzy sposoby: styl osadzony - definiujemu w nagłówku dokumentu <head> </head> pomiędzy znacznikami <style> </style> i komentarza, np.: <style type="text/css"> <!-- selektor1 {właściwość1: wartość1; właściwość2: wartość2} //--> </style> Strona 17
styl zewnętrzny - styl zdefiniowany jest w oddzielnym pliku, a w nagłówku dokumentu robimy do niego specjalny link: <link href="styl.css" rel="stylesheet" type="text/css">; w pliku styl.css wszystko definiujemy tak jak w stylu osadzonym, np.: <!-- selektor1 {właściwość1: wartość1; właściwość2: wartość2} //--> powyższe dwa sposoby ustalają styl znacznika w całym dokumencie; styl wpisany - styl definiujemy tylko dla jednago znacznika używając parametru style="właściwości_stylu", np.: <p style="selektor1 {właściwość1: wartość1; właściwość2: wartość2 }">... Czasami chcemy, stworzyć wyjątek stylu od jakiegoś znacznika dla jednego elementu. Wtedy z pomocą przychodzą nam klasy. Definiujemy styl dla nagłówków drugiego stopnia: h2 {font-family: Courier New; text-align: center; color: blue} Będą one niebieskie, wyrównane do środka i napisane czcionką kroju Courier New, ale chcemy, aby jeden lub więcej nagłówków było w kolorze czerwonym. W związku z tym definiujemy klasę: wyjatek {color: red} A do tagu dodajemy odpowiedni parametr: <h2 class="wyjatek">. Przy definiowaniu klasy wystarczy podać tylko te właściwości, które różnią klasę od stylu. Należy pamiętać, że nie da się skasować formatowania danego selektora. Np. jeśli selektorowi <b> </b> nadamy styl font-weight: none (waga czcionki żadna tzn. min. brak pogrubienia) to i tak znacznik ten będzie wytłuszczał zaznaczony tekst. Czasami chcemy zdefiniować ten sam styl dla kilku selektorów. Można to zrobić tradycyjnie: h1 {font-family: Times New Roman} h2 {font-family: Times New Roman} h3 {font-family: Times New Roman} albo pogrupować selektory: h1, h2, h3 {font-family: Times New Roman} CSS 2.0 daje nam możliwość zdefiniowania linków w czterech stanach: zwykły link: a:link {formatowanie}; aktywny link: a:active {formatowanie}; odwiedzony link: a:visited {formatowanie}; link w momencie najechania na niego kursorem: a:hover {formatowanie}; Poniżej zebrane są najpopularniejsze (z pominięciem warstw) właściwości kaskadowych arkuszy stylów. Zostały one pogrupowane na kilka grup: właściwości dotyczące tekstu; właściwości dotyczące tła; właściwości dotyczące odstępów i marginesów; właściwości dotyczące obramowania i pasków przewijania; Właściwości dotyczące tekstu Element Opis Możliwe wartości color kolor czcionki wszystkie możliwe kolory font-family krój czcionki wszystkie możliwe kroje czcionek font-size wielkość czcionki w punktach (pt); xx-small, x-small, smaler, small, large, larger, x-large, xx-large font-style styl czcionki normal, italic, oblique font-weight waga (grubość) czcionki lighter, normal, bold, bolder font-variant kapitaliki normal, small_caps Strona 18
text-align wyrównanie tekstu left, right, center, justify text-decoration dekoracja tekstu none, underline, line-through text-indent wcięcie pierwszego wiersza akapitu w punktach (pt), procentach lub pikselach (px) text-transform transformacja tekstu none, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany normal, pre, nowrap / 'niełamliwy' wiersz cursor rodzaj kursora e-resize, ne-resize, n-resize, nw-resize, w-resize, swresize, s-resize, se-resize, hand, crosshair, help, move, text, auto, default, wait Właściwości dotyczące tła Element Opis Możliwe wartości background-attachment tło przewijane/znak wodny scroll, fixed background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") background-position pozycja tła w punktach (pt), procentach lub pikselach (px) background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, no-repeat Właściwości dotyczące odstępów i marginesów Element Opis Możliwe wartości margin-top górny margines w punktach (pt), procentach lub pikselach (px) margin-bottom dolny margines w punktach (pt), procentach lub pikselach (px) margin-left lewy margines w punktach (pt), procentach lub pikselach (px) margin-right prawy margines w punktach (pt), procentach lub pikselach (px) word-spacing odstępy pomiędzy wyrazami w punktach (pt), procentach lub pikselach (px) letter-spacing odstępy pomiędzy znakami w punktach (pt), procentach lub pikselach (px) line-height odstępy pomiędzy wierszami w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące obramowania i pasków przewijania Element Opis Możliwe wartości border-width grubość obramowania w punktach (pt), procentach lub pikselach (px) border-style styl obramowania none, solid, double, inset, outset, groove, ridge border-color kolor obramowania wszystkie możliwe kolory scrollbar-face-color wszystkie możliwe kolory scrollbar-highlight-color wszystkie możliwe kolory scrollbar-shadow-color wszystkie możliwe kolory scrollbar-3dlight-color elementy paska przewijania wszystkie możliwe kolory scrollbar-arrow-color wszystkie możliwe kolory scrollbar-track-color wszystkie możliwe kolory scrollbar-darkshadow-color wszystkie możliwe kolory Strona 19