Како замотати текст око слике

Погледајте било коју веб страницу и видећете комбинацију текстуалног садржаја и слика. Оба ова елемента су суштински састојци у успјеху веб странице. Текстуални садржај је оно што ће посетиоци сајта прочитати и који претраживачи ће користити као део њихових алгоритама рангирања. Слике ће додати визуелни интерес за сајт и помоћи нагласити садржај текста.

Додавање текста и слика на веб локације је једноставно. Текст се додаје са стандардним ХТМЛ ознакама као што су параграфи, заглавља и листе, док се слике постављају на страницу са елементом <имг>. Када додате слику на своју веб страницу, међутим, можда ћете желети да текст прође поред слике, а не да га поравнате испод њега (што је подразумевани начин приказа слике која је додата ХТМЛ код у прегледачу). Технички, постоје два начина на који можете постићи овај изглед, користећи ЦСС (препоручено) или додавањем визуелних упутстава директно у ХТМЛ (не препоручује се, пошто желите одржати одвајање стила и структуре за вашу веб страницу).

Коришћење ЦСС-а

Прави начин за промену начина на који се налази текст текста и слика и како се њихови визуелни стилови појављују у претраживачу је ЦСС . Само запамтите, пошто говоримо о визуелној промени на страници (креирање текста око слике), то значи да је то домен Цасцадинг Стиле Схеетс-а.

1. Прво додајте своју слику на своју веб страницу. Не заборавите да искључите било какве визуелне карактеристике (нпр. Ширину и висину вредности) из тог ХТМЛ-а. Ово је важно, нарочито за одзивну веб локацију на којој се величина слике разликује у зависности од претраживача. Одређени софтвер, као што је Адобе Дреамвеавер, ће додати податке ширине и висине на слике које су уметнуте помоћу тог алата, зато обавезно уклоните ове информације из ХТМЛ кода! Уверите се, међутим, да укључите одговарајући алт текст . Ево примера како ваш ХТМЛ код може изгледати:
   1. <имг срц = "/ имагес / теам-пхото.јпг" алт = "Фотографија наших запослених">
2. За сврхе стајања можете додати и класу на слику. Ова класа вриједност је оно што ћемо користити у нашој ЦСС датотеци. Имајте на уму да вриједност коју овдје користимо је произвољна, иако за овај посебан стил тежимо да користимо вриједности "лијево" или "десно", овисно о томе на који начин желимо да се слика усклади. Сматрамо да је та једноставна синтакса добро функционирана и да буде лако за друге који ће можда морати да управљају сајтом у будућности да би их разумели, али би могли дати било коју вредност класе коју желите.
   1. <имг срц = "/ имагес / теам-пхото.јпг" алт = "Фотографија наших запослених" цласс = "лефт">
   2. Сама по себи, ова класа неће ништа учинити. Слика се неће аутоматски поравнати лево од текста. За ово, сада морамо да се окренемо нашој ЦСС датотеци.

1. На вашем стилесхеету можете сада додати следећи стил:
   1. .лефт {
   2. флоат: лефт;
   3. паддинг: 0 20пк 20пк 0;
   4. }
   5. Оно што сте урадили овде је коришћење особине ЦСС-а "флоат" , која ће повући слику из нормалног тока документа (начин на који ће се слика нормално приказивати, а текст ће се поравнати испод њега) и то ће га поравнати са леве стране њеног контејнера . Текст који се појављује након тога у ознакама ХТМЛ-а сада се окреће око ње. Додали смо и неке вриједности допуњавања тако да овај текст не би био директно у односу на слику. Уместо тога, имаће лепе размаке које ће бити визуелно атрактивне у дизајну странице. У скраћеници ЦСС-а за допуњавање, додали смо 0 вриједности на врху и лијеву страну слике, а 20 пиксела на лијево и дно. Запамтите, потребно је да додате неку подлогу са десне стране леве поравнане слике. Десна поравнана слика (коју ћемо погледати за тренутак) би се налазила на левој страни.
2. Ако прегледате своју веб страницу у прегледачу, сада би требало да видите да је ваша слика поравнана са леве стране странице и да се текст лепо окреће око ње. Други начин да се ово каже је да је слика "лебдела лево".

1. Ако сте желели да промените ову слику да бисте се подесили са десне стране (као у примеру слике који прати овај чланак), било би једноставно. Прво, морате се побринути да, поред стила који смо управо додали нашем ЦСС-у за класну вриједност "лијево", имамо и један за правог поравнања. То би изгледало овако:
   1. .јел тако {
   2. флоат: десно;
   3. паддинг: 0 20пк 20пк;
   4. }
   5. Можете видети да је ово скоро идентично првом ЦСС-у који смо написали. Једина разлика је вредност коју користимо за својство "флоат" и вриједности паддинга које користимо (додајући неке на лијеву страну наше слике умјесто десне).
2. На крају, променили бисте вредност класе слике од "лево" до "десно" у ХТМЛ-у:
   1. <имг срц = "/ имагес / теам-пхото.јпг" алт = "Фотографија наших запослених" цласс = "ригхт">
3. Погледајте вашу страницу у претраживачу и ваша слика би требало да буде поравнана са десне стране уз текст који се уредно обрађује. Увек додамо оба стила, "лево" и "десно" на све наше стилске листове, тако да можемо користити ове визуелне стилове по потреби када креирамо веб странице. Ова два стила постају лепа, могућа поновна употреба коју можемо да се обратимо кад год треба да стишимо слике са текстом који се окреће око њих.

Коришћење ХТМЛ-а уместо ЦСС-а (и зашто то не би требало урадити)

Иако је могуће обрадити текст око слике са ХТМЛ-ом, веб стандарди диктирају да је ЦСС (и горе приказани кораци) начин на који идемо тако да можемо одржати одвајање структуре (ХТМЛ) и стила (ЦСС). Ово је посебно важно када сматрате да за неке уређаје и изгледе тај текст можда неће требати да протиче око слике. За мање екране, распоред одзивног веб сајта може захтевати да се текст стварно поравна испод слике и да се слика протеже на пуну ширину екрана. Ово се лако може урадити са медијским упитима ако су ваши стилови одвојени од ХТМЛ ознаке. У данашњем свету са више уређаја, где ће се слике и текст појавити другачије за различите посетиоце и на различитим екранима, ово одвајање је од суштинског значаја за дугорочни успех и управљање веб страницом.