Weblapprogramozás

- Oktatási segédanyag középiskolák számára

Képek használata

Képeket is elhelyezhetünk a dokumentumunkban. Ahogy a tananyag elején már említettük, a képek (és egyéb járulékos elemek) nem magában a HTML fájlban helyezkednek el, hanem csak egy hivatkozás van rájuk. A HTML nyelvben képekre az <img> címkével tudunk hivatkozni (záró pár nélkül) és a kép megjelenési beállításait is itt tudjuk elvégezni.

Paraméterei:

src= a kép fájl helyét kell itt megadni (hivatkozás a forrásra)
width= a kép szélessége
height= a kép magassága
border= a kép keretének vastagsága (0 = nincs)
hspace= vízszintesen mennyi hely legyen
                a kép és a szöveg között
vspace= függőlegesen mennyi hely legyen
                a kép és a szöveg között
alt= alternatív szöveg (szöveges böngészőben a képet
        helyettesítő szöveg)
title= cím (megjelenik, ha az egérrel fölé állunk)
align= a kép pozícionálása (később részletesen kifejtem).

Ha nem adunk meg szélességet és magasságot, akkor a kép az eredeti méretével jelenik meg. Forrás tekintetében lehetséges külső, a weben lévő képekre is hivatkozni, azonban ez nem ajánlott. Érdemes minden képet a saját tárhelyünkön elhelyezni, ugyanis így biztosan mindig elérhetőek lesznek. Azon kívül, komolyabb oldalak esetén (site-ok), tanácsos külön könyvtárat létrehozni a képeknek, ha tudjuk, hogy sok lesz belőlük.

Képek elhelyezésére az oldalon két lehetőségünk van:
 - vagy a szövegen (bekezdésen) kívül helyezzük el,
 - vagy pedig a szöveggel egy sorba (bekezdés belsejébe)
.
Mindkét esetben más és más lesz a pozícionálás technikája.

1. Bekezdésen kívüli elhelyezés

Ebben az esetben a kép külön helyezkedik el a szövegtől, az <img> címke align paraméterével azt tudjuk megadni, hogy a képet hova zárjuk: balra, jobbra vagy középre:

left= balra igazított
right= jobbra igazított
center= középre zárt.

A szöveg körbefuttatása automatikus lesz.

Interaktív példa kép elhelyezésére a jobb oldalon:

2. Bekezdésen belüli elhelyezés

Itt a kép a szövegben helyezkedik el, hasonlóan a Microsoft Word "szöveggel egy sorba" beállítási lehetőségéhez. Ekkor is az align paraméterrel tudjuk a helyét meghatározni, azonban most a kép függőleges elhelyezését tudjuk megadni a szöveghez képest:

top= a szöveg tetejéhez igazodik
middle = középen helyezkedik el
bottom= a szöveg aljához igazodik.

Interaktív példa bekezdésen belüli képre:

Tovább a listák készítéséhez >>

Weblapprogramozás oktatása középiskolában - Készült: 2007