Додайте посилання на зображення в HTML

Автор: Christy White
Дата Створення: 12 Травень 2021
Дата Оновлення: 1 Липня 2024
Anonim
12. Як додати зображення в HTML-сторінку. Тег img
Відеоролик: 12. Як додати зображення в HTML-сторінку. Тег img

Зміст

За допомогою одного рядка 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 = "target url"> img src = "url image" /> / 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> - кінцевий тег. Це називається анкерним тегом і використовується для додавання посилань на веб-сторінку.
    • a говорить браузеру створити посилання. href - це абревіатура для посилання на HTML, = говорить браузеру змінити все між ’ ’ створити посилання. Будь-яку URL-адресу можна розмістити між двома лапками.
    • / a> повідомляє браузеру, що прив'язка тегу закрита.
    • Коли ви додаєте текст між a href = ""> і / a> цей текст стає посиланням, яке можна натиснути на веб-сторінці. Наприклад: a href = "https://www.google.com"> Google / a> створює посилання на Google.
  2. Зрозумійте тег зображення. Тег img> - це закритий тег. Ви можете закрити його за допомогою img src = "" /> або img src = ""> / img>.
    • img тег повідомляє браузеру відобразити зображення. src - це абревіатура джерела, de = говорить браузеру видалити все між ’ ’ і завантажте зображення з цього місця.
    • /> говорить браузеру закрити тег зображення.
    • Наприклад: {samp [} отримує зображення з цієї URL-адреси, а потім відображає його у веб-браузері.
  3. Використовуйте цей код скрізь. Тепер, коли ви знаєте цей код, можете a href = "target url"> img src = "url image" /> / a> для додавання клікабельних зображень на будь-яку веб-сторінку з HTML-кодом.