Практическая работа html №11. графика

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

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

Получить навыки работы c атрибутом ALIGN;

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

Технология работы:
Теоретическая часть:
Включение графики в web-страницу. Включение графики в html-документ осуществляется с использованием команды , синтаксис которой в общем виде записывается следующим образом:
текст
В качестве параметра атрибута 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, — совместно с тегом можно использовать и другие параметры атрибута:
ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка.
BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.
MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.
BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN=baseline удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.
В качестве параметров атрибутов WIDTH и HEIGHT указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.
Атрибут ALT содержит альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.
Пример применения тега :

Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегови , записав ее следующим образом:

Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегамии вместо текстовой строки вставляется директива . Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег , при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.
Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:

Помимо описанных атрибутов тега в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.
Выполните на компьютере:
1. С помощью любого графического редактора, позволяющего оперировать текстурными заливками, например пакета Corel Draw, подготовьте простой файл, заполненный однородной текстурой (рис. 5.13). Сохраните этот файл на диске в своей директории C:\MySite\Images под именем background.gif. Поместите в ту же папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.

Рис. 5.13. Файл bockground.gif
2. Создайте файл lab11.html дополните тегатрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:

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

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

Mofl домашняя страничка

ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!

Этоo моя фотография

и т. д.

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

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

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

Статьи к прочтению:

Практическая работа № 1. Основы HTML.

Похожие статьи: