HTML для начинающих - Полный курс (2025). Урок №2:Теги для контента

Урок о контентных тегах HTML: заголовки H1-H6, списки ul/ol, абзацы p, неразрывные пробелы, переносы, изображения img, ссылки a. Курс HTML для начинающих, урок 2.

Chapters

Почему браузер объединяет весь текст в одну строку?

HTML игнорирует обычные пробелы и переносы строк в исходном коде. Без тегов весь текст воспринимается как единый блок, и браузер переносит его только при достижении края экрана. Для структурирования используются специальные теги.

Как правильно использовать заголовки H1-H6?

H1 — самый главный заголовок страницы, отражающий её суть. H2 используется для блоков, H3 — внутри блоков с H2. Порядок должен соблюдаться строго по иерархии, а на практике редко используют даже H4.

Как добавить ссылку, которая открывается в новой вкладке?

Нужно использовать тег a с атрибутом href, указывающим адрес, и добавить атрибут target со значением _blank. Тогда при клике ссылка откроется в новом окне, а исходный сайт останется открытым.

Full Transcript — Download SRT & Markdown

Speaker A

Привет Сегодня разберём самые популярные теги для работы с контентом Готов давай начинать Я открыл проект первого урока и добавил вот этот контент если мы сейчас нажмём cter S Кстати чтобы притер который мы установили тоже на прошлом уроке не схлопнулась в Единый текст так

Speaker A

как без тегов всё что мы пишем в HTML это сплошной текст а я зашёл в настройки и на прошлом уроке мы устанавливали формат UN Save галочку здесь а я её сейчас убрал нажимаю cter S и Давайте откроем наш сайт в браузере и видим что

Speaker A

Несмотря на то что у нас в ходе установлены пробелы и переносы строк браузер это видит Как одну сплошную строку и переносит текст только там где уже заканчивается экран Давайте используем контентные теги чтобы наш контент отображался корректно на странице для заголовков в HTML

Speaker A

используется тег H H1 это самый главный заголовок на странице вообще в HTML шесть уровней заголовков то есть H1 H2 вход с помощью плагина emit может развернуть нам все шесть заголовков с помощью такой комбинации пишем H указываем знак доллара знак умножения и

Speaker A

после умножения количество элементов которые нам нужно нажимаем Tab и вот здесь он развернул нам шесть заголовков Давайте в каждый из них запишем контент и посмотрим как это выглядит в браузере для того чтобы поставить курсор в несколько мест зажимаем Alt и потом куда

Speaker A

кликаем там установится курсор нажимаем CS переходим в браузер обновляем страницу видим наш H1 H2 H3 H6 самый маленький H1 - это самый главный заголовок на странице он отображает всю суть сайта дальше заголовок H2 мы уже используем для заголовков внутри

Speaker A

отдельных блоков заголовок H3 используем внутри блока где уже есть заголовок H2 мы не можем рандомном порядке назначать заголовки заголовки идут строгой иерархии в связи с этим в реальной разработке самый маленький заголовок который я видел это был заголовок H4 и

Speaker A

то он встречался мне несколько раз поэтому и в наших примерах мы будем использовать только их Давайте здесь мы это удалим далее У нас идёт блок и заголовок блока со списками как я уже сказал ранее для заголовков блоков мы

Speaker A

используем г H2 для создания списков мы используем Тег Это для маркированного списка и ol для нумерованного у нажимаем Tab и внутри него То есть это родительский блок для списка а внутри него каждый пункт Меню мы оборачиваем то же в специальный тег он называется Le он

Speaker A

одинаковый и для ol списков и для UL Давайте скопирую у список только здесь у заменим на о притер Нам сейчас не помогает поэтому руками поправим и вот этот контент поместим сюда переходим в браузер и видим что у нас есть отдельный

Speaker A

блок с заголовком и двумя списками если мы добавим ещё несколько пунктов то вот так будет нагляднее выглядеть следующий блок - это у нас блок с текстом заголовок у него будет также H2 а Для текста мы используем г P каждый

Speaker A

абзац текста мы кладём внутрь тега P нажимаем cter S переходим в браузер теперь каждая строка обёрнутый абзацам который имеет между собой отступы но как вы можете заметить пробелов и переноса не произошло для того чтобы поставить длинный пробел между словами мы можем использовать либо

Speaker A

специальный символ либо использовать CSS так как до CSS мы ещё не дошли Давайте используем специальный символ записывается он следующим образом ставим амперсанд NB SP и точка запятой каждый такой символ добавляет один неразрывный пробел Пустим у нас будет пять пробелов

Speaker A

если захотим больше копируем всё сразу вставляем обновляем и видим что у нас теперь уже 10 пробелов между словами следующий блок - это блок с переносом текста и здесь мы используем тег б пишем б нажимаем Tab переходим в браузер и

Speaker A

теперь после слов вот здесь идёт перенос текста на следующую строку также мы можем указывать такую Разде делительную черту с помощью тега HR зайдём в браузер видим теперь у нас наглядно блоки разделены переходим к следующему блоку заголовок у него будет также H2 и вот

Speaker A

если в этом блоке Нам нужен подзаголовок используем тег H3 для подзаголовка теперь добавление изображения здесь мы Этот текст уже можем удалить добавляем изображение с помощью тега AMG нажимаем Tab добавляются ещё два атрибута src - это источник то есть мы должны указать

Speaker A

Откуда мы хотим получить картинку а Alt - это альтернативный текст если мы здесь ничего не укажем в src или укажем неправильный путь то браузер выведет альтернативный текст хорошая практика всегда что-то писать Аль Давайте добавим изображение в наш проект для этого я с

Speaker A

рабочего стола просто перетащил в проект какое-то изображение и теперь так как наш индекс HTML и превьюшка находится на одном уровне я могу просто написать название файла Ну вот VC уже подсказывает нажимаем Tab для того чтобы здесь эта иконка отображалась нужно

Speaker A

установить расширение Image preview оно называется вот так выглядит устанавливаете и тоже когда будете подключать картинку будете видеть эту иконку это очень удобно сразу можно видеть правильный путь или нет Давайте в альтернативном тексте напишем что это preview переходим в браузер обновляем и

Speaker A

видим что наша картинка успешно добавлена также и заголовок и подзаголовок Вот видите H3 уже меньше шрифтом и не такой жирный как H2 сейчас картинка огромная она занимает больше чем даже ширина экрана моего Всё потому что картинка если мы не задаём ей размер

Speaker A

будет занимать ровно столько места какой у неё размер по умолчанию для того чтобы уменьшить её и задать нам необходимый размер Мы можем здесь использовать свойства vz пикселей наша картинка занимает 400 пикселей а высота рассчиталась автоматически и последний блок блок с ссылками заголовок у него

Speaker A

также будет H2 и Также как для картинок для добавления ссылки на страницу используется специальный тег тег а нажимаем Tab здесь внутри тега А мы должны прописать какой-то текст по клику на который будет что-то происходить наша ссылка будет вести на YouTube видео и

Speaker A

вот в атрибут хф мы должны указать ссылку на это видео я укажу ссылку на своё первое видео у вас это может быть абсолютно любая ссылка и Давайте перейдём в браузер обновим видим нашу ссылку YouTube видео кликаем и всё

Speaker A

открылось а но сейчас Вы видите что мы покинули наш сайт и в этом окне открылся другой сайт чтобы этого не происходило мы должны прописать атрибут который называется Target со значением Blank обновляем страницу кликаем и теперь Наше видео открывается в новом окне а наш

Speaker A

сайт остаётся в том окне в котором он и был теперь ты можешь наполнить сайт практически любым контентом и он будет корректно отображаться на странице в следующем уроке мы изучим строительные теги и разберёмся в разнице между между блочными и строчными тегами подписывайся

Speaker A

на канал увидимся в следующем видео

Topics:HTMLтегизаголовки H1-H6списки ul olизображения imgссылки aверстка для начинающихEmmet

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools