2.3. Шаблон кода страницы
На рис. 2.2 показан код простейшей Web-страницы. Вся страница находится между начальным конечным тегами HTML и делится на две части: секцию заголовка (элемент HEAD) и секцию данных (элемент BODY). На всех страницах эти элементы располагаются именно так.
Рис. 2.2. Пример кода простейшей Web-страницы
В секции HEAD находятся элементы, которые задают режимы работы броузера и определяют свойства других элементов. В секции BODY располагают элементы, которые обеспечивают непосредственный вывод данных в окне броузера (текст, рисунки, гиперссылки, кнопки, формы ввода, таблицы, списки, линии, коды баннеров и счетчиков). В обеих секциях может быть размещен текст программ, расширяющих возможности страницы. Самые популярные языки для написания таких программ JavaScript (JScript) и Visual Basic Script (VBScript).Здесь мы видим два элемента META (обратите внимание, что эти элементы состоят только из одного тега). Первый указывает, что текст написан на русском языке. Это важно, к примеру, для поисковых систем. Пользователь может задать поиск текстов на определенном языке, и поисковая система должна знать, какой язык использован на определенном ресурсе. Нетрудно догадаться, что «ru» означает «russian» (русский язык). Второй тег META еще важней. Он указывает, что при создании страницы использовалась кодовая страница windows-1251. Если вы будете делать Web-страницы на русском языке, работая в ОС Windows, на всех страницах должен быть такой тег (альтернативой является кодировка utf-8).
Элемент TITLE тоже очень важный. Он определяет текст, который появляется в верхней строке окна броузера. По этому тексту поисковые системы осуществляют поиск и отбор страниц. Когда страница найдена, она также представляется текстом из этого тега. Поэтому в надо написать короткий текст, который точно бы обозначал назначение страницы и служил источником слов для поиска.
В нашем примере страница состоит из заголовка H1 и двух абзацев P.
В первом абзаце находится текст, отформатированный с помощью элемента FONT (задан цвет букв), а второй абзац содержит спецсимвол неразрывного пробела . Такой абзац не виден на экране, зато он позволяет создать пустое пространство между данными (например, разделами страницы).
Неразрывный пробел — часто используемый спецсимвол. Броузеры при форматировании страницы уничтожают идущие подряд пробелы и оставляют только один. Так что обеспечить вывод нескольких пробелов можно только с помощью спецсимволов. Кроме того, неразрывные пробелы необходимо вставлять в пустые ячейки таблиц, чтобы рамки вокруг таблиц были прорисованы правильно.
Можно сделать некоторые обобщающие выводы относительно синтаксиса HTML. При использовании каждого элемента важно знать, какие элементы могут располагаться внутри него, и внутри каких элементов может находиться он сам. Так, взаимное расположение элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице, правда, в тех случаях, когда не используются фреймы. Если же страница представляет собой документ раскладки фреймов, то вместо элемента BODY используется элемент FRAMESET.
Взаимное расположение элементов подчиняется логике и здравому смыслу. Например, элемент LINK, создающий только ссылку на другой файл, располагается в «невидимой» секции HEAD, а элементы, содержащие информацию, отображаемую на экране (текст, рисунки IMG, гиперссылки A), могут располагаться непосредственно в секции BODY, но и в абзацах P, и в ячейках таблиц TD. Например, располагая рисунок внутри ячейки таблицы, можно добиться определенного его положения относительно границ окна или других рисунков. В таких случаях уровень вложения элементов определяется разработчиком Web-страницы, и многое зависит от его фантазии и умения использовать элементы.
Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, карт, форм, фреймов. В этом случае порядок вложения элементов опять определяется логикой создания того или иного объекта на странице: существуют несложные правила конструирования.
Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определенных элементов. Здесь всё очень просто: каждый элемент выполняет заданную функцию и имеет определенную область действия.
Степень вложения элементов может зависеть от единственного тега. В приведенном ниже примере используются два абзаца (первый в зеленой рамке) и таблица:
<P style="border: 3px solid green">Текст первого абзаца </P>
<TABLE> ... </TABLE>
<P> Текст второго абзаца</P>
Таблица в данном случае — независимый элемент. Ее можно, например, выравнивать независимо от остального текста.
Если в первом абзаце будет удален конечный тег, то область действия первого элемента P распространится до начала второго абзаца:
<P style="border: 3px solid green">Текст первого абзаца
<TABLE> ... </TABLE>
<P> Текст второго абзаца 2</P>
Теперь таблица является частью первого абзаца, и рамка будет охватывать таблицу и текст.
И наоборот, элемент P может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев P.
Нарушение правил вложения — одна из наиболее распространенных ошибок при создании Web-страниц. Чтобы избежать таких ошибок, надо пользоваться редакторами гипертекста, которые автоматически контролируют выполнение правил синтаксиса.
Надо заметить, что броузеры построены таким образом, что они не реагируют на некоторые ошибки разметки гипертекста:
— отсутствие необязательного конечного тега, когда его роль выполняет начальный тег следующего элемента;
— ошибка в названии тега (элемент не участвует в построении страницы);
— ошибка в названии атрибута (свойство элемента не изменяется).
Если страница может быть отображена, то она выводится на экран без каких-либо предупреждающих сообщений. Программа интерпретирует ошибочно расставленные теги определенным образом и формирует изображение, следуя логике, заложенной в нее разработчиками. При этом вид страницы может и не соответствовать замыслу автора. И только в случае очень серьезных ошибок или явных противоречий броузер выводит сообщение о невозможности отобразить страницу. Косвенным признаком ошибки разметки может служить появление на странице фрагментов кода HTML. Данное качество броузеров используется для исправления проблем со стандартизацией элементов. В свое время для броузеров фирм Microsoft и Netscape были предусмотрены разные дополнительные атрибуты элемента BODY, определяющие поля Web-страницы. Поэтому для задания размера верхнего поля используются два атрибута с одинаковыми значениями (например, 8 пикселов):
<BODY topmargin=8 marginheight=8>
Для задания левого и правого поля размером 40 пикселов используются три атрибута:
<BODY leftmargin=40 rightmargin=40 marginwidth=40>
Броузеры Microsoft используют атрибуты topmargin, leftmargin и rightmargin, а броузеры Netscape — marginheight и marginwidth. Обратите внимание, что в одном случае возможно задание ширины боковых полей по отдельности, а в другом — нет. Подобные нюансы необходимо учитывать при разработке Web-страниц.
Правила синтаксиса распространяются и на использование стартового и конечного тегов, атрибутов и содержимого элемента. Не путайте понятия «элемент» и «тег». Некоторые элементы не имеют конечного тега. Очевидно, что элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом или без него. Элемент P может иметь конечный тег, но если этот тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, рисунок IMG, элемент списка LI, ячейка таблицы TD строка таблицы TR и т. д.
Таким образом, полезная информация одного элемента должна находиться или между стартовым и конечным тегами данного элемента, или между стартовым тегом данного и стартовым тегом следующего элемента. Любой произвольный текст, введенный на страницу, воспринимается броузером как подлежащий выводу на экран и, следовательно, форматированию в соответствии с окружающими этот текст элементами. Исключение составляет только текст, помещенный внутрь элемента комментария <!-- текст -->.
Броузеры игнорируют разбиение текста на строки, полученное в текстовом редакторе (за исключением текста, помещенного внутрь элемента <PRE> текст </PRE>). Теоретически, всю Web-страницу можно уместить в одной длинной строке. Символы конца строки, введенные, например, в Блокноте, могут помочь чтению кода HTML, но не отображаются броузером. Последний, при выводе страницы на экран, может оборвать строку в соответствии с расстановкой элементов Hn, P или BR, а в остальных случаях он форматирует абзацы в зависимости от объема текста, размера шрифта и текущего размера окна. Поэтому Web-страницы надо компоновать таким способом, чтобы их вид кардинально не изменялся для разных режимов разрешения монитора, размера экрана, размера окна броузера, использования полноэкранного или оконного режимов.
Очень важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри стартового тега.
© TEKCT.RU, А. Гончаров, 2007-2022
|
|