Совет 1: Как сделать ссылку картинкой

Если вы активный пользователь сети интернет, вы наверняка время от времени пользуетесь форумами, блогами и социальными сетями. В этой среде часто приходится использовать язык разметки и форматирования HTML (чаще в блогах), либо BB-Code (обычно на форумах и в соц.сетях) для текстов, картинок и ссылок. Рассмотрим, как правильно и быстро сделать ссылку картинкой ручным способом.
Вам понадобится
  • — компьютер
  • — доступ в интернет
  • — поле ввода для html или bb-code
Инструкция
1
Сначала сделаем ссылку в виде картинки с помощью ручного HTML. Этот метод, например, используется при оформлении постов в livejournal.

<a href="http://server.ru/" target="_blank"><img src="http://server.ru/picture.jpg" alt="Ссылка на server.ru" border="0"></a>
Параметр href содержит ссылку, на которую пользователь перейдет после клика по картинке.

Параметр target отражает поведение браузера при открытии ссылки. В данном случае стоит значение _blank, то есть браузер откроет ссылку в новом окне (или вкладке).

img src — это путь к картинке, из которой мы делаем ссылку.

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

Значение border="0" позволит убрать рамку вокруг картинки. Если она все-таки нужна, вместо нуля поставьте единицу.
2
С HTML разобрались. Теперь добьемся аналогичного результата с помощью bb-кода.

[url=http://server.ru][img]http://server.ru/picture.jpg[/img][/url]
Здесь, как видите, все несколько проще.

Нам надо указать параметр url, он содержит саму ссылку. После этого указываем параметр img, в нем путь до картинки, из которой мы хотим сделать ссылку.

Совет 2: Как сделать ссылку в ссылке в 2017 году

Наверняка вы не раз замечали так называемые «кликабельные» ссылки на страницах различных интернет ресурсов. По таким ссылкам человек может сразу же перейти на интересующую его страницу без необходимости копирования данной ссылки, затем последующей ее вставки в браузер. Существуют различные графические редакторы, которые позволяют вам автоматически делать ссылку в ссылке. Но что если подобного графического редактора у вас под рукой не оказалось? Выход все равно есть, для этого вам необходимо знать всего лишь несколько команд языка HTML.
Вам понадобится
  • - азы html
Инструкция
1
Первый вариант оформления:

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

<a href="http://”название_сайта”>Текст</a>

Вместо слова «название_сайта» вставьте адрес ресурса, на который должна вести ссылка.

Если вы хотите, чтобы ссылка открывалась в новом окне, тогда необходимо добавить комбинацию target=’_blank’ сразу же внутри открывающего тега <a>

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

<a target=’_blank’ href="http://”название_сайта”>Текст</a>

Важно отметить, что кавычки необходимо ставить прямые, а не фигурные. В том случае, если вы предварительно набираете тексты в Microsoft Word, он автоматически может заменять прямые кавычки на фигурные. Чтобы этого не произошло, можно выключить автозамену в меню Сервис – Параметры автозамены – Автоформат при вводе. Снимите самый первый флажок, теперь кавычки будут всегда прямыми.
2
Второй вариант оформления (больше подходит для форумов):

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

[url=http://название_сайта]Анкор_ссылки[/url]

Как видите, здесь кавычек уже ставить не нужно.
Видео по теме
Обратите внимание
Избегайте лишних пробелов и прочих ненужных символов. Язык HTML – это точный язык команд, где каждый дополнительный символ может сыграть роль. Если вам сложно запомнить код, просто каждый раз копируйте его, меняя только текст ссылки и саму ссылку на нужные вам параметры.

Совет 3: Как сделать активной ссылку

Что такое «кликабельные» ссылки? Это такие ссылки, которые позволяют пользователю сразу перейти на интересующую его страницу. Отпадает необходимость копировать ссылку, а потом вставлять ее в браузер. Многие графические редакторы позволяют автоматически делать ссылку активной. Однако «кликабельную» ссылку можно сделать и без графического редактора, использую всего лишь несколько команд языка HTML. Существует два варианта оформления таких ссылок.
Инструкция
1
Выберите часть текста предложения или текста неактивной ссылки, которую нужно сделать активной.
2
Вставьте выбранный текст в следующую конструкцию:

Текст

Вместо словосочетания «название сайта» укажите адрес того ресурса, на который должна вести ссылка.
3
Для того чтобы ссылка открывалась в новом окне, внутри открывающего тега добавьте вот такую комбинацию: target=’_blank’. Получаем следующее:

Текст
4
Запомните, что следует использовать только прямые кавычки. Если вы предварительно набираете текст в Microsoft Word, он автоматически может заменять прямые кавычки на фигурные. Чтобы это предотвратить, зайдите в меню Сервис – Параметры автозамены – Автоформат при вводе. Отключите параметр автозамены, сняв первый флажок. Теперь кавычки всегда будут прямыми.
5
Полученный код ссылки вставьте в нужное место на вашем сайте.
Видео по теме
Обратите внимание
HTML – это точный язык разметки гипертекстовых документов, в котором каждый символ играет важную роль. HTML отвечает за расположение в документе ваших текстов, рисунков, таблиц, предназначенных для сети Интернет. Поэтому любой дополнительный символ может изменить значение команды. В связи с этим необходимо избегать ненужных символов: пробелов, запятых и пр. Необходимый код лучше запомнить. Если вам сложно это сделать, каждый раз просто копируйте его. Не забывайте при этом менять текст ссылки и саму ссылку на нужные параметры.

Совет 4: Как сделать ссылку в интернете

Интернет вошел в каждый дом и стал незаменимым источником информации, в котором вы каждый день находите что-то интересное и полезное для себя. Если эти находки необходимы кому-то кроме вас, вдвойне приятно и хочется поделиться. Но как сделать, чтобы ваш друг мог прочитать страничку, которая вам приглянулась? Для этого люди обмениваются ссылками. Чтобы передать ссылку по электронной почте или создать гиперссылку в сообщении форума (блога), скопируйте адрес нужной страницы из адресной строки.
Вам понадобится
  • компьютер
  • подключение к интернету
  • браузер
  • минимальные навыки пользователя
  • умение работать по инструкции
Инструкция
1
Как найти адресную строку.Каждая страница в интернете имеет свой уникальный адрес, записанный в адресной строке. Она находится в верхней части окна браузера и начинается с протокола http:// , а заканчивается национальным доменным именем .ru (.ua или .uk – это зависит от страны, на которую зарегистрирован домен).
2
Как скопировать адрес.Кликните правой кнопкой мыши в адресной строке (адрес выделится синим); в появившемся контекстном меню выберите команду «Копировать».
Как сделать <strong>ссылку</strong> в <b>интернете</b>
3
Как отправить ссылку другу.Вставьте скопированный адрес в сообщение электронной почты или интернет-пейджера (аська, квип, Майл-агент). Отправьте письмо, в нем адресат обнаружит ссылку, по которой сразу же перейдет на указанную страницу.
Как сделать <strong>ссылку</strong> в <b>интернете</b>
4
Как вставить ссылку в сообщение блога или форума.В поле ввода сообщения вставьте скопированный адрес и окружите его тэгами [URL]адрес[/URL], тогда в тексте ссылка окажется подчеркнутой.
5
Как вставить гиперссылку с названием странички. Над полем отправки сообщения в форумах и блогах обычно находятся кнопки форматирования текста. Среди них есть одна, позволяющая создать гиперссылку с названием. Она бывает обозначена по-разному: http, «ссылка», значок с загогулиной, - но при наведении мыши всплывает подсказка «Добавить ссылку».
Как сделать <strong>ссылку</strong> в <b>интернете</b>
6
Кликните на эту кнопку – откроется маленькое окошко, где надо будет ввести URL страницы (то, что вы скопировали из адресной строки). Вставьте его и нажмите ОК.
7
Появится следующее окошко, где требуется ввести название страницы, расположенной по этому адресу. Затем нажмите кнопку «Отправить», чтобы опубликовать свое сообщение на сайте. В опубликованном сообщении окажется подчеркнутое название страницы, которое и является гиперссылкой. Такой текст выглядит более опрятно.
8
Как перейти по гиперссылке.Наведите на ссылку указатель мыши – и его вид изменится: он превратится в руку с вытянутым указательным пальцем. Сама ссылка поменяет цвет. Один клик левой кнопкой – и вы переходите на заданную страницу.
Источники:
  • блог учителя

Совет 5: Как поставить картинки на форумах

Общаясь на форумах, вы можете не только оставлять текстовые сообщения, но и присоединять к постам графические и мультимедийные элементы (картинки, видеофайлы, анимацию). Все это делается через простой и понятный интерфейс форума.
Вам понадобится
  • Компьютер, доступ в интернет.
Инструкция
1
На сегодняшний день существует три способа, позволяющих пользователям вставлять картинки в свои сообщения на форумах: вставка изображения через BB-код, интеграция картинки посредством интерфейса форума, а также вставка картинки через расширенный режим текстового редактора.
2
Вы можете поставить картинки на форумах с использованием BB-кодов. Для этого вам понадобится ссылка на изображение, размещенное в интернете. Если вы желаете поставить свою картинку, в таком случае, вам нужно сначала разместить ее в сети для получения ссылки на файл. После того, как вы получите ссылку на изображение, вы можете запостить его в своем сообщении. Для этого выполните следующие действия: в окне написания сообщения пропишите код [IMG]ссылка на картинку с http:// [/IMG]. Отправьте сообщение, и картинка отобразится в нем (если форум поддерживает BB-код).
3
Вы также можете поставить картинку с помощью специальной кнопки графического редактора на форуме. Для этого найдите в форме нового сообщения иконку загрузки изображения и кликните по ней. В появившемся окне «лоадера» найдите нужное изображение и вставьте его в сообщение. Такая возможность присутствует на любом типе форума (если она не отключена администратором).
4
Если в форме нового сообщения вы не найдете кнопки для загрузки изображения, вам нужно перейти по ссылке «Расширенный режим», расположенной в нижней части формы. На следующей странице вы найдете нужную кнопку. Дальнейшие действия по вставке картинки идентичны действиям, рассмотренным в третьем шаге.

Совет 6: Как сделать быстрые ссылки

С недавних пор компания «Яндекс» ввела новую технологию «Быстрые ссылки» в собственную поисковую систему. Быстрые ссылки представляют собой строку из ссылок на разделы сайта, которые считаются основными или являются заголовками на главной странице сайта.
Вам понадобится
  • Собственный сайт.
Инструкция
1
Быстрые ссылки — это источник дополнительного трафика для вашего сайта. После добавления некоторых разделов в категорию «быстрых ссылок» в поиске «Яндекса» под ссылкой на ваш сайт с его описанием появится ряд ссылок. В качестве примера можно воспользоваться этим же сайтом и ввести его в поисковую строчку (так можно проверить реализацию этого новшества). После нажатия на клавишу Enter перед вами появятся результаты поиска.
2
Обратите внимание на первый пункт среди результатов — под заголовком и кратким описанием сайта вы увидите несколько ссылок на официальные группы «Яндекса» в социальных сетях. Это и есть технология «быстрых ссылок». Чтобы в поисковой выдаче для вашего сайта стали доступны такие же ссылки, достаточно правильно разместить разделы и соответствующим образом их пометить. Поисковый робот после проверки всего сайта соберет информацию о разделах, которые имеются на главной странице и передаст их «Яндексу» для формирования «быстрых ссылок».
3
Поскольку данный сервис еще только набирает обороты, следует выстроить логическую цепь подготовленных материалов на своем сайте. Вам необходимо четко разграничить контент, единицы которго будут находиться в своих разделах. Статьи, не находящиеся в определенных разделах, могут затруднить попаданию вашего детища в категорию сайтов с «быстрыми ссылками».
4
Рекомендуется исправить названия страниц и далее создавать короткие и емкие заголовки, поскольку место для ссылок в поисковой строке не так уж много. При создании материала ориентируйтесь на вставку качественных изображений, у которых будут прописаны все теги, включая значения атрибута alt. Еще одним условием добавления поисковым роботом нужных ссылок в поисковую выдачу является наличие одинаковых слов в заголовке страницы, в тексте внутри тегов H1 и title.
5
При желании лишние ссылки можно полностью исключить из выдачи. Для этого перейдите на страницу проекта «Яндекс.Вебмастер» и щелкните левой кнопкой мыши по разделу «Быстрые ссылки». Здесь вы можете выделить одну или несколько ссылок, затем нажать кнопку «Удалить».

Совет 7: Как сделать ссылку на скриншот

Многие пользователи на текущий момент уже знают о том, как вручную создавать скриншоты, т.е. снимки рабочего стола, а также как их загружать ради получения ссылки на изображение. Для автоматизации этого процесса, когда это особенно необходимо, рекомендуется пользоваться специализированными программами.
Вам понадобится
  • Программное обеспечение Jet Screenshot.
Инструкция
1
Если вы еще не знаете, как создавать скриншоты стандартным способом, попробуйте нажать кнопку PrintScreen. Затем запустите любой графический редактор и в новом файле осуществите операцию «Вставить из буфера обмена». После сохранения изображения его можно загрузить на сервер, например, Radikal, и получить ссылку на эту картинку.
2
Но в некоторых случаях требуется создание большего количества изображений рабочего стола, нежели всего один снимок. Использование стандартных средств считается нерациональным занятием, поэтому стоит использовать возможности новых программ. В качестве примера будет рассмотрена работа с утилитой Jet Screenshot.
3
Прежде всего вам понадобятся установочные файлы программы, которые можно загрузить с официального сайта. Перейдите по ссылке, указанной ниже, и нажмите кнопку Download Now. Т.к. программа занимает довольно мало места, ее загрузка пройдет быстро. Установка утилиты производится в штатном режиме, используя подсказки мастера инсталляции.
4
После установки и запуска программы ее значок появляется в системной панели, которая также зовется треем. Нажмите правой кнопкой мыши на значке, чтобы выбрать нужную область экрана. После того как вы отпустите левую кнопку мыши, все остальное пространство будет затемнено, и на экране появится небольшая панель инструментов. Здесь вы можете выбрать инструменты редактирования изображения: добавить надпись, выделить текст, кадрировать изображение и т.д.
5
По окончанию редактирования скриншота необходимо нажать кнопку размещения изображения в сети — изображение автоматически сохранится, и вы получите ссылку на ваш скриншот. Выделите ссылку и скопируйте ее в буфер обмена. Теперь у вас есть ссылка для вставки вашего изображения на любую страницу сайта.
Источники:
  • Загрузить программу Jet Screenshot

Совет 8: Как сделать ссылку на странице в 2017 году

Оформление ссылок на источники информации или просто интересные ресурсы может стать первоклассным украшением страницы сайта. Самые распространенные формы гиперссылок – это текст, картинка и кнопка.
Инструкция
1
Зашифровать адрес двумя словами можно с помощью тегов, указанных на иллюстрации.
Как сделать <strong>ссылку</strong> на <b>странице</b>
2
Используйте элементы анимации. К примеру, при наведении курсора на ссылку может появляться подсказка. Код такой ссылки будет похож на иллюстрацию. Такая ссылка откроется в новом окне.
Как сделать <strong>ссылку</strong> на <b>странице</b>
3
Вместо текста можете вставить в предыдущий вариант ссылки картинку, код указан в иллюстрации (на одной строке).
Как сделать <strong>ссылку</strong> на <b>странице</b>
4
Избавьтесь от подчеркивания ссылки, изменив теги по шаблону иллюстрации.
Как сделать <strong>ссылку</strong> на <b>странице</b>
5
Заключите ссылку в рамку-пунктир. Вставьте теги с картинки (на одной строке).
Как сделать <strong>ссылку</strong> на <b>странице</b>
6
Используйте вместо ссылки кнопку. Ее код будет выглядеть примерно как на иллюстрации.
Как сделать <strong>ссылку</strong> на <b>странице</b>
Видео по теме
Источники:
  • каталог кодов для сайтов и блогов

Совет 9: Как сделать ссылку в тексте

Текстовые сообщения в блогах, наряду с обычным текстом, содержат слова и фразы, выделенные синим цветом и подчеркиванием. При нажатии этих слов вы переходите на новые интернет-страницы – того же блога или другого ресурса. При создании таких гиперссылок используется код HTML.
Вам понадобится
  • Компьютер с подключением к интернету
Инструкция
1
Введите текст сообщения в блоге. Выберите текст, который хотите сделать ссылкой, лучше одно или два слова. Щелкните курсором в его начале.
2
Введите фрагмент кода, изображенного на иллюстрации. Щелкните в конце куска и вставьте второй фрагмент кода. При нажатии на ссылку в таком оформлении пользователь будет переходить на новую страницу в том же окне и в той же вкладке.
Как сделать ссылку в тексте
3
Можете оформить ссылку, которая будет открываться в новом окне. Для этого в начале текста ссылки введите фрагмент кода с иллюстрации. В конце текста ссылки введите тег:
Как сделать ссылку в тексте
4
Если вы не хотите, чтобы ссылка выделялась подчеркиванием, перед текстом ссылки поставьте код с новой картинки, а после текста окончание: .
Как сделать ссылку в тексте
5
Чтобы ссылка оказалась в рамке, вставьте перед текстом ссылки тег с картинки. Конечный тег совпадает с предыдущими вариантами. Заметьте, что border и следующее за этим словом число 2 - это толщина рамки и ее значение в пикселях, solid navy - синий цвет рамки (можете ввести другой по своему усмотрению), padding - расстояние от букв до рамки в пикселях.
Как сделать ссылку в тексте
Видео по теме
Обратите внимание
Сайт или блог должен поддерживать режим работы с HTML.
Источники:
  • каталог кодов для сайтов и блогов

Совет 10: Как сделать ссылку для рисунка

Оформление ссылок на картинки делается практически таким же образом, как оформление гиперссылок на обычные страницы сайта. При создании сообщения на сайте или в блоге вы можете вставить такую ссылку в режиме редактирования HTML.
Инструкция
1
Вставка ссылки, зашифрованной под текст, может быть оформлена следующим тегом: <a href="Адрес картинки"> Ваш текст </a>. Пример: <a href="http://www.revision.ru/images/authors/1359/orange.jpg">Мы делили апельсин…</a>. А так эта ссылка будет выглядеть после сохранения сообщения:Мы делили апельсин…
2
.   Щелчок по ссылке может открывать новое окно, в котором будет отображаться картинка. Тег такой ссылки: <a href=" Адрес картинки " target="_blank">Текст ссылки</a>.  
3
Чтобы при наведении курсора рядом с текстом ссылки появлялся комментарий, используйте такой тег: <a href=" Адрес картинки " target="_blank" title="Комментарий к ссылке">Текст ссылки</a>.  
4
Ссылкой на картинку может служить другая картинка. В таком случае тег выглядит таким образом: <a href="Адрес картинки" target=_blank title="Комментарий"><img src="URL картинки, отображаемой в блоге"></a>. Картинка будет открыта в новом окне, при наведении курсора на ссылку появляется комментарий.
Видео по теме
Обратите внимание
Сообщение с тегами нужно создавать в режиме HTML, иначе кодировка не будет прочитана нормально.

Совет 11: Как сделать ссылку неактивной

Если опубликованная на сайте ссылка вдруг оказалась ненужной, то ее можно сделать неактивной. Это значит, что пользователь с ее помощью больше не сможет переходить по заданному адресу.
Инструкция
1
Чтобы ссылка стала неактивной, достаточно «почистить» код, или просто убрать тег <a>, без которого осуществить переход будет невозможно. В принципе, такого результата можно будет достичь, если стереть адрес в атрибуте href. Но подобное действие при игнорировании тега <a> несет в себе побочный эффект: анкор будет замаскирован под ссылку, но без последующего перехода. Иными словами, если предусмотрено изменение участка текста/картинки при наведении курсора, то оно будет осуществляться как и прежде. Поэтому нужно полностью «вырезать» всю связку <a href> с закрывающим тегом </a>.
2
В cms ссылкам на панели инструментов соответствует два значка: один необходим для их вставки, другой потребуется в случае дезактивации. С их помощью сделать переход неосуществимым можно в два действия.
3
Левой кнопкой мыши выделите в окне редактора текст ссылки полностью. Если останется хотя бы один знак, то он будет продолжать «работать».
4
Нажмите на значок «Удалить ссылку», после чего объект перестанет функционировать. Для восстановления его работоспособности необходимо проделать то же самое, разве что с участием кнопки «Вставить ссылку».
5
Прием может применяться в качестве декоративного элемента сайта. Чтобы часть текста отображалась в виде ссылки, но при клике переход не осуществлялся, интересующее место должно быть помечено в коде одним из следующих способов.
• Html:
        <a href="">Текст</a>
• PHP:
       <?php
        $count = rand(3,10);
        for ($i=0; $i<$count; $i++)
       $href .= chr(rand(97, 122));
       echo '<a href="http://'.$href.'.com">Текст</a>';
       ?>
• CSS/html:
       <html>
       <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>hover</title>
              <style type="text/css">
               a:link {
              color: #значение цвета;
               padding: значение px;
              }
              a:hover {
               background: #значение цвета фона;
                color: #значение цвета ссылки;
               }
              </style>
       </head>
       <body>
               <p><a href="1.html">Текст</a></p>
       </body>
       </html>

Совет 12: Как сделать превью картинки

Превью картинки может понадобиться во многих случаях. Например, вы пишете статью и размещаете её на сайте, используя иллюстрации. Большие картинки вставлять в текст немного нелепо. Громоздкие и мешающие читать, они будут отвлекать внимание. Но хочется, чтобы читатель при желании все же имел возможность рассмотреть их. Превью картинок – отличное решение проблемы.
Вам понадобится
  • графический редактор, картинка
Инструкция
1
Чтобы сделать превью картинки, нужно загрузить большой файл изображения в графический редактор, например, в Adobe Photoshop или аналогичные. Затем уменьшите размер картинки в пикселях. Обычно для превью используются картинки разрешения примерно 200x200 пикселей, но для ваших целей, возможно, подойдет другой размер.
2
Сохраните уменьшенную версию картинки отдельным файлом. В некоторых редакторах можно выбрать степень сжатия. Если вы отправляете картинку в интернет, можете применить чуть более сильное сжатие, чтобы изображение быстрее грузилось у тех, кто будет просматривать ваш текст.
3
Для превью не обязательно уменьшать всю картинку, некоторые предпочитают вырезать небольшой фрагмент и в качестве превью использовать его. Это зависит от ваших вкусовых предпочтений и целей текста.
4
Затем загружайте обе картинки на файловый хостинг. Вам нужно получить прямые адреса для обеих картинок. Код для размещения изображений:
<a href="прямая ссылка на большую картинку"><img src="прямая ссылка на маленькую картинку-превью"></a>
Обратите внимание
Ведутся споры по поводу того, открывать картинки в новом окне или вкладке или в том же самом, предоставив возможность создания новых окон самому пользователю. Код, приведенный выше, откроет картинку в том же окне.
Полезный совет
Не делайте картинку для превью слишком маленькой, ведь тогда те, кто просматривает вашу статью, могут ничего на ней не разглядеть, не заинтересоваться и не открыть её для просмотра. В этом случае теряется весь смысл создания превью.
Источники:
  • как сделать превью
Видео по теме
Обратите внимание
В html и bb-code самое главное — четкое соблюдение синтаксиса. Если забыть поставить кавычку, либо открыть или закрыть скобку, то это неминуемо приведет к ошибке на странице и, соответственно, неработоспособности ссылки. Внимательно проверяйте оформленные вами ссылки перед тем, как отправить пост.
Полезный совет
В большинстве форумов, в социальных сетях и блогах есть специальный редактор, сходный по функциям с любым текстовым редактором на вашем компьютере. Он позволяет обходиться без ручного «кодирования», однако с некоторыми задачами может и не справиться. На этот случай мы и рассмотрели метод ручного редактирования кода.
Источники:
  • как сделать картинку ссылкой
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500