Лабораторна робота №22 Використання графічних зображень в html-документі

22.1 Мета роботи: Отримати навички з підготовки графічних зображень для HTML-документів. Вивчити команди зв’язування графічних зображень з HTML-документом та оволодіти навичками їх практичного використання.

22.2 Порядок виконання роботи.

22.2.1 Відкрити текстовий редактор.

22.2.2 Записати шаблон HTML-документа.

22.2.3 Заповнити заголовок документа. Записати відомості про автора і дату створення документа.

22.2.4 Записати текстову частину (видається викладачем) в тілі документа. Текст повинен бути структурованим за змістом. Кожна завершена за змістом частина тексту повинна мати заголовок. Заголовки оформити відповідними тегами мови HTML.

22.2.5 Зробити розмітку текста на абзаци та форматування тексту.

22.2.6 Вставити в документ графічні зображення, застосувавши відповідні теги мови HTML.

22.2.7 Зберегти файл з розширенням .html і відкрити його програмою-броузером для перегляду та перевірки.

22.3 Теоретичні відомості

Графіка в HTML-документах

Графічні зображення, ілюстрації роблять текст значно інформативнішим. Крім того, вдале використання графіки робить сторінку привабливою, що збільшує аудиторію відвідувачів сторінки при її розміщенні в мережі Internet.

Для зберігання зображень на комп’ютерах використовуються різні методи кодування графічної інформації, що відображається в розширенні назви графічного файла – GIF, JPG, PNG, BMP і т.п. В HTML-документах найбільше використовуються формати GIF, JPG та PNG. Це пов’язано з тим, що вони досить ефективно стискають графічні дані без втрат або з мінімальними втратами якості та швидко декодуються. Невеликі розміри графічних файлів дуже важливі при публікації документів в мережі Internet. Швидкість передачі інформації каналами зв’язку обмежена, тому сторінки великого об’єму будуть довго вантажитись, що створюватиме незручності та дратуватиме користувача.

Помістити графічне зображення в документ дозволяє тег <IMG> з обов’язковим параметром SRC, який вказує адресу графічного файла. Адреса залежить від місця знаходження файла. Якщо файл знаходиться на віддаленому комп’ютері, її записують із зазначенням протоколу доступу (http або ftp) та URL (Uniform Resource Locator) – уніфікованого показчика ресурсу (<IMG SRC=”http://www.nung.edu.ua/images/logo.gif”>). Якщо файл знаходиться на локальному диску, використовується протокол file і вказується шлях до файлу (<IMG SRC=”file:///c:/pics/foto.jpg“>). Якщо файл знаходиться у тому ж каталозі, що й основний файл, то достатньо лише зазначити назву файла (<IMG SRC=”picture.png”>).

Крім параметра SRC рекомендується задавати для графічного зображення наступні параметри:

ALT – альтернативний текст – опис графічного зображення для користувачів, у яких графіка не відображається, або дає інформацію про рисунок в процесі його завантаження. Це особливо ефективно при використанні параметрів WIDTH та HEIGHT, які задають ширину та висоту зображення у пікселях. Слід зауважити, що вказування висоти та ширини зображення менших, ніж реальні значення, не зменшує час завантаження. Броузер завантажує все зображення, а потім вже масштабує його, що помістити в зарезервоване місце. Вказування розмірів рисунка важливе з двох причин:

• по-перше, інформація про зображення прискорює його завантаження. Броузер спочатку показує документ HTML, а потім зображення. Якщо розміри зображення вказані, то броузер покаже відформатований документ паралельно з завантаженням зображення;

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

ALIGN – задає місце розташування зображення на екрані (LEFT - зліва, RIGHT - справа). Якщо зображення знаходиться у рядку текста, то їх взаємне розміщення задається такими значеннями параметра ALIGN: TOP – текст вирівнюється по верху зображення, MIDDLE – по середині, BOTTOM – по низу зображення.

Параметр BORDER задає товщину рамки навколо зображення, а параметри HSPACE та VSPACE задають розміри вільного простору навколо зображення по горизонталі та вертикалі відповідно.

Комплексна лабораторна робота

Створення багатосторінкового документа - Web-сайта

Лабораторні роботи №23-24

Гіперпосилання в HTML-документі

23.1 Мета роботи: Засвоїти використання гіперпосилань. Оволодіти навичками створення гіпертекстових документів.