Obrázky jsou důležitou součástí webdesignu, protože zlepšují estetický dojem a zaujmou uživatele. Obrázky samy o sobě však nemusí vždy poskytnout požadované sdělení. V této situaci jsou užitečné popisky. Aby byl obrázek srozumitelnější a přístupnější, popisky nabízejí stručné shrnutí nebo vysvětlení obrázku. V tomto tutoriálu se budeme zabývat tím, jak vytvářet popisky k obrázkům v jazyce HTML, konkrétně v jazyce HTML5.
Prvky „figure>“ a „figcaption>“ jazyka HTML5 byly vytvořeny výslovně pro popisky obrázků. Obrázek nebo jiný grafický materiál je obsažen v elementu „figure>“, zatímco popisek k tomuto obsahu je určen elementem „figcaption“. Podívejme se, jak to provést.
„“html
„Krásná krajina“ img src=“image.jpg“ alt=““ *
figcaption>Tato úchvatná scéna byla vyfotografována za soumraku.
;; Obrázek
„`
Atribut’src‘ ve výše uvedeném úryvku kódu určuje soubor obrázku, zatímco atribut’alt‘ poskytuje alternativní text pro zpřístupnění. Element ‚img>‘ představuje skutečný obrázek. Obsah popisku je obsažen v elementu ‚figcaption>‘, který je umístěn hned za elementem ‚image>‘.
Kromě prvků „figure“ a „figcaption“ můžete titulek stylovat pomocí CSS a změnit tak jeho vzhled. K vytvoření požadovaného vzhledu můžete použít mnoho vlastností CSS, jako je velikost písma, barva, zarovnání a výplň. Například: style>
“’html
Obrázek s textem zarovnaným na střed, velikostí písma 14 bodů, barvou #666 s výplní 5 bodů a popiskem figure.
„`
Nyní se věnujme příslušnému dotazu „Jak přidat citaci v jazyce HTML?“. K vložení citace lze v jazyce HTML použít prvek ‚blockquote>‘. Tímto prvkem se označuje část citovaného obsahu. Zde je ilustrační příklad: “’html“‘
“’blockquote“‘
Přísloví říká: „Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte“. Stephen Jobs
– Konec blockquote
„`
Skutečný citát je obsažen v elementu ‚blockquote>‘ ve výše uvedeném úryvku kódu a je reprezentován elementem ‚p>‘. Ten usnadňuje oddělení citované informace od zbytku textu a v případě potřeby aplikuje správné formátování.
Závěrem lze říci, že přidání prvků „figure>“ a „figcaption>“ do jazyka HTML5 učinilo z přidávání popisků k obrázkům v jazyce HTML jednoduchou záležitost. Srozumitelnost a přístupnost fotografií můžete zlepšit jejich uzavřením do elementu „figure>“ a přidáním popisku pomocí elementu „figcaption>“. Kromě toho vám element „blockquote>“ v jazyce HTML umožňuje zahrnout do webového obsahu citace. Moudrým používáním těchto prvků můžete vytvářet atraktivní a vzdělávací webové stránky.
K přidání textu na stranu obrázku lze použít prvky „figure“ a „figcaption“ v jazyce HTML. Zde je návod, jak na to: 1. Umístěte text a obrázek do elementu „figure“. Obrázek s popiskem je příkladem samostatného obsahu, který je reprezentován prvkem „figure“.
2. Vložte prvek „img“ do prvku „figure“. Chcete-li zobrazit požadovaný obrázek, upravte zdroj a další atributy prvku „img>“. 3. Za prvek „img“ přidejte prvek „figcaption“. Tento prvek slouží k označení obrázku popiskem nebo popisem. 4. Vyplňte prvek „figcaption>“ textem podle vlastního výběru.
To demonstrate the procedure, consider the following sample of code: Figure:
„“html
IMG SRC=“image.jpg“ ALG=“Description of the Image“ *
figcaption>The image’s caption is as follows.
;; Figure
„`
By adopting this structure, the caption and image will be presented simultaneously, with the caption depending on the available space being either below or beside the image.
The HTML ‚img>‘ tag and some CSS style can be used to show an image inline with text. Here’s an illustration: !DOCTYPE html>
“’html
.image-with-text img
vertical-align: middle;
margin-right: 10px;
.image-with-text img
display: inline-block;
/style>
div class=“image-with-text“>
Images with the src=“path/to/your-image.jpg“ and alt=“Image“
Your text should appear here.
„`
Na tomto obrázku jsou obrázek a text umístěny v kontejneru zvaném „div“ s třídou „image-with-text“. Kontejner se může zarovnat s okolním textem díky atributu „display: inline-block“, který zajišťuje, že se chová jako inline element.
Umístění souboru s obrázkem by mělo být zadáno v elementu’src‘ tagu ‚img>‘, který se používá pro vkládání obrázků. Pokud se obrázek nenačte nebo pro čtečky obrazovky, atribut ‚alt‘ uvádí alternativní text.
Stylování obrázku a textu je určeno pravidly CSS v části „style“ elementu „head“. Text i obrázek jsou vertikálně zarovnány na střed kontejneru pomocí atributu’vertical-align: middle‘. Text a obrázek jsou poněkud odděleny atributem’margin-right‘.
Zarovnání, odstupy a další estetické prvky můžete upravit tak, aby vyhovovaly vašim jedinečným požadavkům, a to úpravou atributů CSS.