Materiały pomocnicze

Transkrypt

INSTYTUT TECHNIKI
Zak ad Elektrotechniki i Informatyki
[email protected]
PODSTAWY J ZYKA HTML
wiczenie nr 1
I. Struktura HTML-a
Polecenie (znacznik, tag) HTML jest specjalnym ci)giem
znaków obj-tym nawiasami ostrymi. Wielko01 liter jest
oboj-tna - znaczniki wpisane ma ymi i wielkimi literami s)
interpretowane w ten sam sposób.
W HTML-u zdefiniowane s) trzy znaczniki, które opisuj) ogóln)
struktur- strony oraz dostarczaj) podstawowych informacji
nag ówkowych.
<HTML>
Pierwszym znacznikiem struktury, znajduj)cym si- na
ka4dej stronie jest <HTML>. Mówi on o tym, 4e zawarto01
odczytywanego w a0nie pliku to kod, napisany w HTML-u. Ca a
zawarto01 pliku, czyli tre01 i znaczniki powinny znajdowa1 sipomi-dzy pocz)tkowym i ko7cowym znacznikiem <HTML<, tak
jak w poni4szym przyk adzie.
<HTML>
... ca a strona...
</HTML>
<HEAD>
Para znaczników <HEAD> … </HEAD> wyznacza nag ówek
strony. W obr-bie nag ówka znajduje si- kilka innych
znaczników. W 4adnym wypadku nie nale4y umieszcza1 w tym
miejscu tre0ci strony.
Oto typowy przyk ad poprawnego u4ycia znacznika <HEAD>:
1
INSTYTUT TECHNIKI
[email protected]
<HTML>
<HEAD>
<TITLE> Tytu
</HEAD>
…
</HTML>
strony </TITLE>
<BODY>
Pozosta a cz-01 strony, czyli tekst, po )czenia, grafika itp.
znajduje sipomi-dzy pocz)tkowym i ko7cowym znacznikiem
<BODY>. Ca y kod, )cznie ze znacznikami <HTML> i <HEAD>
przedstawia si- nast-puj)co:
<HTML>
<HEAD>
<TITLE> Tytu
</HEAD>
<BODY>
…
</BODY>
</HTML>
strony </TITLE>
Kodowanie polskich znaków w ISO-8859-2
Polskie znaki narodowe, cz-sto nazywane potocznie
"ogonkami", sprawiaj) problemy nie tylko autorom stron WWW.
Obecnie obowi)zuj)c) norm) jest standard ISO-8859-2
(odpowiada on Polskiej Normie PN-93 T-42118).
Ka4da strona WWW powinna mie1 w sekcji HEAD nast-puj)cy
element META:
<HEAD>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
</HEAD>
2
INSTYTUT TECHNIKI
[email protected]
Informuje on przegl)dark-, 4e znaki na stronie WWW zapisane
s) w standardzie ISO-8859-2 i dzi-ki temu wida1 poprawnie
polski litery. Przegl)darka maj)c tak) deklaracj- sama
przestawia si- na zalecany przez autora zestaw znaków.
Aby móc korzysta1 z polskich znaków trzeba mie1 polsk)
czcionk- lub program KeyPlus, który pozwala pisa1
w standardzie ISO.
Bardziej rozbudowane edytory do stron WWW maj)
wbudowane mechanizmy do konwersji znaków.
II. Tytu/
Ka4da strona, napisana w HTML-u powinna posiada1 tytu .
Z tego tytu u korzystaj) póFniej przegl)darki i programy
kataloguj)ce strony WWW, umieszczaj)ce je na tworzonych
przez siebie listach ulubionych stron. Do nadawania tytu u s u4y
znacznik <TITLE>.
Znacznik <TITLE> znajduje si- zawsze w obr-bie nag ówka
strony (znaczniki <HEAD>) i jego zadaniem jest skrótowe
opisanie jej tre0ci:
<HTML>
<HEAD>
<TITLE> Uniwersytet Rzeszowski </TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
Strona mo4e posiada1 tylko jeden tytu , który z kolei mo4e zawiera1 tylko
tekst - 4adne inne znaczniki nie s) dozwolone.
III. Nag/ówki
Nag ówki s u4) do podzia u tekstu na cz-0ci, tak jak
ksi)4ka dzielona jest na rozdzia y. W HTML-u zdefiniowanych
jest sze01 poziomów nag ówków. Znacznik nag ówka wygl)da
nast-puj)co:
3
INSTYTUT TECHNIKI
[email protected]
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Nag
Nag
Nag
Nag
Nag
Nag
ówek
ówek
ówek
ówek
ówek
ówek
stopnia
stopnia
stopnia
stopnia
stopnia
stopnia
pierwszego </H1>
drugiego </H2>
trzeciego </H3>
czwartego </H4>
pi9tego </H5>
szóstego </H6>
Liczby okre0laj) poziom nag ówka (od H1 do H6). Nag ówki nie
s) numerowane podczas wy0wietlania. Ró4ni) si- mi-dzy sob)
wielko0ci) i atrybutami czcionki (pogrubienie, podkre0lenie,
wielkie litery).
Poni4ej znajduje si- przyk ad wykorzystania wszystkich stopni nag ówków:
IV. Akapity
Obecnie wersji HTML-a znacznik <P> (<P> … </P>) jest
podwójny i oznacza odpowiednio pocz)tek i koniec akapitu.
Poza tym, znacznik ko7ca akapitu jest opcjonalny.
4
INSTYTUT TECHNIKI
[email protected]
<P> Jeden akapit </P>
<P> Inny akapit </P>
V. Listy
Najpowszechniej,
oprócz
nag ówków
u4ywanym elementem HTML-a s) listy.
i
akapitów,
W HTML zdefiniowane s) nast-puj)ce typy list:
Listy numerowane, oznaczone kolejnymi liczbami.
Listy wypunktowane, oznaczone kropkami lub innymi
symbolami.
Listy definicji, gdzie ka4dy element sk ada si- z poj-cia oraz
definicji, a poj-cie jest w jaki0 sposób wyró4nione.
Listy menu.
Listy katalogów - listy ma ych elementów, które mog) by1
porz)dkowane poziomo lub pionowo.
Znaczniki list
Wszystkie znaczniki list posiadaj) nast-puj)ce, wspólne
elementy:
Ca a lista jest obj-ta przez znaczniki i pocz)tkowe i
ko7cowe, odpowiednie dla danego rodzaju listy (na
przyk ad <UL> i </UL>, <MENU> i </MENU>).
Ka4dy element listy posiada swój w asny znacznik: <DT> i
<DD> dla listy poj-1 oraz <LI> dla pozosta ych list.
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="pl" />
</head>
<body>
<P> Listy: </P>
<UL>
5
INSTYTUT TECHNIKI
[email protected]
<LI> Znaczniki list
<LI> Listy numerowane
<LI> Listy wypunktowane
<LI> Listy definicji
</UL>
</body>
</html>
Listy numerowane
Listy numerowane to listy, w których ka4dy element
posiada swój numer.
Listy numerowane s) obj-te znacznikami <OL> … </OL>
(OL oznacza skrót od ang. Order List, lista uporz)dkowana), a
ka4dy element listy rozpoczyna si- od znacznika <LI> (ang.
List Item, element listy).
Listy numerowane posiadaj) kilka atrybutów, za pomoc)
których mo4na sterowa1 sposobem wy0wietlania listy przez
przegl)dark-. Atrybuty te pozwalaj) mi-dzy innymi na wybór
schematu numerowania, który zostanie wykorzystany do
nadawania kolejnych numerów, pozwala te4 na okre0lenie
liczby, od której numeracja ma si- rozpocz)1 (je4eli nie chce sizacz)1 od 1).
6
INSTYTUT TECHNIKI
[email protected]
Atrybuty to specjalne elementy znaczników, które zawieraj)
dodatkowe opcje lub informacje o znacznikach.
Listy numerowane mo4na dopasowa1 do w asnych potrzeb
na dwa sposoby: mo4na okre0li1 schemat numeracji oraz liczb-,
od której ma si- ona rozpocz)1. W HTML od wersji 3.2 zosta
zdefiniowany atrybut TYPE, który umo4liwia wybór jednego z
pi-ciu mo4liwych schematów numerowania:
"1": standardowa numeracja za pomoc) liczebników
arabskich (1, 2, 3 itd.).
"a": numeracja za pomoc) kolejnych, ma ych liter alfabetu
(a, b, c, d itd.).
"A": numeracja za pomoc) kolejnych, wielkich liter alfabetu
(A, B, C, D itd.).
"i": numeracja za pomoc) kolejnych liczb rzymskiego,
zapisany ma ymi literami (i, ii, iii, iv itd.).
"I": numeracja za pomoc) kolejnych liczb alfabetu
rzymskiego, zapisanych wielkimi literami (I, II, III, IV itd.).
<html>
<head>
</head>
<body>
<P> Niektóre podzespo y komputera: </P>
<OL TYPE="I" START=3>
<LI> P yta g ówna
<LI> Procesor
<LI> PamiDE RAM
<LI> Dysk twardy
<LI> Karta graficzna
<LI> Karta dGwiDkowa
<LI> CD-ROM
<LI> Obudowa
</OL>
7
INSTYTUT TECHNIKI
[email protected]
</body>
</html>
Listy wypunktowane
W listach wypunktowanych kolejno01 wyst-powania
elementów nie ma znaczenia. Z punktu widzenia HTML-a lista
wypunktowana wygl)da prawie tak samo jak lista numerowana,
z tym, 4e ta pierwsza zawarta jest pomi-dzy znacznikami <UL>
… </UL>, a nie <OL>. Elementy listy oznaczone s)
znacznikiem <LI>, dok adnie tak jak w listach numerowanych.
W li0cie wypunktowanej elementy oznaczone s) kropkami lub
innymi symbolami.
Listy wypunktowane, podobnie jak numerowane, mog)
by1 w pewien ograniczony sposób dopasowane do istniej)cych
potrzeb. Atrybut TYPE pozwala na zmian- tego symbolu w
cz-0ci przegl)darek. Zgodnie ze specyfikacj) HTML 3.2 atrybut
TYPE mo4e przyjmowa1 trzy nast-puj)ce warto0ci:
"disco": kó ko lub kropka, jest to warto01 przyjmowana
standardowo,
"square": ma y kwadrat,
8
INSTYTUT TECHNIKI
[email protected]
"circle": wi-kszo01 przegl)darek wy0wietla "disco" jako
wype nione kó ko, ale w tym wypadku powinno pojawi1 sipuste.
<html>
<head>
</head>
<body>
<P> Niektóre podzespo y komputera: </P>
<UL TYPE="circle" >
<LI> P yta g ówna
<LI> Procesor
</OL>
</body>
</html>
Listy definicji
Listy definicji ró4ni) si- nieznacznie od pozosta ych. Ka4dy
element listy sk ada si- bowiem z dwóch, a nie jednej cz-0ci:
Poj-cie.
Definicja.
9
INSTYTUT TECHNIKI
[email protected]
Ka4da cz-01 elementu listy definicji posiada swój znacznik:
<DT> oznacza poj-cie (skrót od ang. definition term), a <DD>
(skrót od ang. definition definition). Obydwa te znaczniki s)
pojedyncze i wyst-puj) zazwyczaj parami, chocia4 wi-kszo01
przegl)darek poprawnie wy0wietla z samym poj-ciem, czy te4
sam) definicj). Ca a lista definicji obj-ta jest znacznikiem <DL>
… </DL> (skrót od ang. definition list).
VI. Komentarze
Istnieje mo4liwo01 wstawienia komentarzy do kodu
napisanego w j-zyku HTML. Mog) one s u4y1 opisowi
elementów strony, mog) równie4 okre0la1 jej status. Sk adnia
komentarza jest nast-puj)ca:

Nie nale4y u4ywa1 w komentarzach nast-puj)cych znaków:
"<", ">", "--".
VII. Po/7czenia
Odsy acze (hiper )cza, )cza hipertekstowe, odno0niki) s)
chyba najbardziej charakterystycznym elementem dokumentów
w 0wiatowej sieci World Wide Web. Dzi-ki odsy aczom mo4na
wi)za1 ze sob) poszczególne. Odsy acz jest niczym innym, jak
wskazaniem jakiego0 innego miejsca. Klikni-cie na takim
wskazaniu przenosi u4ytkownika do docelowego miejsca, przy
czym mo4e to by1 z powodzeniem miejsce na tej samej stronie,
inna strona w ramach tego samego, z o4onego dokumentu, a
nawet strona na innym serwerze.
Znacznik <A>
Do tworzenia hiperpo )cze7 na stronach HTML s u4y
znacznik <A> … </A>. Znacznik ten jest cz-sto nazywany
odno0nikiem, bowiem mo4e by1 równie4 u4ywany do tworzenia
10
INSTYTUT TECHNIKI
[email protected]
specjalnych miejsc wewn)trz stron, do których prowadz) inne
po )czenia.
Podobnie jak wi-kszo01 znaczników HTML, tak4e <A> posiada
swój znacznik zamykaj)cy </A>. Ca y tekst, który znajdzie sipomi-dzy tymi znacznikami zostanie pod0wietlony i on w a0nie
b-dzie widoczny na stronie jako hiperpo )czenie, np.:
Po/7czenia
etykieta
do
okre8lonych
miejsc
w
dokumencie
-
Etykieta (zwana te4 kotwic) - ang. anchor) jest znakiem,
swoist) elektroniczn) zak adk), podobn) do zak adek w
ksi)4ce, która zaznacza jakie0 miejsce w tek0cie. Gdy
utworzona zostanie etykiet-, mo4na si- odwo ywa1 nie tylko do
zawieraj)cej j) strony, ale i do konkretnego miejsca na stronie.
W ten sposób czytelnik mo4e natychmiast przenie01 si- do
wskazanego punktu. Jej konstrukcja jest nast-puj)ca:
<A NAME="nazwa_etykiety"> </A>
Internet Explorer pozwala u4y1 atrybutu ID, i b-dzie to
wygl)da o np. tak:
<A ID= "nazwa_etykiety" > </A>
<A NAME="nazwa_etykiety" ID="nazwa_etykiety"> </A>
Dobrym
zwyczajem
jest
stosowanie
cudzys owu
obejmuj)cego etykiety, podobnie jak i adresów w odsy aczach.
Gdy etykieta zawiera kilka wyrazów, ich u4ycie jest wr-cz
konieczne, aby definicja by a poprawna. Nale4y te4 wraca1
11
INSTYTUT TECHNIKI
[email protected]
uwag- na wielko01 liter, gdy4 s) one na ogó rozró4niane.
Mo4na zaleca1 u4ywanie ma ych liter zarówno w etykietach, jak
i odsy aczach do nich. Nie mo4na u4ywa1 spacji.
Po/7czenia do dokumentów w sieci WWW
Do tworzenia po )cze7 ze zdalnymi stronami s u4y
dok adnie taki sam kod jaki jest do )czenia ze sob) stron
lokalnych.
Je4eli ma to by1 odsy acz do konkretnego miejsca na
stronie to zapis mo4e wygl)da1 w nast-puj)cy sposób:
<A
HREF="http://www.neurosoft.edu.pl/index.php#top">Do
góry </A>
Je0li natomiast tworzony jest odsy acz do etykiety na tej samej
stronie, wystarczy u4y1 samej nazwy etykiety, czyli:
<A HREF= "#etykieta"> </A>
Gdy utworzymy odsy acz, ci)g znaków "tekst, na którym nale4y
klikn)1" b-dzie zaznaczony innym kolorem, zazwyczaj
niebieskim, i podkre0lony.
VIII. Formatowanie tekstu w HTML-u
Style logiczne
Znaczniki stylów logicznych okre0laj) rol- tekstu
w dokumencie, a nie sposób jego formatowania na ekranie.
Ka4dy z poni4szych znaczników sk ada size znacznika
pocz)tkowego oraz ko7cowego i ma wp yw na tekst, znajduj)cy
sipomi-dzy nimi:
<EM>
znacznik
powoduj)cy
wyró4nienie
tekstu,
czyli
sformatowanie
inaczej
ni4
reszty
dokumentu.
W przegl)darkach graficznych zwykle jest to kursywa.
12
INSTYTUT TECHNIKI
[email protected]
znaki obj-te tym znacznikiem powinny by1 wyró4nione
jeszcze wyraFniej ni4 ma to miejsce w wypadku <EM>.
<STRONG> Wi-kszo01 przegl)darek wykorzystuje do tego celu
pogrubienie.
<CODE>
tekst obj-ty tak) par) znaczników to fragment kodu (np.
programu lub po prostu HTML-a) i powinien by1
wy0wietlony czcionk) o sta ej szeroko0ci znaku.
<SAMP>
ten znacznik oznacza tekst przyk adowy, który jest
wy0wietlany bardzo podobnie do <CODE>
<KBD>
w tym wypadku chodzi o tekst, który powinien by1
wpisany przez u4ytkownika z klawiatury (st)d nazwa
znacznika, która jest skrótem od ang. keybord –
klawiatura).
<VAR>
ten znacznik wskazuje nazw- zmiennej lub innego
elementu, który powinien zosta1 zast)piony przez jak)0
warto01. Z regu y jest wy0wietlany kursyw) lub
podkre0lony.
<DFN>
znacznik definicji. Jest on wykorzystywany do oznaczania
s owa, które b-dzie lub w a0nie zosta o zdefiniowane.
<CITE>
za pomoc) tego znacznika oznacza si- krótkie cytaty.
Style fizyczne
Podobnie
jak
znaczniki
stylów
logicznych,
tak
i w przypadku stylów fizycznych ka4dy znacznik ma swój
pocz)tek i koniec. Poni4ej niektóre z nich:
<B>
pogrubienie
<I>
kursywa
<TT>
czcionka maszynowa
<U>
podkre0lenie
<S>
przekre0lenie
<BIG>
czcionka wi-ksza od reszty tekstu
13
INSTYTUT TECHNIKI
[email protected]
<SMALL>
czcionka mniejsza od reszty tekstu
<SUB>
indeks dolny
<SUP>
indeks górny
Tekst preformatowany
W wi-kszo0ci przypadków tekst z pliku HTML jest
formatowany przez przegl)dark- wy )cznie na podstawie
znajduj)cych si- w nim znaczników. Jedynym wyj)tkiem od tej
regu y jest znacznik tekstu preformatowanego <PRE>. Ka4da
spacja, znajduj)ca sipomi-dzy znacznikami <PRE> i </PRE>
zostanie wy0wietlona.
Linie poziome
Znacznik <HR> nie posiada znacznika zamykaj)cego, ani
te4 nie jest w 4aden sposób zwi)zany z tekstem – jego
zadaniem jest wstawienie na stronie poziomej linii.
Znacznik <HR> posiada kilka atrybutów, jak np.:
SIZE – okre0la grubo01 linii, podawan) w pikselach
(standardow) warto0ci) jest 2);
WIDTH – okre0la d ugo01 linii w poziomie, mo4e ona zosta1
podana w pikselach, ale te4 jako okre0lony procent
aktualnej szeroko0ci ekranu (np. 30%).
>amanie linii
Znacznik <BR> powoduje prze amanie linii, co oznacza, 4e
tekst nast-puj)cy po nim jest wy0wietlany przez przegl)darkod nowej linii, czyli od lewego marginesu, przy czym jest to
margines odpowiedni dla elementu strony, w którym wyst)pi
<BR>.
14
INSTYTUT TECHNIKI
[email protected]
Adresy
Para znaczników <ADDRESS> … </ADDRESS> s u4y do
wstawiania do stron WWW czego0 w rodzaju podpisu. Wstawia
si- go zwykle na dole strony, a obejmuje takie informacje jak
nazwisko twórcy, sposób kontaktu z nim, dat- powstania
strony, informacje o prawach autorskich itp.
Cytaty
Znacznik <BLOCKQUOTE> s u4y do oznaczania cytatów
(w przeciwie7stwie do <CITE>, który oznacza cytaty krótsze,
<BLOCKQUOTE> powinien by1 stosowany tylko do d u4szych
fragmentów, które nie s) zagnie4d4one w akapitach).
Znaki specjalne
Kody znaków specjalnych dziel) si- na nazwane
i numerowane. Kody nazw rozpoczynaj) si- od znaku &,
a ko7cz) si- 0rednikiem (;). Pomi-dzy tymi symbolami znajduje
si- nazwa znaku (a dok adnie jej skrócona wersja).
&alt;
<
>
>
&
&
"
„
 
spacja nierozdzielaj)ca
Po/oBenie tekstu na stronie
Aby u o4y1 w dowolny sposób nag ówek lub akapit, mo4na
skorzysta1 z atrybutu ALIGN. Posiada on trzy warto0ci: LEFT,
RIGHT i CENTERED.
Nieco bardziej elastyczn) metod) kontroli po o4enia
elementów tekstu jest znacznik <DIV>. Znacznik ten posiada
15
INSTYTUT TECHNIKI
[email protected]
równie4 atrybut ALIGN, podobnie jak nag ówki i akapity.
Jednak4e <DIV> s u4y do oznaczenia dowolnego fragmentu
kodu HTML (który mo4e zawiera1 równie4 inne znaczniki) - ma
on wtedy wp yw na wszystko, co znajdzie sipomi-dzy
znacznikiem otwieraj)cym i zamykaj)cym (</DIV>).
<DIV ALIGN=LEFT>
formatowane akapity
</DIV>
Czcionki i ich rozmiar
Znacznik <FONT> s u4y do zachowania kontroli nad
fragmentami tekstu, nie obj-tymi stylami znaków.
Najpowszechniejszym zastosowaniem znacznika <FONT>
jest zmiana rozmiaru czcionki pojedynczego znaku, s owa,
zdania, czy te4 innego fragmentu tekstu. Wybrany tekst
znajduje sipomi-dzy s owami <FONT> i </FONT>, a atrybut
SIZE okre0la 4)dany rozmiar. Atrybut SIZE mo4e przyjmowa1
warto0ci od 1 do 7, gdzie 3 jest warto0ci) standardow).
<FONT SIZE=5> tekst </FONT>
Migaj7cy <BLINK>
Para znaczników <BLINK> … </BLINK> powoduje, 4e
tekst zawarty pomi-dzy nimi wy0wietlany jest z efektem
migania.
<NOBR> i <WBR>
Para
znaczników
<NOBR>
…
</NOBR>
jest
przeciwie7stwem znacznika <BR>. Tekst, znajduj)cy siw obr-bie tych znaczników zawsze b-dzie wy0wietlany w jednej
linii.
16
INSTYTUT TECHNIKI
[email protected]
IX. Wykorzystanie obrazów, koloru i t/a
Obrazy wewnEtrzne na stronach WWW: znacznik <IMG>
Maj)c przygotowany plik graficzny w formacie GIF lub
JPEG, mo4na umie0ci1 go na stronie WWW. Do tego celu s u4y
znacznik <IMG>. Znacznik ten, podobnie jak <HR> i <BR> nie
posiada znacznika zamykaj)cego, ale ma za to du4o atrybutów.
Podstawowa konstrukcja ma nast-puj)c) posta1:
<img src="plik_graficzny">
IMG jest skrótem od Image (obraz), natomiast SRC jest
skrótem od Source (4ród o).
Je0li nie stosowane s) 4adne dodatkowe parametry,
obrazek jest ustawiany przy lewym brzegu dokumentu i ma
wielko01 orygina u. Mo4na jednak u4y1 szeregu parametrów,
które zmieni) po o4enie, wielko01 i inne cechy obrazka.
Wielko01 obrazka mo4emy regulowa1 za pomoc)
parametrów HEIGHT (wysoko01) i WIDTH (szeroko01). Na
przyk ad:
<IMG SRC="logour.gif" HEIGHT=180>
<IMG SRC="logour.gif" WIDTH=200>
<IMG SRC="logour.gif" WIDTH=70 HEIGHT=50>
Przy zwi-kszaniu wymiarów w stosunku do warto0ci
oryginalnych pami-ta1 nale4y o malej)cej rozdzielczo0ci
obrazka na ekranie przegl)darki.
Parametr BORDER pozwala wy0wietli1 wokó obrazka ramk- o
grubo0ci równej x pikseli:
<IMG SRC="logo.gif" WIDTH=120 HEIGHT=160 BORDER=5>
Parametry VSPACE (vertical space) i HSPACE (horizontal space)
pozwalaj) ustali1 odleg o01 obrazka, w pikselach, od
oblewaj)cego go tekstu, na przyk ad:
<IMG SRC="ur.gif" HSPACE=50>
17
INSTYTUT TECHNIKI
[email protected]
<IMG SRC="ur.gif" VSPACE=50>
Obrazy i tekst
Aby wstawi1 obrazek obok tekstu, nale4y u4y1 znacznika
<IMG> we w a0ciwym miejscu, czyli wewn)trz odpowiedniego
znacznika (<H1>, <P>, <ADDRESS> itp.) jak pokazane jest
poni4ej:
<H1><IMG SRC="plik.gif"> Plik graficzny </H1>
Znacznik <IMG> zawiera atrybut ALIGN (TOP || MIDDLE ||
BOTTOM), który umo4liwia u o4enie obrazu powy4ej lub poni4ej
otaczaj)cego go tekstu lub innych obrazów w tej samej linii.
<P>
Przyk adowy tekst Przyk adowy tekst Przyk adowy tekst
Przyk adowy tekst
<A HREF="index.htm"> <IMG SRC="rysunek.gif"
ALIGN=TOP></A>
Przyk adowy tekst Przyk adowy tekst Przyk adowy tekst
Przyk adowy tekst
</P>
18
INSTYTUT TECHNIKI
[email protected]
Grafika i po/7czenia
Aby obraz by jednocze0nie po )czeniem nale4y wstawi1
znacznik <IMG> pomi-dzy otwieraj)cy i zamykaj)cy znacznik
<A>.
<A HREF="index.htm"> <IMG SRC="index.gif"
ALIGN=MIDDLE></A>
Obrazy zewnEtrzne
W przeciwie7stwie do wewn-trznych, obrazy zewn-trzne
nie s) bezpo0rednio widoczne na stronach WWW. S) one
przechowywane osobno i ze stron WWW prowadzi si- do nich
takie same po )czenia, jakie tworzy si- do innych zwyk ych
dokumentów.
Przyk adem po )czenia do zewn-trznego obrazu jest:
<html>
<head>
</head>
<body>
<A HREF="komputer.gif"><IMG SRC="minia_komp.gif"></A>
</body>
</html>
Kolory
Barwy mo4na okre0la1 za pomoc) rozszerze7 kolorów
HTML na dwa ró4ne sposoby:
za pomoc) liczby szesnastkowej
za pomoc) predefiniowanej nazwy
19
INSTYTUT TECHNIKI
[email protected]
Posta1 liczby, potrzebnej do okre0lenia koloru w HTML-u, to
trzy liczby szesnastkowe po )czone razem i poprzedzone
znakiem # (hash), np.:
#000000
#FFFFFF
Aby zmieni1 kolor t a strony WWW, nale4y umie0ci1 jego
warto01 (nazw- lub liczbszesnastkow)) obok atrybutu
BGCOLOR, w znaczniku <BODY>.
Aby do okre0lenia koloru t a strony WWW wykorzysta1 liczbszesnastkow) nale4y poda1 j) w cudzys owie jako warto01
atrybutu BGCOLOR.
<BODY BGCOLOR = "#FFFFFF">
<BODY BGCOLOR = "#934CE8">
Natomiast aby wykorzysta1 nazw- koloru, wystarczy wpisa1 j)
po BGCOLOR (bez cudzys owie):
<BODY BGCOLOR = white>
<BODY BGCOLOR = green>
Grafika i dGwiEk w tle
W HTML-u istnieje mo4liwo01 wykorzystywania obrazów
jako t a dokumentu WWW w miejsce t a o jednolitym kolorze.
Obraz wykorzystywany w taki sposób jest wy0wietlany na
zasadzie kafli, co oznacza, 4e ten sam motyw pojawia si- obok
siebie tyle razy, ile potrzeba aby wype ni1 okno przegl)darki.
Przygotowuj)c plik do takiego t a nale4y zwróci1 uwag-, aby
przej0cie od jednej cz-0ci do drugiej po ich po )czeniu by o
mo4liwie jak najbardziej p ynne.
Do umieszczenia rysunku jako t a strony s u4y atrybut
znacznika <BODY> o nazwie BACKGROUND. Jego warto0ci)
jest nazwa pliku lub URL wskazuj)cy obraz, który b-dzie
u4ywany jako t o:
<BODY BACKGROUND = "rys.gif" >
20
INSTYTUT TECHNIKI
[email protected]
Polecenie definiuje odtwarzanie dFwi-ku w tle. Nie wchodzi
ono w sk ad HTML 4.01, ale jest do01 ch-tnie stosowane.
Przyk ad:
<bgsound src="plik.wav" loop="2" volume="0">
Atrybuty bgsound:
src
Fród o dFwi-ku
loop
liczba odtworze7 dFwi-ku
volume
reguluje g o0no01
balance
reguluje równowag- mi-dzy g o0nikami
X. Tabele
Tworzenie prostych tabel
Definicja tabeli musi by1 umieszczona mi-dzy dwoma
znacznikami <TABLE> … </TABLE>. 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.
Wiersz jest tworzony za pomoc) znacznika otwieraj)cego
<TR> i znacznika zamykaj)cego </TR>. Z kolei ka4dy z
wierszy ma swoje komórki, które s) definiowane za pomoc)
pary znaczników <TH> … </TH> (w przypadku komórek
nag ówka) i pary <TD> … </TD> (dla komórek danych). Liczba
wierszy nie jest ograniczona, równie4 nie ma ogranicze7 co do
liczby komórek w wierszu.
<TABLE>
<TR>
<TH>
<TD>
<TD>
</TR>
</TABLE>
Nag ówek </TH>
Dane </TD>
Dane </TD>
21
INSTYTUT TECHNIKI
[email protected]
Komórka zawiera konkretne dane. Mi-dzy jej znacznikami
mo4na umieszcza1 tekst i grafik-. Konkretne komórki s)
umieszczane mi-dzy znacznikami wybranego rz-du, na
przyk ad:
<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>
Przyk ad:
Jak wida1, tabela zawiera 3 rz-dy, w ka4dym po 3 komórki, za0
w konkretnych komórkach zosta y umieszczone dane: od a1 do
c3. Jest to najprostszy przyk ad tabeli, która nie zawiera
4adnych obramowa7, barw, nag ówków i podpisu.
Aby tabela zawiera a naoko o obramowanie, wystarczy
rozszerzy1 definicj- o parametr BORDER. Je0li nie podamy
szeroko0ci obramowania, przyjmowana jest jej domy0lna
warto01.
<TABLE BORDER> </TABLE>
22
INSTYTUT TECHNIKI
[email protected]
Gdyby zosta a podana szeroko01 obramowania w pikselach,
zostanie ona odpowiednio zinterpretowana przez przegl)dark-,
na przyk ad:
<TABLE BORDER=10> </TABLE>
Aby komórki (nie tabela!) zawiera y inne obramowanie ni4
domy0lne, mo4na u4y1 parametru CELLSPACING.
<TABLE BORDER CELLSPACING=8> </TABLE>
Je0li uznane zostanie, 4e odst-p mi-dzy zawarto0ci) komórki a
jej obramowaniem jest zbyt ma y, mo4na u4y1 parametru
CELLPADDING (domy0lnie wynosi on 1).
<TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE>
Dotychczas tworzone by y tabele, które przybiera y domy0ln)
szeroko01 na ekranie przegl)darki. Parametr WIDTH daje
mo4liwo01 samodzielnego zdefiniowania szeroko0ci tabeli.
Podany parametr jest "silniejszy" od innych parametrów, które
wp ywaj) na szeroko01 tabeli na ekranie.
<TABLE BORDER WIDTH=600> </TABLE>
23
INSTYTUT TECHNIKI
[email protected]
Zamiast warto0ci absolutnej w pikselach mo4na tak4e u4y1
warto0ci procentowej, np. pó szeroko0ci ekranu przegl)darki.
<TABLE BORDER WIDTH=50%> </TABLE>
Parametr
WIDTH
mo4na
wykorzysta1
tak4e
de
zdefiniowania szeroko0ci komórki, umieszczaj)c go w ramach
definicji wybranej komórki, np. <TD WIDTH=100> </TD>.
Mo4na te4 poda1 warto01 procentow), która odnosi si- do
szeroko0ci komórki w ramach tabeli, a nie ca ego ekranu
(akceptuj) j) Navigator i Internet Explorer, ale HTML 4.0 zaleca
unikania tego polecenia).
Parametr ALIGN mo4na tak4e wykorzysta1 do poziomego
wyrównania zawarto0ci komórki - 0rodkowania, justowania do
lewej i justowania do prawej.
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>.
Mo4na tak4e zdefiniowa1 wysoko01 tabeli (polecenie
nie wchodzi w sk ad HTML 4.0), podaj)c parametr HEIGHT,
wyra4ony w pikselach lub procencie widocznej strony.
W poni4szym przyk adzie zosta y u4yte parametry
<TABLE BORDER WIDTH="50%" HEIGHT="30%">
Parametr VALIGN (vertical) s u4y do pionowego wyrównania
zawarto0ci komórki - do górnego brzegu, do 0rodka i do
dolnego
brzegu.
U4ywamy
wówczas
odpowiednio
konstrukcji:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>.
Microsoft Internet Explorer i Nescape Communicator
pozwalaj) wykorzysta1 kolor t a tabeli. W tym celu nale4y
w definicji tabeli doda1 parametr <BGCOLOR=barwa>, np.
<TABLE BORDER HEIGHT=200 BGCOLOR=yellow>
24
INSTYTUT TECHNIKI
[email protected]
Do podstawowych kolorów nale4): Black, Olive, Teal, Red,
Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green,
Purple, Silver (silver), Yellow, Aqua
Podpis pod tabel7
Tabela powinna na ogó zawiera1 tytu , wyja0niaj)cy jej
tre01. Nale4y go umie0ci1 zaraz za ogóln) definicj) tabeli. Na
przyk ad:
<TABLE BORDER WIDTH=300>
<CAPTION ALIGN=top> Tytu
</CAPTION>
tabeli umieszczony u góry
Microsoft Internet Explorer pozwala dodatkowo dosun)1
podpis do lewej lub prawej strony, przy u4yciu parametru
VALIGN. Na przyk ad:
<CAPTION VALIGN=top ALIGN=left> Tytu
</CAPTION>
u góry
a tak4e
<CAPTION VALIGN=bottom ALIGN=right> Tytu
</CAPTION>
u góry
Komórki rozpiEte na kilku wierszach i kolumnach
Aby stworzy1 komórk- rozpi-t) na kilku wierszach i/lub
kolumnach, nale4y znacznika <TH> lub <TD> doda1 atrybuty
ROWSPAN i/lub COLSPAN oraz przypisa1 im odpowiednie
warto0ci, które okre0l) liczb- wierszy i/lub kolumn, na których
komórka jest rozpi-ta. Dane umieszczone w takiej komórce
wype ni) obszar o d ugo0ci i/lub szeroko0ci odpowiadaj)cej
rozpi-to0ci.
25
INSTYTUT TECHNIKI
[email protected]
<TABLE BORDER>
<TR>
<TH COLSPAN=2> Nag ówek </TH>
</TR>
<TR>
<TD> Dane </TD>
<TD> Dane </TD>
</TR>
</TABLE>
XI. Ramki
Po/7czenia do ramek
Wszystkie wa4niejsze przegl)darki potrafi) interpretowa1
ramki, które sta y si- ju4 oficjalnym standardem j-zyka HTML
(w wersji
4.0).
Ramki
u atwiaj)
nawigowanie
w wielostronicowych dokumentach HTML i dlatego s) ch-tnie
stosowane przez wielu webmasterów.
Najbardziej typowym przyk adem u4ycia ramek jest
umieszczenie w jednej spisu tre0ci i przeznaczenie drugiej na
wywo ywane dokumenty (odr-bne strony HTML), dowi)zane do
poszczególnych pozycji spisu.
Podstawow) rol- w dokumencie sk adaj)cym si- z ramek
pe ni specjalna strona, na której definiuje si- liczb-, wielko01
i pozycj- ramek oraz zachowanie si- innych dokumentów
w momencie uaktywnienia )cza hipertekstowego. Pozosta e
26
INSTYTUT TECHNIKI
[email protected]
strony, wchodz)ce w sk ad ca ego, wielostronicowego
dokumentu, s) stronami podrz-dnymi.
Nale4y zwróci1 uwag-, 4e na podstawowej stronie nie
powinno by1 4adnych znaczników poza blokiem nag ówkowym i
definicj) samych ramek. Dopiero znaczniki NOFRAMES
pozwalaj) umie0ci1 tre01, która b-dzie wy0wietlana przez
przegl)darki
nie
interpretuj)ce
ramek.
Znaczniki
<BODY></BODY> mog) by1 umieszczane jedynie w obr-bie
NOFRAMES, aczkolwiek ich obecno01 nie jest konieczna.
Poni4szy przyk ad obrazuje znaczniki wprowadzone na
fikcyjnej stronie prezentuj)cej list- niektórych instytutów UR.
<HTML>
<HEAD>
<TITLE> Instytuty UR</TITLE>
</HEAD>
<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME = "lista instytutów"
SRC="lista_inst.htm">
<FRAME
SCROLLING="yes"
NAME
=
"instytuty"
SRC="instytut.htm">
<NOFRAMES>
<BODY>
ZawartoTE
strony
dla
przegl9darek
nie
obs uguj9cych ramek
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
27
INSTYTUT TECHNIKI
[email protected]
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 wielko0ci ramek.
Para znaczników <NOFRAMES> </NOFRAMES> s u4) do
wprowadzenia elementów strony, które b-d) widoczne dla
posiadacza przegl)darki, która nie akceptuje ramek. Je0li
natomiast czytelnik strony u4ywa Navigatora lub Internet
Explorera, wszelkie informacje mi-dzy tymi znacznikami
zostan) zignorowane. W ten sposób autor strony mo4e
utworzy1 dokument uniwersalny, uniezale4niony od konkretnej
przegl)darki.
Znacznik <FRAME> s u4y do wprowadzenia konkretnej
ramki. Znacznik jest uzupe niany dodatkowymi parametrami,
mówi)cymi o zawarto0ci (zagnie4d4one strony), o tym, czy
ramka zawiera suwaki, a tak4e definiuj)cymi nazw- ramki.
Parametry FRAMESET
Aby konstrukcja mog a dzia a1, konieczne jest podzielenie
strony - pionowe lub poziome. Poni4szy kod zawiera informacjo podzieleniu strony na dwie kolumny. S u4y do tego parametr
COLS="x,y",
umieszczany
w
otwieraj)cym
znaczniku
FRAMESET. Liczby x i y s u4) do liczbowego okre0lenia
szeroko0ci ramek. Mo4na poda1 obie warto0ci w pikselach,
w procentach szeroko0ci strony, a tak4e okre0li1 szeroko01
jednej kolumny i oznaczy1 szeroko01 drugiej za pomoc)
wieloznacznika * (ma to sens przy podziale na wi-ksz) liczbkolumn lub wierszy). Mo4na zastosowa1 parametr BORDER=x,
który
okre0la
w
pikselach
szeroko01
obramowania
rozdzielaj)cego ramki. Parametr BORDERCOLOR=kolor pozwala
okre0li1 kolor obramowania rozdzielaj)cego ramki. Parametr
FRAMEBORDER=[yes|no] lub [1|0] (zalecana jest "liczbowa"
posta1) pozwala wy0wietla1 lub chowa1 obramowanie
rozdzielaj)ce ramki (domy0lnie jest ono wy0wietlane). Parametr
jest akceptowany przez Navigatora 4.04 i Internet Explorera
4.01.
28
INSTYTUT TECHNIKI
[email protected]
Uwaga: aby usun)1 obramowania w Internet Explorerze, we
FRAMESET oprócz FRAMEBORDER=0 nale4y jeszcze u4y1
parametru FRAMESPACING=0. Mo4na tak4e doda1 BORDER=0,
co usunie obramowania z Navigatora, np.:
<frameset cols="20%,*"framespacing="0"
frameborder="0" border="0">
Parametry FRAME
Oprócz podzia u na ramki nale4y im jeszcze przypisa1
jakie0 dokumenty, zazwyczaj w formacie HTML. Aby przypisa1
ramce dokument, nale4y poda1 Fród o dokumentu. Nale4y w
tym celu u4y1 konstrukcji:
<FRAME SRC="nazwa_pliku.htm">
Przywo ywany plik mo4e si- znajdowa1 w tym samym katalogu
lub jakimkolwiek innym - podaje si- wtedy nazw- pliku z pe n)
0cie4k) dost-pu.
Atrybut
Warto8I
Opis
SCROLLING
AUTO
Domy0lnie, je0li zawarto01 ramki zajmuje
wi-kszy obszar ni4 obszar udost-pniony
przez
ramk-,
przegl)darka
automatycznie wyposa4a ramk- w paski
przewijania, aby u4ytkownicy przewijaj)c
zawarto01 mieli dost-p do ca ego
dokumentu.
SCROLLING
NO
Takie ustawienie powoduje, 4e
przewijania nie b-d) wy0wietlane.
YES
W takim przypadku paski przewijania
b-d) wy0wietlane w ramce zawsze,
niezale4nie od potrzeb.
SCROLLING
NORESIZE
MARGINHEIGHT piksele
paski
Domy0lnie u4ytkownicy mog) zmienia1
rozmiary ramek. Za pomoc) tego
atrybutu mo4na temu zapobiec.
Okre0la
29
szeroko01
marginesu,
który
INSTYTUT TECHNIKI
[email protected]
pojawia sipikselach).
MARGINHEIGHT piksele
nad
i
pod
ramk)
(w
Okre0la szeroko01 marginesu, który
pojawia si- szeroko01 prawej i lewej
strony ramki (w pikselach).
W przypadku parametru TARGET s) cztery mo4liwo0ci:
TARGET="_blank"
TARGET="_self"
TARGET="_parent"
TARGET="_top"
W pierwszym przypadku przywo ywany dokument zostanie
za adowany do nowego, pustego okna (uruchomi now) kopiprzegl)darki.
W drugim przypadku (przypadek domy0lny) nowy
dokument zamieni w ramce dokument, z którego dokonujemy
skoku.
W trzecim przypadku przywo ywany dokument zamieni
dokument nadrz-dny w hierarchii dla bie4)cego dokumentu.
W czwartym przypadku przywo ywany dokument zostanie
wstawiony na miejsce dokumentu pierwszego w hierarchii
naszych skoków, a wi-c na sam) "gór-".
index.htm
<html>
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=iso-8859-2">
<META HTTP-EQUIV="Content-Language" CONTENT="pl">
<head>
<title>Instytut Techniki</title>
</head>
<frameset framespacing="0" rows="90,*">
<frame scrolling="no" name="top" target="contents"
src="nag.htm" >
30
INSTYTUT TECHNIKI
[email protected]
<frameset framespacing="0" cols="180,*" >
<frame scrolling="no" framespacing="0"
name="contents" target="main" src="menu.htm"
noresize>
<frame framespacing="0" name="main"
src="main.htm" scrolling="yes" >
</frameset>
<noframes>
<body>
<p>Strona ta uVywa ramek, lecz Twoja
przegl9darka nie obs uguje ich.</p>
</body>
</noframes>
</frameset>
</html>
menu.htm
<html>
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="pl"
/>
</head>
<body>
<P>
<A HREF="instt.htm" target='main'>Instytut
Techniki</A> <BR>
<A HREF="instf.htm" target='main'>Instytut
Fizyki</A> <BR>
<A HREF="instm.htm" target='main'>Instytut
Matematyki</A> <BR>
</P>
</body>
</html>
31
INSTYTUT TECHNIKI
[email protected]
32

Materiały pomocnicze

Transkrypt

Podobne dokumenty

Lista firm - Uniwersytet Rzeszowski

zgoda na otrzymywanie korespondencji elektronicznej

Informatyka i Florystyka dla Seniora