Малюнки: підручник HTML:

Малюнки в Інтернеті
фон сторінки
Малюнки в документі
вирівнювання
відступи
інші параметри
Малюнки-посилання

Малюнки в Інтернеті

На Web-сторінках можна використовувати тільки ті типи малюнків, які можуть виводити на екран браузери. Малюнки Web-сторінок зазвичай займають набагато більше місця, ніж текст, тому в мережі Інтернет використовують такі способи кодування, при яких інформація знаходиться в стислому вигляді і расраковивается браузером в момент виведення малюнка на екран. В даний час підтримуються наступні три формату: GIF, JPEG і PNG. Більш докладно про ці формати розказано на виразках в правій частині сторінки.

На великих сайтах може використовуватися дуже багато малюнків. Щоб легше було розбиратися в файлах, все малюнки зазвичай розміщуються в окремому підкаталозі, який часто називають IMAGES.

фон сторінки

Можна вибрати в якості фону сторінки. Для цього використовується параметр BACKGROUND тега BODY. Якщо вказано тільки ім'я файлу, малюнок повинен знаходитися в тому ж каталозі, що і сама Web-сторінка.

Можна вказати також відносна адреса файлу (так само, як в посиланнях) або URL (див. Розділ посилання ).

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

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

Якщо ж з якихось причин треба зробити фон-малюнок, він не повинен заважати читання тексту, як у наведеному нижче прикладі:

Зазвичай фоновий малюнок прокручується разом з текстом, однак можна заборонити прокрутку фону, задавши параметр BGPROPERTIES = "fixed" тега BODY:

Малюнки в документі

Для вставки малюнка в Web-документ використовується тег <IMG> (від англійського image - зображення). Цей тег має кілька параметрів, з яких обов'язковий лише SRC (від англійського source - джерело), який вказує, де знаходиться малюнок. Якщо малюнок треба шукати в тому ж каталозі, що і сама сторінка, треба просто написати ім'я файлу. Можна вказати також відносна адреса файлу (так само, як в посиланнях) або URL. наприклад:

Малюнок image1.jpg знаходиться в поточному каталозі, малюнок image2.jpg - в сусідньому каталозі IMAGES, а image3.jpg - на сервері в Інтернеті.

вирівнювання

Малюнок сприймається браузером як «велика буква» в тексті. Тому важливо вказати правильне вирівнювання в параметрі ALIGN тега IMG. наприклад:

Існує наступні варіанти вирівнювання:

top - по верхній межі поточного рядка
bottom - по нижній межі поточного рядка (такий тип вирівнювання встановлюється за умовчанням)
middle - по середині поточного рядка
left - по лівій межі абзацу з обтіканням текстом
right - по правій межі абзацу з обтіканням текстом

Щоб почати новий рядок після малюнка, для якого встановлено обтікання текстом, використовується спеціальний варіант команди <BR> з параметром CLEAR, який показує спосіб вирівнювання малюнка (left або right). У наступному прикладі зліва наведено HTML-код, а справа - зображення у вікні браузера.

<BODY>
<IMG SRC = "web.jpg" ALIGN = "left">
Одне фізичне тіло захотіло поміняти три своїх старих рукавиці на що-небудь хороше.
<BR CLEAR="left">
До самого вечора тіло з рукавицями то змінювало напрямок свого руху, то зупинялося, то знову приходило в рух.
</ BODY>

відступи

Якщо малюнки прилягають впритул до тексту, це заважає читати. Тому рекомендується робити відступи, що відокремлюють малюнок від тексту. Вертикальні і горизонтальні відступи задаються в параметрах VSPACE (від англійського vertical space - вертикальний відступ) і HSPACE (від англійського horizontal space - горизонтальний відступ) тега IMG.

Малюнок в першому прикладі вставлений без вказівки відступів

а малюнок справа - з відступами в 10 пікселів:

інші параметри

Тег IMG має і інші параметри, найбільш важливі з яких наступні:

WIDTH - ширина малюнка в пікселах
HEIGHT - висота малюнка в пікселах
ALT - текстовий опис
BORDER - ширина рамки навколо малюнка

Якщо розміри малюнка не вказані, вони визначаються з файлу (для цього, природно, треба завантажити файл з Інтернету). Якщо зазначені розміри не співпадають з розмірами малюнка в файлі, він буде стиснутий або розтягнутий. Рекомендується завжди вказувати розміри малюнка, оскільки це дозволяє браузеру відразу визначити розміри області, без скачування малюнок.

Опис малюнка в параметрі ALT з'являється у вигляді підказки при наведенні курсору миші на цей малюнок. Крім того, якщо у користувача відключений висновок малюнків (для прискорення роботи), на місці малюнка виводиться текст, заданий в параметрі ALT. Цей параметр, так само, як і розміри малюнка, обов'язково вказується на всіх серйозних сайтах.

Ось приклад використання цих параметрів:

Малюнки-посилання

Малюнки дуже часто є гіперпосиланнями. Якщо ви хочете зробити малюнок посиланням, треба укласти відповідний йому тег <IMG> всередину тега <A> (див. Розділ посилання ). Наприклад розсилання на сайт mail.ru описується так:

При цьому на екрані браузера ви побачите значок , Який і буде посиланням. Нульове значення параметра BORDER тега <IMG> служить для того, щоб позбутися від синьої кордону навколо малюнка-посилання.

Наступний розділ присвячений опису таблиць в мові HTML.

Статьи

малюнки