Perfect Hack Team
html-ders6
HTML5 ile Gelen Yenilikler
Merhaba arkadaşlar,
Bu dersimizle HTML5''e başlıyoruz. Öncelikle <!DOCTYPE> etiketinden söz etmek istiyorum. .<!DOCTYPE> bir web sayfasını tarayıcıya tanıtır ve sayfanın düzgün görüntülenmesini sağlar. Kullanımı şart olmasa da, tarayıcının kodları daha sağlıklı yorumlamasını sağlayıp, hata riskini azaltır. Bu etiketi sayfanın en başına yazarız ve kapatmayız. Her HTML sürümü için farklı bir <!DOCTYPE> tanımı vardır. Ben sadece HTML 1.0 ve HTML5'teki kullanımlarını göstereceğim. Amacım HTML5 ile gelen gelişimi göstermek... Diğer sürümlere dair bilgileri Internet'te bulabilirsiniz.
- HTML 1.0 için:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- HTML5 için:
<!DOCTYPE HTML>
Gördüğünüz gibi DOCTYPE etiketimiz, HTML5'te gayet sade bir hâl almış. <!DOCTYPE> etiketiyle tarayıcıya "Ben HTML5 kullanıyorum. Sayfayı ona göre yorumla." demiş oluyoruz.
İlk dersimizde de söylediğimiz gibi HTML5, HTML'in son sürümüdür; yani en güncel hâlidir. HTML5 içinde biraz CSS ve Javascript barındırır ve diğer HTML sürümlerine göre daha esnektir. Bu sürüme özgü bazı yeni kodlar gelirken, eskiden kullandığımız bazı kodlar da artık kullanılmayacaktır. HTML5'te kullanılmayacak kodları sıralarsak:
<acronym> , <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame> <frameset>, <noframes>, <strike>, <tt>, <u>, <xmp>
Bu kodların artık kullanılmamasının sebebi olarak, CSS ile de bu kodlarla yapılabileceklerin yapılması, HTML’de bunlara duyulan ihtiyacın azalmasını söyleyebiliriz. HTML5 ile gelen yeni etiketler ise açıklamalarıyla beraber şöyle sıralayabiliriz:
<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir. <audio>: Sayfaya ses oynatıcı bir modül ekler. <video>: Video oynatıcı bir modül ekler. <progress>: İşlem süreci göstergesi ekler. <caption>: Başlık olarak düşünülen metinleri düzenler. <header>: Sitenin başlık ve açıklama içeriğini alır. <nav>: Menüleri ve bir takım zaruri işlevleri içine alır. <footer>: Sitelerin en alt kısmını içine alır. <article>: Makale, deneme tarzı yazıları kapsar. <aside>: Ana içerikte ayrı yazılan kısımdır. <datalist>: Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar. <details>: Detay bilgisi içerir. <embed>: Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar) <figcaption>: <figure> elementinin başlığını belirler. <figure>: Çeşitli medya içeriği gruplarını belirler. <hgroup>: Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir. <mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler. <summary>: Yazının başlığını belirler. <time>: Tarih, saat verilerini kapsar.
Bunların dışında <command>,<meter>,<output>,<rp>,<source>,<ruby>,<section>, <rt> ve <keygen> de HTML5 ile gelen yeni etiketler arasındadır. Şimdi ilk olarak <canvas> etiketiyle bir örnek yapalım.
<!DOCTYPE HTML>
<html>
<body>
<canvas width="200" height="100"style="border:1px solid black;">
<script type=”text/javascript”>
...
</script>
</canvas>
</body>
</html>
Tarayıcıdaki görüntüsü sayfanın sol üstünde siyah kenarlıklı içi boş bir tablodur. İçi javascriptle çizim yapılması için ayrılan alandır. Javascript’e şimdi girmiyorum. Ancak yazdığım kodları açıklayayım. Width ve height ile oluşturduğumuz alanın enini ve boyunu pixel cinsinden belirlemiş olduk. Style, kenarlık özelliklerini belirlemek için açıldı. ”border:1px “ ifadesi kenarlık kalınlığını belirler. Solid kenarlığın düz çizgi olmasını sağladı. Solid yerine dashed i kullansaydık kenarlık kesik çizgi halinde olacaktı. Son olarak black ise kenarlık rengi. Onu da red yellow şeklinde değiştirmek mümkün veya #000000 şeklinde renk kodunu yazabiliriz.
Şimdi de sırasıyla <audio> ve <video> etiketlerinden bahsedelim.
<!DOCTYPE HTML>
<html>
<body>
<audio src="ses.mp3" controls="controls" autoplay="autoplay" loop="loop">
Tarayıcınız desteklemediği için ses dosyası çalınamıyor.
</audio>
</body>
</html>
Audio nun yanında kullandığımız dört ifadenin anlamlarını açıklayalım:
src="ses.mp3" ses dosyasının yerini belirler. Hatırlarsanız resim dosyalarında da aynı şeyi yapmıştık. Benim ses dosyam aynı klasörde yer aldığı için sadece adını yazdım.
controls="controls" eğer bunu yazmasaydık play tuşu gibi kontrol tuşları görünmeyecekti.
autoplay="autoplay" bu ifade sayesinde sayfa yüklendiği gibi ses dosyası yürütülmeye başlanır. Eğer kullanmazsak ses dosyasının çalması için 'play' tuşuna basılması gerekir.
loop="loop" Kullandığımız takdirde ses doyası biter bitmez baştan başlayacaktır.
Bu arada şunu da belirtelim ki <audio> elementinin desteklediği 3 tür ses uzantısı (.mp3 .ogg ve .wav) vardır. Tarayıcı ses dosyasını desteklemiyorsa ekranda bizim yazmış olduğumuz uyarı gözükür. Destekler ise uyarı yazısı görünmez.
Artık bir video dosyası ekleyebiliriz:
<!DOCTYPE HTML>
<html>
<body>
<video src="video.ogg" width="250" height="200" controls="controls" loop="loop">
Tarayıcınız desteklemediği için video açılmamaktadır.
</video>
</body>
</html>