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

Все дело в том, что некоторое время назад мне пришлось познакомиться с очередной системой управления веб-сайтами. Весьма интересной, универсальной и, конечно же, не бесплатной. Как вы наверно уже догадались, речь идет о NetCat CMS.

Нельзя сказать, что разработчики этой системы изобрели что-то мегаоригинальное или суперинновационное. Ни для кого не секрет, что большинство современных систем разработки и поддержки веб-сайтов во многом похожи друг на друга и основываются на одних и тех же фундаментальных принципах построения. Тем не менее, логика и архитектура программного комплекса NetCat произвели на меня достаточно сильное впечатление. Прежде всего речь идет о практически полной самодостаточности системы, весьма продуманном API и реально удобном (на мой взгляд) пользовательском интерфейсе.

Таким образом, в конечном итоге было принято решение перевести на эту платформу проект webstandards.org.ru.

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

В прошлый раз мы занимались созданием базового HTML-документа, который стойко пролежал на веб-сервере в гордом одиночестве целых три месяца. Думаю, что настало время избавить его от этой участи и проделать вторую по счету (но не менее важную) подготовительную работу – снабдить наш документ базовыми стилевыми инструкциями. Однако, не все так просто, как кажется.

Публикация «Готовим базовый документ» не могла быть написана без предварительного сугубо теоретического материала о языках разметки гипертекста. Аналогичным образом невозможно написать практическое руководство по созданию базового стилевого файла без определенного теоретического введения в предмет.

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

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

В ближайших публикациях мы рассмотрим примеры верстки различных двухколоночных и трехколоночных макетов, ознакомимся с принципами оформления горизонтальных и вертикальных навигационных меню, научимся добиваться практически идентичного отображения полей форм в разных браузерах. Параллельно будут рассмотрены некоторые теоретические аспекты верстки: различные CSS-свойства, техника Faux Columns, методы Image Replacement, магическое свойство hasLayout, прелоад графических изображений средствами CSS и как избежать при этом неприятного эффекта Image Flickering в Internet Explorer, а также многое другое...

Но все это будет несколько позже, а пока мы должны выполнить одну важную подготовительную работу – создать базовый документ, который будем использовать во всех последующих практических занятиях. Для подготовки такого документа лучше всего воспользоваться каким-нибудь профессиональным инструментом веб-разработчика: Macromedia Dreamweaver, HomeSite, Adobe GoLive или другим аналогичным программным обеспечением. Также вполне подойдет Notepad++. Единственное, что я бы вам крайне не рекомендовал – это обычный блокнот MS Windows. Итак, приступим.

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

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

Почему у тебя в примерах разметки инпуты, имг и бр'ы не закрытые???
О каких стандартах идет речь???

Или такой:

По стандарту нужно писать не <br>, а <br />.
<br /> – это тот же перенос строки, просто написанный по правильному...

Или даже вот такой:

Для тэгов, не требующих закрывающего тэга, согласно спецификации HTML указывайте слэш перед закрывающей скобкой после одного (или более) пробела. Например: <br />...

Буквально несколько дней назад я засвидетельствовал важное историческое событие: материалы проекта webstandards.org.ru стали воровать. Все-таки дает о себе знать наш российский менталитет: с момента открытия проекта прошло всего два месяца, а результат уже налицо... ;-)

Первым «счастливым обладателем» материала «Правильная структурная разметка» стал владелец ресурса webhabra.ru.

Многим начинающим веб-разработчикам, которые ознакомились с концепцией разделения структуры и представления, не терпится применить полученные знания на практике. И вот тут-то их и подстерегает очередной вопрос: «Как правильно представить в коде названия разделов и подразделов, разнообразные меню, новостную ленту, иллюстрации – все то, из чего обычно и состоят веб-сайты?» Ведь именно оттого, насколько грамотно размечена веб-страница, будет зависеть ее соответствие семантическим требованиям стандарта и, как следствие, успех ее индексации поисковыми роботами.

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

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

Итак, давайте перейдем к рассмотрению тех самых основных структурных элементов, правильное использование которых позволит нам создавать семантически корректные документы.

Кандидатам философских наук посвящается...

Священные войны?

Веб-стандарты, валидность, семантическая верстка... На сегодняшний день эти термины уже знакомы даже начинающим веб-разработчикам, не говоря уже о высококвалифицированных специалистах в сфере веб-технологий. Но все-таки до сих пор с завидной постоянностью на различных конференциях Рунета возникают бурные религиозные споры «DIV vs TABLE», которые зачастую перерастают в банальный флейм, в котором уже сложно найти истину. Но истина – она все равно есть. Ее не может не быть. И, честно говоря, весьма удручает, когда какой-нибудь далеко не начинающий веб-разработчик или даже какой-нибудь «руководитель центра разработки веб-приложений» начинает вдруг со всей присущей ему серьезностью утверждать, что использование таблиц для представления нетабличных данных ни в коей мере не противоречит веб-стандартам, а все преимущества семантической верстки – это не более, чем «лже-доводы»...

Давайте в таком случае попробуем разобраться, что же представляют из себя эти самые веб-стандарты и какие они предъявляют требования к разработке веб-контента.

Ну, что же, оно все-таки свершилось... Проект webstandards.org.ru наконец-то заработал. Вообще, скажу вам честно, запустить тематический блог «с нуля» – дело это весьма утомительное и отнимающее довольно много времени. А времени, как известно, всегда не хватает. Приходилось чем-то жертвовать, где-то опаздывать, но не опаздывает только тот, кто ничего не делает... :-)