Web Tabanlı Kodlama

Soru 1

Orta Zorluk

Oluşturulan html tablosunun başlık alanının arka plan rengi siyah ve yazı rengi beyaz olması isteniyor bunun için aşağıdaki style koalarından hangisi html saysasına eklenmelidir?

A) table th {border-color: black;color:white;}

B) table tr {background-color: black;color:white;}

C) table tr {background-color: white;color:black;}

D) table th {background-color: black;color:white;}

E) table th {background-color: white;color:black;}

Soru 2

Orta Zorluk

Resme çerçeve eklemek istendiğinde kullanılması gereken parametresi aşağıdakilerden hangisidir?

A) border

B) align

C) left

D) src

E) height

Soru 3

Orta Zorluk

Resim üzerinde işaretlenecek alan veya alanların şekillerinin belirlenmesi için kullanılan parametre aşağıdakilerden hangisidir?

A) map

B) shape

C) border

D) assign

E) loop

Soru 4

Orta Zorluk

Aşağıdakilerden hangisi doğru bir IP adresi biçimidir?

A) 19.2.168.1

B) 192.168.1

C) 168.1

D) 19.2.168.1.0

E) 0.192.168.1.0

Soru 5

Orta Zorluk

Hex kodu #000000 olarak verilen renk aşağıdakilerden hangisidir?

A) Siyah

B) Kırmızı

C) Beyaz

D) Mavi

E) Sarı

Soru 6

Orta Zorluk

Aşağıdaki özelliklerden hangisi hücre içerisindeki verilerin yerleşimini sağlar?

A) base

B) meter

C) column-rule

D) grid-row

E) padding

Soru 7

Orta Zorluk

Tablolara farklı kimlik numarası atayarak farklı özellikler eklenmeyi mümkün kılan özellik nasıl kullanılır?

A) Table code:

B) table no:

C) table name

D) table id=

E) table tag=

Soru 8

Orta Zorluk

Aşağıdakilerden hangisi, web tarayıcıları aracılığıyla görüntülenen hipermetin dosyalarıdır?

A) Web sayfası

B) Internet

C) DNS

D) E-posta

E) Sunucu

Soru 9

Orta Zorluk

Tabloya başlık tanımlanması sağlayan özellik hangisidir?

A) charset

B) transition

C) caption

D) quotes

E) label

Soru 10

Orta Zorluk

HTML'de bir metnin altının çizili olması işlevi aşağıdaki özelliklerden hangisi ile sağlanır?

A) text-align

B) text-transform

C) text-indent

D) text-decoration

E) font-family

Soru 11

Orta Zorluk

Tablo kenarlığı ile hücre arasındaki boşluk 10 pixel olarak tanımlamak için hangi style özelliği kullanılmalıdır?

A) height:30px;

B) text-align:left;

C) padding-left:5px;

D) border: 1px solid black;

E) border-spacing:10px;

Soru 12

Orta Zorluk

Web sayfasına ait metaverilerin tanımlandığı bölüm aşağıdakilerden hangisidir?

A)

B)

C)

D)

E)

Soru 13

Orta Zorluk

Aşağıdakilerden hangisi stil kullanımı yöntemlerinden bir değildir?

A) Etiket içerisinde stil dosyası kullanımı

B) Gömülü stil dosyası kullanımı

C) Dışarıdan stil dosyası kullanımı

D) etiketleri arasında stil dosyası kullanımı</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221663" data-option="e"> <input type="radio" name="soru_2221663" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221663" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">Hiçbiri</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221663"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221663-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221663"> <span class="font-medium">Doğru Cevap:</span> D) <title> etiketleri arasında stil dosyası kullanımı </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221663"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: Htmlde stil kullanımı etiket içerisinde, gömülü ve dışarıdan stil dosyası kullanımı olarak üç farklı şekilde gerçekleştirilebilir.</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 14</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">Satır Sütun Hücre Veri Yukarıdakilerden hangileri bir tablonun temel bileşenlerindendir?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221664" data-option="a"> <input type="radio" name="soru_2221664" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221664" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">I ve II</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221664" data-option="b"> <input type="radio" name="soru_2221664" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221664" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">III ve IV</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221664" data-option="c"> <input type="radio" name="soru_2221664" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221664" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">I II ve III</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221664" data-option="d"> <input type="radio" name="soru_2221664" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221664" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">I II ve IV</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221664" data-option="e"> <input type="radio" name="soru_2221664" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221664" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">I II III ve IV</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221664"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221664-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221664"> <span class="font-medium">Doğru Cevap:</span> E) I II III ve IV </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221664"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: her tabloda dört temel bileşen bulunmaktadır. Bunlar: Satır, sütun, hücre ve veridir.</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 15</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">Aşağıdakilerden hangisi günümüzde sık kullanılan internet tarayıcıları arasında yer almaz ?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221665" data-option="a"> <input type="radio" name="soru_2221665" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221665" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">Safari</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221665" data-option="b"> <input type="radio" name="soru_2221665" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221665" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Internet Explorer</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221665" data-option="c"> <input type="radio" name="soru_2221665" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221665" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">Firefox</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221665" data-option="d"> <input type="radio" name="soru_2221665" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221665" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">Chrome</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221665" data-option="e"> <input type="radio" name="soru_2221665" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221665" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">Netscape Navigator</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221665"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221665-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221665"> <span class="font-medium">Doğru Cevap:</span> E) Netscape Navigator </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221665"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: Netscape Navigator 15 yıl öncesinde sıklıkla kullanılan ancak günümüzde sık kullanılan tarayıcılar listesinde yer almayan bir tarayıcıdır.</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 16</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">Aşağıdakilerden hangisinde table tag'i, HTML diline uygun biçimde yazılmıştır?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221666" data-option="a"> <input type="radio" name="soru_2221666" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221666" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">[table]</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221666" data-option="b"> <input type="radio" name="soru_2221666" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221666" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">(table)</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221666" data-option="c"> <input type="radio" name="soru_2221666" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221666" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">{table}</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221666" data-option="d"> <input type="radio" name="soru_2221666" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221666" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">/table\</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221666" data-option="e"> <input type="radio" name="soru_2221666" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221666" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700"><table></span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221666"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221666-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221666"> <span class="font-medium">Doğru Cevap:</span> E) <table> </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221666"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: HTML dili içerisinde her tag, küçüktür ve büyüktür işaretleri arasına yazılmaktadır. Örneğin; <html>, <body>, <table> gibi. Doğru cevap E şıkkıdır.</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 17</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">I -Web sunucuları; web içerisinde bulunan bir web sayfasına ait tüm verileri içerisinde barındırmaktadır. II -Web sunucuları güçlü donanımsal özelliklere sahiptir. III - Web sunucuları kesintisiz olarak web ağına bağlı bulunan bilgisayarlardır. Web sunucularına ilişkin olarak verilen bilgiler aşağıdaki seçeneklerden hangisinde doğru ve eksiksiz olarak yer almaktadır?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221667" data-option="a"> <input type="radio" name="soru_2221667" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221667" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">Yalnız I</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221667" data-option="b"> <input type="radio" name="soru_2221667" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221667" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Yalnız III</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221667" data-option="c"> <input type="radio" name="soru_2221667" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221667" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">I ve II</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221667" data-option="d"> <input type="radio" name="soru_2221667" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221667" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">II ve III</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221667" data-option="e"> <input type="radio" name="soru_2221667" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221667" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">I, II ve III</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221667"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221667-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221667"> <span class="font-medium">Doğru Cevap:</span> E) I, II ve III </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221667"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: Verilen bilgilerin tamamı doğrudur.</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 18</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">Aşağıdakilerden hangisi bir tablo özelliği eklemek istediğimizde kullanılan etikete örnek verilebilir?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221668" data-option="a"> <input type="radio" name="soru_2221668" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221668" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">table#t08</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221668" data-option="b"> <input type="radio" name="soru_2221668" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221668" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">attribute</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221668" data-option="c"> <input type="radio" name="soru_2221668" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221668" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">collapse</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221668" data-option="d"> <input type="radio" name="soru_2221668" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221668" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">border</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221668" data-option="e"> <input type="radio" name="soru_2221668" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221668" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">dashed</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221668"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221668-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221668"> <span class="font-medium">Doğru Cevap:</span> A) table#t08 </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221668"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: table#t08 { // ilgili satırda tabloya istenildiğinde kullanılmak üzere t08 özelliği tanımlanır</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 19</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">Animasyonun oynatılması için gerekli olan player programı tarayıcı tarafından kurulu değilse, kullanıcıyı uyararak kurması için gerekli olan siteye yönlendiren parametre hangisidir?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221669" data-option="a"> <input type="radio" name="soru_2221669" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221669" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">Pluginspage</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221669" data-option="b"> <input type="radio" name="soru_2221669" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221669" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Align</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221669" data-option="c"> <input type="radio" name="soru_2221669" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221669" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">Qality</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221669" data-option="d"> <input type="radio" name="soru_2221669" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221669" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">Embed</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221669" data-option="e"> <input type="radio" name="soru_2221669" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221669" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">İframe</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221669"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221669-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221669"> <span class="font-medium">Doğru Cevap:</span> A) Pluginspage </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221669"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: Align parametresi left ve right değerlerini alıp, sadece sola ve sağa hizalamak için kullanılır. Quality parametresi animasyon gösterim kalitesi için kullanılır ve high, medium ve low olmak üzere üç değer alır. Embed flash animasyonların eklenmesini sağlayan html etiketidir. İframe youtube, Google gibi internet sitelerinin ilgili paylaşım ile ilgili oluşturdukları bir etikettir. Doğru cevap A'dır.</p> </div> </div> </div> </div> <div class="bg-white p-4 md:p-6 rounded-lg shadow-sm"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Soru 20</h3> <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">Orta Zorluk</span> </div> <div class="prose max-w-none mb-6"> <p class="text-gray-700">Resimlerin görüntülenmesi için kullanılan <img> etiketinde resmin genişliğini hangi parametre ifade eder?</p> </div> <div class="space-y-3"> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221670" data-option="a"> <input type="radio" name="soru_2221670" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221670" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">width</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221670" data-option="b"> <input type="radio" name="soru_2221670" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221670" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">align</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221670" data-option="c"> <input type="radio" name="soru_2221670" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221670" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">span</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221670" data-option="d"> <input type="radio" name="soru_2221670" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221670" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">src</span> </div> </label> <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition option-label" data-soru-id="2221670" data-option="e"> <input type="radio" name="soru_2221670" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221670" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">height</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221670"> <div class="flex items-center"> <i class="fas fa-check-circle text-green-500 mr-2"></i> <span class="font-medium text-green-700">Doğru Cevap!</span> </div> </div> <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg hidden" id="feedback-2221670-wrong"> <div class="flex items-center"> <i class="fas fa-times-circle text-red-500 mr-2"></i> <span class="font-medium text-red-700">Yanlış Cevap!</span> </div> <div class="mt-2 text-sm text-blue-700" id="correct-answer-2221670"> <span class="font-medium">Doğru Cevap:</span> A) width </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221670"> <div class="flex items-start"> <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i> <div> <span class="font-medium text-blue-700">Açıklama:</span> <p class="text-blue-600 mt-1">Yanıt Açıklaması: Resimlerin görüntülenmesinde <img> etiketinde resmin genişliği için width kullanılır.</p> </div> </div> </div> </div> </div> <div class="mt-6 flex justify-between items-center"> <a href="/kategori/acikogretim-fakultesi/ackogretim-fakultesi-onlisans-programlar-2-yllk/web-tasarm-ve-kodlama/web-tasarm-ve-kodlama-wtk207u-web-tabanl-kodlama/" class="text-gray-600 hover:text-gray-800"> <i class="fas fa-arrow-left mr-1"></i> Derse Dön </a> <button type="submit" class="bg-primary-600 text-white rounded-lg px-6 py-3 hover:bg-primary-700 transition shadow-sm"> <i class="fas fa-check-circle mr-2"></i> Sınavı Bitir ve Puan Al </button> </div> </form> </main> </div>   <footer class="bg-gray-900 text-white pt-12 pb-6 mt-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8"> <div> <div class="flex items-center space-x-2 mb-4"> <div class="bg-white text-primary-600 p-2 rounded-lg"> <img src="/static/img/icon.svg" alt="sinavahazirlan.com Logo" class="h-6 w-6"> </div> <span class="text-xl font-bold text-white">sinavahazirlan.com</span> </div> <p class="text-gray-400 mb-4">Eğitimde başarının adresi. Kişiselleştirilmiş öğrenme deneyimi ile hedeflerinize ulaşın.</p> <div class="flex space-x-4 text-gray-400"> <a href="#" class="hover:text-white transition"><i class="fa-brands fa-facebook-f"></i></a> <a href="#" class="hover:text-white transition"><i class="fa-brands fa-twitter"></i></a> <a href="#" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a> <a href="#" class="hover:text-white transition"><i class="fa-brands fa-youtube"></i></a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4">Hızlı Bağlantılar</h3> <ul class="space-y-2 text-gray-400"> <li><a href="/" class="hover:text-white transition">Ana Sayfa</a></li> <li><a href="/hazirlaniyor/" class="hover:text-white transition">Dersler</a></li> <li><a href="/calisma-araclari/" class="hover:text-white transition">Çalışma Araçları</a></li> <li><a href="/blog/" class="hover:text-white transition">Blog</a></li> <li><a href="/hakkimizda/" class="hover:text-white transition">Hakkımızda</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">Sınavlar</h3> <ul class="space-y-2 text-gray-400"> <li><a href="/yks/" class="hover:text-white transition">YKS (TYT, AYT)</a></li> <li><a href="/lgs/" class="hover:text-white transition">LGS</a></li> <li><a href="/kpss/" class="hover:text-white transition">KPSS</a></li> <li><a href="/dgs/" class="hover:text-white transition">DGS</a></li> <li><a href="/ales/" class="hover:text-white transition">ALES</a></li> <li><a href="/yokdil/" class="hover:text-white transition">YÖKDİL</a></li> </ul> </div> </div> <div class="border-t border-gray-800 pt-6 flex justify-center"> <p class="text-gray-500 text-sm text-center">© 2025 sinavahazirlan.com. Tüm hakları saklıdır.</p> </div> </div> </footer>  <script> document.addEventListener('DOMContentLoaded', () => { // Kenar Çubuğu Geçişi const sidebar = document.getElementById('sidebar'); const sidebarToggle = document.getElementById('sidebarToggle'); const sidebarClose = document.getElementById('sidebarClose'); const sidebarOverlay = document.getElementById('sidebarOverlay'); // Kenar çubuğu açma fonksiyonu const openSidebar = () => { sidebar.classList.add('sidebar-open'); sidebarOverlay.classList.add('active'); document.body.classList.add('overflow-hidden'); }; // Kenar çubuğu kapatma fonksiyonu const closeSidebar = () => { sidebar.classList.remove('sidebar-open'); sidebarOverlay.classList.remove('active'); document.body.classList.remove('overflow-hidden'); }; sidebarToggle?.addEventListener('click', openSidebar); sidebarClose?.addEventListener('click', closeSidebar); sidebarOverlay?.addEventListener('click', closeSidebar); // Sınav İşlemleri const answerOptions = document.querySelectorAll('.answer-option'); const answerDisplayOptions = document.getElementsByName('answer_display'); const optionLabels = document.querySelectorAll('.option-label'); // Function to check if "Cevapları Anında Göster" is selected function isImmediate() { for (const option of answerDisplayOptions) { if (option.checked && option.value === 'immediate') { return true; } } return false; } answerOptions.forEach(option => { option.addEventListener('change', function() { if (isImmediate()) { const soruId = this.dataset.soruId; const isDogru = this.dataset.dogru === 'True'; const feedbackCorrect = document.getElementById(`feedback-${soruId}`); const feedbackWrong = document.getElementById(`feedback-${soruId}-wrong`); const explanation = document.getElementById(`explanation-${soruId}`); const selectedLabel = document.querySelector(`.option-label[data-soru-id="${soruId}"][data-option="${this.value}"]`); // Tüm seçenekleri devre dışı bırak const allOptions = document.querySelectorAll(`input[name="soru_${soruId}"]`); allOptions.forEach(opt => opt.disabled = true); // Doğru/yanlış geri bildirimini göster if (isDogru) { feedbackCorrect.classList.remove('hidden'); feedbackWrong.classList.add('hidden'); selectedLabel.classList.add('option-correct'); } else { feedbackWrong.classList.remove('hidden'); feedbackCorrect.classList.add('hidden'); selectedLabel.classList.add('option-incorrect'); // Doğru cevabı işaretle const correctOption = document.querySelector(`input[name="soru_${soruId}"][data-dogru="True"]`); if (correctOption) { const correctLabel = document.querySelector(`.option-label[data-soru-id="${soruId}"][data-option="${correctOption.value}"]`); correctLabel.classList.add('option-correct'); } } // Açıklamayı göster (varsa) if (explanation) { explanation.classList.remove('hidden'); } } }); }); // Form gönderimi const sinavForm = document.getElementById('sinavForm'); sinavForm.addEventListener('submit', function(e) { // Burada form gönderimi öncesi işlemler yapılabilir // Örneğin, kullanıcıya bir onay mesajı gösterilebilir // Eğer "Cevapları Sınav Sonunda Göster" seçiliyse ve kullanıcı formu göndermek istiyorsa if (!isImmediate()) { // Burada tüm cevapları kontrol edip sonuçları gösterebilirsiniz // Veya sunucuya gönderip sonuçları alabilirsiniz } }); }); </script> </body> </html>

Sınav Ayarları

Soru 1

Soru 2

Soru 3

Soru 4

Soru 5

Soru 6

Soru 7

Soru 8

Soru 9

Soru 10

Soru 11

Soru 12

Soru 13