МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ рф

ФГБОУ ВПО «ЧЕЧЕНСКИЙ ГОСУДАРСТВЕННЫЙ ПЕДАГОГИЧЕСКИЙ ИНСТИТУТ»

«Утверждено»

Декан физико-математического факультета

«___»_________ 2014г.

Кафедра информатики

УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС

«ДИСТАНЦИОННОЕ ОБРАЗОВАНИЕ»

Составитель

Магомадова З.С.

Грозный 2014

УМК рекомендован на заседании кафедры информатики « __ » _________ 2014г.

Зав. информатики __________________________ /Хатаева Р.С./

Составитель:___________________________________Магомадова З.С.

СОДЕРЖАНИЕ

Программно-планирующий блок. Рабочая программа

1. Пояснительная записка. .............................................................................................4

Требования ГОС ВПО к обязательному минимуму содержания основной

образовательной программы подготовки специалиста………………………..………5

1.2. Цель и задачи………………………………………………………………………..5

1.3. Место дисциплины в структуре ООП…………………………………………….6

1.4. Требования к уровню освоения содержания дисциплины ……………………...7

2. Тематический план

2.1. Объём дисциплины и виды учебной работы………………………………...…….7

2.2. Распределение учебного времени по разделам и темам ……………………….…7

3. Содержание дисциплины

3.1. Содержание лекций ………………………………………………………………....8

3.2. Содержание практических занятий…………….. ………… …………………......9

3.3. Содержание самостоятельной работы студентов.………………………………..10

3.4. Вопросы для промежуточного и итогового контроля …………………..……….16

3.5. Критерий оценки знаний…………………………………………………………..11

3.6. Список основной и дополнительной литературы………………………………..11

Учебно-методический блок

4.1. Теоретическая часть…………………………………………………………………13

4.2. Практикум. Тематика заданий……………………………………………………...25

Глоссарий………………………… ……………………………………………………..26

Блок наглядно-дидактического материала

Лекции-презентации………………………………………………………………................31

1. Программно-планирующий блок. Рабочая программа.

   1. ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

Учебно-методический комплекс составлен в соответствии с основной образовательной программой подготовки студентов, обучающихся по специальности «Прикладная информатика в экономике».

В УМК включено содержание курса лекций, практических занятий. УМК также содержит формулировки основных определений и список вопросов для зачетов и экзаменов.

Предназначен для студентов, обучающихся по специальности «Прикладная информатика в экономике».

В результате изучения курса «Дистанционное образование» обучающиеся должны знать:

- принципы построения ЭОР;

- состав и принципы функционирования электронных пособий;

- принципы построения и использования ЭОР;

- принципы создания мультимедиа-технологий;

Курс «Дистанционное образование» должен воспитать у студентов навыки:

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

- навыками создания программных приложений;

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

Требования к обязательному минимуму содержания дисциплины, определенные ГОС ВПО

В результате изучения дисциплины студент должен:

• иметь представление об общих проблемах и задачах в области ПП;

• иметь представление об основных принципах работы ПП;

• знать наиболее широко используемые прикладные редакторы;

• иметь представление по разработке информационных мультимедиа-ресурсов;

1.2. Цели и задачи преподавания дисциплины

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

В рамках курса "мультимедиа" понимается как собирательное понятие для интерактивных технологий, обеспечивающих работу с неподвижными изображениями, анимированной компьютерной графикой, аудио, видео, текстом, а также технология, позволяющая объединить подобную разнородную информацию в единое целое. Средства мультимедиа рассматриваются как оборудование, обеспечивающее воспроизведение и хранение информации или непосредственно сам носитель мультимедиа-информации (CD-ROM, DVD и т.д.). Технология мультимедиа рассматривается как совокупность программных средств, позволяющих создавать мультимедийные приложения.

Место дисциплины в структуре ООП:

Дисциплина «Дистанционное образование» относится к базовой части профессионального цикла. Для освоения дисциплины студенты используют знания, умения и виды деятельности, сформированные в процессе изучения дисциплин «Информационные системы», «ИКТ в образовании», «Программирование».

Требования к уровню освоения содержания дисциплины

Подготовка специалиста по прикладной информатике подразумевает ознакомление с назначением, принципами функционирования и работой ППП. Для обеспечения цели обучения решаются следующие задачи:

• формирование знаний, умений и навыков в области стандартов представления информации и принципов их использования для объединения в единое целое разнородных информационных ресурсов;

• овладение умениями и навыками по разработке мультимедийных информационных ресурсов;

• формирование знаний, умений и навыков в области разработки простейших приложений.

В ознакомительном порядке необходимо рассмотреть вопрос о защите данных.

2. Тематический план

2.1. Объем дисциплины и виды учебной работы.

Номер

семестра

Учебные занятия

Число курсовых проектов (работ)

рассч. заданий

Форма итоговой аттестации

(зачет, экзамен)

Общий объем

в том числе

Аудиторные

самост.

работа

всего

из них

лекции

Практич.

лаборат.

6

75

15

30

30

15

Всего

75

2.2. Распределение часов курса по формам и видам работ для специальности ПИ-3.

№

Наименование разделов и тем

Всего часов

В том числе аудиторных

Сам.раб

всего

лекции

прак

раб.

Лаб.раб

СРС

1

Программные продукты

20

25

5

10

10

15

2

Мультимедиа-технологии

20

25

5

10

10

15

3

Разработка ПП

35

25

5

10

10

15

4

Всего

75

75

15

30

30

45

Лекции . Дистанционное образование

1. Введение в курс ДО.

2. Типы программ дистанционного образования

3. Характеристика дистанционного образования

4. Модели ДО.

5. Составляющие дистанционного образования

6. Дистанционные технологии

7. Процесс разработки дистанционных курсов (ДК)

8. Элементы дистанционного учебного курса

9. Структура дистанционного учебного курса

Лекция1. Введение.

Сегодня выделяют два основних направления влияния ИКТ на образовательные процессы:

1. внедрение дистанционного обучения, которое базируется на новых методах организации процесса обучения,

2. применение ИКТ для повышения качества анализа, проектирования при построении традиционных форм обучения.

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

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

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

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

Базовые принципы, на основе которых создаются системы дистанционного образования:

1. доступность обучения. При хроническом недостатке времени учиться надо все больше. Процесс обучения при ДО может начинаться когда угодна и заканчиваться когда угодно.

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

3. достоверность сертификации знаний. Широкое использование методик оценки знаний, основанных на тестировании.

Лекция 2. Типы программ дистанционного образования

Учебные заведения, предлагающие программы дистанционного образования можно разделить на три категории:

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

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

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

Лекция 3. Характеристика дистанционного образования

Существуют три основные характеристики качественной программы дистанционного образования для взрослых студентов:

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

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

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

Основные характеристики дистанционного обучения:

1. Детальное планирование деятельности обучаемого (постановка задач, целей, разработка учебных материалов).

2. Интерактивность (между обучаемым и преподавателем, между обучаемым и учебным материалом, групповое обучение).

3. Мотивация (организация самостоятельной познавательной деятельности)

4. Модульная структура дистанционного обучения (обучаемый должен иметь возможность четко осознавать свое продвижение от модуля к модулю).

Лекция 4. Модели ДО.

I модель. Обучение по типу экстерната. Обучение, ориентированное на школьные или вузовские экзаменационные требования, предназначается для учащихся и студентов, которые по каким-то причинам не могут посещать очные заведения. Это фактически заочная форма обучения экстерном.

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

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

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

V модель. Автономные обучающие системы. Обучение в рамках подобных систем ведется целиком посредством телевидения или радиопрограмм, CD-ROM-дисков, а также дополнительных печатных пособий.

VI модель. Неформальное, интегрированное обучение на основе мультимедийных программ. Это программы самообразования. Они ориентированы на обучение взрослой аудитории - тех людей, которые не смогли закончить школу. Подобные проекты могут быть частью официальной образовательной программы, или специально ориентированы на определенную образовательную цель, или нацелены на профилактические программы здоровья.

Основные цели моделей дистанционного образования:

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

2. Получить аттестат об образовании, ту или иную квалификационную степень на основе результатов соответствующих экзаменов (экстернат).

3. Дать качественное образование по различным направлениям школьных и вузовских программ.

Лекция 5. Составляющие дистанционного образования

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

1. Учебный центр (учебное заведение), осуществляющий необходимые функции организационной поддержки, также именуемый как провайдер дистанционного обучения;

2. Информационные ресурсы - учебные курсы, справочные, методические и другие материалы;

3. Средства обеспечения технологии дистанционного обучения (организаци­онные, технические, программные и др.);

4. Преподаватели-консультанты, курирующие дистанционные курсы, име­нуемые тьюторами;

5. Обучающиеся, по-прежнему называемые студентами.

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

- поддержка учебных курсов;

- доставка учебного материала студентам;

- поддержка справочных материалов (библиотека);

- консультации;

- контроль знаний;

- организация общения студентов (коллективные формы обучения).

Лекция 6. Дистанционные технологии

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

При кейс-технологии учебно-методические материалы комплектуются в спе­циальный набор (кейс). Этот набор пересылается учащемуся для самостоя­тельного изучения. Общение с преподавателями-консультантами осуществ­ляется в созданных для этих целей региональных учебных центрах. Считается, что при достаточной мотивации обучаемый в состоянии самостоятельно изучить и освоить значительный объем материала по широкому кругу дисциплин, если такое обучение подкреплено содержательным кейсом.

С 40-х годов начинаются эксперименты по использованию отличных от почты средств доставки учебного материала - радио, магнитофонные лен­ты, телевидение. Процесс обучения дополняется не­прерывным процессом самообразования с использованием записанных на те или иные носители или транслируемых по радио и телевидению лекций. TV-технология, как следует из ее названия, основана на использовании те­левизионных лекций.

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

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

Кроме того, получение большого объема учебно-методических материалов по каналам Интернета обходится обучаемому значительно дороже, чем при обычной почтовой рассылке. Для распространения больших объемов ин­формации традиционно используются компакт-диски. Большая информа­ционная емкость компакт-дисков (около 700 Мбайт) в сочетании с просто­той и дешевизной тиражирования делает весьма эффективной рассылку учебно-методических материалов на таких носите­лях посредством обычной почты.

Сегодня, бесспорно, самым современным и перспективным средством тех­нологической поддержки дистанционного обучения являются интернет-тех­нологии. Однако, говоря о дистанционном образовании как об эффективной системе, интернет-технологии целесообразно рассматривать в сочетании с CD-ROM-технологиями. Содержательная часть курса (content) может и должна поставляться на компакт-дисках, что обеспечивает дешевизну и независимость от каналов связи. А Интернет целесообразно использовать в ДО для обновления информации, тестирования и общения с обучаемыми. Описанный подход составляет основу Web-CD-технологии.

Лекция 7. Процесс разработки дистанционных курсов (ДК)

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

Комплект учебно-методических материалов ДК должен разрабатываться соответственно принципам:

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

2. Учебные материалы в цифровой форме с использованием гипертекста должны удовлетворять требованию простоты ориентации студентов при перемещении по ссылкам. В предисловии к учебным материалам необходимо объяснить условные обозначения ссылок и дать советы относительно рациональных приемов навигации.

3. ДК должен предусматривать общение студентов с преподавателем и между собой.

4. ДК не является электронной копией печатных учебников или простым компьютерным учебником. Информационно-коммуникационные технологии (не являясь самоцелью) могут и должны эффективно использоваться для достижения целей учебного процесса.

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

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

Лекция8. Элементы дистанционного учебного курса

Составляющими дистанционного учебного курса являются:

- информационные ресурсы;

- средства общения;

- система тестирования;

- система администрирования.

Информационные ресурсы. Важнейшим компонентом дистанционного курса являются информационные ресурсы, т.к. в них сосредоточена содержатель­ная часть - контент (content). Контент включает:

□ учебный материал (конспекты лекций, демонстрационные материалы и т. п.);

□ дополнительные информационные материалы (комментарии преподава­теля, ответы на часто задаваемые вопросы и т. п.);

□ библиотеку ресурсов (рекомендованная литература, списки Web-ресурсов по теме курса и т. п.);

□ предметный и/или тематический словарь (глоссарий);

□ программу обучения (академический календарь); и т. д.

Средства общения. Средства общения обеспечивают процесс взаимодейст­вия обучаемого как с учебным центром, в частности с преподавателем, так и с другими обучающимися.

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

Традиционно здесь выделяются электронная почта e-mail (особенно рас­сылки), доски объявлений, виртуальные конференции, видео- и аудио-трансляции, виртуальные семинары и обсуждения.

Базовые механизмы, за счет которых можно организовать эффективные средства общения, условно разделяют на асинхронные и синхронные, кото­рые получили название offline и online соответственно.

Асинхронные средства не требуют у обменивающихся сторон постоянного соединения. К таким средствам можно отнести: e-mail и построенные на основе e-mail автоматические рассылки (так называемые mail-lists), доски объявлений типа Bulletin Board System (BBS), offline-конференции типа "эхо" FidoNet и т. п. Необходимо отметить, что с развитием телекоммуника­ций роль таких средств снижается. Однако при традиционно низком каче­стве телекоммуникаций в России их использование - единственное, что позволяет сделать систему дистанционного обучения эффективной.

Синхронные средства предполагают одновременные согласованные действия сторон - один говорит, другой слушает в то же самое время.

Все рассматриваемые online-средства предполагают наличие прямого выхода в Интернет и базируются так или иначе на сервисах, существующих в сети Интернет. Наиболее эффективными являются online-конференции, позволяющие поддерживать множество различных форм общения в процессе ДО: семинары, обсуждения, обмен опытом, проведение научных конференций. К новым и многообещающим средствам относятся интернет-трансляции видео- и аудиоматериалов и интернет-телефония.

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

- средства обработки результатов тестирования;

- интерактивные тесты;

- график прохождения тестов.

Система администрирования. Система администрирования обеспечивает дос­туп к личному делу, доске объявлений администрации, интерактивным ан­кетам и пр.

Лекция 9. Структура дистанционного учебного курса

Домашняя страница курса включает: описание курса; расписание.

Материалы курса:

• гипертекстовое оглавление курса;

• программа курса;

• терминологический словарь (Glossary);

• поиск по материалам учебника (Search);

• сводные материалы;

• печать материалов.

Средства взаимодействия:

• объявления - доступные всем студентам курса;

• персональный почтовый ящик;

• чат (Chat) - online-аудитория;

• доска для рисования (Whiteboard) - графический редактор типа Paint, содержимое окна которого оказывается доступным другим участникам online-аудитории;

• проверка знаний;

• задания;

• предварительное тестирование - самопроверка;

• тестирование знаний.

Персональные данные студента:

• указания для студента;

• статистика учебных занятий;

• персональные страницы.

Отметим, что студенту учебные материалы предоставляются как гипертекстовые учебники, как и на CD-ROM для автономного изучения. Последнее обстоятельство позволяет передавать большие объемы мультимедийной информации наиболее дешевым и эф­фективным способом, не связанным с проблемами пропускной способности телекоммуникационных каналов. Важными элементами обучения являются система полнотекстового поиска по материалам учебных курсов, глоссарий, конспекты учебников и средства вывода необходимых разделов на печать. Среди средств online-общения нельзя не отметить "Доску для рисования" (Whiteboard) - развитый инструмент для обмена информацией с помощью графических изображений, создаваемых участниками дистанционного обу­чения в окне браузера подобно тому, как это может происходить у обычной доски при обсуждении того или иного вопроса на семинаре в процессе очного обучения.

Лекции, Практикум и Лабораторный минимум:

Лекция 1-2. Первое знакомство

Цель пособия -- используя средства HTML и JavaScript, научиться строить полезные компьютерные приложения, которые можно было бы запускать на локальном компьютере у себя дома, в школе, или на базе полученных знаний построить собственную диалоговую страничку в Интернете.

Простейшая HTML-страничка

Сейчас вы читаете текст, который показывает браузер, выполняя программу, написанную на языке HTML. Некоторые слова в этом тексте выделены цветом и подчеркнуты. Указатель мыши, попадая на такие выделения, превращается из обычного курсора в указующий перст: это ссылка! Достаточно щелкнуть на ссылке мышкой, как текущий текст на экране заменится тем, на который ссылка запрограммирована.

Устройство простейшей HTML-программы будет изучено на примере, результат выполнения которого браузером можно посмотреть здесь.

Вот текст HTML-программы, которая показывает эту страничку:

<HTML>

<HEAD>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<TITLE>Упражнение 1TITLE>

HEAD>

<BODY>

<H1>Первый HTML-документH1>

<HR>

<P>

Корова не похожа на лошадь.

А лошадь не похожа на корову.

Именно это сходство

мы и берем за основу.

P>

BODY>

HTML>

начало HTML-документа

начало заголовка

информация о документе

название документа

конец заголовка

начало тела

заголовок

горизонтальная линия

начало абзаца

абзац

конец абзаца

конец тела

конец HTML-документа

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

Тег <HTML> должен открывать программу, а тег HTML> -- закрывать ее.

Между этими двумя основными тегами располагается головная часть программы (заголовок программы) и ее тело:

<HTML>

заголовок программы

тело программы

HTML>

Заголовок программы

В этом блоке (<HEAD>... HEAD>) описываются общие правила интерпретации HTML-документа в целом и содержится вспомогательная информация о документе.

Команда:

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

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

Между парой тегов <TITLE> и TITLE> располагается имя HTML-документа. Это имя браузер использует в заголовке окна Windows, в котором показывает документ. Щелкните мышкой на следующей ссылке и найдите текст "Упражнение 1" в заголовке окошка браузера.

Посмотреть документ "Упражнение 1"

В окошке браузера Microsoft Internet Explorer вы должны увидеть:

Заголовок окошка браузера Netscape Navigator выглядит так:

Тело программы

Между тегами <BODY> и BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа.

Наша простая программа использует следующие команды:

<H1>...H1>

-- заголовок

<HR>

-- горизонтальная линия

<P>...P>

-- абзац

Заголовки

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

Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название -- это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав -- это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня. Параграфы -- пункты, обозначенные заголовками четвертого уровня.

В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции

<Hn>текст заголовкаHn>

Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка.

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

Это заголовок 1 уровня

1.1Это заголовок 2 уровня

1.1.0Это заголовок 3 уровня

1.1.0.0Это заголовок 4 уровня

1.1.0.0.0Это заголовок 5 уровня

1.1.0.0.0.0Это заголовок 6 уровня

Использовать заголовки нужно очень аккуратно в соответствии с его логическим уровнем в структуре документа. Не следует использовать команды Hn для выделения обычного текста. Они применяются именно для заголовков.

История о том, как ребята пошли в лес за грибами, может иметь такую структуру (справа от заголовка проставлен его уровень):

В лес за грибами

1

1.21. Сборы

1.32

1.42. Дорога к лесу

1.52

1.63. В лесу

1.72

1.7.03.1. Встреча на полянке

1.7.13

1.7.23.2. Муравейник

1.7.33

1.7.43.3. Грибная роща

1.7.53

1.84. Возвращение домой

1.92

Горизонтальная линия

Линия -- простейший графический элемент, который умеет строить браузер. Горизонтальная линия задается тегом <HR>, и этот тег не имеет парного закрывающего. Браузер, выполняя эту команду, выведет на экран такую черту:

Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия выделяет заголовок в нашем примере "Упражнение 1".

Абзац

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

Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как программируются абзацы на HTML. Как они выглядят, вы уже видите в этом тексте: как правило браузер использет не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами <P> и P>, между которыми помещается текст. Фактически работа тега <P> сводится к выводу перед текстовым фрагментом пустой строки. А вот парный тег P> просто игнорируется браузером, поэтому его можно и не писать.

Посмотрите в "Упражнение 1" и в тексте, который вы сейчас читаете, как выводятся абзацы на экран:

• Абзац выравнивается по левому краю.

• Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов вы поместите в HTML-программе.

• Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда вы перешли на новую строку в HTML-программе.

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

Браузер выполняя программу (интерпретируя HTML-текст) формирует на экране документ, который видит пользователь.

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

Когда рисуют на Бейсике или Си, есть возможность вывести элемент в любое место экрана по своему усмотрению. HTML-программы таким свойством не обладают. Браузер не умеет работать с экранными координатами.

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

Окно нашего "Упражнения 1" может, выглядеть так:

Или так:

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

Открыть документ "Упражнение 1"

Вы видите, что линия укорачивается или удлиняется в зависимости от размеров окна.

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

Абзац выводится так, чтобы поместиться в окне. При этом браузер не обращает внимание на то, как размещается абзац по строкам в HTML-тексте.

Все эти "причуды" браузера заставляют новичка на вопрос "Как работает браузер?" ответить кратко: "Плохо!". Однако отмеченные минусы -- это лишь плата за универсальность HTML-программ. И надо сказать, плата не такая высокая.

Обозначенные ограничения оборачиваются положительной стороной HTML, делая его независимым от компьютерной платформы (DOS, Windows, Unix, MacOs...) и параметров видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA,...), в частности, от количества экранных точек. Это означает, что ваш HTML-документ способны увидеть все люди, на компьютерах которых установлена программа-браузер. И становится неважным какой тип компьютера и какой тип операционной системы предпочитает конкретный пользователь. Именно это свойство HTML-программ играет такую важную роль в глобальной компьютерной сети Интернет, где представлены все мыслимые типы компьютеров и операционных систем.

1.9.0Улучшенная HTML-страничка

В программе стихотворение написано, как ему и полагается на 4 строчках:

<P>

Корова не похожа на лошадь.

А лошадь не похожа на корову.

Именно это сходство

мы и берем за основу.

P>

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

<P>Корова не похожа на лошадь.

<P>А лошадь не похожа на корову.

<P>Именно это сходство

<P>мы и берем за основу.

Результат можно посмотреть здесь.

Получилось! Однако, пустые строки смотрятся не очень красиво.

Хорошо, не буду больше испытывать ваше терпение! HTML имеет средство для задания принудительного перехода на новую строку внутри абзаца.

Принудительный разрыв строки

Команда BR заставляет браузер продолжить вывод абзаца с новой строки. Тег <BR> не имеет парного.

Посмотрите, как теперь выглядят наши стихи.

Красиво! Это потому, что вывод стихов записан так:

<P>

Корова не похожа на лошадь.<BR>

А лошадь не похожа на корову.<BR>

Именно это сходство<BR>

мы и берем за основу.

Осталось написать только заголовок стихотворения и имя автора. Вот теперь стихи смотрятся, как в книге:

Окончательный вид документа

А вот текст HTML-программы, которая показывает эту страничку:

<HTML>

<HEAD>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<TITLE>Упражнение 2TITLE>

HEAD>

<BODY>

<H1>Улучшенный HTML-документH1>

<HR>

<H2>СходствоH2>

<P>Пит Хейн (перевод Н.А.Прохоровой)

<P>

Корова не похожа на лошадь.<BR>

А лошадь не похожа на корову.<BR>

Именно это сходство<BR>

Мы и берем за основу.

BODY>

HTML>

начало HTML-документа

начало заголовка

информация о документе

название документа

конец заголовка

начало тела

заголовок 1 уровня

горизонтальная линия

заголовок 2 уровня

короткий абзац

абзац с принудительными

разрывами строк

конец тела

конец HTML-документа

Нажмите кнопку "Сброс", затем выберите верные ответы на вопросы.

1. Что такое HTML-программа?
   

2. Кто выполняет HTML-программу?
   

3. Записывая на HTML абзац, Петя Умников между двумя соседними словами поставил пять пробелов. Сколько пробелов увидит он в браузере?
   

4. Записывая на HTML свое имя, Иван Гавриков написал так:

<P>

Иван

Гавриков

P>

Как покажет этот текст браузер?

5. Какая из трех программ задает вывод текста в две строки:

   программа 1

   программа 2

   программа 3

   <P>

   Иван<BR>

   Гавриков<BR>

   P>

   <P>

   Иван<BR>

   Гавриков

   P>

   <P>

   Иван<BR>Гавриков

1. Проведите экспериментальную работу с документом "Упражнение 2". Меняя размеры окна, посмотрите, как браузер показывает текст с принудительным разрывом строк.
   Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?

2. Если на вашем компьютере установлено несколько разных программ-браузеров, проведите опыты задания 1 в каждом из них. Возможно результаты будут немного отличаться, так же, как и внешний вид исходного документа. Как вы думаете, почему?

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

Лекция 3-4. Красивые документы

Один и тот же текст может выглядеть по-разному

Вы никогда не задумывались над тем, как устроен текст в книге? Речь идет, конечно, не о содержании, а о внешнем виде текста на странице. Такие вещи часто уплывают из внимания. Однако, оформление текста либо помогает чтению, либо делает его утомительным.

Посмотрите два представления одного и того же текста на экране.

• Вид 1

• Вид 2

Вероятно, реакция на первый вариант была такой "Это не текст, а какой-то ужастик!". Вы не можете себе представить, как часто попадаются в Интернете страницы оформленные подобным образом. Давайте не будем поддаваться соблазну использовать многочисленные возможности HTML по принципу "чем больше, тем лучше". Гораздо ближе к истине умеренное утверждение "чем проще, тем приятнее глазу". Главное -- не пестрота и многообразие, а хороший вкус и единый стиль.

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

Структура, стиль и внешний вид текстового документа

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

Структуру текста лучше всего продумать заранее. Можно рекомендовать следующий способ оформления:

1. Запишите заголовок для всего документа. Он должен быть самым крупным (тег <H1>) и выровнен по центру в строке.

2. Разделите документ на главные части (главы). Заголовки глав выравниваются по левому краю и делаются немного меньше заголовка документа (тег <H2>.

3. При необходимости главы разделите на параграфы (заголовки <H3>), параграфы на пункты (заголовки <H4>). Все заголовки документа, кроме его названия, выравниваются по левому краю.

4. Текстовый фрагмент, обозначенный заголовком, разбейте на абзацы (тег <P>). Абзацы должны быть небольшими и содержать законченную мысль.

5. В каждом абзаце используйте одни и те же приемы оформления:

   • нормальный размер шрифта;

   • полужирный шрифт для выделений слов или коротких фраз;

   • курсив для выделения текстовых (обычных) ссылок или цитирования (название книги, газеты, статьи...)

   • смещение большой цитаты вправо от левой границы текста.

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

Программирование вывода текста

Перейдем от общих рекомендаций к вопросу о том, как их можно выполнить средствами HTML.

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

Порядок следования атрибутов в теге не важен.

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

Например, тег, рисующий горизонтальную линию, может содержать атрибут size, изменяющий толщину линии. Если этот атрибут не задан, горизонтальные линии имеют в браузере толщину в два (или три, зависит от браузера) пиксела.

Задавая разные параметры атрибуту size, можно получить целую коллекцию линий, разных по толщине:

команда

вид линии на экране

<HR size=1>

<HR>

<HR size=5>

<HR size=10>

Замечание

По умолчанию браузер рисует линии "объемными". Можно вывести линии "плоскими", если использовать атрибут noshade:

команда

вид линии на экране

<HR size=1 noshade>

<HR noshade>

<HR size=5 noshade>

<HR size=10 noshade>

Полный список атрибутов тега <HR> расположен здесь.

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

<HTML>

<HEAD>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<TITLE>Вид 2TITLE>

HEAD>

<BODY bgcolor=silver text=black>

<H1 align=center>Пример оформления текстаH1>

<HR>

<H2>Сборник газетных вырезокH2>

<P>

Коллекцию открывает заметка из газеты

"<CITE>СтанокCITE>".

<BLOCKQUOTE>

<P>

Действительно, в отделе "<CITE>Что случилось за

деньCITE>" нонпарелью было напечатано:

<FONT color=maroon>

<BLOCKQUOTE>

<H3 align=center>Попал под лошадьH3>

<SMALL>

<P>

Вчера на площади Свердлова попал под лошадь

извозчика N 8974 гр.О.Бендер. Пострадавший

отделался легким испугом.

SMALL>

BLOCKQUOTE>

FONT>

<P>

- Это извозчик отделался легким испугом, а не я,

- ворчливо заметил О.Бендер.

<P align=right>

"<CITE>Двенадцать стульевCITE>"<BR>

Илья Ильф, Евгений Петров

BLOCKQUOTE>

BODY>

HTML>

Начало программы.

Начало заголовка.

Конец заголовка.

Начало тела.

Выделено название.

Начало большой цитаты.

Выделено название

отдела.

Изменен цвет шрифта.

Начало подцитаты.

Уменьшен размер шрифта

(для имитации

нонпарели).

Восстановлен

размер шрифта.

Конец подцитаты.

Восстановлен

цвет шрифта.

Конец большой цитаты.

Конец тела программы.

Конец программы.

Цвет фона и цвет шрифта

В опытах урока 1 мы никак не задавали, ни цвет фона документа, ни цвет шрифта, которым отображался текст. Тем не менее, и фон, и шрифт не были бесцветными при просмотре документа в браузере. Вероятно, вы видели черный шрифт на белом фоне. Но это совсем не обязательно. Все зависит от настроек вашего браузера. Когда в программе на HTML цвета явно не заданы, браузер использует свои установки по умолчанию. В моем Internet Explorer в разделе "Цвета" включена опция "Использовать стандартные цвета Windows", и я вижу черные буквы на белом фоне. Можно выключить эту опцию и установить свои цвета для работы "по умолчанию".

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

Цвета для фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге <BODY>. В рассмотренном выше примере записано:

<HTML>

<HEAD>

...

HEAD>

<BODY bgcolor=silver text=black>

...

BODY>

HTML>

Это означает, что в документе заданы черные символы (black) на серебристом фоне (silver). Ключевые слова для других цветов приводится в таблице, а список атрибутов тега <BODY> здесь.

Как отмечалось выше, атрибуты цветов, заданные в теге <BODY> действуют до парного тега BODY>, то есть, до конца документа. С цветом фона ничего уже не поделаешь -- он может задаваться только один раз, а цвет шрифта можно менять внутри документа многократно при помощи команды <FONT>...FONT>. Установка цвета в этой команде выполняется при помощи атрибута color так, как это сделано в примере:

<HTML>

<HEAD>

...

HEAD>

<BODY bgcolor=silver text=black>

...

<FONT color=maroon>

...

FONT>

...

BODY>

HTML>

Заданы цвета для всего документа

Задан новый цвет шрифта (коричневый)

Восстановлен цвет шрифта (черный)

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

Используя команду ..., можно не только переопределить цвет шрифта, но также его размер и внешний вид. Однако, использование соответствующих атрибутов не рекомендуется. Установку шрифтового типа поддерживают не все браузеры. Кроме того, указанный шрифт может не оказаться на компьютере у пользователя. Для изменения размеров шрифта есть другие команды, более подходящие для сохранения единого стиля оформления документа (<BIG>...BIG> для укрупнения и <SMALL>...SMALL> для уменьшения).

Оформление отдельных элементов текста

Текстовые ссылки и цитаты

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

Большие цитаты лучше выделять из основного текста при помощи команды <BLOCKQUOTE>...BLOCKQUOTE>. Браузер отображает цитату с большим, чем у обычного текста, левым и правым отступом от края страницы.

Посмотрите, как выглядят ссылки и цитаты в нашем примере. А теперь посмотрите на текст программы.

Усиление текста

Часто, кроме заголовков, которые выделяются командой <Hn>...Hn> (n -- уровень заголовка, цифра от 1 до 6) и располагаются на отдельных строках, требуется выделить в тексте отдельные слова, чтобы подчеркнуть их значение, сконцентрировать на них внимание пользователя. Например, всюду в этом тексте выделены полужирным шрифтом имена тегов. Для такого выделения элементов текста предназначена команда <STRONG>...STRONG>.

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

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

Изменение размера шрифта

Выделять элементы текста можно не только при помощи жирности, но и изменением размера шрифта. Например, текст объявления "Попал под лошадь" в примере выводится на экран мелким шрифтом, имитируя нонпарель.

Команда <BIG>...BIG> увеличивает размер шрифта по отношению к текущему, а команда <SMALL>...SMALL> -- уменьшает его. Команды могут быть вложенными, что позволяет увеличивать (или уменьшать) размер в несколько раз. Посмотрите этот документ. Текст программы можно увидеть здесь.

Замечание

Возникает вопрос: в каком диапазоне можно изменять размер шрифта? Согласно стандарту, браузер должен поддерживать семь размерных ступений: -2, -1, 0, +1, +2, +3, +4. (Здесь за "0" обозначен "нормальный" размер, то есть, размер, который браузер использует по умолчанию.)

Авторское редактирование

Вы убедились, что браузеры игнорируют в программе множественные пробелы и символы конца строки при показе документа на экране. Из этого правила, однако, есть исключение. Команда<PRE>...PRE> заставляет браузер выводить текст на экран так, как он записан в программе -- со всеми пробелами и концами строк. Это удобно при показе сложных страниц.

Иллюстрация 1

Текст программы

Иллюстрация 2

Текст программы

Иллюстрация 3

Текст программы

Выравнивание абзацев и фрагментов

Команда <P>, записанная без атрибутов, выравнивает текст по левому краю страницы. Можно запрограммировать вывод текста с ровным правым краем, или так, чтобы все его строчки были выровнены по центру.

<P>

-- выравнивает абзац по левому краю

<P align=left>

-- выравнивает абзац по левому краю

<P align=right>

-- выравнивает абзац по правому краю

<P align=center>

-- выравнивает абзац по центру

Абзац выровнен слева

Текст программы

Абзац выровнен справа

Текст программы

Абзац выровнен по центру

Текст программы

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

Иллюстрация 1

Текст программы

Центрированы отдельные элементы

Иллюстрация 2

Текст программы

Центрирован целиком весь блок

Специальные символы

Поскольку символы "<" и ">" воспринимаются браузером как начало и конец тега, возникает вопрос: а как показать эти символы на экране? Еще вопрос: можно ли вставить в тексте абзаца принудительную группу пробелов (ведь браузер игнорирует лишние пропуски)?

Для этих символов, а также для некоторых других предусмотрено специальное кодирование. Код строится из символа "&" (амперсанд), фиксированного имени и завершающего символа ";":

Вот коды некоторых символов (остальные коды можно посмотреть здесь):

<

<

>

>

&

&

пробел

"

"

©

©

Все буквы, составляющие имя специального знака, должны быть строчными (то есть, маленькими). Использование, например, таких обозначений, как "&QUOT;" и "&AMP;" не допускается!

Иллюстрация 1

Текст программы

Иллюстрация 1

Текст программы

Нажмите кнопку "Сброс", затем выберите верные ответы на вопросы.

Начало формы

Посмотрите документ. Отметьте ошибки в его оформлении.
Цветовое решение документа
Уровень заголовка
Выделение больших фрагментов размером шрифта и жирностью
Неверно оформлена цитата
Неверно оформлен источник цитаты
Исправьте замеченные ошибки оформления
Какие команды способны изменить цвет фона документа.
команда <HTML>...HTML>
команда <BODY>...BODY>
команда <FONT>...FONT>
команда <P>...P>
команда <BIG>...BIG>
Какие команды способны изменить цвет шрифта.
команда <HTML>...HTML>
команда <BODY>...BODY>
команда <FONT>...FONT>
команда <P>...P>
команда <BIG>...BIG>
Какой командой выделяются небольшие цитаты и текстовые ссылки.
команда <CITE>...CITE>
команда <BLOCKQUOTE>...BLOCKQUOTE>
Какой командой выделяются большие многостроковые цитаты.
команда <CITE>...CITE>
команда <BLOCKQUOTE>...BLOCKQUOTE>
Каким способом можно выделить элементы текста
размером шрифта
цветом
плотностью шрифта (жирностью)
курсивом
смещением от границы полей
Запишите имя команды (без символов "< >"), при помощи которой можно увеличить размер шрифта

Запишите имя команды (без символов "< >"), при помощи которой можно уменьшить размер шрифта
Запишите имя атрибута команды <FONT>, при помощи которой можно изменить цвет шрифта
Запишите имя команды, предназначенной для выделения элементов текста

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

При помощи какого атрибута команды <P> можно изменить выравнивание абзаца по горизонтали.

Запишите имя атрибута команды <P> и значение параметра для выравнивания абзаца по центру.
атрибут
параметр

1. Запишите имя атрибута команды <P> и значение параметра для выравнивания абзаца по правому краю.
   атрибут
   параметр
   

2. Какой командой можно отцентрировать сразу несколько абзацев.
   
   

3. Какой командой можно отцентрировать одновременно заголовок и абзац.
   
   

4. Как вывести эти символы на экран браузера.
   <
   >
   пробел
   

Чтобы увидеть результат работы, нажмите кнопку "Оценка".

Конец формы

1. Приведенный ниже текст превратите в HTML-документ.

Конец формы

2. Создайте HTML-документ -- небольшой рассказ о ваших увлечениях информатикой и компьютерами.

Лекция 5-6. Красивые программы

Структура, стиль и внешний вид программы

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

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

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

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

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

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

Иллюстрация 1

Текст программы

Иллюстрация 2

Текст программы

Легко понять эту программу?

Как записывать текст программы

Рекомендуются следующие правила.

1. Записывайте имена тегов заглавными буквами, а имена атрибутов и их значения -- малыми.

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

<HTML>

<HEAD>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<TITLE>Одно искусствоTITLE>

HEAD>

<BODY bgcolor=#0471D2 text=#FFFF33>

<BLOCKQUOTE>

<H1>Одно искусствоH1>

<P>

<STRONG>Питер ХейнSTRONG>

(перевод Н.А.Прохоровой)

BLOCKQUOTE>

<BIG><BIG>

<P>

Одно есть<BR>

искусство,<BR>

ни боле,<BR>

ни мене:<BR>

все делать<BR>

искусно,<BR>

а не<BR>

боле-мене.

BIG>BIG>

BODY>

HTML>

Вид документа

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

Начало формы

Конец формы

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

Теги самой первой команды программы -- <HTML>...HTML> записываются с 1 позиции строки. Все остальные команды находятся внутри этого блока. Поэтому их запись должна быть смещена на две позиции вправо.

<HTML>

<HEAD>

...

HEAD>

<BODY>

...

BODY>

HTML>

Теги внутри блоков <HEAD>...HEAD> и <BODY>...BODY> смещаются на две позиции вправо по отношению к началу блока. Смещение продолжается и дальше с соблюдением правила вложенности.

Ниже представлен пример структуры программы "Сборник газетных вырезок".

<HTML>

<HEAD>

<META>

<TITLE>...TITLE>

HEAD>

<BODY>

<H1>...H1>

<HR>

<H2>...H2>

<P>

...

<BLOCKQUOTE>

<P>

...

<FONT>

<BLOCKQUOTE>

<H3>...H3>

<SMALL>

<P>

...

SMALL>

BLOCKQUOTE>

FONT>

<P>

...

<P>

...

BLOCKQUOTE>

BODY>

HTML>

Замечание

Если команда (от начального до конечного тега) небольшая, то ее можно записывать в одной строке вместе с тегами.

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

   • для документирования сложных языковых конструкций;

   • для временного отключения группы команд при отладке.

Программирование списков

Продолжим рассмотрение команд, которые помогают делать текст на экране красивым.

HTML допускает задание в документах списков двух типов:

Маркированный список

Нумерованный список

Список вопросов Пятачка:

• Какой он, этот Слонопотам?

• Неужели очень злой?

• Идет ли он на свист? И если идет, то зачем?

• Любит ли он поросят или нет?

• И как он их любит?

Список слов из словаря Эллочки:

1. Хамите.

2. Хо-хо!

3. Знаменито.

4. Мрачный.

5. Мрак.

6. Жуть.

Маркированный список

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

Команда UL, задающая маркированный список, имеет следующую структуру:

Описание команды

Пример

<UL>

<LI>первый элементLI>

<LI>второй элементLI>

...

<LI>последний элементLI>

UL>

<UL>

<LI>Какой он, этот Слонопотам?LI>

<LI>Неужели очень злой?LI>

...

<LI>И как он их любит?LI>

UL>

Замечание

Конечный тег LI> не является обязательным.

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

Начальный тег

Вид метки на экране

<UL>

• диск

<UL type=circle>

• окружность

<UL type=disc>

• диск

<UL type=square>

• квадрат

Пример маркированного списка
Программа

Нумерованный список

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

Нумерованный список задается при помощи команды .

Описание команды

Пример

<OL>

<LI>первый элементLI>

<LI>второй элементLI>

...

<LI>последний элементLI>

OL>

<OL>

<LI>Хамите.LI>

<LI>Хо-хо!LI>

...

<LI>Жуть.LI>

OL>

Замечание

Конечный тег LI> не является обязательным.

Вид номера определяется значением атрибута type.

Начальный тег

Вид номера на экране

<OL>

1. Нумерация выполняется арабскими цифрами (1, 2, 3,...)

<OL type=1>

1. Нумерация выполняется арабскими цифрами (1, 2, 3,...)

<OL type=A>

1. Нумерация выполняется прописными буквами (A, B, C,...)

<OL type=a>

1. Нумерация выполняется строчными буквами (a, b, c,...)

<OL type=I>

1. Нумерация выполняется большими римскими цифрами (I, II, III,...)

<OL type=i>

1. Нумерация выполняется малыми римскими цифрами (i, ii, iii,...)

Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).

Пример нумерованного списка
Программа

1.9.0..0Замечание

Мои браузеры Microsoft Internet Explorer и Netscape Navigator делают фиксированный отступ для вывода элементов списка на экран. Нумерация при этом, смещается от отступа к левому краю окна. Когда номер достаточно большой, места не хватает, и номер "налезает" на соответствующий элемент списка. Для исключения этого неприятного эффекта в программе примера использована команда<BLOCKQUOTE>. Эта команда "насильственным" путем увеличивает левый отступ списка.

1.9.0.0Вложенные списки

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

Пример 1 Программа (вложенные маркированные списки)

Пример 2 Программа (вложенные нумерованные списки)

Пример 3 Программа (вложенные смешанные списки)

Нажмите кнопку "Сброс", затем выберите верные ответы на вопросы.

Начало формы

1. Запишите имя команды для задания маркированного списка
   Запишите имя команды для задания нумерованного списка
   Запишите имя атрибута для задания вида метки списка
   Какая программа формирует список:

   • Все, что может испортиться - портится.

   • Все, что не может испортиться - портится тоже.

2. 

   <UL type=disc>

   <LI>...

   <LI>...

   UL>

   

   <UL type=circle>

   <LI>...

   <LI>...

   UL>

   

   <UL type=square>

   <LI>...

   <LI>...

   UL>

3. Какая программа формирует список:

   1. 5. Если кажется, что работу сделать легко, это непременно будет трудно.

      6. Если на вид она трудна, значит, выполнить ее абсолютно невозможно.

<UL type=i start=5>

<LI>...

<LI>...

UL>

<OL type=i start=5>

<LI>...

<LI>...

OL>

<OL type=i start=v>

<LI>...

<LI>...

OL>

<OL type=v>

<LI>...

<LI>...

OL>

2. Какая программа формирует список:

   1. 1. Закон избирательного тяготения. Предмет упадет таким образом, чтобы нанести наибольший ущерб.

         • Следствие Дженнинга. Вероятность того, что бутерброд упадет маслом вниз прямо пропорциональна стоимости ковра.

         • Следствие Клипштейна. Уронят самую хрупкую деталь.

      2. Любой предмет, если его уронят, закатывается в самый недоступный угол.

         • Следствие. Закатываясь в угол, он ударит вас по пальцам ноги.

3. 

   <OL type=1 start=1>

   <LI>...

   <UL type=disc>

   <LI>...

   <LI>...

   UL>

   <LI>...

   <UL type=disc>

   <LI>...

   UL>

   OL>

   

   <OL type=1 start=1>

   <LI>...

   <UL type=disk>

   <LI>...

   <LI>...

   UL>

   <LI>...

   <UL type=disk>

   <LI>...

   UL>

   OL>

   

   <UL type=1 start=1>

   <LI>...

   <OL type=disc>

   <LI>...

   <LI>...

   OL>

   <LI>...

   <OL type=disc>

   <LI>...

   OL>

   UL>

   

   <UL type=1 start=1>

   <LI>...

   <UL type=disc>

   <LI>...

   UL>

   <LI>...

   <UL type=disc>

   <LI>...

   UL>

   UL>

4. 

2. Отметьте строки, содержащие ошибки c точки зрения браузера.

   

   

Чтобы увидеть результат работы, нажмите кнопку "Оценка".

Конец формы

1. Посмотрите, как браузер выполняет программу. Исправьте ошибки.

Начало формы

Конец формы

2. (А.А.Зайцев, Белорецк) Проведите небольшое исследование вашего браузера. Что произойдет, если для атрибута start:

   • выбрать очень большое числовое значение (в арабской, буквенной и римской системах нумерации);

   • задать значение нулевым или отрицательным;

   • записать название атрибута с ошибкой (например, stat=2);

   • записать значение параметра с ошибкой (например, start=i).

3. Напишите программу для отображения списка.

Начало формы

Конец формы

4. Напишите программу для отображения списка.

Начало формы

Конец формы

5. Напишите программу для отображения списка.

Начало формы

Конец формы

6. Напишите программу для отображения на экране вашего распорядка дня.

Урок 7-8. Гипертекст

Сказание о гипертекстах

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

Но это просто тексты. Используя мощный текстовый процессор, такой, как Microsoft Word, сверстать объявление, письмо брошюру и небольшую книгу можно гораздо быстрее, и результат будет лучшего качества.

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

Так почему же во всем мире разразился настоящий бум HTML-программирования? Сбывается мечта А.П.Ершова: программирование становится второй грамотностью, народным увлечением.

Главных причин популярности HTML три. Вот они в порядке возрастания важности.

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

Многие авторы учебников даже стесняются называть HTML-тексты программами. Работу HTML-проектировщика они называют разметкой текста. На самом деле, в этом названии заключена методическая ошибка. Ведь оно (название) предполагает такой порядок работы:

• берется обычный текст

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

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

2. Переносимость.

Если, работая в Word'e, вы создаете документ для собственного потребления, у вас нет проблем. Нет проблем и тогда, когда вы посылаете свою работу в мир как печатную копию. Если же ваш партнер, издатель или коллега просит прислать электронную версию -- начинаются проблемы.

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

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

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

Но даже, если все эти условия выполнены, все равно мало шансов на то, что ваш товарищ увидит текст неискаженным (картинки вылезают из рамок, границы страниц плывут по тексту,...). Это происходит потому, что ваш Word и Word вашего партнера настроены по-разному.

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

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

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

Переносимость HTML-документа достигается за счет того, что пересылается не экранное изображение, а программа. А изображение строит браузер, выполняя команды этой программы. Правда, и здесь не все гладко. Разные браузеры могут работать немного по-разному.

3. HTML-документ -- это гипертекст.

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

• Первый этюд к гипертексту

Некоторое нарушение линейности обычной книги вносят сноски, ссылки на другие страницы и ссылки на другую литературу.

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

• Второй этюд к гипертексту

Из массы линейной текстовой продукции выделяются словари, справочники, энциклопедии. Физически текст устроен линейно: за страницей 10 обязательно следует страница 11, а за сотой-- сто первая. Однако, предполагается, что читатель обращается к книге для справки, а не читает ее всю подряд от корки до корки.

Для упрощения навигации пользователя в таких книгах предусматриваются подробные оглавления, алфавитные и тематические указатели. Разделы словаря или справочника имеют систему развитых перекрестных ссылок. (Помните как у Лема:
СЕПУЛЬКА - предмет для сепулькации, см. сепулькация.
СЕПУЛЬКАЦИЯ -- действие, выполняемое при помощи СЕПУЛЬКИ, см. сепулька.)

• Третий этюд к гипертексту

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

• Последний этюд к гипертексту

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

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

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

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

Гипертексты и браузеры

Читая эту книгу, вы, конечно, уже достаточно много поработали со ссылками и понимаете, что это такое на практике.

Вы поняли, что:

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

• мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;

• для перехода по ссылке необходимо щелкнуть по ней мышкой;

• для возврата из ссылки необходимо использовать навигационную кнопку браузера "Назад" ("Back").

Если ссылки образуют вложенную цепочку, то кнопки "Назад" ("Back") и "Вперед"("Forward") можно использовать для движения по пройденному ссылочному пути в обе стороны. Они работают как традиционные операции "откатка" и "накатка" в большинстве прикладных программ.

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

Пример Цепочка вложенных ссылок

Ссылки могут уводить не только в разные документы, но загружать на экран разные фрагменты одного и того же текста. В последнем случае навигационные средства браузера работают также.

Пример Ссылка внутри документа

Переход внутри одного документа

Для задания гипертекстового перехода внутри документа используют две команды . Первая команда с атрибутом href является источником перехода, вторая с атрибутом name -- приемником.

Общий вид программы

...

<A href=#метка>текстA>

...

...

<A name=метка>A>

...

Задание перехода по метке

На экран выводится ссылка: текст

Метка. Сюда браузер приходит по ссылке.

На экране ничего не отображается.

Для организации перехода внутри документа нужно:

1. Выбрать имя для метки.

   • Имя должно быть уникальным в HTML-программе. Это означает, что других меток с таким именем в программе быть не должно.
     А что будет, если не послушаться этого совета?
     Когда одинаковых меток несколько, браузер выполняет переход на самую первую метку в программе.

   • Имя может заключаться в кавычки.

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

2. Запрограммировать переход по метке.
   В месте перехода нужно написать команду <A href=#метка>текстA>.
   Здесь:

   • # -- ключевой символ;

   • метка -- выбранное имя для метки;

   • текст -- запись, которая будет выглядеть на экране браузера как ссылка.

3. Установить тег с меткой в нужном месте HTML-программы.
   Перед фрагментом HTML-программы, на который должен выполниться переход записать команду-метку <A name=метка>A>.
   При этом:

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

   • на экране тег-метка <A name=метка> никаких изображений не строит.

Пример
Программа

Переход к другому документу

Для того, чтобы браузер загрузил в свое окно новый HTML-документ, нужно записать в программе ссылку при помощи команды <A> с атрибутом href=имя_файла.

Общий вид программы

...

<A href=имя_файла>текстA>

...

Выполнить файл "имя_файла".

На экран выводится ссылка: текст

При щелчке пользователя на ссылке

браузер строит на экране документ

по программе, заданной в файле

"имя_файла".

Документ
Программа (файл doc1.htm)
Программа, на которую настроена ссылка в документе (файл doc2.htm)

Переход к метке другого документа

Мы научились решать такие задачи:

• передавать управление в другую часть документа;

• передавать управление в другую программу (HTML-файл).

Эти два метода можно объединить и передать управление из одного документа к метке внутри другого.

Общий вид программы

Первый HTML-файл

...

<A href=имя_файла#метка>текстA>

...

Второй HTML-файл

...

<A name=метка>A>

...

Приступить к показу фрагмента

с меткой "метка" в файле

"имя_файла". На экран выводится

ссылка: текст.

При щелчке пользователя на

ссылке браузер строит на экране

документ по программе, заданной

в файле "имя_файла", начиная с

фрагмента с меткой "метка".

Документ
Программа (файл doc3.htm)
Программа, на которую настроена ссылка в документе (файл doc4.htm)

Имена файлов и ссылки на них

Имена файлов с HTML-программами имеют расширение htm или html.

Без необходимости обозначение html лучше не использовать, так как не все операционные системы понимают 4 символа в расширении имени файла.

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

Если, например, ваш многофайловый гипертекст имеет иерархическую структуру, старайтесь в обозначениях учитывать иерархию. Так, основной файл с оглавлением можно назвать 00.htm (или index.htm). Файл с первой главой -- 01.htm и так далее (быть может до 99.htm). Когда главы имеют файлы-параграфы, их имена получаются из имени главы добавлением двузначного номера параграфа. Так же поступают и с файлами-пунктами параграфа.

Предлагаемая нотация позволяет по имени файла определить его принадлежность. Например, файл 0205.htm -- описывает построение пятого параграфа второй главы, а файл 111299.htm -- 99-ый пункт 12-ого параграфа 11-ой главы.

Если в теге <A> указано имя файла, браузер ищет файл в том же каталоге, в котором расположен файл со ссылкой. Когда необходимо сослаться на файл из другого каталога можно:

• указывать в ссылке полный путь к файлу, начиная с имени дисковода;

• указывать в ссылке путь по отношению к файлу со ссылкой.

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

Пусть, например, ваш гипертекст расположен в каталоге BOOK корневого каталога диска C. В самом каталоге BOOK расположен файл с оглавлением 00.htm. Остальные файлы помещены в подкаталоги 01, 02, 03, 04 в соответствии с принадлежностью к той или иной главе документа.

Как можно сослаться из файла 00.htm на файл 02.htm?

1. C:/BOOK/02/02.htm (абсолютная адресация)

2. ./02/02.htm (относительная адресация)

Первый способ приводит к непереносимости вашего продукта. Стоит вам перезаписать, например, каталог BOOK на диск D, как ссылки перестают работать.

Вторая запись предлагает браузеру ориентироваться на текущий каталог -- об этом говорит указание "./". Можно перемещать каталог BOOK в любое место и даже переименовывать его - ссылки работать будут.

Относительная ссылка из файла 02.htm в файл 00.htm запишется так: ../00.htm. Символы "../" указывают на родительский каталог.

Замечание

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

Нажмите кнопку "Сброс", затем выберите верные ответы на вопросы.

Начало формы

1. Запишите имя команды для задания гиперссылки
   
   

2. Запишите имя атрибута команды <A> для задания гиперссылки
   
   

3. Запишите имя атрибута команды <A> для задания метки внутри программы
   
   

4. Однажды Иван Ломтиков программировал гипертекст -- справочник по животным. В начало страницы он захотел поместить список зверей, а ниже -- их описание. Подумав немного, он решил каждый элемент списка сделать гиперссылкой. У него получилась такая программа:

...

<UL>

<LI><A href=#волк>A>волк

<LI><A href=#цыпа>A>цыпа

UL>

<HR>

<A name=волк>A>

<P>

Волк - плохой зверь. Кусается.

<HR>

<A name=цыпа>A>

<P>

Цыпа - хороший зверь (птица).

Не кусается, несет яйца. Вкусные.

<HR>

...

Довольный работой, Иван запустил браузер и увидел вот что. Почему браузер не показывает ссылки? Документ ведь должен был быть таким.

Ссылки нельзя записывать внутри списков

Метки нужно записывать так:
<A name=#волк></A>
<A name=#цыпа></A>

Ссылки нужно записать так:
<A href=#волк>волкA>
<A href=#цыпа>цыпаA>

Имя метки нужно записывать в кавычках.

5. В другой раз, Иван Ломтиков решил улучшить свой справочник и сделать его многофайловым гипертекстом. В файл 00.htm Иван поместил содержание справочника, а в файлы 01.htm и 02.htm --описания животных.
   Все файлы Иван поместил в один каталог.

   Файл 00.htm

   Файл 01.htm

   Файл 02.htm

   ...

   <UL>

   <LI><A href=01.htm>волкA>

   <LI><A href=02.htm>цыпаA>

   UL>

   ...

   ...

   <BODY>

   <P>

   Волк - плохой

   зверь. Кусается.

   BODY>

   ...

   ...

   <BODY>

   <P>

   Цыпа - хороший

   зверь (птица).

   Не кусается,

   несет яйца.

   Вкусные.

   BODY>

   ...

6. Отметьте верные утверждения:
   Программы написаны правильно
   Ссылки не будут видны на экране
   Иван забыл разместить в файлах 01.htm и 02.htm метки
   Перед именем файла в ссылках нужно записывать символ "#"
   Ссылки заданы правильно
   В файле 01.htm должен быть тег <A name=волк>
   В файле 02.htm должен быть тег <A name=цыпа>
   

Чтобы увидеть результат работы, нажмите кнопку "Оценка".

Конец формы

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

2. Создайте игру в загадки в виде многофайлового HTML-документа. Основной файл должен содержать загадки, вспомогательные -- разгадки.

Лекция 9-10. Графика

Не хватает картинок

Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив вывод картинок средствами HTML.

Какой графический формат можно использовать

Браузеры "понимают" два графических формата GIF и JPG.

Формат GIF

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

GIF-формат имеет три приятные дополнительные возможности:

• Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, "зациклить кино" или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия GIF-картинок и разная настроечная информация.

В HTML нет различия между заданием вывода на экран простого GIF или анимированного. О том, что картинка "живая" -- браузер узнает в момент загрузки GIF-файла (с диска или сети) и поступает соответственно. Обычные картинки он просто размещает на экране и "забывает" про них. Анимированные ему приходится опекать постоянно, меняя кадры на экране в соответствии с программой, заложенной в самом GIF.

Обычный GIF

Анимированный GIF

• Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это позволяет избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом. Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в GIF-редактор или PhotoShop и снова записать на диск, указав прозрачные цвета.

  Обычный GIF

  Прозрачный GIF

  

  

• Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9,... строки исходного изображения. Вторая -- 2, 6, 10,... Третья - 3, 7, 11,... Четвертая -- 4, 8, 12,...

Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и четвертую. Получается эффект постепенного проявления изображения. На медленных линиях Интернета этот метод позволяет пользователю еще до загрузки всех частей получить представление об изображении -- ведь части строятся браузером по мере их поступления на компьютер. Если картинка загружается не по сети, то различия вывода обычного GIF и чересстрочного на быстрых компьютерах практически незаметны.

Формат JPG

Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.

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

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

Пример JPG-графики

Как программировать картинки

Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.

Атрибут src = имя файла

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=.//edu/data/img/pic-023img.gif>

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

<IMG src=monstr.jpg alt="УМК по дисциплине Дистанционное образование">

Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. Проверьте это на следующей картинке:

<IMG src=./pic07/cat7.gif alt="УМК по дисциплине Дистанционное образование">

Атрибуты width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.

Если атрибуты не заданы, картинка рисуется в естественных размерах.

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

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

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.

При отсутствии атрибута, или при значении n=0 рамка не рисуется.

Ниже расположены ссылки на испытательные стенды. На них можно проверить работу атрибутов src, alt, width, height, border, как по отдельности, так и в совокупности.

Испытатель 1 (src, alt, width, height, border)

Испытатель 2 (src, alt, width, height, border)

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

align=top

вертикальное выравнивание по верхнему краю

align=middle

вертикальное выравнивание по центру

align=bottom

вертикальное выравнивание по нижнему краю

align=left

горизонтальное выравнивание по левому краю

align=right

горизонтальное выравнивание по правому краю

Давайте зададим небольшой текстовый абзац и разместим внутри него картинку:

<P>

Посмотрите на картинку.

<IMG src=.//edu/data/img/pic-0234.jpg align=middle>

Красивая птичка!

P>

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

Испытатель 3 (align)

Опыты с Испытателем 3 имеют недостатки:

• Не видно работу атрибута align, когда картинка помещается не в середину абзаца, а в его начало или конец;

• Не понятно, как будет работать атрибут align, если картинка помещается в большой текст. Будет ли текст "обтекать" картинку, а если да, то как?

Можно получить ответы на эти вопросы, поработав на следующих стендах.

Испытатель 4 (align)

Испытатель 5 (align)

Картинка как ссылка

Очень легко заставить работать картинку как гиперссылку. Достаточно вложить команду IMG внутрь команды A:

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

Для картинки с часами не задан атрибут border. Тем не менее, мы видим рамку. Эта рамка появляется потому, что картинка является гиперссылкой.

Часто рамка вокруг картинки нежелательна, даже когда она означает ссылку. Ведь о ссылке однозначно говорит изменение формы курсора, а если картинка -- прозрачный GIF -- рамка смотрится некрасиво. Избавиться от рамки, даже когда картинка -- ссылка, можно явным заданием border=0.

Эти ссылки заданы так:

<A href=05ex0401.htm><IMG src=.//edu/data/img/pic-023auto.gif border=0

width=200 height=68

alt="Попробуй, догони!">A>

<A href=05ex0401.htm><IMG src=.//edu/data/img/pic-023auto.gif

width=200 height=68

alt="УМК по дисциплине Дистанционное образование">A>

Нажмите кнопку "Сброс", затем выберите верные ответы на вопросы.

Начало формы

1. Запишите имя команды для задания картинки
   
   

2. Запишите имя атрибута для задания файла с картинкой
   
   

3. Запишите имя атрибута для задания надписи
   
   

4. Запишите имя атрибута для задания положения картинки
   
   

5. Запишите имя атрибута для задания толщины рамки
   
   

6. Задавая разные значения атрибутам width, height, можно изменить размер картинки на диске.
   
   

7. Какой графический формат можно использовать для передачи высококачественных фотографий?
   
   

8. Файл какого графического формата может содержать мультипликацию?
   
   

9. Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка...Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

   "Теплая струйка"
   Н.Сладков

   Установите атрибуты команды
   IMG в соответствие с видом
   картинки в документе.

   align

   border

   alt

   

10. Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка...Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

    "Теплая струйка"
    Н.Сладков

    Установите атрибуты команды
    IMG в соответствие с видом
    картинки в документе.

    align

    border

    alt

    

11. Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка... Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

    "Теплая струйка"
    Н.Сладков

    Установите атрибуты команды
    IMG в соответствие с видом
    картинки в документе.

    align

    border

    alt

    

Бабочка крапивница зимовала в стогу. Солнце нагрело стог, и заструилось от него тепло. К теплу, на припек, и выползла неловкая и сонная бабочка... Крапивница отогрелась и затрепетала от нетерпения. Качнулся ветерок, она вспорхнула и понеслась.

"Теплая струйка"
Н.Сладков

Установите атрибуты команды
IMG в соответствие с видом
картинки в документе.

align

border

alt

Чтобы увидеть результат работы, нажмите кнопку "Оценка".

Конец формы

1. Веселый зоопарк. Создайте для детей страничку с забавными историями про животных. В качестве иллюстраций можно использовать коллекцию аннимированных картинок из каталога "./pic05".

Лекция 11-12. Конструктор документов

Пора от технических деталей программирования перейти к более важным вопросам:

• Как составить сценарий гипертекстового документа?

• Как спроектировать внешний вид документа на экране?

Приложение. Структура приложения

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

Итак, есть идея создать красивое, полезное и удобное для пользователя гипертекстовое приложение. С чего начать работу?

Можно, конечно, сразу писать теги, а там -- как получится. Сомнительно, что получится хорошо.

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

Цепочка

Это самая простая структура. Документы, составляющие приложение, просматриваются пользователем по порядку, как страницы в книге. Каждый документ оканчивается ссылкой на следующий. Пользователь двигается по цепочке "до упора", то есть до последнего документа. В последнем документе ссылки "вперед" уже нет. Теперь можно окончить работу или, пользуясь кнопкой браузера "Назад" ("Back"), пройтись по документам "вспять".

Цепочку можно изобразить такой схемой:

Пример цепочки

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

Ссылки-связи можно оформить в виде пиктограмм.

Пример красивой цепочки

Комментарии к последнему примеру.

• Работая с документом, очень легко увидеть программу, которая этот документ строит. В браузере для этой цели есть специальная позиция "В виде HTML" ("Page Source") главного меню "Вид" ("View"). Войдите еще раз в приложение "Пример красивой цепочки" и посмотрите программы документов.

• В приложении "Пример красивой цепочки" использована необычная фоновая иллюстрация (о фоновых картинках подробнее смотрите ниже в этом уроке). Посмотрите ее здесь. Это очень узкая и длинная GIF-картинка размером 1x1200 пикселов, то есть ширина картинки всего один пиксел, а высота -- 1200 пикселов. Паркет из таких плиточек выглядит как гамма цветовых горизонтальных полосок с нарастающей вниз плотностью цвета.

Если бы документы были длинными, то через некоторое время, прокручивая экран по вертикали, мы дошли бы до второго ряда плиточек и увидели бы, как темная горизонтальная полоска внезапно обрывается и начинается светлая (новый горизонтальный паркетный ряд). Это не происходит, потому что в примере документы короткие, а паркетная плиточка длинная. Длина 1200 пикселов выбрана в соответствии с разрешением экрана 1600x1200. Такой размер пользовательского экрана в пикселах -- пока еще большая редкость и встречается в основном на профессиональных графических станциях. Обычные компьютеры работают с разрешением экрана 640x480, 800x600 и 1024x768.

Картинки, подобные vert.gif, редко используют для фона страницы, ведь в длинных документах, переход от одного горизонтального ряда такого паркета к другому выглядит некрасиво и воспринимается как погрешность. Однако, узкие картинки с цветовой "растяжкой" HTML-программисты охотно используют для создания фона в таблицах (об этом разговор пойдет позже).

Гораздо чаще на практике используют паркет, состоящий из очень широких (по горизонтали) и коротких (по вертикали) плиточек. Пример такого паркета можно посмотреть здесь. Размер паркетной плиточки (картинка hor.gif): 1024x1.

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

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

Схема цепочки со справочным разделом выглядит так:

Возможны различные варианты организации справочного раздела:

• Раздел состоит из нескольких независимых документов.

• Некоторые документы раздела имеют ссылки друг на друга или даже образуют цепочку.

• Справочный раздел состоит из одного документа с метками, на которые настроены ссылки в документах цепочки.

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

Применение цепочек

Цепочки, несмотря на свою простоту, часто используются в гипертекстовой практике. Особое значение эта схема имеет на большом информационном объеме. Материал разделяется на последовательные фрагменты, которые и образуют цепочку.

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

Иерархия

Иерархия -- это зависимость по подчинению, или включению одних объектов в другие.

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

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

Иерархическую структуру книги хорошо отражает оглавление (содержание). В правильно оформленных книгах оглавление помещают на первых страницах.

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

Оглавление оказывается полезным, даже если книга предназначена для последовательного чтения.

Оглавление:

• дает представление о книге в целом;

• позволяет быстро открыть нужный раздел для продолжения чтения;

• помогает найти отдельные, полюбившиеся фрагменты.

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

Схему иерархического приложения можно изобразить следующим образом:

Документ 00.htm (корень иерархии) содержит ссылки на разделы 01.htm, 02.htm, 03.htm, ..., nn.htm (ветви иерархии). Эти разделы, в свою очередь, содержат ссылки на подчиненные документы и так далее, вплоть до таких документов как 030101.htm и 030102.htm: они уже не имеют ссылок (листья иерархии).

Пример гипертекстовой иерархии

Схема этого примера выглядит следующим образом:

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

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

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

Модифицированный иерархический справочник

В модифицированном справочнике на основной странице сформирован еще и гипертекстовый алфавитный указатель тегов. Это дополнение показывает заботу разработчика о пользователе.

Уложим картинку в фоновый паркет

Теперь, после "высоких" сфер, одна приятная (но и опасная для новичков!) техническая подробность.

Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет (смотрите урок 2).

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

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

Фоновая картинка задается в команде BODY атрибутом background:

<BODY background=имя файла с картинкой>

Примеры

1. Этот фон задается командой:

   <BODY background=.//edu/data/img/pic-023fon1.jpg>

   Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   

2. Этот фон задается командой:

   <BODY background=.//edu/data/img/pic-023fon2.jpg>

   Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   

3. Этот фон задается командой:

   <BODY background=.//edu/data/img/pic-023fon3.jpg>

   Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   

Этот фон задается командой:

<BODY background=.//edu/data/img/pic-023fon4.gif>

Посмотреть на полном экране

Картинка, которая используется как фоновая плиточка:

Антипримеры

1. Этот фон задается командой:

   <BODY background=.//edu/data/img/pic-023bfon1.jpg>

   Посмотреть на полном экране

   Плохая стыковка плиточек.

   Картинка, которая используется как фоновая плиточка:

   

2. Этот фон задается командой:

   <BODY background=.//edu/data/img/pic-023bfon2.gif>

   Посмотреть на полном экране

   Очень плохая стыковка плиточек.

   Картинка, которая используется как фоновая плиточка:

   

3. Этот фон задается командой:

   <BODY background=.//edu/data/img/pic-023bfon3.jpg>

   Посмотреть на полном экране

   Берегите глаза!

   Картинка, которая используется как фоновая плиточка:

   

Этот фон задается командой:

<BODY background=.//edu/data/img/pic-023bfon4.jpg>

Посмотреть на полном экране

Берегите глаза!

Картинка, которая используется как фоновая плиточка:

Как видите, с фоновыми картинками нужно обращаться очень осторожно. Если нет уверенности, что паркет улучшает восприятие документа, лучше использовать одноцветную заливку: на гладком фоне текст всегда читается лучше.

Нажмите кнопку "Сброс", затем ответьте на вопросы.

Начало формы

1. Запишите имя тега, в котором задается фоновая картинка.
   
   

2. Запишите имя атрибута, задающего фоновую картинку.
   
   

3. Посмотрите документ-картинку. Впишите ответы на вопросы (движение по полям ввода удобно выполнять клавишей TAB):

   Заголовок документа?

   

   Надпись рисунка?

   

   Ширина рисунка?

   

   Высота рисунка?

   

   Имя файла с рисунком?

   

   Имя каталога с рисунком?

   

   Имя файла с программой?

   

   Автор программы?

   

   

4. Дима Мочалкин не смог закончить программу, так как забыл имена некоторых ключевых слов. Помогите человеку!

   <HTML>

   <HEAD>

   <META http-equiv="Content-Type"

   content="text/html; charset=windows-1251">

   <TITLE>Чеширский КотикTITLE>

   HEAD>

   <BODY =.//edu/data/img/pic-023fon4.gif text=black>

   <BLOCKQUOTE>

   <P>

   < =.//edu/data/img/pic-023cheshr.jpg border=1 hspace=10

   ="Чеширский Котик" =left>

   - Чеширский Котик, скажите, пожалуйста,

   как мне выйти из этого леса?<BR>

   - Это зависит, - ответил Кот, - от того,

   куда ты хочешь попасть.<BR>

   - А мне все равно куда, - объяснила Алиса.<BR>

   - Значит, - твердо сказал Кот, - все равно как.

   BLOCKQUOTE>

   <P =right>

   <>"Приключения Алисы в стране Чудес"><BR>

   Л.Кэролл

   <HR>

   BODY>

   HTML>

   

   
   

5. Ниже показан вид двух документов. Программы, которые их строят, отличаются только значением атрибута команды . В программе первого документа этот атрибут имеет значение , во второй -- . В программах нет ни одной команды IMG. Как же так? Ведь на экране картинки?

Вид документа 1

Вид документа 2

Чтобы увидеть результат работы, нажмите кнопку "Оценка".

Конец формы

1. Создайте гипертекстовый справочник. Спланируйте работу по следующей схеме:

   1. Выберите тему справочника и подберите материал. Можно получить интересные и полезные справочники по отдельным разделам географии, информатике, другим школьным дисциплинам. Не пытайтесь охватить справочником большой материал -- это задание учебное, ограниченное по времени и не все тонкости HTML известны к этому уроку.

   2. Нарисуйте иерархическую схему справочника на листе бумаги. Внутри каждого блока, изображающего документ на схеме, запишите название раздела справочника и имя HTML-файла. В системе имен файлов с программами настоятельно рекомендуется использовать иерархический порядок. Основной файл может иметь имя 0.htm. Файлы следующего уровня имена 01.htm, 02.htm, 03.htm, ... 09.htm (или 001.htm, 002.htm, 003.htm, ... 099.htm). Файлы, непосредственно подчиненные файлу 03.htm, имена -- 031.htm, 032.htm, 033.htm, ... 039.htm. И так далее. Программисту легко запутаться в многочисленных файлах справочника, если не пользоваться такой системой.

   3. Разработайте единый стиль оформления документов. Подберите друг к другу:

      • цветовую заливку или фоновую иллюстрацию;

      • основной цвет текста;

      • дополнительный цвет для выделения отдельных элементов;

      • иллюстративный графический материал.

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

1. 4. Тщательно продумайте навигационные элементы справочника и их расположение на экране пользователя.

   5. Напишите программы и проведите авторское тестирование.

   6. Передайте продукт в опытную эксплуатацию и исправьте недочеты, замеченные пользователями-тестерами.

Урок 13-14. Как мы жили без таблиц?

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

Но обо всем по порядку.

Что такое таблица

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

Заголовками строк и столбцов в таблице умножения служат цифры от одного до девяти. Пользоваться таблицей очень просто. Если требуется узнать, например, результат умножения числа 6 на число 8, то нужно прочитать ответ в клетке на пересечении столбца с заголовком "6" и строки с заголовком "8". Или в клетке на пересечении строки с заголовком "6" и столбца с заголовком "8". Это все равно, потому что 6·8 = 8·6. В обеих этих клетках написано число 48.

1

2

3

4

5

6

7

8

9

1

1

2

3

4

5

6

7

8

9

2

2

4

6

8

10

12

14

16

18

3

3

6

9

12

15

18

21

24

27

4

4

8

12

16

20

24

28

32

36

5

5

10

15

20

25

30

35

40

45

6

6

12

18

24

30

36

42

48

54

7

7

14

21

28

35

42

49

56

63

8

8

16

24

32

40

48

56

64

72

9

9

18

27

36

45

54

63

72

81

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

Для таблицы умножения признаками служат значения сомножителей. Первый признак -- это значение первого сомножителя, второй -- значение второго.

Как задать таблицу

Таблица задается командой ... .

Внутри этих тэгов задаются строки командами <TR> ... TR>.

Наконец, внутри строк задаются клетки (ячейки) командами <TD> ... TD>.

Таким образом, по строкам, описывается вся структура таблицы.

Рассмотрим следующий пример.

Программа

Таблица на экране

<TABLE border=1>

<TR> <!-- Первая строка -->

<TD>(1,1)TD> <!-- Первая ячейка -->

<TD>(1,2)TD> <!-- Вторая ячейка -->

TR>

<TR> <!-- Вторая строка -->

<TD>(2,1)TD> <!-- Первая ячейка -->

<TD>(2,2)TD> <!-- Вторая ячейка -->

TR>

<TR> <!-- Третья строка -->

<TD>(3,1)TD> <!-- Первая ячейка -->

<TD>(3,2)TD> <!-- Вторая ячейка -->

TR>

TABLE>

(1,2)

(2,1)

(2,2)

(3,1)

(3,2)

Атрибуты команды TABLE

Атрибут

Значение

Описание

align

left, right

Выравнивание по горизонтали

width

число или процент

Ширина таблицы

cell; border-; border-; border-;">

число

Расстояние между содержимым ячейки и рамкой

cellspacing

число

Расстояние между ячейками таблицы

bgcolor

цвет

Цвет фона таблицы

background

файл

Фоновая картинка

border

число

Ширина линий рамки

bordercolor

цвет

Цвет линий рамки

bordercolordark

цвет

Цвет рамки (снизу и справа)

bordercolorlight

цвет

Светлый цвет рамки (сверху и слева)

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

Испытатель 1 (атрибуты команды TABLE)

Испытатель 2 (атрибуты команды TABLE)

Атрибуты команды TR

HTML-таблица состоит из строк, каждая из которых задается командой

<TR>описание ячеек табличной строкиTR>

Варьируя атрибутами команды TR, можно установить те или иные свойства одновременно для всех ячеек строки.

Атрибут

Значения

Описание

align

left, center, right

Выравнивание по горизонтали

valign

top, center,bottom, baseline

Выравнивание по вертикали

bgcolor

цвет

Цвет фона

bordercolor

цвет

Цвет линий рамки

bordercolordark

цвет

Цвет рамки (снизу и справа)

bordercolorlight

цвет

Светлый цвет рамки (сверху и слева)

Посмотреть работу атрибутов можно на следующих испытателях:

Испытатель 3 (атрибуты команды TR)

Испытатель 4 (атрибуты команды TR)

Атрибуты команды TD (TH)

Каждая табличная строка состоит из ячеек, которые последовательно описываются командами TD (обычная ячейка) и (или) TH (ячейка-заголовок):

<TH>описание содержимого ячейкиTH>

<TD>описание содержимого ячейкиTD>

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

Команды TD и TH имеют следующие атрибуты:

Атрибут

Значения

Описание

align

left, center, right

Выравнивание по горизонтали

valign

top, center, bottom, baseline

Выравнивание по вертикали

width

число или процент

Ширина ячейки

bgcolor

цвет

Цвет фона

background

файл

Фоновая картинка

bordercolor

цвет

Цвет линий рамки

bordercolordark

цвет

Цвет рамки (снизу и справа)

bordercolorlight

цвет

Светлый цвет рамки (сверху и слева)

nowrap

Выключение автоматического разрыва строк

colspan

число

Ширина большой ячейки (в столбцах)

rowspan

число

Высота большой ячейки (в строках)

Ниже приводятся ссылки на испытательные полигоны.

Испытатель 5 (TR и TD: align, valign, width, bgcolor, background, bordercolor, bordercolordark, bordercolorlight)

Испытатель 6 (TR и TD: align, valign, width, bgcolor, background)

Испытатель 7 (TR и TD: nowrap)

Испытатель 8 (TR и TD: colspan)

Испытатель 9 (TR и TD: rowspan)

Испытатель 10 (TR и TD: colspan+rowspan)

Многоликие таблицы

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

Страничные отступы

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

В гипертекстовом документе можно создать поля, если размещать информацию внутри таблицы, состоящей всего из одной клетки с невидимыми границами. При изменении значения атрибутаcell; border-; border-; border-; ">

Обычное размещение

Размещение в таблице

Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!

"Алиса в стране Чудес"

Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!

"Алиса в стране Чудес"

Начало формы

Конец формы

Можно задать поля и при помощи пустых столбцов:

Размещение в таблице

Здесь border=1

Баюкай сына своего
Хорошею дубиной -
Увидишь, будет у него
Характер голубиный!

"Алиса в стране Чудес"

Баюкай сына своего
Хорошею дубиной -
Увидишь, будет у него
Характер голубиный!

"Алиса в стране Чудес"

Начало формы

Конец формы

Обычной практикой является комбинирование этих двух способов:

Размещение в таблице

Здесь border=1

Баюкай сына своего
Хорошею дубиной -
Увидишь, будет у него
Характер голубиный!

"Алиса в стране Чудес"

Баюкай сына своего
Хорошею дубиной -
Увидишь, будет у него
Характер голубиный!

"Алиса в стране Чудес"

Начало формы

Конец формы

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

Крокодильчики мои
Цветики речные!
Что глядите на меня
Прямо как родные?

Это кем хрустите вы
В день веселый мая,
Средь нескушанной травы
Головой качая?

"Алиса в стране Чудес"

Начало формы

Конец формы

1.9.0.0.0Замечание

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

Многоколонная верстка

Используя таблицы, можно выводить на экран информацию в несколько колонок:

При свете дрянного керосинового фонаря Остап прочел из путеводителя:

"На правом высоком берегу - город Васюки. Отсюда отправляются лесные материалы, смола, лыко, рогожи, а сюда привозятся предметы широкого потребления для края, отстоящего на 50 километров от железной дороги.

В городе 8000 жителей, государственная картонная фабрика с 320 рабочими, маленький чугунолитейный, пивоваренный и кожевенный заводы. Из учебных заведений, кроме общеобразовательных, лесной техникум."

Начало формы

Конец формы

1.9.0.1Размещение информации на экране
Таблицы, вложенные друг в друга

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

Везде на стенах и на колоннах были несмываемые надписи
примерно такого рода:

Вода - источник жизни

Вода - народное достояние

Одним шайко-объемом можно напоить лошадь

Кто расточает воду, тот враг народа

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

Везде на стенах и на колоннах были несмываемые надписи
примерно такого рода:

Вода - источник жизни

Вода - народное достояние

Одним шайко-объемом можно напоить лошадь

Кто расточает воду, тот враг народа

Наложение картинок

Еще одна необычная практика использования таблиц: построение коллажей.

Постановка задачи. Имеются две картинки:

и

Как их наложить друг на друга? Как поместить животное на экран телевизора?

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

Построим таблицу, состоящую из одной клетки. Укажем для этой клетки ширину, равную ширине рисунка, который будем использовать как фон:

Начало формы

Конец формы

Да... Получилось не очень хорошо. Для задания высоты ячейки (и таблицы) создатели HTML не придумали атрибута. Мы видим только верхний кусочек фоновой картинки.

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

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

Начало формы

Конец формы

1. Кузя Ивашкин придумал несколько хитрых таблиц:
   
   Запишите их на HTML.

2. В каталоге pic07 расположены две картинки:

   img24.jpg

   horse.gif

   

   

3. Вставьте анимированную картинку внутрь рамы.

4. А теперь попробуйте вставить внутрь рамы ./pic07/frame2.jpg две картинки: ./pic07/cat7.gif и ./pic07/bird2.gif так, чтобы кот лежащий вверху, жадно взирал на птичку, пролетающую под ним.

5. Напишите программу, которая выводит на экран документ:
   

6. Напишите программу, которая выводит на экран документ:
   
   Картинка с шарами находится в ./pic07/balloon.jpg, а тексты в файле ./pic07/balloon.txt (кодировка Windows).

Лекция 15. Что такое хорошо и что такое плохо

Материал этого и следующего уроков написан под большим впечатлением замечательной книги Дмитрия Кирсанова "Вебдизайн" (издательство "Символ-Плюс", Санкт-Петербург, 1999). Прочитать эту книгу рекомендуется всем, кто имеет серьезные намерения достичь высот в непростом и увлекательном деле -- создание качественных гипертекстовых приложений. Книгу можно заказать в интернетовском магазине books.ru.

Визуальные редакторы

Легкость, с которой Word переводит свой текст в формат HTML, заставляет начинающего задаться неизбежным вопросом: зачем изучать язык, если можно получать HTML-коды без всякой головной боли?

Что касается Word'а, то пример явно неудачный. Как раз здесь, головная боль обеспечена на все 100%.

При использовании Word'а как визуального HTML-редактора возникают следующие проблемы:

• Невозможно добиться точного соответствия Word-страницы визуальному представлению полученного HTML-документа.

• Word вставляет в HTML-коды много лишнего. Процент "мусора" порой достигает 50%. А пересылка "довеска" по сети стоит времени и денег.

• Word не справляется с конвертированием в HTML больших и сложных по структуре файлов.

• Word не умеет записывать HTML-тексты "шрифтом по умолчанию". Он обязательно вставляет тег FONT с атрибутом face, в котором прописывает конкретный шрифт. Эта "привычка" Word'а не является безобидной для русскоязычных сайтов. Если на машине клиента указанные шрифты не содержат русских букв, то прочитать текст нельзя. Вероятно, вы встречались в Интернете с такой ситуацией, пробовали менять кодировки, но все с нулевым эффектом -- браузер показывает текст шрифтом, в котором нет русских букв, и смена кодировки в этом случае, естественно, не помогает.

Существуют более продвинутые, по сравнению с Word, визуальные HTML-редакторы. Среди них -- очень хороший и мощный продукт HomeSite, а также очень простой в обращении FrontPage Express.

Последний редактор, подобно Word'у, переформатирует текст HTML-программы по-своему, причем, не лучшим образом. Переформатирует весь код заново, а не только ту вставку, которая сделана в этом редакторе.

Можно добавить еще, что FrontPage не все умеет делать даже на уровне стандартного HTML3.2 и, бывает, встает в тупик перед простой проблемой. Например, отказывается вставлять пустую строчку между двумя таблицами, примыкающими вплотную друг к другу.

Но, тем не менее, редактор FrontPage Express -- хороший. Работать с ним удобно.

Последнее достижение фирмы Microsoft -- FrontPage 2000. Этот продукт -- существенный прорыв на рынке визуальных HTML-редакторов.

FrontPage 2000 не выкидывает те теги, которые не может понять и осмыслить, и не вписывает сотни тегов, которые никому не нужны. А главное, FrontPage 2000 не трогает то, что трогать не надо. Код, который создается в визуальном режиме, он форматирует по-своему, а код, написанный вручную, переписывает без изменений.

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

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

Мнение автора и мнение авторитетных вебдизайнеров в этом вопросе однозначно -- да!

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

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

Наконец, свободно владея HTML, вы будете ощущать себя принятым в хорошую компанию.

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

Черный костюм, белая рубашка, галстук

Текст -- это основной информационный элемент.

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

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

Этот стиль, как черный костюм, белая рубашка и галстук.

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

Академический стиль

Чем же определяется академический стиль оформления гипертекстового документа?

Резиновый дизайн страницы

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

Разрешение экрана -- это его размеры в пикселах. Наиболее распространенным сейчас является разрешение 600x800. Но есть пользователи, которые смотрят странички в разрешениях 640x480, 1024x768 и даже 1280x1024.

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

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

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

И вертикальная линейка не украшает экран, но, к сожалению, это неизбежное зло: очень мало страниц целиком помещаются на одном экране.

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

Цвет фона и текста

Эти элементы задаются в команде BODY. Кроме того, можно временно изменить цвет текста, заданный в BODY при помощи команды FONT (атрибут color).

Известно, что наиболее благоприятны для восприятия -- абсолютно черный текст на абсолютно белом фоне:

<BODY bgcolor=white text=black>

Прогулка

Папа пошел в лес за грибами.

Именно такие значения устанавливает для этих атрибутов браузер Explorer по умолчанию. То есть, если написать просто тег <BODY> без всяких атрибутов, Explorer будет писать черный текст на белом фоне.

У браузера Netscape умалчиваемые значения другие: черные символы на сером фоне.

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

<BODY bgcolor=white text=black>

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

Цвет ссылок

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

• Не подчеркивайте другие элементы на экране. Пользователь будет пытаться выполнить "клик" на подчеркнутом и будет огорчаться, что ничего не происходит: заново инсталлировать свой браузер, писать ругательные письма в Microsoft и Netscape! Пользователя надо любить и стараться не сбивать его с толку.

• Старайтесь, по той же причине, не выделять текстовые элементы тем же цветом, что и ссылки. Вообще, избегайте выделения цветом. На странице и так есть цветные пятна -- ссылки. Дополнительные цветные вкрапления приведут к пестроте. Выделять можно, используя жирность или курсив (но не одновременно). Заголовки выделяются специальными командами Hx (жирность и размер).

Так как ссылка -- это уже выделение текста, то:

• Не записывайте как ссылку слишком большой текст. Ведь известно, что выделить много, значит, не выделить ничего. Например, не надо делать ссылкой фразу "посмотрите, как выглядит этот рисунок". Лучше ссылкой сделать только одно слово: "посмотрите, как выглядит этот рисунок".

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

• Не располагайте несколько ссылок слишком близко друг к другу. Пользователь может подумать, что видит одну большую ссылку.

С ссылками связан не один цвет, а целых три:

• цвет неотработанной ссылки (пользователь еще не "кликал" по ней);

• цвет ссылки после щелчка (пользователь "кликнул" по ссылке, документ, на который указывает ссылка, грузится по сети);

• цвет отработанной ссылки (пользователь "ходил" по этой ссылке);

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

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

Цвет ссылки, сразу после щелчка, должен быть еще более активным, чем цвет неотработанной ссылки. Внимание! Я (ссылка) приступила к работе. Документ загружается и скоро появится на вашем экране. Потерпите немного!

В браузерах цвета ссылок по умолчанию такие:

синий -- цвет неотработанной ссылки
красный -- цвет активной ссылки
пурпурный -- цвет отработанной ссылки

Эти цвета выбраны, конечно, не случайно.

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

Поэтому, всегда записывайте в теге BODY атрибуты, явно задающие цвета ссылок.

BODY в черном костюме, белой рубашке и строгом галстуке выглядит так:

<BODY bgcolor=white text=black

link=blue alink=red vlink=purple>

Эта запись совершенно эквивалентна следующей:

<BODY bgcolor=#FFFFFF text=#000000

link=#0000FF alink=#FF0000 vlink=#800080>

Смысл атрибутов:

link -- задает цвет неотработанных ссылок
alink -- задает цвет активных ссылок (во время загрузки документа)
vlink -- задает цвет отработанных ссылок

Кегль шрифта

Кегль -- это размер шрифта. В Word'e этот параметр задается в специальном окошке числами, как правило, от 8 до 72. Можно даже не выбирать готовое значение, а вписать число "руками", например, "1" или "500". Word будет работать!

Что означают эти числа? Это величина кегля в пунктах. Один типографский пункт равен 0.375 мм. Причем, это размер не самих символов шрифта, а размер так называемого "очка". То есть, размер по вертикали матрицы, на которой гравируется в типографии символ (литера). Этот размер больше, чем размер самой литеры. Так, в шрифте кегля 10 заглавные буквы имеют размер около 7 пунктов.

При печати книг, как правило, для основного текста выбирается кегль в 10 или 12 пунктов. Для заголовков -- более крупные кегли, а для ссылок и примечаний более мелкие (обычно 8 пунктов).

Какие средства дает HTML для управления кеглем?

Реальный размер символов на HTML-странице зависит от двух (на самом деле от трех, но об этом чуть ниже) вещей:

• От базового размера шрифта, установленного в браузере.

• От относительного размера, который выставляется атрибутом size в теге FONT или задается тегами SMALL и BIG.

Задание размера в команде FONT

Атрибут size может принимать значения (условные) от 1 до 7. Причем, значение size=3 соответствует базовому размеру шрифта, который выставлен в настройках браузера. Другие значения атрибута size позволяют отклоняться от базового размера в сторону уменьшения или увеличения. Существуют и другой способ задания размера шрифта в виде size=+n или size=-n. В этой системе отсчета за 0 берется размер базового шрифта.

Итак, размер шрифта в теге FONT можно задавать следующим образом:

size=1 size=-2

size=2 size=-1

size=3 size=+0 Базовый размер, выставляется в браузере.

size=4 size=+1

size=5 size=+2

size=6 size=+3

size=7 size=+4

Базовый размер шрифта браузера

Один из первых читателей гипертекстовой книги "HTML-конструирование" стал жаловаться, что читать ее совершенно невозможно, ибо она написана слишком мелким шрифтом. "Такая нонпарель может подорвать здоровье детей и сделать их калеками прежде, чем они научатся писать гипертексты." -- заявил он мне на полном серьезе.

Зная, что "HTML-конструирование" написана шрифтом по умолчанию, который пользователь может регулировать самостоятельно, я пошел посмотреть на настройки браузера своего оппонента.

Причина нонпарели оказалась не в настройках браузера. Там было установлено обычное значение "шрифты = средние", а дело оказалось в разрешении экрана.

Я увидел на экране в 14" (с плохим зерном) разрешение 1024x768!!! Предложение изменить разрешение вызвало протест, тогда мы поставили в браузере "шрифты = самые крупные" и ситуация выправилась.

Итак, казалось бы простой вопрос, "Чему равняется кегль базового шрифта браузера?" -- совсем не прост и не однозначен. Ответ зависит как от разрешения экрана (то есть, его размера в пикселах), так и от его реального размера в сантиметрах или дюймах. Вот вам и третий компонент размера символа на экране: диагональный размер самого экрана и установленное разрешение!

Задание размера в командах BIG и SMALL

Эти команды подробно описаны в уроке 2 книги. Их использование тоже ориентировано на изменение кегля шрифта по отношению к базовому размеру.

Гарнитура шрифта

Гарнитура -- это набор начертаний символов одного шрифта.

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

Сами шрифты подразделяются на серифные (с засечками) и рубленые (без засечек). Пример шрифта с засечками -- гарнитура Times, без засечек -- Helvetica.

Серифные шрифты посредством засечек (серифов) в нижней части литер улучшают читаемость документа. Нижние серифы создают впечатление слитности написания слова, объединяя соседние буквы.

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

Можно предложить еще одно деление шрифтов на два класса: пропорциональные шрифты и моноширинные.

Моноширинные шрифты имитируют литеры пишущих машинок и матричных принтеров. В этих шрифтах ширина всех литер одинакова. Именно таким шрифтом браузер выводит текст на экран по командам PRE, CODE, TT, SAMP, KBD.

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

Гарнитуры Times и Helvetica -- пропорциональные. К моноширинным шрифтам относится гарнитура Courier.

Любая графическая операционная система имеет три набора стандартных гарнитур, для Windows это:

Times Roman (серифный шрифт)
Arial(рубленый шрифт)
Courier(моноширинный шрифт)

Браузер по умолчанию использует шрифт Times Roman для вывода обычного текста и шрифт Courier для моноширинного.

Однако и здесь пользователь имеет возможность установить свои собственные значения шрифтов для режима умолчания.

Академический стиль HTML активно не поощряет приемы управления гарнитурой шрифта, хотя для этой цели существует специальный атрибут face в команде FONT. Можно запросто написать:

<FONT face=SchoolBook>

Этот текст будет показан

шрифтом SchoolBook?

FONT>

Этот текст будет показан шрифтом SchoolBook?

И тот же Word, переводя свой текст в HTML, расставляет эти атрибуты в соответствии с используемыми в этом тексте шрифтами. Так как в Word'е нельзя писать шрифтом "по умолчанию", все без исключения тексты из-под Word'а обрамляются тегами FONT с атрибутом facе.

На своем компьютере вы видите красивые HTML-документы из-под Word'а и недоумеваете -- почему же не отойти от скучного Times Roman?

Как браузер интерпретирует атрибут face

Сначала браузер пытается найти заказанный шрифт на компьютере пользователя. Если такой шрифт есть, он используется при выводе текстового фрагмента.

Неприятность. Шрифт с одним и тем же названием может содержать или не содержать в своем наборе русские буквы. Иными словами, ваш текст у пользователя может быть похож на "древненорвежский" и никакие переустановки кодировок в браузере не помогут. Изображений (глифов) русских букв в шрифте просто не существует!

Уж лучше бы браузер не нашел заказанного шрифта! В этом случае он станет пользоваться шрифтом по умолчанию, то есть Times Roman или тем, который установил пользователь вместо Times Roman для своего браузера.

Значением атрибута face может быть не один, а целый список шрифтов (разделитель -- запятая). Если хочется вывести надпись рубленым шрифтом, можно написать:

<FONT face="Arial,Geneva,Helvetica>

Текст будет показан

рубленым шрифтом?

FONT>

Текст будет показан рубленым шрифтом?

Сначала браузер пытается найти первый из указанных шрифтов, потом, в случае неудачи, второй, и так далее, по списку.

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

Небольшое отступление от классического HTML в технологию CSS

Язык CSS (Cascading Style Sheets) был разработан в дополнение к HTML. Основная цель этой технологии -- предоставить разработчику более гибкие способы управления визуальным форматированием гипертекстовой страницы.

В языке CSS шрифт можно задавать почти так же, как в HTML при помощи списка названий конкретных гарнитур. Однако, в этот список можно включать и родовой признак шрифта: serif (для шрифта с засечками), sanserif (для рубленого шрифта), monospace (для моноширинного шрифта). Если браузер не находит конкретного шрифта, он пытается его заменить другим, который есть на компьютере, учитывая родовой признак.

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

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

Пример близкий к стилю черного костюма

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

Мелкие ошибки в этой работе:

• точка в однословном заголовке не ставится (ошибка дизайна, а не грамматики!);

• заголовок на главной странице (темно-синий), на других -- черный;

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

Литература и Интернет-ресурсы

1. Андреев А.А., Солдаткин В.И., Лупанов К.Ю. Проблемы разработки учебно-методических пособий для системы дистанционного образования//Применение новых технологий в образовании. Материалы IX Международной научно-практической конференции (Москва, 3-5 июня 1998 г.). - М.: АТИСО, 1998.

2. Андреев А.А., Солдаткин В.И. К вопросу о рациональном комплекте средств обучения для системы дистанционного образования/Современный этап реформирования экономического образования в России: Труды Международной научно-практической конференции. - М.: ГФА, 1998.

3. Вербицкий А.А. Концепция знаково-контекстного обучения в ВУЗе // Вопросы психологии - 1987, № 5, С. 51-59.

4. Вымятин В.М. Информационно-технологическое обеспечение ДО//Открытое и дистанционное образование. 2000. № 1. - с. 18-28.

5. Гершунский Б.С. Философия образования для XXI века. - М., 2002.

6. Григорьев С.Г., Краснова Г.А., Роберт И.В. и др. Разработка концепции образовательных электронных изданий и ресурсов//Открытое и дистанционное образование. Томск, 2002. № 3 (7). -с.31-33.

7. Демкин В.П., Вымятин В.М. Принципы и технологии создания электронных учебников. Томск, 2002. 64с.

8. Домрачев В.Г. Дистанционное обучение: возможности и перспективы // Высшее образование в России - 1994, № 3, С. 10-12.

9. Коджаспирова Г.М., Петров К.В. Технические средства обучения и методика их использования. - М., 2003, С. 20 - 114.

10. Краснова Г.А., Беляев М.И., Соловов А.В. Технологии создания электронных средств. - М., МГИУ, 2001. 224с.

11. Кречетников К.Г. Методология проектирования, оценки качества и применения информационных технологий обучения. - М.: Госкоорцентр, 2001.

12. Кухаренко В.Н. Этапы развития дистанционного обучения в университете. // Тезисы докладов Пятой Международной конференции по дистанционному образованию - М., 1998, С. 7-8

13. Лазарев В., Овсянников В. Концепция дистанционного образования. // Новые знания. - 1997, № 2, С. 40-42.

14. Павлов А.П. Новые информационные технологии в высшем образовании США и России // Информационные технологии и образование - М., 1996 - с. 64-82.

15. Полат У.С. Новые педагогические и информационные технологии в системе образования. - М., 2005, С. 4

16. Тихомиров В.М. Современное состояние и актуальные проблемы дистанционного образования. // Тезисы докладов Пятой Международной конференции по дистанционному образованию - М., 1998, С. 3-4

17. Шенников С.А. Открытое дистанционное образование. - М., 2002.

18. mediamatch.derby.ac.ru

19. de.ifmo.ru/

20. Аванесов В.С. Проблема качества педагогических измерений. [email protected]

21. Агапонов С.В. и др. Средства дистанционного обучения. Методика, технология, инструментарий / Под ред. З.О. Джалиашвили. - СПб.: БХВ-Петербург, 2003.

22. Дистанционное обучение: Учеб. пособие / Под ред. Е.С. Полат. - М.: ВЛАДОС, 1998.

23. Тиффин Дж., Раджасингам Л. Что такое виртуальное обучение. Образование в информационном обществе. - М.: Информатика и образование, 1999.

24. Полат Е.С. Новые педагогические технологии. - М:, Мир, 1997.

25. Захарова И.Г. Информационные технологии в образовании: Учеб пособие для студ. высш. пед. учеб. заведений. - М.: Академия, 2003.

26. Персианов В.В. Информационные и коммуникационные технологии в образовании: Образовательный сайт. - Тула: Сервер ТГПУ (tspu.tula.ru), 2007.