Министерство образования и науки Российской Федерации Государственное образовательное учреждение

высшего профессионального образования «Хабаровская государственная академия экономики и права»

Кафедра информационных систем в экономике

Ж.Г. Павлова

МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ СОЗДАНИЕ WEB-СТРАНИЦ

С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА HTML Учебное пособие

Хабаровск 2010

ББК З П 12

Павлова Ж. Г. Мировые информационные ресурсы. Создание Web-страниц с использованием языка HTML : учеб. пособие / Ж. Г. Павлова. – Хабаровск : РИЦ ХГАЭП, 2010. – 116 с.

Содержание учебного пособия соответствует ГОС ВПО направления подготовки специалистов по специальности 080801 «Прикладная информатика в экономике»

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

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

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

Рецензенты:

канд. физ.-мат. наук, доцент, проректор по информационным технологиям ДВГГУ В.А. Казинец

зав. кафедрой, д-р тех. наук, профессор кафедры вычислительной техники ТОГУ С.В. Сай

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

© Хабаровская государственная академия экономики и права, 2010

2

3

Введение

Современное человечество вступило в информационную эпоху своего исторического развития. На планете миллионы людей связаны единым каналом общения и передачи информации. Человек получил практически неограниченный доступ к библиотекам, книгам – к знаниям всех эпох и культур. Всё больше людей во всём мире и нашей стране начинает понимать, что Интернет – это потребность жизни XXI в., такая же необходимая, как телефон, телевизор, автомобиль.

Численность пользователей Интернета постоянно растёт и в ближайшие годы достигнет 1 млрд человек. В первой половине XXI в., по всем прогнозам, Интернет станет чрезвычайно разветвлённой сетью, к которой подключат самолёты и автомобили, дома и бытовые приборы, в промышленности будет царить автоматическое производство, контроль за качеством и организацией производства станет возможным из любой точки земного шара. Считается, что с переходом на новые сетевые технологии, обеспечивающие прохождение многих триллионов бит информации в секунду, глобальные сети действительно опутают всю Землю и вся мировая информация, собранная всеми поколениями людей, станет мгновенно доступной любому жителю нашей планеты. Уже сегодня, имея домашние компьютеры с выходом в Интернет, многие пользователи могут работать с этим новым инструментом добывания знаний.

В мире каждые 2 – 3 года объём передаваемой информации удваивается. Не случайно XXI в. называют эрой информационного общества.

Количество пользователей в российском сегменте Сети растёт с каждым днём. Большинство наиболее «продвинутых», адаптированных к условиям новой информационной цивилизации людей ежедневно входят в Сеть, ищут нужную им информацию, друзей, партнёров по бизнесу. Как войти с ними в контакт, рассказать им о себе, своей фирме, своих замыслах и проектах? Ответ прост – нужно сделать собственный Web-сайт и разместить его в одном из сегментов Интернета.

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

4

1. Язык гипертекстовой разметки HTML. История HTML

Всемирная паутина (World Wide Web – WWW) состоит из множества связанных между собой электронных документов, представляющих кладезь информационных данных, описанных с помощью специальных технологических правил. Эти правила составляются на языке гипертекстовой разметки HTML (HyperText Markup Language).

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

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

HTML.

Термин HyperText Markup Language означает «язык маркировки гипертекстов» и включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и многое другое. Человек, изучивший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро. HTML как основа создания Web-страниц имеет прямое отношение к такому направлению изобразительного искусства, как Web-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен разместить всё это в Сети, продумать связь между Web-страницами, чтобы всё двигалось, откликалось на

5

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

HTML даёт авторам средства:

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

■загрузки электронной информации с помощью щелчка мыши по гипертекстовой ссылке;

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

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

Наиболее распространёнными браузерами (программами для просмотра) HTML-файлов являются Microsoft Internet Explorer и Netscape Navigator.

Открывая в браузере любую Web-страницу, вы видите текст, картинки, кнопки, таблицы и многое другое. Как создаётся Web-страница? Для того чтобы создать Web-страницу, можно использовать текстовый редактор Notepad (Блокнот).

Откройте любую Web-страничку. То, что вы видите в браузере, это её «лицо». Чтобы увидеть «изнанку» Web-страницы, выполните команду View → HTML Code (Вид → Просмотр HTML-кода). Откроется текстовый редактор Блокнот, в котором вы увидите «устройство» этой страницы.

Создать документ для публикации в Web можно в обычном текстовом редакторе, таком как Блокнот Windows. Можно также подготовить его в мощном текстовом процессоре типа Microsoft Word, а затем сохранить как Web-страницу, хотя для создания отдельных страниц и целых сайтов служат специальные системы визуальной разработки, такие как Macromedia Dreamweaver, Microsoft FrontPage и Macromedia Flash. Каким бы средством вы ни воспользовались, в результате получите файлы, содержащие, кроме всего прочего, специальные коды разметки или форматирования документа. Эти коды, называемые тегами,

– инструкции (команды) языка HTML (HyperText Markup Language, язык разметки гипертекста). Они представляют собой некоторые предопределённые ключевые слова, заключённые в уголковые скобки < и >. Теги не отображаются на экране или при печати, а лишь управляют отображением. Это своего рода управляющие символы, предназначенные для указания программе просмотра,

6

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

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

WYSIWYG-редакторы – это программы, с помощью которых можно создавать страницы, не имея никакого понятия о языке HTML (What You See Is What You Get – что видишь, то и получаешь). Самым распространённым из них является, вероятно, Microsoft FrontPage

Недостатком WYSIWYG-редакторов является громоздкость созданных с их помощью HTML-документов. Это получается оттого, что WYSIWYG-редакторы вставляют HTML-коды, как говорится, "на все случаи жизни". В результате объём документа, а значит, и время загрузки страницы, увеличивается.

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

Теги бывают двух типов – теги-контейнеры и теги-команды. Тегиконтейнеры состоят из двух частей – открывающей и закрывающей. В открывающую часть кроме названия тега включаются при необходимости параметры тега, закрывающая часть обозначается дробной чертой, стоящей внутри угловых скобок перед названием тега. Между открывающей и закрывающей частями находятся данные, которые будут выводиться на экран. Например, тег, говорящий браузеру о том, что ему необходимо построить таблицу выглядит так: <TABLE (параметры таблицы)> данные, которые мы хотим показать в таблице </TABLE>.

Из истории

К середине 90-х годов прошлого века язык HTML приобрёл широкую популярность. Различные компании – разработчики программного обеспечения

1 Браузер – от английского слова Browser (окно просмотра или обозреватель). Имеется в виду программа-

обозреватель Интернета – Interne Explorer, Opera, Netscape Navigator или другая.

7

для работы в Интернете стали предлагать свои варианты тегов HTML и способы их интерпретации браузерами. Поэтому назрела необходимость стандартизации языка. Созданием спецификации HTML занялся Word Wide Web Consortium (W3C, Консорциум всемирной паутины) – организация, в состав которой вошли крупнейшие производители программного обеспечения для Интернета, такие как

Microsoft, Sun Microsystems, Netscape и др. В конце 1995 г. вышла в свет спецификация HTML 2.0, оформившая практику использования HTML, которая сложилась к концу 1994 г.

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

Вскоре после выхода спецификации HTML 2.0 появился рабочий вариант HTML 3.0 со сроком окончания обсуждения в сентябре 1995 г. Эта спецификация так и не стала официальной рекомендацией.

Вмае 1996 г. был выпущен проект. HTML 3.2, а уже в сентябре того же года он стал рабочей обсуждаемой версией. В январе 1997 г. спецификация HTML 3.2 была принята в качестве официальной рекомендации. Когда говорят о простом или классическом HTML, имеют в виду именно спецификацию версии 3.2.

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

Виюле 1997 г. консорциум W3C выпустил проект спецификации HTML 4.0, который уже в декабре стал официальной рекомендацией. Это – последняя из принятых спецификаций HTML, которую ещё называют динамическим HTML

(DHTML).

Вответ на потребность в мощных средствах форматирования в DHTML появились так называемые CSS (Cascading Style Sheets, каскадные таблицы стилей). Теперь параметры тегов стало возможным задавать не только с

помощью атрибутов, но и с помощью специальных средств – правил

8

форматирования. Главная идея применения CSS – отделение описания структуры документа от его визуального представления.

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

Для управления элементами HTML-документов и даже самим браузером, генерации новых документов, организации диалогового взаимодействия с пользователем, выполнения каких-то расчётов и обработки данных в HTML была предусмотрена интеграция со специальными языками программирования. Программы, написанные на этих языках, называют сценариями (scripts). Стандартным языком сценариев является JavaScript. Его должны уметь интерпретировать все Web-браузеры. Браузер Microsoft Internet Explorer помимо

JavaScript воспринимает ещё один язык – VBScript (Visual BasicScript), чего нельзя сказать о других браузерах.

Каким образом сценарии взаимодействует с HTML-документом и браузером? Дело в том, что браузер и загруженный в него HTML-документ представлены внутри обозревателя посредством иерархического множества объектов – так называемой объектной модели документа (Document Object Model, DOM). Для сценария объекты браузера и HTML-документа образуют доступную среду. Изменяя свойства этих объектов с помощью сценария, можно модифицировать содержимое и внешний вид документа без перезагрузки его в браузер. Таким образом, динамический HTML покоится на трёх "китах" – классическом HTML, CSS и скриптах, а сами "киты плавают в море" объектной модели.

Контрольные вопросы и задания

1.Что понимается под аббревиатурой HTML?

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

3.Какие типы редакторов для создания HTML-документов выделяют? Приведите примеры программ для каждого типа.

4.Что такое тег (дескриптор)?

5.Когда язык HTML приобрёл широкую популярность? Какая спецификация HTML считается классическим HTML?

6.Что такое DHTML?

9