HTML İle Basit Bir Buton Yapma #2


Buton Yapımı

Html sitesinde buton önemli yer taşır, mesela bir butona tıklayarak başka bir sayfaya gidebilirsiniz veya bir butona değer atayarak butona istediğinizi tanımlayabilirsiniz peki bir buton nasıl yapılır;

Button Etiketi ile Html Buton Oluşturma

İnput Etiketi ile Html Buton Oluşturma

buton-görseli

Gördüğünüz gibi butonların görünümünde hiçbir farklılık bulunmuyor.

Button etiketinin type parametresine 3 farklı değer verebiliyoruz. Bunlar;

  • button : Standart buton eklemek için kullanılır.
  • submit : Doldurulan form bilgilerinin sunucuya gönderilmesi için gerekli butonu eklerken kullanılır.
  • reset : Doldurulan form bilgilerinin temizlenmesi için gerekli butonu eklerken kullanılır.

Yapmış oldukları işlev farklı olsa da üçünün de görünümleri aynıdır. Yine bu butonları input etiketini kullanarakta oluşturabiliriz. Button normal bir tıklama özelliği bulundururuken, submit gönderme işlevinde, reset o formda bulunan yazıların hepsini silme işlevinde bulunur ama bunları daha sonra görücez tabiki;

Html buton ekleme kodları

HTML LİNK (BAĞLANTILI) BUTON EKLEME

Bir butona tıklandığında belirlemiş olduğumuz bir hedef adrese gitmesini istiyorsak yani bir link buton oluşturmak istiyorsak 2 farklı yöntem ile yapabiliriz.

1   Birinci yöntem olarak, button veya input etiketi ile butonlarımızı oluştururuz. Daha sonra bu butonlara tıklandığında yani click olayında Javascript kodu yazarak istediğimiz hedef adrese yönlendirebiliriz.

2   İkinci yöntem olarak, button veya input etiketi kullanmak yerine ‘a’ etiketi kullanarak bir link oluştururuz. Daha sonra bu linke CSS kodları yazarak buton görünümü veririz. Son olarak linke tıklandığında gidilecek hedef adresi de ‘a’ etiketinin href parametresinde tanımlarız.

İki yöntem ile de örnek yapalım.

Örneğin oluşturduğumuz butonlara tıklandığında ‘GOOGLE’ sayfasına yönlendirmek istediğimizi varsayalım.

Html link buton ekleme kodları

Gördüğünüz gibi oldukça basittir dediklerimi uygularsanız kendi sayfanızda aynen bu şekilde görüceksiniz.Resimde gördüğünüz gibi mouse ile link butonun üzerine geldiğinizde sol alt köşede belittiğimiz hedef adres görünecektir. Tıkladığımızda da o hedef adreste belirttiğimiz sayfa açılacaktır.
Gördüğünüz gibi buton yapımız oldukça kolay ve basittir bir sonraki dersimizde sizlere butonu CSS ile zenginleştircez. Bir sonraki dersimizde görüşmek üzere 🙂
[Toplam:0    Ortalama:0/5]

Sizin Tepkiniz Nedir?

süper süper
0
süper
bilgilendirici bilgilendirici
0
bilgilendirici
beğenmedim beğenmedim
0
beğenmedim
beğendim beğendim
0
beğendim
Düşündürücü Düşündürücü
0
Düşündürücü
Anıl Mısırlıoğlu
Yazılım Mühendisi

0 Yorum

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

Bir format seçin
Kişisel Test
Kişiliğe dair bir şey ortaya çıkarmayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar vermek veya görüş belirlemek için oylama yapmak
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın
Fotoyla Anlatım
Kendi resimlerinizi yükleyin ve birşeyler anlatın
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud veya Mixcloud İçerikleri
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı