Гипертекст или гипертекстовый документ — это структурированная информация, содержащая в себе гиперссылки, как на собственные фрагменты, так и на другие гипертексты.
Простейший пример гипертекста — книга, оглавление которой содержит ссылки на главы и разделы книги (здесь ссылка — это номер страницы, с которой начинается соответствующие глава или раздел). Посмотрев в оглавление, человек узнает номер страницы нужной ему главы, и открывает книгу на искомой странице. Для того, чтобы найти интересующую его главу книги, человек не должен просматривать всю книгу — оглавление предоставляет ему возможность быстрого «попадания» на ту главу или раздел, который ему необходимы.
Возможности компьютера рождают принципиально новую идею: изначально проектировать текст в расчете на возможность чтения не по порядку, а по контексту. Такой подход позволяет разным пользователям просматривать текст, ориентируясь на свои вкусы, уровень владения темой и поставленные задачи.
Структура компьютерной книги становится нелинейной, она даже перестает быть иерархической, а скорее напоминает спутанную рыболовную сеть. Для навигации по такой сети предусматривается простой способ: те фрагменты документа, которые имеют переходы на другие его части, каким-то образом выделены.
Для обнаружения гиперссылок и передвижения по гипертексту с помощью программы-браузера:
- гипертекстовые ссылки среди других элементов текста обычно выделяются цветом и подчеркиванием, а графические изображения, являющиеся гиперссылками, обводятся цветной рамкой;
- мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;
- для перехода по ссылке необходимо щелкнуть по ней мышкой.
Гипертекстовый документ может ссылаться как на другие документы на этом же компьютере, так и на документы или любые ресурсы Интернет на других компьютерах сети.
Гипертекстовый документ для Всемирной Паутины создается с использованием языка HTML и называется Веб-страницей. Множество связанных гиперссылками Веб-страниц, объединенных определенной тематикой и имеющих общее оформление, называют Веб-сайтом. Страницы веб-сайта обычно размещаются на одном компьютере, хотя могут гиперссылками связываться и с другими информационными ресурсами в Интернет.
HTML-код страницы представляет собой текстовый файл, размеченный командами (тегами) языка HTML, который может быть создан в простейшем текстовом редакторе, не добавляющем к тексту собственных символов форматирования (как стандартная программа Windows Блокнот или даже DOS-редакторы). Программа-браузер, отображая такой документ, выполняет команды языка HTML, определяющие параметры отдельных фрагментов (текста, графики, аудио и видео), из которых в окне браузера формируется просматриваемая пользователем Веб-страница. Кроме того, гипертекстовый документ может содержать гиперссылки на другие документы такого же формата.
Веб-страницы и Веб-сайты, созданные только с помощью HTML, имеют статический характер, то есть представляют неизменную информацию и не взаимодействуют с пользователем.
Веб-приложением называют программы, работающие под управлением браузера и созданные на основе HTML, но с использованием еще целого ряда других языков программирования. Веб-приложения предоставляют пользователю собственный интерфейс для взаимодействия с программой, возможности ввода информации, ее компьютерной обработки, а также сохранения информации на дисках компьютера или отправки ее по электронной почте заказчику.
Языковые и инструментальные средства для создания Веб-сайтов
Для создания гипертекстовых информационных ресурсов сейчас широко используются три языковых средства:
- язык HTML (HyperText Markup Language — язык разметки гипертекста) — для задания логической структуры документа (заголовки, абзацы, графические изображения и прочие объекты);
- язык каскадных стилей CSS — для задания способа отображения документа (цвета текста и фона, шрифты, способы выравнивания и позиционирования отдельных объектов на странице и т. п.);
- языки программирования сценариев (чаще всего JavaScript) — для написания сценариев, т. е. небольших программ, которые исполняются браузером в процессе отображения документа и обеспечивают его динамическое изменение в ответ на различные события.
При этом именно HTML-код документа является той средой, в которой размещаются остальные программные компоненты Веб-страницы.
Но для желающих создавать собственные гипертекстовые информационные ресурсы знание всех премудростей перечисленных языков вовсе не является необходимым. Существует множество инструментальных сред — визуальных и специализированных текстовых редакторов (так называемых редакторов тегов), существенно упрощающих процесс создания гипертекста. Даже все программы, входящие в популярный пакет Microsoft Office, предусматривают сохранение документов в формате HTML.
К примеру, текстовый процессор Microsoft Word вполне может быть использован новичком в качестве простейшего визуального редактора гипертекста. Привычными средствами в рабочем поле Word можно скомпоновать текстовый документ, содержащий таблицы и иллюстрации, а при сохранении его в формате гипертекста Word выполнит автоматическую генерацию HTML-кода, примерно соответствующего созданному документу.
Однако, при использовании Word'а как визуального HTML-редактора возникает множество проблем, проявляющихся как в визуальных недостатках полученного HTML-документа, так и в необоснованно больших размерах файлов. Автоматически сгенерированный HTML-код документа страдает чрезмерной избыточностью — процент «мусора» порой достигает 50%. А это затрудняет пересылку документа по сети, увеличивая затраты времени и денег.
Существуют более совершенные, по сравнению с Word, визуальные HTML-редакторы. От очень простых в обращении редакторов для новичков (к примеру, FrontPage Express) и до инструментальных сред для профессиональных Веб-дизайнеров и программистов (Macromedia Dreamweaver, FrontPage, HomeSite и др.). Однако у каждого из автоматических генераторов HTML-кода есть свои особенности и недостатки.
Сгенерированный ими код зачастую может быть существенно улучшен и уменьшен, что особенно важно для ресурсов, размещаемых на серверах Интернет: при медленном модемном доступе каждый лишний килобайт пересылаемой информации может сыграть негативную роль, ведь пользователь не любит ждать!
Поэтому знание основных команд языка HTML и принципов построения HTML-кода просто необходимы, если вы хотите получить оптимальный код и добавить на страницу интерактивность за счет собственных скриптов и таблиц стилей, если вам хочется создать оригинальное HTML-произведение, которое не будет выглядеть как набившие оскомину интернетовские штампы.
А визуальные редакторы, конечно, можно использовать в сложных случаях для ускорения работы. Например, при формировании сложных таблиц или при необходимости разметить графическую иллюстрацию гипертекстовыми ссылками.
Включение гиперссылок в документы MS Office
Можно создать гипертекстовый информационный ресурс в любом приложении пакета Microsoft Office, вставив в документ, созданный в Word, Excel или Power Point гиперссылку на существующий или новый файл. После задания имени для нового файла можно сразу открыть его для редактирования или вернуться к этому файлу позднее. Связанные гиперссылками документы и образуют гипертекстовый информационный ресурс, который уже может быть просмотрен в браузере.
Как работает браузер
Браузер, выполняя программу HTML, формирует на экране документ, который видит пользователь. Важным свойством выполнения является последовательное заполнение экрана элементами слева-направо и сверху-вниз в соответствии с порядком следования тегов в HTML-документе. Нельзя написать программу так, чтобы браузер сначала нарисовал линию в нижней части экрана, а потом вывел текст в верхней. Заполняя экран слева-направо и сверху-вниз, браузер не может вернуться к той части экрана, которую уже построил, если документ был описан только средствами HTML.
Программируя на HTML, нельзя ориентироваться на определенные размеры окна, в котором браузер строит документ. Браузер, выполняя программу, использует реальные размеры окна, которые предоставлены ему конкретным пользователем конкретного компьютера. Значит, один и тот же HTML-документ может отображаться на экране немного по-разному на разных компьютерах и даже на одном компьютере при разных его настройках или размерах окна, которые легко меняются пользователем.
К примеру, текст заголовка при маленьком окне будет вынужден занять не одну, а две строки. Абзац выводится так, чтобы поместиться в окне. При этом браузер не обращает внимание на то, как размещается абзац по строкам в HTML-тексте.
Обозначенные особенности оборачиваются положительной стороной HTML, делая его независимым от компьютерной платформы (DOS, Windows, Unix, MacOs...) и параметров конкретного монитора, в частности, от количества пикcелей на экране. Именно это свойство HTML-программ играет такую важную роль в глобальной компьютерной сети Интернет, где представлены все мыслимые типы компьютеров и операционных систем.
Графика на Web-страницах
Чем больше графики содержит Web-страница, тем медленнее она будет загружаться при просмотре пользователем. Однако страницы, вообще лишенные графического оформления, теряют свою индивидуальность и выразительность. Поэтому проектировщик или разработчик сайта должен выдерживать равновесие между визуальной привлекательностью и разумной скоростью доставки информации в Сети. Знание особенностей используемых в Интернет графических форматов, областей их применения и использования, понимание различия между ними позволяют успешно решать эту проблему.
GIF и JPEG — это два наиболее популярных графических формата, которые давно стали фактическими стандартами для использования в Web. Они читаются всеми существующими браузерами. Их главное общее достоинство — эффективные алгоритмы сжатия графической информации, что позволяет существенно уменьшать объемы файлов при поддержании достаточного качества изображений. Но у каждого формата есть свои особенности.
Формат GIF
- Поддерживает не более 256 цветов, при этом в файле с рисунком сохраняется и свойственная ему цветовая палитра, то есть для разных рисунков палитра и количество цветов в ней могут сильно отличаться, в зависимости от использованной при их создании цветовой гаммы.
- Поддерживает прозрачность фона изображения. Это удобно в том случае, когда изображение будет помещено на Web-странице поверх фонового рисунка (обоев страницы).
- Имеет возможность сохранения в одном файле нескольких кадров изображения, что находит свое применение при изготовлении анимированных GIF-рисунков.
- Поддерживает чересстрочную развертку для того, чтобы еше до полной загрузки изображения уже можно было приблизительно понять суть рисунка и решить, продолжать ли его скачивание.
Применение формата GIF: текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачным фоном.
Формат JPEG
- Позволяет сохранять полноцветные изображения с 16,7 млн. цветов, но с выбором «коэффициента сжатия», определяющего баланс между размером файла и качеством изображения.
- Выполняет эффективное сжатие информации за счет замены близких оттенков цветов, неразличимых человеческим глазом, одним цветом для нескольких точек изображения, в итоге размер файла сильно уменьшается без значительной потери качества изображения, что, естественно, влияет на скорость загрузки файла (изображения) в Интернет.
- Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается, чтобы до полной загрузки изображения уже можно было приблизительно понять суть рисунка и решить, продолжать ли скачивание.
Применение формата JPEG: лучше всего JPEG подходит для хранения фотографий и других изображений, содержащих большое количество цветов, плавные цветовые переходы и мелкие разноцветные детали.
Для маленьких картинок (меньше 100 пикселов по максимальному размеру) используйте формат GIF, даже если картинка — фотография. Формат JPG не приспособлен для маленьких изображений.
Требования к «хорошему Web-сайту»
- Лицо сайта — это входная страница. Надо делать ее как можно привлекательнее и информационнее. Как установили психологи, посетитель сайта, загрузив входную страницу, в считанные секунды решает, стоит ли смотреть дальше. Если ему не понравится входная страница, он может «уйти».
- Четыре цвета — это максимум для хорошего дизайна: цвет фона + цвет текста + цвет гиперссылок + цвет использованных ссылок.
- Хороший сайт должен обладать единством стиля. Это означает, что на всех страницах сайта должны быть одинаковыми:
- навигационные панели,
- цветовое решение и фон,
- шрифтовое оформление текста,
- основные графические элементы (логотип или эмблема, кнопки).
- Дизайн внутренних страниц сайта должен быть узнаваем, сопоставим с дизайном входной страницы. Посетитель сайта, с какой бы страницы он ни вошел, должен понять, что это за сайт, и мог «пойти посмотреть» любую другую его страницу. Поэтому на каждой странице должны быть:
- название сайта,
- главная навигационная панель,
- нижний колонтитул — меню, дающее возможность подняться в начало страницы и, при желании, связаться с разработчиком сайта.
- Правило двух щелчков: пользователь за 1-2 щелчка мыши должен попасть в любое место сайта. Иначе у многих не хватит терпения «ходить» по вашему сайту. Рекомендуемое правило (наиболее часто нарушаемое) — чтобы страница помещалась в 1-2 экрана, а входная — только в один экран.
- Пишите маленькие страницы: Надо следить, чтобы общий объем каждой страницы сайта вместе с текстом и графикой не превышал 40 Кб — тогда время ожидания загрузки страницы, даже по модему, не превысит психологических возможностей пользователя.
- Берегите глаза посетителя: никаких текстурных фонов — они существенно ухудшают читаемость текста, а для улучшения — требуют жирного шрифта. Но нельзя выделять жирностью весь текст — «текст кричит».
- Не заставляйте посетителя смотреть картинки больших размеров, что требует долгого ожидания их загрузки. Правильнее разместить миниатюру (сжатую картинку) и ее сделать ссылкой на страницу с большой картинкой с указанием размера файла. Если кто-то захочет посмотреть картинку в более крупном масштабе, нажмет на ссылку.
- Должна быть поисковая страничка на сайте. Эта страница может представлять собой просто текстовое иерархическое оглавление с гиперссылками на все страницы сайта.
- Ваши страницы должны «смотреться» хотя бы в последних версиях популярных браузеров (MS Internet Explorer, Netscape Navigator, Mozilla, Opera).
Комментариев нет:
Отправить комментарий