Добавить ссылку на изображение в HTML

Автор: Christy White
Дата создания: 12 Май 2021
Дата обновления: 1 Июль 2024
Anonim
Картинки в html. Как вставить ссылку в картинку?
Видео: Картинки в html. Как вставить ссылку в картинку?

Содержание

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

Шагать

Метод 1 из 2: напишите HTML-код

  1. Создайте файл HTML. Откройте текстовый редактор, а затем создайте новый файл. Сохраните файл как index.html.
      • Вы можете использовать любой текстовый редактор, какой захотите, даже простые текстовые редакторы Windows (Блокнот) и Mac OS X (TextEdit).
      • Если вы хотите использовать текстовый редактор, предназначенный для работы с HTML, щелкните здесь, чтобы загрузить Atom, текстовый редактор для Windows, Mac OS X и Linux.
      • Если вы используете TextEdit, щелкните меню «Формат» перед созданием файла HTML, затем щелкните «Сделать обычный текст». Этот параметр обеспечивает правильную загрузку HTML-файла в веб-браузере.
      • Текстовые процессоры, такие как Microsoft Word, не очень хороши для написания HTML, потому что они добавляют невидимые символы и форматирование, которые могут повредить HTML-файл и сделать его некорректно отображаемым в веб-браузере.
  2. Скопируйте и вставьте стандартный HTML-код. Выберите и скопируйте приведенный ниже HTML-код и вставьте его в свой открытый index.html.

    a href = "целевой URL"> img src = "URL изображения" /> / a>

  3. Найдите URL-адрес вашего изображения. Найдите изображение в Интернете, щелкните его правой кнопкой мыши и (в зависимости от браузера) выберите «Копировать URL-адрес изображения», «Копировать адрес изображения» или «Копировать расположение изображения».
      • Firefox и Internet Explorer используют Копировать расположение изображения. Chrome использует URL-адрес копирования изображения. Safari использует адрес копирования изображения.
  4. Добавьте URL-адрес изображения. В файле index.html щелкните и перетащите, чтобы выбрать URL-адрес изображения с помощью мыши, затем нажмите CTRL + V, чтобы вставить URL-адрес.
  5. Добавьте целевой URL. В index.html удалите целевой URL и введите https://www.startpage.com.
      • Вы можете использовать любой URL-адрес в качестве целевого URL-адреса.
  6. Сохраните файл HTML.
  7. Откройте HTML-файл в веб-браузере. Щелкните правой кнопкой мыши index.html, а затем откройте этот файл в любом веб-браузере.
      • Если браузер открывается, но вы не видите изображение, убедитесь, что вы правильно написали имя файла изображения в файле index.html.
      • Когда браузер открывается, но вы видите HTML-код вместо фонового изображения, ваш index.html сохраняется как файл .rtf (файл с расширенным текстом). Попробуйте отредактировать HTML-файл в другом текстовом редакторе.

Метод 2 из 2. Понять HTML-код

  1. Разберитесь в теге привязки. HTML-код состоит из открывающих и закрывающих тегов. Тег a href = ""> - это начальный тег, а / a> - конечный тег. Это называется тегом привязки и используется для добавления ссылок на веб-страницу.
    • В а сообщает браузеру создать ссылку. В href это аббревиатура для ссылки HTML, = сообщает браузеру изменить все между ’ ’ создать ссылку. Любой URL-адрес можно поместить между двумя кавычками.
    • В / а> сообщает браузеру, что тег привязки закрыт.
    • Когда вы добавляете текст между a href = ""> а также / а> этот текст становится интерактивной ссылкой на веб-странице. Например: a href = "https://www.google.com"> Google / a> создает ссылку на Google.
  2. Разберитесь в теге изображения. Тег img> - это закрытый тег. Вы можете закрыть его с помощью img src = "" /> или img src = ""> / img>.
    • В img указывает браузеру отобразить изображение. В src это сокращение от источника, de = сообщает браузеру удалить все, что находится между ’ ’ и получить изображение из этого места.
    • В /> сообщает браузеру закрыть тег изображения.
    • Например: {samp [} получает изображение с этого URL-адреса, а затем отображает его в веб-браузере.
  3. Используйте этот код везде. Теперь, когда вы знаете этот код, вы можете a href = "целевой URL"> img src = "URL изображения" /> / a> для добавления кликабельных изображений на любую веб-страницу с HTML-кодом.