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 obrázku a uspořádat tok kolem textu s textem.

Nejprve o vkládání obrázku. Chcete-li to provést, existuje značka "img", která má několik atributů. Hlavní je "src". Uloží adresu, ze které prohlížeč může vložit obrázek. Můžete zadat 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 roztažení 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í odsazení a "vspace" je vertikální.

Značka má atributy jako "alt" a "title". Jsou podobná, protože jejich účelem je popsat obrázek. Ale "název" je písemný text, který se objeví, když umístíte ukazatel myši nad obrázek, a pokud se obraz nezdaří, zobrazí se písmenová hodnota atributu "alt".

Existuje několik specifických atributů, které jsou přítomné ve většině značek. Jedná se o "přístupový klíč", "třídu", "id" a "styl". "Accesskey" určuje klávesovou zkratku, podle které 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ý umožňuje zadat vestavěný obrázek ve stylu CSS.

Jedním z parametrů, které definují vzhled obrazu, je "ohraničení". 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 obrázku 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í vzhledem 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 kolem textového obrázku - 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ě prů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 snímků v dokumentu rovnajícím se deseti pixelům, stačí připojit k němu soubor CSS pouze s jedním řádkem: "img {margin: 10px 10px 10px 10px;}" (v praxi nejsou žádné citace potřebné!).

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, HTML poskytuje značku "styl", ve které můžete vložit kód CSS. Ale bude fungovat pouze pro tento dokument (pokud chcete přidat stejný kód do několika souborů HTML, měli byste vytvořit samostatný stylový list).

Nyní můžete "zředit" místo s obrázky 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 kolem obrázku. Webové stránky bez grafických komponent jsou poněkud nudné pohledy, ne?