Для того щоб було краше створювати новий HTML–документ і використовувати в ньому всі необхідні елементи, нижче створений список цих едлементів, їх функції і опис кожного. Всі публікації по даній темі можна передивитись в категорії  ” Все про HTML “

 Основні елементи HTML

 

<!–…–> Текст який розташований в середині тегу <!–…–> це текст коментаря. Коментарі не виводяться в вікні браузеру.
<HTML></HTML>  Повідомляє браузеру, що вся наступна за ним інформація являється текстом, закодованим згідно з форматом HTML
<HEAD></HEAD>  Дозволяє створювати заголовок  HTML–документа
<TITLE></TITLE>  Назва  HTML–документа
<BODY></BODY>  Тіло web–сторінки
 АТРИБУТИ
ALINK=color — Колір посилань під час натискання, яке виконує користува
BACKGROUND=url — URL графічного файлу, який використовується в якості фонового зображення.
BGCOLOR=color — колір фону web–сторінки
Text=color — колір текста в документ

 

            LINK=color — колір посилань, які не відвідуваних з  сторінки  
 VLINK=color — відвідуваних з сторінки

 

Елементи форматування 

<P> Парний тег. Визначає текстовий параграф. Перед параграфом автоматично вставляється пустий рядок. Синтаксис:<p align=aligntype>, де атрибут align задає вирівнювання параграфа. Допустимі значення: left. right. center.
<H1>…<H6> Текст, який поміщають в пару тегів. <Hn></Hn>, відображається у вигляді загодовку n–рівня від 1 до 6. Заголовок першого рівня має найбільший шрифт. Частіше використовується атрибут align.Допустимі значення: left. right. center. Наприклад<h1 align=”center”>Заголовок 1-го рівня</h1
CENTER> </CENTER> Розташовує матеріал по центру сторінки Наприклад<center><h2>Це центр</h2></center>
<BR> Використовується для розріву рядка Наприклад<p>Перенос <br>рядка</p>
<HR>  Горизонтальна розділяюча лінія

Атрибути

SIZE=x —Товщина лінії в пікселях

WIDTH=x — Довжина лінії в пікселях або процентах по відношенню до ширини вікна браузера

ALIGN=x — Вирівнювання горизонтальної лінії.  Допустимі значення: left. right. center.

NOSHADE — Лінія без тіні

COLOR=color — Колір тексту

 

<FONT> </FONT>  Задає розмір і колір шрифта

Атрибути

SIZE=x — розмір шрифта. Ціле число від 1 до 7 саме 7 відповідає самому великому розміру шрифта

FACE=font — імя шрифта або список шрифтів. Весь список шрифтів перевіряється зліва на право, і перший, який є у користувача, бути використовуватись для відтворення документів  

COLOR=color колір тексту

<PRE> </PRE> Визначає блок передчасно відформатованого тексту.
<B> </B> Відтворює текст жирним шрифтом
<I> </I> Відтворює текст курсивом
<U> </U> Відтворює текст підкресленим

 

<TT> </TT>                                                                                         Відтворює текст моноширинними (зафіксованої ширини) текстом
<CITE> </CITE> Використовується для виділення цитат
<CODE> </CODE> Використовується для відображення програмного код
<EM> </EM>
<KBD> </KBD> Використовується для показу тексту який необхідно набирати на клавіатурі.Наприклад<p>Щоб набрати даний документ використовуйте комбінацію клавіш<kbd>&lt;Ctrl&gt;+&lt;P&gt;</kbd>
<STRONG> </STRONG> Виділяє текст (жирним шрифтом)
<VAR> </VAR> Використовується для виділення змінних і аргументів програм
<BASEFONT SIZE=n> Визначає розмір шрифта на сторінці по замовчуванню
<ADDRESS> <ADDRESS> Служить для того щоб показати контактну інформацію про автора. Найчастіше цей елемент розміщується на початку або в кінці документа, і містить імя автора документа, адресу його електронної почти. Браузери зазвичай показують курсивним шрифтом. 

Елементи для зображень

<img> Включає зображення в поточний документ в місце визначенн документа
АТРИБУТИ
SRC=url— URL графічного файлу в форматі GIF. JPEG. PNG
ALT=text — Альтернативний текст, який відображається замість зображення, якщо в браузері не налаштовано налаштування “Показувати малюнки”
ALIGN=x — Вирівнювання зображення на сторінці. Можливі значення: top(вверх). middle(середина).  bottom(низ). left(вліво).  right(вправо).
HEIGHT=x — Висота зображення в пікселях
WIDTH=x — Ширина зображення
BORDER=x — Рамка навколо зображення
HSPASE=x — Горизонтальний відступ від зображення до навколишнього контенту ( в пікселях)
VSPACE=x — Вертикальний відступ від зображення до навколишнього контенту (в пікселях)

Елементи для гіперпосилань

<A> </A> Служить для створення посилань. В залежності від присутності параметрів name або href <A> встановлює посилання на якор. Якорем може називатись закладка всередині сторінки, яку можна вказати в якості мети посилання. При використанні посилання, які вказують на якор, стається перехід до закладки всередині web–сторінки. В якості значення параметра  href використовується адрес документа URL, на який відбувається перехід. Адреса посилання може бути абсолютною і відносною. Абсолютні адреса працюють всюди і всюди незалежно від імені сайту чи web–сторінки, де прописане посилання. Відносні посилання побудовані відносно документа чи кореня сайту.
 АТРИБУТИ
HREF=url — гіпертекстові посилання 
HREF=# name — посилання на внутрішній якор
NAME=name — визначення внутрішнього якоря

 

Елементи для списків і таблиць

<DD> Пункт списку визначень                                 
<DL> </DL> Елементи списку
<DT> Пункт списку визначень  
<LI> </LI> Елементи списку

АТРИБУТИ

TYPE=type — задає тип нумерації. Допустимі значення А (прописні букви), а (малі літери), І (прописні римські числа), і (малі римські числа), і (числа)

VALUE=value — начальний номер

<OL> </OL>  Впорядкований список (пронумерований)

Атрибути

TYPE=type — тип маркера

START=value — число з якого починається список

<UL> </UL> Текст який поміщений в контейнер UL, утворює маркірований список

АТРИБУТИ

TYPE=type — Встановлює тип маркера списку. Можливі варіанти disc (маленький заповненій кружок), circle (маленьке коло), square (маленький квадрат)

<TABLE> </TABLE> Служить контейнером для елементів, які виділяють вміст таблиці  

АТРИБУТИ

BACKGROUND=url — Задає фоновий малюнок в таблиці.

BGCOLOR=color — Колір фону таблиці

ALIGN=x — Вирівнювання таблиці. По замовчуванню по лівому краю.

HEIGHT=x — Висота таблиці

WIDTH=x — Ширина таблиці

BORDER=x — Задає ширину рамки таблиці в пікселях. По замовчуванню його значення рівне нолю, т.е. таблиця виводиться без рамки  

BORDERCOLOR=color — Задає колір рамки таблиці

CELLPADDING=x — Відступ в ячейках таблиці

CELLSPACING=X — Відстань між ячейками таблиці

COLS=x — Визначає кількість рядків в таблиці

FRAME=value — Вказує які частини зовнішньої рамки повинно бути видно (використовується рідко)

RULES=value — Вказує які частини внутрішньої рамки повинно бути видно (використовується рідко)

<TH> </TH> Визначає ячейку заголовка таблиці. В ній текст виділений жирним шрифтом і вирівнений по центру 
<TR> </TR> Застосовується для створення рядка таблиці

АТРИБУТИ 

ALIGHN=x — вирівнювання по центру

BGCOLOR=color — колір фону для всього рядка  

<TD> </TD>  Застосовується для створення ячейки таблиці АТРИБУТИ

BACKGROUND=url — визначає фонове зображення для ячейки таблиці 

BGCOLOR=color — колір фону ячейки

ALIGN=x — вирівнювання вмісту ячейки по горизонталі

Valign=X — вирівнювання вмісту ячейки по вертикалі, top (по верхньому краю рядка)

middle ( по середині)

bottom (по нижньому краю)

baseline (вирівнювання по спільній базовій лінії) 

HEIGHT=x висота ячейки

WIDTH=x ширина ячейки

COLSPAN=x обєднює горизонтальні ячейки

ROWSPAN=x — обєднює вертикальні ячейки

NOWRAP— запрошує перенос рядка

<CAPTION>                   ЗАГОЛОВОК ТАБЛИЦІ                                                  

Елементи для фреймів

<FRAMESET> <FRAMESET> Визначає вивід головного користувацького вікна в виді набору прямокутників (кадрів)

АТРИБУТИ

COLS=x — Визначає кількість вертикальних кадрів

ROWS=x — Визначаэ кылькысть горизонтальних кадрів в наборі кадрів

FRAMEBORDER=x — Показує чи повинен бути фрейм включений в рамку. Визначає стан “on” (активно) “off”(неактивно) в полі кадру FRAMESET (1 або 0)

FRAMESPACING=x — Відстань між двума зєднаними кадрами

 <FRAME>  Визначення конкретного кадру

АТРИБУТИ

SRC=url — Задає URL  HTML–документа чи іншого ресурсу, який повинен переглядатись в даному фреймі

NAME=name — Імя кадру (використовується разом з TARGET= імя як частина знаку розмітки якорного типу <a>)

SCROLLING=value — Відзначає присутність у вікні фрейму полосів прокрутки. Можливі значення

on (активний)

off (неактивний)

auto (автоматичний)

FRAMEBORDER=x — Вказує чи повинен бути фрейм вставлений в рамку

MARGINWIDTH=x —  Додатковий простір зправа і зліва від визначенного кадру (задається в пікселях і повинен бути більше чим ноль) 

MARGINHEIGHT=X — Додатковий простір над і під визначеним кадром  (задається в пікселях і повинен бути більше чим ноль) 

 <NOFRAMES> </NOFRAMES> Розділ сторінки, яка показана для користувачів, які не можуть бачити кадр
 <IFRAME>  Вкладений кадр тільки для (ІЕ)

АТРИБУТИ

SRC=url — Задає URL  HTML–документа чи іншого ресурсу, який повинен переглядатись в даному фреймі 

NAME=name — Назва вікна, використовується разом з TARGET

HEIGHT=x — Висота вбудованого кадру

WIDTH=x — Ширина вбудованого кадру

Елементи для форм

<FORM> </FORM> Активна НTML — форма. Форма призначена для обміну даними між користувачем і сервером

АТРИБУТИ

ACTION=url — програма яка буде обробляти заповнену і відправлену форму, обробник форми METHOD=метhod — відправляє котрий метод HTTP використовується для відправки набору даних форми. Можливі нечуттєві до реєстру значення– “get” (по замовчуванню) і “post”

<INPUT>  Поле для ведення тексту і других даних АТРИБУТИ

TYPE=type — тип поля ведення <INPUT> Можливі варіанти text, password, checkbox, hidden, file

NAME=name — імя поля для індентифікації обробником

VALUE=значення — значення елемента

CHECKED — передчасно активований переключатель чи прапорець

SIZE=x — ширина текстового поля (кількість символів)  

MAXLENGHT=x — максимальна кількість символів поля

DISABLED — блокує доступ і зміну елементу

READONY — значення поля не може бути змінено

<SELECT> </SELECT>  Поле для введення тексту або інших даних АТРИБУТИ 

NAME=name — імя поля для індентифікації обробником.

SIZE=x — кількість відображаємих рядків (по замовчуванню 1)

MULTIPLE=x дозволяє вибрати одночасно декілька елементів зі списку

DISABLED — блокує доступ до елементу списку

 

<OPTION> Визначає окремі елементи списку, створені за допомогою контейнера <SELECT>

АТРИБУТИ

SELECTED — робить визначений пункт списку виділеним.

VALUE=value — значення пункту списку

DISABLED — блокує доступ до елемента списку 

<TEXTAREA> </TEXTARIA>  Поле для введення тексту в декілька рядків

АТРИБУТИ

NAME=name — імя поля для індентифікації обробником.

ROWS=x — кількість видимих рядків в текстовому полі

COLS=x — видима ширина рядка текстового вікна

DISABLED — блокує доступ і змінює елемент

READONLY —значення поля не може бути змінено

<FIELDSET> </FIELDSET>  Призначено для групування елементів форми
<LEGEND> </LEGEND>  Створює заголовок групи елементів форми 

 

Розширені елементи 

<style> </style> Дозволяє включити в документ внутрішні таблиці стилів
TYPE=val Показує нам тип таблиці стилів. Для каскадних таблиць стилів цей атрибут завжди повинен мати значення “text/css” 
<SCRIPT> </SCRIPT> Включає скрипт  як правило JavaScript. в web–сторінку
LANGUAGE= мова яка використовується
Створення подій
FOR=імя обєкта Задає індетифікатор HTML–елементу, до якого буде присвоений обробник
EVENT= подія  Задає тип подій, які не повинні оброблятись 

 

Спеціальні символи 

Символ Призначення Мнемоніка Код
нерозривний пробіл  &nbsp;  &=160;
 § знак розділу (знак параграфа)  &sect;  &=167;
 © знак охорони авторських прав  &copy;  &=169;
 « напрямок вліво подвійна кутова лапка  &laquo;  &=171;
 » напрямок вправо подвійна кутова лапка  &raquo;  &=187;

В web–документах деколи виникає необхідність включити символ, якого немає на клавіатурі. В такому випадку необхідно вставити в HTML—документ назначене посилання (мнемоніку або код).