HTML5 ile Blog Hazırlamak

HTML5HTML5 ile gelen yeniliklerin birçoğu interaktif web sayfaları oluşturmamıza ışık tutuyor.

Bu yeni elemanlar yığını geleneksel Web 1.0 sayfalarımızı daha şematik hale getiriyor. Böylece JavaScript ile yaptığımız birçok işlemin yerini HTML5’in varsayılan elemanları alıyor. Böylece veri boyutu ve açılma hızı düşüyor.

Bu etkinin blog tasarımına etkisini inceleyerek makalemize başlayalım.

Bu makalenin devamında şunları konuşacağız :

  1. HTML5’in ilk gününden bugüne olan gelişmini
  2. Tasarımın iskeletini hangi elementlerle oluşturacağımızı,
  3. Footer, header, content ve nav gibi alanları nasıl şekillendireceğimizi,
  4. HTML5’in article elemanını ile daha düzgün konu alanları hazırlamayı
  5. HTML5 uyumlu tarayıcılarda web sayfamızın kusursuz olarak görüntülenmesini,

konuşacağız.

Şimdi arkanıza yaslanın ve yavaş yavaş işe koyulalım.

HTML5 nedir?

HTML, HTML 4.01 isimleri 1999 yılında hizmete sunulmuştu. Fakat artık yerlerini gelişmekte olan HTML5 ‘e bırakmaktalar.

HTML5 web geliştiricilerinin kodlamalarında kullanabileceği en güncel iskelet sistemdir. Web 1.0‘ın asosyal tasarımları Web 2.0 ile kullanıcılarına kucak açmıştı. Adını sık sık andığımız Web 3.0 ile de etkileşim tavan yapmakta.

HTML5 ve CSS3‘de bu süreci hızlandıran en etkin elemanlar. HTML5 hakkında daha fazla bilgi için sizi buraya alalım.

WordPress teması mı yapmak istiyorsunuz?

Adobewordpress olarak ziyaretçilerimizin WordPress‘i ne kadar sevdiğinin farkındayız. Sizlerle ortak noktalarımız olması sevindirici.

WordPress için HTML5 iskeletinde bir tasarım oluşturmak sizin hünerinize kalıyor. Ama size yardımcı olabileceğimiz konular da var. Makalemizin devamında bu hususları detaylandıracağız.

Roots ThemeAma aceleniz var ve iyi bir okuyucu değilseniz Roots HTML5 WordPress Teması ile iskelet yapıya sahip temel HTML5 temalar hazırlayabilirsiniz.

Roots isimli bu temayı geliştirerek kısa süre içerisinde %100 HTML5 standartlarında tasarımlar oluşturabilirsiniz. Sıfırdan başlamaktansa Roots güzel bir tercih gibi gözüküyor.

DOCTYPE Yapısı

HTML5 temelinde DOCTYPE kullanımına ihtiyaç duymaz. Fakat bazı tarayıcılar DOCTYPE tanımlamasını görmediğinde Quirksmode dediğimiz sisteme geçiş yaparlar. Bu tarayıcılara en büyük örnek tahmin edebileceğiniz gibi Internet Explorer’dır.

Peki nedir bu Quirksmode?

HTML kod satırında DOCTYPE tanımlaması olmadığı zamanlarda tarayıcılar kendilerince bir tanımlama yaparlar. Tarayıcı DOCTYPE olmayan bir tasarımı beklenmedik bir davranış olarak algılar. Ve kendince çözümler üretir.

Quirksmode tanımlaması yapan bir web sayfasına sahip olmamak için tasarımımızın en üstüne aşağıdaki satırı ekleyerek başlıyoruz.

<!DOCTYPE html>

Yeni yapı elemanlarının kullanımı

HTML4 ile tasarlanmış web sayfalarının iskeleti <div> elemanlarından oluşmaktadır. Bu genellemeyi yapıyoruz çünkü Adobewordpress bile ilk kurulduğunda bu yapıya sahipti. Hatırlayacağınız gibi üst kısım için <div class=”header”>, menümüz için <div class=”navbar”>, içerik penceresi için <div class=”article”> ve alt kısım için <div class=”footer”> gibi tanımlamalar yapardık. Eğer elinizin altında hala bu yapıya sahip bir web sayfası varsa üzülmeyin. Çünkü bu yapı hala doğru. Fakat ben HTML5 iskeletine sahip bir web tasarımına sahip demek istiyorsanız bunu

HTML4 Sayfa Yapısı

bununla

HTML5 Sayfa Yapısı

değiştirmek zorundasınız.

Gördüğünüz gibi içeriğimizi <section> içerisine ekliyoruz. Burada her makalemiz için <article> elemanını kullanabiliriz.

Makaleleriniz içerisinde kilit noktaları ve dipnotları <aside> ile belirlemek tasarımınız için faydalı olabilir. Örnek bir kullanım hazırlayalım.

<article>
Bu zor bir matematik soru. Hatta havuz problemi. Can sıkıcı bu soruyu çözmek için çok basit bir formül yeterli. Formülü bilmeden soruyu çözmek neredeyse imkansız.
<aside>Formül : x=a+b/<aside>
</article>

Daha önce <aside> kullanarak button yapıları oluşturmuştuk. Onlara göz atmak ister misiniz?

Konumuza geri dönelim.

Aslına bakarsanız HTML yapımızdaki <div> elemanlarını yenileriyle değiştirmek zor değil. Tek yapmanız gereken eskiden div.header şeklinde yaptığınız CSS tanımlamalarını header olarak değiştirmek. Bu kadar basit.

Yeni medya elemanları

HTML5 ile daha kullanışlı müzik ve video elemanları web tasarımına dahil oldu. Bu yeni tip elemanlar bizi hantal ve kullanışsız oynatıcılardan kurtarıyor.

  1. HTML5 Müzik Oynatıcı
  2. HTML5 Video Oynatıcı (Altyazı ve Logolu)

Yeni form elemanları

Daha önceleri form öğelerinde JavaScript kullanarak bir takım hataları form post edilmeden önce ayıklayabiliyorduk. Örneğin “bu doğru bir elektronik posta adresi değil” gibi bir uyarıyı içerisinde @ olmayan bir gönderime uyarı olarak çıkarabiliyorduk. Fakat HTML5 bu işlemi tarayıcıyla etkileşim kurarak otomatik yapıyor.

Bu da ilginizi çekebilir  CSS ile Title ve Alt Etiketlerini Renklendirin

Form içerisinde kullandığınız ve ziyaretçinin elektronik posta adresini girmesi gereken bir alan düşünün. Input öğemiz içerisine input type=”email” ekleyerek girilen verinin bir elektronik e-posta adresi olup olmadığını JavaScript desteğine ihtiyaç duymadan kontrol edebiliyoruz.

Bir diğer güzel örnek tarih form öğeleri için gösterilebilir. Tarih bilgisi eklediğiniz klasik form öğesine input type=”date” alanını ekleyin ve farkı görün.

Date

Gördüğünüz gibi form öğemiz fazlasıyla detaylanıyor, etkileyici bir tarih öğesi formun :active elemanına ekleniyor.

Ayrıca input öğelerinin sonuna eklenen required tanımlaması ile form içerisinde bu alanların boş bırakılmasının önüne geçilebiliyor. Kullanıcı doldurulması zorunlu bir alanı boş geçip submit buttonuna bastığında “Bu alanı boş bıraktınız!” uyarısıyla karşılaşıyor.

Sizler için HTML5 form örneği hazırladık. Böylece isim alanındaki required tanımlamasının ne işe yaradığını daha iyi açıklayabilmiş olacağız.

Gayet kullanışlı değil mi? Konuya yavaş yavaş ısındığınızı hisseder gibiyiz.

Yeni elemanlarla yapılandırma

Daha önce söylediğimiz gibi geleneksel <div> yapınızı yeni elemanlarla değiştirmek çok zor değil. Buradan HTML4 için hazırlanmış CSS2 iskeletini görüntüleyebilirsiniz.

Başlangıç için yapmanız gereken HTML5 iskeletinizi oluşturmak olacaktır. Peki mobil cihazlara da uyumlu, estetik ve esnek bir web taslağı nasıl hazırlanır?

Eğer hala bu sorunun cevabını düşünüyorsanız sizi buraya alalım.

Başlangıç için ana elemanlarınızı block hale getirmenizi öneriyoruz. Böylece çoğu tarayıcı da aynı gözüken bir alt yapıya sahip olacaksınız.

header, footer, nav, article {display:block;}

<header> veya <footer> gibi bu yeni elemanların önemi ne?

Akla ilk gelen sorulardan birisi niye böyle bir güncellemeye gerek duyulduğu.

HTML5’in yeni elemanları tarayıcılar tarafından otomatik olarak tanımlanıyor. Siz tarayıcı üzerinden web sayfasını görüntülerken kullandığınız program <footer> elemanını fark ediyor ve o kısmın footer olduğunu otomatik olarak algılıyor. Aynı şekilde tarayıcılar menünün, headerın veya makalelerin nerede olduğunu yine bu elemanlar sayesinde otomatik olarak tanımlıyor.

Bu aşinalık web sayfalarının çalışma hızını arttıyor ve tüm tarayıcılar için tek tip sonuçlandırmaya sebep oluyor. Böylece web geliştiricilerinin yaptıkları tasarımları onlarca tarayıcıya uydurmak için vakit kaybetmesi engellenecek gibi. Tabii bu süreç biraz zaman alacak.

Tarayıcıların dışında bu yeni elemanlar arama motorlarını da sitenize dost ediyor. Bir Google botu olduğunuzu varsayın ve aşağıdaki sayfaları taradığınızı düşünün.

<div class="makale">
Ben bir makaleyim. Çok önemli bilgiler içeriyorum ama o kadar gizli saklı kalmışım ki kimse beni okumuyor.
</div>

Google sadece makale diye sınıflandırılmış bir div görecek ve içerisinde 2 cümlelik bilgi olduğunu algılayacak. Bu bilgiler sitenin hangi bölgesi, header mı, footer mı, yoksa menünün bir parçası mı, bütün bu soru işaretleri SEO değerinizi düşürecektir.

Ve sonra bambaşka bir siteye (unutmayın hala Google botusunuz) giriyorsunuz.

<article>
Hiçbir şey anlatmıyorum. Ama yine de makaleyim ve çok popülerim!
</article>

Google botu sitedeki diğer öğeleri taradıktan sonra makaleye odaklanacaktır. Makalenin article içerisinde bulunduğunu gören bot hızlıca indeks alıp kendinden emin bir şekilde arama kriterini article olarak düzenleyecektir. SEO işte bu kadar detaylardadır.

Kapanış

HTML5 desteğiyle tasarım üzerine genel anlamda konuştuk. Yeni şematik ve interaktif yapıyla HTML4’ün geleneksel yapısını kıyasladık.

Adobewordpress olarak sizlere HTML5 kategorimiz altındaki örneklere ve makalelere göz atmanızı öneriyoruz. Yenilikler düne kadar kapımızdaydı. Fakat bugün HTML5’in kullanımı günden güne yaygınlaşıyor. Yeni oluşum içerisinde yer almak önemli. Bu yüzden sıklıkla HTML5 konusuna değiniyoruz ve değinmeye de devam edeceğiz.

Bir sonraki makalemizde görüşmek üzere, hoşça kalın.



  • Mississippi

    3-5 satır kod yazarak, sırf rating kaygısıyla yazmadığınız için çok çok teşekkürler. Mükemmel bir anlatım olmuş.

  • Buğrahan

    Bu anlatımlarla pek birşey yapılmaz açıkçası.

    • Ne aradığınıza göre değişir. Öğretimin temeli yol göstermek, bizler hazır içerikler sunmuyoruz. Adobewordpress, “armut piş ağzıma düş” mantığından çok uzak bir web sayfasıdır.

  • ömer d.

    ‘nin kullanımı konusunda yeteri kadar bilgiye sahip değilsiniz heralde hocam. tagı bir sitenin sidebar kısmını oluşturan elementin adıdır. Böyle küçük varyasyonlar için kullanılacak bir tanımlama değildir. Onun yerine tagını kullanmanızda fayda var. ile ilgili detaylı bilgiyi de google’da bulabilirsiniz.

    kolay gelsin

  • Samet Cafer

    Merhabalar Ve İyi Akşamlar;
    Bir orunum Fakat Çözemedim.HTML5 İle Uğraşıyorum Prohe Desteğiyle Fakat Bir Yerde Tıkandım Kaldım.
    Şöyle Ki;
    Ekte
    Gönderdiğim İndexdeki Gibi(İçerik Ve Sağ Sidebar) Bir Tasarımım Var
    Fakat Ben Bu Tasarımın Öyle Değilde Sol Sidebar İçeirk Ve Sağ Sidebar
    Şeklinde Olmasını İstiyorum.Fakat Bir Türlü Nasıl Yapacağımı
    Çözemedim.Yardım Etme Ve Verme
    Şansınız Var Mıdır ?

  • acemiii :(

    ya çok mu acemi kalacağım bilemiyorum. ama şu htlm5 hakkında bişeyler öğreneyim neyin nesi olduğunu anlayım diyorum ama hiç bişey anlayamadım daha hala. sanırım benim sorunum asıl aradığım şeyin cevabını bulamamak. internette bir sürü htlm5 temaları görüyorum. çok hoşuma gidiyor ama indirince ne wordpress te ne blogger da ne de diğer blog sitelerinde falan kullanılıyor. mantığı nedir bunun çözemedim. nerde kullanılır bu htlm5? ben web site kurmaktan kodlardan pek anlamam da ondan soruyorum yani. 🙁 bnm gibi kodlardan anlamayanlar bu temaları wordpress yada blogger gibi blog sitelerinde kullanamazlar mı?

    • Ali Hoca

      Sizin gibi acemiler için hazır sistemler var wordpress gibi onu kullnarak html5’e ihtiyaç duymadan milyonlarca tema ve eklentisiyle harike bir site oluşturabilirsiniz 😉

      • Ziyaretçi

        Senin Site WordPress değil mi mübarek?
        Ne profesyonel iş ama.

      • Ziyaretçi

        La ne diyon la sen??

  • davulga afyon

    kolay gelsin bi sitem var simdi örnek veriyorum

    makalemi buraya girdim html5

    böyle mi yapacağiz yoksa bi eksiğim mi var (sa konunun kopyasını Wmaracında paylaşırmısınız)

  • Cengizhan Demirel

    yaw abı delırcem vallahı sabahtan berı arastırıyorum basım agırdı bılmedıgım konuları yanı kodları yazıyorum yeterlı bılgı alamıoyrum ingilizce kaynak cok guzel bır turkce kaynak yapsanız buyuk dua kazanırsınız