ЯЗЫК HTML (продолжение)

Троицкий Д.И. Интернет-технологии
Таблицы, фреймы, блоки, слои
Для управления взаимным расположением элементов Web-страницы применяются таблицы, фреймы, блоки и слои.
С помощью таблиц просто располагать текст и картинки в нужных нам местах.
Вот как будет выглядеть этот код на экране:
Таблицы
Пример таблицы:
1
2
3
4
5
6
Таблицы могут быть вложенными. Таблицы с невидимыми границами широко используются для красивого размещения текста и графики.

Троицкий Д.И. Интернет-технологии
Фреймы
Структура фреймовых HTML документов существенно отличается от обычных.
Структура фреймового HTML документа:
ЗАГОЛОВОК ДОКУМЕНТА
описание набора фреймов
Фреймы представляют собой независимые области окна браузера. Фактически экран делится на несколько окон, в каждое из которых можно выводить информацию.

Троицкий Д.И. Интернет-технологии
Тег ... имеет следующие атрибуты:
ROWS - описание строк фреймовой структуры (проценты высоты окна браузера, пропорции, высота в пикселах);
COLS - описание столбцов фреймовой структуры (проценты ширины окна браузера, пропорции, ширина в пикселах);
BORDER - ширина границы фрейма (по умолчанию значение 5);
BORDERCOLOR - цвет сетки фреймовой структуры.
Например:
FRAMEBORDER - описывает границу фрейма (по умолчанию значение YES- граница есть, NO-без границы);

Троицкий Д.И. Интернет-технологии
SRC – ссылка на загружаемый в фрейм HTML-файл;
Каждый отдельный элемент фреймовой структуры (отдельное подокно браузера) описывается при помощи тега , имеющего следующие атрибуты:
NAME - имя фрейма (имя подокна браузера), для доступа к фрейму и обновления его содержимого;
MARGINHEIGHT - ширина верхнего и нижнего свободного поля фрейма в пикселях;
MARGINWIDTH - ширина левого и правого свободного поля фрейма в пикселях;
SCROLLING - полосы прокрутки содержимого фрейма (AUTO/YES/NO, по умолчанию значение - AUTO);
NORESIZE - наличием данного атрибута, пользователю запрещается изменять размеры фрейма при просмотре документа (по умолчанию это возможно при помощи мыши);
FRAMEBORDER - описывает границу фрейма (YES/NO);
BORDERCOLOR – задает цвет границы фрейма.

Троицкий Д.И. Интернет-технологии
Пример: frameborder="0">
Вышеприведенная фреймовая структура делит экран на три горизонтальные части. Верхняя часть занимает 15% высоты окна браузера и ее содержимым является документ header.htm. Область окна браузера (70% высоты), отведенная под средний фрейм, содержит вложенную структуру фреймов, разделяющих родительский фрейм на два равных столбца, в них выводятся документы left.htm и right.htm. Оставшуюся нижнюю часть окна браузера занимает фрейм, в который выводится документ footer.htm.
Возможно использование вложенных фреймовых структур.

Троицкий Д.И. Интернет-технологии
Блоки
Тег
...
имеет ряд параметров:
align - задаёт выравнивание содержимого тега
. Варианты: сenter | left | right | justify.
title - добавляет всплывающую подсказку (hint) к содержимому, например title="Новости".
unselectable="on"|"off" - запрещает или разрешает выделять текст в данном блоке. Значение "on" запрещает выделение текста (например, если вы не хотите, чтобы его копировали с вашей страницы).
Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id.
Блоки создаются при помощи тега
...
. Элемент
является блочным элементом и предназначен для выделения фрагмента документа.

Троицкий Д.И. Интернет-технологии
Самое важное – позиционирование блока в нужном месте страницы.
Для этого тег DIV в обязательном порядке используется вместе с таблицей стилей CSS.
В CSS есть два способа позиционирования блока в нормальном потоке: относительный (relative) и статический (static).
Способ Static используется по умолчанию и выполняет стандартное форматирование, оставляя блок в нормальном потоке .
Способ Relative позволяет сдвинуть положение блока относительно того положения, которое он занимал бы в нормальном потоке.
Например, position: relative; left: 20px; color: green;
Это текст, сдвинутый на 20 пикселей вправо.
Аналогично можно сдвигать блок по вертикали - для этого используется свойство top. Можно также использовать right и bottom, если требуется.

Троицкий Д.И. Интернет-технологии
Абсолютное позиционирование.
При абсолютном позиционировании блок изымается из нормального потока и помещается браузером в то место, которое вы указали.
Пример:
position: absolute; top: 10px; right: 10px;
background: green; border: 1px dotted red; width: 15px; height: 15px;
Получаем небольшой (15x15 пикселей) зеленый (background: green) квадратик с красной (red) пунктирной (dotted) границей толщиной 1 пиксел (border:1 px) в правом верхнем углу страницы (отступ от верха на 10 пикселей и от правого края окна на 10 пикселей).
Вложенные блоки. Если у блока-родителя определено свойство position, то вложенный блок позиционируется относительно родителя, а если это свойство не определено, то относительно окна браузера.

Троицкий Д.И. Интернет-технологии
Наиболее типичной является ситуация, когда страница разбивается на несколько абсолютно позиционированных блоков, внутри которых используется относительное позиционирование (а так как вложенные блоки позиционируются относительно родителя, то структура страницы сохраняется).
Блочная структура позволяет (порой весьма заметно) сократить размер страницы и очень сильно повышает логичность документа, так как порядок данных в коде соответствует логике документа.
Еще один способ позиционирования: плавающий (float). Плавающие блоки ведут себя очень похоже на картинки с указанным тегом align: они прижимаются к указанному краю контейнера, заставляя "нормальный поток" их обтекать.

Троицкий Д.И. Интернет-технологии
Слои
Блок, описываемый тегом DIV, можно воспринимать и как слой. Слои в HTML похожи на слои в Photoshop: их можно представить как прозрачнее пленки, наложенные одна на другую. Слой описывается точно так же, как и блок.
При этом в CSS-описании параметров стиля появляются новые возможности:
background-image:url(путь) - определяет фоновое изображение слоя. В качестве пути можно указывать как полный URL, так и относительный путь
z-index:число –служит для определения порядка расположения слоев на странице. Чем меньше значение свойства z-index, тем позднее слой выводится на экран.

Троицкий Д.И. Интернет-технологии
Полный пример тега DIV, определяющего слой, может выглядеть следующим образом:
Содержимое слоя

Троицкий Д.И. Интернет-технологии
Технология SSI
Иногда в адресах Web-страниц можно видеть расширение не .html, а .shtml. Это указывает на то, что данная страница выполнена с применением технологии SSI (Server Side Includes) и размещена на сервере, поддерживающем SSI.
Основная идея SSI – вынесение повторяющихся фрагментов страниц в отдельные файлы и затем включение их в нужное место HTML-документа специальной SSI-директивой.
Эта технология помогает экономить время при создании сайта и, насколько это возможно, облегчить работу web-дизайнера.

Троицкий Д.И. Интернет-технологии
SSI-технология

Троицкий Д.И. Интернет-технологии
Все SSI-директивы заключаются в комментарии HTML-кода. Главным отличием директивы от просто комментария является символ "#" сразу после "
После символа # пишутся команды SSI:
set - устанавливает значение какой-либо SSI-переменной. Переменная объявляется с помощью атрибута var, а её значение задается с помощью атрибута value.
Например:
echo - выводит на экран значение переменной, указанной в атрибуте var.
Например:
include - включает текст указываемого файла в данный документ. Положение файла на сервере указывается с помощью следующих атрибутов.
file - необходимо указать путь относительно данного документа.
virtual - можно указывать как относительный (как в случае с file), так и абсолютный путь.