Из доступных приложений эффективно управлять файлами в форматах GIF или JPG позволяет MicrosoftPhotoEditor, входящий в пакет программ MicrosoftOffice. Профессионалы используют гораздо более мощные графические пакеты, такие как AdobePhotoShop и CorelDraw.

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

Для этого достаточно указать параметр BACKGROUND= ˝URL рисунка˝ в тег <BODY>. Рисунок может быть в формате GIF или JPG/ Это продемонстрировано на рисунке 13.

Рис.13. Отображение браузером использования фонового изображения

<HTML>

<HEAD>

<TITLE>Пример</TITLE>

</HEAD>

<P>Пример использования фонового изображения </P>

</BODY>

</HTML>

Точно так же можно добавить фоновое изображение в таблицу, строку или ячейку таблицы – для этого достаточно указать параметр BACKGROUND= ˝URL рисунка˝ в теги <TABLE>, <TD>, <TR>.

- <IMG> - служит для встраивания изображения.

Параметры тега:

- SRC=˝URL рисунка˝- определяет URL–адрес файла с изображением.

Является обязательным параметром.

- WIDTH= ˝число˝ - ширина изображения в пикселях.

- HEIGHT= ˝число˝ - высота изображения в пикселях.

- BORDER= ˝число˝ - рамка вокруг изображения.

- HSPACE= ˝число˝ - отступ по горизонтали вокруг рисунка.

- VSPACE= ˝число˝ - отступ по вертикали вокруг рисунка.

- ALT= ˝текст˝ - выводится вместо изображения.

- ALIGN= ˝значение˝ - выравнивает изображение. Имеет значения:

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

- TEXTTOP – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.

- MIDDLE – выравнивание середины изображения по базовой линии текущей строки.

- ABSMIDDLE – выравнивание середины изображения посередине текущей строки.

- BASELINE или BOTTOM – выравнивание нижней границы изображения по базовой линии.

- ABSBOTTOM – выравнивание нижней границы изображения по нижней границе текущей строки.

- LEFT – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны.

- RIGHT - изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.

Общая схема записи рисунка выглядит так:

<IMGSRC=˝URL рисунка˝ WIDTH= ˝ширина˝ HEIGHT= ˝высота˝ BORDER= ˝рамка˝ ALIGN= ˝выравнивание˝ HSPACE= ˝ отступ по горизонтали ˝ VSPACE= ˝ отступ по вертикали ˝ ALT= ˝текст˝>

Приведем пример использования некоторых параметров тега <IMG>. Отображение примера браузером показано на рисунке 14.

<HTML>

<HEAD>

<TITLE>Пример</TITLE>

</HEAD>

<BODY>

<PALIGN= JUSTIF > <B> Компьютерная сеть </B> - это система взаимосвязанных компьютеров и терминалов, предназначенных для передачи, хранения и обработки информации. </P>

<P>ВАРИАНТЫ ВЫРАВНИВАНИЯ ИЗОБРАЖЕНИЯ</P>

<IMGSRC=AМ.jpgWIDTH= 260 ALIGN= TOPHSPACE= 10 VSPACE= 10>

</BODY>

</HTML>

Рис.14. Отображение браузером использования параметров тега <IMG>

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

другие ресурсы. Схема такой записи:

<AHREF= ˝адрес˝><IMGSRC=˝URL рисунка˝> текст ссылки </A>.

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

§2.1.8 Фреймы

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

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

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

Параметры тега:

- ROWS= ˝список величин˝ - описывает строки, таблицы фреймов.

- COLS= ˝ список величин˝ - описывает столбцы, таблицы фреймов.

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

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

Примеры:

1. <FRAMESETROWS = ˝100, 240, 140˝> - создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселей соответственно

2. <FRAMESETCOLS =˝25%, 75%˝> - создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера.

3. <FRAMESETCOLS =˝*,2*˝> - создает 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.

4. <FRAMESETROWS = ˝*,2*˝ COLS =˝*,2*˝> - создает сетку кадров.

- BORDER= ˝число˝ - указывает ширину обрамления всех рамок для

всех кадров, в пикселях;

- FRAMOBORDER= ˝значение˝ - включает или выключает

отображение обрамления кадров. Имеет значения yes или no (1 и 2). В случае yes рамка имеет трехмерную форму, иначе она невидима.

- FRAMESPACING= ˝число˝ - указывает ширину промежутка между

смежными кадрами в пикселях.

- <FRAME> - определяет одиночный фрейм. Располагается внутри тега

<FRAMESET>. Число тегов <FRAME> должно быть равно числу

кадров, определенных в теге <FRAMESET>, при этом считается, что

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

Параметры тега:

- SRC= ˝ URL˝ - указывает URL исходного документа для данного кадра.

- NAME= ˝строка˝ - указывает имя кадра. Это необходимо сделать,

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

- SCROLLING= ˝значение˝ - управляет линейками прокрутки кадра.

Значение может быть задано в виде yes(линейки есть всегда), no (никогда) или auto(если необходимо).

- NORESIZE – запрещает изменяться размеры кадра. Опция

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

- FRAMEBORDER= ˝число˝ - включает или выключает отображение

обрамления кадров. Имеет значения yes или no (1 или 2). В случае yes рамка имеет трехмерную форму, иначе она невидима.

Указание этой опции в теге <FRAME> отменяет указание, сделанное в теге <FRAMESET> для данного кадра и всех, смежных с ним.

- MARGINHEIGHT= ˝число˝ - устанавливает ширину полей кадра.

- MARGINWIDTH= ˝число˝ - устанавливает ширину полей кадра.

Приведем пример самого простого HTML- кода с фреймами:

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

</FRAMESET >

</HTML>

Отображение этого HTML- кода на экране браузера показано на рисунке 15.

Рис. 15. Отображение браузером HTML- документа с фреймами

- <NOFRAMES>…</NOFRAMES> - определяет содержимое, которое будет выводиться браузерами, не поддерживающими кадры.

А теперь рассмотрим полный HTML-код, создающий документ с

фреймами средней сложности:

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

</FRAMESET >

</HTML>

Этот пример создает страницу с фреймами, показанную на рисунке 16. Этот HTML- код определяет 3 фрейма.

Рис.16. Отображение браузером HTML- документа с фреймами

- <FRAME>…</FRAME> - реализует концепцию плавающих кадров.

Используется только для браузера MicrosoftInternetExplorer. Для задания расположения и размеров плавающего фрейма в документе можно использовать дополнительные параметры: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и использование совпадает с соответствующими параметрами тега <IMG>.

Для создания ссылки из одного кадра в другой достаточно указать в

теге ссылки опцию вида TARGET= ˝имя кадра˝. Общую схему такой ссылки можно записать так:

<AHREF>= ˝URL нового документа˝ TARGET= ˝имя кадра˝>…</A>

Наряду с фреймами часто используют формы. Рассмотрим

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

§2.1.9 Формы

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

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую- то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и VisualBasicScript.

- <FORM>…</FORM>- создаем формы.

Параметры тега:

- - ACTION= "URL" – указывает URL, который примет и обработает

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

- METHOD ="стиль" – указывает метод передачи данных программе- обработчику формы. "Стиль" может принимать одно из двух значений:

- get – предписывает посылать информацию формы вместе с URL,

- post - предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.

- NAME = "имя " – указывает имя формы. Это необходимо, если требуется доступ к данным формы встроенного скрипта на JavaScript и VisualBasicScript, а также в том случае, если данные формы предназначены для отправки по электронной почте.

Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов (стр. 9 из 16)