Как сделать ссылку на word в html?

Создание и изменение гиперссылок — Office

Самый быстрый способ создать простейшую гиперссылку в документе Office — нажать клавишу ВВОД или ПРОБЕЛ после ввода адреса веб-страницы, такого как http://www.contoso.com . Office автоматически преобразует адрес в ссылку.

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

Если вы хотите удалить ссылки и отключить автоматическое добавление гиперссылок в Office, см. статью Удаление и отключение гиперссылок.

Эта статья относится к классической версии Word, Excel, Outlook и PowerPoint. В Office Online предлагается упрощенный набор функций для работы с гиперссылками . Если у вас есть версия Office для настольных компьютеров, вы можете изменить документ для более сложных функций гиперссылок, а также попробовать или приобрести последнюю версию Office.

Выделите текст или рисунок, который должен представлять гиперссылку.

На вкладке Вставка нажмите кнопку Гиперссылка.

Также можно щелкнуть текст или рисунок правой кнопкой мыши и в контекстном меню выбрать пункт Гиперссылка.

В окне Вставка гиперссылки введите или вставьте ссылку в поле Адрес.

Примечание: Если вы не видите поле Адрес, убедитесь, что в разделе Связать с выбрано файлом, веб-страницей.

Вы также можете ввести другой текст для ссылки в поле Текст.

Примечание: Если вы не знаете адрес гиперссылки, нажмите кнопку Интернет и скопируйте URL-адрес страницы.

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

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

Выделите текст или рисунок, который должен представлять гиперссылку.

На вкладке Вставка нажмите кнопку Гиперссылка.

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

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

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

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

Выделите текст или рисунок, который должен представлять гиперссылку.

На вкладке Вставка нажмите кнопку Гиперссылка .

Также можно щелкнуть текст или рисунок правой кнопкой мыши и в контекстном меню выбрать пункт Гиперссылка.

В разделе Связать с щелкните элемент электронной почтой.

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

В поле Тема введите тему сообщения.

Примечание: Некоторые веб-браузеры и почтовые программы не распознают строку темы.

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

Можно также создать ссылку на пустое сообщение электронной почты, просто введя адрес в документе. Например, введите proverka@example.com, и гиперссылка будет создана автоматически (если автоматическое форматирование гиперссылок не отключено).

Вы можете создавать гиперссылки для перехода в документ Word или письмо Outlook, которое содержит стили заголовков или закладки. Также можно добавлять ссылки на слайды и произвольные показы в презентациях PowerPoint и отдельные ячейки и листы Excel.

Чтобы добавить стиль заголовка, выделите его текст, откройте вкладку Главная в Word или Формат текста в Outlook и выберите нужный вариант в группе Стили.

Создание гиперссылки на другое место в текущем документе

Выделите текст или рисунок, который должен представлять гиперссылку.

На вкладке Вставка нажмите кнопку Гиперссылка .

Также можно щелкнуть текст или рисунок правой кнопкой мыши и в контекстном меню выбрать пункт Гиперссылка.

В разделе Связать с выберите параметр Место в документе.

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

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

Создание гиперссылки на место в другом документе

Выделите текст или рисунок, который должен представлять гиперссылку.

На вкладке Вставка нажмите кнопку Гиперссылка .

Также можно щелкнуть текст или рисунок правой кнопкой мыши и в контекстном меню выбрать пункт Гиперссылка.

В группе Связать с щелкните элемент файлом, веб- страницей.

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

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

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

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

Чтобы изменить внешний вид гиперссылки, например начертание, размер или цвет шрифта, щелкните ее правой кнопкой мыши и выберите Шрифт в контекстном меню или щелкните вариант стиля на появившейся мини-панели инструментов.

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

Гиперссылка в ворде: создание и настройка

При написании дипломной работы или подготовке годового отчета возникает проблема ориентирования в документе из-за большого количества страниц. Уходит много времени, чтобы найти необходимый раздел и внести в него коррективы. Но есть простое решение – гиперссылка в ворде:


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

Гиперссылка на элемент текущего документа

Для начала нужно выбрать объект, который будет являться ссылкой. Если гиперссылка будет указывать на какой-то элемент текущего документа, то необходимо его выделить и создать в этом месте закладку. В Microsoft Word 2007 это сделать нетрудно. Нужно найти вкладку « Вставка », которая находится вверху на панели инструментов, открыть ее, найти группу « Ссылки », а в ней кликнуть по кнопке « Закладка ». Откроется диалоговое окно, в котором необходимо заполнить поле « Имя », и для завершения кликнуть на кнопку « Добавить ». Закладка готова.

Следующий этап в создании гиперссылки можно начать одним из двух способов: либо правой кнопкой мыши кликнуть по выделенному объекту, который был выбран для создания ссылки, либо снова открыть вкладку « Вставка » и в группе « Ссылки » выбрать пункт « Гиперссылка ». Далее откроется окно, и в разделе « Связать с » необходимо выбрать элемент с надписью « местом в документе »:

Читать еще:  Как сделать так чтобы в word текст шел вертикально?


После этого будет представлен список, в котором отобразится созданная ранее закладка. Ее нужно выбрать, кликнув по ней, и нажать кнопку « ОК ». Весь процесс займет менее минуты, потому как создать гиперссылку в ворде очень легко.

Гиперссылка на другой документ

Если необходимо сделать ссылку на другой документ, то следует выполнить следующие манипуляции:

  • В текущем документе выделить объект, который будет являться гиперссылкой;
  • Открыть окно « Вставка гиперссылки », кликнув по выделенному объекту правой кнопкой мыши, и выбрать пункт « Гиперссылка ». Или же найти этот пункт в « Ссылках » на вкладке « Вставка »;
  • Далее в колонке под названием « Связать с » выбрать первый пункт с надписью « файлом, веб-страницей »;
  • В поле « Папка » в стандартном окне проводника выбрать нужный элемент файловой системы;
  • В случае если необходимо сослаться на интернет-ресурс, нужно скопировать из строки адреса URL веб-страницы или сайта и вставить его в поле « Адрес »;
  • Для завершения кликнуть « Ок »:

Гиперссылка на элемент другого документа

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

После чего выполнить следующее:

  • Открыть документ, где будет находиться гиперссылка, и выбрать для нее объект;
  • Открыть окно « Вставка гиперссылки » ( следуя по шагам, описанным в предыдущем пункте );
  • Связать с необходимым документом, выбрав « Файлом, веб-страницей »;
  • Кликнуть по кнопке « Закладка …». В открывшемся окне выбрать созданную ранее закладку.
  • Нажать кнопку « Ок ».

После выполнения этих действий, будет создана гиперссылка на определенный раздел другого документа:

Гиперссылка на новый документ

Как сделать гиперссылку в ворде на новый документ? Для этого необходимо выполнить все действия, описанные в предыдущем пункте до момента, когда открывается диалоговое окно «Вставка гиперссылки».

После чего необходимо сделать следующее:

  • В колонке « Связать с » выбрать пункт « Новым документом »;
  • В поле « Имя нового документа » ввести имя, которое будет присвоено документу после активирования гиперссылки;
  • Указать место на диске, где будет храниться новый документ. Для этого нужно кликнуть по кнопке « Изменить » и выбрать нужный раздел;
  • В поле « Когда вносить правку в новый документ » выбрать « Позже »:


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

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

Так же, как и ранее, необходимо открыть диалоговое окно « Вставка гиперссылки ». Меняется лишь пункт в разделе « Связать с », в котором необходимо выбрать элемент с надписью « Электронной почтой ». Выполнив это, нужно в поле « Адрес » ввести адрес электронной почты и нажать « Ок »:


Теперь после клика по гиперссылке стандартный почтовый клиент будет создавать шаблон письма на указанный ранее адрес.

Есть еще один способ, как можно вставить в текст документа гиперссылку – необходимо просто набрать его с помощью клавиатуры и нажать Enter . Ссылка будет создана автоматически. Это очень удобно, если гиперссылка не должна быть скрытой.

То же самое можно проделать и с URL адресом веб-страницы – его нужно скопировать из адресной строки браузера и вставить в документ. Получается готовая ссылка, при нажатии на которую откроется нужная страница в интернете.

Для того чтобы гиперссылками было удобнее пользоваться, при их создании в окне « Вставка гиперссылки » можно добавлять подсказку, кликнув по кнопке « Подсказка ». Откроется окно под названием « Подсказка для гиперссылки ». В поле « Текст подсказки » необходимо ввести словосочетание, по которому можно легко понять, куда приведет ссылка. Для завершения нужно нажать на кнопку « Ок ». Теперь при наведении курсора на ссылку будет отображаться созданная подсказка.

По умолчанию гиперссылка в Word активируется при помощи кнопки « Ctrl » и последующего клика по ссылке. Чтобы не нажимать клавишу « Ctrl », необходимо зайти в настройки программы, кликнув по вкладке « Файл » вверху панели инструментов, и выбрать пункт « Параметры ».

После этого откроется окно « Параметры Word », в котором необходимо выбрать пункт « Дополнительно ». Справа, в подразделе « Параметры правки » нужно снять галочку с пункта « Ctrl + щелчок для выбора гиперссылки ». В результате этих манипуляций ссылка будет открываться после клика по ней:

Удаление гиперссылок в ворде

Как удалить гиперссылку в ворде? Чтобы удалить гиперссылку, достаточно просто навести на нее курсор, нажать правую кнопку мыши и выбрать из меню пункт « Удалить гиперссылку ». При этом текст или изображение, которое было основой для ссылки, останется на своем месте без каких-либо изменений:


Есть еще один способ, как убрать гиперссылку – установить курсор у крайнего справа символа ссылки, нажать клавишу « Backspace » один раз. После этого исчезнет выделение цветом и подчеркивание. Это означает, что ссылка удалена.

Чтобы полностью удалить всю ссылку вместе с объектом ( символы, изображение, текст ) нужно полностью выделить объект и нажать клавишу « Delete ».

В этой статье было описано, как вставить гиперссылку в ворде, которая ссылалась бы на раздел текущего документа или создавала новый на адрес электронной почты или интернет ресурс. Также были рассмотрены способы удаления гиперссылок. Процесс создания и удаления гиперссылок в версиях Microsoft Word 2007 , 2010 , 2013 не отличается, поэтому данная статья будет актуальна для всех перечисленных версий продукта.

Как легко сделать гиперссылку в Word и Google Документах: подробная инструкция

Сегодня мы поговорим о самом популярном текстовом редакторе Word. Когда я училась в университете, то с трудом постигала премудрости взаимодействия с ним. У меня в одной курсовой работе могли быть разные шрифты, поля, отступы между строками. Я не знала, как сделать нумерацию страниц, оглавление, примечания, как сохранить Word в PDF и другие форматы. Время шло, и я приобретала новый опыт работы с текстами, которым теперь хочу поделиться с вами. Сегодня мы разберемся, как сделать гиперссылку в Word.

Что такое ссылки и какими бывают

Тексты могут быть небольшими, на 1 – 2 странички, или довольно объемными, на 100 – 200 листов и более, например, книги, дипломные работы, диссертации. В них удобно делать быстрые переходы от одной главы к другой. Эту задачу помогают решить гиперссылки, они же просто ссылки или линки от английского слова link.

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

Но переход может осуществляться не только к элементам в пределах одной книги или проекта. Вы можете также направить читателя:

  • на другой файл,
  • на новый документ,
  • на электронную почту,
  • на сайт.

Линком может выступить любой символ, слово, графическое изображение, словосочетание или целое предложение. Главное, чтобы человеку было понятно, куда он ведет. Дальше я покажу все варианты гиперссылок, которые можно создать в Word.

Примечание: у меня установлена программа 2016 года выпуска, но ее интерфейс почти не отличается от версии 2013. Если у вас более ранние варианты Office, делайте все точно так же, алгоритм действий не меняется, просто нужно найти соответствующие пункты в меню.

Как создать гиперссылку

Чтобы найти нужную опцию в текстовом редакторе, выделите фрагмент материала, который выступит ссылкой, нажмите в меню на слово “Вставка” и выберите нужную опцию.

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

Читать еще:  Как сделать шаблон договора в word?

Гиперссылки в пределах одного документа

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

Переход в начало документа

Это самый простой вариант, в котором нужно задать только пункт “А”, то есть текст или картинку, нажав на которую мы окажемся на титульной странице.

Выделяем объект, нажимаем на опцию для создания линков, затем в диалоговом окне выбираем место в файле.

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

Переход к заголовку

Чтобы выполнить эту задачу, сначала нужно обозначить место назначения (пункт “Б”) как заголовок. Для этого выделите фразу, перейдите в главную панель и выберите уровень подраздела.

Теперь выделяем элемент, который станет гиперссылкой, идем в панель “Вставка”, “Ссылки”. В диалоговом окне выбираем в качестве целевого объекта “Заголовки” и нужный фрагмент.

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

Переход к закладке

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

Напишите имя и сохраните изменения.

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

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

Другие виды гиперссылок

Разберемся, какие еще есть виды линков в текстовом редакторе.

На другой документ

Можно создать линк на любой объект, который находится на компьютере. Для этого идем все в то же меню “Вставка”, “Ссылки” и в окне параметров выбираем вид связи. Затем находим нужный объект на жестком диске и подтверждаем действие.

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

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

Затем в параметрах линка укажите документ и конкретный элемент в нем.

На новый документ

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

Чтобы создавать такие объекты, не отрываясь от работы, переходим в раздел “Вкладка”, “Ссылки” и указываем нужные параметры:

  • название;
  • папку на компьютере, в которой объект будет храниться;
  • время редактирования: сейчас или позже.

Обратите внимание, что в том же диалоговом окне, где мы выбираем место хранения, нужно указать формат. Если вы хотите создать файл Word, то кликаем на вариант “Документы”.

На электронную почту

Этот вариант удобно использовать, если вы хотите, чтобы читатели могли легко связаться с вами или с другим человеком, или организацией. Для этого используем “Вставка”, уже известную нам опцию на панели. В параметрах указываем только e-mail, на который будет направляться письмо.

После перехода по такому линку откроется Outlook или другой почтовый клиент, который установлен на компьютере. В поле адресата сразу появится нужный e-mail, и человеку останется лишь написать текст послания.

На веб-страницу

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

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

Дополнительные настройки

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

Для этого заходим в раздел “Файл” основного меню, идем в пункт “Параметры”, “Дополнительно” и убираем одну “птичку”, как это показано на скриншоте.

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

Как можно оформить гиперссылку

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

В любое время вы можете изменить внешний вид гиперссылок:

  • убрать или добавить подчеркивание;
  • сделать шрифт полужирным и курсивом;
  • изменить цвет гиперссылки, по которой еще ни разу не переходили;
  • задать цвет фона и спецэффекты: тени, свечение, контуры.

Для этого выделите курсором фрагмент и воспользуйтесь стандартными средствами Word.

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

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

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

Как сделать ссылку в Google Документах

Если вы создаете текстовые документы на Google Диске, то знаете, что этот редактор очень похож на Word. Интерфейс интуитивно понятен тем, кто привык к опциям, доступным в программе от Microsoft. Можно здесь делать и гиперссылки. Для этого используйте следующие варианты.

  • Выбрать в меню вкладку “Вставка” и соответствующий инструмент.

  • Выделить фрагмент, нажать правой кнопкой мыши и кликнуть по опции.

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

Чтобы сделать закладку в Google Документах, выделите элемент и в меню “Вставка” кликните на соответствующую опцию.

Заключение

Мы рассмотрели с вами все варианты гиперссылок в Word и научились их создавать. Надеюсь, теперь вы сможете легко пользоваться этим инструментом. Если все же остались вопросы, пишите их в комментариях, я постараюсь помочь. Сохраняйте статью в закладки, чтобы вернуться к инструкциям, если вдруг что-то забудете.

Как сделать ссылку на сайт html

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

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

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

Как сделать ссылку на сайт html

Разберём ссылку по фрагментам:

Описание элементов ссылки

  • . — парный тег, даёт понять браузеру, что мы используем на странице гиперссылку, то есть формируем ссылку — переход на иную страницу (другой источник);
  • href=». » — параметр указывает браузеру, на какой адрес в интернете ведёт данная ссылка;
  • http://vash-sait.ru — здесь прописывается нужный адрес вашей страницы ( любой адрес ), то есть куда будет вести ваша ссылка;
  • Переход по ссылке — называние или отображение вашей ссылки (прописываете любое).

Теперь этот файл index.html откройте в браузере и посмотрите результат.

Если у вас открылась страница (при переходе по ссылке) и отобразились не русские слова, то вам нужно проверить Кодировку и быстро исправить положение.

Читать еще:  Как таблицу excel сделать в word?

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

Параметры ссылки

По необходимости следует прописать некоторые параметры для ссылки, как: target , title и class .

Наша ссылка с параметрами примет такой вид, привожу код ссылки:

Параметры ссылки и значения

  • class — данный параметр для ссылки вам придётся применять частенько и он служит для оформления (внешнего вида), и об этом подробно я разберу ниже;
  • title — с помощью этого параметра укажем ссылке подсказку, которая начнёт появляться при наведение мышкой на ссылку;
  • target — это параметр указывает браузеру в каком окне следует открыть документ. Значение _blank — ссылка откроется в новом окне. Если этот параметр ссылки не прописывать, то документ откроется в этом же окне.

Вы будете разумеется добавлять только необходимые параметры для своей ссылки (они не обязательны).

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

Ну и последнее, мы займёмся оформлением для нашей ссылки.

CSS ссылка: стилевое оформление / вид ссылок

На html страницах всегда присутствует огромное число ссылок и для того, чтобы каждая группа (либо ссылка в отдельности) имела разновидность по виду, применяют стилевое CSS оформление. Если для вас это не знакомо, то посмотрите видео по основам html и css.

Чтобы это осуществить необходимо группе гипертекстовых ссылок (либо одной ссылке) задать свой class=»» с определённым именем, где для него с помощью CSS ссылка приобрела нужный вид.

Имя для class=»» прописывается любое, главное латиницей и без повторов.

К примеру код ссылки будет выглядеть так:

Основные свойства CSS ссылки

  • a:link — ссылка в спокойном состояние, не нажатая, не посещённая;
  • a:hover — ссылка, на которую навели мышкой, то есть при наведение указателем мыши;
  • a:visited — это посещённая ссылка (по ней перешли, она была нажата);
  • a:active — ссылка при нажатие указателем мыши.

Остальные свойства для CSS ссылки

  • text-decoration — со значением underline подчёркнутая ссылка, со значением none — подчёркивание отменено;
  • cursor — выбрав одно из значений к этому параметру курсор при наведение на ссылку примет свой вид, к примеру значение help — отобразит вопросительный знак. По умолчанию значение pointer — отображается значок руки и его прописывать не нужно;
  • display — если указать значение inline , то последующие ссылки отобразятся в одну строку (например, как в горизонтальном меню), если указать значение block , то ссылка примет блочный элемент (например, как в вертикальном меню);
  • background-image — для ссылки добавляется картинка;
  • background-color — для ссылки добавляется цвет фона;
  • padding — отступы для ссылки, обязательны, если вы используете фон (цвет, картинка);
  • border — придаёт ссылке рамку (с любой стороны, либо со всех четырёх).

Пример CCS ссылки прописанного выше кода:

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

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

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

Ссылки в HTML

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

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

Также они используются в следующих случаях:

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

Ссылки имеют следующий синтаксис:

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

Существует 2 типа адресов, это абсолютный адрес и относительный.

Абсолютный адрес это когда указываем адрес какого-то сайта из интернета, вместе с протоколом http. Например:

После клика по данной ссылке мы перейдём в социальную сеть ВКонтакте.

Относительный путь это путь относительно текущего файла. Допустим, в папку сайта находится два файла, главная страница index.html и страница о нас about.html. Для того чтобы мы смогли перейти с главной страницы на страницу о нас, в значение атрибута href у ссылки на главной странице нужно написать название файла который отвечает за страницу на которой хотим перейти. В нашем случае мы хотим сделать ссылку для перехода с главной странице на страницу о нас, поэтому в коде главной странице добавляем такую ссылку:

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

Вместо якоря ссылки может быть и изображение. Нажимая на изображение, мы перейдём на указанный адрес в значение атрибута ссылки href. Вот пример такой ссылки:

HTML код такой ссылки следующий:

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

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

Посмотрим это на примере. Напишем следующие строки в код странице.

Открываем страницу в браузере и смотрим на результат:

После клика на изображение, оно откроется в браузере.

Ссылка на файл

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

И так для того чтобы это реализовать нужно в значение атрибута ссылки href, указать путь к файлу для скачивания. Например, нужно сделать так чтобы пользователь смог скачать какой-нибудь документ с расширением .docx. Для начала на хостинге сайта создаем папку для файлов, назовем ее, например files. Вставляем в созданную папку нужный файл и в коде страницы пишем следующие строки:

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

Аналогично можно сделать и с остальными типами файлов.

И на этом все. Из этой статьи Вы узнали следующие:

  • Как создать ссылку на другую страницу.
  • Как сделать изображение ссылкой.
  • Как сделать ссылку на изображение
  • Как создать ссылку на файл.

Теперь Вы сможете сделать все это сами. Без чьей либо помощи.

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

  • — ВКонтакте
  • — Facebook
  • — Одноклассниках

Добавляйтесь в мои группы:

  • — Группа в ВКонтакте
  • — Группа в Facebook
  • — Группа в Одноклассниках

Подпишитесь на мои каналы:

  • — Мой канал на Youtube
  • — Мой канал на Google+

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО.

Дата добавления: 2015-12-11 11:50:05

Ссылка на основную публикацию
Adblock
detector