Html Mekancısı

Html5

Html5 geldi hoş geldi peki nedir bu html5 html5 websitelerinin kurtarıcısıdır yeni gelen özellikler sayesinde siteler çok daha şık olucak ve kodlar daha kısa olucak 2 sayfa kod yazmıcaz ufak birsey için Ben birkaç örnek veriyim size

Yeni Doküman tipi kullanımı

Eski kullanım Örnek kod:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Yeni HTML 5 ile kullanım şekli:

1	`<!DOCTYPE html>`

Bu yeni HTML 5 ile artık doctype belirtirken daha kısa olarak belirtiyoruz.

Yeni resim içersindeki bilgileri gösterme:

Örnek kod:

<figure>
 
<img src="resimadresi.jpg" alt="resim hakkında" />
 
<figcaption>
 
<p>Resim ile ilgili kısayazı </p>
 
</figcaption>
 
</figure>

SMALL

HTML 5 den önce small komutu logo yanında kullanırken şimdi small kullanımı sitenin alt bilgisi olarak kullanılmaya başladı. Genel amaçlardan bir taneside cıktı alırken küçük yazı olarak cıkartması

CSS VE JS TANIMLAMA

Eski hali:

1

2

3

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
 
<script type="text/javascript" src="path/to/script.js"></script>

Sayfamıza css veya js uzantısı eklerken uzun olarak type olarak bildirmek zorunda kalıyorduk. HTML 5 ile bu bildirim ortadan kalktı.

Yeni Hali

1

2

3

<link rel="stylesheet" href="path/to/stylesheet.css" />
 
<script src="path/to/script.js"></script>

HTML 5 İLE WEB KODLAMASI

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8">
 
<title>untitled</title>
 
</head>
 
<body>
 
<h2> To-Do List </h2>
 
<ul contenteditable="true">
 
<li> Break mechanical cab driver. </li>
 
<li> Drive to abandoned factory
 
<li> Watch video of self </li>
 
</ul>
 
</body>
 
</html>

TYPE A EKLENEN MAIL BOLUMU

Eskiden inputlarda mail adresinin dogru olup olmadıgını js ve ile kontrol etmemiz gerekiyordu. Artık bunun için email tagı eklendi.

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8">
 
<title>untitled</title>
 
</head>
 
<body>
 
<form action="" method="get">
 
<label for="email">Email:</label>
 
<input id="email" name="email" type="email" />
 
<button type="submit"> Submit Form </button>
 
</form>
 
</body>
 
</html>

PLACEHOLDER

Javascriptde defult olarak degişken gösterdigimiz. On mouse down komutunu kullanmadan place holder ile kullanabiliyoruz.

Örnek kod:

1	`<input name="email"` `type="email"` `placeholder="nurettin@tasarimrehberi.com"` `/>`

DİVLER YERİNE ELEMENTLERİN KULLANIMI

Eskiden kullandıgımız kod:

<div id="header">
 
...
 
</div>
 
<div id="footer">
 
...
 
</div>

Eskiden bütün bölümleri div ile kullanırken HTML 5 ile alt ve üst bilgileri header ve footer tagları ile belirleeyecegiz.

<header>
 
...
 
</header>
 
<footer>
 
...
 
</footer>

İNTERNET EXPLORER IN HTML 5 KODLARINI ANLAMASINI YARDIMCI OLACAK KOD:

Html 5 elementlerini anlaması için yazılan kodlar:

css yardımı ile

1

2

3

4

5

header, footer, article, section, nav, menu, hgroup {
 
display: block;
 
}

Java script yardımıyla

document.createElement("article");
 
document.createElement("footer");
 
document.createElement("header");
 
document.createElement("hgroup");
 
document.createElement("nav");
 
document.createElement("menu");

İnternet explorer olup olmadıgını kontrol eden kod ve bu kod ile elementler js ile oluşturulur.

1

2

3

4

5

<!--[if IE]>
 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 
<![endif]-->

Header grubunu tanımlama

<header>
 
<hgroup>
 
<h1> Tasarım Rehberi </h1>
 
<h2> PHP Blogu </h2>
 
</hgroup>
 
</header>

Form alanlarında zorunlu alanlar yapma

1	`<input type="text"` `name="ad"` `required="required">`

Eğer bu alan doldurulmazsa hata verecek. Bu sayede js ile kontrol etmemize gerek kalmıyor.

Örnek kod:

<form method="post" action="">
 
<label for="ad"> isminiz: </label>
 
<input type="text" id="ad" name="ad" placeholder="Nurettin" required>
 
<button type="submit">Gonder</button>
 
</form>

Müzik çaldırma kodu:

1

2

3

4

5

<audio autoplay="autoplay" controls="controls">
 
<source src="mp3adi.ogg" />
 
</audio>

Bu kodu mp3 formatında olarak 3 adet tarayıcıda denedik ve sonuçlar.(ie 8 de denemeyere gerek yok :p)

Firefox 3.8.6 ve opera 10.6 da görüntü var ama ses yok

Safari 5 hem görüntü hemde ses yok.

Görüntü dedigimiz kısım playerdir.

Firefox ve safari bir sonraki versiyonunda ogg formatını destekledigi gibi mp3 formatınıda destek verecek. Opera ise şu anda sadece waw formatını desteklemede.

VİDEO DESTEGİ

Video dosyalarını artık direk olarak çalıştırabileceksiniz.

Örnek kod:

<video controls preload>
 
<source src="videoadi.ogv" type="video/ogg; codecs='vorbis, theora'" />
 
<source src="videoadi.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
 
<p> Tarayıcınız eski yenileyin <a href="cohagenPhoneCall.mp4">Videoyu indir.</a> </p>
 
</video>

HTML 5 video destegi olmayan browserlar için güzel bir uyarı sistemide yapılmış. Eğer kişi videyou izleyemezse indirebilecek.

FORM KONTROL ELEMANLARI (Regular Expressions)

<form action="" method="post">
 
<label for="kullaniciadi">kullanıcıadı: </label>
 
<input type="text"
 
name="kullaniciadi"
 
id="kullaniciadi"
 
placeholder="4 <> 10"
 
pattern="[A-Za-z]{4,10}"
 
autofocus
 
required>
 
<button type="submit">Gonder </button>
 
</form>

bu örnek kodda en az 4 karekterli en fazla 10 karekterli olacak ve zorunlu alan olarak tutmuş ve sadece harfler girilebilinir.

HTML 5 in desteklemedikleri

SVG,CSS3,Geolocation,Client Storage, Web sockets (quake 2 oyunu gördüm)

Youtube linki http://www.youtube.com/watch?v=XhMN0wlITLk

CSS ile on mouse hover yapılması

Örnek:

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8">
 
<title>Sort of Lame CSS Text Changing</title>
 
<style>
 
h1 { position: relative; }
 
h1:hover { color: transparent; }
 
h1:hover:after {
 
content: attr(data-hover-response);
 
color: black;
 
position: absolute;
 
left: 0;
 
}
 
</style>
 
</head>
 
<body>
 
<h1 data-hover-response="I Said Selamlar!"> Selam</h1>
 
</body>
 
</html>

Yazı boyutunu ayarlama

<form method="post">
 
<h1> Toplam ürünler </h1>
 
<input type="range" name="range" min="0" max="10" step="1" value="">
 
<output name="result">  </output>
 
</form>

Yazı boyutunu 1 fonttan 10 fonta kadar degiştirir.

CSS ile degiştirilmesi

body {
 
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
 
text-align: center;
 
}
 
input { font-size: 14px; font-weight: bold;  }
 
input[type=range]:before { content: attr(min); padding-right: 5px; }
 
input[type=range]:after { content: attr(max); padding-left: 5px;}
 
output {
 
display: block;
 
font-size: 5.5em;
 
font-weight: bold;
 
}