HTML и CSS - с чего начать?

Эдакое лирическое отступление. :)

Когда я верстал свою первую Баечку, то не мудрствуя лукаво установил на компе визуальный редактор от Макромедии под названием Дримвьювер МХ и понеслась родимая! Правда при этом я краем глаза почитывал е-бук по данной проге от Володи Дронова (за что ему пламеный респект). Для первого знакомства с html эта прога подходит как нельзя лучше. Можно открыть сразу два окна: визуальное представление будущей страницы и она же в виде кода. Рисуя таблицы или вставляя ссылки, сразу видишь, как это выглядит в html. Хотя надо признать, что Дримвьювер добавляет в код много лишнего (впрочем намного меньше, чем другие проги подобного рода).

Почему не сразу Блокнот или WordPad? Помнится как-то зашел у меня разговор с одной знакомой, изучавшей html в институте, о том, чем верстать сайт. Знакомая, задрав нос заявила, что не признает ничего кроме Блокнота и ваще ратует за чистоту стиля. Звучит, конечно же, круто, но делу мало помогает. Если человек только начинает изучение верстки сайтов, то ковыряться сразу же в малопонятном коде — занятие не самое интересное. Зато когда удается собрать в редакторе свою первую страницу, да еще при этом вдоволь побороться со множеством странностей того же Дримвьювера, то счастью вашему таки не будет предела! :)

Как я уже упоминал, любой визуальный редактор добавляет много излишнего кода. И если со всякими Java-скриптами (а они будут! И откуда чего берется?) лучше не связываться поначалу, то поправить в полученном коде какие-нибудь стили - весьма просто и даже надо. Часто бывает так, что выбрав какой-то шрифт, мы потом меняем его на другой. И вот тут Дримвьювер часто делает такие фишки примерно:

"... <font style21><font style25><p>Тут у меня как бы абзац, набранный шрифтом Таймс, но почему-то потом превратившийся в Вердану</p></font></font>..."

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

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

Внимательно присмотревшись к тому, как визуальный редактор "пристегивает" стиль отображения шрифта к разным абзацам, можно заметить, что код часто просто повторяется. Логично предположить, что можно где-то на странице указать данный стиль всего лишь ОДИН раз, а потом в нужных местах (например в начале всех абзацев) дать на него что-то вроде ссылки. Таким образом и код уменьшится, и сама страничка соответственно полегчает. Вот тут как раз в игру и вступают каскадные таблицы стилей - CSS. В них можно прописать для любого элемента страницы — будь то хоть абзац, хоть картинка — необходимый стиль отображения. И там, где на странице будет попадаться данный элемент, к нему автоматом применится этот стиль.

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

Изучать всевозможные хитрости написания каскадных таблиц все-таки лучше по книге. Не стоит покупать увесистый талмуд, при взгляде на который нападает жуткая зевота. Всех тонкостей все равно не осилить (только если это не самоцель), а для уверенного использования достаточно знать несколько приемов, и можно верстать вполне себе грамотные и красивые сайты. Я бы посоветовал как вариант пару книг:

Ломов А. "Самоучитель HTML, CSS, скрипты: практика создания сайтов (+CD)"

Расс Уикли. "Освой самостоятельно CSS. 10 минут на урок"

В этих двух книгах достаточно просто и доходчиво разъясняются принципы верстки. И если у Р. Уикли брошюрка чисто по css, то у Артемия Ломова очень качественно и леххко описаны как сами спецификации html и css, так и различные способы верстки сайта - табличный, блочный и т.д. Рекомендую.