Своим появлением эта книга обязана сайту, запущенному 8 мая 2003 года.
Он изменил существовавшее до тех пор отношение к веб-дизайну и через
некоторое время получил мировое признание. Сайт, названный Об уdivительной технологии
Позаботьтесь о красоте HTML-разметки
Мы понимаем и любим красоту души, красоту в природе, искусстве. Веб-дизайнеры создают визуально привлекательные сайты. Существует и скрытая от глаз посетителя часть сайта — его исходный код. Сейчас я постараюсь объяснить, почему необходимо заботиться и об этой скрытой части и в чем заключается красота HTML-разметки.
О красоте HTML-разметки я задумалась, когда прочитала великолепную и роскошную книгу Дэйва Ши и Молли Е. Хольцшлаг «Философия CSS-дизайна» (Dave Shea, Molly E. Holzschlag «The Zen of CSS Design: Visual Enlightenment for the Web», буквально «Путь CSS-дизайна: Визуальное просвещение для сети»).
Интересно, насколько противоречивы отзывы покупателей этой книги. Читать.
Книга посвящена сайту www.csszengarden.com (русская версия сайта — http://csszengarden.com/tr/russian/). Создатель сайта Дейв Ши разработал очень хитрую HTML-разметку: она проста и в то же время позволяет создавать бесконечное число вариантов дизайна при помощи CSS-технологии.
Дейв Ши предложил дизайнерам использовать его HTML-разметку и создать свой уникальный дизайн. Визуальное представление сайт должен получить с помощью новых правил в CSS-файле.
Привожу 4 изумительные работы:
- www.csszengarden.com/096 - «Японский сад»
дизайн Масанори Кавачи (Masanori Kawachi) - www.csszengarden.com/030 - «Энтомология»
дизайн Джона Хикса (John Hicks) - www.csszengarden.com/029 - «Задний двор»
дизайн Рэя Генри (Ray Henry) - www.csszengarden.com/094 - «Арт Деко»
дизайн Марка Труделя (Marc TrudeL)
Сайт www.csszengarden.com показал мне, что внешняя красота рождается благодаря CSS-технологии, уникальной графике, умению работать со шрифтами и особенной HTML-разметке.
Особенности HTML-кода www. csszengarden.com
Как просмотреть HTML-код страницы? Если вы пользуетесь браузером Internet Explorer: Вид > Просмотр HTML-кода; в браузерах Mozilla, Opera: Вид (View) > Исходный текст (Page Source).
1. В исходном коде сайта нет ни одного табличного тега (<table>, <td>, <tr>), т.е. страница структурирована без таблиц (самый распространенный вариант макетирования в Рунете). Поэтому такую верстку называют бестабличной.
2. Страница структурирована посредством блоков (<div>). Поэтому распространилось и другое название такой верстки — дивная.
3. Каждый блок имеет свое уникальное имя. Логично, что блок с шапкой страницы получил название «pageHeader» (англ. «голова страницы»), блок со ссылками — «linkList» (с англ. «список ссылок»), блок с контентом — «supportingText» — разбит в свою очередь на блоки, которые тоже имеют свои имена, хвостовик документа — «footer».
Поскольку каждый структурный элемент страницы имеет
соответствующее по смыслу название, такую верстку
называют семантически правильной.
Поскольку страница структурирована посредством
блоков div, такую верстку называют дивной,
блочной, контейнерной.
Дивная верстка может и не быть семантически правильной, если блоки названы
без соблюдения семантики.
На примере сайта Дейва Ши мы можем учиться семантически правильной верстке. Все, что от нас требуется — это грамотно разделить содержание нашего документа на части, которым нужно дать правильные названия.
По этому поводу можно возразить: зачем нужно соблюдать какие-либо правила в HTML-коде, когда посетители и не подозревают о наличии этой стороны документа? Даже заказчики веб-студий не предъявляют к коду никаких требований (хотя их отсутствия вполне объяснимы).
На этот вопрос отвечу поговоркой: «Называйте вещи своими именами».
Прежде всего это нужно нам самим. Когда структура документа прозрачна и логична, нам самим легче в нем ориентироваться. В табличной разметке для этого добавляют комментарии, потому что без них весьма затруднительно понять, где что находится.
4. На странице нет ни одного оформительского тега. Все оформительские правила вынесены в CSS-файл. Именно поэтому можно изменить внешнее оформление страницы без изменения исходного кода.
5. Страница создана в соответствии со стандартом XHTML 1.0 Strict, о чем свидетельствует в начале документа декларация DOCTYPE.
6. Параграфам и заголовкам на странице добавлены классы (может показаться, что страница перегружена классами), что делает разметку более гибкой. Их предназначение — дать больше свободы дизайнерам в оформлении этих элементов.
Разметка сайта www. csszengarden.com не содержит оформительского кода, соответствует WEB-стандартам, по сравнению с жестким табличным структурированием она дает возможность изменить внешний вид сайта без его правки. Каждый элемент разметки имеет соответствующее по смыслу название. Любой человек с базовыми знаниями HTML может разобраться в таком коде. Именно такую разметку я и называю красивой.
Автор: Регина Шайбакова
Добавлено к этой статье 14.02.08 г. Спустя несколько месяцев после написания статьи я выяснила, что мои мысли совсем не оригинальны.
Авторы книги «Мастерская CSS. Профессиональное применение Web-стандартов» — Энди Бадд, Камерон Молл, Саймон Коллизон — показывают, что «эстетически привлекательным должен быть не только внешний вид Web-страницы, но и ее код, что значительно облегчает поддержку и модификацию страницы как самим разработчиком, так и другими дизайнерами».
Кратко о книге. Книга посвящена современным технологиям Web-дизайна на основе каскадных таблиц стилей (CSS). Рассматриваются такие темы, как верстка на основе изменяемой и фиксированной ширины контейнеров; типы селекторов; абсолютное и относительное позиционирование; использование плавающих элементов; стилизация гиперссылок, форм, списков и панелей навигации; позиционирование фоновых изображений. Кроме того, обсуждаются вопросы применения фильтров и трюков для нивелирования на Web-страницах ошибок браузеров. Много внимания уделяется концепциям чистоты разметки и надежности кода.
Отзыв. Методично собираю библиотеку книг по CSS, купила и эту. Поначалу насторожила толщина -- она явно уступает остальным. Но! Она легко заменила в работе все остальные. Это самый свежий взгляд на многие проблемы вёрстки: здесь сведены воедино "глюки" различных браузеров и способы решения. Закрепление теории, оригинальные идеи и авторское видение процесса создания сайта.
Рекомендую. Гриценко Татьяна (отзыв покупателя книги на ozon.ru).
- Почему XHTML+CSS? 15 доводов в пользу перехода на XHTML+CSS.
- Как декларация DOCTYPE влияет на отображение браузерами?
- Web-студии и web-стандарты — две вещи несовместные?
- Недостатки меню на javascript. Из опыта создания ниспадающих меню в NavStudio.
- Зачем нужна печатная версия сайта. Как создать печатную CSS-версию?
Автор: Кристофер Шмитт