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

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

Тег 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" "http://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 документа, осуществляется с помощью каскадных таблиц стилей.

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

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

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации