Çerçeve (Frame) Kullanarak Basit Web Sayfası Uygulaması

Web Tasarım ve Programlama -Çerçeve (Frame) Kullanarak Basit Web Sayfası Uygulaması

 

Bu uygulamayı yapabilmek için  4 tane html sayfası açmanız gerekir. Not defterini kullanarak  orta, üst, sol ve bunları birleştireceğimiz index sayfası oluşturunuz. Daha sonrada oluşturulan sayfaların içine aşağıda bulunan kodları  yazarak çerçeve oluşturabilirsiniz.

 

 

index.html:

aüz

 

<html>

<head>
<title>FORM</title>
</head>
<frameset rows=”30%,70%”>
<frame name=”üst” src=”üst.html” noresize>
<frameset cols=”30%,70%”>
<frame name=”sol”src=”sol.html”>
<frame name=”orta”src=”orta.html”>

</frameset ></frameset >
</html>

 

orta.html:

orta

<html>
<head>
<title> form </title>
</head>
<form action=”http://www.erkandos.com” method=”post” target=”_blank”>

Kullanıcı Adı: <input type=”text” name=”ad”><br>
Şifre : <input type=”password” name=”sfr”> <br>
Cinsiyetiniz : <input type=”radio” name=”cinsiyet” value=”erkek” checked=”on”> Erkek
<input type=”radio” name=”cinsiyet” value=”kız”> Kız <br>
Hobileriniz :<br>
<input type=”checkbox” name=”kutu1″ checked=”on”> Spor yapmak<br>
<input type=”checkbox” name=”kutu2″> kitap Okumak<br>
<input type=”checkbox” name=”kutu3″> Bilgisayar Oyunları <br>

Doğum Yeri : <select name=”dogumyeri”>
<option> Ankara</option>
<option> İstanbul</option>
<option> İzmir</option>
<option> Hatay</option>
<option> Mersin</option>
</select> <br>
İletmek İstediğiniz Mesaj:<br>
<textarea name=”iletisim” rows=”5″ cols=”60″> </textarea><br>
<input type=”submit” value=”Gönder”>

<input type=”reset” value=”Temizle”>
</form>
</html>

 

sol.html:

 

sol

<html>
<body>
<ol type =”a”>
<li> RESİM DÜZENLEME </li>
<ol type = “1”>
<li> Temel Kavramlar </li>
<ul type = “circle”>
<li> Pixel </li>
<li> Çözünürlük </li>
</ul>
<li> Görüntü Formatları </li>
<ul type =”circle”>
<li> Jpg </li>
<li> Gıf </li>
</ul>
</ol>
<li> ARAÇLAR PANELİ </li>
</body>
</html>

 

üst.html:

4

<html>
<head>
<title> üst </title>
<body>
<marquee> <H1>BAŞLIK</H1></MARQUEE>

</body>
</html>

Bir cevap yazın

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