
- •Модуль 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. Властивості шрифтів
Властивості, що вводяться аркушами стилів, умовно можна розбити на групи, наприклад, група властивостей тексту або група властивостей шрифтів.
Розглянемо коротко властивості шрифтів:
font-family - задає гарнітуру шрифту, що буде використана для виводу тексту. Значенням цієї властивості може бути назва конкретного шрифту (наприклад, Arial) або назва сімейства шрифтів. У специфікації CSS передбачені наступні сімейства: serif (наприклад, Times New Roman, Bodoni), sans-serif (наприклад, Arial, Future), cursive (наприклад, Caflisch Script), fantasy (наприклад, Alpha Geometrique), monospace (наприклад, Courier New). При визначенні властивості font-family можна вказувати список шрифтів, розділених комами, аналогічно тому, як це робиться при завданні атрибута face;
font-size - визначає розмір шрифту. Значення розміру може бути задане в абсолютних одиницях (наприклад, l0pt, 8mm, 2in), у відсотках від основного шрифту (наприклад, 130%), а також за допомогою розмірних вираpазів: хх-small (надмілкий), х-small (дуже дрібний), small (дрібний), medium (середній), large (великий), х-large (дуже великий), хх-large (надвеликий), larger (більше), smaller (дрібніше);
font-style - задає стиль виводу символів. Можливі наступні значення цієї властивості: normal (звичайний), italic (курсив) і oblique (похилий);
font-weight - назначає ступінь «жирності» шрифту. Для цього використовуються цілі числа з діапазону від 100 до 900 із кроком 100 одиниць або ключові слова: bold (жирний), bolder (більш жирний) і lighter (більш тонкий);
font-variant - указує варіант накреслення поточного шрифту. Для цієї властивості браузери підтримують два значення: small-caps (відображення малими прописними буквами) і normal (не впливає на відображення).
font - «узагальнююча» властивість шрифту, у якій може бути зазначене значення будь-якого атрибута шрифту (font-family, font-size, font-style і т. ін.). Для цього значення властивостей упорядковуються у вигляді послідовності.
Приклади завдання властивостей шрифту:
Р { font-family: helvetica, arial}
STRONG { font-size: 150%}
DIV.imono {font-family: monospace; font-size: larger; font-variant: small-caps}
Найменування властивостей не чутливі до реєстру символів. Однак звичайно використовують рядкові символи, як це прийнято в специфікації CSS.
3. Властивості тексту
Такі властивості, як міжрядковий інтервал, відстань між словами й буквами, називають властивостями тексту. Властивості тексту визначаються для абзаців , навіть, для всього документа, тобто задаються на рівні блоків (Р, DIV, BODY). Але ці властивості можна задавати й для окремих слів або декількох букв, тобто на рівні строкових елементів (SPAN, STRONG і ін.). Нижче перелічені основні властивості тексту, передбачені специфікацією CSS.
letter-spacing - установлює відстань між буквами (міжсимвольний інтервал). За замовчуванням цій властивості привласнюється значення normal. Можна також указувати відстань у будь-яких абсолютних одиницях (див. таблицю 1);
word-spacing - установлює відстань між словами. Аналогічно letter-spacing значенням цієї властивості за замовчуванням уважається normal. Інші значення можуть бути задані в абсолютних одиницях (наприклад, 10рх, 2mm);
text-indent - задає відступ першого рядка абзацу («новий рядок»). Ця властивість застосовується до блоків, і його значення виражається в абсолютних одиницях (наприклад, 4mm, lcm, 20pt і т.д.) або у відсотках від ширини блоку (наприклад, 5% або 10%). За замовчуванням значення властивості text-indent дорівнює нулю. Якщо цій властивості привласнити негативне значення, то замість абзацного відступу одержимо виступ першого рядка;
text-align - задає горизонтальне вирівнювання для тексту, розміщеного всередині елемента (наприклад, Р або DIV). Ця властивість приймає значення: center (по центру), left (уліво), right (вправо) і justify (за шириною). За замовчуванням текст вирівнюється по лівому краю. Ефект вирівнювання особливо помітний при великому розмірі шрифту й малій ширині вікна браузера;
vertical-align - установлює розташування тексту й малюнків по вертикалі щодо базової лінії. Властивість може приймати, наприклад, наступні значення: baseline (вирівнювання по базовій лінії, приймається за замовчуванням), sub (вирівнювання по лінії нижнього індексу), super (вирівнювання по лінії верхнього індексу);
line-height - визначає міжрядковий інтервал. Значення цієї властивості можна задавати в абсолютних одиницях (наприклад, 16pt, 3mm), у відсотках (130%), а також кількістю рядків (наприклад, 1.7 або 3).