Лабораторна робота «Робота із зображеннями»

Лабораторна робота «Робота із зображеннями»
Тема: Графіка
Мета: Опанувати технологію використання графічних зображень при оформленні HTML-документа.
Теоретичні відомості.
Графіка Web-сторінок може містити як прості зображення, так і складні. Важливим у використанні графіки е не міра її складності, а ефективність у питаннях передавання тієї інформації, яку необхідно надати користувачам.
Горизонтальні лінії
Горизонтальні лінії е простим способом поділу великих текстів або виділення частини документа.
Для розміщення горизонтальної лінії використовується тег


(Horizontal Rule). Internet Explorer підтримує різні атрибути тега

, які дозволяють управляти, розміром, товщиною, вирівнюван¬ням, кольором і виглядом тіні від лінії.
Атрибути тега

WIDTH =pixels|percent Дозволяє змінити розмір лінійки, задавши його в пікселях або в процентах від ширини екрана.
ALIGH*LEFT|RIGHT|CENTER Задає вирівнювання частини лінійки (за замовчуванням 1).
SIZE=n Задає товщину лінії (за замовчуванням 1).
COLOR=RGB(a6o назва кольору) Задає колір, яким відображається лінія.
ПРИКЛАД
Файл у форматі HTML:

< TITLE >Моя перша HTML-сторінка




Графічні зображення
Графічні зображення, які демонструються на Web-сторінках, зберігаються в окремих файлах. Для вміщення зображення на сторінку використовують тег , де URL - адреса файла, який містить графічні дані,
Розташування тексту, який слідує за зображенням, і те, як зображення розташоване на сторінці, контролює атрибут ALIGN. За замовчуванням текст з'являється внизу зображення.
Internet Explorer дозволяє використовувати властивості тега IMG, які надають можливість задавати значення висоти і ширини зображення за допомогою атрибутів HIGHT і WIDTH. Висота і ширина вимірюються в пікселях.
Атрибути тега
WIDTH =px Встановлює ширину зображення (у пікселях).
HIGНТ = рх Встановлює висоту зображення (у пікселях).
ALIGN=TOP|MIDDLE|BOTTOM| LEFT|RIGHT Контролює розташування тексту.
Значення атрибуту ALIGN
align="top" Вирівнює текст по верху зображення.
align="middle" Вирівнює базову лінію тексту по центру зображення.
align="bottom" Вирівнює базову лінію по низу зображення.
Приклад


Текст вверху изображения

Текст по центру изображения

Текст внизу изображения



align="left" Розташовує зображення ліворуч, дозволяю¬чи тексту обтікати зображення праворуч
Приклад



Изображение обтекает текст слева

Изображение обтекает текст слева

Изображение обтекает текст слева

Изображение обтекает текст слева



align="right" Розташовує зображення праворуч, дозволя¬ючи тексту обтікати зображення ліворуч.
Приклади
top bottom

middle left

right

Ефективним для розміщення зображень е застосування атрибутів тега
. Використання тега
в його основному варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення, застосовують атрибут CLEAR.
Атрибут CLEAR тега
використовується для того, щоб зупинити у зазначеній точці обтікання текстом об'єкта, а потім продовжити текст у порожній зоні за об'єктом. Текст, який продовжується за об'єктом, вирівнюється у відповідності із значеннями LEFT, RIGHT або ALL атрибуту CLEAR:

- перериває рядок і очищає ліве поле (текст буде продовжений, починаючи з найближчого порожнього лівого поля);

- перериває рядок і очищає праве поле (текст буде продовжений, починаючи з найближчого порожнього правого поля);

перериває рядок і очищає обидва поля (текст буде продовжений, як тільки ліве і праве поля виявляться порожніми).
Наприклад, якщо зображення вирівняне ліворуч, а текст обтікає його праворуч, тоді необхідно очистити ліве поле, щоб якийсь інший елемент, який слідує за текстом, не виявився розміщеним праворуч від зображення.
Приклад


Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.


До самого вечера тело с варежками то меняло направление своего движения, то останавливалось, то снова приходило в движение.

Традиційно формати GIF і JPEG є переважаючими типами, але останнім часом стає все більш популярним формат PNG (перш за все із-за витрат формату GIF). Формат PNG за багатьма параметрами перевершує JPEG і GIF: мільйони кольорів і ефективне стиснення.
Ви можете легко вставляти зображення:
• малюнок знаходиться в ті же папці, що і веб-сторінка: ;
• малюнок лежить у папці images: ;
• якщо веб-сторінка лежить у папці, то потрібно вказати повних шлях до малюнка: ;
• малюнок розташований на іншому сайті: .
Вам завжди потрібно використовувати атрибут src, який вказує браузеру, де знаходиться зображення. Крім цього є ще й інші атрибути, які можуть знадобитися при роботі з зображеннями.
Атрибут alt використовується для альтернативного опису зображення, якщо, з якихось причин, воно не показано користувачеві. Це особливо стосується користувачів з вадами зору, або якщо сторінка дуже повільно завантажується. Отже, завжди потрібно використовувати атрибут alt :
HTMLbook.at.ua logo
Атрибут title можна використовувати для короткого опису зображення:

Два інших важливих атрибути - width і height:

Атрибути width і height можна використовувати для установки ширини і висоти зображення, відповідно. Значення вказується в пікселях. Піксель це одиниця для вимірювання роздільної здатності екрана. (Звичайний дозвіл - 800x600 і 1024x768 пікселів). На відміну від сантиметрів, пікселі є відносними одиницями, які залежать від вирішення даного екрану. Для користувача з високим дозволом екрану 25 пікселів можуть виглядати як 1 сантиметр, а ці ж 25 пікселів при низькій роздільній здатності можуть відповідати 1.5 сантиметрам екрану.
Якщо ви не встановите width і height, зображення буде показано у своєму реальному розмірі. За допомогою widthі height ви можете змінювати розміри:

Вставлений малюнок на веб-сторінку можна розташовувати в тексті:
• використовуючи атрибути left, right малюнок встановлюється зліва чи справа відповідно -
Текст розташовується під малюнком (за замовчуванням), посередині, зверху:



Можна задати відстань між малюнком і текстом справа та зліва чи вгорі та внизу:


Створення рамки навколо малюнка:

Всі параметри можуть використовуватись одночасно один з одним.

Створення фону веб-сторінки з використанням малюнка:

Завдання

Створити веб-сторінку за зразком

1. Використати теги заголовків
2. Використати маркований список
3. Використати тег br різної товщини і кольору.
4. Використати різні способи вирівнювання зображень, а також атрибути зображень
Змінити довжину другого зображення. Встановити вертикальні і горизонтальні для всіх зображень

Текст1

Батьківщиною сіамських котів є Таїланд. Там ця порода раніше вважалася священною, її шанували в храмах та охороняли законом. В королівській сім’ї сіамська кішка використовувалася для проведення деяких ритуалів. Через все це вивозити цих котів за кордон було заборонена. Однак,з часом, вона все одно потрапила в Європу. Сіамські коти часто згадуються в таїландських легендах і оповідях. Наприклад, в одній з них говориться, що кішка цієї породи завжди супроводжувала тайську принцесу під час купання в річці. Принцеса перед купанням знімала свої обручки та насаджувала на хвіст кішці, щоб та оберігала їх поки господиня купається. Одного разу кішка загубила обручку і з того часу принцеса завжди зав’язувала їй вузлики на кінчику хвоста. До речі про вузлики, – колись в Таїланді наявність вузликів і заломів на хвості вважалось характерною ознакою особливості кішки. Зараз вже відомо, що вони утворювались в наслідок схрещування близьких родичів. В наш час наявність вузликів чи заломів вважається дефектом. Навіть зараз достовірно не відоме походження сіамських котів. Найімовірніше, ця порода походить від диких бенгальських котів. В Європі порода почала поширюватися в кінці 19-го століття, коли англійський консул привіз перших кішок, які були подарунком самого тайського короля Сіама. До Америки й інших країн порода добралася трохи пізніше. Сьогодні сіамські коти бувають близько 40 різновидів, серед яких є і монотонні (чорні, лілові, блакитні, кремові та інші). Породисті сіамські коти мають коротку, блискучу і щільну шерсть, витончені форми тіла. Останнє забезпечується невеликим розмірами та вузьким кістяком. Водночас сіамські коти володіють досить потужними і мускулистими плечима та стегнами.

Текст 2
Стандарт породи сіамська кішка
Порода середньої величини з струнким і мускулистим тілом. Шия довга і струнка, плечі та грудна клітка на ширині стегон.
Кінцівки довгі і стрункі, лапи овальні, витончені.
Хвіст дуже довгий і тонкий, на кінчику гострої форми.
Голова клиноподібна, ніс довгий і прямий, лоб плоский.
Текст 3
Характер сіамських котів
Сіамські коти вважаються одними з найрозумніших і допитливих серед собі подібних домашніх улюбленців. Ця порода досить непередбачувана і схильна до ревнощів. Сіамські коти влюблять постійно бути у компанії хазяїна, а тому будуть старатися скрізь слідувати за ним. Ця порода добре піддається навчанню, а тому, якщо бути терплячим, кота можна навчити різним трюкам. Представники сіамської породи грайливі, ласкаві та віддані коти. Вони потребують постійної уваги від людини, тому якщо у ви не зможете приділяти своєму улюбленцю достатньо часу – виберіть якусь іншу породу котів. Стосується ця порада і тих, хто любить мир і спокій в будинку, так як сіамські коти дуже енергійні. Деякі власники навіть зазначають, що ці коти ведуть себе скоріше як собаки, ніж як коти.