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

Соединяем html-страницы между собой

Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда? На страницу, которая указана в атрибуте href.

Рассмотрим наш блок меню:

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

Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.

Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: <a href=»kon/kontact.html»> (все папки указываются через / ).

Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,
<a href=»http://www.mysite.ru/kon/kontact.html»>

Нам осталось на разных html-страницах разместить разный контент.

Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.

Начнем со страницы index.html. Откройте ее в блокноте.

Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:

Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.

Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег <td> добавьте атрибут align=»center»

Шаблоны

Здесь собраны все шаблоны сайтов.

Теги <p></p> обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).

Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:

Наши контакты

Пишите нам по адресу: admin@mysite.ru

Оставьте тот, который больше понравится (с тегами <address> </address>или без них).

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

Наверно, у вас возникло два вопроса:

1. Откуда брать картинки для сайта (все эти шапки и меню)?

Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop

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

Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.

На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Урок 8: Ссылки

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

Что необходимо для создания ссылки?

Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом — и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:

Пример 1:

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

Элемент a обозначает «якорь/anchor». Атрибут href это сокращение от «hypertext reference/гипертекстовая ссылка», специфицирующий место, на которое выполняется переход по данной ссылке — обычно это internet-адрес и/или имя файла.

В примере атрибут href имеет значение «http://www.html.net», которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что»http://» всегда должно входить в состав URLов. Слова «Это ссылка на HTML.net» это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a> .

Как насчёт ссылок между моими собственными страницами?

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

Пример 2:

Если page 2 помещена в подпапку «subfolder», ссылка выглядит так:

Пример 3:

В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:

Пример 4:

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

Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).

А ссылки внутри страницы?

Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ «#».

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

Теперь можно создать ссылку на этот элемент с помощью знака «#» в атрибуте ссылки. Знак «#» сообщает браузеру, что это переход на той же самой странице. После «#» должен следовать id тэга, на который выполняется переход. Например:

Улучшение путей взаимодействия пользователя (user flow) через переходы по странице

Пост является переводом статьи «Improving User Flow Through Page Transitions» со Smashing Magazine о создании плавных переходов. Автор этой статьи, Луиджи Де Роза, является фронт-энд разработчиком в EPIC. Далее повествование будет идти от лица автора статьи. Приятного чтения.

Каждый раз, когда у пользователя возникают проблемы с опытом взаимодействия (UX), повышается шанс его ухода. Смена страниц от одной до другой часто вызывает прерывания в виде белого мерцания без содержания, вызывая долгую загрузку, или вырывая пользователя из контекста страницы, которая была открыта ранее.

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

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

Примеры

Множество мобильных приложений используют отличные переходы между видами. В этом примере ниже, который следует рекомендациям Google material design, мы видим, как анимация передает иерархические и пространственные отношения между страницами.

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

Как связать переходы между страницами

SPA фреймфорки

Перед тем, как пачкать наши руки, я должен что-нибудь сказать о фреймворках для одностраничных приложений (single-page application, SPA). Если вы используете SPA фреймворк (такой как AngularJS, Backbone.js или Ember), то создать переходы будет намного легче, потому что все пути обрабатываются JavaScript. В этом случае вам стоит обратиться к соответствующей документации, чтобы посмотреть на реализацию переходов между страницами во фреймворке на ваш выбор, потому что там, возможно, есть хорошие примеры и инструкции.

Плохой способ

Моя первая попытка создать переход между страницами выглядела примерно так:

Концепция проста: Использовать анимацию, когда пользователь покидает страницу, и другую анимацию, когда новая страницы загружается.

Однако, вскоре я заметил, что у этого решения есть ряд ограничений:

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

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

Правильный способ

Давайте взглянем на шаги, участвующие в создании простого плавного перехода между страницами правильным способом. Здесь присутствует нечто, названное pushState AJAX (или PJAX) навигацией, которая, по существу, превратит наш сайт в что-то вроде одностраничного сайта.

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

Предотвращение поведения ссылок по умолчанию

Первым шагом мы создадим обработчик события click для всех ссылок, предотвращая их от стандартного поведения и изменяя способ обработки смены страниц.

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

Получение страницы

Теперь, когда мы прервали загрузку страницы браузером, мы можем вручную получить страницу используя Fetch API. Давайте посмотрим на следующую функцию, которая получает содержимое HTML страницы при получении ее URL.

Для браузеров, которые не поддерживают Fetch API, стоит добавить полифилл, или использовать XMLHttpRequest.

Изменение текущего URL

У HTML5 есть фантастическое API, названное pushState , которое позволяет веб-сайтам обращаться и изменять историю браузера без загрузки каких-либо страниц. Ниже мы используем это для того, чтобы изменить текущий URL на URL следующей страницы. Заметьте, что это — модификация объявленного ранее обработчика click.

Как вы могли заметить, мы также добавили вызов функции changePage , на которую мы взглянем немного детальнее. Похожая функция также будет вызвана в событии popstate , которое будет наступать при изменении активной истории браузера (например, когда пользователь нажмет кнопку назад):

Таким образом, мы строим очень примитивную систему маршрутизации, в которой у нас есть активный и пассивный режимы.

Активный режим наступает тогда, когда пользователь нажимает на ссылку, и мы изменяем URL используя pushState , в то время как пассивный режим наступает при изменении URL, и мы получаем уведомление от события popstate . В любом случае, мы собираемся вызвать changePage , которая позаботится о чтении нашего нового URL и загрузке страницы.

Разбор и добавление нового содержимого

Обычно, у страниц, по которым осуществляется переход, есть такие основные элементы как header и footer. Мы будем использовать следующую DOM структуру на всех наших страницах (которая, сама по себе, является структурой Smashing Magazine):

Единственная часть, которую нам нужно изменять на каждой странице — содержимое контейнера cc . Таким образом, мы можем построить нашу функцию changePage примерно так:

Анимация!

Когда пользователь нажимает на ссылку, функция changePage получает HTML этой страницы, затем извлекает cc контейнер и добавляет его в элемент main . На данный момент у нас есть два контейнера cc на нашей странице, первый принадлежит предыдущей страницы, а второй следующей.

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

Все это лишь основы переходов по страницам!

Предостережения и ограничения

Небольшой пример, который мы только что создали, далек от идеала. По факту, мы не приняли во внимание ряд вещей:

Убедиться, что мы затронули правильные ссылки.
Перед изменением поведения ссылки, нам нужно добавить проверку, чтобы убедиться, что она должна быть изменена. Например, нам нужно игнорировать все ссылки с target=»_blank» (которое открывает страницу в новой вкладке), все ссылки на внешние домены и некоторые другие особенные случаи, такие как Control/Command + click (которые также открывают страницу в новой вкладке).
Обновление элементов за пределами главного контейнера.
В данный момент, пока страница изменяется, все элементы за пределами контейнера cc остаются прежними. Однако, некоторые из этих элементов должны быть изменены (сейчас это возможно только изменяя вручную), включая title документа, элемент меню с классом active и, потенциально, множество других зависимостей на нашем сайте.
Управление жизненным циклом JavaScript.
Сейчас наша страница ведет себя примерно также, как и SPA, в котором браузер не изменяет страницу самостоятельно. Так вот, нам нужно вручную позаботиться о жизненном цикле JavaScript, например, связывая (binding) и развязывая определенные события, выполняя плагины, включая полифиллы и сторонний код.

Браузерная поддержка

Единственное требование для этого режима навигации — pushState API, который доступен во всех современных браузерах. Этот метод работает полностью в качестве прогрессивного улучшения. Страницы по прежнему доступны обычным способом, и web-сайт продолжит нормально работать, если JavaScript отключен.

Если вы используете SPA фреймворк, подумайте над использованием PJAX навигации вместо этого, для ускорения навигации. Взамен вы получите поддержку старых браузеров и создадите более дружелюбный к SEO сайт.

Продвигаясь дальше

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

Использование кэша

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

Как вы могли догадаться, мы можем использовать более долговременный кэш с Cache API или другое постоянное хранилище на стороне пользователя (например IndexedDB).

Анимация текущей страницы

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

Используя обещания (promises), обработка таких ситуаций может показаться очень простой. Метод .all создает новое обещание, которое выполнится после того, как все обещания, переданные в виде аргументов, будут выполнены.

Предварительная загрузка следующей страницы

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

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

Как вы можете видеть, задержка между нажатием и наведением курсора обычно составляет от 200 до 300 миллисекунд. Этого времени обычно достаточно для загрузки следующей страницы.

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

Другой момент, который мы могли заметить и принять во внимание, заключается в предугадывании скорости соединения пользователя. (Возможно это станет возможно в будущем с Network Information API.)

Частичный вывод

В нашей функции loadPage мы получаем весь HTML документ, хотя нам нужен только cc контейнер. Если бы мы использовали язык на стороне сервера, мы бы могли обнаружить, приходит ли запрос от определенного пользовательского вызова AJAX и, если так, выводить только нужный контейнер. Используя Headers API мы можем отправить пользовательский HTTP заголовок в нашем запросе.

Затем, на стороне сервера (используя PHP в этом случае), мы можем определить, существует ли наш пользовательский заголовок перед выводом требуемого контейнера:

Это уменьшит размер HTTP сообщений, а также уменьшит нагрузку на сервер.

Подводя итоги

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

Таким образом родилась Barba.js — небольшая библиотека (4 KB в сжатом состоянии), которая абстрагирует всю эту сложность и предоставляет приятный, чистый и простой API для разработчиков. Она также учитывает различные взгляды и поставляется с готовыми переходами, кэшированием, предварительной загрузкой и событиями. Библиотека имеет открытый исходный код и доступна на GitHub.

Вывод

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

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

Учебник HTML для начинающих. Блочная верстка

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

Как же создать ссылку?

Как и всегда, при кодировании HTML, для этой цели используется тэг. Это простой тэг — он состоит из одного элемента «a» и одного атрибута href=»». Внутри атрибута прописывается адрес, куда ведет ссылка — href=»/».

Полностью сылка выглядит следующим образом:

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

Если нажать на ссылку в окне браузера вы попадете на сайт web-lesson.ru.

Переход между собственными страницами

Для начала необходимо создать и сохранить в папке «Мой сайт» несколько собственных документов. Назовите их index1.html, index2.html, index3.html (или как-либо иначе). Затем в первом документе поместим ссылку:

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

Если внутри вашей папки «Мой сайт» создать другую папку с названием, к примеру, «Подпапка», и разместить там документ index3.html, то ссылка приобретет следующий вид:

В обратную сторону ссылка со страницы index3 из «Подпапки» на index1 будет выглядеть так:

Конечно, всегда можно указать полный адрес файла (URL):

Переходы внутри страницы

Естественно можно создавать ссылки для перехода между элементами одной страницы. Это может потребоваться, например, для перехода между оглавлением и текстом. Все, что для этого необходимо, — использовать атрибут id и символ «#».

Атрибут id — это идентификатор. Он применяется для маркировки элемента, на который вы хотите сделать переход. Например: