HTML5'te Temel Yapısal Elemanlar

-

HTML5'te Temel Yapısal Elemanlar


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.

<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.

<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.

<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.

  • <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.

  • <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.

  • <nav> etiketi

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

  • <section> etiketi

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

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

<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>

Ekran Çıktısı;

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

İç İçe Döngüler

-
Resim
İç İçe Döngüler Bir döngü yapısının içine başka bir döngü yapısının yerleştirilmesiyle elde edilen yapıya iç içe döngü (nested loop) adı verilir. JavaScript dilinde, if deyimlerini herhangi bir derinliğe kadar iç içe kullanmak nasıl mümkünse, döngü deyimlerini de iç içe kullanmak mümkün olacaktır. İç içe döngülerde hatırlanacak anahtar bilgi, önce en içteki döngülerin tamamlanması gerektiğidir. Bu konuda aşağıdaki kural iç içe döngüler için daima geçerlidir: İç içe döngülerde en içteki döngü en önce tamamlanır. İç İçe Döngüler Aşağıdaki programda, dış döngü olan i parametreli döngü beş kez çalışacaktır (i=1,2,3,4,5). i'nin her değeri için ise içteki döngü üç kez çalışacaktır (j=1,2,3). Böylece aşağıdaki çıktı elde edilecektir: <html> <head> <TITLE>Nested</TITLE> </head> <body bgColor="pink" > <FONT FACE="Comic sans MS"> <SCRIPT LANGUAGE="javaSCRIPT"> var i,j; for(i=1;i<=...
Devamı

Olağan Dışı Durumların Değerlendirilmesi

-
Resim
Olağan Dışı Durumların Değerlendirilmesi En üst düzey geliştiricilerin bile zaman zaman hatalı kod yazabildiğini biliyoruz. Bir programın çalışması esnasında normalde karşılaşılmaması gereken bir durum oluşursa, sektörde buna  olağan dışı durum (exception)  ve bu durumda ne yapılacağının belirlenmesine de  olağan dışı durum yönetimi (exception handling)  denir. Bir bölme işleminde paydanın  0  olması,  beklenmeyen  ya da  olağan dışı  bir durumdur. Aynı şekilde bir dosyaya erişim yapmak isteyen bir komutun o dosyayı bulamaması da olağan dışı bir durumdur. C++ diline kadar, olağan dışı durumların tespiti ve yönetimi yazılımcıların özel olarak geliştirdikleri kod parçalarıyla yapılabiliyordu. C++ dilinden itibaren olağan dışı durum yönetimi, dilin içine eklenen özel komut, sınıf ve metotlarla yapılabiliyor. Java ile birlikte,  Microsoft Visual Studio.Net ’in üç teme...
Devamı

Kontrol ve Karar Verme İşlemleri

-
Resim
Kontrol ve Karar Verme İşlemleri Diğer bilgisayar programlama dillerinde olduğu gibi, JavaScript dilinde de, esas olarak iki farklı tipte kontrol yapısı ya da komutu mevcuttur: Seçme (selection) işlemini gerçekleştiren kontrol komutları: Bu tip kontrol komutlarında, bir ifade kontrol edilerek, ifadenin değerine göre çeşitli seçeneklerden bir tanesine dallanma işlemi gerçekleştirilir. if, if else, switch case gibi yapılar bu tür komutları oluşturur. Tekrarlama (loop, repetition): Bu tip kontrol yapılarında bir işlemler grubu, bir koşula bağlı olarak belirli sayıda (10 kez, 50 kez vb) tekrarlı olarak icra edilebilir. for, while, do while yapıları da buna örnektir. İlerleyen eğitim içeriklerinde, JavaScript dilindeki bütün kontrol yapıları tüm ayrıntıları ile verilmektedir. if Deyimi Birçok programlama dilinde olduğu gibi, JavaScript'te de, bir ifadeyi kontrol ederek ifadenin sonucuna göre ya da doğruluğuna göre belirli işlemleri yapmayı ya da yapmamayı sağlayan ...
Devamı