Как сделать переход с одной страницы на другую в html. Как сделать переход с одной страницы на другую

Инструкция

Прописать ссылку на сайте можно несколькими способами. Если используется движок, зайдите на правах администратора в меню материалов. Далее выберите нужную страницу или создайте новую. Напишите текст, при нажатии на который будет осуществляться переход. Выделите его и выберите на панели инструментов значок «Добавить ссылку». Перед вами откроется форма, которую предстоит заполнить. Укажите все необходимые параметры, предусмотренные cms, задайте адрес и нажмите «Ок». Сохраните изменения и обновите страницу в окне браузера – должна появиться ссылка. Проверьте ее работоспособность, при необходимости внесите изменения.

Если необходимо создать ссылку, которая будет отображаться на всех странницах сайта, то зайдите в раздел шаблонов. Выберите команду «Редактировать html», перед вами откроется страница с кодом. До того как что-либо менять здесь, перестрахуйтесь – скопируйте информацию в безопасное место, чтобы в случае нечаянного удаления данных можно было вернуть исходный материал.

Найдите нужный блок и впишите в него ссылку в формате Текст, с которого будет осуществляться переход. Если необходимо вместо текста поставить графический файл, примените следующую связку: . Сохраните изменения и посмотрите полученный результат.

Для создания перехода в определенную часть web-страницы, сначала расставьте якоря в нужных местах сайта, присвойте им названия. Лучше задать порядковые номера – меньше времени потратите на написание ссылок. Если используете cms, выделите часть текста, нажмите «Добавить ссылку» и заполните поле «Якорь». В формате html-документа это будет выглядеть как Текст/картинка

На простых web-страницах переход на другую страницу также прописывается в коде с помощью тегов и .

Вам понадобится

  • Компьютер с подключением к интернету;
  • Установленные браузер и чат.

Инструкция

Также весьма эффективным способом раскрутки своего сайта является размещение ссылок на него в различных тематических каталогах. Интернет-каталоги – это специализированные порталы, которые представляют собой , классифицированные по отдельным тематикам и содержащие краткое описание представленных страниц. Каталоги могут быть как платными, так и бесплатными. Некоторые каталоги не требуют платы за размещение у себя ссылки на ваш сайт, но могут попросить поставить обратную ссылку на вашей странице. Стоит ли соглашаться на подобные условия или нет, целиком зависит от намерений владельца страницы.

Прекрасным способом продвижения сайта является обмен ссылками с владельцами сходных по тематике ресурсов. В этом случае вы подбираете ряд сайтов близкой тематики, договариваетесь с их администрацией и размещаете у себя на страницах ссылки на дружественные сайты. Они в ответ делают то же самое, вешая ссылку на вашу страницу.

Чтобы организовать на своем сайте автоматическое перенаправление всех посетителей на одну конкретную страницу своего или чужого интернет-ресурса, можно использовать несколько разных способов. Например, можно вставить в каждую страницу соответствующие команды на языках HTML, JavaScript или PHP. Но это потребует переделки всех страниц сайта. Есть более простой вариант - поместить соответствующую директиву в файл htaccess в корневой директории сайта.

Инструкция

Веб- Apache, найдя такой файл в папке запрашиваемой браузером посетителя , обязан выполнить записанные в него директивы, а потом продолжить обработку запроса посетителя. Ваша задача по перенаправлению будет заключаться в том, чтобы создать такой файл, поместить в него нужные директивы и на сервер своего . Первый шаг выполнения этого плана прост - откройте любой текстовый редактор (например, Блокнот) и создайте новый документ.

Второй шаг - подбор директивы, которая в большей степени соответствует вашей задаче. Если требуется перенаправлять на определенную абсолютно всех веб-серферов, запрашивающих абсолютно любую страницу вашего сайта, то следует поместить в htaccess такую команду:Redirect / осуществлять перенаправление. Слэш без указания имени папки на сервере означает, что редирект относится к документам всех папок, начиная с корневой. А путь к какой-либо папке на вашем сервере, то отправляться на указанный адрес будут только посетители, запрашивающие документы из указанной папки. Такая директива может быть записана, например, следующим образом:Redirect special/forU/ папку special.Можно отправлять на указанную страницу только веб-серферов, запрашивающих документы определенного типа. Такая директива может выглядеть так:RedirectMatch (.*).html$ Это означает, что посетители страниц с расширением html будут отправляться сервером на указанный адрес, а те, кто приходит на страницы с расширением htm, будут просматривать их обычным порядком.

Подобрав подходящий вариант редиректа и указав адреса, сохраните файл.htaccess. Обратите внимание, что у файла нет имени, а есть только расширение. Осталось реализовать третью часть плана - загрузить htaccess на сервер своего сайта. Можете сделать это с помощью файл-мененджера своего хостинг-провайдера или системы управления сайтом. А можете воспользоваться каким-либо ФТП-клентом.

Видео по теме

Источники:

  • как на сайте сделать переход

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

Инструкция

Наиболее простым способом является использование веб-браузера. Запустите приложение, после чего введите адрес интересующего вас интернет-ресурса в адресную строку либо воспользуйтесь поисковыми системами – yandex.ru или google.com. Введите часть названия сайта, которую вы помните, после чего дислоцируйте нужный вам сайт в результатах поиска и нажмите на ссылку, ведущую к нему.

В случае, если по каким-либо причинам ваш IP адрес находится в черном списке интересующего вас веб-ресурса и вы не можете зайти на него, вы можете использовать программу, подобную HideIP. Запустите приложение, после чего активируйте функцию сокрытия IP адреса. После этого совершите действия, описанные в первом шаге.

Вы также можете столкнуться с таким неудобством, как запрет провайдера либо прокси-сервера на доступ к интересующему вас веб-сайту. В этом случае вам поможет сервис анонимайзеров. С помощью этого сервиса вы сможете не только перейти на нужный вам сайт, но также скрыть факт его посещения – при посещении сайтов все адреса шифруются, и в логах остается только посещение сайта анонимайзера. Рассмотрим этот способ на примере timp.ru. Перейдите по адресу сайта, после чего введите адрес нужного вам сайта в соответствующее поле и нажмите на кнопку «Перейти».

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

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

Однако, далеко не все умеют ставить ссылку на определенную часть страницы. Это может быть очень полезно, если вы пишете большие статьи. В начале поста можно сделать оглавление, из каждой строчки которого потом сделать ссылку на часть текста как на этой же странице, так и на любой другой.

Что бы понять, что мы имеем ввиду, посмотрите оформление нашей недавней инструкции про то, . Вверху страницы как раз реализовано такое меню, в котором сделаны ссылки на определенное место страницы.

Как сделать ссылку на определенное место текущей страницы

1. Присвойте якорь части страницы

Первым пунктом вам нужно присвоить так называемый "якорь" (anchor) той части страницы, на которую пользователя должно перекидывать при нажатии на ссылку. Для этого перед текстом в этой части страницы вставьте следующий код

Текст страницы...

где вместо "anchor" вставьте любое слово, желательно подходящее по смыслу к абзацу, на который ссылаетесь.

2. Сделайте ссылку на "якорь"

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

где "anchor" замените на то слово, которое выбрали в первом пункте статьи.

Как сделать ссылку на определенную часть другой страницы

Таким же способом, который мы рассмотрели выше, можно ставить ссылки не только на часть текста на той же странице, но и на определенное место любой другой страницы. Главное, что бы у вас была возможность разместить там "якорь". Делается это следующим образом:

1. Присвойте "якорь" странице-реципиенту

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

Текст страницы...

где вместо "anchor" вы так должны вставить любое слово по вашему желанию.

2. Сделайте ссылку на anchor другой страницы

Как и в предыдущем случае, вам нужно просто поставить ссылку на созданный ранее "якорь". Разница лишь в том, что ссылаясь на часть другой страницы вам нужно добавить её URL в код, который в результате будет выглядеть следующим образом

Текст ссылки

где вместо "адрес страницы" вам нужно подставить, соответственно, URL страницы, на которую ссылаетесь, а вместо "anchor" текст, выбранный вами при создании "якоря".

В данном уроке мы поговорим о том, как сделать ссылку в HTML . Ссылки очень часто используются на сайтах, они позволяют переходить с одной страницы сайта на другую. Особенностью ссылок является то, что они могут вести не только на веб-страницу, но и на файлы, изображения и др.

Ссылки могут быть внутренние и внешние. По внутренним ссылкам осуществляется переход на страницы и файлы внутри одного сайта. Внешние ссылки ведут на сторонние сайты, документы и файлы. При этом, задаются эти виды ссылок, практически, одинаково.

Как сделать ссылку в HTML, примеры

1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: Текст ссылки.

2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:

  • _blank - загружает страницу в новом окне;
  • _self - загружает страницу в текущем окне;
  • _parent - загружает страницу во фрейм-родитель;
  • _top - отменяет все фреймы и загружает страницу в новом окне.

3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.

Пример внешней ссылки

Перейти на сайт

Перейти на сайт
Бесплатные уроки по WordPress

Пример 4. Изображения в качестве ссылок.

Пример изображения в качестве ссылки

Пример ссылки на определенное место на странице

Перейти к тексту

Текст страницы...

В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.

Скачать файл
Написать письмо

Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:

  • link — не посещенная ссылка, по умолчанию она отображается синим цветом;
  • alink — активная ссылка, по умолчанию имеет красный цвет;
  • vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.
Пример задания цвета у ссылок ...

Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про можно посмотреть в уроке, перейдя по ссылке.

Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:

Переадресация Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:
http://www.mysite.ru/
Нажмите здесь для того чтобы выполнить переход немедленно.
Приносим извинения за доставленные неудобства.

Разберём и осмыслим строчку из примера:

meta - Refresh (восстановление) указывает браузеру что данную страницу необходимо обновитьcontent="10; - обновить через заданное количество секунд (в нашем случае десять)URL=http://www.mysite/index.html" - адрес новой/другой страницы на которую следует перейти.

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.

Эффекты при переходе по ссылке

>

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

    Page-Enter - Эффект появления страницы

    Page- Exit - Эффект исчезновения страницы

В которых:

    Duration - время действия эффекта в секундах

    Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:

Номер

Описание эффекта

Номер

Описание эффекта

Прямоугольники внутрь

Растворение

Прямоугольники наружу

Вертикальная панорама внутрь

Круг внутрь

Вертикальная панорама наружу

Круг наружу

Горизонтальная панорама внутрь

Наплыв наверх

Горизонтальная панорама наружу

Наплыв вниз

Уголки влево - вниз

Наплыв вправо

Уголки влево - вверх

Наплыв влево

Уголки вправо – вниз

Вертикальные жалюзи

Уголки вправо – вверх

Горизонтальные жалюзи

Случайные горизонтальные полосы

Шажки горизонтальные

Случайные вертикальные полосы

Шажки вертикальные

Случайный выбор эффекта

Файл page1.html Эффекты перехода страниц

На заметку:

Эффекты перехода с одной страницы на другую работают не во всех браузерах.


и оценить эффект перехода от одной странице к другой.


"Перейти"

Файл page2.html Эффекты перехода страниц

На заметку:

Эффекты открытия и закрытия веб-страниц будут видны только при переходе
от одной страницы к другой или же при помощи кнопок "назад" "вперёд".
При первом открыти страницы, а также во время перезагрузки
эффекты перехода видны не будут.


Нажмите на "Перейти" чтобы перейти к следующей странице
и оценить эффект перехода от одной странице к другой.


"Перейти"

Урок 6: Покоряем html ссылки

будет выглядеть в браузере:

Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим и закрывающим тегом, будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm ) расположенные в одной папке, то код ссылки с page1 на page2 будет выглядеть так:

Т.е. надо просто написать название страницы, на которую мы хотим перейти.

Eсли страница page 2 находится в подпапке "subfolder" , код ссылки выглядит так:

Для перехода на page2 щелкни здесь!

Для перехода на page1 щелкни здесь!

Т.е. сочетание "../ " указывает как бы на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.


Раздел 1



Раздел1:


Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.

Приведу более наглядный пример:

Оглавление



Раздел 1: как стать богатым



Раздел 3: как быть здоровым

Раздел 1: как стать богатым


Для того, чтобы стать богатым необходимо очень много трудиться.....


Раздел 2: как стать счастливым



Раздел3: как быть здоровым



Вот результат в браузере:

Для того чтобы стать богатым необходимо очень много трудится.....

Раздел 2 : как стать счастливым

Для того чтобы стать счастливым, нужно использовать каждую минуту...

Раздел3: как быть здоровым

Для того чтобы быть здоровым нужно много заниматься физкультурой...

Конечно можно..

Написать письмо админу сайт

В браузере будет выглядеть:

Как вы видите, используется mailto потом двоеточие и емаил получателя. При нажатии на ссылку запустится почтовая программа-клиент с заполненным полем имени получателя.

Парочка дополнительных атрибутов:

TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank" .

Смотрите пример:


Это ссылка на сайт сайт, откроется в новом окне




Эта - тоже на сайт. При наведении появится заголовок.

Смотрите на результат:

Ну вот в принципе и всё. Можете сильно не зацикливаться, в программе Adobe Dreamweaver любая ссылка делается одним нажатием мышки. Главное для Вас, понять что к чему, а зазубривать не обязательно...

А можно ли изменить цвет ссылок?

Конечно можно. Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY .

LINK - цвет просто ссылок.

ALINK (Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK (Visited Link) - цвет уже посещенных ссылок

Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

К примеру если при открытии тела документа, элементу body прописать:


Черная ссылка