Робота з зображеннями

Робота з зображеннями

Графіка на Web-сайтах грає важливу роль. Порушуючи монотонність довгих текстових сторінок, вона може передавати зміст контексту, бути елементом естетики сторінок або служити рекламою (важливо при комерційної діяльності). При всіх перевагах зображень ними не можна зловживати. Причина в тому, що більшість користувачів Інтернету ще не вибрали високошвидкісний доступ через його дорожнечу, а велика кількість картинок викликають у них непомірне очікування при завантаженні, яке обертається в "межа" терпіння. Оптимальний баланс графічних файлів - 50-80 kb на кожну сторінку. Щоб вкладеться в ці рамки стискайте файли в формат GIF або JPEG, оптимізуйте готові зображення в цих форматах (за принципом "розмір-якість").

Приступаючи до описів засобів мови HTML, призначених для розміщення зображень на Web-сторінці, зберіть потрібні зображення в одну папку. Так Ви заощадите масу часу.

Для вставки файли зображень на сторінку призначений один єдиний тег <IMG>. Ось його атрибути:

  • SRC - вказує адресу зображення. Завжди застосовується до тегу <IMG>
  • WIDTH - ширина зображення. (Вимірюється в пікселях (px))
  • HEIGHT - висота картинки (px)
  • ALIGN - спосіб вирівнювання зображення на сторінці (значення left (ліворуч), right (праворуч), top (верх), bottom (низ), middle (середина))
  • VSPACE - відступ від тексту по вертикалі (px)
  • HSPACE - відступ від тексту по горизонталі (px)
  • ID або NAME -прісваівает ім'я (якщо на зображення робиться внутрішня посилання)
  • BORDER - товщина рамки (px)
  • USEMAP - карта посилань
  • ALT - коментарі, які будуть видні при наведенні миші на зображення

Атрибути до тегу <IMG> застосовуються в міру необхідності за винятком першого. А код в сторінці може виглядати так:

<IMG SRC = "img / tchk.gif" WIDTH = "5" HEIGHT = "5" HSPACE = "5" VSPACE = "5" BORDER = "0" ALIGN = "left">

Зверніть увагу, що немає закриває тега </ IMG>.

Габарити зображення слід вказувати - реальні, щоб уникнути некоректних відображень картинок на екрані.

Особливо хочемо відзначити важливий атрибут ALIGN. З його допомогою зображення позиціонується по екрану:

  • щодо тексту (код зображення вставляється в контейнери <P> </ P> і <DIV> </ DIV>, позиціюючись між собою). Приклад: <P ALIGN = "left"> <IMG SRC = "адреса" ALIGN = "right"> текст </ P>
  • щодо таблиці (код зображення вставляється в осередок таблиці - контейнер <TD> </ TD> і вирівнюється щодо осередку)
  • щодо порожньої сторінки

Примітка: Зображення не може бути вирівняні по вертикалі звичайним методом. Для цього помістіть його в контейнер <P> </ P> або <DIV> </ DIV>, де в останніх поставте "ALIGN" з потрібними значеннями.

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

Замість атрибутів VSPACE, HSPASE, BORDER і ALIGN на практики прийнято застосовувати каскадні листи стилів.

Щоб повністю вникнути в цей процес однієї теорії буде замало, тому приступайте до практичних занять на своєму ПК.