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

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

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


 Тег має такі атрибути, як "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-файлів, то варто створити окрему таблицю стилів).


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