Ermak

13. Теги разметки и оформления текста в xhtml.

 Основная разметка

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

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

<hr />

Непустые элементы (или контейнеры) используются для того, чтобы что-нибудь делать с текстом, который их окружает.

Это очень важное замечание!

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

ПРИМЕЧАНИЕ. Замыкающая косая черта в пустом элементе часто добавляется через пробел для облегчения восприятия: <hr />. Это не является обязательным условием синтаксиса, поэтому <hr/> будет работать ничуть не хуже.

HTML и XHTML, возможно, гораздо сложнее, чем описано выше? Какие-то простенькие теги — все понятно… Чем тогда объяснить наличие более четырехсот страниц в этой книге? Да, действительно, эти языки чуть-чуть сложнее, чем просто набор тегов, но сложность их проявляется не столько в теории, сколько на практике. Хорошим способом понимания HTML и XHTML является подробное изучение атрибутов элементов, которые используются лишь для окончательной «настройки» внешнего вида символов на экране. Возьмем для примера основной тег для помещения изображения на страничку:

Часть этого тега, соcтоящая из <img /> является полноценным элементом, хотя большого толка от его использования без атрибута src (источник изображения) не будет. Кроме этого атрибута, у <img /> есть и другие, такие как alt, задающий альтернативный текст при отсутствии изображения, align, задающий размещение картинки, как в следующем примере:

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

Если вы знакомы с предыдущими версиями HTML, этот код может показаться вам немного странным. Дело в том, что примеры, приведенные в этой книге, соответствуют стандарту XHTML. Это означает следующее:

 XML является регистрозависимым, поэтому все имена элементов должны быть написаны строчными буквами: , , и т. д.;

 все элементы должны иметь закрывающие теги либо закрывающую косую черту, даже если они являются пустыми, как <hr />;

 все атрибуты должны быть заключены в двойные кавычки: <img src="/contents/978594723414/file.jpg" align="left" />.

Даже если вы в прошлом не имели дело с HTML, знайте, что XHTML легко читается и запоминается благодаря этим новым соглашениям.

Оформление с помощью таблиц стилей

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

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

В прошлом HTML и его расширения (то есть элементы, поддерживаемые браузерами, но не включенные в рекомендации W3C) позволяли напрямую изменять внешний вид текста или других компонентов, находящихся на странице, с использованием таких элементов, как , или таких атрибутов, как color. Хотя многие страницы до сих пор продолжают строиться с учетом этих соглашений, переход на XHTML потребовал, по возможности, избегать этого, а использовать таблицы стилей.

Таблицы стилей не изменяют напрямую текст, находящийся на странице, а маркируют некоторые его части, затем сравнивают то, что получилось, с тем, что задано в таблице. Браузер может и не обращаться к таблице стилей, как в случае использования для доступа к Интернету мобильных телефонов. В этом случае XHTML-код является отдельной сущностью, а стилевое решение — отдельной. Таким образом доступ к странице может получить максимальное число различных типов устройств, каждое из которых берет из таблицы стилей максимум того, на что оно способно.

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

ПРИМЕЧАНИЕ. До десятой главы мы будем обсуждать в основном организационную разметку XHTML. В главе 10 вы увидите, как таблицы стилей хорошо вписались в общую структуру языка. Также мы обсудим разницу между таблицами стилей, использование которых рекомендуется, и прямой разметкой, использование которой не рекомендуется.

Добавление скриптов

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

ПРИМЕЧАНИЕ. На рисунке 1.2 вы видите экран Macintosh. Веб-мастеринг является платформонезависимым, поэтому в тексте будут встречаться как экраны Windows, так и Macintosh. На самом деле, если у вас есть доступ к нескольким операционным системам: Windows, Unix, Macintosh и другим, то всегда полезно проверять, как выглядят созданные вами страницы на разных платформах. Написание скриптов — это настоящее программирование, но вскоре вы поймете, что овладеть этим искусством совсем несложно, особенно если вы понимаете логику программирования. Язык JavaScript (и его «родственники» ECMAScript и JScript) является самым распространенным средством, с помощью которого можно писать различные полезные скрипты.

Скрипты работают в сочетании как с XHTML, так и с таблицами стилей, делая веб-страницы интерактивными и объединяя все вместе в Dynamic HTML (или DHTML). Хотя XHTML заменил DHTML и стал самым популярным акронимом, касающимся веб-публикаций, создание динамических страниц — также полезное и интересное занятие.

Содержание