Web Tasarım ve Programlama Test Sınav Soru ve Cevapları

1. CSS’ de bağlantıların altındaki çizgi hangi kod ile kaldırılır? (5p)
a-) text-decoration : underline
b-) font-style: none
c-) padding: none
d-) font-style: italic
e-) text-decoration : none

2. Hangisi fare imlecinin üzerine gittiği elemanlara stil tanımlamamızı sağlar?(5p)
a-) :focus b-) :active c-) : visited d-) :hover e-) : link

3. Hangisi iki html elemanını yan yana yerleştirebilmek için kullanılacak bir stil niteliğidir? (5p)
a-) align b-) float c-) width d-) style e-) link

4. Aşağıdaki stil niteliklerden hangisi metin hizalama için kullanılır? (5p)
a-) style b-) align c-) color d-) type e-) center

5. Aşağıdaki niteliklerden hangisi transpan (saydam) bir görüntü oluşturmak için kullanılır? (5p)
a-) block b-) opacity c-) z-index d-) color e-) background

6. HTML sayfasına, img klasörü içindeki “resim.jpg” adlı resmi arka planda yatay olarak tekrarlayarak yerleştiren css kodu aşağıdakilerden hangisinde doğru verilmiştir ? (5p)
a)background-image: url(img/resim.jpg);
background-repeat: repeat-x, repeat-y;
b)background-image: url(img/resim.jpg);
background-repeat: repeat-x;

c)background-image: url(img/resim.jpg);
background-repeat: no -repeat;
d)background-image: url(resim.jpg);
background-repeat: repeat-x;

7. Web standartlarının web tasarımcılar için iki tane faydasını yazınız (10p)
a) Tarayıcılardan kaynaklanan sorunları en aza indirgenmesini sağlar.
b) Arama morları tarafından indekslenmesini kolaylaştır.

8. Arama motoru optimizasyonu için web siteleri tasarlanırken önem verilmesi gereken 5 maddeyi yazınız. (15p)
a) İçeriğin özgün olması
b) Web standarlarına uygun kodlanması
c) Navigasyonların açık ve anlaşılır olması
d) Site haritasının eklenmesi
e) Anahtar kelimelerin belirlenmesi

9. HTML sayfasındaki bir bağlantı için stil kodu aşağıda verilmiştir. Fare bağlantı üzerine geldiğinde yazını arkaplan rengi sarı(yellow) ve yazının boyutu 16px yapacak ve ayrıca yazının altındaki çizginin de kaldırılmasını sağlayacak olan CSS kodunu yazınız. (10p)

a :link{
color: blue; 
font-size:14px;
}
a :hover { (4p)
background-color: yellow;  (2p)
font-size:16px; (2p)
text-decoration:none; (2p)
}

10. Yeni nesil web tasarımında HTML ile CSS kodlarını iki farklı dosyada tutma nedenimizi bir cümle ile yazınız. (10p)
İçerik ile görüntüyü ayırmak

11. Aşağıdaki stil kodunu verilen tanımlamalara göre düzenleyiniz. (10p)
•cutu’nun genişliği 100px, yüksekliği 200px’dir.
•cutu’nun etrafında 10px’lik bir boş alan oluşur.
•cutu’nun arkaplan rengi sarı olarak belirlenir.
•cutu’nun içindeki yazılar kenarlardan 5px içerde olacak şekilde yerleşir.
•Kutu yukarında 20px, sağdan 5px olacak şekilde ekranda sabit konumlandırılmıştır.
•Kutu içindeki yazıların rengi mavidir.

div#cutu {
height:…200px……….;
width: …100px……..;
background-color : yellow;
margin:  …10px.  ;
padding:……5px…………;
position: ………….;
top: …20px……..;
right: …5px………;
color: blue        ;
}
h1 {
color: blue;
font-family: Arial;
font-weight: bold; 
text-decoration: underline;
background-color: pink;
padding:5px; }
<h1> Web Tasarımı </h1>

12. Yukarıdaki CSS ve HTML kodlarına göre aşağıdaki soruları cevaplayınız.(15p)
a-) Başlık yazısının rengini kırmızı yapabilmek için CSS’deki hangi satırı nasıl değiştirmeliyiz. (1p)
color: red;

b-)Başlık yazısının arka plan rengini sarı yapmak için için CSS’deki hangi satırı nasıl değiştirmeliyiz. 1p
background-color: yellow;

c-) Başlık yazısının etrafında 3px’ boşluk bırakmak için CSS’deki hangi satırı nasıl değiştirmeliyiz. (1p)
padding:3px;

d-) Bu başlık yazısını ortalamak için ortala adlı bir CSS sınıfı yazınız. (6p)
.ortala { text-align: center;}

e-) “ortala” sınıfını başlık yazısında uyguladığınızı gösteren HTML kodunu yazınız. (6p)
< h1 class="ortala"> Web Tasarımı

Pin It on Pinterest