Yeni HTML 5 Etiketleri İle Çalışma

M. Kasım Sular
September 29, 2020
1247 Görüntülenme
0 Yorum

HTML 5 ile var olan html dilin üzerine yeni etiketler ve söz dizimi kuralları eklenmiştir. Yani HTML 5 başlı başına yeni geliştirilen bir dil değildir. Bu nedenle içerisine yazdığımız etiketlerin birçoğu html 3-4 ‘te desteklenmektedir.

Neden HTML 5 sorusunun cevaplarından birisi de HTML5 ile birlikte gelen yeni anlamsal parametreler ve elemanlardır.

Web sitelerini kodlarken belli yapısal kısımlara ayırırız. Üst kısım, içerik kısmı, sol-sağ kolonlar, menü alanı, alt kısım ve içerik alanı. HTML5 geliştiricileri de bunları düşünmüşler ve bu alanların her biri için bir etiket tanımlamışlar.

Biz bir önceki dersimizde layout oluştururken bu alanlar için <div> etiketini kullandık, yeni etiketlerle bu tekil <div> etiketi yerine her kısım için bir element kullanma imkânımız olacak. Bu web sayfalarını kodlarken bize birçok avantaj sağlayacaktır. CSS kodlaması açısından da Bu elementlere biraz göz atalım.

section : Kitabın bir bölümü, bölümün bir kısmı veya gerçekte HTML sayfamızın herhangi bir kısmını tanımlamak için kullanabiliriz.

header : Web sayfamızın üst kısım olarak belirlediğimiz kısımı tanımlamak için kullanabiliriz. <head> ile karıştırmayalım.

footer : Web sitemizde alt kısım olarak belirlediğimiz kısımı tanımlamak için kullanabiliriz.

nav : Diğer sayfalara link verilen kısımlar, menü oluşturduğumuz kısımları tanımlamak için kullanabiliriz.

article : Günlüğümüzdeki(blog) bir konu, ansiklopedideki bir bölümü tanımlamak için kullanabiliriz.

Anlamlı Blok Etiketleri

Yapısal elementlerden daha çok ayrıntıya inen elementlerde bulunmaktadır. Kısaca bu yeni elementleri incelersek:

aside : İçerik ile ilişkili ayrıntılar, notlar vb alanlar için içeriğin yanına iliştirilmiş alanları tanımlamak için kullanabiliriz.

figüre : Genelde kullandığımız şekil ve açıklaması için eklenmiş güzel element. Hem şekil hem de açıklamasını içeren bir element

dialog : Bu element isminden de anlaşıldığı gibi diyalog, karışıklık sohbet içeren sayfaları daha kolay kodlamamız için eklenmiştir. Bu element <dd> ve <dt> elementlerini alt element olarak kullanır.

Gelin bir önceki <div> ile yapmış olduğumuz projeyi HTML 5 etiketlerine dönüştürelim. <div> çorbasından kurtulalım. DivLayout klasörümüzü Html5Layout adıyla çoğaltalım.

style.css

* {padding:0px; margin:0px;}
header{width:90%; margin:10px auto; clear: both;}
header .logo{width:30%;float: left;}
header .logo img{width:80%;}
header .ads{float: left; width:70%;}
header .ads img{width:80%; float:right}
nav{float:left; width:100%; color:#fff}
nav ul{list-style-type: none; padding:20px 0px; width:100%; background-color: #000; text-align: center; margin: auto;}
nav ul li{display: inline; padding: 20px 40px;  }
nav ul li:hover{background-color: #f00;}
nav ul li.active{background-color: #f00;}
nav ul li a{text-decoration: none; text-transform: uppercase; color: #fff; font-size: large;}
main{width:90%; margin:10px auto;}
main section{float:left; width:65%; min-height:400px; }
main section article {float:left; width:100%; margin:10px; min-height:120px; }
.odd{background-color: #f5f5f5; }
.even{background-color: #fafafa; }
main aside{float:right; width:30%; margin:10px; min-height:400px; background-color: #eee; }
footer{float:left; width:100%; background-color: #000;color:#fff; text-align:center; padding:20px 0px}

index.html

<header>

                <div class="logo">

                    <img src="images/logo.png">

                </div>

                <div class="ads">

                    <img src="images/ads.jpg">

                </div>

</header>

<nav>

                <ul>

                    <li class="active">

                        <a href="index.html">Ana Sayfa</a>

                    </li>

                    <li>

                        <a href="kurumsal.html">Kurumsal</a>

                    </li>

                    <li>

                        <a href="urunler.html">Ürünler</a>

                    </li>

                    <li>

                        <a href="haberler.html">Haberler</a>

                    </li>

                    <li>

                        <a href="index.html">İletişim</a>

                    </li>

                </ul>

</nav>

<main>

                <section>

                    <article class="odd"></article>

                    <article class="even"></article>

                    <article class="odd"></article>

                </section>

                <aside></aside>

</main>

 <footer>

<p>2020 &copy; codeks.org | Tüm hakları saklıdır.</p>

</footer>