Siteye Logo Ekleme HTML Kodu
Giriş
Bir web sitesi tasarlarken, sitenin marka kimliğini yansıtan bir logo eklemek önemlidir. Logo, kullanıcıların sitenizi tanımasını ve hatırlamasını sağlar, aynı zamanda profesyonel bir görünüm sunar. HTML kullanarak, bir logo eklemenin basit bir yolu vardır. Bu makalede, siteye logo eklemek için kullanılan HTML kodunu öğreneceksiniz.
Bölüm 1: Resim Etiketi (img)
HTML’de bir logo eklemek için <img> etiketini kullanırız. <img> etiketi, görüntünün tarayıcıda nasıl görüneceğini belirlemek için kullanılır. İşte logo eklemek için kullanılan <img> etiketi ile ilgili bazı temel özellikler:
src (source)
src özelliği, görüntünün kaynak dosyasının yolunu veya URL’sini belirtir. Bu dosya, web sunucusunda barındırılan bir resim dosyası olabilir veya bir harici URL olabilir. Örneğin:
“`html
“`
Yukarıdaki örnekte, logo.png dosyası mevcut dizinde bulunmalıdır. Eğer logo.png dosyası mevcut dizinde değilse, tam dosya yolunu belirtmelisiniz. Ayrıca, alt özelliği, tarayıcı görüntü yüklenene kadar görüntü yerine kullanıcıya metin olarak gösterilecek alternatif bir açıklama sağlar.
width (genişlik) ve height (yükseklik)
width ve height özellikleri, görüntünün genişliğini ve yüksekliğini belirtir. Bu özellikler piksel cinsinden değer alır. Örneğin:
“`html
“`
Yukarıdaki örnekte, görüntü 200 piksel genişliğinde ve 100 piksel yüksekliğindedir. Bu özelliği kullanmak istemiyorsanız, genellikle CSS ile görüntünün boyutunu ayarlamak daha iyidir.
style (stil)
style özelliği, görüntüye uygulanacak CSS stillerini belirtir. Örneğin:
“`html
“`
Yukarıdaki örnekte, görüntüye 1 piksel kalınlığında siyah bir kenarlık uygulanır.
Örnek Kod
Aşağıda, <img> etiketini kullanarak bir logo eklemek için temel bir HTML kodu örneği verilmiştir:
“`html
“`
Yukarıdaki örnek kodu kullanarak, mevcut bir logo.png dosyasını sitenize ekleyebilirsiniz. İlgili dosyanın aynı dizinde bulunduğundan emin olun. Alternatif olarak, src özelliğini uygun bir URL ile değiştirerek harici bir logo ekleyebilirsiniz.
Bu, siteye logo eklemek için kullanılan temel HTML kodu hakkında bir girişti. İkinci bölümde, logo etrafında daha fazla düzenleme yapmak için CSS kullanmayı öğreneceks
Bölüm 2: Logo Stili ve Düzenlemeleri
Logo ekledikten sonra, sitenizin tasarımına uyacak şekilde logo stili ve düzenlemelerini yapabilirsiniz. Bu bölümde, logo etrafında yapılabilecek bazı stil ve düzenleme seçeneklerini ele alacağız.
CSS Kullanma
Logo tasarımınızı daha etkileyici hale getirmek için CSS kullanabilirsiniz. CSS (Cascading Style Sheets), HTML elementlerine görünüm ve stil kazandırmak için kullanılan bir web teknolojisidir. Logo stilini ve düzenlemelerini yapmak için kullanabileceğiniz bazı CSS özellikleri şunlardır:
margin ve padding
margin ve padding özellikleri, logo etrafındaki boşluğu ayarlamak için kullanılır. Örneğin:
“`html
“`
Yukarıdaki örnekte, logo etrafında 10 piksel margin ve 5 piksel padding uygulanır.
background-color
background-color özelliği, logo etrafındaki arka plan rengini belirlemek için kullanılır. Örneğin:
“`html
“`
Yukarıdaki örnekte, logo etrafındaki arka plan rengi #f2f2f2 olarak ayarlanır.
border
border özelliği, logo etrafına bir kenarlık eklemek için kullanılır. Örneğin:
“`html
“`
Yukarıdaki örnekte, logo etrafına 1 piksel kalınlığında siyah bir kenarlık uygulanır.
Örnek Kod
Aşağıda, logo etrafında bazı stil ve düzenlemeler yapmak için kullanılan CSS örnek kodu verilmiştir:
“`html
“`
Yukarıdaki örnek kodu kullanarak, logo etrafında belirli bir boşluk, arka plan rengi ve bir kenarlık ekleyebilirsiniz. CSS kodunu <style> etiketi içinde tanımladığınızda, tüm sayfa içindeki <img> elementlerine bu stil uygulanır.
Bu bölümde, logo etrafında yapılabilecek bazı stil ve düzenleme seçeneklerini öğrendiniz. Bu yöntemleri kullanarak, sitenizin markasını yansıtan ve tasarımınıza uygun bir logo oluşturabilirsiniz.
