Если заглянуть в энциклопедию или справочник, то можно найти там такое определение:

в полиграфии и издательском деле - это процесс формирования страниц издания путём компоновки текстовых и графических элементов;

Верстка web-страниц - это то же самое с тем лишь отличием, что для представления внешнего вида страницы используется стандарт языка HTML.

Таким образом верстка Web-страниц или сайтов подразумевает создание внешнего вида этих страниц на языке HTML. Сверстанные страницы как правило не содержат функционал или содержат его минимум. Основная задача верстки - внешнее оформление и представление страницы.

Внутренние особенности работы - такие как обработка web-форм, обращение к базам данных, обработка и сохранение информации реализуются на других языках и к верстке не относятся.

В современных условиях, когда существует несколько стандартов языка HTML, обилие браузеров и платформ задачи верстки становятся достаточно объемны - это не только умение красиво и грамотно представить внешний вид страницы, но и обеспечить, чтобы эта страница корректно отображалась в большинстве известных браузеров.

Добиться того и другого бывает непросто, но возможно. Иногда помогает использование более простого кода, иногда спасает проба и смекалка. Но вот что примечательно - в лоб проблема не решается никогда. Как правило требуются очень изящные решения, на которые бывает натолкнуться непросто, именно поэтому я решил здесь не сыпать теорией, а приводить реальные примеры из практики.

Это будет полезно вдвойне - и мне и Вам. Мне - потому что я смогу поделиться с Вами своим опытом, а Вам - потому что Вы узнаете как решать конкретные задачи на реальных примерах.

Был сайт, для которого в шапке надо было разместить анимированный flash-ролик, а поверх него в правой части поместить форму поиска сверстанную на обычном html.

Код был написан такой, что содержал два дива, причём вложенные один в другой, т. е. что-то наподобие -

русскоязычные написания вам нужно в собственном коде переписать как англоязычные, т.е. ДИВ = div, а КЛАСС = class, ЗАКР ДИВ = </div>

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

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

Первое что приходит в голову - это объявление их обычным тегом DIV и размещение один за другим с заданными при помощи position, либо при помощи margin или padding отступов. Однако в результате в разных браузерах блоки начинают вести себя не совсем так, как нужно. Они встают не на свои места, а иногда даже на взаимоисключающие друг друга позиции. Я, например, сталкивался с ситуацией когда в ИЕ блоки вставали прямо противоположно тому, как они были отображены в Firefox.