Автоматический переход на другую страницу
Пример:
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
<html> <head><meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″><meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»> <title>Переадресация</title> </head> <body><font size=»+1″>Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br><a href=»http://www.mysite.ru/index.html»><b>http://www.mysite.ru/</b></a><br>Нажмите <a href=»http://www.mysite.ru/index.html»>здесь</a> для того чтобы выполнить переход немедленно.<br>Приносим извинения за доставленные неудобства.</font> </body></html>
Разберём и осмыслим строчку из примера:
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>meta http-equiv=»Refresh»— Refresh (восстановление) указывает браузеру что данную страницу необходимо обновитьcontent=»10;— обновить через заданное количество секунд (в нашем случае десять)URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.
Пример:
<meta http-equiv=»Refresh» content=»30″>
А вот если в заголовке RefreshURL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Эффекты при переходе по ссылке
Пример:
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=0)»> <meta http-equiv =»Page- Exit » Content=»RevealTrans(Duration=3.0, Transition=23)»>
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
В которых:
Duration— время действия эффекта в секундах
Transition— Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
Номер | Описание эффекта | Номер | Описание эффекта |
0 | Прямоугольники внутрь | Растворение | |
1 | Прямоугольники наружу | 13 | Вертикальная панорама внутрь |
2 | Круг внутрь | 14 | Вертикальная панорама наружу |
3 | Круг наружу | 15 | Горизонтальная панорама внутрь |
4 | Наплыв наверх | 16 | Горизонтальная панорама наружу |
5 | Наплыв вниз | 17 | Уголки влево — вниз |
6 | Наплыв вправо | 18 | Уголки влево — вверх |
7 | Наплыв влево | 19 | Уголки вправо – вниз |
8 | Вертикальные жалюзи | 20 | Уголки вправо – вверх |
9 | Горизонтальные жалюзи | 21 | Случайные горизонтальные полосы |
10 | Шажки горизонтальные | 22 | Случайные вертикальные полосы |
11 | Шажки вертикальные | 23 | Случайный выбор эффекта |
Пример:
Файл page1.html <html> <head><meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″><meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=12)»> <title>Эффекты перехода страниц</title> </head><body bgcolor=»#c5ffa0″> <center> <h3>На заметку:</h3> <font size=»+1″>Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br> <font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>и оценить эффект перехода от одной странице к другой.</font><br><br> <a href=»page2.html»><font size=»+2″>»Перейти»</font></a> </center> </body></html>
Файл page2.html <html> <head><meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″><meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=2.0, Transition=23)»> <title>Эффекты перехода страниц</title> </head><body bgcolor=»#c0e4ff»> <center> <h3>На заметку:</h3> <font size=»+1″>Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br> от одной страницы к другой или же при помощи кнопок «назад» «вперёд». <br> При первом открыти страницы, а также во время перезагрузки<br> эффекты перехода видны не будут.</font><hr><br> <font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br> и оценить эффект перехода от одной странице к другой.</font><br><br> <a href=»page1.html»><font size=»+2″>»Перейти»</font></a> </center> </body></html>
Ссылка на новое окно | htmlbook.ru
Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется атрибут target=»_blank» тега <a>.
Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт. В остальных случаях лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя с толку.
Так как ссылки на текущее или новое окно ничем не отличаются друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Пример 1. Создание ссылки на новое окно
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылки</title>
</head>
<body>
<p><a href="http://htmlbook.ru">Обычная ссылка на сайт www.htmlbook.ru</a></p>
<p><a href="http://htmlbook.ru" target="_blank">Ссылка
открывает новое окно на сайт www.htmlbook.ru</a></p>
</body>
</html>Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, то нет необходимости добавлять во все теги <A> атрибут target=»_blank». Код можно сократить, если вначале страницы добавить <base target=»_blank»>, как показано в примере 2.
Пример 2. Использование тега <base>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылки</title>
<base target="_blank">
</head>
<body>
<p><a href="1.html">Ссылка откроется в новом окне</a></p>
<p><a href="2.html" target="_self">Ссылка откроется в
текущем окне</a></p>
</body>
</html>Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу <a> атрибут target=»_self», как показано в данном примере.
Учтите, что атрибут target не является валидным для строгого <!DOCTYPE>.
Как сделать переход по ссылкам в HTML? — Хабр Q&A
Всем привет!Структура меню index.html выглядит вот так:
<div>
<ul>
<li>
<a href="index.html">
Menu
</a>
</li>
<li>
<a href="win.html">test1</a>
</li>
<li>
<a href="lin.html">test2</a>
</li>
<li>
<a href="ast.html">test3</a>
</li>
<li>
<a href="trav.html">test4</a>
</li>
<li>
<a href="oth.html">test5</a>
</li>
<li>
<a href="firma.com">startpage</a>
</li>
</ul>
</div> С главной страницы меня работает и ссылки открываются, при переходе на новый линк там выбираешь «Меню» (index.html) тоже все переходит. Но если выбрать другие ссылки то не переходит и пишет 404! Помогите, в чем проблема?
P.S. в на других страницах такая структура меню!
P.P.S.
Код меню ast.html
<div>
<!-- Sidebar -->
<div>
<ul>
<li>
<a href="index.html">
Menu
</a>
</li>
<li>
<a href="win.html">Windows</a>
</li>
<li>
<a href="lin.html">Linux</a>
</li>
<li>
<a href="trav.html">Traveling</a>
</li>
<li>
<a href="oth.html">Other</a>
</li>
<li>
<a href="firma.com">About</a>
</li>
</ul>
</div>Спасибо!
Ссылки в HTML • Vertex Academy
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой…и не дают уснуть вовремя 🙂
Ссылки бывают разные, но чаще всего встречаются такие:
- с одного сайта на другой
- с одной страницы на другую в рамках того же сайта
- в пределах одной страницы — с одной её части на другую
- ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.
Ссылка создаётся с помощью тега <a> (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href. Сам адрес пишется в кавычках. Между тегами <a></a> указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».
При клике на любое из слов, помещенных внутри элемента <a></a> пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.
Абсолютные и относительные ссылки
Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.
Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса, т.е. содержат протокол передачи данных (например http://), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.
Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки 🙂
Ссылка на документ в той же папке
Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html
Поскольку они соседи, то ссылка со страницы index.html может быть очень короткой и содержать просто название страницы: about.html
<!DOCTYPE HTML> <html> <head> <title>Главная</title> <meta charset=»utf-8″> </head> <body> <p>Моя первая веб-страница</p> <a href=»about.html»>Подробнее</a> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>Главная</title> <meta charset=»utf-8″> </head> <body> <p>Моя первая веб-страница</p> <a href=»about.html»>Подробнее</a> </body> </html> |
Ссылки на документ в папках уровнем ниже
Зачастую при создании сайта одним корневым каталогом дело не обходится, и создаются дополнительные папки, например для хранения изображений, видео или просто с другой темой. Создадим в нашей папке HTML_Start еще одну папку, Lessons. Эта папка будет на уровень ниже и станет дочерней по отношению к нашему корневому каталогу, а он будет родительским по отношению к ней.
В папке Lessons давайте создадим файл links.html и попробуем сослаться на него с главной страницы. Чтобы это сделать, нужно указать:
имя папки, слеш (символ /), а потом уже имя страницы:
<body> <p>Моя первая веб-страница</p> <a href=»Lessons/links.html»>Как создавать ссылки в HTML</a> </body>
<body> <p>Моя первая веб-страница</p> <a href=»Lessons/links.html»>Как создавать ссылки в HTML</a> </body> |
Если внутри папки Lessons создать еще одну папку, например HTML, то эта папка будет уже на 2 уровня ниже и станет внучатой для нашего корневого каталога, а он для неё будет прародительским. Создадим в ней файл Practice.html. Чтобы попасть с главной страницы на страницу, которая лежит во внучатой папке HTML, путь должен записываться так:
«имя дочерней папки/имя внучатой папки/имя нужной страницы«
<a href=»Lessons/HTML/Practice.html»>Упражнения</a>
<a href=»Lessons/HTML/Practice.html»>Упражнения</a> |
Ссылки на документ в папке уровнем выше
Для упрощения веб-сёрфинга полезно делать ссылки, ведущие назад, например на главную страницу. Чтобы создать ссылку на страницу в родительской папке нужно ввести две точки и слеш — это укажет на то, что файл лежит в папке уровнем выше, и потом имя самого файла. Для файла links.html, лежащего в папке Lessons синтаксис будет таким:
<a href=»../index.html»>На главную</a>
<a href=»../index.html»>На главную</a> |
а для файла Practice.html, лежащего во внучатой папке HTML, чтобы перейти назад на главную страницу в прародительском каталоге, нужно два раза указать «../«
<a href=»../../index.html»>На главную</a>
<a href=»../../index.html»>На главную</a> |
Давайте еще раз вспомним, кто кому родня:
Lessons — дочерняя папка для HTML_Start, для ссылки на файл в ней пишем
<a href=»Lessons/links.html»>Ссылки в HTML</a>
<a href=»Lessons/links.html»>Ссылки в HTML</a> |
HTML_Start является родительской папкой для папки Lessons. Чтобы вернуться на уровень выше из папки Lessons пишем
<a href=»../index.html»>На главную</a>
<a href=»../index.html»>На главную</a> |
HTML — внучатая папка для HTML_Start, чтобы сослаться на файл в ней, нужно указать также и «по батюшке»
<a href=»Lessons/HTML/practice.html»>Ссылки в HTML</a>
<a href=»Lessons/HTML/practice.html»>Ссылки в HTML</a> |
HTML_Start — прародительская папка для папки HTML, чтобы из папки HTML подняться на два уровня выше пишем:
<a href=»../../index.html»>На главную</a>
<a href=»../../index.html»>На главную</a> |
Ссылка в новом окне
По умолчанию при клике на ссылку новая страница открывается в том же окне, что и текущая. Если она ведёт на посторонний сайт, то пользователь при этом автоматически покидает ваш. Если мы хотим, чтобы наш сайт не закрывался у пользователя — можно заставить ссылку открыться в новом окне или вкладке браузера (зависит от настроек браузера).
Для этого используется атрибут target = «_blank».
Мы впервые использовали два атрибута для одного тега. Обратите внимание, что они разделяются исключительно пробелом, никаких запятых и тому подобного!
Ссылка на электронную почту
Если на сайте есть раздел типа «Свяжитесь с нами», можно создать ссылку, при клике на которую на компьютере пользователя откроется установленная у него программа электронной почты и ему останется только написать письмо.
Для этого в начале значения атрибута href ставим «mailto:» и дальше адрес электронной почты.
Ссылка на определенную часть страницы
Когда страница довольно длинная, удобно в верхней её части сделать что-то наподобие меню для навигации по странице. А также из нижних частей страницы можно вернуть посетителя наверх, чтоб ему не пришлось долго скролить обратно. Чтобы можно было так прыгать по странице, нужно отметить каждой из тех участков, на который мы хотим создать ссылку (закладку).
Отметить участок можно с помощью атрибута id. Этот атрибут можно присваивать любому элементу разметки HTML, будь то абзац, картинка, заголовок, что угодно. Для создания ссылки на этот участок значение атрибута href должно начинаться с решетки «#», после которой указываем значение атрибута id. Например <a href=»#top»></a>
Картинка в качестве ссылки
Часто бывает, что при клике на картинку мы переходим на другую страницу. Чтобы создать изображение ссылкой нужно вместо текста ссылки написать путь к имиджу. В этом примере picture.jpg лежит в той же папке, что и страница, с которой ведёт ссылка:
<a href=»links.html»><img src=»picture.jpg»></a>
<a href=»links.html»><img src=»picture.jpg»></a> |
Если картинка лежит в другой папке вашего сайта — для неё указывается относительный путь точно также, как и для файлов.
Если картинка лежит в другом месте, не у вас на сайте — указывайте абсолютный путь:
Подробнее об имиджах смотрите другую нашу статью 🙂
До встречи!