Почему важно знать язык разметки гипертекста html. Язык гипертекстовой разметки HTML5 — структура и основы работы

Языки гипертекстовой разметки SGML. XML. HTML.

SGML (англ. Standard Generalized Markup Language - стандартный обобщённый язык разметки; произносится [эс-джи-эм-эл]) - метаязык, на котором можно определять язык разметки для документов. SGML - наследник разработанного в 1969 году в IBM языка GML (Generalized Markup Language), который не стоит путать с Geography Markup Language, разрабатываемым Open GIS Consortium.

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

Основные части документа SGML:

SGML-декларация - определяет, какие символы и ограничители могут появляться в приложении;

Document Type Definition - определяет синтаксис конструкций разметки. DTD может включать дополнительные определения, такие, как символьные ссылки-мнемоники;

Спецификация семантики, относится к разметке - также даёт ограничения синтаксиса, которые не могут быть выражены внутри DTD;

Содержимое SGML-документа - по крайней мере, должен быть корневой элемент.

SGML предоставляет множество вариантов синтаксической разметки для использования различными приложениями. Изменяя SGML-декларацию, можно даже отказаться от использования угловых скобок, хотя этот синтаксис считается стандартным, так называемым concrete reference syntax.

Пример синтаксиса SGML:

typically something like this

SGML стандартизован ISO: «ISO 8879:1986 Information processing-Text and office systems-Standard Generalized Markup Language (SGML)»

HTML и XML произошли от SGML. HTML - это приложение SGML, а XML - это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. Другими приложениями SGML являются SGML Docbook (документирование) и «Z Format» (типография и документирование).

XML - Extensible Markup Language, то есть Расширяемый Язык Разметки, возник в результате развития языка HTML (HyperText Markup Language, языка разметки гипертекста). Однако было бы грубой ошибкой воспринимать его лишь как некую усовершенствованную версию языка HTML. По сути, язык XML представляет собой новое поколение языков разметки. Здесь следует иметь в виду 3 момента, принципиально отличающих XML от HTML и его предшественников (GML - Generalized Markup Language, SGML - Standard General Markup Language):

XML, в отличие от HTML, НЕ ИМЕЕТ ПРЕДОПРЕДЕЛЕННЫХ ТЭГОВ - точнее, каждый разработчик может создавать СВОИ СОБСТВЕННЫЕ XML-тэги - столько, сколько нужно. Количество таких тэгов практически неограничено. Таким образом, XML является метаязыком, позволяющим создавать другие языки разметки, такие как, например, HTML.

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

недопустимы незакрытые контейнеры тэгов (но можно объединять открывающий и закрывающий тэги в одном, например:
)

"вложенные" контейнеры не могут "перекрываться"

строчные и прописные буквы воспринимаются как разные символы

в качестве названий тэгов нельзя использовать ключевые слова

в названиях тэгов нельзя использовать пробелы, знаки пунктуации, круглые, квадратные и фигурные скобки

знак подчеркивания (_) и цифры могут встречаться в названиях тэгов, но цифра не может быть перым символом названия тэга

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

Документы, отвечающие этим правилам, называются well-formed documents.

XML служит для ОПИСАНИЯ СТРУКТУРЫ ДАННЫХ, главным образом, ИЕРАРХИЧЕСКИХ СТРУКТУР.

Одной из основных тенденций развития web-технологий является РАЗДЕЛЕНИЕ ДАННЫХ, СТРУКТУРЫ ДОКУМЕНТА И ЕГО СТИЛЕВОГО ОФОРМЛЕНИЯ. Как известно, одним из способов обособления данных от структуры документа является динамическое связывание СУБД с web-документами через интерфейс ODBC (Open DataBase Connectivity). Обособление стилей достигается за счет использования каскадных таблиц стилей. XML позволяет описывать нереляционные базы данных. Поскольку тэги могут создаваться разработчиком, их названия обычно характеризуют смысл данных.

XML, как средство описания структуры данных, обеспечивает ОБМЕН ДАННЫМИ между различными приложениями, выступая, таким образом, в качестве своеобразного "клея".

Значение этой "связующей" функции XML трудно переоценить. Благодаря возможности обмена данными между различными приложениями web-технологии "выходят" на качественно новый уровень.

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

· Гипертекстовых новостей, почты, документации и гипермедиа

· Меню опций

· Результатов запросов к базам данных

· Простых документов с встроенными графическими образами

· А также, для гипертекстового просмотра существующих массивов информации

Проект World Wide Web (WWW) объединяет разбросанную по миру информацию. Для этого WWW использует Internet HyperText Transfer Protocol (HTTP) - Протокол Передачи Гипертекста, который позволяет ввести соглашения на способы представления данных при взаимодействии клиента и сервера.



Данные передаются в теле сообщения в соответствии с MIME стандартом. HTML это одно из представлений информации в WWW. Предполагается, что HTML соответствует одному из типов MIME, а именно text/html. Дополнительно, HTML это разработка, соответствующая Международному Стандарту ISO 8879 - Standard Generalized Markup Language (SGML), который является системой для определения структурированных типов документов.

HTML документ

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

HTML документы должны начинаться с тэга , стоящего в начале файла, и заканчиваться тэгом . Между этими тэгами HTML документ организован как ЗАГОЛОВОК (HEAD) и ТЕЛО (BODY) документа, подобно почтовому сообщению. Внутри HEAD части указывается ЗАГОЛОВОК (TITLE) и другая информация о документе в целом. Внутри BODY части с помощью HTML тэгов текст структурируется в параграфы, списки и пр. с возможностью выделения стилем отдельных слов и целых предложений и создания ссылок на части этого и внешние документы. Технически, открывающий и закрывающий тэги для HTML, HEAD и BODY элементов можно не использовать. Тем не менее, делать это не рекомендуется, так как HEAD/BODY структура позволяет приложениям определять особенности документов (например заголовок), не просматривая весь документ целиком.

Структура HTML элементов

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

Это Заголовок

Это параграф.

Некоторые элементы появляются только как открывающий тэг. Например, для создания линии- разделителя используется тэг
. Кроме того, закрывающие тэги для некоторых элементов (P, LI, DT, DD) могут быть опущены. Тело элемента это последовательность символов и вложенных элементов. Некоторые элементы, такие как элементы, определяющие ссылки, не могут быть вложенными друг в друга. При этом элементы, определяющие ссылки и выделения символов могут быть помещены внутрь других конструкций.

Отображение документа

Конкретный вид отображения документа может изменяться от клиента к клиенту. HTML тэги определяют только общий стиль отображения документа. Что означает, например, что HTML рассматривает заголовок первого уровня только как заголовок первого уровня, но не определяет, что заголовок первого уровня должен отображаться шрифтом Times размера 24 в центре верхней части страницы. Преимущество такого подхода заключается в том, что если пользователь решит изменить заголовок первого уровня на шрифт Helvetica размера 20 выравненный по левому краю, все, что ему надо сделать, это изменить определение заголовка первого уровня в его WWW просмоторщике. Таким образом, конкретное представление документа на экране монитора определяет пользователь конкретного клиента.

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

Необязательный. Если присутствует атрибут HREF, Anchor это чувствительный текст: стартовая точка для ссылки. Если читатель выбирает этот текст, ему будет представлен другой документ, чей сетевой адрес был указан в значении атрибута HREF. Формат сетевого адреса аналогичен URL. Это позволяет структуре HREF="#identifier" ссылаться на другой anchor в текущем документе, или в удаленном документе при указании его адреса перед знаком "#".

Необязательный. Если присутствует, позволяет использовать anchor как место назначения ссылки. Значением атрибута является идентификатор anchor"а. В качестве значения идентификатора может быть использована обычная текстовая строка, за исключением того, что внутри одного документа все подобные идентификаторы должны быть уникальны.

Необязательные. Позволяют указывать взаимосвязи между документом из которого была сделана ссылка, и документом, на который была сделана ссылка.

Язык разметки гипертекста Hyper Text Markup Language, а проще говоря HTML это основной язык создания веб-страниц. В этой статье проведем самое общее знакомство с языком HTML.

Язык разметки гипертекста Hyper Text Markup Language

HTML–документ строится на основе тегов. Теги создают структуру документа. Основные теги парные. Это значит, что если есть открывающий тег типа , то должен быть и закрывающий тег со слешем . Стоит отметить, что бывают и не парные теги.

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

У HTML 4 три валидатора, у HTML 5 валидатор один. Структура тега HTML 5 , следующая:

Примеры:

  • для документов HTML 4.
  • единый для всех документов HTML5.
Структура HTML документа

HTML документ состоит из заголовка (header) и тела (body). Заголовок обрамляется тегами … . Тело документа обрамляется парными тегами … .

Пример: Основной каркас HTML 5 документа должен иметь следующую структуру:

Здесь место для заголовка Здесь текст документа

Структура заголовка

Заголовок … , включает несколько специальных тегов. Основные из них это теги: и .

Тег title

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

Тег meta

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

Для индексации веб страниц важны мета-теги description и keywords:

Замечу, что современные поисковики перестали «видеть» keywords, но это не отменяет их использования. Внутреннюю перелинковку никто не отменял.

Пример веб-страницы на HTML

Приведу элементарную веб-страниццу на HTML:

Моя любимая веб-страница Моя первая, а значит любимая веб-страница.

Изучая основы HTML, нельзя без изучения и использования специальных текстовых редакторов. Потому-что набирать любой текст страницы HTML нужно только в текстовом редакторе типа: NotePad++, Sublime Text2 и т.п. После набора документа его нужно сохранить с расширением htm или html. Cозданный файл открываем в любом браузере, которым вы пользуетесь.

Структура тела документа

Текст в документе (в тегах ) также разбивается на заголовки и части тегами.

Теги заголовка и абзаца

Текст, документа, может обрамляться специальными тегами.
Абзац выделяется тегами

Заголовки разделов текста выделяется тегами

,, , до

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

Пример применения тегов

Моя любимая веб страница

Обзац моей любимой веб-страницы

h1 Категория товара h2 Категория товара h3 Категория товара h4 Категория товара h5 Категория товара h6 Категория товара

Атрибуты тегов

Один из основных атрибутов тегов это атрибут форматирования, под названием align. Значение атрибута align:

  • left – выравнить по левому краю,
  • center – выровнять по центру,
  • right – выровнять по правому краю,
  • justify – симметричное выравнивание по двум краям.

Пример:

Моя любимая веб-страница

h1 Товар h2 Товар h3 Товар

Такое форматирование называется физическим и в принципе устарело. Для форматирования лучше и рекомендовано использовать таблицы каскадных стилей (CSS).

Списки

Современный стандарт HTML предусматривает создание трех основных видов списков:

  • Списки маркированные (unordered list);
  • Списки нумерованные (ordered list);
  • Список определений терминов (definition list).

Рассмотрим каждый из видов списков.

Списки маркированные

Маркированные списки задаются тегами (unordered list). Для создания каждого элемента списка применяется теги и (item list).

Пример:

  • Товар 1 из списка товаров
  • Товар 2 из списка товаров
  • Товар 3 из списка товаров

В список можно помещать теги загловков:

    Заголовок списка
  • Товар 1 из списка товаров
  • Товар 2из списка товаров
  • Товар 3 из списка товаров

Маркеры, то есть видимые значки перед элементами списка, могут меняться, а их внешний вид задается атрибутами type. Атрибуты type могут быть: circle (не закрашенный кружок), disk(закрашенный кружок) и square(квадрат закрашенный). По умолчанию используется атрибут disc. Пример использования маркера с атрибутом disk:

  • Товар 1 из списка
  • Товар 2 из списка
  • Товар 3 из списка

Списки нумерованные

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

В нумерованных списках используются пять атрибутов:

1-Цифры арабские; i- Римские строчные цифры; I- римские прописные цифры; a-Латинские строчные буквы; A-Латинские прописные буквы.

Пример нумерованного списка.

Список Товаров нумерованный

  • Товар1 из списка
  • Товар2 из списка
  • Товар3 из списка
  • Пример нумерованного списка с маркерами латинских строчных букв:

  • Товар1 из списка
  • Товар2 из списка
  • Товар3 из списка
  • Списки определений

    Для создания списков по типу термин-определение термина, применяются теги … (definition list) и … (definition description). Причем сам термин заключается в парный тег , а определение (объяснение) термина заключается в парный тег .

    Пример:

    Заголовок Термин 1 Объяснение термина 1 Термин 2 Объяснение термина 2

    Вложение списков

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

    Пример вложенных списков:

      Вложенные списки
    • Раздел товаров 1
    • Раздел товаров 1.1
    • Раздел товаров 1.2
    • Раздел товаров 2
    • Раздел товаров 2.1
    • Раздел товаров 2.2
    • Раздел товаров 2.3
    • Раздел товаров 3
    • Раздел товаров 3.1

    Таблицы в HTML

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

    Структура таблицы:

    //- парные теги контейнера таблицы;// //контейнер для создания строки таблицы//
    , который должен быть внутри тега//
    //тег создания одной ячейки таблицы. Этот тег должен быть внутри контейнера

    • Border – рамка шириной 2 px;
    • Cellpadding-расстояние между внешними границами ячеек таблицы;
    • Cellspacing-расстояние между внешними границами ячеек таблицы.
    • Height- высота таблицы;
    • Width- ширина таблицы.
    • Caption- тег для создания заголовка таблицы, может размещаться только внутри контейнера .

      Пример таблицы:

      Простая таблица
      1-1 1-2 1-3
      2-1 2-2 2-3

      Теги colspan и rowspan
      предназначены для объединения ячеек :

      Объединение ячеек в HTML-таблице

      Ячейки 1.1 и 1.2Ячейка 1.3
      Ячейка 2.1Ячейка 2.2Ячейка 2.3
      Ячейки 3.1 - 3.3

      Гиперссылки

      Основной атрибут этого тега href. Этот тег содержит адрес ресурса, на который ведет ссылка. Внутри тега-контейнера пишется текст ссылки.

      Якорь

      Чтобы сослаться на якорь, в другом документе, имя якоря с решеткой (#), пишется сразу после адреса стороннего документа, без пробела.

      Ссылка на Якорь 3 в Документе 009

      Рисунки в виде ссылок

      Рисунки и фото также можно делать в виде ссылок. Для этого рисунок вставляется в текст с тегом . Атрибута src этого тега имеет значение файла картинки:

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

      Продолжаем цикл статей об основах веб-языков и разработках в этой области. Ранее мы с основами гипертекстового языка HTML, его особенностями и методами разметки текста (тегами).

      Также нам стало известно, что язык HTML иесно взаимодействует с такими программными разработками, как стили CSS и Javascript и для чего необходимо такое сотрудничество языков. Сегодня мы в подробностях будем рассматривать структуру построения документов на HTML5. Блочное построение документа, его структура – тема сегодняшней статьи. Но вначале нужно понять, что такое HTML5.

      Язык программирования HTML5 (от английского HyperText Markup Language) – это пятая версия языка. Как и все предыдущие версии, предназначен для выстраивания структуры документов и представления их в сети. На данный момент версия HTML 5 находится в стадии разработки. Цель, преследуемая созданием пятой версии HTML – улучшение языка в области его работы с документами мультимедиа (аудио- и видеоприложениями).

      Добавление некоторых синтаксических новшеств, таких, как , и , позволит минимизировать логические и синтаксические ошибки при работе HTML5 с мультимедийными файлами. Также для обогащения семантического содержимого документа (семантика – изучение значения языковых единиц) вводятся и новые значение, такие, как , , и . Некоторые из атрибутов будут удалены или изменены. Вводятся новые возможности для обработки недопустимых документов, так что все браузеры будут способны работать с такого рода документами.

      Что такое DOCTYPE?

      Любой документ на HTML-языке всегда начинается именно с этого слова. Все предыдущие версии HTML публиковали это объявление приблизительно следующим образом:

      где PUBLIC обозначало доступность документа к прочтению, а DTD обозначает тип публикующихся документов (Document Type Definition). Определение DOCTYPE в HTML5 намного упрощено — < !DOCTYPE HTML>. Это все – разметка готова.

      Так за какие действия отвечает объявление DOCTYPE? Этот тег предназначен для сообщения браузерам о том, какой стандарт языка использовать – от определения версии HTML будет зависеть визуализация страницы в целом, её рендеринг. Стандарты разработки HTML строго регламентированы и следуют определенным правилам, поэтому работа с чужими кодами, их чтение и отображение в браузере за счет использования стандартов заметно упрощается.

      Первоначально объявление DOCTYPE переключало браузер в стандартный режим, и это позволяло пользоваться более новыми стандартами. Для тех документов, которые были написаны с применением старого стандарта, возможно использование режима совместимости, что позволяет добиться нормальной работы браузера. Новое объявление DOCTYPE на сегодняшний день поддерживается почти всеми существующими браузерами, одновременно переключая их в режим работы со стандартами. То есть, каждый вновь создаваемый документ должен содержать атрибут DOCTYPE и соответствовать разработанным стандартам. При этом проверяется весь код документа на его соответствие стандартам.

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

      Например:

      < !DOCTYPE HTML>< !-Любой текст, изображения, таблицы и т.д. -->

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

      Тег так называемая голова документа. Все необходимые данные о странице (как для работы браузера, так и информативные данные для разработчика) располагаются между и . Заголовок страницы, её код – например, UTF-8, meta-данные, такие, как ключевые слова, описание страницы, имя автора и т.д. – все подобные данные находятся именно между тегами и . Здесь же можно подключить внешние файлы, скрипты и библиотеки.

      Что такое meta-теги?

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

      1. Тип кодировки страницы – Charset. В большинстве случаев используется UTF8, но можно задействовать и другие кодировки, например – windows-1251, KOI-8, ISO и т.д. Такой атрибут, как Charset, определяет, какую кодировку использовать для чтения страницы. В HTML5 этот атрибут выглядит следующим образом:

      Как видите, новая версия языка намного упрощает управление страницей, облегчает и ускоряет её прочтение.

      Мета-тег Description, то есть – краткое содержание страницы. Например:

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

      Мета-тег, обозначающий заголовок страницы или записи на странице – title. Выглядит тег таким образом:

      Определение HTML и структура языка. | vashsite.com

      Отображается заголовок в названии открывающегося окна или вверху страницы.

      Мета-теги link и script используются для подключения к исполнению файлы стилей, внешние файлы и библиотеки. Например, таблицы стилей CSS и JavaScript, а также библиотека jQuery. Выглядят строки подключения этих файлов так:

      1

      То есть, для понимания сути этих строк можно представить себе такую ситуацию – файлы CSS и JavaScript на сервере лежат, но без этих строк в документе они просто не будут работать. Небольшой нюанс для использования этих тегов – файлы могут быть как на локальном сервере, так и на удаленном. В последнем случае в мета-тегах необходимо указать полный путь к файлам. В нашем примере мета-тег link используется для подключения файла CSS и использует ссылочные отношения (link relation). Эта подпись дает знать браузеру, что данный файл является файлом стилей. Тег rel имеет также множество других значений.

      Альтернативой первому варианту подключения файла стилей может быть такая строка:

      1 2 3 4 a { text-decoration : underline ; } p { color : #000000 ; }

      a { text-decoration: underline; } p { color: #000000; }

      Такой способ напрямую подключает стиль к странице, без подключения файла стилей.

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

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

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < !DOCTYPE HTML> Design Shack

      < !DOCTYPE HTML> Design Shack

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

      Язык гипертекстовой разметки HTML был предложен Тимом Бернерсом-Ли в 1989г. К моменту создания создания HTML существовал стандарт языка разметки печатных документов - SGML (Standart Generalised Markup Language), который и был взят в качестве основы HTML . Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка.

      В качестве элемента гипертекстовой базы данных для HTML был выбран обычный текстовый файл, который хранится средствами файловой системы операционной Среды ЭВМ.

      Таким образом, гипертекстовая база данных в концепции WWW -это набор текстовых файлов, написанных на языке HTML , который определяет:

      Форму представления информации (разметка);

      Структуру связей файлов между собой (гипертекстовые ссылки). Такой подход предполагает наличие еще одной компоненты

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

      В 1990г. появилась нулевая версия HTML 0.

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

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

      Вторая версия (HTML 2.0) фиксировала практику использования конструкций языка и явилась стандартом для построения WWW .

      Версия ++ HTML ++ представляла новые возможности по представлению научной информации и таблиц, улучшения стиля компоновки текста и изображений.

      Третья версия (HTML 3.0) упорядочила все нововведения и формализовала интерфейс пользователя гипертекстовой распределенной системы.

      В 1996г. выпущена новая версия языка: HTML 3.2 ,включающая средства для создания таблиц, конструкции языка Java , карты-изображения (располагающиеся на машине-клиенте) и новые типы форматирования текста.

      HTML - это текстовый язык, в котором инструкции по форматированию, называемые тэгами (tags), встроены в текст документа.

      Процесс создания HTML - документа заключается во включении тэгов внутрь неформатированного текста, несущего информационную нагрузку.

      Тэги HTML - это последовательности символов, начинающиеся знаком “меньше” ().

      Большинство функций форматирования в HTML специфицирует логические, а не физические стили. Например, тэги заголовков, которые обычно обозначают больший размер букв, не указывают, какой именно размер надо использовать. Браузер (который выполняет роль клиентской программы) выбирает размер текста для заголовков, превышающий обычный. Этот подход позволяет избавиться от платформы - документ, созданный на Macintosh может быть использован UNIX или Windows . Недостатком является то, что на разных платформах документ выглядит по-разному.

      Браузеры WWW при анализе предложений HTML работают по следующим правилам:

      Пробелы и другие “невидимые” символы игнорируются;

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

      Тэги форматирования могут быть написаны строчными и/или прописными буквами;

      Большинство тэгов форматирования пишутся парами. Открывающий тэг активирует данный эффект, а закрывающий -в ыключает его. Пара тэгов иногда называется контейнером, поскольку эффект, который они включают и выключают проявляется на тексте, расположенном внутри них. Например, для того, чтобы указать, что строка должна быть напечатана жирными символами, надо написать: < B > Эта строка будет напечатана жирным текстом

      Текст, находящийся внутри закрывающего тэга, всегда предваряется символом “обратная косая черта”. Среди базовых тэгов HTML исключением из этого правила являются: < BASE > (основная информация), < BR > (конец строки), < HR > (горизонтальная линейка), и < IMG > (изображение). Эти тэги существуют в единичном экземпляре.

      Каждый документ HTML имеет граничные тэги: < HTML > и . Эта пара тэгов заключает в себе все другие тэги Web -страницы и все информационное содержание документа. Фактически они декларируют, что все содержимое контейнера является кодом HTML . Тэг < HTML > должен располагаться в первой строке файла, а тэг - в последней.

      Каждый HTML -документ содержит заголовок документа и его тело.

      Заголовок документа идентифицирует документ. Он должен идти сразу после тэга < HTML > и начинаться с < HEAD >. Заканчивается заголовок тэгом .

      В заголовке документа обязательно должны присутствовать название документа и его базовый URL -адрес.

      Название документа располагается между тэгами < TITLE > и . Оно используется браузером и Web -сервером. Длина названия не должна превышать 40 символов. Название документа должно быть информативным, отражать содержание документа, чтобы его можно было идентифицировать. Название встречается в строке заголовка Internet Explorer , в списках журнала (History) и “Избранных стрницах” (Favorites).

      Базовый URL должен быть полным (абсолютным) и содержать протокол, адрес компьютера в Internet и имя файла. Он указывается в тэге < BASE HREF = “базовый_URL”>. Все остальные URL в документе могут указываться относительно базового. Например, если базовый URL имеет адрес: http://www.microsoft.com/products/office/word/datasheets.html и необходимо указать URL файла features . html , расположенного в каталоге / products / office / excel на том же сервере, можно указать: ../ excel / features . html , а не набирать полный адрес.

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

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

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

      Пример HTML -документа:

      < TITLE > Название документа

      < BASE HREF = “базовый_URL” >

      Тэги, используемые в теле документа, позволяют указывать следующие элементы разметки текста:

      Начало абзаца и конец строки

      Стили заголовков

      Физические стили -л огические стили

      Специальные символы.

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

      Текстовые указатели в графических браузерах обычно подчеркнуты и выделены цветом. В чисто текстовых браузерах они выделяются жирным шрифтом.

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

      Формат указателя:

      < A HREF = “ URL ”> текст указателя ,

      где буква А в тэге < A HREF > означает указатель (anchor), а HREF -гипертекстовую ссылку (Hypertext REFerence). Все, что находится между тэгами < A HREF = “ URL ”> и является текстом указателя, который выводится на экран подчеркнутым или жирным шрифтом.

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

      < A HREF = “ URL ”> < I > или

      < I > < A HREF = “ URL ”> Переход к более подробному изложению

      3. Язык гиппертекстов HTML

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

      Парные тэги выделяют некоторый фрагмент гипертекста - «заглавие», «тело» и т. д. Первый тэг начинает фрагмент, а второй - завершает его. В закрывающих дескрипторах перед именем ставится знак дроби / .

      Общая структура гипертекстов, записанных в языке HTML:

      гипертекст::= заглавие тело

      заглавие::= титул

      титул::= название

      тело::= текст

      В соответствии с правилами HTML гипертексты обязаны иметь «заглавие» и «тело». Как публикации гипертексты могут и должны содержать сведения об авторах и владельцах авторских прав (сайтов).

      В заглавии гипертекста должно содержаться «название», которое браузерами отображается на самой верхней строке экрана ЭВМ. Название должно выражать главную идею публикации (страницы). Гипертекст без названия - это как статья без названия.

      «Тело» гипертекста должно содержать тексты, таблицы, фотографии и иллюстрации. Отличие электронных гипертекстов от обычных бумажных текстов - включение гиперссылок, нажатие на которые вызывает загрузку новых гипертекстом.

      Пример гипертекста и результат его отображения браузером на экране ЭВМ:

      Гипертекст: Результат:

      Результат работы браузера - загрузка и вывод на экран ЭВМ гипертекста, хранящегося на сайте по адресу, указанному в окне браузера. Если гипертекст слишком велик, то браузер выводит кнопки протяжки гипертекста справа или внизу экрана.

      Размеры экранов ЭВМ имеют следующий спектр. Минимальный размер экрана - 640 х 480 пикселей. Далее стандартные размеры экранов - 800 х 600, 1024 х 768 и 1280 х 1024 пикселей. Поэтому на разных экранах гипертексты могут вы глядеть по-разному.

      Общая структура гипертекстов и их отображения на экране ЭВМ:

      Гипертекст: Результат:

      Текстовая часть может состоять из строк и абзацев с заголовками и без заголовок, со списками, таблицами и меню.

      тело::- текст

      текст::= заголовок { текст } |

      список { текст } |

      таблица { текст } |

      Заголовки в гипертекстах оформляются в следующем виде:

      заголовок::=

      название

      заголовок::=

      название

      заголовок::=

      название

      где тэги H2, ... , h6 задают размер заголовков по отношению к основному тексту.

      Абзацы в гипертекстах начинаются с дескриптора

      гипертекст |

      |

      Переход на новую строку и абзацах указывается дескриптором . Конец абзаца р> не обязателен, но необходим при использовании параметров в дескрипторе абзаца.

      Основной параметр абзацев - align - выравнивание текстов на экране ЭВМ. Выравнивание текстов производится браузерами автоматически в соответствии с размерами экрана ЭВМ:

      align=center- по центру экрана:

      align=left- к левому краю;

      align=right - к правому краю;

      align=justify - на весь экран.

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

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

      Для выделения слов в гипертекстах можно использовать жирный шрифт или подчеркивание с помощью следующих тэгов:

      Большие символы

      жирный шрифт

      курсив i>

      подчеркивание

      перечеркивание

      маленькие символы

      Шрифтовое выделение в гипертекстах задается тэгом : шрифты:: = текст font>

      Параметры шрифтов - их размер и тип. Размеры шрифта задаются параметром size = размер.

      Размер указывается явно от 1 до 6, либо в форме увеличения +1, +2 или уменьшении - 1, - 2.

      Тип шрифта задается параметром

      face = шрифт

      Здесь шрифт - один из стандартных шрифтов: «Times», «Courier» и т. д.

      Цвет шрифта задается параметром со1ог = цвет, где цвет - цвет выделенного фрагмента гипертекста. Например - выделение текста красным цветом:

      текст font >

      Стандартные названия цветов в языке НТМL:

      red - красный, green - зеленый, blue – синий, black-черный,

      white - белый, gold - золотой, yellow-желтый и т. д.

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

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

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

      Общая форма внешних гиперссылок:

      где «адрес» - это адрес гипертекста внутри сайта или на другом сервере сети Интернет.

      Примеры внешних гиперссылок:

      а)адрес сайта в Интернет:

      http: // bак2.naгоd.гu

      б)адрес страницы на сайте:

      http: // bак2.naгоd.гu / inrogl.html.

      в)адрес страницы в папке сайта;

      http: // bак2.naгоd.гu / tests / test2.html.

      тесты 2 а>

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

      Графические файлы обычно размешаются на сайтах и отдельной папке с именем image. Загрузка иллюстраций на экраны пользовательских ЭВМ проводится браузерами с помощью операторов :

      Общая форма операторов загрузки графических иллюстраций:

      Расположение иллюстраций на экране ЭВМ задается параметрами выравнивания: align=left- по левому краю, align=right - по правому краю экрана. Текст при этом обтекает иллюстрации соответственно справа пли слепа.

      Иллюстрации могут быть прижаты к верхнему или нижнему краю экрана, что задается параметрами: align =top - к верхнему краю, align=bottom - к нижнему краю экрана, либо выровнены по середине экрана - align = middle.

      Для расположения иллюстрации па экране ЭВМ в операторе загрузки могут быть указаны их ширина и высота:

      высота:= height= «высота»

      ширина:= width= «длина»

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

      Размеры иллюстраций обычно выбирают так, чтобы они были видны целиком даже на экранах ЭВМ с минимальным размером. Если кран ЭВМ больше, то иллюстрации будут занимать только его часть.

      Гипертекстовые списки - это перечни с нумерацией или выделением элементов списков. Все элементы начинаются тэгами

    • . Нумерованные списки начинаются тэгом и заканчиваются тэгом . Ненумерованные списки ограничиваются тэгами .

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

      Заключение

      HTML - это язык разметки гипертекстов (hypertext markup language).

      Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида.html.

      Язык HTML - это язык разметки гипертекстов, хранящихся на Web-серверах и отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

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

      Основные правила вложения элементов:

      Элементы не должны пересекаться;

      Блочные элементы могут содержать вложенные блочные и текстовые элементы;

      Текстовые элементы могут содержать вложенные текстовые элементы;

      Текстовые элементы не могут содержать вложенные блочные элементы.

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

      Список литературы

      «Экономическая информатика» /Под. ред. П.В. Конюховского и Д.Н. Колесова, СПб: Питер, 2000, 560с.

      Каймин В.А., «Информатика», учеб.4-е изд. М.:,2003-285с.

      «Информатика», базовый курс, 2-е издание /Под. ред. С.В. Симоновича, СПб.: 2003, 640с.