- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Список, що розкривається:
<select name="spisok1"> - тег - список з ім'ям
<option value="0"> pen</option> - елемент списку, що висвічується у вікні списку
<option value="1"> pencil</option>
<option value="2"> book</option>
</select>
Поле - список
<select name="spisok2" size="3">поле з ім'ям і кількістю рядків, які одночасно відображаються (три)
<option value="0"> red</option>
<option value="1"> green</option>
<option value="2"> black</option>
<option value="3"> brown</option>
<option value="4"> blue</option>
<option value="5"> white</option>
</select>
Список із множинним вибором
<select name="spisok3" size="2" multiple> - включає режим вибору декількох елементів.
<option value="0"> red</option>
<option value="1"> green</option>
<option value="2"> black</option>
<option value="3"> brown</option>
<option value="4"> blue</option>
<option value="5"> white</option>
</select>
Тег <Option> може мати наступні атрибути:
selected – встановлює початкове виділення в списку (якщо атрибут не встановлений ні для одного тегу <Option>, то не буде виділених елементів;
value – вже розглядався.
Елементи керування можна зв'язати з написами або згрупувати. Для створення написів, пов'язаних з елементами керування (прапорцями, перемикачами й ін.), в Internet Explorer 4.0 і більше пізніх версіях є тег <LABEL>
OPTGROUP необхідний - для використання в ієрархічному меню
<!ELEMENT OPTGROUP - - (OPTION)+ -- група опцій -->
Початковий тег: необхідний, Кінцевий тег: необхідний
Визначення атрибуту елементу OPTGROUP - визначає лейбл для групи опцій.
Примітка. Елементи OPTGROUP можуть бути вкладеними. Це дозволить авторам визначати можливість складнішого вибору.
Приклад :
<body>
<form>
<select name="year">
<optgroup label="2007">
<option value="a1" label="холода">зима </option>
<optgroup label="зима" >
<option value="a21" label="тепло" >декабрь</option>
<option value="a31" label="жарко">январь</option>
<option value="a41" label="прохладно">февраль</option>
</optgroup>
<optgroup label="весна" >
<option value="a2" label="тепло">март</option>
<option value="a3" label="жарко">апрель </option>
<option value="a4" label="прохладно">май</option>
</optgroup>
<option value="a3" label="жарко">лето </option>
<option value="a4" label="прохладно">осень</option>
</optgroup>
</select>
</form>
</body>
Зв'язування написів з перемикачами:
<input type="radio" id="a1" name="otpusk"> <label for="a1"> Na more</label>
тут
id - ім'я ідентифікатора <label> - мітка
for – ідентифікатор, що встановлює зв'язок між міткою й елементом керування.
Оформлення списків за допомогою властивостей стилів
<option style="background: red; color: white" value="0"> - фон та колір можна міняти в кожному елементі списку.
Групування елементів керування <fieldset>
Щоб сторінка або форма мала закінчений вигляд, елементи повинні бути розподілені по групах. Тег <FIELDSET> - групує об'єкти.
Тег <LEGEND> - вводить напис, що поміщається в розрив рамки
Наприклад
<fieldset>
<p></p>ANKETA <p></p>
<legend> FIO </legend>
familia: <input type="text" name="ank" id="f"><p></p>
imya <input type="text" name="ank" id="I">
</fieldset>
