html 5,
html nedir,
html ögren,
html ögreniyorum,
htnl 5 yenilik
HTML Kodlama Dersi - VII / (HTML 5 Yenilikleri)
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 HTMLPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- 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:
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><canvas width="200" height="100"style="border:1px solid black;"><body><script type=”text/javascript”>... </script> </canvas></html></body>
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><audio src="ses.mp3" controls="controls" autoplay="autoplay" loop="loop"><body>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:
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:
Ses doyası eklerken kullandıklarımızın aynısını kullandık. Farklı olarak bu sefer etiketimiz <video> idi ve boyutunu belirten height="..." ve width="..." ifadelerine yer verdik. Bu boyutlar da pixel cinsindendir.
Bu dersimizde HTML5 hakkında bilgi sahibi olduk ve HTML5 etiketlerinin üçüyle örnekler yaptık. Diğer dersimizde görüşmek üzere...
0 yorum