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

Журнал Начинающего ВебМастера

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

При закрытии подписчики были переданы в рассылку "Работа и отдых в Интернете" на которую и рекомендуем вам подписаться.

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

←   Сентябрь 2010   →
 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
Автор
Lord Expert

Статистика

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

Журнал Начинающего Программиста


ОСНОВЫ РАБОТЫ С HTML  
                                
Лекция 3. Гипертекстовые ссылки
 
Эта лекция посвящена способам организации связей между ресурсами с помощью
гипертекстовых ссылок. Рассматриваются способы разбивки окна браузера на несколько
независимых частей.
 
Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их
записи используется тег  <a> , который называют «якорь» (аnchor).
 
Создание гиперссылок

Этот пример показывает, как создавать ссылки в документе HTML.
<html>
<body>
 
<p>
<a href="page1.htm">
Этот текст</a> является ссылкой на страницу на
этом Web-сайте.
</p>
 
<p>
<a href="http://nextexpert.ru/">
Этот текст </a> является ссылкой на страницу 
во Всемирной Паутине.
</p>
 
</body>
</html>
 
Изображение в качестве ссылки

Этот пример показывает, как использовать в качестве ссылки изображение.
<html>
<body>
<p>
Можно также использовать в качестве ссылки изображение:
<a href="http://nextexpert.ru/">
<img border="0" src="logo.gif" width="285" height="52">
</a>
</p>
 
</body>
</html>
 
 
  
Описание тега гипертекстовой ссылки

Якорь (аnchor) позволяет устанавливать связь с любыми ресурсами во Всемирной Сети: другую
страницу HTML, изображение, звуковой файл, видеоклип, и т.д.
Синтаксис тега гипертекстовой ссылки:
<a href="url">текст ссылки</a>
 
При помощи атрибута href передается адрес документа, на который указывает ссылка.
<a href="http://nextexpert.ru/">Добро пожаловать!</a>
 
Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка
имеет следующий вид:  href="http://nextexpert.ru/help" , то будет создано два запроса HTTP к
серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следующего вида:
href="http://nextexpert.ru/help/" . При этом вызове обращение обычно происходит к
странице index.htm внутри папки help или к другому файлу – это зависит от настроек web-
сервера.
С помощью данного атрибута можно задавать ссылки не только по протоколу HTTP, но и по
другим:
∙     http://...  - создает ссылку на www-документ;
∙     ftp://...  - создает ссылку на ftp-сайт или расположенный на нем файл;
∙     mailto:...  - запускает почтовую программу-клиент с заполненным полем имени
получателя. Если после адреса поставить знак вопроса, то можно указать
дополнительные атрибуты, разделенные знаком "&";
∙     news:..  - создает ссылку на конференцию сервера новостей;
∙     telnet://...  - создает ссылку на telnet-сессию с удаленной машиной;
∙     wais://...  - создает ссылку на WAIS - сервер;
∙     gopher://...  - создает ссылку на Gopher - сервер;
 
С помощью атрибута target можно определить, где будет открыт документ, на который указывает
ссылка. В качестве значения необходимо задать либо имя одного из существующих фреймов,
либо одно из следующих зарезервированных имен:
∙     _self  - указывает, что определенный в параметре href документ должен отображаться в
текущем фрейме;
∙     _parent  - указывает, что документ должен отображаться во фрейме-родителе текущего
фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий
текущий фрейм;
∙     _top  - указывает, что документ должен отображаться в окне-родителе всей текущей
фрэймовой структуры;
∙     _blank  - указывает, что документ должен отображаться в новом окне.
 
<html>
<body>
<a href="http://nextexpert.ru/" target="_blank">Добро пожаловать!</a>
<a href="http://nextexpert.ru/" target="_parent">Добро пожаловать!</a>
<a href="http://nextexpert.ru/" target="_top">Добро пожаловать!</a>
<a href="http://nextexpert.ru/" target="_self">Добро пожаловать!</a>
</body>
</html>
  
Для перехода внутри страницы к конкретному разделу используют атрибут name тега
гипертекстовой ссылки a, при помощи которого создается именованный якорь.
<a name="label">ссылка на именованный якорь</a>
 
В данном примере внутри документа создается своеобразная метка, при этом именованный якорь
никак не отображается в окне браузера.
Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря
в конце URL следующим образом:
<a href="page1.html#label">переход на именованный якорь </a>
 
Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:
<a href="#label">переход на именованный якорь </a>
 
Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то
переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.
 
Дополнительные примеры

Открытие ссылки в новом окне браузера
 
Этот пример показывает, как открыть ссылку на другую страницу в новом окне, чтобы
посетителю не нужно было покидать ваш Web-сайт.
<html>
<body>
 
<a href="lastpage.htm" target="_blank">Последняя страница</a> 
 
<p>
Если задать атрибут target ссылки как "_blank",
то ссылка будет открыта в новом окне.
</p>
 
</body>
</html>
 
Ссылка в определенное место на той же странице

Этот пример показывает, как использовать ссылку на другую часть документа.
<html>
<body>
 
<p>
<a href="#part5">Переход на часть 8.</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>
 
Создание ссылки mailto

Этот пример показывает, как соединиться с сообщением mail (будет работать только, если
установлена служба mail).

<html>
<body>
  <p>
Это ссылка на почтовые адреса:
<a
href="mailto:info@nextexpert.ru?subject=Тест
овый%20запрос!">
отправить запрос</a>
</p>
  <p>При помощи этой ссылки отправляется письмо по адресу электронной почты
info@nextexpert.ru. Для корректной обработки заголовка письма необходимо пробелы
заменять на %20.</p>
  </body>
</html>


Фреймы HTML

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

Этот пример показывает, как создать набор вертикальных фреймов с тремя различными
документами.
<html>
 
<frameset cols="50%,25%,25%">
 
<frame src="frame_1.htm">
<frame src="frame_2.htm">
<frame src="frame_3.htm">
 
</frameset>
 
</html>
 
Набор горизонтальных фреймов

Этот пример показывает, как создать набор горизонтальных фреймов с тремя различными
документами.
<html>
 
<frameset rows="25%,50%,25%">
 
<frame src="frame_1.htm">
<frame src="frame_2.htm">
<frame src="frame_3.htm">
 
</frameset>
 
</html>
 
Теги для работы с фреймами
 
Тег  <frameset>  определяет, как разделить окно на фреймы. Каждый frameset определяет набор
строк или столбцов. Значения  rows/cols  указывают величину области экрана, которую будут
занимать каждая строка/столбец. Атрибут  framespacing  – определяет расстояние между
фреймами в пикселах.
Тег  <frameset>  является контейнером для всех остальных тегов фреймов. Между начальным и
конечным тэгами кроме элементов  <frame>  и  <noframe>  могут находиться другие элементы
<frameset> . То есть элемент  <frameset>  поддерживает вложенные конструкции фреймов.
Тег <frame> определяет, какой документ HTML поместить в каждый фрейм. Тег  <frame>  имеет
атрибут  noresize="noresize" , который запрещает изменять размер фрейма пользователю.
В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано
25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый
столбец помещается документ HTML "frame_1.htm", а во второй столбец помещается документ
HTML "frame_2.htm":

<frameset cols="25%,75%">
   <frame src="frame_1.htm">
   <frame src="frame_2.htm">
</frameset>
 
Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует
использовать тег  <noframes>.
 
При использовании фреймов теги  <body></body>  не используются. Однако, если добавить тег
<noframes> , содержащий некоторый текст для браузеров, которые не поддерживают фреймы,
необходимо будет поместить этот текст между тегами  <body></body> . Например,
<html>
 
<frameset cols="25%,50%,25%">
  <frame src="frame_1.htm">
  <frame src="frame_2.htm">
  <frame src="frame_3.htm">
 
<noframes>
<body>Ваш браузер не поддерживает фреймы!</body>
</noframes>
 
</frameset>
</html>
 
Горизонтальные и вертикальные фреймы

Этот пример показывает, как сделать набор фреймов с тремя документами, и как разделить их на
строки и столбцы. При этом не все границы фреймов можно передвинуть.
<html>
 
<frameset rows="50%,50%">
<frame src="frame_1.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_2.htm">
<frame src="frame_3.htm">
</frameset>
</frameset>
</html>
 
 
Фрейм навигации

Этот пример показывает, как сделать фрейм навигации. Фрейм навигации содержит список
ссылок, указывающих на второй фрейм.
<html>
 
<frameset cols="120,*">
<frame src="menu.htm">
<frame src="frame_1.htm" name="frame_1">
</frameset>
 
</html>
 
Файл с именем "menu.htm" содержит ссылки на другие документы HTML, которые будут
загружаться в frame_1.
Исходный код для ссылок:

<a href ="file_1.htm" target ="frame_1">Файл 1</a><br>
<a href ="file_2.htm" target ="frame_1">Файл 2</a><br>
<a href ="file_3.htm" target ="frame_1">Файл 3</a>
 
 
 
Встроенный фрейм

Этот пример показывает, как создать встроенный фрейм (фрейм внутри страницы HTML).
<html>
<body>
 
<iframe src="menu.html"></iframe>
 
<p>Некоторые старые браузеры не поддерживают iframes.</p>
<p>В этом случае встроенный фрейм (iframe) не будет виден.</p>
 
</body>
</html>



 2010 LORD-EXPERT     ∙ Forum   ∙ Site


В избранное