пʼятниця, 9 жовтня 2020 р.

Теги

Список основних тегів 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.     В комірках таблиці можна розміщувати будь-які дані, в т.ч. тексти, картинки, гіперпосилання тощо.


 

 

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

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