Язык гипертекстовой разметки HTML. Что такое язык разметки HTML Документ подготовленный с помощью языка разметки гипертекста

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

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

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

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

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

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

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

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

• Тег - это команда. Она указывает непосредственно на действие. Например,
  • 
    - перенести текст на новую строку.

  • Начать новый абзац.

  • - поместить текст в начало страницы.
• Атрибуты тега - это дополнение к командам. Они позволяют настроить то действие, которое заложено в теге. Например,
  • - здесь тег указывает на то, что в текст вставляется ссылка, а атрибут href - указывает адрес линка.
• Значение атрибута - поясняет, как именно нужно видоизменить свойство.
  • - возвращаясь к этому примеру, “сайт” - это значение атрибута.

- изображения.

Элементов внутри body может быть неограниченное количество.

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

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

World Wide Web, или, что-то же самое Всемирная паутина, WWW составляет основную компоненту глобальной компьютерной сети Интернет. Зародившись еще в 60-е гг., Интернет долгое время использовалась лишь узким кругом специалистов для обмена информацией по электронной почте. Сеть управлялась операционной системой UNIX - для научных целей это подходило, но достаточно сложный текстовый интерфейс UNIX"a существенно ограничивал масштабы применения сетевых технологий. Годом рождения World Wide Web считается 1989 - в этом году был изобретен язык, ставший впоследствии основным языком web-документов - это язык - HTML (HyperText Markup Language - язык разметки гипертекста).

Автором языка HTML является Тим Бернерс-Ли, выпускник Оксфордского университета, работавший в то время по контракту в Женеве, в Европейской лаборатории физики элементарных частиц (CERN, Conseil Europeen pour la Recherche Nucleaire) консультантом по программному обеспечению. CERN - достаточно большая организация, и потому, чтобы лучше ориентироваться в ее структуре, не хранить в памяти данные о большом количестве проектов, должностных лиц и пр., Тим Бернерс-Ли разработал для своего личного пользования программу Enquire, на основе которой через несколько лет для лаборатории было создано своего рода информационное пространство. Программа Enquire позволяла осуществлять так называемый "нелинейный" поиск документов - т.е. переходить от одного документа к другому без обращения к оглавлению или справочнику.

Язык HTML составляет основу технологии гипертекста. Гипертекстовый документ содержит так называемые гиперссылки.

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

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

Язык HTML не является собственно языком программирования; это есть средство описания структуры документа, его стиля и связей его с другими документами. Для просмотра Web-документов используются специальные программы - так называемые браузеры (англ.: to browse - 1) пастись, ощипывать побеги; 2) читать, заниматься беспорядочно, урывками.) Вообще-то, возможности браузеров много шире, но пока ограничимся их определением как средством просмотра web-документов. Именно браузерам Интернет обязана своей популярностью.

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

Данный выбор обусловлен тем, что наряду с простотой создания данного вида документов, язык гипертекстовой разметки обладает колоссальными возможностями, такими, как вывод форматированного текста, использование графических объектов практически всех известных форматов, использование фонового рисунка, вставка таких объектов, как фоновый звук, видео и т.д.

Кроме этого, HTML позволяет легко организовывать ссылки на другие объекты или фрагменты текста самого документа .

Большим преимуществом HTML является то, что большинство современных инструментальных средств (такие, как, текстовые и графические редакторы, языки визуального программирования, Internet Explorer...) поддерживают работу и сохранение документов в HTML формате.

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

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

Тем не менее, использование HTML документов во многом облегчает написание теоретической части программы и делает ее более живой. Давайте рассмотрим несколько вопросов, связанных с созданием HTML документов. Можно работать на Web без знания языка HTML, так как тексты HTML могут создаваться различными специальными редакторами и конвертерами.

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

Первая версия HTML была разработана в начале 90-х годов Тимом Бенерс-Ли для популярного в прошлом броузера Mosaic. Но в те времена ни для броузера, ни для самого языка еще не нашлось достойного применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкому использованию гипертекста дала версия 2.0, которая появилась в июне 1994 года.

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

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

В 1996 году появился HTML версии 3.2. Это было новаторское решение, достаточно упомянуть, что в спецификацию языка были введены фреймы, которые стали теперь весьма популярными у разработчиков Web-страниц.

Даже сейчас на основе этой спецификации можно реализовывать очень неплохие дизайнерские решения. Практически все современные броузеры стопроцентно поддерживают версию 3.2, поэтому у авторов не возникают сомнения по поводу работоспособности заявленных элементов.

Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум), компании-производители броузеров создавали собственные элементы (расширения).

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

Но броузеры поддерживали фреймы, и многие книги, посвященные HTML, содержали описания фреймов без упоминания о том, что это нестандартные элементы. И это было правильно, потому что фреймы стали стандарте де-факто . В версию языка 4 они уже были включены на полном основании.

И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другbми программными кодами, в версии 3.2 не сыграли той роли, которую были призваны сыграть.

Это объяснялось тем, что броузеры различных версий по-разному интерпретировали программы на языках Java, JavaScript, Visual Basic VBScript. В результате не удавалось получить достаточно надежно работающий код, и данные языки использовались любителями HTML в основном для экспериментов.

Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.

Появившиеся в то время броузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был достигнут определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии броузера, чтобы потом использовать тот или иной фрагмент кода.

Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящее время броузерах. Кроме того, актуальной остается проблема использования старых или не очень популярных программ. Лидерами "броузеростроения" по праву считаются компании Microsoft и Netscape, но ведь существуют еще и другие фирмы .

В результате использование всех возможностей Dynamic HTML стало yдeлoм программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных Web-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.

Анатомия Web-страницы

Ниже показана заготовка типичного Web-документа. На этом примере мы рассмотрим структуру HTML-страниц.

Пример (шаблон) Web-страницы

Структура Web-страницы

H2 {font-family: Arbat;}

CODE {font-family: Arial;}

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

В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 "Information processing. Text and office systems. Standard Generalized Markup Language (SGML)". Правда, существует большое различие между стандартом официальным и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами, и изучать его надо не по официальным первоисточникам, а на практике, обращаясь к последним разработкам ведущих фирм и специалистов .

Чтобы понять структуру Web-страницы, необходимо рассмотреть вес элементы, входящие в приведенный выше листинг. При рассмотрении элементов языка будем приводить оба тега: начальный и конечный.

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

Некоторые пользователи записывают начальные теги прописными буквами, а конечные теги -- строчными. Это помогает разобраться в исходном тексте Web-страницы.

Синтаксис HTML.

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

В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и d i r , которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY, FRAMESET и других, определяющих общую структуру Web-страницы. Естественно что конечным тегом заканчиваются все подобные документы.

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же, как предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и d i r, должен включать элемент TITLE и допускает вложение элементов BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.

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

Описание стиля некоторых элементов Web-страницы. В файле Strukt.htm назначены шрифты для элементов Н2 и CODE.

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

Интересно, как синтаксис HTML отражает историю развития вычислительной техники. Например, старый, теперь уже не работающий элемент BLINK напоминает нам о тех временах, когда люди использовали дисплеи, которые имели только текстовый режим. При таком положении вещей мигание текста (blink) было, наверное, единственным достижимым визуальным эффектом .

В противоположность этому, элемент STYLE, введенный сравнительно недавно, вызывает ассоциации с программами для Windows, так как в них впервые появилось стилевое оформление текста, которое теперь невероятно популярно, и без него уже немыслима работа в таких приложениях, как Word или Excel.

Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй -- содержание.

Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:

URL="http://адрес"

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

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

background="Путь к файлу фона"

Более простое оформление фона сводится к заданию его цвета:

bgcolor="#ff/?GGSS"

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

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

text="#/?/?GGB5"

Для задания цвета текста гиперссылок используется следующий атрибут:

Точно так же можно задать цвет для просмотренных гиперссылок:

vlink="#/?/?GGflS"

Можно также указать изменение цвета для последней выбранной пользователем гиперссылки:

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

Элемент заголовка. Существует шесть уровней заголовков, которые обозначаются Н1...Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

Горизонтальная линия (horizontal rule) -- очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Действительно, в HTML практически отсутствуют похожие конструкции, только для горизонтальной линии почему-то было сделано исключение. Правда, несмотря на некоторую скупость языка в этой области, можно придумать немало стандартных графических образов, которые разнообразили бы вид страниц .

Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

Можно задавать толщину линии:

51ге=толщина в пикселах

Можно управлять длиной линии:

fiitifn-длина в пикселах

width=/^twa в процентам/ч

Можно выбрать цвет:

со1ог="цвет"

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

Произвольный текст

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

Переход к метке

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

Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа. Для использования этого элемента необходимо использовать следующую конструкцию:

Фрагмент адреса путъ // не является обязательным.

При формировании полного адреса он будет отброшен.

Так, если в тексте документа встретится относительная ссылка