Красивая верстка — основные HTML теги

Приветствую всех начинающих блоггеров! Выбранная ниша готова, материал вроде бы тоже, но как сделать его максимально приятным для восприятия? В этом отчасти может помочь знание простейших HTML тегов (не путать с хэштегами!). Собственно, об этом и предлагаю поговорить!

Теги HTMl для текста

html теги для сайтаО целесообразности изучения такого языка, как html мы уже сказали — базовые навыки помогут сделать хорошо написанную статью еще вкуснее. С появлением различных движков для сайтов многие новички и опытные веб-мастера не сильно запариваются по этому поводу, и редактируют текст исключительно в текстовом редакторе. Одним из главных минусов такой упрощенной методики является появление лишних тегов в редакторе html. К тому же, создатель перестает чувствовать текст, утрачивает важнейшие инструменты для работы с ним. Статья — не доклад для любимой учительницы, которая этим же вечером будет грызть на нем воблу. Верстка материала показывает уважение к читателю! Именно поэтому я представляю вам список простейших и повсеместных тегов html для сайта.

Заголовки

Как корабль назовешь, так он и поплывет — ну кто не слышал эту фразу. Заглавие — первое (а иногда и единственное), что видит посетитель ресурса, просматривая статью.

Html заголовки для текста имеют 6 разных «уровней», от h1 до h6. При этом h1 — наиболее важный заголовок в содержании. Оформление заголовков любого уровня достаточно просто:

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок
Заголовок
<h1>Заголовок</h1>

<h2>Заголовок</h2>

<h3>Заголовок</h3>

<h4>Заголовок</h4> 

<h5>Заголовок</h5>
<h6>Заголовок</h6>

Атрибутом любого заголовка при необходимости может стать его выравнивание. Align позволяет сделать это! Right, left, center, justify — выравнивание по правому, левому краю, центру, или по ширине соответственно.

<h(1-6)align="left | center | right | justify">Заголовок</h5>

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

Синтаксис тега выглядит таким образом:

<p>Форматируемый текст.</p>

Дополнительный атрибут сего тега — выравнивание align. Значение Left — выравнивает по левому краю, right — соответственно, по правому, center — по центру, и justify выравнивает по ширине.

Синтаксически атрибут выставляется следующим образом:

<p align="left | center | right | justify">Форматируемый текст</p>

Оформление списков

Порой материал, который вы хотите предоставить, необходимо предоставить в виде списка. Оформить список помогают теги ul, ol, li. Маркированный список выглядит следующим образом:

<ul>
  <li>элемент маркированного списка</li>
</ul>

Для маркированных списков доступны атрибуты disc, circle, square — они позволяют изменять «метку» тега.

Нумерованный список открывается тегом <ol>. Его конструкция выглядит следующим образом

<ol>
  <li>элемент нумерованного списка</li>
</ol>

Нумерованный список сопровождается 3-мя атрибутами. Один из них — type, позволяющий изменять вид номера списка.

Синтаксически type оформляется следующим образом:

<ol type="A | a | I | i | 1">...</ol>

Атрибут reverse позволяет настроить обратный порядок нумерации:

<ol reversed>
<li>элемент нумерованного списка 1</li>
<li>элемент нумерованного списка 2</li>
<li>элемент нумерованного списка 3</li>
</ol>
  1. элемент нумерованного списка 1
  2. элемент нумерованного списка 2
  3. элемент нумерованного списка 3

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

<ol start="число">
 <li>элемент нумерованного списка 1</li>
<li>элемент нумерованного списка 2</li>
<li>элемент нумерованного списка 3</li>
</ol>

Этот атрибут не зависит от type и работает с любым видом нумерации.Число,заданное мною, равно 5:

  1. элемент нумерованного списка 1
  2. элемент нумерованного списка 2
  3. элемент нумерованного списка 3

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

До новых встреч на страницах блога!

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

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