Изображения в HTML-документе.

Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ) и одну строчку в HTML-тексте.

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

<IMG SRC="имя файла"> Здесь слово IMG (Image) означает изображение, а параметр SRC (Source)-источник. <IMG SRC="picture.gif"> В качестве источника необходимо указать имя файла с изображением. Разумеется, если файл находится в другой, нежели страница, директории, то надо указать его местоположение. Изображение будет размещено в том месте на странице, где находится ярлык.Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]" , например: <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" ALT="Картинка">

Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif . Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).

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

Параметры HSPACE и VSPACE-определяет размер горизонтального и вертикального отступов от встраиваемого изображения до текста. Формат записи значений-в пикселях. По умолчанию, значения обоих типов отступа равно нулю.

Параметры тэга <IMG> может включать следующие атрибуты:

Атрибут	Функция
SRC= “файл”	Указание пути к встраиваемому изображению
BORDER= “n”	Указание рамки рисунка
WIDTH=n(%)	Определение ширины изображения
HEIGHT=n(%)	Определение высоты изображения
ALIGN	Указание типа выравнивания рисунка
HSPACE=n	Определение горизонтального отступа между рисунком и текстом
VSPACE=n	Определение вертикального отступа между рисунком и текстом
ALT	Указание альтернативного текста
TITLE	Создание информационной подсказки к изображению

Пример 4.

<html> <title> Пример </title> <body bgcolor="Red"><h1><font color="green"> Электронные услуги в здравоохранении.</h1> <font color="red"> <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" align="left" border="1" width=50% ><нspace="20" vspace="20"><b>Базовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. Социальная защита и занятость населения. Образование, наука и здравоохранение.</b></br></BODY></html>

Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так: <BODY BACKGROUND="images.gif"> Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

Пример 5.

<html>

<title>Пример 2

</title>

Электронные услуги в здравоохранении.</h1></font>

Базовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. Социальная защита и занятость населения.

Образование, наука и здравоохранение.</b></br>

</BODY>

</html>

Раздаточный материал:карточки с заданиями

СОДЕРЖАНИЕ ЗАНЯТИЯ.

Самостоятельная работа.

Выполнить приведенные в тексте примеры применительно к Вам и все документы сохранять в формате .txt и .htm или .html в папке ТЕМА_11 в собственной папке - RUS.

11.2. Работа с преподавателем:

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

К концу занятия показать преподавателю отчет о выполненной работе и получить зачет по данной работе.

11.3. Контроль исходного и заключительного уровня знаний:

Тестирование на компьютере.

Беседа преподавателя со студентом по вопросам самоподготовки.