2020-05-11
979
Раздел 2. ОСНОВЫ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТА HTML
Назначение и особенности HTML
Кроме платформенно-независимых средств передачи информации в системе WWW, включающих использование стека протоколов TCP/IP и прикладного протокола передачи гипертекста HTTP, для успешного развития этого сервиса требовался удобный, понимаемый всеми браузерами, развивающийся язык, на котором можно было бы создавать эти гипертекстовые документы.
Таким образом, одним из главных компонентов технологии создания распределенной гипертекстовой системы World Wide Web стал язык гипертекстовой разметки HTML (HyperText Markup Language). Удобство его применения обусловлено следующими двумя его особенностями.
1). Формат такого гипертекстового документа – обычный текстовый файл. Поэтому его можно создавать с помощью любого текстового редактора (в простейшем случае – блокнота), хотя в настоящее время создано множество специализированных редакторов, позволяющих быстрее и с меньшим количеством ошибок создавать и структурировать такие документы.
|
|
|
2). В HTML реализована теговая модель описания документа. То есть структура и содержимое документа определяются специальными метками – тегами, внутри которых помещают информацию о том, как браузер должен трактовать данный блок.
Таким образом, сайт в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки).
Из курсов информатики и программирования мы знаем, что любой язык высокого уровня требует интерпретации, то есть перевода его инструкций на язык команд, которые могут быть понятны компьютерной системе. В World Wide Web функции интерпретатора разделены между web-сервером и интерфейсом пользователя, функции которого реализованы в браузере. Сервер, кроме доступа к документам и обработки гипертекстовых ссылок, обеспечивает предпроцессорную обработку документов, в то время как браузер осуществляет интерпретацию конструкций языка, связанных с представлением информации.
Итак, документ, написанный (иногда говорят “размеченный”) с использованием языка HTML – это просто текст, разделенный на отдельные структурные или содержательные элементы. Эти элементы окружены одинаковыми открывающимися и закрывающимися командами – тегами. Каждый тег начинается и заканчивается с т.н. "angle brackets" (< >). Структуру любого тега можно рассмотреть на следующем примере:
<p> Hello world!</p>
Здесь используется тег p, который позволяет выделить отдельный абзац, содержащий тот текст, который находится между «открывающей» частью тега <p> и ее «закрывающей» частью </p>.
|
|
|
Многие теги можно дополнять атрибутами, которые дополняют сведения о том, как именно браузер должен отобразить данный элемент.
В качестве общих правил для написания HTML документов необходимо отметить следующие [1]:
· выделять новую строку для каждого блочного, табличного или списочного элемента;
· ставить отступы для каждого дочернего элемента, отступы должны составлять 2 пробела;
· не использовать заглавные буквы для тегов, только строчные;
· всегда использовать закрывающий тег;
· в начале документа желательно указывать его тип:
<! DOCTYPE html>
· убедитесь, что ваш редактор использует кодировку UTF-8 без метки порядка байтов (BOM).
· для комментирования текста программы используйте символьные скобки <!!>
Как было сказано выше, HTML активно развивается. На момент написания данного учебного пособия актуальной версией является HTML5. Поэтому в дальнейшем изложении мы рассмотрим базовые возможности языка HTML, а, при необходимости будем указывать на особенности, связанные с переходом на версию HTML5.
Далее рассмотрим структуру и назначение тегов языка HTML более подробно.
Структура документа на HTML
Каждый отдельный документ HTML может быть рассмотрен как контейнер, внутри которого размещается все его содержимое. Этот контейнер (все содержимое файла) помещается между открывающим и закрывающим тегом <html>.
<! DOCTYPE html>
Содержание документа
</html>
Контейнер html или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (head) и тела документа (body). Рассмотрим простейший пример классического документа.
<!DOCTYPE html>
<html>
<head>
<title>Мой первый документ</title>
</head>
<body text=#0000ff bgcolor=#f0f0f0>
<h1> Пример простого документа </h1>
</body>
</html>
Заголовок HTML-документа (то, что помещено внутрь контейнера head) является необязательным элементом разметки. Но, для быстрой индексации страницы поисковыми машинами, продвижения этого ресурса в списках выдачи поисковых систем, корректности отображения документов браузерами служебная информация, содержащаяся в области заголовка имеет очень важное значение.
Внутри тегов head могут размещаться следующие элементы, окруженные в свою очередь, своими тегами.
Элемент разметки title. Служит для именования окна браузера, в котором просматривается документ. Роботы многих поисковых систем используют содержание элемента title для создания поискового образа документа. Слова из title попадают в индекс поисковой системы. Поэтому элемент title всегда рекомендуется использовать на страницах Web-узла.
Элемент разметки base. служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме.
< base href= //cfu.crimea-ru/start/>
<base href=../next_level/document.HTML>
Во втором случае в качестве базы по умолчанию выбирается каталог, в котором размещен HTML-документ (../).
Элемент разметки meta cодержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа.
Для определения кодировки документа:
< meta charset="utf-8">
Для указания информации о документе:
<meta name="author" Content="Cистемный анализ">
Для описания страницы и задания ключевых слов:
< meta name="description" Content="Методы системного анализа">
<meta name="keywords" Content ="моделирование, системный анализ, системный подход, синтез, принятие решений">
Для указаний роботу индексировать, отслеживать гиперссылки на странице:
<meta name="robots" content="index, follow">
Элемент разметки link – наиболее часто используется для подгрузки файлов, содержащих стили оформления документа.
|
|
|
<link rel=stylesheet href="../css/style.css" type="text/css">
В данном случае речь идет о загрузке стилей из файла style.css, который хранится в виде каскадной таблицы стилей (stylesheet) по адресу, указанному в динамической ссылке при помощи атрибута href.
Элемент разметки style подключает внутренние таблицы стилей.
<style type="text/css">
p{
background-color: #ef4444;
color: #666666;
}
В этом примере указано, что для всех абзацев (тег p) должны быть применены заданный цвет фона и шрифта.
После завершения описания заголовка html-документа и закрытия тега </head>, открывается тег <body> (тело документа), внутри которого располагаются все элементы, которые и составляют описываемую страницу и видны пользователю при просмотре ее в браузере.
