Как сделать вторую страницу в html
Скопируйте и сохраните этот HTML-код как делали это Здесь
С единственным отличием — файл будете сохранять не с названием index.html (index.html — означает что это будет галавная страница) — а с новым названием page.html .( просто страница )
Затем заполняйте новую страницу в текстовом редакторе — блокнот.
Название Страницы
| здесь будет левое меню |
здесь будет содержимое страницы |
здесь будет правое меню |
| На вторую |
здесь будет содержимое страницы |
здесь будет правое меню |
| На главную |
здесь будет содержимое страницы |
здесь будет правое меню |
Добавление страниц сайта с помощью HTML
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
По мере разработки своего сайта вы можете захотеть добавить больше страниц. В этом мануале мы покажем, как это сделать. Чтобы добавить дополнительную страницу и сослаться на нее с домашней страницы сайта, вам нужно для начала создать новый html файл в каталоге вашего сайта.
В этом мануале вы узнаете, как добавить на сайт страницу About (при желании вы можете добавить любую другую страницу таким же способом).
Примечание: Если вы не выполняли эту серию по порядку, вы найдете инструкции по настройке нового файла HTML в руководстве Подготовка HTML-проекта.
Чтобы добавить новую страницу на свой сайт, создайте новый файл about.html и сохраните его в каталоге проекта html-practice.
Примечание: Если вы выбрали собственное имя для файла, избегайте пробелов, специальных символов (таких как !, #,%) и заглавных букв, поскольку в дальнейшем это может вызвать проблемы. Вы также должны установить расширение .html.
Затем нужно отформатировать файл, добавив информацию, которая поможет браузеру интерпретировать его содержимое. Поместите следующий фрагмент кода вверху документа:
Если хотите, замените выделенный текст своим заголовком.
Примечание: Подробное описание этих тегов HTML вы найдете в мануале Добавление HTML-элемента на веб-страницу.
Прежде чем добавлять на эту страницу какой-либо контент, давайте посмотрим, как добавить на вашу домашнюю страницу ссылку на новую страницу.
Сначала вернитесь к файлу index.html и добавьте следующий фрагмент под подзаголовком вашего сайта и над закрывающим тегом
:
Замените выделенный путь к файлу на относительный путь к вашему файлу about.html. Относительный путь определяет расположение файла относительно текущего рабочего каталога (в отличие от абсолютного пути, который определяет расположение файла относительно корневого каталога). Если вы используете текстовый редактор Visual Studio Code, вы можете скопировать относительный путь к файлу, нажав CTRL и кликнув левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по файлу и выбрав Copy Relative Path.
Обратите внимание, что мы также указали размер шрифта и цвет, используя атрибут style. Сохраните файл index.html и перезагрузите его в браузере.
Теперь у вас должна быть ссылка, которая ведет на вашу веб-страницу about.html.
Если вы получили сообщение об ошибке, убедитесь, что ваш файл находится в том же каталоге, что и файл index.html, и что в пути нет ошибок.
Теперь вы знаете, как создать новую веб-страницу и добавить ссылку на нее на домашнюю страницу сайта. Таким же образом можно создать необходимое вам количество дополнительных веб-страниц и ссылок на них. Вы также можете добавлять контент на свои новые страницы так же, как добавили его на домашнюю страницу сайта.
Как сделать вторую страницу в html
4. Вторая Web-страничка. Связь страниц
Повторение.
1. Как загрузить в WEB — браузер файл Page1.htm ?
Ответ: В меню браузера открыть команды: Файл / Открыть/ Обзор и затем найти файл Page1.htm.
2. Как поместить на страницу картинку?
Ответ: Необходимо использовать тэг и его атрибут SRC.
4. Как создать новую WEB – страницу в формате HTML?
Ответ: а) Вид /код HTML / Файл / Создать (из Блокнота), затем после создания кода страницы затем
Файл / Сохранить и Вид / Обновить.
б) Открыть Блокнот и создать в блокноте.
Затем Файл / Сохранить с расширением HTM (HTML ) и Вид / Обновить.
5. Какие вы знаете непарные тэги?
Ответ:
— конец строки и
— горизонтальная линия.
Связь страниц
Этот тэг вставляет гиперссылку с текстом “Далее” в файл PAGE1.htm для перехода на вторую страничку. Тэг удобно разместить после тэга, вставляющего изображение, и расположить его по центру. Считаем, что 2-я страничка находится в той же папке, что и первая.
Затем в файл Page2.html можно вставить гиперссылку для перехода на первую страничку “назад”
Здесь Тег — тег размещения текста по центру строки. То есть гиперссылка располагается по центру.
Ссылка на новое окно
Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется атрибут target=»_blank» тега .
Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт. В остальных случаях лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя с толку.
Так как ссылки на текущее или новое окно ничем не отличаются друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Пример 1. Создание ссылки на новое окно
Ссылки Обычная ссылка на сайт www.htmlbook.ru
Ссылка открывает новое окно на сайт www.htmlbook.ru
Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, то нет необходимости добавлять во все теги атрибут target=»_blank» . Код можно сократить, если вначале страницы добавить , как показано в примере 2.
Пример 2. Использование тега
Ссылки Ссылка откроется в новом окне
Ссылка откроется в текущем окне
Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу атрибут target=»_self» , как показано в данном примере.
Учтите, что атрибут target не является валидным для строгого .