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

Приветствую вас, уважаемый читатель!

Сегодня, непростая статья, приготовьтесь уважаемый. Будем учиться форматировать текст.

Содержание:

  1. Теги, делающие заголовки;

  2. Теги для абзацев и переноса строки;

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

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

  5. Теги, отвечающие за подчёркивание текста;

  6. Теги, выводящие моноширинный шрифт;

  7. Теги для вывода текста в верхнем и нижнем индексах;

  8. Тег font и его параметры;

  9. Тег center;

  10. Совместное использование тегов.

Существует много  тегов, для форматирования текста. Какие-то попадаются нам часто и запоминаются, а какие-то, наоборот редко (их запоминать необязательно).

Ниже, рассмотрим теги, которые встречаются часто:

  • <h1></h1>;
  • <h2></h2>;
  • <h3></h3>;
  • <h4></h4>;
  • <h5></h5>;
  • <h6></h6>;
  1. Это, так называемые теги заголовков. Каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого — самый маленький).

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

Возможные значения этого параметра:

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

Пример такого кода:

Сохраняем код в формате html и открываем в браузере. Он  будет выглядеть так:

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

Тег <br> — тег для принудительного перевода строки. Текст, после этого тега, будет  начинается с новой строки.

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

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

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

Пример кода:

Сохраняем и смотрим в браузере:

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

<cite></cite>;

<dfn></dfn>;

<em></em>;

< i ></i >;

Эти теги выделяют текст курсивом, но делают они это по разным причинам.

Теги <cite></cite> используются для логического выделения названий книг, статей и цитат.

Теги <dfn></dfn> используются для выделения определений.

Тегами <em></em> и <i></i> выделяют важные фрагменты текста.

Последний,  не рекомендуется к употреблению.

Пример кода:

В окне браузера, это будет выглядеть так:

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

<strong></strong>;

<b></b>;

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

Пример кода:

В окне браузера это будет выглядеть так:

5.Теги, отвечающие за подчёркивание текста.

<ins></ins>

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

В окне браузера это будет выглядеть так:

6. Теги, выводящие моноширинный шрифт.

<kbd></kbd>;

<samp></samp>;

<tt></tt>;

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

Пример кода:

В окне браузера это будет выглядеть так:

7. Теги для вывода текста в верхнем и нижнем индексах.

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

Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.

Они удобны для вывода математических и химических формул.

Пример кода:

В окне браузера это будет выглядеть так:

8. Тег font и его параметры.

Теги <font></font> указывают параметры шрифта текста:

face — название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.

size — размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color — цвет текста (по умолчанию — черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color=»blue»).

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа «#«. Не буду вдаваться в подробности, как формируется код цвета, укажу лишь на то, что получить его можно, например, в программе Photoshop.

Пример кода:

В окне браузера это будет выглядеть так:

9. Тег center.

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

Пример кода:

10. Совместное использование тегов.

Сегодня, мы рассмотрели основные теги форматирования текста, но что делать, если вам необходимо какое-нибудь слово в тексте сделать жирным красным курсивом?

 Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.

 Понятнее будет на примере,  выделим слово «текст» красным цветом:

<font color=»red» >Текст</font>

Теперь добавим теги курсива (открывающий — слева, закрывающий — справа):

<em><font color=»red» >Текст</font></em>

А теперь — теги полужирного начертания:

<strong><em><font color=»red» >Текст</font></em></strong>

Каждый раз, все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности.

Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.

  Сегодня, мы рассмотрели основные способы оформления текста. В следующем посте, мы рассмотрим менее применимые теги форматирования. Тем не менее, знать их будет не лишним.  

С уважением, Максим!

Понравилось,оставьте свой email:


0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *