Пятница, 26.04.2024, 01:50
Зайди на минутку
Главная Регистрация Вход
Приветствую Вас, Залетный · RSS

 test
Copyright MyCorp © 2010
Профиль
Привет: Залетный

Сообщения:

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или войдите!
Меню сайта
Поиск
Форумные дела
Зрелые женщины
Флудить так флудить ..
Где кто отдыхает или отдыхал
Маленький городок
Предложения и пожелания
спамеры ))
Прицепились
Съедобное - Не съедобное
Цепочка
Google Chrome
стоит отметить


Форма входа
 Каталог статей
Главная » Статьи » Программирование » Internet (WEB-программирование)


Разметка текста в HTML

Структурирование текста

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

Заголовки разделов страниц: элементы H1…H6

HTML предлагает шесть заголовков разного уровня, для задания которых используются элементы H1, H2, …, H6. Заголовки различных уровней призваны показать относительную важность секции, расположенной после заголовка и, по умолчанию, отображаются браузером различным размером шрифта. Так, элемент H1 представляет собой наиболее важный заголовок первого уровня, который, по умолчанию, отображается самым крупным шрифтом жирного начертания. А элемент H6 служит для обозначения заголовка шестого уровня, является наименее значительным и отображается самым мелким шрифтом. Таким образом, использование заголовков разного уровня позволяет структурировать документ по разделам, главам, параграфам и т.п., облегчая чтение, делая документ более понятным для считывателей экрана, а также для некоторых автоматических процессов. Следующий пример показывает создание заголовков различных уровней:

<H1>Заголовок 1-го уровня</H1>
<H2>Заголовок 2-го уровня</H2>
<H3>Заголовок 3-го уровня</H3>
<H4>Заголовок 4-го уровня</H4>
<H5>Заголовок 5-го уровня</H5>
<H6>Заголовок 6-го уровня</H6>

А на рисунке 6.1 представлен вид заголовков различного уровня в браузере.

Вид различных заголовков в браузере

Рис. 6.1.  Вид различных заголовков в браузере

Стандартные параграфы: элемент P

Неприятной особенность браузеров является то, что они не обрабатывают символы перевода строки. Т.е. текст, который разработчик набрал на своем компьютере, одновременно форматируя его, разделяя на абзацы и придавая ему какое-то логическое деление, браузер сначала преобразует, удалив все подряд идущие пробелы и переводы строк, а затем выведет на экран. При этом информация об абзацах будет утеряна. Чтобы этого не произошло, для логической организации абзацев используется специальный элемент P. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Например, оформить анекдот, приписываемый Даниилу Хармсу, в виде параграфа можно следующим образом:

<P>Гоголь только под конец жизни о душе задумался, 
а смолоду у него вовсе совести не было.
Однажды невесту в карты проиграл. И не отдал.</P>

Предварительно форматированный текст: элемент PRE

Элемент PRE определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов, идущих в коде подряд, на веб-странице показывается как один. Элемент PRE позволяет обойти эту особенность и отображать текст так, как требуется разработчику. В большинстве браузеров текст, помеченный как предварительно форматированный, будет выводиться с помощью моноширинного шрифта (т.е. шрифта фиксированной ширины), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста. Например, представленный ниже фрагмент кода выводит отрывок из стихотворения Владимира Маяковского "Блек энд Уайт" с помощью элементов P и SAMP. Результат представлен на рисунке 6.2.

Если
Гаванну
окинуть мигом -
рай-страна,
страна что надо.



<PRE>
Если
Гаванну
окинуть мигом -
рай-страна,
страна что надо.

</PRE>

Пример использования элементов P и SAMP

Рис. 6.2.  Пример использования элементов P и SAMP

Внутри контейнера PRE допустимо применять любые теги, кроме тегов IMG, OBJECT, SMALL, SUB и SUP.

Цитирование других источников: элемент BLOCKQUOTE

Часто на веб-странице необходимо целиком или частично процитировать информацию из статей, публикаций блога, справочных документов и т.д. В HTML для выделения длинных цитат внутри документа предназначен элемент BLOCKQUOTE. Текст, обозначенный этим элементом, традиционно отображается как выровненный блок с отступами слева и справа. Единственный параметр данного элемента cite указывает полный или относительный адрес первоисточника, откуда была позаимствована приведенная цитата. Однако параметр cite не поддерживают как Internet Explorer, так и некоторые другие распространенные браузеры. Рассматриваемый выше анекдот можно оформить в виде цитаты следующим образом:

<BLOCKQUOTE>Гоголь только под конец жизни о душе задумался, 
а смолоду у него вовсе совести не было.
Однажды невесту в карты проиграл. И не отдал.</BLOCKQUOTE>

Результат применения элементов P и BLOCKQUOTE к оформлению текста представлен на рисунке 6.3.

Пример использования элементов P и BLOCKQUOTE

Рис. 6.3.  Пример использования элементов P и BLOCKQUOTE

Горизонтальные линии: элемент HR

Горизонтальная линия создается в HTML с помощью элемента HR. Вид линии в основном зависит от браузера. Элемент HR имеет несколько параметров, управляющих выравниванием, цветом, длиной и шириной линии. Однако все эти параметры не рекомендуются Спецификацией HTML. Поэтому, если обычного представления будет недостаточно, то вид линии должен оформляться с помощью CSS.

Разрыв строки: элемент BR

В силу специфики определения разделителей в HTML невозможно управлять разрывом строк текста простым нажатием клавиши ENTER во время записи текста. Разрыв строки можно ввести в документ с помощью элемента BR. Однако он должен применяться только для принудительного разрыва строки, а не для увеличения вертикального интервала между элементами в документе. Для этих целей необходимо использовать свойства CSS.

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

Для форматирования текста HTML-документа предусмотрена целая группа элементов, которую условно можно разделить на элементы логического и физического форматирования.

Элементы логического форматирования своими именами обозначают структурные типы своих текстовых фрагментов, такие, например, как цитата (элемент CITE), аббревиатура (элемент ABBR) и др. Логическая разметка не влияет на конкретное экранное представление фрагмента текста браузером. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т.е. именем элемента логического форматирования), но может быть легко переопределен.

Элементы физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера. Например, для отображения фрагмента курсивом можно использовать элемент I.

Между разработчиками документов HTML долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации НТМL 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления (о котором рассказывалось в лекции 4). Действительно, только на базе логического форматирования можно гибко управлять представлением документа, используя современные методы, основанные, например, на таблицах стилей.

Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.01 некоторые элементы физического форматирования не рекомендуются для применения, однако пока они все еще поддерживаются всеми браузерами. Некоторые элементы логического форматирования, призванные заменить отдельные элементы физического форматирования, распознаются не всеми браузерами, что делает их применение неудобным. Примером может служить логический элемент DEL, который рекомендуется использовать вместо физического элемента STRIKE.

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

Аббревиатуры: элементы ABBR и ACRONYM

Элемент ABBR указывает, что последовательность символов, заключенная между его начальным и конечным тегом, является аббревиатурой. По умолчанию, такой текст подчеркивается пунктирной линией. Браузер Internet Explorer до 7 версии включительно не поддерживает элемент ABBR, рекомендуя использовать элемент ACRONYM.

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

Для указания полной формы записи аббревиатуры или акронима удобно использовать атрибут title. Тогда визуальные браузеры при наведении курсора на текст, размеченный элементом ACRONYM или ABBR, будут выдавать полное наименование в виде появляющейся подсказки. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа. Ниже представлен пример использования элемента ACRONYM. Результат выполнения данного фрагмента представлен на рисунке 6.4.

<P>Действующим президентом <ACRONYM title="Соединенные Штаты Америки">США</ACRONYM> является Барак Обама.</P>

Пример использования элемента ACRONYM

Рис. 6.4.  Пример использования элемента ACRONYM

Выделение контактной информации: элемент ADDRESS

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

<ADDRESS>Сделано в СССР.</ADDRESS>

Цитаты: элементы CITE и Q

Элемент CITE используется для отметки цитат или названий книг и статей, ссылок на другие источники и т.д. Браузерами такой текст обычно выводится курсивом. Если необходимо отметить короткие цитаты в строке текста, то рекомендуется использовать элемент Q. В отличие от блочного элемента BLOCKQUOTE, при отображении не выполняется отделение размеченного текста пустыми строками. Например, цитата Оскара Уайльда может быть оформлена следующим образом:

<CITE>Нет греха, кроме глупости.</CITE>

Изменения в документах: элементы DEL и INS

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

Для выделения текста, который был удален в новой версии документа, предназначен элемент DEL. Подобное форматирование позволяет отследить изменения, сделанные в тексте документа. Текст, помеченный элементом DEL, браузеры обычно отображают как перечеркнутый. В спецификации HTML 4.01 этому элементу отдается предпочтение перед элементами физического форматирования STRIKE или S, обозначающих перечеркнутый текст.

Для выделения текста, который был добавлен в новую версию, используется элемент INS. Его полезно использовать для отметки изменений, вносимых в документ от версии к версии. Текст, помеченный элементом INS, обычно отображается подчеркнутым текстом.

Элементы DEL и INS имеют два необязательных атрибута: cite и datetime. Значение атрибута cite должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента или подробности внесенных дополнений, а атрибут datetime указывает дату удаления или вставки.

Программный код: элемент CODE

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

Определения: элемент DFN

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

Вывод взаимодействия с компьютером: элементы SAMP и KBD

Элемент SAMP используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Элемент SAMP используется также для выделения нескольких символов моноширинным шрифтом. Применение данного элемента предпочтительнее применения элемента физического форматирования TT.

Элемент KBD используется для обозначения текста, который набирается на клавиатуре, или для названия клавиш. Браузеры, по умолчанию, помечают текст в контейнере KBD и SAMP моноширинным шрифтом.

Выделение важных фрагментов текста: элементы STRONG и EM

Для выделения важных фрагментов текста, как правило, используются элементы EM и STRONG. Браузеры обычно отображают текст, отмеченный элементом EM и STRONG, курсивом и полужирным шрифтом соответственно. Элементом STRONG обычно размечают более важные фрагменты текста, чем те, что размечены элементом EM.

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

Переменные: элемент VAR

Элемент VAR используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Браузеры обычно помечают такой текст курсивом. Например, элемент VAR можно использовать следующим образом:

<VAR>x+y=z</VAR>

Элементы физического форматирования

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

Элементы стиля шрифта: TT, I, B, BIG, SMALL, U, STRIKE и S

Элемент B отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо него использовать элементы логического форматирования STRONG или EM.

Элемент I отображает текст курсивом. Для большинства случаев вместо данного элемента рекомендуется использовать элементы EM, DFN или CITE, поскольку последние лучше отражают назначение выделяемого текста.

Элемент TT отображает текст моноширинным шрифтом. Для большинства случаев вместо этого элемента лучше использовать элементы CODE, SAMP или KBD.

Элемент U отображает текст подчеркнутым. Данный элемент отмечен как не рекомендуемый, вместо него предлагается использовать элементы STRONG или CITE.

Элементы STRIKE и S отображают текст, перечеркнутый горизонтальной линией. Оба элемента отменены, и вместо них рекомендуется использовать элемент DEL.

Элементы BIG и SMALL выводят текст шрифтом большего и меньшего (чем непомеченная часть текста) размера. Вместо элемента BIG предпочтительнее использовать элемент STRONG, а размер устанавливать с помощью соответствующих свойств CSS.

Верхние и нижние индексы: элементы SUB и SUP

Чтобы пометить часть некоторого текста как верхний или нижний индекс, используют элементы SUB и SUP. Элемент SUB сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера. Элемент SUP сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера. Эти элементы удобно применять для разметки несложных математических выражений, не обращаясь к использованию специального языка математической разметки MathML. Например, формула воды может быть записана следующим образом:

<P>H<SUB>2</SUB>O</P>

Элементы модификатора шрифта: FONT и BASEFONT

Элемент FONT позволяет задать такие параметры шрифта, как тип (или семейство шрифтов), размер и цвет. Элемент BASEFONT применяется для задания базового шрифта сразу для всей страницы. Обычно он указывается сразу после элемента BODY. В Спецификации HTML 4.01 эти элементы отнесены к отмененным, и их дальнейшее применение не рекомендуется.

Базовые контейнеры: элементы DIV и SPAN

Большинство элементов в HTML существует для описания контента, такого, как изображения, списки, заголовки, или помогают в настройке документа (HEAD, LINK и т.д.). Однако имеется два элемента, которые не имеют заданного значения. Спецификация HTML декларирует, что элементы DIV и SPAN совместно с атрибутами id и class образуют базовый механизм для добавления в документы структуры. Эти два элемента можно считать некоторой несущей опорой HTML.

Элемент DIV является базовым контейнером блочного уровня. Он используется для объединения различных частей контента в логически цельную единицу или логический блок. Этот элемент, эффективно взаимодействуя с таблицами стилей, позволяет форматировать разделы отдельной страницы или даже целого сайта. Текстовый блок, отделенный логически, легко потом выделить при отображении любым способом, например, шрифтом, цветом, межстрочным интервалом, центрированием и т.п. Содержимое элемента DIV может быть расположено произвольным образом, выделено другим фоном и т.д. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Аналогом DIV на уровне текста является элемент SPAN. Элемент SPAN является базовым контейнером строкового уровня. Он также помогает представить структуру документа, но используется для объединения в группу или создания оболочки вокруг других строковых элементов или текста.

Различие между двумя этими элементами состоит в типе контента, а также в его представлении при записи без какого-либо стилевого оформления. Элемент DIV помещается вокруг группы элементов блочного уровня (например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню). Элемент SPAN создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста.

Следующий фрагмент кода демонстрирует применение элементов DIV и SPAN:

<BODY>
<DIV id="Content">
<H1>Заголовок страницы </H1>
<P>Это первый параграф.</P>
<IMG src="image.gif" alt="Это какое-то изображение">
<P>Это второй параграф, который содержит <SPAN id="Special"> элемент SPAN</SPAN>.</P>
</DIV>
</BODY>

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

 
Категория: Internet (WEB-программирование) | Добавил: naminutku (08.07.2010)
| Автор: Л.В. Кузнецова
Просмотров: 817 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Naminutku.ucoz.ru ©2024 - 2010
Погода
Категории раздела
CMD Windows [1]
Статейки по работе с CMD
HTML [14]
Здесь собраны статьи связанные с языком гипертекстовой разметки,а по простому - HTML
Internet (WEB-программирование) [10]
Обои на десктоп
Мини-чат
Наш опрос
Какому антивирусу Вы доверяете
Всего ответов: 32
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сторонние счетчики
Seo анализ сайта
Сделать бесплатный сайт с uCoz