Погледни ја секоја веб страница и ќе видите комбинација на текстуални содржини и слики. Двата од овие елементи се основни состојки во успехот на веб-страница. Содржината на текстот е она што посетителите на веб-страницата ќе го прочитаат и кои пребарувачи ќе ги користат како дел од нивните алгоритми за рангирање. Сликите ќе додадат визуелен интерес за страницата и ќе помогнат да се истакне содржината на текстот.
Додавањето текст и слики на веб-страниците е лесно. Текстот се додава со стандардни HTML тагови како параграфи, наслови и листи, додека сликите се ставаат на страница со елементот . Откако ќе додадете слика на вашата веб-страница, сепак, можеби ќе сакате да го имате протокот на текстот до сликата, наместо да се усогласите под него (што е стандардниот начин на кој додадена слика во HTML-кодот ќе се прикаже во прелистувачот). Технички, постојат два начини на кои можете да го постигнете овој изглед, или со користење на CSS (препорачано) или со додавање на визуелните инструкции директно во HTML (не се препорачува, бидејќи сакате да ја одржувате поделбата на стилот и структурата за вашата веб-страница).
Користење на CSS
Точниот начин да го промените начинот на изгледот на текстот и сликата на страницата и како нивните визуелни стилови се појавуваат во прелистувачот е со CSS . Само запомнете, бидејќи станува збор за визуелна промена на страната (правејќи проток на текст околу сликата), тоа значи дека е доменот на Каскадни стилски листови.
- Прво, додадете ја сликата на вашата веб-страница. Запомнете да ги исклучите визуелните карактеристики (како ширина и висина вредности) од тој HTML. Ова е важно, особено за одговорен веб-сајт каде големината на сликата ќе се разликува врз основа на прелистувачот. Одреден софтвер, како Adobe Dreamweaver, ќе додаде информации за ширина и висина на слики кои се вметнуваат со таа алатка, па затоа не заборавајте да ги отстраните овие информации од HTML кодот! Бидете сигурни дека, сепак, да вклучите соодветен алт текст . Еве еден пример за тоа како може да изгледа вашиот HTML код:
-
- За целите на стајлинг, можете исто така да додадете класа на слика. Оваа класа вредност е она што ќе го користиме во нашата CSS-датотека. Имајте на ум дека вредноста што ја користиме овде е произволна, иако, за овој посебен стил, имаме тенденција да ги користиме вредностите на "лево" или "десно", во зависност од начинот на кој сакаме да се усогласи нашата слика. Ние ја наоѓаме таа едноставна синтакса да функционира добро и да биде лесна за други кои можеби ќе мора да управуваат со некоја локација во иднина за да разберат, но може да ја дадете оваа класа вредност што сакате.
-
- Сама по себе, оваа класа вредност нема да направи ништо. Сликата нема автоматски да се усогласи лево од текстот. За ова, сега треба да се свртиме кон нашата CSS-датотека.
-
- Во вашиот стил лист, сега можете да го додадете следниов стил:
- .лево {
- плови: лево;
- Соочувајќи се: 0 20px 20px 0;
- }
- Она што го направивте овде е користењето на својството CSS "float" , кое ќе ја повлече сликата од нормален проток на документи (начинот на кој сликата нормално ќе се прикажува, со текстот подреден под него) и ќе го израмни на левата страна на садот . Текстот што следува по него во HTML маркер со сега се завитка околу него. Исто така, додадовме некои важни вредности, така што овој текст нема, туку ќе биде директно спротивен на сликата. Наместо тоа, ќе има убаво празно место кое ќе биде визуелно атрактивно во дизајнот на страницата. Во стенографијата на CSS за подлога, додадовме 0 вредности на горната и левата страна на сликата, и 20 пиксели на лево и на дното. Запомнете, треба да додадете некоја рампа на десната страна на левата подредена слика. Десната подредена слика (за која ќе погледнеме во еден момент) ќе се појави дополнување на левата страна.
- Ако ја гледате вашата веб-страница во прелистувачот, сега треба да видите дека вашата слика е порамнета на левата страна на страницата и текстот убаво се завршува околу неа. Друг начин да се каже ова е дека сликата е "лебдат лево".
- Ако сакавте да ја смените оваа слика за да биде усогласена надесно (како на примерот за фотографии што ја придружува оваа статија), би било едноставно. Прво, мора да бидете сигурни дека покрај стилот што го додадовме на нашиот CSS за класната вредност на "лево", ние исто така имаме и еден за усогласување на десното. Тоа би изгледало вака:
- .right {
- плови: десно;
- Соочувајќи се: 0 0 20px 20px;
- }
- Можете да видите дека ова е речиси идентично со првиот CSS што го напишавме. Единствената разлика е вредноста што ја користиме за имотот "float" и вредностите за дополнување што ги користиме (додавајќи некои од левата страна на нашата слика наместо десно).
- Конечно, ќе ја смените вредноста на класата на сликата од "лево" на "десно" во HTML:
-
- Погледни ја вашата страница во прелистувачот сега и вашата слика треба да се усогласи надесно со текст уредно завиткан околу него. Ние се стремиме да ги додадеме двата стилови, "лево" и "десно" на сите наши стилски листови, за да можеме да ги користиме овие визуелни стилови колку што е потребно кога создаваме веб-страници. Овие две стилови стануваат убави, повторливи функции кои можеме да ги претвориме секогаш кога ќе треба да стилизираат слики со преклопување на текст околу нив.
Користење на HTML наместо CSS (и зошто не треба да го направите ова)
Иако е можно да се заврши текстот околу сликата со HTML, веб стандардите диктираат дека CSS (и чекорите претставени погоре) е начин да се оди, така што можеме да одржиме поделба на структурата (HTML) и стил (CSS). Ова е особено важно кога сметате дека, за некои уреди и распореди, тој текст можеби нема потреба да тече околу сликата. За помали екрани, изгледот на одговорен веб-сајт може да бара текстот навистина да се израмни под сликата и дека сликата се протега низ целата ширина на екранот. Ова е лесно да се направи со барања за медиуми, ако вашите стилови се одделени од вашиот HTML ознака. Во денешниот мулти-уред во светот, каде што сликите и текстот ќе се појавуваат поинаку за различни посетители и на различни екрани, оваа поделба е неопходна за долгорочниот успех и управување со веб-страница.