Введение в HTML

Что такое HTML?

HTML (Hyper Text Markup Language) - стандартный язык разметки для создания веб-страниц.

  • Описывает структуру веб-страниц с использованием разметки.
  • Элементы, представленные тегами, являются строительными блоками HTML-страниц.
  • Теги обозначают фрагменты контента, такие как «заголовок», «абзац», «таблица» и т. д.
  • Браузеры не отображают теги, а используют их для отображения содержимого страницы.

Простой HTML-документ

Объявление <!DOCTYPE html> определяет этот документ как HTML5.

<html> является корневым элементом html-страницы

<head> содержит метаинформацию о документе

<title> указывает название страницы

<body> содержит видимый контент страницы

<h1> определяет большой заголовок

<p> определяет абзац

Теги HTML

Теги html - это имена элементов, окруженные угловыми скобками:

<тег>Содержимое тега</тег>

Обычно теги html попадают в пары, например <p> и </p>. Первый тег в паре - это начальный тег (или открывающий), второй тег - конечный тег (или закрывающий). Конечный тег написан как начальный тег, но с косой чертой, вставленной перед именем тега.

Заголовки HTML

Заголовки html определяются тегами <h1> to <h6>.

<h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок.

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<h3>Заголовок 3</h3>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Параграфы HTML

HTML-параграфы определяются тегом <p>:

<p>Это параграф.</p>

<p>Это другой параграф</p>

Это параграф.

Это другой параграф

Атрибуты HTML

Все элементы html могут иметь атрибуты

Атрибуты предоставляют дополнительную информацию об элементе

Атрибуты всегда указываются в начальном теге

Атрибуты обычно входят в пары имя / значение:

name="value"

Ссылки HTML

HTML-ссылки определяются тегом <a>:

<a href="https://vk.com">Это текст ссылки</a>

Это текст ссылки

Картинки HTML

Изображения определяются тегом <img>.

Исходный файл (src), альтернативный текст (alt) предоставляются в качестве атрибутов:

<img src="lol.jpg" alt="lold"/>

<img src="invalid.jpg" alt="lold"/>

lold

Списки HTML

Списки определяются с помощью <ul> (список неупорядоченных / маркеров) или тега <ol> (упорядоченный / пронумерованный список), за которым следуют теги <li> (элементы списка):

<ul>
    <li>кофе</li>
    <li>чай</li>
</ul>

<ol>
    <li>Встать</li>
    <li>Посмотреть время</li>
    <li>Лечь обратно</li>
</ul>

  • кофе
  • чай
  1. Встать
  2. Посмотреть время
  3. Лечь обратно

Редакторы

Веб-страницы могут быть созданы и изменены с помощью профессиональных редакторов html.

Однако для изучения html можно использовать и простой текстовый редактор, (даже блокнот).