madkoder.com

[csman]

Грамотная вёрстка это искусство. В языках разметки нет особой теоретической сложности, выражение "язык программирования HTML" безграмотно -- на языке HTML невозможно "программировать". Но даже когда сам дизайн и внешний вид сайта уже определены, необходимо создать простой и понятный HTML-код, требующий минимум модификации и дополнений в будущем. Задача - лаконично и понятно разметить структуру страницы, чтобы отдельные элементы (шапку, меню, контент, т.п.) или стили было легко обнаружить, задать или поменять, будь то из кода (логики) самого приложения, руками в будущем или из файла стилей.

Под рукой справочник языка HTML, вот мы открыли HTML редактор и напечатали "DOCTYPE HTML PUBLIC"... что дальше? Большинство людей советуют сначала разбить страницу на отдельные логические блоки, и задать их простыми div-ами, не задумываясь сначала о расположении этих блоков или их стилях. Затем для блоков определяются их место на странице и стиль, эти параметры группируются и задаются классами или id в CSS-файле. Стили и положение элементов можно задавать из CSS как по их классу, так и id, типу HTML тега или комбинации этих параметров. Смысл вёрстки div-ами -- сначала отдельно задать логическую структуру страницы, а стили и геометрию обобщить и сгруппировать в CSS-файле, чтобы уменьшить количество кода и менять одинаковые параметры или целые стили несколькими значениями, не перевёрстывая страницы заново. Кроме того, если отчистить HTML код от тысячи ненужных переопределений одного и того же стиля, а загружать этот стиль из одного CSS файла, то уменьшается объем динамической информации, которая загружает сервер и канал, а стили достаются из кэша, достаточно скачать CSS файл только один раз.

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

Для div-ов с непривычки гораздо сложнее задавать геометрию -- в отличие от простых и понятных старых html таблиц (тега table), иногда даже над самыми простым расположением элементов в div-ах поначалу приходится ломать голову часами, к тому же учитывая глюки разных браузеров. Тем не менее, в html таблицах стили, геометрия и логическая структура шли вперемешку, и только с правильным применением div-ов можно получить все преимущества разделения и группировки различных параметров, упомянутых выше.

Хороший пример приведен здесь, да и вообще в техногрете иногда встречаются полезные вещи. Также скачать CSS примеры можно здесь или здесь. Ещё помогает хороший CSS и HTML редактор с подсветкой синтаксиса. Лично мне нравится старый добрый vi, он есть практически на любой платформе, но есть и более простые и понятные HTML редакторы. Существуют визуальные HTML редакторы вроде Дримвивера или MS Expression, да даже из Ворда можно создавать HTML-файлы, но качество верстки у визуальных HTML редакторов, как правило, неприемлемое -- самые лучшие инструменты -- руки, мозги и текст. То же самое касается и любых других визуальных HTML редакторов: даже в ЖЖ или на любом сайте с такими встроенными редакторами иногда получается сплошная кривизна, которую можно исправить только руками...

[ИГорь]

Откуда взята информация?

[csman]

Из интернетов. Раздобыта путём мучительного перебора клавиш и чтения документации.