Ha csak szöveget szúrunk be weboldalunkra, akkor azok nagyon egyszerűek és nem túl világosak. Éppen ezért a HTML-ben képesek vagyunk képeket beilleszteni.
A képek a weboldal reprezentatív elemei vagy díszítő elemek lehetnek. Bár dekoratív elemekként CSS-t kell használnunk, hogy beillesszük őket weboldalunkba.
A weboldalon belüli képek használatát körültekintően kell elvégezni, mivel a weboldalunkon elhelyezett minden kép megnöveli az oldal méretét (súlyát). Ezért ez befolyásolja az oldal letöltési idejét.
Kép beszúrása: Az img elem
Kép HTML-beillesztéséhez megvan az img elem, amelynek alapvető szintaxisa:
Mint láthatjuk, az img elem egyszerű elem, tehát nincs bezáró eleme, és a visszavágással végződik.
Az img elem fő attribútuma az src a kép elérési útját jelöli. Így, ha a kép ugyanazon az úton van, mint a weboldalunk, akkor a következőket tesszük:
A kép akár egy másik szerveren is elhelyezkedhet. Ebben az esetben a képet tartalmazó URL-nek meg kell jelölnie a képet tároló protokollt és szervert. Például a következő kóddal rendelkezhetünk:
A kép méretei: szélesség és magasság
Ha nem adunk meg többet az img elemről, akkor az a kép, amelyet átadtunk az src mezőjében, betölti eredeti méretét.
Bár rendelkezünk a szélesség attribútumokkal a kép szélességéhez és a magassághoz a kép magasságához. Ily módon, ha azt akarjuk, hogy a képünk 100x100 képpontban legyen látható, beilleszthetjük a következő kódot:
A képméret megadható pixelben vagy százalékban. Az egység kihagyása esetén a képpontot kell használni.
A hálók betöltésekor teljesítmény okokból mindig jó megadni szélességük és magasságuk értékét.
Kép alt szövege: az alt és a longdesc attribútum
Egy képen alternatív vagy leíró szöveget jelölhetünk. Ehhez megvan az alt attribútum.
Egy másik hasznos dolog, amikor oldalunkat láthatósági problémákkal küzdő fogyatékkal élő emberek használják. Ebben az esetben ezek az emberek olyan eszközökkel rendelkeznek, amelyek elolvassák az oldalt, és amikor egy képhez érnek, elolvassák az alt attribútumban talált tartalmat.
Ezért a képbe illesztett alternatív szövegnek meglehetősen leírónak kell lennie. Bizonyos esetekben a kép méretét jelzik.
Képformátumok típusai
Ezen a ponton van egy kis problémánk, és az, hogy a HTML-szabványok nem határozzák meg a webböngészőben látható képformátum típusait.
A leggyakrabban elfogadott képformátumok a következők:
- A diéta során kapott képek garantálják az Ön sikerét
- A büntetés képei, amelyet Maxim Dadašev ökölvívó kapott a küzdelemben, amely a
- Boldog éjszakát és édes álmokat - Képeket kifejezésekkel megosztani a WhatsApp-on, hogy jókívánságokat kívánjon
- Új képek vannak Robert Pattinsonról, mint Batman, de vajon Edward Cullen az, aki felkapott-e?
- A geg törvény megszünteti a rendőrség képeinek terjesztését