Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-1

MOOF (MOOF@xakep.ru ; http://anynews.agava.ru)

Intro

Внимание! Леди и джентльмены! Поприветствуем DynamicHTML (буря аплодисментов)!!!. С ее помощью мы "оживим" твою страничку, заставим ее реагировать на действия юзера. Но для начала немного истории. Однажды Биллу Г. надоело смотреть на странички в Интернете, на которых ничего не менялось: ни текст, ни картинки, не было реакции на перемещение крысы. И тогда он, в очередной раз, решил забить на все стандарты, и в частности на стандарт HTML (в то время это была версия 3.2), и выпустил Internet Explorer 4. IE - был революционным браузером, в том плане, что в нем появилась поддержка этого самого, DHTML. С появлением DHTML и IE 4 вебмастер смог:

- прятать текст и изображение в документе, а потом показывать их, в зависимости от действий пользователя;

- перемещать текст и изображение по страничке;

- красиво форматировать текст;

- создать формы, которые незамедлительно реагируют на любые пользовательские действия;

- сделать страничку объемной (создать несколько слоев текста, картинок и т.д.)

и многое другое, на что хватит фантазии. А главное, ни один из этих пунктов не требует перезагрузки страницы. Все происходит у тебя в браузере! Но вместе с IE 4 увидел свет другой не менее замечательный (в то время) браузер: Netscape Navigator. Как ни странно, он был тоже версии 4. NN обладал несколько меньшими возможностями по сравнению с IE, и самое обидное, что их версии DHTML были не совместимы на 100% между собой, что вызвало множество трудностей. Но есть и "приятные" моменты: так, например, тебе не нужно будет изучать ни Java, ни ActiveX, чтобы создать "живую" страничку. Весь DHTML основан на JavaScript и VBSript (кому что больше нравится). Многие, заслышав знакомое JS и VBS, тут же начинают спрашивать: "А какая разница между HTML страничкой со скриптом и DHTML страничкой с тем же скриптом?". На это я ответственно заявляю: страничку можно считать написанной на DHTML, когда она использует каскадные таблицы стилей (что это - смотри дальше) вместе со сценариями.

Ладно, поговорили, вспомнили, теперь займемся делом.

Каскадные таблицы стилей

Страшно? Мне тоже не по себе от такого названия. Когда я его впервые услышал, то подумал о множестве мелких монстров, которые живут по ту сторону браузера и съедают полезную информацию, а на ее место вешают огромные баннеры. :)

Но все оказалось ни так страшно. Каскадные таблицы стилей (CSS1 - Cascading Style Sheets Level One) дали возможность вебмастеру круто украшать свою страницу, переопределяя теги. Например, ты пишешь:

<h1>Тут был Вася</h1>, и текст выводится большими черными буквами с краю экрана (тег <H1> говорит браузеру о создании заголовка). Если ты хочешь, чтобы текст был зеленым, ты пишешь так:

<h1><font color="#00FF00"> Тут был Вася</font></h1>.

А если ты захочешь, чтобы все заголовки были зелеными, что будешь делать? Правильно: писать каждый раз одно и то же (<h1><font color="#00FF00"> и т.д.), из-за этого твоя страничка неимоверно "растолстеет". А теперь скажем спасибо DHTML и CSS: с их помощью мы с тобой переопределим тег <h1>. Задав зеленый цвет по умолчанию: