Teknoloji ve Hayata dair günceler

Okudunuz Mu?

Son Yazılar

Kategoriler

Son Yorumlar..

Copyright © Teknoloji ve Hayata dair günceler. 2024 • All rights reserved.

Cedar WordPress Theme by EckoThemes. Published with WordPress.

Hyper Text Markup Language 5 :)

Kemal İKİZOĞLUKemal İKİZOĞLU

Html 5 Nedir?

Html şüphesiz ki tek ve en güçlü front-end dili. Bu tabir son zamanlarda oldukça popüler, hatta ABD-Avrupa?da bulunan firmalar front-end developer bile istihdam ediyor. Ama iş artık eskisi gibi basit değil..

Önceden frontpage ile iyi veya kötü herkes basit html sayfalar tasarlayıp işvereni mutlu edebilirdi, oysa şimdi bu bahsettiğimiz eleman profili hem Html5 hem XHtml 1T hem CSS3 hemde Javascript ve Jquery üzerine uzman olmak zorunda. Hatta ve hatta DOM API?s diye anılan günümüzün popüler web teknolojilerinin de geliştiricisi ve kullanıcı olması gerekli.

Konumuzdan sapmadan Html5 neymiş, nası yenilikler getirmiş bi göz atalım.

HTML5 ile hayatımıza bir kaç yeni element girdi. Burada kullandığım ?element? kelimesine dikkat. Bir kaç html imi veya tag?i girdi demiyorum, artık html?in üzerine eklenen şeyler birer element. Önceden de bizim im veya tag diye andığımız şeyleri W3C element diye anıyordu ancak benim için Html gerçek elementlerini 5.sürümünde kazandı.

Yeni Gelen Html Elementleri

<canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>

Bu elementlerin bir çoğunun işlevlerini isimlerinden anlamışsınızdır büyük olasılıkla, ancak ileride detaylı bir şekilde hepsini tek tek inceleyeceğiz.

HTML 5 ile artık video oynatmak için ActiveX elementleri ve Flash player gibi eklentilere gerek yok ! Sadece bir web tarayıcınızın olması yeterli.

Html 5?te artık desteklenmeyen Html elementleri :

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>

Çok Fazla <div> Etiketi ..

Üstte ki tablodan görebileceğiniz üzere 2002 yılından beri ?tableless web design? yani ?tablosuz web tasarımı? dönemini yaşıyoruz. <table> elementi yerini <div> elementine devr edeli tam 8 sene oluyor.

8 senedir sayfalarımızı nasıl dizayn ediyorduk peki? Genel olarak tasarlarsak yandaki şekilde ki gibi ifade edebiliriz.Tipik bir 2 sütunlu web sayfası tasarımı bu şekilde olacaktır. Gördüğünüz gibi çok fazla div elementi kullandık ve dahası sayfamızda yaratacağımız bir çok div elementi daha olacak. Html 5 üzerimizde ki yükü biraz hafifletiyor ve yeni getirdiği elementler sayesinde aşağıda ki kolay ön tasarımı yapıyoruz.

HTML 5 Öncesi kullanımda sayfa sablonu kodlama örneği

HTML 5 ile yeni gelen sayfa sablon kodlama örneği

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

<section> elementi

<section>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>

</section>

Sayfaları bölümlere ayırmak ve bu bölümleri isimlendirmek ziyaretçiye sayfada ulaşmak istediği veriye daha kolay ulaşması açısından yardımcı olacaktır. Örneğin ziyaretçi kolayca bir makaleden diğerine ?devam et? benzeri linklere ihtiyaç duymadan geçebilir. Sayfa tasarımcısı ise bir çok sayfa oluşturma derdinden kurtulacak ve <div>?ler arasında boğulmayacak.

<header> ve <footer> elementleri

Bu elementler sayesinde sayfaların başlık kısmı ve son kısımlaırnı kolayca işaretleyebiliriz.

<header>
  <h1>HTML 5</h1>
  <p>Kemal İKİZOĞLU</p>
</header>
<header>
  <h1>ikizoglu.com</h1>
  <h2>Makaleler, Html5, Güvenlik, Eğitim Bilimleri, Web Teknolojileri..</h2>
</header>
<footer>© 2010 Kemal İKİZOĞLU</footer>

<nav> elementi

<nav> elementi ile blogroll veya link kısmı şeklinde ki bölümlerinizi kolayca belirleyebilirsiniz.

<nav>
  <ul>
    <li><a href="/">Anasayfa</a></li>
    <li><a href="/iletisim">İletişim</a></li>
    <li><a href="/calismalarim">Çalışmalarım</a></li>
    <li><a href="/hakkimizda">Hakkımızda</a></li>
  </ul>
</nav>

<aside> elementi

<aside> elementi ile sidebar?larınızı kolayca belirtebilir, CSS ile tüm önce ki elementler gibi şekillendirebilirsiniz.

Tüm bu belirtme elementleri bizi karışık <div> elementlerinden kurtarıyor ve stil işlemlerimizde bize kolaylık sağlıyor.

<aside>
  <h1>Arşivler</h1>
  <ul>
    <li><a href="/2007/09/">Eylül 2007</a></li>
    <li><a href="/2007/08/">Ağustos 2007</a></li>
    <li><a href="/2007/07/">Temmuz 2007</a></li>
  </ul>

</aside>

<article> elementi

Bu element ile sayfamızda gireceğimiz content yani içerik kısmını kolayca belirtebilir, CSS ile şekillendirebiliriz.

<article id="yorum-2">
  <header>
    <h4><a href="#yorum-2" rel="bookmark">Yorum #2</a>
        by <a href="http://ornek.com/">Kemal İkizoğlu</a></h4>
    <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
  </header>
  <p>Başka bir front-end makalesi</p>
</article>

<video> ve <audio> elementleri

Ses ve video içerikleri 56K modemleri çöpe attığımız günlerden beri hayatımızda oldukça fazla rol alıyor, facebook, youtube, dailymotion, last.fm gibi bir çok web uygulaması sayesinde internette geçen her saniyemizde yeni bir medya dosyası okuyoruz.

Html 4 ne yazık ki bu medya içeriklerini kendi içerisinde barındırmaktan acizdi. Bu yüzden web uygulamaları Flash, QuickTime, MediaPlayer gibi plug-in?ler sayesinde bu eksikliği gideriyordu.

Flash gibi plug-in?ler sayesinde yayıncılar kendi medya yürütme arayüzlerini şekillendirebiliyor, kullanıcıya farklı medya yürütme seçenekleri sunabiliyordu (farklı play-stop özellikleri, HD kalitesi, HQ-SQ kalite seçenekleri vb.

Yeni gelen <video> elementi ile tüm bunlar artık Html?in kendi özelliği haline geldi.

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Filmi İndir</a>
</video>

?poster? özelliği ile video başlamadan önce video ekranında görünecek resmi seçebilirsiniz. MPEG-4 gibi video formatları ise kendi ?poster? gösterme özelliklerini içerilerinde barındırıyor.

Audio elementinin çalışma mantığı video elementiyle benzer.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

Html 5?in video ve audio elementlerinin özellikler bunlarla da sınırlı değil, dilediğiniz video oynatma codec?lerini belirtme özgürlüğüne sahipsiniz.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

 

<input> elementine eklenen yeni özellikler

Html 5 bir çok input özelliğini de kendisiyle beraber getirdi.

Html 4 ile Html 5 arasında ki farklar

Tüm farkları incelemek için bu adresi ziyaret etmenizi öneririm.Özellikler çok uzun ve parçalanamaz olduğu için oradan rahatlıkla inceleyebilirsiniz..

Html 5 Kaynakları

Html 5 hakkında tam anlamıyla bilgi sahibi olmak için W3C?yi ziyaret etmeniz yeterli.

Kaynaklar : Kaynak 1 | Kaynak 2

HTML - CSS
Kemal İKİZOĞLU
Yazar

@ikizoglukemal

Eğitim ve teknoloji haberlerini, ilginç ve önemli bilgileri, kendimi geliştirdiğim alanlardaki öğrendiğim tecrübelerimi blogumda paylaşıyorum. Öğrenmekten ve paylaşmaktan zevk alıyorum.İnandığım bir şey var ki istisnalar hariç, hiçbir şey imkansız değildir. Mucizeler için zaman gerekir! Bu benim yaşam felsefem.

Yorumlar 0
İlk yorumu yazmak ister misin?