1.3Различия современных веб-стандартов

Если говорить о конкретной реализации, то, применительно к большинству веб-страниц, для структурирования контента в современном мире используется HTML (и XHTML), за управление представлением отвечает CSS, а задачи управления поведением возложены на JavaScript, как было сказано выше.

1.3.1HTML и XHTML

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

Сейчас можно уже говорить о неких единых принципах работы с текстом как при его оформлении в текстовом процессоре (не важно, MS Word, OpenOffice или каком-то ином), так и при гипертекстовой разметке. И в том, и в другом случае при грамотной работе задачи написания и верстки полностью разделены и, вообще говоря, независимы.

Итак, мы используем только структурные теги (или, как их еще называют, теги логической разметки) и только по их прямому назначению. Абзацы текста создаются с помощью тега <p>, и никак иначе. Заголовки (и только заголовки) — тегами <h1>, <h2>... <h6>. <div> — это крупный раздел, блок на странице. Никаких <b>, <i>, <u>, тем более, <font...>!

Вторая особенность — более жесткие и единообразные правила XHTML по сравнению с HTML. Это, с одной стороны, упрощает их изучение, с другой — подталкивает к более аккуратной работе.

Напомним основные отличия:

• все теги и имена атрибутов записываются строчными буквами (значения атрибутов могут содержать и заглавные);

• все значения атрибутов заключаются в кавычки;

• все атрибуты должны иметь значения;

• все теги должны быть закрыты (в том числе, <p>, <li>, <td> и т. п.), «пустые» теги закрываются наклонной чертой в конце тега (например, <br />);

• все специальные символы должны быть закодированы (знак «<», не являющийся частью тега, записывается как «<», «>» — «>», «&» — «&» и т. д.)

Важное замечание: каждое правило начинается словом «все». Никаких исключений нет, что значительно упрощает использование этих правил.

1.3.2CSS

Язык  HTML позволяет создавать разметку страницы и делить ее на абзацы, заглавия, таблицы, преобразовывать шрифты онлайн, играть с цветовыми решениями, однако обладает некоторой громоздкостью и большой емкостью, что отражается на тяжести конечных файлов и скорости их загрузки.Для более легкого оформления и разделения информации на страницах web сайта применяют отдельное дополнение к HTML программированию – таблицы CSS (Cascading Style Sheets).

CSS— формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Язык разметки— набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

Как правило, CSS применяется при работе с HTML и XHTML языками, и используется для задания цветов, параметров шрифтов, расположения блоков и иных элементов представления веб - страниц.

К преимуществам использования CSS относятся:

• централизованное управление отображением множества документов при помощи одной таблицы стилей;

• упрощенный контроль внешнего вида веб - страниц;

• наличие разработанных дизайнерских техник;

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

В общем виде CSS задается следующим образом:

<селектор> {

<атрибут стиля №1>: <значение атрибута>;

<атрибут стиля №2>: <значение атрибута>;

...

<атрибут стиля №N>: <значение атрибута>;

}

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

Атрибутом_стиля называется один из параметров элемента веб - страницы (в частных случаях схожи с атрибутами тегов, но следует помнить, что это разные вещи).

CSS стили отделяются друг от друга пробелами, либо символами переноса строк. Не должно быть символов ';' между различными стилями!

Связь CSS и HTML

В описании селекторов и имен стилей не должно быть пробелов или переводов строк.

Как уже упоминалось, CSS файл является внешним, по отношению к html - документу. Существует несколько способов "привязки" определенного файла стилей к конкретному документу.

Посредством тега <link>, находящимся в рамках парного тега <head>:

<head>

...........

<link rel="stylesheet" type="text/css" href="style.css">

</head>

Атрибут rel указывает на тип подключаемого файла, type – указывает MIME тип файла, href – указывает путь до файла стилей.

Посредством директивы @import, находящейся в рамках парного тега <style>:

<head>

.............

<style type = "text/css">

@import url(style.css)

</style>

</head>

Указанные способы позволяют подключить внешнюю таблицу стилей.

Правила и каскадность CSS

Итак, существует несколько способов задания связи между CSS и html - документом. Кроме того, к одному и тому же элементу веб - страницы могут быть назначены несколько стилей (к примеру, в рамках самого элемента и во внешней таблице стилей). При этом фактическое отображение элемента регулируется правилами каскадности:

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

2. Внутренние таблицы стилей приоритетнее внешних.

3. Таблицы стилей, располагающиеся в рамках самого элемента (<p style="...">), имеют приоритет, по отношению ко всем остальным стилям.

4. Более конкретные стили имеют приоритет перед менее конкретными (к примеру, p.classname {...} приоритетнее p {..}), т.е. стилевой класс приоритетнее переопределения тега, комбинированный класс приоритетнее стилевого.

5. В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.

6. Атрибуты стиля, объявленные как !important, имеют приоритет перед всеми другими значениями. Таким образом, стиль p {color: red !important} сделает весь текст в рамках тегов <p> красным вне зависимоти от любых других переопределений стиля для <p>.

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

1.3.3JavaScript

JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента.

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

Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript.

JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA.

JavaScript — это язык программирования, основанный на объектах. Все объекты, доступные сценарию на языке JavaScript, подразделяются на три группы:

• встроенные объекты исполняющей системы;

• объекты среды, в которой исполняется сценарий (т. е. либо объекты клиента, либо объекты сервера);

• пользовательские объекты, создаваемые сценарием в процессе его выполнения.

Новое свойство объекта создается просто присваиванием ему значения. Пусть, например, мы уже создали объект myBrowser, который должен описывать наш Веб-обозреватель. Это описание будет состоять из названия обозревателя (name) и его версии (version). Для создания указанных свойств мы должны включить в сценарий следующие строки:

myBrowser.name = "Microsoft Internet Explorer";

myBrowser.version = "5.5";

Объектная модель JavaScript

Большинство объектно-ориентированных языков (например, Java и C++) основаны на двух базовых понятиях: классы объектов и экземпляры (instances) объектов.

• Класс объектов — это абстрактное понятие, описывающее все свойства данного класса (в Java эти свойства называются полями и методами, а в C++ членами класса, но суть от этого не меняется).

• Экземпляр объекта — это реализация класса, т. е. конкретный объект, наделенный всеми свойствами данного класса.

JavaScript, в отличие от этих языков, основан на прототипах и не проводит различия между двумя приведенными понятиями: в нем есть только объекты. Некоторым аналогом класса здесь выступает прототип объекта, который определяет начальный набор свойств нового объекта. В процессе выполнения программы объект может получать новые свойства; более того, он может сам выступать в качестве прототипа при создании новых объектов.

JavaScript в сравнении с Java

JavaScript и Java схожи в одном и фундаментально различаются в другом. Язык JavaScript напоминает Java, но не имеет строгого статического контроля типов. JavaScript во многом наследует синтаксис выражений, правил именования и базовых управляющих структур Java, что послужило основанием переименования его с LiveScript в JavaScript.

JavaScript	Java
Объектно-ориентированный. Нет различий между типами объектов. Наследование осуществляется через механизм прототипов, а свойства и методы могут добавляться в любой объект динамически.	Базирующийся на классах. Объекты разделяются на классы и экземпляры классов с наследованием посредством иерархии классов. Классы и их экземпляры не могут иметь свойства и методы, добавляемые динамически.
Типы переменных не объявляются (динамическое определение).	Типы переменных должны быть явно определены (статическое определение).
Не может автоматически записывать на жесткий диск	Не может автоматически записывать на жесткий диск

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

Лет 15 тому назад для того, чтобы сделать шрифт надписи покрупнее и покрасить буквы красным, любой веб-мастер написал бы прямо в HTML-коде вот что: <fontsize="+1" color="#ff0000">очень важная надпись</font>. И оказался бы совершенно прав, ибо других способов добиться желаемого не существовало в принципе. Сегодня же за такое сразу выдают чугунную медаль за профнепригодность.

Лет 10 тому назад реализация эффекта «перекатывания» кнопок меню навигации не обходилась без JavaScript. Спецификация CSS2 уже даже была рекомендацией W3C, но это мало кого трогало — в распространенных на тот момент браузерах она толком не работала.

Лет 5 тому назад такую штуку, как изменение расположения и нюансов внешнего вида блоков на странице в зависимости от ширины окна браузера, можно было сделать только при помощи JavaScript. Сегодня уже можно пользоваться для этих целей возможностями MediaQueries — одного из модулей CSS3. Пока, правда, осторожненько так, но, думаю, в ближайшие пару лет во всех вменяемых браузерах будет реализована адекватная поддержка этого великолепия.