- •Модуль 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. Структура документу
<HTML> сам документ </HTML> - перший тег, з якого варто починати опис (ці теги повідомляють браузер, що перед ним документ HTML).
Документ може складатися з 2 розділів:
Розділ заголовка (починається тегом <HEAD>) – надається необхідна інформація для браузера, не є обов'язковим.
Розділ змістовної частини. Починається тегом <BODY> тіло документа </BODY>
Крім того, звичайно, кожна Web-сторінка містить елемент <TITLE>, який представляє собою назву документу (назва може мати необмежену довжину й містити будь-які символи, крім деяких зарезервованих) Ця назва звичайно показується в заголовку вікна браузера. Тег - контейнер <TITLE> - є дочірнім елементом по відношенню до елемента <HEAD> (це означа, що елемент <TITLE>, звичайно вкладений в елемент <HEAD>). Наприклад:
<head>
<title>Комп'ютерний клас </title>
</head>
Таким чином, в самому загальному вигляді структуру Web-сторінки можна представити так:
<html>
<head>
<title>
Назва Web-сторінки
</title>
</head>
<body>
Інформація на Web-сторінці
</body>
</html>
4. Визначення й оформлення функціональних розділів документа
Заголовки. Мова HTML підтримує шість рівнів внутрішніх заголовків. Заголовки розбивають сторінку на логічно закінчені блоки. Вони позначаються тегами від <H1> ---- </H1> до <H6> ---- </H6>. Елементи <H1>, <H2>, <H3>, <H4>, <H5>, <H6> включаються в елемент </BODY>.
Абзаци. Для створення абзацу використовується тег <P> ---- </P> (HTML не створює новий рядок, а відокремлює абзаци порожнім рядком).
Горизонтальна лінійка. Відділення різних частин документа один від іншого створюється одиночним тегом <HR>
Перехід на новий рядок (без створення абзацу) – тег <BR>
Виділення фрагментів – тег <EM> (курсив), <B> (жирний)
5. Форматування html – документа Вирівнювання:
Теги <H>, <Р> і ін. можуть задаватися з параметром горизонтального вирівнювання ALIGN. Його значення:
Left - вирівнювання тексту по лівій границі вікна браузера;
Center – вирівнювання тексту по центру вікна браузера;
Right – вирівнювання тексту по правій границі вікна браузера;
Justify - вирівнювання тексту по ширині вікна браузера.
Заборона переведення рядка: теги <NOBR> і <WBR> якщо текст не вміщується, то з'являється горизонтальна смуга прокручування. Тег <WBR> - м'який переклад рядка, який виконується тільки по необхідності.
Індекси:
Для визначення верхнього та нижнього індексів в HTML передбачені наступні теги:
<sup>---</sup> - верхній індекс, надстроковий текст або показник степені. Наприклад, вираз S = Pi*R2 записується у вигляді S = Pi * <SUP>2</SUP>);
<sub>---</sub> - нижній індекс. Наприклад формула H2O може бути задана рядком вигляду: H<SUB>2</SUB>O.
Параметри шрифту:
Для завдання параметрів шрифту найпростіше використовувати елемент <Font>, який має наступні параметри:
параметр size – розмір шрифту. Значенням цього параметру є розмір шрифту в умовних одиницях від 1 до 7 (нормальний - 3). <Font Size=4>
параметр color – колір шрифту. Колір шрифту визначається за допомогою стандартних імен або у форматі RGB. Наприклад, <Font color = “green”> або <Font color= “00FF00”>
параметр face – гарнітура шрифту. Наприклад, < Font face=”Arial”>
За замовчуванням текст документу відображується основним шрифтом, який задається в начальних установках браузеру. Звичайно основний шрифт має розмір 3 та гарнітуру Times New Roman. Елемент <Basefont> - використовується для зміни властивостей основного шрифту. За допомогою цього елементу можна вказати розмір, тип, і колір шрифту. Для елемента <Basefont> не існує тегу, що закривається. Його значення найчастіше не поширюється на таблиці. Ці значення обов'язкові для всього документа, але можуть перевизначитися за допомогою тегу <Font>. Цей тег має ті ж параметри, що тег <Font> і може розміщуватися в будь-якому місці елементу <BODY>.
Можна описувати спеціальними стилями окремі слова або пропозиції. Є два типи стилів: логічний і фізичний. Логічні стилі визначають текст згідно заданому значенню, тоді як фізичні стилі визначають деякі ділянки тексту.