Вы точно этого хотите?

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

Если вы думаете, что через пару недель сможете зарабатывать на создании сайтов деньги — вы очень глубоко ошибаетесь. Минимальной отдачи можно ожидать через несколько месяцев, поэтому, если вам не терпится начать получать деньги, лучше поищите другую профессию.

Если вам некогда изучать веб-разработку как следует, а собственный сайт всё же хочется — заведите блог на какой-нибудь крупной блог-платформе.

Чем именно заниматься?

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

Разработка несложного, но функционального сайта, обычно состоит из создания графического макета, вёрстки и программирования (или установки на систему управления).

В этой статье я расскажу только об одной области — вёрстке сайтов. Если вы хотите стать дизайнером или программистом — обращайтесь к «старшим товарищам».

С чего начать?

Начинать обучение принято с подготовки рабочего места и выбора учебников.

Рабочее место

С рабочим местом всё довольно просто. На первых порах вам потребуется современный браузер (Internet Explorer к таковым не относится ни в какой версии, кроме, может быть, девятой) и удобный текстовый редактор.

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

А вот подсветку лучше задействовать по полной программе. Поверьте, очень неприятно часами ломать голову над проблемой, которая, как окажется впоследствии, заключалась в лишней запятой. Вёрстка — это не сочинение в пятом классе, ошибок тут быть не должно.

И конечно, обязательна постоянная практика. Я начал изучать HTML в 2005 году, ещё будучи школьником, но из-за отсутствия постоянной практики (за всё время я сверстал и исправил не больше сотни макетов) не так уж редко оказываюсь в затруднительном положении, когда речь идёт о какой-нибудь нестандартной вещи. К счастью, Гугл позволяет довольно быстро решать подобные проблемы. Но ведь и им тоже надо уметь пользоваться.

Учебники

Учебники — очень важный момент. Помните, что один источник никогда не сможет дать вам всей информации. Понадобится прочитать и понять несколько книг и десятки статей, прежде чем вы сможете чувствовать себя более-менее уверенно.

Выбирая учебный материал, обязательно обращайте внимание на год выпуска. Чем свежее учебник, тем лучше. Информация очень быстро устаревает, поэтому, если учебнику больше четырёх или пяти лет, его, как правило, можно смело отправлять в мусор.

Никогда не покупайте книги типа «Сайт за 10 минут», «Сайт без проблем», «Создание сайтов для чайников», «Как создать свой супер-сайт». Глупостей и устаревшей информации вы найдёте в них с избытком, а вот полезной информации не получите. Сюда же относятся и платные видеокурсы.

Хорошие учебники редко бывают тонкими. Если в книге меньше 400 страниц, весьма вероятно, что это очередной сборник вредных советов.

Я не зря так категоричен. Лучше пропустить один нормальный учебник, чем прочитать десяток плохих, а потом доставлять головную боль начальству, заказчикам, коллегам и много ещё кому.

Сегодня я могу вам посоветовать следующие учебники и источники:

• спецификации HTML 4.01 и CSS 2 (их чтение обязательно),
• учебники по HTML и CSS на HTML.net (подойдут для начального ознакомления с языками, их можно прочитать до спецификации, но никак не вместо),
• книга Эрика Мейера «CSS-каскадные таблицы стилей»,
• htmlbook.ru (хороший справочник, много практических приёмов и хитростей вёрстки).

В списке не случайно нет ничего про HTML5 и CSS3. Изменений, в корне меняющих что-либо, в них, в общем-то, нет, поэтому их изучение лучше отложить до тех времён, когда вы будете хорошо понимать уже принятые стандарты. Тогда же можно будет заняться изучением блогов «отцов» и вёрсткой, как таковой: нарезкой графики, созданием шаблонов с несколькими колонками и т.п... Вы должны понять, что просто выучить наизусть все теги, атрибуты и свойства мало, нужно научиться их правильно применять.

Частые ошибки новичков

Самая распространённая ошибка — использование устаревших методов вёрстки. Сюда относится вёрстка с помощью таблиц, использование устаревших элементов, таких как <center>, использование идентификаторов не к месту, «паровозы» типа body div#content #left #post-image в качестве селекторов и многое другое.

К несчастью, сегодня очень много людей, которые думают, что если старые методы эффективны, то использовать новые не стоит. Это не так! Ударить оппонента дубиной по голове — тоже очень эффективный метод разрешения проблем, только вот что-то дубины нынче не в почёте.

Практические советы по вёрстке

Используйте язык XHTML

XHTML 1.0 — это наилучший выбор на сегодняшний день, если не принимать во внимание HTML5. Подробнее о нём вы можете прочитать в книге Молли Хольцшлаг «250 советов HTML и WEB-дизайна».

Использовать XHTML 1.1 сегодня не стоит, это мёртвая ветка языка HTML, которая может доставить определённые проблемы при работе в старых браузерах.

Кто-то может сказать, что с выходом HTML5 умрёт и XHTML 1.0. Это не так. XHTML 1.0 в том виде, в котором он задумывался, умер уже давно. Сегодняшний XHTML 1.0 — это HTML 4 с изменённым синтаксисом. Этот синтаксис можно использовать и в HTML5. Таким образом, верстальщик, владеющий XHTML 1.0, сможет без особого труда перейти на HTML5.

Используйте «режим стандартов»

«Режим стандартов» подразумевает использование «строгого типа документа». XHTML 1.0 Strict на сегодняшний день самый удобный вариант HTML. Более подробно читайте в статье «Почему важен DOCTYPE и как его правильно использовать».

Чем строже синтаксис, чем точнее он соблюдается начинающим верстальщиком, тем лучше. Не слушайте тех, кто предлагает использовать Transitional доктайпы, мотивируя это тем, что в Strict, например, нет такого атрибута, как target. От того, что вы добавите его в правильно написанный валидный документ, никому хуже не станет. А вот если вы, пользуясь тем, что Transitional допускает различные вольности, перестанете уделять качеству своего кода должное внимание... Вы рискуете так и остаться «студентом», который, скажем, в 2012/13/14/... году делает закруглённые уголки таблицами.

Выносите стилевое оформление во внешний файл

Не захламляйте ваши HTML документы. Стили во внешнем файле — признак хорошего тона и простой способ избавиться от головной боли, если в будущем вам придётся изменять страницу.

Используйте таблицы по назначению

Использование табличного каркаса страницы сегодня в 99% случаев не оправдано ничем, кроме «эффективности» метода (про это я уже писал чуть выше). Чтобы узнать больше, посмотрите веб-презентацию «Почему верстать таблицами глупо». Конечно, тут могут быть свои исключения, но они касаются в основном не новичков, а профессионалов, которым необходимо обеспечивать супер-кроссбраузерность, лёгкость поддержки кода командой и ещё кучу всего.

Используйте сброс стилей

Сброс стилей — эффективный метод, который позволяет минимизировать изменения отображения сайта в разных браузерах. Более подробно об этом читайте в статье «Сброс стилей с помощью CSS Reset» и в моей статье «О сбросе стилей».

На сегодня это всё. Читайте больше, пробуйте, экспериментируйте и у вас всё получится. Удачи.