Как да създадем текстово опаковане около текста html?

Наличието на изображения на уеб страници подобрява външния им вид, привлича вниманието и допринася за по-доброто възприемане на текстовете. Опаковането на текст с текст html ви позволява да свързвате съдържание с илюстрации и ефективно да поставяте материала. Постоянно развиваме нови начини за създаване на образи, позволяващи да се въплъщават творчески идеи. В същото време новите стилове на оформления се основават на едни и същи методи, създавайки неограничен обхват на въображението.

Позиционирането на изображенията по отношение на текста може да се извърши в html или като се използват CSS свойства.

HTML тагове: текст за опаковане на текст

Снимките се поставят на страницата по три начина:

• централно положение;
• опаковане на текст;
• вмъкнете в полето.

С голям размер, изображението се поставя в средата на страницата, първо се поставя в контейнера <p> на img тагове, след което се задава атрибут = = center. Ако често използвате изображение, трябва да приложите стила CSS към маркера <p>.

Когато изображението е малко, текстът се поставя до него. Методът е най-често срещаният. Пренасянето на текст се извършва по няколко начина. Но първо трябва да покажете картина на екрана. Ако пътят до него е известен, например "foto1.jpg", той се вмъква в html страницата, като използва следния запис:

<p> <img src = "foto1.jpg"> </ p>

Примерът съответства на случая, когато html файловете и картината са в една и съща папка.

Ако изображението е последвано от текст, то ще се намира по-долу. Това не винаги е удобно, тъй като ще има празни пространства отстрани, затова страницата е предназначена да създаде текстова обвивка около html изображението. За тази цел img етикетът има атрибут align, който определя местоположението на снимката или изображението спрямо текста. Този параметър определя от кой ръб на страницата се намира графичният материал и как тече текстът около него. Атрибутът може да бъде зададен на следните стойности:

• ляво - придвижване на изображението наляво, когато обвива текста вдясно;
• дясната снимка вляво, когато е поставена в дясно;
• bottom - стойността по подразбиране, когато картината е отляво, първата линия започва от нивото на долната му част;
• нагоре - изображението се поставя подобно на предишната стойност, но първата линия се намира на най-горното му ниво;
• средата - началният ред на текста протича в средата на изображението.

Img tag има параметри, които могат да се използват за задаване на разстоянието от текста до изображението (hspace и vspace). Без тяхното прилагане, текстът ще бъде разположен близо до картината. Освен това се избират размерите на ширината и височината. В същото време трябва да се спазва съотношението между ширината и височината. Ако размерите не са зададени, по подразбиране чертежът се прехвърля с размерите на изходния код, което не винаги е удобно.

Преместването на изображението вляво с обтичане на текста може да се извърши чрез писане:

<p> <img src = "foto1.jpg" align = "left" width = 150 височина = 100 hspace = 5 vspace = 5> текст </ p>

Таблици за приложения

Опаковането на текст с HTML текст е лесно с помощта на таблица с изображение в клетката. Тук свойството за подравняване се прилага към етикета на таблицата. Таблиците имат по-контролирани параметри, което им създава предимства:

<table width = 170 height = 120 border = 0 align = ляво cellpadding = 0 cellspacing = 0>
<img src = "foto2.jpg" ширина = 150 височина = 100>

</ table>

Границата на таблицата е невидима и не позволява на текста да се доближи до изображението. Отметките между и вътре в клетките могат да бъдат коригирани.

Използване на стилове

От предишните примери можете да видите колко лесно е да се направи текстът опакован около HTML текста. CSS ви позволява да постигнете подобни резултати. Wrap се създава чрез свойството float. И тук подравняването се осигурява от стойностите наляво и надясно.

За тази цел се създава клас и се присвояват CSS стилове:

<Стил>

.fotoleft {

поплавък: наляво;

марж: 5px 12px 3px 0px;

}

</ style>

След това свойството float style се добавя към img selector:

<img src = "foto1.jpg" class = "fotoleft">

В допълнение към подравняването на изображението, използвайки стойността на ляво, то също така задава полето на текста от изображението чрез свойството марж. По подобен начин текстът за опаковане отляво се прави, ако се приложи правилното свойство.

Стиловете ви позволяват да наслагвате текст директно върху изображение. За да направите това, текстът се вмъква в блока с полупрозрачен фон, който се наслагва върху изображението.

Не е толкова трудно да се направи драматично увиване на текста и налагането му върху изображенията, тъй като това се постига чрез последователни експерименти.

Опаковане на изображения в кръгла форма с HTML текст

Уеб страниците се състоят основно от правоъгълни области. Всеки знае как текстът да се превърне в html. Стилът се използва за създаване на геометрични форми, но те не са свързани с полагането на съдържание вътре или извън елементите. Възможно е чертежът да се раздели на 2 части и да се поставят блокове с отвори с различна ширина от двете страни. Зад тях е текстът.

Процесът на създаване на такъв поток отнема време и трябва да се прави отделно за всеки нов модел.

Оформяне на сложни форми

Чрез разработването на новата спецификация на CSS, Shapes е в състояние да повлияе на съществуващия дизайн и да му осигури нови перспективи. Сега съдържанието може да обхване сложни форми и извити области.

Спецификацията се поддържа от браузъра Chrome Canary, а сега се опитват да я внедрят в останалите. Тя ви позволява да създавате сложни проекти без помощта на графични редактори.

HTML обтичането около кръгла снимка се предоставя със следния запис:

#circle

{

форма-вън: кръг (-300px, -300px, 300px); / * (x, y, радиус) * /

поплавък: наляво;

}

<p> Примерен текст </ p>

Кодът създава кръг, който е напълно увит в текст.

По същия начин ще бъде създадена всяка неправилна форма, благодарение на поддръжката на Photoshop, която ще позволи да получите CSS кода на формата.

заключение

Когато създавате оформления на страници, като използвате различни начини за поставяне на изображения и текст върху тях, можете да създадете уникален дизайн. За да направите това, трябва да овладеете основните правила на оформлението, които гарантират, че текстът е опакован около текста с html.