You are on page 1of 6

Національний авіаційний університет

Факультет міжнародних відносин

Кафедри комп’ютерних мультимедійних технологій

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


З дисципліни «Веб-дизайн»

На тему: «Знайомство з тегами мови HTML: зображення, карти зображень,


форми.»

Виконав: Перевірила:
Студент Доцент
Наулко Богдан В’ячеславович Матвійчук-Юдіна О.В
Допущено до захисту _________ Захищено з оцінкою ______

Київ 2023
Мета роботи: Ознайомитися із тегами мови HTML: зображення, карти
зображень,форми.

Завдання:
1. Ознайомитися з особливостями тегами мови HTML: зображення,
карти зображень, форми.
2. Вивчити інструменти текстового редактору NOTE PAD.
3. Опрацювати теоретичні відомості:
https://cpto.dp.ua/public_html/posibnyky/basic_html/urok2.html
https://css.in.ua/html/tags
https://cpto.dp.ua/public_html/posibnyky/basic_html/urok13.html
https://cpto.dp.ua/public_html/posibnyky/basic_html/urok13_3.html
https://developer.mozilla.org/ru/docs/Learn/Forms/How_to_structure_a_web_form
4. Створити файл form1.html і реалізувати форму реєстрації користувача.
5.Створити файл form2.html і реалізувати форму реєстрації користувача.
6.Розробити розрахункову форму.
7.Знайти в Інтернеті карту України. Створити файл map.html і розмістити у
ньому зображення карти України.
- За допомогою якого-небудь онлайн-сервісу для створення карт зображень
(на ваш вибір) визначити координати областей:
https://www.image-map.net/

Хід роботи:

1. Ознайомився з особливостями тегами мови HTML: зображення,


карти зображень, форми.
HTML використовує теги для різноманітних елементів сторінки. Деякі основні
теги включають `<html>`, `<head>`, `<body>`, `<img>` для вставлення
зображень, і `<form>` для створення форм. Зображення карт можуть бути
вставлені за допомогою тегу `<img>` з атрибутом `src`, а форми створюються за
допомогою тегу `<form>`, який містить елементи, такі як `<input>`. Загальна
структура HTML-документу виглядає як:

html
<!DOCTYPE html>
<html>
<head>
<!-- Метаінформація і підключення зовнішніх ресурсів -->
</head>
<body>
<!-- Зміст сторінки, включаючи зображення, форми та інші елементи -->
</body>
</html>
2.Вивчив інструменти текстового редактору NOTE PAD.
Notepad — текстовий редактор, призначений для програмістів і тих, кого не
влаштовує скромна функціональність програми «блокнот», що входить до
складу Windows.
Основні можливості Notepad
● Підсвітка синтаксису тексту залежно від мови програмування, режим
якої може налаштувати користувач;
● Можливість згортання блоків згідно з синтаксисом мови
програмування;
● WYSIWYG (друкуєш і отримуєш те, що бачиш на екрані);
● Автозавершення слова, що набирається;
● Одночасна робота з безліччю документів;
● Підтримка регулярних виразів для пошуку й заміни;
● Повна підтримка перетягування фрагментів тексту;
● Динамічна зміна вікон перегляду;
● Автоматичне визначення стану файлу;
● Збільшення і зменшення;
● Підтримка великої кількості мов;
● Нотатки;
● Плаґіни;
● Запис макроса і його виконання.
При встановленні додаткових плаґінів
● Шаблони тексту (сніпети), що вводяться за допомогою скорочень
(плаґін SnippetPlus);
● FTP-менеджер (плаґін NppFTP);
● Hex-редактор;
● Автозбереження (при втраті фокусу через певний проміжок часу);
● Перевірка орфографії (з використанням GNU Aspell);
● Симетричне й асиметричне шифрування тексту (при встановленні
плаґіна NppDarkCrypt);
● Підтримка Zen Coding;
● Підтримка автоматизації за допомогою скриптів мовами Python,
JScript, Lua та іншими;
● Підтримка збереження до OneDrive і Dropbox.
3. Опрацював теоретичні відомості на які були здійсненні посилання.
4.Створив файл form1.html і реалізував форму реєстрації користувача
5.Створив файл form2.html і реалізував форму реєстрації користувача.

6.Розробив розрахункову форму.

7.Знайшов в Інтернеті карту України.

Висновки
В даній лабораторній роботі я ознайомився з тегами мови HTML: зображення,
карти зображень, форми. Вивчив інструменти текстового редактору NOTE
PAD.
Використані джерела.

1. Конспект лекцій з дисципліни "Веб-технології та веб-дизайн" для студентів


напряму підготовки 6.050101 "Комп’ютерні науки" / Биковий П.Є., Палій І.О.,
Комар М.П. - Тернопіль: ТНЕУ, 2012.- 92 с.
2. https://fld.udpu.edu.ua/mahnolij-nejmovirna-krasa/

You might also like