Лабораторний практикум
Практикум містить систематизований курс лабораторних робіт з розділу дисципліни “WEB-технології та WEB-дизайн”, що вивчає основи верстання web-документів засобами мови HTML і CSS для студентів спеціальності 122 “Комп’ютерні науки”.
Базовим програмним забезпеченням даного розділу курсу є Denwer і HTMLPad. Denwer - це набір дистрибутивів та програмна оболонка, що використовуються Web-розробниками для відладки сайтів без необхідності виходу до Інтернету, а HTMLPad – багатофункціональний редактор HTML з підсвічуванням синтаксису і попереднім переглядом документа. Обидва вибрані програмні продукти містять довідкову систему з основних тем курсу, що дозволяє удосконалити навички з пошуку інформації.
В лабораторному практикумі розглядаються такі питання, як: встановлення програмних продуктів, структура web-сервера, структура html-документа, основні теги форматування тексту, абзаців, зображень, гіперпосилань, списків, таблиць, форм, фреймів, карт зображень,підключення таблиць стилів до документа, можливості CSS по роботі з блоковими об'єктами, структура таблиці для прискорення створення стилів CSS, можливості роботи зі списками за допомогою CSS, приклади верстання веб-сторінок та ін.
До кожної лабораторної роботи додається архів з необхідними для виконання робіт даними.
Після вивчення курсу лабораторних робіт студентам надається завдання для самостійної роботи: створення статичного сайту із застосуванням отриманих знань. У ДОДАТКУ Г наведено частину варіантів завдань (повний перелік надає викладач).
Вимоги до апаратного і програмного забезпечення:
Для виконання завдань лабораторних робіт необхідно мати комп'ютер, який має оперативну пам'ять не менше 256 Кб і жорсткий диск, з вільним об'ємом не менше 1 Гб. Операційна система – Windows XP і більш пізні версії, включаючи повну сумісність програмного забезпечення з Windows Vista.
1 ЛАБОРАТОРНА РОБОТА №1
| Тема: | Web-сервер Denwer. Введення в HTML |
| Мета: | Навчитися встановлювати Denwer, створювати власні домени і піддомени в програмі Denwer. Освоїти основні принципи роботи з програмою HTMLPad; Навчитися застосовувати теги HTML для структурування сторінки і форматування тексту. |
| Час: | 2 год. |
1.1 Теоретичні відомості
1.1.1 Denwer. Встановлення програмного продукту.
Програма Denwer призначена для створення власних доменів на локальному комп'ютері, що дозволяє створювати сайти і тестувати їх працездатність, не маючи доступу до Інтернету.
Для встановлення програмного продукту Denwer необхідно викачати дистрибутив з сайту http://denwer.ru і запустити установний файл. Під час встановлення необхідно вибрати наступні опції:
встановлення здійснити в папку C:\WebServer, а не в звичну папку C:\Program Files;
вибрати варіант запуску вручну, а не як службу.
Після встановлення Денвера його слід запустити вручну і перевірити працездатність. Для цього в браузері необхідно набрати адресу тестової сторінки http://localhost/denwer/. В разі успішного встановлення на екрані з'явиться сторінка «Ура заработало!».
1.1.2 Створення власного домену на локальному комп'ютері
Після встановлення програми всі необхідні для її працездатності файли розташовуються в папці C:\WebServers. Завдяки цьому папку можна переносити з комп'ютера на комп'ютер, не порушуючи при цьому працездатність сервера.
Для створення власного домену в межах локального комп'ютера досить додати нову папку з ім'ям домену в каталог C:\WebServers\home. Наприклад myserver.ru (див. рис.1.1).
Файли, які повинні знаходитися на цьому сервері необхідно помістити в папку C:\WebServers\home\myserver.ru\www. При створенні власного домену слід враховувати неприпустимість використання в імені домену пробілів, букв кирилиці і спеціальних символів.
Рис.1.1. Розміщення доменів на Denwer
Для перевірки працездатності нового домену слід:
а) перевантажити Denwer (зробити це можна за допомогою ярлика Restart servers в меню Пуск або за допомогою файлу запуску C:\WebServers\Denwer\Restart.exe);
б) відкрити в браузері сторінку з адресою нового домена (наприклад myserver.ru). При цьому в разі успішного запуску сервера на екрані відобразиться список файлів або зміст файлу з ім'ям index. На більшості сайтів при зазначені шляху до домену або до папки відображується файл index.html або index.php або вміст каталога (у випадку якщо індексний файл відсутній).
Варіант коли новий піддомен не відображується в браузері:
виконати команду ping на новий домен (ping myserver.ru). Якщо відповідь отримана, це означає що Denwer з новими налаштуваннями успішно запущений. Якщо відповіді немає, то можливо а) Денвер не був перезапущений з моменту додавання нового домену; б) ім'я теки відрізняється від імені пінгуємого домену; в) всередині домену не створена папка www.
якщо команда ping проходить, то можливо в браузері використовується проксі-сервер для доступу до Інтернету (див. рис.1.2). Наприклад в браузереі Internet Explorer необхідно додати ваш домен в список винятків. Для цього необхідно зайти в Сервис Свойства обозревателя Подключение Настройка сети Дополнительно... у полі Исключения вказати адресу вашого нового домену.
ще раз перевірте що ім'я домену містить лише латинські літери, цифри та не містить пробілів.
Рис.1.2. Додавання винятків для проксі-сервера
1.1.3 Інтерфейс програми HTML Pad
Після встановлення сервера і створення власного домену можна приступати до створення сайту. Сайти можна умовно розділити на статичні (будуть доступні користувачеві в тому вигляді і з тією інформацією якою вони були створені) і динамічні (наповнення і зовнішній вигляд сторінок може залежати від ряду умов: облікового запису користувача, часу та інше).
Статичні сайти є набором html-сторінок, а динамічні - набір php-сторінок. Статичний сайт повинен містити html-сторінки і картинки розташовані в одній теці. Створювати такі сторінки можна або в блокноті, або в спеціалізованих програмах. Однією з таких програм є програма HTMLPad. В порівнянні з блокнотом в програмі є підсвічування синтаксису, автоматичне доповнення, панель властивостей, попередній перегляд та інше.
На рис.1.3 відображують основні елементи інтерфейсу вікна програми “HTMLPad 2008”. Робота з файлами (їх створення, збереження, відкриття) властива всім додаткам Windows, з тією лише різницею, що при створенні нового документа, необхідно вибирати із списку саме HTML Page.
Інспектор атрибутів тега
Попередній перегляд
Вихідний код документа
Вкладки режимів перегляду
Рис.1.3. Інтерфейс програми “ HTML Pad 2008”
Після створення нової сторінки основні теги можна додавати вручну, або через пункти меню Insert (Вставити) і Format (Форматування), або за допомогою кнопок на панелях інструментів HTML, HTML Formatting та HTML Forms.
Перемикатися між режимом редагування і режимом попереднього перегляду можна також за допомогою використання вкладок перемикання режимів перегляду (див. рис.1.3).
1.1.4 Структура HTML-документа
Складання сторінок для сайту базується на мові HTML (від англ. Hypertext Markup Language – мова розмітки гіпертексту). Всі сторінки сайту мають розширення .htm або.html.
Основною структурною одиницею мови є тег з його атрибутами. Тег являє собою розміщені в трикутних дужках інструкції мови, які повідомляють, якими властивостями повинен володіти той або інший фрагмент тексту на сторінці. Більшість тегів є парними: містять як відкриваючий, так і закриваючий тег (див. рис.1.4):
Рис.1.4. Структура тега
С
лід зазначити, що написання значень атрибутів потрібно писати в подвійних лапках.
Опис всього документа будується з тегів. Весь документ має бути розміщений в головному тегу (див. рис.1.5).
Важлива частина документу...
... може містити безліч атрибутів, які впливають на відображення всього документа вцілому.
Таблиця 1.1
Основні атрибути тега
| Назва атрибуту | Призначення атрибуту |
| alink | колір активного посилання (колір задається шістнадцятиричним числом або константою, наприклад червоний: red або #ff0000) |
| background | фоновий рисунок на веб-сторінці |
| bgcolor | колір фону веб-сторінки |
| topmargin(leftmargin, bottommargin) | відступ від верхнього (лівого, нижнього) краю вікна браузера до контента |
| link | колір посилань на веб-сторінці |
| text | колір тексту в документі |
| vlink | колір відвіданих посилань |
Наприклад, наступний фрагмент html-кода задає для всього документа колір тексту зелений, колір посилань чорний, колір фону жовтий. Лістинг 1.1.
Лістинг 1.1 – Приклад використання атрибутів тега
1.1.6 Основні теги форматування тексту
Таблиця 1.2
Теги форматування тексту
| Назва тега | Призначення тега, атрибути |
| 1 | 2 |
| ... або ... | встановлює жирне зображення шрифту |
| ... | встановлює курсивне зображення шрифту |
| ... | встановлює підкреслене зображення шрифту |
| | встановлює закреслене зображення шрифту |
| < cite>... | позначає текст як цитату, зазвичай відображується курсивом |
1 2 3 4 5 6 7