верхняя
<div style="text-align:right"><a href="#down" style="line-height: 1.4; background-color: rgb(244, 204, 204);"><font size="2">вниз ↓</font></a></div>
<a name="top"></a>
нижняя
<div style="text-align:right"><a href="#top" style="line-height: 1.4; background-color: rgb(244, 204, 204);"><font size="2">наверх ↑</font></a></div>
<a name="down"></a>
Показаны сообщения с ярлыком HTML. Показать все сообщения
Показаны сообщения с ярлыком HTML. Показать все сообщения
26 июн. 2013 г.
29 апр. 2011 г.
Кнопки вперёд и назад средствами HTML
кнопка назад:
<INPUT TYPE="button" VALUE="Назад" onClick="history.go(-1);">
кнопка вперёд:
<INPUT TYPE="button" VALUE="Вперёд" onClick="history.forward()">
<INPUT TYPE="button" VALUE="Назад" onClick="history.go(-1);">
кнопка вперёд:
<INPUT TYPE="button" VALUE="Вперёд" onClick="history.forward()">
27 апр. 2011 г.
Ссылки внутри страницы, закладки, якоря
Ссылки внутри страницы
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку (якорь) в соответствующем месте и дать ей имя при помощи параметра name тега <А>, как показано в примере 1.
Пример 1. Создание внутренней ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Закладка</title>
</head>
<body>
<p><a name="top"></a></p>
<p>Друг уронил утюг в унитаз. И разбил его. Причем так разбил, что по назначению унитаз и использовать никак нельзя, ни боком, ни передом. Мгновением назад только что вот все было хорошо и вот уже дыра прямо в унитазе, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся...
<p><a href="#top">Наверх</a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Закладка</title>
</head>
<body>
<p><a name="top"></a></p>
<p>Друг уронил утюг в унитаз. И разбил его. Причем так разбил, что по назначению унитаз и использовать никак нельзя, ни боком, ни передом. Мгновением назад только что вот все было хорошо и вот уже дыра прямо в унитазе, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся...
<p><a href="#top">Наверх</a></p>
</body>
</html>
Между тегами <a name="top"> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике.
Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки (пример 2).
Пример 2. Ссылка на закладку из другой веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Закладка</title>
</head>
<body>
<p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Закладка</title>
</head>
<body>
<p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
</body>
</html>
В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.
2 нояб. 2010 г.
22 окт. 2010 г.
Эффект перекрывания z-index
CSS
HTML
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}HTML
<div id="ten_of_diamonds">
<img src="diamonds_10.gif" alt="10 of diamonds" width="70" height="96"> </div> <div id="jack_of_diamonds"> <img src="diamonds_jack.gif" alt="Jack of diamonds" width="70" height="96"> </div> <div id="queen_of_diamonds"> <img src="diamonds_queen.gif" alt="Queen of diamonds" width="70" height="96">
</div> <div id="king_of_diamonds"> <img src="diamonds_king.gif" alt="King of diamonds" width="70" height="96"> </div> <div id="ace_of_diamonds"> <img src="diamonds_ace.gif" alt="Ace of diamonds" width="70" height="96"> </div>
Эффект перекатывания картинки-ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>
12 окт. 2010 г.
Таблица безопасных цветов HTML
|