Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
создание Web-страниц.doc
Скачиваний:
30
Добавлен:
30.04.2015
Размер:
148.48 Кб
Скачать

Измените цвет фона Вашей страницы

      1. Фоновые изображения

Вы можете задавать не только стандартные цвета, но и фоновые рисунки. Фоновые узоры состоят из крошечных изображений в формате GIF, покрывающих весь фон (это похоже на наклеивание обоев). Текст и изображение, естественно, располагаются поверх фона. Например:

<BODY BACKGROUND=”BD.JPG”>

Добавьте фоновый рисунок к фону Вашей страницы.

Урок 14-15. Ссылки на Web-страницах.

Ссылаться на другие Web-страницы достаточно просто, но при этом необходимо понимать, каким образом помещать ссылки на странице, а также знать соответствующий синтаксис HTML.

Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорным тегом) это тег <А>. Затем вы задаете файл, на который ссылаетесь, а также текст ссылки. Все это завершается закрывающим тегом </а>.

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

Якорный тегURL Закрывающий якорный тег

<A HREF =http://www.mpc.com/que/>Que Publishing</A>

Ключевое слово ссылки Этот текст будет выделен

1.Создание ссылки.

Настало время поместить ссылку на вашу Web-страницу. Мы поместим на вашей странице ссылки двух различных (но похожих друг на друга) типов.

Сначала рассмотрим, как ссылаться на местные документы. Местный документ — это документ, который хранится в том же месте в Интернете, что и ваша домашняя страница. На местные документы легко ссылаться, поскольку в этом случае вам не обязательно знать полный URL — задать нужно только путь и имя файла. Затем вы научитесь ссылаться на документы, расположенные в других местах WWW, используя ту же процедуру. Для этого типа ссылок вам понадобится полный URL.

Ссылки на местные Web-страницы

Вполне вероятно, что в одном месте у вас окажется несколько HTML-документов. Допустим, у вас слишком много информации для одного документа, и вы решили разбить его на несколько HTML-файлов. В таком случае естественно поместить на главной Web-странице ссылки на каждый из этих документов, которые позволят легко и быстро на них перейти. Возможно даже, вы выполните свою главную Web-страницу в виде оглавления, ссылающегося на несколько отдельных страниц. Этот процесс относительно прост. Нужно только задать фрагменты текста, ссылающиеся на каждый конкретный HTML-файл. Таким образом, первый шаг — это определение файлов, на которые я хочу сослаться, и текстов ссылок.

Это делается так: Вводится тег <А HREF>. Тег <А> называется якорным тегом. Он применяется для ссылок на другие Web-страницы. Ключевое слово href якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про закрывающий тег </А>. Чтобы создать ссылку на Моя страница.HTM, введите следующий код:

"A HREF="Моя страница.HTM"> Моя страница </А>

Ссылки на любое место в www

Теперь настало время научиться ссылаться на HTML-документы, расположенные не на вашем Web-узле. Для таких ссылок вам понадобится полный URL документа, а не только путь и имя файла, как в предыдущих примерах. Тем не менее, ссылка выглядит так же. Вы снова обозначаете имя файла и текст ссылки тегами <А href=> и </А>. Когда вы ссылаетесь на другой HTML в Web, URL всегда начинается с HTTP://

Таким образом, браузер узнает, что искать следует документ в WWW, а не файл на вашем Web-узле. Остальная часть URL состоит из пути в Интернет к нужному узлу и имени файла документа, который вы ищете.

Мне понадобится URL списка цирков Yahoo!

http://www.yahoo.com/Arts/Performing_Arts/Circuses/

В качестве текста ссылки я хочу использовать что-нибудь покороче, чем этот адрес, поэтому я наберу Список цирков Yahoo.

Теперь добавлю в документ теги <А HREF> и </А>, и вот какая получилась ссылка:

<А HREF="http: //www. yahoo. corn/Arts /Performin_Arts /Circuses /">Список Цирков Yahoo</A>

После того как ссылки помещены на странице, можно легко перемещаться с одной страницы на другую. Обратите внимание, что, когда указатель вашей мыши попадает на гипертекстовую ссылку, браузер выводит в строке состояния внизу экрана полный URL того места, на которое вы хотите перейти.

Цвет ссылки.

Вы можете изменить цвет текста ссылки на другое место в World Wide Web с помощью тега <BODY>. Например, стандартный красный цвет для текста на вашей странице устанавливается следующим тегом:

<BODY TEXT=RED>

Подобным же образом вы можете управлять цветом текста гиперссылки. В таблице перечислены три новых ключевых слова, управляющие цветом гипертекстовых ссылок на Web-странице.

Ключевые слова, управляющие цветом текста ссылок

Ключевые слова

Описание

LINK

Ключевое слово LINK= используется так же, как и слово ТЕХТ=. Когда установлено, что LINK=BLUE (или задан любой другой цвет), все ссылки, которые не использовались посетителем (на которых он не щелкал мышью), отображаются синим цветом

<BODY TEXT=RED LINK=BLUE>

VLINK

Возможно, вы заметили, что иногда цвет текста на некоторых ссылок слегка отличается от остальных. Это показывает, что данная ссылка уже была активизирована вами. Изменить цвет ссылки, на которой посетитель уже побывал (Visited Link), можно с помощью ключевого слова VLINK=. Вот как сделать, чтобы цвет такой ссылки менялся на светло-серый

<BODY TEXT=LIME LINK=AQUA VLINK=SILVER>

ALINK

Последнее, что вы можете изменить, это цвет, который приобретает текст ссылки после того, как на ней щелкнули мышью. Цвет активной ссылки (Active Link) задается ключевым словом ALINK=. При посещении кем-либо вашей страницы текст ссылки приобретает цвет, заданный словом LINK=. Но когда на ней щелкают мышью, на короткое время цвет изменяется на заданный словом ALINK=.Продолжая использовать в этом примере ядовитые цвета, изменим текст активной ссылки на ярко-желтый.

<BODY TEXT=LIME LINK=AQUA VLINK=SILVER ALINK=YELLOW>

Использование изображений для ссылок

В качестве средства ссылок на другие WWW-страницы можно использовать не только текст, но и изображения. В предыдущей главе рассказано о том, как помещать изображения на Web-страницу. Теперь вы узнаете, как сделать их ссылочными. Это означает, что, когда вы щелкаете мышью на изображении, на экран выводится другой Web-документ, ссылкой на который и служило это изображение.

Так же, как вы ссылались на другой HTML-документ с помощью текста, вы можете сослаться на него с помощью изображения. Нужно только вместо текста ссылки задать изображение. По умолчанию Web-броузеры окружают изображение-ссылку синей рамкой. Щелкнув мышью на любом месте изображения, посетители переходят на соответствующий документ. В качестве ссылок на Web-документы вы можете использовать любые виды изображений, рисунков и пиктограмм (кроме фоновых узоров).

Очень популярны также изображения-карты. В качестве изображения-карты может применяться Web-графика любого типа. Такое изображение открывает различные файлы в зависимости от того, на каком фрагменте был произведен щелчок мышью.

Ниже приводиться ссылка, что и в начале этой главы. Здесь изменено только одно ключевое слово. Вместо того чтобы между тегами ссылки ввести текст «Que Publishing», вводят HTML-код для вывода изображения. Вот этот код:

<A HREF="http://www.mcp.com/que/">

<IMG SRC="gifs/quelogo.gif" ALIGN=LEFT> </A>

Обратите внимание, якорный тег остался тем же, он ссылается на тот же узел, но вместо текста я ввел тег <img>. Вот как просто задаются графические ссылки.

Создание якоря и присвоение ему имени

Работа с якорными тегами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться. Во-вторых, введите теги <А HREF=>, указывающие на эти разделы. Вы можете вводить именные якоря в любом месте ваших Web-страниц. Каждый тег позволяет непосредственно перейти в нужное место с помощью ссылки.

Вот необходимый для этого код HTML:

<А NАМЕ="Именной якорь">Текст якоря</А>

Таким образом, мы обозначили якорным тегом имя Текст якоря. Чтобы перейти на этот тег, посетитель должен щелкнуть на флажке с именем «Именной якорь».

Задать якорь довольно легко. Во-первых, определите, какой фрагмент HTML-документа будет служить якорем.

<Н1>Я студент УрГПУ </Hl>

Затем введите тег <А NAME=>, охватывающий выбранный текст. Каждому якорю в файле с помощью ключевого слова NAME необходимо задать уникальное имя. В своей домашней странице назовите якорь словом студент. Вот соответствующий HTML-код:

<А NAME="студент">

<Hl>Я студент УрГПУ.</Hl> </A>

Теперь в начале раздела домашней страницы, содержащего информацию о профессии, установлен якорь.

Повторите те же действия для каждого фрагмента, для которого вы хотите задать якорь.

Ссылка на якорь

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

Ссылка на якорь очень напоминает стандартную WWW-ссылку. Для этого используется тег <а HREF=>. Отличие только в том, что вам надо сообщить браузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #. Для задания ссылки на раздел домашней страницы «студент» используйте следующий тег:

<А HREF="студент"> Смотри мою информацию </A>

Символ # указывает браузеру, что следует искать флажок, а не отдельный HTML-документ. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при щелчке на таком тексте вы перейдете не на другой файл или новый Web-узел, а на якорь в том же файле.

Конечно, имя, указанное в теге <А href=>, должно соответствовать имени, указанному в теге <а name=> при установке якоря.