|
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>
Реклама
|
