HTML Logo Ekleme Kodu

HTML, bir web sitesinin temel yapı taşıdır ve birçok web geliştiricisi tarafından kullanılır. Bir web sitesi oluştururken, sitenize bir logo eklemek isteyebilirsiniz. Bir logo, web sitenizin marka kimliğini yansıtan ve ziyaretçilerin görsel olarak hatırlayabilecekleri bir görseldir. Logo ekleme işlemi, HTML kodunda birkaç basit adımda gerçekleştirilebilir.

Logo Resmi Nasıl Eklenir?

Logo resmini eklemek için, etiketini kullanmanız gerekir. Bu etiket, web sayfanızda bir resim göstermenizi sağlar. İmajı eklemek için, src özelliği kullanarak resim dosyasının yolunu belirtmeniz gerekir. Ayrıca, alternatif bir metin de sağlamalısınız (alt etiketi) ki bu, logo resmi yüklenemezse görüntülenecek metindir.

Örneğin, aşağıdaki kod, bir logo resmini web sayfanıza eklemek için kullanılabilir:

“`

“`

Bu kod, web sayfanıza logo.png dosyasını ekler ve görüntülenemeyen bir durumda “Web sitemizin logosu” olarak alternatif metin gösterir.

Logo Resmi Boyutlandırma

Logo resminizi boyutlandırmak istiyorsanız, width ve height özelliklerini kullanabilirsiniz. Bu özellikler, resmin genişliği ve yüksekliğini belirler. Örneğin:

“`

“`

Bu kod, logo.png dosyasını web sayfanıza ekler ve 200 piksel genişliğinde ve 50 piksel yüksekliğinde boyutlandırır.

Logo Resmi Linkleme

Logo resminizi tıklanabilir hale getirerek, ziyaretçilerinizi istediğiniz bir sayfaya yönlendirebilirsiniz. Bunun için, etiketini kullanarak bir bağlantı oluşturmanız gerekir. Örneğin:

“`

“`

Bu kod, logo.png dosyasını web sayfanıza ekler ve tıklandığında index.html sayfasına yönlendirir.

HTML Kodunda SVG Logo Ekleme

SVG, vektör tabanlı bir grafik formatıdır ve web sitelerinde kullanılan birçok logo için popüler bir seçimdir. SVG dosyaları, ekran boyutuna göre ölçeklenebilir ve yüksek çözünürlüklü görüntüler sağlar. HTML kodunda, SVG logoları eklemek için birkaç basit adım izlenebilir.

SVG Logo Nasıl Eklenir?

SVG logo eklemek için,

Örneğin, aşağıdaki kod, bir SVG logosunu web sayfanıza eklemek için kullanılabilir:

“`
“`

Bu kod, logo.svg veya logo.png dosyasını web sayfanıza ekler ve 100 piksel genişliğinde ve 100 piksel yüksekliğinde boyutlandırır. Ayrıca, etiketi içindeki xlink:href özelliği, SVG dosyasının yolunu belirtir.

SVG Logo Boyutlandırma

SVG logonuzu boyutlandırmak istiyorsanız, width ve height özelliklerini kullanabilirsiniz. Bu özellikler, SVG görüntüsünün genişliği ve yüksekliğini belirler. Örneğin:

“`

“`

Bu kod, logo.svg veya logo.png dosyasını web sayfanıza ekler ve 200 piksel genişliğinde ve 50 piksel yüksekliğinde boyutlandırır.

SVG Logo Linkleme

SVG logonuzu tıklanabilir hale getirerek, ziyaretçilerinizi istediğiniz bir sayfaya yönlendirebilirsiniz. Bunun için, etiketini kullanarak bir bağlantı oluşturmanız gerekir. Örneğin:

“`



“`

Bu kod, logo.svg veya logo.png dosyasını web sayfanıza ekler ve tıklandığında index.html sayfasına yönlendirir.