Obrázky pridávajú život na vaše webové stránky a upútajú 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.
Kroky k titulku obrázka HTML
-
Pridajte obrázok na svoju webovú stránku.
-
V HTML pre vašu webovú stránku umiestnite značku div okolo obrázku:
-
Pridať atribút štýlu do značky div:
style = ""> -
Nastavte šírku objektu div na rovnakú šírku ako obrázok so vlastnosťou štýlu šírky:
-
Pre titulky, ktoré sú o niečo menšie ako okolitý text, pridajte vlastnosť veľkosti písma štýlu div:
-
Titulky najlepšie vyzerajú, ak sú umiestnené pod obrázkom, takže do atribútu štýlu pridajte vlastnosť text-align:
-
Nakoniec pridajte medzi obrázok a titulok trochu väčšieho priestoru pridaním atribútu štýlu do obrázka s vlastnosťou štýlu políčka padding:
style = "padding-bottom: 0.5em;" />
-
Potom pridajte textový popisok priamo pod obrázkom:
Nahrajte webovú stránku na server a otestujte ju v prehliadači.
Tipy na titulky
- Rozmery CSS môžu byť v mnohých rozdielnych meraniach, takže zvyčajne musíte zahrnúť typ merania. Napríklad:
šírka: 100px; 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 titulkom a za značkou obrázka.
