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

15.10.2022 15:01

    Для форматирования текста существует много тегов. Одни их них используются часто, другие - редко. В данной статье мы рассмотрим те, которые используются довольно часто.

 
    Теги, делающие текст заголовками
 
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
 

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

    Эти теги могут использоваться с параметром горизонтального выравнивания 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>
 
   <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>
     
    В окне браузера это будет выглядеть так:
 
 
Теги, выводящие текст моноширинным шрифтом
 
    <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>
     
    В окне браузера это будет выглядеть так:
 
 
Тег font и его параметры
 
    Теги <font></font> указывают параметры шрифта текста:
 
    face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
 
    size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
 
    color - цвет текста (по умолчанию - черный).
 
    Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.
 
    С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").
 
    Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web.
 
Пример кода:
 
<html>
 
   <head>
        <title>Форматирование html</title>
   </head>
 
   <body>
 
      Это простой текст.<br>
 
      <font face="Verdana" size=5 color="red">
      Этот текст красный, размера 5.
      </font><br>
 
      <font face="Arial" size=2 color="blue">
      Этот текст синий, размера 2.
      </font>
 
   </body>
 
</html>
     
    В окне браузера это будет выглядеть так:
 
 
Тег center
 
    Теги <center></center> предназначен для выравнивания всех элементов внутри него по центру окна браузера.
 
Пример кода:
 
<html>
 
   <head>
        <title>Форматирование html</title>
   </head>
 
   <body>
 
      Это простой текст
      <center>Это выровненный по центру текст.</center>
 
   </body>
 
</html>
     
 
Совместное использование тегов
 
    Мы рассмотрели основные теги форматирования текста, но что если вам необходимо сделать какое-нибудь слово в тексте жирным красным курсивом? Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
 
    Понятнее будет на примере:
 
    Выделим слово "текст" красным цветом:
 
<font color="red">Текст</font>
     
    Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):
 
<em><font color="red">Текст</font></em>
     
    А теперь - теги полужирного начертания:
 
<strong><em><font color="red">Текст</font></em></strong>
 
    Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.
Назад