HTML — 5 хвилинний посібник. Все, що потрібно знати, щоб почати!

pic

Браузер розуміє лише HTML.
Тому навіть якщо ви будуєте сайт на React, насправді React у фоновому режимі перетворює весь код на HTML, щоб браузер міг його зрозуміти.

Що таке HTML?
HTML означає HyperText Markup Language (Мова розмітки гіпертексту). Це стандартна мова розмітки, яка використовується для створення та структурування контенту в Інтернеті. HTML є основою веб-сторінок і надає структуру для контенту, який з'являється на сайті.

HTML-документи є текстовими і складаються з серії елементів, які організовують та визначають структуру веб-сторінки. Елементи представлені тегами, які знаходяться в кутових дужках, наприклад

. Кожен елемент може містити контент і додаткові атрибути, які надають інформацію про елемент.

pic

Основи HTML

  1. Елементи - будівельні блоки HTML-сторінок
  2. Теги — визначають різні частини контенту (іменники), наприклад —
    ,
  3. Атрибути — деякі характеристики тегів. Вони надають додаткову інформацію про елементи (прикметники) — наприклад src, bgcolor, color.
  4. Коментарі Коментарі використовуються для додавання нотаток або описів у код, які не видно користувачам під час рендерингу сторінки в веб-браузері. Коментарі в HTML-документі можна вставляти так:
<!-- Це коментар -->

Основна структура HTML

<html>
  <head>
    <title>Моя веб-сторінка</title>
  </head>
  <body>
    <h1>Це заголовок</h1>
    <p>Це абзац тексту.</p>
  </body>
</html>

Основні елементи HTML

Рекомендую спробувати кожен з них і подивитися, що буде. А для глибшого вивчення теорії, якщо у вас буде більше часу, ось справжній скарб документації https://www.w3schools.com/html/default.asp

1. Заголовки
HTML надає шість рівнів заголовків від

до

.

<h1>Це заголовок 1</h1>
<h2>Це заголовок 2</h2>
<h6>Це заголовок 6</h6>

2. Абзаци
Щоб створити абзаци:

<p>Це абзац.</p>
<p>Це ще один абзац.</p>

3. Посилання
Створення посилань за допомогою тегу :

<a href="https://example.com">Відвідати приклад</a>

4. Зображення
Вставка зображень за допомогою тегу :

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

5. Списки
Створення впорядкованих та невпорядкованих списків:

<ul>
  <li>Елемент 1</li>
  <li>Елемент 2</li>
</ul>

<ol>
  <li>Елемент 1</li>
  <li>Елемент 2</li>
</ol>

6. Форми
Основна структура форми за допомогою

, та