Файл: Языки гипертекстовой разметки (1. Язык разметки гипертекста. Понятие. Основные характеристики).pdf
Добавлен: 05.07.2023
Просмотров: 133
Скачиваний: 2
СОДЕРЖАНИЕ
1. Язык разметки гипертекста. Понятие. Основные характеристики
1.1 Понятие «язык разметки гипертекста»
1.2 Основные характеристики языков гипертекстовой разметки
2. Основные языки гипертекстовой разметки: HTML, Dynamic HTML, XHTML
2.1 Язык разметки гипертекста HTML
2.2 Язык разметки гипертекста Dynamic HTML
<I> Этот текст будет отображен курсивом</I>[10]
Концепция создания интерактивных Web-страниц не является новой – компании Microsoft и Netscape изначально определили простую объектную модель, которая была представлена как способ создания интерактивных страниц. При более внимательном рассмотрении объектная модель оказалась более эффективной только для базовой проверки форм. Динамические документы были по большей части мифом до появления Microsoft Internet Explorer 4.0, поскольку страница могла быть изменена только при ее создании. Интерактивные документы моделировались путем полной перезагрузки страницы или внедрения объектов на страницу. Многие апплеты Java, элементы управления ActiveX и даже анимированные изображения в формате GIF были разработаны для выполнения операций, аналогичных тексту, что позволяло преодолеть статическую природу HTML. Однако использование объектов вместо стиля и элементов управления содержанием представляет собой не самое лучшее решение.
После изучения множества схем для данных объектов и анимированных изображений 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].
2.2 Язык разметки гипертекста 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].