Практические работы по информатике Димитровой О.И - HTML

ПРАКТИЧЕСКАЯ РАБОТА №11

Цель работы: Отработать включение графических файлов в HTML документы.

Задачи работы:

Овладеть методикой работы с графическими файлами с помощью команды IMG.
Получить навыки работы c атрибутом ALIGN;

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.

Требования к отчету: Итоги практической работы представить в виде файла lab11.html на диске.

персональный компьютер.

Технология работы:

Теоретическая часть:

Включение графики в web-страницу. Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:

В качестве параметра атрибута 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>:

Для того чтобы превратить интегрированное в 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. Данная строка будет выглядеть следующим образом:

После тегов <Н1> </Н1>, определяющих стиль заголовка, добавьте еще одну строку кода:

Таким образом, код данного участка нашего html-документа будет иметь следующий вид:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>

<TITLE>Mofl домашняя страничка</TITLE></HEAD>

<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1><BR>

<P ALIGN="JUSTIFY"> и т. д.

3. Создайте свою домашнюю страницу согласно образцу. Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 11.1).

Рис. 11.1. Web-страница после внесения изменений в код HTML

3. Покажите работу преподавателю.

4. Сохранить файл как lab11.txt в блокноте и как lab11.html для просмотра в браузере.