Основы блочной верстки

>

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

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

Основы блочной верстки

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

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

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

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

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



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

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

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

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

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

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



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

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

то браузер осуществляет поиск в корневой папке моего блога (физически файлы блога находятся на сервере хостинга, в папке 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, вам нужно будет прописать всего лишь одну сточку:

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

Создаем простейший макет сайта в 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. строка

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

      Основы блочной верстки

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

      Основы блочной верстки

      и многое другое.

    2. строка

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

      Основы блочной верстки

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



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

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

Основы блочной верстки

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

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

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

Подборки по теме:

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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

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



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

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

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

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

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

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

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Check Also

Плагины Joomla

> Плагины Joomla — TinyMCE, Load Module, Legacy и другие установленные по умолчанию Здравствуйте, уважаемые ...

Перфекционист — кто это (значение слова

> Перфекционист — кто это (значение слова — человек, который подвержен перфекционизму) и насколько легко ...

Перенос сайта на новый хостинг Infobox, выбор между обычным и VPS, а также работа с панелью управления хостера, создание, продвижение и заработок на сайте

> Перенос сайта на новый хостинг Infobox, выбор между обычным и VPS, а также работа ...

Перелинковка страниц сайта на примере плагина upPrev (выезжающей панели) для Вордпресс, создание, продвижение и заработок на сайте

> Перелинковка страниц сайта на примере плагина upPrev (выезжающей панели) для Вордпресс Здравствуйте, уважаемые читатели ...

Пассивный заработок в Clobucks и шанс стать лауреатом конкурса, создание, продвижение и заработок на сайте

> Пассивный заработок в Clobucks и шанс стать лауреатом конкурса Здравствуйте, уважаемые читатели блога Я ...

Партнерские программы, партнерки и как на них зарабатывают, создание, продвижение и заработок на сайте

> Партнерские программы, партнерки и как на них зарабатывают Здравствуйте, уважаемые читатели блога Я довольно ...

Официальный сайт

> Официальный сайт — как найти оф сайт через поисковую системы Здравствуйте, уважаемые читатели блога ...

Открытие индивидуального предпринимателя для вывода денег из интернета (с WebMoney, РСЯ, Адсенса), упрощенка и расчетный счет, создание, продвижение и заработок на сайте

> Открытие индивидуального предпринимателя для вывода денег из интернета (с WebMoney, РСЯ, Адсенса), упрощенка и ...

Особенности эссейной ниши или как правильно зарабатывать на студентах США, создание, продвижение и заработок на сайте

> Особенности эссейной ниши или как правильно зарабатывать на студентах США Здравствуйте, уважаемые читатели блога ...

Особенности продвижения интернет-магазинов, создание, продвижение и заработок на сайте

> Особенности продвижения интернет-магазинов Здравствуйте, уважаемые читатели блога Почти все интернет проекты, которые создаются в ...

Организация контента в Joomla

> Организация контента в Joomla — удаление и создание статей в админке, а так же ...

Опять про Минусинск

> Опять про Минусинск — новые факты, домыслы и предположения о том, как жить оптимизатору ...

Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner и число запросов к БД, создание, продвижение и заработок на сайте

> Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner ...

Оптимизация сайта для его просмотра на мобильных устройствах или мой вариант адаптивного отзывчивого дизайна, создание, продвижение и заработок на сайте

> Оптимизация сайта для его просмотра на мобильных устройствах или мой вариант адаптивного отзывчивого дизайна ...

Оптимизация поведенческих факторов без их накрутки

> Оптимизация поведенческих факторов без их накрутки. Возможно? Да, если автоматизировать процесс посредством «прямых рук» ...

Оптимизация и сжатие CSS в Page Speed

> Оптимизация и сжатие CSS в Page Speed — как отключить внешние файлы стилей и ...

Онлайн-консультант раздражает посетителей или увеличивает продажи, создание, продвижение и заработок на сайте

> Онлайн-консультант раздражает посетителей или увеличивает продажи? Здравствуйте, уважаемые читатели блога Каждый, кто сейчас читает ...

Онлайн сервисы для вебмастеров

> Онлайн сервисы для вебмастеров — все, что нужно для написания статей, их поисковой оптимизации ...

Онлайн HTML редакторы

> Онлайн HTML редакторы — визуальные, IDE и редакторы для установки на сайт Здравствуйте, уважаемые ...

Один год

> KtoNaNovenkogo.ru один год — посещаемость, как увеличить поисковый трафик и анализ плотности ключевых слов ...

Обрезать или изменить размер фото в онлайн редакторе или Фотошопе

> Обрезать или изменить размер фото в онлайн редакторе или Фотошопе — это просто! Здравствуйте, ...

Обратные ссылки с сервисов E-mail рассылок и счетчиков посещаемости, создание, продвижение и заработок на сайте

> Обратные ссылки с сервисов E-mail рассылок и счетчиков посещаемости Здравствуйте, уважаемые читатели блога Сегодня ...

Обратные ссылки с профилей

> Обратные ссылки с профилей — это основной инструмент бесплатного продвижения сайтов в рунете Здравствуйте, ...

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

> Обратные ссылки с блогов созданных на бесплатных платформах Здравствуйте, уважаемые читатели блога Продолжаем тему ...