наверх






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


Сначала мы поговорим, как создавать на веб-странице "якоря", которые смогут перебросить посетителя вашего сайта на нужную вами часть страницы. После чего я расскажу вам, как создать ссылку на почту, по нажатию которой пользователь сможет написать вам письмо. Это поможет вам помочь в создании своих контактов.

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

<a href="#top">Наверх!</a>


Мы создали ссылку, якорь. Теперь нам нужно вверху страницы, после тега <body> добавить следующий тег:

<div id="top"></div>


Эти самым мы показали куда нужно переместить пользователя, который кликнет по якорю. Значение атрибута, как вы заметили, должно быть указано точно. Так же, можно вместо тега <div> использовать любой другой тег.

Так же, можно создать якорь, который перекинет посетителя сайта на часть другой страницы вашего сайта. Это делается так:

<a href="rules.html#razdel">Правила раздела</a>


rules.html - это страница, на которую мы хотим, что бы посетитель зашел.
#razdel - это якорь, который так же должен стоять на странице rules.html.

Еще есть возможность создать ссылку, по нажатию которой откроется окошко, в которой будет введен e-mail, указанный вами в коде. Либо, откроется почтовая программа, и почта будет поставлена автоматически. Делается это следующим образом:

<a href="mailto:admin@site.ru">Связаться с администрацией</a>


mailto: отвечает за то, что бы браузер принял следующую ссылку как e-mail. Поэтому то и срабатывает открытие почтовой программы или открытия окошко, в котором написан указанный e-mail.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top"></div>
Здесь содержание сайта
<a href="#top">Наверх!</a>
<a href="rules.html#razdel">Правила раздела</a>
<a href="mailto:admin@bluecode.ru">Связаться с администрацией</a>
</body>
</html>




Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.