Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>Что такое HTML</h2>

2 HTML (HyperText Markup Language)- язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. HTML появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.

3 Взгляните внимательно на страницу, на которой вы сейчас находитесь. Вся она вне зависимости от внешнего вида описана с помощью HTML. Это хорошо показывает, что какой бы сложной ни была страница, вся суть остается неизменной на протяжении более 20 лет.

4 Слово "язык" в HTML стоит воспринимать какправила. Сам по себе HTML толькоразмечаетданные, но никак с ними не взаимодействует и визуально с ними ничего не делает. Всю работу по выводу текстовых данных и разметки берет на себя браузер.

5 Вы можете попробовать открыть разметку этой страницы с помощью комбинации Ctrl + U (Cmd + Option + U на macOS).

6 Не пугайтесь всего того, что здесь есть. Со временем для вас это перестанет быть "магией", и вы с легкостью будете ориентироваться в HTML-разметке.

7 Давайте взглянем на небольшой пример HTML:

8 Прямо сейчас может показаться непонятным, что такое <section>, <h1>, . Но сейчас самое важное то, что за всеми этими конструкциями скрывается самое главное - текстовое содержание.

9 Всегда ставьте контентную часть главнее визуального вида. Курсы дадут вам множество различных приемов стилизации блоков, но не увлекайтесь. Если текст на странице трудно читать, то ценность страницы стремится к нулю.

10 <h2>Теги в HTML</h2>

11 Но что же означали эти загадочные <section>, <h1> и ? На языке разметки они называютсятегами. Именно теги оборачивают наш контент и в конечном итоге обрабатываются браузерами.

12 Один из таких тегов, о котором важно узнать, - параграф. Параграф, как и в реальной жизни, позволяет отделить по смыслу участки текста. Визуально это обычно делается с помощью отступов. На этой странице много параграфов, и вы можете их легко отличить друг от друга по отступам между ними.

13 Чтобы вставить параграф на страницу, необходимо указать специальную конструкцию и , между которыми вставить абзац текста.

14 Как вы заметили, у нас может быть не один параграф. Почти всеHTML-тегивозможно использовать много раз на странице.

15 У тега параграфа есть открывающая часть и закрывающая . Именно благодаря этому браузер понимает, где начинается параграф и где заканчивается. Такие теги называютсяпарными.

16 Как можно догадаться, если есть парные теги, то есть инепарныетеги. И вы не ошиблись! В процессе работы с версткой вы узнаете и о таких тегах, и об их применении. Не торопитесь :)

17 Другой ключевой концепцией, помимо тегов, являетсявложенность. Посмотрите еще раз на пример разметки:

18 В этом примере естьпарный тег section, и внутри него располагаются остальные теги и текст внутри них. Эта концепция является одной из основных, которая позволяет строить большие системы.

19 Иногда вложенность - это обязательная часть разметки текста. Например, списки невозможно построить без использования вложенности.

20 Браузер выведет эту HTML-разметку следующим образом:

21 <ul><li>Первый элемент списка</li>

22 <li>Второй элемент списка</li>

23 </ul>Без тегов <li> браузер не сможет отличить простой текст от элементов списка.

24 <h2>Атрибуты</h2>

25 Еще одна важная концепция HTML - атрибуты и их значение. Атрибуты - это просто дополнительная информация для браузера.

26 В HTML вы можете использовать ссылки, чтобы перемещаться по интернету. Недостаточно просто указать тег ссылки <a></a> и текст внутри.

27 Браузер, к сожалению, не умеет читать наши мысли и перенаправлять пользователя туда, куда мы хотели :(

28 Чтобы перенаправить пользователя, мы должны помочь браузеру и указать, куда пользователь переместится после клика на ссылку. Для этого используется атрибут href, значением которого является нужная ссылка.

29 Теперь при клике на ссылку пользователя успешно перенаправит по тому адресу, который мы указали внутри атрибутаhref.

30 <h2>Общая схема тегов HTML</h2>

31 <h2>Дополнительное задание</h2>

32 Воспользуйтесь любым онлайн-сервисом, который умеет преобразовывать HTML разметку. Например,<a>https://htmlcodeeditor.com/</a>.

33 Вставьте в левую область следующую разметку:

34 Посмотрите на итоговый результат. Попробуйте удалять различные теги и менять их. Экспериментируйте, никто за это не наругает :)