Урок 1: Основи HTML для початківців

Мета: Навчитися використовувати базові HTML-теги для створення веб-сторінки.

Основні теги HTML

Кожна веб-сторінка складається з HTML-тегів, які пишуться в кутових дужках .

< >

1. Структура HTML-документа

<!DOCTYPE html>
<html>
  <head>
    <title>Моя перша сторінка</title>
  </head>
  <body>
    <h1>Ласкаво просимо!</h1>
    <p>Це моя перша сторінка на HTML.</p>
  </body>
</html>

<!DOCTYPE html>: Вказує, що це документ HTML5.
<html>: Основний тег, який обгортає весь вміст сторінки.
<head>: Розділ для метаінформації (заголовки, стилі, скрипти).
<title>: Назва сторінки, яка відображається у вкладці браузера.
<body>: Основний вміст сторінки.

2. Теги для тексту

<h1> - <h6>: Заголовки. Чим більше число, тим менший заголовок.
<p>: Абзац тексту.
<strong>: Жирний текст.
<em>: Курсив.

<h1>Це заголовок</h1>
<p>А це абзац тексту.</p>
<strong>Жирний текст</strong> і <em>нахилений текст</em>.

3. Списки

Маркирований список

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

Нумерований список

<ol>
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ol>

4. Посилання та зображення

Посилання:

<a href="https://example.com">Перейти на сайт</a>

Зображення:

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

Порада: Атрибут alt потрібен для опису зображення, якщо воно не завантажиться.

5. Таблиці

Таблиці допомагають упорядковувати дані:

<table>
  <tr>
    <th>Ім’я</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
</table>

<table>: Створює таблицю.
<tr>: Рядок таблиці.
<th>: Заголовок стовпця (жирний текст).
<td>: Комірка з даними.

6. Коментарі

Коментарі дозволяють додавати примітки в код:

<!-- Це коментар -->

Проста веб-сторінка на практиці

<!DOCTYPE html>
<html>
  <head>
    <title>Вивчаємо HTML</title>
  </head>
  <body>
    <h1>Привіт, світ!</h1>
    <p>Це мій перший крок у створенні веб-сайтів.</p>
    <ul>
      <li>Вивчаю HTML</li>
      <li>Створюю структуру сторінки</li>
    </ul>
    <a href="https://example.com">Мій улюблений сайт</a>
    <img src="example.jpg" alt="Приклад зображення">
  </body>
</html>

Веселий факт

HTML без CSS — це як піца без начинки. Вона працює, але виглядає трохи сумно. 🍕

Попередній урок

Наступний урок