HTML 5 Teknikleri Serisi - 1

Html 5 ile gelen 10 adet tekniği ve özellikleri sizinle paylaşacağım.

Html 5 ile gelen 10 adet tekniği ve özellikleri sizinle paylaşacağım. Teşekkürler

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ı.


<!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.

<!DOCTYPE html>

;)

2.Resim Eklerken Dikkat Edilecek Nokta ;

Bilirsiniz , sitenizi w3 testine soktuğunuz

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ı ;


<img src="path/to/image" alt="About image" />  

<p>Image of Mars. </p>




<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 tagları ile metni size ' e orantılı olarak küçültmekte ve estetik bir görüntü sunmakta.


<small>Arda Kazancı | Sanalkurs</small>.NET

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 ;


<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  

<script type="text/javascript" src="path/to/script.js"></script>



Yeni Kullanım ;


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

<script src="path/to/script.js"></script>



5.Düzenlenebilir İçerik ;

Bir tablo satırını düzenlenebilir kılmak çok basit işte yolu .

<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> Arda Kazancı. </li>  

        <li> Sanalkurs.net  </li>

        <li> Ne yapabileceğini göster </li>  

     </ul>  

</body>  

</html>



Teşekkürler. Bir sonraki makalede görüşmek üzere
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

bu düzenlenebilir içerik nedir? anlayamadım? html deki karşılığı nasıldı?
Düzenlenebilir içeriği , ajax ile bütünleşerek , içerik değiştirildikten sonra kalıcı olmasını sağlayabilirsin.
güzel olmuş teşekürler.

Yukarı Git