Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Dodatek: Elementy języków HTML i XHTML

Email Drukuj PDF

Elementy podstawowe

Element

Przykład

Opis

<?xml?>

<?xml version="1.0" encoding="utf-8"?>

Określa, że plik HTML jest złożony zgodnie z regułami języka XML (a więc jest plikiem XHTML). Jednocześnie wstępnie określa kodowanie tekstu w pliku na standard utf-8. Zamiast utf-8 można użyć uboższego standardu kodowania iso-8859-2.

<!DOCTYPE>

Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Definiuje typ dokumentu. Deklaracja ta powinna pojawić się jako pierwszy element kodu HTML. Informuje ona przeglądarkę, z którą wersją języka HTML ma do czynienia.

<html>

<html>

<head>

</head>

<body>

<p>Zawartość dokumentu...</p>

</body>

</html>

Informuje przeglądarkę, że plik zawiera kod HTML. Strona WWW napisana w języku XHTML (bardziej sformalizowanej odmianie języka HTML, której bliżej do uniwersalnego języka znaczników XML) musi zawierać w elemencie <head> dodatkowe parametry w następującej postaci:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<body>

<body>

<p>Oto treść dokumentu.</p>

</body>

Definiuje zawartość dokumentu.

<h1> do <h6>

<h1>To jest nagłówek poziomu 1</h1>

<h2>To jest nagłówek poziomu 2</h2>

<h3>To jest nagłówek poziomu 3</h3>

<h4>To jest nagłówek poziomu 4</h4>

<h5>To jest nagłówek poziomu 5</h5>

<h6>To jest nagłówek poziomu 6</h6>

Definiują nagłówki.

<p>

<p>To jest akapit.</p>

<p>To kolejny akapit.</p>

Definiuje akapit.

<br>

<p>W tym akapicie<br />

zła-<br />

mano wiersz</p>

Wprowadza w akapicie złamania wiersza.

<hr>

<p>Znacznik hr wprowadza linię poziomą:</p>

<hr />

<p>między akapitami</p>

Umożliwia wstawienie na stronie linii poziomej.

<!-->

<!-- Komentarz -->

Znacznik stosowany jest do wstawienia w kodzie XHTML 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 skrypty.

Informacje o dokumencie

Element

Przykład

Opis

<head>

 

Element head 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 elementy: <base>, <link>, <meta>, <script>, <style> i <title>.

<title>

<head>

<title>Tutuł strony</title>

</head>

Definiuje tytuł dokumentu. Tytuł będzie wyświetlany na pasku tytułu przeglądarki.

<meta>

Ten element meta zawiera słowa kluczowe dla wyszukiwarek:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML" />

Ten element meta zawiera opis strony:

<meta name="description" content="Strona o HTML, XML i XHTML" />

Tu umieszczono informacje o ostatniej aktualizacji strony:

<meta name="revised" content="dane_autora, 6/10/99" />

Tu wykorzystano znacznik meta do załadowania innej strony:

<meta http-equiv="refresh" content="6";url=http://nowyadres.com/strona.html" />

W elemencie meta umieszczane są opisy i słowa kluczowe wykorzystywane przez serwisy wyszukujące.

Atrybut wymagany:

content="tekst" — dostarcza informacji, które są stowarzyszone z atrybutami name i http-equiv.

Atrybuty opcjonalne:

name="author|description|keywords|generator |revised|inne" — definiuje nazwę obiektu meta.

http-equiv="content-type|expires| refresh|set-cookie" — definiuje dodatkową akcję, która ma być wykonana (w przykładzie obok będzie to załadowanie innej strony po czasie równym 6 sekund).

<base>

Definiowanie odwołania domyślnego do zasobów zewnętrznych:

W sekcji head umieść element base i podaj w nim pełny adres URL zasobu:

<base href="http://adres_url_zasobu.com/" />

W dokumencie wystarczy już podać tylko adres względny:

<img src="images/mary.gif" />

Definiuje domyślne odwołanie do zasobów zewnętrznych.

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 będą otwierane.

Jeśli strona nie jest układem ramek, element base z atrybutem href pozwoli zdefiniować odwołanie do zewnętrznych zasobów, takich jak dokumenty, obrazy i arkusze stylów.

Atrybuty opcjonalne:

href="url" — definiuje pełny adres URL dla połączeń korzystających z adresowania względnego.

target="_blank|_parent|_self|_top" — 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.

Proste formatowanie tekstu

Element

Przykład

Opis

<b>

<b>Ten tekst jest pisany czcionką pogrubioną</b>

Wprowadza formatowanie fizyczne — tekst pogrubiony.

<strong>

<strong>Ten tekst też jest pisany czcionką pogrubioną</strong>

Wprowadza formatowanie logiczne — tekst pogrubiony.

<i>

<i>Ten tekst jest pisany kursywą</i>

Wprowadza formatowanie fizyczne — kursywa.

<em>

<em>Ten tekst będzie wyróżniony</em>

Wprowadza formatowanie logiczne — tekst przypominający kursywę.

<big>

<big>Tekst wyświetlany czcionką powiększoną.</big>

Definiuje tekst o większym rozmiarze czcionki niż tekst otaczający.

<small>

<small>Tekst wyświetlany czcionką pomniejszoną</small>

Definiuje tekst o mniejszym rozmiarze czcionki niż tekst otaczający.

<sub>

W tekście pojawi się indeks <sub>dolny</sub>

Definiuje indeks dolny.

<sup>

W tekście umieszczono indeks <sup>górny</sup>

Definiuje indeks górny.

<bdo>

<bdo dir="rtl">Tekst będzie pisany na opak!</bdo>

Efekt:

!kapo an ynasip eizdęb tskeT

Zmienia kierunek tekstu. Wymagany atrybut dir.

<dfn>

<dfn>Ten tekst stanowi termin definicji</dfn>

Umożliwia wstawienie do tekstu terminu definicji (tekstu o określonym sposobie formatowania, który wyróżnia go na tle pozostałego tekstu).

<pre>

<pre>Tekst

preformatowany</pre>

W tekście umieszczonym w elemencie pre zachowane zostaną odstępy i łamania wierszy. Tekst będzie wyświetlany czcionką nieproporcjonalną (maszynową).

<code>

<code>Tekst kodu programu</code>

Stosowany do prezentacji kodu programu. Tekst będzie wyświetlany czcionką nieproporcjonalną (maszynową).

<tt>

<tt>Tekst pisany czcionką o stałej szerokości </tt>

Stosowany do oznaczania fragmentów tekstu, które mają być pisane czcionką nieproporcjonalna (maszynową), lecz nie pełnią konkretnej funkcji logicznej.

<kbd>

<kbd>Tekst pisany czcionką komputerową</kbd>

Stosowany do wyróżniania fragmentów tekstu reprezentujących informacje przeznaczone do wprowadzenia przez użytkownika z klawiatury. Tekst będzie wyświetlany czcionką nieproporcjonalną (maszynową).

<var>

<var>Zmienna</var>

Stosowany do wyróżniania fragmentów tekstu reprezentujących informacje zmienne (przeznaczone do zastąpienia przez użytkownika własnymi). Tekst będzie wyświetlany czcionką nieproporcjonalną (maszynową).

<samp>

<samp>Tekst przykładowy</samp>

Stosowany do wyróżniania fragmentów tekstu stanowiących gotowe przykłady kodu. Tekst będzie wyświetlany czcionką nieproporcjonalną (maszynową).

Najpopularniejsze encje XHTML

Encja

Znak

Opis

&nbsp;

 

Twarda spacja

&lt;

Znak mniejszości

&gt;

Znak większości

&quot;

"

Cudzysłów

&copy;

©

Znak copyright (prawa autorskie zastrzeżone)

&trade;

TM

Znak trademark (znak handlowy)

&ndash;

-

Półpauza (o szerokości litery n)

&mdash;

Pauza (o szerokości litery m)

&bdquo;

"

Znak otwierający cudzysłów

&rdquo;

"

Znak zamykający cudzysłów

&laquo;

«

Znak otwierający cudzysłów drugiego rzędu

&raquo;

»

Znak zamykający cudzysłów drugiego rzędu

Bloki tekstu

Element

Przykład

Opis

<acronym>

<acronym title="World Wide Web" lang="en">WWW<acronym>

Rozwinięcie skrótowca. 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 myszy (w przykładzie obok — nad skrótem „WWW”).

Dodatkowy atrybut lang pozwala określić język, w którym zapisane jest rozwinięcie skrótowca.

<abbr>

<abbr title="na przykład">np.</abbr>

Rozwinięcie skrótu. 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 myszy (w przykładzie obok — nad skrótem „np.”).

Dodatkowy atrybut lang pozwala określić język, w którym zapisane jest rozwinięcie skrótu.

<address>

<address>

Jan Kowalski<br />

Gliwice<br />

ul. Zwycięstwa 888</address>

Element definiuje blok adresu. Można 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.

<blockquote>

<q>

<html>

<body>

Oto tekst cytowany:

<blockquote>

To cytat. To cytat. To cytat. To cytat. To bardzo długi cytat.

</blockquote>

A teraz niezbyt długi cytat:

<q>

A to cytat.

</q>

</body>

</html>

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.

Atrybuty opcjonalne elementu blockquote:

cite="url" — adres URL strony, z której pochodzi cytowana informacja.

<cite>

<cite>Tekst cytatu</cite>

Do tekstu zastosowane zostanie wyróżnienie przypominające kursywę.

<ins>

zapadało <ins>osiemdziesiąt</ins> procent dróg

Umożliwia zaznaczenie tekstu wstawionego. Stosuj z <del>, aby 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ć odnośnik do dokumentu, w którym zmiany zostały wyjaśnione.

daytime="yyyymmdd" — określa czas wprowadzenia zmian.

<del>

zapadało <del>osiemdziesiąt</del> procent dróg

Umożliwia zaznaczenie tekstu usuniętego. Tekst będzie wyświetlany jako przekreślony.

Atrybuty opcjonalne takie same jak dla elementu ins.

Odnośniki i etykiety

Element

Przykład

Opis

<a>

<a href="stronaX.html">Oto połączenie</a> do strony X danej witryny.

Efekt:

Oto połączenie do strony X danej witryny.

<a href="http://www.microsoft.com/">

Oto połączenie</a> do strony w Internecie.

Efekt:

Oto połączenie do strony w Internecie.

<a href="http://www.grush.one.pl/">Odwiedź nas!!</a>

Aby utworzyć połączenie do określonej sekcji danej strony, zdefiniuj etykietę:

<a name="opis">Opis</a>

a potem w dowolnym miejscu strony wstaw połączenie do sekcji o zdefiniowanej nazwie:

<a href="#opis">Przeczytaj opis</a>

Definiuje odnośnik lub etykietę. Umożliwia tworzenie połączeń do innych dokumentów oraz określonych miejsc w tym samym dokumencie.

Atrybut href="url" umożliwia podanie docelowego adresu URL odnośnika.

Atrybut name="nazwa_sekcji" definiuje 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.

<link>

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" />

</head>

Określa relację pomiędzy dwoma dokumentami. Umieszczany jest w sekcji head i może pojawiać się wielokrotnie.

Atrybut href="url" umożliwia podanie adresu URL włączanego dokumentu.

Atrybut rel="typ" określa rodzaj powiązania między dokumentami. Na przykład typ stylesheet oznacza, że plik wskazywany przez atrybut href (typu MIME text/css) ma zostać potraktowany jako zewnętrzny arkusz stylu CSS.

Atrybut type="typ_MIME" określa typ MIME dokumentu, którego dotyczy. Na przykład arkuszom stylu CSS odpowiada typ MIME text/css.

Ramki

Element

Przykład

Opis

<frameset>

Prosty układ pionowych ramek:

<frameset cols="25%,75%">

<frame src="ramka_a.html" />

<frame src="ramka_b.html" />

</frameset>

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>

Złożony układ ramek:

<frameset rows="50%,50%">

<frame src="ramka_a.html" />

<frameset cols="25%,75%">

<frame src="ramka_b.html" />

<frame src="ramka_c.html" />

</frameset>

</frameset>

Definiuje układ ramek i sposób podziału okna przeglądarki na 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 XHTML — 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.

<frame>

Patrz przykład powyżej

Definiuje ramkę. Korzystając z ramek, nie stosuj elementu body — zastępuje go frameset.

Atrybuty opcjonalne:

longdesc="url" — połączenie do dokumentu zawierającego opis ramki; przydatne w przypadku przeglądarek, które nie obsługują ramek.

marginheight="piksele" — szerokość marginesu w pionie.

marginwidth="piksele" — szerokość marginesu w poziomie.

frameborder="0|1" — wyświetlanie 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" — włączanie przewijania zawartości (włączone przewijanie, wyłączone i wprowadzane automatycznie, gdy zawartość jest obszerna).

name="nazwa" — nazwa ramki.

src="nazwa_pliku|url" — plik, którego zawartość pojawi się w ramce.

<noframes>

<frameset cols="25%, 25%,*">

<noframes>Opis zawartości ramek lub inna informacja</noframes>

<frame src ="plik1.html" />

<frame src ="plik2.html" />

<frame src ="plik3.html" />

</frameset>

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ą.

<iframe>

<html>

<body>

<iframe src="plik.html" width="500" scrolling="yes" />

</body>

</html>

Definiuje ramkę wpisaną — jest to ramka w obrębie strony WWW.

Atrybuty opcjonalne:

src="url" — określa adres dokumentu, który zostanie wyświetlony w ramce wpisanej.

height="piksele" — wysokość ramki w pikselach.

width="piksele" — szerokość ramki w pikselach.

longdesc="url" — adres dokumentu, w którym umieszczono opis zawartości ramki.

marginheight="piksele" — szerokość marginesu w pionie.

marginwidth="piksele" — szerokość marginesu w poziomie.

frameborder="0|1" — wyświetlanie obramowania.

scrolling="yes|no|auto" — włączanie przewijania zawartości.

Formularze

Element

Przykład

Opis

<form>

<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" />

<input type="reset" value="Wyczyść" />

</form>

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.

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.

Niektóre atrybuty opcjonalne:

method="get|post" — metoda HTTP przesyłania danych do serwera. 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.

<input>

Pole tekstowe:

<form>

Imię:

<input type="text" name="imie" />

<br>

Nazwisko:

<input type="text" name="nazwisko" />

</form>

Przyciski opcji:

<form>

<input type="radio" name="opcja" value="kot" /> Kot

<br />

<input type="radio" name="opcja" value="pies" /> Pies

</form>

Pola wyboru:

<form>

<input type="checkbox" name="lady" />Kobieta

<br>

<input type="checkbox" name="man" />Mężczyzna

</form>

Przycisk wysyłania formularza:

<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>

Formularz wysyłający list e-mail:

<html>

<body>

<form action="MAILTO:adres@pocztowy " method="post" enctype="text/plain">

<h3>Ten formularz wyśle e-mail 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>

Definiuje pole wprowadzania danych.

Atrybuty opcjonalne:

type="text|checkbox|radio|password| hidden|submit|reset|button|file|image" — typ pola danych; domyślnym typem jest text (tekst|pole wyboru|opcja|hasło|pole ukryte|przycisk przesyłania danych|przycisk czyszczenia zawartości|przycisk|plik|obraz).

name="nazwa_pliku" — nazwa pola; przyciski opcji są grupowane poprzez nadawanie im tych samych nazw, dzięki czemu możliwe jest wybranie tylko jednego przycisku z grupy.

value="wartość" — w przypadku 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ą.

size="liczba_znaków" — pozwala określić rozmiar pola w znakach (domyślna wartość to 20); stosowany dla pól typu password i text. Zamiast liczby można stosować znak #.

maxlength="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 zawierającego obraz; stosowany dla pól typu image.

disabled="disabled" — określa, że użytkownik nie ma żadnych uprawnień do tego pola.

<textarea>

<textarea name="tekst" cols="40" rows="20">

Tekst

</textarea>

Definiuje wielowierszowe pole tekstowe. W takim polu użytkownik może wprowadzać dowolnie długi tekst.

Wymagane atrybuty:

cols="liczba" — szerokość pola w znakach.

rows="liczba" — wysokość pola w znakach.

Atrybuty opcjonalne:

disabled="disabled" — uniemożliwia korzystanie z pola tekstowego.

name="nazwa_pola" — określa nazwę pola, dzięki czemu można odwoływać się do niej w skryptach i formularzach.

readonly="readonly" — użytkownik nie może zmieniać zawartości pola.

<button>

 

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.

Atrybuty opcjonalne:

disabled="disabled" — przycisk niedostępny dla użytkownika.

type="button|reset|submit" — 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ść" — określa wartość domyślną, którą można modyfikować za pomocą skryptu.

<select>

<select>

<option value="kot">Kot</option>

<option value="pies">Pies</option>

<option value="rybka">Rybka</option>

<option value="krokodyl">Krokodyl</option>

</select>

Element select definiuje pole listy rozwijanej.

Atrybuty opcjonalne:

disabled="disabled" — 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.

<optgroup>

<select>

<optgroup label="Samochody">

<option value="volvo">Fiat</option>

<option value="Syrena">Mercedes</option>

</optgroup>

<optgroup label="Dobre samochody">

<option value="mercedes">Maluch</option>

<option value="audi">Syrena</option>

</optgroup>

</select>

Grupuje opcje.

Atrybuty opcjonalne:

disabled="disabled" — wyłącza grupę opcji.

label="tekst" — etykieta grupy opcji.

<option>

Patrz przykład dla elementu <select>

Jest to pozycja listy zdefiniowanej za pomocą elementu select.

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 możliwość wyboru opcji.

label="tekst" — etykieta opcji.

value="tekst" — określa wartość opcji.

selected="selected" — wskazuje domyślnie wybraną pozycję listy.

<label>

<form>

<label for="Imie" accesskey="I"><u>I</u>mię:</label>

<input type="text" id="Imie" size=30 />

<label for="email" accesskey="E"><u>E</u>mail:</label>

<input type="text" id="Email" size=30 />

<label for="Tel" accesskey="T"><u>T</u>el:</label>

<input type="text" id="Tel" size=30 />

<label for="uwagi" accesskey="C"><u>C</u>o powiesz:</label>

<textarea id="uwagi" cols="10" rows="2" />

</form>

Umożliwia zdefiniowanie etykiet dla pól formularza.

Atrybuty opcjonalne:

for="id_pola" — wskazuje element, któremu przyporządkowana zostanie etykieta.

accesskey="klawisz" — określa klawisz skrótu klawiaturowego Alt+klawisz, który pozwoli na uaktywnienie pola i automatyczne przeniesienie do niego punktu wstawiania. W przykładzie naciśnięcie skrótu Alt+E spowoduje uaktywnienie pola Email.

Wskazówka
Niektóre przeglądarki WWW korzystają z innej kombinacji klawiszy przy nawigacji do pól wyróżnionych atrybutem accesskey. Na przykład przeglądarka Mozilla Firefox wymaga naciskania kombinacji Ctrl+Alt+klawisz.

<fieldset>

<fieldset>

Waga <input type="text" size="3" />

Wzrost<input type="text" size="3" />

</fieldset>

Pozwala umieścić obramowanie wokół tekstu i innych elementów. Stosowany tylko w formularzach.

<legend>

<fieldset>

<legend>Informacje o wadze i wzroście:</legend>

Waga <input type="text" size="3" />

Wzrost<input type="text" size="3" />

</fieldset>

Pozwala dołączyć etykietę do elementu fieldset.

Listy wypunktowane i numerowane

Element

Przykład

Opis

<ul>

<ul>

 <li>Amelia</li>

 <li>Gladiator</li>

</ul>

Definiuje listę wypunktowaną — jej pozycje oznaczone są znakami wypunktowania.

<ol>

<ol>

 <li>Amelia</li>

 <li>Gladiator</li>

</ol>

Definiuje listę numerowaną — jej pozycje oznaczone są kolejnymi liczbami.

<li>

Patrz przykłady dla elementów ul i ol

Definiuje pozycję listy.

<dl>

<dl>

 <dt>Kot</dt>

 <dd>Mały drapieżnik futerkowy</dd>

 <dt>Człowiek</dt>

 <dd>Duży drapieżnik</dd>

</dl>

Definiuje listę definicji.

<dt>

Patrz przykład dla elementu dl

Definiuje termin na liście definicji.

<dd>

Patrz przykład dla elementu dl

Definiuje wyjaśnienie terminu z listy definicji.

Obrazy

Element

Przykład

Opis

<img>

<p>To jest moje zdjęcie: <img border="0" src="zdjecie.gif" alt="Zdjęcie" style="width: 300px; height: 200px;"/></p>

Pozwala wstawić obraz.

Wymagane atrybuty:

src="url" — tu podajesz lokalizację pliku zawierającego obraz.

alt="tekst" — krótki opis obrazu (tak zwany tekst alternatywny), prezentowany na ekranie w przypadku, gdyby pobranie lub wyświetlenie obrazu było niemożliwe.

Uwaga: polecane jest podanie rozmiaru obrazu (w pikselach — jednostka miary px) za pomocą atrybutów stylu CSS width i height. Dzięki temu przeglądarka będzie w stanie zarezerwować na stronie właściwą powierzchnię jeszcze przed pobraniem obrazu z serwera.

<map>

 

Definiuje obraz jako mapę odsyłaczy (obraz podzielony na obszary aktywne o funkcjach połączeń). Nazwa stosowana w elemencie map występuje jako wartość atrybutu usemap elementu <img>.

Atrybut opcjonalny:

name="nazwa_mapy".

<area>

 

Definiuje obszar aktywny mapy odsyłaczy. Zawsze jest zagnieżdżony w elemencie map.

Atrybut wymagany:

alt="tekst" — tekst alternatywny.

Atrybuty opcjonalne:

coords="x,y,r| x1,y1,..xn,yn|x1,y1,x2,y2" — 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 prawego górnego i lewego dolnego.

shape="circle|poly|rect|default" — definiuje kształt obszaru: okrąg|wielokąt|prostokąt|domyślny.

href="url" — adres URL dokumentu, do którego prowadzi połączenie stowarzyszone z obszarem aktywnym.

nohref="true|false" — wyłącza obszar z mapy odsyłaczy.

Tabele

Pamiętaj: tabele bardzo często wykorzystuje się do dzielenia powierzchni strony WWW na komórki wypełniane później treścią, a więc do projektowania układu strony.

Element

Przykład

Opis

<table>

<html>

<head>

<title>Tabela</title>

</head>

<body>

<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>

Tworzy tabelę — jest „opakowaniem” pozostałych elementów. Domyślnie tabele nie mają obramowań.

Atrybuty opcjonalne:

cellspacing="piksele" — wolny obszar między komórkami.

cellpadding="piksele" — wolny obszar między krawędziami komórki a zawartością.

Uwaga: w przypadku języka XHTML zaleca się rezygnację z korzystania z atrybutów cellspacing i cellpadding i zastępowanie ich definicjami CSS korzystającymi z selektorów następstwa elementów oraz atrybutów stylu padding i margin.

<caption>

Patrz przykład dla elementu table

Tytuł tabeli. Jest opcjonalny i umieszczany w obrębie elementu table, przed definicjami wierszy.

<th>

Patrz przykład dla elementu table

Komórka nagłówka. Umożliwia nadanie tabeli właściwej struktury logicznej oraz proste zróżnicowanie komórek nagłówka i danych pod względem wizualnym.

Atrybuty opcjonalne:

abbr="tekst" — skrócona wersja zawartości.

colspan="liczba_kolumn" — liczba kolumn, na których komórka jest rozpięta.

rowspan="liczba_wierszy" — liczba wierszy, na których komórka jest rozpięta.

<tr>

Patrz przykład dla elementu table

Wiersz tabeli.

<td>

Patrz przykład dla elementu table

Komórka tabeli. Komórki umieszcza się między znacznikami wiersza tabeli.

Atrybuty opcjonalne:

abbr="tekst" — skrócona wersja zawartości.

colspan="liczba_kolumn" — liczba kolumn, na których komórka jest rozpięta.

rowspan="liczba_wierszy" — liczba wierszy, na których komórka jest rozpięta.

<thead>

<tbody>

<tfoot>

<table>

 <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>

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.

Elementy thead, tbody i tfoot są umieszczane — w tej właśnie kolejności — w elemencie table.

<col>

W tym przykładzie każda kolumna z grupy kolumn ma inną szerokość:

<table>

 <colgroup span="3">

  <col width="20" />

  <col width="50" />

  <col width="80" />

 </colgroup>

 <tr>

  <td>1</td>

  <td>2</td>

  <td>3</td>

  <td>4</td>

 </tr>

</table>

Umożliwia zdefiniowanie wartości atrybutów dla kolumn tabeli. Stosuj, gdy chcesz do grupy kolumn zastosować inne atrybuty niż do reszty.

Atrybuty opcjonalne:

span="liczba" — liczba kolumn, do których ustawienia określone w elemencie col są stosowane.

<colgroup>

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>

 <colgroup span="3" style="color:#FF0000;">

 </colgroup>

 <tr>

  <td>1</td>

  <td>2</td>

  <td>3</td>

  <td>4</td>

 </tr>

</table>

Definiuje grupę kolumn, na przykład w celu zróżnicowania formatowania grup kolumn. Element umieszcza się w obrębie elementu table.

Atrybuty opcjonalne:

span="liczba" — liczba kolumn.

Kaskadowe arkusze stylu

Elementy języka XHTML wprost związane ze stylami

Element

Przykład

Opis

<style>

Przykład formatowania dokumentu za pomocą stylów zdefiniowanych w elemencie style:

<html>

<head>

<style type="text/css">

h1 { color: red; }

h3 { color: blue; }

</style>

</head>

<body>

<h1>Nagłówek 1</h1>

<h3>Nagłówek 3</h3>

</body>

</html>

Przykład osadzonego arkusza stylów:

<head>

<style type="text/css">

body { background-color: red; }

p {margin-left: 20px}

</style>

</head>

Zewnętrzny arkusz stylów:

<head>

<link rel="stylesheet" type="text/css" href="moj_styl.css" />

</head>

Styl wpisany:

<p style="color: red; margin-left: 20px;">

To jest akapit!

</p>

Definiuje styl w dokumencie. Umieszczany jest w sekcji head.

Atrybuty:

type="text/css|text/javascript" — typ arkusza stylu: kaskadowy arkusz stylu CSS|kaskadowy arkusz stylu JavaScript.

<div>

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ź.

Element div definiuje blokową sekcję dokumentu. Umożliwia to stosowanie do sekcji różnych stylów. Charakter blokowy oznacza, że sekcja rozpoczyna się od nowego wiersza, a elementy następujące po niej również muszą zaczynać się od nowego wiersza.

<span>

<p>To jest tekst akapitu <span style="color:#0000FF;">Tu wydzielono sekcję w kolorze niebieskim.</span> Dalej tekst akapitu jest znów czarny.</p>

Element span definiuje wpisaną sekcję dokumentu. Umożliwia to stosowanie do sekcji różnych stylów. Charakter wpisany oznacza, że sekcja rozpoczyna się w bieżącym miejscu dokumentu, a następujące po niej elementy kontynuują bieg tekstu.

Najczęściej stosowane atrybuty kaskadowych arkuszy stylów

color

Kolor elementu. Możliwe wartości: oznaczenie lub kod koloru.

background-color

Kolor tła elementu. Możliwe wartości: oznaczenie lub kod koloru.

background-image

Nazwa pliku graficznego używanego do rysowania tła elementu.

border-width

Szerokość obramowania. Możliwe wartości: thin|medium|thick|grubość — cienkie|średnie|długie|dowolne.

border-color

Kolor obramowania. Możliwe wartości: oznaczenie lub kod koloru.

border-style

Styl obramowania. Możliwe wartości: none|dotted|dashed|solid|double|groove|ridge|inset|outset — brak|kropkowe|kreskowe|pełne|podwójne|przestrzenne|przestrzenne|przestrzenne|przestrzenne.

border

Wspólne określenie stylu obramowania. Możliwe wartości: oddzielone spacjami kolejno: szerokość obramowania, styl obramowania i kolor obramowania. Przykład:

border: 2px solid green;

font-family

Nazwa kroju pisma. Możliwe wartości: nazwy krojów pisma. Możliwe jest podanie kilku nazw rozdzielonych przecinkami — przeglądarka wykorzysta pierwszy dostępny krój pisma.

Standardowe kroje pisma:

serif|sans-serif|monospace|cursive|fantasy — szeryfowa|bezszeryfowa|nieproporcjonalna|kursywa|ozdobna.

font-size

Rozmiar czcionki. Najczęściej podawany w pikselach (px) lub punktach drukarskich (pt).

font-variant

Odmiana kroju pisma. Możliwe wartości: normal|small-caps — normalna|wersaliki.

font-style

Styl kroju pisma. Możliwe wartości: normal|italic — normalny|kursywa.

font-weight

Grubość czcionki. Możliwe wartości: normal|lighter|bold|bolder — normalna|wyszczuplona|pogrubiona|mocniej pogrubiona.

text-align

Sposób wyrównywania tekstu w ramach akapitu. Możliwe wartości: left|center|right|justify — do lewej|centrowanie|do prawej|justowanie.

vertical-align

Sposób wyrównywania tekstu w pionie. Możliwe wartości: bottom|middle|top — do dolnej krawędzi|centrowanie|do górnej krawędzi.

margin

Margines elementu niezawierający w sobie tła (przezroczysty). Możliwe wartości: cztery liczby oddzielone spacjami, określające szerokość marginesów w kolejności: górny, prawy, dolny, lewy.

padding

Dodatkowy margines elementu zawierający w sobie tło. Możliwe wartości: cztery liczby oddzielone spacjami, określające szerokość marginesów w kolejności: górny, prawy, dolny, lewy.

Wyróżnione klasy elementów XHTML

a:hover

Odnośnik podświetlony przez wskazanie wskaźnikiem myszki.

a:visited

Odnośnik prowadzący do strony już odwiedzonej przez użytkownika.

a:visited:hover

Odnośnik prowadzący do strony już odwiedzonej przez użytkownika i ponadto podświetlony przez wskazanie wskaźnikiem myszki.

Korzystanie z kaskadowych arkuszy stylów

Definiowanie stylu elementu

<style>

p {

   color:blue;

}

</style>

<p>Ten tekst będzie niebieski.</p>

Klasy elementów

<style>

p.niebieski {

   color: blue;

}

p.czerwony {

   color: czerwony;

}

</style>

<p class="niebieski">Ten tekst będzie niebieski.</p>

<p class="czerwony">Ten tekst będzie czerwony.</p>

<p>A ten tekst będzie czarny.</p>

Niezależne klasy elementów

<style>

.niebieskie {

   background-color: blue;

}

</style>

<p class="niebieskie">Ten tekst będzie miał niebieskie tło.</p>

<table><tr><td class="niebieskie">

Ta komórka tabeli też będzie miała niebieskie tło.

</td></tr></table>

Następstwo elementów

<style>

div.blok p {

   background-color: blue;

}

</style>

<p>Ten akapit tekstu nie będzie miał niebieskiego tła.</p>

<div class="blok">

 <p>A ten akapit tekstu będzie miał niebieskie tło, gdyż znajduje się wewnątrz bloku div klasy 'blok'.</p>

</div>

Programowanie

<script>

<script type="text/javascript">

<!—

document.write("Hej, to ja!")

//-->

</script>

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 może pojawić się on jako tekst na ekranie).

Atrybut konieczny:

type="text/ecmascript|text/javascript| text/jscript|text/vbscript|text/vbs| text/xml" — typ MIME skryptu.

Atrybuty opcjonalne:

charset="strona_kodowa" — nazwa standardu kodowania znaków, którymi zapisany jest tekst skryptu. Standard kodowania znaków musisz określić, jeśli masz zamiar w tekście skryptu używać znaków nienależących do alfabetu łacińskiego, na przykład polskich znaków diakrytycznych.

src="url" — adres zewnętrznego pliku zawierającego skrypt.

Uwaga: element <script> wymaga obecności znacznika zamykającego. Nawet jeżeli stosuje się go do wczytywania zawartości zewnętrznego pliku zawierającego kod skryptu, należy zastosować pełny zapis:

<script type="text/javascript" src="skrypt.js"></script>

<noscript>

JavaScript:

<script type="text/javascript">

<!—

document.write("Hej, to ja!")

//-->

</script>

<noscript>Twoja przeglądarka nie obsługuje skryptów JavaScript!</noscript>

VBScript:

<script type="text/vbscript">

<!—

document.write("Hej, to ja!")

'-->

</script>

<noscript>Twoja przeglądarka nie obsługuje skryptów VBScript!</noscript>

Element noscript definiuje zawartość alternatywną, która będzie przydatna, jeśli skrypt nie będzie mógł zostać wykonany. Przeglądarki, które obsługują skrypty, ignorują ten element.

<object>

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">

<param name="BorderStyle" value="1">

<param name="MousePointer" value="0">

<param name="Enabled" value="1">

<param name="Min" value="0">

<param name="Max" value="10">

</object>

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 XHTML. Znacznik <param> definiuje ustawienia dla wstawianego obiektu.

Niektóre atrybuty opcjonalne:

archive="url1,url2,...,urln" — 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 bazę kodu (codebase) dla obiektu. Składnia zależy od obiektu.

codetype="typ_MIME" — typ MIME obiektu.

data="url" — URL odnoszący się do danych obiektu.

height="piksele|wartość%" — wysokość okna obiektu.

width="piksele|wartość%" — szerokość okna obiektu.

name="tekst" — nazwa obiektu.

standby="tekst" — informacja dla użytkownika wyświetlana w trakcie ładowania obiektu.

type="typ_MIME" — typ danych wyspecyfikowanych w atrybucie data.

usemap="url" — ulokowanie stowarzyszonej z obiektem mapy odnośników.

<param>

Patrz przykład dla obiektu object

Element param pozwala zdefiniować ustawienia dla obiektów wstawianych w dokumentach XHTML.

Atrybut wymagany:

name="tekst" — nazwa parametru.

Atrybuty opcjonalne:

id="tekst" — jednoznaczny identyfikator parametru.

value="wartość" — wartość parametru.

valuetype="data|ref|object" — typ atrybutu value.

type="typ_MIME" — typ MIME.

Oznaczenia i kody kolorów

Kod koloru

Kolor

aqua

turkusowy

black

czarny

blue

niebieski

fuchsia

jasnofioletowy

gray

szary

green

zielony

lime

jasnozielony

maroon

brązowy

navy

granatowy

olive

oliwkowy

purple

fioletowy

red

czerwony

silver

srebrny

teal

ciemnoturkusowy

white

biały

yellow

żółty

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15804626