Язык гипертекстовой разметки HTML5 — структура и основы работы. Язык разметки гипертекста (HTML)

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

Подписаться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Язык гипертекстовой разметки (Html)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

typically something like this

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· Меню опций

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

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

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

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



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

HTML документ

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

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

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

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

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

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

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

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

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

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

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

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

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

Введение

§ 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.</p><p>STYLE -и - LINK -. Тег STYLE тоже должен располагаться внутри элемента HEAD, Если вы хотите разобраться, какие нестандартные форматы используются на странице, надо просмотреть содержимое этого элемента. В нем будут указаны необходимые форматы. Если таких форматов нет, значит стили страницы записаны в отдельном файле. Ссылка на такой файл должна находиться в элементе LINK.</p><p>Секция заголовка может содержать несколько цементов МЕТА, каждый из которых отвечает за определенный набор параметров. Использование элементов МЕТА не является обязательным, но некоторые настройки могут быть весьма важны. Так, например, известно, что броузер в некоторых случаях способен автоматически определить вид кодировки страницы. Пользователь, работая с броузером, может выбрать в меню определенную кодировку. Чтобы исключить неопределенность при просмотре конкретной страницы, на ней целесообразно разместить указание на кодовую страницу.</p><p>Информация, сосредоточенная в элементах МЕТА, определяет общие настройки Web-страницы и называется профилем. Профили можно хранить в отдельных файлах и присоединять к определенной странице при помощи специального атрибута элемента HEAD: <br></p><p><HEAD prorIle=«lJRL»> <br></p><p>Стандартные атрибуты. Существует ряд атрибутов, которые moist использоваться во многих элементах. Часть этих атрибутов очень важна для конструирования Web-страниц, а часть подходит только для решения определенных задач.</p><p>Атрибут id выполняет функции уникального имени элемента. В зависимости от типа элемента, этот атрибут выполняет различные функции</p><p>Атрибут classid задает программу или объект, которые могут использоваться в определенных элементах.</p><p>Атрибут style может использоваться со многими элементами. Он предназначен ятя определения формата конкретного элемента и может принимать самые разные значения.</p><p>Похожие функции выполняет атрибут class. Его можно указывать, если в секции HEAD расположен элемент STYLE или использована ссылка на каскадную таблицу стилей (см. ниже раздел «Таблицы стилей»).</p><p>Атрибут align используется для выравнивания текста, объектов или элементов целиком. Выравнивание может выполняться относительно границ окна, рамки таблицы и т. д. Каждый элемент позволяет указывать определенные значения для этого атрибута. В общем случае значения могут быть такие:</p><p>left - выравнивание по левому краю;</p><p>right - выравнивание по правому краю;</p><p>justify - выравнивание по ширине (для текста);</p><p>center - выравнивание по центру (по горизонтали):</p><p>middle - выравнивание по центру (по вертикали):</p><p>top - выравнивание по верхней границе;</p><p>bottom - выравнивание по нижней границе.</p><p>Атрибут lang определяет, на каком языке набран текст внутри текущего элемента: lang - «код языка»</p> <p>Форматирование текста. Текст - единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные. Но для форматирования текста существует большое количество элементов. Большинство из них, кроме специальных, поддерживает стандартные атрибуты: id, class, lang. dir, title, sty le и атрибуты событий.</p><p>Изначально в HTML было введено меньше возможностей для форматирования текста, чем в обычные текстовые редакторы. В результате авторам гипертекстовых документов приходилось прибегать к различным ухищрениям, чтобы придать тексту заданный вид. Сейчас положение изменилось, но все дополнительные возможности осуществляются за счет применения таблиц стилей. Например, только с помощью свойства text-indent можно задать величину отступа первой строки абзаца.</p><p>Форматировать текст можно и с помощью традиционных элементов: выделять фрагменты курсивом, полужирным, выбирать шрифт и т.д. Рассмотрим эти элементы. Для них могут быть использованы стандартные атрибуты id. class, lang, dir. title, style, атрибуты событий, а также атрибуты, определяющие уникальные свойства определенных элементов.</p><p>Элемент абзаца paragraph - один из самых полезных. Он позваляег использовать только начальный тег, так как следующий элемент Р обозначает не только начато следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца можно использовать и конечный тег. В некоторых случаях начальный тег удобно ставить в конце строки: он не только обозначит конец абзаца но и выполнит функцию тега <BR> (разрыв строки). Вместе с элементом абзаца можно</p><p><ЕМ> </ет> и <DFN> </dfn> элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны но своему действию элементу 1, то есть в большинстве случаев позволяют выделить текст курсивом.</p><p>С точки зрения дизайна документа эти элементы ничем особенным не отличаются. Они могут пригодиться только для того, чтобы единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста. находящиеся в разных частях документа или даже на разных страницах. Разработчик, в этом случае, не может точно знать, какой именно шрифт будет использован: это определяется каждым броузером по-своему. Но он может быть уверен, что все фрагменты текста будут отформатированы одинаково. В языке можно найти еще несколько элементов, которым можно дать такую же характеристику.</p><p>Эти и другие элементы содержания могут иметь стандартные атрибуты: id. class, lang, dir, title, style, атрибуты событий.</p><p>BLOCKQUOTED blockquote- -обозначение цитаты. Этот элемент требует наличия конечного тега Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим элементом заключается только в отступе слева, поэтому элемент может быть использован в самых разных случаях. Этот элемент имеет собственный нестандартный атрибут, который позволяет указать источник цитирования:</p><p>=« Л0ресоокулшта->крва1кттн11ка""11ре;1!ю.гаж!ся, что адрес задается в виде URL. <br></p><p>Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы. К обычным таблицам таблицы стилей не имеют никакого отношения. В общем случае шаблон таблицы стилей выглядит так:</p><p>Элемент. имя стиля (Свойство 1: значение; свойство 2: значение:... j) В результате для определенного элемента задается набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности. Одна из важнейших особенностей стилевого оформления заключается в том. что преобразованию подвергаются все элементы, заключенные внутри цемента с заданным стилем. Так. определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием.</p><p><МЕТА http-equi\=«Content-Style-Type» content-»text/css»> <br></p><p>Броузер получит информацию, какой язык определения стилей использован. «CSS» в данном случае означает «каскадная таблица стилей» (Cascading Style Sheets). Это одновременно стандарт и язык, расширяющий традиционный HTML. В настоящее время существует две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. «Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько иные.</p><p>В этом случае для всей страницы создаются новые стили для заголовков первого и второго уровня. Для элементов CODE выбирается шрифт и цвет фона.</p><p>Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берёт на себя. Гели список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения, В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяю! общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.</p><p>Самым простым является ненумерованный список (unordered list). Его шаблон имеет вид <br></p><p><L1>ПУНКТ</p><p><L!> ПУНКТ!</p><p><L1> ПУНКТ 1<1.1> ПУНКТ1 <ДЛ.> <br></p><p>Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов.</p><p>Тго структура нумерованного списка (ordered list) похожа на предыдущую: <br></p><p><OL><LI>ПУHKTl<LI> ПУНКТ1<[Л>ПУНКТ1<1Л> ПУНКТ 1</OL> <br></p><p>Один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон: <br></p><p>Или такой: <br></p><p><А hre>f=«Aдpec ссылки» <span> <IMCi «гс= «Ссылка на рисунок» </а> <br><p>Первый шаблон используется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или на метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. На нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.</p><p>Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file. то есть содержать указание на протокол.</p><p>Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из разновидностей Интернета, В этом смысле можно сказать, что Интернет - это как бы несколько сетей в одной. У каждой из этих частных сетей существуют свои правила доступа достоинства, недостатки, свои приверженцы и противники. Но все пользователи используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Они могут служить для связи голосом, передачи факсов, межкомпыотерной связи и т.д.как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например ftp). Существуют следующие схемы доступа:</p><p>е -доступ к файлу на локальном диске;-доступ к архивам файлов но прогокол> передачи файлов (tile transfer protocol):- доступ к WWW;- отправка сообщения по электронной почте;- доступ к новостям USENET:- доспи к новостям USENET по протоколу NNTP:- подключение но протоколу telnet:. - подключение к системе поиска WAIS. <br></p><p>Когда гиперссылка используется для указания адреса электронной почты, её выбор обеспечивает не переход к новому документу, а запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку размешают в конце страницы для обеспечения связи с Web-мастером или автором страницы.</p><p>В том случае, когда используются переходы внутри текущей страницы, на ней должны быть расставлены метки.</p><p>В больших сайтах часто используются метки для перехода к определенной части некоторой страницы: <br></p><p><А name-» http: Адрес Файл. 1пт1#мегка»> </а> <br></p><p>Текст подсказки <А Ьге1=«<span>£<span>метка»> Текст для щелчка </а> <br><p>Для элемента А предусмотрены различные атрибуты. Атрибут hreflang, по аналогии с атрибутом lang. позволяет указать язык, который используется на адресу мой странице.</p><p>В структуру гиперссылок заложена возможность создания сложных текстовых документов, доступных через Интернет. Предполагается, что такие документы будут состоять из многих HTML-страниц с перекрестными ссылками. Чтобы пользователь мог эффективно управлять документом, броузер должен оптимизировать работу с отдельными страницами, например, загружать страницы, которые могут понадобиться пользователю, в фоновом режиме. Для этого необходимо снабдить страницы информацией о назначении ссылок.</p><p>Для решения этой задачи гиперссылки подразделяются на прямые (forward) и обратные (reverse). Ссылка, вызывающая переход с текущей страницы, называется прямой. Соответственно, при помощи броузера или другой ссылки может быть выполнен и обратный переход. Для определения более точного типа ссылки используются два атрибута (один для прямых. другой - для обратных ссылок). Определены следующие стандартные типы ссылок: alternate - другая версия документа; sty lesheet - таблица стилей в виде отдельного файла;</p><p>Фрейм - это определенная область, в которую грузится страничка. Таким образом то, что вы видите, собирается из нескольких HTML. Собственно, примерно то же осуществляет и SSI, и PHP и много других языков программирования, скриптов и т.п.</p><p>Фреймы придуманы еще на заре становления HTML для облегчения создания страничек большого размера. Фреймы позволяли хранить, например, меню в отдельном файле, и разом - не перелопачивая десятки, сотни и у некоторых даже тысячи html-страничек ради того, чтобы добавить или убрать пункт меню. Очень удобно, казалось бы..., но - система фреймирования почему-то не всегда (я бы даже сказал, - почти никогда!) правильно воспринимается большинством поисковиков. Рейтинг фреймовых страничек в большинстве поисковиков меньше, чем точно тех же страничек, с совершенно тем же содержимым, но со встроенным меню без фреймов</p><p>Эксперимент со страничками показал, что в самом низу списка оказалась страничка на фреймах, выше всех была страничка на SSI технологии и PHP инклюдах. По сути, эти две технологии, с успехом заменившие устаревшие фреймы, показали равную находимость и удобство. Не говоря уж о куда большей простоте использования. Но большинство разбирающихся в этих вопросах программеров дружно указали на превосходство PHP перед SSI в плане удобства их использования для сервера.</p><p>Графика делает сайт привлекательным и понятным. В файле grafika.htm записан следующий текст.</p><p>Тег <img src='/skype/yazyk-gipertekstovoi-razmetki-html5-struktura-i-osnovy-raboty-yazyk-razmetki/' loading=lazy>записывают в том месте, которое предназначено для размещения диаграммы, графика, рисунка или фотографии. В данном примере рисунок появится в левом верхнем углу экрана, так как он - единственный элемент тела HTML-документа.</p><p>Справа от знака равенства записывают имя gif-файла, хранящего графический объект. В данном примере это имя horse.gif записано без указания пути, так как файлы horse.gif и grafika.htm находятся в одном каталоге (в одной папке). Если бы файл horse.gif находился в папке dir1, вложенной в папку, содержащую файл grafika.htm, то справа от знака равенства следовало бы записать dir1/horse.gif.</p><p>Для размещения графики на сайте необходимы gif- или jpg-файлы. Но графический редактор Paint, поставляемый фирмой Microsoft, не позволяет создавать файлы с расширением.gif или.jpg. Поэтому можно использовать, например, графический редактор LView Pro, работающий под операционными системами Microsoft Windows 95 и Windows NT. Редактором LView Pro следует прочесть bmp-файл, созданный посредством Paint, и сохранить его как gif- или jpg-файл.</p><p>Создадим сначала bmp-файл. Для этого нужно предварительно уяснить, а затем выполнить следующие действия.</p><p>Запустить приложение Paint, используя кнопку <span>Пуск<span> на панели задач: <br><p>ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => Paint <br></p><p>Вернуться в окно текстового процессора MS Word, щелкнув мышью по кнопке на панели задач.</p><p>Создать новое окно текстового процессора MS Word, используя команду операционного меню {Окно, Новое окно} или щелкнув мышкой по кнопке инструментального меню Стандартное.</p><p>Командой операционного меню {Окно, Упорядочить все} разместить на дисплее сразу два окна: с методичкой и новое. Курсор должен находиться в новом окне. Командой операционного меню MS Word {Вставка, Рисунок...} открыть диалоговую панель Вставить рисунок.</p><p>Из списка wmf-файлов в левой части диалоговой панели выбрать щелчком мыши файл 1stplace.wmf. Рассмотреть рисунок, появившийся в правой части диалоговой панели.</p><p>Повторяя действия, указанные в пункте 6, просмотреть несколько рисунков. Выбрать понравившийся многоцветный рисунок, щелкнув по кнопке OK в левой нижней части диалоговой панели. Этот рисунок появится в новом окне MS Word.</p><p>Расположить указатель мыши на рисунке и щелкнуть левой клавишей мыши. Скопировать рисунок в буфер обмена, используя команду операционного меню {Правка, Копировать} или щелкнув мышкой по кнопке инструментального меню Стандартное.</p><p>Закрыть окно с рисунком, используя клавишную команду . Сделать максимальными размеры окна с методичкой, щелкнув мышью по кнопке максимизации размеров этого окна.</p><p>Перейти в окно графического редактора Paint, щелкнув мышью по кнопке на панели задач.</p><p>Вставить рисунок из буфера обмена, используя команду операционного меню Paint {Edit, Paste}.</p><p>Редактором LView Pro прочтем bmp-файл, созданный посредством Paint, и сохраним его как gif-файл, уяснив и выполнив для этого следующие действия.</p><p>Запустить проводник, используя кнопку Пуск на панели задач:</p><p>ПУСК => ПРОГРАММЫ => ПРОВОДНИК <br></p><p>На диске D: открыть папку LWPRO и запустить редактор LView Pro двойным щелчком на имени файла Lviewpro.exe.</p><p>Прочесть bmp-файл, созданный посредством Paint, используя команду операционного меню LView Pro {File, Open}.</p><p>Цвета в документах HTML могут задаваться двумя способами - указанием кода цвета или указанием названия цвета на английском языке. При первом способе код цвета записывается в виде шестнадцатеричного числа, содержащего шесть цифр: первые две цифры задают интенсивность красного цвета, вторые - зеленого, третьи - синего. При втором способе используются следующие названия цветов: black (черный), maroon (темно-красный), green (зеленый), olive (оливковый), navy (синий), purple (фиолетовый), teal (зеленовато-синий), gray (серый), silver (серебристый), red (красный), lime (известковый), yellow (желтый), blue (голубой), fuchsia (ярко-малиновый), aqua (морской волны) и white (белый).</p><p>Создадим документ, содержащий таблицу, ячейки которой окрашены в разные цвета. Фон документа установим черным. Документ наберем (или отредактируем) Блокнотом и запишем в рабочую папку в файл colortab1.htm.</p> <p><TH> - это так называемый тег заголовка таблицы. Фактически он объявляет строку, в которой должен быть записан заголовок таблицы. В данном случае он имеет атрибут COLSPAN, определяющий, сколько ячеек из следующей строки должен перекрыть этот заголовок. Тег<FONT > определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря, в тегах можно использовать несколько атрибутов, но тег<FONT> является исключением - для каждого изменения свойств текста используется отдельный тег <FONT>, например:</p><p>Создайте в рабочей папке документ font1.htm, в тело которого включите текст приведенного выше примера и просмотрите результат. Ускорить выполнение задания можно путем копирования этого примера в текст, создаваемый Блокнотом. Для этого следует выделить пример в методичке, протащив указатель мыши (при нажатой ее левой клавише) по полосе выделения слева от трех строк примера. Используя как образец документ colortab1.htm, создайте в рабочей папке документ table3.htm, содержащий таблицу с заголовком "Координаты ячеек" и с 16-ю клетками (4 строки по 4 ячейки), в которых записаны координаты этих клеток по принципу С1К1 (где С - строка, К - колонка с соответствую-щими номерами). Фон документа должен быть сине-зеленым, фон строки заголовка - белым, текст строки заголовка - желтым. Текст в ячейках таблицы должен быть черным на сером фоне. Ячейки таблицы должны иметь границы. <br></p><p>§ 4. Практическое применение языка разметки гипертекста HTLM <br></p><p>Основным принципом формирования интерактивной обучающей среды при всех концепциях обучения, как показывает практический опыт, является гипертекстовый принцип структурирования и представления информации. Разрабатываемая в литературе теория гипертекста, а также имеющийся опыт по созданию гипертекстовых структур позволяют наметить ряд его сущностных, структурно значимых понятийных признаков. Вспомним историю формирования этого явления. Первоначально гипертекстовые технологии привлекли внимание преподавателей как средство интеграции текстовой информации и информации, представляемой в других модальностях - мультимедиа (звук, видео, анимация и т.д.). Затем авторы - разработчики компьютерных обучающих программ открыли для себя гипертекст как средство моделирования когнитивных процессов и тем самым как новое средство управления этими процессами. Симптоматично, что сама идея гипертекста (хотя и без введения именно этого термина) была впервые, как утверждается во всех западных учебниках по истории этого понятия и как принято сейчас считать в интернетовском информационном сообществе, изложена в статье Ванневара Буша, озаглавленной следующим образом: «As we may think»; именно от этой работы начинается отсчет эпохи гипертекста как некоторого особого явления в теории информации, лингвистике и когнитивной психологии, а также в сфере художественного слова нового типа (hypertext fiction).</p><p>В настоящее время термин «гипертекст» применяют к разным объектам: 1) так называют особый метод построения информационных систем, обеспечивающий прямой доступ к данным с сохранением логических связей между ними; 2) это определенная система представления текстовой и мультимедийной информации в виде сети связанных между собой текстовых и иных файлов; 3) это особый универсальный интерфейс, отличительными чертами которого является его интерактивность и необычайная дружелюбность по отношению к пользователю. Разработка гипертекстовых систем для целей обучения была начата за рубежом в 80-е годы, аналогичные работы в России до последнего времени находились в пилотной стадии. В 2004 г. у нас наблюдается экспоненциальный рост числа гипертекстовых систем, предлагаемых для дистанционного обучения, что соответствует мировым тенденциям в этой области.</p><p>Учебные материалы, подготовленные на основе мультимедийных гипертекстовых технологий, обладают рядом очевидных преимуществ как для учителя, обеспечивающего, направляющего и контролирующего процесс обучения, так и для обучаемого: прежде всего, это принципиально новые возможности презентации учебного материала, связанные с использованием зрительной и аудитивной наглядности. Необходимо также отметить, что сама гипертекстовая структурированность учебного материала обладает собственным дидактическим значением, так как является значительно более гибкой формой подачи информации, позволяющей в максимальной степени учитывать индивидуальные потребности обучающегося. По сути дела каждое обращение к автоматизированному обучающему курсу, основой которого является база данных, выполненная в гипертекстовом формате, является процессом создания своего собственного учебного текста, наиболее адекватно соответствующего данной актуальной задаче, вследствие чего процесс обучения приобретает творческий аспект. Устанавливая логические связи информационных блоков, выстраивая информацию, следуя собственной логике ее осмысления, обучающийся по сути дела становится соавтором, и, может быть, это и становится наиболее привлекательной стороной использования подобных курсов в процессе обучения. Однако необходимо подчеркнуть, что ключевой проблемой в такой системе становится проблема организации «навигации», свободная или навязываемая автором-разработчиком стратегия исследования данного информационного поля, которая к тому же должна решать и собственно дидактические задачи. В исследованиях по теории гипертекста вопросы организации «чтения» гипертекстовой информации рассматриваются в совокупности с формальным анализом структуры гипертекстового поля, возможностями технических средств управления «навигацией», а также особенностями когнитивных стратегических предпочтений человека (вновь подчеркнем, что последнее остается до сих пор наименее изученной областью). В качестве достаточно хорошо проработанных формализованных стратегических моделей часто выступают модели, лежащие в основе систем автоматизированного поиска и систем автоматической обработки запросов.</p><p>а) на первом, самом высоком уровне, используется жанр максимально коротких аннотаций для всех базовых терминологических понятий,</p><p>б) на следующем уровне дается предметное истолкование тех или иных понятий,</p><p>В теории гипертекста для формализации этих параметров была разработана специальная гипертекстовая метрика, которая включает два базовых параметра: степень информационной компактности и индекс стратификации. Высокий уровень компактности характеризует такие гипертекстовые структуры, в которых на любой из информационных блоков можно с легкостью попасть из любого другого блока (обычно это обеспечивается многочисленными перекрестными ссылками). Чрезмерно высокая компактность может привести к полной дезориентации обратившего к гипертексту читателя, а также чрезвычайно затрудняет процесс отслеживания преемственности понятий. Низкая информационная компактность чревата выпадением из поля зрения читателя гипертекста отдельных узлов, которые могут нести важную для формирования каких-то понятий информацию или же вообще делать отдельные узлы во многих случаях недоступными. Индекс стратификации позволяет оценить допустимую степень свободы выбора последовательности чтения гипертекстового документа. Именно этот последний параметр представляется нам особенно значимым параметром для такой функционально-стилистической разновидности гипертекста, как обучающий гипертекст.</p><p>В подготовленных учебных компьютерных материалах было экспериментально получено оптимальное количество допустимых ссылок в расчете на один абзац текста (не более 1 - 2 ссылок), а также рекомендуемый объем текстовой информации: при выводе на экран компьютера он должен занимать не более 1,5 или 2-х экранов. Допустимая и рекомендуемая иерархическая глубина связей устанавливалась в соответствии с данными теории восприятия информации и когнитивной лингвистики. Предполагалось, что в зависимости от индивидуальных когнитивных стилей усвоения информации она может колебаться от 2 до 5 шагов. В ряде психологических и психолингвистических работ, посвященных теории гипертекста, были предприняты попытки выявления базовых стратегий, которые оказывались предпочтительными для разных групп людей; полученные данные позволяют наметить три основных типа поведения в гипертекстовом пространстве, их принято в англоязычной традиции называть depth-first navigation, breadth-first navigation и два варианта промежуточной стратегии (random navigation), совмещающей в определенных долях два первых подхода). Однако нельзя не отметить, что все без исключения исследователи подчеркивают необходимость дополнительных экспериментов в этом направлении для установления степени достоверности полученных данных. Несомненно, этот вопрос нуждается в дальнейшем, более глубоком изучении, поэтому в данной работе руководствовались преимущественно интуитивными представлениями об оптимальной структуре связей, которые были продиктованы спецификой лежащего в основе гипертекста материала.</p><p>Контрольное тестирование и устный опрос являются одними из наиболее широко используемых и хорошо разработанных средств проверки знаний в высшем образовании. Классический тест представляет собой последовательность достаточно простых вопросов. На каждый вопрос имеется простой ответ, который может быть формально проверен и оценен как правильный, неправильный или частично правильный (например, неполный). Вопросы обычно классифицируются по типам соответственно типу ожидаемого ответа. Классические типы вопросов делятся на вопросы типа [да/нет], вопросы типа [много вариантов/один ответ] (МВ/ОО), вопросы типа [много вариантов/много ответов] (МВ/МО) и вопросы открытого типа с текстовым или числовым ответом. Более продвинутые типы вопросов включают вопросы на соответствие, вопросы на правильную последовательность, вопросы на указывание (ответ - одна или несколько областей на рисунке), а также графические вопросы (ответ - простой граф). Кроме этого, каждая предметная область может иметь некоторые специфические типы вопросов.</p><p>Варианты поддержки на стадии создания обычно зависят от технологии, используемой для хранения отдельного вопроса в системе. В настоящее время, нам известно два различных способа хранения вопроса: в формате представления и во внутреннем формате. В контексте Web-основанного обучения, хранение вопроса в формате представления означает его хранение как части HTML-кода (обычно в виде HTML-формы). Такие вопросы могут также называться статическими вопросами. Они являются «черными ящиками» для WBE-системы. Система может представлять статические вопросы только «как есть» (в том виде, в котором они были созданы). Создание вопросов этого типа часто не поддерживается WBE-системой, так как это может быть сделано в любом HTML-редакторе.</p><p>Тип интерактивной технологии, используемой для получения ответов обучаемого, является одной из наиболее важных характеристик WBE-систем. Он определяет всю функциональность на стадии выдачи вопросов, а также влияет на стадии создания и оценки вопросов. В настоящее время, различают пять технологий: HTML-ссылки, HTML/CGI-формы, скриптовые языки, внедрение (plag-in) и Java.ссылки - самая простая технология взаимодействия, реализующая набор возможных ответов как список HTLM-ссылок. Каждая ссылка связана с определенной страницей обратной связи. При использовании этого подхода возникает две проблемы: сложность создания вопросов (логика вопроса должна быть жестко встроена в гипертекст курса) и поддержка всего двух типов вопросов: [да/нет] и [МВ/ОО]. Эта технология использовалась в основном на заре Web-основанного обучения, когда более продвинутые технологии взаимодействия, такие как CGI, JavaScript или Java еще не были разработаны.</p><p>Наиболее популярной технологией Web-тестирования, используемой в настоящий момент многочисленными коммерческими и университетскими системами является комбинация HTML-форм и CGI-скриптов. HTML-формы чрезвычайно удобны для представления основных типов вопросов. Вопросы типа [да/нет] и [МВ/ОО] представляются наборами иконок, списками выбора, всплывающими меню. Вопросы [МВ/МО] представляются списками множественного выбора или наборами переключателей. Вопросы открытого типа реализуются в виде полей редактирования. Более продвинутые вопросы, такие как вопросы на соответствие или на правильную последовательность, также могут быть реализованы, при помощи форм. Кроме того, скрытые поля могут использоваться для хранения дополнительной информации о тесте, в которой может нуждаться CGI-скрипт. Значительные преимущества от использования технологии «стороны сервера» (к которой относится и технология «форма/CGI») и схожей с ней технологии «карты стороны серверной» возникают при реализации графических вопросов на указывание. <br></p><p>Заключение <br></p><p>По итогам решения задач работы получены следующие результаты:</p><p>HTML - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из броузера кодом. Вот этот-то невидимый код и есть язык разметки HTML.</p><p>HTML - это не язык программирования, - он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки.</p><p>Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает броузер. Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально. Основная причина появления в последнее время большого количества Web-серверов заключается в том, что они сравнительно просты в установке и становятся все большим инструментом, который можно использовать в бизнесе. Вторая причина - появление большего количества улучшенных HTML-редакторов и конвертеров текста, позволяющие создавать новые Web-страницы</p><p>В отношении сферы применения можно сказать следующее. Будущее Web также связанно с увеличением скорости передачи данных в Интернет, так как Web неразрывно связан с Интернет.</p><p>Вероятно, останется проблема несовместимости между броузерами и Web-серверами, так как компания Netscape Communications несколько расширила HTML, из-за чего не все броузеры отображают документы, написанные в новом формате HTML. <br></p><p>Литература <br></p><p>1.<span>Бройдо В.Л. Вычислительные системы, сети и телекоммуникации СПб, Питер 2002- 464 с. <p>2.<span>Информатика /под редакцией С.В.Симоновича. СПб, Питер 2001- 400 с. <p>.<span>Кирмайер М. Информационные технологии. СПб.: Питер, 2003 - 443 с. <p>.<span>Мэтьюз Дж. Web - сервер. СПб.: Символ, 1998 - 356 с. <p>.<span>Олифер В. Г., Олифер Н.А. Компьютерные сети. СПб.: Питер, 2005 - 864 с <p>.<span>Олифер В. Г., Олифер Н.А. Сетевые операционные системы. СПб.: Питер, 2003 - 539 с. </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <footer class="entry-meta"> </footer> </div> </article> </main> </div> </div> <div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary"> <div class="well"> <aside id="search-2" class="widget widget_search"> <form method="get" class="form-search" action="/"> <div class="input-group"> <input type="text" class="form-control search-query" value="" name="s" id="s" placeholder="Поиск..."> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Search"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </form> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Новые статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/vkontakte/irkutskenergosbyt-lichnyi-kabinet-vhod-v-kabinet-voiti-po-nomeru/">Иркутскэнергосбыт личный кабинет физического лица — российская энергосбытовая компания Иркутскэнергосбыт личный кабинет физического лица передать</a></li> <li class="recentcomments"><a href="/wi-fi-ethernet/vk-mobil-polnaya-i-mobilnaya-versii-vkontakte-vk-mobilnaya-versiya-voiti/">Полная и мобильная версии вконтакте</a></li> <li class="recentcomments"><a href="/skype/vvedenie-v-tranzakcii-v-mysql-ispolzovanie-tranzakcii-v-pdo-na/">Использование транзакций в PDO на PHP Транзакции php</a></li> <li class="recentcomments"><a href="/audio/10-perechislit-populyarnye-programmy-arhivatory-3-4-vashi-dannye-na/">10 перечислить популярные программы архиваторы 3 4</a></li> <li class="recentcomments"><a href="/skype/ne-obnovlyaetsya-proshivka-na-xiaomi-proshivka-smartfona-xiaomi-mi4c-xiaomi-mi4-ne/">Прошивка смартфона Xiaomi Mi4c Xiaomi mi4 не обновляется прошивка</a></li> <li class="recentcomments"><a href="/computer/pri-podklyuchenii-vneshnego-zhestkogo-diska-sinii-ekran-problemy-s/">Проблемы с жёстким диском: причины и решения</a></li> <li class="recentcomments"><a href="/wi-fi-local-area-network/chem-otlichaetsya-rostest-iphone-ot-drugih-modelei-rostest-ne-imeet/">Ростест не имеет значения, или стоит ли переплачивать?</a></li> <li class="recentcomments"><a href="/wi-fi-local-area-network/kak-pochistit-kompyuter-ot-pyli-i-zamenit-termopastu-suhaya-ochistka-ot-pyli-dlya/">Сухая очистка от пыли Для чего нужно чистить компьютер от пыли</a></li> <li class="recentcomments"><a href="/programs/galaxy-j2-prime-inzhenernoe-menyu-kak-rabotat-s-inzhenernym-menyu-samsung-galaxy/">Как работать с инженерным меню Samsung Galaxy</a></li> <li class="recentcomments"><a href="/hard-disk/megagrupp-lichnyi-kabinet-registraciya-vhod-v-akkaunt-megagrupp/">Мегагрупп — личный кабинет Вход в мегагрупп</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Последние статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/program/telefon-ne-zaryazhaetsya-android-pochemu-telefon-ne-zaryazhaetsya-ot-zaryadnogo/">Почему телефон не заряжается от зарядного устройства</a></li> <li class="recentcomments"><a href="/computer/skachat-prilozhenie-telegramm-na-russkom-kak-ustanovit-telegramm-na-kompyuter/">Как установить телеграмм на компьютер</a></li> <li class="recentcomments"><a href="/skype/google-perevodit-android-na-yazyk-programmirovaniya-iz-rossii-vvedenie-v/">Введение в язык Kotlin Архитектурные компоненты для Android от Google</a></li> <li class="recentcomments"><a href="/program/obnovlyaem-directx-na-windows-xp-obnovlyaem-directx-poshagovaya-instrukciya-ne-obnovlyaetsya-directx-na-w/">Обновляем DirectX: пошаговая инструкция Не обновляется directx на windows 7</a></li> <li class="recentcomments"><a href="/hard-drive/kak-aktivirovat-nod32-v-pomoshch-lyubitelyam-halyavy-aktiviruem-eset/">Активируем Eset NOD32 Antivirus Как активировать ключ нод 32 9 версия</a></li> <li class="recentcomments"><a href="/browsers/operativnaya-sistema-mak-os-operacionnye-sistemy-semeistva-mac-os/">Операционные системы семейства Mac OS: особенности и преимущества</a></li> <li class="recentcomments"><a href="/wi-fi-local-area-network/chto-delat-esli-telefon-ne-raspoznaet-simku-telefon/">Телефон перестал видеть сим карту — разберем все варианты</a></li> <li class="recentcomments"><a href="/odnoklassniki/socket-fm2-plus-vs-socket-fm2-v-chem-otlichie-novogo-socket-fm2-plus-ot-starogo-socket-fm2-kamennyi/">Socket FM2 plus vs Socket FM2: в чем отличие нового Socket FM2 plus от старого Socket FM2</a></li> <li class="recentcomments"><a href="/skype/udalenie-bannerov-iz-brauzera-kak-ubrat-reklamnye-i/">Как убрать рекламные и вирусные баннеры в браузере</a></li> <li class="recentcomments"><a href="/program/kak-ustanovit-rannyuyu-versiyu-draivera-kak-ustanovit-draiver-videokarty/">Как установить драйвер видеокарты NVIDIA без лишних компонентов</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> </aside> </div> </div> </div> <div id="yandex_rtb_R-A-202909-1"></div> </div> </div> </div> <div id="footer-area"> <div class="container footer-inner"> <div class="row"> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info container"> <div class="row"> lickeys.ru - Полезные советы по социальным сетям. Инструкции по настройке ПК </div> </div> <div class="scroll-to-top"><i class="fa fa-angle-up"></i></div> </footer> </div> <script type="text/javascript"> disableSelection(document.body) </script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var cm_imgs = { "fileTypeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435\u0432\u0435\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043e \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044e.","fileSizeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b. \u041f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d! \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430:","limitFileSize":"2097152","fileCountError":"<strong>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/strong> \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b <br \/>\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: ","limitFileCount":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/comment-images-reloaded/js/cir.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/themes/sparkling/inc/js/skip-link-focus-fix.js?ver=20140222'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> </body> </html>