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

Оцените материал
(0 голосов)

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

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

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

h1...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>

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

 

Тег center

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

Пример кода:

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

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

 

Прочитано 1023 раз Последнее изменение Четверг, 06 июля 2017 08:19
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+