Web Tasarım ve Programlama

20. Hafta Uygulaması (Spry Nesneleri)

Spry çerçevesi, ziyaretçilere görsel olarak daha gelişmiş, daha etkili web sayfaları hazırlayıp sunmak amacıyla kullanılan bir JavaScript kütüphanesidir. Spry kullanarak hazırlamakta olduğunuz belgelerinize basit Java Script kodlarıyla çeşitli türlerde efektler ekleyebilir ve sitenizin daha zengin bir görünüme sahip olmasını sağlayabilirsiniz.

20. Hafta Kaynak Dosyaları İndir

WTP 1.Dönem 1. Uygulama Sınavı

Açıklamalar :

index.html ve sinavStil.css adında iki dosya oluşturun.
index.html’ye sinavStil.css dosyasını Harci CSS olarak ekleyin.
CSS deki id seçicilerin özellikleri aşağıdaki tabloda verilmiştir. Ona uygun olarak düzenleyin.

#tasiyici	Genişlik 1000px; Sayfaya ortalanmış
#ustbolum	Yükseklik : 250px; Arkaplan Rengi : #A7C8F7;
#menu	Yükseklik : 20px ; İç Boşluk : Üst Alt :15px Sağ Sol: 50px; Arkaplan Rengi : #1F558D; İstediğiniz bir Font seçin; Yazı Rengi : Beyaz; Yazı ortalanacak.
#liste	Hücre içi boşluk : 20px; Arkaplan Rengi : #E1E1E1;
#altbolum	Yükseklik : 100px; Arkaplan Rengi : #3A3A3A; Renk : Beyaz; Font Seçin; İç boşluk: 30 px; Yazı ortalanacak.
h1	Yazı rengi : #0D5BBC; Yazı ortalacak; Üst Boşluk: 30px;

Üst Bölüm alanına aşağıdaki banner.jpg resmini ekleyin.
Menu bölümünü oluşturun. Ana Sayfa ya index.html bağlantısı verin.
Liste bölümünde sıralı ve sırasız listeleri iç içe oluşturun.
Formu tablo içinde oluşturun. Formu gönderme işlemini GET methodu ile yapın.
Alt bölüme aşağıdaki metni girin.

Alt Bölüm Yazısı : Tüm Hakları Saklıdır. Bu Site Tekirdağ Zübeyde Hanım Mesleki ve Teknik Anaolu Lisesi Bilişim Teknolojileri Alanı 11-A Sınıfı Öğrencisi ……… ………….. tarafından yapılmıştır. İzinsiz Kopyalanamaz.

7. Hafta – CSS ile Form Yapımı: Aşağıdaki resimde görünen formu HTML kodlarını ve CSS kullanarak oluşturun.

6. Hafta – Form Yapımı: Aşağıdaki resimde görünen formu HTML kodlarını kullanarak oluşturun.

Kaynak Kodları

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

&lt;body>
	&lt;form action="#" method="get" name="kullaniciFormu" target="_blank">
    &lt;table>
    	&lt;tr> 
        	&lt;td colspan="2">  &lt;h1> Kullanıcı Bilgileri &lt;/h1> &lt;/td>       
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Kullanıcı Adı :  &lt;/td>
            &lt;td>&lt;input type="text" name="adi" size="25" /> &lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Şifre &lt;/td>
            &lt;td>&lt;input type="password" name="sifre" size="25"/> &lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Şifre Tekrar :  &lt;/td>
            &lt;td>&lt;input type="password" name="sifreTekrar" size="25" /> &lt;/td>
        &lt;/tr>        
        &lt;tr > 
        	&lt;td style="padding:20px 0px;" colspan="2">&lt;h2>Kişisel Bilgiler &lt;/h2>&lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>e-mail :  &lt;/td>
            &lt;td>&lt;input type="text" name="email1" />@ 
            &lt;select> 
            	&lt;option> hotmail.com &lt;/option>
                &lt;option> gmail.com&lt;/option>
                &lt;option> outlook.com&lt;/option>
            &lt;/select>&lt;/td>
        &lt;/tr>        
         &lt;tr> 
        	&lt;td>e-mail Tekrar :  &lt;/td>
            &lt;td>&lt;input type="text" name="email2" />@ 
            &lt;select> 
            	&lt;option> hotmail.com &lt;/option>
                &lt;option> gmail.com&lt;/option>
                &lt;option> outlook.com&lt;/option>
            &lt;/select>&lt;/td>
        &lt;/tr>
        
        &lt;tr> 
        	&lt;td> Adı: &lt;/td>
            &lt;td>&lt;input type="text" name="adi" size="25" />&lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Soyadı: &lt;/td>
            &lt;td>&lt;input type="text" name="soyadi" size="25"/> &lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Doğum Tarihi : &lt;/td>
            &lt;td>
            &lt;select name="gun"> 
            	&lt;option>Gün &lt;/option>
                &lt;option>1 &lt;/option>
                &lt;option>2 &lt;/option>
                &lt;option>3 &lt;/option>
                &lt;option>4 &lt;/option>
                &lt;option>5 &lt;/option>
                &lt;option>6 &lt;/option>
                &lt;option>7 &lt;/option>
                &lt;option>8 &lt;/option>
                &lt;option>9 &lt;/option>
                &lt;option>10 &lt;/option>
                &lt;option>11 &lt;/option>
                &lt;option>12 &lt;/option>
                &lt;option>13 &lt;/option>
                &lt;option>14 &lt;/option>
                &lt;option>15 &lt;/option>
                &lt;option>16 &lt;/option>
                &lt;option>17 &lt;/option>
                &lt;option>18 &lt;/option>
                &lt;option>19 &lt;/option>
                &lt;option>20 &lt;/option>
                &lt;option>21 &lt;/option>
                &lt;option>22 &lt;/option>
                &lt;option>23 &lt;/option>
                &lt;option>24 &lt;/option>
                &lt;option>25 &lt;/option>
                &lt;option>26 &lt;/option>
                &lt;option>27 &lt;/option>
                &lt;option>28 &lt;/option>
                &lt;option>29 &lt;/option>
                &lt;option>30 &lt;/option>
                &lt;option>31 &lt;/option>                
            &lt;/select>
            	
            &lt;select name="ay"> 
            	&lt;option>Ay &lt;/option>
                &lt;option>Ocak &lt;/option>
                &lt;option>Şubat &lt;/option>
                &lt;option>Mart &lt;/option>
                &lt;option>Nisan &lt;/option>
                &lt;option>Mayıs &lt;/option>
                &lt;option>Haziran &lt;/option>
                &lt;option>Temmuz &lt;/option>
                &lt;option>Ağustos &lt;/option>
                &lt;option>Eylül&lt;/option>
                &lt;option>Ekim &lt;/option>
                &lt;option>Kasım&lt;/option>
                &lt;option>Aralık &lt;/option>                
            &lt;/select>
        	&lt;input type="text" name="yil" value="Doğum Yılı" />            
          &lt;/td>  
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Kişisel Ayarlar :  &lt;/td>
            &lt;td>&lt;select name="ayar"> 
            		&lt;option>Yaş ve Doğum Tarihini Göster &lt;/option>
                    &lt;option>Yaşı Göster Doğum Tarihini Gösterme &lt;/option>
                    &lt;option>Hiçbir Şey Gösterme &lt;/option>
            	&lt;/select> 
            &lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Cinsiyet :  &lt;/td>
            &lt;td>&lt;input type="radio" name="cinsiyet" value="1" /> Erkek | 
            	&lt;input type="radio" name="cinsiyet" value="2" /> Kadın
            &lt;/td>
        &lt;/tr>        
        &lt;tr> 
        	&lt;td>Profil Resmi : &lt;/td>
            &lt;td>&lt;input type="file" name="dosyaAdi"/>  &lt;/td>
        &lt;/tr>         
        &lt;tr> 
        	&lt;td colspan="2">&lt;input type="submit" value="Gönder" />  
            				&lt;input type="reset" value="Temizle" /> 
            &lt;/td>        
        &lt;/tr>
    &lt;/table>  
    &lt;/form>	
&lt;/body>
&lt;/html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>WTP 5. Hafta Ödev</title>

</head>

<body>

<table>

<tr>

<td colspan="2"> <h1> Kullanıcı Bilgileri </h1> </td>

</tr>

<tr>

<td>Kullanıcı Adı : </td>

</tr>

<tr>

<td>Şifre </td>

</tr>

<tr>

<td>Şifre Tekrar : </td>

</tr>

<tr >

<td style="padding:20px 0px;" colspan="2"><h2>Kişisel Bilgiler </h2></td>

</tr>

<tr>

<td><input type="text" name="email1" />@

<option> hotmail.com </option>

<option> gmail.com</option>

<option> outlook.com</option>

</select></td>

</tr>

<tr>

<td>e-mail Tekrar : </td>

<td><input type="text" name="email2" />@

<option> hotmail.com </option>

<option> gmail.com</option>

<option> outlook.com</option>

</select></td>

</tr>

<tr>

</tr>

<tr>

<td>Soyadı: </td>

</tr>

<tr>

<td>Doğum Tarihi : </td>

<td>

</select>

<option>Şubat </option>

<option>Nisan </option>

<option>Mayıs </option>

<option>Haziran </option>

<option>Temmuz </option>

<option>Ağustos </option>

<option>Eylül</option>

<option>Kasım</option>

<option>Aralık </option>

</select>

</td>

</tr>

<tr>

<td>Kişisel Ayarlar : </td>

<option>Yaş ve Doğum Tarihini Göster </option>

<option>Yaşı Göster Doğum Tarihini Gösterme </option>

<option>Hiçbir Şey Gösterme </option>

</select>

</td>

</tr>

<tr>

<td>Cinsiyet : </td>

<td><input type="radio" name="cinsiyet" value="1" /> Erkek |

<input type="radio" name="cinsiyet" value="2" /> Kadın

</td>

</tr>

<tr>

<td>Profil Resmi : </td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

5. Hafta – İlk Web Sitem Kodları:

&lt;html>
&lt;head>
	&lt;title>İlk Web Sitem&lt;/title>
	&lt;meta charset="utf-8">
	&lt;meta name="author" content="Serhat Demir"> 
	&lt;meta name="description" content="Web Tasarım ve Programlama Dersi ilk ödevi">
	&lt;meta name="keywords" content="Anahtar, kelimeleri, bu, kısma, yazıyoruz">
&lt;/head>
&lt;body>
	&lt;h1 align="center"> Adın Soyadın &lt;/h1>
	&lt;img src="ben.jpg" align="right" width="200" height="200"/>
	&lt;h3> Özelliklerim &lt;/h3>
	&lt;ol>
		&lt;li> Çalışkan &lt;/li>
		&lt;li> Kitap okumayı seven &lt;/li>
		&lt;li> Girişken &lt;/li>
		&lt;li> Sporcu &lt;/li>
		&lt;li> Kararlı &lt;/li>
	&lt;/ol>
	&lt;hr>
	&lt;h3> Hobilerim &lt;/h3>
	&lt;ul>
		&lt;li> Fotoğraf çekmek &lt;/li>
		&lt;li> Kitap okumak &lt;/li>
		&lt;li> Müzik dinlemek &lt;/li>
		&lt;li> Şiir yazmak &lt;/li>
		&lt;li> Günlük tutmak &lt;/li>
	&lt;/ul>
&lt;/body>
&lt;/html>

<html>

<head>

<title>İlk Web Sitem</title>

</head>

<body>

<h1 align="center"> Adın Soyadın </h1>

<h3> Özelliklerim </h3>

<ol>

<li> Çalışkan </li>

<li> Kitap okumayı seven </li>

<li> Girişken </li>

<li> Sporcu </li>

<li> Kararlı </li>

</ol>

<hr>

<h3> Hobilerim </h3>

<ul>

<li> Fotoğraf çekmek </li>

<li> Kitap okumak </li>

<li> Müzik dinlemek </li>

<li> Şiir yazmak </li>

<li> Günlük tutmak </li>

</ul>

</body>

</html>

Sayfa Önizlemesi için tıklayın