AB
|
|
|
|
|
F Tran |
sf |
|
|||
|
|
|
|
D |
|
|
|
|||
|
|
Y |
P |
|
|
|
|
or |
e |
|
B |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
|
buy |
r |
|||
|
|
|
|
|
|
|
2 |
|||
|
|
|
|
|
|
|
|
0 |
||
|
|
|
|
|
|
|
to |
|
|
. |
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
Click |
|
|
|
|
||
w |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
||||
|
|
w |
w. |
|
|
|
|
o |
||
|
|
|
|
|
|
|
. |
|
||
|
|
|
|
|
A BBYY |
c |
|
|||
|
|
|
|
|
|
|
||||
AB
|
|
|
|
|
F Tran |
sf |
|
|||
|
|
|
|
D |
|
|
|
|||
|
|
Y |
P |
|
|
|
|
or |
e |
|
B |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
|
buy |
r |
|||
|
|
|
|
|
|
|
2 |
|||
|
|
|
|
|
|
|
|
0 |
||
|
|
|
|
|
|
|
to |
|
|
. |
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
Click |
|
|
|
|
||
w |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
||||
|
|
w |
w. |
|
|
|
|
o |
||
|
|
|
|
|
|
|
. |
|
||
|
|
|
|
|
A B BYY |
c |
|
|||
|
|
|
|
|
|
|
||||
Тег-контейнер <pre> використовується для визначення попередньо відформатованого тексту. Текст, розміщений між тегами<pre> та </pre>, буде виведений у вікні браузера із збереженням деяких параметрів форматування, виконаних за допомогою текстових редакторів. Відзначимо, що в середині контейнеру <pre> не можна використовувати деякі важливі та широко вживані теги. Тому використання цього тегу досить обмежене.
Тег <hr> призначений для виведення в вікні браузера горизонтальної лінії, до і після якої вставляються порожні рядки. Необов’язкові параметри тегу<hr> та їх призначення наведені в табл. 7.3.
Таблиця 7.3 - Параметри тегу <hr>
Параметр |
Призначення |
|
|
align |
Визначення горизонтального вирівнювання лінії. Можливі |
|
значення: left ("по лівому краю"), center ("по центру"), |
|
right ("по правому краю"). Якщо параметр align не |
|
використаний то застосовується вирівнювання "по |
|
центру" |
color |
Встановлює колір лінії |
noshed |
Відміняє рельєфність лінії |
size |
Визначає товщину лінії |
width |
Встановлює довжину лінії |
Наприклад, для визначення лінії червоного кольору, товщиною 2 пікселі, довжиною 400 пікселів, без рельєфу необхідно:
<hr color="red" size=2 width=400 noshade>
|
7.6 Використання коментарів та спеціальних символів |
|
|
|||
|
В деяких випадках необхідно не показувати у вікні браузера частинуHTML- |
|
||||
коду сторінки, тобто "за коментувати" цей код. Для цього використовуються теги |
|
|||||
коментарів <!-- та -->. Наприклад: |
|
|
|
|
||
|
<!-- Цей текст не буде відображатись у вікні браузера --> |
|
|
|||
Як |
відомо, при створенні HTML-сторінки |
повинні застосовуватись тільки |
|
|||
символи, що входять до базової частини таблиці кодівASCII. Проте деякі |
|
|||||
спеціальні символи |
( наприклад, пробіл ) не входять до цієї частини таблиці. |
|
||||
В |
випадку |
використання |
вказаних |
спеціальних |
символів |
необхі |
застосовувати спеціальні HTML-коди, див. табл. 7.4.
108
AB
|
|
|
|
|
F Tran |
sf |
|
|||
|
|
|
|
D |
|
|
|
|||
|
|
Y |
P |
|
|
|
|
or |
e |
|
B |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
|
buy |
r |
|||
|
|
|
|
|
|
|
2 |
|||
|
|
|
|
|
|
|
|
0 |
||
|
|
|
|
|
|
|
to |
|
|
. |
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
Click |
|
|
|
|
||
w |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
||||
|
|
w |
w. |
|
|
|
|
o |
||
|
|
|
|
|
|
|
. |
|
||
|
|
|
|
|
A BBYY |
c |
|
|||
|
|
|
|
|
|
|
||||
Таблиця 7.4 - Коди спеціальних символів
AB
|
|
|
|
|
F Tran |
sf |
|
|||
|
|
|
|
D |
|
|
|
|||
|
|
Y |
P |
|
|
|
|
or |
e |
|
B |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
|
buy |
r |
|||
|
|
|
|
|
|
|
2 |
|||
|
|
|
|
|
|
|
|
0 |
||
|
|
|
|
|
|
|
to |
|
|
. |
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
Click |
|
|
|
|
||
w |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
||||
|
|
w |
w. |
|
|
|
|
o |
||
|
|
|
|
|
|
|
. |
|
||
|
|
|
|
|
A B BYY |
c |
|
|||
|
|
|
|
|
|
|
||||
|
Спеціальний символ |
|
|
|
HTML-код |
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Амперсанд (&) |
|
|
|
|
& |
|
|
|
|
|
|
Знак copyright (©) |
|
|
|
© |
|
|
|
|
||
|
Знак більше (>) |
|
|
|
|
> |
|
|
|
|
|
|
Знак менше (<) |
|
|
|
|
< |
|
|
|
|
|
|
Пробіл |
|
|
|
|
|
|
|
|
|
|
|
Знак плюс/мінус (±) |
|
|
|
± |
|
|
|
|
||
|
Знак одна друга (½) |
|
|
|
½ |
|
|
|
|
||
|
Знак одна друга (¼) |
|
|
|
¼ |
|
|
|
|
||
|
Знак одна друга (¾) |
|
|
|
¾ |
|
|
|
|
||
|
Знак "»" |
|
|
|
|
|
» |
|
|
|
|
|
Знак "§" |
|
|
|
|
|
§ |
|
|
|
|
|
Знак "«" |
|
|
|
|
|
« |
|
|
|
|
|
7.7 Рисунки |
|
|
|
|
|
|
|
|
|
|
|
Для вставки рисунка HTMLв -сторінку використовується тег<img>. |
|
|||||||||
Основним параметром цього тегу є параметрsrc, за допомогою якого вказується |
|
||||||||||
адреса файлу, в якому і зберігається рисунок. Цей же тег також можливо |
|
||||||||||
використовувати для показу відео-роликів. В цьому випадку використовується |
|
||||||||||
параметр dynsrc, |
за |
допомогою |
|
якого |
вказується |
адреса |
відео. |
файл |
|||
Найпоширенішими форматами файлів-рисунків є формати jpg, gif, png, |
а відео |
|
|||||||||
файлів - avi. |
|
|
|
|
|
|
|
|
|
|
|
|
Відзначимо, що адреса файлу-рисунка може бути вказана в абсолютному та |
|
|||||||||
відносному форматі. При використані абсолютного формату в адресіповністю |
|
||||||||||
визначено комп’ютер, каталог та файл рисунку. |
|
|
|
|
|
||||||
|
Наприклад, для вставки рисунка, що зберігається в файлі logo.gif за адресою |
|
|||||||||
www.picture.com.ua/picture необхідно: |
|
|
|
|
|
|
|
|
|||
|
<img src=" www.picture.com.ua/picture/logo.gif"> |
|
|
|
|
||||||
|
При використанні відносного формату визначення місцезнаходження файлу- |
|
|||||||||
рисунку відбувається з урахуванням місцезнаходження даної HTML-сторінки. |
|
||||||||||
|
Наприклад, |
для |
вставки |
вHTML-сторінку prim.html |
рисунка, який |
|
|||||
зберігається в файліlogo.gif, що знаходиться в одному каталозі з файлом |
|
||||||||||
prim.html необхідно: |
|
|
|
|
|
|
|
|
|
||
|
<img src="logo.gif"> |
|
|
|
|
|
|
|
|
|
|
|
Графічні файли зручно зберігати в окремому каталозі, наприклад, в каталозі з |
|
|||||||||
іменем img. В цьому випадку для |
|
вставки HTMLв -сторінку prim.html |
рисунка |
|
|||||||
logo.gif необхідно: |
|
|
|
|
|
|
|
|
|
|
|
|
<img src="img/logo.gif"> |
|
|
|
|
|
|
|
|
||
Відзначимо, що каталог img та файл prim.html повинні знаходитись в одному каталозі. Крім обов’язкового параметру src тег <img> має декілька необов’язкових параметрів, див. табл. 7.5.
109
AB
|
|
|
|
|
F Tran |
sf |
|
|||
|
|
|
|
D |
|
|
|
|||
|
|
Y |
P |
|
|
|
|
or |
e |
|
B |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
|
buy |
r |
|||
|
|
|
|
|
|
|
2 |
|||
|
|
|
|
|
|
|
|
0 |
||
|
|
|
|
|
|
|
to |
|
|
. |
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
Click |
|
|
|
|
||
w |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
||||
|
|
w |
w. |
|
|
|
|
o |
||
|
|
|
|
|
|
|
. |
|
||
|
|
|
|
|
A BBYY |
c |
|
|||
|
|
|
|
|
|
|
||||
Таблиця 7.5 - Параметри тегу <img>
AB
|
|
|
|
|
F Tran |
sf |
|
|||
|
|
|
|
D |
|
|
|
|||
|
|
Y |
P |
|
|
|
|
or |
e |
|
B |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
|
buy |
r |
|||
|
|
|
|
|
|
|
2 |
|||
|
|
|
|
|
|
|
|
0 |
||
|
|
|
|
|
|
|
to |
|
|
. |
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
Click |
|
|
|
|
||
w |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
||||
|
|
w |
w. |
|
|
|
|
o |
||
|
|
|
|
|
|
|
. |
|
||
|
|
|
|
|
A B BYY |
c |
|
|||
|
|
|
|
|
|
|
||||
Назва параметру |
Призначення |
|
|
alt |
Визначення альтернативного тексту |
width |
Ширину рисунку в пікселях |
height |
Висоту рисунку в пікселях |
hspace |
Відступ від рисунку до інших об’єктів на HTML- |
|
сторінці по вертикалі |
vspace |
Відступ від рисунку до інших об’єктів на HTML- |
|
сторінці по горизонталі |
border |
Товщина рамки навколо рисунку |
lowsrc |
Задає файл з альтернативним зображенням |
align |
Вирівнювання рисунку відносно інших об’єктів на |
|
HTML-сторінці |
src |
Адреса графічного файлу |
dynsrc |
Адреса відео файлу |
start |
Задає момент початку прокрутки відео ролика. |
|
Можливі значення: |
|
fileopen - ролик починається відразу після |
|
завантаження відео файлу, |
|
mouseover - ролик починається при наведенні миші на |
|
зображення. |
loop |
Задає кількість повторів відео - ролика. Якщо значення |
|
дорівнює –1, то програвання відбувається безперервно |
Розглянемо призначення вказаних параметрів докладніше. Досить часто при перегляді HTML-сторінок користувачі використовують браузер, що працює в режимі відключення завантаження зображень. Як відомо, цей режим дозволяє зменшити час відображенняHTML-сторінки в вікні браузера. В цьому випадку замість зображення на екрані з’являється альтернативний , текстзаданий в параметрі alt. Крім цього альтернативний текст відображається в якості підказки при знаходженні курсору"миші" в області рисунку. Приклад використання параметру alt:
<img src="logo.gif" alt="Альтернативний текст" >
Параметри width та height призначені для визначення розмірів рисунку у вікні браузера. Відзначимо, що при зміні розмірів зображення розмір файлу не змінюється, тобто час завантаження рисунку не змінюється. Наведемо приклад
застосування параметрів |
alt, width та height для одного і того рисунку: |
||
<img src="logo.gif" |
width="184" |
height ="164" |
alt="Альтернативний |
текст" > |
|
|
|
<img src="logo.gif" |
width=" 92 " |
height =" 82" |
alt="Альтернативний |
текст" > |
|
|
|
110
AB
|
|
|
|
|
F Tran |
sf |
|
|
|
|
|
|
|
|
|
|
F Tran |
sf |
|
|
||||||
|
|
|
|
D |
|
|
|
|
|
|
|
|
|
|
|
D |
|
|
|
|
||||||
|
|
Y |
P |
|
|
|
|
or |
e |
|
|
|
|
Y |
P |
|
|
|
|
or |
e |
|||||
B |
Y |
|
|
|
|
|
|
|
|
m |
|
|
B |
Y |
|
|
|
|
|
|
|
|
m |
|||
|
|
|
|
|
|
buy |
|
r |
|
B |
|
|
|
|
|
|
buy |
r |
||||||||
|
|
|
|
|
|
|
|
2 |
|
|
|
|
|
|
|
|
2 |
|||||||||
|
|
|
|
|
|
|
|
|
0 |
|
|
|
|
|
|
|
|
|
0 |
|||||||
|
|
|
|
|
|
|
to |
|
|
|
|
. |
|
A |
|
|
|
|
|
|
|
to |
|
|
|
. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
|
|
|
|
|
here |
|
|
|
|
||
|
|
|
|
Click |
|
|
|
|
|
|
|
|
|
|
|
|
Click |
|
|
|
|
|
||||
w |
|
|
|
|
|
|
m |
|
|
w |
|
|
|
|
|
|
m |
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||
|
|
w |
w. . |
o |
|
<img src="logo.gif" width=" 150 " height ="40 " |
alt="Альтернативний |
w |
w. . |
o |
||||||||||||||||
|
|
|
|
|
A BBYY |
c |
|
|
|
|
|
|
|
|
|
A B BYY |
c |
|
||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
|
|
|
текст" > |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Відповідне вікно браузера показане на рис. 7.7. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Слід зазначити, що зміна розмірів рисунку може призвести до втрати якості |
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
зображення, особливо за рахунок втрати пропорцій між початковою висотою та |
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
шириною. Практичний досвід показує, що навіть при дотримані пропорцій |
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
збільшення початкових розмірів зображень-фотографій |
більш ніж 10на-15% |
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
призводить до чуттєвої втрати якості. При цьому зменшення розмірів зображень |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
|
|
|
позначається на якості їх відображення набагато менше, але їх використання не |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
|
|
|
оптимальне з точки зору часу завантаження. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рис. 7.7 - Використання параметрів alt, width та height тегу <img>
Параметр border дозволяє визначити товщину рамки навколо рисунку. Застосуємо цей параметр із значенням 2 для рисунків попереднього прикладу:
<img src="logo.gif" width="184" height ="164" border="2"> <img src="logo.gif" width=" 92 " height =" 82" border="2" > <img src="logo.gif" width=" 150 " height ="40 " border="2">.
Параметри hspace та vspace дозволяють в пікселях задавати відступи від рисунку до інших об’єктів на HTML-сторінці.
111
AB
|
|
|
F Tran |
sf |
|
|
|
|
|
F Tran |
sf |
|
||||
|
|
|
D |
|
|
|
|
|
|
|
D |
|
|
|
||
|
|
Y |
P |
|
|
or |
|
|
|
Y |
P |
|
|
or |
||
|
|
|
|
|
|
e |
|
|
|
|
|
|
|
e |
||
B |
Y |
|
|
|
|
|
m |
|
B |
Y |
|
|
|
|
|
m |
|
|
|
|
buy |
r |
B |
|
|
|
|
buy |
r |
||||
|
|
|
|
|
2 |
|
|
|
|
|
2 |
|||||
|
|
|
|
|
|
0 |
|
|
|
|
|
|
0 |
|||
|
|
|
|
|
to |
|
. |
A |
|
|
|
|
|
to |
|
. |
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
here |
|
|
|
|
|
|
|
here |
|
|
||
|
|
|
Click |
|
|
|
|
|
|
|
Click |
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
w w
w
.
A
B
|
|
|
w |
|
|
Покажемо застосування цих параметрів із |
значеннями20 та 20 для |
w |
|
||
w. |
A |
||||
|
|
|
|
|
|
попереднього прикладу: |
|
|
|
|
|
<img src="logo.gif" |
width="184" |
height="164" |
hspace="20" vspace="20" |
|
|
border="2"> |
|
|
|
|
|
<img src="logo.gif" |
width=" 92 " |
height =" 82" |
hspace="20" vspace="20" |
|
|
border="2" > |
|
|
|
|
|
<img src="logo.gif" |
width=" 150 " |
height ="40 " hspace="20" vspace="20" |
|
|
|
border="2"> |
|
|
|
|
|
Параметр lowsrc дозволяє визначити файл з альтернативним зображенням, яке з’являється у вікні браузера до появи основного зображення. Альтернативне зображення, як правило, це рисунок того ж змісту, що і основний, але менш якісний. По цій причині файл альтернативного зображення менший за розміром, а тому завантажується набагато швидше ніж основний. Це дозволяє швидко показати загальні риси зображення.
B
|
m |
o |
|
.c |
|
BYY |
|
Приклад використання:
<img src="logo.gif" width="184" height="164" lowsrc ="small.gif">
Параметр align використовується для визначення горизонтального або вертикального вирівнювання рисунку відносно інших об’єктів наHTML-сторінці. Параметри вирівнювання залежать від значень параметруalign. При використанні цього параметру із значеннямиleft або right рисунок розміщується відповідно до лівої або правої сторони вікна браузера, а текст "обтікає" зображення з протилежної сторони. Відзначимо, що в цьому випадку текст може займати декілька рядків.
Приклад використання параметру align:
<body>
<img src="logo.gif" width="182" height="162" border="1" align="right">
Приклад використання параметру align="right". Рисунок розміщений
біля правої сторони вікна браузера. Текст обтікає зображення з лівої сторони.
</body>
Крім left та right параметр aling може приймати наступні значення:
-top - верхня межа зображення вирівнюється по найбільш високому елементу рядка;
-texttop - верхня межа зображення вирівнюється по найбільш високому текстовому елементу рядка;
-middle - середина зображення вирівнюється по базовій лінії рядка;
-absmiddle - середина зображення вирівнюється по середині рядка;
-bottom - нижня межа зображення вирівнюється по базовій лінії рядка;
-absbottom - нижня межа зображення вирівнюється по нижній межі рядка.
В цих випадках зображення можна розглядати як звичайний елемент рядка. Відзначимо, що базова лінія тексту- це нижня лінія рядка тексту без
врахування нижньої частини деяких символів (р, j, y).
112