101

Зміст

ВСТУП 2

Лабораторна робота №1 Створення найпростіших Web-Сторінок. Форматування тексту засобами мови HTML 4

Лабораторна робота №3 Каскадні таблиці стилів 22

Лабораторна робота №4 Розмітка сторінок за допомогою блоків (DIV) і CSS. Позиціонування 30

Лабораторна робота №5 Форми 32

Лабораторна робота №6 Фрейми. Карти зображень 38

Лабораторна робота №7 Динамічний HTML. Введення в Javascript 43

Лабораторна робота №8 Динамічний HTML. Об'єкти JavaScript 49

Лабораторна робота №9 Встановлення, налаштування Denwer. Мова програмування РНР. 57

Лабораторна робота №10 Мова програмування РНР. Змінні, типи даних, операції, керуючи оператори. 64

Лабораторна робота №11 Мова програмування РНР. Цикли. Структура вибору. Масиви. Функції. 69

Лабораторна робота №12 Серверні додатки. Бібліотечні функції PHP 75

Лабораторна робота №13 Робота з базами даних. Утиліта РhpMyAdmin. 82

Лабораторна робота №14 Доступ до бази даних MySQL з використанням мови РНР. 87

Лабораторна робота №15 Виконання запитів до бази даних. 93

Додаток 1. Основні теги HTML 97

ВСТУП

Сучасний етап розвитку суспільства характеризується широким використанням комп'ютерної техніки, нових інформаційних технологій, телекомунікації та нових видів документального зв'язку. Дисципліна „Web-програмування" має на меті ознайомити студентів з методологією й основними принципами підготовки Web-документів у текстовому й спеціалізованих графічних редакторах; вивчення мов гіпертекстової розмітки HTML та XML, принципів створення java-аплетів та специфікації CSS (каскадні таблиці стилів); формування вмінь і навичок практичного створення Web- документів з використанням java-аплетів для подальшого застосування у Web- додатках; якісне підвищення рівня конкурентоспроможності випускників на ринку праці за рахунок поглибленої професійної підготовки в галузі інформаційних систем і технологій.

Дисципліна „Web-програмування" є нормативною навчальною дисципліною, що передбачена навчальним планом підготовки молодшого спеціаліста за напрямом „Розробка програмного забезпечення".

Курс базується на таких дисциплінах: „Інформатика та комп'ютерна техніка", „Інструментальні засоби візуального програмування", „Структурне програмування", „Об'єктно-орієнтоване програмування".

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

У результаті вивчення даного курсу студент повинен знати:

• мови гіпертекстової розмітки HTML, XML та специфікацію CSS;

• мову програмування Php та Java;

• програмні продукти для створення та роботи з Web-до датками;

• знати і виконувати основні вимоги до програмного забезпечення та програмної документації;

• основні принципи роботи в WWW, її можливості та принципи застосування в професійній сфері.

Вміти:

• самостійно працювати із спеціалізованою літературою з програмування;

• проектувати і розробляти Web-документи в текстовому редакторі та спеціалізованих графічних редакторах для їх публікації в WWW;

• створювати java-аплети для пересилки по Internet і запуску на віддаленому комп’ютері;

• використовувати можливості WWW з метою отримання та розповсюдження інформації для розв'язання професійних задач.

• встановлювати і набудовувати Web-сервер Apache, сервер даних Mysql, платформу PHP;

• розробляти базові Web -додатки;

• реалізовувати підключення Web-додатка до бази даних з метою зберігання й обміну інформацією між базою даних і додатком;

• працювати з Web - інтерфейсом Mysql Phpmyadmin;

• використовувати методи GET і POST для передачі й обміну даними;

• використовувати Html-форми для забезпечення введення, виведення і обробки даних Web -додатки;

• реалізовувати роботу з файлами й каталогами;

• використовувати основні принципи адміністрування веб- додатка.

Методичні вказівки для виконанню лабораторних робіт студентами спеціальності "Розробка програмного забезпечення" являють собою систематизований курс по дисципліні "Web-програмування".

Перша частина методичний вказівок присвячена вивченню основ верстки web- документів засобами мови HTML. Базовим програмним забезпечення для даного розділу курсу є: Денвер-3 і Htmlpad 2008. Денвер-3 являє собою набір дистрибутивів і програмну оболонку, використовувані Web-Розроблювачами для налагодження сайтів без необхідності виходу в Інтернет, а Htmlpad 2008 - багатофункціональний редактор HTML з підсвічуванням синтаксису й попереднім переглядом документа. Обоє програмних продукту містять довідкову систему по основних темах курсу, що дозволяє вдосконалити навички пошуку інформації.

Матеріал методичних вказівок даного курсу розділений на 18 лабораторних робіт. Перша частина методичних вказівок, охоплює такі питання як: установка програмних продуктів, структура web- сервера, структура html-документа, основні теги форматування тексту, абзаців, зображень, гіперпосилань, списків, таблиць, форм, фреймів, карт зображень і т.д.

Методичні вказівки можуть бути використані як посібник для студентів факультету "Розробка програмного забезпечення", які вивчають дисципліну " Web-програмування", а так само як посібник для комп'ютерних курсів орієнтованих на створення сайтів. Дані методичні вказівки можна використовувати для самостійного вивчення запропонованих програм, оволодіння навичками створення сайтів-візиток, або web-презентацій курсових і дипломних проектів.

Вимоги до апаратного й програмного забезпечення:

Для виконання завдань лабораторних робіт необхідно мати комп'ютер, який має оперативну пам'ять не менш 256 Мб і жорсткий диск, з вільним обсягом не менш 1 Гб. Операційна система - Windows XP або більш пізні версії, включаючи повну сумісність програмного забезпечення з Windows Vista.

Лабораторна робота №1 Створення найпростіших Web-Сторінок. Форматування тексту засобами мови html

Мета роботи: придбати початкові навички створення найпростіших Internet-документів. Навчитися виконувати форматування створених Web-сторінок.

Контрольні питання

1. Загальні положення мови HTML.

2. Структура Html-Документа.

3. Використання кольору в Html-Документах.

4. Елементи форматування тексту засобами мови HTML на рівні блоків.

5. Елементи мови HTML, що задають шрифт.

6. Спеціальні теги мови HTML.

Теоретичні відомості.

Загальні положення мови HTML

Мова HTML (Hypertext Markup Language, мова розмітки гіпертексту) — це мова, на якій створюються Web-сторінки.

Web-Сторінки ( Html-Документи) можуть проглядатися різними типами Web-браузерів. Коли документ створений з використанням HTML, Web-браузер може інтерпретувати HTML для виділення різних елементів документа і первинної їхньої обробки. Використання HTML дозволяє форматувати документи для їхнього представлення з використанням шрифтів, ліній і інших графічних елементів на будь-якій системі, що переглядає їх.

Web-сторінки можуть бути створені за допомогою:

• звичайного текстового редактора;

• редактори, здатного зберігати у форматі HTML;

• спеціалізованого редактора;

• спеціалізованої системи.

Html-документи зберігаються на диску як звичайні текстові документи у форматі ASCII. Для розпізнавання Web-сторінок по їхнім іменам загальноприйняте позначати такі файли використанням розширень .HTM ( для Windows 3.1) або .HTML ( для Windows 95/98/NT/ХР/Seven, Macintosh і Unix).

Крім корисного тексту в Html-документах використовуються спеціальні керуючі послідовності символів — теги.

Структура тегу має такий вигляд:

Парний тег:

<ТЕГ атрибут1=значення1...>

текст

інші конструкції

</ТЕГ>

Одинокий тег:

<ТЕГ атрибут1=значення1...>

текст

інші конструкції

Найчастіше теги використовуються попарно, оточуючи розмічені фрагменти тексту. Такі теги називаються контейнерами. Закриваючий тег відрізняється від початкового тільки присутністю символу "/" тегу, що додається перед іменем.

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

Структура Html-Документа

Коли Web-браузер одержує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, який зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє Web-Браузеру, що документ написаний з використанням HTML.

Мінімальний Html-Документ має структуру:

<HTML>

...тіло документа...

</HTML>

Теги <HTML> і </HTML> містять всередині себе всі елементи Html-Коду, указуючи, що використовується мова HTML.

Проте, прийнято виділяти заголовну частину і тіло Web-Документа.

Теги <HEAD> і </HEAD> позначають заголовну частину Web-документа. Як правило, заголовна частина містить назву документа, мета теги з інформацією для індексування й деякі загальні установки для даного документа.

Тег заголовної частини документа повинен бути використаний відразу після тегу <HTML> і більш ніде в тілі документа.

Теги <BODY> і </BODY> обрамляють тіло (основну частину) документа. Тут розміщається основна значеннєва текстова й графічна інформація. Тіло документа відображається у вікні браузера.

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

У загальному виді Web-документ має наступну структуру:

<HTML>

<HEAD>

<TITLE>

… текст для рядка заголовка браузера

</TITLE>

</HEAD>

<BODY>

… тіло документа (у вікні броузера)

</BODY>

</HTML>

Всередині контейнера <HEAD> може використовуватися тег <TITLE>, як показано вище. Більшість Web-браузерів відображають вміст цього тегу в рядку заголовка вікна Web-браузера документ, що містить, і у файлі закладок, якщо він підтримується Web-браузером.

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

Синтаксис коментаря наступний:

<!-- Це коментар -->

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

Форматування тексту

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

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

Кольори в Html-документі

Існує дві форми завдання кольору:

• символьна - вказується назва одного з визначених квітів, наприклад, RED;

• цифрова - комбінація RGB: #RRGGBB, наприклад, для червоного - #FF0000.

Символьні ідентифікатори й Rgb-Комбінації основних кольорів наведені в таблиці 1.1:

Таблиця 1.1 - Кольори в Html-документі

Колір	Символьне позначення	Цифрове позначення
Чорний	BLACK	#000000
Темно-синій	NAVY	#000080
Блакитний	BLUE	#0000FF
Зелений	GREEN	#008000
Синьо-зелений	TEAL	#008080
Яскраво-зелений	LIME	#00FF00
Блакитний	AQUA	#00FFFF
Темно-червоний	MAROON	#800000
Бузковий	PURPLE	#800080
Маслиновий	OLIVE	#808000
Сірий	GRAY	#808080
Срібний	SILVER	#C0C0C0
Червоний	RED	#FF0000
Бузковий	FUCHSIA	#FF00FF
Жовтий	YELLOW	#FFFF00
Білий	WHITE	#FFFFFF

Мова HTML визначає для тегу BODY наступні атрибути кольорів:

• BGCOLOR - колір фону для тіла документа,

• TEXT - колір, використовуваний при виведенню на екран тексту з даного документа,

• LINK - колір, який буде використовуватися при виведенню на екран тексту із ще не обраних вами гіпертекстових зв'язків,

• VLINK - колір, який буде використовуватися при виведенню на екран тексту із вже перевірених вами гіпертекстових зв'язків,

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

Атрибут COLOR, що вказує на колір, може також використовуватися в тегах: <FONT>, <HR>.

Елементи форматування на рівні блоків

До тегів блокового рівня відносять:

Тег абзацу (параграфа) розділяє два абзаци порожнім рядком.

<P ALIGN=LEFT|CENTER|RIGHT|JUSTIFY NOWRAP> текст </P>

Може не мати пари </P>.

Атрибут ALIGN задає вирівнювання інформації.

Застосування атрибута NOWRAP дає можливість писати текст без переносу слів.

Для центрування тексту або графіки можна використовувати також контейнер <CENTER>...</CENTER>

Теги заголовків (від 1-го до 6-го рівнів) використовуються для виділення структурних частин тексту.

Кожний стиль заголовка має свій розмір. Тег <H1> має найбільший розмір.

<H1|H2|H3|H4|H5|H6 ALIGN=...> текст </H1|H2|H3|H4|H5|H6>

Тег горизонтальної лінійки призначений для креслення горизонтальної лінії.

<HR ALIGN=... SIZE=... WIDTH=... NOSHADE>,

де атрибут:

• SIZE задає товщину лінії в пікселях,

• WIDTH - ширину в пікселях або відсотках від ширини вікна браузера,

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

Тег кінця рядка викликає перехід не новий рядок без розриву абзацу.

<BR>

Тег <WBR> — визначає місце можливого (рекомендованого) переносу (розриву) рядка.

Контейнер <NOBR> …</NOBR> містить у собі текст, який не повинен розбиватися на рядки, навіть якщо вона виходить за межі екрана. Замість цього браузер дозволить горизонтально переглядати текст.

Контейнер <PRE>…</PRE> використовується для відображення на екрані символів табуляції, повернення каретки, додаткових пробілів, зберігає попередньо виконане форматування тексту. Всередині контейнера можуть використовуватися інші теги форматування.

Контейнер <BLOCKQUOTE> призначений для позначення в документі цитати з іншого джерела. Текст, позначений цим тегом, відступає від лівого краю документа на 8 пробілів.

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

Таблиця 1.2 - Оператори HTML для опису списку

Нумерований список – Ordered List	Маркірований список – Unordered List	Вкладений список	Список термінів і визначень
<ol> <li>пункт списку</li> <li>пункт списку</li> <li>пункт списку</li> … </ol>	<ul> <li>пункт списку</li> <li>пункт списку</li> <li>пункт списку</li> … </ul>	<ol> <li> пункт списку 1</li> … <ul> <li> пункт списку 2</li> … </ul> … <li> пункт списку 1</li> </ol>	<dl> <dt>Назва терміна <dd>визначення терміна <dt>Назва терміна <dd>визначення терміна … </dl>

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

TYPE - тип маркера (таблиця 1.3)

Таблиця 1.3 - Типи маркерів

Для нумерованих		Для маркірованих
A	Заголовні букви	disс	Зафарбований кружок. За замовчуванням
a	Малі літери	circle	Незафарбований кружок
I	Заголовні римські цифри	square	Квадратик
i	Рядкові римські цифри
1	Арабські цифри (за замовчуванням)

START - Початкове значення для нумерованого списку при використанні арабських цифр

TITLE - Спливаюча підказка

<OL TYPE=A TITLE="нумерований список">

…

</OL>

Теги, що задають шрифт

<FONT SIZE=… COLOR=... FACE=...> текст </FONT>

• SIZE — встановлює розмір шрифту, який буде використовуватися текстом, що знаходиться в межах елемента FONT. Можна задати абсолютний розмір шрифту, вказавши ціле число від 1 до 7. Для шрифту можна також вказувати відносний розмір, привласнюючи атрибуту ціле число зі знаком (наприклад, це може бути SIZE="+1" або SIZE="-2").

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

• FACE — задає гарнітуру шрифту, наприклад FACE=ARIAL.

<TT> текст </TT> — телетайпний текст.

<I> текст </I> — стиль із похилим шрифтом (курсив).

<B> текст </B> — стиль із жирним шрифтом.

<U> текст </ U> — стиль із підкресленням тексту.

<BIG> текст </ BIG>— печатка тексту шрифтом збільшеного розміру (більшого, ніж навколишній текст).

<SMALL> текст </ SMALL> — печатка тексту шрифтом зменшеного розміру (меншого, чому навколишній текст).

<SUB> текст </ SUB> — печатка тексту зі зрушенням униз (нижній індекс або підрядковий).

<SUP> текст </ SUP>— печатка тексту зі зрушенням нагору (верхній індекс або надрядковий).

<STRIKE> текст </ STRIKE>або <S> …</S> — стиль із перекресленням тексту.

Спеціальні теги HTML

Тег <ADDRESS> використовується для виділення автора документа і його адреси (наприклад, e-mail).

<ADDRESS> Адреса-Автора </ADDRESS>

Деякі символи є керуючими символами в HTML і додаються в текст тільки за допомогою Esc-Послідовностей:

• ліва кутова дужка "<" - <

• права кутова дужка ">" - >

• амперсанд "&" - &

• подвійні лапки """ - "

Існує велика кількість Esc-послідовностей для позначення спеціальних символів, наприклад "©". Однієї з особливостей є заміна символів в 2-ій частині символьної таблиці (після 127-ого символу) на escape-послідовності для передачі текстових файлів з національними мовами по 7-бітним каналам.

Esc-послідовності чутливі до регістру: НЕ МОЖНА використовувати &LT; замість <.

Найбільше часто використовувані теги наведено в таблиці 1.4.

Таблиця 1.4 - Основні теги для оформлення Html-Документа

тег HTML – початковий і кінцевий теги всього Html-Документа
№	Атрибут	Функція
1	version=рядок	Вказується версія HTML, яка була використана для створення даного документа
2	i	Вкладений в теги текст буде відображатися в курсивному накресленні
тег HEAD – початковий і кінцевий теги заголовної частини Html-документа
тег TITLE – початковий і кінцевий теги заголовка Html-документа
тег A – початковий і кінцевий теги, які дозволяють створити гіперпосилання (атрибут href) або ідентифікатор фрагмента (атрибут name) заголовка Html-Документа
№	Атрибут	Функція
1	href=url	Вказується Url-Адреса цільового документа гіперпосилання (необхідний, якщо це не якір імені)
2	methods=список	Задається список методів відображення, що залежать від браузера (через кому)
3	name=рядок	Вказується ім'я ідентифікатора фрагмента (необхідний, якщо це не якір гіпертекстового посилання)
4	rel=зв'язок	Визначається зв'язок цього документа із цільовим документом
5	rev=зв'язок	Визначається зворотний зв'язок цільового документа з даним
6	target=ім'я	Задається ім'я кадру або вікна відображення позначеного посиланням документа
7	title=рядок	Задається заголовок цільового документа
8	urn=urn	Вказується не залежне від місця знаходження універсальне ім'я ресурсу для даного гіперпосилання
тег ADDRESS – включений в дані теги текст являє собою адресу
тег B – включений в дані теги текст буде відображатися жирним шрифтом
тег BASE – вказує базовий URL для всіх відносних URL у даному документі
№	Атрибут	Функція
1	href=url	Вказується базовий Url-Адреса
2	target=ім'я	Задається цільове вікно, що використовується за замовчуванням, для всіх посилань <a> в документі. Призначений в основному для переадресації посилання в інші вікна. Існує чотири спеціальні значення: _blank, _parent, _self і _top
тег BASEFONT – вказується розмір шрифту для наступного тексту
№	Атрибут	Функція
1	size=значення	Встановлення розміру базового шрифту. Діапазон – від 1 до 7
тег BIG – вкладений в теги текст буде відображатися шрифтом більшого розміру
тег BODY – початковий і кінцевий теги тіла документа
№	Атрибут	Функція
1	alink=колір	Встановлення кольору активних гіпертекстових посилань в документі
2	background=url	Вказується URL фонового зображення
3	bgcolor=колір	Встановлення кольору фону документа
4	bgproperties=значеня	Якщо значення рівне fixed, забороняється прокручування фонового зображення разом із змістом документа (IE2 і вище)
5	leftmargin=значення	Встановлення розміру (в пікселях) лівого поля документа (IE2 і вище)
6	link=колір	Встановлення кольору "невідвідуваних" гіпертекстових посилань в документі
7	text=колір	Встановлення кольору звичайного тексту в документі
8	topmargin=значення	Встановлення розміру (у пікселях) верхнього поля документа (IE2 і вище)
9	vlink= колір	Встановлення кольору "відвідуваних" посилань в документі
тег BR – розрив поточного текстового потоку і поновлення його з початку наступного рядка
№	Атрибут	Функція
1	clear=поле	Задається "обтікання" об'єкта, розташування якого зазначено значенням даного атрибута (left, right або all). При переносі на новий рядок текст буде розміщатися так, щоб об'єкт залишався видимим
тег CENTER – розміщення включеного в теги тексту по центру
тег CITE – вкладений в теги текст являє собою цитату
тег COMMENT – Коментар в тексті документа. Коментарі будуть видимі в будь-якому браузері. Для всіх браузерів коментар представляється у вигляді <!-текст коментаря -->
тег DD – задається описова частина для елемента списку визначень
тег DFN – текст, вкладений в теги форматується як визначення
тег DL – створення списку визначень, що містять теги <dt> і <dd>
тег DT – задається умовна-описово-умовна частина для елемента списку визначень
тег EMBED – початковий і кінцевий теги, які дозволяють описати об'єкт, що вбудовується в документ. Залежно від виду, що вбудовується об'єкта можуть, крім зазначених нижче, включатися додаткові параметри
№	Атрибут	Функція
1	src=url	Вказується URL об'єкта, що вбудовується. Цей атрибут є необхідним
2	height=n	Вказується висота зони, яку займе вбудований об'єкт
3	name=ім'я	Вказується ім'я об'єкта, що вбудовується
4	width=n	Вказується ширина зони, яку займе вбудований об'єкт
тег FONT – встановлення розміру, кольору або гарнітури включеного у теги тексту
№	Атрибут	Функція
1	color=колір	Встановлення кольору включеного в теги тексту
2	face=список	Встановлення гарнітури включеного в теги тексту (встановлюється перший із зазначених у розділеному комами списку імен шрифтів)
3	size=значення	Встановлення розміру базового шрифту. Діапазон – від 1 до 7
тег Hn – вкладений у теги текст являє собою заголовок рівня n. Можливі значення n – від 1 до 6
№	Атрибут	Функція
1	align=тип	Вказується спосіб вирівнювання заголовка: по лівому краю (left, за замовчуванням), по центру (center) або по правому краю (right)
тег HR – розрив поточного текстового потоку. У місці розриву буде вставлена горизонтальна лінійка
№	Атрибут	Функція
1	align=тип	Вказується спосіб вирівнювання лінійки: по лівому краю (left), по центру (center, за замовчуванням) або по правому краю (right)
2	noshade	Забороняється використання об'ємного затінення при відображенні лінійки
3	size=n	Встановлення товщини лінійки рівної цілому числу пикселів
4	width=значення
тег I – вкладений в теги текст буде відображатися в курсивному накресленні
тег IMG – в поточному текстовому потоку вставляється зображення
№	Атрибут	Функція
1	alt=текст	Задається альтернативний текст для браузерів, що не підтримують роботу із зображеннями
2	Border=n	Встановлення товщини (у пікселях) обрамлення зображень, що знаходяться в гіперпосиланнях
3	controls	Додавання функцій керування відтворенням вбудованих відео кліпів (IE2 і вище)
4	Dynsrc=url	Задається Url-Адреса відео кліпу, що підлягає зображенню (IE2 і вище)
5	Height=n	Задається висота зображення в пікселях
6	Hspace=n	Задається розміщення ліворуч і праворуч від зображення областей вільного простору шириною по n пікселів
7	Ismap	Вказується, що при використанні даного тегу всередині тегу <a> зображення вибирається за допомогою миші
8	loop=значення	Встановлення числа повторів відтворення відео. Значення може бути цілим або значенням infinite (IE2 і вище)
9	Lowsrc=url	Вказується зображенням з низьким дозволом, який браузер повинен завантажити першим. За ним іде зображенням, задане атрибутом <src> (IE2 і вище)
10	src=url	Вказується вихідний URL зображення, що підлягає відтворенню. Цей атрибут є необхідним
11	start=початок	Вказується, коли слід відтворити відео кліп (варіанти: fileopen або mouseover)
12	Usemap=url	Вказується чутлива до переміщення миші область зображення
13	Vspace=n	Задається розміщення над та під зображенням областей вільного простору по n пікселів
14	width=n	Вказується ширина зображення в пікселях
тег KBD – вкладений в теги текст вводиться посимвольно (як при наборі із клавіатури)
тег LINK – в заголовку (<head>) документа визначається посилання з даного документа на інший документ
№	Атрибут	Функція
1	href=url	Вказується Url-Адреса гіпертекстового посилання цільового документа
2	methods=список	Задається список методів відображення для даного посилання, що залежать від браузера (через кому)
3	rel=зв'язок	Визначається зв'язок цього документа із цільовим документом. Для Internet Explorer 3.0 rel=style означає існування зовнішньої таблиці стилів
4	rev=зв'язок	Визначається зворотний зв'язок цільового документа з даним
5	src=url	Вказується URL зовнішньої таблиці стилів, яка буде використовуватися для форматування документа (IE2 і вище)
6	title=рядок	Задається заголовок цільового документа
7	type=text/css	Задається тип зовнішнього посилання, яке буде використовуватися як зовнішня каскадна таблиця стилів
8	urn=urn	Для цільового документа вказується універсальне ім'я ресурсу, що не залежить від його місця знаходження
тег MAP – визначається чутлива до переміщення миші область зображення
№	Атрибут	Функція
1	name=рядок	Задається ім'я даної області. Цей атрибут є необхідним
тег NOBR – включеному в теги тексті розриви не допускаються
тег P – початковий і кінцевий теги абзацу
1	align=тип	Задається спосіб вирівнювання тексту в абзаці: по лівому краю (left), центру (center) або по правому краю (right)
тег PLAINTEXT – вказується, що іншу частину документа слід відображати без обробки, як попередньо відформатований текст
тег PRE – вкладений у теги текст буде відображатися так. як він був відформатований попередньо, без обробки, з точним дотриманням переносів рядків і інтервалів
№	Атрибут	Функція
1	width=n	Браузер буде розміщати текст так, щоб у рядку вміщалося (якщо можливо) n символів
тег S – вкладений в теги текст буде відображатися перекресленим горизонтальною лінією
тег SAMP – вкладений в теги текст являє собою шаблон
тег SMALL – вкладений в теги текст буде відображатися шрифтом меншого розміру
тег SPACER – вставити в документ роздільник (Тільки N3)
№	Атрибут	Функція
1	type=тип	Вказується тип роздільника: vertical – між двома рядками тексту міститься область порожнього простору зазначеного розміру; horizontal – область порожнього простору зазначеного розміру міститься між словами або символами; block – вставка прямокутної області
2	size=n	Вказується (в пікселях) ширина роздільника типу horizontal або висота роздільника типу vertical
3	width=n	Вказується ширина роздільника типу block
4	height=n	Вказується висота роздільника типу block
5	align=значення	Вказується спосіб вирівнювання роздільника block щодо навколишнього тексту.
тег SPAN – вкладений в теги текст буде форматуватися з використанням таблиці стилів (Тільки IE3 і вище)
№	Атрибут	Функція
1	style=елементи	Для тексту в заданому інтервалі задаються елементи таблиці стилів
тег STRIKE – укладений у теги текст буде відображатися перекресленим горизонтальною лінією
тег SUB – укладений у теги текст буде відображатися як нижній індекс
тег SUP – укладений у теги текст буде відображатися як верхній індекс
тег TT – укладений у теги текст буде відображатися моноширинным шрифтом
тег VAR – укладений у теги текст являє собою ім'я змінної

Практичні завдання.

Завдання 1. Викличте текстовий редактор БЛОКНОТ. Наберіть наступний нижче текст і збережете під іменем web1.html.

<HTML>

<HEAD>

<TITLE>Моя персональна сторінка (заголовок для браузера)</TITLE>

</HEAD>

<BODY>

ПРИВІТ! Це моя особиста домашня сторінка! Мене кличуть (……………………).

</BODY>

</HTML>

1. Задайте колір фону та колір тексту для Web-сторінки, відмінних від встановлених за замовчуванням. Завантажити файл web1.html в Internet Explorer. Оцініть результат.

2. Розташуєте кожну фразу в тілі документа на новому рядку. Завантажите файл web1.html в Internet Explorer. Оцініть результат.

3. Розташуєте текст в тілі документа по центру. Завантажити файл web1.html в Internet Explorer. Оціните результат.

4. Виділіть текст в тілі документа стилем заголовок 1-го рівня (тег <H1>). Завантажити файл web1.html в Internet Explorer. Оцініть результат.

Завдання 2. Відкрийте файл web1.html у БЛОКНОТІ й доповните тіло документа нижче вказаним фрагментом. Пропуски в тексті заповніть індивідуальною інформацією. Після редагування файл web1.html збережіть під іменем web2.html.

<HR>

<H2> Моє місто </H2>

<p>Я живу в Черкасах

<H3 ALIGN =Left> Моя робота </H3>

<p ALIGN = Left> Я вчуся в ……

<H4 ALIGN = Center> Мої захоплення </H4>

<p ALIGN = Center> Мої захоплення ‑ ……

<H5 ALIGN = Right> Мої колеги </H5>

<p ALIGN = Right> Мої колеги ….. </p>

<br>

<HR>

<H6 ALIGN = Center> Design by "…………" </H6>

1. Задайте колір ліній, їх ширину й висоту, вирівнювання по центру Web-Сторінки. Завантажити файл web2.html в Internet Explorer. Оцініть результат.

2. В розділі Мої захоплення додайте нумерований список з 5 пунктів. Нумерацію виконати римськими цифрами. Завантажити файл web2.html в Internet Explorer. Оцініть результат.

3. В розділі Мої колеги додайте маркірований список з 5 пунктів. В якості маркера використовувати не зафарбоване коло. Завантажити файл web2.html в Internet Explorer. Оцініть результат.

4. Доповніть опис списків спливаючими підказками. Завантажити файл web2.html в Internet Explorer. Оцініть результат.

Завдання 3. Відкрийте файл web2.html у БЛОКНОТІ й відредагуйте тіло документа. Після редагування файл web2.html збережете під іменем web3.html.

1. Задайте для кожного заголовка: колір шрифту, розмір (1..7), гарнітуру за своїм вибором. Завантажити файл web3.html в Internet Explorer. Оцініть результат.

2. В розділі Мої захоплення нумерований список з 5 пунктів отформатуйте курсивом (<I>). Завантажите файл web3.html в Internet Explorer. Оціните результат.

3. В розділі Мої колеги маркірований список з 5 пунктів отформатуйте жирним накресленням (<В>). Завантажити файл web3.html в Internet Explorer. Оцініть результат.

4. Розділ Design by виділіть підкресленням. Завантажити файл web3.html в Internet Explorer. Оцініть результат.

Завдання 4. Створіть Html-Документ наступного виду:

Ім'я файлу – web4.html

Заголовок документа <TITLE> - Ради по виготовленню сторінок

Тіло документа:

Цокання, мерехтіння, переміщення, прокручування…

Ці нові спецефекти всюди на Web.

Корисні поради!

- По можливості уникайте піктограми "В процесі виробництва";

- Не перевантажуйте сторінку великими зображеннями;

- Перевіряйте орфографічні помилки;

- Перевіряйте якнайчастіше посилання на сторінці.

Завантажите файл web4.html в Internet Explorer. Оціните результат.

4.1 Тіло документа оформити за допомогою контейнера <PRE>. Завантажити файл web4.html в Internet Explorer. Оцініть результат.

Завдання 5. Створіть документ, в якому текст буде організований за допомогою списків термінів і визначень.

В список внесіть наступні терміни і їх визначення:

Мережа Інтернет

Гіпертекст

Оглядач

<dl>

<dt>Мережа інтернет

<dd>…..

<dt>Гіпертекст

<dd> …..

<dt>Оглядач

<dd> …..

</dl>

Збережіть під іменем web5.html.

5.1 Виділите кожний термін червоним кольором, жирним накресленням. Завантажити файл web5.html в Internet Explorer. Оцініть результат.

Частина 3. Виконати контрольне завдання

1. Створити за допомогою програми БЛОКНОТ гіпертекстовий файл. Ім'я файлу — прізвище англійською мовою. Файл зберегти в особистій папці.

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

3. Встановити задані кольори для фону і тексту документа.

4. Написати назву лабораторної роботи заголовком першого рівня. Вирівняти по центру.

5. Написати мету лабораторної роботи найбільшим шрифтом. Вирівняти по лівому краю.

6. Створити список термінів і визначень для наступних понять:

1. WWW

2. HTML

3. Тег

7. Кожний термін і його визначення отформатувати різними кольорами і гарнітурами (Arial, Times, моноширинний шрифт). Сам термін повинен бути виведений напівжирним курсивом з підкресленням.

8. Створити нумерований список тегів з вкладеними маркірованими списками тегів блокового рівня та тегів для форматування тексту.

9. Написати формулу по центру (a+b)²=a²+2ab+b².

10. Написати формулу по правому краю c_ij=a_ij+b_ij.

11. Відокремити формули від основного тексту горизонтальною лінією заданої ширини, товщини і кольору.

Пред'явити роботу викладачеві (в браузері і Блокноті).

Оформити звіт. В звіт включити код і зображення створених Html-Сторінок

Лабораторна робота №2 Зображення. Посилання.

Мета роботи: Навчитися додавати зображення в документ і управляти атрибутами тегу <img>; Навчитися створювати нумеровані, маркіровані й багаторівневі списки; Навчитися створювати внутрішні й зовнішні посилання.

Контрольні питання

1. Який тег служить для вставки зображення в html-документ?

2. Де в тегу <img> вказується шлях до графічного файлу?

3. Як задати вирівнювання картинки щодо тексту?

4. Які списки існують в HTML?

5. Який тег бере участь в створенні як маркірованого так і нумерованого списків?

6. Як змінити порядок нумерації в нумерованому списку?

7. Як змінити вид маркера в маркірованому списку?

8. Що таке списки визначень?

9. Як задати якір для посилань в межах одного документа?

10. За що відповідає атрибут target у тегу <a>?.

Теоретичні відомості.

1. Вставка картинок в html-документ здійснюється з використанням тегу <img>. Тег можна записати вручну і потім за допомогою автодоповнення коду або за допомогою панелі Inspecrot вказати його атрибути. Можна також скористатися кнопкою Image на панелі інструментів HTML програми Htmlpad 2008.

Тег <img> має наступні атрибути (див. таблицю 2.1):

Таблиця 2.1 - Атрибути тегу <img>

Атрибут	Призначення
src	вказує на шлях до графічного файлу. Шляху можу бути відносними: photo.jpg, ../img/photo2.gif або абсолютними: http://mysite.com/pic/photo3.jpg
lowsrc	шлях до графічного файлу гіршої якості (і меншого розміру), який вантажиться перед повно розмірною картинкою
alt і title	альтернативний текст для зображення, використовується в якості спливаючої підказки або пошуковими системами
border	товщина рамки навколо зображення. Колір рамки визначається поточним кольором тексту
hspace	горизонтальний відступ від зображення до тексту
vspace	вертикальний відступ від зображення до тексту
height	висота зображення, якщо не задана, то відображається оригінальний розмір зображення, якщо зазначена до зображення масштабується
width	ширина зображення, якщо при вказівці ширини одночасно з висотою не зберігаються пропорції, то зображення спотворюється
align	визначає як рисунок буде вирівнюватися і обтікати текстом (див. рис. 2.1.1, рис. 2.1.2, рис. 2.1.3, рис. 2.1.4

<img src="Logo.jpg" > (рис. 2.1.1)	<img src="Logo.jpg" align="middle"> (рис. 2.1.2)
<img src="Logo.jpg" align="left"> (рис. 2.1.3)	<img src="Logo.jpg" align="top"> (рис. 2.1.4)

2. Посилання

Посилання або Гіперзв'язок (Link, Hyperlink) - фрагмент тексту або графіки на Html-сторінці, що посилається на іншу позицію в тому ж документі або на об'єкт в іншому документі (можливо навіть розташованому на іншому сервері).

Для створення посилань у мові HTML використовують тег <a> (anchor - якір). Атрибути, які використовуються в посилання наведено в таблиці 2.2.

Таблиця 2.2 - Атрибути тегу <а>

Атрибут	Призначення
href	задає адресу документа, на яку слід перейти. Є обов'язковим атрибутом для тегу <a>. Може містити як відносна, так і абсолютна адреса сторінки. А також протоколи відмінні від http, наприклад ftp, mailto, ed2 і т.д.
name	встановлює ім'я якоря, для визначення позиціонування посилання всередині документа.
target	встановлює ім'я вікна або фрейму, в якім буде завантажений документ. Можливі також варіанти використання: self для відкриття посилання в тому ж вікні та blank для відкриття посилання в новому вікні.
title	додає спливаючу підказку до тексту посилання

Лістинг 2.1 – Приклад використання посилань