HTML'de bir resme bağlantı ekleyin

Yazar: Christy White
Yaratılış Tarihi: 12 Mayıs Ayı 2021
Güncelleme Tarihi: 1 Temmuz 2024
Anonim
Convert Figma Landing Page to HTML CSS Code
Video: Convert Figma Landing Page to HTML CSS Code

İçerik

Tek bir HTML kodu satırıyla, hemen hemen her web sitesine tıklanabilir bir resim ekleyebilirsiniz. Bunun işe yaraması için ihtiyacınız olacak iki şey var. Görsel için bir URL'ye ve ayrıca bir web sitesinin URL'sine ihtiyacınız var.

Adım atmak

Yöntem 1/2: HTML kodunu yazın

  1. Bir HTML dosyası oluşturun. Bir metin düzenleyici açın ve ardından yeni bir dosya oluşturun. Dosyayı index.html olarak kaydedin.
      • Windows (Not Defteri) ve Mac OS X (TextEdit) gibi basit metin düzenleyicileri bile istediğiniz herhangi bir metin düzenleyiciyi kullanabilirsiniz.
      • HTML ile çalışmak üzere tasarlanmış bir metin düzenleyici kullanmak istiyorsanız, Windows, Mac OS X ve Linux için bir metin düzenleyici olan Atom'u indirmek için burayı tıklayın.
      • TextEdit kullanıyorsanız, HTML dosyasını oluşturmadan önce Biçim menüsünü ve ardından Düz Metin Oluştur'u tıklayın. Bu ayar, HTML dosyasının bir web tarayıcısında doğru şekilde yüklenmesini sağlar.
      • Microsoft Word gibi kelime işlemcileri, HTML dosyasını bozabilecek ve bir web tarayıcısında yanlış bir şekilde görüntülenmesini sağlayabilecek görünmez karakterler ve biçimlendirme ekledikleri için HTML yazmak için gerçekten iyi değildir.
  2. Standart HTML kodunu kopyalayıp yapıştırın. Aşağıdaki HTML kodunu seçip kopyalayın ve açık index.html dosyanıza yapıştırın.

    a href = "hedef url"> img src = "resim url" /> / a>

  3. Resminizin URL'sini bulun. Web'de bir görüntü bulun, sağ tıklayın ve (tarayıcınıza bağlı olarak) Görüntü URL'sini Kopyala, Görüntü Adresini Kopyala veya Görüntü Konumunu Kopyala'yı tıklayın.
      • Firefox ve Internet Explorer Kopyalama konumunu kullanır. Chrome, Görüntü URL'sini Kopyala kullanır. Safari, Görüntü Adresini Kopyala'yı kullanır.
  4. Resmin URL'sini ekleyin. İndex.html dosyasında, farenizle görüntünün URL'sini seçmek için tıklayıp sürükleyin, ardından URL'yi yapıştırmak için CTRL + V tuşlarına basın.
  5. Hedef URL'yi ekleyin. İndex.html'de hedef url'yi silin ve yazın https://www.startpage.com.
      • Herhangi bir URL'yi hedef URL olarak kullanabilirsiniz.
  6. HTML dosyasını kaydedin.
  7. HTML dosyasını bir web tarayıcısında açın. İndex.html'ye sağ tıklayın ve ardından bu dosyayı seçtiğiniz web tarayıcısında açın.
      • Tarayıcı açılırsa ancak resmi görmezseniz, görüntü dosyası adını index.html dosyasında doğru yazdığınızdan emin olun.
      • Tarayıcı açıldığında, ancak arka plan görüntüsü yerine HTML kodunu gördüğünüzde, index.html dosyanız .rtf dosyası (zengin metin dosyası) olarak kaydedilir. HTML dosyasını başka bir metin düzenleyicide düzenlemeyi deneyin.

Yöntem 2/2: HTML kodunu anlayın

  1. Bağlantı etiketini anlayın. HTML kodu, açma ve kapama etiketlerinden oluşur. A href = ""> etiketi başlangıç ​​etiketidir ve / a> bitiş etiketidir. Buna bağlantı etiketi denir ve bir web sayfasına bağlantılar eklemek için kullanılır.
    • The a bir tarayıcıya bir bağlantı oluşturmasını söyler. The href HTML referansı için bir kısaltmadır, = tarayıcıya aradaki her şeyi değiştirmesini söyler ’ ’ bir bağlantı oluşturun. İki tırnak işareti arasına herhangi bir URL yerleştirilebilir.
    • The / a> tarayıcıya bağlantı etiketinin kapatıldığını söyler.
    • Arasına metin eklediğinizde a href = ""> ve / a> bu metin bir web sayfasındaki tıklanabilir bir bağlantı haline gelir. Örneğin: a href = "https://www.google.com"> Google / a> Google'a bir bağlantı oluşturur.
  2. Resim etiketini anlayın. İmg> etiketi kapalı bir etikettir. İmg src = "" /> veya img src = ""> / img> ile kapatabilirsiniz.
    • The img etiketi, tarayıcıya bir resmi görüntülemesini söyler. The src kaynak için bir kısaltmadır, de = tarayıcıya, arasındaki her şeyi silmesini söyler. ’ ’ ve görüntüyü o konumdan alın.
    • The /> tarayıcıya resim etiketini kapatmasını söyler.
    • Örneğin: {samp [}, resmi o URL'den alır ve ardından bir web tarayıcısında görüntüler.
  3. Bu kodu her yerde kullanın. Artık bu kodu bildiğinize göre, a href = "hedef url"> img src = "resim url" /> / a> HTML kodlu herhangi bir web sayfasına tıklanabilir resimler eklemek için.