Html Mekancısı

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:

01
02
03
04
05
06
07
08
09
10
11
<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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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:

01
02
03
04
05
06
07
08
09
10
11
<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.

01
02
03
04
05
06
07
08
09
10
11
<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

01
02
03
04
05
06
07
08
09
10
11
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]>
 
 
<![endif]-->

Header grubunu tanımlama

01
02
03
04
05
06
07
08
09
10
11
<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:

1
2
3
4
5
6
7
8
9
<form method="post" action="">
 
<label for="ad"> isminiz: </label>
 
<input type="text" id="ad" name=