Kako zameniti tekst oko slike

Pogledajte bilo koju web stranicu i videćete kombinaciju tekstualnog sadržaja i slika. Oba ova elementa su suštinski sastojci u uspjehu web stranice. Tekstualni sadržaj je ono što će posetioci sajta pročitati i koji pretraživači će koristiti kao deo njihovih algoritama rangiranja. Slike će dodati vizuelni interes za sajt i pomoći naglasiti sadržaj teksta.

Dodavanje teksta i slika na web stranice je jednostavno. Tekst se dodaje sa standardnim HTML oznakama kao što su paragrafi, zaglavlja i liste, dok se slike postavljaju na stranicu sa elementom . Jednom kada dodate sliku na svoju web stranicu, međutim, možda ćete želeti da tekst prođe pored slike, a ne da ga poravnate ispod njega (što je podrazumevani način da slika koja se doda HTML kôdu prikazuje u pregledaču). Tehnički, postoje dva načina na koji možete postići ovaj izgled, koristeći CSS (preporučeno) ili dodavanjem vizuelnih uputstava direktno u HTML (ne preporučuje se, pošto želite održati odvajanje stila i strukture za vašu web stranicu).

Korišćenje CSS-a

Pravi način za promjenu načina na koji izgledaju tekst stranice i slike i kako se njihovi vizuelni stilovi pojavljuju u pretraživaču je CSS . Samo zapamtite, pošto govorimo o vizuelnoj promeni na stranici (što olakšava tekstualnu sliku oko slike), to znači da je domen Cascading Style Sheets-a.

  1. Prvo dodajte svoju sliku na svoju web stranicu. Ne zaboravite da isključite bilo kakve vizuelne karakteristike (kao što su širina i visina vrijednosti) iz tog HTML-a. Ovo je važno, naročito za odzivnu web lokaciju na kojoj će se veličina slike varirati u zavisnosti od pretraživača. Određeni softver, kao što je Adobe Dreamweaver, će dodati podatke širine i visine na slike koje su umetnute pomoću tog alata, zato obavezno uklonite ove informacije iz HTML koda! Uverite se, međutim, da uključite odgovarajući alt tekst . Evo primera kako vaš HTML kod može izgledati:
  2. Za svrhe stajanja možete također dodati klasu na sliku. Ova klasa vrijednost je ono što ćemo koristiti u našoj CSS datoteci. Imajte na umu da vrijednost koju ovdje koristimo je proizvoljna, mada za ovaj poseban stil težimo da koristimo vrijednosti "lijevo" ili "desno", ovisno o tome na koji način želimo da se slika poravna. Smatramo da je ta jednostavna sintaksa dobro funkcionirana i da bude lako za druge koji će možda morati da upravljaju sajtom u budućnosti da bi ih razumeli, ali bi mogli dati bilo koju vrednost klase koju želite.
    1. Sama po sebi, ova klasa vrijednosti neće učiniti ništa. Slika se neće automatski poravnati levo od teksta. Za ovo, sada moramo okrenuti našoj CSS datoteci.
  1. Na vašem stylesheetu sada možete dodati sledeći stil:
    1. .left {
    2. float: left;
    3. padding: 0 20px 20px 0;
    4. }
    5. Ono što ste uradili ovde je korišćenje osobine CSS-a "float" , koja će povući sliku iz normalnog toka dokumenta (način na koji će se slika normalno prikazivati, a tekst se poravnava ispod njega) i to će ga poravnati sa leve strane njenog kontejnera . Tekst koji se pojavljuje nakon toga u HTML oznaku, a sada ga obmotati. Dodali smo i neke vrijednosti dopunjavanja tako da ovaj tekst ne bi bio direktno u odnosu na sliku. Umjesto toga, imaće dobar razmak koji će biti vizuelno atraktivan u dizajnu stranice. U skraćenici CSS-a za dopunjavanje, dodali smo 0 vrijednosti na vrhu i lijevu stranu slike, a 20 piksela na lijevo i dno. Zapamtite, potrebno je da dodate neku podlogu sa desne strane leve poravnane slike. Desna poravnana slika (koju ćemo pogledati za trenutak) bi se nalazila na levoj strani.
  2. Ako pregledate svoju web stranicu u pregledaču, sada bi trebalo da vidite da je vaša slika poravnana sa leve strane stranice i da se tekst lepo okreće oko nje. Drugi način da se to kaže je da je slika "lebdela levo".
  1. Ako ste želeli da promenite ovu sliku da biste se podesili sa desne strane (kao na primjeru fotografije koji prati ovaj članak), bilo bi jednostavno. Prvo, morate se pobrinuti da, pored stila koji smo upravo dodali našem CSS-u za klasu vrijednosti "lijevo", imamo i jedan za alignment. To bi izgledalo ovako:
    1. .right {
    2. float: desno;
    3. padding: 0 20px 20px;
    4. }
    5. Možete videti da je ovo skoro identično prvom CSS-u koji smo napisali. Jedina razlika je vrijednost koju koristimo za svojstvo "float" i vrijednosti padding koje koristimo (dodajući neke na lijevu stranu naše slike umjesto desne).
  2. Konačno, promenili biste vrednost klase slike iz "lijevo" na "desno" u HTML-u:
  3. Pogledajte vašu stranicu u pretraživaču i vaša slika bi trebalo da bude poravnana sa desne strane sa tekstom koji se uredno okreće oko nje. Težimo dodavanje oba stila, "lijevo" i "desno" na sve naše stilske listove, tako da možemo koristiti ove vizuelne stilove po potrebi kada kreiramo web stranice. Ove dve stilove postaju lepe, višekratne funkcije koje možemo okrenuti kad god trebamo stajati slike sa tekstom koji se okreće oko njih.

Korišćenje HTML umjesto CSS-a (i zašto to ne bi trebalo uraditi)

Iako je moguće obraditi tekst oko slike sa HTML-om, web standardi diktiraju da je CSS (i gore prikazani koraci) način na koji idemo tako da možemo održati odvajanje strukture (HTML) i stila (CSS). Ovo je posebno važno kada smatrate da za neke uređaje i izglede taj tekst možda neće trebati da protiče oko slike. Za manje ekrane, raspored odzivnog web sajta može zahtevati da se tekst stvarno poravna ispod slike i da se slika proteže na punu širinu ekrana. To se lako može uraditi sa medijskim upiti ako su vaši stilovi odvojeni od HTML oznake. U današnjem svetu sa više uređaja, gde će se slike i tekst pojaviti drugačije za različite posetioce i na različitim ekranima, ovo odvajanje je od suštinske važnosti za dugoročni uspeh i upravljanje web stranicom.