Дополнительная - Армавирский государственный

Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение
высшего профессионального образования
«Армавирская государственная педагогическая академия»
Факультет технологии, экономики и дизайна
Кафедра информатики и информационных технологий обучения
УТВЕРЖДАЮ
Первый проректор
ФГБОУ ВПО «АГПА»
ТкаченкоИ.В.
« _ » _________________ 2012 г.
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС
по дисциплине Б2.ДВ1 «Технологии создания WEB-сайтов»
(НАИМЕНОВАНИЕ ДИСЦИПЛИНЫ)
Направление подготовки 080100.62 «Экономика»
Профиль подготовки «Экономика предприятий и организаций»
Квалификация (степень) выпускника: бакалавр экономики
Форма обучения: очная
Составитель: Андрусенко Е.Ю.
Утверждено на заседании кафедры
информатики и ИТО
Протокол № _____ от _______________ 2012 г.
Зав. кафедрой __________________ Бельченко В.Е.
Армавир, 2012
2. Обоснование УМК.
Учебно-методический комплекс по дисциплине «________» разработан в соответствии с
требованиями ФГОС ВПО (федеральный или региональный компонент) к обязательному
минимуму содержания и уровню подготовки дипломированного выпускника и предназначен
для студентов, обучающихся по направлению (профилю), (программе) ________ «__________».
Учебно-методический комплекс дисциплины рекомендован к утверждению учебнометодической комиссией на заседании кафедры _____________ «___» от «_____» ___________
20__ г., протокол № __.
Автор (составитель): доцент Андрусенко Е.Ю.
Рецензенты: ______________________________________
--------------------------------------------------------------------------------------Учебно-методический комплекс дисциплины утвержден на заседании Учебнометодической комиссии кафедры ______________________________
(наименование учебного подразделения)
«____»_________________ 20___ г. протокол № ____
Председатель УМК
______________/ _______________
(подпись)
Ф.И.О.
----------------------------------------------------------------------------------------Учебно-методический комплекс дисциплины утвержден на заседании УМС факультета
_____________________________________
«____»_________________ 20___ г. протокол № ____
Председатель УМС
____________/ _______________
(подпись)
Ф.И.О.
----------------------------------------------------------------------------------------Учебно-методический комплекс дисциплины согласован с руководителем программы
__________________________________________________
(наименование программы)
«____»_________________ 20___ г.
Руководитель программы ______________/ ___________________
(подпись)
Ф.И.О.
2
Представление содержания УМКД
Пояснительная записка ................................................... Error! Bookmark not defined.
Распределение часов и учебно-тематический план дисциплиныError! Bookmark not
defined.
Список рекомендуемой литературы (основной, дополнительной) .............................. 6
Рабочая программа дисциплины ...................................................................................... 9
3
Пояснительная записка.
Цели и задачи дисциплины.
Целью преподавания дисциплины «Технологии создания WEB-сайтов» состоит в
ознакомлении студентов с основными понятиями создания Интернет страниц различной
сложности а также развитие как творческого, так и логического мышления у студентов и
приобретение знаний и навыков при разработке современных web-сайтов, а так же
мультимедийных продуктов web-среды. В процессе обучения студенты рассматривают
функциональные
возможности
ряда
профессиональных
программных
продуктов
для
разработки web-сайтов, а также различные графические и мультимедийные стандарты. Вместе
с тем рассматриваются основы процесса организации online-обучения и технологии построения
web-сайтов.
Задачи:
В результате изучения дисциплины «Технологии создания WEB-сайтов» студенты
должны знать:
- основные понятия HTML - кода;
- существующие способы построения Интернет страниц;
- основных средства создания и редактирования Интернет страниц с помощью средств
операционной системы или специализированных программ.
Изучив данный курс, студенты должны уметь:
- создавать и редактировать Интернет страницы;
- работать с HTML - кодом в программе Macromedia Dreamweave, используя стандартные
объекты, рисование, редактирование уже созданных Интернет страниц;
- создавать стили (CSS);
- работать со скриптами (JavaScript);
- создавать flash - анимацию
- выполнять творческую работу в виде верстки Интернет страниц, создания Интернет
сайта, создания анимированных роликов на flash, создание flash - презентаций и т.д.
4
Место дисциплины в структуре ООП ВПО
Место дисциплины в реализации основных задач ОПП.
Дисциплина
Б2.ДВ1
создания
«Технологии
WEB-сайтов»
относится
к
профессиональному циклу ООП и включена в вариативную часть.
Место дисциплины в реализации основных задач ОПП.
При изучении дисциплины «Технологии создания WEB-сайтов» обучающийся студент
приобретает необходимые знания при работе с языками программирования для создания
Интернет страниц, о возможностях использования Web - дизайна для проектирования и
создания Интернет сайтов.
Компетенции обучающегося, формируемые в результате освоения дисциплины
В результате изучения дисциплины «Технологии создания WEB-сайтов» бакалавр
должен уметь решать задачи, соответствующие его квалификации, указанной в ФГОС
направления подготовки 080100.62 «Экономика» в соответствии с требованиями к результатам
освоения основной образовательной программы.
.
Студент должен:
Знать:
Наличие знаний по Web - дизайну позволяет выпускникам академии направления
080100.62 «Экономика»
потребностей
сравнительно легко адаптироваться к изучение возможностей и
достижения
учреждений,
различных
учреждений
начального
обучающихся
профильных
поставленных
образовательных
профессионального,
среднего
целей.
Общеобразовательных
учреждений,
образовательных
профессионального
и
высшего
профессионального образования и проектирование на основе полученных результатов
индивидуальных маршрутов их обучения, воспитания и развития;
Уметь:
способностью формировать ресурсно-информационные базы для решения
профессиональных задач; способностью применять современные методики и технологии
организации и реализации образовательного процесса на различных образовательных ступенях
в различных образовательных учреждениях; способностью формировать образовательную
среду и использовать свои способности в реализации задач инновационной образовательной
5
политики; способностью руководить исследовательской работой обучающихся; готовностью к
осуществлению педагогического проектирования образовательной среды, образовательных
программ и индивидуальных образовательных маршрутов;
Владеть: готовностью проектировать новое учебное содержание, технологии и
конкретные методики обучения; готовностью разрабатывать стратегии просветительской
деятельности;
очная
3 курс, 5 семестр
72
Лекций
Практич.
занятий
Лабораторн
занятий
Семестр,
курс изучения
Таблица 1
Распределение трудоемкости (в часах) дисциплины
Часы аудиторных
Часы
Формы
занятий:
Форма
самрубежно
Из них:
ой текущего
го и
контроля
работ
промежу
ы
точного
контрол
я
32
10
22
40
зачет
Всего
Форма
обучения
Объем часов
Распределение часов и учебно-тематический план дисциплины.
В соответствии с требованиями ФГОС ВПО в результате освоения дисциплин
обучающийся должен овладеть комплексом компетенций. Выполнение этого требования
проверяется при аттестации образовательной программы, в том числе путём контроля
остаточных знаний обучающихся.
Список рекомендуемой литературы (основной, дополнительной)
Основная литература:
1. 32.97, 6Ф7.3, Г-13, 2008, 100% самоучитель по созданию Web-страниц и Web-сайтов.
HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский.
2. 32.988, 6Ф7.3, К-63, 2006, HTML: учебный курс / Н.В. Комолова.
3. 32.988, 6Ф7.3, К-43, 2006,Самоучитель HTML / А. Кириленко.
4. 76.0, 002, Т-38, 2006, Техника и технология СМИ: печать, радио, телевидение,
интернет: уч-к / Тулупов В.В. и др.
5. 32.973, 6Ф7, Ф-91, 2000,Базы данных в интернете: практ. пособие по созданию Webприложений с базами данных.
6
6. 32.81, 6Ф7.32, Г-87, 2004,От гиперкниги к гипермозгу: информационные технологии
эпохи интернета. Эссе, жиалоги, очерки + CD-ROM приложение.
7. 32.973, 6Ф7.3, М-75, 2004,Компьтерная графика для Интернета. Самоучитель.
Дополнительная
1. Вайнман Л., Вайнман В. Креативный Web-дизайн на HTML 4 (+ CD- ROM). - М.:
ДиаСофт, 2003.
2. Гончаров А. Web-дизайн. - М.: КУДИЦ-Пресс, 2007.
3. Гультяев А. К, Машин В. А. Уроки Web-мастера. Технология. Дизайн.
Инструменты. - СПб.: Крона принт, 2001.
4. Леоньтьев Б. Web-дизайн. Тонкости, хитрости и секреты (+ CD- ROM). - М.:
СОЛОН-пресс. - 2003.
5. Нильсен Я. Веб-дизайн: книга Якоба Нильсена. - Пер. с англ. - СПб.: СимволПлюс, 2001.
6. Ноблес Р., Греди К-Л. Эффективный Web-сайт. Учебное пособие. - М.: ТРИУМФ,
2004.Орлов Л. В. Как создать и «раскрутить» web-сайт в Интернет. - М.: Альянспресс, 2003. - (Серия книг «Профи»).
7. Режепп А., Степанов Ю., Павлова О. Типичные ошибки при создании
корпоративных сайтов // Мир Internet. - 2001. - № 2.
8. Сейш, Тамми, Мак-Лейн, Гари. Дизайн и архитектура современного Web-сайта.
Опыт профессионалов: Пер. с англ. - М.: Издательский дом «Вильяме», 2002.
9. СергеевА.О. HTML 4.0. СПб.: БХВ, 1999.
10. Токарев С. В. Самоучитель Macromedia Dreamweaver MX. - СПБ.: БХВ-Петербург,
2003.
11. Хатсон Ш. Photoshop для Web-дизайна. - КУДИЦ-Образ, 2006.
12. Холцыилаг М 250 советов HTML и WEB-дизайна. - М.: НТ Пресс, 2006.
13. Шапошников И. Web-сайт своими руками. - СПб.: БХВ-Петербург, 2000.
14. Шапошников И. В. Самоучитель HTML 4. - СПб.: БХВ-Петербург, 2003.
Периодические издания
1. Информационные технологии. Ежемесячный теоретический и прикладной
научно-технический журнал(с приложением). ISSN 1684-6400 Подписной
индекс 72656.
7
1.
Интернет-ресурсы
Интернет Университет Информационных Технологий – http://www.intuit.ru/
2.
Книги по информационным технологиям – http://www.books.everonit.ru/
3.
Федеральный портал «Российское образование» - http://www.edu.ru/
4.
Интегральный каталог ресурсов Федерального портала «Российское образование»
- http://soip-catalog.informika.ru/
5.
Федеральный фонд учебных курсов - http://www.ido.edu.ru/ffec/econ-index.html
8
Министерство образования и науки Российской Федерации
ФГБОУ ВПО «Армавирская государственная педагогическая академия»
Факультет технологии, экономики и дизайна
Кафедра информатики и информационных технологий обучения
РАБОЧАЯ ПРОГРАММА ДИСЦИПЛИНЫ
Б2.ДВ1 «Технологии создания WEB-сайтов»
Направление подготовки 080100.62 «Экономика»
Профиль подготовки «Экономика предприятий и организаций»
Степень выпускника: бакалавр экономики
Форма обучения очная
Армавир – 2012 г.
9
Лист согласования
Составитель (и): _______________________________________
(фамилия, имя отчество, должность,
ученая степень, ученое звание)
Рабочая программа дисциплины (модуля) утверждена
на заседании кафедры ________________________________________
(наименование обеспечивающей кафедры)
«____»_________________ 20___ г. протокол № ____
Заведующий кафедрой
________________/ ________________________
(подпись)
Ф.И.О.
-----------------------------------------------------------------------------------------Рабочая программа дисциплины (модуля) утверждена
на заседании Учебно-методической комиссии ____________________
(наименование учебного подразделения)
«____»_________________ 20___ г. протокол № ____
Председатель УМК
_______________/ __________________
(подпись)
.О.
------------------------------------------------------------------------------------------
10
Цели освоения дисциплины
Целью преподавания дисциплины «Технологии создания WEB-сайтов» состоит в
ознакомлении студентов с основными понятиями создания Интернет страниц различной
сложности а также развитие как творческого, так и логического мышления у студентов и
приобретение знаний и навыков при разработке современных web-сайтов, а так же
мультимедийных продуктов web-среды. В процессе обучения студенты рассматривают
функциональные
возможности
ряда
профессиональных
программных
продуктов
для
разработки web-сайтов, а также различные графические и мультимедийные стандарты. Вместе
с тем рассматриваются основы процесса организации online-обучения и технологии построения
web-сайтов.
Задачи:
В результате изучения дисциплины «Технологии создания WEB-сайтов» студенты
должны знать:
- основные понятия HTML - кода;
- существующие способы построения Интернет страниц;
- основных средства создания и редактирования Интернет страниц с помощью средств
операционной системы или специализированных программ.
Изучив данный курс, студенты должны уметь:
- создавать и редактировать Интернет страницы;
- работать с HTML - кодом в программе Macromedia Dreamweave, используя стандартные
объекты, рисование, редактирование уже созданных Интернет страниц;
- создавать стили (CSS);
- работать со скриптами (JavaScript);
- создавать flash - анимацию
- выполнять творческую работу в виде верстки Интернет страниц, создания Интернет
сайта, создания анимированных роликов на flash, создание flash - презентаций и т.д.
Место дисциплины в структуре ООП ВПО
Место дисциплины в реализации основных задач ОПП.
Дисциплина
Б2.ДВ1
«Технологии
создания
WEB-сайтов»
относится
к
профессиональному циклу ООП и включена в вариативную часть.
11
Место дисциплины в реализации основных задач ОПП.
При изучении дисциплины «Технологии создания WEB-сайтов» обучающийся студент
приобретает необходимые знания при работе с языками программирования для создания
Интернет страниц, о возможностях использования Web - дизайна для проектирования и
создания Интернет сайтов.
Таблица 1. Распределение трудоемкости (в часах) дисциплины
Форма
обучения
очная
Семестр
5
Трудоемкость
зач.ед.
час
2
72
Лекции,
час
10
Практич., Лаб.раб.,
час
час
–
22
СРС,
час
40
Форма
аттестации
Зачет
Таблица 2. Распределение трудоемкости (в часах) дисциплины
Дидактический минимум содержания дисциплины
Основы языка HTML. Роль Web-браузеров и
Web-страниц.
Основные элементы HTML версии 4. Заголовок
страницы. Стандартные атрибуты. Атрибуты
событий. Вставка комментариев в Webдокументы.
Таблицы стилей. Классы. Универсальные
классы: атрибут id.
HTML-редакторы с графическим
пользовательским интерфейсом (GUI).
CMS (системы управления контентом и
структурой сайта). Установка и
администрирование.
Содержательно-логические
связи
Коды учебных дисциплин,
практик
для которой
на которые
содержание
опирается
учебной
содержание
дисциплины
учебной
выступает
дисциплины
опорой
–
НИР.М.2
–
НИР.М.2
–
НИР.М.2
–
НИР.М.2
–
НИР.М.1
Требования к результатам освоения содержания дисциплины
В результате изучения дисциплины «Технологии создания WEB-сайтов» магистр должен
уметь решать задачи, соответствующие его квалификации, указанной в ФГОС направления
подготовки 050100 Педагогическое образование в соответствии с требованиями к результатам
освоения основной образовательной программы.
.
12
Студент должен:
Знать:
Наличие знаний по Web - дизайну позволяет выпускникам академии специальности
080100 «Экономика» сравнительно легко адаптироваться к изучение возможностей и
потребностей
достижения
учреждений,
различных
учреждений
начального
обучающихся
профильных
поставленных
образовательных
профессионального,
среднего
целей.
Общеобразовательных
учреждений,
образовательных
профессионального
и
высшего
профессионального образования и проектирование на основе полученных результатов
индивидуальных маршрутов их обучения, воспитания и развития;
Уметь:
способностью формировать ресурсно-информационные базы для решения
профессиональных задач; способностью применять современные методики и технологии
организации и реализации образовательного процесса на различных образовательных ступенях
в различных образовательных учреждениях; способностью формировать образовательную
среду и использовать свои способности в реализации задач инновационной образовательной
политики; способностью руководить исследовательской работой обучающихся; готовностью к
осуществлению педагогического проектирования образовательной среды, образовательных
программ и индивидуальных образовательных маршрутов;
Владеть: готовностью проектировать новое учебное содержание, технологии и
конкретные методики обучения; готовностью разрабатывать стратегии просветительской
деятельности;
Структура и содержание дисциплины «Технологии создания WEB-сайтов»
Таблица 3. Содержание дисциплины
№
раздела
Наименование раздела
1.
Основы языка
HTML. Роль Webбраузеров и Webстраниц.
2.
Основные элементы
HTML версии 4.
Содержание раздела
Форма
текущего
контроля
защита
лабораторны
х работ
Синтаксис HTML 4. Версии HTML.
Анатомия Web-страницы.
Правила
синтаксиса.
Кодирование
символов. Использование спецсимволов.
Типы данных. Управление цветом.
Основные элементы HTML версии 4.
Заголовок
страницы.
Стандартные
атрибуты. Атрибуты событий. Вставка
комментариев в Web-документы
защита
Форматирование текста. Работа со
шрифтами. Назначение одного и того же лабораторны
х работ
13
Заголовок страницы.
Стандартные
атрибуты. Атрибуты
событий. Вставка
комментариев в Webдокументы.
3.
Таблицы стилей.
Классы.
Универсальные
классы: атрибут id.
4.
HTML-редакторы с
графическим
пользовательским
интерфейсом (GUI).
CMS (системы
управления
контентом и
структурой сайта).
Установка и
администрирование.
Понятие домена.
5.
набора атрибутов множеству элементов
страницы. Гиперссылки
Создание Web-страниц с помощью
текстовых
редакторов,
текстовых
процессоров и программ компоновки
Web-страниц Таблицы стилей. Классы.
Универсальные классы: атрибут id
Свойства таблиц стилей
защита
Применение стилей к ссылкам. Изменение
параметров курсора с использованием лабораторны
х работ
стилей. Границы и рамки объектов.
Определение
сайта.Создание
и
использование шаблонов. Динамические
элементы в HTML. Основы JavaScript.
защита
Формы. Списки. Таблицы. Фреймы.
лабораторны
Устаревшие и нестандартные элементы.
х работ
Дескриптор <IMG> и его свойства
Элементы объектов. Элементы форм.
защита
Создание динамических элементов.
лабораторны
Размещение сайта на сервере и поддержка
х работ
сайта. Оценка и тестирование сайта.
Загрузка файлов на сервер. Работа с
Cookies. Чат . Система тестирования.
Работа
с
графикой.
Графическая
компонента
CSImageFile.
Проект
«Фотоальбом». Этапы создания проекта.
Примеры проектов. Обзор технологий
создания
динамических
страниц.
Установка программного обеспечения,
используемого в курсе.
Таблица 4. Тематический план по дисциплине
№
п/п
Раздел курса, темы занятий
Всего
часов
1.
Обзор основных технологий создания
WEB-сайтов. Лицензия GPL,
использование готовых шаблонов.
Краткий обзор движков для создания
сайтов. Joomla, WordPress, Drupal.
Основы языка HTML. Роль Webбраузеров и Web-страниц.
Синтаксис HTML 4. Версии HTML.
Анатомия Web-страницы.
Подключение к Интернету.
Настройка браузера.
Поиск информации в Internet.
Почтовые службы Internet
Создание HTML-документа.
Создание нескольких страниц.
Размещение графики на Web-
8
Всего
аудиторных часов
4
10
6
6
2
2
4
10
6
6
4
8
4
4
4
2.
3.
4.
5.
Из них
Лекц.
Лаб.
СРС
4
4
6
4
14
6.
7.
8.
9.
странице. Создание таблиц.
Создание гиперссылок в HTMLдокументе. Создание форм обратной
связи.
Подготовка и разработка сайта
«Расписание занятий» в HTML 4
Установка Денвера - локальный
сервер. Установка Joomla 1.5.
Установка шаблона и создание сайта
на Joomla 1.5.
Итого:
6
2
2
4
8
4
4
4
8
4
4
4
10
2
2
8
72
32
22
40
10
Образовательные технологии
Темы, входящие в содержание курса, транслируются в форме лекций. Во время лекции
укрупненные дидактические единицы передаются в экстраактивном информационном режиме
для достижения глобальных целей воспитания и развития.
На занятиях лабораторного цикла каждый студент получает индивидуальное задание,
направленное на формирование компетенций определенных данной рабочей программой. Во
время выполнения заданий в учебной аудитории студент может консультироваться с
преподавателем, определять наиболее эффективные методы решения поставленных задач. Если
какая-то часть задания остается не выполненной, студент может продолжить её выполнение во
время внеаудиторной самостоятельной работы.
Для оценивания результатов изучения дисциплины используется бально-рейтинговая
система.
15
6. Содержание форм, методов, средств организации образовательного процесса
6.1.Темы(содержание) лекционных занятий
ЛЕКЦИЯ 1
Обзор основных технологий создания WEB-сайтов.
Лицензия GPL, использование готовых шаблонов. Краткий
обзор движков для создания сайтов. Joomla, WordPress,
Drupal.
1.1. История возникновения и развития Веб
1.1.1. Понятие "Интернет"
В наше время нельзя представить человека, не использующего информационные технологии.
Но если в двадцатом веке передовыми технологиями считались радио, телевидение и
телефонная связь, то в двадцать первом веке на первый план выходит Интернет. Гигантские
объемы текстовой, аудио-видео информации, новостные ленты, блоги, социальные сети, игры и
многое, многое другое. В настоящее время подключиться к Интернету можно через спутники
связи, радиоканалы, кабельное телевидение, телефон, сотовую связь, специальные оптиковолоконные линии или электропровода. Всемирная сеть стала неотъемлемой частью жизни в
развитых и развивающихся странах.
В течение всего пяти лет Интернет достиг аудитории свыше 50-ти миллионов пользователей.
Другим средствам массовой информации потребовалось гораздо больше времени для
достижения такой популярности [1]: Радио – 38 лет, Телевидение – 13 лет.
Попробуем разобраться в этом многогранном понятии " Интернет ". Рассмотрим определения в
различных источниках:




Интернет (Internet, сокр. от Interconnected Networks – объединенные сети) [2] –
глобальная телекоммуникационная сеть информационных и вычислительных ресурсов.
Служит физической основой для Всемирной паутины. Часто упоминается как Всемирная
сеть, Глобальная сеть, либо просто Сеть.
Интернет (Internet от international net – международная сеть) [3] – всемирная
компьютерная сеть (информационная система связи, объединяющая множество
компьютеров во всем мире).
Интернет (Сеть Интернет, Internet) – глобальная информационная сеть, части которой
логически взаимосвязаны друг с другом посредством единого адресного пространства,
основанного на протоколе TCP/IP [4]. Интернет состоит из множества взаимосвязанных
компьютерных сетей и обеспечивает удаленный доступ к компьютерам, электронной
почте, доскам объявлений, базам данных и дискуссионным группам.
Интернет (Internet – inter + net – объединение сетей) [5] – всемирная компьютерная сеть,
объединяющая миллионы компьютеров в единую информационную систему.
16
Когда слово internet написано со строчной буквы, оно означает просто объединение
сетей (interconnected networks) посредством маршрутизации пакетов данных [6]. В этом
случае не имеется в виду глобальное информационное пространство Интернет (Internet).
В неанглоязычной или нетехнической среде эти понятия обычно не различают.
Словарь русского языка Российской академии наук под редакцией В. В. Лопатина
рекомендует [7] написание слова с прописной буквы: Интернет. Написание со строчной
буквы используется в сложных словах, таких как "интернет-портал" и "интернетмагазин".
Некоторые издания (Яндекс, РОЦИТ, "Коммерсантъ", "Наука и жизнь", "Студия
Артемия Лебедева" [8] и др.) считают, что собственное имя Всемирной сети уже стало
нарицательным и пишут "интернет" с маленькой буквы.
Слово " Интернет " склоняется по правилам русской грамматики как существительное
мужского рода, ничем не отличаясь от таких слов, как интернат и интерфейс. Поэтому
писать следует: "в Интернете ", "структура Интернета " [8, 9]. Однако в настоящее время
также распространено письменное употребление слова как несклоняемого:
"подключиться к Интернет ", "из Интернет ".
Далее в лекции слово " Интернет " будет употребляться с большой буквы.
В настоящее время, когда слово Интернет употребляется в обиходе, чаще всего имеется
в виду Всемирная паутина ( World Wide Web – концепция, предложенная Т.Бернерс-Ли
в 1990 [10]) и доступная в ней информация, а не сама физическая сеть.
По данным известной консалтинговой компании IDC [11] к середине 2008 года число
пользователей, регулярно использующих Интернет, составило около 1,5 млрд. человек
(около четверти населения Земли), а объем данных, хранящихся в Интернете, вплотную
приблизился к отметке в 500 экзабайтов (500 млрд. Гб) весной 2009 г. При этом по
прогнозам аналитиков, к 2011 году количество данных вырастет еще в 2 раза, а к 2016
году Интернет будет насчитывать более 2 миллиардов пользователей.
Некоторые юридические аспекты Интернета [2]:
o
o
o
o
o
o
o
o
У Интернета нет собственника, так как он является совокупностью сетей, которые
имеют различную географическую принадлежность.
Интернет нельзя выключить целиком, поскольку маршрутизаторы сетей не имеют
единого внешнего управления.
Интернет стал достоянием всего человечества.
В Интернете имеется много полезных и вредных свойств, эксплуатируемых
заинтересованными лицами.
Интернет, прежде всего, средство открытого хранения и распространения
информации. По маршруту транспортировки незашифрованная информация
может быть перехвачена и прочитана.
Интернет может связать каждый компьютер с любым другим, подключенным к
Сети, так же, как и телефонная сеть.
Сайты в Интернете распространяют информацию по такому же принципу, то есть
индивидуально, по инициативе читателя.
Спам-серверы и "зомби-сети" распространяют информацию по инициативе
отправителя и забивают почтовые ящики пользователей электронной почты
17
спамом точно так же, как забивают реальные почтовые ящики распространители
рекламных листовок и брошюр.
1.1.2. Хронология
Далее в хронологическом порядке опишем некоторые вехи в развитии Интернета [12,13, 14, 15,
16]:
1957 год. Запуск в СССР первого искусственного спутника Земли – начало технологической
гонки между СССР и США, приведшей, в итоге, к созданию глобальной сети Интернет.
1958 год. В США при Министерстве обороны создано Агентство Передовых
Исследовательских Проектов – Advanced Research Projects Agency (ARPA).
1961 год. Студент Массачусетского Технологического Института Леонард Клейнрок описывает
технологию, способную разбивать файлы на куски и передавать их различными путями через
сеть.
1963 год. Руководитель компьютерной лаборатории ARPA Джон Ликлидер предлагает первую,
детально разработанную концепцию компьютерной сети "Galactic Network".
1967 год. Ларри Робертс предлагает связать между собой компьютеры ARPA. Компьютерная
сеть была названа ARPANET (Advanced Research Projects Agency Network).
29.10.1969 года. В 21:00 между двумя первыми узлами сети ARPANET, находящимися на
расстоянии в 640 км. (в Калифорнийском университете Лос-Анджелеса (UCLA) и в
Стэнфордском исследовательском институте (SRI)) провели сеанс связи. Чарли Клайн пытался
выполнить удаленное подключение к компьютеру в SRI. Успешную передачу каждого
введенного символа его коллега Билл Дювалль из SRI подтверждал по телефону. В первый раз
удалось отправить всего три символа "LOG", после чего сеть перестала функционировать. LOG
должно было быть словом LOGON (команда входа в систему). В рабочее состояние систему
вернули уже к 22:30 и следующая попытка оказалась успешной. Именно эту дату можно
считать днем рождения Интернета.
1971 год. Рэй Томлисон, программист из "Bolt Beranek and Newman", разрабатывает систему
электронной почты и предлагает использовать значок @.
1973 год. Через трансатлантический телефонный кабель к сети были подключены первые
иностранные организации из Великобритании и Норвегии.
1974 год. Открыта первая коммерческая версия ARPANET – сеть Telenet.
1975 год. Джоном Витталом, программистом из университета южной Калифорнии, разработана
первая современная почтовая программа, имеющая функциональность "Ответить" и
"Переслать".
1976 год. Роберт Меткалф, сотрудник исследовательской лаборатории компании Xerox, создает
Ethernet – первую локальную компьютерную сеть.
1977 год. Число хостов достигло ста. Деннис Хейс и Дейл Хезерингтон разработали первый
компьютерный модем.
18
1978 год. Разработана первая доска объявлений (BBS). 1978 год также является годом, который
принес первое нежелательное коммерческое сообщение по электронной почте, которое было
разослано 600-ам пользователям калифорнийского Arpanet Гарри Зарком.
1979 год. Разработана первая многопользовательская игра MUD (сокращенно от
"многопользовательский лабиринт").
1980 год. Европейская организация по ядерным исследованиям CERN запустила ENQUIRE
(написанную Тимом Бернерсом-Ли) – первую гипертекстовую программу.
1982 год. Рождение современного Интернета – ARPA создала единый сетевой язык TCP/IP.
Активную роль в разработке и стандартизации сетевых протоколов играл Джон Постел.
1983 год. 1 января 1983 года сеть ARPANET перешла с протокола NCP на TCP/IP, что
позволило разделить эту сеть на MILNET, собственно сеть для военных нужд, и ARPANET,
использовавшуюся в исследовательских целях.
1984 год. Число хостов превысило тысячу. Разработана система доменных имен ( Domain Name
System, DNS ). DNS позволила создать масштабируемый распределенный механизм для
отображения иерархических имен компьютеров в Интернет -адресах. В этом же году в
университете Висконсии был создан сервер доменных имен (Domain Name Server, DNS ).
Также в 1984 году у сети ARPANET появился серьезный соперник: Национальный научный
фонд США (NSF) основал обширную межуниверситетскую сеть NSFNet (National Science
Foundation Network), которая была составлена из более мелких сетей (включая известные тогда
сети Usenet и Bitnet) и имела гораздо большую пропускную способность, чем ARPANET. К
этой сети за год подключились около 10 тыс. компьютеров.
1985 год. Стюарт Брэнд и Ларри Бриллиант разработали WELL (Whole Earth Lectronic Link),
одно из старейших виртуальных сообществ.
1988 год. Разработан протокол Internet Relay Chat (IRC), благодаря чему в Интернете стало
возможно общение в реальном времени (чат). Запущен один из первых крупных Интернет
червей "Червь Морриса", написанный Робертом Моррисом Таппан и вызвавший серьезные
перебои в больших частях Интернета.
1989 год. Число хостов превысило 10 тысяч. В CERN родилась концепция Всемирной паутины,
предложенная британским ученым Тимом Бернерсом-Ли. Он же в течение двух лет разработал
протокол HTTP, язык HTML и идентификаторы URI.
1990 год. В 1990 году сеть ARPANET прекратила свое существование, полностью проиграв
конкуренцию NSFNet. В том же году было зафиксировано первое подключение к Интернету по
телефонной линии (Dialup access).
1991 год. CERN создала протокол World Wide Web (WWW). Компанией NCR
Corporation/AT&T создан Wi-Fi.
1993 год. Число Интернет -хостов превысило 2 млн., в Сети действует 600 сайтов. Марком
Андреесеном в Университете штата Иллинойс создан первый общедоступный графический
Интернет -браузер Mosaic.
19
1994 год. Образовался консорциум W3C (W3 Consortium), который объединил ученых из
разных университетов и компаний (в том числе Netscape и Microsoft). С этого времени комитет
стал заниматься всеми стандартами в мире Интернета.
1995 год. NSFNet вернулась к роли исследовательской сети, маршрутизацией всего трафика
Интернета теперь занимались сетевые провайдеры, а не суперкомпьютеры Национального
научного фонда. Java и JavaScript (первоначально назван LiveScript его создателем, Бренданом
Айхом, и включен в состав браузера Netscape Navigator) были впервые представлены публике.
Консорциум W3C разработал спецификацию HTML 2.0. В данной версии появилась
возможность передачи информации с компьютера пользователя на сервер с помощью форм.
1996 год. В мире существует 12.8 млн. хостов и 500 тыс. сайтов. Началось соревнование между
браузерами Netscape, созданным под руководством Марка Андреесона, и Internet Explorer,
разработанным компанией Microsoft. Была запущена первая веб-служба электронной почты –
HoTMaiL.
1997 год. Начал использоваться термин "блог". В январе 1997 г. W3C создал и принял HTML
3.2. Впервые была введена система CSS (Cascading Style Sheets). CSS позволяет осуществить
форматирование текста без нарушения логической и структурной разметки. А уже в декабре
1997 г. W3C принимает стандарт HTML 4.0, в котором идет разделение на логические и
визуальные теги.
1998 год. Основана компания Google.
1999 год. Впервые предпринята попытка цензуры Интернета. В ряде стран государственными
органами предприняты серьезные усилия, чтобы технически блокировать доступ пользователей
к определенным серверам и сайтам.
2001 год. Запущена Wikipedia, по объему сведений и тематическому охвату считающаяся
сейчас самой полной энциклопедией из когда-либо создававшихся за всю историю
человечества.
2002 год. Сеть Интернет связывает 689 млн. человек и 172 млн. хостов.
2003 год. Создан Skype, предоставляющий возможность голосовой связи между компьютерами
(VoIP) через Интернет.
2004 год. Открыт Facebook, по состоянию на 2010 год, насчитывающий свыше 400 миллионов
активных участников.
2005 год. Запущен YouTube.
2006 год. Запущен Twitter.
2007 год. Появился iPhone, который почти полностью отвечает за повышенный интерес к
мобильным веб-приложениям.
2008 год. Число пользователей, регулярно использующих Интернет, составило около 1,5 млрд.
человек (около четверти населения Земли).
2010 год. Прямой доступ в Интернет получил экипаж Международной космической станции.
20
1.1.3. Принципы работы
Различают логическую и физическую модели Интернета. Под логической, прежде всего,
понимают Всемирную паутину ( World Wide Web ), а под физической – компьютеры, серверы и
средства передачи данных между ними.
1.1.3.1. Физическая модель
Чтобы различные компьютеры сети могли взаимодействовать, они должны использовать один и
тот же протокол. Систему протоколов Интернет называют "стеком протоколов TCP/IP ".
Стек TCP/IP объясняется следующими его свойствами [17]:






Это наиболее завершенный стандартный и в то же время популярный стек сетевых
протоколов, имеющий многолетнюю историю.
Почти все большие сети передают основную часть своего трафика с помощью протокола
TCP/IP.
Это метод получения доступа к сети Интернет.
Этот стек служит основой для создания intranet-корпоративной сети, использующей
транспортные услуги Интернет и гипертекстовую технологию WWW.
Все современные операционные системы поддерживают стек TCP/IP.
Это устойчивая масштабируемая межплатформенная среда для клиент-серверных
приложений.
Так как стек TCP/IP был разработан до появления модели взаимодействия открытых систем
ISO/OSI, то соответствие уровней стека TCP/IP уровням модели OSI достаточно условно.
В табл. 1.1 показано, как протоколы TCP/IP можно вписать в модель OSI [18]:
Таблица 1.1. Протоколы TCP/IP в модели OSI
7
Прикладной
HTTP, SMTP, SNMP, FTP, Telnet, scp, SMB,NFS, RTSP, BGP
6 Представительский XDR, ASN.1, AFP
TLS, SSL, ISO 8327 / CCITT X.225, RPC, NetBIOS, ASP
5 Сеансовый
TCP, UDP, RTP, SCTP, SPX, ATP, DCCP, GRE
4 Транспортный
IP, ICMP, IGMP, CLNP, OSPF, RIP, IPX, DDP
3 Сетевой
Ethernet, Token ring, PPP, HDLC, X.25, Frame relay, ISDN, ATM, MPLS,
2 Канальный
Wi-Fi, ARP, RARP
электрические провода, радиосвязь, оптоволоконные провода
1 Физический
На рис. 1.1 показано как 4 уровня протокола TCP/IP можно сравнить с уровнями модели OSI
[17, 19].
21
Рис. 1.1. Сравнение модели OSI и стека TCP/IP
Самый нижний (уровень IV, можно условно его назвать "Физический") соответствует
физическому и канальному уровням модели OSI. Этот уровень в протоколах TCP/IP не
регламентируется, но поддерживает все популярные стандарты физического и канального
уровня.
Следующий уровень (уровень III, можно условно его назвать "Сетевой") – это уровень
межсетевого взаимодействия, который занимается передачей пакетов с использованием
различных транспортных технологий локальных сетей, территориальных сетей, линий
специальной связи и т. п.
Следующий уровень (уровень II, можно условно его назвать "Транспортный") называется
основным. На этом уровне функционируют протокол управления передачей TCP (Transmission
Control Protocol) и протокол дейтаграмм пользователя UDP (User Datagram Protocol). Протокол
TCP обеспечивает надежную передачу сообщений между удаленными прикладными
процессами за счет образования виртуальных соединений. Протокол UDP обеспечивает
передачу прикладных пакетов дейтаграммным способом, как и IP, и выполняет только функции
связующего звена между сетевым протоколом и многочисленными прикладными процессами.
Верхний уровень (уровень I, можно условно его назвать "Прикладной"). К нему относятся такие
широко используемые протоколы, как протокол копирования файлов FTP (File Transfer
Protocol), протокол эмуляции терминала telnet, почтовый протокол SMTP (Simple Mail Transfer
Protocol), используемый в электронной почте сети Интернет, гипертекстовые сервисы доступа к
удаленной информации, такие как WWW и многие другие.
Есть еще целый ряд протоколов, еще не стандартизированных, но уже очень популярных в
Интернете:




OSCAR;
CDDB;
MFTP (сеть eDonkey2000);
BitTorrent;
22


Gnutella;
Skype.
Эти протоколы в большинстве своем нужны для обмена файлами и текстовыми сообщениями,
на некоторых из них построены целые файлообменные сети.
Каждый компьютер в сети TCP/IP имеет адреса трех уровней:



Локальный адрес узла, определяемый технологией, с помощью которой построена
отдельная сеть, в которую входит данный узел. Для узлов, входящих в локальные сети –
это МАС-адрес сетевого адаптера или порта маршрутизатора, например, 11-А0-17-3DBC-01.
IP-адрес, состоящий из 4 байт, например, 109.26.17.100. Этот адрес используется на
сетевом уровне. Он назначается администратором во время конфигурирования
компьютеров и маршрутизаторов или автоматически с помощью протокола DHCP
(Dynamic Host Configuration Protocol).
Символьный идентификатор-имя, например, EXAMPLE.COM. Этот адрес назначается
администратором и состоит из нескольких частей, например, имени машины, имени
организации, имени домена. Такой адрес, называемый также DNS -именем, используется
на прикладном уровне, например, в протоколах FTP или telnet.
1.1.3.2. Логическая модель
Всемирная паутина ( World Wide Web, Веб) [20] – распределенная система, предоставляющая
доступ к связанным между собой документам, расположенным на различных компьютерах,
подключенных к Интернету.
Всемирная паутина основывается на архитектуре клиент-сервер [21]. И на сервере, и на клиенте
должно быть установлено дополнительное программное обеспечение – Веб-сервер и Вебобозреватель соответственно. Это программное обеспечение поддерживает стандартный
протокол передачи гипертекстов ( HTTP ), а также ряд других протоколов, в частности,
протокол передачи файлов ( FTP ). Архитектура клиент-сервер означает, что взаимодействие
пользовательского компьютера с Интернетом происходит следующим образом:




пользователь вводит адрес ( URI или URL ) Веб-документа, который он хочет
просмотреть;
Веб-обозреватель формирует соответствующий HTTP -запрос к Веб-серверу;
Веб-сервер находит в Сети запрошенный документ и передает его обозревателю в
качестве отклика на запрос (в конечном счете, Веб-сервер находит соответствующий
файл на локальном жестком диске и отправляет его по сети запросившему компьютеру);
обозреватель интерпретирует полученный документ и отображает его пользователю
(отображает гипертекст).
Для идентификации ресурсов (зачастую файлов или их частей) во Всемирной паутине
используются единообразные идентификаторы ресурсов URI (англ. Uniform Resource Identifier).
Для определения местонахождения ресурсов в сети используются единообразные локаторы
ресурсов URL (англ. Uniform Resource Locator). Такие URL -локаторы сочетают в себе
технологию идентификации URI и систему доменных имен DNS (англ. Domain Name System ) –
доменное имя (или непосредственно IP-адрес в числовой записи) входит в состав URL для
обозначения компьютера (точнее – одного из его сетевых интерфейсов), который исполняет код
нужного веб-сервера.
23
Всемирная паутина неразрывно связана с понятиями гипертекста и гиперссылки. Большая часть
информации в Веб представляет собой именно гипертекст. Для облегчения создания, хранения
и отображения гипертекста во Всемирной паутине традиционно используется язык HTML
(HyperText Markup Language), язык разметки гипертекста. После HTML -разметки
получившийся гипертекст помещается в файл. После того, как HTML -файл становится
доступен веб-серверу, его начинают называть "веб-страницей". Набор веб-страниц образует
веб-сайт. В гипертекст веб-страниц добавляются гиперссылки. Гиперссылки помогают
пользователям Всемирной паутины легко перемещаться между ресурсами (файлами) вне
зависимости от того, находятся ресурсы на локальном компьютере или на удаленном сервере.
Гиперссылки в Веб основаны на технологии URL.
В целом можно заключить, что Всемирная паутина стоит на "трех китах" [22, 23]:



язык гипертекстовой разметки документов HTML (HyperText Markup Language);
универсальный способ адресации ресурсов в сети URL (Universal Resource Locator);
протокол обмена гипертекстовой информацией HTTP (HyperText Transfer Protocol).
В последнее время HTML начал несколько сдавать свои позиции и уступать их более
современным технологиям разметки: XHTML и XML [20]. XML (eXtensible Markup Language)
позиционируется как фундамент для других языков разметки. Для улучшения визуального
восприятия Веба стала широко применяться технология CSS, которая позволяет задавать
единые стили оформления для множества веб-страниц.
Популярная концепция развития сети Интернет – создание семантической паутины.
Семантическая паутина – это надстройка над существующей Сетью, которая призвана сделать
размещенную в ней информацию более понятной для компьютеров. О семантической паутине
подробнее будет рассказано в 23 лекции.
1.1.4. Ключевые термины
Интернет, Всемирная паутина, TCP/IP, FTP, SMTP, UDP, МАС-адрес, IP-адрес, DHCP, DNS,
HTML, URI, URL, HTTP, Семантическая паутина, XML.
1.2. Эволюция концепции Веб
1.2.1. Веб 1.0
Самой простой формулировкой концепции Веб 1.0 ( Web 1.0 ) скорее всего, следует считать
"тот Веб, который был до Веб 2.0 " [24].
Переход от Веб 1.0 к Веб 2.0 является прямым результатом изменений в поведении тех, кто
использует Всемирную Паутину. Основные тенденции Веб 1.0 включали заботы о проблемах
безопасности и приватности в одностороннем потоке информации, через веб-сайты,
содержащие материал "только для чтения". Характерным для Веб 1.0 также являлись
компьютерная неграмотность широких масс и распространенность медленных типов
подключения к Интернету, вдобавок к ограничениям самого Интернета [25].
Типичные принципы Веб 1.0 [24, 26]:


статичные страницы вместо генерируемого пользователями динамического контента;
бедная гипертекстовая разметка;
24





использование фреймов;
использование специфичных тегов HTML ;
гостевые книги, форумы или чаты;
указание конкретного разрешения монитора, при котором дизайн сайта отображается
корректно;
крайне редкое и непопулярное использование стилей CSS при оформлении страниц
сайта.
Эти принципы описывают лишь общую тенденцию в Веб 1.0. Пожалуй, лучше всего
сформулировать список принципов Веб 1.0 можно на основании списка того, с чем боролись
последователи Веб 2.0.
1.2.2. Веб 2.0
Появление термина Веб 2.0 принято связывать со статьей "Tim O'Reilly – What Is Web 2.0 " от
30 сентября 2005 года [27]. В этой статье Тим О'Рейли увязал появление большого числа
сайтов, объединенных некоторыми общими принципами, с общей тенденцией развития
Интернет -сообщества, и назвал это явление Веб 2.0, в противовес устаревшему Веб 1.0.
Тим Бернерс-Ли, возглавляющий с 2006 года крупнейший мировой исследовательский проект
по изучению всемирной паутины, назвал термин Web 2.0 простым жаргоном:
"Никто не знает, что это означает. Если Веб 2.0 – это ваши блоги и вики, тогда это значит
"пользователи для пользователей". Но это тоже самое, что сказать – Web существует, чтобы все
люди были вместе."
Тим О'Рейли определил Веб 2.0, отталкиваясь от конкретных примеров (табл. 1.2) [27]:
Таблица 1.2. Сравнение Веб 1.0 и Веб 2.0
Веб 1.0
Веб 2.0
Doubleclick
Google AdSense
Ofoto
Flickr
Akamai
BitTorrent
mp3.com
Napster
Britannica Online
Wikipedia
Персональные сайты
Блоги
Evite
upcoming.org и EVDB
Спекуляция доменными именами
Поисковая оптимизация
Оплата рекламы по количеству показов Оплата рекламы по количеству переходов
Извлечение данных из HTML
Веб-сервисы
Публикация
Соавторство
Системы управления контентом (CMS) Wiki
Каталоги (таксономия)
Теги (фолксономия)
Удержание пользователей
Синдикация контента
На рис. 1.2 показана технологическая карта Веб 2.0, созданная во время мозгового штурма на
конференции FOO Camp.
25
увеличить изображение
Рис. 1.2. Технологическая карта Веб 2.0
Источник: Что такое Веб 2.0 [27]
Понятие Веб 2.0 также отразилось и в дизайне [28]. Предпочтительными стали округлость,
имитация выпуклых поверхностей, имитация отражений на манер глянцевого пластика
современных hi-end устройств (к примеру, плееры). В целом, восприятие внешнего вида на глаз
кажется более приятным. Графика таких сайтов занимает больший объем, нежели при
использовании аскетичного дизайна. Отчасти эта тенденция связана с совпавшим по времени
выходом новых версий операционных систем использующих вышеупомянутые идеи.
Фактически сайт эпохи Веб 2.0 на первый взгляд интерактивен и дружелюбен, позволяет себя
легко настраивать. Однако сбор статистики о пользователях, их предпочтениях и интересах,
личной жизни, карьере, круге друзей могут помочь владельцу сайта манипулировать
сообществом. По самым пессимистичным прогнозам многочисленные сайты Веб 2.0 вкупе с
другими современными технологиями дают прообраз тоталитарной системы "Большого брата".
26
1.2.3. Веб 3.0
Наиболее распространенной версией трактовки термина Веб 3.0 является идентификация его
как Семантической Паутины (Semantic Web) [29]. Главная мысль этой концепции базируется на
внедрении мета-языка, описывающего содержание сайтов для организации автоматического
обмена между серверами.
Семантическая паутина (Semantic Web) – часть глобальной концепции развития сети Интернет,
целью которой является реализация возможности машинной обработки информации, доступной
во Всемирной паутине [30]. Основной акцент концепции делается на работе с метаданными,
однозначно характеризующими свойства и содержание ресурсов Всемирной паутины, вместо
используемого в настоящее время текстового анализа документов. Термин впервые введен
Тимом Бернерсом-Ли в мае 2001 года в журнале "Scientific American" [31], и называется им
"следующим шагом в развитии Всемирной паутины". В семантической паутине предполагается
повсеместное использование, во-первых, универсальных идентификаторов ресурсов ( URI ), а
во-вторых – онтологий и языков описания метаданных.
Эта концепция была принята и продвигается Консорциумом W3C [32]. Для ее внедрения
предполагается создание сети документов, содержащих метаданные о ресурсах Всемирной
паутины и существующей параллельно с ними. Тогда как сами ресурсы предназначены для
восприятия человеком, метаданные используются машинами (поисковыми роботами и другими
интеллектуальными агентами) для проведения однозначных логических заключений о
свойствах этих ресурсов.
10 февраля 2004 г. на сайте W3C появляется описание языка "OWL" (язык описания
онтологий).
Через полгода новый язык описания онтологий OWL стал поддерживать редактор онтологий
Protege – разработка Стэнфордского Университета. В это же время Semantic Web начало
активно интересоваться международное научное сообщество. В разных изданиях появляется
множество статей по Semantic Web.
В 2005 г. на сайте W3 появляется описание RDF/A – синтаксиса, который уже сейчас позволяет
встраивать метаданные RDF в документы XHTML.
10 марта 2006 г. выходит RDF/A Primer. Таким образом, Semantic Web был "привязан" к
XHTML.
В 2006 г. также завершилась разработка языка запросов к RDF документам с SQL-подобным
синтаксисом, его окончательное название – SPARQL.
Некоторые авторы дают другую трактовку термину Веб 3.0. Так Джейсон Калаканис
определяет Веб 3.0 [33] как высококачественный контент и сервисы, которые создаются
талантливыми профессионалами на технологической платформе Веб 2.0.
По сути, Веб 3.0 использует технологическую базу Веб 2.0 [29, 30]:



AJAX – загрузка данных без перезагрузки самой веб-страницы;
RIA (Adobe Flex, JavaFX, Microsoft Silverlight );
XML (eXtensible Markup Language) – язык разметки данных, представляющий собой
свод общих синтаксических правил;
27



RSS (Really Simple Syndication) – семейство XML -форматов, предназначенных для
описания лент новостей, анонсов статей, изменений в блогах и т. п.;
Теги – отображение тегов в виде облака, что значительно упрощает определение
пользователем наиболее актуальной информации;
Блоговая структура информации – ленточная подача информации, где поток идет по
убыванию сверху-вниз, а метод сортировки задает пользователь.
Главная идея Веб 3.0, по мнению этих авторов, состоит в том, чтобы пользователь, который до
этого единолично был вовлечен в процесс формирования контента, отныне творит коллективно
и его партнерами, помимо других пользователей, являлись эксперты различных направлений,
причем статус пользователя может быть изменен на экспертный, равно, как и форма
сотрудничества создателя контента и портала. Эксперт должен выступить своеобразным
модератором публикуемого контента. По сути, не исключается и возможность платной основы
для сотрудничества, но гораздо более важным моментом является появление в порталах
формата Веб 3.0 "коллективного разума" (wisdom of the crowds), вместо господствующего
сегодня "группового сумасшествия" (madness of the mobs). Веб 3.0 предполагает появление
узкоспециализированных ресурсов, где будет произведена агрегация всех необходимых
пользователю сервисов и инструментов профессиональной социальной составляющей и будет
осуществляться публикация экспертно-модерируемого контента.
1.2.4. Выводы
Обобщив все вышесказанное, можно выделить общие признаки Веб-концепций [34, 35].
Веб 1.0 – Интернет как информационный портал





эксклюзивность информации, необходимо быть первым собственником контента;
разделение World Wide Web на пригодные для использования каталоги;
каждый человек имеет свой собственный личный уголок в киберпространстве;
недостатки:
o Контекст;
o Взаимодействие;
o Масштабируемость;
Примеры сайтов:
o Ofoto;
o Hotmail;
o Dmoz;
o GeoCities.
Веб 2.0 – Сеть как платформа





фокус на сообществах для создания и проверки контента;
свободная форма организации и классификации контента посредством тэгов;
создание "интерфейсов" для будущей интеграции (RSS, API);
недостатки:
o Персонализация;
o Мобильность и портативность;
o Совместимость;
Примеры сайтов:
o YouTube;
o Flickr;
28
o
Facebook.
Веб 3.0 – Интернет как экспертная система





извлечение проверенной информации;
мобильность и портативность;
повсеместное использование RSS и API;
"дайте мне то, что, как вы думаете, я хочу на основе того, где я был и что делал";
Примеры сайтов:
o Google : универсальный поиск + история пользовательского поиска;
o FOAF (friend of a friend) : моя жизнь в RDF;
o Wink : социальная поисковая система;
o Twitter : "король" микроблогов;
o Surface : технология multi-touch для сенсорных экранов;
o OpenID : единая авторизация в Интернете.
Различия концепций также можно представить следующей таблицей (табл. 1.3 [35]:
Таблица 1.3. Сравнение концепций Веб 1.0, Веб 2.0, Веб 3.0
Концепция
Свойство
Концепция
Количество
пользователей
Ориентация
Структура
данных
Концепция
данных
Управление
знаниями
Технологии
Web 1.0
Web 2.0
Web 3.0
Веб только для
чтения ("the mostly
read only web")
45 миллионов
глобальных
пользователей
(1996)
Ориентация на
компании (focused
on companies)
Домашние
страницы (home
pages)
Владение
контентом (owning
content)
Веб для бурного
чтения-записи ("the
wildly read-write web")
Больше 1 миллиарда
глобальных
пользователей (2006)
Портативный
индивидуальный Веб ("the
portable personal web")
Еще больше
Ориентация на
сообщества (focused on
communities)
Блоги (blogs)
Ориентация на
индивидуальностях
(focused on the individual)
Lifestreaming-функции
(lifestream)
Обмен контентом
(sharing content)
Britannica Online
Wikipedia
Объединение
динамического контента
(consolidating dynamic
content)
Интернет
HTML, порталы
XML, RSS
Представление Веб формы
Веб приложения
Классификация Директории
(иерархическое
строение)
(directories
Тэги (практика
совместной
категоризации
информации (ссылок,
Технологии "drag and drop"
и mashups
Виджеты (widgets) и
гаджеты (gadgets)
Поведение пользователей
(большая
сосредоточенность на
предпочтениях отдельных
29
фото, видео клипов и т.
п.)) (tagging
("folksonomy"))
Netscape
Google
Просмотр страниц Цена за клик (cost per
(pages views)
click)
реклама
"из уст в уста" (word of
(advertising)
mouth)
(taxonomy))
Поиск
Стоимость
рекламы
Продвижение
лиц) (user behavior ("meonomy"))
iGoogle, NetVibes
Активность пользователей
(user engagement)
advertainment
Технологическая карта развития технологий Веб представлена на рис. 1.3.
увеличить изображение
Рис. 1.3. Технологическая карта концепций Веб. Источник: Dal Web3.0 al Web4.0 [36]
1.2.4. Ключевые термины
Веб 1.0, Веб 2.0, Веб 3.0, Семантическая паутина.
1.3. Основные технологии в Интернете
1.3.1. Веб-программирование
Веб-программирование (Веб-разработка) – это бурно развивающийся раздел
программирования, ориентированный на разработку динамических Интернет -приложений [37].
Языки веб-программирования делятся на две группы: клиентские и серверные.
30
Клиентские языки обрабатываются на стороне пользователя (в основном в браузере).
Соответственно обработка скрипта зависит от браузера пользователя, и пользователь имеет
полномочия настроить свой браузер так, чтобы тот вообще игнорировал скрипты. При этом
если браузер старый, он может не поддерживать тот или иной язык или версию языка, на
которую опирался разработчик. С современными браузерами таких проблем возникать не
должно, к тому же языки программирования не так уж часто кардинально обновляются (раз в
несколько лет) и лучшие из них давно известны. Код клиентского скрипта может посмотреть
каждый, выбрав в меню своего браузера "Исходный код страницы".
Преимущество клиентского языка заключается в том, что обработка скриптов на таком языке
может выполняться без отправки документа на сервер. Программа сразу проверит правильное
заполнение формы перед отправкой, и, если необходимо, выведет ошибку. Отсюда же вытекает
и то ограничение, что с помощью клиентского языка программирования ничто не может быть
записано на сервер.
Самым распространенным из клиентских языков является JavaScript, разработчиками которого
является компания Netscape совместно с компанией Sun Microsystems. Еще один популярный
язык – это VBScript. Помимо этого в последнее время набрали популярность такие технологии
как AJAX, Adobe Flash, Microsoft Silverlight и др.
Серверные языки программирования открывают перед программистом большие просторы в
деятельности.
Когда пользователь делает запрос на какую-либо страницу (переходит на нее по ссылке, или
вводит адрес в адресной строке своего браузера), то вызванная страница сначала
обрабатывается на сервере (то есть выполняются все программы, связанные со страницей) и
только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь
расширения: HTML, PHP, ASP, Perl, SSI, XML, DHTML, XHTML.
Работа программ уже полностью зависима от сервера, на котором расположен сайт, и от того,
какая версия того или иного языка поддерживается.
Важной стороной работы серверных языков является Система управления базами данных
(СУБД). Это, по сути, тоже сервер, на котором в определенном пользователем порядке
хранится разная необходимая информация, которая может быть вызвана в любой момент.
Популярными среди систем управления базами данных являются:






IBM DB2;
Microsoft SQL Server;
MySQL;
Oracle;
PostgreSQL;
SQLite.
Хронология развития веб-технологий показана на рис. 1.4.
31
увеличить изображение
Рис. 1.4. Хронология развития веб-технологий
Источник: Wikipedia [37]
Рассмотрим подробнее наиболее известные языки и технологии.
1.3.2. HTML
HTML (HyperText Markup Language – "язык разметки гипертекста") – стандартный язык
разметки документов во Всемирной паутине [38]. Большинство веб-страниц создаются при
помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде
документа, в удобной для человека форме. HTML является приложением SGML (стандартного
обобщенного языка разметки) и соответствует международному стандарту ISO 8879.
Язык HTML был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 19911992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (CERN). HTML
создавался как язык для обмена научной и технической документацией, пригодный для
использования людьми, не являющимися специалистами в области верстки. HTML успешно
справлялся с проблемой сложности SGML путем определения небольшого набора структурных
и семантических элементов – дескрипторов. Дескрипторы также часто называют "тегами". С
помощью HTML можно легко создать относительно простой, но красиво оформленный
32
документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.
Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и
создан как средство структурирования и форматирования документов без их привязки к
средствам воспроизведения (отображения).
Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют
расширение .html или .htm), обрабатываются специальными приложениями, которые
отображают документ в его форматированном виде. Такие приложения, называемые
"браузерами" или " Интернет -обозревателями", обычно предоставляют пользователю удобный
интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и,
при необходимости, отправки введенных пользователем данных на сервер.
Наиболее популярными на сегодняшний день браузерами являются (по данным на январь 2010
г.) [39]:





Internet Explorer – 62,12%;
Mozilla Firefox – 24,43%;
Google Chrome – 5,22%;
Safari – 4,53%;
Opera – 2,38%.
Спецификация HTML имеет несколько версий:





RFC 1866 – HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2 [36] – 14 января 1997 года;
HTML 4.0 [37] – 18 декабря 1997 года;
HTML 4.01 [38] – 24 декабря 1999 года;
ISO/IEC 15445:2000 [39] (так называемый ISO HTML, основан на HTML 4.01 Strict) – 15
мая 2000 года.
Подробнее данная технология будет освещена в лекции 2.
1.3.3. XHTML
XHTML (Extensible Hypertext Markup Language – расширяемый язык разметки гипертекста) –
язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML
[40]. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее
подмножеством.
Стандарт XHTML построен не как самодостаточное описание языка, а как перечень различий
между HTML 4.01 и XHTML [41]:




Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега
(например, <img> или <br> ) должны иметь на конце / (например, <br /> ).
Булевы атрибуты записываются в развернутой форме. Например, следует писать <option
selected="selected"> или <td nowrap="nowrap">.
Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img
alt="" /> вместо <IMG ALT="" /> ).
XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны
замещаться < и & соответственно. По рекомендации W3C браузеры, встретив
ошибку в XHTML, должны сообщить о ней и не обрабатывать документ.
33

Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по
умолчанию является ISO 8859-1).
Для XHTML страниц рекомендуется задавать MIME-тип – application/xhtml+xml, но это не
является обязательным, более того – браузер Internet Explorer 8 и младшие версии, не смогут
обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME-тип для
HTML – text/html.
Версии XHTML:







XHTML 1.0 Переходный (Transitional): предназначен для легкой миграции из HTML 3.2
и для тех, кто использует инлайн-фрэймы.
XHTML 1.0 Строгий (Strict): полностью отделяет содержание документа от оформления
(задается только через CSS ), многие атрибуты (такие как, например, bgcolor и align)
более не поддерживаются, их поведение можно задавать только через таблицу стилей.
XHTML 1.0 Фрэймовый (Frameset): используется, если необходимо разделить окно
браузера на несколько фрэймов.
XHTML 1.1 Модульный (Module-based): авторы могут импортировать дополнительные
свойства в их разметку.
XHTML Основной (Basic): специальная облегченная версия XHTML для устройств,
которые не могут использовать полный набор элементов XHTML – в основном
используется в миниатюрных устройствах, таких как мобильные телефоны.
Подразумевается, что он заменит WML и C-HTML.
XHTML мобильного профиля (Mobile Profile): основанный на XHTML Basic, добавляет
специфические элементы для мобильных телефонов.
XHTML 2.0. Пока в разработке. Синтаксис еще больше приближен к синтаксису XML.
Также является модульным языком.
Подробнее данная технология будет освещена в лекции №2.
1.3.4. CSS
CSS (Cascading Style Sheets – каскадные таблицы стилей) – технология описания внешнего вида
документа, написанного языком разметки [42]. Преимущественно используется как средство
оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами
документов в формате XML, включая SVG и XUL.
Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с
Бертом Босом он стал развивать CSS.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и
других аспектов представления документа. Основной целью разработки CSS являлось
разделение содержимого (написанного на HTML или другом языке разметки) и представления
документа (написанного на CSS ) [43]. Это разделение может увеличить доступность
документа, предоставить большую гибкость и возможность управления его представлением, а
также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS
позволяет представлять один и тот же документ в различных стилях или методах вывода, таких
как экранное представление, печать, чтение голосом (специальным голосовым браузером или
программой чтения с экрана) и др.
34
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko
(Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera [44].
Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и
частично – CSS 3 [45].
Преимущества применения CSS [42, 43]:




несколько дизайнов страницы для разных устройств просмотра;
уменьшение времени загрузки страниц сайта за счет переноса правил представления
данных в отдельный CSS -файл;
простота последующего изменения дизайна;
дополнительные возможности оформления, например, с помощью CSS -верстки можно
сделать блок текста, который остальной текст будет обтекать или сделать так, чтобы
меню было всегда видно при прокрутке страницы.
Недостатки применения CSS [42, 43]:


различное отображение верстки в различных браузерах (особенно устаревших), которые
по-разному интерпретируют одни и те же данные CSS ;
часто встречающаяся необходимость на практике исправлять не только один CSS -файл,
но и теги HTML и серверный код, которые сложным и ненаглядным способом связаны с
селекторами CSS.
Подробнее данная технология будет освещена в лекции №2.
1.3.5. XML
XML (eXtensible Markup Language – расширяемый язык разметки) – рекомендованный
Консорциумом Всемирной паутины язык разметки, фактически представляющий собой свод
общих синтаксических правил [46]. XML – текстовый формат, предназначенный для хранения
структурированных данных (взамен существующих файлов баз данных), для обмена
информацией между программами, а также для создания на его основе более
специализированных языков разметки (например, XHTML), иногда называемых словарями.
XML является упрощенным подмножеством языка SGML. Годом рождения XML можно
считать 1996 год, в конце которого появился черновой вариант спецификации языка, или 1998,
когда эта спецификация была утверждена.
Целью создания XML было обеспечение совместимости при передаче структурированных
данных между разными системами обработки информации, особенно при передаче таких
данных через Интернет. Словари, основанные на XML (например, RDF, RSS, MathML, XHTML,
SVG), сами по себе формально описаны, что позволяет программно изменять и проверять
документы на основе этих словарей, не зная их семантики, то есть, не зная смыслового
значения элементов. Важной особенностью XML также является применение так называемых
пространств имен (namespace).
К достоинствам использования XML можно отнести [46, 47]:


XML – язык разметки, позволяющий отобразить двоичные данные в текст, читаемый
человеком и анализируемый компьютером;
XML поддерживает Юникод;
35













в формате XML могут быть описаны такие структуры данных как записи, списки и
деревья;
XML – это самодокументируемый формат, который описывает структуру и имена полей
так же как и значения полей;
XML имеет строго определенный синтаксис и требования к анализу, что позволяет ему
оставаться простым, эффективным и непротиворечивым;
XML – формат, основанный на международных стандартах;
Иерархическая структура XML подходит для описания практически любых типов
документов, кроме аудио и видео мультимедийных потоков, растровых изображений,
сетевых структур данных и двоичных данных;
XML представляет собой простой текст, свободный от лицензирования и каких-либо
ограничений;
XML не зависит от платформы;
XML является подмножеством SGML;
уже накоплен большой опыт работы с языком и созданы специализированные
приложения;
XML не накладывает требований на расположение символов в строке;
в отличие от бинарных форматов, XML содержит метаданные об именах, типах и
классах описываемых объектов, по которым приложение может обработать документ;
XML имеет реализации парсеров для всех современных языков программирования;
XML поддерживается на низком аппаратном, микропрограммном и программном
уровнях в современных аппаратных решениях.
К недостаткам XML можно отнести [46, 47, 48]:





синтаксис XML избыточен:
o размер XML документа существенно больше бинарного представления тех же
данных;
o избыточность XML может повлиять на эффективность приложения (возрастает
стоимость хранения, обработки и передачи данных);
o для большого количества задач не нужна вся мощь синтаксиса XML и можно
использовать значительно более простые решения;
неоднозначность моделирования, т.е. нет общепринятой методологии для
моделирования данных в XML ;
XML не содержит встроенной в язык поддержки типов данных;
иерархическая модель данных, предлагаемая XML, ограничена по сравнению с
реляционной моделью и объектно-ориентированными графами и сетевой моделью
данных;
пространства имен XML сложно использовать и их сложно реализовывать в XML парсерах.
Наиболее распространены три способа преобразования XML -документа в отображаемый
пользователю вид:
1. применение стилей CSS ;
2. применение преобразования XSLT;
3. написание на каком-либо языке программирования обработчика XML -документа.
Без использования CSS или XSL XML -документ отображается как простой текст в
большинстве Веб-браузеров. Некоторые браузеры, такие как Internet Explorer, Mozilla и Mozilla
36
Firefox отображают структуру документа в виде дерева, позволяя сворачивать и разворачивать
узлы с помощью нажатий клавиши мыши.
Подробнее данная технология будет освещена в лекции 7.
1.3.6. JavaScript
Объектно-ориентированный скриптовый язык программирования JavaScript (первоначально
назван LiveScript его создателем, Бренданом Ваше, и развернут в составе браузера Netscape
Navigator) был впервые представлены публике в 1995 году [49].
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам
приложений. Наиболее широкое применение находит в браузерах как язык сценариев для
придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое
управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим
на Java, но при этом легким для использования непрограммистами. Языком JavaScript не
владеет какая-либо компания или организация, что отличает его от ряда языков
программирования, используемых в веб-разработке.
JavaScript обладает рядом свойств объектно-ориентированного языка, но реализованное в языке
прототипирование обуславливает отличия в работе с объектами по сравнению с
традиционными объектно-ориентированными языками. Кроме того, JavaScript имеет ряд
свойств, присущих функциональным языкам – функции как объекты первого класса, объекты
как списки, карринг, анонимные функции, замыкания – что придает языку дополнительную
гибкость.
Структурно JavaScript можно представить в виде объединения трех четко различимых друг от
друга частей:



ядро (ECMAScript);
объектная модель браузера (Browser Object Model или BOM);
объектная модель документа (Document Object Model или DOM).
Если рассматривать JavaScript в отличных от браузера окружениях, то объектная модель
браузера и объектная модель документа могут не поддерживаться. Объектную модель
документа иногда рассматривают как отдельную от JavaScript сущность, что согласуется с
определением DOM как независимого от языка интерфейса документа.
Для добавления JavaScript -кода на страницу, можно использовать теги <script></script>.
Область применения JavaScript очень широка:





в клиентской части веб-приложений;
в AJAX ;
в технологии Comet;
в браузерных операционных системах;
для создания небольших программ, размещаемых в закладки браузера (Букмарклеты);
37







приложения, написанные на JavaScript, могут исполняться на серверах, использующих
Java 6 и более поздних версий, что используется для построения серверных приложений,
позволяющих обрабатывать JavaScript на стороне сервера;
в качестве языка разработки мобильных приложений (на платформе Mojo SDK в Palm
webOS);
для реализации виджетов, так и для реализации движков виджетов (Apple_Dashboard,
Microsoft Gadgets, Google Desktop Gadgets, Klipfolio Dashboard);
для написания прикладного ПО (57 % исходного кода Mozilla Firefox написано на
JavaScript );
в качестве скриптового языка доступа к объектам приложений;
в офисных приложениях для автоматизации рутинных действий, написания макросов,
организации доступа со стороны веб-служб;
в Excel Services 2010 добавились два новых интерфейса программирования приложений:
REST API и JavaScript Object Model (JSOM).
Для обеспечения высокого уровня абстракции и достижения приемлемой степени кроссбраузерности при разработке веб-приложений используются библиотеки JavaScript. Они
представляют собой набор многократно используемых объектов и функций. Среди известных
JavaScript библиотек можно отметить Adobe life, Dojo Toolkit, Extjs, jQuery, Mootools, Prototype,
Qooxdoo.
На сегодняшний день поддержку JavaScript обеспечивают современные версии всех наиболее
часто используемых браузеров. В Internet Explorer, Mozilla Firefox, Safari, Chrome, Opera
имеется полная поддержка третьей редакции ECMA-262.
Подробнее данная технология будет освещена в лекции 12.
1.3.7. PHP
PHP ( PHP: Hypertext Preprocessor – " PHP: препроцессор гипертекста", Personal Home Page
Tools – "Инструменты для создания персональных веб-страниц") – скриптовый язык
программирования общего назначения, интенсивно применяющийся для разработки вебприложений [50]. В настоящее время поддерживается подавляющим большинством хостингпровайдеров и является одним из лидеров среди языков программирования, применяющихся
для создания динамических веб-сайтов.
Язык и его интерпретатор разрабатываются группой энтузиастов в рамках проекта с открытым
кодом. Проект не является свободным и распространяется под собственной лицензией.
В области программирования для Интернета PHP – один из популярнейших скриптовых языков
(наряду с JSP, Perl и языками, используемыми в ASP.NET ) благодаря своей простоте, скорости
выполнения, богатой функциональности, кроссплатформенности и распространению исходных
кодов на основе лицензии PHP.
Популярность в области построения веб-сайтов определяется наличием большого набора
встроенных средств для разработки веб-приложений.
В настоящее время PHP используется сотнями тысяч разработчиков. Согласно рейтингу Tiobe,
базирующемся на данных поисковых систем, в декабре 2009 года PHP находится на 3 месте
среди языков программирования (уступая Java и C), поднявшись за год на две позиции [51]. К
38
крупнейшим сайтам, использующим PHP, относятся Facebook (который, однако, использует
транслятор кода HipHop с PHP на C++ с целью оптимизации), ВКонтакте, Wikipedia.
В настоящий момент существует единственная реализация PHP, ни одна сторонняя компания
не поддерживает исполняемых модулей, отличных от официальной сборки. Такое положение
вещей, с одной стороны, позволяет быстро внедрять и распространять нововведения среди
сообщества разработчиков, с другой стороны, разрабатывать язык программирования в
условиях отсутствия стандарта, так как единая реализация обеспечивает его по факту. В таких
условиях большое значение приобретает версия интерпретатора, определяющая текущую
функциональность (обратная совместимость между версиями интерпретатора не соблюдается
строго).
1.3.8. Perl
Perl – высокоуровневый интерпретируемый динамический язык программирования общего
назначения, созданный в 1987 г. Ларри Уоллом, лингвистом по образованию [52]. Название
языка представляет собой аббревиатуру, которая расшифровывается как Practical Extraction and
Report Language "практический язык для извлечения данных и составления отчетов".
Согласно Ларри Уоллу, Perl имеет два девиза. Первый – "There's more than one way to do it"
("Есть больше одного способа сделать это", также известный как TMTOWTDI); второй – "Easy
things should be easy and hard things should be possible" ("Простые вещи должны быть простыми,
а сложные вещи – возможными").
Основной особенностью языка считаются его богатые возможности для работы с текстом, в том
числе реализованные при помощи регулярных выражений. Перл унаследовал много свойств от
языков С, shell script, awk.
Perl также знаменит огромной коллекцией дополнительных модулей CPAN [53].
1.3.9. AJAX
AJAX (Asynchronous Javascript and XML – "асинхронный JavaScript и XML ") – подход к
построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в
"фоновом" обмене данными браузера с веб-сервером [54]. В результате, при обновлении
данных веб-страница не перезагружается полностью и веб-приложения становятся более
быстрыми и удобными.
Впервые термин AJAX был публично использован в 2005 году в статье Джесси Джеймса
Гарретта (Jesse James Garrett) "Новый подход к веб-приложениям" [55]. Гарретт придумал
термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им
клиенту.
AJAX – не самостоятельная технология, а концепция использования нескольких смежных
технологий. AJAX базируется на двух основных принципах:

использование технологии динамического обращения к серверу "на лету", без
перезагрузки всей страницы полностью, например:
o с использованием XMLHttpRequest (основной объект);
o через динамическое создание дочерних фреймов;
o через динамическое создание тега <script>.
39

использование DHTML для динамического изменения содержания страницы;
В качестве формата передачи данных обычно используются JSON или XML.
К преимуществам AJAX можно отнести:



использование AJAX позволяет значительно сократить трафик при работе с вебприложением;
AJAX позволяет несколько снизить нагрузку на сервер;
ускорение реакции интерфейса.
К недостаткам AJAX можно отнести:



отсутствие интеграции со стандартными инструментами браузера;
динамически загружаемое содержимое обычно недоступно поисковикам;
старые методы учета статистики сайтов становятся неактуальными.
Подробнее данная технология будет освещена в лекции №6.
1.3.10. Adobe Flash
Adobe Flash (ранее известная как Macromedia Flash) – мультимедийная платформа,
используемая для создания векторной анимации и интерактивных приложений, а также для
интеграции видеороликов в веб-страницы [56].
Разработка Flash была начата компанией FutureWave, создавшей пакет анимации FutureSplash
Animator. В 1996 году FutureWave была приобретена компанией Macromedia, которая
переименовала FutureSplash Animator в Flash. Под этим наименованием платформа продолжает
развиваться и поныне (хотя после того, как в 2005 году компания Macromedia была поглощена
Adobe, Macromedia Flash стал официально называться Adobe Flash ).
Adobe Flash позволяет работать с векторной, растровой и ограниченно с трехмерной графикой,
а также поддерживает двунаправленную потоковую трансляцию аудио и видео.
В основе Flash лежит векторный морфинг, то есть плавное "перетекание" одного ключевого
кадра в другой. Это позволяет делать сложные мультипликационные сцены, задавая лишь
несколько ключевых кадров для каждого персонажа.
Flash использует язык программирования ActionScript, основанный на ECMAScript.
В качестве основного средства разработки используется пакет Adobe Flash Professional
(последняя версия Adobe Flash CS4).
Стандартным расширением для скомпилированных Flash-файлов является SWF (Shockwave
Flash или Small Web Format). Видеоролики в формате Flash представляют собой файлы с
расширением FLV (при этом Flash в данном случае используется только как контейнер для
видеозаписи).
Flash-контент воспроизводится с помощью целого ряда программных средств, но
доминирующее положение на рынке занимает официальный Adobe Flash Player,
распространяемый в качестве бесплатного плагина для большинства современных браузеров.
40
Основной недостаток Flash-приложений – чрезмерная требовательность к ресурсам процессора.
Недостаточная мощность компьютера может повлиять на производительность операционной
системы в целом, либо привести к искажению результатов работы Flash-приложения, связанных
с отображением анимации или подсчетом времени.
Другой важный недостаток заключается в том, что не всегда есть возможность запустить Flashприложение, либо она связана с некоторыми трудностями (например, необходимо установить
плагин или обновить его до последней версии).
Также использование Flash для размещения текстовой информации препятствует ее
индексированию поисковыми системами. Однако существует множество способов решить эту
проблему.
Подробнее данная технология будет освещена в лекциях №16 и 17.
1.3.11. Silverlight
Microsoft Silverlight – это мультимедийная технология схожая по решаемым задачам с Adobe
Flash. Также Microsoft Silverlight – это плагин для браузера, который позволяет запускать
приложения, содержащие анимацию, векторную графику и аудио-видео ролики, что характерно
для RIA (Rich Internet application) [57].
Silverlight реализован для ОС Windows 2000, Windows XP, Windows Server 2003, Windows Vista,
Windows 7, Mac OS X 10.4, Mac OS X 10.5 и браузеров Internet Explorer 6.0/7.0/8.0, Mozilla
Firefox 1.5/2.0/3, Safari 3.1, Google Chrome 3.0. В будущем также планируется поддержка Opera,
мобильных устройств, начиная с Windows Mobile 6 и Symbian (Series 60), и, возможно, других
платформ.
Silverlight предоставляет графическую систему, схожую с Windows Presentation Foundation, и
объединяет мультимедиа, графику, анимацию и интерактивность в одной программной
платформе. Он был разработан, чтобы работать с XAML и с языками Microsoft .NET. XAML
используется для разметки страниц, использующих векторную графику и анимацию. Текст,
содержащийся в Silverlight приложениях, доступен для поисковых систем, так как он не
компилируется, а доступен в виде XAML. Silverlight также можно использовать для того, чтобы
создавать виджеты для Windows Sidebar в Windows Vista.
Silverlight поддерживает воспроизведение WMV, WMA и MP3 для всех поддерживаемых
браузеров, не требуя при этом дополнительных компонентов, таких как Windows Media Player.
Silverlight позволяет динамически загружать XML и использовать DOM для взаимодействия с
ним так же, как это делается в Ajax. Silverlight содержит объект Downloader, благодаря
которому можно скачивать скрипты, медиа файлы и т. д., если это необходимо приложению.
Начиная с версии 2.0, логика программы может быть описана в любом из языков .NET, включая
динамические языки программирования, такие как Iron Ruby и Iron Python, которые в свою
очередь исполняются в DLR (Dynamic Library Runtime) , а не CLR (Common Language Runtime).
Подробнее данная технология будет освещена в лекциии 16 и лекциии 17.
41
1.3.12. ASP.NET
ASP.NET – технология создания веб-приложений и веб-сервисов от компании Microsoft [58].
Она является составной частью платформы Microsoft .NET и развитием более старой
технологии Microsoft ASP.
Хотя ASP.NET берет свое название от старой технологии Microsoft ASP, она значительно от нее
отличается. Microsoft полностью перестроила ASP.NET, основываясь на Common Language
Runtime (CLR), который является основой всех приложений Microsoft .NET. Разработчики
могут писать код для ASP.NET, используя практически любые языки программирования, в том
числе, и входящие в комплект .NET Framework (C#, Visual Basic.NET, и JScript .NET). ASP.NET
имеет преимущество в скорости по сравнению со скриптовыми технологиями, так как при
первом обращении код компилируется и помещается в специальный кэш, и впоследствии
только исполняется, не требуя затрат времени на парсинг, оптимизацию, и т. д.
Вместе с тем следует учитывать, что указанное преимущество не всегда может быть
реализовано. Это связано с тем, что на скорость работы реального проекта влияют множество
факторов. В первую очередь это квалификация руководителей разработки и исполнителей:
медленные алгоритмы легко сводят на нет незначительное преимущество скомпилированного
кода перед интерпретацией серверных скриптов
Преимущества ASP.NET перед ASP:















компилируемый код выполняется быстрее, большинство ошибок отлавливается еще на
стадии разработки;
значительно улучшенная обработка ошибок времени выполнения, с использованием
блоков try..catch ;
пользовательские элементы управления ( controls ) позволяют выделять часто
используемые шаблоны, такие как меню сайта;
использование метафор, уже применяющихся в Windows-приложениях, например, таких
как элементы управления и события;
расширяемый набор элементов управления и библиотек классов позволяет быстрее
разрабатывать приложения;
ASP.NET опирается на многоязыковые возможности .NET, что позволяет писать код
страниц на VB.NET, Delphi.NET, Visual C#, J# и т. д.;
возможность кэширования всей страницы или ее части для увеличения
производительности;
возможность кэширования данных, используемых на странице;
возможность разделения визуальной части и бизнес-логики по разным файлам ("code
behind");
расширяемая модель обработки запросов;
расширенная событийная модель;
расширяемая модель серверных элементов управления;
наличие master-страниц для задания шаблонов оформления страниц;
поддержка CRUD операций при работе с таблицами через GridView ;
встроенная поддержка AJAX.
Подробнее данная технология будет освещена в лекциии 6 и лекциии 7.
42
1.3.13. Ключевые термины
Веб-программирование, Клиентские языки программирования, Серверные языки
программирования, HTML, XHTML, CSS, XML, JavaScript, PHP, Perl, AJAX, Adobe Flash,
Microsoft Silverlight, ASP.NET.
1.4. Краткие итоги
Интернет – глобальная телекоммуникационная сеть информационных и вычислительных
ресурсов. В течение всего пяти лет Интернет достиг аудитории свыше 50-ти миллионов
пользователей.
Различают логическую и физическую модели Интернета. Под логической прежде всего
понимают Всемирную паутину ( World Wide Web ), а под физической – компьютеры, серверы и
средства передачи данных между ними.
Чтобы различные компьютеры сети могли взаимодействовать, они должны использовать один и
тот же протокол. Систему протоколов Интернет называют "стеком протоколов TCP/IP ".
Всемирная паутина – распределенная система, предоставляющая доступ к связанным между
собой документам, расположенным на различных компьютерах, подключенных к Интернету.
Всемирная паутина стоит на "трех китах":



язык гипертекстовой разметки документов HTML (HyperText Markup Language);
универсальный способ адресации ресурсов в сети URL (Universal Resource Locator);
протокол обмена гипертекстовой информацией HTTP (HyperText Transfer Protocol).
Концепции развития Всемирной паутины можно условно разделить на Веб 1.0, Веб 2.0, Веб 3.0.
Веб-программирование – это раздел программирования, ориентированный на разработку
динамических Интернет -приложений.
Языки веб-программирования делятся на две группы: клиентские и серверные.
Клиентские языки обрабатываются на стороне пользователя (в основном в браузере).
Серверные языки программирования обрабатываются на стороне сервера.
Важной стороной работы серверных языков является Система управления базами данных
(СУБД).
HTML – стандартный язык разметки документов во Всемирной паутин.
XHTML – язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на
базе XML.
CSS – технология описания внешнего вида документа, написанного языком разметки.
43
XML – текстовый формат, предназначенный для хранения структурированных данных, для
обмена информацией между программами, а также для создания на его основе более
специализированных языков разметки.
JavaScript – это объектно-ориентированный скриптовый язык программирования.
PHP – скриптовый язык программирования общего назначения, интенсивно применяющийся
для разработки веб-приложений.
Perl – высокоуровневый интерпретируемый динамический язык программирования общего
назначения.
AJAX – подход к построению интерактивных пользовательских интерфейсов веб-приложений,
заключающийся в "фоновом" обмене данными браузера с веб-сервером.
Adobe Flash и Microsoft Silverlight – мультимедийные платформы, используемые для создания
RIA-приложений, а также для интеграции видеороликов в веб-страницы.
ЛЕКЦИЯ 2
Общие принципы создания Web-узла
Вы решили создать и разместить в информационном пространстве WWW ( World Wide Web,
Всемирная паутина) собственный Web-узел. Какие же шаги надо предпринять, чтобы он был
интересен, полезен и, что немаловажно, посещаем. Первый вопрос, на который необходимо
дать четкий ответ: с какой целью создается Web-узел? От этого зависит многое: стиль
оформления, необходимые для создания и последующего функционирования затраты, формат
представления информации для размещения в Web, инструментарий и требования,
предъявляемые к программному обеспечению Web-сервера и каналам связи с Internet. Здесь
возможно несколько вариантов.
Если вы создаете Web-узел для компании, реализующей какой-то товар, то основной целью
может быть распространение информации о фирме и реклама продукции, а также организация
Web-магазина. При этом будут решены следующие задачи:






изменение имиджа и поднятие престижа компании;
продвижение торговой марки;
доступность информации о продукции и ценах для клиентов;
поддержка дилерской сети, доступность информации о продукции и ценах для дилеров;
прямая продажа продукции в Internet, организация Web-магазина;
доступность внутренней информации для сотрудников, работающих вне офиса.
Другой вариант — создание Web-узла научной или общеобразовательной организации, не
занимающейся коммерцией в Internet, а распространяющей информацию. В этом случае речь
пойдет о сборе, переработке и размещении на Web-узле больших массивов данных с
организацией поиска и доступа к ним.
44
И последний рассматриваемый вариант — когда вы считаете необходимым разместить в
Internet свою личную страницу.
Для того, чтобы правильно ответить на поставленные вопросы, необходимо сформировать
категории пользователей, на которые рассчитан Web-узел. Исходя из их психологии, должна
строиться информационная структура, которая будет привлекать и удерживать клиентов. В
дальнейшем все вопросы о целесообразности каких-либо действий, связанных с Web-узлом,
должны рассматриваться в соответствии с тем, как отреагируют на них посетители и насколько
они будут способствовать достижению главной цели.
После того как сформулированы цели и определены категории пользователей, необходимо
распределить подготовленную информацию по Web-документам, продумать связи между ними
и предусмотреть дополнительные навигационные возможности, например, поисковую систему
по содержимому Web-узла.
Типичная структура Web-узла фирмы обычно представлена так:
Информация о компании. Следует рассказать о целях и деловом облике фирмы, ее истории и
т.д. Покажите, какую выгоду получат клиенты от сотрудничества именно с вами, а не с другими
компаниями.
Информация о продукции и услугах. Разместите на Web-странице фотографии или рисунки
своей продукции. Опишите ее свойства и преимущества, приведите примеры использования.
Если имеется бумажный каталог продукции, то можно перенести его структуру и содержание в
Web-узел. Это облегчит создание и дальнейшее обновление электронного варианта каталога.
Если планируется прием заказов на продукцию или услуги через Internet, то нужно разместить
здесь бланк заказа, который будет поступать по электронной почте.
Информационная поддержка. В этом разделе публикуется дополнительная техническая
информация, часто задаваемые вопросы, советы по устранению неисправностей и т.п.
Новости. Проинформируйте клиентов о новых товарах и услугах, предоставляемых фирмой,
опубликуйте пресс-релизы и т.п.
Обратная связь. Сообщите, как с вами можно связаться, где вы находитесь. Поместите форму
для отзыва, гостевую книгу, адреса электронной почты, на которые клиент может отправить
запрос, и т.п.
При наполнении Web-узла всегда нужно помнить два принципа: уникальность и достоверность
публикуемых материалов.
Уникальность является первоочередным требованием к содержанию. В WWW уже может
существовать немало страниц с похожими материалами. Ваш Web-узел должен чем-то
отличаться от серверов с аналогичной тематикой, хотя бы для того, чтобы привлечь к себе
внимание. Наличие уникальных материалов на вашей странице увеличит ее посещаемость. Для
того, чтобы создать уникальный информационный ресурс, не обязательно изобретать что-то
принципиально новое, можно по-другому оформить уже существующие ресурсы, но при этом
не заставлять клиента тратить много времени на их поиск. Проверить же ресурсы на
уникальность можно с помощью поисковых серверов. Что касается авторитетности, то все
зависит от того, насколько тщательно вы подберете информацию, проверите ее и будете
своевременно обновлять.
45
При создании Web-узла необходимо помнить, что составляющие его отдельные документы
должны быть объединены общим стилем оформления и средствами навигации. Единый стиль
оформления — один из показателей, отличающих профессиональный Web-узел от
любительского. Благодаря единообразно сделанным документам пользователи будут отличать
ваш Web-узел от других и запомнят его. Это не значит, что документы должны быть похожи
друг на друга как две капли воды, но общая идея, единый стиль, должны присутствовать
непременно.
То же относится и к средствам навигации по страницам. Не стоит рассчитывать, что посетитель
знает структуру Web-узла так же хорошо, как вы. Он должен без труда понимать, где он
находится сейчас и как можно попасть в любое другое место. Необходимо предусмотреть
возможность перехода к первому документу, программе поиска или к схеме Web-узла.
Кроме того, единство стиля позволяет использовать шаблоны — страницы, содержащие только
общие элементы оформления и навигации (без информационного наполнения). С их помощью
можно быстро и эффективно создавать новые страницы и распределять работу по их созданию
между несколькими людьми. При использовании шаблона для получения готовой страницы
достаточно лишь внести в него необходимую информацию. Последовательность, логичность,
постоянство — вот необходимые качества хорошего Web-узла. Значительно упростят работу по
формированию и изменению стиля вашего Web-узла каскадные таблицы стилей, появившиеся в
HTML 4.0. О некоторых их возможностях будет рассказано ниже, а полностью им посвящена
отдельная глава.
После того как определены цели, задана структура и собрана текстовая и графическая
информация, необходимо разработать внешний вид Web-узла. Он также зависит от тех целей,
которые необходимо достичь. Спектр возможных решений здесь очень широк: от просмотра
уже существующих страниц и создания подобных, до обращения за помощью к
профессиональным дизайнерам и художникам. В то же время, необходимо помнить о
некоторых уже сложившихся правилах построения Web-документов, из которых состоит Webузел.
Структура. На сегодня представление о структуре документа достаточно устоялось. Webдокумент должен содержать в себе следующие разделы: заглавие, название компании,
навигационную панель, собственно содержание, контактную информацию, дату и время
обновления, авторские права и статус документа.
Логотип. Создавая Web-страницу, необходимо позаботиться о том, чтобы название фирмы
всегда присутствовало на экране. Для этого в начале каждого Web-документа обычно
помещается красочно оформленный логотип фирмы. Кроме того, название компании должно
присутствовать и в выходных данных ко всем документам.
Навигационная панель. Одним из наиболее важных разделов Web-документа является
навигационная панель или панель управления. WWW завоевала весь мир во многом благодаря
тому, что гипертекстовые ссылки обеспечивают полную связность публикуемых материалов.
Но эти же ссылки таят в себе опасность погружения в полный хаос, когда, пройдя цепочку из
трех-четырех документов, вы уже не сможете вернуться обратно, запутавшись в обилии ссылок.
Ваш Web-узел должен обеспечивать пользователю ясные и интуитивно понятные
навигационные маршруты.
Многочисленные исследования показали, что посетители Web-серверов очень нетерпеливы и
дальше, чем на два уровня документов, углубляться в содержание сервера не хотят. Поэтому,
46
создавая Web-узел большого объема, следует предусмотреть промежуточные документы,
обычно находящиеся на первом-втором уровнях, от которых любая информация находится не
далее, чем в двух переходах.
Навигационная панель вашего Web-узла должна присутствовать в каждом документе. В первую
очередь, она должна включать в себя направляющие ссылки типа "Вперед"-"Назад"
("Следующий"-"Предыдущий"), указывающие на соседние документы в структуре Web-узла.
Далее от панели управления обязательно должны идти ссылки на все крупные разделы Webузла — так называемые разделы первого уровня. И, наконец, пользователь всегда должен иметь
возможность мгновенно вернуться на главную страницу Web-узла. Помимо ссылок следует
указать путь к локальной поисковой системе и индексу.
Содержание. Прежде всего, следует отметить, что содержание Web-документов должно в
полной мере отвечать всем требованиям, предъявляемым к обычным газетным или журнальным
публикациям: грамматическая и орфографическая корректность, точность и достоверность
предлагаемых материалов и многое другое. Кроме того, появляется целый ряд специфических
требований, которым должен удовлетворять Web-документ.
Часто возникает вопрос о размерах документа: какое число страниц является оптимальным?
Ответ на первый взгляд может показаться странным: одна экранная страница или вообще
никаких ограничений. Многочисленные исследования показали, что пользователи не любят
работать с полосами прокрутки браузеров. Больше всего им нравятся документы, которые
размещаются на одной экранной странице. Так и в WWW — вы никоим образом не сможете
дать пользователю больше информации, чем в концентрированном изложении на одной
странице. Если все-таки вы не укладываетесь в эти рамки, создайте еще один документ.
Одна экранная страница оказалась подходящей мерой представления информации. Если размер
документа превышает одну страницу, то в большинстве случаев он может быть поделен на
несколько логических частей, каждая из которых будет занимать не более одной страницы.
Если же логического деления информации произвести не удается, то необходимо переработать
стиль изложения, а может быть, и сами материалы. Сейчас выработалось единое мнение, что
Web-сервер необходимо строить на основе одноэкранных документов. Есть только два
исключения из этого правила. Оно не распространяется на статьи, публикуемые в WWW, и
второе исключение — анкетные формы, которые, естественно, нельзя разрывать.
Графика. При разработке Web-страницы нужно очень внимательно выбирать оптимальное
соотношение графических и текстовых материалов. Одна хорошая картинка может заменить
тысячу строк текста, но и загружаться по сети она будет в тысячу раз дольше. Поэтому
графикой нужно пользоваться осторожно. Можно исходить из того, что графики на странице
должно быть чуть меньше, чем хочется Web-мастеру. Пользователям может просто не хватить
терпения, и они закроют документ еще до того как он полностью загрузится. Задержка отклика
системы вызывает у пользователя раздражение. Все понимают, как тяжело сейчас обстоят дела
с канальной инфраструктурой в Internet. Поэтому время задержки возрастает в зависимости от
времени суток, по разным оценкам до 15-60 секунд. Теперь представьте, что у клиента только
модем на 19200 бит/с. Тогда за минуту, то есть до того как клиент потеряет терпение, можно
передать только около 170 Кбайт данных. Следовательно, размер документа не должен
превышать этого значения.
Следует отметить, что обычно панель управления, логотип и название фирмы выполняются в
виде графических элементов. После создания макета можно приступить к его реализации с
помощью языка HTML и иных средств, предлагаемых современными технологиями WWW.
47
Завершив создание Web-узла, необходимо разместить его в Internet. Здесь возможны два
варианта: первый — использовать компьютер, который вместе с Web-сервером и Web-узлом
находится в вашем офисе и подключается к Internet по выделенной или коммутируемой линии;
второй — воспользоваться для размещения Web-узла услугами специальных организаций.
Рассмотрим второй вариант. Правильный выбор провайдера, предоставляющего доступ к Webстранице, позволит вашим клиентам с максимальным удобством получать необходимую
информацию. Кроме того, поддержка Web-сервером специальных возможностей значительно
облегчит разработку Web-узла.
На что следует обратить внимание при выборе провайдера, размещающего ваш Web-узел на
своем сервере?
Пропускная способность каналов. Чтобы вашим посетителям не пришлось слишком долго
ждать загрузки страниц, провайдер должен обладать надежным высокоскоростным
соединением порядка 1-2 Мбит в секунду.
Поддержка сервером провайдера SSI (Server Side Includes, вставки на стороне сервера).
Использование SSI позволяет Web-серверу вставлять небольшие объемы динамических данных
непосредственно в пересылаемый пользователю HTML -документ. Запрошенная HTML страница "просматривается" в поисках элементов SSI. Обнаружив такой элемент, сервер
вставляет требуемую динамическую информацию. С помощью SSI можно включать один файл
в состав другого, исполнять CGI-сценарии и передавать другую информацию. Необходимо
уточнить, какие именно функции SSI поддерживаются на сервере провайдера.
Поддержка сервером провайдера CGI-сценариев. CGI (Common Gateway Interface, общий
шлюзовой интерфейс) — спецификация, позволяющая Web-серверу выполнять произвольные
прикладные программы. В результате работы таких программ (сценариев, или "скриптов")
создаются HTML -документы. С помощью CGI-сценариев могут приниматься данные от
пользователя, они позволяют организовать диалог на Web-страницах, запросы к базам данных и
т.д. Создать CGI-сценарий можно с помощью любого популярного языка программирования:
Perl, Basic, C, C++, Pascal и т.п.
Поддержка моментальной перекодировки. К сожалению, для русского языка в Internet при
работе на разных платформах (Windows, Mac, Unix и т.д.) приняты различные кодировки.
Чтобы пользователю было легко просматривать страницы, Web-сервер провайдера должен
уметь автоматически перекодировать документы в зависимости от поступившего запроса. В
противном случае либо содержание вашего Web-узла для некоторых посетителей будет
нечитаемым, либо придется обеспечивать несколько копий Web-узла — по одной на каждую
поддерживаемую кодировку.
Способ обновления страниц. Обычно страницы обновляются по протоколу FTP (File Transfer
Protocol, протокол передачи файлов). Некоторые FTP-клиенты позволяют работать с файлами
на компьютере провайдера так же, как с собственным диском, — копировать, удалять,
переименовывать и т.п.
Как правило, возможность размещения Web-узла провайдер предоставляет своим
пользователям за небольшую плату или бесплатно.
Существуют службы, которые предоставляют место под Web-узлы бесплатно вместе с адресом
электронной почты и другими услугами. Как правило, условием такого "бесплатного"
48
размещения является выделение на ваших страницах некоторого места под рекламу, кроме
того, накладываются ограничения на размер ваших файлов.
История развития HTML
В 1989 году Тим Бернерс-Ли предложил руководству Европейского Центра ядерных
исследований (CERN) проект распределенной гипертекстовой системы, которую он назвал
World Wide Web (WWW), Всемирная паутина. Первоначально идея системы состояла в том,
чтобы при помощи гипертекстовой навигационной системы объединить все множество
информационных ресурсов CERN в единую информационную систему. Технология оказалась
настолько удачной, что дала толчок к развитию одной из самых популярных в мире глобальных
информационных систем. Практически в сознании большинства пользователей глобальной
компьютерной сети Internet сама эта сеть ассоциируется с тремя основными информационными
технологиями:



электронная почта (e-mail);
файловые архивы FTP;
World Wide Web.
Причем последняя технология постепенно перемещается на первое место.
Успех технологии World Wide Web определен двумя основными факторами: простотой и
использованием протоколов межсетевого обмена семейства TCP/IP (Transmission Control
Protocol, протокол управления передачей/Internet Protocol, протокол Internet), которые являются
основой Internet.
Практически все пользователи Сети одновременно получили возможность попробовать себя в
качестве создателей и читателей информационных материалов, опубликованных во Всемирной
паутине. Но и популярность самого Internet во многом вызвана появлением World Wide Web,
так как это первая сетевая технология, которая предоставила пользователю простой
современный интерфейс для доступа к разнообразным сетевым ресурсам. Простота и удобство
применения привели к росту числа пользователей WWW и привлекли внимание коммерческих
структур. Далее процесс роста числа пользователей стал лавинообразным, и так продолжается
до сих пор.
При этом сама технология на начальном этапе была чрезвычайно проста. Дело в том, что при
разработке различных компонентов технологии ( языка гипертекстовой разметки HTML
(HyperText Markup Language, язык разметки гипертекста ), протокола обмена гипертекстовой
информацией HTTP, спецификации разработки прикладного программного обеспечения CGI и
др.) предполагалось, что квалификация авторов информационных ресурсов и их оснащенность
средствами вычислительной техники будут минимальными.
Одним из компонентов технологии создания распределенной гипертекстовой системы World
Wide Web стал язык гипертекстовой разметки HTML, разработанный Тимом Бернерсом-Ли на
основе стандарта языка разметки печатных документов — SGML (Standard Generalised Markup
Language, стандартный обобщенный язык разметки ). Дэниел В. Конноли написал для него
Document Type Definition — формальное описание синтаксиса HTML в терминах SGML.
Разработчики HTML смогли решить две задачи:
49


предоставить дизайнерам гипертекстовых баз данных простое средство создания
документов;
сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент
представления об интерфейсе пользователя гипертекстовых баз данных.
Первая задача была решена за счет выбора теговой модели описания документа. Такая модель
широко применяется в системах подготовки документов для печати. Примером такой системы
может служить хорошо известный язык разметки научных документов TeX, который был
создан Дональдом Кнутом и предложен Американским математическим обществом, и
программы его интерпретации.
Язык НТМL позволяет размечать электронный документ, который отображается на экране с
полиграфическим уровнем оформления; результирующий документ может содержать самые
разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка
вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений,
различные списки, таблицы и многое другое.
Вторым важным моментом, повлиявшим на судьбу HTML, стало то, что в качестве основы был
выбран обычный текстовый файл. Выбор был сделан под влиянием следующих факторов:


такой файл можно создать в любом текстовом редакторе на любой аппаратной
платформе в среде какой угодно операционной системы;
к моменту разработки HTML существовал американский стандарт для разработки
сетевых информационных систем — Z39.50, в котором в качестве единицы хранения
указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.
Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых
файлов, размеченных на языке HTML, который определяет форму представления информации
(разметка) и структуру связей между этими файлами и другими информационными ресурсами
(гипертекстовые ссылки). Гипертекстовые ссылки, устанавливающие связи между текстовыми
документами, постепенно стали объединять самые различные информационные ресурсы, в том
числе звук и видео; в результате возникло новое понятие — гипермедиа.
Такой подход предполагает наличие еще одного компонента технологии — интерпретатора
языка. В World Wide Web функции интерпретатора разделены между Web-сервером
гипертекстовой базы данных и интерфейсом пользователя. Сервер, кроме доступа к документам
и обработки гипертекстовых ссылок, обеспечивает предпроцессорную обработку документов, в
то время как интерфейс пользователя осуществляет интерпретацию конструкций языка,
связанных с представлением информации.
Первая версия языка ( HTML 1.0 ) была направлена на представление языка как такового, где
описание его возможностей носило скорее рекомендательный характер. Вторая версия языка (
HTML 2.0 ) фиксировала практику использования его конструкций. Версия ++ ( HTML++ )
представляла новые возможности, расширяя набор тегов HTML в сторону отображения
научной информации и таблиц, а также улучшения стиля компоновки изображений и текста.
Версия 3.2 смогла упорядочить все нововведения и согласовать их с существующей практикой.
HTML 3.2 позволяет реализовать использование таблиц, выполнение кодов языка Java,
обтекание графики текстом, а также отображение верхних и нижних индексов.
Сейчас World Wide Web Consortium (W3C) — международная организация, которая занимается
подготовкой и распространением документации на описание новых версий HTML — уже
50
опубликовала материалы спецификации HTML 4.01. Кроме возможностей разметки текста,
включения мультимедиа и формирования гипертекстовых связей, уже существовавших в
предыдущих версиях HTML, в версию 4.01 включены дополнительные средства работы с
мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати
изображений и документов. Для управления сценариями просмотра страниц Website
(гипертекстовой базы данных, выполненной в технологии World Wide Web ) можно
использовать языки программирования этих сценариев, например, JavaScript, Java и VBScript.
Усложнение HTML и появление языков программирования привело к тому, что разработка
Web-узлов стала делом высокопрофессиональным, требующим специализации по
направлениям деятельности и постоянного изучения новых Web-технологий. Но возможности
Internet позволяют пользователям, владеющим основами HTML, создавать и размещать
собственные Web-узлы без больших затрат. Именно на таких пользователей и рассчитан
предлагаемый курс.
Принципы гипертекстовой разметки
HTML является описательным языком разметки документов, в нем используются указатели
разметки ( теги ). Теговая модель описывает документ как совокупность контейнеров, каждый
из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не
что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL -кодами (
тегами ). Поскольку HTML произошел от SGML, в нем разрешено использовать только три
управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это
облегчает взаимодействие с различными операционными системами.
Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с
помощью общеупотребительных слов английского языка, понятных сокращений и
обозначений. НТМL- тег состоит из имени, за которым может следовать необязательный список
атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега
— имя, заключенное в угловые скобки, например, <HEAD> или <I>. Для ряда тегов характерно
наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для
изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
<TABLE WIDTH=570 ALIGN=center CELLPADDING=10
CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выравнена по центру, поле
между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пикселя, ширина бордюра 16
пикселов.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками
табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в
теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства,
стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно
просто указать после знака равенства, не выделяя дополнительно. Все остальные значения
необходимо заключать в одинарные или двойные кавычки, особенно если они содержат
несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами.
Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях
атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Uniform
51
Resource Locator, унифицированный указатель ресурса) других документов в качестве значения
атрибута HREF.
Чаще всего элементы разметки HTML или HTML -контейнеры состоят из начального и
конечного компонентов, между которыми размещаются текст и другие элементы документа.
Имя конечного тега идентично имени начального, но перед именем конечного тега ставится
косая черта ( / ) (например, для тега стиля шрифта — курсив <I> закрывающая пара
представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ> ).
Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию
скобок "begin/end" в универсальных языках программирования, которые задают области
действия имен локальных переменных и т.п. Теги определяют область действия правил
интерпретации текстовых документов.
При использовании вложенных элементов разметки в документе следует соблюдать особую
аккуратность. Вложенные теги нужно закрывать, начиная с последнего. Некоторые элементы
разметки не имеют конечного компонента, поскольку являются автономными элементами.
Например, тег изображения <IMG>, который служит для вставки в документ графического
изображения, конечного компонента не требует. К автономным элементам разметки также
относятся разрыв строки ( <BR> ), горизонтальная линейка ( <HR> ) и теги, содержащие такую
информацию о документе, которая не влияет на его отображаемое содержимое, например, теги
<META> и <BASE>.
В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров
устроено так, что при обработке текста документа начальный тег воспринимается как конечный
тег предыдущего. Самый распространенный тег такого типа — тег абзаца <Р>. Поскольку он
используется в документе очень часто, его обычно ставят только в начале каждого абзаца.
Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно
завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не
пользуются.
Есть и другие конечные теги, без которых браузеры отлично работают, например, конечный тег
</HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тегов,
чтобы избежать путаницы и ошибок при воспроизведении документа.
Для краткости и образности мы будем в ряде случаев вместо словосочетания "элемент
разметки" применять термин "контейнер".
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
"контейнер"=
<"имя тега" "список атрибутов">
содержание контейнера
</"имя тега">
Следует отметить, что в литературе кроме термина "контейнер" еще используется и термин
"элемент". Следует быть внимательным, чтобы не путать контейнер (например, BODY ) и тег (
BODY ), используемый при формировании контейнера.
Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены
для представления специальных символов в документе HTML, которые могут быть неверно
обработаны браузером. Предположим, создается документ HTML, речь в котором идет об
элементах данного языка. Если указать имя тега <BODY> просто в документе, браузер может
52
воспринять его как непосредственно старт-тег. Для вывода таких символов и используется
CER.
Например, чтобы представить символ "<" в документе HTML, нужно заменить его на <, а
символ ">" — на >. То есть, если указать в тексте HTML строку <BODY>, она будет
выглядеть на экране как текст <BODY>.
Может возникнуть вопрос: как быть с символами "</>", "&" и со специальными символами,
типа знака ударения? Можно выводить их, используя соответствующие CER, например для "&"
это будет &, и т. д.
CER легко обнаружить, если посмотреть на структуру любого документа HTML, поскольку
каждый из них начинается с амперсанда "&". В отличие от наименований тегов HTML,
наименования CER чувствительны к регистру символов. Также наименования CER могут
задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;. Далее в
таблице приведены наиболее часто используемые CER и соответствующие им числовые коды.
Числовой код
"
&
<
>
 
¡
¢
£
¤
¥
¨
©
Именная замена
"
&
<
>
 
¡
¢
£
¤
¥
¨
©
Символ
«
®
«
®
Левая угловая кавычка
Зарегистрированная торговая марка
±
»
±
»
Плюс или минус
Правая угловая кавычка
<
i
"
Описание
Кавычка
Амперсанд
Меньше
Больше
Неразрывный пробел
Перевернутый восклицательный знак
Цент
Фунт
Валюта
Йена
Умляут
Копирайт
Группы тегов НТМL
Все теги НТМL по их назначению и области действия можно разделить на следующие
основные группы:





определяющие структуру документа;
оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ.
53
Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка —
это адрес другого HTML -документа или информационного ресурса Internet, который
тематически, логически или каким-либо другим способом связан с документом, в котором
ссылка определена.
Естественно, при таких условиях очень важна схема адресации всех имеющихся
информационных ресурсов.
Реальный механизм интерпретации идентификатора ресурса, опирающийся на URI (Uniform
Resource Identifier, универсальный идентификатор ресурса), называется URL, и пользователи
WWW имеют дело именно с ним.
Типичным примером использования такой записи можно считать следующий пример:
Этот текст содержит:
<A HREF="http://www.intuit.ru/help/index.html">
гипертекстовую ссылку</A>
Выглядеть это будет следующим образом:(открыть)
Рис. 1.1.
В приведенном выше примере тег "A", который в HTML называют якорем (anchor), использует
атрибут HREF, обозначающий гипертекстовую ссылку (Hypertext Reference), для записи этой
ссылки в форме URL. Данная ссылка указывает на документ с именем "index.html" в каталоге
"help" на сервере "www.intuit.ru", доступ к которому осуществляется по протоколу HTTP.
Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и
общие. Контекстные ссылки вмонтированы в тело документа, как это было
продемонстрировано в предыдущем примере, в то время как общие ссылки связаны со всем
документом в целом и могут использоваться при просмотре любого фрагмента документа. Оба
класса ссылок изначально присутствуют в стандарте языка, однако первое время наибольшей
популярностью пользовались контекстные ссылки. Эта популярность привела к тому, что
механизм использования общих ссылок практически полностью "атрофировался". В данном
примере мы заключили URL в двойные кавычки. На самом деле, это необязательно. Кавычки
(двойные или одинарные) применяются только тогда, когда внутри значения URL появляются
символы-разделители (пробел, табуляция, неотображаемые символы). Но такого сорта URL
следует всячески избегать.
54
Структура HTML -документа позволяет задействовать вложенные друг в друга контейнеры.
Собственно, сам документ — это один большой контейнер, который начинается с тега
<HTML> и заканчивается тегом </HTML>.
В заключение отметим, что при подготовке документов HTML используется идентификатор
текста DTD (Document Type Definition, определение типа документа) в качестве первой строки.
Это позволяет браузеру идентифицировать документ как соответствующий стандарту HTML.
Обычно (но не обязательно) каждый документ HTML начинается со строки типа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
Здесь содержится информация о том, что документ соответствует версии HTML 4.0 ;
разработанной W3C; используемый язык — английский.
HTML-документ — это один большой контейнер, который начинается с тега <HTML> и
заканчивается тегом </HTML>:
<HTML>Содержание документа</HTML>
Контейнер HTML или гипертекстовый документ состоит из двух других вложенных
контейнеров: заголовка документа ( HEAD ) и тела документа ( BODY ). Рассмотрим
простейший пример классического документа.
<HTML>
<HEAD>
<TITLE>Простейший документ</TITLE>
</HEAD>
<BODY TEXT=#0000ff BGCOLOR=#f0f0f0>
<H1>Пример простого документа</H1>
<HR>
Формы HTML-документов
<UL>
<LI>Классическая
<LI>Фреймовая
</UL>
<HR>
</BODY>
</HTML>
Компания Netscape Communication расширила классическую форму документа возможностью
организации фреймов (кадров), позволяющих разделить рабочее окно программы просмотра на
несколько независимых фреймов. В каждый фрейм можно загрузить свою страницу HTML.
Приведем пример документа с фреймами.
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC=frame1.htm NAME=LEFT>
<FRAME SRC=frame2.htm NAME=RIGHT>
</FRAMESET>
</HTML>
55
Назначение заголовка
Заголовок HTML-документа является необязательным элементом разметки. В HTML 2.0
предлагалось вообще отказаться от элементов HEAD и BODY. В то время в HTML не было
элементов, которые использовались одновременно и в заголовке, и в теле документа.
Современная практика HTML-разметки такова, что почти в каждом документе есть HTMLзаголовок.
Первоначально существование заголовка определялось необходимостью именования окна
браузера. Это достигалось за счет элемента разметки TITLE:
<HTML>
<HEAD>
<TITLE>Это заголовок</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Отображение содержания элемента TITLE
Однако задумывался заголовок для несколько иных целей. Исходя из общих соображений,
связанных с теорией и практикой разработки и эксплуатации гипертекстовых систем, все
гипертекстовые связи информационных узлов принято разделять на контекстные и общие.
Контекстные гипертекстовые связи соответствуют определенному месту документа —
контексту. В HTML такие связи реализованы в виде гипертекстовых ссылок (элемент A
(anchor)). Фактически до реализации таблиц описателей стилей в современных браузерах это
был единственный вид связей, которыми мог управлять автор HTML-документа.
Общие гипертекстовые связи определяются не частью документа (контекстом), а всем
документом целиком. Например, быть предыдущим по отношению к другому документу или
следующим — это общая гипертекстовая связь, которая позволяет организовать так
называемый "линейный" просмотр информационных узлов гипертекстовой сети.
Реализация такого сорта ссылок уже давно является частью проектов W3C (Arena, Amaya). В
коммерческих браузерах такой механизм реализован только для описателей стилей (элемент
разметки LINK ).
Важную роль заголовок HTML-документа играет в JavaScript. Существует принципиальная
разница между заголовком и телом документа при использовании элемента разметки SCRIPT.
Она заключается в определении зоны видимости функций и переменных. Переменные и
функции, определенные в заголовке документа, относятся ко всему окну браузера. Это значит,
что к ним можно обратиться из любого места документа и изменить их значения. Кроме того, к
ним можно обратиться из другого окна или фрейма. Фактически, это глобальные переменные.
При работе с многослойными документами переменные и функции тела относятся к слоям, что
делает доступ к ним неудобным.
Еще одной функцией заголовка HTML-документа является управление HTTP-обменом через
элемент разметки META. При современной практике размещения Web-узлов компаний на
серверах провайдеров администраторы этих узлов могут не иметь возможности управлять
56
программой-сервером. В этом случае для управления обменом остается только одна
возможность — через заголовок HTML-документа.
Нельзя также не упомянуть еще об одном важном назначении заголовка HTML-документа —
поисковом образе документа для индексирования роботами поисковых систем. Элемент META
позволяет хранить списки ключевых слов и описания документа, которые будут использоваться
для составления индекса поисковой системы и появляться в качестве описания документа в
случае выдачи ссылки на него при поиске по ключевым словам.
Основные контейнеры заголовка
Основные контейнеры заголовка — это элементы HTML-разметки, которые наиболее часто
встречаются в заголовке HTML-документа, т.е. внутри элемента разметки HEAD.
Мы рассмотрим только восемь элементов разметки, включая сам элемент разметки HEAD:








HEAD (элемент разметки HEAD );
TITLE (заглавие документа);
BASE (база URL);
ISINDEX (поисковый шаблон);
META (метаинформация);
LINK (общие ссылки);
STYLE (описатели стилей);
SCRIPT (скрипты).
Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META
говорит об осведомленности автора о правилах индексирования документов в поисковых
системах и возможности управления HTTP-обменом данными. BASE и ISINDEX в последнее
время практически не применяются. LINK указывают только при использовании внешних
относительно данного документа описателей стилей.
Элемент разметки HEAD
Элемент разметки HEAD содержит заголовок HTML-документа. Данный элемент разметки не
является обязательным. При наличии тега начала элемента разметки желательно использовать и
тег конца элемента разметки. По умолчанию элемент HEAD закрывается, если встречается либо
тег начала контейнера BODY, либо тег начала контейнера FRAMESET. Атрибутов у тега
начала контейнера нет, хотя в DTD HTML один необязательный атрибут прописан. Синтаксис
контейнера HEAD в общем виде выглядит следующим образом:
<HEAD profile="http://www.intuit.ru/help">
Это пример из документации по сайту ИнтернетУниверситета Информационных Технологий
</HEAD>
Контейнер заголовка служит для размещения информации, относящейся ко всему документу в
целом. Необязательный атрибут PROFILE указывает на внешний файл META -тегов. В качестве
значения этого атрибута указывается URL данного файла.
57
Элемент разметки TITLE
Элемент разметки TITLE служит для именования документа в World Wide Web. Более
прозаическое его назначение — именование окна браузера, в котором просматривается
документ. Состоит контейнер из тега начала, содержания и тега конца. Наличие тега конца
обязательно. Тег начала элемента не имеет специфических атрибутов.
В различных браузерах алгоритм отображения элемента TITLE может отличаться. Так, в
некоторых руководствах предлагается создать бегущую строку в заголовке документа, указав
несколько последовательных контейнеров TITLE:
<TITLE>И</TITLE>
<TITLE>Ин</TITLE>
<TITLE>Инт</TITLE>
<TITLE>Инте</TITLE>
<TITLE>Интер</TITLE>
...
<TITLE>Интернет-Университе</TITLE>
<TITLE>Интернет-Университет</TITLE>
Такой механизм в современных браузерах не работает. При этом следует учитывать, что в
отличие от реализации "бегущей" строки средствами JavaScript, лидирующие пробелы в
заголовке игнорируются.
При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он
системным шрифтом, так как является заголовком окна браузера. В нелокализованных версиях
операционных систем и графических оболочек русский текст содержания элемента TITLE
будет отображаться абракадаброй.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
<TITLE>название документа</TITLE>
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы
многих поисковых систем используют содержание элемента TITLE для создания поискового
образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих
соображений элемент TITLE всегда рекомендуется использовать на страницах Web-узла.
Элемент разметки BASE
Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок
документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить
мишень (окно) загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего
документа.
Разметка гипертекстовых ссылок обычно выполняется как разметка в частично заданных
(относительных) адресах, когда URL задается относительно текущего местоположения
документа.
<A HREF=../next_level/document.html>...</A>
В этом случае в качестве базы по умолчанию выбирается каталог, в котором размещен HTMLдокумент ( ../ ). Такой стиль разметки удобен тем, что при переносе всего дерева документов в
58
другое место не потребуется менять систему гипертекстовых ссылок внутри документов. Кроме
того, распространению этого стиля способствует и сама архитектура World Wide Web.
Наиболее тесные связи между документами задаются только в рамках одного Web-узла. Связей
данного узла с остальными существенно меньше, и их можно прописать непосредственно в
ссылках в полной форме.
Контейнер BASE можно использовать вне документа, в заголовке или теле документа. При
этом область действия базового адреса определяется от места размещения контейнера до
следующего контейнера BASE.
<BASE HREF=http://intuit.ru/start/>
<HTML>
<HEAD>
<BASE HREF=http://intuit.ru/cgi-bin/>
... </HEAD>
<BODY>
<BASE HREF=http://intuit.ru/start/>
... </BODY>
</HTML>
Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть
документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В
этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на
основной сервер. Он оказывается "белой вороной" среди прочих документов Web-узла. При
этом такая схема часто используется в совокупности с запретом на кэширование данного
документа как клиентом (браузером), так и proxy-серверами.
Существуют различия и при определении базового URL по умолчанию при обращении к
страницам, которые различны по своей природе. Если для обычного файла базовым адресом по
умолчанию является адрес каталога, где хранится данный файл, то для страниц, которые
генерируются "на лету", возможны и другие базовые адреса по умолчанию. Например, для
страниц, сгенерированных CGI-скриптом, адресом по умолчанию является URL данного
скрипта. Если из такой страницы снова вызвать скрипт, как частично заданную ссылку, то имя
скрипта будет передано в качестве параметра скрипту, который сгенерировал данную страницу.
<A HREF=http://intuit.ru/cgi-bin/script/intuit.ru?name=value>...</A>
Базовый адрес: http://intuit.ru/cgi-bin/script/intuit.ru
Если скрипт вызовет сам себя по частично заданной ссылке, то он себя не найдет.
Возможность определения мишени загрузки позволяет не указывать атрибут TARGET в теге
начала контейнера A (anchor):
<A HREF=intuit.htm TARGET=left>intuit</A>
Потребность в этом возникает при организации постоянно отображаемых меню. Такое меню
может быть реализовано либо во фрейме, либо в окне. При этом информационные страницы
Web-узла, которые загружаются при активизации гипертекстовых ссылок, будут загружаться в
другое окно или фрейм.
Особенно полезен атрибут TARGET на страницах с вызовом скриптов, если результат работы
скрипта нужно загрузить в определенное окно (фрейм).
59
Тег начала контейнера содержит один обязательный атрибут HREF, и может содержать один
необязательный атрибут TARGET. Синтаксис контейнера BASE в общем виде выглядит
следующим образом:
<BASE HREF="http://www.intuit.ru/intro.html">
<BASE HREF=http://www.intuit.ru/intro.html
TARGET=new>
Применение BASE в современных документах ограничено в силу разных причин. В сложных
случаях можно пользоваться указаниями URL в полной форме.
Элемент разметки ISINDEX
Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от
ранних версий HTML. В HTML 4.0 этот контейнер не определен. Утрата данного контейнера
объясняется широким применением форм и CGI-скриптов. Тем не менее все браузеры его
поддерживают.
Шаблон ввода ключевых слов при наличии данного контейнера в заголовке HTML-документа
отображается в виде дополнительного поля ввода рабочей области браузера, что нарушает
компоновку HTML-страниц, выполненных с применением современных средств разметки.
Больше всего ISINDEX подходит для документов с компоновкой в стиле HTML 2.0.
<HTML>
<HEAD>
<ISINDEX>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Применение элемента ISINDEX
В классическом варианте при использовании ISINDEX список ключевых слов, которые
вводятся в поисковом шаблоне и разделены символом "+", присоединяется к базовому адресу
HTML-документа после символа "?".
http://intuit.ru/isindex.html?keyword+list
Очевидно, что сам HTML-документ не способен выполнить поиск. Это может сделать только
поисковая программа.
Присоединение запроса к документу унаследовано от первого сервера CERN (Conseil Europeen
pour la Recherche Nucleaire, Европейская организация по ядерным исследованиям), в котором
оно использовалось по аналогии с поисковыми серверами Gopher. Современный подход,
основанный на HTML-формах, позволяет указывать URL поисковой программы, что дает
большую свободу при разметке страниц.
Современный синтаксис ISINDEX позволяет применить аналогичный формам подход. Для этой
цели в теге начала контейнера ISINDEX можно указать атрибут ACTION.
<ISINDEX ACTION=/cgi-bin/search.cgi>
60
Однако и традиционная форма контейнера позволяет обращаться к внешним CGI-скриптам.
Сделать это можно либо в совокупности с контейнером BASE, либо с использованием SSI.
В первом случае для всего документа устанавливается базовый URL поисковой программы. Все
URL гипертекстовых ссылок на другие страницы задаются в полной форме или базовый адрес
переназначается после ISINDEX. Это вполне оправдано, если данная страница ничего, кроме
поискового критерия и ссылки на домашнюю страницу Web-узла, не содержит.
<HTML>
<HEAD>
<BASE HREF=http://intuit.ru/cgi-bin/search.cgi>
<ISINDEX>
</HEAD>
<BODY>
<BASE HREF=http://intuit.ru/>
</BODY>
Во втором случае в документ встраивается обращение к CGI-скрипту, который реализует
функции поисковой программы. Такое совмещение — свойство современного подхода к
компоновке поисковых страниц. Как правило, и поисковый шаблон, и результаты поиска
отображаются на одной странице, так как это позволяет корректировать запрос по мере
получения результатов поиска. Встроенный в страницу скрипт анализирует переменные
окружения сервера, и в случае отсутствия запроса может вообще никак не обнаруживать свое
присутствие внутри документа.
Тег начала элемента может содержать два необязательных атрибута: ACTION и PROMPT.
Синтаксис элемента ISINDEX в общем виде выглядит следующим образом:
<ISINDEX [PROMPT=текст] [ACTION=URL]>
Первый необязательный атрибут тега начала ISINDEX — PROMPT. Он позволяет вместо
стандартного приглашения к вводу ключевых слов задать приглашение, которое, по мнению
автора документа, лучше отражает суть поискового шаблона. Например, можно задать
приглашение к вводу ключевых слов на русском языке.
Введите ключевые слова:
Применение атрибута PROMPT
ISINDEX — отмирающий элемент разметки. Однако он определил формат обмена данными
ISINDEX. Данные в этом формате передаются от браузера серверу в случае применения
ISINDEX и в случае прямого указания дополнительных параметров после символа "?" в
гипертекстовой ссылке.
Элемент разметки META
Это наиболее популярный элемент разметки заголовка, более распространен только элемент
TITLE. Такое положение дел объясняется назначением данного элемента разметки. META
содержит управляющую информацию, которую браузер использует для правильного
отображения и обработки содержания тела документа.
Впервые контейнер META был задействован при принудительной перезагрузке документа
браузером через заголовок HTTP-сообщения. В заголовке HTTP-сообщения можно указать
61
оператор refresh. Время, заданное как параметр этого оператора, определяет интервал в
секундах, после которого браузер загружает документ, определенный атрибутом URL данного
оператора. Впервые этот механизм был реализован на сервере CERN, но наибольшую
популярность приобрел при использовании сервера WN (Web-сервер, который был разработан
для платформы Linux).
В контейнере META подобный механизм реализуется следующим образом:
<META HTTP-EQUIV="Refresh" CONTENT="1;
URL=refresh.htm">
В данном случае через одну секунду после загрузки документа браузер должен инициировать
загрузку страницы refresh.htm.
Используя этот механизм, можно построить автоматически перезагружаемую
последовательность страниц. Для этого в заголовке каждой страницы из данной
последовательности следует разместить соответствующий контейнер META.
<META HTTP-EQUIV="Refresh" CONTENT="1;
URL=refreshX.htm">
Заглавная буква "Х" в слове "refreshX.htm" — это цифра номера кадра. На странице нулевого
кадра в этом месте следует указать на первый кадр ( refresh1.htm ), на странице первого кадра
— на второй ( refresh2.htm ) и т.д.
В Windows 95 и Windows NT 4.0 с поддержкой таблиц UNICODE появилась возможность
указывать тип кодировки документа — CHARSET. К сожалению, на многих Unix-платформах
этот механизм не работает, что часто приводит к ошибкам, например в IRIX версий 6.2-6.4.
Скептическое отношение поклонников Unix к этой возможности ничем не подкреплено, так как
основная масса пользователей российской части Internet просматривает документы World Wide
Web в Windows. Для перекодировки на стороне клиента (документ подготовлен в кодировке
cp1251 ) в заголовок документа необходимо включить META -тег следующего вида:
<META HTTP-EQUIV="Content-type"
CONTENT="text/html;
CHARSET=windows-1251">
Приведенный выше пример показывает, как используются операторы заголовка HTTPсообщения. Однако здесь тоже следует быть осторожным. Большинство российских Web-узлов
используют в качестве HTTP-сервера Russian Apache. Эта модификация сервера поддерживает
перекодировку документов "на лету" для правильного отображения на стороне клиента. Russian
Apache сам вставляет в HTTP- заголовок (не путать с HEAD ) директиву Content-type. Если в
документе будет META -элемент c указанием типа кодировки, а Apache перекодировал
содержание, то возможно несоответствие между указанным в META типом кодировки и
реальной кодировкой содержания документа.
Кроме Content-type, можно указать и другие операторы. Например, запретить кэширование
документа. Необходимость в этом возникает при частом обновлении документа или наличии в
нем изменяющихся SSI-вставок. Для запрета кэширования достаточно вставить в заголовок
META -тег вида:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
62
Pragma — это наследие HTTP 1.0. В новой версии протокола HTTP (HTTP 1.1) управление
кэшированием осуществляется через оператор Cache-Control. Для получения такого же
эффекта, как в случае с Pragma, в заголовке HTML-документа достаточно указать:
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-cache">
Новый механизм управления кэшированием и хранением документа на стороне клиента гораздо
более гибок, чем в HTTP 1.0. Например, можно запретить хранение документа после
пересылки:
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-store">
Точно так же можно задать время последней модификации (Last-Modified) или дату истечения
актуальности документа (Expire).
С появлением роботов поисковых машин на META -тег была возложена еще одна функция —
описание поискового образа документа. Наиболее последовательно это было впервые
реализовано в Webcrawler. До этого в качестве поискового образа документа использовался
либо весь список слов документа, либо слова первого абзаца.
Собственно, для описания документа используется два META -тега. Один определяет список
ключевых слов, а второй – реферат (краткое содержание документа), который отображается в
качестве пояснения к ссылке на документ в отчете поисковой машины о выполненном запросе.
Контейнер TITLE здесь также используется в качестве названия документа.
<TITLE>Основы Web-технологий</TITLE>
<META NAME="description"
http-equiv="description"
content="Учебный курс Основы Web-технологий.
Тема: Заголовок HTML-документа. Элемент
разметки META. Дается краткое описание
основных способов применения контейнера META
в заголовке HTML-документа. Рассматривается
управление HTTP-обменом и индексирование
документов.">
<META NAME="keywords" HTTP-EQUIV="keywords"
CONTENT="учебный курс; Web-технология; web;
технология; HTML; язык гипертекстовой разметки;
заголовок HTML-документа; заголовок; HTML;
документ; контейнер; META; элемент; HEAD;
пример; разметка; методика">
При индексировании такого документа содержимое контейнера TITLE и атрибутов CONTENT
контейнеров META после фильтрации попадет в индекс поисковой машины и может быть
использовано для составления запросов. Процесс фильтрации отбракует так называемые stopслова и общие слова. Они не попадут в индекс поисковой машины. В частности, будут
отбракованы предлоги или, если речь идет о тематическом поисковом индексе, например по
технологиям World Wide Web, то в него не попадут: web, Web-технология и т.п.
META -тегом пользуются и программы подготовки документов. Они размещают в нем свой
идентификатор. В общем случае контейнер META выглядит следующим образом:
63
<META [name=имя] [HTTP-EQUIV=имя_HTTP-оператора]
CONTENT=текст>
Практика показывает, что при индексировании можно указывать одновременно и атрибут
NAME, и атрибут HTTP-EQUIV с одинаковыми значениями. Это связано с тем, что одни
роботы индексирования анализируют содержание META -элемента по атрибуту NAME, а
другие — по атрибуту HTTP-EQUIV.
Элемент разметки LINK
Элемент разметки LINK – это результат давно предпринятой попытки придать HTML
академический вид. Согласно теории гипертекстовых систем, все гипертекстовые связи
разделяют на два типа: контекстные и общие. Такое деление чисто условное и определяется
тем, что контекстную связь можно привязать к определенному месту документа, а общую —
отнести только ко всему документу целиком. Если взглянуть на проблему связи чуть шире, то
очевидной становится аналогия с отношениями. Гипертекстовая связь задает отношение на
множестве информационных узлов.
Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web
один из узлов является источником, а второй — мишенью. Собственно, это и отражено в
названии элемента разметки A (anchor), который определяет гипертекстовую ссылку (не путать
с гипертекстовой связью). При этом в контекстной связи один и тот же термин может
идентифицировать разные связи. Например, в контексте содержания конспекта данной темы
слово " HEAD " определяет документ head.htm, который описывает контейнер HEAD и
особенности его применения, а в контексте справочника по данной теме слово " HEAD" будет
означать ссылку на описание синтаксиса этого контейнера.
Общие ссылки нельзя привязать по контексту. Например, два информационных узла находятся
в отношении следования, т.е. при "линейном" просмотре одна Web-страница является
следующей для другой Web-страницы. В этом случае речь идет о страницах целиком, а не об
отдельных их частях. Такой же общей связью является принадлежность к Web-узлу, который
ассоциируется со своей домашней страницей.
В информационно-поисковых системах поисковый термин определяет отношение "быть
заиндексированным данным термином", которое также задает связь соответствующих
документов.
В настоящее время в браузерах не существует единого способа программирования или
определения общих гипертекстовых связей. В течение последних пяти лет W3C строит уже
второй браузер, который должен продемонстрировать возможность программирования окон
меню браузера (вперед, назад и т.п.). Однако производители наиболее популярных браузеров
такой поддержки через HTML-разметку в своих программах не предлагают.
Существенный сдвиг в этом направлении произошел после реализации поддержки описателей
стилей в Netscape Navigator и Internet Explorer четвертых версий. CSS (Cascade STYLE Sheets,
каскадные таблицы стилей) позволяют определять для различных типов гипертекстовых связей
вид гипертекстовых ссылок. При этом можно определять различные типы контекстных ссылок.
Кроме того, впервые нашел осмысленное применение контейнер LINK. Он позволил загружать
внешние описатели стилей:
<LINK REL=stylesheet href="../css/style.css"
TYPE="text/css">
64
В данном случае речь идет о загрузке стилей из файла style.css. При этом стили задаются в
нотации W3C, а не JavaScript, что определяется атрибутом TYPE. В сущности, атрибут REL
определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа,
идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.
В общем случае контейнер LINK имеет следующий вид:
<LINK [REL=тип_отношения] [HREF=URL]
[TYPE=тип_содержания]>
Для разных типов содержания действия по интерпретации элемента разметки будут
различными. В настоящее время идет процесс разработки спецификаций описания метаданных,
где возможно применение элемента разметки LINK.
Элемент разметки STYLE
Элемент разметки STYLE предназначен для размещения описателей стилей. При этом описание
стиля из данного элемента разметки, если оно совпадает по имени класса и/или идентификатору
подкласса со стилем, описанным во внешнем файле, заменяет описание стиля из внешнего
файла. С точки зрения влияния на весь документ, описатели стилей задают правила
отображения контейнеров HTML-документа для всей страницы.
В настоящее время контейнер используется только с одним атрибутом TYPE, который задает
тип описателя стиля. Это может быть либо text/css, либо text/javascript. Если элемент разметки
открыт тегом начала, то он должен быть закрыт тегом конца. В общем виде запись элемента
STYLE выглядит так:
<STYLE TYPE=тип_описания_стилей>
описание стиля/стилей
</STYLE>
Применению стилей в HTML-разметке, а также проектированию Web-узлов с применением
CSS посвящена отдельная глава "Применение каскадных таблиц и стилей".
Элемент разметки SCRIPT
Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript.
Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но и в его теле.
В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для
загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере
SCRIPT:
<SCRIPT TYPE="text/javascript"
SRC=script.code>
Если открыт тег начала, то нужно обязательно использовать тег конца контейнера. В противном
случае, браузер может отобразить только символ "]". Если код не помещен в HTMLкомментарии, то старые версии браузеров (до Mozilla 2) отображают программу перед текстом
страницы. В ряде случаев страница вообще может не отображаться.
В общем виде запись контейнера выглядит следующим образом:
65
<SCRIPT [TYPE=тип_языка_программирования]>
JavaScript/VBScript-код
</SCRIPT>
и
<SCRIPT [TYPE=тип_языка_программирования]
[SRC=URL]>
</SCRIPT>
Существует несколько скриптовых языков: JavaScript, VBScript, JScript. По умолчанию
подразумевается JavaScript. Подробнее с JavaScript и контейнером SCRIPT можно ознакомиться
в курсе "Введение в JavaScript".
6.2.Темы лабораторных занятий.
Лабораторная 1
Лабораторная работа № 0
Тема: Подключение к Интернету. Настройка браузера.
Цель работы: Подключить браузер Internet Explorer через прокси-сервер к Интернету.
Порядок выполнения работы:
Для того чтобы настроить браузер на работу с Интернетом необходимо проделать следующие
операции :
1. Запустить Internet Explorer.
2. Выбрать в меню Сервис Свойства обозревателя…
3. В меню свойства обозревателя выбрать Подключение
66
4. Выбрать Настройка сети…
5. В меню Настройка локальной сети поставить флажок Использовать прокси-сервер.
6. В поле Адрес ввести адрес 192.168.1.253
7. В поле Порт ввести 3128
8. Подтвердить изменения – Применить.
67
Сдача данной лабораторной работы будет зачтена после выполнения второй лабораторной
работы по поиску информации в Интернете.
Лабораторная работа № 1
Тема: Поиск информации в Internet
1. Общие сведения: Известно, что поиск информации в Internet является непростым делом.
Для решения этой проблемы существуют средства поиска ресурсов Internet, которые можно
разделить на несколько категорий: поисковые системы и надстройки над ними; страницы с
поиском по нескольким системам; каталоги (как с возможностью поиска, так и без таковой);
тематические поисковые системы и каталоги.
2. Цель работы:
Научиться применять поисковые системы в Internet.
3. Порядок выполнения работы:
С помощью Internet Explorer выбрать поисковый сервер (www.aport.ru, www.yandex.ru,
www.rambler.ru). Выполнить запрос на поиск информации в соответствии с вариантом,
выбираемом по номеру компьютера.
1) Найти адреса Internet – магазинов (не менее 10)
2) Найти адреса систем электронного трейдинга (не менее 5)
3) Найти адреса бесплатных электронных библиотек (не менее 10)
4) Найти адреса бесплатных почтовых серверов (не менее 10)
5) Найти адреса институтов дистанционного образования (не менее 10)
6) Найти адреса серверов, предоставляющих бесплатное место для сайта (не менее 10)
7) Найти адреса серверов каталогов ресурсов Internet (не менее 10)
8) Найти адреса серверов виртуальных открыток (не менее 10)
9) Найти адреса электронных информационных агентств (не менее 10)
10) Найти адреса электронных экономических изданий (не менее 10)
11) Найти адреса серверов виртуального общения (не менее 10)
12) Найти адреса серверов с рефератами (не менее 10)
Результаты поиска записать для последующего использования в работе №2.
4. Методические указания:
Если браузер выдал сообщение: соединение разорвано или истекло время ожидания, то
можно повторно загрузить страницу с помощью кнопки Обновить.
5. Содержание отчета: список найденных адресов
6. Контрольные вопросы:
1. Что такое гиперссылка?
2. Что такое IP-адрес?
3. Что такое доменное имя?
4. Какие русскоязычные и англоязычные поисковые системы используются в Internet?
5. Что такое сайт?
6. Что такое WWW?
68
Лабораторная работа № 2
Тема: Почтовые службы Internet
1. Общие сведения: Электронная почта является наиболее удобным и быстрым средством
доставки информации в любую точку мира.
2. Цель работы:
Научиться применять почтовые службы в Internet.
3. Порядок выполнения работы:
В
Internet Explorer в адресной строке ввести адрес одного из почтовых серверов (
mail.rambler.ru, www.mailru.com, mail.yandex.ru). Зарегистировать почтовый ящик, обязательно
указать полные имя и фамилию владельца.
Создать письмо с результатами работы №1 и послать по адресу, указанному
преподавателем.
4. Методические указания: Для того, чтобы зарегистрировать электронный почтовый ящик
необходимо щелкнуть по ссылке Зарегистрируйтесь (Регистрация, Получить адрес …). В
регистрационной форме необходимо заполнить все поля. Пароль обычно должен быть не менее
чем из 6 символов.
5. Содержание отчета: письмо с результатами поиска в работе №1
6. Контрольные вопросы:
Какие почтовые серверы можно использовать?
Какая информация указывается в заголовке письма?
Как пользоваться адресной книгой?
Какая кодировка используется в русскоязычных почтовых службах?
Лабораторная работа №3
1. Запустите Notepad и начните с этого...
<HTML>
</HTML>
Каждое предложение выше называется меткой - tag. Есть начальная метка и конечная метка.
Чтобы сделать конечную метку, необходимо только добавить / к начальной метке. Большинство
меток, но не все, имеют конечную метку.
Представляйте себе, что метки говорят браузеру, или еще лучше предоставляют ему команды.
Так Вы только что сообщили браузеру 'это начало HTML документа' (<HTML>) , а 'это конец
HTML документа' (</HTML>). Теперь Мы должны поместить некоторое наполнение между
этими метками.
Каждому документу HTML необходима пара меток HEAD - Шапка.
<HTML>
<HEAD>
</HEAD>
</HTML>
69
Единственная вещь, которой мы должны коснуться в метках HEAD (пока) - метки TITLE.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
А большая часть страницы должна быть внутри меток BODY.
<HTML>
<HEAD>
<TITLE></TITLE>
<BODY>
</BODY>
</HEAD>
</HTML>
Еще одна вещь, дайте вашему документу титул - заголовок..
<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
<BODY>
</BODY>
</HEAD>
</HTML>
Теперь сохраните это, не как текстовый документ, а как html документ. Сохраните это как
page1.html где-нибудь в новой папке. Если вам все еще неясно, как это сделать, тогда в вашем
окне Notepad щелкните File и затем Save as.
Вы сделали скелетный документ HTML. Это - минимально требуемая информация для web
документа и всех web документов, которые должны содержать эти базисные компоненты.
2. Для подчеркивания выполняющихся действий мы будем писать только то, что находится в
пределах меток <BODY> . Мы будем опускать метки <HTML>, <HEAD> и <TITLE>. Само собой
разумеется, Вы сохраняйте их в вашем документе.
<BODY>
<BODY>
Наберите что-то, действительно свежее.
<BODY>
Something really cool
<BODY>
Всякий раз, когда Вы делаете изменения в вашем документе, обязательно сохраняйте его, а
затем нажимайте кнопку Reload на панели вашего браузера. В некоторых случаях, нажатие
только кнопки Reload не вызывает действий ... в таком случае нажмите SHIFT + Reload.
<BODY BGCOLOR="#FFFFFF">
Something really cool
<BODY>
70
FFFFFF
- Компьютерный код для белого цвета. Вы можете определять изображение для фона.
<BODY BACKGROUND="swirlies.gif">
Something really cool
<BODY>
Вы найдете это изображение (swirlies.gif) в папке с именем pics.
Возможно довольно очевидно, что изображение мозаично.
Давайте возвратимся к простому старому белому экрану..
<BODY BGCOLOR="#FFFFFF">
Something really cool
<BODY>
Мы можем выделять фрагменты полужирным шрифтом.
<BODY BGCOLOR="#FFFFFF">
Something really <B>cool</B>
<BODY>
Мы сообщаем браузеру: с <B> начать полужирный текст и завершить его на </B> .
Тот же самый принцип применяется к курсиву ...
<BODY BGCOLOR="#FFFFFF">
Something <I>really</I> <B>cool</B>
<BODY>
...и подчеркиванию.
<BODY BGCOLOR="#FFFFFF">
<U>Something</U> <I>really</I> <B>cool</B>
<BODY>
Обратно снова к простому белому экрану.
<BODY BGCOLOR="#FFFFFF">
Something really cool
<BODY>
Мы можем использовать метки и в комбинации.
<BODY BGCOLOR="#FFFFFF">
Something really <I><B>cool</B></I>
<BODY>
Это - пример вложенных меток. Если Вы собираетесь использовать пары меток в комбинации
(возможно Вы будете делать это редко), то для избежания путаницы браузера, они должны
быть вложены без перекрытия.
<THIS><THAT></THIS></THAT>
<THIS><THAT></THAT></THIS>
Перекрывающиеся метки .... плохо
Вложенные метки .... хорошо
71
Очень полезный тип текстового эффекта - шрифт символов одинаковой ширины (mono-spaced)
или TeleType.
<BODY BGCOLOR="#FFFFFF">
<TT>Something really cool</TT>
<BODY>
Каждый символ использует одинаковое горизонтальное пространство.
Это обычный тип->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
Это одноширинный тип
(monospaced) ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
мер шрифта... Это довольно просто!
Мы можем так же изменить раз
В начале добавьте метку <FONT> ...
<BODY BGCOLOR="#FFFFFF">
Something really <FONT>cool</FONT>
<BODY>
Затем определите атрибут размера - SIZE.
<BODY BGCOLOR="#FFFFFF">
Something really <FONT SIZE=6>cool</FONT>
<BODY>
Шрифты поступают 7- ми размеров:
крошечный
малый
1
2
регулярный дополнительный Большой
3
4
5
Реальный Вопли!
6
7
Во первых <МЕТКА> сообщает браузеру что сделать .. АТРИБУТ помещается внутри <МЕТКИ> и
сообщает браузеру, как сделать это..
Второе замечание о значениях по умолчанию- это значение, которое браузер принимает, если
Вы не сообщили ему другое. Хороший пример - размер шрифта. Заданный по умолчанию
размер шрифта 3. Если Вы не сообщаете ничего, шрифт будет размером 3.
Размер транслируется в 3 для наших целей и цвет черный. Теперь мы можем определять другие
имена шрифтов, отличные от значения по умолчанию. Например ARIAL и COMIC SANS.
<BODY BGCOLOR="#FFFFFF">
Something really <FONT FACE="ARIAL">cool</FONT>
<BODY>
72
Шрифт будет отображаться только в том случае, если шрифт вашей программы просмотра
установлен на компьютере пользователя.
Но Вы можете несколько себя застраховать, определяя более чем один шрифт. Только делайте
так ... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>.
Браузер ищет вначале ARIAL. Если находит его, то использует его. Если нет, то ищет HELVETICA.
Если не может найти и этот шрифт, то ищет LUCIDA SANS. И если не может найти и этот шрифт,
то использует заданный по умолчанию шрифт.
Вы можете изменять цвет шрифта, если находите это приятным.
<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000">cool</FONT>
<BODY>
Мы можем, конечно использовать больше чем один АТРИБУТ в <МЕТКЕ> ......
<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT>
<BODY>
Добавим еще!
<BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="7">cool</FONT></B></I></U>
<BODY>
Заметим еще раз, что многократные метки должны быть вложены.
<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>
Не имеет значение, какая метка является первой. Если Вы хотите сделать что-то красным и
полужирным, то Вы должны сделать одно и потом другое. Вы можете размещать метки в
любом порядке, каком хотите. Типа ....
<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>
Самый быстрый способ запутать браузер, не говоря уже о вас, состоит в наложении меток ...
<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>
Браузер имеет заданные по умолчанию параметры настройки для цвета текста, цвета связи,
цвета активной связи и цвета посещенной связи. Значения по умолчанию - ...
Текст - черный
Связь - синий
Активная связь - красный
Посещенная связь - фиолетовый
Вы можете изменять их, если Вам необходимо.
Вы можете изменять эти значения по умолчанию для всего документа в метке <BODY>.
73
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000"
ALINK="#008000">
Something really cool
<BODY>
Вы теперь знаете почти все, что необходимо делать с текстом в вашем документе. Вы можете
теперь делать Большие красные символы или малые полужирные символы, Вы
можете использовать другие Шрифты, или моноширинные шрифты.
Вы можете сделать и так roll
ercoaste
r!
3. Начнем изучение способов работы браузера.
Сначала примеры ... ...
<BODY BGCOLOR="#FFFFFF">
Something really cool
like an icecube!
<BODY>
<BODY BGCOLOR="#FFFFFF">
Hey!
What's
going
on
here??
<BODY>
Браузер не распознает форматирование. Если Вы не сообщаете ему иначе, он только
отображает символы в устойчивом потоке. Если Вы хотите начать новую строку, Вы должны
использовать прерывание строки.
<BODY BGCOLOR="#FFFFFF">
Hey!<BR>
What's<BR>
going<BR>
74
on<BR>
here??
<BODY>
Метка <BR> просто говорит начни новую строку. Метка <BR> подобна <P>. Она делает точно то
же самое, но она разрывает строку.
<BODY BGCOLOR="#FFFFFF">
Hey!<P>
What's<P>
going<P>
on<P>
here??
<BODY>
Это примеры автономных меток. Не требуется конечная метка. Вы не можете использовать их
больше чем одну раз подряд. Другими словами, определение <P><P><P> не даст Вам 3 пустых
строки, а даст Вам только одну. Как можно добавить несколько пустых строк?
Просмотрите это во первых...
<BODY BGCOLOR="#FFFFFF">
Something
really
<BODY>
cool
75
Браузер не распознает больше чем 1 пробел. Сначала это могло бы все казаться довольно
глупым, чтобы быть способом, но действительно, лучше иметь такой способ. Это дает Вам
абсолютный контроль над видом документа.
Имеется изящный небольшой код, который означает для браузера «пробел» ->  
Испытайте его...
<BODY BGCOLOR="#FFFFFF">
Something        
really        
cool
<BODY>
Символ & означает, что мы начинаем специальный символ, ; означает конец специального
символа и литеры между ними составляют абревиатуру предназначения. Имеются шесть таких
специальных символов. (Обратите внимание: они должны быть всегда строчными буквами)






  ( неразрывающийся пробел)
< (< символ меньше чем)
> (> символ больше чем)
& (& амперсанд)
" (" маркер кавычек)
­ ( мягкий дефис)
Вы не должны использовать их все время, только когда набор реального символа может
запутать браузер.
Браузер будет отображать ваш текст в устойчивом потоке, если Вы не сообщите ему другое о
прерываниях строки и т.д. Он уменьшит любые пустые области до 1 пробела. Если Вы хотите
большее количество пробелов, Вы должны использовать код пробела ( ). Если Вы
нажимаете Return (или Enter) во время набора, браузер интерпретирует это как пробел ..., если
там уже нет пробела.
76
Затем очень полезная небольшая метка. Она сама довольно хорошо объясняет.
<BODY BGCOLOR="#FFFFFF">
<CENTER>Something really cool</CENTER>
<BODY>
Вы можете центрировать одно слово или страницу полностью. Все что расположено между
метками <CENTER> центрируется.
Как сделать многократные пустые строки? Делайте прерывание строки для каждой пустой
строки.
<BODY BGCOLOR="#FFFFFF">
Something really<BR>
 <BR>
 <BR>
 <BR>
 <BR>
 <BR>
cool
<BODY>
Давайте введем изображение в web страницу. Мы собираемся использовать рисунок
приведенный ниже. Еще раз, щелкните правой кнопкой мыши, чтобы сохранить его с этой
страницы или копировать его из папки pics..
Вы определяете изображение меткой <IMG> (image).
<BODY BGCOLOR="#FFFFFF">
<IMG>
<BODY>
Мы должны также определить источник и размер.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
<BODY>
Позвольте заметить, источник определяет не только какое изображение, но и где хранится это
изображение.Вышеупомянутый источник "copper.gif" означает, что браузер будет искать
77
изображение с именем copper.gif в той же самой папке (или каталоге), где непосредственно
расположен html документ. Ниже - несколько диаграмм..
означает, что
изображение находится в той же
самой папке, где и html документ,
запрашивающий его..
SRC="copper.gif"
SRC="images/copper.gif"
означает, что изображение из
папки нижнего уровня, по
сравнению с папкой html
документа, который запросил его.
Это можно продолжить по уровням
вниз настолько это необходимо.
означает,
что изображение находится в папке
верхнего уровня, по сравнению с
папкой html документа, который
запросил его..
SRC="../copper.gif"
означает,
что изображение в папке на два
уровня выше, чем папка html
документа, который запросил его.
SRC="../../copper.gif"
SRC="../images/copper.gif"
означает, что изображение и html
документ в папках одного уровня..
SRC="../../../other/images/copper.gif"
Имеется другой способ, которым это может быть выполнено. Все ссылки к изображениям могут
иметь их полный URL. Например:
http://www.hair.net/~squiggie/LottzaStuff/other/images/copper.gif
Вы просите, почему использование относительного URL имеет намного больше смысла, чем
абсолютного (полного) URL? Потому что Вы можете формировать ваш узел локально и все
78
связи будут работать. Когда ваши страницы завершены, Вы передаете целый набор на ваш
сервер и все прекрасно будет работать. Кроме того, это проще для браузера, чтобы получить
изображения, и ваша страница загрузится быстрее. Имеется ли какая-либо причина
использовать абсолютный URL? Несомненно, если изображение постоянно сохраняется на
другом сервере.
Кое-что Вы должны знать об изображениях и их размерах.
Испытайте это...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif">
<BODY>
Как Вы можете видеть, браузер выясняет насколько большое изображение сам. Почему тогда
нужно беспокоиться о размерах? Без вхождения в детали, это заставляет вашу страницу
загружаться быстрее, потому что это проще для браузера..
Отметьте размеры снаружи...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=200 HEIGHT=68>
<BODY>
или
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=20 HEIGHT=100>
<BODY>
Вы можете определять любые размеры, которые Вы хотите и отменять соответствующие
размеры. Рассмотрите эту небольшую красную точку -> <-. Это квадрат 2x2. Посмотрите,
что можно сделать с ней ...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
<BODY>
4. Давайте изучим связи.
79
Это действительно очень просто. Мы построим связь с Yahoo.
Начните с этого...
<BODY BGCOLOR="#FFFFFF">
Go to Yahoo!
<BODY>
Затем добавьте пару меток анкеров.
<BODY BGCOLOR="#FFFFFF">
Go to <A>Yahoo!</A>
<BODY>
Добавьте URL и связь построена! (URL - Universal Resource Locator - Универсальный Локатор
Ресурсов). По существу это только адрес.
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
<BODY>
Давайте сделаем еще одну связь.
<BODY BGCOLOR="#FFFFFF">
Go to Netscape!
<BODY>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/">Netscape!</A>
<BODY>
Связь электронной почты создается таким же способом. Мы только используем адрес
электронной почты вместо адреса страницы.
<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A>
<BODY>
Мы можем сделать изображение связью, если хотим. Используя пример выше 'Go to Netscape!'
мы просто подставим метку <IMG> вместо слова Netscape!
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82
HEIGHT=68></A>
<BODY>
80
Часто спрашивают, как избавиться от раздражающей синей рамки вокруг изображения, когда
Вы устанавливаете эту связь? Просто ...
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68
BORDER=0></A>
<BODY>
Когда Вы включаете изображения в вашу страницу, не забудьте, что они содержат достаточно
много данных и следовательно могут не спешить загружаться. Один способ уменьшать размер
(под размером мы понимаем Кб) состоит в том, чтобы уменьшить размерности. Урезание
длины и ширины на половину дает результат 1/4 размера изображения в Кб. Также Вы можете
уменьшать число цветов. Например:
Размерность 272 x 394
# цветов - 229
Размер- 21.5 Kб
Размерность 144 x 269
# цветов - 15
Размер - 4.7 Kб
81
Первое изображение качественнее, но нужно подумать прежде чем использовать его. Если ваша
страница постоянно требует его при загрузке, то ваши посетители возможно покинут ее (из за
времени ожидания) и они не увидят ничего.
Другая опция, которая может быть использована, если Вы хотите предложить alot изображений,
должна обеспечить эскизы, с которыми связаны больше размерные версии изображений. Мы
хотим предложить три очень хороших изображения автомобилей.
Щелкните на эскизе, чтобы увидеть увеличенное изображение
Первое дело, которое Вы должны выполнить - вызвать ваш редактор изображений и сделать
меньшие версии ваших изображений. Это также помогло бы уменьшить цветную глубину.
Пункт создания меньшей версии очень важен. Многие пытаются сделать эскиз, простым
уменьшением размерности в метке <IMG>. Они все равно загружают полное изображение в
меньшее пространство. Что Вам необходимо сделать - создать меньшую копию изображения и
использовать ее как связь с большим изображением.
Давайте сделаем это. Мы используем Corvette (он синий). Поместите полноразмерное
изображение и малое изображение в вашу рабочую папку. Начните с вашей метки <IMG> .
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
<BODY>
Добавьте ваши метки <A> .
<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60><A>
<BODY>
Добавьте URL и связь создана!
<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60><A>
<BODY>
82
Вы можете, если Вы хотите, избавиться от синей рамки. Хотя, Вы можете и сохранить ее, чтобы
ваши читатели знали, что это - связь.
<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0><A>
<BODY>
Другой способ связывания состоит в том, чтобы связываться не только со страницей, но и с
определенной частью страницы.
Во первых начните с места (ячейки), куда люди будут переноситься по Вашему желанию.
Выберите слово и заключите его в меткиe <A> .
Затем дайте имя анкера - места (ячейки) атрибутом NAME.
<A NAME="upabit">Добавьте</A> URL
Вы маркировали место (ячейку). Теперь оно может быть вызвано.
Теперь начните формировать связь.
Щелкните <A HREF="page1.html#upabit">здесь</A> , чтобы перенестись...
И это - все, что требуется для построения такой связи!
5. Мы рассмотрели манипуляции с текстом и шрифтом, изображения, связи. Это основы, но
пока нет цельного отображения.
Самое время сообщить Вам о разрешающей способности экрана. Экран, на котором мы
работаем - 640 на 480 пикселей. Многие используют 800x600 и даже 1024x768. Мы уверены,
что есть пользователи и других экранов. Необходимо учитывать это, чтобы ваша страница
смотрелась и на других экранах. Вот варианты экрана текущего домашней страницы для
различных разрешающих способностей.
640x480
800x600
1024x768
Это очень хорошая идея проверить вашу страницу на других разрешающих способностях. Ваше
тщательно скомпонованное размещение может разваливаться при других разрешающих
83
способностях. Имеется удобная небольшая MS Игрушка, называемаяd Quickres , которая
позволяет Вам легко включать экранные разрешающие способности.
Теперь мы собираемся рассмотреть пару инструментальных средств форматирования,
доступных для Вас. Вначале один - <BLOCKQUOTE>. В основном этот инструмент перемещает
ваши поля обеих сторон.
<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
WE THE PEOPLE of the United States, in order to form a more perfect Union,
establish Justice, insure domestic Tranquility, provide for the common defense,
promote the general Welfare, and secure the Blessings of Liberty to ourselves and
our Posterity, do ordain and establish this Constitution for the United States of
America.
</BLOCKQUOTE>
<BODY>
Мы уверены, сначала, когда была изобретена
метка <BLOCKQUOTE> , она предназначалась для
возвышенной цели, типа цитирования глубоких
мыслей авторов. Но сейчас она обслуживает более
мирскую цель - простое выравнивание..
Другой очень полезный небольшой инструмент - LIST - Список. Есть упорядоченные ORDERED списки и неупорядоченные UNORDERED списки.
Это упорядоченный список
1. большой
2. малый
3. короткий
Это неупорядоченный список



красный
синий
старый
84
4. длинный

новый
Сначала, мы сформируем НЕупорядоченный список.
Начните с этого...
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<BODY>
Обратите внимание - технически мы не начинали формировать список. Это - только своего рода
заголовок.
Добавьте пару меток неупорядоченного списка.
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
</UL>
<BODY>
Добавьте элемент списка.
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
</UL>
<BODY>
Добавьте еще несколько ...
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</UL>
<BODY>
85
Как делать упорядоченный список? Просто! Замените метку <UL> на <OL>.
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<OL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</OL>
<BODY>
Другой тип списка - список определений.
aardvark
Норное, питающееся муравьями Африканское млекопитающее. И, как знает каждый,
первое слово в каждом уважающем себя словаре.
Начните с этого...
86
<BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
<BODY>
Затем добавьте заголовок определения...
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
</DL>
<BODY>
И элемент определения.
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the Constitution, nor
prohibited by it to the States, are reserved to the States respectively, or to the
people.
</DL>
<BODY>
Как завершающий штрих, Мы находим приятным делать заголовок определения полужирным.
Этого не требуется, но думаем, что он выглядит таким намного лучше.
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>10th Amendment</B>
<DD>The powers not delegated to the United States by the Constitution, nor
prohibited by it to the States, are reserved to the States respectively, or to the
people.
</DL>
<BODY>
87
Другой небольшой прием - Горизонтальная Линия - Horizontal Rule.
<BODY BGCOLOR="#FFFFFF">
<HR>
<BODY>
Мы имеем несколько опций доступных для использования...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
<BODY>
88
Это само собой понятно.
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
<BODY>
Мы можем управлять и толщиной...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
<BODY>
И мы можем делать ее сплошной линией.
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
<BODY>
89
Помните, что браузер не понимает форматирование, он только отображает текст в устойчивом
потоке? Вид подобный этому ...
<BODY BGCOLOR="#FFFFFF">
\|/
(@ @)
+----oOO----(_)-----------+
|
BARRY GOLDWATER
|
|
for
|
|
President
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
<BODY>
...отобразится так...
Меткой <PRE> (preformat), мы можем положить конец этому и иметь вещи отображенными так,
как мы их набираем.
<BODY BGCOLOR="#FFFFFF">
<PRE>
\|/
(@ @)
+----oOO----(_)-----------+
|
BARRY GOLDWATER
|
90
|
for
|
|
President
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
<BODY>
* Обратить внимание, что использован моноширинный шрифт.
Последняя метка, которую мы собираемся обсудить - это комментарий.
<BODY BGCOLOR="#FFFFFF">
<!--This is a comment-->
This is not<P>>
A comment can be placed anywhere in the document and the browser will ignore
everything inside the brackets. You can insert hidden messages, <!--Hi Mom!-->
notes to yourself, <!--Pick up milk--> or write a helpful message to someone
looking at the source of your page.<!--Copy anything off me and you're dead meat!->
<BODY>
This is not
A comment can be placed anywhere in the document and the browser will ignore
everything inside the brackets. You can insert hidden messages, notes to yourself,
or write a helpful message to someone looking at the source of your page.
91
Чтобы быть абсолютно чистым, комментарий должен начаться с <!-- и заканчиваться -->
Вы можете даже помещать другие метки html в комментарий и они будут игнорироваться.
Браузер будет только сохранять игнорирование все, пока это не видит -->
Вы теперь знаете все основные метки, которые вам необходимы для создания web страниц!
Есть ли еще метки? Да и много. Но вы имеете приблизительно 70 % вооружения, которое вам
необходимо для создания web страниц
Лабораторная работа №4
Для создания таблицы в ваших web документах используются метки <TABLE> !
В основном речь пойдет о трех 3 метках ...
<TABLE>
Основная метка. Используется, чтобы сообщить браузер «это таблица», наряду с
некоторыми атрибутами типа размера, ширины рамки и некоторых других.
<TR>
TableRow определяет горизонтальную строку <TD> (TableData) ячеек.
<TD>
Определяет индивидуальный блок или ячейку в строке таблицы.
Перефразировав: таблица составлена из строк, которые в свою очередь составляют ячейки.
<--Это---
ст
ро
ячейка
ка
ячейка
--Таблицы>
ячейка
В этой работе нам будут необходимы несколько html документов. Запустите Notepad и
скопируйте следующее для начала:
<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Сохраните это как table1.html в некоторой папке. Создайте для этого новую папку, потому что
мы будем помещать туда и другое. Запустите ваш браузер. Используйте его, чтобы открыть
table1.html и запустите Notepad рядом с браузером. Таким способом Вы можете создавать
ваши страницы и почти мгновенно просматривать результаты вашей ручной работы.
92
Наберите ваши метки таблицы. Они просто означают «начало таблицы» и «окончание
таблицы».
<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>
Каждая таблица нуждается по крайней мере в одной строке.
<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
И конечно каждая строка должна иметь по крайней мере одну ячейку данных..
<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Теперь, только для концентрации внимания на основных моментах и экономии времени мы
будем записывать только то, что находится в метках таблицы. Мы не буддем учитывать шапку,
тело, заголовок и т.д. с этого момента. Само собой разумеется, Вы сохраняете их в вашем
документе.
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
93
Теперь Вам необходимо что - то поместить в эту ячейку. Давайте поместим Ed в <TD> ячейку.
<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Вначале, чтобы это выглядело как таблица, дайте ей рамку. Каждый раз, когда Вы делаете
изменения и хотите видеть, как они выглядит, Вы можете нажимать кнопку Reload на вашем
браузере.
<TABLE BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Как насчет большей рамки?
<TABLE BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Как насчет ОГРОМНОЙ рамки?
<TABLE BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
А как без рамки?
<TABLE BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Вы могли видеть, значение по умолчанию без рамки.
94
Давайте остановимся пока на скромной рамке.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Когда размеры не определены, таблица столь велика, как требуется.
<TABLE BORDER=3>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Ed, Rick and Tom
Определение размера таблицы довольно просто хотя.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Ed, Rick and Tom
Как относительно этого?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Ed, Rick and Tom
Давайте избавимся пока от друзей Ed.
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Давайте уменьшим размер таблицы до 50 % окна браузера.
95
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Теперь определим ширину 50 вместо 50 %.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Теперь 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Как Вы можете видеть, имеются два способа определения ширины таблицы. Какой стиль
использовать для этого сейчас не существенно.
Мы можем также определять высоту.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Мы можем управлять, где должны появиться данные в ячейке.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ed</TD>
</TR>
</TABLE>
Ed
96
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Ed</TD>
</TR>
</TABLE>
Ed
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Ed</TD>
</TR>
</TABLE>
Ed
Как Вы можете видеть, значение по умолчанию - ALIGN=LEFT.
Мы можем также управлять и вертикальным расположением данных в ячейке..
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Ed</TD>
</TR>
</TABLE>
Ed
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD>
</TR>
</TABLE>
Ed
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>
Ed
Значение по умолчанию - середина.
Изображения также можно размещать в ячейке данных таблицы и можно управлять их
размещением. В папке, которая содержит этот документ, Вы найдете малое изображение с
именем ed.gif. Скопируйте его в рабочую папку (в ту, куда Вы поместили tables1.html).
Вставьте метку IMG для Ed.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></TD>
97
</TR>
</TABLE>
полагаю, что теперь самое время, подчеркнуть, что хорошая практика включить размерные
атрибуты со всеми метками изображения. Я не буду говорить о деталях, но выполнение этого
правила упрощает загрузку для браузера и позволяет избегать некоторые неожиданности.
Давайте вернемся к простому старому Ed.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>
Ed
И для ясности и простоты давайте удалим атрибуты выравнивания. Мы знаем, что случится,
потому что мы знаем значения по умолчанию. Между прочим, МЕТКА сообщает браузеру что
выполнить. АТРИБУТ следует внутри МЕТКИ и сообщает браузер как сделать это.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Теперь мы сделаем нашу таблицу больше.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Друг Ed а Tom хочет себе собственную ячейку.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
</TR>
</TABLE>
Ed
Tom
98
Когда браузеру не даны команды, каждая ячейка может (но не всегда) быть отличной по
размеру. Прекрасная идея всегда определять размер каждой ячейки. Удостоверитесь, что ваша
арифметика правильна или люди будут видеть не то, что Вы хотите!
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Ed</TD>
<TD WIDTH=150>Tom</TD>
</TR>
</TABLE>
Ed
Tom
Эти атрибуты WIDTH могут также быть выражены в процентах.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Ed</TD>
<TD WIDTH=50%>Tom</TD>
</TR>
</TABLE>
Ed
Tom
Дадим Ed большую ячейку, так как он был здесь с самого начала.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=80%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
</TR>
</TABLE>
Ed
Tom
Теперь Rick. Мы должны решить, сколько строк мы выделим ему, полагаю, что 20 % нормально. Удостоверитесь, что скорректировали Ed также.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
</TABLE>
Ed
Tom
Rick
Добавим еще три ячейки.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
99
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom
Rick
Larry
Curly
Mo
Атрибуты WIDTH первой строки переносят на вторую строку.
Если Mo убрать, мы все еще будем иметь абсолютно хорошую таблицу, но только с пустой
ячейкой.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>
</TABLE>
Ed
Tom
Larry
Curly
Rick
Давайте поместим Mo обратно и удалим все атрибуты за исключением BORDER.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
100
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
Затем - пара атрибутов с именами CELLPADDING и CELLSPACING. Оба используются в метке
<TABLE>. CELLPADDING - количество пустого пространства между рамкой ячейки и содержанием
ячейки.
<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom
Rick
Larry
Curly
Mo
По умолчанию значение для этого атрибута 1.
Если мы подставляем CELLSPACING вместо CELLPADDING мы получаем несколько отличный
эффект.
<TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
101
</TABLE>
Ed
Tom
Rick
Larry Curly Mo
Значение по умолчанию для атрибута CELLSPACING - 2..
Мы, конечно, можем использовать эти атрибуты в комбинации.
<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom
Rick
Larry
Curly
Mo
Transfer interrupted!
Сотрем CELLPADDING и CELLSPACING и возвратимся к нашей простой небольшой таблице.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
102
Ed
Tom Rick
Larry Curly Mo
Новое свойство браузеров - способность определять цветные фоны для ячеек, строки или целой
таблицы. Вы используете BGCOLOR точно так же как в метке <BODY>.
<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
<TABLE BORDER=3>
<TR BGCOLOR="#FF9999">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR BGCOLOR="#99CCCC">
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
<TABLE BORDER=3>
<TR BGCOLOR="#FFCCFF">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
103
<TR>
<TD BGCOLOR="#FF0000">Larry</TD>
<TD>Curly</TD>
<TD BGCOLOR="#3366FF">Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
Еще одно о цветных фонах таблицы ... <TD> bgcolor отменяет <TR> bgcolor, а <TR> bgcolor
отменяет <TABLE> bgcolor. Например:
<TABLE BORDER=3 BGCOLOR="#FF6633">
<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
Позвольте минуту для пояснений. Браузер должен интерпретировать команды, которые Вы
даете ему, самым лучшим возможным способом. Если что-то не было определено так или
иначе, большинство браузеров пробует найти привлекательное решение. Самое лучшее, что Вы
можете сделать как автор, Вы должны определить столько, сколько можете, особенно те
параметры, которые определяют желаемый вид вашей страницы. Также важно просмотреть
вашу работу браузерами, которыми фактически пользуются ваши читатели. Так как
большинство людей использует Netscape, хорошо начать с него. Вы можете также иметь копии
пары других популярных браузеров, чтобы убедиться, что Ваша страница и в них выглядит
правильно.
Другой аспект просмотра - разрешающая способность экрана. Кто-то работает на экране
640x480, а кто-то использует 800x600, некоторые имеют и 1024x768. Это простое различие
может привести к серьезным проблемам с вашим проектом страницы. Есть небольшая утилита
называемая QuickRes , которая может изменять разрешающую способность вашего экрана
щелчком кнопки. Это не плохая идея просмотреть ваши страницы с различными
разрешающими способностями.
104
Теперь мы поиграем с COLSPAN (Диапазон Столбца) и ROWSPAN (Диапазон Строки). Давайте
уберем Tom из таблицы.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Rick
Larry Curly Mo
Это только оставило пустое пятно, а Rick сдвинулся и заполнил пустоту.
Если мы хотим, чтобы Ed действительно занял ячейку Тома и сделал ее частью своей области,
мы должны использовать атрибут COLSPAN для этого.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Rick
Larry Curly Mo
Чтобы подчеркнуть, что браузер пробует найти привлекательное решение, давайте заставим Ed
захватить два столбца, но мы поместим Tom обратно. Мы преднамеренно делаем это только,
чтобы увидеть, как браузер обрабатывает это.
<TABLE BORDER=3>
105
<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
Хорошо... давайте уберем Тома снова.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Rick
Larry Curly Mo
Уберем Rick и разместим Ed в центре ячейки.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>Ed</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
106
Larry Curly Mo
Все другое кодирование html, между прочим может быть использовано в ячейке. Мы будем
делать Ed <STRONG> как в примере.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>Ed</STRONG></TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Larry Curly Mo
Сделаем связь с какой - либо местной страницей.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.itech.ru/">Ed</A></TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Larry Curly Mo
Теперь избавьтесь от всего этого наполнения, возвратите Tom и Rick и займемся <ROWSPAN>.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
107
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Larry Curly Mo
Поскольку Вы, возможно, предположили, что <ROWSPAN> - точно как <COLSPAN>, только строки
вместо столбцов. Если мы удалим Larry и позволим Ed занять его ячейку, то в результате...
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom Rick
Curly Mo
И конечно, эти метки могут также использоваться в комбинации.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>
<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed
Tom
Curly Mo
108
Теперь мы собираемся попробовать несколько вещей только для того, чтобы посмотреть, что
произойдет. Есть небольшой неупорядоченный список
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Это весь прекрасно и превосходно, но что, если мы хотим поместить это здесь ......
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Потому что мы хотим, чтобы список был рядом с изображением пирога.
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Для этого мы могли бы использовать таблицу.
При изучении или формировании таблицы, всегда удобнее, когда рамки включены.
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Давайте сформируем это за один шаг одновременно. Это действительно довольно просто.
Начните с малого Ed
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
109
Ed
Замените Ed на неупорядоченный список.
<TABLE BORDER=3>
<TR>
<TD>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>
</TR>
</TABLE>
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Помните, в отсутствии других команд, таблица будет создана такого размера, чтобы быть
достаточной для содержания данных. Так в этом образце действительно нет необходимости в
атрибуте размера.
Затем мы развернем таблицу на полную ширину окна браузера.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>
</TR>
</TABLE>
Компоненты Яблочного Пирога:
110




Яблоки
Мука
Сахар
Корица
Теперь мы должны создать вторую ячейку. Мы хотим, чтобы левая ячейка была немного
меньшей чем правая.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>
</TR>
</TABLE>
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Теперь можно скопировать изображение пирога - applepie.gif в вашей рабочей папке.
Вставьте изображение в первую ячейку.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>
111
</TR>
</TABLE>
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
Выравним изображение пирога вправо и выключим атрибут рамки.
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>
</TR>
</TABLE>
Компоненты Яблочного Пирога:




Яблоки
Мука
Сахар
Корица
А можно иметь таблицу внутри таблицы??
Давайте пробовать. Начните с малого Ed.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Сделайте таблицу большой.
112
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed
Замените Ed на полную таблицу "малый Ed"
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Ed
Наша таблица может также быть очень легко центрирована.
<CENTER>
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
Ed
Имеется ситуация, где таблица может решать общую проблему. Это идея для анимации
большого gif. Изображение, которое Вы хотите использовать, довольно большое. Так как Вы
знаете, что анимированный gif - в основе ряд gif -ов, отображаемых один за другим. Ваши
читатели не будут в восторге от 700Кб неповоротливого изображения свалившегося на них. Изза размера, их браузер зависнет, пробуя отобразить этот gif. Решение. Разрежте на фрагменты и
отобразите все изображение как таблицу.
113
Пример:
Рисунок Boris Vallejo
Имеется та же самая таблица со включенным CELLSPACING.
114
Единственная часть изображения, которая анимируется - глаза.
Есть html код для этой таблицы. ( Caption - заголовок вообще не требуется и он не имеет
никакого влияния на остальные части таблицы)
<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD ROWSPAN=3><IMG SRC="dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>
<TR>
<TD><IMG SRC="anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>
<TR>
<TD><IMG SRC="dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>
</TABLE>
Лабораторная работа №5
В этой работе рассмотрим, как добавить интерактивность в ваши web документы посредством
метки <FORM> . С меткой формы можно добавлять к вашей web странице гостевую книгу,
формы заказов, оборы, получать обратную связь или что-то подобное.
Основная конструкция html формы это...
<FORM> начала формы
<INPUT> запрос на информацию одним из нескольких различных способов...
<INPUT> ...по желанию может быть много входных областей
</FORM> конец формы
115
Откройте Notepad и следуйте пунктам лаб. работы. Скопируйте и вставьте с этой страницы
следующее для начала:
<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Сохраните это как form1.html в какой-нибудь папке (пользователи Windows 3.x сохраняют это
как form1.htm). Запустите ваш браузер. Используйте его, чтобы открыть form1.html и запустите
Блокнот и браузер рядом. Таким способом Вы можете создавать ваши страницы и почти
мгновенно просматривать результаты вашей ручной работы. Если при нажатии кнопки
перезагрузки все не сбрасывается, нажимайте кнопку перезагрузки при нажатой клавише Shift.
Наберите ваши метки формы.
<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
Затем мы должны сообщить браузеру, куда послать данные, которые мы накапливаем и как
послать их. Есть две основные функции, которые Вы можете выполнять. 1) Вы можете
посылать данные cgi сценарию для обработки или 2) Вы можете иметь данные, присланные по
электронной почте Вам. Что касается первой, кто бы ни написал, сценарий может сообщать
Вам, как данные должны быть посланы. Вторая, или форма mailto должна иметь следующие
атрибуты в метке <FORM>.
<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-formurlencoded">
</FORM>
</BODY>
</HTML>
Эта строка очень важна. Единственная вещь, которую Вы должны сделать - вставить ваш адрес
электронной почты после mailto: Остальное должно быть написано точно как показано. Слова в
FORM, METHOD, POST и ACTION не должны быть набраны прописными буквами, но должен
быть пробел между каждым атрибутом ... между FORM & METHOD, между POST & ACTION,
и между .com" & ENCTYPE.
К сожалению данные будут посланы Вам в этом 'только для компьютера' формате .....
FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA
Вам будет необходима программа для перевода его в 'человеческий' формат ...
FORMNAME=New Entrant
NAME=R.U. Havinfun
116
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA
Пример выше иллюстрирует что, форма не больше чем входные имена (NAME, ADDRESS, etc)
спаренные с входными значениями (R.U. Havinfun, 1313 Mockingbird Lane, etc).Единственная
реальная переменная - как мы получаем значения.
Лабораторная 6
Теоретическая часть: HTML-документ — это просто текстовый файл с расширением *.htm
или *.html).
Вот самый простой HTML-документ:
Вы
можете посмотреть этот пример прямо сейчас.
Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем
не обязательно. Более того, браузеры просто игнорируют символы конца строки и
множественные пробелы в HTML-файлах. Поэтому пример мог бы выглядеть вот так:
Как
видно из примера, вся информация о форматировании документа сосредоточена в его
117
фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>)
называется меткой (по-английски — tag, читается "тег").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть
закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>,
<BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие
дополнительную информацию о том, как браузер должен обработать текущую метку. Более
подробно метки и их атрибуты рассмотрим в ходе выполнения лабораторной работы.
Ход работы:
Создание простейших файлов HTML.
1. Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
2. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с
элементами форматирования:
3.
Сохраните файл под именем schedule.html.
4. Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
5. Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и
найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название
Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.
Управление расположением текста на экране.
1. Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на
разных строках:
2.
Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save).
3. Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Webстраницу используя клавишу F5 или с помощью кнопки Обновить (Refresh).
Предыдущие шаги не вызвали никаких видимых изменений в документе html — при
отображении гипертекста броузеры автоматически размещают текст на экране, не
118
принимая во внимание встречающиеся в файле переводы строк и идущих подряд
пробелов. Существуют специальные команды, выполняющие перевод строки и
задающие начало нового абзаца. Кроме того, существует команда, которая запрещает
программе броузера каким-либо образом изменять форматирование текста и позволяет
точно воспроизвести на экране заданный фрагмент текстового файла.
тег перевода строки <BR> отделяет строку от последующего текста или графики. тег
абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно
выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).
4. Внесите изменения в текст файла HTML:
Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью
броузера обновленную страницу.
Выделение фрагментов текста.
теги выделения фрагментов текста позволяют управлять отображением отдельных
символов и слов. Существует три тега выделения фрагментов текста: <B> : </B> — для
выделения полужирным, <I> : </I> — для выделения курсивом, <U> : </U> — для
выделения подчеркиванием.
1. Внесите изменения в файл schedule.html:
2.
Посмотрите новую полученную Web-страницу.
3. Попробуейте использовать вложение тегов:
<I><B>Расписание</B></I> <I>занятий</I> <U> на вторник</U>
Изменение размера текста
Существует два способа управления размером текста, отображаемого броузером:
использование стилей заголовка;
задание размера текущего шрифта;
2. Внесите изменения в файл schedule.html:
o
o
3.
Просмотрите обновления через браузер.
119
4. Внесите следующие изменения изменения в файл schedule.html:
5.
Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег
<FONT>.
Гарнитура и цвет шрифта
тег <FONT> предоставляет возможности управления размером, начертанием и цветом
текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу
<FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо
записать <FONT FACE="ARIAL">.
Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X".
Вместо Х надо подставить либо название цвета (в кавычках), либо его
шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно
представить этот цвет разложенным на три составляющие: красную(R), зеленую (G),
синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в
формате RGB приведены в таблице:
Цвет
black | черный
RRGGBB
000000
white | белый
FFFFFF
red | красный
FF0000
green | зеленый
00FF00
azure | бирюзовый
00FFFF
blue | синий
0000FF
gray | серый
A0A0A0
purple | фиолетовый
FF00FF
yellow | желтый
FFFF00
brown | коричневый
996633
orange | оранжевый
FF8000
violet | лиловый
8000FF
1. Внесите изменения в файл schedule.html:
120
2.
Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Выравнивание текста по горизонтали
С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если
не оговаривать способ выравнивания, все элементы в документе будут выравниваться по
левому краю и иметь неровное правое поле (см. Рис.2). Современные броузеры для
выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца
или заголовка.
ALIGN=CENTER — Выравнивание по центру
ALIGN=RIGHT — Выравнивание по правому краю
ALIGN=LEFT — Выравнивание по левому краю
2. Внесите изменения в файл schedule.html:
o
o
o
3.
Просмотрите обновления
Задание цвета фона и текста
Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>.
Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для
всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и
просмотренных ссылок.
1. Внесите изменения в файл schedule.html:
121
Дополнительные материалы для самостоятельного изучения по курсу
1. Общие сведения об Internet
a. Краткая история Internet
http://college.biysk.secna.ru/diplom/IST-Int.htm (Ru)
b. Internet2
http://www.internet2.edu/about/aboutinternet2.html (En)
http://www.internet2.edu/about/faq.html (En)
2. Web
a. Понятие гипертекста
http://www.tula.net/tgpu/new/New/informatic/g4.htm
b. Определение гипертекста
http://www.litera.ru/slova/viesel/viesel.htm#o1
c. Гиперсвязи и гиперссылки
http://www.ccn.org.ru/manuals/HTML/html.html.ru
d. Методические указания "Работа с поисковыми системами с использованием
Microsoft Internet Explorer 5".
http://www.imi-samara.ru/stud/studymat/public/Mng-NetTech-Search.doc
e. Принципы работы поисковых систем. Поисковая система Яндекс. Раздел "Как искать
в Яндексе"
http://www.yandex.ru/info/search.html
f. Принципы работы поисковых систем. Поисковая система Яндекс. Раздел "Каталог
Яндекса"
http://www.yandex.ru/info/cat1.html
g. Понятие языка HTML и HTML-страницы. Методические указания "Введение в язык
HTML". Глава 1.
http://www.imi-samara.ru/stud/studymat/public/Mng-NetTech-HTML.doc
3. Электронная почта
a. Что такое спам
http://www.antispam.ru/spam.shtml
b. Как предотвратить попадание адреса в спамерские базы рассылки
http://ezhe.ru/ses/nosik2.html
c. Очерки спама
http://ezhe.ru/ses/verbit.html
d. Смайлики - мусор или веяние времени
http://www.exler.ru/expromt/10-11-2000.htm
http://www.exler.ru/expromt/13-11-2000.htm
4. USENET
Конференции Usenet
http://book.promo.ru/book/article6_5/book_print_t
5. Различные Internet-сервисы
a. Что такое IRC в разделе "Статьи" на сайте
http://www.neora.ru/
b. Что такое ICQ
http://www.icqfoto.ru/icq/w_icq.htm
6. Безопасность
Филипп Зимерман "Кодирование с открытым ключом для всех": раздел "Как PGP работает"
http://filipp-zimerman.viv.ru/cont/pgpdoc/1.html
122