Содержание |
В настоящем разделе очень кратко приводятся основные технические принципы обмена информацией в гиперсетях Интернет или Интранет (далее также, Сети и Интрасети). Рассматривается также обобщенная структура электронного гипертекстового документа: web-страницы (сайта, web-узла и т.п.). Изложение ведется с использованием упрощенных понятий (метафор), достаточных для усвоения дальнейшего материала.
Интернет представляет собой конгломерат мириада компьютерных сетей и компьютеров, разбросанных по всему миру. Термин «гиперсеть» указывает на то, что Интернет объединяет в глобальное образование другие сети. Под Интрасетью (Интранет) понимается корпоративная сеть, реализованная средствами Интернета, но не подключенная к Интернету, а доступная только сотрудникам организации. Для создания Интрасети требуются те же аппаратные и программные средства, что и для Интернета, кроме подключения к провайдеру Сети. На рис 1.1 представлены основные метафоры Интернета.
Рис. 1.1. Метафоры Интернета.
Согласно этим метафорам основная функция всех технологий Интернета в совокупности состоит в установлении и обслуживании соединений подключенных к сети пользователей. Действия, которые выполняются для этого компьютерами в Сети, регламентируются протоколами стандарта TCP/IP (Transmission Control Protocol / Internet Protocol, Протокол управления передачей / Протокол Интернета), состоящими из двух протоколов – IP и TCP.
Если отбросить техническую терминологию, то оказывается, что клиент, сервер и протокол, эти основные действующие «лица» Интернета, являются несложными понятиями. Клиент – это программа, которая что-либо запрашивает. Сервер – это программа, которая что-то предоставляет. Протокол – это соглашение между клиентом и сервером, описывающее способы, которыми клиент выполняет запросы к серверу, а сервер отвечает на эти запросы. Клиент может делать запросы ко многим серверам. Сервер может работать со многими клиентами. Сервер, как правило, работает непрерывно, ожидая запросов клиента. Клиент работает под управлением пользователя, либо программ, действия которых инициируют запросы клиента. Для обозначения WWW-клиента мы будем пользоваться также термином «браузер».
Технология WWW и реализующая ее информационная служба впервые появились в гиперсети Интернет в начале 90-х годов. Именно этой службе Сеть обязана своей постоянно растущей популярностью. Основными компонентами технологии WWW являются web-документы, web-серверы, обозреватели-клиенты (браузеры) и собственно Web.
Под документом Web (или Web-документом) понимается файл в том или ином стандартном формате, к которому пользователь Сети может получить доступ с помощью обозревателя (клиента) – клиентской программы службы WWW. В частном случае такой файл представляется в текстовом формате и содержит в себе собственно текстовые данные и теги языка разметки гипертекста, например, языка HTML. Такой частный случай документа Web принято называть web-страницей. Непременной и наиболее важной частью web-документа являются гипертекстовые ссылки на другие web-документы. Web-документ является также средой, в которой выполняются программы (скрипты), написанные на различных языках программирования.
Под Web понимается совокупность связанных друг с другом локальными гипертекстовыми ссылками Web-документов и соответствующих им объектов (графики, аудио, видео, программ, данных), как правило, совместно разрабатываемых и сопровождаемых, и образующих семантически единый информационный ресурс. Такой смысл вкладывает в этот термин фирма Microsoft.
В других источниках используется термин Web-сайт или сайт, а иногда узел Web или Web-узел. Узел и сайт – это любой набор документов, обозначаемый уникальным IP-адресом в Интернете. Нет IP-адреса – нет узла (сайта). Типичный пример – клиент, подключенный к Интернет не через свой сайт, а через сайт провайдера. Узел не обязательно сервер. На одном сервере может быть несколько узлов, имеющих свои IP-адреса. Для создания узла не обязательно иметь собственный сервер, так как узлы можно располагать на серверах провайдеров по всему Миру, работая со своим узлом по модему или выделенной линии через ближайшего провайдера.
Крупный узел, по существу являющийся программной системой с единой точкой входа (для входа используется один IP-адрес), каждая страница которого может запускать программы и комплексы программ различной степени сложности, иногда называют Web-порталом или порталом (от портал – ворота). По типу порталов сейчас строятся современные автоматизированные системы банков, предприятий, образовательных учреждений и других достаточно крупных организаций.
Порт – это некоторое число, которое идентифицирует программу, желающую принимать данные из Интернета. Это еще одна составляющая адресации протокола TCP, входящая в строку URL, о которой мы не упоминали. Любая программа, стремящаяся передать данные другой, должна знать имя порта, который закреплен за последней. Обычно назначаются фиксированные номера портов. Например, Web-серверу чаще всего выделяется порт с номером 80. Когда вы набираете в броузере адрес какого-нибудь узла, запрос идет на порт 80 компьютера, содержащего указанный узел.
Хост часто смешивают с понятием узел. Хост и узел, однако, это не всегда не синонимы, поскольку есть понятие виртуальный хост, что позволяет размещать на одном узле несколько хостов, имеющих уникальные доменные имена. Виртуальный хост не имеет уникального IP-адреса, но тем не менее доступен в Сети указанием дополнительной приставки в DNS-имени.
Провайдер – организация, предоставляющая услуги по подключению для доступа в Интернет с помощью различного типа технических устройств (модемов, декодеров, Ethernet-модемов и т.п.).
Хостинг-провайдер (хостер) – организация, которая оказывает услуги (хостинг) по созданию хостов (виртуальных хостов), в том числе предоставляеть место на своем сервере для самостоятельно создаваемых сайтов.
Из многих протоколов Интернета, самым фундаментальным является протокол IP (Internet Protocol), обеспечивающий передачу пакетов между двумя удаленными компьютерами. IP – это протокол, не требующий логического соединения. Его еще называют как «протокол без памяти», так как, послав пакет, протокол IP тут же «забывает» о нем, в отличие от протоколов, устанавливающих логическое соединение (протоколы с памятью), которые получают и сохраняют информацию о пути перемещения пакета. При использовании протоколов с памятью клиенту и серверу пришлось бы хранить много информации о состояниях друг друга и множестве запросов и ответов. В простоте состоит основное достоинство протокола IP, так как ему нет необходимости знать и помнить характеристики физической среды, по которой передается пакет. В результате протоколы без памяти являются «легкими», что позволяет быстро перемещаться от сервера к серверу (взгляд со стороны клиента) и от клиента к клиенту (взгляд со стороны сервера), не требуя большой работы по освобождению ресурсов и запоминанию информации.
Диалог между клиентом и сервером предельно прост: клиент посылает одиночный запрос, а сервер на него отвечает. При этом каждый новый запрос - это новая транзакция, т.е. запросы клиента никаким образом не связаны друг с другом (с точки зрения протокола). При разрыве связи передача прекращается и возобновить её в рамках протокола без памяти нет возможности. Чтобы продолжить передачу сообщения требуется совершенно новая транзакция, тогда как для протоколов с памятью передача данных сообщения осуществляется за один сеанс, а при разрыве передача не повторяется, а продолжается, так как протокол с памятью позволяет запомнить все необходимое для продолжения передачи. На время сеанса протокол с памятью связан с физической средой (зависит от аппаратуры), в которой происходит передача сообщения и реализует сложные алгоритмы реализации передачи сообщения на конкретных физических устройствах. А протокол IP очень прост, поскольку никак не зависит напрямую от структуры физической среды. Для протокола IP главное, что эта физическая среда в принципе способна к передаче пакетов. Поэтому IP работает, как в глобальных, так и в локальных сетях, как в обычных линиях связи, так и в беспроводных и т. п., а поскольку протокол IP является фундаментом, на котором базируется семейство протоколов TCP/IP, то все это семейство может функционировать в любой сети, с любым режимом передачи пакетов.
Протокол TCP построен на базе протокола IP и «отвечает» за установление соединения и управление установленным сеансом. Этот протокол еще называют транспортным уровнем в четырехуровневой сетевой модели TCP/IP. Чтобы обеспечить выполнение этих своих функций к базовому протоколу IP добавляется всего лишь три параметра (сегмента): контрольная сумма содержащихся в IP-пакете данных; сегмент с порядковым номером для каждого передаваемого байта для того, чтобы получатель правильно сложил эти пакеты и получил исходное сообщение; сегмент с записью о подтверждении получения и повторной отправки пакета, если пакет не удалось доставить.
Чтобы соединение отправителя с получателем было возможным, у каждого компьютера в Интернете (вернее – сетевых карт компьютеров, как серверов, так и клиентов) имеется уникальный IP-адрес. Такой адрес присваивается каждой точке подключения к Сети и состоит из четырех 8-разрядных чисел (то есть, принадлежащих диапазону от 0 до 255), соединенных точками (каждое из чисел записывается в отдельный байт, а общая длина адреса составляет четыре байта). Например, сервер поисковой системы Яндекс (Yandex) имеет адрес 213.180.204.211, а 193.232.113.151 – адрес МГУ (Московского государственного университета имени М.В.Ломоносова).
Обычно компьютеры, на которых размещаются информационные ресурсы (в том числе простейшие сайты) имеют постоянные адреса, а пользователи, не имеющие своего сайта, подключаются к Интернету через ресурс поставщика услуг интернета - провайдера (Internet Service Provider, ISP), организации, обеспечивающей подключение пользователей для доступа в Сеть. Провайдер автоматически выделяет таким пользователям временный IP-адрес, действующий лишь на протяжении сеанса связи (динамические адреса).
В Интрасетях всем компьютерам обычно назначаются фиксированные (статические) IP-адреса, хотя это могут быть и динамические адреса. Адресация компьютеров в Сети обеспечивается с помощью протокола IP.
IP-адреса однозначно определяют компьютеры, обменивающиеся данными по сети, но человеку удобнее воспринимать не числовой код, а текстовый адрес. Для поддержки такой возможности в Сети была организована служба адресации DNS (Domain Name System – Служба имен доменов), превращающая текстовые (доменные) адреса в IP-адреса.
Доменным адресом (доменным именем) называется последовательность нескольких слов, разделенных точками. Такая форма лучше запоминается, поскольку позволяет зашифровать в себе ассоциативные связи с адресатом.
Условно доменное имя можно представить следующим образом: имя_компьютера.домен_второго_уровня.домен_верхнего_уровня. Имя компьютера www – это наиболее часто используемые имена компьютеров в связи с популярностью одноименной службы Интернета. Второе слово называется доменом второго уровня или поддоменом. Например, в доменном адресе www.msu.ru второе слово содержит в себе название университета (MSU - Moscow State University). Пользователям, не имеющим собственного ресурса (сайта) доменные адреса не нужны. Крайнее правое слово доменного адреса называется именем корневого домена или домена верхнего уровня. Ниже, в табл. 1.1. перечислены имена наиболее крупных корневых доменов.
Таблица 1.1
Имена некоторых корневых доменов.
Домен |
Описание |
com |
Коммерческие организации |
edu |
Образовательные учреждения |
gov |
Правительственные учреждения |
net |
Поставщики услуг Сети |
org |
Прочие организации |
us |
Домен Интернета США |
ru или su |
Домен Интернета России |
uk |
Домен Интернета Великобритании |
ua |
Домен Интернета Украины |
Доменные адреса преобразуются в IP-адреса специальными программами – серверами DNS. Как правило, такие серверы функционируют на компьютерах провайдеров услуг Интернета или на компьютерах, отвечающих за организацию работы Интрасети. Доменные адреса хранятся на серверах DNS в форме распределенной базы данных, хранящей доменные адреса и соответствующие им IP-адреса. При попытке связаться с информационным ресурсом по доменному имени последнего, это имя пересылается серверу DNS вместе с IP-адресом компьютера пользователя. DNS-сервер, получив доменный адрес, просматривает свою базу данных и возвращает компьютеру пользователя искомый IP-адрес ресурса. Если DNS-сервер не находит в своей базе данных запрошенного адреса, он посылает запрос серверу DNS домена более высокого уровня.
Если поиск во всей распределенной базе данных закончился безуспешно, пользователь вместо IP-адреса получает уведомление о невозможности разрешения доменного имени. После установления соединения начинается обмен информацией. Протокол TCP/IP определяет, как подлежащие передаче данные разделяются на отдельные пакеты, и каким образом эти пакеты пересылаются от сервера ресурса к пользователю, запросившему данные. Каждый пакет нумеруется и передается независимо от других пакетов. Последовательность получения пакетов может не совпадать с последовательностью их отправки из-за того, что пути их доставки в сети могут оказаться различными. В компьютере пользователя полученные пакеты обрабатываются и исходные данные восстанавливаются. Возможность пересылки пакетов по различным маршрутам составляет одну из главных особенностей сетевой технологии Интернета – именно она обеспечивает надежность Сети, в которой выход из строя отдельных серверов приводит не к отказу сети в целом, а лишь к постепенному снижению её быстродействия.
Существуют специальные протоколы для быстрого поиска IP-адреса или доменного адреса. Один из таких протоколов работает с командой ping, запускаемой в командной строке. Например, IP-адрес МГУ можно узнать введя команду ping www.msu.ru. Вы получите ответ, в котором с некоторым интервалом времени будут появляться строки: 64 bytes from 193.232.113.151: icmp_seq=1 ttl=46 time=144 ms . Для прекращения работы команды нажмите клавиши <ctrl+c>. И, наоборот, доменный адрес можно узнать, введя команду ping 193.232.113.151 .
Для обмена данными между клиентом и сервером с информационным ресурсом недостаточно протокола TCP/IP (протокола транспортного уровня). Для этого еще необходимы протоколы уровня приложений, которые так называются в сетевой модели TCP/IP, базирующиеся на протоколе TCP/IP. Для нас представляет интерес протокол HTTP, хотя в Интернет используются и другие протоколы. В рамках технологии Интернет обмен данными осуществляется с помощью служб. Службой Интернета называется совокупность протокола передачи данных типа, характерного для указанной службы, программного обеспечения клиента и сервера службы, а также информационных ресурсов этой службы. Службы соответствуют различным видам информационного сервиса, который может получать пользователь Сети. Различные службы появились в Интернете в разное время и развивались по-разному. Каждая из них использует свой собственный протокол, построенный на основе протокола TCP/IP и работающий «поверх» него. Одна из наиболее популярных служб, базирующаяся на протоколе HTTP (Hypertext Transfer Protocol, протокол передачи гипертекста), называется WWW (World Wide Web, или Всемирная паутина). Эта служба в настоящее время ассоциируется с Интернет и будет основной темой настоящего пособия, однако необходимо знать и уметь пользоваться и другими сервисами (это обычно делается при программировании на стороне сервера), например, перечисленными в таблице 1.2.
Таблица 1.2
Службы и протоколы Интернета.
Служба |
Протокол |
Клиент (в составе MS Office 2000) |
Назначение |
WWW |
HTTP |
MS Internet Explorer, MS Word, MS Excel |
Услуги по передаче данных в форматах гипертекста. |
Обмен почтой (e-mail) |
POP3, SMTP |
MS Outlook, MS Outlook Express |
Услуги по передаче почтовых сообщений в форматах электронной почты. |
Передача файлов |
FTP |
MS Internet Explorer |
Услуги по передаче файлов произвольного формата |
Исторически сложилось так, что эти службы в настоящее время наиболее широко используются. Главной особенностью всех служб Интернета является использование сетевой программной архитектуры клиент-сервер, в основе которой лежит взаимодействие двух программ, обычно работающих на разных компьютерах Сети: клиентской программы (или просто клиент) и серверной программы (сервер).
Клиентская программа, взаимодействуя с пользователем через интерфейс, формирует запрос к серверу в соответствии с требованиями сетевого протокола используемой службы. Затем этот запрос по установленному с помощью протоколов TCP/IP сетевому соединению направляется серверной программе. Серверная программа ставит поступившие от пользователей запросы в очередь и обслуживает их. В результате обслуживания поступившего запроса формируется ответ, который отправляется обратно клиенту. Получив и собрав данные ответа, клиентская программа отображает их на экране компьютера пользователя или сохраняет их на его накопителе.
Для работы с сервером каждой службы требуются соответствующие клиентские программы, «умеющие» работать с протоколом службы. Иногда клиентские программы могут работать с несколькими протоколами, и, соответственно, играть роль клиента нескольких служб (пример – обозреватель или браузер MS Internet Explorer).
Протокол HTTP используется не только для пересылки гипертекстовых HTML-документов, но и для доступа к самым различным файлам мультимедиа. Для доступа к файлам достаточно ввести адрес компьютера, путь к файлу и имя файла. HTTP – это общий «язык», посредством которого веб-серверы и веб-броузеры общаются друг с другом в Интернете, оперируя целыми сообщениями, предварительно собираемыми-разбираемыми по протоколу TCP/IP.
Каждое HTTP-взаимодействие начинается с запроса от клиента (веб-браузера). Пользователь либо вводит URL, либо переходит по гиперссылке, либо выбирает закладку, а браузер отображает соответствующий документ. Чтобы сделать это, он должен послать HTTP-запрос серверу. Запрос всегда включает в себя заголовок, а иногда и тело сообщения. Сервер возвращает ответ (информация с сервера всегда посылается только лишь в ответ на запрос), также содержащий заголовок и тело сообщения. Хотя запросы и ответы всегда содержат различную информацию, структура заголовка/тела совпадает у обоих сообщений: заголовок содержит мета-информацию (информацию о сообщении), а тело – содержимое сообщения.
Гипертекстовая ссылка (гиперссылка или просто ссылка) фактически состоит из двух частей. Первая часть – это место в этом же или другом документе, к которому следует перейти, помеченное как закладка или якорь (anchor). Вторая – это место в документе (адрес или ресурс), указывающее, куда следует перейти (URL reference). Локальной называется гипертекстовая ссылка, переход по которой приводит обозревателя Web в другое место того же документа или в другой документ того же Web. В противоположность локальным ссылкам глобальные ссылки для выполнения перехода по ним требуют загрузки документа или страницы из другого Web. Например, при опубликовании отчета об исследовании некоторого вида рыб, можно сделать ссылки на базы данных, в которых содержатся используемые ихтиологические измерения.
Программа-клиент, выполняет свои функции после того как пользователь введёт в адресной строке запрос в виде доменного имени, IP-адреса или URL. Необходимо обратить внимание на то, как преобразит браузер текст, набранный пользователем в адресной строке. Там отобразится URL (Universal Resourse Locator – Универсальный Идентификатор Ресурса), который означает в действительности нечто большее, чем просто DNS-адрес. В общем случае URL будет выглядеть примерно так: http://www.somehost.ua/path_to/document.html. В этом примере http:// указывает браузеру, какой высокоуровневый протокол нужно использовать для обмена данными с сервером соответствующей службы. Следом за протоколом идет имя сервера - доменное имя, обозначающее компьютер, на котором размещается запрашиваемая web-страница. Это может быть не только доменное имя, но и непосредственно его IP-адрес. И, наконец, мы дошли до последней части адресной строки – пути к файлу в файловой системе сервера, содержащему страницу.
Одной из задач web-сервера является организация части файловой системы компьютера таким образом, чтобы она была доступна Интернету, т.е. стала частью Интернет-пространства. Для этого выделяется специальная папка, которая называется первичной (корневой) папкой Web. В большинстве случаев этой папке при настройке web-сервера дается имя \Root Web, под которым она «видна» web-серверу. Пользователь обращается к этой папке посредством указания URL, доменного имени или IP-адреса, например – http://www.kmti.edu.ua/. Эта папка недоступна для адресации обычными средствами операционной системы (видна только после запуска web-сервера). Вложенными (дочерними) называются Web, размещенные в корневой (родительской) папке Web. К вложенному Web можно обратиться, указав в запросе соответствующее имя, например - www.kmti.edu.ua/group_name/student_name/. Как видно из этих примеров организация Web-пространства на конкретном хосте очень похожа на организацию файловой системы компьютера в виде папок (директориев, каталогов), в которой для каждого накопителя определена только одна корневая папка, содержащая все остальные папки.
Домашней (начальной, главной) страницей называется Web-страница, которая передается сервером по запросу пользователя, указавшего в запросе имя Web, но не задавшего имени его конкретной страницы. Файлу, содержащему домашнюю страницу, обычно присваивается стандартное имя index.htm (index.html) или default.htm (default.html). Можно, конечно, обращаться к домашней странице, указывая полный путь к файлу, например - http://www.kmti.edu.ua/index.htm.
В приведенных выше примерах построения URL используются так называемые абсолютные ссылки. В таких ссылках к доменному имени присоединяются абсолютные пути, в которых точно указывается адрес компьютера в Сети, каталог и файл. Но часто удобнее использовать относительные ссылки, состоящие из относительных путей, указывающие путь к файлу относительно каталога, из которого загружена страница, на которой делается ссылка. Например, если загружена страница http://www.kmti.edu.ua/group/group.html, то при создании ссылки на этой странице достаточно написать её в виде ./student.html, чтобы перейти по URL http://www.kmti.edu.ua/group/student.html к файлу student.html.
При использовании относительного пути ссылка будет работать на компьютере с любым доменным именем, тогда как в случае абсолютных ссылок при переносе документа на другой компьютер ссылки придётся соответствующим образом изменять. Достаточно подробно методы создания ссылок будут рассмотрены в следующем разделе, а здесь на нескольких примерах будут показаны простые приемы построения относительных путей, при различных вариантах расположения документов:
./page1.htm или просто page1.htm – ссылка вызовет переход к документу с именем page1.htm, находящемся в той же папке, что и документ, из которого осуществляется переход по таким образом указанному пути;
./student/page1.htm или просто student/page1.htm – по такой ссылке произойдет переход к документу с именем page1.htm, находящемся в папке student, вложенной в папку с документом, из которой осуществляется переход;
../page2.html – переход к документу page2.html, который должен быть расположен в папке, расположенной на один уровень выше папки с документом, из которого совершается ссылка;
../../page3.html – переход к документу page3.html, расположенному в папке, находящейся на два уровня выше папки с документом, содержащем ссылку.
Единообразный идентификатор ресурса URI (Uniform Resource Identifier) представляет собой более общее понятие, чем URL. URI, также последовательность символов, идентифицирующая ресурс. URI не указывает на то, как получить ресурс, а только идентифицирует его. Это дает возможность описывать с помощью RDF (Resource Description Framework) не только ресурсы, указаннные в URL, но и многочисленные ресурсы, которые не могут быть получены через DNS-службу (имена, названия и т.п.). Самые известные примеры URI - это URL и URN.
URL, это уже известное вам понятие, помимо идентификации ресурса, предоставляет еще и информацию о местонахождении этого ресурса.
URN (Uniform Resource Name) - это URI, который идентифицирует ресурс в соответствующему этому ресурсу пространстве имен, но, в отличие от URL, URN не указывает на местонахождение этого ресурса. Например, URN urn:ISBN:0-395-36341-1 — это URI, который указывает на ресурс (книгу) 0-395-36341-1 в пространстве имён ISBN (http://ru.wikipedia.org/wiki/URI).
Для создания страниц с «настоящими» (видимыми в Сети) именами, вы сами или ваш системный администратор должны запустить web-сервер, разместить в контролируемое этим сервером веб-пространство дерево каталогов, содержащих ваш сайт, и произвести соответствующие настройки веб-сервера для того, чтобы любому подключенному к Сети можно было обращаться к сайту, указывая соответствующие URL его страниц.
При освоении программирования на стороне клиента можно создавать веб-страницы и без запуска веб-сервера, однако, впоследствии, при перемещении сайта на веб-сервер, необходимо будет проделать работу по соответствующему изменению ссылок. Чтобы такой работы было меньше, необходимо заранее продумать структуру папок вашего будущего сайта. Кроме этого, вы должны понимать, что при создании гиперссылок в вашем случае лучше использовать относительную, а не абсолютную адресацию, связанную со структурой папок только лишь вашего сайта. Далее, по ходу выполнения заданий вы должны будете создавать папки с заданными именами, и в результате в отведенной для вас на сервере папке должно появиться соответствующее дерево папок, которое необходимо будет копировать на веб-сервер.
Для закрепления материала первого раздела необходимо выполнить упражнение. Но прежде, немного забегая вперёд, вам необходимо освоить минимум умения работы с языком, с помощью которого вы сможете видеть сами и показывать другим (в первую очередь преподавателю для выставления оценок) результаты выполнения упражнений. В качестве такого языка в пособии используется HTML - язык разметки гипертекста. С помощью HTML вам необходимо уметь писать веб-страницы (веб-документы, или просто страницы и документы) и набор документов, называемый сайтом.
Прежде всего — о структуре папок, содержащих страницы сайта. Для создания страниц с «настоящими» (видимыми в Сети) именами, вы сами или ваш системный администратор должны запустить web-сервер, разместить в контролируемое этим сервером web-пространство дерево каталогов, содержащих ваш сайт, и произвести соответствующие настройки web-сервера для того, чтобы любому пользователю, подключенному к Сети, можно было обращаться к сайту, указывая соответствующие URL его страниц.
При освоении программирования на стороне клиента можно создавать сайты и без запуска веб-сервера, однако, впоследствии, при перемещении сайта на веб-сервер, необходимо будет проделать работу по соответствующему изменению ссылок. Чтобы такой работы было меньше, необходимо заранее продумать структуру папок вашего будущего сайта. Кроме этого, вы должны понимать, что при создании гиперссылок в вашем случае лучше использовать относительную, а не абсолютную адресацию, связанную со структурой папок только лишь вашего сайта. Далее, по ходу выполнения упражнений вы должны будете создавать папки с заданными именами, и в результате в отведенной для вас на сервере папке должно появиться соответствующее дерево папок, которое необходимо будет копировать на веб-сервер.
Каждый HTML-документ, должен начинаться со строки (тэга — строки в угловых скобках), которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
По этой строке браузер определяет, что используемый нами HTML соответствует версии 3.2. Это не самая свежая версия, но, в отличие от более новых версий, является наиболее проработанным и широко распространенным стандартом.
Для разметки страницы используются соответствующие тэги. Размеченный тэгами текстовый файл (html-код) записывается в файл с расширением html или htm. При открытии такого файла в браузере, последний интерпретирует тэги и отображает в виде веб-страницы текст, размещённый между этими тэгами. Имеются также тэги, содержащие ссылки (гиперссылки) на другие документы. Ещё один вид тэгов содержит не отображаемую служебную информацию. Ниже приводится листинг html-кода простейшего документа.
Листинг 1.1
<html>
<head>
<title>Список упражнений</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>Список упражнений, выполненных студентом Петровым</h2>
<p>На этой странице приводится список упражнений, выполненных студентом Петровым при освоении материала учебного пособия "Программирование на стороне клиента".</p>
<p>
Каждый элемент списка является ссылкой для перехода к странице, отображающей результат выполнения упражнения.
<p>
<a href="./exercises/exercise_1.html">Упражнение 1</a><br>
<a href="./exercises/exercise_2.html">Упражнение 2</a><br>
<a href="./exercises/exercise_3.html">Упражнение 3</a>
</p>
<p><a href="../index.html">Переход на домашнюю страницу</a></p>
</body>
</html>
Код, приведённый в листинге 1.1, наберите в простейшем текстовом редакторе типа Блокнот или Gedit (рекомендуется использовать Gedit) и сохраните в файле с расширением html. При сохранении не забудьте также выбрать кодировку UTF-8. В редакторе Gedit нужно также указать вид окончания строк UNIX/Linux. Откройте этот файл в браузере и, если вы не допустили ошибок, то увидите веб-страницу, показанную на рис. 1.2.
Рис.
1.2. Веб-страница, соответствующая
html-коду листинга 1.1.
Разберём действие каждого тэга из листинга 1.1.
Тэг <html> ... </html> относится к парным тэгам, то есть состоит из двух тэгов: открывающего и закрывающего. Пишутся оба тэга одинаково, только закрывающий тэг начинается с символа «/» (прямого слэджа). Этот и любой другой тэг обрамляется угловыми скобками. Весь код этого и любого другого html-документа должен находиться внутри тэга <html> ... </html>. Браузер по этому тэгу определяет, что это html-код и начинает его соответствующим образом интерпретитровать.
Внутри тэга <head> ... </head> должны находиться служебные тэги. Текст этих тэгов не отображается непосредственно в рабочем поле браузера. В качестве примера в листинге 1.1 использованы два тэга.
Первый - <title> ... </title> содержит текст, отображаемый в строке заголовков открытых документов. Этот тэг рекомендуется вставлять всегда, так как он используется поисковыми сервисами.
Второй тэг (мета-тэг) также желателен. Строка charset=utf-8 указывает браузеру, что файл содержит текст в кодировке UTF-8. В этой кодировке обычно работают приложения под Linux-подобными операционными системами. Для приложений под Windows эту строку обычно пишут в виде charset=windows-1251, указывая браузеру, что html-код набран в «родной» кодировке OC Windows. Вам необходимо использовать UTF-8, как более новую универсальную кодировку (как уже упоминалось выше, при сохранении файла в редакторе вы должны выбрать кодировку UTF-8, а в Gedit ещё и вид окончания строк UNIX/Linux). Существуют ещё и другие мета-тэги, которые мы рассмотрим позже. Мета-тэги относятся к тэгам одиночного типа — у них нет закрывающего тэга.
Тэг <body> ... </body> заключает в себе всё содержимое документа, отображаемое в рабочем поле браузера. Внутри этого тэга должны содержаться все остальные тэги, размечающие текст, рисунки и другие объекты, составляющие веб-страницу. Вам пока достаточно научиться применять четыре тэга, использованные в примере: <h2> ... </h2>, <p> ... </p>, <a> ... </a> и <br>.
Тэг <h2> ... </h2> интерпретируется браузером как тэг заголовка (heading). Текст, заключённый внутри этого тэга отображается с новой строки жирным шрифтом определённого размера. Следующий за этим заголовком текст начинается с новой строки. Имеется шесть тэгов для форматирования заголовков с различными размерами шрифтов. Тэг <h1> ... </h1> используется для задания самого крупного шрифта, а тэг <h6> ... </h6> - для самого мелкого. Вы можете поэкспериментировать с тэгами заголовков, чтобы убедиться в этом.
Тэг <p> ... </p> предназначен для выделения заключённого в нём текста в абзац (paragraph). Такой текст отделяется пустыми строками сверху и снизу от остального текста страницы.
Одиночный тэг <br> (от break - разрыв) вызывает принудительный разрыв строки внутри параграфа.
С помощью тэга <a> ... </a> (от anchor - якорь) создаются гиперссылки (или просто — ссылки). В открывающем тэге <a> обязательно задаётся свойство (или атрибут) href. Этому свойству присваивается текстовая строка в виде пути к файлу с html-кодом веб-страницы, которая должна открываться по ссылке. В примере используются относительные ссылки, правила построения которых вы должны знать. В браузере отображается лишь текст, заключённый между открывающим и закрывающим тэгами. Сами тэги не отображаются. При подведении указателя мыши к этому тексту вид указателя меняется. Кликнув мышью по этому тексту вы заставляете браузер отобразить страницу, путь к которой задан с помощью свойства href.
В этом разделе вам предстоит выполнить всего лишь одно упражнение, состоящее из семи этапов. Это упражнение необходимо выполнить обязательно, так как иначе вы не сможете выполнить следующее упражнение. И вообще, необходимо привыкнуть к тому, что нельзя будет выполнить каждое следующее упражнение без полностью завершённого предыдущего.
Упражнение 1.
Цель упражнения: освоить навыки практического использования простейших понятий сети Интернет, необходимых для продолжения обучению программированию (на стороне клиента).
Конечный результат - простейший сайт, состоящий из трёх страниц, связанных ссылками:
домашней страницы;
страницы со списком выполненных упражнений;
страницы с контрольными вопросами по разделу 1.
Этапы выполнения упражнения.
Этап 1. В выделенном вам пространстве на файловом сервере cоздайте папки (каталоги, директории), по образцу, изображённому на рис.1.3.
Рис.1.3.
Структура папок начальной версии
учебного сайта в домашнем каталоге
студента на файловом сервере института.
Последние цифры наименования папки 10kmk000 должны совпадать с цифрами вашей зачётной книжки (вместо «000»).
Этап 2. В папке www c помощью редактора Gedit создайте файл с именем index.html, содержащий следующий html-код:
Листинг 1.2
<html>
<head>
<title>Сайт студента Петрова (версия №1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h3>КГМТУ</h3>
<h2>Специальность "Водные биоресурсы"</h2>
<h2>Группа 10КМК</h2>
<h1>Студент Петров Иван</h1>
<h3>(учебный сайт)</h3>
<p>
<a href="./exercises/exercises.html">Упражнения</a>
</p>
<h5>Керчь-2010</h5>
</body>
</html>
Код листинга 1.2 и все последующие коды необходимо изменять, вводя свои фамилию и имя.
Откройте файл index.html в браузере. Появившаяся веб-страница должна выглядеть так, как это показано на рис.1.4.
Рис.1.4.
Первый вариант домашней страницы
учебного сайта студента.
Этап 3. В папке exercises создайте файл с именем exercises.html, содержащий следующий html-код:
Листинг 1.3
<html>
<head>
<title>Студент Петров: упражнения</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h4>КГМТУ</h4>
<h3>Студент Петров Иван</h3>
<a href="../index.html">Домашняя</a>
<h2>Упражнения по дисциплине "ВТ и программирование"</h2>
<p>
<a href="./exercise_1.html">Упражнение 1</a>
</p>
<h5>Керчь - 2010</h5>
</body>
</html>
Откройте файл exercises.html в браузере. Появившаяся веб-страница должна выглядеть так, как это показано на рис.1.5.
Рис.
1.5. Первый вариант страницы со списком
упражнений.
Этап 4. В папке exercises создайте ещё один файл с именем exercise_1.html, содержащий следующий html-код:
Листинг 1.4
<html>
<head>
<title>Студент Петров: упражнение 1.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h4>КГМТУ</h4>
<h3>Студент Петров Иван</h3>
<h2>Упражнения раздела 1 "Основные понятия о технологиях Сети".</h2>
<p>
<a href="../index.html">Домашняя</a><br>
<a href="exercises.html">Упражнения</a>
</p>
<h4>
Упражнение 1. Ответы на контрольные вопросы из раздела 1
</h4>
<ol>
<li>Вопрос. Что такое IP-адрес?<br>
Ответ. IP-адрес - это цифровое обозначение ...
</li>
<li>Вопрос. Что такое доменный адрес?<br>
Ответ. Доменный адрес или доменное имя - это текстовое обозначение ...
</li>
<li>Вопрос. Что такое ...?<br>
...
</li>
</ol>
<h5>Керчь - 2010</h5>
</body>
</html>
Файл, открытый в браузере, должен отобразить веб-страницу, которая должна выглядеть примерно так, как это показано на рис.1.6.
Рис. 1.6. Страница с первым упражнением.
В коде файла exercise_1.html вы должны поместить все контрольные вопросы и ответы на них, так, чтобы веб-страница отображалась в браузере по образцу, приведённому на рис. 1.6. Отвечать на вопросы необходимо коротко своими словами (не более, чем на трёх строках текста без картинок). Не запрещается искать ответы в Интернете.
Этап 5.
Вставьте свою фотографию на домашнюю страницу. Для этого отредактируйте код файла index.html, вставив в него после тэга <h3>(учебный сайт)</h3> строку с таким тэгом:
<img id="my_logo" src="./img/my_photo.jpg" alt="Фото Петрова" title="Фото Петрова" />
Этот одиночный тэг предназначен для вставки изображений. Этот тэг мы будем изучать позже, а сейчас он нужен для того, чтобы преподаватель зрительно представлял студента, показывающего свою работу. Кроме этого, вам с самого начала необходимо вспомнить (изучить) простейшие навыки работы с изображениями.
Запустите графический редактор (лучше Gimp, но можно Paint, или другой простой графический редактор), загрузите в него файл со своей фотографией и вырежьте из неё своё изображение (по грудь, не более) так, чтобы отчётливо было видно лицо (как на визитной карточке). Измените размер изображения так, чтобы высота и ширина не превышала 300 px (px - пикселы). В редакторе Gimp это делается с помощью меню "Изображение - Размер изображения..." и далее с помощью диалогового окна. О редакторе Gimp можно узнать, выбрав соответствующую ссылку среди рекомендуемых ссылок на сайте преподавателя.
Сохраните файл со своим фото под именем my_photo.jpg в папку img. После этого в браузере ваша домашняя страница вашего сайта должна иметь вид, подобный показанному на рис.1.7.
Рис.1.7.Домашняя страница с изображением.
Этап 6. Зарегистрируйтесь (создайте аккаунт) на сайте Google (www.google.com). Выберите пункт создания почтового ящика и создайте его. Напишите письмо преподавателю с указанием своего имени, фамилии и номера зачётной книжки. К письму присоедините файл с упакованной папкой 10kmk000 (вместо «000» - цифры из вашей зачётки) вместе со всем её содержимым для проверки преподавателю.
Этап 7. Подстрахуйтесь, сохранив свою работу в виде упакованной папки 10kmk00 на бесплатном сервисе компании Google для хранения документов (расположен здесь — http://docs.google.com/). Если возникнут трудности в использовании этого сервиса — обратитесь за помощью к преподавателю.
Что такое IP-адрес?
Что такое доменный адрес?
Что такое корневой домен?
Что такое DNS?
Определите IP-адреса всех сайтов КГМТУ (Керчь) с использованием команды ping.
Перечислите известные вам службы Интернета.
Что такое web-страница?
Что такое web-сайт?
Что такое web-портал?
Как вы понимаете понятие «Интернет-сервис»?
Каким сервисом вы пользовались при выполнении упражнения этого раздела?
Что такое «клиент»?
Что такое «сервер»?
Назовите известные вам «веб-клиенты» (не менее четырёх чаще используемых).
Зачем нужен протокол HTTP?
Что такое URL?
Что такое URI?
В чём различие локальной и глобальной ссылок?
Что такое абсолютная ссылка?
Что такое относительная ссылка?
Какие символы используются для перехода в вышестоящую папку при построении относительных ссылок?
Приведите все варианты ввода доменного имени в адресной строке браузера для перехода к домашней странице сайта Московского государственного университета.
Можно ли вводить IP-адрес в командной строке браузера вместо доменного имени? Если можно, то докажите это на примере IP-адреса МГУ.
Рекомендуемые источники:
http://www.intuit.ru/department/internet/thpdevweba/1/ - Сычев А.В. Разработка современных клиентских веб-приложений. (читать только Введение).
http://docs.google.com/ – бесплатный сервис для хранения файлов.