A képek a weboldal nagyon fontos részét képezik, mivel javítják a weboldal megjelenését és növelik az ügyfelek interakcióját. A több webhely USP-je az, hogyan rendeznek különböző képeket a weboldalukon és adnak hozzá ízeket. Ebben Képek című cikkben megértjük, hogyan kell beágyazni a képeket egy weboldalba HTML használatával a következő sorrendben:
Kép hozzáadása HTML-be
Kép beágyazása egy weboldalba a HTML megadja címke. Egy másik fontos dolog, amire emlékezni kell,
nincs záró címkéje. scr attribútum a kép elérési útjának megadására szolgál, amely URL vagy kép elérési út lehet a rendszerből / szerverről. Kezdjük először azzal, hogy a kép HTML-t használó weboldalakba való beágyazása alapvető szintaxissal rendelkezik.
Szintaxis
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Minta kód
HTML kép képek beágyazása a weboldalra
A többi címkéhez hasonlóan különféle attribútumok vannak társítva címke. Nézzük meg mindegyiket egyenként, értjük meg szükségüket és hogyan kell használni őket.
HTML Képek címkék
- alt Attribútum
Az alt attribútum a kép alternatív szövege. Az alt attribútum bevezetésének oka az, hogy ha a kép bármilyen okból nem tud betöltődni, akkor egy alternatív szövegnek kell megjelennie, amely képet ad a képről. A kép nem töltődésének oka lehet lassú internetkapcsolat, vagy a kép nem a megadott forrásban található stb.
Ha a kép ugyanabban a mappában található, ahol a HTML fájl található, akkor közvetlenül megadhatja a fájl nevét. Ellenkező esetben megadja a képfájl abszolút elérési útját.
Az alt attribútum értékének le kell írnia a képet.
Példa
HTML kép képek beágyazása a weboldalra
rubin a síneken webalkalmazás
- Kép szélessége és magassága
A Stílus attribútum a kép magasságának és szélességének beállítására szolgál. A style attribútumban megadhatja a CSS stílusát.
HTML kép képek beágyazása a weboldalra
Néhány fontos szempont, miközben HTML-t használva beágyaz egy képet egy weboldalba:
- A szélesség és magasság attribútumokat pixelben határozzák meg.
- A kép szélességét és magasságát százalékban is meghatározhatja. Meg fogja vizsgálni a százalékot a teljes weboldal szerint.
- Ha csak az egyiket adja meg, akkor a másik ennek megfelelően állítja be.
- Képek beágyazása URL használatával
A HTML azt a rugalmasságot is biztosítja, hogy az URL megadásával kiválaszthatja a képet egy másik szerverről. Külön szervert használhat a képek tárolására, majd az URL használatával beágyazhatja ezeket a képeket.
HTML kép képek beágyazása a weboldalra
- Kép linkként
Használhatja a képet linkként is, ahol a felhasználó rákattinthat a képre, és egy új weboldalra juthat. Ehhez csak fel kell tenned a nap címke.
HTML kép képek beágyazása a weboldalra
- Kép lebeg
A kép igazítását a CSS float tulajdonság segítségével is módosíthatja. Az összes CSS tulajdonságot meg kell adni a stílus attribútumban.
HTML kép
- Képtérképek
Ez az egyik fontos funkció, amelyet a HTML nyújt. tag segít meghatározni egy kép-térképet. Biztosan kíváncsi, hogy mi a képtérkép. A képtérkép kattintható területekkel rendelkező kép
mi sorolható a java-ban
HTML kép
- Háttérkép
Háttérképet is hozzáadhat egy weboldalhoz. Csak a CSS tulajdonságot, azaz a háttérképet kell használnia a stíluscímkében, és hozzá kell adnia a HTML elemhez.
HTML képHáttérkép
BODY elem
Ezzel véget értünk ennek a HTML Képek Blognak.A fenti kivonatok végrehajtása után megértette, hogyan kell képet beilleszteni a HTML-be. Remélem, hogy ez a blog informatív és hozzáadott értéket jelent Önnek.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a „HTML Images” blog megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.