- •Модуль 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. Створення елементів керування
Для всіх внутрішніх елементів керування батьківським є елемент <FORM>.
На Web-Сторінку елементи керування вводяться тегом <INPUT> Наприклад, щоб створити текстове поле, можна виконати наступне:
<INPUT type = "text" name = "organization">
В таблиці 6 розглянуті атрибути тегу <INPUT>
Таблиця 6. Атрибути тегу <INPUT>
-
Параметр
Опис
type
Визначає тип елемента, призначеного для уведення даних, якщо атрибут не заданий, то вважається, за замовчуванням, що тег <INPUT> описує текстове поле.
align
Задає розташування елемента по вертикалі. Можливі значення поля такі ж, як і у випадку атрибута align у тегу <IMG>;
checked
Відповідає установці прапорця або перемикача. Встановлений прапорець або перемикач повертає пару значень name/value при представленні форми.
name
Визначає ім'я елемента, що використовується при передачі форми. Вказувати його необхідно для більшої частини елементів. Ім'я повинне бути унікальним для елемента або для групи логічний елементів
size
Задає розмір текстового поля в символах
maxlength
Вказує максимальне число символів, які можуть бути уведені в текстове поле
src
Використовується разом з атрибутом type=IMAGE і задає URL потрібного зображення
value
Визначає значення (текстовий рядок або число) для елемента, що задається атрибутом type
tabindex
Встановлення цього атрибуту дозволяє встановити порядок переміщення фокусу по елементам форми при натисканні клавіші Tab.
Типи елементів керування (атрибут type)
Елемент керування вводиться тегом <INPUT>, тип елементу задається атрибутом type. Розглянемо можливі елементи управління.
Текстові поля (text). Це буквено-цифрові поля, які застосовуються для введення даних або одержання інформації від користувача. На можливість введення тексту в поле вказує курсор. Якщо в полі є вихідний текст, то користувач може встановити курсор у потрібнім місці (наприклад, <INPUT type="text" name="reply" size=15 maxlength=30>).
size – визначає кількість видимих символів (ширину поля)
maxlength – задає максимальна кількість символів
Якщо необхідно відобразити вже наявний текст, то додається value: <INPUT type="text" size=40 maxlength=40 value="Moї дані ">
Поля Введення пароля (password) Це текстові поля, у яких уводяться символи, що, заповнюються зірочками «*», які приховують на екрані вміст поля. По зірочках користувач може перевірити кількість уведених символів пароля.
Наприклад, <INPUT type="password">
У цьому тегу можна вказувати ті ж атрибути (size, maxlength, value), що й у тегу діалогового текстового поля.
Приховані поля (hidden). Для передачі даних, розрахованих разом з формою, часто використовуються приховані текстові поля. Щоб створити приховане поле, досить визначити його тип за допомогою значення hidden для атрибута type, наприклад, <INPUT type="hidden">
Багаторядкове текстове поле (textarea). Надає можливість введення й відображення тексту в окремому прямокутному полі, що може мати вертикальну смугу прокручування. (переліків, реквізитів, інструкцій). Текст розташований на декількох рядках міститься в парі тегів <textarea>---</textarea>
Атрибути:
Cols – довжина поля в символах
Rows – припустима кількість рядків
Wrap=off – заборона автоматичного переносу, при цьому зберігаються переноси, визначені автором.
Приклад
<textarea name="text" cols="50" rows="5">
Будь якій текст
</textarea>
Поле вибору файлів (file). Поле введення, оснащене додатковими кнопками, можна вибрати файл на диску й включити його у форму для наступного пересилання на сервер.
Прапорці (checkbox). Вид маленьких квадратиків, визначають який-небудь вибір (включення або вимикання якого-небудь параметра). Порожні квадратики означають, що параметр виключений, квадратики з галочкою - включений.
Перемикачі (radio). Перемикачі мають не менш двох положень і дозволяють вибрати одне (і тільки одне) положення.
Кнопки
"button" - звичайна кнопка.
Наприклад
<input type="button"> - розміщує на формі прямокутну кнопку.
<input type="button" value="pusk" name="start"> - кнопка з написом, напис визначається тегом Value
"submit" - кнопка подачі запиту
Наприклад
<input type="submit" value="otpravit" name="zapros">
Якщо значення Value не задане, то за замовчуванням на кнопці відображається напис «Подача запиту»
"reset"- скидання. Приведення форми в початкове положення (скидання усіх введених даних).
Наприклад
<input type="reset" value="povtor">
Якщо значення Value не задане, то за замовчуванням на кнопці відображається напис «Скидання»
Кнопки з зображенням
Для введення на форму кнопки з зображенням у тег <input> вводяться атрибути type="image" src="atom1.BMP".
Наприклад
<input type="image" src="atom1.BMP" width="50" height="50" align="top" name="result">
Списки (select). Список варіантів для вибору. Два типи списків: списки, що розкриваються, і списки із прокручуванням. В HTML передбачена можливість створення списку із множинним вибором, що дозволяє вибрати більше одного елемента. Пряме редагування вмісту списків неможливо.