Практична робота № 1 «Створення найпростіших HTML-документів»

ПРАКТИЧНА РОБОТА № 1 «Створення найпростіших HTML-документів»

Завдання:

Створити веб-сторінку, яка б містила біографічні дані про автора та 3 графічні зображення, на якій мають бути розміщені наступні об’єкти:

1. Фонове зображення (1 бал)

2. Рухомий рядок з прізвищем автора (2 бала)

· Фон рухомого рядка – жовтий

· Текст – заголовок 1 рівня

· Колір тексту – червоний

· Характер руху – «туди-сюди»

3. Наступний відповідно відформатований текст: (6 балів)

· Біографічні дані (заголовок 2 рівня, колір – чорний)

· Дата народження: (розмір – 5, колір – синій, накреслення – напівжирний, вирівнювання – зліва)

· Місце народження: (розмір – 4, колір – жовтий, накреслення – курсив, вирівнювання – зліва)

· Склад сім’ї: (розмір – 4, колір – зелений, накреслення – підкреслений, вирівнювання –зліва)

· Школа: (розмір – 3, колір – золотий, накреслення – закреслений, вирівнювання – зліва), клас (розмір – 3, колір – золотий, накреслення – напівжирний, курсив, вирівнювання – зліва)

· Улюблене заняття: (заголовок 3 рівня, колір – рожевий, вирівнювання – справа)

4. 3 довільних графічних зображення: (3 бали)

· Зображення 1(висота – 100рх, вирівнювання – зліва)

· Зображення 2 (ширина – 150рх, вирівнювання – по-центру)

· Зображення 3 (висота – 200рх, ширина – 100рх, рамка – 10рх, вирівнювання –справа)

5. Зберегти сторінку у свою папку Прізвище\Pract, файл назвати Практична1.html

ПРАКТИЧНА РОБОТА № 2 «Створення списків і таблиць у веб-документах»

Завдання:

Створити веб-сторінку, на якій мають бути розміщені наступні об’єкти:

Фонове зображення (1 бал) Рухомий рядок з прізвищем автора (1бал) Таблиця за зразком (6 балів)

Сонячна система

Планета	Супутники
Земля		Місяць
Марс		Фобос
Деймос
Юпітер		Іо
Європа
Ганімед
Каллісто
Сатурн		Титан
Феба
Каліпсо
Тефея

Список за зразком (4 бали.):

Сонячна система:

1 Земля

· Місяць

2 Марс

· Фобос

· Деймос

3 Юпітер

· Іо

· Європа

· Ганімед

· Каллісто

4 Сатурн

· Титан

· Феба

· Каліпсо

· Тефея

5. Зберегти сторінку папку Прізвище\Pract, файл назвати Практична2.html (малюнки для таблиці в папці Pract2 на робочому столі)

ПРАКТИЧНА РОБОТА № 3 «Зв’язування веб-сторінок за допомогою гіперпосилань»

Завдання:

Створити 3 web-сторінки, користуючись схемою:

Вказівки:

1. На кожній сторінці має бути супроводжуючий текст

2. Пункти 1 і 2 сторінки 1 є посиланнями на сторінки 2 і 3 відповідно

3. На одній зі сторінок має бути рухомий рядок

4. На сторінці 2 потрібно створити таблицю, а на сторінці 3 – помістити малюнок

5. На сторінках 2 і 3 мають бути посилання на сторінку 1

6. кожна сторінка повинна мати фон.

Оцінювання: максимальна кількість балів за кожну сторінку – 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 бала)

ПРАКТИЧНА РОБОТА № 5

«Оформлення веб-сторінок з використанням каскадних таблиць стилів»

Завдання:

1. Створити папку «Прізвище_практична5» (усі надалі створені веб-сторінки зберігати в неї)

2. Оформити веб-сторінку наступного зразка за вимогами:

Прізвище, ім’я, по-батькові

Знаки зодіаку
Земля	Діва
Козеріг
Тілець
Вогонь	Лев
Стрілець
Овен
Повітря	Терези
Водолій
Близнюки
Вода	Рак
Скорпіон
Риби

Знаки зодіаку

· Земля

1. Діва

2. Козеріг

3. Тілець

· Вогонь

1. Лев

2. Стрілець

3. Овен

· Повітря

1. Терези

2. Водолій

3. Близнюки

· Вода

1. Рак

2. Скорпіон

3. Риби

Вимоги (все описати у формі впровадженої CSS і селекторів):

· Прізвище, ім’я, по-батькові (букви накладаються одна на одну з тінню) (2 бала)

· Фонове зображення, колір тексту – темно-червоний, розмір тексту – 5рх (1,5 балів)

· Задати вид маркерів маркованого списку (1 бал)

· В списках і таблиці назви знаків зодіаку відобразити різними кольорами відповідно до стихії (Земля – коричневий, Вогонь – червоний, Повітря – небесно-блакитний, Вода – аквамарин) (4 бали)

· Колір фону таблиці – персиковий, рамка – фіолетова, товщина рамки – 10рх (1,5 балів)

· Товщина межі зображень – 3рх, колір рамки – зелений (1 бал)

· Ширина усіх полів сторінки – 30рх (1 бал)