Web Tasarım ve Programlama 1. Dönem 1. Yazılı #1

Sınav : Web Tasarım ve Programlama 1. Dönem 1. Yazılı

Alan : Bilişim Teknolojileri

Sıra : #1

Web Tasarım ve Programlama 1. Dönem 1. Yazılı

Web Tasarım ve Programlama 1. Dönem 1. Yazılı – Sınav Soruları

…………..   MESLEKİ VE TEKNİK ANADOLU LİSESİ

………………….. EĞİTİM-ÖĞRETİM YILI 1. DÖNEM

WEB TASARIM VE PROGRAMLAMA DERSİ ………. SINIFI

1. YAZILI SORULARI

Ad- Soyad: Numara:
Soru 1- Aşağıdaki listeleme görüntüsünü elde edecek html kodlarını yazınız. (10p)
 

 Web Tasarım ve Programlama 1. Dönem 1. Yazılı

Web Tasarım ve Programlama 1. Dönem 1. Yazılı

Soru 4- Aşağıdaki CSS özelliklerini birer örnek vererek açıklayınız. (15p)
1) background-repeat:

 

 

2) line-height:

 

 

3) text-align:

 

 

4) font-weight:

 

 

5) text-indent:

 

 

Soru 5- CSS kullanım alanlarından bağlantılı kullanımın hangi kod yardımıyla yapıldığını yazınız. (10p)
Soru 6- Web sitemize “resim.jpg” isimli resmi ekleyen kodu yazınız. (5p)
Soru 7- Modüller yazısına link veren ve linkin yeni sayfada açılmasını sağlayan kodu yazınız. (5p)
Soru 8-  Aşağıdaki etiketlerin ne işe yaradıklarını yazınız. (10p)
<b>

 

<i>

 

<br>

 

<p>

 

<hr>

Web Tasarım ve Programlama 1. Dönem 1. Yazılı- Cevap Anahtarı

Soru 1- Aşağıdaki listeleme görüntüsünü elde edecek html kodlarını yazınız. (10p)
 

 Web Tasarım ve Programlama 1. Dönem 1. Yazılı 

        <u> WEB TARAYICILARI </u>

      <ul>

   <li> Google Chrome </li>

    <li> Mozilla firefox </li>

     <li> İnternet Explorer </li>

      <li> Safari </li>

      <li> Opera </li>

      <li> Yandex </li>

                                                                                            </ul> 

Soru 2- Aşağıdaki tabloyu html kodlarıyla oluşturunuz.

 

CEVAP:

<table border=”2″ bordercolor=”#001A44″ bgcolor=”#97BEFC”>

            <tr>

                        <td colspan=”3″> <b> DERSLER TABLOSU </b> </td>

            </tr>

            <tr>

                        <td> 1 </td>

                        <td> Bilişim Teknolojilerinin Temelleri </td>

                        <td rowspan=”2″> 10. Sınıf </td>

            </tr>

            <tr>

                        <td> 2 </td>

                        <td> Programlama Temelleri </td>

            </tr>

<tr>

                        <td> 3 </td>

                        <td> Web Tasarım ve Programlama </td>

                        <td rowspan=”2″> 11. Sınıf </td>

            </tr>

            <tr>

                        <td> 4 </td>

                        <td> Veritabanı Organizasyonu </td>

            </tr>

            <tr>

                        <td> 5 </td>

                        <td> İnternet Programcılığı </td>

                        <td> 12. Sınıf </td>

            </tr>

</table>

Soru 3- Aşağıdaki formu html ile tasarlayınız.            25p.

<form name=”form1″ method=”post” action=”gonder.html” >

 

<p> Kullanıcı Bilgileri </p>

Adı <input type=”text”> <br >

Soyadı <input type=”text”> <br >

Cinsiyeti: ERKEK <input type=”radio” name=”cinsiyet” value=”1″>

 KADIN <input type=”radio” name=”cinsiyet” value=”2″> <br>

 

Doğum Yeri: <select name=”dogumyeri”>

<option> Bursa </option>

<option> İstanbul </option>

<option> Ankara </option>

<option> İzmir </option>

</select> <br>

 

Doğum Tarihi: <select name=”gun”>

<option>1</option>

<option>2</option>

<option>3</option>

</select>

 

<select name=”ay”>

<option>Ocak</option>

<option>Subat</option>

<option>Mart</option>

</select>

 

<select name=”yil”>

<option>1996</option>

<option>1997</option>

<option>1998</option>

</select> <br>

 

<input type=”submit” value=”Kaydet”>

<input type=”reset” value=”Temizle”>

</form>

Soru 4- Aşağıdaki CSS özelliklerini birer örnek vererek açıklayınız.  15p
1) background-repeat: Zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır.

Örnek:body { background-repeat:repeat; }

 

2) line-height: Satırlar arasındaki mesafeyi ayarlar.

Örnek: p {  line-height:”12px”;  }

 

3) text-align: Metnin yatayda nasıl hizalanacağını belirler.

Örnek: td { text-align=”center” }

 

4) font-weight: Fontun kalınlık incelik değerini belirlemeye yarar.

Örnek: p {   font-weight:”bold”   }  

 

 

5) text-indent: Paragraf başı yaparken cümlenin ne kadar içten başlayacağını ayarlamak için kullanılır.

Örnek: p {  text-indent:50px;   }

 

Soru 5- CSS kullanım alanlarından bağlantılı kullanımın hangi kod yardımıyla yapıldığını yazınız. (10p)
 

<link rel=”stylesheet” href=”stil.css” type=”text/css”>

 

Soru 6- Web sitemize “resim.jpg” isimli resmi ekleyen kodu yazınız. (5p)
 

<img src=”resim.jpg”>

 

Soru 7- Modüller yazısına link veren ve linkin yeni sayfada açılmasını sağlayan kodu yazınız. (5p)
 

<a href=”moduller.html” target=”_blank”> Modüller </a>

 

 

Soru 8-  Aşağıdaki etiketlerin ne işe yaradıklarını yazınız. (10p)
<b> Yazıyı Kalın yapmak için kullanılır.

 

<i> Yazıyı eğik yapmak için kullanılır.

 

<br> Bir alt satıra geçmek için kullanılır.

 

<p> Paragraf oluşturmak için kullanılır.

 

<hr> Sayfaya yatay çizgi çizmek için kullanılır.

 

 

Leave a Reply

%d blogcu bunu beğendi: