Webprogramozás HTML alapok 2.

3. előadás

Hivatkozások - linkek • Link: más webes tartalomra történő irányítás

Hivatkozások - linkek • abszolút hivatkozás fizika kar weboldala

• relatív hivatkozás más oldal

• TARGET tulajdonság: target=“_SELF” target=“_BLANK” target=“_PARENT” target=“név”

target=“_TOP”

• hivatkozás képre valami kép

• email link email nekem

Példa

elso.htm

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> Fizika kar weboldala második oldal

masodik.htm <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> Kurzus weboldala első oldal

Oldalon belüli hivatkozások • belső rész elnevezése: valami

• belső hivatkozás egy részre: hivatkozás egy részre

• külső hivatkozás egy oldal részére: hivatkozás egy részre relatív hivatkozás egy részre

Példa <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Tartalom

• Első fejezet
• Második fejezet
• Harmadik fejezet

---

Első rész

Valami tartalom...

vissza

Első rész

Valami tartalom...

vissza

Első rész

Valami tartalom...

vissza

Képek • kép beszúrása:

kép elérése (relatív/abszolút)

rendezés: left, right, middle, …

vízszintes/függőleges távolság

keret

• egyéb tulajdonságok: width="100px" height="100px"

width="50%" height="30%"

• kép, mint link

Példa <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Ha az aktuális lapra akarunk képeket behozni, az "IMG" kulcsszóval megtehetjük. Bekeretezhetjük a képet, és a szöveg mögé (ALIGN=right) vagy elé (ALIGN=left) tehetjük, úgy, hogy a szöveg a képet "körülveszi".

A "BORDER" mögött a keret méretét, a HSPACE ill. VSPACE mögött a kép mellett ill. az alatta-fölötte levõ üres rész méretét (képernyõ pontokban) adhatjuk meg. A keret színe az aktuális betûszín, amit minden képre külön beállíthatunk. Ha nem az eredeti méretében akarjuk a képet mutatni, akkor a "HEIGHT=" ill. "WIDTH=" paraméter is szóba jöhet. (Ezt is képpontokban mérve.) Ilyenkor torzulhat a kép, ha rossz arányban méretezzük át.

Táblázatok • sablon

Táblázat leírás

Fejléc 1	Fejléc 2
1. sor, 1. oszlop	1. sor, 2. oszlop
2. sor, 1. oszlop	2. sor, 2. oszlop

Táblázatok

• TABLE tulajdonságok – – – – –

cellpadding=hossz a cella kerete és tartalma közti üres hely mérete cellspacing=hossz a cellák közötti távolság width=érték a táblázat (vagy akár a cella) szélessége bgcolor=szín a táblázat (vagy cella) háttérszíne background="hatterkep.jpg" a táblázat (vagy cella) háttérképe

Példa

Cella háttérszíne	Szín neve	RGB kódja
	black	#000000
	blue	#0000FF
	cyan	#00FFFF
	green	#008000
	magenta	#FF00FF
	red	#FF0000
	white	#FFFFFF

Példa

Cellák egybeolvasztása

Elsõ sor	három összevont oszloppal
2. és 3. sor 1. oszlopa összevonva	Ez a	2.	sor
	Ez a	3.	sor

A BODY tulajdonságai • BACKGROUND="kép.jpg" háttérkép • BGCOLOR="szín" háttérszín • TEXT="szín" az oldal szövegének színe • • • •

LEFTMARGIN="hossz" bal margó vastagsága RIGHTMARGIN="hossz" jobb margó vastagsága TOPMARGIN="hossz" felső margó vastagsága BOTTOMMARGIN="hossz" alsó margó vastagsága

Oldal szerkezete táblázattal <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Fejléc
Navigációs menü Link 1 Link 2 Link 3 Link 4	Tartalom

Oldal szerkezete táblázattal

IFRAME – beágyazott keret <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Fejléc
Navigációs menü Link 1 Link 2 Link 3 Link 4	<iframe allowtransparency="true" height="500px" width="99%" scrolling="auto" name="tartalom" src="t1.htm">Tartalom

IFRAME – beágyazott keret t1.htm <meta http-equiv="Content-Type„ content="text/html; charset=iso-8859-2">

tartalom 1