Главная / Верстка / Html / Теги форматирования текста +

Теги форматирования текста +


30.06.2015 14:531132

Некоторые теги форматирования текста мы уже знаем. На этой странице изучим оставшиеся.

Заголовки (H1 ... H6)

Заголовки определяются тегами <h1>, <h2> ... <h6>. Тег <h1> — заголовок первого уровня (самый большой шрифт), <h6> — заголовок шестого уровня - самого низкого в иерархии заголовков (самый маленький шрифт). Закрывающий тег обязателен.

Теги заголовков могут иметь атрибут align, определяющий способ горизонтального выравнивания. Возможные значения — left, center, right. По умолчанию — left.

Поэксперементируйте немного и вы поймете что к чему. Экспериментируйте - это лучший способ набраться опыта.

Тег DIV

Тег <div> предназначен для выделения фрагмента HTML-кода с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.  

Содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

Атрибуты: align. Значения: left, center, right, justify. По умолчанию — left. Закрывающий тег обязателен.

Пример:

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

А эта часть текста заключена в тег P.
Чтобы перенести строку, используй тег BR.

Код в этом случае будет выглядеть так:

<div align="right">Первые две строки заключены в тег DIV<br> и выровнены по правому краю.</div>
<p>А эта часть текста заключена в тег P.<br>Чтобы перенести строку, используй тег BR.</p>

Следует отметить, что тег <div> имеет превосходство над тегом <p>. Это означает, что тег <div> нельзя размещать внутри тега <p>. А наоборот, <p> внутри <div>, можно — все будет работать. Попробуйте сделать так и так, и вы поймете разницу.

Тег SPAN

Тег <span> предназначен для определения части элементов документа. Сам по себе тег смысловой нагрузки не несет и начинает работать если прописать какой нибудь стиль.

С помощью тега <span> можно выделить часть информации внутри других тегов и задать для нее свой стиль.

Пример кода:

<p>Внутри параграфа (тег P) можно изменить цвет и размер <span style="color:red">любых слов</span> или даже <strong><span style="color:green">б</span><span style="color:red">ук</span><span style="color:blue">в</span></strong>, если добавить начальный и конечный тег SPAN и определить для него стиль текста.</p>

В браузере мы увидим:

Внутри параграфа (тег P) можно изменить цвет и размер любых слов или даже букв, если добавить начальный и конечный тег SPAN и определить для него стиль текста.

Обычно тег <span> используется вместе с внешними таблицами стилей (CSS), но об этом будет написано в соответствующем разделе.

Тег FONT

Тег <font> определяет шрифт текста, его цвет и размер. Закрывающий тег обязателен.

Атрибуты:

face — задает гарнитуру шрифта. Используйте те, что попроще: Verdana, Times New Roman, Arial, Tahoma, Courier. Используя какие-нибудь экзотические шрифты, Вы рискуете, что пользователь его не увидит. При отсутствии на компьютере посетителя заданного шрифта, отображается шрифт, установленный в браузере по умолчанию.
size — задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию — 3.
color — задает цвет текста, используя либо RGB-значение в шестнадцатиричной системе, либо однин из 16 базовых цветов. RGB-значение можно подобрать.

Пример кода:

Обычный текст.<br>
<font face="Times New Roman" size="+1" color="green">Шрифт Times New Roman, зеленого цвета, увеличенный на еденицу.</font><br>
<font color="red" face="Courier" size="3">
Красный текст, шрифт Courier.</font>

Результат в браузере:

Обычный текст.
Шрифт Times New Roman, зеленого цвета, увеличенный на еденицу.
Красный текст, шрифт Courier.

Если указано size="+1"или size="-1", то это означает, что размер меняется относительно базового на указаную величину.

Тег <font> хоть и поддерживается браузерами, но считается устаревшим и от его применения рекомендуется отказаться и использовать стили CSS.

Задать цвет текста всей страницы

гораздо удобнее в теге <body>. Для этого ему нужно придать атрибут text и прописать значение все также используя либо RGB-значение в шестнадцатиричной системе, либо однин из 16 базовых цветов.

Заодно можно задать цвет фона страницы. Для этого используется атрибут bgcolor.

<body bgcolor="black" text="red">

В этом случае фон будет черным, а текст красным.

Фоновый рисунок

Чтобы залить фон не цветом, а каким-нибудь рисунком, нужно в теге <body> прописаить атрибут background. В значении атрибута прописать путь к желаемому изображению:

<body background="images/fon.gif">

Тег HR

Как ни странно, этот тег тоже относится к тегам форматирования текста.

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

Атрибуты:

align — задает выравнивание линии. Может принимать значения: left, center, right. По умолчанию center;
color — задает цвет линии;
size —задает толщину линии в пикселах;
width — задает ширину линии в пикселах или процентах от ширины окна браузера;
noshade — создает линию без тени. Атрибут не требует указания значения. Без этого атрибута линия отображается объемной.

Пример кода:

Текст до линии.<hr align="center" color="red" size="3" width= "50%">
А это линия без атрибутов.<hr>

В браузере:

Текст до линии.
А это линия без атрибутов.

Думаю сложностей возникнуть не должно. Повторяю: экспериментируйте - это лучший способ набраться опыта.

Если вы готовы, то пора переходить к работе со списками >>


Html , Теги



Верстка / Html PRoHtml


«Теги форматирования текста +» - Похожие страницы

Все теги шаблона Cotonti Все теги шаблона Cotonti++ Продуктивная работа с шаблоном в Cotonti не может быть полноценной при отсутствии списка всех доступных тегов, благодаря которым можно вывести необходимую информацию, взаимодействовать с базой данных, настра...
Водность текста Водность текста+ Водность текста – что это?  Само название этого понятия говорит о том, что оно обозначает долю словесных связок и слов, которые не несут в тексте смысловой нагрузки. Иными словами, если убрать эти малозначит...
Генератор тени текста Генератор тени текста Онлайн генератор тени текста text-shadow
Как улучшить читабельность текста Как улучшить читабельность текста++ Чтобы написанный вами текст был читабельным, необходимо придерживаться некоторых правил. 1. Все структурные части текста должны быть отделены подзаголовками и выделены полужирным. 2. Старайтесь использовать ...
Что такое тошнота текста? Что такое тошнота текста?++ Этот тeрмин, режущий слух, знaком большинству копирайтeров. Что он означаeт? Многие слышали о нeм, однако не все чeтко представляют eго суть.Тошнота текста – это покaзатель текстового содeржания, показывающи...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям