Добрый день!
Меня зовут Николай и это канал HTML/CSS-курсы.
Сегодня мы с вами будем изучать HTML-теги, которые используются для форматирования текста. Предыдущие лекции вы можете найти на моём канале. Не забудьте подписаться, чтобы не пропустить новые выпуски.
На предыдущем занятии мы с вами остановились на том, что ознакомились со "скелетом" HTML-документа. Давайте вернёмся к этому документу. В нём мы прописали обычным текстом в теге body "Привет, мир!". Этот текст сейчас не имеет никакого определения. Он написан ни под одним из тегов, которые определяют, что это за текст.
Сейчас я предлагаю вам сделать эту надпись заголовком страницы. Для этого поместим её в парный тег <h1>. Этот тег определяет текст, как заголовок 1-го уровня. Самый большой заголовок. Всего есть 6 уровней заголовков.
Сохраняем документ, открываем через браузер и видим, что текст стал значительно больше и выделен жирным шрифтом:
Также существуют теги заголовков <h2>, <h3>, <h4>, <h5> и <h6>. Каждый следующий меньше предыдущего:
Как правило в работе используются только первые четыре уровня. <h5> и <h6> вы вряд ли где-то увидите и мало вероятно, что будете использовать. Но знать о них, конечно же, стоит.
Итак, мы ознакомились с заголовками. Теперь давайте разберём тег, который делает из текста абзац. Это парный тег <p>. Давайте сделаем на нашей странице абзац. Пишем <p>Какой-то текст...</p> и смотрим на страницу:
Этот тег обозначает именно абзац, поэтому, если мы напишем ещё тег <p>Снова текст...</p>, то он у нас появится уже новым абзацем:
Помимо нового абзаца, мы можем оформить в тексте обычный перенос текста на новую строку. Такой перенос осуществляется с помощью тега <br>. Этот тег является одинарным. Давайте вставим в наш документ текст побольше и проверим этот тег:
Мы видим, что нового абзаца нет. Текст просто был перенесён на следующую строку на том месте, где расположен тег <br>.
Дальше разберём, как выделить текст жирным шрифтом. Для этого ту часть текста, которую вы хотите выделить, нужно заключит в парный тег <b>. Выглядеть это будет следующим образом:
Есть также альтернатива данному тегу - это тоже парный тег <strong>. Между этими тегами есть разница. Тег <strong> указывает важность этого текста для поисковых систем, в то время как тег <b> просто изменяет текст визуально.
Это не единственные теги для выделения текста. Конечно, мы не забываем и про выделение курсивом (наклонный текст). Для этого существует тег <i>. По аналогии с тегом <b>, мы заключаем в него ту часть текста, которую хотим выделить:
У данного тега также есть аналог - это тег <em>.По принципу работы он схож с тегом <strong>. Он также указывает на значимость текста вашего сайта для поисковиков.
Также как и в текстовых редакторах, помимо выделения жирным шрифтом или курсивом, мы можем с вами подчеркнуть или перечеркнуть какую-то часть текста. <u> - подчёркивание, <s> - перечёркивание. По аналогии с двумя предыдущими, в этот тег заключается та часть текста, которую вы хотите выделить:
Вспомним, что ещё при работе с текстом немаловажно уметь делать списки. Да, в HTML и для этого есть специальные теги. Списки можно делать нумерованные и ненумерованные.
Для начала разберём, как делать ненумерованный список. Сам список заключается в парный тег <ul>. Внутри него мы будем писать элементы списка, каждый из которых заключается в тег <li>. Выглядеть это будет следующим образом:
Естественно, теги, для полноценного редактирования текста, комбинируем между собой. К примеру, ставим заголовок <h4> и список:
Теперь разберём, как делать нумерованный список. Он пишется также, только вместо <ul> используется тег <ol>. Элементы списка также пишутся в тегах <li>.
Есть ещё один вариант списка, который я, на своей памяти, никогда не использовал, но о нём тоже нужно знать. Это многоуровневый список без каких-либо знаков перед элементами списка. Создаётся следующим образом:
- сначала мы создаём парный тег <dl>, который обозначает сам список;
- внутри тега <dl> создаём парный тег <dt>, в котором прописываем какой-то подзаголовок списка;
- после тега <dt> создаём тег <dd>, в котором уже прописывается описание подзаголовка.
Такой список используется крайне редко. Наверное, так можно писать какие-то рецепты:
Вот мы с вами и разобрали основные HTML-теги для работы с текстом. На сегодня это всё. Если у вас остались вопросы по данной теме, пишите в комментарии под статьёй. Не забывайте подписываться на канал, чтобы не пропустить новые выпуски!