Què són les imatges HTML i com es pot modificar la pàgina web?



Aquest article us proporcionarà un coneixement detallat i exhaustiu de les imatges HTML i de com podeu afegir-la i modificar-la perquè la vostra pàgina web tingui un bon aspecte.

Les imatges són una part molt important d’una pàgina web, ja que millora l’aspecte d’una pàgina web i augmenta la interacció dels clients. El USP de diversos llocs web és com organitzen diferents imatges a les seves pàgines web i hi afegeixen sabors. En aquest Article sobre imatges, entendreem com inserir imatges en una pàgina web mitjançant HTML en el següent ordre:

Com afegir imatge en HTML

Per incrustar una imatge en una pàgina web us proporciona HTML etiqueta. Un altre punt important que cal recordar és: no té cap etiqueta de tancament. scr L'atribut s'utilitza per especificar el camí de la imatge, que pot ser un URL o camí de la imatge des del sistema / servidor. Comencem primer per la sintaxi bàsica d’incorporar imatge en una pàgina web mitjançant HTML.





Sintaxi

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

Codi de mostra



Imatge HTML incrustant imatges a la pàgina web  

De manera similar a altres etiquetes, hi ha diversos atributs associats etiqueta. Vegem cadascun d'ells un per un, comprenem la seva necessitat i com utilitzar-los.

Etiquetes d'imatges HTML

  • alt Atribut

L'atribut alt és el text alternatiu d'una imatge. La raó per la qual es va introduir l'atribut alt és que, per algun motiu, la imatge no es va poder carregar, hauria d'aparèixer un text alternatiu que donés una idea sobre la imatge. Els motius pels quals la imatge no es carrega poden ser una connexió a Internet lenta o la imatge no resideix a la font proporcionada, etc.



Si la imatge resideix a la mateixa carpeta on es troba el fitxer HTML, podeu especificar el nom del fitxer directament. En cas contrari, heu de proporcionar la ruta absoluta del fitxer d'imatge.

El valor de l'atribut alt ha de descriure la imatge.

Exemple

 Logotip Edureka
Imatge HTML incrustant imatges a la pàgina web logotip d’edureka 

keyerror: 'a'
  • Amplada i alçada d’una imatge

L'atribut Style s'utilitza per definir l'alçada i l'amplada d'una imatge. A l'atribut style, especifiqueu l'estil CSS.

Imatge HTML incrustant imatges a la pàgina web  

Alguns dels punts importants en inserir una imatge en una pàgina web mitjançant HTML són:

  • Els atributs d'amplada i alçada es defineixen en píxels.
  • També podeu definir l'amplada i l'alçada d'una imatge en percentatge. Es considerarà el percentatge segons tota la pàgina web.
   
  • Si només n'especifiqueu un, s'ajustarà l'altre en conseqüència.
  • Inserció d'imatges mitjançant URL

L'HTML també us proporciona la flexibilitat per triar la imatge d'un altre servidor només especificant l'URL. Podeu utilitzar un servidor independent per allotjar les imatges i, a continuació, incrustar-les amb URL.

Imatge HTML incrustant imatges a la pàgina web  

  • Imatge com a enllaç

També podeu utilitzar la imatge com a enllaç on l'usuari pot fer clic a la imatge i aterrar-se en una nova pàgina web. Per fer-ho, només cal posar el fitxer dia etiqueta.

Imatge HTML incrustant imatges a la pàgina web  

També podeu ajustar l'alineació de la imatge mitjançant la propietat flotant CSS. Cal especificar tota la propietat CSS a l'atribut style.

què és l'abstracció en c ++
Imatge HTML La imatge flotarà a la dreta del text. La imatge flotarà a l'esquerra del text.

  • Mapes d’imatges

Aquesta és una de les funcions importants que proporciona HTML. tag ajuda a definir un mapa d’imatges. Us heu de preguntar què és un mapa d’imatges. Una imatge-mapa és una imatge amb àrees on es pot fer clic

Imatge HTML  
  • Imatge de fons

També podeu afegir una imatge de fons a una pàgina web. Només heu d’utilitzar la propietat CSS, és a dir, imatge de fons a l’etiqueta d’estil i afegir-la a l’element HTML.

Imatge HTML

Imatge de fons

Element BODY

Amb això, arribem al final d’aquest bloc d’imatges HTML.Ara, després d’executar els fragments anteriors, hauríeu entès com inserir imatge en HTML. Espero que aquest bloc us sigui informatiu i de valor afegit.

Consulteu el nostre que inclou formació en directe dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web d’interfície i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'Imatges HTML' i us respondrem.