Основы сайтостроения и Web-дизайна

Учебное пособие

Оглавление

Модуль 1.  Просмотр и сохранение информации с сайтов Всемирной Паутины  с помощью программы-браузера

Интерфейс и назначение программы-браузера

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

Настройка программы-браузера

Поиск информации по адресу

Получение информации разных видов с Web-страниц и ее сохранение

Модуль 2.  Поиск информации в Интернете

Использование поисковых серверов

Технологии поиска информации в WWW

Приемы эффективного поиска информации

Особенности поиска по группе слов

Получение файлов из FTP-архивов

Модуль 3. Технология создания гипертекстовых документов

Гипертекст как способ организации информации

Языковые и инструментальные средства для создания Веб-сайтов

Классификация Веб-сайтов по возможностям взаимодействия с пользователем

Общее представление о технологиях клиент-серверного Веб-программирования

Включение гиперссылок в документы MS Office

Сохранение документов MS Office в формате HTML

Использование визуальных редакторов

Модуль 4. Основы языка HTML

Язык разметки гипертекста HTML: основные понятия

Структура простейшей HTML- программы

Основные элементы Web-страницы и соответствующие им теги

Мета-теги

Как работает браузер

Редакторы тегов

Алгоритм внесения изменений и дополнений в Web-страницу  при программировании в Блокноте

Модуль 5. Основы подготовки изображений для Web

Основные принципы Веб-дизайна

Анатомия Веб-сайта

Графические форматы

Оптимизация изображений для Web

Конструирование GIF-анимации в Adobe ImageReady

Модуль 1.  Просмотр и сохранение информации с сайтов Всемирной Паутины  с помощью программы-браузера

Для того чтобы начать путешествие по Всемирной Паутине, необходимо подключиться к Интернет и запустить специальную программу — браузер. Браузер загружает Web-страницу и отображает ее в соответствии с командами (тегами) языка разметки гипертекста (HTML). Браузеры существуют для всех операционных систем: Microsoft Internet Explorer, NeoPlanet, Opera – для ОС Windows, Netscape Communicator, Mozilla, Mozilla Firefox – для ОС Windows и Linux, и др. Одним из наиболее популярных браузеров является Microsoft Internet Explorer.

Интерфейс и назначение программы-браузера

Запустить браузер можно различными способами (из Главного меню, с Панели задач, с Рабочего стола).

Браузер начинает работу с загрузки так называемой "домашней" Web-страницы. Окно браузера содержит Меню, панель Кнопки, окно Адрес, а также рабочую область, в которой и просматриваются Web-страницы.

Окно Адрес позволяет выбрать из списка или ввести с клавиатуры URL нужной Web-страницы.

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

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

Адрес начальной страницы, загружаемой в Обозреватель, можно изменить.

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

После загрузки домашней страницы можно поступать различными способами:

• воспользоваться ссылками загруженной Web-страницы браузера;

• в строку Адрес ввести адрес (URL) интересующей Web-страницы;

• воспользоваться «закладками» Web-страниц.

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

Для перехода на другие Web-сайты можно воспользоваться гиперссылками, выводящими за пределы Учебного сайта, или ввести URL (URL — Uniform Resource Locator) нужного сайта в окне Адрес. URL включает в себя протокол доступа, доменное имя или IP-адрес сервера и путь к Web-странице. Например, URL для начальной страницы сайта «Информатика и информационные технологии» можно записать в следующих формах:

http://schools.keldysh.ru/info2000/index.htm

http://194.226.57.46/info2000/index.htm

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

Если Web-страница размещена на локальном компьютере, то для ее загрузки в браузер в текстовое поле Адрес необходимо ввести полный путь к файлу Web-страницы. Например, для Web-страницы, размещенной на CD-ROM:

E:\practicum\lnternet\12.htm

Загрузить нужную Web-страницу можно также, воспользовавшись командой меню браузера Файл – Открыть....

Настройка программы-браузера

Для этого в меню Сервис выберите пункт Свойства обозревателя. Откроется диалоговое окно Свойства обозревателя.

Указание адреса домашней страницы

(Посмотрите видеоролик и выполните Упражнение 1.1: Измените адрес домашней страницы для браузера).

Установка правильной кодировки при просмотре Web-страниц

Web-страницы представляют собой текстовые файлы с HTML-тегами, поэтому при просмотре русскоязычных страниц могут возникать проблемы с кодировками кириллицы. Существуют шесть различных кодировок кириллицы СР-866 (MS-DOS), CP-1251 (Windows), KOI8-R (Unix), Mac (Mac OS), ISO и Unicode. Браузеры могут отображать Web-страницы, созданные в любой кодировке.

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

(Посмотрите видеоролик и выполните Упражнение 1.2: Установите правильную кодировку для отображаемой в браузере страницы.)

Ускорение загрузки Web-страниц

Для ускорения загрузки в браузер Web-страниц можно использовать несколько различных методов. При малой скорости соединения с Интернетом (менее 14 400 бит/с) целесообразно отключить в настройках браузера загрузку мультимедийных объектов Web-страниц (графических, анимационных, видео и звука). В результате Web-страницы будут загружаться значительно быстрее, однако информация на них будет представлена только в текстовом виде, без графики и звука. (Посмотрите видеоролик и выполните Упражнение 1.3: Отключите в настройках браузера загрузку мультимедийных объектов.)

Поиск информации по адресу

Пусть нас интересует информация о процессоре Pentium IV фирмы Intel.

(Посмотрите видеоролик и выполните Упражнение 1.4: Введите известный адрес Web-сайта.)

Создание и использование «закладок» в браузере 

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

(Посмотрите видеоролик и выполните Упражнение 1.5: Создайте закладку на интересующую вас страницу.)

Получение информации разных видов с Web-страниц и ее сохранение

Важные и интересные Web-страницы полезно сохранять на локальном компьютере. Можно выбрать различные варианты сохранения Web-страниц:

• сохранение страницы в формате HTML приведет к сохранению самой страницы, но при этом не сохранятся связанные с ней рисунки, звуковые и прочие файлы;

• сохранение страницы в формате ТХТ приведет к сохранению самой страницы в текстовом формате;

• сохранение страницы в формате Web-страница полностью (доступно в Internet Explorer 5.0 и выше) приведет к сохранению не только самой страницы, но и связанных с ней рисунков, звуковых и прочих файлов в отдельной папке.

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

(Посмотрите видеоролик и выполните Упражнение 1.6: Сохраните информацию с Web-страницы.)

Модуль 2.  Поиск информации в Интернете

Использование поисковых серверов

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

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

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

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

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

Наиболее популярными поисковыми системами общего назначения в русскоязычном Интернете (Рунете) являются Яндекс (www.yandex.ru), Rambler (www.rambler.ru) и Апорт (www.aport.ru), а в англоязычном — Yahoo! (www.yahoo.com) и Google (www.google.com). Правда, сравнительно недавно Google обзавелся и русскоязычным интерфейсом.

(Посмотрите видеоролик и выполните Упражнение 2.1: Найдите общие элементы и отличия в интерфейсах поисковых систем.)

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

Российская файловая поисковая система (www.files.ru) и Файловая поисковая система (www.filesearch.ru) являются специализированными поисковыми системами, в базах данных которых хранятся сведения о 6 миллионах файлов, размещенных на 2 тысячах серверов файловых архивов Рунета.

WhoWhere? (www.whowhere.lycos.com) является специализированной поисковой системой, позволяющей искать адрес электронной почты по имени человека. В окно поиска необходимо ввести имя и фамилию, после чего система осуществит поиск e-mail-адреса в базе данных, содержащей абонентов, зарегистрированных в системе. К сожалению, чаще всего это жители США.

Технологии поиска информации в WWW

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

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

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

Начиная с 1997 г., поисковые системы начали предоставлять услуги по розыску не только текстов, но и других типов данных: рисунков, видеофайлов, звуковых клипов и т. п. Обычно, перед тем как давать задание на поиск, следует выбрать одну из вкладок, соответствующую типу разыскиваемых данных. Система «Яндекс» позволяет разыскивать, кроме текстов, также товары и рисунки. Система «Апорт» поддерживает поиск МРЗ-файлов, а система «Рамблер» разыскивает только тексты.

(Посмотрите видеоролик и выполните Упражнение 2.2: Выполните по ключевым словам "белый медведь" поиск в разных поисковых системах.)

Приемы эффективного поиска информации

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

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

Все поисковые указатели реализуют четыре основных алгоритма поиска простой поиск, расширенный поиск, контекстный поиск и специальный поиск.

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

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

Расширенный поиск всегда подразумевает запрос из группы слов. При расширенном поиске в большинстве случаев разрешается связывать ключевые слова логическими операторами AND (И), OR (ИЛИ), NOT (HE) и другими. Правила записи образца поиска из ключевых слов и логических операторов в разных системах не одинаковы, но очень похожи. На сайте поисковой системы всегда можно найти описания этих правил.

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

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

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

1. Во-первых, для эффективного поиска недостаточно одного ключевого слова. Продумайте и приготовьте несколько ключевых слов из интересующей вас предметной области: от самого общего понятия, через постепенное уточнение, до самого узкого.
2. Иногда простое изменение последовательности вводимых слов при поиске "В найденном" повышает эффективность поиска.
3. Если пользуетесь простым поиском по одному слову, то имеет смысл применять как можно больше разных поисковых систем. То, что они используют разные алгоритмы ранжирования выдаваемых гиперссылок, дает шанс не пропустить какой-то значимый ресурс.
4. Для поиска по группе слов или по ключевой фразе используйте не любую поисковую систему, а ту, с которой вы лучше знакомы. В разных системах используются разные правила для записи группы слов, и эти правила надо знать заранее.

(Посмотрите видеоролик и выполните Упражнение 2.3: Найдите к уроку информатики задачи для решения в электронных таблицах Excel.)

Особенности поиска по группе слов

Слова, разделенные пробелами, разные поисковые системы трактуют по-разному. Допустим, мы хотим разыскать Web-страницы, на которых что-то говорится об операционной системе Microsoft Windows. Логично ввести в поле поиска слова Microsoft Windows и ждать результата. Но результат может быть обескураживающим. Одни поисковые системы понимают такую запись как Microsoft И Windows — они дадут нам то, что мы ищем. Другие могут понимать эту запись как Microsoft ИЛИ Windows — тогда будут разысканы все Веб-страницы, на которых встречается либо первое слово, либо второе, либо оба вместе. Нас, конечно, интересуют только те страницы, на которых оба слова встречаются вместе, но они затеряются среди прочих, не нужных нам страниц.

(Посмотрите видеоролик и выполните Упражнение 2.4: Выполните проверку для любой из поисковых систем: как она обрабатывает группы ключевых слов?)

Все основные российские поисковые системы по умолчанию между словами ставят оператор И, хотя у системы «Яндекс» есть свои особенности. Там считается, что эти два слова должны одновременно присутствовать не в документе, а в одном предложении. Если достаточно, чтобы они присутствовали в документе, перед каждым словом надо поставить знак «+»:
+ Microsoft + Windows.

Но как сделать, чтобы разыскивались документы, содержащие одно из заданных ключевых слов, то есть как задать соотношение ИЛИ? Попробуйте ввести одно из следующих словосочетаний: Microsoft ИЛИ Windows; Microsoft OR Windows; Microsoft | Windows.

Роль прописных букв

В большинстве индексных поисковых систем «хлеб» = «ХЛЕБ», но, как ни удивительно, «ХЛЕБ» ≠ «хлеб». Общее правило такое: если клиент ввел строчные символы, то разыскиваются как строчные, так и прописные символы, но если клиент использовал прописные буквы, то ищется точное совпадение только с прописными буквами. Поэтому не злоупотребляйте применением прописных букв в запросе и используйте их лишь тогда, когда абсолютно уверены в результате.

Однако некоторые поисковые системы имеют отличия. Так, например, в системе «Рамблер» при индексации все прописные буквы принудительно «понижаются» до строчных. Это означает, что использовать в запросе прописные буквы в этой системе бесполезно.

(Посмотрите видеоролик и выполните Упражнение 2.5: Выполните поиск сведений про Красную Шапочку)

Получение файлов из FTP-архивов

Протокол FTP (File Transfer Protocol — протокол передачи файлов) и одноименная служба FTP специально предназначены для пересылки файлов. Это гораздо более эффективные средства, чем электронная почта, которая позволяет пересылать файлы в приложениях к письму.

FTP-серверы — это серверы, с которыми может производиться обмен файлами по FTP-протоколу. FTP-серверы по своему функциональному назначению могут являться как серверами файловых архивов, так и Web-серверами, на которых размещаются Web-сайты. С серверов файловых архивов производится загрузка файлов на локальный компьютер, а на Web-серверы, наоборот, производится передача файлов с локального компьютера в процессе публикации Web-сайтов. Обмен файлами (загрузка и передача) с FTP-серверами производится с помощью специализированных программ — FTP-клиентов (Far, GetRight, ReGet, AceFTP, Cute FTP и др.).

На десятках тысяч серверов файловых архивов хранятся сотни миллионов свободно распространяемых (freeware) и условно бесплатных (shareware) программ, а также мультимедийных файлов. В российском Интернет одним из наиболее посещаемых серверов файловых архивов является сервер www.freeware.ru. Сервер содержит несколько тысяч бесплатных и условно-бесплатных программ для различных компьютерных платформ (Windows, Unix, Mac и др.).

Загрузка файлов из файловых архивов с помощью браузера

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

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

Загрузка файлов из файловых архивов с помощью специализированных программ-менеджеров загрузки файлов

Для работы с FTP-серверами часто используются специальные программы, так называемые FTP-клиенты, например, Far, GetRight, ReGet, Cute FTP. Такие программы предоставляют пользователю более удобный  интерфейс, и не только обеспечивают большую скорость передачи файлов, но и, что самое главное, позволяют после потери связи с сервером продолжить загрузку файла при последующем восстановления соединения.

Большинство программ FTP-клиентов при инсталляции прописываются в Главном и в контекстном меню. Поэтому проще всего к такой программе обратиться, кликнув по ссылке на файл правой кнопкой мыши, и выбрав из контекстного меню пункт "Download with… " (Скачать с помощью…).

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

(Посмотрите видеоролик и выполните Упражнение 2.6: Произведите загрузку файла с использованием возможностей браузера MS Internet Explorer с сервера www.freeware.ru.)

Модуль 3. Технология создания гипертекстовых документов

Гипертекст как способ организации информации

Гипертекст или гипертекстовый документ— это структурированная информация, содержащая в себе гиперссылки, как на собственные фрагменты, так и на другие гипертексты.

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

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

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

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

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

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

Гипертекстовый документ для Всемирной Паутины создается с использованием языка 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-произведение, которое не будет выглядеть как набившие оскомину интернетовские штампы.

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

Классификация Веб-сайтов по возможностям взаимодействия с пользователем

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

Статические сайты

HTML предоставляет авторам информационных ресурсов средства для:

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

перехода к другим Веб-страницам посредством щелчка кнопки мыши по гипертекстовой ссылке;

создания и заполнения форм для сообщения с удаленными службами, например, для поиска информации, бронирования билетов, оформления заказов на товары и т. п.;

непосредственного включения в Веб-документы видеоклипов, звуков и других внешних объектов.

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

Интерактивные сайты

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

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

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

В настоящее время существуют несколько языков для написания скриптов для Веб-страниц, самые распространенные из которых — JavaScript и Visual Basic Script (VBScript).

VBScript — это разработка фирмы Microsoft. Скрипты на этом языке выполняются пока только в браузере Internet Explorer.

JavaScript был первоначально создан компанией Netscape, а затем Microsoft разработала свою версию этого же языка, названную JScript. К сожалению, это привело к возникновению разных, не до конца совместимых, версий языка JavaScript. Тем не менее, этот скриптовый язык сегодня поддерживается всеми существующими браузерами разных производителей.

Динамические сайты

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

Для преодоления этого ограничения Microsoft предложила технологию Dynamic HTML (DHTML). DHTML — это технология для построения гипертекстовых приложений, практически не отличимых по своей динамике и интерактивности от обычных компьютерных программ.

Один из вариантов технологии DHTML предполагает использование следующих языков и программных средств:

Версия языка HTML4.0 кардинально не отличается от версии 3.2 по тегам (хотя есть и новинки). Самое главное в HTML4.0: все элементы Веб-страницы без исключения (графика, заголовки, таблицы, текст, все теги и их атрибуты) доступны для управления. Используя языки описания стилей CSS и JavaScript, можно управлять любым элементом на странице, меняя только его, не перерисовывая целиком всю страницу.

DHTML позволяет изменять HTML-код страницы при помощи скриптов – страницы становятся динамическими. Такая возможность появляется за счет того, что каждый элемент HTML-документа рассматривается как объект со своими свойствами. Интерактивно взаимодействуя с отображением документа, пользователь посредством скриптов изменяет свойства объектов, например, значения атрибутов элемента или свойства, описанные в стилях. Браузер на основе новой информации изменяет отображение документа.

Технология DHTML допускает, например, применять абсолютное позиционирование, то есть, выводить элементы на экран, используя реальные координаты. Программное изменение координат в объектной модели вызывает изменение положения элемента на экране.

Использование CSS позволяет наряду с двумя координатами элемента страницы, x и y, использовать еще и третью координату — z-индекс. Третья координата определяет номер слоя, в который помещается элемент. Таким образом, при движении в многослойном пространстве одни элементы могут проходить над или под другими.

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

Общее представление о технологиях клиент-серверного Веб-программирования

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

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

Ко всем программам, которые передаются с сервера на клиентские машины и запускаются там на выполнение, предъявляется одно общее требование:

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

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

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

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

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

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

Включение гиперссылок в документы MS Office

Можно создать гипертекстовый информационный ресурс в любом приложении пакета Microsoft Office, вставив в документ, созданный в Word, Excel или Power Point гиперссылку на существующий или новый файл. После задания имени для нового файла можно сразу открыть его для редактирования или вернуться к этому файлу позднее. Связанные гиперссылками документы и образуют гипертекстовый информационный ресурс, который уже может быть просмотрен в браузере.

(Посмотрите видеоролик и выполните Упражнение 1: Проверьте алгоритм создания гиперссылки для связи с другим документом.)

Сохранение документов MS Office в формате HTML

(Посмотрите видеоролик и выполните Упражнение 2: Сохраните документ Word как Web-страницу.)

Использование визуальных редакторов

(Посмотрите видеоролик и выполните Упражнение 3: Создайте учебный сайт в визуальном редакторе.)

Модуль 4. Основы языка HTML

Язык разметки гипертекста HTML: основные понятия

Быстрое развитие Сети в 90-е годы потребовало стандартизации языка разметки гипертекста HTML, и в ноябре 1995 г. был зарегистрирован первый стандарт HTML 2.0. Следующим шагом стало появление в январе 1997 г. новой, гораздо более мощной версии HTML 3.2. Наконец, в апреле 1998 г. появился HTML 4.0, который является в настоящее время действующим стандартом языка (в уточненной редакции HTML 4.01, опубликованной в декабре 1999 г.). Именно стандарт HTML 4.0 и будет предметом нашего рассмотрения.

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

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

Тег — это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Например, элемент EM (выделение текста) выглядит так:

выделяемый текст

Имена элементов могут быть набраны в любом регистре, т. е. и равнозначны.

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

…