Главная

Заказать статью

Связь с автором

Заказать сайт

Статьи

Как сделать активную ссылку

Для тех, кто ценит время:

Всемирная сеть интернет связывает между собой огромное количество документов с помощью ссылок. Если бы не было ссылок, то сеть потеряла всю суть всемирной паутины. Так как же сослаться на другой документ? Очень просто, с помощью тега a и его атрибута href.

Давайте разберем все на примере.
У нас есть папка "основы html", в которой мы имеем два файла: html-файл и картинку. Так вот создайте еще один html файл как мы делали в первом уроке, для этого откройте блокнот и вставьте туда нижеприведенный код и подпишите его sait1.html, откроем sait1 с помощью блокнота.

<html>
<head>
<title>Теперь я учусь делать ссылки на другие документы</title>
</head>

<body bgcolor="#FF0000">
<center>
<h1 align="center" style="font-size:18px; color: ffbbcc">Заголовок статьи</h1>
<font size="4">Я научусь делать ссылки на другие документы.</font> Если вы хотите поставить ссылку на совершенно другой сайт, вы должны прописать полный путь к странице, картинке или другому объекту. Если же данная страница или картинка находится непосредственно на вашем сайте, то можно прописать краткий путь.

</html>

В этом документе я лишь сменил текст и сделал картинку с нового абзаца тегом <p></p>.

Теперь давайте сделаем ссылку с sait.html на sait1.html с анкором (текст ссылки).

<html>
<head>
<title>Создание моего первого простейшего сайта с помощью html в блокноте</title>
</head>

<body bgcolor="#FF0000">
<center>
<h1 align="center" style="font-size:18px; color: ffbbcc">Заголовок статьи</h1>
<font size="4">Здесь будет расположено тело документа.</font> Все, что будет находиться в

теле документа, будет отображаться в вашем браузере. Это может быть простой текст,

картинки, видео.
А вот здесь вы можете почитать про <a href="sait1.html">создание сайта</a>

</html>

Теперь сохраните документ и запустите html страницу, у вас должна получиться ссылка с текстом "создание сайта", при нажатии на которую вы должны попасть на страницу sait1.html.

!!! А теперь все по порядку... Ссылка начинается с открывающего тега <a> и заканчивается закрывающим тегом </a>. Внутри открывающего тега <a> пишется атрибут href со значением в кавычках. Это значение и есть путь к файлу, к которому мы собираемся перейти. после чего открывающий тег <a> закрывается скобочкой. Итого на данный момент мы имеем <a href="sait1.html">. Теперь между открывающим и закрывающим тегами <a></a> пишем текст, который мы хотим видеть в виде ссылки - это и есть анкор ссылки, то есть тот текст, на который мы кликаем при переходе на другой сайт. После чего остается прописать закрывающий тег </a> и на этом все. Итого мы имеем:

<a href="sait1.html">создание сайта</a>. А выглядеть все это дело будет как на изображении. Конечно, цвет ссылки можно поменять. Кроме того, ссылкой можно сделать картинку. Но об этом чуть ниже.

Это необходимо знать.... В документе sait1.html я писал про то, что есть два способа, чтобы прописать путь в ссылке: полный и краткий. Так вот, немного поясню. Если вы ссылаетесь на другой сайт (у вас внешняя ссылка), то путь будет обязательно полным - с адресом сайта.

Пример: <a href="http://www.pr-cy.ru/tools/">Инструменты для вебмастера</a>

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

Здесь нужно понять, что корневая папка сайта - это та папка, в которой находится файл index вашего сайта. На примере моего сайта корневая папка будет http://www.baxtop.ru/ (или диск D на компьютере для сравнения), в которой находятся другие файлы и папки сайта (компьютера). Если создать в корневой папке папку для изображений, например, kartinki и в нее загрузить изображение под названием izo.jpg, то полный путь будет выглядеть так:

http://www.baxtop.ru/kartinki/izo.jpg

Краткий путь: kartinki/izo.jpg - то есть без корневой папки.

Если в корневой папке сайта baxtop.ru лежит внутренняя страница http://www.baxtop.ru/dizain.htm, то и краткая ссылка на нее будет такой:

<a href="dizain.htm">создание дизайна сайта</a>, а сама ссылка будет выглядеть так: создание дизайна сайта.

Кстати, с добавлением картинок на свой сайт будет также:

В данном уроке мы использовали краткий путь, а роль корневой папки выполняла папка "Основы html".

Создание сайта с помощью html
Как задать цвет фона в html
Добавление картинки на сайт
Изменение размера шрифта в html
Выравнивание сайта по центру
Как сделать активную ссылку
Создание таблиц в html
Объединение ячеек таблицы в html