Початківцям веб-дизайнерам: як зробити обтікання картинки текстом

У цій статті ми розповімо вам про ті особливості HTML і CSS, які пов`язані із зображеннями. Ви дізнаєтеся, як вставити їх в HTML-документ. Також в статті наведена інформація про те, як змінити параметри малюнка і організувати обтікання картинки текстом.

Спочатку - про вставці зображення. Для цього існує тег "img", у якого є декілька атрибутів. Основний з них - "src". У ньому зберігається адреса, з якого браузер зможе вставити картинку. Можна вказати шлях до зображення, уже збереженого в комп`ютері, або дати посилання на веб-ресурс.

Наступна важлива пара атрибутів - "width" (ширина) і "height" (висота). Вони використовуються для того, щоб вручну змінити розміри картинки (корисна опція для розтягування і стиснення зображення).

Далі йдуть параметри "hspace" і "vspace" (відстань від зображення до навколишнього його тексту). Ясно, що "hspace" - горизонтальний відступ, а "vspace" - вертикальний.

У тега є такі атрибути, як "alt" і "title". Вони схожі між собою, так як призначенням їх є опис картинки. Але в "title" прописується текст, який показується при наведенні мишки на зображення, а буквене значення атрибута "alt" відображається в тому випадку, якщо картинку завантажити не вдалося.

Існує ще декілька специфічних атрибутів, присутніх у більшості тегів. Це "accesskey", "class", "id" та "style". "Accesskey" задає поєднання клавіш, за допомогою якого здійснюється доступ до об`єкта. "Class" і "id" - параметри, пов`язані з CSS. Вони описують те, до якого класу належить картинка (або її ідентифікатор). "Style" - атрибут тексту, що дозволяє задати вбудований CSS-стиль зображення.

Одним з параметрів, які задають зовнішній вигляд картинки, є "border". Він визначає товщину рамки навколо об`єкта і може бути заданий будь-яким цілим позитивним числом (в пікселях).

Наступний атрибут - "align". Він описує обтікання картинки текстом. Цей параметр може приймати значення "bottom", "middle", "left", "right" і "top". Кожне із значень визначає те, де буде знаходитися картинка щодо тексту. Наприклад, при значенні "middle" середина зображення буде вирівнюватися по нижній межі тексту, а при "left" - об`єкт буде знаходитися ліворуч від тексту. Але це тільки один із способів задати обтікання картинки текстом - HTML.

Є й інший потужний інструмент - CSS (значно більш універсальний). З його допомогою можна набагато ефективніше задати атрибути тега, в тому числі і обтікання картинки текстом. CSS дозволяє визначити параметри не тільки конкретного об`єкта, а й усіх йому подібних. Наприклад, якщо ви хочете задати відступи всіх картинок в документі рівними десяти пикселям, то достатньо підключити до нього CSS-файл з однією-єдиною рядком: "img {margin: 10px 10px 10px 10px-}" (на практиці лапки не потрібні!).

А обтікання картинки текстом, наприклад, по лівому краю задається так: "img {align: left-}".

До речі, для додавання CSS-коду зовсім не доведеться писати його у файлі. Для цього в HTML передбачений тег "style", в який можна вставляти CSS-код. Але він буде працювати тільки для даного документа (якщо потрібно додати один і той же код в кілька HTML-файлів, то варто створити окрему таблицю стилів).

Тепер ви зможете "розбавити" сайт зображеннями, скориставшись корисними властивостями тега, який за це відповідає. Сміливо використовуйте зміна розмірів або обтікання картинки текстом. Веб-сторінки без графічних складових - досить сумне видовище, чи не так?