Главная » Сайтостроение » HTML » Учебник HTML для начинающих. Блочная верстка

Учебник HTML для начинающих. Блочная верстка

 

Урок 10. Веб-страница из трех колонок 

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

Шаблон — это заготовка, которая позволяет в последствии превратить себя в настоящую веб-страницу.

Наш шаблон будет состоять из шапки, трех колонок (левой, правой, центральной, с основным контентом), и подвала. Поскольку в кодирование на HTML используются латинские буквы, мы назовем наши элементы соответственно: header, leftside, rightside, content, footer.

Вот как будет выглядеть код:

 

</p>
<p><html></p>
<p><head><br /><title>Шаблон из трех колонок</title><br /></head></p>
<p><body></p>
<p><div><br /> <div>Шапка сайта</div><br /> <div>Левая колонка</div><br /> <div>Правая колонка</div><br /> <div>Контент</div><br /> <div>Подвал сайта</div><br /></div></p>
<p></body><br /></html></p>

 

 

А вот как это выглядит в браузере:

 

 

alt

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

Наверное, вы уже поняли, что блок мы задаем следующим образом:

 

<div>Содержимое блока</div>

 

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

 

<div><br />…<br /></div>

 

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

Посмотрите еще раз на структуру кода. Если вам она ясна, тогда можно переходить к следующему этапу.

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

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

*