Les imatges afegeixen vida a les vostres pàgines web i criden l'atenció dels espectadors. Els subtítols proporcionen informació addicional sobre les imatges web, però poden ser difícils d'afegir a pàgines web sense habilitats avançades d'HTML i CSS. Aquí teniu un mètode confiable per afegir un títol senzill però atractiu a una imatge que es mantingui amb la imatge allà on la mous a la pàgina web.
Passos a un subtítol d'imatges HTML
-
Afegiu una imatge a la vostra pàgina web.
-
Al codi HTML de la vostra pàgina web, col·loqueu una etiqueta div a la imatge:
-
Afegiu un atribut d'estil a l'etiqueta div:
style = ""> -
Estableix l'amplada del div al mateix ample que la imatge, amb la propietat d'estil d'amplada:
-
Per als títols lleugerament més petits que el text que l'envolta, afegiu una propietat de mida de font a l'estil div:
-
Els subtítols es veuen millor si estan centrats a sota de la imatge, així que afegiu una propietat d'alineació de text a l'atribut d'estil:
-
Finalment, afegiu una mica d'espai extra entre la imatge i el títol, afegint un atribut d'estil a la imatge amb una propietat d'estil de farciment inferior:
style = "padding-bottom: 0.5em;" />
-
A continuació, afegiu el títol del text directament a sota de la imatge:
Pengeu la pàgina web al vostre servidor i proveu-lo en un navegador.
Consells de subtitulació
- Les dimensions CSS poden ser en diferents mesuraments, de manera que normalment cal incloure el tipus de mesura. Per exemple:
ample: 100px; Tanmateix, les dimensions d'imatge HTML sempre estan en píxels, de manera que deixeu de banda la mesura.
width = "100"
- Si fa que l'amplada del div sigui més ample que l'ample de la imatge, el títol pot aparèixer al costat de la imatge. Si això és el que voleu, afegiu-ne un
marqueu directament abans de la llegenda i després de l'etiqueta d'imatge.
