02 Остановка 2 из 5 · техническая часть

Дизайн

Сайты писали руками, часто прямо в Блокноте. Дизайнеров и шаблонов почти не было, экраны маленькие, шрифтов пять, а раскладку собирали из таблиц. Зато каждый сайт выглядел по-своему.

Машина времени

Это не скриншоты, а настоящие страницы тех лет. Их сохранил Интернет-архив, и они до сих пор открываются: по ссылкам внутри можно ходить.

Машина времени: web.archive.org

1998 www.yahoo.com

1 / 10

Загружаем страницу…

Открыть в архиве ↗

Интернет-архив

Все эти страницы из Internet Archive, некоммерческой организации из Сан-Франциско. С 1996 года она обходит интернет роботом и сохраняет копии сайтов. В 2001-м открыли Wayback Machine: любой может посмотреть, каким был сайт в нужный день.

Сейчас там больше триллиона страниц. Многих сайтов давно нет, а в архиве они остались. Например, огромная часть GeoCities, бесплатного хостинга домашних страниц, который закрыли в 2009-м.

Вёрстка таблицами

CSS появился в 1996-м, но браузеры понимали его плохо и каждый по-своему. Поэтому раскладку страницы собирали из таблицы: шапка в верхней строке, меню в левой ячейке, текст в средней, кнопки справа.

Таблице ставили border="0", и посетитель рамок не видел. Отступы делали прозрачной картинкой 1×1 пиксель, spacer.gif, растянутой до нужного размера. Блок со скруглёнными углами резали на 9 ячеек с картинками уголков.

<table width="100%" border="0"
       cellpadding="4" cellspacing="0">
  <tr>
    <td colspan="5" bgcolor="#000080">…</td>
  </tr>
  <tr>
    <td width="120" bgcolor="#c0c0c0">меню</td>
    <td><img src="spacer.gif" width="10"></td>
    <td valign="top">текст</td>
    …

Эта страница шире экрана. Проведи по ней вбок, чтобы увидеть все ячейки.

~*~ Мой сайт ~*~

Добро пожаловать!

Это моя домашняя страничка. Тут я пишу про себя, про игры и выкладываю картинки. Пишите в гостевую!

Новости

12.03.2001: добавил раздел «Фотки».
Сайт строится!

Пять шрифтов на весь интернет

Шрифт сайта берётся с компьютера посетителя. Если такого шрифта у него нет, браузер покажет стандартный Times New Roman. Поэтому все пользовались одними и теми же шрифтами, которые стояли почти на любой Windows.

В 1996 году Microsoft раздала бесплатный набор Core fonts for the Web: Arial, Times New Roman, Courier New, Verdana, Georgia, Comic Sans, Impact. На них и держался почти весь интернет.

Шрифт

Добро пожаловать на мою страничку! Тут фотки, музыка и гостевая книга.

Шрифт по умолчанию. Если автор ничего не указал, страница была в нём.

Экран 800×600

Мониторы были пузатые, на 14–15 дюймов, с разрешением 800×600. У везунчиков 1024×768. Под это и верстали, а внизу страницы писали «Лучше всего смотреть при 800×600».

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