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

30 Март, 2010

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

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

Что нам потребуется для создания простого макета сайта


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

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

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

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

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

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

Как браузер работает с файлами index

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

Для каждого расположенного на сервере ресурса отводится своя папка, которая прочно связывается с его доменным именем (тут про проверку доменов читайте, а тут про покупку их у регистратора ) при помощи DNS серверов.

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

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

http://ktonanovenkogo.ru

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

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

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

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

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

У вас откроется мой вариант страница 403 ошибки. В этой папке у меня хранятся изображения, которые я использую на страницах блога (например, это — http://ktonanovenkogo.ru/image/goo.png).

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

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

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

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

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

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

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

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

Options -Indexes

Все. Собственно, этого мы и добивались.

Создаем простейший макет сайта в 2 колонки


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

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

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

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

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

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

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


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

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

  1. строка !DOCTYPE служит для указания типа данного документа HTML (бюрократия в действии). Эти строки будут разными для разных версий HTML. Сейчас используется в основном версия языка гипертекстовой разметки 4.01, и для нее про правильное написание DOCTYPE читайте тут
  2. Открывающий тег (<html>) ставится всегда в начале документа, сразу после строки !DOCTYPE. Закрывающий тег (</html>) ставится в самом конце. Он как бы заключает в себя весь код.
  3. Весь код документа внутри открывающего и закрывающего тегов (<html> и </html>) разбивается еще на две группы, заключенные в открывающие и закрывающие тэги HEAD и BODY:
    1. Сразу после открывающего тега HTML ставится открывающий тег (<head>), затем может идти текст или же специальные элементы, с помощью которых формируется, так называемый, заголовок документа. В конце обязательно ставится закрывающий (</head>). Что примечательно, содержимое HEAD не отображается непосредственно на странице в браузере.
      1. строка
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

        или его описание (description), например:

        и многое другое.
      2. строка
        <title>Метатег тайтл</title>

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

        Содержимое TITLE имеет очень большое значение для поисковых систем. Это самый весомый критерий в распределении страниц различных сайтов в поисковой выдаче. Обращайте на его содержимое особое внимание. О том, как настроить правильное формирование тега TITLE читайте здесь
    2. Сразу после закрывающего HEAD следует открывающий (<body>). Внутри него должна располагаться вся содержательная часть документа, которая будет в явной форме отображаться на веб страницах в браузере. Здесь допускается использование любых возможных тегов, которые будут интерпретироваться браузером в видимые элементы веб страницы. В самом конце документа, но перед закрывающим тегом (</html>), должен будет обязательно стоять закрывающий (</body>).

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

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

Можете также посмотреть видео по теме:

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

Еще:

Рубрики :Блочная DIV верстка

Комментарии и отзывы

Videotutor

charset=utf-8

я бы сделал оговорку для новичков, а именно для тех, кто будет размещать сайт на Narod.ru — чарсет должен быть windows-1251

charset=windows-1251

А начало про div верстку очень хорошее. Спасибо.

Алексей

Честно говоря, статья не соответствует названию. Если уж речь идет о дивовой (DIV) верстке, то ожидал рассказ о ней, а не ответвления о html с подробным описанием.

Дмитрий

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

Ольга

Когда будет продолжение Div верстки?

Когда перейдёте к делу?

Истомилась вся в ожиданиях. 🙂

Петр

Спасибо!!! Крайне полезная статья по верстке на div.

Но хочу сказать, небольшой отпечаток:

«Как не печально, но на страницах данного БОГА»

Исправьте, в середине поста 🙂

Дмитрий

Петр: спасибо, поправил.

Ирина

Спасибо за Ваши статьи)

Такой вопрос:

где то встречала что нужно вставлять Options All –Indexes,а у Вас Options -Indexes,как правильно, в чем отличие? Спасибо!

Vladimir

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

Неверное утверждение что браузер ищет эти файлы. На самом деле сервер при обращении к нему по доменному имени смотрим настройки сайта и возвращает страницу, которая задана по умолчанию. Слово index не является единственным по умолчанию(есть еще Default). Так что в принципе можно задать любую страницу для возвращения по умолчанию.

Дмитрий

Vladimir: спасибо за замечание, учтем.

Евгений

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

Дмитрий

Евгений: вы, наверное не внимательно читали — это вступительная статья к серии, посвященной Div верстке.

Just-SEO.RU

Благодаря вашим статьям буду изучать блочную верстку. Сайты создаю уже довольно давно, но всегда использовал паблик шаблоны. Сейчас же понял, что без хорошего знание HTML в сайтостроении не обойтись. Хорошо, что раньше посчастливилось выучить основы , а то даже не знаю, что бы я сейчас делал 🙂

Вообщем, спасибо за ваши статьи.

Павел

Спасибо за статью.

Вопрос: Разве сейчас поисковые роботы обращают внимание на meta name = «keywords»? Например, я читал, что уже давно роботы на этот заголовок не смотрят.

Стас

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

Я считаю, что статья очень нужная для новичков. Особенно понятно и наглядно графическое объяснение структуры тегов . В своё время и долго не мог этого понять.

А то, что именно ЭТА статья не соответствует заявленной теме, нет ничего страшного, т.к. эти «элементарные» знания помогут новичкам понять более сложные понятия в будущем.

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

Ярослав

В целом статья хорошая... Но в некоторых пунктах допущены грубые ошибки.

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

1. «браузер будет искать по указанному в адресной строке пути» — браузер ничего не ищет, он посылает запрос серверу предоставить ему некоторую страницу, не более того. А вот поиск уже выполняет поиск и возвращает либо запрашиваемую страницу, либо сообщение об ошибке.

2. «http://ktonanovenkogo.ru» — должен содержать в конце слэш («http://ktonanovenkogo.ru/») браузер его доставляет сам, но это слэш обозначает корневой каталог сайта. Без этого слэша вы попадете неизвестно куда.

3. «именно файл под названием index.html или index.php» — это отчасти не верно, поскольку названия этих файлов, которые являются индексными для всех без исключения каталогов на сайте задаются в настройках сервера и могут быть любыми. Приведенные вами варианты — это лишь общепринятые названия.

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

Олег

Хорошая статья, автору спасибо))

mag

Отличная статья для новичка, и отклонения от главного, так же хорошо, статья для новичков, а «зубры» могут не отвлекаться. Очень полезная статья. Спасибо.

Сергей

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

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

Дмитрий

Олег, mag, Сергей: спасибо большое за ваши отзывы. Удачи вам и вашим проектам.

Amitycove

Идеальная статья для новичков

Александр

А мне не понравилось.

Николай

Хорошо написано, продолжай в том же духе +++++

Елена

Ваш сайт самый информативный, постоянно нахожу ответы на возникающие вопросы именно у Вас, спасибо большое за Ваш труд!

Валерий

Вы писали... [Options -Indexes]« Все, теперь просмотр содержимого директорий вашего сайта через браузер будет запрещен. Собственно, этого мы и добивались.» Не похоже, что Вы добивались именно этого. Только что ввел ...ktonanovenkogo.ru|wp-content|languages| И Как Вы думаете, что я там увидел? Сапожник без сапог? Или этот код «Options -Indexes» не работает???

Дмитрий

Валерий: во спасибо. Переехал на виртуальный сервер и не проверил настройки в .htaccess. Сейчас поправил благодаря Вам. Еще раз спасибо.

Елена, Amitycove, Николай: спасибо большое за отзывы.

Алена

поступила проще: заказала верстку статей в Студии дизайна и рекламы Uniartic, профессионалы в этом все-таки лучше разбираются!

Подписаться не комментируя