ЗАГОЛОВОК
1. Подання HTML зображення на Web-сторінці
1.1 Завдання параметрів зображення
1.2 Завдання фону у вигляді зображення
1.3 Позиціонування елементів на Web-сторінці
2 Подання відеофрагментів та звуку на Web-сторінці
Приклад 1
1 Подання HTML зображення на Web-сторінці
1.1 Завдання параметрів зображення
Для приміщення HTML графічних зображень на Web-сторінку застосовується тег <IMG>, який використовує наступні параметри:
- SRC - URL адресу файлу з графічним зображенням. URL (Universal Resource Locator) має наступний формат: http://host[:port][path], де
- http (hypertext transfer protocol) - назва протоколу передачі гіпертексту (HTML-документа Web сторінки);
- - host IP-адреса або доменне ім'я комп'ютера;
- port - номер порту;
- path - шлях до файлу на комп'ютері.
- ALT - текстовий рядок, що виводиться на екран замість зображення у випадках, коли зображення з якоїсь причини, наприклад, в настройках браузера встановлено заборону на завантаження зображень, не може бути розміщено на Web-сторінку;
- ALIGN - вирівнювання зображення щодо тексту:
- left - зображення розташовується ліворуч від тексту;
- right - зображення розташовується праворуч від тексту;
- top - верхній край зображення вирівнюється по верхньому краю тексту;
- middle - центр зображення вирівнюється по нижній рядку тексту;
- bottom - нижній край зображення вирівнюється по базовій лінії тексту (задається за замовчуванням);
- textop - верхній край зображення вирівнюється по верхньому краю самого високого символу в рядку;
- absmiddle - центр зображення вирівнюється по центру навколишнього тексту;
- baseline - те ж, що bottom;
- absbottom - нижній край зображення вирівнюється по нижньому краю рядки з урахуванням нижніх "хвостиків".
- HEIGHT - висота зображення в пікселях або у % від висоти вікна;
- WIDTH - ширина зображення в пікселях або у % від ширини вікна;
- HSPACE - інтервал у точках від тексту по горизонталі;
- VSPACE - відступ у пікселях від тексту по вертикалі;
За допомогою параметрів HEIGHT і WIDTH здійснюється масштабування зображень. Масшабирование дозволяє зменшити розмір файлу із зображенням для його більш швидкої передачі по мережі.
Можна відзначити і наступну особливість - якщо вказані параметри HEIGHT і WIDTH, то на екрані спочатку з'являється прямокутник без зображення, потім текст і тільки потім зображення. Якщо з тексту випливає, що даннаяWeb-сторінка не представляє інтересу, можна не чекаючи завантаження зображення, перейти до наступної сторінки. Інакше щоб отримати текстову інформацію, необхідно дочекатися повного завантаження зображення.
Якщо HTML-документі вказано лише один з параметрів (HEIGHT або WIDTH), то другий параметр буде змінено пропорційно зміні першого.
прикладі №1 показано завдання параметрів зображення при приміщенні його на екран (файл "fish.gif").
1.2 Завдання фону у вигляді зображення
Для завдання фону у вигляді зображення в тегах, в яких можна вказувати фон (BODY, TABLE, TR, TH або TD), замість параметра BGCOLOR, необхідно використовувати параметр BACKGROUND, значенням якого є адреса графічного файлу. Якщо зазначене зображення менше області екрана, для якої створюється фон, то воно повторюється і по горизонталі і по вертикалі, заповнюючи повністю всю зазначену область (весь екран, таблицю або комірку в таблиці).
пНапример, якщо файл "bg.gif" містить зображення 
, то в результаті виконання тега
<BODY BACKGROUND="bg.gif">
весь екран заповнитися сіткою, що складається з таких синіх квадратів.
Разом з параметром BACKGROUND при завданні фону у вигляді зображення також можна використовувати параметр BGPROPERTIES з значенням FIXED. У цьому випадку при прокручуванні сторінки фонове зображення залишиться нерухомим (ефект водяних знаків).
Каскадні листи стилів CSS для завдання фону на Web-сторінці використовують наступні властивості:
- background-color - вказує колір фону, має такі значення:
- ім'я кольору;
- #RrGgBb;
- #RGB;
- transparent (прозорий фон).
- background-image - задає фон у вигляді зображення, має такі значення:
- none - фон у вигляді зображення не вказано ;
- url(ім'я графічного файлу).
- background-repeat - вказує на повторюваність зображення:
- repeat - зображення повторюється по горизонталі і по вертикалі (приймається за замовчуванням);
- repeat-x - зображення повторюється по горизонталі;
- repeat-y - зображення повторюється по вертикалі;
- norepeat - зображення не повторюється.
- background-attachment - вказує властивості ковзання фону:
- scroll - фон ковзає разом з вмістом Web сторінки при її прокрутки;
- fixed - фон залишається нерухомим при прокручуванні web-сторінки (цей параметр застосовується тільки для тегу <BODY>).
- position - задає позицію фонового зображення щодо верхнього лівого краю області. Для цього властивості зазвичай ставлять два значення, розділені пробілами:
- [top|center|bottom][left|center|right];
- [pt mm cm][[pt mm cm];
- [px %][px %].
Якщо замість двох значень задається одне, то вважається, що вказана позиція по горизонталі, а позиція по вертикалі приймається рівною 50%
Для властивості background можна вказати скорочений спосіб завдання значень, наприклад, background: url(bg.gif) fixed.
пИспользование каскадних аркушів стилів для завдання фону на Web-сторінці показано в прикладі №1.
1.3 Позиціонування елементів на Web-сторінці
Позиціонування, тобто розташування елементів на Web-сторінці здійснюється за допомогою властивості CSS position, яке має такі параметри:
- static;
- relative;
- absolute;
Значення static, що приймається за замовчуванням, означає, що браузер буде розташовувати елементи на Web-сторінці відповідно зі своїми правилами в тому порядку, в якому вони зазначені в HTML-документі.
Значення relative означає, що браузер буде мати елемент на Web-сторінці в місці, яке відрізняється від місця, встановленого за замовчуванням (тобто з допомогою властивості static) на величину, зазначену з допомогою властивостей left та top.
Значення absolute означає, що браузер буде мати елемент на Web-сторінці в місці, безпосередньо заданому з допомогою властивостей left та top. У цьому випадку властивість left задає відстань у точках від лівої межі екрану до елемента, а властивість top - відстань у точках від верхньої межі екрану до елемента.
За допомогою CSS можна також зробити видимим на Web-сторінці не весь елемент, а тільки його частину. Це здійснюється за допомогою властивості clip , яке має такі значення:
- auto - робить видимим весь елемент (задається за замовчуванням);
- rect(верхня межа, права межа, нижня межа, ліва кордон) - робить видимим частину зображення у вигляді прямокутника, обмеженого зазначеними межами, визначеними в пікселях і отсчитываемыми від лівого верхнього кута зображення.
При завданні абсолютних координат для елементів Web сторінки стає можливим накладення на екрані одного елемента на інший, тобто створення багатошарового зображення. У цьому випадку верхнім браузер помістить елемент, який в HTML-документі стоїть пізніше іншого.
Разом з тим є можливість для кожного елемента задавати номер шару явно. Це робиться за допомогою властивості CSS z-index, значенням якого є число. Чим більше число, тим більш високому шару відноситься елемент. По замовчуванню всіх елементів Web сторінки присвоюється значення z-index:0.
Використання каскадних аркушів стилів для позиціонування елемента, подання тільки його частини і завдання двох шарів на Web-сторінці показано в прикладі №1.
2 Подання відеофрагментів та звуку на Web-сторінці
Існує кілька форматів файлів із відеофрагментами. Наприклад, розроблений фірмою MicroSoft стандарт AVI (Audio-Video Interlaced - перемежающийся аудіо-відео).
пДля вказівки відеофрагменту на Web-сторінці можна використовувати той же тег <IMG>, що і для завдання зображень, що містить наступні параметри:
- DYNSRC - вказує URL адресу файлу з видеофрагментом;
- SRC - вказує URL адресу файлу із зображенням, яке виводиться на екран у тому випадку, коли відеофрагмент не може бути завантажений на Web-сторінку;
- START - вказує, як здійснюється запуск відеофрагменту:
- fileopen - відразу після завантаження web-сторінки;
- mouseover - після наведення на відеофрагмент вказівника миші.
- LOOP - вказує кількість повторень відеофрагменту (-1 або infinite - необмежено) ;
- Для завдання розміру і вирівнювання відеофрагментів використовуються ті ж параметри (HEIGHT, WIDTH і ALIGN), що і для зображень.
До недоліків такого підходу включення відеофрагментів на Web-сторінці є те, що його підтримує тільки браузер MicroSoft Internet Explorer. Щоб зробити висновок відеофрагментів на Web-сторінці доступним і для інших браузерів, можна скористатися тегом <EMBED>, який містить такі параметри:
- SRC - вказує URL адресу файлу з видеофрагментом (можна вказувати файли і з іншими типами даних, але не всі з них підтримуються сервером);
- TYPE - вказує тип MIME файлу даних.
Типи MIME (Multipurpose Internet Mail Extentions - багатоцільові розширення пошти) спочатку були розроблені як стандарт ідентифікації різних типів файлів для відправки по електронній пошті, але згодом їх функції були розширені і на інші сервіси Інтернету.
прикладі №1 показано завдання відеофрагментів на Web-сторінці як за допомогою тега <IMG>, так і за допомогою тега <EMBED>
Для завдання звуку на Web-сторінці використовується тег <BGSOUND>, який містить такі параметри:
- SRC - вказує URL-адреса звукового файлу (розширення .WAV, AU, MIDI і ін.);
- LOOP - вказує кількість повторень звукового супроводу (-1 або infinite - необмежено).
Приклад 1
<HTML>
<HEAD>
<TITLE> Графіка html зображення на Web-сторінці </TITLE>
<LINK REL=STYLESHEET HREF="my.css">
<STYLE> P{color:blue; font:italic bold 8mm} </STYLE>
</HEAD>
<BODY STYLE="background:url(back.gif) fixed ">
<H1> Графіка та відеофрагменти, на Web-сторінці </H1>
<TABLE WIDTH=50% HEIGHT=100 ALIGN=center
STYLE="text-align:center;border:solid 3 #00FFFF">
<TR>
<TD STYLE="background-color:#A0FFFF"> Непрозорий тло
<TD STYLE="background-color:transparent"> Прозорий фон
</TABLE><BR><BR>
<IMG SRC="fish.gif" ALT="Зображення рибок" WIDTH=200
ALIGN=left HSPACE=20 STYLE="border:groove 12 red">
<P> Зображення збільшено втричі, показано зліва від тексту, має рамку і відступи по горизонталі <BR><BR><BR><BR>
<P ALIGN=right> Вирізаний фрагмент зображення
<IMG SRC="fish.gif" WIDTH=300 STYLE="z-index:-1;
position: absolute; left:500; top:430; clip:rect(0,250,120,100)"> <BR><BR>
<P> Відеофрагмент
<IMG DYNSRC="Orbit.avi" START=mouseover WIDTH=500
HEIGHT=125 LOOP=1 ALIGN=middle> вирівняний по центру тексту, запускається з наведення миші і виконується один раз
<BR><BR>
<P> Відеофрагмент з органами управління
<EMBED SRC="Orbit.avi" TYPE="video/avi">
</BODY>
</HTML>
