Отправляет email-рассылки с помощью сервиса Sendsay

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
VelRoss

Статистика

462 подписчиков
-3 за неделю
←   Все выпуски   →

Tutos-web: обучение веб-технологиям. Шаг за шагом: Выпуск #8 : Урок 7. Ссылки в HTML


С НАСТУПАЮЩИМ 2009 ГОДОМ !!! До Нового года осталось 6 дней.

*Добро *пожаловать *в *рассылку*

*        *Tutos-web ! *     *
 HTML {HTML базовый} 26 декабря 2008 
Рассылка No

8

email: velross@list.ru
website : Tutos-web.Net.Ru
Ведёт рассылку : Velross

 

 

Тема выпуска : Урок 7. Ссылки в HTML

Сегодня в выпуске:

  1. Предисловие к уроку  >>>
  2. Тэг Якорь и атрибуты Href и Target  >>>
  3. Тэг Якорь и атрибут Name  >>>
  4. Примечания и полезные советы  >>>
  5. Примеры  >>>
  6. Таблица изученных тэгов  >>>
  7. В следующем выпуске  >>>

 
 

1. Предисловие к уроку

HTML использует гиперссылки, чтобы связываться с другими документами в Интернете.


1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

2. Тэг Якорь и атрибуты Href и Target

HTML использует тэг <a> (anchor-якорь), для создания ссылки на другой документ.

Якорь может указывать на любой ресурс в Интернете: HTML страницу, изображение, звуковой файл, фильм и т.д.

Синтаксис создания якоря:


 <a href="url">Текст, который будет отображен</a>

<a> тэг используется для создания якоря в ссылке, а атрибут href указывает к чему этот якорь привязан (куда необходимо идти после нажатия на ссылку), слова между открытым и закрытым тэгом будут показаны в браузере в качестве ссылки.

Этот якорь определяет ссылку на Tutos-Web.Net.Ru:


 <a href="http://tutos-web.net.ru/">Посетить Tutos-Web!</a>

Посетить Tutos-Web!

Атрибут Target (Цель)

С целевым атрибутом Вы можете определить, в каком окне будет открыт документ.

Строка ниже откроет документ в новом окне браузера:


 <a href="http://www.tutos-web.my1.ru/"
 target="_blank">Посетить Tutos-web!</a>


1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

3. Тэг Якорь и атрибут Name

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

Ниже приведен синтаксис создания имени якоря:


 <a name="Метка">Текст, который будет показан</a>

Атрибут “name” используется для создания имени якоря. Имя якоря может быть любым текстом, который Вы хотите использовать.

Строка ниже показывает использование имени якоря:


 <a name="tips">Раздел полезных советов</a>

Вы должны заметить, что имя якоря не будет каким-либо образом отображается в браузере.

Чтобы связаться непосредственно с разделом "советов" из другой веб-страницы, добавьте знак # и имя якоря в конец URL, например:


 <a href="http://www.mysite.com/html_links.html#tips">
 Перейдите к разделу полезных советов</a>

Гиперссылка на раздел полезных советов из файла "html_links.html" будет выглядеть так:


 <a href="#tips"> Перейдите к разделу полезных советов </a>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

4. Примечания и полезные советы

Всегда добавляйте косую черту в конце ссылки. Если ваша ссылка, например: href = "http://www.mysite.ru/html", то ваш браузер будет генерировать два HTTP запроса к серверу, потому что сервер будет добавлять к адресу косую черту подобно этому: href = http://www.mysite.ru/html/

Названия якорей часто используются для создания "оглавления" в начале большого документа. Каждая глава в документе снабжается именем якоря, а ссылки на каждый из этих якорей помещаются в верхней части документа.
Если браузер не может найти имя якоря, которое было определено, то он идет в начало документа. Никакой ошибки не происходит.


1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

5. Примеры

Создание гиперссылки
Этот пример показывает, каким образом можно создавать ссылки в HTML документе.


 <html>
 <body>

 <p>
 <a href="pagenext.htm">
 Данный текст</a> представляет собой ссылку на страницу в сайте.
 </p>

 <p>
 <a href="http://www.tutos-web.net.ru/">
 Данный текст</a> представляет собой ссылку на страницу в World Wide  Web.
 </p>

 </body>
 </html>


Изображение в качестве ссылки
Этот пример демонстрирует использование изображения в качестве ссылки.


 <html>
 <body>

 <p>
 Вы также можете использовать изображение как ссылку:
 <a href="page.htm">
 <img border="0" src="nextpage.gif" width="65" height="38">
 </a>
 </p>

 </body>
 </html>


Открыть ссылку в новом окне браузера
Этот пример демонстрирует, как связаться с другой страницей, чтобы при переходе по ссылке открывалось новое окно браузера.


 <html>
 <body>

 <a href="lastpage.htm" target="_blank">Последняя страница</a>

 <p>
 Если вы установите целевой атрибут ссылки на "_blank", то ссылка  откроется в новом окне.
 </p>

 </body>
 </html>


Создание закладки в странице
Этот пример демонстрирует, как использовать ссылку, чтобы перейти к другой части документа. (Сохраните его как link.html)


 <html>
 <body>

 <p>
 <a href="#G4">См. Также Главу 4.</a>
 </p>

 <h2>Глава 1</h2>
 <p>Эта глава объясняет ля ля ля</p>

 <h2>Глава 2</h2>
 <p> Эта глава объясняет ля ля ля </p>

 <h2>Глава 3</h2>
 <p> Эта глава объясняет ля ля ля </p>

 <h2><a name="G4"> Глава 4</a></h2>
 <p> Эта глава объясняет ля ля ля </p>

 <h2>Глава 5</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>
 <h2> Глава 11</h2>
 <p> Эта глава объясняет ля ля ля </p>
 <h2> Глава 12</h2>
 <p> Эта глава объясняет ля ля ля </p>
 <h2> Глава 13</h2>
 <p> Эта глава объясняет ля ля ля </p>
 <h2> Глава 14</h2>
 <p> Эта глава объясняет ля ля ля </p>
 <h2> Глава 15</h2>
 <p> Эта глава объясняет ля ля ля </p>
 <h2> Глава 16</h2>
 <p> Эта глава объясняет ля ля ля </p>
 <h2> Глава 17</h2>
 <p> Эта глава объясняет ля ля ля </p>

 </body>
 </html>


Создание ссылки электронной почты
Этот пример демонстрирует, как сделать ссылку на сообщение (будет работать только если у вас установлена почтовая программа).


 <html>

 <body>

 <p>
 Это почтовая ссылка:
 <a  href="mailto:velross@list.ru?subject=Мнение%20о%20номере%20рассылки">
 Отправить письмо</a>
 </p>

 <p>
 <b>Примечание:</b> пробелы между словами должны быть заменены на %20, чтобы <b> гарантировать:</b>,правильное отображение текста браузером.
 </p>

 </body>
 </html>


Создание ссылки электронной почты 2
Этот пример демонстрирует, как сделать более сложную почтовую ссылку.

 <html>
 <body>

 <p>
 Это другая почтовая ссылка:
 <a href="mailto:pochta@pochta.ru?cc=velross2@list.ru&subject=
 Деловое%20приглашение&body=
 Здравствуйте!%20Приглашаю%20вас%20на%20">Отправить письмо!</a>
 </p>

 <p>
 <b> Примечание:</b> пробелы между словами должны быть заменены на  %20, чтобы <b> гарантировать:</b>,правильное отображение текста  браузером.
 </p>

 </body>
 </html>

1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

6. Таблица изученных тэгов


Тэг ссылки

Тэг

Описание

<a>

Определяет якорь

1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

7. В следующем выпуске (30 дек. 08)

В последнем уроке уходящего года мы узнаем о:

  • вертикальных и горизонтальных фреймах
  • о тэгах frameset и frame
  • и кое-что ещё

Также вас ожидают следующие выпуски:

  1. 28 декабря - СпецВыпуск "ЧаВо" (1 раз в 10 дней);
  2. 29 декабря - СпецВыпуск "Полезные ресурсы Интернет" (1 раз в 30 дней);
  3. 31 декабря - Внеплановый выпуск "Некоторые итоги изученного".
1 | 2 | 3 | 4 | 5 | 6 | 7 | Наверх

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

Ог Мондино , "Ключ к лучшей жизни ".

 
  Шаблон для рассылки был взят с сайта www.woweb.ru

tutos-web © 2008

В избранное