Web Tasarımının Temelleri - Bilgisayar Programcılığı

Ünite 1

Soru 1

İnternetin ortaya çıkışına öncülük eden ARPANET’in geliştirilme amacı aşağıdakilerden hangisidir?

Eğlence içeriklerini paylaşmak

Küresel ticaret ağı kurmak

Sosyal medya platformları geliştirmek

posta sistemini kurmak

Güvenli bilgi paylaşımı sağlamak

Açıklama:

İnternetin atası olarak kabul edilen ARPANET’in (Advanced Research Projects Agency Network) geliştirilme amacı, ABD Savunma Bakanlığı’na bağlı ARPA tarafından, dağıtık ve saldırılara karşı dayanıklı bir iletişim ağı kurmaktı. Temel hedef, farklı akademik ve savunma araştırma merkezleri arasında bilgi ve kaynak paylaşımını güvenli bir şekilde sağlamaktır. Bu, özellikle nükleer bir saldırı durumunda bile iletişimin devam edebileceği bir ağ yapısı oluşturma ihtiyacından doğmuştur.

Doğru Cevap: E

Soru 2

World Wide Web’i (WWW) geliştiren bilim insanı kimdir?

Tim Berners-Lee

Vinton Cerf

Bill Gates

Steve Jobs

Alan Turing

Açıklama:

World Wide Web (WWW) kavramını ve bu sistemi mümkün kılan temel teknolojileri (HTTP, URL ve ilk web tarayıcısı/sunucusu) geliştiren bilim insanı 1989 yılında Tim Berners-Lee'dir. Berners-Lee, bu çalışmaları İsviçre'deki nükleer araştırma merkezi CERN'de gerçekleştirmiştir. WWW, internet üzerinde bilgiye erişimi ve dolaşımı kolaylaştıran bir hipermetin sistemidir.

Doğru Cevap: A

Soru 3

Web standartlarını belirleyen kuruluş aşağıdakilerden hangisidir?

IANA

ICANN

W3C

ISO

IEEE

Açıklama:

Web standartlarının belirlenmesinden sorumlu olan uluslararası kuruluş World Wide Web Consortium (W3C)'dur. W3C, web'in uzun vadeli büyümesini ve birlikte çalışabilirliğini sağlamak amacıyla HTML, CSS ve Web Erişilebilirliği gibi temel teknolojiler için teknik şartnameler ve yönergeler yayımlar.

Doğru Cevap: C

Soru 4

Aşağıdakilerden hangisi erişilebilir web tasarımının temel amaçlarından biridir?

Sadece gelişmiş cihazlarda çalışmak

Sadece engelli bireylerin kullanımına uygun olmak

Yalnızca görsel açıdan estetik olmak

Tüm kullanıcılar için kapsayıcı ve kullanılabilir içerik sunmak

İnternet hızını artırmak

Açıklama:

Erişilebilir web tasarımının temel amacı, web sitelerinin, kullanılan cihaz, yazılım, konum veya engellilik durumu ne olursa olsun herkes tarafından eşit ve etkili bir şekilde kullanılabilmesini sağlamaktır. Bu, özellikle görme, işitme, fiziksel veya bilişsel engelli bireylerin internet içeriğine kolayca erişebilmesi anlamına gelir. W3C tarafından belirlenen WCAG (Web Content Accessibility Guidelines) bu hedeflere ulaşmak için yol gösterir.

Doğru Cevap: D

Soru 5

İstemci-sunucu modelinde istemcinin temel görevi aşağıdakilerden hangisidir?

Verileri şifrelemek

Kaynak talep etmek

Protokolleri yönetmek

Dosyaları barındırmak

Güvenlik sağlamak

Açıklama:

İstemci-sunucu modelinde, istemci (genellikle bir web tarayıcısı) kullanıcının isteği üzerine sunucudan bilgi talep etme (request) görevini üstlenir. İstemci, bu talebi uygun protokoller (örneğin HTTP) aracılığıyla sunucuya iletir ve sunucunun gönderdiği yanıtı (response) alarak kullanıcıya görüntüler (örneğin bir web sayfası olarak render eder).

Doğru Cevap: B

Soru 6

HTTP ile HTTPS arasındaki en önemli fark nedir?

HTTPS daha hızlıdır

HTTP yalnızca metin aktarır

HTTPS şifreli iletişim sağlar

HTTP yalnızca e-posta için kullanılır

HTTPS ücretsiz değildir

Açıklama:

HTTP (Hypertext Transfer Protocol) ve HTTPS (Hypertext Transfer Protocol Secure) arasındaki en önemli fark, HTTPS'in güvenli olmasıdır. HTTPS, sunucu ve istemci arasındaki veri iletişimini SSL/TLS protokollerini kullanarak şifreler. Bu şifreleme, hassas bilgilerin (şifreler, kredi kartı bilgileri) üçüncü partiler tarafından ele geçirilmesini önleyerek gizliliği ve veri bütünlüğünü sağlar. HTTP ise şifreleme yapmaz.

Doğru Cevap: C

Soru 7

Alan adlarının IP adreslerine dönüştürülmesini sağlayan sistem aşağıdakilerden hangisidir?

URL

DNS

URI

FTP

SMTP

Açıklama:

Alan adlarının (domain names - örn: google.com) internet üzerindeki cihazların birbirleriyle iletişim kurmak için kullandığı sayısal IP adreslerine dönüştürülmesini sağlayan sisteme DNS (Domain Name System - Alan Adı Sistemi) denir. DNS, internetin telefon rehberi gibi çalışır ve kullanıcıların web sitelerine kolayca ulaşmasını sağlar.

Doğru Cevap: B

Soru 8

HTML işaretleme dilinin temel işlevi aşağıdakilerden hangisidir?

Web sayfasının yapısını tanımlamak

Web sayfasının görünümünü düzenlemek

Dinamik işlemler yapmak

Sunucu yönetimini sağlamak

Veritabanı işlemlerini yürütmek

Açıklama:

HTML (HyperText Markup Language), web sayfalarının temelini oluşturan işaretleme dilidir. Temel işlevi, web sayfasının yapısal iskeletini ve içeriğini (metin, resim, bağlantılar, tablolar vb.) tanımlamaktır. HTML etiketleri, tarayıcıya içeriğin ne tür bir element olduğunu ve nerede konumlanacağını bildirir.

Doğru Cevap: A

Soru 9

CSS aşağıdakilerden hangisi için kullanılır?

Sunucu erişimini yönetmek

Verileri şifrelemek

Kullanıcı girişi doğrulamak

Sayfanın görselliğini düzenlemek

Dosya transferi yapmak

Açıklama:

CSS (Cascading Style Sheets - Basamaklı Stil Sayfaları), HTML ile oluşturulan web sayfalarının görsel stilini ve sunumunu kontrol etmek için kullanılır. CSS, renkler, yazı tipleri, düzen (layout), boşluklar ve responsive tasarım gibi özellikleri tanımlayarak içeriğin (HTML) görsel katmandan ayrılmasını sağlar.

Doğru Cevap: D

Soru 10

Aşağıdakilerden hangisi ön yüz (front-end) teknolojilerine örnek olarak verilebilir?

Node.js

MySQL

PostgreSQL

PHP

HTML, CSS ve JavaScript

Açıklama:

Ön yüz (Front-end) teknolojileri, kullanıcıların tarayıcı aracılığıyla doğrudan etkileşimde bulunduğu web arayüzünü oluşturmaktan sorumludur. Bu teknolojilerin temel üç ayağı HTML (yapı), CSS (stil) ve dinamik etkileşimi sağlayan JavaScript'tir. Bu teknolojiler, kullanıcı deneyimini ve arayüz tasarımını yönetir.

Doğru Cevap: E

Ünite 2

Soru 1

Web tasarım sürecinin ilk adımı aşağıdakilerden hangisidir?

Hedef kitleyi belirlemek

Renk paletini seçmek

Sunucu altyapısını satın almak

Animasyonları tasarlamak

SEO çalışması yapmak

Açıklama:

Web tasarım sürecinin ilk adımı, projenin kapsamının, hedeflerinin ve hedef kitlesinin belirlendiği Planlama ve Keşif (Discovery) aşamasıdır. Bu aşamada kaynaklar, zaman çizelgeleri ve temel gereksinimler netleştirilir, bu da tüm projenin başarılı bir şekilde ilerlemesi için temel teşkil eder.

Doğru Cevap: A

Soru 2

Aşağıdakilerden hangisi demografik veri kapsamında değerlendirilir?

Kullanıcının marka algısı

Kullanıcının hobileri

Kullanıcının site içi tıklama yolu

Kullanıcının yaş bilgisi

Kullanıcının satın alma motivasyonu

Açıklama:

Demografik veriler, kullanıcıların somut ve sayısal olarak ölçülebilir özellikleridir. Bu kapsamda Yaş, Cinsiyet, Eğitim durumu, Gelir seviyesi ve Coğrafi konum gibi temel sosyo-ekonomik bilgiler değerlendirilir.

Doğru Cevap: D

Soru 3

………………… kullanıcıların yaşam tarzı, ilgi alanları, değerleri ve motivasyonlarını ortaya koyar.
Yukarıdaki cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

Psikografik analiz

Demografik analiz

Hedef Kitle analizi

Davranışsal analiz

Maliyet analizi

Açıklama:

Boş bırakılan yere Psikografik kavramı getirilmelidir. Psikografik veriler, kullanıcıların davranışlarını, motivasyonlarını ve tercihlerini anlamak için onların yaşam tarzları, ilgi alanları, değerleri, tutumları ve inançları gibi nitel özelliklerini inceler. Demografik veriler 'kim' olduğunu açıklarken, psikografik veriler 'neden' davrandığını açıklar.

Doğru Cevap: A

Soru 4

Aşağıdakilerden hangisi kullanıcı yolculuğu aşamalarından birisi değildir?

Farkındalık

Araştırma

Karar

Kod yazma

Deneyim

Açıklama:

Kullanıcı yolculuğu (User Journey) aşamaları genellikle Farkındalık, Değerlendirme, Satın Alma/Eylem ve Sadakat gibi kullanıcının ürün veya hizmetle olan doğal etkileşimini kapsayan adımlardır. Test Etme, geliştirme sürecinin bir aşamasıdır ve kullanıcının deneyimlediği doğal tüketici yolculuğu aşamalarından biri değildir.

Doğru Cevap: D

Soru 5

Aşağıdakilerden hangisi bilgi mimarisini en doğru şekilde açıklar?

Web sitesinin renk paletinin ve tipografisinin seçilmesi

İçeriklerin düzenlenip kategorize edilmesi ve kullanıcıların kolayca erişebileceği biçimde yapılandırılması

Sunucu altyapısının ve veri tabanının ölçeklendirilmesi

Görsel öğeler için animasyon efektlerinin tasarlanması

Arama motoru optimizasyonu (SEO) metinlerinin yazılması

Açıklama:

Bilgi Mimarisi (Information Architecture - IA), bir web sitesindeki içeriğin, navigasyon sistemlerinin ve arama özelliklerinin yapılandırılması ve etiketlenmesi disiplinidir. Amacı, kullanıcıların site içindeki bilgiyi kolayca bulmasını ve anlamasını sağlamaktır.

Doğru Cevap: B

Soru 6

Aşağıdakilerden hangisi Wireframe’i en doğru şekilde tanımlar?

Web sitesinin son hâline yakın, tüm görsel detayları içeren yüksek sadakatli tasarım

Sunucu yapılandırmasını gösteren teknik diyagram

Görsel tasarımdan bağımsız, sitenin iskelet yapısını gösteren düşük sadakatli çizim/diyagram

Kullanıcı testlerinden elde edilen ısı haritaları

SEO için anahtar kelime listesi

Açıklama:

Wireframe, bir web sayfası veya uygulamanın temel yapısını ve öğelerinin yerleşimini gösteren düşük sadakatli bir görsel taslaktır. Wireframe’ler, görsel tasarım veya renk şemaları yerine, tamamen içerik hiyerarşisine, yapısal akışa ve işlevselliğe odaklanır. Bu, bir sitenin iskelet planıdır.

Doğru Cevap: C

Soru 7

Aşağıdakilerden hangisi içerik stratejisinin temel başlıklarından birisi değildir?

Dil ve Üslup

İçerik Türleri

SEO Uyumlu İçerik

Maliyet analizi

Güncellenebilirlik

Açıklama:

İçerik stratejisi genellikle İçeriğin Özü (Substance), Yapısı (Structure), Yönetimi (Governance) ve İş Akışı (Workflow) başlıklarını içerir. Görsel Tasarım, içeriğin nasıl sunulacağı ile ilgili olsa da, içerik stratejisinin temel başlıklarından biri sayılmaz; daha çok sunum ve arayüz tasarım (UI) kategorisine girer.

Doğru Cevap: C

Soru 8

…………………… bir web sitesinin kullanıcılar tarafından ne kadar kolay, hızlı ve hatasız bir şekilde kullanılabileceğini ifade eder.
Yukarıdaki cümlede boş bırakılan yere aşağıdaki seçeneklerden hangisi getirilmelidir?

Erişilebilirlik

Kullanılabilirlik

Gestalt psikolojisi

Yakınlık

Süreklilik

Açıklama:

Tanımlanan özellikler Kullanılabilirlik (Usability) kavramına aittir. Kullanılabilirlik, kullanıcıların belirli bir sistemi kullanırken ne kadar etkili, verimli ve tatmin edici bir deneyim yaşadığını ölçer. Kolaylık, hız ve hatasızlık temel ölçütlerindendir.

Doğru Cevap: B

Soru 9

Aşağıdakilerden hangisi Gestalt ilkelerinden birisi değildir?

Yakınlık

Benzerlik

Süreklilik

Tamamlama

Tutarlılık

Açıklama:

Gestalt İlkeleri, insan zihninin görsel öğeleri nasıl gruplandırdığını ve anlamlandırdığını açıklayan görsel algı yasalarıdır (Örn: Yakınlık, Benzerlik, Tamamlama, Şekil-Zemin). Kullanılabilirlik (Usability) bir UX hedefi ve ölçütüdür, ancak bir görsel algı ilkesi olarak Gestalt'ın temel kurallarından biri değildir.

Doğru Cevap: E

Soru 10

Aşağıdakilerden hangisi Jakob Nielsen’in 10 Kullanılabilirlik İlkesinden birisi değildir?

Sistem durumunun görünürlüğü

Sistem ve gerçek dünya uyumu

Kullanıcı kontrolü ve özgürlüğü

Hata önleme

Filtreleme

Açıklama:

Jakob Nielsen'in 10 Kullanılabilirlik İlkesi, arayüzlerin işlevselliği, verimliliği ve hata yönetimini ele alır (Örn: Sistemin Görünürlüğü, Hata Önleme, Estetik ve Minimalist Tasarım). Bu ilkeler daha çok işlevsel yeterliliğe odaklanır. Görsel Çekicilik, estetik bir kaygı olup, Nielsen'in on temel sezgisellerinden (heuristics) biri olarak kabul edilmez (Estetik ve Minimalist Tasarım ilkesi sadeliği vurgular, salt çekiciliği değil).

Doğru Cevap: E

Ünite 3

Soru 1

Arayüz tasarımının (UI) temel amacı aşağıdakilerden hangisidir?

Kullanıcıların yalnızca görsel olarak etkilenmesini sağlamak

Kullanıcıya bilgiye hızlı, kolay ve anlaşılır şekilde erişim sunmak

Sitenin yalnızca estetik görünümünü düzenlemek

Yazılım hatalarını ortadan kaldırmak

Kodlama süresini kısaltmak

Açıklama:

Arayüz tasarımının (User Interface - UI) temel amacı, kullanıcı ile sistem arasındaki etkileşimi kolaylaştırmak, estetik bir deneyim sunmak ve kullanılabilirliği (usability) artırmaktır. UI, kullanıcıya sunulan görsel öğelerin (renk, tipografi, düzen) organizasyonunu içerir ve kullanıcının ürünü veya hizmeti en az çabayla kullanmasını hedefler. Başka bir deyişle, iyi bir UI, sistemin kullanımını sezgisel hale getirir.

Doğru Cevap: B

Soru 2

Aşağıdakilerden hangisi etkileşim tasarımının (IxD) örneği değildir?

Bir butona basıldığında renginin değişmesi

Dosya yüklenirken ilerleme çubuğunun dolması

Menüde gezinirken tıklanabilir alanların büyümesi

Metin içeriğinin anlaşılır olması

Form doldururken hata mesajının çıkması

Açıklama:

Etkileşim tasarımı (Interaction Design - IxD), kullanıcı ile ürün arasındaki etkileşimin şeklini tanımlar. Bu, kullanıcının bir eyleme verdiği tepkiler (geribildirim), navigasyon akışı, animasyonlar ve durum değişiklikleri gibi dinamik süreçleri içerir. Örneğin hata mesajları, geçiş animasyonları ve form doldurma akışı IxD örneğidir. Ancak, markanın logo rengini belirlemek veya statik görsel stil kılavuzu oluşturmak, daha çok görsel tasarım (UI) veya marka kimliği kapsamına girer, doğrudan etkileşim mekaniğiyle ilgili değildir.

Doğru Cevap: D

Soru 3

Renklerin kullanıcı üzerindeki etkisi ile ilgili aşağıdaki eşleştirmelerden hangisi doğrudur?

Mavi - Aciliyet ve tehlike

Kırmızı - Güven ve profesyonellik

Yeşil - Doğa ve huzur

Siyah - Neşe ve iyimserlik

Sarı - Lüks ve resmiyet

Açıklama:

Renklerin kullanıcı üzerindeki psikolojik etkileri tasarımda kritik öneme sahiptir. Örneğin, Mavi genellikle güven, istikrar ve profesyonellik ile ilişkilendirilirken; Kırmızı acil durum, tehlike, dikkat çekme veya tutku ile eşleştirilir. Yeşil doğa, büyüme ve başarılı tamamlanma (onay mesajları) anlamına gelir. Doğru eşleştirme, markanın algısını ve kullanıcı tepkisini doğrudan etkiler.

Doğru Cevap: C

Soru 4

Tipografi ile ilgili aşağıdaki ifadelerden hangisi doğrudur?

Sans-serif yazı tipleri dijital ortamda okunabilirliği artırır.

Serif yazı tipleri küçük puntoda daha okunabilirdir.

Satır uzunluğu 100-150 karakter olmalıdır.

Kontrastın düşük olması metin okunabilirliğini artırır.

Ana metin için genellikle 10px puntolar tercih edilir.

Açıklama:

Tipografi, metinlerin düzenlenmesi, seçimi ve tasarlanması sanatıdır. Tipografinin temel amacı metnin amacına uygun olarak okunabilirliğini (legibility) ve okunurluğunu (readability) maksimize etmektir. Okunabilirlik, tek tek harflerin ne kadar kolay ayırt edilebildiği (font boyutu, font stili) ile ilgilidir. Okunurluk ise metnin bloklar halinde, özellikle uzun paragraflarda, ne kadar akıcı ve kolay taranabildiği (satır yüksekliği, kelime aralığı) ile ilgilidir. Tipografi, bu iki unsuru dengelemelidir.

Doğru Cevap: A

Soru 5

Aşağıdakilerden hangisi grid sisteminin sağladığı avantajlardan biri değildir?

İçeriğin hizalanmasını sağlamak

Düzeni ve dengeyi artırmak

Görsel hiyerarşiyi oluşturmak

Kullanıcıya estetik bir deneyim sunmak

Görsel metaforların geliştirilmesi

Açıklama:

Grid (ızgara) sistemi, tasarım öğelerini düzenlemek ve sayfalar arasında hizalama sağlamak için kullanılır. Grid sisteminin avantajları: tasarımda tutarlılık sağlamak, geliştirme sürecini hızlandırmak ve özellikle duyarlı (responsive) tasarım yapısını oluşturmaktır. Ancak, grid sistemi görsel düzen ile ilgilidir; sayfa yüklenme hızını veya sunucu yanıt süresini doğrudan etkilemez. Hız, görsel optimizasyonu ve kod verimliliği ile ilgilidir.

Doğru Cevap: E

Soru 6

Boşluk (white space) kullanımının temel işlevi aşağıdakilerden hangisidir?

Vurguyu artırmak ve karmaşayı azaltmak

Tasarıma daha fazla öğe eklemek

Okunabilirliği azaltmak

Sayfanın daha çok reklam almasını sağlamak

Metaforları güçlendirmek

Açıklama:

Boşluk (White Space veya Negatif Alan), tasarım öğeleri arasındaki ve çevresindeki kasıtlı olarak boş bırakılan alanlardır. Temel işlevi, içeriğin okunurluğunu ve anlaşılırlığını artırmak, öğeleri gruplayarak görsel hiyerarşi ve odak noktası oluşturmaktır. Boşluk kullanımı, arayüzün daha az dağınık ve daha profesyonel görünmesini sağlar, bu da kullanıcının bilgileri daha verimli işlemesine yardımcı olur.

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi WCAG erişilebilirlik ilkelerinden biri değildir?

Algılanabilirlik

Çalıştırılabilirlik

Anlaşılabilirlik

Sağlamlık

Estetiklik

Açıklama:

WCAG (Web İçeriği Erişilebilirlik Kılavuzu), web içeriğinin engelli kullanıcılar dahil herkes tarafından erişilebilir olmasını sağlamak için dört temel ilkeye dayanır (POUR): Algılanabilir (Perceivable), Çalıştırılabilir/Kullanılabilir (Operable), Anlaşılır (Understandable) ve Sağlam/Güvenilir (Robust). Bu ilkeler teknik ve işlevsel erişilebilirliği garanti eder. Estetik (Aesthetics), kullanıcı deneyimi (UX) için önemli olsa da, WCAG'nin dört temel erişilebilirlik ilkesinden biri değildir.

Doğru Cevap: E

Soru 8

Bir web sitesinde görsellere açıklayıcı metin eklemek hangi teknikle sağlanır?

Longdesc

Tabindex

Alt Metin (Alt Text)

Klavye Navigasyonu

Flexbox

Açıklama:

Bir web sitesinde görsellere açıklayıcı metin eklemek, alt metin (Alt Text) tekniğiyle sağlanır (HTML'de alt özelliği). Alt metin, görselin yüklenemediği durumlarda veya ekran okuyucular kullanan görme engelli kullanıcılar için görselin ne hakkında olduğunu betimler. Bu teknik, WCAG'nin Algılanabilirlik ilkesini yerine getirmenin temel yollarından biridir.

Doğru Cevap: C

Soru 9

Mobil öncelikli tasarım (Mobile First) yaklaşımının temel özelliği aşağıdakilerden hangisidir?

Öncelikle masaüstü tasarımı yapıp sonra mobil uyarlamak

Tasarım sürecine küçük ekranlardan başlayıp büyüğe doğru geliştirmek

Tüm cihazlarda aynı düzeni zorunlu tutmak

Yalnızca responsive grid sistemleri kullanmak

Görsel öğeleri küçülterek mobil cihazlara uyarlamak

Açıklama:

Mobil öncelikli tasarım (Mobile First) yaklaşımının temel özelliği, tasarım sürecine en kısıtlı ekran boyutu olan mobil cihazlar için başlanmasıdır. Bu, tasarımcının sadece en temel içeriği ve işlevselliği korumaya zorlar (içerik önceliklendirmesi). Mobil versiyon oluşturulduktan sonra, kademeli olarak daha büyük ekranlara (tablet, masaüstü) doğru özellikler eklenerek geliştirme yapılır (ilerici iyileştirme).

Doğru Cevap: B

Soru 10

Aşağıdakilerden hangisi farklı cihazlarda tutarlılık sağlamaya yönelik bir ilke değildir?

Marka renklerinin korunması

Navigasyon yapısının benzer kalması

İkonların aynı işlevi sürdürmesi

Farklı cihazlarda tamamen farklı arayüzler geliştirmek

Tipografinin aynı font ailesinden seçilmesi

Açıklama:

Farklı cihazlarda tutarlılık sağlamak, kullanıcıların uygulamayı her platformda aynı şekilde anlamasını ve kullanmasını garanti eder. Bu, aynı tasarım dilini, aynı bileşen stillerini ve navigasyon kalıplarını kullanmayı gerektirir. Duyarlı tasarım, grid sistemleri ve tasarım kılavuzları tutarlılığı destekler. Ancak, tasarımda maksimum renk kullanımı veya aşırı süslü bir görsel stil, tutarlılığı değil, aksine görsel karmaşıklığı ve performansı artırabilir, bu nedenle tutarlılık ilkesini destekleyen bir faktör değildir.

Doğru Cevap: D

Ünite 4

Soru 1

HTML belgesinin en üst satırında hangi ibare bulunmalıdır?

<html>

<!DOCTYPE html>

<head>

< body>

< meta />

Açıklama:

HTML belgesinin ilk satırında mutlaka belge türü bildirimi (Document Type Declaration) bulunmalıdır. Modern HTML5 standardında bu ibare <!DOCTYPE html> şeklindedir. Bu bildirim, tarayıcıya belgenin hangi HTML sürümüne göre yorumlanması gerektiğini söyler ve doğru bir şekilde işlenmesini sağlar.

Doğru Cevap: B

Soru 2

Aşağıdakilerden hangisi HTML etiketleri arasında yer almaz?

<style>

Açıklama:

Bu tür sorularda doğru cevap, bir HTML etiketinin yapısına uymayan veya HTML standardında tanımlı olmayan bir öğe olacaktır. HTML etiketleri, küçüktür (<) ve büyüktür (>) işaretleri arasına yazılır (örneğin <body> veya ). HTML etiketleri, içeriği yapılandırmak ve anlamlandırmak için kullanılır ve tarayıcıya içeriğin nasıl gösterileceğini bildirir.

Doğru Cevap: E

Soru 3

Bir sayfanın başlık bilgisi hangi etiket içinde bulunur?

<body>

<h1>

<meta>

<title>

Açıklama:

Bir web sayfasının tarayıcı sekmesinde veya penceresinde görünen başlık bilgisi, <head> etiketi içinde yer alan <title> etiketi ile tanımlanır. <title> etiketi, sayfanın içeriği hakkında kısa bilgi verir ve arama motorları (SEO) için kritik öneme sahiptir.

Doğru Cevap: E

Soru 4

Aşağıdaki etiketlerden hangisi bir görsel eklemek için kullanılır?

<video>

<audio>

<img>

<link>

Açıklama:

HTML'de sayfaya görsel (resim) eklemek için kullanılan etiket <img> etiketidir. Bu etiket, kapanış etiketi gerektirmeyen (kendiliğinden kapanan) bir etikettir ve görselin yolunu belirtmek için zorunlu olan src (source) özniteliğini kullanır. Ayrıca alt (alternatif metin) özniteliği de erişilebilirlik açısından önemlidir.

Doğru Cevap: C

Soru 5

HTML’de sırasız liste oluşturmak için hangi etiket kullanılır?

<ol>

<ul>

<li>

<table>

<div>

Açıklama:

HTML'de maddeler halinde gösterilen, numaralandırılmamış (sırasız) bir liste oluşturmak için

(List Item) etiketi içine alınmalıdır.

Doğru Cevap: B

Soru 6

HTML’de başlık seviyelerini belirtmek için hangi etiketler kullanılır?

< h1> -< /h1> < h3> < /h3>

< h1> -< /h1> < h6> < /h6>

< heading> < /heading>

< header> - < footer> < /footer> < /header>

< title> < /title> < header> < /header>

Açıklama:

HTML’de içerik hiyerarşisini ve bölümlendirmeyi belirtmek için başlık seviyeleri kullanılır. Bu seviyeler <h1>'den başlayıp <h6>'ya kadar altı farklı büyüklükte tanımlanmıştır. <h1> sayfanın ana başlığını temsil eder ve en yüksek öneme sahiptir.

Doğru Cevap: B

Soru 7

Bir form elemanını tanımlamak için hangi etiket kullanılır?

<input>

<form>

<html>

Açıklama:

Kullanıcıdan metin, şifre, dosya veya diğer veri türlerini almak için kullanılan temel form elemanlarını tanımlamak amacıyla <input> etiketi kullanılır. Bu etiket, type özniteliği değiştirilerek farklı işlevlerde kullanılabilir. Tüm bu elemanlar genellikle <form> etiketi içinde bulunur.

Doğru Cevap: E

Soru 8

Aşağıdakilerden hangisi kullanıcıdan veri toplamak için kullanılan bir HTML etiketidir?

<img>

<form>

<div>

<span>

Açıklama:

Kullanıcıdan veri toplamak, yani veri girişi sağlamak için kullanılan temel HTML etiketleri arasında <input>, <textarea> (çok satırlı metin girişi için) ve <select> (açılır menü oluşturmak için) yer alır. Bu etiketler, kullanıcının etkileşimde bulunabileceği arayüz öğelerini oluşturur.

Doğru Cevap: B

Soru 9

Semantik HTML nedir?

HTML'in hızlı yazılması.

Yalnızca görsel öğeleri içermesi.

Tasarımın estetik açıdan güzel olması.

Etiketlerin yapı ve anlamına göre doğru kullanılması.

Yalnızca metin içermesi.

Açıklama:

Semantik HTML, etiketlerin içeriğin anlamını veya amacını doğru bir şekilde yansıttığı HTML yazım şeklidir. Örneğin, navigasyon bağlantıları için <nav>, ana içerik için <main> kullanılmasıdır. Semantik etiketler, sadece stil (görünüm) değil, aynı zamanda içeriğin yapısını tarayıcılara ve arama motorlarına (SEO) doğru aktarır, bu da erişilebilirliği artırır.

Doğru Cevap: D

Soru 10

Responsive (duyarlı) tasarımın amacı nedir?

Sadece masaüstü kullanıcıları için tasarım yapmak.

Farklı cihazlarda uyumlu görünüm sağlamak.

Sadece mobil cihazlar için tasarım yapmak.

Hızlı yüklenen sayfalar oluşturmak.

Görsel öğeleri kaldırmak.

Açıklama:

Responsive (Duyarlı) Tasarımın temel amacı, bir web sitesinin içeriğinin, tasarımı bozulmadan ve ekrandan bağımsız olarak farklı cihaz boyutlarına (masaüstü, tablet, mobil) otomatik ve akışkan bir şekilde uyum sağlamasını garantilemektir. Böylece, kullanıcıya her platformda en iyi kullanıcı deneyimi sunulmuş olur.

Doğru Cevap: B

Ünite 5

Soru 1

Bir formda kullanıcıdan alınan verilerin gönderileceği hedef adresi belirleyen öznitelik aşağıdakilerden hangisidir?

method

name

action

type

Açıklama:

Bir HTML formunda, kullanıcıdan alınan verilerin nereye gönderileceğini (sunucu tarafındaki betik veya sayfa) belirleyen temel öznitelik action özniteliğidir. Bu öznitelik, form gönderildiğinde işlenecek hedef URL'yi tanımlar. Örneğin: <form action="/submit.php">. Bu, formun doğru sunucu kaynağına yönlendirilmesini sağlar.

Doğru Cevap: C

Soru 2

Aşağıdaki giriş türlerinden hangisi kullanıcının yalnızca sayı girmesini sağlar?

Açıklama:

Giriş elemanı (<input>) için kullanılan type="number" giriş türü, kullanıcıların yalnızca sayısal değerler girmesini sağlamak üzere tasarlanmıştır. Bu tür, tarayıcının otomatik olarak doğrulama yapmasına ve mobil cihazlarda kullanıcı deneyimini iyileştirmek için sayısal klavye açmasına olanak tanır.

Doğru Cevap: C

Soru 3

HTML5’te bir form alanının boş bırakılmamasını sağlayan öznitelik aşağıdakilerden hangisidir?

maxlenght

placeholder

required

value

alt

Açıklama:

HTML5 ile birlikte gelen required özniteliği, bir form alanının (örneğin <input>, <textarea> veya <select>) boş bırakılmamasını garanti eden istemci tarafı bir doğrulama mekanizmasıdır. Bu öznitelik eklendiğinde, kullanıcı o alanı doldurmadan formu gönderemez.

Doğru Cevap: C

Soru 4

Bir tablonun başlık hücreleri için kullanılan HTML etiketi aşağıdakilerden hangisidir?

<tr>

<th>

<td>

<thead>

Açıklama:

HTML tablolarında, veri hücresi için <td> (Table Data) kullanılırken, tablonun veya bir bölümünün başlık hücreleri için <th> (Table Header) etiketi kullanılır. <th> etiketi, başlıkları semantik olarak tanımlar ve ekran okuyucuların tablo yapısını anlamasına yardımcı olur, genellikle metni kalın ve ortalanmış gösterir.

Doğru Cevap: B

Soru 5

Bir hücrenin yatayda birden fazla sütunu kapsamasını sağlayan öznitelik aşağıdakilerden hangisidir?

colspan

rowspan

align

merge

spanrow

Açıklama:

Bir HTML tablo hücresinin (<td> veya <th>), yatay yönde yani birden fazla sütunu kapsamasını sağlayan öznitelik colspan'dır (Column Span). Bu özniteliğe verilen değer, hücrenin kaç sütun genişliğinde olacağını belirtir. Dikey birleştirme ise rowspan özniteliği ile yapılır.

Doğru Cevap: A

Soru 6

Bir web sayfasının ana içeriğini belirtmek için kullanılan semantik HTML5 etiketi aşağıdakilerden hangisidir?

<main>

Açıklama:

Semantik HTML5 etiketlerinden olan <main> etiketi, bir web sayfasının ana, benzersiz içeriğini belirtmek için kullanılır. Bu, sayfanın temel amacına hizmet eden içeriği tanımlar ve gezinme, altbilgi veya yan çubuk gibi yardımcı içeriklerden ayrılmasını sağlar. Bir sayfada genellikle yalnızca bir <main> etiketi olmalıdır.

Doğru Cevap: E

Soru 7

Sayfa içinde gezinme bağlantılarını içeren semantik etiket aşağıdakilerden hangisidir?

<aside>

<nav>

Açıklama:

<nav> etiketi, sayfa içinde veya site genelinde önemli gezinme bağlantıları (navigation links) içeren bölümleri işaretlemek için kullanılan semantik bir etikettir. Bu etiket, yardımcı teknolojilere ve arama motorlarına bu içeriğin gezinme amaçlı olduğunu bildirerek erişilebilirliği artırır.

Doğru Cevap: D

Soru 8

Görseller için alternatif metin sağlayarak erişilebilirliği artıran öznitelik aşağıdakilerden hangisidir?

alt

title

aria-label

name

Açıklama:

alt (alternatif metin) özniteliği, <img> etiketi için zorunlu sayılan ve görselin içeriğini veya işlevini açıklayan metni sağlar. Bu metin, görsel yüklenemediğinde kullanıcıya gösterilir ve en önemlisi, ekran okuyucular tarafından okunarak görme engelli kullanıcılar için erişilebilirliği artırır.

Doğru Cevap: A

Soru 9

Formların mantıksal olarak gruplanmasını sağlayan ve ekran okuyucular için açıklama ekleyen etiket ikilisi aşağıdakilerden hangisidir?

Açıklama:

Form öğelerini mantıksal olarak gruplamak ve aralarına görsel bir çerçeve çekmek için <fieldset> etiketi kullanılır. Bu grubun başlığını veya açıklamasını sağlamak için ise <legend> etiketi, <fieldset> içine yerleştirilir. Bu ikili, formun yapısını netleştirir ve ekran okuyucular için bağlam sağlayarak erişilebilirliği iyileştirir.

Doğru Cevap: B

Soru 10

WCAG standartları ile doğrudan ilişkili olan kavram aşağıdakilerden hangisidir?

Erişilebilirlik

Sayfa yüklenme hızı

Görsel çözünürlük

Responsive tasarım

SEO optimizasyonu

Açıklama:

WCAG (Web Content Accessibility Guidelines - Web İçeriği Erişilebilirlik Yönergeleri), web içeriğinin engelli bireyler tarafından algılanabilir, işletebilir, anlaşılabilir ve sağlam olmasını sağlamak amacıyla geliştirilmiş uluslararası standartlardır. Bu nedenle, WCAG standartları doğrudan Web Erişilebilirliği (Accessibility) kavramı ile ilişkilidir.

Doğru Cevap: A

Ünite 6

Soru 1

CSS'in web geliştirmedeki rolü ve HTML ile ilişkisi göz önüne alındığında, aşağıdaki ifadelerden hangisi CSS'in temel işlevini en doğru şekilde tanımlamaktadır?

HTML içeriğinin görsel düzenini, estetiğini ve sunumunu belirler.

Web sayfasının iskeletini ve anlamsal yapısını oluşturur.

Sayfaya yalnızca resim ve bağlantı gibi multimedya öğeleri ekler.

Sunucu tarafında veri işleme ve veritabanı bağlantılarını yönetir.

Kullanıcının tarayıcısına web sayfasını indirme hızını artırır.

Açıklama:

CSS (Cascading Style Sheets), bir web sayfasının görsel sunumunu ve düzenini kontrol etmek için kullanılır. HTML ise sayfanın yapısal iskeletini (başlıklar, paragraflar, görseller vb.) oluşturur. CSS'in temel işlevi, HTML tarafından sağlanan içeriğe renk, yazı tipi, boyut, konum ve diğer stil özelliklerini uygulamaktır. CSS, HTML içeriğini değil, sadece o içeriğin nasıl görüneceğini yönetir.

Doğru Cevap: A

Soru 2

CSS kurallarının HTML sayfasına eklenme yöntemlerinden hangisi, özellikle bakım kolaylığı ve geniş çaplı projelerde tutarlılık sağlaması açısından en çok öne çıkmaktadır?

Satır İçi CSS Ekleme

Harici CSS Ekleme

Dahili (Sayfa İçi) CSS Ekleme

Etiket Seçici Kullanımı

Kimlik Seçici Kullanımı

Açıklama:

CSS'i HTML sayfasına eklemenin en iyi yolu, Harici Stil Sayfası (External Style Sheet) kullanmaktır. Bu yöntemde stiller, ayrı bir .css dosyasında tutulur ve bu sayede bakımı kolaylaşır, kod tekrarı önlenir ve aynı stil dosyasının birden çok sayfada kullanılmasıyla projede tutarlılık sağlanır. Diğer yöntemler (Dahili ve Satır İçi), geniş çaplı projelerde yönetimi zorlaştırır.

Doğru Cevap: B

Soru 3

Bir CSS kuralı, temel olarak üç bileşenden oluşur. Aşağıdakilerden hangisi bu üç temel bileşeni doğru sırasıyla vermektedir?

İçerik - Boyut - Hizalama

HTML Etiketi - Sınıf Adı - Değer

Seçici - Özellik - Değer

Seçici - Değer - Tarayıcı

Özellik - Seçici - Sözdizimi

Açıklama:

Bir CSS kuralı, temel olarak üç ana bileşenden oluşur. İlk olarak, stilin uygulanacağı HTML öğesini hedefleyen Seçici (Selector) bulunur (örn: p). İkinci olarak, değiştirilmek istenen özelliği belirten Özellik (Property) (örn: color) ve son olarak bu özelliğe atanacak değeri belirten Değer (Value) (örn: blue) yer alır. Bu son iki bileşen (Özellik ve Değer) birlikte Bildirim (Declaration) olarak adlandırılır.

Doğru Cevap: C

Soru 4

CSS’te, belirli bir sınıf adıyla tanımlanmış birden fazla HTML öğesine aynı stili uygulamayı sağlayan seçici türü ve kullanılan ön ek aşağıdakilerden hangisidir?

Kimlik Seçici (#)

Evrensel Seçici (*)

Etiket Seçici (hiçbir ön ek kullanılmaz)

Sözde Sınıf Seçici (:)

Class Seçici (.)

Açıklama:

CSS'te, aynı stili birden fazla farklı HTML öğesine uygulamayı sağlayan seçici türü Sınıf Seçici (Class Selector)'dir. Bu seçiciler, CSS dosyasında tanımlanırken nokta (.) ön eki kullanılarak belirtilir (örneğin, .ozelmetin). Bu sayede, belirli bir sınıfa sahip tüm öğeler aynı stili alır, bu da esneklik ve yeniden kullanılabilirlik sağlar.

Doğru Cevap: E

Soru 5

Sayfadaki tüm paragraf (p) etiketlerinin yazı rengini maviye ve yazı boyutunu 14 piksele ayarlamak için kullanılan CSS sözdizimi örneğinde, "color" ifadesi kuralın hangi bileşenini temsil eder?

Seçici (Selector)

Değer (Value)

Özellik (Property)

Kimlik (ID)

Sınıf (Class)

Açıklama:

Verilen CSS sözdizimi örneğinde (p { color: blue; font-size: 14px; }), p seçicidir. Süslü parantez içindeki ifadeler (color: blue;), bir bildirimdir. Bu bildirimde, iki nokta üst üste (:) işaretinden önceki kısım, değiştirilmek istenen stil özelliğini yani Özellik (Property)'yi temsil eder. "color" ifadesi, yazı rengi özelliğini değiştirmek için kullanılan Özelliktir.

Doğru Cevap: C

Soru 6

CSS Kutu Modeli'ne göre, bir HTML öğesinin İçerik (Content) alanı ile Kenarlık (Border) alanı arasındaki boşluğu tanımlayan bileşen aşağıdakilerden hangisidir?

Margin (Dış boşluk)

Border (Kenarlık)

Content (İçerik)

Padding (İç boşluk)

Width (Genişlik)

Açıklama:

CSS Kutu Modeli'nde (Box Model), bir HTML öğesinin İçerik (Content) alanını çevreleyen ve Kenarlık (Border) alanından içeride kalan boşluk, Dolgu (Padding) olarak tanımlanır. Padding, içeriğin kenarlığa ne kadar yakın olacağını belirleyen iç boşluktur. Padding uygulandığında kutunun görünen boyutu artar.

Doğru Cevap: D

Soru 7

Tabloları biçimlendirirken, komşu hücre kenarlıklarının tek bir çizgi halinde birleşmesini sağlayarak tabloların görsel karmaşasını azaltan CSS özelliği aşağıdakilerden hangisidir?

border-collapse

border

border-color

padding

caption-side

Açıklama:

Tablolarda komşu hücre kenarlıklarının ayrık çizgiler halinde değil, tek bir birleşik çizgi halinde görünmesini sağlamak için border-collapse özelliği kullanılır ve buna collapse değeri atanır. Bu, özellikle veri tablolarının daha temiz, sade ve görsel olarak daha az karmaşık görünmesini sağlar.

Doğru Cevap: A

Soru 8

Metin biçimlendirme özelliklerinden biri olan letter-spacing, metnin hangi tipografik unsurunu kontrol eder?

Satırlar arasındaki dikey boşluk.

Kelimeler arasındaki boşluk.

Paragrafın ilk satırının girintisi.

Bireysel harfler arasındaki yatay boşluk.

Metnin büyük/küçük harfe dönüştürülmesi.

Açıklama:

Metin biçimlendirme özelliklerinden olan letter-spacing, bir kelime veya cümle içindeki her bir karakter (harf) arasındaki boşluğu yatay düzlemde kontrol etmeye yarar. Pozitif bir değer, karakterleri birbirinden uzaklaştırırken, negatif bir değer karakterleri yakınlaştırır.

Doğru Cevap: D

Soru 9

CSS’te, vw (viewport width) ve vh (viewport height) gibi birimlerin temel özelliği nedir ve modern duyarlı (responsive) tasarımlarda neden tercih edilirler?

Sabit olmaları ve her cihazda aynı sonucu vermeleri.

Yalnızca kök (html) elemanının font boyutuna göre hesaplanmaları.

Geleneksel matbaa ölçüsü kullanmaları (point/pt).

Sadece metin rengini değiştirmek için kullanılmaları.

Cihazın ekran genişliğine veya yüksekliğine göre orantısal olarak değişmeleri.

Açıklama:

vw (viewport width) ve vh (viewport height) birimleri, modern duyarlı (responsive) tasarım için hayati önem taşır. Bu birimlerin temel özelliği, uzunluk değerlerini cihazın görünüm alanının (viewport) boyutuna göre yüzdesel olarak belirlemesidir. Örneğin, 1vw, ekran genişliğinin %1'ine eşittir. Bu sayede, bir öğe farklı ekran boyutlarına göre kendini otomatik olarak ölçekleyebilir.

Doğru Cevap: E

Soru 10

Bir HTML öğesinin çevresindeki diğer kutularla arasındaki mesafeyi belirleyen ve Kutu Modeli'nin en dış katmanını oluşturan bileşen hangisidir?

Border

Margin

Padding

Content

Box-sizing

Açıklama:

CSS Kutu Modeli'nde bir HTML öğesinin çevresindeki diğer kutularla arasındaki mesafeyi belirleyen ve Kutu Modeli'nin en dış katmanını oluşturan bileşen Kenar Boşluğu (Margin)'dur. Margin, kenarlık (border) ile sayfa üzerindeki diğer öğeler arasındaki dış boşluğu tanımlar ve öğelerin yerleşim düzenini kontrol eder.

Doğru Cevap: B

Ünite 7

Soru 1

Flexbox hangi düzenler için en uygundur?

Tablo tabanlı düzenler

İki boyutlu düzenler

Tek boyutlu düzenler

Responsive düzenler

Grid sistemleri

Açıklama:

Flexbox (Esnek Kutu Modeli), öğeleri tek bir yönde (ya yatayda bir satır ya da dikeyde bir sütun) düzenlemek için tasarlanmıştır. Bu nedenle, bileşenler içindeki içerik hizalamaları, navigasyon çubukları gibi tek boyutlu düzenler için en uygundur. İki boyutlu (satır ve sütun aynı anda) düzenleme gerektiren yapılar için Grid sistemi tercih edilmelidir.

Doğru Cevap: C

Soru 2

Flexbox içinde öğelerin yatay hizalanmasını hangi özellik belirler?

align-items

justify-content

flex-direction

order

align-self

Açıklama:

Flexbox’ta öğelerin ana eksen (main axis) boyunca hizalanmasını sağlayan özellik justify-content'tir. Bu özellik, öğeler arasında veya etrafında boşluk dağıtımı yaparak (örneğin: space-between, center, flex-start) yatay hizalamayı yönetir. Flex konteyneri flex-direction: row; ise, bu özellik yatay hizalamayı sağlar.

Doğru Cevap: B

Soru 3

Flexbox’ta öğelerin görsel sırasını değiştirmek için hangi özellik kullanılır?

flex-grow

justify-items

flex-shrink

order

gap

Açıklama:

Flexbox, HTML yapısı ne olursa olsun, öğelerin görsel sırasını değiştirmeye olanak tanır. Bu, flex öğelerine uygulanan order özelliği ile sağlanır. order özelliği, öğelere pozitif veya negatif tamsayı değerler atanmasını sağlar; daha düşük değere sahip öğeler, daha yüksek değere sahip öğelerden önce görüntülenir, böylece kaynak sırasından bağımsız bir düzen oluşturulabilir.

Doğru Cevap: D

Soru 4

Bir öğenin diğerlerinden daha fazla yer kaplaması için hangi özellik kullanılır?

flex-shrink

flex-grow

align-self

justify-content

flex-basis

Açıklama:

Bir flex öğesinin, mevcut boş alandan ne kadar pay alacağını belirlemek için flex-grow özelliği kullanılır. Bu özelliğe verilen sayısal değer, öğenin diğer kardeş öğelere göre ne kadar oranda büyüyeceğini ifade eder. Örneğin, bir öğeye flex-grow: 2; verilirse, diğerlerine göre iki kat fazla boş alan kaplamaya çalışır.

Doğru Cevap: B

Soru 5

Grid sisteminde sütunları tanımlamak için kullanılan özellik hangisidir?

grid-template-rows

grid-gap

grid-template-columns

grid-area

grid-auto-flow

Açıklama:

CSS Grid Layout sisteminde, ana kapsayıcı üzerindeki sütunların sayısını, genişliğini ve yapısını tanımlamak için kullanılan özellik grid-template-columns'dur. Benzer şekilde satırları tanımlamak için grid-template-rows kullanılır. Bu özellikler, grid yapısının temel iskeletini oluşturur.

Doğru Cevap: C

Soru 6

Grid’de öğeler arasındaki boşluk hangi özellik ile ayarlanır?

grid-gap

padding

margin

justify-content

align-content

Açıklama:

Grid düzende, satırlar ve sütunlar arasındaki boşluğu (ara boşluk) belirlemek için gap özelliği kullanılır. Bu özellik, hem row-gap hem de column-gap değerlerini kısaltma olarak içerir ve öğeler arası net ayrımı sağlar (eski standartlarda grid-gap olarak da bilinirdi).

Doğru Cevap: A

Soru 7

Grid sisteminde “fr” birimi neyi ifade eder?

Piksel ölçüsü

Yüzde

Rem birimi

Em birimi

Esnek pay

Açıklama:

Grid sisteminde "fr" birimi, "Fractional Unit" (Kesirli Birim) anlamına gelir. Bu birim, grid kapsayıcısının kullanılabilir durumdaki kalan boşluk miktarının oranını belirtir. Bu, sütun ve satır boyutlarının ekran genişliğine göre esnek ve orantılı olarak ayarlanmasını sağlar. Örneğin, grid-template-columns: 1fr 1fr; iki eşit genişlikte sütun oluşturur.

Doğru Cevap: E

Soru 8

Bir öğeyi 2 sütun boyunca genişletmek için doğru yazım hangisidir?

grid-column: 2;

grid-template: span 2;

grid-row: 2;

grid-column: span 2;

grid-auto-flow: column;

Açıklama:

Bir grid öğesini birden fazla sütun boyunca genişletmek (span) için grid-column özelliği içinde span anahtar kelimesi kullanılır. Doğru yazım grid-column: span 2; şeklindedir ve bu, öğenin başladığı noktadan itibaren 2 sütun boyunca yer kaplamasını sağlar.

Doğru Cevap: D

Soru 9

Media queries hangi yapı ile tanımlanır?

@font-face

@media

@keyframes

@responsive

@container

Açıklama:

Duyarlı (Responsive) tasarımın temelini oluşturan Media Queries, belirli cihaz özelliklerine (ekran genişliği, çözünürlük, yönelim vb.) bağlı olarak CSS stillerini uygulamak için kullanılır. Bu yapı, @media kuralı ile tanımlanır ve parantez içinde koşullar belirtilir (örneğin, @media (max-width: 768px)).

Doğru Cevap: B

Soru 10

Küçük etkileşimlerde kullanılan geçiş efektleri hangi özellik ile yapılır?

Animation

Keyframes

@media

Transform

transition

Açıklama:

CSS'te bir özelliğin bir durumdan diğerine (örneğin hover durumuna) yumuşak ve animasyonlu bir şekilde geçmesini sağlayan özellik transition'dır. Bu özellik, geçişin süresini (duration), hangi özellikleri (property) etkileyeceğini ve hangi hız eğrisiyle (timing-function) gerçekleşeceğini tanımlar, böylece kullanıcıya daha akıcı bir deneyim sunar.

Doğru Cevap: E

Ünite 8

Soru 1

Esnek öğeler, ……… ile başlayıp ………. kadar kutunun içine yerleştirilir.
Yukardaki cümlede boş bırakılan yerlere aşağıdakilerden hangisi gelmelidir?

yukarı - aşağıya

kapsayıcı - kutuya

kutu - kapsayıcıya

son (main-end) - başlangıça (main-start)

başlangıç (main-start) - sona (main-end)

Açıklama:

Esnek öğeler, onları barındıran üst öğe esnek konteyner olarak tanımlandığında, bu konteynerin içine yerleştirilir. Bir öğeyi esnek konteyner yapmak için CSS display özelliği kullanılır ve bu özellik için temel değerler display: flex; (blok seviyesinde) ve display: inline-flex; (satır içi seviyesinde) olarak belirlenir. Bu tanım, esnek kutunun başlangıcını ve sonunu ifade eden iki temel tanımlama biçimini belirtir. (Varsayılan Cevap: display: flex ve display: inline-flex)

Doğru Cevap: E

Soru 2

Aşağıdakilerden hangisi Flexbox kapsamında kullanılan özellikler arasında yer almaz?

align-content

align-items

align-self

border

flex

Açıklama:

Flexbox, tek boyutlu yerleşimler için kullanılan özel bir CSS modülüdür. Bu kapsamda justify-content, align-items, flex-direction ve flex-wrap gibi özellikler kullanılır. Eğer seçeneklerde float, grid-template-columns veya column-count gibi Grid veya eski yerleşim modellerine ait özellikler yer alıyorsa, bunlar Flexbox kapsamında kullanılan özellikler arasında yer almaz.

Doğru Cevap: D

Soru 3

Flexbox’ta öğeleri dikey hizalamak için aşağıdakilerden hangisi kullanılır?

align-content

flex-wrap

flex

order

flex-grow

Açıklama:

Flexbox'ta öğelerin hizalanması iki eksen üzerinde yapılır: Ana Eksen ve Çapraz Eksen. Varsayılan olarak Ana Eksen yataydır. Öğeleri dikey olarak (Çapraz Eksen üzerinde) hizalamak için align-items özelliği kullanılır. Bu özellik, tek bir satırdaki tüm esnek öğelerin Çapraz Eksen boyunca nasıl yerleştirileceğini kontrol eder.

Doğru Cevap: A

Soru 4

align-items özelliği justify-content‘in ………. eksende yaptığı işlemleri …….. eksende hizalama yapmak için kullanılır.
Yukarıdaki cümlede boş bırakılan yerlere gelebilecek en uygun kelimeler hangisidir?

yatay - dikey

dikey - dikey

dikey - yatay

yatay - yatay

düz - dikey

Açıklama:

justify-content özelliği, esnek öğeleri Ana Eksen (Main Axis) üzerinde hizalama ve boşluk dağıtımı için kullanılırken, align-items özelliği ise Çapraz Eksen (Cross Axis) üzerinde hizalama yapmak için kullanılır. Bu nedenle boşluklara sırasıyla Ana ve Çapraz gelmelidir.

Doğru Cevap: A

Soru 5

Aşağıdakilerden hangisi Flexbox özelliklerinden align-self’in değerleri arasında yer almaz?

auto

baseline

flex-start

stretch

margin

Açıklama:

align-self, tek bir esnek öğenin Çapraz Eksen hizalamasını belirler. Kabul edilen değerler arasında auto, flex-start, flex-end, center, baseline ve stretch bulunur. Eğer seçeneklerde space-between veya space-around gibi aralık dağıtımı yapan değerler varsa, bunlar align-content veya justify-content için geçerlidir, ancak align-self için geçerli değildir.

Doğru Cevap: E

Soru 6

CSS Flexbox özelliklerinden flex-directory varsayılan yerleşim yönü aşağıdakilerden hangisidir?

dikey

yatay

dikey ve yatay

yukarı

aşağı

Açıklama:

flex-direction özelliği, esnek öğelerin yerleştirildiği Ana Eksenin yönünü belirler. Bu özelliğin varsayılan (default) değeri row'dur. Bu, öğelerin soldan sağa (yatay olarak) sıralanacağı anlamına gelir.

Doğru Cevap: B

Soru 7

CSS Flexbox’ta birden çok satıra yaymak için hangi özellik kullanılır?

column

Align-item

Align-content

Flex-wrap

Flex-grow

Açıklama:

CSS Flexbox'ta öğelerin mevcut alana sığmadıklarında yeni bir satıra geçerek birden çok satıra yayılmasını sağlamak, yani kaydırma (wrapping) işlemini kontrol etmek için flex-wrap özelliği kullanılır. Varsayılan değeri nowrap'tır.

Doğru Cevap: D

Soru 8

CSS Flexbox’ta flex-direction ve flex-wrap özelliklerini tek seferde tanımlamak için hangi özellik kullanılır?

Justify-content

Flex-start

Flex-flow

Flex-end

space-between

Açıklama:

flex-direction ve flex-wrap özelliklerini tek bir CSS bildirimiyle tanımlamak için kullanılan kısayol (shorthand) özellik flex-flow'dur. Örneğin: flex-flow: row wrap;.

Doğru Cevap: C

Soru 9

Aşağıdakilerden hangisi CSS Flexbox özelliklerinden justify-content’in değerleri arasında yer alır?

caption-side

center

transition

animation-direction

perspective

Açıklama:

justify-content, öğelerin Ana Eksen üzerindeki dağılımını yönetir. Kabul edilen geçerli değerler arasında flex-start, flex-end, center, space-between, space-around ve space-evenly yer alır. space-between, ilk ve son öğeleri konteynerin uçlarına yaslayarak aradaki boşlukları eşit olarak dağıtan bir değerdir.

Doğru Cevap: B

Soru 10

CSS Flexbox özelliklerinden order varsayılan aşağıdaki hangi değeri alır?

-1

0 (sıfır)

Açıklama:

order özelliği, esnek öğelerin görsel sırasını değiştirmek için kullanılır. Bu özellik varsayılan olarak tüm esnek öğelerde 0 (sıfır) değerini alır. Bu, öğelerin kaynak kod sırasına göre görünmesi demektir.

Doğru Cevap: B

Soru 11

Çok satırlı yapılarda ögeleri çapraz eksende (dikey) hizalamak için kullanılan align-content değerlerinden biri aşağıdakilerden hangisidir?

space-around

order

flex-wrap

flex-grow

flex-direction

Açıklama:

Çok satırlı Flexbox konteynerlerde (yani flex-wrap: wrap kullanıldığında) esnek satırları Çapraz Eksen boyunca hizalamak için align-content özelliği kullanılır. Bu özelliğin değerleri arasında stretch (varsayılan), flex-start, flex-end, center, space-between ve space-around bulunur. Örneğin space-around, her satırın etrafındaki boşluğu eşit olarak dağıtır.

Doğru Cevap: A

Soru 12

Aaşağıdakilerden hangisi Flexbox Modeli'ne ait olan bir avantajdır?

Bazı tarayıcılar tarafından desteklenir.

Ögelerde boyutlandırma yoktur.

Ögeler hizalanamaz.

Hemen hemen tüm tarayıcılar tarafından desteklenir.

Duyarlı ve uyarlanabilir web tasarımı sürecini zorlaştırır.

Açıklama:

Flexbox Modeli, özellikle tek boyutlu yerleşimlerde (bir satır veya bir sütun) öğeleri hizalamayı ve boşlukları dağıtmayı son derece kolaylaştırdığı için büyük bir avantaj sağlar. Geleneksel CSS yöntemleriyle zor olan dikey ortalama (vertical centering) gibi işlemleri hızlıca gerçekleştirebilir olması, en büyük avantajlarından biridir.

Doğru Cevap: D

Soru 13

Aşağıdakilerden hangisi CSS (Cascading Style Sheets- Basamaklı Stil Sayfaları)’de Flexbox özellikleri arasında yer alır?

baseline

center

stretch

flex-basis

auto

Açıklama:

CSS'te Flexbox (Esnek Kutu Modeli) tek boyutlu yerleşimler için bir dizi özel özellik sunar. Bu özellikler arasında flex-direction, flex-wrap, justify-content ve align-items bulunur. Bu özellikler, öğelerin Ana ve Çapraz Eksenler boyunca nasıl yerleştirileceğini ve dağıtılacağını kontrol eder.

Doğru Cevap: D

Soru 14

CSS Flexbox flex-wrap özelliği hangi işlem için kullanılır?

Esnek kutu düzenin rengini değişmek için

Esnek kutu düzeninde dikey hizalama için

Esnek kutu düzeninde yatay hizalama için

Esnek kutu düzeninde birden çok satıra yaymak için

Esnek kutu düzeninde ki metinleri büyütmek için

Açıklama:

flex-wrap özelliği, esnek öğelerin esnek konteynerin genişliğini aştığında ne yapacağını belirler. Bu özellik, öğelerin tek bir satırda kalmak yerine (nowrap değeri), birden çok satıra kaydırılması (wrap) işlemini kontrol etmek için kullanılır.

Doğru Cevap: D

Soru 15

Flexbox özelliklerinden order özelliğinin işlevi ile ilgili olarak aşağıdakilerden hangisi doğrudur?

Esnek kapsayıcı içindeki esnek kutu ögelerinin çapraz eksende hizalamasını ayarlar.

Esnek kapsayıcı içindeki ögelerin kaçıncı sırada görünmesi gerektiğini belirler.

Ögenin, esnek kutu içindeki diğer ögelere göre nasıl küçüleceğini belirtir.

Ögelerin yönünü belirtir.

Esnek bir uzunluğun bileşenlerini belirtir.

Açıklama:

Flexbox’ta order özelliğinin temel işlevi, esnek öğelerin HTML kaynak kodundaki sırasından bağımsız olarak görsel olarak yeniden sıralanmasını sağlamaktır. Bu, erişilebilirlik (accessibility) veya SEO'yu etkilemeden sadece görsel sunumu değiştirmeye olanak tanır.

Doğru Cevap: B

Soru 16

Justify Content değeri ve açıklaması ile ilgili olarak aşağıdakilerden hangisi yanlıştır?

flex-start: Ögeleri sola dayar ve soldan sağa hizalar.

flex-end: Ögeler sağa dayalı (bitiş noktası) olarak hizalanır.

center: Ögeler sola hizalanır.

space-between: İlk öge sola, son öğe sağa olacak şekilde ögeler eşit olarak hizalanır.

space-around: İlk ve son öge dışındaki ögelerin arasında eşit boşluklar bırakılır.

Açıklama:

justify-content değerleri, Ana Eksen üzerindeki öğe dağılımını kontrol eder. Örneğin, space-between, ilk öğeyi başlangıca ve son öğeyi sona yaslayıp aradaki boşlukları eşitler. Eğer bir açıklama space-between değerini, tüm öğelerin etrafına eşit boşluk koyar şeklinde tanımlıyorsa (bu tanım space-around için geçerlidir), bu açıklama yanlış olur.

Doğru Cevap: C

Soru 17

......... esnek ögelerin yerleştirildiği yönü belirler.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

Align-items

Flex-basis

Align-content

Flex

Flex-direction

Açıklama:

Esnek öğelerin yerleştirildiği yönü ve dolayısıyla Ana Eksenin konumunu belirleyen özellik flex-direction'dır. Bu özellik row, row-reverse, column veya column-reverse değerlerini alarak yerleşim akışını kontrol eder.

Doğru Cevap: E

Ünite 9

Soru 1

Aşağıdakilerden hangisi “Navbar” yapısı tasarlanırken kullanılabilecek elementlerden biri değildir?

Açıklama:

Modern web tasarımında, gezinme çubukları (Navbar) oluşturmak için genellikle semantik HTML ve liste yapıları kullanılır (

ve <a>). <header> etiketi genellikle Navbar'ı çevrelemek için kullanılır. Ancak, <table> etiketi sayfa düzeni veya gezinme çubuğu yapısı tasarlamak için kesinlikle kullanılmaz; bu etiket sadece verileri tablo halinde göstermek için tasarlanmıştır.

Doğru Cevap: E

Soru 2

Web sayfası içerisinde dikey olarak oluşturulmuş gezinme çubuğu yapısına ……..…………… adı verilir.
Cümledeki boşluğa aşağıdakilerden hangisi getirilmelidir?

Horizontal Navbar

Vertical Navbar

Navbar

Sticky NavBar

Fixed Navbar

Açıklama:

Web sayfası içerisinde bağlantı elemanlarının alt alta sıralandığı, genellikle sayfanın kenarında konumlandırılan gezinme çubuğu yapısına Dikey Gezinme Çubuğu adı verilir. Bu yapı, genellikle liste elemanlarının varsayılan display: block özelliği korunarak oluşturulur.

Doğru Cevap: B

Soru 3

Web sayfası içerisinde yatay olarak oluşturulmuş gezinme çubuğu yapısına ……..…………… adı verilir.
Cümledeki boşluğa aşağıdakilerden hangisi getirilmelidir?

Horizontal Navbar

Vertical Navbar

Navbar

Sticky NavBar

Fixed Navbar

Açıklama:

Web sayfası içerisinde bağlantı elemanlarının yan yana sıralandığı, genellikle sayfanın üst kısmında konumlandırılan gezinme çubuğu yapısına Yatay Gezinme Çubuğu adı verilir. Bu yapıyı oluşturmak için liste elemanlarına float: left, display: inline-block ya da display: flex gibi özellikler uygulanır.

Doğru Cevap: A

Soru 4

Aşağıdakilerden hangisi yatay gezinme çubuğuna ait elemanlar arasında yatay bir düzen oluşturmak için kullanılan stil tanımıdır?

pull

offset

float

margin

padding

Açıklama:

Yatay bir gezinme çubuğu oluşturulurken, liste öğelerinin (li) yan yana gelmesini sağlamak için kullanılan geleneksel ve yaygın stil tanımlarından biri float: left'tir. Bu, öğelerin sola doğru kaydırılmasını sağlayarak yatay bir düzen oluşturur. Modern yöntemlerde ise display: flex sıklıkla tercih edilir.

Doğru Cevap: C

Soru 5

Aşağıdakilerden hangisi bir resim galerisine responsive özelliği kazandırmak için kullanılır?

Media Query

JavaScript

JQuery

CSS Grid

CSS Container

Açıklama:

Bir resim galerisine responsive (duyarlı) özellik kazandırmak için resimlerin genişlik değerlerinin piksel yerine % (yüzde) birimleri kullanılarak tanımlanması gerekir. Bu sayede ekran boyutları değiştiğinde resimler orantılı olarak yeniden boyutlandırılır. Ayrıca CSS Flexbox veya Grid kullanımı, farklı ekran çözünürlüklerinde düzenin korunmasına yardımcı olur.

Doğru Cevap: A

Soru 6

……………….. x ve y ekseni bir uzayda html elementlerinin yerini değiştirme, döndürmek, ölçeklendirmek ve çarpıtmak için kullanılır.
Cümledeki boşluğa aşağıdakilerden hangisi getirilmelidir?

2D Transform

2D Translate

2D Rotate

2D Scale

2D Skew

Açıklama:

CSS Transform Metodu (Dönüşümler), x ve y ekseni üzerindeki html elementlerinin konumunu değiştirme (translate), döndürme (rotate), ölçeklendirme (scale) ve çarpıtma (skew) gibi görsel manipülasyonları gerçekleştirmek için kullanılır. Bu metod elementlere dinamik efektler kazandırır.

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi bir nesnenin x ve y ekseni üzerindeki konumunu belirlenen değerler doğrultusunda değiştirmek için kullanılır?

Rotate

Scale

Skew

SkewX

Translate

Açıklama:

Bir nesnenin x ve y ekseni üzerindeki konumunu, belirlenen değerler doğrultusunda kaydırarak değiştirmek için transform: translate() fonksiyonu kullanılır. Bu fonksiyon, nesneyi bulunduğu yerden hareket ettirir ancak normal belge akışını bozmaz.

Doğru Cevap: E

Soru 8

Aşağıdakilerden hangisi Transitions Metodu'na ait özelliklerden biri değildir?

Transition-delay

Transition-duration

Transition-property

Transition-timing-function

Transition-timed-function

Açıklama:

Transitions Metodu'na ait temel özellikler şunlardır: transition-property (geçiş yapılacak özellik), transition-duration (geçiş süresi), transition-timing-function (hız eğrisi) ve transition-delay (başlangıç gecikmesi). Bu dört özellik dışında sunulan herhangi bir seçenek (örneğin 'transition-mode' veya 'transition-style') bu metoda ait standart bir özellik değildir.

Doğru Cevap: E

Soru 9

“transition-delay” özelliğinin işlevi aşağıdakilerden hangisinde doğru verilmiştir?

Geçiş işlemi başlatılmadan önce saniye cinsinden ne kadar süre beklenileceğini belirlemek için kullanılır

Geçiş işleminin ne kadar sürede tamamlanacağını belirlemek için kullanılır

Geçiş işleminin hangi elementin özelliğine uygulanacağını belirlemek için kullanılır

Geçiş işleminin hız eğrisini belirlemek için kullanılır

Geçiş işlemi başlatılmadan önce dakika cinsinden ne kadar süre beklenileceğini belirlemek için kullanılır

Açıklama:

transition-delay özelliği, bir CSS geçiş efektinin tetiklenmesinden sonra, bu efektin fiilen başlaması için gereken bekleme süresini (gecikme süresini) saniye veya milisaniye cinsinden belirler.

Doğru Cevap: A

Soru 10

Aşağıdakilerden hangisi 2 boyutlu dönüştürme yöntemlerinden biri değildir?

rotate

grow

scaleY

skewX

matrix

Açıklama:

CSS'teki 2 boyutlu dönüştürme yöntemleri arasında translate() (konum kaydırma), rotate() (döndürme), scale() (ölçekleme) ve skew() (eğme) bulunur. perspective özelliği ise 3 boyutlu (3D) dönüşümlerde derinlik etkisini ayarlamak için kullanılır ve bir 2D dönüştürme yöntemi değildir.

Doğru Cevap: B

Soru 11

Aşağıdakilerden hangisi geçiş(transition) özellikleri arasında yer almaz?

transition-delay

transition-property

directional

ease-in

ease-in-out

Açıklama:

Geçiş (transition) özellikleri; transition-property, transition-duration, transition-timing-function ve transition-delay'dir. Bu dört özellik dışında belirtilen bir değer (örneğin, 'transition-style' gibi standart olmayan bir özellik) geçiş özellikleri arasında yer almaz.

Doğru Cevap: C

Soru 12

Aşağıdakilerden hangisi bir nesneyi saat yönünde veya saat yönünün tersine yönde döndürmek için kullanılır?

Translate

Rotate

Scale

ScaleX

ScaleY

Açıklama:

Bir nesneyi x ve y düzleminde, belirlenen bir açı değeri kadar (örneğin 45deg) saat yönünde veya saat yönünün tersine döndürmek için transform: rotate() fonksiyonu kullanılır. Derece değeri pozitif olduğunda saat yönünde, negatif olduğunda tersine döndürme gerçekleştirilir.

Doğru Cevap: B

Soru 13

Aşağıdakilerden hangisi bir nesnenin x ve y eksenindeki eğimini artırıp azaltmak için kullanılır?

SkewX

SkewY

Scale

Skew

Translate

Açıklama:

Bir nesnenin x ve y eksenlerindeki eğimini (çarpıklığını) derece cinsinden artırıp azaltmak için transform: skew() fonksiyonu kullanılır. Bu işlem, nesnenin paralelkenar şekline benzer bir görünüme kavuşmasını sağlar.

Doğru Cevap: D

Soru 14

Aşağıdakilerden hangisi geçiş işleminin hız eğrisini belirlemek için kullanılır?

transition-delay

linear

transition-duration

transition-property

transition-timing-function

Açıklama:

Geçiş işleminin başlangıcından bitişine kadar olan hız değişimini ve akışını belirlemek için transition-timing-function özelliği kullanılır. Bu özellik, animasyonun yumuşak (ease), sabit (linear) veya yavaş başlayıp hızlanan (ease-in) gibi farklı hız eğrileriyle çalışmasını sağlar.

Doğru Cevap: E

Soru 15

....... web sayfası üzerindeki menü ya da gezinme çubuğu olarak adlandırılabilir.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

Navbar

Image Gallery

2D Transform

Transitions

Scale

Açıklama:

Web sayfası üzerindeki menü ya da gezinme çubuğu olarak adlandırılan ve kullanıcıların sitedeki farklı sayfalara kolayca erişimini sağlayan yapıya Navbar (Gezinme Çubuğu) denir. Navbar, sitenin navigasyon (yönlendirme) iskeletini oluşturur.

Doğru Cevap: A

Ünite 10

Soru 1

Aşağıdakilerden hangisi Bootstrap kullanmanın avantajlarından birisi değildir?

Responsive (Duyarlı) sayfa tasarımlarının yapılması

Tasarım işlemlerini standardize etmesi

Aynı işleve sahip kodların tekrar yazılmasına gerek duyulmaması

Tasarım işlemlerini yavaşlatması

Tasarım işlemlerini daha kolay ve hızlı yapılması

Açıklama:

Bootstrap kullanmanın temel avantajları arasında hızlı geliştirme, duyarlı (responsive) tasarım desteği ve önceden tanımlanmış bileşenlerin varlığı bulunur. Genellikle avantaj olmayan durum, projeye dahil edildiğinde dosya boyutunu artırması ve bu yüzden gereksiz kod yüküne yol açabilmesidir. Ayrıca, yoğun özelleştirme gerektiren projelerde varsayılan stilleri değiştirmek zor olabilir.

Doğru Cevap: D

Soru 2

Aşağıdakilerden hangisi Bootstrap v5 tarafından desteklenen internet tarayıcılar arasında yer almaz?

Internet Explorer

Chrome

Microsoft Edge

Firefox

Opera

Açıklama:

Bootstrap v5, modern web standartlarına odaklandığı için eski tarayıcılardan bazılarını desteklemeyi bırakmıştır. Bu kapsamda, Internet Explorer (IE), Bootstrap v5 tarafından resmen desteklenmeyen internet tarayıcıları arasında yer alır. V5, güncel Chrome, Firefox, Edge, Safari ve Opera sürümlerini destekler.

Doğru Cevap: A

Soru 3

HTML elementler üzerinde Bootstrap özellikleri ......... tanımı ile kullanılır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

data

style

class

head

link

Açıklama:

Bootstrap, bir CSS çatısı (framework) olduğu için, HTML elementlerine görsel stil ve işlevsellik kazandırmak amacıyla class (sınıf) tanımı ile kullanılır. Kullanıcılar, elementlerin class="..." niteliğine Bootstrap tarafından sağlanan önceden tanımlanmış sınıfları eklerler (Örn: class="btn btn-primary").

Doğru Cevap: C

Soru 4

I. Breakpoints (Kesme Noktaları)
II. Containers (Kapsayıcılar)
III. Grid (Izgara)
IV. Tables (Tablolar)
Yukarıdakilerden hangisi ya da hangileri Layout (Düzen) Sistemi'nin bileşenleri arasında yer alır?

Yalnız I

Yalnız III

I ve II

I, II ve III

I, II ve IV

Açıklama:

Bootstrap'in Layout (Düzen) Sistemi, web sayfasının genel yapısını ve duyarlılığını sağlamak için kritik öneme sahip üç ana bileşenden oluşur: Containers (Kapsayıcılar), Breakpoints (Kesme Noktaları) ve Grid (Izgara) sistemi (I, II, ve III). Tables (Tablolar) ise genellikle bir içerik bileşeni olarak Layout sisteminin kendisinin değil, sistemin içinde kullanılan bir elementin stilidir.

Doğru Cevap: D

Soru 5

Aşağıdakilerden hangisi Breakpoint (Kesme Noktası) tanımlarından birisi değildir?

xxl

Açıklama:

Bootstrap v5'te kullanılan standart Breakpoint (Kesme Noktası) tanımları şunlardır: sm (small), md (medium), lg (large), xl (extra large) ve xxl (extra extra large). Bu tanımların dışında yer alan veya standart dışı bir kısaltma doğru bir breakpoint tanımı değildir. Kesme noktaları, duyarlı tasarımlarda stil geçişlerinin ne zaman yapılacağını belirler.

Doğru Cevap: A

Soru 6

Aşağıdakilerden hangisi kullanılan cihaz ya da ekranı tamamen kapsayan "container" tanımıdır?

container

container-fluid

container-sm

container-full

container-xxl

Açıklama:

Bootstrap’te iki ana kapsayıcı türü vardır. container sınıfı, belirlenen kesme noktalarına göre değişen maksimum genişliğe sahiptir. Buna karşılık, container-fluid sınıfı, kullanılan cihazın ya da ekranın genişliğini tamamen kapsayan (%100 genişlik) kapsayıcı tanımıdır.

Doğru Cevap: B

Soru 7

Aşağıdakilerden hangisi bir HTML tablodaki satırları bir açık bir koyu renkte olacak şekilde renklendirir?

table-colored

row-colored

table-striped

row-striped

table-bordered

Açıklama:

Bir HTML tablodaki satırların bir açık bir koyu renkte, yani şeritli görünmesi (çizgili satırlar) için kullanılan Bootstrap sınıfı .table-striped sınıfıdır. Bu özellik, büyük veri setlerinin daha kolay okunabilmesini sağlar.

Doğru Cevap: C

Soru 8

Aşağıdakilerden hangisi bir tablonun satır ve sütunlarına kenarlık eklemek için kullanılan özelliktir?

bordered

table-bordered

col-bordered

row-bordered

cell-bordered

Açıklama:

Bir tablonun tüm satır ve sütunlarına kenarlık eklemek (yani hücre kenarlıklarını belirginleştirmek) için kullanılan Bootstrap özelliği .table-bordered sınıfıdır. Bu sınıf, tabloya standart kenarlıklar ekleyerek her hücreyi görsel olarak ayırır.

Doğru Cevap: B

Soru 9

Aşağıdakilerden hangisi bir HTML tabloya Responsive özelliği kazandırmak için kullanılır?

responsive

table-responsive

adaptive

table-adaptive

responsive adaptive

Açıklama:

HTML tabloya Responsive (Duyarlı) özellik kazandırmak için tabloyu saran bir <div> elementine .table-responsive sınıfı uygulanır. Bu sınıf sayesinde, küçük ekranlarda tablo genişliği ekrana sığmadığında otomatik olarak yatay kaydırma çubuğu belirir.

Doğru Cevap: B

Soru 10

Aşağıdakilerden hangisi Bootstrap v5 içerisinde yer almaz?

Html

Css

JavaScript

JQuery

TypeScript

Açıklama:

Bootstrap v5, performansı artırmak ve modernleştirmek amacıyla bazı eski bileşenleri ve bağımlılıkları kaldırmıştır. Kaldırılan temel bileşenlerden biri, büyük başlıklar ve dikkat çekici içerikler için kullanılan Jumbotron bileşenidir. V5’te bu bileşenin yerine utility sınıfları kullanılarak benzer tasarımlar yapılabilir.

Doğru Cevap: D

Soru 11

Boostrap v5 versiyonu, windows masaüstü ortamında aşağıdaki internet tarayıcılarından hangisi tarafından desteklenmez?

Safari

Firefox

Opera

Microsoft Edge

Chrome

Açıklama:

Bootstrap v5, modern web standartlarını destekleyen tarayıcıları hedefler. Windows masaüstü ortamında geçmişte yaygın olarak kullanılan ancak modern standartları takip etmeyen Internet Explorer (IE), Bootstrap v5 tarafından resmi olarak desteklenmez.

Doğru Cevap: A

Soru 12

1400 px ölçüsünden büyük kesme noktası tipi aşağıdakilerden hangisidir?

Small (Küçük)

Medium (Orta)

Large (Büyük)

Extra large (Ekstra büyük)

Extra extra large (Ekstra ekstra büyük)

Açıklama:

Bootstrap v5'teki kesme noktaları belirlenmiş piksel değerlerinden başlar. 1400 px ve bu ölçüden daha büyük ekranlar için tanımlanan kesme noktası tipi XXL (Extra Extra Large) olarak adlandırılır. Bu, en geniş masaüstü ekranlar için özelleştirme yapmayı sağlar.

Doğru Cevap: E

Soru 13

Aşağıdaki Breakpoints (Kesme Noktaları) ile ilgili ifadelerden hangisi yanlıştır?

12’lik ızgara yapısından oluşur.

Cihaza ait ekran ölçüsünü tespit ederek hangi kategoriye ait olduğunu belirler.

X-Small ekran boyutu için “xs” class tanımı kullanılır.

Small ekran boyutu için “sm” class tanımı kullanılır.

Medium ekran boyutu için “md” class tanımı kullanılır.

Açıklama:

Breakpoints (Kesme Noktaları), içerik düzeninin değiştiği ekran genişliği sınırlarını temsil eder ve duyarlı tasarımın temelidir. Bu noktaların temel özelliği, bir breakpoint’e uygulanan bir sınıfın, aksi belirtilmedikçe o noktadan sonraki tüm daha büyük ekranlara da uygulanmaya devam etmesidir (mobile-first yaklaşımı). Yanlış ifade, bu kuralı veya tanımlı genişlikleri yanlış belirten bir seçenek olacaktır.

Doğru Cevap: C

Soru 14

Aşağıdakilerden hangisi mouse (fare) imlecinin üzerinde bulunduğu satırı renklendirmek için kullanılan tablo yapısıdır?

table-mouseover

table-hover

table-responsive

table-cursor

table-pointer

Açıklama:

Bir tabloda kullanıcının mouse (fare) imlecinin üzerinde bulunduğu satırın rengini değiştirmesi (vurgulanması) özelliğine Hoverable özelliği denir. Bu özellik, tabloya .table-hover sınıfı eklenerek sağlanır ve kullanıcıya hangi satırı işaretlediğine dair görsel geri bildirim sunar.

Doğru Cevap: B

Soru 15

Aşağıdakilerden hangisi Windows işletim sistemi tarafından desteklenen internet tarayıcıları arasında yer almaz?

Chrome

Firefox

Microsoft Edge

Opera

Safari

Açıklama:

Bootstrap v5, modern web teknolojilerini destekleyen tarayıcıları hedefler. Windows işletim sistemi altında geçmişte bulunan ancak v5 tarafından desteği kesilen tarayıcı Internet Explorer (IE)’dır. Güncel Chrome, Firefox ve Microsoft Edge tarayıcıları desteklenir.

Doğru Cevap: E

Soru 16

Aşağıdakilerden hangisi bir HTML tabloya Hoverable özelliği kazandırmak için kullanılır?

table-responsive

responsive

table-bordered

table-hover

table-striped

Açıklama:

Bir HTML tabloya satırların üzerine gelindiğinde renginin değişmesi anlamına gelen Hoverable özelliği kazandırmak için tablo etiketine .table-hover sınıfı uygulanmalıdır. Bu, kullanıcının etkileşimde olduğu satırı belirginleştirir.

Doğru Cevap: D

Soru 17

Grid sistemi ile ilgili olarak aşağıdakilerden hangisi yanlıştır?

Satır ve sütunlardan oluşan flexbox ile geliştirilmiş Layout sisteminin bir parçasıdır.

Satıları tanımlamak için row, sütunları tanımlamak için ise col class tanımı kullanılır.

Her bir satırda toplam 20 adet sütun bulunmaktadır.

Sütunlar farklı oranlarla birleştirilerek veya kaydırılarak kullanılabilir.

Container yapısı altında çalışmaktadır.

Açıklama:

Bootstrap’in Grid Sistemi, içeriği hizalamak ve düzenlemek için kullanılan temel yapıdır. Bu sistem, her zaman 12 sütunlu bir yapı üzerine kuruludur ve bu 12 sütun içinde satırlar (rows) ve sütunlar (cols) tanımlanır. 'Bootstrap Grid sistemi varsayılan olarak 16 sütundan oluşur' gibi bir ifade kesinlikle yanlıştır, çünkü standart sütun sayısı 12’dir.

Doğru Cevap: C

Ünite 11

Soru 1

Aşağıdakilerden hangisi bir form elementinin responsive özelliği kazanabilmesi için alabileceği class tanımlarından biridir?

form-label-check

form-responsive

form-control

form-element

form-adaptive

Açıklama:

Bir form elementinin cihaz boyutuna duyarlı (responsive) ve standart Bootstrap görünümüne sahip olabilmesi için kullanılan temel sınıf tanımı form-control'dür. Bu sınıf, input, select ve textarea gibi elementlerin genişliğini %100 yapar ve estetik görünümünü ayarlar, böylece element tüm ekran boyutlarında düzgün görünür.

Doğru Cevap: C

Soru 2

Aşağıdakilerden hangisi bir form elementini kullanıcı etkileşimine kapatmak için kullanılan özelliktir?

Readonly

Disabled

Closed

Form-readonly

Form-disabled

Açıklama:

Bir form elementini kullanıcı etkileşimine kapatmak, yani elementin tıklanamaz veya düzenlenemez olmasını sağlamak için HTML'de disabled özelliği kullanılır. Bu özellik, hem görsel olarak elementin pasif görünmesini sağlar hem de elementin form gönderimine dahil edilmesini engeller.

Doğru Cevap: B

Soru 3

Aşağıdakilerden hangisi bir form elementini göründüğünden daha büyük göstermek için kullanılan class tanımıdır?

form-control-sm

form-control-xl

form-control-xxl

form-control-lg

form-larger

Açıklama:

Bootstrap form kontrollerinin standart boyutundan daha büyük görünmesini sağlamak için boyut sınıfları kullanılır. form-control-lg sınıfı (large - büyük) ile elementin yüksekliği ve yazı boyutu artırılarak daha büyük bir görsel sunum elde edilir. Küçük boyut için ise form-control-sm kullanılır.

Doğru Cevap: D

Soru 4

………………………… , satır (row) ve sütunlardan (col) oluşan bir ızgara (Grid) yapısı içerisinde elementlerin alt alta dizilerek konumlandırılmasıyla ortaya çıkan form şeklidir.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

Horizontal Form

Inline Form

Vertical Form

Legend Form

Fieldset

Açıklama:

Satır (row) ve sütun (col) yapısını kullanarak elementlerin yan yana ve alt alta hizalandığı form şekli, Bootstrap'in Izgara (Grid) yapısını kullanan formlardır. Özellikle etiket (label) ve kontrol elementlerinin aynı satırda konumlandırıldığı form yapısına Yatay Form (Horizontal Form) denir ve bu yapı tamamen sütun sınıfları (col-md-* gibi) kullanılarak oluşturulur.

Doğru Cevap: A

Soru 5

Aşağıdakilerden hangisi kullanıcının var olan seçenekler arasından en az bir adet seçim yapması istendiği durumda kullanılan form kontrolüdür?

checkbox

radio

selectbox

inputbox

dropbox

Açıklama:

Kullanıcının var olan seçenekler arasından yalnızca bir tanesini zorunlu olarak seçmesi istendiği durumlarda Radyo Butonları (Radio Buttons) kullanılır. Radyo butonları aynı name özelliğine sahip olduklarında birbirini dışlar (mutually exclusive) ve kullanıcının yalnızca tek bir seçim yapmasına olanak tanır.

Doğru Cevap: A

Soru 6

Aşağıdakilerden hangisi button, file, text ve check gibi bir HTML elementin sağına ya da solun başka bir HTML elementin eklenmesiyle meydana gelen bileşene verilen isimdir?

form-group

button-group

list-group

label-group

input-group

Açıklama:

Button, file, text veya check gibi bir temel HTML elementinin sağına ya da soluna metin, düğme veya ikon gibi başka bir elementin eklenmesiyle oluşturulan bileşene Giriş Grubu (Input Group) adı verilir. Bu bileşen, giriş alanlarına ek bilgi veya işlevsellik katmak için kullanılır.

Doğru Cevap: E

Soru 7

Aşağıdakilerden hangisi “Form Validation (Doğrulama)” işlemi için form elementinin class tanımına eklenmesi gereken ifadedir?

novalidate

validate-form

form-validate

form-valid

needs-validation

Açıklama:

Bootstrap ile form doğrulama (Validation) stillerini tetiklemek için, genellikle <form> etiketine was-validated sınıfı eklenir. Bu sınıf eklendiğinde, form içindeki tüm doğrulanabilir elemanlar (örneğin required özelliğine sahip olanlar) için geçerli (is-valid) veya geçersiz (is-invalid) durum stilleri görüntülenmeye başlar.

Doğru Cevap: E

Soru 8

Aşağıdakilerden hangisi başarılı bir işlem sonucunu “Alert” bileşeni ile görüntülemek için kullanılması gereken en uygun class tanımıdır?

alert-primary

alert-danger

alert-success

alert-light

alert-dark

Açıklama:

Bootstrap'in Alert (Uyarı) bileşeni, farklı durumları (başarı, hata, bilgi) belirtmek için bağlamsal sınıflar kullanır. Başarılı bir işlem sonucunu görüntülemek için kullanılan en uygun sınıf alert-success'tır. Bu sınıf, uyarı kutusunun arka planını yeşil tonlarda, yazı rengini ise koyu yeşil tonlarında yaparak başarıyı görselleştirir.

Doğru Cevap: C

Soru 9

Aşağıdakilerden hangisi içeriklerin yatay ya da dikey sekmeler halinde gruplandırılarak gösterilebilmesi için kullanılan bileşendir?

Tab

List group

Breadcrumb

Navbar

Table

Açıklama:

İçerikleri düzenli bir şekilde gruplandırarak yatay ya da dikey olarak sekmeler halinde göstermek için kullanılan Bootstrap bileşeni Sekmeler (Tabs) veya Pills'tir. Bu bileşen, sayfada fazla yer kaplamadan, ilgili içerikleri kolayca erişilebilir kılmak için idealdir.

Doğru Cevap: A

Soru 10

Aşağıdakilerden hangisi bir web sayfası üzerinde o anda bulunulan sayfayı hiyerarşik bir biçimde göstermek için kullanılan bileşendir?

Breadcrumb

Navbar

Navigation Bar

Accordion

Bread Bar

Açıklama:

Bir web sayfası üzerinde o anda bulunulan sayfanın, sitenin genel yapısı içindeki konumunu hiyerarşik bir biçimde (genellikle anasayfadan başlayarak) göstermek için kullanılan navigasyon bileşenine Ekmek Kırıntısı (Breadcrumb) denir. Bu, kullanıcıların sitede nerede olduklarını anlamalarını kolaylaştırır.

Doğru Cevap: A

Soru 11

Aşağıdakilerden hangisi Bootstrap bileşenlerinden biri değildir?

Alert

Button

Square

Modal

Toast

Açıklama:

Bootstrap, UI (Kullanıcı Arayüzü) bileşenleri sunan bir CSS/JS kütüphanesidir. Bileşenler genellikle görsel veya etkileşimli öğelerdir (Modal, Carousel, Nav, Alert, Card vb.). Seçeneklerde yer alan, örneğin AJAX gibi bir teknoloji veya HTML Headings gibi temel bir etiket, Bootstrap'in kendine özgü bir bileşeni olarak kabul edilmez. Bootstrap, bu tür temel elementleri sadece stilize eder, ancak onları bir bileşen olarak tanımlamaz.

Doğru Cevap: C

Soru 12

Bir form elementinin sunucuya hiçbir şekilde veri göndermemesi için kullanılan özellik aşağıdakilerden hangisidir?

readonly

disabled

closed

form-readonly

form-disabled

Açıklama:

Bir form elementinin sunucuya hiçbir şekilde veri göndermemesi için kullanılan temel özellik disabled'dır. Bu özellik, elementin etkileşimini engellemenin yanı sıra, o elementin adını ve değerini form gönderimine dahil etmeme işlevini de yerine getirir. Başka bir yöntem ise elementin name özelliğinin kaldırılmasıdır, ancak form kontrolünü devre dışı bırakmak için disabled tercih edilir.

Doğru Cevap: B

Soru 13

Aşağıdakilerden hangisi “Form Validation (Doğrulama)” işlemi için form elementine eklenmesi gereken bir özelliktir?

novalidate

validate-form

form-validate

form-valid

needs-validation

Açıklama:

HTML5 ve Bootstrap ile kullanılan Form Doğrulama (Validation) işlemi için form elementine eklenmesi gereken en yaygın özelliklerden biri required özelliğidir. Bu özellik, kullanıcının o alanı boş bırakmadan doldurmasını zorunlu kılar. Doğrulama mesajlarının düzgün görüntülenmesi için Bootstrap sınıflarıyla birlikte kullanılır.

Doğru Cevap: A

Soru 14

Form yapısına hem estetik bir görünüm hem de her türlü cihaz ve ekran boyutuna duyarlı olma özelliği kazandıran web uygulaması aşağıdakilerden hangisidir?

Input

Bootstrap

Button

Img

Table

Açıklama:

Form yapısına hem estetik (modern, düzgün) bir görünüm hem de her türlü cihaz ve ekran boyutuna duyarlı (responsive) olma özelliği kazandıran en popüler ve yaygın kullanılan web uygulama çatısı (framework) Bootstrap'tir. Bootstrap, hazır CSS sınıfları ve JavaScript bileşenleri sağlayarak hızlı form geliştirme imkanı sunar.

Doğru Cevap: B

Ünite 12

Soru 1

Aşağıdakilerden hangisi mobil uyumlu web sitesini tanımlamaktadır?

Tek ekran üzerinden çalışılıp paylaşılan web sayfalarıdır.

Masaüstü tasarımı olarak ayarlanıp kullanıcıların mobil cihazları ile giriş yaptığı tüm siteler mobil uyumlu web sitelerdir.

Alan adının önünde sadece “m.alanadi.com” olan siteler mobil uyumlu sitelerdir.

Farklı çözünürlük ve boyutlardaki cihazlarda ideal görüntülenmesi için tasarlanan web sayfalarıdır.

Alan adının sonunda sadece “alanadi.com/m” olan siteler mobil uyumlu sitelerdir.

Açıklama:

Mobil uyumlu web sitesi (Mobile-Friendly Website), web sitesinin masaüstü, tablet ve akıllı telefonlar gibi farklı cihazlarda ideal bir kullanıcı deneyimi sağlamak üzere tasarlanmış olmasıdır. Bu uyumluluk genellikle Duyarlı (Responsive) veya Uyarlanabilir (Adaptive) tasarım yaklaşımlarıyla sağlanır.

Doğru Cevap: D

Soru 2

Tek bir site ve içerik ile ekran boyutuna göre ideal görüntüleme deneyimini sağlayan tasarımlara ne ad verilir?

Tek sayfalı tasarım

Görsel tasarım

Masaüstü tasarım

Uyarlanabilir tasarım

Duyarlı web tasarımı

Açıklama:

Tek bir site ve içerik ile ekran boyutuna göre ideal görüntüleme deneyimini sağlayan tasarımlara Duyarlı Web Tasarımı (Responsive Web Design - RWD) adı verilir. RWD, esnek ızgaralar (fluid grids), esnek resimler ve CSS Medya Sorguları (@media queries) kullanarak içeriğin her türlü cihaz ekranına dinamik olarak uyum sağlamasını garantiler.

Doğru Cevap: E

Soru 3

Tek içerikten farklı boyut oluşturulduğu için tutarsız ara yüzler aşağıdaki tasarımlardan hangisinde oluşmaktadır?

Duyarlı web tasarımı

Uyarlanabilir web tasarımı

CSS tasarımı

HTML tasarımı

HTML 5 tasarımı

Açıklama:

Bu durum, özellikle Uyarlanabilir Tasarım (Adaptive Design) yaklaşımında ortaya çıkabilir. Uyarlanabilir tasarım, akışkan yapılar yerine önceden belirlenmiş sabit kırılma noktaları (fixed breakpoints) kullanır. Eğer bir ekran boyutu bu tanımlanmış noktalar arasında kalırsa, site tutarsız veya optimize edilmemiş bir arayüz gösterebilir, çünkü ekran boyutu için özel bir düzen yoktur.

Doğru Cevap: A

Soru 4

Aşağıdakilerden hangisi duyarlı web sitesi avantajlarından biridir?

Duyarlı web siteleri ile CSS ve HTML kullanmadan web sitesi tasarlanabilmektedir.

Farklı ekran ölçülerine uygun özgün tasarımlar yapılabilir.

Tek HTML kodu ile tüm ekranlara tasarım yapıldığı için oluşturulması ve devamlılığı sağlamak için diğer yapılara göre daha az emek ile yapılabilmektedir.

Duyarlı web tasarımı çevre bilinci ile ilgili konuları kapsamaktadır.

Duyarlı web tasarımları işitme engelli kişiler için tasarlanmaktadır.

Açıklama:

Duyarlı web sitesi, tek bir URL ve tek bir kod tabanı kullandığı için, site bakımı ve güncellemeler kolaylaşır. Bu durum, site yöneticilerinin farklı cihazlar için ayrı kodlama yapmak zorunda kalmasını ortadan kaldırarak bakım maliyetlerini düşürür ve verimliliği artırır.

Doğru Cevap: C

Soru 5

Aşağıdakilerden hangisi duyarlı web sitesi avantajlarından biridir?

Duyarlı web sitesi ile sadece masaüstü tasarımlar oluşturulabilmektedir.

HTML ve CSS olmadan da duyarlı web site tasarımları yapılabilir.

Duyarlı web sitesi sadece bazı konularda oluşturulabilmektedir.

Farklı ekranlara göre esnek boyutlandırmada sınırlı kontrol sunmaktadır.

Duyarlı web sitelerin analitik sayfalarına eklenmesi daha kolaydır.

Açıklama:

Duyarlı web sitesi kullanmanın en önemli avantajlarından biri SEO (Arama Motoru Optimizasyonu) performansının iyileşmesidir. Google, aynı içerik için farklı URL’ler yerine (m.site.com gibi) tek bir URL’yi tercih eder. RWD, cihazdan bağımsız olarak tek bir URL kullandığı için arama motoru taraması ve indekslemesi daha verimli hale gelir.

Doğru Cevap: D

Soru 6

Farklı boyutlardaki cihazlarda özel tasarımlar yapabilmeyi sağlayan esnek yapılı tasarım aşağıdakilerden hangisidir?

Uyarlanabilir Tasarım

Duyarlı Tasarım

Uyarlı ve Duyarlı Tasarım

Masaüstü Görünümlü Tasarım

UX UI Tasarım

Açıklama:

Farklı boyutlardaki cihazlarda özel tasarımlar yapabilmeyi sağlayan ve sürekli boyut değişimine uyum sağlayan esnek yapılı tasarım Duyarlı Web Tasarımı (Responsive Web Design)'dır. Bu tasarım, yüzdelik değerlere dayalı akışkan ızgaralar ve medya sorguları kullanarak ekranın her noktasına dinamik olarak uyum sağlar.

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi uyarlanabilir (adaptive) tasarımın özelliklerinden biridir?

Tek HTML kodu ve tek site üzerinden tüm boyutlar ayarlandığı için bakımı kolaydır.

Uyarlanabilir tasarımda farklı ekranların site bileşenlerinin boyut ve davranışları özelleştirilebilir.

HTML ve CSS kodları yazılmadan da uyarlanabilir bir tasarım yapılabilir.

İşitme ve görme engelli kişiler için uyarlanabilir bir yapıdadır.

Çevre kontenjanına uyarlanabilir web siteleri kullanılabilir.

Açıklama:

Uyarlanabilir (Adaptive) tasarımın temel özelliklerinden biri, tasarlanan sitenin önceden belirlenmiş sabit kırılma noktalarına (breakpoints) sahip olmasıdır. Site, kullanıcının cihazını algılar ve o cihaza en uygun olan sabit düzeni yükler. Örneğin, 6 farklı sabit düzen belirlenmiş olabilir.

Doğru Cevap: B

Soru 8

Aşağıdakilerden hangisi duyarlı ve uyarlanabilir tasarım farklarından biri değildir?

Cihaz boyutuna göre içeriklerin konumlandırılma durumu

Piyasaya yeni bir cihaz çıkarılması halinde duyarlı tasarımlar daha hızlı adapte olabilecektir.

İki tasarım prensibinin de web sitesini mobil uyumlu hale getirmesi

Duyarlı web siteleri uyarlanabilir web sitelerine göre daha yavaştır.

Uyarlanabilir web siteleri duyarlı web sitelerine göre daha esnektir.

Açıklama:

Duyarlı ve uyarlanabilir tasarım arasındaki temel farklar; Duyarlı tasarımın akışkan (fluid) ve Uyarlanabilir tasarımın statik/sabit kırılma noktalarına dayalı olmasıdır. Her ikisinin de ortak amacı mobil uyumluluk sağlamaktır. Bu nedenle, 'mobil uyumluluk sağlamak', bu iki yaklaşımın farklarından biri değil, ortak hedeflerinden biridir.

Doğru Cevap: C

Soru 9

Mobil uyumlu web site kütüphanelerinden birisi aşağıdakilerden hangisidir?

Unification

Summarize

Foundation

Digitalize

Performance

Açıklama:

Mobil uyumlu (responsive) web site kütüphaneleri, web geliştiricilerin sıfırdan CSS yazmak yerine hazır bileşenleri ve grid sistemlerini kullanmasına olanak tanır. Bu kütüphanelerin en popüler örneği Bootstrap'tır. Bootstrap, hızlı ve kolay mobil uyumlu arayüzler geliştirmek için kapsamlı bir CSS, JavaScript ve HTML şablonları koleksiyonu sunar.

Doğru Cevap: C

Soru 10

Aşağıdakilerden hangisi uyarlanabilir tasarım özelliklerinden biridir?

JavaScript kodları, uyarlanabilir tasarımlarda web site bileşenlerini kontrol etmek için kullanılabilir.

Duyarlı tasarım farklı cihazlarda benzer bir tasarım düzeni sunmaktadır.

Farklı ekranlara göre farklı düzenlemeler yapılamaz.

Belirli bir hedef kitlesi yoktur.

Uyarlanabilir tasarımda farklı ekranların site bileşenlerinin boyut ve davranışları özelleştirilemez.

Açıklama:

Uyarlanabilir tasarım (Adaptive Design), kullanıcının cihaz tipini veya ekran genişliğini tespit ettikten sonra, o cihaza özel olarak tasarlanmış statik bir düzeni (layout) yükler. Bu, Duyarlı Tasarımın aksine sürekli akışkanlık yerine, belirli boyutlar için önceden tasarlanmış düzenler sunar.

Doğru Cevap: A

Soru 11

Aşağıdakilerden hangisi ekran genişliğinin 250px altında olması hâlinde arka plan rengini sarı yapan koddur?

@media only screen and (max-with: 250px) {body {background-color:red;}}

@media only screen and (max-with: 250px) {body {background-color:yellow;}}

@media only screen and (min-with: 250px) {body {background-color:yellow;}}

screen and (max-with: 250px) {body {background-color:yellow;}}

@media only screen and (max-with: 250px)

Açıklama:

Ekran genişliğine göre stil değiştirmek için CSS Medya Sorguları (@media) kullanılır. Ekran genişliğinin 250px altında olması (maksimum genişlik 250px olması) şartını belirleyen kod yapısı şöyledir: @media screen and (<b>max-width: 250px</b>) { body { background-color: yellow; } }
Bu kod, ekran genişliği 250 piksel ve altındayken sayfanın arka plan rengini sarı yapar.

Doğru Cevap: B

Soru 12

CSS kodlarının sıfırdan yazılması yerine hazır CSS kütüphaneleri kullanılmaktadır.
Aşağıdakilerden hangisi CSS kütüphanesine örnek değildir?

HTML

Bootstrap

Semantic - UI

Foundation

Materialize

Açıklama:

Hazır CSS kütüphaneleri (Frameworks), genellikle mobil uyumlu bileşenler (gridler, butonlar, navigasyon çubukları) sağlayan paketlerdir. Örnekler arasında Bootstrap, Foundation, Materialize, Semantic UI yer alır. Eğer seçenekler arasında bir programlama dili (örneğin Python), bir veritabanı teknolojisi veya sadece bir HTML etiketi varsa, bu bir CSS kütüphanesi değildir.

Doğru Cevap: A

Soru 13

Tasarlanan web sitelerinin mobil uyumlu olduğunu test etmek için aşağıdaki işlemlerden hangisi yapılır?

Masaüstü tasarımları kontrol edilebilir.

Tasarımlarda H5 gibi küçük başlık stilleri kullanılabilir.

Tasarımlarda 50x50 px’i geçmeyecek şekilde resimler kullanılabilir.

Tasarımlarda logonun büyüklüğü her zaman 70px altında ise site mobil uyumludur.

Mobil uyumluluk test siteleri kullanılabilir.

Açıklama:

Web sitelerinin mobil uyumlu olup olmadığını test etmek için kullanılan en yaygın ve hızlı yöntem, tarayıcıların sunduğu Geliştirici Araçları (Developer Tools)'nı kullanmaktır. Bu araçlarda bulunan 'Toggle Device Toolbar' özelliği sayesinde siteyi farklı cihaz çözünürlüklerinde ve dikey/yatay modlarda simüle etmek mümkündür.

Doğru Cevap: E

Soru 14

Aşağıdakilerden hangisi mobil uyumluluk testi için kullanılan sitelerden biri değildir?

search.google.com/test/mobile-friendly

responsivedesignchecker.com

ami.responsivedesign.is/

responsivetesttool.com/

google.com/userfriendly

Açıklama:

Mobil uyumluluk testi için kullanılan araçlar arasında Google Mobile-Friendly Test ve farklı SEO araçlarının sunduğu uyumluluk denetleyicileri bulunur. Soruda, mobil uyumluluk testi için kullanılmayan bir site adı sorulmaktadır. Genellikle bu tip sorularda, alakasız bir web hizmeti (örneğin, bir sunucu yönetim paneli veya tamamen farklı bir amaca hizmet eden bir SEO aracı) doğru cevap olarak işaretlenir.

Doğru Cevap: E

Soru 15

Aşağıdakilerden hangisi @media etiketinde kullanılan medya tipleri arasında yer almaz?

Screen

Tty

Projection

Bootstrap

Açıklama:

@media etiketinde kullanılan temel medya tipleri (media types) şunlardır: all (tüm cihazlar), screen (ekran tabanlı cihazlar), print (yazıcılar) ve speech (sesli okuma cihazları). 'desktop' veya 'tablet' gibi ifadeler medya tipleri arasında değil, genellikle boyut aralıklarını belirleyen özellikler (features) arasında yer alır.

Doğru Cevap: E

Soru 16

I. Semantic - UI
II. Foundation
III. Materialize
IV. UI Kit
Yukarıdakilerden hangisi ya da hangileri CSS Framework kütüphaneleri arasında yer alır?

I, II ve III

I, II ve IV

I, III ve IV

II, III ve IV

I, II, III ve IV

Açıklama:

Verilen kütüphanelerin hepsi (I. Semantic - UI, II. Foundation, III. Materialize, IV. UI Kit) popüler ve yaygın olarak kullanılan CSS Framework kütüphaneleridir. Bu kütüphaneler, mobil uyumlu (responsive) web sitelerinin tasarımını ve geliştirilmesini hızlandırmak için önceden yazılmış stil ve bileşen setleri sağlarlar.

Doğru Cevap: E

Ünite 13

Soru 1

Aşağıdakilerden hangisi "çapraz tarayıcı uyumluluğu sorununun yaygın nedenleri" arasında yer almaz?

DOCTYPE kullanımı

Tarayıcıya özel CSS kullanımı

CSS sıfırlama

Yeni tarayıcı algılama

Eski tarayıcı algılama

Açıklama:

Çapraz tarayıcı uyumluluğu sorunlarının yaygın nedenleri genellikle yanlış veya eksik DOCTYPE kullanımı, CSS/HTML standartlarına uyulmaması, tarayıcı ön eklerinin (vendor prefixes) yanlış kullanımı veya eski/geçersiz teknolojilerin kullanılmasıdır.
Ancak, CSS Sıfırlama (CSS Reset) kullanmak, tarayıcılar arası varsayılan stil farklılıklarını gidermeye yarayan bir çözüm ve iyi bir uygulamadır, sorun nedeni değildir.

Doğru Cevap: D

Soru 2

Çapraz tarayıcı uyumluluğunda aşağıdaki ifadelerden hangisi davranış uyumluluğunu ifade eder?

Web sitesinin istenilen şekilde görünüp görünmediğini kontrol eder.

CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eder.

Responsive tasarımdaki sitenin farklı mobil cihazlarda farklı çözünürlükteki görünümünü kontrol eder. Ayrıca mobil cihazın yatay veya dikey çevrilmesi sonucundaki oluşacak görüntüyü de kontrol eder.

Sitenin farklı tarayıcılardaki performansına bakarak performansların yakın olup olmadığını kontrol eder.

Web sitesinin istenildiği gibi davranıp davranmadığını kontrol eder. Örneğin sitede bir butona tıklandığında yeni pencerede bir sayfa açılıyorsa bu işlemin bütün tarayıcılarda gerçekleşip gerçekleşmediğini kontrol eder.

Açıklama:

Çapraz tarayıcı uyumluluğu testlerinin bir parçası olan davranış uyumluluğu, web sitesinin işlevselliği ile ilgilidir. Bu, formların, JavaScript etkileşimlerinin ve genel kullanıcı akışının (tıklamalar, kaydırmalar) tüm tarayıcılarda beklendiği gibi ve aynı şekilde çalışıp çalışmadığını kontrol eder.

Doğru Cevap: E

Soru 3

Çapraz tarayıcı uyumluluğunda aşağıdaki ifadelerden hangisi kod uyumluluğunu ifade eder?

Web sitesinin istenilen şekilde görünüp görünmediğini kontrol eder.

CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eder.

Responsive tasarımdaki sitenin farklı mobil cihazlarda farklı çözünürlükteki görünümünü kontrol eder.

Sitenin farklı tarayıcılardaki performansına bakarak performansların yakın olup olmadığını kontrol eder.

Web sitesinin istenildiği gibi davranıp davranmadığını kontrol eder.

Açıklama:

Kod uyumluluğu, web sitesini oluşturan HTML, CSS ve JavaScript kodlarının farklı tarayıcıların yorumlayıcı motorları tarafından geçerli ve standartlara uygun bir şekilde işlenip işlenmediğini ifade eder. Bu, genellikle W3C standartlarına uygunluğu ve gerekli tarayıcı ön eklerinin doğru kullanımını kontrol etmeyi içerir.

Doğru Cevap: B

Soru 4

Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğu ile alakalı değildir?

PHP

JavaScript

CSS

HTML

CSS3

Açıklama:

Çapraz tarayıcı uyumluluğu, web sayfasının istemci tarafında (tarayıcıda) nasıl göründüğü ve çalıştığı ile ilgilidir (HTML, CSS, JavaScript). Sunucu tarafı oturum yönetimi veya veritabanı optimizasyonu gibi arka uç (back-end) konuları, doğrudan çapraz tarayıcı uyumluluğu ile alakalı değildir.

Doğru Cevap: A

Soru 5

Aşağıdakilerden hangisi dünyada en çok kullanılan tarayıcılardan biri değildir?

Chrome

Firefox

Internet Explorer

Opera

Xcode

Açıklama:

Günümüzde dünyada en çok kullanılan tarayıcılar arasında Google Chrome, Mozilla Firefox, Microsoft Edge ve Apple Safari yer alır. Netscape Navigator, 2000'li yılların başında popülerliğini kaybetmiş eski bir tarayıcıdır ve artık yaygın kullanılanlar listesinde yer almaz.

Doğru Cevap: E

Soru 6

Aşağıdakilerden hangisi W3C (World Wide Web) konsorsiyumunun temel amaçları arasında yer alır?

Yeni yazılım dili oluşturmak

Teknoloji firmaları arasındaki rekabeti artırmak

Büyük teknolojik firmaları korumak

Web alanında standartlar oluşturmak

İnterneti dünyaya yaymak

Açıklama:

W3C (World Wide Web Consortium)'nun temel amacı, web'in uzun vadeli gelişimini sağlamak için ortak web standartlarını (HTML, CSS vb.) belirlemek ve geliştirmektir. Bu standartlar, içeriklerin tüm tarayıcı ve cihazlarda tutarlı bir şekilde çalışmasını ve erişilebilir olmasını hedefler.

Doğru Cevap: D

Soru 7

Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğundaki etkenlerden biridir?

Kullanıcının işlemcisi

Kullanıcının ana kartı

Kullanıcının ekran kartı

Sunucunun işlemcisi

Kullanıcının işletim sistemi

Açıklama:

Çapraz tarayıcı uyumluluğundaki en önemli etkenlerden biri, farklı tarayıcıların farklı yorumlama motorlarını (rendering engines) kullanmasıdır (Örn: Chromium tabanlı tarayıcılarda Blink, Firefox’ta Gecko). Bu motorlar, aynı kodun farklı şekillerde yorumlanmasına yol açarak uyumluluk sorunlarına neden olabilir.

Doğru Cevap: E

Soru 8

…………. bir web sitesinin herhangi bir tarayıcıda beklendiği gibi çalışıp çalışmadığı anlamına gelir.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

Çapraz tarayıcı uyumluluğu

Yazılım dili

JavaScript

CSS3

HTML5

Açıklama:

Verilen cümledeki tanım, tam olarak Çapraz Tarayıcı Uyumluluğunu (Cross-Browser Compatibility) açıklamaktadır. Bu kavram, bir web sitesinin veya uygulamasının, kullanılan işletim sisteminden veya tarayıcıdan bağımsız olarak beklendiği gibi çalışmasını garanti eder.

Doğru Cevap: A

Soru 9

Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğu parçalarından biri değildir?

Kod uyumluluğu

İşlemci uyumluluğu

Ara yüz uyumluluğu

Davranış uyumluluğu

Mobil uyumluluk

Açıklama:

Çapraz tarayıcı uyumluluğu genellikle üç ana parçada incelenir: Görsel Uyumluluk (Visual), Davranış Uyumluluğu (Behavioral/Functionality) ve Kod Uyumluluğu (Code Validity). Performans Optimizasyonu ise bir web sayfasının yüklenme hızı ve kaynak kullanımıyla ilgilidir, uyumluluğun doğrudan bir parçası değildir.

Doğru Cevap: B

Soru 10

I. DOCTYPE Kullanımı
II. CSS Sıfırlama
III. HTML kodlarının doğru şekilde kullanımı
IV. Eski teknolojiler kullanmak
Yukardakilerden hangisi ya da hangileri çapraz tarayıcı uyumluluğu sorunlarının yaygın nedenleri arasında yer alır?

Yalnız I

I ve II

I, II ve III

I ve III

Yalnız IV

Açıklama:

I, II ve III (DOCTYPE, CSS Sıfırlama, doğru HTML kullanımı) çapraz tarayıcı uyumluluğunu sağlamak için kullanılan iyi uygulamalardır (çözümlerdir). Yaygın bir sorun nedeni ise Eski teknolojiler kullanmaktır (IV). Eski teknolojiler (örneğin, güncel olmayan HTML veya CSS standartları) modern tarayıcılar tarafından farklı yorumlanabilir veya hiç desteklenmeyebilir, bu da uyumluluk sorunlarına yol açar. Bu nedenle IV bir sorunun yaygın nedenidir.

Doğru Cevap: C

Soru 11

Aşağıdaki tarayıcılardan hangisi CSS’de “-moz” ön ekini kullanmaktadır?

Firefox

Edge

Internet Explorer

Chrome

Opera

Açıklama:

CSS’deki tarayıcı ön ekleri (vendor prefixes), tarayıcıların deneysel veya henüz standartlaşmamış CSS özelliklerini desteklemesi için kullanılır. -moz- ön eki, Mozilla tarafından geliştirilen ve özellikle Firefox tarayıcısında kullanılan özellikleri işaret eder.

Doğru Cevap: A

Soru 12

Aşağıdakilerden hangisinde HTML de kullanılan “BR” etiketinin W3C standartlarına göre kullanımı doğru verilmiştir?

<br>

<br />

</br>

Açıklama:

W3C standartlarına tam uyum sağlamak için, özellikle XHTML veya katı HTML5 uyumluluğu istenen durumlarda, kendi kendine kapanan etiketlerin (self-closing tags) doğru formatta kullanılması önemlidir. Doğru kullanım şekli (boşluk ve eğik çizgi) şeklindedir, bu format hem eski hem de modern tarayıcı standartları için önerilir.

Doğru Cevap: C

Soru 13

Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğu testlerinde kullanılabilecek araçlardan biridir?

Seçenekler

A
TestComplate

✅

B
Photoshop

❌

C
Microsoft Word

❌

D
Microsoft Accsess

❌

E
Paint

❌

Açıklama:

Çapraz tarayıcı uyumluluğu testlerinde kullanılan araçlar, geliştiricilerin kodlarını birden fazla tarayıcıda, cihazda ve işletim sisteminde eş zamanlı olarak test etmelerini sağlar. BrowserStack bu amaçla kullanılan, popüler, bulut tabanlı test platformlarından biridir.

Çapraz tarayıcı uyumluluğu testlerinde kullanılan araçlar, geliştiricilerin kodlarını birden fazla tarayıcıda, cihazda ve işletim sisteminde eş zamanlı olarak test etmelerini sağlar. BrowserStack bu amaçla kullanılan, popüler, bulut tabanlı test platformlarından biridir.

Doğru Cevap: A

Soru 14

CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eden çapraz tarayıcı uyumluluğu test parçası aşağıdakilerden hangisidir?

Seçenekler

A
Kod uyumluluğu

✅

B
Ara yüz uyumluluğu

❌

C
Davranış uyumluluğu

❌

D
Mobil uyumluluk

❌

E
Performans uyumluluğu

❌

Açıklama:

Çapraz tarayıcı uyumluluğunun bir parçası olan Kod Uyumluluğu testi, geliştirilen HTML, CSS ve JavaScript kodlarının ilgili web standartlarına (W3C) uygunluğunu ve bu kodların farklı tarayıcılar tarafından hatasız bir şekilde işlenip işlenemeyeceğini kontrol eder.

Çapraz tarayıcı uyumluluğunun bir parçası olan Kod Uyumluluğu testi, geliştirilen HTML, CSS ve JavaScript kodlarının ilgili web standartlarına (W3C) uygunluğunu ve bu kodların farklı tarayıcılar tarafından hatasız bir şekilde işlenip işlenemeyeceğini kontrol eder.

Doğru Cevap: A

Soru 15

Kod uyumluluğu testi ile ilgili olarak aşağıdakilerden hangisi doğrudur?

Seçenekler

A
Web sitesinin istenilen şekilde görünüp görünmediğini kontrol eder.

❌

B
Web sitesinin istenildiği gibi davranıp davranmadığını kontrol eder.

❌

C
Responsive tasarımdaki sitenin farklı mobil cihazlarda farklı çözünürlükteki görünümünü kontrol eder.

❌

D
CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eder.

✅

E
Sitenin farklı tarayıcılardaki performansına bakarak performansların yakın olup olmadığını kontrol eder.

❌

Açıklama:

Kod uyumluluğu testi, web sayfasının temel yapısını oluşturan HTML, CSS ve JavaScript’in W3C standartlarına (World Wide Web Consortium) ne kadar uyumlu olduğunu belirler. Standartlara uygunluk, tarayıcılar arası yorumlama farklılıklarını minimize etmenin anahtarıdır.

Kod uyumluluğu testi, web sayfasının temel yapısını oluşturan HTML, CSS ve JavaScript’in W3C standartlarına (World Wide Web Consortium) ne kadar uyumlu olduğunu belirler. Standartlara uygunluk, tarayıcılar arası yorumlama farklılıklarını minimize etmenin anahtarıdır.

Doğru Cevap: D

Soru 16

Tarayıcıya dokümanın tip bilgisini sunmak için kullanılan etiket aşağıdakilerden hangisidir?

Seçenekler

A
Browserling

❌

B
Doctype

✅

C
TestComplate

❌

D
Ghostlab

❌

E
Html

❌

Açıklama:

DOCTYPE (Document Type Declaration), bir HTML veya XHTML dokümanının başında yer alan ve tarayıcıya, sayfanın hangi HTML sürümüne ve standartlarına göre yorumlanması gerektiğini bildiren zorunlu bir etikettir. Doğru DOCTYPE kullanımı, tarayıcıların Quirks Modu yerine Standartlar Modu'nda çalışmasını sağlayarak çapraz tarayıcı uyumluluğuna katkıda bulunur.

DOCTYPE (Document Type Declaration), bir HTML veya XHTML dokümanının başında yer alan ve tarayıcıya, sayfanın hangi HTML sürümüne ve standartlarına göre yorumlanması gerektiğini bildiren zorunlu bir etikettir. Doğru DOCTYPE kullanımı, tarayıcıların Quirks Modu yerine Standartlar Modu'nda çalışmasını sağlayarak çapraz tarayıcı uyumluluğuna katkıda bulunur.

Doğru Cevap: B

Ünite 14

Soru 1

Aşağıdakilerden hangisi Mock-Up hazırlama ortamlarından biri değildir?

Seçenekler

A
Mockminus

✅

B
Moqups

❌

C
Mockup Builder

❌

D
Origami Studio

❌

E
MockPlus

❌

Açıklama:

Mock-up, bir tasarımın yüksek çözünürlüklü görsel sunumudur; renk, tipografi ve stil gibi görsel detayları içerir. Yaygın Mock-up hazırlama ortamları arasında Figma, Adobe XD, Sketch ve InVision Studio gibi güçlü grafik ve prototipleme araçları bulunur. Bir aracın Mock-up ortamı olup olmadığını belirlemek için, görsel öğeleri (renk, yazı tipi, resim) tam doğrulukla gösterebilme yeteneğine bakılır.

Mock-up, bir tasarımın yüksek çözünürlüklü görsel sunumudur; renk, tipografi ve stil gibi görsel detayları içerir. Yaygın Mock-up hazırlama ortamları arasında Figma, Adobe XD, Sketch ve InVision Studio gibi güçlü grafik ve prototipleme araçları bulunur. Bir aracın Mock-up ortamı olup olmadığını belirlemek için, görsel öğeleri (renk, yazı tipi, resim) tam doğrulukla gösterebilme yeteneğine bakılır.

Doğru Cevap: A

Soru 2

Az yoğunlukta ve genellikle tek sayfadan veya ekrandan oluşan çalışmalarda insan gözünün hareket ettiği yolu açıklamaya çalışan tasarım modeli aşağıdakilerden hangisidir?

Seçenekler

A
Z-Deseni

❌

B
Gutenberg

✅

C
F-Deseni

❌

D
N-Deseni

❌

E
V-Deseni

❌

Açıklama:

Az yoğunlukta, genellikle tek sayfadan veya ekrandan oluşan çalışmalarda kullanılan ve insan gözünün Z harfi çizerek hareket ettiği yolu açıklayan tasarım modeli Z-Deseni (Z-Pattern)'dir. Bu model, kullanıcıların sol üstten başlayıp sağa, ardından çapraz olarak aşağı sol ve tekrar sağa doğru tarama yaptığını varsayar ve genellikle açılış sayfaları (landing pages) gibi basit tasarımlarda kullanılır.

Az yoğunlukta, genellikle tek sayfadan veya ekrandan oluşan çalışmalarda kullanılan ve insan gözünün Z harfi çizerek hareket ettiği yolu açıklayan tasarım modeli Z-Deseni (Z-Pattern)'dir. Bu model, kullanıcıların sol üstten başlayıp sağa, ardından çapraz olarak aşağı sol ve tekrar sağa doğru tarama yaptığını varsayar ve genellikle açılış sayfaları (landing pages) gibi basit tasarımlarda kullanılır.

Doğru Cevap: B

Soru 3

Aşağıdakilerden hangisi WireFrame hazırlama ortamlarından biri değildir?

Seçenekler

A
Luxery

✅

B
Wireframe.cc

❌

C
Balsamiq

❌

D
InDesign

❌

E
Axure

❌

Açıklama:

Wireframe (Tel Kafes), bir web sitesinin veya uygulamanın temel iskeletini ve bilgi hiyerarşisini gösteren düşük çözünürlüklü bir taslaktır. Wireframe hazırlama ortamları, görsel stil yerine yapıya ve düzenlemeye odaklanır. Popüler Wireframe araçları arasında Balsamiq, Axure ve Wireframe.cc sayılabilir. Yüksek çözünürlüklü görsel düzenlemeye odaklanan bir araç (örneğin Photoshop veya InDesign gibi bir yayıncılık yazılımı) tipik bir Wireframe ortamı değildir.

Wireframe (Tel Kafes), bir web sitesinin veya uygulamanın temel iskeletini ve bilgi hiyerarşisini gösteren düşük çözünürlüklü bir taslaktır. Wireframe hazırlama ortamları, görsel stil yerine yapıya ve düzenlemeye odaklanır. Popüler Wireframe araçları arasında Balsamiq, Axure ve Wireframe.cc sayılabilir. Yüksek çözünürlüklü görsel düzenlemeye odaklanan bir araç (örneğin Photoshop veya InDesign gibi bir yayıncılık yazılımı) tipik bir Wireframe ortamı değildir.

Doğru Cevap: A

Soru 4

Aşağıdakilerden hangisi Wireframe kullanmanın faydaları için yanlıştır?

Seçenekler

A
Web siteniz veya ürününüz hakkında ön konuşmalarda çok yardımcı olur ve görülen durumların değiştirilmesini kolaylaştırır.

❌

B
Wireframe çalışmasından sonra yazılıma geçmek, daha belirgin kuralları takip etmenizi sağlar.

❌

C
Wireframe aşamasında yapılan değişiklikler, kodlama başladıktan sonra gerekli görülen değişikliklerden çok daha kolay ve dolayısıyla daha ucuzdur.

❌

D
Taslak çalışmaların yardımı ile fikir ve tasarımın her aşamasında son kullanıcılarla test edebilirsiniz.

❌

E
Bir model çerçevesinde uygulanacak alan tasarımın yüzeyde nasıl görüneceğinin belirlenmesi amacıyla kullanılır.

✅

Açıklama:

Wireframe kullanmanın temel faydaları arasında içerik hiyerarşisini netleştirmek, tasarım hatalarını erken aşamada tespit etmek ve paydaşlarla temel düzen konusunda hızlı anlaşma sağlamak yer alır. Wireframe'ler düşük çözünürlüklü olduğundan, nihai görsel çekicilik veya renk paletlerinin test edilmesi Wireframe kullanmanın bir faydası veya amacı değildir; bu, Mock-up aşamasına aittir.

Wireframe kullanmanın temel faydaları arasında içerik hiyerarşisini netleştirmek, tasarım hatalarını erken aşamada tespit etmek ve paydaşlarla temel düzen konusunda hızlı anlaşma sağlamak yer alır. Wireframe'ler düşük çözünürlüklü olduğundan, nihai görsel çekicilik veya renk paletlerinin test edilmesi Wireframe kullanmanın bir faydası veya amacı değildir; bu, Mock-up aşamasına aittir.

Doğru Cevap: E

Soru 5

Aşağıdakilerden hangisinin en temel amacı sitedeki hiyerarşiyi düzenlemektir?

Seçenekler

A
Tipografi

❌

B
InVision

❌

C
Mock-Up

❌

D
Wireframe

✅

E
prototip

❌

Açıklama:

Bir web sitesindeki içeriğin ve bileşenlerin önem sırasını, düzenini ve akışını belirleyerek hiyerarşiyi düzenlemeyi en temel amaç edinen tasarım aşaması Wireframe (Tel Kafes) çalışmasıdır. Wireframe, sitenin iskelet yapısını tanımlayarak bilgi mimarisini kurar.

Bir web sitesindeki içeriğin ve bileşenlerin önem sırasını, düzenini ve akışını belirleyerek hiyerarşiyi düzenlemeyi en temel amaç edinen tasarım aşaması Wireframe (Tel Kafes) çalışmasıdır. Wireframe, sitenin iskelet yapısını tanımlayarak bilgi mimarisini kurar.

Doğru Cevap: D

Soru 6

Aşağıdaki tasarım ortamlarından hangisi web tabanlıdır?

Seçenekler

A
InDesign

❌

B
Axure

❌

C
Wireframe.cc

✅

D
Adobe XD

❌

E
InVision Studio

❌

Açıklama:

Web tabanlı tasarım ortamları, genellikle tarayıcı üzerinden erişilebilen ve ekip çalışmasına olanak tanıyan araçlardır. Bu araçların en popüler örneklerinden biri, hem Wireframe hem Mock-up hem de Prototipleme imkanları sunan Figma'dır. Figma, bulut tabanlı yapısı sayesinde platform bağımsız çalışır.

Web tabanlı tasarım ortamları, genellikle tarayıcı üzerinden erişilebilen ve ekip çalışmasına olanak tanıyan araçlardır. Bu araçların en popüler örneklerinden biri, hem Wireframe hem Mock-up hem de Prototipleme imkanları sunan Figma'dır. Figma, bulut tabanlı yapısı sayesinde platform bağımsız çalışır.

Doğru Cevap: C

Soru 7

F-Deseni tasarım modeli için aşağıdakilerden hangisi söylenebilir?

Seçenekler

A
Az yoğunlukta ve genellikle tek sayfadan veya ekrandan oluşan çalışmalarda insan gözünün hareket ettiği yolu açıklamaya çalışmıştır

❌

B
Sadece metin odaklı olmayan, içeriğe göre uzayıp kısalabilen sayfa veya ekranlarda kullanılır

❌

C
Yoğun içerik bloklarının kullanıldığı durumlarda insan gözünün bu blokları tararken hareket ettiği yolu açıklamaya çalışmıştır

✅

D
Kullanıcının gözleri bu modele göre hareket ettiğinde, ekranda hayali bir “Z” şekli oluşturur

❌

E
Kullanıcının gözleri ile izlediği bu yolu referans alarak tasarım alanını dörde ayırmıştır

❌

Açıklama:

F-Deseni (F-Pattern) tasarım modeli, kullanıcıların özellikle yoğun metin içeren sayfalarda içeriği tam okumak yerine gözleriyle taradıklarını gösterir. Göz hareketleri, iki yatay çizgi ve sol tarafta dikey bir hat (bir F harfi şeklinde) çizer. Bu model, önemli içeriğin sol üst köşelere ve ilk iki paragrafın başlangıcına yerleştirilmesi gerektiğini önerir.

F-Deseni (F-Pattern) tasarım modeli, kullanıcıların özellikle yoğun metin içeren sayfalarda içeriği tam okumak yerine gözleriyle taradıklarını gösterir. Göz hareketleri, iki yatay çizgi ve sol tarafta dikey bir hat (bir F harfi şeklinde) çizer. Bu model, önemli içeriğin sol üst köşelere ve ilk iki paragrafın başlangıcına yerleştirilmesi gerektiğini önerir.

Doğru Cevap: C

Soru 8

Aşağıdakilerden hangisi daha basit olan ve az sayıdaki içeriğin gösterilmesinin amaçlandığı tasarımlar için kullanılan tasarım modelidir?

Seçenekler

A
Z-Deseni Tasarım Modeli

✅

B
F-Deseni Tasarım Modeli

❌

C
Gutenberg Diyagramı Tasarım Modeli

❌

D
Altın Üçgen Deseni

❌

E
Odak Noktaları Tasarım Modeli

❌

Açıklama:

Daha basit olan ve az sayıdaki içeriğin, genellikle tek bir amaç doğrultusunda gösterilmesinin amaçlandığı tasarımlar (örneğin açılış sayfaları) için en uygun tasarım modeli Z-Deseni'dir. Z-Deseni, kısıtlı içeriğe sahip arayüzlerde net ve hızlı bir akış sağlar.

Daha basit olan ve az sayıdaki içeriğin, genellikle tek bir amaç doğrultusunda gösterilmesinin amaçlandığı tasarımlar (örneğin açılış sayfaları) için en uygun tasarım modeli Z-Deseni'dir. Z-Deseni, kısıtlı içeriğe sahip arayüzlerde net ve hızlı bir akış sağlar.

Doğru Cevap: A

Soru 9

Tipografi aşağıdakilerden hangisi ile ilgilenmez?

Seçenekler

A
Metin stilleri

❌

B
Metin boyutlar

❌

C
Metin içeriği

✅

D
Metinlerin konumu

❌

E
Metin aralığı

❌

Açıklama:

Tipografi, yazılı metinlerin görsel düzenlemesi ve sunumuyla ilgilenir. Bu; yazı tipi seçimi, boyutu, satır aralığı (leading), harf aralığı (kerning) ve metin hiyerarşisi gibi konuları kapsar. Tipografi, doğrudan sunucu tarafı performans yönetimi veya veri tabanı tasarımı gibi arka uç (backend) işlevleri ile ilgilenmez.

Tipografi, yazılı metinlerin görsel düzenlemesi ve sunumuyla ilgilenir. Bu; yazı tipi seçimi, boyutu, satır aralığı (leading), harf aralığı (kerning) ve metin hiyerarşisi gibi konuları kapsar. Tipografi, doğrudan sunucu tarafı performans yönetimi veya veri tabanı tasarımı gibi arka uç (backend) işlevleri ile ilgilenmez.

Doğru Cevap: C

Soru 10

Facebook tarafından geliştirilen Mock-up hazırlama ortamı aşağıdakilerden hangisidir?

Seçenekler

A
Origami Studio

✅

B
Mockup Builder

❌

C
Moqups

❌

D
MockPlus

❌

E
Sketch

❌

Açıklama:

Facebook (Meta) tarafından özellikle gelişmiş ve yüksek kaliteli etkileşimli prototip ve Mock-up hazırlamak amacıyla geliştirilen araç Origami Studio'dur. Bu araç, genellikle tasarımcıların iOS ve Android uygulamaları için gerçekçi arayüzler ve akışlar oluşturmasına yardımcı olur.

Facebook (Meta) tarafından özellikle gelişmiş ve yüksek kaliteli etkileşimli prototip ve Mock-up hazırlamak amacıyla geliştirilen araç Origami Studio'dur. Bu araç, genellikle tasarımcıların iOS ve Android uygulamaları için gerçekçi arayüzler ve akışlar oluşturmasına yardımcı olur.

Doğru Cevap: A

Soru 11

Aşağıdakilerden hangisi prototip hazırlamanın avantajlarından biridir?

Seçenekler

A
Tasarım süresini kısaltmak

❌

B
Metinsel ifadelerin stillerini belirlemek

❌

C
Web sitesinin özelliklerini belirlemek

❌

D
Hataların tespit edilmesini kolaylaştırmak

✅

E
Tasarım maliyetini azaltmak

❌

Açıklama:

Prototip hazırlamanın en önemli avantajlarından biri, tasarımın geliştirilmesinden önce kullanıcılarla test etme imkanı sunmasıdır. Bu, kritik kullanılabilirlik sorunlarının ve tasarım kusurlarının erken aşamada tespit edilmesini ve böylece potansiyel geliştirme maliyetlerinin ciddi ölçüde azaltılmasını sağlar.

Prototip hazırlamanın en önemli avantajlarından biri, tasarımın geliştirilmesinden önce kullanıcılarla test etme imkanı sunmasıdır. Bu, kritik kullanılabilirlik sorunlarının ve tasarım kusurlarının erken aşamada tespit edilmesini ve böylece potansiyel geliştirme maliyetlerinin ciddi ölçüde azaltılmasını sağlar.

Doğru Cevap: D

Soru 12

Bir web sitesinin tasarım aşamaları sırasıyla aşağıdakilerden hangisinde doğru olarak verilmiştir?

Seçenekler

A
MockUp - Wireframe - Prototip

❌

B
Wireframe - MockUp - Prototip

✅

C
Prototip - MockUp - Wireframe

❌

D
MockUp - Prototip - Wireframe

❌

E
Wireframe - Prototip - MockUp

❌

Açıklama:

Bir web sitesinin tasarım süreci genellikle yapısal planlamadan görsel detaya ve nihayetinde etkileşimli denemeye doğru ilerler. Doğru sıralama: Öncelikle iskelet yapısı ve hiyerarşisi belirlenir (Wireframe). Ardından görsel stil ve detaylar eklenir (Mock-up). Son olarak, kullanıcı akışı ve etkileşim testleri için işlevsel model oluşturulur (Prototip).

Bir web sitesinin tasarım süreci genellikle yapısal planlamadan görsel detaya ve nihayetinde etkileşimli denemeye doğru ilerler. Doğru sıralama: Öncelikle iskelet yapısı ve hiyerarşisi belirlenir (Wireframe). Ardından görsel stil ve detaylar eklenir (Mock-up). Son olarak, kullanıcı akışı ve etkileşim testleri için işlevsel model oluşturulur (Prototip).

Doğru Cevap: B

Soru 13

Aşağıdakilerden hangisi prototip çalışmalarının amaçlarından biridir?

Seçenekler

A
Arka plan resimleri, simgeler ve diğer dekoratif ögelerin seçimlerini yapmak

❌

B
Web sitesi ve kullanıcı arasındaki etkileşim eksikliklerini ve hatalarını keşfetmek

✅

C
Web sitesi için oluşturulmuş olan yönlendirmelerin nasıl görüneceğini belirlemek

❌

D
Web sitesinde bulunması gereken özellikleri belirlemek

❌

E
Sayfalar arasındaki geçişleri belirlemek

❌

Açıklama:

Prototip çalışmalarının temel amacı, tasarlanmış arayüzün kullanılabilirlik (usability) ve kullanıcı deneyimi (UX) açısından işleyişini, kullanıcı akışlarını ve etkileşimlerini test etmektir. Bu, tasarımın kullanıcı beklentilerini karşılayıp karşılamadığını görmeyi sağlar.

Prototip çalışmalarının temel amacı, tasarlanmış arayüzün kullanılabilirlik (usability) ve kullanıcı deneyimi (UX) açısından işleyişini, kullanıcı akışlarını ve etkileşimlerini test etmektir. Bu, tasarımın kullanıcı beklentilerini karşılayıp karşılamadığını görmeyi sağlar.

Doğru Cevap: B

Soru 14

Genellikle doğayı ve sürdürülebilirliği çağrıştıran renk aşağıdakilerden hangisidir?

Seçenekler

A
Turuncu

❌

B
Mavi

❌

C
Yeşil

✅

D
Kahverengi

❌

E
Kırmızı

❌

Açıklama:

Renk psikolojisine göre Yeşil renk, genellikle doğa, büyüme, sağlık, huzur ve özellikle sürdürülebilirlik kavramlarıyla ilişkilendirilir. Bu nedenle çevre dostu veya organik ürünleri temsil eden markalar tarafından sıklıkla kullanılır.

Renk psikolojisine göre Yeşil renk, genellikle doğa, büyüme, sağlık, huzur ve özellikle sürdürülebilirlik kavramlarıyla ilişkilendirilir. Bu nedenle çevre dostu veya organik ürünleri temsil eden markalar tarafından sıklıkla kullanılır.

Doğru Cevap: C

Soru 15

Aşağıdakilerden hangisi prototip çalışmalarının amaçlarından biri değildir?

Seçenekler

A
Web sitesi ve kullanıcı arasındaki etkileşim eksikliklerini ve hatalarını keşfetmek

❌

B
Farklı tasarım fikirlerini kolayca karşılaştırabilmek

❌

C
Geliştirilen web sitesinde bulunması gereken özellikleri belirlemek

✅

D
Ürünün sözel olarak anlatılması zor olan özelliklerini de içeren bir sunum olarak da kullanmak

❌

E
Kullanıcılara fikrin kolay aktarılabilmesi sebebiyle geri bildirim toplamayı kolaylaştırmak

❌

Açıklama:

Prototip çalışmaları, tasarımın test edilmesi ve onaylanması aşamasıdır. Prototipin amacı, nihai ürünün pazarlamasını planlamak veya pazarlama stratejilerini belirlemek değildir. Bu tür aktiviteler, ürün geliştirme sürecinin daha sonraki bir aşaması veya ayrı bir disiplin olan pazarlama departmanının sorumluluğundadır.

Prototip çalışmaları, tasarımın test edilmesi ve onaylanması aşamasıdır. Prototipin amacı, nihai ürünün pazarlamasını planlamak veya pazarlama stratejilerini belirlemek değildir. Bu tür aktiviteler, ürün geliştirme sürecinin daha sonraki bir aşaması veya ayrı bir disiplin olan pazarlama departmanının sorumluluğundadır.

Doğru Cevap: C

Soru 16

Aşağıdakilerden hangisi oluşturduğunuz prototipi size html, css ve ilişkili javascript kodları ile tamamlanmış bir web sitesi şeklinde hazır getirebilir?

Seçenekler

A
Balsamiq

❌

B
webFlow

✅

C
InDesign

❌

D
Adobe XD

❌

E
Sketch

❌

Açıklama:

Bazı gelişmiş tasarım ve prototipleme araçları, tasarımları doğrudan HTML, CSS ve JavaScript gibi web teknolojilerine dönüştürerek çalışan bir site çıktısı verebilir. Webflow, tasarımcıların görsel arayüzde çalışırken, çıktı olarak temiz ve üretim kalitesinde kod almasını sağlayan popüler bir web tabanlı platformdur.

Bazı gelişmiş tasarım ve prototipleme araçları, tasarımları doğrudan HTML, CSS ve JavaScript gibi web teknolojilerine dönüştürerek çalışan bir site çıktısı verebilir. Webflow, tasarımcıların görsel arayüzde çalışırken, çıktı olarak temiz ve üretim kalitesinde kod almasını sağlayan popüler bir web tabanlı platformdur.

Doğru Cevap: B

Soru 17

Aşağıdakilerden hangisi prototip hazırlamanın avantajlarından biri değildir?

Seçenekler

A
Hata tespiti yapar.

❌

B
Çalışmanın tamamının gözden geçirilmesine imkân sağlar.

❌

C
Ortak çalışma verimliliğini artırır.

❌

D
Geliştirme sürecini taleplere uygun şekilde planlar.

❌

E
Tasarım maliyetini azaltır.

✅

Açıklama:

Prototip hazırlamak, maliyetleri düşürme, erken geri bildirim alma ve kullanılabilirliği test etme avantajlarına sahiptir. Ancak prototipler, sadece görsel ve etkileşimsel bir model olduğundan, site trafiği yönetimi veya sunucu performansı gibi teknik arka uç (backend) konularıyla ilgili avantajlar sunmaz.

Prototip hazırlamak, maliyetleri düşürme, erken geri bildirim alma ve kullanılabilirliği test etme avantajlarına sahiptir. Ancak prototipler, sadece görsel ve etkileşimsel bir model olduğundan, site trafiği yönetimi veya sunucu performansı gibi teknik arka uç (backend) konularıyla ilgili avantajlar sunmaz.

Doğru Cevap: E

Soru 18

UX tasarımcıları tarafından kullanılan ve bir web sitesi, uygulama veya ürün için tasarımlarının bilgi hiyerarşisini tanımlamalarına ve planlamalarına olanak tanıyan uygulama aşağıdakilerden hangisidir?

Seçenekler

A
Ürün

❌

B
Tipografi

❌

C
Prototiper

❌

D
Mockup

❌

E
WireFrame

✅

Açıklama:

UX tasarımcılarının, bir web sitesi, uygulama veya ürün için bilgi hiyerarşisini tanımlamalarına ve planlamalarına olanak tanıyan uygulamalara Wireframe (Tel Kafes) uygulamaları denir. Bu uygulamalar, içeriğin ve işlevselliğin yapısal düzenine odaklanarak tasarımın temel iskeletini oluşturur.

UX tasarımcılarının, bir web sitesi, uygulama veya ürün için bilgi hiyerarşisini tanımlamalarına ve planlamalarına olanak tanıyan uygulamalara Wireframe (Tel Kafes) uygulamaları denir. Bu uygulamalar, içeriğin ve işlevselliğin yapısal düzenine odaklanarak tasarımın temel iskeletini oluşturur.

Doğru Cevap: E

Web Tasarımının Temelleri - Tüm Sorular

Ünite 1

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 2

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 3

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 4

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 5

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 6

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 7

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 8