Html ile Web İşlemleri 20 - HTML5 Tasarım Şablonu

HTML5 Tasarım Şablonu

HTML5 ile gelen en önemli özellik, anlamsal etiketlerdir (Tablo 3.9). Anlamsal etiketler kullanılarak HTML5 belge şablonu oluşturulur (Görsel 3.26). HTML5’in yapısı <div> ile kodlamanın devamıdır.

Tablo 3.9: HTML5’te Web Belgesinin Ana Bölümlerini Tanımlamak İçin Kullanılabilecek Anlamsal Etiketler

Etiket	Açıklama
<header>	HTML belgesi veya bir bölüm için bir başlık tanımlar.
<nav>	HTML belgesindeki menü bağlantısını tanımlar.
<section>	HTML belgesindeki bir bölümü tanımlar.
<article>	HTML belgesinde bağımsız, kendi kendine yeten bir içerik tanımlar.
<aside>	HTML belge içeriğinin yanı sıra içeriği tanımlayan ek içerik tanımlar.
<footer>	HTML belgesi veya bir bölüm için bir altbilgi tanımlar.
<details>	Kullanıcının talebi üzerine açıp kapatabileceği ek ayrıntıları tanımlar.
<summary>	<details> etiket bloku için bir başlık tanımlar.

Görsel 3.26: HTML5 belge şablonu

HTML5 tasarım şablonu ve anlamsal etiketlerin HTML belgesindeki konumları Görsel 3.27’de görülmektedir. Site tasarımına uygun olarak anlamsal etiketler yer değiştirebilir.

Görsel 3.27: Anlamsal etiketler ve konumları

1. <header> Etiketi

<header> etiketi, HTML belgesi şablonunun üst kısmını oluşturan yerleşim etiketidir. <header> bloku bir veya daha fazla <h1>-<h6> başlık elemanı, simge veya logo ile yazar bilgilerini içerir. <header> bloku sadece sayfa başlığı bölümünde kullanılmaz, makalelerdeki başlıkları belirlemek için de kullanılır.

<header>
  <h1>İlk Kişisel Web Sayfam</h1>
  <p>Header Yazarı : Selim</p>
</header>

2. <nav> Etiketi

<nav> etiketi, HTML belgesinde gezinme bağlantılarının tanımı için kullanılır. </nav> kapama etiketi ile kullanılır. Navigasyon kelimesinin kısaltmasıdır. <nav> bloku sadece sayfalar arası gezinme bağlantı blokudur. HTML belgesindeki tüm bağlantılar <nav> etiket bloku içinde yer almaz. Özel gereksinimli kullanıcılar için ekran okuyucu gibi tarayıcılar bu blokta yer alan içeriğin ihmal edilip edilmeyeceğine karar verir.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/dotnet/">.NET Core</a>
</nav>

3. <section> Etiketi

<section> etiketi, HTML belgesinde bölüm tanımlar. </section> kapama etiketi ile kullanılır. <section> blokunda başlık ve bir makale yer alabilir (Görsel 3.28).

<section>
  <h2>HTML5</h2>
  <p>HTML5, HTML standardının en son sürümüdür.</p>
</section>
<section>
  <h2>CSS</h2>
  <p>CSS, Cascading Style Sheets (Basamaklı Biçim Sayfaları) ifadesinden oluşturulmuş
bir kısaltmadır. </p>
</section>

Görsel 3.28: <section> etiketi kullanımı

4. <article> Etiketi

<article> etiketi, web sayfasında kullanılacak haber, makale, forum içeriği, blog içeriği, müzik vb. içerikleri tanımlamak ve yerleştirmek için kullanılır. </article> kapama etiketi ile kullanılır.

<article>
  <h1>article kullanımı</h1>
  <p>article etiketi, web sayfasında kullanılacak haber, makale vb. metinleri tanımlamak
ve yerleştirmek için kullanılır. </p>
</article>

5. <footer> Etiketi

<footer> etiketi, HTML belgesinin veya bir bölümün alt bilgisini tanımlayan bloktur. <footer> bloku yazar bilgisi, telif hakkı bilgisi, iletişim bilgisi, site haritası üst bağlantılara dön, ilgili belgeler vb. bilgilerini içerir. Bir HTML belgesinde bir veya birden fazla <footer> bloku kullanılabilir.

<footer>
  <p>Yazar : Azra <a href="mailto:yazar@meb.gov.tr">e-Posta</a></p>
</footer>

6. <aside> Etiketi

<aside> etiketi, ana içerikten farklı olarak yer alması istenen içeriğin yerleştirileceği alanı tanımlar. HTML belgesinde sidebar, kenar çubuğudur. Web sayfasında sağ veya solda yer alır. Bazı web sayfalarında reklam alanı olarak kullanılmaktadır. İçerikten ayrı kullanılmak istenen reklam, bilgi notu gibi ögeler sidebar alanında yani <aside> blokunda yer alır.

<h1>EBA’da neler var?</h1>
<p>Eğitim-öğretim sürecinde bilişim teknolojisi donanımları vasıtasıyla etkin materyaller kullanmak
amacıyla YEĞİTEK tarafından tasarlanan .. </p>
<aside>
  <h4>EBA Dükkan</h4>
  <p>EBA tarafından geliştirilen android tabanlı içerik, uygulama ve oyunlara EBA Dükkândan
erişebilirsiniz.
  </p>
</aside>

7. <figure> ve <figcaption> Etiketi

HTML belgesinde resim, fotoğraf, şekil vb. ögeleri işaretlemek için <figure> bloku kullanılır. <figcaption> etiketi figure blokunda kullanılan öge için alt yazı tanımlar (Görsel 3.29).

<figure>
  <img src="resim.jpg">
  <figcaption>Şekil.1-Figure Uygulaması</figcaption>
</figure>

Görsel 3.29: <figcaption> etiketi kullanımı

8. <hgroup> Etiketi

<hgroup> etiketi, belgenin yapısı gereği birden çok başlığı bir başlık gibi gruplamak için kullanılır.

<header>
  <hgroup>
    <h1>İlk Kişisel Web Sayfa Başlığım</h1>
    <h2>Kişisel Web Sayfası Alt Başlığım </h2>
  </hgroup>
</header>

HTML5’te, web belgesinin ana bölümlerini tanımlamak görsel olarak değil anlamsal bir değere sahiptir. Arama motorları siteyi indeksleme için geldiğinde HTML belgesinde anlamsal etiketlerin içeriklerini kullanır. HTML5 ana anlamsal etiketler ile web sayfasının iskeleti oluşturulur, görsel olarak sitenin geliştirilmesi CSS aracılığıyla sağlanır.

Sıra Sizde

Anlamsal etiketler kullanarak aşağıda kodları verilen HTML5 belgesini oluşturunuz ve tarayıcıda görüntüleyiniz.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>İlk HTML5 Belgesi ve Anlamsal Etiketler</title>
</head>
<body>
  <nav>
    <h2>MENÜ</h2>
    <ul>
      <li><a href="index.html">anasayfa</a></li>
      <li><a href="hakkimda.html">hakkımda</a></li>
      <li><a href="iletisim.html">iletişim</a></li>
    </ul>
  </nav>
<p>Web Sayfası İçeriği
    <article>
      <section>
        Okuldan Haberler
      </section>
    </article>
    <article>
      <section>
        Sağlık Haberleri
      </section>
    </article>
    <figure>
      <img src="logo.png" alt="logom" />
      <figcaption>
        <a href="url">Benim Logom</a>, daha fazla bilgi için
      </figcaption>
    </figure>
    <footer>
      <h3 id="yazar">HTML5 Yazarı : Zehra</h3>
    </footer>
  </p>
</body>
</html>