Войти
s-lub » Учебники » HTML » Оформление текста в HTML (часть 1)

Оформление текста в HTML (часть 1)

Оформление текста в HTML (часть 1)

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

Если просто выложить текст без использования элементов форматирования, то получиться слитный текст, как на примере:

Основными элементами форматирования текста в HTML являются:
- P – используется для разделения текста на параграфы;
- H1, H2, H3, H4, H5, H6 – нужны для выделения заголовков разного уровня (Н1 – самый крупный, Н2 – заголовок поменьше, Н3 – заголовок ещё меньше и так далее). Всего можно использовать 6 уровней. Так же отметим, что заголовки нужны не только для пользователей, но и для поисковых систем, поэтому их желательно использовать.
- BR <BR /> - необходим для переноса строки.
- DIV - используется для выделения определенной части документа, можно использовать только к боковым элементам.
- SPAN- используется для выделения определенной части документа, можно использовать к отдельным словам.

P

P – как мы уже писали используется для разбивания текста на отдельные параграфы или абзацы.

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

Используемые значения: left, center, right, justify. По умолчанию, если не использовать атрибут, текст будет выравниваться по левому краю.

Пример:

<p align="center"> Этот параграф по центру </p>
<p align="left"> Этот по левому краю</p>
<p align="right"> Этот по правому краю</p>
<p > Этот по левому краю, так как атрибут не задан (т.к. по умолчанию) </p>

<p align="justify"> В этом параграфе текст будет выравниваться по ширине страницы (одновременно по левому и правому краям документа). В этом параграфе текст будет выравниваться по ширине страницы (одновременно по левому и правому краям документа). </p>

Важно: что бы атрибут работал нельзя значение необходимо заключать в кавычки и нельзя допускать пробелов в кавычках:
- <p align="right"> - правильное написание;
-<p align="right "> - неверное написание, работать не будет!!!

Заголовки H1 – H6

Этими тегами выделяются заголовки, разделы и подразделы, к ним так же можно применять атрибут ALIGN для выравнивания.
Всё так же как и с «Р», поэтому перейдём сразу к примеру:

<h1> Большой заголовок </h1>
<h2 align="center"> Заголовок поменьше </h2>
<h3 align="left"> Заголовок еще меньше </h3>
<h4 align="right"> Маленький заголовок</h4>
<h5 align="justify"> Совсем маленький заголовок</h5>
<h6> Ну очень маленький заголовок </h6>

BR

<br /> - используется для переноса строк, не требует открывающего тега, другими словами просто вставляем в нужном месте текста <br />, и текст продолжится с новой строки:

Пример:

В ближайших двух статьях мы поговорим о том, как можно красиво и <br /> не навязчиво оформить содержание вашего сайта, существует <br /> множество тегов поэтому статью мы разделили на две части, ну начнём по порядку:
Если просто выложить текст без использования <br /> элементов форматирования, то получиться слитный текст, как на примере:

Как видно из примера, если в html переносим строки без тега <br />, то в браузере переноса строки не будет.

DIV

DIV – используется в качестве контейнера, ими легко управлять (можно перемещать, менять размеры, регулировать отступы и много другое. Удобнее с ними работать через CSS, но мы рассмотрим примеры без CSS. Закрывающий тег обязателен.

Пример с использованием стандартного атрибута ALIGN:

<div align="right">
Первые две строки <br> по правому краю <br>
</div>
<div align="center">
Вторые две строки <br> по центру
</div>
<div align="left">
Третьи две строки <br> по левому краю
</div>

Примечание: в одном блоке DIV можно использовать неограниченное количество информации, так же в один блок DIV можно поместить ещё один блок DIV. Но необходимо сначала закрыть внутренний блок, а потом внешний, так как внутренний не может выходить за границы внешнего блока.

SPAN

SPAN – используется для выделения одного или нескольких слов в тексте (кстати, можно выделить даже только одну букву в слове). Может использоваться только с атрибутом.

Рассмотрим это на простейшем примере:

Этот текст будет стандартного цвета, <span style="color:red;" > а этот красного</span> и снова стандартного<br>
Этот текст будет стандартного цвета, <span style="color:#777;" > а этот серого</span> и снова стандартного<br>

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

Если всё понятно, то можно перейти к следующей статье и рассмотреть другие варианты выделения текста.


Все статьи по теме HTML:

- Введение и основы HTML
- Структура WEB документа
- Синтаксис в HTML
- Пробуем создать первую страничку
- Оформление текста в HTML (часть 1)
- Оформление текста в HTML (часть 2)
- Создание списков в HTML
- Ссылки в HTML
- Вставляем изображения в HTML документ
- Цвет теста и фона в HTML
- Создаём таблицы в HTML
- Что и для чего прописывать в HEAD
- Заключение и подведение итогов по всем пройденным элементам и атрибутам