LR5
.DOCЛабораторна робота №5
H T M L - МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ.
НАЛАШТУВАННЯМ КОЛЬОРУ В HTML
Мета роботи: ознайомитись з мовою HTML, навчитися створювати Web-документи, навчитися використовувати основні графічні можливості HTML.
Теоретичні відомості
HTML (HyperText Markup Language) – мова гіпертекстової розмітки. Простий HTML-документ – це звичайний текстовий файл, який містить текст і нічого більше. Так що створювати Web-сторінки можна в будь-якому текстовому редакторі.
Браузер – це програма, за допомогою якої продивляються Web-сторінки. Браузер переглядає код HTML, знаходить спеціальні слова «рідною» мовою - символи, які називаються тегами (це означає "команда"), і використовує їх для вставки зображень, зміни вигляду тексту, створення посилань на інші Web-сторінки та ін. Якщо тег написаний неправильно, то браузером буде виведено повідомлення про помилку, наприклад "Error 404" або браузер проігнорує цей тег.
Слова на мові браузера виділяються спеціальним чином - дужками – наприклад, <тег>.
Є два види тегів:
- відкриваючий, наприклад <html>;
- закриваючий, наприклад </html>.
Різниця між тегами полягає в тому, що закриваючий тег починається з символа слеш "/".
Весь зміст, вміщений між відкриваючим і закриваючим тегами, є вмістом тега.
Тегів може бути кілька підряд, тоді їх пишуть, дотримуючись послідовності, наприклад <b> <i> <u> </u> </i> </b> (це називається вкладеність).
Але з кожного правила є винятки, і в HTML також є теги, які є і відкриваючими, і закриваючими одночасно. Ці теги не містять тексту, а є мітками, наприклад, перехід на наступний рядок – <br>.
Для вивчення HTML потрібно вивчити різні теги.
Для створення Web-сторінки потрібно відкрити будь-який текстовий редактор, наприклад Блокнот, який знаходиться в стандартних програмах Windows 7 (рис. 5.1).
Текстовий файл, який буде написано в Блокноті, потрібно зберегти з розширенням *.htm або *.html. Таке розширення означає, що даний файл є web-сторінкою.
Рисунок 5.1 – Скриншот програми Блокнот
На початку Web-сторінки йдуть відкриваючі теги: <html> і <body>, а в кінці повинні бути їх закриваючи частини: </ body> і </ html>:
<html> <body>
Тут має бути написано все, що ви хочете розмістити на сторінці </body> </html>
Для перегляду файлу після його збереження на комп‘ютері потрібно відкрити його через браузер. В розглянутому прикладі повинна була вийти порожня біла сторінка.
Для того, щоб змінити надпис у верху вікна вашого браузера - це заголовок сторінки - потрібно використати тег <title> </ title>:
<html> <body> <title> заголовок вашої сторінки </title> </body> </html>
Після тега title можна писати текст. Для завдання параметрів тексту є тег <font> </ font> і усередині цього тега можна писати багато комнад. Наприклад, можна змінити розмір тексту.
Для цього існує команда Size, яка задає розмір шрифту в умовних одиницях від 1 до 7. Середній розмір шрифту, який використовується за замовчуванням (тобто якщо ви не вказали розмір шрифту) прийнятий 3. Розмір шрифту можна вказувати як абсолютною величиною (наприклад, size = 4), так і відносною (наприклад, size = +1, size = -1). В останньому випадку розмір змінюється відносно базового, тобто трійки.
Приклад завдання розміру шрифту наведено в таблиці 5.1:
Таблиця 5.1 – Завдання розміру шрифту в HTML
|
<font size=1>Шрифт розміру 1</font><br> <font size=-1>Шрифт розміру 2</font><br> <font size=3>Шрифт розміру 3</font><br> <font size=+1>Шрифт розміру 4</font><br> <font size=5>Шрифт розміру 5</font><br> <font size=6>Шрифт розміру 6</font><br> <font size=7>Шрифт розміру 7</font><br> |
Браузер має відобразити завдання розміру шрифту, як показано в таблиці 5.2.
Таблиця 5.2 – Відображення завдання розміру шрифту браузером
|
Шрифт розміру 1 Шрифт розміру 2 Шрифт розміру 3 Шрифт розміру 4 Шрифт розміру 5 Шрифт розміру 6 Шрифт розміру 7 |
Розмір шрифту також можна задати за допомогою тега <H> </H> . Команда <H> задає розмір шрифту в умовних одиницях від 1 до 6.
Для тексту можна також змінити колір шрифту за допомогою команди color всередині тега font.
Кольорів усього три - синій (blue), червоний (red) і зелений (green). Решта кольорів утворюється виходять змішуванням цих кольорів.
Можна скористатися англійською і запам'ятати назви всього декількох кольорів, наприклад red, blue, black, а також шістнадцятковою системою для завдання кольорів.
Приклад завдання кольору шрифту наведено в таблиці 5.3.
Браузер має відобразити завдання кольору шрифту, як показано в таблиці 5.4.
Таблиця 5.3 – Завдання кольору шрифту в HTML
|
<font size=4 color=red> Червоний колір </ font> <br> <font size=4 color=magenta> Бузковий колір </ font> <br> <font size=4 color=blue> Синій колір </ font> <br> <font size=4 color=black> Чорний колір </ font> <br> <font size=4 color=yellow> Жовтий колір </ font> <br> <font size=4 color=green> Зелений колір </ font> <br> |
Таблиця 5.4 – Відображення завдання кольору шрифту браузером
|
Червоний колір Бузковий колір Синій колір Чорний колір Жовтий колір Зелений колір |
Тег, який керує налаштуванням кольору, виглядає як шістнадцятковий код. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифри від 10 до 15 замінені латинськими літерами. У таблиці 5.5 наведено відповідність десяткових і шістнадцяткових чисел.
Таблиця 5.5 – Відповідність десяткових і шістнадцяткових чисел
|
Десяткові |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
Шістнадцяткові |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
Числа більше 15 в шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій. Щоб браузер міг правильно визначити систему числення, перед шістнадцятковим числом ставлять символ решітки #, наприклад #654987.
Поєднання RGB - шість цифр кольорового коду розташовуються групами по дві. Кожна цифра відповідає за свій колір. Отже, ви пишете три цифри, а в результаті вони "зливаються" і кольори перемішуються. Перші дві цифри визначають червону складову кольору, друга пара цифр - зелену, а останні дві цифри - синю.
Типовий колір, який використовується в HTML, виглядає наступним чином:
< font color=#FA8E47>
Тег < font color > задає колір шрифту. Символ решітки # перед числом означає, що воно шістнадцяткове.
|
FA |
+ |
8E |
+ |
47 |
= |
FA8E47 |
Кожен з трьох кольорів - червоний, зелений і синій - може приймати значення від 00 до FF, що в результаті утворює 256 відтінків. Таким чином, в моделі RGB кількість кольорів може бути 256 х 256 х 256 = 16777216 комбінацій. Наприклад, в таблиці 5.6 наведемо деякі відтінки зеленого кольору і їх позначення в шістнадцятковій системі.
Таблиця 5.6 – Деякі відтінки зеленого
|
99FFCC |
66FFCC |
33FFCC |
00FFCC |
33CCCC |
009999 |
|
|
|
|
|
|
|
|
66CC99 |
33CC99 |
00CC99 |
339966 |
009966 |
006633 |
|
|
|
|
|
|
|
|
66FF99 |
33FF99 |
00FF99 |
33CC66 |
00CC66 |
009933 |
|
|
|
|
|
|
|
|
99FF99 |
66FF66 |
33FF66 |
00FF66 |
339933 |
006600 |
|
|
|
|
|
|
|
|
CCFFCC |
99CC99 |
66CC66 |
669966 |
336633 |
003300 |
|
|
|
|
|
|
|
|
33FF33 |
00FF33 |
00FF00 |
00CC00 |
33CC33 |
00CC33 |
|
|
|
|
|
|
|
|
66FF00 |
66FF33 |
33FF00 |
33CC00 |
339900 |
009900 |
|
|
|
|
|
|
|
|
CCFF99 |
99FF66 |
66CC00 |
66CC33 |
669933 |
336600 |
|
|
|
|
|
|
|
Коли браузер не в змозі правильним чином передати той чи інший колір, він підбирає схожий або змішує кілька сусідніх кольорів. Іноді передача кольору не дуже вдала і в різних браузерах може відрізнятися.
Нижче в таблиці 5.7 наведено 16 основних кольорів.
Таблиця 5.7 – 16 основних кольорів
|
Назва |
Колір |
Hex |
Red |
Green |
Blue |
|
aqua |
|
#00FFFF |
00 |
255 |
255 |
|
black |
|
#000000 |
00 |
00 |
00 |
|
blue |
|
#00FFFF |
00 |
255 |
255 |
|
fuchsia |
|
#FF00FF |
255 |
00 |
255 |
|
gray |
|
#808080 |
128 |
128 |
128 |
|
green |
|
#008000 |
00 |
128 |
00 |
|
lime |
|
#00FF00 |
00 |
255 |
00 |
|
maroon |
|
#800000 |
128 |
00 |
00 |
|
navy |
|
#000080 |
00 |
00 |
128 |
|
olive |
|
#808000 |
128 |
128 |
00 |
|
purple |
|
#800080 |
128 |
00 |
128 |
|
red |
|
#FF0000 |
255 |
00 |
00 |
|
silver |
|
#C0C0C0 |
192 |
192 |
192 |
|
teal |
|
#008080 |
00 |
128 |
128 |
|
white |
|
#FFFFFF |
255 |
255 |
255 |
|
yellow |
|
#FFFF00 |
255 |
255 |
00 |
Теги для перетворення тексту наведені в таблиці 5.8.
Для зміни кольору фону сторінки в тегу <body> треба вказати колір фону bgcolor: <body bgcolor=назва кольору>.
Для створення верхнього чи нижнього індексу використовується тег SMALL, що робить індекс менше за розміром основного шрифту.
Наприклад, створення нижнього індексу для формули перманганата калію:
<i>KMnO<sub><small>4</small></sub></i>.
Тег <p> </p> служить для початку тексту з нового рядка. Його параметри (і кілька інших тегів) наведено в таблиці 5.9.
Таблиця 5.8 – Теги для перетворення тексту
|
Код HTML |
Опис |
Приклад |
|
<b>Текст</b> |
Жирний текст |
Текст |
|
<i>Текст</i> |
Курсив тексту |
Текст |
|
<u>Текст</u> |
Підкреслений текст |
Текст |
|
<sup>Текст</sup> |
Верхній індекс |
e=mc2 |
|
<sub>Текст</sub> |
Нижній індекс |
H2O |
|
<strike>Текст</strike> |
Закреслений текст |
|
|
<em>Текст</em> |
Курсивний текст |
Текст |
|
<strong>Текст</strong> |
Жирний текст |
Текст |
Таблиця 5.9 – Теги для операцій з текстом
|
Код HTML |
Опис |
Приклад |
|
<p>Текст</p> |
Додає новий параграф, за замовчуванням вирівняний по лівому краю. Перед параграфом автоматично додається порожній рядок. |
Текст |
|
<p align=left>Текст</p> |
Вирівнювання по лівому краю. |
Текст |
|
<p align=right>Текст</p> |
Вирівнювання по правому краю. |
Текст |
|
<p align=center>Текст</p> |
Вирівнювання по центру. |
Текст |
|
<p align=justify>Текст</p> |
Вирівнювання по ширині. |
Текст по ширині |
|
<nobr>Текст</nobr> |
Вимикає автоматичний перенос рядків, навіть якщо текст ширше вікна браузера. |
|
|
Текст<wbr> |
Дозволяє браузеру робити перенесення рядка у вказаному місці, навіть якщо використовується NOBR тег. |
|
|
<center>Текст</center> |
Центрований текст. |
Текст |
|
<div align=center>Текст</div> |
Центрований текст. |
Текст |
|
<div align=left>Текст</div> |
Вирівнювання по лівому краю. |
Текст |
Продовження таблиці 5.9
|
<div align=right>Текст</div> |
Вирівнювання по правому краю. |
Текст |
|
<div align=justify>Текст</div> |
Вирівнювання по ширині. |
Текст по ширині |
Основна відмінність застосування тега P і тега DIV в тому, що на початку і наприкінці параграфа з'являється вертикальний відступ.
Щоб додати до тексту математичні знаки, латинські та грецькі літери, знаки пунктуації, стрілки і т.п. використовують різні спеціальні символи (табл. 5.10).
Таблиця 5.10 – Таблиця спецсимволів
|
Назва |
Код |
Вигляд |
Опис |
|
Стрілки |
|||
|
← |
← |
← |
стрілка вліво |
|
↑ |
↑ |
↑ |
стрілка вгору |
|
→ |
→ |
→ |
стрілка вправо |
|
↓ |
↓ |
↓ |
стрілка вниз |
|
↔ |
↔ |
↔ |
стрілка вліво-вправо |
|
Інші символи |
|||
|
< |
< |
< |
знак "менше" |
|
> |
> |
> |
знак "більше" |
|
Знаки пунктуації |
|||
|
… |
… |
… |
три крапки |
|
– |
– |
– |
тире |
|
— |
— |
— |
довге тире |
|
‘ |
‘ |
‘ |
ліва одиночна лапка |
|
’ |
’ |
’ |
права одиночна лапка |
|
‚ |
‚ |
‚ |
нижня одиночна лапка |
|
“ |
“ |
“ |
ліві лапки |
|
” |
” |
” |
праві лапки |
Можна включати в HTML як назву символу, так і його код - результат однаковий.
Рядок, що біжить - тег <MARQUEE> </ MARQUEE>, який розуміє тільки Internet Explorer. Решта браузерів покажуть тільки статичний рядок. Тег <MARQUEE> має декілька параметрів:
- ALIGN = текст розміщується у верхній (TOP), середній (MIDDLE) і нижній (BOTTOM) частині рядка, що біжить;
- BEHAVIOR = керує рухом тексту. Якщо його немає, то текст пробігає справа наліво. Якщо задати BEHAVIOR = SCROLL, то текст буде просто пробігати по екрану. Це значення за замовчанням. Якщо вказати BEHAVIOR = SLIDE, то текст виповзає на екран і зупиняється. Якщо використовувати параметр ALTERNATE, то текст буде спочатку виповзати на екран, а потім, відскакуючи від бічних стінок, стрибати;
- BGCOLOR = задає колір фону рядка, що біжить;
- DIRECTION = вказує напрям руху тексту (LEFT або RIGHT);
- HEIGHT = і WIDTH = задають товщину і ширину рядка, що біжить в пікселях або відсотках від розміру вікна;
- HSPACE = і VSPACE = ставлять горизонтальні і вертикальні поля навколо рядка, що біжить;
- LOOP = задає кількість "пробігів" тексту;
- SCROLLAMOUNT = визначає швидкість "пробігу". Здається числами. 1 - мінімальна швидкість, а при SCROLLAMOUNT = 8000 нічого не буде видно. Для правильного завдання швидкості рядка, що біжить використовуйте разом з попереднім атрибутом атрибут SCROLLDELAY = задає швидкість промальовування тексту в мілісекундах.
Бликаючий текст здається тегом <BLINK> </ BLINK>. Тег буде відображатися в браузері Netscape. Решта браузерів будуть відображати статичну картинку.
Для того щоб намалювати смужку:
використовується одиночний тег <hr> з атрибутами:
-
ширина width;
-
висота size;
-
колір color.
Тобто для смужки зверху написано: <hr color=red width=200 size=1>. Величини ширини і висоти вказані в пікселях або у відсотках від загальної ширини вашого браузера лише для параметра width - наприклад, так: <hr color=red width=90% size=5> (останнє зручно тим, що якщо ви змінюєте розмір вікна, то розміри вашої смужки будуть змінюватися пропорційно).
Будь-яке посилання задається тегом <A> </ A>, у якого є лише один параметр href. В якості значення цього параметра використовується адреса документа (URL). Наприклад,
<a href="http://www.yandex.ru">Пошукова система Яндекс</a>
Можна зробити посилання "через картинку" - тобто коли ви натиснете на зображення 1.gif, наприклад, ви потрапите на потрібну сторінку, наприклад на сторінку пошукової системи Яндекс:
Приклад використання зображення для посилання: