Pridajte webovú titulku, ktorá zostáva s jej obrazom

Pridať HTML titulky na webové obrázky v 9 jednoduchých krokoch

Obrázky pridávajú život na vaše webové stránky a upútavajú pozornosť divákov. Titulky poskytujú ďalšie informácie o vašich webových obrázkoch, ale je ťažké ich pridať na webové stránky bez pokročilých zručností v oblasti HTML a CSS. Tu je spoľahlivá metóda na pridanie jednoduchého, ale atraktívneho titulku k obrázku, ktorý zostáva s obrázkom, nech sa presunie na webovú stránku.

9 krokov k titulku obrázka HTML

Pridajte titulok k obrázku a presuňte ho všade tam, kde chcete:

1. Pridajte obrázok na svoju webovú stránku.
2. V HTML pre vašu webovú stránku umiestnite značku div okolo obrázku:
3. Pridajte atribút štýlu do značky div:
   style = "text"
4. Nastavte šírku objektu div na rovnakú šírku ako obrázok s vlastnosťou štýlu šírky :
   šírka: šírka obrazu px; ">
5. Pre titulky, ktoré sú o niečo menšie ako okolitý text, pridajte vlastnosť veľkosti písma štýlu div:
   veľkosť písma: 80%; ">
6. Titulky vyzerajú najlepšie, ak sú umiestnené pod obrázkom, takže pridajte vlastnosť text-align do atribútu štýlu:
   text-align: center; img src = "URL" alt = "alternatívny text" šírka = "šírka" výška = "výška" />
7. Nakoniec pridajte medzi záber a titulok trochu väčšieho priestoru pridaním atribútu štýlu do obrázka s vlastnosťou štýlu výplne :
   style =" padding-bottom: 0.5em; " />

1. Potom pridajte popis textu priamo pod obrázkom:
   Toto je môj titulok

Nahrajte webovú stránku na server a otestujte ju v prehliadači.

Tipy na titulky

• Šírka : Rozmery CSS môžu byť v mnohých rozdielnych rozmeroch, takže zvyčajne musí obsahovať typ merania. Napríklad: šírka: 100 px ; Rozmery obrázka HTML sú však vždy v pixeloch, takže meranie ponecháte vypnuté. width = "100"
• Ak vytvoríte šírku divu širšiu ako šírka záberu, titulok sa môže zobraziť vedľa obrázka. Ak to chcete, pridajte značku
  priamo pred titulok a za značku obrázka.