html теги - Текст
Суббота, 22.11.2014, 20:27
Приветствую Вас Гость | RSS
Меню сайта
Вход на сайт
Реклама от Google

Текст

Текст

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

Особенности текста в HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Любое количество пробелов идущих подряд, в браузере отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. Приведенные ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>
<p>Измеряй микрометром.    Отмечай мелом.    Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>

Исключением из этого правила является тег <PRE>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

Нет расстановки переносов в тексте

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

Представьте, что у вас в середине предложения есть какое-нибудь длинное слово, вот например «Дегидроэпиандростерон» . В текстовом редакторе это слово будет перенесено по слогам так, чтобы текст занял указанную ширину, а на веб-странице подобное слово будет отображаться целиком, без переносов.

Текст занимает ширину окна браузера

Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.

Абзацы

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

<p>Абзац 1</p>
<p>Абзац 2</p>

Каждый абзац начинается с тега <P> и должен иметь необязательный закрывающий тег </P>.

Замечание

В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка» . Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.

В листинге 7.1 показано применение абзацев для создания отступов между строк.

Листинг 7.1. Использование абзацев

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5.  <title>Применение абзацев</title>
  6. </head>
  7. <body>
  8.  <p>В одних садах цветёт миндаль, в других метёт метель. </p>
  9.  <p>В одних краях ещё февраль, в других - уже апрель.</p>
  10.  <p>Проходит время, вечный счёт: год за год, век за век...</p>
  11.  <p>Во всём - его неспешный ход, его кромешный бег.</p>
  12.  <p>В году на радость и печаль по двадцать пять недель.</p>
  13.  <p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
  14.  <p>По двадцать пять недель в туман уходит счёт векам.</p>
  15.  <p>Летит мой звонкий балаган куда-то к облакам.</p>
  16.  <p><i>М. Щербаков</i></p>
  17. </body>
  18. </html>

Как видно, при использовании тега <P> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <BR>. В отличие от абзаца, тег переноса строки <BR> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.

Так, текст листинга 7.1 с учетом переноса строк будет преобразован следующим образом (листинг 7.2).

Листинг 7.2. Тег BR

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Переносы в тексте</title>
  6. </head>
  7. <body>
  8. <p>В одних садах цветёт миндаль, в других метёт метель.<br>
  9. В одних краях ещё февраль, в других - уже апрель.<br>
  10. Проходит время, вечный счёт: год за год, век за век...<br>
  11. Во всём - его неспешный ход, его кромешный бег.<br>
  12. В году на радость и печаль по двадцать пять недель.<br>
  13. Мне двадцать пять недель февраль, и двадцать пять - апрель.<br>
  14. По двадцать пять недель в туман уходит счёт векам.<br>
  15. Летит мой звонкий балаган куда-то к облакам.</p>
  16. <p><i>М. Щербаков</i></p>
  17. </body>
  18. </html>

Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.

Заголовки

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес» , тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно» . Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним — уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Синтаксис создания заголовков показан в листинге 7.3.

Листинг 7.3. Добавление заголовков

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Заголовки в тексте</title>
  6. </head>
  7. <body>
  8. <h1>Заголовок первого уровня</h1>
  9. <h2>Заголовок второго уровня</h2>
  10. <h3>Заголовок третьего уровня</h3>
  11. <h4>Заголовок четвертого уровня</h4>
  12. <h5>Заголовок пятого уровня</h5>
  13. <h6>Заголовок шестого уровня</h6>
  14. </body>
  15. </html>

Содержимое тега <H1> отображается самым крупным шрифтом жирного начертания, а <H6> — самым мелким.

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Выравнивание текста

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы, что не очень красиво.

Для установки выравнивания текста обычно используется тег параграфа <P> с параметром align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <DIV> с аналогичным параметром align. Он может принимать следующие значения:

left — выравнивание по левому краю, задается по умолчанию;

right — выравнивание по правому краю;

center — выравнивание по центру;

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

Также аргумент align можно применять как для текста, так и для заголовков (листинг 7.4).

Листинг 7.4. Способы выравнивания текста

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Выравнивание текста</title>
  6. </head>
  7. <body>
  8. <h1 align="center">Как поймать льва?</h1>
  9. <h2 align="right">Метод перебора</h2>
  10. <p align="justify">Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p>
  11. <h2 align="right">Метод дихотомии</h2>
  12. <p align="justify">Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p>
  13. </body>
  14. </html>

Жирное начертание

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: <B> и <STRONG>.

<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <I> и <EM>.

<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>

Следует отметить, что теги <B> и <STRONG>, также как <I> и <EM> хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег <B> — является тегом физической разметки и устанавливает жирное начертание текста, а тег <STRONG> — тегом логической разметки и выделяет помеченный текст. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <B> и <STRONG>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

В листинге 7.5 показано использование тегов <EM> и <STRONG> для оформления текстов.

Листинг 7.5. Теги EM и STRONG

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Оформление текста</title>
  6. </head>
  7. <body>
  8. <p><strong>А где же печенье и самогоноваренье?!</strong> - <em>воскликнул Мальчиш-плохиш</em>.</p>
  9. </body>
  10. </html>

Верхний и нижний индекс

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два тега для создания индекса: <SUP>   верхний индекс и <SUB>   индекс нижний. Текст, помещенный в один из этих контейнеров, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали.

В листинге 7.6 показано, где применяется подобный текст

Листинг 7.6. Использование нижнего индекса

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Нижний индекс</title>
  6. </head>
  7. <body>
  8. <p><b>Формула серной кислоты:</b> <i>H<sub>2</sub>SO<sub>4</sub></i></p>
  9. </body>
  10. </html>

Спецсимволы

Для отображения символов, которых нет на клавиатуре применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

Табл. 7.1. Спецсимволы
Имя Код Вид Описание
&nbsp; &#160;   неразрывный пробел
&pound; &#163; £ фунт стерлингов
&euro; &#8364; знак евро
&para; &#182; символ параграфа
&sect; &#167; § параграф
&copy; &#169; © знак copyright
&reg; &#174; ® знак зарегистрированной торговой марки
&trade; &#8482; знак торговой марки
&deg; &#176; ° градус
&plusmn; &#177; ± плюс-минус
&frac14; &#188; ¼ дробь - одна четверть
&frac12; &#189; ½ дробь - одна вторая
&frac34; &#190; ¾ дробь - три четверти
&times; &#215; × знак умножения
&divide; &#247; ÷ знак деления
&fnof; &#402; ƒ знак функции
Греческие буквы
&Alpha; &#913; Α греческая заглавная буква альфа
&Beta; &#914; Β греческая заглавная буква бета
&Gamma; &#915; Γ греческая заглавная буква гамма
&Delta; &#916; Δ греческая заглавная буква дельта
&Epsilon; &#917; Ε греческая заглавная буква эпсилон
&Zeta; &#918; Ζ греческая заглавная буква дзета
&Eta; &#919; Η греческая заглавная буква эта
&Theta; &#920; Θ греческая заглавная буква тета
&Iota; &#921; Ι греческая заглавная буква иота
&Kappa; &#922; Κ греческая заглавная буква каппа
&Lambda; &#923; Λ греческая заглавная буква лямбда
&Mu; &#924; Μ греческая заглавная буква мю
&Nu; &#925; Ν греческая заглавная буква ню
&Xi; &#926; Ξ греческая заглавная буква кси
&Omicron; &#927; Ο греческая заглавная буква омикрон
&Pi; &#928; Π греческая заглавная буква пи
&Rho; &#929; Ρ греческая заглавная буква ро
&Sigma; &#931; Σ греческая заглавная буква сигма
&Tau; &#932; Τ греческая заглавная буква тау
&Upsilon; &#933; Υ греческая заглавная буква ипсилон
&Phi; &#934; Φ греческая заглавная буква фи
&Chi; &#935; Χ греческая заглавная буква хи
&Psi; &#936; Ψ греческая заглавная буква пси
&Omega; &#937; Ω греческая заглавная буква омега
&alpha; &#945; α греческая строчная буква альфа
&beta; &#946; β греческая строчная буква бета
&gamma; &#947; γ греческая строчная буква гамма
&delta; &#948; δ греческая строчная буква дельта
&epsilon; &#949; ε греческая строчная буква эпсилон
&zeta; &#950; ζ греческая строчная буква дзета
&eta; &#951; η греческая строчная буква эта
&theta; &#952; θ греческая строчная буква тета
&iota; &#953; ι греческая строчная буква иота
&kappa; &#954; κ греческая строчная буква каппа
&lambda; &#955; λ греческая строчная буква лямбда
&mu; &#956; μ греческая строчная буква мю
&nu; &#957; ν греческая строчная буква ню
&xi; &#958; ξ греческая строчная буква кси
&omicron; &#959; ο греческая строчная буква омикрон
&pi; &#960; π греческая строчная буква пи
&rho; &#961; ρ греческая строчная буква ро
&sigmaf; &#962; ς греческая строчная буква сигма (final)
&sigma; &#963; σ греческая строчная буква сигма
&tau; &#964; τ греческая строчная буква тау
&upsilon; &#965; υ греческая строчная буква ипсилон
&phi; &#966; φ греческая строчная буква фи
&chi; &#967; χ греческая строчная буква хи
&psi; &#968; ψ греческая строчная буква пси
&omega; &#969; ω греческая строчная буква омега
Стрелки
&larr; &#8592; стрелка влево
&uarr; &#8593; стрелка вверх
&rarr; &#8594; стрелка вправо
&darr; &#8595; стрелка вниз
&harr; &#8596; стрелка влево-вправо
Прочие символы
&spades; &#9824; знак масти "пики"
&clubs; &#9827; знак масти "трефы"
&hearts; &#9829; знак масти "червы"
&diams; &#9830; знак масти "бубны"
&quot; &#34; " двойная кавычка
&amp; &#38; & амперсанд
&lt; &#60; < знак "меньше"
&gt; &#62; > знак "больше"
Знаки пунктуации
&hellip; &#8230; многоточие ...
&prime; &#8242; одиночный штрих - минуты и футы
&Prime; &#8243; двойной штрих - секунды и дюймы
Общая пунктуация
&ndash; &#8211; тире
&mdash; &#8212; длинное тире
&lsquo; &#8216; левая одиночная кавычка
&rsquo; &#8217; правая одиночная кавычка
&sbquo; &#8218; нижняя одиночная кавычка
&ldquo; &#8220; " левая двойная кавычка
&rdquo; &#8221; правая двойная кавычка
&bdquo; &#8222; нижняя двойная кавычка
&laquo; &#171; « левая двойная угловая скобка
&raquo; &#187; » правая двойная угловая скобка