Hüseyin Tepe

HTML BUTON YAPMA UYGULAMALARI

Web (HTML) sayfalarında gerektiğinde buton kullanabiliriz, resim işlemleri sayfası'nda anlattığım üzere butonlar resim dosyası olarak eklenebileceği gibi html kodları yazarak ta buton yapılabilir, bu sayfada html kodları ile buton uygulamalarını anlatacağım.

Buton kodları <buton> </buton> etiketleri arasına yazılır.
Aşağıda aynı görünümde ama farklı kullanım özelliklerde üç adet buton hazırladım..

Butonları begendinizse hadi uygulamaya geçelim. Haydi bir Notepad (metin belgesi) açın ve aşağıdaki kodu koplalayarak yapıştırın.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Buton kodu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<body lang=TR link=blue vlink=purple style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>
</div>
<input type="button" onclick="javascript:history.back()" value=" Geri Dön Butonu  ">
<p>
<button type="button">GENİŞLİĞİ METİN UZUNLUĞUNA GÖRE UZAYAN BUTON</button>
<p><br> 
<button onclick="window.location.href='http://www.turktelekom.com.tr/'">LİNK BAĞLANTISI YAPILAN BUTON</button>

<p>
<script language="Javascript">
var speed = 100
var message = ".....Buraya istediğin mesajı yaz okunsun....."
var s = 0
var l = message.length
document.write("<form name='btn'><input type='button' "
+"name='sc' value='"+ message +"'></form>")
function btnsc() {
document.btn.sc.value = message.substring(s,l) + message.substring(0,s)
s++

if (s >= l) {
s = 0
}

setTimeout("btnsc()",speed)
}

btnsc();
//-->
</script>

</body>
</html>

Kodu yapıştırdıtan sonra dosyayı buton.html isminde farklı kaydeterek bir html dosyası oluşturun sonra bu buton.html dosyasını açarak kontrol edelim.

Şimdi bir mesaj butonu yapalım. bu buton sayesinde ziyaretçilerinize açılır pencereden mesajlar verebilirsiniz aşağıda örnek butonuna tıklayarak nasıl çalıştığını görünüz.

SİZE BİR MESAJIMIZ VAR LÜTFEN TIKLAYINIZ Değerli ziyaretçilerim.

Bu sitede sizlere faydalı olacağını düşündüğüm bazı uygulamalar bulacaksınız. Emeğe Saygı İçin.
Ziyareyci sayfasına sadece bir teşekkür bırakmanız yeter.
KAPAT

Butonu beğendinizse bir Notepad (metin belgesi) açın ve aşağıdaki kodu koplalayarak yapıştırın.

<div id="pencerekodu"><label for="pencere" class="dugme">

SİZE BİR MESAJIMIZ VAR LÜTFEN TIKLAYINIZ 
</label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere">

Değerli ziyaretçilerim.
<p>Bu sitede sizlere faydalı olacağını düşündüğüm bazı uygulamalar bulacaksınız.
<br> sadece bir teşekkür yeter.

<label for="pencere" class="dugme" name="kapat"><b>KAPAT</b></label></label></div>

Kodu yapıştırdıtan sonra dosyayı mesaj.html isminde farklı kaydeterek bir html dosyası oluşturun sonra bu mesaj.html dosyasını açarak kontrol edelim.

Dilerseniz pencere boyutlarını ve rengini ihtiyaca göre (width:380px;height:180px;background:#eeeeee;) değerlerini değiştirerek,

Dilerseniz buton rengini (background:#FFFF00;) renk kodunu değiştirerek, ayarlayabilirsiniz.

Bilgi Teknolojileri Hakkında Çalışmalar

HTML Dersleri

CSS Dersleri

Network Dersleri

PC Teknikleri

Excel Kullanımı

İş veya Gezi Seyahatleim Anılar ve Oluşan Dostluklar

SAP Meterial (SAP Malzeme Modülü)

HTML BUTON YAPMA UYGULAMALARI