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.

Bir önceki yazımız olan html ile web site yapımı 3 başlıklı makalemizde html dersleri, html kod ve html öğrenmek hakkında bilgiler verilmektedir.

html dersleri 4 – menü yapımı ile Benzer Yazılar:

21 Şubat 2015 Saat : 4:20

“html dersleri 4 – menü yapımı” için 5 Yorum

  1. Sevda diyor ki:

    Öncelikle anlatımın çok güzel teşekkür ederim. Ama benim asıl merak ettiğim nokta yazdığın kodları aynı şekilde yazıp kaydedip açtığımda tek farklı olan resmin yüklenmemiş olması. Yani resmi nereye atacağız bununla ilgili bilgi verirsen çok memnun olurum.
    Teşekkürler,
    İyi çalışmalar..

    • admin diyor ki:

      Rica ederim. Diğer derslerde bahsetmiştim; kod dosyasının bulunduğu konuma atılması gerekiyor diğer şeyler. örneğin index.html masaüstünde ise resim ve diğer şeyler de masaüstünde olmalı direk erişim için.

  2. anadolu bilişim diyor ki:

    teşekürler.

  3. eren diyor ki:

    Paşa 2 yıl okudum 2 yıl pc prog. hocaların anlatamadı seyı ıkı uc derste anlattın. Sağolasın kardeşim benim. =)

html dersleri 4 – menü yapımı Yazısı için Yorum Yapabilirsiniz

jquery kodları Son Yazılar