Сайт невозможно представить без ссылок. Ссылки осуществляют переходы с одной страницы на другую. Ссылки могут вести не только на другие страницы сайта, но также и на файл любого типа, даже если этот файл размещается на другом сайте.
Ссылка создается с помощью тега <a href="путь_к_ссылке">Название ссылки</a>.
Посмотрим, как это будет выглядеть в коде нашей страницы:
<html>
<head>
<title>Моя первая html страница</title>
</head>
<body>
<p>Morbi quis rutrum nulla. Quisque lacinia <a href="http://адрес_сайта" title="Перейти на посторонний сайт">turpis</a> nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. </p>
</body>
</html>
- target="_blank" - это имя отвечает за то, что при клике по данной ссылке она откроется в новом окне.
- target="_parent" - это имя используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются
- target="_top"- это имя используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются
- target="_self" - это имя используется для загрузки страницы в этом же фрейме, но естественно его можно по умолчанию не указывать.
Html страница, на которую переходят должна находиться в той же папке, где и главный файл. Если вы хотите остальные страницы держать в отдельной папке, вам необходимо написать следующее href="название_папки/banan.html" в теге <a>.
Теперь рассмотрим, когда вместо текста в гиперссылке будет использоваться изображение.
- Появилась папка images в которую в дальнейшем будем «класть» все изображения. Поэтому у адреса изображения в теге img следующее href="images/fruits.jpg". Это сделано для того чтобы соблюдался порядок на сервере. Поэтому приучите себя сразу хранить изображения в отдельной папке.
- Созданы 3 страницы: banan.html, apple.html и persik.html.
- У каждой страницы в теге <title> своё название для каждой страницы. <
Создано меню, чтобы можно было перейти с любой страницы на любую:
<p>Меню</p>
<ul>
<li>Банан</li>
<li>Яблоко</li>
<li><a href="persik.html" title="Польза персика">Персик</a></li>
</ul>
Вы, наверное, уже заметили в ссылках атрибут title. Этот атрибут очень важен при индексировании роботом вашего сайта. Он обязательно должен быть прописан для каждой ссылки. Данный атрибут можно увидеть при наведении на ссылку.
Ссылка к конкретному разделу страницы с помощью якоря.
Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого создается именованный якорь.
<a name="label">ссылка на именованный якорь</a>В данном примере внутри документа создается своеобразная метка, при этом именованный якорь никак не отображается в окне браузера.
Для перехода на место, которое отмечено именованным якорем, используется знак # и имя якоря в конце URL следующим образом:
<a href="page1.html#label">переход на именованный якорь </a>
Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:
<a href="#label">переход на именованный якорь </a>
<html>
<body>
<p>
<a href="page1.htm"> Этот текст </a> является ссылкой на страницу на этом Web-сайте.
</p>
<p>
<a href="http://www.tct.ru/"> Этот текст </a> является ссылкой на страницу
во Всемирной Паутине.
</p>
</body>
</html>
Сохраните файл под именем 37ahref.html
Чтобы использовать в качестве ссылки изображение требуется предварительная подготовка. В папке, где у вас будет находиться файл html, создайте папку images.
<html>
<body>
<p>
Можно также использовать в качестве ссылки изображение:
<a href="http://www.tct.ru/"> <img border="0" src="images/logo.gif" width="285" height="52"> </a>
</p>
</body>
</html>
Сохраните файл под именем 38ahref.html
<body>
<p>
<a href="#part5">Переход на часть 5.</a>
</p>
<h1>Лекция 1</h1>
<h2>Часть 1</h2>
<p>Это первая часть ... </p>
<h2> Часть 2</h2>
<p>Это вторая часть ...</p>
<h2> Часть 3</h2>
<p>Это третья часть ...</p>
<h2> Часть 4</h2>
<p>Это четвертая часть ...</p>
<h2><a name="part5"> Часть 5</a></h2>
<p>Это пятая часть ...</p>
<h2> Часть 6</h2>
<p>Это шестая часть ...</p>
<h2> Часть 7</h2>
<p>Это седьмая часть ...</p>
<h2> Часть 8</h2>
<p>Это восьмая часть ...</p>
<h2> Часть 9</h2>
<p>Это девятая часть ...</p>
<h2> Часть 10</h2>
<p>Это десятая часть ...</p>
</body>
</html>
Сохраните файл под именем 39label.html
• Главная
• Книги
• Программы
• Картинки
• Уроки
2.Создать ссылки
• Главная • Книги • Программы • Картинки • Уроки