- •Тема 10
- •Гипертекстовые ссылки. Создание обычной гиперссылки.
- •Структура гиперссылок.
- •Графический файл в роли ссылки.
- •Ссылки и цвет.
- •Фильтры. Фильтры, применяемые к тексту.
- •Filter: название фильтра (параметры)
- •Цветовая гамма html-документа.
- •Изображения в html-документе.
- •Фильтры применяемые к изображению.
- •1. Создание гиперссылок.
- •2. Создание горизонтальных линии.
- •3. Создание фильтров применяемых к тексту и изображениям.
- •Тема 11: Использование html-списков. Маркированный список. Нумерованный список. Списки определений.
- •1. Использование html-списков.
- •Маркированные списки.
- •Списки определений:
- •1. Создайте Web-страницу используя Маркированные списки.
Графический файл в роли ссылки.
Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):
<A HREF="URL" target="Окно"> <img border="0" src="Рисунок" width="Ширина" height="Высота" TITLE="Подсказка”></A>
Ссылки и цвет.
Для того, чтобы при наведении на ссылку курсором и при клике на нее она меняла свой цвет, в тэг <BODY> нужно добавить еще несколько параметров.
Атрибут |
Функция |
TEXT |
Цвет текста. |
VLІNK |
Цвет гипертекстовой связи, уже посещенной прошлом. У программы просмотра есть такое свойство-она помечает другим цветом те ссылки, которые уже просмотрены. Однако с помощью вы можете принудительно поставить свой цвет. |
LІNK |
Цвет гипертекстовой связи. |
ALІNK |
Цвет активной ссылки, когда подводиться к ней курсор. |
<BODY text="black" link="blue" vlink="purple" alink="red">
Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в тэге <BODY>.
Фильтры. Фильтры, применяемые к тексту.
Фильтры можно применить не ко всем элементам HTML-документа а только тем, которые способны определять блок прямоугольного вида при интерпретации браузером и при этом сами не являются окнами. Формат записи фильтра достаточно прост и аналогичен правилам задания свойств элементов с помощью тэга <STYLE>. Запись производится в следующем виде:
Filter: название фильтра (параметры)
Браузер Internet Explorer 4.x поддерживает достаточно большое количество фильтров, широкие возможности по настройке которых представляют применение этой технологий в более выгодном свете.
Фильтр Mask -выделяет текст
Фильтр Shadow -создает тень
Фильтр DropShadow -еще один вид тени
Фильтр FlipH - переворачивает текст горизонтально
Фильтр FlipV - переворачивает текст вертикально
Фильтр Glow - сияющий текст
Фильтр Wave - волнистый текст
Фильтр Blur - размытие текста
Фильтр Mask
Выделяет текст, как будто бы Вы выделили его мышью.
Синтаксис: STYLE="filter:Mask(Color='Color')" Color - цвет выделения в шестнадцатеричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.
Пример:
<P STYLE="filter:Mask(Color='Red'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center;"> Информатика</P>
Фильтр Shadow
Создает тень текста
Синтаксис: STYLE="filter:Shadow(Color='Color', Direction='Direction')" Color - цвет тени. Direction - направление тени (от 0 до 315).
Пример: <P STYLE="filter:Shadow(Color='#000000', Direction='130'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Red;"> Информатика</P>
Фильтр DropShadow
Добавляет тень к тексту.
Синтаксис: STYLE="filter:DropShadow(Color='Color', OffX='Offx', OffY='Offy', Positive='Positive')" Color - Цвет тени OffX - Смещение тени по X OffY - Смещение тени по Y Positive - Тень слева или справа (0 или 1 соответственно)
Пример:
<P STYLE="filter:DropShadow(Color='#7FFF00',OffX='3',OffY='3',Positive='1'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Green;">
Информатика</P>
Фильтр FlipH.
Переворачивает текст горизонтально.
Синтаксис: STYLE="filter:FlipH"
Пример:
<P
STYLE="filter:FlipH; width: 200; height: 28; font-size: 16pt;
font-weight: bold; text-align: center; color: Red;">
Информатика</P>
Фильтр FlipV
Переворачивает текст вертикально.
Синтаксис: STYLE="filter:FlipV"
Пример: <P STYLE="filter:FlipV; width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Red;"> Информатика</P>
Фильтр Glow
Создает эффект сияния.
Синтаксис: STYLE="filter:Glow(Strength='Strength', Color='Color')" Strength - сила, с которой текст засияет (0-100) Color - цвет, которым текст засияет.
Пример:
<P STYLE="filter:Glow(Strength='3', Color='#FF4500'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: DarkGreen;"> Информатика</P>
Фильтр Wave
Делает текст волнистым.
Синтаксис: STYLE="filter: Wave( Freq='Freq', Add='Add', LightStrength='LightStrength', Phase='Phase', Strength='Strength')" Freq – задает количество максимумов в волне искривления объекта.
Add – определяет необходимость добавления исходного вида объекта в его отфильтрованную интерпретацию.
LightStrength – добавляет эффект трехмерности гребням волны искажения объекта. Phase – определяют фазу смещения волны (ее значение задается в процентах относительно начальной фазы, равной 0). Strength - интенсивность волн
Пример:
<P STYLE="filter:Wave(Freq='5', Add='0', LightStrength='1', Phase='2', Strength='2'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Green;">
Информатика </P>
Фильтр Blur
Размывает текст в определенную сторону.
Синтаксис: STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')" Add - умеренное или сильное размытие (соответственно 1 или 0) Direction - в какую сторону произойдет размытие (oт 0 до 315) Strength - смещение размытия
Пример: <P STYLE="filter:Blur(Add='1',Direction='30',Strength='10'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Blue;">Информатика </P>
