Урок 3: Работаем с текстом
В этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и.т.д.

Основными элементами форматирования текста в html являются:

- P

Используется для разбивания текста на параграфы

- H1,H2,...H6

Применяются для создания заголовков 1,2...6 уровней

- BR

Используетcя для переноса строки

- DIV , SPAN

Используются для выделения части документа определенным способом.

P - используется для разметки параграфов в html документах.

Атрибуты:

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

Приведу пример:

Если внутри тела документа написать следующее:

<p align="center"> Этот параграф по центру </p>
<p align="left"> Этот по левому краю</p>
<p >
Этот тоже по левому (т.к. по умолчанию) </p>
<p align="right"> Этот по правому краю</p>
<p align="justify"> В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю</p>


То при просмотре в браузере получим следующее:

форматирование абзацев

 

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

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

Атрибуты:

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

Приведу пример:

Если внутри тела документа написать следующее:

<!-- примеры заголовков от 1 до 6 уровня-->

<h1>
Большой заголовок </h1>
<h2> Заголовок поменьше </h2>
<h3> Еще меньше </h3>
<h4>Совсем маленький </h4>
<h5> Малюсенький заголовочек </h5>
<h6> Ну просто лилипутский заголовочек </h6>


То при просмотре в браузере увидим:

выделение заголовков в html

Примечание: закрывающий тег обязателен!

BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега.

Приведу пример:

Если внутри тела документа написать следующее:

Начинается первая строка <br>
теперь идет вторая <br>
а вот уже и третья
<p>
А это параграф и внутри него тоже можно использовать тег <br> переноса строки.Его надо использовать всегда, когда надо перенести строку:) </p>

Увидим следующее:

перенос строки <br>

 

Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос!

DIV - В современном сайтостроении используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. Обязателен закрывающий тег!

Атрибуты:

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

 

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

<div align="right">
Начинается первая строка <br> теперь идет вторая <br>
</div>

а вот уже и третья
<p>
А это параграф и внутри него тоже можно использовать тег <br> переноса строки.Его надо использовать всегда, когда надо перенести строку:) </p>



Что мы увидим:

тег DIV

 

Т.е. мы взяли две строчки кода, заключили их в контейнер DIV и выравняли его по правому краю! Так же само, можно заключить в контейнер и 20 и 50 и более строчек и манипулировать ими.

Примечание: Находящиеся между начальным и конечным тегами текст или HTML-элементы выделяются как бы в отдельный параграф(но отступы гораздо меньше).

SPAN - Используется для выделения части информации и придания ей различных стилей. Закрывающий тег обязателен!
Сам по себе, без использования стилей, элемент SPAN никакого смысла не имеет!

Например:

Хотите пользоваться <span style="color:red;" > Adobe Dreamweaver </span> - тогда изучите хотя бы основы html и <br>
тогда Вы без проблем разберетесь с этой замечательной программой!

тег SPAN с атрибутами стиля

Таким образом с помощью элемента SPAN можно хоть каждой букве в тексте присвоить разный стиль(цвет, размер, и.т.д.)


По материалам: http://zvirec.com
Категория: (X)HTML,XML | Добавил: kotenok1343 (17.09.2009)
Просмотров: 528 | Теги: уроки HTML | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]