Professional Documents
Culture Documents
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.
<TITLE>Pierwszy program</TITLE>
<META
HTTP-EQUIV="content-type"
charset=windows-1250">
CONTENT="text/html;
<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.
kilka
atrybutw,
ktrych
wartoci
decyduj
<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 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.
2. Wyrwnywanie tytuw.
Przykad:
3. Znaczniki akapitu.
Do utworzenia akapitu w dokumencie HTML su znaczniki <P> </P>. Akapit
mona:
a) wyrwna do lewego marginesu
c) wyrodkowa
<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 NOSHADE>),
(<HR
WIDTH="50%">:
np.:
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>
[ HTML ] Czcionki
1. Wygld oglny.
Czcionka pogrubiona (bold).
Znaczniki:
<B> </B>
<I> </I>
<BLINK> </BLINK>
<U> </U>
<STRIKE> </STRIKE>
<CITE> </CITE>
<STRONG> </STRONG>
<EM> </EM>
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
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
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:
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
<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
[ 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.
<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:
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:
nr 2:
<IMG SRC="http://www.skryptoteka.pl/jama.jpg" VSPACE=50>
Przykad:
Konstrukcja ma posta:
Przykad:
<CENTER> </CENTER>.
Przykad:
<CENTER><IMG SRC="http://www.skryptoteka.pl/jama.jpg"></CENTER
>
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
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
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
<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
<OL
TYPE="i">:
i.
Rozdzia 1
ii.
Rozdzia 2
iii.
Rozdzia 3
<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=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:
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:
A2
A3
B1
B2
B3
C1
C2
C3
A1
A2
A3
B1
B2
B3
C1
C2
C3
<TD WIDTH=100>
wyglda nastpujco:
A1
A2 A3
B1
B2 B3
C1
C2 C3
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:
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:
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">
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>
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:
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:
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