Использование изображений в качестве якоря
Теперь, после того как Вы научились добавлять в страницу Web изображения, рассмотрим каким образом можно использовать изображение в качестве якоря на другие страницы. Далее на листинге 9 приведен пример, где это реализуется.
Листинг 9.
<HTML><HEAD>
<TITLE> Навигация с изображениями </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD"> <CENTER>
<A HREF="программа1.html">
<IMG SRC="рис2.jpg"
BORDER="1" HEIGHT="100" WIDTH="100" ALT = "ПЕРВАЯ СТРАНИЦА"> </A><BR>
<A HREF="программа2.html">
<IMG SRC="рис3.jpg"
BORDER="1" HEIGHT="100" WIDTH="100" ALT = "ВТОРАЯ СТРАНИЦА"> </A> </BODY> </HTML>
В данной программе для создания гиперссылки используются элементы A и IMG. В строке <A HREF="программа2.html"> указывается какой файл вызывается при щелчке по изображению. Само изображение задается традиционным способом :
<IMG SRC= "рис2.jpg" BORDER="1" HEIGHT="100" WIDTH="100" ALT = "ПЕРВАЯ СТРАНИЦА">.
Заметим также, что в программе используется тег <BR>, который позволяет перейти на следующую строку.
Форматирование текста с помощью тега <FONT>
Рассмотрим, как можно изменять цвет и форматирование текста страницы. В следующем фрагменте (листинг 10) приведен простой пример на эту тему.
Листинг 10.
<HTML> <HEAD><TITLE> тег FONT </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD">
<FONT COLOR ="blue" SIZE="+2" FACE="Arial">
Мы разработали</FONT><br>
<FONT COLOR ="red" SIZE="+1" FACE="Times New Roman">
этот сайт </FONT><br>
<FONT COLOR ="darkgreen" FACE="Arial Black">
для изучения </FONT><br>
<FONT COLOR ="#E04151" SIZE="-1" FACE="Arial">
языка</FONT><br>
<FONT COLOR ="#E041F2" SIZE="+5" FACE="Broadway">
<EM>HTML</EM></FONT>
</BODY> </HTML>
Здесь используется тег FONT и несколько его атрибутов. Первый из них – это атрибут COLOR, задающий цвет форматированного текста. При этом нужно либо указать цвет по названию, либо задать его шестнадцатиричный код. Вторым в примере является атрибут SIZE, используемый для изменения размера форматируемого текста. Здесь после SIZE следует указать число пунктов, на которые увеличивается размер шрифта относительно стандартного размера шрифта для данного браузера.
В текст можно ввести горизонтальные линии для разделения фрагментов текста. Для этого используется тег <HR>. Например,
<HR WIDTH=25% SIZE=1>
в текст документа включается горизонтальная линейка, длина которой составляет 25 процентов от ширины окна браузера. При этом линейка создается с новой строки. Если необходимо сделать заливку линии цветом, то следует использовать параметр COLOR:
<HR WIDTH=25% COLOR =BLACK SIZE=1>
При этом толщина линии определяется значением параметра SIZE. Далее на листинге 11 показан HTML-код страницы с использованием нескольких горизонтальных линий.
Листинг 11.
<HTML> <HEAD><TITLE> тег FONT </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD">
<FONT COLOR ="blue" SIZE="+2" FACE="Arial">
Мы разработали</FONT><br>
<HR WIDTH=100% COLOR =Blue SIZE=3>
<FONT COLOR ="red" SIZE="+1" FACE="Times New Roman">
этот сайт </FONT><br>
<HR WIDTH=25% COLOR =BLACK SIZE=3>
<FONT COLOR ="darkgreen" FACE="Arial Black">
для изучения </FONT><br>
<HR align=left WIDTH=50% COLOR =darkgreen SIZE=1>
<FONT COLOR ="#E04151" SIZE="-1" FACE="Arial">
языка</FONT><br>
<HR align=left WIDTH=75% COLOR =magenta SIZE=5>
<FONT COLOR ="#E041F2" SIZE="+5" FACE="Broadway">
<EM>HTML</EM></FONT>
<HR align=left WIDTH=100% COLOR =orange SIZE=3>
</BODY> </HTML>
В дальнейшем мы будем использовать теги div и span. Эти теги не выполняют заметных визуальных эффектов при отображении. Однако рассматриваемые теги помогают задать оформление отдельных блоков. Отличие этих тегов друг от друга заключается в переводе строки (для тега div) и отсутствии перевода (для тега span). Далее на листинге 11 приведен HTML-код страницы иллюстрирующий эти теги. На рис.7 приведен пример подчеркивающий это отличие.
Листинг 11.
<HTML> <HEAD><TITLE> Пример тегов div и span
</TITLE> </HEAD> <BODY>
<h3 align="center"> div и span </h3>
Пример тега <strong>div</strong><div>
Заголовки являются простым средством
разметки текста, а именно изменения
размера текста в зависимости от уровня заголовка.
</div>Далее приводится пример тега <strong>span</strong>
<span>Обычно используется 6 уровней заголовков
(начиная от Н1 до Н6) для выделения новых разделов
и подразделов страницы. </span>Завершение примеров
по рассматриваемым тегам.</BODY> </HTML>
Рис.7.