Автор:
Christy White
Дата создания:
12 Май 2021
Дата обновления:
1 Июль 2024
![Картинки в html. Как вставить ссылку в картинку?](https://i.ytimg.com/vi/CihaVY5jqrE/hqdefault.jpg)
Содержание
С помощью одной строки HTML-кода вы можете добавить интерактивное изображение практически на любой веб-сайт. Для этого вам понадобятся две вещи. Вам нужен URL-адрес изображения, а также URL-адрес веб-сайта.
Шагать
Метод 1 из 2: напишите HTML-код
Создайте файл HTML. Откройте текстовый редактор, а затем создайте новый файл. Сохраните файл как index.html.
- • Вы можете использовать любой текстовый редактор, какой захотите, даже простые текстовые редакторы Windows (Блокнот) и Mac OS X (TextEdit).
- • Если вы хотите использовать текстовый редактор, предназначенный для работы с HTML, щелкните здесь, чтобы загрузить Atom, текстовый редактор для Windows, Mac OS X и Linux.
- • Если вы используете TextEdit, щелкните меню «Формат» перед созданием файла HTML, затем щелкните «Сделать обычный текст». Этот параметр обеспечивает правильную загрузку HTML-файла в веб-браузере.
- • Текстовые процессоры, такие как Microsoft Word, не очень хороши для написания HTML, потому что они добавляют невидимые символы и форматирование, которые могут повредить HTML-файл и сделать его некорректно отображаемым в веб-браузере.
Скопируйте и вставьте стандартный HTML-код. Выберите и скопируйте приведенный ниже HTML-код и вставьте его в свой открытый index.html.
a href = "целевой URL"> img src = "URL изображения" /> / a>
Найдите URL-адрес вашего изображения. Найдите изображение в Интернете, щелкните его правой кнопкой мыши и (в зависимости от браузера) выберите «Копировать URL-адрес изображения», «Копировать адрес изображения» или «Копировать расположение изображения».
- • Firefox и Internet Explorer используют Копировать расположение изображения. Chrome использует URL-адрес копирования изображения. Safari использует адрес копирования изображения.
Добавьте URL-адрес изображения. В файле index.html щелкните и перетащите, чтобы выбрать URL-адрес изображения с помощью мыши, затем нажмите CTRL + V, чтобы вставить URL-адрес.
Добавьте целевой URL. В index.html удалите целевой URL и введите https://www.startpage.com.
- • Вы можете использовать любой URL-адрес в качестве целевого URL-адреса.
Сохраните файл HTML.
Откройте HTML-файл в веб-браузере. Щелкните правой кнопкой мыши index.html, а затем откройте этот файл в любом веб-браузере.
- • Если браузер открывается, но вы не видите изображение, убедитесь, что вы правильно написали имя файла изображения в файле index.html.
- • Когда браузер открывается, но вы видите HTML-код вместо фонового изображения, ваш index.html сохраняется как файл .rtf (файл с расширенным текстом). Попробуйте отредактировать HTML-файл в другом текстовом редакторе.
Метод 2 из 2. Понять HTML-код
Разберитесь в теге привязки. HTML-код состоит из открывающих и закрывающих тегов. Тег a href = ""> - это начальный тег, а / a> - конечный тег. Это называется тегом привязки и используется для добавления ссылок на веб-страницу.
- В а сообщает браузеру создать ссылку. В href это аббревиатура для ссылки HTML, = сообщает браузеру изменить все между ’ ’ создать ссылку. Любой URL-адрес можно поместить между двумя кавычками.
- В / а> сообщает браузеру, что тег привязки закрыт.
- Когда вы добавляете текст между a href = ""> а также / а> этот текст становится интерактивной ссылкой на веб-странице. Например: a href = "https://www.google.com"> Google / a> создает ссылку на Google.
Разберитесь в теге изображения. Тег img> - это закрытый тег. Вы можете закрыть его с помощью img src = "" /> или img src = ""> / img>.
- В img указывает браузеру отобразить изображение. В src это сокращение от источника, de = сообщает браузеру удалить все, что находится между ’ ’ и получить изображение из этого места.
- В /> сообщает браузеру закрыть тег изображения.
- Например: {samp [} получает изображение с этого URL-адреса, а затем отображает его в веб-браузере.
Используйте этот код везде. Теперь, когда вы знаете этот код, вы можете a href = "целевой URL"> img src = "URL изображения" /> / a> для добавления кликабельных изображений на любую веб-страницу с HTML-кодом.