Top

html5 Tag

  • All
  • Dijital pazarlama
  • Dijital, İyi Şeyler Podcast
  • E-Ticaret
  • Eğitim
  • Growth hacking
  • İnceleme
  • Kişisel
  • Rehber
  • Reklam
  • Sosyoloji
  • Teknoloji
  • Wordpress

Genel Olay Özellikleri

HTML 4; tarayıcıda, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi.

Javascript ve nesneye yönelik HTML de anlatacaklarım listesinde.

Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamakta.

Yeni : HTML5’teki yeni olay özellikleri.


Window(pencere) Olay Özellikleri

Window nesnesi için olay tetikleyicileri.

<body> tag’ına uygulanırlar:

ÖzellikDeğerTanım
onafterprint  YeniscriptBelge basıldıktan sonra çalışır
onbeforeprint  YeniscriptBelge basılmadan önce çalışır
onbeforeonload  YeniscriptBelge yüklenmeden önce çalışır
onblurscriptPencere odaklanmasını kaybedince çalışır
onerror   YeniscriptBir hata gerçekleştiğinde çalışır
onfocusscriptPencereye odaklandığında çalışır
onhaschange  YeniscriptBelge değiştirildiğinde çalışır
onloadscriptBelge yüklendiğinde
onmessage  YeniscriptMesaj tetiklendiğinde
onoffline  YeniscriptBelge çevrimdışı olduğunda
ononline  YeniscriptBelge çevrimiçi olduğunda
onpagehide  YeniscriptPencere gizli olduğunda
onpageshow YeniscriptPencere görünür olduğunda
onpopstate  YeniscriptPencerenin tarihi değiştiğinde ya da durumu
onredo  YeniscriptBelge bir tekrar yapma işlemine sahne olduğunda
onresize  YeniscriptPencere yeniden boyutlandırıldığında
onstorage  YeniscriptBir belge yüklendiğinde
onundo  YeniscriptBelge bir geri alma işlemine sahne olduğunda
onunload  YeniscriptKullanıcı belgeden ayrılınca



Form Olayları

Bir HTML formu içerisinde olay tetiklenir.

Tüm HTML5 elementlerine uygulanır,fakat çoğu form elementlerine uygulanır:

ÖzellikDeğerTanım
onblurscript bir element odaklanmasını yitirdiğinde
onchangescriptbir elment değiştiğinde
oncontextmenu Yeniscript bir kaynak menu tetiklendiğinde
onfocusscript Bir elemente odaklanıldığında
onformchange Yeniscript Bir form değiştiğinde
onforminput Yeniscript Bir form kullanıcı veri girişi aldığında
oninput Yeniscript Bir element veri girişi aldığında
oninvalid Yeniscript Bir element doğru olmadığında (invalid)
onresetscript Bir form resetlendiğinde
HTML5 desteklemiyor
onselectscript Bir elment seçildiğinde
onsubmitscriptBir form onaylandığında

Tüm HTML5 etiketlerince desteklenen özellikler aşağıda listelenmiştir birkaç istisna haricinde.HTML5 Genel Özellikleri Yeni : HTML5'teki yeni özellikler.Özellik Değer Tanımaccesskey character Bir elemente erişmek için klavye kısayolu tanımlar.class classname Bir element için class adı oluşturur (stil dosyası için).contenteditable  Yeni true false Kullanıcının içeriği düzenleyip düzenlememe izni verilip verilmemesi - true, izinli - false, değil-.contextmenu  Yeni menu_id Bir element...

HTML5 hataları nasıl ayıklayacağının ve  nasıl tüm html elementlerini kullanıp kuralların kestiriminde bulunarak birlikte çalışabilirliği artırmakta ve geliştirme maliyetini azaltmayı hedeflemekte.

Yeni html5’in bazı özellikleri; ses, video, grafik, sunucu taraflı veri depolama ve interaktif belgeler için işlevler. Hatta nav, header, footer ve figure gibi elementler de içermekte.

HTML5 çalışma grupları AOL, Google, IBM, Microsoft, Mozilla, Nokia, Opera ve yüzlerce satıcıdır.

Not; HTML5 henüz bir W3C tavsiyesi değildir!

‘Yeni’ yazanlar HTML5’teki yeni elementlerdir.


Alfabetik olarak sıralanmış tüm HTML etiketleri, işte referans noktanız!;

Form attributes yani;

Yeni form özellikleri;

  • autocomplete,
  • novalidate

Yeni input özellikleri;

  • autocomplete,
  • autofocus,
  • form,
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget),
  • height and width,
  • list,
  • min, max and step,
  • multiple,
  • pattern (regexp),
  • placeholder,
  • required,

Tarayıcı desteği;

AttributeIEFirefoxOperaChromeSafari
autocomplete8.03.59.53.04.0
autofocusHayır4.010.03.04.0
formHayır4.09.510.0Hayır
form overridesHayır4.010.510.0Hayır
height and width8.03.59.53.04.0
listHayır4.09.5HayırHayır
min, max and stepHayırHayır9.53.0Hayır
multipleHayır3.511.03.04.0
novalidateHayır4.011.010.0Hayır
patternHayır4.09.53.0Hayır
placeholderHayır4.011.03.03.0
requiredHayır4.09.53.0Hayır

autocomplete Özelliği

Form ya da giriş alanının(input field) autocomplete ile otomatik tamamlama özelliğine sahip olmasını sağlar.

Not; Form etiketi ile çalışır autocomplete. Ayrıca; input->text, search, url, telephone, email, password, datepickersi range ve color ile de kullanılır.

Bu özelliğe sahip olan bir alanda yazmaya başlayan kullanıcı, tarayıcı alandaki verileri doldurabilecek şeylere dair ayarları göstermeye başlayacaktır.

Örnek ve deneme adresi için;

<form action="demo_form.asp" method="get" autocomplete="on">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 E-mail: <input type="email" name="email" autocomplete="off" /><br />
 <input type="submit" />
 </form>

Not; bazı tarayıcılarda aktif etmeniz gerekebilir bu özelliği.

HTML5 birkaç yeni elemente ve özelliğine sahip formlar için.

Yeni form elementleri;

  • datalist
  • keygen
  • output

Tarayıcı desteği

ÖzellikIEFirefoxOperaChromeSafari
datalistHayır4.09.5HayırHayır
keygenHayır4.010.53.0Hayır
outputHayırHayır9.510.0Hayır

datalist Elementi

Giriş alanı için ayarlar listesi belirler bu element.

Datalist’in içinde option elementi ile liste oluşturur.

Datalist’e id vererek, listelerdeki veri girişlerinin değerlerini alabilirsiniz;

Webpage: <input type="url" list="url_list" name="link" />
 <datalist id="url_list">
 <option label="W3Schools" value="http://www.w3schools.com" />
 <option label="Google" value="http://www.google.com" />
 <option label="Microsoft" value="http://www.microsoft.com" />
 </datalist>

Deneme adresi…

İpucu;  Option elementi daima bir value taşımalı.

HTML5 birkaç yeni input type özelliğine sahip formlar için. Bunlar daha iyi giriş kontrolü ve doğrulaması sağlamakta.

Yeni input type özellikleri;

  • email
  • url
  • number
  • range
  • tarih toplayıcıları(date, month, week, time, datetime, datetime-local)
  • search
  • color

Tarayıcı desteği

Input typeIEFirefoxOperaChromeSafari
emailHayır4.09.010.0Hayır
urlHayır4.09.010.0Hayır
numberHayırHayır9.07.0Hayır
rangeHayırHayır9.04.04.0
Date pickersHayırHayır9.010.0Hayır
searchHayır4.011.010.0Hayır
colorHayırHayır11.012Hayır

Not; Opera yeni giriş elemanları için en iyi desteği sunmakta. Bununla birlikte, tüm bilinen tarayıcılarda kullanmaya başlayabilirsiniz. Eğer desteklemiyorlarsa, normal text alanları olarak davranacaklardır.

Input Type – email

Kesinlikle e-posta adresinin girileceği bir giriş alanı sağlar.

Eposta alanının değeri otomatik olarak doğrulanır form onaylandığında.

Örnek ve deneme adresi; Anasayfa: <input type="url" name="user_email" />

İpucu; iPhone üzerindeki Safari email giriş elemanı özelliğini tnaımakta ve eşleşecek şekilde klavye girişlerini değiştirmekte ekranda (adds@and.com ayarları)

Input type – URL

Kesinlikle url adresinin girileceği bir giriş alanı sağlar.

Üstteki ipucu burada da geçerli.

İstemcide veri depolama


HTML5 istemcide(client) veri depolama için iki yeni nesne sunmakta;

localStorage – zaman limitsiz depolama

sessionStorage – bir oturumluk depolama


Öncelinde, çerezlerle gerçekleşiyordu bu durum. Çok büyük veriler için de çerezler(cookies) uygun değil, çünkü her bir istekte sunucudan geçmekte bu da işlemin çok yavaş ve etkisi düşük kılıyordu.

HTML5’te, her sunucu isteğinde veri çağırılmamakta sadece sorulduğunda çağırılmakta. Böylelikle site performansı etkilenmeden büyük miktarlarda veri depolaması mümkün olmakta.

Veriler farklı web sitelerin farklı alanlarında depolanmakta ve bir websitesi kendi depoladığı veriye erişebilir.

HTML5 Javascript’i kullanarak verileri depolar ve ulaşır/erişir.


localStorage Nesnesi

Zaman limitsiz veri depolama nesnesidir. Veri sonraki gün, hafta ya da yıl erişilebilir olacaktır.


Nasıl oluşturur ve erişirsiniz?;
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

denemek için adresi; 

bu sıradaki örnek ise kullanıcının sayfa ziyaretini saymakta;

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

denemek için adresi;


sesssionStorage Nesnesi

Bir oturumluk veri depolar. Kullanıcı tarayıcısını kapatıp çıkış yaptığında depolanan veri silinir.

Nasıl oluşturur ve erişim sağlarsınız bir sessionStorage ile?;
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

denemek

Canvas elementi bir web sayfası üzerinde çizim yapmak için kullanılır. Javascript ile beraber HTML5 içinde kullanılırak elde edilir çizimler web sayfasında.

Bir canvas bir dikdörtgen alandır ve herbir pikseli kontrol edebilirsiniz.

Canvas elementi, birkaç metoda sahiptir, çizim yolları, kutular, daireler, karakterler ve imaj eklemeleri gibi.

Canvas elementi oluşturmak

HTML5 sayfasına canvas elementini ekleyin. Id’yi, width’i ve height’ini da verin.

<canvas id=”cizimalanim” width=”200″ height=”100″></canvas>  gibi…

Javascript ile çizmek

Canvas elementinin kendi kendine bir çizim gücü yok. Herşey javascriptin kendi içinde gerçekleşmekte;

<script type=”text/javascript”>
var c=document.getElementById(“cizimalanim”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</script>

bu örnekte olduğu gibi. Javascript canvas elementini bulmak için id’yi kullanmakta;

var c=document.getElementById("cizimalanim");

Sonra bağlamında nesneyi çizmekte;

var cxt=c.getContext("2d");

getContext(“2d”) nesnesi bir HTML5 ile yapılmış nesne ve birçok yolu var çizgiler, kutular, daireler, karakterler ve imajlar veya daha fazlası için.

Sonraki iki adım ise bir kırmızı dikdörtgen çizmek;

cxt.fillStyle="#FF0000";
 cxt.fillRect(0,0,150,75);

Fillstyle yöntemi kırmızı yapar onu ve fillrect yöntemi ise şekilin pozisyonu ve boyutunu belirler.