HTML Начинающим. Заголовки и выделение текста

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

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>
<H6> текст </H6>

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

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
   Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
   посмотреть

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

Заголовки предназначены для выделения небольшой части текста, строки или фразы. Если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать не следует. Для этого существует атрибут size тэга <font></font>, который поможет установить нужный вам размер шрифта.

<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>

В своем примере я выделю первое предложение более крупным шрифтом

<font size="+4">Текст</font>

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<font size="+2">    Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
   посмотреть

Но это еще не все что можно сделать с текстом, кроме создания заголовков и выделения текста крупным или мелким шрифтом, текст можно сделать подчеркнутым, перечеркнутым, курсив, сделать полужирным, задать моноширинный текст, верхний и нижний индексы.

<b> Полужирный текст </b>
<i> курсив </i>
<u> Подчеркнутый текст </u>
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
<small> Малый </small>
<big> Большой </big>
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
<tt> моноширинный шрифт </tt>

<pre>
       текст
           текст
               текст
</pre>

Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, разницы между ними нет.

Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста.

Тэги <Sup> и <Sub> - определяют верхний и нижний индексы. <Sup> - верхний, <Sub> - нижний. Например вам надо написать формулу используя нижний индекс H<sub> 2</sub>O вы получите результат своей формулы H2O.

Моноширинный шрифт <tt>, это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. Также моноширинным шрифтом отображается текст заключенный в тэг <pre>Текст</pre>:

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

К одному фрагменту текста может применяться сразу несколько тэгов.

<tt><b><i>Текст</i></b></tt>

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

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<font size="+2">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
   посмотреть

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


Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru