sozdanie_web_stranits
.pdfКафедра економічної кібернетики та інформаційних технологій
МЕТОДИЧНІ ВКАЗІВКИ
до виконання лабораторної роботи № 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