Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

Kép beillesztése - Az <img> tag

Ha képet szeretnél beilleszteni a HTML dokumentumodba, akkor azt az <img> vagy az <object> tagok segítségével teheted meg. Az <object> tag általános célt szolgál, videókat vagy például Java alkalmazásokat is beszúrhatsz vele az oldaladra. Az <img> tagot kifejezetten képek beillesztésére hozták létre.

Az <img> tagnak nincs zárótagja. Fontosabb attribútumai:
  • src: a kép elérési útja. Ugyan úgy adható meg, mint a linkek href attribútuma.
  • width: a kép szélessége.
  • height: a kép magassága.
  • alt: azt a szöveget tartalmazza, ami akkor jelenik meg, ha nem töltődött le a felhasználó számítógépére a kép. A HTML szabvány szerint kötelező megadni ezt az attribútumot.
  • title: a kép címe. Ha az egér a kép fölött áll, akkor az itt megadott szöveget kiírják a böngészők. (Ha a title attribútum nincs megadva, akkor a Microsoft Explorer böngészők az alt attribútum értékét jelenítik meg az egér kurzor alatt.)
  • id, class, style, onclick: általános attribútumok.
Leggyakrabban használt stílus tulajdonságok:
  • margó (margin)
  • keret stílus (border-style)
  • úsztatás (float) (ha kell, akkor a clear tulajdonsággal kombinálva)
  • szélesség (width), magasság (height): Ezek a stílus tulajdonságok ugyan azt a funkciót töltik be, mint az <img> tag azonos nevű attribútumai. Akkor lehet célszerű képek méreteit stíluslapon definiálni, ha egy oldalon több azonos méretű kép van beillesztve, vagy ha egy kép (például a weblapod logója) több oldalon is látható.

Példa egy kép beillesztésére:

<img src="rose.jpg" width="230" height="189"
   style="float: right" alt="Egy rózsa fényképe" title="Rózsa">

Ha a képet az eredeti méretében akarod megjeleníteni, akkor a szélességet és a magasságot nem kötelező megadni, de ajánlott. A böngésző programok a HTML fájlod letöltése után elkezdik megjeleníteni az oldaladat és elkezdik letölteni a képfájlt. Ha a böngésző csak a kép letöltése után ismeri meg annak méretét, akkor a már részben megjelenített oldalt újra kell terveznie. A weblapod olvasói ebből annyit látnak, hogy „ugrál” az oldal, ami alighanem zavarni fogja őket. Viszont ha a HTML kód vagy egy stíluslap tartalmazza a kép méretét, akkor azzal a böngésző tud számolni, és a weblapod összes eleme rögtön a végleges helyén jelenhet meg.

Az alt attribútum tartalma azok számára ad hasznos információt, akik nem láthatják a weboldalra beillesztett képet. (Például azért, mert a kép nem töltődött le a számítógépre. Vagy például egy vakok számára készült böngésző - amelyik felolvassa a weblapok tartalmát – valószínűleg nem is tölti le a fényképeket.) Ha olyan képet illesztesz be a weblapodra, ami nem a tartalom része, hanem dizájn célokat szolgál, akkor a szabvány ajánlása szerint az alt attribútum értékének egy üres sztringet kell megadni. Példa:

<img src="design_elem.gif" width="200" height="100" alt="">


Ajánlott kép formátumok »


Tőzsde és technikai elemzés érthetően