Вивчити структуру побудови та елементи HTML-документа

2. Вивчити застосування непарних міток та Esc-послідовностей у HTML-документах.

3. Вивчити засоби та дескриптори фізичного форматування тексту в HTML-документах.

Хід виконання роботи:

Вступ

Термін HTML (HyperText Markup Language) означає “мова маркірування гіпертекстів”. Першу версію HTML розробив співробітник Європейської лабораторії фізики елементарних часток Тім Бернерс-Ли.

З часу створення першої версії HTML зазнав певних змін. Існують такі версії 2.0, 3.0, 3.2, 4.0 і 4.01.

На сьогоднішній день діє специфікація HTML 4.01, і саме відповідно до неї рекомендується створювати нові HTML-сторінки. Основна відмінність специфікацій HTML 4.0 і HTML 4.01 від решти специфікацій, що діяли раніше, – вимога максимально відокремлювати структуру документа від його візуального зображення, для чого рекомендується використовувати каскадні таблиці стилів (CSS).

Поточну специфікацію HTML можна знайти на сервері W3C (http://www.w3.org/).

Усе, про що написано в керівництві, буде гарантовано працювати з програмним забезпеченням, що підтримує будь-яку відому на сьогодні специфікацію HTML.

Для освоєння HTML необхідні: довільний текстовий редактор (наприклад, Notepad), який використовується для підготовки HTML-файлів, та Internet браузер, тобто програма-додаток для перегляду HTML-файлів.

На даний час широко використовуються редактори та конвертори HTML-текстів: Microsoft Front Page, Allaire Coldfusion Studio, Netscape Navigator Gold, Macromedia Dreamweaver.

HTML-документ - це просто текстовий файл із розширенням *.htm (Unix-системи можуть містити файли з розширенням *.html). Набір символів ISO Latin 1, який використовується при побудові HTML-документів, відповідає стандарту ISO 8859, до складу якого входить і ASCII. Стандартне україномовне кодування: Windows 1251 та KOI-8U. Розбіжність кодувань браузера та створеного документа впливає на вигляд кирилиці.

Самий простий HTML-документ (лабораторна_робота_1a.htm):

<HTML>

<HEAD>

<TITLE>Лабораторна робота №1</TITLE>

</HEAD>

<BODY>

Привіт!

Я студент ЧТЕІ КНТЕУ.

</BODY>

</HTML>

З розглянутого прикладу видно, що інформація документа зосереджена між управляючими мітками, укладених між знаками " < " та " > ", які мають назву tag (читається "тег") або дескриптор HTML. Наприклад: <HTML>, <HEAD>.

Більшість HTML-міток - парні, тобто тег <HTML> відкриваючий, а - </HTML> закриваючий. Слеш / означає, що тег є кінцевим тегом, який закриває деяку структуру.

Мітки можна вводити як великими, так і маленькими літерами. Два тега і частина документу, відділена ними, утворюють блок, який називається HTML-елементом.

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

· літер англійського алфавіту (A - Z, a - z);

· цифр (0 - 9);

· проміжків часу;

· дефісів (-).

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

· TOP;

· MIDDLE;

· BOTTOM;

· CENTER;

· LEFT;

· RIGHT;

· ABSMIDDLE;

· BASELINE;

· ABSBOTTOM.

У наведеному вище прикладі немає жодного атрибута.

Документ HTML повинен обов'язково містити такі частини:
тег-контейнер <HTML> ··· </HTML>, який є зовнішнім стосовно інших тег документа і вказує на його межі.

Тег-контейнер <HEAD> ··· </HEAD>, усередині якого обов'язково має бути присутнім хоча б один тег, як-от: тег-контейнер <TITLE> ··· </TITLE>, який містить назву документа і визначає назву вікна броузера, у якому буде проглядатися ваша сторінка. Рекомендується назва не довше 64 символів.

Тег-контейнер <BODY> ··· </BODY> визначає зміст документа і вказує на початок і кінець тіла HTML-документа.

Мітки типу <H i > ··· </H i > (де i – цифра від 1 до 6) описують заголовки шести різноманітних рівнів, причому заголовок першого рівня – найбільш важливий, шостого рівня – найбільш дрібний.

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

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

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

<H4>Заголовок</H4>

<H5>Заголовок</H5>

<H6>Заголовок</H6>

Пара міток  ···  описує абзац. Усе, що замкнуте між  і , сприймається як один абзац.

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

У тегу <META> вміщена додаткова інформація про документ, тобто пари ім’я/значення. Вживається в сполученні з описами атрибутів документа і не потребує закриття. Атрибутами дескриптора <META> може бути будь-яка інформація, яку ви хочете передати. Існує декілька стандартних атрибутів, необхідних для вказування браузеру засобу кодування документа, імені створювача та інформації для пошукових систем. Наприклад (лабораторна_робота_1b.htm):

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=koi8-u">

<META NAME="Author" CONTENT="Студент факультету ***">

<META NAME="Keywords" CONTENT="ЧТЕІ КНТЕУ">

<TITLE>Лабораторна робота №1</TITLE>

</HEAD>

<BODY>

Приклад: 

Використання непарних міток у HTML-документах.

</BODY>

</HTML>

Атрибут NAME містить ім'я метаінформації, а CONTENT - значення параметра, визначеного атрибутом NAME. У дескрипторі <META> можна розмістити ключові слова:

<META NAME="Keywords" CONTENT="ключеві слова">,

які необхідні для індексації вашої сторінки в пошукових системах.

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

Тег <HR> описує горизонтальну лінію:

<HR>

<HR WIDTH="50%" ALIGN="left" SIZE="6" COLOR="#FF0000">

<HR SIZE="8" ALIGN="right" NOSHADE COLOR="#008000">

<HR WIDTH="50%">

Мітка може додатково включати наступні атрибути: ALIGN - задає спосіб вирівнювання лінії, SIZE - визначає товщину в пікселях, NOSHADE - забороняє використання об’ємного затінення лінії та WIDTH визначає ширину лінії у відсотках від ширини сторінки.

Символьні об’єкти або &-послідовності HTML

Оскільки символи " < " і " > " сприймаються браузерами як початок і кінець HTML-міток, виникає питання: як показати ці символи на екрані? У HTML це робиться за допомогою &- послідовностей (їх ще називають символьними об'єктами або ESC-послідовностями). Браузер показує на екрані символ " < ", коли зустрічає в тексті послідовність &lt; (по перших літерах англійських слів less than - менше, ніж). Знак " > " кодується послідовністю &gt; (по перших буквах англійських слів greater than - більше, ніж).

Символ " & " (амперсанд) кодується послідовністю &amp;

Подвійні лапки (") кодуються послідовністю &quot;

Неперервний пробіл (&nbsp;) (Non-breaking spaces);

Існують послідовності типу &#n, де n - позиційний код символу в десятковій системі числення (у діапазоні від 0 до 255).

Крапка з комою - обов'язковий елемент &-послідовності. Крім того, має значення, в якому регістрі записані літери, що складають послідовність. Використання міток типу &QUOT замість &quot не припускається.

ESC-послідовності визначені для всіх символів із другої половини ASCII-таблиці (куди входять і українські літери). Деякі сервери не підтримують восьмибітову передачу даних, і тому можуть передавати символи з ASCII-кодами вище 127 тільки у вигляді &-послідовностей.

Існують такі засоби форматування тексту в HTML-документах як виділення шрифту, цитування, код.

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

Розглянемо фізичну розмітку тексту.

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

Наприклад:

Елементи форматування тексту в HTML- документах 

Для додання тексту певного зображення - жирний, курсив, підкреслений і т.д., необхідно розмістити його між відповідними тегами:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">

<title>Фізичне форматування тексту</title>

</head>

<body>

 Жирний текст 

 Курсив

  Підкреслений

  <STRIKE>Перекреслений </STRIKE>

 Верхній індекс 

 Нижній індекс 

</body>

</html>

Елемент розмітки	INTERNET броузер	Призначення
Netscape	Internet Explorer
TT	однорозмірний	однорозмірний малий	телетайпний текст
I	курсив	курсив	нахилений текст
B	жирний	жирний	підсилений текст
U	звичайний текст	підкреслений текст	підкреслення текту
STRIKE	закреслення	закреслення	закреслення текту
BIG	великий	великий	більший, ніж звичайний шрифт
SMALL	малий	малий	менший ніж звичайний шрифт
SUB	менший ніж звичайний піднятий	менший ніж звичайний піднятий	підрядковий текст
SUP	менший та нижчий ніж звичайний	менший та нижчий ніж звичайний	надрядковий текст
FONT	шрифт	шрифт	розмір та колір шрифту
BASEFONT	шрифт	шрифт	розмір базового шрифту
FACE	шрифт	шрифт	завдання нестандартного шрифту

FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше браузер використовуватиме шрифт, визначений за умовчанням (Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows, MS Office. У самому нижньому рядку приклада представлено використання сімейства шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic, браузер підставить наступний в цьому списку - Tahoma

 Times New Roman

  

System

  

Arial Courier

  

Verdana

  

Comic Sans MS 

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

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=koi8-u">

<TITLE>Лабораторна робота №3</TITLE>

</HEAD>

<BODY>

Це звичайний текст.

Це зразок застосування дескриптору SMALL.

Це зразок тексту шрифтом ARIAL, розмір №1

Це зразок тексту шрифтом ARIAL,

розмір №2

Це зразок тексту шрифтом ARIAL,

розмір №3

Це зразок тексту шрифтом ARIAL,

розмір №4

</BODY>

</HTML>

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

 Текст.

Іноді в тілі HTML-документа необхідно використати коментарі. Браузери ігнорують будь-який текст, який розміщається між мітками . Це зручно для розміщення коментарів.

Наприклад:

Але існує спеціальна мітка для введення коментарів у тексті HTML-документа для ІЕ2 та вище:

<COMMENT>... </COMMENT>

Текст, укладений між мітками <PRE> і </PRE> (від англійського preformatted - попередньо форматований), виводиться браузером на екран із усіма пробілами, символами табуляції і кінця рядка. Це дуже зручно при створенні простих таблиць.

Текст, замкнутий між мітками <BLOCKQUOTE> і </BLOCKQUOTE>, виводиться браузером на екран із збільшеним лівим полем.

Логічне форматування

Існують такі засоби форматування тексту в HTML-документах як виділення шрифту, цитування, код.

Розглянемо логічну розмітку, тобто логічне форматування тексту.

Елемент розмітки	INTERNET броузер	Призначення
Netscape	Internet Explorer
EM	курсив	курсив	цитування
DFN	звичайний текст	курсив	визначення
CODE	однорозмірний	однорозмірний малий	зображення програмного коду
SAMP	однорозмірний	однорозмірний малий	зображення зразків виведення з програм, команд, скриптів
KBD	однорозмірний		введення команд користувача з клавіатури для фіксованих рядків
STRONG	жирний	жирний	підкреслення
VAR	курсив	однорозмірний малий	моноширинний шрифт

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

Розглянемо приклад застосування елемента <VAR>:

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

<TITLE>Лабораторна робота №3</TITLE>

</HEAD>

<BODY>

Це звичайний текст.

<VAR>Це зразок застосування дескриптора </VAR>"VAR"

</BODY>

</HTML>

Перевага логічної розмітки в порівнянні з фізичною в тому, що вона спрощує використання комп'ютерними програмами інформації з HTML-документів для різноманітних цілей.

Стилі HTML-документа

Вбудовувані (inline) стилі визначаються у складі HTML-дескриптора і впливають тільки на цей дескриптор. Наприклад:

 Текст цього абзацу відображатиметься шрифтом verdana розміром 13 пунктів. </р>

Стилі, що включаються

Стилі, що включаються, які також називають внутрішніми стилями, застосовуються до всієї Web-сторінки. Дескриптор <style> поміщається в заголовок HTML-документа Стилі визначаються для різних типів HTML-документів. Так, наприклад, ви можете задати відображення всіх елементів <hl> сірим кольором з використанням шрифту Verdana розміром 14 пунктів (відповідний код приведений нижче). Стиль буде застосований до кожного елементу <hl> у складі даного документа.

<html> <head>

<title>Использование включаемых листов стилей. Пример 1</title>

<style>

<!--

body{background:#FFFFFF;color:#000000;}

h1{font: 14pt verdana;color: #CCCCCC;}

P {font: 13pt times;}

A {color: #FF0000; text-decoration: none;}

-->

</style>

</head>

<body>

<h1>B. Шекспир. Перевод С. Маршака</h1>

Твоя душа противится свиданьям. 

Но ты скажи ей, как меня зовут. 

Меня прозвали <a href ="william.html ">"волей"</a>

иль <a href ="william.html">"желаньем"</a> 

А воле есть в любой душе приют. 

Она твоей души наполнит недра 

Собой одной и множествами <a href =" william.html" > воль</a>. 

А в тех делах, где счет ведется щедро, 

Число "один" - не более чем ноль. 

</body>

</html>

У даному прикладі задані колір фону, колір тексту, шрифт для відображення заголовків H1, а також стилі абзаців і гіпертекстових посилань. Відмітьте, що для заголовка першого рівня <hl> вказано зображення і розмір шрифту в пунктах. Це одна з додаткових можливостей, що надаються CSS. Ви можете задавати розмір не тільки в пунктах, але і в пікселях (рх), відсотках (75 percent) і сантиметрах (cm).

Зв’язуванні стилі

Зв’язуванні, або зовнішні, стилі реалізують механізм для створення стилів, які застосовуються до всього Web-вузла. Створіть за допомогою будь-якого текстового редактора документ, що містить тільки визначення стилів, і збережете його у файлі з розширенням *.css.

Додайте посилання на створений файл стилів в розділ заголовку HTML-документа, внаслідок чого стилі використовуватимуться при відображенні елементів цього документа. Тепер, якщо ви внесете зміни у файл стилів, ці зміни відіб'ються в кожному документі, який був пов'язаний з цим файлом. Розділ заголовка, що містить посилання на файл стилів, виглядає таким чином:

<html>

<head>

<title>Linked Style Sheet Example</title>

<link rel="stylesheet" href="mystyle_l.css" type="text/css">

</head>

<body>

Імпортовані стилі

При імпортуванні стилів використовується правило @import.

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

Селектор ідентифікує, або вибирає елементи Web-сторінки, на які повинно впливати правило.

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

Правило @import повідомляє браузеру, що файл стилів повинен бути завантажений з вказаної адреси і використаний в поєднанні з поточними стилями.

Правило @import задається в одному з наступних форматів:

@import url(http://www.yourwebsitename.com/styles/style1)

або

@import "http://www.yourwebsitename.com/styles/style1"

URL може бути або абсолютним, або відносним. Відносний URL указується в тому випадку, якщо файл стилів знаходиться на тому ж сервері, що і Web-сторінка. У приведених вище прикладах заданий абсолютний URL.

Застосування списків у HTML-документах

Мова HTML підтримує такі типи списків:

1) звичайний ненумерований;

2) нумерований;

3) дефінитивний (список міток або визначень);

4) ненумеровані списки в директорії;

5) меню;

6) вкладені.

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

<UL>

<LI> елемент списку 1

<LI> елемент списку 2

...

</UL >

Нижче вказані атрибути, що застосовуються з цими тегами.

Ім'я атрибута	Можливі значення	Вигляд	Примітки
TYPE	DISC (*), SQUARE (+), CIRCLE (°)	маркери за замовчуванням для елементів у броузері Lynux	Немає в HTML 2.0
COMPACT	COMPACT	за можливістю броузера скорочена відстань між елементами	-

Нумеровані (упорядковані списки) влаштовані точно так само, як ненумеровані, тільки замість символів, що виділяють новий елемент, використовуються цифри.

Упорядковані списки можуть застосовуватись з такими атрибутами (атрибутів TYPE і START немає в HTML 2.0):

Ім'я атрибута	Можливі значення	Вигляд	Примітки
TYPE	1, a, A, i, I	стиль нумерації	має значення регистр написання
COMPACT	COMPACT	скорочена відстань між елементами
START	ціле	Початкова цифра послідовності	за замовчуванням 1

Зміст значень TYPE такий:

TYPE	Стиль нумерації	Перші декілька цифр
	звичайні (арабські) числа	1, 2, 3,...
a	латинське написання у нижньому регістрі	a, b, c,...
A	латинське написання у верхньому регістрі	A, B, C,...
i	римські цифри у нижньому регістрі	i, ii, iii,...
I	римські цифри у верхньому регістрі	I, II, III,...

Мітка <DL> описує дефінітивні або описові списки. Вони описують визначення термінів, описів або іншу інформацію, пов'язану з іменами або фразами. Вживається в сполученні з атрибутом <COMPACT>:

<DL COMPACT>

<DT>термін 1<DD>визначення терміну 1

<DT>термін 2<DD>визначення терміну 2

...

</DL>

Зверніть увагу: множина елементів <DT> може бути при єдиному елементі <DD>. Тобто декілька термінів можуть мати одне і те саме визначення. Документ не повинен містити декілька послідовних елементів <DD>. Мітки <LI>, <DT> і <DD> не мають парних закриваючих міток.

Для відображення інформації як багатостовпчикового списку директорій до 20 символів використовують мітку <DIR>. Фактично більшість броузерів зображують елемент <DIR> також як елемент <UL>. Вживається в сполученні з атрибутом <COMPACT>:

<DIR>

<LI>елемент списку 1

<LI>елемент списку 2

...

</DIR>

Наприклад:

<DIR>

<LI>a<LI>b<LI>c<LI>d<LI>e<LI>f<LI>g<LI>h<LI>i<LI>j<LI>k<LI>l<LI>m<LI>n<LI>o<LI>p<LI>q<LI>r<LI>s<LI>t<LI>u<LI>v<LI>w<LI>x<LI>y<LI>z

</DIR>

Для зображення інформації в менюподібному форматі використовується дескриптор <MENU>, більшість броузерів зображують елемент <MENU> також як елемент <UL>. Вживається в сполученні з атрибутом <COMPACT>:

<MENU>

<LI>елемент списку 1

<LI>елемент списку 2

</MENU>

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

Розглянемо приклад, який суміщує усе викладене вище:

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

<TITLE>Лабораторна робота №4</TITLE>

</HEAD>

<BODY>

<H1>Список старост груп факультету:</H1>

<H2>Кафедра ICIM</H2>

Застосування дескриптора (ul):

<UL>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</UL>

Застосування дескриптора (ol):

<OL>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</OL>

Застосування дескриптора (dir) "directory":

<DIR>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</DIR>

Застосування дескриптора у вигляді "menu":

<MENU>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</MENU>

Застосування дескриптора (dl):

<DL>

<DT> староста групи 307а

<DD> Костапович

<DT> староста групи 307b

<DD> Сіваночко

<DT> староста групи 307c

<DD> Мошкарук

</DL>

<H2>Приклади використання атрибуту compact:</H2>

Застосування дескриптора (ul):

<UL COMPACT>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</UL>

Застосування дескриптора (ol):

<OL COMPACT>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</OL>

Застосування дескриптора (dir) "directory":

<DIR COMPACT>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</DIR>

Застосування дескриптора у вигляді "menu" (menu):

<MENU COMPACT>

<LI> Костапович

<LI> Сіваночко

<LI> Мошкарук

</MENU>

Застосування дескриптора (dl):

<DL COMPACT>

<DT> староста групи 307а

<DD> Костапович

<DT> староста групи 307b

<DD> Сіваночко

<DT> староста групи 307c

<DD> Мошкарук

</DL>

</BODY>

</HTML>

Завдання

1. Опрацювати усі приклади наведені в лабораторній роботі.

2. Створити в текстовому редакторі HTML-файл звіту по лабораторній роботі (із заголовком, що включає номер лабораторної роботи та дані про студента, і підрозділами "Тема", "Мета", "Результати і висновки") та тексту наведеного нижче із застосуванням різноманітних стилів вирівнювання абзацу, непарних міток з атрибутами та фізичних елементів форматування. Зберегти файл у робочій директорії з ім’ям index.htm і показати викладачу результат виведення інформації на екран браузера.

3. Використовуючи HTML-файл попереднього пункту роботи, внести зміни у код, застосовуючи логічні та фізичні елементи форматування, і пояснити викладачу відмінності їх застосування.

4. Побудуйте HTML-файл звіту, використовуючи списки, елементами яких виступає розклад занять. Виконайте роботу, побудувавши вкладені списки. Обґрунтуйте їх застосування і поясніть викладачу відмінності застосування різних видів списків. Зберегти файл у робочій директорії на жорсткому диску і показати викладачу результат виведення на екран браузера HTML-документа. Застосувати коментарі для пояснення інформації, яка була введена різними засобами форматування. Зберегти файл у робочій директорії на жорсткому диску і показати викладачу результат виведення на екран браузера HTML-документа.