Poradnik Webmastera, Język HTML , Język HTML

Kurs języka HTML

Poradnik webmastera

wg. Kursu języka HTML programu Pajączek 2000

opr. Alex

Lipiec 2001

SPIS TREŚCI

OSNOWA DOKUMENTU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TYTUŁ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
AKAPIT I WIERSZ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
POZIOMA LINIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
WYKAZY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego

Wykaz uporządkowany - służy do sporządzenia wykazu numerowanego

ATRYBUTY CZCIONKI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ODSYŁACZE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
GRAFIKA NA STRONIE -GIF I JPG (JPEG) . . . . . . . . . . . . . . . . . . . . . . . . .
GRAFIKA I ODSYŁACZE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<META> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<BASE> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<LINK> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<BODY>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<PRE> </PRE> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<BLOCKQUOTE> <BLOCKQUOTE> . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<Q> </Q> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<ADDRESS> </ADDRESS> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<CENTER> </CENTER> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<DIV> </DIV> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<FIELSET></FIELSET> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<NOBR> </NOBR> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<WBR> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<MULTICOL> </MULTICOL> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<SPACER> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wstawianie grafiki do dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zagnieżdżanie grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Animacja Marquee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dźwięk, wideo, VRML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TABELE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

OSNOWA DOKUMENTU

<HR> </HR> -powiększanie

<H1> treść tytułu </H1>

<HTML><HEAD><BODY> </BODY></HEAD></HTLM>

np.

<HTML>

<HEAD> informacje nagłówkowe </HEAD>

<BODY>

właściwa treść (ciało) dokumentu

</BODY>

</HTML>

HTML - standardowo

HEAD - stanowi ramy dla informacji w nagłówku

Między <HEAD> </HEAD> powinno się zaleź polecenie

<TITLE></TITLE> -znacznik treści ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie

np.

<HEAD>

<TITLE> tytuł strony </TITLE>

</HEAD>

Tak powinniśmy zaczynać:

<HTML>

<HEAD>

<META http-equiv="content-type" conten="text/htlm:charset=ISO-8859-2">

<TITLE> tytuł strony </TITLE>

</HEAD>

<BODY>

właściwa treść

</BODY>

</HTML>

------------------------------------------------------------------------------------

<HTML>

<HEAD>

informacje o dokumencie, łącznie z tytułem

</HEAD>

<BODY>

treść dokumentu- tekst, grafika, odsyłacze itp.

</BODY>

</HTML>

<BODY> </BODY> możemy zdefiniować kolor tła dokumentu

np.

<BODY BGCOLOR="kolor"> -"kolor" red, green, black, white lub #FF0000 (zapis szesnastkowy)

TYTUŁ -bloki

<Hn> </Hn> -polecenie oznacz stopień tytułu. Znak H oznacz hader, natomiast cyfra n oznacza stopień tytułu (mamy ich sześć) np.:

<H1> </H1> -jest to polecenie wprowadzające tytuł stopnia pierwszego DUŻY

<H2> </H2> -MNIEJSZY

. .

<H6> </H6> -NAJMNIEJSZY

np.

<H1 TITLE="Mnóstwo ciekawych rzeczy do kupienia koniecznie zobacz nasz katalog">Katalog Produktów</H1>

Spowoduje nam wyświetlenie się tytułu KATALOG PRODUKTÓW, a najechanie na niego kursorem spowoduje pojawienie się dymku gdzie jest napisane: "Mnóstwo ciekawych rzeczy do kupienia koniecznie zobacz nasz katalog"

<Hx ALIGN=CENTER> <Hx> - wyrównanie tytułów

<Hx ALIGN=RIGHT> <Hx>

<Hx ALIGN=LEFT> <Hx>

AKAPIT I WIERSZ

<P> </P> -znacznik akapitu (paragraph) pierwsze polecenie jest otwierające drugie zamykające

<BR> -znacznik końca wiersz - pojedyncze polecenie przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.

<P ALIGN=LEFT> </P> -wyrównanie do lewej strony,

<P ALIGN=RIGHT> </P> -wyrównanie do prawej strony,

<P ALIGN=CENTER> </P> -wyśrodkowanie.

<BR CLEAR=LEFT>

<BR CLEAR=RIGHT>

<BR CLEAR=ALL>

<BR CLEAR=abc>

POZIOMA LINIA

<HR> -(horizontal rule)

<HR NOSHADE> -linia pozbawiona cieniowania

<HR SIZE=5> -grubość linii

<HR WIDTH=300> -długość linii podana w pikselach

<HR WIDTH=50%> -długość linii podana w procentach

<HR ALIGN=center> -linia umieszczona domyślnie na środku

<HR ALIGN=center SIZE=8 WIDTH=200> -linia umieszczona według namiaru

<HR ALIGN=left> -linia justowana do lewego brzegu strony

<HR ALIGN=right> -linia justowana do prawego brzegu strony

<HR ALIGN=right SIZE=3 WIDTH=400> -linia justowana według namiaru

<HR color="nazwa_koloru"> -kolor linii

WYKAZY

<UL> </UL> -(unordered list) punktowanie bez znaków

<LI> </LI> -punktowanie •

<OL> </OL> -punktowanie numeracyjne

np.

<P> Dlaczego zajmuje się UFO? </P>

<UL>

<LI> Uważam, że UFO istnieje </LI>

<LI> Uważam, że pozaziemskie cywilizacje mogą nam pomóc </LI>

<LI> Uważam, że należy się przygotować na spotkanie </LI>

</UL>

Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego

<UL>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</UL>

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Lista nieuporządkowana może dodatkowo zawierać definicję symbolu graficznego

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Specyfikacja HTML 4 zaleca stopniową rezygnację z parametru TYPE i obsługę wykazów za pomocą stylów, które mają większe możliwości.

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

<UL>otwarcie listy na pierwszym poziomie

<LI>Punkt 1

<LI>Punkt 2

<UL>otwarcie listy na drugim poziomie

<LI>Podpunkt 2.1

<LI>Podpunkt 2.2

<UL>otwarcie listy na trzecim poziomie

<LI>Podpunkt 2.2.1

<LI>Podpunkt 2.2.2

</UL>zamknięcie listy na trzecim poziomie

</UL>zamknięcie listy na drugim poziomie

<LI>Punkt 3 - kontynuacja punktów pierwszego poziomu

<LI>Punkt 4 - kontynuacja punktów pierwszego poziomu

</UL>zamknięcie całej listy

Przykład:

Punkt 1
Punkt 2

Podpunkt 2.1
Podpunkt 2.2

Podpunkt 2.2.1
Podpunkt 2.2.2

Punkt 3
Punkt 4

Wykaz uporządkowany - służy do sporządzenia wykazu numerowanego

<OL>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</OL>

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Parametr COMPACT pozwala wyświetlić listę z mniejszą interlinią

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Parametr START=x pozwala rozpocząć numerowanie listy od x

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Parametr TYPE=n pozwala określić typ numerowania listy

<OL TYPE=A> numerowanie według wielkich liter

<OL TYPE=a> numerowanie według małych liter

<OL TYPE=I> numerowanie według wielkich liczebników rzymskich

<OL TYPE=i> numerowanie według małych liczebników rzymskich

<OL TYPE=1> numerowanie według liczebników arabskich

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

Przykład:

Pierwszy punkt
Drugi punkt
Trzeci punkt

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 TYPE=n>otwarcie listy na pierwszym poziomie

<LI>Punkt 1

<OL>otwarcie listy na drugim poziomie

<LI>Podpunkt 1.1

<LI>Podpunkt 1.2

</OL>zamknięcie listy na drugim poziomie

<LI>Punkt 2 - kontynuacja punktów pierwszego poziomu

<OL>otwarcie listy na drugim poziomie

<LI>Podpunkt 2.1

<LI>Podpunkt 2.2

</OL>zamknięcie listy na drugim poziomie

</OL>zamknięcie całej listy

Przykład:

Przeglądarki

Netscape Navigator
Microsoft Internet Explorer
NCSA Mosaic
Quarterdeck Internet Suite
Chameleon
NetRunner
Ariadna
Cyberjack

Programy graficzne

Paint Shop Pro
Adobe Photoshop

Menu - służy do tworzenia nieuporządkowanego wykazu, po jednym elemencie w wierszu

<MENU>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</MENU>

Przykład:

Punkt pierwszy
Punkt drugi
Punkt trzeci

Katalog - służy do tworzenia wykazu krótkich pozycji, który można ustawić w kolumnach. Elementy katalogu zawierają do 20 znaków.

<DIR>

<LI>Pierwszy punkt <LI>Drugi punkt

<LI>Trzeci punkt <LI>Czwarty punkt

</DIR>

Przykład:

A-H

I-M

N-R

S-Z

Parametr TYPE=abc pozwala zastosować wybrany znacznik graficzny

Przykład:

A-H

I-M

N-R

S-Z

Uwaga: żadna przeglądarka nie interpretuje poprawnie poleceń <MENU> i <DIR>, a specyfikacja HTML 4 uznaje je za polecenia "schyłkowe" i zaleca stopniowe wycofywanie.

Lista definicyjna - służy do tworzenia definicji terminów, a także do tworzenia tematycznie pokrewnych grup akapitów

<DL> początek listy definicyjnej

<DT> pierwszy termin

<DD> wyjaśnienie pierwszego terminu

<DT> drugi termin

<DD> wyjaśnienie drugiego terminu

</DL> koniec listy definicyjnej

Polecenie DT powinno się znaleźć bezpośrednio za otwierającym tagiem DL.

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

ATRYBUTY CZCIONKI

<B> </B> -pogrubienie (bold)

<I> </I> -pochylenie (italic)

<U> </U> -podkreślenie (underlined)

<TT> </TT> -czcionka o stałej szerokości znaku fixed width =teletype

<STRIKE> </STRIKE> lub <S> </S> -czcionka przekreślona

<SUP> </SUP> -superskrypt (indeks górny)

<SUB> </SUB> -subskrypt (indeks dolny)

<BIG> </BIG> -duża czcionka (+1punkt)

<SMALL> </SMALL> -mała czcionka (-1punkt)

<CITE> </CITE> -cytat blokowy

<DEF> </DEF> -definicja (Defming Instance)

<DEL> </DEL> -element usunięty, rewizja tekstu, sygnalizuje zmiany

<INS> </INS> -element wstawiony, podkreślamy nowość

<ABBR lang="pl">Pro</ABBR> -sygnalizuje obecność skrótów

<ACRONYM lang="en">www</ACRONYM> -sygnalizuje obecność akronimów

<STRONG> </STRONG> -czcionka mocno wyróżniona -pogrubiona

<EM> </EM> -czcionka wyróżniona (emfaza)

<CODE> </CODE> -kod kursywa

<KBD> </KBD> -czcionka wprowadzana z klawiatury

<SAMP> </SAMP> -przykład

<VAR> </VAR> -zmienna (słowo kluczowe języka)(variable)

<FONT SIZE="xx"></FONT> -wielkość czcionki (1-7)

<BASEFONT SIZE="x"> -czcionka bazowa (standardowo 3)

<FONT FACE="nazwa_kroju> </FONT> -zmiana kroju czcionki

<FONT COLOR="nazwa_koloru"> </FONT>

#FFFFFF -kolor biały (szesnastkowy)

#000000 -kolor czarny (szesnastkowy)

heksadecymalne w formacie RRGGBB, gdzie RR -składowa czerwona, GG -składowa zielona, BB -składowa niebieska.

Lista szesnastu podstawowych barw:

black -czarny

silver -jasny szary

gray -szary

white -biały

maroon -brąz

red -czerwony

purple -fiolet

fuchsia -różowy

green -zielony

lime -jasny zielony

olive -oliwkowy

yellow -żółty

navy -ciemny niebieski

blue -niebieski

teal -morski

aqua -jasny niebieski

ODSYŁACZE

Odsyłacz do innej strony internetowej

<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>

np.

<A HREF="http://www.wp.pl/">Wirtualna polska</A>

Odsyłacz do poczty

<A HREF="mailto:alexxxx@wp.pl">Imię nazwisko lub ,,Jeśli chcesz mi nawrzucać kliknij w tym miejscu,,</A>

mailto -daje sygnał przeglądarce, że ma uruchomić pocztę elektroniczną

Odsyłacz do etykiety (zakładki- przy dużych objętościowo stronach można szybko odnaleźć to co potrzebujemy

<A NAME="nazwa_etykiety"> </A>

Kilka prostych przykładów:

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

<A HREF="nazwa_strony.html">Edytor Pajączek</A>

odsyłacz do innej strony HTML (w katalogu podręcznym)

<A HREF="katalog_podręczny/nazwa_strony.html">Inna strona</A>

odsyłacz do innej strony HTML (w 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 danego katalogu i przywołać żądaną stronę

odsyłacz do pliku TXT

<A HREF="plik_tekstowy.txt">Plik tekstowy TXT</A>

odsyłacz do pliku graficznego GIF

<A HREF="plik_graficzny.gif">Plik graficzny GIF</A>

odsyłacz do pliku dźwiękowego

<A HREF="../multimed/pinkpant.mind">Plik dźwiękowy</A>

GRAFIKA NA STRONIE -GIF I JPG (JPEG)

<IMG SRC="nazwa_pliku_lub_ścieszka_../../......">

<IMG SRC="obrazek"ALIGN=LEFT>

GRAFIKA I ODSYŁACZE

<IMG SRC="odsyłacz.gif"USE MAP="#mapa1">

<MAP NAME="mapa1"

<AREA SHAPE=RECT COORDS="1,1,50,50"HREF="1.html">

<AREA SHAPE=RECT COORDS="51,1,100,50"HREF="2.html">

<AREA SHAPE=RECT COORDS="1,51,51,100"HREF="3.html">

<AREA SHAPE=RECT COORDS="51,51,100,100"HREF="4.html">

</MAP>

Pierwszy wiersz polecenia przywołuje obrazek USE MAP informuje przeglądarkę, że obrazek "odsyłacz" 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ątowi 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.

W przypadku odsyłaczy w postaci okręgów:

<AREA SHAPE=CIRCLE COORDS="25,25,19"HREF="dokument.html">

pierwsze dwie liczby informują o położeniu środka okręgu,
ostatnia o długości promienia

W przypadku odsyłacz o nieregularnych brzegach

<AREA SHAPE=POLYGON COORDS="23,33,82,16,82,80"HREF="dokument.html">

<META>

Informuje bardziej szczegółowo o zawartości dokumentu, ułatwia funkcjonowanie witryny w sieci.

Trzy atrybuty:

-HTTP-EQUIV -definiuje zmienne systemowe

-NAME -definiuje zmienne użytkownika

-CONTENT -w połączeniu z dwoma pierwszymi ...

strona kodowa

<META HTTP-EQUIV="content-type"CONTENT="text/html;charset=ISO-8859-2">

opis strony

<META NAME="Description"CONTENT="Jakaś tam treść">

np.

<META NAME="Description"CONTENT="Esperanto:strona zawiera ..."> -znaków max 150-200

wyrazy kluczowe

<META NAME="Keywords"CONTENT="Imię i nazwisko">

język strony

<META NAME="Languge"CONTENT="pl"> -angielska en, amerykański angielski en-us, niemiecki de, francuski fr.

nazwa edytora, w którym się tworzyło np. Pajączek

<META NAME="Generator"CONTENT="nazwa edytora">

polecenie powodujące regularne odświeżanie co x sekund (tylko ta aktualizacja nie może być częsta ponieważ będzie się długo ładowała strona)

<META HTTP-EQUIV="Refresh"CONTENT="x">

polecenie przejścia na inną stronę internetową po określonym czasie

<META HTTP-EQUIV="Refresh"CONTENT="x;URL=http://../strona.html">

polecenie informuje o dacie utworzenia dokumentu, zwracające wartość (np. sieciowemu indekserowi) Creation-Date: Tue,04 Dec 1993 21:29:02 GMT"

<META HTTP-EQUIV="Creation-Date"CONTENT="Tue,04 Dec 1993 21:29:02 GMT>

polecenie przejścia między stronami

<META HTTP-EQUIV="Page-Enter"CONTENT="filter:RevealTrans(Duration=3, Transiton=23)">

<BASE>

Polecenie definiuje bazowy adres dokumentu

<BASE HREF="http://www.firma.com/dokument.html">

<LINK>

Określa hierarchiczny porządek w zespole dokumentów dla celów nawigacyjnych

<BODY>

Polecenie pozwalające wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce

<BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif">

Polecenie pozwalające wybrać kolor tła dokumentu

<BODY BGCOLOR="kolor">

Polecenie pozwalające określić kolor odsyłaczy

<BODY LINK="kolor1"VLINK="kolor2"ALINK="kolor3">

LINK ="kolor" -standardowy kolor odsyłacz

VLINK ="kolor"(visited link) określa kolor odsyłacz, który został co najmniej raz użyty

ALINK ="kolor"(active link) określa kolor aktywnego odsyłacza

Polecenie pozwalające wprowadzenie lewego marginesu strony "xx" ilość pikseli (przesunięcie w prawo)

<BODY LEFTMARGIN="xx">

Polecenie pozwala wprowadzić górny margines strony "xx" ilość pikseli (przesunięcie w dół)

<BODY TOPMARGIN="xx">

<PRE> </PRE>

Blok przeformatowany -czcionka monotypiczna (o stałej szerokości znaku)-pozwala wprowadzić dodatkowe spacje.

<BLOCKQUOTE> <BLOCKQUOTE>

Blok cytowany

<Q> </Q>

Krótki cytat wprowadzany w ramach wiersza, automatycznie daje cytat

<Q lang="en"> </Q> - cudzysłów angielski

<ADDRESS> </ADDRESS>

Adres (stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej itp.).

<CENTER> </CENTER>

Służy do środkowania na stronie wskazanego elementu np. tekstu lub obrazka.

Komentarz (Ctrl+Shift+K)

<DIV> </DIV>

Wycinek dokumentu np.

<DIV ALIGN=RIGHT>

<FIELSET> jakiś tam element </FIELSET>

Obramowanie. W połączeniu ze znacznikiem <LEGEND> daje nam efekt taki, że tekst jest wpisany w obramowanie ramki, w poniższym przykładzie jest to "Wykaz elementów"

<FIELDSET>

<LEGEND> Wykaz elementów</LEGEND>

pierwszy element

drugi element

trzeci element

</FIELDSET>

<NOBR> </NOBR>

Blokada i wymuszenie przełamania (ciągnie zdanie dalej nie, przenosi do linijki niżej co powoduje poszeżenie się okna i pojawienie się paska przewijanja -jeśli go wczśniej nie było)

<WBR>

Word Break - wymuszenie przełamania

<MULTICOL> </MULTICOL>

Pisanie w szpaltach

<MULTICOL COLS="x"> </MULTICOL> -definjuje liczbę, parametr:

GUTER -podawany w pikselach, określa odstęp między szpaltami

WIDTH -podawany w pikselach lub procencie szerokości okna, określa szerokość, jaką zajmują szpalty.

<SPACER>

Pusta przestrzeń.

Parametry:

-TYPE=horizontal (vertical, block) określa, czy wolna przestrzeń jest wstawiana poziomo, pionowo czy też w postaci bloku.

-SIZE=wartość_w_pikselach (dotyczy bloku)

-HEIGHT=wartość_w_pikselach (dotyczy bloku)

-ALIGN=left (center, right) -wyrównanie bloku do lewego marginesu, środkowanie bloku lub dosunięcie bloku do prawego marginesu.

Przykładowo polecenie:

<SPACER TYPE="horizontal"SIZE=100> wyprowadzi w danym miejscu wiersza 100-punktowy odstęp.

<SPACER TYPE="vertical"SIZE=50> pozwoli np. oddzielić od siebie dwa bloki tekstu o 50 punktów w pionie.

<SPACER TYPE="block"HEIGHT=50 WIDTH=100 ALIGN=LEFT> wprowadzi pusty blok przy lewym marginesie.

Wstawianie grafiki do dokumentu

0x08 graphic
Podstawowa konstrukcja ma następującą postać: <IMG SRC="plik_graficzny">

IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło). Efekt zastosowania konstrukcji jest następujący:

0x08 graphic

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

0x08 graphic
Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład:

0x08 graphic

0x08 graphic

Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka:

0x08 graphic

Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy o malejącej rozdzielczości obrazka na ekranie przeglądarki.

0x08 graphic

0x08 graphic
Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli:

0x08 graphic

0x08 graphic
Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu:

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

A ten,
o 100 pikseli

0x08 graphic
Ten obrazek jest odsunięty od akapitu poprzedzającego i następującego po nim o 100 pikseli w pionie

0x08 graphic
Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

Konstrukcja ma postać <IMG SRC="obrazek" ALIGN=abc>

0x08 graphic

ALIGN=left abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

0x08 graphic

ALIGN=right abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

0x08 graphic
ALIGN=top abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

0x08 graphic
ALIGN=bottom abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

0x08 graphic
ALIGN=middle abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Przypomnijmy sobie również uwagi na temat roli parametru CLEAR, który pozwala regulować wzajemne położenie obrazka i tekstu (polecenie <BR> w Blokach).

0x08 graphic
Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron.

0x08 graphic
Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></CENTER>

0x08 graphic

0x08 graphic
Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań, na przykład:

0x08 graphic

0x08 graphic
Zagnieżdżanie grafiki

Możliwe jest zagnieżdżenie grafiki w dokumencie HTML (podobnie jak w przypadku obiektu OLE). Służy do tego polecenie:

Wstawiony w ten sposób obrazek może nie być bezpośrednio widoczny w przeglądarce, gdzie pojawić się może jego szkieletowa reprezentacja, w postaci ikony zawierającej podpis z nazwą pliku. Na przykład:

Dwukrotne kliknięcie na zagnieżdżonym obiekcie uruchomi skojarzony z danym typem pliku program. Na przykład, jeśli macierzystą aplikacją dla pliku BMP jest program Paintbrush (Paint), zostanie on uruchomiony z wczytanym automatycznie plikiem. Gdy w systemie jest zainstalowana wtyczka QuickView Plus (i zintegrowana z przeglądarką), obiekt jest bezpośrednio widoczny w przeglądarce.

Zagnieżdżony obiekt można objąć ramką, za pomocą parametru BORDER=x, a także ustawiać w stosunku do akapitu za pomocą ALIGN. Parametry WIDTH i HEIGHT pozwalają zdefiniować wymiary ikony.

0x08 graphic

0x08 graphic
Animacja Marquee

Uwaga: animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0.

Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest 0x01 graphic
. Jest to "pływający" w poprzek ekranu napis.

Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu.

0x08 graphic
Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</MARQUEE>. Na przykład:

Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE parametr>

0x08 graphic
Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>:

0x08 graphic
Tekst może się poruszać na trzy sposoby:

BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.

BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.

BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.

0x08 graphic
BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

0x08 graphic
Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.

0x08 graphic
Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu.

0x01 graphic

0x08 graphic
Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy.

0x08 graphic
Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu.

Tekst przed animacją
Tekst za animacją

Tekst nad animacją

Tekst pod animacją

Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>.

0x08 graphic
Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE.

Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT COLOR=kolor> Tekst </FONT>.

Kilka przykładów:

Zauważmy, że w polu animacji można wstawić więcej spacji, w przeciwieństwie do zwykłego tekstu.

Uwaga: z nieznanych powodów nie jest możliwe zdefiniowanie białego tekstu na czarnym tle!

0x08 graphic
Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej.

0x08 graphic
Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy.

0x01 graphic

0x08 graphic
Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda.

0x01 graphic

0x08 graphic
Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją:

Tekst u góry pola 0x01 graphic

Tekst w połowie pola 0x01 graphic

Tekst u dołu pola 0x01 graphic

0x08 graphic

0x08 graphic
Dźwięk, wideo, VRML

Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek nie wchodzą one w zakres HTML 4.0. Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady:

Plik dźwiękowy WAV (styl Netscape) - <embed src="../wav/complete.wav" border=0 width=x height=y>

Plik dźwiękowy WAV (styl Microsoft) <bgsound src="../wav/complete.wav" loop=infinite>

Plik dźwiękowy MIDI (styl Netscape) - <embed src="../midi/airwolf.mid" border=0>

Przykład dźwięku zagnieżdżonego:

loop=x określa liczbę powtórzeń dźwięku
width=x height=y określa rozmiary wyświetlanego obrazka wtyczki (np. dla Crescendo jest to 200x55)
hidden=true|false nakazuje schować|wyświetlić obrazek wtyczki
palette=foreground|background pozwala uniknąć ewentualnego migotania palety kolorów, gdy przeglądarka pracuje w trybie 256 kolorów
pluginspace="url" wskazuje miejsce, gdzie znajduje się wtyczka, jeśli użytkownik jej jeszcze nie zainstalował. Adres ten powinien być zgodny ze wskazaniami producenta wtyczki.

Użycie hidden=true pozwala symulować dźwięk w tle (podobnie jak w przypadku BGSOUND dla IE). Zaleca się wtedy umieszczenie polecenia EMBED na samym końcu dokumentu, gdyż wtedy wcześniej wczyta się tekstowa zawartość strony.

Plik dźwiękowy MIDI (styl Microsoft) - <bgsound src="../midi/antartic.mid" loop=1>

Przykład dźwięku w tle (IE):

loop=x oznacza liczbę powtórzeń. Loop=infinite nakazuje powtarzać dźwięk bez końca.
balance=x (x=-10000;10000) określa równowagę między głośnikami w przypadku dźwięku stereofonicznego
volume=x (x=-10000;0) wyznacza głośność. Wartość tę należy samodzielnie wypraktykować.

Jedynie Internet Explorer obsługuje konstrukcję BGSOUND. Navigator ignoruje ją i "milczy". Z kolei polecenie EMBED jest obsługiwane przez obie przeglądarki - Navigator obsługuje zagnieżdżony w ten sposób plik dźwiękowy przez wtyczkę (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przeglądarką ActiveMovie. Obie przeglądarki mogą także korzystać z innych wtyczek - szczególnie popularny jest program Cresendo (http://www.liveupdate.com), ale istnieją też inne wtyczki, np. WebTracks, firmy WildCat Software (http://www.wildcat.com). WebTracks obsługuje pliki MIDI, ale w pierwszym rzędzie swój własny format WTX.

Szczególnie interesującą nowością jest wtyczka Beatnik, firmy Headspace, która obsługuje format RMF, czyli Rich Music Format (proszę zauważyć podobieństwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalająca uzyskać bardzo bogate brzemienie, przy niewielkiej objętości pliku.

Przykładowe polecenie zagnieżdżające plik RMF może wyglądać następująco:

A oto przykład (jeśli dysponujesz wtyczką Beatnik)

Beatnik jest dostępny w postaci wtyczki dla Navigatora lub ActiveX dla Inernet Explorera. najlepiej jest skopiować z witryny Headspace program instalacyjny, który zawiera obie wtyczki jednocześnie.

Przeglądarka Mosaic akceptuje polecenie <SOUND SRC="filename.wav">

0x08 graphic

Plik wideo AVI (styl Netscape) - <embed src="../DRAGDROP.AVI" border=0>

Przykład

Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

dynsrc=url podaje adres pliku AVI
loop=x określa liczbę powtórzeń, loop=infinite oznacza powtarzanie bez końca
loopdelay=n określa w milisekundach opóźnienie między kolejnymi powtórzeniami
start=fileopen|mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesunięciu kursora nad ikonę odtwarzacza
controls wyświetla panel kontrolny odtwarzacza AVI

Przykład

Uwaga: styl Microsoftu nie jest zalecany.

0x08 graphic

Plik VRML (styl Netscape)

Przykład (za "HTML Reference Library")

Pliki VRML jest obsługiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera.

0x08 graphic

Plik RealAudio

Na stronie możemy też umieścić plik RealAudio. Pliki takie można sporządzić za pomocą popularnego programu do obróbki dźwięku, CoolEdit, albo za pomocą oryginalnego RealAudio Encoder, dostępnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV.

Wystarczy umieścić na stronie bezpośredni odsyłacz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a>

Przykład

Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest użycie polecenia EMBED, np.:

Spowoduje to wyświetlenie interfejsu RealPlayera, jeśli jest on zainstalowany w systemie użytkownika.

Przykład

0x08 graphic

Plik EchoSpeech

Jeszcze jednym formatem dźwiękowym na stronach WWW jest format ES firmy Echo Software. Jest to wysoce skompresowany format dźwięku, który można wykorzystać zarówno dla mowy, jak i muzyki. Darmowy dla osób indywidualnych Encoder pozwala przekształcić pliki WAV (koniecznie 16-bitowe, mono, 11 KHz) w pliki ES. Darmowy odtwarzacz (achiwum liczy zaledwie 100 KB w wersji 32-bitowej) współpracuje z 16- i 32-bitowymi przeglądarkami.

Wstawienie pliku ES na stronę jest bardzo proste:

Wymiary są potrzebne, aby wyświetlić ikonę odtwarzacza na stronie. Kliknięcie lewym przyciskiem myszki na ikonie powoduje wyświetlenie interfejsu EchoCast Playera, gdzie możemy zatrzymać, chwilowo wstrzymać i wznowić odtwarzanie, a także zmienić głośność za pomocą suwaka.

Przykład

0x08 graphic

Plik MPEG

Pliki MPEG możemy umieszczać na stronie w postaci zwykłego odsyłacza, albo zagnieżdżać je za pomocą polecenia EMBED, np.

0x08 graphic

Plik MOV (QuickTime)

TABELE

Ogólne ramy tabeli

<TABLE> </TABLE>

Wiersz tabeli

przykład:

<TABLE>

</TABLE>

Komórka w wierszu

<TABLE>

</TABLE>

Przykład:

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 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 chwiłę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna.

Obramowanie tabeli

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

Obramowanie komórek

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

CELLSPACING odległość między komórkami

Marginesy dla komórek

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 parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną.

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

Szerokość tabeli

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 ekranu przeglądarki.

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

Szerokość komórki

Parametr WIDTH możemy wykorzystać także do zdefiniowania szerokości komórki, umieszczając go w ramach definicji wybranej komórki, np. <TD WIDTH=100> </TD>.

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

Wyrównanie tabeli

Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu, na przykład:

Jak widać, tekst wstawiony za definicją tabeli "oblewa" ją z jednej lub drugiej strony, zależnie od rodzaju wyrównania.

Poziome wyrównanie danych w komórkach

Parametr ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - środkowania, justowania do lewej i justowania do prawej. Używamy wówczas odpowiednio konstrukcji
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy szerokość komórki za pomocą WIDTH.

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

Pionowe wyrównanie danych w komórkach

Parametr VALIGN (vertical) 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:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy wysokość tabeli za pomocą HEIGTH.

Kolor tła tabeli

<BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow>

Możemy również "pomalować" poszczególne komórki, wstawiając definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa"

tła tabeli można także użyć gotowego obrazka

<table background="nazwa_obrazka">

Kolor obramowania tabeli

<BORDERCOLOR=barwa>, np. <TABLE BORDER=5 BORDERCOLOR=red>.

Odcień obramowania tabeli

<TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white>

Definicję cienia możemy nawet zastosować w wierszu lub w pojedynczej komórce, na przykład:

<TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

lub

<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Podpis pod tabelą

<TABLE BORDER WIDTH=300>
<CAPTION ALIGN=top>Tytuł tabeli umieszczony u góry</CAPTION>

przykład:

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u góry</CAPTION>

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=bottom ALIGN=right>Tytuł tabeli umieszczony u góry</CAPTION>

Nagłówek wiersza i kolumny

Nagłówek jest definiowany za pomocą parzystego kodu <TH> </TH>.

<CAPTION>Wzrost produkcji w latach 1991-1995 (w mln USD)</CAPTION>

</TABLE>

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

Podobnie, choć nieco inaczej, należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem.

<CAPTION>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</CAPTION>

<TR ALIGN=center><TH>Masło</TH> <TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

<TR ALIGN=center><TH>Margaryna</TH> <TD>800</TD><TD>900</TD><TD>980</TD><TD>1150</TD><TD>1320</TD></TR>

</TABLE>

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.

Łączenie komórek

Aby komórka w danym wierszu rozciągała się na x kolumn, należy użyć w jej definicji parametru <TD ROWSPAN=x>.

Poziome łączenie komórek, za pomocą parametru <TD COLSPAN=x>.

Zagnieżdżanie tabel

Definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <TD> </TD>.

Tabele - nagłówek, ciało i stopka

<TABLE WIDTH=50% BORDER=5 CELLPADDING=5>
<THEAD>To jest część nagłówkowa</THEAD>
<TBODY>
<TR>
<TD>Komórka 11</TD>
</TR>
<TR>
<TD>Komórka 21</TD>
</TR>
</TBODY>
<TFOOT>To jest stopka</TFOOT>
</TABLE>

Znaczniki zamykające są opcjonalne we wszystkich trzech poleceniach.

Obramowanie tabel i komórek w rozszerzeniach języka

Wyjdźmy od podstawowej definicji tabeli, zawierającej, przykładowo, 3 wiersze i 3 kolumny. W definicji tabeli znajduje się także obramowanie. <TABLE BORDER>

Seria znaczników FRAME= pozwala wyświetlać w specjalny sposób obramowanie tabeli. Polecenie FRAME wstawiamy bezpośrednio do definicji tabeli, czyli <TABLE BORDER FRAME=cośtam>.

FRAME=void pozwala usunąć zewnętrzne obramowanie tabeli.

FRAME=above wstawia górną krawędź obramowania, a FRAME=below - dolną.

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

FRAME=lhs wyświetla lewą krawędź obramowania, a FRAME=rhs - prawą.

FRAME=box wyświetla wszystkie krawędzie obramowania.

Seria znaczników RULES= pozwala manipulować wewnętrznymi liniami tabeli.

RULES=none powoduje usunięcie linii wewnętrznych.

RULES=groups powoduje wyświetlenie tylko linii wewnętrznych dzielących część nagłówka, ciała i stopki tabeli oraz grup kolumn. Groups zastąpiły proponowane poprzednio polecenie basic.

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) lub 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.

Możemy zagnieżdżać definicje grup kolumn:

Pierwszy wiersz powoduje wydzielenie pierwszej grupy kolumn. Drugi wiersz definiuje parametry pierwszej kolumny w grupie. Trzeci wiersz definiuje parametry drugiej kolumny w grupie. Czwarty wiersz wydziela drugą grupę kolumn. Piąty wiersz definiuje parametry pierwszej kolumny w drugiej grupie. Cechy definiowanych kolumn mają pierwszeństwo przed cechami grup kolumn.

Przykładowa tabela, łącząca polecenia COLGROUP i RULES=GROUPS.

<TABLE border cellpadding=5 frame=void RULES=groups>
<COLGROUP SPAN=1 ALIGN=left>
<COLGROUP SPAN=4 ALIGN=center>
...

Pierwszy wiersz definiuje obramowanie, usuwa obramowanie zewnętrzne (frame=void) i definiuje obramowanie grup wierszy i kolumn (rules=groups).
Drugi wiersz wydziela grupę kolumn (de facto jedną) dla potrzeb nagłówków wierszy.
Trzeci wiersz wydziela grupę 4 kolumn dla potrzeb danych liczbowych.

RULES=rows powoduje wyświetlenie tylko poziomych linii wewnętrznych.

RULES=cols powoduje wyświetlenie tylko pionowych linii wewnętrznych.

RULES=all powoduje wyświetlenie wszystkich linii wewnętrznych.

&nbsp (non-breaking space).-znak niełamliwej spacji, pozwala wstawić kilka kolejnych spacji

Wyszukiwarka

Podobne podstrony:
Poradnik Webmastera, Wykład HTML, Wykład HTML
Projektowanie stron internetowych Przewodnik dla poczatkujacych webmasterow po X HTML CSS i grafice
informatyka projektowanie stron internetowych przewodnik dla poczatkujacych webmasterow po x html cs
Projektowanie stron internetowych Przewodnik dla poczatkujacych webmasterow po X HTML CSS i grafice
HTML język znaczników Vademecum dla początkujących 07 2004
Język HTML
język HTML tabele i ramki (19 str)
Jezyk HTML wstep

więcej podobnych podstron