Лекция по дисциплине Веб-дизайн на тему Гипертекст и Web-страницы

Лекция Гипертекст и Web-страницы
План:
Гипертекст и Web-страницы
Браузеры
Собственная страничка в Интернете
Механизм работы Web-сервера
Средства автономного просмотра Web-страниц
Средства создания Web-сайтов
Гипертекст (Hypertext) - это документ (в первую очередь текстовый1)), содержащий гиперссылки. Гиперссылка - это связь слова или содержащегося в документе изображения с другим ресурсом, которым может быть как еще один документ, так и раздел текущего документа. Подобные "связанные" слова или картинки документа, как правило, выделяются по оформлению из общего текста. Общепринятой является практика подчеркивания слова или предложения, связанного гиперссылкой.
Следует отметить, что идея нелинейного прочтения текста возникла задолго до появления компьютеров. Еще в Библии применялись специальные пометки на полях, отсылающие читателя к другим страницам книги.
Практическое применение идеи и сам термин "гипертекст" появился с возникновением электронных документов, задолго до появления службы WWW. Поскольку современные электронные документы содержат не только текст, но и мультимедиа-информацию, понятие гипертекста было расширено до понятия гипермедиа. Гипермедиа - это метод организации мультимедиа-информации на основе ссылок на разные типы данных. Гипермедиа-документы могут использоваться не только в WWW, но и, например, в электронной энциклопедии на CD-ROM, где ссылка в тексте часто ведет на аудио- или видеоролик.
Особенно продуктивной идея гипертекста оказалась применительно к объединению цифровой информации, распределенной на серверах во всем мире. Вот здесь мы непосредственно подходим к понятию всемирной паутины.
Документ, доступный через Web, называют Web-страницей, а группы страниц, связанных общим именем, темой и объединенных навигационно, - Web-сайтами. Первую страницу, которую видит пользователь при обращении на тот или иной ресурс, называют стартовой, домашней или индексной страницей (home page2)). Система гиперссылок определяет структуру Web-сайта. Страницы на сайте могут иметь линейную древовидную структуру, но чаще на каждой странице имеется несколько ссылок, что и позволяет говорить о структуре "паутина" (рис. 4.9).

Рис. 4.9. Различные варианты структуры сайта
Для того чтобы лучше понять идею организации Всемирной паутины, обратимся к условному примеру (рис. 4.10), в котором пользователь из США ищет Web-сайт с московскими новостями, не зная адреса сервера, представляющего эту информацию. Предположим, что он набирает известный ему адрес Web-сайта, который физически расположен на компьютере в США и посвящен теме "Новости в мире". Не исключено, что на данном сервере нет искомой информации но, скорее всего, есть ссылки на новостные сайты разных регионов. Возможно выбрав, ссылку "Европа" (рис. 4.10) пользователь соединится уже с другим компьютером, например расположенным где-то в Европе, затем по ссылке "Россия" перейдет на компьютер в России и далее по ссылке "Москва" соединится с четвертым сервером, с помощью которого получит необходимые данные. Важно отметить, что при переходе с одного сервера на другой пользователю не нужно каждый раз задавать адреса серверов и тем более знать, где они физически находятся. То есть пользователь воспринимает просмотр информации как перелистывание страниц одной огромной книги по принципу "нажми и получи". Процесс перемещения по документам с помощью гипертекстовых ссылок получил название навигации или серфинга. В том, что для серфинга не требуется знать местоположение искомых документов, как раз и заключается основное удобство службы WWW.

Рис. 4.10. При переходе с одного сервера на другой пользователю не нужно каждый раз задавать адрес сервера и тем более знать, где он физически находится
Браузеры
Как отмечалось выше, в браузерах реализованы две основные функции - запрос информации у Web-сервера и отображение этой информации на компьютере. Кроме этих основных функций браузеры обладают дополнительными, например, обеспечивают упрощение поиска, хранение закладок, указывающих на избранные страницы, и т.п.
Созданные первоначально для просмотра HTML-документов, браузеры постепенно стали универсальными Интернет-клиентами. Современный браузер можно представить как приложение, в которое интегрированы несколько клиентских программ (рис. 4.11). Браузер прочитывает URL и, в зависимости от указанного протокола, "понимает", как нужно обрабатывать данные. Например, достаточно часто браузеры используют для просмотра и передачи файлов по FTP-протоколу. Более подробно о работе браузеров мы поговорим после того, как расскажем о строении Web-страниц.

Рис. 4.11. Современный браузер можно представить как приложение, в котором в рамках общего интерфейса интегрировано несколько клиентских программ
Собственная страничка в Интернете
Огромная популярность Web обусловлена возможностью не только просматривать чужие страницы, но также создавать собственные и таким образом доносить любую информацию до широкой аудитории. По сути, это глобальный механизм обмена информацией, при котором одни люди помещают информацию на Web-серверы, а другие ее просматривают.
Создав свой Web-сайт и поместив на нем текст, графику, звук, анимацию, вы делаете ее доступной для всех, кто обратится к данному ресурсу. С появлением вашей страницы в Сети информация о вас или о вашей фирме станет круглосуточно доступна сотням миллионов пользователей во всем мире.
Для эффективной работы сайта необходимо обеспечить быстрый доступ к нему. Если вы попытаетесь создать Web-сайт на своем домашнем компьютере, подключив его к Интернету через обычный модем и телефонную линию, это, скорее всего, отпугнет всех потенциальных посетителей. Как показывает опыт, посетителей больше всего раздражает ситуация, когда страница долго загружается, поэтому сервер, на котором будет размещен сайт, должен иметь высокоскоростное подключение к Интернету3).
В данном случае желательно воспользоваться услугами хостинг-провайдера. Хостинг (от англ. "host" - хозяин) - это предоставление услуги по размещению сайта на аппаратном Web-сервере провайдера или собственном сервере, размещенном на площадке провайдера. Обычно хостинг-провайдер взимает плату, которая тем больше, чем больше арендуемое дисковое пространство и интенсивность трафика4). Однако существуют и бесплатные услуги хостинга. Получить под свой сайт доменное имя третьего уровня (типа ivanov.narod.ru,) можно у многих компаний, предлагающих бесплатный "народный" хостинг. Например, имя www.your-name.narod.ru (где your-name - это имя, которое вы можете дать своему ресурсу) предоставляет компания Yandex. Однако более солидно иметь домен второго уровня. Лучше всего подойдет имя вида "ваша_фамилия.ru" или "ваша_компания.ru". В этом случае придется как минимум оплатить регистрацию доменного имени. Зато в случае наличия подобного имени ваши коллеги смогут вас найти в Интернете, даже не зная точного имени вашего сайта. Например, имея адрес www.compress.ru, можно ожидать, что читатели смогут легко найти сайт журнала просто по его названию. При этом следует отметить, что сегодня найти незанятый домен второго уровня с популярным именем довольно сложно.
Если вы собираетесь сделать небольшой любительский сайт, то, скорее всего, вас устроит доменное имя третьего уровня, и проблем с его бесплатным размещением не возникнет. Основная проблема заключается в разработке своего сайта.
Говорить о создании собственных страниц невозможно, не познакомившись с их устройством. Поэтому далее речь пойдет о том, из чего состоят Web-страницы, и прежде всего о языке гипертекстовой разметки HTML.
Язык гипертекстовой разметки (HTML)
Для того чтобы пояснить идею организации HTML-документа, уместно привести аналогию с работой редактора издательства, который готовит текст для верстки. Редактор имеет исходный текст и делает его разметку, в которой отмечает, как необходимо отформатировать те или иные элементы и как изменить порядок следования абзацев. Например, это могут быть пометки типа: "данный абзац напечатать жирным шрифтом, такое-то предложение выделить красным цветом, а после абзаца такого-то вставить текст со страницы такой-то". Верстальщик читает комментарии редактора и отображает финальный вариант документа в том виде, в котором он потом выйдет из печати.
Аналогичные комментарии записываются в HTML-документе, затем они прочитываются браузером, для того чтобы браузер "знал", как нужно отображать данные на экране компьютера.
Можно сказать, что браузер выполняет форматирование документа исходя из набора инструкций, содержащихся в HTML, и из возможностей отображения информации конкретным компьютером. Например, если на компьютере нет шрифта, которым предписывается отобразить тот или иной текст, будет использован другой подходящий шрифт из доступного набора.
Кроме того, пользователи имеют возможность изменить настройки браузера так, чтобы документ отображался оптимальным образом. Например, в настройках браузера можно указать правила выбора цвета для отображения фона документа или указать, каким цветом должны выделяться текстовые гиперссылки. Очевидно, что один и тот же HTML-документ будет отражаться браузерами с разной настройкой по-разному.
Команды HTML (или управляющие маркеры гипертекстового документа) называют тэгами (от англ. tag - ярлык, маркер).
Унифицированный набор заранее определенных тэгов позволяет пользоваться различными браузерами. HTML может применяться не только для разработки Web-страниц. Например, он может использоваться для представления документов на компакт-диске.
Существует более сотни тэгов для разметки информации на Web-странице. Большинство тэгов используются парами. Открывающий и закрывающий тэги начинаются и завершаются знаками < и >. Закрывающий тэг отличается от открывающего наличием символа "/" (слэш) перед ключевым словом. Например, пара тэгов <b>...</b>используется для того, чтобы дать браузеру команду отобразить текст, помещенный между тэгами, жирным шрифтом, а тэги <i>...</i> показывают, что при отображении текста должен быть применен курсив. Открывающий и закрывающий тэги воздействуют на часть документа, заключенную между ними.
Одним из важнейших тэгов является тэг, определяющий гиперссылки. При определении гиперссылки необходимо связать элемент Web-страницы, по которому будет происходить переход, с адресом данного перехода. Для этого используют пару, которая начинается с открывающего тэга <a>, по первой букве слова anchored (от англ. "привязанный"), и заканчивается закрывающим тэгом </a>.
Адрес перехода определяется значением атрибута href и представляет собой URL того ресурса, на который указывает ссылка. Таким образом, в простейшем случае определение гиперссылки выглядит как:
<a href="URL">имя ссылки</a>
Механизм работы Web-сервера
Определив понятие языка HTML, можно более подробно описать механизм работы Web-сервера и браузера. Рассмотрим пример обращения к ресурсу www.translate.ru (рис. 4.12).

Рис. 4.12. Схема работы Web-сервера
В адресной строке браузера набираем необходимый URL (рис. 4.12, пункт 1), после чего браузер получает информацию об используемом протоколе (http) и имени сервера (www.translate.ru). Браузер устанавливает связь с искомым Web-сервером и, используя протокол HTTP, запрашивает искомый ресурс. Сервер посылает браузеру HTML-страницу, которая хранится на сервере (рис. 4.12, пункт 2).Обычно даже простая Web-страница содержит не только текст, но и графику, т.е. состоит из нескольких файлов разного типа. Браузер считывает HTML-тэги, воссоздает страницу на экране компьютера, и мы видим результат своего запроса (рис. 4.12, пункт 3).
В данном случае мы рассмотрели пример работы так называемых статических страниц.
Статические страницы представляют собой точную копию файлов, лежащих в каталогах Web-cервера, и не изменяются до тех пор, пока разработчик сам в них что-то не поменяет. Однако страницы могут формироваться динамически, т.е. во время обработки запроса по какой-то программе, а не из готового файла на диске. Вы наверняка сталкивались со страницами, которые были созданы по вашему запросу динамически,- как говорится, "сформированы на лету". Например, любая книга отзывов на Web-сайте предоставляет определенную форму, в которую вы добавляете свой текст, когда вы в следующий раз открываете эту страницу, она содержит новое сообщение.
Аналогично, когда поисковой машине дается запрос по поводу некоторого документа и она выдает список ссылок, очевидно, что этот список формировался именно на данный запрос, а не хранился в Сети заранее.
Средства автономного просмотра Web-страниц
Одна из основных задач, выполняемых при работе в Web,- это просмотр и последующее копирование страниц на локальный диск пользователя. Используя обычный браузер, пользователю приходится скачивать страницу, затем копировать ее и переходить к следующей ссылке. При необходимости скопировать все документы большого сайта, данная работа выливается в отдельную проблему. При копировании большого числа страниц требуется много времени и неизбежны пропуски и ошибки. Подобный подход приводит к неэффективному использованию сетевого времени. Поэтому если вы пользуетесь каким-либо ресурсом, который редко обновляется, то намного выгоднее один раз скачать его на жесткий диск и просматривать локально, при этом скорость доступа к информации будет намного выше.
Иными словами, это удобно в том случае, если пользователю необходима информация, представленная относительно большими блоками.
Упомянутые выше программы называют офлайновыми браузерами или Интернет-вампирами.
При загрузке большого количества документов офлайновый браузер может быть эффективнее за счет возможности одновременной загрузки файлов с нескольких страниц сразу.
Функцию офлайнового браузера можно сравнить с библиотечной службой, которая предоставляет возможность скопировать часть библиотечного фонда и забрать его домой для работы в более оперативном режиме (рис. 4.13).

Рис. 4.13. В библиотеке можно заказывать и читать отдельные документы, а можно получить целый архив на дом
При копировании информации из Сети на жесткий диск могут возникать определенные проблемы с гиперссылками. Очевидно, что далеко не всегда удается скопировать все документы, на которые ссылаются страницы некоторого сайта. Так что отдельные ссылки останутся нерабочими. Более того, как известно, абсолютные ссылки указывают на определенные адреса URL. При копировании Web-страниц на локальный компьютер их адреса изменятся, и абсолютные ссылки перестанут работать в офлайновом режиме. Таким образом, для того чтобы сделать автономную копию, необходимо перенастраивать гиперссылки в копируемых документах. В этом случае в копии Web-узла на локальном компьютере может быть воссоздана структура взаимосвязи документов исходного сайта, однако копия для автономного просмотра уже не будет зеркальной копией Web-узла, с которого производилось копирование.
Существует целый ряд офлайновых браузеров. Среди российских продуктов следует упомянуть "ДИСКоКачалку" компании "ДИСКо" (www.disco.ru). Одной из наиболее распространенных программ этого класса является сравнительно новая и одновременно популярная программа WebZip компании Spidersoft (www.spidersoft.com). Основное ее достоинство заключается в способности создавать ZIP-архивы загруженных файлов. Естественно, это позволяет куда более эффективно использовать дисковое пространство. WebZip имеет встроенный браузер, который позволяет просматривать архивированные страницы, не распаковывая их.
Одно из наиболее эффективных применений программ-переводчиков - это перевод страниц при навигации в Web.
Когда пользователь ищет в Интернете сайты по некоторой тематике и обращается к ресурсам на разных языках, здесь основная задача - понять, о чем идет речь на сайте, и решить, нужно изучать содержимое данного сайта или нет. В подобном случае программа-переводчик просто незаменима.
Сделать перевод можно непосредственно в онлайне. Для этого достаточно обратиться на сайт онлайнового перевода компании ПРОМТ, который находится по адресуwww.translate.ru.
Функционирует данный сервис следующим образом. Пользователь обращается к ресурсу www.translate.ru, где ему предоставляется форма (рис. 4.14, пункт 1). В этой форме пользователь указывает адрес Web-странички, перевод которой он хочет получить, выбирает направление перевода, указывает тематику с целью подбора соответствующего тематического словаря при переводе. Далее с сервера www.translate.ru (пункт 2) идет обращение к Web-серверу, на котором находится искомая страница (пункт 3), затем осуществляется ее перевод на сервере www.translate.ru, и готовый результат в виде переведенной страницы (пункт 4) высылается клиенту. Отметим, что службаwww.translate.ru является бесплатной.

Рис. 4.14. Схема работы сервиса www.Translate.ru
Средства создания Web-сайтов
Популярность службы WWW во многом определяется тем, что пользователи могут не только просматривать сайты, но и создавать собственные. Процесс создания и функционирования Web-сайта иллюстрируется схемой, изображенной на рис. 4.15. У каждого сайта есть разработчик, который на своем компьютере готовит исходные материалы: графику, медиаданные (звук, анимация), используя соответствующие редакторы, и непосредственно разрабатывает сайт, применяя тот или иной HTML-редактор. Обычно сайт разрабатывается на локальном компьютере, тестируется, а затем переносится на Web-сервер при помощи FTP-протокола. После опубликования материал становится доступен для всех посетителей. Если пользователи имеют право только на просмотр сайта, то разработчики имеют возможность обновлять и изменять содержимое своего сайта.
В принципе вопросы разработки сайтов - предмет отдельной книги, мы же коснемся этой темы лишь в самом общем виде.
Следует отметить, что создать HTML-документ можно с использованием обычного текстового редактора. Например, с помощью входящей в Windows программы Notepad. В данном случае разработчик пишет HTML-код "с нуля", не используя ни шаблонов, ни подсказок. Несмотря на то что текстовый редактор не предоставляет никаких вспомогательных средств, многие профессионалы утверждают, что используют в качестве HTML-редактора именно Notepad.
Особо следует отметить офисные приложения. Как уже говорилось, все приложения Microsoft Office позволяют сохранить результат работы в HTML-формате. Многие домашние пользователи выбирают Microsoft Word в качестве средства разработки простых Web-страниц. Правда, HTML-код в этом случае не будет оптимальным.

Рис. 4.15. Схема разработки и просмотра Web-сайта
Когда вы сохраняете документы в HTML-формате с помощью Microsoft Word, в него добавляются дополнительные тэги, для того чтобы впоследствии можно было использовать всю функциональность Word для дальнейшей работы с содержимым документа.
Для того чтобы уменьшить размер Web-странички, в Word 2003 можно сохранять данные в специальном фильтрованном формате (filtered HTML), в этом случае лишние тэги будут удалены.
Правда, если открыть Web-страницу, сохраненную в режиме filtered HTML в программе Word, вероятно, некоторые возможности редактирования этого документа будут утрачены. Поэтому следует использовать режим filtered HTML только на финальной стадии, перед непосредственным переводом в HTML.
Несмотря на то что простые Web-странички можно создавать, не прибегая к помощи специализированных HTML-редакторов, заниматься разработкой и поддержкой более-менее солидных сайтов без них невозможно.
Все имеющиеся на рынке HTML-редакторы можно разделить на две большие группы:
программы, имеющие в своем составе визуальные редакторы (design-based editors) - средства, которые автоматически формируют необходимый HTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (What You See Is What You Get - что вижу, то и получаю);
программы-редакторы, которые предоставляют редактор и вспомогательные средства для автоматизации написания кода (code-based editors).
В компьютерной прессе часто обсуждается вопрос, какой подход лучше - визуальный или основанный на написании кода, причем у каждого из методов есть сторонники и противники.
Сторонники визуального редактирования предпочитают данный подход в силу простоты, наглядности и доступности для широкой аудитории начинающих пользователей.
Сторонники кодирования убеждены, что только вручную можно создать оптимальный код и что программная разметка точнее визуальной. Те, кто предпочитает создание сайта вручную, критикуют редакторы, предоставляющие готовые шаблоны формы и заготовки, за однотипность.
Необходимо учитывать, что сегодня многие пользователи (разного уровня подготовки) занялись созданием собственных сайтов и нуждаются в различных по степени сложности продуктах. Одним пользователям требуется продукт "на вырост", другие хотят создать двухстраничный персональный сайт и больше к этому не возвращаться.
Отметим, наконец, что существуют и компромиссные решения: например, уже упоминавшиеся Microsoft FrontPage и Macromedia Dreamweaver имеют не только визуальные средства, но и весьма развитые редакторы кода. В последней версии FrontPage 2003 реализован даже сдвоенный режим, в котором пользователь может наблюдать, как действия визуального редактора приводят к изменению кода.
При этом очевидно, что чем выше профессионализм пользователя, тем меньше готовых шаблонов, макетов и подсказок ему требуется.
Заметим, что выбор между скоростью разработки и индивидуальностью стиля актуален не только для построения сайтов, но и для обычного строительства. Из кирпичей можно построить больше типов зданий, чем из панелей с готовыми проемами под окна и двери, но это и усилий требует иных (рис. 4.16).

Рис. 4.16. Сайтостроение можно сравнить с обычным строительством. Панельные дома строятся быстрее, зато кирпичные позволяют реализовать нестандартные идеи
Таким образом, простой текстовый редактор - это незаменимое средство для Web-дизайнера, досконально знающего HTML, но не слишком полезное для человека, который не собирается изучать HTML. Рассмотрим наиболее популярные редакторы.
Разработчик: Microsoft
Сайт программы: www.microsoft.com/frontpage
Microsoft FrontPage - это простой в освоении и удобный Web-редактор для проектирования, подготовки и публикации Web-сайтов. Благодаря интеграции с семейством продуктов MS Office, привычному интерфейсу и обилию шаблонов программа позволяет быстро освоить работу даже начинающим пользователям, если они знакомы с основами работы в MS Word. При этом FrontPage нельзя назвать решением "для начинающих": программа предоставляет широкие функциональные возможности и разнообразные средства оптимизации коллективной разработки, а также позволяет быстро создавать динамические комплексные Web-узлы практически любой сложности.
Усовершенствованная поддержка графики упрощает работу во FrontPage 2003 с изображениями из других приложений. FrontPage 2003 удачно сочетает в себе возможности использования визуального конструктора и средства редактирования кода. В этой версии программы появилось разделенное окно (режим Split), которое состоит из двух областей - "Конструктор" (Design) и "Код" (Code). В окне Design ведется разработка в режиме WYSIWYG, а в окне Code идет автоматическое обновление кода при внесении изменений в макет.

Рис. 4.17. В программе FrontPage 2003 доступен двухоконный режим, объединяющий подходы "Конструктор" и "Код"
Комплексные средства проектирования позволяют повысить качество создаваемого кода и усовершенствовать навыки программирования.
FrontPage 2003 генерирует эффективный HTML-код, не содержащий избыточности, характерной для кода, генерируемого Microsoft Word. Средства написания сценариев обеспечивают возможность интерактивного общения с посетителями.
Функция интеллектуального поиска и замены осуществляет поиск и замену атрибутов или тэгов на заданных страницах. При этом можно указывать сложные правила поиска и замены, что позволяет быстро выполнять обновления Web-узла. FrontPage предоставляет возможность оптимизации HTML-кода, написанного в других приложениях за счет удаления избыточных тэгов, пробелов и т.п.
Если вы собираетесь сделать простенький сайт, вам вполне подойдет служба бесплатного массового хостинга, предоставляющая своим клиентам не только дисковое пространство, но и простые шаблоны и инструменты, которые позволяют устроить прямо в Сети "мастерскую" и, как из конструктора, "собрать" собственный сайт. Услуга предоставляется бесплатно, если не считать оплаты пользования Сетью в процессе разработки и не учитывать тот факт, что на вашем сайте будет показываться чужая реклама. В качестве примера рассмотрим один из наиболее популярных в данном классе ресурсов, который находится по адресу http://www.narod.yandex.ru/ (рис. 4.18).
Рис. 4.18. Раздел "мастерская" предлагает сервисы по созданию, редактированию и управлению сайтом
Коротко остановимся на основных этапах формирования сайта. Прежде всего, вам предложат занять имя для нового сайта, которое будет иметь вид: ваше_имя.narod.ru. Здесь ваше_имя - выбранное вами и не занятое другим пользователем.
После регистрации можно отправиться в "мастерскую", где вам предоставят множество шаблонов для создания разных тематических страничек: "Моя главная страница", "Про меня", "Мои интересы" и т.д.
Создать главную страницу можно буквально за минуту. Столь быстрая работа возможна за счет того, что профессионалы-дизайнеры уже разработали типовые варианты "обложки" сайта. Вам нужно только выбрать цвет и стиль, написать, чему посвящен ваш сайт, и определить основные ссылки.
Если текущий дизайн вам со временем надоест, нажмите кнопку "сменить дизайн" и выберите новый шаблон - дизайн автоматически изменится.
Вслед за главной страницей, так же быстро, можно сделать страницу со своим резюме или краткой информацией о себе. Для этого существуют самые разные шаблоны. Если вас не устраивают те шаблоны, которые предлагает система, вы можете использовать простой набор инструментов и создать собственный дизайн. Не покидая раздел "мастерская", можно получить доступ и к HTML-коду своей странички, однако вряд ли целесообразно создавать собственный дизайн с использованием сетевого инструментария.
Готовые шаблоны существуют не только для создания примитивного сайта типа "Я и моя собака" - удобный конструктор позволяет за считанные минуты сделать сайт компании, воспользовавшись специальными шаблонами "Деловая страница" (визитная карточка фирмы) и "Прайс-лист".
Когда страница будет готова, ее можно поместить в каталог, предварительно определив категорию, в которой ее будут искать пользователи. Помимо сайта, вам предлагается бесплатная почта с адресом, совпадающим с именем сайта. Это достаточно удобно, поскольку, запомнив имя сайта, ваши клиенты будут знать, как вам написать.