sozdanie_web_stranits

Кафедра економічної кібернетики та інформаційних технологій

МЕТОДИЧНІ ВКАЗІВКИ

до виконання лабораторної роботи № 4

«Створення Web-сторінок»

з курсу «Технологія програмування та створення програмних продуктів»

(для студентів спеціальності 5.080406 «Експлуатація систем обробки інформації і прийняття рішень»)

Рекомендовано на засіданні кафедри ЕКтаІТ

Протокол № 6 від 07.02.05

Затверджено на засіданні методради ДонДТУ

Протокол № 5 від 18.02.05

Алчевськ

ДонДТУ

2005

УДК У.в6 Методичні вказівки до виконання лабораторної роботи № 4

«Створення Web-сторінок» з курсу «Технологія програмування та створення програмних продуктів» (для студентів спеціальності 5.080406 «Експлуатація систем обробки інформації й прийняття рішень») / Укл.: Є.Є.Бізянов, Н.В.Клочко, Л.А.Мотченко – Алчевськ:

ДонДТУ, 2005. – 23 с.

Розглянуто основи мови гіпертекстової розмітки HTML для створення Web–сторінок. Розглянуто приклади розробки, наведено приклади коду. Наведено завдання, вимоги до звіту, сформульований ряд питань для самоперевірки.

Укладачі:	Є.Є. Бізянов, доц.,
	Н.В. Клочко, асист.,
	Л.А. Мотченко, інж.
Відповідальний редактор	С.І. Зайцев, проф.
Відповідальний за випуск	Л.А. Мотченко, інж.

	ЗМІСТ
1 ОСНОВНІ ПОНЯТТЯ WEB....................................................................		4
1.1	Клієнти й сервери в Web ...................................................................	4
1.2	Структура Web-сайту.........................................................................	5
2 МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ HTML....................................		5
2.1	Основні поняття. Структура HTML-документа ..............................	5
2.2	Посилання...........................................................................................	8
2.3	Картинки.............................................................................................	9
2.4	Списки...............................................................................................	11
2.5 Таблиці..............................................................................................		13
2.6	Форматування документів HTML і тексту ....................................	16
ЗАВДАННЯ ДО ЛАБОРАТОРНОЇ РОБОТИ ........................................		19
ВИМОГИ ДО ЗВІТУ ................................................................................		20
КОНТРОЛЬНІ ПИТАННЯ.......................................................................		20
СПИСОК РЕКОМЕНДОВАНОЇ ЛІТЕРАТУРИ ....................................		21
Додаток А ..................................................................................................		22

3

Мета роботи: вивчити основи мови гіпертекстової розмітки HTML, навчитися розробляти Internet-сторінки.

1 ОСНОВНІ ПОНЯТТЯ WEB

У цей час всесвітня комп'ютерна мережа (World Wide Web) є, мабуть, самим популярним інформаційним середовищем. Початково Web-технологія була створена, як платформо-незалежна, що підвищує її потенціал відносно скорочення витрат на розгортання додатків і навчання персоналу.

Більшість Web-сайтів (Web-вузлів) побудовано на основі файлових систем, коли кожний документ зберігається в окремому файлі.

1.1 Клієнти й сервери в Web

Комп'ютери, що працюють в World Wide Web (WWW), можна розділити на дві категорії: клієнти й сервери. Клієнти (комп'ютери, на яких працюють програми-браузери, наприклад, Internet Explorer), запитують інформацію, а сервери (комп'ютери, на яких працюють серве-

рні програми, наприклад, Internet Information Service), надають її. Су-

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

Клієнт посилає серверу URL (Universal Resource Locator – уні-

версальний покажчик ресурсу). Кожний сервер володіє унікальним URL, кожний документ на сервері також має свій URL. URL звичайно виглядає так:

http://www.servername.com/website/doc.htm

протокол	ім’я домену	путь до документу
передачі

Web-сервер переглядає вміст URL і обробляє наступні категорії запитів:

− гіпертекстові документи – Web-сторінки, написані мовою

HTML (HyperText Markup Language – мова гіпертекстової розмітки); 4

−запити до додатків CGI (Common Gateway Interface – уза-

гальнений інтерфейс «шлюзів»);

−запити до сценаріїв ASP (Active Server Pages – активні сторінки сценаріїв).

1.2 Структура Web-сайту

Web-сайт (вузол в Internet) звичайно містить багато Web-сторінок. Web-сторінка – це документ HTML, відтворений браузером (browser) на екрані комп'ютера. Цей документ перебуває на сервері й видається клієнтові по його запиту. Сучасні Web-технології, що використовують динамічні сторінки (DHTML), сценарії, написані на VBScript і JavaScript, дозволяють більшу частину обчислень переміс-

тити із серверів на клієнтів.

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

Web-сторінки зв'язані одна з одною за допомогою гіперпосилань. Гіперпосилання являє собою текстову мітку з «прикріпленою» до неї адресою якої-небудь Web-сторінки. Гіперпосилання допомагають користувачеві здійснювати навігацію (переміщення по сторінках сайту).

2 МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ HTML

2.1 Основні поняття. Структура HTML-документа

HTML-сторінка містить спеціальні команди розмітки (tags – теги), укладені в кутові дужки (< і >). Теги мови HTML задають правила, за якими браузер виводить документ на екран: розміщення

5

тексту у вікні, подання графічних об'єктів (рисунків та картинок), а також вивід звукових, відео-кліпів і т.і.

Більшість тегів мови HTML, такі як <НТМL>, <TITLE>, <HEAD> або <FONT>, вимагають відповідну команду із символом </>. для їх закриття, тобто тегу кінця команди. Існують команди, наприклад, ?? (тег, що відокремлює друг від друга абзаци), для яких кінець команди ставити не обов'язково, а також команди типу <BR> (твердий перевід рядка) і <HR> (розділова лінія), для яких тег кінця команди не потрібний. Багато команд мають параметри, які називають атрибутами, які модифікують дію команди.

Будь-який HTML-документ може мати назву, укладену між те-

гами <title> і </title>.

Варто мати на увазі, що не всі теги сумісні із браузерами. Якщо браузер не розуміє тег, то він його просто пропускає.

Структура Web-сторінки виглядає так:

<html>

<head>

Заголовок

<title>

Назва

</title>

</head>

<body>

основний текст

</body>

</html>

Наберіть цей текст у Блокноті. Збережіть його у файлі, наприклад, з ім'ям Проба.htm. Потім знайдіть цей файл у Провіднику й зробіть щиглик на його значку ЛКМ. Ви побачите зображення Web-сторінки, подане на рисунку 1.

6

Рисунок 1 – Зовнішній вигляд Web-сторінки

Розберемося у тексті шаблона.

Теги <html> і </html> показують, що цей текст написаний на

HTML.

Теги <head> і </head> указують на заголовок сторінки.

Теги <title> і </title> виводять напис у рядку заголовка вікна браузера.

Теги <body> і </body> обмежують «тіло» Web-сторінки. Між ними пишеться основний текст. Атрибути тегу <body>:

−bgcolor="" Визначення кольору фона;

−leftmargin="" Параметр лівої границі поля;

−topmargin="" Параметр верхньої границі поля.

Для вказівки кольору фона можна використовувати кольори, подані в таблиці 1.

7

Таблиця 1 – Деякі стандартні кольори

Назва	Код	Колір
Black	#000000	Чорний
Maroon	#800000	Каштановий
Green	#008000	Зелений
Navy	#000080	Темно-синій
Purple	#800080	Фіолетовий
Gray	#808080	Сірий
Silver	#C0C0C0	Срібний
Red	#FF0000	Червоний
Yellow	#FFFF00	Жовтий
Blue	#0000FF	Синій
Aqua	#00FFFF	Морський
White	#FFFFFF	Білий

Повна розкладка 147 кольорів (назва + код RGB) знаходиться у файлі color.html.

Приклад:

<html>

<head>

<title>Моя домашня сторінка</title> </head>

<body bgcolor=Yellow>

Тут має бути розташований текст документа! </body> </html>

Наберіть цей текст у Блокноті. Збережіть його під ім'ям Приклад1.htm. Відкрийте файл клацанням ЛКМ. Корегуючи bgcolor, спостерігайте зміну кольору фону сторінки.

2.2 Посилання

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

8

<a href=”filename”>текст_посилання</a>

Тут filename – ім'я файлу або адреса Internet, на яку необхідно послатися, а текст_посилання – текст гіпертекстового посилання, що буде безпосередньо показаний у HTML-документі. Наприклад, гіпертекстове посилання:

<а href="my_work.htm">Views</a>

посилається на документ my_work.htm, утворюючи гіпертекстове посилання у вигляді слова Views. Якщо документ, що формує посилання, перебуває в іншій папці, що ставиться до Web-сайту, то подібне посилання називається відносним. Наприклад, посилання:

<а href=" photo/myphoto.htm”>Мій фотоальбом</а>

посилається на файл my_photo.htm, розташований у папці photo, яка вкладена у поточну, і утворює посилання у вигляді тексту Мій фотоальбом. Якщо є необхідність послатися на ресурс Internet, який розташований на вилученому сервері, або вказати в посиланні повне ім'я файлу та шлях до нього, використовують абсолютні посилання. Структура такого тегу аналогічна, тільки він формується на основі повного шляху до ресурсу у вигляді протоколу ://URL/шлях.

Наприклад:

<а href="http://www.aport.ru">Пошук в Інтернет</а>

2.3 Картинки

У документах HTML можуть використовуватися зображення й графіка. Для їхнього включення використовується тег <img>. Його атрибути:

−align="" Визначення властивостей вирівнювання:

1)align="absbottom" – вирівнювання тексту по нижньому краю рисунка;

2)align="absmiddle" – вирівнювання тексту по центру рисунка;

9

3)align="baseline" – вирівнювання тексту по базовій лінії рисунка;

4)align="bottom" – вирівнювання тексту по нижньому краю рисунка;

5)align="left" – зображення ліворуч, текст обтікає рисунок;

6)align="middle" – вирівнювання тексту по центру рисунка;

7)align="right" – зображення праворуч, текст обтікає рисунок;

8)align="texttop" – вирівнювання тільки тексту по верхньому краю;

9)align="top" – вирівнювання тексту по верхньому краю рисунка;

−alt="" Текст, що заміщає зображення;

−border="" Покажчик товщини рамки (у пікселях);

−height="" Покажчик висоти рисунка (у пікселях або від-

сотках);

−hspace="" Покажчик відстані до тексту (по горизонталі);

−src="" Покажчик місця розташування зображення;

−vspace="" Покажчик відстані до тексту (по вертикалі);

−width="" Покажчик ширини рисунка (у пікселях або відсо-

тках).

Для використання зображення як посилання, необхідно укласти тег <img> у тег <a></a>. Приклад:

<a href="file2.html"><img ....></a>

Допускається використання файлів у форматі GIF або JPG/JPEG, а для систем, що працюють у середовищі Windows, допускаються файли формату BMP. Наступний приклад демонструє вставку в документ GIF файлу:

<img src="pic.gif" width=45 height=50 alt="Photo">

10