Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет приборостроения и информатики

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Комолова.doc

Скачиваний:

Добавлен:

27.08.2019

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 67 / 217 8 9 10 11 12 13 14 15 16 17 18 19 20 21 > Следующая >>>

140 Различных цветов с указанием их оригинальных названий и шестнадцатерич-

ных кодов в цветовой модели RGB Урок 5 Линии, точки

и другие объекты

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

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

страницы кавычек, знаков сравнения и пр., то есть специальных сим-

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

на веб-страницах более сложных объектов, таких как Java-апплеты,

сценарии и пр.

Урок Горизонтальные линии 89

Горизонтальные линии

Для вставки горизонтальной линии используется тег <HR> Это одинарный

тег, закрывающего тега он не имеет По умолчанию линия является объемной

и с тенью

Горизонтальные линии позволяют разделить длинный формально неограничен-

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

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

Синтаксис:

Атрибуты:

SIZE — толщина линии в пикселах;

WIDTH — ширина линии в пикселах или процентах от ширины окна браузера;

ALIGN — положение на экране (слева, по центру, справа);

NOSHADE — линия представляется простой однотонной темной полосой

Примеры горизонтальных линий различной толщины показаны на рис 5 1

(листинг 5 1)

Рис 5 1 Горизонтальные линии различной толщины90 Урок 5. Линии, точки и другие объекты

Листинг 5 1 Примеры создания горизонтальных линий различной толщины

<html><head><title>КРАСИВЫЕ ТОЛСТЫЕ И ТОНКИЕ ЛИНИИ</title></head>

<body bgcolor="#ff8c00" leftmargin=60><center><h2>КРАСИВЫЕ ТОЛСТЫЕ И ТОНКИЕ ЛИНИИ</h2>

<hr>

Horizontal rule - горизонтальная черта - одинарный тег.

<h3>значение size = и width = </h3>size = 40 width = " 20 % "

size = 30 width = " 30 % "

size = 20 width = " 40 % "

size = 10 width = " 50 % "

size = 5 width = " 60 % "

</center></body></html>

Примеры коротких горизонтальных линий показаны на рис 5 2 (листинг 5 2)

Рис 5 2 Короткие горизонтальные линии

Листинг 5 2 Примеры создания коротких горизонтальных линий

<html><head><title>КОРОТКИЕ ГОРИЗОНТАЛЬНЫЕ ЛИНИИ</title></head>

<h2>Линии в виде фигур</h2>

_______________________________________________________

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

</center></body></html> Клавиатурные символы 91

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

рис 5 3 (листинг 5 3)

Рис 5 3 Горизонтальные линии, выровненные по правому краю страницы

Листинг 5 3 Примеры создания горизонтальных линий, выровненных по правому краю

страницы

<html><head><title>ЛИНИИ, ВЫРОВНЕННЫЕ ПО ПРАВОМУ КРАЮ</title></head>

<h2>Линии, выровненные по правому краю</h2>

</body></html>

Клавиатурные символы

Как показано на рис 5 3, с помощью клавиатуры можно рисовать горизонтальные

линии (клавиша подчеркивания _), а также наклонные налево (\) и направо (/)

линии, вертикальные линии (|) Сочетания таких линий позволяют получать ин-

тересные рисунки

На рис 5 4 показан рисунок листа, выполненный с помощью клавиатурных сим-

волов (листинг 5 4)

Листинг 5 4 Пример создания листа с помощью символов клавиатуры

<html><head><title>СИМВОЛЫ, ВВЕДЕННЫЕ С КЛАВИАТУРЫ</title></head>

<body bgcolor=»#7fff00» leftmargin=300>92 Урок 5. Линии, точки и другие объекты

<h5 align=center>Лист, нарисованный с помощью символов, введенных с клавиатуры

</h5>

/|\

\\|//

\\\|///

\\\\|////

\\\|///

\\\\\\|//////

\\\\\|/////

\\\|///

</h1></pre></body></html>

Рис 5 4 Лист, нарисованный с помощью символов клавиатуры

На рис 5 5 показан рисунок солнышка, выполненный с помощью клавиатурных

символов (листинг 5 5)

Листинг 5 5 Пример рисования солнышка с помощью символов клавиатуры

<html><head><title>СОЛНЫШКО, ПОСТРОЕННОЕ С ПОМОЩЬЮ СИМВОЛОВ КЛАВИАТУРЫ</title></head>

<body bgcolor=»#90ee90» leftmargin=300><center>Солнышко, построенное с помощью

символов, введенных с клавиатуры</center>

<pre>

\|||/

\ ___ /

__/ \__

__| |__

/\___/\

/|||\

</pre></body></html> Клавиатурные символы 93

Рис 5 5 Солнышко, нарисованное с помощью символов клавиатуры

На рис 5 6 показан рисунок человечка, выполненный с помощью клавиатуры (ли-

стинг 5 6)

Рис 5 6 Лицо человека, нарисованное с помощью символов с клавиатуры

Листинг 5 6 Пример рисования лица человека с помощью символов клавиатуры

<html><head><title>ЧЕЛОВЕЧЕК</title>

</head>

oooooo

o o

o ! ! o

o o

o ==== o

o o

oooo

</h3></pre></body></html>

Как вы уже убедились, с помощью клавиатуры можно рисовать самые разные за-

бавные фигуры — дополнительные примеры имеются в листингах 5 7 и 5 8 94 Урок 5. Линии, точки и другие объекты

Листинг 5 7 Пример рисования зверя с помощью символов клавиатуры

<html><head><title>ЗВЕРЬ</title></head>

/ / / /

/ / / /

/ /---------/ /

{ }

( * * )

{ <> }

{ }

<###>

-----

</h3></pre></body></html>

Листинг 5 8 Пример рисования птицы с помощью специальных символов

<html><head><title>ПТИЦА</title></head>

<body bgcolor=f0ffff><pre> ?

<<>>

<<<<<<<<<<<<<<

>>>>>>>>>>>>>>>>>

<<<<<<<<<

>>>>>>>>>

<<<<<<

>>>>>>

<<<>>>

<<>>

><

</pre></body></html>

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

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

и другие специальные символы И даже «пресловутый» пробел относится к спе-

циальным символам Примеры показаны на рис 5 7 (листинг 5 9)

Листинг 5 9 Пример создания веб-страницы со специальными символами

<html><head><title>СПЕЦ СИМВОЛЫ</head></title>

<body>

Амперсант &

Знак меньше <

Знак больше >

Знак торговой марки ™

Неразрывный пробел

Цент ¢

Фунт £

Знак валюты ¤

Вертикальная черта ¦

Знак параграфа §

Знак копирайта © Специальные символы 95

Прямая кавычка "

Левая типографская кавычка «

Правая типографская кавычка »

Знак зарегистрировано ®

знак градуса °

Степень1 ¹

Степень2 ²

Степень3 ³

Знак микро µ

Знак абзаца ¶

Точка маркер ·

1/4 ¼

1/2 ½

Знак умножения ×

Знак деления ÷

</body></html>

Рис 5 7 Веб-страница, содержащая специальные символы

Примеры открывающих и закрывающих тегов показаны на рис 5 8 (листинг 5 10)

Здесь же представлены надписи различного цвета

Листинг 5 10 Пример создания веб-страницы, содержащей открывающие и

закрывающие теги

<html> <head><title>ЦВЕТ ТЕКСТА</title>

</head><body bgcolor=whitesmoke>

font size=5

96 Урок 5. Линии, точки и другие объекты

</body> </html>

Рис 5 8 Веб-страница, содержащая открывающие и закрывающие теги

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

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

адреса электронной почты, служит тег <ADDRESS> Синтаксис:

<address> Адрес-автора </address>

Этот тег обычно указывается в конце документа Содержимое тега выводится, как

правило, курсивом Пример документа, содержащего адрес, показан на рис 5 9

(листинг 5 11)

Листинг 5 11 Пример создания документа, содержащего адрес

<html><head><title>АДРЕС</title></head>

<address> HTML- Учебный курс Комолова Нина Владимировна Северо=Западный институт

печати

Санкт-Петербургского государственного университета технологии и дизайна

ninapetergof@.mail.ru</address>

</body></html> Java-апплеты 97

Рис 5 9 Документ, содержащий адрес автора

Java-апплеты

Для вставки в состав документа Java-апплетов применяют тег <APPLET> Java-

апплеты — это программы на языке Java, которые загружаются и выполняются

браузером Программы, переданные браузеру, придают странице интерактив-

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

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

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

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

подкаталог classes каталога с HTML-документами Во-вторых, в исходный код

страницы должен быть внедрен тег <APPLET>, а также все необходимые для его

работы атрибуты

Тег <APPLET> имеет атрибуты CODEBASE, ARHIVE, CODE, OBJECT, ALT, NAME, WIDHT,

HEIGHT, ALIGN, TOP, MIDDLE, BOTTOM, LEFT, RIGHT, HSPACE, VSPACE Он появился в вер-

сии HTML 3 2 Обязательным является либо атрибут CODE, либо CODEBASE Тег

<PARAM>, включаемый в состав тега <APPLET>, должен предшествовать остальному

содержимому

Тег <APPLET> не рекомендован к применению Вместо него желательно использо-

вать тег <OBJECT> (см далее)

Сценарии

Для включения в документ сценария служит тег <SCRIPT> Сценарии позволяют

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

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

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

Тег <SCRIPT> появился в HTML версии 3 2 Он может повторяться как угодно ча-

сто как в разделе <HEAD>, так и в разделе <BODY> документа Если задан атрибут 98 Урок 5. Линии, точки и другие объекты

SRC, браузер загружает внешний сценарий В противном случае содержимое тега

<SCRIPT> интерпретируется как код сценария

Атрибут CHARSET Атрибут CHARSET определяет кодировку содержимого

Синтаксис:

charset="набор_символов"

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

денные организацией IANA (Internet Assigned Numbers Authority), например

ISO-8859-1 или US-ASII

Атрибут TYPE Атрибут TYPE определяет MIME-тип языка сценариев (напри-

мер, text/javascript) Синтаксис:

type="тип_содержимого"

Атрибут LANGUAGE Атрибут LANGUAGE определяет язык сценария с помо-

щью зарезервированного имени Синтаксис:

language="данные"

Атрибут SRC Атрибут SRC задает местоположение внешнего сценария Син-

таксис:

src="URL"

Атрибут DEFER Атрибут DEFER указывает браузеру на то, что сценарий не ге-

нерирует данные, предназначенные для отображения В этом случае браузер

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

сценария

Внешние объекты и комментарии

Для включения в состав документа внешнего объекта служит тег <OBJECT> Внеш-

ним объектом может быть Java-апплет, изображение или внешнее приложение

Данный тег появился в HTML версии 4 0 Тег может располагаться в разделе

<HEAD>, но при этом объект выводиться не будет, то есть в этот раздел можно

помещать только те объекты, которые не требуют отображения Тег <OBJECT> до-

пускает вложение Он имеет атрибуты ID, DECLARE, CLASSID, CODEBASE, DATA, TYPE,

CODETYPE, ARHIVE, STANDBY, HEIGHT, WIDHT, USEMAP, NAME, TABINDEX, ALIGN, BORDER,

HSPACE и VSPACE

Тег <COMMENT> используется для задания комментариев в документе Пример:

<comment>Данный текст не выводится.</comment>

Листы стилей

Для включения в документ листов стилей используется тег <STYLE> Он может

присутствовать только в HTML-заголовке (внутри тега <HEAD>) Подведем итоги 99

Обязательный атрибут <TYPE> указывает браузеру на использование листов сти-

лей (см урок 17) Синтаксис:

<type>="Тип данных MIME"

Этот атрибут определяет MIME-тип языка стилей (например, "text/css")

Атрибут <MEDIA> идентифицирует предполагаемую среду для воспроизведения

информации, заданной с помощью стилей, например:

media="screen|print|all"

Подведем итоги

В этом уроке рассказывается о теге <HR>, позволяющем чертить горизонтальные

линии, параметры которых определяются атрибутами SIZE, WIDTH, ALIGN, NOSHADE

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

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

страницах более сложных объектов, таких как Java-апплеты, сценарии и прочее Урок 6 Бегущая строка

В этом уроке рассматриваются средства создания бегущей строки —

одного из самых эффектных украшений веб-страницы.

Урок Вставка бегущей строки на веб-страницу 101

Вставка бегущей строки на веб-страницу

Тег бегущей строки <MARQUEE> (от англ marquee — большой навес, шатер) имеет

атрибуты ALIGN, BEHAVIOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, SCROLLAMOUNT

Атрибут ALIGN Атрибут ALIGN позволяет разместить текст в верхней (TOP),

средней (MIDDLE) или нижней (BOTTON) области бегущей строки

Атрибут BEHAVIOR Атрибут BEHAVIOR управляет поведением бегущей стро-

ки на экране:

SCROLL — текст пересекает экран (это значение задано по умолчанию);

SLIDE — текст выдвигается на экран и останавливается;

ALTERNATE — текст выдвигается на экран, а затем перемещается взад-вперед

Атрибут BGCOLOR Атрибут BGCOLOR задает цвет фона бегущей строки в мо-

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

Атрибут DIRECTION Атрибут DIRECTION задает направление движения

текста:

LEFT — слева направо (это значение задано по умолчанию);

RIGHT — справа налево

Атрибут HEIGHT Атрибут HEIGHT управляет высотой строки в пикселах или в

процентах от высоты экрана (тогда к числу добавляется знак процента)

Атрибут WIDTH Атрибут WIDTH управляет длиной строки в пикселах или

в процентах от ширины экрана (тогда к числу добавляется знак процента)

Атрибут HSPACE Атрибут HSPACE позволяет задать ширину в пикселах левого

и правого полей между областью бегущей строки и окружающим ее текстом

или графикой

Атрибут VSPACE Атрибут VSPACE позволяет задать высоту в пикселах верхне-

го и нижнего полей между областью бегущей строки и окружающим ее текстом

или графикой

Атрибут LOOP Атрибут LOOP задает количество проходов бегущей строки

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

страница находится на экране

Атрибут SCROLLAMOUNT Атрибут SCROLLAMOUNT управляет скоростью

перемещения текста Значение этого параметра, равное 1, означает самую ма-

ленькую скорость, значение 2000 — самую большую (в этом случае строка бу-

дет просто мелькать)

Атрибут SCROLLDELAY Атрибут SCROLLDELAY по своим функциям напоми-

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

бегущей строки

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

рость вывода строки 102 Урок 6. Бегущая строка

Пример бегущей строки

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

ге 6 1, а результат работы этой программы показан на рис 6 1

Листинг 6 1 Пример создания веб-страницы с бегущей строкой

<html>

<head>

<title> БЕГУЩАЯ СТРОКА</title>

</head>

<body>

Тег бегущей строки обозначается в угловых скобках английским словом marquee

Есть теги, а есть атрибуты

</marquee>

Атрибут align управляет размещением текста в верхней (top), средней (middle) или нижней

(bottom) области бегущей строки

Есть теги, а есть атрибуты

</marquee>

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

scroll - текст пересекает экран (это значение установлено по умолчанию)

slide - текст выдвигается на экран и останавливается

alternate - текст выдвигается на экран, а затем перемещается взад и вперед

Есть теги, а есть атрибуты

</marquee>

Атрибут bgcolor управляет цветом фона бегущей строки

Цвет задается в модели rgb

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

Есть теги, а есть атрибуты

</marquee>

Атрибут direction управляет направлением движения текста

left – слева направо (задается по умолчанию), right – справа налево

Атрибут height управляет шириной строки

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

или в процентах от высоты экрана

(тогда к числу добавляется знак процента)

атрибут width= управляет длиной строки

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

или в процентах от ширины экрана

(тогда к числу добавляется знак процента)

Атрибут hspace управляет шириной в пикселах

левого и правого полей между областью бегущей строки и окружающим ее текстом или

графикой

Атрибут vspace управляет размером высотой в пикселах Рисунок в качестве бегущей строки 103

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

графикой

Этот атрибут успешно используется при размещении бегущей строки в таблице

Атрибут loop задает количество проходов текста по экрану

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

находится на экране

Атрибут scrollamount управляет скоростью перемещения текста

значение этого параметра, равное 1, означает самую маленькую скорость, значение 2000 —

самую большую (в этом случае строка будет просто мелькать)

Атрибут scrolldelay по своим функциям напоминает предыдущий

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

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

строки на экран.

</body>

</html>

Рис 6 1 Веб-страница с бегущей строкой

Рисунок в качестве бегущей строки

Бегущей строкой может быть не только текст, но и рисунок Программа с графи-

ческой бегущей строкой представлена в листинге 6 2, а результат работы этой про-

граммы показан на рис 6 2 Рисунок для бегущей строки (в данном случае файл

Фон.gif) и код программы должны храниться в одном каталоге

Листинг 6 2 Пример создания веб-страницы с рисунком в качестве бегущей строки

<html><head><title>БЕГУЩИЙ РИСУНОК</title></head>

</body></html>104 Урок 6. Бегущая строка

Рис 6 2 Веб-страница с графической бегущей строкой

Подведем итоги

В этом уроке рассказано, как с помощью тега <MARQUEE> украсить веб-страницу

бегущей строкой Внешний вид и поведение бегущей строки определяют атрибу-

ты тега <MARQUEE>, в том числе ALIGN, BEHAVIOR, DIRECTION, HEIGHT, WIDTH, HSPACE,

<<< < Предыдущая 1 2 3 4 5 67 / 217 8 9 10 11 12 13 14 15 16 17 18 19 20 21 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.12.2018386.05 Кб17Киса.doc
#
09.04.2015435.71 Кб15Кластеры.doc
#
09.04.2015359.82 Кб25кол.docx
#
20.08.2019200.7 Кб7колеб.контура.doc
#
15.03.2016222.72 Кб47Колебания типа E в прямоугольном объемном резонаторе.docx
#
27.08.20191.1 Mб15Комолова.doc
#
12.07.201960.12 Кб18комп.преступление2.docx
#
09.04.2015463.87 Кб35Компьютерные сети Лабораторная 01.doc
#
20.04.20191.19 Mб45Конспект лекций 4306 - 2007.doc
#
14.03.2016176.13 Кб177Конспект лекций материаловед.2...doc
#
09.04.20154.36 Mб507Конспект лекций от мешка 1.doc