Основы создания сайтов на языке...

1

ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ ГОРОДА МОСКВЫ

Государственное бюджетное образовательное учреждение

«Московский центр технологической модернизации образования»

Основы создания сайтов

на языке HTML

Методическое пособие

Москва

2014

2

Основы создания сайтов на языке HTML: Методическое пособие. Автор-

составитель: Ю.В. Кузнецова, начальник сектора методического сопровождения

отдела подготовки кадров – М.: ГБОУ «ТемоЦентр», 2014. – 75 с. с ил.

Настоящее учебное пособие предназначено для педагогов и сотрудников

образовательных учреждений. Ориентировано для пользователей, прошедших

начальный уровень программы подготовки квалификации. В нем представлен

материал по основам использования языка HTML для создания Web-страниц.

Изложение материала сопровождается большим количеством примеров,

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

контрольные работы.

3

Оглавление

ВВЕДЕНИЕ ................................................................................................................................................................. 4

ЯЗЫК РАЗМЕТКИ HTML ......................................................................................................................................... 5

1. ОСНОВЫ НТМL .................................................................................................................................................... 5

2. ОБЩИЕ ИДЕИ ПОСТРОЕНИЯ HTML ДОКУМЕНТОВ ................................................................................................ 8

3. МЕТА-ТЭГИ .........................................................................................................................................................11

4. ФОРМАТИРОВАНИЕ ТЕКСТА .................................................................................................................................13

5. ГИПЕРССЫЛКИ И ИЛЛЮСТРАЦИИ .........................................................................................................................21

ПРАКТИЧЕСКИЕ ЗАДАНИЯ ................................................................................................................................26

КОНТРОЛЬНОЕ ЗАДАНИЕ № 1 ...........................................................................................................................27

6. ФРЕЙМЫ ...............................................................................................................................................................27



7. СПИСКИ И ТАБЛИЦЫ ............................................................................................................................................32


8. ТАБЛИЦЫ .............................................................................................................................................................36



9. ОБЪЕКТЫ ..............................................................................................................................................................43

10. НАВИГАЦИОННЫЕ КАРТЫ ..................................................................................................................................50



11. ФОРМЫ ...............................................................................................................................................................55



Приложение A Специальные символы HTML .......................................................................................63 Приложение B Фоновые цвета .............................................................................................................64 Приложение С Вопросы для самопроверки ..........................................................................................66 Приложение D Варианты для выполнения практических заданий* .................................................67 Приложение E Критерии оценки сайтов .............................................................................................68 Приложение F.Итоговый тест ............................................................................................................69

СПИСОК ЛИТЕРАТУРЫ .........................................................................................................................................75

4

Введение

Цель данного учебного пособия – предоставить слушателям развернутый материал по

основам HTML.

Основное внимание слушателей должно быть нацелено на приобретение практических

навыков по созданию активных Web-страниц. После изучения материала слушатели должны

знать:

Существующие стандарты НТМL.

Функции и назначение консорциума Word Wide Web.

основные клиентские web-технологии и особенности их использования;

понятие языка разметки гипертекста – HTML;

Версии HTML и их отличительные особенности.

Структуру Web-страницы.

Основные тэги HTML, и их параметры.

Принципы построения HTML документа.

Тэги физического форматирования текста.

Организацию связей информационных объектов.

Организацию переходов по фреймам.

Структурирование информации на странице при помощи списков и таблиц.

Способы вставки изображений в HTML документ.

Тэги работы с объектами и формами.

Изложение материала в пособии сопровождается большим количеством примеров,

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

выполнения, приведен список рекомендуемых информационно-справочных ресурсов Internet по

рассматриваемым проблемам. Учебное пособие содержит также список вопросов для

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

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

представления об Internet и World Wide Web (WWW).

В пособии даются базовые сведения по структуре HTML-документов, приводятся

основополагающие знания, необходимые для создания Web-страниц, освещается синтаксис

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

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

Для изучения примеров, выполнения упражнений и практических заданий Вам

понадобится:

любой браузер (Internet Explorer или Netscape Navigator);

простейший редактор текстовых файлов, поддерживающий русский язык в выбранной

Вами кодировке, например, Notepad.

При изучении материалов пособия рекомендуется на практике самостоятельно разбирать

все предлагаемые в тексте примеры (выделенных шрифтом Courier), проделывать упражнения и

практические задания.

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#cod

5

Язык разметки HTML

1. Основы НТМL

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

компьютерных сетей, объединяющих компьютеры во всем мире в едином информационном

пространстве, имя которому – Internet.

Internet объединяет сотни тысяч компьютеров повсюду в мире. Эти машины могут быть

самых разнообразных типов с различными операционными системами.

Существует несколько стандартов для организации связи между клиентом (компьютером,

принимающим информацию) и сервером (компьютером, который является источником

информации). Среда World Wide Web основана на протоколе передачи гипертекста HTTP

(HyperText Transfer Protocol), но позволяет использовать протокол передачи файлов FTP (File

Transfer Protocol), электронную почту (E-mail) и другие средства.

Web-страницы являются гипертекстовыми и гипермедийными документами, которые

могут содержать графику, аудио- и видеоинформацию и ссылки на другие ресурсы сети Internet.

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

который понимали бы все компьютеры. Языком публикации, используемым в WWW, является

HTML (HyperText Markup Language - язык разметки гипертекстов).

HTML дает авторам средства для:

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

фотографиями и т.д.;

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

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

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

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

приложений непосредственно в документы (20).

Язык разметки гипертекстов — это набор специальных инструкций, называемых тэгами

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

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

Тэги языка в таких документах каким-то образом кодируются, выделяются относительно

основного содержимого документа и служат в качестве инструкций для программы,

производящей показ содержимого документа на стороне клиента. В самых первых системах для

обозначения этих команд использовались символы “<” и “>”, внутри которых помещались

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

стандартным.

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

создан специально для организации информации, распределенной в сети Интернет, и является

одной из ключевых составляющих технологии WWW. С использованием гипертекстовой

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

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

информации.

HTML является упрощенной версией стандартного общего языка разметки — SGML

(Standart Generalised Markup Language), который был утвержден ISO в качестве стандарта еще в

80-х годах XX века. Этот язык был предназначен для создания других языков разметки, он

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

Контроль за правильностью использования дескрипторов осуществляется при помощи

специального набора правил, называемых DTD-описаниями, которые используются

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

6

набор правил, описывающих грамматику соответствующего языка разметки. С помощью SGML

можно описывать структурированные данные, организовывать информацию, содержащуюся в

документах, представлять эту информацию в некотором стандартизованном формате. Но, в

виду некоторой своей сложности, SGML использовался, в основном, для описания синтаксиса

других языков (наиболее известным из которых является HTML), и немногие приложения

работали с SGML-документами напрямую.

Гораздо более простой и удобный, чем SGML, язык HTML позволяет определять

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

помощи которых осуществляется процесс разметки. Инструкции HTML, в первую очередь,

предназначены для управления процессом вывода содержимого документа на экране

программы-клиента и определяют этим самым способ представления документа, но не его

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

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

протокола HTTP. Эта особенность, а также то, что HTML является открытым стандартом и

огромное количество пользователей имеет возможность применять возможности этого языка

для оформления своих документов, безусловно, повлияли на рост популярности HTML и

сделали его сегодня главным механизмом представления информации в WWW.

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

экране клиента, но и в механизме, позволяющем определять структуру документа, описывать

содержащиеся в нем элементы. HTML обладает несложным набором команд и вполне успешно

справляется с задачей описания текстовой информации и отображением ее на экране

программы просмотра — браузера. Однако сами отображаемые данные никак не связаны с теми

тэгами, которые используются для форматирования, поэтому у программ-анализаторов нет

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

встретив, например, такое описание:

<font color="red">rose</font>,

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

<font></font> и, вероятно, отобразит его правильно, но ей абсолютно безразлично, в каком

месте документа встретился этот тэг, в какие другие тэги заключен текущий фрагмент,

существуют ли вложенные в него фрагменты, правильно ли построены отношения между

объектами. Такое «безразличие» к структуре документа приводит к тому, что поиск или анализ

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

элементы текстовым файлом. А это, как известно, не самый эффективный способ работы с

информацией.

Другим существенным недостатком HTML можно назвать ограниченность набора его

тэгов. DTD-правила для HTML определяют фиксированный набор дескрипторов и поэтому у

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

появляются новые расширения языка (на сегодняшний день последней версией HTML является

HTML 4.0), но долгий путь их стандартизации, сопровождаемый постоянными разногласиями

между основными производителями браузеров делают практически невозможной быструю

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

(например, мультимедийной, математических, химических формул и т.д.).

Первая версия HTML была разработана в начале 90-х годов Тимом Бенерс-Ли для

популярного в прошлом браузера Mosaic. Но в те времена ни для браузера, ни для самого языка

еще не нашлось достойного применения. В 1993 году появился HTML+, и эта версия также

осталась практически незамеченной. Язык HTML приобрел популярность в середине 90-х

годов, благодаря экспоненциальному росту сети Internet. К этому времени назрела

необходимость стандартизации языка, поскольку различные компании, разрабатывавшие

программное обеспечение для доступа в Internet, предлагали свои варианты инструкций HTML,

число которых все возрастало и возрастало. Настала пора прийти к какому-то единому

соглашению в части применения тэгов языка HTML.

7

Работу по созданию спецификации HTML взяла на себя организация, называемая World

Wide Web Consortium (сокращенно — W3C). В ее задачу входило составление спецификации,

отражающей современный уровень развития возможностей языка с учетом разнообразных

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

гипертекста дала версия 2.0, которая появилась в июне 1994 года. Это был момент начала роста

популярности WWW по всему миру. Элементы, включенные в версию 2.0, в большинстве

своем, используются и по сей день.

Схема утверждения спецификаций состоит в следующем. Консорциум W3C выпускает

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

рабочий (draft) вариант спецификации и предлагает его к обсуждению на определенный период.

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

официально признанным вариантом спецификации HTML.

В версии 3.0 HTML, которая появилась год спустя, была реализована возможность

прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д.)

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

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

браузеры (Arena). Однако Консорциум W3C не нашел возможности разработать хорошую

спецификацию для такого большого числа инструкций. Эта спецификация так и не была

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

дальнейшего распространения.

После долгих размышлений в мае 1996 г. был выпущен проект HTML 3.2. Проект

основывался на части тэгов, имеющихся в версии 3.0, которые показывали стабильность в

работе. В сентябре 1996 г. после нескольких месяцев обсуждения версия 3.2 стала предлагаемой

спецификацией, а в январе 1997 г. — официальной рекомендацией. Даже сейчас на основе этой

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

современные браузеры стопроцентно поддерживают версию 3.2, поэтому у авторов не

возникают сомнения по поводу работоспособности заявленных элементов.

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

W3C, компании-производители браузеров создавали собственные элементы (расширения).

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

включались в спецификацию следующей версии языка.

Июль 1997 года ознаменовался выходом предлагаемой спецификации HTML 4.0 (Dynamic

HTML), которая в декабре 1997 г. стала официальной рекомендацией. На сегодняшний день это

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

это было со спецификацией 3.0) спецификация XHTML 1.0.

В спецификации HTML 4.0 ключевой идеей стало отделение описания структуры

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

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

спектра платформ, сред и т. п., а также облегчает внесение исправлений в документы. В

соответствии с этой идеей следует шире пользоваться методами описания представления

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

представления вперемешку с содержанием документа. Для реализации этой идеи в

спецификации HTML 4.0 ряд тэгов, используемых для непосредственного задания формы

представления HTML-элементов, отменены. К отмененным по этой причине тэгам относятся

CENTER, FONT, BASEFONT, S, STRIKE, U. Среди других отмененных тэгов можно

отметить ISINDEX, APPLET, DIR, MENU. Вместо отмененных тэгов предлагаются

альтернативные варианты реализации соответствующих возможностей.

Понятие отмененного (deprecate) тэга состоит в следующем. Если в данной спецификации

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

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

эти тэги, возможно, будут переведены в разряд устаревших (obsolete). Устаревшие тэги могут

8

более не поддерживаться браузерами. В спецификации HTML 4.0 устаревшими названы всего

три тэга: ХМР, PLAINTEXT и LISTING. Официальные сведения о спецификации HTML

всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/.

Спецификация 4.0 находится по адресу http://www.w3.org/TR/REC-html40-971218.

В настоящее время идет плавный переход к спецификации XML, которую на сегодняшний

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

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

от HTML. В связи с этим W3-консорциум разработал переходную версию - XHTML 1.0. XML

не является языком как таковым – это синтаксис для описания структур данных, мета-язык,

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

методов для кодирования и форматирования информации. В отличие от HTML, XML позволяет

не только описывать структуру информации, но и ее контекст. Посредством XML структуру

документа, ее содержимое и способы ее отображения можно представить в виде трех

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

различными способами, например, в зависимости от типа клиента или от типа запрашиваемого

документа.

Современные браузеры обладают широкими возможностями, но основным для них

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

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

При этом просмотр информационных фрагментов может осуществляться пользователем в

произвольном порядке. В HTML все элементы связи между фрагментами текста находятся в

теле самого документа и записываются в ASCII формате.

2. Общие идеи построения HTML документов

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

окружен тэгами (tags).

Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько

параметров (атрибутов). Название тэга вместе с его параметрами заключаются в скобки < >. В

общем, виде тэг выглядит следующим образом:

<тэг параметр1=значение1 параметр2=значение2 ...> Текст1</тэг>

Действие тэга распространяется на фрагмент текста «Текст1». Значения параметров

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

Первый тэг называется открывающим, а парный ему - закрывающим. Закрывающий тэг

имеет тот же идентификатор, но начинается с символа /. Тэги, не предусматривающие наличие

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

Непарные тэги имеют вид:

<тэг параметр1=значение1 параметр2=значение2 ...>

Пример непарного тэга — <HR>, вставляющего горизонтальную линию.

Пример:

<P align=”left”>Текст2</P>

Выделить «Текст2» в отдельный абзац с выравниванием по левому краю.

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

Интерпретация текста HTML документа производится сверху вниз. В том случае, если

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

выводятся только для тэга сценария.

Все символы управления текстом в HTML документе (несколько пробелов подряд,

http://www.w3.org/TR/

http://www.w3.org/TR/REC-html40-971218

9

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

Строчные и прописные символы в именах (идентификаторах) тэгов и их атрибутов, как

правило, не различаются.

Документ в формате HTML 4.0 состоит из трех частей:

строки, содержащей информацию о версии HTML*;

раздела заголовков (определяемого элементом HEAD);

тела, которое включает собственно содержимое документа (тело может вводиться

элементом BODY или элементом FRAMESET).

Перед каждым элементом или после каждого элемента может находиться пустое

пространство (пробелы, переход на новую строку, табуляции и комментарии).

Разделы 2 и 3 должны начинается с открывающего тэга <HTML> и заканчивается парным

закрывающим тэгом </HTML>. Любой HTML документ разделен на две части: головную

(head) и основную (body). Головная часть содержит информацию о документе в целом, а

основная – собственно текст документа. Для того чтобы отделить эти части друг от друга

используются одноименные тэги разметки.

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

содержащий название страницы. Название – это текст, который высвечивается в строке

заголовка браузера при загрузке Web-страницы.

Пример простого документа HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<HEAD>

<META HTTP-EQUIV=”Content-Type”

CONTENT=”text/html; CHARSET=windows-1251”>

<TITLE>Простая страница</TITLE>

</HEAD>

<BODY>

В документе HTML должна быть объявлена используемая в нем версия языка HTML. Объявление типа

документа указывает определение типа документа (DTD). HTML 4.0 определяет три DTD, так что авторы должны

включать в свои документы одно из следующих объявлений типов. Разница между DTD заключается в

поддерживаемых ими элементах.

HTML 4.0 Strict DTD (строгое определение) включает все элементы и атрибуты, не являющиеся

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

используйте такое объявление типа документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

HTML 4.0 Transitional DTD (переходное определение) включает все, что включено в строгое DTD, а также

нежелательные элементы и атрибуты (большинство из которых относится к визуальному представлению). Для

документов, использующих это DTD, используйте такое объявление типа документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/REC-html40/loose.dtd">

HTML 4.0 Frameset DTD (определение для кадров) включает все, что включено в переходное DTD, а также

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"http://www.w3.org/TR/REC-html40/frameset.dtd">

10

<P> Текст, выводимый на экран.</ P>

</BODY>

</HTML>

При просмотре документа, приведенного в примере, в окне браузера появится следующее

(см. рис. 1).

Рассмотрим основные тэги HTML данного примера (см. табл. 1).

Таблица 1.

Основные тэги HTML

Тэг Значение тэга

HTML Тэг, ограничивающий весь HTML-документ в целом.

HEAD Головная часть, содержащая информацию об HTML-документе в целом.

TITLE Титульная строка — обязательный элемент головной части HTML-документа.

Используется как заголовок окна, в котором отображается документ.

BODY Тэг основной части HTML-документа, содержащий текст, связи с другими

документами, ссылки и др.

Параметры:

BACKGROUND – адрес фонового изображения;

BGCOLOR – цвет фона документа, задается англоязычными названиями цветов (напр.

GREEN) или шестнадцатеричными значениями RGB (напр. #008000);

TEXT – цвет текста страницы;

ALINK, LINK, VLINK – цвет активных, еще не просмотренных и уже просмотренных

ссылок;

TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN – поля документа

в пикселях (точках).

Рис.1. Пример простейшей HTM- страницы

11

Упражнение 1. Создание простейшей Web-страницы

1. Запустите текстовый редактор Блокнот (Пуск\Программы\Стандартные\Блокнот).

2. Введите следующий документ:

<HTML>

<HEAD>

<ТITLЕ>Заголовок документа

</ТIТLЕ>

</HEAD>

<BODY>

Содержание

документа

</BODY>

</HTML>

3. Сохраните этот документ под именем first.htm. Перед сохранением выберите тип файла

«все файлы (*.*)». В противном случае редактор Блокнот может автоматически сохранить

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

просматриваться в браузере.

4. Запустите программу Internet Explorer (Пуск\Программы\Internet Explorer).

5. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл first.htm.

6. Посмотрите, как отображается этот файл — простейший корректный документ HTML. Где

отображается содержимое элемента TITLE? Где отображается содержимое элемента

BODY? Как отображаются слова «Содержание» и «документа», введенные в двух

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

3. МЕТА-тэги

В рассмотренном нами примере кроме тэга-контейнера <TITLE> в разделе HEAD

размещены META-тэги. Их роль не заметна при отображении страницы. Это лишь команды для

Web-сервера или браузера, но команды важные, и правильное использование META-тэгов дает

нам некоторые преимущества. МЕТА-тэги не являются контейнерами и тэга </META> не

существует.

МЕТА-тэги, как правило, применяются с двумя параметрами со значениями:

первый параметр — это либо HTTP-EQUIV, либо NAME. Если этот параметр опущен,

то по умолчанию принимается HTTP-EQUIV;

второй параметр — CONTENT.

В примере, приведенном выше, головная часть документа содержит тэг META,

указывающий тип документа и используемую кодовую страницу (для отображения букв

русского алфавита).

Следующая таблица (табл. 2) состоит из нескольких примеров составления МЕТА-тэгов.

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

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

прочитать о них в любом хорошем HTML-справочнике.

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#cont


12

Таблица 2

Значения некоторых МЕТА-тэгов

№

п/п

МЕТА-тэг Значение МЕТА-тэга

1. <META http-equiv="refresh" content="1;

url=адрес_странички">

Автоматическое перенаправление. Браузеру

дано указание автоматически перейти на

страничку с указаным адресом после 3-х

секундной задержки. Задержка нужна,

чтобы пользователь успел прочитать

информацию

2. <META http-equiv="pragma" content="no-

cache">

Запрет кэширования страничек. Браузер

будет брать, свежую страничку, а не

использовать старую из кэша

3. <META name="author" content="Ваше

имя">

Авторство. Таким образом, Вы можете

указать свое авторство на страничку

4. <META name="description"

content="Краткое описание странички">

О чем Ваша страничка (обычно 1

предложение)

5. <META name="keywords"

content="Ключевые слова">

Подготовка страничек для поисковых

систем. Здесь размещают ключевые слова

или короткие фразы, в общей сложности не

более 1000 символов, по которым

поисковые сервера отыскивают Вашу

страничку в Сети. Все слова или фразы

пишутся через запятую

6. <META http-equiv="content-

type"content="text/html;charset=windows-

1251">

Указание языка, на котором написана

страничка. Браузер будет читать Вашу

страницу написанную на русском языке,

используя кодировку win-1251


13

Упражнение 2. Использование Мета-тэгов в HTML-документе

1. Откройте документ first.htm, созданный ранее, в программе Блокнот.

2. Вставьте в документ Мета-тэг, который будет информировать браузер о кодировке

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

содержания, ключевых слов и автора Web-страницы.

<HTML>

<HEAD>

<ТITLЕ>Заголовок документа

</ТIТLЕ>

<META http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>

<META name=”Description” content=”Моя личная страничка”>

<META name=”Keywords” content=”домашние цветы, сорта роз”>

<META name=”Author” content=”Сергеева Екатерина”>

</HEAD>

<BODY>

Содержание

документа

</BODY>

</HTML>

4. Форматирование текста

Для форматирования текста HTML-документов предусмотрена целая группа тэгов,

которую можно условно разделить на тэги логического и физического форматирования.

Основное различие между ними заключается в том, что тэги физического форматирования

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

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

настроек пользователя (разрешение экрана, выбранные шрифты, тип и настройки браузера и

т.д.)

Между разработчиками HTML-документов долгое время шли споры о преимуществах и

недостатках того или иного подхода. С выходом спецификации HTML 4.0 эти споры

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

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

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

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

и т. д.).

Тем не менее, на настоящий момент может свободно использоваться и физическое

форматирование. В спецификации HTML 4.0 некоторые тэги физического форматирования не

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

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

призванные заменить отдельные тэги физического форматирования, распознаются не всеми

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

логический тэг<DEL>, который рекомендуется использовать вместо физического

тэга<STRIKE>.

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#3_3


14

Все тэги, как физического, так и логического форматирования являются тэгами-

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

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

заголовки, подзаголовки, таблицы, абзацы и др.

Одним из первых правил составления практически любых документов является разбиение

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

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

поэтому для создания абзаца используется специальный тэг разделения на абзацы<Р>. Перед

началом каждого абзаца текста следует поместить тэг<Р>. Закрывающий тэг</P> не обязателен,

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

отделяют абзацы друг от друга пустой строкой.

Браузеры обычно интерпретируют несколько стоящих подряд тэгов абзаца<Р> как один.

Поэтому создать несколько пустых строк при помощи этого тэга не удается.

Тэг<P> может задаваться с параметром горизонтального выравнивания align. По

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

Параметр align может иметь одно из четырех значений:

left - выравнивает текст абзаца по левому краю. Правый край при этом получается неровным;

center - в этом случае абзац выравнивается по центру, оставляя неровные края слева и справа;

right - выравнивание происходит по правому краю. Естественно, что неровным остается левый

край;

justify - выравнивание по ширине. В этом случае оба края - левый и правый - будут ровными.

Например, текст этого документа.

Основные тэги физического форматирования текста приведены в таблице 3.

Таблица 3.

Тэги физического форматирования

Тэг Назначение Приме

р

Комментарии

<B> Отображает текст

полужирным шрифтом Текст В большинстве случаев рекомендуется вместо

этого тэга использовать тэг логического

форматирования<STRONG>.

<I> Отображает текст

курсивом

Текст Для большинства случаев вместо этого тэга

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

форматирования<ЕМ>,<DFN>,<VAR>

или<CITE>, поскольку последние лучше

отражают назначение выделяемого текста.

<TT> Отображает текст

моноширинным

шрифтом

Текст Для большинства случаев вместо этого тэга

лучше использовать тэги<CODE>,<SAMP>

или<KBD>.

<U> Отображает текст

подчеркнутым.

Текст Отмененный тэг. Вместо него рекомендуется

использовать тэги<STRONG> или<CITE>.


http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#dep

15

<STRIK

E> и<S>

Отображают текст,

перечеркнутый

горизонтальной линией

Текст Отмененные тэги. Вместо них следует

использовать тэг<DEL>

<BIG> Выводит текст

шрифтом большего

(чем непомеченная

часть текста) размера

Текст Вместо данного элемента лучше

использовать<STRONG> или тэги заголовков,

например,<H2>. Большинство браузеров

поддерживают вложенные тэги<BIG>, однако

использовать такой подход не рекомендуется.

<SMAL

L>

Выводит текст

шрифтом меньшего

размера

Текст Хотя для данного тэга нет альтернативы среди

тэгов логического форматирования, на практике

этот тэг используется крайне редко. Уменьшение

шрифта обычно достигается другими методами, о

которых речь пойдет дальше.

<SUB> Сдвигает текст ниже

уровня строки и

выводит его (если

возможно) шрифтом

меньшего размера

Техт Удобно использовать для математических

индексов. Например: a1, x25 и т.д.

<SUP> Сдвигает текст выше

уровня строки и

выводит его (если

возможно) шрифтом

меньшего размера

Техт

Удобно использовать для задания степеней чисел

в математике. Например: a2, x

15 и т.д.

Все тэги-контейнеры могут вкладываться в другие тэги-контейнеры, но ни в коем случае

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

Тэг<FONT> указывает параметры шрифта и также относится к тэгам физического

форматирования уровня текста. Назначение параметров шрифта непосредственно в тексте

документа нарушает основную идею разделения содержательной части документа и описания

формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг отнесен к

отмененным. Его применение рекомендуется только на первых этапах работы.

Для тэга<FONT> могут задаваться следующие параметры: face, size и color. Параметр

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

выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра

служит название шрифта, которое должно в точности совпадать с названием шрифта,

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

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

как один, так и несколько названий шрифтов, разделяя их запятыми. Это весьма полезное

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

разному. Другим важным качеством является задание предпочтения использования шрифтов.

Список шрифтов просматривается слева направо. Если на компьютере пользователя нет

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




16

Пример использования параметра face:

<FONT face="Verdana", "Arial", "Helvetica">

Пример задания названия шрифта.

</FONT>

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

будет использован шрифт Arial и т.д.

Параметр size служит для указания размеров шрифта в условных единицах от 1 до 7.

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

что размер «нормального» шрифта соответствует значению 3. Настройки размеров шрифта,

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

зависят от браузеров. Размер шрифта указывается как абсолютной величиной (size="2"), так и

относительной (size="+1").Последний способ часто используется в сочетании с заданием

базового размера шрифта с помощью тэга<BASEFONT>, речь о котором пойдет ниже. Само

собой разумеется, что можно не только увеличивать знаком "+", но и уменьшать размер шрифта

(size="-2"). Необходимо заметить, что относительное изменение размера шрифта (+2; -1 и т.д.)

происходит относительно так называемого «базового размера», который, равен по умолчанию

3. Если Вы изменили абсолютно или относительно этот размер, то после завершающего

тэга</FONT> он опять примет значение 3. Таким образом, значения "2" и "+2" принципиально

различны: первое устанавливает размер шрифта равным 2, а второе увеличивает его на 2

условные единицы (в нашем случае размер шрифта будет 5).

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

стандартных имен или в формате #RRGGBB.

Тэг<BASEFONT> используется для указания размера, типа и цвета шрифта,

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

однако могут в нужных местах переопределяться с помощью тэга<FONT>. После

закрывающего тэга</FONT> действие тэга<BASEFONT> восстанавливается. Значения

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

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

Тэг<BASEFONT> может появляться также и в разделе<HEAD> документа.

Для тэга<BASEFONT> не существует закрывающего тэга. В качестве параметров могут

использоваться точно такие же параметры, что и для тэга<FONT>, а именно: face, size и color.

Назначение и правила записи параметров аналогичны. Тэг<BASEFONT> также относится к

отмененным тэгам.

Перейдем к рассмотрению тэгов логического форматирования. Основная особенность

тэгов логического форматирования состоит в том, что они по разному интерпретируются

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

Таблица 4.

Тэги логического форматирования

Тэг Назначение Комментарии

<ABBR> Отмечает свой текст как

аббревиатуру

(ABBReviation).

Несмотря на то, что этот тэг включен в

спецификацию HTML 4.0, он до

настоящего времени не поддерживается

ни одним браузером.

<ACRONYM> Этим тэгом рекомендуется

отмечать так называемые

Распознается только браузером Microsoft

Internet Explorer.


17

акрони-мы, т. е. произно-

симые слова, состоя-щие

из аббревиатур.

<CITE> Используется для отметки

цитат или названий книг и

статей, ссылок на другие

источники и т.д.

Браузерами такой текст обычно

выводится курсивом.

<CODE> Отмечает свой текст как

небольшой фраг-мент

программного кода.

Как правило, отображается

моноширинным шрифтом.

<DEL> Отмечает свой текст как

удаленный.

Текст, помеченный этим тэгом обычно

отображается перечеркнутым текстом. В

спецификации HTML 4.0 этому тэгу

отдается предпочтение перед тэгом

физического форматирования<STRIKE>

или<S>, обозначающих перечеркнутый

текст. Однако тэг<DEL> в настоящее

время распознается только браузером

Microsoft Internet Explorer.

<DFN> Отмечает свой текстовый

фрагмент как определение

(DeFinitioN).

Тэг поддерживается только браузером

Microsoft Internet Explorer. Отображается

по умолчанию курсивом.

<INS> Отмечает свой текст как

вставку (INSertion).

Текст, помеченный этим тэгом, обычно

отображается подчеркнутым текстом. Тэг

в настоящее время распознается только

браузером Microsoft Internet Explorer.

<EM> (EMphasis — выделение,

подчеркивание)

используется для

выделения важных

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

Браузеры обычно отображают такой

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

тэга предпочтительнее применения тэга

физического форматирования<I>

Отмечает текст как

вводимый пользователем с

клавиатуры.

Обычно отображается моноширинным

шрифтом. Применение данного тэга

предпочтительнее применения тэга

физического форматирования<TT>

<Q> Отмечает короткие цитаты

в строке текста.

Обычно отображается курсивом. В

настоящее время распознается только

браузером Microsoft Internet Explorer.

<SAMP> Отмечает текст как

образец (SAMPle).

Обычное использование этого тэга —

отметка текста, выдаваемого

программами (sample output).

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

нескольких символов моно-ширинным

шрифтом. Применение данного тэга


физического форматирования<TT>

18

<STRONG> Как правило, используется

для выделения важных

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

Браузеры обычно отображают такой

текст полужирным шрифтом.

Применение данного тэга


физического форматирования<B>.

Тэгом<STRONG> обычно размечают

более важные фрагменты текста, чем те,

что размечены тэгом<ЕМ>

<VAR> Отмечает имена

переменных программ.

Обычно такой текст отображается

курсивом.

<ADDRESS> Применяется для

идентификации автора

документа и для указания

адреса автора.

Этот элемент располагается либо в

начале, либо в самом конце документа.

Часто в этом элементе указывают дату

создания и последнего обновления

документа. Текст, заключенный между

этими тэгами, обычно показывается

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

Обратите внимание на то, что некоторые элементы дают одинаковый результат. Более

того, часть элементов может никак не изменять представление фрагмента текста на экране.

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

форматирования? Ответ — в названии этой группы элементов. Они предназначены для

расстановки логических ударений, выделения логических частей и подчеркивания сути

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

будущем возможности браузеров возрастут, например, станет, возможен поиск цитат на Web-

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

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

задать желаемое отображение для любого из тэгов, переопределив значения по умолчанию.

Бывают случаи, когда в текст HTML-документа необходимо включить какую-либо

длинную цитату. Для выделения цитат из основного текста существует тэг<BLOCKQUOTE>.

Он является контейнером и может содержать любые элементы форматирования. В отличие от

тэга<Q>, предназначенного для выделения коротких цитат в строке текста,<BLOCKQUOTE>

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

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

вправо.

При отображении текстовых документов в браузере место переноса строки в пределах

абзаца определяется автоматически в зависимости от размера шрифтов и размера окна

просмотра. Перенос строки может осуществляться только по символам-разделителям слов

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

реализующийся независимо от параметров настроек браузера. Для этого служит тэг

принудительного перевода строки<BR>, который не имеет соответствующего закрывающего

тэга. Включение тэга<BR> в текст документа обеспечит размещение последующего текста с

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

типа списков без использования специальных тэгов разметки списка. Или, например, без

данного тэга не обойтись для отображения стихотворений и т.п.

Бывают ситуации, когда требуется выполнить операцию противоположного назначения —

запретить перевод строки. Для этого существует тэг-контейнер<NOBR>. Текст, размеченный

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

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

появится горизонтальная полоса прокрутки.

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#tag


19

Размечая текст с помощью тэга неразрывной строки<NOBR> можно получить очень

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

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

перевод строки). Это можно осуществить, поставив в нужном месте текста тэг<WBR> (Word

BReak), который так же, как и тэг<BR>, не нуждается в закрывающем тэге. Тэг<WBR> вообще

не поддерживается браузером Netscape. Браузер Microsoft Internet Explorer распознает этот тэг

только в тексте, размеченном тэгами<NOBR>.

Наряду с названием всего документа, на Web-странице могут использоваться заголовки

для отдельных частей документа. Эти заголовки могут иметь шесть различных уровней

(размеров) и представляют собой фрагменты текста, которые выделяются на экране при

отображении страницы браузером.

Для разметки заголовков используются тэги<H1>,<H2>,<H3>,<H4>,<H5> и<H6>. Эти

тэги требуют соответствующего закрывающего тэга. Заголовок с номером 1 является самым

крупным (заголовок верхнего уровня), а с номером 6 — самым мелким. Тэги заголовка

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

текста для увеличения их размера. При использовании тэгов заголовков осуществляется вставка

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

требуется.

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

Возможные значения параметра совпадают с параметрами выравнивания тэга абзаца.

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

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

часто используют рельефную, вдавленную линию, чтобы обозначить «объемность» документа.

Тэг<HR> позволяет провести рельефную горизонтальную линию в окне большинства

программ просмотра. Этот тэг не является контейнером, поэтому не требует закрывающего

тэга. До и после линии автоматически вставляется пустая строка. Параметры тэга<HR> могут

быть следующими:

align — выравнивает линию по краю или центру. Может иметь значение left, right или

center;

width — устанавливает длину линии. Длина может выражаться как в пикселях, так и в

процентах;

size — задает толщину линии в пикселях. Используя этот параметр, можно получать

прямоугольники;

noshade — отменяет рельефность линии. Этот параметр не имеет значений;

color — указывает цвет линии.

Например:

<HR align="center" width="50%" noshade>

В этом примере задается горизонтальная линия, которая занимает половину ширины окна

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

Тэг-контейнер<CENTER> предназначен для горизонтального выравнивания всех

элементов посередине окна просмотра браузера. Он имеет уровень блока.

В HTML-документ можно включать комментарии, которые не будут видны читателю.

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

будет отображаться на экране.

Например:

20

Некоторые специальные символы не входят в базовую часть таблицы кодов ASCII. К ним

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

символы. В таких случаях можно вводить нужные символы в HTML-документ при помощи

специальных кодов приведенных в приложении А.

Упражнение 3. Изучение приемов форматирования абзацев

1. Откройте документ first.htm, созданный ранее, в программе Блокнот.

2. Удалите весь текст, находящийся между тэгами <BODY> и </BODY>. Текст, который

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

после тэга <BODY>, а его конкретное содержание может быть любым.

3. Введите заголовок первого уровня, заключив его между тэгами <Н1> и </Н1 >.

4. Введите заголовок второго уровня, заключив его между тэгами <Н2> и </Н2>.

5. Введите отдельный абзац текста, начав его с тэга <Р>. Пробелы и символы перевода

строки можно использовать внутри абзаца произвольно.

6. Введите тэг горизонтальной линейки <HR>.

7. Введите еще один абзац текста, начав его с тэга <Р>.

8. Сохраните этот документ под именем format.htm.

9. Запустите обозреватель Internet Explorer (Пуск\Программы\Internet Explorer).

10. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл

format.htm.

11. Посмотрите, как отображается этот файл. Установите соответствие между элементами

кода HTML и фрагментами документа, отображаемыми на экране.

Упражнение 4. Приемы форматирования текста

1. Откройте документ first.htm в программе Блокнот.



после тэга <BODY>, а его конкретное содержание может быть любым.

3. Введите тэг <BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по

умолчанию увеличенным шрифтом и коричневым цветом.

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

умолчанию. Начните этот абзац с тэга <Р>.

5. Введите тэги: <Р> <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.

6. Введите очередной абзац текста, закончив его тэгом </FONT>.

7. В следующем абзаце используйте по своему усмотрению парные тэги: <В> (полужирный

шрифт), <1> (курсив), <U> (подчеркивание), <8> (вычеркивание), <SUB> (нижний

индекс), <SUP> (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные тэги: <ЕМ> (выде-

ление), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD>

(клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).

9. Сохраните полученный документ под именем format1.htm.



format1.htm.

12. Изучите, как использованные элементы HTML влияют на способ отображения текста.

13. Вернитесь в программу Блокнот и измените документ так, чтобы элементы, задающие

форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

21

14. Вернитесь в программу Internet Explorer и щелкните по кнопке Обновить на панели

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

5. Гиперссылки и иллюстрации

Для связи информационных фрагментов между собой в гипертекстовом (гипермедийном)

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

информационных фрагментах выделяются специальные поля связывания, активизация такого

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

активизировать следующие поля связывания.

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

WWW актуальны следующие типы связей:

поле связывания — метка назначения;

поле связывания — фрагмент;

поле связывания — фрагмент+метка назначения;

поле связывания — подсеть.

Гиперсвязь первого типа определена внутри одного фрагмента (Web-страницы). Метка

назначения отмечает конец гиперсвязи, это именованная строка в HTML документе.

Второй тип ссылается на начало указанного фрагмента (Web-страницы).

При использовании связи третьего типа переход осуществляется не к началу указанного

фрагмента, а к метке, установленной внутри этого фрагмента.

Гиперсвязь четвертого типа ссылается на корневой каталог подсети, откуда есть доступ ко

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

Как для задания ссылок на другие документы, так и для создания метки в теле самого

документа используется тэг <A>. Метка задается тэгом <A> с параметром NAME, значение

этого атрибута — условное имя метки, которое может быть использовано в URL. <A

NAME=“имя метки”>Вложенный текст</A>.

Например:

<A NAME=”метка_1”>Глава 3. Гипертекстовые ссылки</A>

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

Ссылка задается тэгом <A> с параметром HREF. Спецификация:

<A HREF=“адрес”>Текст гиперссылки</A>

Параметр HREF задает адрес в формате URL, к которому следует перейти при активации

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

файлу) поиск происходит в том же месте, где расположен текущий документ. По умолчанию

берется метод HTTP, обеспечивающий обработку HTML файлов. В URL-адресах имя метки

указывается с префиксом #.

Примеры:

<A HREF=”http://www.microsoft.com”>Фирма Microsoft</A>

<A HREF=”#метка_1”>Перейти к третьей главе</A>

В качестве URL можно указать адрес для отправки электронной почты (E-Mail), в этом

случае URL имеет вид mailto:adress, где adress — адрес электронной почты. Например:

<A HREF=“mailto:[email protected]”>Напишите нам!</A>

Для тэга A можно указать параметр TARGET, указывающий в новом (значение _BLANK)

22

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

следующий документ.

Рассмотрим возможности сделать наши страницы более привлекательными, используя

вывод графики средствами HTML.

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

Формат GIF. Картинки в этом формате поддерживают 256 цветов. В большинстве

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

фотографического качества, конечно, далеко. GIF-формат имеет три приятные дополнительные

возможности.

Мультипликация. Используя анимационный GIF-редактор, легко собрать простой

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

"зациклить кино" или показывать кадры только один раз. Когда анимация готова, она

записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия GIF-

картинок и разная настроечная информация.

В HTML нет различия между заданием вывода на экран простого GIF или

анимированного. О том, что картинка «живая» — браузер узнает в момент загрузки GIF-файла

(с диска или сети) и поступает соответственно. Обычные картинки он просто размещает на

экране и «забывает» про них. Анимированные ему приходится постоянно поддерживать, меняя

кадры на экране в соответствии с программой, заложенной в самом GIF.

Прозрачная графика. В GIF-формате один цвет можно объявить прозрачным. Это

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

более привлекательным образом. Прозрачный цвет задается в редакторе при записи GIF-файла

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

или PhotoShop и снова записать на диск, указав прозрачный цвет.

Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на

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

исходного изображения. Вторая — 2, 6, 10,... Третья — 3, 7, 11,... Четвертая — 4, 8, 12,...

Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и

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

Интернета этот метод позволяет пользователю еще до загрузки всех частей получить

представление об изображении — ведь части строятся браузером по мере их поступления на

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

чересстрочного на быстрых компьютерах практически незаметны.

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

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

Конечно, высокое качество отражается на размерах файла. Но формат JPG имеет одну

особенность: в JPG-редакторе, при записи на диск, можно указать ту степень качества, которая

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

компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить

только 10 000, заменив остальные цвета на близкие — на глаз такую подмену будет обнаружить

практически невозможно, а размер файла существенно сократится.

JPG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в

отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из

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

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

Рассмотрим теперь возможности по управлению цветом фона документа, а также

использования изображения в качестве фонового.

Для задания цвета фона употребляется параметр bgcolor тэга<BODY>, а фоновое

изображение включается в документ при помощи параметра background. В качестве значения

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#bgcolor

23

параметра bgcolor указывается название цвета или его составляющие в шестнадцатеричном

коде (см. Приложение B). В качестве фонового изображения должен использоваться

графический файл формата GIF или JPG.

Фоновое изображение для HTML-документа всегда заполняет все окно просмотра. Если

размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу

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

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

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

рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию

материала.

Вот пример записи тэга<BODY> с указанием фонового цвета и фонового изображения:

<BODY background=”texture.gif” bgcolor=”gray”>

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

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

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

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

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

документа расположить на своем фоновом изображении.

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

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

должно быть URL того рисунка, который встраивается в документ. URL может быть как

относительным, так и абсолютным.

Например:

<IMG src="picture.gif">

Другим важным (но уже не обязательным) является параметр align. Возможные значения

параметра align представлены ниже в таблице 5.

Таблица 5.

Значения параметра align тэга<IMG>

Значение

параметра align

Действие параметра.

top Верхняя граница изображения выравнивается по самому высокому

элементу текущей строки.

texttop Верхняя граница изображения выравнивается по самому высокому

текстовому элементу текущей строки.

middle Выравнивание середины изображения по базовой линии текущей

строки.

absmiddle Выравнивание середины изображения посередине текущей строки.

baseline или

bottom

Выравнивание нижней границы изображения по базовой линии

текущей строки.

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=1#uri



24

absbottom Выравнивание нижней границы изображения по нижней границе

текущей строки.

left Изображение прижимается к левому полю окна. Текст обтекает

изображение с правой стороны.

right Изображение прижимается к правому полю окна. Текст обтекает

изображение с левой стороны.

Рассмотрим более подробно действия параметров выравнивания, приведенных в таблице.

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

по их принципу действия. К одной группе относятся два значения параметра — left и right. При

использовании любого из этих параметров мы получаем так называемое «плавающее»

изображение. В этом случае изображение прижимается к соответствующему краю окна

просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с

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

несколько строчек. Если Вы хотите, чтобы рисунок был посередине окна, используйте тэг-

контейнер<CENTER>.

К другой группе значений параметров относятся все остальные. При их использовании

изображение как бы встраивается в строчку текста, а параметры выравнивания задают

расположение изображения относительно строки текста. Таким образом, в отличие от

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

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

правда, достаточно большой (типа буквицы).

С помощью следующих двух необязательных параметров - width (ширина) и height

(высота) - можно изменять размер исходного изображения. Значения этих параметров могут

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

указывается в процентах, то обязательно нужно ставить знак процента (%).

Значения параметров ширины и высоты изображения могут не совпадать с истинными

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

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

параметров может привести к изменению пропорций рисунка и, как следствие, к его

искажению.

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

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

сохранения пропорций. Изменение размеров изображений при помощи задания параметров

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

однако такой подход не сокращает время загрузки изображений.

Если не требуется решать задачу изменения размеров изображения, рекомендуется

указывать их реальные размеры в пикселях с помощью параметров width и height. Определить

действительные размеры используемых Вами изображений можно при помощи любой из

многих программ работы с растровой графикой. Например, в программе MS Paint это можно

сделать в меню "Рисунок - Атрибуты".

Для тэга<IMG> можно задавать параметры hspace и vspace, значения которых

определяют отступы от изображения, оставляемые пустыми, соответственно, по горизонтали и

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

необходимое для нормального восприятия. Значением этих параметров является число,

определяющее количество пикселов, которое браузер будет оставлять между рисунком и

текстом.

25

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

Для этого служит параметр border тэга<IMG>. В качестве значения параметра используется

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

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

ссылкой.

Одним из параметров тэга<IMG> является параметр alt, определяющий альтернативный

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

пользователям, работающим в режиме отключения загрузки изображений, получить некоторую

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

текстовая строка (какая-то текстовая информация), которая будет появляться на месте,

отведенном под рисунок.

Пример:

<IMG SCR=”Images\Foto.gif” ALT=”Фотография моего кота” WIDTH=”378” HEIGHT=”68”>

Графические изображения могут использоваться не только в качестве иллюстраций, но и

выполнять роль указателей ссылок. Для обеспечения работы изображения в качестве ссылки на

другие ресурсы достаточно включить изображение внутрь тэга-контейнера<А>.

Пример:

<A href="URL_HTML-страницы"><IMG src="URL_рисунка"></A>

Если изображение является указателем ссылки, то по умолчанию, браузеры заключают

его в рамку синего цвета. Избежать появления рамки можно, указав значение border="0".

Упражнение 5. Создание гиперссылок




после тэга <BODY>.

3. Введите фразу: Текст до ссылки.

4. Введите тэг: <А HREF="first.htm">.

5. Введите фразу: Ссылка.

6. Введите закрывающий тэг </А>.

7. Введите фразу: Текст после ссылки.

8. Сохраните документ под именем link.htm.


10. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл link.htm.

11. Убедитесь в том, что текст между тэгами <А> и </А> выделен как ссылка (цветом и

подчеркиванием).

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

указывает ссылка.

13. Щелкните по кнопке Назад на панели инструментов, чтобы вернуться к предыдущей

странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается

другим цветом.

Упражнение 6. Создание изображения и использование его на Web-странице

1. Откройте программу Paint (Пуск\Программы\Стандартные\Paint). Задайте размеры

нового рисунка, например 50х50 точек (Рисунок\Атрибуты).

2. Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым

цветом.

3. Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.

4. Сохраните рисунок под именем picture1.gif (в формате GIF).



26

5. Дайте команду Рисунок\Атрибуты. Установите флажок на пункте «Использовать

прозрачный цвет фона». Щелкните по кнопке Выбор цвета и выберите зеленый цвет,

уже использованный на рисунке в качестве фонового.

6. Сохраните рисунок еще раз под именем picture2.gif (в формате GIF) и закройте

программу Paint.




после тэга <BODY>.

9. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор

в его начало.

10. Введите тэг <IMG SRC="picture1.gif" ALIGN="BOTTOM">.

11. Сохраните документ под именем picture.htm.



picture.htm. Посмотрите на получившийся документ, обращая особое внимание на

изображение.

14. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP".

Сохраните файл под тем же именем.


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

16. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT".

Сохраните файл под тем же именем.



18. Вернитесь в программу Блокнот и добавьте в тэг <IMG> атрибуты: HSPACE=40

VSPACE=20. Сохраните файл под тем же именем.



20. Вернитесь в программу Блокнот и измените имя рисунка: SRC="picture2.gif". Сохраните

файл под тем же именем.


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

чем различие между двумя созданными рисунками?

Практические задания

1. Создайте Web-страничку с информацией о себе — выберите цвет фона и текста,

начертание букв; разместите свою фотографию (можно условную). Используйте

различные тэги форматирования текста.

2. Создайте небольшой сайт (4-5 страниц) с информацией о себе и своей семье (или своей

учебной группе, друзьях и пр.). Обоснуйте выбор структуры Web-сайта и способа

навигации по нему. Используйте в качестве фона для HomePage подходящее

изображение. Создайте гиперссылки с помощью фрагментов текста и изображений.

3. Создайте документ, содержащий выдержки из законодательных актов,

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

Выдержите документ в следующем стиле: названия законодательных актов выведите

жирным шрифтом темно-красного цвета размером 20pt. Текст выдержите черным

цветом, курсивом, размер букв - 14 pt.

4. Создайте документ длиной 4-5 экранных страниц, разбитый на смысловые абзацы. Для

перехода от одного абзаца к другому используйте метки.

27

Контрольное задание № 1

В настоящее время существует масса редакторов Web-страниц, которые не требуют от вас

знаний основ HTML. Но для того чтобы уметь профессионально подготавливать

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

HTML. Поэтому для освоения HTML мы будем пользоваться:

любым браузером (Internet Explorer или Netscape Navigator);

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

Вами кодировке, например, Notepad.

Мы будем применять текстовый редактор для подготовки HTML-файлов, а браузер — как

инструмент контроля за сделанным. При этом один и тот же *.html-файл может быть

одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто

нажмите кнопку Reload («Обновить») в браузере, чтобы увидеть эти изменения

реализованными в HTML-документе.

Преобразуйте предложенный Вам согласно варианту электронный документ (см.

приложение С) из линейной формы в гипертекстовую. Для этого:

1- Разбейте текст на несколько отдельных тем — страниц (не менее четырех). Страницы

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

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

страниц. Вся текстовая информация должна быть отформатирована. Старайтесь

обходиться без отмененных тэгов. Укажите, что Вы являетесь разработчиком Web-

страницы, отметьте, что в настоящее время учитесь на факультете информатики

Магнитогорского государственного университета. Создайте ссылку на сайт МаГУ.

Добавьте свой E-mail со ссылкой.

2- Представьте себе некоторый основной путь чтения гипертекста и определите,

соответственно, поля-ссылки, ведущие читателя от темы к теме по этому основному пути.

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

указателями ссылок должны стать как изображения, так и фрагменты текста.

6. Фреймы

Фреймы (от англ. frames - рамка, кадр) — это прямоугольные области, которые создаются

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

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

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

просмотр, которого осуществляется независимо от других. Между фреймами, также как и

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

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

нужного документа в другой фрейм или окно браузера.

Рассмотрим простой пример с использованием фреймов:

<HTML>

<HEAD>

<TITLE>Простой документ с фреймами</TITLE>

</HEAD>

<FRAMESET cols="20%, 80%">

<FRAMESET rows="100, 200">

<FRAME src="frame1.html">


28

<FRAME src="frame2.gif">

</FRAMESET>

<FRAME src="frame3.html">

<NOFRAMES>

<P>В этом документе содержится:

<UL>

<LI><A href="frame1.html">Текст</A>

<LI><IMG src="frame2.gif" alt="Картинка">

<LI><A href="frame3.html">Еще текст</A>

</UL>

</NOFRAMES>

</FRAMESET>

</HTML>

При просмотре мы увидим примерно следующую структуру экрана (см. рис. 2).

Фреймы очень похожи на таблицы — и те и

другие осуществляют разбиение окна просмотра

браузера на прямоугольные области, в которых

располагается некоторая информация. Однако при

помощи фреймов можно решить не только задачу

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

организовать взаимодействие между ними.

Принципиальная разница между фреймами и

таблицами состоит в том, что каждому фрейму

должен соответствовать отдельный HTML-

документ, а содержимое всех ячеек таблицы всегда

является частью одного документа. Кроме того,

отображаемая во фрейме страница может

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

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

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

только по частям.

Если требуется только отформатировать документ, то для этого достаточно ограничиться

применением таблиц. Если же необходимо решить более сложные задачи, например,

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

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

Для организации фреймов используется тэг FRAMESET. Этот тэг заменяет тэг BODY.

Совместное использование этих тэгов недопустимо. Тэг FRAMESET может быть использован

несколько раз, т.е. может быть несколько разделов FRAMESET, но они должны быть

обязательно вложенными.

Внутри контейнера FRAMESET могут содержаться только тэги FRAME и вложенные

тэги FRAMESET. Тэг FRAMESET имеет два параметра: rows (строки) и cols (столбцы) и

записывается в следующем виде:

<FRAMESET rows="список значений" cols="список значений">.

Для создания сетки устанавливаются оба параметра одновременно.

Список значений параметров rows и cols тэга FRAMESET представляет собой

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

Рис. 2. Пример использования фреймов

29

в относительных единицах. Числовое значение без каких-либо символов определяет

абсолютное число пикселов для строки или колонки. Значение со знаком процента (%)

определяет долю от общей ширины (для cols) или высоты (для rows) от окна просмотра, а

значение со звездочкой (*) задает пропорциональное распределение оставшегося пространства.

Например, <FRAMESET cols="100,25%,*,2*">, в данном случае используются все три

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

займет 25 процентов от всей ширины окна просмотра, третий — 1/3 оставшегося пространства

и, наконец, последний столбец — 2/3. Абсолютные значения рекомендуется назначать первыми

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

пространства. В заключение записываются значения, определяющие пропорциональное

разбиение оставшегося пространства.

Если в тэге FRAMESET определено только одно значение для rows и cols, то этот тэг

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

FRAMESET, состоящий только из одного фрейма.

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

тэг FRAME. Тэг имеет ряд параметров, ни один из которых не является обязательным и не

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

используется для загрузки документа, в качестве значения задается адрес URL, например,

<FRAME src=”sample.htm”>. Специфика параметра SRC состоит в обязательности его задания.

Параметр NAME используется для задания имени фрейму. Имя фрейму не следует начинать со

знака подчеркивания и цифры. Параметры MARGINWIDTH и MARGINHEGHT определяют

пространство внутри фрейма, в пределах которого не будет располагаться никакая информация,

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

SCROLLING управляет отображением полос прокрутки, возможные значения yes, no, auto.

Параметр NORESIZE предотвращает возможности изменения пользователем размера фреймов,

не требует никаких значений. При помощи параметра FRAMEBORDER указывается, нужна

или нет рамка внутри фрейма. Этот параметр имеет всего два значения – 1 и 0, по умолчанию

параметр равен единице.

Если браузер не имеет возможности поддержки фреймов, используется тэг NOFRAMES,

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

фреймов. Это выглядит так:

<NOFRAMES>

<P>Это <A href="noframes.html">

версия документа без фреймов.</A>

</NOFRAMES>

Тэг IFRAME реализует концепци. плавающих фреймов. В отличие от обычных фреймов

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

Браузеры, не поддерживающие тэг IFRAME, вместо фрейма будут отображать любую

информацию, записанную между IFRAME и /IFRAME. В тэге IFRAME применяются точно

такие же параметры, как и в тэге описания обычных фреймов, кроме параметра NORESIZE.

Дополнительными параметрами являются WIDTH и HEIGH, которые задают размер

плавающего фрейма, значения этих параметров могут задаваться как в пикселях, так и в

процентах. Параметры HSPACE и VSPACE, значения которых определяют соответственно

отступы по горизонтали и вертикали от границ фрейма. Параметр ALIGN определяет

выравнивание фрейма, возможные значения: left, right, center.

Взаимодействие между фреймами заключается в возможности загрузки документов в

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

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

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

параметра TARGET документ загружается в текущий фрейм. В качестве значений параметра


30

TARGET могут использоваться четыре зарезервированных слова “_blank”, “_self”, “_parent”,

“_top“. TARGET=“_blank” – обеспечивает загрузку документа в новое окно. TARGET=“_self”

– загрузка документа будет произведена в текущий фрейм (или окно). TARGET=“_top“ –

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

то данное значение действует так же, как “_self”. Ссылка со значением TARGET=“_top“

загрузит документ в полное окно вместо всей фреймовой структуры. TARGET=“_parent “ –

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

При отсутствии фрейма-родителя данное значение параметра действует также, как “_top“.

В заключении рассмотрим основные недостатки сайта, построенного с применением

фреймов:

странички сайта не индексируются обычными поисковыми системами, исключая

первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в

себе ссылок вида <a href="">...</a> и поисковые роботы, естественно, не могут попасть на

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

вводить вышеупомянутые ссылки именно для роботов;

в случае попадания не на первую страничку сайта не существует способа перейти на

первую страничку сайта - приходится вручную редактировать путь в адресной строке браузера;

ввиду того, что фреймовая структура сайта придаёт ему достаточно узнаваемый вид,

большинство подобных страничек выглядит достаточно однообразно;

невозможно поставить закладку на внутреннюю страничку сайта;

проблемы отображения странички в разных версиях браузеров.

Упражнение 7. Создание описания фреймов

1. Запустите текстовый редактор Блокнот (Пуск\Программы\Стандартные\Блокнот).

2. Введите следующий документ:

<HTML>

<HEAD>

<ТIТLЕ>Описание фреймов</ТITLЕ>

</HEAD>

<FRAMESET ROWS="60%,*">

<FRAME SRC="format1.htm">

<FRAMESET COLS="35%,65%" NORESIZE> <FRAME SRC="first.htm"> <FRAME

SRC="links.htm">

</FRAMESET>

</HTML>

3. Сохраните этот документ под именем frames.htm.


5. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл frames.htm.

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

7. Посмотрите, что происходит при изменении ширины окна обозревателя.

8. Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при

помощи мыши.

9. Щелкните по ссылке, имеющейся в одном из фреймов, и посмотрите, как будет

отображен новый документ.

10. Щелкните по кнопке Назад на панели инструментов и убедитесь, что возврат к

предыдущему документу на нарушает структуру фреймов.

31

11. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему

усмотрению. Сохраните документ под тем же именем.


инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу.

Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.


1. Создайте страничку, состоящую из двух фреймов. В одном из фреймов

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

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

другом фрейме.

2. Создайте страничку, состоящую из трех фреймов. В одном из фреймов

расположите меню с двумя пунктами-ссылками. При щелчке по ссылкам

документы должны открываться в разных фреймах.


Создайте образ сайта, как показано на рисунке 3:

Рис. 3. Образ сайта.

На основной странице должна быть расположена ссылка на страницу с фреймами. На

странице с фреймами должно располагаться следующее:

Четыре фрейма, как показано на рисунке. Размеры могут быть любыми, но форма должна

получиться примерно такая же, как изображено на рисунке.

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

ссылки на четыре документа созданные Вами в предыдущей контрольной работе и на основную

страницу. Два из этих четырех документов должны открываться во фрейме 3, один — во

фрейме 4, а еще один — в новом окне.

Во всех четырех документах должна быть предусмотрена возможность возврата на

основную страницу.

Во фрейм 2 поместите статический баннер (468*60 - это один из стандартов баннера).

Баннер можете нарисовать сами (приветствуется) или скачать из Сети. Щелчок по баннеру

должен также открывать основную страницу.

Основная страница

2

1 3 4

2

1 4 3

32

7. Списки и таблицы

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

виде списков. Списки являются одним из наиболее часто употребляемых форм представления

данных как в электронных документах, так и в печатных.

Существует несколько тэгов, используемых для создания списка: UL - ненумерованный

список с маркером, OL - нумерованный список, DL - список определений, DIR -

ненумерованный список (длина каждого элемента не более 20 символов), MENU - список типа

“меню”.

Списки типа UL и OL имеют параметр TYPE, задающий тип маркера: I (большие римские

цифры), i (маленькие римские цифры) и 1 (арабские цифры) для нумерованного списка OL или

DISC (закрашенные кружки), CIRCLE (не закрашенные кружки) и SQUARE (квадратики) для

маркированного списка UL. Для нумерованного списка определен параметр START,

позволяющий изменять начальный номер.

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

указывать не обязательно.

Все тэги списков являются тэгами уровня блока.

Пример:

<HTML>

<HEAD>

<TITLE>Cписки</TITLE>

</HEAD>

<BODY>

<DIV>

<FONT SIZE=”4”>Пример использования списка DIR

</FONT>

<DIR><LI>Наука</LI>

<LI>Техника</LI>

<LI>Архитектура</LI>

</DIR>

<B><I>Пример использования UL и вложенных

списков</I></B>

</DIV>

<P ALIGN=”center”>ненумерованные списки</P>

<UL TYPE=”square”>

<LI> Введение</LI>

<LI>Язык HTML</LI>

<MENU>

<LI>Понятие гипертекста</LI>

<LI>Форматирование текста в документе</LI>

<LI>Гипертекстовые ссылки</LI>

</MENU>

33

</UL>

<P>Пример использования <U>нумерованного списка</U>

</P>

<OL>

<LI>Первый раздел</LI>

<LI>Второй раздел</LI>

</OL>

</BODY>

</HTML>

Отображение этого документа в окне браузера – рис. 4.

Рис. 4. Отображение списков на Web-странице

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

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

списка определений всегда состоит из двух частей. В первой части элемента списка

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

раскрывающий значение термина.

Списки определений задаются с помощью тэга-контейнера<DL> (Definition List). Внутри

контейнера тэгом<DT> (Definition Term) помечается определяемый термин, а тэгом<DD>

(Definition Description) — абзац с его определением. Для тэгов<DT> и<DD> можно не

записывать соответствующие закрывающие тэги.

Тэг<DD>, в отличии от тэгов<LI> и<DT>, является тэгом уровня блока. Это значит, что

он может содержать в себе другие тэги уровня блока, например такие как<P> или<H1> —

<H6>.

Пример:

<HTML>

<HEAD>

<TITLE>Cписок определений</TITLE>

34

</HEAD>

<BODY>

<DL>

<STRONG>Термины HTML:</STRONG>

<DT>CSS

<DD>Каскадные таблицы стилей.

<DT>DHTML

<DD>Динамический HTML

<DT>Фрейм

<DD>Область документа со своими полосами прокрутки.

<DD>Одиночное изображение в анимационном графическом файле.

</DL>

</BODY>

</HTML>

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

такого же типа или другого. При этом будут организованы многоуровневые или вложенные

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

организации следует проявлять аккуратность.

Язык HTML не допускает автоматическую многоуровневую нумерацию списков, но это

можно сделать при помощи вложенных списков.

Пример:

<HTML>

<HEAD>

<TITLE> Вложенные списки </TITLE>

</HEAD>

<BODY>

<OL type="I">

<STRONG>Содержание</STRONG>

<LI>Название главы

<OL type="1">

<LI> Название параграфа

<DL>

<DT>1.1. Название пункта

<DD> а) Название части пункта

<DD> б) Название части пункта

<BR>...

</DL>

</OL>

</OL>

35

</BODY>

</HTML>

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

открыт последним и т.д.

Упражнение 8. Приемы создания списков



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

тэга <BODY>, а его конкретное содержание может быть любым.

3. Вставьте в документ тэг <OL TYPE="1">, который начинает упорядоченный

(нумерованный) список.

4. Вставьте в документ элементы списка, предваряя каждый из них тэгом <LI>;

5. Завершите список при помощи тэга </OL>.

6. Сохраните полученный документ под именем spisok. htm.


8. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл spisok. htm.

9. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая

особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.

10. Вернитесь в программу Блокнот и установите текстовый курсор после окончания

введенного списка.

11. Вставьте в документ тэг <ULTYPE="SQUARE">, который начинает неупорядоченный

(маркированный) список.

12. Вставьте в документ элементы списка, предваряя каждый из них тэгом <LI>.

13. Завершите список при помощи тэга </UL>. Сохраните документ под тем же именем.


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

маркировки, заданный при помощи атрибута TYPE=.

15. Вернитесь в программу Блокнот и установите текстовый курсор после окончания

введенного списка.

16. Вставьте в документ тэг <DL>, который начинает список определений.

17. Вставьте в список определяемые слова, предваряя соответствующие абзацы тэгом <DT>.

18. Вставьте в список соответствующие определения, предваряя их тэгом <DD>.

19. Завершите список при помощи тэга </DL>. Сохраните документ под тем же именем.


инструментов. Посмотрите, как выглядит при отображении Web-страницы список

определений.


1- Создайте HTML-документ имеющий следующую структуру списков:

Глава I. Введение

О Web в двух словах

Кто такие Web-мастера

Глава II. Обзор HTML

Описание тэгов HTML и их атрибутов

36

2- Используя вложенные списки, создайте на страничке, следующую структуру:

Часть I. HTML

Глава I.Таблицы

1.1.Тэг <table>

1.2.Тэг <caption>

3- Создайте страничку, содержащую списки определений.

8. Таблицы

Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ

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

друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>.

Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит

из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается тэгом <TR> (Table Row) и завершается тэгом </TR>.

Отдельная ячейка в строке обрамляется парой тэгов <TD> и </TD> (Table Data) или <TH> и

</TH> (Table Header). Тэг <TH> используется обычно для ячеек-заголовков таблицы, а <TD>

— для ячеек-данных. Различие в использовании заключается лишь в типе шрифта,

используемого по умолчанию для отображения содержимого ячеек, а также расположению

данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным (Bold)

шрифтом и располагается по центру (align="center", valign="middle"). Ячейки, определенные

тэгом <TD> по умолчанию отображают данные, выровненные влево (align="left") и посередине

(valign="middle") в вертикальном направлении.

Тэг заголовка таблицы <CAPTION> может иметь, только один параметр — align.

Параметр align может принимать следующие значения:

top — заголовок помещается над таблицей. Это значение используется браузерами по

умолчанию, если параметр align опущен;

bottom — заголовок располагается под таблицей;

left — заголовок помещается слева от таблицы;

right — заголовок помещается справа от таблицы;

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

Хотя тэг <CAPTION> помещается внутри тэга <TABLE>, сам заголовок помещается за

пределами таблицы. Использование тэга <CAPTION> лучше осуществлять без параметров.

Основным тэгом, применяемым при создании таблиц, является тэг <TABLE>. В тэге

<TABLE> могут использоваться следующие параметры: border, cellspacing, cellpadding, width,

align. Браузеры Netscape и Microsoft Internet Explorer разрешают кроме перечисленных пяти

параметров использовать параметры height и bgcolor.

Браузеры последних версий позволяют использовать ряд новых тэгов для

структурирования таблиц и гибкого управления прорисовкой рамок и линий сетки. Тэги

<THEAD>, <TBODY> и <TFOOT> более строго задают структуру описания таблицы, выделяя

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

встречаться только в описании таблиц внутри пары тэгов <TABLE> и </TABLE>.

Тэги <THEAD> и <TFOOT> используются для описания верхнего и нижнего

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

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

создании больших таблиц, выходящих за пределы одной страницы.

37

Тэг <TBODY> может встречаться многократно в описании таблицы, при этом требуется

использование завершающего тэга </TBODY>. Этот тэг выполняет логическое группирование

данных.

При использовании новых тэгов появляется возможность более гибко управлять рамками

и линиями сетки таблицы.

Управление прорисовкой рамок вокруг таблицы осуществляется параметром frame (не

путать с тэгом <FRAME>!) тэга <TABLE>, а линий сетки таблицы — параметром rules.

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

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

Параметр frame может принимать следующие значения:

box или border — рамка рисуется со всех четырех сторон;

above — только с верхней стороны;

below — только с нижней стороны;

hsides — рисуется верхняя и нижняя сторона;

vsides — рисуется левая и правая сторона;

lhs — только с левой стороны;

rhs — только с правой стороны;

void — таблица без внешних рамок.

Параметр rules управляет прорисовкой внутренних линий сетки таблицы и может

принимать следующие значения:

all — рисуются все внутренние линии;

groups — рисуются только линии, разделяющие группы;

rows — рисуются линии, разделяющие строки;

cols — рисуются линии, разделяющие столбцы;

none — внутренние линии не рисуются.

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

только при наличии параметра border тэга <TABLE>. При отсутствии этого параметра или его

нулевом значении линии сетки и рамки будут отсутствовать при любых значениях параметров

frame и rules.

Рассмотрим пример полного HTML-кода, использующего тэги структурирования

таблицы:

<HTML>

<HEAD>

<TITLE> Структурированная

таблица </TITLE>

</HEAD>

<BODY>

<TABLE width="100%" border="5" frame="hsides" rules="groups">

<CAPTION><H3> Пример гибкого управления линиями сетки </H3>

</CAPTION>

38

<THEAD>

<TR> <TH> Заголовок

1<TH> Заголовок 2<TH>

Заголовок 3

</THEAD>

<TFOOT>

<TR><TH> Итого

<TH>Итого<TH>Итого:

</TFOOT>

<TBODY>

<TR><TD>Данные<TD>Да

нные<TD>Данные









</TBODY>

</TABLE>

</BODY>

</HTML>

Браузеры Netscape и Microsoft Internet Explorer отобразят по-разному этот код. Дело в том,

что браузеры Netscape не распознают параметр rules, хотя этот параметр описан в

спецификации.

На рис. 5 показано как отобразит этот код браузер Netscape.

На рис. 6 показано как это делает Microsoft Internet Explorer.

Обратите внимание, что раздел <TFOOT>, хотя и отображается после раздела <TBODY>,

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

соответствии со спецификацией HTML 4.0.

Одной из особенностей представления таблиц различными браузерами является отображение

пустых ячеек. В приведенном выше примере: уберем параметры frame и rules и данные из

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

Обратите внимание, что сама ячейка не прорисовывается. Чтобы ячейка все-таки

прорисовалась, в нее помещают так называемые «распорки». Такой распоркой может быть

какой-нибудь невидимый символ, например & или тэг <BR>. Другой способ - поместить

прозрачный однопиксельный GIF (изображение в формате GIF, размер которого 1×1) в пустую

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

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

неприемлемо.

Рис. 5 Отображение

таблицы броузером Netscape

Рис. 6. Отображение

таблицы броузером Internet Exploer

39

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

(данных, графики) практически как угодно. GIF может быть и не прозрачным. В этом случае,

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

поменять GIF.

Каждую отдельную ячейку внутри таблицы можно рассматривать как область для

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

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

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

внутри тела документа <BODY>, в том числе тэги, управляющие расположением текста —

<P>, <BR>, <HR>, коды заголовков — <H1>...<H6>, тэги форматирования символов — <В>,

<I>, <STRONG>, <BIG>, <EM>, <FONT size>, <FONT color>, тэги вставки графических

изображений <IMG>, гипертекстовых ссылок <А> и т.п. При этом область действия тэгов,

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

наличия завершающего тэга.

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

параметры.

Параметры выравнивания содержимого ячеек — align и valign. Могут применяться в тэгах

<TR>, <TD> и <TH>. Параметр горизонтального выравнивания align может принимать

значения left, right и center (по умолчанию left для <TD> и center для <TH>). Параметр

вертикального выравнивания valign может принимать значения top (по верхнему краю), bottom

(по нижнему краю), middle (посередине), baseline (по базовой линии). По умолчанию — middle.

Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех

ячейках к единой линии. Задание параметров выравнивания на уровне тэга <TR> определяет

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

быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>.

Параметр nowrap отключает возможность автоматического разбиения текста ячейки на

строки. Может применяться в тэгах <TR>, <TD> и <TH>. Следует избегать неоправданного

применения этого параметра, так как это может значительно сократить возможности

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

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

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

словами (пробелам), и в ряде случаев, для запрещения разрыва текста в отдельных местах

следует вместо символа пробела задавать код неразрывного пробела (NonBreaking

Space).

Параметры width и height могут

применяться в тэгах <TD> и <TH>. Их синтаксис

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

<TABLE>. Значения могут задаваться в пикселях

или в процентах от размеров всей таблицы.

Microsoft Internet Explorer разрешает задавать

значение width только в пикселях (что, кстати,

соответствует спецификации).

Параметры nowrap, width и height относятся

к отмененным (deprecate), поэтому их

использование не приветствуется.

Характерной проблемой при создании

таблиц является задание параметров

выравнивания для отдельных строк или столбцов.

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

параметры в тэге <TR>. Однако чаще необходимо обеспечить одинаковое выравнивание всех

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

Рис. 7. Отображение

броузером пустой ячейки

40

данные. В Microsoft Internet Explorer предусмотрены специальные тэги — <COL> и

<COLGROUP>. Эти тэги должны располагаться сразу же за описанием <TABLE> перед

первым появлением тэга <TR>.

Параметрами тэгов <COL> и <COLGROUP> могут быть span, определяющий

количество смежных колонок, на которые распространяется действие значений параметров, и

align, определяющий горизонтальное выравнивание данных во всех ячейках соответствующего

столбца (или столбцов). Допустимыми значениями параметра align являются left, right и center.

Для параметра span значение по умолчанию равно единице.

Тэг <COLGROUP> дополнительно позволяет задавать параметр valign, определяющий

вертикальное выравнивание данных в ячейках. Допустимыми значениями параметра valign

являются middle, top и bottom.

Различие между тэгами <COLGROUP> и <COL> заключается в том, что первый из них,

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

объединение нескольких столбцов в группу. Эффект такого объединения проявляется при

использовании параметра rules.

Поскольку область применения тэгов <COLGROUP> и <COL> ограничивается

единственным браузером Microsoft Internet Explorer (это еще одно нарушение спецификации

браузером Netscape), то следует пользоваться ими с осторожностью. Удобство использования

этих тэгов очевидно, но на практике большинство таблиц строится с использованием

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

необходимо, что значительно увеличивает объем исходного кода таблицы, однако обеспечивает

возможность просмотра в любом браузере.

Для сложных таблиц характерна потребность в объединении нескольких смежных ячеек

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

параметров colspan (column spanning) и rowspan (row spanning), задаваемых в тэгах <TD> или

<TH>. Форма записи: colspan="n", где n — числовое значение, определяющее, на сколько

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

аналогично, только здесь указывается количество строк, которые должна захватить текущая

ячейка по вертикали. По умолчанию для этих параметров устанавливается значение, равное

единице.

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

разрешенные в разделе <BODY> документа. В том числе, внутри ячейки таблицы может быть

целиком размещена другая таблица. Такие таблицы называются вложенными. Правила их

построения не отличаются от построения таблиц и не нуждаются в отдельном описании.

Отметим лишь, что не все браузеры, поддерживающие таблицы, правильно отражают сложные

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

осторожности.

Например:

<HTML>

<HEAD>

<TITLE>Объединение ячеек</TITLE>

</HEAD>

<BODY>

<TABLE border>

<TR><TD>Здесь обычно располагается статический или динамический

баннер

<TR><TD>

41

<TABLE border>

<TR><TD width="150"> <TD>Пункт 1<TD>Пункт

2<TD> Пункт 3<TD>Пункт 4<TD>Пункт 5

</TABLE>

<TR><TD>


<TR><TD>


<TR><TD heigt="18">Пункт 1





<TR><TD>


<TD><NOBR>Здесь обычно содержится основное

содержание страницы</NOBR>


</TABLE>

</BODY>

</HTML>

В итоге получится вот такая картина (см. рис. 8).

Рис.8. Отображение вложенных таблиц

42

Упражнение 9. Создание таблиц




после тэга <BODY>. В данном упражнении используется список номеров телефонов.

3. Введите тэг <TABLE BORDER="10" WIDTH="100%">.

4. Введите строку: <CAPTION АLIGN="ТОР">Список телефонов</САРТION>.

5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее

следующим образом:

6. <TR BGCOLOR="YELLOW" ALIGN="CENTER"> <ТН>Фамилия<ТН>Номер телефона

7. Определите последующие строки таблицы, предваряя каждую из их тэгом <TR> и

помещая содержимое каждой ячейки после тэга <TD>.

8. Последнюю строку таблицы задайте следующим образом:

9. <TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется

бесплатный телефон-автомат.

10. Завершите таблицу тэгом </TABLE>.

11. Сохраните документ под именем table.htm.


13. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл table.htm.

14. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая

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

15. Измените ширину окна обозревателя и установите, как при этом изменяется внешний

вид таблицы.


1- Создайте таблицу 3 х 4 клетки, расположенную по центру экрана. Задайте цвет

фона или фоновый рисунок, цвет и толщину границы таблицы. Клетки таблицы

должны содержать гиперссылки (текст, рисунки или кнопки) на соответствующие

документы.

2- С помощью таблицы, занимающей 80% ширины экрана и 70% его высоты,

разместите на странице следующие элементы:

заголовок (по центру),

баннер,

три рисунка,

общий для всех трех изображений текст,

4 одинаковых по размеру кнопки.

3- Создайте документ, в центре которого находилось бы квадратное изображение

размером 150 x 150 px, слева и справа от него (по высоте изображения) - текст,

сверху и снизу - также текст по ширине экрана.


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

сайте. Посмотрите в Сети, какие бывают разделы сайта, найдете что-то интересное — берите

себе на вооружение.

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

43

9. Объекты

Современные средства позволяют встраивать в HTML-документы мультимедиа

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

программирования, которые запускаются при загрузке страницы, различные элементы: кнопки,

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

HTML-документ (<IFRAME>). Все это многообразие называют одним емким понятием -

объект.

Для встраивания объекта в HTML-документ используется тэг-контейнер <OBJECT>.

Завершающий тэг <OBJECT> является обязательным для всех случаев. Тэг <OBJECT> может

иметь следующие параметры:

declare - позволяет объявить, но не создавать объект. Этот параметр применяется для

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

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

не активизируется. Значение этого параметра не указывается;

codebase - определяет базовый URL объекта, к которому затем можно обратиться при

помощи других параметров. Для тэга <OBJECT> существует несколко параметров, значениями

которых является URL объекта. Чтобы не писать постоянно полный путь до объекта, можно это

сделать только один раз при помощи этого параметра;

classid - значением этого параметра может быть уникальный идентификатор (имя,

присвоенное объекту), либо URL объекта. Этот параметр позволяет идентифицировать

встраиваемый объект. Если объект был объявлен ранее и ему присвоено уникальное имя, то

можно вызвать его по имени, в противном случае - по URL;

data - значением этого параметра должен служить URLресурсов объекта. Поскольку,

чаще всего, сам объект и его данные хранятся в одном и том же файле (например,

изображение), действие этого параметра аналогично действию параметра classid. Разница

состоит в том, что в значениях параметра data нельзя указывать идентификатор, а можно только

URL;

codetype - значением этого параметра должен служить так называемый MIME-тип

объекта. Подробнее о MIME-типах рассказывается ниже. Этот параметр необязателен, но очень

полезен. Например, если встраиваемый объект является видео-приложением в формате MPEG

(MIME-тип - "application/mpeg"), а компьютер клиента не поддерживает этот стандарт по

каким-то причинам (например, не установлен DivX), тогда вызов этого объекта вызовет

ошибку, и еще не известно, как отреагирует компьютер на эту ошибку, может просто-напросто

"зависнуть". Объявление же MIME-типа приведет к тому, что если компьютер клиента не

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

нужно продумать альтернативный вариант. Данный параметр используется совместно с

параметром classid;

type - то же самое, что и параметр codetype, но только используется совместно с

параметром data;

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

Значением этого параметра является любой текст. Этот текст появляется в окне объекта, пока

происходит загрузка объекта. Примером такого текста, например, может служить: "Ждите!

Идет загрузка рисунка.";

archive - аналог параметра data, но для нескольких ресурсов. Этот параметр используют,

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

параметра позволяет ускорить процесс загрузки объекта. URL ресурсов в этом случае

перечисляются через пробелы.

Кроме перечисленных параметров в тэге <OBJECT> можно использовать параметры:

align, border, width, height, hspace и vspace. Действие этих параметров было рассмотрено выше.







44

Несколько слов о параметрах width и height. Несмотря на то, что в спецификации это не

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

вставить невидимый объект (например, звуковой файл), нужно задавать значение этих

параметров="1".

Рассмотрим пример использования тэга <OBJECT>. Допустим, необходимо отразить в

документе движущийся автомобиль. Для этого есть видеоролик в формате MPEG - файл

auto.mpeg. Если компьютер не поддерживает этого формата, в качестве альтернативного,

имеется анимационный GIF - файл auto.gif. Если не удастся отобразить и его, будет появляться

надпись: «Автомобиль в движении». Все это размещено на компьютере speed.ru в директории

auto.

<OBJECT width="300" height="200" align="right" border="3"

data="http://speed.ru/auto/auto.mpeg" type="application/mpeg">

<OBJECT width="300" height="200" align="right" border="3"

data="http://speed.ru/auto/auto.gif" type="image/gif">

<STRONG> Автомобиль в движении </STRONG>

</OBJECT>

</OBJECT>

MIME-типы

Для знакомства с MIME-типами, вспомним о META-тэгах, наверняка Вам встречалась вот

такая строка:<META http-equiv="content-type" content="text/html" charset="windows-1251">.

Сакцентируем внимание на выражении типа text/html. В этом тэге определяется тип

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

получает текст в формате HTML и, следовательно, должен подготовить компьютер к приему

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

документ. Форма такой подсказки клиенту (text/html) выполняется в соответствии со

спецификацией MIME.

Спецификация MIME (Multipurpose Internet Mail Extension - многоцелевое почтовое

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

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

писем. Однако применение MIME не исчерпывается электронной почтой. Средства MIME

успешно используются в WWW и, по сути, стали неотъемлемой частью этой системы.

До появления MIME компьютеры, взаимодействующие по протоколу HTTP,

обменивались исключительно текстовой информацией. Для передачи изображений, как и для

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

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

тип и подтип. Тип определяет, к какому классу относится формат содержимого HTTP-запроса

или HTTP-ответа. Подтип уточняет формат. Тип и подтип отделяются друг от друга косой

чертой (слэш):

тип/подтип.

Поскольку в подавляющем большинстве случаев в ответ на запрос клиента сервер

возвращает исходный текст HTML-документа, то в поле content-type ответа обычно содержится

значение text/html. Здесь идентификатор text описывает тип, сообщая, что клиенту передается

символьная информация, а идентификатор html описывает подтип, т.е. указывает на то, что

последовательность символов, содержащаяся в теле ответа, представляет собой описание

документа на языке HTML.

Если вместо HTML-документа клиент запросит обычный текстовый файл, то в поле

content-type, содержащемся в заголовке ответа клиента, будет указано значение text/plain. Если

45

же в теле ответа сервера будет содержаться графическая информация, то, получив ответ, клиент

обнаружит в поле content-type значение image/gif, image/tiff, image/jpeg или другой подтип типа

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

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

подтипов MIME достаточно велик. В таблице 6, расположенной ниже, приведены примеры

MIME-типов, наиболее часто встречающиеся в заголовках HTML-запросов и ответов.

Таблица 6.

Примеры MIME-типов

Тип/подтип Расширение

файла

Описание

application/pdf .pdf Документ, предназначенный для обработки Acrobat

Reader

application/msexcel .xls Документ в формате Microsoft Excel

application/pdf .ps, .eps Документ в формате PostScript

application/x-tex .tex Документ в формате ТеХ

application/msword .doc Документ в формате Microsoft Word

application/rtf .rtf Документ в формате RTF, отображаемый с помощью

Microsoft Word

application/java .class Java-апплет

image/gif .gif Изображение в формате GIF

image/jpeg .jpg, .jpeg, .jpe Изображение в формате JPEG

image/tiff .tiff, .tif Изображение в формате TIFF

image/x-xbitmap .xbm Изображение в формате XBitmap

text/plain .txt ASCII-текст

text/html .htm, .html Документ в формате HTML

audio/midi .midi, .mid Аудиофайл в формате MIDI

audio/x-wav .wav Аудиофайл в формате WAV

message/rfc822 Почтовое сообщение

message/news Сообщение в группы новостей

video/mpeg .mpeg, .mpg, .mpe Видеофрагмент в формате MPEG

video/avi .avi Видеофрагмент в формате AVI

46

Апплеты

Чтобы придать колорит страницам в Интернете, наряду с HTML и CSS еще и широко

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

программы, написанные на этих языках делятся на 2 группы:

Программы, выполняемые на сервере. Суть этих программ следующая. Клиент (тот, кто

зашел за информацией в Сеть) посылает серверу (тот, кто дает такую информацию) запрос на

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

HTML-код для этого конкретного пользователя. Клиент получает HTML-документ,

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

Программы, выполняемые на стороне клиента. Такие программы передаются клиенту

сервером вместе с HTML-кодом и выполняются на его машине. Такие программы тоже, в свою

очередь, делятся на 2 типа:

1. Скрипты - можно использовать русское слово "сценарий". Это программы, которые

помещаются в теле HTML-документа в виде программного кода. Не следует путать

скрипты, выполняемые на стороне клиента (JavaScript, VBScript, JScript) и скрипты,

выполняемые на сервере (так называемые CGI-скрипты).

2. Апплеты. Это программы, которые передаются по запросу с HTML-документа уже

откомпилированными и выполняются на машине клиента.

Остановимся более подробно на апплетах. Очевидно, что программы, передаваемые

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

клиента, поэтому, например, exe-файлы тут не годятся (ни Unix, ни MacOS такие программы не

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

для выполнения таких программ виртуальную машину. Виртуальная машина - это

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

был разработан довольно хороший, мощный язык программирования - Java, то виртуальная

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

Java (JVM, Java Virtual Machine).

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

апплета происходит по следующим этапам:

1. Запрос клиента на получение HTML-документа с апплетом.

2. Получение HTML-документа, в котором содержится запрос серверу на получение

апплета.

3. Получение клиентом апплета и выполнение его на своей JVM.

Все это, выполняется программой-браузером.

Вставку апплета в документ можно осуществить с помощью тэга <APPLET>, который

может иметь следующие параметры:

width и height - они являются обязательными. В случае, если апплет не отображает

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

параметров="1";

code - этот параметр является обязательным. Точнее, вместо него можно использовать

параметр object, но это уже относится к особенности написания апплета. В большинстве своем,

апплеты написаны таким образом, что к ним нужно применять именно параметр code. Данный

параметр должен иметь значение - URL Java-класса (каждая откомпилированная Java-

программа представляет собой класс (файл с расширением .class)).

Остальные параметры являются необязательными:

codebase - этот параметр, как и в тэге <OBJECT>, задает URL директории, в которой

расположен апплет;

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=4#comp



47

archive - значением этого параметра могут служить URL файлов всех классов,

составляющих апплет (апплет может состоять не из одного, а из нескольких классов). Классы

могут быть упакованы архиватором ZIP или специальным архиватором JAR в один или

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

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

выполняемой Java-программе. Поэтому достаточно только указать URL ZIP, а лучше родного

для Java, JAR-архива. Значения параметров отделяются друг от друга пробелами;

name - значением этого параметра может быть любое, присвоенное данному апплету

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

имени.

Так же, можно использовать параметры: align, vspace, hspace.

Кроме этих параметров, внутрь тэга-контейнера <APPLET> можно вставлять тэг

<PARAM>, который предназначен для передачи внутренних параметров апплета. Тэг

<PARAM> не является тэгом-контейнером. Он может содержать следующие параметры:

name - имя параметра, содержащегося в апплете. Например, Вы создали апплет,

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

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

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

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

должны точно знать, что параметр runingstring достоверно существует в апплете и его

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

т.е. RuningString и runingstring - совершенно разные имена;

value - должен иметь значением значение параметра, описанного в параметре name;

valuetype - определяет тип параметра и может принимать следующие значения;

data - значение параметра представляет из себя некоторые данные (например текст

бегущей строки). Это значение применяется по умолчанию;

ref - значением параметра является ссылка. Здесь, в соответствии со спецификацией,

нужно задавать полный URL ресурса;

object - значением параметра является объект, который ранее был Вами инициирован с

помощью параметра name.

Рассмотрим пример. Допустим в Вашем распоряжении есть апплет audio.class, который

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

быть URL различных звуковых файлов в формате AU. Нам нужно вставить на страничку

проигрывание файла melody.au. Тогда вставить такой апплет можно следующим образом:

<APPLET code="http://www.mysite.ru/applet/audio.class" width="1" height="1"

archive="http://www.mysite.ru/music/melody.au">

<PARAM name="sound" value="http://www.mysite.ru/music/melody.au" valuetype="ref">

</APPLET>

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

<PARAM>. Если апплет является визуальным объектом, то внутри тэга-контейнера

<APPLET> помещают какую-нибудь надпись, оповещающую, что данный браузер не

поддерживает апплеты.

Тэг <APPLET> относится к нерекомендуемым (deprecate) тэгам. Так как апплет является

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

пример, с применением тэга <OBJECT> будет выглядеть так:

<OBJECT codetype="application/java" codebase="http://www.mysite.ru/applet/"




48

width="1" height="1" archive="http://www.mysite.ru/music/melody.au"

classid="java:audio.class">

<PARAM name="sound" value="http://www.mysite.ru/music/melody.au" valuetype="ref">

</OBJECT>

Обратите внимание на URL апплета, заданного в параметре classid. Для апплетов Java,

такая запись может использоваться для обозначения механизма передачи файлов (вместо http),

в соответствии с так называемой Глобальной схемой именования объектов.

Мультимедиа в HTML-документах

Расширения HTML в области мультимедиа позволяют включать в документы

графические изображения, видеоклипы, звук и аплеты Java, а также различные интерактивные

элементы типа Flash и VRML. Разместить аидио и видео в Web и получить к ним доступ можно

двумя способами:

используя тэг якоря (<A> … </A>)

используя тэги <EMBED> и <OBJECT>

Тэг якоря (<A> … </A>) используется так же, как и при размещении ссылки в HTML-

документе.

Для того чтобы ввести в свою страницу звуковое или видео сопровождение (например,

приветствие посетителям вашего сайта), сначала нужно выполнить его оцифровку и запись в

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

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

видеоклипов следует помнить об авторском праве. Если вы хотите использовать какой-то клип

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

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

воспроизводит звуковой фрагмент.

<A href="beetvn9.wav">Соната Бетховена (620 Кбайт)</A>

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

<A href="globe.avi">Видео на моей странице (50,1 Кбайт)</A>

Если вы хотите, чтобы аудио звучало фоном при работе с вашей страницей можно

воспользоваться парным тэгом <EMBED>. Он применяется так же, как и тэг <IMG>. Однако

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

иначе работу нельзя будет увидеть. Хотя тэг <EMBED> обозначен как устаревший в

спецификации HTML 4, его поддерживают оба ведущих браузера. Если вы загружаете фоновый

звук с помощью тэга <EMBED>, то размещайте его код в нижней части страницы, в пределах

тэга <BODY>. Это позволит всему коду загрузиться первым, а затем загрузится аудио и

посетителям вашего узла не придется ждать, глядя на пустую страницу.

Следующий пример создан для вставки видеоклипа, но тэг <EMBED> работает и с

другими типами файлов.

<EMBED scr=”/video/BLOWUP.AVI” type=”video/avi” width=”154” height=”256” loop="true"

controller=”true” autoplay=”true”></EMBED>

В тэге <EMBED> используются перечисленные ниже атрибуты:

scr – определяет URL файла для создания объекта;

type – указывает на тип данных, URL которых определен в атрибуте scr. Типы данных

перечислены в приложении А;

autoplay – указывает, запускать или нет приложение, обрабатывающее данный элемент,

49

не дожидаясь действий пользователя (false/true);

controller – дает возможность добавления управляющих элементов (false/true). Если

установлено – true, то необходимо учесть размеры панели управляющих элементов при

определении размеров экрана клипа. В противном случае ролик и панель самостоятельно

займут нужное место на экране;

loop – для циклической работы ролика необходимо установить значение атрибута true.

Если требуется однократное воспроизведение – false;

pluginspage – отправляет пользователей, не имеющих соответствующих приложений для

просмотра клипа, на страницу, где можно их найти.

Последние атрибуты отменены в спецификации HTML 4. Вместо них используйте

возможности CSS:

align – выравнивает изображение к одной из сторон документа (left/right/center /bottom/top

/middle);

border – устанавливает толщину рамки вокруг изображения в пикселях. По умолчанию

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

установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг

изображения;

height – высота картинки в пикселях или процентах. Всегда желательно явно

устанавливать этот параметр для ускорения загрузки страницы браузером;

hspace – определяет размер свободного места в пикселях слева и справа от изображения,

улучшает внешний вид страницы, отделяя изображение от текста;

vspace – определяет размер свободного места в пикселях сверху и снизу от изображения,

улучшает внешний вид страницы, отделяя изображение от текста;

width – ширина картинки в пикселях или процентах. Всегда желательно явно

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

В Internet Explorer есть специальный тэг <BGSOUND>, в котором в качестве источника

(значения атрибута src) используется аудиофайл, например: <BGSOUND scr=”Whistldn.wav”

loop=”3”>.

С помощью этого тэга во время загрузки документа браузером будет воспроизводиться

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

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

Для ввода видеоклипа в Internet Explorer можно воспользоваться тэгом <IMG>, где вместо

стандартного изображения указать видеоклип (в формате AVI). Для вывода клипа используется

ключевое слово DYNSCR (Dynamic Source – динамический источник) тэга <IMG>.

<IMG src=”proba.gif” dynscr=”proba.avi” loop=”2”>

Сначала Internet Explorer загружает и выводит файл proba.gif, когда загрузится весь текст и

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

статического изображения. Пользователи Netscape увидят только изображение, заданное

ключевым свойством src, а атрибут dynscr будет проигнорирован.

Тэг <EMBED> не был включен в стандарт HTML 4, исходя из наличия тэга <OBJECT>…

</OBJECT>.

Чтобы встроить аудио- видео- апплеты рекомендуется использовать тэг <OBJECT>…

</OBJECT> .

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

включения изображений авторы могут использовать элемент OBJECT или элемент IMG.

50

<BODY>

<P>Я только что вернулся из отпуска! Вот фотография моей семьи на озере:

<IMG src="http://www.somecompany.com/People/family.png"

alt="Фотография моей семьи на озере.">

</BODY>

Этого же эффекта можно достичь с помощью элемента OBJECT следующим образом:

<BODY>

<P>Я только что вернулся из отпуска! Вот фотография моей семьи на озере:

<OBJECT data="http://www.somecompany.com/People/family.png"

type="image/png">

Фотография моей семьи на озере.

</OBJECT>

</BODY>

10. Навигационные карты

Поскольку рисунки (изображения) являются объектами, для них помимо тэга <IMG> для

вставки и работы с ними можно использовать тэг <OBJECT>. Например, вставить изображение

можно следующим образом:

<HTML>

<HEAD>

<TITLE>Вставка изображения как объект</TITLE>

</HEAD>

<BODY>

<OBJECT data="univer.jpg" type="image/jpeg" width="438" height="213"

title="Москва- столица России">

</OBJECT>

</BODY>

</HTML>

Навигационная карта рисунка (Imagemap, Image Map, Area Map, Clickable Map, Sensitive

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

"горячие" (или активные) точки или области, имеющие ссылки на различные URL-адреса.

Будем описывать эту возможность словосочетанием "карта-изображение", подразумевая под

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

Основными компонентами являются:

само изображение, которое называют опорным для данной карты-изображения;

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

соответствующее программное обеспечение.

Карты-изображения предоставляют пользователям дружественный интерфейс для

перехода на другие Web-страницы. Чтобы выполнить переход по такой ссылке, следует просто

выбрать нужное место на изображении и щелкнуть мышью. Наличие такого развитого

51

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

сравнению с другими ресурсами Интернета.

Карта-изображение внешне выглядит как обычное встроенное изображение, при выборе с

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

другие страницы. Обычно на изображении указывается, где следует сделать щелчок, чтобы

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

реализующих различные ссылки. Часто используется рамка или какой-либо иной разделитель.

Карта-изображение фактически представляет собой обычное встроенное графическое

изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF

или JPG). При этом в формате GIF может использоваться прозрачный цвет, а также режим

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

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

Конфигурация карты-изображения записывается в виде обычного текста, который в

зависимости от используемого формата может быть сохранен в отдельном файле или являться

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

активных областей изображения, а также URL-адреса, связанные с каждой из этих областей.

Активные области могут иметь форму прямоугольников, кругов и многоугольников.

Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-

адреса, определенное для случая, когда пользователь выполняет щелчок в пределах

изображения, но вне любой из заданных активных областей. Конкретные правила записи

конфигурации области зависят от выбранного варианта реализации и будут представлены

далее.

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

различных вариантах - серверный вариант (server-side imagemap) и клиентский вариант (client-

side imagemap). Последнее название часто используют в виде аббревиатуры CSIM. Исторически

первым появился и получил распространение серверный вариант карт-изображений, который

впервые был реализован в браузере Mosaic. Серверный вариант позволял использовать первые

версии всех трех ведущих браузеров. Серверный вариант может быть реализован в двух

различных форматах, которые получили свое наименование по названиям организаций-

разработчиков - NCSA и CERN.

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

был реализован в браузере Microsoft Internet Explorer. Начиная с версии 2.0, этот вариант также

поддерживает браузер Netscape. Данный вариант имеет свои неоспоримые преимущества и

становится все более популярным. Рассмотрим характеристику клиентских вариантов карт.

Клиентские навигационные карты

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

конфигурации карты в HTML-файле, в который встроено изображение. В случае же

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

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

дополнительных затрат времени на ожидание. При клиентском варианте число обращений к

серверу уменьшается, и увеличивается скорость доступа к информации. В этом варианте также

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

работа по созданию карты-изображения может быть выполнена локально, одновременно с

редактированием HTML-файла. В отличие от серверного варианта, в котором для каждой

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

конфигурация карты может располагаться непосредственно в том же HTML-документе, в

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

допустимо сохранять конфигурацию карты в отдельном файле и давать на него ссылку. Браузер

Netscape не допускает использование отдельного файла для описания конфигурации карты.



52

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

используется параметр usemap тэга <IMG>. Значением параметра usemap является ссылка на

описание конфигурации карты.

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

варианте (опорное изображение находится в файле man.gif и имеет две активные области: круг

и прямоугольник).

Пример вставки изображения, когда вставляемое изображение является опорным для

навигационной карты:

<IMG src="man.gif" usemap="#man">.

Сюда нужно добавить такие параметры, как width, height, alt и т.д. В этом примере

изображение, хранящееся в файле с именем man.gif, является опорным для карты-изображения,

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

располагаться в том же файле, что и данная строка HTML-кода, и иметь для данного примера

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

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

Внутри пары тэгов <MAP> и </MAP> должны располагаться описания активных

областей карты, для чего используется специальный тэг <AREA>. Этот тэг не имеет

завершающего тэга, т.е. не является тэгом-контейнером. Каждый отдельный тэг <AREA>

задает одну активную область. Таким образом, между тэгами <MAP> и </MAP> должно

располагаться столько тэгов <AREA>, сколько активных областей имеет Ваша навигационная

карта. Активные области могут перекрываться. В случае если некоторая точка относится

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

которой располагается первым в списке областей. Тэг <AREA> может иметь следующие

параметры:

shape. Параметр shape определяет форму активной области. Допустимыми значениями

являются rect, circle, poly, default. Эти значения задают области в виде прямоугольника, круга,

многоугольника. Последнее значение - default - определяет все точки области. Если параметр

shape опущен, то по умолчанию предполагается значение rect, т. е. область в виде

прямоугольника. В отличие от серверного варианта, где область типа default определяла все

точки на изображении, которые не относятся к какой-либо активной области, для клиентского

варианта область типа default определяет вообще все точки изображения. Поэтому в данном

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

Если, например, описание области default поставить первым, то всегда для клиентского

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

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

серверного варианта расположение описания области default не имеет значения. Важно

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

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

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

coords — параметр задает координаты отдельной активной области. Значением

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

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

Для области типа rect задаются координаты верхнего левого и правого нижнего углов

прямоугольника. Для области типа circle задаются три числа - координаты центра круга и

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

порядке. Последняя точка в списке координат не обязательно должна совпадать с первой. Если

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

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

вершин довольно велики и покрывают практически все мыслимые потребности. По крайней

мере многоугольник, имеющий 100 вершин, уверенно обрабатывается всеми ведущими

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

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=4#Im6

http://www.it-study.ru/chapter.htm?mn=2&type=L&ch=4#Im6


53

может содержать более 1024 значений. Многоугольник вполне

может быть невыпуклым. Область типа default не требует

задания координат;

href и nohref — параметры являются

взаимоисключающими. Если не задан ни один из этих

параметров, то считается, что для данной области не имеется

ссылки. То же самое явно определяет параметр nohref, не

требующий значения. Параметр href определяет адрес ссылки,

который может записываться в абсолютной или

относительной форме. Правила записи полностью совпадают с

правилами записи ссылок в тэге <А>. Параметр nohref полезно

использовать для исключения части активной области. Пусть,

например, необходимо создать активную область в виде

кольца. Такой тип области не предусмотрен в списке

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

задания двух круговых областей. Для этого сначала следует

задать область меньшего радиуса и указать в качестве параметра nohref. Далее нужно задать

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

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

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

позволит строить области весьма разнообразной формы;

target — параметр употребляется при работе с фреймами. Его назначение - указать имя

фрейма, в который будет размещен документ, загружаемый по данной ссылке;

alt — параметр позволяет записать альтернативный текст для каждой из активных

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

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

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

альтернативный текст для активных областей никогда на экране не появится.

Рассмотрим пример. На рисунке 11 изображен рисунок, который использовался в

предыдущих примерах, только с уже вычисленными координатами.

Допустим, что щелчок мощью в область круга должен открывать файл head.htm, щелчок в

прямоугольник - body.htm, а щелчок по рисунку вне круга и прямоугольника - index.htm.

Допустим также, что параметры width и height рисунка соответственно равны: 300 и 350.

Рассмотрим полный код HTML-документа, который будет содержать такую навигационную

карту.

Пример:

<HTML>

<HEAD>

<TITLE>Клиентская навигационная карта.</TITLE>

</HEAD>

<BODY>

<MAP name="man">

<AREA shape="circle" coords="150,100,50" href="head.htm" alt="круг">

<AREA shape="rect" coords="90,160,210,310" href="body.htm"

alt="прямоугольник">

<AREA shape="rect" coords="0,0,300,350" href="index.htm" alt="вся карта">

</MAP>

Рис. 11. Опорное изображение в

системе координат с

проставленными координатами

54

<IMG src="man.gif" width="300" height="350" alt="Навигационная карта"

usemap="#man">

</BODY>

</HTML>

В принципе, порядок расположения тэгов <MAP> и <IMG> не имеет значения, то есть

можно расположить сначала тэг <IMG>, а уже затем - <MAP>, но общепринята именно такая

запись. Более того принято тэги <MAP> располагать в разделе BODY первыми, если документ

содержит навигационные карты. Если в одном документе содержится несколько

навигационных карт, для каждой из них должен быть свой раздел <MAP>.

Важно отметить некоторые особенности в использовании карт-изображений в клиентском

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

клиентский вариант, то в строке состояния в нижней части браузера отображается

соответствующий URL-адрес. В серверном варианте URL-адрес не отображается, потому что

эта информация размещена на сервере, которая недоступна до тех пор, пока пользователь не

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

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

серверном варианте отображаются цифры, являющиеся относительными координатами мыши

на изображении и не дающие никакой информации о ссылках и об их наличии.

Упражнение 11. Создание клиентской карты-изображения




тэга <BODY>.

3. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор

в его начало.

4. Введите тэг <IMG SRC="picture.gif" WIDTH=”265” HEIGHT= “330” BORDER=”1”

USEMAP= “#RISUNOK” ALIGN="left" ALT=”Схема рисунка”>. В качестве файла

picture.gif используйте любой рисунок.

5. Сохраните документ под именем map.htm.


7. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл map.htm.

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

8. Вернитесь в программу Блокнот и для описания конфигурации областей карты-

изображения введите тэг <MAP NAME=”RISUNOK”></MAP>.


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

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

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

навести курсор на интересующую точку, и в строке состояния высветятся координаты

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

11. Вернитесь в программу Блокнот и введите после тэга <MAP> тэги <AREA SHAPE= “rect”

coords=”координаты первой области, перечисленные через запятую” HREF=”#part1”

ALT=”Первая область”> <AREA SHAPE= “rect” coords=”координаты второй области,

перечисленные через запятую” HREF=”#part2” ALT=”Вторая область”>. Сохраните файл

под тем же именем.


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

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



55


1- Создайте страничку с музыкальным фоном.

2- Создайте страничку содержащую видеоролик.

3- Разместите на странице изображение карты какой-либо области с 4-5 названиями пунктов.

На основе данного изображения создайте клиентский вариант навигационной карты. При

щелчке на каждом из пунктов должен открываться документ с краткой характеристикой

данной местности.


В настоящее время у Вас имеются 2 разработки сайта - на фреймах и на таблицах.

Продолжим работу с табличным вариантом.

1. Создайте и заполните содержимым странички по всем пунктам меню. На главной

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

навигационную (клиентский вариант) карту. Создайте эту карту.

2. Продумайте использование мультимедиа на ваших страницах (цвет и стиль всех

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

Создайте самостоятельно или подберите готовые мультимедийные объекты. Разместите

мультимедиа объекты на вашем сайте.

11. Формы

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

HTML. Назначением формы является сбор информации от пользователей. После того как

пользователь заполнит форму и запустит процесс ее обработки, информация из нее попадет в

программу, работающую на сервере. Другая программа под названием Common Gateway

Interface (CGI) обрабатывает ее. Таким образом, пользователь может интерактивно

взаимодействовать с сервером Web через Internet.

Тэг < FORM > используется для обозначения документа как формы. Данный элемент

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

< FORM > определяется последовательностью тэгов < INPUT >, размещенных внутри

пары <FORM> и </FORM>. Элемент формы использует как метод, так и действие для

описания обработки формой данных, вводимых пользователем:

метод (GET или POST) - определяет, как программист должен обрабатывать входные

данные из формы.

действие - указывает на URL программы, ответственной за обработку данных.

Данный элемент поддерживает атрибуты ACTION, ENCTYPE, METHOD.

Сбор данных при помощи форм (тэг < INPUT >)

Тэг < INPUT > используется для определения области внутри формы, где собираются

данные. Данный элемент представляет собой поле для ввода информации пользователем

(обычно одна строка текста). В этом случае требуется наличие атрибута NAME для

определения наименования переменной поля.

Можно использовать следующие параметры:

maxlenght - ограничивает число вводимых символов (по умолчанию ограничений нет)

size - размер видимой на экране области, занимаемой текущим полем. Если

MAXLENGTH > SIZE, браузер будет прокручивать данные в окне.

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#ACTION

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#ENCTYPE

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#METHOD

56

value - определяет начальное значение поля ввода.

А также атpибуты: ALIGN, CHECKED, NAME, SRC, TYPE.

Пример - простая форма для ввода:

< P > Улица: <INPUT NAME= "street"> <BR>

Город: <INPUT NAME= "city" SIZE= "20" MAXLENGTH= "20"> <BR>

Индекс: <INPUT NAME= "zip" SIZE= "5" MAXLENGTH= "5"

VALUE= "99999"> <BR>

В окне браузера это будет выглядеть так: (см. рис. 12)

Параметр CHECKBOX

При создании форм часто бывает необходимо получить

ответ пользователя на вопрос типа (Да/Нет) или

(Правда/Ложь). Например, нужно выбрать из списка

несколько значений. Для создания независимых кнопок

в формах можно использовать атрибут checkbox . В

зависимости от содержания можно отметить несколько

флагов.

Вместе с параметром checkbox должны использоваться следующие параметры:

checked - инициализировать данный флаг, как отмеченный;

name- наименование поля ввода формы;

value- значение поля ввода.

Пример (элемент «Котлеты» указан как заранее отмеченный):

<P> Выберите Ваше любимое блюдо:

<FORM>

<INPUT TYPE="checkbox" NAME="food" VALUE="Пельмени"> Пельмени <BR>

<INPUT TYPE="checkbox" NAME="food" VALUE="Голубцы"> Голубцы <BR>

<INPUT TYPE="checkbox" NAME="food" VALUE="Котлеты" CHECKED> Котлеты <BR>

</FORM>

В окне браузера это будет выглядеть так (см. рис. 13).

Параметр IMAGE

В зависимости от содержимого формы может

случиться так, что пользователю потребуется щелкнуть

мышью на изображении, чтобы завершить работу с

формой. Для организации этого используется параметр

image.

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

браузер сохраняет координаты соответствующей точки

экрана и принимает всю форму.

Вместе с параметром image должны

использоваться следующие атрибуты:

align - необязательный атрибут, указывает на

положение изображения на экране (аналогично элементу IMAGE);

Рис. 12. Простейшая форма

Рис. 13. Пример

использования

параметра CHECKBOX

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#ALIGN

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#CHECKED

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#NAME

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#SRC

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#TYPE

57

name - наименование поля ввода формы;

src - URL файла - источника изображения.

Пример:

<P> Выберите точку на изображении:

<INPUT TYPE= "image" NAME="point" SRC="globe.gif">

Параметр PASSWORD

Данный атрибут используется для организации ввода

пароля без вывода на экран составляющих его символов

(вместо символов выводятся звездочки).

Пример:

<FORM>

<P> Ввведите имя:

<INPUT NAME="login">

<P> Ввведите пароль:

<INPUT TYPE="password" NAME="p_word">

</FORM>

В окне браузера это будет выглядеть так (см. рис. 14):

Параметр RADIO

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

их нескольких возможных.

Вместе с параметром radio должны использоваться следующие атрибуты:

checked - инициализировать данный флаг, как отмеченный

name - наименование поля ввода формы

value - значение поля ввода

Пример:

<P> Укажите сорт Вашего любимого пива:

<FORM>

<INPUT TYPE="radio" NAME="beer"

VALUE="su">Седой Урал<BR>


VALUE="sh">Шихан<BR>


VALUE="yb">Юбилейное<BR>

</FORM>


Рис. 14. Пример использования

параметра PASSWORD


параметра RADIO


58

Параметр RESET

Данный параметр используется для создания кнопки 'Reset'. При нажатии на эту кнопку форма

восстанавливает первоначальные значения полей всех тэгов <INPUT>, в которых присутствует

параметр reset.

Вместе с параметром reset может использоваться параметр value- значение поля ввода по

умолчанию.

Пример:

<FORM>

Код: <INPUT NAME="cod"> <BR>

Телефон: <INPUT NAME="phone" SIZE="6"

MAXLENGTH="6" ><BR>

<P>

<INPUT TYPE=RESET>

</FORM>


Параметр SELECT

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

параметр select. Для определения списка пунктов используются элементы <OPTION> внутри

<SELECT>.

Вместе с параметром select можно использовать следующие атрибуты:

name - наименование объекта;

multiple - позволяет выбрать более чем одно наименование;

size - определяет число пунктов, видимых для пользователя.

(size = 1 - браузер выводит список на экран в виде выпадающего меню (видно одно

наименование). size > 1 - браузер представляет на экране обычный список (число - количество

видимых наименований).

C тэгом OPTION можно использовать следующие параметры:

selected - для первоначального выбора значения элемента по умолчанию;

value - значение, возвращаемое формой после выбора пользователем данного пункта. По

умолчанию значение поля равно элементу < OPTION >.

Когда пользователь заполняет форму, параметр NAME тэга <SELECT> состыковывается

с параметром value элемента для формирования наименования, выбранного пользователем.

Пример:

<FORM>

<SELECT NAME="Фрукты" SIZE=3>

<OPTION> Сливы

<OPTION> Груши

<OPTION value="Lemon_and_orange">

Лимоны и апельсины

<OPTION selected> Яблоки


параметра RESET

Рис. 17. Параметр SELECT


http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#MULTIPLE

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#SELECTED

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#VALUE

59

</SELECT>

</FORM>

В окне браузера это будет выглядеть так: (см. рис. 17).

Параметр SUBMIT

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

свою очередь выводит данный элемент, как кнопку, по которой пользователь может щелкнуть,

чтобы завершить процесс редактирования.

Вместе с параметром submit можно использовать следующие параметры:

name - наименование кнопки SUBMIT

value - значение переменной поля в вашей форме

Пример:

<FORM>

Код:<INPUT NAME="cod"> <BR>Телефон: <INPUT

NAME="phone" SIZE="6" MAXLENGTH="6" ><BR>

<P><INPUT TYPE=RESET> <INPUT TYPE=SUBMIT>

</FORM>

В окне браузера это будет выглядеть так: (см. рис. 18).

Параметр TEXTAREA

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

(несколько строк).

Вместе с параметром textarea можно использовать следующие атрибуты:

name - наименование поля;

cols - число колонок (символов) в текстовой области;

rows - число видимых строк в текстовой области;

Пример:

<FORM>

<TEXTAREA NAME="adress" COLS=64 ROWS=6>

Россия,

Москва,

пр.Ленина, 104

</TEXTAREA>

</FORM>

Следующий пример содержит большинство описанных выше элементов.

<P> <H3 ALIGN=CENTER> Анкета пользователя </H3>

<P> Ответьте, пожалуйста, на вопросы:

<FORM METHOD="POST" ACTION="http://www.ok.com/ok">

<P> Ваше имя: <INPUT NAME="name" SIZE="48">

<P> Мужчина <INPUT NAME="gender" TYPE=RADIO VALUE="male">

Рис. 18. Параметр SUBMIT

http://bcollege.tambov.ru/l-zone/htmlkaz/attrib.htm#VALUE

60

<P> Женщина <INPUT NAME="gender" TYPE=RADIO VALUE="female">

<P> Детей <INPUT NAME="family" TYPE=TEXT>

<P> Страна <INPUT NAME="family" TYPE=TEXT>

<UL>

<LI> Украина <INPUT NAME="country" TYPE="checkbox" VALUE="Ukraine">

<LI> Россия <INPUT NAME="country" TYPE="checkbox" VALUE="Russian">

<LI> Другая <TEXTAREA NAME="other" COLS=48 ROWS=3></TEXTAREA>

</UL>

<P> Электронный адрес: <INPUT NAME="email" SIZE="42">

<P> Для подтверждения ввода нажмите на кнопку SUBMIT.

<P> Для сброса введенных данных нажмите на кнопку СБРОС.

<P><INPUT TYPE=SUBMIT><INPUT TYPE=RESET>

</FORM>

Когда пользователь щелкает по кнопке SUBMIT, браузер передает сообщение (метод

POST) по адресу: http://www.ok.com/ok ,

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

name=Oleg+Ivanov&gender=male&family=2&country=Ukraine&other=None&[email protected]

onin.com

Далее специальная программа, размещенная на сервере http://www.ok.com/ok начнет обработку

ответов пользователя.

Упражнение 12. Создание формы на Web-странице




тэга <BODY>.

3. Введите тэги <FORM> </FORM> между ними расположите следующие строки:

<P> <B>Анкета абитуриента </B>

<P>Фамилия <INPUT TYPE=”text” NAME=”regist” VALUE=” ”>

Тэг <INPUT> в данном случае определяет текстовое поле.

4. Сохраните документ под именем form.htm.


6. Дайте команду Файл\Открыть. Щелкните по кнопке Обзор и откройте файл form.htm.

Посмотрите на получившийся документ.

7. Вернитесь в программу Блокнот и для создания текстовых полей вводящих имя и отчество

введите следующие строки:

<P>Имя <INPUT TYPE="text" NAME="regist" VALUE="">

<P>Отчество <INPUT TYPE="text" NAME="regist" VALUE="">

8. Сохраните документ и просмотрите в Internet Explorer.

9. Вернитесь в программу Блокнот и для создания полей с переключателями введите

следующие строки:

<P>Наличие медали:

<P> Золотая<INPUT TYPE="radio" NAME="rad1” VALUE="1" >,

61

Серебряная<INPUT TYPE="radio" NAME="rad1” VALUE="2">,

Нет<INPUT TYPE="radio" NAME="rad1” VALUE="3">.


11. Вернитесь в программу Блокнот и для создания полей с флажками введите следующие

строки:

<P>По каким предметам имеете оценку «отлично» в аттестате:

<P>Информатика<INPUT TYPE="checkbox" NAME="chb1" VALUE="1" >

Математика<INPUT TYPE="checkbox" NAME="chb1" VALUE="2" >

Русский язык<INPUT TYPE="checkbox" NAME="chb1" VALUE="3" >.


13. Вернитесь в программу Блокнот и для создания полей в виде списка прокрутки (SIZE=N)

введите следующие строки:

<P> Почему хотите учится в нашем учебном заведении?

<P><SELECT NAME=”list” SIZE=N>

<OPTION SELECED>Нужен диплом

<OPTION>Советуют родители

<OPTION>Нужна отсрочка от армии

<OPTION>Нравится специальность

<SELECT>


15. Вернитесь в программу Блокнот и добавьте в форму кнопки, для этого после тэга

<SELECT> наберите следующее:

<P> Для подтверждения ввода нажмите на кнопку Отправить.

<P> Для сброса введенных данных нажмите на кнопку Очистить.

<P><INPUT TYPE="SUBMIT" VALUE="Отправить"><INPUT TYPE=RESET

VALUE="Очистить">


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

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

ACTION и METOD тэга <FORM>. Значением атрибута ACTION является URL-адрес

программы, которая будет обрабатывать данные из формы, а значениями атрибута METOD

являются либо get (по умолчанию), либо post, которые определяют форму пересылки

данных. В тэг <FORM> вставьте следующие атрибуты:

<FORM ACTION=”www.webclub.ru/cgi-bin/sendform.cgi”

METOD=”post”>, где в значении атрибута ACTION указывается адрес специальной программы

для обработки форм, размещенной на сайте клуба Web-мастеров.

18. Сохраните документ.

19. Для того, чтобы программа-обработчик смогла прислать результат обработки анкеты по

электронной почте, надо указать в форме свой адрес. Это делается с помощью скрытых

полей. Для этого в конце HTML-документа перед тэгом </FORM> введите строку:

<INPUT TYPE="hidden" NAME="ваш e-mail" VALUE=" ">

20. Скрытые элементы не видны пользователю. Сохраните HTML-документ и просмотрите его

в браузере.

http://www.webclub.ru/

62

21. Теперь страница с формой готова и можно попробовать отправить ее. Для работы с

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

форму из браузера Netscape Navigator. Запустите браузер, откройте страницу, заполните

форму и щелкните по кнопке Отправить.

22. Программа-обработчик, обработав форму, пришлет письмо содержащее имена элементов и

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

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


1. Создайте форму. Центр изучения потребительского спроса собирает информацию о

потребляемых соках в разрезе городов России с населением более 1 миллиона. Используются

следующие поля: Фирма производитель, Название, Концентрация (не больше 100% и не

меньше 50%), Цена (за упаковку), Цена за литр (рассчитывается), Способ приготовления

(переключатель) например: из концентрированного сока, из сухих материалов и т.д.,

содержание заменителя сахара (флажок). В случае использования заменителя сахара

активизируется поле для записи его наименования. Кроме того определена категория сока

(переключатель «нектар/сок»), в случае нектара количество витамина C намного меньше.

2. Создать форму, которую можно использовать для размещения не анонимных

объявлений в глобальной сети Internet. С возможностью дальнейшего удаления автором

объявления (для этого используется специальное поле пароль). Количество символов в

объявлении не должно превышать 511. Обязательным параметром является адрес электронной

почты автора объявления (он должен обязательно содержать символ @ и хотя бы одну точку).

Предусмотреть возможность автоматического удаления объявления через указанное количество

дней (10-100, по умолчанию 31).

3. Пейджинговая компания желает реализовать возможность отправления сообщений

абонентам через Internet. Для этого использует следующую форму: Время отправления

сообщения, дата отправления сообщения, текст сообщения (длина не больше 200), номер

абонента (четырехзначное число), количество повторов (1-5), автор. Кроме того, используется

роуминг (флажок) по городам Ростовской области (список), который активизируется только в

случае установки флажка роуминг.

4. Создать форму для заполнения электронной записной книжки. В форме используются

следующие поля: Фамилия, Имя, Отчество (каждое значение начинается с большой буквы, и

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

телефонного кода местности и для маски номера), код местности (трехзначное число, но может

начинаться с 0), номер телефона (в разных регионах может быть либо семизначным,

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

и т.д.). Рассматривать 5-10 городов России с разными масками телефонов.

5. Один из известных сайтов знакомств планирует усовершенствовать свою деятельность.

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

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

подающем запрос и информация об искомом человеке (2 категории). Туда входит: Пол (по

умолчанию должен быть разный, но существует возможность выбора), возраст (в первой

категории) и интервал во второй (например –1 +5) (интервал не должен выходить за рамки

доступных лет), цвет глаз, цвет волос (перечисление), рост, вес, телосложение (перечисление),

вредные привычки (флажки), при отправке сообщения определять количество вредных

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


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

форма, форма-анкета или какая-то другая.

63

Приложение A

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

Числовой код Мнемонический код Название

Прямая кавычка

Амперсанд

Знак «меньше»

Знак «больше»

Торговая марка

Неразрывный пробел

Цент

Фунт

Знак валюты

Йена

brvbar; Вертикальная черта

Знак параграфа

Знак копирайта

Левая типографская кавычка

Знак «зарегистрировано»

Знак градуса

Знак «плюс минус»

Знак «микро»

Знак абзаца

Точка-маркер

Правая типографская кавычка

Одна четвертая

Одна вторая

Знак умножения (крестик)

Знак деления

64

Приложение B

Фоновые цвета

Название цвета RGB Название цвета RGB

aqua* #00FFFF lightseagreen #20B2AA

beige #F5F5DC lightskyblue #87CEFA

bisque #FFE4C4 lightslategray #778899

black* #000000 lightyellow #FFFFE0

brown #A52A2A lime* #00FF00

burlywood #DEB887 linen #FAF0E6

chartreuse #7FFF00 maroon* #800000

chocolate #D2691E mintcream #F5FFFA

coral #FF7F50 moccasin #FFE4B5

cornsilk #FFF8DC navy* #000080

cyan #00FFFF olive* #808000

darkkhaki #BDB76B orange #FFA500

fuchsia* #FF00FF orchid #DA70D6

gold #FFD700 papayawhip #FFEFD5

goldenrod #DAA520 purple* #800080

gray* #808080 red* #FF0000

green* #008000 salmon #FA8072

greenyellow #ADFF2F sienna #A0522D

honeydew #F0FFF0 silver* #C0C0C0

ivory #FFFFF0 skyblue #87CEEB

khaki #F0E68C slateblue #6A5ACD

lavender #E6E6FA slategray #708090

lemonchiffon #FFFACD springgreen #00FF7F

lightblue #ADD8E6 teal* #008080

lightcoral #F08080 white #FFFFFF

lightcyan #E0FFFF whitesmoke #F5F5F5

65

lightgreen #90EE90 yellow* #FFFF00

lightsalmon #FFA07A yellowgreen #9ACD32

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

оформления фона (или текста) web-страниц. Названия основных цветов отмечены звездочкой *.

66

Приложение С.

Вопросы для самопроверки

1. Назовите основное назначение организации World Wide Web Consortium .

2. Перечислите структурные компоненты HTML страницы.

3. Назовите версии HTML и их отличительные особенности.

4. Каково назначение МЕТА-тэгов?

5. В чем состоит понятие отмененного тэга?

6. Какие тэги относятся к устаревшим?

7. Что понимается под гипертекстом?

8. Перечислите основные идеи построения и интерпретации HTML документа.

9. В чем состоит основное различие между тэгами физического и логического

форматирования?

10. Для чего используются гиперссылки?

11. Какие типы гиперсвязей могут присутствовать в гипертексте?

12. Какой тэг используется для отображения графики и мультимедиа в HTML документе?

13. Что понимается под фреймами? Их отличие от таблиц?

14. В чем состоит отличие списков определений от других типов списков?

15. Перечислите общие атрибуты объектов и форм.

16. Что представляют собой каскадные таблицы стилей?

17. Назовите способы использования таблиц стилей в документах HTML.

67

Приложение D.

Варианты для выполнения практических заданий*

1. Создать сайт фирмы занимающейся продажей компьютеров.

2. Создать сайт розничной продажи книг.

3. Создать сайт продажи музыкальной продукции.

4. Создать сайт по продаже цветов.

5. Создать сайт по продаже мебели.

6. Создать сайт по продаже телефонных аппаратов.

7. Создать сайт кадрового агентства, содержащий информацию о вакансиях.

8. Создать сайт средства массовой информации.

9. Создать сайт рекламного агентства.

10. Создать сайт туристического агентства.

11. Создать сайт агентства по продаже недвижимости.

12. Создать сайт новостного агентства.

13. Создать сайт по продаже электроинструментов.

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

68

Приложение E.

Критерии оценки сайтов

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

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

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

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

Содержание. Содержание - это вся информация, представленная на сайте.

Информационное наполнение сайта должно привлекать внимание посетителя и отвечать теме

сайта. Кроме того, его форма должна соответствовать аудитории - Веб-материалы должны быть

ясны, кратки и действенны в среде Интернет. Хорошее информационное наполнение - само по

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

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

Структура и навигационные функции. Структура и навигационные функции

характеризуют организацию информации на сайте и возможности перемещения между его

разделами. Хорошая структура и навигация - это признаки эффективности и организованности

сайта. Они позволяют пользователю сформировать мысленную модель представленной

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

Хорошие навигационные возможности дают возможность быстро добраться до нужного места

и легко охватить содержание сайта как вглубь, так и вширь.

Дизайн. Дизайн - это характеристика внешнего вида сайта. Сайт не должен быть просто

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

суперстильным. Критерии оценки визуального оформления - высокое качество, уместность и

соответствие той аудитории и задаче, на которые ориентирован сайт. Оформление должно

производить впечатление на посетителя или даже поражать его.

Функциональность. Этот критерий характеризует технологическую сторону сайта.

Хорошая функциональность означает, что сайт быстро загружается, что все его ссылки

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

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

необходимости сайт самостоятельно обеспечивает переход на альтернативные страницы.

Хорошая функциональность - это технология, которая не бросается в глаза.

Интерактивность. Интерактивность характеризует возможности, которые сайт

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

всплывающими меню - сайт должен предоставлять пользователю возможности диалога.

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

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

постоянно ощущать отличие Сети от журнала или телевизора.

Общее впечатление. В конечном счете, сайт - это нечто большее, чем просто сумма

составляющих его частей. Помимо информационного наполнения, структуры и навигационных

возможностей, визуального оформления, функциональности и интерактивности общее

впечатление учитывает и те неуловимые тонкости, которые заставляют пользователя остаться

или уйти. Посещение сайта похоже на свидание: иногда искра проскакивает, иногда нет.

Признаки хорошего общего впечатления - если Вы создали закладку, переслали адрес сайта

приятелю или просто заинтересовались и провели на нем некоторое время.

69

Приложение F.

Итоговый тест

1- Для просмотра Web-страниц в сети Интернет используются программы:

o MicroSoft Word или Pad.

o Internet Explorer или NetScape Navigator.

o HTMLPad или Front Page.

2- Тэг – это:

o Стартовый и конечный маркеры элемента.

o Текст, в котором используются спецсимволы.

o Фрагмент программы, включенный в состав Web-страницы.

3- C помощью какого дескриптора можно осуществить принудительный перевод строки?

o <HR>.

o <BR>.

o <AREA>.

4- Какой дескриптор создает таблицу?

o <TABLIC>...</TABLIC>.

o <TABL>...</TABL>.

o <TABLE>...</TABLE>.

5- Что делает дескриптор <CAPTION>...</CAPTION>?

o группирует строку (или строки) таблицы в нижний колонтитул таблицы.

o группирует заголовок таблицы.

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

6- Как известно, дескриптор <UL>...</UL> создаёт неупорядоченный список, а что нужно

использовать с атрибутом type для создания маркировки в виде круга?

o "square".

o "circle".

o "disc".

7- Для вставки изображения в документ HTML используется команда:

o <IMG scr=”ris.jpg”>.

o <A href=”ris.jpg”>.

o <BODY background=”ris.jpg”>.

70

8- Какой дескриптор выводит текст курсивом?

o <I>...</I>.

o <B>...</B>.

o <Q>...</Q>.

9- Существует ли у дескриптора <A>...</A> атрибут onfocus?

o 1.да.

o 2.нет.

o 3.в исключительных случаях.

10- Цвет текста, отображаемого браузером, надо сделать синим на всей странице.

Выберите варианты правильного написания тэга:

o <BODY TEXT=”BLUE”>.

o <BODY TEXTCOLOR= BLUE>.

o <BODY FONTCOLOR= BLUE>.

11- Какого размера рамка (BORDER) таблицы по умолчанию?

o 1 РХ.

o 0 РХ.

o 3 РХ.

12- Что произойдет по щелчку мыши на гиперссылке <A HREF=”P1”> ТЕКСТ</A>?

o Будет выполнен переход на документ “P1.HTM”.

o Будет выполнен переход на метку “P1” текущего документа.

o Будет выполнен переход на документ “P1”.

13- Гиперссылки на Web-странице могут обеспечить переход…

o только в пределах данной Web-страницы.

o только на Web-страницы данного сервера.

o на любую Web-страницу любого сервера Интернет.

14- Ссылка на адрес электронной почты задается тэгом:

o <A href=”mailto:[email protected]”>текст</A>.

o [email protected]

o <A href=”[email protected]”>текст</A>

71

15- В каком варианте правильно установлено начальное значение списка, если список

необходимо начать с латинской буквы “c”?

o <OL TYPE=”a” START=”c”.

o <OL TYPE=”a” START=”3”>.

o <OL START=”c”>.

16- Что представляет собой файл HTML? Выберите правильные утверждения:

o Это любой файл с расширением “HTM” или “HTML”, содержащий код HTML.

o Это любой файл с расширением “HTM” или “HTML”.

o Это исполняемый файл в двоичном формате.

17- Какой атрибут тэга <TABLE> управляет зазором между ячейками?

o CELLPADDING.

o SELLSPACING.

o SPACE.

18- Какое выравнивание по вертикали используется внутри ячеек таблицы по

умолчанию?

o top.

o left.

o middle.

19- Какое выравнивание по горизонтали используется внутри ячеек таблицы по

умолчанию?

o left.

o center.

o middle.

20- Кто впервые предложил язык гипертекстовой разметки HTML (Hyper Text

Markup Language)?

o был предложен Стюардом Ли-Чу-Ганс.

o был предложен Д. Енжильбардом.

o был предложен Тимом Бернерсом-Ли.

21- Какое значение по умолчанию принимает параметр cellpadding?

o Равен 0.

o Равен 1.

o Равен 3.

72

22- Какой тэг создает список с нумерованными элементами?

o UL.

o OL.

o DL.

23- Какой из тэгов позволяет получить самый крупный текст при отображении в

браузере?

o <FONT SIZE=”7”>.

o <H6>.

o <FONT SIZE=”1”>.

24- Какому значению параметра SIZE в тэге FONT соответствует размер текста по

умолчанию?

o <FONT SIZE=2>.

o <FONT SIZE=3>.

o <FONT SIZE=1>.

25- Выберите такие варианты, которые дадут одинаковый цвет текста.

o {color: red:}; {color: #ffoooo}.

o {color: rgb(100,0,0)}; {color: red}.

o {color: rgb(red)}; (color: #F00}.

26- Тэг IFRAME служит для:

o задания плавающих фреймов.

o записи альтернативной информации, если браузер не имеет возможности поддержки

фреймов.

o организации фреймов.

27- Какие тэги могут содержаться внутри контейнера <FRAMESET>:

o <FRAME> и <IFRAME>.

o <FRAME> и вложенные тэги <FRAMESET>.

o <NOFRAME> и <FRAME>.

28- Какие из предложенных имен фреймов недопустимы:

o <FRAME src=”sample.htm” name=”Frame_1”>.

o <FRAME src=”sample.htm” name=”1_Frame”>.

o Оба имени корректны.

73

29- В чем заключается понятие отмененного (deprecate) тэга:

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

o не поддерживаются браузерами.

o тэг перешел из разряда устаревшего в разряд отмененного.

30- Каким образом можно горизонтальную линию создаваемую тэгом <HR>,

разместить на одной строке с текстом?

o <NOBR><HR align="left" WIDTH=50> текст</NOBR>

o <HR align="left" WIDTH=50> текст

o этого сделать нельзя.

31- Если браузер не опознает тэг или его отдельные атрибуты, то они:

o выполняются с параметрами по умолчанию.

o игнорируются.

o выдается ошибка.

32- 32. Выберите строку, которая не содержит ошибки:

o <DIV STYLE=color: white; background-color: green”>

o <!- -

o TD TD P {COLOR: RED}

33- Внутри каких контейнеров (парных тэгов) нельзя использовать никакие другие

тэги:

o <A>

o <FORM>

o <OPTION>

34- Задание размеров фреймов. Какими приоритетами руководствуется браузер при

построении структуры?

o Сначала - фреймы с абсолютными значениями размеров, затем - в процентах, затем - с

относительными значениями.

o Сначала - фреймы, размеры которых заданы в процентах, затем - с относительными,

затем - с абсолютными.

o Сначала - фреймы с относительными значениями размеров, затем - в процентах, затем -

с абсолютными значениями.

35- Какой из нижеперечисленных тэгов не является тэгом-контейнером:

o <OBJECT>

74

o <PARAM>

o <APPLET>

36- Отметьте утверждения, относящиеся к тэгам <H1>, <H2>,. . ., <H6>, которые Вы

считаете правильными:

o С помощью данных тэгов оформляются заголовки разных уровней текста HTML-

документа.

o <H6> - самый крупный заголовок.

o Размер шрифта заголовка можно поменять с помощью тэга <FONT>, который

расположен снаружи тэга заголовка.

37- Какой из следующих параметров тэга <FORM> является обязательным:

o method

o action

o enctype

38- Какой из нижеперечисленных элементов не является элементом формы:

o checkbox

o radio

o standby

75

Список литературы

1. Кисленко, Н.П. HTML. Самое необходимое, - БХВ-Петербург, 2008

2. Вайнман Л., Вильям. Динамический HTML. Руководство разработчика Web-сайтов. —

М.:Diasoft, 2001, — 464 с.

3. Гаевский, А.Ю.; Романовский, В.А.100% самоучитель. Создание Web-страниц и Web-

сайтов. HTML и JavaScript,- М.: Триумф, 2008

4. Дизайн Web-страниц (+ CD), Нильсен Я., Тахир М., Вильямс, 2002, 336 с.

5. Дизайн и архитектура современного Web-сайта, Сакс Т., Мак-Клейн Г., Вильямс, 2002,

304 с.

6. Искусство Web-дизайна. Самоучитель, Вин Дж., Питер, 2002, 224 с.

7. Матросов, А.В.; Сергеев, А.О.; Чаунин, М.П. Html 4.0, - СПб: БХВ, 2005

8. Матросов А., Сергеев А. HTML 4.0: Новый уровень создания HTML-документов

СПБ:БХВ, 2003. – 670 с.

9. Как раскрутить Web-сайт, Загуменнов А. П., ДМК, 2001, 272 с.

Настольная книга Web-мастера. Полное руководство (CD), Коржинский С., КноРус, 2000,

304 с.

10. Дебольт, Вирджиния. HTML и CSS. Совместное использование, - НТ Пресс, 2006

11. Омельченко Л.Н., Федоров А.Ф. Самоучитель Microsoft FrontPage 2002.-СП-б:БХВ-

Петербург, 2001.-576 с.

12. Пфаффенбергер, Брайан; Шафер, Стивен; Уайт, Чак и др. HTML, XHTML и CSS.

Библия пользователя, - М.: Вильямс; Издание 3-е, 2007

13. Основы WEB-технологий. Курс лекций., Храмцов П.Б., Брик С.А., Русак А.М., Сурин

А.И. , ИНТУИТ.ру, 2003, 512 с.

14. Основы веб-мастеринга, Жаринов К.В, BHV, 2003, 352 с.

15. Программирование для Web. Библиотека профессионала, Холл М., Браун Л., Вильямс,

2002, 1264 с.

16. Текст для Web. Доступность и привлекательность, Джонатан Прайс, Вильямс, 2003,

464 с.

17. Дунаев, В.В. HTML, скрипты и стили, - СПб: БХВ, 2006

18. Исси Коэн, Лазаро; Исси Коэн, Джозеф. Полный справочник по HTML, CSS и

JavaScript, М.: ЭКОМ Паблишерз, 2007

Основы создания сайтов на языке...

Documents