|
Создание сайта. Вложенность тегов
В технологиях веб-дизайна, теги могут вкладываться друг в
друга. Это используется для построения сложных многоуровневых
систем, где с помощью каскадных таблиц стилей (css) и принципов
иерархической подчинённости (а таковая возникает при реализации вложенности),
можно достаточно простыми методами / средствами достигать прекрасных результатов
при решении широкого спектра задач (например, создании сайтов, уверенно
работающих на любом серверном или клиентском оборудовании).
Как осуществляется эта самая вложенность, мы сейчас разберёмся. Поскольку в технологиях веб-дизайна, для компоновки страниц
обычно используются таблицы, поработаем именно с ними. Кстати,
пользователь таблиц не замечает, так как
толщина их границ равна нулю; нам же сейчас понадобится их видеть,
чтобы оценить результаты своих экспериментов.
Сделаем две таблицы. Чтобы они были видны на дисплее, обозначим их
границу в 1 пиксель.
Здесь и далее во всех фрагментах кода, красным
цветом выделены только вновь вводимые теги и их атрибуты (или
изменения, сделанные по сравнению с предыдущими примерами).
Таблица 1: <table
border="1"
cellpadding="0" cellspacing="0" width="200" height="100">
<tr>
<td></td>
</tr>
</table>
Таблица 2:
<table border="1" cellpadding="0"
cellspacing="0" width="100" height="50">
<tr>
<td></td>
</tr>
</table>
Таблицы, как и все прочие элементы в технологиях веб-дизайна,
при создании сайтов будут "отсчитывать"
(по
умолчанию) своё положение от левого края.
Чтобы их как-то сдвинуть с этого положения, применяется тег
автономности элемента — <DIV> (оговоримся сразу, это
далеко не единственный способ решения сего вопроса). Используя
этот тег, элемент можно передвигать (правда, пока только в три положения,
и лишь по
горизонтали: левое (left),
оно же и по умолчанию; центральное (center);
правое (right)).
Синтаксис дескриптора таков:
ALIGN="значение"
— имейте в виду, при
создании сайтов этот синтаксис применим ко всем позиционируемым элементам
(то есть для всех технологий веб-дизайна).
Давайте поставим таблицы по центру:
Таблица 3:
<DIV ALIGN="center">
<table border="1" cellpadding="0"
cellspacing="0" width="200" height="100">
<tr>
<td></td>
</tr>
</table>
</DIV>
Таблица 4:
<DIV ALIGN="center">
<table border="1" cellpadding="0" cellspacing="0" width="100" height="50">
<tr>
<td></td>
</tr>
</table>
</DIV>
Теперь уже пора сделать ход, похожий на применение технологий веб-дизайна: построим хоть какое-то подобие сложной схемы табличной
компоновки — вложим таблицы друг в друга (разумеется, вкладываем
между тегами, описывающими ячейку):
<DIV ALIGN="center">
— первый тег <DIV>
<table border="1" cellpadding="0" cellspacing="0" width="200"
height="100">
<tr>
<td>
<DIV ALIGN="center">
— второй тег <DIV>
<table border="1" cellpadding="0" cellspacing="0" width="100"
height="50">
<tr>
<td></td>
</tr>
</table>
</DIV>
— конец второго тега <DIV>
</td>
</tr>
</table>
</DIV>
— конец первого тега <DIV>
Результат:
Таким образом, внутри первого тега
самостоятельно существует другой тег. Именно по такому принципу и компонуют
дизайн-макеты при создании сайтов.
Прежде, чем переходить к следующему материалу, настоятельно рекомендуем вам
самостоятельно поэкспериментировать с тегами <div> в сочетании с
иными дескрипторами.
|
Статья: |
Создание сайта. Вложенность тегов |
|
Опорные темы: |
Веб-дизайн, технологии и термины (терминология) |
|
