пятница, 28 декабря 2012 г.

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


Текст в документе html пожалуй единственный объект веб страниц, который не требует какого либо определения. Хотя для форматирования текста существует немалое количество элементов.
Давайте рассмотрим элементы для оформления и выделения текста - это подчеркивание, изменение шрифтов, выделение текста курсивом, изменение цветов текста, цитирование и т.д.
Чтобы оформление информационных статей на страницах вашего сайта приобрело разумные и понятные для пользователей очертания, нужно знать, каким образом осуществляется форматирование текста в HTML. И изучением именно этого вопроса мы и займемся в данном повествовательном материале.
 
Итак, для начала поговорим об абзацах. Они реализуются при помощи специального тега <P></P>. В основе своей он является парным, но указывать закрывающий тег необязательно. Ведь новый тег абзаца – это автоматическое закрытие предыдущего. Но, если вы употребляете при форматировании текста в HTML выравнивание, то все-таки отказываться от закрывающего тега Р не стоит. А для выравнивания предназначается специальный атрибут под названием ALIGN, он может иметь значения: CENTER, LEFT, RIGHT, JUSTIFY, что означается «по центру», «по левому краю» и «по правому краю», «по всей ширине» соответственно.
Если вам не требуется создавать новый абзац, но, тем не менее, существует явная необходимость перехода на новую строку, то тут вам поможет особый одиночный тег <BR>. С его помощью вы также можете осуществить добавление пустых строк.

Заголовки при форматировании текста в HTML выделяются в теги Н1..Н6. Самый первый из них – Н1 – является ключевым, именно он считается главным заголовком страницы, и у него самые большие размеры. Кроме того, он является важным параметром в SEO-оптимизации, и именно по этой причине его следует упоминать только один раз на странице.
Что касается остальных, то далее их значение и размеры распределяются в порядке убывания (подзаголовок, подпункт и т.д.). Теги заголовков являются парными, и нельзя забывать их закрывать, иначе у вас будет занято слишком много текста под название.
Для работы со шрифтом в ходе форматирования текста в HTML преимущественно применяется парный тег <FONT> вместе с его основными атрибутами – размер (size), цвет (color), начертание (face). Под начертанием подразумеваются всевозможные виды шрифтов, то есть, Calibri, Times New Roman, Arial и т.д. С этим делом желательно не экспериментировать и применять стандартные виды, ведь не исключено, что какие-то особые шрифты могут просто не поддерживаться на компьютере пользователя. Размеры шрифта могут находиться в промежутке от -7 до +7. Цвет вы можете задавать при помощи простейших английских наименований: orange, white, black и т.д. А можете задать и нечто вроде: #001122. Но об этом позже.

Элементы (теги) форматирования текста.

Тег <FONT> Позволяет нам изменить цвет, размер и шрифт текста, поддерживается всеми браузерами Mozilla Firefox,Coogle Chrome, Netscape, Opera, Internet Explorer и другими.
Тег <FONT> как я уже говорил, может иметь следующие значения: color, size, face
<font color="red"> текст </font>
Закрывающий тег </font> ставить обязательно.
Этот тег уже давно считается устаревшим и рассматривать подробно его мы не будем, использование этого тега тоже не рекомендуется
Тег <I> Выделяет текст курсивом, его можно использовать совместно с другими тегами, например которые определяют начертание текста. Закрывающий тег </i> ставить обязательно.
Тег <B> Этот тег выделяет текст полужирным жирным шрифтом, его так же можно использовать совместно с другими тегами. Закрывающий тег </B> ставить обязательно.
Пример тега: <i>Текст</i> и <B>Текст</B>.
Рассмотрим пример использование тега <i> и <B>:

01!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
02<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05<title>Пример использования тега I</title>
06</head>
07<body>
08<p><b><i>HTML код - жирный курсив</i></b></p>
09<p><i>Этот текст - курсив</i> Обычный текст - пример использования тега I <i>Здесь опять курсив</i> здесь вы можете использовать любые теги для оформления текста, как только хотите, главное не нарушайте порядок вложенности тегов.</p><p>Используйте основные теги форматирования.</p>
10</body>
11</html>

Используйте основные теги форматирования.
Следующий тег <EM> Этот тег в основном используется только для смыслового выделения текста курсивом </EM>
<EM>Пример тега</EM>

Тег <STRONG> Используется для усиленного выделения текста жирным </STRONG>
<STRONG>Пример тега</STRONG>

Тег <U> Применяется для подчеркивания текста </U>
<U>Пример тега</U>

Теги <S>, <STRIKE> эти теги применяются для зачеркивания текста одинарной линией </S>, </STRIKE>
<S>, <STRIKE>Пример тегов</S>, </STRIKE>

Тег <BIG> используется для увеличения размера шрифта на одну условную единицу по сравнению с обычным размером текста. Размеры шрифтов в HTML  измеряются в условных единицах от 1-го до 7-го, по умолчанию используется 3 размер шрифта. Например если добавить тег <BIG> к тексту 3-го размера, то размер шрифта увеличится до 4-го (на одну условную единицу). Так же допускается использование вложенных тегов <BIG>, при этом размер шрифта будет увеличиваться на 1 условную единицу с каждым уровнем.
<BIG>Пример тега</BIG>

Тег <SMALL> как и тег <BIG>, только используется для уменьшения размера шрифта на одну условную единицу по сравнению с обычным размером текста.
<SMALL>Пример тега</SMALL>

Тег <SUP> Применяется для отображения текста со сдвигом вверх.
<SUP>Пример тега sup</SUP>

Тег <SUB> Применяется для отображения текста со сдвигом вниз.
<SUB>Пример тега sub</SUB>

<CODE>, <SAMP> Эти теги используются для оформления текста, представляющего программный код или формулу.
<CODE>, <SAMP>Пример тегов</CODE>, </SAMP>

<TT> Отображает текст моноширинным шрифтом, имитируя стиль печатной машинки.
<TT>Пример тега</TT>

Тег <VAR> Используется для обозначения в тексте компьютерных переменных.
<VAR>Пример тега</VAR>

Тег <CITE> Используется для оформления текста как цитату или ссылку на какой либо материал.
<CITE>Пример тега</CITE>
Скачать файлы:

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

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