|
||||||||||
Сайтостроение по стандартамЗаметка 5. Готовим шаблон кода HTMLДекларация DOCTYPE Браузер должен знать, на каком языке написана страница, чтобы правильно отобразить ее на экране (или другом устройстве). Для этого в первой строке кода необходимо записывать конструкцию DOCTYPE.
Очень необходимая конструкция! Ваша визуальная разметка, выполненная средствами CSS по стандартам W3C, может потерпеть крах на экране, если DOCTYPE не будет записан. Элемент DOCTYPE предназначен для указания соответствия кода документа одному из стандартов W3C. Браузер, в зависимости от стандарта, по-разному интерпретирует элементы на странице. Элемент DOCTYPE — это, скорее, даже не элемент, а описание (декларация), имеющее свой собственный синтаксис. Декларацию DOCTYPE помещают перед элементом HTML, она начинается с восклицательного знака и записывается прописными буквами (и в XHTML). Варианты DOCTYPE для последней (и окончательной) версии HTML 4.01 приводятся ниже. Предусмотрено 3 стандарта языка HTML 4.01:
Вариант Strict Код не содержит элементов и атрибутов, помеченных W3C как “устаревшие” или “не одобряемые” (например: CENTER, FONT, S, U, align, background, bgcolor, color, size). Декларация записывается в виде: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Вариант Transitional Код может содержать устаревшие теги, вариант введен в целях совместимости со старыми версиями HTML. Декларация записывается в виде: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Вариант Frameset Аналогичен Transitional, но содержит также элементы для создания наборов фреймов. Декларация записывается в виде: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Какой вариант DOCTYPE выбрать? Вариант Frameset отбрасываем сразу, так как фреймы — это рудимент прошлого века, и использовать их мы не собираемся. В переходный период, когда браузеры не на 100% поддерживают стандарты, ничего другого не остается для практики, как выбрать переходный стандарт Transitional. Таким образом, код любой нашей странички должен иметь такой вид: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ru"> ... </HTML> Атрибут lang со значением "ru" определяет русский язык в качестве базового языка на страничке.
Спецификация HTML 4.01 Головная часть HTML-кодаКодировкаВ головной части HTML-кода нужно указывать кодировку, в которой написана страничка. Скорее всего вы записываете страницу в стандартной кодировке Windows, и тогда в головную часть кода нужно включать следующий элемент META: <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> Рассмотрим подробнее устройство этого элемента. Атрибут http-equiv связывает информацию, заданную в атрибуте content, с заголовком ответа сервера на просьбу браузера переслать ему гипертекстовую страницу. Сервер сообщит браузеру, что будет послан текстовый файл c HTML-кодом (значение text/html) в кодировке windows-1251 (значение charset=windows-1251). Следует отметить, что некоторые серверы поддерживают автоматическую перекодировку страниц, и тогда указание charset может привести к путанице: сервер сообщит браузеру, что страница будет в кодировке windows-1251 (информация из тега META), а сам перекодирует страницу, например, в КОИ8. Пользователь увидит на экране “кракобяки”. Разработчик должен поинтересоваться у провайдера сервера, на котором он собирается держать свой сайт, будет ли сервер перекодировать страницы перед передачей браузеру клиента, нужно ли на страницах указывать кодировку. Например, в справочном разделе Яндекса для тех, кто пользуется хостингом этого сервера, написано:
Название окнаСтандарт требует обязательное задание названия для окна, в котором будет отображаться гипертекстовый документ. Каждый документ HTML обязан иметь элемент TITLE в разделе HEAD. Спецификация HTML 4.01 Название окна задается при помощи элемента TITLE: <TITLE>Название окна</TITLE> Название окна должно совпадать с заголовком страницы (или с названием сайта на Главной). Это очень удобно, когда окно с сайтом свернуто в кнопку на Панели задач — на этой кнопке пользователь видит заголовок текущей страницы. Название окна заносится в набор избранных сайтов (меню Избранное), если пользователь решит запомнить ссылку на текущую страницу. Название окна — дополнительная подсказка пользователю о его текущем положении на сайте. Ссылка на CSS-файлМы уже договорились, что визуальные описания будем хранить в отдельном CSS-файле, одном на все страницы сайта. Для связи HТML-кода с этим файлом в головной части нужно записать указание: <LINK rel="stylesheet" type="text/css" href="main.css"> Имя CSS-файла может быть, конечно, другим, например: general.css, common.css, head.css, central.css, chief.css, total.css. Важно (для нас, а не для браузера), чтобы оно отражало суть содержимого. Если, помимо общего, для страницы создан еще и собственный стилевой файл, то ссылку на него помещаем следом за главной ссылкой: <LINK rel="stylesheet" type="text/css" href="main.css"> <LINK rel="stylesheet" type="text/css" href="01.css"> Имя стилевого файла, предназначенного для одной страницы, лучше сделать совпадающим с именем соответствующего HTML-файла. Это нужно не для браузера, а для нас, чтобы мы не запутались в файловой структуре сайта. Другие элементыВ головной части HTML-кода используют и другие элементы. Этот, например, указывает имя автора документа: <META http-equiv="author" content="Иван Сидоров"> А эти элементы задают описание документа и ключевые слова для поисковых систем: <META name="description" content="Обучение учителей и школьников"> <META name="keywords" content="Роботландия, Web-конструирование"> Шаблон кода HTMLТаким образом, код любой нашей странички должен иметь вид: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ru"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META name="description" content="краткое описание страницы"> <META name="keywords" content="список ключевых слов"> <LINK rel="stylesheet" type="text/css" href="main.css"> <TITLE>Название окна</TITLE> </HEAD> <BODY> ... </BODY> </HTML> Иногда мы будем вынуждены использовать более полную форму тега BODY, в которой присутствуют визуальные (не рекомендованные W3C) атрибуты: <BODY bgcolor=white text=black link=blue alink=red vlink=purple> Здесь задано (в качестве примера):
Зачем нарушать рекомендации W3C? Разве нельзя задать эти визуальные параметры в файле CSS? Можно и нужно, даже тогда, когда они заданы в теге BODY. Атрибуты bgcolor, text, link, alink, vlink в теге BODY отвечают за глобальное представление содержания страницы на экране, поэтому чрезвычайно важны: их полное отсутствие, или отсутствие некоторых из них, может привести к серьезным последствиям в браузерах, которые не поддерживают CSS. Есть ли такие браузеры, скажете вы? Ведь они давно ушли к динозаврам! IE-3 в природе уже точно не существует. Возможно, кто-то еще использует Netscape-4, если у него древний компьютер. Эти браузеры, можно считать, ушли. Но... Одни ушли, другие активно приходят: браузеры карманных компьютеров, компьютеров автомобилей, мобильных телефонов. И с поддержкой CSS у них пока не все в порядке. Допустим, логотип и заголовок созданы на синем фоне, цвет фона задан в стилевых определениях, а тег BODY пуст. Что получится? Цвет фона браузер установит по умолчанию: в одних браузерах он будет белым, в других — серым. Но в каждом из этих случаев антиалиасинг картинок, нарисованных для синего фона, будет неверным, что проявится синими разводами по контуру. Может получиться и еще хуже: если рисовали белыми линиями на синем фоне, то на белом фоне рисунка не будет видно. Таким образом, атрибуты в BODY нужны, когда цвет фона очень важен: на другом фоне графика будет выводиться с погрешностями или не будет видна вовсе. В остальных случаях задавать атрибуты цвета в BODY не надо. Но, может быть, можно ограничиться только атрибутом bgcolor, не задавая остальных? Сомнительно. Нужно, чтобы текст на фоне, заданном атрибутом bgcolor, нормально читался, как и ссылки. Нужно ли указывать значения цвета для текста, фона и ссылок (неотработанных, активных, отработанных), если они указываются в BODY? Да, нужно. Стилевые указания главнее атрибутов, именно они будут работать в браузерах, которые поддерживают CSS (атрибуты BODY будут проигнорированы). Стилевые правила позволят менять дизайн в современных браузерах, не редактируя HTML-код на сотнях страниц. Кроме того, стилевые правила имеют гораздо больше возможностей по сравнению с атрибутами. А атрибуты останутся запасным вариантом, обеспечивающим доступность для браузеров, не поддерживающих CSS. Мы решили использовать переходную модель Transitional для своих HTML-кодов. И вот эта наша первая обоснованная уступка строгому разделению содержания от представления.
А.. А.. Дуванов,
| ||||||||||
|
|