русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

HTML зображення

ЗАГОЛОВОК

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>

Заголовок

Переглядів: 1279

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн