Для того щоб було краше створювати новий 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><Ctrl>+<P></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= подія | Задає тип подій, які не повинні оброблятись |
Спеціальні символи
Символ | Призначення | Мнемоніка | Код |
нерозривний пробіл | | &=160; | |
§ | знак розділу (знак параграфа) | § | &=167; |
© | знак охорони авторських прав | © | &=169; |
« | напрямок вліво подвійна кутова лапка | « | &=171; |
» | напрямок вправо подвійна кутова лапка | » | &=187; |
В web–документах деколи виникає необхідність включити символ, якого немає на клавіатурі. В такому випадку необхідно вставити в HTML—документ назначене посилання (мнемоніку або код).