СОЗДАНИЕ WEB-СТРАНИЦ: ОСНОВЫ ...bek.sibadi.org/fulltext/ed194.pdf · рассмотрены основные конструкции языка html, принципы

Л.А. Внукова, С.А. Зырянова

СОЗДАНИЕ WEB-СТРАНИЦ:

ОСНОВЫ ЯЗЫКА HTML

Министерство образования Российской Федерации Сибирская государственная автомобильно-дорожная академия

(СибАДИ)

Л.А. Внукова, С.А. Зырянова

СОЗДАНИЕ WEB-СТРАНИЦ:

ОСНОВЫ ЯЗЫКА HTML

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

Омск Издательство СибАДИ

2003

УДК 681.3.06 ББК 32.973.2 В 60

Рецензенты: канд. пед. наук З.В. Семенова, канд. пед. наук Е.И. Федорова

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

Внукова Л.А. Разработка Web-страниц: Основы языка HTML/ Л.А. Внукова, С.А. Зырянова: Учебно-методическое пособие. – Омск: Изд-во СибАДИ, 2003. – 116 с.

Предназначено для студентов специальностей «Менеджмент организаций»,

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

Ил. 102. Табл. 21. Библиогр.: 10 назв.

© Л.А. Внукова, С.А. Зырянова, 2003 ISBN 5- 93204-116-1 © Издательство СибАДИ, 2003

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

Внукова Людмила Анатольевна Зырянова Светлана Анатольевна

СОЗДАНИЕ WEB-СТРАНИЦ: ОСНОВЫ ЯЗЫКА HTML

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

Редактор Н.И.Косенкова

Лицензия ИД № 00064 от 16.08.99. Подписано к печати 21.04. 2003.

Формат 60х90 1/16. Бумага писчая. Гарнитура Times New Roman. Оперативный способ печати. Усл.п.л. 7,25, уч.-изд.л. 7,25. Тираж 250 экз. Заказ .

Цена договорная.

Издательство СибАДИ 644099, Омск, ул. П.Некрасова, 10

__________________________________

Отпечатано в ПЦ издательства СибАДИ 644099, Омск, ул. П.Некрасова, 10

Введение Сегодня везде можно услышать о всемирной паутине – World Wide

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

Изучив материал данного методического пособия, вы познакомитесь с основными понятиями глобальной сети Интернет, научитесь работать в среде Internet Explorer, освоите язык HTML и с его помощью сможете создавать собственные Web-документы.

Глава I

СОЗДАНИЕ WEB-СТРАНИЦ

1.1. ОСНОВНЫЕ ПОНЯТИЯ. ПЕРВЫЕ ШАГИ ПОСТРОЕНИЯ WEB-СТРАНИЦЫ

1.1.1. Представление об Интернете

Система Интернет была создана в конце 60-х годов американскими

военными. Целью ее создания являлось осуществление надежной связи в случае вражеского нападения. Первоначально в сеть входило всего четыре компьютера. В 1972 году в сеть было подключено 50 университетов, работавших над военными проектами. В 1980 году в сеть были подключены суперкомпьютеры. В 1991 году Интернет уже объединял все другие сети.

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

Провайдер (Service Provider) – фирма, которая обеспечивает доступ к Internet.

1.1.2. Гипертекст и Web-документ

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

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

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

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

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

Гипертекст с помощью гиперссылок связывает между собой множество документов. Возникает ассоциация с паутиной, которая соединяет информацию, разбросанную по всему миру. Паутина – по-английски «Web» (произносится «веб»). Так в 1991 году появилась всемирная паутина – World Wide Web, коротко WWW.

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

1.1.3. Программа Браузер

Web-документы хранятся в файлах. Просматриваются данные файлы с

помощью специальной программы. Просматривать по-английски to browse (существительное browser по-русски произносится «браузер»).

Браузер – программа, служащая для просмотра Web-документов. Существует много программ-браузеров. Mosaic, первый и

необыкновенно популярный Web-браузер, получивший восторженные отзывы. Он был легок в использовании, работал на платформах UNIX, PC и Macintosh и распространялся бесплатно. Спустя некоторое время разработчик Mosaic объединился с основателем Silicon Graphich. Совместно они разработали Netscape. Позднее на рынке появился новый

браузер – Internet Explorer, выпущенный фирмой Microsoft. Он также был быстро принят Интернет-сообществом.

Рассмотрим браузер Microsoft Internet Explorer (рис.1).

Рис. 1. Окно браузера Microsoft Internet Explorer

В Главном окне браузера (см. рис. 1) основную часть рабочей области экрана составляет Web-страница. Прочитать загруженный в эту область текст можно с помощью расположенной справа вертикальной Линейки прокрутки.

Поле заголовка окна содержит название загруженной Web-страницы. В нашем примере название заголовка окна Browser.

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

Строка состояния Главное окно браузера

Линейка прокрутки

Панель инструментов

Строка адреса Основное меню

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

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

В Строке адреса отображается полный адрес загруженного браузером документа. Вместо термина «адрес» чаще употребляют аббревиатуру URL.

URL (Uniform Resource Location) – унифицированный указатель ресурсов, указывает адрес Web-документа в WWW.

Основное меню содержит команды по работе с Web-страницей и окном браузера.

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

1.1.4. Модель «клиент-сервер»

Web использует технологию «клиент-сервер». Это означает, что где-

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

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

Web использует собственный способ связи – протокол HTTP, с помощью которого страницы отправляются и принимаются в Интернете.

HTTP (Hyper Text Transfer Protocol) – это протокол Интернета, позволяющий двум компьютерам общаться между собой в определенном формате. Любой протокол – это набор правил, которые используются компьютерами для обмена информацией. HTTP – самый распространенный, но не единственный протокол, поддерживаемый WWW.

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

1.1.5. Web-страница Web-страницы бывают разных форм и размеров. Некоторые из них –

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

Домашняя страница (Home Page) – данный термин используется коммерческими информационными системами в качестве названия их вводных страниц.

Сайт (site) – набор Web-страниц, принадлежащих одному владельцу. Иные создают Web-страницы просто для забавы; некоторые просто

слышали о Web и решили, что Web-страница – это современно. Необходимо заранее определить назначение будущей Web-страницы.

Если решили, для чего нужна Web-страница, то теперь следует определить, какую на нее поместить информацию. Сознавая цель, будет значительно легче разработать и создать Web-страницу.

Что можно расположить на Web-странице

Подавляющее большинство существующих Web-страниц – это личные

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

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

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

Итак, содержание Web-страницы определено. Если еще не решили, что хотите разместить на Web-странице, то рассмотрим несколько рекомендаций:

1. Определите, что будет размещено на Web-странице и составьте ее эскиз на листе бумаги.

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

прикинуть, сколько места для них потребуется. Совет: постоянно совершенствуйте Web-страницу. Начните с чего-

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

1.1.6. Язык HTML

Для создания Web-документов используется язык HTML. Язык HTML – язык разметки гипертекста. Расшифровывается как

Hyper Text Markup Language (произносится «эйч-ти-эм-эл»). Это стандарт, в соответствии с которым документы Web отображаются

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

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

HTML-файл – текстовый файл, имеющий расширение .htm. На рис. 2 слева – Web-документ, справа – его HTML-файл.

Рис. 2. Отображение в окне Web-документа (слева) и соответствующего ему HTML-файла (справа)

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

Тег (от англ. слова Tag) – команда HTML, указывающая, какую операцию необходимо выполнить, например, вывести на экран текст, нарисовать линию или использовать графику.

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

Тег начинается со знака «меньше» (<) и заканчивается знаком «больше» (>). Прописные и строчные буквы при написании тегов не различаются.

Существует два типа тегов – парные и непарные. Парный тег влияет на текст с того места, где употреблен, до того места, где указан признак окончания его действия (им служит тот же самый тег, только начинающийся с символа слэш «/»). В качестве примера приведем парный тег, указывающий браузеру, что далее следует HTML-файл: <HTML>…</HTML>. Теги по выполняемым ими функциям делятся на структурные теги, теги формирования абзацев, символов и т.д.

В табл. 1 приведены структурные теги. Таблица 1. Структурные теги

Тег Комментарий <HTML>…</HTML> Указывает браузеру, что далее следует HTML-файл. Весь

текст HTML-файла должен находиться внутри этого тега <HEAD>…</HEAD> Внутри этого тега находится заголовок документа,

состоящий из нескольких частей, основной из которых является заголовок окна, а также описываются общие правила интерпретации HTML-документа в целом и вспомогательная информация о документе, например, команда: <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> задает браузеру информацию о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows

<TITLE>…</TITLE> Тег названия окна. Пишется внутри тега HEAD. Отображается в строке заголовка окна, название можно поместить в списке закладок, при поиске в WWW считается названием Web-страницы

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

1.1.7. Средства создания HTML-файлов

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

Основные шаги по созданию страницы

1. Создайте новую папку (каталог) в Windows для хранения всех

компонентов вашей страницы. 2. Щелкните мышью на кнопку Пуск (в левом углу рабочего стола). 3. Щелкните мышью на значке Программы/Стандартные/Блокнот

(Notepad) (рис. 3.).

Рис. 3. Загрузка редактора Блокнот Редактор Блокнот откроется, и курсор окажется в первой строке, как

показано на рис. 4.

Рис. 4. Окно редактора Блокнот

4. Создайте HTML-документ, набрав в первой строке тег <HTML>. 5. Введите несколько пустых строк и поставьте закрывающий тег,

который завершает его действие. Для тега <HTML> закрывающим является тег </HTML>.

6. Вернитесь на строку после тега <HTML> и ограничьте заголовок документа:

<HEAD> <TITLE>Internet</TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"> </HEAD>

7. Запишите парные теги тела документа <BODY> и </BODY>. 8. Сохраните текстовый файл. Файлу необходимо присвоить

расширение htm. Для этого необходимо в меню редактора Блокнот выбрать команду Файл/Сохранить как… В появившемся диалоговом окне в строке напротив записи Имя файла записать имя файла primer с расширением htm, как это сделано на рис. 5.

Замечание: имя файла и его расширение необходимо записывать только маленькими буквами. Это позволит любому браузеру распознать файл. Желательно, чтобы имя файла было записано только латинскими буквами, например, chat.htm, kino.htm, kat.htm и т. п. Имя файла и его расширение отделяются точкой.

Рис. 5. Сохранение файла с именем primer.htm в папку HOME

На рис. 6. показан сохраненный файл primer.htm.

Рис. 6. Листинг программы

1.1.8. Оформление текста в Web-документе

Для этого рассмотрим теги управления внешним видом Web-документа (табл. 2) и теги форматирования символов (табл. 3).

имя файла и расширение

Таблица 2. Теги управления внешним видом Web-документа Тег Комментарий

<P> Тег «параграф» отделяет абзацы друг от друга, ставится в начале абзаца. В соответствии с международным стандартом абзацы разделяются пустыми строками и не начинаются с красной строки

<BR> Осуществляет переход на новую строку <HR>

Отображает горизонтальную линию, идущую через весь экран (далее рассмотрим параметры данного тега)

<HR SIZE=" "> Устанавливает высоту (толщину) линии <HR WIDTH=" "> Устанавливает ширину линии, можно указать в процентах или

пикселях, например, <HR WIDTH="50%"> или <HR WIDTH ="325">

<HR COLOR=" "> Задает линии определенный цвет. Замечание: цвета рассмотрим позже

<HR NOSHADE> Создает линию без тени <PRE>…</PRE> Вставляет предварительно отформатированный текст <H1>…</H1> <H2>…</H2> <H3>…</H3> <H4>…</H4> <H5>…</H5> <H6>…</H6>

Определяют заголовки документа. <H1> – отображает текст самым большим размером шрифта (высший уровень), <H6> – самым малым (низший уровень). Замечание: если не определять уровень заголовка, то браузер отобразит его размером <H3>

Таблица 3. Теги форматирования символов

Тег Комментарий <B>…</B> Текст, заключенный в этот тег, отобразится

жирным шрифтом <I>…</I> Текст, заключенный в этот тег, отобразится

курсивом <U>…</U> Текст, заключенный в этот тег, отобразится

подчеркнутым шрифтом <TT>…</TT> Создает текст, имитирующий стиль печатной

машинки <CITE>…</CITE> Используется для цитат (обычно наклонный

текст) <EM>…</EM> Используется для выделения из текста слова

(наклонный или жирный текст) <STRONG>…</STRONG> Используется для выделения наиболее важных

частей текста (наклонный или жирный текст)

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

<HTML>

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

1251">

<TITLE>Internet</TITLE> </HEAD> <BODY> <H1>Интернет и World Wide Web</H1> <BR> <HR> <H2>Здесь вы можете узнать:</H2> <BR> <P><B>Что такое Интернет</B> <P><I>Историю создания Интернета</I> <P><U>Основные понятия среды Интернета</U> </BODY> </HTML> Теперь необходимо посмотреть файл primer.htm. Просмотр страницы –

простая операция, самое замечательное – для этого не придется подключаться к провайдеру. Это позволяет просмотреть страницу до установки ее в Web. Просмотр осуществляется с помощью Web-браузера. Все браузеры разные, но у всех них есть опция открытия HTML - файла. Она находится в меню браузера Файл (File)/Открыть (Open). Например, ваша страница primer.htm находится на диске С: в каталоге HOME.

Просмотреть файл можно несколькими способами. 1 способ:

1. Запустить браузер. Подключаться к Интернету не обязательно. 2. Выбрать в меню браузера Файл (File)/Открыть (Open). 3. Укажите путь к файлу. Это можно сделать двумя способами:

– в строке ввода прописать путь: С:\HOME\primer.htm. Нажать Ok. – выбрать опцию Обзор и найти необходимый файл. Нажать Открыть. Нажать Ok.

4. Просмотреть, как выглядит на экране Web-страница. Если все в порядке, пропустить следующие шаги.

5. Для исправления имеющихся недостатков внести изменения в HTML – документ.

2 способ: с помощью программ Мой компьютер, Проводник, Far или аналогичным им найдите файл и два раза щелкните по нему мышкой (щелчок может быть одинарный – это зависит от настроек Windows). Данное действие загрузит браузер и отобразит вашу Web-страницу. Далее выполняйте п. 4 и 5 из предыдущего способа.

На рис. 7. представлен браузер Internet Explorer с отображенным Web-файлом primer.htm.

Замечание: в дальнейшем также будем осуществлять просмотр Web- файлов браузером Internet Explorer.

Рис. 7. Вид Web-страницы в окне браузера

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

1. В меню браузера Вид выбрать: В Виде HTML или Источник. Нажать Enter.

2. Внести исправления в тексте программы. 3. Сохранить файл. 4. Нажать кнопку Обновить браузера.

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

Изменим расположение текста данной Web-страницы, используя тег <PRE>…</PRE>, тег самостоятельного форматирования.

Текст программы Web-файла primer.htm будет представлен

следующим образом:

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; harset=windows-

1251"> <TITLE>Internet</TITLE> </HEAD> <BODY> <H1>Интернет и World Wide Web</H1> <BR> <HR> <H2>Здесь вы можете узнать:</H2> <BR> <PRE> <B>Что такое Интернет</B> <I>Историю создания Интернета</I> <U>Основные понятия среды Интернета</U> </PRE> </BODY> </HTML> На рис. 8. показано, как будет выглядеть файл в окне браузера.


Кнопка Обновить

1.1.9. Расположение текста относительно экрана браузера

Расположение текста задается путем включения нескольких ключевых слов в тег <P> (табл. 4).

Таблица 4. Теги выравнивания текста

Тег Комментарий <P ALIGN="LEFT"> Абзац выравнивается по левому краю экрана <P ALIGN="RIGHT"> Абзац выравнивается по правому краю экрана <P ALIGN="CENTER"> Абзац выравнивается по центру экрана <P ALIGN="JUSTIFY"> Абзац выравнивается по ширине экрана, но браузер

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

Замечание: если не указывать в теге <P> зарезервизированное слово,

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

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


1251"> <TITLE>Internet</TITLE> </HEAD> <BODY> <H1><P ALIGN="CENTER">Интернет и World Wide Web</H1> <BR> <HR> <H2><P ALIGN="CENTER">Здесь вы можете узнать:</H2> <BR> <B><P ALIGN="LEFT">Что такое Интернет</B> <I><P ALIGN="RIGHT">Историю создания Интернета</I> <U><P ALIGN="JUSTIFY">Основные понятия среды

Интернета</U> </BODY> </HTML>

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


Контрольные вопросы

1. Что такое Интернет, гипертекст, Web-страница, Web-файл, сайт,

Web-браузер, провайдер, URL, протокол HTTP? 2. Как используется технология «клиент-сервер» в Web? 3. Какую информацию можно расположить на Web-странице? 4. Что такое HTML, HTML-файл, тег? 5. Перечислите и дайте характеристику структурным тегам. 6. Перечислите и дайте характеристику тегам управления внешним

видом Web-страниц. 7. Перечислите и дайте характеристику тегам форматирования

символов. 8. Перечислите основные шаги по созданию Web-страницы. 9. Как можно расположить текст относительно экрана браузера?

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

1. Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 10):


2. Создайте HTML-документ, отображающий на экране браузера

следующую информацию (рис. 11):





1.2. ДОПОЛНИТЕЛЬНЫЕ ВОЗМОЖНОСТИ ФОРМАТИРОВАНИЯ ТЕКСТА В HTML

1.2.1. Возможности тега <FONT>

Таблица 5. Атрибуты тега <FONT>

Тег Комментарий <FONT SIZE=" ">…</FONT> Устанавливает размер текста в пределах от 1

(наименьший) до 7 (наибольший). Замечание: если не определять размер текста, то браузер отобразит его размером: <FONT SIZE="3">…</FONT>

<FONT FACE=" ">…</FONT> Устанавливает шрифты различного начертания (гарнитура)

<FONT COLOR=" ">…</FONT> Устанавливает цвет текста Рассмотрим данные табл. 5 на примерах.

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

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

… <FONT SIZE="1">Интернет</FONT> <FONT SIZE="2">Интернет</FONT> <FONT SIZE="3">Интернет</FONT> <FONT SIZE="4">Интернет</FONT> <FONT SIZE="5">Интернет</FONT> <FONT SIZE="6">Интернет</FONT> <FONT SIZE="7">Интернет</FONT> … На рис. 13 показано, как будет выглядеть файл в окне браузера.


Задание относительного размера шрифта с помощью тега <FONT>

Тег <FONT> также имеет дополнительные возможности для задания

размера шрифта основного текста. Вместо определенного номера можно задать относительный размер шрифта, например +3 или -1. Web-браузер прибавляет (или вычитает) заданное число к номеру шрифта, используемого по умолчанию (размер 3).

Рассмотрим на примерах: … <FONT SIZE="+3">Интернет</FONT><BR> <FONT SIZE="-1">Интернет</FONT> …

Поскольку шрифт обычно имеет размер 3, первая строка приведенного кода будет выведена на экран шрифтом с размером 6 (3+3=6), а вторая будет иметь размер 1 (3-2=1).



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

Приведем пример: … <CENTER> <FONT SIZE="6">И</FONT><FONT SIZE="5">нтернет</FONT> <FONT SIZE="5">и</FONT> <FONT SIZE="6">W</FONT><FONT SIZE="5">orld</FONT> <FONT SIZE="6">W</FONT><FONT SIZE="5">ide</FONT> <FONT SIZE="6">W</FONT><FONT SIZE="5">eb</FONT> </CENTER> … На рис. 15 показано, как будет выглядеть файл в окне браузера.


Вложенные теги <FONT>

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

Рассмотрим на примере: … <FONT SIZE="+1">World <FONT SIZE="+2">Wide <FONT SIZE="+3">Web </FONT> </FONT> </FONT> … На рис. 16 показано, как будет выглядеть файл в окне браузера.


Шрифты различного начертания

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

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

Internet Explorer позволяет задавать начертание (гарнитуру) шрифта, которым текст будет выведен на экран.

Приведем примеры: … <FONT FACE="Arial">Интернет</FONT> <BR><FONT FACE="Coronet">Интернет</FONT> <BR><FONT FACE="WingDings">Интернет</FONT> … На рис. 17 показано, как будет выглядеть файл в окне браузера.


Этот фрагмент кода сообщает браузеру, что отмеченный тегом текст должен быть отображен шрифтом соответственно: Arial, Coronet, WingDings.

Тег<FONT> работает следующим образом: сначала браузер выясняет, какой шрифт задан. Затем он проверяет, установлен ли данный шрифт на персональном компьютере посетителя Web-страницы. Если да, браузер отображает текст, используя этот шрифт. Если по какой - либо причине не удается найти шрифт, браузер просто выводит текст стандартным шрифтом, как если бы тега вообще не было. При желании можно задать список шрифтов, которые браузер будет искать перед тем, как прибегнет к шрифту, заданному по умолчанию.

Например: <FONT FACE="Arial,Coronet,WingDings">Интернет</FONT> Приведенный выше тег сначала попытается найти шрифт Arial и

отобразить текст этим шрифтом. Если попытка не увенчается успехом, он станет искать шрифт Coronet, затем WingDings. Если ни с одним из них ничего не выйдет, Internet Explorer вернется к используемому по умолчанию шрифту Times New Roman. Можно задать любое количество альтернативных шрифтов.

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

Управление цветом текста

Цвет текста можно задать двумя способами. 1 способ: с помощью кода. То есть определенные цвета задаются шестнадцатеричной

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

Шестнадцатеричные цифры – это цифры от 0 до 9 и буквы от А до F. Перед кодом необходимо установить знак #.

Зададим, например, текст красного цвета: <FONT COLOR="#FF0000">Текст красного цвета</FONT>

где #FF0000 – код красного цвета. 2 способ: с помощью названия соответствующего цвета. Тогда, чтобы задать, например желтый цвет, необходимо запись

представить следующим образом: <FONT COLOR="Yellow"> Текст желтого цвета </FONT> Здесь Yellow – название цвета. Замечание: если не определять цвет текста, то текст по умолчанию

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

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"> <TITLE>Internet</TITLE> </HEAD> <BODY><HR NOSHADE SIZE="12"><FONT Color="#FF0000"> <BR> Красный текст, заданный тегом FONT</FONT> <BR> Основной текст (по умолчанию черный) <FONT Color="#008000" Face="Times Roman"> <BR>Темно-зеленый текст, заданный тегом FONT</FONT> <HR COLOR="GREEN" WIDTH="325"> </BODY> </HTML> На рис. 18 показано, как будет выглядеть файл в окне браузера.


Приведем таблицу цветов (табл. 6). Таблица 6. Список цветов

№ Цвет Название Код 1 Белоснежный Snow FFFAFA 2 Слоновая кость Ivory FFFFF0 3 Лимонный Lemon Chiffon FFFACD 4 Белый White FFFFFF 5 Черный Black 000000 6 Серый Gray BEBEBE 7 Темно-серый Dark Gray 808080 8 Светло-серый Light Gray C0C0C0 9 Темно-синий Dark Blue 191970 10 Васильковый Cormflower 6495ED 11 Синий Blue 0000FF 12 Cветло-синий Light Blue A6CAF0 13 Бирюзовый Turquoise AFEEEE 14 Аквамарин Aquamarine 7FFFD4 15 Весенний зеленый Spring Green 00FF7F 16 Зеленый Green 7CFC00 17 Темно-зеленый Dark Green 008000 18 Лимонно-зеленый Lime Green 32CD32 19 Cветло-желтый Light Yellow FFFFE0 20 Желтый Yellow FFFF00 21 Темно-желтый Dark Yellow 808000 22 Золотой Gold FFD700 23 Охра Sienna A0522D 24 Бежевый Beige F5F5DC 25 Шоколадный Chocolate D2691E 26 Коричневый Brown A52A2A 27 Оранжевый Orange FFA500 28 Коралловый Coral FF7F50 29 Красный Red FF0000 30 Темно-красный Dark Red 800000 31 Розовый Pink FFC0CB 32 Светло-розовый Light Pink FFB6C1 33 Фиолетовый Violet EE82EE 34 Фиолетово-синий Blue Violet 8A2BE2 35 Пурпурный Purple A020F0

1.2.2. Стилевое оформление текста

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

Таблица 7. Теги дополнительного форматирования Тег Комментарий

<BIG>…</BIG> Если принять размер шрифта без тегов за 100 процентов, то данный тег увеличивает его на 10 процентов

<SMALL>…</SMALL> Если принять размер шрифта без тегов за 100 процентов, то данный тег уменьшает этот размер на 10 процентов

<SUB>…</SUB> Выводит текст в виде нижнего индекса <SUP>…</SUP> Выводит текст в виде верхнего индекса <S>…</S> Зачеркнутый текст

Таблица 8. Специальные символы

Символ Название Запись в HTML < Знак "меньше" &lt > Знак "больше" &gt & Амперсанд &amp " Прямая кавычка &quot © Знак копирайта &copy ® Знак "зарегистрировано" &reg § Знак параграфа &sect ° Знак градуса &deg Неразделяемый пробел

Замечание: запись в HTML необходимо осуществлять малыми

буквами. Если знак параграфа будет записан &DEG вместо &deg, то на экране браузера вместо символа § отобразится &DEG.

Приведем пример использования верхнего и нижнего индексов: … <B>Перевод чисел из двоичной системы счисления в десятичную:</B> 101101<SUB>2</SUB> = 45<SUB>10</SUB> <BR><B>Единицы измерения информации</B> <BR>1 килобайт = 1 Кб = 2<SUP>10</SUP> байт = 1024 байта … На рис. 19 показано, как будет выглядеть файл в окне браузера.


Приведем еще пример использования тегов стилевого оформления, а также тега <FONT>:


1251"><TITLE>Font</TITLE></HEAD><BODY> <P ALIGN="CENTER"><B><FONT COLOR="#0066FF" SIZE="4"> <BIG> &sect 1. Поисковые системы</BIG></FONT></B> <P ALIGN="JUSTIFY"> <FONT SIZE="4"> http://russia.agama.com/Aport/ </FONT><FONT

SIZE="3"> - &lt Поисковая система Апорт. Хорошие подсказки по поиску. Возможность перевода запросов на английский и наоборот. &gt

</FONT><BR> <FONT SIZE="4">http://www/rambler.ru/ </FONT><FONT SIZE="3"> -

&lt Прекрасный и наиболее полный индекс российского Интернета с возможностью поиска во всех кодировках русского языка. &gt </FONT>

<BR> <FONT SIZE="4">http://yandex.ru/ </FONT> <FONT SIZE="3"> - &lt Русскоязычная поисковая система Яndex. &gt </FONT><BR><FONT SIZE="4">http://www.altavista.telia.com/ </FONT><FONT SIZE="3">- &lt Поисковая система Alta Vista с возможностью поиска на русском языке. &gt</FONT></B>

</BODY></HTML> На рис. 20 показано, как будет выглядеть файл в окне браузера.


1.2.3. Изменение цвета с помощью тега <BODY>

Тег <BODY> задает цвет фона и цвет основного текста документа. Для этого в тег <BODY> необходимо записать два ключевых слова:

Bgcolor=" " – устанавливает цвет фона Text=" " – задает цвет текста. Приведем пример: на темно-зеленом фоне запишем белоснежный

текст.

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


1251"><TITLE>Internet</TITLE></HEAD> <BODY BGCOLOR="#008000" TEXT="#FFFAFA"> <H2><B>Интернет и World Wide Web</B></H2> </BODY></HTML> На рис. 21 показано, как будет выглядеть файл в окне браузера.


1.2.4. Создание бегущей строки В качестве бегущей строки (БС) принимается заголовок текста или

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

Таблица 9. Тег создания бегущей строки и его атрибуты

Тег Комментарий 1 2

<MARQUEE>…</MARQUEE> Создает БС Атрибуты Комментарий

ALIGN=" " Располагает БС по вертикали относительно текста, в котором она расположена.

Окончание табл. 9 1 2

Принимает значения: – TOP – по верхнему положению; – MIDDLE – посередине; – BOTTOM – по нижнему положению

BEHAVIOR=" " Задает стиль БС. Принимает значения:

– SCROLL – БС пробегает полностью по окну браузера и действие повторяется (задается по умолчанию); – SLIDE – БС выбегает и останавливается в левом углу окна браузера;

– ALTERNATE – БС «болтается» между краями окна браузера

BGCOLOR=" " Задает цвет фона БС DIRECTION=" " Задает направление пробега текста БС.

Принимает значения: – LEFT – текст БС пробегает слева направо (задается по умолчанию); – RIGHT – текст БС пробегает справа налево

HEIGHT=" " Задает высоту области БС в % LOOP=" " Задает число повторов анимации БС.

Принимает значения: – INFINITE – бесконечное значение (задается по умолчанию); – любое целое число

HSPACE=" " Размещает слева и справа от БС область свободного пространства заданного размера. Значение задается в пикселях

VSPACE=" " Размещает над и под от БС область свободного пространства заданного размера. Значение задается в пикселях

SCROLLAMOUNT=" " Задает значение в пикселях области смещения текста при любой операции прокрутки БС

SCROLLDELAY=" " Задает задержку в миллисекундах между последними смещениями текста БС. 1 с.=1000 млс.

WIDTH=" " Задает ширину области БС в пикселях

1.2.5. Фоновое звуковое сопровождение

Таблица 10. Тег создания бегущей строки и его атрибуты Тег Комментарий 1 2

<BGSOUND> Задает фоновое звуковое сопровождение Атрибуты Комментарий

SRC="URL" Задает URL аудиофайла для воспроизведения LOOP=" " Задает число повторов.

Окончание табл. 10 1 2 Принимает значения:

– INFINITE – бесконечное значение (задается по умолчанию);

– любое целое число


1. Перечислите возможности тега <FONT>. 2. Какой размер шрифта у данного текста:

<FONT SIZE=+4>Возможности Интернета</FONT>? 3. Каким образом браузер отобразит текст, заданный шрифтами

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

4. Какие теги относятся к стилевому оформлению текста? 5. Какие специальные символы предусмотрены в HTML? 6. Как можно изменить цвет текста и фона с помощью тега <BODY>? 7. Какие способы задания цвета существуют в HTML? 8. Чем отличается тег <FONT> от тега <BODY> при задании цвета

текста? 9. Как создать БС на Web-странице? Перечислите и дайте

характеристику атрибутам БС. 10. Как создать фоновое звуковое сопровождение на Web-странице?





Замечание: заголовок текста выполнен в виде БС. Для БС заданы следующие параметры:

– текст БС перемещается слева направо; – задан фон для БС; – число повторов анимации БС равно трем; – задан стиль БС: ALTERNATE.




Замечание: заголовок текста выполнен в виде БС. Для БС заданы следующие параметры:

– текст БС перемещается справа налево; – задана ширина БС, равная 230 пикселей; – число повторов анимации БС равно бесконечности; – задан стиль БС: SCROLL.




Замечание: просмотр данной Web-страницы осуществляется вместе с

фоновым звуковым сопровождением.

1.3. ИСПОЛЬЗОВАНИЕ СПИСКОВ НА WEB-СТРАНИЦЕ

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

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

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

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

Таблица 11. Теги оформления списков Тег Комментарий 1 2

<LH>…</LH> Создает заголовок списка <UL> <LI> … <LI> </UL>

<UL>…</UL> – создает маркированный список; <LI> – определяет каждый элемент списка и задает маркировку элемента


<OL> <LI> … <LI> </OL>

<OL>…</OL> – создает нумерованный список; <LI> – определяет каждый элемент списка и присваивает номер

<DL> <DT> <DD> … <DT> <DD> </DL>

<DL>…</DL> – создает список определений; <DT> – определяет каждый из терминов списка; <DD> – описывает каждое определение

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

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

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

Ниже приведены три возможных способа маркировки: 1. TYPE="CIRCLE" Незакрашенная окружность – 2. TYPE="DISC" Закрашенная окружность – 3. TYPE="SQUARE" Закрашенный квадрат –

Приведем пример маркированного списка, представим нашу первую Web-страницу primer.htm в виде списка.



1251"><TITLE>Internet</TITLE></HEAD><BODY> <H1><P ALIGN="CENTER">Интернет и World Wide Web</H1> <BR> <UL TYPE="DISC"> <LH><H2>Здесь вы можете узнать:</H2></LH> <BR> <LI>Что такое Интернет <LI>Историю создания Интернета <LI>Основные понятия среды Интернета </UL>

</BODY></HTML> На рис. 25 показано, как будет выглядеть файл в окне браузера.


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

Нумерованный список очень напоминает маркированный.

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

По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр – 1, 2, 3 и т. д. Можно задать другой способ нумерации, например, буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в тег <OL> ключевое слово TYPE.

Ниже приведены пять возможных способов нумерации: 1. TYPE="1" Стандартная цифровая нумерация – 1, 2, 3, ... 2. TYPE="A" Прописные буквы – A, B, C, D, ... 3. TYPE="a" Строчные буквы – a, b, c, d, ... 4. TYPE="I" Римские цифры – I, II, III, IV, V, ... 5. TYPE="i" Строчные римские цифры – i, ii, iii, iv, v, ... Приведем пример, изменив маркированный список на нумерованный со

стандартным типом нумерации на нашей первой Web-странице.



1251"><TITLE>Internet</TITLE></HEAD><BODY> <H1><P ALIGN="CENTER">Интернет и World Wide Web</H1> <BR><OL><LH><H2>Здесь вы можете узнать:</H2></LH><BR>

<LI>Что такое Интернет <LI>Историю создания Интернета <LI>Основные понятия среды Интернета

</OL> </BODY></HTML>



Изменим теперь стандартную нумерацию на нумерацию с прописными

буквами. Текст программы в блокноте будет выглядеть следующим образом: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"><TITLE>Internet</TITLE></HEAD><BODY>

<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <OL TYPE="A"><LH><H2>Здесь вы можете узнать:</H2></LH> <BR>

<LI>Что такое Интернет <LI>Историю создания Интернета <LI>Основные понятия среды Интернета




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

определенного номера, надо добавить в тег параметр START=" ". Приведем пример: нумерация списка начинается с номера 5. Текст программы в блокноте будет выглядеть следующим образом:


1251"><TITLE>Internet</TITLE></HEAD><BODY> <H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <OL START="5"><LH><H2>Здесь вы можете узнать:</H2></LH> <BR>

<LI>Что такое Интернет <LI>Историю создания Интернета

<LI>Основные понятия среды Интернета </OL> </BODY></HTML>



1.3.3. Списки определений

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

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

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


1251"><TITLE>Internet</TITLE></HEAD><BODY> <H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <DL><LH><H2>Здесь вы можете узнать:</H2></LH><BR>

<DT>Что такое Интернет <DD>Определение понятия <DT>Историю создания Интернета

<DD>Кто придумал Интернет <DT>Основные понятия среды Интернета <DD>Составляющие Интернета

</DL> </BODY></HTML>



Списки в списках

Одно из замечательных свойств списков – это возможность вкладывать

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

Приведем пример: Текст программы в блокноте будет выглядеть следующим образом: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"><TITLE>Internet</TITLE></HEAD><BODY> <H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <OL><LH><H2>Здесь вы можете узнать:</H2></LH><BR>

<LI>Что такое Интернет <UL TYPE="CIRCLE"> <LI>Определение понятия </UL>

<LI>Историю создания Интернета <UL TYPE="CIRCLE"> <LI>Кто придумал Интернет </UL>

<LI>Основные понятия среды Интернета <DL> <DT>Составляющие Интернета: <DD>Электронная почта, телеконференции, поисковые

системы ... </DL>





1. Для чего необходимы списки на Web-странице? 2. Как оформить маркированный список в Web-документе? 3. Как оформить нумерованный список в Web-документе? 4. Как оформить список определений в Web-документе? 5. Каким образом определяется тип списка? 6. Каким образом задается нумерация списка?







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

ОГЛАВЛЕНИЕ

I. Общие сведения о программировании. 1. Введение.

2. Что такое информатика? 3. Что такое информация? 4. Что такое вычислительная машина?

Общие положения. Подробнее о памяти. Ввод-вывод. Оперативная память, внешняя память. Порядок некоторых величин.

5. Что может делать вычислительная машина? 6. Что такое программирование? 7. Несколько ключевых слов. 8. Краткая история информатики.

a. Прединформатика. b. Протоинформатика. c. Информатика. d. Библиография. e. Задача.

II. Введение в языки программирования.

1.4. ИСПОЛЬЗОВАНИЕ ТАБЛИЦ НА WEB-СТРАНИЦЕ

1.4.1. Основные теги создания таблиц

У списков есть один недостаток – они одномерны. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. Благодаря наличию строк и столбцов таблицы удобны для сравнения и противопоставления информации. Каждые строку и столбец можно озаглавить, чтобы информация выглядела подобно электронной таблице. Хорошая таблица делает Web-страницу информативной, аккуратной и организованной, неудачная разбивает ее и запутывает. Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. В табл. 12 приведены теги для создания таблиц.

Таблица 12. Теги создания таблиц

Тег Комментарий <TABLE>…</TABLE> Эти теги охватывают таблицу <TABLE BORDER="1"> Создает видимую сетку, разделяющую строки и

столбцы <CAPTION>…</CAPTION> Текст, отмеченный этими тегами, выводится в виде

заголовка <TH>…</TH> Теги отображают текст заголовка строки или

столбца немного более крупным полужирным шрифтом

<TR>…</TR> Теги определяют каждую строку таблицы. Тег </TR> необязателен, но он делает HTML-код более полным и понятным

<TD>…</TD> Эта пара тегов определяет текст каждой ячейки таблицы

<TD ROWSPAN=" "> Указывает количество строк, которое объединено в одной ячейке (по умолчанию =1)

<TD COLSPAN=" "> <TH COLSPAN=" ">

Указывает количество столбцов, которое объединено в одной ячейке (по умолчанию =1)

<TABLE WIDTH=" "> Устанавливает ширину таблицы в пикселях или процентах от ширины документа

<TD WIDTH=" "> Устанавливает ширину ячейки в пикселях или процентах от ширины документа

<TABLE HEIGHT=" "> Устанавливает высоту таблицы в пикселях или процентах от высоты документа

<TD HEIGHT=" "> Устанавливает высоту ячейки в пикселях или процентах от высоты документа

<TD NOWRAP=" "> Не позволяет программе просмотра делать перевод строки в ячейке таблицы

Замечание: пиксель (элемент рисунка) – это единица измерения,

характеризующая разрешение монитора. Чтобы представить себе размер пикселя, вспомните, что стандартный экран монитора VGA (c

разрешением 640х480) содержит 640 пикселей по ширине и 480 по высоте. Таким образом, изображение размером 320х240 пикселей займет примерно половину экрана монитора VGA.

1.4.2. Выравнивание текста в таблице

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

как по вертикали, так и по горизонтали. Способы выравнивания задаются специальными ключевыми словами ALIGN и VALIGN. Можно задать также способ выравнивания для всей таблицы (в теге <TABLE>), для заданной строки (в теге <TR>) или для одной ячейки (в теге <TD>). Каждое из ключевых слов ALIGN и VALIGN имеет три возможных значения, которые приведены в табл. 13.

Таблица 13. Ключевые слова выравнивания

Значение Комментарий ALIGN="LEFT" Выравнивает текст в ячейке по левому краю (по

умолчанию) ALIGN="CENTER" Выравнивает текст в ячейке по центру ALIGN="RIGHT" Выравнивает текст в ячейке по правому краю

VALIGN="TOP" Выводит текст от самого верха ячейки (полезно, когда информация состоит из нескольких строк)

VALIGN="MIDDLE" Выравнивает текст в ячейке вертикально по центру (по умолчанию)

VALIGN="BOTTOM" Выравнивает текст в ячейке по нижнему краю

Приведем примеры выравнивания текста:

1. Для всей таблицы: <TABLE ALIGN="LEFT"> 2. Для заданной строки: <TR ALIGN="TOP"> 3. Для одной ячейки: <TD ALIGN="CENTER">

Используя материал табл. 12 и 13, создадим ряд таблиц. Создадим таблицу вида:

Интернет-ресурсы

Список адресов Internet Информация http://russia.uthscsa.edu/Music/ Музыка на сервере «Маленькая Россия» в

Сан-Антонио http://www.deol.ru/queen/ Русские странички о группе Queen http://www.september.ru Сервер газеты «Первое сентября» http://www.glasnet.ru Сервер газеты «Информатика» http://www.rector.msu.su Сервер МГУ http://www.phys.msu.su Сервер физфака МГУ



1251"><TITLE>Table</TITLE></HEAD><BODY> <CENTER><TABLE BORDER="1"> <CAPTION ALIGN="CENTER">Интернет-ресурсы </CAPTION> <TR> <TH>Список адресов Internet</TH> <TH>Информация</TH> </TR> <TR> <TD> http://russia.uthscsa.edu/Music/</TD> <TD> Музыка на сервере «Маленькая Россия» в Сан-Антонио</TD> </TR> <TR> <TD>http://www.deol.ru/queen/</TD> <TD>Русские странички о группе Queen</TD> </TR> <TR> <TD>http://www.september.ru</TD> <TD>Сервер газеты «Первое сентября»</TD> </TR> <TR> <TD>http://www.glasnet.ru</TD> <TD>Сервер газеты «Информатика»</TD> </TR> <TR> <TD>http://www.rector.msu.su</TD> <TD>Сервер МГУ</TD> </TR> <TR> <TD>http://www.phys.msu.su</TD> <TD>Сервер физфака МГУ</TD> </TR> </TABLE> </CENTER> </BODY></HTML> На рис. 33 показано, как будет выглядеть файл в окне браузера.


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

<TABLE> добавлено ключевое слово BORDER="1". Если необходимо, чтобы ячейки таблицы были разделены линией потолще, то задается число больше единицы, например BORDER="7". Если же задать BORDER="0", то слова ячейки будут автоматически выровнены, но сетки не будет. То есть наша созданная таблица будет выглядеть следующим образом (рис. 34).


Объединение нескольких строк в одну ячейку

Изменим нашу таблицу, объединив по две строки во 2-м столбце: Текст программы в блокноте будет выглядеть следующим образом: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"><TITLE>Table</TITLE></HEAD><BODY> <CENTER><TABLE BORDER="1"> <CAPTION ALIGN="CENTER">Интернет-ресурсы</CAPTION> <TR> <TH>Список адресов Internet</TH> <TH>Информация</TH> </TR> <TR> <TD> http://russia.uthscsa.edu/Music/</TD> <TD ROWSPAN="2">Музыка</TD> </TR>

<TR> <TD>http://www.deol.ru/queen/</TD> </TR> <TR> <TD>http://www.september.ru</TD> <TD ROWSPAN="2">Газеты</TD> </TR> <TR> <TD>http://www.glasnet.ru</TD> </TR> <TR> <TD>http://www.rector.msu.su</TD> <TD ROWSPAN="2">МГУ</TD> </TR> <TR> <TD>http://www.phys.msu.su</TD> </TR></TABLE></CENTER> </BODY></HTML> На рис. 35 показано, как будет выглядеть файл в окне браузера.


Объединение нескольких столбцов в одну ячейку

Изменим нашу таблицу, объединив столбцы в 1-й строке:

Текст программы в блокноте будет выглядеть следующим образом: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"><TITLE>Table</TITLE></HEAD><BODY> <CENTER><TABLE BORDER="1"> <CAPTION ALIGN="CENTER">Интернет-ресурсы</CAPTION> <TR> <TH COLSPAN="2">Список адресов Internet</TH> </TR> <TR> <TD> http://russia.uthscsa.edu/Music/</TD> <TD> Музыка на сервере «Маленькая Россия» в Сан-Антонио</TD> </TR> <TR> <TD>http://www.deol.ru/queen/</TD> <TD>Русские странички о группе Queen</TD> </TR> <TR> <TD>http://www.september.ru</TD> <TD>Сервер газеты «Первое сентября»</TD> </TR> <TR> <TD>http://www.glasnet.ru</TD> <TD>Сервер газеты «Информатика»</TD> </TR> <TR> <TD>http://www.rector.msu.su</TD> <TD>Сервер МГУ</TD> </TR> <TR> <TD>http://www.phys.msu.su</TD> <TD>Сервер физфака МГУ</TD> </TR> </TABLE></CENTER> </BODY></HTML>



1.4.3. Цвета в таблице

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

… <TABLE BORDER="2" BGCOLOR="YELLOW"> … </TABLE> … Цвет фона всей таблицы будет желтый. Кроме ключевого слова BGCOLOR, существуют и другие способы

управления цветом: BORDERCOLOR – изменяет цвет сетки таблицы; BORDERCOLORDARK/BORDERCOLORLIGHT – используется для

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

Рассмотрим простой пример использования всех новых ключевых слов сразу:

… <TABLE BORDER="2" BGCOLOR="YELLOW" BORDERCOLOR="RED" BORDERCOLORDARK="BLUE" BORDERCOLORLIGHT="GRAY"> … </TABLE> … В приведенном ниже HTML-коде цвет каждой ячейки задается

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


1251"><TITLE>Table</TITLE></HEAD><BODY> <TABLE BORDER="6"> <TR> <TD BGCOLOR="YELLOW">Желтый фон-черный текст</TD> <TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">

Черный фон-желтый текст</FONT></TD> </TR> <TR> <TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">

Черный фон-желтый текст</FONT></TD> <TD BGCOLOR="YELLOW">Желтый фон-черный текст</TD> </TR></TABLE> </BODY></HTML> На рис. 37 показано, как будет выглядеть файл в окне браузера.


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

Например: WIDTH="300" или WIDTH="50%" Текст программы в блокноте будет выглядеть следующим образом:


1251"><TITLE>Table</TITLE></HEAD><BODY> <TABLE BORDER="6" WIDTH="488" HEIGHT="178"> <TR> <TD BGCOLOR="YELLOW" WIDTH="340" HEIGHT="100">

Желтый фон-черный текст</TD> <TD BGCOLOR="BLACK" WIDTH="122" HEIGHT="100"> <FONT COLOR="YELLOW">Черный фон-желтый текст</FONT> </TD> </TR> <TR> <TD BGCOLOR="BLACK" WIDTH="340" HEIGHT="66"> <FONT COLOR="YELLOW">

Черный фон-желтый текст</FONT></TD> <TD BGCOLOR="YELLOW" WIDTH="122" HEIGHT="66">

Желтый фон-черный текст</TD></TR></TABLE> </BODY></HTML> На рис. 38 показано, как будет выглядеть файл в окне браузера.



1. Для чего необходимы таблицы на Web-страницах? 2. Какие теги отображают заголовок таблицы? 3. Какие теги определяют строку таблицы? 4. Какие теги определяют текст каждой ячейки таблицы? 5. Что задает ключевое слово BORDER в теге <TABLE>? 6. Какое ключевое слово служит для объединения нескольких строк в

таблице? 7. Какое ключевое слово служит для объединения нескольких столбцов

в таблице? 8. Каким образом задается фон в таблице?








1.5. ГРАФИКА НА WEB-СТРАНИЦЕ

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

них свои преимущества и недостатки. WWW поддерживает два основных формата изображений – GIF и JPEG.

Тип файлов GIF (Graphical Interchange Format – графический формат обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых WWW.

Формат JPEG (Joint Photographic Experts Group – объединенная группа экспертов фотографии). Во многих случаях он оказался существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPEG занимают меньше места и соответственно быстрее загружаются. JPEG использует специальную технику компрессии изображений, что определяет его преимущество для рисунков и фотографий. Кроме того, JPEG сохраняет цвета и детали лучше, чем GIF.

Оптимальные размеры файлов

При использовании изображений на Web-странице необходимо

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

Максимальный размер файла

Лучше любые изображения на странице ограничивать размером 20

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

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

изображений на Web-странице.

Таблица 14. Теги размещения графики на Web-странице Тег Комментарий

<IMG SRC="name"> Добавляет изображение в HTML документ

<IMG SRC="name" ALIGN=" "> Выравнивает изображение одним из способов: left – горизонтальное выравнивание по левому краю (выполняется по умолчанию); right – горизонтальное выравнивание по правому краю; top – вертикальное выравнивание по верхнему краю; middle – вертикальное выравнивание по центру; bottom – вертикальное выравнивание по нижнему краю

<IMG SRC="name" BORDER=" "> Устанавливает толщину рамки вокруг изображения

<IMG SRC="name" ALT=" "> Задает альтернативный текст <IMG SRC="name" WIDTH=" " > Задает ширину изображения в пикселях <IMG SRC="name" HEIGHT=" "> Задает высоту изображения в пикселях <IMG SRC="name" HSPACE=" ">

Устанавливает отступы от левой и правой сторон изображения в пикселях, составляет 5 – 30 пикселей

<IMG SRC="name" VSPACE=" "> Устанавливает отступы от верхней и нижней сторон изображения в пикселях, составляет 5 – 30 пикселей

Замечание: всегда указывайте имя графического файла в точном

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

1.5.3 Уменьшение размера и миниатюризация изображений

Если общий размер файлов превышает желаемый, у вас есть несколько

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

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

Выравнивание изображения и задание рамки

Приведем примеры размещений изображений на Web-странице:

1. Выравнивание изображения относительно левой стороны документа (рис. 42):


1251"><TITLE>Computer</TITLE> </HEAD> <BODY><IMG SRC="computer.gif" ALIGN="left"> </BODY> </HTML>


2. Выравнивание изображения относительно правой стороны документа (рис. 43):

… <IMG SRC="computer.gif" ALIGN="RIGHT"> …


3. Выравнивание изображения по центру документа (рис. 44): … <P ALIGN="CENTER"> <IMG SRC="computer.gif"> …


4. Установка рамки изображения (рис. 45): … <IMG SRC="computer.gif" BORDER="14" ALIGN="RIGHT"> …


Задание альтернативного текста

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

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

Ниже рассмотрим пример: если установить курсор на изображении, то появится альтернативный текст (рис. 46).

… <IMG SRC="computer.gif" ALT="Компьютер" ALIGN="RIGHT"> …


1.5.4. Расположение текста рядом с графикой

Одной графики может оказаться недостаточно для полной передачи ее смысла. Поэтому вместе с графикой используют текст. Есть несколько способов выравнивания изображений на домашней странице по отношению к тексту. Ключевое слово ALIGN является частью тега <IMG>. С его помощью можно задавать место изображения на экране и вид обрамления его текстом. Перечислим восемь опций ALIGN (табл. 15).

Таблица 15. Опции ALIGN

Опция Комментарий

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

RIGHT Действует так же, как LEFT, но выравнивает изображение по правому краю страницы

TOP Выравнивает изображение по самому высокому элементу в строке

TEXTTOP Выравнивает изображение по самому высокому элементу текста в строке (обычно совпадает с TOP)

MIDDLE Выравнивает нижнюю границу строки посередине изображения

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

BOTTOM Выравнивает нижнюю границу строки по нижней границе изображения

BASELINE То же, что BOTTOM Приведем примеры по выравниванию текста с графикой:

1. Текст выровнен по верхнему краю изображения (рис. 47): … <IMG SRC="computer.gif" ALT="Компьютер" ALIGN="TOP"> <B>Устройство персонального компьютера</B> …


2. Текст выровнен посередине изображения (рис. 48): … <IMG SRC="computer.gif" ALT="Компьютер" ALIGN="MIDDLE"> <B>Устройство персонального компьютера</B> …


3. Текст выровнен по нижнему краю изображения (рис. 49): … <IMG SRC="computer.gif" ALT="Компьютер" ALIGN="BOTTOM"> <B>Устройство персонального компьютера</B> …


4. Размещение изображения в тексте (рис. 50): … <P ALIGN="JUSTIFY">

Персональный компьютер представляет собой комплект устройств. Главным в этом комплекте является системный блок. <IMG SRC="computer.gif" ALIGN="LEFT"> Кроме системного блока, в обязательный минимальный комплект ПК входят клавишное устройство (клавиатура) и монитор (дисплей). Дополнительно к этому минимальному комплекту ПК могут быть подключены принтер, мышь, модем и другие устройства. …


Задание размера изображения

Приведем примеры: 1. Ширина изображения 86 пикселей, высота – 86 пикселей (рис. 51):

… <IMG SRC="computer.gif" ALT="Компьютер" WIDTH="86"

HEIGHT="86" ALIGN="LEFT"> …


2. Ширина изображения 259 пикселей, а высота – 211 пикселей (рис. 52):

… <IMG SRC="computer.gif" ALT="Компьютер" WIDTH="259"

HEIGHT="211”> …


1.5.5. Пиктограммы

Кроме цветных изображений и рисунков, на домашней странице могут присутствовать пиктограммы всех видов. С технической точки зрения пиктограммы попадают в категорию «изображений» (они обычно хранятся в файлах формата GIF и JPEG), но обычно очень малы (2 – 6 Кбайт) и применяются на домашних страницах из соображений дизайна, эстетики, а также для «перелистывания» страниц.

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

Пиктограммы перемещения

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

разработчиков домашних страниц. Обычно эти пиктограммы имеют вид стрелок, указывающих то или иное направление. Как правило, это стрелки перехода на следующую страницу. Например, если читаете книгу на

WWW-узле, скорее всего, увидите на каждой странице три пиктограммы: стрелка «вправо», стрелка «влево» и пиктограмма «начало».

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

Приведем пример:

Рис. 53. Пиктограммы перемещения

Пиктограммы реконструкции

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


Рис. 54. Пиктограммы реконструкции

Пиктограммы новинок Для отметки новинок на домашней странице многие применяют

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


Рис. 55. Пиктограммы новинок

Линии, полосы и маркеры

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

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


Рис. 56. Графические линии и маркеры

1.5.6. Фоновые изображения

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

Рассмотрим несколько примеров. Первый пример: Текст программы в блокноте будет выглядеть следующим образом:


1251"><TITLE>Background</TITLE></HEAD> <BODY BACKGROUND="fon.jpg" TEXT="#FFFFFF"> <H2><B><P ALIGN="CENTER"> Добро пожаловать на нашу страничку </B></H2> </BODY></HTML>



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


1251"><TITLE>Background</TITLE></HEAD> <BODY BACKGROUND="fon1.jpg" TEXT="#000000"> <H2><B><P ALIGN="CENTER">

Добро пожаловать на нашу страничку </B></H2> </BODY></HTML> На рис. 58 показано, как будет выглядеть файл в окне браузера.


Прежде чем начинать экспериментировать с фоновыми цветами и

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

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

На рис. 59 показан неудачный выбор фона для Web-страниц:

Рис. 59. Неудачный выбор фона Web-страницы

1.5.7. Где можно найти графику, изображения и рисунки

1. Можно использовать файлы с изображениями с компакт-дисков (например, у знакомых).

2. Воспользоваться другими страницами, то есть скопировать с чужих страниц. Это делается следующим образом (С помощью Internet Explorer):

– Откройте любую страницу на WWW и поместите указатель мыши на изображение.

– Щелкните правой кнопкой мыши на изображении. Появится меню. – Выберите команду СОХРАНИТЬ РИСУНОК КАК... Появится диалоговое окно СОХРАНИТЬ КАК... – Определите, где на диске хотите сохранить изображение, и выберите команду СОХРАНИТЬ.

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


1. Чем отличаются форматы GIF и JPEG? Перечислите и дайте

характеристику тегам выравнивания изображения. 2. Каким образом можно задать рамку изображения? 3. Каким образом используется альтернативный текст? 4. Каким образом задается ширина и высота изображения? 5. Каким образом задаются отступы от изображения? 6. Как расположить текст рядом с изображением? 7. Что такое пиктограммы, их назначение и виды? 8. Как создаются фоновые изображения на Web-странице? 9. Где можно найти необходимые изображения?



Рис. 60. Вид Web-страницы в окне браузера 2. Создайте HTML-документ, отображающий на экране браузера





1.6. ГИПЕРТЕКСТОВЫЕ ССЫЛКИ НА WEB-СТРАНИЦЕ

1.6.1. Понятие гипертекстовой ссылки

Гиперссылки на Web-странице – одно из основных свойств WWW. Любой документ может содержать ссылку на другой WWW-документ, заданную с помощью специального тега <HTML>.

Гипертекстовые ссылки – это фрагменты текста, подчеркнутые и выделенные чаще всего синим цветом. Отображенный таким образом текст называется текстом ссылки. Если на нем щелкнуть мышью, он автоматически осуществляет ссылку на другую Web-страницу. В каждом URL-адресе есть три части: протокол, узел Интернета и имя файла (включая путь к нему, если необходимо). Напомним, что протокол – это правила, в соответствии с которыми два компьютера общаются друг с другом. Будем говорить в основном о HTTP – стандартном протоколе WWW. Необходимо также указать узел Интернета и имя файла, например: http://www.symbol.ru/dk/articles/color.htm

Если перевести это на русский язык, получится, что браузер должен с помощью определенного способа связи (HTTP) связаться по Интернету с указанным адресом symbol.ru, затем найти Web-страницу color.htm в поддиректориях dk/articles.

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

имеют уникальный адрес, называемый универсальным указателем ресурсов (Uniform Resource Locator – URL). Чтобы связать два документа, разработчики домашних страниц помещают на одной из них URL другой. URL напоминают адреса электронной почты.

Таблица 16. Теги гиперссылок Тег Комментарий

<A HREF="URL">…</A> Создает гиперссылку на другие документы или часть текущего документа

<A NAME="метка">…</A> Задание метки соответствующему тексту <A HREF="#метка">…</A> Создает ссылку, осуществляющую

переход к заданной метке в том же файле, где задана метка

<A HREF="имя_файла#метка">…</A> Создает ссылку, осуществляющую переход к заданной метке в другом файле

Приведем пример гиперссылки: <A HREF=http://www.symbol.ru/dk/articles/color.htm>Цвет в веб-

дизайне, Кирсанов Д.</A> где А – якорный тег; HREF – ключевое слово гипертекстовой ссылки; http://www.symbol.ru/dk/articles/color.htm – URL; Цвет в веб-дизайне, Кирсанов Д. – этот текст будет выделен; </A> – закрывающий якорный тег.

Ccылки на местные Web- страницы

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

Замечание: для удобства главному документу следует присвоить имя index. htm

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

Пример: <A HREF=HOME/computer.htm>Здесь вы можете узнать все о компьютерах</A>

Ссылки на любое место в WWW

Для таких ссылок понадобится полный URL документа, а не только

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

файла и текст ссылки тегами <A HREF=" "> и </A>. Когда ссылаются на другой HTML-файл в Web, URL всегда начинается с HTTP://

Таким образом, браузер знает, что искать следует документ в WWW, а не файл на Web-узле. Остальная часть URL состоит из пути в Интернет к нужному узлу и имени файла документа, который необходимо найти. Это очень похоже на написание адреса на конверте: чтобы адресата можно было найти, необходимо правильно указать все части адреса.

В качестве иллюстрации ссылки на любое место в Интернете поместим на страницу ссылку на советы по Web-дизайну Лебедева А. «Руководство по Web-дизайну».


1251"><TITLE>Web-design</TITLE></HEAD> <BODY TEXT="#000000"> <A HREF=http://www.design.ru/rukovodstvo/index.htm>

Руководство по Web-дизайну</A> </BODY></HTML> На рис. 63 показано, как будет выглядеть файл в окне браузера.


Цвет гиперссылки

Для изменения цвета гиперссылки используется тег: <BODY> (табл. 17).

Таблица 17. Теги изменения цвета гиперссылки Тег Комментарий

<BODY LINK=" "> Устанавливает цвет гиперссылки, по умолчанию отображается синим цветом

<BODY VLINK =" "> Устанавливает цвет гиперссылки, на которой посетитель уже побывал (Visited Link)

<BODY ALINK =" "> Устанавливает цвет, который приобретает текст гиперссылки в момент щелчка

Изменим цвет гиперссылки в предыдущем примере.



1251"><TITLE>Web-design</TITLE></HEAD> <BODY TEXT="#000000" LINK="Dark Blue" VLINK="Cormflower"

ALINK="Blue"> <A HREF= http://www.design.ru/rukovodstvo/index.htm>

Руководство по Web-дизайну</A> </BODY></HTML>

1.6.3. Использование изображений в качестве гиперссылок

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

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

В качестве примера можно привести стрелки перехода со страницы на страницу (рис. 64).



1251"><TITLE>Internet</TITLE></HEAD> <BODY> <P ALIGN="CENTER"><B>Интернет и World Wide Web</B><BR> <P ALIGN="CENTER">Здесь вы можете узнать: <P ALIGN="LEFT">Что такое Интернет <P ALIGN="LEFT">Историю создания Интернета <P ALIGN="LEFT">Основные понятия среды Интернета <P ALIGN="CENTER"> <A HREF="list.htm"> <IMG SRC="more.gif" ALT="Переход к следующей странице"></A> </BODY></HTML>


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

Рассмотрим на примере. Создан HTML-документ, где размещены

заголовок, две гиперссылки – Электронная почта и Телеконференции, осуществляющие переход внутри данного документа, а также текст, посвященный разъяснению данных понятий (рис. 65).


Гиперссылка Электронная почта осуществляет переход на абзац, рассказывающий об электронной почте (рис. 66).


Гиперссылка Телеконференции осуществляет переход на абзац телеконференции соответственно (рис. 67).

Рис. 67. Вид Web-страницы в окне браузера Текст программы в блокноте будет выглядеть следующим образом:


1251"><TITLE>label</TITLE></HEAD> <BODY> <P ALIGN="CENTER"><B>Электронная почта и другие услуги

сетей</B><BR><A HREF="#mail">Электронная почта</A> <BR><A HREF="#teleconference">Телеконференции</A> <BR><P ALIGN="CENTER"> <B><A NAME="mail”>Электронная почта</A></B>

<P ALIGN="JUSTIFY"><I>Электронная почта </I> – это основной вид услуг компьютерных сетей.

<BR><I>Электронное письмо </I> – это обычный текстовый файл, содержащий электронный адрес получателя и текст письма. В письме могут содержаться не только текстовая информация, но и специальным образом перекодированные рисунки, программы, архивы и пр.

<P ALIGN="CENTER"> <B><A NAME="teleconference">Телеконференции</A></B> <P ALIGN="JUSTIFY"><I>Телеконференция </I> – это общение

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

<BR>Участники такой конференции – абоненты компьютерной сети. Телеконференция заключается в обмене электронными письмами между ее участниками.

</BODY></HTML> Символ # указывает браузеру, что следует искать флажок, а не

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

Имя метки, указанное в теге <A HREF=" ">, должно соответствовать имени метки, указанном в теге <A NAME=" ">.

1.6.5. Переход к метке, созданной в другом HTML-документе

Рассмотрим на примере. Созданы два HTML-документа: label_1.htm и

label_2.htm (см. рис. 68).

Рис. 68. Слева файл label_1.htm, справа файл label_2.htm

При щелчке на ссылку Электронная почта в файле label_1.htm

осуществляется переход к метке Электронная почта файла label_2.htm

Текст программы label_1.htm:

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; harset="windows- 1251"><TITLE>label</TITLE></HEAD> <BODY> <P ALIGN="CENTER"> <B>Электронная почта и другие услуги сетей</B><BR> <A HREF="label_2.htm#mail">Электронная почта</A> <BR><A HREF="label_3.htm#teleconferenc">Телеконференции</A> </BODY></HTML>

Текст программы label_2.htm:


1251"><TITLE>label</TITLE></HEAD> <BODY><P ALIGN="CENTER"> <B><A NAME="mail”>Электронная почта</A></B> <P ALIGN="JUSTIFY"><I>Электронная почта </I> – это основной

вид услуг компьютерных сетей. <BR><I>Электронное письмо </I> – это обычный текстовый файл,

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

</BODY></HTML> Замечание: файл label_3.htm организуется аналогично файлу

label_2.htm c NAME="teleconferenc".

1.6.6 Полезные советы по созданию гиперссылок

Совет первый: ограничьте количество гиперссылок на одной Web-странице.

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

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

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

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

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

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

Совет четвертый: поддерживайте ссылки в действующем состоянии. Большинство ссылок со временем устаревают. Web-страницу, на

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

1.6.7. Создание изображения-карты

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

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

Таблица 18. Теги изображения-карты

Тег Комментарий 1 2

<IMG SRC=" " USEMAP="#Изображение-карта">

Помещает графический файл на Web-страницу. USEMAP сообщает браузеру, что данный графический файл является изображением-картой, и дает ему указание найти именной раздел под названием "Изображение-карта"

<MAP NAME="Изображение-карта"> <AREA …> … <AREA …> </MAP>

Указывает браузеру, на что ссылается каждый из фрагментов изображения-карты. AREA задает фрагмент, являющийся ссылкой на HTML-файл. Замечание: значение, присваиваемое NAME, должно совпадать со значением, заданным USEMAP


<AREA SHAPE="RECT" COORDS="Х1,У1,Х2,У2" HREF="f1.htm">

Задает прямоугольный фрагмент изображения с координатами левого верхнего(X1,У1) и правого нижнего(X2,У2) углов прямоугольника в пикселях. Осуществляет переход к файлу f1.htm

<AREA SHAPE="CIRCLE" COORDS="Х,У,R" HREF="f2.htm">

Задает фрагмент-окружность с координатами центра окружности(X,У) и радиусом R

<AREA SHAPE="POLY" COORDS="Х1,У1,Х2,У2,Х3,У3, Х4,У4, Х1,У1" HREF="f3.htm">

Задает фрагмент-многоугольник с координатами каждого угла многоугольника

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

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;charset=windows-

1251"><TITLE>Card</TITLE></HEAD> <BODY BACKGROUND="fon.gif"> <P ALIGN="CENTER"> <B><FONT COLOR="#000000" SIZE="6">

Дистанционные курсы</FONT></B>

(Х, У)

R

(Х2, У2)

(Х3, У3)

(Х1, У1)

(Х4, У4)

(Х2,У2)

(Х1,У1)

<P ALIGN="CENTER"> <IMG SRC="card.gif" BORDER="0" USEMAP="#Информатика"> <MAP NAME="Информатика"> <AREA SHAPE="RECT" COORDS="31,13,247,84"

HREF="internet.htm"> <AREA SHAPE="RECT" COORDS="56,85,272,157"

HREF="html_1.htm"> <AREA SHAPE="RECT"

COORDS="87,158,302,232" HREF="html_2.htm"> </MAP> <p ALIGN="CENTER"> <B><FONT COLOR="#000000" SIZE="4">

Лаборатория Интернет Образования</FONT></B> </BODY></HTML> На рис. 69 показано, как будет выглядеть файл в окне браузера.

Рис. 79. Создание изображения-карты

1.6.8. Размещение звуковых и видеофайлов на Web-странице

Таблица 19. Теги размещения звука и видео на Web-страницах

Тег Комментарий <A HREF="*.wav">… </A> Устанавливает звуковой файл:

* – имя файла; wav – расширение звукового файла

<A HREF="*.avi">…</A> <A HREF="*.mov">…</A>

Устанавливает видеофайл: * – имя файла; avi, mov – расширения видеофайлов

Размещение звука на Web-странице

Звуковой файл включается в Web-страницу путем указания его имени в

теге <A HREF=" ">…</A>. После данного тега следует привести текст, характеризующий содержание звукового файла: указать его размер, чтобы посетитель мог решить, стоит ли его загружать.

Приведем примеры: 1. Воспроизведение щелчка кнопки мыши (рис. 70)

… <A HREF="mouse.wav">Щелчок кнопки мыши (9,740 bytes)</A> … Для прослушивания файла необходимо щелкнуть мышью по тексту

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


2. Использование графики при размещении звуковых файлов (рис. 71). … <IMG SRC="mouse.jpg" WIDTH="120" HEIGHT="115" ALT="Мышь" > <A HREF="mouse.wav"> Щелчок кнопки мыши (9,740 bytes) </A> …


Размещение видео на Web-странице

Видеофайл размещается на Web-странице точно так же, как звуковой файл. Единственное различие, что теперь тип файла – mov или avi.

Приведем примеры: 1. Воспроизведение видеофайла: работа принтера (рис. 72).

… <A HREF="printer.avi"> Работа принтера (1, 600 bytes) </A> …


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

2. Использование графики при размещении видеофайлов (рис. 73).

… <IMG SRC="printer.gif"> <A HREF="printer.avi"> Работа принтера (1, 600 bytes)</A> …



1. Что такое гиперссылка и какова ее роль на Web-страницах? 2. Перечислите и охарактеризуйте основные теги гиперссылок? 3. Каким образом осуществляется ссылка на местные Web-страницы? 4. Каким образом осуществляется ссылка на любое место в WWW? 5. Как можно изменить цвет гиперссылки? 6. Как используется графика в качестве гиперссылки? 7. Как осуществляется переход по метке внутри одного HTML-

документа? 8. Как осуществляется переход по метке, созданной в другом HTML-

документе? 9. Перечислите советы по созданию гиперссылок.

10. Что означает запись: <IMG SRC="h.gif" USEMAP="#Интернет">? 11. Как создается фрагмент «Изображения-карты» в виде

прямоугольника? 12. Как создается фрагмент «Изображения-карты» в виде окружности? 13. Как создается фрагмент «Изображения-карты» в виде

многоугольника? 14. Как размещается звуковой файл на Web-странице? 15. Как размещается видеофайл на Web-странице?


1. Создайте энциклопедический словарь по информатике в виде

многофайлового HTML-документа. Основной файл index.htm должен содержать список слов (гиперссылок), а вспомогательные – информацию о них (рис. 74).


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

3. Создайте изображение-карту (рис. 75):


1.7. ИСПОЛЬЗОВАНИЕ ФОРМ НА WEB-СТРАНИЦЕ. MAILTO

1.7.1. Создание форм на Web-странице

Таблица 20. Теги создания форм Тег Комментарий

<FORM METHOD="POST" ACTION="MAILTO:e-mail"> … </FORM>

Создает форму. METHOD применяется для указания протокола, используемого для пересылки данных на сервер. Протокол GET выбран по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используют протокол POST. ACTION="MAILTO:e-mail" – пересылает заполненную форму по указанному электронному адресу

<TEXTAREA NAME="name" COLS=" " ROWS=" "> … </TEXTAREA >

Создает окно для ввода текста. COLS указывает ширину окна; ROWS указывает его высоту. Значения высоты и ширины задаются в пикселях

<SELECT> <OPTION VALUE="a">Первый … <OPTION ALUE="d">Четвертый </SELECT>

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

<SELECT MULTIPLE NAME="name" SIZE=" "> <OPTION ALUE="a">Первый … <OPTION VALUE="d">Пятый </SELECT>

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

<INPUT TYPE="TEXT" NAME="name" SIZE=" ">

Создает строку для ввода текста. Параметром SIZE указывается длина строки в символах

<INPUT TYPE="CHECKBOX" NAME="name">

Создает поле «флажок». За тегом следует текст

<INPUT TYPE="PASSWORD" NAME="name" SIZE=" ">

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

<INPUT TYPE="RADIO" NAME="name" VALUE="a">

Создает RADIO кнопку (переключатель). За тегом следует текст

<INPUT TYPE="SUBMIT" VALUE="name">

Создает кнопку «name», пересылает заполненную форму по электронной почте

<INPUT TYPE="IMAGE" BORDER="0" NAME="name" SRC="name.gif">

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

<INPUT TYPE="RESET" VALUE="name">

Создает кнопку «name», которая очищает форму

Формы предназначены для размещения ответов на адресованные посетителям вопросы. Web-форма – это то же самое, что и любая другая бумажная форма, но организованная посредством html-файла.

Чаще всего формы используются для: – проведения опросов; – получения отзывов.

Формы идеально подходят для включения в личные Web-страницы, поскольку для них требуется очень мало места.

Рассмотрим подробнее приведенные в табл. 20 теги форм.

Текстовое окно

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"> <H2>Textarea <TEXTAREA NAME="text00" ROWS="5" COLS="30"> </TEXTAREA></H2></FORM> … На рис. 76 показано, как будет выглядеть форма в окне браузера.


Скролируемое меню

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"><H2>Select <SELECT> <OPTION VALUE="a">Первый <OPTION VALUE="b">Второй

<OPTION VALUE="c">Третий <OPTION VALUE="d">Четвертый <OPTION VALUE="e">Пятый </SELECT></H2></FORM> … На рис. 77 показано, как будет выглядеть форма в окне браузера.


Приведем еще один пример: Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"><H2>Select <SELECT MULTIPLE NAME="n" SIZE="2"> <OPTION VALUE="a">Первый <OPTION VALUE="b">Второй <OPTION VALUE="c">Третий <OPTION VALUE="d">Четвертый <OPTION VALUE="e">Пятый </SELECT></H2></FORM> … На рис. 78 показано, как будет выглядеть форма в окне браузера.


1.7.2. Элемент INPUT

Создание текстовой строки для ввода текста

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"> <INPUT TYPE="TEXT" NAME="n" SIZE="23"></FORM> … На рис. 79 показано, как будет выглядеть форма в окне браузера.


Создание поля «флажок»

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"> <INPUT TYPE="CHECKBOX" NAME="n"></FORM> … На рис. 80 показано, как будет выглядеть форма в окне браузера.


Создание строки для ввода пароля

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST">

<INPUT TYPE="PASSWORD" NAME="name" SIZE="5"></FORM> … На рис. 81 показано, как будет выглядеть форма в окне браузера.


Создание кнопки RADIO

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

– выбор одного переключателя из группы переключателей; – выбор нескольких переключателей из группы переключателей.

Отличие при описании переключателей состоит в присвоении имен (NAME). Для первого варианта эти имена должны быть одинаковые, для второго варианта – различные.

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

1. Выбор только одного из трех переключателей Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"> <H3> Переключатели </H3> <INPUT TYPE="RADIO" NAME="s001" VALUE="первый" > <INPUT TYPE="RADIO" NAME="s001" VALUE="второй" > <INPUT TYPE="RADIO" NAME="s001" VALUE="третий" HECKED> </FORM> …

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


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

2. Выбор нескольких переключателей

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST"> <H3> Переключатели </H3> <INPUT TYPE="RADIO" NAME="s001" VALUE="первый" > <INPUT TYPE="RADIO" NAME="s002" VALUE="второй" > <INPUT TYPE="RADIO" NAME="s003" VALUE="третий"> </FORM> … На рис. 83 показано, как будет выглядеть форма в окне браузера.


Создание кнопок отправления и очистки формы

Текст программы в блокноте будет выглядеть следующим образом: … <FORM METHOD="POST" ACTION="MAILTO:[email protected]"> <P ALIGN="CENTER"> <TEXTAREA NAME="text00" ROWS="5" COLS="30"> </TEXTAREA>

<BR> <BR> <INPUT TYPE="SUBMIT" VALUE="переслать форму"> <INPUT TYPE="RESET" VALUE="очистить форму"> </FORM> … На рис. 84 показано, как будет выглядеть форма в окне браузера.


Если заполнить текстовое окно и щелкнуть мышью по кнопке «переслать данную форму», то форма будет отправлена на электронный адрес: [email protected]. Если щелкнуть мышью по кнопке «очистить данную форму», то в текстовом окне удалится запись и форма снова будет готова к заполнению.

Создание сложной формы

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


1251"> <TITLE>The form</TITLE> </HEAD> <BODY> <FONT COLOR="RED"> <B> <P ALIGN="CENTER">

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

</B> </FONT> <FORM METHOD="POST" ACTION="MAILTO:[email protected]"> <B><P ALIGN="JUSTIFY"> Ваше имя:</B> <INPUT TYPE="TEXT" NAME="NAZ" SIZE="40"> <P ALIGN="JUSTIFY"><B> Ваш адрес (E-mail):</B> <INPUT TYPE="TEXT" NAME="EMAIL" SIZE="20"> <B><P ALIGN="JUSTIFY"> 1. Как часто вы пользуетесь Интернетом?</B><BR> <INPUT NAME="1Z" TYPE="CHECKBOX">Менее 2 часов в неделю <INPUT NAME="2Z" TYPE="CHECKBOX">От 5 до 10 часов в неделю <INPUT NAME="3Z" TYPE="CHECKBOX">Более 10 часов в неделю <B><P ALIGN="JUSTIFY"> 2. Используете ли вы Интернет на работе?</B><BR> <INPUT NAME="1R" TYPE="RADIO">Да <INPUT NAME="2R" TYPE="RADIO">Нет <B><P ALIGN="JUSTIFY"> 3. Есть ли у вас дома Интернет?</B><BR> <INPUT NAME="1I" TYPE="RADIO">Да <INPUT NAME="2I" TYPE="RADIO">Нет <B><P ALIGN="JUSTIFY"> Ваши комментарии, вопросы, пожелания: </B> <TEXTAREA NAME="TEXT03" ROWS="4" COLS="10"> </TEXTAREA> <CENTER> <BR> <INPUT TYPE="SUBMIT" VALUE="переслать анкету"> <INPUT TYPE="RESET" VALUE="очистить анкету"> </CENTER> </FORM> </BODY> </HTML> На рис. 85 показано, как будет выглядеть форма в окне браузера.


1.7.3. MAILTO

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

Это тег <A HREF="MAILTO:e-mail"> Рассмотрим два примера. 1. Текстовое сообщение (рис. 86). … <A HREF="MAILTO:[email protected]"> Отправьте свое сообщение по почте </A> …


2. Графика и текстовое сообщение (рис. 87). … <A HREF="MAILTO:[email protected]"> <img src="p.gif">Отправьте свое сообщение по почте</A> …


Замечание: рассмотренный случай применяется в браузере Internet Explorer.


1. Каким образом применяются формы на Web-страницах? 2. Какие теги используются для создания форм? 3. Для чего необходимы ключевые слова METHOD и ACTION в теге

<FORM>? 4. Как создается элемент формы: текстовое окно? Приведите пример

его использования. 5. Как создается элемент формы скролируемое меню? Приведите

пример его использования. 6. Как создается элемент формы текстовая строка? Приведите

пример ее использования. 7. Как создается элемент формы «флажок»? Приведите пример его

использования. 8. Как создается элемент формы строка для ввода пароля?

9. Как создается элемент формы RADIO кнопка? Приведите пример ее использования.

10. Как создать кнопки для пересылки и очистки данных формы? 11. Перечислите и охарактеризуйте способы создания MAILTO.







1.8. ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ НА WEB-СТРАНИЦЕ

1.8.1. Основные теги создания фреймов

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

Таблица 21. Теги создания фреймов

Теги Комментарий 1 2

<FRAMESET >…</FRAMESET> Предваряет тег <BODY> в документе, содержащем фреймы

<FRAME> Задает файлы в наборе фреймов <NOFRAMES>…</NOFRAMES> Определяет, что будет в окне браузера, если он

не поддерживает фреймы


<FRAMESET BORDER=" "> Задает размер обрамления фреймов <FRAMESET ROWS=" "> Определяет строки в таблице фреймов, высота

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

<FRAMESET COLS=" "> Определяет столбцы в таблице фреймов, ширина которых определена количеством пикселей или в процентном соотношении к ширине таблицы фреймов. В качестве значения может использоваться символ "*" для обозначения оставшейся части экрана

<FRAMESET BORDERCOLOR=" ">

Задает цвет обрамления фреймов

<FRAMESET FRAMEBORDER="yes/no"> или <FRAMESET FRAMEBORDER="1/0">

Задает границы деления окна (yes или 1 – граница деления экрана на фреймы видна, no или 0 – граница деления экрана на фреймы не видна)

<FRAMESET FRAMESPACING=" ">

Задает промежутки между смежными окнами

<FRAME NAME="name"> Определяет имя фрейма <A HREF="*.htm" TARGET=" ">…</A>

TARGET – определяет место, где должен отобразиться файл *.htm при активизации гиперссылки. Принимает значения: – name - файл *.htm загружается во фрейм с именем name; – _blank - файл *.htm загружается во вновь открытое окно браузера, не содержащего имени фрейма; – _self - файл *.htm загружается в то же окно, где находится гиперссылка; – _parent - файл *.htm загружается в родительское окно фрейма; – _top - файл *.htm загружается в окно, содержащее гиперссылку с заменой всех фреймов, отображенных в данный момент

<FRAME NORESIZE> Препятствует изменению размеров фрейма <FRAME SCROLLING=" "> Указывает, будет ли выводиться линейка

прокрутки в фрейме, принимает значения: «yes» – полосы прокрутки создаются в обязательном порядке; «no» – полосы прокрутки запрещены; «auto» – полосы прокрутки появляются по мере необходимости


<FRAME SRC="URL"> Определяет, какой из HTML-файлов будет показан в данном фрейме

<FRAME MARGINWIDTH=" "> Определяет величину отступов по левому и правому краям фреймов; должно быть равно или больше 1

<FRAME MARGINHEIGHT=" "> Определяет величину отступов по верхнему и нижнему краям фреймов; должно быть равно или больше 1

1.8.2. Разбиение окна браузера на области

Прежде чем создавать Web-страницу с фреймами, необходимо

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

Пример 1: деление окна браузера по вертикали пополам (рис. 90). … <FRAMESET COLS="50%,50%"> … </FRAMESET> …

Рис. 90. Деление окна браузера

Пример 2: левая область окна браузера по вертикали в три раза меньше правой (рис. 91)

… <FRAMESET COLS="25%,75%"> … </FRAMESET> …


Пример 3: для верхней горизонтальной области окна браузера отведено 150 пикселей, для средней – 30 процентов, для нижней – все оставшееся пространство (рис. 92).

… <FRAMESET ROWS="150,30%,*"> … </FRAMESET> …


Тег <NOFRAMES>

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

Текст программы в блокноте будет выглядеть следующим образом: … <FRAMESET COLS="197,*" BORDERCOLOR="RED"> <FRAME NAME="LEFT" SRC="menu.htm" SCROLLING="AUTO"> <FRAME NAME="RIGHT" SRC="heading.htm" SCROLLING="YES"> <NOFRAMES> <P>Для просмотра данной страницы необходим браузер,

поддерживающий фреймы. <P>Вы можете просмотреть здесь <A HREF="menu1.htm">упрощенную версию</A>страницы. </NOFRAMES> </FRAMESET> …

Рис. 93. Использование тега <NOFRAMES>

Структура фреймов

Необходимо создать следующую Web-страницу (рис. 94):

Рис. 94. Web-страница, организованная с помощью фреймов

В нашем примере окно браузера разбито на две части: левая часть является содержанием и представлена тремя гиперссылками, правая же часть окна содержит тему сайта и предназначена для отображения в нем файлов по гиперссылкам. Первоначально в окно браузера загружается index.htm – файл, организующий разделение окна на две области, а также определяющий файлы, которые необходимо загрузить в определенную область окна браузера. Всего создается шесть файлов: index.htm – файл, создающий фреймы; menu.htm – определяет левую область экрана; heading.htm – определяет правую область окна и три файла, относящиеся к гиперссылкам.

Рассмотрим создание данных файлов подробнее:

Файл index.htm Текст программы в блокноте будет выглядеть следующим образом: <HTML> <HEAD>

<META http-equiv="Content-Type" content="text/html; charset=windows-1251"><TITLE>Internet</TITLE></HEAD>

<FRAMESET COLS="197,*" BORDERCOLOR="gray"> <FRAME NAME="LEFT" SRC="menu.htm" SCROLLING="AUTO"> <FRAME NAME="RIGHT" SRC="heading.htm" SCROLLING="AUTO"> <NOFRAMES> <BODY> <P> Для просмотра данной страницы необходим браузер,

поддерживающий фреймы </BODY> </NOFRAMES></FRAMESET> </HTML>

Файл menu.htm


1251"><TITLE>Heading</TITLE></HEAD> <BODY BGCOLOR="#000080" LINK="#FFFF66" VLINK="#99FF66"

ALINK="#FFFFFF"><P ALIGN="CENTER"> <B><FONT COLOR="#FFFFFF" SIZE="6">РАЗДЕЛЫ</FONT> <P ALIGN="LEFT"><A HREF="internet.htm" TARGET="RIGHT"> Что такое Интернет</A> <P ALIGN="LEFT"><A HREF="history.htm" TARGET="RIGHT"> История создания Интернета</A> <P ALIGN="LEFT"><A HREF="mail.htm" TARGET="RIGHT"> Основные понятия среды Интернета</A> <P ALIGN="LEFT"><A HREF="heading.htm" TARGET="RIGHT"> <IMG BORDER"0" SRC="h.gif"></A> </FONT></B></BODY> </HTML> Замечание 1: обратите внимание на запись TARGET="RIGHT". При

создании гиперссылок необходимо указывать имя (NAME=" ") фрейма, в котором должна быть отображена информация файла. Например, запись <A HREF="internet.htm" TARGET="RIGHT">Что такое Интернет</A> означает, что при активизации гиперссылки Что такое Интернет файл internet.htm будет отображаться в правой области экрана, так как фрейм с именем NAME="RIGHT" был определен <FRAME NAME="RIGHT" SRC="heading.htm" SCROLLING="AUTO"> в правой области окна браузера (см. рис. 95).

Замечание 2: графический файл h.gif (изображение дома) является гиперссылкой на файл heading.htm.

Рис. 95. Web-страница, организованная с помощью фреймов

Файл heading.htm Текст программы в блокноте будет выглядеть следующим образом: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"><TITLE>W W W</TITLE></HEAD> <BODY BGCOLOR="#66CCFF" TEXT="#0000FF"> <BR><BR><P ALIGN="CENTER"> <B><FONT SIZE="7" COLOR="#000066"> ИНТЕРНЕТ <P ALIGN="CENTER">И <P ALIGN="CENTER"> WORLD WIDE WEB</FONT></B></BODY> </HTML>

Файлы internet.htm, mail.htm, history.htm – обыкновенные html-файлы, содержащие информацию по разделам.

1.8.3. Атрибут TARGET

Рассмотрим на примерах значения атрибута TARGET. 1. TARGET="_blank"

Изменим файл menu.htm следующим образом: … <A HREF="internet.htm" TARGET="_blank"> Что такое Интернет</A> … При активизации гиперссылки Что такое Интернет файл internet.htm

загрузится в новом окне браузера (рис. 96)

Рис. 96. Значение TARGET="_blank"

2. TARGET="_self" Изменим файл menu.htm следующим образом: … <A HREF="internet.htm" TARGET="_self">Что такое Интернет</A> … При активизации гиперссылки Что такое Интернет файл internet.htm

загрузится в окно, где расположена гиперссылка (рис. 97)

Рис. 97. Значение TARGET="_self"

3. TARGET="_parent" Изменим файл menu.htm следующим образом: … <A HREF="internet.htm" TARGET="_parent"> Что такое Интернет</A> … При активизации гиперссылки Что такое Интернет файл internet.htm

загрузится в родительское окно фрейма (рис. 98)

Рис. 98. Значение TARGET="_parent"

4. TARGET="_top" Изменим файл menu.htm следующим образом: … <A HREF="internet.htm" TARGET="_top">Что такое Интернет</A> … При активизации гиперссылки Что такое Интернет файл internet.htm

загрузится в родительское окно фрейма (рис. 99)

Рис. 99. Значение TARGET="_top"

Замечание: значения _blank, _self, _parent, top записываются малыми буквами и начинаются с символа «_».

Вложенные фреймы Для более сложного разбиения окна браузера требуется создать

вложенные фреймы. Пусть требуется разбить окно браузера следующим образом (рис. 100):

Рис. 100. Web-страница, организованная с помощью вложенных фреймов

Текст программы в блокноте будет выглядеть следующим образом: <HTML><HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-

1251"><TITLE>WWW </TITLE></HEAD> <FRAMESET COLS="25%,*" BORDERCOLOR="#000000"

BORDER="8"> <FRAME SRC="f1.htm" NAME="LEFT"> <FRAMESET ROWS="100,*,200"> <FRAME SRC="f2.htm" NAME="RIGHT"> <FRAMESET COLS="*,25%"> <FRAME SRC="f3.htm" NAME="RIGHT2"> <FRAME SRC="f4.htm" NAME="RIGHT3"> </FRAMESET> <FRAME SRC="f5.htm" NAME="RIGHT1" SCROLLING="YES"> </FRAMESET> <NOFRAMES> <BODY> <P>Для просмотра данной страницы необходим браузер,

поддерживающий фреймы

</BODY> </NOFRAMES> </FRAMESET></HTML>


1. Каким образом применяются фреймы на Web-страницах? 2. Какие теги используются для создания фреймов? 3. Для чего нужны теги <NOFRAMES>…</NOFRAMES> на Web-

странице? 4. Перечислите и охарактеризуйте возможности тега <FRAMESET>? 5. Перечислите и охарактеризуйте возможности тега <FRAME>? 6. Перечислите и охарактеризуйте значения атрибута TARGET.







Глава II

ВАРИАНТЫ ИНДИВИДУАЛЬНЫХ ЗАДАНИЙ

Задание

Создайте Web-сайт по предложенным ниже вариантам.

Указания к выполнению

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

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

3. Фоны для страниц устанавливаются: а) для двух страниц – установка цвета; б) для третьей страницы – использование фонового рисунка.

4. Объем Web-сайта должен составлять не менее 6 страниц: 3 страницы для организации титульного листа и 3 страницы с информацией по указанным гиперссылкам.

5. Отображение Web-страниц по гиперссылкам осуществляется в том окне, где находится тема Web-сайта.

6. Графическая гиперссылка возвращает Web-страницу с темой Web-сайта.

7. Web-страницы, отображаемые по гиперссылкам, должны содержать: а) информацию по указанной теме; б) не менее одной таблицы; в) два списка: нумерованный и маркированный; г) фон, задаваемый цветом или графическим изображением.

8. Литература для использования при создании Web-сайта приведена после вариантов.

Вариант № 1










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

1.Информатика. Базовый курс: Учеб. для вузов/Под ред. С.В. Симоновича. – СПб: Питер, 1999. – 640 с.

2.Информатика: Учеб. для вузов. – М.: Высш. шк., 1999. – 511 с. 3.Информатика. Базовый курс: Учеб. пособие/Под ред. С.В. Симоновича. – СПб.:

Питер, 2000. – 638 с. 4.Информатика: Учеб. для вузов/ Под ред. Н.В. Макаровой. – М.: Финансы и

статистика, 2001. – 768 с. 5.Аладьев В.З. и др. Основы информатики: Учеб. пособие – М.: Филин, 1999. –

543 с. 6.Воройский Ф.С. Систематизированный толковый словарь по информатике:

Вводный курс по информатике и вычислительной технике в терминах. – М.: Либерия, 1998. – 375 с.

7.Фридлан А.Я. Толковый словарь основных терминов: Учеб. пособие для вузов. – 2-е изд., испр. и доп. – М.: Приор, 1998. – 240 с.

Библиографический список

1.Гончаров А. HTML в примерах. – СПб.:Питер, 1997. –192 с. 2.Веб-дизайн: книга Дмитрия Кирсанова/ Под ред. А. Галунова. – СПб.: Символ Плюс, 1999. – 360 с. 3.Леонтьев Б. Web-дизайн: Тонкости, хитрости и секреты. – М.: Познавательная книга плюс,1999. – 192 с. e-mail: [email protected] 4.Леонтьев Б. Web-дизайн: Руководство пользователя. – М.: Познавательная книга плюс, 2001. – 320 с. 5.Лилиан Хоббс. Домашние странички Internet. Серия "Enter". – Ростов н/Д: "Феникс", 1998. – 160 с. 6.Холмогоров В. Основы Web-мастерства. – СПб.: Питер, 2002. – 352 с. 7.Шафран Э. Создание Web-страниц: самоучитель. – СПб.: Питер, 1999. – 320 с. e-mail: [email protected] 8.Дуванов А. А. HTML – конструирование //Информатика. Приложение к газете "Первое сентября". – 2000. – № 21, 22. 9.Байнов В.Д. Интернет: поиск информации и продвижение сайтов. – СПб.: БВХ-Петербург, 2000. – 288 с. 10.Современный самоучитель работы в сети Интернет. Самые популярные программы/ Под ред. Колягина. – 3-е изд., пераб. и доп. – М.: Триумф, 2000. – 486 с.

Оглавление

Введение……………………………………………………………………….………...3 Глава I. Создание Web-страниц.………………………………...……………....…...3 1.1. Основные понятия. Первые шаги построения Web-страницы…………………..3 1.2. Дополнительные возможности форматирования текста в HTML……………...20 1.3. Использование списков на Web-странице…………………………………….…33 1.4. Использование таблиц на Web-странице………………………………….……..43 1.5. Графика на Web-странице……………..………………………………………….55 1.6. Гипертекстовые ссылки на Web-странице.………………………………………69 1.7. Использование форм на Web-странице.

MAILTO....……………….…………...84 1.8. Использование фреймов на Web-странице……….……………………………...95 Глава II. Варианты индивидуальных заданий...…………...……………………108 Библиографический список…………..……………………………………………114

Documents

СОЗДАНИЕ WEB-СТРАНИЦ: ОСНОВЫ ...bek.sibadi.org/fulltext/ed194.pdf · рассмотрены основные конструкции языка html, принципы