WWW (Всемирная паутина) (стр. 1 )

Введение

WWW (Всемирная паутина) - это мультимедийная, гипертекстовая, интерактивная информационная среда.

WWW - это десятки миллионов серверов, содержащих Web-страни­цы связанные между собой посредством гиперссылок.

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

Браузер (browser) - специальная программа для просмотра Web-страниц. Основное назначение браузера - принять введенный пользователем адрес (URL) искомой страницы, скопировать ее с сервера в Интернете на диск локального компьютера (в специально отведенную "буферную" область), а затем правильно отобразить все элементы страницы (текст, графику, звук и т. п.) в рабочем окне. Браузеры используются не только как средство навигации в Интернете, но и для просмотра любых HTML-документов, а также рисунков форматов GIF и JPEG в режиме "off-line", то есть без подключения к Интернету.

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

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

Цель преподавания:

Формирование у студентов информационной культуры в области глобальных компьютерных сетей и технологий создания контента World Wide Web.

Задачи изучения:

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

2) Научиться применять HTML для создания Web-страниц и небольших сайтов на основе использования разнообразного программно-техноло­гического инструментария;

3) Приобрести навыки обеспечения интерактивности Web-страниц на основе использования программных средств, реализованных на JavaScript и Java.

Понятие HTML

Название языка HTML является сокращением от HYPERTEXT MARKUP LANGUAGE, то есть "язык гипертекстовой разметки".

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

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

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

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

Язык HTML обладает собственным синтаксисом, терминологией и правилами.

Идею HTML и WEB впервые выдвинул ученый Тим Бернерс-Ли (TIM BERNERS-LEE), сотрудник CERN (Европейского центра ядерных исследований) из Женевы, Швейцария.

Сегодня актуален "динамический HTML". (коммерческое название реализаций HTML 4.0.).

Самыми значительными отличиями HTML 4.0 являются:

· использование кодировки UNICODE;

· использование перечней стилей (STYLE SHEET). Перечень стилей управляет внешним видом документа;

· тег <OBJECT>, используемый для работы с мультимедиа (с видеоклипами и звуком);

· интерактивные элементы управления;

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

XML

XML - расширяемый язык разметки (Extensible Markup Language)

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

Назначение HTML

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

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

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

HTML-документ

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

Для Microsoft Word 2000 одним из основных является HTML-формат (текстовый процессор можно настроить так, что все документы будут сохраняться только в данном формате и без каких-либо потерь).

Формат HTML имеет следующие преимущества при сохранении документов Word:

· Повышенная надежность сохраняемых документов (повреждение хотя бы одного байта в документе Word приведет к полной нечитаемости файла, а изменение даже нескольких десятков байт в HTML-документе в самом крайнем случае может привести к нечитаемости лишь соответственных фрагментов текста);

· Информационная компактность файла (конвертор Word 2000 создает больший по размерам HTML-файл, чем конвертов Word 97, однако в обоих случаях результирующие HTML-файлы будут значительно меньше по информационному объему, чем исходный документ).

Неудобством можно считать то, что документ с внедренными графическими объектами будет располагаться в нескольких файлах. При конвертации документа Word-97, часть информации о форматировании документа теряется.

Что же касается самих HTML-документов, то конверторы Word создают очень нерациональный HTML-код для размещения на Web. HTML-конвертор из Word 97 вставляет множество тегов <font>. HTML-конвертор из Word 2000 использует не HTML, а новый метаязык XML, который поддерживается не всеми моделями браузеров.

HTML-редакторы

В настоящее время широко используются два типа редакторов HTML:

1. Редакторы типа "что видишь, то и получишь" - безусловными лидерами являются Microsoft FrontPage и Macromedia DreamWeaver. Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word, в HTML-доку­менты.

2. Редакторы собственно HTML-текстов: HomeSite, HotDog, First Page, и т. д.. В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML.

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

Окно программы HTML Pad

1) Строка заголовка

2) Строка меню

3) Панель инструментов

4) Рабочее поле

Основные возможности HTML Pad

1. Открытие текстовых и HTML документов.

2. Ввод и редактирование текста.

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

Возможна одновременная работа только с одним документом!

Первый HTML-документ

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

Пример:

нормальный шрифт <i>наклонный шрифт</i> снова нормальный шрифт

В окне браузера:

нормальный шрифт наклонный шрифт снова нормальный шрифт

В этом примере, метка <i> дает команду браузеру выводить весь текст, идущий после этой метки, курсивом – это называется открытием тега. Эта же самая метка, но написанная с наклонной чертой – </i>, отменяет дальнейший вывод текста наклонным шрифтом – это называется закрытием тега. В дальнейшем структуру <…>…</…> – будем называть тегом требующим закрытия. Он оказывает действие только на тот элемент, который заключен в него.

Также в HTML есть теги не требующие закрытия. Их структура <…>… Они производят действие не над объектом, а сами по себе.

Пример:

строка<br>еще одна строка<hr>

В окне браузера:

строка

еще одна строка

В этом примере тег <br> переводит строку, а тег <hr> рисует горизонтальную линию. <br>, <hr> – теги не требующие закрытия.

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

Например, <p align=right>…</p> (данный тег выравнивает заключенный в него абзац по правому краю).

Для некоторых атрибутов необходимо указать значение, перед которым стоит знак = (например, тег <HR WIDTH="100"> рисует горизонтальную линию шириной в 100 пикселов).

В HTML поддерживается, так называемая, вложенность тегов.

Пример:

<b>жирный шрифт<u>подчеркнутый жирный шрифт</u>жирный шрифт.</b>

В окне браузера:

жирный шрифт подчеркнутый жирный шрифт жирный шрифт.

Тег <b> выводит текст жирным шрифтом. Тег <u> выводит текст с подчеркиванием. В примере видно, как в тег <b> вложен тег <u> , и при этом тег <u> не прекращает действия тега <b>, а дополняет его. И здесь действует правило – если один тег вложен внутрь другого тега, то первым должен закрываться вложенный тег.

Теги можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY>, <bOdY> и <Body> будут восприняты браузером одинаково.

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

<html>

<head>

<title>

Безымянный

</title>

</head>

<body>

Это наш первый HTML-документ.

</body>

</html>

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

<html><head><title>Безымянный</title>

</head>

<body>Это наш первый HTML-документ.

</body></html>

<HTML>…</HTML>

HTML документ – всегда заключен внутри тега <html>. Этот тег сообщает браузеру, что данная страница написана на HTML. Код самой странички состоит из 2-х частей – заголовка и тела.

<HEAD>…</HEAD>

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

<TITLE>…</TITLE>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Рекомендуется название не длиннее 64 символов.

<BODY>…</BODY>

Тело заключено внутри тега <body>. Тело содержит непосредственно информационное наполнение – текст, таблицы, гиперссылки – т. е. то, что управляет изображением странички на экране.

На этом теге следует заострить внимание, так как он содержит важные атрибуты, без знания которых невозможно обойтись. Атрибут bgcolor="цвет" задает цвет фона (при отсутствии этого атрибута цвет фона – белый); атрибут text="цвет" задает цвет текста (при его отсутствии цвет текста – черный); link="цвет" – цвет гиперссылок; alink="цвет" – цвет активной гиперсылки; vlink="цвет" – цвет посещенных гиперссылок. Кроме того, вместо атрибута bgcolor="цвет" может использоваться атрибут background="имя_графического_файла" – фоновый рисунок.

<html>

<head>

<title>Безымянный</title>

</head>

<body bgcolor="red" text="white"

link="navy" alink="#33CC66" vlink="#FFCCFF">

Это наш первый HTML-документ.

</body>

</html>

Задание цвета производится несколькими способами:

· названием – "red";

· шестнадцатеричным числом – "#FFFFFF";

· в десятичном виде – "255, 0, 0";

· в процентах – "30%, 40%, 30%".

Допустимые названия цветов:

aqua – аквамарин black – черный blue – синий fuchsia – фуксиновый green – зеленый gray – серый lime – светло-зеленый maroon – каштановый

navy – ультрамарин olive – оливковый purple – пурпурный red – красный silver – серебристый teal – сизый white – белый yellow – желтый

Форматирование шрифта

Для задания фрагменту текста некоторых параметров шрифта, отличных от первоначальных, используется тег <font>…</font> с сопутствующими атрибутами.

Атрибут color устанавливает цвет шрифта.

Атрибут size устанавливает размер шрифта. Размер шрифта в HTML задается:

· в процентах – size="150%";

· в пикселах – size="30px";

· в типографских пунктах – size="24pt".

Атрибут face устанавливает тип шрифта: Courier, Arial и т. д.

Пример:

<font face="Arial" color="red" size="24pt">Пример</font>

В окне браузера:

Пример

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

Физические стили

<B>…</B>

От английского bold – полужирный. Шрифт текста, к которому применен данный тег, будет иметь полужирное начертание.

<I>…</I>

От английского italic – курсивный. Шрифт текста, к которому применен данный тег, будет иметь курсивное начертание.

<U>…</U>

От английского underlined – подчеркнутый. Текст, к которому применен данный тег, будет подчеркнут.

<S>…</S>

От английского striked out – зачеркнутый. Текст, к которому применен данный тег, будет зачеркнут.

<BIG>…</BIG>