2. lecke - képek

Egy kép többet ér ezer szónál (kepek1-2.html)

Hajtsuk végre pontosan a következő utasítássort:

• írjuk a böngésző címmezejébe a következő címet: http://egyszervolt.hu/netkalauz/szamitogep.html
• mentsük le az oldalon található nagyobb képeket 01.jpg (a felső), 02.png (jobboldali), 03.png (baloldali alsó) néven (FireFox-szal: jobb egérgomb a képre, az úszómenüben "Kép mentése más néven ...")
• töltsük be újra a vaz.html fájlt
• illesszük a törzsbe a következő négy sort (kijelölés, Ctrl+C, a két "body" közé állunk, Ctrl+V)
• mentsük félkész oldalunkat kepek1.html néven

Nézzük meg a böngészőben!

<img ... >

	<h2>Képek a netről</h2>
	<img src='02.png'>
	<img src='01.jpg'>
	<img src='03.png'>

Próbáljuk meg a 3. sort módosítani:

	<img src='01.jpg' width='500'>

Vagy így:

	<img src='01.jpg' width='500' height='255'>

Nézzük meg így is egy böngészővel!

Kicsit torzult a kép, de legalább egyforma magasak.

Mentsük kész oldalunkat kepek2.html néven!

Az img az angol image (kép) szó rövidítése, az src pedig source (forrás), szintén rövidítés. A width (szélesség), a height (magasság) a kép méretei pixelben.

Magyarul talán ezt mondja az utolsó utasítás (tag) a böngészőnek: Jelenítsd meg azt a képet, amelynek forrása a 01.jpg! Szélessége 500 pixel, magassága 255 px legyen!

Ha a kép nem ugyanabban a könyvtárban van mint a HTML fájl, akkor elé kell írni a pontos helyét! Például: <img src="_imgs/anim_kutya.gif">

Az <img ... > parancsnak sincs lezáró párja!
(A parancsok kis- és nagybetűvel is írhatók, bennük az ' (aposztróf) helyett " (idézőjel) is használható!)