Як помістити картинку на сайт

Як помістити картинку на сайт

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

Інструкція

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

    <img src=»newImage.gif»>

    Тут img — це назва тега, по ньому браузер робить висновок, що тут повинна бути відображена картинка. Атрибут src містить адреса та назва файлу зображення. Якщо файл буде поміщений в ту ж папку, де лежить сторінка, то повний URL вказувати не обов’язково. Додати спливаючу при наведенні курсору підказку можна за допомогою атрибут title, а ширину рамки можна вказати в атрибуті border:

    <img src=»newImage.gif» title=»Вспливающая подсказка» border=»2″>

    Замініть потрібні атрибути своїми значеннями і вставте отриманий HTML-код тега в исходник сторінки. Це можна зробити і в простому текстовому редакторі, скачавши исходник з сервера вашого сайту, а потім завантаживши його назад.
  5. Завантажте на сайт файл картинки. Зробити це можна за допомогою файл-менеджера системи управління або панелі хостинг-провайдера, а можна скористатися резидентну програму — ФТП-клієнтом. Перший варіант простіший, оскільки не вимагає установки і налагодження програми — файл-менеджер працює безпосередньо в браузері.