Структурная разметка веб документа обеспечивается с помощью. История развития языков разметки

markup languages) - это набор специальных инструкций, называемых тэгами, предназначенных для формирования в документах какой-либо структуры и определения отношений между различными элементами этой структуры. Другими словами разметка показывает, какая часть документа является заголовком, какая подзаголовком, что следует считать именем автора и т. д. Разметка разделяется на стилистическую разметку, структурную и семантическую. Стилистическая разметка

Стилистическая разметка отвечает за внешний вид документа. Например, в HTML к данному типу разметки относятся такие теги как (курсив), (жирный), (подчеркивание), (перечеркнутый текст) и т.д.

Структурная разметка

Структурная разметка задает структуру документа. В HTML за данный тип разметки отвечают, например, теги (параграф), (заглавие), (секция) и т.д.

Семантическая разметка

Семантическая разметка информирует о содержании данных. Примерами данного типа разметки являются теги (имя документа), (код, используется для листингов кода), (переменная), (адрес автора).

Основными понятиями любого языка разметки являются теги, элементы и атрибуты.

Тэги и элементы.

Значения понятий тэги и элементы часто путают.

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

Элемент - это тэги в совокупности с их содержанием. Следующая конструкция является примером элемента:

Это текст выделен курсивом .

Элемент состоит из открывающего тега (в нашем примере это тег ), содержимого тега (в примере это текст "Это текст, выделен курсивом") и закрывающего тега( ), правда иногда в HTML, закрывающий тег можно опустить.

Атрибуты

Для того чтобы при определении элемента задать какие-либо параметры, уточняющие характеристики данного элемента используются атрибуты.

Атрибуты состоят из пары "название" = "значение", которую можно задавать при определении элемента в начальном тэге. Слева и справа от символа равенства можно оставлять пробелы. Значение атрибута указывается в виде строки, заключенной в одинарные или двойные кавычки.

Любой тэг может иметь атрибут, если этот атрибут определен.

В случае использования атрибута элемент принимает следующую форму:

содержимое тега

Текст выравнивается по центру

В одном открывающемся теге может содержаться несколько атрибутов, например:

Указан размер и цвет текста

История развития языков разметки.

Понятие гипертекста было введено В.Бушем в 1945 году а, начиная с 60-х годов, стали появляться первые приложения, использующие гипертекстовые данные. Однако основное развитие данная технология получила, когда возникла реальная необходимость в механизме объединения множества информационных ресурсов, обеспечения возможности создания, просмотра нелинейного текста.

В 1986 году ISO был утвержден универсальный стандартизированный язык разметки (Standardized Generalized Markup Language). Этот язык предназначен для создания других языков разметки, он определяет допустимый набор тэгов, их атрибуты и внутреннюю структуру документа. Таким образом имеется возможность создавать свои собственные тэги, связанные с содержанием документа. Теперь становится очевидно, что такие документы трудно интерпретировать без определения языка разметки, которое хранится в определении типа документа (DTD - Document Type Definition ). В DTD сгруппированы все правила языка в стандарте SGML . Другими словами в DTD описывается связь тегов между собой и правила их применения. Причем для каждого класса документов определяется свой набор правил, описывающих грамматику соответствующего языка разметки. Таким образом, только при помощи DTD можно проверить правильность использования тегов а, следовательно, его нужно посылать вместе с SGML-документом или включать в документ.

В то время кроме SGML существовали еще несколько конкурирующих между собой подобных языков, однако популярность (HTML, который является одним из его потомков) дала SGML неоспоримое преимущество перед своими собратьями.

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

Язык разметки HTML гораздо более простой и удобный, чем SGML , его инструкции в первую очередь предназначены для управления процессом вывода содержимого документа на экране. Язык HTML как способ разметки технических документов был создан Тимом Бернерсом-Ли ( Tim Berners-Lee) в 1991 году специально для научного сообщества. Первоначально он был всего лишь одним из SGML -приложений.

Не смотря на то, что единственное, что умеет HTML - классифицировать части документа и обеспечивать его правильное отображение в браузере, он является самым популярным языком разметки. Это связано с тем, что HTML достаточно легок для изучения. Все, что от вас требуется, - изучить команды HTML. DTD для HTML хранится в браузере. К тому же надо заметить, что HTML спроектирован для работы на самых разных платформах. Но у него есть ряд существенных ограничений:

  • HTML имеет фиксированный набор тэгов, и данный набор нельзя расширить или изменить;
  • теги языка HTML показывают только как должны быть представлены данные, то есть внешний вид документа. HTML не несет информации о значении содержания, заключенного в тэгах, структуре документа.
  • Все документы, доступные через Web, написаны на специально разработанном для этого языке, который называется Hyper Text Markup Language (HTML). HTML - простой язык разметки, который позволяет помечать фрагменты текста и задавать ссылки на другие документы, выделять заголовки нескольких уровней, разбивать текст на абзацы, центрировать их и т. п., превращая простой текст в отформатированный гипермедийный документ.

    Основу инструментария языка HTML составляют теги -- инструкции HTML, их в языке около сотни. Они присутствуют внутри гипертекстового документа и позволяют до тонкостей сформировать всю структуру и стиль его оформления. При просмотре такого документа с помощью браузера, например, эти теги невидимы. Да и при создании web-страницы с помощью специализированных программных средств, а такие средства присутствуют практически во всех офисных приложениях (в Word, Excel, Access, Power Point, Outlook и т. д.), теги пользователю не видны -- они вводятся автоматически.

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

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

    Просматривать Web-страницы можно в любом текстовом редакторе, только делать это крайне неудобно, поскольку страница не форматируется, но зато видны ее теги.

    Программы для просмотра документов в формате HTML называются браузерами. Просмотр Web-документов - одна из основных, хотя и не единственная функция браузера.

    С момента разработки первой версии языка (HTML 1.0) прошло несколько лет. За это время произошло довольно серьезное развитие языка. Почти вдвое увеличилось число элементов разметки, оформление документов все больше приближается к оформлению качественных печатных изданий, развиваются средства описания не текстовых информационных ресурсов и способы взаимодействия с прикладным программным обеспечением. Совершенствуется механизм разработки типовых стилей. Фактически, в настоящее время HTML развивается в сторону создания стандартного языка разработки интерфейсов, как локальных, так и распределенных систем.

    (Standard Generalized Markup Language), представленный в стандарте ISO 8879. Этот язык принят в качестве основного языка оформления технической документации, в том числе интерактивных электронных технических руководств на создаваемые изделия в CALS-технологиях .

    В языке SGML определяется структура документов в виде последовательности объектов данных. Объекты данных, представляющие части документа, могут храниться в различных файлах. Стандарт SGML устанавливает такие множества символов и правил для представления информации, которые позволяют различным системам правильно распознавать и идентифицировать эту информацию. Названные множества описывают в отдельной части документа, называемой декларацией DTD (Document Type Decfinition), которую передают вместе с основным SGML-документом. В DTD указывают соответствие символов и их кодов, максимальные длины используемых идентификаторов, способ представления ограничителей для тегов, другие возможные соглашения, синтаксис DTD, а также тип и версию документа. Следовательно, SGML можно назвать метаязыком для семейства конкретных языков разметки. В частности, подмножествами SGML можно считать языки разметки XML и HTML .

    Техническое описание в виде SGML-документа включает:

    • основной файл с техническим руководством, размеченный SGML-тегами;
    • описание сущностей , если документ относится к группе, в которой используются одни и те же сущности и подразумевается их известность;
    • словарь для пояснения SGML-тегов;

    Однако язык SGML сложен для освоения и применения. Поэтому для широкого применения разметки в документах, представляемых в WWW -технологиях, в 1991 г. на базе SGML был разработан упрощенный язык HTML (HyperText Markup Language), а в 1996 г. язык XML (eXtensible Markup Language), который становится в сочетании с HTML основным языком представления документов в различных приложениях.

    Язык HTML разработан с целью широкого применения разметки в документах, представляемых в WWW-технологиях.

    Описание на языке HTML представляет собой текст в формате ASCII и последовательность включенных в него команд (управляющих кодов), называемых также дескрипторами или тегами. Этот текст называют HTML-документом, или HTML-страницей, или после размещения на Web-сервере — Web-страницей . Теги расставляются в нужных местах исходного текста, они определяют шрифты, переносы, появление графических изображений, ссылки и т.п. При использовании WWW-редакторов вставка команд осуществляется простым нажатием соответствующих клавиш.

    Язык XML, как и HTML, считается подмножеством языка SGML. В настоящее время язык XML претендует на роль основного языка представления документов в информационных технологиях, его можно рассматривать как метаязык, служащий основой для создания частных языков разметки в различных приложениях. При этом XML более удобен, чем SGML, что обеспечивается устранением в XML некоторых второстепенных особенностей SGML. Описания на XML легче воспринимаются, приспособлены для использования в современных браузерах при сохранении основных возможностей SGML.

    Для конкретных приложений создаются свои варианты XML, называемые XML-словарями или XML-приложениями. Так, для описания текстов со специфической математической символикой разработано XML-приложение OSD (Open Software Description). Для CALS интерес представляет вариант Product Definition eXchange (PDX), посвященный обмену данными. Известны словари для химии (CML — Chemical Markup Language), биологии (BSML — Bioinformatic Sequence Markup Language) и др.

    Иногда можно услышать о "программировании" Web-страницы, однако форматирование текста в окне броузера фактически не относится к программированию. Как следует из названий языков форматирования, они относятся к языкам разметки (markup languages). Иными словами, они состоят из различных символов, вставленных в тело документа, указывающих, как должен выглядеть файл при печати или отображении либо для определения его логической структуры (например, абзацев и маркированных списков). Если не использовать язык разметки, отображаемые данные представляют собой неструктурированный текст (raw text), без форматирования символов или абзацев.
    Языки разметки определяют внешний вид документа с помощью кодов, называемых дескрипторами или тегами (tags), которые имеют примерно такую форму: . Первый дескриптор указывает точку начала форматирования, а второй (с наклонной чертой) — окончание кода. Если опустить второй дескриптор, кодирование, задаваемое первым дескриптором, применяется до конца документа.

    Примечание:
    Язык разметки можно применить к неструктурированному тексту либо вручную, либо с помощью текстового редактора (например, Notepad), либо с помощью графического инструмента, добавляющего код, когда вы визуально упорядочиваете текст по собственному вкусу.
    Новичкам проще работать с графическими инструментами, которые не так точны, как текстовые редакторы.

    Язык разметки гипертекста (HTML)

    Язык HTML (HyperText Markup Language — язык разметки гипертекста) — основа кодирования и "становой хребет" большинства Web-страниц. HTML позволяет публиковать текст и рисунки, содержимое электронных таблиц и даже создавать отчеты на основе баз данных для чтения в интерактивном режиме. Он прекрасно подходит для организации и форматирования статической информации любого типа, поскольку позволяет:

    ● устанавливать размер и шрифт текста;
    ● форматировать текст полужирным шрифтом, курсивом или выделять подчеркиванием;
    ● задавать ссылки на другие страницы;
    ● вставлять изображения;
    ● создавать заголовки страниц;
    ● создавать таблицы;
    ● вставлять метаданные, необходимые для работы машин поиска.

    Примечание:
    Метаданными (metadata) называют скрытые данные, которые не отображаются на Web-странице, однако могут быть обнаружены машиной поиска (engine search), что позволит попасть на данный узел.

    Применяются дескрипторы HTML трех типов.

    ● Для форматирования текста или отдельных символов.
    ● Для форматирования абзацев либо иных крупных текстовых блоков.
    ● Невидимые дескрипторы, которые обеспечивают остальные функциональные средства, например метаданные, для выполнения поиска.

    Основное преимущество HTML перед остальными языками разметки — потрясающая универсальность. Текущую версию HTML поддерживает практически любой броузер (разумеется, современный и поддерживающий графические средства). Это не всегда верно для динамического HTML (DHML), XML, Java и ActiveX. Если вы хотите, чтобы ваши Web-узлы были доступны для броузеров всевозможных типов, рекомендуем использовать HTML.

    Динамический HTML (DHML)

    Динамический HTML (Dynamic HTML — DHML) более гибок по сравнению с HTML.
    Вместо того чтобы выставлять на всеобщее обозрение статичную Web-страницу, вы можете использовать DHTML и создать Web-страницу, которую пользователь сможет настраивать без нарушения вида исходного документа. Например, страница, подготовленная с помощью DHTML, может содержать различные элементы, которые пользователь сможет перемещать по странице, чтобы перегруппировать ее содержимое (по собственному вкусу). Однако при обновлении (refreshing) изображения на странице изменения пропадают, и она принимает исходный вид.
    DHTML поддерживает следующие средства, отсутствующие в HTML.

    ● Динамические стили.
    ● Точное позиционирование.
    ● Привязку данных.
    ● Динамическое содержимое.

    Вам непонятно, что это такое? Не беспокойтесь — ниже приведены пояснения.

    Применение стилей к документам Web. Динамические стили (dynamic styles) основаны на принципах каскадирования таблиц стилей (CSS — cascading style sheets), когда они применяются к странице в целом вместо ручного форматирования отдельных частей страницы.
    Если вы работали с современными текстовыми процессорами, то, возможно, знакомы с таблицами стилей (style sheets), позволяющими автоматически сформатировать текстовые блоки тем или иным методом в зависимости от стиля, который вы им задали. Форматирование подразумевает изменение цвета текста, шрифта, размещения, видимости - вообще практически всего, что относится к реквизитам текста. CSS (и DHTML), делает то же самое, только применяется для обработки Web-страниц, а не для текстов.
    В динамических стилях, реализуемых с помощью DHTML, предусмотрены средства, отсутствующие в текстовых процессорах. Например, вы можете при создании ссылок разметить текст так, что его цвет будет автоматически изменяться при наведении на него указателя мыши либо отображаться, когда вы проводите курсор над определенной областью экрана.
    Единственный недостаток этих стилей заключается в том, что вы должны включать таблицы стилей в большинство документов. Это трудоемкая работа, особенно для тех, кто неопытен в работе с таблицами стилей или занимается конвертированием документов.

    Размещение текста в нужном месте. Еще одно достоинство DHML — его способность точно указать место размещения элемента на странице. Для указания положения объекта используют горизонтальную (х), вертикальную (у) и даже объемную (z) координаты. (Задание положения объекта в трехмерной системе координат позволяет "перекрывать" объекты.) Точное позиционирование позволяет расположить текст вокруг изображения, а также перемещать объекты в пределах окна броузера.

    Примечание:
    HTML без CSS не обеспечивает точного размещения объектов. В этом случае размещение элементов определяется броузером.

    Вставка данных на страницу. Чтобы предоставить пользователям доступ к некоторой внутренней информации (back-end information), например, хранящейся в базе данных, обычные страницы HTML должны быть связаны с сервером, на котором находятся исходные данные, и требуется запрашивать разрешение на манипулирование этими данными. DHTML позволяет привязать данные к конкретной странице, допуская работу с привязанными (или точнее - связанными) данными (bound data) без нарушения исходных данных и даже без взаимодействия с сервером, хранящим их. Для этого источники данных вводят в страницу (их можно сортировать и фильтровать точно так же, как и содержимое любой базы данных). Это не только снижает загрузку сервера, но также позволяет пользователям просматривать и манипулировать данными без предоставления им доступа к источнику самих данных.

    Создание динамического содержимого. Таблицы стилей (style sheets) дают возможность издателю (publisher) Web без труда изменять внешний вид страницы или набора страниц.
    Динамическое содержимое позволяет пользователю Web изменять внешний вид (представление) страницы исполнением сценария, чтобы:

    ● вставлять или скрывать элементы страницы;
    ● модифицировать текст;
    ● изменять структуру текста;
    ● перемещать данные из внутренних источников (back-end sources) и отображать их по запросу пользователя.

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

    Совет:
    В разделе "Организация собраний" (см. выше) упомянута карта здания, созданная на основе Web-данных, отображающая расположение конкретного офиса и портрет служащего, которого пользователь пытается отыскать. Эта карта создана с помощью DHTML-средств языка разметки для создания динамического содержимого.

    Расширяемый язык разметки (XML)

    Язык XML (Extensible Markup Language - расширяемый язык разметки) не заменяет HTML (во всяком случае, он редко встречается на Web-страницах), однако поддерживает его, позволяя несколько повысить универсальность Web-страниц.
    Идея такова: когда вы форматируете страницу с помощью HTML, то можете изменить внешний вид текста дескрипторами, форматирующими его полужирным шрифтом, курсивом, подчеркиванием, абзацами и т.д. Однако сами дескрипторы практически никак не связаны с содержимым текста, а только с его форматированием. Язык XML имеет дескрипторы, определяющие внешний вид текста. Вы можете с их помощью указать, что обозначает данный текст (имена, адреса, названия продуктов и т.д.).
    Зачем это нужно? Прежде всего, эти метаданные позволяют машинам поиска найти предварительно заданные элементы. Если вы проведете в Web-узле вашей корпорации (созданном с помощью языка HTML) поиск по слову "name", просматривая все упомянутые в нем имена, то в результате возвратятся все экземпляры слова "name", но не сами имена. Однако если при создании узла использовалось кодирование с помощью языка XML, в результате будет возвращен любой текст, имеющий дескриптор имени "name". Во-вторых, снабженные дескриптором части текста могут быть полезны, если вам необходимо применить некое средство (например, цвет или язык) только к отдельным частям документа Web. Пусть, например, интерактивный документ представляет собой краткий рассказ на испанском языке с переводом на английский. Тогда вместо переключения документа с поддержки испанского языка на поддержку английского, можно определить эти части рассказа дескрипторами и применить правила испанского языка только к этим частям, а переводы оставить на английском.
    По существу, применение языка XML значительно облегчает разработку Web-страницы, особенно если некоторые его части необходимо создать как изолированные элементы.

    Взаимодействие
    Wi-Fi-сертификация является гарантией того, что сетевые адаптеры и точки доступа от различных производителей будут совместно работать без проблем, но существует несколько функций и кон...

    Термины на букву V
    Virtual Machines — виртуальные машины. Программное обеспечение, имитирующее работу физического устройства. В Windows 98 оно используются, чтобы "обманным путем" заставить программу с...

    Что делают драйверы сетевых плат
    Драйверы сетевых плат (сетевые драйверы) отвечают за управление всеми внешними связями компьютера, в том числе и доступом в Internet для каждой используемой модели сетевой платы необходимо установит...

    Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

    НTML - это язык гипертекстовой разметки.

    Язык используется для организации веб-страниц. Проведем аналогию. Вы покупаете газету. В ней напечатаны несколько статей. У каждой статьи есть название, в ней есть фотографии. А текст набирается несколькими колонками. Это - структура газетной страницы.

    На сайте все происходит так же. Чтобы сделать правильную структуру статьи - контента - нужно использовать язык разметки текста.

    Для чего нужен HTML

    Язык HTML нужен, чтобы сообщить браузеру, как нужно отобразить страницу на экране.

    Язык распространен повсеместно. Это универсальное средство для оформления контента на странице. Его использование возможно в любой браузере. Если писать код на языке программирования - нужно знать какие-то особенности, операторы, типы данных и так далее.

    HTML состоит из набора тегов - команд, и атрибутов - свойств. Их несложно запомнить, и всегда можно найти справочные материалы.

    Что такое HTML-код

    Код - это команды браузеру, как следует отобразить страницу. Есть структура, которая должна соблюдаться всегда. Например, наличие только одного заголовка H1 на странице, основная информация помещается в раздели т. д.

    В языке есть три инструмента.

    Теги бывают двух видов - парные и одиночные.

    • - парный тег, открывающий и закрывающий. Они действуют на текст, помещенный между ними.
    • Одиночный тег, он действует на текст, стоящий после него до следующего тега.

    Структура HTML-кода на странице

    Мы говорили, что структура у любого html-документа всегда одна и та же. Далее перечислим обязательные элементы.

  • ! - указывает, что в документе используется HTML.
  • ... - в этот тег помещается весь код страницы. Все, что в него не помещено, не распознается браузером и не отображается.
  • ... - парный тег, в него помещается технрическая информация, например, о кодировке документа.
  • ... - это заголовок страницы, он помещается внутри раздела head. У любой страницы должен быть свое уникальное название.
  • ... - это служебная информация. Она подключает к странице отдельные стили - css и т. д. Не отображается пользователю.
  • ... - тело страницы. Вся основная информация заключается в этот тег.
  • ... - гиперссылки.
  • - изображения.
  • ... - жирный текст.
  • ... - курсив.
  • Элементов внутри body может быть неограниченное количество.

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

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