Що таке HTML?

HyperText Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів у середовищі WEB. HTML-документи можуть проглядатися різними типами WEB-броузеров. Коли документ створений з використанням HTML, WEB-броузер може інтерпретувати HTML для виділення різних елементів документа і первинної їхньої обробки. Використання HTML дозволяє форматировати документи для їхнього представлення з використанням шрифтів, ліній і других графічних елементів на будь-якій системі, що їх переглядає. Більшість документів мають стандартні елементи, такі, як заголовок, параграфи або списки. Використовуючи тэги HTML ви можете позначати дані елементи, забезпечуючи WEB-броузери мінімальною інформацією для відображення даних елементів, зберігаючи в цілому загальну структуру й інформаційну повноту документів. Усе що необхідно, щоб прочитати HTML-документ - це WEB-броузер, що інтерпретує тэги HTML і відтворює на екрані документ у виді, що йому додає автор.

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

HTML-тэги можуть бути умовно розділені на двох категорій:

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

2. тэги, що описують загальні властивості документа, такі як заголовок або автора документу

Запам'ятаєте, що основна перевага HTML полягає в тім, що ваш документ може бути переглянутий на WEB-броузерах різних типів і на різних платформах.

Як створити HTML документ ?.

Поради при створенні Web-сторінки

1. Потрібно звернути увагу на простоту та логічність розміщення інформації на ваших сторінках. Один із способів зробити інформацію більш легкою для сприйняття — залишити на сторінці достатньо вільного місця. Сторінка, що містить багато інформації, лише злякає відвідувача.

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

3. Не розміщуйте одне зображення відразу за іншим. Намагайтеся розподілити їх по документу, залишивши достатньо вільного простору.

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

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

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

Перед тим, як помістити на сервер свої Web-сторінки, необхідно їх протестувати. Створені документи повинні пройти “локальну перевірку” у межах вашого жорсткого диска. При перевірці використовуйте різні броузери. При тестуванні варто виконати такі дії:

1. Перевірити правопис. Виконати автоматизовану перевірку правопису тексту.

2. Перевірити навігацію. Впевнитися, що усі гіперпосилання працюють правильно.

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

4. Перевірити час завантаження Web-сторінки.

5. Виконати перевірку ваших Web-сторінок сторонньою особою. При цьому іноді виявляються такі факти, яких ви раніше не помічали.

Завдання до лабораторних робіт

Створити Web-сторінки, які висвітлюють наступну інформацію за вказанною темою:

• Глобальна подія

• Видатна людина

• Рейтинг товарів

Вони повинні бути пов’язані між собою гіперпосиланнями, а також мають бути гіперпосилання на них із головної Web-сторінки. Для оформлення використати графіку і фото, різноманітні стилі й формати тексту. Структура сайта може бути такою (рис. 1):

Рис. 1. Структура сайта

Лабораторна робота 1

Тема: Документ HTML. Форматування тексту.

1. Постановка задачі: Створити Web-сторінку з іменем myself.html, яка б містила такі заголовки: “ Інформація про автора”, “ Контакт(телефон, адлеса) ”. У цих розділах напишіть 2-3 абзаци осмисленого тексту, який був би вирівняний по ширині вікна. Визначте колір фону, тексту, а також гарнітуру. Всередині тексту використайте виділення слів жирним курсивом та підкресленням. Використайте різні теги форматування тексту.

2. Додайте заголовок другого рівня “ Назва розробляємого сайту” та розмістіть під ним невеликий текст із збереженням усіх відступів, інтервалів і перенесень строчок.

Перший тег, який повинен знаходитися у будь-якому HTML-документі, — це <HTML>. Він вказує на те, що даний документ дійсно містить у собі HTML-текст. Все, що ви напишете у своєму документі, має знаходитися всередині даного тега:

<HTML>

…

Текст документа

…

</HTML>

Заголовок міститься всередині тега <HEAD> ...</HEAD>:

<HTML>

<HEAD>

...

Заголовок тексту

...

</HEAD>

...

Текст документа

...

</HTML>

У розділі заголовка вказується заголовок документа, для цього використовується тег <TITLE>…</TITLE>. Наприклад:

<HTML>

<HEAD>

<TITLE> Це заголовок документа </TITLE>

</HEAD>

...

текст документа

...

</HTML>

Весь останній HTML-документ, включаючи весь текст, міститься всередині тега <BODY>…</BODY>. Тепер документ виглядатиме ось так:

<HTML>

<HEAD>

<TITLE> Це заголовок документа </TITLE>

</HEAD>

<BODY>

...

Текст документа

...

</BODY>

</HTML>

Загальні відомості про документ розміщуються у тегах <META>. Наприклад:

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

• Windows –1251 — кодування для російської мови в операційній системі Windows.

• Koi8-r — кодування для російської мови в операційній системі Unix.

Завдання 1. Створення найпростіших файлів HTML.

1. Запустити програму Блокнот (Notepad).

2. Наберіть у вікні редактора простий текст файла HTML:

<HTML>

<HEAD>

<TITLE> Інформація про себе</TITLE>

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

</HEAD>

<BODY>

Розклад занять на вівторок

</BODY>

</HTML>

3. Для перегляду створеної Web-сторінки загрузіть броузер Microsoft Internet Explorer.

Завдання 2. Деякі спеціальні команди форматування.

Існують спеціальні команди, що задають переміщення рядків униз <BR>, а також початок нового абзацу <P>.

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

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

</HEAD>

<BODY>

<P> Глобальна </P>

<BR> Подіяь <BR>

в світі

</BODY>

</HTML>

Завдання 3. Виділення фрагментів тексту.

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

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

</HEAD>

<BODY>

<B> Глобальна </В><I>

</I>Подія <U>

в світі

</U>

</BODY>

</HTML>

Можна використовувати комбіновані виділення текстів, наприклад:

.............

<I><В> Глобальна </В></I> <I> Подія

</I> <U> В світі </U>

............

Але при цьому необхідно памятати таке правило запису комбінованих тегів:

<тег-1><тег-2>...</тег-2></тег-1> — правильний запис;

<тег-1><тег-2>...</тег-1></тег-2> — неправильний запис.

Завдання 4. Використання стилів заголовка.

Використовується шість тегів заголовків (від <H1> до <H6>). Кожному тегу відповідає конкретний стиль, заданий параметрами настроювання броузера.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

<P><H1> Глобальна </Н1></P><BR>

<H2><I> Подія ь </I><U> В світі </U></H2>

</BODY>

</HTML>

Завдання 5. Установлення розміру поточного шрифту.

Тег шрифту <FONT> дозволяє задати розмір поточного шрифту в окремих місцях тексту у діапазоні від 1 до 7.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

<FONT SIZE="7"> Глобальна </FONT>

Подія

</BODY>

</HTML>

Завдання 6. Встановлення гарнітури і кольору шрифту.

Тег <FONT> дає можливість управляти розміром, гарнітурою і кольором тексту. Зміна гарнітури виконується простим доповненням до тега <FONT>, атрибута FACE. Наприклад, для зображення тексту шрифтом Arial необхідно записати: <FONT FACE= ARIAL>.

Для зміни кольору шрифту у тег <FONT> додають атрибут COLOR=X. Замість X потрібно підставити або назву кольору (у лапках), або його шістнадцятирічне значення (формат RGB). Приклади запису кольору у форматі RGB наводимо у таблиці 1.

Таблиця 1

Колір	RBG	Колір	RBG
Black чорний	000000	Purple бордовий	FFOOFF
While білий	FFFFFF	Yellow жовтий	FFFFOO
Red червоний	FFOOOO	Brown коричневий	996633
Green зелений	OOFFOO	Orange оранжевий	FF8000
Azure бірюзовий	OOFFFF	Violet фіолетовий	8000FF
Blue синій	OOOOFF	Gray сірий	АОАОАО

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

<U><I><B><FONT COLOR="#FFOOOO" FACE="ARIAL"

SIZE="7">

Глобальна </FONT></B></I></U>

Подія

</BODY>

</HTML>

2. Самостійно змінити розмір, колір, гарнітуру, стиль тексту.

Завдання 7. Вирівнювання тексту по горизонталі.

Вирівнювання тексту виконується за допомогою атрибута ALIGN у тезі <P>.

Внесіть зміни у ваш файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

<P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7">

<B> Глобальна </B></FONT><BR>

<FONT SIZE="6"><I> Подія </I>

</FONT>

</Р>

</BODY>

</HTML>

Завдання 8. Встановлення кольору фону і тексту.

При зображенні фону і тексту броузери використовують кольори, встановлені за замовчуванням, — вони задані параметрами налаштування броузера. Якщо ви хочете задати інші кольори, то це потрібно зробити на початку файла HTML у тезі <BODY>. Атрибут BGCOLOR визначає колір фону сторінки, TEXT — колір тексту для всієї сторінки, LINK та VLINK визначає колір відповідно невідвіданих і відвіданих гіперпосилань (останні два параметри розглянемо пізніше).

<HTML>

<HEAD>

<TITLE> Інформація про </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFCC" TEXT="#330066">

<P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7">

<B> Глобальна </B></FONT><BR>

<FONT SIZE="10"><I>з Подія </I>

</FONT>

</P>

</BODY>

</HTML>

Лабораторна робота 2

Тема: Графіка усередині HTML-документа.

1. Постановка задачі: Створити за допомогою редактора малюнок (вашу емблему і розмістіть на вашій сторінці myself.html.

2. Створити Web-сторінку про себе, (про своїх друзів) та встановіть на ній фонове зображення.

3. Під іменем foto.html Створити Web-сторінку, на котрій розмістіть фотографії з надписами. Використайте такі атрибути, як ALT, BORDER, HEIGHT, WIDTH.

Як правило, броузери підтримують малюнки у форматах GIF та JPG. Формат GIF використовується для збереження малюнків із чіткими деталями, невеликим набором кольорів (до 256) і можливістю анімації. Крім того, цей формат підтримує ефект прозорості, а також можливість черезстрочного завантаження зображення. Формат JPG використовується для збереження повнокольорової графіки і фото (він підтримує 16,7 мільйона кольорів). При підготовці ілюстрацій для вашої Web-сторінки усю попередню обробку малюнка потрібно проводити, наприклад, у форматі BMP, а у формат GIF та JPG конвертується лише кінцевий варіант.

Завдання 1.

Розміщення графіки на Web-сторінці.

Графічне зображення вставляється у документ HTML за допомогою тега:

<IMG SRC="URL малюнка" WIDTH="ширина" HEIGHT="висота" BORDER="рамка" ALIGN="вирівнювання" HSPACE="відступ по горизонталі" VSPACE="відступ по вертикалі" ALT="текст">

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

<HTML>

<HEAD>

<TITLE> > Інформація про </TITLE>

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

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7"><B>

Глобальна </B></FONT><BR>

<FONT SIZE="6"><I> Подія

</I></FONT>

<BR><BR>

<IMG SRC="CLOCK.JPG">

</P>

</BODY>

</HTML>

Завдання 2. Установлення фонового зображення на Web-сторінці.

Графіка, що використовується як фон, задається в тегові <BODY> за допомогою атрибута BACKGROUND.

<HTML>

<HEAD>

<TITLE>> Інформація про HTML</TITLE>

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

</HEAD>

<BODY BACKGROUND="backgrnd.gif" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080"SIZE="7"><B>

Глобальна </B></FONT><BR>

<FONT SIZE="6"> <I> Подія

</I>

</FONT>

</Р>

</BODY>

</HTML>

Лабораторна робота 3

Тема: Таблиці.

1. Постановка задачі: Створити таблицю із 3-х рядків та 2-х стовпців. Задайте для неї колір фону (або фоновий малюнок) і подвійну рамку. У комірках таблиці розмістіть малюнки або тексти. Задайте відступ від границі комірки до її вмісту, рівний 10 пікселям, відстань між комірками зробіть рівною 3 пікселям. Таблицю “прижміть” до правого боку вікна броузера.

2. Створити таблицю із 4-х рядків і 4-х стовпців. За допомогою атрибутів colspan та rowspan обєднайте окремі комірки. В обєднані комірки розмістіть текст або зображення так, щоб вони розміщувалися посередині комірки, по горизонталі і по вертикалі.

3. Створити документ:

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

Важливим інструментом Web-дизайну є таблиці, які використовуються не лише для виведення табличних даних, але і для управління взаємним розміщенням тексту й графіки, створення колонок газетного типу, кольорових ефектів та ін. Таблиця задається тегом <TABLE>…</TABLE>, що має цілий ряд опцій:

Таблиця 2

Опція	Призначення
ALIGN="вирівнювання"	Вирівнювання усієї таблиці відносно тексту, в якому вона знаходиться (left, center або right)
BORDER="число"	Ширина бордюру таблиці, у пікселях
CELLSPACING="число"	Відстань між комірками, у пікселях
CELLPADDING="число"	Розмір вільного простору між границями комірки та її вмістом, у пікселях
HSPACE="число"	Розмір вільного простору зліва та справа від таблиці, у пікселях
VSPACE="число"	Розмір вільного простору зверху і знизу від таблиці, у пікселях
WIDTH="ширина"	Ширина таблиці у пікселях або відсотках від ширини вікна броузера
BACKGROUND="IMAGES\ptichka.jpg"	Заповнює комірку фоновим малюнком. Необхідно вказати URL малюнка
BGCOLOR="CCFFFF"	Визначає колір фону комірки
COLSPAN	Визначає кількість стовпців, які обєднуються. За замовчуванням має значення 1
ROWSPAN	Визначає кількість рядків, які обєднуються. За замовчуванням має значення 1
VALIGN	Визначає спосіб вертикального вирівнювання змісту комірки. Можливі значення: top, bottom, middle. За замовчуванням – рівняння по центру (VALIGN="middle)

Таблицю визначають таким чином:

<table>

<tr>

<td>Вміст комірки</td>

<td>Вміст комірки</td>

...

</tr>

<tr>

<td>Вміст комірки</td>

<td>Вміст комірки</td>

...

</tr>

...

</table>

Тег <TR>…</TR> визначає рядок таблиці, а тег <TD>…</TD> — комірку в рядку. Якщо комірку треба залишити пустою, то в неї розміщують символ пропуску &nbsp;

Завдання 1. Створити таблицю.

<HTML>

<HEAD>

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

<TITLE> Глобальна події </TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<P ALIGN=CENTER>

<FONT COLOR="RED" SIZE="6" FACE="ARIAL">

<B> Країна

</B></FONT><BR></P>

<FONT COLOR="BLUE"SIZE="4" FACE="COURIER">

<B> Час </B></FONT><BR>

<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#009966" bordercolordark="#9999FF">

<tr bgcolor="#9999FF">

<td> Дата </td>

<td> поді1 </td>

<td>поді 2 </td>

<td> поді 3 </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 1</td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 2</td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 3</td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

</BODY>

</HTML>

У цьому прикладі границя таблиці виконана у двох кольорах. Це досягається за рахунок використання атрибутів BORDERCOLORLIGHT та BORDERCOLORDARK.

Завдання 2. Створити “неправильну” таблицю.

		Характеристики
		Середній зріст, см	Середня вага, кг
Стать	Чоловіча	177	73
	Жіноча	166	65

......................................................................................

<table border="1" cellpadding="5" cellspacing="0">

<tr>

<td colspan="2" rowspan="2"> </td>

<td colspan="2">Характеристики</td>

</tr>

<tr>

<td> Середній зріст, см </td>

<td> Середня вага, кг </td>

</tr>

<tr align="center">

<td rowspan="2">Пол</td>

<td> Чоловіча </td>

<td>177</td>

<td>73</td>

</tr>

<tr align="center">

<td> Жіноча </td>

<td>166</td>

<td>65</td>

</tr>

</table>

................................................................