Веб-термины

Тема

Создание сайта. Иерархия вложенных тегов

Начнём с того, на чём закончен предыдущий материал: таким образом, внутри первого тега самостоятельно существует другой тег. В технологиях веб-дизайна ситуация не просто обыденная, а обязательная, так как на сих банальных, но исключительно полезных приёмах веб-конструирования выстроены все корректные принципы создания сайтов.

Особый интерес в ситуации, когда теги вложены друг в друга, вызывает возникающая иерархическая зависимость вложенных дескрипторов — относительность младших тегов (их ещё зовут "дочерние", "ведОмые" или "подчинённые"). Выражается это в том, что:

Куда бы ни перемещался старший тег, младший будет СЧИТАТЬ СВОЁ РАСПОЛОЖЕНИЕ лишь относительно своего родителя (старшего тега). Если, например, переместить нашу "старшую" таблицу вправо, то ОТНОСИТЕЛЬНОЕ ПОЛОЖЕНИЕ младшей таблицы НЕ изменится — она по-прежнему будет считать своё положение по центру родителя.

Делаем? — меняем только первую строку:

<div align="right">
<table border="1" cellpadding="0" cellspacing="0" width="200" height="100">
<tr>
<td>
<div align="center">
<table border="1" cellpadding="0" cellspacing="0" width="100" height="50">
<tr>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

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

Но теперь обратим внимание на другую, весьма серьёзную проблему: чтение листинга кода.

Как видите, в таблицах ещё нет никаких данных, — а теперь представьте, что случится, когда эти данные там окажутся?

Листинг кода

збірні будинки https://unitfab.com/ префаб дома unitfab.com

Поэтому СПЛОШНОЙ листинг практически не применяется, а код пишут и ЧИТАЮТ, сдвигая подчинённые разряды через функцию tab (браузеры делают это автоматически). Выглядит подготовленный к листингу код вот так:

<div align="center">
  <table border="1" cellpadding="0" cellspacing="0" width="200" height="100">
     <tr>
         <td>
             <div align="center">
<table border="1" cellpadding="0" cellspacing="0" width="100" height="50">
                  <tr>
                 <td></td>
                  </tr>
               </table>
           </div>
      </td>
   </tr>
</table>
</div>

Иерархический уровень вложенности тегов

- как видите, это чрезвычайно облегчает восприятие кода. Пары соответствующих тегов (открывающий / закрывающий) отслеживаются СОГЛАСНО ИЕРАРХИЧЕСКИМ УРОВНЯМ — я пометил парные теги одинаковыми цветами.

Точно так же отслеживаются все вложенности тегов в любых страницах. А как это выглядит на практике, увидим в соответствующих материалах.

  На главную