Список основних тегів HTML

Список основних тегів HTML та їх параметрів (аргументів)

Структура документа

<HTML> … </ HTML> - початок і кінець HTML-документа.
<HEAD> … </ HEAD> - початок і кінець розділу заголовків. Тут розміщується інформація, яка не відображатиметься на веб-сторінці.
<TITLE> … </ TITLE> - назва документа (розміщується в розділі заголовків)
<BODY> … </ BODY> - початок і кінець тіла документа. Атрибути:
·          TOPMARGIN=…ширина в пікселах верхнього і нижнього полів документа
·          LEFTMARGIN=… – ширина в пікселах лівого і правого полів документа
·          TEXT=… – колір символів для всього тексту (наприклад, GREEN чи #FF2AFE)
·          BGCOLOR=… – колір фону для всього тексту (словом чи код)
·          BACKGROUND="адреса файлу-картинки" – фонова картинка для веб-сторінки
·          LINK="колір" – колір ще не відвіданих гіперпосилань
·          VLINK="колір" – колір відвіданих гіперпосилань
·          ALINK="колір" – колір активного (натиснутого) гіперпосилання
·          BGPROPERTIES=FIXED фонове зображення сторінки не буде прокручуватись
·          TOPMARGIN=… LEFTMARGIN=… RIGHTMARGIN=… BOTTOMMARGIN=… - відступи тексту від краю вікна сторінки відповідно зверху, зліва, справа, знизу
<DIV> … </ DIV> - початок і кінець розділу тексту (розміщується у тілі документа)

Форматування тексту

<Н1> … </ H1>, <H2> … </ H2>, … , <H6> … </ H6> - заголовки різних рівнів. Атрибути:
·          ALIGN=… – спосіб вирівнювання (CENTER- по центру, LEFT- по лівому краю, RIGHT- по правому краю, JUSTIFY- по ширині)
<P> … </ P> - початок і кінець параграфа (закриваючий тег не обов’язковий). Атрибути ті ж, що й у заголовків (див. <H1>)
<BR> - перехід на нову стрічку. При обтіканні текстом картинки можливий атрибут:
·          CLEAR=… – закінчення обтікання (ALL- закінчити обтікання картинок, LEFT, RIGHT)
<HR> - горизонтальна лінія. Атрибути:
·          ALIGN=… – спосіб вирівнювання (CENTER, LEFT, RIGHT)
·          WIDTH=… - ширина лінії у % до ширини вікна
·          SIZE=… – товщина лінії у пікселах
·          COLOR=… – колір лінії
·          NOSHADE відміна об’ємності лінії.
<BASEFONT> - параметри шрифту для всього документу:
·          SIZE=… - розмір шрифту (від –2 до 4)
·          COLOR=… - колір шрифту
·          FACE=… – назва одного з стандартних шрифтів (наприклад, Arial)
<FONT> … </FONT> - параметри шрифту для фрагмента тексту (аналогічні BASEFONT)
<CENTER> … </ CENTER> - вирівнювання фрагмента тексту по центру
<B> … </ B> або <STRONG> … </ STRONG> ділення фрагмента тексту напівжирним шрифтом
<І> … </ І> - виділення фрагмента тексту курсивом
<U> … </ U> - виділення фрагмента тексту підкреслюванням
<S> … </ S> або <STRIKE> … </ STRIKE> - виділення фрагмента тексту закресленням
<SUB> … </ SUB> - подати фрагмент тексту нижніми індексами
<SUP> … </ SUP> - подати фрагмент тексту верхніми індексами
<BLINK> … </ BLINK> - подати фрагмент тексту мигаючим
<BIG> … </ BIG> - виділити текст буквами більшого розміру
<SMALL> … <SMALL> - виділити текст буквами меншого розміру
<CITE> … </ CITE> - цитата (виділяється курсивом)
<PRE> … </ PRE> - зберегти форматування фрагменту тексту, створене іншою програмою
<MARQUEE> … </ MARQUEE> - подати фрагмент тексту біжучою стрічкою. Атрибути:
·          HEIGHT=… – висота області біжучої стрічки в пікселах
·          WIDTH=…ширина області біжучої стрічки в пікселах
·          BGCOLOR=… – колір області біжучої стрічки
·          HSPACE=…відступ тексту від краю області по горизонталі в пікселах
·          VSPACE=…відступ тексту від краю області по вертикалі в пікселах
·          LOOP=… – кількість повторів (від моменту завантаження) ; при INFINITE - безкінечно
·          DIRECTION=… – напрям руху ( LEFT, RIGHT, UP, DOWN )
·          SCROLLAMOUNT=… – швидкість руху (від 1 до 10)
·          BEHAVIOR=… – поведінка (SCROLL, SLIDE, ALTERNATE)

Вставка у документ об’єктів

<IMG>вставка у текст картинки.  Атрибути:
·          SRC=… - адреса файлу-картинки (якщо файл розміщений у папці з веб-сторінкою, то достатньо вказати лише назву і розширення)
·          WIDTH=…ширина картинки в пікселях
·          HEIGHT=… – висота картинки в пікселях
·          ALIGN=… – спосіб обтікання картинки текстом (MIDDLE- по середині, LEFT- картина зліва, RIGHT- картинка справа, BOTTOM- внизу абзацу, TOP – вверху абзацу)
·          BORDER=… – товщина рамки навколо картинки в пікселях
·          VSPACE=… – відстань від тексту до краю картинки по вертикалі в пікселах
·          HSPACE=…відстань від тексту до краю картинки по горизонталі в пікселах
·          ALT=…альтернативний текст, що з’являється при відсутності картинки
·          USEMAP="# назва карти " – для картинки, що є навігаційною картою
<IMG DYNSRC="ім’я файла-відео" параметри > - вставка у текст відео ролика. Атрибути:
·          LOOP=… – кількість повторів; при параметрі INFINITEбезкінечно
·          START=… – спосіб запуску  (MOUSEOVER–  при наведенні миші  , OPENFILEпри завантаженні сторінки )
·          СONTROLSвиведення кнопок управління показом відеоролика
<BGSOUND SRC="адреса звукового файлу" параметр > - вставка звукового супроводу сторінки. Атрибут: LOOP=… – кількість повторів; при параметрі INFINITEбезкінечно

Гіперпосилання

<A> текст  </ A> - гіперпосилання на інший файл чи сторінку. Якщо замість тексту вставити тег IMG з потрібними параметрами, отримаємо графічне гіперпосилання (кнопку). Атрибути:
·          HREF=… - адреса файлу чи сторінки, на яку відбувається посилання (якщо сторінка чи файл розміщений у цій же папці, достатньо вказати лише повну назву файлу).Приклади:
o    HREF=”http://google.com.ua/index.htmlпосилання на веб-сторінку
o    HREF=”C:\physic\kont1.doc” – посилання на файл
o    HREF="#pomidor” – посилання на якір (якесь місце) в цій веб-сторінці
o    HREF="http://name.ru/my.html#tomat” – посилання на якір в іншій веб-сторінці
o    HREF=”mailto:marusia@mail.ua” – посилання на поштову адресу
·          TARGET=… - де відкривати новий документ чи сторінку (_blank – в новому вікні, _self – в тому ж вікні (по замовчуванню), _parent – в батьківському вікні, name – ім’я фрейму)
·          TITLE= - випливаюча підказка (при наведенні курсору на посилання)
·          NAME=… - ім’я фрейму чи якоря (наприклад, NAME=”#pomidory”)

Списки

<OL> … </ OL> - початок і кінець впорядкованого (нумерованого) списку (Ordered List). Кожен тег <OL> викликає перехід на наступну позицію табуляції (зсув тексту вправо), а кожен тег </ OL> викликає перехід на попередню позицію табуляції (зсув тексту вліво). В таких списках кожен новий елемент списку починається тегом <LI>. Атрибути:
·          TYPE=… - тип нумерації (А – великими латинськими, aмалими латинськими, 1 – арабськими цифрами, І – римськими цифрами, і – малими римськими цифрами).
·          START=… - початкове значення для нумерації арабськими цифрами
·          TITLE випливаюча підказка.
<UL> … </ UL> - початок і кінець ненумерованого (маркірованого) списку. Дія аналогічна попередньому тегу Параметри:
·          TYPE=… - тип маркера (DISC – кружок l, CIRCLE – кільце ¡, SQUARE – квадрат n)
<DL> … </DL> - початок і кінець списку визначень термінів. В такому списку кожен термін починається тегом <DT>, а його визначення – тегом <DD>.


Таблиці

Таблиці – основний спосіб розміщення інформації на веб-сторінках. Кількість таблиць необмежена, в комірках таблиці можна розміщувати інші таблиці. Всі комірки одного стовпця мають однакову ширину, а комірки однієї стрічки – однакову висоту (але комірки можна об’єднувати по горизонталі чи по вертикалі)

<TABLE> … </ TABLE> - початок і кінець таблиці. Атрибути (для всієї таблиці):
·          ALIGN - спосіб вирівнювання таблиці в тексті (CENTER, LEFT, RIGHT)
·          BACKGROUNDадреса фонової картинки для всієї таблиці
·          BGCOLOR – колір фону для всієї таблиці
·          BORDERтовщина рамки навколо таблиці в пікселах
·          BORDERCOLORколір рамки (для монохромної рамки)
·          CELLSPACINGвідстань між окремими комірками (в пікселях)
·          CELLPADDINGвідстань між рамкою комірки і текстом у ній (в пікселях)
·          COLS кількість колонок (стовпців) у таблиці
·          FRAME – відображення зовнішньої рамки таблиці (VOID – показувати всі краї, ABOVE – лише верхній край, BELOW – лише нижній краї, HSIDES – лише верхній і нижній, VSIDES – лише лівий і правий, LHS – лише лівий край, RHS – лише правий, BORDER – всі краї)
·          RULES – спосіб відображення внутрішньої сітки таблиці (ALL – показувати всі межі,  NONE – не показувати межі, COLS – показувати лише вертикальні межі, ROWS – лише горизонтальні межі комірок)
·          TITLE випливаюча підказка, коли курсор буде над будь-якою коміркою таблиці
·          WIDTH ширина таблиці (в пікселях чи % до ширини екрану)
<CAPTION> … </ CAPTION> - заголовок таблиці. Атрибути:
·          ALIGNвирівнювання заголовка відносно таблиці (LEFT – зверху ліворуч, RIGHT – зверху праворуч, TOP – зверху (по замовчуванню) , BOTTOM – знизу під таблицею)
·          TITLE – випливаюча підказка для заголовка
<TR> … </ TR> - окрема стрічка таблиці. Атрибути:
·          HEIGHTвисота стрічки (в пікселях чи % до висоти всієї таблиці)
·          ALIGN – горизонтальне вирівнювання тексту в комірках стрічки (LEFT, RIGHT, CENTER)
·          VALIGN – вертикальне вирівнювання тексту (TOP, MIDDLE, BOTTOM)
<TD> … </ TD> - окрема комірка таблиці. Атрибути:
·          BGCOLORколір фону комірки
·          HEIGHTвисота комірки у пікселях (непотрібна, якщо вона вказана у TR для всієї стрічки). Якщо в одній стрічці вказані різні висоти комірок, то вони вирівнюються по максимальному значенню
·          WIDTHширина комірки у пік селах; її потрібно вказувати лише для комірок у першій стрічці, бо для всіх комірок колонки (стовпця) ширина однакова
·          ALIGNгоризонтальне вирівнювання тексту у комірці (LEFT, RIGHT, CENTER)
·          VALIGNвертикальне вирівнювання тексту у комірці (TOP, MIDDLE, BOTTOM)
·          CELLPADDINGвідстань в пікселях від межі комірки до тексту у ній (поле)
·          COLSPAN кількість колонок, які об’єднує ця комірка
·          ROWSPANкількість стрічок, які об’єднує ця комірка
·          TITLE – випливаюча підказка для цієї комірки
Зауваження:
1.     При "об'єднанні" кількох комірок в одну слід уважно рахувати кількість комірок у стрічці, щоб не зіпсувати прямокутну форму таблиці за рахунок "виступаючих" комірок.
2.     В комірках таблиці можна розміщувати будь-які дані, в т.ч. тексти, картинки, гіперпосилання тощо.

Немає коментарів:

Дописати коментар