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
Imatge HTML incrustant imatges a la pàgina web
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
- Imatge flotant
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
- 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 HTMLImatge 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.