Головна HTML Мова розмітки HTML
Мова розмітки HTML

Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами і конвертерами. Але писати безпосередньо на HTML неважко. Можливо, це навіть легше, ніж вивчати HTML-редактор або конвертер, які часто обмежені в своїх можливостях, містять помилки або проводять поганий HTML код, який не працює на різних платформах.

Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML ймовірніше усього будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати документи, які можуть бути переглянені багатьма броузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Firefox, Internet Explorer або деякими іншими програмами. Якщо це дійсно служить Вашим цілям і Ви хочете сформувати власну думку про названі програми, користуйтеся ним. Але робота з HTML - це спосіб засвоїти особливості створення документів в стандартизованій мові, використовуючи розширення, тільки коли це дійсно необхідно.

 

HTML був ратифікований World Wide Web Consortium. Він підтримується декількома широко поширеними броузерами, і, можливо, стане основою майже всього програмного забезпечення, що має відношення до Web.

1. Структура HTML документа

Символи, взяті в кутові дужки <> є HTML командами, по яким «броузер» розпізнає, як потрібно перетворити частини тексту, укладені між цими командами.

Документ загалом повинен бути відмічений як документ в форматі HTML. Для цього він повинен починатися командою <HTML> і закінчуватися командою </HTML>.

Документ складається з 2 частин:

- Заголовка (Head),

- Власне документа (Body).

Для виділення заголовка потрібно ввести: <HEAD> Заголовок документа <HEAD>

Кожний WWW - документ має назву, яка вводиться в титульному рядку броузера.

Для введення титульного рядка в заголовок документа потрібно скористатися наступними командами: <HEAD> <TITLE> TITLE List </TITLE> </HEAD>

Потрібно зазначити, що титульний рядок повинен бути на англійській мові в латинському кодуванні оскільки вона відображається в спеціальних полях броузера.

Для запису основного тексту потрібно ввести: <BODY> Основний текст </BODY>

Таким чином, загальна схема документа в форматі HTML виглядає таким чином:

<HTML>

<HEAD> <TITLE> Титульний рядок документа </TITLE> </HEAD>

<BODY> Основний текст документа </BODY>

</HTML>

При написанні команд HTML не має значення, якими буквами - рядковими або прописними Ви пишете команди.

2. Створення заголовків

Заголовки в документі створюються за допомогою команд: <Hi> Заголовок </Hi>, причому при i = 1 заголовок самий великий, а при i = 6 - самий дрібний.

Наприклад,

Текст, що Відображається

Запис в форматі HTML

Заголовок1

<H1> Заголовок1 </H1>

Заголовок2

<H2> Заголовок2 </H2>

Заголовок3

<H3> Заголовок3 </H3>

Заголовок4

<H4> Заголовок4 </H4>
Заголовок5
<H5> Заголовок5 </H5>
Заголовок6
<H6> Заголовок6 </H6>

3. Створення списків

Списки призначені для представлення інформації у впорядкованому вигляді.

У HTML - документах використовується 3 види списків:

1. Неупорядковані списки,

2. Упорядковані списки,

3. Списки - визначення.

Неупорядкований список використовує для виділення записів спеціальні символи. Неупорядкований список визначається наступними командами початку і кінця списку: <UL> і </UL>

Кожний елемент списку починається з команди: <LI>

У команді <LI> може бути параметр TYPE, який визначає зовнішній вигляд символа, що використовується для виділення рядка в списку і може мати наступні значення:

<LI TYPE=DISK> - кругла жирна точка,

<LI TYPE=CIRCLE> - коло,

<LI TYPE=SQUARE> - маленький чорний квадрат.

В упорядкованому списку всі записи пронумеровані.

Упорядкований список визначається наступними командами початку і кінця списку: <OL> і </OL>

Кожний елемент списку починається з команди: <LI>

У команді <LI> може бути параметр TYPE, який визначає тип нумерації і може мати наступні значення:

<LI TYPE = А> - великими буквами,

<LI TYPE = а> - малими буквами,

<LI TYPE = I> - прописними римськими цифрами,

<LI TYPE = i> - рядковими римськими цифрами,

<LI TYPE = 1> - арабськими цифрами.

У списку - визначенні всі записи здвинуті ліворуч за допомогою табуляції.

Список - визначення визначається наступними командами початку і кінця списку: <DL> і </DL>

Кожний елемент списку починається з команди: <DD>

4. Форматування параграфів і виведення в декілька стовпців.

У документі HTML неможливо створити абзац, використовуючи клавішу [Enter].

Використання цієї клавіші поліпшує зовнішній вигляд початкового тексту, але не впливає на отримане зображення.

Для переходу на наступний рядок скористайтеся командою <br>

Для створення пустого рядка скористайтеся командою <р>

Для створення горизонтальної смуги скористайтеся командою <hr>

Якщо смуга створюється не на весь рядок, а на якусь її частину, наприклад, на 40%, то команда виглядає таким чином: <hr width= 40 %>

Для створення широкої смуги потрібно задати її ширину (в пікселях) <hr size= 10 >

Для вирівнювання смуги ЛІВОРУЧ/ПРАВОРУЧ/ПО ЦЕНТРУ задайте відповідний параметр ALIGN=LEFT/RIGHT/CENTER

Чорна лінія задається наявністю параметра NOSHADE.

Ви можете розташувати текст по центру за допомогою наступної команди: <CENTER>

Іноді необхідно створити текстовий документ, розташування рядків якого (табуляція, відступи, вирівнювання) визначається розробником домашньої сторінки, а не програмою-редактором.

Для створення такого тексту скористайтеся командами: <PRE> текст </PRE>

Отриманий в броузері образ тексту буде точно відповідати тексту в початковому HTML файлі.

Аналогічні функції виконує пара команд: <LISTING> текст </LISTING>

Netscape 3.0 і вище підтримує виведення в декілька стовпців, в газетному форматі за допомогою команд <MULTICOL> і </MULTICOL>.

Нижче приводиться формат команд:

<MULTICOL COLS= «N» GUTTER= «M»> текст </MULTICOL>.

Тут N - кількість стовпців, M - відстань між стовпцями.

Броузери, які не підтримують виведення в декілька стовпців, забезпечать виведення нормально, в 1 стовпець.

5. Форматування символів

Для виділення окремих частин тексту можна скористатися наступними стилями:

У - жирний (Bold);

I - курсив (Italic);

U - з підкресленням (Underline);

S - з перекресленням (STRIKE);

Нижче наведена таблиця команд виділення тексту.

Текст, що відображаєтьсяЗапис в форматі HTML
Виділення тексту жирним шрифтомВиділення <b> тексту </b> жирним шрифтом
Виділення тексту курсивомВиділення <i> тексту </i> курсивом
Виділення тексту підкресленнямВиділення <u> тексту </u> підкресленням
Виділення тексту перекресленням
Виділення <strike> тексту </strike> перекресленням

Для зміни розміру текстових символів скористайтеся командами:

<FONT SIZE = +-i > </FONT>, де i в межах від 1 до 7 відносно початкового розміру букв.

Крім того, можна збільшити або зменшити висоту шрифту за допомогою команд <BIG> і <SMALL>. Ці команди використовуються в парі з командами </BIG> і </SMALL>.

Ще дві пари команд:

<SUB> і </SUB> - підрядковий індекс, наприклад, H2SO4.

<SUP> і </SUP> - надрядковий індекс, наприклад, (a2 - b2) = (а - b)(а + b).

Всі вищенаведені команди визначають фізичне форматування символів. Ви задаєте конкретну зміну характеристик символів.

Крім того, є логічне форматування символів - Ви даєте опис, а броузер вирішує як змінювати характеристики. Загалом, хто довіряє броузеру - користуйтеся цими командами. Вони виглядають таким чином:

<CITE>

Цитата

<CITE>

<EM>

Особливо важливий текст

</EM>

<STRONG>

Сильне виділення тексту

</STRONG>

<KBD>

Текст, введений користувачем

</KBD>

<CODE>

Лістинг програми

</CODE>

<SAMP>

Послідовність літералів

</SAMP>

<VAR>

Ім’я змінної

</VAR>

Броузер користувача сам вибирає шрифт, якщо Ви його конкретно не задали в описі сторінки. Якщо в сторінці заданий шрифт, якого немає у користувача, то Ви можете задати список, що складається з декількох шрифтів, і броузер вибере самий лівий, а якщо його в системі немає, то наступний і т. д. Якщо жодного з шрифтів немає, броузер вибирає свій шрифт.

Шрифт задається за допомогою команди: FONT FACE

6. Управління кольором

Кольори і зображення фону задаються за допомогою команди <BODY>.

Ця команда може задаватися тільки на початку HTML файла і не може бути змінена надалі. Її параметри:

bgcolor = «# код кольору» - колір фону документа,

text = «# код кольору» - колір тексту документа,

link = «# код кольору» - колір тексту, що використовується як посилання,

vlink = «# код кольору» - колір посилання на переглянутий раніше документ,

alink = «# код кольору» - колір посилання в момент натиснення на неї правої кнопки миші.

Код кольору задається в кодуванні RGB - шість шістнадцяткових чисел.

Важливо зазначити, що колір фону не відображається на папері, якщо розпечатати HTML-документ. Нижче приводяться коди найпростіших кольорів:

Білий = FFFFFFМалиновий = FF00FF
Жовтий = FFFF00Бірюзовий = 008080
Червоний = FF0000Темно-синій = 000080
Сірий = 808080Коричневий = 808000
Синій = 0000FFБлакитний = 00FFFF
Зелений = 00FF00Темно-зелений = 008000,
Чорний = 000000Індиго = 800080
Пурпурний = CC33FFТемно-червоний = 800000

Для зміни кольору поточного тексту можна в будь-якому місці домашньої сторінки скористатися командами: <FONT COLOR=Код кольору> Поточний текст </FONT COLOR>

Визначено декілька іменованих кольорів. Їх значення ми бачимо в таблиці:

<FONT COLOR = black>

Якщо Ви хочете створити «шпалери», тобто кольоровий фон з використанням Image-файла з ім’ям, наприклад, Ground.gif, то замість параметра BGCOLOR записуємо: BACKGROUND = «Ground.gif»

Якщо при цьому ви хочете, щоб фонове зображення не рухалося, тобто щоб створився ефект «водяних знаків», то задайте додатковий параметр:

BACKGROUND = «Ground.gif» BGPROPERTIES=FIXED

7. Використання спеціальних символів

У мові HTML символ < використовується як перший символ кожної команди.

Цей символ не може бути використаний для позначення відношення «менше». Для відображення на екрані символа < («менше») і деяких інших символів в HTML прийняті спеціальні позначення:

Текст, що відображається

Запис в форматі HTML

<

<

>

>

&

&

«

Мова HTML завжди зменшує кількість підряд розташованих пропусків до одного, незалежно від того, скільки пропусків було в початковому тексті. Для того, щоб задати необхідну кількість підряд розташованих пропусків потрібно скористатися спеціальним символом пропуску: .

Наприклад, в наступному записі початкового тексту: (А У) в тексті, що відображається між символами А і В буде 3 пропуски.

При необхідності зобразити на екрані команду мови HTML виникає додаткова проблема - редактор може перетворити її у відповідну команду прямо в початковому тексті.

І замість відображення відповідної команди на екрані Ви отримуєте розташований по центру текст в наступних рядках. Щоб цього уникнути, можна, наприклад, вставити всередину команди дві парні команди. Наприклад, вищенаведену команду потрібно записати таким чином:<<u></u>CENTER>

8. Створення таблиць

Таблиця створюється за допомогою команд <TABLE> і </TABLE>.

Команда <TABLE> може мати наступні параметри:

- UNITS - може приймати значення RELATIVE або PIXELS. Визначає одиниці вимірювання в інших параметрах. По замовчанню, UNITS = PIXELS.

- BORDER - визначає лінії, що розмежовують клітки в таблиці. Ширина лінії задається командою BORDER = N.

- CELLPADDING - Визначає мінімальний проміжок навколо вмісту таблиці.

- BGCOLOR - Визначає колір фонового зображення в таблиці.

Є ще декілька команд, задаючих колір обрамлення: BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, але вони використовуються тільки в Microsoft Internet Explorer.

Для формування таблиці, що складається з декількох рядків, використовують команду <TR>, що розділяє рядки. Команди <TH> і </TH> використовуються для позначення заголовка стовпця кліток.

Параметри ROWSPAN і COLSPAN команд <TD> і <TH> використовуються для формування кліток даних, що об’єднують більше за один рядок або стовпець.

9. Вбудування гіпертекстових посилань

Перехід в інше місце того ж документа.

Для організації переходу всередині одного HTML - файла потрібно ввести необхідний текст в двох місцях:

- Записати мітку в тому місці HTML - файла, куди необхідно перейти.

- Записати перехід на цю мітку в тому місці, звідки буде виконаний перехід.

Для організації мітки записують: <А NAME = «МІТКА» ></А>, де МІТКА - будь-яке ім’я, що складається з букв англійського алфавіта і цифр.

Для переходу на цю мітку запишіть:<А href=МІТКА >Перейти на мітку</А>.

Перехід в інший документ тієї ж сторінки.

Для переходу з будь-якого місця HTML-файла h1.html в початок HTML-файла h2.html потрібно записати: <А href = «h2.html»>Перехід до розділу h2</А>.

Перехід в інший документ.

У будь-якому місці HTML-файла можна ввести гіпертекстові посилання на інший документ або файл.

Гіпертекстові посилання вводяться в HTML-файл за допомогою уніфікованого локатора ресурсів - URL.

Цей локатор визначає правила написання різних видів посилань.

Нижче приводяться найважливіші префікси для URL:

Префікс URL

Функція

FTP://Посилання на сервер FTP
HTTP://Посилання на об’єкт, який буде передаватися з використанням протоколу HTTP
FILE://localhostПосилання на локальний диск
GOPHER://Посилання на сервер Gopher
MAILTO://Посилання на електронну поштову адресу
NEWS://Посилання на електронну конференцію
NNTP://Посилання на сервер електронної конференції
TELNET://Посилання на сервер електронної конференції

Для запису гіпертекстового посилання в HTML-файл використовують наступну команду: <А href = «URL»>Перехід по гіпертекстовому посиланню</А>.

При натисненні лівої кнопки миші на текст Перехід по гіпертекстовому посиланню Ви перейдете на ресурс, заданий в URL. Для повернення скористайтеся клавішею «Back» броузера.

Виведення на екран.

Зображення можуть бути виведені на екран так само, як текст. Файли зображення можуть бути задані в декількох різних форматах, найкращі з яких - GIF (файли *.gif) і JPEG (файли *.jpg).

Нижче приводиться формат команди:

<IMG src= «ІМ’Я ФАЙЛА» ALT = «Текст» ALIGN = DIRECTION WIDTH = WIDTH HEIGHT = HEIGHT >, де:

- ІМ’Я ФАЙЛА - це ім’я даного файла у вашій сторінці або повне ім’я шляху і файла, якщо файл не належить даній сторінці.

- Текст - це текст, що виводиться замість зображення, якщо файл зображення по якийсь причині недоступний.

- DIRECTION - місце розташування зображення. Приймає наступні можливі значення:

ALIGN=TOP - подальший текст розташовується у верхній частині зображення.

ALIGN=BOTTOM - подальший текст розташовується в нижній частині зображення.

ALIGN=LEFT - зображення розташовується в лівій частині листа. Текст обтікає зображення праворуч.

ALIGN=MIDDLE - зображення розташовується в центрі листа.

ALIGN=RIGHT - зображення розташовується в правій частині листа. Текст обтікає зображення ліворуч.

WIDTH = WIDTH - ширина необхідного зображення на екрані,

HEIGHT = HEIGHT - висота необхідного зображення на екрані.

Гіпертекстові посилання за допомогою зображення.

Допустимо, що Ви виводите на екран зображення IMAGE-файл, який називається, наприклад, image.gif.

Якщо Ви хочете організувати сторінку так, щоб при натисненні лівої кнопки миші на зображення, перейти на іншу домашню сторінку, наприклад, на:

HTTP://WWW.HOME.COM,

потрібно записати наступну команду:

<А href= «HTTP://WWW.HOME.COM»> <IMG SRC = «image.gif»>

Створення посилання на поштову адресу.

Наприклад моя поштова адреса в GEOCITIES.COM: Ця електронна адреса захищена від спам-ботів, Вам потрібно включити JavaScript для перегляду

Для організації посилання в моїй домашній сторінці на мою поштову адресу необхідно записати в кінці головного розділу домашньої сторінки:

<А href = mailto: Ця електронна адреса захищена від спам-ботів, Вам потрібно включити JavaScript для перегляду > Перейти на мою поштову адресу </А>

У наступній строчці необхідно задати таке ж посилання з допомогою аплікації MAIL12.GIF замість тексту:

<А href = mailto: Ця електронна адреса захищена від спам-ботів, Вам потрібно включити JavaScript для перегляду ><IMS SRC = «MAIL12.GIF» ></А>

10. Кадри.

Команди роботи з кадрами.

Ви можете розділити екран на декілька незалежних віконних кадрів, кожний з яких відображає окремий HTML документ.

На екрані кадри являють собою прямокутники. У HTML використовуються наступні команди роботи з кадрами:

<FRAMESET>, </FRAMESET> - визначають склад і розміри кадрів на екрані,

<FRAME>, </FRAME> - визначають HTML-файл для кожного кадру,

<NOFRAMES>, </NOFRAMES> - для повідомлень броузеру, що не обробляє кадри.

Формат команди FRAMESET.

Команда ділить ціле вікно (або частину вікна, визначену попередньою командою FRAMESET) на декілька вертикальних (параметр COLS) або горизонтальних (параметр ROWS) кадрів. Кожний з цих кадрів може визначати HTML-файл, що відображається в ньому (за допомогою команди FRAME) або, відповідно, ділитися далі за тими ж правилами з вкладеною командою FRAMESET.

По кінцю визначення кадрів, що задаються командою FRAMESET, необхідно записати команду /FRAMESET, інакше вони можуть бути побудовані неправильно.

Формат параметрів COLS і ROWS.

Ці параметри дозволяють визначити розміри і кількість побудованих вертикально (параметр COLS) або горизонтально (параметр ROWS) кадрів.

Атрибути параметрів задаються в одній з 3 форм:

- абсолютний розмір в пікселях,

- заданий процент в загальній довжині або ширині,

- залишок після завдання попередніх кадрів.

Символ «*» означає виділення кадру площі, що залишилася. Наприклад, команда: <FRAMESET ROWS= «100, *»> створює 2 кадри: верхній становить 100 пікселів у висоту, нижній - простір, що залишився.

Формат команди FRAME.

Дана команда існує тільки всередині блоку FRAMESET - /FRAMESET. Її призначення - визначення функцій конкретного кадру.

Команда /FRAME практично не використовується так як її функції виконують команди /FRAMESET і наступна FRAME.

Параметр SRC задає ім’я HTML - файла, що відображається в даному кадрі.

Параметр NAME застосовується для створення імені кадру.

Тоді інший кадр може посилатися на даний для відображення в ньому свого гіпертекста.

Це дуже поширена команда її можна бачити в багатьох сторінках. Її перевага в тому, що на екрані можна одночасно бачити і HTML-файл, що викликає, і HTML-файл, що викликається, і для перегляду наступного файла гіпертекста досить натиснути на відповідну кнопку файла, який викликає.

Параметр TARGET команди BASE задає кадр, що виділяється по замовчанню для відображення гіпертекста.

Параметр NORESIZE застосовується для того, щоб користувач не зміг змінити розміри даного кадру на екрані.

Лінійки прокрутки задаються за допомогою параметра SCROLLING.

Тут діють наступні правила:

- Якщо параметр SCROLLING не заданий, то лінійки прокрутки створюються автоматично тільки тоді, коли розмір тексту, що відображається перевищує розмір кадру (це відноситься як до розміру по вертикалі, так і по горизонталі).

- Якщо задане SCROLLING = «YES», то лінійки прокрутки створюються завжди.

- Якщо задане SCROLLING = «NO», то лінійки прокрутки не створюються.

- Якщо задане SCROLLING = «AUTO», то система працює так само, як якщо параметр SCROLLING не заданий.

Товщина граничної лінії між кадрами може задаватися в пікселях за допомогою параметрів MARGINHEIGHT і MARGINWIDTH, якщо розробника не влаштовують значення, задані по замовчанню.

Спеціальні значення параметра TARGET.

У сучасних броузерах зарезервовано 4 спеціальних значення параметра TARGET:

а) _blank - броузери завжди задає це значення для нового, неіменованого вікна.

б) _self - задається по замовчанню для всіх кадрів, в операторі FRAME яких немає параметра TARGET. Всі документи, що викликаються по гіперпосиланню, завантажуються і відображаються в тому ж кадрі, що і документ, який їх викликає.

Значення _self в явному вигляді не застосовується доти, поки ми не вводимо команду BASE з параметром TARGET - тоді, можливо, знадобиться відмінити це загальне призначення для якого-небудь конкретного кадру.

в) _parent - файл, що викликається по гіперпосиланню, завантажується в кадр або вікно, яке є батьківським по відношенню до того, що викликає. Іншими словами, файл, що викликається буде розташований в тому ж вікні, що і його «дідусь».

г) _top - файл, що викликається по гіперпосиланню, завантажується у вікно, що містить посилання, і перекриває всі кадри даного вікна.

Формат команди NOFRAME.

Ця команда призначена для броузерів, що не обробляють кадри.

У броузері, що обробляє кадри, вся інформація, що міститься між командами NOFRAME і /NOFRAME, ігнорується.

У броузері, що не обробляє кадри, ця інформація обробляється.

Звичайно розробники сторінок, використовуючі кадри, вставляють в тіло команди NOFRAME повідомлення про те, що даний броузер не обробляє кадри і повідомляє рекомендації, наприклад, перейти на Netscape 2.0 і вище.

11. Спеціальні ефекти

Створення блимаючого тексту.

Зауваження: працює в Netscape 3.0, не працює в Explorer 3.0

Ви можете створити зображення тексту що блимає за допомогою наступних команд: <blink> і </blink>

Не зловживайте блимаючим зображенням. Його краще усього застосовувати для залучення уваги до нової інформації в домашній сторінці.

Створення рядка, що біжить.

Зауваження: працює в Explorer 3.0, не працює в Netscape 3.0

Рядок, що біжить створюється за допомогою команд: <MARQUEE> і <MARQUEE>. Нижче приводяться приклади команд:

Команда <MARQUEE> </MARQUEE> - цей текст буде рухатися з права на ліво повільно.

Команда <MARQUEE BEHAVIOR = «ALTERNATE» CROLLAMOUNT = «50» SCROLLDELAY = «8» > </MARQUEE> - цей текст буде рухатися з права на ліво і назад.

Команда <MARQUEE BEHAVIOR= «SLIDE» > </MARQUEE> - цей текст буде рухатися і зупинятися.

Команда <MARQUEE SCROLLDELAY= «5» SCROLLAMOUNT = «50»> </MARQUEE> - цей текст буде рухатися дуже швидко.

Карта образів.

Зауваження: працює в Explorer 3.0, працює в Netscape 3.0

Карта образів дозволяє створити декілька посилань до різних адрес, використовуючи тільки одне зображення.

Нехай у Вас є картинка imgmap.gif розміром 100 х 100 пікселів. Припустимо, що картинка складається з 4 частин, де зображені Ваші друзі:

- В лівому верхньому кутку - Діма (у нього є домашня сторінка dima.html )

- В правому верхньому кутку - Алік (Його домашня сторінка alik.html )

- В лівому нижньому кутку - Вова (Його домашня сторінка vova.html )

- В правому нижньому кутку - Ігор (Його домашня сторінка igor.html )

Якщо Ви хочете, щоб при натисненні лівої кнопки миші на зображення кожного з Ваших друзів Ви попадали на його домашню сторінку, запишіть наступні команди:

<map name= «map »>

<area shape = «rect» coords = «0, 0, 49, 49» href = «dima.html»>

<area shape = «rect» coords = «0, 50, 49, 99» href = «alik.html»>

<area shape = «rect» coords = «50, 0, 99, 49» href = «vova.html»>

<area shape = «rect» coords= «50, 50, 99, 99» href = «igor.html»>

</mар>

<img src = «imgmap.gif» usemap = «# map» border= 0>

Плаваючі вікна.

Зауваження: працює в Explorer 3.0, не працює в Netscape 3.0.

Це вікно створюється за допомогою наступної команди:

<IFRAME NAME = «content_frame» width = «400» height = «240» SRC = «index.html »> Це плаваюче вікно </IFRAME>

12. Форми

Форма - це засіб, що дозволяє організувати в сторінці діалог з її користувачем.

Розробник сторінки створює її за допомогою спеціальних елементів:

- кнопки,

- списки,

- текстові рядки,

- текстові поля.

Форми передають інформацію програмі обробки у вигляді пар:

Ім’я поля - Значення поля.

Форма починається командою <FORM> і закінчується командою </FORM>.

Дана команда має 2 основних параметра: ACTION і METHOD.

Параметр ACTION є обов’язковим. Він вказує адресу обробника форми (наприклад, адреса програми обробки або поштова адреса або просто адреса URL для переходу).

Параметр METHOD не є обов’язковим. Він приймає одне з двох значень: GET або POST, пов’язаних з методом протоколу передачі інформації з анкети.

По замовчанню, METHOD= GET.

Приклад команди FORM:

<FORM ACTION = «http://www.aport.ru» METHOD= POST >

Для завдання керуючої кнопки запуску передачі даних треба записати наступну команду:

<INPUT TYPE = submit NAME = «botton1» VALUE = «Довільний текст»>

де:

INPUT - команда створення керуючого елемента.

TYPE - параметр, що визначає керуючий елемент.

submit - значення цього параметра (в цьому випадку керуюча кнопка).

NAME - параметр, задаючий ім’я змінної.

botton1 - ім’я змінної.

VALUE - параметр, задаючий текст, що відображається на керуючому елементі.

Довільний текст - значення тексту на керуючому елементі.

Нижче приводяться основні типи керуючих елементів INPUT.

1) Текстовий рядок: TYPE=text визначає вікно для введення одного рядка тексту.

Параметр SIZE задає розмір вікна в символах.

Приклад:

<INPUT TYPE = text NAME= «text1» SIZE = 30 VALUE = «Введіть текст»>

У отримане вікно, в якому буде зображатися текст: Введіть текст.

Ви можете ввести будь-який текст або залишити записаний початковий текст «Введіть текст» без змін.

При натисненні кнопки submit в програму обробки буде передано:

text1=Ввести текст (або інший, змінений текст).

Параметр SIZE задає розмір вікна в символах.

При необхідності обмежити довжину тексту N, застосовуйте додатковий параметр: MAXLENGTH= N.

2) Вікно для введення пароля: TYPE=password

Аналогічний типу text, але при введенні кожний символ замінюється символом *.

Приклад. Треба ввести пароль довжиною не більше за 5 символів.

<INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >

3) Текстове вікно: TEXTAREA

Задається в наступному вигляді: <TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL> Спочатку заданий текст </TEXTAREA>

Параметр COLS задає кількість символів в рядку, параметр ROWS задає кількість рядків у вікні, необов’язковий параметр WRAP=VIRTUAL задає лінійку прокрутки.

4) Радіокнопка: TYPE=radio

Може бути задано декілька радіокнопок з однаковим ім’ям (тобто значенням параметра NAME), але вони будуть взаємовиключаючими: може бути натиснена (CHECKED) тільки одна з них.

Приклад:

<INPUT TYPE = radio NAME = color VALUE = «Червона» checked> Червона

<INPUT TYPE = radio NAME = color VALUE = «Синя» > Синя

<INPUT TYPE = radio NAME = color VALUE = «Зелена» > Зелена

Ми отримали 3 кнопки, з них відмічена Червона. При натисненні на іншу кнопку попередня звільняється.

Допустимо, ми натиснули Синю кнопку, тоді при натисненні на кнопку submit в програму обробки буде введено:

color=Синій

5) Помічений квадрат: TYPE=checkbox

На відміну від радіокнопок, може бути декілька квадратів з однаковими іменами.

Наприклад, в наступному прикладі спочатку задана кнопка «Горілка»:

<INPUT TYPE = checkbox NAME = box VALUE = «Горілка» checked> Горілка

<INPUT TYPE = checkbox NAME = box VALUE = «Коньяк» > Коньяк

<INPUT TYPE = checkbox NAME = box VALUE = «Лікер» > Лікер

Якщо Ви натиснете ще на кнопку «Коньяк», то при натисненні на кнопку submit в програму обробки буде введено:

box=Горілка

box=Коньяк

Прихований текст: TYPE=hidden

При відображенні не видний користувачеві. Служить для прямої передачі службової інформації від домашньої сторінки обробнику форми, прозоро для користувача.

7) Меню: SELECT

Нехай Вам представилася можливість вибрати одну з путівок у відповідності з наступним списком:

<SELECT NAME= «script»>

<OPTION VALUE = «tour1» > Путівка в Сочи

<OPTION VALUE = «tour2» > Путівка в Париж

<OPTION VALUE = «tour3» > Путівка на Колиму

Якщо Ви вибрали Путівку в Париж, то при натисненні на кнопку submit в програму обробки буде введено: script = tour2

Команда SELECT може містити атрибут MULTIPLE, при якому можна вибрати декілька елементів меню одночасно.

Висоту вікна можна задати атрибутом SIZE= N.

Якщо в рядку OPTION заданий атрибут checked, то даний елемент задається по замовчанню.

Кнопка введення: TYPE=submit

Це і є та сама кнопка, про яку ми так часто згадували.

<INPUT TYPE = submit VALUE = «Введення даних» >

9) Кнопка скасування: TYPE = reset

Кнопка виконує ініціалізацію початковими значеннями всіх полів.

<INPUT TYPE=reset VALUE= «Очистити поля»>

13. Команди META

Створивши сторінку, Ви, безсумнівно, захочете щоб Вас змогли «знайти» всі користувачі, що цікавляться даним питанням.

Тут можна йти двома основними шляхами:

1. «Відмітитися» в пошукових системах. Є служби, що дозволяють зареєструватися на декількох серверах одночасно.

2. Вставити всередині блоку <HEAD>…</HEAD> команди META.

Основне призначення команд META - інструкції для пошукових машин про тематику Вашої сторінки.

Для цих цілей використовуються наступні параметри:

- description - короткий опис сторінки,

- keyword - список ключових слів в сторінці.

З інших застосувань команд META важливо привести команди, що дають інструкції броузеру про кодування Вашої сторінки.

<META HTTP-EQUIV = «Content-type» CONTENT = «text/html; charset=windows-1251»> для кодування в Windows/1251,

<META HTTP-EQUIV = «Content-type» CONTENT = «text/html; charset=koi8-r»> для кодування в KOI-8.

 

Коментарі  

 
0 #639 Ahmadtrexy 15.04.2018 17:04
هو موقع أنبوب إباحي يتعلق بالجنس وهو باللغة العربية. إنه موقع رائع يجعلك تشعر بالدفء والحيوية إذا كنت تحب رؤية أشخاص عرب يحصلون عليه افلام سكس
Цитувати
 
 
0 #638 Carson 15.04.2018 07:52
Your method of telling eѵerything in thiѕ article iѕ trսly pleasant, ɑll
bе capable of easily understand іt, Thanks а lot.

Ηave a look аt my blog; Hussin Ahmed
Цитувати
 
 
0 #637 WilliamEmona 14.04.2018 06:44
台北-中和【均媄醫美診所】─台北微整 形、童顏針、玻尿酸最推薦的醫美 診所! http://micro-plastic.com/
Цитувати
 
 
0 #636 Esteban 14.04.2018 04:40
Hі, its nice article on thе topic of media print, we all
understand media іs a impressive source օf facts.



my homepɑge rite
Цитувати
 
 
0 #635 Petreloli 13.04.2018 06:40
На прошлой неделе изучал данные интернет, вдруг к своему удивлению увидел прекрасный ресурс. Гляньте: свадебный фотограф тель авив . Для нас вышеуказанный вебсайт явился весьма важным. Всего доброго!
Цитувати
 
 
0 #634 Emely 13.04.2018 00:02
Peculiar article, exaϲtly what Ineeded.

Mʏ webpage: roman health reviews
Цитувати
 
 
0 #633 Kristinagoodo 12.04.2018 17:57
Добрый день
Доктор посоветовала
Препараты

Тагриссо (Osimertinib) - Tagrisso (Осимертиниб)
Цитувати
 
 
0 #632 Romaneloli 11.04.2018 22:59
На прошлой неделе осматривал материалы инета, неожиданно к своему удивлению увидел познавательный веб-сайт. Посмотрите: фотограф израиль . Для моих близких данный сайт произвел радостное впечатление. Пока!
Цитувати
 
 
0 #631 Greyhhh 11.04.2018 19:13
Возникли финансовые трудности?
- http://bit.ly/2CqMXQW
Выдача в день сделки кредита онлайн на карту за 20 минут. Перейти здесь: http://bit.ly/2CqMXQW - Автокредитовани е

*money**
Цитувати
 
 
0 #630 olegPab 11.04.2018 05:04
СЂРѕР·СѓРјРЅРёР № РіРѕРґРёРЅРЅРёР є q50 фото: https://xn--80aao0avbcl.xn--j1amh/smart-watch-gps-treker-q50-gv-300
Цитувати
 
 
0 #629 Antoziounjup 11.04.2018 00:02
isie
http://viagrawithoutdoctor.org - RSA Anti-Fraud Command Center abundant
RSA Anti-Fraud Command Center hermetismo
bolso
Цитувати
 
 
0 #628 Romaneloli 10.04.2018 17:02
Пол дня серфил контент интернет, и к своему восторгу обнаружил актуальный ресурс. Смотрите: свадебный фотограф каппадокия . Для нас вышеуказанный ресурс показался очень неплохим. До встречи!
Цитувати
 
 
0 #627 DonaldCic 09.04.2018 22:01
Эффективное продвижение в интернете.
новые базы для allsubmitter 4.7
http://bit.ly/2yvpbEy - allsubmitter не видит базы
Цитувати
 
 
0 #626 Tamela 08.04.2018 05:52
I am genuinely thankful to the owner of this site who has shared this fantastic
post at at this time.

Here is my web site: Ahmed Hassan
Цитувати
 
 
0 #625 Raleigh 07.04.2018 18:35
Good article. I will be going through many of these issues
as well..

Feel free to visit my web page ... Ahmed Hassan
Цитувати
 
 
0 #624 Victorina 07.04.2018 08:40
great submit, very informative. I ponder whhy the other experts of this sector do not realize this.
You should continue your writing. I'm sure, you have a huge readers' base already!


Check out my web blog - Manar Ali
Цитувати
 
 
0 #623 Margarette 07.04.2018 03:04
I do consider all the ideas you've introduced on your post.
They're really convincing and will definitely work. Nonetheless, the posts are very
short for newbies. May just you please extend them a
little from subsequent time? Thank youu for the post.


Also visit my webpage :: Ahmed Hassan
Цитувати
 
 
0 #622 empoth 06.04.2018 22:52
https://www.youtube.com/watch?v=CMZ-EVE6_OE
Цитувати
 
 
0 #621 noerrik1977injus 06.04.2018 10:29
Для вас будет интересна эта статья - рыба похожая на морской язык
Цитувати
 
 
0 #620 sochi.cat/-bop 03.04.2018 16:46
Строительство домов Сочи отделка сочи отделка квартир в сочи вип отделка сочи пиво оптом в москве
Цитувати
 
 
0 #619 VodaChorp 02.04.2018 23:38
Мы развозим питьевую воду как частным, так и юридическим лицам. Наша транспортная служба осуществляет доставку питьевой воды на следующий день после заказа.

http://voda-nn.ru - voda-nn.ru - купить бутылки для воды 19 литров
. Срочная доставка в день заказа доступна для владельцев клубных карт. Доставка воды происходит во все районы Нижнего Новгорода, в верхнюю и нижнюю части города:
Цитувати
 
 
0 #618 Meri 31.03.2018 08:50
When someone writes an piece of writing he/she maintains the image of
a user in his/her mind that how a user can know
it. Therefore that's why this post is perfect. Thanks!


My page: john son
Цитувати
 
 
0 #617 Glenn 31.03.2018 01:49
Apⲣreciate tһis post. Let me tгy it out.


Alsօ visit mʏ blog; pharmacy promo code
Цитувати
 
 
0 #616 TERenlFow 30.03.2018 18:20
Степан КУБИВ взяточник «со стажем»? надежды Валерия Жалдака взяточника


https://transparency.agency/text/navischo-stepanu-kubivu-khabarnyk-zi-stazhem - ++как подать заявление


https://transparency.agency - +судебный приказ



Національне антикорупційне бюро

Управление по противодействию коррупции

Знешкодити та запобігти Бюро по борьбе с коррупцией
Антикоррупционн ая служба - Главная страница

НАЦИОНАЛЬНОЕ БЮРО ПО ПРОТИВОДЕЙСТВИЮ КОРРУПЦИИ АГЕНТСТВА

Національне антикорупційне бюро

Національне антикорупційне бюро

Знешкодити та запобігти Бюро по борьбе с коррупцией

Знешкодити та запобігти Бюро по борьбе с коррупцией
Цитувати
 
 
0 #615 kamagra store uk 30.03.2018 11:25
kamagra kopen waar
kamagra 100mg oral jelly suppliers indiana
kamagra oral jelly online usa
kamagra 100 mg
kamagra 100mg oral jelly sildenafil reviews
http://kamagradxt.com/
kamagra oral jelly amazon nederlande
Цитувати
 
 
0 #614 Writing Essay Online 28.03.2018 10:41
help me write my research paper a research paper college research paper a research paper
Цитувати
 
 
0 #613 NEF6Taw 27.03.2018 10:05
Ukrainian political news today. We n we publish all of them current and important events Russia, analytics experts. All negative on this planet is created with the quiet tacit consent of the indifferent. No one provides us with incentives. We are Enthusiasts. We are building a civil society. The people are the bearer of sovereignty and the only source of power. No one can usurp power. Useful topics - Holodomor Liberia Finance

http://nef6.com/wp-admin/images/2.jpg alt=Donbass border=10 height=240 width=400
TWITTER
FACEBOOK
GOOGLE+
Hosting
Цитувати
 
 
0 #612 Kenny 27.03.2018 05:08
I аm not certaіn tһe place ʏou're getting у᧐ur іnformation, ƅut great topic.
Ι needs to spend ɑ while learning much more օr understanding more.
Thanjs for magnificent infߋrmation I uzed tⲟ Ьe on tһe lookout for this infoemation for mmy mission.

Feel free tߋ surf to my website - mezo
Цитувати
 
 
0 #611 marynafug 20.03.2018 11:52
blackview e7 дисплей: https://smartera.in.ua/display-blackview-e7
Цитувати
 
 
0 #610 PavelNob 18.03.2018 10:17
BLISS поддерживается дружественным сообществом, для которого была создана социальная сеть и интерактивная платформа, где можно обсудить последние тенденции на рынке криптовалют и следить за всеми рынками в режиме реального времени.
https://cryptobliss.info
Цитувати
 
 
0 #609 BrianLen 17.03.2018 09:32
Регистрируешься - огромный бонусы.
Играешь - огромный выигрыш.
$Пройди тест на богатство и узнай сможешь ли ты стать богатым
$]узнай как из 100 рублей сделать 20 000 рублей!
Играй
Угадай кому принадлежит бюст - получи деньги
http://krn.krapovy.ru/images/ugaday_bust_1.jpg
http://krn.krapovy.ru/images/vyigrysh.jpg
Играть онлайн
акции и бонусы!
http://ad.gameagregator.com/promo/banners/e8bba8d41cf734d460a16f3306a274f2.jpghttp://ad.gameagregator.com/promo/banners/17f03825f16d3fffc001ed6cbaeb1ddc.gifhttp://ad.gameagregator.com/promo/banners/8e625d25d783a6d1ea17aad67f5e8cd1.gif
Цитувати
 
 
0 #608 SergeyHal 17.03.2018 08:58
Пару часов назад исследовал данные сети, вдруг к своему удивлению заметил прекрасный ресурс. Гляньте: автоблог . Для нас этот ресурс оказал радостное впечатление. До свидания!
Цитувати
 
 
0 #607 NEF2Taw 16.03.2018 03:29
USA news We n we publish all of them fresh and topical facts Russia, analytics experts. All evil in the world exists with the quiet tacit consent of the indifferent. No one provides us with incentives. We are People. We are building a civil society. The people are the bearer of sovereignty and the only source of power. No one can usurp power. Useful topics - Society Honolulu Business

http://nef2.com/wp-admin/images/2.jpg alt=news border=10 height=90 width=240
TWITTER
FACEBOOK
Цитувати
 
 
0 #606 VladimirHal 15.03.2018 13:57
Два часа назад осматривал данные инета, при этом к своему удивлению обнаружил лучший вебсайт. Вот ссылка: тонировка стекла . Для нас этот вебсайт показался довольно важным. До встречи!
Цитувати
 
 
0 #605 Tammara 14.03.2018 04:39
Nice post. I used to be checking continuously this weblog and I am impressed!

Very useful information specifically the closing section :
) I handle such info a lot. I used to be seeking
this certain info for a very long time. Thanks and best of luck.



Feel free to surf to my weblog reparation machine a laver montreal - Jonelle,
Цитувати
 
 
0 #604 Claire 14.03.2018 04:38
Regarde, l'écran ne marche pas, compte le nombre de problèmes qui peuvent causer ça...
Le diagnostic c'est le plus dur (quand il est logiciel aussi d'ailleurs, ça en fait partie), après la réparation en elle-même c'est changer ce qui est mort (si c'est pas
réparable, en général ça ne l'est pas).

Review my webpage: réparation ordinateur nantes viarme
Цитувати
 
 
0 #603 Josette 14.03.2018 04:35
This article will help the internet visitors for building
up new blog or even a blog from start to end.

Review my web site comment nettoyer votre mac des fichiers indésirables (http://ficklink.sexneigung.com/search.php?term=Service%20De%20R%C3%A9paration%20De%20Macbook%20Pro%20%C3%80%20Montreal&search_in=title&sort_by=newest_first&search_type=links)
Цитувати
 
 
0 #602 Antonietta 14.03.2018 04:30
Je remercie franck afin de le travail remarquable qu'il peut me faire
c'est vrai il aurait pu etre un magicien il sait
tout bravo a lui il n'y en a qu'un c'est franck depannage.

my weblog: réparation ordinateur portable lille, dépannage portable lille - Ma ...
Цитувати
 
 
0 #601 Bernd 14.03.2018 04:24
En fonction de la situation, nous établissons un devis immédiatement ou nous conservons la device 48h à 72h en moyenne
avant de vous recontacter.

My web page assistance dépannage informatique nantes
Цитувати
 
 
0 #600 vetlucciqw 13.03.2018 10:24
Offriamo servizi per sviluppo elegante siti web

Cari amici,

azienda Paolo Vetlucci Ltd. offre vi servizi per produzione di siti web.

creare sito il nostro Studio Web prodotto gia intorno 12 anni. questo intervallo di tempo si acquisito notevole esperienza, che consente di te aiuta a ci realizzare incredibile epocali soluzioni Web.

Noi produrre solo moderno siti.

necessario iniziare collaborare con la nostra Azienda per sentire tutti i vantaggi e sentire la differenza.

Avanti voi tra i nostri clienti.

Con i migliori saluti,
azienda Paolo Vetlucci
Цитувати
 
 
0 #599 ShippingKaf 13.03.2018 02:34
источниРє|
Цитувати
 
 
0 #598 Pavelfak 03.03.2018 02:01
Некоторое время исследовал данные инета, и вдруг к своему удивлению обнаружил поучительный видеоролик. Гляньте: финансовый анализ . Для меня данный ролик оказался весьма нужным. До встречи!
Цитувати
 
 
0 #597 Jeannine 02.03.2018 14:30
Ꮃhɑt's սp, Steve at Bridges.
Awesоme “Мова розмітки HTML” certainly
an intriguіng subject
I just wanted to sayy tһat Ι lime your blog post.

Feel free tⲟ surf to my wеbgpage :: small bathroom cabinets
Цитувати
 

Додати коментар


Захисний код
Оновити

© 2008-2013 PHPist