Сделать ссылки html без

Как сделать ссылку, используя css а не тег?

Привет.
Это интересно.
Действительно можно попробовать сделать так.
Я подумаю и попробую это сделать, если что напишу комментарий.

Stepan Sidorov, сделать то можно, но соглашусь с ответом ниже — это велосипед, в котором нет смысла, так как вы усложняете код.

Danny Arty, Мне его нужно достать по простому.
Т.К. мне нужно это все парсить с помощю BeautifulSoup, и чтобы не мучится, какой это тег и что за стиль, проще будет прочитать название класса в span.

Lynn «Кофеман», очень много тегов, и лишь тег с текстом это span.
Поэтому проще получить span, и его класс, чем фильтровать теги без текса, и теги с текстом. Причем не понятно как фильтровать.

Stepan Sidorov, тег со ссылкой только один — a. Так что аргумент про очень много тегов это какой-то бред.

Вообще похоже на проблему XY.

В первую очередь — нахрена парсить beautiful soup- ом свой же код?

Не бывает задачи «парсить собственный сайт» (если это не идиотское домашнее задание).

Но продолжайте есть кактус, ок.

Евгений Голубев, Зачем тебе знать итогоговую задачу?
Я не пытаюсь парсить свой собственный сайт, я об этом написал, видимо ты не прочел.

Источник

Сделать ссылки html без

Рассмотрим как работают ссылки в HTML. Если вы уже успели изучить основы HTML, то вы знаете что HTML расшифровывается как язык гипертекстовой разметки. Важную роль в языке играют гиперссылки (гипертекстовые ссылки), или просто ссылки.

Ссылки создаются с помощью тега . Ссылки бывают четырех видов:

Так же рассмотрим текстовые ссылки и ссылки-изображения. Ссылки на электронную почту и телефон. Как сделать кнопку-ссылку и как убрать подчеркивание ссылки.

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

Ссылка состоит из трех основных и четвертой (необязательной) частей.

Стиль ссылки по умолчанию:

color: -webkit-link;
cursor: pointer;
text-decoration: underline;

Атрибуты элемента

• _self : Ссылка откроется в текущем окне.
• _blank : Ссылка откроется в новом окне.

• alternate : Альтернативная версия текущей веб-страницы.
• author : Страница, содержащая данные об авторе страницы / статьи.
• bookmark : Ссылка на текущий раздел страницы.
• help : Помощь в зависимости от контекста.
• license : Лицензия на авторское право на текущий документ.
• next : Указывает, что страница находится в последовательности, а связанная страница является следующей страницей в последовательности.
• nofollow : Указывает, что связанный ресурс не одобрен автором текущего документа..
• noreferrer : Сообщает браузеру не отправлять заголовок реферера HTTP при переходе по ссылке..
• prefetch : Связанный ресурс должен быть кэширован.
• prev : Указывает, что страница находится в последовательности, а связанная страница является предыдущей страницей в последовательности.
• search : Средство поиска, которое можно использовать для поиска текущих и связанных документов.
• tag : Термин тегирования (не путать с тегами HTML), применяемый к ссылке.

HTML ссылки по видам

Ссылки на подключаемые ресурсы уже рассматривались ранее в материале «Основы HTML«. Эти ссылки создаются с помощью тегов и . Их задача — подключение внешних файлов.

Ссылки на web-страницы

Абсолютные

Абсолютные ссылки это такие ссылки в которых прописывается полный путь на ссылаемый документ. Например, сошлемся на Яндекс.

Не забываем, что атрибут target=»_blank» говорит нам о том. что ссылка откроется в новом окне.

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

Относительные ссылки это ссылки в которых прописывается относительный адрес на ссылаемый документ (относительно текущего домена). Например, в моем случае внутренней будет считаться ссылка вида:

То есть, все что после / относиться к текущему домену abuzov.com. Если перевести эту ссылку в абсолютную, то она примет следующий вид.

При этом результат на моем сайте будет одинаков — вы попадете на страницу «Текст в HTML».

Внутренние ссылки

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

Для создания якоря используется идентификатор id . Адрес ссылки на идентификатор начинается со знака #.

После клика по такой ссылке пользователь будет попадать в соответствующую часть HTML-документа.

Ссылки для скачивания

Что бы скачать какой-либо файл к ссылке добавляется атрибут download . Если этот атрибут отсутствует файл будет открываться (или пытаться открываться) в браузере. Например.

Файл с примером откроется в браузере 
Файл с примером будет скачан

Ссылки-изображения

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

Изображение вставляется с помощью тега о котором я расскажу в следующем материале из серии самоучитель HTML.

Об относительных путях

Вы уже второй раз сталкиваетесь с относительным путем. Давайте проясним ситуацию.

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

Обычно / — обозначает все, что идет после домена, то есть в моем случае abuzov.com = /.

Что бы задать путь текущей папки, то есть папки в которой находится документ, перед / ставиться . .

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

• / — корневая папка, домен сайта.
• ./ — текущая папка, в которой находится файл.
• ../ — папка на уровень выше в дереве.

Ссылка на электронную почту, телефон и скайп

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

Ссылка на номер телефона — это ссылка при клике на которую номер подставиться в приложение «Телефон» если вы находитесь на сайте с мобильного устройства. Если вы находитесь на сайте с компьютера то откроется программа для звонков по умолчанию.

• Позвонить пользователю — call.
• Начать чат с пользователем- chat.
• Добавить пользователя в контакты — add.
• Отправить пользователю файл — sendfile.

Пример (name это логин пользователя в скайпе).

Кнопка-ссылка

Давайте разберемся, как сделать кнопку-ссылку. Тут нужно задействовать элементы формы. Как создаются и работают формы вы можете узнать на этом сайте. Итак, следующий код создает кнопку которая является ссылкой.

В атрибуте action нужно ввести адрес ссылке. В атрибуте value нужно ввести текст кнопки.

Как убрать подчеркивание ссылки в HTML

Одним HTML тут не обойтись. Необходимо использовать CSS.

В начале статьи я приводил стиль элемента по умолчанию, напомню:

color: -webkit-link;
cursor: pointer;
text-decoration: underline;

Так вот, свойство text-decoration: underline; (в переводе с англ.: оформление текста: подчеркивание) подчеркивает ссылку. С помощью CSS нужно убрать его.

Итак, в этом материале мы научились создавать ссылки в HTML.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник