Notes

Lisebilisim.com MESLEKİ VE TEKNİK ANADOLU LİSESİ
2014-2015 EĞİTİM-ÖĞRETİM YILI 1. DÖNEM
WEB TASARIM VE PROGRAMLAMA DERSİ ……… SINIFI
1. YAZILI CEVAP ANAHTARI
Ad- Soyad: Numara:

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


CEVAP:
<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. (20p)

DERSLER TABLOSU
1 Bilişim Teknolojilerinin Temelleri 10. Sınıf
2 Programlama Temelleri
3 Web Tasarım ve Programlama 11. Sınıf
4 Veritabanı Organizasyonu
5 İnternet Programcılığı 12. Sınıf
Tablo Özellikleri:
- Tablonun görünümü resimdeki ile aynı olacaktır.
- Tablo kenarlık rengi koyu mavi (#001A44), zemin rengi açık mavi (#97BEFC) renkte olacaktır.
- Kenarlık boyut değeri 2 olacaktır.
- DERSLER TABLOSU başlığı kalın yazılmış olacaktır.




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)



CEVAP
<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.

Başarılar Dilerim
Lisebilisim.com
BAĞLANTI OLUŞTURMA
<a href=http://www.meb.gov.tr> milli eğitim bakanlığı </a>

<title></title> ne için kullanılır?
Etiketler arasına yazılan metin başlık kısmında gösterilir.

<b></b> etiketleri ne için kullanılmaktadır? İstenilen metni kalın (bold) olarak yazmak için kullanılır.
Bilişim Tekn. Öğretmeni