Html5 Css3 Çalışmam

Merhaba arkadaşlar bugün css derslerine başladım ve çalışmalarımın sonunda aşağıdaki temayı yaptım . Sizden isteğim eksiklerimi ve yanlışlarımı söylermisiniz..

http://ferdiunal.com/demo/

img kodlarında artık alt=" " niteliği de vermen gerekir.

<a class="a"href="">Hakkında</a></li>

href diğerlerindeki gibi bitişik olmamalı.


http://validator.w3.org/

adress kısmına siteni yaz sen de gör.

CSS için de : jigsaw.w3.org/css-validator/

alt özelliğini çözemedim tam olarak neden gerekli ?

Arama motorları resimlerin içinde ne yazdığını okuyamadıkları için alt metinler kullanılmalı. <img alt="Resim hakkında bilgi" src="" />

Ayrıca <marquee> yerine javascript kullanmanı öneririm.

Aşağıdaki farklılıkları da görebilirsin.

Senin Html kodun.

<nav class="aside-kategori">
<ul class="aside-kategoriul">
<hgroup><h1 class="asideh1">Kategoriler</h1></hgroup>
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -1</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -2</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -3</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -4</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -5</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -6</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -7</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -8</a></li>  
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -9</a></li> 
<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -10</a></li>
</ul>
</nav>

Benim Düzelttiğim 1:

<h1 class="asideh1">Kategoriler</h1>
<nav class="aside-kategori">	
	<ul class="aside-kategoriul">
		<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -1</a></li> 
		<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -2</a></li> 
		<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -3</a></li> 
	</ul>
</nav>

Benim Düzelttiğim 2:

<hgroup>
	<h1 class="asideh1">Kategoriler</h1>
	<h2 class="asideh1">Kategoriler</h2>
</hgroup>
<nav class="aside-kategori">	
	<ul class="aside-kategoriul">
		<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -1</a></li> 
		<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -2</a></li> 
		<li class="aside-kategorili"><a class="aside-kategoria" href="">Kategori -3</a></li> 
	</ul>
</nav>

Teşekkür ederim yardımların için

Rica ederim.

Bir hatanı da css dosyanda gördüm.

Yanlış kullanım
a:hover.aside-kategoria
Doğru kullanım
a.aside-kategoria:hover


Css de gerekmedikçe fazladan sınıf isimleri atamaya gerek yok direk elementlere özellikler eklemesi yapılabilir.

Senin css kodun:

nav.aside-kategori { background:#fff; height:350px;;}
nav ul.aside-kategoriul {list-style:none; height:30px; padding:0; margin:0;}
nav ul li.aside-kategorili{float:none; line-height:22px;}
nav ul li a.aside-kategoria{line-height:30px; padding:0 10px; display:block; color:#000; text-decoration:none}
nav ul li a:hover.aside-kategoria{background:#ccc; color:#FFF;}
hgroup .asideh1{ text-align:center;}

Benim düzelttiğim:

hgroup h1 { text-align:center;}
nav.aside-kategori { background:#fff; height:350px;;}
.aside-kategori ul {list-style:none; height:30px; padding:0; margin:0;}
.aside-kategori li {float:none; line-height:22px;}
.aside-kategori li a {line-height:30px; padding:0 10px; display:block; color:#000; text-decoration:none}
.aside-kategori li a:hover {background:#ccc; color:#FFF;}

Kullanımı:
<hgroup>
	<h1>Son Yazılar</h1> 
	<h3>Son Yazılar</h3> 
</hgroup>
<nav class="aside-kategori">
	<ul>
		<li><a href="">Son Yazıar -1</a></li>
		<li><a href="">Son Yazıar -2</a></li>
		<li><a href="">Son Yazıar -3</a></li>
	</ul>
</nav>

Articles tag aşagıda kaldı nasıl düzeltirim ?

Önce sağ tarafın kodlarını sonra sol tarafın kodlarını koymuşsun ve sağ tarafın bitimine <div class="clear"></div> demişsin. O kodu kaldır ve sol tarafı gösteren kodlarının bitimine koy.

Sağ kolondaki aside ve #main-page yi bir blok içine al... hiç olmadı profesyonel templateleri incele nasıl yazmışlar.

Gece de gösterdim sana, aşağıdaki gibi bir kullanım mantığı olamaz. Heading tagı içinde div kullanımı yanlış, tam tersi olabilir.

<hgroup>
	<h1>
		Başlık
		<div class="clear">
			<span>
				<img src="img/icon/Commen1t.png">
				<a id="yorum_say">50</a>
			</span>
		</div>
	</h1>
</hgroup>

<hgroup> tagı içinde birden fazla Heading tagı kullanacaksan kullanılmalı. Yoksa sadece bir tane H1 tagı için kullanılmamalı.

<hgroup> tagının doğru kullanımı.

<hgroup>
	<h1>Başlık</h1>
	<h2>Alt Başlık</h2>
</hgroup>