Файл: Языки гипертекстовой разметки (Основные языки гипертекстовой разметки: HTML, Dynamic HTML, XHTML).pdf
Добавлен: 29.03.2023
Просмотров: 345
Скачиваний: 2
После изучения множества схем для данных объектов и анимированных изображений GIF, разработчики Internet Explorer пришли к выводу, что для манипулирования документами необходим более мощный прикладной интерфейс программирования (application programming interface, API). С помощью объектной модели, которая обеспечивает полный доступ к документу, Web-мастеры могут использовать встроенные возможности размещения объектов в HTML и каскадные таблицы стилей (Cascading Style Sheets, CSS). Такая модель существенно улучшает производительность, сокращая необходимость загрузки больших анимированных изображений GIF и апплетов. Информация становится доступной мгновенно, поскольку она больше не спрятана внутри изображений или объектов[11].
Гипертекстовый документ – это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера.
HTML-документ состоит из двух частей: собственно текста, т. е. данных, составляющих содержимое документа, и тегов – специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ.
Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html[12].
Самым главным из тегов HTML является одноименный тег <html>. Он всегда открывает документ, так же, как тег </html> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:
<html>
<head> Заголовок документа </head>
<body> Тело документа </body>
</html>
Чаще всего в заголовок документа включают парный тег <title>... </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.
Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.
Текст в HTML разделяется на абзацы при помощи тега <р>. Он размещается в начале каждого абзаца, и программа просмотра, встречая его, отделяет абзацы друг от друга пустой строкой. Использование закрывающего тега </р> необязательно.
Если требуется «разорвать» текст, перенеся его остаток на новую строку, при этом, не выделяя нового абзаца, используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега[13].
Язык HTML поддерживает логическое н физическое форматирование содержимого документа. Логическое форматирование указывает на назначение данного фрагмента текста, а физическое форматирование задает его внешний вид.
При использовании логического форматирования текста браузером выделяются различные части текста в соответствии со структурой документа. Чтобы отобразить название, используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: h1 (заголовок первого уровня), h2, h3, h4, h5 и h6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Пример использования тегов заголовков:
<hl>l. Название главы</hl>
<h2>l.l. Название раздела</h2>
Теги физического форматирования непосредственно задают вид текста на экране браузера, например пара <b></b> выделяет текст полужирным начертанием, <u></u>задает подчеркивание текста, <font></font> управляет шрифтом текста.
Тег <img> вставляет изображение в документ, как если бы оно было просто одним большим символом. Пример применения тега:
<img src = «picture.gif»>
Для создания гипертекстовой ссылки используется пара тегов <а>... </а>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения:
<а href = «document.html»>ссылка на документ</а>
Href здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута href не обязательны. Если задается ссылка на документ на другом сервере, то вид гиперссылки такой:
<а href = «http://www.school.donetsk.ua/11.jpg»>Фотография 11-А</а>
С помощью различных тегов можно рисовать таблицы, форматировать текст, вставлять в документ изображения, видео- , звуковые файлы и прочее[14].
Язык разметки гипертекста Dynamic HTML
DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу[15].
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).
Dynamic HTML (или, более сокращенно, DHTML) – способ, который дает возможность создать интерактивный веб-сайт. При этом применяется объектная модель документа DOM, статичный язык разметки HTML, а также скриптовый язык, который выполняется браузером клиента (Javascript).
При помощи технологии DHTML изменяется информация, отображаемая на страницах сайтов, в соответствии с конкретными действиями, которые производятся пользователем[16].
Чаще всего Dynamic HTML используется с целью создания в браузере разного рода приложений. К примеру, этот способ может быть необходим для придания интерактивности форм или упрощения навигации. Нередко DHTML используется для динамического перемещения тех или иных элементов по экрану. Кроме того, Dynamic HTML служит в качестве инструмента, необходимого для создания видеоигр.
Таким образом, при помощи DHTML автор имеет возможность работать с контекстом, а также с оформлением собственной страницы. При помощи комбинации скриптов, стилей и HTML есть возможность получать столь же интересные элементы страниц, которые до того были доступны лишь с Flash-элементов или Java апплетов.
Всевозможные подсвечиваемые элементы текста, выпадающие меню, изменяющиеся кнопки реализуются непосредственно в HTML странице, чаще всего, при помощи JavaScript.
Как утверждают специалисты, технология DHTML дала множество возможностей для разработки Web-узлов. Помимо всего прочего, использование Dynamic HTML значительно снижает загрузку сервера и всей сети, ведь число запросов, на данный сервер посылаемых, значительно сокращается[17].
В самом общем виде можно сказать, что Dynamic HTML — это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают
- динамическое формирование Веб-страницы в процессе ее загрузки, и
- динамическое изменение Веб-страницы в ответ на действия пользователя.
Для достижения перечисленных целей используются следующие методы:
- динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ;
- динамическое извлечение данных из внешних источников и включение их в Веб-страницу;
- использование динамически загружаемых шрифтов;
- поддержка визуальных и мультимедийных эффектов при отображении страниц;
- механизмы сохранения информации на компьютере-клиенте между сессиями работы[18].
Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым — использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы.
На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.
Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.
Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.
Всплывание событий заключается в том, что на событие может быть получена реакция не только от элемента-источника события, но также и от всех его родительских элементов вплоть до тела документа и самого документа. Событие может быть обработано на любом уровне.
Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тэга SCRIPT.
Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры[19].
Основных преимуществ DHTML можно выделить три:
- Повышение конкурентоспособности узла. Узел, содержащий динамически изменяемые цвета, анимированную графику, систему выпадающих меню и другие стандартные (для современных ОС, но не для Веба) элементы пользовательского интерфейса, явно привлекательнее для пользователя, чем обычные статические страницы. Разумеется, при этом нужно иметь чувство меры и соблюдать общие принципы дизайна.
- Легкость сопровождения. DHTML позволяет нам вынести типовые элементы формирования страниц нашего Веб-узла в отдельные таблицы стилей и сценарии, а затем включать их одинаковым образом во все страницы. Это, безусловно, упрощает сопровождение и минимизирует количество возникающих опечаток и других ошибок.
- Уменьшение трафика. Одна из основных особенностей DHTML состоит в том, что он переносит основную тяжесть по формированию Веб-страниц с сервера на клиент. Платой за это является загрузка с сервера сценариев и программных компонентов, которые при правильном проектировании незначительны по объему. В результате динамические страницы загружаются и отображаются намного быстрее статических, что особенно важно для отечественных каналов связи, не страдающих чрезмерно высоким качеством[20].
Объективности ради следует остановиться и на тех недостатках DHTML, о которых постоянно говорят сторонники «Веб-страниц, одинаково отображаемых всеми обозревателями».
Dynamic HTML не оправдывает себя прежде всего потому, что он не стандартизован, и под каждый из популярных Веб-обозревателей нужно писать свою версию HTML-документа. Действительно, DHTML, как и всякая другая новая технология, не оформился пока в четкий стандарт. Тем не менее, усилия по созданию динамических страниц окупаются хотя бы по перечисленных выше причинам. Да и отсутствие стандарта никогда не мешало продвижению перспективных технологий (электроприборы, к примеру, существуют гораздо дольше, чем Интернет, но никого не смущает то, что часть из них рассчитана на 220В, а часть на 127В).
Если присмотреться внимательнее, то противодействие распространению DHTML вызвано совершенно другой причиной. Дело в том, что до сих пор создание Веб-страниц не требовало специальных знаний, кроме знакомства с HTML и умения минимально манипулировать графикой. С появлением DHTML ситуация изменилась в корне: разработка динамической страницы требует программирования на сценарном языке, сопряженного с пониманием работы обозревателя на уровне генерации и обработки событий, владением основами пользовательского интерфейса и т. п. Иными словами, Веб-дизайн востребовал специалистов, что у многих вызывает неприятие. На самом деле, демократическая сущность WWW от этого не пострадала. По-прежнему любой желающий может создать, скажем, свою домашнюю страничку на уровне своих знаний, и DHTML этому не помеха. Другое дело, что профессиональные разработки должны соответствовать по уровню лучшим из наличествующих технологий, но на то они и называются профессиональными[21].