Jak zabalit text kolem obrázku

Podívejte se na libovolnou webovou stránku a uvidíte kombinaci textového obsahu a obrázků. Oba tyto prvky jsou důležitými složkami úspěchu webové stránky. Obsah textu je to, číst návštěvníci stránek a jaké vyhledávací stroje budou používat jako součást svých algoritmů pro hodnocení. Obrázky přidávají vizuální zájem o stránky a pomáhají zdůrazňovat obsah textu.

Přidávání textu a obrázků na webové stránky je snadné. Text je přidán se standardními značkami HTML, jako jsou odstavce, nadpisy a seznamy, zatímco obrázky jsou umístěny na stránce s prvkem . Jakmile však přidáte obrázek na svou webovou stránku, pravděpodobně budete chtít mít textový tok vedle obrázku, než aby byl zarovnán pod ním (což je výchozí způsob, jakým se v prohlížeči zobrazí obrázek přidaný do kódu HTML). Z technického hlediska můžete tento vzhled dosáhnout dvěma způsoby, a to buď pomocí CSS (doporučeno) nebo přidáním vizuálních instrukcí přímo do HTML (nedoporučuje se, protože chcete zachovat oddělení stylu a struktury pro vaše webové stránky).

Použití CSS

Správný způsob, jak změnit způsob rozložení textu a obrázků stránky a jak se v prohlížeči objevují vizuální styly, je pomocí CSS . Jen si pamatujte, protože mluvíme o vizuální změně na stránce (tok textu kolem obrazu), to znamená, že to je doména kaskádových stylových listů.

1. Nejprve přidejte obrázek na svou webovou stránku. Nezapomeňte vyloučit jakékoliv vizuální charakteristiky (například hodnoty šířky a výšky) z tohoto HTML. To je důležité, zejména pro citlivé webové stránky, kde se velikost obrázků bude lišit podle prohlížeče. Některý software, jako je Adobe Dreamweaver, přidá informace o šířce a výšce obrázkům, které jsou vloženy s tímto nástrojem, a proto je nutné tyto informace odstranit z kódu HTML! Ujistěte se však, že máte k dispozici příslušný alt text . Zde je příklad toho, jak může vypadat váš HTML kód:
2. Pro stylingové účely můžete k obrázku přidat také třídu. Tato hodnota třídy je to, co použijeme v našem souboru CSS. Všimněte si, že hodnota, kterou zde používáme, je libovolná, i když pro tento konkrétní styl používáme hodnoty "levého" nebo "správného", v závislosti na tom, jakým způsobem chceme, aby se náš obraz vyrovnal. Zjistili jsme, že jednoduchá syntaxe funguje dobře a je snadná pro ostatní, kteří budou muset v budoucnu spravovat stránky, aby pochopili, ale můžete jim dát jakoukoli hodnotovou hodnotu, kterou chcete.
   2. Samotná hodnota této třídy nic neudělá. Obraz nebude automaticky zarovnán na levé straně textu. Za tímto účelem se nyní musíme obrátit na náš soubor CSS.

1. Ve stylu můžete nyní přidat následující styl:
   1. .vlevo, odjet {
   2. plavat vlevo;
   3. polstrování: 0 20px 20px 0;
   4. }}
   5. Co jste zde udělali, je použití vlastností CSS "float" , které vytáhne obraz z normálního toku dokumentů (způsob, jakým by se obraz normálně zobrazoval s textem zarovnaným pod ním) a zarovná ho s levou stranou kontejneru . Text, který se po něm objeví v označení HTML, se nyní obklopuje. Také jsme přidali některé hodnoty polstrování tak, aby tento text nebyl přímo proti obrazu. Namísto toho bude mít nějaké pekné rozestupy, které budou vizuálně atraktivní v návrhu stránky. Ve zkratce CSS pro vycpávky jsme přidali 0 hodnot na horní a levou stranu obrázku a 20 pixelů doleva a dole. Nezapomeňte, že musíte přidat nějaké polstrování na pravé straně levého zarovnaného obrázku. Pravý zarovnaný obrázek (který se budeme na chvíli podívat) by měl na jeho levé straně vycpávky.
2. Pokud prohlížíte svou webovou stránku v prohlížeči, nyní byste měli vidět, že váš obrázek je zarovnán s levou stranou stránky a text se jí pečlivě zalomí. Jiným způsobem, jak říci, je, že obraz je "vlevo".

1. Chcete-li změnit tento obrázek tak, aby byl zarovnán vpravo (jako na příkladu fotografie, který je připojen k tomuto článku), bylo by to jednoduché. Nejprve se musíte ujistit, že kromě stylu, který jsme právě přidali do našeho CSS pro třídní hodnotu "left", máme také jeden pro zarovnání vpravo. Bude to vypadat takto:
   1. .že jo {
   2. float: vpravo;
   3. polstrování: 0 0 20px 20px;
   4. }}
   5. Vidíte, že je to téměř totožné s prvním psaným CSS. Jediným rozdílem je hodnota, kterou používáme pro vlastnost "float" a hodnoty polštářů, které používáme (přidání některých na levé straně obrázku namísto vpravo).
2. Konečně byste změnili hodnotu tříd obrázků z "doleva" na "vpravo" v kódu HTML:
3. Podívejte se nyní na svou stránku v prohlížeči a váš obrázek by měl být zarovnán napravo s textem, který by se kolem něj obklopil. Máme tendenci přidávat oba tyto styly, "levý" a "správný", do všech našich stylů, abychom mohli tyto vizuální styly používat, když vytváříme webové stránky. Tyto dva styly se stávají příjemnými a opakovaně použitelnými funkcemi, na které se můžeme obrátit, kdykoli potřebujeme stylovat obrázky s obtékáním textu kolem nich.

Používání kódu HTML namísto CSS (a proč byste neměli dělat)

I když je možné zabalit text kolem obrázku pomocí HTML, webové standardy diktují, že CSS (a výše popsané kroky) jsou způsob, jak jít, abychom udrželi separaci struktury (HTML) a stylu (CSS). To je obzvláště důležité, když se domníváte, že u některých zařízení a rozvržení nemusí být tento text kolem obrazu. U menších obrazovek může mít rozložení citlivé webové stránky požadavek, aby se text skutečně zarovnal pod obrázkem a aby se obraz rozložil na celou šířku obrazovky. To lze snadno provést pomocí dotazů na média, pokud jsou vaše styly odděleny od značky HTML. V dnešním světě s více zařízeními, kde se obrázky a text objeví odlišně pro různé návštěvníky a na různých obrazovkách, je toto oddělení nezbytné pro dlouhodobý úspěch a správu webové stránky.