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

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

HTML и XHTML

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

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

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

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

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

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

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

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

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

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

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

CSS

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

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

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

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

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

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

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

<селектор> {

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

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

...

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

}

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

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

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

Связь CSS и HTML

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

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

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

<head>

...........

</head>

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

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

<head>

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

@import url(style.css)

</style>

</head>

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

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

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

Внешняя таблица стилей, ссылка на которую встречается в html - документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше.
Внутренние таблицы стилей приоритетнее внешних.
Таблицы стилей, располагающиеся в рамках самого элемента (<p style="...">), имеют приоритет, по отношению ко всем остальным стилям.
Более конкретные стили имеют приоритет перед менее конкретными (к примеру, p.classname {...} приоритетнее p {..}), т.е. стилевой класс приоритетнее переопределения тега, комбинированный класс приоритетнее стилевого.
В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.
Атрибуты стиля, объявленные как!important, имеют приоритет перед всеми другими значениями. Таким образом, стиль p {color: red!important} сделает весь текст в рамках тегов <p> красным вне зависимоти от любых других переопределений стиля для <p>.

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

JavaScript

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";