Сетевые технологии

Размещено на http://www.allbest.ru/

1. Локальная сеть

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

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

Локальные сети (ЛС) -- это объединение двух и более компьютеров в пределах сравнительно небольшой территории (не более нескольких км) с помощью каналов передачи данных. Так как значительный объем информации (иногда до 80%) передается в пределах одной организации (здания), то возникла необходимость безбумажных технологий и быстрой передачи данных между компьютерами вычислительной сети. Локальные сети позволяют отдельным пользователям легко и быстро взаимодействовать друг с другом:

1) совместно работать с документами, упростить документооборот, просматривать, корректировать и комментировать документы, не покидая своего рабочего места, не организовывая совещаний, отнимающих время; централизованно сохранять и архивировать свою работу;

2) совместно использовать дорогостоящие ресурсы: принтеры, накопители на жестких дисках, программы управления базами данных и другие программные продукты, имеющие сетевые версии

1.1 Топология сетей

Способ соединения компьютеров в сеть называют топологией сети, а правила обмена данными называют протоколом.

Основные виды топологии ЛС:

1) шинная;

2) кольцевая;

3) звездообразная.

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

Шинной называется такая топология, когда к незамкнутому каналу (шине) поочередно подключаются компьютеры, которые называются сетевыми узлами или абонентами сети.

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

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

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

Однако из-за наличия концентратора такая сеть может оказаться дороже, да и ремонт или замена концентратора дороже замены вышедшего из строя куска кабеля и, как правило, занимает больше времени. Основная функция концентратора состоит в объединении пользователей в один сетевой сегмент. Кроме этого, данные устройства могут обеспечивать функции центрального узла сети, осуществляющего задачи управления, играть важную роль в системе защиты сети и поддерживать целый ряд стандартов (Ethernet, Fast Ethernet и т. д.). Концентраторы бывают разных видов и размеров и могут работать как в сети, состоящей из нескольких компьютеров в школьном кабинете информатики или небольшой фирме, так и в сети с сотнями компьютеров, охватывающей комплекс зданий. Компьютер подключается к сети с помощью сетевой карты (сетевого адаптера). Сетевая карта устанавливается в один из свободных слотов материнской платы.

1.2 Сети одноранговые и с выделенным сервером

По принципам организации обмена информацией локальные сети делят на одноранговые и сети с выделенным сервером.

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

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

Обработка данных в компьютерных сетях распределена между двумя объектами: клиентом и сервером.

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

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

Архитектура "клиент-сервер" может использоваться как в одноранговых локальных сетях, так и в сетях с выделенным сервером.

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

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

Оба вида сетей имеют и достоинства, и недостатки.

Достоинства одноранговых сетей: 1) высокая надежность;

2) "прозрачность" работы сети для пользователей;

3) низкая стоимость;

4) простота управления по сравнению с сетями с выделенным сервером.

Недостатки одноранговых сетей:

1) зависимость эффективности работы от количества станций;

2) сложность обеспечения защиты информации;

3) трудности обновления и изменения программного обеспечения станций.

Достоинства сетей с выделенным сервером:

1) надежная система защиты информации;

2) высокое быстродействие;

3) отсутствие ограничений на число рабочих станций;

Недостатки сетей с выделенным сервером:

1) более высокая стоимость, т. к. нужно выделять один компьютер под сервер;

2) меньшая гибкость по сравнению с одноранговыми сетями.

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

1.3 Как перенастроить сеть с выделенным сервером в одноранговую

1. Щелкнуть на Рабочем столе на ярлычке Мой компьютер правой кнопкой мыши.

2. Выбрать из контекстного меню команду Свойства.

3. В открывшемся диалоговом окне открыть вкладку Имя компьютера.

Щелкнуть на кнопке Изменить.

В открывшемся диалоговом окне выбрать рабочую группу вместо домена и ввести ее имя.

Несколько локальных сетей можно объединить с помощью специального устройства -- маршрутизатора. Желательно, чтобы эти локальные сети работали под управлением одной операционной системы.

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

1.4 Доступ к сети

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

1.5 Автономные папки

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

Автономные папки доступны всегда независимо от доступности компьютера сети, на котором они находятся. При включении и выключении компьютера их содержимое, проверяется на соответствие текущему состоянию этих папок на сетевом компьютере (синхронизируется).

2. Интернет, его службы, подключение к сети, электронная почта. История интернета и его служб

До середины 90-х годов прошлого века Интернет был доступен относительно узкому кругу научных сотрудников, а его наполнение не отличалось особым разнообразием. Обмен электронными письмами, общение в группах новостей по интересам с помощью текстовых сообщений, доступ к ограниченному числу серверов по Telnet и получение файлов по FTP (File Transfer Protocol, протокол передачи файлов) было доступно немногим до 1991 года, когда появилось новое приложение -- Gopher. Оно впервые позволило свободно перемещаться по глобальным сетям без предварительного знания адресов необходимых серверов. Примерно в это же время появилось сообщение о разработке новой технологии -- Всемирной паутины (WWW, World Wide Web). В 1989 году сотрудник Европейского Центра Ядерных Исследований (CERN, European Center for Nuclear Research) Тим Бернерс-Ли (Tim Berners-Lee) разработал технологию гипертекстовых документов WWW и протокол передачи гипертекста (HTTP, HyperText Transmission Protocol). На начальном этапе сервис WWW предназначался для обмена информацией среди физиков, работавших в разных лабораториях. 17 мая 1991 года на вычислительных системах CERN была установлена окончательная версия первого в мире Web-сервера. Именно эту дату и принято считать официальной датой рождения сети Интернет!

2.1 Система адресации

В 1983 году в Университете штата Висконсин была создана система доменных имен DNS (Domain Name System). Эта система позволила людям обращаться к компьютерам в сети Интернет, используя символические имена вместо цифровых адресов.

Для компьютера в сети устанавливается 2 адреса: цифровой IP-адрес и доменное имя. Пользователи могут использовать как цифровой адрес, так и доменное имя. Первый может быть сразу использован для поиска нужного компьютера в сети, второе -- преобразуется DNS-сервером в соответствующий IP-адрес.

Цифровой адрес имеет длину 32 бита. Для удобства он разделен на 4 блока по 8 бит, где 2 блока -- адрес сети, 1 блок -- адрес подсети, 1 блок -- адрес компьютера. Блоки записывают в десятичном виде, например, 210.101.2.230. Такие адреса, однако, неудобны для людей, поэтому и существует параллельная система символических имен или адресов. Например, proxy.soros.spb.ru. Здесь ru означает домен первого уровня Россия, spb -- домен второго уровня Санкт-Петербург.

Доменный адрес в отличие от цифрового читается и обрабатывается в обратном порядке. Сначала имя домена первого уровня, потом имя домена второго уровня и лишь в последнюю очередь, имя искомого компьютера. В системе DNS используются домены, представляющие географические регионы. Они имеют имя, состоящее из двух букв: Франция -- fr, Канада -- са, Россия -- ru. Существуют и домены, разделенные по тематическим признакам, они имеют 3-буквенное сокращение: учебные заведения -- edu, правительственные учреждения -- gov, коммерческие -- com.

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

В окне браузера под панелью инструментов находится адресная строка, в которую вводится адрес интернет-ресурса в формате универсального указателя ресурса URL (Uniform Resource Locator).

Например, типичный URL: http://www.network.com/info/index.htm состоит из четырех частей. Первая -- наименование протокола, (http, HyperText Transfer Protocol, протокол передачи гипертекста) с двумя наклонными чертами и двоеточием. Вторая часть -- тип ресурса (в примере www -- ресурс Всемирной паутины), после которого ставится точка, третья часть -- доменное имя (в данном примере, network.com), за которым следует косая черта. Третий компонент -- путь к документу и сам документ (info/index.htm).

2.2 Подключение

Самый распространенный способ подключения к Интернету -- это IP-подключение (IP, Internetwork Protocol, межсетевой протокол). Подключение может быть постоянное (по выделенной линии) или сеансовое (по коммутируемой линии). Для подключения следует сначала создать соединение.

Услуги по подключению оказывает фирма-провайдер (поставщик). Нет необходимости связываться с провайдером лично, достаточно купить в компьютерном магазине, на почте, в отделении Сбербанка или в почтовом отделении интернет-карту на 1--100 часов и выполнить указанные в ней необходимые для подключения инструкции.

2.3 Электронная почта

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

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

Адрес электронной почты состоит из имени пользователя (индивидуальная составляющая) и интернет-адреса в форме доменного имени, разделенных значком @. Например, sel@mail.ru. Доменное имя является как минимум 2-уровневым. В нашем примере га -- имя домена первого уровня, и mail -- доменное имя почтового сервера на втором уровне. Каждый уровень отделяется точкой.

В операционной системе Windows работу с электронной почтой обеспечивает приложение Microsoft Outlook Express. С помощью этой программы можно выполнять:

· подготовку текста письма;

· чтение и сохранение корреспонденции;

· удаление корреспонденции;

· ввод адреса в адресную книгу;

· комментирование и пересылку корреспонденции;

· пересылку вместе с письмом других файлов (вложений);

· пересылку полученных сообщений по другим адресам.

Для передачи данных по электронной почте используются специальные протоколы. Почтовый протокол РОРЗ (Post Office Protocol) -- самый популярный протокол приема электронной почты. Он работает в паре с Простым почтовым транспортным протоколом SMTP (Simple Mail Transport Protocol), который предназначен для пересылки почты между серверами и сохранения их в почтовых ящиках пользователей.

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

РОРЗ предоставляет пользователям возможность иметь несколько почтовых ящиков, созданных по принципу: одна учетная запись -- один ящик, т. к. одна из функций протокола -- Авторизация. Как только будет установлено TCP-соединение с РОРЗ-сервером, он отправляет приглашение и РОРЗ сессия переходит в режим AUTHORIZATION (Авторизация). Клиент должен идентифицировать себя на сервере по имени и паролю, которые вводятся при создании учетной записи. Если сервер отвечает положительно, то после успешной авторизации сервер открывает почтовый ящик. Протокол работает с любой операционной системой, исключая только DOS.

3. WWW (World Wide Web Всемирная паутина) - одна из самых популярных служб Интернета

Вплоть до 1993 года WWW представлял собой черно-белый текстовый ресурс. Лишь в 1993 году в Национальном Центре Суперкомпьютерных Приложений (NCSA, National Center for Supercomputing Applications) был создан первый графический интерфейс к World Wide Web -- браузер Mosaic (программа-просмотрщик Web-ресурсов). Mosaic оказался настолько популярен, что один из разработчиков программы Марк Андриссен (Mark Andreessen) основал компанию Netscape, занявшуюся разработкой аналога Mosaic -- браузера Netscape Navigator. Именно с созданием нового браузера в 1994 году доступ к сети Интернет широким массам пользователей был открыт. Его появление не только упростило доступ к информации Всемирной паутины, но, главное, позволило размещать в сети практически все виды данных. На смену текстовым черно-белым приложениям пришла мультимедийная среда, наполненная графикой, анимацией, аудио- и видеоданными. Это сразу же привлекло большее число пользователей, что, естественно, побудило все большее число организаций размещать в Интернете свою информацию. Таким образом, технология WWW позволила обеспечить доступ к любой информации, находящейся в сети Интернет, на компьютерах по всему миру Для просмотра Web-ресурсов кроме браузера Netscape Navigator, широко используется также Microsoft Internet Explorer.

3.1 Настройка свойств обозревателя для защиты от негативной информации. Фильтры

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

К сожалению, средствами обозревателя абсолютную защиту установить не удастся. Формирование концепции информационной безопасности, организация и обеспечение соответствующих образовательных курсов -- одно из направлений федеральной целевой программы "Развитие единой образовательной информационной среды (2001--2005 годы)".

4. Язык HTML

Язык разметки гипертекста HTML (Hypertext Markup Language). Команды языка HTML (тэги) и их атрибуты. Структура HTML-документа. Форматирование текста, создание фона. Вставка графики, звука, видео, бегущая строка. Отступы и списки, таблицы. Система навигации, ссылки, фреймы, изображение-карта. Интерактивные Web-страницы.

Общие понятия. Язык разметки гипертекста HTML (Hypertext Markup Language)

WWW (Word Wide Web) -- система навигации, поиска и доступа к мультимедийным ресурсам с помощью средств гипертекста.

Гипертекст -- текст, содержащий связи с другими текстами, графической, видео- или звуковой информацией.

Обмен информацией во Всемирной паутине происходит согласно протоколу HTTP. Сама же информация представлена на языке разметки гипертекста HTML (Hyper Text Markup Language).

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

Главный признак гипертекстовых документов -- наличие гиперссылок.

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

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

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

Команды языка HTML (тэги) и их атрибуты

Команды (тэги) предназначены для форматирования и разметки документа. Любая команда начинается символом < и заканчивается символом >. При написании имен команд регистр не имеет значения, можно использовать как строчные, так и прописные буквы. Команды заключаются в угловые скобки. Например, тэг <big> означает увеличение на 1 пункт размера шрифта.

Существует два вида команд (тэгов): парные и непарные. Парные тэги -- это такие команды, которые используются парой (открывающий и закрывающий тэги).

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

Непарный тэг вызывает одноразовое действие в том месте, где он встречается. Например, тэг <br> служит для перехода на новую строку при выводе текста.

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

У многих тэгов есть свои атрибуты. Их назначение -- дополнять тэги, позволяя более подробно описывать действия над текстом или графикой или другими объектами.

Формат (т. е. правила записи) тэгов:

< тэг атрибут="значение" атрибут="значение"...>

Атрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать, чтобы не запутаться, т. к. непарные кавычки могут привести к ошибке.

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

Все HTML-документы имеют общую структуру. Они начинаются и завершаются тэгом <HTML>. Внутри этого блока есть 2 блока. Первый -- блок служебной информации между тэгами <head> (вообще говоря, он не является обязательным, его отсутствие не повлияет на то, что мы увидим в окне обозревателя), а второй -- блок, содержащий основную часть HTML- документа, -- заключен между тэгами <body>.

Таким образом, почти у всех HTML-документов есть "голова" и "тело". Лучше, конечно, "голову" не терять. Она, как будет показано дальше, может сослужить хорошую службу.

Тэги служебной информации

<head> -- начинает блок служебной информации;

</head> -- завершает блок служебной информации;

<title> -- начинает блок информации, которая будет отображаться в строке заголовка обозревателя;

</title> -- завершает блок информации, которая будет отображаться в строке заголовка обозревателя;

<мета> -- содержит служебную информацию.

Атрибуты тэга <META>

Каждый тэг <мета> содержит пару атрибутов name и content, определяющих соответственно тип данных и содержание.

Варианты:

<МЕТА name=keywords content="словo1, слово2,..." >

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

<МЕТА name=Description content="coflep:scaHHe страницы" > описывает краткое содержание страницы;

<МЕТА name=Author content^:="MMH автора" > указывает имя автора;

«МЕТА HTTP-EQUIV=refresh content=5 url=http://www.upm.ipschool.spb.ru>

через 5 секунд автоматически загрузит сайт с указанным адресом, интервал времени и адрес задаем по своему усмотрению.

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

<!--Текст комментария-->

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

Форматирование текста, создание фона

Форматирование текста. Создание фона.

Форматирование текста

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

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

Тэг абзаца

<р> -- абзац;

</р> -- конец абзаца.

Атрибуты тэга <р> для выравнивания текста

Атрибуту align может быть присвоено одно из четырех значений:

LEFT RIGHT CENTER JUSTIFY

Он позволяет выравнивать текст по левому, правому краю, по центру или по ширине.

Например:

<Р ALIGN = CENTER> текст </Р>

Желательно выравнивать текст по ширине, тогда страничка выглядит аккуратнее. Если текст выравнивается по одному краю, то предпочтительнее выравнивать край, прилегающий к картинке. Следует помнить, что действие атрибута align распространяется только на данный абзац, на фрагмент, заключенный между парными тэгами <р> и </р>.

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

Вот эти тэги:

<HN> -- изменение размера шрифта;

</HN> -- отмена выбранного размера шрифта (n может принимать значения от I до 6).

<B> -- полужирный шрифт;

</B> -- отмена полужирного шрифта;

<I> -- курсив;

</I> -- отмена курсива;

<U> -- подчеркивание;

</U> -- отмена подчеркивания;

<ем> -- выделение;

</ем> -- отмена выделения;

<strong> -- усиленное выделение;

</strong> -- отмена усиленного выделения;

<BIG> -- увеличение шрифта относительно текущего;

</BIG> -- отмена увеличения шрифта относительно текущего;

<SMALL> -- уменьшение шрифта относительно текущего;

</SMALL> -- отмена уменьшение шрифта относительно текущего;

<SUP> -- текст сдвигается вверх (верхний индекс);

</SUP> -- отмена сдвига;

<SUB> -- текст сдвигается вниз (нижний индекс);

</SUB> -- отмена сдвига.

Перечисленные тэги не имеют атрибутов, а вот следующий тэг имеет несколько атрибутов.

<FONT> -- изменение шрифта;

</FONT> -- отмена действия шрифта.

Атрибуты тэга <font>

color= название цвета -- изменение цвет текста.

Например:

<FONT COLOR= red> текст </FONT>

приведет к выводу текста красным цветом.

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

Атрибуты тэга <font>

Значение атрибута	Цвет	Значение атрибута	Цвет
Red	Красный	green	Зеленый
Black	Черный	maroon	Темно-красный
Olive	Оливковый	navy-	Синий
Aqua	Морской волны	purple	Фиолетовый
Teal	Зеленовато-синий	lime	Известковый
fuchsia	Ярко-малиновый	silver	Серебристый
White	Белый	yellow	Желтый
Blue	Синий	grey	Серый

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

face= название шрифта -- изменение гарнитуры (начертания) шрифта. Например:

<FONT FACE = Arial> текст </FONT>

приведет к выводу текста шрифтом Arial.

size=размер шрифта -- изменение размера шрифта фрагмента текста, используется в середине строки, т. к. после окончания своего действия не разбивает строку.

Например:

<FONT SIZE = 4> текст </FONT>

Атрибуты могут перечисляться через пробел в произвольном порядке. Например:

<FONT SIZE = 4 FACE = Times New Roman COLOR= Black > текст </FONT>

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

Создание фона

Фон страницы задается в начале основной части документа, т. е. атрибутами тэга <BODY>.

Атрибуты тэга <body> для изменения цвета текста и фона

ТЕХТ= цвет

Задает цвет текста.

Например:

<BODY TEXT =7ЕАЗВ8>

Значением атрибута может служить название цвета или его код.

BGCOLOR= цвет

Изменение фонового цвета страницы, используется тэгом <body>. Например:

<BODY BGCOLOR =Black>

Вместо английского названия цвета в качестве значения атрибута можно также указать его шестнадцатеричный код.

BACKGROUND= имя файла

Использование в качестве фона изображения из файла.

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

BGPROPERTIES=FIXED

Создание фона-"водяного знака" (фона, который не перемещается вместе с текстом).

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

Например:

<BODY BACKGROUND =gelicopter.gif BGPROPERTIES=FIXED>

Вставка графики, звука, видео, бегущая строка

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

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

Вставка графических изображений, различные способы обтекания их текстом. Требования к графическим изображениям.

Практическая работа № 1

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

Задание: Создать в Блокноте HTML-документ.

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

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

Для выполнения необходимо знать:

Как вставлять графические изображения

<IMG SRC=MMH ФАЙЛА.РАСШИРЕНИЕ> -- вставка картинки из файла.

Атрибуты тэга <IMG>

SRC=MMH файла.расширение.

Данный атрибут необходимо указывать для каждого тэга <IMG>. Он определяет имя и путь к файлу с изображением. Это может быть графический файл типа GIF, JPEG или PNG.

Один из самых распространенных графических форматов в Web-дизайне -- это GIF-формат (Graphic Interchange Format). Этот формат допускает прозрачный фон картинки или прозрачные ее фрагменты, а также поддерживает анимированные изображения (состоящие из нескольких изображений, которые через заданные промежутки времени сменяют друг друга). Создание таких изображений называют GIF-анимацией.

Для кодирования цвета в этом формате используется 8 бит, т. е. возможно использовать 256 цветов.

Формат PNG (Portable Network Graphics) -- тоже довольно распространенный и удобный формат, в нем используется 24 бита для кодирования изображения, и он тоже поддерживает прозрачность фрагментов изображения.

Еще один графический формат, используемый в Web-дизайне, -- JPG или JPEG (Join Photographic Experts Group). Он также использует 24- битовое кодирование цвета. Но при сжатии возможно искажение цвета.

Графические файлы не должны иметь большой размер (несколько десятков килобайт, не более). Все перечисленные. форматы обеспечивают минимальные размеры графических файлов, если не использовать очень большие размеры картинок и очень большое разрешение. Это нужно учитывать при подборе материалов для страницы. При сканировании не следует выбирать большое разрешение (больше 200 dpi), что приведет к увеличению размера графического файла, и картинка будет очень долго загружаться.

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

ALT=название картинки или поясняющий текст

Используется в качестве текстового описания к данному изображению.

WIDTH=ширина картинки (в пикселах или в%)

Если этот атрибут указан одновременно с атрибутом hight, то это дает возможность браузеру для очередного изображения заранее зарезервировать место на экране еще до того, как сама картинка будет доставлена ему по сети.

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

НIGНТ=высота картинки (в пикселах или в%).

BORDER=число (в пикселах) -- определяет рамку вокруг изображения.

HSPACE= число (в пикселах) -- определяет отступ по горизонтали от изображения до текста.

VSPACE=число (в пикселах) -- определяет отступ по вертикали от изображения до текста.

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

Соотношение текстовой и графической информации

Соотношение текстовой и графической информации должно быть тщательно продумано. Читать длинный текст с экрана достаточно утомительно, если его не оживить иллюстрациями. И потом не следует забывать о том, что графическая информация порой не менее значима, чем текстовая. Очень важно, чтобы иллюстрации, текст и фон, кнопки и другие элементы оформления хорошо сочетались по цвету. Выбор правильной цветовой схемы в большей степени зависит от темы, содержания страницы, а также аудитории, для которой она предназначается. Но какова бы ни была аудитория, страница не должна быть слишком пестрой или, наоборот, мрачной и унылой. О вкусах следует спорить, и если вы принимаете дизайнерские решения, попробуйте аргументировано объяснить свой выбор хотя бы самому себе. Достижение цветовой гармонии -- это большое искусство. Одним из выразительных средств является бегущая строка. Некоторые считают ее устаревшим элементом. Но, думается, что бегущие строки можно и нужно использовать, размещая в них не только текст, но и картинки, что позволит создать интересный эффект движущейся галереи. Можно в бегущей строке поместить и анимированное изображение, и тогда, например, веселый Дед Мороз не будет топтаться на месте, а забавно засеменит по странице.

Бегущие строки

<marquee> -- начало бегущей строки;

</marquee> -- конец бегущей строки.

Фрагмент текста, картинки или любые другие объекты между этими тэгами будут двигаться так, как определят атрибуты.

Атрибуты тэга <marquee>

WIDTH = ширина области бегущей строки (В пикселах или в% от высоты экрана).

BGCOLOR = название цвета ИЛИ его код

Определяет цвет фона бегущей строки.

Определяет режим вывода ("поведения") бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.

SCROLLAMOUNT -- скорость перемещения текста или графики в строке [1-- 3000].

HIGHT -- высота бегущей строки (в пикселах или в% от высоты экрана).

HSPACE -- ширина левого и правого полей между областью бегущей строки и окружающим ее текстом или графикой (в пикселах или в% от высоты экрана).

VSPACE -- размер отступа сверху и снизу от бегущей строки до текста или графики (в пикселах или в% от высоты экрана).

Вставка в HTML-документ видео и звука.

Создание в Блокноте HTML-документа, содержащего видео и звук.

Для выполнения необходимо знать:

Как вставлять видео и звук

<BGSOUND SRC = имя файла>

Вставка звукового файла.

Например:

<BGSOUND SRC = "BLIP.WAV">

<IMG DYNSRC = имя файла>

Вставка видео файла.

Атрибут тэгов <BGSOUND> И <BGSOUND SRC>

LOOP: n

INFINITE

Количество повторений видео- или звукового клипа и непрерывное повторение соответственно.

Как вставлять видео и звук с панелью управления

<EMBED SRC = имя файла

Вставка звукового или видеофайла.

Атрибуты тэга <EMBED SRC>

HEIGHT -- высота окна, в котором будет воспроизводиться видеоклип или размеры панели для звука (в пикселах или%).

WIDTH-- ширина окна, в котором будет воспроизводиться видеоклип или размеры панели для звука (в пикселах или%).

AUTOSTART= true (или false) -- означает автоматическое воспроизведение (или запуск по нажатию кнопки воспроизведения).

Отступы и списки, таблицы

Отступы и списки

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

Практическая работа № 3

Создание в Блокноте простого HTML-доку мента, содержащего списки.

Задание: Создать в Блокноте HTML-документ.

(Текст перенести из текстового файла в HTML-документ копированием).

Для выполнения необходимо знать:

Как создавать списки

Есть два вида списков: ненумерованные (маркированные) и нумерованные.

Тэги для ненумерованных списков:

<UL> (unordered List) -- начало списка.

</UL> -- конец списка.

<LI> (List item) -- элемент списка.

Атрибут тэгов <UL>, </UL>, <LI>

Первый тип создает маркеры в виде окружностей, второй -- в виде пустых квадратов, третий -- в виде закрашенных квадратов. Например:

<UL TYPE=DISC>

<LI>... первый пункт списка

<LI>... второй пункт списка

</UL>

Тэги для нумерованных списков:

<OL> (Ordered List) -- начало списка.

</OL> -- конец списка.

<LI> (List item) -- элемент списка.

Атрибуты тэгов <OL> и <LI>

Нумерация арабскими цифрами, русскими буквами, римскими цифрами Например:

<OL TYPE=1>

<LI>... первый пункт списка <LT>... второй пункт списка

</OL>

Список будет нумероваться цифрами 1, 2, 3.

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

SKIP=количество пропущенных серверов

Например:

<OL SKIP=4>

Такая запись означает, что будет пропущено четыре следующих номера.

START=номер, с которого будет начата нумерация списка

Например:

<OL TYPE=I START=3>

Такая запись означает, что нумерация начнется с римской цифры III.

VALUE= номер, который будет присвоен данному пункту списка

Например:

<LI VALUE = 13>

<LI VALUE = 25>

Такая запись означает, что после номера 13 в списке будет стоять номер 25.

Таблицы (простые и сложные) Практическая работа № 4_1

Создание в Блокноте HTML-документа, содержащего таблицу.

Задание: Создать в Блокноте HTML-документ.

(Тексты перенести из текстового файла в HTML-документ копированием).

Для выполнения необходимо вспомнить, как создавать эффект верхнего и

нижнего индекса (применить тэги <sup> и <sub>).

Для выполнения необходимо знать

Как создавать таблицы

<TABLE> -- начало таблицы.

</TABLE> -- конец таблицы.

<CAPTION> -- начало заголовка таблицы.

</CAPTION> -- конец заголовка таблицы.

Заголовок располагается прямо по центру относительно ширины таблицы.

<TH> (Table Header) -- начало заголовков столбцов или строк таблицы.

</TH> -- конец заголовков столбцов или строк таблицы.

<TR> (Table Row) -- начало строки таблицы.

</TR> -- конец строки таблицы.

<TD> -- начало ячейки таблицы.

</TD> -- конец ячейки таблицы.

Атрибуты тэга <TABLE>

WIDTJ=ширина таблицы (в пикселах или%).

BORDER=ширина границы таблицы (в пикселах ИЛИ%).

CELLS РАС ING=ширина промежутков между ячейками (в пикселах ИЛИ%).

CELLPADDING=ширина промежутков между содержимым ячейки и ее границами (в пикселах или%).

Листинг 4.1

<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH=80%> <САРТION>заголовок таблицы</САРТION>

<TR>

<TD> первая ячейка таблицы </TD>

<TD> вторая ячейка таблицы </TD>

</TR>

</TABLE>

Интерактивные Web-страницы. Формы. Создание интерактивных HTML-документов.Формы.

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

Практическая работа № 9

Создание в Блокноте HTML-документа, содержащего форму. Задание: Создать в Блокноте HTML-документ, содержащий форму с разными типами полей (например, анкету с возможностью вложения своей фотографии).

Для выполнения необходимо знать:

Как создавать формы

Форма создается с помощью парных тэгов: <FORM></FORM>

Тег <FORM> используется в языке HTML для создания заполняемых форм. Причем можно иметь сразу несколько форм в одном и том же документе. Между <FORM> и </FORM> можно использовать большой набор элементов HTML. Кроме того, при создании форм можно задавать поля нескольких типов (текстовые ноля в одну или несколько строк, группы радиокнопок (их еще называют переключателями), окошки, в которые можно устанавливать флажки, меню, командные кнопки).

Атрибуты тэга <FORM >

ACTION=адрес

Определяет URL-адрес, который используется: либо для отправления формы по электронной почте, например:

ACTION ="mailto:имя0сервер.домен"

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

ACTION -"http://www.prim.com/cgi- bin/reg.pl"

METHOD

Определяет, какой из HTTP-методов будет использоваться для пересылки серверу (адрес которого задан предыдущим атрибутом) содержимого текущей формы. Это может быть либо GET, либо POST (по умолчанию используется GET).

ENCTYPE

Этот атрибут определяет механизм, который следует использовать при кодировании содержания данной формы. По умолчанию используется application/x-www-form- urlencoded. Поля заполняемых форм:

В пределах тэга <form> разрешается использовать тэги <INPUT>, <SELECT>

И <TEXTAREA>.

<INPUT>

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

<SELECT>

Используются для разметки меню с единственным или множественным выбором.

<TEXTAREA>

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

Атрибуты тэга <INPUT>

TYPE-тип поля

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

Например:

TYPE =text (по умолчанию)

(Создает ноле ввода под одну строку текста, чей размер можно устанавливать посредством атрибута)

SIZE -значение в пикселах

Например:

SIZE = 40

Задает поле длиной, достаточной для ввода 40-а символов.

MAXLENGTH-количество символов

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

NAME-имя

Служит для присвоения имени данному полю.

VALUE-количество символов

Задает строку, которая при загрузке документа будет сразу выводиться в этом поле.

Например:

<INPUT TYPE=text SIZE=30 NAME=name VALUE=Имя>

<INPUT TYPE=password SIZE=10 NAME=pw VALUE="Введите пароль">

TYPE=password

Подобен атрибуту TYPE-text, но в данном случае вводимые символы отображаются на экране в виде условных значков, таких как *. Делается это, чтобы скрыть текст от любопытных глаз при вводе паролей с клавиатуры.

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

TYPE=checkbox

Этот тип используется для ввода в заполняемую форму простых значений булевого типа ("да"/"нет") либо для ввода некой величины, которая одновременно может характеризоваться по нескольким позициям. Последний вариант реализуется в форме в виде нескольких полей, имеющих один и тот же атрибут name и различные атрибуты value. Каждое активированное в ходе заполнения поле генерирует отдельную пару "название/ значение" в соответствующем поле данных, даже если это приводит к дублированию имен.

Для изначальной установки некоторого поля в состояние "активировано" используется атрибут CHECKED.

TYPE=radio

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

TYPE=submit

Позволяет создать кнопку, по которой пользователь может щелкнуть и отправить содержимое формы на сервер. Надпись на кнопке задается с помощью атрибута value. Если к тому же задан атрибут name, то в передаваемую на сервер информацию дополнительно включается пара данных "название кнопки/значение". В одну и ту же форму можно поместить несколько кнопок, инициирующих передачу данных.

Например:

<INPUT align-"bottom" type-"submit" value-''Отправить">

TYPE=image

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

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

Например:

<INPUT align-"middle" name=Ok type-image src-gradient.jpg>

TYPE=reset

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

Например:

cinput type=reset>

TYPE=file

Дает пользователям возможность дополнить содержимое текущей формы файлом. При разметке этого элемента обычно создается поле для ввода текста, к которому прилагается кнопка. Щелчок на этой кнопке приводит к раскрытию нового окошка, где можно просмотреть имеющиеся файлы и выбрать один из них. Имя файла можно также ввести непосредственно в исходном текстовом поле. Точно так же, как и в случае TYPE=text, можно использовать здесь атрибут size, чтобы выбрать ширину данного поля формы (единицей измерения здесь служит средняя ширина символов). Можно также установить верхний предел для длины вводимого имени файла посредством атрибута maxlength.

Например:

cinput type=file name=photo size=40

TYPE-hidden

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

Например:

cinput type=hidden name=custom value=8841-124-8765">

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

Создание в формах меню

Для создания в формах меню служат парные тэги.

<SELECT>

</SELECT>

Тэг <select> создает в заполняемой форме меню типа "выбор одного пункта из многих" либо "несколько пунктов из многих". Между открывающим и закрывающим тэгами <select> и </select> должен быть один или несколько элементов option, описывающих отдельные пункты меню.

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

Атрибуты тэга <select>

NАМЕ=имя

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