11.24.2012

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

              Тег <P>


      Тег <P> является блочным элементом, хотя закрывающийтег </p> является не обязательным. Текст, помещенный внутрь элемента <p>, отделяется от остальных элементов на странице абзацными отступами: перед абзацом и после него. В разных браузерах отступы по величине разные. Исправить ситуацию средствами HTML нельзя. Считается, что дефект не столь существенен. Параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.
     У тега <P> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:
   - left - слева
   - right - справа
   - center - по центру
   - justify - по ширине

                                                             Пример
<p>Документ</p>
<p align="right">Документ</p>
<p align="center">Документ</p>

          
                             В результате получаем следующее
Документ
Документ
Документ                    

                     Теги H1-H6


     HTML поддерживает 6 уровней заголовков. Можно воспользоваться любым из них в зависимости от того для чего он будет предназначен. Они представлены соответственно элементами: H1, H2, H3, H4, H5, H6. Первый - самый главный, отображается самым крупным шрифтом, шестой самый маленький и по назначению и по размеру шрифта. 

     Теги <H1>...<H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.
     Закрывающий тег обязателен.

     Открываем программу "Блокнот" и вводим в документ следующий код:
<html>
<head>
<title> Заголовки </title>
</head>
<body>
 <h1>Это заголовок 1 </h1>
 <h2>Это заголовок 2 </h2>
 <h3>Это заголовок 3 </h3>
 <h4>Это заголовок 4 </h4>
 <h5>Это заголовок 5 </h5>
 <h6> Это заголовок 6 </h6>
</body>
</html>

                       Результат этой программы следующий

   











      Теги H1-H6 акцентируют внимание поисковых систем на определённых участках текста и позоляют им понять, какие из участков страницы наиболее важны и содержат больше информации о её содержании. С их помощью поисковые системы определяют релевантность страниц запросам. Конечно, для этого у них есть множество других средств, таких как количество и тошнота ключевых слов, Title страницы, описание и др., однако с их помощью не всегда можно определить релевантность, к тому же, если заголовки H1-H6 расставлены верно, будет плюсик при ранжировании, что немаловажно. Таким образом, теги H1-H6 являются важными элементами продвижения как сайта, так и отдельных его страниц. Теперь немного о том, как и где они ставятся.
     Например, очень часто в тег H1 на всех страницах сайта заключается название этого сайта (не путать с URL сайта), в тег H2 – категории, в тег H3 – названия статей, в тег H4 – элементы сайтбара. Или в тег H1 название сайта, в тег H2 – названия статей, H3 – подпункты статей, H4 – категории и т.п. Вариантов может быть много, главное – выбрать подходящий именно для вашего сайта. Как понять, какой подходит? Всё зависит от содержания сайта.
      Главное, верно расставленные теги H1-H3. Кстати, многие оптимизаторы идут дальше, и заключают, в случае с блогом, в тег H1 название статьи, особенно если название всего блога не содержит ключевых слов. В случае с сайтом всё меняется исходя из того, по каким запросам и как он продвигается.


                           Советы по использованию заголовков H1-H6:

    1. Необходимо соблюдать иерархию заголовков: чем меньше номер заголовка, тем выше он должен располагаться на странице. То есть, выше всех должен быть заголовок h1, затем должен идти заголовок h2, затем h3 и так далее.
    2.Не стоит заключать в теги h1-h6 ничего, кроме текста. Считается, что это может испортить весь эффект.
    3. Соблюдайте градацию шрифта: чем «ниже» заголовок h, тем меньше должен быть шрифт. То есть, самым большим будет заголовок h1, h2 уже меньше, и так далее.
    4. Теги h1-h6 должны содержать ключевые запросы, будет лучше, если кроме них в теге ничего не будет. Не стоит заключать в теги h посторонних участков текста.
    5. Не используйте тег h1 больше одного раза на странице. В случае с остальными тегами h это допускается, но в умеренных количествах.
    6.Не используйте теги h совместно с другими тегами акцентирования, такими как (b или strong)
    7. Не расставляете «лишние» заголовки. Если для выделения всех значимых элементов страницы вам хватило тегов h1-h4, то остальные лучше вообще не расставлять, чем расставлять где попало.

                                              Параметр ALIGN

     Параметр align определяет выравнивание заголовка текста по краю.

                                                            Значения:


 - left - выравнивание заголовка по левому краю. 
 - center - выравнивание по центру. 
 - right - выравнивание по правому краю. 
 - justify - выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

                                                   Тег <BR>


       Тег <br> - устанавливает перевод строки (аналогично нажатию клавиши Enter) без создания нового абзаца.
       При использовании нескольких тегов <br><br> подряд можно добиться отступов (пробелов) нужного вам размера.
       Тег <br> не нуждается в закрывающем теге.   Обязательных атрибутов нет.
       В HTML тег <br> не имеет закрывающего тега (является непарным). В XHTML тег должен быть корректно закрыт таким образом - <br/>
       Часто можно увидеть, как тег <br> используют для создания абзацов (несколько тегов <br/> подряд). Это нарушает логическую структуру кода. Для создания абзацов используется тег <p>. Использовать тег <br/> надо, когда это оправдано. В большинстве случаев перевод строки и отступы достигаются применением "правильных" тегов и таблиц стилей.

                                          Аргументы тега <BR >

  • all - отменяет обтекание элемента одновременно с правого и левого края.

  • left - оменяет обтекание с левой стороны элемента.

  • right -отменяет обтекание с правой стороны элемента.

  • none - отменяет действие данного свойства.
                                            Атрибуты тега <BR >

       Clear - этот атрибут применяется для того, чтобы сообщить браузеру как нужно обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float.
       Результаты использования параметра clear зависят от края, по которому выравнивается элемент и значения аргумента clear. Так, если изображение выравнивается по левому краю, а значение параметра clear тега <BR > установлено как all или left, то текст после тега <BR > будет отображаться ниже рисунка.

                                 Пример использования тега <BR>

<html>
<head><title>Пример использования тега BR</title></head>
<body>
<p>Пословицы о труде</p><br/><br/>
<p> Работа не волк в лес не убежит</p><br/>
<p> Никогда не откладывай на завтра то, что можно сделать послезавтра</p><br/>

<p> Не важно уметь хорошо работать, важно уметь хорошо доложить </p>

</body>
</html>

                               Пример использования тега BR с атрибутом clear:

<br clear=all>
<br clear=left>
<br clear=right>

                                              Тег <HR>


      Тег <hr> - рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также от браузера.        Тег <hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
      Закрывающий тег необязателен.

                    Параметры:
      
  • align - определяет выравнивание линии   
  • color - определяет цвет линии   
  • noshade - рисует линию без трехмерных эффектов
  • size - определяет толщину линии  
  • width - определяет ширину линии
                                    Пример использования тега <hr>
<html>
<head><title>Рисуем линии с использованием тега HR</title></head>
<body>
<hr/ >
<h1 align="center" >Рисуем линию без трехмерных эффектов</h1>
<hr noshade="noshade"/>
<h1 align="center">Рисуем линии определенной ширины</h1>
<hr width="50%"/>
<hr width="80%" size="10"/>
<h1 align= "center">Рисуем линии двух разных цветов и задаем им разную толщину</h1>
<hr color="red" size="20"/>
<hr color="green" size="50"/>
<h1 align="center">Рисуем линию определенной ширины с выравниванием по центру</h1>
<hr width="50%" align="center"/>
</body>
</html>

                         В результате получаем следующее
Рисуем линии с использованием тега HR

Рисуем линию без трехмерных эффектов


Рисуем линии определенной ширины



Рисуем линии двух разных цветов и задаем им разную толщину



Рисуем линию определенной ширины с выравниванием по центру




 


       

Комментариев нет:

Отправить комментарий