Html Html attribute nedir? Attribute , Türkçe'ye öznitelik, özellik olarak çevrilebilir. Html'de kullandığımız etiketlere d...

Html Attribute Kullanımı #3

Şubat 17, 2018 Mustafa TÜRKÖZ 0 Yorum

Html
Html

Html attribute nedir? Attribute, Türkçe'ye öznitelik, özellik olarak çevrilebilir. Html'de kullandığımız etiketlere de attribute'ler sayesinde ek özellikler verebiliriz. Ne demiştik, web sayfalarında başlık, paragraf gibi bir çok etiketi kullanabiliriz. Fakat attribute'siz bir etiket modifiyesiz şahine benzer. Tüm html etiketleri de attribute dediğimiz özelliklere sahiptir ve bu sayede cafcaflı görünümlere sahip olabilirler.

Attribute'ler genellikle name-value (isim-değer) çiftleriyle kullanılır.

Attribute'leri anlamak için bir kaç örnek yapacaz:

 1-   Lang

Sitemizde arama motorları için bir dil bildirmek önemlidir. Bunun için, "lang" özelliği kullanılır.


<html lang="en-US">


Kodun ilk iki harfi dili belirtir, eğer dilin lehçesi varsa son iki harf de lehçesini belirtir. "en" değeri, sitemizin dilinin İngilizce olduğunu ve "US" değeri de dilin lehçesinin Amerikan İngilizcesi olduğunu söyler.

 2-   Title

"Title" özelliği, etiketimize bir başlık atar. Mesela aşağıdaki kodumuzu çalıştırıp yazının üzerine faremizi getirdiğimizde, title'da yazdığımız mesaj çıkacaktır.


<p title="Bu bir yazıdır..">Merhaba, ben Sadettin TEKSOY</p>


 3-   Name-Content

Web sayfamızda Google aramalarda sitemizin daha ön sıralarda çıkması için kullandığımız, ama sitede görünmeyen "Meta" kodlarını da özelleştirebiliyoruz.


<meta name="Author" content="Mustafa Türköz" />
<meta name="Description" content="Teknoloji Bloğu" />
<meta name="Keywords" content="Teknoloji, Programlama, Yazılım" />


Yukarıda ki kodda, author ile site yazarının adını, description ile sitemizin tanımını ve son olarak keywords ile de sitemizi tanımlayan anahtar kelimeleri belirtebiliriz.

 Dipnot: 

Description, web sayfasının bir iki cümlecik tanımını içerir, bunun için 160 karakter civarı yazmaya özen gösteriniz.

Keywords, İnsanların arama motorlarında siteyi kolayca bulabilmesi için kelime ve söz öbeklerini içerir. Keywords için ise 15-20 kelime kullanmaya özen gösteriniz.

 4-   Src (Source)

Html de görüntüler "img" etiketiyle tanımlanır.
Görüntü kaynağının dosya adı ise "src" özniteliği (attribute) ile belirtilir.


<img src="resmin-web-adresi">


"resmin-web-adresi" dediğimiz kısma, internetten bulduğunuz veya sunucunuzda ki resmin png veya jpg uzantılı adresini yazmalısınız.

 5-   Size

Html de resimlerin genişliğini ve yüksekliğini boyut attribute'ı ile belirtebiliriz.


<img src="resmin-web-adresi" width="500" height="600">


"width" resmin genişliği anlamına gelir.
"height" ise resmin yüksekliğini belirler.

 6-   Href

Eğer bir site bembeyaz boş bir site değilse illaki dış veya iç linkler olacaktır. Linkler yazı, resim, buton gibi birçok şeye verilebilir. Peki bunları bir bağlantı haline nasıl getiriyoruz. Tabiki Hazreti Href ile..

Bakınız aşağıda "<a>" etiketine href attribute'si sayesinde bir bağlantı özelliği katıldı. Bunu yazıp çalıştırdığımız da, artık "Ana Sayfa" yazısına tıklayan sitemizin ana sayfasına yönlendirilecek.


<a href="https://www.mustafaturkoz.com"> Ana Sayfa </a>


Target Blank Nedir?


Target blank, bağlantımızın yeni bir yan sekmede açılmasını sağlar.


<a href="https://www.mustafaturkoz.com" target="_blank"> Ana Sayfa </a>


Resimli Link Nasıl Yapılır?



<a href="https://www.mustafaturkoz.com">
<img border="0" alt="Mustafa Türköz" src="https://goo.gl/3gFAHB" width="250" height="90">
</a>


Kodu çalıştırdığımızda sitemin logosu görünecek ve bu logoya tıkladığımız zaman benim sitem açılmış olacaktır. Bu örnekle de resimli link nasıl yapılır görmüş olduk..

 7-   Style

Style (Stil) attribute'ı, bir öğenin renk, yazı tipi, boyut gibi stil özelliklerini belirlemek için kullanılır.


<p style="color: red">Şampiyon Galatasaray.</p>


Yazımızın rengini "color: red" diyerek kırmızı yaptık. "background-color: red" deseydik, yazımızın arka planı kırmızı olacaktı.

Style özelliklerimizi ayrı bir yerde tutma şansımızda var aslında. Bu sayede uzun kodlar yazmak vacip olduğunda daha düzenli bir kod hiyerarşisine sahip oluruz.

Yazacağımız yer "<head>" etiketlerinin arasıdır. Orada müsait gördüğünüz bir yere aşağıdaki kodu yapıştırınız. Ama düzenlemek istediğiniz etiketlere bir "id" vermeyi de unutmayın, yoksa style var olmayan bir id'ye etki edemez..

Aşağıdaki kodun açıklaması, body etiketi arasında kalan yazıların rengini red (kırmızı) yap demektir. Ayrıca bu kodda görmüş olduğunuz gibi body yazısının önünde "." ve "#" gibi karakterler yok. Sebebi temel etiketlerden biri olması. Bundan sonraki örnekte göreceğimiz yazım şekli ise daha farklı olacak.


<style type="text/css">
body {color:red}
<style>


Etikete "id"  ve "class" Atayarak "style" Verme


Eğer bir etikete class atayacaksanız style kodlarımızda bu class adının önüne "." karakteri gelir, eğer "id" atayacaksanız id isminin önüne "#" karakteri gelir.

Son bir örnek yaparak kapanışımızı yapalım..

"<body>" etiketleri arasına yazılacak kodlar:


<p id="Ankara" class="Turkiye" >Ankara</p>
<p id="Samsun" class="Turkiye" >Samsun</p>
<p id="Antalya" class="Turkiye" >Antalya</p>


"<head>" etiketleri arasına yazılacak kodlar:


<style type="text/css">

.Turkiye{color: red}

#Ankara {
font-size: 30px;
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}

#Samsun {
font-size: 22px;
border: 2px solid yellow;
padding: 10px;
border-radius: 0px;
}

#Antalya {
font-size: 12px;
border: 2px solid black;
padding: 10px;
border-radius: 0px;
}

<style>


KODLAR

Html

ÇIKTI

Html


Ek Bilgi:
"font-size: 30px", yazının boyutunu 30px kadar ayarlar.

"border: 2px solid red", uyguladığımız etikete sınır çizgileri çizer.
"2px", çizginin kalınlığını ayarlar.
"solid", çizginin şeklini belirtir. Eğer solid yerine dotted yazarsak kesikli çizgiler çizeriz.
"red", kenar çizgisinin rengini belirtir.

"padding: 10px", etiketin içeriye doğru girintilenmesini sağlar. Eğer biz burada değerini "0" yazsaydık, yazı içeriğimiz ile kenar çizgimiz dip dibe olacaktı.

"border-radius: 25px", sınır çizgimizin köşelerine bir yarıçap değeri girerek ovalleştirmemizi sağlar.


Yayın Tarihi: 17.02.2018  
MUSTAFA TÜRKÖZ

0 yorum:

Uyuyan bir adama sadece rüyalar gelir.