Интерактивное общение на серверах Интернета

0

может быть реализовано в форме обмена текстовы­ми сообщениями, аудио- или видеоконференций.

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

2. Для присоединения к беседе необходимо ввес­ти команду [Сер- вис-Разговор]. В поя­вившемся окне Разго­вор в поле Сообщение можно вводить с клави­атуры текст сообщений. В поле Отправить можно выбрать из спис­ка получателя или по­лучателей сообщения. В основном окне программы появ­ляются сообщения всех участников разговора.

Интерактивное общение с помощью ICQ. В последние годы большую популярность приобрело интерактивное об­щение через серверы ICQ (эта трехбуквенная аббревиатура образована из созвучия слов «I seek you» — «Я ищу тебя»).

В настоящее время в системе ICQ зарегистрировано более 150 миллионов пользователей, причем каждый пользова­тель имеет уникальный идентификационный номер. После подключения к Интернету пользователь может начинать об­щение с любым зарегистрированным в системе ICQ и под­ключенным в данный момент к Интернету пользователем. Программа уведомляет о присутствии в данное время в Ин­тернете абонентов из предварительно составленного списка (My Contact List) и дает возможность инициализировать контакт с ними.

Для того чтобы стать абонентом системы ICQ, достаточно скачать программу ICQ-клиент (рис. 12.16) с файлового сер­вера (например, www freeware ru) и в процессе ее установки на компьютер зарегистрироваться.

Система интерактивного общения ICQ интегрирует раз­личные формы общения: электронную почту, обмен тексто­выми сообщениями (chat), интернет-телефонию, передачу файлов, поиск в сети людей и так далее.

Рис. 12.16 Программа интерактивного общения ICQ

В ожидании раэрвшеии

3 Usi:a 5 VladToR

How id Start_________ _J

Прпгтои режим

Чатгппугом

l/J Системное еоЭБщемие

Shi*»

Haiti

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

Мобильный Интернет. С мобильного телефона на компью­тер, подключенный к Интернету, и с компьютера на мобиль­ный телефон можно отправлять SMS (Short Messsage Servi­ce — короткие текстовые сообщения).

Для беспроводного доступа с мобильных телефонов к ин­формационным и сервисным ресурсам Интернета использу­ется протокол WAP (Wireless Application Protocol). Для ра­боты в сети Интернет по этому протоколу не нужны дополнительные устройства (компьютер и модем), достаточ­но одного мобильного телефона с поддержкой WAP.

WAP-сайты располагаются на Web-серверах и представ­лены в специальном формате WML (Wireless Markup Langu­age). Этот язык разметки специально адаптирован под воз­можности мобильного телефона — двухцветную графику, маленький экран и небольшую память.

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

Полноценный высокоскоростной доступ в Интернет с мо­бильного телефона можно осуществить по технологии GPRS (General Packet Radio Service). В этом случае можно рабо­тать с WAP-сайтами непосредственно с мобильного телефо­на, а на подключенном к нему компьютере можно просмат­
ривать HTML-страницы, перекачивать файлы, работать с электронной почтой и любыми другими ресурсами Интер­нета.

В технологии GPRS максимально возможная скорость пе­редачи данных составляет 171,2 Кбит/с — это приблизитель­но в 3 раза больше скорости доступа по коммутируемым теле­фонным линиям, и почти в 12 раз больше скорости передачи данных в мобильных телефонных сетях стандарта GSM (9,6 Кбит/с).

Вопросы для размышления

1. В чем состоит различие между интернет-телефонией и мобиль­ным Интернетом?

I Практические задания

12.23. Установить программу интерактивного общения ICQ и заре­гистрироваться в системе.

12.13. Мультимедиа технологии в Интернете

В Интернете существует достаточно большое количество серверов, на которых хранятся мультимедиа (звуковые, гра­фические и видео-) файлы. Мультимедиа файлы имеют боль­шой информационный объем: объем высококачественного звукового файла в цифровом формате, содержащего звуча­ние длительностью в 1 секунду, составляет 187,5 Кбайт (см. параграф 2.13), высококачественного графического фай­ла — 1,37 Мбайт (см. параграф 2.12), а одна секунда видео (из расчета 25 кадров в секунду) — 34,25 Мбайт.

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

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

Принцип сжатия основан на удалении психофизиологи­ческой избыточности передаваемой звуковой или видеоин­формации, то есть на удалении некоторых избыточных для человека частот в звуковом или видеосигнале, которые он все равно не воспринимает. Например, если воспроизводит­ся громкий звук на частоте 1000 Гц, то более слабый звук на частоте 1100 Гц уже не будет слышен человеку; если в изоб­ражении имеются очень яркие точки, то соседние точки че­ловек «не видит».

Технология сжатия МРЗ. Для сжатия звуковых файлов был разработан и в настоящее время широко используется стандарт MPEG 1ауегЗ (сокращенно МРЗ). Название свое этот стандарт получил по имени организации-разработчика (Moving Picture Experts Group — экспертная группа кине­матографии). МРЗ при сжатии разбивает весь частотный спектр звукового сигнала на части, а затем удаляет звуки, не воспринимаемые человеком.

Для передачи и прослушивания звука в формате МРЗ по сети в режиме реального времени достаточно пропускной спо­собности линий связи 128 Кбит/с. Это привело к высокой по­пулярности этого формата и накоплению на серверах Интер­нета огромного количества музыкальных и других записей в формате МРЗ. Для прослушивания таких записей использу­ются программные проигрыватели (WinAmp, MusicMath Juke­box и др.). Однако прослушивание по сети звуковых файлов в формате МРЗ в режиме реального времени с использованием модемного подключения (максимальная скорость 56 Кбит/с) невозможно из-за недостаточной скорости передачи информа­ции.

Технологии потокового воспроизведения. Широкое рас­пространение в Интернете получили технологии передачи по­токового звука и видео, которые можно использовать и при модемном подключении. Компанией Progressive Networks были разработаны технологии RealAudio и RealVideo (в на­стоящее время Real8), а компанией Microsoft — Windows Me­dia Technology 7 (WMT7).

Эти технологии передают звуковые и видеофайлы по час­тям в буфер локального компьютера, что обеспечивает воз­можность их потокового воспроизведения даже при исполь­
зовании модемного подключения. Снижение скорости пере­дачи по каналу может приводить к временным пропаданиям звука или пропускам видеокадров. Для прослушивания и просмотра таких файлов необходимы специальные проигры­ватели (RealPlayer или Windows Media Player).

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

[h Qpbons freseu £«e* ЦНр JM JJ 13 «из Charrals <

На рис. 12.17 представлен прием телеканала ТВЦ с помо­щью RealPlayer с узла www.tvc.ru и радиостанции Радио-101 с помощью Windows Media Player с узла www.101 .ru. В процессе приема можно работать в других приложениях и слушать или смотреть новости в фоновом режиме.

Й1 RadiolOI - Window* Media Ptayef ВшЕЗ File Yiew Play Favorites So Help

Рис. 12.17. Прием теле- и радиопрограмм через Интернет

Задания

£*т~

12.24. Во сколько раз необходимо сжимать звуковой файл для пото­ковой передачи с помощью модемного соединения со скоро­стью 28,8 Кбит/с, если реализуется двоичное 16-битное коди­рование с частотой дискретизации 22 кГц?

12.25. Какую пропускную способность должна иметь линия связи для потоковой передачи без сжатия видеоизображения раз­мером 640x480 точек с палитрой из 65 536 цветов и с часто­той 10 кадров в секунду?

12.14. Электронная коммерция в Интернете

Электронная коммерция в Интернете (e-commerce) — это коммерческая деятельность в сфере рекламы и распростра­нения товаров и услуг посредством использования сети Ин­тернет. В настоящее время электронная коммерция быстро развивается и, по статистике, уже более 100 миллионов че­ловек во всем мире совершили хотя бы одну покупку в Ин­тернет-магазинах, а годовой оборот электронной коммерции в 2000 году превысил 100 миллиардов долларов.

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

Важной составляющей электронной коммерции является информационно-рекламная деятельность. Многие фирмы размещают на своих Web-сайтах в Интернете важную для потребителя информацию (описание товаров и услуг, их сто­имость, адрес фирмы, телефон и e-mail, по которым можно сделать заказ, и др.). Существуют специализированные сер­веры, предоставляющие потребителю систематизированную (по видам товара, производителям, ценам и др.) информа­цию об определенной группе товаров. Например, на сервере www.newman.ru содержится информация о ценах на все виды компьютерного оборудования, которые предлагают различные фирмы в Москве.

Реклама в Интернете реализу­ется с помощью баннеров (от анг­лийского слова «banner» — «рек­ламный заголовок»). В Интернете баннер представляет собой неболь­шую прямоугольную картинку, на которой размещается реклама Web-сайта или Web-страницы.

Рис. 12.18. Баннер

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

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

Разделы

. Дторынпк 193.4) • Анонсы (7*4) . Бартер . Жттотные . Знакомства (104+3) . Книжищи развал (8*fl) - Компьютерная оараяопка (5&7.Т9 у лу н (Ев*4 ш:_________________ *

Недвижимость f&4+1| Отдел кадров {80+0) Продукты питаний (46+21 Промьмшеинь t тошры (-181 И?) Разно* (147+2) Строиматериаль {59+1}

Рис. 12.20. Интернет-аукцион доменных имен Самой удобной для покупателя формой электронной тор­говли являются интернет магазины. В российском Интер­нете существуют уже сотни магазинов, в которых можно ку­пить все: компьютеры и программы, книги и CD, продукты питания и др. Например, в виртуальном магазине «Библио-Глобус» (shop biblio-globus ru) можно найти более 90 ООО библиографи­ческих описаний книг и более 25 ООО наименований нахо­дится ежедневно в продаже (рис. 12.21).

Широкое распростране­ние в Интернете получила электронная торговля. Простейшим ее вариантом является виртуальная «бара­холка» (доска объявлений), где продавцы и покупатели просто обмениваются инфор­мацией о предлагаемом то­варе (аналог газеты «Из рук в руки») — рис. 12.19.

Рис. 12.19. Доска объявлений

Интересной формой элект- .. .............. ... и и. ■, ,...... ........... >

' Доска объяыг.гнии >.', ( рев* Г "" j 8ыбирант« ну*иыя вам зиа.п Наяигbum ен/три ttjj-^s pai&ena преете чтобы поссметра'Ь обьивленив нужно кликнуть на просмотреть добавить своа обьпвпм и. к.иавить /..агчгь. удалить .спи вь ютит, просмотреть споб~1аНМВ ОС ВТ «НИЬ * BUM и е ВИТ ИВ nBbBSJ вив. В.МИ . ИВ LooCo^HBB

ронной торговли являются Интернет-аукционы. На та­кие аукционы выставляются самые разные товары: про­изведения искусства, компь­ютерная техника, автомоби­ли и так далее. Например, на сервере www greatdoma- ins ru на аукцион выставля­ются доменные имена Ин­тернета (рис. 12.20).

РИС. 12.21

Интернет-магазин «Библио-Глобус»

»

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

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

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

12.26. Найти с использованием поисковых систем адреса Интер­нет-магазинов и ознакомиться с правилами электронной тор­говли.

Глава 13

Основы языка гипертекстовой разметки документов

13.1. Web-сайты и Web-страницы

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

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

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

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

Web-страницы сайта могут содержать динамические объ­екты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов управления ActiveX. Расположенные на сайте управляющие элементы (например, кнопки) позволяют пользователю за­пускать те или иные динамические объекты.

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

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

Основными достоинствами HTML-документов являются:

• малый информационный объем;

• возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

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

Рассмотрим, как создаются Web-сайты, на примере раз­работки тематического сайта «Компьютер». Сначала необхо­димо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их темати­ка и как они будут связаны между собой.

Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:

• страницу «Программы», содержащую классификацию программного обеспечения;

• страницу «Словарь», содержащую словарь компьютер­ных терминов;

• страницу «Комплектующие» с ценами на устройства компьютера;

• страницу «Анкета», содержащую анкету для посетителей сайта.

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

13.1. На сайте по адресу iit.metodist.ru ознакомиться с Web-сайтами, участниками московских конкурсов ученических компьютер­ных проектов.

13.2. Форматирование текста и размещение графики

Создание структуры Web-страницы. Приступим к созда­нию титульной Web-страницы сайта. Для этого используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот.

ЛЦ Создание Web-сайта «Компьютер» 1. Открыть окно текстового редактора Блокнот.

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

HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Без этих тэгов браузер не в состоянии опре­делить формат документа и правильно его интерпретиро­вать. Web-страница разделяется на две логические части: заголовок и содержание.

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

Название Web-страницы содержится в контейнере <Т1Т- LE></TITLE> и отображается в строке заголовка браузера при просмотре страницы. Назовем нашу Web-страницу «Компьютер»:

<HEAD>

<Т1ТЬЕЖомпьютер</Т1ТЬЕ>

</HEAD>

Основное содержание страницы помещается в контейнер <BODY></BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее. Поместим для начала на страницу текст «Все о компьютере»:

<BODY>

Все о компьютере

</BODY>

Созданную Web-страницу необходимо сохранить в виде файла. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем in­dex, htm. В качестве расширения файла Web-страницы мож­но также использовать html.

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

Необходимо различать имя файла index.htm, то есть имя, под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер», которая вы­свечивается в верхней строке окна браузера и в первую оче­редь анализируется поисковыми системами. Имя Web-стра­ницы должно в максимальной степени соответствовать ее содержанию.

2. В окне приложения Блокнот ввести HTML-код Web-стра- ницы. Сохранить файл под именем index.htm в папке сай­та. Загрузить этот файл в окно браузера для просмотра.

<HTML> <HEAD>

<Т1ТЬЕ>Компыотер</Т1ТЬЕ> </HEAD> <B0DY>

Все о компьютере

Все о компьютере </BODY> </HTML>

i]

J*j Мои «

Форматирование текста. Пока страница выглядит не слишком привлекательно. Мелкий шрифт и черный текст на белом фоне почти не обращают на себя внимания. С помо­щью HTML-тэгов можно задать различные параметры фор­матирования текста.

Размер шрифта для имеющихся в тексте заголовков зада­ется тэгами от <Н1> (самый крупный) до <Н6> (самый мел­кий). Заголовок страницы целесообразно выделить самым крупным шрифтом:

<Н1>Все о компьютере</Н1>

Зкомльютер-М)сто$а*1п1«т»4Е1ЧЙ01« ШПОЕЗ

<£йип Правка Вид Избранное Сервис "Щ J J Назад Останов Обновить Дирес{е* О \Мои документы ж j f^rteppxoa Ссыпки JU Flyiwtt On ^ ■>)-

Некоторые тэги имеют атрибуты, которые являются име­нами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания заголовка для тэга заголовка по­
зволяет атрибут ALIGN, которому требуется присвоить опре­деленное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN="right", а по цент­ру — ALIGN="center":

<Н1 ALIGN="center">Bce о компьютере</Н1>

С помощью тэга FONT и его атрибутов можно задать па­раметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (напри­мер, FACE="Arial"), атрибут SIZE — размер шрифта (на­пример, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR="blue").

Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и так далее), либо его шестнадцатеричным значением. Шестнадцатерич- ное представление цвета использует RGB-формат "#RRGGBB", где две первые щестнадцатеричные цифры зада­ют интенсивность красного (red), две следующие — интен­сивность зеленого (green) и две последние — интенсивность синего (blue) цветов. Минимальная интенсивность цвета за­дается шестнадцатеричным числом 00, а максимальная — FF. Легко догадаться, что синему цвету будет соответство­вать значение "#000OFF".

Таким образом, задать синий цвет заголовка можно с по­мощью тэга FONT с атрибутом COLOR: <FONT COLOR="blue">

<Н1 ALIGN="center">Все о компьютере</Н1> </FONT>

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

Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отде­ляются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.

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

<Р ALIGN="left">Ha этом сайте вы сможете полу­чить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<Р АЬ16Н="г1дЬ1:">Терминологический словарь по­знакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>

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

3. В окне приложения Блокнот в контейнер <BODY> вставить последовательность тэгов и просмотреть результат в брау­зере:

<FONT COLOR="blue"> <Н1 ALIGN="center"> Все о компьютере </Н1> </FONT> <HR>

<Р ALIGN="left">Ha этом сайта...</Р> <Р ALIGN="right"> Терминологический словарь ...</Р>

Вставка изображений. На Web-страницы обычно помеща­ют изображения, чтобы сделать их визуально более привле­кательными. На Web-страницах могут размещаться графи­ческие файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих це­лей можно использовать редактор Photo Editor, который вхо­дит в пакет Microsoft Office.

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

4. «Скачать» изображение компьютера из Интернета и со­хранить его в файле с именем computer.gif в каталоге сай­та.

ЕЖ

ЗДО" QPM»a вид (ДОроиме* с Справа

J 3 Л м Обновить Дамой Поив тбрвкч

ТИ.уйе»1 ^Переход CatWM Jh ,

Все о комиыо I ере

Наэтом сайта вы сможете получить различную информацию о | компьютере его программном обеспечении и ценах иа компьютерные комплектующие Терминологический словарь познакомит вас с компьютерными терминами а также вы сможете заполнить анкету

Для вставки изображения используется тэг <IMG> с атри­бутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический
файл находится на локальном компьютере в том же катало­ге, что и файл Web-страницы, то в качестве значения атри­бута SRC достаточно указать только имя файла:

<IMG SRC="computer.gif">

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

<IMG SRC="C:\computer\computer.gif">

Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:

<IMG SRC="http://www.server.ru/computer.gif">

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

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

<IMG SRC="computer.gif" АЬТ="Компьютер">

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который мо­жет принимать пять различных значений: ТОР (верх), MID­DLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

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

<IMG SRC="computeг.gif" ALT="Компьютер"

ALIGN="right"> 5. В окне приложения Блокнот в контейнер <BODY> вста­вить перед абзацами текста тэг вставки изображения, просмотреть результат в бра­узере.

< IMG SRC="computer.gif" ALT="Компьютер" ALIGN="rlght">

Вопросы для размышления

т

1. Какие тэги (контейнеры) должны присутствовать в HTML-доку­менте обязательно? Какова логическая структура Web-страни-

цы?

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

13.2. Создать титульную страницу вашего сайта. Поэксперименти­руйте с форматированием текста и размещением графики. За­дайте для страницы фон.

13.3. Гиперссылки на Web-страницах

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

Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, со­здать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, но могут пока не иметь содержа­ния. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.

Каждая страница будет содержать следующий HTML-код: <HTML> <HEAD>

<Т1ТЬЕ>Заголовок страницы</Т1ТЬЕ>

</HEAD>

<BODY>

</BODY> </HTML>

6. Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anke- ta.htm в каталоге сайта.

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

Адресная часть гиперссылки представляет собой URL-ад­рес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URL-адрес документа полностью определяет компьютер, ка­талог и файл, в котором располагается документ.

Абсолютный адрес документа, находящегося на локаль­ном компьютере, будет включать в себя путь к файлу и имя файла, например:

С:/Web-сайт/filename.htm

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

http://www.host.ru/Web-сайт/filename.htm

а

Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указа­тель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это позволит не изменять адресную часть ссылок при пере­мещении Web-сайта в другой каталог локального компьюте­ра или при его публикации в Интернете.

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

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

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

Панель навигации будет представлять собой абзац, вы­ровненный по центру, в котором указатели гиперссылок разделены пробелами (snbsp):

<Р ALIGH= "center">

[Программы] &nbsp [Словарь] snbsp

[Комплектующие] Snbsp [Анкета]

</Р>

Теперь для каждой гиперссылки определим адрес перехо­да. Для этого используется контейнер гиперссылки <А></А> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Кон­тейнер должен содержать указатель гиперссылки:

<А HREF="URL">Указатель гиперссылки</А>

7. Вставить в титульную страницу код, создающий панель навигации:

<Р ALIGN="center">

[ <А HREF="software.htm">nporpaMMH</A>] Snbsp [<А HREF="glossary.htm">CnOBapb</A>] Snbsp [<A HREF="hardware . 1"1Ш">Комплектующие</А>] Snbsp [<A HREF="anketa.htm">AHKeTa</A>] </P>

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

Полезно на титульной странице сайта создать ссылку на адрес электронной почты, по которому посетители могут свя­заться с администрацией сайта. Для этого необходимо атри­буту ссылки HREF присвоить URL-адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который за­дает стиль абзаца, принятый для указания адреса.

8. Вставить в титульную страницу код, создающий ссылку на адрес электронной почты:

<ADDRESS>

<А HREF="mailto:[email protected]">E-mail:

[email protected]</A>

</ADDRESS>

По щелчку мыши по ссылке на адрес электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан заданный в ссылке адрес.

9. Созданная титульная стра­ница Web-сайта «Компью­тер» содержит заголовок, изображение компьютера, текст, панель навигации и ссылку на адрес электрон­ной почты.

i Сами £/*»•« |

J j 2 а м

Сттоно» «Хнмте Гюио И>$рв*-

о. jJ {•'Тт.жед tb»*» £

Всс о комиью I ере

лот cdiiuicn«mit получать рйшичиущ иифлрмацню о компьютере < программном обсспсчеиня в ценах на компьютерные комплектующие

ТгрмимологвческнЙ словарь познакомит вас с компьютерным* терминами и

Шроговммы! 1СК»ВШ>Ь1 1Комплсщук щ»е| {

j >^.tliKxpbp ч vsi j( г

С Г ММ* " * ^^МС Г9МГ>

Вопросы для¹ размышления

1. В каких случаях удобнее использовать в гиперссылках абсолют­ные, а в каких — относительные адреса?

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

13.3. Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.

13.4. Списки на Web-страницах

Довольно часто при размещении текста на Web-страни­цах удобно использовать списки в различных вариантах:

• нумерованные списки, когда элементы списка идентифи­цируются с помощью чисел;

• маркированные списки (в HTML их принято называть не­нумерованными), когда элементы списка идентифициру­ются с помощью специальных символов (маркеров);

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

На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.

Сначала создадим главный нумерованный список основ­ных категорий программного обеспечения. Список распола­гается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <0L> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР-

9. Открыть в Блокноте файл software.htm, ввести заголовок «Программное обеспечение» и добавить следующий HTML-код, задающий список:

<OL>

<Ы>Системные программы <Ы>Прикладные программы <Ы>Системы программирования </OL>

Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагает­ся внутри контейнера <UL></UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность).

10. Добавить HTML-код, задающий вложенный список для элемента<LI> Прикладные программы:

<UL>

<LI TYPE="square"> текстовые редакторы; <LI> графические редакторы;

<LI> электронные таблицы; <LI> системы управления базами данных. </UL>

ЦЙ Готово -^М^кмшбпо

Страницу «Словарь» мы представим в виде словаря компьютерных терминов.

Для этого используем контейнер списка определений </DL>. Внутри него текст оформляется в виде термина, ко­торый выделяется непарным тэгом <DT>, и о<