HTML5 Yapısal Etiketler

Published in

gokhanyavas

4 min readJan 23, 2017

HTML5 web sistesi aşağıdaki yapılardan oluşur. Bu yazımda aşağıda görmüş olduğunuz yapıları inceleyeceğiz.

Bu görmüş olduğunuz yapının tamamına container denmektedir. Header, site logusu ve dahili arama öğelerini içerir. Nav, yani navigation sitenin menülerini içerir. Article ve Section kısımlarını kapsayan yapıya content(içerik) denir. Sitemizle ilgili tüm içerik bu kısımda yer alır. Aside, ekstra bilgilerin yer alabileceği kısımdır. Footer, websitenin yapım tarihi ve telif haklarının belirtildiği alandır.

<div id="container">
    <header>
    </header><nav>
    </nav><div id="content">
    </div><aside>
    </aside><footer>
    </footer>
</div>
html5'in genel yapısı bu şekilde. Şimdi bu etiketlerin nasıl kullanıldığını inceleyelim:<div> etiketiHTML kodlarında en çok kullanılan yapısal elementin adıdır. Açılımı division: bölüm anlamına gelir.<div>
    <p>Bu bir div'dir.</p>
</div>

<section> etiketi

HTML5 ile gelen bir etikettir. Kısım anlamına gelmektedir. Kodlamada kullanılan divlerin çokluğuna karşın, karışıklığı azaltmak için kullanılabilir.<section>
    <div>
        <p>Birinci section birinci paragraf</p>
    </div>
    <div>
        <p>Birinci section ikinci paragraf</p>
    </div>
</section>
<section>
    <div>
        <p>İkinci section birinci paragraf</p>
    </div>
    <div>
        <p>İkinci section ikinci paragraf</p>
    </div>
</section>

<header> etiketi

Sitemizin en üst kısmında bulunan logo, sosyal medya butonları, arama kutusu, telefon numaraları vs gibi bağlantıların yer aldığı kısımdır.<header>
    <p>GökhanYAVAŞ</p>
</header>

<nav> etiketi

Sitemizin menülerinin bulunacağı kısımdır.<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<footer> etiketi

Sitemizin telif haklarının, iletişim bilgilerinin yer aldığı kısımdır.<footer>
  <p>Tüm hakları saklıdır. 2017</p>
  <p>İletişim bilgileri: <a href="mailto:someone@example.com">
  someone@example.com</a></p>
</footer>

<aside> etiketi

Sitenin sidebar olarak olarak tanımlanan alanı yan tarafı belirtir. Bu kısımda sol veya sağ tarafta olabilir.<aside>
  <h4>Merhaba</h4>
  <p>Gökhan YAVAŞ ile HTML5 öğreniyorum..</p>
</aside>

<article> etiketi

Article, makale anlamına gelmektedir. Sitemizde yer alan metinler bu etiket içinde yer alır.<article>
  <h1>HTML5 Nedir?</h1>
  <p>HTML5, internetin çekirdek teknolojilerinden HTML
  işaretleme standardının beşinci sürümüdür.</p>
</article>

<figure> ve <figcaption> etiketi

Sitedeki görsellerin figure etiketi içinde kullanılması tavsiye edilmektedir. Figcaption, görselin başlığını belirtmek için kullanılır.<figure>
  <img src="pic_mountain.jpg" alt="Everest" width="304" height="228">
  <figcaption>Everest Dağı 2012</figcaption>
</figure>HTML5 'in yapısı bu şekilde. Şimdi önemli etiketleri inceleyelim:<span> etiketi: Yazılan bir kelimenin veya cümlenin rengini değiştirmek istediğimizde kullanırız.<div>
    <p>Bu <span style="color: yellow">kelime</span>'nin rengini değiştirdik</p>
</div><button> etiketi: Düğme/Buton oluşturmak için kullanılır.<button>TAMAM</button><code> ve <pre> etiketleri: HTML sayfalarımızda, kod bloglarını diğer kodlara karışmamısı için kullanılır.<pre>
    <p>paragraf kodu</p>
</pre><code>
    <p>paragraf kodu</p>
    <b>kalın yazı kodu</b>
</code>
<mark> etiketi: Bir kelime veya cümleyi fosforlu kalemle çizilmiş gibi işaretlemek için kullanılır.<p>Bu cümledeki vurgulanmış kelime <mark>çok önemli</mark>dir.</p>

Head Etiketleri

İlk yazımızda head etiketinden bahsetmiştik. Bu kısımda konuyu biraz daha açalım.<meta> etiketi: SEO için kullanılır.<meta property="og:title" content="Gökhan Yavaş &ndash; Kişisel Web Sitesi - Yazılım Geliştirici" />
<meta property="og:description" content="Kişisel Web Sitesi - Yazılım Geliştirici" />
<meta property="og:url" content="http://gokhanyavas.com/" />link etiketi: Sitemiz için bağlantı vermek için kullanılır. CSS, ikon, JS dosyaları örnek verilebilir.<link rel='stylesheet' id='icons-css'  href='http://gokhanyavas.com/wp-content/style.css' media='all' />
<link rel='stylesheet' id='css'  href='http://gokhanyavas.com/r.min.css' media='all' /><style> etiketi: O sayfaya ait stil dosyaları kullanılmak istediğinde bu etiket kullanılır.<!doctype HTML>
<html>
    <head>
        <style>
            body {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Bu yazının rengi kırmızıdır.</p>
    </body>
</html><script> etiketi: JS yani javascript komutlarını çalıştırmak için kullanılan etikettir.<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
</script>
</body>
</html>

Form İşlemleri

HTML sayfalarımızda, buton, textbox kısacası form kullanmak istediğimizde form etiketi kullanılır.<form>
    <label>Adınız: </label> <input type="text"/> <br/><br/>
    <label>Soyadınız: </label> <input type="text"/> <br/><br/>
    <input type="submit" value="Gönder"/>
</form><fieldset> ve <legend> etiketleri: <fieldset> etiketi form elemanlarını bir araya toplayarak bir kutu çizer. Bu etiketin başlık kısmını ise <legend> etiketi oluşturur.<form>
    <fieldset>
         <legend>Üye Bilgileri</legend>
         <label>Adınız - Soyadınız: </label> <input type="text"/> <br/><br/>
         <label>e-Posta Adresiniz:  </label> <input type="text"/> <br/><br/>
         <label>Doğum Tarihiniz:   </label> <input type="text"/> <br/><br/>
         <input type="button" value="Onayla"/>
    </fieldset>
</form><textarea> etiketi: Çok satırlı metin giriş alanıdır.<form>
    <fieldset>
        <legend>İletişim</legend>
        <label>Mesajınız:   </label> <textarea  rows="2" cols="18"></textarea> <br/><br/>
        <input type="submit" value="Onayla"/><br/><br/>
        <input type="reset" value="Formu Temizle"/>
    </fieldset>
</form><select> ve <option> etiketleri: Açılır menü oluşturmak için kullanılır.<select>
    <option>Python</option>
    <option>CSS</option>
    <option>JS</option>
    <option>Ruby</option>
    <option>Oracle 12c</option>
</select><optgroup> etiketi: Seçim menüsünde seçimleri sınıflandırmak için kullanılır.<select>
    <option>Seçiniz</option>
    <option>Diller</option>
    <optgroup>
        <option>İngilizce</option>
        <option>Almanca</option>
        <option>Rusça</option>
        <option>Arapça</option>
    </optgroup>
    <option>ülkeler</option>
    <optgroup>
        <option>ABD</option>
        <option>England</option>
        <option>Iraland</option>
        <option>Turkey</option>
    </optgroup>
</select>

Medya Etiketleri

Bu kısımda, sayfalarımızda medya etiketlerinin kullanımını inceleyeceğiz.<audio> etiketi: Ses dosyalarını çalmak için kullanılır.<audio controls preload="none" style="width: 400px;">
    <source src="https://soundcloud.com/youandidesign/parov-stelar-lost-in-amsterdam" type="audio/mpeg">
    Tarayıcınız HTML5 Audio formatını desteklemiyor...
</audio><video> etiketi: Video dosyalarını oynatmak için kullanılır.<video width="480" controls>
    <source src="https://www.youtube.com/watch?v=5tp1tAE6k0E" type="video/mp4"/>
    Tarayıcınız HTML5 Video formatını desteklemiyor...
</video>Audio ve Video için MimeType'lar
Birçok sunucu HTML5 Audio ve Video özelliklerini desteklememektedir. Bunun için sitenizin ayar dosyasının içine aşağıdaki kodları eklemelisiniz.<staticContent>
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
    <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />
    <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
    <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
    <mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
    <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>HTML5'i  ileri derecede incelemiş olduk. Bundan sonrası sizin yaratıcılığınıza kalmış birşey. Kreatif günler dilerim :)