- •Тема I. Основи будови, функціонування та сервіси глобальної комп’ютерної мережі Інтернет
- •1. Загальна характеристика та етапи розвитку глобальної комп’ютерної мережі Інтернет
- •2. Інтернет з'єднання
- •2.1. Протоколи комп’ютерних мереж в Інтернеті
- •2.2. Локальна мережа (Local-area networks - laNs)
- •2.3. Глобальна мережа (Wide-area networks - waNs)
- •2.4. Віртуальні приватні мережі (Virtual private network - vpn)
- •2.4.1. Переваги використання віртуальних приватних мереж
- •3. Служби глобальної комп’ютерної мережі Інтернет
- •4. Мережні дані та класифікація комп’ютерних мереж
- •5. Мережні пристрої
- •5.1. Network interface card (nic) – мережний адаптер
- •5.2. Установка nic та модему
- •5.3. Мережні топології
- •6. Короткий огляд високошвидкісного і комутованого підключення
- •7. Опис tcp/ip. Тестування підключення за допомогою утиліти ping
- •Список рекомендованих джерел інформації
- •1. Мережні моделі
- •1.1. Використання рівнів для опису передачі інформації
- •1.2. Модель osi
- •1.4. Однорангова модель взаємодії (peer-to-peer communications)
- •1.5. Модель tcp/ip
- •1.6. Складові процесу інкапсуляції
- •2. Система адресації комп’ютерів у мережі Інтернет
- •3. Ідентифікація комп’ютерів у мережі Інтернет за допомогою символьних імен - dns
- •Список рекомендованих джерел інформації
- •Тема III. Основи Web-дизайну
- •1.1. Концептуальна модель web
- •1.2. Характеристики World Wide Web
- •1.3. Організації www
- •2. Елементи Web - документів
- •2.1. Етапи розвитку мови html
- •2.2. Інші мови розмітки
- •2.3. Ієрархія dom
- •2.4. Структура html документа
- •2.5. Елементи, дескриптори і атрибути
- •2.6. Дескриптори, що визначають структуру html-документа
- •2.7. Включення зображень в Web-сторінку
- •2.8. Гіпертекстові посилання
- •Зовнішній вид фрагмента коду html у вікні навігатора
- •2.9. Таблиці
- •2.10. Списки в html документі
- •2.11. Фрейми
- •Список рекомендованих джерел інформації
- •Тема III. Основи Web-дизайну
- •3.6. Поддержка стилей
- •3.6.1 Встраиваемые стили
- •3.6.2 Включаемые стили
- •3.6.3 Связываемые стили
- •3.6.4. Импортируемые стили и правило @import
- •4.1. Формати графічних файлів Web-сторінок
- •4.1.1. Формат jpeg
- •4.1.2. Формат gif
- •4.1.4. Який формат краще
- •4.2. Звук в документах html
- •5. Додатки cgi
- •5.1. Створення форм
- •5.1.1. Опис форми
- •5.1.2. Створення органів керування для форми
- •5.1.3. Приклад документа html із формою
- •5.2. Передача даних програмі cgi
- •5.2.1. Метод get
- •5.2.2. Метод post
- •5.2.3. Порівняння - get і post
- •Список рекомендованих джерел інформації
- •Лабораторна робота №1
- •2. Вміти використовувати мережні команди для одержання інформації про топологію та конфігурацію мережі, мережне обладнання робочих станцій та працездатність комп’ютерної мережі.
- •1. Визначення апаратного забезпечення робочої станції
- •2. Вивчення роботи мережних команд в режимі емуляції dos (командному рядку).
- •Net send 15-09 Як справи, друже. Як працює мережа?
- •3. Дослідження підключення локальної мережі класу до глобальної мережі Internet.
- •Ping.Exe -t ім’я робочої станції викладача
- •Ping.Exe -l розмір пакету ім’я робочої станції
- •Ping.Exe -w інтервал ім’я робочої станції
- •4. Висновки за результатами лабораторної роботи
- •Лабораторна робота №2
- •2. Набуття навичок використання служби електронної пошти Інтернет із Web-інтерфейсом.
- •1. Створення облікового запису у програмі поштового клієнту ms Outlook Express:
- •2. Відправка повідомлень у програмі електронної пошти ms Outlook Express:
- •3. Прийом повідомлень у програмі електронної пошти ms Outlook Express:
- •4. Створення ієрархії папок для повідомлень.
- •5. Включення у повідомлення різних об’єктів.
- •6. Перегляд і збереження вкладених файлів.
- •7. Робота з адресною книгою.
- •8. Відправка кореспонденції із використанням Адресної книги.
- •9. Створення власного підпису.
- •10. Створення електронних листів із використанням вбудованих шаблонів.
- •11. Відповідь на електронні листи.
- •12. Робота з електронною поштою Web-базування:
- •13. Висновки за результатами лабораторної роботи.
- •Лабораторна робота №2
- •2. Набуття навичок використання служби електронної пошти Інтернет із Web-інтерфейсом.
- •1. Створення облікового запису у програмі поштового клієнту ms Outlook Express:
- •2. Відправка повідомлень у програмі електронної пошти ms Outlook Express:
- •3. Прийом повідомлень у програмі електронної пошти ms Outlook Express:
- •4. Створення ієрархії папок для повідомлень.
- •5. Включення у повідомлення різних об’єктів.
- •6. Перегляд і збереження вкладених файлів.
- •7. Робота з адресною книгою.
- •8. Відправка кореспонденції із використанням Адресної книги.
- •9. Створення власного підпису.
- •10. Створення електронних листів із використанням вбудованих шаблонів.
- •11. Відповідь на електронні листи.
- •12. Робота з електронною поштою Web-базування:
- •13. Висновки за результатами лабораторної роботи.
- •Лабораторна робота №4
- •Вивчити структуру побудови та елементи html-документа.
- •Вивчити застосування непарних міток та Esc-послідовностей у html-документах.
- •Вивчити засоби та дескриптори фізичного форматування тексту в html-документах.
- •Завдання
- •Висновки за результатами роботи
- •Контрольні питання
- •Список рекомендованої літератури
2.6. Дескриптори, що визначають структуру html-документа
Структура HTML-документа дуже проста. Спеціальні дескриптори визначають заголовок і тіло документа, інші дескриптори додаються для забезпечення необхідних функцій. Якщо який-небудь із цих дескрипторів відсутній або якщо порядок слідування дескрипторів порушений, вважається, що документ складений некоректно.
Розділи документів формуються за допомогою пар HTML-дескрипторів. HTML-документ починається з відкриваючого дескриптора <html> і закінчується закриваючим дескриптором </html>. Розділ заголовка формують відкриваючим дескриптором <head> і закриваючим дескриптором </head>. У контейнері заголовка можуть міститися назва документа, JavaScript-код, метаінформація й визначення стилів.
Основна частина HTML-файлу - тіло документа - формується за допомогою пари дескрипторів <body> і </body>. Між цими дескрипторами - тілі документа - містяться дані, які призначені для відображення у вікні Web-оглядача користувача.
Наведений нижче фрагмент коду описує базову структуру, або шаблон HTML-документа.
<html>
<head>
<title> …………… </title>
</head>
<body>
……………
</body>
</html>
До складу заголовка HTML-документа включається така інформація:
-
<title> назва Web-сторінки</title>. Назва - це послідовність символів, що є коротким описом HTML-документа. Назва відображається в заголовку вікна оглядача й не включається в тілі документа. Назва документа також відображається як опис закладки, яка зроблена користувачем. Елемент <title> є єдиним з обов'язкових елементів у заголовку HTML-документа.
-
<script type="text/javascript"> сценарій </script>. Набір інструкцій написаних мовою JavaScript (або VBScript), які інтерпретуються Web-оглядачем, і який являє собою сценарій або послідовність програмних дій над певним об’єктом. JavaScript - це об'єктно-орієнтована мова програмування, яка дозволяє реалізувати додаткові інтерактивні можливості HTML-документа. Сценарій є не обов'язковим елементом [4].
-
<style type="text/css"> Визначення стилю </style>. Цей елемент включається в заголовок у тому випадку, якщо при створенні документа використовуються каскадні таблиці стилів, що дозволяють розділити вміст Web-сторінки і її подання.
-
<meta name="…" content="…">. У HTML дескриптор <meta> є непарним () і надає інформацію про вміст документа й області, до якої він відноситься. Атрибут name дескриптора meta визначає ім'я фрагмента метаданих, а атрибут content - значення цього фрагмента, наприклад:
-
значення description атрибута name задає опис документа, призначений для пошукових серверів:
<meta name="description" content="це опис Web-сторінки">
-
значення keywords атрибута name дозволяє задати список ключових слів. Наприклад, слово «ріелтер» запитується в таких варіантах його написання: «ріелтор», «реєлтер», «реєлтор», «рєєлтор», «ріелтр», «rielter», «rieltor», «hs'knjh» («рієлтор» в англійській розкладці) тощо.
<meta name="keywords" content="ключові слова, розділяються, комами, у якості, ключових, можуть, використовуватися, слова або фрази">
-
значення refresh атрибута http-equiv вказує на те, що документ повинен періодично оновлюватися в окні (у наведеному нижче прикладі документ буде повторно завантажуватися кожні 10 секунд)
<meta http-equiv=" refresh" content="10;url=new URL" />
-
значення expires атрибута name визначає дату, після якої вміст документа вважається застарілим
<meta http-equiv=" refresh" content="thu, 16 DEC 1999 00:04:00 PST">
Нижче наведено приклад застосування дескриптора meta у заголовку документа:
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
</head>
У тіло HTML-документа включається інформація, яка повинна бути представлена користувачеві. Звичайно вміст тіла документа суттєво перевищує вміст заголовка. Типи даних, що містяться у тілі документа, перераховані нижче.
Текст. Текст у складі документа форматується за допомогою спеціальних дескрипторів.
Зображення. До складу Web-сторінки можуть бути включені яскраво оформлені заголовки, рисунки й фотографії, що відображають уміст документа, кнопки, що спрощують навігацію, а також інші типи зображень.
Гіпертекстові посилання. Дозволяють користувачеві здійснювати навігацію в межах Web-вузла, а також переходити до документів, розміщених на інших вузлах.
Засоби відтворення мультимедія-інформації. Shockwave, SWF, Java-аплети та інтерактивне відео управляються елементами, що містяться в тілі HTML-документа.