Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 201 Ders Programı
Sınava Gir

HTML5'te Temel Yapısal Elemanlar

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

HTML5 ile beraber yeni pek çok etiket geldi. Bu etiketlere kısaca göz atalım:

 

<article> etiketi

<article> etiketi, web sayfası üzerine yerleştirilecek haber, makale vb. metinleri tanımlamak ve yerleştirmek için kullanılır.

<!DOCTYPE html>
<html>
 <head>
        <meta charset="UTF-8">
        <title>İlk HTML belgesi</title>
    </head>
    <body>      
        <article>
            <h1><br>GOCMEN KUSLAR OPTIMIZASYONU</br>
                (MIGRATING BIRDS OPTIMIZATION)</h1>
            <p><br>2012 yılında New York'ta, Information Sciences dergisinde
            yayınlanan bir makale ile</br> dünya literatürüne giren ve önemli yankılar oluşturan
            optimizasyon algoritması. <br>Yazarlar: Ekrem Duman, Mitat Uysal, Ali Fuat Alkaya</br></p>
        </article>  
    </body>
</html>

 

<aside> etiketi

<aside> etiketi, esas içerikten ayrı olarak yer almasını istediğiniz içeriği yerleştirecek alanı tanımlamak için kullanılır. Sayfa içinde genellikle bu kısım sidebar olarak da isimlendirilir.

<!DOCTYPE html>
<html>
 <head>
        <meta charset="UTF-8">
        <title>İlk HTML belgesi</title>
    </head>
    <body>      
        <p>Bu yaz Baltık turu çok ilginçti. Kopenhag,<br>Talinn, Stockholm ve görkemli Sankt Peterburg</br></p>
        <aside>
            <h4>Baltık denizi</h4>
            <p>Kuzey Avrupa'da bir iç denizdir. Almanya, Polonya, <br>Rusya, Finlandiya ve İsveç'in kıyısı vardır.</br></p>
        </aside>
    </body>
</html>

 

<header> etiketi

<header> etiketi, sayfanın başlığını temsil eder. Genellikle bu eleman sayfanın en üstünde yer alır; genellikle bir logo ya da benzer bir işaret içerebilir.

<!DOCTYPE html>
<html>
 <head>
        <meta charset="UTF-8">
        <title>İlk HTML belgesi</title>
    </head>
    <body>       
        <article>
            <header>
                <h1>FUZULİ</h1>
            </header>
            <p>Divan Edebiyatı'nın büyük şairi<br>
            "Selam verdim rüşvet değildir deyu almadılar"</br>
            mısraları ile ünlüdür."</p>
        </article> 
    </body>
</html>

 

<hgroup> etiketi

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

<header>
  <hgroup>
    <h1>BAŞLIK 1</h1>
    <h2>ALT BAŞLIK 2</h2>
  </hgroup>
</header>

 

<figure> etiketi

<figure> etiketi, illüstrasyonlar, diyagramlar, fotoğraflar, kod listeleri gibi kendi içeriğini anlatan bir yapı oluşturur. <figure> elemanı web sayfasının ana akışı içinde tanımlanmasına rağmen pozisyonu ana akıştan bağımsızdır yani bir şekilde uzaklaştırılırsa sayfanın ana akışı etkilenmez.

 

<figcaption> etiketi

<figcaption> etiketi <figure> etiketi içinde yer alarak, görsel hakkında ilave bilgiler vermek için kullanılır.


<figure>
  <img src="GoogleLogo.png" alt="logo" />
  <figcaption>
    <a href="http://google.com/logo.png">
    Google Logo</a>, daha fazla bilgi için web sayfasını ziyaret ediniz.
  </figcaption>
</figure>

Yukarıda verilen örnek kodları bir metin editörünü kullanarak ornek.html adlı bir belgeye aşağıdaki gibi kaydederek deneyebilirsiniz:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>İlk HTML belgesi</title>
    </head>
    <body>
        <p>Web Sayfası İçeriği
<figure>
  <img src="GoogleLogo.png" alt="logo" />
  <figcaption>
    <a href="http://google.com/logo.png">
    Google Logo</a>, daha fazla bilgi için web sayfasını ziyaret ediniz.
  </figcaption>
</figure>
</p>
    </body>
</html>

 

<footer> etiketi

<footer> etiketi sayfanın footer (dipnot) kısmının tanımlanması için kullanılır. Sayfanın en alttaki alandır. Bazı önemli bilgiler, yasal hatırlatmalar buraya yerleştirilir. <header> gibi kullanımı zorunludur.

<footer>
  <h3 id="yazar">Geleceği Yazanlar</h3> 
</footer>

 

<nav> etiketi

<nav> etiketi, sayfa üzerinde dolaşma (navigation) menüsünün tanımı için kullanılır.

<nav>
  <h2>Menu</h2>
  <ul>
    <li><a href="#Sayfa1">Sayfa1</a></li>
    <li><a href="#Sayfa2">Sayfa2</a></li>
    <li><a href="#Sayfa3">Sayfa3</a></li>
  </ul>
</nav>

 

<section> etiketi

<section> etiketi, sayfanın çeşitli kısımlarını birbirinden ayırmak için kullanılır.

<!DOCTYPE html>
<html>
 <head>
        <meta charset="UTF-8">
        <title>İlk HTML belgesi</title>
    </head>
    <body>    
        <section>
            <h1>ATTİLA İLHAN</h1>
            <p>Turk edebiyatının 20. yüzyıldaki en büyük
            şairlerinden biridir. Kendine özgü, lirik, çarpıcı yer yer
            sosyal rüzgârlarla dolu bir şiir sunar.
            </p>
        </section>      
        <section>
            <h1>EDİP CANSEVER</h1>
            <p>İkinci Yeni'nin büyük şairi. Kendi yolunda görkemli adımlarla yürüdü. 
            Boğaz meyhanelerinin hırçın şairi.
            Ruhi Bey nasıldır acaba bugün?</p>
        </section>      
    </body>
</html>

Öğrendiğimiz tüm yeni etiketleri aşağıdaki kod parçasında test edebiliriz:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>İlk HTML Belgesi</title>
    </head>
<nav>
  <h2>Menu</h2>
  <ul>
    <li><a href="http://www.dogus.edu.tr">DOGUS ÜNİVERSİTESİ</a></li>
    <li><a href="http://www.boun.edu.tr">BOĞAZİÇİ ÜNİVERSİTESİ</a></li>
    <li><a href="http://www.sabanciuniv.edu.tr">SABANCI ÜNİVERSİTESİ</a></li>
  </ul>
</nav>
    <body>
        <p>Web Sayfası İçeriği

<article>
            <section>
            Borsa Haberleri
            </section>
      </article>

<article>
            <section>
             Politik Haberler
            </section>
      </article>

<figure>
  <img src="GoogleLogo.png" alt="logo" />

  <figcaption>
    <a href="http://google.com/logo.png">
    Google Logo</a>, daha fazla bilgi için web sayfasını ziyaret ediniz.
  </figcaption>
</figure>

<footer>
  <h3 id="yazar">Geleceği Yazanlar</h3>
</footer>

</p>
    </body>
</html>

Sınava Gir