HTML'de Öznitelikler

by trustix


Eklenme Tarihi : 13 Aralık 2020 22:07 Views:     485



HMTL'de öznitelik kavramı HTML etiketlerinin daha fazla iş yapmasını sağlayan ve HTML kodları sonucunda üretilen sonuçların daha stabil çalışmasını sağlayan birtakım anahtar keimeler ve bu kelimelere verilen değerlerden oluşmaktadır. Yalın halleri ile de HTML etiketleri elbetteki çalışmaktadır. Ancak mümkün olduğunda öznitelikleri de kullanmak projenin daha stabil ve daha verimli çalışmasını sağlamaktadır.

HTML'de Öznitelik Hakkında Genel Bilgiler

  • Hemen hemen bütün HTML etiketlerinin öznitelikleri vardır.
  • Öznitelikler HTML etiketlerin başlangıç bölümünde belirtilir.
  • Öznitelikler çoğunlukla anahtar ifade/değer şeklinde belirtilirler.
  • Öznitelikler HTML etiketlerinin daha iyi ve daha kapsamlı çalışmasını sağlamaktadırlar.
  • Bazı HTML etiketleri özniteliklerden en az biri olmadan çalışmaz.

 

Genel bilgileri açıkladıktan sonra bir örnek üzerinden bilgileri somut hale getirelim. Bu somutlaştırmayı <a> etiketini kullanarak yapabiliriz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html - Öznitelikler</title>
</head>
<body>

    <!--
            HTML'de  <a> etiketl içerisine metinsel ifadeler yer alabiir. 
            Herhangi bir öznitelik belirtilmediğinde bu metin tıpkı <p> 
            etiketi kullanışmış gibi davranacaktı. Ancak href özniteliği
            verildiği zaman bu öznitelik sayesinde metne bir link verilebilir.
            href özniteliğine verilecek olan bağlantı değeri metne tıklandığında
            kullanıcının bağlantıdaki siteye yönlendirilecek bir aksiyon sağlar.
            Burada verdiğimiz örnekte metin bu şekilde davranacaktır. href
            ifadesi <a> etiketinde kullanılan bir özniteliktir.    
    -->

    <a href="https://www.vikikod.com"> Siteye Gitmek İçin Tıklayınız.</a>
    
</body>
</html>

 

 

<a> etiketi ile kullanılan href özniteliği elbetteki birçok HTML etiketinde çalışmamaktadır. Birçok öznitelik bu şekilde etike özeldir. Bununla birlikte her etiket ile çalışan bazı öznitelikler de mevcuttur. Bunlarda biri HTML elementin şekillendirmekte ve daha estetik bir hale getirmekte kullanılan style özniteliğidir. style özniteliği bir HTML elementine CSS kodları ile müdahale edebilmemizi sağlamaktadır. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html - Öznitelikler</title>
</head>
<body>

    <!--
            <a> etiketi içerinse style özniteliği kullanara
            etiketin metin rengini beyaz ve arka plan rengini
            mavi olacak şekilde CSS kodları ile ayarladık.
    -->

    <a href="https://www.vikikod.com" style="color: white; background-color: darkblue;"> Siteye Gitmek İçin Tıklayınız.</a>
    
</body>
</html>

Yukarıdaki kod aşağıdaki sonucu üretecektir.

 

 

Bunun dışında <html> etiketinde kullanılan lang özniteliği vardır. Bu öznitelik arama motorları ve tarayıcılara web sayfanızın dilini açıklamak içindir. Eğer <html> etiketine öznitelik olarak dil belirtmez isenin tarayıcı yine de sonuç gösterecek ancak web sayfanızın dilini anlamayacaktır.

<html lang="tr">

Yukarıdaki şekli ile tarayıcı ve arama motorlarına sayfanın dilinin Türkçe olduğunu belirtiyoruz. Ayrıca dil ile birlikte bu özniteliğe ülke kodu da eklenebilir. Bu durumda ilk iki harf web sayfasının dilini son iki harf ise ülke kodunu belirtmiş olur.

<html lang="en-HK">

Yukarıdaki lang özniteliği ile web sayfasının dili İngilizce ve ülke ise Hong Kong olarak belirtilmiş olur.

 

 

HTML'de öznitelik kavramını yukarıdaki örnekler üzerinden incelemeye çalıştık. Son olarak şunu belirtelim ki bazı etiketler hiçbir öznitelik almaz. Bazı etiketler en az bir öznitelik almadan çalışmaz ve bazı etiketler ise çok sayıda özniteliği aynı anda alabilir. Süreç içerisinde aralıklı olarak HTML'de etiketlere ve özniteliklerine değinmeye çalışacağız.

Herkese İyi Kodlamalar.

 





0

Yorum Formu

vikikod.com    © 2019