Самоучитель HTML (+дискета). EUP.RU - Экономика и управление на предприятиях.

Книги в продаже (аннотация + содержание + отрывок)

А. Гончаров
САМОУЧИТЕЛЬ HTML (+ДИСКЕТА).
Цена: 98 р.

Источник: Издательский дом 'ПИТЕР'
Разделы: HTML, DHTML (язык разметки веб-страниц)
Подробнее: Информация от издателя (открывается в новом окне)
Заказ: Оформление покупки (открывается в новом окне)

Выравнивание данных в ячейках

      , и
      Группы колонок: и
      Фреймы


      Организация переходов по фреймам

      Устаревшие и нестандартные элементы


      и
      XMP и LISTING

      </plaintext> <br>      <EMBED> </embed> <br>      <NOEMBED> </noembed> <br>      <MARQUEE> </marquee> <br>      <HPn> </hpn> <br>      <BANNER> </banner> <br>      Глава 4. Объекты и формы<br>      Общие атрибуты объектов <br>      Рисунки и карты <br>      <IMG> <br>      <MAP> <AREA> </map> <br>      Элементы объектов <br>      <APPLET> </applet> <br>      <OBJECT> </object> <br>      <PARAM> <br>      Общие атрибуты форм <br>      Элементы форм <br>      <ISINDEX> <br>      <FORM> </form> <br>      <INPUT> <br>      <LABEL></label> <br>      Пример формы <br>      <SELECT> <OPTION> </select> <br>      <TEXTAREA> </textarea> <br>      <BUTTON> </button> <br>      <FIELDSET> <LEGEND> </legend> </fieldset> <br>      Глава 5.Сценарии<br>      Что такое сценарий <br>      <SCRIPT> </script> <br>      <NOSCRIPT> </noscript> <br>      Язык JavaScript <br>      Синтаксис <br>      Управляющие операторы <br>      Примеры сценариев <br>      Замена изображения <br>      Изменение свойств текста <br>      Метод setTimeout <br>      Управление формами <br>      Сценарий для одного элемента <br>      Глава 6. Приемы разметки гипертекста<br>      Стиль и традиции <br>      Не таблица, а табличка <br>      Заголовок и рисунок рядом <br>      Мозаичные рисунки <br>      Объединение ячеек таблицы <br>      Вложенные таблицы <br>      Форматирование линии <br>      Стихотворный текст <br>      Ссылки на файлы мультимедиа <br>      Компоновка Web-страниц <br>      Собственная Web-страница <br>      Глава 7. Создание графики<br>      Форматы графических файлов <br>      Создание фона HTML-документа <br>      Прозрачность для GIF- и PNG-изображений <br>      Программа Gif Construction Set <br>      Создание вращающегося значка <br>      Компоновка сложного GIF-файла <br>      Создание трехмерной вращающейся фигуры <br>      Иллюстрация функций Web-страницы <br>      Фотоморфизм <br>      Преобразование видео в GIF <br>      Инструменты рисования в Microsoft Office 2000 <br>      WordArt <br>      Графический редактор MS Image Composer <br>      Microsoft GIF Animator <br>      Глава 8. Редакторы гипертекста<br>      HoTMetaL PRO 5.0 <br>      Microsoft Word 2000 <br>      Microsoft FrontPage Express <br>      Microsoft FrontPage 2000 <br>      Netscape Composer <br>      Приложение А. Шестнадцатеричные числа<br>      Приложение Б. Свойства таблиц стилей<br>      Единицы измерения <br>      Шрифты <br>      font-family <br>      font-style <br>      font-variant <br>      font-weight <br>      font-size <br>      font <br>      Форматирование текста <br>      text-indent <br>      text-align <br>      text-decoration <br>      text-shadow <br>      letter-spacing <br>      line-height <br>      word-spacing <br>      text-transform <br>      white-space <br>      direction <br>      Свойства списков <br>      list-style-type <br>      list-style-image <br>      list-style-position <br>      list-style <br>      Свойства таблиц <br>      display <br>      row-span <br>      column-span <br>      border-collapse <br>      border <br>      vertical-align <br>      table-layout <br>      Свойства границ элементов <br>      width <br>      min-width и max-width <br>      height <br>      min-height и max-height <br>      position <br>      top, bottom, right, left <br>      margin-top, margin-right, margin-bottom, margin-left <br>      margin <br>      padding-top, padding-right, padding-bottom, padding-left <br>      padding <br>      border-top-width, border-right-width, border-bottom-width, border-left-width <br>      border-width <br>      border-top-color, border-right-color, border-bottom-color, border-left-color <br>      border-color <br>      border-top-style, border-right-style, border-bottom-style, border-left-style <br>      border-style <br>      border-top <br>      border-bottom <br>      border-left <br>      border-right <br>      border <br>      overflow <br>      float <br>      clear <br>      clip <br>      visibility <br>      z-index <br>      Свойства фона и цвета <br>      color <br>      background-color <br>      background-image <br>      background-repeat <br>      background-attachment <br>      background-position <br>      background <br>      Свойства мультимедиа <br>      volume <br>      speak <br>      speech-rate <br>      pause-before, pause-after <br>      pause <br>      cue-before, cue-after <br>      cue <br>      play-during <br>      azimuth <br>      elevation <br>      Пользовательский интерфейс <br>      cursor <br>      color, background-color <br>      Приложение В. Состав прилагаемой дискеты<br>      Приложение Г. Источники информации в Интернете по тематике книги<br>      Алфавитный указатель<br>      <br>      <br>      <br>      <br>      ОТРЫВОК<br>      <br>      <br>      5Сценарии<br>      <br>      Что такое сценарий <br>      <SCRIPT> </script> <br>      <NOSCRIPT> </noscript> <br>      Язык JavaScript <br>      Синтаксис <br>      Управляющие операторы <br>      Примеры сценариев <br>      Замена изображения <br>      Изменение свойств текста <br>      Метод setTimeout <br>      Управление формами <br>      Сценарий для одного элемента <br>      Многие авторы заинтересованы в том, чтобы их страницы имели современный вид, были многофункциональными и динамичными. Для преодоления ограничений HTML применяются разные средства: апплеты, объекты, каскадные таблицы стилей. Но самым популярным приемом является использование сценариев. Сценарий - это программный код, который включается в текст страницы в виде исходного текста и выполняется броузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript), разработанном фирмой Microsoft. Поскольк<br>      у JavaScript является признанным стандартом, и, что немаловажно, стандартом де-факто (этот язык используется на подавляющем большинстве страниц), то мы остановимся на нем при рассмотрении примеров.<br>      Что такое сценарий<br>      <SCRIPT> </script><br>      Этот элемент позволяет отделить текст программы-сценария от остальной информации страницы. Элемент SCRIPT должен включать атрибут language, который определяет язык и может принимать следующие значения:<br>      javascript - код на языке JavaScript; <br>      tcl - код на языке Tcl; <br>      vbscript - код на языке VBScript.<br>      Может оказаться удобным хранить тексты программ в отдельном файле. Тогда элемент SCRIPT надо снабдить ссылкой на этот файл: <br>      src="URL" <br>      По традиции файлы, содержащие программы на JavaScript, имеют расширение JS. <br>      Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы соблюсти все правила, внутри элемента можно поместить такое определение: <br>      type="text/javascript" <br>      Одной из особенностей сценариев является возможность изменения содержимого страницы в результате работы программы. Но это только возможность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно "сообщить" броузеру, что таких изменений внесено не будет. В некоторых случаях это позволяет ускорить загрузку страницы. <br>      Из стандартных атрибутов можно использовать атрибут charset. <br>      Элемент SCRIPT (или ряд таких элементов) может располагаться как внутри секции HEAD, так и внутри секции BODY. Если сценарий находится внутри элемента BODY, возможна ситуация, когда какой-либо броузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:<br>      <SCRIPT language="язык"> <br>       <br>      </script><br>      Современные броузеры "знают" этот прием и игнорируют символы комментария. Если в тексте сценария нужно ввести комментарий, то для этого используют другое обозначение: в начале строки вводят две косые черты //. <br>      Сценарий выполняется в момент загрузки страницы, то есть когда на экране еще видно ее содержание. В листинге 5.1 представлен пример простейшего сценария.<br>      Листинг 5.1. Вывод сообщения в окне (1 вариант)<br>      <HTML> <br>      <HEAD> <br>      <META http-equiv="Content-Type" content="text/html; <br>      charset=windows-1251"> <br>      <TITLE>Простейший сценарий</title> <br>      <SCRIPT language="javascript"> <br>      alert("Приветствуем вас на этой странице!") <br>      </script> <br>      </head> <br>      <BODY background="fon01.gif"> <br>      <P> <br>      <CENTER> <br>      <H1 style="color : maroon">З а г о л о в о к 1</h1> <br>      </center> <br>      </body> <br>      </html><br>      Это обычная страница, но в нее включен сценарий из одной строки. С помощью метода alert() перед загрузкой выводится сообщение (в данном случае приветствие), показанное на рис. 5.1. До тех пор пока пользователь не щелкнет на кнопке OK, загрузка не будет продолжена.<br>      Тот же самый сценарий можно выполнить и другим способом: создать функцию и связать ее с событием. Загрузка страницы соответствует событию onload элемента BODY (листинг 5.2).<br>      Листинг 5.2. Вывод сообщения в окне (2 вариант)<br>      <HTML> <br>      <HEAD> <br>      <META http-equiv="Content-Type" content="text/html; <br>      charset=windows-1251"> <br>      <TITLE>Простейший сценарий</title> <br>      <SCRIPT language="javascript"> <br>      function DoFirst() <br>      { <br>      alert("Приветствуем вас на этой странице!") <br>      } <br>      </script> <br>      </head> <br>      <BODY background="fon01.gif" onload="DoFirst()"> <br>      <P> <br>      <CENTER> <br>      <H1 style="color : maroon">З а г о л о в о к 1</h1> <br>      </center> <br>      </body> <br>      </html><br>      Но, разумеется, сценарий не обязательно должен выполняться во время загрузки страницы. В разделе "Стандартные атрибуты" главы 3 приведены события, которые определены для различных элементов HTML.<br>      ПРИМЕЧАНИЕ Тексты страниц можно найти и в файлах Simple.htm и Simple2.htm на прилагаемой дискете. <br>      <NOSCRIPT> </noscript><br>      На тот случай, если страница будет просматриваться в броузере, не поддерживающем сценариев, предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими способами. Во-первых, внутри него можно разместить предупреждение наподобие следующего: "Ваш броузер не может воспроизвести сценарии, необходимые для просмотра этой страницы!" Во-вторых, внутри элемента можно создать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой документ. Элемент NOSCRIPT должен об<br>      язательно снабжаться конечным тегом. Из атрибутов допускаются только id и style.<br>      Язык JavaScript<br>      В данной книге не приводится полное описание языка JavaScript. Необходимую справочную информацию легко найти в Интернете и специализированных изданиях. Есть, например, хороший справочник по JavaScript Рика Дарнелла ("Питер", 1999 г.). Но познакомиться с основными конструкциями языка, наиболее популярными его возможностями требуется обязательно, тогда дальнейшее его освоение не составит труда. Надо также заметить, что язык постоянно совершенствуется (пополняется новыми конструкциями). В последующих разделах будет рассмотрено несколько полезных примеров.<br>      Синтаксис<br>      Как и всякий современный язык программирования, JavaScript имеет традиционную часть, включающую операторы присваивания, математические и строковые функции, операторы и объектно-ориентированную часть, к которой относятся объекты, события, свойства и методы. <br>      Основной конструкцией языка является функция. Она создается по следующему шаблону: <br>      function ИмяФункции(параметр1, параметр2...) <br>      { <br>      Текст программы <br>      return выражение <br>      } <br>      Обязательными элементами являются: ключевое слово function, круглые скобки и фигурные скобки, определяющие тело функции. Для выполнения функции достаточно указать ее имя в сценарии, например: <br>      ИмяФункции(параметр) <br>      Внутри функции могут находиться вызовы других функций, и, кроме того, функция может вызывать саму себя. Если функция указана в качестве значения атрибута события, она выполняется, когда происходит соответствующее событие. <br>      С помощью оператора return функция может возвратить определенное значение. Тогда функцию можно использовать в операциях присваивания или проверки условий. <br>      В программе могут использоваться переменные различных типов. Если переменная определена вне функции, она является глобальной, то есть доступной для всех функций страницы. Переменные, определенные внутри функции, являются локальными, действующими только в пределах функции. Разные функции могут независимо использовать локальные переменные с одинаковыми именами. Для определения переменной можно указать ключевое слово var, хотя это и не обязательно: <br>      var Color01 = "red" <br>      Color01 = "red" <br>      Тип переменной определяется в момент присвоения ей значения. Для обозначения строковых констант используются двойные или одинарные кавычки. Два типа кавычек необходимы на тот случай, когда строковая константа содержит символы кавычек, например: <br>      WelcomeMessage = 'Добро пожаловать на сайт компании "Tip Top"' <br>      Числовые значения могут задаваться разными способами: <br>      count = 1 <br>      X1 = 3.55 <br>      F5 = 7.674E-5 <br>      Логические переменные могут принимать значения false (ложь) и true (истина). <br>      С помощью квадратных скобок определяются элементы массивов: <br>      mass[23] <br>      Математические операции выполняются следующим образом:<br>      var01 = var02+3 - сложение; <br>      var03 = 10*(var04-var05) - вычисления со скобками.<br>      Для вызова математических функций используется объект Math: <br>      var06 = Math.sqrt(var07) - вычисление значения функции (квадратного корня). <br>      Кроме традиционных операций, можно выполнять операцию поиска остатка от деления, например: <br>      var08=var09 % 4 <br>      Существуют унарные операции:<br>      var10++ - увеличение значения переменной на 1; <br>      var05-- - уменьшение значения переменной на 1.<br>      В условных или управляющих операторах используются операторы сравнения. Для составления логического выражения, кроме круглых скобок, допустимы следующие знаки:<br>      == - равно; <br>      != - не равно; <br>      > - больше; <br>      >= - больше или равно; <br>      < - меньше; <br>      <= - меньше или равно.<br>      Кроме них, используются логические операторы:<br>      ! - логическое отрицание; <br>      || - логическое ИЛИ; <br>      && - логическое И.<br>      Управляющие операторы<br>      Цикл do...while позволяет выполнять программный код до тех пор, пока выполняется условие. <br>      do { <br>      строка 1 ; <br>      строка 2 ; <br>      ... <br>      } <br>      while (условие) <br>      Обратите внимание, что тело оператора, так же как и тело функции, выделяется при помощи фигурных скобок. Строки кода (команды, операции присваивания, вызовы функций и др.) завершаются (отделяются друг от друга) точкой с запятой. <br>      Данный цикл можно записать и так: <br>      while (условие){ <br>      строка 1 ; <br>      строка 2 ; <br>      ... <br>      } <br>      Цикл for используют для того, чтобы выполнить программный код заданное число раз. В качестве примера показана программа, позволяющая создать числовой массив и заполнить его нулями. <br>      var Massiv = new Array(); <br>      var n = 25; <br>      for (i = 0; i < n; i++) { <br>      Massiv[i] = 0; <br>      } <br>      В данном примере показан цикл с тремя параметрами: начальным значением счетчика, условием выполнения цикла и командой изменения значения счетчика. Это традиционный способ использования такого цикла, но ни один из параметров не является обязательным. Если отсутствует условие, то цикл станет выполняться до тех пор, пока не будет прерван другим способом. Если отсутствует команда изменения значения счетчика, ее может заменить аналогичная команда в теле цикла. Если количество параметров меньше трех, символы "точка с запятой" определяют, какой параметр испо<br>      льзуется. <br>      Есть ряд вспомогательных операторов, используемых совместно с циклами. С помощью оператора break можно прервать работу любого цикла. Оператор continue позволяет прервать выполнение цикла и начать проверку условия. В зависимости от условия цикл может быть прерван окончательно или его выполнение может быть начато еще раз. <br>      Условный оператор if...else используется там, где выполнение программы надо поставить в зависимость от значения выражения (условия). Шаблон оператора таков: <br>      if (условие) { <br>      строки кода <br>      } <br>      else { <br>      строки кода <br>      } <br>      Блок else (выполняемый, если условие имеет значение false), не обязателен. <br>      Оператор switch...case тоже является условным, но выражение, представляющее собой его параметр, не обязательно должно быть логическим. Оно может принимать любые значения. Важно только, чтобы эти значения были указаны как метки в блоках case. Тогда будет выполнен один из многих вариантов кода. Если значение выражения не равно ни одной метке, выполняется блок default. Ниже приведен шаблон оператора. Обратите внимание, что фигурные скобки использованы только один раз, так как варианты кода разделены операторами case. <br>      switch (выражение) { <br>      case метка1 : <br>      строки кода <br>      case метка2 : <br>      строки кода <br>      ... <br>      default : <br>      строки кода }<br>      Примеры сценариев<br>      Замена изображения<br>      Один из самых модных сценариев - замена одного рисунка другим в тот момент, когда над рисунком появляется указатель мыши. Таким способом можно изменять вид надписи (текст или фон), вводить изображения нажатой и отпущенной кнопки, создавать всевозможные визуальные эффекты, "оживляющие" страницу. Листинг 5.3 содержит код подобной страницы. На его примере мы разберем, как совершается замена изображений.<br>      Листинг 5.3. Сценарий для замены изображения<br>      <HTML> <br>      <HEAD> <br>      <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <br>      <TITLE>Замена изображений</title> <br>      <SCRIPT language="javascript"> <br>      AgentName = navigator.appName; <br>      AgentVer = parseInt(navigator.appVersion); <br>      if (AgentName == "Netscape" && AgentVer <= 2){ <br>      version = "n2"; <br>      } <br>      else { <br>      version = "x3"; <br>      } <br>      if (version == "x3") { <br>      // Первая кнопка <br>      IMAGE1on = new Image; <br>      IMAGE1on.src = "str1on.jpg"; <br>      IMAGE1off = new Image; <br>      IMAGE1off.src = "str1.jpg"; <br>      // Вторая кнопка <br>      IMAGE2on = new Image; <br>      IMAGE2on.src = "str2on.jpg"; <br>      IMAGE2off = new Image; <br>      IMAGE2off.src = "str2.jpg"; <br>      } <br>      // Указатель сверху <br>      function mouse_on(objekt) { <br>      if (version == "x3") { <br>      imgOn = eval(objekt + "on.src"); <br>      document[objekt].src = imgOn; <br>      } <br>      } <br>      // Указатель убран <br>      function mouse_off(objekt) { <br>      if (version == "x3") { <br>      imgOff = eval(objekt + "off.src"); <br>      document[objekt].src = imgOff; <br>      } <br>      } <br>      </script> <br>      </head> <br>      <BODY> <br>      <TABLE align="left" border=0 cellspacing=3 cellpadding=8> <br>      <TR> <br>       <br>      <TD><A href="URL" onMouseover="mouse_on('IMAGE1')" <br>      onMouseout="mouse_off('IMAGE1')"><IMG src="str1.jpg" name="IMAGE1" <br>      alt="Page 1" border=0 height=36 width=151></a></td> <br>       <br>      <TD><A href="URL" onMouseover="mouse_on('IMAGE2')" <br>      onMouseout="mouse_off('IMAGE2')"><IMG src="str2.jpg" name="IMAGE2" <br>      alt="Page 2" border=0 height=36 width=151></a></td> <br>      </table> <br>      </body> <br>      </html><br>      Весь сценарий находится внутри элемента SCRIPT. Первые строки кода не имеют прямого отношения к замене графики. Дело в том, что броузеры ранних версий не поддерживают некоторые конструкции JavaScript, поэтому, чтобы предотвратить возникновение ошибки, необходимо проверить тип и версию броузера. Чаще всего код сценария надо защищать от броузера Netscape Navigator 2.x. В нашей программе создаются две переменные AgentName и AgentVer, которые позволяют определить название и версию броузера соответственно. Для этого указан объект navigator (представляющий используемый броузер). Кроме эт<br>      ого необходимы:<br>      appName - свойство, возвращающее название броузера; <br>      appVersion - свойство, возвращающее номер версии броузера; <br>      parseInt - функция округления до целого (т. к. номер версии может быть "дробным").<br>      Теперь, проведя проверку этих переменных, мы можем создать переменную version, которая будет хранить значение n2, если используется вторая или более ранняя версия Netscape Navigator. Значение x3 обозначает все другие программы просмотра. <br>      Теперь можно приступать к рисункам. Чтобы заменить один рисунок другим, надо изменить свойство src графического объекта: ссылку на графический файл. Поэтому вначале создаются две объектные переменные IMAGE1on и IMAGE1off типа Image. Для них определяются необходимые графические файлы:<br>      str1on.jpg - рисунок, который должен появиться под указателем мыши; <br>      str1.jpg - рисунок, который сразу помещается на страницу, и который появляется, когда указатель убран.<br>      Теперь мы имеем два изображения кнопки. Саму кнопку (с надписью "Страница 1") можно увидеть в главе 8 на рис. 8.23, но в данном случае иллюстрация мало что объясняет, так как работу сценария нужно наблюдать в действии. <br>      Удобство предварительного определения файлов очевидно: если на странице много кнопок, целесообразно сосредоточить все ссылки в одном месте. В нашем примере используются две кнопки, поэтому для второй тоже задаются два файла формата JPG. <br>      В нашем примере объектом, вид которого мы хотим динамически изменять, является гиперссылка с содержимым в виде рисунка. Для элемента A задано событие "указатель мыши сверху": onMouseover="mouse_on('IMAGE1')". Естественно, в сценарии должна находиться соответствующая функция. Разберем, как работает функция mouse_on(objekt). Ее аргументом является имя элемента IMG, которое задано с помощью атрибута name="IMAGE1". Таким образом, задается однозначное соответствие между объектами, которыми оперирует сценарий, и элементами, расположенными на странице. Работа функции тоже начинается с пров<br>      ерки версии броузера, так как в теле функции присутствует метод eval, не поддерживаемый ранними версиями Netscape Navigator. <br>      Этот метод работает достаточно интересно. Его аргумент - текстовая строка, которая должна представлять собой команду JavaScript. С помощью метода eval эта команда выполняется. Если в нашем примере такой командой окажется "IMAGE1on.src", то переменная imgOn получит в качестве значения ссылку на графический файл. Это будет не "str1on.jpg", как можно подумать, а URL, например: <br>      file:///C:/ПАПКА/str1on.jpg <br>      Осталось изменить свойство элемента рисунка. Это делается с помощью объекта document и имени соответствующего элемента IMG. Объект document можно считать массивом, в качестве индекса которого выступают имена расположенных на странице элементов. Ну, а свойство src говорит само за себя. Вторая функция (mouse_off) отвечает за возврат рисунка к прежнему виду и работает аналогично. <br>      Возможно, у вас возникнет подозрение: а не слишком ли сложно запрограммирован сценарий? Действительно, кое-что в тексте программы можно упростить. Например, в сценарии могла бы выполняться такая команда: <br>      document["IMAGE1"].src = "str1on.jpg"; <br>      В ней все параметры заданы явно, и работать такая команда может только с конкретным элементом IMG. <br>      Вид функции mouse_on можно изменить. Пусть, к примеру, у нее будут два аргумента: имя элемента и имя графического файла:<br>      function mouse_on(objekt,risunok) { <br>      if (version == "x3") document[objekt].src = risunok; <br>      }<br>      Тогда элемент A должен выглядеть так: <br>      <A href="URL" onMouseover="mouse_on('IMAGE1','str1on.jpg')" <br>      onMouseout="mouse_off('IMAGE1','str1.jpg')"><IMG src="str1.jpg" <br>      name="IMAGE1" alt="Page 1" border=0 height=36 width=151></a> <br>      В этой конструкции имеются три ссылки на графические файлы. Теоретически, для кнопки можно предусмотреть три изображения: "вид после загрузки страницы", "нажатая кнопка", "отпущенная кнопка". Это позволяет визуально различать кнопки, на которых был выполнен щелчок, и те, которые пользователь оставил без внимания.<br>      Изменение свойств текста<br>      Web-страница, текст которой приведен в листинге 5.4, содержит элементы абзаца и заголовка. Для заголовка запрограммированы события мыши так, чтобы цвет и содержание текста изменялся в зависимости от положения указателя.<br>      Листинг 5.4. Сценарий для замены свойств текста<br>      <HTML> <br>      <HEAD> <br>      <TITLE>Изменение цвета текста</title> <br>      <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <br>      <SCRIPT> <br>      // Если указатель мыши установлен <br>      function TextOnMouseOver(){ <br>      Element1 = window.event.srcElement ; <br>      Text1 = document.all("Par1") ; <br>      if (Element1.tagName == "H2") { <br>      Element1.style.color = "red" ; <br>      Text1.innerText="Надпись стала красной?" <br>      Text1.style.color="maroon" <br>      } <br>      } <br>      // Если указатель мыши убран <br>      function TextOnMouseOut() { <br>      Element1 = window.event.srcElement ; <br>      Text1 = document.all("Par1") ; <br>      if (Element1.tagName == "H2"){ <br>      Element1.style.color = "green" ; <br>      Text1.innerText='Установите указатель мыши на надпись "Заголовок"' <br>      Text1.style.color="blue" <br>      } <br>      } <br>      </script> <br>      </head> <br>      <BODY bgcolor="white" text="green"> <br>      <P id="Par1">Установите указатель мыши на надпись "Заголовок"</p> <br>      <TABLE border=0 cellspacing=0 cellpadding=0><TR> <br>      <TD><H2 onmouseover=TextOnMouseOver() onmouseout=TextOnMouseOut()> <br>      Заголовок</h2></table> <br>      </body> <br>      </html><br>      Легко заметить, что в элементе H2 информация о сценарии минимальная: указаны только имена функций. Вся обработка событий сосредоточена в элементе SCRIPT. Когда указатель мыши попадает в область заголовка, выполняется функция TextOnMouseOver(). Поскольку эта функция не получает никаких параметров, необходимо, в первую очередь, определить, с каким элементом связано событие. Для этого создается объектная переменная Element1. В тексте программы используются:<br>      window - объект, определяющий окно броузера; <br>      event - объект, содержащий информацию о событиях; <br>      srcElement - свойство, определяющее элемент, в котором произошло событие.<br>      Переменная Text1 связана с конкретным абзацем (элементом P) при помощи атрибута id, задающего имя элемента. <br>      Теперь все готово для активных действий. С помощью свойства tagName проверяется, действительно ли событие связано с элементом H2. Таким образом, сценарий будет выполняться для всех заголовков второго уровня, расположенных на странице. С помощью конструкции style.color для заголовка задается красный цвет. С помощью свойства innerText заменяется текст абзаца. Вторая функция, которая выполняется, когда указатель мыши покидает область заголовка, работает так же, но константы в ней использованы, естественно, другие. <br>      Обратите внимание, что элемент H2 расположен внутри элемента TABLE. Дело в том, что элемент заголовка занимает всю строку, и слева от надписи остается пустое пространство (рис. 5.2). Если пользователь поместит указатель мыши на пустое место, сценарий тоже будет выполнен. Это может показаться неестественным, так как все привыкли, что реакция возникает, когда выбран конкретный объект (в данном случае надпись). Таблица, которую не видно при просмотре, позволяет ограничить область действия элемента H2 только его текстом.<br>      <hr size=1 width=98%> <p align=center><small><em>Самоучитель HTML (+дискета). / А. Гончаров - СПб: Питер, 2002. - 240 с.</em></small></p> </td></tr></table></center></div> <p align="center"> <a href="http://eup.ru">Экономика и управление</a> | <a href=http://pravo.eup.ru>Право/a> | <a href=http://subschet.ru>Бухгалтерский учет и налоги</a> | <div id='LfLz_1371804776'></div> </p> <script language="JavaScript" type="text/javascript" src=../../GlobalScript/_down.js> </script> </form></body></html>

      Книга посвящена HTML — популярному языку гипертекстовой разметки документов, позволяющему создавать интерактивные публикации в Интернете. В ней приведено описание самого языка, обсуждаются особенности применения графики на Web-страницах, техника подготовки данных для распространения в Интернете и другие задачи, стоящие перед создателями HTML-документов. Все примеры записаны на прилагаемую к книге дискету, поэтому текст любого HTML-файла можно просмотреть, открыв файл в броузере или текстовом редакторе.


      СОДЕРЖАНИЕ
      Предисловие
      От издательства
      Глава 1. Введение
      Для кого предназначена эта книга
      Что есть в этой книге
      Немного истории
      HTML как явление нашей жизни
      Терминология
      Особенности гипертекста
      Просмотр Web-страниц
      Microsoft Internet Explorer
      Netscape Communicator
      Глава 2. Синтаксис HTML 4
      Версии HTML
      Анатомия Web-страницы

      Правила синтаксиса
      Кодирование символов
      Использование спецсимволов
      Типы данных
      Управление цветом
      Глава 3. Основные элементы HTML версии 4
      Заголовок страницы

      < STYLE > и

      Стандартные атрибуты
      Атрибуты событий
      Форматирование текста

      или




      и



      Табуляция, пробелы, переносы...
      Элементы содержания
      и

      , и



      Таблицы стилей

      Классы
      Универсальные классы: атрибут id
      Каскадные таблицы стилей: элемент

и
      Выводы
      Списки

      Гиперссылки


      Таблицы

Группы строк: