1. Формати графічних зображень.
2. Вставка картинок в html сторінки
3. Атрибут alt - як запасний варіант
4. Задаємо розміри зображення
5. Вставляємо відео і аудіо за допомогою HTML 5

Привіт шановні читачі блогу! У цій статті ви дізнаєтеся все про те як вставити зображення на html сторінку. У вас є кілька зображень, які ви хочете помістити на свою сторінку або ви хочете помістити на свій сайт логотип? Все це легко. Прочитавши цю статтю, ви зможете без будь-яких труднощів вставляти картинки на свої html сторінки. Для цього ми детально поговоримо про тезі <img> і його атрибути, коротко розглянемо формати графічних файлів, таких як gif, jpeg і png, а також подивимося нові можливості HTML5, які спрощують вставку відео і аудіо на сайт.

Через те що графічні дані і текст html неможливо об'єднати в одному файлі, для їх відображення на сайті застосовується інший підхід, ніж з іншими елементами html-сторінок. Перш за все, графічні зображення, та й інші мультимедійні дані зберігаються в окремих файлах. А для їх впровадження в web-сторінку використовують спеціальні теги, які містять посилання на ці окремі файли. Зокрема таким тегом є тег <img>. Зустрівши такий тег з адресою, браузер спочатку запитує у Web-сервера відповідний файл із зображенням, аудіо- або відеороликом, а тільки потім відображає його на Web-сторінці.

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

Перш ніж вставляти картинки і детально розглядати тег <img>, варто трохи дізнатися про графічних форматах.

Формати графічних зображень.

Існує безліч різних графічних форматів, але браузери підтримують лише кілька. Розглянемо три з них.

1. Формат JPEG (Joint Photographic Experts Group). Досить популярний формат, застосовуваний для зберігання зображень. Підтримує 24-бітовий колір і зберігає всі півтони в фотографіях незмінними. Але jpeg не підтримує прозорість і спотворює дрібні деталі і текст в зображеннях. JPEG використовується в основному для зберігання фотографій. Файли цього формату мають розширення jpg, jpe, jpeg.

2. Формат GIF (Graphics Interchange Format). Головне достоїнство цього формату можливість зберігати відразу кілька зображень в одному файлі. Це дозволяє створювати цілий анімаційні ролики. По-друге він підтримує прозорість. Головний недолік це підтримка всього лише 256-кольорів, що нікуди не годиться для зберігання фотографій. GIF в основному використовується для зберігання логотипів, банерів, зображення з прозорими ділянками і містять текст. Файли цього формату мають розширення gif.

3. Формат PNG (Portable Network Graphics). Це формат був розроблений як заміна застарілого GIF, а також, в деякій мірі, JPEG. Підтримує прозорість, але не дозволяє створювати анімацію. Даний формат має розширення png.

При створенні сайтів зазвичай використовують зображення в форматі JPEG або GIF, але іноді використовують PNG. Головне розібратися в яких випадках який формат краще використовувати. Якщо коротко, то:

Вставка картинок в html сторінки

Отже, як все таки вставити зображення на веб-сторінку? Вставити зображення дозволяє одинарний тег <img>. Браузер поміщає зображення в тому місці веб-сторінки, де зустріне тег <img>.

Код вставки картинки в html сторінку має такий вигляд:

<Img src = "image.jpg">

Даний html-код помістить на веб-сторінку зображення, яке зберігається в файлі image.jpg, який знаходиться в одній і тій же папці з веб-сторінкою. Як ви могли помітити адресу картинки вказується в атрибуті src. Що таке атрибут html-тега я вже розповідав. Так ось, атрибут src обов'язковий атрибут, який служить для вказівки адреси файлу із зображенням. Без атрибуту src тег img не має сенсу.

Наведу ще кілька прикладів вказівки адреси файлу із зображенням:

<Img src = "/ images / image.jpg"> - цей html-код вставить на сторінку картинку з назвою image.jpg, яка зберігається в папці images, розташованої в корені веб-сайту.

В атрибуті src можна вказувати не тільки відносні посилання на зображення. Так як зображення зберігаються в мережі разом з html-сторінками, тому у кожного файлу із зображенням є свій власний url-адреса. Тому в атрибут src можна вставляти url-адресу зображення. наприклад:

<Img src = "http://mysite.ru/images/image.jpg">

Даний код вставить на сторінку зображення з сайту mysite.ru. URL-aдpec зазвичай застосовується, якщо ви вказуєте на зображення, що знаходиться на іншому сайті. Для зображень зберігаються на вашому сайті краще використовувати відносні посилання.

Тег <img> є рядковим елементом, тому його краще поміщати всередину блокового елемента, наприклад всередину тега <p> - абзац:

<P> <img src = "/ images / image.jpg"> </ p>

Давайте попрактікуемся і вставимо на нашу сторінку з попередніх статей про html зображення. Я створю поруч з html-файлом своєї сторінки папку «images» і розміщу туди файл з картинкою «bmw.jpg», який виглядає так:

Тоді html-код сторінки вставленої картинкою буде таким:

<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
<Title> Сайт про автомобілі. </ Title>
</ Head>
<Body>
<H1> Сайт про автомобілі. </ H1>
<p> <img src = "/ images / bmw.jpg"> </ p>
<P> Ласкаво просимо на наш автомобільний сайт. Тут Ви знайдете багато цікавих і корисних статей про автомобілі, про їхні технічні характеристики та особливості. </ P>
<P> Науковою мовою <strong> автомобіль </ strong> це: </ p>
<P> <em> Механічне моторне безрейковий дорожній транспортний засіб мінімум з 4 колесами </ em>. </ P>
<Hr>
<H2> Класифікація автомобілів </ h2>
<P> Автомобілі бувають наступних типів: </ p>
<Ul>
<Li> Легковий; </ li>
<Li> Вантажний; </ li>
<Li> Позашляховик; </ li>
<Li> Баггі; </ li>
<Li> Пікап; </ li>
<Li> Спортивний; </ li>
<Li> Гоночний. </ Li>
</ Ul>
<P> Всі права захищені. & Copy; 2010 рік. <br> Сайт про автомобілі. </ P>
</ Body>
</ Html>

І дивимося результат відображення в браузері:

Як ми бачимо нічого складного в розміщенні зображень на веб-сторінках немає. Далі розглянемо кілька інших важливих атрибутів тега <img>.

Атрибут alt - як запасний варіант

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

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

<P> <img src = "image.gif" alt = "тут повинна бути картинка"> </ p>

І приблизно так це виглядає:

Задаємо розміри зображення

Залишилося ще пару атрибутів тега img, про які вам слід знати. Це пара атрибутів width і height. Ви можете використовувати їх, щоб вказати розміри зображення:

<p> <img src = "image.jpg" width = "300" height = "200"> </ p>

В обох атрибутах вказується розмір в пікселях. Атрибут width вказує браузеру якої ширини має бути зображення, а атрибут height якої висоти. Ці два атрибути можна застосовувати разом і окремо. Наприклад, якщо ви вкажете тільки атрибут width, то браузер підбере висоту автоматично пропорційно зазначеної ширині і також в разі використання тільки атрибута height. У разі якщо ви не вкажіть ці атрибути зовсім, то браузер автоматично визначити розмір зображення перед виведенням його на екран. Варто лише зауважити, що вказування розмірів зображень трохи прискорить роботу браузера при відображенні сторінки.

На цьому про вставці зображень на сторінки поки все, далі розглянемо як вставити аудіо або відео на сайт ...

Вставляємо відео і аудіо за допомогою HTML 5

У новій специфікації html5 з'явилося кілька нових тегів за допомогою яких можна дуже легко вставляти файли мультимедіа. Це перш за все стосується відео і аудіо.

Для вставки аудіо HTML5 надає парний тег <AUDIO>. Адреса файлу, в якому зберігається аудіоролик, вказується за допомогою вже знайомого нам атрибута src:

<Audio src = "sound.wav"> </ audio>

Тег <audio> створює на сторінці блоковий елемент. За замовчуванням браузер не буде відтворює аудіоролик. Що б він це зробив, в тезі <audio> необхідно вказати особливий атрибут autoplay. Особливий, бо він не має значення. Досить одного присутності цього атрибута в тезі, щоб він почав діяти.

За замовчуванням аудіоролик ніяк не відображається на web-сторінці. Але якщо в тезі <audio> поставити атрибут без значення controls, браузер виведе в тому місці веб-сторінки, де проставлено тег <audio>, елементи управління відтворенням аудиоролика. Вони включають кнопку запуску і припинення відтворення, шкалу відтворення і регулятор гучності:

<Audio autoplay controls src = "sound.wav"> </ audio>

Для вставки відеоролика на веб-сторінку призначений парний тег <video>. З цим тегом все те ж саме, що і з тегом <audio> - адреса відеофайлу вказується за допомогою атрибута src, а за допомогою атрибутів autoplay і controls можна запустити Автовідтворення ролика і вивести елементи управління відтворення відеоролика.

Більше розповідати про вставку картинок і мультимедіа на html сторінки особливо нічого. Сподіваюся на питання «Як вставити зображення в html сторінку?» Я вам відповів. тому просто підведу підсумки:

Якщо щось не зрозуміло, питайте в коментарях і не забудьте підписатися на оновлення мого блогу . До зустрічі в наступних постах!