Jak vytvořit textový obal kolem textu html?
Přítomnost obrázků na webových stránkách zlepšuje jejich vzhled, přitahuje pozornost a také přispívá k lepšímu vnímání textů. Obtékání textu s textem html umožňuje propojit obsah s obrázky a efektivně umístit materiál. Neustále se vyvíjejí nové způsoby vytváření obrazů, které umožňují ztělesňovat kreativní myšlenky. Současně jsou nové styly rozvržení založeny na stejných metodách, což vytváří neomezený rozsah představivosti.
Umístění snímků vzhledem k textu lze provést v html nebo pomocí vlastností CSS.
Html tagy: textový balicí text
Obrázky jsou umístěny na stránce třemi způsoby:
- centrální poloha;
- obalování textu;
- vložit do pole.
Při velké velikosti je obrázek umístěn uprostřed stránky, nejprve umístěn do kontejneru <p> tagu img, po němž je pro něj nastaven atribut = = centrum. Pokud často používáte obrázek, měli byste použít styl CSS na tag <p>.
Pokud je obrázek malý, vedle něj je umístěn text. Metoda je nejběžnější. Obalování textu se provádí několika způsoby. Nejprve musíte na obrazovce zobrazit obrázek. Pokud je cesta k němu známá, například "foto1.jpg", je vložena do html stránky pomocí následující položky:
<p> <img src = "foto1.jpg"> </ p>
Příklad odpovídá případu, kdy jsou soubory html a obrázek ve stejné složce.
Je-li obrázek následován textem, bude umístěn níže. To není vždy výhodné, protože na stranách budou prázdné mezery, proto je stránka navržena tak, aby vytvořila textový obal kolem obrázku html. Z tohoto důvodu značka img má atribut zarovnání, který definuje umístění fotografie nebo obrázku vzhledem k textu. Tento parametr určuje, od jakého okraje stránky se nachází grafický materiál a jak se kolem něj pohybuje text. 
Atribut lze nastavit na následující hodnoty:
- vlevo - obraz vlevo při přetažení textu vpravo;
- pravý obraz vlevo, když je umístěn vpravo;
- dolní - výchozí hodnota, když je obrázek vlevo, první řádek textu začíná na úrovni jeho spodní části;
- horní - obraz je umístěn podobně jako předchozí hodnota, ale první řádek je umístěn na jeho nejvyšší úrovni;
- střední - počáteční řádek textu běží naproti středu obrazu.
Značka img obsahuje parametry, které lze použít k nastavení vzdálenosti od textu na obrázek (hspace a vspace). Bez jejich aplikace bude text umístěn v blízkosti obrázku. Dále jsou vybrány rozměry šířky a výšky. Současně je třeba respektovat poměr mezi šířkou a výškou. Pokud nejsou dimenze nastaveny, ve výchozím nastavení je výkres převeden s velikostí zdrojového kódu, což není vždy vhodné.
Přesunutí obrázku doleva s obtékáním textu lze provést psaním:
<p> <img src = "foto1.jpg" align = "left" width = 150 výška = 100 hspace = 5 vspace = 5> Text </ p>
Aplikační tabulky
Obtékání textu s html textem je snadné dělat pomocí tabulky s obrazem uvnitř buňky. Zde je vlastnost zarovnána použita ke značce tabulky. Tabulky mají více řízených parametrů, což jim přináší výhody:
<šířka tabulky = 170 výška = 120 border = 0 align = left cellpadding = 0 cellspacing = 0>
<img src = "foto2.jpg" šířka = 150 výška = 100>
</ table>
Okraj tabulky je neviditelný a nedovoluje, aby se text přiblížil k obrázku. Mohou být upraveny odsazení mezi a uvnitř buněk.
Použití stylů
Z předcházejících příkladů vidíte, jak snadné je vytvořit obtékání textu kolem html textu. CSS vám umožňuje dosáhnout podobných výsledků. Wrap je vytvořen pomocí vlastnosti float. I zde je vyrovnání poskytováno hodnotami vlevo a vpravo. 
Pro tento účel je vytvořena třída a jsou jí přiděleny styly CSS:
<styl>
.fotoleft {
float: vlevo;
okraj: 5px 12px 3px 0px;
}}
</ style>
Pak je k img selektoru přidána vlastnost float style:
<img src = "foto1.jpg" třída = "fotoleft">
Kromě zarovnání obrázku pomocí hodnoty vlevo také nastavuje okraj textu z obrázku podle vlastnosti okrajů. Stejně tak se obalování textu vlevo provede, pokud je použita správná vlastnost.
Styly umožňují překrýt text přímo na obrázku. K tomu je text vložen do bloku s poloprůhledným pozadím, které je na obrázku uloženo.
Není tak obtížné vytvářet dramatický textový obal a jeho uložení na obrázky, protože to je dosaženo následnými experimenty.
Obalování kulatých obrázků s html textem
Webové stránky se skládají převážně z obdélníkových oblastí. Každý ví, jak vytvořit textový obalový text v html. Styly se používají k vytváření geometrických tvarů, ale nesouvisejí s položením obsahu uvnitř nebo vně prvků. Výkres je možné rozdělit na 2 části a na obou stranách umístit bloky odsazení různých šířek. Za nimi je text.
Proces vytváření takového toku je časově náročný a musí se provádět zvlášť pro každý nový vzorec.
Text obtékat složité tvary
Rozvojem nové specifikace CSS dokázal Shapes ovlivnit stávající návrh a poskytnout mu nové perspektivy. Nyní může obsah obtékat složité tvary a zakřivené oblasti.
Specifikace je podporována prohlížečem Chrome Canary a nyní se ji pokouší implementovat i do ostatních. Umožňuje vytvářet složité návrhy bez pomoci grafických editorů. 
Obálka html kolem kulatého obrázku je opatřena následující položkou:
#circle
{{
tvar-vnější: kruh (-300px, -300px, 300px); / * (x, y, poloměr) * /
float: vlevo;
}}
<p> Ukázkový text </ p>
Kód vytvoří kruh, který je dokonale zabalen v textu.
Podobně se vytvoří jakýkoliv nepravidelný tvar díky podpoře Photoshopu, která umožní získat kód tvaru CSS.
Závěr
Při vytváření rozvržení stránek pomocí různých způsobů umísťování obrázků a textu na ně můžete vytvořit jedinečný design. Chcete-li to udělat, musíte zvládnout základní pravidla rozložení, které zajistí, že text je zabalen kolem textu pomocí html.