За начинаещи: как да нарисувате текст около изображението

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

Първо - за вмъкване на изображение. За да направите това, има маркер "img" който има няколко атрибута. Основната е "src". Той съхранява адреса, от който браузърът може да вмъкне снимката. Можете да посочите пътя към изображението, което вече е запазено в компютъра, или да дадете връзка към уеб ресурса.

Следващата важна двойка атрибути е "ширина" и "височина". Те се използват за ръчно преоразмеряване на изображението (полезна опция за опъване и компресиране на изображението).

След това, параметрите "hspace" и "vspace" (разстояние от изображението до околния текст). Ясно е, че "hspace" е хоризонтално тире и "vspace" е вертикално.

Маркерът има атрибути като "alt" и "title". Те са подобни една на друга, тъй като тяхната цел е да опишат картината. Но в заглавието има текст, който се показва, когато задържите курсора на мишката върху изображението, а буквата на атрибута "alt" се показва, ако снимката не се зареди.

Има няколко по-специфични атрибута, които присъстват в повечето маркери. Те са "accesskey", "class", "id" и "style". Настройва се "Accesskey" комбинация от клавиши, с които е достъпен обектът. "Клас" и "id" са параметри, свързани с CSS. Те описват към кой клас принадлежи картината (или нейния идентификатор). "Стил" е текстов атрибут, който ви позволява да зададете вградено изображение в стил CSS.

Един от параметрите, определящи външния вид на изображението, е "граница". Той определя дебелината на рамката около обекта и може да бъде определен от всяко положително цяло число (в пиксели).

Следващият атрибут е "подравняване". Той описва потока около картината с текст. Този параметър може да приеме стойностите "долно", "средно", "ляво", "надясно" и "нагоре". Всяка от стойностите определя къде ще бъде картината по отношение на текста. Например, ако стойността е "средата", средата на изображението ще бъде подравнена в долната част на текста, а когато "ляво" - обектът ще бъде отляво на текста. Но това е само един от начините за настройване на текстовия поток около текста - HTML.

Има още един мощен инструмент - CSS (много по-гъвкав). С негова помощ можете по-ефективно да зададете атрибутите на маркера, включително потока около текста на картината. CSS ви позволява да дефинирате параметрите не само на определен обект, но и на всички подобни. Например, ако искате да зададете отстъпа на всички изображения в документа е десет пиксела, това е достатъчно, за да се свържете с нея на CSS-файл с един бод: "IMG {марж: 10px 10px 10px 10px;}" (на практика, кавичките не са необходими!).

И потокът около картината с текст, например от лявата страна, е зададен по следния начин: "img {align: left;}".

Между другото, за да добавите CSS-код не трябва да го пиша във файла. За да направите това, HTML предоставя маркер "стил", в който можете да вмъкнете CSS-код. Но тя ще работи само за този документ (ако искате да добавите същия код към няколко HTML файла, тогава трябва да създадете отделен стилов лист).

Сега можете да "разредете" сайта с изображения, като използвате полезните свойства на маркера, който е отговорен за това. Чувствайте се свободни да приложите преоразмеряване или обвиване на текст около снимката. Уеб страниците без графични компоненти са доста скучна гледна точка, нали?