Тег DIV, как блоки на DIV

A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Тег DIV Урок 5

Автор: MilovanovV
Категория: HTML сайты » html теги
2-09-2011, 23:24

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

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

Тег DIV – является блочным элементом, содержимое которого начинается с новой строки, а в конце блока всегда добавляется перенос строки. Синтаксис написания тега DIV:

<div>...</div>

Использование закрывающего тега </div> обязательно.

У тега DIV – всего два параметра. Первый параметр – align. С помощью параметра align, задается выравнивание содержимого тега DIV.

Вот значения, которые может принимать параметр align:

left – выравнивание текста по левому краю страницы,

center – выравнивание текста по центру страницы,

right – выравнивание по правому краю,

justify – выравнивание по всей ширине страницы.

Синтаксис записи – <div align="center | left | right | justify">...</div>

Второй параметр - title добавляет всплывающую текстовую подсказку к содержимому тега DIV.

Теперь давайте приведём примеры использования тега DIV.

Когда мы с вами создаём html код документа, то вставлять текст в документ просто так - неправильно.

Текст должен располагаться или в параграфе, (тег <p> … </p>) или в другом блочном элементе.

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

Обычное добавление текста в документ html и его выравнивание на странице, это самое простое применение тега DIV. Наиболее удобно управлять видом содержимого блока с помощью стилей.

Как вы знаете из третьего урока, есть три способа определения стилей. Стили могут быть определены:

1 - прямо в теге,

2 - в контейнере HEAD,

3 - во внешнем файле, содержащем таблицу стилей.

В наших примерах, давайте остановимся на последнем варианте и будем определять стили таблицей, расположенной во внешнем файле.

При этом, для выбора нужного стиля из таблицы, тег DIV, снабжают параметром class или id с именем селектора. Давайте посмотрим, как это работает, на примере следующего html кода.

Создадим html файл с именем div.html следующего содержания:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег DIV</title>
<link href="css/file.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="block1">Это первый текстовый блок. Данный блок
   имеет жёлтый фон и красную рамку. Толщина рамки 1 пиксел.</div>
<div class="block2">А это второй блок с белым Фоном.
   Этот блок имеет зелёную рамку. Толщина рамки 2 пикселя.</div>
</body>
</html>

Как видите, контейнер <head> </head> - содержит строку <link href="css/file.css" rel="stylesheet" type="text/css"/>, которая указывает на файл стилей file.css, который находится в каталоге CSS.

Файл стилей file.css, для примера, содержит следующую таблицу стилей:

#block1 {

width: 200px;

background: Yellow;

padding: 5px;

padding-right: 20px;

border: solid 1px Red;

float: left;

   }

   .block2 {

width: 200px;

background: White;

padding: 5px;

border: solid 2px green;

float: left;

position: relative;

top: 40px;

left: -70px;

}

Если открыть файл div.html браузером, тогда мы получим следующее:

Тег DIV, как блочный элемент

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

Теперь, вооружившись HTML и CSS справочниками, Вы легко разберетесь с любым html кодом, который содержит форматирование контента на основе таблиц стилей.

Со временем, Вы научитесь писать свой html код, в котором будете использовать таблицы стилей CSS.

Кстати, Вы можете бесплатно скачать качественные справочники CSS и html.

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

Об этом мы с Вами поговорим в следующий раз.

Автор: Милованов Виктор

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