07 – Html Attributes

Html Attribute (nitelik, özellik) html elemanlarına ek nitelikler katarak bağlantı, resim yolu, yükseklik, genişlik gibi özellikleri kullanmamız sağlanır.

Her html elemanının farklı attribute (nitelikleri) olabilir.

Bir html elemanının attribute yani ilave özelliği başlangıç etiketleri içerisine yazılır.

Genel olarak bir anahtar ve bir değer ilişkisine sahiptir.

Yazım olarak küçük harf kullanılması tavsiye edilir.

Uygulanış biçimi <etiketismi attribute=“değer”> ….. </etiketismi>

Html href Attribute

href attribute bir bağlantının yolunu adresini tutar.

Html Bağlantı Adresi Nasıl Tanımlanır?

<a> </a> link oluşturmamızı sağlayan etikettir. Bu etiketin href özelliği sayesinde gideceği linki tanımlayabiliriz.

 <a href="https://www.yazilimdili.net"> Yazılım sayfası için tıklayın </a>

<a> etiketinin içerisinde href özelliği sayesinde gideceği url yi tanımladık. <a></a> Etiketleri içerisine istediğimi bir yazıyı yazdık ve kullanıcı üstüne tıklayınca https://www.yazilimdili.net sayfasına gidecek.

Html src Attribute

src attribute örneğin bir resmin bulunduğu kaynağın adresi vermeyi sağlar.

Resim Yolu Nasıl Gösterilir?

<img> etiketi bir resmi sayfamıza eklemeyi sağlar. Aşağıda bununla ilgili örnekler yapalım.

 <img src="https://www.yazilimdili.net/wp-content/html/html-ornek/resim/logo.png">

Yukarıdaki örnekte: resim sayfa ile aynı yerde ise, resmin adı yazılarak verilebilir.

Resim farklı bir klasörde ise örneğin resim klasöründe ise resim/logo.png şeklinde verilebilir.

Resim bir üst klasörde ise önce bir üst klasöre çıkılmalıdır. Örneğin ./dersler/resim/logo.png şelinde verilebilir.

Url Belirtme Yöntemleri

Mutlak (absolute) URL ve Göreceli (relative) Url olarak iki şekilde resim yolu belirtilebilir.

Mutlak Url (Absolute Url)

Resmin bulunduğu kaynağın adresini tam olarak vermektir.

Burada dikkat edilmesi gereken husus bu resmin telif haklarına dikkat edilmesidir. Ayrıca bir resmi bu şekilde aldığınızda yarın öbür gün bu resmin adı, içeriği vb. değiştiğinde sayfanız direkt etkilenecektir.

 <img src="https://www.yazilimdili.net/wp-content/html/html-ornek/resim/logo.png">

Göreceli Url (Relative Url)

Web sitesinin host kısmını yani buradaki duruma göre https://www.yazilimdili.net yazılmadan verilen url dir.

 <img src="/wp-content/html/html-ornek/resim/logo.png">

Yukarıdaki gibi verilen url etki alanını (https://www.yazilimdili.net) otomatik alacaktır.

En sağlıklı url yöntemi göreceli url olduğunu unutmayın. Eğer bir gün aynı içerikler ile sitenizi değiştirirseniz linkleriniz bozulmayacaktır.

Html alt Attribute

Görüntünün bir sebepten dolayı görüntülenemediği durumlarda yerine gösterilecek olan yazıdır.

Alt attribute nasıl kullanılır?

Html öğesi içerisinde tanımlanan bu attribute, resim her hangi bir sebepten dolayı gözükmezse, yerine çıkacak olan yazıyı gösterir.

Aşağıda bir örnek yapalım.

 <img src="logo.png" alt="yazilimdili.net Logo">

Html Width – Height Attribute

width: genişlik, height: yükseklik vermemizi sağlayan attribute (nitelik) ‘tir.

Değerleri piksel cinsinden belirtilir. Burada belirtilen piksel değerini yüzde, em ve rem olarak ta verebiliriz. Bu sayfamızın varsayılan piksel boyutuna oranlama yaparak işlem yapacaktır.

Html de genişlik ve yükseklik nasıl verilir?

Html öğesinde width ve height attribute kullanarak genişlik ve yükseklik verilebilir.

 
 <img src="resim/logo.png" 
  width="600px" height="200px">
 

Html style Attribute

Bir html elemanın görsel olarak tasarımını değiştirmemize stil eklememize yarar.

Örneğin rengini, boyutunu eğer bir kutu ise kenarlarına bordür ekleme, yuvarlama gibi özellikleri ekleyebiliriz.

Normal şartlarda biz tasarımımız için bir stil dosyası yazıyoruz ve tasarımımızı geniş kapsamlı düzenliyoruz. Burada genel olarak ufak tefek değişiklikler yapmak için kullanabiliriz. Bir sonraki yazımızda bu özelliği daha detaylı inceliyoruz.

Html de Style Nasıl Kullanılır?

Html öğesinin başlangıç etiketi içerisinde tanımlanarak kullanılır.

Style içerisinde kullanabileceğimiz birçok anahtar vardır. color, font-size, backgorund-color gibi ve bu anahtarların karşılığında uygun değerleri kullanarak öğemize bir stil kazandırırız.

 <h1 style="color:red;">Yazılım Derslerine Giriş</h1>
 <p style="font-size:20px; color:blue;">
 Yazılım öğrenmek artık günümüzde çok önemli bir hal almıştır.</p>

Html lang Attribute

Web sayfamızın dilini belirtir. Arama motorlarına yardımcı olmak için eklenmesi gereken bir özelliktir. En başta html elemanına eklenir.

 <!DOCTYPE html>
  <html lang="tr">
  <body>
  //Bizim dilimizin türkçe olduğunu belirtecektir.
  </body>
  </html>

 <!DOCTYPE html>
  <html lang="en-US">
  <body>
  //Dilinin ingilizce ve ülke kodu Amerika olarak belirtilmiş.
  </body>
  </html>

Html title Attribute

Bir html öğesine bilgi amaçlı bir başlık eklenmesini sağlar. Mouse ile üzerine geldiğimizde bize tooltip olarak gösterilecektir.

 <p title="bu yazı benim hakkımda"> Benim adım Mehmet Eser</p>