Pro začátečníky: jak nakreslit text kolem obrázku

V tomto článku vám řekneme o funkcích HTML a CSS, které jsou spojeny s obrázky. Naučíte se, jak je vložit do dokumentu HTML. Také v článku najdete informace o tom, jak změnit parametry obrazu a uspořádat tok kolem textu s textem.

Nejprve o vkládání obrázku. K tomu je značka "img" který má několik atributů. Hlavní je "src". Uloží adresu, ze kterého prohlížeč může vložit obrázek. Můžete určit cestu k obrázku již uloženému v počítači nebo vytvořit odkaz na webový zdroj.

Další důležitý pár atributů je "šířka" a "výška". Používají se k ruční změně velikosti obrázku (užitečná volba pro roztahování a kompresi obrazu).

Dále parametry "hspace" a "vspace" (vzdálenost od obrazu k okolnímu textu). Je zřejmé, že "hspace" je horizontální odrážka a "vspace" je vertikální.

Značka má atributy jako "alt" a "title". Jsou vzájemně podobné, protože jejich účelem je popsat obrázek. V hlavičce se však objeví text, který se zobrazí, když umístíte ukazatel myši nad obrázek a pokud se obrázek nezdaří, zobrazí se písmenová hodnota atributu "alt".

Existuje několik specifických atributů, které se vyskytují ve většině značek. Jsou to "accesskey", "class", "id" a "style". Sada "Accesskey" nastavuje kombinace kláves, s nimiž je objekt přístupný. "Třídy" a "id" jsou parametry související s CSS. Popisují, do které třídy patří obrázek (nebo její identifikátor). "Styl" je textový atribut, který vám umožňuje určit vestavěný obrázek ve stylu CSS.

Jedním z parametrů určujících vzhled obrazu je "hranice". Určuje tloušťku rámečku kolem objektu a může být zadán libovolným kladným číslem (v pixelech).

Dalším atributem je "zarovnání". Popisuje tok kolem obrazu s textem. Tento parametr může mít hodnoty "spodní", "střední", "vlevo", "vpravo" a "horní". Každá z hodnot určuje, kde bude obrázek relativní k textu. Pokud je například hodnota "uprostřed", bude střední část obrázku zarovnána v dolní části textu a při "levém" - objekt bude na levé straně textu. Ale je to jen jeden způsob, jak nastavit tok textu kolem textu - HTML.

Existuje další silný nástroj - CSS (mnohem více všestranný). S jeho pomocí můžete efektivněji nastavit atributy značky, včetně toku kolem textového obrázku. CSS umožňuje definovat parametry nejen určitého objektu, ale všechny podobné. Například pokud chcete zadat odsazení všech obrázků v dokumentu je deset bodů, stačí připojit k CSS-soubor, s jedním stehem „img {margin: 10px 10px 10px 10px;}“ (v praxi, citace nejsou potřeba!).

A tok kolem obrázku s textem, například na levé straně, je nastaven takto: "img {align: left;}".

Mimochodem, přidání kódu CSS nemusí zapisovat do souboru. Chcete-li to provést, poskytuje HTML značku "styl", ve které můžete vložit kód CSS. Ale bude fungovat pouze pro tento dokument (chcete-li přidat stejný kód do několika souborů HTML, měli byste vytvořit samostatný stylový list).

Nyní můžete "zředit" stránky pomocí obrázků pomocí užitečných vlastností značky, která je za to zodpovědná. Nebojte se aplikovat změnu velikosti nebo obtékání textu po obraze. Webové stránky bez grafických komponent jsou poněkud nudné, ne?