Як вставити зображення на сайт

Як вставити зображення на сайт

Все, що бачить відвідувач на сторінках сайту, відображається браузером на підставі детальних інструкцій, надісланих йому сервером. Ці інструкції називаються html-кодом сторінки і складаються з окремих «тегів», в яких описані тип, зовнішній вигляд і розташування кожного елементу окремо. Щоб помістити в сторінку який або новий елемент (наприклад — зображення), треба в її вихідний код додати відповідну інструкцію — тег. Розглянемо — як це зробити найпростіше.

Інструкція

  1. Якщо ви використовуєте якусь систему управління сайтом, то дуже ймовірно, що в її складі є редактор сторінок. Для початку вам слід відкрити потрібну сторінку в цьому редакторі. Далі — можливі варіанти. У самому вдалому випадку редактор сторінок матиме «візуальний режим», по-іншому — «режим WYSIWYG» (What You See Is What You Get — «що бачиш, те й отримаєш»). У такому режимі вам взагалі не потрібно буде мати справу з вихідним html-кодом! Сторінка в редакторі буде виглядати так само, як і на сайті, досить буде ткнути мишкою в потрібне місце і натиснути на панелі редактора кнопку «вставити зображення».
  2. В результаті відкриється діалогове вікно, в якому вам треба вибрати потрібну картинку. Якщо ви її ще не завантажували — тут же є кнопка для вибору зображення на вашому комп’ютері та завантажити його на сервер. Крім того, в цьому діалозі можна задати колір і ширину рамки навколо зображення, відстань і колір заливки між рамкою і картинкою, текст для підказки. Розміри тут вказувати не обов’язково, але з міркувань прискорення завантаження сторінки і для запобігання спотворення дизайну краще все ж це зробити. Коли всі потрібні поля діалогу заповнені, натисніть «ОК», щоб потім зберегти відредаговану сторінку.
  3. Через те, що єдиного стандарту на системи управління не існує, процедура вставки зображення в візуальному режимі вашої системи може трохи відрізнятися, але принцип буде таким же. З цієї ж причини WYSIWYG-режиму може не виявитися в системі управління вашим сайтом. Тоді все ж таки доведеться редагувати вихідний код сторінки на мові HTML (HyperText Markup Language — «мова розмітки гіпертексту»). Вам потрібно буде вкласти в потрібне місце коду тег, командувач браузеру показати тут зображення. У найпростішому варіанті він повинен виглядати так:

    <img src=»image.gif»>

    Тут вказано «відносний адреса» зображення — за цією адресою браузеру слід звернутися до сервера, щоб отримати від нього файл картинки. Якщо адреса відносний, то браузер буде вважати, що файл лежить в тій же папці сервера, де і сама сторінка (або у вкладеній папці). Але, щоб не помилитися, краще вказувати «абсолютний адреса» — наприклад, так:

    <img src=»http://site.ru/image.gif»>

    Природно, щоб сервер міг знайти і віддати браузеру зображення, його слід закачати у вказане місце. Найпростіше це зробити через файл-менеджер, який є в кожній системі управління сайтом, а так само в панелі управління вашої хостингу компанії. Можна зробити це і по ФТП-протоколу (File Transfer Protocol — «протокол передачі файлів»), скориставшись спеціальною програмою — ФТП-клієнтом. Їх багато, як платних, так і безкоштовних — наприклад, Cute FTP, FlashFXP, WS FTP та ін Але, природно, установка, освоєння та налаштування програми зажадають часу, тому файл-менеджер для завантаження всього необхідного через браузер — простіший варіант.
  4. Крім адреси в html-тегу зображення можна вказувати і додаткову інформацію — «атрибути» тега. Наприклад, атрибут alt містить текст для спливаючій при наведенні курсору миші на зображення підказки:

    <img src=»image.gif» alt=»Текст про картінке»>

    Його можна замінити атрибутом — title:

    <img src=»image.gif» title=»Текст про картінке»>

    -

    Розмір прямокутника, в якому браузері мають відобразити картинку, задають атрибути width і height:

    <img src=»image.gif» width=»200″ height=»100″>

    -

    Атрибут border вказує ширину рамки навколо зображення (у пікселях):

    <img src=»image.gif» border=»2″>

    Якщо зображення зробити посиланням, то браузер намалює навколо неї синю рамку. Щоб її позбутися треба значенням border привласнити нуль:

    <a href=»http://site.ru»> <img src=»image.gif» border=»0″> </ a>

    -

    Два інших атрибута містять інформацію про величину відступів картинки від сусідніх елементів (від рядків тексту, інших картинок, і т.д.) — hspace задає розмір відступу по горизонталі (зліва і справа), vspace — по вертикалі (знизу і зверху):

    <img src=»image.gif» hspace=»5″ vspace=»6″>