Меню
Главная
Авторизация/Регистрация
 
Главная arrow Информатика arrow Информационные технологии и моделирование бизнес-процессов

Гипертекстовые технологии

World Wide Web и Hyper Text Markup Language

World Wide Web (WWW) - самый известный и популярный сервис Интернет. Эта глобальная, распределенная по всему миру информационная гипертекстовая мультимедийная система позволяет объединить в одно целое информацию различных видов, которая хранится на разных компьютерах. Информация в WWW распространяется в виде web-страниц (web-документов). Несколько web-страниц с одной темы, принадлежащих одному владельцу ли на одном компьютере, образуют web-узел, который часто называют сайтом.

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

В основе WWW лежат два понятия: гипертекстовые ссылки и формат документов HTML. Благодаря гипертекста web-страницы приобретают свойства интерактивности.

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

HTML (Hyper Text Markup Language) - это специальный язык форматирования текстовых электронных документов

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

Сначала HTML была только языком форматирования гипертекстовых документов. Ее возможности ограничивались заголовками, абзацами и небольшим набором текстовых форматов - таких как Bold и Italic. Стремительное развитие HTML начался с 1993 года, когда появился первый web-браузер Mosaic (до того времени гипертекст можно было посмотреть только в текстовом редакторе). Поясним, почему нужны браузер.

Поскольку HTML - это язык разметки, то она не принадлежит к языкам программирования высокого уровня, то есть HTML-код компилируется и не выполняется, как скажем, код на C ++. Вместо того он интерпретируется браузером.

HTML вместе с протоколом передачи гипертекста (HTTP - Hypertext Transfer Protocol) позволяет взаимодействие компьютерных документов разного типа, а также ускоряет обмен информацией. Широкое распространение web-документы получили благодаря разнообразным возможностям представления информации, легкостью написания и совместимостью с различными операционными системами.

Принципы построения Web-страниц

Типичный Web-документ состоит из текстовых блоков, рисунков, таблиц, линий, гиперссылок (hyperlinks). Более сложные Web-документы содержат фреймы (вложенные Web-страницы), элементы управления и ввода информации (кнопки, переключатели, поля ввода и т.д.), динамические объекты (Java Applet, Java Script, ActiveX).

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

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

o быстрая загрузка страниц;

o удобство навигации по сайту;

o корректность представления информации.

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

Навигация по сайту носит нелинейный характер - если, например, узел имеет 10 страниц, переход с 1-й на 5-ю осуществляется сразу, и не требует последовательного перехода через 2-ю, третью и четвёртую страницы. Навигацию необходимо планировать таким образом, чтобы она предусматривала возможность дополнения без реконструкции всего сайта. Как правило, используют навигационные кнопки или списки (например, как на.life.com.ua, рис.13.1). Кроме переходов между страницами существуют внутренние и почтовые ссылки; связывать можно и изображения (например, миниатюра и Увеличить связываются между собой).

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

Пример оформления навигации сайта

Рис.13.1. Пример оформления навигации сайта

Почтовые ссылки (mailto) на странице позволяют написать электронное письмо адресату - при переходе по mailto открывается почтовая программа, являющаяся частью броузера (Outlook для IE или Mail для Mozilla) или установлена на компьютере пользователя (например, The Bat!). При создании почтового ссылки пользователю предлагается ввести слово или фразу в поле "Subject", определив тему письма, соответствует этическим нормам сети.

Пример оформления внутренних ссылок

Рис.13.2. Пример оформления внутренних ссылок

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

Основные теги языка HTML. Формирование документов на языке HTML вроде программирования. Исходный текст документа состоит из последовательности команд, которые называют тегами (tag) или дескрипторами. Во время просмотра теги выполняются, и благодаря им на экран выводятся запрограммированные элементы изображения. Например, если в начале абзаца стоит тег <center>, то весь абзац будет выровнено по центру окна.

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

Теги бывают одинарными и парными. Большинство тегов являются парными, например, тег ограничения HTML-файла <html> ... </ html>. Парные теги обозначают начало и конец области действия соответствующей команды. Теги записывают в угловых скобках, причем тот тег, закрывает область действия, имеет косую черту - слеш (slash). Тег может содержать параметры, которые пользователь записывает в первом тезисе через пробел, например, <body bgcolor = "green"> (цвет фона - зеленый).

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

В приведенном примере содержится служебная информация о том, что страница создана средствами текстового редактора MS Word из пакета программ MS Office; служебные ссылки для браузера.

Приведенный код описывает, что в странице содержится украинский текст.

Тег <title> ... </ title> не входит в перечень обязательных, однако его использование соответствует этическим нормам сети, поскольку текст, введенный между этими тегами, появляется в броузере в строке заголовка.

o <body> ... </ body>

Определяет содержание web-документа. Может содержать атрибуты, описывающие вид документа, например:

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

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

Таблица 13.1. Теги форматирования

Теги форматирования

Подробнее рассмотрим синтаксис дескриптора якоря - связывание страниц. Как правило, используется атрибут href, который определяет гипертекстовая ссылка. После него вводится значение, чаще всего представляет собой URL (Uniform Resource Locator) - универсальный указатель ресурсов, то есть адрес Web-узла или страницы. Она состоит из префикса (обычно http: //), который определяет протокол соединения; имени домена (как правило, начинается с www) и именно ресурса - имени файла.

Если путь к нужному документу указывается полностью, ссылки (линка) будет абсолютным:

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

Пример почтовой ссылки:

Вставка изображений происходит по аналогичной схеме с использованием дескриптора <img>:

На этом завершаем знакомство с тегами языка HTML и их использованием. Отметим, что для создания Web-страниц дизайнеры используют гипертекстовые редакторы, например, Macromedia Dreamweaver, Microsoft FrontPage и другие, хотя при достаточном владения языком HTML можно писать Web-страницы в любом текстовом редакторе, например, NotePad. Современные текстовые процессоры, например, MS Word, Lotus WordPerfect позволяют создавать Web-страницы методом конструирования без применения команд HTML, поскольку они генерируют эти команды автоматически.

 
< Предыдущая   СОДЕРЖАНИЕ   Следующая >
 
Предметы
Агропромышленность
Банковское дело
БЖД
Бухучет и аудит
География
Документоведение
Естествознание
Журналистика
Инвестирование
Информатика
История
Культурология
Литература
Логика
Логистика
Маркетинг
Математика, химия, физика
Медицина
Менеджмент
Недвижимость
Педагогика
Политология
Политэкономия
Право
Психология
Региональная экономика
Религиоведение
Риторика
Социология
Статистика
Страховое дело
Техника
Товароведение
Туризм
Философия
Финансы
Экология
Экономика
Этика и эстетика
Прочее