Щоб додати зображення на веб-сторінку використовується елемент <img>, атрибут src якого визначає адресу графічного файлу. Загальний синтаксис додавання зображення наступний.

Обидва атрибута src і alt є обов'язковими.

Атрибут src задає шлях до графічного файлу, для його вказівки можна використовувати як абсолютний, так і відносний адресу.

Альтернативний текст

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

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

Приклад 2. Використання alt

Якщо для зображень потрібно видима підказка, то слід скористатися глобальним атрибутом title, який можна додавати до будь-якого елементу, а не тільки до картинок. При наведенні курсора на зображення з'явиться текст, що містить значення атрибута title:

Зміна розмірів малюнка

Для зміни розмірів малюнка у елемента <img> передбачені атрибути width (ширина) і height (висота). Як значення використовуються пікселі або відсотки. У прикладі показано додавання цих атрибутів до <img>:

Атрибути width і height не є обов'язковими, після завантаження зображення браузер самостійно встановить його вихідний розмір. В основному ці атрибути застосовуються в наступних цілях:

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

Атрибути width і height не обов'язково повинні йти разом. Якщо якийсь із цих атрибутів не вказано, то браузер самостійно підставить потрібне значення виходячи з пропорцій зображення.

Крім пікселів в якості розмірів допустимо використовувати відсотковий запис. В такому випадку ширина задається щодо батьківського елементу.

Інструкційна

Інструкційна картка

Завдання № 1. Вирівнювання зображень

1. В мережі Інтернет знайти зображення квітів у форматі .jpg, зберегти на локальний диск у свою папку. Перейменувати файл з квітами у kvitu.jpg. Запустіть програму редактору коду і ввести наступний HTML код:

<HTML>

<TITLE> Вирівнювання зображень </TITLE>

<BODY> Вирівнювання <IMC SRC=kvitu.jpg ALIGN=top> по верхньому краю

<Р> Вирівнювання по <IMG SRC= kvitu.jpg ALIGN=BASELINE>базовій лінії

</BODY>

</HTML>

2. Зберегти файл та переглянути в браузері результат.

Завдання № 2. Задання розмірів зображень

1. Запустіть програму редактору коду і ввести наступний HTML код:

<HTML>

<TITLE> Задання розмірів зображень </ TITLE>

<BODY>

<IMG SRC = kvitu.jpg WIDTH = 300>

<IMG SRC = kvitu.jpg >

<IMG SRC = kvitu.jpg WIDTH = 75>

</ BODY>

</ HTML>

Завдання № 3. Використання параметрів HSPACE і VSPACE

1. Знайти в мережі зображення лисиці, зберегти у свою папку під іменем fox.jpg. Запустити програму редактору коду і ввести наступний HTML-код:

<HTML>

<Title> Використання параметрів HSPACE і VSPACE </ title>

<BODY>

<IMG SRC = fox.jpg ALIGN = left HSPACE = 20 VSPACE= 20 >

Лисиця - одна з популярних героїнь дитячих казок. Вона струнка, витончена, у неї подовжений тулуб на невисоких ногах. З усієї її загальної довжини приблизно 40% припадає на пухнастий хвіст. Дивно добре пристосувалася вона до самих різних рівням, але більше інших любить відкриті місця з невеликим лісом, ярами, пагорбами, уникає лише глухої тайги і пустель.

Лисиця дуже моторна, звичайна манера її пересування - некваплива рисця. Лисиця - чудовий мисливець: Крім спостережливості та кмітливості, у неї відмінна зорова пам'ять, гарний нюх і гострий слух

</ BODY>

</ Html>

Завдання № 4. Використання параметру BORDER

1. Запустити програму редактору коду і ввести наступний HTML-код:

<HTML>

<TITLE> Зображення в рамці </ TITLE>

<BODY>

<IMG SRC = fox.jpg >

<IMG SRC = fox.jpg BORDER = 1>

<IMG SRC = fox.jpg BORDER = 5>

<IMG SRC = fox.jpg BORDER = 10>

</ BODY>

</ HTML>

Завдання № 4. Альтернативний текст

1. Запустити програму редактору коду і ввести наступний HTML-код

<TITLE>Альтернативний текст </TITLE>

<BODY>

<IMG SRC= fox.jpg ALT="лисиця">

</BODY>

</HTML>

Завдання №5. Породи собак

1. Створити у свої папці папку проекту dog, в папці dog створити файл index.html та папку img. В папку img з мережі інтернет помістити зображення порід собак в форматах .jpg або .png. В файлі index.html на сторінці розмістити заголовок 1 рівня "Породи собак". У заголовках 2 рівня розмістити назву породи собаки, опис породи та фотографію породи.

2. Після формування вмісту сторінки створити перелік посилань на породи собак після заголовку 1 рівня і якоря в для цих посилань в заголовках 2 рівня по тексту

Завдання №6. Улюблена казка

Створити сторінку з улюбленою дитячою казкою та проілюструвати її зображеннями

Завдання №7

1. Вірус пошкодив вихідний код вихідного файлу, потрібно його відновити, скачайте собі у робочу папку пошкоджений файл та виправіть помилки.

<html>

<head>

<title>Змагання</title>

</head>

<bodi bjcolor=#E6F9FF>

<marquee with=100 height=10 bgcolor=#F0CA60>

WEB-ДИЗАЙН НАЙКРАЩИЙ ГУРТОК 

</marquee>

Команда "________" гуртка Web-дизайн 

 НАЙРОЗУМНІША 

<img victory.gif vspace=-20>

</bodi>

<html>

Світ математики: Вітання учнів

victory.gif - назвіть зображення.

Рефлексія від 3 учнів

Сподобався:

Так: 2

Ні: 1

Зрозумілий:

Так: 2

Ні: 1

Потрібні роз'яснення:

Ні: 2

Так: 1

провести урок серед своїх учнів на основі цього уроку

призначити в журнал Створити урок на базі цього або додати запитання до вже існуючого уроку

Рекомендуємо

Додавання до веб-сторінки графічних та мультимедійних елементів. Додавання до веб-сторінки гіпертекстових елементів

519

Лизько Валентина Степанівна

Інформатика

8 клас

33 грн

ПР "Додавання мультимедійних елементів на сторінку сайту"

306

Киреєва Оксана Анатоліївна

Інформатика

11 клас

50 грн

Правила ергономічного розміщення відомостей на веб-сторінці. Види сторінок сайту

557

Лизько Валентина Степанівна

Інформатика

8 клас

33 грн

Розміщення графіки, аудіо-інформації на веб- сторінках

307

Чернишева Антоніна Вікторівна

Професійна освіта

11 клас та II курс

75 грн

Об’єктна модель документа. Веб-програмування та інтерактивні сторінки

243

Чернишева Антоніна Вікторівна

Інформатика

10—11 клас

83 грн

Технології опрацювання мультимедійних даних

127

Брусенцова Катерина Юріївна

Інформатика

10 клас

50 грн

Дивитись ще

Схожі уроки

Впорядкування, пошук і фільтрування даних.

1309

Вожга Ірина Леонідівна

Інформатика

9 клас

Створення й уведення структури таблиць. Поняття таблиці, поля, запису. Створення таблиць, означення полів і ключів у середовищі СКБД. Властивості полів, типи даних.

1134

Савка-Ржематорська Оксана Василівна

Інформатика

9 клас

Цикли з передумовою у вкладених циклах

1361

Вожга Ірина Леонідівна

Інформатика

6 клас

Налаштування часових параметрів аудіо- та відеоряду.

509

Солодовнікова Катерина Олексіївна

Інформатика

8 клас

Елемент керування «кнопка». Поняття об’єкту та його властивостей і методів (на прикладі елементів екранної форми). Властивості і методи елементів керування.

662

Пилипенко Олена Володимирівна

Інформатика

8 клас

Елемент керування кнопка

293

Пилипенко Олена Володимирівна

Інформатика

8 клас

Дивитись ще