kurs HTML

Elementy blokowe i liniowe

O rozdziale: W tej części mówimy o poleceniach języka HTML, które wprowadzają tzw. elementy blokowe, będące podstawowymi, strukturalnymi składnikami budulcowymi strony, jak śródtytuły czy akapity. Elementy blokowe są takimi fragmentami, które zajmują samodzielne miejsce - nie można umieścić obok siebie, w jednej linii, dwóch elementów blokowych, np. dwa akapity czy dwa śródtytuły mogą występować zawsze jeden pod drugim. Przeciwieństwem elementów blokowych są elementy wierszowe (liniowe), które mogą występować obok siebie, w jednym wierszu, jak <span> czy <small>.

Tytuły (nagłówki)

Tytuły, zwane też śródtytułami lub nagłówkami (heading), są podstawowymi elementami dzielącymi dokument na logiczne części. Pełnią one analogiczną rolę, jak nagłówki w gazecie. W języku HTML mamy do dyspozycji sześć poziomów tytułów, które można stosować hierarchicznie - tytuł stopnia drugiego, z punktu widzenia logiki treści, jest podrzędny w stosunku do tytułu stopnia pierwszego, a trzeci - w stosunku do drugiego.

Kod:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Przykłady:

To jest tytuł pierwszego stopnia

To jest tytuł drugiego stopnia

To jest tytuł trzeciego stopnia

To jest tytuł czwartego stopnia

To jest tytuł piątego stopnia

To jest tytuł szóstego stopnia

HTML zrezygnował z formatowania śródtytułów za pomocą atrybutów polecenia Hx - można je za to swobodnie, i znacznie bogaciej, formatować za pomocą stylów, określając atrybuty czcionki, wyrównanie i wcięcie tekstu, kolor, marginesy i obramowania itd. Przykład prostego formatowania widzi Czytelnik w tym rozdziale - śródtytuły dowolnego szczebla mają kropkowane podkreślenie subtelnie wyróżniające poszczególne sekcje, zdefiniowane w zewnętrznym arkuszu stylów za pomocą klasy .tyt { border-bottom: dotted 1px black; padding-bottom:10px; }. Po zapisaniu definicji klasy w arkuszu jest ona za każdym razem przywoływana poleceniem <hx class="tyt">treść śródtytułu</hx>.

Kilka innych przykładów, z użyciem stylu lokalnego:

<h1 style="text-align: right; ">Śródtytuł wyrównany do prawego marginesu</h1>

Śródtytuł wyrównany do prawego marginesu

<h1 style="text-align: center; ">Śródtytuł ustawiony na środku</h1>

Śródtytuł ustawiony na środku

<h1 style="letter-spacing: 1mm; border: 3px double; padding: 10px; ">Obramowany śródtytuł z literami co 1mm</h1>

Obramowany śródtytuł z literami co 1mm

<h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-color: black; ">Śródtytuł w kolorze darkseagreen na tle black</h1>

Śródtytuł w kolorze darkseagreen na tle black

Jak widać, śródtytuły powinniśmy traktować jako podstawowe elementy strukturalne dokumentu, natomiast cała strona prezentacyjna, wizualna, jest przenoszona do kaskadowych arkuszy stylów, za pomocą których możemy swobodnie manipulować tymi elementami, mając nieograniczoną wręcz swobodę ich wizualizacji. Mam nadzieję, że te uwagi wystarczająco dobitnie podkreślają fundamentalną rolę stylów we współczesnym webmasterstwie i konieczność ich biegłego opanowania.

Informacje o Hx

Znacznik akapitu

Akapit jest podstawowym elementem zawierającym tekst w dokumentach HTML i służy do wydzielania fragmentów zawierających jakąś zwartą myśl. Obok śródtytułów jest najważniejszym elementem strukturalnym dokumentu HTML.

Kod:

<p> </p>

Przykład:

To jest nieco dłuższy akapit, który powinien zająć więcej niż jeden wiersz, aby można było poprawnie zobrazować stosowanie tego znacznika w dokumencie internetowym. No, chyba już. Wiersz został przeniesiony.

To jest następny akapit, oddzielony od poprzedniego interlinią. Każdy akapit jest objęty parą znaczników.

Dawniej do poziomego wyrównania akapitu (np. do prawego marginesu strony) stosowane atrybut align, jednak w HTML 4 i XHTML 1.0 został on uznany za przestarzały, a z XHTML 1.1 został wycofany. Wszelkie formatowanie, nieporównanie bogatsze, jest wykonywane za pomocą stylów, podobnie jak w opisanych wyżej śródtytułach.

Kilka innych przykładów formatowania, z użyciem stylu lokalnego:

<p style="text-align: right; ">Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu</p>

Akapit wyrównany do prawego marginesu

<p style="text-align: center; ">Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. </p1>

Akapit ustawiony na środku.

<p style="word-spacing:1em; border: 1px dashed brown; padding:5px; ">Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli</p>

Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli

<p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>

Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza

Jak widać, użytkownik ma pełną swobodę formatowania akapitu, ograniczoną jedynie własną wyobraźnią i bieżącymi potrzebami.

Informacje o P

Znacznik końca wiersza

Znacznik końca wiersza służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem.

Kod:

<br>

Przykład:

Pierwszy akapit, w którym zastosowaliśmy przenoszenie wiersza. Uwaga, przenosimy...
Następny wiersz tego samego akapitu, wpisywany po znaczniku <br>, dzięki któremu został utworzony.

A teraz następny akapit, w którym zastosujemy...
ten sam manewr.
W taki sposób możemy skracać wiersze akapitu i przenosić je niżej, co bardzo się przyda we współczesnej poezji
pisanej
często
w słupkach (taka moda)

Pić
albo nie pić,
oto jest pytanie...
a odpowiedzi
udzieli Ci na nie...
stosowna komisja parlamentarna Sejmu RP

Dawniej stosowano niekiedy kilka kolejnych poleceń <br> do zwiększania pionowych odstępów między elementami, jednak nie jest to technika zalecana i powinno się w tym celu stosować odstępy definiowane za pomocą stylów, np. margin.

W starszych wersjach HTML wykorzystywano atrybut clear służący do "zrzucania" w dół elementów liniowych, aby nie występowały obok siebie, jednak atrybut ten, choć jest obecny w specyfikacji HTML 4 i XHTML 1.0, jest uznany za przestarzały, a z XHTML 1.1 został usunięty. Zaleca się stosowanie stylów.

Informacje o BR

Pozioma linia

Pozioma linia to po prostu kreska ciągnąca się przez całą szerokość okna lub pojemnika, w którym została umieszczona.

Kod:

<hr>

Przykład:

0x01 graphic

W starszych wersjach HTML stosowano szereg atrybutów, które zachowały się jeszcze w HTML 4 i XHTML 1.0, ale tylko w wersjach Transition i Frameset, natomiast w wersji Strict są to atrybuty uznane za przestarzałe, zaś w XHTML 1.1 już w ogóle nie istnieją. Są to atrybuty noshade (pozbawienie cieniowania), width (szerokość), size (grubość) i align (poziome wyrównanie). Formatowanie poziomych linii zostało przeniesione do stylów CSS.

Kilka innych przykładów formatowania, z użyciem stylu lokalnego:

Linii możemy nadać dowolną grubość i kolor: <hr style="height: 5px; color: red">

0x01 graphic

Linia może mieć określoną długość w pikselach lub procentach: <hr style="width: 50%; ">

0x01 graphic

Linia może być dosunięta do prawego marginesu: <hr style="width: 50%; text-align: right; ">

0x01 graphic

Informacje o HR

Blok preformatowany

Blok preformatowany jest blokiem tekstu, w którym uwzględniane są białe znaki znajdujące się w kodzie źródłowym, np. dodatkowe spacje, punkty tabulacji, znaki końca akapitu itd., które są pomijane w innych poleceniach, np. w akapicie.

Kod:

<pre> </pre>

Rezultat:

Tekst preformatowany, wyświetlany czcionką monotypiczną

(o stałej szerokości znaku)

pozwala wprowadzać dodatkowe spacje,

uwzględnia także

punkty tabulacji,

i znaki końca akapitu.

a1 a2 a3 a4

b1 b2 b3 b4

Porównaj ten sam tekst umieszczony w ramach akapitu - jak widać, wszystkie białe znaki zostały "zlane".

Tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku) pozwala wprowadzać dodatkowe spacje, uwzględnia także punkty tabulacji, i znaki końca akapitu. a1 a2 a3 a4 b1 b2 b3 b4

Zwróć uwagę, że jeśli umieścimy w obrębie pre zbyt długi wiersz, w oknie przeglądarki pojawi się dolny suwak, gdyż wiersz nie jest zawinięty.

Informacje o PRE

Blok cytowany

<blockquote> </blockquote>

Bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z uwzględnieniem tabulacji, zaś tekst powinien się znajdować w jakimś elemencie blokowym, np. w akapicie:

<p>Wydaje mi się, że wiersz kończy się fragmentem:</p>
<blockquote>
<p>"Soft you now, the fair Ophelia.<br>
Nymph, in thy orisons,<br>
be all my sins remembered."</p>
</blockquote>
<p>Ale nie mam pewności.</p>

Wydaje mi się, że wiersz kończy się fragmentem:

"Soft you now, the fair Ophelia.
Nymph, in thy orisons,
be all my sins remembered."

Ale nie mam pewności.

(Przykład zaczerpnięty z HTML Reference Library)

Informacje o BLOCKQUOTE

Adres

Polecenie (wyświetlane za pomocą kursywy) jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.:

Kod:

<address> </address>

Rezultat:

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

Informacje o ADDRESS

Blok dokumentu

Polecenie div (blok, sekcja) jest we współczesnym semantycznym webmasterstwie jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów dokumentu. Na blokach formatowanych za pomocą kaskadowych arkuszy stylów oparte są dziś nowoczesne układy stron (ang. layouty).

<div> </div>

Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania, np. środkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd.

<div style="text-align:right">zawartość bloku</div>

Wykaz

pierwszy punkt wykazu
drugi punkt wykazu
trzeci punkt wykazu

jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst.

Informacje o DIV

Wykazy (listy)

Do elementów blokowych zaliczane są wykazy, zwane też potocznie listami. Ze względu na obszerność tematu poświęcamy im osobny rozdział w kursie.

Obramowanie formularza

W specyfikacji HTML 4 pojawiło się polecenie fieldset, które tworzy obramowanie dla znajdujących się w jego ramach elementów formularza - każdy element, jak przyciski radiowe, pole tekstowe czy rozwijana lista wyboru, może być objęty taką ramką.

<fieldset>definicja elementu formularza</fieldset>

Samo obramowanie można oczywiście uzyskać za pomocą stylów, więc wprowadzanie nowego polecenia nie byłoby zasadne. Rzeczywisty efekt widzimy dopiero po połączeniu go ze znacznikiem <legend>.

<fieldset>
<legend>Ankieta</legend>
<textarea rows="3" cols="30">Wpisz opinię...</textarea>
</fieldset>

A oto wynik:

Ankieta 0x01 graphic

Informacje o FIELDSET

Informacje o LEGEND

Elementy liniowe

Zakres

Zakres definiowany jest za pomocą polecenia <span> </span>. Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle.

<span> </span>

<p>W tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span style="font-style:italic; background-color:green">ten fragment jest pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p>

W tym akapicie ten fragment jest pogrubiony i w niebieskim kolorze, natomiast ten fragment jest pochylony i na zielonym tle, a tu jest koniec akapitu.

Informacje o SPAN

Cytat w wierszu

Nowym poleceniem HTML jest krótki cytat w ramach wiersza (in-line quote), wprowadzany za pomocą <q></q> (porównaj je z blokiem cytowanym).

Polecenie ma automatycznie obejmować cytowany tekst cudzysłowem, przy czym od definicji języka zależy sposób wyświetlania cudzysłowu. Na przykład, dla języka angielskiego, zagnieżdżone polecenie:

John said, <Q lang="en">I saw Lucy at lunch, she says <Q lang="en">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

powinno dać w efekcie

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

Jak widać, "zewnętrzne" Q tworzy cudzysłów " ", a "wewnętrzne" - apostrofy ' '.

Uwaga: w przykładzie cudzysłowy zostały wprowadzone ręcznie.

Polecenie to interpretują Netscape 6 i Opera 5, ale wprowadzają w obu miejscach cudzysłów.

I saw Lucy at lunch, she says Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road.

(przykład pochodzi z HTML Reference Library)

Informacje o Q

Czcionki

Elementami liniowymi są fizyczne i logiczne style czcionek - poświęcamy im odrębny rozdział.

Komentarz

Polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu. Na przykład:

Znaczniki czcionki

O rozdziale:

Znaczniki opisujące czcionki znajdują ciągle zastosowanie na stronach WWW. Pamiętaj jednak, że kilka z nich uznano za przestarzałe, wielu z nich praktycznie się już nie używa, zaś World Wide Web Consortium zaleca generalnie wykorzystywanie do opisu czcionek stylów. Obok klasycznych poleceń HTML podajemy zatem także ich odpowiedniki w stylach CSS.

Znaczniki fizyczne

Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów, tworząc warstwę prezentacyjną redagowanego tekstu - wyróżniają one pewne fragmenty z całego przekazu.

Czcionka pogrubiona

Kod:

<b> </b>

Przykład:

To jest czcionka pogrubiona (bold)

Polecenie pogrubienia istnieje jeszcze w specyfikacji XHTML 1.1, natomiast prawdopodobnie zostanie wycofane w XHTML 2.0. Już teraz w miejsce pogrubienia zaleca się stosowanie polecenia strong, które ma charakter logiczny, a nie fizyczny.

Odpowiednik w stylach CSS: font-weight: bold - więcej...

Informacje o B

Czcionka pochylona

Kod:

<i> </i>

Przykład:

To jest czcionka pochylona (italic)

Polecenie pochylenia istnieje jeszcze w specyfikacji XHTML 1.1, natomiast prawdopodobnie zostanie wycofane w XHTML 2.0. Już teraz w miejsce pochylenia zaleca się stosowanie polecenia em, które ma charakter logiczny, a nie fizyczny.

Odpowiednik w stylach CSS: font-style: italic - więcej...

Informacje o I

Czcionka o stałej szerokości znaku

Kod:

<tt> </tt>

Przykład:

To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype)

Polecenie zostało zachowane jeszcze w specyfikacji XHTML 1.1, ale prawdopodobnie zostanie wycofane z wersji XHTML 2.0

Odpowiednik w stylach CSS: font-family: monospace - więcej...

Informacje o TT

Superskrypt (indeks górny)

Kod:

<sup> </sup>

Przykład:

Czcionka z ^{superskryptem}

Odpowiednik w stylach CSS: vertical-align: super - więcej...

Informacje o SUP

Subskrypt (indeks dolny)

Kod:

<sub> </sub>

Przykład:

Czcionka z _subskryptem

Odpowiednik w stylach CSS: vertical-align: sub - więcej...

Informacje o SUB

Duża czcionka (+1 punkt)

Kod:

<big> </big>

Przykład:

Duża czcionka

Polecenie zostało jeszcze zachowane w XHTML 1.1, ale prawdopodobnie zostanie wycofane z XHTML 2.0.

Odpowiednik w stylach CSS: font-size: larger - więcej...

Informacje o BIG

Mała czcionka (-1 punkt)

Kod:

<small> </small>

Przykład:

Mała czcionka

Polecenie zostało jeszcze zachowane w XHTML 1.1, ale prawdopodobnie zostanie wycofane z XHTML 2.0.

Odpowiednik w stylach CSS: font-size:smaller - więcej...

Informacje o SMALL

Znaczniki logiczne

Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale wizualny efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego znacznika logicznego.

Odwołanie do źródła

Kod:

<cite> </cite>

Przykład:

To jest odwołanie do źródła

Informacje o CITE

Definicja

Kod:

<dfn> </dfn>

Znacznik <dfn>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś fragmentu tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarki interpretują <dfn> jako kursywę. Na przykład:

Firefox to przeglądarka Mozilli.

Informacje o DFN

Element usunięty

Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem <del>, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.:

Kod:

<del> </del>

Przykład:

Informacje o DEL

Element wstawiony

Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem <ins>.

Kod:

<ins> </ins>

Przykład:

To jest nowe opracowanie tematu

Informacje o INS

Skrót i akronim

Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów.

Kod:

<abbr lang="pl" title="Profesor">Prof.</abbr>
<acronym lang="en" title="World Wide Web">WWW</acronym>

Przykład:

Prof.

WWW

Informacje o ABBR

Informacje o ACRONYM

Czcionka mocno wyróżniona (strong)

Polecenie <strong> jest zalecane w miejsce stosowanego do tej pory powszechnie polecenia <b>, które prawdopodobnie zostanie wycofane ze specyfikacji w XHTML 2.0

Kod:

<strong> </strong>

Przykład:

To jest czcionka mocno wyróżniona (strong)

Informacje o STRONG

Czcionka wyróżniona (emfaza)

Polecenie <em> jest zalecane w miejsce stosowanego do tej pory powszechnie polecenia <i>, które prawdopodobnie zostanie wycofane ze specyfikacji w XHTML 2.0

Kod:

<em> </em>

Przykład:

To jest czcionka wyróżniona (emphasis)

Informacje o EM

Kod (tekst programu)

Kod:

<code> </code>

Przykład:

To jest kod (code)

Informacje o CODE

Czcionka wprowadzana z klawiatury

Kod:

<kbd> </kbd>

Przykład:

Czcionka z klawiatury

Informacje o KBD

Przykład

Kod:

<samp> </samp>

Przykład:

Przykład (sample)

Informacje o SAMP

Zmienna (słowo kluczowe języka)

Kod:

<var> </var>

Przykład:

Zmienna (variable)

Informacje o VAR

Kolory czcionki

Dowolnemu fragmentowi tekstu można nadać kolor. W starszych wersjach HTML stosowano polecenie font color="nazwa_koloru", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania koloru stosuje się obecnie style.

<p style="color: blue; ">Tekst w kolorze niebieskim.</p>

Tekst w kolorze niebieskim.

Poniżej przedstawiamy listę 16 podstawowych barw (nazwy imienne) stosowanych w dokumentach internetowych.

Przykład:

tekst próbny - black

tekst próbny - olive

tekst próbny - teal

tekst próbny - red

tekst próbny - blue

tekst próbny - maroon

tekst próbny - navy

tekst próbny - gray

tekst próbny - lime

tekst próbny - fuchsia

tekst próbny - white

tekst próbny - green

tekst próbny - purple

tekst próbny - silver

tekst próbny - yellow

tekst próbny - aqua

Więcej informacji - rozdział Kolor w stylach...

Wielkość czcionki

Dowolnemu fragmentowi tekstu można nadać wielkość czcionki. W starszych wersjach HTML stosowano polecenie font size="wielkość", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania wielkości stosuje się obecnie style.

<p style="font-size: large; ">Tekst o wielkości large</p>

Tekst o wielkości large

Przykład:

To jest tekst normalny

Tekst o wielkości xx-small

Tekst o wielkości x-small

Tekst o wielkości small

Tekst o wielkości medium

Tekst o wielkości large

Tekst o wielkości x-large

Tekst o wielkości xx-large

Więcej informacji - rozdział Wielkość czcionki o stylach

Krój czcionki

W starszych wersjach HTML stosowano polecenie font face="nazwa_kroju". W HTML 4.01 zrezygnowano z niego na rzecz stylów. Na przykład:

<p style="font-family: arial; ">Treść akapitu wyświetlona krojem Arial</p>

Treść akapitu wyświetlona krojem Arial

Treść akapitu wyświetlona krojem Courier

Treść akapitu wyświetlona krojem Verdana

Więcej informacji: - rozdział Rodzina czcionek w stylach

Odsyłacze

O rozdziale: Rozdział Odsyłacze wyjaśnia, w jaki sposób za pomocą odsyłaczy hipertekstowych wiążemy ze sobą rozmaite zasoby w World Wide Web, dzięki czemu możemy za pomocą kliknięć przenosić się w inne miejsca w Internecie lub w tym samej witrynie, pobierać pliki, uruchamiać pocztę itd.

Istota odsyłaczy

Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) są chyba najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony, a doskonałym przykładem ich roli jest choćby niniejszy kurs, który został opracowany na wielu, powiązanych ze sobą stronach. Gdyby nie było odsyłaczy, cała treść kursu musiałaby zostać przedstawiona na jednej stronie, która byłaby dość uciążliwa w czytaniu.

Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata. Użytkownik nie musi nawet w gruncie rzeczy wiedzieć, że powiązane ze sobą tematycznie informacje znajdują się w miejscach oddalonych od siebie nawet o tysiące kilometrów. Najważniejsze jest ich tematyczne powiązanie, a nie lokalizacja. Gdy na przykład czytamy stronę zawierającą opis jakiejś choroby, możemy sięgnąć do całkiem innego miejsca w poszukiwaniu jej etiologii, a do jeszcze innego, gdy będziemy chcieli przeczytać o jej ogniskach.

Hipertekstowe odsyłacze w World Wide Web można porównać ze spisem treści czy odsyłaczami w książce. Informacja, że na stronie 154 znajduje się rozdział pod jakimś tytułem, a na stronie 87 tabela, na którą powołujemy się w jakimś miejscu książki, jest de facto odsyłaczem, choć czytelnik musi wykonać "skok" samodzielnie, wertując po prostu kartki. Elektroniczne odsyłacze są znacznie wygodniejsze w obsłudze. Odsyłacz można też potraktować jak swoistą dygresję. Warto jednak zwrócić uwagę, że zbyt duża liczba odsyłaczy, zwłaszcza w tekście o charakterze na poły "beletrystycznym", może rozpraszać czytelnika, chyba że strona zawiera po prostu z założenia odsyłacze do jakichś źródeł. Warto je jednak stosować z umiarem.

Etykieta

Można wyróżnić dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron.

Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu.

Konstrukcja etykiety jest następująca:

Zauważmy, że w taki właśnie sposób zostały utworzone etykiety na stronach kursu. Umożliwiło to zbudowanie czegoś w rodzaju spisów treści na poszczególnych stronach, u góry, które pozwalają szybko skoczyć do opisu wybranego zagadnienia.

Możemy utworzyć w dokumencie dowolną liczbę etykiet, które będą służyć jako punkty docelowe dla różnych odsyłaczy. Jest to szczególnie wygodne w przypadku dużych objętościowo stron, wymagających podzielenia na pewne logiczne fragmenty, aby były łatwiejsze w czytaniu. Spis zagadnień z wykorzystaniem odsyłaczy do etykiet-zakładek jest bardzo często stosowany w Internecie.

Konieczne jest stosowanie cudzysłowu obejmującego etykiety, podobnie jak i adresów w odsyłaczach. Gdy etykieta zawiera kilka wyrazów, ich użycie jest wręcz niezbędne, aby definicja była poprawna. Należy też zwracać uwagę na wielkość liter, gdyż są one na ogół rozróżniane. Należy zalecać używanie małych liter zarówno w etykietach, jak i odsyłaczach do nich.

Uwaga: wielowyrazowe zakładki, nawet ujęte w cudzysłowy, są ignorowane przez niektóre przeglądarki, np. Lynx. Można temu zaradzić, łącząc wyrazy, np. "to_jest_zakładka_dla_pewnego_tematu".

Odsyłacze

Czym jest odsyłacz?

Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę można obrazowo przedstawić w postaci:

<a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a>

Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony (choć można to zmienić). Na przykład odsyłacz do miesięcznika PC World Komputer:

<a href="http://www.pcworld.pl">Tutaj znajdziesz miesięcznik PC World Komputer</a>

Tutaj znajdziesz miesięcznik PC World Komputer

Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja http://www.pcworld.pl. Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to całkiem długo, jeśli łącza są przeciążone...).

ISTOTNA UWAGA: przy tworzeniu odsyłaczy należy zwracać uwagę na wielkość liter w odsyłaczach. Dla wielu serwerów internetowych ta sama wielka i mała litera są dwoma różnymi znakami, więc "MojaFirma" nie jest tym samym co "mojafirma". Praktyka pokazuje, że wiele osób nie zwraca na to uwagi, wskutek czego nie można wczytać strony albo obrazka czy pliku dźwiękowego na konkretnej stronie - gdy plik na serwerze zawiera jakieś wielkie litery, koniecznie należy to uwzględnić w odsyłaczu.

Informacje o A

Do jakich miejsc możemy się odwoływać?

Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać:

<a href="http://host.domena">tekst odsyłacza</a>.

W pokazanym wyżej przykładzie PC World Komputera posłużyliśmy się adresem http://www.pcworld.pl, gdzie host=www, a domena=pcworld.pl. Konieczne jest oczywiście użycie w adresie na początku http://.

Zauważmy od razu, że taki adres powoduje wywołanie głównej (domyślnej) strony WWW. Nazwy strony nie podawaliśmy. Dlatego zaleca się, aby strona główna serwisu była plikiem o nazwie index.htm lub index.html. Naturalnie pomijamy tutaj sytuację, gdy w serwisie stosowany jest język skryptowy server-side, np. PHP - wtedy rozszerzenie pliku ma zwykle postać .php.

Gdy zamieszczamy w naszym dokumencie jakiś odsyłacz do strony znajdującej się gdzieś w świecie, należy po prostu przepisać ten adres w trakcie sesji w Internecie. Często jednak będziemy się odwoływali do stron samodzielnie sporządzonych i wtedy wystarczy po prostu podawać nazwy samych plików, bez konieczności definiowania adresu http. Najwygodniej jest wówczas oczywiście ulokować wszystkie strony i niezbędne pliki graficzne, którymi upstrzyliśmy nasz dokument, w jednym katalogu. Znacznie uprości to życie w trakcie konstruowania dokumentu. Jeśli jednak prowadzimy większy serwis, lepiej jest utworzyć w naszym komputerze i na serwerze odrębne katalogi tematyczne, a dla grafiki wyznaczyć nawet osobny folder, dzięki czemu będziemy się mogli do nich wygodnie odwoływać, jeśli zajdzie taka potrzeba.

Praktyczna uwaga: gdy chcemy wstawić do dokumentu jakiś adres, który znaleźliśmy w Internecie, nie jest konieczne ręczne przepisywanie adresu. Można postąpić w następujący sposób:

Jeśli używasz Firefoksa lub Operę, ustaw kursor na odsyłaczu, kliknij prawym przyciskiem myszki i wybierz opcję Kopiuj adres odnośnika. Przejdź do redagowanego dokumentu i wstaw ze schowka skopiowany adres.
Jeśli używasz Internet Explorera PL, ustaw kursor nad odsyłaczem, kliknij prawym przyciskiem myszki i wybierz opcję Kopiuj skrót. W redagowanym dokumencie wstaw ze schowka skopiowany adres.

W dokumencie możemy zamieszczać odsyłacze do różnych typów plików. Najczęściej jest to dokument HTML, choć równie dobrze może to być plik tekstowy (TXT), obrazek GIF lub JPG, plik dźwiękowy WAV, MID, AU czu AIFF, dokument Worda, plik Acrobata. Przeglądarki są uwrażliwione na pewne typy plików, zawierając wbudowane wewnętrzne przeglądarki (odtwarzacze) danych plików. Na przykład w Firefoksie, Operze czy Internet Explorerze zostanie bez kłopotu zaprezentowany obrazek GIF czy plik tekstowy.

Ponieważ jednak nierzadko w dokumentach internetowych są umieszczane odsyłacze do innych plików, konieczne się stało zaangażowanie do ich obsługi albo zewnętrznych aplikacji, albo specjalnych wtyczek (plug-ins), które pozwalają obejrzeć dany dokument bezpośrednio z poziomu przeglądarki, z użyciem pojawiającego się dodatkowego menu (na ekranie lub pod prawym klawiszem myszki). Doczekaliśmy się już wielu "wtyczek" - VR, VRML, EVY, PDF, CMX itd. Są one bezpłatnie dostępne w Internecie. Jest jednak także faktem, że same przeglądarki coraz częściej samodzielnie obsługują rozmaite nietypowe formaty.

Jeśli przeglądarka nie zawiera wbudowanej obsługi pliku danego typu ani nie istnieje stosowny plug-in, możemy się także posłużyć aplikacją w naszym komputerze. Na przykład plik Worda można obejrzeć za pomocą Worda lub Word Viewera, a nowsze wersje Internet Explorera potrafią bezpośrednio wczytać plik Worda, jeśli edytor jest obecny na dysku. Przeglądarkę można nauczyć reagowania na określone typy plików, co zwykle odbywa się w oknie dialogowym preferencji.

Odsyłacze absolutne i względne

Warto wiedzieć, że rozróżniamy odsyłacze absolutne i względne (relatywne). Pierwsze zawierają pełny adres internetowy strony, natomiast drugie jedynie fragment ścieżki dostępu.

Adresem absolutnym jest np. strona PC World Komputera:

http://www.pcworld.pl

Adresem relatywnym jest np. adres jakiejś wiadomości w numerze miesięcznika PC World Komputer:

/news/96251.html

Adres relatywny korzysta z pełnego adresu strony, na której się znajduje. Skoro strona główna PC World Komputera ma adres:

http://www.pcworld.pl

to automatycznie odsyłacz relatywny wiadomości jest interpretowany jako:

http://www.pcworld.pl/news/96251.html

Wiadomość jest położona o szczebel niżej w hierarchii katalogów.

Stosowanie odsyłaczy relatywnych jest charakterystyczne dla danego serwisu. Autor nie musi się troszczyć o podawanie pełnego adresu - wystarczy, że poda tylko niezbędny fragment, gdyż resztę przeglądarka doda sama. Odsyłacze absolutne są (absolutnie :-)) konieczne, gdy wskazujemy miejsca na innych serwerach.

Przypomnijmy sobie w tym miejscu uwagi dotyczące polecenia <base> w nagłówku strony <head>. w rozdziale Struktura dokumentu. Wpisanie adresu strony bazowej w nagłówku może nas uchronić od konieczności przepisywania wszystkich adresów relatywnych, gdy z jakichś powodów przenosimy stronę w inne miejsce i grozi nam utrata aktualności odsyłaczy względnych.

Kilka prostych przykładów:

Odsyłacz do innej strony HTML (w tym samym katalogu):

<a href="nazwa_strony.html">Edytor Pajączek</a>

Edytor Pajączek

Odsyłacz do innej strony w katalogu podrzędnym

<a href="katalog_podrzędny/nazwa_strony.html">Inna strona</a>

Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:

<a href="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</a>

Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę.

Odsyłacz do pliku tekstowego TXT

<a href="plik_tekstowy.txt">Plik tekstowy TXT</a>

Plik tekstowy TXT

Odsyłacz do pliku graficznego GIF

<a href="plik_graficzny.gif">Plik graficzny GIF</a>

Plik graficzny GIF

Odsyłacz do pliku dźwiękowego

<a href="../multimed/pinkpant.mid">Plik dźwiękowy</a>

Plik dźwiękowy

Odsyłacz do pliku PDF

<a href="licence.pdf">dokument PDF</a>

Dokument PDF ukazuje się zwykle bezpośrednio w przeglądarce (Internet Explorer i Firefox) i jest opatrzony narzędziami nawigacyjno-zarządzającymi Acrobat Readera. Sam Reader uruchamia się także w tle (odrębna "instancja"), jeśli jest to wersja 3, natomiast w wersji 4 uruchamia się wyłącznie jako wtyczka w przeglądarce. Ponadto wersja 4 Readera pozwala zapisywać plik PDF bezpośrednio z poziomu przeglądarki (ikonka dyskietki w menu Readera), na co nie pozwala wersja 3. Opera uruchamia osobną instancję Acroba Readera.

dokument PDF - dokument ma objętość 9 KB

Obszerniejsze informacje o sposobach dołączania plików multimedialnych do dokumentów WWW są zawarte na stronie Multimedia.

Odsyłacze do etykiet

Powiedzieliśmy wyżej, jak tworzyć odsyłacze do innych dokumentów. Ale nieco wcześniej mówiliśmy także o etykietach, więc warto teraz powiedzieć, jak tworzyć odsyłacze do etykiet. Konstrukcja jest bardzo prosta:

<a href="strona.htm#nazwa_etykiety">Tekst</a>

Zwróć uwagę na znak # oddzielający nazwę strony od nazwy etykiety.

Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli:

<a href="#nazwa_etykiety">Tekst, na którym należy kliknąć</a>

Uwaga: należy zwrócić uwagę na wielkość liter w etykiecie. Gdy etykieta rozpoczyna się z wielkiej litery, także odsyłacz powinien zawierać nazwę etykiety pisaną z wielkiej litery.

Poniższy przykład pozwoli skoczyć do punktu poświęconego istocie odsyłaczy, na początku tej strony. Użyto tu odwołania do etykiety #istota , umieszczonej wcześniej przy punkcie Istota odsyłaczy.

Przeczytaj uwagi o istocie odsyłaczy

Informacje o odsyłaczach w dokumencie zawierającym ramki są podane na stronie poświęconej ramkom.

Odsyłacze do poczty elektronicznej i FTP

Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną. Jej konstrukcja wygląda następująco:

<a href="mailto:imie_nazwisko@adres">Tutaj kliknij</a>

Przykładowa zachęta do wysłania listu mogłaby wyglądać następująco:

<a href="mailto:wimmer@helion.pl">Jeśli chcesz mi nawrzucać, kliknij w tym miejscu</a>

co w praktyce przybrałoby postać:

Jeśli chcesz mi nawrzucać, kliknij w tym miejscu

albo, w bardziej stonowanej formie:

Wyślij list do autora strony

Oczywiście w miejscu, gdzie należy kliknąć, można też po prostu podać adres poczty, aby był widoczny bezpośrednio na ekranie przeglądarki.

Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym obrazkiem. W tym miejscu zastosujemy obrazek email.png, wstawiając definicję przed adresem.

0x01 graphic
Wyślij list do autora strony

Zauważ, że gdy przesuniesz kursor nad odsyłacz, w wierszu statusu przeglądarki pojawi się kontrolna informacja
mailto:wimmer@helion.pl (Firefox i Opera)
lub
Wysyła pocztę do: mailto:wimmer@helion.pl (Internet Explorer)

Do kategorii sztuczek można zaliczyć technikę wstępnego opatrywania listu predefiniowanymi informacjami. Gdybyśmy sobie zażyczyli, aby w momencie wysyłania poczty przez czytelnika strony w polu tematu listu pojawiła się jakaś domyślna treść, możemy zdefiniować odsyłacz na przykład tak:

W podobny sposób można predefiniować adres odbiorcy, do którego idzie kopia listu:

albo tzw. ślepa lub ukryta kopia, czyli BCC (żaden inny odbiorca listu nie zobaczy tego adresu):

Można też zdefiniować fragment ciała listu, a więc już bezpośrednio w oknie edycji:

Pocztę może też otrzymać kilka osób jednocześnie, adresowanych w polu głównym. Adresy trzeba rozdzielić po prostu średnikami:

Powstaje pytanie, czy można połączyć wszystkie te elementy "do kupy". Otóż można i robi się to prosto, stosując jako łącznik ciąg &.

<a href="mailto:wimmer@helion.pl?cc=jan.kowal@firma.pl&
bcc=jozef.kwiatek@firma.pl&subject=Bardzo ważny list&
body=Witajcie Panowie">Wyślij pocztę</a>

No to wypróbujmy - proszę, kliknij, ale nie wysyłaj :-)

Przy definiowaniu adresu poczty (a nawet szerzej, pełnego adresu) możesz się także posłużyć znacznikiem logicznym <address> </address>, który automatycznie nada odpowiedni atrybut (zazwyczaj interpretowany przez przeglądarki jako kursywa), a całość umieścić w obramowanym bloku div.

<div style="border: 3px double olive; width:250px; ">
<address>
dane adresowe
</address>
</div>

Paweł Wimmer
Dziennikarz prasy komputerowej
Warszawa
E-mail: wimmer@helion.pl

Równie często stosowaną usługą jest FTP, który pozwala sięgnąć do serwera FTP w poszukiwaniu jakichś plików - można w ten sposób wskazać położenie jakiegoś shareware'owego programu. Nasze wydawnictwo posiada swój własny serwer, z którego można skopiować np. listingi zamieszczane w dziale Dla Praktyków w PCkurierze, publikacje elektroniczne czy oprogramowanie. Korzystamy tutaj z protokołu File Transfer Protocol - stąd nazwa FTP.

Odpowiednia konstrukcja wskazująca na FTP ma postać:

<a href="ftp://ftp.adres">Jakiś tekst</a>

Gdybyśmy chcieli sięgnąć do serwera Wydawnictwa Lupus, możemy podać odsyłacz (już nieaktualny):

<a href="ftp://ftp.polbox.com.pl/library/!lupus">Tutaj znajdziesz listingi Dla Praktyków</a>

Możemy także dać bezpośredni odsyłacz do pliku:

<a href="ftp://ftp.polbox.com.pl/library/!lupus/hpauthor.zip">Podręcznik Home Page Author</a>

Zauważ, że na końcu adresu znalazł się ciąg hpauthor.zip. Jest to nazwa pliku, który zawiera podręcznik. W ten sposób można od razu sięgnąć do konkretnego pliku, a nie tylko do katalogu z plikami. Przeglądarka WWW zapyta wówczas, co zrobić z plikiem. Wystarczy wybrać opcję zapisania na dysku, aby program przystąpił do ściągania pliku na dysk naszego komputera.

Dobrym (wręcz bardzo dobrym!) obyczajem jest podawanie przy odsyłaczu do pliku wielkości pobieranego materiału. Czytelnik strony nie powinien być zaskakiwany dużymi plikami, a przede wszystkim ma prawo wiedzieć, jak długo będzie trwać jego kopiowanie. Tę samą zasadę można zresztą stosować, gdy podajemy odsyłacz do strony, której wczytanie trwa dość długo, gdyż zawiera dużo tekstu i/lub obrazków. Można tu przyjąć granicę 100-200 KB, aczkolwiek problem ten traci szczęśliwie na znaczeniu w miarę rozwoju stałych łączy internetowych.

Odsyłacze do innych usług

Niektóre z tych usług są już niezmiernie rzadko używane.

Plik na dysku lokalnym

<a href="file:///ścieżka/plik"></a>,

Gopher

<a href="gopher://..."></a>,

Telnet

<a href="telnet://..."></a>,

Wais

Grupy dyskusyjne

<a href="news://..."></a>,

Jeśli podasz np. nazwę konkretnej grupy dyskusyjnej, kliknięcie na odsyłaczu do niej spowoduje uruchomienie domyślnego programu obsługi grup, np. Outlook Express w Internet Explorerze) i ustawienie kursora na na danej grupie. Na przykład:

Odsyłacz do grupy dyskusyjnej pl.comp.www

Zauważmy, że uruchamiany jest domyślny serwer newsów.

Nigdy nie wiemy, który serwer newsów zaabonował nasz czytelnik. Jeśli chcemy skierować naszego gościa do ściśle określonego serwera, możemy podać w odsyłaczu adres serwera, np.:

Odsyłacz do samego serwera news://news.tpi.pl.

Mało tego, możemy także skierować od razu do wskazanej grupy:

<a href="news://news.tpi.pl/pl.comp.www">grupa dyskusyjna pl.comp.www</a>

grupa dyskusyjna pl.comp.www

Mapy odsyłaczy na obrazkach

Na zakończenie warto jeszcze podać sposób definiowania odsyłaczy na obrazkach. Jest to o tyle przydatne, że możemy w ten sposób wykorzystać grafikę. Taki sposób definiowania odsyłaczy jest już powszechnie spotykany w World Wide Web, aczkolwiek warto także stosować równoległe odsyłacze tekstowe, gdyż nie wszyscy stosują przeglądarki graficzne i byliby w ten sposób pozbawieni możliwości wykonania skoku.

W tym miejscu pokażemy tzw. mapowanie po stronie klienta, a więc nowocześniejszy sposób, akceptowany przez różne wersje Navigatora i Internet Explorera.

Wyobraźmy sobie, że mamy obrazek, na który chcielibyśmy nałożyć mapę odsyłaczy (niech Czytelnik łaskawie przymknie oko na brak precyzji). Zaznaczone prostokąty mają ilustrować zakres map.

0x01 graphic

Na razie jest to grafika bez odsyłaczy.

Poniżej widać obrazek z mapą odsyłaczy. Gdy Czytelnik przesunie kursor myszki nad zaznaczone prostokąty, kursor przyjmie postać "rączki", sygnalizującej istnienie odsyłacza. W wierszu statusu przeglądarki pojawią się adresy stron. Są to adresy fikcyjne, więc kliknięcie nie spowoduje skoku do tak nazwanej strony.

0x08 graphic
0x01 graphic

A oto pełna treść polecenia:

Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek "odsylacz.gif" jest mapowany, i że mapa nosi nazwę "mapa1".
Drugi wiersz zapoczątkowuje definicję mapy.
Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom na rysunku. SHAPE=RECT mówi, że chodzi tutaj o prostokąty (RECT=rectangle). COORDS informuje o współrzędnych, przy czym pierwsze dwie liczby w wierszu podają lewy górny róg prostokąta, a następne dwa - prawy dolny. Warto unikać nakładania na siebie obszarów map, choć przeglądarka akceptuje nakładanie. HREF= stanowi przywołanie jakiegoś dokumentu HTML.
Ostatni wiersz stanowi zakończenie definicji mapy.

Oprócz prostokątów (kwadratów) możemy tworzyć mapy z użyciem okręgów i obszarów nieregularnych.

W przypadku okręgu stosujemy polecenie:

Proszę zwrócić uwagę na shape="circle" oraz przykładowe liczby 25,25,19. Pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia.

Gdybyśmy chcieli użyć obszaru nieregularnego, musielibyśmy podać przykładowe polecenie, zawierające przynajmniej trzy pary współrzędnych, definiujących "rogi" obszaru:

Ręczne tworzenie map odsyłaczy jest dość uciążliwe i lepiej jest się posługiwać programami, które oferują narzędzia graficzne - takie wbudowane narzędzia posiada m.in. Pajączek.

Wykazy

O rozdziale: W rozdziale opisujemy wykazy, zwane też częściej listami, które służą do sporządzania usystematyzowanych zestawień informacji, prezentowanych w punktach - nieuporządkowanych (punktowanych, nienumerowanych) lub uporządkowanych (numerowanych). Jest to powszechnie stosowany na stronach element konstrukcyjny. Wykazy należą do elementów blokowych.

Wykaz nieuporządkowany

Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego, w którym kolejne punkty są wyróżniane punktorami. Polecenie <ul> </ul> tworzy ramy wykazu, natomiast polecenia <li> </li> wprowadzają konkretne punkty. Pamiętaj zawsze o stosowaniu znaczników domykających punkty listy - we wcześniejszych etapach rozwoju WWW niedomykanie tych znaczników było powszechną, szczególnie często spotykaną manierą, która jest jednak błędem we współcześnie stosowanych standardach webmasterskich. Wyjątkiem od zamykania punktów wykazu w tym samym wierszu jest wprowadzanie zagnieżdżonych wykazów niższego szczebla - zamknięcie punktu następuje po zagnieżdzonym wykazie.

<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

HTML 4.01 Strict zrezygnował ze stosowania atrybutu type, który wprowadzał graficzne punktory: atrybut type=disc wprowadzał kółeczko, type=circle wprowadzał puste kółeczko, natomiast type=square wprowadzał kwadracik. Obecnie stosowane są style CSS, dające znacznie większe mozliwości formatowania.

Typ stylu wykazu disc:

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Typ stylu wykazu circle:

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Typ stylu wykazu square:

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Obszerne informacje o formatowaniu punktorów za pomocą stylów CSS znajdziesz w rozdziale o typach stylów wykazów.

Zagnieżdżanie wykazów nieuporządkowanych

Możemy zagnieżdżać kilka poziomów listy nieuporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem - dla przejrzystości pokazujermy to z wcięciami, choć w kodzie źródłowym nie ma to akurat praktycznego znaczenia.

<ul>(otwarcie listy na pierwszym poziomie)

<li>Punkt 1</li>

<li>Punkt 2 (bez znacznika zamykającego)

<ul>(otwarcie listy na drugim poziomie)

<li>Podpunkt 2.1</li>

<li>Podpunkt 2.2 (bez znacznika zamykającego)

<ul>(otwarcie listy na trzecim poziomie)

<li>Podpunkt 2.2.1</li>

<li>Podpunkt 2.2.2</li>

</ul>(zamknięcie listy na trzecim poziomie)

</li> (zamknięcie podpunktu 2.2)

</ul>(zamknięcie listy na drugim poziomie)

</li> (zamknięcie Punktu 2)

<li>Punkt 3 - kontynuacja punktów pierwszego poziomu</li>

<li>Punkt 4 - kontynuacja punktów pierwszego poziomu</li>

</ul>(zamknięcie całej listy)

I przykład działania - zauważ, że przeglądarka sama dodała punktory, niekiedy odmienne (Internet Explorer, Firefox) dla poszczególnych poziomów. Naturalnie, sam możesz je zdefiniować za pomocą stylów.

Punkt 1
Punkt 2

Podpunkt 2.1
Podpunkt 2.2

Podpunkt 2.2.1
Podpunkt 2.2.2

Punkt 3
Punkt 4

Uwaga: jak już wspomnieliśmy wyżej, w trakcie zagnieżdżania wykazów niższego poziomu zamknięcie punktu wykazu nadrzędnego szczebla następuje ZA zagnieżdżonym wykazem.

Informacje o UL

Informacje o LI

Wykaz uporządkowany

Wykaz uporządkowany służy do sporządzenia wykazu numerowanego, w którym istotna jest dla nas kolejność elementów. Ramy wykazu tworzy polecenie <ol> </ol>, natomiast punkty są wprowadzane, podobnie jak w wykazach nieuporządkowanych, za pomocą polecenia <li> </li>.

Przykładowy kod:

<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ol>

Przykład użycia:

Pierwszy punkt
Drugi punkt
Trzeci punkt

W HTML 4.01 nie stosuje się już atrybutu type, który wprowadzał numerowanie: wartość type=A wprowadzała numerowanie według wielkich liter łacińskich, type=a numerowanie według małych liter łacińskich, type=I numerowanie według wielkich liczebników rzymskich, type=i numerowanie według małych liczebników rzymskich, wreszcie type=1 numerowanie według liczebników arabskich. W ich miejsce stosowane są style CSS.

Przykłady:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Pierwszy punkt
Drugi punkt
Trzeci punkt

Pierwszy punkt
Drugi punkt
Trzeci punkt

Stosowany dawniej atrybut start=x w definicji wykazu lub value=x w definicji punktu wykazu pozwalał rozpocząć numerowanie listy od dowolnie podanej liczby x, a nie od 1, A, a czy I. Obecnie jest on uznany za przestarzały, natomiast CSS nie wprowadził jeszcze dedykowanego polecenia zastępującego to narzędzie. Można za to na razie wykorzystywać liczniki, które są interpretowane przez Firefoksa i Operę. Dokładniejszy opis techniki użycia liczników znajdziesz w rozdziale o zerowaniu liczników.

Zagnieżdżanie wykazów uporządkowanych

Możemy zagnieżdżać kilka poziomów listy uporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem

<ol>(otwarcie listy na pierwszym poziomie)

<li>Punkt 1</li>

<li>Punkt 2 (bez znacznika zamykającego)

<ol>(otwarcie listy na drugim poziomie)

<li>Podpunkt 2.1</li>

<li>Podpunkt 2.2</li>

</ol>(zamknięcie listy na drugim poziomie)

</li> (zamknięcie Punktu 2)

<li>Punkt 3 (bez znacznika zamykającego)

<ol>(otwarcie listy na drugim poziomie)

<li>Podpunkt 3.1</li>

<li>Podpunkt 3.2</li>

</ol>(zamknięcie listy na drugim poziomie)

</li>(zamknięcie Punktu 3)

</ol>(zamknięcie całej listy)

Przykład:

Przeglądarki

Netscape Navigator
Microsoft Internet Explorer
Opera
Firefox
Konqueror
Safari

Edytory HTML

Pajączek
CoreEditor
kED
edHTML
HateML
Website Pro
Dreamweaver
Expression Web Designer
Nvu

Naturalnie możemy swobodnie manipulować typami stylu wykazu, np. na pierwszym poziomie dać cyfry rzymskie, a na drugim arabskie, na pierwszym cyfry arabskie, a na drugim cyfry arabskie z wiodącym zerem, itd.

Informacje o OL

Lista definicyjna

Lista definicyjna służy do tworzenia definicji terminów.

<dl>początek listy definicyjnej
<dt>pierwszy termin</dt>
<dd>wyjaśnienie pierwszego terminu</dd>
<dt>drugi termin</dt>
<dd>wyjaśnienie drugiego terminu</dd>
</dl>koniec listy definicyjnej

Przykład:

Wyjaśnienie terminów

Volapük

język międzynarodowy utworzony w roku 1868 przez niemieckiego duchownego, Martina Schleyera

Esperanto

język międzynarodowy zapoczątkowany w 1887 roku przez polskiego okulistę, Ludwika Zamenhofa

Interlingua

język międzynarodowy zaprojektowany w latach 1924-1950 przez międzynarodową grupę lingwistów

Listy definicyjne można również mieszać z listami numerowanymi i nienumerowanymi.

Informacje o DL

Informacje o DT

Informacje o DD

Grafika

O rozdziale: Trudno sobie wyobrazić strony internetowe bez grafiki, gdyż często jest ona z jednej strony niezbędnym elementem informacyjnym, z drugiej zaś nadaje stronom efektowny wygląd, jeśli tylko autor umie nią zręcznie operować. W rozdziale prezentujemy niebędne techniki dotyczące wstawiania ilustracji.

Uwagi ogólne

Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów, bez udziału samej grafiki.

W Internecie zostały przyjęte trzy podstawowe standardy graficzne - GIF, JPG, a w ostatnich latach także PNG (Portable Network Graphics) - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Warto też zwrócić uwagę na fakt, że Internet Explorer akceptuje formaty BMP i WMF - nie powinno się ich jednak umieszczać w Internecie, ale mogą być z powodzeniem stosowane w archiwach HTML Help opartych na kontrolce Internet Explorera. W ostatnim okresie spotyka się też grafiki w wektorowym, opartym na XML formacie SVG (Scalable Vector Graphics), aczkolwiek na razie (2006 r.) obsługuje je natywnie jedynie Opera, zaś inne przeglądarki wymagają zewnętrznych wtyczek.

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać:

<img src="plik_graficzny" alt="nazwa alternatywna">

Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki. Efekt zastosowania konstrukcji jest następujący:

0x01 graphic

Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka.

Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np.

Jeśli z jakichś powodów zależy nam na deformacji oryginalnych wymiarów, możemy je ręcznie zmienić, podając arbitralnie inne rozmiary, na przykład:

0x01 graphic

Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy również o malejącej rozdzielczości obrazka na ekranie przeglądarki.

Informacje o IMG

Obramowania i odstępy

W starszych wersjach HTML stosowano atrybut border, za pomocą którego nadawano grafice obwódkę. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS, o znacznie większych możliwościach - obramowanie border lub obwódka outline.

0x01 graphic

0x01 graphic

Poprzednio stosowano atrybuty hspace i vspace, za pomocą których tworzono dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami. Obecnie są to atrybuty przestarzałe, które zastąpiono stylami CSS - marginesem globalnym (margin) lub cząstkowym (margin-top, margin-bottom, margin-left, margin-right).

Ten tekst 0x01 graphic
jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten 0x01 graphic
o 100 pikseli

Akapit 50 pikseli nad grafiką.

0x01 graphic

Akapit 50 pikseli pod grafiką.

Pozycja grafiki

W starszych wersjach HTML stosowano atrybut align (left, center, right), za pomoca którego ustawiano grafikę przy lewym lub prawym marginesie, względnie na środku wiersza. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS.

Grafika jako blok

Przede wszystkim zwróć uwagę, że grafika nie jest elementem blokowym, zajmującym na wyłączność miejsce w wierszu, lecz tzw. zastępowanym, i możliwe jest ustawienie kilku grafik obok siebie.

0x01 graphic

Chcąc umieścić grafikę jako samodzielny element w wierszu, można by ją umieścić w elemencie blokowym div, ustawionym po lewej czy prawej stronie lub na środku wiersza.

0x01 graphic

Jeśli nie zapewnisz osobnego miejsca grafice, sąsiadująca z nią inna grafika zostanie ustawiona w tym samym wierszu.

Możesz też nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z polecenia stylów display:block;

Pozycjonowanie poziome

Grafikę często umieszcza się w ramach akapitu, a wtedy ujawnia swój naturalny charakter, czyli ukazuje się w jednym wierszu w treścią akapitu.

Przykład:

Najpierw rozpoczniemy akapit, potem umieścimy w nim zdjęcie psa 0x01 graphic
i wreszcie zakończymy akapit.

Oczywiście takie rozwiązanie jest rażące z estetycznego punktu widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku), natomiast treść akapitu oblewa ilustrację. Więcej informacji znajdziesz w dziale o stylach - przepływanie elementów.

Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ".

I rezultat:

Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. 0x01 graphic
Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku.

Analogicznie, aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl style="float: left; ".

0x01 graphic
Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku.

Jak widać, ilustracja jest wtedy swobodnie oblewana z lewej strony przy definicji float:right i z prawej strony przy definicji float:left.

Pozycjonowanie pionowe

Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align (top, middle, bottom).

Kilka przykładów z użyciem grafiki i akapitu.

0x01 graphic
Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach.

Mapy odsyłaczy

Na ilustracjach można także tworzyć tzw. mapy odsyłaczy po stronie klienta czyli specjalne układy odsyłaczy internetowych związanych z poszczególnymi miejscami na grafice - np. kliknięcie na jednym fragmencie zdjęcia prowadziłoby do jakiejś strony, a kliknięcie na innym fragmencie tego samego zdjęcia, do innej.

Technikę tworzenia map odsyłaczy przedstawiamy dokładniej w rozdziale poświęconym odsyłaczom.

Multimedia

O rozdziale: Pliki multimedialne niezmiennie przysparzają webmasterom wielu siwych włosów. W ciągu ostatnich 10 lat mieliśmy nie tylko do czynienia ze zmieniającymi się formatami plików, ale i ewoluującymi ciągle przeglądarkami, które z dnia na dzień przestają nagle "rozumieć" pewne zasady umieszczania takich plików w Sieci. W rozdziale próbujemy podać kilka w miarę "pewnych" sposobów umieszczania multimediów, które nie są sprzeczne ze współczesnymi standardami. Nie ulega jednak wątpliwości, że mamy tu do czynienia ze sporą dozą tymczasowości.

Kłopoty

Przede wszystkim trzeba zauważyć, że najpopularniejsze ze stosowanych powszechnie poleceń zagnieżdżania plików multimedialnych, czyli embed, nie było nigdy elementem HTML, a jedynie rozszerzeniem firmy Netscape, wprowadzonym w Navigatorze, które zostało potem przyjęte przez konkurencyjne przeglądarki. Również niezgodne ze specyfikacją jest inne popularne polecenie, bgsound, które nigdy nie było częścią HTML, a jedynie nieoficjalnym rozszerzeniem Internet Explorera, zaakceptowanym także przez Operę. Na domiar złego niektóre przeglądarki zaczęły się częściowo wycofywać z obsługi tych poleceń i w tej chwili mamy do czynienia ze sporym zamieszaniem. Jednym słowem, multimedia na stronach WWW były wprowadzane niejako na dziko.

Co więcej, tak się dzieje do dzisiaj, bo na przykład najpopularniejszy obecnie format multimedialny, czyli Flash, jest wprowadzany w ogromnej większości przypadków za pomocą mieszanego polecenia object /embed, z których pierwsze jest zgodne z rozwijającym się standardem webmasterskim, a drugie w ogóle formalnie nie istnieje. Widać to zwłaszcza w popularnym i przywoływanym na wielu stronach serwisie wideo YouTube, w którym przy każdym klipie podawane jest takie właśnie mieszane polecenie dla webmasterów czy posiadaczy blogów, którzy chcieliby włączyć klipy wideo do swoich stron.

Przykład zagnieżdżenia wideo w formacie Flash z YouTube (musisz być połączony z Internetem).

Z kolei GoogleVideo jest wprowadzane wyłącznie za pomocą polecenia object i przechodzi przez walidację HTML 4.01 Strict, gdy YouTube już nie.

Przykład zagnieżdżenia wideo w formacie Flash z GoogleVideo (musisz być połączony z Internetem).

Stosowanie embed wynika z chęci uzyskania zgodności z przeglądarkami obsługujący mechanizm pluginów Netscape'a (Firefox, Opera) i pozbycia się różnych kłopotów z wyświetlaniem, ale nie ulega wątpliwości, że w dobie współczesnych standardów, gdy coraz głośniej się mówi o konieczności respektowania oficjalnych norm w tym zakresie, będzie ono rugowane ze stron. Tym bardziej, że osoby chcące zwalidować swoje strony w oficjalnym walidatorze World Wide Web Consortium mogą to zrobić jedynie wtedy, gdy zrezygnują z nieoficjalnych poleceń.

Najprostsze rozwiązanie - odsyłacz

Najprościej i najbezpieczniej jest podać zwykły odsyłacz (<a href="plik">muzyczka</a>) do pliku multimedialnego, np. pliku dźwiękowego MP3 czy filmowego. Zależnie od ustawień przeglądarki użytkownik otworzy od razu domyślny odtwarzacz multimedialny lub zostanie mu zaproponowane zapisanie pliku na dysku. Jest to o tyle dobre rozwiązanie, że czytelnik strony nie musi wczytywać takiego pliku, jeśli sobie tego nie życzy.

Problem w tym, że wiele osób chce za wszelką cenę urozmaicić swoje strony multimediami i robi to nierzadko kosztem poprawności konstrukcji strony, a także, co oczywiste, zmuszając swoich czytelników do wczytywania sążnistych plików. Dla nich podanie samego odsyłacza zdaje się być plamą na honorze webmastera.

Starocie

Dla porządku trzeba przypomnieć, jak tworzone były odwołania do plików multimedialnych w "starym" stylu - było to połączenie poleceń object i embed, które pozwalało wyświetlać obiekt multimedialny zarówno w Internet Explorerze, jak i w przeglądarkach zgodnych z technologią zagnieżdżania Netscape (czyli Netscape, Mozilla i Opera), na przykład:

<object ID="MediaPlayer1" width=280 height=45
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading MicrosoftŽ WindowsŽ Media Player components..."
type="application/x-oleobject">
<param name="filename" value="plik_multimedialny">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="volume" value="0">
<embed type="application/x-mplayer2"
pluginspage =" http://www.microsoft.com/Windows/MediaPlayer/"
src="plik_multimedialny" name="MediaPlayer1" width=xx height=yy AutoStart=true>
</embed>
</object>

Sztuczki - bye, bye embed

Jeśli jednak koniecznie chcemy zagnieździć plik multimedialny na stronie, a chcemy to zrobić zgodnie ze standardami, czyli bez użycia embed, musimy posłużyć się sztuczkami. Przytaczam tutaj rozwiązania zaprezentowane w serwisie A List Apart:

Dla plików Flash: Drew McLellan, Flash Satay: Embedding Flash While Supporting Standards.

Dla plików multimedialnych z wymuszeniem interfejsu Windows Media Playera: Elizabeth Castro, Bye Bye Embed (E. Castro jest jedną z najpopularniejszych na świecie autorek książek webmasterskich - kilka tłumaczeń jej tytułów ukazało się także w Polsce, w Wydawnictwie Helion).

Macromedia Flash

Powszechnie stosowany kod:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

Rozwiązanie McLellana (Flash):

Kod źródłowy:

<object type="application/x-shockwave-flash" data="film.swf" width="200" height="150">
<param name="movie" value="film.swf">
</object>

Przykład w działaniu:

Windows Media

Rozwiązanie Elizabeth Castro (WMV):

Kod źródłowy:

<object type="video/x-ms-wmv" data="kot.wmv" width="320" height="260">
<param name="src" value="kot.wmv">
<param name="autostart" value="false">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Spróbowaliśmy wykorzystać tę metodę w przypadku kilku innych formatów multimedialnych, z częściowym sukcesem.

Przez analogię, można też utworzyć odwołanie do pliku Windows Media Audio.

<object type="video-/x-ms-wmv" data="898.wma" width="200" height="60">
<param name="src" value="898.wma">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Działa też analogiczne odwołanie do pliku Wav.

<object type="video-/x-ms-wmv" data="swist.wav" width="200" height="60">
<param name="src" value="swist.wav">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Działa również odwołanie do pliku Midi.

<object type="video-/x-ms-wmv" data="jazzball.mid" width="200" height="60">
<param name="src" value="jazzball.mid">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Działa odwołanie do pliku ASF (Advanced Streaming Format).

<object type="video-/x-ms-wmv" data="pliczek.asf" width="200" height="60">
<param name="src" value="pliczek.asf">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>

Przykład w działaniu (online):

Niestety, uniwersalność tej metody zawodzi w przypadku plików MP3 i AVI - działają w Internet Explorerze i Firefoksie, natomiast nie działają w Operze. Można więc zaproponować w tej sytuacji zamieszczenie dwojakiego odwołania: zagnieżdżenia podaną metodą, dla użytkowników IE i FF, oraz utworzenia zwykłego odsyłacza do pliku dla posiadaczy Opery.

Zwróćmy jeszcze uwagę na jeden problem. W podanych wyżej przykładach Opera odtwarza pliki multimedialne online, natomiast nie chce ich odtwarzać offline, z lokalnego dysku.

Real Media

Pliki RealMedia, np. z rozszerzeniem .ra (Real Audio), można wstawiać za pomocą kodu:

Przykład w działaniu (online):

Sposób ten działa w Internet Explorerze i Firefoksie, natomiast nie w Operze - tu można wstawić dodatkowy odsyłacz z plikiem .ra.

Tabele

O rozdziale: Tabele służą do tworzenia zestawień danych tabelarycznych - typowym przykładem zastosowania może być tabela wielkości produktu narodowego w wybranych krajach, w kolejnych latach, czy też zestawienie najbardziej ludnych państw świata. W rozdziale opisujemy szczegółowo techniki budowania i formatowania tabel.

Podkreślamy w tym miejscu wyraźnie, że współcześnie panuje tendencja odchodzenia od stosowania tabel w charakterze szkieletu stron (typowe zastosowanie w wielu portalach, z których maniera ta rozpowszechniła się na cały Internet - gwoli prawdy podkreślmy, że i poprzednia wersja kursu HTML korzystała z tabeli jako szkieletu strony głównej).

Obecnie, zgodnie z zasadami tzw. webmasterstwa semantycznego (używanie znaczników zgodnie z ich naturalnym przeznaczeniem), tabelom przypisuje się wyłącznie rolę pojemnika dla danych tabelarycznych, natomiast układy stron budowane są z użyciem pojemników (bloków, warstw) div, formatowanych za pomocą kaskadowych arkuszy stylów CSS. Zapewne proces przechodzenia z układów ramkowych czy tabelarycznych na blokowe będzie trwać długo i być może nigdy sie nie zakończy, ale wskazujemy tutaj na istniejącą tendencję i zalecane przez specjalistów rozwiązania.

Definicja tabeli została znacznie rozwinięta w stosunku do pierwszych definicji z wczesnych etapów rozwoju HTML. W związku z tym wyróżnia się dwa modele tabel - starszy prosty i nowszy złożony:

Nazwa modelu	Elementy modelu
Simple Table Model	table, caption, tr, th, td
Complex Table Model	table, colgroup, col, caption, thead, tbody, tfoot, tr, th, td

Ogólne ramy tabeli

Ramy tabeli tworzone są za pomocą polecenia:

<table> </table>

Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

Informacje o TABLE

Wiersz tabeli

Wiersze tabeli wprowadzamy za pomocą polecenia:

<tr> </tr>

Wiersz tabeli jest jej konkretyzacją, a sam tworzy z kolei ramy dla komórek z danymi. W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>, dla przykładu:

Zwróć uwagę, ze wprowadzenie definicji tabeli table, a w jej ramach pewnej liczby wierszy tr nie powoduje jeszcze wyświetlenia tabeli. Dopiero zdefiniowanie komórek, o których piszemy niżej, pozwoli wyświetlić tabelaryczny układ danych.

Informacje o TR

Komórka w wierszu

Komórki tabeli wprowadzamy za pomocą polecenia:

<td> </td>

Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego wiersza, na przykład:

Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co naturalnie nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza. Sposób pisania to kwestia wygody użytkownika.

Przykład tabeli:

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach (w ramach znaczników <td> </td>) zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwilę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna.

Informacje o TD

Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład:

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Odległości między komórkami

Aby odległości miedzy komórkami w pikselach były inne niż domyślne, możemy użyć atrybutu cellspacing. Powoduje to pogrubienie obramowania między nimi.

W efekcie uzyskamy:

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Porównaj ten atrybut z marginesami wyrażanymi za pomocą stylów.

Odstępy w komórkach

Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem (mierzony w pikselach) jest zbyt mały, możemy użyć atrybutu cellpadding (domyślnie wynosi on 1).

W rezultacie uzyskamy:

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Oczywiście należy w rozsądny sposób ustawiać wartości atrybutów, gdyż np. zbyt grube obramowanie czy zbyt mały odstęp treści od obramowania czyni tabelę mniej przejrzystą i niezbyt estetyczną, co pokazuje poniższy przykład.

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Porównaj ten atrybut z odstępami wyrażanymi za pomocą stylów.

Szerokość tabeli

Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Atrybut width daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany atrybut jest "silniejszy" od innych atrybutów, które wpływają na szerokość tabeli na ekranie.

Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach.

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości nadrzędnego pojemnika, w którym mieści się tabela (w naszym przykładzie połowa szerokości białego obszaru, w jakim mieści się ten rozdział).

I efekt:

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Szerokość komórki

W starszych wersjach HTML do wyznaczenia szerokości komórki stosowano atrybut width. W HTML 4.01 i XHTML 1.0 jest on uznany za przestarzały (zarzucony ostatecznie w XHTML 1.1) i szerokość komórki jest określana za pomocą stylów, a konkretnie szerokości elementu.

<td style="width: 150px; ">zawartość komórki</td>

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu.

<td style="width: 50%; ">zawartość komórki</td>

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Zwróć uwagę, że wystarczy podać szerokość komórek w pierwszym wierszu, aby pozostałe, w kolejnych wierszach, przyjęły te same wartości.

Wyrównanie tabeli

W starszych wersjach HTML stosowany był atrybut align, który pozwalał wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu - stosowano wartości right, left i center. W HTML 4.01 i XHTML 1.0 jest to atrybut uznany za przestarzały, a z XHTML 1.1 wycofany - w to miejsce zaleca się stosowanie stylów.

W efekcie tabela zostanie przesunięta w prawo i oblana z lewej strony tekstem.

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst

W efekcie tabela zostanie przesunięta w lewo i oblana z prawej strony tekstem.

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Poziome wyrównanie danych w komórkach

Atrybut align wykorzystuje się także do poziomego wyrównania zawartości komórki (a nawet całego wiersza tr) - środkowania, justowania do lewej i justowania do prawej, z użyciem wartości center, left i right.

Oto wynik:

a1 - do lewej	a2 - środkowanie	a3 - do prawej
b1 - do lewej	b2 - środkowanie	b3 - do prawej
c1 - do lewej	c2 - środkowanie	c3 - do prawej

Teoretycznie możliwe jest też wyrównanie według znaku (można wstawiać ten atrybut w komórkach, wierszach i grupach kolumn), co znajduje praktyczne zastosowanie w wyrównywaniu liczb ze znakami po przecinku, pozwalając poprawnie wyrównywać je właśnie według podanego znaku - niestety, żadna z przeglądarek nie interpretuje tego atrybutu.

Alternatywnie stosuje się też style CSS, dajace ten sam efekt.

a1 - do lewej	a2 - środkowanie	a3 - do prawej
b1 - do lewej	b2 - środkowanie	b3 - do prawej
c1 - do lewej	c2 - środkowanie	c3 - do prawej

Wysokość tabeli

Wysokość tabeli była niekiedy dawniej regulowana za pomocą nieoficjalnego, niewchodzącego w skład HTML atrybutu height, o wartościach w pikselach lub procencie widocznego okna, ignorowanego zresztą przez niektóre przeglądarki. Poprawne może być jedynie podanie wysokości za pomocą stylów CSS, na przykład:

Wynik podania tej wartości:

Komórka a1	Komórka a2
Komórka a3	Komórka a4

Wartość podana w procentach będzie interpretowana jedynie wtedy, gdy tabela będzie umieszczona w pojemniku wyższego rzędu o podanej wysokości.

Komórka a1	Komórka a2
Komórka a3	Komórka a4

Pionowe wyrównanie danych w komórkach

Atrybut valign (vertical align) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji:

Wynik:

a1 - do górnego brzegu	a2 - do górnego brzegu	a3 - do górnego brzegu
b1 - do górnego brzegu	b2 - do dolnego brzegu	b3 - do środka

Kolor tła tabeli

W starszych wersjach HTML stosowano atrybut bgcolor, który pozwalał zdefiniować kolor tła calej tabeli, wiersza lub wybranych komórek. W HTML 4.01 i XHTML 1.0 jest to atrybut przestarzały, zaś z XHTML 1.1 w ogóle go wycofano na rzecz stylów.

Przykład zdefiniowania odrębnych kolorów w każdej z komórek:

czerwona komórka	zielona komórka	żółta komórka
beżowa komórka	niebieska komórka	różowa komórka

Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka - poprzednio stosowano atrybut background="nazwa_obrazka", ale obecnie jest to polecenie przestarzałe i stosuje się style CSS:

Użycie style="background-image: url(../grafika/canvas2.gif)" da tutaj następujący efekt:

111	222	333
444	555	666
777	888	999

Kolor obramowania tabeli

Stosowany niekiedy wcześniej atrybut bordercolor był niestandardowym rozszerzeniem Internet Explorera, który został też zaakceptowany przez Navigatora. Należy unikać tego atrybutu, natomiast swobodę definiowania kolorów obramowania dają nam obecnie style CSS - połączenie stylu, grubości i koloru obramowania.

Przykładowy kod:

I wynik:

a1	a2	a3	a4	a5
b1	b2	b3	b4	b5
c1	c2	c3	c4	c5

Tytuł tabeli

Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólnymi ramami tabeli. Na przykład:

<table border style="width: 300px; ">
<caption>Tytuł tabeli</caption>

I żywy efekt:

Tytuł tabeli
a1	a2	a2
b1	b2	b3

Za pomocą stylów CSS możesz zdefiniować położenie tytułu, nad lub pod tabelą:

<caption style="caption-side: top; ">Tytuł tabeli</caption>

Tytuł tabeli
a1	a2	a2
b1	b2	b3

<caption style="caption-side: bottom; ">Tytuł tabeli</caption>

Tytuł tabeli
a1	a2	a2
b1	b2	b3

Informacje o CAPTION

Nagłówek wiersza i kolumny

Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej i w przypadku kolumn pozycjonowane na środku. Przykład nagłówków kolumn:

Wzrost produkcji w latach 1991-1995 (w mln USD)
1991	1992	1993	1994	1995
1150	1240	1380	1420	1550

Nagłówek jest definiowany za pomocą znaczników:

<th> </th>

Powyższa, przykładowa tabela ma więc kod:

<table border cellpadding="10" width="400">
<caption>Wzrost produkcji w latach 1991-1995 (w mln USD)</caption>
<tr>
<th>1991</th> <th>1992</th><th>1993</th> <th>1994</th> <th>1995</th>
</tr>
<tr style="text-align:center">
<td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td>
</tr>
</table>

Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajdują się dane liczbowe.

Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem.

<table border cellpadding="10" width="500">
<caption>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</caption>
<tr><td></td><th>1991</th> <th>1992</th> <th>1993</th> <th>1994</th> <th>1995</th> </tr>
<tr style="text-align: center; "><th>Masło</th> <td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td></tr>
<tr style="text-align: center; "><th>Margaryna</th> <td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr>
</table>

co da w rezultacie:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
	1991	1992	1993	1994	1995
Masło	1150	1240	1380	1420	1550
Margaryna	800	900	980	1150	1320

W wierszach z danymi liczbowymi wystarczyło wstawić kody nagłówków (Masło i Margaryna), zaraz za definicją wiersza, a przed pierwszą definicją komórki z danymi.

Zauważmy też, że wiersz nagłówków z latami został poprzedzony pustą komórką, dzięki czemu nagłówki zostały we właściwy sposób ułożone w stosunku do kolumn z danymi. Gdybyśmy chcieli, aby ta pusta komórka była "wklęsła", możemy w niej wstawić "lepką spację", czyli kod   (non-breaking space).

Informacje o TH

Łączenie komórek

Komórki danych i/lub nagłówków można ze sobą łączyć. Na przykład:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
	1991	1992	1993	1994	1995
Masło	1950	2120	1380	1420	1550
Margaryna	1950	2120			980	1150	1320

W powyższym przykładzie, znając łączną produkcję tłuszczów, ale nie znając jej struktury, przedstawiliśmy łączne dane dla dwóch kolejnych lat - 1991 i 1992.

Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji atrybutu <td rowspan="x">. W naszej tabeli zostały opatrzone atrybutem rowspan="2" dwie pierwsze komórki z danymi w wierszu Masło (i oczywiście podana łączna produkcja tłuszczów). Jednocześnie usunęliśmy dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata 1993-1995) dostosowały się do odpowiednich komórek w wierszu Masło.

<tr style="text-align: center">
<th>Masło</th><td rowspan="2">1950</td><td rowspan="2">2120</td><td>1380</td><td>1420</td><td>1550</td>
</tr>

Podobnie można łączyć komórki w kolumnach, stosując dla nagłówków atrybut th colspan="y", a dla danych td colspan="z".

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
	1991-1992		1993-1995
Masło	2390		4350
Margaryna	800	900	980	1150	1320

W przykładzie zostało pokazane poziome łączenie komórek - połączono w ten sposób komórki nagłówków z latami i komórki dotyczące produkcji masła, której czasowej struktury nie znamy.

<tr><td> </td><th colspan="2">1991-1992</th><th colspan="3">1993-1995</th></tr>
<tr style="text-align: center"><th>Masło</th><td colspan="2">2390</td><td colspan="3">4350</td></tr>
<tr style="text-align: center"><th>Margaryna</th><td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr>

I jeszcze jeden, bardziej skomplikowany przykład łączenia komórek, z wykorzystaniem colspan i rowspan w jednej tabeli:

Wzrost produkcji tłuszczów i przetworów owocowych w latach 1991-1995 (w mln USD)
	Produkt	1991-1992		1993	1994	1995
Tłuszcze	Masło	2390		1380	1420	1550
		Margaryna	1700		980	1150	1320
	Przetwory owocowe	Dżem	750	840	880	1020	1150
		Marmolada	400	500	570	750	820

Zagnieżdżanie tabel

Możliwe jest zagnieżdżanie tabel w komórkach nadrzędnej tabeli. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <td> </td>. Na przykład:

100

200

300

AAA

BBB

CCC

DDD

400

500

600

Łatwo dostrzec, że tabela złożona z dwóch wierszy i dwóch kolumn została zagnieżdżona w komórce z wartością 300.

Uwaga: zagnieżdżanie tabel w tabelach, często spotykane przy tworzeniu bardzo skomplikowanych konstrukcyjnie layoutów stron, nie jest uważane za dobrą manierę i raczej odradza się stosowanie tej techniki, tym bardziej, że samo opieranie stron na szkieletach tabel jest dzisiaj już techniką uznawaną za niewłaściwą.

Sekcje tabeli - nagłówek, ciało i stopka

Podobnie jak cały dokument, także i tabela może mieć sekcje - część nagłówkową, część główną i stopkę. Elementy te są (teoretycznie) przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli.

Podział tabeli na sekcje jest odzwierciedleniem idei tzw. Complex Table Model, obejmującego polecenia table, colgroup, col, caption, thead, tbody, tfoot, tr, th, td, a będącego rozszerzeniem starszej idei Simple Table Model.

Uwaga: nie należy mylić sekcji nagłówkowej tabeli z nagłówkami kolumn i wierszy, mimo zbieżności nazwy.

Wydzielenie nagłówka i stopki pozwala, teoretycznie, wyświetlać zawsze na ekranie (i drukować) zawarte w nich informacje, gdy tabela przekracza wielkością ekran czy stronę druku. Przewijana jest tylko główna część tabeli (dane), a informacje nagłówka i stopki pozostają cały czas widoczne. Analogicznie, gdybyśmy drukowali większą tabelę, która nie mieści się na jednej stronie druku, nagłówek i stopka tabeli będą drukowane na każdej kolejnej stronie, a zmieniać się będą oczywiście dane zawarte w ciele tabeli tbody. Na razie przeglądarki nie interpretują w ten sposób nagłówka i stopki tabeli. Wszystkie trzy główne przeglądarki w swych najnowszych wersjach wyświetlają jednak poprawnie kolejność części.

Uwaga: tfoot musi być zdefiniowane w tabeli przed tbody.

<table width="300" border cellpadding=5>
<thead><tr><td colspan="2">To jest część nagłówkowa</td></tr></thead>
<tfoot><tr><td colspan="2">To jest stopka</td></tr></tfoot>
<tbody>
<tr>
<td>komórka 11</td>
</tr>
<tr>
<td>komórka 21</td>
</tr>
</tbody>
</table>

I rezultat:

To jest część nagłówkowa
To jest stopka
Komórka 11	Komórka 12
Komórka 21	Komórka 22

Zauważ, że gdy komórek w wierszu tabeli jest więcej niż 1, to i część nagłówkowa oraz stopka tabeli powinny mieć albo tyle samo komórek w wierszu, albo zastosowany atrybut colspan="x".

Informacje o THEAD

Informacje o TBODY

Informacje o TFOOT

Krawędzie tabeli

HTML 4 zawiera dwa nowe atrybuty pozwalające zdefiniować sposób wyświetlania zewnętrznych krawędzi tabel (frame) i wewnętrznych linii rozdzielających komórki (rules). Atrybutów frame i rules używamy razem z atrybutem border="x" wyznaczającym grubość obramowań.

Wyjdźmy od podstawowej definicji tabeli, zawierającej, przykładowo, 3 wiersze i 3 kolumny (dla przejrzystości przykładu stosujemy w nim atrybut cellpadding="5").

a1	a2	a3
b1	b2	b3
c1	c2	c3

Atrybut frame="wartość" pozwala wyświetlać w specjalny sposób obramowanie tabeli. Wstawiamy go bezpośrednio do definicji tabeli.

Przykłady wartości frame podajemy w połączeniu z wartością rules="none", czyli bez obecności wewnętrznych krawędzi.

Wartość frame="void" pozwala usunąć zewnętrzne obramowanie tabeli.

a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość frame="above" wstawia górną krawędź obramowania, a frame="below" - dolną.

a1	a2	a3
b1	b2	b3
c1	c2	c3
a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość frame="vsides" wyświetla lewą i prawą krawędź obramowania tabeli, a frame="hsides" - górną i dolną.

a1	a2	a3
b1	b2	b3
c1	c2	c3
a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość frame="lhs" wyświetla lewą krawędź obramowania, a frame="rhs" - prawą.

a1	a2	a3
b1	b2	b3
c1	c2	c3
a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość frame="box" wyświetla wszystkie krawędzie obramowania.

a1	a2	a3
b1	b2	b3
c1	c2	c3

Seria wartości atrybutu rules="wartość" pozwala manipulować wewnętrznymi krawędziami tabeli (przykłady podajemy z użyciem frame="void", czyli bez obecności krawędzi zewnętrznych).

Wartość rules="none" powoduje usunięcie linii wewnętrznych.

a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość rules=rows powoduje wyświetlenie tylko poziomych linii wewnętrznych.

a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość rules="cols" powoduje wyświetlenie tylko pionowych linii wewnętrznych (Opera ma problemy).

a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość rules="all" powoduje wyświetlenie wszystkich linii wewnętrznych.

a1	a2	a3
b1	b2	b3
c1	c2	c3

Wartość rules="groups" powoduje wyświetlenie tylko linii wewnętrznych dzielących część nagłówka, ciała i stopki tabeli oraz grup kolumn.

Istotna informacja o kolumnach i grupach kolumn.

W tabeli (zaraz za poleceniem <table>) możemy definiować grupy kolumn, używając polecenia colgroup span (grupa), a w ich ramach ewentualnie dodatkowo definiować atrybuty kolumny col (pojedyncza kolumna). Przykładowo:

<colgroup span="4" align="center"> spowoduje wydzielenie grupy 4 kolumn (span="4") i środkowanie ich zawartości.
<col align="right"> spowoduje wydzielenie 1 kolumny i wyrównanie jej zawartości do prawego marginesu.

Przykładowo załóżmy, że mamy tabelę o 4 kolumnach. Wydzielmy grupy kolumn - pierwsza grupa zawiera kolumnę z tekstem, wyrównywaną do prawego marginesu, druga zawiera 3 kolumny z liczbami, wyrównanymi do środka:

Oczywiście, w tym przypadku możemy nawet uprościć definicję, rezygnując z podawania polecenia col, a przenosząc wyrównanie do colgroup, gdyż wszystkie kolumny drugiej grupy są wyrównywane do środka.

Żywy przykład:

śliwki	1,2	1,3	0,9
gruszki	0,8	1,1	1,4
jabłka	3,1	2,7	2,2
czereśnie	0,4	0,3	0,6
wiśnie	0,2	0,4	0,3

Informacje o COL

Informacje o COLGROUP

Tak określony grupy kolumn możemy teraz oddzielić od siebie krawędziami, stosując atrybut rules="groups".

<table border="1" cellpadding="5" frame="void" rules="groups">
<colgroup span="1" align="right">
<colgroup span="3" align="center">
<tr><td>...
...

śliwki	1,2	1,3	0,9
gruszki	0,8	1,1	1,4
jabłka	3,1	2,7	2,2
czereśnie	0,4	0,3	0,6
wiśnie	0,2	0,4	0,3

Jak widzimy, atrybut rules="groups" spowodował wstawienie krawędzi między wydzielone grupy kolumn. Krawędzi zewnętrznej nie ma, gdyż usunął ją tutaj atrybut frame="void".

Wstawianie krawędzi między grupy kolumn można zastosować w odniesieniu zarówno do grup kolumn wydzielanych ręcznie, jak i części tabeli definiowanych przez polecenia thead, tfoot i tbody. Poniższa tabela pokazuje właśnie przykład, w którym są wydzielone nagłówek (z tytułami kolumn), ciało (z danymi) i stopka tabeli, zaś kolumny zostałt podzielone na dwie grupy: pierwsza z kolumną zawierającą nazwy owoców, a druga zawierająca kolumny z danymi. Podanie w definicji tabeli table atrybutów border="1" frame="void" rules="groups" da ostateczny efekt w postaci poniższej tabeli.

produkcja	2002	2003	2004	2005
w mln ton

Formularze

O rozdziale: Tworząc strony internetowe, przekazujesz informacje swoim czytelnikom. A czy możliwa jest sytuacja odwrotna, gdy to właśnie Ty uzyskujesz informacje od gości swojej strony? Owszem, temu właśnie służą formularze - technikę ich tworzenia prezentujemy w niniejszym rozdziale.

Uwagi ogólne

Formularze to jedne z najciekawszych elementów stron internetowych. Pozwalają one autorom stron uzyskiwać informację od czytelników, zaś tym ostatnim, na przykład, wypełniać ankiety czy zamawiać jakieś towary i usługi. Przykładem formularza jest strona z ankietą w niniejszym kursie, za pomocą której Czytelnicy tego kursu zechcieli uprzejmie wysłać kilka cennych informacji o sobie i swoich narzędziach pracy. Jeszcze raz bardzo im dziękuję za poświęcony czas.

Warto zauważyć, że formularze nie należą bynajmniej do najprostszych i najbardziej potrzebnych na co dzień elementów. Są one w zasadzie stosowane przez nieco bardziej zaawansowanych autorów stron WWW. Na dodatek tematyka tworzenia formularzy wkracza już na ogół w zagadnienia pracy skryptów na serwerze, co jest już "wyższą szkołą jazdy".

Jednak stosunkowo niezbyt skomplikowany formularz można wykonać domowymi środkami, a kontakt z czytelnikami strony zapewnić sobie za pomocą poczty elektronicznej, tak jak ma to miejsce w przypadku wspomnianej ankiety. Tego rodzaju formularz będzie zapewne najczęściej stosowany przez znakomitą większość osób zainteresowanych zebraniem jakiejś informacji. Tutaj pokażemy właśnie w praktyczny i możliwie prosty sposób zasady konstruowania takiego formularza.

Na rynku programów shareware'owych i freeware'owych istnieje wiele narzędzi, które wspomagają tworzenie formularzy. Jeśli zamierzamy tworzyć dokumenty internetowe zawierające formularze, warto zaopatrzyć się w edytor, który zawiera kreator formularza lub przynajmniej okienka dialogowe do budowania poszczególnych elementów - w praktyce wszystkie zaawansowane edytory takie wspomaganie oferują. Istnieją też programy wyspecjalizowane. Chodzi generalnie o to, aby program nie zmuszał do wprowadania wszystkich kodów ręcznie.

Ogólne ramy formularza

Elementy formularza są tworzone w pewnych ogólnych ramach, między nimi umieszczamy wszystkie pozostałe elementy. Ramy te tworzymy za pomocą polecenia:

<form> </form>.

Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik strony zechce przesłać do autora jakieś informacje. Nas interesuje w tym miejscu wysyłanie informacji za pomocą poczty elektronicznej, w związku z czym w definicji formularza powinniśmy umieścić specjalne polecenie action=jakaśtamakcja. Należy również określić sposób komunikowania się przeglądarki czytelnika z serwerem, a więc czy przesyła ona jakieś informacje, czy też je pobiera. Wybieramy zatem jedną z dwóch możliwych metod - post lub get. Wygląda to więc ostatecznie następująco (zakładamy, że czytelnik strony ma wysłać informacje za pomocą poczty elektronicznej):

<form action="mailto:autor_strony@jego_domena" method="post">
zawartość formularza
</form>

Jeśli dodasz jeszcze temat listu, czyli subject po znaku zapytania, wypełniony formularz trafi do autora z taką właśnie informacją w polu tematu listu. Jeśli zamieszczamy na stronie kilka formularzy z ankietami, każdą z nich możemy opatrzyć innym tematem, co ułatwi np. organizację odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka.

<form action="mailto:autor_strony@jego_domena?subject=Temat ankiety" method="post">
zawartość formularza
</form>

I jeszcze jeden istotny parametr:

Gdyby ktoś wysłał tak skonstruowany formularz , dane dotarłyby nie w liście, a w załączniku, i to mniej więcej w takiej postaci:

Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40&
zaj%EAcie=emerytura&Miejscowo%9C%E6=50-100&komputer=PC+Pentium&system=on&
Przegl%B9darka+WWW=Netscape+Navigator&
Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wy%9Clij

Problem polega na tym, że znaki z formularza są w dość osobliwy sposób konwertowane i docierają częściowo w postaci "krzaków". Jeśli nie chcemy, aby odpowiedź przychodziła w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, powinniśmy zastosować parametr enctype="text/plain".

<form enctype="text/plain" action="mailto:wimmer@wimmer.pl?subject=Temat ankiety" method="post">

A oto, co zobaczymy w otrzymanym liście:

Imię i nazwisko=Jan Kowalski
Płeć=mężczyzna
Wiek=31-40
zajęcie=praca
Miejscowość=powyżej 1000
komputer=PC Pentium
system operacyjny=Windows 95
Przeglądarka WWW=Internet Explorer
Przeglądarka WWW=Netscape Navigator
Ocena=bdb
Opinia=Genialne
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ

Informacje o FORM

Grupy pól formularza

Formularz zawiera różnego typu pola, które są wypełniane informacjami - np. imię i nazwisko, zamawiany towar, dalsze informacje o sobie, komentarz itd. Pola te są podzielone na kilka podstawowych grup:

input, z dodatkowymi parametrami type, name i value, służy do tworzenia pól, gdzie czytelnik strony może wpisać informację lub wybrać jakąś opcję.

Na przykład (wykorzystujemy tu dodatkowo obramowanie pól formularza fieldset i opis legend, które prezentowaliśmy w rozdziale o elementach blokowych, sformatowane dodatkowo za pomocą stylów):

Formularz - przykład input

Początek formularza

Wpisz swoje imię i nazwisko:

Dół formularza

lub

Formularz - przykład input

Początek formularza

Ile masz lat?

Mniej niż 20
21-40
41-60
więcej niż 60

Dół formularza

select służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje.

Na przykład:

Formularz - przykład select

Początek formularza

Jakiej przeglądarki WWW używasz?

Dół formularza

textarea jest poleceniem do tworzenia większego pola na dodatkowy komentarz czytelnika.

Na przykład:

Formularz - przykład textarea

Początek formularza

Wpisz swoje uwagi:

0x01 graphic

Dół formularza

Niżej rozpatrzymy szczegółowo konstrukcję elementów wchodzących w skład formularza.

Pole tekstowe

Jak wspomnieliśmy wyżej, input służy o wprowadzania pól, które pozwolą czytelnikowi wpisać jakąś informację lub wybrać jedną z opcji.

Pole tekstowe tworzymy za pomocą definicji:

<input type="text" name="nazwa_pola" value="wartość początkowa" size="rozmiar pola w znakach" maxlength="maksymalny rozmiar pola">

Na przykład:

<input type="text" name="nazwisko" value="Kowalski" size="30" maxlength="40">

A łącznie z informacją wprowadzającą:

<p>Podaj swoje nazwisko: <input type="text" name="nazwisko" value="Kowalski" size="30" maxlength="40"></p>

Pamiętaj, aby wszelkie zdania w formularzu, pola, zestawy opcji itd. obejmować jakimiś pojemnikami, np. znacznikami akapitu <p> czy bloku <div> - jest to konieczne do zwalidowania kodu strony przez sieciowy walidator World Wide Web Consortium.

Formularz - przykład pola tekstowego

Początek formularza

Podaj swoje nazwisko:

Dół formularza

Type="text" to typ pola, w tym wypadku tekstowego. Name to nazwa pola, w naszym przykładzie "nazwisko".

Naturalnie podanie wartości początkowej value nie jest konieczne, wystarczy zostawić pusty cudzysłów - wartość początkowa ma jedynie sugerować użytkownikowi charakter wprowadzanych danych. Size to wielkość widocznego pola w znakach (gdy zawartość pola będzie dłuższa, będzie ono "przewijane" w prawo), natomiast maxlength to maksymalna liczba znaków, jaką można wprowadzić.

Przykład bardziej rozbudowanego zestawu pól tekstowych, w których wykorzystujemy dodatkowo formatowanie za pomocą stylów, m.in. pozycjonowanie pól tekstowych za pomocą position: absolute; left: 150px; , aby pola do wprowadzania danych były ustawione w tej samej odległości od lewego marginesu pojemnika, a background-color: cornsilk; do nadania koloru tła polom tekstowym.

<div style="position:relative">
<form enctype="text/plain" action="mailto:wimmer@helion.pl?subject=Temat ankiety" method="post">
<fieldset>
<legend>Formularz - przykład <strong>pola tekstowego</strong></legend>
<p><strong>Imię</strong>: <input type="text" name="Imie" value="Jan" size="30" maxlength="40" style="position: absolute; left: 150px; background-color: cornsilk; font-style: italic; color: gray "></p>
<p><strong>Nazwisko</strong>: <input type="text" name="Nazwisko" value="Kowalski" size="30" maxlength="40" style="position: absolute; left:150px; background-color: cornsilk; font-style: italic; color: gray "></p>
<p><strong>Zawód</strong>: <input type="text" name="Zawod" value="inżynier" size="30" maxlength="40" style="position: absolute; left:150px; background-color: cornsilk; font-style: italic; color: gray "></p>
</fieldset>
</form>
</div>

Początek formularza

Formularz - przykład pola tekstowego

Imię:

Nazwisko:

Zawód:

Dół formularza

Pole hasła

Pole hasła jest bardzo podobne do pola tekstowego. Jest stosowane do podawania hasła, np. przy przechodzeniu do jakiejś strony. Zaletą pola tego typu jest jedynie ukrycie wpisywanych danych przed postronnym okiem - nie zapewnia ono szyfrowania danych czy zabezpieczenia transmisji. Stosowany jest tutaj type="password".

<p>Podaj hasło: <input type="password" name="haslo" value="" size="20" maxlength="20"></p>

Gdy spróbujesz wpisać do poniższego pola jakiś tekst, zostanie on wyświetlony za pomocą gwiazdek.

Formularz - przykład pola hasła

Początek formularza

Podaj hasło:

Dół formularza

Pole opcji

Pole opcji (przełącznika) jest polem, w którym czytelnik strony wybiera jedną z dostępnych możliwości

W polu stosowany jest type="radio", który wprowadza tzw. przycisk radiowy. Czytelnik będzie wybierał tylko jedną z możliwych wartości. Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. Typ ten stosujemy wtedy, gdy nie można podać kilku wartości, gdyż jest to nielogiczne. Trudno być na przykład jednocześnie kobietą i mężczyzną (proszę się powstrzymać od żartobliwych spekulacji medyczno-psychologicznych!).

<p><input type="radio" name="plec" value="kobieta" checked="checked"> Kobieta</p>
<p><input type="radio" name="plec" value="mezczyzna"> Mężczyzna</p>

Nazwą pola name jest "plec", wartość value przybiera dwie możliwe wartości. Jeśli podamy przy jednej z możliwości checked="checked", pole to będzie domyślnie zaznaczone.

Formularz - przykład pola opcji

Początek formularza

Podaj swoją płeć

Kobieta

Mężczyzna

Dół formularza

Pole wyboru

Pole wyboru umożliwia dokonanie wyboru kilku możliwości jednocześnie, np. zaznaczenie kilku języków, którymi się włada, czy kilku używanych przeglądarek internetowych.

W polu stosowany jest type="checkbox", który wprowadza pole w postaci kwadratu. Kliknięcie w nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. Jeśli zdefiniujemy kilka pól, czytelnik strony będzie mógł zaznaczyć parę z nich lub wszystkie, zależnie od treści.

<p><input type="checkbox" name="jezyk" value="angielski"> angielski</p>
<p><input type="checkbox" name="jezyk" value="francuski"> francuski</p>
...

Name jest nazwą pola - w tym wypadku jest to język. Każde kolejne pole zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych (tę samą zmienną). Value zmienia się, zależnie od języka. W kolejnych wierszach musimy wpisać różne języki. Za poleceniem input wpisujemy jeszcze raz nazwę języka, aby była widoczna dla czytelnika.

Formularz - przykład pola wyboru

Początek formularza

Czy znasz któryś z języków kongresowych?

angielski

francuski

niemiecki

hiszpański

rosyjski

chiński

arabski

Dół formularza

Informacje o INPUT

Lista wyboru

Lista wyboru select służy do tworzenia rozwijanych menu, zawierających kilka opcji. Czytelnik strony może wybrać jedną z nich lub kilka. Składnia jest następująca:

<div>
<select name="nazwa_listy" size="liczba wyświetlanych pozycji">
<option> pierwsza pozycja
<option> druga pozycja
<option> trzecia pozycja
...
</select>
</div>

Na przykład:

<p><strong>Wybierz produkt:</strong></p>
<div>
<select name="owoce" size="3">
<option> Truskawki
<option> Maliny
<option> Poziomki
<option> Wiśnie
<option> Śliwki
</select>
</div>

Zauważ, że gdy nie podamy liczby wyświetanych pozycji (size=x), uzyskamy rozwijaną listę, gdy ją podamy, otrzymamy daną liczbę widocznych pozycji.

W efekcie uzyskamy:

Formularz - przykład listy wyboru

Początek formularza

Wybierz produkt:

Dół formularza

Gdybyśmy chcieli zapewnić możliwość wybrania kilku pozycji, a nie jednej, powinniśmy podać:

Czytelnik strony może zaznaczać wtedy kilka pozycji, trzymając wciśnięty klawisz Ctrl. Rezygnacja z wyboru także wymaga przyciśnięcia Ctrl.

Formularz - przykład listy wyboru

Początek formularza

Wybierz produkt:

Dół formularza

Jeśli chcemy zaznaczyć domyślnie jedną z pozycji, musimy użyć przy niej parametru selected (czyli <option selected="selected"> pozycja).

Formularz - przykład listy wyboru

Początek formularza

Wybierz produkt:

Dół formularza

Informacje o SELECT

Listę opcji możemy dodatkowo grupować, wykorzystując polecenie optgroup.

<p><strong>Wybierz produkt:</strong></p>
<div>
<select name="owoce" size="8">
<optgroup label="Owoce miękkie">
<option> Truskawki
<option> Maliny
<option> Poziomki
</optgroup>
<optgroup label="Owoce twarde">
<option> Jabłka
<option> Gruszki
</optgroup>
</select>
</div>

Formularz - przykład listy wyboru z grupowaniem opcji

Początek formularza

Wybierz produkt:

0x01 graphic

Dół formularza

Zauważmy jeszcze przy okazji, że przeglądarki nieco odmiennie wyświetlają listy wyboru z grupowaniem opcji - w IE7 i Firefoksie tytuły bloków opcji są pogrubione i pochylone, a w Operze białe na czarnym tle. Nawiasem mówiąc, sposób wyświetlania możemy samodzielnie zmienić, nadając poleceniu optgroup odpowiednie style, np. czerwony kolor czy niebieskie tło.

Informacje o OPTGROUP

Obszar tekstowy

Obszar tekstowy to miejsce, w którym czytelnik strony wysyłający formularz może wpisać swoje dodatkowe uwagi, o objętości do 1024 znaków.

Obszar jest wprowadzany za pomocą polecenia:

Parametr rows wyznacza liczbę wierszy pola, a parametr cols - liczbę kolumn.

Przykład kodu:

<fieldset>
<legend>Formularz - przykład <strong>obszaru tekstowego</strong></legend>
<form action="mailto:wimmer@helion.pl" method="post">
<p><strong>Wpisz swoje uwagi:</strong></p>
<p><textarea name="uwagi" rows="8" cols="50" style="color: gray; font-style: italic; ">
tutaj jest miejsce na twoje swobodne uwagi (do 1024 znaków)
</textarea></p>
</form>
</fieldset>

Formularz - przykład obszaru tekstowego

Początek formularza

Wpisz swoje uwagi:

0x01 graphic

Dół formularza

Zwróc uwagę na tekst między znacznikami textarea - informuje on czytelnika, że w tym miejscu może wpisać swoje uwagi.

Informacje o TEXTAREA

Wysyłanie danych

Po zbudowaniu formularza trzeba jeszcze zatroszczyć się o kod, który pozwoli wysłać informacje podane przez czytelnika strony do jej autora. Służy do tego polecenie input z atrybutem type="submit". Gdy czytelnik kliknie ten przycisk, wszystkie podane przez niego informacje (ciągle zakładamy, że posługujemy się tu funkcją poczty elektronicznej), jak zaznaczone opcje, wypełnione pola tekstowe czy wybrane pozycje na liście zostaną przesłane w liście do autora.

Atrybut value="treść_na_przycisku" spowoduje wyświetlenie informacji na przycisku, która mówi czytelnikowi, co ma zrobć, aby przesłać formularz. Kliknięcie na przycisku uruchomi z kolei domyślny program obsługujący pocztę elektroniczną i zapoczątkuje proces przesyłania poczty do osoby, która została zdefiniowana w action="mailto:autor_strony@jego_domena".

Można też dać czytelnikowi możliwość wycofania się z wprowadzonych danych - zresetowania całego formularza.

Atrybut type="reset" spowoduje usunięcie wszystkich danych wpisanych do formularza (właściwie zresetowanie do wartości domyślnych). Czasem rozmyślimy się, więc zawsze warto mieć możliwość zrezygnowania i rozpoczęcia wszystkiego od nowa.

Przykładowy formularz, łączący obszar tekstowy i przyciski wysyłania i resetowania zawartości.

Początek formularza

Uwagi od czytelników

Wypełnij poniższe pola

Podaj swoją płeć

Kobieta

Mężczyzna

0x01 graphic

Dół formularza

Gdy wpiszesz coś do obszaru tekstowego i klikniesz przycisk Wyślij, zostanie uruchomiony program pocztowy (uwaga: adres jest fikcyjny). Gdy klikniesz przycisk Usuń, zawartość obszaru tekstowego zostanie przywrócona do pierwotnej postaci.

Przycisk

Nowym elementem HTML 4 jest polecenie button, które jest podobne do klasycznego input, ale pozwala wprowadzić do "klikalnego" przycisku znacznie więcej elementów.

<button>treść przycisku</button>

Treść przycisku

Przyciskw jednej linii z tekstem

0x01 graphic

Wyślij do mnie ten formularz

Funkcjonalność przycisku można rozbudowywać o skrypty.

Informacje o BUTTON

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) są nieodłącznym towarzyszem współczesnej wersji języka HTML.

Język HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną)
Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach

Można wprawdzie stworzyć witrynę, używając jedynie czystego HTML, jednak będzie to witryna prosta i mało atrakcyjna. Style pomogą znacznie ją wzbogacić, dlatego ich znajomość jest dzisiaj po prostu niezbędna. Ta część kursu HTML służy właśnie temu celowi - przećwiczenie zawartych w niej informacji da webmasterowi dużą swobodę w tworzeniu ciekawych wizualnie stron. Ponadto stosowanie stylów oszczędza wiele pracy koniecznej dawniej do sformatowania dokumentów za pomocą tradycyjnych technik - nierzadko zmiana jednego drobnego parametru w arkuszu stylów pozwala zmienić wygląd całej witryny!

Pamiętaj, że podane tu informacje opisują klocki budulcowe stylów, natomiast sposoby ich łączenia ze sobą, wypróbowywanie rozmaitych kombinacji stylów, musisz już wypraktykować we własnym zakresie, tym bardziej, że przeglądarki różnią się zakresem interpretacji stylów, a niekiedy nawet sposobem wyświetlania. Im więcej ćwiczeń wykonasz, im dłużej będziesz obcować ze stylami, tym lepsze osiągniesz wyniki. Warto śledzić strony w Internecie opisujące rozmaite sztuczki i chwyty, a także czytać książki poświęcone praktyce stosowania stylów, jak choćby sławne pozycje Erica Meyera, wydane także w Polsce przez Helion. Dobry webmaster powinien nie tylko biegle znać składniki CSS, ale i potrafić zrobić z nich praktyczny użytek - łatwo zauważyć, że stosowanie stylów jest nie tylko umiejętnością techniczną, ale i nieraz wręcz sztuką, w której objawia się talent plastyczny i smak autora witryny.

Jeśli nie znasz jeszcze problematyki stylów, rzuć najpierw okiem na treść rozdziału Budowa stylu, gdzie zobaczysz kilka elementarnych przykładów użycia stylów, które pokazują poglądowo, jakie efekty można dzięki nim uzyskać. A potem przejdź do systematycznego studiowania stylów.

Zbiorczą listę stylów znajdziesz na stronie Alfabetyczna lista stylów - to ułatwienie dla osób chcących szybko znaleźć konkretne polecenie.

Dla zachęty powiedzmy, że dział kursu HTML poświęcony stylom opiera się na czystych stylach. Nie stosujemy tu ani ramek, ani tabel, zaś wszystkie strony są oparte na trzech blokach utworzonych za pomocą polecenia div i sformatowanych za pomocą stylów. Również nawigacja wykorzystuje wyłącznie style - nie stosujemy w niej wcale JavaScript, jak można by sądzić na pierwszy rzut oka. Dla zainteresowanych, zawartość arkusza stylów użytego w tej części kursu (domyślną czcionką jest elegancka i czytelna Calibri z Windows Vista i Office 2007, drugą w kolejności Tahoma).

Uwaga: do czytania rozdziału bardzo zalecamy używanie najnowszych wersji Opery lub Firefoksa, gdyż Internet Explorer ma jeszcze spore opóźnienia w interpretacji stylów. Lektura rozdziału o stylach jest właśnie doskonałą okazją do ostatecznej zamiany gorszej przeglądarki (IE) na lepszą.

Inne, przydatne źródła wiedzy o stylach:

Ramki

O rozdziale: Opisujemy tu technikę budowania witryny w oparciu o ramki, czyli specjalne okienka, do których wczytywane są strony. Technika ta jest jednak uznana w HTML 4 i XHTML 1.0 za schyłkową (pozostaje w obrębie wersji Doctype Transitional i Frameset), zaś w XHTML 1.1 została zaniechana, podobnie jak pływające ramki. Opis techniki umieszczamy tutaj ze względu na fakt, że jest ciągle jeszcze stosowana przez niektórych webmasterów, odradzając jednak jej stosowanie.

Ramki były szczególnie popularne od połowy lat 90., gdy ich obsługa pojawiła się "na dziko" w przeglądarce Netscape Navigator (później też w innych przeglądarkach), a potem zostały uzwględnione w specyfikacji HTML 4. Na przełomie dekad zaczęły być sukcesywnie wypierane przez tzw. portalowe układy stron oparte na tabelach - przypomnij sobie uwagi dotyczące ewolucji layoutów stron zawarte w rozdziale HTML dla początkujących.

Budowa strony ramkowej

Najbardziej typowym przykładem użycia ramek jest podział okna przeglądarki na dwa pionowe okna i umieszczenie w jednym (zwykle lewym, mniejszym) spisu treści, a przeznaczenie drugiego (prawego, większego) na przywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Kliknięcie na jakiejkolwiek pozycji spisu w lewym oknie powoduje wczytanie dokumentu do okna z prawej strony.

Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Jest ona kontenerem dla ramek. Pozostałe strony, wchodzące w skład całego, wielostronicowego układu, są stronami podrzędnymi.

Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki noframes pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <body></body> mogą być umieszczane jedynie w obrębie noframes, aczkolwiek ich obecność nie jest konieczna.

Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka edytorów HTML. Za chwilę wyjaśnimy ich znaczenie, a oto przykład.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Edytory HTML</title>
</head>
<frameset cols="25%,*%">
<frame scrolling="auto" name="lista edytorów" src="spisedyt.htm">
<frame scrolling="yes" name="edytory" src="edyt.htm">
<noframes>
<body>
Zawartość strony dla przeglądarek nie obsługujących ramek
</body>
</noframes>
</frameset>
</html>

Wyjaśnienie znaczników

Kluczowe znaczenie ma para znaczników <frameset> </frameset>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.

Zwróćmy uwagę na "wyłamującą się" parę znaczników <noframes> </noframes>, o której będziemy mówić nieco niżej. Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki, która nie akceptuje ramek. Jeśli natomiast czytelnik strony posługuje się nowoczesną przeglądarką, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki. Nietrudno się domyślić, że treść między znacznikami <noframes> </noframes> powinna stanowić swoisty równoważnik strony "ramkowej". Odradzamy raczej stosowany dość często komunikat "Twoja przeglądarka nie obsługuje ramek" - szacunek dla gości strony wymaga obsłużenia także tej wąskiej grupy, która z jakichś powodów posługuje się programami nie akceptującymi ramek. Wygodnym rozwiązaniem może być podanie w ramach elementu noframes odsyłacza do strony ze spisem treści, która posłuży takiej osobie jako punkt centralny.

Znacznik <frame> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.

Znacznik frameset

Aby konstrukcja mogła działać, konieczne jest podzielenie okna przeglądarki - pionowe lub poziome. Poniższy kod (kontynuujemy nasz przykład) zawiera informację o podzieleniu okna na dwie kolumny. Służy do tego atrybut cols="x,y", umieszczany w otwierającym znaczniku frameset. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).

Przykład, w którym lewa ramka zajmuje 18% szerokości okna przeglądarki, a prawa ramka - 82%:

Kliknij w tym miejscu, aby zobaczyć przykład:

Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji, w której np. górna ramka ma 200 pikseli, dolna 200 pikseli, a środkowa zajmuje pozostały obszar, zależny od wielkości okna przeglądarki:

Kliknij w tym miejscu, aby zobaczyć przykład:

Informacje o FRAMESET

Znacznik frame

Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML (choć mógłby to być na przykład plik w formacie PDF, który moglibyśmy obejrzeć za pomocą specjalnej wtyczki (plugin) wspomagającej przeglądarkę.

Aby przypisać ramce dokument, musimy podać źródło src dokumentu. Należy w tym celu użyć konstrukcji:

Przywoływany plik może się znajdować w tym samym katalogu lub jakimkolwiek innym - podajemy wtedy nazwę pliku z pełną ścieżką dostępu - może to nawet być dokument w innej witrynie.

Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć atrybutu scrolling, który wyświetli ramkę razem z suwakami. Stosowny atrybut ma postać:

Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić atrybut scrolling="no", ustawiając zarazem odpowiednio szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy parametru scrolling="auto", suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.

Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę - name. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.

Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji atrybutu noresize

zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne.

Atrybut frameborder="1" lub frameborder="0" pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie.

Atrybut marginheight="x" wymusza dodatkowy odstęp mierzony w pikselach (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei marginwidth="x" wymusza margines lewy i prawy.

Ostatecznie cała definicja ramki może mieć postać:

W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy w definicji frameset. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe.

Informacje o FRAME

Ramki w kolumnach i wierszach

Powyżej zostały przedstawione dwa konkretne przykłady, obrazujące podział strony na dwie kolumny lub trzy wiersze. Możliwe jest jednak dość dowolne mieszanie definicji kolumn i wierszy, co pozwala np. na utworzenie strony, w której znajdują się trzy wiersze, wiersz środkowy jest podzielony na trzy, a wiersz ostatni na dwie kolumny (łącznie 6 ramek) Oczywiście zbyt wielka liczba ramek ujemnie wpływa na czytelność strony i wygląda mało estetycznie, vide:

Cała sztuka polega na tym, że najpierw dzielimy (w naszym konkretnym przykładzie) stronę na wiersze, a następnie w drugim i trzecim wierszu deklarujemy dodatkowy podział na kolumny - trzy w drugim i dwie w trzecim. Odpowiedni kod mógłby mieć postać:

</frameset>

</frameset>

Objaśnienie:

Rozpoczęliśmy konstrukcję globalną frameset od zadeklarowania w pierwszej linii liczby wierszy (trzy).
W drugiej linii od razu wstawiliśmy ramkę z przypisaną jej stroną, gdyż pierwszy wiersz nie ulega żadnemu podziałowi.
W trzeciej linii ponawiamy definicję frameset (niższego rzędu), dzieląc drugi wiersz na trzy kolumny.
W czwartej, piątej i szóstej linii wstawiamy definicje konkretnych trzech ramek dla drugiego wiersza, przypisując im odpowiednie strony.
W siódmej linii musimy zakończyć tę "lokalną" definicję frameset, czyli podział drugiego wiersza.
W ósmej linii tworzymy kolejną "lokalną" definicję frameset, tym razem dla trzeciego wiersza, dzieląc go na dwie kolumny.
W dziewiątej i dziesiątej linii wstawiamy definicje dwóch konkretnych ramek dla trzeciego wiersza, przypisując im odpowiednie strony.
W jedenastej linii kończymy "lokalną" definicję frameset, czyli podział trzeciego wiersza.
W dwunastej linii kończymy "globalną" definicję frameset.

Odsyłacze

Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że w podanym na początku kliknięcie na odsyłaczu w spisie treści w lewej ramce powinno załadować dokument do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom.

Powróćmy do przykładu przedstawionego wyżej w punkcie Ogólna struktura strony.

Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lista edytorów, natomiast prawej edytory.

Nietrudno się domyślić, że należy dokonać pewnych manipulacji na tej stronie, która jest stale widoczna w lewej ramce o nazwie lista edytorów. Do ramki tej jest na początku ładowana strona zawarta w pliku o nazwie - spisedyt.htm.

Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do prawej ramki o nazwie edytory. Można to uczynić za pomocą atrybutu target, czyli następującej konstrukcji:

<a href="fp97.htm" target="edytory">FrontPage 97</a>
<a href="hs25.htm" target="edytory">HomeSite 2.5</a>
<a href="paj2000.htm" target="edytory">Pajączek 2000</a>
...

itd.

a href="nazwa_ładowanej_strony" dotyczy nazwy pliku, w którym jest zapisana dana strona

target="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek.

FrontPage 97, HomeSite 2.5 i Pajączek 2000 są konkretnymi tematami w ich spisie, pozwalającymi po prostu wybrać interesujące nas zagadnienie.

Zwróćmy jeszcze uwagę na cztery zastrzeżone wartości w przypadku atrybutu target.

target="_blank" - w tym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nowe okno lub instancję przeglądarki.
target="_self" - w tym przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku.
target="_parent" - w tym przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu.
target="_top" - w ostatnim przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę".

Szczególnie często stosowana jest ta ostatnia wartość. Użycie "_top" pozwoli uniknąć dość kłopotliwej sytuacji, gdy do ramki jest ładowany dokument, który sam składa się z ramek. "_top" usuwa więc wszelkie istniejące ramki i wyświetla dokument "na czysto". Naturalnie moglibyśmy tutaj z powodzeniem użyć "_blank", ale pozbawiamy się w ten sposób "historii" skoków.

Znacznik noframes

Atrybut noframes jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce, np. w prostej przeglądarce tekstowej (inna sprawa, że są one już niezwykle rzadko stosowane).

Posiadacz takiej przeglądarki zobaczyłby pustą stronę, gdyby między <noframes> </noframes> nie było żadnej informacji. Dlatego musimy w tym miejscu powtórzyć informację zawartą w jednej z ramek. W naszym przykładzie podstawową stroną jest strona o nazwie Edytory HTML (plik edytory.htm). Strona ta zawiera definicję dwóch ramek: do lewej jest na stałe przypisana strona spisedyt.htm, do prawej natomiast są wlewane inne strony, zależnie od wskazanego tematu.

Z kolei między znacznikami <noframes> </noframes> znalazło się powtórzenie treści strony spisedyt.htm (lista edytorów), jako strony wyjściowej dla osób korzystających z prostej przeglądarki. Tym samym osoby te, wywołując stronę, zobaczą stronę Edytory HTML (edytory.htm), ale w taki sposób, jakby wywołały stronę Lista edytorów (spisedyt.htm). Z poziomu tej strony mogą sięgać do konkretnych tematów, które będą oczywiście zajmować cały ekran, a nie ramkę, jak w nowoczesnej przeglądarce. Naturalnie powinny się tutaj znaleźć stosowne odsyłacze hipertekstowe, które pozwolą nawigować w całym, wielostronicowym zestawie. Przypomnijmy, że gdy używamy nowoczesnych programów, wszelkie informacje między znacznikami noframes zostaną zignorowane.

W naszym przykładzie będzie to następujący blok:

<noframes>
<body>
<h1>Edytory HTML</h1>
<ul>
<li><a href="corelweb.htm">Corel WebGraphics Suite</a>
<li><a href="webmast.htm">Corel WebMaster Suite</a>
<li><a href="fp97.htm">FrontPage 97</a>
<li><a href="hedit11.htm">Hedit 1.1</a>
<li><a href="homesite.htm">HomeSite 2.5</a>
<li><a href="hotdog3.htm">HotDog 3</a>
<li><a href="composer.htm">Netscape Composer</a>
<li><a href="paj2000.htm">Pajączek 2000</a>
</ul>
</body>
</noframes>

Uwaga: Specyfikacja HTML 4 przewiduje, że znaczniki noframes mają być umieszczone w ramach frameset "najwyższego rzędu".

Informacje o NOFRAMES

Definicja typu dokumentu

Jak wspomnieliśmy we wstępie, ramki nie są już obecne w specyfikacji HTML 4.01 Strict, a jedynie w HTML 4.01 Transitional i Frameset. Jeśli stosujesz w swojej witrynie ramki, strona zawierająca definicję ramek powinna mieć podaną następującą deklarację typu dokumentu:

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

Również ramka, w której znajdują się odsyłacze wczytujące dokumenty do innej ramki nie może mieć deklaracji Strict, gdyż nie przewiduje ona atrybutu target. Dlatego konieczne jest użycie deklaracji Transitional:

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

Za to strony przywoływane do głównej ramki mogą mieć deklarację DTD odpowiadającą wersji Strict.

Pływające ramki

O rozdziale: Opisujemy tu technikę umieszczania na stronach WWW tzw. pływających ramek, czyli specjalnych okienek, do których wczytywane są inne strony. Technika ta jest jednak uznana w HTML 4 i XHTML 1.0 za schyłkową (pozostaje w obrębie wersji Doctype Transitional i Frameset), zaś w XHTML 1.1 została zaniechana, podobnie jak klasyczne ramki. Opis umieszczamy tutaj ze względu na fakt, że była dość często stosowana przez webmasterów, odradzając jednak jej stosowanie i sugerując ewentualne zastępowanie przez opisane niżej polecenie Object.

Wbudowane ramki

Nazwa "pływająca" pochodzi jeszcze z początków egzystencji tego elementu - "floating frame". Potem używano nazwy "inline frame" i stosownie do tego zostało nawet zmienione definiujące ją polecenie - iframe. Moglibyśmy się więc równie dobrze posłużyć nazwą "ramka lokalna" lub "wbudowana", co także poprawnie odzwierciedla istotę tego elementu.

Klasyczne ramki pozwalają dzielić ekran przeglądarki na odrębne okna. Pływająca ramka jest ramką umieszczoną w dowolnym miejscu strony i jest prostsza w konstrukcji, gdyż ogranicza się w zasadzie do jednego polecenia:

Na przykład:

Przykład działania:

Twoja przeglądarka nie akceptuje pływających ramek

Zdanie "Twoja przeglądarka nie akceptuje pływających ramek" zostanie wyświetlone w przeglądarkach nie akceptujących pływających ramek. Możemy jednak podać w tym miejscu adres dokumentu, który jest wczytywany do pływającej ramki. Kliknięcie na tym adresie pozwoli użytkownikowi takiej przeglądarki obejrzeć zawartość na odrębnej stronie.

Oczywiście, gdyby dokument był nieco dłuższy, pojawiłby się suwak.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Gdybyśmy z kolei chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję:

Proszę zwrócić uwagę na atrybut frameborder i jego wartość.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Jeśli podamy w definicji parametr scrolling=no, ramka zostanie pozbawiona suwaka.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Zawartości strony nie można przewinąć, chyba że ktoś użyje kółka myszy lub zaznaczenia bloku i przeciągnięcia.

HTML 4 przewiduje użycie atrybutów marginwidth="x" i marginheight="y". Pozwalają one wprowadzić dodatkowe marginesy w pływającej ramce (proszę porównać przykład, w którym użyto marginesów 70 pikseli, z następnym obrazkiem).

Oops! Twoja przeglądarka nie akceptuje pływających ramek

Pływającą ramkę można też ustawić po prawej stronie dokumentu czy bloku, używając atrybutu align="right".

Oops! Twoja przeglądarka nie akceptuje pływających ramek

To były zabawy, a na zakończenie pokażemy jeszcze całkiem praktyczne zastosowanie pływających ramek, wykorzystując imienne ich adresowanie.

Autorzy stron, którzy stosowali ramki w postaci klasycznej, zetknęli się oczywiście z atrybutem name. Atrybut ten pozwalał nadać nazwę ramce, a następnie kierować do niej dokumenty HTML, powołując się na nazwę.

Także i tutaj można wykorzystać ten mechanizm. Wystarczy w definicji ramki podać name="jakaśnazwa". Na przykład:

<iframe width="300" height="200" name="jakaśnazwa" src="dokument.htm"></iframe>

A teraz możemy zdefiniować odsyłacze do kilku stron, które po kliknięciu będą wczytywać do ramki podane strony. Na przykład:

Ostatecznie otrzymamy taki oto rezultat:

0x01 graphic

Modele samochodów

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Pickup | Minivan | Compact | Sports Car

0x01 graphic

Informacje o IFRAME

Polecenie Object

Wokół pływających ramek toczyła się od początku zacięta dyskusja - kwestionowano zasadność ich wprowadzania, skoro teoretycznie można je zastąpić poleceniem Object - tym samym, które pozwala wstawiać do dokumentu rozmaite multimedia. Pokażmy, jak działa to polecenie w odniesieniu do prostych elementów strony, jak dokument HTML i grafika.

Dokument HTML

Plik graficzny

W przypadku grafiki wyświetlanie w różnych przeglądarkach mocno się różni. W Internet Explorerze pojawia się pasek, zaś w Operze i Netscape 6 może nastąpić deformacja obrazka.

Informacje o OBJECT

Znaki specjalne

W dokumentach WWW powinniśmy stosować standard kodowania ISO-8859-2, gdyż taka jest przyjęta w naszym kraju norma. Stosując standard ISO-8859-2 możemy też jednak wykorzystać "opisowy" sposób wprowadzania znaków z innych języków, a przede wszystkim różnych znaków specjalnych. W poniższej tabeli (będącej fragmentem obszerniejszego dokumentu w "HTML Reference Library") prezentujemy zestawienie przydatnych znaków. Zostały tutaj niemal w całości pominięte znaki, które można wprowadzić z klawiatury.

Pierwsza kolumna tabeli podaje numery znaków (uwaga: gdy opis trzyznakowy generuje błąd, można się posłużyć alternatywnie wersją czteroznakową, np. £ zamiast £)
W drugiej kolumnie znalazły się nazwy opisowe (encje). Jeśli wpiszemy w edytorze HTML nazwę opisową, otrzymamy wynik prezentowany w czwartej kolumnie. Niektórych z nich warto się nawet nauczyć na pamięć, co nie będzie trudne ze względu na ich "mnemoniczny" charakter. Nie jest chyba trudno zapamiętać, że gdy napiszemy £, dostaniemy w efekcie znak brytyjskiego funta - £. Podobnie jest w przypadku znaku euro (€ = €), copyright (© = ©), zarejestrowanego znaku towarowego (® = ®) czy ułamka 1/4 (¼ = ¼).
Trzecia kolumna zawiera słowny opis znaku - pozostawiłem tutaj opisy angielskie, aby kojarzyły się z "opisową" metodą wprowadzania znaków.
Czwarta kolumna pokazuje wizualny odpowiednik kodu zapisanego w postaci encji w drugiej kolumnie.

Badanie przeprowadzone przez p. Andrzeja Woźniaka wykazało, że obecność lub nieobecność konkretnego znaku specjalnego w danej przeglądarce zależy od użytej czcionki. Wniosek ten nie jest wcale taki oczywisty, gdyż porównanie tej samej strony (np. Strzałki lub Symbole matematyczne) w Internet Explorerze i Mozilli daje różne wyniki, co mogłoby sugerować raczej niedociągnięcia w konkretnej przeglądarce. Uważniejsze przypatrzenie się problemowi wykazało, że Mozilla podstawia w miejsce znaku brakującego w danej czcionce znak z innej czcionki. Problem dotyczy czcionek nieunikodowych (Times, Verdana itp.), gdyż użycie czcionek unikodowych, jak Lucida Sans Unicode czy Arial Unicode, rozwiązuje problem. Rzecz jednak w tym, że zwykły webmaster stosuje zazwyczaj typowe czcionki, np. bardzo popularną Verdanę. Pozostaje więc chyba czekać, aż w czcionkach systemu Windows (tzw. core fonts) pojawią się pełne tabele znaków - piłeczka po stronie Microsoftu.

Dziękuję za cenne uwagi i pomoc pp. Andrzejowi P. Woźniakowi i Grzegorzowi Wysockiemu.

Uwaga: wszystkie znaki w tabelach są przedstawione w przeglądarce użytkownika za pomocą czcionek wpisanych w arkusz stylów - kolejno Calibri, Tahoma, Verdana itd., zależnie od tego, jakimi czcionkami dysponuje w swoim systemie. Gdyby zastosować czcionkę unikodową, np. Lucida Sans Unicode czy Arial Unicode, kwadraciki widoczne w Internet Explorerze w przypadku niektórych znaków zostałyby zastąpione przez właściwe znaki.

Numer	Nazwa (encja)	Opis	Reprezentacja w przeglądarce
"	"	Quot (cudzysłów prosty)	"
&	&	Ampersand (znak and)	&
<	<	Less than (znak mniejszości)	<
>	>	Greater than (znak większości)	>
		Non-breaking space (twarda spacja)
¡	¡	Inverted exclamation (odwrócony wykrzyknik)	¡
¢	¢	Cent sign (cent)	¢
£	£	Pound sterling sign (funt szterling)	£
¤	¤	General currency sign (ogólny symbol waluty)	¤
¥	¥	Yen sign (jen)	¥
¦	¦	Broken vertical bar (przerwana linia pionowa)	¦
§	§	Section sign (znak sekcji lub paragrafu)	§
¨	¨	Umlaut /dieresis (umlaut lub diereza)	¨
©	©	Copyright (znak praw autorskich)	©
ª	ª	Feminine ordinal (liczebnik porządkowy żeński)	ª
«	«	Left angle quote, guillemot left (lewy cudzysłów ostrokątny)	«
¬	¬	Not sign (znak negacji)	¬
		Soft hyphen (łącznik opcjonalny)
®	®	Registered trademark (zastrzeżony znak towarowy)	®
¯	¯	Macron accent (kreska górna)	¯
°	°	Degree sign (znak stopnia)	°
±	±	Plus or minus (plus-minus)	±
²	²	Superscript two (2 w indeksie górnym)	²
³	³	Superscript three (3 w indeksie górnym)	³
´	´	Acute accent (akcent silny)	´
µ	µ	Micro sign (grecka litera mi)	µ
¶	¶	Paragraph sign (znak akapitu)	¶
·	·	Middle dot (punkt środkowy)	·
¸	¸	Cedilla (cedilla)	¸
¹	¹	Superscript one (1 w indeksie górnym)	¹
º	º	Masculine ordinal (liczebnik porządkowy męski)	º
»	»	Right angle quote, guillemot right (prawy cudzysłów ostrokątny)	»
¼	¼	Fraction - one quarter (ułamek jedna czwarta)	¼
½	½	Fraction - one half (ułamek jedna druga)	½
¾	¾	Fraction - three quarters (ułamek trzy czwarte)	¾
¿	¿	Inverted question mark (odwrócony znak zapytania)	¿
À	À	Capital A, grave accent (duże A z akcentem słabym)	À
Á	Á	Capital A, acute accent (duże A z akcentem silnym)	Á
Â	Â	Capital A, circumflex accent (duże A z daszkiem)	Â
Ã	Ã	Capital A, tilde (duże A z tyldą)	Ã
Ä	Ä	Capital A, umlaut (duże A z dierezą)	Ä
Å	Å	Capital A, ring (duże A z kółkiem)	Å
Æ	Æ	Capital AE dipthong - ligature (Ligatura AE)	Æ
Ç	Ç	Capital C, cedilla (duże C cedilla)	Ç
È	È	Capital E, grave accent (duże E z akcentem słabym)	È
É	É	Capital E, acute accent (duże E z akcentem mocnym)	É
Ê	Ê	Capital E, circumflex accent (duże E z daszkiem)	Ê
Ë	Ë	Capital E, umlaut - dieresis (duże E z umlautem)	Ë
Ì	Ì	Capital I, grave accent (duże I z akcentem słabym)	Ì
Í	Í	Capital I, acute accent (duże I z akcentem mocnym)	Í
Î	Î	Capital I, circumflex accent (duże I z daszkiem)	Î
Ï	Ï	Capital I, umlaut - dieresis (duże I z umlautem)	Ï
Ð	Ð	Capital Eth, Icelandic (duże islandzkie eth)	Ð
Ñ	Ñ	Capital N, tilde (duże N z tyldą)	Ñ
Ò	Ò	Capital O, grave accent (duże O z akcentem słabym)	Ò
Ó	&Oacute	Capital O, acute accent (duże O z akcentem mocnym)	Ó
Ô	Ô	Capital O, circumflex accent (duże O z daszkiem)	Ô
Õ	Õ	Capital O, tilde (duże O z tyldą)	Õ
Ö	Ö	Capital O, umlaut - dieresis (duże O z umlautem)	Ö
×	×	Multiply sign (znak iloczynu)	×
Ø	Ø	Capital O, slash (duże O z przekreśleniem)	Ø
Ù	&Ugrave	Capital U, grave accent (duże U z akcentem słabym)	Ù
Ú	Ú	Capital U, acute accent (duże U z akcentem mocnym)	Ú
Û	Û	Capital U, circumflex accent (duże U z daszkiem)	Û
Ü	Ü	Capital U, umlaut - dieresis (duże U z umlautem)	Ü
Ý	Ý	Capital Y, acute accent (duże Y z akcentem mocnym)	Ý
Þ	Þ	Capital Thorn, Icelandic (duże islandzkie thorn)	Þ
ß	ß	Small sharp s, German sz ligature (niemiecka ligatura scharfes s)	ß
à	à	Small a, grave accent (małe a z akcentem słabym)	à
á	á	Small a, acute accent (małe a z akcentem mocnym)	á
â	â	Small a, circumflex accent (małe a z daszkiem)	â
ã	ã	Small a, tilde (małe a z tyldą)	ã
ä	&auml	Small a, umlaut - dieresis (małe a z umlautem)	ä
å	å	Small a, ring (małe a z kółkiem)	å
æ	æ	Small ae dipthong - ligature (mała ligatura ae)	æ
ç	ç	Small c, cedilla (małe c z cedillą)	ç
è	è	Small e, grave accent (małe e z akcentem słabym)	è
é	é	Small e, acute accent (małe e z akcentem mocnym)	é
ê	ê	Small e, circumflex accent (małe e z daszkiem)	ê
ë	ë	Small e, umlaut - dieresis (małe e z umlautem)	ë
ì	ì	Small i, grave accent (małe i z akcentem słabym)	ì
í	í	Small i, acute accent (małe i z akcentem mocnym)	í
î	î	Small i, circumflex accent (małe i z daszkiem)	î
ï	ï	Small i, umlaut - dieresis (małe i z umlautem)	ï
ð	ð	Small eth, Icelandic (małe islandzkie eth)	ð
ñ	ñ	Small n, tilde (małe n z tyldą)	ñ
ò	ò	Small o, grave accent (małe o z akcentem słabym)	ò
ó	ó	Small o, acute accent (małe o z akcentem mocnym)	ó
ô	ô	Small o, circumflex accent (małe o z daszkiem)	ô
õ	õ	Small o, tilde (małe o z tyldą)	õ
ö	ö	Small o, umlaut - dieresis (małe o z umlautem)	ö
÷	÷	Division sign (znak ilorazu)	÷
ø	ø	Small o, slash (małe o z przekreśleniem)	ø
ù	ù	Small u, grave accent (małe u z akcentem słabym)	ù
ú	ú	Small u, acute accent (małe u z akcentem mocnym)	ú
û	û	Small u, circumflex accent (małe u z daszkiem)	û
ü	ü	Small u, umlaut - dieresis (małe u z umlautem)	ü
ý	ý	Small y, acute accent (małe y z akcentem słabym)	ý
þ	þ	Small thorn, Icelandic (małe islandzkie thorn)	þ
ÿ	ÿ	Small y, umlaut - dieresis (małe y z umlautem)	ÿ
Œ	&OElig;	Latin Capital OE - ligature (duża łacińska ligatura OE)	Œ
œ	&oelig;	Latin Small OE - ligature (mała łącińska ligatura oe)	œ
Š	&Scaron;	Capital S with caron	Š
š	&scaron;	Small s with caron	š
Ÿ	&Yuml;	Capital Y with dieresis (duże Y z umlautem)	Ÿ
ˆ	&circ;	Circumflex accent (akcent cyrkumfleksowy - daszek)	ˆ
˜	&tilde;	Small tilde (tylda)	˜
–	–	En dash (półpauza)	-
—	—	Em dash (pauza - myślnik)	—
‘	‘	Left single quotation mark (lewy apostrof drukarski)	`
’	’	Right single quotation mark (prawy apostrof drukarski)	'
‚	&sbquo;	Single low-9 quotation mark (przecinek)	‚
“	“	Left double quotation mark	“
”	”	Right double quotation mark (prawy cudzysłów)	”
„	&bdquo;	Double low-9 quotation mark	„
†	&dagger;	Dagger (znak krzyżyka)	†
‡	&Dagger;	Double Dagger (znak podwójnego krzyżyka)	‡
•	•	Bullet (kropka)	•
…	…	Horizontal ellipsis (wielokropek)	…
‰	&permil;	Per mille (thousand) sign (promil)	‰
′	′	Minutes; Feet (Minuty; Stopy)	′
″	″	Seconds; Inches (Sekundy; Cale)	″
‹	&lsaquo;	Single left-pointing angle quotation mark	‹
›	&rsaquo;	Single right-pointing angle quotation mark	›
‾	&oline;	Overline (Nadkreślenie)	‾
⁄	&frasl;	Fraction slash (Ukośnik ułamkowy)	⁄
€	€	Euro sign (znak Euro)	€
™	™	Trademark (znak handlowy)	™

Źródło: Stephen Le Hunte, "HTML Reference Library 4", 1998, źródło tłumaczenia: Jennifer Niederest, "HTML Leksykon kieszonkowy", Helion 2000, tłum. Maciej Górnicki.

Predefiniowane wartości kolorów

autor: Paweł Stokowski

Wszystkie znajdujące się w poniższej tabeli wartości kolorów (tzw. Netscape named colors) mogą być używane w języku HTML i JavaScript do definiowania kolorów tekstu i tła za pomocą alinkColor, bgColor, fgColor, linkColor, vlinkColor albo z wykorzystaniem metody fontColor. Tabela zawiera wszystkie predefiniowane nazwy kolorów oraz ich składowe RGB (czerwony, zielony, niebieski) w zapisie szesnastkowym.

Źródło: CHIP Special nr 3 pt. "HTML i Java" strona 150 i 151 ( kwiecień 1997 r. )

Kolor	Nazwa angielska	Definica RGB	Symbol
Kolor	Nazwa angielska	Definica RGB				czerwony	zielony	niebieski
	aliceblue	F0F8FF	240	248	255
	antiquewhite	FAEBD7	250	235	215
	agua	00FFFF	0	255	255
	aquamarine	7FFFD4	126	255	212
	azure	F0FFFF	240	255	255
	beige	F5F5DC	245	245	220
	bisque	FFE4DC	255	228	220
	black	000000	0	0	0
	blanchedalmond	FFEBCD	255	235	205
	blue	0000FF	0	0	255
	blueviolet	8A2BE2	138	43	226
	brown	A52A2A	165	42	42
	burlywood	DEB887	222	184	135
	cadetblue	5F9EA0	95	158	160
	chartreuse	7FFF00	127	255	0
	chocolate	D2691E	210	105	30
	coral	FF7F50	255	127	80
	cornflowerblue	6495ED	40	149	237
	cornsilk	FFF8DC	255	248	220
	crimson	DC143C	220	20	60
	cyan	00FFFF	0	255	255
	darkblue	00008B	0	0	139
	darkcyan	008B8B	0	139	139
	darkgoldenrod	B8860B	184	134	11
	darkgray	A9A9A9	169	169	169
	darkgreen	006400	0	100	0
	darkkhaki	BDB76B	189	183	107
	darkmagenta	8B008B	139	0	139
	darkolivegreen	556B2F	85	107	47
	darkorange	FF8C00	255	140	0
	darkorchid	9932CC	153	50	204
	darkred	8B0000	139	0	0
	darksalmon	E9967A	233	150	122
	darkseagreen	8FBC8F	143	188	143
	darkslateblue	483D8B	72	61	139
	darkslategray	2F4F4F	47	79	79
	darkturquoise	00BFFF	0	191	255
	darkviolet	9400D3	148	0	211
	deeppink	FF1493	255	20	147
	deepskyblue	00BFFF	0	191	255
	dimgray	696969	105	105	105
	dodgerblue	1E90FF	30	144	255
	firebrick	B22222	178	34	34
	floralwhite	FFFAF0	255	250	240
	forestgreen	228B22	34	139	34
	fuchsia	FF00FF	255	0	255
	gainsboro	DCDCDC	220	220	220
	ghostwhite	F8F8FF	248	248	255
	gold	FFD700	255	215	0
	goldenrod	DAA520	218	165	32
	gray	808080	128	128	128
	green	008000	0	128	0
	greenyellow	ADFF2F	173	255	47
	honeydew	F0FFF0	240	255	240
	hotpink	FF69B4	255	105	180
	indianred	CD5C5C	205	92	92
	indigo	4B0082	75	0	130
	ivory	FFFFF0	255	255	240
	khaki	F0E68C	240	230	140
	lavender	E6E6FA	230	230	250
	levenderblush	FFF0F5	255	240	245
	lawngreen	7CFC00	124	252	0
	lemonchiffon	FFFACD	255	250	205
	lightblue	ADD8E6	173	216	230
	lightcoral	F08080	240	128	128
	lightcyan	E0FFFF	224	255	255
	lightgoldenrodyellow	FAFAD2	250	250	210
	lightgreen	90EE90	144	238	144
	lightgrey	D3D3D3	211	211	211
	lightpink	FFB6C1	255	182	193
	lightsalmon	FFA07A	255	160	122
	lightseagreen	20B2AA	170	178	32
	lightskyblue	87CEFA	135	206	250
	lightslategray	778899	119	136	153
	lightsteelblue	B0C4DE	176	196	222
	lightyellow	FFFFE0	255	255	224
	lime	00FF00	0	255	0
	limegreen	32CD32	50	205	50
	linen	FAF0E6	250	240	230
	magenta	FF00FF	255	0	255
	maroon	800000	128	0	0
	mediummaquamarine	66CDAA	102	205	170
	mediumblue	0000CD	0	0	205
	mediumorchid	BA55D3	186	85	211
	mediumpurple	9370DB	147	112	219
	mediumseagreen	3CB371	60	179	113
	mediumslateblue	7B68EE	123	104	238
	mediumspringgreen	00FA9A	0	250	154
	mediumturquoise	48D1CC	72	209	204
	mediumvioletred	CD1585	205	21	133
	midnightblue	191970	25	25	112
	mintcream	F5FFFA	245	255	250
	mistyrose	FFE4E1	255	228	225
	moccasin	FFE4B5	255	228	181
	navajowhite	FFDEAD	255	222	173
	navy	000080	0	0	128
	oldlace	FDF5E6	253	245	230
	olive	808000	128	128	0
	olivedrab	6B8E23	107	142	35
	orange	FFA500	255	165	0
	orangered	FF4500	255	69	0
	orchid	DA70D6	218	112	214
	palegoldenrod	EEE8AA	238	232	170
	palegreen	98FB98	152	251	152
	palaturquoise	AFEEEE	175	238	238
	palevioletred	DB7093	219	112	147
	papayawhip	FFEFD5	255	239	213
	peachpuff	FFDAB9	255	218	185
	peru	CD853F	205	133	63
	pink	FFC0CB	255	192	203
	plum	DDA0DD	221	160	221
	powderblue	B0E0E6	176	224	230
	purple	800080	128	0	128
	red	FF0000	255	0	0
	rosybrown	BC8F8F	188	143	143
	royalblue	4169E1	29	105	225
	saddlebrown	8B4513	139	69	19
	salmon	FA8072	250	128	114
	sandybrown	F4A460	244	164	96
	seagreen	2E8B57	46	139	87
	seashell	FFF5EE	255	245	238
	sienna	A0522D	160	82	45
	silver	C0C0C0	192	192	192
	skyblue	87CEEB	135	206	235
	slateblue	6A5ACD	205	90	205
	slategray	708090	112	128	144
	snow	FFFAFA	255	250	250
	springgreen	00FF7F	0	255	127
	steelblue	4682B4	70	130	180
	tan	D2B48C	210	180	140
	teal	008080	0	128	128
	thistle	D8BFD8	216	191	216
	tomato	FF6347	255	99	71
	turquoise	40E0D0	64	224	208
	violet	EE82EE	238	130	238
	wheat	F5DEB3	245	222	179
	white	FFFFFF	255	255	255
	whitesmoke	F5F5F5	245	245	245
	yellow	FFFF00	255	255	0
	yellowgreen	9ACD32	154	205	50

Wyszukiwarka

Podobne podstrony:
kurs html rozdział II
Kurs HTML HTML BODY i META
[PL tutorial] Asembler kurs - HTML, Asembler, Asembler
Chomikowy kurs HTML
kurs html podstawy tworzenia stron www RHQWUXUAVSLOSX6ABOMEHGX52LV2WV67LZXY6RQ
kurs html rozdział VIII
kurs html rozdział V
kurs html K3XFOFAKJ5HG5BCW7HPVBJ5WVTXMHDAJGD266GA
Kurs HTML - obrazek
Kurs HTML, Dokumenty Textowe, Komputer
kurs html rozdział I
Kurs HTML, ♥Dokumenty, Przydatne do choniczka
Kurs HTML HTML Odsylacze id 254775
Mini Kurs HTML by Tommek131
kurs html rozdział IV
kurs html rozdział IX
Kurs HTML - HTML, Multimedia
KURS HTML(bonus zegarek)(1)

więcej podobnych podstron