Ссылка html на главную страницу: Как сделать ссылку на главную страницу
SSI на практике | htmlbook.ru
SSI используется не только для вывода каких-либо значений, но и для упрощения построения сайта и добавления некоторых удобных вещей, которых лишён HTML. Рассмотрим некоторые примеры применения SSI в деле.
Ссылка на главную страницу
Обычно ссылку на главной странице на саму себя не делают, чтобы не сбивать пользователей с толку. При этом на остальных страницах такая ссылка есть и она ставится на заголовок сайта. Пусть файл с главной страницей называется index.shtml, тогда нам надо определить, не совпадает ли имя открытого документа с этим и в зависимости от совпадения решаем, делать или нет ссылку. В примере 1 переменная DOCUMENT_URI сравнивается со значением /index.shtml и если оно не равно, иными словами, у нас любая страница кроме главной, тогда картинку делаем ссылкой.
Пример 1. Главная страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSI</title>
</head>
<body>
<!--#if expr="($DOCUMENT_URI != \"/index.
shtml\")"-->
<a href="/"><img src="logo.gif" alt="Логотип"></a>
<!--#else-->
<img src="logo.gif" alt="Логотип">
<!--endif-->
</body>
</html>
Определение Internet Explorer
В некоторых случаях для браузера Internet Explorer необходимо загружать отдельный код, который отличается для других браузеров. Тогда используем переменную HTTP_USER_AGENT и сравниваем её со значением MSIE. Обратите внимание, что если просто вывести HTTP_USER_AGENT, то текст будет совсем другой. В примере 2 показано, как задать один текст для всех версий IE и другой для остальных браузеров.
Пример 2. Определение IE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSI</title>
</head>
<body>
<!--#if expr="$HTTP_USER_AGENT = /MSIE/"-->
<p>Ваш браузер устарел, пожалуйста, замените Internet Explorer на другой.</p>
<!--#else-->
<p>Добро пожаловать на сайт!</p>
<!--endif-->
</body>
</html>Создание шаблона
Все страницы сайта строятся, как правило, по одному шаблону и имеют некоторые повторяющиеся элементы вроде шапки и подвала.
Чтобы не повторять их в каждом HTML-документе, их код можно вынести в отдельный файл и подключать одной строкой. Это позволяет не редактировать десятки файлов, а ограничиться всего одним.
Предположим, что типовой документ на сайте имеет структуру, показанную в примере 3. Различаться будет только содержимое <article>, а всё остальное кочует из файла в файл.
Пример 3. Типовой файл
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SSI</title> <!-- Стилевые файлы и скрипты --> </head> <body> <header>Шапка сайта</header> <article>Содержание текущего документа</article> <aside>Боковая панель</aside> <footer>Подвал</footer> </body> </html>
Чтобы не писать каждый раз одно и то же, вынесем похожие фрагменты в текстовые файлы и поместим их в папку assets. Тогда шаблон будет иметь вид, как показано в примере 4.
Пример 4. Шаблон
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SSI</title> <!--#include virtual="/assets/link.txt"--> </head> <body> <!--#include virtual="/assets/header.shtml"--> <article>Содержание текущего документа</article> <!--#include virtual="/assets/aside.shtml"--> <!--#include virtual="/assets/footer.txt"--> </body> </html>
Обратите внимание, что файлs header.shtml и aside.shtml имеют расширение .shtml, для того, чтобы в них подключать директивы SSI.
Выделение текущего пункта меню
Аналогично главной странице пункт меню, который указывает на текущую страницу не делают ссылкой, а вставляют как рядовой текст, выделяя его с помощью стилей. В примере 5 показано содержимое файла aside.shtml, который используется в предыдущем примере.
Пример 5. Меню для сайта
<ul> <!--#if expr="($DOCUMENT_URI = '/1.shtml')"--> <li>Эрик Картман</li> <!--#else--> <li><a href="1.shtml">Эрик Картман</a></li> <!--#endif--> <!--#if expr="($DOCUMENT_URI = '/2.shtml')"--> <li>Кенни Маккормик</li> <!--#else--> <li><a href="2.shtml">Кенни Маккормик</a></li> <!--#endif--> <!--#if expr="($DOCUMENT_URI = '/3.shtml')"--> <li>Стэн Марш</li> <!--#else--> <li><a href="3.shtml">Стэн Марш</a></li> <!--#endif--> <!--#if expr="($DOCUMENT_URI = '/4.shtml')"--> <li>Кайл Брофловски</li> <!--#else--> <li><a href="4.shtml">Кайл Брофловски</a></li> <!--#endif--> </ul>
На сайте сделано четыре файла с именами 1.shtml, 2.shtml, 3.shtml и 4.shtml. Чтобы SSI различал, какому пункту меню какой файл соответствует, используется переменная DOCUMENT_URI. Если её значение совпадает с именем открытого документа, то ссылка не добавляется.
Версия для печати
Версия для печати содержит то же самое содержание, что и текущая страница, но специально оптимизированное для печати документа, к примеру, может отсутствовать реклама, какие-то декоративные элементы. Чтобы различать «нормальную» страницу и её версию для печати, к адресу документа добавим ?print, а с помощью SSI будем проверять, есть эта добавка или нет. Поскольку адрес документа может быть произвольным, воспользуемся переменной DOCUMENT_URI для его получения и создания ссылки на печатную версию (пример 6).
Пример 6. Версия для печати
<!--#if expr="($QUERY_STRING = 'print')"-->
<p>Версия для печати</p>
<!--#else-->
<p>Обычная страница</p>
<p><a href="<!--#echo var="DOCUMENT_URI"-->?print">Версия для печати</a></p>
<!--#endif-->
Создание гиперссылок — Изучение веб-разработки
Гиперссылки действительно важны — именно они делают Интернет в интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.
| Предварительные требования: | Базовое знакомство с HTML, описаное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML. |
|---|---|
| Задача: | Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе. |
Что такое гиперссылка?
Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами).
Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.
Анатомия ссылки
Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a>, и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.
<p>Я создал ссылку на <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>. </p>
Это дало нам следующий результат:
Я создал ссылку на домашнюю страницу Mozilla.
Добавляем инфомацию через атрибут title
Другим атрибутом, который вы можете добавить к своим ссылкам, является — title. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:
<p>Я создал ссылку на
<a href="https://www.mozilla.org/ru/"
title="Лучшее место для поиска дополнительной информации
о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
</a>.
</p>Вот что получилось (описание появится, если навести курсор на ссылку):
Я создал ссылку на домашнюю страницу Mozilla.
Примечание: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title.
Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить ее таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
Активное изучение: создаём собственную ссылку
Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)
- Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
- Теперь превратите некоторые фрагменты документа в ссылки.
- Добавьте ссылкам атрибут
title.
Ссылки-блоки
Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.
<a href="https://www.mozilla.org/ru/"> <img src="mozilla-image.
png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
</a>Примечание: Вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.
Краткое руководство по URL-адресам и путям
Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.
URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/.
URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)
Корень структуры — каталог creating-hyperlinks.
При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).
В корне есть ещё два каталога — pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответсвенно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.
Тот же каталог: Если вы хотите подключить ссылку внутри
index.html(верхний уровеньindex.), указывающую на htmlcontacts.html, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете —contacts.html:<p>Хотите связаться с конкретным сотрудником? Найдите подробную информацию на нашей <a href="contacts.html">странице контактов</a>. </p>
Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри
index.html(верхний уровеньindex.html), указывающую наprojects/index.html, вам нужно спуститься ниже в директорииprojectsперед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слэш и затем имя файла. Итак, URL-адрес, который вы используете —projects/index.html:<p>Посетите мою <a href="projects/index.
html">домашнюю страницу проекта</a>.
</p>Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри
projects/index.html, указывающую наpdfs/project-brief.pdf, вам нужно будет подняться на уровень каталога, затем спустится в каталогpdf. «Поднятся вверх на уровень каталога» обозначается двумя точками —..— так, URL-адрес, который вы используете../pdfs/project-brief.pdf:<p>Ссылка на <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>. </p>
html
html">домашнюю страницу проекта</a>.
</p>Примечание: Вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: ../../../сложный/путь/к/моему/файлу.html.
Фрагменты документа
Можно ссылаться на определенную часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа.
Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:
<h3>Почтовый адрес</h3>
Затем, чтобы связаться с этим конкретным id, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:
<p>Хотите написать мне письмо? Используйте наш <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>. </p>
Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:
<p> <a href="#Почтовый_адрес">Почтовый адрес кампании</a> можно найти в нижней части этой страницы. </p>
Абсолютные и относительные URL-адреса
Два понятия, с которыми вы столкнетесь в Интернете, — это абсолютный URL и относительный URL:
- Абсолютный URL
- Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница
index.htmlзагружается в каталог, называемыйprojects, который находится внутри корня веб-сервера, а домен веб-сайта —http://www.example.com, страница будет доступна по адресуhttp://www.example.com/projects/index.html(или даже простоhttp://www.example.com/projects/), так как большинство веб-серверов просто ищет целевую страницу, такую какindex.html, для загрузки, если он не указан в URL-адресе.).
Например, если страница Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.
- Относительный URL
- Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы
http://www.example.com/projects/index.htmlна PDF файл, находящийся в той же категории, наш URL может быть просто названием файла —project-brief.— никакой дополнительной информации не требуется. Если PDF расположен в поддериктории pdfpdfsвнутри каталогаprojects, относительная ссылка будетpdfs/project-brief.pdf(аналогичный абсолютный URL был быhttp://www.example.com/projects/pdfs/project-brief.pdf.).
pdfОтносительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.
Советуем вам основательно разобраться в этой теме!
Практика написания хороших ссылок
При написании ссылок рекомендуется следовать некоторым правилам.
Давайте рассмотрим их.
Используйте четкие формулировки описания ссылок
На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки доступными для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:
- Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.
- Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведет ссылка.
- Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведет ссылка.
Взгляните на этот пример:
Хороший текст ссылки: Скачать Firefox
<p><a href="https://firefox.
com/">
Скачать Firefox
</a></p>Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox
<p><a href="https://firefox.com/"> Нажми сюда </a> чтобы скачать Firefox</p>
Советы:
- Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
- Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговоаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
- Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
- Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.
Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.Используйте относительные ссылки, где это возможно
Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта (при ссылке на другие сайты необходимо использовать абсолютную ссылку):
- Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
- Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.
С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.Создавая ссылки на не HTML ресурсы — добавляйте описание
Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсуствие описания может раздражать пользователя. Приведем пример:
- Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
- Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.
Посмотрите на примеры, чтобы увидеть, как добавить описание:
<p><a href="http://www.
example.com/large-report.pdf">
Скачать отчет о продажах (PDF, 10MB)
</a></p>
<p><a href="http://www.example.com/video-stream/">
Посмотреть видео (видео откроется в отдельном окне, HD качество)
</a></p>
<p><a href="http://www.example.com/car-game">
Играть в гонки (необходим Flash)
</a></p>Используйте атрибут download, когда создаете ссылку
Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведем пример ссылки для загрузки браузера Firefox 39:
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> Скачать Firefox 39 для Windows </a>
Активное изучение: создание меню навигации
Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространенных способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создается впечатление, что вы остаетесь в одном месте: меню остается на месте, а контент меняется.
Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):
Что делать:
- Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
- Создайте ссылки каждому элементу списка, ведущие на эти страницы.
- Скопируйте созданное меню в каждую страницу.
- На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
Когда закончите задание, посмотрите, как это должно выглядеть:
Если не удается сделать, или вы неуверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.
Ссылки электронной почты
Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент <a> и mailto: — адрес почты.
Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:
<a href="mailto:[email protected]">Отправить письмо для nowhere</a>
В результате полчим ссылку вида: Отправить письмо для nowhere.
Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».
Особенности и детали
Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.
Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):
<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a>
Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.
Вот несколько примеров использования mailto URLs:
Заключение
Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.
В этом модуле
| Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu | AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu |
Text-to-speech function is limited to 200 characters
Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6
Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6
Всем привет!
Продолжаем изучать основы HTML для начинающих. В этом уроке я расскажу, что такое ссылка, как вставить в html документ ссылку на другую страницу, как сделать ссылку картинкой. Покажу, как сделать ссылку на другой сайт, на почту и на файл.
Итак, давайте вкратце выясним, что такое ссылка в HTML.
Ссылка в HTML – это слово или фраза в документе, указывающие на другую часть этого документа или на другой документ, при нажатии на который, произойдет переход.
С помощью ссылки владелец сайта может направить пользователя на другую страницу или на адрес другого сайта, а также дать возможность пользователю скачать файл или архив прямо на сайте.
Если вы не поняли, как выглядит ссылка, тогда сморите – вот так выглядит ссылка. Можете нажать на слово «ссылка» и вы попадете на другую страницу.
Теория закончилась, переходим к практике.
○ Как вставить ссылку в документ на другую страницу
Чтобы вставить ссылку в HTML-документ, используют тег <a> с параметром «href», которое определяет путь или адрес к другому объекту, странице, адресу сайта.
<a href="адрес ссылки или название страницы"> ссылка</a>
Для тега <a> закрывающий тег </a> обязателен.
Внимание: адрес ссылки или название страницы должны быть прописаны на латинице.
Неправильно:
<a href="карта.html"> ссылка</a>
Правильно:
<a href="karta.html"> ссылка</a>
Теперь пример.
Создайте HTML-документ под названием «1.html» и вставьте вот такой код:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> <a href="2.html">Ссылка</a> Страница №1 Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Теперь создайте второй HTML-документ под названием «2.html» и вставьте вот такой код:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> <a href="1.html">Ссылка</a> Страница №2 </body> </html>
Внимание, HTML-документы «1.html» и «2.html» должны находиться в одной папке.
[посмотреть пример]
Обратите внимание на страничку «1.html». Там мы сделали ссылку на страницу «2.html», а со страницы «2.html» сделали ссылку на «1.html».
Разобрались?
Попробуйте все сделать сами. Добавьте еще пару страниц и привяжите страницы ссылками.
○ Как сделать ссылку на другой сайт
Как вставить ссылку на другую страницу, вы уже знаете. Чтобы сделать ссылку на другой сайт, достаточно в параметре «href» указать адрес сайта (http://адрес сайта):
<a href="http://stepkinblog.ru"> ссылка на мой блог</a>
Вот пример:
ссылка на мой блог
○ Как сделать ссылку на почту в html
Ссылка на почтовый ящик делается так же, как и обычные ссылки, только вместо адреса сайта или страницы указываете mailto:адрес электронной почты
<a href="mailto:[email protected]">Написать письмо</a>
При нажатии по ссылке «Написать письмо», откроется почтовая программа, где вы сможете отправить письмо.
○ Как сделать html ссылку, чтобы она открывалась в новом окне
Добавьте к тегу <a> атрибут «target» с параметром «_blank» и страница будет открываться в новом окне при нажатии по ссылке.
<a href="http://bloggood.ru" target="_blank">ссылка</a>
○ Как сделать ссылку на скачивание файла
Укажите в параметре «href» путь к файлу или к архиву.
— Для скачивания архива
<a href="fail.zip">Скачать zip</a>
fail.zip – это название и расширение архива.
— Для скачивания обычных файлов
Если в ссылке прописать название файла (txt), то при нажатии на ссылку «Скачать» в браузере откроется текстовый файл. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download».
<a href="fail.txt" download>Скачать txt</a>
— Для скачивания картинок
Если в ссылке прописать название картинки, то при нажатии на ссылку «Скачать» в браузере откроется картинка. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download».
<a href="stepkinblog-ru.png" download>Скачать картинку</a>
○ Как сделать картинку ссылкой в html
Как в HTML-документ вставлять картинку, я думаю, писать не нужно, так как недавно вы этот урок изучали. Если подзабыли, читайте тут.
Итак, чтобы сделать картинку ссылкой, достаточно в html-документе прописать тег картинки <img> между тегами ссылки <a>…</a>
<a href="http://stepkinblog.ru"><img src="kartinka.jpg"></a>
○ Как сделать подсказку для ссылки
При наведении курсора мышки на ссылку, появится подсказка. Чтобы это реализовать, добавьте к тегу <a> атрибут «title» с текстом:
<a href="http://stepkinblog.ru" title="Главная страница блога"> Главная страница блога </a>
○ Как сделать цвет ссылки в html
Чтобы простая ссылка после нажатия или посещения имела нестандартный цвет, добавьте к тегу <body> три атрибута: «link», «alink», «vlink» с кодом цвета (цвет можно задать и на английском, например «red»)
<body link="#00FF00" alink="#FFFF00" vlink="#EEE9E9"> <a href="1.html">ссылка</a> </body>
— link — цвет просто ссылки
— alink — цвет нажатой ссылки
— vlink — цвет посещенной ссылки
— #00FF00; | #FFFF00; | #EEE9E9; — это кода цветов ссылок
На этом — все, кажется, ничего не забыл вам рассказать.
А теперь задание вам: все, что вы узнали в этом уроке, попробуйте сделать сами на одной страничке.
Вот пример того, что у вас может получиться, если правильно используете пройденный материал:
[посмотреть пример]
Подписывайтесь на обновление моего блога и не пропустите новых уроков по основам HTML. Удачи!
Предыдущая запись
Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5
Следующая запись
Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7
Как сделать ссылку на сайт правильно: 4 простых шага
Развитие собственного сайта предполагает полноценную каждодневную упорную работу. В том числе, выполнение монотонных и не совсем интересных действий. Но обязательных – способствующих оптимизации проекта. Сегодня подробно и во всех красках расскажу, как сделать ссылку на сайт. Речь идет о переходе на внутренние страницы ресурса со «стартовой». То есть, о перелинковке. Казалось бы, ничего крайне трудного и непонятного в этом нет. Но, как и в любом деле, имеются некоторые тонкости и нюансы. На них я и остановлюсь.
Содержание статьи:
Как сделать активную ссылку на сайте, простая инструкция
Что представляет собой ссылка? Это отмеченная часть текста. При нажатии на нее пользователь перенаправляется на другую страницу. В зависимости от настроек, страница открывается либо в той же вкладке, либо в новой.
Обратите внимание! Существуют ссылки, активирующие скачивание файлов. То есть, при клике мышкой на них, начинает скачиваться документ или другой файл.
Ссылка выглядит так: <a href=»адрес страницы» >слово или часть предложения</a>. Теперь о каждой составляющей ссылки:
- <a> </a> — тег, в котором помещается ссылка и текст к ней;
- адрес – url, на который ведет ссылка;
- слово или часть предложения, называемые анкором – текст, который и отображается на странице, в статье.
Обратите внимание! Ссылка обычно выделяется синим цветом и подчеркиванием текста. Но могут быть и другие варианты настройки.
Как видите, чтобы сделать ссылку в редакторе сайта нужно поставить соответствующий тег, указать url и часть текста. Ничего сложного, правда ведь?
Кстати! О том, как работать в административной панели и редакторе сайта, я подробно рассказываю на своем авторском полностью бесплатном тренинге, как сделать сайт своими руками. Тренинг длится всего 4 дня в режиме онлайн. По завершении обучения у каждого участника остается собственный проект – готовый к работе. Если возникают трудности с его созданием, команда поддержки отвечает на все вопросы и решает проблемы.
Все ссылки бывают двух типов. Внешние перенаправляют на страницы того же сайта. Внутренние – на сторонний ресурс.
Какие атрибуты для ссылок бывают
Читайте также: Как проверить сайт на ошибки: 5 важных правил
HTML открывает широкие возможности и позволяет создавать дополнительные условия для перехода по ссылке. Атрибутов огромное количество. Рассказывать обо всех не буду. В этом нет никакого смысла. Остановлюсь только на самых важных. Отображается он следующим образом — <a имя атрибута=»значение» ></a>.
Что интересно – атрибутов для тега бывает несколько. Они публикуются обязательно через пробел. Очередность размещения атрибутов абсолютно не важна.
Ссылка открывается в новом окне
Очень удобны для пользователей вариант. Остается открытой «начальная» страница. Ему не нужно искать варианты, как вернутся на нее в случае необходимости.
Кроме того, если сразу перейти на другую страницу в том же окне, человек будет в итоге находиться на сайте чуть меньше времени. Ведь «стартовая» страница «закрывается». При открытии нового окна посетитель «использует» сразу две страницы.
Чтобы страница по ссылке открывалась в новом окне, нужно «эксплуатировать» значения target и _blank. Вот код, вставляемый в текст в редакторе статьи: <a href=»url» target=»_blank»>текст</a>.
Как сделать ссылку на сайт: информация про содержание ссылки
Чтобы дополнительно мотивировать посетителя нажать на ссылку, рекомендуется сделать ее описание. Поскольку только текстового ключа недостаточно, чтобы дать полное посетителям полное представление, что включает в себя страница, на которую ведет ссылка – ведь в такой ситуации анкор будет слишком большим. Станет нечитабельным.
Как быть? Есть простое решение – при наведении пользователем курсора всплывает подробное описание. Для достижения такой цели необходимо использовать атрибут title.
Как сделать ссылку на страницу сайта, у которой будет описание? Вот ее код: <a href=»url» title=»текст с описанием ссылки»>выделенный в статье текст ссылки</a>.
Отношения между документами
Существует еще один важный атрибут rel, посредством которого определяется отношения между уже открытой страницей и документом, на который эта ссылка ведет. У данного атрибута имеется несколько значений. Рекомендуют использовать два:
Остальные вам не нужны. Итак, начнем с nofollow. Он очень важен для SEO-продвижения сайта. Суть его состоит в том, чтобы не передавать вес страницы, на которой расположена ссылка, странице, на которую она ведет.
Как сделать ссылку на страницу сайта со значением nofollow? Вот ее код — <a href=»url» rel=»nofollow»>текст</a>.
Теперь про значение sidebar. Данный вариант используется крайне редко. Цель – при клике по ссылке тут же закрепить ее в панели закладок используемого пользователем браузера.
Как сделать ссылку на сайт такого типа? Очень просто! Вот ее код: <a href=»url» rel=»sidebar»>текст</a>.
Как сделать ссылку на сайт в WordPress
Читайте также: Редактор Gutenberg WordPress 5.0: Полный обзор + видео
Каждая из Систем управления контентом (движок) имеет собственные особенности формирования внутренних ссылок. Я остановлюсь на работе в редакторе WordPress. Это передовая платформа. На ней разрабатывается множество удобных и функциональных сайтов. Уже сегодня на движке работает более 30% всех ресурсов в мире – только осознайте эту цифру!
1. Шаг первый
Откройте в редакторе платформы статью. Курсором выделите часть текста, который вы хотите сделать ссылкой. Найдите на панели инструментов значок цепи – три звена. Кликните по нему.
2. Шаг второй
Откроется небольшое окно. В нем нужно ввести адрес url – той страницы, которая должна открываться по ссылке.
3. Шаг третий
В строке «Заголовок» внесите описание ссылки. Это будет атрибут title. Если не хотите его делать, то оставьте строку пустой. Рекомендую в строку вносить название страницы или статьи, на которую ведет ссылка.
4. Как сделать ссылку на сайт: шаг четвертый
Если хотите, чтобы ссылка открывалась в новом окне, нужно поставить отметку в соответствующей строке. После чего – кликнуть на кнопку «Добавить ссылку» или другую с подобным названием (в зависимости от версии редактора и особенностей перевода).
Дополнительные атрибуты
Хотите узнать, как сделать ссылку на страницу сайта в WordPress с дополнительными атрибутами? В этом нет ничего сложного.
редакторе статье перейдите в раздел HTML и там вручную пропишите все необходимые вам атрибуты в тексте уже созданной ссылки.
Как написать соответствующие атрибуты – смотрите выше. В примерах оформления ссылок. Ничего сложного в этом нет. Просто придерживайтесь моих рекомендаций.
Как сделать ссылку на сайт: картинка, как ссылка
Теперь поговорю о том, как сделать активную ссылку на сайте из картинки. То есть, чтобы пользователь переходил на новую страницу после клика по изображению. Тут тоже все предельно просто. Код ссылки будет выглядеть следующим образом: <a href=»url»><img src=»адрес изображения»></a>. Вот и всё!
Несколько советов, как правильно делать ссылки на страницах собственного сайта
Читайте также: Как самой сделать сайт бесплатно: подробная инструкция
1. Не делайте ссылок чрезмерно много
Если на вашем сайте, блоге не так много страниц и еще мало текста, делайте меньше ссылок в теле статьи.
2. Как сделать ссылку на сайт: понятный анкор
Вот еще один совет, как сделать ссылку на страницу сайта правильно. Анкор – это текст ссылки. Он должен быть простым и понятным. Гармонично вписываться в текст статьи, не выбиваясь из логики рассказа.
Поэтому делайте анкоры читабельными. Чтобы посетитель понимал, о чем идет речь, а не удивлялся, почему вдруг в тексте идет непонятный набор слов.
3. Учитывайте объем документа/файла
Если ставите ссылку на скачивание документа или файла, или если ссылка ведет на страницу с «тяжелым» контентом, обязательно предупредите пользователей об этом.
Дабы они изначально понимали, какой объем трафика понадобится. Даже несмотря на то, что сегодня большинство провайдеров предоставляют высококачественный скоростной интернет, подобная забота будет позитивно оценена пользователями.
4. Как сделать ссылку на сайт: удаляйте «битые» ссылки
Если вы ставите ссылки на сторонние документы или другие сайты, проверяйте, чтобы они оставались рабочими. Со временем – велика вероятность – что ссылка будет «битой». То есть, по ней уже не окажется нужного файла или страницы, появится ошибка. Пользователь окажется разочарованным. Да и поисковые роботы негативно относятся к таким ссылкам.
Поэтому каждый месяц необходимо проверять сайт на наличие таких ссылок. Чтобы сэкономить время на работу, попробуйте воспользоваться программой Xenu Link Sleuth.
Как оформлять текст ссылки: несколько советов
Теперь немного о том, как сделать активную ссылку на сайте, чтобы она выглядела красивой. Для этого нужно правильно оформить текст. Вот несколько действенных советов:
- информативность – без использования «пустых» слов «здесь, тут, сейчас» и т.д.;
- лаконичность – короткий, но понятный анкор из двух-трех слов;
- уникальность – каждая ссылка должна быть уникальной, не используйте один и тот же текст анкора для разных ссылок.
Обратите внимание! Придерживайтесь стандартов оформления анкора. Текст синего цвета и подчеркнутый. От прочих вариантов нужно отказаться.
Как сделать ссылку на страницу сайта: личный совет
Теперь вы знаете, как сделать ссылку на сайт правильно. И не только ссылку, но и открывающуюся в новом окне или имеющую подробное описание.
Если вас интересует, как своими руками выполнять более сложные действие в административной панели или вообще самостоятельно сделать сайт всего за 4 дня, записывайтесь на мой авторский онлайн-тренинг. Во время обучения вы узнаете много интересного и полезного. Но, самое главное, создадите личный сайт. На тренинге я также рассказываю о том, монетизировать сайт – то есть, сделать его прибыльным, приносящим постоянный и высокий уровень дохода.
HTML тег ссылки
Пример
Ссылка на внешнюю таблицу стилей:
Попробуй сам »
Определение и использование
Тег определяет
связь между текущим документом и внешним
ресурс.
Тег чаще всего используется для ссылки на внешние таблицы стилей.
Элемент — пустой элемент, он содержит только атрибуты.
Поддержка браузера
При использовании для таблиц стилей тег поддерживается во всех основных браузерах. Никакой реальной поддержки ни для чего другого.
| Элемент | |||||
|---|---|---|---|---|---|
| <ссылка> | Есть | Есть | Есть | Есть | Есть |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| перекрестное происхождение | анонимный учетные данные | Определяет, как элемент обрабатывает запросы из разных источников. |
| href | URL | Определяет расположение связанного документа |
| hreflang | language_code | Задает язык текста в связанном документе |
| СМИ | media_query | Указывает, на каком устройстве будет отображаться связанный документ |
| ссылка на политику | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Указывает, какой реферер использовать при выборке ресурса |
| отн. | альтернативный автор dns-prefetch справка значок лицензия следующие pingback preconnect предварительная загрузка предварительная загрузка предварительная загрузка предыдущая поиск таблица стилей | Обязательно.Определяет связь между текущим документом и связанным документом |
| размеры | Высота x Ширина любая | Задает размер связанного ресурса. Только для rel = «icon» |
| название | Определяет предпочтительную или альтернативную таблицу стилей | |
| тип | media_type | Задает тип носителя для связанного документа |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Связанные страницы
Учебное пособие по HTML: стили HTML
Ссылка на HTML DOM: объект ссылки
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
ссылка {
дисплей: нет;
}
Как создавать ссылки на другие веб-страницы
В этой статье объясняется, как создать ссылку с одной страницы на другую.Он также описывает различные типы гиперссылок.
Ссылки, иначе известные как гиперссылки , определяются с помощью тега , также известного как элемент привязки .
Чтобы создать гиперссылку, вы используете тег в сочетании с атрибутом href . Значением атрибута href является URL-адрес , или местоположение, на которое указывает ссылка.
Пример:
Вот несколько HTML-коды для игры.
Попробуй
Гипертекстовые ссылки могут использовать абсолютных URL-адресов, относительных URL-адресов или корневых относительных URL-адресов.
- абсолютное
Это относится к URL-адресу, в котором указан полный путь.Например:
- родственник
Это относится к URL-адресу, в котором указан путь относительно текущего местоположения .
Например, если мы хотим сослаться на https: // www.quackit.com/html/tutorial/ URL, а наше текущее местоположение — https://www.quackit.com/html/ , мы будем использовать это:
- коренной родственник
Это относится к URL-адресу, в котором указан путь относительно корня домена .
Например, если мы хотим сослаться на URL-адрес https://www.quackit.com/html/tutorial/ , а текущее местоположение — https://www.quackit.com/html/ , мы могли бы используйте это:
Косая черта указывает на корень домена.Независимо от того, где находится ваш файл, вы всегда можете использовать этот метод для указания пути, даже если вы не знаете, каким будет доменное имя в конечном итоге (если вы знаете полный путь от корня).
Цели ссылки
Вы можете указать, следует ли открывать URL-адрес в новом окне или в текущем окне. Вы делаете это с помощью атрибута target . Например, target = "_ blank" открывает URL-адрес в новом окне.
Целевой атрибут может иметь следующие возможные значения:
_blank | Открывает URL-адрес в новом окне браузера . |
_self | Загружает URL-адрес в текущее окно браузера . |
_parent | Загружает URL-адрес в родительский фрейм (все еще в текущем окне браузера). Это применимо только при использовании фреймов. |
_top | Загружает URL-адрес в текущее окно браузера , но отменяет любые фреймы. Следовательно, если кадры использовались, то их больше нет. |
Пример:
QuackitПопробуй
Ссылки для перехода
Вы можете сделать так, чтобы ваши ссылки «переходили» в другие разделы на той же странице (или на другой странице).Раньше они назывались «именованными якорями», но их часто называют ссылками перехода, закладками или идентификаторами фрагментов.
Вот как сделать ссылку на ту же страницу:
Добавить идентификатор к цели ссылки
Добавьте идентификатор к той части страницы, которую должен завершить пользователь. Для этого используйте атрибут
id. Значение должно быть кратким описательным текстом. Атрибутid— часто используемый атрибут в HTML.Слоны
Создание гиперссылки
Теперь создайте гиперссылку (на которую будет нажимать пользователь). Это делается с помощью идентификатора
idцелевой ссылки, которому предшествует символ хэша (#):
Итак, эти две части кода размещены в разных частях документа.Примерно так:
Кошки
Все о кошках
Собаки
Все о собаках
Птицы
Все о птицах
Слоны
Все о слонах.
Обезьяны
Все об обезьянах
Змеи
Все о змеях
Крысы
Все о крысах
Рыба
Все о рыбе.
Буйвол
Все о буйволах
Попробуй
Это не обязательно должна быть одна и та же страница.Вы можете использовать этот метод для перехода к идентификатору любой страницы. Для этого просто добавьте целевой URL перед символом решетки ( # ). Пример:
Конечно, это предполагает, что на странице есть идентификатор с таким значением.
Ссылки для электронной почты
Вы можете создать гиперссылку на адрес электронной почты.Для этого используйте атрибут mailto в вашем теге привязки.
Пример:
Электронная почта King KongПопробуй
Щелчок по этой ссылке должен привести к открытию вашего почтового клиента по умолчанию с уже заполненным адресом электронной почты.
Вы можете пойти еще дальше. Вы можете автоматически заполнять строку темы для своих пользователей и даже тело письма. Вы делаете это, добавляя к адресу электронной почты параметры subject и body .
Попробуй
Базовый href
Вы можете указать URL-адрес по умолчанию для всех ссылок на странице, с которых они будут начинаться.Вы делаете это, помещая базовый тег (вместе с атрибутом href ) в документа.
Пример HTML-кода:
Попробуй
базовых ссылок | HTML-ссылки на другие страницы, файлы и адреса электронной почты
Путь // www.yourhtmlsource.com → Мой первый сайт → ОСНОВНЫЕ ССЫЛКИ
Когда у вас появится возможность создавать HTML-страницы, вы захотите узнать, как создавать связи между ними, чтобы можно было приступить к созданию сайта. Ссылки — это суть HTML, именно они делают его уникальным.
Пока вы изучаете ссылки, я также научу вас основам организации сайта , и структуры , .
Навигация по страницам:
Первые ссылки
· Структура ссылок
· Ссылки на адреса электронной почты
· Ссылки на изображения
· Ссылки на файлы
| Абсолютные и относительные ссылки
· Линкальная гимнастика
· Внешние ссылки
| Структура сайта
Последнее обновление страницы: 21.08.2012
Первые ссылки
Хорошо, у вас есть страница, которую вы научились писать на первом уроке.Теперь вам понадобится еще одна страница. Необязательно быть чем-то выдающимся, достаточно простой страницы. Вы можете скопировать первую страницу и просто сохранить ее под другим именем, если хотите. Просто убедитесь, что вы знаете имена двух файлов и что они находятся в одной папке . Не забудьте позвонить на свою домашнюю страницу: index.html .
sourcetip: Всегда используйте строчные буквы при именовании html-файлов, изображений и папок. Большинство веб-серверов (компьютеров, на которых вы в конечном итоге будете размещать свой сайт) чувствительны к регистру, что означает, что для них важно, используют ли ваши файлы заглавные буквы или нет.При переходе по ссылкам на страницы или вводе URL-адресов не нужно помнить регистр каждой буквы, поэтому, если все будут использовать маленькие буквы, проблема исчезнет.
Структура связи
Как и все теги, ссылки следуют структуре и имеют начальные и конечные теги. Разместите эту строку кода на одной из своих страниц.
Очень важно Ссылка Пояснение:
-
a:aобозначает A nchor, что означает ссылку.Это тег, благодаря которому все происходит. -
href: Означает H ypertext REF erence. Частьhref— это еще один атрибут , в котором в качестве значения указано расположение другой страницы. Просто замените theotherpage.html на имя второго файла. Не забывайте кавычки!
Все, что вы поместите в теги ссылок, станет ссылкой, окрашенной в синий цвет и подчеркнутой. Когда вы наведете на него указатель мыши, ваш курсор превратится в руку, и URL-адрес страницы появится в строке состояния вашего браузера (внизу окна).Если вы хотите сделать ссылки на другие части вашей страницы (например, ссылку на верхнюю часть страницы), настройте некоторые внутренние ссылки. Изменение цвета по умолчанию для ссылок рассматривается в атрибутах тела.
Ссылка на адреса электронной почты
Если вы хотите, чтобы люди писали вам по электронной почте, щелкнув ссылку, используйте этот код:
, чтобы создать это — напишите мне, — это откроет программу электронной почты пользователей с вашим адресом в поле Кому: .
Ссылка на картинки
Ссылка на файл изображения практически такая же, как и на файл html. Просто укажите имя файла и не забудьте правильный суффикс — например, если это gif или jpg . Чтобы получить краткое описание форматов файлов для изображений в Интернете, прочтите это. Если вы хотите использовать изображение как ссылку , прочтите следующий урок.
Ссылки на файлы
Вы ссылаетесь на файл как на картинку. Единственное отличие состоит в том, что он не открывается в браузере, а загружается в указанное место на жестком диске ридера.Пример:
Встраивание файла непосредственно на страницу — это другой процесс. У нас также есть страница о форматах файлов в Интернете.
Абсолютные и относительные ссылки
Интернет-адресов точно соответствуют установленной иерархической структуре файловой системы вашего компьютера, с которой вы, вероятно, знакомы. Сначала идет Интернет-домен, например www.example.com. Затем идут каталоги (папки), содержащие файл, и, наконец, имя файла с соответствующим расширением типа файла. Каждый сегмент URL отделяется косой чертой. Всегда помните: в Интернете все косые черты идут вперед .
Есть два разных способа указать ваши ссылки на файл. «Абсолютные ссылки» включают полный адрес веб-сайта, включая http: // и www. биты. «Относительные ссылки» на короче, чем , и удобнее в управлении, и их можно использовать только для указания на другие страницы того же веб-сайта.
Например, у вас есть страница с именем page1.html в каталоге «ссылки» вашего сайта. Абсолютный href для этой страницы — http://www.example.com/links/page1.html . Итак, вы помещаете эту ссылку в любом месте на любой странице, на любом сайте, и она всегда будет переходить на эту страницу в Интернете.
Относительные ссылки могут указывать только на страницу с того же сайта . Адрес всегда относительно относительно позиции второго файла. Если вы переходите на эту же страницу со страницы в том же каталоге, href будет просто page1.html . Если вы переходите по ссылке со своей домашней страницы, то есть в корневом каталоге, ссылка будет иметь вид , так как вам нужно сначала спуститься в каталог, а затем получить файл.
sourcetip: Если вы называете файлы index.html в своих каталогах, вы можете делать ссылки на эти страницы, просто ссылаясь на имя каталога. Ваш браузер всегда будет выбирать index как главную страницу для этой папки. Это означает, что вы можете сжать href = "folder / index.html " в href =" folder / ". Косая черта указывает браузеру, что он должен искать папку, а не файл. Не забывайте об этом!
Линкальная гимнастика
Если вам нужно подняться вверх по каталогу, а затем вернуться в другой, вам нужно будет понять, как устроен ваш сайт. Используя исходный код HTML в качестве примера, мы теперь находимся в разделе «myfirstsite». Взгляните на свою адресную строку, чтобы увидеть. Если бы мы хотели связать относительно с разделом «изображений», нам нужно было бы перейти на один каталог вверх, а затем вниз в каталог изображений.Таким образом, полный относительный href будет
"../images/index.html"
Видите две точки? Они означают «перейти вверх по каталогу» к своему корню. Поэтому независимо от того, насколько глубоко вы погрузились в свой сайт, вы всегда можете вернуться к нему с парочкой ../../. Просто считайте каталоги, пока не достигнете нужного уровня.
sourcetip: Если вы хотите создать ссылку на страницу, которая находится в верхней части вашего сайта (не в глубине каталогов), вы можете начать ссылку с косой черты.Это означает «начать с корневого каталога». Итак, href выше может быть просто / images / . Это избавляет вас от необходимости вкладывать множество ../../s. Ссылка на вашу главную страницу всегда href = "/"
Внешние ссылки
На внешних ссылках (ссылках на другие сайты) вы всегда должны не забывать ставить перед адресом префикс http: // . В противном случае ссылка не будет работать, браузер будет искать на вашем сайте файл с именем www.yourhtmlsource.com .Вы будете ссылаться на нас, верно? Ты будешь моим новым лучшим другом, нахальный.
Чтобы сделать это правильно, вы просто предлагаете абсолютную ссылку, как указано выше. Итак, правильным адресом для ссылки будет http://www.yourhtmlsource.com/ . Обратите внимание на косую черту в конце? Это относится только к каталогам (то есть папкам) или доменным именам, как в этом примере. Не ставьте косую черту после ссылки .html, только для каталогов, таких как .com или адреса без суффикса.
Структура сайта
Без простого плана игры на вашем сайте вскоре может быть очень трудно найти что-то для вас, учитывая все файлы, которые вы постоянно накапливаете в нем. Таким образом, вам следует сгруппировать страницы схожей тематики в папки (каталоги). Храните все свои изображений в одной папке, подальше от ваших html-файлов (назовите папку «изображения» или «медиа» или что-то в этом роде).
Я также посоветовал бы вам поработать над шаблоном вашего дизайна. Сейчас это может быть неважно, поскольку ваш сайт может не иметь отличительного дизайна, но позже, имея этот файл, вы сэкономите часы времени.Что вы делаете, так это сохраняете файл без содержимого, просто макет ваших страниц как TEMPLATE.html в каждом каталоге вашего сайта (заглавными буквами, чтобы он выделялся), со всеми правильными ссылками. Затем, когда вы добавляете страницу в папку, вы просто открываете этот файл, добавляете в него свое содержание и сохраняете под другим именем, оставляя template.html пустым, готовым для другого использования. Чтобы увидеть наш шаблон для этого каталога, см. Это. Проверьте, у нас по одному в каждом каталоге.
Допустим, у вас есть сайт о солнечной системе (всего , скажем, ).Храните все файлы о Марсе в папке с названием «Марс», со всеми изображениями Марса в каталоге с именем «изображения» и в каталоге с именем «Марс». И сохраните изображения Урана… нет. Я выше этого.
Кстати о картинках ….
ссылка | Chrome Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
кодировка | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
crossorigin | Хром Полная поддержка 25 | Кромка Полная поддержка 79 | Firefox Полная поддержка 18 | IE Никакой поддержки № | Opera Полная поддержка 15 | Safari ? | WebView Android Полная поддержка 37 | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 18 | Опера Android ? | Safari iOS ? | Samsung Internet Android Полная поддержка Да |
отключено | Chrome Полная поддержка Есть
| Кромка Полная поддержка 12 | Firefox Полная поддержка 68 | IE Полная поддержка Да | Opera Полная поддержка Есть
| Safari Никакой поддержки Нет | WebView Android Полная поддержка Есть
| Chrome Android Полная поддержка Есть
| Firefox Android Полная поддержка 68 | Опера Android Полная поддержка Есть
| Safari iOS Никакой поддержки № | Samsung Internet Android Полная поддержка Есть
|
href | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
h фланец | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
целостность | Хром Полная поддержка 45 | Край Полная поддержка 79 | Firefox ? | IE Никакой поддержки № | Opera Полная поддержка 32 | Safari Никакой поддержки Нет | WebView Android Полная поддержка 45 | Chrome Android Полная поддержка 45 | Firefox Android ? | Опера Android ? | Safari iOS Никакой поддержки № | Samsung Internet Android Полная поддержка 5.0 |
СМИ | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
методы | Хром Никакой поддержки № | Кромка Никакой поддержки 12–79 | Firefox Никакой поддержки № | IE Полная поддержка 4 | Опера Никакой поддержки № | Safari Никакой поддержки Нет | WebView Android Никакой поддержки № | Chrome Android Никакой поддержки № | Firefox Android Никакой поддержки № | Opera Android Никакой поддержки № | Safari iOS Никакой поддержки № | Samsung Internet Android Никакой поддержки № |
предварительная выборка | Хром Полная поддержка 56 | Кромка Полная поддержка ≤79 | Firefox ? | IE Никакой поддержки № | Opera Полная поддержка 43 | Safari ? | WebView Android Полная поддержка 56 | Chrome Android Полная поддержка 56 | Firefox Android ? | Опера Android Полная поддержка 43 | Safari iOS ? | Samsung Internet Android Полная поддержка 6.0 |
предварительная выборка : требуется безопасный контекст | Chrome Полная поддержка 64 | Край Полная поддержка ≤79 | Firefox ? | IE Никакой поддержки № | Opera Полная поддержка 51 | Safari ? | WebView Android Полная поддержка 64 | Chrome Android Полная поддержка 64 | Firefox Android ? | Опера Android ? | Safari iOS ? | Samsung Internet Android Полная поддержка 9.0 |
referrerpolicy | Хром Полная поддержка 51 | Край Полная поддержка 79 | Firefox Полная поддержка 50 | IE Никакой поддержки № | Opera Полная поддержка 38 | Safari Полная поддержка 11.1 | WebView Android Полная поддержка 51 | Chrome Android Полная поддержка 51 | Firefox Android Полная поддержка 50 | Опера Android Полная поддержка 41 | Safari iOS Никакой поддержки № | Samsung Internet Android Полная поддержка 7.2 |
отн. | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
rel : Альтернативные таблицы стилей. | Хром Никакой поддержки 1-48 | Кромка ? | Firefox Полная поддержка 3 | IE Полная поддержка 8 | Опера Полная поддержка Да | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android Полная поддержка 4 | Опера Android ? | Safari iOS ? | Samsung Internet Android ? |
отн.dns-prefetch | Хром Полная поддержка 46 | Край Полная поддержка ≤79 | Firefox Полная поддержка 3 | IE ? | Опера Полная поддержка 33 | Safari ? | WebView Android Полная поддержка 46 | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android ? | Safari iOS ? | Samsung Internet Android Полная поддержка Да |
отн.значок | Chrome Полная поддержка 4
| Edge Полная поддержка 12
| Firefox Полная поддержка 2 | IE Полная поддержка 11 | Опера Полная поддержка 9
| Safari Полная поддержка 3,1
| WebView Android Полная поддержка 38 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Опера Android Никакой поддержки № | Safari iOS Никакой поддержки №
| Samsung Internet Android Полная поддержка 4.0 |
отн. Манифест | Хром Никакой поддержки № | Кромка Никакой поддержки № | Firefox ? | IE ? | Опера Никакой поддержки № | Safari ? | WebView Android Полная поддержка 39 | Chrome Android Полная поддержка 39 | Firefox Android ? | Опера Android ? | Safari iOS ? | Samsung Internet Android Полная поддержка 4.0 |
относительный модуль предварительной нагрузки | хром Полная поддержка 66 | Край Полная поддержка ≤79 | Firefox ? | IE ? | Опера Полная поддержка 53 | Safari ? | WebView Android Полная поддержка 66 | Chrome Android Полная поддержка 66 | Firefox Android ? | Опера Android Полная поддержка 47 | Safari iOS ? | Samsung Internet Android Полная поддержка 9.0 |
отн. Предварительное соединение | Хром Полная поддержка 46 | Край Полная поддержка 79 | Firefox Полная поддержка 39
| IE Никакой поддержки № | Opera Полная поддержка 33 | Safari Полная поддержка 11.1 | WebView Android Полная поддержка 46 | Chrome Android Полная поддержка 46 | Firefox Android Полная поддержка 39
| Опера Android Полная поддержка 33 | Safari iOS Полная поддержка 11,3 | Samsung Интернет Android Полная поддержка 4.0 |
отн. Предварительная загрузка | Хром Полная поддержка 8 | Край Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 11 | Опера Полная поддержка 15 | Safari Никакой поддержки Нет | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка 14 | Safari iOS Никакой поддержки № | Samsung Internet Android Полная поддержка 1.5 |
отн. Предварительная нагрузка | Хром Полная поддержка 50 | Кромка Полная поддержка ≤79 | Firefox Никакой поддержки 56 — 57
| IE ? | Опера Полная поддержка 37 | Safari ? | WebView Android Полная поддержка 50 | Chrome Android Полная поддержка 50 | Firefox Android Никакой поддержки 56 — 57
| Opera Android ? | Safari iOS ? | Samsung Internet Android Полная поддержка 5.0 |
отн. Предварительная обработка | Хром Полная поддержка 13 | Край Полная поддержка 79 | Firefox Никакой поддержки № | IE Полная поддержка 11 | Опера Полная поддержка 15 | Safari Никакой поддержки Нет | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 18 | Firefox Android Никакой поддержки № | Opera Android Полная поддержка 14 | Safari iOS Никакой поддержки № | Samsung Internet Android Полная поддержка 1.5 |
рев. | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
размеры | Хром Никакой поддержки № | Кромка Никакой поддержки № | Firefox Никакой поддержки №
| IE Никакой поддержки № | Opera Никакой поддержки № | Safari Никакой поддержки Нет | WebView Android Никакой поддержки № | Chrome Android Никакой поддержки № | Firefox Android Никакой поддержки №
| Опера Android Никакой поддержки № | Safari iOS Никакой поддержки № | Samsung Internet Android Никакой поддержки № |
мишень | Хром Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 |
Как связать веб-страницы HTML вместе | Small Business
Гиперссылка — это подчеркнутый фрагмент текста, по которому можно перейти на веб-сайт одним щелчком мыши.Вставка гиперссылок довольно проста благодаря доступным сейчас инструментам веб-дизайна. Но это также может помочь узнать, как вставить ссылку с помощью HTML.
HTML-ссылка Различные веб-страницы
Когда-то, если вы хотели создать веб-сайт, вам нужно было знать язык разметки гипертекста . Это довольно простой язык программирования для изучения, но если вы не хотите быть профессиональным веб-дизайнером, вам не обязательно быть экспертом в HTML. Сейчас доступно множество инструментов, в том числе бесплатные, которые справятся со всеми этими задачами за вас.
Если вы используете WordPress или инструмент для дизайна веб-сайтов, должен быть способ создать ссылку, нажав кнопку «Ссылка».
Если вы экспортируете HTML-файл из документа Office, Control + K — это сочетание клавиш для управления гиперссылками. Просто выделите текст, который вы хотите указать на другой сайт, нажмите Control + K и вставьте в целевой URL . Вы также можете удалить и отредактировать гиперссылку, выделив связанный текст и нажав Control + K.
Если вы больше ориентируетесь на мышку, вы также можете вставлять и обновлять гиперссылки с помощью строки меню в верхней части документа. Выберите Вставить и гиперссылку. Вы получите такое же поле, как и при использовании быстрых клавиш, предлагающих ввести целевой URL.
Ссылка с использованием HTML
Могут быть случаи, когда у вас нет простого способа добавить ссылку. В этом случае вы можете легко добавить гиперссылку HTML . Для изучения HTML не нужен полный курс.Выучить это довольно легко. Код просто требует HREF, ссылки, текста для перехода по ссылке и остановки. Например: Ваш сайт.
Если сайт, на который вы ссылаетесь, является частью вашего собственного веб-сайта, вам не нужно вводить полный URL для HTML-ссылки . Если бы вы, например, давали ссылку на свою биографию, вы бы написали ее как: Моя биография . Если вы используете инструмент дизайна, такой как WordPress, и нажимаете опцию Insert Link , вам обычно предоставляется раскрывающийся список, который включает все ваши страницы, чтобы вы могли просто выбрать и выбрать Добавить ссылку.
Создание ссылки на изображение
Текстовая ссылка — не единственный вариант для веб-сайтов. Ваши изображения также могут ссылаться. Вы можете легко сделать это в программе для создания блога или веб-сайта, просто вставив фотографию, выделив ее и используя инструмент ссылки на , добавив к ней гиперссылку .
Если вы добавляете ссылку на фотографию с помощью HTML, вы будете использовать тот же код, что и при отображении текста, а не фотографии. Однако в этом случае вы замените текст кодом для ссылки на вашу фотографию.Итак, это будет: 
.
Настройка навигации по сайту
Если вы создаете веб-сайт, самые важные текстовые ссылки на любой из ваших страниц — это те, которые ведут на другие ваши страницы. Навигация по сайту часто выполняется с помощью раскрывающегося списка в верхней части каждой страницы. Инструменты веб-дизайна упрощают это, позволяя вам просто выбирать, хотите ли вы, чтобы добавляемая страница была главной или дополнительной страницей, отходящей от одной из ваших основных страниц.
Если вы хотите самостоятельно создать навигацию по сайту, вам понадобится более продвинутый язык, называемый CSS. Вы можете сделать навигацию по сайту вертикальной или горизонтальной, выпадающей или статичной. Хотя CSS более сложен, чем HTML, , вы можете получить нужный код в Интернете и вставить его в исходный код своего веб-сайта.
Гиперссылки для закладок
Ваши гиперссылки не всегда должны указывать на отдельный веб-сайт или даже отдельную страницу на вашем собственном веб-сайте.Их также можно использовать для перенаправления посетителей в другой раздел той же страницы. Это часто можно увидеть в длинных статьях или сообщениях в блогах, где вверху есть оглавление, и пользователи нажимают на каждый элемент, чтобы перейти непосредственно в соответствующий раздел.
Эти гиперссылки работают аналогично закладкам в документе Word. Вы можете создать их, используя любой инструмент веб-дизайна, который вы предпочитаете, или закодировать HTML-ссылку , как вы это делали, когда ссылались на другие страницы. Чтобы создать ссылки, которые направляют посетителей в другие разделы страницы, вам сначала нужно установить закладку в своей копии, используя атрибут «id».Таким образом, это будет «
Первая закладка
.После настройки закладки вы перейдете в верхнюю часть страницы и добавите эту ссылку. Код для этого будет: Перейти к первой закладке . Когда кто-то нажимает на текст «Перейти к первой закладке», эта ссылка переходит прямо в раздел, в котором вы разместили свою закладку.
Использование целевого атрибута
Одна из проблем при установке гиперссылки HTML на вашем сайте заключается в том, что она уводит посетителей.Шансы, что они вернутся на ваш сайт после перенаправления в другое место, невелики, а это значит, что вы можете потерять людей в «кроличьей норе», в которую быстро может превратиться Интернет.
Однако, используя атрибут цели , , вы можете управлять тем, как открывается страница, когда кто-то нажимает на одну из ваших ссылок. Обычно это можно сделать с помощью инструмента веб-сайта, просто щелкнув поле. Однако если вы кодируете свой веб-сайт с использованием HTML, атрибут идет сразу после вашего URL, поэтому он будет выглядеть следующим образом: Ваш сайт . Атрибут _blank открывает документ в новом окне.
Создание якорных ссылок
Что, если вы хотите направить посетителей вашего сайта в определенное место на середине той же страницы? Этот тип гиперссылки HTML выполним, но немного сложнее, чем простая ссылка. Сначала вам нужно настроить цель, то есть перейти к той области страницы, на которую вы хотите создать ссылку. Придумайте для него имя и введите код объекта, который вы связываете.Замените «name» в этом примере любым выбранным вами именем.
Теперь, когда у вас настроена закладка на странице, вы создадите гиперссылку . Для этого перейдите в раздел, в котором вы хотите указать пункт назначения, и используйте символ фунта перед именем, которое вы выбрали внизу страницы. Итак, вы набираете Щелкните, чтобы увидеть объект, на который я ссылаюсь .
Ссылки на документы и PDF-файлы
Вы можете создать ссылку HTML за пределами веб-сайтов.Вы можете легко загружать файлы PDF и .doc на свой веб-сайт и ссылаться на них в другом месте на своем сайте. Это идеально подходит для приложений, листовок и других документов, которые вы не хотите изменять специально для своего веб-сайта. Однако при этом важно отметить, что ссылка ведет на документ, а не на веб-сайт. Часто это делается путем помещения «pdf» или «doc» в скобки после ссылки.
На ссылку на документ Word или PDF , вы сначала загрузите документ, используя тот же инструмент, который вы используете для разработки своего веб-сайта.После этого вы сможете разместить на него ссылку, как на любую другую текстовую ссылку на вашем сайте. Вы должны ввести код следующим образом: Мой файл [DOC] . Не забывайте загружать новую версию каждый раз, когда обновляете файл на своей стороне, поскольку эти изменения не будут автоматически повторяться.
Learn HTML Links — HTML Tutorial
Введение
Ссылки являются важной частью всемирной паутины. Они позволяют нам легко переходить со страницы на страницу и перемещаться по огромной горе информации, которая там есть.Создание эффективных ссылок между страницами вашего собственного сайта и других сайтов — важная вещь, которую следует учитывать разработчикам веб-сайтов.
Базовая ссылка
Ссылка создается с помощью тега a . Это обозначает якорь. Внутри якоря у нас есть атрибут, который определяет, на что он ссылается.
Все, что содержится в открывающих и закрывающих тегах и , становится ссылкой на местоположение, указанное атрибутом href (гипертекстовая ссылка).
simple_link.html
todolistme.net — это
- довольно хороший и простой менеджер списков задач.
Простые ссылки
todolistme.net — довольно хороший и простой менеджер списков дел.
Ссылка может быть создана вокруг текста, изображений и всего, что вы можете отобразить в браузере.
Типы локаций
Ссылка на самом деле называется URL (унифицированный указатель ресурсов). Ссылка может быть глобальной или относительной.
Глобальные ссылки
Глобальная (или абсолютная) ссылка указывает абсолютное расположение ресурса. Они всегда начинаются с протокола (обычно http или https ), за которым следует домен веб-сайта и, возможно, путь от основания домена к конкретному ресурсу.Если вы не включите компонент пути (как в случае с примером ссылки выше), то по умолчанию он будет главной страницей для домена.
- http://ryanstutorials.net — это глобальная ссылка на главную страницу этого домена.
- http://ryanstutorials.net/html-tutorial/html-links.php — это глобальный URL-адрес определенной страницы в этом домене.
Глобальный URL-адрес может быть размещен в любом месте на любой странице, и он всегда будет указывать на одно и то же место.
Относительные ссылки
Относительные ссылки немного сложнее. Они основаны на том, где мы сейчас находимся. Вот несколько примеров:
- ./html-images.php — URL-адрес другой страницы в том же каталоге, что и эта страница. (./ в начале необязательно)
- ../problem-solving-skills/ — две точки (..) означают, что идет вверх по каталогу , затем вниз в каталог навыков решения проблем.Поскольку мы не указали файл, будет использоваться значение по умолчанию (index.php)
- / graphic-design-tutorial — начиная с базы текущего домена перейдите в указанный каталог.
Вот пример 3 различных способов ссылки на следующую страницу в этом руководстве.
different_links.html
- к следующему разделу.
Относительная ссылка на следующий раздел
- из базы домена.
Относительная ссылка на следующий раздел из нашего
- текущее местоположение.
Относительная ссылка на следующий раздел, исключая ./.
Если вы наведете указатель мыши на каждую из приведенных выше ссылок, вы увидите, что браузер определяет каждую из них как ведущую в одно и то же место.
Если ваши относительные ссылки не работают должным образом, лучший способ устранить их — загрузить страницу в браузере и навести указатель мыши на ссылку. Определите, куда браузер хочет перейти по ссылке, и сравните это с тем, куда, по вашему мнению, он должен перейти.Это поможет вам определить, как вам нужно изменить его, чтобы сделать его правильным.
Так что же мне использовать: абсолютное или относительное?
С точки зрения конечного пользователя не имеет значения, что вы используете. Пока ссылка верна, она будет попадать в нужное место независимо от того, относительная она или абсолютная. Однако с точки зрения разработчика выбор может быть весьма важным.
Если вы ссылаетесь на местоположение в другом домене, выбор прост, это должен быть абсолютный URL.
Если вы ссылаетесь на страницу в своем текущем домене, обычно лучше использовать относительный URL. Это дает вам гибкость.
Допустим, я использовал абсолютные URL-адреса для всех ссылок на моем сайте на другие страницы моего сайта. Однажды я решил, что Уолтер — гораздо лучшее имя, и соответственно сменил свое имя. Затем я купил домен walterstutorials.net. Теперь мне нужно будет пройтись по всему сайту и обновить все мои ссылки на новый домен.Но с относительными URL-адресами мне не нужно было бы этого делать.
Другой сценарий — у меня есть тестовый сервер. Я поддерживаю там копию своего сайта и сначала тестирую там любые изменения, прежде чем размещать их на моем действующем сайте. Если бы у меня были абсолютные ссылки, то на моем тестовом сайте всякий раз, когда я щелкал ссылку, я возвращался бы на действующий сайт. Однако с относительными ссылками они автоматически указывают на нужное место.
Связывание страниц
Помимо ссылок на страницы, мы также можем ссылаться на определенные части страницы.Мы можем сделать это, либо создав именованный якорь, либо разместив атрибут id в теге, который находится в том месте на странице, которое мы хотели бы, чтобы ссылка перешла на нас.
Используете ли вы имена или идентификаторы, все они должны быть уникальными. То есть никакие два имени или идентификатора на одной странице не должны совпадать. (Однако они могут быть одинаковыми на разных страницах).
Затем мы создаем ссылку на эту часть страницы, добавляя #anchorname в конец URL-адреса конкретной страницы.
anchors.html
-
Это интересный раздел.
Это еще один интересный раздел.
- Перейти к разделу 2 .
В приведенном выше примере, когда вы нажимаете на ссылки, он помещает указанный раздел вверху страницы (к сожалению, он находится за верхней панелью сайта, но мы ничего не можем с этим поделать).
В общем случае предпочтительнее использовать идентификаторы, а не имена. Код более чистый, а идентификаторы также могут использоваться для других целей в CSS и Javascript.
Ссылки для электронной почты
Также можно указать адрес электронной почты в качестве URL-адреса. Если ваш браузер настроен правильно, это должно привести к открытию вашего почтового клиента и отправке электронного письма на указанный адрес. Мы используем следующий формат:
email.html
Напишите мне , щелкните ссылку
- для отправки электронной почты на несуществующий адрес.
Примеры электронной почты
Напишите мне, нажмите ссылку, чтобы отправить письмо на несуществующий адрес.
В ссылке также можно указать тему и текст электронного письма по умолчанию.
email.html
- Электронное письмо с предопределенной темой ..
- Электронное письмо с предопределенными темой и телом.
Примеры электронной почты
Напишите мне Электронное письмо с предопределенной темой.
Отправить мне по электронной почте Электронное письмо с предопределенной темой и телом сообщения.
Имейте в виду, что хотя вы можете указать тему и текст сообщения электронной почты по умолчанию, вы не можете запретить пользователю изменять это значение в своем электронном письме.
Не стоит включать адреса электронной почты на общедоступные страницы. Спамеры используют инструменты, которые ищут эти ссылки и включают эти адреса электронной почты в свои списки рассылки спама.
Названия ссылок
Добавить заголовок к ссылке довольно просто.Заголовок — это небольшое сообщение, которое появляется, когда пользователь наводит курсор мыши на ссылку. Для этого мы добавляем атрибут title (не путать с тегом title в заголовке документа).
