Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Основы блочной верстки (DIV верстки) — Часть 1 — Как работают сайты, повышение безопасности сайта, структура HTML кода, создание простого макета в 2 колонки на дивах

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Это очередная статья из рубрики Верстка — изучение и применение на практике HTML, CSS, PHP, MySql, речь в которой пойдет, как вы уже, наверное, догадались из названия, о так называемой блочной верстке или же верстке на дивах (DIV верстка).

На данный момент существуют два основных способа верстания сайта — блочная DIV верстка и табличная. Чуть ранее, в статье, , посвященной созданию таблиц в HTML, я писал о некоторых недостатках присущих табличной верстке (Табличная верстка — простая, но не перспективная), поэтому сейчас не буду останавливаться на этом вопросе.

Что нам потребуется для создания простого макета сайта с использованием блочной верстки (DIV верстки)

Примем как должное, что использование блочной DIV верстки в большинстве случаев будет предпочтительнее, чем использование верстки табличной. В то же время, верстка на дивах является немного более сложной в освоении и понимании, нежели верстка табличная, но оно того стоит.

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

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

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

Сегодня мы попробуем на конкретных примерах разобраться в нюансах создания простейших д макетов (шаблонов) в 2 и 3 колонки для сайтов. Все свойства CSS, которые при этом будут использоваться, я постараюсь подробно разъяснить и объяснить необходимость их использования. А уже в последующих статьях курса по CSS мы рассмотрим все свойства каскадных таблиц стилей во всех подробностях и вариациях.

Для того, чтобы нам создать простой макет сайта, основанный на блочной DIV верстке, достаточно будет двух файлов, в одном из которых мы пропишем HTML код нашего макета (пусть это будет файл index.html), а в другом — разместим стилевое оформление CSS макета (назовем этот файл style.css). Почему мы назвали первый из файлов index.html, а не как-то по другому?

Как браузер работает с файлами сайта, почему особое значение придается файлам index.html и index.php, как обеспечить безопасность сайта

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

Для каждого расположенного на сервере сайта отводится своя папка, которая прочно связывается с доменным именем сайта при помощи DNS серверов (подробнее про хостинг, домены и DNS читайте в этой серии статей — Доменное имя и хостинг для вашего будущего сайта). Так вот, браузер будет искать по указанному в адресной строке пути (корневой папка вашего сайта, в адресной строке будет соответствовать доменному имени вашего ресурса) именно файл под названием index.html или index.php.

Наверное, в теории не совсем понятно, поэтому поясню на примере. Когда вы набираете в адресной строке своего браузера, допустим:

http://ktonanovenkogo.ru

то браузер осуществляет поиск в корневой папке моего блога (физически файлы блога находятся на сервере хостинга, в папке public_html, которая ассоциирована с доменным именем моего блога ktonanovenkogo.ru). Что же ищет браузер в корневой папке моего блога? А ищет он файл index.html или index.php, и найдя соответствующий файл, открывает его:

• в случае index.html, браузер сразу же преобразует HTML код этого файл в видимую нам страничку блога
• в случае index.php, на сервере хостинга начнет выполняться в реальном времени код PHP, который прописан в этом файле. Скорость выполнения PHP кода зависит от скорости и загруженности сервера вашего хостинга, а так же от количества выделенных лично для вашего сайта ресурсов сервера. В результате выполнения этого PHP кода, на выходе будет сформирована страничка в формате HTML, которую браузер уже преобразует в видимую вам страничку блога. Немного подробнее о логике работы сайтов на основе CMS, использующих PHP код, вы можете почитать здесь.

Повышаем безопасность своего сайта — запрещаем просмотр содержимого директорий через браузер (.htaccess)

А что произойдет, если по указанному в адресной строке пути браузер не найдет ни файла index.html, ни файла index.php? Тут все зависит от настроек сервера вашего хостинга. Если настроено все правильно, то при отсутствии, по заданному в адресной строке браузера пути, файлов index.html или index.php, браузер отобразит станицу ошибки 404. Если у вашего хостинга сервер настроен не правильно, то при отсутствии index.html или index.php по указанному пути, в окне браузера вы можете увидеть содержимое директории (папки) данного сайта.

Естественно, что ничего поменять в этих директориях вы из браузера не сможете, но взломщику может быть достаточно просто знания содержимого директорий вашего сайта, для дальнейшего успешного взлома. Давайте проверим. Зайдите по этому адресу моего сайта: http://ktonanovenkogo.ru/image/.

У вас откроется мой вариант страницы ошибок 404 (подробнее о том, как создать правильную страницу ошибок для Joomla и WordPress читайте в этих статьях — Настройка страницы ошибок 404 для сайта на Joomla с помощью компонента ARTIO JoomSEF и Как создать и зачем нужна страница ошибок 404 для блога на WordPress). В этой папке у меня хранятся изображения, которые я использую на страницах блога (например, это — http://ktonanovenkogo.ru/image/goo.png).

Защищаем директории своего сайта от просмотра их содержимого через браузер с помощью добавления пустого файла index.html

В принципе, вы можете сами запретить просмотр (листинг) директорий, в которых нет файлов index.html или index.php, если это не сделал за вас хостер. Сделать это можно несколькими способами. Один из них — это добавить во все папки не содержащие файлов index, пустой файл index.html.

Для этого вам нужно будет в текстовом редакторе сохранить пустую страницу, дав ей название index.html, а затем подключившись к вашему сайту по FTP скопировать этот пустой файл index.html во все папки, по умолчанию не файлов index.

Теперь, если кто-то наберет в адресной строке путь до такой папки вашего сайта, то он увидит пустую белую страницу и все. Хотя, конечно же, вместо пустого файла index.html, можно создать осмысленный файл index.html, помогающий пользователю сориентироваться на вашем сайте (вроде правильной страницы ошибки 404).

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

Запрещаем просмотр директорий своего сайта (листинг) через браузер с помощью настройки файла .htaccess

Есть такой файл, предназначенный для дополнительной конфигурации сервера Apache (большинство хостингов работают под управлением Apache), который названием .htaccess. Да, да, именно так, с точкой перед названием и без расширения. Специфика линукса, однако. Так вот, этот файл скорей всего уже есть у вас в корневой папке сайта.

Вам нужно будет подключиться к вашему сайту по FTP и открыть корневую папку вашего сайта (обычно это либо папка public_html, либо папка htdocs). Нашли файл .htaccess? Если нет, то попробуйте выбрать из верхнего меню FileZilla пункт «Сервер»-"Принудительно отображать скрытые папки".

По-прежнему не видите файла .htaccess? Ничего страшного, вы можете сами создать этот файл. Для этого вам нужно будет в текстовом редакторе сохранить пустую страницу, дав ей название .htaccess, а затем подключившись к вашему сайту по FTP, скопировать этот пустой файл .htaccess в корневую папку вашего ресурса. Все, теперь у вас есть файл .htaccess, поздравляю. Правда, он будет пустой, но это поправимо.

Для запрещения просмотра через браузер содержимого директорий, в которых нет файлов index.html или index.php, вам нужно будет прописать (или дописать, если ваш файл .htaccess не пустой) всего лишь одну сточку:

Options -Indexes

Все, теперь просмотр содержимого директорий вашего сайта через браузер будет запрещен. Собственно, этого мы и добивались.

Создаем простейший макет сайта в 2 колонки на основе блочной верстки (DIV верстки)

Вернемся к нашему макету сайта на основе блочной Div верстки, который в самом простом варианте будет состоять всего из двух файлов —index.html и style.css. Эти файлы вы можете положить, например, в любую созданную специально для этого папку на севере вашего хостинга. Допустим, что вы создадите в корневой папке вашего хостинга папку TEST, в которую положите файлы нашего макета в 2 колонки index.html и style.css.

Тогда, при обращению через браузер к папке TEST (в случае моего сайта для этого нужно будет набрать в адресной строке браузера http://ktonanovenkogo.ru/test), запустится файл index.html. Но браузер так же осуществит подгрузку файла style.css, т.к. мы пропишем в файле index.html путь до файла стилевого оформления style.css. Ну, а теперь давайте рассмотрим все это подробно на конкретных примерах.

Сначала давайте попробуем создать простой макет в 2 колонки на Div верстке, который будет содержать верхнюю часть (шапку или же header), нижнюю часть (подвал или же footer), а так же те самые две колонки, из-за которых такой макет и называется 2 колоночным — это область для основного содержимого страницы (content) и область левой колонки макета на Div-ах (left), в которой обычно располагаются элементы, облегчающие навигацию по сайту (меню и тому подобные вещи), реклама и многое другое.

В схематичном виде 2 колоночный макет на основе Div верстки будет выглядеть так:

Каждый из элементов 2 колоночного макета мы поместим в свой контейнер DIV, присвоим ему уникальный ID, для которого в файле CSS добавим ряд свойств, описывающих внешний вид и положение данного контейнера на странице. Кроме этого, все контейнеры с элементами 2 колоночного макета мы поместим в один общий DIV контейнер, который позволит нам регулировать положение всего макета на странице (задать ширину макета, выравнивать макет относительно края страницы и т.д.)

Базовые элементы структуры любого HTML кода

Для начала вам нужно будет создать и сохранить в текстовом редакторе Notepad++ или же в специализированном веб-редакторе (Dreamweaver) два пустых файла index.html и style.css. Начнем, естественно, с написания HTML кода в файле index.html. Вы уже, наверное, знаете, что в любом HTML файле присутствуют исходные обязательные элементы, которые выглядят примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Базовые элементы структуры любого HTML кода</title>
</head>
<body>
 </body>
</html>

Как не печально, но на страницах данного блога я еще не успел рассказать об основах построения HTML документов, поэтому придется отвлечься и вкратце пробежаться по элементам этого обязательного кода в файлах HTML:

• строка !DOCTYPE служит для указания типа данного документа HTML (бюрократия в действии). Эти строки будут разными для разных версий HTML. Сейчас используется в основном версия HTML 4.01, но и для этой версии возможно несколько вариантов строки !DOCTYPE:
  • Строгий HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    При выборе этого варианта вам придется строго следить за соответствием вашего HTML кода спецификациям, в противном случае, вы увидите на странице браузера не совсем то, что планировали
  • Переходный HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Это вариант строки !DOCTYPE является более демократичным и лояльным к ошибкам вебмастера, он попытается понять, что вы хотели сделать и не будет учитывать огрехи в коде HTML, поэтому переходный вариант HTML 4.01 использовать предпочтительней
• Открывающий тег HTML (<html>) ставится всегда в начале HTML документа, сразу после строки !DOCTYPE. Закрывающий тег HTML (</html>)ставится в самом конце HTML файла. Он как бы заключает в себя весь HTML код файла.
• Весь HTML код документа внутри открывающего и закрывающего тегов HTML (<html> и </html>) разбивается еще на две группы, заключенные в открывающие и закрывающие теги HEAD и BODY:
  • Сразу после открывающего тега HTML ставится открывающий тег HEAD (<head>), затем может идти текст или же специальные теги, с помощью которых формируется, так называемый, заголовок HTML документа. В конце обязательно ставится закрывающий тег HEAD (</head>). Что примечательно, содержимое тега HEAD не отображается непосредственно на странице в браузере.
    • строка

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      , заключенная между открывающим и закрывающим тегом HEAD, позволяет подсказать браузеру, в какой именно кодировке русского языка сохранен этот HTML файл. В нашем случае указана кодировка UTF-8, но так же довольно распространенной является еще и кодировка Windows-1251. Вообще, с помощью тегов META (мета тегов) в заголовке HTML документа (между открывающим (<head>) и закрывающим (</head>) тегами HEAD) кроме кодировки русского языка обычно еще добавляют ключевые слова документа (keywords), например:

      <meta name="keywords" content="блочная верстка, div верстка">

      или описание документа (description), например:

      <meta name="description" content="Основы блочной верстки (DIV верстки) -  Как работают сайты, повышение безопасности нашего сайта, структура HTML кода, создание простого двух-колоночного макета на дивах">

      и многое другое.
    • строка

      <title>Базовые элементы структуры любого HTML кода</title>

      определяет заголовок страницы (TITLE) , создаваемой с помощью этого HTML документа. Вы можете видеть содержимое тега TITLE в самом верху окна вашего браузера.
      
      Содержимое этого тега TITLE имеет очень большое значение для поисковых систем. Это самый весомый критерий в распределении страниц различных сайтов в поисковой выдаче (подробнее читайте об этом в статье — Внутренняя оптимизация сайта. Обращайте на содержимое тега TITLE особое внимание. О том, как настроить правильное формирование тега TITLE для сайтов на Joomla и WordPress вы можете почитать здесь —
      • Оптимальная настройка вида мета-тега Title для сайта на Joomla
      • Настройка TITLE (заголовка) для всех страниц вашего сайта на Joomla с помощью плагина ARTIO JoomSEF
      • Настройка внешнего вида заголовков всех страниц (мета-тег TITLE) в плагине All in One SEO Pack для блога на WordPress
  • Сразу после закрывающего тега HEAD (т.е. сразу после заголовка HTML документа) следует открывающий тег BODY (<body>). Внутри этого тега BODY должна располагаться вся содержательная часть HTML документа, которая будет в явной форме отображаться на веб страницах в браузере. Здесь допускается использование любых возможных HTML тегов, которые будут интерпретироваться браузером в видимые элементы веб страницы. В самом конце HTML документа, но перед закрывающим тегом HTML (</html>), должен будет обязательно стоять закрывающий тег BODY (</body>).

Думаю, что общую структуру HTML документа хорошо визуализирует следующий рисунок:

Ну, вот пришлось очень существенно отвлекаться на объяснения важных моментов, встреченных в ходе начала рассказа о блочной верстке (DIV верстки), да так, что в этой статье места на рассказ о создании 2 колоночного макета на дивах (DIV) уже и не осталось места. Но, думаю, что ничего страшного не произойдет, если мы продолжим в следующей статье, посвященной блочной верстке.

Постараюсь не затягивать с выходом этой статьи и если вас заинтересовала данная тема, то советую вам подписаться на новостную ленту моего блога через RSS или же посредством E-mail. В этом случае, вы не пропустите вторую статью по теме основ блочной верстки на дивах.

Можете также посмотреть видео «div верстка, блочная верстка, HTML и CSS»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Блочная верстка (DIV верстка) — Часть 2 — Верстка макета сайта в 2 колонки на дивах, создаем DIV-контейнеры макета в HTML, определяем их размеры и позиционирование в CSS
• Блочная верстка (DIV верстка) — Часть 4 — Как прижать футер (footer, подвал) к низу экрана в макете сайта на основе блочной верстки
• Блочная верстка (DIV верстка) — Часть 3 — Создаем на DIV блоках двухколоночный, трехколоночный и резиновый макеты для сайта
• Создание карты сайта на WordPress — Часть 2 — Установка и настройка плагинов Sitemap Generator и WP DS Blog Map для создание карты Вордпресс блога в формате HTML для посетителей
• Что такое язык Html, validator W3C и тэги, список Html тегов в W3C и структура документа (body, head)
• Сайты на Joomla — примеры популярных проектов на Joomla, как узнать и определить движок сайта
• Пробелы и спецсимволы (мнемоники) в Html коде, неразрывный пробел и другие специальные символы, форматирование Html и CSS кода