Основы HTML

HTML-документ представляет собой ASCII-файл, доступный для просмотра и редактирования в любом редакторе текстов. Эти файлы обычно имеют расширение НТМ или HTML.

Хотя довольно часто говорят о программировании на HTML, это не совсем корректно. HTML не является языком программирования в традиционном понимании. Это язык разметки документа.

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

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

Бра́узер это программа для просмотра web-сайтов, то есть для запроса web-страниц из Интернета, их обработки, вывода, и перехода от одной страницы к другой.

Большинство браузеров также наделены способностями к просмотру оглавления FTP-серверов.

Наиболее часто используемые: Internet Explorer, Opera, Mozilla, Netscape Navigator.

Символы, которые управляют отображением текста и при этом сами не отображаются на экране, в языке HTML принято называть тэгами (от английского слова tag — ярлык, признак).

Все тэги языка HTML выделяются символами -ограничителями (< и >), между которыми записывается идентификатор (имя) тэга и, возможно, его параметры.

Например, если необходимо выделить какую-либо часть текста на экране полужирным шрифтом, это можно сделать с помощью такого его оформления:

<в>Этот важный текст</в>

Символы <в> включают полужирное начертание, а символы </в> выключают его.

Названия тэгов, а также их параметров можно записывать на любом регистре.

Большинство тэгов HTML используется попарно, т. е. для определенного тэга, назовем его открывающим, в документе имеется соответствующий закрывающий тэг. По правилам HTML закрывающий тэг записывается так же, как и открывающий, но с символом / (прямой слэш) перед именем тэга. Единственным принципиальным различием парных тэгов является то, что закрывающие тэги не используют параметры.

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

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

Для включения в текст документа, информации, не предназначенной к выводу на экран используются тэги комментария со специальными ограничителями (<!-- и —>).

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

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

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

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

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

Для создания гиперссылки используется пара тегов <А> и </А>. Заключенный меж­ду ними фрагмент HTML-документа при просмотре будет отображаться как ги­перссылка. Тег <А> обязательно должен использоваться совместно с атрибутом HREF. С помощью него задается ссылка на документ, к которому должен быть произве­ден переход при щелчке на гиперссылке.

Таким образом, фрагмент HTML-документа, задающий гиперссылку, в общем виде выглядит так:

<А HREF=URL_pecypca> фрагмент документа </А>

Здесь URL-адрес, задаваемый атрибутом HREF, может быть двух видов: абсолют­ным и относительным:

=абсолютный URL-адрес уже был рассмотрен нами выше. В нем содержится полная информация о местоположении ресурса и протоколе обращения к ре­сурсу;

=относительный URL-адрес указывает расположение ресурса относительно ме­стоположения текущего HTML-документа.

Формы

Тэги форм (<FORM> и </FORM>) предназначены для организации интерактивного взаимодействия между пользователем, работающим на кли­ентской машине, и программами, работающими на стороне сервера. Между ними распо­лагаются строки HTML - кода, описывающие различные элементы управления таким взаимодействием: кнопки, поля ввода, флажки и т. п. Формы являются одним из основных компонент современных технологий автоматизации организационного управления. Более подробно о них будет рассказано в следующей главе.

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

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

Браузер, обеспечивает доступ пользователя к ресурсам сети и по сути является программой-клиентом (как говорят Web-клиентом).

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

Технологию передачи информации по протоколу http называют Web – технологией.

Технология i ntranet по существу представляет собой Web - технологию, перенесенную в среду локальных корпоративных АИС.

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

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

В настоящее время наиболее распространенным является web-сервер Apache (уста­новлен примерно на 60 % серверов Интернета). Данный web-сервер является не­коммерческим программным средством и может быть свободно загружен из Интер­нета. Имеются версии сервера Apache практически для всех известных платформ.

Вследствие того, что большая часть серверов Интернета функционирует под управлени­ем системы UNIX, web-сервер Apache оптимизирован на работу именно с этой систе­мой.

В стан­дартную поставку Windows NT входит web-сервер Internet Information Server (IIS)

Системы на основе Web - технологий.

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

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

Перед миром открылась перспектива постепенного переноса в виртуальное электронное пространство, накопленных человечеством информационных ресурсов и обеспечение комфортного доступа к этим ресурсам, всех кому они необходимы.

Это способствовало бурному развитию создания АИС на базе Web – технологий. Точно так же, как в свое время массовому внедрению персональных машин способствовало появление в составе их программного обеспечения простых и эффективных средств подготовки текстовых документов.

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

Но система Интернет первоначально создавалась, как система работы с гипертекстовыми документами. Загружаемые в окна браузеров страницы являлись статичными. Пользователь не мог изменять их содержимое и взаимодействовать с ними, АИС.

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

Для придания HTML-страницам «динамичности» были изобретены и реализованы специальные технологии.

Динамический язык разметки страниц (Dynamic HTML), реализован с помощью трех компонент — стандартного языка разметки HTML, языка сценариев JavaScript и каскадной таблицы стилей (CSS), взаимодействующих на основе объектной моделью документа (DOM).

Основные идеи, заложенные в язык разметки HTML, мы рассмотрели в предыдущем параграфе. Как уже упоминалось выше, для передачи информации пользователя от клиента к серверу в HTML

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

Для реализации процессов управления этими элементами HTML-документов и динамического изменения настроек браузера, генерации новых документов, организации диалогового взаимодействия с пользователем, выполнения расчетов по введенным данным без их пересылки на сервер был разработаны специальные языки программирования. Программы, написанные на этих языках, называют сценариями или «скриптами» (scripts). Стандартным языком сценариев является JavaScript. Его должны уметь интерпретировать все браузеры.

Язык сценариев JavaScript создаваляся, главным образом, для разработки интерактивных систем, имеющих возможность реагировать на действия пользователя. На практике JavaScript, как правило, используется совместно с HTML. Действия пользователя инициируют события, которые и обрабатываются в сценариях, на­писанных на JavaScript.

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

Механизм встраивания скриптов в Web – страницы также будет рассмотрен позже.

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

Таблица стилей представляет собой текстовый файл, в котором дается детальное описание свойств всех классов элементов, отображаемых на Web – странице. Каждому классу соответствует определенное уникальное имя. Поэтому в самом HTML – коде документа нет необходимости описывать свойства элементов форматирования текста. Они будут автоматически формироваться на основе таблицы стилей.

Таблицы стилей содержат описание форматирования части или всего текста, координаты расположения элементов и другие параметры. Задание стиля обеспечивается с помощью и тега <STYLE> и(или) атрибута STYLE.

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

Если событие происходит, то выполняется соответствующий ему сценарий-обработчик. Кроме того, сценарии можно запустить и вне всякой связи с каким бы то ни было событием. В любом случае сценарий должен что-то делать. Предметом деятельности сценария являются объекты окна браузера и HTML-документа, загруженного в него. Параметры элементов документа, заданные с помощью атрибутов соответствующих тегов, можно изменить. Более того, можно заменить одни тэги другими и даже заменить весь загруженный HTML-документ на другой. Делается это сценариями, но не напрямую с тэгами или значениями атрибутов (то есть с HTML-кодами), а с представляющими их объектами.

HTML-документ отображается в окне браузера. Окну браузера соответствуя объект window, a HTML-документу, загруженному в окно, соответствует объект document. Эти объекты содержат в своем составе другие объекты. В частности объект document входит в состав объекта window. Элементам HTML-документа соответствуют объекты, которые входят в состав объекта document. Все множество объектов, образующих документ, имеет иерархическую структуру, называемую объектной моделью

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

объект.свойство

объект.метод()

При загрузке HTML-документа в браузер созда­ется объектная модель этого документа.

Прежде всего, создается объект окна window. Это корневой объект, имеющий свои под объекты, такие как location для хранения информации об URL-адресе загруженного документа и screen для хранения данных о возможностях экрана монитора пользователя.

Затем создается объект document, являющийся подобъектом window. Далее создаются объекты, представляющие некоторые отдельные элементы HTML-документа, такие как объекты изображе­ний, объекты форм и их элементы (поля ввода, переключатели, кнопки) и др.

Перечисленные технологии являются мощными инструментами создания интерактивных Web-страниц,

Динамические страницы позволяют отображать данные, которые могут изменяться без изменения HTML – кода документа (например, формировать запросы к базам данных и выводить информацию, извлекаемую из них).

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

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

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

Таким образом, при реализации АИС на базе Web – технологии предполагается решение следующих основных комплексов задач:

подготовка материалов к web-публикации, редактирование, дизайн, установление единого стиля и единообразного оформления web-страниц, поддержка достоверности и связности web-документов и т. п.;

обеспечение динамического представления информации на web-странице: создание интерактивных web-страниц, организация разных видов поиска информации, представление регламентированного доступа к базам данных;

Первый комплекс задач обычно решается специалистом в конкретной предметной области — автором контента web-страниц и специалистом по оформлению web-страниц (web - дизайнером). В качестве инструментария для этого, как правило, используются специальные визуальные средства разработки HTML-документов (например, редакторы HtmlPad FisherMan, Microsoft FrontPage и пр.).

Второй комплекс задача предполагает разработку специализированных программ web-приложений (сценариев), взаимодействующих с прикладными функциональными АИС, размещенными на сервере. Web – приложения создаются программистами с помощью са­мых разных средств разработки. В настоящее время получили широкое распространение так называемые Web-билдеры - программные комплексы для разработки Web-приложений.

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

При рассмотрении Web-технологий обычно выделяют две составляющие — Web-дизайн и Web-программирование. Под Web-дизайном чаще всего понимают разработку статической компоненты web-страницы на языке HTML. Включение же в HTML-документ динамических элементов и разработку web- приложений обычно отно­сят к области web-программирования. Хотя на практике четкую границу между этими процессами провести довольно трудно.

Развитие инструментария Web-программирования позволило значительно расширить функциональные возможности АИС ориентированных на использовании Web – технологий. Стало возможным организовать доступ к огромным информационным ресурсам управляемых прикладными программами различных организаций.

Коммуникационные возможности Интеренета соединились с мощными средствами обработки данных создаваемых (иногда уже десятилетиями) АИС организаций.

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

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

Язык HTML, являясь стандартным, одинаково интерпретируется браузерами, независимо от того, в какой операционной системе они работают — Windows, Linux или MacOS.

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

Эти и другие достоинства организации доступа к базам данных на ос­нове web-технологии сделали целесообразным их применение и в локальных сетях. Локальные сети, исполь­зующие Web- технологию доступа к данным, получили название интрасетей, или интранета (intranet).

Общую схему взаимодействия клиента с базой данных, размещенной на стороне сервера в рамках web-технологии, можно изобразить так, как показано на рис. …

Web браузер

База данных

Web приложение

Web сервер

Рис. 1 Схема Web технологии взаимодействия клиента с базой данных.

Задачи, решаемые Web-сервером, в основном сводятся к поддержке HTTP-прото­кола взаимодействия с клиентом. Однако часто возникает необ­ходимость выполнения на сервере каких-либо нестандартных действий. В этом случае и следует исполь­зовать специальные программы Web приложения, выполняемые на сервере и взаимодействующие как с web-сервером (и через него с клиентом), так и с прикладной АИС организации.

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

Дата добавления: 2015-10-02