Wstęp Do HTML

Wstp do HTML
Dokument HTML jest plikiem tekstowym, ktry zawiera znaczniki, zwane inaczej
tagami, i stanowi jzyk HTML. Same skadaj si z nawiasw ktowych, midzy
ktrymi znajduj si cile okrelone litery. Na przykad <BODY> jest
otwierajcym znacznikiem "ciaa" dokumentu HTML. Kady znacznik otwierajcy
ma swj odpowiednik zamykajcy, ktry zawiera dodatkowo tzw. ukonik (slash).
Na przykad: <BODY> ma </BODY>. Natomiast przegldarka, jako program
wyspecjalizowany, interpretuje znaczniki i przetwarza je na waciw posta
wizualn.
Szkielet dokumentu HTML wyglda nastpujco:

<HTML>
<HEAD>
<!- Informacje o dokumencie, tytu strony, itd. ->
</HEAD>
<BODY>
<!-Tutaj znajduje si tre dokumentu (tekst, grafika, itp.)->
</BODY>
</HTML>
Uwaga: znaczniki <body> </body> nie powinny by umieszczane na stronie
zawierajcej ramki, w ramach FRAMESET.
ZNACZNIK <HTML> </HTML>

Informuje przegldark o pocztku (<HTML>) i kocu (</HTML>) dokumentu.
Midzy nimi jest umieszczana caa zawarto strony, tj. nagwek wraz z tytuem
strony, tre zasadnicza, linki, grafika, itd. Znacznik nie jest bezporednio
widoczny na stronie w przegldarce.
ZNACZNIK <HEAD> </HEAD>

Znacznik HEAD jest umieszczany wewntrz znacznikw HTML. Zawiera informacje
na temat dokumentu, tj. tytu dokumentu, autor dokumentu i ewentualnie
informacje na temat zawartoci pliku (czego dotyczy), jzyk uyty na stronie, itp.
Wewntrz znacznika <HEAD> </HEAD> mona znale inne znaczniki takie, jak:
a) <TITLE></TITLE> - wewntrz znajduje si tytu strony, ktry ukazuje si w
belce tytuowej (na samej grze) przegldarki.
Przykad:
<TITLE>Pierwszy program</TITLE>
b) <META> - nie zawiera znacznika zakoczenia. Za jego pomoc przegldarka

zostaje poinformowana o zawartoci dokumentu, np. dla celw katalogowych czy
indeksw, wykorzystywanych przez odpowiednie programy. Zawiera trzy atrybuty:
HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z
trzecim.
Przykadowe zastosowania <META>:
<META HTTP-EQUIV="Refresh" CONTENT="x">

Powysze polecenie spowoduje regularne odwieanie strony co x sekund. Moe to
mie zastosowanie w przypadku, gdy strona zawiera informacje, ktre s czsto
aktualizowane (kilka razy dziennie). Gdy uytkownik przeglda stron przez jaki
czas, strona sama aktualizuje si co okrelony odstp czasu.
<META
HTTP-EQUIV="content-type"
charset=windows-1250">
CONTENT="text/html;
Deklaruje ono stron kodow dokumentu. Inn postaci jest charset=iso-8859-2.

Przy zastosowaniu tej komendy nie ma potrzeby interwencji ze strony
uytkownika, ktry nie musi nawet wiedzie, z jakim standardem kodowania
polskich znakw ma do czynienia.
c) <BASE> - definiuje bazowy adres dokumentu.
Przykad:
<BASE HREF="http://www.serwer.pl/strona.html">
Czasami zdarza si, e dokumenty, w ramach porzdku robionego na serwerze,
przenoszone s do innych miejsc. Gdy dokument zosta przeniesiony, moe
zdarzy si, e odsyacz straci swoj aktualno. Wtedy przegldarka bdzie
odnosi wszystkie odsyacze do nowego pooenia dokumentu. W takiej sytuacji
najwygodniejszym rozwizaniem jest wykorzystanie znacznika <BASE> w
nagwku przenoszonej strony.
ZNACZNIK <BODY> </BODY>

Jest to znacznik umieszczany wewntrz znacznikw HTML, podobnie jak HEAD.
Wewntrz tego znacznika znajduje si gwna cz dokumentu.
Znacznik <BODY> posiada
graficznym wygldzie strony:
kilka
atrybutw,
ktrych
wartoci
decyduj
a) BACKGROUND="obrazek.gif" - ustala to strony, w naszym przypadku jest

nim plik graficzny 'obrazek.gif'.
Przykad:
<BODY BACKGROUND="to.gif">
b) BGCOLOR=kolor - okrela kolor ta dokumentu, ktry w razie braku ta w
postaci pliku graficznego, znajdzie si pod tekstem, itp. Dopuszczalne wartoci to
w formie tekstowej, np. "obrazek.gif" lub w formie liczbowej, np. "#1177FF", gdzie
2
dwie pierwsze liczby (hex) to zawarto koloru czerwonego w tle, dwie nastpne zielonego, i dwie ostatnie - niebieskiego.
Przykady:
<BODY BGCOLOR="yellow">
lub
<BODY BGCOLOR="#AA8844">
c) TEXT=kolor - okrela kolor tekstu dokumentu. Przy wyborze koloru tekstu,
naley kierowa si kolorem ta, aby nie byy takie same lub zblione. Naley
pamita, e tekst na stronie ma by czytelny i nie powinien razi czytelnika.
Moliwe wartoci, jakie moe przyj atrybut TEXT, s takie same jak w przypadku
atrybutu BGCOLOR.
Przykady:
<BODY TEXT="black">
lub
<BODY TEXT="#001122">
d) Znaczniki okrelajce kolory odsyaczy:
LINK=kolor - okrela kolor odsyaczy. Wartoci dopuszczalne: podobnie jak w
przypadku atrybutu BGCOLOR.
VLINK=kolor - okrela kolor odwiedzonego (uytego) odsyacza. Wartoci
dopuszczalne: podobnie jak w przypadku atrybutu BGCOLOR. (visited link)
ALINK=kolor - okrela kolor odsyacza aktywnego. Nastpuje to w czasie
adowania dowizanego do niego dokumentu. Wartoci dopuszczalne: podobnie jak
w przypadku atrybutu BGCOLOR. (active link)
Przykady:
<BODY LINK="blue" VLINK="purple" ALINK="yellow">

<BODY LINK="#0000FF" VLINK="#7700FF" ALINK="#AAFF33">
e) LEFTMARGIN=xx - IExplorer pozwala okreli lewy margines strony. Warto
podajemy w pikselach.
Przykad:
<BODY LEFTMARGIN="5">
f) TOPMARGIN=yy - podobnie jak w przypadku atrybutu LEFTMARGIN mona
okreli grny margines strony. Warto podajemy w pikselach.
Przykad:
<BODY TOPMARGIN="10">
[ HTML ] Bloki
1. Tytuy (nagwki).
Do ustalenia okrelania wielkoci tytuw (head) suy polecenie: <Hx> </Hx>,
gdzie warto x oznacza jego wielko (stopie). W przypadku wartoci 1 tytu jest
najwikszy, za wartoci 6 - najmniejszy.
Tytu stopnia pierwszego

Tytu stopnia drugiego
Tytu stopnia trzeciego
Tytu stopnia czwartego
Tytu stopnia pitego
Tytu stopnia szstego
2. Wyrwnywanie tytuw.
Przykad:
<Hx ALIGN=CENTER> </Hx> - na rodku strony,

Tytu stopnia czwartego
<Hx ALIGN=RIGHT> </Hx> -wyrwnanie do prawej krawdzi strony,

Tytu stopnia trzeciego
<Hx ALIGN=LEFT> </Hx> - wyrwnanie do lewej krawdzi strony.

Tytu stopnia pitego
3. Znaczniki akapitu.
Do utworzenia akapitu w dokumencie HTML su znaczniki <P> </P>. Akapit
mona:
a) wyrwna do lewego marginesu
(<P ALIGN=LEFT> </P>),
Tekst jest wyrwnany do lewego marginesu.

b) wyrwna do prawego marginesu
(<P ALIGN=RIGHT> </P>)
Tekst jest wyrwnany do prawego marginesu.

4
c) wyrodkowa
(<P ALIGN=CENTER> </P>).

Tekst jest wyrodkowany.
4. Znacznik koca wiersza.

W celu przeniesienia tekstu do nastpnej linii naley posuy si znacznikiem
<BR>. Znacznik koca wiersza moe by posiada nastpujce dodatkowe
parametry:
Przykad:
<BR CLEAR=LEFT>
To jest bardzo adny obrazek.
<CLEAR=RIGHT>
To take jest bardzo adny obrazek.
i <BR CLEAR=ALL>.
Wyej wymienione parametry wykorzystuje si do pozycjonowania tekstu oraz
grafiki. Uycie parametru CLEAR pozwola przenie tekst, poniej grafiki, tak jak to
przedstawiaj powysze przykady. Parametr CLEAR moe by take wykorzystany
w czasie pozycjonowania tabel i tekstu.
5. Linia pozioma.
W celu oddzielenia pewnej zawartoci strony moemy wykorzysta znacznik
<HR>. Jego dziaanie powoduje wstawienie poziomej linii przez ca szeroko
strony.
Znacznika
<HR> posiada take parametry. S to:
a) brak cieniowania linii
(<HR NOSHADE>),
b) linia okrelonej gruboci (<HR SIZE="x">), gdzie x oznacza grubo linii w

pikselach, np.: <HR SIZE="5">:
c) linia dowolnej dugoci (<HR WIDTH="x">), gdzie x okrela dugo linii w

pikselach, np.: <HR WIDTH="100">:
d) linia o x procent szerokoci strony
(<HR
WIDTH="x%">), np. <HR
WIDTH="50%">:
e) linia umieszczona na rodku (<HR ALIGN="CENTER">), ktra posiada

okrelon grubo i szeroko (<HR
ALIGN="CENTER" SIZE="x"
WIDTH="y">), np.: <HR ALIGN="CENTER" SIZE="5" WIDTH="250">:
f) linia wyjustowana do prawej krawdzi strony (ALIGN="RIGHT"), nie

cieniowana
(NOSHADE),
o
okrelonej
dugoci
(<HR ALIGN="RIGHT" NOSHADE WIDTH="x">),

<HR ALIGN="RIGHT" NOSHADE WIDTH="250">:
g) linia o okrelonym kolorze
np.:
(<HR COLOR="nazwa_koloru">), np.: <HR
COLOR="RED">:
6. Adres.
W
celu
wyrnienia
<ADDRESS>
naszego
</ADDRESS>.
adresu
Jest to
moemy skorzysta ze
rwnowane poleceniu
znacznikw
<i>
</i>
(kursywa), np.:
<ADDRESS>
Nazwa instytucji
00-867 Miasto
ul. Ulica 35/37
6
tel. (+48)156547823
http://www.firma.com.pl
e-mail: adresat@firma.com.pl
</ADDRESS>
7. rodkowanie.
Wszystkie elementy jakie znajd si wewntrz znacznika <CENTER>
zostan wyrodkowane na stronie (np. tekst, obrazek, itp).
</CENTER>
TEN TEKST JEST WYRODKOWANY.
[ HTML ] Czcionki
1. Wygld oglny.
Czcionka pogrubiona (bold).
Znaczniki:
<B> </B>
Przykad: Tekst pogrubiony.

Czcionka pochylona (italic).
Znaczniki:
<I> </I>
Przykad: Tekst pochylony.

Czcionka migajca (blink).
Znaczniki:
<BLINK> </BLINK>
Czcionka podkrelona (underline).

Znaczniki:
<U> </U>
Przykad: Tekst podkrelony.

Czcionka przekrelona (strike).
Znaczniki:
<STRIKE> </STRIKE>
Przykad: Tekst przekrelony.

Cytat (citation)
Znaczniki:
<CITE> </CITE>
Przykad: To jest cytat.
Czcionka mocno wyrniona (strong)

Znaczniki:
<STRONG> </STRONG>
Przykad: Tekst mocno wyrniony.

Czcionka wyrniona (emphasis)
Znaczniki:
<EM> </EM>
Przykad: Tekst wyrniony.
2. Kolory czcionek.
Kady twrca dokumentu HTML moe okreli kolor dowolnego tekstu na stronie.
Poniej podano nazwy 16 podstawowych kolorw oraz przykadowe barwy tekstu
widziane przez przegldarki takie jak: Netscape Navigator oraz Microsoft Internet
Explorer. Budowa polecenia: <FONT COLOR="nazwa_koloru"> </FONT>
Nazwa koloru: Kolor:
Przykad:
BLACK
czarny
tekst czarny
OLIVE
oliwkowy
tekst oliwkowy
TEAL
turkusowy
tekst turkusowy
RED
czerwony
tekst czerwony
BLUE
niebieski
tekst niebieski
MAROON
brzowy
tekst brzowy
NAVY
granatowy
tekst granatowy
GRAY
szary
tekst szary
LIME
jasnozielony tekst jasnozielony
FUCHSIA
rowy
tekst rowy
WHITE
biay
tekst biay
GREEN
zielony
tekst zielony
PURPLE
fioletowy
tekst fioletowy
SILVER
jasnoszary
tekst jasnoszary
YELLOW
ty
tekst ty
AQUA
bkitny
tekst bkitny
3. Wielko i krj czcionki.

8
Wielko czcionki mona zmienia podajc warto z zakresu 1-7 w atrybucie SIZE
znacznika <FONT>, np.: <FONT SIZE="4">. Czcionka normalna ma
standardowo przypisan warto 3.
Przykad:
Znaczniki:
<FONT SIZE="x"> </FONT>
W trakcie redagowania tekstu moemy zmieni jego wielko wpisujc:
<FONT SIZE=+x> </FONT> - zwikszanie o wybran wielko

lub
<FONT SIZE=-x> </FONT> - zmniejszanie o wybran wielko

Przykad:
Tekst o wielkoci 1.
Tekst o wielkoci 2.
Tekst o wielkoci 3.
Tekst o wielkoci 4.
Tekst o wielkoci 5.
Tekst o wielkoci 6.
Tekst o wielkoci 7.
Istnieje take moliwo, w trakcie redagowania strony, zmiany kroju czcionki w
dokumencie. Suy do tego polecenie: <FONT FACE="nazwa_czcionki">
</FONT>.
Przykad:
Arial: czcionka kroju Arial
Times: czcionka kroju Times
Courier: czcionka kroju Courier
[ HTML ] Odsyacze ( hipercza )

Odsyacze (hipercza) s nieodzownym elementami dokumentu HTML w sieci
World Wide Web. Dziki nim mona powizywa ze sob poszczeglne strony
internetowe. Hipercze jest wskanikiem do innego miejsca w sieci WWW.
Kliknicie na nim powoduje przeniesienie uytkownika do innej strony lub
konkretnego miejsca w danym dokumencie (moe by to rwnie ten sam
dokument).
9
Wystpuj dwa rodzaje odsyaczy:

- odsyacz do etykiety,
- odsyacz do strony.
Etykieta to inaczej elektroniczna zakadka, zakotwiczenie, ktre okrela miejsce w
dokumencie HTML. Utworzenie etykiety umoliwi nam odwoa si nie tylko do
samej strony, ale take do okrelonego miejsca na tej stronie. W taki sposb
czytelnik bdzie mg natychmiast przej do miejsca, ktre go interesuje.
Uywanie wielu hiperczy na stronie czyni j bardziej zrozumia, czyteln i
sprawia, e uytkownik moe w szybki sposb dotrze do konkretnej wiadomoci.
Naley pamita tylko aby kady odsyacz by poprawnie opisany. Przykad
konstrukcji etykiety (zakotwiczenia) zosta przedstawiony poniej:
<A NAME="nazwa etykiety"> </A>

Wewntrz powyszego znacznika mona wpisa tekst, do ktrego odsycz bdzie
mg si pniej odwoa. Przykadami zastosowa zakotwicze i odsyaczy s
miejsca koca kadego rozdziau, gdzie uytkownik moe wrci do pocztku
rozdziau lub do spisu treci.
Odsyaczem nazywamy element, ktry wskazuje inne miejsce w Internecie i
pozwala przej do niego poprzez kliknicie na nim mysz. Konstrukcja odsyacza
wyglda nastpujco:
<A HREF="adres_URL">Widoczny tekst odsyacza</A>

Po utworzeniu odsyacza, cig znakw zawarty wewntrz znacznika okrelajcego
odsycz, tj. "Widoczny tekst odsyacza", bdzie wyrniony poprzez podkrelenie i
zmian koloru, standardowo jest nim kolor niebieski. Jeli kursor myszki znajdzie
si nad odsyaczem zmienia swj wygld (np. posta: rczka), za w wierszu
statusu przegldarki powinna pojawi sie informacja na temat miejsca docelowego.
Kliknicie wywoa natychmiastowe przejcie do okrelonego odsyaczem miejsca.
Do czsto spotykanym odsyaczem na stronach WWW jest konstrukcja
umoliwiajca czytelnikowi strony wysa poczt elektroniczn do jakiej osoby
(np. autora). Konstrukcja takiego odsyacza wyglda nastpujco:
<A HREF=mailto:uzytkownik@domena.pl> Wylij do mnie

e-maila</A>
W miejscu wywietlenia komunikatu mona umieci adres e-mail, by by widoczny
bezporednio na ekranie przegldarki, np.:
<A HREF=mailto:uzytkownik@domena.pl>uzytkownik@domena.pl</A>
Mona take stworzy odsyacz w postaci obrazka. W tym celu naley umieci
obrazek wewntrz znacznika <A HREF> </A>.
Konstrukcje odsyaczy umoliwiaj odwoywa si take do wielu innych usug ni
http, np.:
10
- <A HREF=file:///cieka/plik></A> - pliku na dysku lokalnym

- <A HREF=gopher://...></A> - usugi gophera
- <A HREF=telnet://...></A> - usugi telnetu
- <A HREF=news://...></A> - usugi grup dyskusyjnych
- <A HREF=ftp://ftp.domena.pl></A> - usugi FTP (File Transfer
Protocol)
[ HTML ] Grafika
Grafika jest wanym elementem na stronach WWW, gdy ubarwia i uprzyjemnia
ich przegldanie. Naley pamita, e dua ilo odpowiednio dobranej grafiki
bardzo dobrze wpywa na atrakcyjno strony w odbiorze. Jednak to wanie
grafika jest przyczyn zmniejszenia szybkoci adowania si strony. W sieci
internetowej najczciej spotykanymi typami plikw graficznych s GIF i JPG, ktre
charakteryzuj si znaczn kompresj i niewielkimi rozmiarami.
1. Umieszczanie elementw graficznych w dokumencie HTML

Aby umieci dowolny element graficzny naley wpisa
<IMG SRC="plik_graficzny">
Znacznik IMG jest skrtem od ang. Image (obraz) i okrela miejsce w dokumencie
HTML, w ktrym powinna znale si grafika, natomiast atrybut SRC powinien
zawiera nazw rdowego pliku graficznego.
Przykad:
<IMG SRC="http://www.skryptoteka.pl/jama.jpg">
co w wyniku powinno wyglda nastpujco:
Istnieje moliwo zastosowania wielu innych atrybutw, ktre umoliwiaj m.in.:
a) zmiana rozmiaru obrazka jest realizowana przy pomocy atrybutw HEIGHT
(wysoko) oraz WIDTH (szeroko). Jednostk jest piksel.
Przykad:
<IMG SRC="http://www.skryptoteka.pl/jama.jpg" HEIGHT=50

WIDTH=50>
Powysze polecenie automatycznie zmienia wysoko i szeroko obrazka.
11
b) zmiana rozmiaru gruboci ramki wok obrazka jest realizowana przy pomocy
atrybutu BORDER, ktry podobnie jak w przypadku rozmiaru obrazu posiada
warto podan w pikselach.
Przykad:
<IMG SRC="foot.gif" BORDER=5>
c) okrelenie odlegoci obrazka od pozostaych otaczajcych elementw poprzez

uycie atrybutw VSPACE (vertical space) oraz HSPACE (horizontal space).
Przykad:
<IMG SRC="http://www.skryptoteka.pl/jama.jpg" HSPACE=100>
Dowolny tekst.Dowolny tekst.
nr 2:
<IMG SRC="http://www.skryptoteka.pl/jama.jpg" VSPACE=50>
Przykad:
Konstrukcja ma posta:
Przykad:
<IMG SRC="plik_graficzny" ALIGN=......>

Obrazek moe by take umieszczony na rodku wiersza dziki parze znacznikw
<CENTER> </CENTER>.
Przykad:
<CENTER><IMG SRC="http://www.skryptoteka.pl/jama.jpg"></CENTER
>
Mona take umieci go wewntrz tabeli wstawiajc go midzy znaczniki <TD>

</TD>. W ten sposb mona w atwy sposb tworzy efektownie wygldajce
obramowania.
12
2. Animacja MARQUEE
Efektownym elementem graficznym, obsugiwanym tylko przez przegldark
Internet Explorer firmy Microsoft jest animacja Marquee. Jest to "pyncy" w
poprzek ekranu napis. Przykad:
<MARQUEE>Pyncy tekst</MARQUEE>
Znacznik posiada wiele atrybutw. Oto one:
BEHAVIOR=SCROLL - powoduje, e tekst przemieszcza si od jednego brzegu
strony do drugiego, po czym znika za nim i nastpnie wypywa ponownie zza
pierwszego
BEHAVIOR=SLIDE - powoduje, e tekst przemieszcza si od pierwszego brzegu,
dociera do drugiego i zatrzymuje si
BEHAVIOR=ALTERNATE - powoduje, e tekst przemieszcza si od pierwszego
brzegu, dociera do drugiego i wraca z powrotem (odbija si)
BGCOLOR=kolor - okrela kolor ta; warto koloru (kolor) mona by podana w
postaci numerycznej (np. #00FF77) lub sownej (Black, Olive, Teal, Red, Blue,
Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua)
DIRECTION=LEFT - okrela pocztkowy kierunek ruchu jako kierunek w lewo
DIRECTION=RIGHT - okrela pocztkowy kierunek ruchu jako kierunek w prawo
LOOP=x okrela ilo powtrze ruchu tekstu x razy
HEIGHT=x - wymiary elementu, w ktrym przesuwa si napis; x moe
przyjmowa wartoci wyraone w pikselach lub procentach wysokoci ekranu
WIDTH=y - wymiary elementu, w ktrym przesuwa si napis; y moe
przyjmowa wartoci wyraone w pikselach lub procentach szerokoci ekranu
HSPACE=x - okrela odlego elementu MARQUEE w poziomie od ssiadujcych
elementw, np. tekstu, grafiki; akapity nad i pod animacj naley oddzieli od
animacji znakiem koca akapitu <P> lub koca wiersza <BR>
VSPACE=y - okrela odlego elementu MARQUEE w pionie od ssiadujcych
elementw, np. tekstu, grafiki; akapity nad i pod animacj naley oddzieli od
animacji znakiem koca akapitu <P> lub koca wiersza <BR>
SCROLLAMOUNT=x - okrela szybko przemieszczania si napisu; warto x
okrela dugo pojedynczego skoku wyraon w pikselach
SCROLLDELAY=x - okrela odstpu czasowe midzy kolejnymi skokami
(szybko przemieszczania si napisu); warto x jest wyraona w milisekundach
13
[ HTML ] Wykazy ( listy )

Wykazy s pewnego rodzaju spisem i mona je podzieli na dwa rodzaje, tj.:
- wykazy nienumerowane,
- wykazy numerowane.
1. Wykazy nienumerowane
Wykazy nienumerowane s form spisu, ktra nie posiada numeracji przed kadym
z elementw. Do znacznikw wykazw nienumerowanych nale: <UL> </UL>
oraz <LI>. Znacznik <LI> okrela element wykazu i wystpuje w przypadku
wykazw nienumerowanych jak i w przypadku wykazw numerowanych. Kod HTML
wyglda nastpujco:
Przykad:
<UL>
<LI> Punkt pierwszy
<LI> Punkt drugi
<LI> Punkt trzeci
</UL>
Za w oknie przegldarki przyjmie posta:
Punkt pierwszy
Punkt drugi
Punkt trzeci
Istnieje moliwo take zagniedania wykazw wewntrz siebie.
wewntrzny, niszy poziom powinien koczy si zamkniciem, np.:
Przykad:
<UL>
<LI> Rozdzia 1
<LI> Rozdzia 2
<UL>
<LI> Podrozdzia
<LI> Podrozdzia
<UL>
<LI> Podrozdzia
<LI> Podrozdzia
</UL>
</UL>
<LI> Rozdzia 3
<LI> Rozdzia 4
</UL>
Kady
2.1
2.2
2.2.1
2.2.2
14
W oknie przegldarki przyjmie posta:

Rozdzia 1
Rozdzia 2
Podrozdzia 2.1
Podrozdzia 2.2
Podrozdzia 2.2.1
Podrozdzia 2.2.2
Rozdzia 3
Rozdzia 4
2. Wykazy numerowane
W przeciwiestwie do wykazw nienumerowanych wykazy numerowane posiadaj
wartoci okrelajce pozycj na licie. Znaczniki okrelajce wykaz numerowany to
<OL> </OL>. Oto przykad kodu HTML:
Przykad:
<OL>
<LI> Punkt pierwszy
<LI> Punkt drugi
<LI> Punkt trzeci
</OL>
ktry w oknie przegldarki przyjmie posta:
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
Istniej moliwo rozpoczcia numeracji od dowolnie okrelonej wartoci. Do tego
celu suy atrybut START znacznika <OL>, na przykad:
<OL START="5">
<LI> Punkt pity
<LI> Punkt szsty
15
<LI> Punkt sidmy

</OL>
Wyglda nastpujco:
5. Punkt pity
6. Punkt szsty
7. Punkt sidmy
Inny atrybut, tj. TYPE, pozwala okreli sposb numerowania listy:
A - numerowanie poprzez uycie wielkich liter; przykad dla
<OL TYPE="A">:
A. Rozdzia 1
B. Rozdzia 2
C. Rozdzia 3
a - numerowanie poprzez uycie maych liter; przykad dla
<OL TYPE="a">:
a. Rozdzia 1
b. Rozdzia 2
c. Rozdzia 3
I - numerowanie poprzez uycie liczb rzymskich (wielkie litery); przykad dla
<OL
TYPE="I">:
I.
Rozdzia 1
II.
Rozdzia 2
III.
Rozdzia 3
i - numerowanie poprzez uycie liczb rzymskich (mae litery); przykad dla
<OL
TYPE="i">:
i.
Rozdzia 1
ii.
Rozdzia 2
iii.
Rozdzia 3
1 - numerowanie poprzez uycie liczb arabskich; przykad dla
<OL TYPE="1">:
16
1. Rozdzia 1
2. Rozdzia 2
3. Rozdzia 3
[ HTML ] Tabele
1. Tabela, wiersze i kolumny
Opis tabeli znajdowa si powinien wewntrz znacznikw <TABLE> </TABLE>.
W ich ramach umieszczone s definicje rzdw, komrek w rzdach oraz dane w
komrkach.
Wiersz tabeli definiuje si znacznikami <TR> <TR> i jest on wewntrznym opisem
tabeli. On sam tworzy ramy dla komrek wewntrz ktrych znajduj si dane. W
tabeli mona umieszcza dowoln ilo wierszy, np.:
<TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>
W powyszym przykadzie utworzona zostaa tabela zawierajca 3 wiersze. W
nastpnym kroku naley w kadym z wierszy zdefiniowa komrki.
Komrk w wierszu definiuje si znacznikami <TD> <TD>. Kada komrka
powinna zawiera dane, np. w postaci tekstu lub grafiki. Komrki umieszcza si
midzy znacznikami wybranego wiersza tabeli, np.:
Przykad:
<TABLE>
<TR><TD>A1</TD><TD>A2</TD><TD>A3</TD></TR>
<TR><TD>B1</TD><TD>B2</TD><TD>B3</TD></TR>
<TR><TD>C1</TD><TD>C2</TD><TD>C3</TD></TR>
</TABLE>
co przyjmie nastpujcy wygld:
A1 A2 A3
B1 B2 B3
C1 C2 C3
2. Obramowanie, margines, szeroko oraz wysoko tabeli i komrek
W celu dodania do tabeli obramowania naley wykorzysta do tego atrybut
BORDER w znaczniku TABLE. W przypadku braku wartoci obramowania tabeli,
brana jest jej warto domylna, tj. 0. Skadnia wyglda nastpujco:
17
<TABLE BORDER=x> </TABLE>

Oto przykad tabeli, ktrej obramowanie jest rwne 5:
<TABLE BORDER=5>
przyjmie nastpujcy wygld:
A1 A2 A3
B1 B2 B3
C1 C2 C3
W celu odsunicia od siebie poszczeglnych komrek w tabeli naley posuy si
atrybutem CELLSPACING.
Przykad:
<TABLE BORDER=5 CELLSPACING=10>

i przyjmie posta:
A1
A2
A3
B1
B2
B3
C1
C2
C3
Jeli okae si, e odstp midzy krawdzi komrki a jej zawartoci jest zbyt
maa to mona posuy si atrybutem CELLPADDING. Skadnia:
<TABLE CELLPADDING=x> </TABLE>

Przykad:
<TABLE BORDER=5 CELLPADDING=20>

przyjmie wygld:
A1
A2
A3
B1
B2
B3
C1
C2
C3
Jeli zaistniaaby konieczno zmiany szerokoci tabeli, naleaoby posuy si

atrybutem WIDTH. Skadnia wyglda powinna nastpujco:
18
<TABLE WIDTH=x> </TABLE>

gdzie x moe przyj warto numeryczn lub procentow w odniesieniu do
szerokoci ekranu przegldarki. Przykad:
<TABLE BORDER=5 WIDTH=50%>
A1
A2
A3
B1
B2
B3
C1
C2
C3
Ten sam atrybut moe posuy do okrelenia szerokoci komrki (kolumny) w

tabeli. Warto moe by w postaci numerycznej lub procentowej w odniesieniu do
szerokoci tabeli. Skadnia wyglda nastpujco:
<TD WIDTH=x> </TD>

Przykad:
<TD WIDTH=100>
wyglda nastpujco:
A1
A2 A3
B1
B2 B3
C1
C2 C3
W celu okrelenia wysokoci tabeli naley uy atrybutu HEIGHT, a jego warto

wyrazi w pikselach lub procentach widocznej strony. Konstrukcja ma posta:
<TABLE HEIGHT=x> </TABLE>

Przykad:
<TABLE BORDER=5 HEIGHT=200>

A1 A2 A3
B1 B2 B3
C1 C2 C3
3. Pozycjonowanie tabel oraz danych w komrkach
W celu wyrwnania tabeli w stosunku do marginesw strony lub otaczajcych j
elementw (tekst, grafika) mona posuy si atrybutem ALIGN w znaczniku
TABLE. Moe on przyj wartoci LEFT, RIGHT lub CENTER.
Przykad:
19
<TABLE BORDER=5 ALIGN=RIGHT> </TABLE>

wyglda nastpujco:
A1 A2 A3
B1 B2 B3
C1 C2 C3
Atrybut ALIGN mona take wykorzysta do poziomego wyrwnania zawartoci
komrki. W tym celu naley uy konstrukcji:
<TD ALIGN=.....> </TD> Przykady, gdzie atrybuty tabeli wygldaj
nastpujco <TABLE BORDER=5 WIDTH=50%>: <TABLE BORDER=5
WIDTH=50%>:
<TD ALIGN=CENTER>
A1
A2
A3
B1
B2
B3
C1 C2 C3
<TD ALIGN=RIGHT>
A1
B1
A2
A3
B2
B3
C1 C2 C3
W celu wyrwnania pionowego zawartoci komrki naley posuy si atrybutem
VALIGN. Moe on przyj wartoci TOP, MIDDLE oraz BOTTOM. Skadnia wyglda
nastpujco:
<TD VALIGN=.....> </TD>

Przykady, gdzie atrybuty tabeli wygldaj nastpujco
HEIGHT=200>:
<TD VALIGN=TOP>
A1
<TABLE BORDER=5
A2 A3
B1 B2 B3
C1 C2 C3
20
<TD VALIGN=BOTTOM>
A1
A2 A3
B1 B2 B3
C1 C2 C3
4. Wypenienie tabeli (to)
Przegldarka Internet Explorer pozwala wypeni tabel dowolnym kolorem kolorem ta tabeli. W tym celu naley w definicji tabeli wykorzysta atrybut
BGCOLOR. Skadnia jest nastpujca:
<TABLE BGCOLOR=kolor>
gdzie kolor moe przyj posta wartoci numerycznej (np. #00FF77) lub sownej
(Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green,
Purple, Silver, Yellow, Aqua).
Przykad:
<TABLE BORDER=5 BGCOLOR=RED>
A1 A2 A3
B1 B2 B3
C1 C2 C3
Istnieje rwnie moliwo zmiany kolorw ta poszczeglnych komrek tabeli.
Skadnia jest nastpujca:
<TD BGCOLOR=kolor> </TD>

Przykad:
A1 A2 A3
B1 B2 B3
C1 C2 C3
Jako ta tabeli lub poszczeglnych komrek mona take uy gotowego obrazka.
W tym celu naley uy skadni:
<TABLE BACKGROUND="plik_graficzny">
Przykad:
21
<TABLE BACKGROUND="http://www.skryptoteka.pl/czcionki/win.jpg">
tworzy tabel jak poniej:
A1 A2 A3
B1 B2 B3
C1 C2 C3
Przegldarka Internet Explorer interpretuje take kolor obramowania tabeli. W tym
celu naley uy atrybutu BORDERCOLOR. Skadnia:
<TABLE BORDERCOLOR=kolor>
Przykad:
<TABLE BORDER=5 BORDERCOLOR=GREEN>

A1
A2 A3
B1 B2 B3
C1 C2 C3
Oprcz tego Internet Explorer pozwala okreli kolor cienia obramowania tabeli.
Cie brzegu komrki lub tabeli dzieli si na dwie czci: jasn z lewej i u gry oraz
ciemn z prawej i u dou. Mona nada odrbn barw obu cieniom, np.:
<TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white>
i wyglda to bdzie nastpujco:
A1 A2 A3
B1 B2 B3
C1 C2 C3
Przykad w przypadku komrki:
<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

A1 A2 A3
B1 B2 B3
C1 C2 C3
22
Tabela moe zawiera tytu, wyjaniajcy jej tre. Naley umieci go zaraz za
ogln definicj tabeli (za znacznikiem <TABLE>), np.:
<TABLE BORDER>
<CAPTION ALIGN=TOP>Napis na grze</CAPTION>
bdzie wyglda:
Napis na grze
A1 A2 A3
B1 B2 B3
C1 C2 C3
23

Wstęp Do HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wstęp Do HTML

Uploaded by

Copyright:

Available Formats

Wstp do HTML

Szkielet dokumentu HTML wyglda nastpujco:

ZNACZNIK <HTML> </HTML>

ZNACZNIK <HEAD> </HEAD>

b) <META> - nie zawiera znacznika zakoczenia. Za jego pomoc przegldarka

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

Deklaruje ono stron kodow dokumentu. Inn postaci jest charset=iso-8859-2.

ZNACZNIK <BODY> </BODY>

a) BACKGROUND="obrazek.gif" - ustala to strony, w naszym przypadku jest

<BODY LINK="blue" VLINK="purple" ALINK="yellow">

Tytu stopnia pierwszego

<Hx ALIGN=CENTER> </Hx> - na rodku strony,

<Hx ALIGN=RIGHT> </Hx> -wyrwnanie do prawej krawdzi strony,

<Hx ALIGN=LEFT> </Hx> - wyrwnanie do lewej krawdzi strony.

(<P ALIGN=LEFT> </P>),

Tekst jest wyrwnany do lewego marginesu.

(<P ALIGN=RIGHT> </P>)

Tekst jest wyrwnany do prawego marginesu.

(<P ALIGN=CENTER> </P>).

4. Znacznik koca wiersza.

<HR> posiada take parametry. S to:

a) brak cieniowania linii

b) linia okrelonej gruboci (<HR SIZE="x">), gdzie x oznacza grubo linii w

c) linia dowolnej dugoci (<HR WIDTH="x">), gdzie x okrela dugo linii w

d) linia o x procent szerokoci strony

WIDTH="x%">), np. <HR

e) linia umieszczona na rodku (<HR ALIGN="CENTER">), ktra posiada

WIDTH="y">), np.: <HR ALIGN="CENTER" SIZE="5" WIDTH="250">:

f) linia wyjustowana do prawej krawdzi strony (ALIGN="RIGHT"), nie

(<HR ALIGN="RIGHT" NOSHADE WIDTH="x">),

g) linia o okrelonym kolorze

(<HR COLOR="nazwa_koloru">), np.: <HR

TEN TEKST JEST WYRODKOWANY.

Przykad: Tekst pogrubiony.

Przykad: Tekst pochylony.

Czcionka podkrelona (underline).

Przykad: Tekst podkrelony.

Przykad: Tekst przekrelony.

Przykad: To jest cytat.

Czcionka mocno wyrniona (strong)

Przykad: Tekst mocno wyrniony.

Przykad: Tekst wyrniony.

jasnozielony tekst jasnozielony

3. Wielko i krj czcionki.

<FONT SIZE="x"> </FONT>

W trakcie redagowania tekstu moemy zmieni jego wielko wpisujc:

<FONT SIZE=+x> </FONT> - zwikszanie o wybran wielko

<FONT SIZE=-x> </FONT> - zmniejszanie o wybran wielko

[ HTML ] Odsyacze ( hipercza )

Wystpuj dwa rodzaje odsyaczy:

<A NAME="nazwa etykiety"> </A>

<A HREF="adres_URL">Widoczny tekst odsyacza</A>

<A HREF=mailto:uzytkownik@domena.pl> Wylij do mnie

- <A HREF=file:///cieka/plik></A> - pliku na dysku lokalnym

1. Umieszczanie elementw graficznych w dokumencie HTML

<IMG SRC="http://www.skryptoteka.pl/jama.jpg" HEIGHT=50

Powysze polecenie automatycznie zmienia wysoko i szeroko obrazka.

<IMG SRC="foot.gif" BORDER=5>

c) okrelenie odlegoci obrazka od pozostaych otaczajcych elementw poprzez

<IMG SRC="http://www.skryptoteka.pl/jama.jpg" HSPACE=100>

Dowolny tekst.Dowolny tekst.

<IMG SRC="plik_graficzny" ALIGN=......>

Mona take umieci go wewntrz tabeli wstawiajc go midzy znaczniki <TD>

[ HTML ] Wykazy ( listy )