3 Введение WWW (Всемирная паутина) это мультимедийная, гипертекстовая, интерактивная информационная среда. WWW это десятки миллионов серверов, содержащих Web-страницы связанные между собой посредством гиперссылок. Стандартный Web-документ представляет собой текстовый файл, размеченный средствами HTML, который может быть просмотрен с помощью браузера. Браузер (browser) специальная программа для просмотра Webстраниц. Основное назначение браузера принять введенный пользователем адрес (URL) искомой страницы, скопировать ее с сервера в Интернете на диск локального компьютера (в специально отведенную "буферную" область), а затем правильно отобразить все элементы страницы (текст, графику, звук и т.п.) в рабочем окне. Браузеры используются не только как средство навигации в Интернете, но и для просмотра любых HTMLдокументов, а также рисунков форматов GIF и JPEG в режиме "off-line", то есть без подключения к Интернету. HTML позволяет не только размечать текст, но и создавать списки, таблицы, формы ввода данных и другие элементы оформления. Графика, аудио- и видеозаписи, доступные с Web-страниц, хранятся в отдельных файлах и документ содержит только ссылки на них. Сегодня на языке гипертекста все чаще выполняют различного рода документации, базы данных и пр., распространяемые на дисках CD-ROM. Создание Web-страничек призвано показать их внутреннее строение, провести путем практического освоения тех правил и закономерностей, которые лежат в основе реализации мультимедийного контента Всемирной Паутины и, на основании этого, достичь эффективного использования возможностей WWW и осмысленного, продуктивного освоения его ресурсов в конкретной предметной области. Цель преподавания: Формирование у студентов информационной культуры в области глобальных компьютерных сетей и технологий создания контента World Wide Web. Задачи изучения: 1) Получить научные знания о современных языках гипертекстовой разметки, их назначении, областях использования, возможностях и перспективах. 2) Научиться применять HTML для создания Web-страниц и небольших сайтов на основе использования разнообразного программно-технологического инструментария; 4 3) Приобрести навыки обеспечения интерактивности Web-страниц на основе использования программных средств, реализованных на JavaScript и Java. Понятие HTML Название языка HTML является сокращением от HYPERTEXT MARKUP LANGUAGE, то есть "язык гипертекстовой разметки". Гипертекст (hypertext) - текст, представленный в виде ассоциативно связанных блоков, переход между которыми осуществляется с помощью гиперссылок. Гиперссылка фрагмент текста (как правило отличающегося элементами форматирования: цвет, подчеркивание, курсив) или графика, выбор которого позволяет выполнить переход к другому фрагменту текста (файла, Web-странице). Разметка вставка в текст дополнительных служебных символов (например, пометки корректора тоже можно считать своего рода разметкой). Каждый служебный символ в HTML представляет собой команду, которая указывает программе-браузеру, как следует отображать текст. HTML является компьютерным языком, но не является языком программирования, он предназначен не для написания программ, а совсем для других целей. Язык HTML обладает собственным синтаксисом, терминологией и правилами. Идею HTML и WEB впервые выдвинул ученый Тим Бернерс-Ли (TIM BERNERS-LEE), сотрудник CERN (Европейского центра ядерных исследований) из Женевы, Швейцария. Сегодня актуален "динамический HTML". (коммерческое название реализаций HTML 4.0.). Самыми значительными отличиями HTML 4.0 являются: использование кодировки UNICODE; использование перечней стилей (STYLE SHEET). Перечень стилей управляет внешним видом документа; тег <OBJECT>, используемый для работы с мультимедиа (с видеоклипами и звуком); интерактивные элементы управления; Динамический HTML позволяет создавать такие документы, которые будут отвечать на действия пользователя мгновенно: любые визуальные характеристики текста (цвет, шрифт, размер и пр.) или объектов управления (размер, цвет кнопок, текст на них), музыкальные эффекты (звуки конкретных событий, либо фоновое звуковое сопровождение странички в це- 5 лом) и их отдельные черты (громкость или скорость воспроизведения звука) теперь могут быть привязаны к любому действию пользователя, либо вступать в силу в конкретно запрограммированное время - примерно так, как это возможно сейчас, например, в VISUAL BASIC. XML XML расширяемый язык разметки (Extensible Markup Language) XML – это метаязык, определяющий другие языки разметки для специфических целей. XML используется для разметки стандартных документов во многом так же, как HTML. Однако XML превосходит его при работе со структурированными данными, такими, как результаты запроса, метаинформация об узле Web или элементы и типы схемы. Документ XML выглядит во многом похожим на HTML. Однако, в отличие от HTML, смысл тега зависит от регистра, а каждый открывающий тег должен во всех случаях иметь парный закрывающий тег. Не ограничивая автора каким-либо фиксированным набором тегов, XML позволяет ему вводить любые имена, представляющиеся полезными. Эта возможность является ключевой для активного манипулирования данными. Сегодня XML воспринимается браузерами MS-Explorer версии 4.0 и выше. Назначение HTML HTML был задуман как универсальный язык для функциональной классификации различных частей документа. Другими словами, HTML определяет, для чего нужна та или иная часть вашей страницы. Вы указываете, где находится заголовок, какую часть документа следует выделить, где должны располагаться графические изображения и т. д. HTML предназначен для того, чтобы классифицировать части документа и обеспечивать его правильное отображение в браузере. HTML спроектирован для работы на самых разных платформах. HTML можно использовать для вывода документов не только на экран компьютера, но и на другие устройства - принтер, факс, телевизор, устройство Брайля и т. д. HTML-документ HTML-документ представляет собой текстовый файл имеющий расширение *.htm дополненный элементами разметки (тегами), в котором содержатся ссылки на другие файлы (с текстовой, графической, звуковой информацией). При просмотре в окне браузера одновременно может отображаться содержимое исходного текстового файла (за исключением элементов разметки и служебной информации) и тех файлов, на которые 6 имеются ссылки. Просматривать код можно в текстовом редакторе, в том числе и из браузера. Для Microsoft Word 2000 одним из основных является HTML-формат (текстовый процессор можно настроить так, что все документы будут сохраняться только в данном формате и без каких-либо потерь). Формат HTML имеет следующие преимущества при сохранении документов Word: Повышенная надежность сохраняемых документов (повреждение хотя бы одного байта в документе Word приведет к полной нечитаемости файла, а изменение даже нескольких десятков байт в HTML-документе в самом крайнем случае может привести к нечитаемости лишь соответственных фрагментов текста); Информационная компактность файла (конвертор Word 2000 создает больший по размерам HTML-файл, чем конвертов Word 97, однако в обоих случаях результирующие HTML-файлы будут значительно меньше по информационному объему, чем исходный документ). Неудобством можно считать то, что документ с внедренными графическими объектами будет располагаться в нескольких файлах. При конвертации документа Word-97, часть информации о форматировании документа теряется. Что же касается самих HTML-документов, то конверторы Word создают очень нерациональный HTML-код для размещения на Web. HTMLконвертор из Word 97 вставляет множество тегов <font>. HTML-конвертор из Word 2000 использует не HTML, а новый метаязык XML, который поддерживается не всеми моделями браузеров. 7 HTML-редакторы В настоящее время широко используются два типа редакторов HTML: 1. Редакторы типа "что видишь, то и получишь" - безусловными лидерами являются Microsoft FrontPage и Macromedia DreamWeaver. Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word, в HTML-документы. 2. Редакторы собственно HTML-текстов: HomeSite, HotDog, First Page, и т.д.. В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. В общем случае, для создания HTML-документа необходим простейший текстовый редактор и программа-браузер. Использование же специальных редакторов HTML обусловлено их способностью добавлять в текст те или иные метки (теги) необходимые при создании документа, что экономит время пользователя. Окно программы HTML Pad 1 2 1) Строка заголовка 2) Строка меню 3 4 8 3) Панель инструментов 4) Рабочее поле Основные возможности HTML Pad 1. Открытие текстовых и HTML документов. 2. Ввод и редактирование текста. 3. Форматирование текстовых документов исходя из HTML-разметки, причем большинство тегов можно добавлять, нажимая на кнопки на панели инструментов или выбирая соответствующие команды из того либо иного меню. Возможна одновременная работа только с одним документом! Первый HTML-документ Итак, как уже упоминалось выше, HTML-документ – это текстовый файл с расширением *.htm (*.html), содержащий помимо собственно текстовой части информацию о форматировании его фрагментов, выраженную в виде английских букв (слов, словосочетаний), заключенных между знаками < и >. Такой элемент текста (например, <html>) называется меткой или тегом. Теги представляют собой команды для браузера, в соответствии с которыми он изображает страницы на экране. В браузере отображаются не сами теги, а их эффект. Неизвестные теги и атрибуты игнорируются. Пример: нормальный шрифт <i>наклонный шрифт</i> снова нормальный шрифт В окне браузера: нормальный шрифт наклонный шрифт снова нормальный шрифт В этом примере, метка <i> дает команду браузеру выводить весь текст, идущий после этой метки, курсивом – это называется открытием тега. Эта же самая метка, но написанная с наклонной чертой – </i>, отменяет дальнейший вывод текста наклонным шрифтом – это называется закрытием тега. В дальнейшем структуру <…>…</…> – будем называть тегом требующим закрытия. Он оказывает действие только на тот элемент, который заключен в него. Также в HTML есть теги не требующие закрытия. Их структура <…>… Они производят действие не над объектом, а сами по себе. 9 Пример: строка<br>еще одна строка<hr> В окне браузера: строка еще одна строка В этом примере тег <br> переводит строку, а тег <hr> рисует горизонтальную линию. <br>, <hr> – теги не требующие закрытия. Кроме того, многие теги, помимо имени, могут содержать атрибуты – элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. Атрибуты представляют собой ключевые слова, находящиеся в угловых скобках после имени тега и отделенные от него пробелом. Например, <p align=right>…</p> (данный тег выравнивает заключенный в него абзац по правому краю). Для некоторых атрибутов необходимо указать значение, перед которым стоит знак = (например, тег <HR WIDTH="100"> рисует горизонтальную линию шириной в 100 пикселов). В HTML поддерживается, так называемая, вложенность тегов. Пример: <b>жирный шрифт.</b> шрифт<u>подчеркнутый жирный шрифт</u>жирный В окне браузера: жирный шрифт подчеркнутый жирный шрифт жирный шрифт. Тег <b> выводит текст жирным шрифтом. Тег <u> выводит текст с подчеркиванием. В примере видно, как в тег <b> вложен тег <u> , и при этом тег <u> не прекращает действия тега <b>, а дополняет его. И здесь действует правило – если один тег вложен внутрь другого тега, то первым должен закрываться вложенный тег. Теги можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY>, <bOdY> и <Body> будут восприняты браузером одинаково. 10 Структура HTML-документа <html> <head> <title> Безымянный </title> </head> <body> Это наш первый HTML-документ. </body> </html> Для удобства чтения были введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы абзаца и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так: <html><head><title>Безымянный</title> </head> <body>Это наш первый HTML-документ. </body></html> Обязательные метки <HTML>…</HTML> HTML документ – всегда заключен внутри тега <html>. Этот тег сообщает браузеру, что данная страница написана на HTML. Код самой странички состоит из 2-х частей – заголовка и тела. <HEAD>…</HEAD> Заголовок заключен внутри тега <head>. Внутри этого тега может содержаться подробная информация о документе: название, сведения об авторе, кодировка документа сведения для поисковых машин и др. <TITLE>…</TITLE> Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Рекомендуется название не длиннее 64 символов. <BODY>…</BODY> Тело заключено внутри тега <body>. Тело содержит непосредственно информационное наполнение – текст, таблицы, гиперссылки – т.е. то, что управляет изображением странички на экране. 11 На этом теге следует заострить внимание, так как он содержит важные атрибуты, без знания которых невозможно обойтись. Атрибут bgcolor="цвет" задает цвет фона (при отсутствии этого атрибута цвет фона – белый); атрибут text="цвет" задает цвет текста (при его отсутствии цвет текста – черный); link="цвет" – цвет гиперссылок; alink="цвет" – цвет активной гиперсылки; vlink="цвет" – цвет посещенных гиперссылок. Кроме того, вместо атрибута bgcolor="цвет" может использоваться атрибут background="имя_графического_файла" – фоновый рисунок. <html> <head> <title>Безымянный</title> </head> <body bgcolor="red" text="white" link="navy" alink="#33CC66" vlink="#FFCCFF"> Это наш первый HTML-документ. </body> </html> Задание цвета производится несколькими способами: названием – "red"; шестнадцатеричным числом – "#FFFFFF"; в десятичном виде – "255, 0, 0"; в процентах – "30%, 40%, 30%". Допустимые названия цветов: aqua – аквамарин navy – ультрамарин black – черный olive – оливковый blue – синий purple – пурпурный fuchsia – фуксиновый red – красный green – зеленый silver – серебристый gray – серый teal – сизый lime – светло-зеленый white – белый maroon – каштановый yellow – желтый 12 Форматирование шрифта Для задания фрагменту текста некоторых параметров шрифта, отличных от первоначальных, используется тег <font>…</font> с сопутствующими атрибутами. Атрибут color устанавливает цвет шрифта. Атрибут size устанавливает размер шрифта. Размер шрифта в HTML задается: в процентах – size="150%"; в пикселах – size="30px"; в типографских пунктах – size="24pt". Атрибут face устанавливает тип шрифта: Courier, Arial и т.д. Пример: <font face="Arial" color="red" size="24pt">Пример</font> В окне браузера: Пример В HTML допускается два способа задания параметров шрифта, таких как начертание и некоторые дополнительные эффекты выделения фрагментов текста. Во-первых, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. Во-вторых, можно пометить некоторый фрагмент текста, как имеющий некоторый отличный от изначального логический стиль. Физические стили <B>…</B> От английского bold – полужирный. Шрифт текста, к которому применен данный тег, будет иметь полужирное начертание. <I>…</I> От английского italic – курсивный. Шрифт текста, к которому применен данный тег, будет иметь курсивное начертание. <U>…</U> От английского underlined – подчеркнутый. Текст, к которому применен данный тег, будет подчеркнут. 13 <S>…</S> От английского striked out – зачеркнутый. Текст, к которому применен данный тег, будет зачеркнут. <BIG>…</BIG> Данный тег выводит текст шрифтом на один размер больше изначального. <SMALL>…</SMALL> Этот тег выводит текст шрифтом на один размер меньше изначального. <TT>…</TT> Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа. Логические стили При использовании логических стилей автор документа не может знать заранее, что он увидит в окне браузера. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили. <EM>…</EM> От английского emphasis – акцент. Как правило соответствует курсивному начертанию. <STRONG>…</STRONG> От английского strong emphasis – сильный акцент. Как правило соответствует полужирному начертанию. <CODE>…</CODE> Рекомендуется использовать для фрагментов исходных текстов. <SAMP>…</SAMP> От английского sample – образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. <KBD>…</KBD> От английского keyboard – клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. 14 <VAR>…</VAR> От английского variable – переменная. Рекомендуется использовать для написания имен переменных. Форматирование абзацев Для задания фрагменту текста некоторых параметров абзаца используется тег <p>…</p>. Этот тег оформляет все заключенные в него элементы в параграф. Атрибут align управляет выравниванием текста, он может принимать следующие значения: right, left, center, justify – соответственно выравнивание по правому, левому краям страницы, по центру и по ширине. Пример: <p align=left>Пример1</p> <p align=center>Пример2</p> <p align=right>Пример3</p> В окне браузера: Пример1 Пример2 Пример3 <BR> Смысл абзаца в HTML состоит в том, что между двумя соседними абзацами автоматически устанавливается некоторый интервал, больший чем междустрочный интервал внутри данного абзаца. Если же у нас отсутствует необходимость визуально различать абзацы в окне браузера, однако, необходимо, чтобы каждое из группы слов начиналось с новой строки, то вместо тега <p>…</p> используется тег <br> – тег перехода на следующую строку (закрытия не требует), при этом сохраняется выравнивание, указанное в теге <p>. Пример: <p align=left>Пример1</p> <p align=left>Пример2<br> Пример3</p> В окне браузера: Пример1 Пример2 Пример3 <PRE>…</PRE> Как было отмечено ранее, браузеры игнорируют символы абзаца и множественные пробелы в HTML-файлах. Из этого правила, однако, есть исключение. Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted), выводится браузером на экран как есть – со всеми пробелами, символами табуляции и абзаца. 15 <BLOCKQUOTE>…</BLOCKQUOTE> Текст, заключенный между этими метками, выводится браузером на экран с увеличенным левым полем. Заголовки По аналогии с текстовым процессором Microsoft Word в HTML поддерживается встроенные стили заголовков. Они определяются тегом <h#>, где # – число от 1 до 6. Пример: <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6> В окне браузера: Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Так же, как и для тега абзаца, для заголовков применяется атрибут align, управляющий выравниванием текста заголовка. Списки В HTML существует 3 вида списков: маркированные, нумерованные и многоуровневые (списки определений) списки. <UL>…</UL> Маркированный список. В маркированном списке каждый элемент списка выводится с новой строки, имеет некоторый отступ слева и помечен маркером. Отдельные элементы отделяются друг от друга тегом <li>…</li>. <OL>…</OL> Нумерованный список. Каждый элемент нумерованного списка имеет свой порядковый номер и выводится с новой строки. Нумерация строк происходит автоматически. Так же, как и для маркированного списка, отдельные элементы отделяются друг от друга тегом <li>…</li> и имеет место левый отступ. 16 Пример: В окне браузера: <ul> <li>это</li> <li>маркированный</li> <li>список</li> </ul> <ol> <li>это</li> <li>нумерованный</li> <li>список</li> </ol> 1. 2. 3. это маркированный список это нумерованный список <DL>…</DL> Список определений. Список определений отличается от других видов списков тем, что имеет несколько уровней отступов слева. Термины, которым нужно дать определения, заключаются в тег <dt>…<dt>, а сами определения заключены в тег <dd>…<dd>. Пример: <dl> <dt>первый термин</dt> <dd>это определение</dd> <dt>второй термин</dt> <dd>это определение</dd> <dt>третий термин</dt> <dd>это определение</dd> </dl> В окне браузера: первый термин это определение второй термин это определение третий термин это определение Если определяемые термины достаточно коротки, для списков определений можно использовать атрибут compact. Пример: <dl compact> <dt>А</dt> <dd>Первая буква алфавита</dd> <dt>Б</dt> <dd>Вторая буква алфавита</dd> <dt>В</dt> <dd>Третья буква алфавита</dd> </dl> В окне браузера: А Б В Первая буква алфавита Вторая буква алфавита Третья буква алфавита 17 Элемент любого списка может содержать в себе список любого вида. Число уровней вложенности, в принципе, не ограничено, однако злоупотреблять вложенными списками все же не следует. &-последовательности Из правил применения HTML-разметки вытекает логичный вопрос: как показать на экране в окне браузера текст, своим видом подобный тегам, если фрагмент текста вида <…> трактуется браузерами как некоторая команда? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ <, когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than – меньше, чем). Знак > кодируется последовательностью &gt; (по первым буквам английских слов greater than – больше, чем). Символ & (амперсанд) кодируется последовательностью &amp; Двойные кавычки " кодируются последовательностью &quot; Важно! Точка с запятой – обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть строчными (маленькими). Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCIIкодами выше 127 только в виде &-последовательностей. Комментарии Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев. <!-- Это комментарий --> Графика Современные веб-страницы невозможно представить без графического оформления. Графические изображения в HTML добавляются двумя способами: непосредственная вставка рисунка и использование рисунка в качестве фона (фоновый рисунок или, иначе говоря, текстура). 18 Большинство цветных изображений и фонов в Сети являются файлами в формате CompuServe GIF (Graphics Interchange Format). Изображения GIF ограничены по количеству цветов не более 256. В 1989 году формат GIF89a был дополнен новыми возможностями - прозрачностью, черезрядной загрузкой и анимацией, которая осуществляется цикличным чередованием изображений. Прозрачность (transparency) в GIF дает возможность использовать изображения неправильной формы на любом фоне. Прозрачность осуществляется за счет того, что какой либо цвет (указываемый при экспорте файла) не показывается. В целях облегчения процесса загрузки графики были разработаны технологии, позволяющие показывать вариант исходного изображения с более низким разрешением до того, как загрузка окончена. В GIF это реализуется с помощью алгоритма чресстрочной загрузки (interlaced). Информация в обычном GIF-файле хранится порядово, начиная сверху. В GIF с чресстрочной загрузкой чтение тоже начинается сверху, но затем пропускается несколько рядов, которые заполняются в следующие "проходы". GIF целесообразно использовать для хранения: малоразмерных графических элементов: значков-ссылок, надписей и миниатюр; изображений, состоящих из больших областей однородной окраски и не имеющих множества цветов и тонких цветовых переходов. Для полноцветных изображений (24-битные цвета) в WWW используется формат JPEG (Joint Photographic Experts Group). JPEG сжимает графику фотографического качества и сохраняет в большой степени точность соответствия цветов. Это делает файлы JPEG меньшими по размеру, уменьшая время загрузки. Можно установить ту или иную степень сжатия JPEG-файла, но поскольку сжатие у данного формата приводит к потере качества, чем сильнее будет его степень, тем большее количество цветовой информации будет утеряно. JPEG целесообразно использовать для хранения полноцветных фотографий или образцов художественной графики, включающих тонкие градации цвета и имеющих размер более 200 пикселей по каждой из координат. PNG (произносится как "пинг") (Portable Network Graphics). Этот формат предназначен специально для передачи изображений по сетям. Этот формат поддерживает сжатие без потерь, чресстрочность (interlacing), прозрачность цвета (transparency), хранение пользовательских данных (например, комментариев). Но, в отличие от GIF, он может сохранять truecolor-изображения с глубиной цвета до 48 бит на пиксель, изображения в шкале серого цвета с глубиной до 16 бит на пиксель, поддерживает альфа-канал и гамма-индикатор. Кроме того, PNG может использоваться абсолютно бесплатно. Однако PNG не может хранить несколько изображе- 19 ний в одном файле и, следовательно, анимация, одна из самых привлекательных черт формата GIF, в PNG пока не доступна. Используется как заменитель GIF. В Интернете пользователи работают на компьютерах разных платформ, с разными 256-цветными системными палитрами. Для того, чтобы представляемые цвета были корректно отображены и на РС, и на МАС - а это самые распространенные на сегодняшний день платформы, разработана специальная "безопасная сетевая палитра", содержащая 216 цветов, практически одинаковых для двух платформ. <IMG SRC="ИМЯ_ФАЙЛА"> Тег <img> является тегом не требующим закрытия. Обязательный атрибут src="адрес файла картинки" указывает на местонахождения файла картинки. Если картинка находится в той же папке, что и html-файл, в который она добавляется, то можно указывать только полное имя файла (собственное имя файла и его тип; например: вася.jpg или рисунок.gif). Если картинка находится не в одной папке с html-файлом, то необходимо указывать полный адрес картинки, например: src="d:/distrib/мои рисунки/car.jpg" или src="http://daemon.brsu.brest.by/images/webspid.gif". Желательно, при использовании нескольких графических файлов в процессе создания веб-страницы, помещать данные файлы в подкаталог того каталога, в котором содержится сама html-страница. То есть, пусть у нас имеется папка А, в которой находится страница 1.htm. Создадим в этой папке А еще одну папку В, в которую и будем помещать все графические файлы, используемые в этой странице. Тогда тег вставки рисунка будет выглядеть следующим образом <img src="В/имя_файла">. Атрибут border указывает ширину рамки вокруг картинки, задается в пикселах. Атрибут align управляет горизонтальным выравниванием картинки на странице, этот же атрибут используется для вертикального выравнивания картинки относительно текста. Параметр "выравнивание" может принимать следующие значения: left – горизонтальное выравнивание по левому краю окна; right – горизонтальное выравнивание по правому краю окна; center – горизонтальное выравнивание по центру; bottom – вертикальное выравнивание по нижнему краю относительно текста абзаца; middle – вертикальное выравнивание по центру относительно текста; top – вертикальное выравнивание по верхнему краю изображения относительно текста абзаца. 20 Атрибуты hspace – отступ справа и слева и vspace – отступ сверху и снизу указывают горизонтальный и вертикальный отступ от картинки, задаются в пикселах. Атрибут alt устанавливает сообщение, которую выведет браузер, если по каким-либо причинам картинка не загрузится. В качестве сообщения может выступать любая фраза. Атрибуты width – ширина и height – высота задают ширину и высоту картинки в пикселах или в процентах. Применение этих атрибутов ускоряет загрузку страницы. Когда применяются эти атрибуты, браузер знает сколько места оставить под картинку и сначала загружает текст. Так же эти атрибуты применяются для изменения размеров картинки. Если мы зададим только один параметр – высоту ширину, – то картинка изменит свои размеры с сохранением пропорций относительно исходного размера. В частности, в процентах рекомендуется задавать один параметр. Данный вариант задания параметров высоты (ширины) оптимизирует картинку под любой размер окна браузера, то есть, в случае, если мы задали height=50%, наша картинка будет занимать половину окна браузера по высоте невзирая на размеры окна. BACKGROUND="ИМЯ_ФАЙЛА" Данное выражение является атрибутом. Используется с тегом <body> вместо атрибута bgcolor и помещает некоторый рисунок в качестве фона (заполняет множеством этих рисунков все пространство окна браузера). Правила задания имени фонового рисунка точно такие же, как и при использовании атрибута src в теге вставки картинки. Пример: <html> <head> <title> untitled </title> </head> <body background="wall0.jpg"> <img src="2.jpg" border=2 alt="2.jpg"> </body> </html> Рисунок wall0.jpg В окне браузера: 21 Гиперссылки Как уже упоминалось в самом начале, сокращение HTML означает "язык гипертекстовой разметки". В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. <A HREF="адрес перехода">произвольный текст</A> В качестве параметра "адрес перехода" может использоваться несколько типов аргументов. Самое простое – это задать имя другого HTMLдокумента, к которому нужно перейти. Например: <a href="1.htm">Перейти к документу 1</a> Фраза Перейти к документу 1 в документе будет выделена цветом и подчеркиванием. При нажатии на нее левой кнопкой мыши в текущее окно будет загружен документ 1.htm. Обратите внимание: если в адресе перехода не указан путь к файлу, переход будет выполнен внутри той папки, в которой содержится исходный html-документ. Из этого следует одно очень важное практическое соображение. Если вы подготовили к публикации некоторую группу html-документов, которые ссылаются друг на друга только по имени файла и находятся в одной папке на вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или на Интернет. Можно создать ссылку перехода, скажем, на какой-либо графический файл. Для этого необходимо указать его в качестве адреса перехода. Например: <a href="dog.jpg">Перейти к рисунку</a> Кроме того, в качестве объекта ссылки может выступать не только какой-то текст, но и графическое изображение. Просто мы должны тег вставки картинки заключить в тег ссылки. Пример: <a href="1.htm"> <img src="Картинка.jpg" border=2 width=60 height=90 alt="моя картинка"> </a> 22 В данном случае, при нажатии левой кнопкой мыши на картинку мы перейдем на страницу 1.htm. И это еще не все. Наиболее интересным является тот факт, что существует возможность создать гиперссылку используя какой-либо фрагмент графического изображения. Пример: <html> <head> <title> untitled </title> </head> <body> <map name=FPMap1> <area shape=poly coords=107,100,140,100,150,145,100,145 href="4.htm" alt="Кораблик"> </map> <center> <img width=300 src="slon1.jpg" useMap=#FPMap1 border=0> </center> </body> </html> В окне браузера: 23 <MAP>…</MAP> Данный тег позволяет задать некоторую область, которую можно затем использовать в теге вставки картинки. При этом размеры картинки должны быть заданы в абсолютном виде, то есть в пикселах. В теге гиперссылки появляется атрибут shape=poly, то есть в данном случае в качестве гиперссылки будет выступать некая область, ограниченная замкнутой полилинией, координаты узлов которой определяются атрибутом coоrds=x1,y1,x2,y2,…,…,xn,yn. Отсчет производится от левой границы картинки (для x) и от верхней границы (для y). Соответственно, тег вставки графического объекта дополняется командой useMap=#FPMap1, где FPMap1 – имя, заданное в теге <map> атрибутом name. Кстати, область подобной гиперссылки визуально определить нельзя. Для ее нахождения необходимо поводить курсором мыши по картинке, и там, где он видоизменится в "палец", и будет область гиперссылки. При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере. Допустим, что необходимо осуществить переход из файла 1.htm к словам "Переход закончен" в файле 2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.htm: <A NAME="AAA">Переход закончен</A> Слова Переход закончен при этом никак не будут выделены в тексте документа. Затем в файле 1.htm (или в любом другом) можно определить переход на этот анкер: <A HREF="2.htm#AAA">Переход к анкеру AAA</A> Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.htm – достаточно только включить в него вот такой фрагмент: <A HREF="#AAA">Переход к анкеру AAA</A> На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа. Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно. 24 Возможно осуществлять ссылки не только на HTML-документы, но и на другие виды ресурсов: <a href="ftp://server/directory/file.ext">Выгрузить файл</a> Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя. <a href="mailto:user@mail.box">Послать письмо</a> Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке to: ("Куда") окна почтовой программы будет указано user@mail.box. В теге гиперссылки может также присутствовать атрибут target, который указывает, куда должна загружаться вызываемая страничка. Если параметр target="название окна" указать равным blank, то браузер загрузит вызываемую страничку в новое окно. Если этот атрибут опустить, то новая страничка загрузится в текущее окно. К этому атрибуту мы вернемся, при рассмотрении темы Фреймы. Вставка звука и видео на страницу Web-страницы предполагают мультимедийный контент и могут включать фоновую музыку и архивы музыки, песен, видео. Это производится тэгом <EMBED>…<EMBED> Пример: <embed src="Vashfail.mid" width="47" height="15" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="true"></embed> необходимый атрибут src="Vashfail.mid" – вместо Vashfail.mid надо вставить ваш MIDI (*.mid), WAV (*.wav) или AVI (*.avi) файл; width="47" height="15" – здесь вместо цифр укажите ширину (width) и высоту (heigth) пульта управления; controls="smallconsole" – при использовании этого атрибута пульт становится маленьким; autostart="false" – надо ли проигрывать снова Ваш видео или музыкальный ролик (false – нет, true – да); loop="true" – повторять ролик с самого начала (false – нет, true – да); play_loop="2" – если да, то сколько раз (вместо 2 поставьте кол-во раз); 25 hidden="true" – спрятать пульт ролика (false – нет, true – да). Но можно, и даже лучше, ставить просто ссылку на видео файл, так как браузер сам запускает плагины для их воспроизведения. И отпадает надобность во вставке вышеперечисленного HTML кода. Ссылку можно поставить так: <a href="VashVideoFail.avi">Мой видео файл</a> Таблицы Для чего нужны таблицы? На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы. До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя. <TABLE>…</TABLE> Данный тег объявляет таблицу. Кроме того, метка <table> может включать несколько атрибутов: ALIGN Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо). WIDTH Ширина таблицы. Ее можно задать в пикселах (например, width=400) или в процентах от ширины страницы (например, width=80%). BORDER Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, border=4). Если атрибут не установлен, таблица показывается без рамки. CELLSPACING Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, cellspacing=2). 26 CELLPADDING Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, cellpadding=10). BORDERCOLORDARK Атрибут bordercolordark="цвет" задает цвет верхней и левой стороны рамки таблицы. BORDERCOLORLIGHT Атрибут bordercolorlight="цвет" задает цвет нижней и правой стороны таблицы. BORDERCOLOR Если вместо bordercolordark и bordercolorlight поставить один атрибут bordercolor="цвет", то вся рамка таблицы будет нарисована одним цветом. BGCOLOR С помощью атрибута bgcolor="цвет" можно задать цвет фона для отдельной строки, ячейки или для всей таблицы. BACKGROUND Если нам необходимо в качестве фона иметь картинку, то в этом нам поможет атрибут background=" имя_графического_файла ". Этот атрибут можно использовать с тегами <table>, <tr> и <td>. <CAPTION>…</CAPTION> Таблица может иметь заголовок, хотя заголовок не является обязательным. Метка <caption> может включать атрибут align. Допустимые значения: <caption align=top> (заголовок помещается над таблицей) и <caption align=bottom> (заголовок помещается под таблицей). <TR>…</TR> Каждая строка таблицы заключена в этот тег. Он может включать следующие атрибуты: ALIGN Устанавливает выравнивание текста в ячейках строки. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо). VALIGN Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign=top (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю). 27 <TD>…</TD> Каждая ячейка таблицы начинается с метки <td> и заканчивается меткой </td>. Метка <td> может включать следующие атрибуты: NOWRAP Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. COLSPAN Устанавливает "размах" ячейки по горизонтали. colspan=3 означает, что ячейка простирается на три колонки. Например, ROWSPAN Устанавливает "размах" ячейки по вертикали. Например, rowspan=2 означает, что ячейка занимает две строки. ALIGN Устанавливает выравнивание текста в ячейке. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо). VALIGN Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: valign=top (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю). WIDTH Устанавливает ширину ячейки в пикселах (например, width=200). HEIGHT Устанавливает высоту ячейки в пикселах (например, height=40). Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект &nbsp; (non-breaking space – неразрывающий пробел). Ячейка попрежнему будет пустой, а рамка вокруг нее будет. Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу. Рассмотрим несколько примеров. Пример 1 Управление размерами: <table border="10" width="100%"> <tr> <td width="20%">width="20%"</td> 28 <td width="30%">width="30%"</td> <td width="50%">width="50%"</td> </tr> </table> width= "20%" width= "30%" width= "50%" Пример 2 Выравнивание содержимого ячеек: <table border="1" width="100%"> <tr> <td width="33%" align="left"> align="left" </td> <td width="33%" align="center"> align="center" </td> <td width="34%" align="right"> align="right" </td> </tr> <tr> <td valign="top"> valign="top" <br><br> </td> <td valign="middle"> valign="middle" </td> <td valign="bottom"> valign="bottom" </td> </tr> </table> align="left" valign="top" align="center" valign="middle" align="right" valign="bottom" Пример 3 Отступы: <table border="1" width="100%" cellpadding="10" cellspacing="10"> <tr> <td width="33%" > Ячейка 1 </td> <td width="33%" > Ячейка 2 </td> <td width="34%" > Ячейка 3</td> </tr> </table> Ячейка 1 Ячейка 2 Ячейка 3 29 Пример 4 Сложные таблицы: <table border="1"> <tr> <td rowspan="2">rowspan="2"</td> <td colspan="2">colspan="2"</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> </tr> <tr> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr> </table> rowspan="2" ячейка colspan="2" ячейка ячейка ячейка ячейка Пример 5 Цветовое оформление: <table cellspacing="10" border="5" bordercolordark="black" bordercolorlight="gray"> <tr bgcolor="blue"> <td>строка</td> <td>с голубым</td> <td>фоном</td> </tr> <tr> <td bgcolor="red">красный фон</td> <td bgcolor="yellow">желтый фон</td> <td bgcolor="green">зеленый фон</td> </tr> <tr> <td colspan="3" background="Wood2-small.jpg"> Ячейка с фоновым рисунком </td> </tr> </table> 30 строка с голубым фоном красный фон желтый фон зеленый фон Ячейка с фоновым рисунком Фреймы В HTML существует возможность разделить основное окно, в котором отображаются веб-страницы, на несколько частей, которые называются фреймами. Фрейм, по сути, представляет собой окно, в которое загружается отдельная страница. В результате в одном окне отображается сразу несколько страниц. В принципе, для того, чтобы создать окно с фреймовой структурой, необходимо создать новый html-документ, который и будет объявлять эту структуру. Записывается структура фреймов в заголовке html-документа (внутри тега <head>…</head>). Пример: <html> <head> <frameset rows="20%,*"> <frame name="frame1" src="1.htm"> <frame name="frame2" src="2.htm"> </frameset> </head> </html> Страница 1.htm Страница 2.htm <FRAMESET> Тег <frameset> описывает структуру фреймов. Обязателен один из двух атрибутов: rows="список размеров фреймов" делит окно по вертикали; cols="список размеров фреймов" делит окно по горизонтали. Размеры в параметре "список размеров фреймов" могут задаваться в процен- 31 тах или в пикселах. Размеры перечисляются через запятую. Сколько размеров столько и фреймов. Если вместо размера указать * (задается в качестве последнего размера), то соответствующий фрейм займет все оставшееся пространство. <FRAME> Используется с обязательным атрибутом src="файл-источник фрейма" и устанавливает источник для фрейма. Атрибут name="имя фрейма" устанавливает имя фрейма, которое потом может использоваться с атрибутом target тега гиперссылки. Пример: Если имя фрейма "frame1", то гиперссылка, загружающая страничку в этот фрейм будет выглядеть так: … <a href="123.htm" target="frame1"> ссылка, загружающая страницу в первый фрейм </a> … Данная запись ссылки возможна в том случае, когда страница, содержащая эту гиперссылку, включена во фреймовую структуру, то есть сама загружается в один из фреймов. Если же указать target="_top", то новая страница загрузится в текущее окно, поверх всех фреймов. Сложные фреймовые структуры Фреймы могут быть вложены друг в друга. Это позволяет создавать сложную структуру фреймов с вертикальным и горизонтальное делением. Пример: <html> <head> <frameset rows="20%, 60%, *"> <frame name="frame1" src="1.htm"> <frameset cols="50%,50%"> <frame name="frame2" src="2.htm"> <frame name="frame3" src="3.htm"> </frameset> <frame name="frame4" src="4.htm"> </frameset> </head> </html> 32 Данная фреймовая структура выглядит следующим образом: Верхний фрейм Левый фрейм Правый фрейм Нижний фрейм Встроенные фреймы Рассмотрим еще один тип фреймов – встроенные фреймы. Встроенные фреймы позволяют создавать на одной веб-страничке область в которой будет показываться другая веб-страничка. Пример: <iframe height="200" width="100%" name="iframe1" src="12.htm"></iframe> Основная Встроенный фрейм веб страница <IFRAME>…</IFRAME> Рассмотрим этот пример. Встроенный фрейм объявляется тегом <iframe> и используется с обязательным атрибутом src="файл-источник фрейма", который устанавливает источник для фрейма. Размеры этого фрейма задаются атрибутами: height="высота" и width="ширина". Параметры ширина и высота могут задаваться в пикселах или в процентах. Теперь разберем некоторые атрибуты, используемые в сочетании с тегами-объявителями фреймов. MARGINWIDTH="отступ по горизонтали" Этот атрибут задает значение горизонтальных отступов от края страницы, для страниц, отображаемых в заданном фрейме. Параметр отступ по горизонтали задается в пикселах. Используется с тегами: <frame>, <iframe>. 33 MARGINHEIGHT="отступ по вертикали" То же самое, что и marginwidth, но действует по вертикали. SCROLLING="режим" Атрибут, управляющий отображением линеек прокрутки (скроллингов). Параметр режим может принимать следующие значения: yes – всегда изображать скроллинги; no – никогда не изображать скроллинги; auto – автоматическое изображение скроллингов. Используется с тегами: <frame>, <iframe>. NORESIZE Устанавливает запрет на изменение размеров фреймов с помощью мышки. Используется с тегами: <frame>, <iframe>. FRAMEBORDER="режим" управляет отображением границ фремов. Параметр режим может принимать следующие значения: yes или 1 – отображать границу фреймов, no или 0 – не отображать границу фреймов Используется с тегами: <frameset>, <frame>, <iframe>.Этот атрибут работает в Microsoft Internet Explorer. В Netscape Navigator используется атрибут BORDER="режим". FRAMESPACING="ширина" Задание ширины границ фреймов. Параметр ширина задается в пикселах. Используется с тегами: <frameset>, <iframe>. Заголовок HTML-документа До сих пор мы работали с метками, которые объявлялись и применялись к некоторым объектам в теле HTML-документа, то есть были заключены между теговыми скобками <body>…</body>.Заголовок документа, вообще говоря, не виден пользователю при просмотре. Однако в нем есть можно задать некоторые метки, задающие достаточно интересные и полезные для обработки документа параметры, которые стоит знать. Мы уже встретились с тегом, который объявляется в заголовке HTML-документа – это тег <frameset>…</frameset>. Рассмотрим еще несколько тегов. CSS CSS – каскадные таблицы стилей, являются официальным расширением языка HTML. Таблицы стилей предоставляют много новых возможностей в оформлении html-документов. В настоящее время инструкции CSS понимает подавляющее большинство браузеров. 34 Основным понятием в CSS является – стиль. Стиль – это набор инструкций форматирования, которые можно применить к целому документу или к его части. Стиль можно задать даже одному тегу. Например, если мы хотим, что бы все заголовки первого уровня на нашей веб-страничке, изображались бы красным цветом и были бы размером 24pt, то нам нужно написать в заголовке документа: <style>h1 {color: white; font-size: 24pt;}</style> Тег <style> заключает в себе таблицу стилей. Стиль задается с помощью свойств. В нашем примере, color и font-size – свойства. Свойство – color устанавливает цвет шрифта, а свойство – font-size устанавливает размер шрифта. За свойством после двоеточия записывается значение, которое присваивается свойству. Свойства, вместе с присвоенными значениями, отделяются от друг от друга точкой с запятой. Можно присвоить один стиль сразу нескольким тегам: <style> h1, h2, h3 {color: #FFFFFF;}</style> Этот пример показывает, как задать заголовкам: 1, 2, 3 уровня белый цвет. Теги, к которым должен быть применен данный стиль, перечисляются через запятую. Если запятые между тегами не указывать, то данный стиль будет применяться только, если эти теги вложены друг в друга. Пример: <style> h3 i {color: blue;} <!--устанавливает синий цвет текста, если тег <i> вложен в тег <h3>--> h3, i {color: yellow;} <!-- устанавливает желтый цвет текста для тегов: <h3>, <i>--> </style> В данном случае, текст будет выводится синим цветом только тогда, когда он заключен в структуру: <h3><i>....</i></h3> Если же текст заключен в какой-либо из этих тегов в отдельности, то он будет показан желтым цветом. Классы и идентификаторы CSS реализует возможность присваивать стили не всем одинаковым элементам документа, а избирательно – для этого используются атрибуты: class="имя_класса" и id="имя_элемента". Атрибут class используется, если нужно задать стиль для нескольких, но не всех элементов страницы (одинаковых или разных). 35 Пример: class1 {font-size 10pt; color: green;} Все элементы класса class1 будут отображаться шрифтом размером 10pt и зеленого цвета. <p class="class1">Шрифт текста абзаца размером 10pt, зеленого цвета</p> <!--параграфу присвоен стиль класса class1--> <td class="class2"> Шрифт текста в ячейке таблицы размером 10pt, зеленого цвета </td> <!--ячейке таблицы присвоен стиль класса class2--> META-инструкции Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций. META-инструкция – просто способ определить некоторую переменную путем указания ее имени (атрибут name) и значения (атрибут content). Вот некоторые наиболее типичные META-инструкции: <META NAME="description" CONTENT="Это краткое описание данной страницы"> Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей. <META NAME="keywords" CONTENT="Интернет, HTML, WWW, руководство, публикация, гипертекст"> Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, наиболее полно описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера. (со стороны очень похоже, что именно такой подход был использован, например, при создании сервера технической поддержки фирмы Novell, ведущего производителя операционных систем для локальных компьютерных сетей). Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. Разберем несколько примеров: 36 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows1251. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r"> Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8. <META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]"> Такая META-инструкция дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так: <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://www.quake.com/5.htm"> Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ http://www.quake.com/5.htm. META-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере. Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей. Пример: В отличие от всех примеров, которые мы рассматривали ранее, этот пример состоит не из одного, а из трех файлов. Используя METAинструкцию Refresh, мы создадим небольшой слайд-фильм из трех кадров (файлов 1.htm, 2.htm и 3.htm), которые будут циклически повторяться. Для остановки демонстрации нужно закрыть окно браузера. 37 <html><!--файл 1.htm--> <head> <title>Пример</title> <meta http-equiv="refresh" content="2; url=2.htm"> </head> <body bgcolor=#FFFFFF text=#000000 link=#FF0000> <h1>Это первая страница</h1> <p>Черный текст на белом фоне </p> </body> </html><!--конец файла 1.htm--> <html><!--файл 2.htm--> <head> <title>Пример</title> <meta http-equiv="refresh" content="2; url=3.htm"> </head> <body bgcolor=#000000 text=#FFFFFF link=#FF0000> <h1> Это вторая страница</h1> <p>Белый текст на черном фоне </p> </body> </html><!--конец файла 2.htm --> <html><!--файл 3.htm --> <head> <title>Пример</title> <meta http-equiv="refresh" content="2; url=1.htm"> </head> <body bgcolor=#C0C0C0 text=#0000FF link=#FF0000> <h1> Это третья страница </h1> <p>Синий текст на сером фоне </p> </body> </html><!--конец файла 3.htm --> Формы Форма – это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некую, заранее определенную, точку внешнего мира, где информация будет некоторым образом обработана. В качестве такой "точки" в большинстве случаев выступает программа написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI 38 (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix. Определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php). Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры. <FORM>…</FORM> Форма открывается меткой <form> и заканчивается меткой </form>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений. Метка <form> может содержать три атрибута, один из которых является обязательным. ACTION Обязательный атрибут. Определяет, где находится обработчик формы. METHOD Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: method=post и method=get. Если значение атрибута не установлено, по умолчанию предполагается method=get. ENCTYPE Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается enctype=application/x-www-form-urlencoded. Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. <INPUT TYPE=SUBMIT> Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <form>. 39 VALUE Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута value (от английского "значение") ="Надпись". Пример: <input type=submit value="жми сюда"> В окне браузера: Простейшую форму можно использовать в качестве гиперссылки. Подобная форма не будет собирать никаких данных, а просто приведет нас к заданной странице. Пример: <html> <head> <title>Пример</title> </head> </body> <h1>Простейшая форма </h1> <form action="1.htm"> <!--Это начало формы--> <input type=submit value="Перейти на страницу №1"> </form> <!--Это конец формы--> </body> </html> NAME Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута name=имя, например: <input type=submit name=button value="жми сюда"> При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением жми сюда. В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь. 40 Существуют и другие типы элементов <input>. Каждый элемент <input> должен включать атрибут name=имя, определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <input> должны включать атрибут value="значение", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <input type=text> и <input type=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры. Основные типы элементов <input>: TYPE=text Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах). Пример: <input type=text size=20 name=user value="имя"> В окне браузера: Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст имя, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user. TYPE=password Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Например: <input type=password name=pw size=20 maxlength=10> Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля – 10 символов. Введенный пароль передается обработчику в переменной pw. TYPE=radio Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. 41 Пример: <input type=radio name=modem value="9600" checked> 9600 бит/с <input type=radio name=modem value="14400"> 14400 бит/с <input type=radio name=modem value="28800"> 28800 бит/с В окне браузера: Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800. TYPE=checkbox Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример: <input type=checkbox name=comp value="pc"> персональные компьютеры <input type=checkbox name=comp value="ws" checked> рабочие станции <input type=checkbox name=comp value="lan"> серверы локальных сетей <input type=checkbox name=comp value="is" checked> серверы интернет В окне браузера: Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=ws и comp=is. TYPE=hidden Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвер- 42 гается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Например: <input type=hidden name=version value="1.1"> Определяет скрытую переменную version, которая передается обработчику со значением 1.1. TYPE=reset Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Например: <input type=reset value="очистить форму"> Определяет кнопку Очистить форму, при нажатии на которую форма возвращается в исходное состояние. Помимо элементов <input>, формы могут содержать меню <select> и поля для ввода текста <textarea>. <SELECT>…</SELECT> Метка <select> содержит обязательный атрибут name, определяющий имя переменной, которую генерирует меню. Пример: <select name="имя"> <option value="значение 1">текст 1 <option value="значение 2">текст 2 ... <option value="значение n">текст n </select> В окне браузера: Метка <select> может также содержать атрибут multiple, присутствие которого показывает, что из меню можно выбрать несколько элемен- 43 тов. Большинство браузеров показывают меню <select multiple> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом size=число). Меню <select> в большинстве случаев показывается в виде выпадающего меню. <OPTION> Данный тег определяет элемент меню. Обязательный атрибут value устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <option> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию. <TEXTAREA>…</TEXTAREA> Пример: <textarea name=address rows=5 cols=50> а здесь – ваш адрес... </textarea> Все атрибуты обязательны. Атрибут name определяет имя, под которым содержимое окна будет передано обработчику (в примере – address). Атрибут rows устанавливает высоту окна в строках (в примере – 5). Атрибут cols устанавливает ширину окна в символах (в примере – 50). В окне браузера: Текст, заключенный в теге <textarea>…</textarea>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть. Важно знать, что русские буквы в окне <textarea> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты. 44 Сценарии и сценарные языки Архитектура "клиент-сервер" предполагает два способа генерации Web-страниц. Страницы можно генерировать как на стороне сервера, так и на стороне клиента. Первое реализуется через механизм подстановок на стороне сервера (Server Site Includes). Механизм управления страницами на стороне клиента реализуется с помощью сцераниев (скриптов). Скрипт (script, сценарий) программа, управляющая целыми программными компонентами. Сценарные языки это языки управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Благодаря им появился DHTML. Сценарные языки являются интерпретируемыми. Первые браузеры выводили информацию на дисплей по мере ее поступления, не подвергая никаким изменениям. Сейчас же обычный путь Web-странички до дисплея сложнее: Страничка скачивается с сайта и размещается в памяти компьютера; Производится анализ странички и препарирование ее на составляющие; Контейнеры, из которых состоит страничка (<body>…</body>, <head>…</head>, <p>…</p> и т.д.), размещаются во временной базе данных соответственно структуре объектной модели. Для доступа и управления содержимым этой базы данных браузер предоставляет и использует механизм объектов и скриптовый язык. Теперь содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность менять содержимое странички после загрузки. Любая развитая программная система имеет возможности для написания скриптов. Разнятся языки, их гибкость, сложность, специализация. Сценарные языки часто применяются для системной интеграции, чтобы "склеить" разнородные программные компоненты. Существует множество сценарных языков: Perl (1987) для просмотра и обработки текстовых файлов с извлечением информации и построением отчетов на основе полученных данных. Tcl (тикль) для построения графического интерфейса; Python (1991) для быстрого создания программных продуктов; PHP (1995) система программирования веб-приложений на стороне сервера, вывод Web-страницы, работа с HTTP, FTP, POP3 и др.); 45 Curl (1995) ориентирован на формирование информационного продукта, позволяющего снизить нагрузку на Интернет, перейдя от передачи данных к передаче команд. Сегодня наиболее популярны два языка: VBScript подмножество Visual Basic; JavaScript является наиболее универсальным. Microsoft предложила собственную версию JavaScript для работы с Internet Explorer, назвав ее JScript. Обе эти реализации похожи друг на друга, но в каждой из них имеются свои уникальные функциональные возможности. Задание Открыть файл E-html.htm, который представляет собой HTMLредактор реализованный с помощью языка Java Script и позволяющий создавать новые Web-страницы прямо в окне браузера. Создать с помощью редактора E-html страницу, в которой разместить конспективный ответ на вопрос о сценарных языках. JAVA SCRIPT Java Script был разработан фирмой Netscape в сотрудничестве с Sun Microsystems. Это язык управления сценарием отображения документа. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над элементами рабочей области браузера и контейнерами языка HTML. JavaScript это язык программирования, используемый в составе страниц HTML для увеличения функциональности и возможностей взаимодействия с пользователями. С помощью JavaScript на Web-странице можно сделать то, что невозможно сделать стандартными тегами HTML. Наиболее часто JavaScript используется для: отображения диалоговых панелей; отображения сообщений в статусной строке браузера; динамического создания содержимого страницы во время её загрузки или после того, как она полностью загружена; изменения содержимого страницы и отклика на события; проверки вводимой пользователем информации и управление отсылкой содержимого форм; навигации по другим страницам; управления встроенными в Web-страницу объектами типа Javaаплетов и элементов ActiveX. 46 Код JavaScript размещается внутри HTML страницы, не может существовать автономно и функционирует, будучи запущенными в браузерах типа Netscape Navigator или Internet Explorer. Когда браузер читает HTML, он интерпретирует JavaScript и выполняет любые функции, которые требует от него программа. Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, посетитель странички увидит, как код JavaScript окажется вписан открытым текстом прямо посреди HTML-документа. В Java Script имеются объекты с набором свойств и набор функций над объектами, которые называются методами. Функция пользователя выполняется по наступлении некоторого события, а внутренние функции языка используются непосредственно. Задание Открыть файл GameJS.htm и провести игру, созданную на основе JavaScript. Изменить количество задействованных в игре фрагментов до 8. Изменить фоновую текстуру Web-страницы на однотонную, на произвольную структуру. Размещение скрипта в html-коде Код JavaScript размещается непосредственно в HTML-коде странички и обычно состоит из двух частей: функции, которые вызываются из кода страницы в ответ на событие; код событий, которые вызывают функции. Описание функций должно располагаться в теге <head></head> это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки: <script language="JavaScript"> <!-// здесь располагается код функции //--> </script> Непосредственно сам код заключен в тег комментария. Это сделано для того, чтобы старые браузеры игнорировали непонятные им команды. 47 Новые версии программ "знают" о существовании закомментированных скриптов. Закрывающий тег комментария предваряется двумя косыми чертами. Две косые черты это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. Рассмотрим скрипт, который помещает текст на веб-страницу. В данном случае текст будет красного цвета (это достигается средствами HTML, а JavaScript только размещает соответствующий код: Пример: <script language="JavaScript"> document.write("<font color='red'>Это красный текст</font>") </script> В окне браузера: Это красный текст Первая строка: <SCRIPT LANGUAGE="JavaScript">. Это код HTML, который дает браузеру понять, что с этого места начинается JavaScript. Все скрипты начинаются с такой команды. LANGUAGE (язык) ="JavaScript" позволяет браузеру отличить код от других типов скриптов, например, VBScript. Последняя строка: </SCRIPT> этим тегом заканчивается любой JavaScript. Вторая строка: document.write("<FONT COLOR='RED'>Это красный текст</FONT>") В скрипте указывается DOCUMENT (документ HTML) и те изменения, которые в нем произойдут что-то будет написано (WRITE). То, что будет написано, находится в скобках. DOCUMENT представляет собой object (объект). Слово WRITE (писать), отделенное точкой, называется method (методом объекта). Текст в скобках называется instance (примером метода), он передает то, что происходит, когда метод воздействует на объект. Текст внутри скобок находится в кавычках. Никогда нельзя про них забывать. Текст в кавычках представляет собой простой HTML: тег <FONT>, которая делает текст красным. Дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже ошибка. 48 Задание Создайте Web-страничку, вставьте в нее рассмотренный скрипт. Измените скрипт так, чтобы вышли три строки текста: красная, зеленая и синяя. Для этого необходимо дописать несколько команд Javascript, а не просто добавить немного HTML к приведенному примеру. На странице должно оказаться следующее: Это красный текст Это зеленый текст Это синий текст Объекты JavaScript Все операции, которые можно исполнять в программе на JavaScript, описывают действия над объектами, которыми являются элементы рабочей области браузера и контейнеры языка HTML. Как любой язык программирования, JavaScript имеет определенный набор объектов, типов переменных, операторов, встроенных функций. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа. Но оторванный от объектной модели, он мало полезен сам по себе. А потому рассмотрим объектную модель браузера и несколько популярных эффектов, применяемых на Web-страничках. Объектная модель Internet Explorer (версии 4 и выше): window – объект, дающий доступ к окну браузера frames – объект, дающий доступ к фреймам o window... o window... o ... document – объект, содержащий в себе всю страничку o all – полная коллекция всех тегов документа o forms – коллекция форм o anchors – коллекция якорей o appleеs – коллекция апплетов o embeds – коллекция внедренных объектов o filters – коллекция фильтров o images – коллекция изображений 49 links – коллекция ссылок o plugins – коллекция подключаемых модулей o scripts – коллекция блоков <script>…</script> o selection – коллекция выделений o stylesheets – объекты с индивидуально заданными стилями history – объект, дающий доступ к истории посещенных ссылок navigator – объект, дающий доступ к характеристикам браузера location – объект, содержащий текущий URL event – объект, дающий доступ к событиям screen – объект, дающий доступ к характеристикам экрана o Рассмотрим скрипт, открывающий новое окно браузера. <script language="javascript"> window.open ('opened2.htm', 'newwin', config='height=250,width=300,toolbar=no,menubar=no,scrollbars=no,resizable=no, location=no,status=no') </script> В общем случае лучше помещать скрипты повыше (в контейнере <head>…</head>), чтобы они первыми загружались в память компьютера и начинали работать без задержки. Но для открытия нового окна лучше ставить скрипт ближе к концу документа, пусть сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. window (окно) объект, a open (открыть) – метод, который на него воздействует. Свойства (атрибуты) объекта: ('URL документа в новом окне', 'Название нового окна', config='параметры нового окна') ('opened.html', 'joe',) opened.html – это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее. joe – название нового окна. Через минуту я объясню вам, для чего оно нужно. config= указывает, что следующие команды относятся к конфигурации нового окна. config='height=300,width=300 (новое окно будет размером 300 на 300 пикселей). Команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два 50 эелемента являются подкомандами config. Пробел для браузера означает конец команды. toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д. menubar= отвечает за наличие строки меню с элементами файл, правка, вид и т.д. scrollbars= отвечает за наличие полосы прокрутки. Я никогда не делаю новое окно с полосой прокрутки. По-моему, это убивает весь эффект. resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию. location= отвечает за наличие адресной строки, где виден URL страницы. status= отвечает за наличие строки состояния. Задание Создать скрипт, открывающий окно размером 200 на 400 пикселей, в рабочей области которого будет текст с объектной моделью браузера MS IE, а также будет панель инструментов, строка меню, полосы прокрутки и возможность масштабирования. Методы JavaScript Cкрипт должен поместить в документ часы, минуты и секунды. Все это было создано с помощью метода "getЧто-либо()". Метод getHours() отвечает за час Метод getMinutes() отвечает за минуты. Метод getSeconds() отвечает за секунды. Метод (method) воздейcтвует на объект (object). Это методы объекта Date. Назовем объект G. Тогда G это объект, который представляет new Date() (новую Дату). Так будет получена новая дата при каждом заходе на страницу или ее обновлении. G = new Date(); Точка с запятой в конце указывает, что строка JavaScript закончена. Без нее браузер решит, что команда продолжается на следующей строке. Нужно напечатать время на странице, значит, где-то должна быть команда document.write(). Текст в скобках будет виден на странице: Пишем <script language="javascript">. 51 Вставляем комментарий о том, для чего предназначен скрипт. Двойная дробь // указывает на комментарий внутри скрипта, и следующий за ней текст не участвует в процессе. Создаем объект. Строка должна заканчиваться точкой с запятой. Вставляем утверждение document.write. Оформляем по правилам текст в скобках после document.write: o Текст, видимый на странице, должен быть окружен двойными кавычками (одинарные кавычки для кода HTML внутри двойных). o Сочетание текста и команд требует знака "плюс" + между элементами. o Объект и метод разделены точкой, так что команда напечатать час выглядит так: G.getHours() o G.getHours() это команда, которая указывает час и ее не нужно ставить ее ни в какие кавычки. Заканчиваем командой </SCRIPT>. Получается: <script language="JavaScript"> //Скрипт отмечает точное время вашего прибытия на страницу G = new Date(); document.write("Вы зашли на страницу ровно в: " + G.getHours() + " часов " + G.getMinutes() + " минут и " + G.getSeconds() + " сек.") </script> Все части связаны между собой плюсами +. Задание Написать скрипт, который поместит на вашу страницу час, минуту и секунду, разделенные знаком дроби (/). Приветственный текст должен быть синего цвета. События JavaScript События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее "встроены" в HTML-код, а не существуют самостоятельно. Они входят в структуру документа НТМL, не требуя команд <script> и </script>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем. Они добавят динамики сайту. Среди разнообразных обработчиков событий самое популярное onMouseOver (навести мышь). 52 <a href="xx.htm" onMouseOver="alert('Привет'); return true">Жми сюда</a> onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. onMouseOver ставится сразу же после адреса URL. Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Объектом является alert() (предупредить). Это диалоговое окно с текстом и кнопкой OK. Property (свойство) oкна это небольшой участок окна, где должен разместиться текст. В данном случае это текст в одинарных кавычках. Если отчет (return) соответствует действительности (true), тогда происходит событие. Скрипт смены изображения onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. <a href="http://www.brsu.brest.by " onMouse Over="document.img1.src='pic1.jpg'" onMouse Out="document.img1.src='pic2.jpg'"><img src="pic2.jpg" border="0" name="img1" width="100" height="150"></a></p> Когда наводите курсор на картинку, появляется изображение из файла pic1.jpg. Когда убираете курсор с картинки, появляется изображение из файла pic2.jpg. Команда img связана с обработчиками onMouse в команде href через команду name="pic1". Не имеет значения, сколько изображений у вас на странице и где они располагаются, если вы дали имя нужной картинке. onMouseOver и onMouseOut различают регистр. Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.jpg ставится в одинарные кавычки. document.img1.src следует иерархии объектов браузера. Document относится к объекту документ, a img1 – это имя объекта изображение (имя можно придумать какое угодно). src (источник) – это свойство объекта изображение, которое указывает файл с картинкой. В этом примере onMouseOver меняет источник изображения на pic1.jpg. ОnMouseOut заставляет объект изображение показывать pic2.jpg. 53 Задание Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит. Для наилучшего эффекта картинки должны быть одинакового размера. Операторы и функции JavaScript Операторы управляют процессом выполнения программы. Они подразделяются на условные операторы, операторы циклов и операторы управления объектами. К условным операторам относятся if…else и switch. Они служат для определения набора команд, которые должны быть выполнены в случае, если условие, заданное в таком операторе, истинно (когда результат – true, выполняет блок операторов, следующих за условием. Если результат – false, то в случае, когда присутствует часть else, будет выполнен блок операторов из else, в противном случае – ничего). Оператор switch (переключатель) выполняет тот блок операторов, метка которого соответствует значению выражения переключателя. В языке JavaScript определены циклы for, while, do…while. for ([начальное значение;] [условие;] [выражение приращения]) { операторы } while (условие) { операторы } do { операторы } while (условие Для манипулирования объектами JavaScript предоставляет два оператора – with (определяет объект, к которому будут обращаться вложенные в него операторы) и for…in (является специальной разновидностью цикла for и используется для организации цикла по всем свойствам объекта). with (имя объекта) { операторы 54 } Оператор for…in Его синтаксис: for (индекс in имя_объекта) { операторы } Функции – это один из основных способов объединения операторов в блоки. В языке JavaScript функция представляет собой группу выражений, служащих для выполнения какой-либо определенной задачи. Определение функций в JavaScript имеет следующий синтаксис: function ИмяФункции (аргументы) { блок выражений } Важно знать, что когда браузер загружает документ и "видит" объявление функции, он только считывает ее в память. Для того чтобы функция была выполнена, ее надо вызвать. Вызов функции может производиться из любого места JavaScript программы. В JavaScript имеется ряд функций, являющихся частью самого языка, и не связанных с какими-либо конкретными объектами. Такие функции называются предопределенными. К ним относятся: eval; isFinite; isNaN; parseInt; parseFloat; Number; String; escape и unescape. Задание Создайте страничку под именем "Family-JS-1". Поместите на нее программу "Color-cod". Определите содержащиеся в программном коде операторы и функции. <script language="JavaScript"><!-// create 6-element array var hex = new Array(6) // assign non-dithered descriptors hex[0] = "FF" hex[1] = "CC" hex[2] = "99" hex[3] = "66" hex[4] = "33" hex[5] = "00" // accept triplet string and display as background color 55 function display(triplet) { // set color as background color document.bgColor = '#' + triplet // display the color hexadecimal triplet alert('Цифровой код цвета фона = ' + triplet) } // draw a single table cell based on all descriptors function drawCell(red, green, blue) { // open cell with specified hexadecimal triplet background color document.write('<td bgcolor="#' + red + green + blue + '">') // open a hypertext link with javascript: scheme to call display function document.write('<a href="javascript:display(\'' + (red + green + blue) + '\')">') // print transparent image (use any height and width) document.write('<img src="place.gif" border=0 height=12 width=12>') // close link tag document.write('</a>') // close table cell document.write('</td>') } // draw table row based on red and blue descriptors function drawRow(red, blue) { // open table row document.write('<tr>') // loop through all non-dithered color descripters as green hex for (var i = 0; i < 6; ++i) { drawCell(red, hex[i], blue) } // close current table row document.write('</tr>') } // draw table for one of six color cube panels function drawTable(blue) { // open table (one of six cube panels) document.write('<table cellpadding=0 cellspacing=0 border=0>') // loop through all non-dithered color descripters as red hex for (var i = 0; i < 6; ++i) { drawRow(hex[i], blue) } // close current table document.write('</table>') 56 } // draw all cube panels inside table cells function drawCube() { // open table document.write('<table cellpadding=5 cellspacing=0 border=1><tr>') // loop through all non-dithered color descripters as blue hex for (var i = 0; i < 6; ++i) { // open table cell with white background color document.write('<td bgcolor="#FFFFFF">') // call function to create cube panel with hex[i] blue hex drawTable(hex[i]) // close current table cell document.write('</td>') } // close table row and table document.write('</tr></table>') } // call function to begin execution drawCube() // --></script> Задание Создайте страничку под именем "Family-JS-2". Поместите на нее программу "Снег". Определите содержащиеся в программном коде операторы и функции. Измените параметры скрипта таким образом, чтобы изменить скорость падения снежинок и их количество. Заменить снежинки шариками (звездами, кленовыми листьями) <script language="JavaScript1.2"> <!-- Begin var no = 35; // количество снежинок var speed = 6; // скорость снежинок var snowflake = "sneg.gif"; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; var am, stx, sty; var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; 57 doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; xp[i] = Math.random()*(doc_width-50); yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); if (ns4up) { if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } } 58 } function snowNS() { for (i = 0; i < no; ++ i) { yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE() { for (i = 0; i < no; ++ i) { yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } // End --> 59 </script> Java и Java-апплеты Java (Sun Microsystems, 1995 г.) один из самых популярных языков программирования де-факто стал стандартом разработки программ для Internet. Java – это объектно-ориентированный язык, кроссплатформенный, интерпретируемый программирования. В более широком смысле – это целая технология программирования, изначально рассчитанная на интеграцию с Web-сервисом, т. е. на использование в сетевой среде. Поскольку браузеры существуют практически для всех аппаратно-программных платформ, Java-среда должна быть полностью независимой от платформы. Сегодня интерпретатор Java имеется в наиболее распространенных браузерах Internet, включая Netscape Navigator и Microsoft Internet Explorer. Это позволяет загружать через Сеть и выполнять прямо в браузере простые Java-программы (апплеты), внедренные прямо в текст WWW-страницы. Задание 1. Создать HTML-документ, вставить в него апплет, который представляющий собой графический редактор. <applet archive="anfypaint.jar" code="anfypaint.class" width=880 height=550> <param name=credits value="Applet by Fabio Ciucci (www.anfyteam.com)"> <param name=regcode value="NO"> <param name=jpgquality value="75"> <param name=savebutton value="YES"> <param name=backcolor value="e0e0e0"> <param name=backimage value="NO"> <param name=pencolor value="000000"> <param name=startmsg value="Hello!"> </applet> 2. Создать каталог Anfypaint и сохранить созданный документ в этом каталоге под именем Anfypaint.htm. 3. Скопировать в каталог следующие файлы: a. anfypaint.class b. anfypaintb.class c. anfypaintc.class d. anfypaintd.class e. anfypainte.class 60 f. Lware.class g. anfypaint.jar 4. Открыть файл Anfypaint.htm и выполнить в редакторе несколько рисунков (используя палитру, рисование от руки и примитивы); 5. Изменить цвет фона рисунка 6. Превратить апплет в книжку-расскраску установив фоновый рисунок; 7. Изменнить размер апплета; 8. Изменить цвет карандаша, установленный по умолчанию; 9. Изменить начальное сообщение при загрузке апплета. <applet archive="anfypaint.jar" code="anfypaint.class" width="580" height="350"> Размер апплета задается тэгами width и height. Минимальная ширина 580 , высота 150. <param name="credits" value="Applet by Fabio Ciucci (www.anfyteam.com)"> Параметр, указывающий на авторские права. <param name="regcode" value="NO"> Регистрационный код. <param name="savebutton" value="YES"> Параметры сохраняемого рисунка. <param name="jpgquality" value="75"> ; Качество JPEG (1..100) Данный параметр изменяет степень сжатия сохраненного рисунка в формате JPEG. Большая степень сжатия уменьшает качество изображения. <param name="backcolor" value="e0e0e0"> Цвет фона (в шестнадцатеричном формате RRGGBB) Формат цвета идентичен используемому в документах html, только без префикса #. <param name="backimage" value="NO"> Фоновый рисунок. Если хотите разместить на фоне апплета рисунок, в параметре backimage вместо значения "NO" задайте его название (например: "back.jpg"). Размеры фонового рисунка могут быть меньше размера апплета. <param name="pencolor" value="000000"> 61 Начальный цвет карандаша (формат hex RRGGBB) <param name="startmsg" value="Click here."> Приветственное сообщение, появляющееся при загрузке апплета. Задание 1. Создать HTML-документ, вставить в него апплет, который представляющий генератор фрактального дерева путем рекурсивного применения правила для L – систем. <applet archive="AnFract.jar" code=AnFract.class width=250 height=250> <param name=credits value="Applet by Fabio Ciucci (www.anfyteam.com)"> <param name=regcode value="NO"> <param name=reglink value="NO"> <param name=regnewframe value="YES"> <param name=regframename value="_blank"> <param name=statusmsg value="IFS fractals applet"> <param name=dimensions value="8"> <param name=branches value="2"> <param name=morph_speed value="3"> <param name=rot_speed value="5"> <param name=rot_speed2 value="-5"> <param name=decline value="0.75"> <param name=length value="26"> <param name=pensize value="1"> <param name=progress value="YES"> <param name=progrinverse value="NO"> <param name=progrstep value="2"> <param name=iterskip value="YES"> <param name=backimage value="NO"> <param name=backR value="0"> <param name=backG value="0"> <param name=backB value="0"> <param name=ifsR1 value="255"> <param name=ifsG1 value="255"> <param name=ifsB1 value="180"> <param name=ifsR2 value="10"> <param name=ifsG2 value="50"> <param name=ifsB2 value="255"> <param name=overtext value="YES"> <param name=overimg value="NO"> 62 <param name=overimgX value="0"> <param name=overimgY value="0"> <param name=textscroll value="NO"> <param name=memdelay value="1000"> <param name=priority value="133"> <param name=MinSYNC value="10"> Sorry, your browser doesn't support Java. </applet> 2. Создать каталог Fractal и сохранить созданный документ в этом каталоге под именем Fractal.htm. 3. Скопировать в каталог следующие файлы: AnFract.class AnFract.jar 4. Открыть файл Fractal.htm и просмотреть его НТМL-код. 5. Учитывая, что апплет полностью параметризован, получить различные фрактальные изображения настройкой как параметров фрактала, так и его цветовой палитры. Описание параметров Параметр "overimg" принимает значение имени файла рисунка, который будет который будет наложен поверх апплета. Параметры "overimgX" и "overimgY" задают положение наложенного рисунка. Размер апплета задается тэгами width и height, изменяя его, вы можете увеличивать/уменьшать видимую часть фрактала. Фрактал всегда автоматически помещается в центр апплета. Параметр "dimensions" (размерность) задает число итераций для генерации фрактала. Число ветвей от стартовой точки фрактала равно значеию параметра "branches", помноженному на 2 для каждой итерации. При генерации фрактального дерева количество операций пропорционально 2^dimensions * 2 * branches. Таким образом, объем используемой апплетом памяти и ресурсов процессора зависит экспотенциально от размерности и числа ветвей фрактала. Оптимальные значения параметров: 8 для dimensions и порядка 1-5 для branches. Параметр "morph_speed" задает скорость превращения (изменения формы) фрактального дерева. "Rot_speed" определяет, как быстро вращается каждый элемент фрактала.."Rot_speed2 " – скорость вращения фрактала целиком. "Length" – длина начальной линии фрактала. 63 "Decline" – спад в длине ветвей присоединенных к стволу после каждой итерации. В норме (0 < "Decline" < 1) так как это коэффициент, на который множится длина при каждой итерации. Например, значение 0.75 дает уменьшение длины в 25% за итерацию. Значение спада может быть больше единицы, хотя такое дерево смотрится и неестественно, так как веточки к краям становятся все длиннее. Толщина ветви фрактала ("pensize" [1..3]) может быть постоянной. Или можно задать изменение толщины от края к стволу ("progress" = "YES"), определив при этом шаг по толщине ("progrstep" [1..16]). Выбрав "обратный шаг " ("progrinverse" = "YES") по толщине вы получите тонкий ствол с толстыми веточками . Параметр "iterskip" задает отрисовку ветвей без соединительных элементов, что несколько ускоряет работу апплета. Возможно изменение цвета фрактального дерева, RGB палитра такая же, как и тэгах HTML, только в десятичной системе. Параметры backR,backG,backB задают цвет фона. Чтобы разместить на фоне апплета рисунок, в параметре backimage вместо значения "NO" задайте его название (например: "back.jpg"). Рисунок должен быть одного размера с апплетом. Можно задать цвет кончиков (ifsR1,ifsG1,ifsB1) и основания (ifsR2,ifsG2,ifsB2) ветвей для градиентной раскраски в этом цветовом диапазоне всего фрактала. Чтобы раскрасить фрактал в цвета от черного до белого (все оттенки серого), присвойте значение 255 параметрам цвета кончиков (ifsR1,ifsG1,ifsB1) и 0 – параметрам цвета основания (ifsR2,ifsG2,ifsB2) Параметр "overtext" определяет отрисовку фракталов поверх прокручиваемого текста, или наоборот. FLASH Flash, является мощной технологией web-дизайна. Для просмотра Flash страниц служат Flash Player, которые встраиваются в браузер. В последних версиях IE и NN они уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются. Достоинства Flash. Маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы (которые также могут использоваться в страницах Flash),. Устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в IE, так и в NN. 64 Мощный событийно-управляемый язык (ActionScript), с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать. Красота. Flash имеет автоматическую поддержку anti-aliasing (антиалайсинг, сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Удобство и простора создания страниц во Flash. Распространенность. Flash становится стандартом де-факто.На сегодняшний день Flash Player используют более двухсот миллионов человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователей Сети просматривать страницы с Flash содержимым. Задание Просмотреть предложенные преподавателем Web-страницы с Flashроликами. Запустить и просмотреть в различных режимах просмотра предложенные преподавателем файлы с Flash-анимацией. 65 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. MS Word 97/2000/XP; Notepad (Блокнот); MS Internet Explorer; Netscape Navigator; RGB Photo Selector; Good Utilites for Web-Masters; MS Front Page 97/2000/XP; Macromedia Flash 5; E-html; BG-color 216; SNK VisualHTML Workshop; SNK HTML Pad; Anfy 1.4.5.; Коллекция Java-апплетов; Контрольные тесты, реализованные на JavaScript; Электронное учебное пособие, реализованное в виде Web-site; 66 СОДЕРЖАНИЕ Введение ............................................................................................................... 3 Понятие HTML .................................................................................................... 4 HTML-документ .................................................................................................. 5 HTML-редакторы ................................................................................................ 7 Первый HTML-документ.................................................................................... 8 Обязательные метки .......................................................................................... 10 Форматирование шрифта ................................................................................. 12 Форматирование абзацев .................................................................................. 14 Списки ................................................................................................................ 15 &-последовательности ...................................................................................... 17 Графика............................................................................................................... 17 Гиперссылки ...................................................................................................... 21 Вставка звука и видео на страницу ................................................................. 24 Таблицы .............................................................................................................. 25 Фреймы ............................................................................................................... 30 CSS ...................................................................................................................... 33 Классы и идентификаторы ............................................................................... 34 META-инструкции ............................................................................................ 35 Формы ................................................................................................................. 37 Сценарии и сценарные языки........................................................................... 44 JAVA SCRIPT .................................................................................................... 45 Размещение скрипта в html-коде ..................................................................... 46 Объекты JavaScript ............................................................................................ 48 Методы JavaScript ............................................................................................. 50 События JavaScript ............................................................................................ 51 Операторы и функции JavaScript ..................................................................... 53 Java и Java-апплеты ........................................................................................... 59 FLASH ................................................................................................................ 63 Программное обеспечение ............................................................................... 65