Лабораторная работа № 12

Тема: «HTML. Работа с изображениями и ссылками»

1. Для вставки изображений используют элемент IMG. Этот тэг закрывать нельзя и он должен содержать минимум 4 (четыре) атрибута:

• src – указывает на расположение файла и его имя;

• alt – задает описание изображения;

• width и height – задают ширину и высоту изображения в пикселах соответственно.

2. Напишите и просмотрите в броузере следующую запись:

<IMG src=”logotype.gif” alt=”” width=320 height=210>

Обратите внимание, что данная строка описывает изображение в файле «logotype.gif» без описания (alt) с размерами 320x210 пикселов.

3. Так как файл изображения «logotype.gif» в рабочей папке отсутствует, ни какого изображения на странице не отобразилось, но «зарезервировался» пустой прямоугольник с заданными размерами. Точно также будет выглядеть любая страница, содержащая изображения, при загрузке из сети Интернет в тот момент, пока файл изображения не получен броузером полностью.

4. Напишите в атрибуте alt любое описание и просмотрите изменения. Например:

alt=”Эмблема компании”

5. Попробуйте вставить на этой странице несколько изображений (папка FON в Вашем рабочем каталоге и/или файл «Ball05.jpg»). Размер каждого изображения Вы всегда можете просмотреть программой просмотра изображений ACDSee (Пуск / Программы / ACD Systems / ACDSee 32 Browser).

6. С оздадим новый HTML-документ с именем «gallery.html», который будет содержать перечень фоновых изображений для выбора пользователем. Он должен иметь вид:

и содержать:

• название страницы (в TITLE);

• заголовок в документе;

• комментарий для просмотра;

• 6 изображений фона.

7. Размер каждого изображения 180х140 пикселов. Для этого их необходимо сначала подготовить в Photoshop’е, сохранив в формат JPEG с качеством «3». Использовать можно любые из тех, которые скопировали к себе в рабочую папку в каталог «FON». Уменьшенные изображения сохраните в папку «small». Расстояние между изображениями должно быть 10 пикселов.

8. Каждое изображение должно содержать обязательные атрибуты src, alt, width и height.

9. Для указания гиперссылки используется элемент Анкер (А). Он содержит два атрибута – href (задает имя файла, на который должен осуществляться переход) и name (задает имя анкеру, для возможности перехода в любое место текущего или иного HTML-документа). Ссылкой может быть как текст, так и изображение. Примеры использования:

для текста

<P>Перейти к <A href=”00124.html”>следующему</A> документу.

В данном случае слово «следующему» будет являться гиперссылкой для перехода к документу «00124.html».

для изображения

<A href=”00124.html”><IMG src=”key_next.gif” alt=”Следующий” width=75 height=24></A>

В данном случае, переход к документу «00124.html» осуществляется нажатием на кнопку (изображение в файле «key_next.gif»).

10. Укажите для каждого маленького изображение ссылку на его оригинал. Обратите внимание, что маленькие изображения находятся в каталоге «small», а оригиналы в каталоге «fon». Если изображения, являющиеся гиперссылкой, оконтурены рамкой, то ее необходимо убрать.

11. Создайте еще один HTML-документ. Сделайте между этими двумя HTML-документами текстовые ссылки друг на друга. Например «Перейти к следующему документу» и «Вернуться к предыдущему». Обычно, переходы к следующим и предыдущим документам выполняют таким образом: гиперссылку «следующий» распологают по правому краю, а «предыдущий» – с левого.

12. Замените текстовые ссылки переходов по страницам на графические, например: