Цель работы: Отработать включение графических файлов в HTML документы.
Задачи работы:
Овладеть методикой работы с графическими файлами с помощью команды IMG.
Получить навыки работы c атрибутом ALIGN;
Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab11.html на диске.
персональный компьютер.
Технология работы:
Теоретическая часть:
Включение графики в web-страницу. Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:
<IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст">
В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например,../images/picture.jpg).
ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, например picture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.
С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута:
ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка.
BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.
MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.
BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.
В качестве параметров атрибутов WIDTH и HEIGHT указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.
Атрибут ALT содержит альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.
Пример применения тега <IMG>:
<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:
<А HREF="URL документа, на который организуется ссылка">
<IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение" HEIGHT="значение"
АLТ="Альтернативный текст" BORDER="значение"></A>
Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.
Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:
<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE" WIDTH="315" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A>
Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.
Выполните на компьютере:
1. С помощью любого графического редактора, позволяющего оперировать текстурными заливками, например пакета Corel Draw, подготовьте простой файл, заполненный однородной текстурой (рис. 5.13). Сохраните этот файл на диске в своей директории C:\MySite\Images под именем background.gif. Поместите в ту же папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.
Рис. 5.13. Файл bockground.gif
2. Создайте файл lab11.html дополните тег <BODY> атрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#OOOOFF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
После тегов <Н1> </Н1>, определяющих стиль заголовка, добавьте еще одну строку кода:
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" А1_Т="Это моя фотография">
Таким образом, код данного участка нашего html-документа будет иметь следующий вид:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>
<TITLE>Mofl домашняя страничка</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1><BR>
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" ALT="Этоo моя фотография">
<P ALIGN="JUSTIFY"> и т. д.
Создайте свою домашнюю страницу согласно образцу. Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 11.1).
Рис. 11.1. Web-страница после внесения изменений в код HTML
3.Покажите работу преподавателю.
4. Сохранить файл как lab11.txt в блокноте и как lab11.html для просмотра в браузере.
