Html урок 2. оформление ссылок html

Содержание:

Простые ссылки

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

В языке HTML для создания ссылок используется тег <a> и его атрибуты.

Пойдём от простого к сложному и для начала научимся добавлять в HTML-документ элементарные ссылки. Нам понадобятся следующие элементы языка:

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

href — атрибут тега , значением которого и будет адрес ссылки

Ссылаетесь ли вы на сайт, веб-страницу или файл — не важно, отличаться будет только значение этого атрибута

Теперь рассмотрим строку HTML-кода:

<a href="http://seostop.ru">Ссылка</a>

Теперь рассмотрим каждый элемент строки.

<a> — это тег, отвечающий за создание ссылки.

</a> — закрывающий тег.

Между символами > и < расположен текст Ссылка. Его будет видеть открывший страницу пользователь, на него он будет щёлкать, чтобы перейти по заданному в ней адресу.

href=”http://seostop.ru” — атрибут и значение, благодаря которым обозреватель понимает, куда следует перейти.

Другие ссылки

Мы рассмотрели ссылки на документы по протоколу HTTP или HTTPS, но кроме этого существуют и другие ссылки — на адрес электронной почты, номер телефона и др.

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

Создание ссылки на адрес электронной почты делается почти также, как и ссылка на веб-страницу. Только вместо протокола http указывается mailto, после которого через двоеточие идёт сам адрес почты (пример 5).

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Адрес электронной почты</title>
</head>
<body>
<p><a href=»mailto:vlad@webref.ru»>Задавайте вопросы по электронной почте</a></p>
</body>
</html>

В атрибуте href элемента <a> вначале пишется ключевое слово mailto, затем через двоеточие желаемый почтовый адрес. Подобная ссылка по своему виду ничем не отличается от ссылки на веб-страницу, но при щелчке по ней запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки желательно указывать, что она имеет отношение к электронной почте, чтобы читатели понимали, к чему приведёт щелчок по ней.

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject с темой сообщения, как показано в примере 6.

Пример 6. Задание темы сообщения

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Тема письма</title>
</head>
<body>
<p><a href=»mailto:vlad@webref.ru?subject=Вопрос по HTML»>Задавайте
вопросы по электронной почте</a></p>
</body>
</html>

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Ссылка на Skype

Для вызова программы Skype вы можете использовать протокол callto, после которого через двоеточие следует номер телефона или логин пользователя (пример 7).

Пример 7. Ссылка на Skype

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Skype</title>
</head>
<body>
<p><a href=»callto:vlad»>Мой Skype</a></p>
</body>
</html>

Не все браузеры поддерживают такой формат ссылок.

Ссылка на телефон

На мобильных устройствах вы можете использовать протокол tel, который позволяет использовать ссылку для набора номера и вызова абонента. Номер следует указывать в международном формате, допустимо вставлять в номер дефис или писать его слитно (пример 8).

Пример 8. Ссылка на телефон

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Номер телефона</title>
</head>
<body>
<p><a href=»tel:+1555-2368″>Звоните нам</a></p>
</body>
</html>

При щелчке по такой ссылке откроется приложение для телефона и начнётся вызов абонента.

Относительные адреса

Если вы хотите определить ссылку на другую страницу того же сайта, вы можете использовать относительные адреса.

Но по отношению к чему? Ну, относительно текущей страницы.

Давайте используем простой пример, в котором папка my-first-website содержит два файла HTML.

В home.html вы хотите определить ссылку на contact.html. Поскольку эти два файла находятся в одной папке, вы можете просто написать в home.html:

На реальном сайте процесс аналогичен.

Скажем, у вас есть сайт с именем http://ireallylovecats.com, на котором у вас есть две веб-страницы: index.html и gallery.html:

В index.html вы могли бы написать следующую ссылку:

Помните: веб-сайты размещаются на компьютерах, таких же, что вы сейчас используете. Они просто называются «серверы», потому что их единственная цель состоит в том, чтобы хранить сайты. Но у них ещё есть файлы и папки, как на «обычных» компьютерах.

Использование JavaScript

Можно вообще отказаться от явных ссылок и воспользоваться событием onclick, добавляя его к нужному элементу <td>. Тогда вся ячейка будет реагировать на щелчок.

Внутри onclick пишем document.location, а в качестве значения адрес желаемой веб-страницы (пример 3)

Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки

Пример 3. Использование события onclick

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ячейка как ссылка</title>
<style>
table {
width: 100%; /* Ширина таблицы */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 5px; /* Поля в ячейках */
}
td:first-child {
cursor: pointer; /* Вид курсора */
}
</style>
</head>
<body>
<table>
<tr>
<td onclick=»document.location=’page/new.html'»>Ссылка</td>
<td>Если для простоты пренебречь потерями на теплопроводность,
то видно, что волновая тень синхронизирует кварк без
обмена зарядами или спинами.</td>
</tr>
</table>
</body>
</html>

Поскольку ячейка с onclick не является привычной ссылкой, её нельзя самостоятельно открыть в новой вкладке и вообще понять что это ссылка. Для наглядности через стили меняем вид указателя на «руку».

Таблицы
Ссылки

Как сделать якорь на странице html?

Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.

Давайте рассмотрим как сделать якорь на странице html на примере создания кнопки для быстрого перехода наверх сайта.

В начале страницы, после открытия тега <body> делаем ссылку с атрибутом name, которая будет являться якорем, а в конце документа поставим ссылку с переходом на этот якорь.

HTML-код ссылки:

PHP

<body>
<div><a name=»to-top»></a></div>
<p>…</p>
<div><a href=»# to-top»>К началу страницы</a></div>
</body>

1
2
3
4
5

<body>

<div><aname=»to-top»><a><div>

<p>…<p>

<div><ahref=»# to-top»>Кначалустраницы<a><div>

<body>

Как создать активные ссылки в HTML, визуальном редакторе, в соцсетях: ВК, Инстаграм

Как сделать активную ссылку в HTML

Чтобы сделать активную ссылку в HTML, которая будет перенаправлять пользователя, к примеру, на site.com, необходимо прописать следующий код:

Если нужно сделать так, чтобы ссылка открывалась в новой вкладке, в коде нужно прописать атрибут “target”:

В этом примере атрибут “target” имеет значение “_blank”, которое означает новую вкладку. Именно атрибут “_blank” наиболее распространенный, но есть и другие, которые используются редко и обычно для языка JavaScript. 

Еще один метод указания кликабельной ссылки в HTML:

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

Как сделать активную ссылку в визуальном редакторе

В качестве примера рассмотрим WordPress — самую распространенную CMS. Так, открыв классический визуальный редактор этой системы, необходимо проделать следующее:

  1. Выделить часть текста, который вы хотите сделать ссылкой.
  2. Отыскать на панели инструментов значок “Вставить ссылку” и кликнуть по нему.
  3. В поле, которое появилось под выделенной частью текста, вставить ссылку.

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

Как сделать активную ссылку в Инстаграме

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

Как сделать активную ссылку ВКонтакте

Активными ссылки в ВК разрешено делать только внутренние — то есть те, которые переадресовывают пользователя на какую-либо внутреннюю страницу самой социальной сети Вконтакте: группу, профиль, статью и т.д. Если необходимо вставить активную ссылку, к примеру, на чей-то аккаунт в комментарий под постом, нужно прописать ID этого аккаунта в квадратных скобках “[]”, а через вертикальную черту “|” указать текст ссылки (перед закрывающей квадратной скобкой). 

Ссылки на события, группы и паблики прописываются так же, только вместо ID страницы, указывается:

  • для групп — “club”;
  • для пабликов — “public”;
  • для событий — “event”.

Пример: ID аккаунта 74234421, имя пользователя — Петр. Чтобы нам указать ссылку на этого человека в комментарии, мы прописываем там:

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

Возможно, вам будет интересно, как хорошо работают ссылки в Яндексе

Как сделать ссылку активной в Ворде

Чтобы сделать кликабельной ссылку в текстовом редакторе Microsoft Word, можно пойти 2-мя методами:

  1. Вставить ссылку в нужную часть текста и нажать на клавишу “Enter”.
  2. Выделить часть текста, которую вы хотите сделать ссылкой, после чего кликнуть по нему правой кнопкой мыши и выбрать опцию “Гиперссылка”. Затем вам нужно будет просто вставить ссылку в соответствующем поле.

Как создать активные ссылки в HTML, визуальном редакторе, в соцсетях: ВК, Инстаграм

Как сделать активную ссылку в HTML

Тег активной ссылки на языке HTML для страницы site.ru выглядит следующим образом:

 <a href="site.ru">анкор ссылки</a>

Чтобы браузер открывал ссылку в новом окне впишите в ссылку атрибут target:

<a href="/" target="_blank">site.ru</a>

Здесь присвоенное атрибуту target значение _blank означает новую страницу. Оно самое распространенное. Есть и другие, но они используются крайне редко при указании на страницы, использующие алгоритмы языка Java.

Это один из самых простых и действенных способов оформления активных ссылок в интернете.

Другой способ создания активных ссылок выглядит так:

название ссылки

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

Как сделать активную ссылку в визуальном редакторе

Этот способ еще проще, чем создание ссылки через HTML. Например, вы используете WordPress – самую популярную CMS для создания сайтов.

  • Выделяйте в тексте фрагмент, который хотите сделать кликабельным.
  • Находите в панели инструментов вверху значок «Вставить ссылку». Кликаете на него.
  • Под тем участком текста, который мы выделили, появится поле. В него вписываем адрес ссылки.
  • После этого выделенная фраза становится кликабельной и ведет на ту страницу, которую мы указали. О том, что по тексту можно кликнуть, говорит его оформление.
  • Текст подчеркнут и выделен другим цветом. Так пользователь видит, что по этому фрагменту можно кликнуть.
<a href="site.ru">анкор ссылки</a>

В постах сделать ссылки активными невозможно из-за борьбы сети со спамом.

Как сделать активную ссылку ВКонтакте

Анкорные ссылки ВКонтакте могут быть только внутренними, то есть переадресующими на собственные страницы социальной сети: профили, паблики, сообщества и события. Если вам требуется вставить в запись или в комментарий ссылку на чей-либо профиль, то делается это следующим образом: в квадратных скобках прописывается id страницы, а через вертикальную черту – ее анкор, после чего квадратные скобки закрываются. Аналогично вписываются и ссылки:

  • cообществ с атрибутом club;
  • пабликов атрибутом public;
  • событий с атрибутом event.

Например, id пользователя – 60230983, имя – Иван Иванов. Мы хотим упомянуть этого человека в записи. Для этого нужна следующая запись:

Внешние ссылки могут быть только безанкорными. Скопируйте из адресной строки браузера и вставьте в запись, комментарий или сообщение. Подождите немного, чтобы подгрузилось изображение с сайта.

Как сделать ссылку активной в Ворде

Чтобы сделать ссылку активной в Miscrosoft Word есть два метода:

  1. Вставить ссылку из адресной строки браузера, а затем нажать клавишу Enter.
  2. Выделить слово или фразу, которая будет анкором ссылки, затем нажать на выделенный участок правой кнопкой мыши. Далее в выпавшем меню выбрать опцию «Гиперссылка».

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

Наиболее важные атрибуты

Для создания гиперссылок необходимы три атрибута: href, target и download.

Укажите цель гиперссылки: href

Атрибут href используется для указания цели или адресата для анкора. Он применяется для определения URL-адреса, к которому должен привязываться анкор.

В этом примере <a href="http://example.com"> текста анкора</a> 
ссылка ведет на URL-адрес <em> www.example.com </em>.

С помощью атрибута href можно сделать намного больше, чем просто указать ссылку на другой сайт. Например:

  • Использовать для создания прямой ссылки на любой элемент веб-страницы, которому был присвоен идентификатор.
  • Для связи с ресурсом, используя протокол, отличный от http.
  • Для запуска скрипта.

Например:

<a href="#Specify_a_Hyperlink_Target_href">Этот первый элемент анкора</a>  
ссылается на заголовок  этого раздела статьи. 
Используя <code>id</code>, мы можем назначить для раздела элемент заголовка.
Мы можем использовать протокол <code>mailto</ code>, 
чтобы создать ссылку, которая будет пытаться запустить на вашем компьютере
почтовую программу, используемую по умолчанию. Давайте попробуем! 
Нам бы хотелось, чтобы вы <a href="mailto:contact@html.com">связались</a> с нами!
Если вы нажмете ссылку ниже, появится окно оповещения JavaScript.
 <a>Нажмите ссылку, чтобы увидеть, что произойдет </a>.

Элемент href прост в использовании. Но можно получить намного больше, познакомившись с атрибутом target.

Укажите место для открытия ссылки: target

Рассмотрим ссылку mailto, которую мы создали в предыдущем примере. Ее исходный код:

Нам бы хотелось, чтобы вы <a href="mailto:contact@html.com">связались</a> с нами!

Ссылка полезна, но способ ее открытия не идеален. В зависимости от настроек браузера и ПК гиперссылка может перенаправить пользователей на сайты таких почтовых сервисов, как Gmail или Yahoo! Mail. Но из-за этого они посетители покинут наш ресурс.

Чтобы решить эту проблему, используйте атрибут target со значением _blank.

Мы будем рады, если вы <a href="mailto:contact@html.com"
 target="_blank" rel="noopener">свяжетесь</a> с нами!

С его помощью мы заставляем браузер открывать ссылку в новой вкладке или новом окне браузера.

Укажите ресурс для загрузки: download

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

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

Пример реализации:

Чтобы создать ссылку, которая указывает браузеру 
<a href="http://example.com/file.ext" download="Example_File">скачать файл</a>,
 используйте атрибут <code>href</ code>, чтобы идентифицировать файл
 для скачивания
и атрибут <code>download</code>, чтобы указать имя скачиваемого файла.

Атрибут href в приведенном выше примере указывает на реальный файл. Когда загрузка будет завершена, его имя будет Example_File.ext, где .ext — это формат файла. Нет необходимости включать расширение файла в значение, присваиваемое атрибуту download. Оно будет идентифицировано и добавлено к имени загруженного файла.

Ссылка в HTML — ссылки на электронную почту

Также можно создать гиперссылку на адрес электронной почты. Для этого используйте атрибут mailto в теге ссылки:

<a href="mailto:king_kong@example.com">Email King Kong</a>

Посмотреть пример

Нажатие на эту ссылку приведет к открытию вашего почтового клиента по умолчанию с уже заполненным адресом электронной почты получателя.

Можно автоматически заполнить строку темы для своих пользователей, и даже тело письма. Это делается путем добавления параметров subject и body к адресу электронной почты.

<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>

Посмотреть пример

Рекомендации и советы по созданию ссылок

Используйте изображение как ссылку. Кроме обычного текста на странице в качестве линка можно использовать любую картинку. Для этого нужно вместо анкора вставить тег картинки <img>:

<a href=»адрес«><img src=»адрес картинки«></a>

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

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

Цените терпение посетителей своих блогов. Если документ, на который ссылается Ваш текст, большой по объему (длинная статья, большая картинка, тяжелый файл для скачивания), обязательно предупредите посетителя. И ему будет приятна забота, и Вы не потеряете читателя.

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

Если Вы проморгаете ГВС (говносайт по простому) и дадите ссылку на него, то после индексации ссылки поисковым роботом есть шанс получить санкции от поисковых систем. Если Вам все же нужно ссылаться на подозрительный документ, используйте атрибут rel со значением nofollow.

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

Ежемесячная проверка всех ссылок Вашего блога сэкономит Вам нервы и время. В качестве инструмента для проверки битых ссылок могу порекомендовать бесплатный сервис Broken link checker, бесплатные программы Page Weight Lite и Xenu Link Sleuth.

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

Перечислю самые важные моменты:

  • создавайте информативные анкоры — не стоит злоупотреблять в текстах ссылок фразами «тут», «здесь», «статья» и т.д. Для любой ссылки важна полезность и естественность. Если анкор сделать не интересный и пустой, никто из читателей не будет кликать по переходу.
  • пишите краткий, но точный анкор. Масло масленное хорошо тогда, когда от времени зависит результат — чем больше минут — тем больше результат. Но не для ссылок. Никто не будет читать анкоры длинной в абзац — у читателя или терпение лопнет, или он начало текста перехода забудет и не примет решение на переход;
  • придерживайтесь стандартов при оформлении анкоров. Почти всегда люди идут по наименьшему сопротивлению — так устроен наш мозг, который любой ценой бережет нашу энергию. Поэтому привычка в этом случае играет положительную роль, а значит оформление ссылок должно быть стандартным. Не надо придумывать новые варианты отображения анкоров, не теряйте линию подчеркивания под ссылками, не делайте цвет их текста таким же, как и буквы постов;
  • каждый анкор должен быть уникальным. Не ленитесь придумывать каждый раз новый текст ссылок. Не идите по стопам горе-сеошников, которые не заморачиваются и везде не продвигаемые страницы ставят одни и те же анкоры. Они склеиваются — поисковые системы все видят.

Относительные или абсолютные ссылки?

Допустим, вы хотите связать первую страницу со второй. Наиболее прямой подход заключается в использовании абсолютного адреса. Таким образом, вы добавляете <a href=»http://ireallylovecats.com/gallery.html»>Перейти на вторую страницу</a> в файл index.html.

Поскольку эти два файла находятся в той же папке, вы можете использовать относительный адрес с помощью <a href=»first-blog-post.html»>. Это полезно, если вы решите переместить папку: ваши ссылки не будут нарушены, так как цели ссылок относительны друг к другу, до тех пор, как вы перемещаете оба файла одновременно и держите их в одной папке. Этот относительный подход особенно полезен при переключении доменов.

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

Абсолютные адреса

Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.

Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.

Этот URL может быть разбит на три части:

  • протокол http://
  • домен ireallylovecats.com
  • путь к файлу gallery.html

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

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

В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:

Привязка CSS к HTML — внешние стили

Внешние стили – это один из самых распространенных способов подключения стилей CSS.

Он подразумевает создание отдельного файла, содержащего в себе CSS-код. Затем на этот файл ссылаются HTML-страницы. Обычно для оформления всего сайта используется один файл.

Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом <link> с указанием атрибутов href и rel=»stylesheet»:

<!DOCTYPE html>
<html>
    <head>
        <title>Пример</title>
        <link rel="stylesheet" href="/css/tutorial/example.css">
    </head>
    <body>
        <h1>Встроенная стилизация</h1>
        <p id="intro">Позволяет вам определять стили сразу для всей страницы.</p>
        <p class="colorful">Этот абзац оформлен при помощи класса.</p>
    </body>
</html>

Теперь в HTML-файле нет никакой информации относительно стилизации элементов. Подключение CSS файла позволяет не загромождать стилями исходный код веб-страницы.

Посмотреть демо

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

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать имя домена. Относительные ссылки ведут отсчёт от корня сайта или текущего документа.

Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.

Пример 2. Использование ссылки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href=»//facebook.com»>Facebook</a></p>
</body>
</html>

В данном примере ссылка вида <a href=»//facebook.com»>Facebook</a> является абсолютной и ведёт на главную страницу Facebook. Учтите, что при открытии такой страницы в локальном документе произойдёт ошибка, поскольку такие ссылки работают только на веб-сервере.

Когда в адресе указывается только домен (//webref.ru) или после домена идёт имя папки (//webref.ru/css/), то веб-сервер автоматически загружает документ, обычно с именем index.html или index.php. Таким образом, полный путь к сайту будет https://webref.ru/index.php, а сокращённый — //webref.ru.

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 3).

Рис. 3

Необходимо сделать ссылку из исходного документа source.html на target.html. В таком случае код будет следующий.

2. Файлы размещаются в разных папках (рис. 4).

Рис. 4

Когда исходный документ хранится в какой-либо папке, а ссылаемый в корне сайта, то перед именем документа в адресе ссылки следует поставить две точки и косую черту (/), как показано ниже.

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 5).

Рис. 5

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 6).

Рис. 6

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

Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

5. Файлы размещаются в разных папках (рис. 7).

Рис. 7

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

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target.html». Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.

Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Атрибуты¶

Также для этого элемента доступны универсальные атрибуты.

download

Синтаксис

Значения

Если атрибут пишется без значения, то файл скачивается и сохраняется под своим исходным именем, как оно написано на сервере. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя. При этом файл будет скачан и сохранён с именем, указанным в значении . Расширение файла при этом останется исходным.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Синтаксис

Значение по умолчанию

Нет.

Атрибут (от англ. hypertext reference language — язык гипертекстовой ссылки) указывает язык документа, на который ведёт ссылка.

Синтаксис

Значения

Код языка

Значение по умолчанию

Нет.

Примечание

Атрибут можно использовать для стилизации ссылок, ведущих на иностранные ресурсы.

referrerpolicy

Синтаксис

Значения

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

Значение по умолчанию

rel

Атрибут (от англ. relation — связь, отношение) определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом . Несмотря на то, что большинство браузеров не поддерживают атрибут , на сайтах часто можно встретить код , предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.

Синтаксис

Значения

Значение по умолчанию

Нет.

target

Синтаксис

Значения

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

Загружает страницу в новую вкладку браузера.
Загружает страницу в текущую вкладку.
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как .
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как .

Значение по умолчанию

type

Атрибут (от англ. type — тип) устанавливает MIME-тип документа, на который указывает ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут должен добавляться только при наличии атрибута .

Синтаксис

Значения

MIME-тип

Значение по умолчанию

Нет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector