Apexuite

Как мы посмотрели на первом уроке изначально язык разметки HTML был разработан для оформления технической документации. Основными элементами которой были: тексты, ссылки, списки, изображения, таблицы. Мы уже знакомы с тегами для верстки текста, такими как: br, h1-h6, p, b, u, i, a, img. Для оформления текстов они применяются до сих пор.

С более широким распространением интернета сайты стали делать для самых различных тематик. Появилась потребность более красочного оформления. Разработчикам сайтов приходилось использовать существующие инструменты. Самым простым решением на тот момент стало использование прозрачных таблиц. Когда создаются ячейки таблицы, располагаются необходимым образом, объединяются, в ячейки помещаются тексты и рисунки, а потом рамка прячеться (border=0). Это был самый популярный способ верстки сайтов в 90-е годы. Его до сих пор можно иногда встретить на старых сайтах.

Давайте посмотрим как это работало. Создадим таблицу и зададим свойства ячеек:

<style>

table.main{

height:100%;

width:100%;

}

td.header{

height:100px;

}

td.menu{

width:300px;

}

td.header{

height:200px;

}

</style>

<table border=1 class=main>

<tr>

<td colspan=2 class=header>Шапка сайта

<tr>

<td class=menu>Меню сайта

<td class=content>Текст статьи

<tr>

<td colspan=2 class=footer>Подвал сайта

</table>

Наберите этот код и посмотрите результат. Задайте ячейкам разные цвета фона с помощью свойства CSS background. Попробуйте менять размер окна браузера.

Сразу становится заметен недостаток такого способа: при уменьшении ширины места для текста статьи становиться неостаточно.

До тех пор пока единственным средством выхода в интернет были только компьютеры с большими мониторами, такого способа верстки было достаточно. Но с появлением мобильных телефонов способных выходить в интернет остро встала проблема отображения сайтов на маленьких экранах первых телефонов. Тогда придумали делать две версии сайта, один для компьютеров (www.ya.ru) и другой для телефонов (wap.ya.ru). Версия wap была минимальной копией большого сайта где был только текст без таблиц и картинок.

Экраны телефонов становились все больше, а вычислительные мощности росли. Тогда появился формат pda. Имя такого сайта выглядело уже как pda.ya.ru. Такие сайты уже строились на таблицах и содержали рисунки. Но все равно приходилось создавать две копии одного сайта: для компьютеров и телефонов.

Телефоны становились все более мощными и популярными. Чтобы кардинально решить эту пролему была разработана блочная верстка с помощью тега div. И адаптивные свойства CSS. Это когда свойства объектов на странице могут меняться в зависимости от ширины экрана. Сейчас уже более половины посетителей сайтов заходит со смартфонов.

Давайте посмотрим как работает блочная верстка:

<style>

div{

border:1px solid gray;

}

div.main{

max-width:1000px;

margin:0 auto;

}

div.header{

float:left;

width:100%;

min-height:100px;

}

div.menu{

float:left;

min-width:300px;

}

div.content{

float:left;

max-width:650px;

}

div.footer{

float:left;

width:100%;

min-height:150px;

}

</style>

<div class=main>

<div class=header>

Шапка сайта

</div>

<div class=menu>

Меню сайта

</div>

<div class=content>

Текст статьи

</div>

<div class=footer>

Подвал сайта

</div>

</div>

Теперь попробуйте добавить больше текста вместо "Текст статьи" и менять размер окна браузера. Как видите при уменьшении ширины блок с текстом статьи будет автоматически прыгать под блок меню. Такого эффекта в табличной верстке получить просто не получиться, потому что ячейки таблиц не могут менять свое положение.

Блочная верстка является сейчас самой популярной, но и она имеет множество недостатков. Например для того чтобы разместит блок main по центру мы применили такой трюк: задали ширину и внешний отступ auto. Просто потому что у блоков нет свойства выравнивания по центру.

Чтобы решать подобные проблемы язык HTML постоянно развивается. Например в пятой версии стандарта HTML блоки div можно называть по имени содержимого. Иначе в огромном количесте div-ов легко запутаться. А для выравнивания блоков были придуманы технологии flex и grid которые мы изучим в дальнейшем.

Как видите недостаточно сделать сайт один раз, его надо периодически переделывать с учетом новых стандартов. Поэтому работа верстальщиков сайтов всегда сохраняет свою актуальность.