HTML Hakkında Bilmediğiniz 5 Özellik

HTML üzerinde muhtemelen bilmediğiniz 5 özelliği listeledik.

Herkese merhaba arkadaşlar. HTML hakkında birçoğumuzun az da olsa bilgisi var. Aslında HTML’yi herkes öğrenebilir. Öylesine basit  ve kolay bir syntaxı bulunuyor. Tabi her şey zamanla oturur. O yüzden bıkmadan çalışmanız gerekiyor.HTML nasıl öğrenebiliriz diye sorarsanız da daha önceden yazdığımız birkaç tane makale var onlara da aşağıdaki linkten ulaşabilirsiniz.

HTML 5 Klavuzu

HTML hakkında her ne kadar bilgimiz var desek de, bu bilgi bir yere kadar olabiliyor. Biz de düşündük ve bilmediğimiz yönlerini araştırdık. Sonuçların sizin için şaşırtıcı ve öğretici olması dileğiyle diyoruz ve sizleri baş başa bırakıyoruz.

1- Yazım Denetimi Yapılabilir

Herhangi bir HTML etiketine spellcheck ekleyerek yazım denetimi yapılmasını sağlayabilirsiniz. Metin girişi yapabileceğiniz etiketler üzerinde faydalıdır. Ayrıca hiyerarşide düzgün çalıştığından yani, bir div ve onun alt elemanları yani çocukları üzerinde etkili olacağından faydalı bir kullanıma kapı açar.

<input type=text spellcheck=true
placeholder=Bir şeyler girin>
<p contenteditable=true spellcheck=true>
Bir şeyler girin
</p>
view rawspellcheck.html hosted with ❤ by GitHub

Yukarıdaki kodda, hem <div> hem de <p> etiketleri, bir kullanıcı yazmaya başladığında heceleyerek kontrol etmektedir. Dikkatli olmanız gereken konu ise tarayıcı ayarlarından yazım denetimini devre dışı bırakmamanız gerekiyor. Devre dışı bırakmışsanız bu özelliği kullanamazsınız.

2- İçerik Kaynaklarınızı Güvence Altına Alın

İçerik kaynaklarımızın bir diğer adı da CDN dir. Content Delivery Network olarak açılır. Komut dosyalarının ve stil sayfası dosyaları gibi kaynakların CDN’ler aracılığıyla barındırılması oldukça yaygın kullanılıyor.  Mozillanın yaptığı açıklamada;

using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.

yani CDN kaynaklarınız başkasının eline geçerse zararlı yazılım enjekte ederek zarar verici sonuçlar elde edebilirsiniz mesajını veriyor. Bu işlemi önleyebilmek için integrity diye bir tag çıkartılmış. Source tagının içine yazılan integrity bu işlemin güvene alınmasını sağlıyor. Kullanımı ise aşağıdaki şekilde.

<script src=https://example.com/example.js
integrity=sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7
crossorigin=anonymous></script>
view rawintegrity.html hosted with ❤ by GitHub

3- Gönder Düğmelerindeki Form Hedeflerini Geçersiz Kılmak

Target tagının nasıl kullanıldığını bir çoğumuz biliyor. Köprü oluşturmak ve ekstra bir sayfa veya hedefte aç olarak değiştirebiliyoruz. HTML5’in ilk taslaklarından birinde, formtarget dört diğer form gönderme özelliği ile birlikte tanımlandı: formaction,formenctype ,formmethod ve formnovalidate. Bu öznitelikler, gönderme düğmeleri ile kullanılabilir ve düğmelerin ait olduğu etiketindeki ilgili özniteliklerini geçersiz kılar. Kullanım örneği ise aşağıdaki şekildedir.

form action=”/save” target=”_self” >
<input type=submit name=save />
<input type=submit name=print formaction=/print
formtarget=_blank />
</form>
view rawformaction.html hosted with ❤ by GitHub

4- Öğelerin Semantic Özelliklerini Gizle

Özelliklerin gömülü ve izinsiz görüntülenmemesini istiyorsanız yapacağınız şey çok basit arkadaşlar. Tanımlayacağınız ana div tagının içine hidden ekini eklemeniz, sizin işinizi görecektir.

<div hidden>…</div>
view rawhidden.html hosted with ❤ by GitHub

Şu şekilde çalışır;

CSS kuralı; Gizli özniteliği olan öğe sayfasında oluşturulmaz. Eleman içerisindeki herhangi bir betik yürütüldüğünde, bir form denetimi olarak yürütülüyor ise, form gönderimi sırasında diğer form denetimleri ile birlikte gönderilir.

5- Klavye Kısayolu Ekleyin

Global olarak kullanabileceğiniz bir diğer özellik ise accesskey. HTML4 üzerinde tanımlanmış olup, HTML5 üzerinde de kullanılabilir durumdadır. Bu anahtarı oluşturmanız iki şeye bağlıdır;

1-) accesskey üzerine verdiğimiz değer

2-) Aynı öğe için önceden tanımlanmış anahtarlar.

Örnek üzerinde kullanımını görelim.

<button accesskey=v onclick=alert(‘View Click’)>
View
</button>
view rawaccesskey.html hosted with ❤ by GitHub

Her platform üzerinde v tuşuna yapılan kombinasyonlarda alt+shift+v vs. View Click adında bir alert oluşturacaktır. Kısayollar her işletim sistemine göre değişiklik göstereceğinden kısayolların nasıl olduğunu belirtmeniz faydanıza olacaktır.

Sorularınızı yorum yaparak bize bildirin. Sağ üst köşeden mail abonesi olarak yazılarımızdan ilk olarak sizler faydalanabilirsiniz. Herkese iyi günler iyi çalışmalar. ?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Facebook
Google+
http://sanalbilgideposu.com/html-hakkinda-bilmediginiz-5-ozellik
Twitter
INSTAGRAM