Добавете връзка към изображение в HTML

Автор: Christy White
Дата На Създаване: 12 Може 2021
Дата На Актуализиране: 1 Юли 2024
Anonim
Как связать CSS с HTML
Видео: Как связать CSS с HTML

Съдържание

С един ред HTML код можете да добавите изображение, което може да се кликва, към почти всеки уебсайт. Има две неща, които ще ви трябват, за да работи тази работа. Трябва ви URL за изображението, а също и URL за уебсайт.

Стъпвам

Метод 1 от 2: Напишете HTML кода

  1. Създайте HTML файл. Отворете текстов редактор и след това създайте нов файл. Запазете файла като index.html.
      • Можете да използвате всеки текстов редактор, който искате, дори и обикновените текстови редактори на Windows (Notepad) и 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 = "target url"> img src = "url на изображението" /> / a>

  3. Намерете URL адреса на вашето изображение. Намерете изображение в мрежата, щракнете с десния бутон на мишката и (в зависимост от вашия браузър) щракнете върху Копиране на URL адрес на изображение, Копиране на адрес на изображение или Копиране на местоположение на изображение.
      • Firefox и Internet Explorer използват местоположението на копиране на изображение. Chrome използва URL за копиране на изображение. Safari използва Copy Image Address.
  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> е крайният таг. Това се нарича котва таг и се използва за добавяне на връзки към уеб страница.
    • The а казва на браузър да създаде връзка. The href е съкращение за HTML справка, = казва на браузъра да промени всичко между ’ ’ създайте връзка. Всеки URL може да бъде поставен между двете кавички.
    • The / a> казва на браузъра, че котвата е затворена.
    • Когато добавяте текст между a href = ""> и / a> този текст се превръща в кликваща връзка към уеб страница. Например: a href = "https://www.google.com"> Google / a> създава връзка към Google.
  2. Разберете маркера на изображението. Тагът img> е затворен таг. Можете да го затворите с img src = "" /> или img src = ""> / img>.
    • The img tag казва на браузъра да покаже изображение. The src е съкращение за източник, de = казва на браузъра да изтрие всичко между ’ ’ и извлечете изображението от това място.
    • The /> казва на браузър да затвори маркера на изображението.
    • Например: {samp [} получава изображението от този URL адрес, след което го показва в уеб браузър.
  3. Използвайте този код навсякъде. След като вече знаете този код, можете да го направите a href = "target url"> img src = "url url" /> / a> за добавяне на изображения с възможност за кликване към всяка уеб страница с HTML код.