Reklam
TR Kodlama’dan HTML5 Taslağı

TR Kodlama’dan HTML5 Taslağı

Merhaba arkadaşlar,

Daha önce sizlere HTML5 hakkında kısa bir bilgi vermiştim. Bugün de sizlere hazır bir HTML5 taslağı veriyorum. Bu taslak sayesinde birçok işlemden anında feragat edebileceksiniz.

Aşağıdaki HTML5 Taslağı sayesinde yeni bir sayfa oluşturduğunuzda içini doldurmak için ekstra zaman kaybetmeyeceksiniz. Aşağıdaki taslak üzerinden html tasarımınıza rahatlıkla başlayabilirsiniz. Kullanılan etiketler hakkında kısa açıklamalarda da bulundum.

İşte HTML5 taslağı:

<!DOCTYPE HTML>
<html lang="tr">
    <head>
        <meta charset="utf-8" />
        <title>www.trkodlama.com</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <link rel="stylesheet" href="stil.css" />
        <meta name="generator" content="http://www.trkodlama.com">
    </head>
    <body>
        <section>
        <!-- section etiketi sayfanızı bölümlendirmeye yarar -->
        	<header>
            <!-- header etiketi sayfalarınızın başlık kısımlarını belirtir -->
        		<nav>
                <!-- nav etiketi menülerinizin bulunduğu kısmı belirtir -->
        		</nav>
        	</header>
        </section>
        <section>
        	<article>
            <!-- article etiketi yazı alanlarını belirtmek için kullanılır -->
        	<p>TR Kodlama </p>
        	<p>Güncel Programlama Makaleleri</p>
        	<figure>
            <!-- figure etiketi resim eklemenizi sağlar -->
        		<img src="resim.png" />
        		<figcaption>Deneme resim</figcaption>
                <!-- figcaption etiketi resime açıklama eklemek için kullanılır -->
        	</figure>
        
        	<small>Küçük yazım</small><!-- small etiketi yazıyı herhangi bir stil belirtmeden küçük yazdırmanızı sağlar -->
        	<mark>Vurgulu www.trkodlama.com</mark><!-- mark etiketi yazılarınızı vurgulu yazmanızı sağlar -->
            
        </article>
        </section>
        <section>
        	<aside>
            <!-- aside etiketi sağ ve sol bloklarınızı belirlemede kullanabilirsiniz -->
            <p>TR Kodlama Forumu</p>
        	<p>Programlama Destek Forumu</p>
        	</aside>
        </section>
        <section>
        <footer>
        <!-- footer etiketi sitelerinizin alt kısmıdır. nav etiketini burda da kullanabilirsiniz. -->
        	<p>http://www.trkodlama.com</p>
        </footer>
        </section>
    </body>
</html>

Bu framework’ün çalışan demosuna buraya tıklayarak ulaşabilirsiniz.

Umarım işinize yarar, kolay gelsin,


7 Yorum
  1. Turan Ergün 2 haftaönce
    Cevapla

    w3.org sitesinde temamın durumuna bakarken bana warning uyarısı olarak html başına ( lang=”tr” ) koymamdan bahsediyordu..
    bende google da bunu yazınca sayfanız çıktı karşıma..iyi ki de çıkmış zira yukardaki html5 te açıklamalar çok işime yarayabilir…ben ingilizce temayı Türkçe yapmaya çalışyorum..acemiyim bir ay oldum bloggerde blog açalı.. kendim araştırarak butonları türkçeye çevirdim epey şeyler öğrendim..fakat sorun bitmiyor anlamayınca..mesela yazıları facebookta paylaşmak için ikonlar var üstünde yazan (share )yi türkçe paylaş kelimesine çevirsem renkleri kayboluyor..scriptte sharepost yazılı ..ikinci sorunum üst bölümde facede bizi beğen butonlarının face,twitter vs için link verme yeri yok ..bir de yayınladığım yazının devamını oku düğmesi read more yazılı onun yerini bulamadım..Yukardaki yazınızı kaynak belirtip paylaşmak istiyorum..benim gibi acemilere çok faydası olacağını düşünüyorum..Herşey için teşekkürler..

  2. Turan Ergün 2 haftaönce
    Cevapla

    This document appears to be written in Turkish. Consider adding lang=”tr” (or variant) to the html start tag.
    From line 1, column 16; to line 2, column 205
    TYPE html>↩↩<head
    For further guidance, consult Declaring the overall language of a page and Choosing language tags.
    If the HTML checker has misidentified the language of this document, please file an issue report or send e-mail to report the problem.

  3. Oral ÜNAL 2 haftaönce
    Cevapla

    Yorumun için teşekkür ederim hocam, elimden geldiğince yardımcı olmaya da çalışıyorum. LOCO translator kullan tercüme için. Temanı ve eklentilerini rahatlıkla tercüme edebilirsin. Link verme yeri yoksa bulunduğun sayfanın linkini alıyor olabilir mi?

    <html lang="tr"> yapmalısın diyor

  4. Turan Ergün 2 haftaönce
    Cevapla

    Benim tema başı böyle:

    ************
    DOCTYPE html yazan yere veya bunun altına lang “tr” koysam yeterlimi

    • Oral ÜNAL 2 haftaönce
      Cevapla

      HTML etiketlerini direkt olarak kullanmana izin verilmiyor malesef. Dilersen Topluluk forumlarını kullanabilirsin, menüde bağlantısını görebilirsin.

  5. Özgür Gündüz 2 haftaönce
    Cevapla

    Schema formatına uygun olması açısından önemli bir durum. Teşekkürler yazı için

    • Oral ÜNAL 7 günönce
      Cevapla

      Değerli yorumunuz için ben teşekkür ederim. Semantic web kavramı için önemli aslında. Anlamsal web için bu etiketler kullanılmalı ayrıca microdata ve microformat özelliklerinden de faydalanılmalıdır.

Yorum Yapın

Eposta adresiniz görünmeyecektir.

10 − 5 =