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

Робота над зображеннями, покликанням та формами в

HTML (Visual Studio Code)

1. Створіть папку на диску D (або G, F тощо) з назвою HTML_lab.

2. У цій папці створіть папку Image.

3. Збережіть у папці Image три будь-які зображення (картинки) з

розширеннями: .jpg, .png, .gif. Назвіть ці зображення відповідно: Image_1.jpg,
Image_2.png, Image_3.gif.

4. Збережіть у папці HTML_lab будь-яке зображення з розширенням .jpg із

назвою Image_4.jpg.

3. Запустіть програму Visual Studio Code.

4. Відкрийте у Visual Studio Code папку HTML_lab.

Алгоритм: File → Open Foder…і знаходите папку HTML_lab.
Результат:

5. Створіть у Visual Studio Code у папці HTML_lab файл Lab_2.html.

Алгоритм: New File → Lab_2.html

6. Відкривайте файл Lab_2.html і використайте тег <img> для відображення

зображення (картинки) на Web-сторінці.

Тег <IMG> вставляє зображення в документ, як якщо б воно було просто

одним великим символом.
Синтаксис тега:
<IMG атрибут1=значення1... [АтрибутN=значенняN]>

Атрибути тега <IMG> та їх значення:

SRC="файл" – задає URL-адресу зображення (можна вказувати як
абсолютний, так і відносний URL-адреса; якщо файл із
зображенням знаходиться в тій же директорії, що і HTML-документ, то
досить просто вказати ім'я файлу); цей атрибут є обов'язковим
ALT="текст" – задає альтернативний текст для браузерів, що не
підтримують роботу з зображеннями
ALIGN="тип" – задає розташування картинки щодо тексту, тип може
приймати наступні значення: ТОР,
MIDDLE,
BOTTON,
LEFT,
RIGHT
BORDER=n – встановлює товщину обрамлення навколо зображення у пікселях
HEIGHT=n(%) – встановлює висоту зображення в пікселах або у відсотках від
висоти вікна браузера
WIDTH=n(%) – встановлює ширину зображення в пікселах або у відсотках
HSPACE=n – задає вільний простір зліва і праворуч від
зображення (у пікселях)
VSPACE=n – задається вільний простір над і під зображенням (у пікселях)

 Пропишіть наступний код, при цьому вкажіть самостійно значення

атрибутів.

 Використавши клавішу F5 або Run у рядку меню Visual Studio Code

перевірте відображення зображень у браузері.
!!! Після зміни запису коду обов’яково зберігайте його використовуючи
комбінацію клавіш Ctrl+S або ж File→Save.
Вікно Web-сторінки у браузері закривати непотрібно, але після кожного
збереження коду перезавантажуйте її.
7. У файлі Lab_2.html використайте пару тегів <a> </a> для відображення
покликання на Web-сторінці.
Для цього продовжіть запис коду (продовжуємо після <img
src="./Image/Image_5.gif" alt="Gift">

 Продовжіть пропис наступного коду, при цьому вкажіть самостійно

розділи та джерела покликання.

 Збережіть зміни у коді та перезавантажте свою Web-сторінку.

8. У файлі Lab_2.html використайте пару тегів <form> </form> для

відображення форми на Web-сторінці. Також застосуйте пару тегів <label>
</label> та тег <input> з відповідними атрибутами.

HTML тег <input> є одним з різнобічних елементів форми і дозволяє створювати

різні елементи інтерфейсу і забезпечити взаємодію з користувачем. Головним
чином <input> призначений для створення текстових полів, різних кнопок,
перемикачів і прапорців.

Елемент введення <input> може мати різний вигляд – залежить від атрибуту type.

За допомогою HTML тегу <input> можна створити наступну елементи форми.

Атрибут type може приймати значення:

text - текстове поле.

password - поле з паролем.
radio - перемикач.
checkbox - прапорець.
hidden - приховане поле.
button - кнопка.
submit - кнопка для відправки форми.
reset - кнопка для очищення форми.
file - поле для відправки файлу.
image - кнопка із зображенням.
 Для кожного елемента існує свій перелік атрибутів, які визначають його вид
і характеристики.

Тег <label> використовують, щоб визначити мітки для <input> елементів.

<input> – це порожній елемент, його не потрібно закривати тегом </input> і він

містить тільки атрибути.
 Існує два способи зв'язування об'єкта і мітки. Перший полягає у
використанні ідентифікатора id всередині елемента форми і надання його імені в
якості атрибута for тега <label>. При другому способі елемент форми поміщається
всередину контейнера <label>.
Для цього продовжіть запис коду:

 Збережіть зміни у коді та перезавантажте свою Web-сторінку.

Творче завдання:
Застосуйте ще 5 інших типів атрибуту type.