Kako zavrsiti tekst oko slike

Pogledajte bilo koju web stranicu i vidjet ćete kombinaciju tekstualnih sadržaja i slika. Oba ova elementa su bitni sastojci uspjeha web stranice. Sadržaj teksta je ono što će posjetitelji web mjesta pročitati i koje će tražilice koristiti kao dio njihovih algoritama za rangiranje. Slike će dodati vizualni interes web sučelju i pomoći u naglašavanju teksta sadržaja.

Dodavanje teksta i slika na web stranice je jednostavno. Tekst se dodaje standardnim HTML oznakama kao što su odlomci, zaglavlja i popisi, a slike se smještaju na stranicu s elementom . Međutim, nakon što dodate sliku na svoju web stranicu, možda ćete htjeti imati tekst pored slike, a ne poravnajte se ispod nje (što je zadani način na koji će se slika dodana u HTML kôd prikazati u pregledniku). Tehnički, postoje dva načina na koje možete postići ovaj izgled, bilo pomoću CSS-a (preporučeno) ili dodavanjem vizualnih instrukcija izravno u HTML (ne preporučuje se jer želite zadržati razdvajanje stila i strukture za svoju web stranicu).

Upotreba CSS-a

Ispravan način izmjene načina na koji se prikazuju tekstualne i slikovne stranice te kako se vizualni stilovi pojavljuju u pregledniku imaju CSS . Sjeti se, budući da govorimo o vizualnoj promjeni na stranici (stvaranje teksta oko slike), to znači da je to domena Cascading Style Sheets.

1. Prvo, dodajte svoju sliku na svoju web stranicu. Ne zaboravite izuzeti sve vizualne karakteristike (kao što su vrijednosti širine i visine) iz tog HTML-a. To je važno, posebno za web-lokaciju s odzivom na kojoj će se veličina slike razlikovati ovisno o pregledniku. Određeni softver, poput Adobe Dreamweaver, dodaje informacije o širini i visini slikama koje su umetnute pomoću tog alata pa svakako uklonite te informacije iz HTML koda! Obavezno unesite odgovarajući alt tekst . Evo primjera kako izgleda vaš HTML kôd:
2. Za styling svrhe, možete dodati i klasu na sliku. Ova vrijednost klase je ono što ćemo koristiti u našoj CSS datoteci. Napominjemo da je vrijednost koju koristimo ovdje proizvoljna, iako za ovaj stil nastojimo upotrebljavati vrijednosti "lijevo" ili "desno", ovisno o tome kako želimo uskladiti našu sliku. Smatramo da jednostavna sintaksa funkcionira dobro i da je lako za druge koji će možda morati upravljati nekom web-lokacijom u budućnosti kako bi razumjeli, ali možete dati to bilo koju vrijednost klase koju želite.
   2. Sam po sebi, ova vrijednost klase neće učiniti ništa. Slika se neće automatski poravnati s lijeve strane teksta. Zbog toga se moramo obratiti našoj CSS datoteci.

1. U svojem listi stilova sada možete dodati sljedeći stil:
   1. .left {
   2. plutaju: lijevo;
   3. padding: 0 20px 20px 0;
   4. }
   5. Ono što ste ovdje radili koristite CSS "float" imovinu koja će povući sliku iz uobičajenog toka dokumenta (način na koji će se ta slika normalno prikazati, s tekstom poravnatim ispod nje) i poravnati ga s lijevom stranom spremnika , Tekst koji dolazi poslije njega u HTML oznaku sada ga omotava. Dodali smo i neke vrijednosti ispuna tako da taj tekst ne bi bio izravno protiv slike. Umjesto toga, imat će lijep razmak koji će biti vizualno privlačan u dizajnu stranice. U CSS stenografiji za padding, dodali smo 0 vrijednosti na gornju i lijevu stranu slike, a 20 piksela na lijevu i donju stranu. Zapamtite, trebate dodati nešto podloge desne strane lijevo poravnate slike. Desna poravnata slika (koju ćemo pogledati u trenutku) imala bi padding na svoju lijevu stranu.
2. Ako svoju web stranicu pregledavate u pregledniku, sada biste trebali vidjeti da je slika usklađena s lijevom stranom stranice i tekst se lijepo okreće oko nje. Drugi način za reći ovo je da je slika "lebdjela lijevo".

1. Ako želite promijeniti tu sliku da bude poravnato desno (kao u primjeru fotografije koji prati ovaj članak), bilo bi jednostavno. Prvo, morate se pobrinuti da pored stila koji smo dodali u naš CSS za vrijednost klase "lijevo", imamo i jednu za pravilno poravnanje. Izgledalo bi ovako:
   1. pravedno {
   2. plutajuće: pravo;
   3. padding: 0 0 20px 20px;
   4. }
   5. Možete vidjeti da je to gotovo identično prvom CSS-u koji smo napisali. Jedina razlika je vrijednost koju koristimo za nekretninu "float" i vrijednosti paddinga koje upotrebljavamo (dodavanje neke s lijeve strane naše slike umjesto desno).
2. Konačno, u HTML-u biste promijenili vrijednost klase slike od "lijevo" do "desno":
3. Pogledajte sada vašu stranicu u pregledniku, a vaša slika treba biti poravnata s desne strane, a tekst ga uredno omotava. Mi nastojimo dodati oba ova stilova, "lijevo" i "pravo" na sve naše stilske listove kako bismo mogli koristiti ove vizualne stilove po potrebi prilikom izrade web stranica. Ove dvije stilove postaju lijepe, višekratne značajke koje možemo obratiti kad god trebamo stilirati slike s tekstom omatanja oko njih.

Korištenje HTML-a umjesto CSS-a (i zašto to ne biste trebali učiniti)

Iako je moguće da tekst omotati oko slike s HTML-om, web-standardi diktiraju da je CSS (i gore navedeni koraci) način na koji možemo ići kako bismo mogli održavati razdvajanje strukture (HTML) i stila (CSS). To je osobito važno kada uzmete u obzir da za neke uređaje i izglede tekst možda neće morati protjecati oko slike. Za manje ekrane, izgled web-lokacije osjetljivih na web može zahtijevati da tekst doista bude poravnat ispod slike i da se slika proteže po cijeloj širini zaslona. To se lako može obaviti putem medijskih upita ako su vaši stilovi odvojeni od HTML oznake. U današnjem svijetu s više uređaja, gdje se slike i tekst pojavljuju drugačije za različite posjetitelje i na različitim zaslonima, ovo razdvajanje bitno je za dugoročni uspjeh i upravljanje web stranicom.