Программирование для Интернет

Программирование для
Интернет
Знакомство с HTML (1/14)
Среди ключевых технологий, на которых держится современная
сеть Internet, одной из важнейших и, как это ни странно, вызывающих
наиболее ожесточенные споры является язык HTML,
предназначенный для разметки и оформления документов World
Wide Web. Необычайно интересно проследить историю развития
этого языка - историю, в которой столкнулись противоположные
подходы к проблеме компьютерного представления текста и которая
послужила ареной сотрудничества и противоборства крупнейших
компьютерных компаний, определяющих пути развития и будущее
Internet.
Знакомство с HTML (2/14)
• Начало истории HTML следует отнести к далекому 1986 году, когда Международная
организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный
"Standard Generalized Markup Language (SGML)". Стандарт этот посвящен описанию
SGML - обобщенного метаязыка, позволяющего строить системы логической,
структурной разметки любых разновидностей текстов. Слово "структурная" означает,
что управляющие коды, вносимые в текст при такой разметке, не несут никакой
информации о внешнем виде документа, а лишь указывают границы и соподчинение
его составных частей - т. е. задают его логическую структуру.
• Создатели SGML стремились максимально абстрагироваться от проблем
представления электронного текста в разных программах, на разных компьютерных
платформах и устройствах вывода. Так, если с помощью SGML размечается документ,
содержащий заголовки, идеология языка запрещает указывать, что такой-то заголовок
должен набираться, скажем, шрифтом Times полужирного начертания кегля 12 пунктов.
SGML в таком случае требует ограничиться указанием на уровень заголовка и его место
в иерархической структуре документа.
Знакомство с HTML (3/14)
• Благодаря таким ограничениям размеченный текст сможет без труда интерпретировать любая
программа, работающая с любым мыслимым устройством вывода. К примеру, при работе в
графическом интерфейсе заголовок может действительно выводиться полужирным шрифтом
повышенного кегля; программа, использующая текстовый интерфейс, выделит его пустой
строкой сверху и снизу и, возможно, повышенной яркостью символов; синтезатор речи,
читающий документ вслух, сможет отметить заголовок паузой и изменением интонации.
Можно сказать, что SGML-разметка обнажает нематериальную "душу" текста, для которой
впоследствии любая программа-интерпретатор сможет подобрать подходящее к случаю "тело".
• Однако абстрактность SGML этим не исчерпывается. SGML представляет собой не готовую
систему разметки текста, а лишь удобный метаязык, позволяющий строить такие системы для
конкретных обстоятельств. Жизнь многообразна и непредсказуема: сегодня вам требуется
выделять в текстах заголовки, а завтра, возможно, понадобится размечать подписи в письмах,
математические формулы или имена действующих лиц в пьесе. Стандарт SGML определяет
лишь синтаксис записи элементов разметки - тегов - и их атрибутов, а также правила
определения новых тегов и указания структурных отношений между ними. Для практической
же разметки документов нужно приложение SGML - набор определенных в соответствии со
стандартом тегов, представляющий собой, по сути, формальное описание структуры
документа.
Знакомство с HTML (4/14)
• Язык SGML - это типичное детище академической науки, изящная игрушка теоретиков. Его
создание не было вызвано насущной практической необходимостью. Принципы, на которых
строится этот язык, значительны и интересны; несомненно, идеология SGML оказала влияние на
многие компьютерные разработки. Однако сам по себе SGML не получил сколько-нибудь
заметного распространения - до тех пор, пока в 1991 г. сотрудники Европейского института физики
частиц (CERN, http://www.cern.ch), занятые созданием системы передачи гипертекстовой
информации через Internet, не выбрали SGML в качестве основы для нового языка разметки
гипертекстовых документов. Этот язык - самое известное из приложений SGML - был назван HTML
(HyperText Markup Language, "язык разметки гипертекста").
• Изначально HTML, как и положено SGML-приложению, разделял все особенности идеологии
SGML. Из сорока с небольшим тегов HTML версии 1.2 (датированной июнем 1993 г.) всего три, да к
тому же и не рекомендованных к использованию, тега осмеливались намекать на физические
параметры представления документа. Вся разметка была чисто логической, и лишь в
описательной части стандарта, сопровождающей формальное определение тегов, можно было
прочесть что-нибудь вроде "в графических браузерах действие этого тега может передаваться
курсивным начертанием".
Знакомство с HTML (5/14)
•
А первым (и долгое время единственным) графическим браузером в те далекие времена
была программа Mosaic, разработанная, как и собственно WWW, в научном учреждении Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer
Applications, NCSA; http://www.ncsa.uiuc.edu). Так что нет ничего удивительного в том, что в этот
"золотой век" никаких противоречий между официальными стандартами и их реализацией в
браузерах еще не существовало. HTML неторопливо развивался, оставаясь в рамках парадигмы
структурной разметки, и в апреле 1994 г. началась подготовка спецификации следующей версии
языка - 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium,
сокращенно W3C; http://www.w3.org/pub/WWW), унаследовавший от CERN верховную власть и
авторитет в мире WWW.
•
В настоящий момент консорциум, имеющий статус "международной некоммерческой
организации", объединяет свыше 150 организаций-членов, в том числе фирмы Netscape,
Microsoft и множество других. Однако в 1994-1995 гг. его членами были почти исключительно
университеты и научные учреждения. Столь "академический" состав W3C сказывался как на
самих документах, публикуемых консорциумом, так и на процедуре (и особенно на сроках) их
принятия. Достаточно сказать, что окончательный вариант HTML 2.0
(http://ds.internic.net/rfc/rfc1866.txt), единственным серьезным усовершенствованием в котором
был механизм бланков (форм) для отсылки информации с компьютера пользователя на сервер,
был официально утвержден лишь в сентябре 1995 г., когда в W3C уже полным ходом шло
обсуждение HTML 3 (или, как его называли поначалу, "HTML+").
Знакомство с HTML (6/14)
• Пожалуй, проект HTML 3 (http://www.w3.org/pub/WWW/MarkUp/html3/) - самая яркая и
неоднозначная страница в истории языка. Работа над ним началась в марте 1995 г., и
первоначальный вариант стандарта включал в себя много интересных нововведений - теги для
создания таблиц, разметки математических формул, вставки обтекаемых текстом рисунков,
примечаний и др. Но самое главное - HTML 3.0 был попыткой разрешить уже достаточно
очевидное к тому времени противоречие между идеологией структурной разметки и
потребностями пользователей, заинтересованных в первую очередь в гибких и богатых
возможностях визуального представления.
• Чтобы разрешить это противоречие, не оскверняя заветов отцов-основателей HTML, авторы
версии 3 ввели в ней поддержку нового средства - так называемых иерархических стилевых
спецификаций (Cascading Style Sheets, CSS; http://www.w3.org/pub/WWW/TR/REC-CSS1). Система
CSS формально независима от HTML, имеет совершенно иной синтаксис (более того, HTML 3
можно стыковать с разными реализациями CSS, обладающими разным синтаксисом и
возможностями), не наследует никаких идеологических ограничений и позволяет, уже в
совершенно иных терминах, задавать параметры визуального представления для любого тега
HTML. С помощью CSS автор может наконец с чистой совестью указать, каким шрифтом какого
кегля набирать заголовки такого-то уровня. И, что самое важное, достигнуто это было не
введением новых тегов, а разработкой механизма, позволяющего влиять на интерпретацию уже
существующих тегов логической разметки, причем с учетом контекста их употребления. Браузеры
с текстовым интерфейсом или с синтезатором речи смогут с легкостью проигнорировать эту
дополнительную информацию и использовать для оформления свои обычные средства.
Знакомство с HTML (7/14)
•
Слово cascading в названии системы CSS служит напоминанием о том, что в действительности
на вывод каждого тега в документе могут оказывать влияние сразу несколько стилевых
спецификаций, образующих иерархическую систему: например, поверх спецификаций,
относящихся к конкретному документу, может действовать стилевой файл, общий для всех
документов на сервере. Кроме того, пользователь браузера, поддерживающего CSS, может
указать свои собственные параметры вывода для тех или иных тегов. Конфликты, которые при
этом возникают, разрешаются в пользу более частных, узких спецификаций: то, что указано для
конкретного документа, берет верх над спецификациями для всего сервера, а параметры вывода
тега в данном контексте имеют преимущество перед параметрами для того же тега "вообще", без
учета контекста. В случае же конфликта спецификаций, заданных пользователем, с установками
автора страницы побеждают последние, хотя пользователь может при желании изменить эту
ситуацию на обратную.
•
Нет сомнения, что CSS - почти идеальное средство избавить HTML от наследственных
дефектов и перевести его развитие на принципиально новые рельсы. Тем досаднее то, как
сложилась судьба этого замечательного изобретения. Поскольку спецификацию CSS увязали с
другими нововведениями HTML 3, W3C долго не утверждал ее в качестве официального
стандарта; задерживалось доведение до более или менее завершенного вида, при котором стала
бы возможной ее реализация в коммерческих продуктах.
Знакомство с HTML (8/14)
• А между тем коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г.
группа разработчиков браузера Mosaic под предводительством Джеймса Кларка, который за
несколько лет до того создал и "вывел в люди" компанию Silicon Graphics, основала корпорацию
Netscape Communications и вскоре выпустила первую версию коммерческого браузера Netscape
Navigator. Вскоре после этого начался экспоненциальный рост WWW, продолжающийся по сей
день. Не менее впечатляющие темпы показала при этом и Netscape, которая в конце 1995 г.
объявила, что достигнутые результаты делают ее самой быстрорастущей компанией в мировой
истории (!). Чтобы закрепить лидерство (на которое, впрочем, тогда еще мало кто покушался) и
привлечь новых пользователей, Netscape, увы, вводила в HTML все новые и новые
усовершенствования, - и эти усовершенствования поддерживались только браузером Netscape
Navigator.
• Практически все новые теги, в изобилии предлагавшиеся Netscape, были направлены на
улучшение внешнего вида документа и расширение возможностей его форматирования.
Причины этого понятны: чтобы убедить, скажем, бизнесмена, что ему пора обратить внимание на
новое средство коммуникации и рекламы, прежде всего нужно показать ему это средство в
привлекательном, "товарном" виде. Поставив себе целью завоевание корпоративного рынка,
разработчики Netscape не могли (да и не хотели, по-видимому) уделять должное внимание
сложившимся традициям развития языка. В результате тот вариант HTML, который поддерживала
выпущенная в январе 1996 г. версия Netscape Navigator 2.0, представлял собой довольно
странную смесь старых логических тегов с беззастенчиво вломившимися новыми,
ориентированными на графическое экранное представление документа и затрудняющими его
воспроизведение на других устройствах вывода.
Знакомство с HTML (9/14)
•Такая политика компании, с одной стороны, принесла ей быстрый и впечатляющий успех (одно
время версии Netscape Navigator составляли более 90% всех используемых браузеров), а с другой вызвала ожесточенное сопротивление наиболее сознательной части HTML-сообщества. Энтузиасты
неустанно разъясняли каждому, кто согласен был их слушать, что HTML по природе своей не имеет
права зависеть от какого-то конкретного браузера и что заявления типа "эту страницу лучше всего
смотреть в Netscape Navigator" являются насмешкой над здравым смыслом. Движение "борцов за
чистоту HTML" существует и сейчас, однако ощутимого влияния не имеет.
•Многие Web-дизайнеры, даже признавая справедливость аргументации "HTML-пуристов", считают
использование новых тегов практически оправданным. Неудобства при этом будут испытывать лишь
несколько процентов пользователей других браузеров, для которых страницы с этими тегами будут
выглядеть совсем не так, как задумал автор (хотя текст в большинстве случаев все равно останется
читабельным). Вероятно, аргументы противников Netscape звучали бы более убедительно, если бы
сам по себе "официальный" HTML не был столь неимоверно беден изобразительными
возможностями. Меня, к примеру, пробирает дрожь при мысли, что для миллионов страниц в
современной "паутине", путешествие по которой способно порой принести подлинное эстетическое
наслаждение, были бы доступны лишь возможности HTML 2.0.
Знакомство с HTML (10/14)
• Помимо использования "плохих" Netscape-ориентированных тегов, широко распространена также
практика "злоупотребления" средствами HTML ради сопутствующих им визуальных эффектов.
Скажем, вместо того чтобы использовать тег <TABLE> только для оформления настоящих
("логических") таблиц, Web-дизайнеры сплошь и рядом применяют таблицы без рамок для
управления размещением обычного текста и иллюстраций, регулируют с их помощью ширину
полей и т. п. Нет нужды объяснять, что оформление в виде таблицы того, что по сути своей
таблицей совсем не является, есть прямое нарушение идеологии структурной разметки. "Борцы
за чистоту HTML" сломали немало копий, доказывая недопустимость этого и многих других
дизайнерских приемов. Но времена постепенно меняются, и теперь любой желающий может
увидеть пример такого "злоупотребления" прямо на заглавной странице сервера W3C
(http://www.w3.org/pub/WWW).
Знакомство с HTML (12/14)
• В конце 1995 г. ситуация в мире HTML была довольно смутной. Популярность браузера
Netscape неуклонно росла; программисты этой фирмы готовили к выпуску версию 2.0, которая
должна была утвердить господство Netscape на вечные времена благодаря неслыханному
набору новшеств, таких как интерфейс подключаемых модулей, поддержка языка Java,
встроенный язык сценариев JavaScript, возможность разбивки окна на кадры (frames) и многое
другое. К этому времени W3C окончательно завяз в своем проекте HTML 3, который был
слишком сильно оторван от реального мира и на завершение которого у консорциума попросту
не хватало ни сил, ни средств. HTML 3 по сравнению с HTML 2.0 был важным шагом вперед,
однако он развивался по-прежнему в рамках идеологии структурной разметки, а инструмент,
дающий возможность выйти за эти рамки, - система CSS - был еще далек от завершения.
• В этот переломный момент в игру вступил новый участник - всемогущая корпорация Microsoft.
Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка,
недооценивала перспективы Internet и не собиралась как-либо участвовать в развитии этой
информационной среды, считая ее, по-видимому, слишком демократичной и
непредсказуемой. Однако невероятный взлет Netscape (число копий браузера Navigator
измерялось к этому времени уже десятками миллионов) заставил Microsoft изменить мнение.
Знакомство с HTML (13/14)
• И именно на браузерном фронте, где господство Netscape оставляло меньше всего шансов
конкурентам, корпорация Microsoft нанесла свой главный удар. Поначалу мало кто верил, что
браузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял
собой ничего выдающегося, сможет составить конкуренцию Netscape. Тем не менее
выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все
расширения Netscape и обладала оригинальным и привлекательным интерфейсом, вызвала
настоящий бум и очень быстро утвердилась в качестве "второго главного браузера". Сейчас
Microsoft и Netscape делят рынок браузеров почти поровну, и окончательный исход их битвы не
берется предсказать никто.
• Одновременно с разработкой конкурентоспособного браузера Microsoft решила "навести
порядок" и в мире HTML. Взяв под свою опеку W3C, она напитала его денежными и людскими
ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации.
Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2,
который, по сути, всего лишь описывает большинство расширений Netscape (с тем же успехом
их можно назвать теперь "расширениями Microsoft"). Пройдя обычный в W3C процесс
обсуждения и внесения поправок, спецификация HTML 3.2
(http://www.w3.org/pub/WWW/TR/REC-html32.html) была утверждена совсем недавно (в январе
этого года) и является, таким образом, последним на настоящий момент официальным
стандартом языка. Спираль развития HTML завершила свой первый виток - как и в "золотой
век", расхождения между предписаниями стандарта и реализацией HTML в браузерах вновь
сведены к минимуму.
Знакомство с HTML (14/14)
• Однако HTML сегодня уже совсем не тот, что три года назад. Становится все более очевидным,
что язык этот в его теперешнем состоянии практически исчерпал перспективы развития и что
добавление новых тегов вряд ли выведет его на принципиально иной уровень. Это особенно
понятно тем, кто занимается практическим дизайном: из-за того, что HTML с самого начала не
ориентировался на описание внешнего вида документа, он не в состоянии удовлетворительно
выполнить эту задачу даже сейчас, при наличии множества визуально-ориентированных тегов.
Прямым следствием этого является огромное количество расхождений в интерпретации тегов
браузерами. Как бы строго вы ни следовали стандарту, HTML-файл приходится обязательно
тестировать по меньшей мере в двух браузерах - Netscape Navigator и Internet Explorer, и чаще
всего такое тестирование не обходится без неприятных сюрпризов: отступы, пробелы, размеры
элементов оформления и логика их размещения на странице даже для простейших тегов
различаются довольно сильно.
• Пожалуй, главный вклад Microsoft в развитие HTML (помимо новых тегов, число которых
сравнительно невелико) состоит в том, что Microsoft Internet Explorer 3.0 стал - наконец-то первым массовым браузером, поддерживающим стилевые спецификации (CSS). И хотя эта
реализация CSS является несовершенной и далеко не полной, хочется надеяться, что она
поможет сдвинуть с мертвой точки процесс массового освоения CSS. В частности, поддержка
этого стандарта появится в Netscape Navigator 4.0.
Как устроен HTML-документ (1/16)
• HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут
содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа. </P>
<P>Этот *.html-файл может быть
одновременно открыт и в Notepad,
и в Netscape.
Сохранив изменения в Notepad, просто нажмите
кнопку Reload ('перезагрузить') в Netscape,
чтобы увидеть эти изменения реализованными
в HTML-документе.
</P>
</body>
</html>
Как устроен HTML-документ (2/16)
Обязательные метки
• <html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка
</html> должна завершать HTML-документ.
• <head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа.
Помимо наименования документа (см. описание метки <title>
ниже), в этот раздел может включаться множество служебной
информации.
Как устроен HTML-документ (3/16)
• <title> ... </title>
Все, что находится между метками <title> и </title>, толкуется
браузером как название документа. Netscape Navigator, например,
показывает название текущего документа в заголовке окна и
печатает его в левом верхнем углу каждой страницы при выводе на
принтер. Рекомендуется название не длиннее 64 символов.
• <body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа,
каковое тело, собственно, и определяет содержание документа.
Как устроен HTML-документ (4/16)
• <H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают
заголовки шести различных уровней. Заголовок первого
уровня — самый крупный, шестого уровня, естественно
— самый мелкий.
• <P> ... </P>
Такая пара меток описывает абзац. Все, что заключено
между <P> и </P>, воспринимается как один абзац.
Как устроен HTML-документ (5/16)
Метки <Hi> и <P> могут содержать дополнительный
атрибут ALIGN (читается "элайн", от английского
"выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по
центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по
правому краю</P>
Как устроен HTML-документ (6/16)
• Непарные метки
В этом разделе мы поговорим о метках, которые не
подчиняются двум основным правилам HTML: все они
непарные, а некоторые (так называемые &последовательности) к тому же должны вводиться только
маленькими буквами.
• <BR>
Эта метка используется, если необходимо перейти на
новую строку, не прерывая абзаца.
Как устроен HTML-документ (7/16)
• Метка <HR> описывает горизонтальную линию
• Метка может дополнительно включать атрибуты SIZE
(определяет толщину линии в пикселах) и/или WIDTH
(определяет размах линии в процентах от ширины экрана).
Как устроен HTML-документ (8/16)
• &-последовательности
Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток,
возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &последовательностей (их еще называют символьными объектами или эскейппоследовательностями). Браузер показывает на экране символ "<", когда встречает в тексте
последовательность < (по первым буквам английских слов less than — меньше, чем). Знак ">"
кодируется последовательностью > (по первым буквам английских слов greater than —
больше, чем).
Символ "&" (амперсанд) кодируется последовательностью &
Двойные кавычки (") кодируются последовательностью "
Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все
буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие).
Использование меток типа " или & не допускается.
Вообще говоря, &-последовательности определены для всех символов из второй половины
ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы
не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с
ASCII-кодами выше 127 только в виде &-последовательностей.
Как устроен HTML-документ (9/16)
• Комментарии
Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это
удобно для размещения комментариев.
<!-- Это комментарий -->
• Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста.
С одной стороны, можно прямо указать, что шрифт на некотором участке
текста должен быть жирным или наклонным, то есть изменить физический
стиль текста. С другой стороны, можно пометить некоторый фрагмент текста
как имеющий некоторый отличный от нормального логический стиль,
оставив интерпретацию этого стиля браузеру.
Как устроен HTML-документ (10/16)
• Физические стили
Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего
шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным
шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.
Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками,
будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную
ширину символа.
• Логические стили
При использовании логических стилей автор документа не может знать заранее, что увидит на
экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному.
Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст
вместо выделенного логическим стилем. Вот самые распространенные логические стили.
Как устроен HTML-документ (11/16)
• <EM> ... </EM>
От английского emphasis — акцент.
• <STRONG> ... </STRONG>
От английского strong emphasis — сильный акцент.
• <CODE> ... </CODE>
Рекомендуется использовать для фрагментов исходных текстов.
• <SAMP> ... </SAMP>
От английского sample — образец. Рекомендуется использовать для демонстрации образцов
сообщений, выводимых на экран программами.
• <KBD> ... </KBD>
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно
ввести с клавиатуры.
• <VAR> ... </VAR>
От английского variable — переменная. Рекомендуется использовать для написания имен переменных.
Как устроен HTML-документ (12/16)
• Организация текста внутри документа
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно
организовывать в списки, выводить их на экран в отформатированном виде, или
увеличивать левое поле. Разберем все по порядку.
• Ненумерованные списки: <UL> ... </UL>
Текст, расположенный между метками <UL> и </UL>, воспринимается как
ненумерованный список. Каждый новый элемент списка следует начинать с метки
<LI>. Например, чтобы создать вот такой список:
• Петр;
• Данила;
• белая кобыла
необходим вот такой HTML-текст:
Как устроен HTML-документ (13/16)
<UL>
<LI>Петр;
<LI>Данила;
<LI>белая кобыла
</UL>
Обратите внимание: у метки <LI> нет парной закрывающей метки.
Как устроен HTML-документ (14/16)
• Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как ненумерованные,
только вместо символов, выделяющих новый элемент, используются
цифры. Если слегка модифицировать наш предыдущий пример:
<OL>
<LI>Петр;
<LI>Данила;
<LI>белая кобыла
</OL>
Как устроен HTML-документ (15/16)
•
получится вот такой список:
1.
2.
3.
Петр;
Данила;
белая кобыла
Как устроен HTML-документ (16/16)
• Форматированный текст: <PRE> ... </PRE>
В самом начале мы говорили о том, что браузеры игнорируют
множественные пробелы и символы конца строки. Из этого правила,
однако, есть исключение.
Текст, заключенный между метками <PRE> и </PRE> (от английского
preformatted — предварительно форматированный), выводится браузером
на экран как есть — со всеми пробелами, символами табуляции и конца
строки. Это очень удобно при создании простых таблиц.
• Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>
Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>,
выводится браузером на экран с увеличенным левым полем.
За пределами HTML-файла (1/11)
• Связывание
Как уже упоминалось в самом начале, сокращение HTML означает "язык маркировки
гипертекстов". Про маркировку мы уже поговорили достаточно. Не пора ли перейти к
гипертексту?
Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно
читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от
одного фрагмента текста к другому. Системы помощи многих популярных программных
продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на
некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее
назначенному документу или фрагменту документа.
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[адрес перехода]">выделенный фрагмент текста</A>
За пределами HTML-файла (2/11)
В качестве параметра [адрес перехода] может использоваться
несколько типов аргументов. Самое простое — это задать имя
другого HTML-документа, к которому нужно перейти. Например:
<A HREF="index.html">Перейти к оглавлению</A> Такой фрагмент
HTML-текста приведет к появлению в документе выделенного
фрагмента
Перейти к оглавлению
, при нажатии на который в текущее окно будет загружен документ
index.shtml.
За пределами HTML-файла (3/11)
Обратите внимание: если в адресе перехода не указан каталог, переход будет
выполнен внутри текущего каталога. Если в адресе перехода не указан сервер,
переход будет выполнен на текущем сервере.
Из этого следует одно очень важное практическое соображение. Если Вы подготовили
к публикации некоторую группу HTML-документов, которые ссылаются друг на друга
только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта
группа документов будет работать точно так же, если ее поместить в любой другой
каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким
образом, у Вас появляется возможность разрабатывать целые коллекции документов
без подключения к Интернет, и только после окончательной готовности,
подтвержденной испытаниями, помещать коллекции документов на Интернет
целиком.
За пределами HTML-файла (4/11)
При необходимости можно задать переход не просто к некоторому документу, но и к
определенному месту внутри этого документа. Для этого необходимо создать в документе, к
которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на
примере.
Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен"
в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот
такой анкер в файле 2.html:
<A NAME="AAA">Переход закончен</A> Слова "Переход закончен" при этом никак не будут
выделены в тексте документа.
Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер:
<A HREF="2.html#AAA">Переход к анкеру AAA</A> Кстати говоря, переход к этому анкеру можно
определить и внутри самого документа 2.html — достаточно только включить в него вот такой
фрагмент:
<A HREF="#AAA">Переход к анкеру AAA</A> На практике это очень удобно при создании
больших документов. В начале документа можно поместить оглавление, состоящее из ссылок
на анкеры, расположенные в заголовках разделов документа.
За пределами HTML-файла (5/11)
Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами.
Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от
маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на
анкер AAA, хотя документ, скорее всего, будет загружен корректно.
Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие
виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A> Такая ссылка, если ей
воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext,
находящегося в каталоге directory на сервере server, на локальный диск пользователя.
<A HREF="mailto:user@mail.box">Послать письмо</A> Если пользователь совершит переход по
такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой
программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.
За пределами HTML-файла (6/11)
• Изображения в HTML-документе
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое
изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg
или *.jpeg) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif,
находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif"> Метка <IMG SRC="[имя файла]"> может также включать атрибут
ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка"> Встретив такую метку, браузер покажет на экране текст
Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может
оказаться необходимым для старых браузеров, которые не поддерживают изображений, а
также на случай, если у браузера отключена автоматическая загрузка изображений (при
медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом
сервере. В этом случае стоит указать его полное имя
За пределами HTML-файла (7/11)
• Цветовая гамма HTML-документа
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список
этих атрибутов:
• bgcolor
Определяет цвет фона документа.
• text
Определяет цвет текста документа.
• link
Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по
гипертекстовой ссылке.
• vlink
Определяет цвет ссылки на документ, который уже был просмотрен ранее.
• alink
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть
непосредственно перед переходом по ссылке.
• Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой
шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным,
зеленым и синим) в диапазоне от нуля (00) до 255 (FF).
За пределами HTML-файла (8/11)
• bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное
представление числа 255). Результат — белый цвет.
• text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат —
черный цвет.
• link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль).
Результат — красный цвет.
Кроме того, метка <BODY> может включать атрибут background="[имя файла]", который задает
изображение, служащее фоном для текста и других изображений. Как и любое другое
изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или
JPEG (файл с расширением *.jpg или *.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в
котором открыт документ, подобно тому, как при строительстве большие пространства стен
покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при
выводе HTML-документа на печать. Из этого есть одно важное практическое следствие:
старайтесь не использовать текст белого цвета.
За пределами HTML-файла (9/11)
• Заголовок HTML-документа
Заголовок HTML-документа, вообще говоря, не виден пользователю при просмотре. Однако в нем
есть некоторые интересные особенности, которые стоит знать.
Заголовок HTML-документа может включать неограниченное количество так называемых METAинструкций. META-инструкция — это просто способ определить некоторую переменную путем
указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее
типичные META-инструкции:
<META NAME="description" CONTENT="Это руководство - учебник для тех, кто хочет публиковать
документацию любого рода на глобальной компьютерной сети Интернет">
Такая META-инструкция определяет переменную description, содержащую краткое описание
документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTMLфайлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют
ее в ответ на запросы пользователей.
За пределами HTML-файла (10/11)
• <META NAME="keywords" CONTENT="Интернет, HTML, WWW, руководство, публикация,
гипертекст">
Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов,
описывающих содержание документа. На практике поиск по ключевым словам очень удобно
использовать при строительстве поискового механизма, работающего в пределах одного сервера.
Другая группа META-инструкций определяет эквиваленты команд протокола передачи
гипертекстов. Разберем несколько примеров:
• <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251">
Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как
содержащий HTML-текст в кодировке Windows/1251.
За пределами HTML-файла (11/11)
• <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.vvsu.ru">
Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки
документа, содержащего такую инструкцию, автоматически будет загружен документ
http://www.vvsu.ru.
Таблицы (1/5)
• Для чего нужны таблицы?
На этот вопрос есть очевидный ответ: таблицы нужны для представления
информации в табличном виде. Есть, однако, и менее очевидные ответы.
До настоящего времени мы имели дело с документами, в которых
существовал только один "поток" текста. На практике иногда очень хочется
расположить текст в несколько колонок. Таблица может в этом помочь.
Кроме того, таблица, состоящая из одной ячейки, может очень эффектно
выделить фрагмент текста, на который Вы хотите обратить внимание
читателя.
Таблицы (2/5)
В устройстве таблицы легче всего разобраться на простом примере.
<HTML> <HEAD> <TITLE>Пример 10</TITLE> </HEAD>
<BODY>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION><!--Это заголовок таблицы-->
У таблицы может быть заголовок
</CAPTION>
<TR><!--Это начало первой строки-->
<TD><!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD><!--Это конец первой ячейки-->
<TD><!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD><!--Это конец второй ячейки-->
</TR><!--Это конец первой строки-->
<TR><!--Это начало второй строки-->
<TD><!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD><!--Это конец первой ячейки-->
<TD><!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD><!--Это конец второй ячейки-->
</TR><!--Это конец второй строки-->
</TABLE><!--Это конец таблицы-->
</BODY>
</HTML>
Таблицы (3/5)
Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:
•
ALIGN
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево),
ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
•
WIDTH
Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
•
BORDER
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица
показывается без рамки.
•
CELLSPACING
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
•
CELLPADDING
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).
•
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может
включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION
ALIGN=BOTTOM> (заголовок помещается под таблицей).
Таблицы (4/5)
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой
</TR>. Метка <TR> может включать следующие атрибуты:
• ALIGN
Устанавливает выравнивание текста в ячейках строки. Допустимые
значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание
по центру), ALIGN=RIGHT (выравнивание вправо).
• VALIGN
Устанавливает вертикальное выравнивание текста в ячейках строки.
Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю),
VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание
по нижнему краю).
Таблицы (5/5)
Каждая ячейка таблицы начинается с метки <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).
Формы (1/14)
• Форма — это инструмент, с помощью которого HTML-документ
может послать некоторую информацию в некоторую заранее
определенную точку внешнего мира, где информация будет
некоторым образом обработана.
Формы передают информацию программам-обработчикам в виде
пар [имя переменной]=[значение переменной]. Имена переменных
следует задавать латинскими буквами. Значения переменных
воспринимаются обработчиками как строки, даже если они
содержат только цифры.
Формы (2/14)
• Как устроена форма
Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе
несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может
размещаться внутри форм без ограничений.
Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:
• ACTION
Обязательный атрибут. Определяет, где находится обработчик формы.
• METHOD
Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов)
данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если
значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
• ENCTYPE
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение
атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.
Формы (3/14)
• Простейшая форма
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то
орган управления. Создать такой орган управления очень просто:
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit
(читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на
которую все имеющиеся в форме данные будут переданы обработчику, определенному в
метке <FORM>.
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута
VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"),
например:
<INPUT TYPE=submit VALUE="Поехали!">
Формы (4/14)
• Теперь мы знаем достаточно для того, чтобы написать простейшую форму. Она не будет собирать
никаких данных, а просто вернет нас к тексту этой главы.
<HTML>
<HEAD>
<TITLE>Пример 11</TITLE>
</HEAD>
<BODY>
<H1>Простейшая форма </H1>
<FORM ACTION="pr0008.html"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Назад...">
</FORM> <!--Это конец формы-->
</BODY>
</HTML>
Формы (5/14)
Надпись, нанесенную на кнопку, можно при необходимости передать
обработчику путем введения в определение кнопки атрибута NAME=[имя]
(читается "нэйм", от английского "имя"), например:
• <INPUT TYPE=submit NAME=button VALUE="Поехали!">
При нажатии на такую кнопку обработчик вместе со всеми остальными
данными получит и переменную button со значением Поехали!.
В форме может быть несколько кнопок типа submit с различными именами
и/или значениями. Обработчик, таким образом, может действовать поразному в зависимости от того, какую именно кнопку submit нажал
пользователь.
Формы (6/14)
• Как форма собирает данные
Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT>
должен включать атрибут NAME=[имя], определяющий имя элемента (и,
соответственно, имя переменной, которая будет передана обработчику).
Имя должно задаваться только латинскими буквами.
Большинство элементов <INPUT> должны включать атрибут
VALUE="[значение]", определяющий значение, которое будет передано
обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT
TYPE=password>, однако, этот атрибут не обязателен, поскольку значение
соответствующей переменной может вводиться пользователем с
клавиатуры.
Формы (7/14)
• Основные типы элементов <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.
Формы (8/14)
• TYPE=radio
Определяет радиокнопку. Может содержать дополнительный атрибут checked
(показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами
может быть только одна помеченная радиокнопка. Пример:
<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.
Формы (9/14)
• 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.
Формы (10/14)
• TYPE=hidden
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы
и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме,
которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой
версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете
придумать сами. Пример:
• <INPUT TYPE=hidden NAME=version VALUE="1.1">
Определяет скрытую переменную version, которая передается обработчику со значением 1.1.
• TYPE=reset
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.
Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа
reset может и не иметь атрибута name. Пример:
• <INPUT TYPE=reset VALUE="Очистить поля формы">
Определяет кнопку Очистить поля формы, при нажатии на которую форма возвращается в
исходное состояние
Формы (11/14)
Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для
ввода текста <TEXTAREA>.
Меню <SELECT> из n элементов выглядит примерно так:
<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2] ...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Как Вы видите, меню начинается с метки <SELECT> и заканчивается меткой </SELECT>.
Метка <SELECT> содержит обязательный атрибут NAME, определяющий имя
переменной, которую генерирует меню.
Формы (12/14)
• Метка <SELECT> может также содержать атрибут MULTIPLE, присутствие
которого показывает, что из меню можно выбрать несколько элементов.
Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в
котором находятся элементы меню (высоту окна в строках можно задать
атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев
показывается в виде выпадающего меню.
• Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE
устанавливает значение, которое будет передано обработчику, если выбран
этот элемент меню. Метка <OPTION> может включать атрибут checked,
показывающий, что данный элемент отмечен по умолчанию.
Формы (13/14)
• Разберем небольшой пример.
<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
<OPTION
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и
Вариант 3.
По умолчанию выбран элемент Вариант 1. Обработчику будет передана
переменная selection значение которой может быть option1 (по
умолчанию), option2 или option3.
Формы (14/14)
• После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым.
Например:
<TEXTAREA NAME=address ROWS=5 COLS=50> А здесь - Ваш адрес...</TEXTAREA>
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет
передано обработчику (в примере — address). Атрибут ROWS устанавливает высоту окна в строках
(в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50).
Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое
окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть
конвертированы в соответствующие им символьные объекты.
ASP (1/22)
ASP (Active Server Pages) – это мощная технология от Microsoft, позволяющая легко разрабатывать приложения для
WWW. ASP работает на платформе Windows NT и IIS (Internet Information Server), начиная с версии 3, хотя вроде
есть реализации на других платформах. ASP – это не язык программирования, это внутренняя технология,
позволяющая подключать программы к Web-страницам. Основа успеха ASP – простой скриптовый язык (Visual
Basic Script или Java Script) и возможность использования внешних COM-компонент.
Как это все происходит?
Вы пишите программу и складываете в файл на сервере. Браузер клиента запрашивает файл. Файл сначала
интерпретируется сервером, на выходе производится HTML-код. Этот HTML посылается клиенту. Файлы с
программами имеют расширение .asp. Файлы asp – это обычные текстовые файлы, содержащие исходные тексты
программ. Файлы делаются с помощью любого текстового редактора. Каталог, в котором размещены файлы asp
должен иметь права на выполнение, так как сервер исполняет эти файлы, когда браузер их запрашивает.
Собственно программы пишутся на любом скриптовом языке, который установлен в системе. По умолчанию
поддерживаются VBScript и JavaScript. Можно доустановить другие (например, Perl). Если ничего специально не
указывать используется VBScript. В дальнейшем будем ссылаться только на него. Программные фрагменты
заключаются в скобки <% %>. Можно ставить открывающую скобку в начале файла, закрывающую – в конце, все
что между ними – программа на Visual Basic'е.
ASP (2/22)
• Какие средства есть для программирования?
Web – нормальная среда программирования, если правильно
понять, что есть что. В VBScript есть все нормальные конструкции
структурного программирования (if, while, case, etc). Есть
переменные (описывать не обязательно, тип явно не задается).
Поддерживаются объекты. Работа с ними обычная – Object.Property,
Object.Method. Есть ряд встроенных объектов (Request, Response,
Session, Server, Connection, Recordset). Можно доустанавливать
другие компоненты (скачивать, покупать, программировать),
например для работы с электронной почтой.
ASP (3/22)
• Вывод
Понятия "экран", куда можно выводить данные нет. Все, что надо показать пользователю,
выбрасывается в выходной поток на языке HTML. Браузер пользователя интерпретирует этот
HTML. Для упрощения вывода существует объект Response. Вывод осуществляется с помощью
метода Write.
Response.Write("<h2>Hello, world!</h2>").
Так производится запись во внутренний буфер объекта Response. Когда скрипт заканчивает
работу, весь буфер выдается клиенту. Надо заметить, что клиент получает "чистый" HTML, таким
образом программы на ASP не зависят от клиентского ПО, что очень важно. Если внутри
выводимой строки нужно использовать кавычку, кавычка удваивается. Другие методы и свойства
Response позволяют управлять выводом. Так Response.Buffer регулирует, получает ли клиент
данные по мере из записи в Response, или все сразу по завершении исполнения страницы. Метод
Response.Redirect перенаправляет браузер на другую страницу. Чтобы им пользоваться, нельзя до
него на странице использовать Response.Write.
ASP (4/22)
• Ввод
Программа на ASP не может явно спросить пользователя о чем-то. Она получает данные из других
страниц, либо через URL. Передаваемые параметры помещаются во входной поток и доступны
через объект Request. Чтобы передать переменную var в программу test.asp, надо написать:
test.asp?var=abc
Чтобы из программы получить значение этой переменной, надо написать:
var = Request("var")
Несколько переменных разделяется знаком &:
test.asp?var1=abc&var2=def
ASP (5/22)
Кроме того, чтобы задавать параметры в URL, можно воспользоваться формами HTML. В
вызывающей странице пишем так:
<form method="get" action="test.asp">
<input type=text name="var1" value="default">
<input type=hidden name="var2" value="var2value">
<input type=submit value="Submit Form">
</form>
При этом пользователь увидит форму из одного поля ввода (var1), в нем будет значение по
умолчанию "default". Второе поле (var2) будет невидимо и будет передавать всегда
фиксированное значение "var2value". Кнопка "Submit Form" завершает заполнение формы и
передает все переменные на test.asp (action). Если method="get", переменные передаются через
URL (test.asp?var1=default&var2=var2value). Если method="post", передаются вместе с запросом
так, что внешне передача переменных не заметна. В вызываемой программе безразлично, какой
метод изпользовался (почти). Если у вас нет специальных аргументов за метод GET, используйте
метод POST.
ASP (6/22)
• Формы
Формы HTML используются для организации диалога с
пользователем. Поддерживаются стандартные элементы
управления. Все многообразие задается немногими
тэгами:
• INPUT (с параметром TYPE=)
• SELECT
• TEXTAREA
ASP (7/22)
• Взаимосвязь между отдельными страницами
Обычно сервер WWW не хранит состояние приложения, т.е. все запросы взаимонезависимы, и
нет стандартного способа понять, что несколько запросов пришли от одного и того же
пользователя. Но это очень нужно для разработки полноценных приложений и является одной
из главных проблем разработки Web-приложений.
Один из методов решения этой проблемы - cookies. Пользователю при первом обращении
выдается специальный идентификатор, после этого браузер пользователя предъявляет этот
идентификатор при каждом обращении, и сервер может распознать, что это тот же самый
пользователь. Пользователь может отключить cookies, в этом случае этот метод не работает.
ASP, используя cookies, предоставляет программисту более простое средство - объект Session
(сессия). Сессия стартует, когда новый пользователь обращается к любому asp-файлу
приложения. Сессия заканчивается при отсутствии активности пользователя в течение 20 минут,
либо по явной команде. Специальный объект Session хранит состояние сессии. Туда можно
записывать переменные, которые доступны из любой страницы в этой сессии.
ASP (8/22)
Записать данные в этот объект можно просто:
Session("var") = var
Считать потом еще проще:
var = Session("var")
Сессия, таким образом, – это еще один метод передачи данных между страницами. Одна
страница пишет данные в сессию, другая – берет потом оттуда.
Наряду с объектом Session существует объект Application. Если сессия создается для каждого
нового пользователя, до Application существует в единственном экземпляре, и может
использоваться всеми страницами приложения.
Application("var") = var var = Application("var")
ASP (9/22)
• Управление приложением
Программисту предоставляется возможность реагировать на 4 события: старт/стоп приложения и старт/стоп каждой
сессии. Для реализации этих событий предназначен файл global.asa, который должен располагаться в корневом каталоге
приложения. Вот его примерный скелет:
<SCRIPT LANGUAGE=VBScript RUNAT=Server>
SUB Application_OnStart
END SUB
SUB Application_OnEnd
END SUB
SUB Session_OnStart END
SUB SUB Session_OnEnd
END SUB
</SCRIPT>
Нужно "просто" вписать Ваш код на соответствующее место. Нужно заметить, что отлаживать код для global.asa довольно
непросто, так как он выполняется при очень специфических обстоятельствах (к примеру при старте или остановке
сервера).
ASP (10/22)
• Использование внешних компонент
Если на сервере установлены дополнительные компоненты, их можно
использовать из ASP. Стандартные объекты (например из библиотек ADO
(Connection и Recordset) и Scripting (Dictionary, FileSystemObject)) доступны
всегда. Установка новой компоненты обычно состоит в копировании dllфайла в каталог на сервере и ее регистрации с помощью программы
regsvr32.exe. [В COM+ используется своя процедура инсталляции объектов,
это однако не влияет на использования объектов.]
Создать экземпляр объекта можно так:
Set var = Server.CreateObject("Class.Object")
ASP (11/22)
Class.Object указываются в документации на компоненту. В переменной var
запоминается ссылка на созданный экземпляр объекта. Когда объект не
нужен, ссылку нужно обнулить с помощью команды:
Set var = Nothing
Пожалуйста всегда обнуляйте все ссылки на объекты, когда они больше не
нужны. Теоретически это должно происходить автоматически при
завершении процедуры/страницы, однако в стандартной сборке мусора
есть определенные "проблемы".
В остальном использование компоненты зависит от самой этой
компоненты.
ASP (12/22)
• Работа с базами данных
Из ASP можно легко и просто работать с любыми базами данных. Это делается через две
промежуточные технологии: ODBC и ADO.
ODBC позволяет организовать доступ к любым базам данных через унифицированный интерфейс
с помощью языка SQL. Специфика конкретных СУБД учитывается при помощи специальных
драйверов БД. Такие драйверы существуют для всевозможных СУБД (в частности SQL Server,
Oracle, Access, FoxPro). Поддержка ODBC обеспечивается на уровне операционной системы
Windows (NT). Настройка – через Control Panel/ODBC. Базовым понятием является источник
данных или data source. Источник данных – это совокупность сведений о базе данных, включая ее
драйвер, имя компьютера и файла, параметры. Чтобы пользоваться базой надо создать источник
данных для нее. Важно, чтобы источник данных был "системным", в отличии от
"пользовательского". После этого надо лишь знать имя источника данных. [В настоящее время
ODBC отступает перед натиском технологии OLE DB. На практике это однако практически ничего
не изменяет. Вместо имени источника данных нужно использовать Connection String, в которой
указывается имя ODBC-драйвера и все его параметры.]
ASP (13/22)
ADO – это совокупность объектов, доступных из ASP, позволяющих
обращаться к источнику данных ODBC [или OLE DB]. Фактически
нужны лишь 2 объекта – Connection, представляющий соединение с
базой данных и Recordset, представляющий набор записей,
полученный от источника. Сначала необходимо открыть
соединение, потом к нему привязать Recordset, потом, пользуясь
методами Recordset'а, обрабатывать данные. Вот пример:
ASP (14/22)
<% Dim Conn, RS, strSQL, strOut
strOut = ""
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open "Data-Source-Name"
Set RS = Server.CreateObject("ADODB.Recordset")
strSQL = "SELECT * FROM AGENTS ORDER BY USER_ID" RS.Open strSQL, Conn
RS.MoveFirst
strOut = strOut & "<P>Here is the data:"
strOut = strOut & "<TABLE BORDER=""1"">"
strOut = strOut & "<TR><TH>USER_ID</TH><TH>Name</TH></TR>"
Do While Not RS.EOF
strOut = strOut & "<TR>"
strOut = strOut & "<TD>"
& _ RS.Fields("USER_ID") & "</TD>"
strOut = strOut & "<TD>"
& _ RS.Fields("NAME") & "</TD>"
strOut = strOut & "</TR>"
RS.MoveNext
Loop
strOut = strOut & "</TABLE>"
strOut = strOut & "<HR>"
strOut = strOut & "That's it!"
RS.Close
Set RS = Nothing
Conn.Close
Set Conn = Nothing
Response.Write strOut %>
ASP (15/22)
Если команда SQL не возвращает данных, recordset не нужен, надо
пользоваться методом Conn.Execute(SQL_COMMAND).
Если Вы хотите вызывать хранимые процедуры сервера БД с параметрами,
нужно воспользоваться объектом Command, который в свою очеред
содержит объекты Parameter
ASP (16/22)
• Описание переменных
VBScript - очень нетребовательный к программисту язык. Так он не требует
описывать переменные и не содержит явных типов данных. Все переменные
принадлежат одному типу Variant. Из-за отсутствия описаний могут произойти
очень трудно обнаруживаемые ошибки. Одна опечатка может стоить полдня
поисков.
Однако, есть возможность явно потребовать описания переменных. Для этого
первой строкой в ASP-файле нужно написать Option Explicit. После этого
обращение к переменной, которая не была объявлена с помощью Dim, вызывает
ошибку с указанием номера строки.
Кстати, где расположены описания Dim в процедуре - совершенно не важно. Они
могут стоять как до использования переменной, так и после, и даже в цикле.
Видимо они отрабатываются препроцессором. Явно задать тип переменной с
помощью Dim Var as Typ, как в Visual Basic, все равно нельзя.
ASP (17/22)
• Чередование ASP/HTML
Если нужно выдать большой кусок HTML, можно не пользоваться
Response.Write. Если в asp-файле встречается кусок текста вне скобок
<% %>, он трактуется просто как HTML, который надо вывести.
Пример:
<% If var="VAL" Then %>
Дорогой друг! …
<% Else %>
Извините, вам сюда нельзя …
<% End If %>
ASP (18/22)
• Обработка ошибок
Для отслеживания ошибок используется специальный объект Err. Он
устанавливается в ненулевое значение, если предыдущая команда породила
ошибку. Ее можно проверять с помощью If, и таким образом реагировать на
ошибки. Чтобы из-за ошибки не прерывалось выполнение программы, в начале
нужно включить команду
On Error Resume Next
• Включение других файлов
Можно выносить повторяющийся код в отдельный файл, и подключать к разным
другим по мере необходимости с помощью команды include. Это очень удобно,
если вы хотите вынести повторяющийся код в отдельный файл и использовать
снова и снова в разных страницах:
<!--#include file="filename.inc" -->
ASP (19/22)
• Обработка форм
Если надо что-то спросить у пользователя и на основании этого что-то сделать, в простейшем случае
создается два файла: один с формой, второй – с ее обработчиком. Обработчик выполняет все
действия. Пример:
form.htm:
<form method="post" action="run.asp">
<input type=text name="var1" value="default">
<input type=hidden name="var2" value="var2value">
<input type=submit value="Обработать">
</form>
run.asp:
var1 = Request("var1")
var2 = Request("var2")
… что-то делаем …
Response.Write("все хорошо!<br>”)
ASP (20/22)
• Рекурсивная обработка форм
Удобный метод состоит в том, чтобы сбор данных и
обработку осуществлял один и тот же файл. Для этого
пишется asp, в котором есть разные разделы.
Специальная переменная отвечает за выбор раздела при
запуске. Пример:
test.asp:
ASP (21/22)
<%
Action = Request("Action")
If Action = "" Then
' Action не заполнен – значит надо показать форму
Action = "FORM"
End If
Select Case Action
Case "FORM"
' Показываем форму
' action- сам на себя, Action="PROCESS", т.е.
' второй раз пойдет по другой ветке
%>
<form method="post" action="test.asp">
<input type=hidden name="Action" value="PROCESS">
<input type=text name="var1" value="default">
<input type=submit value="Обработать"> </form>
<%
Case "PROCESS"
' Обрабатываем
var1 = Request("var1")
var2 = Request("var2")
… что-то делаем …
Response.Write("все хорошо!<br>")
End Select
%>
ASP (22/22)
• Переменные HTTP
Запрос от браузера, кроме запрашиваемой страницы несет еще
некоторые данные. Эти данные, например, IP-адрес клиента, доступны
через специальные переменные объекта Request. IP-адрес –
Request("REMOTE_ADDR").
• Переадресация
Очень легко написать на ASP скрипт, который будет производить
некоторые расчеты, и в зависимости от результатов переадресовывать
браузер на разные URL (например, подставлять нужный баннер). Делается
это так:
Response.Redirect "somewhere.html"
Только надо следить, чтобы до выполнения команды redirect ничего не
было записано в Response (даже комментарии HTML).