Форматирование текста в HTML.

Форматирование текста в HTML.

Здравствуйте! Сегодня мы начнем разговор про теги в языке HTML, а именно про заголовки H1, H2, H3, H4, H5, H6, про абзацы P и переносы строки Br, а также про тэг горизонтальной линии HR, на примере которого мы рассмотрим использование атрибутов и посмотрим, где можно будет узнать все возможные для каждого элемента атрибуты и подглядеть синтаксис значений для них.

Для форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие — редко (их и не надо запоминать). Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками

h1…h6

Форматирование текста HTML

 

Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого — самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

  • left — слева,
  • right — справа,
  • center — по центру,
  • jastify — по ширине.

Пример кода:

<html> 
<head>
 <title>Форматирование html</title> 
</head> 
<body> 
<h1>Это заголовок первого уровня</h1> 
<h2>Это заголовок второго уровня</h2> 
<h3>Это заголовок третьего уровня</h3> 
<h4 align="right">Это заголовок четвертого уровня</h4> 
<h5 align="center">Это заголовок пятого уровня</h5> 
<h6 align="jastify">Это заголовок шестого уровня</h6> 
Это просто текст 
</body> 
</html>

Просмотреть  пример

 

Теги разделения на абзацы и переноса строки

Тег <br> — тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.

У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:

  • left — слева,
  • right — справа,
  • center — по центру,
  • jastify — по ширине.
Читайте также  Как сделать список в HTML

Пример кода:

<html> 
 <head> 
 <title>Форматирование html</title> 
 </head> 
 <body> 
 <p align="left">Это абзац, он отделен от всего текста пустыми строками сверху и 
 снизу и выровнен по левому краю.</p> 
 <p align="right">Это абзац, он отделен от всего текста пустыми строками сверху и 
 снизу и выровнен по правому краю.</p> <p align="center">Это абзац, он отделен от всего 
 текста пустыми строками сверху и снизу и выровнен по центру.</p> 
 Это просто текст. <br> Это текст с новой строки. 
 </body> 
 </html>

Просмотреть  пример

 

Теги, выделяющие текст курсивом

<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
Эти теги выделяют текст курсивом, но делают они это по разным причинам.

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

Пример кода:

<html> 
<head> 
<title>Форматирование html</title> 
</head> 
<body> 
<cite> Этот текст в тегах cite </cite><br> 
<dfn> Этот текст в тегах dfn </dfn><br> 
<em> Этот текст в тегах em </em><br> 
<i> Этот текст в тегах i </i> 
</body> 
</html>

Просмотреть  пример

 

Теги, выделяющие текст полужирным шрифтом

<strong></strong>
<b></b>
Оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый.

Пример кода:

<html> 
<head> 
<title>Форматирование html</title> 
</head> 
<body> 
Просто текст<br> 
<strong> Этот текст в тегах strong </strong><br> 
<b> Этот текст в тегах b </b> 
</body> 
</html>

Просмотреть  пример

 

Теги, выделяющие текст подчеркиванием

<ins></ins>
<u></u>
Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый.

Пример кода:

<html> 
<head> 
<title>Форматирование html</title> 
</head> 
<body> Просто текст<br> 
<ins> Этот текст в тегах ins </ins><br> 
<u> Этот текст в тегах u </u> 
</body> 
</html>

Просмотреть  пример

Читайте также  Теги div и span

Теги, выводящие текст моноширинным шрифтом

<kbd></kbd>
<samp></samp>
<tt></tt>
Выводят текст моноширинным шрифтом, но предпочтительнее использовать первый.

Пример кода:

<html> 
<head> 
<title>Форматирование html</title> 
</head> 
<body> Просто текст<br> 
<kbd> Этот текст в тегах kbd </kbd><br> 
<samp> Этот текст в тегах samp </samp><br> 
<tt> Этот текст в тегах tt </tt> 
</body> 
</html>

Просмотреть  пример

Теги, выводящие текст в верхнем и нижнем индексах

Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Удобны для вывода математических и химических формул.

Пример кода:

<html> 
<head> 
<title>Форматирование html</title> 
</head> 
<body> y=x<sup>2</sup> - уравнение параболы.<br>
<br> H<sub>2</sub>O - формула воды. 
</body> 
</html>

Просмотреть  пример

 

Тег center

Теги <center></center> предназначен для выравнивания всех элементов внутри него по центру окна браузера.

Пример кода:

<html> 
<head> 
<title>Форматирование html</title> 
</head> 
<body> Это простой текст 
<center>Это выровненный по центру текст.</center> 
</body> 
</html>

Просмотреть  пример

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: