Модель стандартов Web - HTML, CSS и JavaScript

Введение

В предыдущей лекции мы слегка затронули базовые строительные блоки Web — HTML (или XHTML), CSS и JavaScript. Теперь пришло время немного углубиться и посмотреть на каждый из них в отдельности — что они делают, и как эти три составляющие взаимодействуют друг с другом при создании Web -сайта. Данная лекция имеет следующее содержание:

• Зачем разделять?
• Разметка - основа каждой страницы
  • Что такое XHTML?
  • Валидация - что это такое?
• CSS - давайте добавим немного стиля
• JavaScript - добавление поведения на страницы Web
• Пример страницы
  • index.html
  • styles.css
• Заключение
• Контрольные вопросы

Зачем разделять?

Это обычно первый вопрос, который задают о стандартах Web. Можно успешно реализовать контент, стилевое оформление и компоновку используя только HTML — элементы шрифта для стиля и таблицы HTML для компоновки, поэтому зачем беспокоиться о каких-то там XHTML/ CSS? Таблицы для компоновки и т.д. использовались в худшие времена дизайна Web, и многие по-прежнему это используют (хотя в действительности не должны бы этого делать), что и явилось прежде всего одной из причин создания данного курса. Мы не будем рассматривать такие методы в этом курсе. Ниже представлены наиболее очевидные причины использования CSS и HTML вместо устаревших методов:

1. Эффективность кода: Чем больше становятся ваши файлы, тем больше требуется времени для их загрузки, и тем дороже это будет для некоторых людей (которые все еще платят за загрузку каждого мегабайта). Поэтому было бы нежелательно попусту занимать полосу пропускания большими страницами, захламленными информацией об оформлении и компоновке в каждом файле HTML. Значительно лучшей альтернативой является создание простых и опрятных файлов HTML, и включение информации об оформлении и компоновке только один раз в отдельные файлы CSS. Чтобы увидеть реальный пример такой работы, просмотрите статью на сайте "A List Apart" о том, как переписать сайт Slashdot (http://www.alistapart.com/articles/slashdot/), где автор берет очень популярный Web -сайт и переписывает его с помощью XHTML/ CSS.
2. Легкость обслуживания: Следует из предыдущего пункта, так как если информация об оформлении и компоновке определяется только в одном месте, то обновления нужно сделать тоже только в одном месте, если потребуется изменить внешний вид сайта. Предпочли бы вы обновлять эту информацию на каждой странице сайта? В это трудно поверить.
3. Доступность: Пользователи Web со слабым зрением могут использовать программу, называемую "считыватель экрана", для доступа к информации с помощью слуха, а не зрения — она дословно читает для них страницу. Кроме того, программное обеспечение голосового ввода, используемое людьми с ограниченной подвижностью, также выигрывает от хорошо спроектированной семантики Web -страниц. Также как в случае считывателя экрана пользователь использует клавиатурные команды для перемещения по заголовкам, ссылкам и формам, так и пользователь голосового ввода будет использовать голосовые команды. Документы Web, размеченные семантически, а не с точки зрения представления, могут быть проще для навигации, а информацию в них пользователю найти легче. Другими словами, чем быстрее вы "доберетесь до места" (контента), тем лучше. Считыватели экрана не могут прочитать текст скрытый в изображениях, и иногда не могут понять действия JavaScript. Сделайте так, чтобы ваш критически важный контент был доступен каждому.
4. Совместимость с устройствами: Так как страница XHTML является просто обычной разметкой, не содержащей информации о стилях оформления, ее можно переформатировать для различных устройств с совершенно различными атрибутами (например, размер экрана), применяя просто альтернативную таблицу стилей - это можно сделать несколькими различными способами (можно просмотреть статьи о мобильных устройствах на сайте http://dev.opera.com для получения дополнительной информации). CSS также изначально позволяет определить различные таблицы стилей для различных типов среды/методов представления (например, просмотра на экране, печати, просмотра на мобильном устройстве).
5. Web-роботы /поисковые системы: Вполне вероятно, что вы захотите, чтобы ваши страницы можно было легко найти с помощью Google, или других поисковых систем. Поисковая система использует специальную "программу-робота", которая считывает содержимое страниц на сайтах и индексирует их. Если эта программа не сможет прочитать содержимое страницы, или неправильно интерпретирует важные вещи, потому что заголовки не были определены как заголовки и т.д., то вероятность того, что в результатах поиска вы окажетесь на верхних позициях, существенно уменьшится.
6. Это просто хорошая методика: Это несколько напоминает аргумент "потому что я так сказал", но поговорите с любым профессиональным разработчиком или дизайнером, имеющим представление о стандартах, и они скажут вам, что разделение контента, стилевого оформления, и поведения является лучшим способом разработки приложений.

Разметка, основа каждой страницы

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

Как можно было бы догадаться, элементы определяют тип реального контента, в то время как атрибуты определяют дополнительную информацию об этих элементах, такую как ID для идентификации элемента, или некоторое место, на которое указывает ссылка. Необходимо помнить, что разметка предполагается насколько возможно семантической, т.е. предполагается, что она описывает функцию контента как можно более точно. Рисунок 4.1 показывает структуру типичного элемента (X) HTML.

Рис. 4.1. Структура элемента (X)HTML

Анатомия элемента HTML: Символ "меньше", символ "больше" и текст между ними называется начальным тегом, так как он начинает элемент. Текстовая строка состоящая из последовательности символов, за которой следует знак равенства, за которым следует другая последовательность символов, заключенная в символы кавычек, называется атрибутом. Элементы HTML могут иметь более одного атрибута, или ни одного в некоторых случаях. Второй символ меньше, косая черта, второй символ больше и текст между ними называется конечным тегом, так как он заканчивает элемент. Оба тега совместно плюс текст между ними являются элементом.

Помня об этом, посмотрим в чем заключается различие между HTML и XHTML.

Что такое XHTML?

Буква "X" в XHTML означает "расширяемый" (простите, если заголовок раздела показался слишком многообещающим). Один из наиболее общих вопросов новичков звучит как "должен ли я использовать HTML или XHTML, и в чем собственно различие между ними?". По большей части они делают одно и то же, основное различие состоит в структуре. Основные различия показаны в Таблице 4.1.

Пока мы рекомендуем не беспокоиться слишком много о записи HTML или XHTML. Придерживайтесь советов, данных в этом курсе, и используйте тип документа HTML (больше о типе документа можно будет узнать в лекции 14), и вы не слишком ошибетесь.

Валидация, что это такое?

Так как HTML и XHTML определены стандартами (и CSS также, с этой целью), консорциум WWW (W3C) создал прекрасный инструмент, названный валидатором (validator) для автоматической проверки создаваемых страниц, и указания на любые проблемы/ошибки, которые может иметь код, такие как отсутствие закрывающих тегов, или отсутствие кавычек вокруг атрибутов. Валидатор HTML доступен в сети по адресу http://validator.w3.org/. Он автоматически определяет, используется ли HTML или XHTML, и какой тип документа используется. Если требуется проверить код CSS, то валидатор для этого доступен по адресу http://jigsaw.w3.org/css-validator/.

Дополнительную информацию о валидации можно найти в лекции 24. Дополнительная информация о типах документов находится в лекции 14.

CSS - давайте добавим немного стиля

Каскадные таблицы стилей ( CSS ) обеспечивают точное управление форматированием и компоновкой документа. Можно изменять или добавлять цвета, фон, размер шрифта и стили и даже помещать объекты на странице Web в различных местах. Существует три основных способа использования CSS: переопределение тега, применение стиля к некоторому ID, или применение стиля к классу. Давайте посмотрим на каждый из них:

1. Переопределение элемента. Можно изменить способ, которым выводится любой элемент (X) HTML, определяя правило для его стилевого оформления. Если требуется, чтобы все параграфы были записаны через две строки и зеленым цветом, в CSS можно добавить следующее объявление:

   p {
     line-height: 2em;
     color: green;
   }

   Теперь, любой контент, заключенный в теги <p>, будет записываться через две строки зеленым цветом.
2. Определение ID. Можно задать для элемента атрибут id для уникальной идентификации его на странице (каждый ID может использоваться на странице только однажды) - например, id="navigation_menu". Это позволяет иметь более детальный контроль форматирования страницы, например, если вы хотите, чтобы только определенный параграф текста выводился через два интервала и зеленым цветом, задайте для него ID:

   <p id="highlight">Контент параграфа </p>

   И затем примените к нему правило CSS следующим образом:

   #highlight {
     line-height: 2em;
     color: green;
   }

   Это позволяет применить правило CSS к параграфу на странице с атрибутом id, заданным как highlight (символ # является просто соглашением CSS для указания, что это ID).
3. Определение класса. Классы похожи на ID, за исключением того, что на каждой странице можно иметь несколько элементов одного класса. Продолжим с тем же примером с интервалом в две строки, если требуется использовать двойной интервал и выделение цветом для двух первых параграфов на странице, то можно будет добавить к ним классы следующим образом:

   <p class="highlight">Контент параграфа </p>
   <p class="highlight">Контент второго параграфа </p>

   И затем применим к ним правило CSS следующим образом:

   .highlight {
     line-height: 2em;
     color: green;
   }

   highlight является в данном случае классом, а не ID - точка в начале является просто соглашением CSS для указания класса.

   Пример ниже позволит лучше понять, как CSS оформляет HTML. Более подробно мы начнем рассматривать CSS в лекции 22.