0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h3>Немного формальностей</h3>
1
<h3>Немного формальностей</h3>
2
<p>Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.</p>
2
<p>Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.</p>
3
<p>Вкратце:</p>
3
<p>Вкратце:</p>
4
<ol><li>Страница состоит из<strong>элементов</strong>.</li>
4
<ol><li>Страница состоит из<strong>элементов</strong>.</li>
5
<li>Элемент - это набор из<strong>тегов</strong>и<strong>содержания</strong>.</li>
5
<li>Элемент - это набор из<strong>тегов</strong>и<strong>содержания</strong>.</li>
6
<li>Теги чаще всего идут парами:<strong>открывающий</strong>(<tag>) и<strong>закрывающий</strong>(</tag>). Между ними находится то, что попадает под действие этого тега.</li>
6
<li>Теги чаще всего идут парами:<strong>открывающий</strong>(<tag>) и<strong>закрывающий</strong>(</tag>). Между ними находится то, что попадает под действие этого тега.</li>
7
<li>Открывающий тег может содержать дополнительную информацию -<strong>атрибуты</strong>и<strong>значения</strong>атрибутов. Атрибуты позволяют "настроить" тег.</li>
7
<li>Открывающий тег может содержать дополнительную информацию -<strong>атрибуты</strong>и<strong>значения</strong>атрибутов. Атрибуты позволяют "настроить" тег.</li>
8
</ol><p>В примере из предыдущего урока есть элемент a (anchor - якорь), состоящий из открывающего и закрывающего тегов <a></a>.</p>
8
</ol><p>В примере из предыдущего урока есть элемент a (anchor - якорь), состоящий из открывающего и закрывающего тегов <a></a>.</p>
9
<p>Это<strong>ссылка</strong>, и у неё есть атрибут href со значением https://ru.hexlet.io. Между открывающим и закрывающим тегами находится содержание - слово "Хекслет". Именно оно становится ссылкой.</p>
9
<p>Это<strong>ссылка</strong>, и у неё есть атрибут href со значением https://ru.hexlet.io. Между открывающим и закрывающим тегами находится содержание - слово "Хекслет". Именно оно становится ссылкой.</p>
10
<p>А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element - "самозакрывающиеся элементы".</p>
10
<p>А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element - "самозакрывающиеся элементы".</p>
11
<p>Как видите, мы указали атрибут src (от английского "source" - источник) со значением https://i.imgur.com/789p0uP.png. Это адрес файла изображения.</p>
11
<p>Как видите, мы указали атрибут src (от английского "source" - источник) со значением https://i.imgur.com/789p0uP.png. Это адрес файла изображения.</p>
12
<p>А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:</p>
12
<p>А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:</p>
13
<p>Это - пронумерованный список (ordered list), поэтому тег называется <ol>. А каждая строчка списка - это элемент списка (list item) - <li>.</p>
13
<p>Это - пронумерованный список (ordered list), поэтому тег называется <ol>. А каждая строчка списка - это элемент списка (list item) - <li>.</p>
14
<p>На странице это будет выглядеть примерно так:</p>
14
<p>На странице это будет выглядеть примерно так:</p>
15
<ol><li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
15
<ol><li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
16
<li>Не заставляйте меня думать (Steve Krug)</li>
16
<li>Не заставляйте меня думать (Steve Krug)</li>
17
<li>Дизайн привычных вещей (Donald Norman)</li>
17
<li>Дизайн привычных вещей (Donald Norman)</li>
18
</ol><p>А непронумерованный список (unordered list) создаётся с помощью <ul>. Заметьте, что достаточно лишь изменить открывающий и закрывающий тег всего списка, а сами элементы списка изменять не нужно.</p>
18
</ol><p>А непронумерованный список (unordered list) создаётся с помощью <ul>. Заметьте, что достаточно лишь изменить открывающий и закрывающий тег всего списка, а сами элементы списка изменять не нужно.</p>
19
<p>Вся мощь HTML заключается в возможности вкладывать элементы в элементы. Поэкспериментируйте с этим примером. Попробуйте понять, для чего нужен каждый тег.</p>
19
<p>Вся мощь HTML заключается в возможности вкладывать элементы в элементы. Поэкспериментируйте с этим примером. Попробуйте понять, для чего нужен каждый тег.</p>
20
<p><a>https://codepen.io/hexlet/pen/EwOeOr</a></p>
20
<p><a>https://codepen.io/hexlet/pen/EwOeOr</a></p>