Угринович Н., Босова Л., Михайлова Н. Практикум по информатике и информационным технологиям

Подождите немного. Документ загружается.

300

Глава

Практическое задание 8.2. «Московский Кремль».

Создать

Web-сайт,

рассказывающий о башнях Московского Кремля.

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

ной

папке Kremlin. Здесь

будут

находиться как Web-страницы,

так и графические файлы. Файл начальной страницы сайта обыч-

но

имеет имя index.htm, в этом

случае

для начала просмотра сайта

адресе достаточно указать путь к папке, где он хранится.

Начальная страница «Башни Московского Кремля»

будет

содержать информацию о башнях Московского Кремля: исто-

рия

создания, описания отдельных башен, иллюстрации и т. д.

Вторая страница «Кремлевские Куранты» рассказывает о

Кремлевских Курантах. Страницы связаны

между

собой ги-

перссылками.

Создадим начальную Web-страницу, в процессе работы над

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

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

~Ш\ Создание Web-сайта «Московский

Кремль»

Запустить текстовый редактор Блокнот командой [Пуск -

Программы - Стандартные - Блокнот].

2 Дать странице название «Башни Московского Кремля», меж-

ду тэгами <BODY> и

</BODY>

набрать текст о Московском

Кремле или скопировать его из текстового файла kremlin.doc,

который находится на CD-ROM в каталоге \practi-

cum\html\Kremlin\.

3 Отформатировать текст (разметить абзацы и расставить заго-

ловки) и сохранить в файле index.htm в папке Kremlin.

4 Просмотреть полученную черно-белую страницу в браузере:

<%Ш

Башни Московского Кремля

Microsoft Internet Explorer

Файл';

-Правка'"

Вин

;

\Hik$paW^'

'C^)a«;';.'Cnpawca

Башни Московского Кремля

Современный

Кремль построен

конце

XV -

начале

XVI в.

Неприступная крепость

со

всех сторон была окружена водой:

с юга -

Москва-река,

севера

запада

река

Неглинная,

востока

- ров

глубиной

10 м и

шириной

32 м,

выложенный белым камнем.

Протяженность укреплений более

2-х

километров, высота

от 5 до 19 м,

толщина

от 3,5 до

6,5 м. Из

стен выступают вперед

боевых башен. Расстояние между ними позволяло

простреливать весь защищаемый периметр. Первоначально башни

сверху

были плоскими,

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

от

дождя

снега.

л)

Разработка

Web-сайтов

301

Атрибуты

задания цветовой схемы (цвета фона, текста

ги-

перссылок).

Цвет

на

Web-странице задают либо

его

названием,

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

#RRGGBB

(первые

два

разряда задают интенсивность красного

цвета, вторые

—

зеленого

третьи

—

синего).

Значение

яркости цвета может меняться

от

минимальной

до максимальной FF.

таблице приведены примеры некоторых

цветов:

цвет

черный

белый

красный

зеленый

синий

серый

код

#000000

#FFFFFF

#FF0000

#00FF00

#0000FF

#808080

название

black

white

red

lime

blue

gray

цвет

фиолетовый

бирюзовый

желтый

золотой

оранжевый

коричневый

код

#FF00FF

#00FFFF

#FFFF00

#FFD800

#FFA500

#A82828

название

magenta

cyan

yellow

gold

orange

brown

Основную цветовую

схему

Web-страницы можно задать

тэге <BODY>

помощью атрибутов:

Цвет фона BGCOLOR="#RRGGBB

Текстура фона

BACKGROUND^

file_name

Цвет текста TEXT="#RRGGBB"

Цвет текста ссылки

LINK=

#RRGGBB

Цвет текста активной

ссылки

ALI

NK=

RRGGBB

Цвет текста просмотренной

ссылки VLINK="#RRGGBB"

При

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

всю

пло-

щадь страницы, применение однотонного фона кажется излиш-

ним.

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

чем

текст.

Все это

время посетители страницы

будут

видеть цвет

фона,

заданный атрибутом BGCOLOR. Поэтому

для

фона указы-

вают

цвет, совпадающий

основным тоном фонового рисунка.

Чтобы текст хорошо читался, цвета

на

странице подбирают

контрастирующие

по

яркости: пастельный

фон

—

темный

текст,

или

темный

фон

—

светлый текст. Нежелательны буквы

белого цвета

—

они

могут

оказаться невидимыми

при

печати

страницы

на

принтере.

Для

оформления страницы

Московском Кремле использо-

вать

следующую

цветовую

схему:

<BODY

BGCOLOR=

#FFFFCC"

BACKGROUND^

png"

TEXT="#9

93300"

LINK="#00FF00

ALINK="#FF0000"

VLINK="#00FF00">

302

Глава

| {

Файя

Правка

избранное

С§рвис

£гравка

Спасская'башня

Самая

величественная

и красивая

[башня;

Кремля,

она по праву считается главной. Через ее —'

ворота

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

Фроловской,

Спасской

- с 1658 г., когда над проездными воротами была установлена

икона

Спаса.

Башня

десятиэтажная,

три из которых, занимагст Куцанты - часы с боем.

Вставка изображений. Для размещения на Web-страницах

используются графические файлы форматов GIF, JPEG и PNG.

Изображения помещаются на Web-страницу тэгом <IMG> с

атрибутом SRC, сообщающим

браузеру

имя и местоположение

графического файла.

IMG

SRC="image_name">

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

случае

задает-

ся

в тэге <Р>. К изображению с помощью атрибута <ALT>, мож-

но

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

(если по какой-либо причине графика не выводится в окне бра-

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

сунок мышью.

6 Вставить в начале страницы картину М. Н. Воробьева

«Вид

Московского Кремля.

1818»:

<Р

ALIGN="center"> <IMG SRC="kremlin.gif"

WIDTH=

515"

HEIGHT=

0" ALT="M.

. Воробьев . Вид

Московского Кремля. 1818"></Р>

2£айл Qpamc».;

gm ''

^эфаннов Cgpeuc

^правка

'' '

]

tw:4-A\,\ Остановить

Обювигь

Домой

ПОИСК

Избранное

j^flPec |0j РЛПрактику»1\Глаеа8\Кгет1;п\)поУ;х.Ыт

jrj

^Перекой

|Ссылки;

4* .?

.•••• i • .

(М.Н.Воробьев. Виа Московского Кремля.

181

В|

..'|

Журнад

tysw&t

Почта

компьютер

**<

Разработка Web-сайтов 303

тэге IMG с помощью атрибутов WIDTH (ширина) и

HEIGHT

(высота)

можно указать размер выводимой картинки (в пик-

селях).

Атрибут

ALIGN

выравнивает текст по верхнему краю, сере-

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

него с помощью значений: top,

bottom,

middle,

left

или

right.

Разместить изображение Царской башни определенного раз-

мера слева от текста:

<IMG

SRC="carsk.gif"

WIDTH="30" HEIGHT="75"

ALIGH="left">

}

-Haw»

DATIpaKTMKyM\rnaea8\Kjemlin\index.htm

Домой

^hep»te'

{jco

•

Царская башня

Изящная

башенка

построена

взамен

обветшавшей

деревянной

вышки,

которой,

по

преданию,

Иван

Грозный

любил

наблюдать

за

событиями

на

Красной

площади.

11а

втором

ярусе

висел

колокол

Спасский

набат.

, il

Форматирование текста. Для выделения фрагментов текста

используется тэг

<FONT>.

Атрибут

FACE

определяет гарнитуру

шрифта, атрибут

COLOR

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

SIZE

— размер сим-

волов.

Выделим часть текста более

крупным

шрифтом и цветом:

<FONT SIZE="4" COLOR="#FF0066"

FACE="Arial">

Несколько

раз

Московскому

Кремлю

грозило

унич-

тожение.

. .

</FONTX/P>

Microsoft

intone*

Ei^kwe

Несколько раз Московскому Кремлю грозило уничтожение,

конце

XVIII

века по

приказу

Екатерины

архитектор 8.И. Баженов проектировал снос древних стен

строительство

иг

их шсте нового дворца.

1812

г.

Наполеон хотел взорвать

•»-*

святыню

РОССИИ.

1917

г.

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

трехдюймовых орудий, чтобы выбить.из.нее юнкеров,

1S45

г.

немцы бомбили

город.

Однако судьба сохранила Кремль»

наш*

шрыла

ом стал символом

Российской

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

304

Глава 8

Выравнивание текста

по

горизонтали задает атрибут ALIGN.

Его возможные значения:

left

—

выравнивание

по

левому

краю,

center

— по

центру

right

— по

правому краю.

9 Выравнивание можно добавлять

тэгам, задающим заголов-

ки,

абзацы,

или

размещающим информацию

таблице.

Вы-

ровнять

по

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

<Н1

ALIGN="center"XFONT COLOR="#FF6600">

Башни

Московского KpeMnH</FONTX/Hl>

Файл

Правка

'; Назад

.£} Готово

Вид

Избранное Сервис Справка

- '-•• \ ",

. Остановить Обновить

Домой

Поиск.

Избранное

Журнал

аикум\Глава8\Кгет«п\к^ех.Ыт

х>перехоа \:Ссылки\\

Ryswat

On ^

Башни

Московского

Кремля

И-

Почта

KONTbiorep

га

Различные виды гиперссылок.

Связать Web-страницу

с дру-

гими документами можно

помощью универсального тэга

<А>

его

атрибута

HREF,

указывающих

каком файле хранится

вызываемый ресурс.

<А

HREF="f

Ие__пате">Указатель ссылки</А>

f ilename

—

путь

файлу

или его

URL-адрес

Интернете.

Если

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

в той же

папке,

что и

Web-страница,

то

можно указывать только

имя

файла.

Указатель ссылки

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

нием

особым цветом. При указании

на

него мышью

ее

курсор

превращается

значок

«рука».

Щелчок мыши

по

указателю

вызывает переход

на

документ, указанный

гиперссылке.

Используем различные значения атрибута

HREF

для

реали-

зации

различных реакций браузера:

Ссылка на Web-страницу локального компьютера

<А HREF="clock.htm">KypaHTbi</A>

Ссылка на Web-страницу, размещенную в Интернете

<А HREF="http://www.moskva.ru">Cai*T

Москве</А>

Вставка

изображения

<А HREF="spassk. jpg">BaiiiHH</A>

Запуск

проигрывателя звукового файла

<А HREF="strike

wav

>Бoй часов</А>

Разработка

Web-сайтов 305

Сохранение

файла на локальном компьютере

<А HREF="kremlin.г1р">Скачать файл</А>

Создание

бланка письма с заполненным адресом

получателя

<А HREF="mailto:your name@freemail.ги">Создать

письмо</А>

В качестве указателя ссылки можно использовать

не

только

текст,

но и

изображение.

этом

случае

указатель ссылки зада-

ется

помощью тэга

<IMG>.

Пусть

нашем проекте

при

щелчке мышью

по

маленькому

рисунку Царской башни вызывается

ее

крупная фотография.

Такой

прием часто используют

для

снижения времени загруз-

ки

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

ков,

а при

желании сможет загрузить полномасштабное изоб-

ражение.

<А

HREF="carsk. jpg"XIMG

SRC="carsk.gif"

WIDTH="30"

HEIGHT="75"X/A>

Якоря.

Гиперссылки на якоря.

Если создаваемая страница

очень большая,

то в ее

тексте можно расставить якоря (иначе

их

еще

называют метки

или

закладки).

Они

помечают смысло-

вые разделы

помогают быстро перемещаться

по

документу.

12 Поместить метку

top в

начало страницы.

Для

этого атрибу-

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

(имя

метки):

<А NAME="top"X/A>

конец страницы поместить указатель ссылки

на

метку.

Для этого

атрибуту

HREF

тэга необходимо присвоить

зна-

чение

(имя

метки):

<А

HREF="#top">Ha

начало страницы</А>

Теперь, находясь

конце страницы,

для

перемещения

в на-

чало страницы достаточно осуществить щелчок

по

указате-

лю гиперссылки

На

начало

страницы.

Переключаться

на

якорь

по

гиперссылке можно

не

только

внутри текущей Web-страницы,

но и с

другой

Web-страницы.

14 Установить метку

на

главной странице сайта index.htm

в на-

чале описания Спасской башни:

<А NAME=

anchorl"x/A>

306

Глава 8

15 Создать страницу «Кремлевские Куранты»

сохранить

ее в

файле

clock.htm в

папке Kremlin.

•3

Практикум.

Глава

HTML.

Часть

2 -

Microsoft

Internet

Ex..

Справка

^f'^

ф^

|f$gj«VПерехаа/1

]

рсы&

;;Оста^ювйть..:;Обновить

. „

••..-,.,.

. -

Кремлевские

Куранты

Когда были вперзые установлены часы

на

Спасской

башке точно

не

известно. Скорее всего,

это

произошло вскоре после

ее

сооружения.

В 1621 г под

руководством

англичанина Христофора

Галовея русские

мастера

изготовили

удивительные

часы.

В них

вращался циферблат,

указательной

стрелкой

служил

неподвижно закрепленный

сверху

"луч солнца".

\Ш

0Й

На

странице

clock.htm

добавить гиперссылку перехода

на

главную страницу

на

метку anchor 1, установленную

в аб-

заце

Спасской башне:

<А href= "index.htm#anchorl">

На

главную страницу</А>

Теперь после перехода

со

страницы «Башни Московского

Кремля»

на

страницу «Кремлевские куранты» можно вернуть-

ся

обратно

на тот же

абзац,

которого

был

осуществлен первый

переход.

Ссылки

с использованием карт-изображений (Map Image).

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

жения,

на

которых выделены области

—

указатели гиперссы-

лок.

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

на

определенный объект (внешнюю Web-страницу

или

внутрен-

ний

якорь).

В качестве основы

для

создания карты-изображения можно

выбрать любое изображение. Чтобы преобразовать изображе-

ние

карту,

в тэг

<IMG> добавляется атрибут USEMAP, значени-

ем которого является ссылка

на имя

описания конфигурации

областей

на

карте.

Для

рисования рамки вокруг карты-изобра-

жения

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

ется толщина рамки

пикселях.

Разработка Web-сайтов

307

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

Московского

Кремля (файл схема.png, которая хранится на

CD-ROM

в каталоге \practicum\html\Kremlin\):

<img SRC="cxema.png" WIDTH=

265" HEIGHT="330"

BORDER="1"

USEMAP=

#Kremlin" ALIGN="lef

АЬТ="Схема Московского Кремля">

Для

описания конфигурации областей карты-изображения

используется тэг

<МАР>,

единственным атрибутом которого яв-

ляется

NAME.

Значение атрибута

NAME

должно соответствовать

значению атрибута

USEMAP,

ранее заданному в тэге

<IMG>.

Тэгу

NAME

присвоить имя конфигурации карты-изображе-

ния:

<МАР NAME="Kremlin">

</МАР>

Форма

и геометрические размеры областей на карте-изобра-

жении,

а также адрес гиперссылки задаются тэгами

<AREA>

атрибутами. Атрибут

SHAPE

определяет форму области и может

принимать

значения

rect

—

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

circle

—

круг

poly

—

многоугольник.

Атрибут

COORDS

задает координаты каждой области в пиксе-

лях. Значением атрибута является список координат точек,

определяющих область, разделенных запятыми. Для прямоуго-

льника

задаются координаты левого верхнего и правого нижне-

го углов, для

круга

— координаты центра и радиус, для много-

угольника

— координаты вершин.

Для

задания адреса гиперссылки используется атрибут

HREF,

а для вывода альтернативного текста атрибут ALT.

Выбрать в качестве областей

прямоугольные

изображения

башен,

в контейнер ввести координаты 20 областей

(изоб-

ражений башен), адреса ссылок (якоря) и альтернативные

тексты:

<area shape="rect" coords="175

95,183,119

href=

#anchor9"

а1Ъ="Сенатская">

<area shape="rect" coords="129,21,148,87

href=

#anchor2"

а^="Никольская">

<area shape="rect

coords="103,3,116,57

href="#anchor3"

alt="Угловая Арсенальная">

Координаты областей можно узнать,

открыв

рисунок в ка-

ком-либо графическом редакторе, например, StarOffice

Draw.

Достаточно

навести курсор на интересующую точку, и в

строке состояния высветятся координаты курсора.

308

Глава 8

& StarOffice 5.2 - (cxema pngj

Файл

Правка

Вт

Цвета

Эффекты

£ереис

J-

Активизация гиперссылок

будет

вызывать переход

на

абзац

текста, относящийся

соответствующим башням (начало

каж-

дого раздела заранее помечено якорем).

Таблицы.

Таблицу формируют несколько различных тэгов.

Таблица задается контейнером <TABLE></TABLE>, внутри кото-

рого содержится описание структуры таблицы

и ее

содержа-

ния.

Любая таблица состоит

из

строк, которые задаются контей-

нером <TR></TR> (Table

Row), в

который помещается описание

ячеек.

Формат ячеек

и их

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

контейнер

(Table

Data),

заголовки ячеек

контейнер

<ТН></ТН>

(Table Header).

Толщина разделительных линий

таблице задается

помо-

щью атрибута BORDER,

а для

выравнивания информации внут-

ри

ячейки

по

горизонтали применяют атрибут ALIGN.

21 Создать таблицу

внести

в нее

данные

башнях Кремля:

<TR>

<ТН>Башня</ТН

Разработка

Web-сайтов

309

<ТН>Год сооружения</ТН>

<ТН>Архитектор</ТН>

<ТН>Высота</ТН>

</TR>

<TR>

<ТОСпасская</Т0>

<TD align="center">П.Соларио</Т0>

</TR>

<Т0>Беклемишевская</Т0>

<TD align="center">M.Руффо</ТБ>

</TR>

</TABLE>

Башни

Московского

Кремля

Microsoft

Internet

Explore»

{Автономная

работа]А

Ф^л'-;.Др«^а '•'•fi«V.изданное

С^?е»«:;:£првеч

Намд, . ... Вперед . Остановить Обновить

дрес |^1 ОЛПрактику j^j

'^Пврв««

Ссылки]

V-j(f

1 Год •

Ьашня

сооружения

|Спасская

| 1491

Никольская

| 1491

[Арсенальная

| 1492

Троицкая

\ 1495

Боровицкая

| 1490

|ВодоЕЗБОдная

j 1488

;

Б«сиемишеБская

| 1487

j|£}

ГоГОбО . ' : •:

:::

•

'• •

"- •••""

'•'

Домой

Поиск

Арзаиектор

П.

Соларио

П.

Соларио

П.

Соларио

П.

Соллрио

А. Джиларди

М.

Руффо

[

-.ОЗГМдйммп.»

:••:,',

Избранное

&•' '-• '

Высота

со

•

1.!

Готовый сайт «Московский

Кремль»

хранится на CD-ROM в

каталоге

\practicum\html\Kremlin\.

Задания

для самостоятельного выполнения

8.4. Разработать Web-сайт «Виртуальный зоопарк», содержащий

инте-

ресные

факты

из

жизни

«братьев

наших

меньших», а также шутки

про

животных. Для

создания

сайта

воспользоваться

Web-редакто-

ром

(например,

FrontPage

Express, входящим в состав Microsoft

Inter-

net

Explorer 4), а также текстовыми

материалами,

фотографиями

рисунками

животных,

хранящимися

на

CD-ROM.