26 Mayıs 2013 Pazar

HTML5 Nedir?

HTML5 İle Web Tasarıma Girelim


Nedir HTML5 ?


HTML5 Logo Image
HTML5, temel olarak HTML dilinin yeni standardıdır.

Kim İcat Etti  HTML5'i?

Bu standart World Wide Web Consortium(W3C) ve Web Hypertext Application Technology Working Group (WHATWG)'in ortak çalışmasının sonucu olarak ortaya çıkmıştır.

HTML5'in Getirdiği Yenilikler Nelerdir?

Bu standart HTML CSS DOM ve Javascript teknolojilerinin etkin kullanılmasını temel alarak Web tasarıma hız, etkinlik ve sağlamık getirmiştir.

- HTML5 ile tasarlanan bir sitede etkileşimli grafik animasyon oluşturmak için Java applet ve flash gibi pluginlerin kullanılma zorunluluğu ortadan kalkmıştır.

- Hata ayıklama ve düzeltme sürece daha hızlı ve kolaydır.

- Evelce JavaSript ile yapılabilen bazı işler artık HTML5 tagları ile script kullanmadan browser'a yapıtırılabilir.

- HTML5 ile tasarlanan siteler PC, iPad, TabletPC gibi farklı ortamlarda da çalışabildiğinden taasarım ve üretim süreci kolaylaşmış ve hızlanmıştır.

HTML5 Site Nasıl Tanımlanır?


Bir siteyi HTML5 olarak tanımlamak için HTML kodlarının en başına sadece <!DOCTYPE html> yazmak yeterlidir. Bu tag tarayıcıya sitenin bir HTML5 sitesi olduğunu ve kodların  bu standarda göre yorumlanacağını söyler.

Temel HTML5 sayfa kodlaması ise şu şekildedir:

<!DOCTYPE html>
<html>
        <head>
                  <title>Sayfa Başlığı</title>
        </head>

<body>

Sayfa İçeriği

</body>

</html>

HTML5 ile web tsarım daha esnek ve zevkli bir hale geldi. Özellikle Javascriptle 2D, 3D animasyonlar üretmek de dahil pek çok yeteneği olan <canvas> elemanı Front-End Developer'ların gözdesi olacak.
Gönderen zaman: Hiç yorum yok:
Etiketler: , , , , , ,

24 Mayıs 2013 Cuma

HTML5 Destekli Tagların Listesi


HTML5 Teknolojisi'nin Desteklediği Tüm Tag'lar

HTML5 Web dünyasının yeni standardı... HTML5 teknolojisi ile artık daha canlı ve daha güzel. HTML5 World Wide Web Consortium (W3C) ve Web Hypertext Application Technology Working Group (WHATWG)'unun ortak çalışmasının bir ürünüdür. Bu standat ile birlite web sayfalarına canlılık getiren yeni taglar tanımlanmış ve artık web tasarımda pek kullanılmayan bazı taglar yürürlülükten kaldırılmıştır.

HTML5'in desteklemediği taglar:

HTML5 standardı, <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike> ve <tt> taglarını artık desteklememektedir.

HTML5 ile gelen yeni taglar:
<article>, <aside>, <basefont>, <audio>, <bdi>, <canvas>, <command>, <datalist>, <details>, <dialog>, <embed>, <figure>, <figcaption>, <footer>, <header>. <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>, <track>, <video> ve <wbr> taglarıdır.


HTML5'in desteklediği tagları ve ne işe yaradıklarını aşağıda sıralıyorum umarım hepimiz için aydınlatıcı bir HTML5 referansı olur.



<!--...--> : Yorum satırı tanımlar

<!DOCTYPE > : Doküman tipini tanımlar

<a> : Bağlantı oluşturur

<abbr> : Kısaltma yapmak için kullanılır (HTML, XML, WYSIWYG gibi)

<address > : Belgeye iletişim ya da site sahibi ile ilgili blgileri koymak için kullanılır

<area> : image-map içinde bir alan tanımlar

<article> : Makale görüntülemek için bir alan tanımlar

<aside> : Sayfa içeriği içinde bir bölüm tanımlar

<audio> : Ses içeriği oluşturur

<b> : Yazıyı kalın yapar

<base> : Sayfa içinde tanımlanan URL'ler için bir temel adres tanımlar

<bdi> : çift yönlü yazı alanı tanımlar

<bdo> : Yazı yönünü ters çevirir

<blockquote > : Alıntı yaparken kullanılır

<body> : Tüm Döküman içeriğini kapsayan temel tag

<br> : Bir satır boşluk bırakır

<button> : Bir düğme oluşturur

<canvas> : Script ile kontrol edilebilen bi grafik çizim alanı tanımlar

<caption> : Table elemanı için başlık tanımlar

<cite> : İtalik başlık tanımlar

<code> : Metne bilgisayar kodu formatı verir

<col> : <col> elemanı ile birllikte tablo sütunlarını özelleştirmek için kullanılır

<colgroup> : Tablo sütunlarını formatlar

<command> : Bir buton oluşturur(Browserlar desteklemiyor şimdilik)

<datalist> : Kendinden filtreli açılır liste elemanı


<dd> : Definition list için bir eleman tanımlar.

<del> : Metin üzerine çizgi çizer.

<details> : Metin üzerine tıklandığında gizlenmiş olan diğer bir metinin görünmesini sağlar.

<dfn> : Metni İtalik yapar

<dialog> : Kutucuk görüntüler

<div> : Sayfada bir bölüm oluşturur

<dl> : Definition list tanımlar

<dt> : Definition list için bir eleman tanımlar.

<em> : Eğik yazı oluşturur

<embed> : HTML dışı uygulamaları (swf gibi) çalıştıran bir alan tanımlar

<fieldset> : form içindeki elemanları sarmak için kullanılır.

<figcaption> : <figure> elemanı içine başlık metni tanımlamada kullanılır.

<figure> : İçeriği sarmalar. Kendine özgü margin değeri vardır. içine yazdığınız içeriği sayfa elemanlarından ayırır.

<footer> : Sayfada CSS kullanmadan footer oluşturur

<form> : Form alanı oluşturur

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Sayfaya başlık metni eklerler Sayı değeri büyüdükçe başlığın puntosu küçülür.

<head> :  Sayfada üst kısımda özel bilgi alanı oluşturut burdaki içeriği kullanıcılar görmez.

<header> : Sayfaya CSS kullanmadan header kısmı ekler

<hgroup> : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> elemanlarını gruplar.

<hr> : Sayfaya yatay çizgi çizer.

<html> : HTML sayfasının kök elemanı. tüm içeriği kapsar

<i> : İtalik metin oluşturur

<iframe> : ifame nesnesi oluşturur(iframe içinde başka bir web sayfası görüntülenir)

<img> : Resim eklemek için kullanılır.

<input> : Buton metin kutusu gibi form elemanlarını tanımlamak için kullanılır

<ins> : Metnin altını çizen HTML tagı

<kbd> : metin alanı tanımlar

<keygen> : formlarda kullanılır şifrelemek için kullanılır

<label> : input elemanlarını etiketlemek için kullanılır

<legend> : <fieldset> ile tanımlanan elemanlara başlık oluşturur.

<li> : Liste elemanı tanımlar

<lik> : HTML dokumanına stil ya da script dosyaları bağlamak için kullanılır

<map> : Özellikle resim elemanlarında özel bölgeler tanımlamak için kullanılır.

<mark> : Metni işaretlemek için kullanılır.

<menu> : command elemanlarının listelenmesinde oluşan bir menü tanımlar şu anlık browser desteği yok

<meta> : Web sayfaları için üst veri tanımlar

<meter> : Web sayfası içinde progressbar benzeri bir eleman tanımlar ,nernet explorer desteği yok

<nav> : CSS kullanmadan navigasyon menüsü oluşturur

<noscript> : Browser Javascript desteklemediğinde uyarı mesajı çıkarmak için kullanılır

<object> : Sayfa içinde gömülü olarak .swf gibi nesneleri görüntülemek için kullanılır

<ol> : sayfaya 1, 2, 3 gibi sıralı liste eklemek için kullanılır

<optgroup> : açılır menu elemenlarını gruplamak için kullanılır.

<option> : Açılır menuye eleman eklemek için kullanılır

<output> : Hesaplama sonucunu görüntülemek için kullanılır.

<p> : Sayfaya paragraf eklemek için kullnılan HTML tagı

<param> : Object nesnesi için parametre tanımlar

<pre> : Önceden biçimlendirilmiş bir metin tanımlar

<progress> : Sayfaya bir progress bar eklemek için kullanılan HTML kodu

<q> : metne çifttırnak ekler

<rp> : Browser ruby kodlarını desteklemediğinde görüntülenecek metni tanımlar

<rt> : Özel karakter gösterilmesini sağlar

<ruby> : ruby yazılarını gösterir

<s> : Metni üstü çizili yapar

<samp> : metin düzenler

<script> : Kullnıcı tarafında çalışan script kodlarını eklemek için kullanılır

<section> : Dokumanda bir bölge tanımlar

<select> : Açılır menu tanımlar

<small> : Metni küçültür

<source> : Media elemanları için kaynak tanımlar

<span> : HTML dökümanı içinde satır cinsinden bir alan tanımlar

<strong> : Metni kalın yapar

<style> : CSS tanımlar

<sub> : Satır altı metin oluşturur

<summary> : HTML dokumanında özet alanı öluşturur

<sup> : Satırüstü metin oluşturur

<table> : Tablo tanımlar

<tbody> : Tablo elemanlarını gruplar

<td> : Tabloda bir hücre tanımlar

<textarea> : HTML form içinde çok satırlı metin giriş elemanı tanımlar

<tfoot> :  Tablonun footer elemanların gruplar

<th> : Başlık biçiminde tablo hücre elemanları oluşturur

<thead> : Tablo başlık elemanlarını gruplar

<time> HTML dokumanında zaman bilgisi göstermek için kullanılır

<title> : HTML dokumanının başlık çubuğuna yazı yazmak için kullanılır

<tr> : tabloya satır elemanı eklemek için kullanılan HTML kodu

<u> : metnin altını çizmek için kullanılan HTML tagı

<var> : Eğik yazı oluşturur

<video> : HTML sayfasına video  eklemek için kullanılan HTML5 tagı

<wbr> : Satır sonu tanımlar

Gönderen zaman: Hiç yorum yok:
Etiketler: , , , , , ,

7 Mayıs 2013 Salı

JavaScript Saat Kodları

 JavaScript ile dijital saat yapımı.


http://www.w3schools.com da bulduğum basit ama öğretici bir Javascript uygulaması. Basit olduğuna bakmayın o sitede Advanced Examples kategorisinde bulunuyor. Yani aslında bu çalışma ileri düzeyde bir JavaScript uygulaması. siteden aldığım kodları blogger'da çalışacak şekilde düzenledim ve konunun daha iyi anlaşılabilmesi için kodları Türkçeleştirmeye çalışıtm. Kodların orijinallinde saati çalıştıran fonksion body tag'ı içine onload="saatim()" yazılarak çalıştırılıyordu ben onu scriptin içine aldım. Eğer fonksiyonu onload parametresiyle çalıştıracaksanız script içindeki saatim();  yazan satırı silin ve turuncu renklli parametreyi body tagına yerleştirin. Bu durumda scripti de head taglarinin arasına yerleştirmelisiniz. Yerleştirmeyi bu şekilde yaptığınızda web sayfanız yüklendiği zaman saatim() fonksiyonu otomatik olarak çalışacak ve web tarayıcınız fonksiyon kodlarına bağlı olarak sayfa içinde id değeri saat olan HTML elamanlarını arayacak ve bulduklarının içine o anki zamanı saat, dakika ve saniye olarak yazacaktır.

Aşağıdaki kodlamada ise durum biraz farklı. Öncelikle saati yazdırmak istediğim id'si saat olan bir HTML elemanı oluşturdum. Sonra da altına Javascirpt kodlarını yerleştirdim. Burada sıralama önemli. Bir javascript kodunu sayfa içinde kullanacaksanız mutlaka etki edeceği elemanların altına yazmalısınız. Unutmayın web tarayıcınız da aynı sizin gibi kodları yukardan aşağı okur. Eğer HTML elemanını kodun altına yazarsanız browser fonksiyonu başlatan kodu bulamaz ve programınız çalışmaz(eleman içine onload parametresi yazabilirsiniz ama herzaman sağlıklı çalışmaz, önermiyorum). JavaScript programları, elemana tıklama veya yükleme sayfa olaylarının tetiklemesiyle çalışır. Kodlama yaparken bunu göz önüne almalısınız. Aşağıdaki kodlamada hangi elemanın ne iş yaptığını kısaca anlatmaya çalıştım umarım yararlı olur.

<div id="saat"></div> // saati göstereceğim HTML elemanı
<script type="text/javascript">
saatim(); // saatim fonksiyonu çağırılıyor
function saatim() // fonksiyon başlangıcı
{
var zaman=new Date(); // zaman isimli bir Date nesnesi oluşturuluyor.
var sa=zaman.getHours();// zaman nesnesinden getHours metoduyla saat bilgisi bir değişkene aktarılıyor
var da=zaman.getMinutes(); // aynı işlem getMinutes ile dakika için yapılıyor
var sn=zaman.getSeconds(); // yine saniye bilgisi için getSeconds medodu kullanılıyor

// buraya kadar kullanılan getHours, getMinutes ve getSeconds metodları JavaScript'tin standart metdolarıdır.

da=zamanAyarla(da);
sn=zamanAyarla(sn);

// Yukarıdaki iki satırda çift haneli gösterim yapmak için dakika ve saniye değerleri zamanAyarla fonksiyonuna gönderiliyor. fonksiyon kendisine gelen sayı 10 dan küçükse bu değerin önüne bir sıfır ekleyip  geri döndürüyor
document.getElementById('saat').innerHTML=sa+":"+da+":"+sn; // id değeri saat olan HTML nesnesini içine sa, da ve sn değişkenlerinin değerlerini yazıyor
setTimeout("saatim()",1000); //Her 1000ms(1saniye) de bir saatim() fonskiyonunu çalıştıran standart JavaScript fonkisyonu burası saatin gerçek bir saat gibi her saniye değer değiştirmesini sağlıyor.
}

function zamanAyarla(i) // i parametresiyle bir değer alarak fonksiyon başlar
{
if (i<10) // koşul inceleniyor i 10 dan küçükse hemen alt satırdaki işlemler yapılacak. i 10 dan büyükse doğrudan return satırına gidilecek
  {
  i="0" + i; // i değerinin önüne 0 ekleniyor(String değer, JavaScript'te değişkenler için tip koruması yoktur)
  }
return i; // bu fonksiyon işlemleri sonucunda elde edilen değer fonksiyonun çağırıldığı yere geri döndürülüyor.
}
</script>

Şayet kodlamaları doğru yaptıysak saatimiz aşağıdaki gibi çalışacaktır. Ben sadece CSS ile biraz görünümünü değiştirdim. Siz de kendi CSS tasarımınızı uygulayabilirsiniz.

Yorumlarınızı Bekliyorum

Gönderen zaman: Hiç yorum yok:
Etiketler: , , , , , , , , ,
Kaydol: Kayıtlar (Atom)