Добавление страниц сайта с помощью HTML
Development | Комментировать запись
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
По мере разработки своего сайта вы можете захотеть добавить больше страниц. В этом мануале мы покажем, как это сделать. Чтобы добавить дополнительную страницу и сослаться на нее с домашней страницы сайта, вам нужно для начала создать новый html файл в каталоге вашего сайта.
В этом мануале вы узнаете, как добавить на сайт страницу About (при желании вы можете добавить любую другую страницу таким же способом).
Примечание: Если вы не выполняли эту серию по порядку, вы найдете инструкции по настройке нового файла HTML в руководстве Подготовка HTML-проекта.
Чтобы добавить новую страницу на свой сайт, создайте новый файл about.html и сохраните его в каталоге проекта html-practice.
Примечание: Если вы выбрали собственное имя для файла, избегайте пробелов, специальных символов (таких как !, #,%) и заглавных букв, поскольку в дальнейшем это может вызвать проблемы. Вы также должны установить расширение .html.
Затем нужно отформатировать файл, добавив информацию, которая поможет браузеру интерпретировать его содержимое. Поместите следующий фрагмент кода вверху документа:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
</head>
</html>
Если хотите, замените выделенный текст своим заголовком.
Примечание: Подробное описание этих тегов HTML вы найдете в мануале Добавление HTML-элемента <head> на веб-страницу.
Сохраните файл.
Прежде чем добавлять на эту страницу какой-либо контент, давайте посмотрим, как добавить на вашу домашнюю страницу ссылку на новую страницу.
Сначала вернитесь к файлу index.html и добавьте следующий фрагмент под подзаголовком вашего сайта и над закрывающим тегом </div>:
...
<p style="font-size: 20px; color:#1F9AFE;">
<a href="Webpage_FilePath">About this site</a>
</p>
...
Замените выделенный путь к файлу на относительный путь к вашему файлу about.html. Относительный путь определяет расположение файла относительно текущего рабочего каталога (в отличие от абсолютного пути, который определяет расположение файла относительно корневого каталога). Если вы используете текстовый редактор Visual Studio Code, вы можете скопировать относительный путь к файлу, нажав CTRL и кликнув левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по файлу и выбрав Copy Relative Path.
Обратите внимание, что мы также указали размер шрифта и цвет, используя атрибут style. Сохраните файл index.html и перезагрузите его в браузере.
Теперь у вас должна быть ссылка, которая ведет на вашу веб-страницу about.html.
Если вы получили сообщение об ошибке, убедитесь, что ваш файл находится в том же каталоге, что и файл index.html, и что в пути нет ошибок.
Теперь вы знаете, как создать новую веб-страницу и добавить ссылку на нее на домашнюю страницу сайта. Таким же образом можно создать необходимое вам количество дополнительных веб-страниц и ссылок на них. Вы также можете добавлять контент на свои новые страницы так же, как добавили его на домашнюю страницу сайта.
Tags: HTML, HTML-practice