Web-сторінки мають вигляд звичайних текстових документів, в які введено вказівки, форматування. Принцип роботи броузера полягає в інтерпретації цих вказівок. При відображені таких документів броузером самі вказівки не відображаються, проте впливають на спосіб відображення решти частини документу. Згадані вказівки називають дескрипторами або тегами. З їх допомогою текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо. Формат дескрипторів задається в описі спеціальної мови розмітки. Вона називається мовою розмітки гіпертексту-HTML {HyperText Markup Language). Наприклад, вигляд головної сторінки сайта Ukr.Net та її код подано на рис 2.2.1.

а) б)

Рис. 2.2.1. Головна сторінка сайту Ukr.Net (а) та її код (б).

Документи, розмічені за допомогою цієї мови, називають HTML-документами. HTML-документи мають розширення .htm або .html.

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

Мова HTML розроблена спеціально для Web. Її популярність забезпечують зокрема такі властивості:

— документ, створений за допомогою деякої програми, наприклад текстового редактора, часто важко (а іноді і неможливо) використовувати в іншій програмі; HTML у цьому відношенні є універсальною;

— HTML — це відкритий стандарт;

— HTML не є власністю якої-небудь фірми;

— можливість використання гіпертексту;

— HTML підтримує мультимедіа.

У мові HTML використовуються поняття контейнера. Контейнер — це дескрипторна пара, яка складається з початкового і кінцевого дескрипторів (тегів). Початковий дескриптор має вигляд <TAG>, де TAG ім’я певного HTML-дескриптора. Кінцевий дескриптор має вигляд </TAG>. Наприклад,

<В> Програми для перегляду Web-сторінок називаються броузерами </В>

Контейнер <В></B> дає вказівку броузеру відображати текст «Програми для перегляду Web-сторінок називаються броузерами» напівжирним шрифтом. Тобто, контейнери впливають на частину документа, розміщену між ними. Зазначимо, що контейнери можуть бути вкладені.

Одиночний дескриптор, звичайно, має самостійне завдання, не пов’язане з конкретним текстом. Наприклад, дескриптор <HR> (від слів Horisontal Line) служить для створення і відображення горизонтальної лінії.

Дію дескриптора можна дещо змінити, задаючи певні атрибути {параметри). Атрибути — це додаткові ключові слова, які відокремлюються від ключового слова, що визначає дескриптор, пропуском і розміщуються до символа «>». У контейнерах атрибути додаються тільки до початкового дескриптора. Атрибути задаються своїми значеннями. Наприклад,

<Н1 ALIGN=»LEFT»>Tpaнcпopний рівень моделі ТСР/ІР</Н1>

— це вказівка броузеру відобразити текст «Транспортний рівень моделі TCP/ IP» у вигляді заголовка та вирівняти його по лівому краю.

HTML-код Web-сторінки може містити коментарі, тобто деякий текст, який не відображається броузером і служить для пояснення призначення сторінки або частини її коду. Текст, що повинен служити коментарем, необхідно помістити між символами «<!--» і «à». Наприклад,

<HR> <!—створюємо горизонтальну лінію à

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

Всі HTML-документи мають однакову загальну структуру. Праворуч показано відображення цього коду броузером.

<HTML>

<HEAD>

<TITLE>

Назва WEB-сторінки

</TITLE>

</HEAD>

<BODY>

“Тіло “ – це вміст WEB-сторінки:

текст, графіка, гіперпосилання

</BODY>

</HTML>

Рис.2.2.2. Структура HTML-документа

Контейнер <HTML></HTML> є ознакою того, що даний файл містить документ HTML. У HTML-документах є «голова» (заголовок) і «тіло» (основна частина).

Розділ <HEAD></HEAD> містить дескриптори, які описують документ в цілому. Зокрема, тут вказується назва документа.

Контейнер <TITLE></TITLE> служить для визначення назви документа. Текст, включений в нього, відображається у верхній частині вікна броузера. Назва сторінки — це один з елементів, які мають важливе значення для привернення уваги «відвідувачів». Вона повинна відображати зміст сторінки. Системи пошуку орієнтуються саме на назву сторінки, тому сторінка із змістовною назвою має більше шансів бути вибраною у процесі проведення пошуку інформації з конкретної теми.

Контейнер <B0DY></B0DY> задає основну частину документа — його «тіло». Інформація, розміщена між дескрипторами <BODY> та </BODY>, відображається в області документа.

Крім контейнера <TITLE>…</TITLE> у заголовок документа (контейнер <HEAD>…. </HEAD>) часто включаються дескриптори <BASE>, <META>.

Дескриптор <BASE> використовується для вказування повної URL адреси документа. Це дозволяє підтримувати відносні гіперпосилання в робочому стані при переміщенні документа в інший каталог і навіть на інший комп’ютер.
Адреса URL задається за допомогою атрибута HREF, наприклад,

Докладніше цей дескриптор описано при розгляді гіперпосилань.

Дескриптор <МЕТА> дозволяє автору документа описати інформацію або виконати дії, які ще не підтримуються офіційною версією HTML. Він найчастіше використовується завдяки його властивості Keywords (ключові слова). У багатьох пошукових системах використовуються слова, визначені в цьому елементі для складання вказівника документа. Наприклад,

<МЕТА NAME=”Keywords” CONTENT =”внз, університет, фізика, математика, інформатика”>

<МЕТА NAME=”Description” CONTENT=”Броузера фізико-метематичного факультету”>

Цей дескриптор дозволяє також задати метаінформацію про кодову сторінку, яка використовується для кодування літер кирилиці:

<МЕТА content=”text/html; charset=Windows-1251” http-equiv=Content-Type>

Контейнер <BODY> має велику кількість атрибутів, важливих для визначення загального виду документа. Основні з цих атрибутів задано в таблиці 2.2.1.

Таблиця 2.2.1.

Атрибут	Призначення
ALINK	Визначає колір, яким виділяється активне гіперпоси-лання
BACKGROUND	Вказує URL зображення, яке слід використовувати як фон документа
BGCOLOR	Визначає колір фону документа
LINK	Визначає колір гіперпосилання, яке не було «відвідане»
TEXT	Визначає колір тексту документа
VLINK	Визначає колір гіперпосилання, яке було «відвідане»

Створити просту сторінку можна, наприклад, так:

5. Запустити текстовий редактор Блокнот.

5. Ввести текст HTML-документа, поданий на Рис.2.2.2.

5. Зберегти під деяким іменем із розширенням .htm (наприклад,
Структура WEB-сторінки.htm). При збереженні, у вікні «Сохранение документа» слід поміняти тип файла з «Текстовые документы» на «Все файлы». Інакше редактор у кінець назви файла автоматично додасть розширення .txt.

5. Запустити програму Internet Explorer.

5. За допомогою меню «Файл -> Открыть» відкрити створений файл
(Структура WEB-сторінки.htm).

В наступному прикладі наводиться код сторінки з синім фоном:

<НТМL>

<HEAD>

<TITLE> Сторінка з фоном </ТITLE>

</HEAD>

Білий текст на синьому фоні

</BODY>

</НТМL>

Використання фреймів

Мова HTML дозволяє поділити вікно браузера на окремі секції, які називаються фреймами (рамки). Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати не залежно від решти фреймів. Браузер, який “розпізнає” фрейми, завантажує різні сторінки у різні секції свого вікна.

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

Подібну структуру має сторінка, вигляд якої подано на Рис.2.2.2

Рис.2.2.2.Поділ вікна на два фрейми

Код даної сторінки наведено нижче:

<HTML>

<HEAD>

<TITLE>Приклад фреймової структури документа</TITLE></HEAD>

</frameset>

</BODY>

</HTML>

Файл a1.htm

<HTML>

<HEAD>

<TITLE>Приклад фреймової структури документа</TITLE>

</HEAD>

<h3> На цій сторінці фреймової структури, як правило,

розміщують зміст Web-сайта</h3>

</BODY>

</HTML>

Файл a2.htm

<HTML>

<HEAD>

<TITLE>Приклад фреймової структури документа</TITLE>

</HEAD>

<h3> На цій сторінці фреймової структури, як правило, розміщують

вміст вибраного у змісті розділу</h3>

</BODY>

</HTML>

Створення списків, таблиць

Для створення списків використовують теги, що задають тип списку. Нумерований список починаються тегом <OL> і завершується тегом </OL>, наприклад:

<OL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </OL>

1. Один 2. Два 3. Три 4. Чотири 5. П’ять

Тег <OL> може мати такі параметри:

TYPE - вид лічильника:
A - великі латинські букви
a - малі латинські букви
I - великі римські цифри
i - малі римські цифри
1 – звичайні цифри

START - встановлює число, з якого буде починатися відлік, наприклад:

<OL TYPE="I" START="8"> <LI> Вісім <LI> Дев’ять <LI> Десять <LI> Одинадцать <LI> Дванадцать </OL>

VIII. Вісім IX. Дев’ять X. Десять XI. Одинадцать XII. Дванадцать

Неномерований список починається тегом <UL> и завершується тегом </UL>. Кожен елемент списку починається з тегу <LI>, наприклад:

<UL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </UL>

oОдин oДва oТри oЧотири oП’ять

Тег <UL> може включати параметр TYPE із значеннями disc, circle, square

<UL TYPE=disc><LI> disc </UL>	· disc
<UL TYPE=circle><LI> circle </UL>	o circle
<UL TYPE=square><LI> square </UL>	§ square

Дані значення – це зовнішній вид маркера, який за замовчуванням ставиться у вигляді диску, тобто disc.

Списки визначень мають такий вид:

<DL> <DT> Термін <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну </DL>

Термін Визначення терміну Визначення терміну Визначення терміну Визначення терміну

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

Елементи таблиць. Таблиці будуються за принципом вкладання і вводяться на WEB-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE> …</TABLE> можуть вставлятися такі елементи:

TR – елемент створення рядка;

TD – елемент, що визначає вміст комірки даних;

TH – елемент, що визначає комірку заголовка.

Наприклад, для створення таблиці 3*2 використовується такий шаблон:

<TABLE>

</TABLE>

де крапками позначений вміст кожної комірки.

Приклад таблиці:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Примітка: В даному прикладі створена таблиця з фіксованою шириною (WIDTH="200" пікселів), але краще використовувати проценти, т.я. в цьому випадку розмір таблиці буде змінюватися в залежності від розміру вікна.

Така таблиця реалізується наступним кодом: <TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00"> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE>

Таблиця починається тегом <TABLE> и завершується тегом </TABLE>.
Тег <TABLE> може включати такі атрибути:

Таблиця 2.2.1.

WIDTH="n"	Визначає ширину таблиці в пікселях або процентах, за замовчуванням ширина таблиці визначається вмістом клітинок.
BORDER="n"	Встанаолює товщину рамки. За замовчуанням n=0 – таблиця відображається без рамки.
BORDERCOLOR="#FFFFFF"	Встановлює колір обрамлення, де #FFFFFF (білий) - шістнадцяткове значення кольору.
BGCOLOR="#FFFFFF"	Встановлює колір фону для всієї таблиці, де #FFFFFF - шістнадцяткове значення кольору.
BACKGROUND="image.gif"	Заповнює фон таблиці зображенням.
CELLSPACING="n"	Визначає відстань між рамками клітинок таблиці в пікселях.
ALIGN=LEFT	Визначає положення таблиці в документі. За замовчуванням таблиця притиснута до лівого краю сторінки. Допустимі значення аттрибута: LEFT (зліва), CENTER (по центру сторінки), RIGHT (зправа).
FRAME="значение"	Управляє зовнішнім обрамленням таблиці і може приймати такі значення: VOID - обрамлення немає (значення за замовчуванням). ABOVE – межа тільки зверху. BELOW - межа тільки знизу. HSIDES - межа тільки зверху і знизу. VSIDES - межа тільки зліва і справа. LHS - тільки ліва межа. RHS - тільки права межа. BOX - малюються всі чотири сторони. BORDER - також всі чотири сторони.
RULES="n"	Управляє лініями, що розділяють клітинки таблиці. Можливі такі значення (n): NONE – немає ліній (значення за замовчуванням). GROUPS - лінії будуть тільки між групами рядів. ROWS - тільки між рядами. COLS - тільки між колонками. ALL - між всіма рядами і колонками.

Таблиця може включати заголовок, який розміщується між тегами <CAPTION></CAPTION>. Він має бути безпосередньо після тега <TITLE>. До заголовку можна застосувати атрибут ALIGN, що визначає його положення відносно таблиці:

TOP – значення за замовчуванням, заголовок над таблицею по центру.
LEFT - заголовок над таблицею зліва.
RIGHT - заголовок над таблицею справа.
BOTTOM - заголовок під таблицею по центру.

Рядки таблиці починаються тегом <TR> и завершаються тегом </TR>, а кожна клітинка таблиці починається тегом <TD> и завершується </TD>. Дані теги можуть мати такі атрибути:

Таблиця 2.2.2.

Атрибути, що можуть застосовуватися до рядків і клітинок
ALIGN=LEFT	Встановлює горизонтальне вирівнювання тексту в клітинках рядка. Може приймати значення LEFT (вирівнювання вліво), CENTER (вирівнювання по центру), RIGHT (вправо).
VALIGN=CENTER	Встановлює вертикальне вирівнювання тексту в клітинках рядка. Допустимі значення: TOP (вирівнювання по верхньому краю), CENTER (вирівнювання по центру -це значення приймається за замовчуванням), BOTTOM (по нижньому краю).
BGCOLOR="#FFFFFF"	Встановлює колір фону рядка або клітинки.
BACKGROUND="image.gif"	Заповнює фон рядка або клітинки зображенням.
Атрибути, що можуть застосовуватися тільки до клітинок
WIDTH="n"	Визначає ширину клітинки в n пікселях.
HEIGHT="n"	Визначає висоту клітинки в n пікселях
COLSPAN="n"	Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n"	Розтягує клітинки по рядку. Наприклад, <TD ROWSPAN="2" означає, що клітинка буде розтягнута на два рядки таблиці.
NOWRAP	Цей атрибут показує, що текст буде розміщено в один рядок
BACKGROUND="image.gif"	Заповнює фон клітинки зображенням

Крім цього, будь яка клітинка таблиці може бути визначена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.

Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт   (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде (  - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).

Теги, що встановлюють шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необхідно повторювати для кожної клітинки.

Предыдущая 9 10 11 12 13 14 151617 18 19 20 21 22 23 24 Следующая