Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

Трехкомнатная квартира новостройке центр http://dommk.ru/.

Документация - WebMoney
- HTML - основы
- Сервер - локально
- Справочник свойств CSS1

главная > документация

HTML - основы

Ссылки

Все мы знаем, что сайт состоит из множества страниц. Переходить с одной страницы на другую позволяют ссылки.
Так же у каждого сайта есть главная страница. Допустим набирая адрес http://stroimsait.h10.ru вы попадаете на главную страницу сайта, а затем уже выбрав раздел, жмете на ссылку и попадаете в нужный раздел или на нужную страницу.
Главная страница должна обязательно называться index.html. И уже с нее мы делаем ссылки на другие страницы.
Остальные страницы могут называться как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html и тд. и тп.).

Для создания ссылки используем тег <a></a>

Используем следующую конструкцию

<a href="URL">Название ссылки </a>

Рассмотрим атрибуты.

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

У атрибута HREF могут быть следующие значения:

http://... - создает ссылку на www-документ;
ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; Это делается при помощи параметров (запомните указывать эти параметры не обязательно)

?subject - Тема пиcьма
&Body- Текст вашего сообщения
&cc- Копии письма через запятую
&bcc- Скрытые копии письма через запятую

Пример:
<a href="mailto:stroimsait@front.ru?subject=Вопрос&Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net ">Мое мыло</a>

news:.. - создает ссылку на конференцию сервера новостей;
telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
wais://... - создает ссылку на WAIS - сервер;
gopher://...- создает ссылку на Gopher - сервер;

В значениях мы можем указать абсолютный путь, то есть указывается полный адрес странички (например, http://stroimsait.h10.ru) и относительный, (в качестве отправной точки используется адрес текущего документа. Например, линк <a href="stroit/title.html"> ссылка </a> будет ссылаться на файл title.html в подкаталоге stroit относительно текущего.

TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка.
Рассмотрим пока только одно значение (хотя есть и другие значения)

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

Примеры использования:

Ссылка на HTML файл
<a href="http://stroimsait.h10.ru/HTML/primer.html">Пример</a>

Ссылка на ZIP файл
<a href="http://stroimsait.h10.ru/HTML/primer.zip">Пример</a>

Ссылка на TXT файл
<a href="http://stroimsait.h10.ru/HTML/primer.txt">Пример</a>

Ссылка по протоколу ftp
<a href="ftp://ftp.cdrom.com">Пример</a>

Ссылка на e-mail
<a href="mailto:stroimsait@front.ru">Пример</a>

Ссылка на e-mail, с автоподставлением темы
<a href="mailto:stroimsait@front.ru?Subject=Teмa">Пример</a>

Ссылка на e-mail, с автоподставлением темы и текста послания
<a href="mailto:stroimsait@front.ru?Subject=Teмa &BODY=Тeкст послания">Пример</a>

Ссылка на e-mail, с автоподставлением темы, текста послания, а также адресов для отправки копии письма и скрытой копии
<a href="mailto:stroimsait@front.ru?Subject=Teмa &BODY=Тeкст послания&cc=name@domen.ru&bcc=name1234@domen.ru"> Пример</a>

Ссылка на группу новостей
<a href="news:comp.infosystems.www.announce">Пример</a>

Практика:

1) Создайте папку под названием site (ранее мы ее уже создавали, можете использовать ее).

2) Сделайте файл с названием index.html и поместим ее в папку. Это наша главная страница.

3) Сделайте еще 2 файла. С названиями me.html (тут будет изложена автобиография) и link.html (с ссылками).

4) На главной странице сделаем ссылки на 2 другие страницы (выделено красным цветом) и ссылку на e-mail (выделено синим цветом).

Итак, это нужно будет вставить в index.html.

<html>
<head>
<title> Главная страница </title>
</head>
<body>
<center>
<a href="me.html">автобиография</a> :::: <a href="link.html">ссылки</a>
</center>
<font color="#ff0000"> <h3 align ="center">Главная страница </h3> </font>
<p align ="justify"> Добрый день, усталый путник. Ты попал на личную страничку Василия Ивановича. Ну и т.д. и т.п. (придумайте сами, что ни будь)
<a href="mailto:name@domen.ru?Subject=Teмa ">Написать мне</a>
</body>
</html>

Надеюсь Вы разобрались что к чему.

5) Теперь рассмотрим файл me.html. Там будет 2 ссылки: Домой (возвращает на главную страницу) и ссылки (переносит на страницу с ссылками).

<html>
<head>
<title> Автобиография </title>
</head>
<body>
<center>
<a href="index.html">домой </a> :::: <a href="link.html">ссылки</a>
</center>
<font color="#ff0000"> <h3 align ="center">Автобиография </h3> </font>
<p align ="justify"> Я Василий Иванович родился в 1956 году, в селе Солнечное. Получил образование и поехал в Москву, где поступил в МГУ. Ну и так далее
</body>
</html>

6)Теперь рассмотрим файл link.html. Надеюсь Вы уже догадались, что эта страница будет содержать ссылки на другие Web-ресурсы. По этому путь будем указывать абсолютным, то есть указывать полный адрес (например, http://www.netscape.com). В нашем примере ссылки на другие Web-ресурсы выделены синим цветом.
P.S. Что бы ссылки на другие Web-ресурсы открывались в новом окне используем атрибут TARGET со значением _blank (выделено желтым цветом).

<html>
<head>
<title> Cсылки </title>
</head>
<body>
<center>
<a href="index.html">домой </a> :::: <a href="me.html">автобиография</a>
</center>
<font color="#ff0000"> <h3 align ="center"> Cсылки </h3> </font>
<a target="_blank" href="http://www.netscape.com">ссылка на www.netscape.com </a><br>
<a target="_blank" href="http://www.microsoft.com">ссылка на www.microsoft.com </a><br>
<a target="_blank" href="http://www.macromedia.com">ссылка на www.macromedia.com</a><br>
<a target="_blank" href="http://www.adobe.com ">ссылка на www.adobe.com </a>

</body>
</html>

Картинка в роли ссылки

Cссылкой можно сделать и любой графический файл. Для этого вместо в место названия ссылки нужно прописать графический элемент (выделен красным).

<a href="index.php" target="_blank"> <img src="http://stroimsait.narod.ru/mat.gif" width="127" height="93" alt="картинка в качестве ссылки"> </a>

А вот что получиться:

картинка в качестве ссылки

Картинка стала ссылкой. А вокруг картинки появилась рамочка. Эту рамочку можно оставить (если она Вам нравиться), а можно убрать задав параметр у картинки border="0".

<a href="index.php" target="_blank"> <img src="http://stroimsait.narod.ru/mat.gif" width="127" height="93" border="0" alt="картинка в качестве ссылки"></a>

картинка в качестве ссылки

Закладки

Иногда необходимо сделать ссылку на определенное место в тексте в том же или в другом документе. Допустим нажав сюда вы попадете в середину этой страницы.

Что бы сделать закладку нужно знать следующее:

Ссылка на закладку в том же документе имеет следующий вид:

<a href="#Имя закладки">Название раздела </a>

А так выглядит ссылка на закладку в другом документе:
<a href="Имя документа#Имя закладки">Название раздела </a>

Сама закладка будет такой:
<a name="Имя закладки" > </a>

Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку.

Пример:

Сделаем вверху страницы содержание, а чуть ниже текст.

Вставьте этот пример в html-файл и посмотрите. что вышло.

<html>
<head>
<title>Пример использования закладок </title>
</head>
<body>
<ol>
<li><a href="#1">1-я часть</a>
<li><a href="#2">2-я часть </a>
<li><a href="#3">3-я часть </a>
<li><a href="#4">4-я часть</a>
</ol>
<h4><a name="#1"> 1-я часть </a> </ h4>
<p>Из дневника канадского эмигранта...
<br>15-е августа. Вот мы и в Канаде!!! Я очарован этой страной! Здесь восхитительно! Горы так прекрасны. С нетерпением жду, когда увижу их покрытые снегом.
<br>14-е октября. КАНАДА! Это самое чудесное место на земле! Листья на деревьях пожелтели и приобрели все оттенки спектра, от красного до оранжевого. Вчера совершил увлекательную поездку за город, в сельскую местность. Вы не поверите! Видел диких оленей! На воле, они так красивы и грациозны. Поистине это самые очаровательные животные на планете. Ну просто милашки! Нет, здесь действительно рай!
<h4><a name="#2">2-я часть </a> </ h4>
<p>11-е ноября. Скоро открывается сезон охоты на оленей. Это ужасно! Не могу себе представить, что у кого-то может подняться рука на это милое, безобидное создание. Со дня на день ожидаем снег. Мне здесь нравится!
<br>2-е декабря. Наконец-то! Этой ночью выпал снег УРА!!! Проснувшись поутру, мы обнаружили очаровательную картину за окном. Все покрыто белоснежным, пушистым покрывалом. Вид как на удивительной рождественской открытке! Я восхищен! Мы с женой радостно выбежали из дому, и быстренько очистив крыльцо и парковку перед домом, мы с хохотом стали кидаться снежками (Я победил!) Внезапно снегоочиститель проехал мимо нас, завалив всю парковку снегом. Но это не расстроило нас, и я быстренько откидал снег обратно. Как здесь хорошо! Я люблю Канаду!
<h4><a name="#3">3-я часть </a> </ h4>
<p>12-е декабря. Этой ночью опять выпал снег. Снегоочиститель повторил свою выходку и завалил парковку.
<h4><a name="#4">4-я часть </a> </ h4>
<p>19-е декабря. Опять шел снег этой ночью. Я так и не смог очистить парковку и уехать на работу. Здесь, конечно, великолепно, но я уже обессилел, постоянно очищая парковку от снега. Идиотский снегоочиститель!
</body>
</html>

<< назад

главная > документация

Реклама

Простой конкурс с денежными призами!





Rambler's Top100 Рейтинг@Mail.ru