Kako zaviti besedilo okoli slike

Oglejte si katero koli spletno stran in videli boste kombinacijo besedilne vsebine in posnetkov. Oba elementa sta bistvena sestavina uspeha spletne strani. Vsebino besedila je tisto, kar bodo obiskovalci spletnega mesta prebrali in katere iskalnike bodo uporabili kot del svojih algoritmov razvrstitve. Slike bodo dodale vizualno zanimanje za spletno stran in pomagale poudariti vsebino besedila.

Dodajanje besedila in slik na spletne strani je preprosto. Besedilo se doda s standardnimi oznakami HTML, kot so odstavki, naslovi in ​​seznami, medtem ko so slike postavljene na stran z elementom . Ko boste na svojo spletno stran dodali sliko, boste morda želeli, da bi se besedilo dotaknilo slike, ne pa poravnati pod njim (kar je privzeti način, da bo v brskalniku prikazana slika, dodana v HTML kodo). Tehnično je na ta način mogoče doseči dva načina: bodisi z uporabo CSS (priporočeno) bodisi z dodajanjem vizualnih navodil neposredno v HTML (ne priporočamo, saj želite ohraniti ločitev sloga in strukture za vaše spletno mesto).

Uporaba CSS

Pravilen način za spreminjanje načina postavitve besedila in slike na strani in kako se njihovi vizualni slogi pojavijo v brskalniku je CSS . Samo zapomni si, ker govorimo o vizualni spremembi na strani (tok besedila okoli slike), to pomeni, da je domena Cascading Style Sheets.

1. Najprej dodajte svojo sliko na svojo spletno stran. Ne pozabite izključiti vizualnih značilnosti (npr. Širine in višine) iz tega HTML-ja. To je pomembno, zlasti za odzivno spletno mesto, kjer se bo velikost slike spreminjala glede na brskalnik. Nekatera programska oprema, kot je Adobe Dreamweaver, bo dodala podatke o širini in višini na slike, ki so vstavljene s tem orodjem, zato jih odstranite iz kode HTML! Vendar se prepričajte, da vključite ustrezno alt besedilo . Tu je primer, kako lahko vaša koda HTML izgleda:
2. Za namene styling lahko tudi sliko dodate v razred. Ta vrednost razreda je tisto, kar bomo uporabili v naši datoteki CSS. Upoštevajte, da je vrednost, ki jo uporabljamo tukaj, poljubna, čeprav za ta poseben slog običajno uporabljamo vrednosti »levo« ali »desno«, odvisno od tega, na kakšen način želimo poravnati našo sliko. To preprosto sintakso najde dobro in je lahko za tiste, ki bodo morda morali upravljati spletno mesto v prihodnosti, razumeli, vendar bi lahko to dali vsaki želeni vrednosti.
   2. Sama po sebi ta vrednost razreda ne bo storila ničesar. Slika se ne bo samodejno poravnala na levi strani besedila. Za to se zdaj moramo obrniti na našo datoteko CSS.

1. V slogovnem slogu lahko sedaj dodate naslednji slog:
   1. .left {
   2. float: levo;
   3. padding: 0 20px 20px 0;
   4. }
   5. Kaj naredite tukaj je uporaba lastnosti CSS "float" , ki bo potegnila sliko iz običajnega pretoka dokumentov (način, kako se slika običajno prikaže, pri čemer je besedilo poravnano pod njim) in ga poravnalo na levo stran vsebnika . Besedilo, ki sledi temu v oznaki HTML, se zdaj obrne. Dodali smo tudi nekaj padding vrednosti, tako da to besedilo ne bi bilo neposredno proti sliki. Namesto tega bo imela nekaj lepega razmika, ki bo v oblikovanju strani privlačna. V steno CSS za oblazinjenje smo dodali 0 vrednosti na zgornjo in levo stran slike ter 20 slikovnih pik na levi in ​​spodnji strani. Ne pozabite, da morate dodati nekaj blazinice na desni strani leve poravnane slike. Desna poravnana slika (ki jo bomo pogledali v trenutku) bi imela na levi strani nalepko.
2. Če si ogledate svojo spletno stran v brskalniku, morate zdaj videti, da je vaša slika poravnana z levo stranjo strani in da se besedilo lepo obesi. Drug način, da rečemo, je, da je slika "plavajoča na levo".

1. Če bi želeli spremeniti to sliko, da bi bila poravnana na desni (kot v primeru slike, ki spremlja ta članek), bi bilo preprosto. Najprej se morate prepričati, da poleg sloga, ki smo ga pravkar dodali k CSS za vrednost razreda "levo", imamo tudi eno za pravično poravnavo. To bi bilo videti tako:
   1. .prav {
   2. float: desno;
   3. padding: 0 0 20px 20px;
   4. }
   5. Vidite lahko, da je to skoraj identično prvemu CSS, ki smo ga napisali. Edina razlika je vrednost, ki jo uporabljamo za lastnost »float« in vrednosti, ki jih uporabljamo (dodamo nekaj na levo stran slike namesto desne).
2. Končno bi spremenili vrednost razreda slike iz "leve" na "desno" v HTML-ju:
3. Zdaj si oglejte svojo stran v brskalniku in sliko je treba poravnati na desno z besedilom, ki se lepo ovija okrog nje. Pri tem navajamo oba stila, "levo" in "desno" na vse naše slogovne predloge, tako da lahko te vizualne sloge uporabimo po potrebi, ko ustvarjamo spletne strani. Ti dve slogi postaneta lepa, znova uporabna značilnost, s katero se lahko obrnemo, kadarkoli potrebujemo slog slike z besedilnim ovijanjem okoli njih.

Uporaba HTML namesto CSS (in zakaj tega ne bi smeli storiti)

Kljub temu, da je mogoče besedilo zavrteti okoli slike z HTML-jem, spletni standardi narekujejo, da je CSS (in zgornji koraki) način, kako iti, da bomo lahko ohranili ločitev strukture (HTML) in sloga (CSS). To je še posebej pomembno, če menite, da za nekatere naprave in postavitve to besedilo morda ne bo treba preteči po sliki. Za manjše zaslone lahko odzivna spletna postavitev zahteva, da se besedilo dejansko poravna pod sliko in da se slika razteza po celotni širini zaslona. To je enostavno narediti z medijskimi poizvedbami, če so vaši slogi ločeni od oznake HTML. V današnjem svetu z več napravami, kjer se bodo slike in besedilo različno prikazovali za različne obiskovalce in na različnih zaslonih, je to ločitev bistvena za dolgoročni uspeh in upravljanje spletne strani.