Практична робота №1: Вступ до HTML

Мета:

1. Теоретичні основи

Що таке HTML?

HTML (HyperText Markup Language) – це мова розмітки гіпертексту, яка використовується для створення веб-сторінок. Вона задає структуру документа за допомогою тегів.

Що таке тег у HTML?

Тег – це спеціальний елемент HTML, який визначає, як буде виглядати певна частина веб-сторінки.

Парні та одинарні теги

Парні теги мають відкриваючий і закриваючий тег:

<p>Це абзац</p>

Одинарні теги не мають закриваючого тегу:

<img src="image.jpg" alt="Опис зображення">

2. Основні HTML-теги

Тег Опис
<html>Кореневий елемент HTML-документа
<head>Містить мета-інформацію про документ
<body>Містить основний вміст сторінки
<h1> - <h6>Заголовки різних рівнів
<p>Абзац тексту
<a href="URL">Посилання
<img src="URL" alt="Опис">Зображення
<table>Таблиця
<tr>Рядок таблиці
<td>Комірка таблиці
<th>Заголовок стовпця в таблиці
<form>Форма для введення даних
<input>Поле введення
<button>Кнопка
<textarea>Багаторядкове поле введення тексту
<select>Випадаючий список
<option>Опція у випадаючому списку
<label>Мітка для елементів форми
<ul>Маркірований список
<ol>Нумерований список
<li>Елемент списку
<div>Блоковий контейнер
<span>Рядковий контейнер
<br>Перенесення рядка
<hr>Горизонтальна лінія
<iframe>Вбудовує зовнішні ресурси, наприклад, відео

3. Завдання

  1. Створіть файл index.html.
  2. Додайте заголовки (h2, h3).
  3. Напишіть абзац (p) із будь-яким текстом.
  4. Додайте списки (ul і ol).
  5. Додайте посилання та зображення.
  6. Створіть таблицю 3x3 із заголовками.
  7. Додайте форму з текстовим полем, кнопкою та чекбоксом.
  8. Додайте випадаючий список (select).

4. Додаткове завдання

Створіть другу сторінку about.html і додайте посилання на неї з index.html.

Вставте відео з YouTube за допомогою <iframe>.

Успіхів у навчанні!