- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці.
Мета: вивчити основні теги HTML для створення таблиць, навчитися представляти інформацію у HTML-документі у вигляді таблиць. Вивчити розширені можливості розмітки таблиць, опанувати особливості створення складених за структурою таблиць у HTML - документах
Основні теоретичні відомості
Таблиці в web-документах є інструментом структурування документа. У них можуть розміщатися текстові й числові значення, зображення, блоки й гіперпосилання. Таблиці використовуються для вибірок з баз даних. За допомогою кодів сценаріїв дані в таблицях можуть оброблятися.
Найчастіше таблиці використовуються для компонування web- сторінок на основі заданої табличної структури
1. Загальна структура таблиці
Таблиці HTML як і списки будуються за принципом вкладення елементів, тобто задається батьківський елемент TABLE, що визначає таблицю в цілому, і в нього вкладаються дочірні елементи.
<TABLE>
<! - тут розміщається опис таблиці ->
</TABLE>
Склад таблиці по рядках і комірках задається за допомогою наступних елементів:
TR - елемент, що формує окремий рядок;
TD - елемент, що визначає вміст осередку даних;
ТН - елемент, що задає осередок заголовка;
CAPTION - елемент назви таблиці.
В HTML прийнята порядкова модель опису таблиці, у якій послідовно задаються рядки, починаючи із самою верхньої й закінчуючи останнім нижнім рядком.
Із зовнішньої сторони таблиця обмежена зовнішньою рамкою. Осередки відділяються друг від друга внутрішніми рамками. Як зовнішні, так і внутрішні рамки можуть бути видні або не видні у вікні браузера це залежить від заданих властивостей таблиці. В HTML передбачені засоби для виділення в таблиці окремих груп рядків і стовпців.
Рядка (елемент TR)
Кожний рядок таблиці починається тегом <TR>, а закінчується відповідним закриваючим тегом </TR>. Закриваючий тег </TR> не обов'язковий, але його рекомендується ставити для позначення границі кожного рядка.
Усередині кожного елемента TR розміщається опис комірок-заголовків або комірок даних.
Комірки (елемент TD)
Для опису вмісту окремих комірок таблиці призначений парний тег <TD>. Текстовий вміст комірок даних за замовчуванням відображається шрифтом, заданим у початкових настройках браузера.
Заголовки (елемент ТН)
Для виділення тексту в окремих комірках таблиці часто користуються спеціальним тегом <ТН>, що називається елементом заголовка таблиці. Заголовки можна вставляти в будь-якому місці таблиці. Вміст заголовка автоматично розміщається по центрі комірки, і відображається напівжирним шрифтом. Контейнер заголовка має вигляд:
<ТН> Вміст комірки </ТН>
Для відображення таблиці з порожніми комірками, в якості елементів, що не відображаються записують примітив  .
Назва (елемент CAPTION)
Назву таблиці можна задати за допомогою заголовків TH. Прийнято використовувати спеціальний елемент CAPTION, що надає розробнику стандартний спосіб введення в документ назви таблиці. Цей елемент записується за допомогою парного тегу <CAPTION>---</CAPTION>, розташовуваного безпосередньо після елемента TABLE (але обов'язково до елементів TR, TD або ТН).
Приклад:
<body>
<table class="table" border="5">
<caption>Успішність групи </caption>
<th> № </th> <th> Фамилия </th> <th>Середній бал </th>
<tr>
<td>1</td> <td> Іванов </td> <td> 5,5</td>
</tr>
<tr>
<td>2</td> <td> Сидорів </td> <td>6,7</td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td>
</tr>
</table>
</body>
За замовчуванням назва таблиці розташовується над таблицею по центру й відображається тим же шрифтом, що й уміст комірок даних. Для зміни формату назви тег <CAPTION> доповнюється наступними атрибутами:
align - визначає вирівнювання назви щодо границі таблиці. Цей атрибут може приймати кожен з наступних чотирьох значень: left (вирівнювання по лівій границі, назва розташовується над таблицею), right (вирівнювання по правій границі), top (назва розташовується над таблицею по центрі) і bottom (назва під таблицею по центру);
valign - застосовується для вирівнювання назви при розміщенні її над або під таблицею (атрибут align не виконує вирівнювання назви вправо або вліво при значеннях top і bottom). Для вирівнювання потрібно застосувати обидва атрибути valign і align: атрибут valign буде задавати розташування назви над або під таблицею, а атрибут align - визначати його вирівнювання по лівій або правій границі таблиці;
style - установлює властивості стилю, що відносяться до тексту.