Как быстро и эффективно научиться верстке веб-страниц?

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

К тому же, это следующая ступень в дальнейшем освоении основ веб-мастерства:

• языка стилей (css);
• скриптов динамической верстки (php);
• языка динамической клиентской функциональности (JavaScript).

Первым этапом в понимании сути HTML-верстки станет краткий экскурс в истоки появления языка HTML. В 1990 году британский ученый Тим Бернс-Ли предложил коллегам из CERN (Европейской лаборатории физики элементарных частиц) проект, предназначенный для сетевого использования. В среде NeXTStep ученый собственноручно разработал первый браузер и сервер, на что его натолкнула актуальная в то время необходимость обработки и публикации результатов научных исследований в режиме реального времени. Преодолев сомнения и критику, проект со временем получил огромный успех и стал основой современной сети Internet.

Итак, HTML – язык разметки документов, позволяющий браузерам интерпретировать информацию в удобной для человека форме. Документы, написанные на языке HTML (как правило, с расширением .html или .htm), обрабатываются браузерами для последующего формирования внешнего вида страницы. Поисковые системы тоже регулярно выпускают рекоммендации по улучшению сайтов и грамотному их созданию.

Почему обучение верстке может быть простым и доступным?

Предлагаем вашему вниманию краткую структуру процесса освоения html-верстки. ВАЖНО: личными секретами успешного изучения делиться ни кто попало, а программисты-виртуозы Интернет-агентства “Сайт Имидж”, что в этом не одну собаку съели — руководитель отдела верстки Юрий Ловантович и менеджер по работе с клиентами Игорь Палинчак. В качестве приятного бонуса от авторов – ссылки и подсказки по практичным и актуальным на сегодня источникам необходимой информации.

Знакомимся – HTML!

• Приступая к изучению языка HTML, первое, что вы должны усвоить — каждая верстка осуществляется исключительно на основе макета дизайна. Начните с базовых единиц языка – тэгов и их атрибутов. Проглотив теорию – не раскачиваясь, воплощайте свежие знания на практике. На этом этапе ресурс http://htmlbook.ru – именно то, что вам надо. Информация на сайте адаптирована специально для новичков — предназначена как раз для «первого знакомства» с HTML и CSS. Советуем начать с раздела “HTML“ — “Самоучитель HTML”. Закрепить полученные знания вам поможет «Практикум», что в разделе «Основное». Обратите особое внимание на раздел “HTML5” — временный статус «новичка» не должен мешать вам уже сейчас идти в ногу с современными тенденциями развития веб-технологий. Раздел расскажет вам о том, что “HTML5” – не только следующая версия HTML, а открытая платформа для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
• Следующий шаг – обучение мастерскому написанию семантического ядра HTML. Семантическая HTML верстка являет собой соответствие тегов HTML и информации, находящейся внутри их. Главное, что необходимо понимать – читабельный, валидный HTML код достигается путем сокращения количества тегов. Это также способствует быстрой загрузке страницы и ранжированию поисковиками, что важно для оптимизации сайта.

Больше подробной и полезной информации по этому пункту ищите здесь: http://pepelsbey.net/2008/04/semantic-coding-1, http://pepelsbey.net/2008/04/semantic-coding-2/.

Совершенствуемся – СSS!

Освоив рекомендуемый материал, вы имеете достаточный багаж для того, чтобы оттачивать свои профессиональные навыки, а именно – изучать каскадные таблицы стилей (CSS — Cascading Style Sheets).

• Стили – это набор параметров, определяющих положение, вид и функциональность элементов веб-страницы. Главное преимущество стилей – они предоставляют гораздо больше возможностей для форматирования, дизайна и верстки в сравнении с уже родным вам HTML. Эта мощнейшая система может быть собрана в отдельных документах, благодаря чему не перемешивается с HTML кодом. Это – основа; больше, проще и понятнее – здесь: http://htmlbook.ru. Ознакомление с разделом «CSS» начните из “Самоучителя”, а справочник значительно упростит понимание пока незнакомых терминов. В будущем вам также пригодится раздел «Блочная верстка».
• Для особо настойчивых и любопытных в вопросе программирования рекомендуем сайты http://www.xiper.net, http://css-live.ru. Тут предоставлены уроки, открывающие секреты применения «продвинутых» приемов HTML и CSS. Если вы владеете английским языком – обязательно посетите ресурсы http://css-tricks.com/, http://net.tutsplus.com/, на которых можно найти не только текстовые, но и видео-уроки.

Высший пилотаж– JavaScript!

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

• Достаточной информационной базой для изучения этого языка владеет ресурс http://javascript.ru. Он включает много необходимых материалов, обсуждений и советов для качественного обучения.
• Первая часть книги Дэвида Флэнагана “JavaScript Подробное руководство” станет замечательным проводником в основы JavaScript. Вторая часть описывает среду разработки сценариев, предоставляемых браузерами. Третья часть – это обширный справочник по базовому JavaScript, четвертая – по клиентскому.
• С целью упрощения внедрения JavaScript в веб-страници применяется библиотека jQuery, также написана на JavaScript. Официальный сайт http://jquery.com и книга «jQuery Подробное руководство по продвинутому JavaScript» (Бер Бибо, Иегуда Кац) в доступной форме излагают все, что вам необходимо знать об этом языке.
• Значительную помощь в разработке JavaScript предоставляет свободный модульный фреймворк Mootools.

Малые хитрости от больших мастеров

Даже для опытных верстальщиков мы готовы предоставить информацию, способную значительно усовершенствовать работу. В вопросе создания оптимизированного кода верстки вам обязательно пригодится сайт hthttp://www.xiper.net. Руководитесь разделами «Учимся» и «Готовые приемы», в которых собраны передовые решения и технология применения скриптов.

Существует также множество сервисов для оптимизации верстки. Рекомендуем обратить внимание на ресурсы, посвященные этой теме:

1. http://www.google.com/webfonts; — предоставит коллекцию шрифтов, которые можно подключать на свои страницы.
2. http://www.fontsquirrel.com/fontface/generator — конвертирует любой шрифт и создает CSS – код для вставки в таблицу стилей.
3. http://stm.dp.ua/web-design/color-html.php — широкий выбор цветов и их кодов.
4. Сервис CSS спрайтов сократит число HTTP запросов для загрузки графических ресурсов, посылаемых вашим сайтом. Статья http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html расскажет вам об этом более подробно.
5. Раздел «Валидация документов» на сайте http://htmlbook.ru ознакомит вас с понятием валидаторов. Код каждой страницы должен отвечать спецификации, что разрабатывается W3 Консорциумом www.w3c.org. Несколько примеров валидаторов (проверка html – кода и css- кода) приведено здесь: http://validator.w3.org/, http://jigsaw.w3.org/css-validator/.
6. http://caniuse.com — проверка кроссбраузерности – сервис, что поможет избежать разного отображения верстки в нескольких браузерах.

+ Обещанный приятный бонус

Если ваша жажда к профессиональным знаниям еще не полностью утолена, спешим порадовать – это еще не все. Изучить HTML и CSS можно также с помощью следующей литературы:

• Марк Пилгрим «HTML5. Up and Running»
• Эрик Мейер “CSS — каскадные таблицы стилей: подробное руководство”
• Питер Лабберс, Брайан Олберс, Фрэнк Салим «HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений»
• Стивен Шафер «HTML, XHTML и CSS. Библия пользователя»
• Эрик Фримен, Элизабет Фримен «Изучаем HTML, XHTML и CSS».

P.S. Приняв решение изучить HTML, откажитесь от использования специальных редакторов. Пишите в обычном блокноте или Notepad++, это поможет вам быстрее приобрести необходимые навыки. Если вы – сторонник интерактивного общения – станьте частым гостем специализированных форумов:

• http://www.cyberforum.ru/html/
• http://ru.html.net/forums/viewforum.php?f=49
• http://www.html.by/
• http://forum.htmlbook.ru/

Спрашивайте советов у более опытных коллег, делитесь собственными знаниями с новичками!

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