Робота на тему: "Створення простих Web-сторінок мовою HTML"

Лабораторна робота №5

Створення простих Web-сторінок мовою HTML

Мета: Отримати навички зі створення web-сторінок мовою розмітки гіпертексту HTML. Програмне забезпечення: текстовий редактор (Блокнот, Notepad++ тощо).

Завдання:

1.     За допомогою текстового редактора (наприклад, Блокнот, Notepad++ тощо) створити htmlсторінку із заголовком «Лабораторна робота №5». При створенні сторінки використати стандартну структуру:

<html>

<head>

<title> Лабораторна робота №5</title>

</head>

<body>

Інформація та об’єкти тіла сторінки

</body>

</html>

2.     Наповнити тіло сторінки інформацією, яку розбити на блоки:

•      назва сторінки

•      зміст (із усіма наступними підпунктами), Відомості про мене та мою родину; Моє навчання: школа, технікум; Мої досягнення та захоплення.

При наповненні сторінки текстом використовувати теги <p>, <h1>, …, <h6>. Для відокремлення частин сторінки використовувати горизонтальну лінію <hr>.

3.     Відформатувати деякі слова сторінки за допомогою тегів <i>, <b>, <u>,<s>, <sub>, <sup>.

4.     Зберегти створену сторінку у файл lab_3_NV.html (де NV –номер варіанту).

5.     Змінити фоновий колір сторінки відповідно до варіанту Додатку № 1, використовуючи атрибут bgcolor тегу <body>.

6.     Доповнити текст одним із спеціальних символів мови HTML відповідно до варіанту Додатку № 2.

7.     Доповнити сторінку інформацією, яку подати у вигляді маркованого чи нумерованого списку (для нумерованого списку початок нумерації – номер варіанту). Вид списку та параметри встановити відповідно до варіанту Додатку №3.

8.     Використовуючи тег <font> та його атрибути, змінити форматування абзаців, слів та символів.

9.     Використовуючи атрибут align, задати вирівнювання звичайних абзаців та заголовків.

10. Зберегти зміни. Проглянути результат форматування сторінки у браузері.

Контрольні питання:

1.     Яке призначення мови HTML?

2.     Яка структура HTML-документу?

3.     Що таке тег і які є теги?

4.     У чому полягає відмінність між елементами p та h1...h6?

5.     Які параметри можна змінити використовуючи тег <font>? Які атрибути при цьому використовуються?

6.     Яким тегом можна здійснити примусове закінчення рядка без створення нового абзацу?

7.     З якою метою використовується елемент hr? Які атрибути має цей елемент?

8.     Яким чином можна здійснити вирівнювання тексту по центру, не використовуючи атрибут align?

9.     З якою метою використовуються атрибути compact та start для нумерованного списку?

10. Які елементи використовуються для створення списку визначень?

Про матеріал

Практичні завдання з веб-дизайну на тему: "Створення простих Web-сторінок мовою HTML" в кількох додатках запропоновані варіанти індивідуальних завдань.

Перегляд файлу

Рекомендована література:

1. Артанов Б. Web-мастеринг без посторонней помощи: учебн. пособие. – М.: 100 книг. 2006. – 336 с.

2. Чиртик А. А. HTML. Популярный самоучитель. – СПб.: Питер, 2006. – 224 с.: ил.

3. Гаевский А. Ю., Романовский В.А. Самоучитель по созданию Web-сайтов: HTML, JavaScript и DHTML. - 2-е изд. - К.: А.С.К., 2006. - 480 c.

4. Ломов А. Ю. HTML, CSS, скрипты: практика создания сайтов. – СПб.: БХВ- Петербург, 2006.

– 416 с. Інформаційні ресурси:

1. Довідник з веб-дизайну. – Режим доступу: http://htmlbook.ru/

2. HTML довідник. – Режим доступу: http://html.manual.ru/

3. Довідник з веб-дизайну та програмування. – Режим доступу: http://htmlka.com/

4. HTML коди кольорів. – http://site-konstruktor.com.ua/html/tablycya_html_kodiv_koloriv

5. Довідник спецсимволів HTML. – http://htmlbook.ru/samhtml/tekst/spetssimvoly

Додаток №1.

Колір фону

Вар.	Назва кольору	Вар	Назва кольору	Вар	Назва кольору	Вар	Назва кольору
1	Grey	9	Wheat	16	Seashell	24	Honeydew
2	SkyBlue	10	Orange	17	AntiqueWhite1	25	LavenderBlush
3	LightBlue	11	Pink	18	Bisque	26	MistyRose
4	Cyan	12	LightPink	19	PeachPuff	27	DarkSlateGray
5	LightCyan	13	Violet	20	NavajoWhite	28	Aquamarine
6	Aquamarine	14	LightGreen	21	LemonChiffon	29	DarkSeaGreen
7	Gold	15	SpringGreen	22	Cornsilk	30	SeaGreen
8	Yellow			23	Ivory

Додаток №2.

Спецсимволи мови HTML

Вар. Ім’я Код Вигляд Опис

нерозривний пробіл

фунт стерлингів

€

знак євро

символ параграфа

параграф

знак copyright

знак зареєстрованої торгової марки

™

знак торгової марки

градус

плюс-мінус

дріб - одна четверта

дріб - одна друга

дріб - три четвертих

знак множення

знак ділення

&fnof;

знак функції

←

стрілка вліво

↑

стрілка вгору

→

стрілка вправо

↓

стрілка вниз

↔

стрілка вліво-вправо

&spades;

♠

знак масти "пики"

&clubs;

♣

знак масти "трефы"

Вар.	Ім’я	Код	Вигляд	Опис
24	&hearts;	♥	♥	знак масти "червы"
25	&diams;	♦	♦	знак масти "бубны"
26	"	"	"	подвійні лапки
27	&	&	&	амперсанд
28	<	<	<	знак "менше"
29	>	>	>	знак "більше"
30	π	π	π	грецька літера пі

Додаток №3.

Списки

Варіант	Вид списку	Параметри списку
1, 9, 17, 25	маркований	тип маркера – круг без зафарбування
2, 10, 18, 26	маркований	тип маркера – круг із зафарбуванням
3, 11, 19, 27	маркований	тип маркера – квадрат
4, 12, 20, 28	нумерований	тип нумерації – арабські цифри
5, 13, 21, 29	нумерований	тип нумерації – великі римські цифри
6, 14, 22, 30	нумерований	тип нумерації – малі римські цифри
7, 15, 23	нумерований	тип нумерації – великі літери латинського алфавіту
8, 16, 24	нумерований	тип нумерації – малі літери латинського алфавіту

pdf

Завантажити

Зберегти на потім

Додав(-ла)

Мартинюк Людмила Анатоліївна

Пов’язані теми

Інформатика, Методичні рекомендації

Додано

25 липня 2018

Переглядів

2573

Оцінка розробки

Відгуки відсутні