Урок 1

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

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

   Мы сможем наполнить веб-страницу информацией, но при этом получим код, в котором, порой, невозможно разобраться.

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

   Характерным моментом для блочной верстки является то, что блоки, как правило, должны располагаться по очереди - один за другим и четко разделяться между собой. Расположение в одной строке возможно, но оно используется только в некоторых случаях, когда возникает потребность добиться особого эффекта.

   В этом случае мы можем обойтись без громоздкой основы – все элементы страницы кучно расположены в одном месте, а количество кода, описывающего отдельно каждую ячейку, уменьшается в разы. Код обычной веб-страницы, которая версталась табличным способом, больше в 4-5 раз кода страницы, которая создавалась блочным методом. Кроме всего этого код блочного значительно проще в понимании, с ним можно разобраться за значительно меньшее время.

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

   В общем случае блок представляется следующей структурой:

   Он состоит из некоторых основных частей:

   Рамка или border. Для этой области возможно определить некоторые качества – цвет, вид, толщина.
   Поле (несколько) или padding — используется для размещения информации в блоке, чтобы он правильно располагался в контуре.
   Отступы или margin — это размер расстояния между отдельно идущими блоками. С помощью этого элемента можно размещать блоки на заданном расстоянии друг от друга.

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

   Основой конструкции языка является тег. Они делятся на теги, используемые для открытия и закрытия. Это элементарная частица, которая используется для построения страницы. Каждый тег имеет свое четкое назначение. Как вариант – тег <p>, используемый для обозначения абзаца, он в любом случае будет иметь следующий вид:

<p>Текстовое наполнение</p>

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

   Атрибут (параметр) в общем понимании подразумевается как понятие, характеризирующее тег. Рассмотрим его способности на примере тега для картинки:

<img src="images/kartinka.jpg" width="300px" height="100px" alt="Рисунок, где я с родителями">

   В этом примере тег имеет следующие атрибуты - src, width, height, alt. Численное представления указывается в кавычках – это тоже является важным моментом. Если рассмотреть элемент кода, то можно с легкостью определить, что обозначают атрибуты – изображение используется с каталога Images, его высота составляет 100 пикселей, а ширина – 300. Текст добавляется с целью информативности (он появляется при наведении курсора на изображение). Это делается для удобства пользователей, которые будут просматривать страницу. Если необходимости в информационном тексте нет, то атрибут остается пустым (alt="").

   Касательно тега <div>, то для его представления в основном используют две ветки. В качестве атрибута, придающего единственное значение, использованное только единожды на странице, используется id. Примером может служить footer или header. Этим способом можно задать потом в листе стилей для тега <div> с атрибутом id и значением header одни и те же настройки.

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