Top

Teknoloji

  • All
  • AI / YZ / LLM / Makine Öğrenimi
  • Android
  • Bakım-Onarım
  • CSS Dersleri
  • Görsel ve Görüntü İşleme
  • Hacking
  • HTML Dersleri
  • iOS
  • Kripto paralar
  • Linux
  • Mobil
  • Ofis Uygulamaları
  • Photoshop Dersleri
  • PHP Dersleri
  • Uygulamalar
  • Windows

 

XHTML HTML’nin ve XML’in (EXtensible Markup Language)  karışımından oluşur.

XHTML; HTML 4.01’in tüm elementlerine dayanır, XML’in katı söz dizimini de içerir.


Neden/nedir XHTML?

İnternet üzerindeki çoğu sayfa düzgün olmayan yani kötü html’e sahiptir.

Bir tarayıcıda görüntülerken alttaki kodlar düzgün görüntülenecektir. (HTML kurallarına uymasa dahi):

<html>
<head>
<title>Bu düzensiz HTML</title>
<body>
<h1>düzensiz HTML
<p>Bu bir paragraf
</body>

XML bir işaretleme dili ve herşeyin düzgün işaretlenmesi gerekir ki bu tür belgelere de well-formed yani düzgün biçimli belgeler denir.

XML verileri tanımlamak için tasarlanmıştır, ve HTML verileri görüntülemek için.

Farklı firmalara ait tarayıcıların günümüz pazarında , kimisi bilgisayarlarda çalışmakta kimisi de mobil cihazlar gibi küçük cihazlarda çalışmakta. Son bahsettiğimizde herhangi bir güç ya da kaynak yoktur  düzensiz HTML’i düzeltecek.

Bununla birlikte -HTML ve XML’in birleşimi, W3C tarafından gelecek için ve şu an için en yararlı olan işaretleme dili olduğudur – XHTML.

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