- •Html (HyperText Markup Language)
- •1. Структура html- документа
- •2.2. Фізичне форматування символів
- •2.3. Форматування абзаців
- •3. Списки
- •3.1. Маркований список.
- •Графічні маркери списку
- •4.2. Атрибути елементів рядків і стовпців
- •4.3. Колір у таблицях
- •6. Гіперпосилання
- •6.3. Посилання в межах одного документа
- •6.4. Підказка при наведенні мишки на посилання
- •7. Фрейми
- •7.1. Структура документу з фреймами:
- •7.3. Розбиття сторінки на фрейми
- •7.7. Приклад взаємодії між фреймами і окремими вікнами браузера
- •8. Каскадні таблиці стилів (Cascade Style Sheets – css)
- •8.1.Властивості елементів
- •8.2.Способи застосування стилів
- •8.2.1. Перевизначення стилю
- •8.2.2. Елемент style
- •8.2.3. Посилання на зовнішній опис
- •8.2.4. Імпорт опису стилів
- •9. Практичні роботи до курсу практична робота № 1 «Створення найпростіших html-документів»
- •Практична робота № 2 «Створення списків і таблиць у веб-документах»
- •Сонячна система
- •Практична робота № 3 «Зв’язування веб-сторінок за допомогою гіперпосилань»
- •Практична робота № 4 «Створення веб-сторінок з фреймовою структурою»
- •1. Адреса 2. Фото 3. Школа
- •Практична робота № 5 «Оформлення веб-сторінок з використанням каскадних таблиць стилів»
- •Знаки зодіаку
Практична робота № 2 «Створення списків і таблиць у веб-документах»
Завдання:
Створити веб-сторінку, на якій мають бути розміщені наступні об’єкти:
-
Фонове зображення (1 бал)
-
Рухомий рядок з прізвищем автора (1бал)
-
Таблиця за зразком (6 балів)
Сонячна система
Планета |
Супутники |
|
Земля |
Місяць |
|
Марс |
Фобос |
|
Деймос |
||
Юпітер |
Іо |
|
Європа |
||
Ганімед |
||
Каллісто |
||
Сатурн |
Титан |
|
Феба |
||
Каліпсо |
||
Тефея |
-
Список за зразком (4 бали.):
Сонячна система:
-
Земля
-
Місяць
Марс
-
Фобос
-
Деймос
Юпітер
-
Іо
-
Європа
-
Ганімед
-
Каллісто
Сатурн
-
Титан
-
Феба
-
Каліпсо
-
Тефея
5. Зберегти сторінку папку Прізвище\Pract, файл назвати Практична2.html (малюнки для таблиці в папці Pract2 на робочому столі)
Практична робота № 3 «Зв’язування веб-сторінок за допомогою гіперпосилань»
Завдання:
Створити 3 web-сторінки, користуючись схемою:
Вказівки:
-
На кожній сторінці має бути супроводжуючий текст
-
Пункти 1 і 2 сторінки 1 є посиланнями на сторінки 2 і 3 відповідно
-
На одній зі сторінок має бути рухомий рядок
-
На сторінці 2 потрібно створити таблицю, а на сторінці 3 – помістити малюнок
-
На сторінках 2 і 3 мають бути посилання на сторінку 1
-
кожна сторінка повинна мати фон.
Оцінювання: максимальна кількість балів за кожну сторінку – 4
1 сторінка: рухомий рядок – 1 бал, список – 1 бал, посилання – 1 бал, форматування тексту(вирівнювання, розмір, накраслення шрифта) – 0,5 бала, оформлення зовнішнього вигляду сторінки (фон, абзаци, положення елементів) – 0,5 бала.
2 сторінка: таблиця – 1 бал, оформлення таблиці (вирівнювання на сторінці, форматування рамок, вирівнювання в комірках) – 1 бал, посилання – 1 бал, оформлення зовнішнього вигляду сторінки – 0,5 бала, форматування тексту – 0,5 бала.
3 сторінка: малюнок – 1 бал, форматування малюнка (розмір, вирівнювання на сторінці, поля) – 1 бал, посилання – 1 бал, оформлення зовнішнього вигляду сторінки – 0,5 бала, форматування тексту – 0,5 бала.
Практична робота № 4 «Створення веб-сторінок з фреймовою структурою»
Завдання:
-
Створити папку «Прізвище_практична» (усі надалі створені веб-сторінки зберігати в неї)
-
Створити документ, утворений трьома фреймами, присвоївши їм відповідні імена «А», «В», «С». (сторінку назвати frame.html) (2 бала)
-
У фрейм «А» завантажити документ, що містить прізвище, ім’я, по-батькові автора у вигляді рухомого рядка (сторінку назвати avtor.html). (2 бала)
-
У фрейм «С» завантажити пустий документ (сторінку назвати empty.html). (2 бала)
-
У фрейм «В» завантажити документ, що містить наступний список:
1. Адреса 2. Фото 3. Школа
(сторінку назвати menu.html) (2 бала)
-
Кожен елемент списку має бути гіперпосиланням на відповідні веб-сторінки: (2 бала)
adress.html – містить адресу і телефон автора
photo.html – містить фотографію автора
school.html – містить назву класу та навчального закладу
-
При виборі будь-якого посилання відповідна йому сторінка має завантажуватися у фрейм «С» (2 бала)