Како створити омотач текста око ХТМЛ-а?

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

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

Хтмл тагови: текстуални текст

Слике се стављају на страницу на три начина:

• централна позиција;
• преламање текста;
• уметните у поље.

Са великом величином, слика се поставља у средину странице, прво се ставља у контејнер <п> имг ознаке, након чега се атрибут = = центар поставља за њега. Ако често користите слику, требало би да примените ЦСС стил на ознаку <п>.

Када је слика мала, текст се поставља поред њега. Метода је најчешћа. Преламање текста се врши на неколико начина. Али прво морате приказати слику на екрану. Ако је пут до њега познат, на пример, "фото1.јпг", он се убацује у хтмл страницу користећи следећи унос:

<п> <имг срц = "фото1.јпг"> </ п>

Пример одговара случају када су хтмл фајлови и слика у истој фасцикли.

Ако слику прати текст, она ће се налазити испод. Ово није увек згодно, јер ће на страни бити празних места, па је страница дизајнирана тако да креира текстуални омотач око хтмл-а слике. За то, имг ознака има атрибут поравнања који дефинише локацију фотографије или слике у односу на текст. Овај параметар одређује са које ивице странице се налази графички материјал и како се текст креће око њега. Атрибут се може поставити на следеће вредности:

• лево - померање слике улево када обмотава текст на десно;
• десно преломи слику лијево када је постављена десно;
• боттом - подразумевана вредност, када се слика налази лево, прва линија текста почиње на нивоу њеног доњег дела;
• врх - слика је постављена слично претходној вредности, али се прва линија налази на њеном највишем нивоу;
• средина - почетна линија текста пролази насупрот средини слике.

Имг таг има параметре који се могу користити за постављање удаљености од текста до слике (хспаце и вспаце). Без њихове апликације, текст ће се налазити близу слике. Поред тога, изабране су димензије ширине и висине. У исто време треба поштовати однос између ширине и висине. Ако димензије нису подешене, цртеж се подразумевано преноси са величинама изворног кода, што није увек згодно.

Померање слике на лево уз обмотавање текста може се обавити писањем:

<п> <имг срц = "фото1.јпг" алигн = "лефт" видтх = 150 хеигхт = 100 хспаце = 5 вспаце = 5> Текст </ п>

Апплицатион таблес

Омотавање текста са ХТМЛ текстом је лако урадити уз помоћ табеле са сликом унутар ћелије. Овде се својство поравнања примењује на ознаку табеле. Табеле имају више контролисаних параметара, што за њих ствара предности:

<табле видтх = 170 хеигхт = 120 бордер = 0 алигн = лефт целлпаддинг = 0 целлпацинг = 0>
<имг срц = "фото2.јпг" ширина = 150 висина = 100>

</ табле>

Граница табеле је невидљива и не дозвољава да се текст приближи слици. Увлачења између ћелија и унутар њих могу се прилагодити.

Усинг Стилес

Из претходних примјера можете видјети како је лако направити оматање текста око хтмл текста. ЦСС вам омогућава да постигнете сличне резултате. Врап се креира помоћу својства флоат. И овде, поравнање је обезбеђено вредностима лево и десно.

За ово је креирана класа и додељени су ЦСС стилови:

<стиле>

.фотолефт {

флоат: лефт;

маргина: 5пк 12пк 3пк 0пк;

}

</ стиле>

Тада се својство флоат стиле додаје имг селектору:

<имг срц = "фото1.јпг" цласс = "фотолефт">

Поред поравнавања слике помоћу вредности лево, она такође поставља маргину текста са слике помоћу особине маргине. На сличан начин, омотавање текста на левој страни се врши ако се примени право својство.

Стилови вам омогућавају да преклапате текст директно на слици. Да бисте то урадили, текст се убацује у блок са полупрозирном позадином, која се поставља на слику.

Није тако тешко направити драматичну текстуалну фолију и њено наметање на слике, јер се то постиже узастопним експериментима.

Омотавање слика у облику округлог облика са ХТМЛ текстом

Веб странице се углавном састоје од правоугаоних подручја. Сви знају како да текст преломи текст у хтмл. Стилови се користе за креирање геометријских облика, али нису повезани са садржајем полагања унутар или изван елемената. Могуће је подијелити цртеж на 2 дијела и поставити блокове удубљења различитих ширина на обје стране. Иза њих је текст.

Процес стварања таквог тока је дуготрајан и мора се радити одвојено за сваки нови узорак.

Обавите текст сложених облика

Развијањем нове ЦСС спецификације, Схапес је био у могућности да утиче на постојећи дизајн и да му пружи нове перспективе. Сада се садржај може замотати око сложених облика и закривљених подручја.

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

ХТМЛ омотавање око кружне слике садржи следећи унос:

#цирцле

{

облик-споља: круг (-300пк, -300пк, 300пк); / * (к, и, радијус) * /

флоат: лефт;

}

<п> Пример текста </ п>

Код креира круг који је савршено умотан у текст.

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

Закључак

Када градите изглед странице користећи различите начине постављања слика и текста на њих, можете креирати јединствен дизајн. Да бисте то урадили, морате овладати основним правилима распореда, који осигуравају да се текст омотава око хтмл текста.