Структуры данных, НТМL

Метаязык для описания структур данных
(Бэкуса-Наура формы (БНФ))
Символ «: : =» означает «может быть выражено как», «это есть».
Каждое правило заканчивается точкой.
Описание структуры данных представляет собой список правил, каждое из которой включает левую и правую части отделяемых символом:
«: : =».

Все элементы данных (ЭД) делятся на элементарные(терминальные) и неэлементарные (нетерминальные).
Структура нетерминальные ЭД определяется с помощью структур других ЭД при использовании правил.
Нетерминальный символ всегда располагается в левой части правила и он всегда единственный.
В правой части правила располагаются элементы данных,
которые определяют структуру нетерминального символа,
расположенного в левой части.

Неэлементарные категории (понятия) языка (неатомарные элементы данных, не терминалы) заключены в скобки
“<” и “>”.
Названия нетерминальных символов обозначаются словами, выражающими их интуитивный смысл и написанными на естественном языке.
Терминальные символы изображаются буквами алфавита или цепочками знаков, заключенными в кавычки
(при неоднозначности в обозначениях).
Обозначение элементов данных

Ноль есть цифра, единица есть цифра, …, девять есть цифра:
<Цифра >::=«0».
<Цифра >::=«1».
…..
<Цифра >::=«9».
Определение цифры
Цифра::= 0.
Цифра::=1.
…..
Цифра::=9.

Символ «|» означает разделительное или:
Цифра :: = 0| 1| 2| 3| 4| 5| 6| 7| 8|9.
Символ «[ ]» означает необязательность синтаксической категории:
Целое число::=[Знак числа] Последовательность цифр
Альтернативы при описании структур данных, необязательность элементов

Символы «{}» означают многократное повторение, возможно и ноль раз
({}mn - многократное повторение, не менее m раз, но не более чем n раз):
Целое неотрицательное число не превышающее 999 ::= ::= {Цифра}13 .
Символы: ( ) означают группировку :
Целое одноразрядное число ::=
::= (+Цифра) | (-Цифра )|Цифра.
Символы повторения и группировки

Число с фиксированной точкой
:: =[+|-]{Цифра}1 [. {Цифра}1]
Целое число с фиксированной точкой
:: =[+|-]{ Цифра }1
Основание системы счисления:
: =(2| 3| 4| 5| 6| 7| 8|9) |
(Цифра не ноль |{Цифра}1)
Абсолютный порядок : = Целое число с фиксированной точкой
Примеры правил записи чисел

Число плавающей точкой
::==Число с фиксированной точкой ×Основание системы счисления Абсолютный порядок
Пример отсутствия возможности использования метаязыка
для задания структуры записи
Пример записи числа: 23,45×1012

HTML - Hyper Text Markup Language –
«язык гипертекстовой разметки»
- стандартизированный язык разметки текстов.
Язык HTML был разработан британским учёным Тимом Берненсом-Ли
приблизительно в 1986 -1991 г. в Женеве.
Структура текстов

Текстовые документы, содержащие разметку на языке HTML
(такие документы традиционно имеют расширение .html или .htm),
обрабатываются специальными приложениями,
которые отображают документ
в его форматированном виде.
Такие приложения, называемые «браузерами»
или «интернет-обозревателями»,
обычно предоставляют пользователю удобный интерфейс для запроса вебстраниц, их просмотра
(и вывода на иные внешние устройства)
и, при необходимости, отправки данных.
(Google Chrome(Google Chrome, Mozilla Firefox(Google Chrome, Mozilla Firefox, Opera(Google Chrome, Mozilla Firefox, Opera, Internet Explorer ).

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

Любой текстовый документ на языке HTML представляет собой набор элементов
причём начало и конец каждого элемента обозначается специальными пометками — тегами.
Теги записываются в треугольных скобках (< >).
Теги - управляющие символы.
При воспроизведении текста
указывают на то, чтобы произвести
определенные действия с текстом.
На экран теги не выводятся.
Структура текстового документа

Объявляет тип документа и предоставляет основную информацию язык и версия языка:
Задает полужирное начертание отрывка текста.
Представляет тело документа.
Перенос текста на новую строку.
Выделяет отрывок текста курсивом.
Параграфы в тексте.
Заголовок HTML-документа.
<br><p>Некоторые теги:<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1169673/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Элементы, находящиеся внутри тега <br><html>, <br>образуют дерево документа, <br>так называемую объектную модель</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1169673/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1169673/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1169673/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-14.jpg 1440w" class="slides-image" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-14.jpg"><!----><div class="slides-content">документа, <br>DOM (document object model). <br>При этом элемент тега<br><html> <br>называют корневым элементом.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1169673/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>Пример дерева документа<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Пример дерева документа" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1169673/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1169673/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1169673/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-15.jpg 1440w" class="slides-image" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-15.jpg"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1169673/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>Документ ::= <!DOCTYPE html><br><html> Объектная модель документа </html>.<br>Объектная модель документа ::=Заголовок Тело.<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Документ ::= Объектная модель документа . Объектная модель документа ::=Заголовок Тело." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1169673/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1169673/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1169673/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-16.jpg 1440w" class="slides-image" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-16.jpg"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1169673/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div>Заголовок ::=<head> Содержание заголовка </head><br>Тело::=<body> Содержание документа</body> .<br>Содержание документа::=<br>::={Элемент}1.<br>Элемент::=<br>::=Текст| Открывающий тег [Элемент</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Заголовок ::= Содержание заголовка Тело::= Содержание документа . Содержание документа::= ::={Элемент}1. Элемент::=" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1169673/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1169673/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1169673/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-17.jpg 1440w" class="slides-image" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-17.jpg"><!----><div class="slides-content">Закрывающий тег].<br><p>Структура заголовка и содержания документа<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1169673/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><h3 class="slides-content text-center font-bold"><div><p>Каждому открывающему тегу <…> <br>соответствует закрывающий </…>. <br>Открывающий и закрывающий теги <br>содержат</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Каждому открывающему тегу соответствует закрывающий . Открывающий и закрывающий теги содержат имя" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1169673/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1169673/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1169673/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-18.jpg 1440w" class="slides-image" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1169673/slide-18.jpg"><!----><div class="slides-content">имя тега. <br>Но теги могут быть пустыми, <br>то есть не содержащими никакого текста и других элементов. <br>В этом случае закрывающий тег не указывается. Например, тег переноса строки <br> - одиночный <br>и закрывать его не нужно. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1169673/slide-19.jpg" target="_blank" rel="noopener">Слайд 20</a><h3 class="slides-content text-center font-bold"><div><p><html><br><head>
<title>Моя первая страничка
Привет, друзья!
Я студент КАИ, это моя первая страничка!
Пример

Этот текст будет полужирным, а этот — ещё и курсивным.
HTML Document
Этот текст будет полужирным,
а этот — ещё и курсивным
.
Пример описания структуры текста: