March 30, 2023

HTML gyorstalpaló 9. rész

Bemutatkozó oldal képek nélkül? Szó sem lehet róla! Az <img src=”fájlnév”> paranccsal helyezhetünk el egy képet az oldalunkon. (img=image=kép) A kép .gif vagy .jpg kiterjesztésű (illetve formátumú) lehet, de az újabb böngészők már a .png (Portable Network Graphics) formátumot is kedvelik. Ha van olyan rajzolóprogramunk, ami ismeri ezen fájltípusokat, nézzük meg vele, hogy a különböző típusú képek mérete mennyire eltérő. Nem hiszem, hogy magyarázni kellene, hogy a méret milyen fontos szempont az internetes adatátvitelnél. Ha azt szeretnénk, hogy a képre kattintva egy más oldal jelenjék meg, akkor a már jól ismert <a href> formulát alkalmazzuk. Az “aktív” képet a kéken világító szegély jelzi. Ha nem akarjuk, hogy ez látszódjék, akkor a border=0 (a szegély szélessége=0) értéket kell beállítanunk.

 

<img src=”keys.gif”>

<a href=”pelda.html”>
<img src=”keys.gif”></a>

<a href=”pelda.html”>
<img src=”keys.gif” border=0></a>

 

A képet követő szöveg helyzetét az align paranccsal tudjuk rendezni felülre középre vagy alulra.

 

<img src=”keys.gif”
align=”top”>
<img
src=”keys.gif” align=”middle”>
<img
src=”keys.gif” align=”bottom”>

 

Ha igazán szépen elrendezett képeket akarunk, akkor táblázatba kell tennünk őket. A képek pontosan úgy viselkednek a táblázat elemeiként, mintha szöveget írtunk volna be. Ha használjuk az ALT opciót, akkor nevet adhatunk a képünknek. Ez akkor hasznos, ha valaki úgy böngészi az oldalunkat, hogy nem nézi a képeket. (Például a Lynx nevű programmal.)

 

pelda

<img src=”keys.gif” alt=”példa”>

 

A képek méretét is megváltozathatjuk a height és a width (height=magasság, width=szélesség) értékek beállításával.

 

<img src=”keys.gif” height=40 width=100>

 

A height és a width értékét akkor is érdemes beállítani, ha nem akarunk a kép méretében változást, ugyanis az előre beállított képméret a
letöltést gyorsítja, hiszen a böngészőnek nem kell a letöltést megvárnia ahhoz, hogy a kép helyét kiszámítsa.