Как переместить ссылку в html

Ссылки

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

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

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера является ссылкой. Текст, расположенный между тегами и , по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких ссылок на разные веб-страницы.

Пример 8.1. Добавление ссылок

      
Собаки
 
Кошки
  

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — файл cat.html.

Результат примера показан на рис. 8.1. Обратите внимание, что при наведении курсора мыши на ссылку, в строке состояния браузера отображается полный путь к ссылаемому файлу.

Рис. 8.1. Вид ссылок на странице

Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая . Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а окно с предупреждением (рис. 8.2).

Рис. 8.2. Результат при открытии битой ссылки

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

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).

Рис. 8.3. Окно для выбора действия с файлом в Firefox

Как переместить ссылку в html

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

Атрибуты

accesskey Активация ссылки с помощью комбинации клавиш. coords Устанавливает координаты активной области. download Предлагает скачать указанный по ссылке файл. href Задает адрес документа, на который следует перейти. hreflang Идентифицирует язык текста по ссылке. name Устанавливает имя якоря внутри документа. rel Отношения между ссылаемым и текущим документами. rev Отношения между текущим и ссылаемым документами. shape Задает форму активной области ссылки для изображений. tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab . target Имя окна или фрейма, куда браузер будет загружать документ. title Добавляет всплывающую подсказку к тексту ссылки. type Указывает MIME-тип документа, на который ведёт ссылка.

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

Закрывающий тег

HTML5 IE Cr Op Sa Fx

      
Посмотрите на мою фотографию!
 
Как сделать такое же фото?
  

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

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

Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.

Пример 1. Ссылка на заголовок

Результат данного примера показан на рис. 1. К каждому заголовку добавлен уникальный идентификатор через атрибут id , а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

Рис. 1. Ссылки на заголовки

Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

Псевдокласс :target

CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target , как показано в примере 2.

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

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

Рис. 2. Стиль заголовка при переходе

Как переместить ссылки в противоположную сторону?

Как переместить ссылки в nav’е вправо, как показано на скрине, не используя position: relative;

Пока выходит вот это:

 
 
 
  MINTO 
  
 

.wrapper < width: 78.5%; margin: 0 auto; >header .wrapper < display: flex; >.logo < font-size: 39px; font-family: "Samo-Sans"; margin-top: 30px; >.logo a < display: flex; align-items: center; color: #a292b3; >.logo span < margin-left: 20px; >nav < margin-top: 54px; margin-left: 20%; >.topnav a < margin-right: 70px; text-align: right; color: #545454; font-size: 19px; font-family: "Sofia"; font-weight: 100; >.topnav a img < margin-right: 5px; >.topnav a:hover

• Вопрос задан более трёх лет назад
• 2648 просмотров