Ebben a leckében a képek beillesztéséről fogunk beszélni. (ma csak egy téma a péntekre való tekintettel. Hétvégenként nem biztos, hogy lesznek leckék...)
Kezdjünk is neki a képek beillesztésével:
SZINTAXIS:
<img src="url" alt="valamilyen_szöveg">
PÉLDA:
<html>
<body>
<img src="smiley.gif" alt="valamilyenszöveg"/>
</body>
</html>
EZT KELL LÁTNOD (ha a w3-as HTML szerkesztőt használod):
ELEMZÉS:
<img> - tag. Képet definiál. Zárótagja nincs, a záró kacsacsőr elé teszünk /-t.
src - attribútum, értéke a kép helyét és/vagy nevét mondja meg. Ha a kép nem a HTML fájl mappájában van, akkor a következőképpen hivatkozunk rá:
src="/mappaneve/képneve"
alt - attribútum. Minden esetben használjuk!! Ha az olvasó böngészője nem támogatja a képeket, akkor a kép helyén az értékének megadott szöveg jelenik meg.
Kép méretezése:
A kép átméretezéséhez használjunk valamilyen grafikai programot (GIMP vagy Photoshop). Természetesen a HTML kódban is lehet méretezni a következő képpen:
width - attribútum, értéke a kép szélességét adja meg pixelben
height - attribútum, értéke a kép magasságát adja meg pixelben.
PÉLDA: <img src="smiley.gif" alt="valami" width="450" height="320"/>
FONTOS! Ezt csak akkor használd, ha csak néhány pixel javításra van szükség. Hogy miért? Íme:
- Van egy képünk, ami mondjuk legyen 8MB, 1280*1024 pixeles.
- A HTML-kódban átméretezzük 20*20 pixelesre.
- Az oldal megnyitásakor a böngésző betölt 8 megabájtnyi képet, hogy azt még átméretezze és megjelenítse 20*20 pixelen.
- Másik eset: Van egy képünk, ami 8MB, 1280*1024 pixeles
- GIMP-ben lekicsinyítjük 20*20 pixelesre. A kép mérete 100KB lesz.
- A böngésző most csak 100KB képet tölt be... Ugye nem ugyan az?
Ide tartozik:
align - attibútum. Ha a kép egy bekezdésben, szövegek közt található és értéke "bottom", akkor a kép alja a sorra egyvonalban kezdődik. (pl.: <img src="smiley.gif" alt="valami" align="bottom"/>), ha értéke "middle", akkor a kép közepe található a sor aljával egy vonalban, hogyha pedig "top", akkor a kép teteje kezdődik a sorral egy vonalban. Nem világos? Próbáld ki :D
Kép használata link-ként:
Nagyon egyszerű.
A linkeknél ezt tanultuk:
<a href="#">Link neve</a>
Ma pedig ezt tanultuk:
<img src="smiley.gif" alt="valami"/>
Összerakva:
<a href="#"><img src="smiley.gif" alt="valami"/></a>
Tehát:
A a link nevéhez egyszerűen beszúrunk egy képet a tanult módon.
Köszönöm ezt a remek oktató anyagot. Rengeteget tanulok tőled. ;-)
VálaszTörlés