На этой странице

HTML Текст

HTML – Это язык разметки, мы познакомились как написать первую страницу — html, рассмотрели структуру html – страницы, узнали как можно подключить таблицы стилей – css, разделить страницу на блоки, сейчас можно перейти к изучению основных тегов – html, с помощью которых можно форматировать html – страницу, отдельные символы, целые блоки.

С помощью html – тегов можно отформатировать текст в html – страницы, визуально теги не отображаются на странице, мы видим только текст. И чтобы выделить текст полужирным или курсивным начертанием. Можно выделить часть текста или целый блок другим цветом, приходится использовать специальные теги, которые помогают нам это сделать. Каждый тег играет свою роль. Рассмотрим основные теги которые часто могут применяться для форматирования текста.

Полужирный текст в HTML

Тег и тег – Парные теги, с помощью этих тегов текст можно выделить полужирным шрифтом, подчеркнуть важность текста.

Приоритет имеет парный тег .

Полужирный текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Полужирный текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
b,strong {
    font-size: 1.2em;   /*Размер шрифта b,strong*/
}
    </style> 
  </head>
  <body>
  <h1>Полужирный текст в HTML</h1>  
<b>Полужирный шрифт.</b><br />
<strong>Важный фрагмент текста.</strong>  
  </body>
</html>

Открыть пример в новом окне

Полужирный текст

Наклонный текст в HTML

Тег и тег – Парные теги , выделяет текст наклоном (курсивом) .

Наклонный текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Наклонный текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
i,em {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h1>Наклонный текст в HTML</h1>  
<i>Текст выделенный курсивом.</i><br />
<em>Текст также выделенный курсивом.</em> 
  </body>
</html>

Открыть пример в новом окне

Наклонный текст

Подчеркнутый текст в HTML

Тег – Парный тег, отображает текст подчеркнутым.

Подчеркнутый текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Подчеркнутый текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
u {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h1>Подчеркнутый текст в HTML</h1>  
    <u>Подчеркнутый текст.</u>
  </body>
</html>

Открыть пример в новом окне

Подчеркнутый текст

Перечеркнутый текст в HTML

Тег <del> Парный тег, отображает текст как перечеркнутый.

Перечеркнутый текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Перечеркнутый текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
del,ins {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h1>Перечеркнутый текст в HTML</h1>  
    <del>Старый текст</del><br /> 
    <ins>Старый текст заменили новым.</ins>
  </body>
</html>

Открыть пример в новом окне

Перечеркнутый текст

Текст меньшего размера в HTML

Парный тег – помогает сделать текст меньшего размера.

Текст меньшего размера

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Текст меньшего размера</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
p {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h1>Текст меньшего размера в HTML</h1>  
    <p>Текст <small>меньшего</small> размера</p>
  </body>
</html>

Открыть пример в новом окне

Текст меньшего размера

Создание нижних и верхних индексов

Парный тег сдвигает текст выше уровня строки и делает текст меньше основного текста.

Создание нижних и верхних индексов

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Создание нижних и верхних индексов</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
p {
   font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h1>Создание нижних и верхних индексов</h1>  
    <p>Формула воды H<sub>2</sub>O<br />
    Единица измерения площади — м<sup>2</sup></p>
  </body>
</html>

Открыть пример в новом окне

Создание нижних и верхних индексов

Скрытый текст тег - <details>

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

Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя.

Рассмотрим несколько примеров с использование этого тега при написание html – страниц с подключением стилей css.

Текст скрыт при загрузке страницы

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Скрытый текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
details{
    width: 400px;
    font-size: 1.2em;
}
   </style> 
  </head>
  <body>
  <h1>Текст скрыт при загрузке страницы</h1>  
    <p><details>
   <summary>Развернуть или свернуть текст</summary>
   Скрытый текст</p>
</details>
  </body>
</html>

Открыть пример в новом окне

Текст скрыт при загрузке страницы

Текст открыт при загрузке страницы

С тегом <details> можно использовать атрибут open, данный логический атрибут указывает, пользователю, что при загрузке html – страницы текст будет открыт. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.

Текст открыт при загрузке страницы

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Текст открыт при загрузке</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
details{
    width: 400px;
    font-size: 1.2em;
}
   </style> 
  </head>
  <body>
  <h1>Текст открыт при загрузке страницы</h1>  
    <p><details open>
   <summary>Развернуть или свернуть текст</summary>
   Скрытый текст</p>
</details>
  </body>
</html>

Открыть пример в новом окне

Текст открыт при загрузке страницы

Тег <details> в рамке

Рассмотрим пример с подключение стилей css, чтобы тексту придать более лучший вид.

Тег <details> в рамке

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Тег details в рамке</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
details {
    border: 1px solid #aaa;    /* Бордюр ширина , цвет*/
    border-radius: 4px;    /* Бордюр закругление углов*/
    padding: .5em .5em 0;     /* Отступы внутри блока */
}
summary {     /* Стиль скрытого текста*/ 
    font-weight: bold;    /* Жирность шрифта*/ 
   margin: -.5em -.5em 0;    /* Отступы снаружи блока */ 
    padding: .5em;    /* Отступы внутри блока */ 
}
   </style> 
  </head>
  <body>
  <h1>Тег details в рамке</h1>  
    <p><details>
   <summary>Посмотреть скрытый текст</summary>
   <p>Скрытый текст</p>
</details></p>
</details>
  </body>
</html>
}
details{
    width: 400px;
    font-size: 1.2em;
}
   </style> 
  </head>
  <body>
  <h1>Текст открыт при загрузке страницы</h1>  
    <p><details open>
   <summary>Развернуть или свернуть текст</summary>
   Скрытый текст</p>
</details>
  </body>
</html>

Открыть пример в новом окне

Тег details в рамке

Добавление своих значков

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Добавление своих значков</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
details {
    border: 1px solid #aaa;    /* Бордюр ширина , цвет*/
    border-radius: 4px;    /* Бордюр закругление углов*/
    padding: .5em .5em 0;     /* Отступы внутри блока */
}
summary {     /* Стиль скрытого текста*/ 
    font-weight: bold;    /* Жирность шрифта*/ 
    margin: -.5em -.5em 0;    /* Отступы снаружи блока */ 
    padding: .5em;    /* Отступы внутри блока */ 
}
summary {
    display: block;    /*Расположение блоком*/ 
}
summary::-webkit-details-marker {
    display: none;    /*Скрываем маркер*/ 
}
summary::before {
    content: '\2B02';   /*Маркер при скрытом блоке*/
    padding-right: 0.5em;
}
details[open] > summary::before {
    content: '\2B07';   /*Маркер при раскрытом блоке*/ 
}
    </style> 
  </head>
  <body>
  <h1>Добавление своих значков</h1>  
    <p><details>
   <summary>Посмотреть скрытый текст</summary>
   <p>Скрытый текст</p>
</details></p>
</details>
  </body>
</html>

Открыть пример в новом окне

Добавление своих значков

Цвет текста

Тег – парный тег , в отличие от тега <div> отличается тем , что тег <div> является блочным тегом , а помощью тега можно выделить одно слово в тексте или несколько слов :

Выделение текста цвета

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Выделение текста цвета</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h1 {
    color: blue;
}
p {
    font-size: 1.2em;   /*Размер шрифта*/
}
span {    /*Стиль для всех элементов SPAN */
    font-size: 13pt;     /* Размер шрифта */
    color: blue;    /*Цвет шрифта */
    font-family: "Arial";    /* Название шрифта */
    font-weight: bold;    /*Жирность шрифта */
}
.text-color {    /* Стиль для класса .text-color*/
    font:  1em Georgia, Times, serif;    /*Размер, Название шрифта */
    color: #c80404;    /*Цвет шрифта */
    font-weight: bold;    /*Жирность шрифта */
    }   
    </style> 
  </head>
  <body>
  <h1>Цвет текста</h1>  
   <p>С помощью элемента <span>SPAN</span> можно выделить важное <span style="color: green">слово</span> внутри абзаца .</p>
<p>Можно выделить одно <span class="text-color">слово</span> в тексте  или <span class="text-color">несколько слов</span>.</p>
  </body>
</html>

Открыть пример в новом окне

Выделение текста цвета

Рекомендуемые материалы

Спецификации