Файл: Языки гипертекстовой разметки (Практическое применение языка HTML).pdf
Добавлен: 26.06.2023
Просмотров: 135
Скачиваний: 2
Так поскольку на экран выводится по одной карте, то в элементе card предусмотрен атрибут id - внутренний идентификатор для переходов, а также видимый на экране заголовок title. Для форматирования текста, почти аналогично элементы, аналогичные HTML: p – для параграфов, em и I – для выделения курсивом, big – для текста большего размера и др.
Для навигации и установки гиперссылок предусмотрены теги anchor и a.
Для ввода данных предусмотрены такие теги, как input, select/option (поле выбора из заранее заданного списка), postfield.
Для управления действиями используются tasks, do. Типовые "исполнительные" теги действий – это go, prev, refresh (перечитать текущую карту) или noop (ничего не делать). Действия на уровне конкретной карты описываются в тегах do, а на уровне всей колоды – в элементе template[44].
Пример WML-колоды из трех карт приведен в Приложении 4.
В WML есть также возможность назначать клавиши навигации.
Тег <onevent type="button">действие</onevent> позволяет приписать к одной из кнопок телефона пользовательское событие. В качестве действия обычно используется <go href="url"/>. Так, добавив к карте строку <onevent type="GO"><go href="#card2"/></onevent>, можно назначить кнопке GO переход непосредственно в меню.
Посредством таблицы 1.1 дана сравнительная характеристика языков гипертекстовой разметки.
Таблица 1.1
Сравнительная характеристика языков гипертекстовой разметки
|
Язык |
HTML |
XHTML |
WML |
|
Основан на |
SGML |
XML |
XML |
|
Тип разметки |
тег |
тег |
тег |
|
Структурная разметка |
да |
да |
да |
|
Презентационная разметка |
да |
да |
да |
|
Формат использования |
текст/html |
приложение/xhtml+xml |
приложение/wml+xml |
По итогам первой главы работы можно сделать следующие выводы:
- под гипертекстом стоит понимать совокупность обычных фрагментов текста, связь между которыми реализуется посредством ссылок, встроенных в информационную систему, что позволяет пользователям осуществлять переход от одного текстового фрагмента к другому по их выбору. Основное преимущество гипертекста состоит в нелинейности повествования, которая позволяет создавать сразу несколько линейных последовательностей в изучении материала, что позволяет, не изучая всю предоставленную информацию, выбирать нужную, что позволяет сэкономить много времени;
- язык разметки документов – это набор специальных инструкций, называемых тегами, предназначенных для формирования в документах какой-либо структуры и определения отношений между различными элементами этой структуры.
- SGML - обобщенный метаязык, позволяющего строить системы логической и структурной разметки любых разновидностей текстов и не несущий информации о внешнем виде документа;
- HTML – широко используемый стандартизированный язык разметки документов в Интернете. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора. Существует восемь версий языка HTML. HTML до его 5-ой версии определялся как приложение SGML. Спецификации HTML5 формулируются в терминах DOM;
- XML - это метаязык, определяющий другие языки разметки для специфических целей, предназначен для хранения структурированных данных и для обмена информацией между программами;
- XHTML - язык разметки гипертекста, основанный на XML и максимально приближенный к стандартам HTML. XHTML отличается от HTML строгостью написания кода;
- WML – язык разметки для работы в Интернет беспроводных устройствах (WAP), основанный на XML. WML используется для описания контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.
2. Практическое применение языка HTML
2.1. Структура документа HTML - основные теги
HTML сегодня является самым универсальным языком разметки гипертекста и стандартизированным языком разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Поэтому необходимо иметь четкое представление о написании кода документа на данном языке.
Любой документ на языке HTML представляет собой набор элементов, начало и конец каждого из которых обозначается специальными пометками - тегами, с помощью которых можно выделять заголовки документа, изменять цвет, размер и стиль букв, вставлять графические изображения и таблицы, а также специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа[45].
HTML-документ состоит из собственно текста - данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Графическая и звуковая информация, имеющаяся в HTML-документе, хранится в отдельных файлах[46].
Для файлов, содержащих HTML-документы приняты расширения .htm или .html.
Элементы HTML могут быть пустыми - не содержащими никакого текста и данных (например, тег перевода строки <br>), тогда нет необходимости указывать закрывающий тег, либо иметь атрибуты, определяющие определенные свойства, тогда наличие закрывающего тега обязательно. Стоит отметить, что регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет[47].
Как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером.
Как правило, текст документа HTML начинается со специального тега <!DOCTYPE html>, который показывает, на какую версию html ориентироваться браузеру[48].
Основными тегами, используемыми HTML, являются html, head, body.
Тегом html определяется все содержание документа. С него документ начинается <html> и им заканчивается </html>. Эти теги сигнализируют о том, что находящиеся между ними строки являются единым гипертекстовым документом. Наличие этих тегов дает возможность программе просмотра идентифицировать формат документа и правильно его интерпретировать.
Следующим тегом является head, внутри которого размещается служебная информация, необходимая браузеру для корректной интерпретации html документа. Стоит отметить, что на открытой веб-странице этой информации не видно[49].
В разделе head необходимо посредством тега title написать название страницы, поскольку title выводится в строке заголовка окна браузера и используется поисковыми машинами для индексирования сайта и показа в результатах поиска.
Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body[50].
Эти теги являются обязательными и входят в состав любого документа HTML, при этом используется принцип вложенности, который определяет расположение тегов открытия и закрытия следующим образом:
<html>
<head>Служебная информация
</head>
<body>Содержание
</body>
</html>
Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора[51].
Язык HTML поддерживает два вида форматирования документа:
- логическое, указывающее на назначение определенного фрагмента текста, при котором выделяются части текста в соответствии со структурой документа (заголовки шести уровней);
- физическое, задающее внешний вид текста (тип и размер шрифта). Например, тег <b> выделяет текст полужирным начертанием, <u> - подчеркивание текста.
В целом тэг представляет собой метку, указывающую браузеру, как нужно представлять сайт. В некоторых тэгах можно вводить дополнительную информацию – атрибут, после которого следует знак равенства и детали атрибута, заключенные в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей[52].
Например, тег <body style="background-color:#ff0000;"> сигнализирует браузеру о выводе страницы красного цвета, при этом использован шестнадцатиричном формате (HEX), где каждому цвету соответствует свое 16-ричное число. Но можно использовать и английские названия цветов, например, <body style="background-color: red;">[53].
Для создания ссылки тэг будет выглядеть следующим образом:
<a href="http://www.html.net/">Это ссылка на HTML.net</a>
Элемент тега a обозначает "якорь/anchor", а атрибут href (от "hypertext reference/гипертекстовая ссылка") - место, на которое выполняется переход по данной ссылке, при этом "http://" всегда должно входить в состав URL.
При ссылках между страницами на одном сайте, полный адрес документа ("http://") указывать необязательно[54].
Для создания ссылки-перехода внутри самой страницы используется атрибут id и символ "#". Так сначала посредством тега <h1 id="heading1">heading 1</h1> маркируется элемент, на который необходимо сделать переход. А посредством тега <a href="#heading1">Ссылка на heading 1</a> создана ссылка на этот элемент[55].
Если необходимо сделать ссылку на e-mail адрес, используется следующий тег:
<a href="mailto:nobody@html.net"> </a>
В результате при щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса[56].
Для того, чтобы поместить на страницу сайта изображение, необходимо использовать тэг img src, где src ("source") указывает размещение изображения. Следует отметить, что тэг img не требует наличия закрывающего тэга.
Есть три типа файлов изображений, которые можно вставить на страницы сайта:
- GIF - изображения графики и рисунков;
- JPEG - для фотографий.
- PNG - для того и другого.
Чтобы загрузить файлы изображений, необходима программа редактирования файлов изображений (Paint Shop Pro, PhotoShop, Macromedia Fireworks, Irfan View (бесплатная))[57].
Можно также вставить изображения, используя ссылки на другие сайты.
При вставке изображений, как правило, используют атрибуты width и height для установки ширины и высоты изображения, при этом значение указывается в пикселах. Например: <img src="logo.gif" width="32" height="32">
Для вставки таблиц используются 3 базовых тэга:
- <table> - начало и конец таблицы;
- <tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек;
- <td> - "table data/табличные данные" - начинает и заканчивает каждую ячейку ряда таблицы[58].
Тег <div></div> представляет собой блочный элемент, на котором можно построить весь сайт. Использование блоков <div> является универсальным способом вставки изображения, делает код более читабельным. Применяя блоки <div> можно достичь максимально комфортных условий для показа контента[59].
Следует отметить, что если задавать стили блокам текста непосредственно в самом коде каждого <div>, то код разрастается. В целях упрощения работы были разработаны каскадные таблицы стилей СSS (Cascading Style Sheets), представляющие собой формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Так создается файл CSS, который является единым файлом стилей для всего сайта и подключается ко всему сайту, а, следовательно, и задает свойства стилей для всех блоков и всего шаблона.
Таким образом, язык HTML прост и логичен. Браузер читает HTML так, как читает текст человек: сверху вниз и слева направо. HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст. Создать веб-сайт посредством языка HTML, зная структуру HTML-документа, а также синтаксис языка гипертекстовой разметки, как видится, не сложная задача.
2.2. Создание простого HTML-сайта
Для создания HTML-сайта необходимы браузер и текстовый редактор. В данной работе будет использован браузер Google Chrome и текстовый редактор Notepad.
Сайт будет состоять из семи страниц и будет посвящен теме данной работы «Языки гипертекстовой разметки». Для его создания будет использована табличная верстка.