- •Методические указания
- •Порядок выполнения работы
- •Практическая работа № 2 «Создание и форматирование таблиц в html - документе»
- •Общие сведения
- •Порядок выполнения работы
- •Практическая работа № 3 «Создание и редактирование гиперссылок в html - документе»
- •Общие сведения
- •Порядок выполнения работы
- •Практическая работа № 4 «Управление цветами и изображениями в html-документе»
- •Общие сведения
- •Порядок выполнения работы
Практическая работа № 4 «Управление цветами и изображениями в html-документе»
Цель работы: ознакомление с основами языка HTML, получение практических навыков по использованию цветов и встраиваемых изображений в HTML-документе.
Общие сведения
Для улучшения восприятия содержания HTML-страницы используется цветовое выделение фрагментов текста или всего документа в целом.
Значение цвета определяется как шестнадцатеричный RGB-триплет. Каждый базовый цвет (красный, зеленый и синий) кодируется одним байтом, результирующий цвет определяется программой просмотра как совокупность всех трех байт.
Примеры кодирования цветов:
Black=«#000000»; Green=«#00FF00»; White=«#FFFFFF»;
Yellow=«#FFFF00»; Red=«#FF0000»; Blue=«#0000FF».
Для управления цветами в документе используются следующие атрибуты тега <BODY>:
BGCOLOR - устанавливает цвет фона документа;
TEXT - устанавливает цвет текста в документе;
LINK - устанавливает цвет для всех непосещенных ссылок;
VLINK - устанавливает цвет для всех посещенных ссылок;
ALINK - устанавливает цвет активной ссылки, т. е. той, которую в настоящий момент выбирает пользователь.
Пример 1
<BODY BGCOLOR=White TEXT=Black LINK=Blue VLINK=Green ALINK=Red>
Язык HTML позволяет задавать в качестве фона документа не однородный цвет, а некоторую картинку, которая хранится в отдельном графическом файле. Атрибут BACKGROUND определяет местоположение файла (на диске или URL) с изображением, которое будет использоваться как фон.
Пример 2
<BODY BACKGROUND=pattern.gif>
Для ячеек <TH> и <TD> таблицы атрибут BGCOLOR устанавливает фоновый цвет ячейки. Он имеет такой же синтаксис, как и атрибут BGCOLOR тега <BODY>. Если не задан цвет фона ячейки, то по умолчанию используется установка атрибута BGCOLOR для тега <TABLE> или для соответствующего тега <TR>.
Атрибут COLOR тега <FONT> позволяет установить текущий цвет текста в документе.
Кроме использования простейших цветов и картинок для закраски фона элементов, HTML-страницы могут содержать тег <IMG>, который используется, чтобы включить в HTML-документ встроенную графику (обычно иконки или маленькие картинки).
Пример 3
<IMG SRC=canyon.gif>
IMG-элементы поддерживают следующие атрибуты:
SRC - требуется для каждого IMG-тега. Атрибут определяет адрес источника изображения, например GIF- или JPEG-файл изображения. Если программа просмотра не может отобразить картинку, то можно предусмотреть ввод альтернативного текста с помощью атрибута ALT; этот текст будет отображаться вместо графического изображения.
ALIGN - определяет положение изображения относительно текущей текстовой строки, в которую оно вставляется:
ALIGN=Top —выравнивает верхнюю часть изображения с верхней частью текущей текстовой строки;
ALIGN=Middle —выравнивает середину изображения с серединой текущей текстовой строки;
ALIGN=Bottom —(по умолчанию) выравнивает нижнюю часть изображения с текущей строкой;
ALIGN=Left (Right) —перемещает изображение к текущему левому (правому) полю, поэтому последующий текст располагается вдоль правой (левой) стороны изображения.
Если имеется любой выровненный по левой (правой) границе текст, который определяется ранее изображения, и встраиваемое изображение выравнивается по той же границе, что и текст, то изображение будет перенесено на новую строку. Если нужно вставить новое предложение ниже картинки, то для контроля текстового потока около изображения используется тег <BR> с атрибутом CLEAR.
WIGHT (HEIGHT) - определяют ширину (высоту) изображения в пикселях. Одновременная установка этих атрибутов позволяет программам просмотра резервировать экранное пространство для изображения прежде, чем оно прибудет по сети. Если размер изображения, содержащегося в графическом файле, отличается от заданного, то изображение будет соответственно растянуто (сжато).
Если IMG-тег появляется как часть компоновки гипертекста, программа просмотра будет указывать это, выводя цветную границу (обычно синюю) вокруг изображения. Атрибут BORDER может использоваться, чтобы установить ширину этой границы в пикселях. Используйте border=0, чтобы подавить границу вообще.
HSPACE (VSPACE) - используются, чтобы задать пустое пространство непосредственно слева и справа (выше и ниже) от изображения. Атрибут HSPACE устанавливает ширину незаполненного пространства в пикселях. Атрибут VSPACE устанавливает высоту такого пространства в пикселях. Значение по умолчанию незначительно отличается от нуля.
HTML позволяет связывать с рисунками различные документы. Например:
<A HREF=jjj.htm><IMG SRC=ggg.gif></A>
Здесь ggg.gif —изображение, нажав на которое мышью можно перейти к документу jjj.htm.
USEMAP - используется, чтобы задать URL-адрес, связанный с некоторым фрагментом карты изображения, который определяется пользователем с помощью тега <MAP>.
Пример перехода к разным файлам по щелчку на разных частях картинки:
<IMG SRC=kkk.jpg USEMAP=#map>
<MAP NAME=map>
<AREA HREF=m.htm ALT=hhhhh SHARE=rect COORDS=0,0,50,75>
<AREA HREF=s.htm ALT=kkkkk SHARE=rect COORDS=50,0,100,75>
</MAP>
ISMAP - рассматривает картинку как image map (карта изображения). Image map —графическая карта, необходимая для перехода от одного информационного ресурса к другому. Когда тег <IMG> используется для гипертекстовой ссылки и пользователь щелкает на изображении, атрибут вызывает передачу на станцию координат этого места.
Тег <MAP> позволяет определять карты изображения пользователя. MAP-элементы содержат один или больше элементов AREA, которые определяют некоторые области на изображении и связывают эти области с URL-адресами. Имеется простой пример, где картинка navbar.gif разделена на 3 области, при щелчках на которых осуществляется переход на разные документы:
<IMG SRC=avbar.gif BORDER=0 USEMAP=#map1>
<MAP NAME=map1>
<AREA HREF=guide.htm ALT="Guide" SHAPE=rect COORDS=0,0,118,28>
<AREA HREF=search.htm ALT="Search" SHAPE=rect COORDS=184,0,276,28>
<AREA HREF=top10.htm ALT="TopTen" SHAPE=rect COORDS=276,0,373,28>
</MAP>
Тег <MAP> имеет один атрибут NAME, который используется чтобы связать имя c картой. Эта связь затем используется атрибутом USEMAP тега <IMG>, чтобы сослаться на карту через URL-адрес.
Тег <AREA> задает чувствительную к перемещению мыши область изображения и использует следующие атрибуты: SHARE, COORDS, HREF, NOHREF и ALT.
Атрибут HREF указывает URL-адрес компоновки, связанной с заданной областью. Атрибут NOHREF используется для определения области, с которой не связано никаких компоновок. Атрибут ALT используется для вывода текста в строке состояния программы просмотра, когда мышь перемещается по некоторой области картинки.
Атрибуты SHAPE и COORDS определяют тип и координаты области изображения:
SHAPE=default - определяет всю область изображения
SHAPE=rect COORDS="left-x, top-y, right-x, bottom-y"
SHAPE=circle COORDS="center-x, center-y, radius"
SHAPE=poly COORDS="x1,y1, x2,y2, x3,y3,..."
где x и y ‑ координаты, которые измеряются в пикселях от левого верхнего угла изображения. Значения x и y могут вводиться как проценты ширины и высоты изображения соответственно. Например:
SHAPE=RECT COORDS="0, 0, 50%, 100%"