Логотип imagecms

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

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

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

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

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

Скачать ImageCMS для своего сайта

Итак, 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/

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

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

Читайте также:
10 Июля 2012 158369 4
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
Обсуждение этого поста (Комментарии: 4)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

  • Виктория 18 Март 2014

    Спасибо за урок, думаю, многим пригодится)

    Сохранить
  • Ярик Акулов 30 Июнь 2015

    Отличная статья! Больше спасибо за труд и ценную информацию. Буду изучать! :)

    Сохранить
  • hutenmy cawodson 09 Июль 2015

    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>.

    Сохранить
    • hutenmy cawodson 09 Июль 2015

      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.

      Сохранить
Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или