Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Работаем с текстом в html

В этом уроке мы с вами подробно разберем html работу с текстом, расширим базу знаний в области тегов, а именно тегов работы с текстом.

Один из самых главных и основных тегов формирования текста мы уже рассматривали, а именно <p> тег абзаца, он используется повсеместно и о нем нет смысла больше рассказывать. Теперь давайте перейдем еще к некоторым очень интересным тегам, а именно заголовки. Вот пример как это выглядит:

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
… и т.д. до <h6>

Как правило, на практике применяют заголовки не ниже <h3>, но все зависит от ситуации. Хотелось бы немного отметить особенность этих тегов, они очень важны при поисковой оптимизации, тег <h1> на странице рекомендуют использовать не чаще одного раза, так как это главный заголовок, и он должен быть один. Тег <h2> так же немаловажен, им рекомендуется обозначать заголовки разделов или в тексте ключевые моменты, использовать его желательно не больше 10 раз на странице. Оставшиеся заголовки можете использовать, как хотите, они уже менее важные.

Идем дальше теперь давайте поговорим о тегах акцентирования, а именно выделение текста, это осуществляется с помощью двух тегов, <strong> и <b> Пример:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<p>Это пробный абзац, на котором мы можем <b>наглядно увидеть</b>, как работают различные виды <strong>тегов акцентирования</strong> на практике.</p>
</body>
</html>

Вот что мы видим в браузере:

Теги акцентирования

Эти теги могут использоваться внутри тега <p>, то есть они могут быть вложенными, и не только в этот тег, так же и в другие. Как вы могли заметить эффект от этих двух тегов абсолютно одинаковый, но это лишь для человека. Разница между тегами <b> и <strong> в том, что тег <b> это тег физического формирования текста, а <strong> логического, в результате первый тег просто выделяет текст, а второй делает на нем определенный акцент, хотя в браузере разницы вы ни какой не увидите.

Продолжаем изучать теги акцентирования и тут же есть еще два похожих тега, это теги курсивного текста. Пример:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<p>Это пробный абзац, на котором мы можем <i>наглядно увидеть</i>, как работают различные виды <em>тегов акцентирования</em> на практике.</p>
</body>
</html>

Тут ситуация примерна та же самая, что и в предыдущем случае, тег <i> это у нас физическое формирование, <em> логическое, соответственно обладают всеми теми же свойствам, такими как вложенность и значимость.

С тегами акцентирования мы закончили, давайте дальше разбираться, какие ещё html теги бывают для работы с текстом. Есть такие интересные теги как <sub> и <sup> давайте на примере посмотрим, что они могут:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<p>Это пробный абзац, на котором мы посмотрим как работают теги sub и sup например М<sup>2</sup> и на примере химической формулы H<sub>2</sub>О.</p>
</body>
</html>

А вот что в браузере видим:

Теги работы с текстом

Достаточно специфические теги, но они очень часто пригождаются.

И последний тег по теме html работа с текстом, это тег <pre>, синтаксис следующий:

<pre> Текст пишется как есть, включая все пробелы</pre>

Смысл этого тега в следующем, все что вы в него скопируете, будет отображаться так как есть, со всеми пробелами и прочим, это пожалуй удобно при переносе больших объемов текста, но лично я этим тегом вообще не пользуюсь.

На этом все, я думаю, данный урок должен значительно расширить ваши функциональные возможности в плане создания сайта и вы уже сами можете производить html работу с текстом.

Дата публикации:2014-04-01


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget