HyperText Markup Language (HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги (markup tags), называемые такжефлагами разметки , – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.

Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

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

Атрибуты тега записываются в следующем формате:

имя[="значение"]

Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.

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

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Структура HTML-документа

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

Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.

HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

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

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

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

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

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

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

Моя страничка Тело документа

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

Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).

Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами.


black (черный)		silver (серебряный)
maroon (темно-бордовый)		red (красный)
green (зеленый)		lime (известь)
olive (оливковый)		yellow (желтый)
navy (темно-синий)		blue (синий)
purple (фиолетовый)		fuchsia (фуксия)
teal (сине-зеленый)
gray (серый)		white (белый)

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

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

необязательно. Несколько стоящих подряд тегов<Р> не дают дополнительного пространства между абзацами.

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

Пример

Иосиф Бродский

Откуда к нам пришла зима,

не знаешь ты, никто не знает.

Умолкло все. Она сама

холодных губ не разжимает.

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

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

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

Название документа, задаваемое с помощью тега , не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков:H1(заголовок первого уровня),Н2, Н3, H4, Н5иH6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.Пример <TITLE> Заголовки

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

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

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

Теги	Применение	Результат
	Полужирный	Полужирный
	Курсив	Курсив
	Подчеркнутый	Подчеркнутый
	`Пишущая машинка`	Пишушая машинка
	~~Зачеркнутый~~	Зачеркнутый
	Большой
	Маленький	Маленький
	Верхний -- x^индекс	Верхний -- x индекс
	Нижний -- x_индекс	Нижний -- x индекс

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

жирный и подчеркнутый текст

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

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

Атрибут FACEпозволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Если нужного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию.

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

Атрибут SIZEслужит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2.

Атрибут COLORустанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.

Пример

Текст красного цвета и

большого размера

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

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

фрагмент документа

HREFздесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибутаHREFне обязательны.

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

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

Пример

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

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

Нумерованные (упорядоченные) списки используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится.

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

(закрывающий тег может отсутствовать).

Программирование

Алгоритмизация

Проектирование

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

Маркированный список начинается стартовым тегом

и завершается тегом. Каждый элемент списка начинается с тега

и завершается (необязательным) тегом

Пример

Программирование

Алгоритмизация

Проектирование

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

Дирекция

Иванов И.И.

Петров К.В.

Отдел маркетинга

Варшавская Е.Л.

Самсонов Д.М.

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

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

При формировании таблицы применяется несколько парных тегов.

. Указывают на начало и конец таблицы. Все остальные теги и текст таблицы должны находиться между этими двумя тегами.

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

<ТН> и . Определяют начало и конец ячейки шапки таблицы.

и . Отмечают начало и конец ячейки данных.

Кроме того, с помощью тега , размещаемого внутри тега

можно создать заголовок таблицы.

<ТН>Имя члена клуба

<ТН>Посещал клуб книголюбов?

<ТН>Дата посещения

<ТD>Нет данных

<ТD>Николай

Наличие атрибута BORDER в теге

Eлена

Heт

Да

говорит о том, что ячейки таблицы ограничены линиями.

В результате получится таблица:

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

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

Введение

§ 1. Общие сведения о языке разметки гипертекста (HTML)

§ 2. Структура HTML-документа

§ 3. Элементы дизайна Web-страниц

§ 4. Практическое применение языка разметки гипертекста HTLM

Заключение

Литература

Введение

В работе рассматривается язык разметки гипертекста HTML (Hypertext Markup Language); первая спецификация этого универсального и общедоступного языка разметки - HTML была утверждена в 1991 году. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.

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

Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей(CSS), иногда присутствуют Java-апплеты. По сути дела, можно вывести для современной Web-страницы: Web-страница=HTML+DHTML(JavaScript/VBScript, CSS, Java-апплеты)+CGI То есть на любой странице должна присутствовать HTML-верстка - расположение элементов дизайна текста и необходимые скрипты - как расширение HTML в области расположения и описания свойств различных объектов. CGI-скрипты могут играть первостепенную роль, формируя всю страницу, наполняя ее необходимыми, обновленными данными или второстепенную роль, - включаясь в нее.

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

1.обзор основных возможностей HTML

2.анализ практического применения HTML (на примере обучающих программ).

§ 1. Общие сведения о языке разметки гипертекста (HTML)

Гипертекст - текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д. Во время чтения такого текста (в соответствующей программе, его обрабатывающей и выполняющей соответствующие ссылки или действия) вы видите подсвеченные (выделенные) в тексте слова. Если наехать на них курсором и нажать клавишу или на кнопку (глаз) мышки, то высветится то, на что ссылалось это слово, например, другой параграф той же главы этого же текста. В WWW по ключевым словам можно попасть в совершенно другой текст из другого документа, войти в какую-нибудь программу, произвести какое-либо действие и т.д. В Internet в контексте WWW можно получать доступ к чему угодно, к telnet, e-mail, ftp, Gopher, WAIS, Archie, USENET News и т.п. В WWW можно ссылаться на данные на других машинах в любом месте сети, тогда при активации этой ссылки эти данные автоматически передадутся на исходную машину и вы увидите на экране текст, данные, картинку, а если провести в жизнь идею мультимедиа, то и звук услышите, музыку, речь. Это слегка напоминает Gopher, но фактически это принципиально другое и новое. В Gopher имеется жесткая структура меню, по который вы двигаетесь, как вам угодно. Эта структура не зависит от того, что вы делаете, какой документ пользуете и т.д. В WWW вы двигаетесь по документу, который может иметь какую угодно гипертекстовую структуру. Можно свободно организовать структуры меню в гипертексте. Имея редактор гипертекстов, можно создать любую структуру рабочей среды, включая документацию, файлы, данные, картины, программное обеспечение и т.д., и это не будет новое программное обеспечение, а просто гипертекст.

Современные программы разработки Web-серверов, такие как MS FrontPage или Web Pen для Windows, дают возможность даже новичку без всякого штудирования учебников легко создавать готовые странички. При этом cпециалист по созданию Web-сайтов, называемый Web-мастером, берет готовые файлы (тексты, таблицы, графику, базы данных, звук, анимацию, видеофильмы, программы) и с помощью кнопок и команд меню оформляет страницы сайта. Подобные программы, выполняя команды инструментальных и операционного меню, формируют гипертекст WWW-сервера.

Исходные текстовые, табличные и графические и другие объекты включаются в Web-site посредством тегов (tag = ярлык, этикетка). Тег - это последовательность символов, задающая

). положение объекта на странице сайта,

). внешний вид объекта или

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

Тег называют также управляющим маркером, флагом. Программы типа Web Pen сами расставляют теги, поэтому пользователь таких программ может не знать языка разметки гипертекста (HTML = HyperText Markup Language).

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

В-третьих, HTML непрерывно развивается, поэтому программы типа MS FrontPage все время отстают от новейших возможностей языка.

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

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

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

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

) на данном сайте, то есть в папке, содержащей все htm-файлы, графику, звук, анимацию, видеофильмы, программы;

) вне сайта в других в папках на данном компьютере;

) в системе World Wide Web, то есть на других Web-серверах;

) в Internet на серверах других типов(FTP, Gopher).

Применение механизма гипертекстовых ссылок создает всемирное единое информационное пространство, из которого сотрудники торговой фирмы получают нужные им сведения. Стандарт HTML, как и все другие стандарты, имеющие отношение к Web, разрабатывается под эгидой консорциума World Wide Web Consortium (W3C). Спецификации стандартов и проекты новых предложений можно найти по адресу #"justify">Записанные в методичке HTML-тексты содержат сведения, необходимые для создания Web-сайтов. Это позволяет увеличить количество информации, полезной для студентов. Принятая форма изложения имеет еще одно достоинство: обучающийся привыкает читать htm-файлы. Это необходимо для анализа и совершенствования готовых сайтов.

гипертекст hypertext markup language

§ 2. Структура HTML-документа

документ состоит из текстов, графики, таблиц и других объектов, которые представляют собой содержимое документа. Программа просмотра использует при этом теги, которые записаны в HTML-документе для задания структуры расположения объектов и их внешнего вида. Чаще всего HTML-теги записываются парами (начальный и конечный теги), между которыми размещаются текст и другие объекты документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/), так называемый слэш. Оформление HTML-документа просто: он начинается тегом и заканчивается тегом. Имя тега может быть записано как строчными, так и прописными буквами.

Запустить приложение Блокнот, используя кнопку Пуск на панели задач

ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ

Разместить на рабочем столе одновременно два окна: окно MS Word с данной методичкой и окно Блокнота.

Набрать в поле редактирования Блокнота следующий текст:

Данную программу, как и все последующие, можно не набирать на клавиатуре,а скопировать в поле редактирования Блокнота из этой программы используя команду операционного меню ВИД => ИСТОЧНИК. Неиспользуемые в программаж сноски набраны черным шрифтом.

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

А этот текст будет записан курсивом.

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

В окне рабочего каталога выполнить двойной щелчок левой кнопкой мыши по значку только что созданного документа ris1a.htm и с помощью MS Internet Explorer просмотреть получившийся документ.

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

§ 3. Элементы дизайна Web-страниц

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

Заголовок страницы. Заголовок Web-страницы представляет собой информацию. заключенную внутри "цемента (секции) HEAD.

это элемент TITLE определяет текст, который появляется в заголовке окна броузера во время просмотра страницы. Этот текст не только служит подсказкой, но может использоваться и поисковыми машинами для анализа страниц. Су шествует три способа для поиска страниц в Интернете па основе текстовых данных: по ключевым словам элемента МЕТА, по тексту, разметенном) на странице. и по строке заголовка внутри элемента TITLE.STYLE -и - LINK -. Тег STYLE тоже должен располагаться внутри элемента HEAD, Если вы хотите разобраться, какие нестандартные форматы используются на странице, надо просмотреть содержимое этого элемента. В нем будут указаны необходимые форматы. Если таких форматов нет, значит стили страницы записаны в отдельном файле. Ссылка на такой файл должна находиться в элементе LINK.Секция заголовка может содержать несколько цементов МЕТА, каждый из которых отвечает за определенный набор параметров. Использование элементов МЕТА не является обязательным, но некоторые настройки могут быть весьма важны. Так, например, известно, что броузер в некоторых случаях способен автоматически определить вид кодировки страницы. Пользователь, работая с броузером, может выбрать в меню определенную кодировку. Чтобы исключить неопределенность при просмотре конкретной страницы, на ней целесообразно разместить указание на кодовую страницу.Информация, сосредоточенная в элементах МЕТА, определяет общие настройки Web-страницы и называется профилем. Профили можно хранить в отдельных файлах и присоединять к определенной странице при помощи специального атрибута элемента HEAD: <HEAD prorIle=«lJRL»> Стандартные атрибуты. Существует ряд атрибутов, которые moist использоваться во многих элементах. Часть этих атрибутов очень важна для конструирования Web-страниц, а часть подходит только для решения определенных задач.Атрибут id выполняет функции уникального имени элемента. В зависимости от типа элемента, этот атрибут выполняет различные функцииАтрибут classid задает программу или объект, которые могут использоваться в определенных элементах.Атрибут style может использоваться со многими элементами. Он предназначен ятя определения формата конкретного элемента и может принимать самые разные значения.Похожие функции выполняет атрибут class. Его можно указывать, если в секции HEAD расположен элемент STYLE или использована ссылка на каскадную таблицу стилей (см. ниже раздел «Таблицы стилей»).Атрибут align используется для выравнивания текста, объектов или элементов целиком. Выравнивание может выполняться относительно границ окна, рамки таблицы и т. д. Каждый элемент позволяет указывать определенные значения для этого атрибута. В общем случае значения могут быть такие:left - выравнивание по левому краю;right - выравнивание по правому краю;justify - выравнивание по ширине (для текста);center - выравнивание по центру (по горизонтали):middle - выравнивание по центру (по вертикали):top - выравнивание по верхней границе;bottom - выравнивание по нижней границе.Атрибут lang определяет, на каком языке набран текст внутри текущего элемента: lang - «код языка» Форматирование текста. Текст - единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные. Но для форматирования текста существует большое количество элементов. Большинство из них, кроме специальных, поддерживает стандартные атрибуты: id, class, lang. dir, title, sty le и атрибуты событий.Изначально в HTML было введено меньше возможностей для форматирования текста, чем в обычные текстовые редакторы. В результате авторам гипертекстовых документов приходилось прибегать к различным ухищрениям, чтобы придать тексту заданный вид. Сейчас положение изменилось, но все дополнительные возможности осуществляются за счет применения таблиц стилей. Например, только с помощью свойства text-indent можно задать величину отступа первой строки абзаца.Форматировать текст можно и с помощью традиционных элементов: выделять фрагменты курсивом, полужирным, выбирать шрифт и т.д. Рассмотрим эти элементы. Для них могут быть использованы стандартные атрибуты id. class, lang, dir. title, style, атрибуты событий, а также атрибуты, определяющие уникальные свойства определенных элементов.Элемент абзаца paragraph - один из самых полезных. Он позваляег использовать только начальный тег, так как следующий элемент Р обозначает не только начато следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца можно использовать и конечный тег. В некоторых случаях начальный тег удобно ставить в конце строки: он не только обозначит конец абзаца но и выполнит функцию тега (разрыв строки). Вместе с элементом абзаца можно<ЕМ> </ет> и <DFN> </dfn> элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны но своему действию элементу 1, то есть в большинстве случаев позволяют выделить текст курсивом.С точки зрения дизайна документа эти элементы ничем особенным не отличаются. Они могут пригодиться только для того, чтобы единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста. находящиеся в разных частях документа или даже на разных страницах. Разработчик, в этом случае, не может точно знать, какой именно шрифт будет использован: это определяется каждым броузером по-своему. Но он может быть уверен, что все фрагменты текста будут отформатированы одинаково. В языке можно найти еще несколько элементов, которым можно дать такую же характеристику.Эти и другие элементы содержания могут иметь стандартные атрибуты: id. class, lang, dir, title, style, атрибуты событий.BLOCKQUOTED blockquote- -обозначение цитаты. Этот элемент требует наличия конечного тега Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим элементом заключается только в отступе слева, поэтому элемент может быть использован в самых разных случаях. Этот элемент имеет собственный нестандартный атрибут, который позволяет указать источник цитирования:=« Л0ресоокулшта->крва1кттн11ка""11ре;1!ю.гаж!ся, что адрес задается в виде URL. Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы. К обычным таблицам таблицы стилей не имеют никакого отношения. В общем случае шаблон таблицы стилей выглядит так:Элемент. имя стиля (Свойство 1: значение; свойство 2: значение:... j) В результате для определенного элемента задается набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности. Одна из важнейших особенностей стилевого оформления заключается в том. что преобразованию подвергаются все элементы, заключенные внутри цемента с заданным стилем. Так. определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием.<МЕТА http-equi\=«Content-Style-Type» content-»text/css»> Броузер получит информацию, какой язык определения стилей использован. «CSS» в данном случае означает «каскадная таблица стилей» (Cascading Style Sheets). Это одновременно стандарт и язык, расширяющий традиционный HTML. В настоящее время существует две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. «Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько иные.В этом случае для всей страницы создаются новые стили для заголовков первого и второго уровня. Для элементов CODE выбирается шрифт и цвет фона.Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берёт на себя. Гели список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения, В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяю! общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.Самым простым является ненумерованный список (unordered list). Его шаблон имеет вид <L1>ПУНКТ<L!> ПУНКТ!<L1> ПУНКТ 1<1.1> ПУНКТ1 <ДЛ.> Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов.Тго структура нумерованного списка (ordered list) похожа на предыдущую: <OL><LI>ПУHKTl<LI> ПУНКТ1<[Л>ПУНКТ1<1Л> ПУНКТ 1</OL> Один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон: Или такой: <А hre>f=«Aдpec ссылки» <IMCi «гс= «Ссылка на рисунок» </а> Первый шаблон используется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или на метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. На нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file. то есть содержать указание на протокол.Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из разновидностей Интернета, В этом смысле можно сказать, что Интернет - это как бы несколько сетей в одной. У каждой из этих частных сетей существуют свои правила доступа достоинства, недостатки, свои приверженцы и противники. Но все пользователи используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Они могут служить для связи голосом, передачи факсов, межкомпыотерной связи и т.д.как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например ftp). Существуют следующие схемы доступа:е -доступ к файлу на локальном диске;-доступ к архивам файлов но прогокол> передачи файлов (tile transfer protocol):- доступ к WWW;- отправка сообщения по электронной почте;- доступ к новостям USENET:- доспи к новостям USENET по протоколу NNTP:- подключение но протоколу telnet:. - подключение к системе поиска WAIS. Когда гиперссылка используется для указания адреса электронной почты, её выбор обеспечивает не переход к новому документу, а запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку размешают в конце страницы для обеспечения связи с Web-мастером или автором страницы.В том случае, когда используются переходы внутри текущей страницы, на ней должны быть расставлены метки.В больших сайтах часто используются метки для перехода к определенной части некоторой страницы: <А name-» http: Адрес Файл. 1пт1#мегка»> </а> Текст подсказки <А Ьге1=«£метка»> Текст для щелчка </а> Для элемента А предусмотрены различные атрибуты. Атрибут hreflang, по аналогии с атрибутом lang. позволяет указать язык, который используется на адресу мой странице.В структуру гиперссылок заложена возможность создания сложных текстовых документов, доступных через Интернет. Предполагается, что такие документы будут состоять из многих HTML-страниц с перекрестными ссылками. Чтобы пользователь мог эффективно управлять документом, броузер должен оптимизировать работу с отдельными страницами, например, загружать страницы, которые могут понадобиться пользователю, в фоновом режиме. Для этого необходимо снабдить страницы информацией о назначении ссылок.Для решения этой задачи гиперссылки подразделяются на прямые (forward) и обратные (reverse). Ссылка, вызывающая переход с текущей страницы, называется прямой. Соответственно, при помощи броузера или другой ссылки может быть выполнен и обратный переход. Для определения более точного типа ссылки используются два атрибута (один для прямых. другой - для обратных ссылок). Определены следующие стандартные типы ссылок: alternate - другая версия документа; sty lesheet - таблица стилей в виде отдельного файла;Фрейм - это определенная область, в которую грузится страничка. Таким образом то, что вы видите, собирается из нескольких HTML. Собственно, примерно то же осуществляет и SSI, и PHP и много других языков программирования, скриптов и т.п.Фреймы придуманы еще на заре становления HTML для облегчения создания страничек большого размера. Фреймы позволяли хранить, например, меню в отдельном файле, и разом - не перелопачивая десятки, сотни и у некоторых даже тысячи html-страничек ради того, чтобы добавить или убрать пункт меню. Очень удобно, казалось бы..., но - система фреймирования почему-то не всегда (я бы даже сказал, - почти никогда!) правильно воспринимается большинством поисковиков. Рейтинг фреймовых страничек в большинстве поисковиков меньше, чем точно тех же страничек, с совершенно тем же содержимым, но со встроенным меню без фреймовЭксперимент со страничками показал, что в самом низу списка оказалась страничка на фреймах, выше всех была страничка на SSI технологии и PHP инклюдах. По сути, эти две технологии, с успехом заменившие устаревшие фреймы, показали равную находимость и удобство. Не говоря уж о куда большей простоте использования. Но большинство разбирающихся в этих вопросах программеров дружно указали на превосходство PHP перед SSI в плане удобства их использования для сервера.Графика делает сайт привлекательным и понятным. В файле grafika.htm записан следующий текст.Тег <img src='/monitors/yazyk-gipertekstovoi-razmetki-html-sredstva-gipertekstovoi-razmetki/' loading=lazy>записывают в том месте, которое предназначено для размещения диаграммы, графика, рисунка или фотографии. В данном примере рисунок появится в левом верхнем углу экрана, так как он - единственный элемент тела HTML-документа.Справа от знака равенства записывают имя gif-файла, хранящего графический объект. В данном примере это имя horse.gif записано без указания пути, так как файлы horse.gif и grafika.htm находятся в одном каталоге (в одной папке). Если бы файл horse.gif находился в папке dir1, вложенной в папку, содержащую файл grafika.htm, то справа от знака равенства следовало бы записать dir1/horse.gif.Для размещения графики на сайте необходимы gif- или jpg-файлы. Но графический редактор Paint, поставляемый фирмой Microsoft, не позволяет создавать файлы с расширением.gif или.jpg. Поэтому можно использовать, например, графический редактор LView Pro, работающий под операционными системами Microsoft Windows 95 и Windows NT. Редактором LView Pro следует прочесть bmp-файл, созданный посредством Paint, и сохранить его как gif- или jpg-файл.Создадим сначала bmp-файл. Для этого нужно предварительно уяснить, а затем выполнить следующие действия.Запустить приложение Paint, используя кнопку Пуск на панели задач: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => Paint Вернуться в окно текстового процессора MS Word, щелкнув мышью по кнопке на панели задач.Создать новое окно текстового процессора MS Word, используя команду операционного меню {Окно, Новое окно} или щелкнув мышкой по кнопке инструментального меню Стандартное.Командой операционного меню {Окно, Упорядочить все} разместить на дисплее сразу два окна: с методичкой и новое. Курсор должен находиться в новом окне. Командой операционного меню MS Word {Вставка, Рисунок...} открыть диалоговую панель Вставить рисунок.Из списка wmf-файлов в левой части диалоговой панели выбрать щелчком мыши файл 1stplace.wmf. Рассмотреть рисунок, появившийся в правой части диалоговой панели.Повторяя действия, указанные в пункте 6, просмотреть несколько рисунков. Выбрать понравившийся многоцветный рисунок, щелкнув по кнопке OK в левой нижней части диалоговой панели. Этот рисунок появится в новом окне MS Word.Расположить указатель мыши на рисунке и щелкнуть левой клавишей мыши. Скопировать рисунок в буфер обмена, используя команду операционного меню {Правка, Копировать} или щелкнув мышкой по кнопке инструментального меню Стандартное.Закрыть окно с рисунком, используя клавишную команду . Сделать максимальными размеры окна с методичкой, щелкнув мышью по кнопке максимизации размеров этого окна.Перейти в окно графического редактора Paint, щелкнув мышью по кнопке на панели задач.Вставить рисунок из буфера обмена, используя команду операционного меню Paint {Edit, Paste}.Редактором LView Pro прочтем bmp-файл, созданный посредством Paint, и сохраним его как gif-файл, уяснив и выполнив для этого следующие действия.Запустить проводник, используя кнопку Пуск на панели задач:ПУСК => ПРОГРАММЫ => ПРОВОДНИК На диске D: открыть папку LWPRO и запустить редактор LView Pro двойным щелчком на имени файла Lviewpro.exe.Прочесть bmp-файл, созданный посредством Paint, используя команду операционного меню LView Pro {File, Open}.Цвета в документах HTML могут задаваться двумя способами - указанием кода цвета или указанием названия цвета на английском языке. При первом способе код цвета записывается в виде шестнадцатеричного числа, содержащего шесть цифр: первые две цифры задают интенсивность красного цвета, вторые - зеленого, третьи - синего. При втором способе используются следующие названия цветов: black (черный), maroon (темно-красный), green (зеленый), olive (оливковый), navy (синий), purple (фиолетовый), teal (зеленовато-синий), gray (серый), silver (серебристый), red (красный), lime (известковый), yellow (желтый), blue (голубой), fuchsia (ярко-малиновый), aqua (морской волны) и white (белый).Создадим документ, содержащий таблицу, ячейки которой окрашены в разные цвета. Фон документа установим черным. Документ наберем (или отредактируем) Блокнотом и запишем в рабочую папку в файл colortab1.htm. <TH> - это так называемый тег заголовка таблицы. Фактически он объявляет строку, в которой должен быть записан заголовок таблицы. В данном случае он имеет атрибут COLSPAN, определяющий, сколько ячеек из следующей строки должен перекрыть этот заголовок. Тег определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря, в тегах можно использовать несколько атрибутов, но тег является исключением - для каждого изменения свойств текста используется отдельный тег , например:Создайте в рабочей папке документ font1.htm, в тело которого включите текст приведенного выше примера и просмотрите результат. Ускорить выполнение задания можно путем копирования этого примера в текст, создаваемый Блокнотом. Для этого следует выделить пример в методичке, протащив указатель мыши (при нажатой ее левой клавише) по полосе выделения слева от трех строк примера. Используя как образец документ colortab1.htm, создайте в рабочей папке документ table3.htm, содержащий таблицу с заголовком "Координаты ячеек" и с 16-ю клетками (4 строки по 4 ячейки), в которых записаны координаты этих клеток по принципу С1К1 (где С - строка, К - колонка с соответствую-щими номерами). Фон документа должен быть сине-зеленым, фон строки заголовка - белым, текст строки заголовка - желтым. Текст в ячейках таблицы должен быть черным на сером фоне. Ячейки таблицы должны иметь границы. § 4. Практическое применение языка разметки гипертекста HTLM Основным принципом формирования интерактивной обучающей среды при всех концепциях обучения, как показывает практический опыт, является гипертекстовый принцип структурирования и представления информации. Разрабатываемая в литературе теория гипертекста, а также имеющийся опыт по созданию гипертекстовых структур позволяют наметить ряд его сущностных, структурно значимых понятийных признаков. Вспомним историю формирования этого явления. Первоначально гипертекстовые технологии привлекли внимание преподавателей как средство интеграции текстовой информации и информации, представляемой в других модальностях - мультимедиа (звук, видео, анимация и т.д.). Затем авторы - разработчики компьютерных обучающих программ открыли для себя гипертекст как средство моделирования когнитивных процессов и тем самым как новое средство управления этими процессами. Симптоматично, что сама идея гипертекста (хотя и без введения именно этого термина) была впервые, как утверждается во всех западных учебниках по истории этого понятия и как принято сейчас считать в интернетовском информационном сообществе, изложена в статье Ванневара Буша, озаглавленной следующим образом: «As we may think»; именно от этой работы начинается отсчет эпохи гипертекста как некоторого особого явления в теории информации, лингвистике и когнитивной психологии, а также в сфере художественного слова нового типа (hypertext fiction).В настоящее время термин «гипертекст» применяют к разным объектам: 1) так называют особый метод построения информационных систем, обеспечивающий прямой доступ к данным с сохранением логических связей между ними; 2) это определенная система представления текстовой и мультимедийной информации в виде сети связанных между собой текстовых и иных файлов; 3) это особый универсальный интерфейс, отличительными чертами которого является его интерактивность и необычайная дружелюбность по отношению к пользователю. Разработка гипертекстовых систем для целей обучения была начата за рубежом в 80-е годы, аналогичные работы в России до последнего времени находились в пилотной стадии. В 2004 г. у нас наблюдается экспоненциальный рост числа гипертекстовых систем, предлагаемых для дистанционного обучения, что соответствует мировым тенденциям в этой области.Учебные материалы, подготовленные на основе мультимедийных гипертекстовых технологий, обладают рядом очевидных преимуществ как для учителя, обеспечивающего, направляющего и контролирующего процесс обучения, так и для обучаемого: прежде всего, это принципиально новые возможности презентации учебного материала, связанные с использованием зрительной и аудитивной наглядности. Необходимо также отметить, что сама гипертекстовая структурированность учебного материала обладает собственным дидактическим значением, так как является значительно более гибкой формой подачи информации, позволяющей в максимальной степени учитывать индивидуальные потребности обучающегося. По сути дела каждое обращение к автоматизированному обучающему курсу, основой которого является база данных, выполненная в гипертекстовом формате, является процессом создания своего собственного учебного текста, наиболее адекватно соответствующего данной актуальной задаче, вследствие чего процесс обучения приобретает творческий аспект. Устанавливая логические связи информационных блоков, выстраивая информацию, следуя собственной логике ее осмысления, обучающийся по сути дела становится соавтором, и, может быть, это и становится наиболее привлекательной стороной использования подобных курсов в процессе обучения. Однако необходимо подчеркнуть, что ключевой проблемой в такой системе становится проблема организации «навигации», свободная или навязываемая автором-разработчиком стратегия исследования данного информационного поля, которая к тому же должна решать и собственно дидактические задачи. В исследованиях по теории гипертекста вопросы организации «чтения» гипертекстовой информации рассматриваются в совокупности с формальным анализом структуры гипертекстового поля, возможностями технических средств управления «навигацией», а также особенностями когнитивных стратегических предпочтений человека (вновь подчеркнем, что последнее остается до сих пор наименее изученной областью). В качестве достаточно хорошо проработанных формализованных стратегических моделей часто выступают модели, лежащие в основе систем автоматизированного поиска и систем автоматической обработки запросов.а) на первом, самом высоком уровне, используется жанр максимально коротких аннотаций для всех базовых терминологических понятий,б) на следующем уровне дается предметное истолкование тех или иных понятий,В теории гипертекста для формализации этих параметров была разработана специальная гипертекстовая метрика, которая включает два базовых параметра: степень информационной компактности и индекс стратификации. Высокий уровень компактности характеризует такие гипертекстовые структуры, в которых на любой из информационных блоков можно с легкостью попасть из любого другого блока (обычно это обеспечивается многочисленными перекрестными ссылками). Чрезмерно высокая компактность может привести к полной дезориентации обратившего к гипертексту читателя, а также чрезвычайно затрудняет процесс отслеживания преемственности понятий. Низкая информационная компактность чревата выпадением из поля зрения читателя гипертекста отдельных узлов, которые могут нести важную для формирования каких-то понятий информацию или же вообще делать отдельные узлы во многих случаях недоступными. Индекс стратификации позволяет оценить допустимую степень свободы выбора последовательности чтения гипертекстового документа. Именно этот последний параметр представляется нам особенно значимым параметром для такой функционально-стилистической разновидности гипертекста, как обучающий гипертекст.В подготовленных учебных компьютерных материалах было экспериментально получено оптимальное количество допустимых ссылок в расчете на один абзац текста (не более 1 - 2 ссылок), а также рекомендуемый объем текстовой информации: при выводе на экран компьютера он должен занимать не более 1,5 или 2-х экранов. Допустимая и рекомендуемая иерархическая глубина связей устанавливалась в соответствии с данными теории восприятия информации и когнитивной лингвистики. Предполагалось, что в зависимости от индивидуальных когнитивных стилей усвоения информации она может колебаться от 2 до 5 шагов. В ряде психологических и психолингвистических работ, посвященных теории гипертекста, были предприняты попытки выявления базовых стратегий, которые оказывались предпочтительными для разных групп людей; полученные данные позволяют наметить три основных типа поведения в гипертекстовом пространстве, их принято в англоязычной традиции называть depth-first navigation, breadth-first navigation и два варианта промежуточной стратегии (random navigation), совмещающей в определенных долях два первых подхода). Однако нельзя не отметить, что все без исключения исследователи подчеркивают необходимость дополнительных экспериментов в этом направлении для установления степени достоверности полученных данных. Несомненно, этот вопрос нуждается в дальнейшем, более глубоком изучении, поэтому в данной работе руководствовались преимущественно интуитивными представлениями об оптимальной структуре связей, которые были продиктованы спецификой лежащего в основе гипертекста материала.Контрольное тестирование и устный опрос являются одними из наиболее широко используемых и хорошо разработанных средств проверки знаний в высшем образовании. Классический тест представляет собой последовательность достаточно простых вопросов. На каждый вопрос имеется простой ответ, который может быть формально проверен и оценен как правильный, неправильный или частично правильный (например, неполный). Вопросы обычно классифицируются по типам соответственно типу ожидаемого ответа. Классические типы вопросов делятся на вопросы типа [да/нет], вопросы типа [много вариантов/один ответ] (МВ/ОО), вопросы типа [много вариантов/много ответов] (МВ/МО) и вопросы открытого типа с текстовым или числовым ответом. Более продвинутые типы вопросов включают вопросы на соответствие, вопросы на правильную последовательность, вопросы на указывание (ответ - одна или несколько областей на рисунке), а также графические вопросы (ответ - простой граф). Кроме этого, каждая предметная область может иметь некоторые специфические типы вопросов.Варианты поддержки на стадии создания обычно зависят от технологии, используемой для хранения отдельного вопроса в системе. В настоящее время, нам известно два различных способа хранения вопроса: в формате представления и во внутреннем формате. В контексте Web-основанного обучения, хранение вопроса в формате представления означает его хранение как части HTML-кода (обычно в виде HTML-формы). Такие вопросы могут также называться статическими вопросами. Они являются «черными ящиками» для WBE-системы. Система может представлять статические вопросы только «как есть» (в том виде, в котором они были созданы). Создание вопросов этого типа часто не поддерживается WBE-системой, так как это может быть сделано в любом HTML-редакторе.Тип интерактивной технологии, используемой для получения ответов обучаемого, является одной из наиболее важных характеристик WBE-систем. Он определяет всю функциональность на стадии выдачи вопросов, а также влияет на стадии создания и оценки вопросов. В настоящее время, различают пять технологий: HTML-ссылки, HTML/CGI-формы, скриптовые языки, внедрение (plag-in) и Java.ссылки - самая простая технология взаимодействия, реализующая набор возможных ответов как список HTLM-ссылок. Каждая ссылка связана с определенной страницей обратной связи. При использовании этого подхода возникает две проблемы: сложность создания вопросов (логика вопроса должна быть жестко встроена в гипертекст курса) и поддержка всего двух типов вопросов: [да/нет] и [МВ/ОО]. Эта технология использовалась в основном на заре Web-основанного обучения, когда более продвинутые технологии взаимодействия, такие как CGI, JavaScript или Java еще не были разработаны.Наиболее популярной технологией Web-тестирования, используемой в настоящий момент многочисленными коммерческими и университетскими системами является комбинация HTML-форм и CGI-скриптов. HTML-формы чрезвычайно удобны для представления основных типов вопросов. Вопросы типа [да/нет] и [МВ/ОО] представляются наборами иконок, списками выбора, всплывающими меню. Вопросы [МВ/МО] представляются списками множественного выбора или наборами переключателей. Вопросы открытого типа реализуются в виде полей редактирования. Более продвинутые вопросы, такие как вопросы на соответствие или на правильную последовательность, также могут быть реализованы, при помощи форм. Кроме того, скрытые поля могут использоваться для хранения дополнительной информации о тесте, в которой может нуждаться CGI-скрипт. Значительные преимущества от использования технологии «стороны сервера» (к которой относится и технология «форма/CGI») и схожей с ней технологии «карты стороны серверной» возникают при реализации графических вопросов на указывание. Заключение По итогам решения задач работы получены следующие результаты:HTML - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из броузера кодом. Вот этот-то невидимый код и есть язык разметки HTML.HTML - это не язык программирования, - он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки.Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает броузер. Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально. Основная причина появления в последнее время большого количества Web-серверов заключается в том, что они сравнительно просты в установке и становятся все большим инструментом, который можно использовать в бизнесе. Вторая причина - появление большего количества улучшенных HTML-редакторов и конвертеров текста, позволяющие создавать новые Web-страницыВ отношении сферы применения можно сказать следующее. Будущее Web также связанно с увеличением скорости передачи данных в Интернет, так как Web неразрывно связан с Интернет.Вероятно, останется проблема несовместимости между броузерами и Web-серверами, так как компания Netscape Communications несколько расширила HTML, из-за чего не все броузеры отображают документы, написанные в новом формате HTML. Литература 1.Бройдо В.Л. Вычислительные системы, сети и телекоммуникации СПб, Питер 2002- 464 с. 2.Информатика /под редакцией С.В.Симоновича. СПб, Питер 2001- 400 с. .Кирмайер М. Информационные технологии. СПб.: Питер, 2003 - 443 с. .Мэтьюз Дж. Web - сервер. СПб.: Символ, 1998 - 356 с. .Олифер В. Г., Олифер Н.А. Компьютерные сети. СПб.: Питер, 2005 - 864 с .Олифер В. Г., Олифер Н.А. Сетевые операционные системы. СПб.: Питер, 2003 - 539 с. 3. Язык гиппертекстов HTML Гипертексты должны начинаться со слова и заканчиваться словом. Слова в угловых скобках в языке HTML называются тэгами, а в программировании - дескрипторами. Почти все тэги HTML парные - и, и и т.д. Парные тэги выделяют некоторый фрагмент гипертекста - «заглавие», «тело» и т. д. Первый тэг начинает фрагмент, а второй - завершает его. В закрывающих дескрипторах перед именем ставится знак дроби / . Общая структура гипертекстов, записанных в языке HTML: гипертекст::= заглавие тело заглавие::= титул титул::= название тело::= текст В соответствии с правилами HTML гипертексты обязаны иметь «заглавие» и «тело». Как публикации гипертексты могут и должны содержать сведения об авторах и владельцах авторских прав (сайтов). В заглавии гипертекста должно содержаться «название», которое браузерами отображается на самой верхней строке экрана ЭВМ. Название должно выражать главную идею публикации (страницы). Гипертекст без названия - это как статья без названия. «Тело» гипертекста должно содержать тексты, таблицы, фотографии и иллюстрации. Отличие электронных гипертекстов от обычных бумажных текстов - включение гиперссылок, нажатие на которые вызывает загрузку новых гипертекстом. Пример гипертекста и результат его отображения браузером на экране ЭВМ: Гипертекст: Результат: Результат работы браузера - загрузка и вывод на экран ЭВМ гипертекста, хранящегося на сайте по адресу, указанному в окне браузера. Если гипертекст слишком велик, то браузер выводит кнопки протяжки гипертекста справа или внизу экрана. Размеры экранов ЭВМ имеют следующий спектр. Минимальный размер экрана - 640 х 480 пикселей. Далее стандартные размеры экранов - 800 х 600, 1024 х 768 и 1280 х 1024 пикселей. Поэтому на разных экранах гипертексты могут вы глядеть по-разному. Общая структура гипертекстов и их отображения на экране ЭВМ: Гипертекст: Результат: Текстовая часть может состоять из строк и абзацев с заголовками и без заголовок, со списками, таблицами и меню. тело::- текст текст::= заголовок { текст } | список { текст } | таблица { текст } | Заголовки в гипертекстах оформляются в следующем виде: заголовок::=<h2>название</h2> заголовок::=<h3>название</h3> заголовок::=<h6>название</h6> где тэги 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. Загрузка иллюстраций на экраны пользовательских ЭВМ проводится браузерами с помощью операторов <img>: Общая форма операторов загрузки графических иллюстраций: Расположение иллюстраций на экране ЭВМ задается параметрами выравнивания: align=left- по левому краю, align=right - по правому краю экрана. Текст при этом обтекает иллюстрации соответственно справа пли слепа. Иллюстрации могут быть прижаты к верхнему или нижнему краю экрана, что задается параметрами: align =top - к верхнему краю, align=bottom - к нижнему краю экрана, либо выровнены по середине экрана - align = middle. Для расположения иллюстрации па экране ЭВМ в операторе загрузки могут быть указаны их ширина и высота: высота:= height= «высота» ширина:= width= «длина» Размеры иллюстраций задаются числом точек экрана (в пикселах) либо в процентах от высоты или ширины экрана ЭВМ. В последнем случае на разных экранах иллюстрации будут иметь различные размеры. Рассчитав расположение иллюстраций для экранов минимальных размеров, можно быть уверенным в их размещении на экранах любого, другого размера. Размеры иллюстраций обычно выбирают так, чтобы они были видны целиком даже на экранах ЭВМ с минимальным размером. Если кран ЭВМ больше, то иллюстрации будут занимать только его часть. Гипертекстовые списки - это перечни с нумерацией или выделением элементов списков. Все элементы начинаются тэгами<li>. Нумерованные списки начинаются тэгом <ol> и заканчиваются тэгом </ol>. Ненумерованные списки ограничиваются тэгами . Гипертекстовые списки – удобное средство для организации оглавлений в сложных сайтах и больших гипертекстов. Элементами в таких списках являются адреса соответствующих разделов сайтов (глав, параграфов разделов электронных книг и библиотек). Заключение HTML - это язык разметки гипертекстов (hypertext markup language). Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида.html. Язык HTML - это язык разметки гипертекстов, хранящихся на Web-серверах и отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров. На разработку языка гипертекстовой разметки существенное влияние оказали два фактора: исследования в области интерфейсов гипертекстовых систем и желание обеспечить простой и быстрый способ создания гипертекстовой базы данных, распределенной в сети. Основные правила вложения элементов: Элементы не должны пересекаться; Блочные элементы могут содержать вложенные блочные и текстовые элементы; Текстовые элементы могут содержать вложенные текстовые элементы; Текстовые элементы не могут содержать вложенные блочные элементы. Строго говоря, все правила языка HTML. можно рассматривать исключительно как «пожелания». Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка. Список литературы <ol>«Экономическая информатика» /Под. ред. П.В. Конюховского и Д.Н. Колесова, СПб: Питер, 2000, 560с.Каймин В.А., «Информатика», учеб.4-е изд. М.:,2003-285с.«Информатика», базовый курс, 2-е издание /Под. ред. С.В. Симоновича, СПб.: 2003, 640с.</ol></li> В 1989 году гипертекст представлял новую многообещающую технологию, которая имела относительно большое число реализаций, с одной стороны, а с другой стороны, делались попытки построить формальные модели гипертекстовых систем, которые носили скорее описательных характер и были навеяны успехом реляционного подхода описания данных. HTML – это язык гипертекстовой разметки, используемый для кодирования документов. Язык HTML представляет собой набор команд, в соответствии с которыми браузер отображает содержимое документа, команды HTML не отображаются. В языке HTML реализован механизм гипертекстовых ссылок, который обеспечивает связь одного документа с другими. Эти документы могут находиться на том же сервере, что и страница, с которой на них делается ссылка, а могут быть размещены на другом сервере. Идея HTML - пример чрезвычайно удачного решения проблемы построения гипертекстовой системы при помощи специального средства управления отображением. Наиболее эффективной формой организации гипертекста были признаны контекстные гипертекстовые ссылки, а кроме того, было признано деление на ссылки, ассоциированные со всем документом в целом и с отдельными его частями. Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега < HTML > и заканчиваться соответствующим закрывающим тегом (</ HTML>). Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, - идущих именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <НЕАD> и </НЕАD>. В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <ТITLE>. </ТITLE>). Тем не менее, при создании документа HTML опускать структурные теги не рекомендуется. Простейший правильный документ HTML содержащий все теги, определяющие структуру, может выглядеть следующим образом: <HEAD>< TITLE > Заголовок документа < /TITLE ></HEАD> Текст документа Элементы HTML. Для парных тегов область влияния определяется частью документа между открывающим и закрывающим тегом. Такую часть документа рассматривают как элемент языка HTML. Так, можно говорить об «элементе BODY», включающем тег </BODY>, основное содержание документа и закрывающий тег </ BODY >. Весь документ HTML. можно рассматривать как «элемент HTML.». Для непарных тегов элемент совпадает с тегом, который его определяет. Большинство элементов языка HTML. описывает части содержания документа и помещается между тегами <BODY>. и </BODY>, то есть внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще болей мелких частей текста. Теперь можно сформулировать правила вложения элементов. Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента. Блочные элементы могут содержать вложенные блочные и текстовые элементы. Текстовые элементы могут содержать вложенные текстовые элементы. Текстовые элементы не могут содержать вложенные блочные элементы. Функциональные блочные элементы. В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML. поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При отображении Web-документы ются при помощи таким образом; тегом (документа на экране компьютера эти элементы показываются при помощи шрифтов разного размера. Обычные абзацы задаются с помощью парного тега <Р>. Язык HTML. не содержит средств для создания абзацного отступа («красной строки»), поэтому при отображении на экране компьютера абзацы разделяются пустой строкой. Закрывающий тег </Р> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например: <H1>Заголовок </H1> <Р>Первый абзац<Р>Второй абзац <H2>Заголовок второго уровня</Н2> Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML. рассматривает символы конца строки и пробелы особым образом. Любая последовательность; состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом . В качестве ограничителя абзацев может также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка разделяет части текста друг от друга. Ее длина и толщина задается атрибутами тега <HR>. <HR ALIGN= “RIGHT” SIZE= “10” WIDTH= “50%”> Этот тег создает горизонтальную линейку шириной в 10 пикселов, занимающую половину ширины окна и расположенную справа. Создание сайтов - одна из широко доступных возможностей современной Интернет-индустрии. Собственно создание сайтов в принципе не намного сложнее создания личных электронных ящиков и электронных визиток. Для создания сайта, прежде всего, необходим сервер, подключенный к Интернет, на котором можно размешать необходимые гипертексты. Кроме того, необходима регистрация имени сайга у провайдера, обслуживающего выбранный сервер. В Интернет можно найти провайдеров, предлагающих бесплатное открытие сайтов на своих серверах. Бесплатные сайты можно открыть на отечественных серверах narod.ru, boom.ru, hotmail.ru и на зарубежных серверах, например geocities.com, tripod.com. На указанных серверах можно зарегистрировать доменные имена вида: <имя>. narod.ru имя>.boom.ru, Примеры зарегистрированных доменных имен: wdu.da.ru- сайт электронного университета; wduniv.newmail.ru - сайт распределенного университета. После регистрации доменного имени сайта на нем можно размещать гипертексты. Размещение гипертекстов на сайте производится с помощью специальных программ, позволяющих создавать, редактировать, накапливать и копировать самые различные гипертексты. Сразу после размещения самой первой (главной) гипертекстовой страницы ее информация может читаться с помощью браузера в любой стране с любого компьютера, подключенного к Интернет. Для этого в окошке браузера указывается адрес сайта в Интернет. Например: http://bak.boom.ru Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида <имя>.html. HTML - это язык разметки гипертекстов (hypertext markup language). По структуре гипертекст - это текст со ссылками на другие гипертексты, размещенные на данном сервере, либо на других серверах. При нажатии мышкой на такую ссылку браузер автоматически загружает на экран компьютера страницу гипертекста независимо от того, на каком сервере и в какой стране он находится. С помощью указанных средств и программ в Интернет могут быть созданы самые разнообразные информационные сайты и системы - личные сайты, фирменные сайты, электронные газеты, журналы, электронные книги, энциклопедии, а также электронные архивы и библиотеки. Разница между сайтами состоит в объеме информации, их структуре и процедурах обновления. В целом для сайтов в Интернет, как и для любой организации, можно говорить о жизненных циклах их создания, развития, модернизации и ликвидации. Объем информации определяется владельцами - людьми или организациями, создавшими сайты и размещающими на них свою информацию. Объем информации на сайтах может составлять от нескольких килобайт до нескольких гигабайт (миллионов килобайт). Структура сайтов может быть самой разнообразной. Простейшая структура - это главная страница со ссылками на набор текстов. Эти ссылки могут находиться в тексте главной страницы либо выделяться в оглавлении в ее начале. Каждая страница сайта может быть снабжена названием, которое появляется на верхней строке экрана при загрузке сайта браузером. Кроме того, в главной странице сайта можно указать список ключевых слов для поисковых систем. Поисковые системы еженедельно просматривают все серверы в сети Интернет и записывают адреса всех найденных сайтов и гипертекстов вместе с выделенными в них ключевыми словами. По этим причинам не позже чем через неделю любая информация, опубликованная в Интернет, может быть найдена но содержащимся в них ключевым словам. Для создания электронных обучающих программ чаще всего используется язык гипертекстовой разметки документов (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-страницы <Т1Т1Е>Структура Web-страницы

Если рассмотреть исходные тексты различных 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-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстрого перемещения к нужному раздел документа . Для этого можно использовать механизм гиперссылок. Необходим также в нужных местах текста расставить соответствующие метки. Здесь мы рассмотрим только шаблон для создания меток:

<А name=" метка ">Произвольный текст

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

<Р>Переход к <А href=" Пметка ">метке

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

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

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

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

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

<А ef =" путь2/имя документа, htm" "> Видимый текст ссылки,

то она будет соответствовать URL

В том случае, когда надо задать базовый адрес для локального диска (например.D:), должна быть использована такая конструкция:

Тогда при указании относительной ссылки можно будет задавать не только имя файла, но и имена папок, в которых он находится. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. Это полезно в том случае, когда для файлов, указанных в документе, есть общий начальный фрагмент пути. В выражении абсолютной ссылки можно также опустить указание на схему доступа (file: //). В этом случае будет учитываться только левая часть абсолютной ссылки до первого левого символа "", то есть имя локального диска.

Правила синтаксиса

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

Так, взаимное расположение элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице, правда, в тех случаях, когда не используются фреймы. Если же страница представляет собой документ планировки фреймов, то вместо элемента BODY используется элемент FRAMESET .

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

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

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

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

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

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

Здесь надо руководствоваться здравым смыслом: каждый элемент выполняет заданную функцию и имеет определенную область действия.

В приведенном ниже примере есть два абзаца (первый в зеленой рамке) и таблица:

<Р style="border: Зрх solid дгееп">Текст абзаца 1

. . .

<Р> Текст абзаца 2

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

Можно использовать другой код:

<Р style="border: Зрх solid дгееп">Текст абзаца 1

. . .

<Р> Текст абзаца 2

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

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

<Н1>Заголовок 1 <Н2> Заголовок 2 Заголовок 3

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

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

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

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

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

Он может иметь конечный тег, но если этот тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент Р, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и т.д.

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

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

Последний, при выводе страницы на экран, может оборвать строку в соответствии с расстановкой элементов Hn, P или BR, а в остальных случаях он форматирует абзацы произвольно, в зависимости от объема текста, размера шрифта и текущего размера окна.

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

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

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

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня