2.8. Контрольные вопросы
1. Что представляет собой коммутация каналов в глобальных сетях?
2. Какие устройства служат для соединений узлов сетей?
3. Что представляют собой "пакеты сообщений"?
4. Как реализуется передача информации в глобальных сетях?
5. Чем являются и как устроены "протоколы передачи данных"?
6. Что представляют собой служебные программы - утилиты?
7. Какую роль выполняют команды ping.exe и tracert.exe?
8. Каков принцип действия электронной почты?
9. Какие элементы составляют формат адреса электронной почты?
10. Какие действия необходимо выполнить для создании
почтового ящика в ukr.net?
Тема 3.Исследование информационных возможностей веб-документов
Задание 3.1.Исследовать структуру веб-документов.
3.1.1.Современный этап развития Интернета начался в начале 1990-х годов с появлением протокола обмена информациейНТТР(Hyper Text Transfer Protocol - протокол передачи гипертекста). Вместе с этим протоколом появилась и службаWorld Wide Web(WWW) - обширная сеть серверовНТТР, передающих файлы через Интернет.
Основную часть этих файлов составляют Web-страницы- специальные файлы, написанные языкомHTML(Hyper Text Markup Language, язык разметки гипертекста). Web-страница является отдельнымWeb-документом(илиhtml-документом)службы WWW и может содержать текст, графику, звуковое сопровождение, анимацию и другие мультимедийные объекты, а также гипертекстовые ссылки. Web-страницы публикуются в Интернете путем размещения Web-файлов на серверахНТТР(Web-узлах).
3.1.2. Для создания html-документов может быть использован любой текстовый редактор. Текст документов такого типа размечается с помощью html-тэгов (tag,признак). В html-документе определяются синтаксис и расположение тэгов, в соответствии с которыми Web-браузер будет отображать информацию, но текст самих тэгов будет скрыт. Файлам html-документов присваивается тип.htm. Все тэги ограничиваются символами " < " и " > ". Значительная часть тэгов составляютпары- стартовый (открывающий) и конечный (закрывающий); например,
<p>Информационная система</p>
Здесь стартовым тэгом является <p>, а конечным - тэг </p>, отличающийся от стартового добавлением символа " / " (прямой слеш).
3.1.3.Тэги могут иметьатрибутыизначения атрибутов. Атрибуты добавляют для расширения или модификации действий тэга. Наборы допустимых атрибутов для тэга описываются в спецификации языкаHTML; некоторыми из таких атрибутов являются следующие:
src- атрибут, значения которого являются размеры изображения;
widthиheight- задают ширину и высоту изображения;
alt- альтернативный текст, который выводится, если браузер не в состоянии вывести изображения.
Правила записи атрибутов и значений следующие:
1) атрибуты указываются после имени тэга и пробела;
2) атрибуты отделяют один от другого пробелами;
3) порядок следования атрибутов произвольный;
4) атрибуты не нужно во второй раз описывать в конечном тэге;
5) значение атрибутов записывают в кавычках "." после символа " = ";
6) названия тэгов не должны содержать пропуски.
Следующий пример иллюстрирует использование атрибутов:
<h1 align="center">Моя первая Web-страница </h1>
Этим тэгом определен заголовок, который на экране будет расположен по центру.
Для языка HTMLбезразлично, в каком регистре записаны названия тэгов и их атрибуты; например,
<h1 align="center">Моя первая Web-страница</h1>
<H1 ALIGN="center">Моя первая Web-страница</H1>
Результаты выполнения приведенных тэгов будут идентичны, причем в данном примере обе записи корректны. Кроме того, в одном документе можно использовать для записи тэгов и верхний и нижний регистры. Однако во избежание ошибок и ускорения работы с текстом с помощью клавиатуры рекомендуется использовать нижний регистр.
3.1.4. Отображение html-документа в окне Web-браузера выполняется в соответствии со структурой html-тэгов. В каждом html-документе должны присутствовать три главные части: объявление HTML, заголовок и тело документа.
1) Объявление HTML обеспечивает пара <html> и </html>. Они сообщают Web-браузеру, что между ними находится документ в формате HTML, причем первым тэгом в самом начале документа должен быть тэг <html>, а последним (в самом конце документа) - </html>.
2) Заголовок определяет пара тэгов <head> и </head>. Между этими тэгами располагается информация о документе (название, ключевые слова для поиска, описание).
Самой важной информацией является название документа, которое находится на экране в первой (верхней) строке окна браузера. Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных.
Название html-документа в виде текстовой строки располагается между тэгами <title> и </title>; это единственный обязательный элемент заглавной части документа. Название документа является ссылкой на страницу сайта. В окне браузера в поле поиска вводятся ключевые слова искомой темы. Поисковая система в соответствии с запросом выводит некоторое количество ссылок на разные документы. Одной из таких ссылок становится текст, расположенный между тэгами <title> и </title>.
3) Главная часть документа (тело html-документа) следует после заголовка и находится между тэгами <body> и </body. Первый из них должен быть расположен после тэга </head>, а второй - перед тэгом </html>. Тело html-документа составляет информативную часть документа, которая должна быть отформатирована средствами языка HTML.
3.1.5. Рекомендуется изучить приведенные в табл. 3.1 основные тэги, их правописание и назначения.
3.1.6. Внимательно проанализировать и изучить текст html-документа, представленный на рис. 3.1.
Таблица 3.1. Основные тэги языка HTML
|
Тэги |
Назначение |
|
<html> и </html> |
Начало / Конец документа. |
|
<head> и </head> |
Указывают начало и конец служебной области html-документа. |
|
<title> и </title> |
Всю информацию, расположенную между ними, браузер воспринимает как название html-документа. Эта информация выводится в строке заголовка окна браузера. |
|
<body> и </body> |
Указывают начало и конец тела (основной области) html-документа. |
|
<body bgcolor=?> |
Указывает цвет фона html-документа, используя значение цветов в виде сочетания символов RRGGBB. |
|
<body text=?> |
Устанавливает цвет текста html-документа, используя значение цветов в виде сочетания символов RRGGBB. |
|
<hr> |
Вывод на экран горизонтальной линии. |
|
<body link=?> |
Устанавливает цвет гиперссылок, используя значение цветов в виде сочетания символов RRGGBB. |
|
от <h1> и </h1> до <h6> и </h6> |
Заголовки от первого до шестого уровней. |
|
<p> и </p> |
Начало / Конец абзаца. |
|
<p align=?> |
Выравнивает параграф относительно одной из сторон html-документа: left, right, или сеnter. |
|
<br> |
Конец строки. |
|
<marquee> и </marquee> |
Указывают вывести текст в виде подвижной строки. |
|
<img src="[имя файла]"> |
Вставка графического изображения. |
|
<center> и </center> |
Указание разместить текст, расположенный между тэгами, по центру. |
Строка
<html> ...................................................................................................... 1
<
head>
............................................................................................
2
<
title>
...................................................................................
3
Страница Иванова
И. И. ....................................... 4
</title> .................................................................................. 5
</head> ........................................................................................... 6
<
body
bgcolor=blue text=red link=white>
.................................. 7
<
center>
................................................................................
8
<
h1>
Web-страница Иванова И. И
................................ 9
</h1> .................................................................................... 10
</center> .............................................................................. 11
<
p
align=center>
.................................................................. 12
студента группы ТС21 факультета транспортных<br> 13
систем Харьковского национального <br> .................. 14
автомобильно-дорожного университета <br> .............. 15
<br> ..................................................................................... 16
<img width=50% height=250 src= .................................. 17
http://www.khadi.kharkov.ua/media%5Ckhadi.jpg> ......... 18
<
marquee
height=20 width=90% bgcolor=#ffff00> 19
Желаю успехов в учебе!!! ................................. 20
</marquee> .............................................................. 21
</p> .................................................................................... 22
</body> ........................................................................................ 23
</html> .................................................................................................. 24
Рис. 3.1. Структурированное представление html-документа.
3.2.2.Сохранить созданный текст в папке автора с помощью командыФайлСохранить как. Имя сохраняемого текстового файла должно состоять из фамилии автора, нижней черточки, символовВеби номера модификации задания; например,Иванов_Веб_1(первый вариант исследования). При сохранении тип.txtфайлу программаБлокнотприсвоит самостоятельно.
Свернуть все открытые программы на Панель задач.
3.2.3.Открыть браузерOperaс помощью ярлыка на Рабочем столе чем столе. Для открытия в среде браузера созданного html-документа нажать на панели инструментов браузера кнопкуОткрыть.
На экран выводится окно Открыть;в поле Папка должно находитьсяимя папки пользователя, а в информационном поле - перечень содержания этой папки. Для достижения такого состояния в полеПапкаповторными нажатиями кнопки списка (расположена в поле справа) достичь вывода перечня дисков и папок компьютера. Открыть дискС:нажатием ЛК мыши - выводится список содержания дискаС:.
Пометить папку группы (например, ТД21) и открыть ее двойным нажатием ЛК мыши; аналогично открыть папку пользователя.
3.2.4.В данном случае в окнеОткрытьпо умолчанию предусматривается открытие файла html-документа, поскольку в полеТип файловуказан типhtml-файлы. Но html-документ, изображенный на рис. 3.1, сохранен как текстовый файлИванов_Веб_1.txt. Для вызова этого файла в окнеОткрытьследует нажать кнопку списка в полеТип файлови дважды нажать ЛК мыши на типеВсе файлы [*.*]- в информационном поле выводится имя созданного текстового файла.
Указать имя созданного файла и дважды нажать ЛК мыши - в окне браузера Operaвыводится текст созданного html-документа.
3.2.5.Для сохранения текста в качествевеб-страницыследует на панели Стандартная браузераOperaнажать кнопкуСохранить- выводится окноСохранить как. В полеПапкадолжно находиться имя папки пользователя. Для этого в полеТип файловнажать кнопку списка и в списке типов файлов нажатием ЛК мыши пометить тип.html-файл, а затем нажать кнопкуСохранить.
В результате выполненных действий созданный документ будет сохранен как веб-страница с типом файла .htm;этот файл может быть воспроизведен любым браузером.
Завершить создание веб-страницы пользователя закрытием браузера с помощью команды ФайлВыход.
Задание 3.3.Исследовать методы изменения информации в html-документе.
В html-документе (рис. 3.1) можно редактировать и форматировать текст, изменять и добавлять рисунки, звуки, цвета, мультимедийные эффекты. Каждое изменение html-документа следует хранить в папке пользователя с очередным порядковым номером (см. п. п. 3.2.5 и 3.2.6).
Изменения в html-документе выполняются следующим образом.
1) В среде Total Commanderв папке пользователя указать файл html-документа (например, файлИванов_Веб_1.htm) и дважды нажать ЛК мыши. Через несколько секунд на экран выводится окно браузераOpera,а еще через несколько секунд - результат распознавания браузером html-документа.
2) Открыть веб-страницу с помощью команду ВидИсходный код- в поле браузера выводится текст веб-документа. Выполнить в html-файле необходимые изменения, варианты которых рассматриваются в следующих заданиях данной работы.
3) После завершения редактирования элементов html-документа следует на панели Стандартная браузера Operaнажать кнопкуСохранить- выводится окноСохранить как. В полеИмя файлазаменить цифру на очередное значение (например,Иванов_Веб_2.htm)для сохранения очередной модификации этого файла, а затем нажать кнопкуСохранить.
4) Завершить работу в окне браузера командой ФайлВыход.
5) Проверить результат модификации (очередную веб-страницу); для этого в среде Total Commanderв папке пользователя указать новую модификацию html-файла и дважды нажать ЛК мыши - на экран выводится результат распознавания обозначенного файла.
Задание 3.4.Исследовать способы использования графических изображений.
3.4.1.При использовании графических изображений следует помнить, что в Интернете важны не художественное качество картинки, а скорость ее загрузки, то есть минимизация размера картинки. Для расположения картинок на веб-страницах в основном используются два графических формата (типы):.gifи.jpg. На рис. 3.2 приведеныURL-адреса картинок обоих типов. Для удобства выбора пользователями вариантов справа в адресах указаны их порядковые номера. Основное отличие между ними в том, что они применяются для хранения разных видов графики.
Формат .gifпреимущественно используется для сохранения рисованных изображений, векторной графики, картинок без полутонов, градиентов (переходов от цвета к цвету) и большого количества мелких деталей различных цветов. Формат.gifприменяется для фотоизображений и полутоновой графики, живописи, градиентов и изображений с множеством мелких разноцветных деталей. Это объясняется тем, что формат.gifпозволяет хранить изображения, которые содержат не более256цветов.
Цвета могут быть любыми и в любой комбинации, но общее их количество ограничено этим числом. Поэтому в данном формате удобно хранить изображение с небольшим количеством цветов. Это позволяет за счет сокращения объема информации о цветах значительно уменьшить размер файла, а следовательно, и время загрузки. Кроме того, формат .gifиспользуется для сохраненияанимированныхкартинок и изображений спрозрачнымичастями; в.jpgтакие возможности отсутствуют.
Область применения формата .jpgопределяется тем, что он хранит полную цветовую палитру 24-битового изображения, которая может содержать миллионы цветов. При таком объеме информации размер файла значительно возрастает. Но главной особенностью формата.jpgявляется его способность хранить изображение в сжатом (подобно архивному) виде. Степень архивации изображения, сохраненного в формате.jpg, может быть весьма значительной: нормальным считается сжатие картинки в 10 - 20 раз без потери качества.
http://s48.radikal.ru/i120/0909/2f/87fbe63a9a27.jpg.......... 00
http://gifanimation.ru/images/pticy/ptici10.gif.................... 01
http://gifanimation.ru/images/pticy/ptici06.gif.................... 02
http://gifanimation.ru/images/cvety/8036.gif...................... 03
http://gifanimation.ru/images/cvety/flower01.gif………… 04
http://gifanimation.ru/images/email/email22.gif................. 05
http://gifanimation.ru/images/knopki/button78.gif……….. 06
http://gifanimation.ru/images/komputer/hw30.gif………... 07
http://gifanimation.ru/images/komputer/hw24.gif............... 08
http://gifanimation.ru/images/mehanizmy/peopls167.gif…. 09
http://gifanimation.ru/images/mehanizmy/peopls33.gif…... 10
http://gifanimation.ru/images/planety/b97.gif...................... 11
http://gifanimation.ru/images/predmety/14.gif..................... 12
http://gifanimation.ru/images/derevo/fish17.gif................... 13
http://gifanimation.ru/images/derevo/fish24.gif................... 14
http://gifanimation.ru/images/derevo/79.gif......................... 15
http://gifanimation.ru/images/derevo/54terg.gif................... 16
http://gifanimation.ru/images/strelki/strelki09.gif………..... 17
http://gifanimation.ru/images/strelki/strelki05.gif................. 18
http://gifanimation.ru/images/raznoe/80.gif.......................... 19
http://gifanimation.ru/images/raznoe/105.gif........................ 20
http://gifanimation.ru/images/raznoe/animal01.gif………... 21
http://gifanimation.ru/images/raznoe/129.gif........................ 22
http://gifanimation.ru/images/lica/77.gif............................... 23
http://gifanimation.ru/images/lica/174.gif............................. 24
http://i075.radikal.ru/1003/ee/a7c022c1f226.jpg.................. 25
http://s46.radikal.ru/i113/1003/4d/7d9f9b4e092b.jpg........... 26
http://i3.wall-papers.in.ua/uploads/gallery_photo/photo/0080/56_thumb_80.jpg.....27
http://i1.wall-papers.in.ua/uploads/gallery_photo/photo/0079/92_thumb_80.jpg.....28
http://i2.wall-papers.in.ua/uploads/gallery_photo/photo/0096/00_thumb_80.jpg.....29
http://i1.wall-papers.in.ua/uploads/gallery_photo/photo/0098/73_thumb_80.jpg.....30
Рис. 3.2. URL-адреса рисунков.
3.4.2.Иллюстрации играют значительную роль в оформлении веб-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются они браузером внутри веб-страницы. Для расположения рисунков на веб-странице в html-документе применяется одиночный тэг <img>. Этот тэг всегда должен содержать обязательный атрибут src=, значением для которого является URL-адрес файла изображения, записанный вабсолютнойилиотносительнойформах.
При загрузке документа вместе с ним загружается рисунок и отображается в том месте документа, где расположен тэг <img>. Изображение переносится на веб-страницу с сохранением размера. Если при компоновке изображения необходимо изменить его масштаб, нужные размеры рисунка можно задать в пикселях с помощью атрибутовwidth=(ширина) иheight=(высота).
3.4.3.Использование иллюстраций на веб-страницах связано с некоторыми сложностями. Во-первых, веб-страница может отображаться браузером, который не имеет средств для показа изображений. Во-вторых, пользователи часто отключают отображение рисунков для ускорения приема веб-страницы. В обоих случаях желательно знать, что изображено на невидимой картинке. Для этой цели используютальтернативныйтекст,который предоставляет более-менее подробное описание изображения. Альтернативный текст определяется тэгом <img> и значением специального атрибутаalt=.
3.4.4. На рис. 3.2 выбратьURL-адрес, порядковый номер которого отвечает номеру пользователя в списке группы, переписатьURL-адрес в рабочую тетрадь.
Открыть окно браузера Opera.Нажатием на панели инструментов Стандартная кнопкиОткрыть(см. Задание 3.3) вызывать на экран папку пользователя, а в ней - текстовый файл html-документа. Удалить предыдущий URL-адрес изображения (строка 18) и ввести новый URL-адрес, соответствующий варианту пользователя.
Сохранить новую редакцию файла с названием, например, Иванов_Веб_2и завершить работу браузера.
В окне Total Commanderдвойным нажатием ЛК мыши проверить результат распознавания веб-страницы с измененным адресом рисунка. В случае несоответствия распознавания повторить редактирование.
Задание 3.5.Исследовать способы использования цветной палитры.
Цвета текста, ссылок, заголовки html-документа можно указывать внутри html-тэгов: например,
<font color="цвет"> <body text="цвет">
Любой цвет на экране монитора определяется смешением трех цветов - красного (red), зеленого (green) и синего (blue). Первые буквы этих слов определяют цветовую модельRGB. Указать цвет можно его названием; например <font color="red">Текст будет красным</font>.
Иным способом указания цвета есть применение цифрового кода, в котором для описания цвета используются шесть символов шестнадцатеричной системы исчисления; например,
<font color= #FF0000>Текст будет красным</font>.
Перед кодом ставится символ #(диез); первые два символа (FF) представляют составляющую красного цвета, вторая пара (00) - зеленого цвета и третья пара (00) - синего цвета (рис. 3.3).
=#000000 black (черный) 
=#008000 green (зеленый)
=#C0C0C0 silver (серебро)
=#00FF00 lime (св.-зеленый)
=#808080 gray (серый)
=#808000 olive (оливковый)
=#FFFFFF white (белый)
=#FFFF00 yellow (желтый)
=#800000 maroon (малинов.)
=#000080 navy (темно-синий)
=#FF0000 red (красный)
=#0000FF blue (синий)
=#800080 purple (фиолетов.)
=#008080 teal (сизый)
=#FF00FF fuchsia (лиловый)
=#00FFFF aqua (бирюзовый)
Рис. 3.3. Названия цветов и значения RGB.
Цвета могут существенно добавлять информации в документ, повышая удобство чтения и восприятия; однако при использовании цветов необходимо учитывать следующие особенности:
1) использование элементов и атрибутов HTML для указания цвета является нежелательным; вместо этого следует использовать таблицы стилей;
2) не следует использовать комбинации цветов, которые вызывают осложнения в отображении;
3) при использовании изображения как фона или при указании цветов фона не следует забывать и об определении цвета текста
4) цвета, указанные в тэгах bodyиfontи вbgcolor, выглядят по-разному в таблицах, в разных компьютерах и системах.
Задание 3.6.Исследовать способы управления стилем шрифта.
3.6.1.Для создания размера, цвета и отображения шрифта служит парный тэг <font>, который влияет на весь текст, расположенный внутри него.
Тэг <font> должен иметь хотя бы один из трех возможных атрибутов:size=;color=;faсe=.
Атрибут size=определяет размер шрифта. Предполагается, что возможны семь заранее указанных размеров шрифта. Эти значения не соответствуют каким-то единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию используется значение 3.
3.6.2.Атрибутcolor=определяет цвет шрифта, который может быть указан либо ключевым словом (red- красный), либо в системеRGBшестнадцатеричным значением (#FF0000- красный).
3.6.3.Атрибутfase=определяет вид шрифта. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещенного в Интернете, нельзя предусмотреть какие шрифты доступны на компьютере пользователя, поэтому этот атрибут лучше не использовать.
3.6.4.Для указания приведенных параметров для всего документа, используют одиночный тэг <basefont>. Он содержит аналогичные атрибуты и указывает вид, цвет и размер шрифта, используемых по умолчанию.
3.6.5.Специальная группа тэгов используется для изменения изображения шрифта:
<b> и </b> делают текст между ними полужирным;
<i>и </i>определяют курсивное изображение;
<u> и </u> определяют подчеркивание;
<s> и </s> определяют вычеркивание текста.
3.6.6.Изучить представленные ниже примеры тэгов.
<html>
<head>
<title> Управление стилем шрифта </title>
</head>
<body>
<basefont size=4 face=”Arial”>
Этот текст использует нестандартный стиль шрифта заданный по умолчанию.
<p><font size=-2 face=”Times New Roman” color=”green”>
Этот текст мельче и использует другой шрифт и другой цвет.
</font>
<p><b> Полужирный шрифт </b> и <i> курсив </i> используют
для выделения фрагментов текста.
<p> Использование <u> подчеркивание </u> не рекомендуется,
поскольку подчеркнутый текст легко перепутать с ссылкой.
<p><s> Вычеркивание текста </s> иногда применяют для
разметки фрагментов, которые потеряли актуальность, но по каким-то причинам хранятся в документе.
</body>
</html>
Задание 3.7.Усвоить принципы качественного представления html-документов.
3.7.1.Творческий характер создания html-документов подобен программированию; при этом возможны ошибки, которые могут привести к невозможности распознать созданный html-документ. Веб-страницы предназначаются для широкого круга пользователей и поэтому при подготовке html-документов следует учитывать эти особенности.
3.7.2.Содержание документа значительно важнее внешнего вида. Содержание веб-страницы или группы веб-страниц должно быть связанным логически. Хорошо продуманная система ссылок должна позволять переходить от страницы к странице и возвращаться назад практически без использования кнопок навигацииВпередиНазадна панели инструментов браузера.
3.7.3.Для того, чтобы html-документ был доступен самой широкой аудитории, следуетотставать на один шагот последних достижений в развитии языкаHTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям нужно время для того, чтобы достичь большинства пользователей. Документы с использованием самых последних достижений доступны лишь ограниченной аудитории.
3.7.4.Ошибка, свойственная начинающим пользователям, заключается в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричаще. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой гаммой или при отсутствии необходимых шрифтов.
3.7.5.Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При наличии таких объектов увеличивается время чтения веб-страницы и пользователь потеряет к ней интерес еще до того, как получит возможность что-то прочитать.
3.7.6.Поскольку создание html-документов подобно программированию, процесс поиска и исправления ошибок необходим и при создании веб-страницы. Большинство ошибок можно найти еще до того, как страница будет доступна посторонним читателям. К числу ошибок, которые нужно исправлять, входят также грамматические и печатные ошибки.
3.7.7.Интернет содержит миллионы веб-страниц с предложениями идей оформления, которыми можно воспользоваться. Достоинство этого подхода состоит в том, что таким способом можно увидетьчтосделано икаксделано.
3.7.8.Размещение самой важной информации в верхней части страницы позволяет с пользой расходовать время, на протяжении которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не требует значительного труда, но высоко ценится. Наличие большого количества гиперссылок на странице не только помогает пользователям плодотворно путешествовать по пространствам Интернет, но и побуждает их раз за разом возвращаться на страницу, которая предоставила им такую возможность.