Как добавить ссылку в html
Перейти к содержимому

Как добавить ссылку в html

  • автор:

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

Ссылки в ХТМЛ играют одну из главных ролей. Без них мы не сможем ссылаться на другие страницы, подгружать внешние скрипты и даже простую картинку вывести на экран без ссылки невозможно, не говоря уже об аудио или видео файлах и прочих объектах.

Ссылка в HTML файл вставляется при помощи тега-контейнера анкор.
Текст между открывающимся и закрывающимся тегом «a» называют анкор. Он служит текстовым описанием ссылки и в поисковом продвижении также имеет важную роль как и текст в тегах , , , и прочих.

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

  цвет ссылок  link="#0000FF" alink="red" vlink="blue"> анкор1 анкор2 анкор3  

Атрибут link изменяет цвет ссылки по умолчанию
Атрибут alink изменяет цвет активной ссылки , если указатель мышки навести на ссылку то она приобретет заданный в этом атрибуте цвет.
Атрибут vlink изменяет цвет посещенной ссылки, т.е. ссылку страницы которой вы посетили ранее.
Ну а что бы изменить цвет одной или несколько ссылок, нужно применить уже знакомый нам тег FONT
анкор не правильный вариант, т.к. в этом варианте цвет тега FONT не распространяется на ссылку
анкор правильный вариант, так-же можно добавить атрибут size и fase при необходимости.
Для любительского сайта эти способы для изменения цвета ссылки вполне подойдут, но лучше это все делать при помощи таблиц стилей.

TITLE может быть не только тегом, но атрибутом тега A title=»web учебник для начинающих строителей сайтов» >Веб учебник, тоже самое только уже для пользователей, и уже пользователь поднесет курсор мышки на ссылку и сможет прочесть более детальное описание.

Закончить хотел следующим, что текст в атрибуте ALT и TITLE не должен дословно совпадать.

Смотрите также:

Так проводят всё лето

Так проводят всё лето

Как сделать список Li ссылкой?

Как сделать список Li ссылкой с помощью стилей CSS, чтобы клик был не по самой ссылке, а по блоку списка?

Отслеживать
4,417 4 4 золотых знака 26 26 серебряных знаков 49 49 бронзовых знаков
задан 27 окт 2017 в 8:26
123 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков
Разобрался. Кому нужно также, то ставим в стили на menu — .hmenu li .menu li > a
27 окт 2017 в 8:35
оформи пожалуйста тогда в виде ответа
27 окт 2017 в 9:25

@PauloBerezini Добавил. Если что не так, прошу модераторов не кидать камни. Я тут еще не освоил как работать ))

27 окт 2017 в 12:00
все нормально, если будут вопросы пишите мне)
27 окт 2017 в 14:11

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Сделал сам буквально двумя стилями

li < background: #ddd; border: 1px solid #ddd; padding: 5px; margin: 5px; width: 200px; list-style-type: none; >.menu li < cursor: pointer; >.menu li > a

Отслеживать
ответ дан 27 окт 2017 в 11:57
123 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков
У вас список li не стал кликабельным, вы добавили ему cursor: pointer;
7 авг 2022 в 6:50

Решение в этом ответе заставляет курсор менять свой вид над элементом списка, но кликабельной остаётся только зона ссылки внутри элемента списка.

Это нагляднее можно увидеть, если убрать правило CSS, меняющее вид курсора, и увеличить внутренние отступы у элемента списка.

Правильным решением будет убрать внутренние отступы у элемента li , добавить их элементу а , увеличить ширину элемента li на величину убранных внутренних отступов слева и справа:

li < background: #ddd; border: 1px solid #ddd; margin: 5px; width: 210px; list-style-type: none; >.menu li < cursor: pointer; >.menu li > a

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

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

Как заголовок сделать ссылкой?

В блогах заголовок сообщения обычно служит и ссылкой на полный текст. Чтобы заголовок, который создаётся с помощью тега превратить в ссылку, следует текст обернуть тегом . В HTML5 порядок тегов не имеет значения, поэтому блочный элемент можно вставить внутрь строчного элемента , но в HTML4 и XHTML тег обязан находиться внутри , но никак не наоборот.

Последняя линия справа

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

Ссылки с линией справа

Рис. 1. Ссылки с линией справа

Разноцветные ссылки

С помощью стилей задайте цвет ссылок, как показано на рис. 1.

Разноцветные ссылки

Рис. 1. Разноцветные ссылки

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

По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank .

Как добавить рисунок к внешним ссылкам?

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

Для изменения стиля ссылок создадим новый стилевой класс external и для него добавим рисунок в виде фона с помощью свойства background . При этом следует указать значение no-repeat , чтобы фон не повторялся.

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

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

Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчеркивание у ссылок с помощью свойства text-decoration со значением none .

Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?

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

Как на странице сделать ссылки разных цветов?

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

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

Псевдокласс :hover , который добавляется к селектору A , как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A , потом через двоеточие hover .

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

Популярные материалы

  • Самоучитель HTML4
  • Самоучитель CSS
  • Как добавить картинку на веб-страницу?
  • Спецсимволы
  • Структура HTML-кода
  • Введение в HTML
  • Способы добавления стилей на страницу
  • Выравнивание текста
  • Якоря
  • Позиционирование элементов
  • Как добавить иконку сайта в адресную строку браузера?
  • Ссылки

Добавляем ссылку HTML

Добавляем ссылку в HTML-страницу.

Урок №8
Добавляем ссылку в HTML-документ

В этом уроке, мы рассмотрим способ добавления ссылки на HTML-страницу.

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

Так как ссылки обычно ссылаются на другие страницы, то нам нужно создать еще одну HTML-страницу и сослаться на неё.

У нас уже есть одна страница Страница о снежном барсе (файл index.html ), давайте создадим еще одну HTML-страницу, она будет посвящена полярному волку .

Страница о полярном волке

Создайте на Рабочем столе HTML-файл:
polayrnyi-volk.html

Название страницы , сделайте:
Страница о полярном волке

Внедрите в неё, следующий CSS-код:

 h1 < color: green; font-family: Arial; >p

Заголовок статьи :
Полярный волк

Cтатья состоящая из двух абзацев :

Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на обширных пространствах северных регионов, которые пять месяцев в году, погружены в темноту. Чтобы выжить, волк приспособился есть практически любой корм, который только попадается ему на пути. Полярные волки хорошо усвоились к жизни в Арктике: они могут годами жить при минусовой температуре, месяцами не видеть солнечного света и неделями оставаться без пищи. Длина волка составляет 100-150 см, высота в холке может достигать 100 см, а масса у самцов переваливает за 100 кг. Продолжительность жизни полярного волка около 7 лет. В его рацион входят: леминги, зайцы, овцебыки, олени и птицы.

В итоге вы должны получить следующую страницу.

Подный код HTML-документа, страницы о полярном волке, приведён в конце этого урока.

Добавляем ссылку в HTML-документ

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

Добавьте в HTML-документ файла index.html ( Страница о снежном барсе ), перед закрывающим тегом , следующий код:

Так как файлы index.html и polyarnyi-volk.html находятся в одной папке Рабочий стол , то адресом страницы о полярном волке, будет просто имя его файла polyarnyi-volk.html

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

В итоге, HTML-документ файла index.html будет выглядеть следующим образом:

  Страница о снежном барсе h1 < color: green; font-family: Arial; >p 

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

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

Полярный волк

Открыв файл index.html с помощью браузера, вы должны увидеть следующее.

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

Добавьте в HTML-документ файла polyarnyi-volk.html , перед закрывающим тегом , следующий код:

В итоге, HTML-документ файла polyarnyi-volk.html будет выглядеть следующим образом:

  Страница о полярном волке h1 < color: green; font-family: Arial; >p 

Полярный волк

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

Полярные волки хорошо усвоились к жизни в Арктике: они могут годами жить при минусовой температуре, месяцами не видеть солнечного света и неделями оставаться без пищи. Длина волка составляет 100-150 см, высота в холке может достигать 100 см, а масса у самцов переваливает за 100 кг. Продолжительность жизни полярного волка около 7 лет. В его рацион входят: леминги, зайцы, овцебыки, олени и птицы.

Снежный барс

Открыв файл polyarnyi-volk.html с помощью браузера, вы должны увидеть следующее.

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

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

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

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