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
|
m |
w |
|
|
o |
|
w |
w |
|
.c |
|
закриваючого тегу. Його дія розповсюджуються до кінцяHTML-сторінки або |
||
BYY |
|
|
||
|
|
|
|
|
|
|
до ще одного тегу<basefont>. Наприклад, визначення шрифту розміром4 за |
|
|
|
|
допомогою тегу <basefont> можна здійснити так: |
|
|
|
|
<basefont size=4>Використання тегу basefont |
|
|
|
|
Відзначимо, що теги <font> та <basefont> відносяться |
до послідовних |
|
|
|
тегів, а тому не можуть включати в себе теги рівня блоку, наприклад, <table> |
|
|
|
|
або <tr>. |
|
|
.
A
B
|
m |
o |
|
.c |
|
BYY |
|
7.4 Використання тегів заголовків
Теги заголовків (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) призначені для виділення на екрані користувача певних фрагментів текстуHTML-сторінки. Виділення тексту реалізується за рахунок зміни розмірів та"жирності" тексту. Тегу h1 відповідає найбільший розмір тексту, а h6 - найменший розмір. Особливістю даних тегів є вставка порожнього рядка до і після виділеного фрагменту тексту.
Наприклад, для виділення в текстіHTML-сторінки трьох фрагментів тексту як заголовків 1, 3 та 6 рівнів необхідно:
<body>
Звичайний текст. <h1> Заголовок 1 рівня </h1> Звичайний текст. <h3> Заголовок 3 рівня </h3> Звичайний текст. <h6> Заголовок 6 рівня </h6> Звичайний текст.
</body>
Відповідне відображення HTML-сторінки в вікні браузера показане на рис.
7.4.
Рис. 7.4 - Використання тегів заголовків
104
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 |
|
|||
|
|
|
|
|
|
|
||||
Всі вказані теги є парними та можуть використовуватись з необов’язковим параметром align, який служить для горизонтального вирівнювання тексту. Можливі значення параметру align показані в табл. 7.2.
Таблиця 7.2 - Значення параметру align
|
Значення |
|
|
Наслідки використання |
|
|
параметру |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
left |
|
Текст вирівнюється по лівій стороні вікна браузера |
||
|
center |
|
Текст вирівнюється по центру вікна браузера |
||
|
right |
|
Текст вирівнюється по правій стороні вікна браузера |
||
|
justify |
|
Текст вирівнюється по ширині вікна браузера. |
||
|
|
|
|
Візуально відрізняється від left тільки в тому випадку, |
|
|
|
|
|
коли текст заголовку містить більш ніж два рядки |
|
|
|
|
|
тексту. |
|
Відзначимо, якщо |
параметр align не |
заданий, то |
використовується |
|
||||
вирівнювання заголовку по центру вікна браузера. |
|
|
|
|
|
|||
Розглянемо приклад визначення наHTML-сторінці чотирьох заголовків |
|
|||||||
третього рівня з різними параметрами вирівнювання. Для цього в розділі необхідно |
|
|||||||
записати: |
|
|
|
|
|
|
|
|
<body> Звичайний текст. |
|
|
|
|
|
|
||
<h3 |
align="center"> |
Заголовок |
вирівнюється |
по |
лівій |
стороні |
вікна |
|
браузера</h3> |
|
|
|
|
|
|
|
|
Звичайний текст. |
|
|
|
|
|
|
|
|
<h3 align="center"> Заголовок вирівнюється по центру вікна браузера</h3> |
|
|||||||
Звичайний текст. |
|
|
|
|
|
|
|
|
<h3 |
align="right"> |
Заголовок |
вирівнюється |
по |
правій |
стороні |
вікна |
|
браузера</h3> Звичайний текст.
<h3 align="justify"> Заголовок вирівнюється по ширині вікна браузера. Візуально відрізняється від left тільки в тому випадку, коли текст заголовку
містить більш ніж два рядки тексту. </h3> Звичайний текст. </body>
Відповідне відображення в вікні браузера показане на рис. 7.5.
105
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 |
|
|||
|
|
|
|
|
|
|
||||
Рис. 7.5 - Використання тегу заголовку третього рівня з різними параметрами вирівнювання.
7.5 Форматування HTML-документу
Тег <br> використовується для примусового переводу рядка. Необхідність використання даного тегу пояснюється ,тимщо при відображенні текстових документів перенесення тексту із одного рядка в інший відбувається автоматично та залежить в основному відрозмірів шрифту та розмірів вікна браузера. При цьому переведення рядка може здійснюватись тільки по символам, що розділяють окремі слова.
Розглянемо приклад запису виразів"Перший рядок" та "Другий рядок" в двох різних рядках. Відповідний HTML-код такий:
<body>
Перший рядок <br> Другий рядок
</body>
106
AB
|
|
|
|
|
F Tran |
sf |
|
|
|
|
|
|
|
|
|
|
|
|
|
F Tran |
sf |
|
|
||||||
|
|
|
|
D |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
D |
|
|
|
|
||||||
|
|
|
P |
|
|
|
|
or |
|
|
|
|
|
|
|
|
|
|
P |
|
|
|
|
or |
|
||||
|
Y |
Y |
|
|
|
|
|
|
|
m |
|
|
|
|
|
|
Y |
Y |
|
|
|
|
|
|
|
m |
|||
B |
|
|
|
|
|
|
|
|
e |
|
|
|
|
|
B |
|
|
|
|
|
|
|
|
e |
|||||
|
|
|
|
|
|
buy |
|
r |
|
|
|
|
B |
|
|
|
|
|
|
buy |
r |
||||||||
|
|
|
|
|
|
|
|
2 |
|
|
|
|
|
|
|
|
|
|
|
2 |
|||||||||
|
|
|
|
|
|
|
|
|
. |
|
|
|
|
|
|
|
|
|
|
|
|
. |
|||||||
|
|
|
|
|
|
|
to |
|
0 |
|
|
|
|
A |
|
|
|
|
|
|
|
to |
0 |
||||||
|
|
|
|
|
|
here |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
here |
|
|
|
|
|||
|
|
|
|
Click |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click |
|
|
|
|
|
||||
w |
|
|
|
|
|
|
m |
|
|
|
|
|
w |
|
|
|
|
|
|
m |
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||
|
|
w |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
o |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
o |
||||||
|
|
|
|
w. |
|
|
|
|
c |
|
|
Парний тег <nobr> на відміну від тегу<br> використовується для заборони |
|
w. |
|
|
|
|
c |
|
|||||||||
|
|
|
|
|
|
|
. |
|
|
|
|
|
|
. |
|
|
|||||||||||||
|
|
|
|
|
A BBYY |
|
|
|
|
|
|
A B BYY |
|
|
|
||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
|
|
|
переводу рядка. Наприклад, для гарантованого розміщення в одному рядку виразу |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
"Цей текст повинен відображатись в одному рядку" необхідно: |
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
<nobr> Цей текст повинен відображатись в одному рядку </nobr> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Якщо даний текст не буде вміщуватись в одному рядку, то в вікні браузера |
|
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
|
|
|
з’явиться горизонтальна смуга прокрутки. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
Тег <p> призначений для розділу текстуHTML-сторінки на окремі абзаци. |
|
|
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
|
|
|
Даний тег є тегом-контейнером та може використовуватись з необов’язковим |
|
|
|
|
|
||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
параметром align. Значення |
параметру align |
та наслідки його використання для |
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
абзаців ті ж самі, що і для заголовків, див. табл. 2.2. Відзначимо, що візуально в |
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
вікні браузера абзац буде відділятись від іншого тексту за допомогою порожніх |
|
|
|
|
|||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
рядків та можливої зміни горизонтального вирівнювання. Наведемо приклад |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
використання тегу <p>: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Звичайний текст |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p align="center"> Абзац з горизонтальним вирівнюванням- "по центру" |
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
</p> </body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Відповідне вікно браузера показане на рис. 7.6. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
Парний тег <center> |
призначений |
для |
горизонтального |
вирівнювання |
|
|
||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
елементів HTML-сторінки посередні вікна браузера. Наведемо приклад його |
|
|
|
|
|
|
|||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
використання: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Звичайний текст |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<center> Текст з горизонтальним вирівнюванням - "по центру" </center> |
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
Звичайний текст </body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Відзначимо, що в специфікаціях діючих |
стандартівHTML тег |
<center> |
|
|
|
|
|
|
|
|
|
|
||||
позначений як не бажаний для використання, хоча і підтримується практично всіма розповсюдженими браузерами.
Рис. 7.6 - Використання тегу абзацу
107