- Малюнки в Інтернеті
- фон сторінки
- Малюнки в документі
- вирівнювання
- відступи
- інші параметри
- Малюнки-посилання
Малюнки в Інтернеті
На Web-сторінках можна використовувати тільки ті типи малюнків, які можуть виводити на екран браузери. Малюнки Web-сторінок зазвичай займають набагато більше місця, ніж текст, тому в мережі Інтернет використовують такі способи кодування, при яких інформація знаходиться в стислому вигляді і расраковивается браузером в момент виведення малюнка на екран. В даний час підтримуються наступні три формату: GIF, JPEG і PNG. Більш докладно про ці формати розказано на виразках в правій частині сторінки.
На великих сайтах може використовуватися дуже багато малюнків. Щоб легше було розбиратися в файлах, все малюнки зазвичай розміщуються в окремому підкаталозі, який часто називають IMAGES.
фон сторінки
Можна вибрати в якості фону сторінки. Для цього використовується параметр BACKGROUND тега BODY. Якщо вказано тільки ім'я файлу, малюнок повинен знаходитися в тому ж каталозі, що і сама Web-сторінка.
<BODY BACKGROUND = "lake.jpg">
Можна вказати також відносна адреса файлу (так само, як в посиланнях) або URL (див. Розділ посилання ).
Якщо малюнок менше, ніж розмір вікна браузера, фон будемо вимощений малюнками-прямокутниками як плиткою. Тому для фону використовують спеціальні малюнки, які не дають швів при стикуванні. Для порівняння нижче наведені приклади фонів з хорошою і поганою стикуванням.
Взагалі небажано використовувати малюнок як фон, тому що він відволікає від читання тексту і розсіює увагу. Тому для сайтів, в яких найважливіше - текст, рекомендується використовувати тільки одноколірний фон.
Якщо ж з якихось причин треба зробити фон-малюнок, він не повинен заважати читання тексту, як у наведеному нижче прикладі:
Зазвичай фоновий малюнок прокручується разом з текстом, однак можна заборонити прокрутку фону, задавши параметр BGPROPERTIES = "fixed" тега BODY:
<BODY BACKGROUND = "lake.jpg" BGPROPERTIES = "fixed">
Малюнки в документі
Для вставки малюнка в Web-документ використовується тег <IMG> (від англійського image - зображення). Цей тег має кілька параметрів, з яких обов'язковий лише SRC (від англійського source - джерело), який вказує, де знаходиться малюнок. Якщо малюнок треба шукати в тому ж каталозі, що і сама сторінка, треба просто написати ім'я файлу. Можна вказати також відносна адреса файлу (так само, як в посиланнях) або URL. наприклад:
<IMG SRC = "image1.jpg">
<IMG SRC = "images / image2.jpg">
<IMG SRC = "http: //server/images/image3.jpg">
Малюнок image1.jpg знаходиться в поточному каталозі, малюнок image2.jpg - в сусідньому каталозі IMAGES, а image3.jpg - на сервері в Інтернеті.
вирівнювання
Малюнок сприймається браузером як «велика буква» в тексті. Тому важливо вказати правильне вирівнювання в параметрі ALIGN тега IMG. наприклад:
<IMG SRC = "image.jpg" ALIGN = "left">
Існує наступні варіанти вирівнювання:
- 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.
Малюнок в першому прикладі вставлений без вказівки відступів
<IMG SRC = "image.jpg" ALIGN = "left">
а малюнок справа - з відступами в 10 пікселів:
<IMG SRC = "image.jpg" ALIGN = "left" VSPACE = "10" HSPACE = "10">
інші параметри
Тег IMG має і інші параметри, найбільш важливі з яких наступні:
- WIDTH - ширина малюнка в пікселах
- HEIGHT - висота малюнка в пікселах
- ALT - текстовий опис
- BORDER - ширина рамки навколо малюнка
Якщо розміри малюнка не вказані, вони визначаються з файлу (для цього, природно, треба завантажити файл з Інтернету). Якщо зазначені розміри не співпадають з розмірами малюнка в файлі, він буде стиснутий або розтягнутий. Рекомендується завжди вказувати розміри малюнка, оскільки це дозволяє браузеру відразу визначити розміри області, без скачування малюнок.
Опис малюнка в параметрі ALT з'являється у вигляді підказки при наведенні курсору миші на цей малюнок. Крім того, якщо у користувача відключений висновок малюнків (для прискорення роботи), на місці малюнка виводиться текст, заданий в параметрі ALT. Цей параметр, так само, як і розміри малюнка, обов'язково вказується на всіх серйозних сайтах.
Ось приклад використання цих параметрів:
<IMG SRC = "photo.jpg" ALT = "Моя фотографія"
WIDTH = "50" height = "80" BORDER = "0">
Малюнки-посилання
Малюнки дуже часто є гіперпосиланнями. Якщо ви хочете зробити малюнок посиланням, треба укласти відповідний йому тег <IMG> всередину тега <A> (див. Розділ посилання ). Наприклад розсилання на сайт mail.ru описується так:
<A HREF="http://mail.ru">
<IMG SRC = "mailru.jpg" BORDER = "0">
</A>
При цьому на екрані браузера ви побачите значок 
, Який і буде посиланням. Нульове значення параметра BORDER тега <IMG> служить для того, щоб позбутися від синьої кордону навколо малюнка-посилання.
Наступний розділ присвячений опису таблиць в мові HTML.