Как сделать вторую страницу в html
Скопируйте и сохраните этот HTML-код как делали это Здесь
С единственным отличием — файл будете сохранять не с названием index.html (index.html — означает что это будет галавная страница) — а с новым названием page.html .( просто страница )
Затем заполняйте новую страницу в текстовом редакторе — блокнот.
<!DOCTUPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «>
<html>
<head>
<title> Название Страницы </title>
</head >
<body>
<center>
<table width=»1280″ height=»240″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»width=»1280″background=»img/header.jpg» border=»2″cellpadding=»2″ cellspacing=»2″> здесь будет шапка сайта </td>
</tr>
</table>
<table width=»1280″ height=»380″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top» width=»240″border=»2″> здесь будет левое меню </td>
<td valign=»top» width=»740″border=»2″> здесь будет содержимое страницы </td>
<td valign=»top» width=»300″border=»2″> здесь будет правое меню </td>
</tr>
</table>
<table width=»1280″ height=»80″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»> подвал страницы </td>
</tr>
</table>
Что бы соединить страницу с именем index.html с страницей с именем page.html .
Нужно на странице index.html в строке
<td valign=»top» width=»240″border=»2″> здесь будет левое меню </td>
вместо здесь будет левое меню написать ссылку на страницу page.html .
Ссылка
<a href=»page.html»> На вторую </a>
пример :
<!DOCTUPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «>
<html>
<head>
<title> Название Страницы </title>
</head >
<body>
<center>
<table width=»1280″ height=»240″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»width=»1280″background=»image/header.jpg» border=»2″cellpadding=»2″ cellspacing=»2″> здесь будет шапка сайта </td>
</tr>
</table>
<table width=»1280″ height=»380″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top» width=»240″border=»2″> <a href=»page.html»> На вторую </a> </td>
<td valign=»top» width=»740″border=»2″> здесь будет содержимое страницы </td>
<td valign=»top» width=»300″border=»2″> здесь будет правое меню </td>
</tr>
</table>
<table width=»1280″ height=»80″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»> подвал страницы </td>
</tr>
</table>
И что бы соединить вторую страницу с именем page.html с главной страницей с именем index.html
Нужно на странице page.html написать ссылку на главную .
Ссылка
<a href=»index.html»> На главную </a>
пример:
<!DOCTUPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «>
<html>
<head>
<title> Название Страницы </title>
</head >
<body>
<center>
<table width=»1280″ height=»240″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»width=»1280″background=»image/header.jpg» border=»2″cellpadding=»2″ cellspacing=»2″> здесь будет шапка сайта </td>
</tr>
</table>
<table width=»1280″ height=»380″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top» width=»240″border=»2″> <a href=»index.html»> На главную</a> </td>
<td valign=»top» width=»740″border=»2″> здесь будет содержимое страницы </td>
<td valign=»top» width=»300″border=»2″> здесь будет правое меню </td>
</tr>
</table>
<table width=»1280″ height=»80″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»> подвал страницы </td>
</tr>
</table>
Добавление страниц сайта с помощью HTML
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
По мере разработки своего сайта вы можете захотеть добавить больше страниц. В этом мануале мы покажем, как это сделать. Чтобы добавить дополнительную страницу и сослаться на нее с домашней страницы сайта, вам нужно для начала создать новый html файл в каталоге вашего сайта.
В этом мануале вы узнаете, как добавить на сайт страницу About (при желании вы можете добавить любую другую страницу таким же способом).
Примечание: Если вы не выполняли эту серию по порядку, вы найдете инструкции по настройке нового файла HTML в руководстве Подготовка HTML-проекта.
Чтобы добавить новую страницу на свой сайт, создайте новый файл about.html и сохраните его в каталоге проекта html-practice.
Примечание: Если вы выбрали собственное имя для файла, избегайте пробелов, специальных символов (таких как !, #,%) и заглавных букв, поскольку в дальнейшем это может вызвать проблемы. Вы также должны установить расширение .html.
Затем нужно отформатировать файл, добавив информацию, которая поможет браузеру интерпретировать его содержимое. Поместите следующий фрагмент кода вверху документа:
Если хотите, замените выделенный текст своим заголовком.
Примечание: Подробное описание этих тегов HTML вы найдете в мануале Добавление HTML-элемента <head> на веб-страницу.
Прежде чем добавлять на эту страницу какой-либо контент, давайте посмотрим, как добавить на вашу домашнюю страницу ссылку на новую страницу.
Сначала вернитесь к файлу index.html и добавьте следующий фрагмент под подзаголовком вашего сайта и над закрывающим тегом </div>:
.
<p style=»font-size: 20px; color:#1F9AFE;»>
<a href color: #ff0000;»>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, и что в пути нет ошибок.
Теперь вы знаете, как создать новую веб-страницу и добавить ссылку на нее на домашнюю страницу сайта. Таким же образом можно создать необходимое вам количество дополнительных веб-страниц и ссылок на них. Вы также можете добавлять контент на свои новые страницы так же, как добавили его на домашнюю страницу сайта.
Вкладки (страницы) на одной странице на html/css с помощью :target
Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:
Современные браузеры загружают содержимое только если блок виден, поэтому костыли для загрузки контента (картинок) отменяются.
Коротко: ссылка на блок делает его видимым, при том что по-умолчанию они невидимы (поэтому обратно display:none когда выделяем другие); сделать невидимым первый блок если выделен _не он_, так как по-умолчанию он виден. Собственно, это всё. Теперь реализация.
HTML. Разделим блок на 3 страницы и один на 3 вкладки, для наглядности:
Перейдём к разметке, здесь всё внезапно очень просто (но не очевидно) и валидно, никаких нестандартных изощрений:
Реализовать подобное можно разными способами, но по-моему это самый логичный — без извращений в виде представления ссылок кнопками, списками, скриптами и прочей ересью, ссылка это ссылка, а блок это блок.
Как сделать вторую страницу в html
4. Вторая Web-страничка. Связь страниц
Повторение.
1. Как загрузить в WEB — браузер файл Page1.htm ?
Ответ: В меню браузера открыть команды: Файл / Открыть/ Обзор и затем найти файл Page1.htm.
2. Как поместить на страницу картинку?
Ответ: Необходимо использовать тэг <Image> и его атрибут SRC. <Image src=”имя графического файла”
3. Как осуществить переход в конец страницы?
Ответ: После тэга<body> ввести гиперссылку <A href=”#конец страницы”>Вниз</A>. В коде перед тэгом </body> вставить имя — адрес перехода. <A name=#”конец страницы”</a>
4. Как создать новую WEB – страницу в формате HTML?
Ответ: а) Вид /код HTML / Файл / Создать (из Блокнота), затем после создания кода страницы затем
Файл / Сохранить и Вид / Обновить.
б) Открыть Блокнот и создать в блокноте.
Затем Файл / Сохранить с расширением HTM (HTML ) и Вид / Обновить.
5. Какие вы знаете непарные тэги?
Ответ: <br> — конец строки и <hr> — горизонтальная линия.
Связь страниц
Создадим вторую страничку нашего сайта с именем Page2.html.
Для связи страниц используем тэг <center><A href="Page2.html">Далее</a><center>
Этот тэг вставляет гиперссылку с текстом “Далее” в файл PAGE1.htm для перехода на вторую страничку. Тэг удобно разместить после тэга, вставляющего изображение, и расположить его по центру. Считаем, что 2-я страничка находится в той же папке, что и первая.
Затем в файл Page2.html можно вставить гиперссылку для перехода на первую страничку “назад”
Здесь Тег <center> — тег размещения текста по центру строки. То есть гиперссылка располагается по центру.