Ders11- HTML5 aside etiketi kullanımı


Bölümlendirme için yeni oluşturulan etiketlerden biri de aside etiketidir. Diğer bölümlendirme etiketi gibi kullanılan bu etiket genelde web sayfalarında menülerimizi yerleştirdiğimiz sidebar isimli div’e karşılık gelmektedir. Yan menü olarak isimlendirme de mümkündür.

Aside etiketi içerisinde başlık, paragraf, tablo gibi etiketler kullanılabilir. Bununla birlikte site içinde yer alacak resimler, reklamlar, menüler bu bölüm içerisinde yayınlanabilir.

Biz örneklerimizi önceki derslerimizin devamı şeklinde devam ediyoruz. Bir önceki dersimizde article konusunun üzerinden devam edelim. Bir önceki dersimize bakmak için tıklayınız

En alttaki div’in üzerinde section etiketinin altına bir aside etiketi açalım ve buna da bir id verelim. Ben örneğimde solmenu seklinde bir id vereceğim. Menümüz için oluşturacağımız liste için sırasız bir liste oluşturalım.

<aside id="solmenu">
<ul>
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
</ul>
</aside>

Şimdi bu bölüm için css yazmaya sıra geldi. Sayfamızın head kısmına gelelim ve css kodlarımızı yazalım.

aside#solmenu{
	float:right;
	background-color:#096;
	color:#903;
	width:250px;
	}

float değeri ile sayfamızın sağ tarafında görünmesini sağladık.
background-color ile arkaplan rengimizi belirledik.
color değeri ile yazımızın rengini de tamamladık.
Son olarak da bu width değeri ile solmenu kısmının genişliğini belirledik.

Şimdi aşağıda kodumuzun tamamına aşağıda bulabilirsiniz ve yaptığımız değişiklikleri kaydettikten sonra örnek olarak bir chrome tarayıcımızla görüntüleyelim.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
section#ust{background-color:#09C;}
section#sol{background-color:#909;
width:50%;
float:left;
}
section#sag{background-color:#C63;}
article#icerik{color:#090;}
article#icerik header{background-color:#993;}
aside#solmenu{
	float:right;
	background-color:#096;
	color:#903;
	width:250px;
	}
</style>
</head>
<body>
<div id="sayfa">
<section id="ust">
<h1>burası sayfamızın üst kısmıdır.</h1>
</section>

<section id="sol">
<article id="icerik">
<header>
<h1>burası sayfamızın article kısmıdır.</h1>
</header>
<p>burası sayfamızın sol tarafıdır.. sumeyraakbiyik.com ile HTML 5 öğreniyorum. Article ile section dan burayı ayırdır.  </p>
</article>
</section>
<section id="sag">
<p>burası sayfamızın sağ tarafıdır.. sumeyraakbiyik.com ile HTML 5 öğreniyorum.</p>
</section>

<aside id="solmenu">
<ul>
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
</ul>
</aside>


</div>
</body>
</html>

Çıktı

Görüldüğü gibi menü kısmını sağ tarafa dayalı şekilde yaptık. Benzer şekilde aside etiketini section içinde de kullanabilirsiniz.

Bir yorum ekleyin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir