Практическое задание
Теперь мы можем внести изменения в созданную нами ранее web-страницу, воспользовавшись полученными в ходе этого занятия сведениями. Откройте подготовленный нами файл index.html в текстовом редакторе Блокнот.
В первую очередь изменим цвет фона, текста и гиперссылок. Для этого необходимо добавить атрибуты к тегу <BODY>. В качестве цвета фона можно выбрать, например, светло-коричневый ("#FCEAD4") или подобрать подходящий фон при помощи программы Adobe PhotoShop. Текст оставим черным. «Непосещенные» ссылки выделим темно-синим цветом ("#014CA1"). «Посещенные» ссылки по умолчанию оставим пурпурными.
Теперь изменим параметры шрифта текстовых абзацев. Для этого отыщите в листинге web-страницы обозначающие абзацы теги <P>, ограничьте их тегами <FONT> и </FONT>, в котором укажите гарнитуру шрифта Verdana. Кроме того, ограничим высоту символов шрифта двумя пунктами.
Трижды скопируйте получившийся шаблон web-страницы под именами italy.html, france.html и germany.html, для чего достаточно сохранить файл index.html на диске под другим именем – на первой из этих страничек мы разместим рассказ об Италии , на второй – о Франции, на третьей – о Германии.
Отредактируйте HTML-код новых файлов. Между тегами <TITLE> и </TITLE> укажите, например, Италия для страницы Italy.html. Заголовок первого уровня поменяйте на заголовок второго уровня. В качестве текста заголовка укажите: Италия. Вместо трех текстовых абзацев разместите надпись: Раздел находится в стадии разработки. Подобным же отредактируйте код страниц о Германии и Франции.
Следующая задача – соединить получившиеся странички гиперсвязями. Вернемся к HTML-коду главной страницы.
После разделительной горизонтальной черты начните новый абзац (используйте пару тегов <P> и </P>), выровняйте его по центру. При помощи тегов <FONT> и </FONT> задайте гарнитуру шрифта Verdana и высоту шрифта – 2 пункта.
В этом новом абзаце мы и организуем гиперссылки на страницы нашего сайта. Внешне это будет выглядеть примерно так, как показано на рисунке. Таким образом, данный абзац содержит наименования всех четырех страниц сайта. Гиперссылками являются только три из них, поскольку Главная – это та страница, на которой мы находимся сейчас, и нет особенного смысла в организации такой «автоссылки».
Рисунок 1 Внешний вид ссылок на странице
Итак, чтобы добиться нужного эффекта, кусочек кода с гиперссылками должен выглядеть так:
[ Главная | <A HREF="italy.html">Италия</A> | <A HREF="france.html">Франция</A> |
<A HREF="germany.html">Германия</A> ]
После окончания абзаца с гиперссылками поставьте еще одну разделительную черту (тег <HR>). Вы даже можете сделать это при помощи операции копирования, ведь мы уже вставляли горизонтальный разделитель в HTML-код на первом занятии.
Теперь сделаем Ваши фамилию и инициалы, указанные в нижней части страницы, гиперссылкой на Ваш почтовый ящик. Сделать это очень просто. Заключите фамилию и инициалы между тегами <A> и </A>, а в качестве параметра открывающего тега укажите следующее: HREF=”mailto:ivanov@mail.ru”. Только, естественно не забудьте подставить вместо адреса ivanov@mail.ru адрес своего почтового ящика.
Далее перейдем к работе со страничкой, на которой рассказывается об Италии. Скопируйте в код странички italy.html фрагмент HTML-кода из файла index.html, содержащего абзац с гиперссылками, горизонтальный разделитель и сообщение об авторских правах (это те элементы, с которыми мы работали в пунктах 5-7).
Для страницы italy.html внесите изменения в абзац с гиперссылками. Пусть слово Главная здесь является ссылкой на файл index.html, а слово Италия, напротив, не будет являться гиперссылкой.
Повторите действия, описанные в пунктах 8-9, для страниц, посвященных Франции и Германии.
Вернемся к редактированию странички italy.html. Создадим для нее некоторое содержательное наполнение, одновременно продолжая осваивать конструкции языка HTML.
В первом абзаце, вместо надписи Раздел находится в стадии разработки, укажите следующее: На этой странице вы можете ознакомиться со следующими подразделами: . Далее, создав новый абзац, перечислим подразделы документа, рассказывающего о данной стране. Между названиями будем ставить тег разрыва строки <BR>. Получим следующий HTML-код:
Географическое положение <BR>
Национальные особенности<BR>
Крупные города<BR>
Создайте абзац, содержащий первый подраздел документа (обычным образом используйте для этого теги <P> и <FONT>). В качестве текста укажите, примерно, следующее:
Италия - государство на юге Европы в центральной части Средиземноморья. Берега Италии омываются морями: на Западе Лигурийским и Тирренским, на Юге Ионическим, на Востоке Адриатическим. Около 20% границ - сухопутные, проходят преимущественно по различным частям Альп. На Севере граничит с Францией, Швейцарией, Австрией, на Северо-Востоке с Югославией. Территория Италии охватывает южные склоны Альп, Паданскую равнину, Апеннинский полуостров, острова Сицилию и Сардинию и многочисленные мелкие острова.
Перед абзацем (и его тегами) напишите выражение Географическое положение и заключите его между тегами <B> и </B>, как полужирный текст.