статья "Верстка web-страницы"

дата публикации статьи:

Вёрстка – процесс создания html-шаблона web-страницы на основе дизайн-макета.

Валидная верстка

Валидная верстка представляет собой соответствие кода и структуры сайта общемировым стандартам и спецификации выбранного языка, разрабатываемых и внедряемых Всемирным Интернет Консорциумом (World Wide Web Consortium, W3C).

Организация W3C предлагает онлайн сервис для проверки верстки сайта (html и css кода) на соответствие утверждённым стандартам. Существует три способа осуществления проверки:

  1. указать ссылку на проверяемый сайт (проверка кода этой страницы);
  2. загрузить файл, который содержит код свёрстанной страницы сайта;
  3. непосредственно ввести исходный код страницы в соответствующую область для ввода.

Кроссбраузерная верстка

Кроссбраузерная верстка - формирование кода html-шаблона web-страницы таки образом, чтобы эта страница идентично отображалась в браузерах, заявленых в техническом задании (список браузеров уточняется заказчиком). Под идентичностью понимается отсутствие "развалов" верстки и способность отображать материал с одинаковой степенью читабельности. Понятие "кроссбраузерность" часто путают с попиксельным соответствием верстки с дизайн-макетом.

Бурное развитие Интернет-технологий привело к значительному усложнению макетов Интернет-проектов, поэтому зачастую веб-сайт не одинаково отображается в разных браузерах, а иногда и в разных версиях одного и того же браузера. Т.к. каждый разработчик браузера имеет свои реализации стандартов на отображение кода сайта, обычно выделяется определенное количество браузеров, которые придерживаются определенных стандартов, например, с заявленной поддержкой HTML-CSS (иногда JavaScript) определенных версий. Формирование кроссбраузерного кода предполагает использование специальных приемов, т.н. "хаков", индивидуально под каждую версию браузера.

Семантическая верстка

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

Специально для обогощения семантического содержимого web-документа в стандарт языка HTML5 введены синтаксические новшества, т.е. добалены новые элементы, такие как <section>, <article>, <header>, <footer>, <time> и <nav>.