Страница 1996 года: таблицы, font и счётчик

Табличная вёрстка — способ 1990-х раскладывать страницу невидимой таблицей и оформлять текст тегами <font> и <center>. Её вытеснили смысловой HTML и CSS.

Как выглядел сайт тридцать лет назад

В прошлом уроке вы написали простую страницу: заголовок, абзацы, ссылка. Но в середине девяностых сайты уже выглядели иначе: с цветным фоном, меню слева, шапкой и счётчиком посетителей внизу. Откуда это бралось, если в HTML того времени не было ничего про цвета и колонки?

Ответ в том, что авторы научились обходить ограничения. HTML задумывали как язык для научных документов, и у него не было ни колонок, ни отступов, ни шрифтов. Зато была таблица: строки, ячейки, цвет фона у ячейки, ширина в пикселях. Если разрезать страницу невидимой таблицей, в одну ячейку положить меню, в другую текст, получаются колонки. Так таблица из средства для данных превратилась в средство для раскладки.

Таблица как сетка

Таблица состоит из строк <tr> (table row), а строка из ячеек <td> (table data). Атрибуты настраивают вид. Вот те, что вы увидите в старых страницах и в практике:

• width="600" задаёт ширину таблицы в пикселях;
• cellpadding и cellspacing задают отступ внутри ячеек и между ними;
• colspan="2" растягивает ячейку на два столбца, так делали широкую шапку;
• valign="top" прижимает содержимое к верху ячейки;
• bgcolor задаёт цвет фона.

Посмотрите на схему: она показывает страницу, сложенную таким способом. Включите «Показать сетку»: невидимая таблица станет видна. Потом сузьте окно до размера телефона.

Оформление тегами

Текст в таблице нужно было как-то раскрасить. Для этого в HTML 3.2 (1997) закрепили теги оформления:

• <font face="..." size="..." color="..."> задаёт шрифт, размер и цвет;
• <center> выравнивает по центру;
• <b> и <i> делают текст жирным и курсивным (о них ещё будет речь: теперь они значат другое);
• атрибуты bgcolor, text, link у body красят страницу и ссылки.

Заметьте принцип: оформление записано в самой разметке, рядом с текстом. Если нужно поменять цвет заголовков на всех пятидесяти страницах сайта, придётся открыть и исправить пятьдесят файлов.

CSS появился почти одновременно. Его первая версия стала рекомендацией W3C в декабре 1996 года, а HTML 4.0 в 1997-м прямо объявил теги font и center устаревшими. Но браузеры годами не умели CSS одинаково, и миллионы страниц ещё долго писали по-старому.

Счётчик и невидимые картинки

Два ещё приёма эпохи.

Счётчик посетителей. Внизу страницы стояла картинка с цифрами: «Вы посетитель номер 000123». Картинку на лету рисовал скрипт на сервере и каждый раз прибавлял единицу. Это было и хвастовство, и реальная статистика, потому что других способов узнать, сколько людей пришло, у авторов не было. У нас сервера нет, поэтому в практике счётчик будет просто картинкой с цифрами.

Spacer GIF. Отступов в HTML тоже не было. Поэтому делали прозрачную картинку размером 1 на 1 пиксель и растягивали её атрибутами width и height, чтобы получить пустое место нужного размера. Популярным этот приём сделал американский дизайнер Дэвид Сигел в книге «Creating Killer Web Sites» (1996). На странице могли стоять десятки таких невидимых картинок, а человек, который открывал её программой чтения с экрана, слышал «изображение, изображение, изображение».

Почему так больше не делают

Всё это работало, пока сайт открывали на одном типе экрана. Потом у такого подхода обнаружились беды:

1. Содержимое спутано с видом. Чтобы перекрасить сайт, надо переписать каждую страницу. Редизайн становился стройкой.
2. Фиксированные ширины. Сайт, рассчитанный на экран 640 × 480, не годится ни для большого монитора, ни для телефона.
3. Нет смысла. Для программы чтения с экрана и поисковика страница это набор ячеек. Где заголовок, где меню, где главное содержимое, они могут только догадываться.
4. Тяжёлый код. Вложенные таблицы, пустые картинки и теги вокруг каждой фразы делали страницы тяжёлыми для модема.
5. Хрупкость. Любая правка в одной ячейке могла сломать всю сетку.

Поэтому в следующих уроках вы переделаете эту страницу. Смысл (что это заголовок, что меню) уйдёт в HTML, а вид (цвет, ширина, колонки) в CSS.

Честная оговорка: у табличной вёрстки есть одно последнее прибежище. Почтовые клиенты, в которых люди читают рассылки, до сих пор обрабатывают CSS на уровне 2005 года, и письма вёрстают таблицами. Для сайта это не причина: сайт читают браузеры, которые умеют всё современное.

Практика

Возьмите свою первую страницу и превратите её в сайт 1996 года. Это эпоха 1 вашей машины времени: её версия появится в галерее первой. Картинка-счётчик нужна и в вашем сайте. Файла у нас нет, так что в предпросмотре появится её описание из alt: пусть оно говорит, что на картинке нарисовано. Так вы заодно увидите, зачем нужен этот атрибут.

Страница получится не красивой. Это нормально: вы только что увидели, из чего сложены старые сайты. В части про CSS вы сделаете из неё современный сайт, шаг за шагом.

Что было не так с 1996 годом

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