html dersleri 4 – menü yapımı

Merhaba arkadaşlar, uzun süredir yeni yazı yazmamıştım ama yorumlar gelince  yeniden yazmaya başlamayı düşünüyorum. daha önceki html konularında bazı fonksiyonları göstermiştim ilk 3 dersi inceleyerek bunları görebilirsiniz 4. dersimizde ise örnek olarak html menü‘nün nasıl yapılacağını göstereceğim.

Yalnızca html kullanacağım için biraz basit olacak ancak bu yazı html dersi olduğu için html imkanlarını kullanacağız.

Notlar;
width   = Genişlik

height  = Yükseklik

background = Arka plan

<table>  = Tablo oluştur

<tr>         = Tabloda satır oluştur

<td>        = Tabloda sütun oluştur

<input>  = nesne oluştur


<html>
<head>
<title>Html Dersleri 4</title>
</head>
<body>

<table align="center" width="800" height="40" background="menu.png">
<tr>

<td>
Ana sayfa
</td>

<td>
Menu 2
</td>

<td>
Menu 3
</td>

<td>
İletişim
</td>

<td align="right">
<input type="text"> <input type="submit" value="Ara">
</td>

</tr>
</table>

</body>
</html>

Gördüğünüz üzere bir tablo oluşturup arkaplanına mavi tonlu bir png resmi atıp içerisinde sütunlar oluşturarak menu elemanlarını oluşturduk ve en son da ise bir arama nesnesi ile buton nesnesi oluşturup bu sütunu sağ tarafa kaydırdık böylelikle html menü örneğimizi tamamlamış olduk. bu menulere link vererek o menüye tıklandığında hangi sayfaya gitmesini istiyorsak oraya yönlendirme işlemini de yapabiliriz link örneğini önceki yazımda zaten göstermiştim.

Kodların Browserde Nasıl Görüntüğüne Bakmak İçin Tıklayın
İlgi gördüğü sürece yazılara devam etmeyi düşünüyorum takıldığınız yerleri yorum bölümünden sorabilirsiniz.

21 Şubat 2015
bosluk

html ile web site yapımı 3

Html Site Kodları ile web site yapımı konumuza devam ediyoruz

Bir önceki yazımıza html site yapımı 2  isimli konuya bakabilirsiniz.

Bu konumuzda direk kodları vericem fazla açıklama yapmadan sizlerde kullanabilirsiniz biraz kurcalayarak tabi önceki yazılarımı okumayı unutmayın.

<p></p>   = Paragraf tagı ( istediğiniz tagları bir arada tutmaya yarar )

<lu></lu> = Maddeleştirme

<li></li>  = listeleme

<a></a>   = Link Vermeye Yarar

<center>   = Hizalamayı Ortalar

align=”left”     = Hizalamayı Sol yapar

align=”right”  = Hizalamayı sağ yapar

<img/>  = Resim eklemenize yarar

<br/>     = Alt Satıra Geçirir

<hr>       = Yatay çizgi çekmek

<html>
<head>
<title>Html Dersleri 3</title>
</head>
<body>

<center><b>Html Site Yapımı 3 | Kodların Browser'den Görünümü</b></center>
<p align="left">
Evet Arkadaşlar Html Site Yapımı 3 konumuzun örnek kodlarının browserde
(site üzerinde) görünümünü buradan görüyoruz.<br/> Konuda Verdiğim kodları
bu dosyada kullanıyorum.Html öğrenmek istiyorsanız yapacaklarınız
<ul>
<li>1.) Sabırlı ve azimli olmalısınız.</li>
<li>2.) Kendi kendinize örnekler yaparak pratikte geliştirin</li>
<li>3.) Derslerimi Takip Edin icon smile html ile web site yapımı 3  </li>
</ul>
<hr/>
Dersleri takip etmek için
<a href="http://www.esatalyamac.com.tr/html-ile-web-site-yapimi-3/">Html Dersleri</a>
yazan yere tıklayın. Gördüğünüz gibi link verme işinide hallettik.
Şimdi resim ekleyelim.<br/> <img src="resimadi.jpg"/> Resimde Tamamdır Şimdide
Sağ Alta İmza Atarak Bitiriyorum. Birkaç satır aşşağı indirelim
</p>
<br/><br/><br/><p align="right"><b>Esat Alyamaç</b></p>

</body>
</html>

Kodların Browserde Nasıl Görüntüğüne Bakmak İçin Tıklayın

28 Ekim 2013
bosluk
jquery kodları Son Yazılar