2

УДК 681.3

Рассмотрены и рекомендованы к изданию на заседании кафедры

“Информатика и вычислительная техника” Протокол № от 20.06.2002

© Могилевский государственный университет продовольствия

3

СОЗДАНИЕ WEB - УЗЛА

Введение

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

“Всемирная паутина” или WWW (world wide web) оказалась одним из наиболее интересных и удобных средств передачи информации. Миллионы web – страниц связаны между собой и переход от одной страницы к другой осуществляется за считанные секунды. Страницы могут содержать и текст, и графику, и звуковую информацию, и видеоинформацию. Web – страницы позволяют взаимодействовать автору с посетителями страниц.

Любой пользователь ЭВМ может стать автором своей собственной страницы и разместить ее на сервере для доступа к ней тысяч и миллионов людей.

Для создания web – страниц необходимо иметь самые простые программные средства и знать основы языка HTML. Этим вопросам и посвящается данное методическое указание.

Средства проектирования и просмотра web – документов

Пользователи web создают свои документы с помощью специального

языка описания гипертекстовых документов – HTML (HyperText Markup Language - язык разметки гипертекста). Стандарт html3.2 был предложен в начале 1996 года совместно компаниями W3C, IBM, Microsoft и др., html4 – последняя версия и дополнена новыми возможностями.

Данный язык не является как таковым языком программирования. Он содержит тэги (коды), которые предоставляют броузеру определенную информацию, объясняя, как именно должен выглядеть тот или иной объект документа в броузере. Т.о. html-документ представляет собой текстовый файл. А поэтому написание html–документа может осуществляться с помощью любого текстового редактора, будь то блокнот, Wordpad или MS Word, главное, что следует запомнить, что сохранять созданный документ следует не с расширениями .txt или .doc, а с расширением html или htm. Возможно так же использование приложений из пакета Ms Office – Excel, PowerPoint и др. для создания html-документов, последние версии которых позволяют сохранить файл в соответствующем формате.

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

Существуют также специальные программы, облегчающие создание web-страниц, например, FrontPage (Editor), GIF Animator, Dreamweaver, Flash

и другие.

4

Однако сам по себе такой текстовый файл на языке HTML не интересен, он приобретает смысл только при его загрузке в программе – просмотрщике

(броузере) – Internet Explorer или Netscape Navigator. Желательно иметь на компьютере и тот и другой, т.к. они могут по-разному интерпретировать некоторые тэги, а для оформления web-страницы это имеет немаловажное значение.

Хотя, в целом именно достоинством данного языка является его

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

Практическое задание 1

Найдите на компьютере программы Блокнот, Internet Explorer, Netscape Navigator, FrontPage, GIF Animator, Dreamweaver, Flash

Основные понятия

Web-страница – это документ, размеченный тэгами html. Тэги – это управляющие коды, заключенные в угловые скобки (<>). Тэги определяют параметры стиля изображаемого текста или графического объекта. Обычно тэги записываются прописными буквами.

Документ состоит из двух частей: head и body (заголовок и тело).

Существуют самостоятельные тэги, парные и тэги с атрибутами.

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

используется специальный протокол http – hypertext transfer protocol –

протокол передачи гипертекста. Клиент сети может создать свою web-

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

Для просмотра web–документа открывается броузер и в строке адреса записывается URL-адрес (Uniform Resource Locator – единый указатель на ресурс) интересующей web-страницы. Происходит загрузка соответствующего файла в окно броузера. Далее при указании на ссылку происходит перемещение на объект, помеченный ссылкой.

Практическое задание 2

Откройте Internet Explorer или Netscape Navigator и в строке адреса введите адрес http://tut.by

Перемещение происходит быстро, если объект находится в этом же файле и медленнее, если объекты находятся в других файлах, разбросанных по всему пространству web-серверов.

5

Структура web – документа

Web-документ состоит из двух частей: заголовка и тела. На языке HTML структура выглядит следующим образом: <HTML>

<HEAD>

<TITLE>

…

Текст заголовка

…

</TITLE>

</HEAD>

<BODY>

…

Текст документа

…

</BODY>

</HTML>

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

Тэг BODY может так же содержать атрибуты – цвет фона документа BGCOLOR, цвет текста TEXT, цвет текста ссылки LINK, текста выбранной гиперссылки VLINK, url-адрес BACKGRAUND, где находится фон документа.

Например,

<BODY BGCOLOR=GRAY (“#808080”), TEXT=OLIVE(#808000)>

Для спецификации цвета, как значения атрибута, существуют два варианта:

1)Символьная, напрмер, RED. Определено шестнадцать таких имен (см. ниже), которые можно записывать в любом регистре с кавычками или без.

2)Цифровое обозначение в шестнадцатиричной записи, например, "#FF0000", которая контролирует, каким образом цвет формируется из основных цветов - красного, зеленого и голубого - в так называемое sRGB цветовое пространство, при этом обозначение должно быть взято в кавычки.

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

6

Эти цвета были первоначально отобраны, как 16-ти цветный стандарт, поддерживаемый Windows VGA палитрой.

Создадим собственный web – документ.

Практическое задание 3

Откройте программу Блокнот и введите следующий текст: <HTML>

<HEAD>

<TITLE>

Web страница Фамилия ИО

</TITLE>

</HEAD>

<BODY>

Меня зовут – имя.

Дата рождения – число, месяц, год Место рождения – страна, город. Образование – школа, вуз

</BODY>

</HTML>

Сохраните документ с именем Фамилия и расширением html. Не

закрывая программу Блокнот в программе Проводник найдите созданный файл и двойным щелчком левой клавиши мыши загрузите его (либо через Главное меню/Документы). Произойдет открытие броузера, в окне которого будет отражаться созданный web – документ. Просмотрите его

На черно – белый сайт можно добавить различный фон (гладкий или графическое изображение из файла), задать цвет символов и ссылок.

Практическое задание 4

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