Практическая информатика

Динамический HTML

Разбить на страницы
Показывать лекцию целиком

Динамический HTML (Dynamic HTML, или DHTML) - это развитие традиционного языка HTML, позволяющее создавать интерактивные, "живые" HTML-документы. Стремлению сделать Web-страницу динамичной и интерактивной, то есть легко изменяющейся, управляемой пользователем, столько же лет, сколько и самому WWW.

Один из методов реализации идеи динамичности заставил разработчиков "дополнить" HTML и встроить в браузеры средства обработки специальных языков программирования, таких как JavaScript, JScript и VBScript. Сами сценарии (скрипты), т. е. программы, написанные на одном из этих языков, можно размещать вместе с основным содержанием и разметкой HTML-документа. Программы на этих языках перемещаются по сети Интернет в виде исходных текстов, а компилируются и выполняются после загрузки в конкретный браузер.

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

С противоположного фланга на HTML наступает, принимая на себя часть его функций и снимая тем самым часть его ограничений, язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Главная цель CSS (эту технологию часто называют каскадные таблицы стилей ) - отделить структуру документа от его оформления и позволить автору или пользователю самому решать, как должен выглядеть тот или иной элемент содержания HTML-страницы. Другим достоинством таблиц (иногда называемых листами) стилей является возможность обеспечить единый стиль оформления некоторого набора HTML-документов, например курсовых или дипломных работ.

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

К сожалению, два варианта реализации динамического HTML, предлагаемые компаниями Netscape Communications Corporation и Microsoft - разработчиками двух наиболее популярных браузеров, имеют между собой очень мало общего, особенно если судить по документации самих этих компаний. Различиям между этими реализациями и рекомендациям по подготовке HTML-страниц, совместимых с разными браузерами, посвящено много статей в Интернет. В этой главе рассматриваются образцы применения DHTML, одинаково отображаемые этими браузерами, и даются советы, как достичь такого "взаимопонимания".

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

На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств, значения которых определяют его вид при выводе браузером. Так, например, у большинства тегов ( <P>, <TD>, и т. д.) есть свойство COLOR, значение которого определяет цвет, используемый для отображения содержимого тега.

Таблица (лист) стилей CSS - набор правил отображения, применяемых в документе, к которому присоединяется соответствующая таблица стилей. Все свойства, использующиеся в таблицах стилей, условно можно разделить на несколько групп:

  • управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..);
  • управляющие форматированием абзаца (отступ красной строки, выравнивание, интерлиньяж, расстояние между словами,..);
  • управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока в документе, видимость блока,..);
  • другие (цвет ссылок, изменение внешнего вида курсора,..).
    •

    Использование стилей

    Одним из способов подключения стиля к HTML-странице (остальные способы рассматриваются в параграфе "Каскадные таблицы стилей") является использование в заголовке документа контейнера <STYLE>:

    <HEAD>
...
<STYLE TYPE="text/css">
 ...
 описание стилей
 ...
</STYLE>
...
</HEAD>

    Включение в этот контейнер атрибута TYPE="text/css" указывает браузеру, что в нем содержится описание стилей. В настоящее время атрибут TYPE может принимать только указанное значение, однако если он будет опущен, то некоторые браузеры могут проигнорировать всю таблицу стилей.

    Само описание стиля включает селектор тега, указывающий имя тега, на который распространяется правило стиля, и фигурные скобки, содержащие одну или более пар объявлений вида "свойство_стиля:значение", разделенных точкой с запятой:

    селектор_тега{
 свойство_стиля1:значение1;
 свойство_стиля2:значение2;
 свойство_стиля3:значение3;
}

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

    Пример

    <HTML>
<HEAD>
<TITLE>Первый пример использования стилей</TITLE>
<STYLE TYPE="text/css">
<!--
 H1 {text-align: center}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок</H1>
<P>
Какой-то текст
</BODY>
</HTML>

    В данном примере в секции заголовка документа <HEAD>... </HEAD> задан стиль (правило), согласно которому браузер должен выравнивать по центру страницы содержимое контейнера <H1>... </H1>: свойству text-align присвоено значение center.

    Обратите внимание на использование тегов комментария (<! - и - >). Все содержимое контейнера <STYLE > находится между ними. Это позволяет скрыть информацию о стиле от браузеров, которые не распознают тег <STYLE > (в противном случае они могут принять правила за текст и вывести их на экран).

    В таблицах стилей также можно использовать комментарии, позволяющие описать то или иное свойство: текст, расположенный между символами /* и */ не обрабатывается браузером и не рассматривается, как элемент таблицы стилей (не путайте теги комментария и комментарии таблиц стилей, они имеют разный синтаксис и разное назначение).

    Пример

    Рассмотрим пример оформления текста. Установим белый цвет фона документа (свойство background-color ), затем задействуем свойства управления шрифтом: color (цвет), font-family (гарнитура шрифта) и font-size (размер шрифта), например,

  • цвет - серый;
  • семейство шрифта (гарнитура) - Times, шрифт с засечками;
  • размер шрифта - 14 пунктов.
    •

    Добавим свойства, связанные с форматированием абзаца: text-indent (отступ красной строки), text-align (выравнивание), padding-left (отступ слева), например,

  • дополнительный отступ красной строки - 10pt;
  • выравнивание - по ширине документа;
  • отступ от левого края - 20pt.
    •

    Установим темно-красный цвет (свойство color) заголовков с первого по третий уровень.

    Документ примет вид:

    <HTML>
<HEAD>
<TITLE>Второй пример использования стилей</TITLE>
<STYLE TYPE="text/css">
<!--
 BODY {background-color: white}

 H1, H2, H3 {color: red}

 P    {
 /* шрифт */
       color: gray;
       font-family: Times, serif;
       font-size: 14pt;
 /* абзац */
       text-indent: 10pt;
       text-align: justify;
       padding-left: 20pt;
      }
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

    Задание значений

    Для задания значений в правилах таблиц стилей важно использовать корректный синтаксис.

    Задание цвета (color), также как и в тегах HTML, возможно двумя способами: наименованием и численным значением. Спецификация CSS1 ("Спецификации каскадных таблиц стилей, уровень 1"), разработанная Консорциумом World Wide Web (W3C), перечисляет только 16 наименований цветов, которые можно использовать в таблицах стилей:

    aqua gray navy silver
    black green olive teal
    blue lime purple white
    fuchsia maroon red yellow

    Другие наименования из полного списка цветов, приведенного ниже, также могут поддерживаться некоторыми браузерами

    Web-цвета по оттенкам
    black white
    Нейтральные/холодные
    darkgray ghostwhite silver
    darkslategray gray slategray
    dimgray lightgrey snow
    gainsboro lightslategray
    Нейтральные/теплые
    antiquewhite ivory papayawhip
    cornsilk linen seashell
    floralwhite oldlace
    Коричневые/бронзовые
    beige chocolate rosybrown
    bisque khaki sienna
    blanchedalmond moccasin tan
    brown navajowhite wheat
    burlywood peru
    Розовые
    coral lightcoral mistyrose
    darksalmon lightpink pink
    deeppink lightsalmon salmon
    hotpink magenta
    Оранжевые
    darkorange orange orangered, peachpuff
    Желтые
    darkgoldenrod lemonchiffon palegoldenrod
    gold lightyellow yellow
    goldenrod lightgoldenrodyellow
    Зеленые
    aquamarine greenyellow olive
    chartreuse honeydew olivedrab
    darkgreen lawngreen palegreen
    darkkhaki lime seagreen
    darkolivegreen limegreen springgreen
    darkseagreen mediumseagreen yellowgreen
    forestgreen mediumspringgreen
    green mintcream
    Фиолетовые
    blueviolet lavenderblush plum
    darkmagenta mediumorchid purple
    darkorchid mediumpurple thistle
    darkviolet mediumvioletred violet
    fuchsia orchid
    lavender palevioletred
    Сине-зеленые
    aqua darkturquoise mediumauqamarine
    cyan lightcyan mediumturquoise
    darkcyan lightseagreen
    Синие
    aliceblue deepskyblue mediumslateblue
    azure dodgerblue midnightblue
    blue indigo navy
    cadetblue lightblue powderblue
    cornflowerblue lightskyblue skyblue
    darkblue lightsteelblue slateblue
    darkslateblue mediumblue steelblue
    Красные
    crimson firebrick maroon
    darkred indianred red

    При задании цвета численным значением используют либо шестнадцатеричное значение, либо тройку вида rgb ( red, green, blue ), где red, green и blue являются числами в диапазоне от 0 до 255, либо процентными величинами, определяющими яркость каждой составляющей цвета в RGB. Значения 255 или 100% указывают, что соответствующая составляющая цвета имеет максимальную яркость; значения 0 или 0% - соответствующая составляющая полностью отсутствует.

    Пример

    H1  {color: #0000FF}
H1  {color: #00F}
H1  {color: rgb(27, 119, 207)}
H1  {color: rgb(50%,75%, 0%)}

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

    При задании единиц длины (length) используют число, за которым без пробелов следует двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.) Обозначения единиц измерения еm и ех относятся к общей высоте шрифта и высоте буквы "х" соответственно. Единица измерения рх соответствует величине пиксела на экране, а in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро соответственно. В дюйме 25,4 миллиметра или 72,27 пункта, а в цицеро - 12 пунктов. Если значение равно нулю, обозначение единицы измерения можно опустить.

    Пример

    P  {font-size: 12pt}
H3 {text-indent: 20em}

    Некоторые значения могут быть заданы в процентах (percent). При этом они вычисляются как процент от другого свойства элемента, обычно его размера.

    Пример

    P {line-height: 120%}

    Для указания местоположения ресурса используется его URL-адрес. В этом случае после ключевого слова url сразу (без пробелов) следует открывающая круглая скобка, а за ней - URL, заключенный, при желании, в одиночные или двойные кавычки, и закрывающая правая скобка.

    Пример

    BODY {
  background: url(http://www.image.ru/image/pic1.gif)
  }

    Наконец, некоторые значения являются последовательностью (list) других величин и описываются как "список" некоторых значений. Список состоит из одного или более допустимых значений, разделяемых запятыми.

    Пример

    P {font-family: Times, serif}

    Все указанные обозначения используются в кратком справочнике по таблицам стилей, приведенном далее.

    Справочник по свойствам таблиц стилей

    Свойство и его описание Браузер
    background: list

    Составное свойство, определяющее привязку фона ( background-attachment ), цвет фона (background-color ), изображение для фона ( background-image ), положение фона и повторение фона ( background-position, background-repeat ); list представляет собой значения этих свойств, указанные в любом порядке

    		 N, IE
    background-attachment: scroll

    Указывает, должно ли фоновое изображение фиксироваться или прокручиваться вместе с документом. Допустимые значения: fixed (фиксированный), scroll (прокручиваемый)

    		 IE
    background-color: transparent

    Устанавливает цвет фона для элемента. Допустимые значения: color, transparent (прозрачный)

    		 N, IE
    background-image: none

    Указывает фоновое изображение элемента. Допустимые значения: url, transparent (прозрачный), none

    		 N, IE
    background-position

    Устанавливает исходное положение фонового изображения элемента; как правило, указываются парные значения для определения координат х, у. Положение по умолчанию 0%,0%. Допустимые значения: length, percent, top, center, bottom, left, right

    		 IE
    background-repeat: repeat

    Определяет, каким образом фоновое изображение заполняет элемент. Допустимые значения: repeat, repeat-x, repeat-y, no-repeat

    		 N, IE
    border: list

    Устанавливает все четыре границы элемента; значением может быть одна или более величин цвета, ширины границы и стиля границы

    		 N, IE
    border-bottom: list

    Устанавливает нижнюю границу элемента; значением может быть одна или более величин цвета, ширина нижней границы и стиль границы

    		 IE
    border-bottom-width: medium

    Устанавливает толщину нижней границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-color: list

    Устанавливает цвет всех четырех границ элемента; значением по умолчанию является цвет элемента

    		 N
    border-left: list

    Устанавливает левую границу элемента; значением может быть одна или более величин цвета, ширина левой границы и стиль границы

    		 IE
    border-left-width: medium

    Устанавливает толщину левой границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-right: list

    Устанавливает правую границу элемента; значением может быть одна или более величин цвета, ширина правой границы и стиль границы

    		 IE
    border-right-width: medium

    Устанавливает толщину правой границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-style: none

    Устанавливает стиль всех четырех границ элемента. Допустимые значения: none (отсутствует), dashed (штриховая), dotted (пунктир), double (двойная), groove (канавка), inset (утопленная), outset (возвышающаяся), ridge (гребень), solid (сплошная)

    		 N, IE
    border-top: list

    Устанавливает верхнюю границу для элемента; значением может быть одна или более величин цвета, ширина верхней границы и стиль границы

    		 IE
    border-top-width: medium

    Устанавливает толщину верхней границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-width: medium

    Устанавливает толщину всех четырех границ элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    clear: none

    Определяет, какие поля элемента не должны примыкать к плавающему элементу. Элемент будет перемещен вниз на такую величину, чтобы это поле оказалось свободным. Допустимые значения: none (нет), both (оба), left (левое), right (правое)

    		 N, IE
    color: color

    Задает цвет элемента

    		 N, IE
    display: block

    Управляет отображением элемента. Допустимые значения: block (блок), inline (внутристрочный), list-item (элемент списка), none (нет)

    		 N
    float: none

    Определяет, является ли элемент плавающим с выравниванием по левому или правому краю, позволяя тексту обтекать его, либо выводится внутристрочно (при указании none). Допустимые значения: left (слева), right (справа), none (нет)

    		 N, IE
    font: list

    Определяет все атрибуты шрифта для элемента; значениями могут быть стиль шрифта, тип шрифта, насыщенность, размер, высота строки и семейство шрифтов в указанном порядке

    		 N, IE
    font-family: список имен шрифтов

    Определяет шрифт, используемый в элементе. Значение может быть как специфическим именем, так и одним из родовых шрифтов serif, sans-serif, cursive, fantasy или monospace

    		 N, IE
    font-size: medium

    Определяет размер шрифта. Допустимые значения: length, percent, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller

    		 N, IE
    font-style: normal

    Определяет начертание шрифта как нормальное или один из видов наклонного. Допустимые значения: italic (курсив), oblique (наклонный), normal (нормальный)

    		 N, IE
    font-variant: normal

    Указывает, должен ли шрифт выводиться маленькими прописными буквами. Допустимые значения: smallcaps, normal

    		 IE
    font-weight: normal

    Определяет насыщенность начертания шрифта. Если используется число, оно должно быть кратным 100 и находиться между 100 и 900; 400 соответствует нормальному шрифту, а 700 равносильно ключевому слову bold (полужирный). Допустимые значения: number, bold, bolder, lighter, normal

    		 N, IE
    height: auto

    Задает высоту элемента. Допустимые значения: length, auto

    		 N
    letter-spacing: normal

    Вставляет дополнительные промежутки между символами текста. Допустимые значения: length, normal

    		 IE
    line-height: normal

    Устанавливает расстояние между базовыми линиями соседних строк. Допустимые значения: length, number, percent, normal

    		 N, IE
    list-style: list

    Определяет стили списка с использованием любых значений для изображения, положения и типа списка - list-style-image, list-style-position, list-style-type

    		 N, IE
    list-style-image: none Определяет изображение, используемое в качестве маркера элемента списка вместо устанавливаемого типом списка list-style-type. Допустимые значения: url, none IE
    list-style-position: outside

    Устанавливает отступ или выступ (по умолчанию) маркера элемента списка относительно его содержания. Допустимые значения: inside (отступ), outside (выступ)
    list-style-type: disk

    Определяет маркер элемента списка для неупорядоченных списков ( circle, disc, square - окружность, круг, квадрат соответственно) или упорядоченных списков (все остальные). Допустимые значения: circle (окружность), square (квадрат), decimal (десятичные цифры), disc (круг), lower-alpha (строчные буквы), lower-roman (строчные римские цифры), none (нет), upper-alpha (прописные буквы), upper-roman (прописные римские цифры)

    		 N, IE
    margin

    Определяет все четыре поля элемента. Допустимые значения: length, percent, auto

    		 IE
    margin-bottom

    Определяет нижнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N IE
    margin-left

    Определяет левое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N, IE
    margin-right

    Определяет правое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N, IE
    margin-top

    Определяет верхнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N, IE
    padding: list

    Задает величину всех четырех отступов вокруг элемента

    		 IE
    padding-bottom

    Указывает величину отступа от элемента снизу; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    padding-left

    Указывает величину отступа от элемента слева; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    padding-right

    Указывает величину отступа от элемента справа; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    padding-top

    Указывает величину отступа от элемента сверху; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    text-align: стиль

    Определяет тип выравнивания для элемента. Значение по умолчанию зависит от элемента. Допустимые значения: center (по центру), justify (по всей доступной области), left (к левому краю), right (к правому краю)

    		 N, IE
    text-decoration: none

    Определяет виды украшения текста; значения можно объединять. Допустимые значения: blink (мерцание), none (нет), line-through (перечеркнутый), overline (надчеркивание), underline (подчеркивание)
    text-indent

    Задает отступ первой строки в элементе; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    text-transform: none

    Преобразует указанным образом текст в элементе. Допустимые значения: capitalize (прописные буквы), lowercase (нижний регистр), none (нет), uppercase (верхний регистр)

    		 N, IE
    vertical-align: позиция

    Выравнивание элемента по вертикали. Значение по умолчанию зависит от элемента. Допустимые значения: percent, baseline (базовая линия), bottom (низ), middle (середина), sub (подстрочный), super (надстрочный), text-bottom (низ текста), text-top (верх текста), top (верх)

    		 N, IE
    word-spacing: normal

    Вставляет дополнительный промежуток между словами. Допустимые значения: length, normal
    white-space: normal

    Определяет, как обрабатываются символы пробелов, табуляции и пустой строки в элементе. Допустимые значения: normal, nowrap (без переноса), pre

    		 N
    width: auto

    Определяет ширину элемента. Допустимые значения: length, percent, auto

    		 N, IE

    Классы стилей

    При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.

    Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P> ), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.

    Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора класса CLASS.

    <HTML>
...
<BODY>
...
<P CLASS="ask">Вопрос журналиста</P>
<P CLASS="answer">Ответ интервьюируемого</P>
...
</BODY>
</HTML>

    В разделе HEAD документа зададим стиль каждого класса.

    P.ask{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12pt;
 text-align: justify;
 color: gray;
 margin-left: 100px;
 font-weight: bold;
}

P.answer{
 font-family: Times, serif;
 font-size: 14pt;
 color: black;
 text-align: justify;
 margin-left: 20px;
}

    Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.

    Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.

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

    Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования. Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты.

    Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое возможно осуществить тремя способами: inline-описание, описание в секции заголовка и использование внешнего файла.

    Самый простой способ - это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута STYLE можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <FONT >.

    Пример

    <P STYLE="color:red; text-align:center;">Этот 
параграф переопределен стилем</P>

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

    И наконец, третий способ, - вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css. В раздел HEAD документа включить строку, аналогичную следующей, где атрибут HREF содержит имя файла со стилями:

    <LINK REL="STYLESHEET" TYPE="text/css" HREF="list.css">

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

    На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.

    Например, пусть во внешнем стилевом файле определено, что текст в теге <P> должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе HEAD документа переопределить тег <P>, указав, что текст должен отображаться шрифтом в 12 пунктов, то он будет выведен именно таким кеглем - стиль, расположенный в заголовке документа, переопределит стиль внешнего файла.

    В целом, браузер расставляет приоритеты таблиц стилей следующим образом:
  • inline-стили (встроенные с помощью атрибута STYLE непосредственно в теги документа) - наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
  • внедренные стили (перечисленные в теге-контейнере <STYLE> в разделе <HEAD > документа) - чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
  • связанные стили (стили, присоединенные к HTML-файлу посредством тега <LINK> ) - наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
    •

    Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.

    Применение таблиц стилей

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

    Во-первых, таблицы стилей позволяют разделить смысловое содержимое документа и его оформление. Согласно идеологии текстовой разметки все оформление рекомендуется вынести во внешний стилевой файл. Основной документ будет содержать только информацию и ссылки на необходимые стили. Такой подход дает возможность конкретному устройству при показе документа задействовать соответствующую таблицу стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае нужно использовать минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае допустимо использовать все возможности шрифтового и цветового оформления.

    Во-вторых, как мы уже убедились, размещение всей стилевой информации в одном внешнем файле позволяет, изменив содержимое только одного (!) стилевого файла, в считанные секунды сменить дизайн целой группы документов. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если все документы группы ссылаются на одну и ту же таблицу стилей.

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

    Задания

  • Создайте HTML-документ, в котором
  • заголовку первого уровня (тег <H1> ) задайте следующий стиль оформления: цвет текста - красный, выравнивание - по центру, семейство шрифта (гарнитура) - Arial, шрифт без засечек ( sans-serif ), размер шрифта - 14 пунктов;
  • заголовку второго уровня задайте выравнивание по правому краю, наклонное начертание, размер шрифта - 12 пунктов.
    •
  • Создайте HTML-документ, предназначенный для размещения интервью. Оформите таблицу стилей в виде отдельного файла и свяжите ее с документом. Переопределите при помощи внедренной таблицы стилей класс ask, сделав цвет текста зеленым.

    • Использование языка сценариев JavaScript

    В сети Интернет размещено огромное количество сценариев обработки HTML-документов, как очень простых, так и достаточно сложных. Среди них значительную часть составляют программы, написанные на языке JavaScript. Цель данного параграфа - рассмотреть некоторых из них и научить вас использовать их на своих HTML-страничках. Подробнее возможности языка подготовки сценариев JavaScript рассматриваются в разделе "Программирование для Интернет".

    Программы на языке программирования JavaScript часто называют сценариями или скриптами. По сути они представляют собой набор инструкций по управлению браузером. Код программы размещается непосредственно в HTML-документе или в виде отдельного файла.

    Скрипты могут находится в любом месте HTML-документа. Однако между строчками кода JavaScript-программы нельзя помещать теги языка HTML. Поэтому чаще всего скрипт размещают внутри раздела <HEAD> документа. Сама JavaScript-программа размещается между тегами <SCRIPT>... </SCRIPT>. Встретив тег <SCRIPT>, браузер построчно анализирует содержимое документа до тех пор, пока не будет достигнут тег </SCRIPT>. После этого проводится проверка скрипта на наличие ошибок и компиляция программы в формат, пригодный для использования в данном браузере. Не все браузеры понимают код JavaScript, поэтому полезно заключать весь код сценария в комментарии ( <!-- и //--> )

    Для размещения текста программы внутри HTML-документа используют конструкцию

    <SCRIPT LANGUAGE="JavaScript">
<!--
 ...
 здесь располагается код программы
 ...
//-->
</SCRIPT>

    Программы на языке JavaScript можно размещать и в виде отдельных текстовых файлов, имеющих расширение .js. Для подключения такого сценария используется параметр SRC тега <SCRIPT >, содержащий абсолютный URL файла, из которого загружается сценарий. Адрес URL может быть и относительным, задавая, например, скрипт, расположенный в том же каталоге, что и текущий HTML-документ:

    <SCRIPT SCR="myScript.js">
<SCRIPT>

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

    Пример

    Рассмотрим HTML-файл со сценарием на языке JavaScript, который отображает текущее время.

    <HTML>
<HEAD>
 <TITLE>Электронные часы</TITLE>
 <SCRIPT LANGUAGE="JavaScript">
<!--
 function clock_form() {
     day=new Date()
     clock_f=day.getHours()+":"+
             day.getMinutes()+":"+
             day.getSeconds()
     document.form.f_clock.value=clock_f
     id=setTimeout("clock_form()",100)
 }
//-->
 </SCRIPT>
</HEAD>
<BODY onLoad="clock_form()">
  <FORM NAME="form">
  Московское время: 
  <INPUT NAME="f_clock" SIZE="8">
  </FORM>
</BODY>
</HTML>

    В этом примере для запуска сценария используется конструкция onLoad = "clock_form()", размещенная в качестве атрибута тега <BODY>. Для вывода показаний часов используется элемент <FORM >>... </FORM >, размером в 8 символов.

    Пример

    Следующий скрипт создает "бегущую строку" в окне браузера. Для изменения скорости вывода информации используется переменная speed, текст строки задается в переменной line.

    <HTML>
<HEAD>
 <TITLE>Бегущая строка</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
 var line="Центр Компьютерных Технологий";
 var speed=200;
 var i=0;
 function m_line() {
    if(i++<line.length) {
       document.form.ctc.value=line.substring(0,i);
    }
    else{
       document.form.ctc.value=" ";
       i=0;
    }
    setTimeout('m_line()',speed);
 }
//-->
</SCRIPT>
<BODY onload="m_line()">
 <CENTER>
 <FORM NAME="form">
 <INPUT TYPE="text" SIZE="30" NAME="ctc">
 </FORM>
 </CENTER>
</BODY>
</HTML>

    Следующий файл содержит скрипт "Бегущая строка".

    Задания

  • Поместите программу "Электронные часы" на вашу домашнюю страницу.
  • Поместите скрипт, выводящий бегущую строку в файл с именем line.js. Подключите скрипт в вашей странице. Измените скрипт так, чтобы выводилась фраза "Добро пожаловать на мою домашнюю страничку!".
    •

    Рекомендации по созданию HTML-документов

    Несмотря на то, что Web-технологии возникли сравнительно недавно, в мире Интернет успели сформироваться правила, которые диктуют, что нужно и что нельзя делать, чтобы HTML-документы корректно воспринимались пользователем. Этот параграф содержит несколько советов по созданию и оформлению HTML-документов.

    Ошибки русского языка

    При написание Web-материала (впрочем, не только Web) придерживайтесь орфографических правил и правил пунктуации русского языка.

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

    При оформлении текста полезно придерживаться следующих типографских традиций набора.

    Расстановка пробелов

    В русскоязычном наборе пробел обязательно ставится:

  • после, а не до запятой, точки, точки с запятой, двоеточия, вопросительного или восклицательного знака (и их сочетаний), многоточия в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;
  • до, а не после, открывающей скобки, открывающей кавычки и многоточия в начале предложения;
  • и до, и после тире.
    •

    Никогда не ставится пробел между скобкой или кавычкой и каким-либо другим знаком препинания, кроме тире.

    Неразрывные пробелы

    Неразрывный пробел, обозначаемый в языке HTML последовательностью символов " nbsp; ", в русском языке ставится:

  • между двумя инициалами и между инициалами и фамилией: И. O. Фамилия;
  • между знаками номера и параграфа и относящимися к ним числами;
  • внутри сокращений "и т. д.", "и т. п.", "т. е." и другими;
  • между внутритекстовыми пунктами, такими как "а)", "б)" или "1.", "2.", и следующим за ними текстом;
  • между числами и относящимися к ним единицами измерения: 200 кг; это же относится и к указаниям дат: XVIII в.;
  • перед тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон - неразрывным слева и обычным справа);
  • между классами многозначных чисел, начиная с пятизначных: 1 302 569;
  • перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений;
  • после однобуквенных предлогов и союзов.
    •

    Текстовые выделения

    Пользуясь курсивом или полужирным выделением в тексте, соблюдайте следующие правила:

  • кавычки должны быть того же начертания, что и заключенный в них текст; окружающие выделенный фрагмент скобки, наоборот, должны соответствовать начертанию основного текста, а в месте стыка прямого и курсива скобки всегда остаются прямыми;
  • знаки препинания, следующие за выделенным фрагментом, должны быть набраны основным начертанием.
    •

    Заголовки страниц

    Не забывайте для каждого HTML-документа включать в контейнер <HEAD>... </HEAD> заголовок документа, заключенный между тегами <TITLE> и </TITLE>.

    Именно этот тег содержит необходимые пользователю минимальные сведения о документе. Когда пользователь сохранит адрес вашей странички в закладках браузера, именно информация из заголовка <TITLE>... </TITLE> послужит ему в дальнейшем ориентиром для загрузки вашей странички.

    Поиск ваших документов в сети

    Используйте атрибуты DESCRIPTION и KEYWORDS тега <META> для задания описания и ключевых слов документа.

    Важным является правильная организация поиска вашего материала на поисковых сайтах. Автоматические сборщики информации при поиске документов опираются на метаинформацию, расположенную в разделе HEAD документа и описываемую при помощи тега <META>. Эта служебная информация не отображается в окне браузера.

    Пример

    <META NAME="description" 
 CONTENT="Рекомендации по созданию домашних страничек">
<META NAME="keywords" CONTENT="язык HTML, HTML, тег,
 метаинформация, русский язык, типографские правила, 
 title, meta, !DOCTYPE, тестирование, браузеры">

    Проверка ссылок

    Web-автор обязан обеспечить правильную работу всех ссылок в пределах своего материала: локальных (в пределах вашего материала) и внешних (ссылки на "чужие" сайты и странички).

    Грубейшей ошибкой в сети считается неправильная работа ссылок. Ваши странички не должны содержать "ссылок в никуда" или ссылаться на некорректный материал.

    Условия просмотра

    Проблема подачи информации в Web-дизайне связана прежде всего с тем, что автор не может предугадать, в каких условиях пользователь будет просматривать Web-материал. Читатели вашего документа могут использовать самые разные браузеры, устанавливать собственные настройки для просмотра информации (цвет фона и т. д.), у них могут быть проблемы с передачей цветов из-за особенностей видеокарты.

    Профессиональный Web-дизайнер старается по мере сил учитывать возможные варианты просмотра и создавать странички максимально подходящие для разных условий.

    Старайтесь, чтобы ваши странички смотрелись правильно по крайней мере в двух браузерах - Netscape и Explorer.

    Программисты обеих компаний вводят в свои программы особенности, не признаваемые другими браузерами. Поэтому когда вы посещаете сайт, разработанный "специально для Netscape", пользуясь другим браузером, то видите его страницы не совсем в том виде, на который рассчитывали их создатели. Документация по сетевым технологиям зачастую содержит комментарии типа "в Netscape не работает". Изворотливые мастера отыскивают способы обмануть браузеры, заставляя показывать информацию одинаково.

    Следует учитывать различие в поведении этих браузеров при обнаружении некорректного кода. Netscape неправильный код не обрабатывает и, соответственно, показывает страничку как есть, т. е. с ошибками. Explorer поступает по-другому - при обработке неправильного кода он пытается предугадать недостающие теги или пропущенные параметры.

    Например, в большинстве случаев незакрытый парный тег будет обработан браузером Explorer так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше, конечно, учиться писать корректный код.

    Если при подготовке HTML-документа соблюдать следующие правила, то количество возможных ошибок значительно снизится.

  • Обязательно закрывайте все теги (кроме одиночных).
  • Внимательно следите за вложенностью тегов. Не допускайте ситуации, когда внешний тег закрывается раньше, чем внутренний:
    <B><I>правильно</I></B>
<B><I>неправильно</B></I>
  • Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. Можно заключать в кавычки все параметры, но это не является обязательным.
  • При использовании формы на странице внимательно следите за тем, чтобы все элементы, составляющие форму ( <INPUT>, <SELECT>, <TEXTAREA>, и т. д.), находились между тегами <FORM> и </FORM>.
    •

    Попробуйте отключить у браузера поддержку графики, листов стилей, JavaScript, изменить различные установки странички - цвет фона, цвет ссылок, шрифты и др.

    В теге <BODY> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона, что приведет к "исчезновению" части текста.

    Задание

  • Примените указанные правила к оформлению вашей домашней странички.
  • Включите при помощи тега META в документ его описание и набор ключевых слов.
  • Убедитесь в том, что ваш документ корректно отображается и браузером Netscape, и браузером Internet Explorer.
    •
    Страницы:

    Динамический HTML (Dynamic HTML, или DHTML) - это развитие традиционного языка HTML, позволяющее создавать интерактивные, "живые" HTML-документы. Стремлению сделать Web-страницу динамичной и интерактивной, то есть легко изменяющейся, управляемой пользователем, столько же лет, сколько и самому WWW.

    Один из методов реализации идеи динамичности заставил разработчиков "дополнить" HTML и встроить в браузеры средства обработки специальных языков программирования, таких как JavaScript, JScript и VBScript. Сами сценарии (скрипты), т. е. программы, написанные на одном из этих языков, можно размещать вместе с основным содержанием и разметкой HTML-документа. Программы на этих языках перемещаются по сети Интернет в виде исходных текстов, а компилируются и выполняются после загрузки в конкретный браузер.

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

    С противоположного фланга на HTML наступает, принимая на себя часть его функций и снимая тем самым часть его ограничений, язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Главная цель CSS (эту технологию часто называют каскадные таблицы стилей ) - отделить структуру документа от его оформления и позволить автору или пользователю самому решать, как должен выглядеть тот или иной элемент содержания HTML-страницы. Другим достоинством таблиц (иногда называемых листами) стилей является возможность обеспечить единый стиль оформления некоторого набора HTML-документов, например курсовых или дипломных работ.

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

    К сожалению, два варианта реализации динамического HTML, предлагаемые компаниями Netscape Communications Corporation и Microsoft - разработчиками двух наиболее популярных браузеров, имеют между собой очень мало общего, особенно если судить по документации самих этих компаний. Различиям между этими реализациями и рекомендациям по подготовке HTML-страниц, совместимых с разными браузерами, посвящено много статей в Интернет. В этой главе рассматриваются образцы применения DHTML, одинаково отображаемые этими браузерами, и даются советы, как достичь такого "взаимопонимания".

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

    На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств, значения которых определяют его вид при выводе браузером. Так, например, у большинства тегов ( <P>, <TD>, и т. д.) есть свойство COLOR, значение которого определяет цвет, используемый для отображения содержимого тега.

    Таблица (лист) стилей CSS - набор правил отображения, применяемых в документе, к которому присоединяется соответствующая таблица стилей. Все свойства, использующиеся в таблицах стилей, условно можно разделить на несколько групп:

  • управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..);
  • управляющие форматированием абзаца (отступ красной строки, выравнивание, интерлиньяж, расстояние между словами,..);
  • управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока в документе, видимость блока,..);
  • другие (цвет ссылок, изменение внешнего вида курсора,..).
    •

    Использование стилей

    Одним из способов подключения стиля к HTML-странице (остальные способы рассматриваются в параграфе "Каскадные таблицы стилей") является использование в заголовке документа контейнера <STYLE>:

    <HEAD>
...
<STYLE TYPE="text/css">
 ...
 описание стилей
 ...
</STYLE>
...
</HEAD>

    Включение в этот контейнер атрибута TYPE="text/css" указывает браузеру, что в нем содержится описание стилей. В настоящее время атрибут TYPE может принимать только указанное значение, однако если он будет опущен, то некоторые браузеры могут проигнорировать всю таблицу стилей.

    Само описание стиля включает селектор тега, указывающий имя тега, на который распространяется правило стиля, и фигурные скобки, содержащие одну или более пар объявлений вида "свойство_стиля:значение", разделенных точкой с запятой:

    селектор_тега{
 свойство_стиля1:значение1;
 свойство_стиля2:значение2;
 свойство_стиля3:значение3;
}

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

    Пример

    <HTML>
<HEAD>
<TITLE>Первый пример использования стилей</TITLE>
<STYLE TYPE="text/css">
<!--
 H1 {text-align: center}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок</H1>
<P>
Какой-то текст
</BODY>
</HTML>

    В данном примере в секции заголовка документа <HEAD>... </HEAD> задан стиль (правило), согласно которому браузер должен выравнивать по центру страницы содержимое контейнера <H1>... </H1>: свойству text-align присвоено значение center.

    Обратите внимание на использование тегов комментария (<! - и - >). Все содержимое контейнера <STYLE > находится между ними. Это позволяет скрыть информацию о стиле от браузеров, которые не распознают тег <STYLE > (в противном случае они могут принять правила за текст и вывести их на экран).

    В таблицах стилей также можно использовать комментарии, позволяющие описать то или иное свойство: текст, расположенный между символами /* и */ не обрабатывается браузером и не рассматривается, как элемент таблицы стилей (не путайте теги комментария и комментарии таблиц стилей, они имеют разный синтаксис и разное назначение).

    Пример

    Рассмотрим пример оформления текста. Установим белый цвет фона документа (свойство background-color ), затем задействуем свойства управления шрифтом: color (цвет), font-family (гарнитура шрифта) и font-size (размер шрифта), например,

  • цвет - серый;
  • семейство шрифта (гарнитура) - Times, шрифт с засечками;
  • размер шрифта - 14 пунктов.
    •

    Добавим свойства, связанные с форматированием абзаца: text-indent (отступ красной строки), text-align (выравнивание), padding-left (отступ слева), например,

  • дополнительный отступ красной строки - 10pt;
  • выравнивание - по ширине документа;
  • отступ от левого края - 20pt.
    •

    Установим темно-красный цвет (свойство color) заголовков с первого по третий уровень.

    Документ примет вид:

    <HTML>
<HEAD>
<TITLE>Второй пример использования стилей</TITLE>
<STYLE TYPE="text/css">
<!--
 BODY {background-color: white}

 H1, H2, H3 {color: red}

 P    {
 /* шрифт */
       color: gray;
       font-family: Times, serif;
       font-size: 14pt;
 /* абзац */
       text-indent: 10pt;
       text-align: justify;
       padding-left: 20pt;
      }
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

    Задание значений

    Для задания значений в правилах таблиц стилей важно использовать корректный синтаксис.

    Задание цвета (color), также как и в тегах HTML, возможно двумя способами: наименованием и численным значением. Спецификация CSS1 ("Спецификации каскадных таблиц стилей, уровень 1"), разработанная Консорциумом World Wide Web (W3C), перечисляет только 16 наименований цветов, которые можно использовать в таблицах стилей:

    aqua gray navy silver
    black green olive teal
    blue lime purple white
    fuchsia maroon red yellow

    Другие наименования из полного списка цветов, приведенного ниже, также могут поддерживаться некоторыми браузерами

    Web-цвета по оттенкам
    black white
    Нейтральные/холодные
    darkgray ghostwhite silver
    darkslategray gray slategray
    dimgray lightgrey snow
    gainsboro lightslategray
    Нейтральные/теплые
    antiquewhite ivory papayawhip
    cornsilk linen seashell
    floralwhite oldlace
    Коричневые/бронзовые
    beige chocolate rosybrown
    bisque khaki sienna
    blanchedalmond moccasin tan
    brown navajowhite wheat
    burlywood peru
    Розовые
    coral lightcoral mistyrose
    darksalmon lightpink pink
    deeppink lightsalmon salmon
    hotpink magenta
    Оранжевые
    darkorange orange orangered, peachpuff
    Желтые
    darkgoldenrod lemonchiffon palegoldenrod
    gold lightyellow yellow
    goldenrod lightgoldenrodyellow
    Зеленые
    aquamarine greenyellow olive
    chartreuse honeydew olivedrab
    darkgreen lawngreen palegreen
    darkkhaki lime seagreen
    darkolivegreen limegreen springgreen
    darkseagreen mediumseagreen yellowgreen
    forestgreen mediumspringgreen
    green mintcream
    Фиолетовые
    blueviolet lavenderblush plum
    darkmagenta mediumorchid purple
    darkorchid mediumpurple thistle
    darkviolet mediumvioletred violet
    fuchsia orchid
    lavender palevioletred
    Сине-зеленые
    aqua darkturquoise mediumauqamarine
    cyan lightcyan mediumturquoise
    darkcyan lightseagreen
    Синие
    aliceblue deepskyblue mediumslateblue
    azure dodgerblue midnightblue
    blue indigo navy
    cadetblue lightblue powderblue
    cornflowerblue lightskyblue skyblue
    darkblue lightsteelblue slateblue
    darkslateblue mediumblue steelblue
    Красные
    crimson firebrick maroon
    darkred indianred red

    При задании цвета численным значением используют либо шестнадцатеричное значение, либо тройку вида rgb ( red, green, blue ), где red, green и blue являются числами в диапазоне от 0 до 255, либо процентными величинами, определяющими яркость каждой составляющей цвета в RGB. Значения 255 или 100% указывают, что соответствующая составляющая цвета имеет максимальную яркость; значения 0 или 0% - соответствующая составляющая полностью отсутствует.

    Пример

    H1  {color: #0000FF}
H1  {color: #00F}
H1  {color: rgb(27, 119, 207)}
H1  {color: rgb(50%,75%, 0%)}

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

    При задании единиц длины (length) используют число, за которым без пробелов следует двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.) Обозначения единиц измерения еm и ех относятся к общей высоте шрифта и высоте буквы "х" соответственно. Единица измерения рх соответствует величине пиксела на экране, а in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро соответственно. В дюйме 25,4 миллиметра или 72,27 пункта, а в цицеро - 12 пунктов. Если значение равно нулю, обозначение единицы измерения можно опустить.

    Пример

    P  {font-size: 12pt}
H3 {text-indent: 20em}

    Некоторые значения могут быть заданы в процентах (percent). При этом они вычисляются как процент от другого свойства элемента, обычно его размера.

    Пример

    P {line-height: 120%}

    Для указания местоположения ресурса используется его URL-адрес. В этом случае после ключевого слова url сразу (без пробелов) следует открывающая круглая скобка, а за ней - URL, заключенный, при желании, в одиночные или двойные кавычки, и закрывающая правая скобка.

    Пример

    BODY {
  background: url(http://www.image.ru/image/pic1.gif)
  }

    Наконец, некоторые значения являются последовательностью (list) других величин и описываются как "список" некоторых значений. Список состоит из одного или более допустимых значений, разделяемых запятыми.

    Пример

    P {font-family: Times, serif}

    Все указанные обозначения используются в кратком справочнике по таблицам стилей, приведенном далее.

    Справочник по свойствам таблиц стилей

    Свойство и его описание Браузер
    background: list

    Составное свойство, определяющее привязку фона ( background-attachment ), цвет фона (background-color ), изображение для фона ( background-image ), положение фона и повторение фона ( background-position, background-repeat ); list представляет собой значения этих свойств, указанные в любом порядке

    		 N, IE
    background-attachment: scroll

    Указывает, должно ли фоновое изображение фиксироваться или прокручиваться вместе с документом. Допустимые значения: fixed (фиксированный), scroll (прокручиваемый)

    		 IE
    background-color: transparent

    Устанавливает цвет фона для элемента. Допустимые значения: color, transparent (прозрачный)

    		 N, IE
    background-image: none

    Указывает фоновое изображение элемента. Допустимые значения: url, transparent (прозрачный), none

    		 N, IE
    background-position

    Устанавливает исходное положение фонового изображения элемента; как правило, указываются парные значения для определения координат х, у. Положение по умолчанию 0%,0%. Допустимые значения: length, percent, top, center, bottom, left, right

    		 IE
    background-repeat: repeat

    Определяет, каким образом фоновое изображение заполняет элемент. Допустимые значения: repeat, repeat-x, repeat-y, no-repeat

    		 N, IE
    border: list

    Устанавливает все четыре границы элемента; значением может быть одна или более величин цвета, ширины границы и стиля границы

    		 N, IE
    border-bottom: list

    Устанавливает нижнюю границу элемента; значением может быть одна или более величин цвета, ширина нижней границы и стиль границы

    		 IE
    border-bottom-width: medium

    Устанавливает толщину нижней границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-color: list

    Устанавливает цвет всех четырех границ элемента; значением по умолчанию является цвет элемента

    		 N
    border-left: list

    Устанавливает левую границу элемента; значением может быть одна или более величин цвета, ширина левой границы и стиль границы

    		 IE
    border-left-width: medium

    Устанавливает толщину левой границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-right: list

    Устанавливает правую границу элемента; значением может быть одна или более величин цвета, ширина правой границы и стиль границы

    		 IE
    border-right-width: medium

    Устанавливает толщину правой границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-style: none

    Устанавливает стиль всех четырех границ элемента. Допустимые значения: none (отсутствует), dashed (штриховая), dotted (пунктир), double (двойная), groove (канавка), inset (утопленная), outset (возвышающаяся), ridge (гребень), solid (сплошная)

    		 N, IE
    border-top: list

    Устанавливает верхнюю границу для элемента; значением может быть одна или более величин цвета, ширина верхней границы и стиль границы

    		 IE
    border-top-width: medium

    Устанавливает толщину верхней границы элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    border-width: medium

    Устанавливает толщину всех четырех границ элемента. Допустимые значения: length, medium, thin, thick

    		 N, IE
    clear: none

    Определяет, какие поля элемента не должны примыкать к плавающему элементу. Элемент будет перемещен вниз на такую величину, чтобы это поле оказалось свободным. Допустимые значения: none (нет), both (оба), left (левое), right (правое)

    		 N, IE
    color: color

    Задает цвет элемента

    		 N, IE
    display: block

    Управляет отображением элемента. Допустимые значения: block (блок), inline (внутристрочный), list-item (элемент списка), none (нет)

    		 N
    float: none

    Определяет, является ли элемент плавающим с выравниванием по левому или правому краю, позволяя тексту обтекать его, либо выводится внутристрочно (при указании none). Допустимые значения: left (слева), right (справа), none (нет)

    		 N, IE
    font: list

    Определяет все атрибуты шрифта для элемента; значениями могут быть стиль шрифта, тип шрифта, насыщенность, размер, высота строки и семейство шрифтов в указанном порядке

    		 N, IE
    font-family: список имен шрифтов

    Определяет шрифт, используемый в элементе. Значение может быть как специфическим именем, так и одним из родовых шрифтов serif, sans-serif, cursive, fantasy или monospace

    		 N, IE
    font-size: medium

    Определяет размер шрифта. Допустимые значения: length, percent, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller

    		 N, IE
    font-style: normal

    Определяет начертание шрифта как нормальное или один из видов наклонного. Допустимые значения: italic (курсив), oblique (наклонный), normal (нормальный)

    		 N, IE
    font-variant: normal

    Указывает, должен ли шрифт выводиться маленькими прописными буквами. Допустимые значения: smallcaps, normal

    		 IE
    font-weight: normal

    Определяет насыщенность начертания шрифта. Если используется число, оно должно быть кратным 100 и находиться между 100 и 900; 400 соответствует нормальному шрифту, а 700 равносильно ключевому слову bold (полужирный). Допустимые значения: number, bold, bolder, lighter, normal

    		 N, IE
    height: auto

    Задает высоту элемента. Допустимые значения: length, auto

    		 N
    letter-spacing: normal

    Вставляет дополнительные промежутки между символами текста. Допустимые значения: length, normal

    		 IE
    line-height: normal

    Устанавливает расстояние между базовыми линиями соседних строк. Допустимые значения: length, number, percent, normal

    		 N, IE
    list-style: list

    Определяет стили списка с использованием любых значений для изображения, положения и типа списка - list-style-image, list-style-position, list-style-type

    		 N, IE
    list-style-image: none Определяет изображение, используемое в качестве маркера элемента списка вместо устанавливаемого типом списка list-style-type. Допустимые значения: url, none IE
    list-style-position: outside

    Устанавливает отступ или выступ (по умолчанию) маркера элемента списка относительно его содержания. Допустимые значения: inside (отступ), outside (выступ)
    list-style-type: disk

    Определяет маркер элемента списка для неупорядоченных списков ( circle, disc, square - окружность, круг, квадрат соответственно) или упорядоченных списков (все остальные). Допустимые значения: circle (окружность), square (квадрат), decimal (десятичные цифры), disc (круг), lower-alpha (строчные буквы), lower-roman (строчные римские цифры), none (нет), upper-alpha (прописные буквы), upper-roman (прописные римские цифры)

    		 N, IE
    margin

    Определяет все четыре поля элемента. Допустимые значения: length, percent, auto

    		 IE
    margin-bottom

    Определяет нижнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N IE
    margin-left

    Определяет левое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N, IE
    margin-right

    Определяет правое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N, IE
    margin-top

    Определяет верхнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto

    		 N, IE
    padding: list

    Задает величину всех четырех отступов вокруг элемента

    		 IE
    padding-bottom

    Указывает величину отступа от элемента снизу; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    padding-left

    Указывает величину отступа от элемента слева; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    padding-right

    Указывает величину отступа от элемента справа; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    padding-top

    Указывает величину отступа от элемента сверху; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    text-align: стиль

    Определяет тип выравнивания для элемента. Значение по умолчанию зависит от элемента. Допустимые значения: center (по центру), justify (по всей доступной области), left (к левому краю), right (к правому краю)

    		 N, IE
    text-decoration: none

    Определяет виды украшения текста; значения можно объединять. Допустимые значения: blink (мерцание), none (нет), line-through (перечеркнутый), overline (надчеркивание), underline (подчеркивание)
    text-indent

    Задает отступ первой строки в элементе; значением по умолчанию служит 0. Допустимые значения: length, percent

    		 N, IE
    text-transform: none

    Преобразует указанным образом текст в элементе. Допустимые значения: capitalize (прописные буквы), lowercase (нижний регистр), none (нет), uppercase (верхний регистр)

    		 N, IE
    vertical-align: позиция

    Выравнивание элемента по вертикали. Значение по умолчанию зависит от элемента. Допустимые значения: percent, baseline (базовая линия), bottom (низ), middle (середина), sub (подстрочный), super (надстрочный), text-bottom (низ текста), text-top (верх текста), top (верх)

    		 N, IE
    word-spacing: normal

    Вставляет дополнительный промежуток между словами. Допустимые значения: length, normal
    white-space: normal

    Определяет, как обрабатываются символы пробелов, табуляции и пустой строки в элементе. Допустимые значения: normal, nowrap (без переноса), pre

    		 N
    width: auto

    Определяет ширину элемента. Допустимые значения: length, percent, auto

    		 N, IE

    Классы стилей

    При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.

    Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P> ), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.

    Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора класса CLASS.

    <HTML>
...
<BODY>
...
<P CLASS="ask">Вопрос журналиста</P>
<P CLASS="answer">Ответ интервьюируемого</P>
...
</BODY>
</HTML>

    В разделе HEAD документа зададим стиль каждого класса.

    P.ask{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12pt;
 text-align: justify;
 color: gray;
 margin-left: 100px;
 font-weight: bold;
}

P.answer{
 font-family: Times, serif;
 font-size: 14pt;
 color: black;
 text-align: justify;
 margin-left: 20px;
}

    Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.

    Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.

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

    Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования. Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты.

    Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое возможно осуществить тремя способами: inline-описание, описание в секции заголовка и использование внешнего файла.

    Самый простой способ - это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута STYLE можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <FONT >.

    Пример

    <P STYLE="color:red; text-align:center;">Этот 
параграф переопределен стилем</P>

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

    И наконец, третий способ, - вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css. В раздел HEAD документа включить строку, аналогичную следующей, где атрибут HREF содержит имя файла со стилями:

    <LINK REL="STYLESHEET" TYPE="text/css" HREF="list.css">

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

    На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.

    Например, пусть во внешнем стилевом файле определено, что текст в теге <P> должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе HEAD документа переопределить тег <P>, указав, что текст должен отображаться шрифтом в 12 пунктов, то он будет выведен именно таким кеглем - стиль, расположенный в заголовке документа, переопределит стиль внешнего файла.

    В целом, браузер расставляет приоритеты таблиц стилей следующим образом:
  • inline-стили (встроенные с помощью атрибута STYLE непосредственно в теги документа) - наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
  • внедренные стили (перечисленные в теге-контейнере <STYLE> в разделе <HEAD > документа) - чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
  • связанные стили (стили, присоединенные к HTML-файлу посредством тега <LINK> ) - наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
    •

    Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.

    Применение таблиц стилей

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

    Во-первых, таблицы стилей позволяют разделить смысловое содержимое документа и его оформление. Согласно идеологии текстовой разметки все оформление рекомендуется вынести во внешний стилевой файл. Основной документ будет содержать только информацию и ссылки на необходимые стили. Такой подход дает возможность конкретному устройству при показе документа задействовать соответствующую таблицу стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае нужно использовать минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае допустимо использовать все возможности шрифтового и цветового оформления.

    Во-вторых, как мы уже убедились, размещение всей стилевой информации в одном внешнем файле позволяет, изменив содержимое только одного (!) стилевого файла, в считанные секунды сменить дизайн целой группы документов. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если все документы группы ссылаются на одну и ту же таблицу стилей.

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

    Задания

  • Создайте HTML-документ, в котором
  • заголовку первого уровня (тег <H1> ) задайте следующий стиль оформления: цвет текста - красный, выравнивание - по центру, семейство шрифта (гарнитура) - Arial, шрифт без засечек ( sans-serif ), размер шрифта - 14 пунктов;
  • заголовку второго уровня задайте выравнивание по правому краю, наклонное начертание, размер шрифта - 12 пунктов.
    •
  • Создайте HTML-документ, предназначенный для размещения интервью. Оформите таблицу стилей в виде отдельного файла и свяжите ее с документом. Переопределите при помощи внедренной таблицы стилей класс ask, сделав цвет текста зеленым.

    • Использование языка сценариев JavaScript

    В сети Интернет размещено огромное количество сценариев обработки HTML-документов, как очень простых, так и достаточно сложных. Среди них значительную часть составляют программы, написанные на языке JavaScript. Цель данного параграфа - рассмотреть некоторых из них и научить вас использовать их на своих HTML-страничках. Подробнее возможности языка подготовки сценариев JavaScript рассматриваются в разделе "Программирование для Интернет".

    Программы на языке программирования JavaScript часто называют сценариями или скриптами. По сути они представляют собой набор инструкций по управлению браузером. Код программы размещается непосредственно в HTML-документе или в виде отдельного файла.

    Скрипты могут находится в любом месте HTML-документа. Однако между строчками кода JavaScript-программы нельзя помещать теги языка HTML. Поэтому чаще всего скрипт размещают внутри раздела <HEAD> документа. Сама JavaScript-программа размещается между тегами <SCRIPT>... </SCRIPT>. Встретив тег <SCRIPT>, браузер построчно анализирует содержимое документа до тех пор, пока не будет достигнут тег </SCRIPT>. После этого проводится проверка скрипта на наличие ошибок и компиляция программы в формат, пригодный для использования в данном браузере. Не все браузеры понимают код JavaScript, поэтому полезно заключать весь код сценария в комментарии ( <!-- и //--> )

    Для размещения текста программы внутри HTML-документа используют конструкцию

    <SCRIPT LANGUAGE="JavaScript">
<!--
 ...
 здесь располагается код программы
 ...
//-->
</SCRIPT>

    Программы на языке JavaScript можно размещать и в виде отдельных текстовых файлов, имеющих расширение .js. Для подключения такого сценария используется параметр SRC тега <SCRIPT >, содержащий абсолютный URL файла, из которого загружается сценарий. Адрес URL может быть и относительным, задавая, например, скрипт, расположенный в том же каталоге, что и текущий HTML-документ:

    <SCRIPT SCR="myScript.js">
<SCRIPT>

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

    Пример

    Рассмотрим HTML-файл со сценарием на языке JavaScript, который отображает текущее время.

    <HTML>
<HEAD>
 <TITLE>Электронные часы</TITLE>
 <SCRIPT LANGUAGE="JavaScript">
<!--
 function clock_form() {
     day=new Date()
     clock_f=day.getHours()+":"+
             day.getMinutes()+":"+
             day.getSeconds()
     document.form.f_clock.value=clock_f
     id=setTimeout("clock_form()",100)
 }
//-->
 </SCRIPT>
</HEAD>
<BODY onLoad="clock_form()">
  <FORM NAME="form">
  Московское время: 
  <INPUT NAME="f_clock" SIZE="8">
  </FORM>
</BODY>
</HTML>

    В этом примере для запуска сценария используется конструкция onLoad = "clock_form()", размещенная в качестве атрибута тега <BODY>. Для вывода показаний часов используется элемент <FORM >>... </FORM >, размером в 8 символов.

    Пример

    Следующий скрипт создает "бегущую строку" в окне браузера. Для изменения скорости вывода информации используется переменная speed, текст строки задается в переменной line.

    <HTML>
<HEAD>
 <TITLE>Бегущая строка</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
 var line="Центр Компьютерных Технологий";
 var speed=200;
 var i=0;
 function m_line() {
    if(i++<line.length) {
       document.form.ctc.value=line.substring(0,i);
    }
    else{
       document.form.ctc.value=" ";
       i=0;
    }
    setTimeout('m_line()',speed);
 }
//-->
</SCRIPT>
<BODY onload="m_line()">
 <CENTER>
 <FORM NAME="form">
 <INPUT TYPE="text" SIZE="30" NAME="ctc">
 </FORM>
 </CENTER>
</BODY>
</HTML>

    Следующий файл содержит скрипт "Бегущая строка".

    Задания

  • Поместите программу "Электронные часы" на вашу домашнюю страницу.
  • Поместите скрипт, выводящий бегущую строку в файл с именем line.js. Подключите скрипт в вашей странице. Измените скрипт так, чтобы выводилась фраза "Добро пожаловать на мою домашнюю страничку!".
    •

    Рекомендации по созданию HTML-документов

    Несмотря на то, что Web-технологии возникли сравнительно недавно, в мире Интернет успели сформироваться правила, которые диктуют, что нужно и что нельзя делать, чтобы HTML-документы корректно воспринимались пользователем. Этот параграф содержит несколько советов по созданию и оформлению HTML-документов.

    Ошибки русского языка

    При написание Web-материала (впрочем, не только Web) придерживайтесь орфографических правил и правил пунктуации русского языка.

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

    При оформлении текста полезно придерживаться следующих типографских традиций набора.

    Расстановка пробелов

    В русскоязычном наборе пробел обязательно ставится:

  • после, а не до запятой, точки, точки с запятой, двоеточия, вопросительного или восклицательного знака (и их сочетаний), многоточия в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;
  • до, а не после, открывающей скобки, открывающей кавычки и многоточия в начале предложения;
  • и до, и после тире.
    •

    Никогда не ставится пробел между скобкой или кавычкой и каким-либо другим знаком препинания, кроме тире.

    Неразрывные пробелы

    Неразрывный пробел, обозначаемый в языке HTML последовательностью символов " nbsp; ", в русском языке ставится:

  • между двумя инициалами и между инициалами и фамилией: И. O. Фамилия;
  • между знаками номера и параграфа и относящимися к ним числами;
  • внутри сокращений "и т. д.", "и т. п.", "т. е." и другими;
  • между внутритекстовыми пунктами, такими как "а)", "б)" или "1.", "2.", и следующим за ними текстом;
  • между числами и относящимися к ним единицами измерения: 200 кг; это же относится и к указаниям дат: XVIII в.;
  • перед тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон - неразрывным слева и обычным справа);
  • между классами многозначных чисел, начиная с пятизначных: 1 302 569;
  • перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений;
  • после однобуквенных предлогов и союзов.
    •

    Текстовые выделения

    Пользуясь курсивом или полужирным выделением в тексте, соблюдайте следующие правила:

  • кавычки должны быть того же начертания, что и заключенный в них текст; окружающие выделенный фрагмент скобки, наоборот, должны соответствовать начертанию основного текста, а в месте стыка прямого и курсива скобки всегда остаются прямыми;
  • знаки препинания, следующие за выделенным фрагментом, должны быть набраны основным начертанием.
    •

    Заголовки страниц

    Не забывайте для каждого HTML-документа включать в контейнер <HEAD>... </HEAD> заголовок документа, заключенный между тегами <TITLE> и </TITLE>.

    Именно этот тег содержит необходимые пользователю минимальные сведения о документе. Когда пользователь сохранит адрес вашей странички в закладках браузера, именно информация из заголовка <TITLE>... </TITLE> послужит ему в дальнейшем ориентиром для загрузки вашей странички.

    Поиск ваших документов в сети

    Используйте атрибуты DESCRIPTION и KEYWORDS тега <META> для задания описания и ключевых слов документа.

    Важным является правильная организация поиска вашего материала на поисковых сайтах. Автоматические сборщики информации при поиске документов опираются на метаинформацию, расположенную в разделе HEAD документа и описываемую при помощи тега <META>. Эта служебная информация не отображается в окне браузера.

    Пример

    <META NAME="description" 
 CONTENT="Рекомендации по созданию домашних страничек">
<META NAME="keywords" CONTENT="язык HTML, HTML, тег,
 метаинформация, русский язык, типографские правила, 
 title, meta, !DOCTYPE, тестирование, браузеры">

    Проверка ссылок

    Web-автор обязан обеспечить правильную работу всех ссылок в пределах своего материала: локальных (в пределах вашего материала) и внешних (ссылки на "чужие" сайты и странички).

    Грубейшей ошибкой в сети считается неправильная работа ссылок. Ваши странички не должны содержать "ссылок в никуда" или ссылаться на некорректный материал.

    Условия просмотра

    Проблема подачи информации в Web-дизайне связана прежде всего с тем, что автор не может предугадать, в каких условиях пользователь будет просматривать Web-материал. Читатели вашего документа могут использовать самые разные браузеры, устанавливать собственные настройки для просмотра информации (цвет фона и т. д.), у них могут быть проблемы с передачей цветов из-за особенностей видеокарты.

    Профессиональный Web-дизайнер старается по мере сил учитывать возможные варианты просмотра и создавать странички максимально подходящие для разных условий.

    Старайтесь, чтобы ваши странички смотрелись правильно по крайней мере в двух браузерах - Netscape и Explorer.

    Программисты обеих компаний вводят в свои программы особенности, не признаваемые другими браузерами. Поэтому когда вы посещаете сайт, разработанный "специально для Netscape", пользуясь другим браузером, то видите его страницы не совсем в том виде, на который рассчитывали их создатели. Документация по сетевым технологиям зачастую содержит комментарии типа "в Netscape не работает". Изворотливые мастера отыскивают способы обмануть браузеры, заставляя показывать информацию одинаково.

    Следует учитывать различие в поведении этих браузеров при обнаружении некорректного кода. Netscape неправильный код не обрабатывает и, соответственно, показывает страничку как есть, т. е. с ошибками. Explorer поступает по-другому - при обработке неправильного кода он пытается предугадать недостающие теги или пропущенные параметры.

    Например, в большинстве случаев незакрытый парный тег будет обработан браузером Explorer так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше, конечно, учиться писать корректный код.

    Если при подготовке HTML-документа соблюдать следующие правила, то количество возможных ошибок значительно снизится.

  • Обязательно закрывайте все теги (кроме одиночных).
  • Внимательно следите за вложенностью тегов. Не допускайте ситуации, когда внешний тег закрывается раньше, чем внутренний:
    <B><I>правильно</I></B>
<B><I>неправильно</B></I>
  • Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. Можно заключать в кавычки все параметры, но это не является обязательным.
  • При использовании формы на странице внимательно следите за тем, чтобы все элементы, составляющие форму ( <INPUT>, <SELECT>, <TEXTAREA>, и т. д.), находились между тегами <FORM> и </FORM>.
    •

    Попробуйте отключить у браузера поддержку графики, листов стилей, JavaScript, изменить различные установки странички - цвет фона, цвет ссылок, шрифты и др.

    В теге <BODY> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона, что приведет к "исчезновению" части текста.

    Задание

  • Примените указанные правила к оформлению вашей домашней странички.
  • Включите при помощи тега META в документ его описание и набор ключевых слов.
  • Убедитесь в том, что ваш документ корректно отображается и браузером Netscape, и браузером Internet Explorer.
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^