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

Спецвыпуск хакер, номер #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>. Задав зеленый цвет по умолчанию:

Содержание  Вперед на стр. 002-014-2

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001