Файл: Языки гипертекстовой разметки (Особенности языка разметки гипертекста HTML).pdf
Добавлен: 01.05.2023
Просмотров: 83
Скачиваний: 3
<li> для отдельных пунктов списка;
<blockquote> для цитат.
Поскольку текстовые элементы могут быть длинными, но с разным содержанием, строчные элементы позволяют различать части текста.
Есть много строчных элементов, но чаще всего можно столкнуться со следующими:
<strong> для важных слов;
<em> для выделенных слов;
<a> для ссылок;
<small> для менее важных слов;
<abbr> для аббревиатур, вроде W3C.
Когда ни один семантический элемент не подходит для содержимого, но всё ещё необходимо вставить элемент HTML (в целях группирования или стилизации), то можно остановиться на одном из двух общих элементов:
<div> для блочных элементов;
<span> для строчных элементов.
Хотя эти элементы HTML на самом деле не несут какого-либо смысла, они пригодятся при использовании CSS.
Существует около 100 семантических элементов HTML на выбор.
Написание кода HTML происходит в редакторе вроде Notepad++. Написанный код необходимо сохранить с разрешением .html.
Для открытия HTML-документов используется браузер, вроде Firefox.
HTML-документ (или веб-страница, что означает то же самое) требует определённой структуры для того, чтобы стать валидным.
Почему важно заботиться о валидации HTML-документа?
Правильность: валидный документ корректно отображается в браузере.
Отладка: некорректный код HTML может вызвать ошибки, сложные для выявления.
Поддержка: валидный документ легче обновлять позже, даже кому-то другому.
Первой информацией которая указывается - тип HTML-документа — доктайп.
Доктайп можно сравнить с версией автомобиля на протяжении многих лет: Ford Fiesta, купленный в 1986 году, был Fiesta 2. Если вы покупаете его сегодня, то это Fiesta 7.
Раньше сосуществовало несколько версий HTML (XHTML и HTML 4.01 были конкурирующими стандартами). В настоящее время нормой является HTML5.
Чтобы сообщить браузеру, что HTML-документ представляет собой HTML5, документ начинается со следующей строки:
<!DOCTYPE html>
HTML5 не упоминает цифру 5 потому что в W3C решили, что предыдущие определения доктайпа были слишком запутанными и воспользовались возможностью, чтобы упростить его, удалив упоминание о версии HTML.
Элемент <html>
Помимо строки с доктайпом, весь HTML-документ должен располагаться внутри элемента <html>:
<!DOCTYPE html>
<html>
<!-- Остальная часть кода HTML -->
Из всех видов это самый короткий доктайп, его легко запомнить и набирать по памяти. Изменения претерпели и другие теги, так, у тега <html> нет атрибу-та xmlns, а кодировка документа сократилась до такой записи.
<meta charset="utf-8">
Впрочем, старый способ указать кодировку также остался.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Атрибут type у тега <script> и <style> можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется явно об этом напоминать. Простейший код приведён в примере 1.
Пример 1. Код на HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>Страница на HTML5</p>
</body>
</html>
</html>
<html> технически является предком всех элементов HTML.
<head>
Как атрибуты несут дополнительную информацию для элемента HTML, так и элемент <head> несёт дополнительную информацию для всей веб-страницы.
Например, заголовок страницы (отображается на вкладке) находится в <head>:
<head>
<title>Курсовая работа</title>
</head>
Следующие элементы HTML могут появляться в <head> и только в <head>:
<link>
<meta>
<style>
<body>
В то время как <head> содержит только метаданные, не предназначенные для отображения вообще (за исключением <title>), то элемент <body> это место, где пишется всё содержимое. Всё внутри <body> будет отображаться в окне браузера.
1.3. Валидность HTML-документа
Объединив все эти требования, можно написать простой и валидный HTML-документ:
JSFiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MarkSheet</title>
<meta name="description" content="Простое руководство по HTML">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Если просмотреть этот пример в браузере, то можно увидеть, что:
«MarkSheet» написано на вкладке браузера;
«Hello, world!» — это единственный текст, отображаемый в окне, потому что это единственное содержимое <body>.
Можно дополнять код комментариями без нарушения отображения страницы браузером: комментарий начинается с <!-- и заканчивается -->.
Сборка страницы происходит мгновенно, поэтому она появляется так, как будто вся страница загружается сразу. При медленных соединениях, или на более медленных компьютерах, или если страница содержит большое количество графики, процесс сборки более заметен, поскольку изображения появляются позже текста. Иногда странице даже требуется перезагрузка по мере появления новых изображений (хотя вы можете сконструировать свои страницы так, чтобы этому воспрепятствовать).
Спецификации HTML, предшествовавшие HTML5, содержали документацию только по элементам, атрибутам и значениям, допустимым в языке. Это хорошо для простых текстовых документов, но разработчики HTML5 планировали облегчить процесс создания веб-приложений, для которых требуются сценарии и программирование. По этой причине, чтобы облегчить взаимодействие с приложением, HTML5 также определяет ряд новых API-интерфейсов.
Интерфейс прикладного программирования (Application Programming Interface, API) — это задокументированный набор команд, имен данных и так далее, который позволяет одному программному приложению общаться с другим. Например, разработчики Twitter указали имена каждого типа данных (пользователи, твиты, метки и т. д.) и методы для доступа к ним в документе API-интерфейса (dev.tw itter.com /docs), что позволяет другим разработчикам добавлять каналы и элементы Twitter в свои продукты.
Поэтому существует так много программ и виджетов, поддерживающих сеть Twitter.
Интернет-магазин Amazon.com также демонстрирует информацию о своих товарах через API-интерфейс. В самом деле, все издатели признают, что очень хорошо, если контент доступен таким образом.
Можно сказать, что API-интерфейсы сейчас очень популярны.
Идея состоит в том, что если браузеры изначально предлагают эти функции со стандартизованными наборами методов для доступа к ним, разработчики могут создавать замечательные вещи и рассчитывать на то, что они будут работать во всех браузерах, так же, как мы сегодня привыкли к возможности вставлять изображения на страницы. Конечно, пройдет еще немало времени, пока поддержка этих передовых функций станет повсеместной, но прогресс налицо. Некоторые API-интерфейсы содержат компонент разметки, такой как вложение мультимедийного контента с новыми НТМЬ5-элементами video и audio. Другие выполняются полностью «за кадром» с применением сценариев JavaScript или серверных компонентов, например, создание веб-приложений, которые работают даже при отсутствии подключения к Интернету (A PIинтерфейс механизма кэширования данных веб-приложений).
Консорциум Всемирной паутины и сообщество WHATWG трудятся над множеством API-интерфейсов, которые можно будет использовать с веб-приложениями, и все они находятся в той или иной стадии завершения и реализации.
Большинство из них имеют свои собственные спецификации, отдельно от HTML5, но они, как правило, включены в общую спецификацию HTML5, которая охватывает все веб-приложения.
2. Особенности языка разметки гипертекста XML
2.1. Общее описание XML
XML - Extensible Markup Language, то есть Расширяемый Язык Разметки, возник в результате развития языка HTML (HyperText Markup Language, языка разметки гипертекста). Тем не менее было бы грубой ошибкой воспринимать его лишь как некую усовершенствованную версию языка HTML. По сути, язык XML представляет собой новое поколение языков разметки. Здесь следует иметь в виду 3 момента, принципиально отличающих XML от HTML и его предшественников (GML - Generalized Markup Language, SGML - Standard General Markup Language):
XML, в отличие от HTML, не имеет предопределенных тэгов - точнее, каждый разработчик может создавать свои собственные XML-тэги - столько, сколько нужно. Количество таких тэгов практически неограничено. Таким образом, XML является метаязыком, позволяющим создавать другие языки разметки, такие как, например, HTML.
По мере развития языка HTML количество тэгов быстро увеличивалось. В конце концов их число достигло "критического значения" - разработчикам web-документов стало трудно запоминать все новые и новые тэги, но еще в худшем положении оказались разработчики браузеров - им приходится создавать все новые версии браузеров, которые "понимали бы" новые тэги. Более "умные" браузеры становятся и большими по объему, предъявляют все возрастающие требования к компьютерам, на которых они используются. Дело усугубляется тем, что в последнее время все большую популярность приобретают карманные устройства (в частности, они все шире используются в электронной коммерции), с ограниченным объемом памяти и "слабенькими" экранами, а потому, браузеры, используемые на них, имеют лишь очень ограниченные возможности. Язык XML, не имеющий определенной заранее системы тэгов, позволяет решить эту проблему. "Платой" за универсальность является большая строгость оформления web-документов. Правила оформления XML-документов просты:
недопустимы незакрытые контейнеры тэгов (но можно объединять открывающий и закрывающий тэги в одном, например: <br/>)
"вложенные" контейнеры не могут "перекрываться"
строчные и прописные буквы воспринимаются как разные символы
в качестве названий тэгов нельзя использовать ключевые слова
в названиях тэгов нельзя использовать пробелы, знаки пунктуации, круглые, квадратные и фигурные скобки
знак подчеркивания (_) и цифры могут встречаться в названиях тэгов, но цифра не может быть перым символом названия тэга
(При необходимости использовать несколько слов в качестве названия тэга их следует писать слитно, начиная каждое слово с большой буквы.)
Документы, отвечающие этим правилам, называются well-formed documents.
XML служит для описания структуры данных, главным образом, иерархических структур.
Одной из основных тенденций развития web-технологий является разделение данных, структуры документа и его стилевого оформления. Как известно, одним из способов обособления данных от структуры документа является динамическое связывание СУБД с web-документами через интерфейс ODBC (Open DataBase Connectivity). Обособление стилей достигается за счет использования каскадных таблиц стилей. XML позволяет описывать нереляционные базы данных. Поскольку тэги могут создаваться разработчиком, их названия обычно характеризуют смысл данных.
XML, как средство описания структуры данных, обеспечивает обмен данными между различными приложениями, выступая, таким образом, в качестве своеобразного "клея".
Значение этой "связующей" функции XML трудно переоценить. Благодаря возможности обмена данными между различными приложениями web-технологии "выходят" на качественно новый уровень.
Зa неполный год своего официального существования язык XML привлек к себе уже достаточно много внимания со стороны разработчиков и пользователей Интернет. Сегодня количество приверженцев этой новой технологии возрастает также стремительно, как и число сообщений об очередных взятых ею преградах на пути к всеобщему признанию. Несмотря на то, что XML очень молод (международная организация W3C утвердила спецификацию "Extensible Markup Language(XML) 1.0" в начале февраля 1998 г) и отдельные компоненты этого языка находятся еще в стадии доработки, уже сегодня появляются новые языки, созданные на основе XML, возникают многочисленные Web-сервера, использующие эту технологию для организации хранящейся на них информации.
XML (Extensible Markup Language) - это язык разметки, описывающий целый класс объектов данных, называемых XML- документами. Этот язык используется в качестве средства для описания грамматики других языков и контроля за правильностью составления документов. Т.е. сам по себе XML не содержит никаких тэгов, предназначенных для разметки, он просто определяет порядок их создания. Таким образом, если, например, мы считаем, что для обозначения элемента rose в документе необходимо использовать тэг <flower>;, то XML позволяет свободно использовать определяемый нами тэг и мы можем включать в документ фрагменты, подобные следующему: