Разработка web сайта на основе HTML с использованием JavaScript

Для отделения символа от последующего текста надо вводить точку с запятой.

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

640× 480

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

Кириллица тоже может быть реализована  в виде набора спецсимволов. Русские  буквы расположены (при кодировании  Windows-1251) в том месте кодовой таблицы, где первоначально располагались латинские буквы с тильдами, умляутами. Поэтому англоязычные редакторы HTML при переключении клавиатурного регистра часто записывают кириллицу в виде кодов.

Типы данных

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

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

Гиперссылки обычно состоят из двух частей: текста подсказки и адреса, который определяет координату перехода. Текст подсказки или заменяющий его рисунок располагается внутри элемента А, а адрес задаётся при  помощи атрибута href. Гиперссылка обычно выделяется на фоне текста цветом или подчёркиванием. Вид указателя мыши обязательно изменяется, когда он помещается над гиперссылкой.

Существуют правила для определения  размеров элементов. Размер, заданный обычным числом, выражается в пикселях. Например, задаётся длина горизонтальной линии в 100 пикселов:

<HR width = 100>

Горизонтальный размер может быть задан в процентном отношении  к ширине окна браузера:

<HR width = 50%>

Если размер окна будет изменён, то изменится и длина горизонтальной линии.

Символ * может использоваться для  разделения пространства страницы в  определённых пропорциях. Два способа  определения фреймов ( атрибут cols создаёт фреймы с вертикальным делением), причём левый фрейм в данном случае всегда будет в три раза уже, чем правый.

<FRAMESET cols = ” 25%, 75% “>

<FRAMESET cols = “1*, 3* “>

Управление цветом

 

Кодирование цвета используется для  раскрашивания шрифтов, горизонтальных линий и фона, других элементов  страницы. Цвета обозначаются английскими  названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры  цвета. Самый простой способ определить цвет – написать название цвета  на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:

Color = “red”

Допустимые названия цветов:

Русское название	Английское название	RGB – код
Аквамарин	Aqua	#00FFFF
Белый	White	#FFFFFF
Жёлтый	Yellow	#FFFF00
Зелёный	Green	#008000
Золотой	Gold	#FF0700
Индиго	Indigo	#4B0080
Каштановый	Maroon	#800000
Красный	Red	#FF0000
Оливковый	Olive	#808000
Оранжевый	Orange	#FF0000
Пурпурный	Purple	#800080
Светло-зелёный	Lime	#00FF00
Серебристый	Silver	#C0C0C0
Серый	Gray	#808080
Сизый	Teal	#008080
Синий	Blue	#0000FF
Ультрамарин	Navy	#000080
Фиолетовый	Violet	#EE80EE
Фуксиновый	Fuchsia	#FF00FF
Чёрный	Black	#000000

 

Но в общем случае цвет определяется RGB – кодом. Любой цвет в этом случае представляется как комбинация красного (R), зелёного (G), синего (B) цветов, взятых в определённых пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. В Windows–95 это соответствует цветовому режиму монитора True Color (24-разрядное двоичное кодирование цвета).

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

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

HTML – код, рисующий радугу на Web-странице:

<FONT color = “ red “> Радуга </ front>

<TABLE border = 0 width = 100% >

<TR><TD bgcolor = #FF3030 >K

<TR><TD bgcolor = FFD000 >0

<TR><TD bgcolor = #F3FF5F >Ж

<TR><TD bgcolor = #00FF00 >З

<TR><TD bgcolor = #6FD3F7 >Г

<TR><TD bgcolor = # 5F72FDF >С

<TR><TD bgcolor = # B568F4 >Ф

</ table>

Цветовая проработка Web-страницы является альтернативой многочисленных рисунков и позволяет обеспечить более быструю загрузку документа.

 

 Конструктор документов

Пора от технических деталей  программирования перейти к более  важным вопросам:

• Как составить сценарий гипертекстового документа?
• Как спроектировать внешний вид документа на экране?

Приложение. Структура приложения

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

Итак, есть идея создать красивое, полезное и удобное для пользователя гипертекстовое приложение. С чего начать работу?

Можно, конечно, сразу писать теги, а там -- как получится. Сомнительно, что получится хорошо.

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

Цепочка

Это самая простая структура. Документы, составляющие приложение, просматриваются  пользователем по порядку, как страницы в книге. Каждый документ оканчивается ссылкой на следующий. Пользователь двигается по цепочке "до упора", то есть до последнего документа. В  последнем документе ссылки "вперед" уже нет. Теперь можно окончить работу или, пользуясь кнопкой браузера "Назад" ("Back"), пройтись по документам "вспять".

Цепочку можно изобразить такой  схемой:

Пример цепочки

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

Ссылки-связи можно оформить в  виде пиктограмм.

Пример красивой цепочки

Комментарии к последнему примеру.

• Работая с документом, очень легко увидеть программу, которая этот документ строит. В браузере для этой цели есть специальная позиция "В виде HTML" ("Page Source") главного меню "Вид" ("View"). Войдите еще раз в приложение "Пример красивой цепочки" и посмотрите программы документов.
• В приложении "Пример красивой цепочки" использована необычная фоновая иллюстрация (о фоновых картинках подробнее смотрите ниже в этом уроке). Посмотрите ее здесь. Это очень узкая и длинная GIF-картинка размером 1x1200 пикселов, то есть ширина картинки всего один пиксел, а высота -- 1200 пикселов. Паркет из таких плиточек выглядит как гамма цветовых горизонтальных полосок с нарастающей вниз плотностью цвета.

Если бы документы были длинными, то через некоторое время, прокручивая экран по вертикали, мы дошли бы до второго ряда плиточек и увидели бы, как темная горизонтальная полоска внезапно обрывается и начинается светлая (новый горизонтальный паркетный  ряд). Это не происходит, потому что  в примере документы короткие, а паркетная плиточка длинная. Длина 1200 пикселов выбрана в соответствии с разрешением экрана 1600x1200. Такой  размер пользовательского экрана в  пикселах -- пока еще большая редкость и встречается в основном на профессиональных графических станциях. Обычные компьютеры работают с разрешением экрана 640x480, 800x600 и 1024x768.

Картинки, подобные vert.gif, редко используют для фона страницы, ведь в длинных документах, переход  от одного горизонтального ряда такого паркета к другому выглядит некрасиво  и воспринимается как погрешность. Однако, узкие картинки с цветовой "растяжкой" HTML-программисты охотно используют для создания фона в таблицах (об этом разговор пойдет позже).

Гораздо чаще на практике используют паркет, состоящий из очень  широких (по горизонтали) и коротких (по вертикали) плиточек. Пример такого паркета можно посмотреть здесь. Размер паркетной плиточки (картинка hor.gif): 1024x1.

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

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

Схема цепочки со справочным разделом выглядит так:

Возможны различные варианты организации  справочного раздела:

• Раздел состоит из нескольких независимых документов.
• Некоторые документы раздела имеют ссылки друг на друга или даже образуют цепочку.
• Справочный раздел состоит из одного документа с метками, на которые настроены ссылки в документах цепочки.
• Каждый документ в цепочке имеет свой собственный справочный раздел, и эти разные разделы могут содержать ссылки друг на друга.

Применение  цепочек

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

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

Иерархия

Иерархия -- это зависимость по подчинению, или включению одних объектов в другие.

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