Главная / Блог / Уроки ImageCMS / Как быстро и эффективно научиться верстке веб-страниц?

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

10 июля 12
Reading Time: 4 minutes
4 комментария
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes)

Обучение созданию веб-проектов необходимо начинать с основ языка гипертекстовой разметки (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/

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

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

Comments (4)
  • hutenmy cawodson:

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

    1. hutenmy cawodson:

      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.

  • Ярик Акулов:

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

  • Виктория:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Хочу выразить большую благодарность коллективу компании "ImageCMS" а именно Ивану и Марии! Во время выбора компании проводил переговоры с 7 различными организациями, Иван единственный кто смог адекватно объяснить и подсказать всю необходимую информацию для принятия решения. В итоге результат более чем на 100% соответствует ожиданиям, а во много их даже превосходит!
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!