про бізнес-фінанси

Основные правила верстки веб-сайтов

В свое время базовым элементом верстки сайта были таблицы. Однако метод этот давно канул в Лету, и сегодня применяется блочная верстка с использованием стилей, так называемая div + css. ProstoWeb рассказывает пример эффективной и правильной верстки для начинающих на основе этого подхода.

Путеводитель по статье

  1. HTML + CSS
  2. О тегах, классах, стилях и пр
  3. Проверка связи и обход препятствий
  4. Коротко об оптимизации
Видео путеводитель
Основные правила верстки веб-сайтов

Основные правила верстки веб-сайтов

Div – это блочный тег в языке разметки HTML, при помощи которого пишется код сайта, а CSS (аббревиатура от «Cascading Style Sheets» – каскадные таблицы стилей) – формальный язык описания внешнего вида документов, в том числе веб-сайтов, написанных на HTML, XHTML, XML.

HTML + CSS

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

Приступая к созданию сайта, прежде всего, необходимо владеть инструментами его разработки, то есть, собственно, языками HTML и CSS. World Wide Web Consortium (W3C), международное объединение программистов и прочих связанных со всемирной паутиной экспертов, разработало и развивает стандарты работы в сети, в том числе с веб-страницами. Совсем не лишним будет подробно изучить описанные консорциумом элементы и атрибуты HTML, дабы профессионально использовать их. На том же ресурсе представлены и подробные спецификации для языка CSS.

Основные правила верстки веб-сайтов image:1

О тегах, классах, стилях и пр

Опытные разработчики сайтов советуют делать код максимально простым, что, в общем, не ново, и не только в программировании. Есть и целый ряд секретов и секретиков, которые помогут избежать распространенных ошибок верстки. Так, очевидно, что все стили оформления сайта должны быть вынесены в CSS-файл, в HTML-коде допускается только присутствие классов и идентификаторов. Обратите внимание на названия тех и других – необходимо, чтобы по смыслу они соответствовали применению и были максимально понятны, ведь с вашим кодом будут работать и другие люди. Примеры таких наименований: header, menu, footer, news. Кроме того, каждый такой элемент кода следует сопроводить комментарием. Для всех тегов значение их атрибутов следует брать в кавычки (например,).

Есть также несколько своеобразных «правил правописания», которые стоит учесть. Так, логотип сайта должен быть ссылкой на главную страницу веб-ресурса и иметь атрибут alt=«на главную | название компании». Атрибут alt=«название картинки» приписывается всем без исключения тегам img. Сами alt-ы важно унифицировать – один язык написания, только заглавная или только строчная буква в начале слова. Требование единства написания действует и для надписей на кнопках, и собственно оформления кнопок (или таблицы стилей, или графические элементы, но не то и другое вместе).

Отдельные правила касаются всевозможных заголовков. Так, атрибут Title необходимо представлять следующим образом: Название подраздела | Название раздела | Название компании. Для заголовков используются теги h1 (заголовок первого уровня), h2 (второго) и т.д. Особые теги применяются и для создания списков.

Не стоит выдумывать велосипед и в вопросах символов. Так, знаки copyright и registered — это не буквы «с» и «r» в скобках, а коды © и ® соответственно. А для создания неразрывного пробела, например, в сокращениях, нужно применить   (и т. д = и т. д.).

Прописывая файл CSS, также учтите ряд моментов. Для описания всех величин необходимо выбирать одну и ту же единицу измерения – pt или px. Для оптимизации структуры файлы используйте сокращенные формы записи.

Основные правила верстки веб-сайтов image:2

Во избежание повторения в HTML-коде атрибута class (если вам нужно присвоить целому ряду элементов один и тот же стиль), достаточно задать в CSS-правиле для конкретного элемента свой стиль, и он автоматически будет унаследован всеми этими элементами. Кстати, принцип наследования может применяться самым широким образом именно для оптимизации кода.

Выше перечислены лишь немногие нюансы, на которые стоит обратить внимание при верстке сайте. В целом же в сети есть масса ресурсов, где описаны как некоторые концептуальные подходы к логике верстки, так и секреты написания кодов под самые частные задачи – создание особенных кнопок, адаптивного меню и проч.выделение текста, использование табуляции и т.д.прописывание динамических эффектов и под. Более того, есть даже пошаговые руководства по написанию кода сайта «с нуля».

Основные правила верстки веб-сайтов image:3

Проверка связи и обход препятствий

Кроме подсказок, что нужно делать, опытные программисты имеют и списки «запрещенных приемов». Не стоит изменять размер окна браузера посетителей вашего сайта и механизм работы кнопки «Назад». Не используйте абракадабр в URL’ах. Не прибегайте к скриптам и Flash в разработке навигации по сайту. Не применяйте для написания сайта визуальных редакторов типа FrontPage – на выходе получите неудобоваримый код. Не пишите ссылки при помощи JavaScript – их могут не увидеть поисковики, да и часть посетителей. Не создавайте разных версий сайта для пользователей с разными браузерами или скоростью подключения к сети.

Кстати о браузерах. Общеизвестно, что Internet Explorer, Mozilla Firefox, Opera и др. могут по-разному отображать один и тот же HTML-код (или вообще не отображать). Поэтому кросс-браузерность, то есть читабельность сайта для любого пользователя независимо от установленного у него ПО, – одно из главных требований эффективной верстки. Можно перед запуском «прогнать» сайт через все браузеры, дабы убедиться в его «видимости». А можно прибегнуть к специальному инструменту browsershots.org, позволяющему протестировать сайт без установки всех браузеров на вашем компьютере.

Основные правила верстки веб-сайтов image:4

Для адаптации верстки сайта к особенностям тех или иных браузеров применяется метод, который программисты называют «CSS хаки». Он позволяет сделать так, чтобы те или иные CSS воспринимались только определенным браузером. В открытом доступе есть достаточно много списков хаков для обеспечения кросс-браузерности. Впрочем, эту информацию стоит почаще обновлять в силу быстротечности технического прогресса.

Однако начинать тестирование вашего веб-ресурса нужно даже не с кросс-браузерности, а с валидации HTML и CSS кодов. Для этого все тем же консорциумом W3C разработан специальный валидатор, указывающий на ошибки в HTML и CSS файлах и даже группирующий их по типам. Для сайтов, написанных не на самых распространенных языках разметки, а, например, MobileOK content, W3C предлагает отдельные инструменты проверки.

Основные правила верстки веб-сайтов image:5

Коротко об оптимизации

Валидный и эффективный код сайта является также инструментом его поисковой оптимизации. Если основной источник трафика на вашу площадку – Google или Яндекс, стоит задуматься об оптимизации кода, чтобы он полностью и быстро прочитывался роботами поисковиков (хотя скептики обязательно скажут вам, что и так прочитают).

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

Текстовая релевантность – это вопрос не только текстовой оптимизации. Недостаточно просто упоминать ключевые слова как можно чаще на странице. Лучше, если они размещены в блоках в начале кода, в разных тегах. Положительно повлияют не текстовую релевантность и уже упомянутые теги h1 – h6 для заголовков, alt для изображений.

Какой бы подход вы ни выбрали в верстке вашего сайта, помните, что вам, другим веб-мастерам и поисковикам с вашим кодом еще работать и работать, а главное – что пользователь хочет получить доступный и удобный сайт.

Читайте также:

Все статьи раздела

Срочно нужны деньги?