Завдання 3.
Створіть файли question2.html (основні теги і атрибути для форматування тексту), question3.html (Основні теги та їхні атрибути для відображення малюнків), question4.html (Основні теги та їх атрибути для організації гіперпосилань). Зміст сторінок обрати самостійно. Передбачити перехід між сторінками і повернення на титульну сторінку у вигляді гіперпосилань.
Контрольні питання:
Охарактеризуйте поняття гіпертекстова технологія.
Пояснити структуру тексту, написаного з використанням мови HTML
Поясніть, які теги використовуються для форматування тексту
Поясніть, які теги використовуються для побудови таблиць
Що називається гіперпосиланням, як організується гіперспосилання мовою HTML
Довідковий матеріал
Деякі символи не виводяться браузерами просто так. Написати їх Ви можете, але побачити на екрані – не завжди. Потрібно використовувати так називані escape-послідовності. Це робиться наступним чином:
< виводить <
> виводить >
& виводить &
" виводить "
© виводить ©
® виводить ®
Ще існує безперервний пробіл ( ). Якщо є якесь словосполучення і необхідно, щоб воно було написано в одному рядку, то між цими словами вставляється безперервний пробіл. Він забороняє браузерові переводити рядок в цьому місці.
Таблиці в мові HTML завжди мають прямокутний вигляд і складаються з рядків, які в свою чергу, складаються з комірок. Всі мовні конструкції, що описують компоненти створюваної таблиці, укладаються між тегами <TABLE> і </TABLE>.
Заповнення таблиці відбувається порядково; для позначення рядка використовується пара тегів <TR>... </TR>. Рядок складається з комірок, для завдання яких використовують або теги <TH>... </TH>, якщо ці осередки містять заголовки стовпців, або теги <TD>... </TD>. Заголовки виводяться напівжирним шрифтом і розташовуються по центру осередки. Дані мають звичайний шрифт і вирівнюються по лівій стороні клітинки. Для завдання заголовка всієї таблиці використовуються теги <CAPTION> і </CAPTION>.
Наявність в осередках даних не обов'язково. Створити порожню клітинку можна двома способами: нічим не заповнювати її контейнер ( <TD> </TD>), або помістити в неї символ нерозривного пробілу, що задається спеціальної послідовністю символів - (тобто створити комірку виду <TD> </TD>).
Немає потреби окремо створювати порожні клітинки, якщо планується, що всі залишилися в рядку клітинки не будуть заповнені. Так як тег <TR> сигналізує про початок нового рядка, порожні клітинки будуть додані браузером автоматично.
Основні атрибути тега <TABLE>
Призначення основних атрибутів тега <TABLE> і значення, які вони можуть брати перераховані в таблиці.
Атрибут |
Призначення |
BORDER=n |
Визначає ширину рамки таблиці (У пікселях), наприклад, BORDER=1; значення, рівне нулю, означає відсутність рамки |
WIDTH=n |
Визначає ширину всієї таблиці у пікселях, або у відсотках від ширини вікна браузера |
HEIGHT=n |
Визначає висоту всієї таблиці у пікселях, або у відсотках від висоти вікна браузера |
ALIGN |
Задає горизонтальне вирівнювання таблиці у вікні браузера; має значення left, center і right (За замовчуванням - left) |
CELLPADDING=n |
Додає вільний простір між даними всередині комірки і її межами, первісне значення дорівнює 2 |
CELLSPACING=n |
Додає вільний простір між осередками всередині всієї таблиці, первісне значення дорівнює 2 |
HSPACE=n |
Задає області вільного простору вказаної ширини (у пікселях) ліворуч і праворуч від таблиці |
VSPACE=n |
Задає області вільного простору заданої висоти (у пікселях) зверху і знизу від таблиці |
BGCOLOR=колір |
Встановлює колір фону всієї таблиці |
BACKGROUND=URL |
Вказує фонове зображення для таблиці, де URL - адреса джерела (назва файлу із зображенням) |
Основні шрифти, які використовуються в HTML
-
Тег
Відповідний тегу шрифт
<TT>
Телеграфний курсив
<I>
Курсив
<b>
Жирний шрифт
<big>
Великий шрифт
<small>
Маленький шрифт
<STRIKE> або <S>
Перекреслений шрифт
<u>
Підкреслений шрифт
Наведемо тепер таблицю з деякими назвами і кодами кольорів.
Українська назва |
Англійська назва |
Код |
Аквамарин |
Aqua |
#00FFFF |
Білий |
White |
#FFFFFF |
Жовтий |
Yellow |
#FFFF00 |
Зелений |
Green |
#008000 |
Золотий |
Gold |
#FFD700 |
Індіго |
Indigo |
#4B0080 |
Каштановий |
Maroon |
#800000 |
Червоний |
Red |
#FF0000 |
Оливковий |
Olive |
#808000 |
Помаранчевий |
Orange |
#FFA500 |
Пурпуровий |
Purple |
#800080 |
Світло-зелений |
Lime |
#00FF00 |
Сріблястий |
Silver |
#C0C0C0 |
Сірий |
Gray |
#808080 |
Сизий |
Teal |
#008080 |
Синій |
Blue |
#0000FF |
Ультрамарин |
Navy |
#000080 |
Фіолетовий |
Violet |
#EE80EE |
Фуксиновий |
Fuchsia |
#FF00FF |
Чорний |
Black |
#000000 |
Посилання робляться так:
<a href='URL'>опис посилання</a>
URL - це повний шлях до того документа, на який посилається відвідувач. Як опис можна використовувати картинку. Прикладом може служити галерея з передоглядом, натиснувши на маленьку картинку поганої якості, відвідувач повинний потрапити на повномасштабну фотографію. Наприклад ось так:
<a href='URL'> натисни на картинку
<img src='шлях до зображення'> і тоді....
</a>
Тут усе, що написано між <a> і </a> буде посиланням.