Урок 5. Маршруты

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

Для перемещения между такими страницами и нужны маршруты - это пути по которым можно найти страницу (или изображение, или файл и т.д.).

Самым простым способом организации страниц и файлов являются каталоги. Создадим внутри того каталога, где сейчас находится наша веб-страница новый каталог: devices.

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

Создадим страницу lamp.html для умной лампы и поместим её в каталог devices:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Моя умная лампа</title>
	</head>
	<body>
		<h1>Самая умная из всех ламп</h1>
		<p>Цвет лампы: <font color=red>красный</font></p>
	</body>
</html>

И немного изменим код из предыдущего урока. Мы будем пользоваться тегом <a> для перехода на другую страницу. Этот тег предназначен для создания ссылок. Самым важным его атрибутом является href - где указывается адрес ссылки, то есть адрес, куда будет направлять пользователя страницы этот текст. Например с главной страницы мы бы хотели перейти на страницу в каталоге devices с названием lamp.html, тогда значением атрибута href будет следующий маршрут (путь): «devices/lamp.html». Этим тегом оформим слово “Лампа”. И тогда получим следующий код:

<p><a href="devices/lamp.html">Лампа</a> <font color=red>выключена</font></p>

Обновлённый код основной страницы (назовём её index.html) будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Мой веб-сервер Гиккон</title>
	</head>
	<body>
		<h1>Состояние световых приборов</h1>
		<p><a href="devices/lamp.html">Лампа</a> <font color=red>выключена</font></p>
	</body>
</html>

Теперь, если открыть в браузере основную страницу index.html мы увидим ссылку на слове Лампа (будет подчёркнуто):

Если кликнуть левой кнопкой мыши по этой ссылке, то произойдёт переход на страницу лампы:

Таким образом браузер нашёл нужную страницу по указанному нами маршруту. Для того чтобы вернуться назад можно воспользоваться кнопкой “Назад” основного меню браузера. Либо непосредственно на странице ламы вывести ссылку, которая будет возвращать пользователя на главную страницу сайта.

Запомнить:

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

Предыдущий урок

Следующий урок