Специализированные языки разметки документов Курс для слушателей ФПК ВГТУ по специальности “Программное обеспечение информационных технологий” Лекции – 12 часов Лабораторные – 20 часов Зачёт Шарстнёв Владимир Леонидович Декан экономического факультета

Современные концепции языков разметки Научный редактор TEX. Язык SGML. Основные понятия Производные языка SGML: HTML, XML, DHTML, MathML и другие

Язык SGML (Standart Generalized Markup Language)‏ Система определения языков разметки. Авторы размечают свои документы, представляя информацию о структуре, представлении и семантике в одном документе. На языке SGML может быть создано приложение для разметки текста, но для описания функциональных особенностей каждого элемента этого приложения разработчику необходимо создать комментарии или специальную документацию, так как сам язык SGML формально может лишь сообщить где может встречаться тот или иной элемент, но не его свойства. Документы, в которых могут встречаться те или иные элементы, были отнесены к различным типам документов (document type). И теперь если возникает необходимость описать элементы разметки документа - достаточно выбрать стандартное определение типа документа - DTD (Document Type Definition). Пример DTD для описания правила задания абзацев текста в документе: Отсюда следует, что абзацы текста необходимо заключать в тэги

и

подразумевает автоматическое завершение предыдущего абзаца. Содержимым абзаца может быть текст любого объема. Атрибутом абзаца является его выравнивание по правому, левому краям или по центру.

Гипертекст это текст, в котором имеютя ссылки для автоматического перехода на другие тексты - гиперссылки, а язык HTML (Hyper Text Markup Language) - это независимый от платформ язык разметки текста. Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Основные этапы создания документа HTML: Набор содержимого в любом из текстовых редакторов и сохранение обычного текстового файла. Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html. Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующего элемента языка HTML. Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML. Основные этапы создания документа HTML

Язык HTML Понятие о тэгах (tag)‏ Основные структурные тэги: … … …

Определение границ документа с помощью элемента Тэг определяет границы документа HTML, ему соответствует конечный тэг . Между этими двумя тэгами располагается собственно весь документ. Тэги и - не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона т.к. браузеры у пользователей могут быть всякие и не известно - насколько корректно они визуализируют такой код. Синтаксис: текст и прочие дескрипторы

Создание титула документа с помощью элемента

Элемент Элемент предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги.

Первая страница Информация для отображения в браузере

Вложенные атрибуты элемента Начальный тег может иметь несколько атрибутов . BACKGROUND Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Синтаксис: BGCOLOR Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала, соответствующего названию цвета. Синтаксис: или LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. Синтаксис: ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. Синтаксис: VLINK Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам. Синтаксис:

Пример вложенных атрибутов элемента

Форматирование символов.

Структурное форматирование. Заголовки. Шесть уровней заголовков Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю

назначается самый большой и самый жирный шрифт, а стилю

назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right. Синтаксис: Текст заголовка

Структурное форматирование. Разрыв текста. Элемент
Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear. Синтаксис:
Текст Может быть отменен тэгами и

Структурное форматирование. Абзац. Элемент

Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align. Синтаксис:

Текст абзаца

Структурное форматирование. Предварительное форматирование. Элемент

 Весь текст, заключенный в тэги 
 и 
 будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах.  Синтаксис: 
...текст.. .

Структурное форматирование. Линия. Разделительные линии

Комментарии Как любой язык HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария: Комментарии могут встречаться в документе где угодно и в любом количестве.

Списки. Нумерованные списки. Элемент

Элемент
используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Элемент
включает в себя дополнительный элемент
1. , который задает элементы списка. Синтаксис:
   1. элемент списка
   2. элемент списка

Списки. Ненумерованные списки. Элемент

Элемент
, по сути, является аналогом
без дополнительных элементов
1. , он используется с целью задания ненумерованых списков, имеет атрибут type=circle,square, или disc для задания вида маркера. Элемент
   включает в себя дополнительный элемент
   • , который задает элементы списка. Синтаксис:
     • элемент списка
     • элемент списка

Списки. Списки определений. Элемент

Элемент

используется с целью задания словарей, глоссариев и прочих перечней. Элемент

включает в себя дополнительные элементы

и

, которые обозначают соответственно термин и определение. Синтаксис:

термин 1

определение 1

термин 2

определение 2

Рисунки. Элемент Элемент Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, элемент поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна. Синтаксис: src Этот атрибут указывает на файл графики, задавая его URL. Синтаксис: alt В некоторых случаях, когда браузер не в состоянии загрузить файл с изображением, либо когда пользователь намеренно, с целью сэкономить время и деньги, отключает загрузку картинок, на экране высвечивается альтернативный текст типа Chef . Синтаксис: align Этот атрибут задает расположение рисунка в окне и его выравнивание. Он может принимать значения: top | bottom | middle wigth=n1 height=n2 hspace=n3 vspace=n4 border=n5

Рисунки. Элементы

Рисунки. Элементы

Рисунки. Элемент Элемент используется с целью создания в документе бегущей строки. Текст строки Он может иметь атрибуты: direction Этот атрибут задает направление движения бегущей строки: left влево, right вправо, up вверх, down вниз. behavior Этот атрибут задает поведение бегущей строки, либо scroll прокрутка, либо slide прокрутка с остановкой, либо alternate движение от края к краю. loop Этот атрибут задает количество проходов бегущей строки. scrollamount Этот атрибут задает скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстро. scrolldelay Этот атрибут задает временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками. Пример: Бегущая строка, заданная элементом СТРОКА

Ссылки. Элемент Элемент используется с целью создания ссылок на другие элементы документа, или даже на другие документы. Пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу, не задавая явным образом URL последних. Элемент выполняет два действия: задает имя ссылки и задает ссылку на имя. Имя ссылки браузер автоматически выделяет другим цветом и подчеркивает. name Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка. Синтаксис: необязательный текст href Для организации ссылки используется атрибут href, который задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на URL и имя файла. Синтаксис: текст, для щелчка или же в тексте: текст для щелчка id Для организации ссылки используется атрибут href, который задает адрес ссылки. Атрибут id идентичен атрибуту name с той разницей, что он может вставляться в другие тэги, отличные от тэга Например:

далее в тексте.. . Ссылка

Пример Ссылка на" src="https://present5.com/presentacii/20170505/276-yazyki_razmetki_dokumentov.ppt_images/276-yazyki_razmetki_dokumentov.ppt_45.jpg" alt=">Ссылки. Примеры. Ссылка на HTML файл по протоколу HTTP Пример Ссылка на" /> Ссылки. Примеры. Ссылка на HTML файл по протоколу HTTP Пример Ссылка на e-mail,при помощи протокола mailto Пример Ссылка на e-mail,при помощи протокола mailto с автозаполнением темы и текста послания Пример Ссылка на группу новостей,при помощи протокола news Пример Ссылка на EXE файл по протоколу FTP Пример