- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
3. Вбудований стиль (атрибут style)
Для кожного елемента HTML-документа передбачений припустимий набір властивостей, що визначається специфікацією HTML. У коді HTML властивості елементів прийнято записувати у вигляді атрибутів і їхніх значень, які вказуються в початковому тегу кожного елемента.
Серед усіх припустимих властивостей елемента є такі, які безпосередньо зв'язані зі стилями, що визначаються за допомогою CSS (наприклад, гарнітура або колір шрифту конкретного абзацу, колір фону документа, розміри малюнка й т.д.). Такі властивості називаються стильовими властивостями (або властивостями стилю).
Властивість стилю - це параметр стильового оформлення документа, що визначається специфікою CSS.
В аркушах стилів значення властивості приєднується до стилю за допомогою двокрапки. Наприклад, наступний запис:
font-family: Arial; font-size: 14pt; color: red
задає шрифт Arial, розміром 14 pt, червоного кольору.
Всі пробіли між найменуванням властивості і його значенням браузером ігноруються.
Значення властивостей стилю можна записувати без лапок. Однак, якщо значення властивості стилю складається з декількох слів з пробілами (наприклад, найменування шрифту), то лапки (одинарні ‘ або подвійні ") ставляться.
Як уже зазначалось, найпростішим способом завдання стилю елемента HTML є вбудований стиль, який використовує атрибут style.
При розробці Web-сторінки стиль елемента можна змінити, додавши до його тегу атрибут style із вказівкою необхідних властивостей. Наприклад,
<Р style=" font-size: 14pt"> абзац </P> - «абзац» буде виведений на екран шрифтом розміром 14 pt.
Вбудований стиль можна застосовувати до строкових елементів (наприклад, SPAN). Наступний код привласнює червоний колір одному слову в заголовку:
<H1><SPAN style="color: red">Захист</SPAN> комп'ютерних мереж</Н1>
Можна встановити вбудований стиль для блоку, при цьому властивості стилю будуть застосовані до всіх елементів, що входять у блок. Наприклад, у наступному коді у всіх вкладених елементах H1, H2, CITE буде використовуватися шрифт сімейства serif коричневого кольору.
<DIV style=" font-family: serif; color: brown">
<Н1>Частина перша</Н1>
<Н2>Глава 1</Н2>
Все смешалось в доме Облонских. Жена узнала, что муж был в связи с бывшею в их доме француженкою-гувернанткою, и объявила мужу, что не может жить с ним в одном доме.
<BR><BR>
<СIТЕ>Л. Толстой <CITE>
</DIV>
Значення атрибута style обов'язково беруть у лапки (одинарні ' або подвійні "), причому властивості відділяються один від іншого крапкою з комою (пробіли не обов'язкові).
4. Заголовний стиль (елемент style)
Для розміщення інформації про стиль застосовується спеціальний контейнер <STYLE></STYLE>, що вставляється в заголовну частину документа й має вигляд:
<STYLE type="text/css">
<!-- Опис аркуша стилів -->
</STYLE>
У цьому коді значення text/css атрибута type повідомляє браузеру, що в поточному файлі застосований текст мовою CSS. Усі формальні описи стилів, що представляють собою CSS-правила, містяться в елементі STYLE.
Наприклад,
<html>
<head>
<title>Анна Каренина</title>
<style type="text/css">
<!-- Опис аркуша стилів >
H1 {font-size:15pt}
H1.curs {font-size:16pt; font-style: italic}
# blue {background-color: blue; color: white}
</style>
<!-- Кінець опису аркуша стилів-->
</head>
<body>
<h1>Часть первая</h1>
<h1 class="curs">Глава первая</h1>
<h1 id="blue">Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастна по-своему.</h1>
</body>
</html>
У даному прикладі всі елементи H1 будуть відображені шрифтом розміру 15pt, а деякі елементи H1, що виділені в клас curs, будуть представлені курсивом з розміром 16pt. Елемент, що позначено ідентифікатором id="red", буде виведено білим шрифтом на синьому фоні.
5. CSS-правила
Розглянемо загальні правила визначення й присвоєння стильових властивостей, які передбачені CSS:
1) відповідно до специфікації CSS стильові властивості вводяться за допомогою визначення стилю, яке прийнято позначати фігурними дужками. Наприклад,
{font-size:15pt};
2) в одному визначенні стилю може записуватися кілька властивостей через крапку з комою. Наприклад:
{color: blue; font-family: Arial; text-align: right};
3) відповідно до специфікації CSS призначення стилю тому або іншому елементу HTML складається у встановленні зв'язку:
Елемент {Визначення_стилю}.
Наприклад,
Р {font-family: Arial; font-size: 14pt}
#fl {width: 150; height: 100}.
Елемент, до якого відноситься стиль, що визначається називається селектором. В останньому прикладі селектори були представлені іменами HTML-елементів Р і ідентифікатором f1. Селектори, що збігаються з іменами тегів, позначають класи, а селектори, що починаються зі знака # («рамка»), відповідають унікальним ідентифікаторам елементів.
Селектори позначаються по імені елементів, до яких застосовується визначення стилю. Наприклад, селектор table вказує на те, що визначення стилю відноситься до елементів TABLE. Селектори нечутливі до регістра, однак в CSS прийнято записувати елементи прописними літерами.
Запис, що складається із селектора й визначення стилю, називається CSS-правилом. Аркуші стилів - це фактично набори CSS-правил, які задають властивості форматування елементів документа.