Как быстро и эффективно научиться верстке веб-страниц?
Обучение созданию веб-проектов необходимо начинать с основ языка гипертекстовой разметки (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. Руководитесь разделами «Учимся» и «Готовые приемы», в которых собраны передовые решения и технология применения скриптов.
Существует также множество сервисов для оптимизации верстки. Рекомендуем обратить внимание на ресурсы, посвященные этой теме:
- http://www.google.com/webfonts; — предоставит коллекцию шрифтов, которые можно подключать на свои страницы.
- http://www.fontsquirrel.com/fontface/generator — конвертирует любой шрифт и создает CSS – код для вставки в таблицу стилей.
- http://stm.dp.ua/web-design/color-html.php — широкий выбор цветов и их кодов.
- Сервис CSS спрайтов сократит число HTTP запросов для загрузки графических ресурсов, посылаемых вашим сайтом. Статья http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html расскажет вам об этом более подробно.
- Раздел «Валидация документов» на сайте http://htmlbook.ru ознакомит вас с понятием валидаторов. Код каждой страницы должен отвечать спецификации, что разрабатывается W3 Консорциумом www.w3c.org. Несколько примеров валидаторов (проверка html – кода и css- кода) приведено здесь: http://validator.w3.org/, http://jigsaw.w3.org/css-validator/.
- 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/
Спрашивайте советов у более опытных коллег, делитесь собственными знаниями с новичками!
Надеемся, эта статья станет для вас достойным руководством в изучении программирования. Следующий материал будет посвящен серверному язику программирования РНР.
- Инструкция по самостоятельному SEO-аудиту интернет-магазина
- Стратегия продвижения интернет-магазина: руководство из 20 шагов
- Создание интернет-магазина на WooCommerce — пошаговое руководство
- Пошаговая инструкция: как создать контролируемый и прозрачный отдел продаж интернет-магазина
- 14 необходимых инструментов для управления интернет-магазином
- 17 шагов для настройки подробной аналитики вашего интернет-магазина
- Предыдущая « Установка Denwer — первый шаг на пути создания WEB-проекта
- Следующая ImageCMS 3.2.7.59 – расширенный функционал и дополнительные возможности »
Спасибо за урок, думаю, многим пригодится)
Отличная статья! Больше спасибо за труд и ценную информацию. Буду изучать! 🙂
Typically the little resolution is definitely rate, and also since i have are not a man involving small amount of words and phrases, allow me to demonstrate myself. Every person understand what somewhat heritage running watches bring lurking behind <a href="http://www.watchesbuy.co.uk">replica watches uk</a>.
All the wrist watches contain the whole set of properties with the true counterparts [url=http://www.attrinity.com]http://www.attrinity.com[/url], and also yet another, one which might overshadow other parts: a reasonably priced rate. We all know how lovely devices usually are, all of us loves them all, appreciate his or her appearance as well as ones own the past.