Kako ustvariti ovijanje besedila okoli besedila html?
Prisotnost slik na spletnih straneh izboljšuje njihov videz, pritegne pozornost in prispeva k boljšemu dojemanju besedil. Zavijanje besedila z besedilom html omogoča povezavo vsebine z ilustracijami in učinkovito postavitev gradiva. Nenehno razvijamo nove načine ustvarjanja podob, ki omogočajo uteleševanje ustvarjalnih idej. Hkrati pa novi slogovni načrti temeljijo na enakih metodah, kar ustvarja neomejeno količino domišljije.
Pozicioniranje slik glede na besedilo se lahko izvede v html ali z uporabo lastnosti CSS.
Oznake HTML: besedilo za ovijanje besedila
Slike so postavljene na stran na tri načine:
- osrednje mesto;
- zavijanje besedila;
- vstavite v polje.
Z veliko velikostjo se slika postavi na sredino strani, najprej postavi v vsebnik <p> oznake img, za tem pa je nastavljen atribut = = center. Če pogosto uporabljate sliko, uporabite slog CSS za oznako <p>.
Ko je slika majhna, je besedilo postavljeno poleg nje. Metoda je najpogostejša. Prelivanje besedila poteka na več načinov. Najprej pa morate prikazati sliko na zaslonu. Če je pot do nje znana, na primer "foto1.jpg", se vstavi v html stran z naslednjim vnosom:
<p> <img src = "foto1.jpg"> </ p>
Primer ustreza primeru, ko so html datoteke in slika v isti mapi.
Če sliki sledi besedilo, se nahaja spodaj. To ni vedno priročno, saj bodo na straneh na voljo prazni prostori, zato je stran zasnovana tako, da ustvari tekstno ovijanje okoli slike html. Za to ima oznaka img atribut za poravnavo, ki določa lokacijo fotografije ali slike glede na besedilo. Ta parameter določa, s katerega roba strani se nahaja grafični material in kako se besedilo teče okoli njega. 
Atribut lahko nastavite na naslednje vrednosti:
- levo - premaknite sliko v levo, ko zavijate besedilo na desni;
- desno ovijte sliko na levi strani, ko jo postavite na desno;
- bottom - privzeta vrednost, ko je slika na levi, se prva vrstica besedila začne na ravni njenega spodnjega dela;
- top - slika je podobna prejšnji vrednosti, prva vrstica pa se nahaja na najvišji ravni;
- sredina - začetna vrstica besedila poteka nasproti sredine slike.
Oznaka img ima parametre, ki jih lahko uporabimo za nastavitev razdalje od besedila do slike (hspace in vspace). Brez njihove uporabe se bo besedilo nahajalo blizu slike. Poleg tega so izbrane dimenzije širine in višine. Hkrati je treba upoštevati razmerje med širino in višino. Če dimenzije niso nastavljene, se privzeto risba prenese z velikostmi izvorne kode, kar ni vedno priročno.
Premikanje slike na levo z ovijanjem besedila lahko poteka s pisanjem:
<p> <img src = "foto1.jpg" align = "levo" širina = 150 višina = 100 hspace = 5 vspace = 5> Besedilo </ p>
Tabele aplikacij
Zavijanje besedila z besedilom html je enostavno s pomočjo tabele s sliko v celici. Tukaj se lastnost poravnave uporabi za oznako tabele. Tabele imajo bolj nadzorovane parametre, kar jim prinaša prednosti:
<table width = 170 height = 120 border = 0 align = levo cellpadding = 0 cellspacing = 0>
<img src = "foto2.jpg" širina = 150 višina = 100>
</ table>
Meja tabele je nevidna in ne dopušča, da bi se besedilo približalo sliki. Zamik med celicami in znotraj njih se lahko prilagodi.
Uporaba slogov
Iz prejšnjih primerov lahko vidite, kako enostavno je besedilo oviti okoli html besedila. CSS vam omogoča doseganje podobnih rezultatov. Obloga se ustvari z lastnostjo float. Tudi tukaj je poravnava zagotovljena z vrednostmi levo in desno. 
Za to je ustvarjen razred in dodeljeni so stili CSS:
<style>
.fotoleft {
plovec: levo;
rob: 5px 12px 3px 0px;
}
</ style>
Potem se lastnost float style doda izbirniku img:
<img src = "foto1.jpg" class = "fotoleft">
Poleg poravnavanja slike z vrednostjo levega, prav tako določa lastnost robov za rob besedila s slike. Podobno je ovijanje besedila na levi strani, če je uporabljena pravica.
Slogi omogočajo prekrivanje besedila neposredno na sliki. Da bi to naredili, se besedilo vstavi v blok s polprosojnim ozadjem, ki je prekrito s sliko.
Ni tako težko narediti dramatičnega prelivanja besedil in njegovega nalaganja na slikah, saj se to doseže z zaporednimi poskusi.
Zavijanje slik v obliki okrogle oblike z html besedilom
Spletne strani so sestavljene predvsem iz pravokotnih območij. Vsakdo ve, kako besedilo oviti v html. Slogi se uporabljajo za ustvarjanje geometrijskih oblik, vendar niso povezani z vsebino polaganja znotraj ali zunaj elementov. Risbo lahko razdelite na 2 dela in na obeh straneh postavite bloke z alejami različnih širin. Za njimi je besedilo.
Postopek ustvarjanja toka je dolgotrajen in ga je treba opraviti ločeno za vsak nov vzorec.
Besedilno ovijanje kompleksnih oblik
Z razvojem nove specifikacije CSS je Shapes lahko vplival na obstoječo zasnovo in ji zagotovil nove perspektive. Zdaj lahko vsebina ovije kompleksne oblike in ukrivljena področja.
Specifikacijo podpira brskalnik Chrome Canary, zdaj pa ga poskušajo uveljaviti tudi na ostalih. To vam omogoča, da ustvarite kompleksne modele brez pomoči grafičnih urednikov. 
Obdelava html okrog okrogle slike ima naslednji vnos:
#circle
{
oblika zunaj: krog (-300px, -300px, 300px); / * (x, y, polmer) * /
plovec: levo;
}
<p> Primer besedila </ p>
Koda ustvari krog, ki je popolnoma ovit v besedilo.
Prav tako bo ustvarjena katerakoli nepravilna oblika, zahvaljujoč podpori Photoshopu, ki bo omogočila pridobitev CSS kode oblike.
Zaključek
Pri oblikovanju postavitev strani z različnimi načini postavljanja slik in besedil na njih lahko ustvarite edinstveno obliko. Da bi to naredili, morate obvladati osnovna pravila postavitve, ki zagotavljajo, da je besedilo ovito okoli besedila s html.