Веб-дизайн

  

Веб-дизайн | Технологии Интернета

Технологии веб-дизайна. Создание сайта. HTML

Ничего лишнего. Только нужная информация, изложенная самым простым языком.

Веб-термины

      Аa      Бб      Вв       Гг       Дд       Ее       Жж       Зз       Ии       Кк      Лл      Мм      Нн       Оо      Пп       Рр       Сс     Тт       Уу      Фф     Хх    Чч      Яя sp




Веб-дизайн. Связь

СВЯЗЬ




МЕНЮ САЙТА   


 


вд Интернет, Сеть и сетевые ресурсы

вд Терминология веб-дизайна

вд Термин «веб-дизайн»

вд Термин «технологии веб-дизайна»

вд Термин «веб-проект»

вд Термин «веб-страница»

вд Термин «сетевые ресурсы»

вд Термин «веб-архитектура»

вд Термин «имя»

вд Структура Интернета. Домен

вд Термин «домен»

вд Домены первого уровня. Перечень

вд Создание сайта. Общие сведения

вд Сайт. Подготовка к публикации

вд Сайт. Регистрация домена

вд Выбор имени домена

вд Сайт. Сервер и хостинг, их выбор

вд DNS - «прописка» домена

вд Публикация сайта

вд HTML. Гипертекстовая разметка

вд HTML. Что такое тег (дескриптор)

вд HTML. Гиперссылка и гипертекст

вд HTML. Метатеги (теги МЕТА)

вд Метатеги группы «http-equiv»

вд Метатеги группы «name»


вд Алгоритмы поисковых систем

вд Дизайн-макет

вд Веб-термины: ГС и СДЛ

вд Сео-оптимизация

вд Веб-термин: сервер

вд Перелинковка

вд Семантическое ядро

вд Термин: гипертекст

вд Приложение

вд Курсы веб-дизайна

вд Требования к сайту

вд Компоненты форм

вд Создание форм

вд Иерархия вложенных тегов

вд Вложенность тегов

вд Создание сайтов и CSS

вд Синтаксис тегов

вд Создание сайтов и сложные теги

вд Веб-шпаргалка

вд Комментарии

вд Подборка авторских сайтов

вд Креатив

 

space  

sp

Тема

 Технологии веб-дизайна. Создание сайта. Вложенность тегов sp



 Создание сайта. Вложенность тегов

В технологиях веб-дизайна, теги могут вкладываться друг в друга. Это используется для построения сложных многоуровневых систем, где с помощью каскадных таблиц стилей (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> в сочетании с иными дескрипторами.


Статья:

Создание сайта. Вложенность тегов

Опорные темы:

Веб-дизайн, технологии и термины (терминология)



указатель

Назад

указатель

К началу

указатель

Далее

 

 




Веб-дизайн. Лого  

Веб-дизайн | Технологии  На главную


 


 

«Интернет без ошибок». Художественная мастерская С. Добрынина © 2008-2016. Все права защищены



 

 

 

 

Последнее обновление 27.07.2016