30.10.2011, Saat: 18:04
Html 5 ile gelen 10 adet tekniği ve özellikleri sizinle paylaşacağım.
1.Yeni Dosya Oluştururken ;
Yeni bir html sayfası oluşturunca standart bir kod hemen gelir ; Eski tarayıcılar için önemliydi fakat html 5 ile bu sorun kalktı.
Bu uzun kod yerine HTML 5 ile gelen şu kodla halledebiliriz.
2.Resim Eklerken Dikkat Edilecek Nokta ;
Bilirsiniz , sitenizi w3 testine soktuğunuz <p> tagları için bir çok hata alırsınız.Bunun çözümü de çok basit ya silersiniz o zaman paragraf olarak metni kullanamayabilirsiniz.Bu yüzden yapılacak en güzel yok HTML 5 ile gelen şu kod parçacığını kullanmak;
Eski Kullanımı ;
Yeni kullanım :
3.Küçük Metin Yazarken ;
font size ' a gerek kalmadan <small></small> tagları ile metni size ' e orantılı olarak küçültmekte ve estetik bir görüntü sunmakta.
gibi.
4.Dosya bağlantı tipi belirlerken kullanılabilen bir teknik ;
Css dosyası yada bir script ' e bağlantı kurarken type değerini atarız fakat html 5 ile buna da gerek yok .
Eski Kullanım ;
Yeni Kullanım ;
5.Düzenlenebilir İçerik ;
ALINTIDIR, fakat tek tek hepsini ben yazdım.
1.Yeni Dosya Oluştururken ;
Yeni bir html sayfası oluşturunca standart bir kod hemen gelir ; Eski tarayıcılar için önemliydi fakat html 5 ile bu sorun kalktı.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">Bu uzun kod yerine HTML 5 ile gelen şu kodla halledebiliriz.
Kod:
<!DOCTYPE html>2.Resim Eklerken Dikkat Edilecek Nokta ;
Bilirsiniz , sitenizi w3 testine soktuğunuz <p> tagları için bir çok hata alırsınız.Bunun çözümü de çok basit ya silersiniz o zaman paragraf olarak metni kullanamayabilirsiniz.Bu yüzden yapılacak en güzel yok HTML 5 ile gelen şu kod parçacığını kullanmak;
Eski Kullanımı ;
Kod:
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>Yeni kullanım :
Kod:
<figure>
<img src="resim.jpg" alt="About image" />
<figcaption>
<p>Metin İle ilgili açıklama</p>
</figcaption>
</figure>3.Küçük Metin Yazarken ;
font size ' a gerek kalmadan <small></small> tagları ile metni size ' e orantılı olarak küçültmekte ve estetik bir görüntü sunmakta.
Kod:
<small>Mecruh | GencGrafikerler.Com</small>.NETgibi.
4.Dosya bağlantı tipi belirlerken kullanılabilen bir teknik ;
Css dosyası yada bir script ' e bağlantı kurarken type değerini atarız fakat html 5 ile buna da gerek yok .
Eski Kullanım ;
Kod:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>Yeni Kullanım ;
Kod:
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>5.Düzenlenebilir İçerik ;
Kod:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deneme Örneği |ARDA K</title>
</head>
<body>
<h2> Liste Menüsü </h2>
<ul contenteditable="true">
<li> Mecruh </li>
<li> MCTR </li>
<li> GencGrafikerler </li>
</ul>
</body>
</html>ALINTIDIR, fakat tek tek hepsini ben yazdım.