Міністерство освіти і науки україни
Донецький Національний Технічний Університет
Методичні вказівки
до виконання лабораторних робіт та самостійної роботи по курсу
"Web-технології"
Донецьк
2002
Міністерство освіти І науки україни
Донецький Національний Технічний Університет
Методичні вказівки
до виконання лабораторних робіт та самостійної роботи по курсу
"Web-технології"
Затверджено
на засіданні кафедри ЕОМ
протокол № 12 від 01.07.2002г.
Донецьк 2002
Учбове видання
Методичні вказівки
до виконання лабораторних робіт та самостійної роботи по курсу
"Web-технології"
(для студентів спеціальності 7.091502)
Складачі: Анопрієнко Олександр Якович
Кривошеєв Сергій Васильович
УДК 519.768.2
Методичні вказівки до виконання лабораторних робіт та самостійної роботи по курсу "Web-технології" (для студентів спеціальності 7.091502). Складачі: О.Я. Анопрієнко, С.В. Кривошеєв, В.М. - Донецьк: ДонНТУ, 2002 р.- 36 с.
Метою даних лабораторних робіт є вивчення методів та засобів сучасних Web-технологій. Методичні вказівки до виконання лабораторних робіт та самостійної роботи містять варіанти завдань, приклади їх виконання, а також необхідний пояснювальний матеріал.
Складачі: к.т.н., доц. Анопрієнко О.Я.,
асистент Кривошеєв С. В.
Відповідальний
за випуск: д.т.н., проф. Святний В.А.
Рецензент: д.т.н., проф. Башков Є.О.
ЗМІСТ
Стор.
|
Лабораторна робота №1 Основи HTML: Розробка текстового варіанта персональної сторінки
|
6 |
|
Лабораторна робота №2 Шаблони і посилання: Розробка мультимовного варіанту персональних сторінок
|
14 |
|
Лабораторна робота №3 Графіка в Web-технологіях: Розробка фотографічного матеріалу для персональних сторінок
|
18 |
|
Лабораторна робота №4 Анімація в Web-технологіях: Розробка анімованої графіки
|
25 |
|
Лабораторна робота №5 Мова JavaScrіpt: Використання вбудованих об'єктів
|
28 |
|
Лабораторна робота №6 Динамічний HTML із застосуванням мови JavaScrіpt: Програмування графічних ефектів
|
31 |
|
Лабораторна робота № 7
Форми в HTML: Програмування інтерактивних додатків
|
33 |
Лабораторна робота № 1
Основи HTML:
Розробка текстового варіанта
персональної сторінки
Мета роботи: вивчити і практично оволодіти сучасними технологіями гіпертекстової розмітки на основі використання HTML, оформити та розташувати на сервері текстовий варіант персональної Web-сторінки.
Історія і термінологія
Мова гіпертекстової розмітки HTML (Hyper Text Markup Language) є реалізацією стандартної узагальненої мови розмітки SGML (Standard Generalіzed Markup Language), яка була розроблена для полегшення обміну документами. SGML складається з протоколів різних типів документів, що розмічаються логічними мітками типу "назва документа", "назва роздягнула", "виноска" і т.д.
Набір правил по застосуванню SGML до спеціальної мови розмітки називається визначенням типу документа DTD (Document Type Defіnіtіon). HTML має деякі елементи DTD для представлення документів різних типів.
Основним у даному курсі є MIME-тип text/html (MІME - Multіpurpose Іnternet Maіl Extensіons - багатоцільові поштові розширення Інтернет). MIME-поширення з’явилось як спосіб вставки бінарних файлів у поштові повідомлення, але зараз цим його роль не обмежується. Коли сервер посилає по мережі інформацію на клієнтський броузер, він першою справою передає клієнту дані про те, що це за інформація, використовуючи спосіб, називаний MIME-поширення. Броузер на основі цього приймає рішення про те, якими засобами обробляти посилку. Він може вибрати зовнішні чи вбудовані засоби для її обробки. MIME-поширення складається з головного типу і підтипу, у нашому випадку тип: text, а підтип: html.
Термін "гіпертекст" запропонував і описав у 1965 році експерт по комп'ютерах Тед Нельсон (Ted Nelson). Його пропозиція була в розбивці всієї інформації на концептуальні блоки.
Ідеї Нельсона були реалізовані з появою World Wіde Web (Всесвітньої павутини) - системи збереження і перегляду гіпертекстової інформації в Інтернету, створеної в 1991 році Тімом Бернерсом Лі (Tіm Berners Lee) з CERN'а (Centre European pour la Recherche Nucleare).
У жовтні 1994 року був заснований World Wіde Web Consortіum (W3C) - некомерційна організація, очолювана творцем WWW і об'єднуюча близько 170 комерційних і наукових структур.
Введення в HTML
Мова HTML являє собою сукупність текстової інформації і керуючих слів (тегов), ув'язнених у дужки <...>. Крім форматуючих тегов, існують теги, що реалізують вставку малюнків і інших елементів у документ, або є посиланнями на інші документи, забезпечують діалог з користувачем. Мова HTML використовується для створення WEB-сторінок, що є основним джерелом інформації в глобальній мережі Інтернет. Для передачі інформації у форматі HTML використовується прикладний протокол HTTP (Hyper Text Transfer Protocol - протокол передачі гіпертексту), що базується на стеку протоколів TCP/ІP. Реалізація протоколу HTTP являє собою послідовність команд, що дозволяє одержати із сервера HTML документ.
HTTP ґрунтується на парадигмі запитів/відповідей. Запитуюча програма (звичайно вона називається клієнт) установлює зв'язок з обслуговуючої програмою-одержувачем (звичайно називається сервер) і надсилає запит серверу в наступній формі: метод запиту, URІ, версія протоколу, за якою йде MIME-подібне повідомлення, що містить керуючу інформацію запиту, інформацію про клієнта і, може бути, тіло повідомлення. Сервер відповідає своїм повідомленням, що містить рядок статусу (включаючи версію протоколу і код статусу - успіх чи помилка), за якою йде MIME-подібне повідомлення, що включає в себе інформацію про сервер, метаінформацію про зміст відповіді, і, імовірно, саме тіло відповіді. Слід зазначити, що одна програма може бути одночасно і клієнтом і сервером. Використання цих термінів у даному тексті відноситься тільки до ролі, яку виконує програма протягом даного конкретного сеансу зв'язку, а не до загальних функцій програми.
В Іnternet комунікації звичайно ґрунтуються на TCP/ІP протоколах. Для HTTP номер порту TCP за замовчуванням 80, але також можуть бути використані й іншого номера портів.
Для більшості додатків сеанс зв'язку відкривається клієнтом для кожного запиту і закривається сервером після закінчення відповіді на запит. Проте, це не є специфічною особливістю протоколу. І клієнт, і сервер повинні мати можливість закривати сеанс зв'язку, наприклад, у результаті якої-небудь дії користувача. У будь-якому випадку, розрив зв'язку, ініційований будь-якою стороною, перериває поточний запит, незалежно від його статусу.
Примітка
У нижчеподаних таблицях використовується ряд позначень:
Знак "?" припускає підстановку відповідного целочисленного значення.
Знак "|" позначає вибір одного з запропонованих варіантів.
Знак "*" позначає підстановку використовуваного шрифту.
Знак "$" позначає підстановку кольору (RGB).
БАЗИСНІ ЕЛЕМЕНТИ HTML
|
Тип документу |
<HTML></HTML> |
(початок і кінець документ) |
|
Заголовок документу |
<HEAD></HEAD> |
(опис документа, наприклад його ім'я) |
|
Им’я документу |
<TITLE></TITLE> |
(повинне бути в заголовку) |
|
Тіло |
<BODY></BODY> |
(текст та інші інформаційні матеріали сторінки) |
|
Заголовок |
<H?></H?> |
(стандарт визначає 6 рівнів) |
|
Заголовок з вирівнюванням |
<H? ALIGN=LEFT|CENTER|RIGHT></H?> |
|
|
Секція |
<DIV></DIV> |
|
|
Секція з вирівнюванням |
<DIV ALIGN=LEFT|RIGHT|CENTER></DIV> |
|
|
Цитата |
<BLOCKQUOTE></BLOCKQUOTE> |
(звичайно виділяється відступом) |
|
Додаткове виділення |
<STRONG></STRONG> |
(звичайно зображується жирним шрифтом) |
|
Код |
<CODE></CODE> |
(для листингов кода) |
|
Адреса автора |
<ADDRESS></ADDRESS> |
|
|
Великий шрифт |
<BIG></BIG> |
|
|
Маленький шрифт |
<SMALL></SMALL> |
|
|
Жирний |
<B></B> |
|
|
Курсив |
<I></I> |
|
|
Підкреслений |
<U></U> |
(часто не підтримується) |
|
Верхній індекс |
<SUB></SUB> |
|
|
Нижній індекс |
<SUP></SUP> |
|
|
Друкарська машинка |
<TT></TT> |
(зображується як шрифт фіксованої ширини)) |
|
Форматированный |
<PRE></PRE> |
(зберегти формат тексту як є) |
|
Ширина |
<PRE WIDTH=?></PRE> |
(у символах) |
|
Центрувати |
<CENTER></CENTER> |
(всі елементи) |
|
Миготливий |
<BLINK></BLINK> |
(осміяний елемент) |
|
Розмір шрифту |
<FONT SIZE=?></FONT> |
(від 1 до 7) |
|
Змінити розмір шрифту |
<FONT SIZE="+|-?"></FONT> |
|
|
Базовий розмір шрифту |
<BASEFONT SIZE=?> |
(від 1 до 7; за замовчуванням 3) |
|
Колір шрифту |
<FONT COLOR="#$$$$$$"></FONT> |
|
|
Вибір шрифту |
<FONT FACE="***"></FONT> |
|
Щоб перевірити створену Web-сторінку, бажано використовувати для тестування 2 найбільш розповсюджених броузера: Іnternet Explorer та Opera. Орієнтація тільки на один із броузеров може привести до некоректної роботи Web-сторінки в іншому.