Файл: Основы программирования на языке HTML ( Понятие и история языков разметки).pdf
Добавлен: 30.03.2023
Просмотров: 230
Скачиваний: 2
Например, чтобы поставить ссылку из файла file1.html на файл file2.html, необходим следующий HTML-код [3].
:
<a href="folder1/file2.html">file2.html</a>
А чтобы ссылка в файле file2.html указывала на file1.html:
<a href="../file1.html">file1.html</a>
Две точки (..) означают переход к родительскому каталогу.
Для файлов в пределах одного сайта рекомендуется использовать только относительные пути. В этом случае ссылки сохранят работоспособность при изменении адреса сайта, переносе в другую папку и т.п.
Для открытия ссылки в новом окне используется атрибут target со значением _blank.
Для создания и хранения гипертекстовых документов предназначено большое количество как программных, таки и аппаратных средств. Создаются гипертекстовые документы с помощью текстовых редакторов, которые позволяют создавать и редактировать разметку документов. Текстовых редакторов существует большое количество. Но наиболее популярными и удобными можно назвать следующие: Atom, Brackets, Notepad++, SublimeText. Также в этих целях можно использовать среды разработки: PHPStorm, Netbeans, Eclipse, Lobster, а также визуальные редакторы: Adobe Dreamweaver, Adobe Muse, Macaw [3].
2.2. Режимы работы браузеров и Doctype
Существуют разные версии языка HTML — со второй по пятую; формально это не разные версии, а разные языки. Кроме того, существуют разные режимы работы браузеров: режим поддержки стандартов и режим имитации работы старых браузеров. Инструкция <! DOCTYPE> определяет, в соответствии с каким синтаксисом необходимо разбирать данную веб-страницу, а также задает режим работы браузера [14].
Непонимание принципов работы <! DOCTYPE> приводит к сложно выявляемым ошибкам. Разберем несколько примеров. Рассмотрим работу браузера в режиме совместимости:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Quirc mode</title>
<style>
ody {font-size: 20;}
td {font-size: 200%;}
</style>
</head>
<body>
<table border='1'>
<tr><td>
<img src='lion.jpg' alt='лев' width='300px' height='168px'>
</td></tr>
</table>
<p>Текст в абзаце</p>
<table border='1'>
<tr><td>
Текст в таблице
</td></tr>
</table>
</body>
</html>
В заголовочной части заданы стили, указан размер шрифта для текста, расположенного в абзацах и в ячейках таблицы. Следует обратить внимание на то, что во втором случае размер шрифта указан в процентах (от размера некоторого базового шрифта). Непосредственной проверкой можно убедиться, что изменение размера базового шрифта (например, body {font-size: 10}) не приводит к соответствующему изменению размеров шрифта в таблице, хотя стандарт предписывает иное. Это известная ошибка старых браузеров, которая перекочевала в новые версии для «сохранения преемственности».
Теперь нужно заменить <! DOCTYPE> на строгий:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
Во-первых, размер базового шрифта перестанет реагировать на заданные в стилях правила. В режиме совместимости браузер предполагал, что если единицы измерения не указаны, то это пиксели по умолчанию. В строгом режиме таких предположений не делается, браузер игнорирует синтаксически неверную инструкцию.
Если задать единицы измерения (body {font-size: 10px}), то браузер а) примет инструкцию по размеру базового шрифта, б) будет вычислять размер шрифта в таблице относительно базового.
Во-вторых, в строгом режиме под изображением в ячейке таблицы появится отступ, поскольку изображение в строгом режиме обрабатывается как строчный 2 элемент.
Структура элемента <! DOCTYPE> подчинена правилам:
<! DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация] //
[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
- Параметр Публичность указывает на то, каким ресурсом является объект — публичным (значение PUBLIC) или системным (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
- Параметр Регистрация сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и минус (–) — разработчик не зарегистрирован. Для W3C ставится значение «–».
3. Параметр Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <! DOCTYPE>.
4. Параметр Тип — тип описываемого документа. Для HTML/ XHTML значение указывается DTD.
5. Параметр Имя — уникальное имя документа для описания DTD.
6. Параметр Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
7. Параметр URL — адрес документа с DTD.
Приведем примеры использования <! DOCTYPE> для HTML 4.01. Строгий вариант, или стандартный (англ. Strict), означает, что документ не содержит элементов, помеченных Консорциумом W3C как «устаревшие» или «неодобряемые» (англ. deprecated).
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Переходный вариант, или совместимости (англ. Transitional), означает, что документ может содержать устаревшие теги для совместимости и упрощения перехода со старых версий HTML.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Приведем примеры, показывающие различие режимов (табл. 1). В HTML 5 используется только один вариант <! DOCTYPE>:
<! DOCTYPE html>
Синтаксические правила построения документов разметки гласят, что теги должны быть правильно вложены т. е. так, как это иллюстрирует пример:
<u> <b> Корректная вложенность тегов </b> </u>
<u> <b> Ошибка </u> </b>
Таблица 2
Режимы работы браузеров
|
Strict Transitional |
Transitional |
|
Чувствительность к регистру имен классов и идентификаторов |
|
|
Чувствительны к регистру |
Нечувствительны к регистру |
|
Пиксели по умолчанию |
|
|
Числа без указания единиц измерения игнорируются. Если в стилях при указании размеров задано одно лишь число без упоминания единиц (width: 500 вместо width: 500 px), такое значение игнорируется |
Если в стилях в качестве единицы размера указано число без единицы измерения (10), считается, что значение задано в пикселях (как 10 px) |
|
Свойство display для изображений |
|
|
По умолчанию установлено как inline, при этом внизу картинок добавляется небольшой отступ |
По умолчанию установлено как block, при этом внизу картинок отступ отсутствует |
Правильная вложенность тегов, вообще говоря, не обеспечивает синтаксическую корректность документа. Пример ниже показывает, что в документе могут существовать неизвестные теги, теги могут иметь недопустимые атрибуты, и вложенность тегов может быть неверной с точки зрения здравого смысла — действительно, строка не должна быть вложена в ячейку таблицы.
<body>
<unknowntag>
Сомнительный текст
</unknowntag>
<table src="figure.jpg">
<td>
<tr>Строка в ячейке</tr>
</td>
</table>
</body>
Описать, какие элементы и где могут присутствовать в документе, какие элементы могут быть вложены в другие элементы и т. д. позволяет язык схем DTD. Язык схем DTD — язык, который используется для записи фактических синтаксических правил языков разметки текста. Приведем фрагмент dtd-документа, который показывает, что элемент TR должен содержать один и более элементов TD или TH:
<! ELEMENT TR – O (TH|TD)+ >
Дефис означает обязательность открывающего тега TR, а «О» — необязательность закрывающего. Еще один пример показывает, что обязательные атрибуты тега img — это src и alt, в то время как height и width — необязательные:
<! ATTLIST IMG
src %URI; #REQUIRED
alt %Text; #REQUIRED
height %Length; #IMPLIED
width %Length; #IMPLIED
Используя DTD, браузер, в частности, понимает, что именно ячейка таблицы должна быть вложена в строку, а не наоборот [3].
2.3. Тег html и атрибут manifest
Тег html является контейнером, который заключает в себе все содержимое веб-страницы, включая теги head и body. Среди атрибутов тега html интересным является manifest, введенный в HTM 5.
Атрибут manifest реализует механизм кэширования, который позволяет создавать оффлайновые приложения, т. е. работающие в автономном режиме без непосредственного подключения к Интернету. При первой загрузке страницы браузер обычно просит сохранить данные для своей работы, а затем уже обращается к ним при необходимости.
В качестве значения атрибута manifest указывается относительный или абсолютный путь к текстовому файлу, он называется «файл манифеста» или просто «манифест». Имя и расположение файла может быть любым, но он должен отдаваться сервером с заголовком text/cache-manifest. Например, для веб-сервера Apache в файле .htaccess, расположенном в корне сайта, следует прописать строку
AddType text/cache-manifest .cache
В этом случае файл манифеста имеет расширение cache. Сам манифест информирует браузер о том, какие ресурсы необходимо сохранить в локальном кэше. Этот список может содержать html- и css-файлы, изображения, скрипты. Манифест начинается с обязательной строки CACHE MANIFEST. Имена файлов перечисляются внутри трех секций (табл. 3) [3].
.
Пример файла манифеста:
CACHE MANIFEST #
Версия 1.0
CACHE:
22.css
22.js
images/old.png
Таблица 3
Секции манифеста
|
CACHE |
Содержит перечень ресурсов, которые браузер должен кэшировать. Данный раздел используется по умолчанию, если его не указать и нет других разделов, то записи в манифесте причисляются к этому разделу |
|
NETWORK |
Список ресурсов, которые доступны только при подключении к Сети. Обычно в этот раздел входят программы, выполняемые на стороне сервера |
|
FALLBACK |
Список замещающих файлов, которые будут использоваться при отсутствии подключения к Сети. Допустимо использовать символ * для обозначения всех файлов. Например, *.php /offline.html означает, что вместо любого файла с расширением php будет показана страница offline.html |
Внутри тега html находятся теги head и body. Тег head предназначается для размещения в нем некоторой служебной информации, которая не отображается пользователю, в свою очередь, body содержит данные, отображаемые на странице. Тег head содержит:
1) единственный титул документа (title);
2) метаописатели документа (meta);
3) базовый uri внешних ссылок (base);
4) ссылки на другие документы (link);
5) внутренние таблицы стилей (style);
6) сценарии клиента (script).
Структура тега head подробно описана в учебниках и справочниках.
2.4. Создание документа HTML5
Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нужно создать простой текстовый файл, а в качестве расширения файла указать *.html.
Нужно создать текстовый файл, назвать его index и изменить его расширение на .html.
Затем открыть этот файл в любом текстовом редакторе, например, в Notepad++. Добавить в файл следующий текст:
<!DOCTYPE html>
<html>
</html>
Для создания документа HTML5 нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа. <!DOCTYPE html> указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.
А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа. Внутри элемента html можно разместить два других элемента: head и body. Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они используются. Элемент body собственно определяет содержимое html-страницы. Теперь нужно изменить содержимое файла index.html следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Документ HTML5</title>
</head>
<body>
<div>Содержание документа HTML5</div>
</body>
</html>
В элементе head определено два элемента:
- элемент title представляет заголовок страницы;
- элемент meta определяет метаинформацию страницы [5].
Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8. В пределах элемента элемента body используется только один элемент - div, который оформляет блок. Содержимым этого блока является простая строка. Поскольку выбрана в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM.