Информатика_1 / JazikHTML
.pdf
|
BOTTON – по нижней границе ячейки. |
|
BASELINE – по базовой линии текста. |
WIDHT |
Ширина ячейки в пикселях. |
5.Пустая ячейка задается оператором. <TD> </TD>
6.Вертикальный список элементов внутри ячейки определяется оператором. <P> <BR>
7.Оператор описания строки таблицы имеет вид.
<TR [ Список параметров ]> Список операторов описания ячейки таблицы </TR> В список параметров входят следующие параметры:
Параметр |
Назначение |
ALIGN |
Определяет выравнивание текста в ячейках |
|
таблицы. Имеет значения: |
|
LEFT-выравнивание по левому краю; |
|
CENTER-центрирование (по умолчанию); |
|
RIGHT-по правому краю; |
|
JUSTIFY-по границам окна просмотра |
|
навигатора. |
BORDERCOLOR |
Устанавливает цвет рамки. Используется |
|
совместно с параметром BORDER |
|
оператора <TABLE>. |
BORDERCOLORDARK |
Темный цвет для трехмерного выделения |
|
рамки строки.. |
BORDERCOLORLIGHT |
Светлый цвет для трехмерного выделения |
|
рамки строки. |
NOWRAP |
Не сворачиваемость длинных строк. |
VALIGN |
Выравнивание по вертикали. Значения: |
|
TOP –по верхней границе ячейки; |
|
MIDDLE –центрирование; |
|
BOTTON –по нижней границе ячейки; |
|
BASELINE –по базовой линии текста. |
3. |
Пример построения таблицы. |
||||
Опишем построения таблицы вида. |
|
|
|||
|
Таблица 1 Общий вид таблицы. |
|
|||
|
|
|
|
Тип выравнивания |
|
|
|
|
|
|
|
|
|
|
По левому |
Центрирование |
По правому краю |
|
|
|
краю |
|
|
|
|
|
Этот текст |
|
Этот текст |
|
|
|
выровнен по |
Этот текст |
|
|
По вертикали |
|
левому краю |
выровнен по |
|
|
|
отцентрирован |
|||
|
|
|
|
|
правому краю |
Направление |
|
|
|
|
|
|
|
Вверху |
|
|
|
|
|
|
|
|
|
|
По |
|
|
Посередине |
|
|
горизонтали |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Внизу |
Рисунок 1. Способы выравнивания текста. |
|
|
|||
<!—Пример описания таблицы PRIMER2. HTML -- > |
|
||||
<!—к.э.н., доцент Косьмин С.Н. -- > |
|
|
|||
<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”> |
|
||||
<HTML>
<HEAD>
<TITLE> Выравнивание в таблицах </TITLE> </HEAD>
<BODY BGCOLOR =#FFFF00> <!-- желтый -- >
<TABLE BORDER>
<CAPTION VALING=TOP> Таблица 1. Общий вид таблицы. </CAPTION> <TR>
<TD>
<TH ROWSPAN=2> </TH>
<TH COLSPAN=3> Тип выравнивания </TH> </TD>
</TR>
<TR>
<TD>
<TH> По левому краю </TH> <TH> Центрирование </TH> <TH> По правому краю </TH>
</TD>
</TR>
<TR>
<TH ROWSPAN=2> Направление </TH> <TH> По вертикали </TH>
<TD> Этот текст выровнен по левому краю </TD>
<TD ALIGN=CENTER> Этот текст отцентрирован </TD>
<TD ALIGN=RIGHT> Этот текст выровнен по правому краю </TD> </TR>
<TR>
<TH> По горизонтали </TH>
<TD VALIGN=CENTER> Посередине </TD>
<TD VALIGN=BOTTON ALIGN=RIGHT> Внизу </TD> </TR>
<CAPTION VALIGN=BOTTON> Рисунок 1. Способы выравнивания текста </CAPTION> <MARQUEE> Демонстрация оформления таблиц </MARQUEE>
</TABLE>
</BODY>
</HTML>
Лекция: Графика, анимация, видео и звук в документах HTML.
1. Графические форматы HTML..
Для хранения графических изображений используется множество форматов файлов: PCX; BMP; GIF; JPEG; XMB. Однако публикации HTML накладывается жесткие ограничения на их использование.
Обмен информации в сети Интернет производиться со скоростью 1 Кбайт/секунду. Скорость программного файла ≈ несколько десятков килобайт.
Графика передается очень медленно!
Для построения WEB страниц используется файлы 2-х форматов: *GIF ( Graphics Interchange Format ) – формат для обмена графикой и
*JPEG ( Joint Photographic Expert Group ) – формат объединенной экспертной группы по фотографии.
Формат *GIF разработан в оперативной службе Compuserve. Он позволяет:
1.Использовать алгоритм сжатия изображения без потери качества;
2.Существенно уменьшить размер графического файла за счет сокращения полной 256 цветной палитры;
3.Позволяет получить эффект прозрачности изображения;
4.Только данный формат позволяет хранить анимационные графические изображения;
5.Позволяет создавать файлы с через строчной Interlaced разверткой изображения. Обычное изображение развертывается на экране сверху вниз с заданной четкостью.
Через строчное изображение появляется на экране постепенно, увеличивая четкость по мере
поступления данных.
∙ Формат из UNIX с оболочкой X-Windows для черно-белых изображений. Формат *GIF применяется в 90% случаев.
Формат *JPEG короче и требует меньше времени изображений цветовых фотографий и высококачественных изображении с плавным переходом цветов и яркостей.
Алгоритм сжатия *.JPEG является алгоритмом сжатия с потерей качества.
Формат *.GIF в Web-дизайне является основным. Он имеет ряд стандартов: GIF87, 87a; GIF89, GIF89a.
Формат GIF89a состоит из блоков. Блоки подразделяются на:
-Обязательные (их 2):
-блоки заголовка формата; -блоки изображения;
-И дополнительные:
-блоки комментария; -текстовые блоки; -управляющие блоки;
-блоки данных, содержащие произвольную информацию.
ВБЛОКЕ ЗАГОЛОВКА расположена ПАЛИТРА и сведения о размерах области, в которой отображается содержимое файла. Палитра может быть ГЛОБАЛЬНОЙ для всех изображений файла или может быть несколько ЛОКАЛЬНЫХ ПАЛИТР для каждого из изображений – своя.
ВБЛОКЕ ИЗОБРАЖЕНИЯ может быть от одного до нескольких.
ВБЛОКЕ КОММЕНТАРИЯ неотображаемая на экране, но просматривается вьюером. Хранит информацию, описывающую изображение и сведения о правах на изображение.
ТЕКСТОВЫЙ БЛОК хранит данные, отображаемые поверх изображения. В блоке указывается цвет текста и его расположение.
УПРОВЛЯЮЩИЕ БЛОКИ позволяют определить цвет в изображений или в ТЕКСТЕ ПРОЗРАЧНЫМ.
ДОПОЛНИТЕЛЬНЫЕ БЛОКИ хранят данные, используемые приложением, отображающим рисунок.
Графические изображения на Web-страничках используется: 1. для передачи графического изображения; 2. для организации ссылки.
2. Размещение графических изображений.
Для размещения графических изображений внутри текста или внутри таблиц используется оператор ( метка, тег ) местного значения с параметрами
<IMG SRC=”спецификация файла” [<список параметров>]>
Параметр |
Описание |
SRC |
Адрес URL файла с графикой |
ALT |
Текстовая строка, отображается навигатором, |
|
не способным выводить графику. По |
|
умолчанию: выводиться метка [ IMAGE ]. |
|
Рекомендуется использовать конструкцию: |
|
ALT=”_” |
ALIGN |
Выравнивание текста относительно графики:} |
|
LEFT-по левой границе |
|
RIGHT-по правой границе |
|
TOP-по верхней границе. |
|
MIDDLE-по центру изображения. |
|
BOTTOM-по нижней границе. |
|
TEXTTOP-выравнивание по верхней границе |
|
относительно самых высоких символов в |
|
текстовой строке. |
|
ABSMIDDLE-выравнивание середины |
|
текстовой строки относительно середины |
|
изображения. |
|
BASELINE-выравнивание нижней рамки |
|
изображения относительно базовой линии |
|
текстовой строки. |
|
ABSBOTTON-выравнивание нижней границы |
|
изображения относительно нижней границы |
|
текущей строки. |
HEIGHT |
Высота изображения в пикселях |
WIDHT |
Ширина изображения в пикселях |
BORDER |
Ширина рамки вокруг изображения в пикселях |
|
(используется только навигатором Netscape). |
|
BORDER=0- подавление рамки. |
HSPACE |
Ширина свободного пространства в пикселях, |
|
которые должно отделять изображение от |
|
текста по горизонтали. |
VSPACE |
Ширина свободного пространства в пикселях, |
|
которые должно отделять изображение от |
|
текста по вертикали. |
USEMAP |
Адрес URL файла, содержащего карту |
|
изображения, используемую для |
|
сегментированной графики. |
ISMAP |
Параметр, указывающий, что данное |
|
изображение является сегментированным. |
Прозрачные изображения, изображения с через строчной разверткой и анимированные изображения в документ вводятся тем же оператором: <IMG>.
Эффекты достигаются подготовкой файла формата *.GIF с использованием специальных инструментальных средств: редактора “ GIF CONSTRUCTION SET ”
3. Организация ссылок в документе HTML.
Ссылки позволяют связать фрагменты гипертекста в единое целое.
Они подразделяются по отношению к документу на внутренние ( локальные ) и внешние ( глобальные ).
Внутренние ( локальные ) ссылки позволяют организовать документ HTML как ряд отдельных логически законченных частей, хранимых на одном ВЭБ сервере.
Внешние ссылки позволяют связать гипертекстовые документы, хранимые распределено, как сетевые ресурсы, на ряде ВЭБ серверов.
Средством создания ссылок является метка <A [ Список параметров ] > текст ссылки </A>
Текст ссылки в окне навигатора выделяется цветом и подчеркиванием. Основными параметрами метки <A> является следующие параметры:
Параметр |
Значение |
HREF |
Адрес (URL) файла документа HTML. Если в |
|
адресе не указан путь, то поиск выполняется в |
|
том же каталоге, где находиться текущий |
|
документ. Адрес является …. (“…”). |
NAME |
Имя внутренней (локальной) ссылки, |
|
являющийся …… |
TARGET |
Задает имя окна (….), в которое будет |
|
загружен документ. Имеет значения: |
|
-blank документ загружается в новое окно; |
|
-parent документ загружается в то же самое |
|
окно, где расположена ссылка; |
|
-top документ занимает все окно навигатора. |
TITLE |
Название, появляющееся в окне навигатора |
|
при выборе ссылки. Удобно для организации |
|
ссылки на объекты, не имеющие названий. |
Общий формат внешней ссылки (HREF) имеет вид: http://HOST [:port] [path]
-параметр HOST обязательный. Указывается либо как доменный адрес: http://www.avp.rus
либо как адрес IP:
http://225.225.24.4
-номер порта идентифицирует программу, работающую в узле сети ICP/IP. -параметр путь определяет путь к объекту.
Если ссылка состоит только из обязательной части, то посылает навигатору свою главную страничку.
Сервера на базе об UNIX посылают по умолчанию файл документа INDEX.HTML.
Сервер Microsoft Information Server -файл DEFAULT.HTML
При организации внешних ссылок на ресурсы сети Интернет параметр HREF может иметь следующие значения:
Пример |
Описание |
HREF=”http://…” |
Ссылка на объект, передаваемый с |
|
использованием протокола HTTP. |
HREF=”FTP://…” |
Ссылка на сервере FTP. |
HREF=”mailto:…” |
Ссылка на электронный почтовый адрес для |
|
отправки электронного письма с помощью |
|
почтовой программы навигатора. |
HREF=”NEWS:…” |
Ссылка на электронную конференцию. |
HREF=”nntp://…” |
Ссылка на сервере электронной конференции. |
HREF=”telnet://…” |
Активизация сеанса удаленного доступа к узлу |
|
сети Интернет с использованием протокола |
|
TELNET. |
HREF=”gopher://…” |
Ссылка на сервере GOPHER. |
Внутренняя (локальная) ссылка состоит из 2-х частей: объявления и адреса. И объявление и адрес вводятся тегом <A>.
Объявлением создается метка, которая вводится параметром NAME=”Текст метки” Адресная ссылка (адрес) на метку задается параметром HREF=”< имя файла .HTML># Текст
метки“ Следует осторожно пользоваться внутренними (локальными) ссылками, т.к. они действуют
после загрузки всего документа.
Удобно разделить документ HTML на несколько файлов и связать их внешними ссылками.
4. Использование изображений в качестве ссылок.
Использование изображений в качестве гипертекстовых связей организуется оператором (меткой, тегом) <A>…</A> c меткой <IMG> внутри.
<A HREF=”URL”><IMG SRC=”имя файла” [ BORDER=0 ]> </A>
По умолчанию изображение обводится рамкой. BORDER=0 – подавляет вывод рамки.
Рядом с изображением текстом следует дать инструкцию об использованием гипертекстовой ссылки.
Второй формой использования графики является организация панели с кнопками. Для этого используются таблицы, в ячейках которых находятся изображения кнопок.
Для использования ссылок для описания отдельных фрагментов сложного изображения (сборочный чертеж, карта) используется СЕГМЕНТИРОВАННАЯ ГРАФИКА.
Карта сегментированного изображения вводит оператор <MAR NAME=” имя карты сегментов”>
<AREA [ список параметров ]>
…
</MAR>
Внутри операторных скобок <MAR>…</MAR> располагается список описания чувствительных зон для мыши.
Элементом списка является оператор местного значения <AREA>, организующий адресную ссылку.
Параметр |
Значение |
SHADE |
Определяет форму чувствительной области. Имеет значения: |
|
RECT-прямоугольник область задается координатами левый верхний и правый |
|
нижний угол в параметре COORDS. |
|
CIRC-окружность. В COORDS указываются координаты центра окружности |
|
X,Y и радиус. |
|
POLY-многоугольник. В параметре COOLDS парами указываются координаты |
|
вершин X и Y. |
HREF |
Задает адрес (URL) объекта, загружаемого по щелчку левой кнопки мыши в |
|
чувствительной области. |
NOHREF |
Указывает области нечувствительные к щелчком мыши. |
Все значения параметров являются литералами. Разделителем в списке параметров служит пробел. Разделителем в списке координат является запятая.
Сегментированное изображение в документ HTML вводятся оператором IMG с параметром
USEMAP.
<IMG SRC=” имя файла графики .GIF” BORDER=0
USEMAP” [ имя файла с картой .HTML ] # имя карты сегментов “>
-Если сегменты перекрываются, то навигатор использует первое описание.
-Если карта сегментов и ссылка находятся в одном файле, то < имя файла с картой >. HTML можно опустить.
В противном случае его следует указать в значении параметра USEMAP.
Символ #, предшествующий имени КАРТЫ, сообщает броузеру, что карта определена в HTML
иброузер должен вывести изображение стороны клиента.
5. Видеофрагменты в документах HTML.
Анимацию изображений ( немое кино ) позволяет создать файл формата *.GIF
Полноценные озвученные фрагменты хранятся в файлах формата Microsoft Video for Windows – файла *.AVI
Существует несколько способов создания файла *.AVI:
1. Запись сигнала видеомагнитофона или видеокамеры с помощью платы захвата видео изображения в файл *.AVI.
Ограничением технологии является скорость передачи данных в Internet 1кбайт/сек. Для размещения файла *.AVI на ВЭБ страничке пригодны файлы не более нескольких десятков килобайт.
2. Создание файла *.AVI по технологии мультипликации из отдельных изображений, нарисованных в любом графическом редакторе.
Озвучивание файла *.AVI файла является ППП “ Microsoft Video for Windows”.
Для вставки видеофрагмента в документ HTML используется оператор ( метка, тег ) местного значения с параметрами:
< IMG [ < список параметров >] >
Кроме раннего введенных параметров метки IMG используются специфические параметры вставки видеофрагментов:
Параметр |
Описание ( значение ) |
|
DYNSRC |
Определяет путь к файлу *.AVI, содержащему видеофрагмент. Путь |
|
|
вводиться литералом |
( берется в двойные кавычки ). |
SRC |
Указывает путь к графическому изображению, которые отображаются |
|
|
вместо видеофрагмента, если навигатор не способен проигрывать |
|
|
видеофрагменты. |
|
START |
Определяет момент начала проигрывания видеофрагмента. Значения: |
|
|
FILEOPEN-начинает проигрывание сразу же после загрузки. |
|
|
MOUSEMOVE-при попадании курсора мыши в зону действия параметра. |
|
CONTROLS |
Организует отображение органов управления прокруткой |
|
|
видеоизображения. Параметр без |
|
LOOP |
Устанавливает количество циклов проигрывания видеоизображений. При |
|
|
значении 1 или INFINITE проигрывание бесконечно (до перехода на |
|
|
следующую страницу или до выхода из навигатора). |
|
LOOPDELAY |
Задает задержку в миллисекундах перед началом очередного |
|
|
проигрывания видеофильма. |
|
Органами управления прокруткой являются: кнопка запуска / остановки проигрывания видеофрагмента и движковый регулятор, отражающий место видеофрагмента.
ПРИМЕР: |
|
<! --Пример вывода графического изображения |
-- > |
<! --на фоновом изображении из “водяных знаков” -- > |
|
<! --к.э.н., доц. Космин С.Н. |
-- > |
<! DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 3.2//EN” > |
|
<HTML> |
|
<HEAD>
<TITLE> Вывод графических изображений </TITLE> </HEAD>
<! -- Вывод фонового изображения из “водяных знаков“ -- > <BODY BACKGROUND = “….GIF” BGPROPERTIES=FIXED> <H2> Графика в документах HTML </H2>
<HR>
<IMG SRC=”(адрес место нахождения).GIF”> <P> Рис.1. и еще два рисунка ниже слева и справа: <TABLE>
<TR>
<TD><IMG SRC=”….GIF”></TD>
<TD><IMG SRC=”….GIF”></TD> </TR>
</TABLE>
<! -- Пример вставки видеоизображения PRIMER.HTML -- > <! -- -->
<! – DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 3.2//EN”> <HTML>
<HEAD>
<TITLE> Вставка видеоизображения </TITLE> <HEAD>
<BODY>
<IMG DYNSCR=”….AVI” START=”FILEOPEN” CONTROLS> </BODY>
</HTML>
6. Озвучивание документов HTML
Озвучивание документов HTML производится с помощью вставки звуковых *.WAV и музыкальных *.MIDI файлов.
Средства языка HTML жесткого стандарта на озвучивание не имеют.
1.Навигатор Microsoft Internet Explorer использует метку:
<BGSOUND SRC=”….WAV/AU/MIDI ”[LOOP=<количество проигрывании>/INFINITE]>
Если параметр LOOP опущен, то файл проигрывается однократно. Если он имеет значение [INFINIT], то бесконечно.
2.Навигатор Netscape использует метку
< EMBER SRC=”….WAV” HIDDEN=”TRUE”>
Оператор EMBER предназначен для вставки произвольных OLE объектов. OLE технология работает только в среде ОС Windows.
3.Навигатор NCSA MOSAIC использует метку
< SOUND SRC=”….WAV” [LOOP=1/<количество циклов проигрывания>/INFINITE] [DELAY=<задержка начала проигрывания в секундах>]>
Наиболее распространенными навигаторами являются Netscape и Microsoft Internet Explorer поэтому рекомендуется использовать метку <EMBER>, возможно дублируя ее оператором
<BGSOUND>.
Навигатор Microsoft Internet Explorer версии 3.0 и выше полностью интерпретирует оператор <EMBED>, поэтому можно использовать только его.
<!--Пример озвучивания странички WEB PRIMERS.HTML--> <!-- к. э. н., доц. Косьмин С. Н. --> <!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 3.2//EN”> <HTML>
<HEAD>
<TITLE>Вставка звукового файла</TITLE> </HEAD>
<BODY>
<EMBED SRC=”Слушайте все! Песня из кинофильма Вертикаль»<HR>.WAV”HIDDEN=”true”>
<BGSOUND SRC=” |
.WAV”> |
</BODY> |
|
</HTML> |
|