Kategori arşivi: Html

Html

HTML5 – Nav Menu Yapımı

Yorum yapın

html5 nav bar nav menuHtml5  ile birlikte nav tagı desteği gelmiştir. Aşağıda nav menu yapımını örneklemeye çalıştım, kodu kendinize göre değiştirip kullanabilirsiniz


<!doctype html>

<style>
nav {
background-color:#ababab;
height:40px;
margin-left:auto;
margin-right: auto;
width: 800px;
}
nav ul {
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 3px 15px;
background: #999999;
color: white;
margin-left: 1px;
white-space: nowrap;
height:30px;
width:90px;
text-align:center;
}
nav ul li a:hover {
background: #667788;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
}
nav li:hover a {
background: #3A464F;
height:30px;
}
nav li:hover li a:hover {
background: #93A1B3;
}
nav ul li ul li a {
text-align:left;
}
</style>

<nav>
<ul>
<li><a href="#">Ana Link 1</a></li>
<li><a href="#">Ana Link 2</a>
<ul>
<li><a href="#">Alt link</a></li>
<li><a href="#">Alt link</a></li>
</ul>
</li>
<li><a href="#">Ana Link 2</a>
<ul>
<li><a href="#">Alt link</a></li>
</ul>
</li>
</ul>
</nav>
Html

Html ile başlık oluşturma

Yorum yapın

html başlıkHtml ile başlık boyutları nelerdir?

Html ile 6 çeşit başlık oluşturulabilir. Kullanımı şöyle:

<h1>Birinci başlık</h1>
<h2>İkinci başlık</h2>
<h3>Üçüncü başlık</h3>
<h4>Dördüncü başlık</h4>
<h5>Beşinci başlık</h5>
<h6>Altıncı başlık</h6>

Burada 6 en büyük rakam o yüzden en büyük başlık 6 dır diye düşünmemek lazım. Html’de  bu durum farklı. h1 en büyük, h6 en küçük boyuttaki başlıktır. Bunlar css ile değiştirilebilir tabiki büyüklük, renk, yazı tipi gibi, fakat en büyük başlık için her zaman h1 ve tabiki diğerlerini de sırasıyla kullanmak yararlı olacaktır. Çünkü web sitenize her zaman tarayıcısında css desteği olan biri girmeyebilir, css aktif değilse bu tarz küçük şeyler önemli olacaktır sitenin doğru biçimde gösterilebilmesi için.

Html

Html ile tablo oluşturmak

Yorum yapın

Aslında html’e yeni başlamış arkadaşlar tarafından anlaşılması zor gibi görünen fakat, aslında çok basit bir yapısı olan, özellikle iletişim formları, giriş formları gibi yerlerde sıkça kullanılan bir özellik tablolar. Kısaca kullanım şeklini örnekle göstereyim.

<table>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Borderları yani tablo kenarlarını css ile belirtmek kullanım açısından daha doğru olacaktır fakat istersek bunu html’den de yapabiliriz. şu şekilde:

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>

Burada tablo içerisinde border=”1″ parametresi bulunuyor, eğer border=”0″ yazsaydık kenarlıklar gözükmeyecekti. Hiç border parametresi girmezsek de tarayıcınızın standartları neyse ona göre kendisini ayarlayacaktır.

Bir de tablo başlıkları var onlar da <th> ile belirleniyor. Kullanımına örnek göstereyim:

<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>

Burada <th> </th> tagları içerisine yazdığınız kısımlar başlık şeklinde gözükecektir. Her tarayıcının standart başlık stillemesi farklı olabilir fakat bunların hepsi css ile yeniden düzenlenebilir, siz bir özellik belirtmediğinizde tarayıcı kendi css standartlarını kullanacaktır,  bu yüzden tablo ve diğer html elementlerini oluştururken css ile bunları stillemek her tarayıcıda aynı gözükmesini sağlamak açısından yararlı olacaktır.

Tablo kullanımı kısaca bu şekilde, kodları incelerseniz mantığını kavramanız pek uzun sürmeyecektir.