FAQ по HTML | Ссылки в документах HTML

Загрузка ...

Ну как, вставил фото себя любимого в свой мегакулпортал, - ай молодца, значит рулим далее к ССЫЛКАМ между пагами... Напомню там мы изучали графику в HTML. 

<теория>

Ссылка создается тэгом ссылка

Атрибуты тэга :
href="URL" URL-адрес объекта ссылки.
name="имя ссылки" Имя ссылки в документе. Используется для организации ссылок внутри одного и того же документа HTML
target Имя окна, в которое должен быть загружен документ. Может принимать значения:
  • _blank -документ будет загружен в новое окно браузера;
  • _parent -документ будет загружен в окно, которое является родительским по отношению к текущему;
  • _self -документ будет загружен в то же самое окно, где расположена ссылка;
  • _top -при использовании фреймов, документ займет все окно браузера
title Название, которое появится внизу браузера при наведении мышью на ссылку.


 Внутренние ссылки.

Допустим, ваш сайт имеет следующую структуру каталогов:

folder1
|
file.htm
folder2
|
file.htm

... index.htm


Чтобы задать ссылку на документ file.htm, находящийся в папке folder1 из документа index.htm, следует указать:
ссылка на folder1/file.htm

Чтобы задать ссылку на документ file.htm, находящийся в папке folder2 из документа index.htm, и сделать так, чтобы он открылся в новом окне браузера, следует указать:
ссылка на folder2/file.htm

Чтобы задать ссылку из документа file.htm, находящегося в папке folder1 на документ index.htm, следует указать:

ссылка на index.htm< /FONT>

В этом случае команда ../ указывает серверу перейти вниз-в родительский, относительно текущего, каталог. Соответственно, команда ../../ укажет серверу совершить два перехода вниз.

Чтобы задать ссылку на документ file.htm, находящийся в папке folder2 из документа file.htm, находящегося в папке folder1, следует указать:
ссылка на folder2/file.htm из folder1/file.htm

Ссылки в пределах одного документа.

В случае если у вас имеется большой по объему документ, то для навигации по нему бывает удобно указать ссылки внутри этого документа.
Например, ваш документ содержит три главы с оглавлением вначале.


Первая глава
Вторая глава
Третья глава


Первая глава
. . .
Содержимое первой главы
. . .

Вторая глава
. . .
Содержимое второй главы
. . .

Третья глава
. . .

Содержимое третьей главы

В этом случае, тэгом name мы задаем имя для каждой главы (chapter1, chapter2, chapter3), и ссылаемся на эти имена в начале документа. Когда посетитель щелкает мышью на ссылку, браузер автоматически прокручивает страницу на то место, где расположено соответстующее этой ссылке имя.

Внешние ссылки.

Для задания внешней ссылки, атрибуту href задается протокол, путь.
 Значения параметра атрибута href href="http://..." Ссылка на объект, который будет передаваться с использованием протокола HTTP. Может быть любым произвольным объектом. href="ftp://..." Ссылка на FTP-сервер. href="mailto:..." Ссылка на адрес электронной почты. При выборе этой ссылки, загружается почтовая программа.


<практика>

[шаг 1. как и в предыдущих уроках...откройте обычный блокнот и т.д ...]

[шаг 2. скопируйте код и сохраните его как в предыдущих занятиях, в полученном документе Вы увидите 2а вида сылок: графическую и обычную ссылки, в нижеприведённом коде подробно в коментариях описаны и определены наши ссылки]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"; <META NAME="Description" content="краткое описание сайта/страницы"> <META NAME="Keywords" content=" ключевые слова через запятую/смысловая нагрузка страницы "> <TITLE> Страничка начинающего мегакулпорталостроителя </TITLE> </HEAD> <!-- АХТУНГ: для того чтобы вставить рисунок как фон, мы убрали код фона по умолчанию--> <!--здесь приведён код установки рисунка как фон страницы--> <BODY background="images/bgrnd.gif" text="#000000" link="Red" vlink="Maroon" alink="Fuchsia" font face="Arial,'Comic Sans MS',Courier" > <basefont size="2"> <!--размер основного шрифта--> <P align=center> <!--Здесь устанавливаем тег рисунка с параметрами: width=403 align=top border=0 --> <IMG src="images/product_page_hdr1.jpg" mce_src="images/product_page_hdr1.jpg" width=403 align=top border=0> <HR ALIGN="center" SIZE="3" WIDTH="100%" color="#00ee0" NOSHADE> <H1> <font color="#127000"> Введение </font> в крокАдиловодство </H1> <H2> Определение <font size="-1"> крокАдиловодства </font> как науки!!! </H2> <P> :крокАдиловодство сегодня одна из наиболее развивающихся отраслей домашнего хозяйства. Юные крокАдиловоды, <font face="Impact"> занимающиеся своим </font> любимым делом в саду, т.е ловлей <br> порноБелочек, <BR> иногда забывают о домашних питомцах - крокАдилах, а они без присмотра иногда устраиваивают для нас настоящие сюрпризы... </P> <p> Страничка <sup> <font color="#127000"> начинающего мегакулпорталостроителя </font> </sup> занимающегося разведением породы <sub> <font color="#987555"> домашних крокАдилов... </font> </sub> </B> </p> <P> <!--Картинка-ссылка без рамки--> <A href="www.kaktus.com" mce_href="www.kaktus.com"> <IMG vspace= 1; hspace= 1;height=82 alt="kaktus.com" src="images/nurd.gif" mce_src="images/nurd.gif" width=140 align=left border=0 title="ссылка-изображение"> </A> <font color="#0033cc" size=2><i> - А здесь можно почитатать полное руководство по разведению zx32RTW@ Кактусов... </i> </font> </P> <br> <br> <br> <br> <p> <a href="musicёzik.com" mce_href="musicёzik.com" title="обычная ссылка"> <!-- это и есть ссылка, выше ссылка-изображение--> Ещё есть хороший мануал по ухаживанию за Поющими Ёжиками... </a> <font color="#456456" size=3> - это и есть ссылка </font> </p> <HR ALIGN="center" SIZE="3" WIDTH="100%" color="#00ee0" NOSHADE> <p><br /></p> </BODY> </HTML>


<<<Графика в документах HTML | Таблицы>>>