Лабораторная работа №2. Совершенствование проекта, списки, ссылки.

Внесем в созданную в Лабораторной работе №1 веб-страницу ряд изменений. Откройте подготовленный ранее файл index.html в текстовом редакторе Блокнот. В первую очередь мы можем изменить цвет фона, текста и гиперссылок в данном документе. В качестве цвета фона можно выбрать светло-коричневый, текст оставим черным, «непосещенные» ссылки выделим темно-синим цветом, а «посещенные» - красным. Внесем соответствующие поправки в запись тега < BODY> нашей веб-странички:

< BODY BGCOLOR=”#FCEAD4” TEXT=”#000000” LINK=”#014CA1” VLINK=”#FD1200” ALINK”#FD1200”>

Теперь можно изменить параметры шрифта текстовых абзацев. Для этого отыщем в листинге веб-страницы обозначающие абзацы теги < P> и ограничим каждый из этих текстовых блоков тегами < FONT> и < /FONT>, в которых укажем гарнитуру шрифта, предложив на выбор пользовательского браузера шрифты Verdana и Sans Serif. Кроме того, ограничим высоту символов шрифта тремя пунктами:

< P ALIGN=”JUSTIFY”> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> текст абзаца< /FONT>

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

< P ALIGN=”JUSTIFY”> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> Вскоре на этом сайте появятся следующие тематические разделы:

< UL TYPE=”square”>

< LI> Мои увлечения< /LI>

< LI> Мои друзья< /LI>

< LI> Мои фотографии< /LI>

< /UL> < /FONT>

Дважды скопируем получившийся шаблон веб-страницы под именами biography.html и myjob.html, для чего достаточно сохранить файл index.html на диске под другим именем – на первой из этих страничек мы разместим рассказ о себе, на второй – рассказ о своей работе. Подготовить эти странички на основе уже имеющегося в наше распоряжении html-документа необходимо самостоятельно. У нас получилось три веб-страницы, которые теперь составляют наш сайт. Ничто не мешает нам связать их гиперссылками, для чего в нижнюю часть листинга каждой из этих страниц, между надписью «Заходите на мою страничку почаще!» и разделительной чертой. Под которой расположено объявление об авторских правах, мы добавим следующий фрагмент кода:

< BR>

< HR WIDTH=”80%” SIZE=”1” COLOR=”#000000”>

<! —навигация-->

< CENTER>

< P> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> [& nbsp; < A HREF=”index.html”> Главная< /A> & nbsp; |& nbsp; < A HREF=”biography.html”> Обо мне< /A> & nbsp; |& nbsp;; < A HREF=”myjob.html”> Моя работа< /A> & nbsp; ]< /FONT>

< /CENTER>

Теперь превратим расположенное в самой нижней части страницы объявление об авторских правах в гиперссылку на наш электронный почтовый адрес:

< P ALIGN=”CENTER”> < SMALL> & copy; & nbsp; < A HREF=mailto: yoraddress@mailserver.ru? subject=Комментарии посетителей сайта> ваше имя< /A> & nbsp; 2004, All Rights Reserved. < /SMALL>

Таким образом, код Вашей веб-страницы теперь будет выглядеть следующим образом:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

< HTML>

< HEAD>

< TITLE> Моя первая веб-страничка< /TITLE>

< /HEAD>

< BODY BGCOLOR=”#FCEAD4” TEXT=”#000000” LINK=”#014CA1” VLINK=”#FD1200” ALINK”#FD1200”>

< H1 ALIGN=”CENTER”> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ! < /H1>

< P ALIGN=”JUSTIFY”> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> Спасибо Вам, уважаемый посетитель, за то, что ВЫ нашли время и возможность заглянуть на мою страничку во Всемирной Сети. Здесь Вашему вниманию будет предложена информация < EM> о моих увлечениях, моей биографии, моих друзьях, работе и семье< /EM>. В отдельной рубрике я опубликую несколько собственных фотографий. Надеюсь, они вам понравятся. < /FONT>

< P ALIGN=”JUSTIFY”> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> К сожалению, в настоящий момент моя домашняя страничка < STRONG> находится в стадии разработки< /STRONG>, поэтому еще далеко не все разделы доступны для просмотра. Я искренне надеюсь, что этот ресурс будет постоянно обновляться, и в ближайшем будущем многие из перечисленных рубрик займут свое законное место. < /FONT>

< P ALIGN=”JUSTIFY”> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> Вскоре на этом сайте появятся следующие тематические разделы:

< UL TYPE=”square”>

< LI> Мои увлечения< /LI>

< LI> Мои друзья< /LI>

< LI> Мои фотографии< /LI>

< /UL> < /FONT>

< P ALIGN=”CENTER”> ”> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> < BIG> Заходите на мою страничку почаще! < /BIG> < /FONT>

< BR>

< HR WIDTH=”80%” SIZE=”1” COLOR=”#000000”>

<! —навигация-->

< CENTER>

< P> < FONT FACE=”Verdana.Sans Serif” SIZE=”3”> [& nbsp; < A HREF=”index.html”> Главная< /A> & nbsp; |& nbsp; < A HREF=”biography.html”> Обо мне< /A> & nbsp; |& nbsp;; < A HREF=”myjob.html”> Моя работа< /A> & nbsp; ]< /FONT>

< /CENTER>

< BR>

< HR WIDTH=”80%” SIZE=”1” COLOR=”#000000”>

< P ALIGN=”CENTER”> < SMALL> & copy; & nbsp; < A HREF=mailto: yoraddress@mailserver.ru? subject=Комментарии посетителей сайта> ваше имя< /A> & nbsp; 2004, All Rights Reserved. < /SMALL>

< BR>

< /BODY>

< /HTML>

Задание:

Отладить приведенную программу в Блокноте. Ввести свой собственный адрес E-mail.