Лабораторная работа №3 «Фреймы в HTML»

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

Достоинства фреймов

Простота

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

Быстрота

Для верстки без фреймов характерно размещение на одной странице и навигации и содержания. Это увеличивает объем каждой страницы и в сумме может существенно повлиять на объем загружаемой с сайта информации. А так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.

Размещение

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

Изменение размеров областей

Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.

Загрузка

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

Недостатки фреймов

Навигация

Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.

Плохая индексация поисковыми системами

Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы.

Внутренние страницы нельзя добавить в «Закладки»

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

Несовместимость с разными браузерами

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

Непрестижность

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

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

Создание фреймов

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

Для создания фрейма используется тег <frameset>, который заменяет тег <body> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 3.1).

Рис. 3.1. Пример разделения окна браузера на два фрейма

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

Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 3.1. Нам понадобится три файла: index.html – определяет структуру документа, menu.html – загружается в левый фрейм и content.html – загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 3.1).

Пример 3.1. Файл index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset cols="100,*"><frame src="menu.html" name="MENU"><frame src="content.html" name="CONTENT"></frameset></html>

В случае использования фреймов в первой строке кода пишется следующий тип документа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Данный <!DOCTYPE> указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер <head> содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.

В данном примере окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 100 пикселов, а правая – оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге <frame> задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src. В левое окно будет загружен файл, названный menu.html (пример 3.2), а в правое – content.html (пример 3.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name.

Пример 3.2. Файл menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Навигация по сайту</title></head><body style="background: #f0f0f0"><p>МЕНЮ</p></body></html>

В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.

Пример 3.3. Файл content.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Содержание сайта</title></head><body><p>СОДЕРЖАНИЕ</p></body></html>

Рассмотрим более сложный пример уже с тремя фреймами (рис. 3.2).

Рис. 3.2. Разделение страницы на три фрейма

В данном случае опять используется тег <frameset>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись (пример 3.4).

Пример 3.4. Три фрейма

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset rows="25%,75%"><frame src="top.html" name="TOP" scrolling="no" noresize><frameset cols="100,*"><frame src="menu.html" name="MENU"><frame src="content.html" name="CONTENT"></frameset></frameset></html>

Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>, который повторяет уже известную вам структуру из примера 3.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling="no" и noresize.

Ссылки во фреймах

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие – возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name (пример 3.5).

Пример 3.5. Ссылка на другой фрейм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset cols="100,*"><frame src="menu2.html" name="MENU"><frame src="content.html" name="CONTENT"></frameset></html>

В приведенном примере фрейму присваивается имя CONTENT. Чтобы документ загружался в указанный фрейм, используется конструкция target="CONTENT", как показано в примере 3.6.

Пример 3.6. Содержимое файла menu2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Навигация по сайту</title></head><body style="background: #f0f0f0"><p>МЕНЮ</p><p><a href="text.html" target="CONTENT">Текст</a></p></body></html>

Имя фрейма должно начинаться на цифру или латинскую букву. В качестве зарезервированных имен используются следующие:

- _blank – загружает документ в новое окно;

- _self – загружает документ в текущий фрейм;

- _parent – загружает документ во фрейм, занимаемый родителем, если фрейма-родителя нет значение действует также, как _top;

- _top – отменяет все фреймы и загружает документ в полное окно браузера.

Границы между фреймами

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing="0". Таким образом, комбинируя разные атрибуты тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия при этом показываться никак не будет (пример 3.6).

Пример 3.6. Убираем границу между фреймами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset cols="100,*" frameborder="0" framespacing="0"><frame src="menu.html" name="MENU"><frame src="content.html" name="CONTENT"></frameset></html>

Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.

Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо атрибутов. Можно, также, задать цвет рамки с помощью атрибута bordercolor, который может применяться в тегах <frameset> и <frame>. Цвет указывается по его названию или шестнадцатеричному значению (пример 3.7), а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.

Пример 3.7. Изменение цвета границы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset cols="100,*" bordercolor="#000080" border="5"><frame src="menu.html" name="MENU"><frame src="content.html" name="CONTENT"></frameset></html>

Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.

В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры (рис. 3.3).

Internet Explorer	Opera	Firefox

Рис. 3.3. Вид границы между фреймами в разных браузерах

Браузер Opera никак не изменяет цвет границы между фреймами, Internet Explorer устанавливает широкую границу практически сплошного цвета, а Firefox границу отображает в виде набора линий.

Изменение размеров фреймов

По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами. Для блокировки возможности изменения пользователем размера фреймов следует воспользоваться атрибутом noresize тега <frame> (пример 3.8).

Пример 3.8. Запрет на изменение размера фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset cols="100,*"><frame src="menu.html" name="MENU" noresize><frame src="content.html" name="CONTENT"></frameset></html>

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

Полосы прокрутки

Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling тега <frame>. Он может принимать два основных значения: yes – всегда вызывает появление полос прокрутки, независимо от объема информации и no – запрещает их появление (пример 3.9).

Пример 3.9. Запрет на изменение размера фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Фреймы</title></head><frameset cols="100,*"><frame src="menu.html" name="MENU" noresize scrolling="no"><frame src="content.html" name="CONTENT"></frameset></html>

При выключенных полосах прокрутки, если информация не помещается в окно фрейма, просмотреть ее будет сложно. Поэтому scrolling="no" следует использовать осторожно.

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

Плавающие фреймы

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название – встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 3.4 приведен пример такого фрейма.

Рис. 3.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ (пример 3.10).

Пример 3.10. Использование тега <iframe>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Плавающий фрейм</title></head><body><p><iframe src="hsb.html" height="120"></iframe></p></body></html>

В данном примере ширина и высота фрейма устанавливается через атрибуты width и height. Сам загружаемый во фрейм файл называется hsb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target (пример 3.11).

Пример 3.11. Загрузка документа во фрейм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Плавающий фрейм</title></head><body><p><a href="rgb.html" target="color">RGB</a> | <a href="cmyk.html" target="color">CMYK</a> | <a href="hsb.html" target="color">HSB</a></p><p><iframe src="model.html" name="color" height="200"></iframe></p></body></html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.

Тег <iframe> проходит валидацию только при использовании переходного <!DOCTYPE>.

Объекты в HTML

Для создания различных форм обратной связи в HTML используются различные объекты взимодействия. Большинство из них вызывается с помощью тега input и выбирается через свойство type. Рассмотрим основные объекты.

Текстовое поле используется для которткого ввода информации. Например, следующий код описывает создание текстового поля с подписью:

<input type=text name="text" value=" Текстовое поле" align=" LEFT " size=" 28 " maxlength=" 35 " required>

Рис. 3.5. Текстовое поле

В данном объекте существуют следующие свойства:

- type – тип объекта, в даннм случае text означает вовд текстового поля;

- name – внутреннее имя объекта, нужно в случае выпонения некотрых вычислительных операций с содержимым, вводимым пользователем;

- value – содержимое текстового поля, будет показано при загрузке страницы;

- align – по аналогии с тегами текста выравнивание содержимого текстового поля;

- size – высота текстового поля, указывается в пикселях;

- maxlength – максимальное количество символов в строке;

- required – свойство, которое своим наличием делает поле обязательным для заполнения.

Существуют также особенные типы текстовых полей, они используются для четко услоленных случаев и задаются свойством type:

1. Поле с паролем задается с помощью значения password. Внешне ничем не отличается от обычного текствого поля, но данные, вносимые в него, отображаются скрытыми спецсимволами.

2. Скрытое поле задается с помощью значения hidden, не отображается на странице. Может служить для хранения промежуточных значений при обработке скриптов или отладке.

Текстовая область используется для ввода большого количества символов, будь то текст или несколько записей, которые разбиваются по строкам. Следующий код используется для ввода текстовой области:

<TEXTAREA name=Dom cols=30 rows=3 wrap>Текстовая область</TEXTAREA>

Рис. 3.6. Текстовая область

Данный объект вводится с помощью парного тега <TEXTAREA>, его остальные свойства задают следующие параметры:

- name – задает внутренне имя объекта, по аналогии с текстовым полем;

- cols – количество строк текстовой области;

- rows – количество столбцов текстовой области, т.е. количество символов, которое вмещает одна строка;

- wrap – свойство, разрешающее своим наличием перенос строки на следующую, в случае, если будет превышено количество символов в свойстве rows;

- required – свойство, которое своим наличием делает поле обязательным для заполнения.

Списки используются для выбора одного или нескольких вариантов из предложенных. Существует два вида списков: с единственным выбором и с множественным выбором.

<select name="bit" size="2"> <option value="1">Быть</option> <option value="2">Не быть</option> </select>	<select name="food" size="4" multiple> <option value="1" selected>Пицца</option> <option value="2">Коньяк</option> <option value="3">Шашлык</option> <option value="4">Мороженое</option> <option value="5">Шампанское</option> <option value="6">Ананас</option> <option value="7">Шоколад</option> <option value="8">Кофе</option> </select>

 

Отличие в коде между двумя типами списком заключается в свойстве multiple, задаваемом при его инициализации (первая строка). Список учитывает количество строк, которое отображается без прокрутки свойством size, в случае, если вариантов больше, автоматически добаляется полоса прокрутки. Если необходимо установить выбор по умолчанию, в строке с нужным элементов нужно прописать свойство selected.

Также для выбора могут использоваться элементы checkbox и radio из той же группы input. Особенность данных объектов заключается в том, что каждый вариант в таком списке является условно независимым и инициализируется отдельно. Для того, чтобы собрать такой список воедино, требуется прописать им однаковое значение в свойстве name.

<input type="checkbox" name="skill" value="HTML" checked>HTML<br>

<input type="checkbox" name="skill" value="JavaScript">JavaScript<br>

<input type="checkbox" name="skill" value="PHP">PHP<br>

<input type="checkbox" name="skill" value="XML">XML<br>

<input type="checkbox" name="skill" value="FLASH">FLASH<br>

Для выставления значения по умолчанию необходимо прописывать свойство checked.

HTML
JavaScript
PHP
XML
FLASH

У так называемых радиокнопок есть одна особенность, необходимо прописывать свойство value. Если для checkbox обычно необходимо эти данные просто внести куда-либо, в radio оно нужно для дальнейшей обработки значений с помощью скриптов.

<input type="radio" name="skills" value="1" checked>HTML<br>
<input type="radio" name="skills" value="2">JavaScript<br>
<input type="radio" name="skills" value="3">PHP<br>
<input type="radio" name="skills" value="4">XML<br>
<input type="radio" name="skills" value="5">FLASH<br>

HTML
JavaScript
PHP
XML
FLASH

Кнопка является основным элементом обработки скриптов на страницах. Для ее создания используется тег input. Кнопка по инициализации ничем не отличается от прочих объектов тега, она также обладает внутренним именем name и значением value, которое является надписью на кнопке.

<input type=button name=button1 value="Кнопка">

Рис. 3.6. Кнопка.

Существует несколько типов кнопок, как и текстовое поле, они отличаются значениями, вводимыми в свойстве type. Работа с данными типами кнопок уместна в том случае, если вы используете формы в качестве группировки объектов.

1. Кнопка сброса используется для очистки данных объектов формы. Для ее иницализации используется свойство reset.

2. Кнопка ввода используется для отправки данных на сервер или скрипт для дальнейшей обработки. Для ее инициализации используется свойство submit.

Валидация документов

Валидацией будем называть проверку документа на соответствие веб-стандартам и выявление существующих ошибок. Соответственно, валидным является такой веб-документ, который прошел подобную процедуру и не имеет замечаний по коду. Код веб-страницы должен подчиняться определенным правилам, которые называются спецификацией, ее разрабатывает W3 Консорциум (www.w3c.org) при поддержке разработчиков браузеров.

На первый взгляд, кажется, что валидация необходима, ведь речь идет о сокращении количества ляпов разработчиков и написании «правильного» кода. На деле все обстоит гораздо сложнее и вокруг валидации до сих пор ведутся горячие споры об ее актуальности. Чтобы объективно раскрыть этот вопрос далее рассмотрим плюсы и минусы такой проверки.

Плюсы валидации

Хотя HTML-код имеет достаточно простую иерархическую структуру, при разрастании объема документа в коде легко запутаться, следовательно, просто и совершить ошибку. Браузеры, несмотря на явно неверный код, в любом случае постараются отобразить веб-страницу. Но поскольку не существует единого регламента о том, как же должен быть показан «кривой» документ, каждый браузер пытается сделать это по-своему. А это в свою очередь приводит к тому, что один и тот же документ может выглядеть по-разному в популярных браузерах. Исправление явных промахов и систематизация кода приводит, как правило, к стабильному результату.

Тенденции

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

Не стоит забывать и об XML (eXtensible Markup Language, расширяемый язык разметки). Этот язык становится стандартом де-факто для хранения данных и обмена информацией между разными приложениями. Синтаксис XML более жесткий, чем HTML и не прощает малейших ошибок. В каком-то смысле XML похож на языки программирования, в которых программа не будет скомпилирована, пока код не отлажен. HTML является первой ступенькой к изучению XML, поэтому приучая себя писать код по всем правилам, будет легче перейти к следующему этапу развития HTML.

Мода на валидацию

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

Косвенные преимущества

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

Минусы валидации

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

Браузеры

Разработчики браузеров не всегда следуют спецификации и в некоторых случаях трактуют код не по заданным правилам, а по-своему. В конечном итоге это приводит к тому, что веб-страница, которая правильно (т.е. так, как и задумывали разработчики) отображается в одном браузере, выводится с ошибками в другом. Следование спецификации в подобных случаях, скорее всего, отпугнет пользователей некоторых браузеров. К примеру, Internet Explorer (IE) в настоящее время занимает лидирующее положение среди браузеров, но при этом поддерживает спецификацию HTML и CSS хуже, чем Firefox и Opera. Очевидно, что пользователи IE при посещении сайта выполненного по всем стандартам, но не учитывающего специфику этого браузера, увидят неприглядную картину.

Заказчикам сайта, а также их разработчикам подобная ситуация не по нраву, поэтому стоя перед выбором: стандарты или браузер, они в большинстве своем выбирают браузер.

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

Резюме

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