Web Tabanlı Kodlama

Soru 1

Orta Zorluk

Form alanına 6 Şubat 2018 şeklinde veri girilmesi isteniyorsa form tasarım komutu aşağıdakilerden hangisi olmalıdır?

A)

B)

C)

D)

E)

Soru 2

Orta Zorluk

Aşağıdaki ortam sorgularından hangisinde bilgisayar, tablet, cep telefonu gibi cihazların ekranlarının kullanılması durumunda (screen) ve tarayıcı penceresinin genişliğinin en fazla 500px olması durumunda nav etiketinin genişliğinin 100% olacağı belirtilmiştir.

A) @media only screen and (max-width: 500px) {nav { width: 100%;}}

B) @media only print and (max-width: 500px) {nav { width: 100%;}}

C) @media not screen and (max-width: 500px) {nav { width: 100%;}}

D) @media only screen and (max-width: 600px) {nav { width: 100%;}}

E) @media only screen and (max-width: 500px) {nav { width: 80%;}}

Soru 3

Orta Zorluk

"..................................... HTML elemanlarının diğer elemanlarla arasındaki mesafeyi ayarlamak için kullanılmaktadır." şeklinde ifade edilen özellik aşağıdakilerden hangisidir?

A) Marjin özelliği

B) Width özelliği

C) Max-width özelliği

D) Position özelliği

E) Overflow özelliği

Soru 4

Orta Zorluk

Kullanıcının sayı değeri belirleyebilmesi için bir kaydırma çubuğu oluşturan form elemanı aşağıdakilerden hangisidir?

A) Number (Sayı)

B) Range (Aralıklı Kaydırma)

C) Search (Arama)

D) Button (Düğme)

E) Fieldset ve Legend (Gruplayıcı ve Başlık)

Soru 5

Orta Zorluk

Aşağıdakilerden hangisi, etiketi içinde yer alan özelliklerden olan action ın tanımıdır?

A) Form verilerinin gönderilmesinde hangi HTTP yönteminin kullanılacağını belirtir.

B) Form verilerinin sunucuda nereye gönderileceğini belirtir.

C) Forma bir isim verilmesini sağlar.

D) Form verilerinin hangi karakter kodlamasınıkabul edeceğini belirtir.

E) Form verilerinin hangi karakter kodlamasını kabul edeceğini belirtir

Soru 6

Orta Zorluk

Flash animasyonları ile pdf dosyaları eklemek için hangi etiket kullanılır?

A)

B)

C) </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="2221736" data-option="d"> <input type="radio" name="soru_2221736" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221736" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700"><head></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="2221736" data-option="e"> <input type="radio" name="soru_2221736" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221736" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700"><embed></span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221736"> <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-2221736-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-2221736"> <span class="font-medium">Doğru Cevap:</span> E) <embed> </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221736"> <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ı: Flash animasyonları ile pdf dosyaları eklemek için <embed> etiketi kullanılı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 7</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">Resimli düğmenin resmi sayfaya yüklenemediği durumlarda metin olarak düğmenin işlevini ifade eden ve resmin yerine geçen input özelliği aşağıdakilerden 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="2221737" data-option="a"> <input type="radio" name="soru_2221737" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221737" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">accept</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="2221737" data-option="b"> <input type="radio" name="soru_2221737" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221737" data-dogru="True"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">alt</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="2221737" data-option="c"> <input type="radio" name="soru_2221737" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221737" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">checked</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="2221737" data-option="d"> <input type="radio" name="soru_2221737" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221737" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">pattern</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="2221737" data-option="e"> <input type="radio" name="soru_2221737" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221737" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">value</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221737"> <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-2221737-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-2221737"> <span class="font-medium">Doğru Cevap:</span> B) alt </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221737"> <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ı: alt: Resimli düğmenin resmi sayfaya yüklenemediği durumlarda metin olarak düğmenin işlevini ifade eder ve resmin yerine geçer.</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 8</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">Tablolarda kullanılan kavramsal sınıflardan "active"in anlamı nedir?</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="2221738" data-option="a"> <input type="radio" name="soru_2221738" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221738" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">İçeriği vurgulamak için kullanılır.</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="2221738" data-option="b"> <input type="radio" name="soru_2221738" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221738" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Olumlu ya da başarılı bir içeriği belirtir.</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="2221738" data-option="c"> <input type="radio" name="soru_2221738" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221738" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">Düşük vurgulu, bilgilendirici içerikleri belirtir.</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="2221738" data-option="d"> <input type="radio" name="soru_2221738" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221738" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">Okuyucu dikkatini gerektiren içerikleri belirtir.</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="2221738" data-option="e"> <input type="radio" name="soru_2221738" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221738" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">Olumsuz ya da tehlikeli içerikleri beliritr.</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221738"> <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-2221738-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-2221738"> <span class="font-medium">Doğru Cevap:</span> A) İçeriği vurgulamak için kullanılır. </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221738"> <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ı: active: İçeriği vurgulamak için kullanılı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 9</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">Günümüzde bir çok web sayfası tasarımında grid yapısı kullanılmaktadır. Hatta bir çok CSS kütüphanesi grid kullanımını destekleyecek araçlar sunmaktadırlar. Grid kullanımı ile genel olarak sayfa genişliği kaç tane eşit parçaya bölünü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="2221739" data-option="a"> <input type="radio" name="soru_2221739" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221739" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">10</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="2221739" data-option="b"> <input type="radio" name="soru_2221739" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221739" data-dogru="True"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">12</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="2221739" data-option="c"> <input type="radio" name="soru_2221739" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221739" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">8</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="2221739" data-option="d"> <input type="radio" name="soru_2221739" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221739" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">14</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="2221739" data-option="e"> <input type="radio" name="soru_2221739" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221739" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">6</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221739"> <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-2221739-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-2221739"> <span class="font-medium">Doğru Cevap:</span> B) 12 </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221739"> <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ı: 12 eşit parçaya bölünü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 10</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">Kullanıcılara veri depolama hizmeti gibi bulut hizmetleri sunulabilen bulut platform modeli aşağıdakilerden 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="2221740" data-option="a"> <input type="radio" name="soru_2221740" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221740" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">SaaS</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="2221740" data-option="b"> <input type="radio" name="soru_2221740" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221740" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">PaaS</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="2221740" data-option="c"> <input type="radio" name="soru_2221740" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221740" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">WEB 3.0</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="2221740" data-option="d"> <input type="radio" name="soru_2221740" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221740" data-dogru="True"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">IaaS</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="2221740" data-option="e"> <input type="radio" name="soru_2221740" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221740" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">Semantik Web</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221740"> <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-2221740-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-2221740"> <span class="font-medium">Doğru Cevap:</span> D) IaaS </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221740"> <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ı: Google Drive örneğinde açıklamaya çalıştığımız gibi servis olarak altyapı modeli (Infrastructure as a Service, IaaS) kapsamında ise kullanıcılara veri depolama hizmeti gibi bulut hizmetleri sunulabilmektedir.</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 11</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">Bir web sayfasındaki yazının başlık türü hangi etiketle belirtilir?</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="2221741" data-option="a"> <input type="radio" name="soru_2221741" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221741" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700"><h></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="2221741" data-option="b"> <input type="radio" name="soru_2221741" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221741" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700"><ul></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="2221741" data-option="c"> <input type="radio" name="soru_2221741" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221741" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700"><p></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="2221741" data-option="d"> <input type="radio" name="soru_2221741" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221741" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700"><br></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="2221741" data-option="e"> <input type="radio" name="soru_2221741" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221741" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700"><b></span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221741"> <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-2221741-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-2221741"> <span class="font-medium">Doğru Cevap:</span> A) <h> </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221741"> <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ı: Bir web sayfasındaki yazının başlık türü <h> etiketi ile belirtilir. Bu etiket yanına 1’den 6’ya kadar sayı alır ve böylece yazı başlığının hangi derecede öneme sahip olduğu belirtilebilir. Bir kitabın içindekiler sayfası düşünüldüğünde bunların her biri bir başlıktır ve metin içinde <h> etiketi ile işaretlenmelidirler. Ancak başlık biter bitmez metin bilgisinin başlık olmadığını belirtmek için </h> etiketi kullanılmalıdır. Aynı düzeydeki başlıklar aynı numara ile, alt düzeydeki başlıklar ise daha düşük sayıdaki numara ile <h>etiketinde kullanılı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 12</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">Sayfayı genellikle 12 eşit parçaya bölerek tasarım öğelerini sayfa içerisine yerleştirmeyi kolaylaştıran yapı aşağıdakilerden 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="2221742" data-option="a"> <input type="radio" name="soru_2221742" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221742" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">Responsive</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="2221742" data-option="b"> <input type="radio" name="soru_2221742" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221742" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Viewport</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="2221742" data-option="c"> <input type="radio" name="soru_2221742" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221742" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</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="2221742" data-option="d"> <input type="radio" name="soru_2221742" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221742" data-dogru="True"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">Grid</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="2221742" data-option="e"> <input type="radio" name="soru_2221742" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221742" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">Display</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221742"> <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-2221742-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-2221742"> <span class="font-medium">Doğru Cevap:</span> D) Grid </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221742"> <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ı: Grid kullanımı ile genel olarak sayfa genişliği 12 eşit parçaya bölünür ve tarayıcı penceresinin tüm genişliği kullanılır. Grid kullanımı, tasarım öğelerini sayfa içinde yerleştirmeyi kolaylaştırı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 13</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 menü oluşturmak için kullanılan anlamsal etiket doğru tanımlanmış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="2221743" data-option="a"> <input type="radio" name="soru_2221743" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221743" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">nav.anamenu</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="2221743" data-option="b"> <input type="radio" name="soru_2221743" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221743" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">div.anamenu</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="2221743" data-option="c"> <input type="radio" name="soru_2221743" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221743" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">float.anamenu</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="2221743" data-option="d"> <input type="radio" name="soru_2221743" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221743" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">display.anamenu</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="2221743" data-option="e"> <input type="radio" name="soru_2221743" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221743" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">block.anamenu</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221743"> <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-2221743-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-2221743"> <span class="font-medium">Doğru Cevap:</span> A) nav.anamenu </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221743"> <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ı: Menü oluşturmak için kodların Nav anlamsal etiketi içerinde olması gerekir.</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">Paragrafı iki yana yaslı yazmak isteyen bir kodlayıcı aşağıdaki hangi parametreyi kullanmalıdı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="2221744" data-option="a"> <input type="radio" name="soru_2221744" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221744" data-dogru="True"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700"><p align=“justify”></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="2221744" data-option="b"> <input type="radio" name="soru_2221744" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221744" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700"><p background-position=""></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="2221744" data-option="c"> <input type="radio" name="soru_2221744" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221744" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700"><p font="text-indent"></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="2221744" data-option="d"> <input type="radio" name="soru_2221744" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221744" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700"><p letter-spacing="s-resize"></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="2221744" data-option="e"> <input type="radio" name="soru_2221744" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221744" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700"><padding-top></span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221744"> <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-2221744-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-2221744"> <span class="font-medium">Doğru Cevap:</span> A) <p align=“justify”> </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221744"> <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ı: Yazılan bir paragrafı iki yana yaslı yazmak isteyen bir kodlayıcı <p align=“justify”> şeklinde kullanmalı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 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">HTML kodlamada ifadeler hangi işaretler arasına yazılı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="2221745" data-option="a"> <input type="radio" name="soru_2221745" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221745" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">" ve "</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="2221745" data-option="b"> <input type="radio" name="soru_2221745" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221745" data-dogru="True"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">< ve ></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="2221745" data-option="c"> <input type="radio" name="soru_2221745" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221745" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">; ve ;</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="2221745" data-option="d"> <input type="radio" name="soru_2221745" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221745" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">! ve !</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="2221745" data-option="e"> <input type="radio" name="soru_2221745" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221745" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">* ve *</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221745"> <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-2221745-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-2221745"> <span class="font-medium">Doğru Cevap:</span> B) < ve > </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221745"> <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 kodu yazımı, belirli bir kalıp içerisinde olmaktadır. Html, head ve body olarak üç parça bilginin yer aldığı bu yapıda < ve > işaretleri içerisine ifadeler yazılırken, bu ifadelerin her birine etiket denir. Ayrıca kod yapılarının bittiğini belirtmek için </> şeklinde bir kullanım söz konusudur.</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">HTML dil ile birlikte farklı script dillerinin kullanılmasıyla oluşturulan özellikle günümüz web sayfalarında görünen kullanıcı etkileşimli web sayfalarına ne ad verilir?</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="2221746" data-option="a"> <input type="radio" name="soru_2221746" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221746" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">Dosya Transfer Web Sayfaları</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="2221746" data-option="b"> <input type="radio" name="soru_2221746" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221746" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Kullanıcı Web Sayfaları</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="2221746" data-option="c"> <input type="radio" name="soru_2221746" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221746" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">Statik Web Sayfaları</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="2221746" data-option="d"> <input type="radio" name="soru_2221746" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221746" data-dogru="True"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">Dinamik Web Sayfaları</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="2221746" data-option="e"> <input type="radio" name="soru_2221746" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221746" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">E-posta Web Sayfaları</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221746"> <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-2221746-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-2221746"> <span class="font-medium">Doğru Cevap:</span> D) Dinamik Web Sayfaları </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221746"> <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 diline destek amaçlı kullanılan bir diğer yapı ise farklı script dillerinin kullanılmasıdır. Özellikle günümüz web sayfalarında görünen kullanıcı etkileşimi ile oluşturulacak dinamik web sayfaları bu diller kullanılarak tasarlanmaktadı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">HTML'de bir verinin hücre içinde hizalanması için kullanılan işlev aşağıdakilerden 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="2221747" data-option="a"> <input type="radio" name="soru_2221747" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221747" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">border-spacing</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="2221747" data-option="b"> <input type="radio" name="soru_2221747" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221747" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">text-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="2221747" data-option="c"> <input type="radio" name="soru_2221747" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221747" data-dogru="True"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">padding</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="2221747" data-option="d"> <input type="radio" name="soru_2221747" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221747" 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="2221747" data-option="e"> <input type="radio" name="soru_2221747" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221747" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">width</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221747"> <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-2221747-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-2221747"> <span class="font-medium">Doğru Cevap:</span> C) padding </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221747"> <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'de bir verinin hücre içinde hizalanması için kullanılan işlev "padding" işlevidir.</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">Bir form içerisinde 5 farklı onay kutusu eklenmek isteniyor. Varsayılan olarak ise ilk seçeneğin işaretli olması gerekiyor. Buna göre ilk seçenek için yazılması gereken form özelliği aşağıdakilerden hangisi olmalıdı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="2221748" data-option="a"> <input type="radio" name="soru_2221748" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221748" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">checkbox</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="2221748" data-option="b"> <input type="radio" name="soru_2221748" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221748" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">check</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="2221748" data-option="c"> <input type="radio" name="soru_2221748" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221748" data-dogru="True"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">checked</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="2221748" data-option="d"> <input type="radio" name="soru_2221748" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221748" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">radio</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="2221748" data-option="e"> <input type="radio" name="soru_2221748" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221748" data-dogru="False"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">submit</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221748"> <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-2221748-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-2221748"> <span class="font-medium">Doğru Cevap:</span> C) checked </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221748"> <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ı: Checkbox elemanına checked, name, required, ve value özellikleri verilebilir. Web sayfası açıldığında onay kutusu işaretli gösterilecekse checked özelliği eklenebilir.</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">I - Radyo dalgalarını kullanarak veri iletimi------ A) ALOHANET II - Uyduların kullanıldığı ------------------------- B) SATNET III - Ticari paket anahtarlama ağı --------------- C) TELENET IV - Fransız paket anahtarlama ağı -------------- D) CYCLADES Aşağıdakilerden hangisi/hangileri, yukarıda doğru eşleştirmeleri yapılan farklı veri iletim teknolojileri ile ilk ağ/ağlardı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="2221749" data-option="a"> <input type="radio" name="soru_2221749" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221749" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">II-B; III-C</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="2221749" data-option="b"> <input type="radio" name="soru_2221749" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221749" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">I-A; III-C; IV-D</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="2221749" data-option="c"> <input type="radio" name="soru_2221749" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221749" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</span> <span class="text-gray-700">II-B; III-C; IV-D</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="2221749" data-option="d"> <input type="radio" name="soru_2221749" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221749" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">I-A; II-B; III-C</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="2221749" data-option="e"> <input type="radio" name="soru_2221749" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221749" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">I-A; II-B; III-C; IV-D</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221749"> <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-2221749-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-2221749"> <span class="font-medium">Doğru Cevap:</span> E) I-A; II-B; III-C; IV-D </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221749"> <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ı: Farklı iletişim kanallarını kullanan ağlar ortaya çıkmıştır. Örneğin Havaii üniversitesi’nin radyo dalgalarını kullanarak veri iletimi yaptığı ALOHANET, uyduların kullanıldığı SATNET, ticari paket anahtarlama ağı olan TELENET, Fransız paket anahtarlama ağı olan CYCLADES gibi farklı veri iletim teknolojilerini de içinde barındıran ağlar kullanılmaya başlanmıştır. Fakat oluşturulan bu ağlar veri iletimi için farklı protokoller ve standartlar kullandığı için birbirleriyle bağlantı kuramamaktadı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">Aldığı değere göre, sayfa içerisindeki elemanların,sayfa içeriğine veya ölçülerine göre yer değiştirmesine olanak sağlayan bölüm özelliği aşağıdakilerden 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="2221750" data-option="a"> <input type="radio" name="soru_2221750" value="a" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221750" data-dogru="False"> <div> <span class="font-medium text-gray-800">A)</span> <span class="text-gray-700">Position</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="2221750" data-option="b"> <input type="radio" name="soru_2221750" value="b" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221750" data-dogru="False"> <div> <span class="font-medium text-gray-800">B)</span> <span class="text-gray-700">Margin</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="2221750" data-option="c"> <input type="radio" name="soru_2221750" value="c" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221750" data-dogru="False"> <div> <span class="font-medium text-gray-800">C)</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="2221750" data-option="d"> <input type="radio" name="soru_2221750" value="d" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221750" data-dogru="False"> <div> <span class="font-medium text-gray-800">D)</span> <span class="text-gray-700">Length</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="2221750" data-option="e"> <input type="radio" name="soru_2221750" value="e" class="form-radio text-primary-600 mt-1 mr-3 answer-option" data-soru-id="2221750" data-dogru="True"> <div> <span class="font-medium text-gray-800">E)</span> <span class="text-gray-700">Float</span> </div> </label> </div> <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg hidden" id="feedback-2221750"> <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-2221750-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-2221750"> <span class="font-medium">Doğru Cevap:</span> E) Float </div> </div>  <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg hidden" id="explanation-2221750"> <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ı: Float kelimesi yüzmek, süzülmek anlamına gelmektedir. Float özelliği ile elemanların sayfa içinde yüzmesi sağlanabilmektedir. None, left, right değerleri alabilmektedir.</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