Основні елементи
HTML
Підготував
учитель інформатики
Телятник С.М
Кобеляцька
загальноосвітня школа
1-3
ступенів №2 ім. О.Т.Гончара
Основні елементи HTML
.
Будь-яка WEB-сторінка починається з тегу <HTML> і закінчується тегом </HTML>:
<HTML> Зміст документа </HTML>
Даний елемент є самим зовнішньої, тому що між його початковим і кінцевими тегами повинна знаходитися вся WEB-сторінка. Тег допускає вкладення інших тегів, що визначають загальну структуру WEB-сторінки: HEAD, BODY, FRAMESET і інших. Кінцевим тегом </HTML> закінчуються всі WEB-сторінки.
<HEAD> </head>.
Даний тег визначає область заголовка Web-сторінки. Іншими словами, її першу частину. Так само, як і попередній елемент, HEAD служить тільки для формування загальної структури документа.
<TITLE> </title>.
Елемент для розміщення заголовка Web-сторінки. Рядок тексту, розташований усередині цього елемента, відображається не в документі, а в заголовку вікна броузера.
колір |
шістнадцятковий еквівалент |
BLACK (чорний) |
#000000 |
MAROON (темно-бордовий) |
#800000 |
GREEN (зелений) |
#008000 |
OLIVE (оливковий) |
#808000 |
NAVY (темно-синій) |
#090080 |
PURPLE (фіолетовий) |
#800080 |
TEAL (зеленувато-блакитний) |
#008080 |
GRAY (сірий) |
#808080 |
SILVER (сріблястий) |
#С0С0С0 |
RED (червоний) |
#FF0000 |
LIME (лимонний) |
#00FF00 |
YELLOW (жовтий) |
#FFFF00 |
BLUE (синій) |
#0000FF |
FUCSHIA (фуксія) |
#FF00FF |
AQUA (морська хвиля) |
#00FFFF |
WHITE (білий) |
#FFFFFF |
Цей елемент визначає власне Web-сторінку. Це та довільна частина документа, що розробляє автор сторінки і яка відображається броузером. Усередині елемента BODY можна використовувати всі елементи, призначені для розробки Web-сторінки. Усередині початкового тегу елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки цілком. Розглянемо їх один по одному. Один із самих корисних для дизайну — атрибут, що визначає колір сторінки. За допомогою атрибута BGCOLOR дескриптора <BODY> можна визначити колір фону сторінки, вказавши у ньому шестицифрове шістнадцяткове число. Цей атрибут має формат <BODY BGCOLOR =# число> або <BODY BGCOLOR =”Назва кольору”>
Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>.
Формат атрибута
<BODY BACKGROUND = „ ім'я файла ”>
Елемент заголовка.
Існує шість рівнів заголовків, що позначаються Н1...Н6. Заголовок рівня 1 самий великий, а рівень 6 забезпечує самий маленький заголовок. дає представлення про відносні розміри букв у заголовках. Для заголовків можна використовувати атрибут, що задає вирівнювання вліво, по центрі чи вправо:
a
Приклад
<HTML>
<HEAD>
<TITLE> Моя перша
сторінка </title>
</head>
<BODY bgcolor=#FFFFFF>
<HR>
<H1>Заголовок
1</h1>
<H2>Заголовок
2</h2>
<H3>Заголовок
3</h3>
<H4>Заголовок
4</h4>
<H5>Заголовок
5</h5>
<H6>Заголовок
6</h6>
<HR
size=5 color=#008080>
</body>
</html>
Лінії
<HR> Горизонтальна лінія (horizontal rule) — дуже часто використовуваний елемент. Елемент не має кінцевого тега, але допускає ряд атрибутів для вирівнювання.: Уліво, по центрі, вправо, по ширині:
align="left" align="center" align="right" align="]ustify"
Можна задавати товщину лінії: size=товщина в пікселях
Можна керувати довжиною лінії: Width=довжина в пікселях чи width=довжина у відсотках
Можна вибрати колір: Color=”колір"
Форматування
<Р> </р>. Елемент абзацу (paragraph) Разом з елементом абзацу можна використовувати атрибут вирівнювання align:
align="left" — вирівнювання по лівому краї; align=”center" — вирівнювання по центрі; align="right" — вирівнювання по правому краї.
Примусовий розрив рядка
Непарний тег <BR> використовується для примусового розриву рядка
Використання стилів
Основні дескриптори стилів подано у таблиці
Теги |
Стиль |
Теги |
Стиль |
<В> </в> |
Напівжирний шрифт |
<SUB> </SUB> |
Підрядковий текст |
<І> </І> |
Курсив |
<SUP> </SUP> |
Надрядковий текст |
<U> </U> |
Підкреслення |
<STRIKE> </STRIKE> |
Перекреслення |
Використання шрифтів
Тег <FONT>.... </FONT>. – дає можливість змінювати шрифти. Цей тег може містити такі атрибути
SIZE – вказує розмір шрифта (може приймати такі значення від 1 до 7)
FACE – вказує назву шрифта
COLOR - для встановлення кольору символів
наприклад:
<FONT SIZE ="3"> довільний текст </FONT>.
<FONT FACE= "Arial"> довільний текст </FONT>.
<
Приклад
2
<HTML>
<TITLE>
Приклади виділення тексту дескрипторами
стилів </TITLE>
<BODY>
<FONT
COLOR= #090080
SIZE ="4">
Приклад
виділення тексту <В>
напівжирним шрифтом </В><BR>
<BR>
Можна
також виділити текст <I>
курсивом
</I>.
<BR><BR>
Особливо
важливі місця можна <U>
підкреслити
</U>.
<BR><BR>
Можна
створити
<SUP>
надрядковий
</SUP>
або
<SUB>
підрядковий
</SUB>
текст.
<BR><BR>
Крім
того, текст можна <
STRIKE >
перекреслити
</
STRIKE >.
</FONT>
</BODY>
</HTML>
Ненумерований список
<
Приклад ненумерованого
списку.
<UL>
<LI>Пункт
1 списку
<LI>Пункт 2 списку
<LI>Пункт
3 списку
</ul>
Найпростішим є ненумерований список (unordered list).
Елемент UL є своєрідним обрамленням списку. Він дозволяє відокремлювати один список від іншого. Елемент LI позначає кожний з пунктів.
Нумерований список.
Атрибут |
Вид нумерації |
Type="1" |
l,2,3,4,... |
Type="i" |
i, ii, iii, iv,... |
Type="I" |
I, II, III, IV. ... |
Type="a" |
a, b, c, d, ... |
Type="A" |
A,B,C,D,„. . |
Приклад нумерованого списку.
<OL type="1">
<LI>Пункт 1
<LI>Пункт 2
<LI>Пункт 3
<LI>Пункт 4
</ol>
труктура нумерованого списку (ordered list) схожа на попередню. Для нього використовується інший зовнішній тег: OL. У цьому випадку кожен пункт маркірується елементом упорядкованої послідовності: арабськими чи римськими числами, буквами латинського алфавіту.Спосіб нумерації задається за допомогою атрибута type.
Приклад 3
<HTML>
<HEAD> <TITLE>
Нумерований список </title></head>
<BODY>
<OL type="1">
<LI>Пункт 1
<LI>Пункт 2
<LI>Пункт 3
<LI>Пункт 4
</ol>
</body>
</html>