
- •Модуль 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. Завдання загальних параметрів таблиці
За допомогою властивостей таблиці можна призначити розмір шрифту, його гарнітуру й інші.
Серед численних властивостей таблиці виділяють загальні властивості таблиць і властивості елементів таблиці. До першої групи властивостей відноситься ширина таблиці, її розташування в документі, заливання, параметри шрифту, рамок (колір, товщина) та інші.
Ширина таблиці (атрибут width)
Ширина таблиці - це параметр, загальний для всіх її рядків, задається він у тегу <TABLE> атрибутом width. Значення ширини може бути встановлено, як у пікселях, так і у відсотках (від повної ширини вікна браузера).
Вирівнювання таблиці в документі (атрибут align)
Для призначення положення таблиці відносно бічних границь вікна браузера застосовується атрибут align тегу <TABLE>. Атрибут може приймати одне із трьох значень: left, center, right.
Вивід зовнішньої рамки (атрибут border)
За замовчуванням цей атрибут дорівнює нулю (тобто границі не відображаються). Звичайно, таблиці без рамок використовуються для прихованого позиціонування елементів таблиці. Ширина рамки задається тільки для зовнішніх границь числовим значенням в пікселях (при цьому відобразяться й внутрішні границі), наприклад, border = 4.
Ширина границь таблиці (атрибут cellspacing)
Границі таблиці представляються у вигляді двох ліній (за замовчуванням загальна ширина 2 пікселя). Атрибут cellspasing змінює відстань між комірками (тобто ширину границь).
Відстань від вмісту комірки до границь (атрибут cellpadding).
За замовчуванням значення цього атрибуту дорівнює одному пікселю. Атрибут задає відстань до всіх границь в комірках таблиці.
В таблиці 1 приведені основні значення розглянутих атрибутів тегу Table.
Таблиця1. Основні значення тегу Table.
Ім'я атрибута |
Можливі значення |
Призначення |
Примітки |
align |
left, center, right |
горизонтальне вирівнювання всієї таблиці |
за замовчуванням left |
width |
числові, процентні |
ширина всієї таблиці |
за замовчуванням ширина визначається браузером так, щоб представити весь вміст таблиці |
border |
ціле числове значення |
ширина рамки |
за замовчуванням дорівнює 0, що означає - без рамки; деякі браузери допускають просто написання border (без конкретного значення), що сприймається, як border=1 |
cellspacing |
ціле числове значення |
проміжок між комірками |
|
cellpadding |
ціле числове значення |
проміжок між вмістом комірки й рамкою навколо комірки |
|
3. Форматування даних у таблиці, оформлення рамок (форматування рядків і комірок)
Кожну комірку можна розглядати як окремий об'єкт. Кожний тег закінчує дію при відкритті нової комірки для форматування.
Якщо необхідно домогтися обтікання тексту навколо таблиці, то використовується тег <BR>. Якщо текст не пов'язаний з таблицею, то його можна опустити вниз тегом <BR> з параметром clear (<BR clear=left - внизу ліворуч, <BR clear=all - внизу посередині).
Параметри вирівнювання вмісту комірки (застосовується в тегах <TR>, <TD>, <TH>)
Горизонтальне вирівнювання - align може приймати значення (left, right, center)
Вертикальне вирівнювання – valign може приймати значення:
top – по верхньому краю;
bottom – по нижньому краю;
middle- по середині;
baseline – забезпечує прив'язку тексту окремого рядка у всіх комірках до єдиної лінії;
параметр nowrap – відключає можливість автоматичної розбивки тексту комірки на рядки (застосовується в тегах <TR>, <TD>, <TH>)
Групування рядків та стовбців таблиці:
параметр colspane=числове значення, визначає об'єднання комірок по горизонталі;
параметр rowspan = числове значення, визначає об'єднання комірок по вертикалі.
Заливання таблиці (застосовуються в тегах <table><TR>, <TD>, <TH>):
параметр bgcolor – заливання певним кольором;
параметр background – заливання текстурою.