
- •Модуль 1. Основи html. Лабораторна робота №1 html - основні поняття, структура документа
- •Основні теоретичні відомості.
- •1. Основні поняття
- •2. Правила запису тегів:
- •3. Структура документу
- •4. Визначення й оформлення функціональних розділів документа
- •5. Форматування html – документа Вирівнювання:
- •Індекси:
- •Параметри шрифту:
- •Існують наступні логічні стилі:
- •Існують наступні фізичні стилі:
- •Завдання до лабораторної роботи
- •Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки
- •Основні теоретичні відомості
- •1. Використання графічного зображення в якості фону
- •2. Формати графічних файлів для www
- •3. Вставка графічних зображень (елемент img та його атрибути)
- •4. Списки
- •Маркірований
- •Нумерований
- •Список визначень
- •Вкладені списки
- •Завдання до лабораторної роботи
- •Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання.
- •1. Основні теоретичні відомості.
- •2. Створення гіперпосилань
- •3. Види посилань
- •4. З'єднання з іншими документами
- •5. Звертання до певних розділів інших документів
- •6. Використання зображення як посилання
- •Завдання до лабораторної роботи
- •Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці.
- •Основні теоретичні відомості
- •1. Загальна структура таблиці
- •2. Завдання загальних параметрів таблиці
- •3. Форматування даних у таблиці, оформлення рамок (форматування рядків і комірок)
- •1. Вирівнювання даних у стовпцях таблиці
- •2. Завдання кольору рамок таблиці
- •3. Завдання фонового малюнка для таблиці
- •4. Структурування таблиці
- •Завдання до лабораторної роботи
- •Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Елемент завдання фреймів frameset та його атрибути
- •3. Вміст фреймів (елемент frame)
- •4. Вкладені фрейми
- •5. Інші атрибути елемента frameset
- •6. Атрибути елемента frame
- •2. Посилання й навігація
- •3. Плаваючі фрейми (елемент iframe)
- •Завдання до лабораторної роботи
- •Лабораторна робота №6 Карти зображень. Робота зі звуком.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Створення карти посилань в html
- •3. Створення карт посилань за допомогою редактора Dreamweaver
- •Робота з мультимедіа
- •Вбудовування звукових файлів в Web-сторінку
- •Фонові звуки
- •Рухомий текст
- •Завдання до лабораторної роботи
- •Модуль 2. Створення інтерактівності. Css. Dhtml. Лабораторна робота №7 Робота з формами
- •Основні теоретичні відомості
- •2. Створення елементів керування
- •Список, що розкривається:
- •Поле - список
- •Список із множинним вибором
- •Завдання до лабораторної роботи
- •Основні теоретичні відомості
- •1. Поняття про аркуші стилів
- •2. Поняття про внутрішні та зовнішні аркуші стилів
- •3. Вбудований стиль (атрибут style)
- •4. Заголовний стиль (елемент style)
- •6. Види селекторів
- •Стильові властивості
- •1. Значення властивостей
- •2. Властивості шрифтів
- •3. Властивості тексту
- •4. Властивості кольору і фону
- •Завдання до лабораторної роботи
- •Лабораторна робота №9 Зовнішні аркуші стилів . Стильові властивості
- •Основні теоретичні відомості
- •2. Звертання до зовнішнього аркуша стилів (елемент link)
- •3. Запис css-правил.
- •Стільові властивості (продовження)
- •1. Властивості блоку
- •2. Властивості списків
- •3. Інші групи стильових властивостей
- •4. Псевдокласи й псевдоелементи
- •Завдання до лабораторної роботи
- •Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти
- •Основні теоретичні відомості
- •1. Правила спадкування властивостей
- •2. Селектори нащадків
- •3. Каскади стилів
- •4. Пріоритети стилів
- •5. Шари й позиціонування елементів
- •6. Вирізання області (властивість clip)
- •Завдання до лабораторної роботи
- •Лабораторна робота № 11. Dhtml.
- •Завдання до лабораторної роботи
- •Вимоги до звіту та критерії оцінювання
- •Критерії оцінювання лабораторних робіт:
- •Критерії оцінювання індивідуальних робіт:
- •Для отримання заліку необхідно виконати 70% завдань і набрати не менше 145 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Фонові звуки
Команда BGSOUND задає фонові звуки або музику при перегляданні документа. Атрибут SRC= повинен указувати на URL відповідного звукового файлу (.WAV, .AU, MIDI). Атрибут LOOP= указує на частоту програвання звукового файлу.
Тільки для Internet Explorer.
Приклад:
<BGSOUND SRC="boing.wav" LOOP=5>Вы чутимете звук 5 разів.
Якщо LOOP=INFINITE (або LOOP=-1) те звук грається безперервно.
Для програвання звукових файлів комп'ютер користувача повинен бути обладнаний звуковою картою.
Відео кліпи
Використовуючи команду IMG можна вставити в документ відео-кліп (відео файл типу .avi - Audio Video Interleave). Для завдання відео фрагмента використовується атрибут DYNSRC=.
Тільки для Internet Explorer.
Приклад:
<IMG DYNSRC="The Earth.avi" SRC="The Earth.gif" WIDTH=46 HEIGHT=46 LOOP=INFINITE ALIGN=RIGHT>
В даному прикладі відео-кліп демонструватиметься безперервно: атрибут LOOP= має значення LOOP=INFINITE. Атрибути CONTROLS і START= управляють способом програвання кліпу (кліп може стартувати відразу після завантаження документа або після того, як користувач натисне на зображення задане атрибутом SRC=.
Використання відео-кліпів в документах поки істотно стримується швидкістю передачі даних по мережі (розмір файлу з кліпом як правило більше мегабайта) і тим, що далеко не всі засоби перегляду має можливість показувати відео-фрагменти або вимагають завантаження спеціальних пакетів для підтримки відео.
Рухомий текст
Команда MARQUEE дозволяє задати рухомий текст (ця команда підтримується поки тільки MS Internet Explorer).
Приклад:
<B><FONT COLOR=GREEN>
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200> Рухомий текст. </MARQUEE>
</FONT></B>
В даному прикладі текст Рухомий текст. рухається зліва направо із швидкістю 10 пікселів із затримкою 200 мілісекунд.
Для команди MARQUEES застосовуються атрибути ALIGN (LEFT або RIGHT), подібно до картинок (IMG), установка BACKGROUND COLOR, HEIGHT, WIDTH, і горизонтальні і вертикальні відступи.
Завдання до лабораторної роботи
Завдання №1.
1. Створити Web-сторінку map.html і зберегти її в папці MAP на диску D.
2. Створити ще три Web-сторінки, і зберегти їх в папці MAP.
3. У документі map.html зробити посилання у вигляді прямокутника на три інших HTML-документи.
Завдання №2.
1. Створити Web-сторінку map1.html і зберегти її в папці MAP на диску D.
2. Зробити у документі map1.html посилання у вигляді кола на два анімовані графічні зображення.
Завдання №3.
1. Створити в редакторі Dreamweaver документ foto.html. Вставити до документу foto.html будь-який малюнок. Зберегти foto.html в папці MAP на диску D.
2. Створити за допомогою редактору Dreamweaver чотири Web-сторінки, до яких вставте свої фотографії. Збережіть файли в папці MAP під іменами foto1.html, foto2.html, foto3.html і foto4.html відповідно.
3. В документі foto.html створіть карту посилань на документи foto1.html, foto2.html, foto3.html і foto4.html. Посилання зробіть у вигляді багатокутників.
Завдання №4.
Створіть в корені сайту теку SOUND і скопіюйте з теки WINDOWS\MEDIA в теку SOUND звукові файли ding.wav, ringout.wav, onestop.mid.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Вбудовування звукового файлу
з <u>повним</u> набором органів управління консолі
<p>
<embed src="sound/ding.wav" height="120" width="140" autostart="true"> звук </embed>
</p>
Вбудовування звукового файлу
з <u>обмеженим</u> набором органів управління консолі
<p>
<embed src="sound/ringout.wav" height="15" width="144" control = SMALLCONSOLE> маленька консоль </embed>
</p>
<а href="sound/onestop.mid">ЭTO посилання на звуковій файл </a> </body>
</body>
</html>
Перевірте виконання лістингу в різних браузерах.
При
просмотре этого документа в браузере
IE
для каждого из встроенных файлов будет
отображена консоль управления модуля
LiveAudio,
а в последнем случае, проигрыватель
звуковых файлов Win
Amp(рис.1).
Завдання №5.
Створіть документ у якому будуть відображені мультимедія можливості HTML. Перевірте його виконання у різних браузерах. Створить висновки.
Контрольні питання:
Які бувають варіанти карт зображень?
Назвіть основні параметри тегу AREA?
Яке призначення тегу map?
У чому переваги й недоліки карт зображень?
Якім чином можливо використання звуку у веб документі?