Mik azok a HTML képek és hogyan lehet módosítani a weboldaladat?

Ez a cikk részletes és átfogó ismereteket nyújt Önnek a HTML képekről, valamint arról, hogy miként tudja hozzáadni és módosítani a weblapot.

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

 Edureka logó
HTML kép képek beágyazása a weboldalra edureka logó 

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  

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 A kép a szövegtől jobbra fog lebegni. A kép a szöveg bal oldalán fog lebegni.

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ép

Há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.