Добавление страниц сайта с помощью HTML
31 октября, 2020 11:40 дп 3 636 views | Комментариев нетDevelopment | Amber | Комментировать запись
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
По мере разработки своего сайта вы можете захотеть добавить больше страниц. В этом мануале мы покажем, как это сделать.
В этом мануале вы узнаете, как добавить на сайт страницу 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>
<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«Как сделать ссылку на вторую страницу внутри сайта в html?» — Яндекс Кью
Популярное
Сообщества
Новичок в программировании и изучаю html и css. Пишу сайт и не на сайтах ни в ютубе не нашел ответа, как сделать ссылку на вторую новую страницу своего сайта? Пример: есть сайт группы, нажимаешь на «расписание» и открывается в новом окне другая страница с расписанием.
Веб-разработкаСайтостроение
Антон Смирных
·
135,5 K
ОтветитьУточнитьМихаил Коверда
238
Химик. Пытаюсь сделать мир немножко лучше. · 7 янв 2020 · chemfox.org
Используйте тег <a>. Впишите в код следующее:
<a href=»адрес второй страницы»>текст ссылки</a>
Адрес второй страницы это URL в виде относительного или абсолютного пути.
Подробнее здесь.
Учебник-задачник для средней школы
Перейти на chemfox.org21,5 K
Антон Смирных
7 января 2020
Спасибо!
Комментировать ответ…Комментировать…
Шаев Глеб
Программирование
6
Практикующий Веб-разработчик, разрабатываю сайты, учусь и делюсь опытом!) · 16 окт 2021
В папке проекта с вашей основной index.
html страницей создайте ещё одну пустую с расширением .html После чего нужно прописать между Тегов <body> *вот здесь*</body> следующий код:
<h3>Курсовые работы</h3>
<p><a href=»Kursovie.html» target=»_blank»>Показать список</a></p>,
где фразу «Показать список» мы помещаем в тег <p><a>*сюда*</a></p>
При нажатии на эту фразу мы… Читать далее
Ber
25 января
Здравствуйте!С ссылкой поняла спасибо!подскажите как назвать вторую страницу html?третью и т.д? second .test/html.html.? и т.д?
Комментировать ответ…Комментировать…
Михаил
5
Я фронтенд разработчик, веду блог о вёрстке сайтов, оптимизации веб-приложений. Улучшаю по… · 12 авг 2020
Просто добавьте к ссылке атрибут target=»_blank» если хотите, чтобы ссылка открывалась в новой вкладке:
<a href=»https://site.
ru/raspisanie» target=»_blank»>Расписание</a>
Для SEO путь лучше использовать абсолютный, указывая адрес страницы целиком. Текст ссылки в идеале должен совпадать с заголовком h2 страницы, на которую произойдёт переход во избежании дизориентации пользователя.
Игорь Александрович
19 февраля 2021
А что если человек хочет не about blank а прогрузку страницы в нутри неё?
Комментировать ответ…Комментировать…
Саша Кит
268
7 янв 2020
Чтобы сделать ссылку на новую страницу сайта, нужно вписать ссылку в <a>. Например: <a href=»site.ru/raspisanie»>Расписание</a> Также можете указать дополнительные атрибут target=»new» — чтобы ссылка открывалась в новом окне. Чтобы сделать сделать ссылкой картинку используйте <a href=»site.ru/raspisanie»><img=»путь к картинке»></a> Будут вопрос — пишите! Читать далее
37,2 K
Антон Смирных
11 января 2020
Спасибо!
Комментировать ответ…Комментировать…
Вы знаете ответ на этот вопрос?
Поделитесь своим опытом и знаниями
Войти и ответить на вопрос
Цвета ссылок HTML
❮ Предыдущая Далее ❯
HTML-ссылка отображается другим цветом в зависимости от
был ли он посещен, не посещен или активен.
Цвета ссылок HTML
- Непосещенная ссылка подчеркнута и окрашена в синий цвет
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута и окрашена в красный цвет
Вы можете изменить цвета состояния ссылки с помощью CSS:
Пример
Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута. Кроме того, при наведении мыши на ссылку (a:hover) она станет красной и подчеркнутой:
<стиль>
a:link {
цвет: зеленый;
background-color: прозрачный;
украшение текста: нет;
}
a:посетили {
цвет: розовый;
background-color: прозрачный;
текстовое оформление: нет;
}
a:hover {
цвет: красный;
background-color: прозрачный;
}
a:active {
цвет: желтый;
background-color: прозрачный;
оформление текста: подчеркивание;
}
Попробуйте сами »
Кнопки ссылок
Ссылку также можно оформить как кнопку с помощью CSS:
Это ссылка
Пример