Как в html сделать ссылку на другую страницу html: Как сделать ссылку | htmlbook.ru

Что такое ссылки и как их ставить. Тег a — журнал «Доктайп»

Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.

В HTML ссылки создаются с помощью тега <a>. Например:

<a href="https://htmlacademy.ru">HTML Academy</a>

href — это атрибут, в котором мы прописываем адрес для перехода.

Тег <a> можно использовать вообще без адреса, то есть без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Ссылки-заглушки показывают, что мы находимся на текущей странице, и отсюда не нужно никуда уходить:

<ul>
  <li><a>1 страница</a></li>
  <li><a href="2">2 страница</a></li>
  <li><a href="3">3 страница</a></li>
</ul>

В ссылке без href лучше оставить подсказку о том, почему мы это сделали.

Абсолютные ссылки

Если нужно сделать ссылку на другой сайт в интернете, используйте полный адрес сайта — он называется абсолютным. Выглядит он, например, так:

https://site.ru/blog/index.html

Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь. В нашем случае это:

https:// — протокол, по которому мы обращаемся к сайту.

site.ru/ — имя сервера.

/blog/index.html — путь к файлу.

Если в адресе есть все эти части — это абсолютный адрес.

Относительные ссылки

Когда файл по ссылке лежит на вашем компьютере, используются относительные адреса. В отличие от «обычных» адресов, в них нет адреса сайта. Например:

day-2.html

Как написать и запустить HTML на компьютере

Относительные адреса иногда используют и для страниц в интернете. Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать.

Если в адресе нет имени сервера или протокола, то это относительный адрес.

Ссылки на файл

По ссылкам можно не только переходить на другие сайты, но и скачивать файлы. Для этого пропишите в атрибуте hrefссылку на этот файл. А чтобы предотвратить открытие файлов прямо в браузере, добавьте атрибут download у тега <a> .

<a href="file.pdf" download>Браузер скачает меня lt;/a>

Ссылки-якоря

Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.

<a href="#part1">Раздел 1</a>

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

Больше про ссылки

• Абсолютные и относительные ссылки

• Как ставить пустые ссылки

Создание ссылок в HTML | bookhtml.ru

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

Самый главный тег, позволяющий создавать ссылки — это тег <a> . Все, что мы разместим между открывающим тегом <a> и закрывающим тегом </a> называется якорем ссылки (что будет видно на нашей странице).

Пример:

<a>ссылка на другую страницу</a>

Проверив в браузере нашу страницу, мы увидим эту ссылку, но она не действует. А не действует потому-что мы не указали никаких атрибутов (куда же она должна ссылаться).

Самый основной атрибут ссылки — это атрибут href. Именно он отвечает за то куда ссылка должна ссылаться.

Пример:

<a href=»/testpage.html»> ссылка на другую страницу</a>

Следующий атрибут, применяемый у ссылок — это атрибут target, отвечающий за открытие ссылки (а именно в каком окне (вкладке) откроется страница, на которую ведет ссылка). Можно открыть в том же окне, а можно и в новом окне (вкладке).

Для открытия ссылки в новом окне используем значение «_blank» (со знаком подчеркивания).

Пример:

<a href=»/testpage.html» target=»_blank»> ссылка на другую страницу</a>

Еще один атрибут у ссылок — это атрибут title. Этот атрибут не обязательный, а применяем его для указания темы той страницы на которую ссылаемся. При наведении курсора на ссылку будет всплывать подсказка (то что мы пропишем в значении атрибута title).

Пример:

<a href=»/testpage.html» target=»_blank» title=»проверка ссылок»> ссылка на другую страницу</a>

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

Пример:

<a href=»http://www.wikipedia.org » target=»_blank» >Википедия </a>

Вот таким способом создаются ссылки на другие интернет-ресурсы.

Теперь рассмотрим следующий тип ссылок — это ссылки на скачивание файлов. В якоре такой ссылки пропишем — скачать файл, а в значении атрибута href необходимо указать полный адрес расположения файла для скачивания.

Пример:

<a href=»/… file.rar» target=»_blank» title=»тема файла»>скачать файл </a>

При клике по ссылке открывается окно загрузки файла где нам предлагается скачать файл. Вот так создаются ссылки на скачивание файлов.

Теперь давайте создадим ссылку на ваш email-адрес, при клике по которой у пользователя загружается почтовая программа где он может написать вам письмо. В значении атрибута прописываем следующее: «mailto:адрес вашей электронной почты, на который будут приходить письма».

Пример:

<a href=»mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript «>написать мне письмо</a>

Далее поговорим о ссылке на определенную часть страницы, так как ссылаться можно не только с одной страницы на другую, но и с одного места страницы на другое место этой же страницы.

Для начала нам необходимо создать метку в том месте страницы, куда мы будем переходить по ссылке. Для этого в html-коде, в выбранном нами месте пишем следующую строку:

<a name=»metka»></a>

Как видим у нас появился новый атрибут — name, а в значении этого атрибута пишем имя метки (любое).

Дальше создаем саму ссылку в том месте, откуда мы будем делать переход. В значении атрибута href пишем имя метки через символ решетки — #.

Пример:

<a href=»#metka»>читать ниже</a>

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

Пример:

<a href=»/testpage.html#metka»> ссылка на другую страницу</a>

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

Исправляется это в теге <body> нашего html-документа. У тега <body> тоже есть свои атрибуты и некоторые из них отвечают за цвет ссылок.

Атрибут link — отвечает за цвет не посещенных ссылок.

Атрибут vlink — отвечает за цвет уже посещенных ссылок.

Атрибут alink — отвечает за цвет ссылки при клике по ней.

В значениях атрибутов прописываем цвет, который нам необходим.

Пример:

<body link=»red» vlink=»black» alink=»green»>

Еще один важный момент — это подчеркивание ссылок и его влияние на поведенческие факторы — endseo.ru

Вот все о создании ссылок.

базовых ссылок | HTML-ссылки на другие страницы, файлы и адреса электронной почты

Путь // www.yourhtmlsource.com → Мой первый сайт → ОСНОВНЫЕ ССЫЛКИ

Росс Шэннон

Когда у вас появится возможность создавать HTML-страницы, вы захотите научитесь создавать связи между ними, чтобы можно было приступить к созданию сайта. Ссылки — это сущность HTML, именно они делают его уникальным.
Пока вы изучаете ссылки, я также научу вас основам организации сайта и 9.0009 структура .

Навигация по страницам:
Первые ссылки · Структура ссылок · Ссылки на адреса электронной почты · Ссылки на картинки · Ссылки на файлы | Абсолютные и относительные ссылки · Линкал Гимнастика · Внешние ссылки | Структура сайта

Эта страница последний раз обновлялась 21 августа 2012 г.

Итак, у вас есть страница, которую вы научились писать на первом уроке. Теперь вам понадобится еще одна страница. Это не должно быть чем-то выдающимся, достаточно простой страницы. Вы можете скопировать первую страницу и просто сохранить ее под другим именем, если хотите. Просто убедитесь, что вы знаете имена двух файлов и что они находятся в папке 9.0009 та же папка . Не забудьте позвонить на свою домашнюю страницу index.html .

исходный код: Всегда используйте строчные буквы при именах html-файлов, изображений и папок. Большинство веб-серверов (компьютеров, на которых вы в конечном итоге разместите свой сайт) чувствительны к регистру, а это означает, что для них важно, используются ли в ваших файлах заглавные буквы или нет.

Структура ссылки

Как и все теги, ссылки имеют структуру и имеют начальные и конечные теги. Поместите эту строку кода на одну из ваших страниц.

Объяснение:

• a : a означает Nchor , что означает Link. Это тег, благодаря которому все это происходит.
• href : Означает H гипертекст REF ссылка. Часть href — это еще один атрибут со значением местоположения другой страницы. Просто измените theotherpage.html на имя второго файла. Не забывайте про кавычки!

Все, что вы поместите в теги ссылок, станет ссылкой, окрашенной в синий цвет и подчеркнутой. Когда вы наведете на нее указатель мыши, ваш курсор превратится в руку, а URL-адрес страницы появится в строке состояния вашего браузера (в нижней части окна). Если вы хотите сделать ссылки на другие части вашей страницы (например, ссылку на верхнюю часть страницы), настройте несколько внутренних ссылок. Изменение цветов ссылок по умолчанию осуществляется в атрибутах body.

Ссылки на адреса электронной почты

Если вы хотите, чтобы люди могли отправлять вам электронные письма, щелкнув ссылку, используйте этот код:

напишите мне < /a>

, чтобы создать это — напишите мне — которое откроет программу электронной почты пользователей с вашим адресом в поле Кому: .

Ссылка на картинку

Ссылка на файл картинки практически такая же, как и на html файл. Просто укажите имя файла и не забудьте правильный суффикс — например, если это gif или jpg . Чтобы узнать о форматах файлов для изображений в Интернете, прочитайте это. Если вы хотите использовать картинку как ссылку , прочитайте следующий урок.

Ссылки на файлы

Вы связываетесь с файлом так же, как с изображением. Разница лишь в том, что он не откроется в браузере, а загрузится в указанное место на жестком диске ридера. Пример:

скачать песню (2.6MB mp3)

Встраивание файла непосредственно в страницу — это другой процесс. У нас также есть страница о форматах файлов в Интернете.

Абсолютные и относительные ссылки

Интернет-адреса точно следуют установленной иерархической структуре, с которой вы, вероятно, знакомы в файловой системе вашего компьютера. Сначала идет интернет-домен, например www.example.com. Затем идут каталоги (папки), содержащие файл, и, наконец, имя файла с соответствующим расширением типа файла. Каждый сегмент URL-адреса отделяется косой чертой. Всегда помните: в Интернете все косые черты идут вперед .

Существует два разных способа указать ссылки на файл. «Абсолютные ссылки» включают полный адрес веб-сайта, включая http:// и www. биты. «Относительные ссылки» гораздо короче и более управляемы, и их можно использовать только для указания на другие страницы того же веб-сайта.

Например, предположим, что у вас есть страница с именем page1.html в каталоге «ссылки» вашего сайта. Абсолют href на эту страницу http://www.example.com/links/page1.html . Итак, вы размещаете эту ссылку где угодно на любой странице, на любом сайте, и она всегда будет вести на эту страницу в Интернете.

Относительные ссылки могут вести только на страницу с того же сайта . Адрес всегда относительно позиции второго файла. Если бы вы ссылались на ту же страницу со страницы в том же каталоге, href был бы просто page1. html . Если бы вы делали ссылку со своей домашней страницы, т. е. из корневого каталога, ссылка выглядела бы как , так как вам нужно было бы сначала перейти в каталог, а затем получить файл.

исходный код: Если вы называете файлы index.html в своих каталогах, вы можете делать ссылки на эти страницы, просто ссылаясь на имя каталога. Ваш браузер всегда будет использовать index в качестве главной страницы для этой папки. Это означает, что вы можете конденсировать href="folder/index.html" в href="folder/" . Косая черта говорит браузеру, что он должен искать папку, а не файл. Не забывайте об этом!

Linkal Gymnastics

Если вам нужно перейти вверх по каталогу, а затем вернуться в другой, вам нужно понять, как устроен ваш сайт. Используя исходный код HTML в качестве примера, мы сейчас находимся в разделе «myfirstsite». Посмотрите на адресную строку, чтобы увидеть. Если бы мы хотели связать относительно с разделом «images», нам пришлось бы перейти на один каталог вверх, а затем вниз в каталог изображений. Так что полный родственник href будет
"../images/index.html"
Видите две точки? Они означают «перейти вверх по каталогу» к вашему корню. Таким образом, независимо от того, насколько глубоко вы погрузились в свой сайт, вы всегда можете вернуться к нему с помощью пары ../../. Просто считайте каталоги, пока не окажетесь на нужном уровне.

sourcetip: Если вы хотите сделать ссылку на страницу, которая находится в верхней части вашего сайта (не глубоко в каталогах), вы можете начать ссылку с косой черты. Это означает «начать с корневого каталога». Итак, href выше может быть просто /images/ . Это избавляет вас от необходимости вводить множество ../../s. Обратная ссылка на вашу домашнюю страницу всегда href="/"

Внешние ссылки

На внешних ссылках (ссылках на другие сайты) вы всегда должны помнить, что перед адресом следует префикс http:// . В противном случае ссылка не будет работать, браузер будет искать на вашем сайте файл с именем www.yourhtmlsource.com . Вы будете ссылаться на нас, верно? Ты будешь моим новым лучшим другом, если сделаешь это, нахал.

Чтобы сделать это правильно, вы просто предлагаете абсолютную ссылку, как показано выше. Таким образом, правильным адресом для ссылки будет http://www.yourhtmlsource.com/. Обратите внимание на косую черту в конце? Это касается только каталогов (то есть папок) или доменных имен, как в этом примере. Не ставьте косую черту после ссылки .html, только для каталогов, таких как .com или адреса без суффикса.

Структура сайта

Без простого плана игры на вашем сайте скоро будет очень трудно найти что-то для вас из-за всех файлов, которые вы продолжаете накапливать на нем. Таким образом, вам следует сгруппировать страницы схожей тематики в папки (каталоги). Держите все свои изображений тоже в одной папке, вдали от ваших html-файлов (назовите папку «images» или «media» или что-то в этом роде).

Я бы еще посоветовал вам поработать по шаблону вашего дизайна. Возможно, сейчас это не важно, так как ваш сайт может не иметь отличительного дизайна, но позже этот файл сэкономит вам часы времени. Что вы делаете, так это сохраняете файл без содержимого, просто макет ваших страниц как TEMPLATE.html в каждом каталоге вашего сайта (заглавными буквами, чтобы он выделялся), со всеми правильными ссылками. Затем, когда вы добавляете страницу в папку, вы просто открываете этот файл, добавляете в него свой контент и сохраняете под другим именем, оставляя template.html пустым, готовым к другому использованию. Чтобы увидеть наш шаблон для этого каталога, см. это. Проверьте, у нас есть по одному в каждом каталоге.

Допустим, у вас есть сайт о Солнечной системе (просто скажем ). Храните все файлы о марсе в папке под названием «mars», со всеми изображениями марса в каталоге под названием «images» в каталоге под названием «mars». И сохранить фотографии Урана… нет. Я выше этого.

Говоря о картинках….

HTML Внутренняя ссылка

• « Предыдущая
• Далее »

Внутренняя HTML-ссылка находится на той же веб-странице. Эта ссылка может быть абсолютным или относительным путем.

После имени внутренней ссылки HTML следует знак решетки (#). Вы должны назначить идентификатор id для ссылки на раздел вашей страницы, который называется внутренней ссылкой на ту же страницу.

Когда вы нажимаете на внутреннюю якорную ссылку, вы автоматически переходите к соответствующему разделу и отображаете его в своем браузере.

Чтобы понять внутреннюю ссылку, см. приведенные ниже примеры.

• Урок 1 9Ссылка 0235 может автоматически называться Introduction of Lession.1 .

• Ссылка Lession. 2 может автоматически называться

  Introduction of Lession.2
  .

Примечания : Вы не можете использовать атрибут name вместо атрибута id . Потому что атрибут name не поддерживается в HTML5. Вместо этого используйте атрибут id .

Пример

  <голова>  <тело> Урок 1
 Урок 2
 Урок 3
 Урок 4
 
 Введение в урок 1
Это подтема.1
Это подтема 2
Это подтема.3
Это подтема.4
 
 
Введение в урок 2
Это подтема.1
Это подтема 2
Это подтема.3
Это подтема.4
 
 
Введение в урок 3
Это подтема.1
Это подтема 2
Это подтема.3
Это подтема.