12. Заголовочная информация xhtml-документа
HTML заголовок как самостоятельный элемент интернет-страницы.
Дальше
в примерах будут показаны только участки
кода, но в своих экспериментах не
забывайте прописывать его целиком, по
шаблону из первого урока и после каждого
изменения в документе обновляйте
web-страницу, нажатием на 
в
Mozilla Firefox или на 
в
Internet Explorer, или F5.
HTML заголовки 6-ти уровней
HTML заголовок слева, по центру страницы, справа
В предыдущем уроке вы познакомились с HTML заголовком 3-го уровня – всего их 6:
<html> <head> <title>HTML заголовки</title> </head> <body> <h1>HTML заголовок 1-го уровня</h1> <h2>HTML заголовок 2-го уровня</h2> <h3>HTML заголовок 3-го уровня</h3> <h4>HTML заголовок 4-го уровня</h4> <h5>HTML заголовок 5-го уровня</h5> <h6>HTML заголовок 6-го уровня</h6> </body> </html> |
Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта.
Результат: HTML заголовки и их размеры
Зачем в тексте заголовки думаю понятно, к тому же, они используются поисковыми машинами для анализа содержимого web-страниц.
HTML заголовок определяет название отдельной статьи или web-страницы.
В идеале страница должна иметь не более одного HTML заголовка 1-го уровня, не более двух второго уровня и так далее.
HTML заголовки, независимо от того, что каждому уровню соответствует определенный размер, могут быть любых размеров – с помощью CSS возможно какое угодно форматирование.
13. Теги разметки и оформления текста в xhtml.
Основная разметка
В то время как скрипты и таблицы стилей требуют некоторой предварительной подготовки и, вообще говоря, подключаются к основному документу, сама разметка есть суть веб-страниц. В общем случае вы печатаете текст, затем с помощью тегов организуете его желаемым образом. HTML и XHTML имеют две основные разновидности элементов: пустые и непустые.
Пустые элементы делают что-то сами по себе: рисуют линию, добавляют изображение, загружают какой-нибудь файл. Примером может служить простой элемент, рисующий горизонтальную линию:
<hr />
Непустые элементы (или контейнеры) используются для того, чтобы что-нибудь делать с текстом, который их окружает.
Это <strong> очень </strong> важное замечание!
Обратите внимание на косую черту. И в HTML, и в XHTML косая черта означает закрывающий тег непустого элемента, такого как, например, strong. В XHTML важно вставлять косую черту и в конце пустого элемента. В более ранних версиях HTML это было не обязательно.
ПРИМЕЧАНИЕ. Замыкающая косая черта в пустом элементе часто добавляется через пробел для облегчения восприятия: <hr />. Это не является обязательным условием синтаксиса, поэтому <hr/> будет работать ничуть не хуже.
HTML и XHTML, возможно, гораздо сложнее, чем описано выше? Какие-то простенькие теги — все понятно… Чем тогда объяснить наличие более четырехсот страниц в этой книге? Да, действительно, эти языки чуть-чуть сложнее, чем просто набор тегов, но сложность их проявляется не столько в теории, сколько на практике. Хорошим способом понимания HTML и XHTML является подробное изучение атрибутов элементов, которые используются лишь для окончательной «настройки» внешнего вида символов на экране. Возьмем для примера основной тег для помещения изображения на страничку:
<img src="/contents/978594723414/image.jpg" />
Часть этого тега, соcтоящая из <img /> является полноценным элементом, хотя большого толка от его использования без атрибута src (источник изображения) не будет. Кроме этого атрибута, у <img /> есть и другие, такие как alt, задающий альтернативный текст при отсутствии изображения, align, задающий размещение картинки, как в следующем примере:
<img src="/contents/978594723414/image.jpg" alt="Добро пожаловать на мой сайт!" align="top" />
Теперь, кажется, должно быть понятно, что элементы могут быть и более сложными, иметь несколько атрибутов.
Если вы знакомы с предыдущими версиями HTML, этот код может показаться вам немного странным. Дело в том, что примеры, приведенные в этой книге, соответствуют стандарту XHTML. Это означает следующее:
XML является регистрозависимым, поэтому все имена элементов должны быть написаны строчными буквами: <p>, </p>, <br /> и т. д.;
все элементы должны иметь закрывающие теги либо закрывающую косую черту, даже если они являются пустыми, как <hr />;
все атрибуты должны быть заключены в двойные кавычки: <img src="/contents/978594723414/file.jpg" align="left" />.
Даже если вы в прошлом не имели дело с HTML, знайте, что XHTML легко читается и запоминается благодаря этим новым соглашениям.
Оформление с помощью таблиц стилей
Основные элементы разметки являются первым уровнем сложности HTML или XHTML. Вторым уровнем, особенно в отношении XHTML, является необходимость знания и понимания таблиц стилей. Таблицы стилей отвечают за то, чтобы веб-страницы имели свою индивидуальность и, простите за тавтологию, стиль. Они используются для изменения шрифтов, цветов, размеров и расположения текста и других элементов страницы.
Здесь есть одно важное отличие. Используя обычный XHTML для создания веб-страницы, вы на самом деле ничего не определяете и не изменяете во внешнем виде текста, по крайней мере, в терминах шрифтов, цветов, размеров и других подобных атрибутов. Вместо этого разметка XHTML используется для распределения текста по категориям и размещения его на экране.
В прошлом HTML и его расширения (то есть элементы, поддерживаемые браузерами, но не включенные в рекомендации W3C) позволяли напрямую изменять внешний вид текста или других компонентов, находящихся на странице, с использованием таких элементов, как <font>, или таких атрибутов, как color. Хотя многие страницы до сих пор продолжают строиться с учетом этих соглашений, переход на XHTML потребовал, по возможности, избегать этого, а использовать таблицы стилей.
Таблицы стилей не изменяют напрямую текст, находящийся на странице, а маркируют некоторые его части, затем сравнивают то, что получилось, с тем, что задано в таблице. Браузер может и не обращаться к таблице стилей, как в случае использования для доступа к Интернету мобильных телефонов. В этом случае XHTML-код является отдельной сущностью, а стилевое решение — отдельной. Таким образом доступ к странице может получить максимальное число различных типов устройств, каждое из которых берет из таблицы стилей максимум того, на что оно способно.
Например, сугубо текстовый браузер, встроенный в мобильный телефон, может различать обычный текст, заголовок и ссылку, но не различает шрифты. Когда вы помещаете команды изменения стиля в таблицу стилей, то текстовый браузер может спокойно проигнорировать их, продолжая нормально воспроизводить страницу вместе со всеми ее элементами.
ПРИМЕЧАНИЕ. До десятой главы мы будем обсуждать в основном организационную разметку XHTML. В главе 10 вы увидите, как таблицы стилей хорошо вписались в общую структуру языка. Также мы обсудим разницу между таблицами стилей, использование которых рекомендуется, и прямой разметкой, использование которой не рекомендуется.
Добавление скриптов
Следующим уровнем сложности при создании веб-страницы являются скрипты. Современные браузеры поддерживают стандартные языки написания скриптов, что позволяет сделать веб-страницы менее статическими, более живыми и интерактивными. Возможности варьируются от обычных эффектов наведения, то есть изменения стиля текста при наведении на него указателя курсора, как показано на рис. 1.2, до включения в состав страницы сложных приложений, доступ к которым осуществляется через веб-браузер.
ПРИМЕЧАНИЕ. На рисунке 1.2 вы видите экран Macintosh. Веб-мастеринг является платформонезависимым, поэтому в тексте будут встречаться как экраны Windows, так и Macintosh. На самом деле, если у вас есть доступ к нескольким операционным системам: Windows, Unix, Macintosh и другим, то всегда полезно проверять, как выглядят созданные вами страницы на разных платформах. Написание скриптов — это настоящее программирование, но вскоре вы поймете, что овладеть этим искусством совсем несложно, особенно если вы понимаете логику программирования. Язык JavaScript (и его «родственники» ECMAScript и JScript) является самым распространенным средством, с помощью которого можно писать различные полезные скрипты.
Скрипты работают в сочетании как с XHTML, так и с таблицами стилей, делая веб-страницы интерактивными и объединяя все вместе в Dynamic HTML (или DHTML). Хотя XHTML заменил DHTML и стал самым популярным акронимом, касающимся веб-публикаций, создание динамических страниц — также полезное и интересное занятие.