--PAGE_BREAK-- продолжение
--PAGE_BREAK-- Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Здесь расположена ссылка 1
Здесь должен располагаться оригинальный текст WEB-страницы
Переход в начало документа
Если рассмотреть исходные тексты различных WEB-страниц, то можно легко увидеть схожесть их структуры. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальном и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами.
Рассмотрим основные элементы HTML.
Означает документ на языке HTML. Я уже упоминал о том, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB – страница. В принципе этот элемент. Он имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом оканчиваются все документы в формате HTML.
Область заголовка Web – страницы, её первая часть. HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты IANG, DIR, должен включать элемент TITLE и допускает вложение элементов BASE, META, LINK, OBJECT, SCARIPT, STULE.
Элемент для размещения заголовка Web – страницы. Строка текста, расположенного внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.
Элемент для описания стиля некоторых элементов Web – страницы. В файле Strukt. Htm назначены шрифты для элементов h2, code. Для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента style не обязательно, но желательно. Этот элемент введён сравнительно недавно, без него немыслима работа в приложениях World, Excel.
Элемент содержит служебную информацию, которая не отражается при просмотре Web- страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент Meta содержит два основных атрибута, первый из которых определяет тип данных, а второй – содержание. Вот несколько примеров meta – данных:
Дата, обозначающая срок годности документа:
Name– “Expires” content= “Дата”
Адрес электронной почты:
Name = “Reply – to” content = “ Имя@ Адрес“
Имя автора Web-страницы:
Name = “Author” content = “ Имяавтора”
Набор ключевых слов для поиска:
Name = “Keywords” content = “слово1, слово2, слово3…”
Краткое описание содержания Web- страницы:
Name= “Description” content= “Содержание страницы”
Описание типа и характеристик Web – страницы:
Name= “Content– Type” content= “ Описание страницы”
Указание приложения, в котором была создана Web – страница:
Name = “Generator” content = “НазваниеHTML – редактора”
Атрибут Name используется приложением – клиентом для получения дополнительной информации о Web – страницах и их упорядочения. Его часто заменяют атрибутом http – equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.
Элемент META может содержать URL. Шаблон атрибута таков:
URL = “http: // адрес”
Этот элемент заключает в себе гипертекст, который определяет собственно Web – страницу. Конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.
background= “Путь к файлу”
Более простое оформление фона сводится к заданию его цвета:
bgcolor = “#RRGGBB”
Цвета фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего. Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
Поскольку фон станицы может изменятся, необходимо иметь возможность подбирать соответственный цвет текста. Для этого имеются следующей атрибут:
text= “#RRGGBB”
Для задания цвета текста гиперссылок используются следующие атрибуты:
link= “#RRGGBB”
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink= “#RRGGBB”
Можно также указать изменение цвета для последней выбранный пользователем гиперссылки:
Alink= “#RRGGBB”
В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле – не исключение. Текст, введений внутри этого элемента, игнорируется браузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. Например:
Элемент заголовка. Существует шесть уровней заголовка, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков могут использовать атрибуты, задающие выравнивание влево, по центру или вправо:
align = “left”
align = “center”
align = “right”
Горизонтальная линия – очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части.
Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Этот элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
align = “left”
align = “center”
align = “right”
align= “justify”
Можно задать толщину линии:
Size= толщина в пикселях
Можно управлять длиной линии:
width= длина в пикселях
width= длина в процентах
Можно выбрать цвет:
color = “цвет”
HTML-документ может быть очень большим, и в этом случае нужно иметь возможность быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки. Шаблон для создания меток таков:
Произвольный текст
В данном случае данной строке документа присваивается имя, и, следовательно, в другой части документа или даже на другом документе может быть создана гиперссылка, приводящая в эту точку. Для перехода внутри документа можно использовать следующую конструкцию:
Переход к метке
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
Читая эту работу, вы, конечно, уже достаточно много поработали со ссылками и понимаете, что это такое на практике.
Вы поняли, что:
гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием;
мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;
для перехода по ссылке необходимо щелкнуть по ней мышкой;
для возврата из ссылки необходимо использовать навигационную кнопку браузера "Назад" ("Back").
Если ссылки образуют вложенную цепочку, то кнопки "Назад" ("Back") и "Вперед"("Forward") можно использовать для движения по пройденному ссылочному пути в обе стороны. Они работают как традиционные операции «откатка» и «накатка» в большинстве прикладных программ.
В нижеприведенном примере используется цепочка вложенных ссылок. Совершите небольшое путешествие. Сначала, щелкая ссылки, доберитесь до текста, в котором ссылок уже нет. Затем, пользуясь навигационными кнопками браузера, «прогуляйтесь» по пройденному пути вперед и назад.
Ссылки могут уводить не только в разные документы, но загружать на экран разные фрагменты одного и того же текста. В последнем случае навигационные средства браузера работают также.
Переход внутри одного документа Для задания гипертекстового перехода внутри документа используют две команды . Первая команда с атрибутом href является источником перехода, вторая с атрибутом name — приемником.
Общий вид программы
…
A #метка>текстA>
…
…
A name=метка>A>
...
Задание перехода по метке
На экран выводится ссылка: текст
Метка. Сюда браузер приходит по ссылке.
На экране ничего не отображается.
Для организации перехода внутри документа нужно:
Выбрать имя для метки.
Имя должно быть уникальным в HTML-программе. Это означает, что других меток с таким именем в программе быть не должно.
А что будет, если не послушаться этого совета?
Когда одинаковых меток несколько, браузер выполняет переход на самую первую метку в программе.
Имя может заключаться в кавычки.
Имя может состоять из любых символов. В том случае, когда имя содержит пробелы или ключевые символы HTML, кавычки обязательны.
Запрограммировать переход по метке.
В месте перехода нужно написать команду A#метка>текстA>.
Здесь:
# — ключевой символ;
метка — выбранное имя для метки;
текст — запись, которая будет выглядеть на экране браузера как ссылка.
Установить тег с меткой в нужном месте HTML-программы.
Перед фрагментом HTML-программы, на который должен выполниться переход записать команду-метку Aname=метка>A>.
При этом:
имя метки должно быть то же самое, что и в команде, задающей переход;
на экране тег-метка Aname=метка> никаких изображений не строит.
Переход к другому документу Для того, чтобы браузер загрузил в свое окно новый HTML-документ, нужно записать в программе ссылку при помощи команды A> с атрибутом имя_файла.
Общий вид программы
...
A имя_файла>текстA>
...
Выполнить файл «имя_файла».
На экран выводится ссылка: текст
При щелчке пользователя на ссылке
браузер строит на экране документ
по программе, заданной в файле
«имя_файла».
Документ
Программа (файл doc1.htm)
Программа, на которую настроена ссылка в документе (файл doc2.htm)
Переход к метке другого документа
Мы научились решать такие задачи:
передавать управление в другую часть документа;
передавать управление в другую программу (HTML-файл).
Эти два метода можно объединить и передать управление из одного документа к метке внутри другого.
Общий вид программы
Первый HTML-файл
...
A имя_файла#метка>текстA>
…
Второй HTML-файл
…
A name=метка>A>
...
Приступить к показу фрагмента
с меткой «метка» в файле
«имя_файла». На экран выводится
ссылка: текст.
При щелчке пользователя на
ссылке браузер строит на экране
документ по программе, заданной
в файле «имя_файла», начиная с
фрагмента с меткой «метка».
Документ
Программа (файл doc3.htm)
Программа, на которую настроена ссылка в документе (файл doc4.htm)
Имена файлов и ссылки на них
Имена файлов с HTML-программами имеют расширение htm или html.
Без необходимости обозначение html лучше не использовать, так как не все операционные системы понимают 4 символа в расширении имени файла.
Имена для файлов всегда стараются придумать осмысленные. Когда файлов много, порядок в именах имеет особое значение.
Если, например, ваш многофайловый гипертекст имеет иерархическую структуру, старайтесь в обозначениях учитывать иерархию. Так, основной файл с оглавлением можно назвать 00.htm (или index.htm). Файл с первой главой — 01.htm и так далее (быть может до 99.htm). Когда главы имеют файлы-параграфы, их имена получаются из имени главы добавлением двузначного номера параграфа. Так же поступают и с файлами-пунктами параграфа.
Предлагаемая нотация позволяет по имени файла определить его принадлежность. Например, файл 0205.htm — описывает построение пятого параграфа второй главы, а файл 111299.htm — 99-ый пункт 12-ого параграфа 11-ой главы.
Если в теге A> указано имя файла, браузер ищет файл в том же каталоге, в котором расположен файл со ссылкой. Когда необходимо сослаться на файл из другого каталога можно:
указывать в ссылке полный путь к файлу, начиная с имени дисковода;
указывать в ссылке путь по отношению к файлу со ссылкой.
Второй способ гораздо лучше, так как при правильном использовании позволяет переносить ваш многофайловый гипертекст из одного каталога в другой и с одного компьютера на другой без дополнительных настроек.
Пусть, например, ваш гипертекст расположен в каталоге BOOK корневого каталога диска C. В самом каталоге BOOK расположен файл с оглавлением 00.htm. Остальные файлы помещены в подкаталоги 01, 02, 03, 04 в соответствии с принадлежностью к той или иной главе документа.
Как можно сослаться из файла 00.htm на файл 02.htm?
C:/BOOK/02/02.htm (абсолютная адресация)
./02/02.htm (относительная адресация)
Первый способ приводит к непереносимости вашего продукта. Стоит вам перезаписать, например, каталог BOOK на диск D, как ссылки перестают работать.
Вторая запись предлагает браузеру ориентироваться на текущий каталог — об этом говорит указание "./". Можно перемещать каталог BOOK в любое место и даже переименовывать его — ссылки работать будут.
Относительная ссылка из файла 02.htm в файл 00.htm запишется так: ../00.htm. Символы "../" указывают на родительский каталог.
Замечание
При записи пути к файлу используйте косую черту с наклоном вправо, а не влево, как принято в DOS, даже если ваш браузер находит ссылки и с левонаклонной чертой. Наклон черты становится существенным при размещении гипертекста на сервере для доступа к нему из Интернета. Серверы, как правило, работают под операционной системой UNIX, а в ней черточки — правонаклонные.
Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа. Для использования этого элемента необходимо использовать следующую конструкцию:
Фрагмент адреса путь1 не является обязательным. При формировании полного адреса он будет отброшен. Если в тексте документа встретится относительная ссылка
путь 2/имя документа. Htm“ >Видимый текст ссылкиa>,
то она будет соответствовать URL
http: // компьютер/путь 2/имя документа. Htm
В том случае, когда надо задать базовый адрес для локального диска (например, D), должна быть использована такая конструкция:
Тогда при указании относительной ссылки можно будет задавать не только имя файла, но и имена папок, в которых он находится.
В выражении абсолютной ссылки можно также опустить указание на схему доступа (file://) В этом случае будет учитываться только левая часть абсолютной ссылки до первого левого символа “\”, то есть имя локального диска.
Правила синтаксиса При использовании каждого элемента важно знать, какие элементы могут располагаться внутри него, и внутри каких элементов может находиться он сам. Так, взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице, в тех случаях, когда не используются фреймы. Если страница представляет собой документ планировки фреймов, то вместо элемента BODY используется элемент FRAMESET.
Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, фреймов. В этом случае порядок вложения элементов определяется логикой создания того или иного объекта на странице. Таблицы и фреймы часто используются для того, чтобы разместить детали страницы (рисунки, текст и др.) в определённом порядке. Например, располагая рисунок внутри ячейки таблицы, можно добиться определённого его положения.
продолжение
--PAGE_BREAK--Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определённых элементов.
Например, есть два абзаца (первый в зелёной рамке) и таблица:
Текст абзаца 1
…
Текст абзаца 2
Таблица в данном случае – независимый элемент. Её можно, например, выравнивать независимо от остального текста.
Можно использовать другой код:
Текст абзаца 1
…
текст абзаца 2
Исчез конечный тег первого абзаца. Теперь таблица является частью первого абзаца, и зелёная рамка будет охватывать таблицу и текст.
И наоборот, элемент P может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев P.
Правила синтаксиса распространяются и на использование стартового и конечного тегов, атрибутов и содержимого элемента. Нельзя путать понятия «элемент» и «тег». Элемент – это контейнер, содержащий атрибуты внутри стартового тега и полезную информацию между стартовым и конечным тегами. Тег – это конструкция, заключённая в угловые скобки и используемая для обозначения области действия элемента.
Некоторые элементы не имеют конечного тега. Элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом и без него. Элемент абзаца P может иметь конечный тег, но если тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и др.
Важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри начального тега.
Кодирование символов Основным языком Интернета является английский язык. Но для гипертекстовых документов предусмотрено использование национальных алфавитов. Стандартным режимом отображения является кодировка ISO Latin 1 (ISO 8859-1). Она подходит как для MS-DOS (набор символов ASCCII), так и для Windows. В тоже время браузеры поддерживают набор символов Unicode 2.0 (ISO10646), что позволяет использовать национальные алфавиты. Это означает, что символы могут кодироваться однобайтовым числом (коды в пределах 0-255) или двухбайтовым (0-65 535). В первом случае для использования национального алфавита необходим атрибут charset, так как одни и те же коды символов могут быть интерпретированы по-разному для различных кодовых страниц.
Кириллица (Windows) и/или Кириллица (Кои8-Р) – это две наиболее популярные в нашей стране кодировки.
Если в документе есть указание на определённую кодовую страницу, то выбор шрифта будет предопределён. Коды 32-127, то есть знаки препинания, цифры и буквы латинского алфавита, отображаются правильно, а коды 128-255 могут отображаться по-разному.
Если кодовая страница указана неправильно, то, например, при создании гипертекстовых документов в MS FrontPage Exdivss в текст страницы автоматически добавляется конструкция типа charset =xxxxx, которая не позволяет использовать кириллицу. В этом случае необходимо правильно указать значение атрибута: charset =windows-1251.
Если документ использует кодировку Unicode, то для работы с ним подойдут такие средства, как Блокнот, Norton Commander или WordPad, и придётся остановиться на гипертекстовом редакторе. В этом случае русская буква А будет выглядеть в режиме «источника» так А (в десятичной кодировке). Такую страницу будет сложно читать и редактировать. Поэтому каждый новый редактор надо тестировать на возможность использования русских букв: набрать небольшой текст, сохранить документ, а затем просмотреть его в режиме источника.
Использование символов В HTML и в браузерах реализована возможность прорисовки символов по их кодам. Символы могут быть общепринятыми, нестандартными и используемыми в HTML в качестве служебных символов. Их называют спецсимволами. Первый способ ввода спецсимвола заключается в указании его кода. Например, латинскую букву А можно задать так: A. Для некоторых символов предусмотрена мнемоническая кодировка.
Часто используемые спецсимволы (по стандарту ISO 8859 – 1):
Код символа
Числовой код
Мнемонический код
Название
Символ
34
"
"
Прямая кавычка
“
38
&
&
Амперсанд
&
60
<
<
знак «меньше»
62
>
>
Знак «больше»
>
153
™
&trade
Троговая марка
™
160
Неразрывный пробел
162
¢
¢
Цент
ў
163
£
£
Фунт
Ј
164
¤
¤
Знак валюты
¤
165
¥
¥
Йена
Ґ
166
¦
¦
Вертикальная строка
¦
167
§
§
Знак параграфа
§
169
©
©
Знак копирайта
©
171
«
«
Левая типографская кавычка
«
172
¬
¬
Знак отрицания
¬
174
®
®
Знак “зарегестрировано”
®
176
°
°
Знак градуса
°
177
±
±
Знак “плюс минус»
±
178
²
²
Степень 2
І
179
³
³
Степень 3
і
181
µ
&mikro
Знак «микро»
µ
182
¶
¶
Знак абзаца
¶
183
·
·
Точка-маркер
·
185
¹
¹
Степень 1
№
187
»
»
Правая типографская кавычка
»
188
¼
¼
Одна четвёртая
ј
189
½
½
Одна вторая
Ѕ
215
×
×
Знак умножения / кавычки/
*
247
÷
÷
Знак деления
/
Для отделения символа от последующего текста надо вводить точку с запятой.
Мнемонические символы бывают очень полезны, особенно для тех символов, которые нельзя ввести с клавиатуры. Например, для указания разрешения экрана можно использовать такую конструкцию:
640× 480
Двойная кавычка, угловые скобки и амперсанд (, &) являются служебными в HTML. Если их надо использовать в обычном тексте на Web-странице, то они должны быть указаны только при помощи кодов.
Кириллица тоже может быть реализована в виде набора спецсимволов. Русские буквы расположены (при кодировании Windows-1251) в том месте кодовой таблицы, где первоначально располагались латинские буквы с тильдами, умляутами. Поэтому англоязычные редакторы HTML при переключении клавиатурного регистра часто записывают кириллицу в виде кодов.
Типы данных
Основным типом данных Web-страницы является текстовой тип. Существует много элементов, которые являются контейнерами для текста, или используются для форматирования текста. Числовые и мнемонические коды, обозначающие символы, предваряются знаком амперсанта &. Таким образом, амперсанд и угловые скобки могут быть введены в текст не на прямую, а только при помощи кодов. Текстовые данные, являющиеся значениями атрибутов, заключаются в прямые двойные кавычки.
Числовые данные требуются только для указания значений атрибутов и записываются без кавычек.
Гиперссылки обычно состоят из двух частей: текста подсказки и адреса, который определяет координату перехода. Текст подсказки или заменяющий его рисунок располагается внутри элемента А, а адрес задаётся при помощи атрибута href. Гиперссылка обычно выделяется на фоне текста цветом или подчёркиванием. Вид указателя мыши обязательно изменяется, когда он помещается над гиперссылкой.
Существуют правила для определения размеров элементов. Размер, заданный обычным числом, выражается в пикселях. Например, задаётся длина горизонтальной линии в 100 пикселов:
Горизонтальный размер может быть задан в процентном отношении к ширине окна браузера:
Если размер окна будет изменён, то изменится и длина горизонтальной линии.
Символ * может использоваться для разделения пространства страницы в определённых пропорциях. Два способа определения фреймов ( атрибут cols создаёт фреймы с вертикальным делением), причём левый фрейм в данном случае всегда будет в три раза уже, чем правый.
Управление цветом Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры цвета. Самый простой способ определить цвет – написать название цвета на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:
Color = “red”
Допустимые названия цветов:
Но в общем случае цвет определяется RGB – кодом. Любой цвет в этом случае представляется как комбинация красного (R), зелёного (G), синего (B) цветов, взятых в определённых пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. В Windows–95 это соответствует цветовому режиму монитора True Color (24-разрядное двоичное кодирование цвета).
В выше приведённой таблице видно, что для формирования стандартных цветов часто используются или крайние значения интенсивности базового цвета 00 и FF, или среднее значение 80. Выбрав цвет, можно увидеть его численные характеристики, и наоборот, задав численные значения, получить новый оттенок.
Ещё одно направление применения цвета: элемент HR, создающий горизонтальную линию, допускает использование ряда атрибутов. С их помощью линию можно превратить в цветной прямоугольник. Его можно использовать для разделения частей страницы или в качестве маркеров списка.
HTML – код, рисующий радугу на Web-странице:
Радуга
K
0
Ж
З
Г
С
Ф
Цветовая проработка Web-страницы является альтернативой многочисленных рисунков и позволяет обеспечить более быструю загрузку документа.
Конструктор документов Пора от технических деталей программирования перейти к более важным вопросам:
· Как составить сценарий гипертекстового документа?
· Как спроектировать внешний вид документа на экране?
Приложение. Структура приложения Когда гипертекст состоит из нескольких файлов, термин «документ» к нему уже не очень подходит. В дальнейшем будем называть документом однофайловый гипертекст. А для случая, когда файлов много, введем термин «приложение».
Итак, есть идея создать красивое, полезное и удобное для пользователя гипертекстовое приложение. С чего начать работу?
Можно, конечно, сразу писать теги, а там — как получится. Сомнительно, что получится хорошо.
Лучше сначала решить, какой способ организации гипертекста больше всего подходит для поставленной задачи, то есть, подумать над общей структурой приложения.
Цепочка Это самая простая структура. Документы, составляющие приложение, просматриваются пользователем по порядку, как страницы в книге. Каждый документ оканчивается ссылкой на следующий. Пользователь двигается по цепочке «до упора», то есть до последнего документа. В последнем документе ссылки «вперед» уже нет. Теперь можно окончить работу или, пользуясь кнопкой браузера «Назад» («Back»), пройтись по документам «вспять».
Цепочку можно изобразить такой схемой:
Пример цепочки
Для удобства работы с приложением, можно помещать на странице документа ссылки не только вперед, но и назад. В этом случае отпадает необходимость использовать навигационные кнопки браузера.
Ссылки-связи можно оформить в виде пиктограмм.
Пример красивой цепочки
Комментарии к последнему примеру.
· Работая с документом, очень легко увидеть программу, которая этот документ строит. В браузере для этой цели есть специальная позиция «В виде HTML» («Page Source») главного меню «Вид» («View»). Войдите еще раз в приложение «Пример красивой цепочки» и посмотрите программы документов.
· В приложении «Пример красивой цепочки» использована необычная фоновая иллюстрация (о фоновых картинках подробнее смотрите ниже в этом уроке). Посмотрите ее здесь. Это очень узкая и длинная GIF-картинка размером 1x1200 пикселов, то есть ширина картинки всего один пиксел, а высота — 1200 пикселов. Паркет из таких плиточек выглядит как гамма цветовых горизонтальных полосок с нарастающей вниз плотностью цвета.
Если бы документы были длинными, то через некоторое время, прокручивая экран по вертикали, мы дошли бы до второго ряда плиточек и увидели бы, как темная горизонтальная полоска внезапно обрывается и начинается светлая (новый горизонтальный паркетный ряд). Это не происходит, потому что в примере документы короткие, а паркетная плиточка длинная. Длина 1200 пикселов выбрана в соответствии с разрешением экрана 1600x1200. Такой размер пользовательского экрана в пикселах — пока еще большая редкость и встречается в основном на профессиональных графических станциях. Обычные компьютеры работают с разрешением экрана 640x480, 800x600 и 1024x768.
Картинки, подобные vert.gif, редко используют для фона страницы, ведь в длинных документах, переход от одного горизонтального ряда такого паркета к другому выглядит некрасиво и воспринимается как погрешность. Однако, узкие картинки с цветовой «растяжкой» HTML-программисты охотно используют для создания фона в таблицах (об этом разговор пойдет позже).
продолжение
--PAGE_BREAK--Гораздо чаще на практике используют паркет, состоящий из очень широких (по горизонтали) и коротких (по вертикали) плиточек. Пример такого паркета можно посмотреть здесь. Размер паркетной плиточки (картинка hor.gif): 1024x1.
В чистом виде цепочка используется проектировщиками очень редко. Обычная практика — это цепочка документов с дополнительным набором HTML-файлов, образующих справочный раздел. В этот раздел выносятся большие иллюстрации, длинные примеры, комментарии, толкование терминов, литературные источники, лирические отступления.
Таким образом, дополнительно к ссылкам движения по цепочке, в приложении появляются ссылки, уводящие пользователя на документы справочного раздела. Изучив дополнительный материал, пользователь возвращается в цепочку и продолжает последовательное движение.
Схема цепочки со справочным разделом выглядит так:
Возможны различные варианты организации справочного раздела:
· Раздел состоит из нескольких независимых документов.
· Некоторые документы раздела имеют ссылки друг на друга или даже образуют цепочку.
· Справочный раздел состоит из одного документа с метками, на которые настроены ссылки в документах цепочки.
· Каждый документ в цепочке имеет свой собственный справочный раздел, и эти разные разделы могут содержать ссылки друг на друга.
Применение цепочек Цепочки, несмотря на свою простоту, часто используются в гипертекстовой практике. Особое значение эта схема имеет на большом информационном объеме. Материал разделяется на последовательные фрагменты, которые и образуют цепочку.
Гипертекстовый учебник, который вы сейчас читаете, тоже построен в виде цепочки. Об этом однозначно говорят навигационные кнопки в конце каждого урока. И хотя учебник имеет оглавление, по ссылкам которого можно напрямую попасть в любой раздел, предполагается, что читается он по порядку, урок за уроком.
Иерархия Иерархия — это зависимость по подчинению, или включению одних объектов в другие.
Примером иерархии служит система классификации животных. Животные подразделяются на типы, каждый тип в свою очередь подразделяется на подтипы. Подтипы состоят из классов, классы из отрядов, отряды из подотрядов, подотряды из семейств. Семейства включают в себя роды, роды — виды и, наконец, виды в этой системе классификации, состоят из отдельных представителей животного мира.
Другой пример иерархической структуры, более близкий нам по теме — структура книги. Книга делится на тома, тома на части, части на главы, главы на параграфы, параграфы на пункты. В конкретной книге некоторые элементы из этой иерархии могут быть опущены (например, деление на тома).
Иерархическую структуру книги хорошо отражает оглавление (содержание). В правильно оформленных книгах оглавление помещают на первых страницах.
Особую роль оглавление играет в справочной литературе. Ведь такие книги не читают подряд от корки до корки, а обращаются к избранным страницам по мере надобности.
Оглавление оказывается полезным, даже если книга предназначена для последовательного чтения.
Оглавление:
· дает представление о книге в целом;
· позволяет быстро открыть нужный раздел для продолжения чтения;
· помогает найти отдельные, полюбившиеся фрагменты.
Иерархическое гипертекстовое приложение имеет такое же устройство, как и обычный бумажный справочник. Только строки в оглавлении являются гиперссылками, и не нужно вручную листать страницы.
Схему иерархического приложения можно изобразить следующим образом:
Документ 00.htm (корень иерархии) содержит ссылки на разделы 01.htm, 02.htm, 03.htm, ..., nn.htm (ветви иерархии). Эти разделы, в свою очередь, содержат ссылки на подчиненные документы и так далее, вплоть до таких документов как 030101.htm и 030102.htm: они уже не имеют ссылок (листья иерархии).
Пример гипертекстовой иерархии
Схема этого примера выглядит следующим образом:
Обратите внимание на то, как реализована навигация в приведенном выше иллюстративном приложении. От корня к листьям пользователь продвигается по ссылкам, расположенным в основной части документа. Перемещаться назад он может, использую навигационные кнопки браузера, или меню, которое приводится в конце каждого документа и отделяется от основной части горизонтальной линией.
Меню позволяет попасть в любой пройденный документ напрямую, минуя последовательное перелистывание страниц кнопками браузера. Это, конечно, очень удобно. Обратные ссылки-возвраты настроены при помощи меток не на начало документа, а на те точки, из которых был выполнен прямой переход. Это предоставляет пользователю дополнительный навигационный комфорт.
Еще одна полезная навигационная идея: на первой странице иерархического документа представить ссылками полную его схему. Теперь пользователь имеет возможность выбирать нужный раздел справочника в самом начале работы.
Модифицированный иерархический справочник
В модифицированном справочнике на основной странице сформирован еще и гипертекстовый алфавитный указатель тегов. Это дополнение показывает заботу разработчика о пользователе.
Уложим картинку в фоновый паркет Теперь, после «высоких» сфер, одна приятная (но и опасная для новичков!) техническая подробность.
Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет.
Вместо одноцветной заливки можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек.
Чтобы «паркет» смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации. И еще: очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
Фоновая картинка задается в команде BODY атрибутом background:
BODY background=имя файла с картинкой>
Примеры
1.
Этот фон задается командой:
BODY background=./pic/fon1.jpg>
Посмотреть на полном экране
Картинка, которая используется как фоновая плиточка:
2.
3.
Этот фон задается командой:
BODY background=./pic/fon2.jpg>
Посмотреть на полном экране
Картинка, которая используется как фоновая плиточка:
4.
5.
Этот фон задается командой:
BODY background=./pic/fon3.jpg>
Посмотреть на полном экране
Картинка, которая используется как фоновая плиточка:
6.
7.
Этот фон задается командой:
BODY background=./pic/fon4.gif>
Посмотреть на полном экране
Картинка, которая используется как фоновая плиточка:
8.
Антипримеры
1.
Этот фон задается командой:
BODY background=./pic/bfon1.jpg>
Посмотреть на полном экране
Плохая стыковка плиточек.
Картинка, которая используется как фоновая плиточка:
2.
3.
Этот фон задается командой:
BODY background=./pic/bfon2.gif>
Посмотреть на полном экране
Очень плохая стыковка плиточек.
Картинка, которая используется как фоновая плиточка:
4.
5.
Этот фон задается командой:
BODY background=./pic/bfon3.jpg>
Посмотреть на полном экране
Берегите глаза!
Картинка, которая используется как фоновая плиточка:
6.
7.
Этот фон задается командой:
BODY background=./pic/bfon4.jpg>
Посмотреть на полном экране
Берегите глаза!
Картинка, которая используется как фоновая плиточка:
8.
Как видите, с фоновыми картинками нужно обращаться очень осторожно. Если нет уверенности, что паркет улучшает восприятие документа, лучше использовать одноцветную заливку: на гладком фоне текст всегда читается лучше.
Графика Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив вывод картинок средствами HTML.
Браузеры «понимают» два графических формата GIF и JPG.
Формат GIF Картинки в этом формате поддерживают 256 цветов. В большинстве случаев этого вполне достаточно для получения качественных иллюстраций, но до фотографического качества, конечно, далеко.
GIF-формат имеет три приятные дополнительные возможности:
· Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, «зациклить кино» или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия GIF-картинок и разная настроечная информация.
В HTML нет различия между заданием вывода на экран простого GIF или анимированного. О том, что картинка «живая» — браузер узнает в момент загрузки GIF-файла (с диска или сети) и поступает соответственно. Обычные картинки он просто размещает на экране и «забывает» про них. Анимированные ему приходится опекать постоянно, меняя кадры на экране в соответствии с программой, заложенной в самом GIF.
· Прозрачная графика. В GIF-формате один цвет можно объявить прозрачным. Это позволяет избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом. Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в GIF-редактор или PhotoShop и снова записать на диск, указав прозрачный цвет.
· Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9,… строки исходного изображения. Вторая — 2, 6, 10,… Третья — 3, 7, 11,… Четвертая — 4, 8, 12,…
Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и четвертую. Получается эффект постепенного проявления изображения. На медленных линиях Интернета этот метод позволяет пользователю еще до загрузки всех частей получить представление об изображении — ведь части строятся браузером по мере их поступления на компьютер. Если картинка загружается не по сети, то различия вывода обычного GIF и чересстрочного на быстрых компьютерах практически незаметны.
Формат JPG Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.
Конечно, высокое качество отражается на размерах файла. Но формат JPG имеет одну особенность: в JPG-редакторе, при записи на диск, можно указать ту степень качества, которая нужна и, тем самым, балансируя на планке «качество-размер файла», достичь нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета на близкие — на глаз такую подмену будет обнаружить практически невозможно, а размер файла существенно сократится.
JPG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. JPG в таком режиме называется прогрессивным.
Как программировать картинки Картинка в тексте Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой . Команда не имеет парного закрывающего тега, но имеет много атрибутов.
Атрибут src = имя файла
Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.
Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: IMG src=./pic/img.gif>
Атрибут alt = «текст надписи»
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:
IMG src=monstr.jpg alt=«Страшный зверь»>
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. Проверьте это на следующей картинке:
IMG src=./pic07/cat7.gif alt=«А нас и тут неплохо кормят!»>
Атрибуты width = n и height = m
Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах.
Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.
Рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно — картинка выводится браузером с искажением. Если указание размеров вовсе опущено — на экране происходит маленькое землетрясение в момент прихода картинки из сети. Ведь, не зная размеров картинки, браузер оставляет под нее на экране стандартный прямоугольник, продолжая строить остальные элементы. Когда картинка загружена, браузеру приходится полностью перересовывать экран.
Атрибут border = n
Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.
При отсутствии атрибута, или при значении n=0 рамка не рисуется.
Ниже расположены ссылки на испытательные стенды. На них можно проверить работу атрибутов src, alt, width, height, border, как по отдельности, так и в совокупности.
Атрибут align
Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:
align=top
вертикальное выравнивание по верхнему краю
align=middle
вертикальное выравнивание по центру
align=bottom
вертикальное выравнивание по нижнему краю
align=left
горизонтальное выравнивание по левому краю
align=right
горизонтальное выравнивание по правому краю
Давайте зададим небольшой текстовый абзац и разместим внутри него картинку:
P>
Посмотрите на картинку.
IMG src=./pic/4.jpg align=middle>
Красивая птичка!
P>
Теперь можно заглянуть в испытательный уголок и посмотреть, что происходит с изображением при разных значениях атрибута align.
Картинка как ссылка Очень легко заставить работать картинку как гиперссылку. Достаточно вложить команду IMG внутрь команды A:
продолжение
--PAGE_BREAK----PAGE_BREAK--
продолжение
--PAGE_BREAK--Таким образом, вы можете наблюдать JavaScript в действии, а создать подобные эффекты может любой человек, знающий этот язык. Причем без особого труда.
Прочитав эту книгу, вы не только освоите JavaScript (вместо того, чтобы просто копировать и вставлять в Web-страницу готовые сценарии), но и узнаете множество интересных идей, реализовать которые вы сможете сами — с помощью JavaScript.
Важность изучения JavaScript Полезно изучить JavaScript хотя бы из-за его широкого распространения в сети. Огромное количество Web-страниц сделано с использованием сценариев (по самым разным причинам), и сайты без них кажутся блеклыми и скучными. Каким бы интересным не было содержание сайта, некоторые посетители сразу захотят уйти. Конечно, нет смысла оспаривать важность текстового содержания для любой Web-страницы, однако использование JavaScript не только улучшит подачу материала, но и сделает вашу страницу более запоминающейся.
Рекомендация Запомните: единственное, что отличает пользующиеся успехом сайты от неудачных, — их внешний вид. Чем интереснее оформлен сайт, тем он популярнее.
Можно найти еще множество причин для изучения и использования JavaScript. Сценарий всего в несколько строк помогает посетителям сайта отыскать страницу, соответствующую их браузеру и установкам, либо автоматически подсчитать сумму колонок в форме заказа. Подобные «мелочи» не рассчитаны на внешний эффект, но они свидетельствуют о высоком уровне профессионализма разработчика и знании им этики деловых отношений.
JavaScript в действии Ознакомившись с этой главой, вы сможете наконец создать свой первый сценарий. Вы начнете осваивать азы JavaScript на конкретных примерах. На ваше рассмотрение предлагается следующее:
а основные понятия JavaScript, такие как синтаксис, разметка, комментарии и др.; а некоторые термины языка JavaScript и причины, по которым он относится
к объектно-ориентированным языкам программирования; Q создание и чтение сценария JavaScript; а использование JavaScript для вывода и ввода информации.
Ввод/вывод информации с помощью JavaScript Исследование возможностей ввода и вывода информации — это не только замечательный повод научиться создавать сценарии JavaScript, обеспечивающие двустороннюю связь с пользователем, но и прекрасное начало вашего профессионального пути.
В вычислительной технике все основано на вводе и выводе данных. Без этого ничего не происходит. Текстовый процессор не выполняет никаких действий, пока пользователь не введет какую-либо информацию (символы, набираемые на клавиатуре), и лишь затем эта информация отображается на экране, распечатывается или сохраняется на жестком диске.
Теперь вы научитесь как вводить информацию с помощью JavaScript, так и выводить ее в виде разнообразных окон сообщений. (Если вам приходилось блуждать по сети дольше нескольких минут, то вам они уже встречались.)
На рис. 3.1, 3.3 и 3.5 показаны окна сообщений трех типов в браузере Internet Explorer, а на рис. 3.2, 3.4 и 3.6 — в браузере Netscape Navigator.
Все эти окна созданы на языке JavaScript:
a Alert (Предупреждение) — служит для вывода информации;
a Confirm (Подтверждение) — предназначено для вывода информации и позволяет пользователю сделать выбор в форме ответа Да/Нет на вопрос;
a Prompt (Запрос) — служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.
Объекты, методы и свойства Вы, вероятно, слышали о том, что JavaScript — объектно-ориентированный язык. Но что это означает? Чтобы это понять, вам следует ознакомиться с тремя терминами:
Q объекты;
а методы;
а свойства.
Сначала рассмотрим их в общих чертах. Чем дальше вы продвинетесь в изучении JavaScript, тем чаще вам придется ими пользоваться, так что более близкое знакомство оставим на будущее.
Объекты
Говоря простым языком, объект (object) — это какой-либо предмет. Подобно тому, как в реальном мире все одушевленные и неодушевленные предметы являются объектами (машины, собаки и пр.), объектами считаются и составляющие компьютерного мира.
Что касается JavaScript, его объекты находятся внутри браузера. Это, в частности, окно браузера, формы и их части, например кнопки и текстовые окна. В JavaScript также имеется собственная группа встроенных объектов, к которым относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны усвоить лишь необходимые определения.
Именно благодаря наличию объектов язык JavaScript считается объектно-ориентированным. Язык организован вокруг объектов, а не действий, или, иначе говоря, ориентирован на данные, а не на логику. При объектно-ориентированном программировании первоочередное внимание уделяется объектам, с которыми производятся некоторые манипуляции, а не логическим правилам, необходимым для таких манипуляций. Преимуществом такого подхода является не только облегчение программирования (или написания сценария), но и в то, что каждое действие можно выполнить разными способами.
Методы
Метод (method) — это действия, которые может выполнять объект. В реальном мире у объектов тоже имеются какие-либо методы. Машины ездят, собаки лают, доллар покупается и т.д. В нашем случае alert () является методом объекта Window, то есть объект Window может выдавать пользователю какое-либо предупреждение в окне сообщений. Примерами других методов являются открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах: open (), close () и click (). Обратите внимание на круглые скобки. Они означают, что методы, в отличие от свойств, используются.
Свойства
У всех объектов имеются свойства (properties). Если вы и далее будете следовать аналогии с объектами реального мира, то обнаружите, что все предметы обладают какими-то свойствами: у машин есть колеса, а у собаки — шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется название и номер версии.
Управление данными с помощью переменных В предыдущей главе вы научились использовать JavaScript для отображения на экране окон сообщений трех типов, служащих для ввода-вывода информации. Однако примеры сценариев, которые вы видели, не отличались гибкостью. Вы всего лишь дополняли сценарий сообщениями, которые хотели вывести на экран. Любой текст, помещенный в окне запросов, исчезал после щелчка по кнопке выбора. В данной главе вы узнаете, как изменить эту ситуацию. Здесь рассмотрено использование значений и переменных в JavaScript.
Значения в языке JavaScript Самое ценное в нашем мире — это информация. Каждый фрагмент информации в JavaScript рассматривается как значение (value). Так как информация может быть очень разнообразной, имеются различные категории значений. Простейшие типы данных в JavaScript принято называть основными типами (primitive types).
Три основных типа данных:
а строка (string); а число (number); а булево выражение (boolean).
Строки
Возможно, самым распространенным типом данных является строка. Строка -связанный набор символов, включающий в себя буквы, знаки препинания и цифры. В JavaScript строки чаще всего представляют собой какой-либо текст:
Здравствуйте и добро пожаловать!
Кто вы?
Мой рост — шесть футов.
Строки, вставляемые в сценарий JavaScript, заключаются в двойные или одинарные кавычки, например:
«Здравствуйте и добро пожаловать!»
Причина использования двух типов кавычек заключается в том, что двойные кавычки (") могут содержаться внутри строки, заключенной в одинарные кавычки ('), и наоборот. Например:
«J'm 6 feet tall»
'«Кто вы?» — спросил он.'
Строка может и вовсе не содержать символов. В этом случае она называется пустой строкой и обозначается пустыми кавычками:
Числа
JavaScript воспринимает два типа чисел. Это целые числа (integer) и числа с плавающей точкой (floating-point number).
Целые числа
Включают в себя положительные целые числа, например 1,2,3, отрицательные целые числа, например -1, -2, -3 и нуль — 0.
Хотя большинство чисел, используемых в JavaScript, записываются в десятеричной системе счисления, могут применяться также восьмеричная и шестнадца-теричная системы.
Примечание В книге используется только десятеричная система счисления.
Числа с плавающей точкой
Числа с плавающей точкой представляют собой числа с дробной десятичной частью:
3.1415926535897932384626433832795
Либо это числа, выраженные в экспоненциальном виде:
3.76е2
Примечание При экспоненциальной записи числа символ se» в верхнем или нижнем регистре означает «10 в степени»-.
Число, начинающееся с нуля и содержащее десятичную точку, считается числом с плавающей точкой.
Предупреждение Число, начинающееся с нескольких нулей и содержащее десятичную точку (например, 005.5) воспринимается как ошибка.
В табл. 4.1 приводятся примеры чисел, использующихся в JavaScript, чтобы вам проще было освоиться с ними.
Большие и маленькие числа
Таблица 4.1. Примеры чисел, использующихся в JavaScript
Число
Описание
Десятичный эквивалент
91
Целое число
91
4.56е2
Число с плавающей точкой
456
0.001
Число с плавающей точкой
0.001
00.001
Ошибка
0.001
Четыре равных числа
0.001
.001
с плавающей точкой
1е-3
1.0е-3
Числа, используемые в JavaScript, могут быть как очень большими, так и очень маленькими. Под очень большими подразумеваются величины до 10308 (единица с тремястами восемью нулями), а под очень маленькими — Ю~308 (нуль целых с тремястами семью нулями и единицей после запятой).
Булевы выражения
Булевы выражения отличаются от строк и чисел тем, что могут принимать лишь два значения: true (истина) и false (ложь).
Булевыми эти выражения названы в честь английского математика Джорджа Буля (1815-1864).
Ниже помещены примеры булевых выражений:
Собака лает = true
У собаки пять ног = false
К булевым выражениям вернемся в главе 6, где будут рассматриваться выражения и условия. Пока вам нужно просто знать, что такой тип данных существует и может использоваться в JavaScript.
Особые типы данных: числа, неопределенные и неопределяемые выражения
Помимо рассмотренных типов данных, встречаются еще несколько основных, менее очевидных типов. Далее приводятся четыре числовых значения:
а положительная бесконечность;
О отрицательная бесконечность;
а положительный и отрицательный нуль;
а несуществующее число (not a number — NaN) .
Имеются еще два специальных типа данных:
а неопределенный (null);
а неопределяемый (undefined).
Что касается первых четырех типов, то вам не придется работать с ними (не будете же вы вводить в программу бесконечное число). Под несуществующим числом понимается результат бессмысленной математической операции (например, деления на нуль). Бесконечностью считается значение, превышающее 10308 (например, результат возведения 10300 в квадрат), и оно также не имеет для вас особого значения (если только не свидетельствует об ошибке).
Неопределенный тип может иметь только одно значение — null. В данном случае это свидетельствует о полном отсутствии полезной информации или каких-либо данных.
Понять, что такое неопределяемый тип данных, несколько сложнее. Здесь тоже возможно только одно значение (undefined), являющееся чаще всего тем же, что и null. В наиболее экстремальных случаях undefined становится плохим признаком (особенно если выдается в виде результата посетителю страницы) и свидетельствует о недочетах вашего сценария.
Переменные в языке JavaScript Теперь, когда вам известно об используемых в языке JavaScript значениях, вы готовы к тому, чтобы войти в мир переменных (variable) JavaScript.
Переменные имеют огромное значение не только в JavaScript, но и во всех языках программирования. Без их использования трудно обойтись, а с их помощью вы сможете управлять всеми типами данных.
Переменная — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время исполнения сценария JavaScript. Возможно, это определение кажется несколько сложным, но на самом деле пользоваться переменными очень просто.
Создание переменных
В языке JavaScript переменные создаются довольно легко. Давайте вернемся к стандартному шаблону HTML, чтобы сразу ввести вас в курс дела:
Простая страница
// Снимаем маскировку. -->
Прежде всего нужно создать переменную. Это можно сделать двумя путями: объявив ее заранее или создав «на лету». Сначала будут рассматриваться переменные, объявляемые заранее. Позже в этой главе рассказывается, каким образом они создаются «на лету».
Пример. Чтобы объявить (создать) переменную, в языке JavaScript используется оператор var, вслед за которым указывается имя, которое вы хотите присвоить переменной. В данном примере объявляется переменная под названием msg:
Простая страница
var msg;
// Снимаем маскировку. -->
Оператор равноценен законченному предложению в английском языке. Более подробно речь об этом пойдет в седьмой главе.
Вот что следует знать об именах переменных:
а в именах переменных можно использовать символы нижнего и верхнего регистра либо сочетание того и другого;
а до объявления переменной ее значением считается undefined;
Q имя переменной не может начинаться с цифры;
а в именах переменных недопустимы пробелы; если необходим разделитель, используется символ подчеркивания (_);
а в именах переменных следует избегать символа доллара ($) поскольку он не воспринимается, браузерами Internet Explorer 3.02 (поддерживающим JScript 1.0) и Netscape Navigator 2.02;
а следует избегать использования имен переменных, отличающихся только символами верхнего и нижнего регистра (например, msg и MsG), поскольку JScript 1.0 не сумеет их различить.
Рассмотрим следующие примеры корректных имен переменных:
msg
Hello_all Msgl Msg_l
Приведенные ниже имена переменных либо являются недопустимыми, либо их следует избегать:
a Imsg — начинается с цифры;
Qhelloall- содержит пробел;
a var- зарезервированное слово JavaScript;
Q dollar$ — в имени содержится символ $;
а msg и Msg — не используйте такие имена в одном сценарии, поскольку различаются они только регистром.
Пример. Если вы хотите присвоить значение только что объявленной переменной, это можно сделать в той же строке:
npocTaH cTparoma
var msg = «Добро пожаловать в мир переменных JavaScript!»;
// Снимаем маскировку. -->
Массивы JavaScript и Escape-последовательности В предыдущей главе вы научились пользоваться переменными. В этой главе вы узнаете о новой разновидности переменных, которые способны хранить в себе несколько значений, — о массивах. Здесь рассказывается:
а как пользоваться массивами;
а как создаются массивы;
а как создаются элементы массива;
а как пользоваться знаками переключения кода.
Как пользоваться массивами Массив (array) — мощное средство программирования для любого языка, в том числе в JavaScript. Массив позволяет сохранять несколько независимых значений в одной переменной. Обычно эти значения как-то связаны (например, названия дней недели). Преимущество массивов заключается в том, что правильное их использование значительно упрощает код и помогает избежать создания множества переменных с похожими именами.
продолжение
--PAGE_BREAK--
продолжение
--PAGE_BREAK--Q onLoad;
а onclick;
Q onMouseover;
Q onMouseout.
Давайте коротко рассмотрим каждый из них.
Событие onLoad
Это событие происходит после загрузки чего-либо, например после открытия страницы в окне браузера. Оно считается состоявшимся только после завершения загрузки всей страницы, включая изображения.
Событие onLoad очень удобно использовать в сценарии, когда необходимо, чтобы функция выполнялась сразу после открытия страницы.
Событие onClick
Это событие происходит после щелчка мышью в определенном месте страницы. Позднее вы узнаете, что множество элементов страницы (гиперссылки, изображения, кнопки и пр.) могут реагировать на событие onClick. Его рекомендуется применять, когда вы хотите создать сценарий, взаимодействующий с пользователем.
Событие onMouseover
Это событие похоже на событие onCl ick, но происходит не после щелчка мышью, а после наведения курсора на определенный элемент страницы. Событие onMouseover можно связать практически с любым объектом Web-страницы (текстом, изображением, кнопками, гиперссылками и т.д.). Его также можно использовать, чтобы повысить уровень интерактивности сценария.
Событие onMouseout
Это событие подобно событию onMouseover, но происходит в тех случаях, когда курсор мыши отводится от объекта.
Описание браузеров Просмотр WEB-страниц Программы, необходимые для просмотра гипертекста – браузеры, которые используются не только как средство просмотра, но и как почтовые программы, а также как средство загрузки файлов посредствам FTP. Две основные функции браузеров: просмотр WEB-страниц и редактирования их содержимого (элементы HTML).
В мире создано немало программ для просмотра HTML-документов: Mosaic, Cello, Global Network Navigator, Opera и др. Наиболее популярными браузерами, которые обеспечивают корректный просмотр гипертекста, являются Microsoft Internet Explorer иNetscape Communicator.
Microsoft Internet Explorer Этот браузер фирмы Microsoft удобен первую очередь тем, что является полностью русифицированным. В данный момент наиболее распространены 4 и 5 версии этого браузера. Microsoft Internet Explorer (MSIE) настолько тесно интегрирована с Windows, что его трудно назвать автономной программой. Скорее, это один из компонентов операционной системы.
Работа с браузером может начинаться с подключения к Интернату или вестись автономно, если все необходимые файлы находятся на локальном диске (то есть, диске своего компьютера). В поле Адрес на панели инструментов указывается URL. Адрес предваряется кодом, который определяет, с какой подсистемой Интерната мы хотим работать. Например, если мы ищем сайт компании Microsoft, то адрес должен быть таким: http//microsoft.com.
Код http указывает на то, что программа должна работать с системой гипертекстовых документов и использовать соответственный протокол (HyperText Transfer Protocol). Но могут быть и другие варианты адреса. Например, адрес с кодом ftp указывает на архив файлов, доступных по FTP, код mailto обозначает адрес электронной почты, а код file– файл на собственном компьютере.
После указания URL браузер загружает данные из Интернета и демонстрирует гипертекстовой документ, находящийся по заданному адресу.
Найдя какую–нибудь организацию, вначале увидим ее «домашнюю» страницу (home page). На ней есть подчеркнутые надписи – ссылки на другие страницы. Весь комплекс страниц (сайт) велик и его нельзя увидеть целиком. Гиперссылки позволяют передвигаться по страницам или частям одной страницы. Гиперссылкой может быть не только надпись, но и значок, рисунок или часть рисунка. Браузер имеет кнопки «Вперед» и «Назад», которые позволяют вернуться к пройденным страницам. Каждой странице соответствует один или несколько файлов, которые браузер помещает в папку временного хранения (кэш).
Кнопка «Остановить» позволяет прервать загрузку страницы. Применять ее можно в нескольких случаях: 1) Когда страница еще загружается, 2) Когда на странице много графики и нет времени ждать, пока она вся загрузится, 3) Когда браузер пытается открыть несуществующие документы.
Кнопка «Обновить» используется редко. При изменении файла, чтобы увидеть как он будет выглядеть, можно только обновить документ.
Кнопка «Назад» позволяет перейти на страницу, которая была открыта ранее. Эта возможность есть не во всяком документе.
Кнопка «Вперед» обеспечивает движение по цепочке просмотренных документов вперед, если были выполнены переходы назад.
«Домашняя страница» (home page)- понятие условное. Каждая фирма, работающая в Сети, имеет свою домашнюю страницу. Адрес домашней страницы указывается в качестве параметра программы и может быть изменен.
Поиск в Интернете осуществляется путем перехода к странице поискового сервера.
Кнопка «Избранное» указывает каталог необходимых Web-страниц. Используя эту кнопку, можно добавить текущую страницу в список избранных страниц или дать команду браузеру загрузить любую из страниц, перечисленных в списке.
Кнопка «Печать» выводит на печать текущий документ.
Кнопка «Размер» изменяет размер шрифта на текущей странице.
Просмотр компонентов WEB-страниц, в некоторых случаях, вызывает открытие еще одного окна браузера. При помощи значков на панели задач необходимо закрывать ненужные окна, чтобы не перегружать компьютер.
WEB-страница часто оборудована средствами электронной почты. Другими средствами «обратной связи» являются формы. Заполнив соответственные поля и щелкнув кнопку «отправить» (которая может иметь в форме название Go, OK, Send, Submitили другое), можно переслать на сервер необходимую информацию. Так, например, происходит заказ товаров в Интернет-магазинах или заполнение анкет во время виртуальных опросов.
С WEB-страницами и их компонентами (например, рисунками) можно поступить, как с обычными документами: сохранять на диске под определенным именем, или распечатывать.
При помощи WEB-страниц с ярлыками можно существенно облегчить пользование Интернетом или локальными ресурсами. Собранные на странице ссылки по определенной тематике, превращают ее в аналог папки Избранное. Иными словами, можно легко сделать набор справочников со ссылками на интересные WEB-страницы.
Можно иметь и несколько папок для избранных страниц. Папка Избранное хранит не сами документы, а ссылки на них. Если страница находится не на локальном диске, то для ее просмотра потребуется подключение к сети. В некоторых случаях возникает необходимость иметь копии реальных документов на своем компьютере. На кэш в этом случае полагаться нельзя, так как он регулярно обновляется. Для сохранения просмотренных документов существует несколько команд. При этом копируется не только HTML-документ, но и рисунки.
Средства просмотра HTML-кода дают возможность сохранить документ и даже его модернизировать при помощи гипертекстового редактора Microsoft Front Page. Также можно просмотреть HTML-код, открыв страницу в «Блокноте» (Notepad). Редактировать страницу в режиме источника очень удобно, так как можно сразу увидеть результаты внесенных изменений: после модификации страницы ее надо сохранить в текстовом редакторе, а затем в браузере щелкнуть на кнопку Обновить.
Часто, при просмотре страниц возникает проблема со шрифтами. Если шрифт на странице слишком мелкий или наоборот слишком крупный, вид документа легко изменить. Используя команду «Размер шрифта», чтобы изменить размер шрифта на время просмотра.
Основные инструменты настройки браузера собраны в окне Свойства обозревателя, который активизируется одноименной командой меню Сервис. На просмотр HTML-страницы влияют несколько параметров. На вкладке Общее имеются кнопки Цвета, Шрифты, Язык и Оформление, с помощью которых можно установить режимы воспроизведения станицы. В браузере назначаются для использования по умолчанию два шрифта. Два разных шрифта необходимы для прорисовки данных из соответственных элементов HTML. Какие именно шрифты надо применять, выберет пользователь. Важен также выбор кодировки: для русскоязычных документов применяются Windows-1251 или KOI-8. Можно выбрать и цвет, которым будет раскрашиваться текст, пройденные и неиспользованные гиперссылки.
На вкладке Дополнительные можно установить режим, при котором на странице воспроизводятся рисунки или мультимедийные компоненты.
На вкладке Программы можно выбрать приложения, которые будут использоваться по умолчанию совместно с браузером (HTML-редактор, программа электронной почты и др.).
Netscape Communicator Это комплекс программ (в настоящее время русифицирована версия 4.06) привлекает к себе внимание многими положительными свойствами. Его популярность во всем мире очень высока, и не только потому, что пользователи привыкли работать с его более ранними версиями. Интересными, например, представляются комментарии в строке состояния, которые дают представление о процессе загрузки страницы. Удачно организован доступ к параметрам. Браузер называется Netscape Navigator, а встроенный редактор гипертекста – Netscape Composer. В браузере реализована возможность создания закладок, что существенно облегчает поиск страниц. Несомненным удобством является легкость переключения режимов браузера и редактора.
Рассмотрим основные инструменты программы. Они, в основном, такие же, как и MSIE.
Кнопка «Назад». Возврат к странице, которая была открыта раньше текущей.
Кнопка «Вперед» Переход к странице, которая, была открыта позже текущей.
Кнопка «Обновить». Повторение загрузки страницы.
Кнопка «Домой». По умолчанию эта кнопка обеспечивает переход на домашнюю страницу Netscape, но пользователь может настроить программу на любую страницу, используя окно параметров.
Кнопка «Мой Netscape». Кнопка для перехода на страницу любителей Netscape. “Мой Netscape”- виртуальный клуб, в котором можно сделать свою WEB-страничку и получить ящик электронной почты.
Кнопка «Печать» используется для печати текущей страницы. В меню Файл имеются команды «Настройки страницы», «Предварительный Просмотр» и «Печать», которые позволяют настроить параметры и выполнить просмотр документа перед печатью.
Кнопка «Стоп» осуществляет остановку загрузки текущей страницы. Загрузка может быть продолжена после щелчка на кнопке «Обновить».
Кнопка с логотипом фирмы-производителя используется для инициирования загрузки станицы, но теперь такая команда не нужна. В данном браузере нажатие на логотип приводит на домашнюю страницу. Логотип снабжается анимацией, которая действует в течение загрузки текущей страницы.
В этом браузере, как и в предыдущем, есть поле Адрес. Но в отличие от MSIE, в раскрывающемся списке этого поля можно выбрать все недавно использующиеся адреса, а не только те, которые введены в строке вручную. Ещё один сервисный инструмент- файл закладок. Он является аналогом папки Избранное в Windows. Для доступа к закладкам на панели инструментов есть специальная кнопка.
На формат отображаемой страницы влияют команды меню «Вид». С его помощью устанавливается размер шрифта, кодировка страницы и другие параметры. Есть команда «Остановить анимацию», то есть смену изображений в сложных рисунках формата GIF, для возобновления анимации необходимо перезагрузить страницу, используя кнопку «Обновить».
Netscape Communication позволяет создавать варианты настроек программы (их ещё называют профили или конфигурации). Перед началом работы необходимо выбрать одну из конфигураций. Для каждого «пользователя» создаётся собственный файл закладок, журнал, кэш. Журнал связан с файлами кэш, так как при помощи журнала открываются страницы, которые когда-то были загружены из Интернета. Как журнал, так и кэш при необходимости можно очистить кнопкой в окне настроек.
В Netscape Navigator можно выбрать те же параметры просмотра, что и в MSIE: шрифты, используемые по умолчанию, цвета просмотренных и не просмотренных ссылок. Можно выбрать определённый фон для всех просматриваемых страниц или вообще отказаться от фона. Это удобно при разработке собственных страниц.
Браузеры позволяют загружать страницы без рисунков. Это ускоряет работу. Для отказа от изображения рисунков в NN надо сбросить флажок «Автоматическая загрузка изображений» в категории параметров «Дополнительные настройки».
Диалог для открытия файлов, расположенных локально, в MSIE и NN имеет особенность: используется два окна, а не одно, как в большинстве программ. Только во втором окне пользователь получает доступ к традиционному списку дисков, папок и файлов. Для задания адреса необходимой страницы, расположенной на жёстком диске, достаточно ввести путь к HTML-файлу в поле «Адрес».
В меню «Файл» есть команда «Сохранить как», которая используется для копирования текущей страницы в папку, выбранную пользователем. При этом можно выбрать формат файла: HTML или текстовый. В отличие от MSIE, который позволяет сохранить Web-страницу вместе с рисунком, NN копирует только основной файл страницы. Сохранение файла страницы требуется только в определённых случаях, так как вся страница автоматически записывается в кэш. Текстовый формат удобен в тех случаях, когда надо распечатать только текст страницы, не отягощая его элементами оформления и рисунками. Зато, если откроете страницу в редакторе Netscape Composer, то можно сохранить её в новой папке с рисунками.
Практическая часть
Терминология Англоязычное программное обеспечение попадало в нашу страну разными путями, и в вычислительной технике складывалась уникальная лингвистическая ситуация. Существует огромное количество терминов, которые соответствуют по произношению английским словам. Программисты и электронщики разговаривают на своём, хорошо понятном языке. Заимствованные слова имели только одно значение, и это было удобно. Такая система прижилась. Любые попытки вводить отечественную терминологию не имели успеха. Яркий пример- название клавиш. Клавиатура так и осталась нерусифицированной. Подобные феномены объясняются тем, что до недавнего времени никто серьёзно не занимался локализацией фирменного программного обеспечения. Теперь положение изменилось. Появилось много программных продуктов, использующих русский язык. Возникли чисто русские термины: «папка», «карман», «ярлык», «пиктограмма»… В этих случаях теряется однозначность терминов, возникли двойные термины: Internet и Интернет.
В сфере гипертекстовых технологий в этом смысле обстоит иначе. Никто не называет браузер «просматривателем», а для «World Wide Web» есть красивое русское название «Всемирная паутина». Видимо, в каждом случае необходимо своё решение: использовать русское слово или заимствовать английское. Гипертекст породил много специальных терминов.
Элемент (element) — конструкция языка HTML.Это контейнер, содержащий данные и позволяющий отформатировать их определённым образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.
Тег (tag) – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web- страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Атрибут (attribute) – параметр или свойство элемента. Это переменная, которая имеет стандартное имя и которой может присваиваться определённый набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
Фрейм (frame) –этот термин имеет два значения. Первое- область документа со своими полосами прокрутки. Второе — одиночное изображение в сложном (анимационном) графическом файле (по аналогии с кадром кинофильма).
Примечание — вместо термина «фрейм» в специальной литературе и локализованных программных продуктах иногда можно встретить термин «кадр» или «рамка».
HTML– файл илиHTML– страница – документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html. В гипертекстовых редакторах и браузерах эти файлы имеют общее название «документ».