Html

Тема: Мова розмітки гіпертекстуТема: Мова розмітки гіпертексту HTMLHTML
Структура HTML-документа.
У документі HTML можна виділити два основних блоки: головнаголовна
частина та тілотіло документа. Вміст головної частини не виводиться на
екран користувача, за винятком заголовка. У тілі документа розміщують
ту інформацію, яка буде виведена.

Мова розмітки гіпертекстуМова розмітки гіпертексту HTMLHTML
ТілоТіло документа.документа.
Тег <BODY>Тег <BODY> має ряд параметрів, які умовно можна розділити на
чотири основні групи (параметри фону, границь документа, тексту й
гіперпосилань).
Тег <TITLE>Тег <TITLE> є єдиним обов'язковим тегом головної частини та служить
для того, щоб дати документу назву, яка найчастіше відображається у рядку
заголовка вікна браузера.
НазваНазва (заголовок)(заголовок) документадокумента..

ПараметриПараметри фонуфону
BGCOLORBGCOLOR встановлює колір фону, значення якого може бути введене
у символьному еквіваленті (green) або у шіснадцятковому форматі
(від 00 до FF із приставкою #), який утворюється на базі колірної моделі
RGB.
Деякий набір кольорів:
Назва
Символьне
позначення
Код Назва
Символьне
позначення
Код
яскраво голубий aqua #00FFFF темно-синій navy #000080
чорний black #000000 оливковий,
жовто-зелений
olive #808000
синій blue #0000FF пурпурний purple #800080
яскраво пурпурний fuchsia #FF00FF червоний red #FF0000
сірий gray #808080 срібний silver #C0C0C
0
зелений green #008000 синьо-зелений
(морської хвилі)
teal #008080
яскраво зелений lime #00FF00 білий white #FFFFFF
червоно- maroon #800000 жовтий yellow #FFFF00

ПараметрПараметр BACKGROUNDBACKGROUND дозволяє накладати на фон документафон документа
графічне зображеннязображення:
<BODY BACKGROUND="IMAGE.JP<BODY BACKGROUND="IMAGE.JPEEG">G">
Де image.jpg – адреса й ім'я файлу малюнка.
Як фонове зображення повинен використовуватися графічний файл
формату GIF або JPG (розширення файлів gif, jpg, jpeg).
ПараметриПараметри текстутексту
TEXTTEXT – задає колір основного тексту на сторінці (значення параметра
може бути введене аналогічно кольору фону документа), наприклад:
<BODY TEXT="black"><BODY TEXT="black">
ПараметриПараметри гіперпосиланьгіперпосилань
Параметри гіперпосилань (зв'язків із внутрішніми або зовнішніми
документами) визначають колір активних (ALINKALINK), таких, що не були
переглянуті, (LINKLINK) та переглянуті (VLINKVLINK) посилань, значення задаються як
колір фону, наприклад:
<BODY LINK="#OOOOFF" ALINK="#OOOOFF" VLINK="blue"><BODY LINK="#OOOOFF" ALINK="#OOOOFF" VLINK="blue">

Форматування тексту.
ТегТег <<CODECODE>>
ТегТег <CODE><CODE> форматує свій текст як невеликий фрагмент програмного коду.
Наприклад:
<<CODECODE>> If kIf k > 0> 0 Then kThen k == kk + 1+ 1
</</CODECODE>>
Результат:
If k > 0 Then k = k
+ 1
Тег <Тег <SAMPSAMP>>
ТегТег <SAMP><SAMP> позначає текст як
зразок.
Наприклад:
<SAMP> s=x^3<SAMP> s=x^3
</SAMP></SAMP>
Резул
ьтат:
s=x^3
ТТеег < INS >г < INS >
Тег <Тег <INSINS>> позначає свій текст як
вставку.
Наприклад:
Населення України складаєНаселення України складає
46<ins>,6 </ins> млн.46<ins>,6 </ins> млн.
Результат:
Населення України складає 46,6
млн.

Тег <Тег <DFNDFN>>
Тег <DFN>Тег <DFN> позначає свій текстовий фрагмент як визначення.
Наприклад:
<DFN> Трикутник </DFN> —<DFN> Трикутник </DFN> —
це ...це ...
Результат:
Трикутник —
це ...
ТТеег <ЕМ>г <ЕМ>
Тег <ЕМ>Тег <ЕМ> використовується для виділення важливих фрагментів
тексту (реалізація логічного наголосу в тексті).
Наприклад:
Населення <em> України </em>Населення <em> України </em>
складає 46,6 млн.складає 46,6 млн.
Результат:
млн.
Тег <STRONG>Тег <STRONG>
Тег <STRONG>Тег <STRONG>, як правило, використовується для виділення важливих
фрагментів тексту.
Наприклад:
Населення України складаєНаселення України складає
<STRONG> 46,6 млн. </STRONG><STRONG> 46,6 млн. </STRONG>
Результат:
млн.

Тег <KBD>Тег <KBD>
Тег <KBD>Тег <KBD> позначає текст як такий, що вводиться користувачем з клавіатури.
Наприклад:
Для реалізації умови введітьДля реалізації умови введіть
<KBD> If k > 0 Then k = k + 1 <KBD><KBD> If k > 0 Then k = k + 1 <KBD>
Результат:
Для реалізації умови введіть
If k > 0 Then k = k + 1
Тег <В>Тег <В>
Відображає текст напівжирним шрифтом.
Тег <І>Тег <І>
Відображає текст курсивом.
Тег <ТТ>Тег <ТТ>
Відображає текст моноширинним шрифтом.
Тег <U>Тег <U>
Відображає текст підкресленим. Відмінений тег, який підтримується
браузерами.

Теги форматуванняТеги форматування можуть бути вкладенимивкладеними один у
одного.
Наприклад:
<B> <I> Приклад </I> </B><B> <I> Приклад </I> </B>
Резул
ьтат:
Прикл
ад
Теги <STRIKE> та <S>Теги <STRIKE> та <S> відображають перекреслений
текст.
Тег <BIG>Тег <BIG>
Відображає текст шрифтом більшого (ніж непомічена частина тексту)
розміру.
Тег <SMALL>Тег <SMALL>
Відображає текст шрифтом меншого (ніж непомічена частина тексту)
розміру.
Тег <Тег <SUBSUB>>
Зсуває текст нижче рівня рядка й виводить його (якщо можливо)
шрифтом меншого розміру.
Тег <Тег <SUPSUP>>
Зсуває текст вище рівня рядка й виводить його (якщо можливо)
шрифтом меншого розміру.

Тег <FONT>Тег <FONT>
Тег <FONT>Тег <FONT> вказує параметри шрифту.
Для тега можуть задаватися наступні параметри: FACEFACE, SIZESIZE і COLORCOLOR.
Наприклад:
<FONT FACE="Verdana", "Arial",<FONT FACE="Verdana", "Arial",
"Helvetica">"Helvetica">
ШрифтШрифт..
</FONT></FONT>
FACEFACE
Параметр служить для вказівки типу шрифту, яким браузер буде
виводити текст (якщо такий шрифт є на комп'ютері). Значенням даного
параметра служить назва шрифту. Якщо такого шрифту не буде знайдено,
буде використаний шрифт, установлений за замовчуванням.
Можна вказати як один, так і кілька назв шрифтів, розділяючи їх
комами.

Наприклад:
<FONT FACE="Verdana",<FONT FACE="Verdana",
"Arial", "Helvetica" SIZE=+3> (3"Arial", "Helvetica" SIZE=+3> (3
додається до базовогододається до базового
показника 3)показника 3)
Шрифт.Шрифт.
</FONT></FONT>
<FONT SIZE=+3><FONT SIZE=+3>
</FONT></FONT>
SIZESIZE
Параметр служить для вказівки
розмірів шрифту в умовних одиницях від
1 до 7. Конкретний розмір шрифту
залежить від браузера.
Розмір шрифту вказується як
абсолютною величиною (SIZE=2), так і
відносною (SIZE=+1).
Наприклад:
<<FONT COLORFONT COLOR=0=0CFFACFFA5>5>
</</FONTFONT>>
COLORCOLOR
Цей параметр установлює колір
шрифту, що може задаватися за
допомогою стандартних імен або у
шістнадцятковому форматі.

Розбиття на абзаци.
ТегТег розбиття на абзаци <Р><Р>. Закриваючий тег </Р></Р> не обов'язковий.
Наприклад:
<P ALIGN = RIGHT> Елементами структури документів є<P ALIGN = RIGHT> Елементами структури документів є
заголовки, підзаголовки, таблиці, абзаци і др.</p>заголовки, підзаголовки, таблиці, абзаци і др.</p>
Результат:
Елементами структури документів є заголовки, підзаголовки, таблиці,
абзаци і др.
порожній рядок
Параметр горизонтального вирівнювання ALIGN
Значення параметра Дія
LEFT Вирівнювання тексту по лівій границі вікна браузера
RIGHT Вирівнювання по правій границі вікна браузера
CENTER Вирівнювання по центру вікна браузера
JUSTIFY Вирівнювання по ширині

Абзаци.
Для заданнязадання відступувідступу (як, наприклад, в першому рядку абзацу) можна
використати спеціальний символ нерозривний пробіл &nbspнерозривний пробіл &nbsp.
Наприклад:
&nbsp &nbsp &nbsp Текст&nbsp &nbsp &nbsp Текст
Переведення рядка.Переведення рядка.
ТегТег примусового переведення рядка <BR><BR>, що не маєне має відповідного
закриваючогозакриваючого тега. Включення тега <BR><BR> у текст документа забезпечить
розміщення наступного тексту з початку нового рядка.
ЗаголовкиЗаголовки всередині HTML-документа.всередині HTML-документа.
Заголовки можуть мати шість різних рівнівшість різних рівнів (розмірів).
Для розмітки заголовків використовуються теги <H1>, <Н2>, < Н3>,<H1>, <Н2>, < Н3>,
<Н4>, <Н5>, <Н6><Н4>, <Н5>, <Н6> з закриваючимиз закриваючими. Заголовок з номером 1 є найбільшим
(заголовок верхнього рівня), а з номером 6 – найменшим.
Теги заголовків можуть задаватися з параметром горизонтального
вирівнювання ALIGNALIGN. Можливі значення параметра відповідають параметрам
вирівнювання тега абзацу <Р><Р>.
Наприклад:
<H3 ALIGN = RIGHT> Зміст<H3 ALIGN = RIGHT> Зміст
</H3></H3>

ТТеег <CENTER>г <CENTER>
Тег-контейнерТег-контейнер <CENTER><CENTER> призначений для вирівнювання елементів по
центру вікна браузера.
Наприклад:
<CENTER> Текст </CENTER><CENTER> Текст </CENTER>
Використання коментарів.Використання коментарів.
Коментарі можуть складатися з довільного числа рядків і повинні
починатися тегом .. Все, що розміщене
всерединівсередині цих тегів, при перегляді сторінки не буде відображатисяне буде відображатися на екрані.
Наприклад:
<ADDRESS> praktykum@rambler.ru<ADDRESS> praktykum@rambler.ru
</ADDRESS></ADDRESS>
ТТеег <г <ADDRESSADDRESS>>
ТегТег <ADDRESS><ADDRESS> застосовується для ідентифікації автора документа й для
вказівки адреси авторавказівки адреси автора. Також можуть міститись відомості про авторські
права, дату створення й останнього відновлення документа.

Списки.
У мові HTML передбачені наступні основні типи списків: маркованиймаркований,
нумерованийнумерований і списоксписок визначеньвизначень.
Маркований список.Маркований список.
Теги <UL> і <LI>Теги <UL> і <LI>
Створення маркованого списку – тег-контейнертег-контейнер <UL> </UL><UL> </UL>,
всередині якого розташовуються всі елементи списку. Кожний елемент
списку повинен починатися тегом <LI><LI>. ЗакриваючийЗакриваючий тег може бути як
присутнійприсутній, так і відсутнійвідсутній.
<UL> Елементами структури<UL> Елементами структури
документів є <LI>заголовкидокументів є <LI>заголовки
<LI>підзаголовки <LI>таблиці<LI>підзаголовки <LI>таблиці
<LI>абзаци </UL><LI>абзаци </UL>
Наприклад (представлені 2 варіанти запису2 варіанти запису списку):
<UL> Елементами структури<UL> Елементами структури
документів єдокументів є
<LI>заголовки<LI>заголовки
<LI>підзаголовки<LI>підзаголовки
<LI>таблиці<LI>таблиці
<LI>абзаци<LI>абзаци
</UL></UL>
Результат:
Елементами структури документів є
•заголовки
•підзаголовки
•таблиці
•абзаци

Списки.
ТегТег <UL><UL> може мати параметри: COMPACTCOMPACT і TYPETYPE.
Параметр COMPACTCOMPACT записується без значень і застосовується для
вказівки браузеру, що даний список необхідно виводити в компактному виді.
Параметр TYPETYPE може приймати наступні значення:
TYPETYPE = discdisc - маркери відображаються ●;
TYPETYPE = circlecircle - маркери відображаються ○;
TYPETYPE = squaresquare - маркери відображаються ■.
Наприклад:
<UL TYPE = circle><UL TYPE = circle>
Значенням, використовуваним за
замовчуванням, є TYPE = discTYPE = disc. Для
вкладених маркованих списків на першому
рівні за замовчуванням використовується
значення discdisc, на другому – circlecircle, на
третьому й далі – squaresquare.
Параметр TYPETYPE з тими ж значеннями може
використовуватись для вказівки виду
маркерів окремих елементів списку. Для
цього параметр TYPETYPE з відповідним
значенням вказується в тегові елемента
списку <LI>.<LI>.
Наприклад:
<UL TYPE = circle><UL TYPE = circle>
Елементами структуриЕлементами структури
<LI TYPE=square><LI TYPE=square>
заголовкизаголовки
</UL></UL>
Результат:
Елементами структури документів є
■ заголовки
○ підзаголовки
○ абзаци

Списки.
НумерованНумерованиийй список.список.
Створення нумерованого списку – тег-контейнертег-контейнер <<OOL> </L> </OOL>,L>,
всередині якого розташовуються всі елементи списку.
Кожний елемент списку повинен починатися тегом <LI>.<LI>.
ЗакриваючийЗакриваючий тег може бути як присутнійприсутній, так і відсутнійвідсутній.
Наприклад:
<OL> Елементами<OL> Елементами
структури документів єструктури документів є
<LI>таблиці<LI>таблиці
</OL></OL>
Тег <OL>Тег <OL> може мати параметри: COMPACTCOMPACT (аналогічний до <UL>),
TYPETYPE, STARTSTART.

Нумерований список.
Параметр TYPETYPE використовується для задання виду нумерації списку.
Може приймати значення:
TYPE = АTYPE = А – задає маркери у вигляді прописних латинськихпрописних латинських літер;
TYPE = аTYPE = а – задає маркери у вигляді рядкових латинськихрядкових латинських літер;
TYPE = ITYPE = I – задає маркери у вигляді великих римськихвеликих римських цифр;
TYPE = iTYPE = i – задає маркери у вигляді маленьких римськихмаленьких римських цифр;
TYPE = 1TYPE = 1 – задає маркери у вигляді арабських цифрарабських цифр.
За замовчуваннямЗа замовчуванням завжди використовується значення TYPE = 1TYPE = 1. Це
стосується й вкладених нумерованих списків.
Наприклад:
<<OL TYPEOL TYPE == II > Елементами> Елементами
структури документів єструктури документів є
<<LILI>> ЗЗаголовкиаголовки
<<LILI>> ПідзаголовкиПідзаголовки
<<LILI>> ТТаблиціаблиці
<<LILI>> ААбзацибзаци
</</OLOL>>
Результат:

Нумерований список.
ПараметрПараметр STARTSTART дозволяє почати нумераціюпочати нумерацію списку з потрібної
позиції. Значенням параметра STARTSTART повинне вказуватися натуральне
число, незалежно від виду нумерації списку.
Наприклад:
<OL TYPE = A START=5><OL TYPE = A START=5>
Елементами структуриЕлементами структури
</OL></OL>
Результат:

Наприклад:
<UL><UL>
<LI> СНГ<LI> СНГ
<OL><OL>
<LI> Україна<LI> Україна
<LI> Росія<LI> Росія
<LI> ...<LI> ...
</OL></OL>
<LI>Євросоюз<LI>Євросоюз
<OL><OL>
<LI> Франція<LI> Франція
<LI> ...<LI> ...
</OL></OL>
</UL></UL>
Вкладені списки.
В HTML допускається довільне вкладеннявкладення різнихрізних типівтипів списківсписків.
Результат:

Реалізація гіперпосилань та робота з графікою.
Організація посилань.Організація посилань.
Посилання складається із двохдвох частинчастин. ПершаПерша з них – це те, що
відображене на Web-сторінці, – вона називається вказівниквказівник посиланняпосилання,
другадруга частина, що дає інструкцію браузеру, називається адресноюадресною
частиноючастиною посилання (URL-Адреса).
Покажчиком посилання може бути слово, група слів або зображення.
Зовнішній вигляд посилання залежить від його типу, способів створення й
установок програми-браузера. Вказівники бувають двох типів - текстові йтекстові й
графічні.графічні.
ТТеег <А>г <А>
Призначений для для організації посилання: вводиться вказівник
посилання та адресна частина посилання.
Має єдиний параметр HREFHREF, значенням якого є URL-адреса. Вказівник
може бути як відносним, так і абсолютним. Необхідним є закриваючий тег
</А>.</А>.
Наприклад:
<A HREF="http://ukr.net"> Поштовий сервер<A HREF="http://ukr.net"> Поштовий сервер
</A></A>

Внутрішні посилання.Внутрішні посилання.
Для побудови внутрішнього посилання спочатку потрібно створити
вказівниквказівник, що визначає місце призначення гіперпосилання: потрібно
розмістити у необхідному місці вказівник і дати йому ім'я за допомогою
параметра NAME тега <А>. При цьому параметр HREFHREF не використовуєтьсяне використовується, і
браузер не виділяє вміст тега <А>.
Після цього у місці, де має бути гіперпосилання, додається звичайний
тег гіперпосиланнятег гіперпосилання, де у якості значення параметра HREFHREF вказується
ім’я закладки з префіксом ##, що говорить про те, що це внутрішнє
посилання.
Наприклад:
<A NAME=part_2> </A><A NAME=part_2> </A>
Наприклад:
<A HREF="#part_2"> Частина 2<A HREF="#part_2"> Частина 2
</A></A>
При кліку вказівника миші по гіперпосиланню Частина 2Частина 2 відбудеться
автоматичний перехід до необхідного місця документа.

ГрафікаГрафіка в HTML-документі.в HTML-документі.
Для додавання зображення на сторінку використовується тег <IMG><IMG> з
обов’язковим параметром SRCSRC, який вказує файл зображення та шлях до нього.
Закриваючий тег не потрібен.
Наприклад:
<IMG SRC="image.gif"><IMG SRC="image.gif">

Таблиці в HTML.
Тег <Тег <TABLETABLE>>
Призначений для побудовипобудови таблицьтаблиць. Має закриваючий тег.
Будь-яка таблиця складається з одного або декількох рядків, у кожному з
яких задаються дані для окремих комірок.
Тег </TR>Тег </TR> призначений для введеннявведення рядкарядка. Має закриваючий тег. ТегТег
<TD><TD> призначений для введення коміркивведення комірки. Має закриваючий тег.Має
закриваючий тег. Тег <TH>Тег <TH> призначений для введення комірок,
найчастіше комірок-заголовківкомірок-заголовків. Має закриваючий тег. Теги <TD>Теги <TD> і
<TH><TH> не можуть розташовуватись поза описом рядка таблиці <TR>.<TR>.

Наприклад:
<<TABLETABLE>>
<<TRTR>>
<<TDTD> Комірка (1, 1)> Комірка (1, 1)
</</TDTD>>
</</TDTD>>
</</TRTR>>
<<TRTR>>
</</TDTD>>
</</TDTD>>
</TR></TR>
</TABLE></TABLE>
Комірка (1, 1) Комірка (1, 2)
Результат:

Заголовок таблиціЗаголовок таблиці..
Тег <CAPTION>Тег <CAPTION>
Додавання заголовку таблиці, який може бути відсутнім. Обов'язковим є
закриваючий тег. Опис заголовка таблиці повинен розміщуватись всередині
тегів <TABLE><TABLE> і </TABLE></TABLE> відразу ж після тега <TABLE><TABLE> і до першого
<TR><TR>.
Параметри тегу:Параметри тегу:
ALIGNALIGN
Значення Дія
ТОР (за замовчуванням) Заголовок над таблицею
BOTTOM Заголовок під таблицею
LEFT Заголовок вирівняний по лівому краю
CENTER Заголовок вирівняний по центру
RIGHT Заголовок вирівняний по правому
краю

Параметри тега <TABLE>.Параметри тега <TABLE>.
BORDERBORDER
Параметр BORDERBORDER керує відображенням рамок таблицірамок таблиці, комірок.
Параметр може мати чисельне значення, яке визначає товщину рамки в
пікселах, що малюється навколо всієї таблиці, однак на товщину рамок
навколо кожної комірки це значення не впливає.
Наприклад:
<TABLE BORDER=1> та <TABLE BORDER><TABLE BORDER=1> та <TABLE BORDER> аналогічні у Internet
Explorer
<TABLE BORDER=0> –<TABLE BORDER=0> – рамка відсутня, такий запис аналогічний
відсутності параметра взагалі
ШиринаШирина та висота таблиць.та висота таблиць.
ПараметриПараметри WIDTH і HEIGHTWIDTH і HEIGHT
Рекомендоване задання ширини та висоти таблиціширини та висоти таблиці, яке буде по
можливості встановлене. Значення параметрів – чисельне в пікселах або у
відсотках від усього розміру вікна.
Наприклад:
<TABLE<TABLE
WIDTH=200>WIDTH=200>

Параметри тегів </TR>, </TD> та </TH>Параметри тегів </TR>, </TD> та </TH>
Всі правила, які діють для керування відображенням тексту, можуть
бути використані для форматування тексту всередині комірки. Припустиме
використання практично всіх елементів HTML <Р>, <BR>, <HR>,<Р>, <BR>, <HR>, коди
заголовків - від <H1> до <Н6>,<H1> до <Н6>, теги форматування символів – <В>, <I>,<В>, <I>,
<FONT SIZE>, <FONT COLOR><FONT SIZE>, <FONT COLOR> і т.д., теги вставки графічних зображень
<IMG>,<IMG>, гіпертекстових посилань <А><А> і т.д.
ПараметриПараметри WIDTH і HEIGHTWIDTH і HEIGHT
Можуть застосовуватися в кодах <TD> і <ТН>.<TD> і <ТН>. Їхній синтаксис
аналогічний синтаксису цих параметрів для тега <TABLE>.<TABLE>. Їхнє значення
визначає ширину або висоту комірки. Значення можуть задаватися в
пікселах або у відсотках від розмірів всієї таблиці. Якщо в стовпці значення
ширини зазначено лише в одній комірці, то дане значення стає шириною
всієї колонки. Якщо таких вказівок декілька, то вибирається максимальне
значення. Ті ж властивості характерні й для рядків.

ПараметриПараметри COLSPANCOLSPAN та ROWSPANта ROWSPAN
COLSPANCOLSPAN
Реалізація об’єднанняоб’єднання декількох комірок по горизонталі в одну.
ROWSPANROWSPAN
Реалізація об’єднання декількох комірок по вертикалі в одну.
Обидва задаються в тегах <TD> або <ТН>.<TD> або <ТН>. Значенням є число, що
вказує скільки комірок буде об’єднане.
Наприклад:
<TD COLSPAN = "2"> Комірка<TD COLSPAN = "2"> Комірка
</TD></TD>
Результат:
Комірка (1, 1)
(2, 1) Комірка (2, 2)

Вкладені таблиціВкладені таблиці
Наприклад:
<TABLE BORDER=3><TABLE BORDER=3>
<CAPTION> Таблиця 1. </CAPTION><CAPTION> Таблиця 1. </CAPTION>
<TR><TR>
<TD> Комірка (1, 1) </TD><TD> Комірка (1, 1) </TD>
</TR></TR>
<TR><TR>
<TD><TD>
<TABLE BORDER><TABLE BORDER>
<TR><TR>
<TD> 1 </TD><TD> 1 </TD>
<TD> 2 </TD><TD> 2 </TD>
<TD> 3 </TD><TD> 3 </TD>
</TR></TR>
</TABLE></TABLE>
</TD></TD>
</TR></TR>
</TABLE></TABLE>
Результат:
Таблиця 1.
Комірка (2, 2)1 2 3

HTML-форми.
Форма користувачаФорма користувача – це сукупність стандартних HTML-конструкційстандартних HTML-конструкцій
уведення текстової й іншої інформації й програми-оброблювача цієї
інформації, що працює на Web-сервері.
ТегТег <FORM><FORM> - призначений для опису формиопису форми. Має закриваючий тег.
ПараметриПараметри METHOD та ACTIONMETHOD та ACTION
METHODMETHOD
Вказівка методу відправкиметоду відправки повідомлення з даними з форми. Значеннями
можуть бути GET (не рекомендується) або POST (рекомендується).
ACTIONACTION
ACTION описує URLURL, що буде викликатися для обробки форми.
Наприклад:
<FORM METHOD=post<FORM METHOD=post
ACTION=mailto:praktykum@rambler.ruACTION=mailto:praktykum@rambler.ru>

HTML-форми.
ЕлементиЕлементи формиформи: текстове поле, перемикач, кнопка, список.
Наприклад:
<TEXTAREA NAME="Mes" ROWS=10 COLS=50> Введіть Ваше<TEXTAREA NAME="Mes" ROWS=10 COLS=50> Введіть Ваше
повідомлення </TEXTAREA>повідомлення </TEXTAREA>
ТекстовеТекстове поле:поле:
ТегТег <TEXTAREA><TEXTAREA>
Використовується для того, щоб дозволити користувачеві вводити
більше одного рядка інформації (вільний текствільний текст).
Параметри тега:Параметри тега:
NAMENAME – ім'я поля уведення
ROWSROWS – висота поля уведення в символах (кількість рядків)
COLSCOLS – ширина поля уведення в символах (кількість стовпців)
При поміщенні як вміст тегу деякий текст – цей текст автоматично буде
з’являтись у текстовому полі при відкритті сторінки.

HTML-форми.
Визначення елементів управління форми:Визначення елементів управління форми:
Наприклад:
<INPUT TYPE=TEXT> та <INPUT> рівнозначні.<INPUT TYPE=TEXT> та <INPUT> рівнозначні.
Тег <INPUT>Тег <INPUT>
Використовується для формування поля для введення інформації:
тестове поле, перемикач, кнопка.тестове поле, перемикач, кнопка.
Параметри тега:Параметри тега:
CHECKEDCHECKED – при роботі з компонентами CHECKBOXCHECKBOX або RADIORADIO
вказує на вибраність елемента.
MAXLENGTHMAXLENGTH – визначає кількість символівів, які користувачі можуть
ввести в поле введення.
NAMENAME – ім'я поля введення. Дане ім'я використовується як унікальний
ідентифікатор поля, за яким визначаються дані введені у це поле.
SIZESIZE – визначає візуальний розмір поля введення на екрані в символах.
VALUEVALUE – привласнення полю значення за замовчуванням.
Вид поля введення визначається параметром TYPE, його значення:
TEXTTEXT
Використовується для формування однорядкового текстового поля. Це
значення є значенням за замовчуванням параметру TYPETYPE.

HTML-форми.
CHECKBOXCHECKBOX
Відображення незалежного перемикача. Значення, що буде
передаватися елементом, може приймати значення ONON або OFFOFF.
Наприклад:
<FORM><FORM>
<INPUT TYPE=CHECKBOX> Бажаю отримувати новини Вашого<INPUT TYPE=CHECKBOX> Бажаю отримувати новини Вашого
сайту </INPUT>сайту </INPUT>
</FORM></FORM>
Наприклад:
<INPUT TYPE= PASSWORD><INPUT TYPE= PASSWORD>
PASSWORDPASSWORD
Побудова текстового поля, при введенні значення у яке не відбувається
відображення цього значення у полі.

HTML-форми.
HIDDENHIDDEN
Поля даного типу не відображаються браузером і не дають можливість
користувачеві змінювати дані поля.
RADIORADIO
Дозволяє обирати одне значення з декількох альтернатив (залежні
перемикачі). Для створення набору альтернатив необхідно побудувати
декілька полів уведення з атрибутом TYPE="RADIO"TYPE="RADIO" з різними значеннями
атрибута VALUEVALUE, але з однаковими значеннями атрибута NAMENAME.
Наприклад:
<P> Освіта:</P><P> Освіта:</P>
<P> <INPUT TYPE=RADIO<P> <INPUT TYPE=RADIO
NAME="Edu" VALUE="V"> ВищаNAME="Edu" VALUE="V"> Вища
</P></P>
<P> <INPUT TYPE = RADIO<P> <INPUT TYPE = RADIO
NAME = "Edu" VALUE="NV">NAME = "Edu" VALUE="NV">
Незакінчена вища </P>Незакінчена вища </P>
<P> <INPUT TYPE = RADIO<P> <INPUT TYPE = RADIO
NAME = "Edu" VALUE="S">NAME = "Edu" VALUE="S">
Середня </P>Середня </P>
Результат:
При виборі "Вища" серверу
буде передане значення: V.

HTML-форми.
SUBMITSUBMIT
Побудова кнопки, при настиканні на яку буде викликаний URL,
описаний у заголовку форми. Тобто генерація події – відправити дані
форми.
Наприклад:
<INPUT TYPE = SUBMIT VALUE = "Відправити"><INPUT TYPE = SUBMIT VALUE = "Відправити">
Наприклад:
<INPUT TYPE=RESET VALUE="Очистити"><INPUT TYPE=RESET VALUE="Очистити">
RESETRESET
Будується кнопка, при натисканні якої всі поля форми приймуть
значення, описані для них за замовчуванням.
Результат:
Результат:

HTML-форми.
Фрагмент коду:
Придбати у кількості:Придбати у кількості:
<INPUT TYPE="TEXT" SIZE="5"<INPUT TYPE="TEXT" SIZE="5"
MAXLENGTH="4" VALUE="1"> <BR>MAXLENGTH="4" VALUE="1"> <BR>
<INPUT TYPE="SUBMIT" VALUE="Ок"><INPUT TYPE="SUBMIT" VALUE="Ок">
<INPUT TYPE="RESET"<INPUT TYPE="RESET"
VALUE="Очистити">VALUE="Очистити">
ПрикладПриклад:
Реалізувати фрагмент сайту (Інтернет-магазин), де здійснюється вибір
кількості товару, який купляється (кількість обмежується чотиризначним
числом, за замовчуванням обирається "1"):

HTML-форми.
СпискиСписки:
Тег <SELECT>Тег <SELECT>
Можливість побудови списку, з якого користувач має змогу вибрати
значення. Має закриваючий тег.
Параметри тегу:Параметри тегу:
MULTIPLEMULTIPLE – дозволяє вибрати більш ніж одного елементу зі списку.
NAMENAME – визначає ім’я об’єкту.
SIZESIZE – визначає число видимих користувачеві пунктів списку.
Тег <OPTION>Тег <OPTION>
Визначення елементів списку.
ПараметриПараметри: SELECTEDSELECTED та VALUEVALUE.
SELECTEDSELECTED – використовується для початкового вибору значення
елемента за замовчуванням.
VALUEVALUE – значення, яке буде повертатись формою при виборі
користувачем даного пункту.

HTML-форми.
Наприклад:
<P> Виберіть Ваш вік </P>
<SELECT NAME="Vik" SIZE=2>
<OPTION> 10-16
<OPTION> 17-25
<OPTION> 26-35
<OPTION> >35
</SELECT>
Наприклад:
<SELECT NAME="Vik">
<OPTION> 10-16
<OPTION> 17-25
<OPTION> 26-35
<OPTION> >35
</SELECT>

HTML-форми.
Наприклад:
<SELECT MULTIPLE=2 NAME="Vik">
<OPTION> 10-16
<OPTION> 17-25
<OPTION> 26-35
<OPTION> >35
</SELECT>
Наприклад:
<SELECT NAME="Vik">
<OPTION> 10-16
<OPTION SELECTED> 17-25
<OPTION> 26-35
<OPTION> >35
</SELECT>

Html

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Html

Similar to Html (20)

More from computerscienceIR

More from computerscienceIR (9)

Recently uploaded

Recently uploaded (10)

Html