Блочная верстка сайта | Урок 1

Блочная верстка сайта

Этим постом я начинаю цикл статей, посвященный основам блочной верстки сайтов. Они будут полезны для изучающих основы HTML и CSS. В статьях просто и доступно рассказывается о блочной верстке сайта и не только. Если вы хотите быстро разобраться в основах верстки сайтов, то этот цикл статей будет вам в самый раз.

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

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

Блочная верстка сайта. Введение

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

Что такое блок в блочной верстке сайтов

Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как «обтекание» (float). Но об этом чуть позже.

Блочная верстка сайта. Тэги

Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца:

<p>Текст абзаца.</p>

всегда обозначается буквой «p» и никак иначе.

Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен «слэш» — косая черта, наклоненная вправо.

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

<img src="images/risunok.jpg" alt="" />

Тэг div

В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому («р» — к абзацам, «а» — к ссылкам, «img» — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют во время верстки сайта для задания функциональных областей на странице, таких как: «шапка» (header), блок навигации, блок основного содержимого, «футер» (footer) или подвал по-нашему.

У данного тэга, как и у любого другого, имеются свои собственные атрибуты.

Атрибут — описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения:

<img src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" />

В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов.

Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images, шириной 200 пикселей, высотой 50 пикселей. И до кучи альтернативный текст, который по-сути дублирует текстом на страничке рисунок.

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

Если же их нет смысла подписывать (например маркер списка или стрелка какая), то у атрибута alt оставляют пустое место между кавычками.

Атрибуты тэга div

Атрибутов у тега div есть всего два:

id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например «header» (про кавычки не забываем), или «footer«. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением «header» (шапка) одни настройки, а для подвала «footer» совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к «шапке» и будет набран крупным и красным шрифтом, а вот этот к «подвалу» и будет мелким и серым. И никакой путаницы!

class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.

На первый раз, думаю, достаточно. Если что-то непонятно по верстке сайтов, спрашивайте в комментариях.

Продолжение следует. Оставайтесь на связи!

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

16.12.2007

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 4,56 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

6 комментариев

  1. Марина

    12.12.2016

    Спасибо большое за Ваши статьи! Наконец-то мне стало хоть что-то понятно в верстке сайтов. В книгах обычно так сложно все написано, а у Вас так легко. Спасибо!

  2. Игорь Квентор
    http://www.websovet.com/
    12.12.2016

    Марина, пожалуйста! Рад, что смог вам чем-то помочь :) Возникнут вопросы – обращайтесь.

  3. Тимоха

    02.02.2017

    Спасибо за уроки! Хочу изучить верстку сайтов и этим зарабатывать в будущем.

  4. Игорь Квентор

    03.02.2017

    Пожалуйста, Тимоха! Отличное намерение. Верстальщики сайтов весьма неплохо сейчас зарабатывают.

  5. Юлия

    15.03.2017

    А где изображения для верстки сайта, которых должно быть 7 штук?

  6. Игорь Квентор

    15.03.2017

    Юлия, в каком смысле где? Вы спрашиваете, куда их поместить или где их можно скачать?

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