Презентація "HTML. Використання малюнків"

Створення веб-сторінки за обраною темою на мові розмітки гіпертексту НТМLЧастина 2. Розміщення графіки (малюнків)

Використання графіки2 Ви можете використовувати для збереження зображень десятки графічних форматів — GIF, JPEG, PCX, PNG, WMF і інші. Однак при створенні зображень для документів HTML краще вибирати ті формати, що розуміються більшістю броузерів. Це формати GIF та JPG (JPEG). Для того щоб помістити зображення в документ HTML слід використовувати дескриптор з атрибутом SRC, що вказує повний шлях графічного файлу. Наприклад:Таке посилання називається абсолютним, воно вказує шлях до файлу, розміщеного на диску вашого комп'ютера у певній папці, у даному прикладі на диску «D» у папці «min». Можна розміщувати зображення у тій же папці, що і ваша веб-сторінка – тоді шлях можна не вказувати, в першу чергу браузер буде шукати його в цій папці (кореневій, тобто де розміщена веб-сторінка). Наприклад:

Вирівнювання тексту3 Для вирівнювання тексту з зображеннями в рядку у дескрипторі використовувати атрибут ALIGN. Атрибуту ALIGN можна привласнити такі значення: TOP – вирівнює текст по верхньому краю зображення;MIDDLE – вирівнює текст по середній частині зображення;BOTTOM – вирівнює текст по нижньому краю зображення. Наприклад:

Вирівнювання малюнку4 За допомогою атрибуту ALIGN можна визначати місце розташування зображення на Web-сторінці. Так, якщо атрибут ALIGN приймає значення LEFT, то зображення розташовується з лівого боку Web-сторінки і текст обтікає його з правого боку. Якщо атрибут ALIGN приймає значення RIGHT, то зображення розташовується з правого боку, а текст обтікає з лівого. Наприклад:

Розміри малюнку та рамка5 Для зміни розмірів зображення використовують атрибути HEIGHT (висота) та WIDTH (ширина). Воно вказується у пікселях (крапках). Для визначення ширини рамки, що охоплює зображення, слід скористатися атрибутом BORDER. Ширина рамки вимірюється у пікселях. Якщо BORDER = 0, то рамка відсутня. Рака також не відобразиться, якщо не вказати ніякого значення атрибуту BORDER. Наприклад:

Практичне завдання. Частина 21. Створити веб сторінку згідно наведеного завдання (зразку). Порядок виконання наведено на наступному слайді6

Порядок виконання завдання. Відкрийте блокнот та вкажіть основні теги для веб-сторінки (попередня практична). Наберіть текст: Документ створений і вкажіть свої Прізвище ім'я по батькові та клас. З абзацу вставте рисунок 1.jpg (завантажте будь яке зображення з інтернету та збережіть з назвою 1.jpg у папку з створеною веб-сторінкою). Вкажіть за допомогою атрибутів HEIGHT та WIDTH висоту зображення - 200 пікселів, ширину – 300 пікселів. Встановіть таке значення атрибуту ALIGN, що дозволяє вирівнювати текст по верхньому краю зображення. У наступному рядку введіть такий текст: «Цей текст вирівнюється по верхньому краю зображення». З абзацу вставте ще раз рисунок 1.jpg, вкажіть висоту зображення - 220 пікселів, ширину – 320 пікселів. Встановіть таке значення атрибуту ALIGN, що дозволяє вирівнювати текст по середній частині зображення. Встановіть ширину рамки 5 пікселей. Для цього скористайтеся атрибутом BORDER. У наступному рядку введіть такий текст: «Цей текст вирівнюється по середній частині зображення». З абзацу знову вставте рисунок 1.jpg, вкажіть висоту зображення - 240 пікселів, ширину – 340 пікселів. Встановіть таке значення атрибуту ALIGN, що дозволяє вирівнювати текст по нижньому краю зображення. Встановіть ширину рамки 10 пікселей. У наступному рядку введіть такий текст: «Цей текст вирівнюється по нижньому краю зображення». Збережіть Web-сторінку.7