Почему не работает ссылка в html

Изображение в качестве ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами и , как показано в примере 1.

Пример 1. Создание рисунка-ссылки

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

Чтобы убрать рамку, следует у тега установить атрибут border=»0″ (пример 2).

Пример 2. Удаление рамки вокруг изображения

Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).

Пример 3. Использование CSS

     A IMG  

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

Не работают ссылки html?

Нажимаете на ссылку, произойдет переход, не туда куда вам нужно. Сравниваете путь с тем, который должен быть. Вносите правки.

Vitalii Tytarchuk @Minotavr26 Автор вопроса
Vitalii Tytarchuk @Minotavr26 Автор вопроса
еще вот так сделал

в хроме работает норм, но теперь Live Server не работает
и я думаю на другом пк эта ссылка не будет актуальной

Решения вопроса 0
Ответы на вопрос 2

Владислав Лысков @Vlatqa Куратор тега HTML
Потому что пробел
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Я тоже столкнулся с такой проблемой, скорее всего это проблема появляется из-за указание пути к документу. Когда index.html запускается просто через браузер, он не видит ссылки начинающиеся с /, а когда весь проект запускается через, к примеру Live server, то он в корне документа может найти все файлы и поэтому все ссылки работают.

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +3 ещё

Как загружать большие файлы асинхронно с формы сайта на облачное хранилище s3?

• 1 подписчик
• 10 часов назад
• 42 просмотра

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

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

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

Пример 8.2. Использование абсолютных ссылок

      
Изучение HTML
  

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл . Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/Папка/Имя файла» со слэшем вначале. Так, запись Курсы означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

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

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

Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.

Один из самых худших вариантов, так как полностью перезагружает страницу. Скорее всего, с целью борьбы с ним и были созданы остальные способы создания пустых ссылок.

Изменяет адрес страницы, добавляет в конце #. Если было htmlacademy.ru, то после клика станет htmlacademy.ru/#. Прокручивает страницу к самому верху сайта. Если ссылка была в футере, то сайт прокрутится до самого начала. Это не всегда желательное поведение, поэтому этот вариант тоже отбросим.

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

Можно сделать полноценную якорную ссылку, но при этом без элементов с id=»noscroll» . Этот способ работает во всех браузерах, не скроллит страницу к началу, но меняет ссылку, добавляя #noscroll в конец адреса.

Достаточно старый способ, который благодаря JavaScript буквально просит ссылку ничего не делать. Правильнее было бы написать javascript: undefined; , но этот вариант длиннее, поэтому придумали более короткую замену void (0) , который также возвращает undefined . Этот вариант был создан ещё в то время, когда JavaScript инлайнили в разметку. Ссылка в этом случае никуда не прокручивается, что лучше, чем в предыдущем варианте. Сам же метод позволял создать AJAX-запрос без перезагрузки страницы. Например, при открытии попапа делается запрос у сервера на его контент, затем попап открывается, и отрисовывается полученный контент от сервера.

На самом деле, когда программистам нечем заняться, они начинают придумывать новые способы. Просто потому что они могут. В этом методе ничто никуда не прокручивается и не прыгает. В href можно добавить что угодно, а в JavaScript не добавлять новый onclick . Хотя раньше это было важно. Сейчас новое событие можно добавить с помощью addEventListener .

В новой спецификации разрешили вообще не указывать href , если он не нужен. Ссылка как будто превращается в : удаляется стандартное подчёркивание снизу и синий цвет, указанный по умолчанию. С такой ссылки удаляются состояния: active, focus, так как с ней нельзя взаимодействовать. Это очень хорошо, так как ссылки, действительно, пока нет. Но при этом пользовательская стилизация, которую пишете вы, продолжает работать. В целом, можно сказать, что это самый ленивый и правильный вариант, однако он не всем подходит.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.