Obrázky přidávají život na vaše webové stránky a přitahují pozornost diváků. Titulky poskytují další informace o vašich webových obrázcích, ale mohou být obtížné přidat na webové stránky bez pokročilých dovedností HTML a CSS. Zde je spolehlivá metoda pro přidání jednoduchého, ale přitažlivého titulku k obrazu, který zůstane s obrázkem, ať jste ho přesunuli na webovou stránku.
Kroky k popisu HTML obrázku
-
Přidejte obrázek na svou webovou stránku.
-
V kódu HTML webové stránky umístěte značku div kolem obrázku:
-
Přidejte atribut stylu do tagu div:
styl = ""> -
Nastavte šířku divu na stejnou šířku jako obrázek s vlastností šířky stylu:
-
Pro titulky, které jsou o něco menší než okolní text, přidejte vlastnost velikost písma do stylu div:
-
Titulky vypadají nejlépe, pokud jsou umístěny dole pod obrázkem, takže do atributu styl přidejte vlastnost text-align:
-
Konečně přidejte mezi obrázek a titulky ještě další prostor přidáním atributu stylu k obrázku s vlastností stylu dolního padding:
style = "padding-bottom: 0.5em;" />
-
Poté přidejte textový popis přímo pod obraz:
Nahrajte webovou stránku na server a vyzkoušejte jej v prohlížeči.
Tipy pro popis titulků
- Rozměry CSS mohou být v mnoha různých rozměrech, takže obvykle musí obsahovat typ měření. Například:
šířka: 100px; Rozměry obrázku HTML jsou však vždy v pixelech, takže měření necháte vypnuté.
šířka = "100"
- Pokud vytvoříte šířku širší než šířku obrázku, vedle obrázku se může zobrazit titulky. Pokud to chcete, přidejte a
značku přímo před titulkem a po značce obrázku.
