Изображение в качестве ссылки

Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера <a>. В примере наша картинка будет ссылаться на страницу fish.html, которая будет открываться в отдельном окне.

Пример кода:

<html>

<head>

<title>Изображение - ссылка</title>

</head>

<body>

</a>

</body>

</html>

Результат:

Теперь любая часть нашей картинки работает, как ссылка. Обратите внимание, вокруг нашего изображения появилась рамочка (она отображается не во всех браузерах, например, в Opera вы ее не увидите).

ТЕГ — <MARQUEE>

Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

Давайте заставим строку двигаться. Для этого в блокноте вставляем следующее строки:

<marquee>Бегущая строка</marquee>

Строка стала двигаться. Теперь давайте сделаем строку немного заметнее, добавив стили.

<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:

<marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.

Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:

<marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Значение down укажет строчке двигаться сверху вниз

<marquee direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Для увеличить скорости прокрутки бегущей строки используем атрибут scrollamount. В кавычках указываем число от 1. Например:

<marquee scrollamount="30" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.

Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:

<marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:

<marquee behavior="slide" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:

<marquee height="100" direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:

<marquee width="300" height="300" scrollamount="15" direction="up"style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:

<marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12"direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.

<marquee width="49%" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee><marquee width="49%" direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:

<marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.

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

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

Выполнить приведенный в тексте пример (раздаточный материал) сохранить в собственной папке на рабочем столе.

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

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

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

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

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