Основы HTML верстки

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

Сверстать сайт это еще полдела. А вот разместить на его темном фоне различного рода изображения это уже другое дело. В следующем посте (подпишитесь, чтобы его не пропустить) я расскажу вам, как можно разместить картинки и иконки сайта на темном фоне. В одной из своих статей я писал уже о том, как вставить изображение в html. Можете сначала прочитать эту статью. Итак, начинаем.

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

От размещения элементов на web-странице зависит многое. Если сайт будет сверстан как попало, с плохой цветовой гаммой, с неправильно подобранными изображениями, то на таком сайте долго ни кто задерживаться не будет.

Итак, что же собой представляет HTML верстка? Верстка это, прежде всего деление страницы сайта на логические блоки: верхняя часть, центральная часть, боковые части, нижняя часть.

Эти части в среде WEB принято называть следующим образом:

  • верхняя часть – «header»
  • центральная часть – «content»
  • боковые части – «sidebar»
  • нижняя часть – «footer»

Причем, каждая из логических частей также может быть разбита на более мелкие составляющие части. Рассмотрим простой пример верстки с помощью слоев «DIV». Для примера, я возьму свой сайт, и наглядно представлю основные логические блоки сайта.

 

В моем шаблоне всего 3 основных логических блока: «header», «content», «footer». Каждый из блоков поделен на менее значимые логические блоки. Например блок «header» содержит в себе такие логические блоки, как заголовок, описание блога, баннер, меню. Зеленым цветом я подсветил логические блоки шапки сайта «header».

 

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

 

Итого получилось всего три внутренних блока. Эти блоки тоже содержат вложенные в них блоки, но о них пока говорить не будем.

С подвалом сайта «footer» дела обстоят очень просто. Сейчас там всего два вложенных блока. По решению верстки их, должно быть, пять: один в верхней части блока «footer», который в свою очередь будет содержать еще три вложенных блока (отмечены фиолетовым) и один в самой нижней части.

 

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

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

Итак, сейчас для примера приведу два разных кода: один табличный другой написанный с помощью слоев.

Результат работы этого кода будет следующим:

Уроки html верстки. Верстка с помощью таблиц

Такую же верстку можно сделать с помощью слоев. В результате код будет значительно меньше.

Результат работы этого кода следующий:

Уроки html верстки. Верстка с помощью div, слоев, контейнеров, блочная верстка

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

Поэтому тестируйте вашу верстку в различных браузерах, например Google Chrome, Safari, IE, Opera и т.д., чтобы выявить недостатки верстки, т.е. проблемы кроссбраузерности.

Теперь вам осталось решить каким способом вы будите верстать ваши странички. На двух наглядных примерах, я продемонстрировал отображение трех геометрических фигур, созданных с помощью html и css. Применил два способа верстки html: табличный и блочный.

После того, как шаблон будет сверстан (я предполагаю, что вы верстаете на локальном сервере) его нужно показать другим людям, чтобы получить адекватную оценку своему творению. Об этом я писал в статье «Как разместить сайт в Интернете?». На этом у меня все. Увидимся в следующей статье!

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 366 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 2 комментария к этой статье:
  • Сергей, 05.02.2015 в 08:40

    Освоил основы блочной верстки. Могу сверстать несложный Psd-макет. Искал работу на биржах фриланса, но там на несложные задачи большая конкуренция. Опытные веб-мастера советуют нарабатывать портфолио, но это время. Что посоветуете?

  • Евгений Несмелов, 10.10.2015 в 13:45

    Хорошо написано

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

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter