
- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
2. Створення гіперпосилань
Посилання - це основа Internet, головні його принципи і, відповідно, найважливіша частина web-сторінок.
Посилання складається з двох частин: вказівника та адресної частини (URL). Вказівник – це те, що видно на Web-сторінці – покажчик посилання (може бути слово, група слів або зображення). Адресна частина посилання вказує адресу (URL-адреса), з якої браузер буде завантажувати документ.
Зовнішній вигляд посилання залежить від його типу, способів створення й установок браузера. Посилання можуть вести на іншу сторінку, на картинку (звичайно не показують велику картинку, а показують її зменшену копію, клацнувши на яку можна побачити велике зображення у високій якості), на будь-який файл, на адресу електронної пошти.
Для створення гіперпосилання на іншу сторінку використовується наступний тег:
<A href="URL"> Назва посилання </A>,
де
літера А у тегу <A href> означає вказівник (anchor), а href – «гіпертекстове посилання»,
URL (уніфікований локатор ресурсів, адреса будь-якого файлу в Інтернеті, наприклад, http://ic.vrn.ru/~ppmagnum - адреса (url) моєї сторінки - адреса файлу, куди, клацнувши на посилання, ви перейдете,
назва посилання - текст самого посилання, наприклад "домашня сторінка Іванова Івана".
Для створення посилання на e-mail у якості url вставте mailto: адресу електронної пошти. Наприклад, mailto: vvv-magnum@geocities.com. Клацнувши на таке посилання ви відкриєте вікно своєї поштової програми із уже записаною адресою. Залишиться тільки написати лист і відправити.
Гіперпосилання може бути у вигляді графічного зображення. Для створення такого посилання замість назви посилання необхідно вставити тег <IMS src="ім'я файлу" >. Таким чином формат графічного гіперпосилання має такий вигляд:
<A href="URL"> <IMS src="ім'я файлу" > </A>
3. Види посилань
Існує два види посилань:
абсолютні ;
відносні.
Тег <Base> служить для вказівки повної базової URL-адреси документа (відносне посилання продовжує працювати, якщо документ переноситься в інший каталог). Цей тег має один обов'язковий параметр href, після якого вказується повна адреса, тобто Де шукати браузеру даний документ.
Тег <Link> підтримує логічний зв'язок між документами (указує на зв'язок документа, що містить даний тег і інший документ або об'єкта). Він складається з URL-fадреси й параметрів, що конкретизують відношення документів.
4. З'єднання з іншими документами
Відносні посилання – використовують відносне ім'я файлу (відносний шлях), вони не залежать від місця розташування папки яка містить сайт.
Головна перевага HTML складається в його здатності зв'язуватися з іншими документами. Браузер виділяє (звичайно кольором і/або підкресленням) ключові слова, що є гіпертекстовими посиланнями (гіперпосиланнями). Описується посилання на інший документ у такий спосіб:
<A HREF="ім'я файлу"> Текст - звернення до іншого документу </A>.
Наведемо приклади гіпертекстових посилань:
1) гіпертекстове посилання в тій же директорії:
<a href=Doc2.htm> Лабораторна робота№2 </a>
Тут ключове слово «Лабораторна робота №2» є гіперпосиланням на файл Doc2.htm, що лежить у тій же директорії
2) посилання в іншій директорії:
<a href=C:/WINDOWS/clock.avi> годинники </a>
Тут слово «годинник» є гіперпосиланням на файл clock.avi, що лежить в іншій директорії. Ви можете посилатися на документ, що лежить у будь-якій директорії, описавши до нього повний шлях.
Абсолютні посилання - використовують абсолютне ім'я файлу (повний шлях). Абсолютні посилання залежать від переміщення файлів на носії.
В URL входить, крім назви файлу й директорії, мережева адреса машини й метод доступу до файлу. За допомогою URL можна запускати вилучені програми, і передавати їм значення.
Приклади:
1) <a href=\\COMP2\games\doc3.htm> Любов </a>;
2) <A Href="http://www.simtel.ru/news/snews.http">News</A>;
3) <A Href="aaa.html">AAA</A>.
Перший і другий - це повний URL, а третій - частковий. Частковий URL вказує на документ який перебуває на тім же сервері й у тій же директорії, що й документ у якому зустрічається це посилання.