Web Tasarımının Temelleri (Dönem 5) - Tüm Sorular

Unite 1

İnternetin ortaya çıkışına öncülük eden ARPANET’in geliştirilme amacı aşağıdakilerden hangisidir?
- A-) Eğlence içeriklerini paylaşmak
- B-) Küresel ticaret ağı kurmak
- C-) Sosyal medya platformları geliştirmek
- D-) posta sistemini kurmak
- Cevap E-) Güvenli bilgi paylaşımı sağlamak
World Wide Web’i (WWW) geliştiren bilim insanı kimdir?
- Cevap A-) Tim Berners-Lee
- B-) Vinton Cerf
- C-) Bill Gates
- D-) Steve Jobs
- E-) Alan Turing
Web standartlarını belirleyen kuruluş aşağıdakilerden hangisidir?
- A-) IANA
- B-) ICANN
- Cevap C-) W3C
- D-) ISO
- E-) IEEE
Aşağıdakilerden hangisi erişilebilir web tasarımının temel amaçlarından biridir?
- A-) Sadece gelişmiş cihazlarda çalışmak
- B-) Sadece engelli bireylerin kullanımına uygun olmak
- C-) Yalnızca görsel açıdan estetik olmak
- Cevap D-) Tüm kullanıcılar için kapsayıcı ve kullanılabilir içerik sunmak
- E-) İnternet hızını artırmak
İstemci–sunucu modelinde istemcinin temel görevi aşağıdakilerden hangisidir?
- A-) Verileri şifrelemek
- Cevap B-) Kaynak talep etmek
- C-) Protokolleri yönetmek
- D-) Dosyaları barındırmak
- E-) Güvenlik sağlamak
HTTP ile HTTPS arasındaki en önemli fark nedir?
- A-) HTTPS daha hızlıdır
- B-) HTTP yalnızca metin aktarır
- Cevap C-) HTTPS şifreli iletişim sağlar
- D-) HTTP yalnızca e-posta için kullanılır
- E-) HTTPS ücretsiz değildir
Alan adlarının IP adreslerine dönüştürülmesini sağlayan sistem aşağıdakilerden hangisidir?
- A-) URL
- Cevap B-) DNS
- C-) URI
- D-) FTP
- E-) SMTP
HTML işaretleme dilinin temel işlevi aşağıdakilerden hangisidir?
- Cevap A-) Web sayfasının yapısını tanımlamak
- B-) Web sayfasının görünümünü düzenlemek
- C-) Dinamik işlemler yapmak
- D-) Sunucu yönetimini sağlamak
- E-) Veritabanı işlemlerini yürütmek
CSS aşağıdakilerden hangisi için kullanılır?
- A-) Sunucu erişimini yönetmek
- B-) Verileri şifrelemek
- C-) Kullanıcı girişi doğrulamak
- Cevap D-) Sayfanın görselliğini düzenlemek
- E-) Dosya transferi yapmak
Aşağıdakilerden hangisi ön yüz (front-end) teknolojilerine örnek olarak verilebilir?
- A-) Node.js
- B-) MySQL
- C-) PostgreSQL
- D-) PHP
- Cevap E-) HTML, CSS ve JavaScript
Unite 2
Web tasarım sürecinin ilk adımı aşağıdakilerden hangisidir?
- Cevap A-) Hedef kitleyi belirlemek
- B-) Renk paletini seçmek
- C-) Sunucu altyapısını satın almak
- D-) Animasyonları tasarlamak
- E-) SEO çalışması yapmak
Aşağıdakilerden hangisi demografik veri kapsamında değerlendirilir?
- A-) Kullanıcının marka algısı
- B-) Kullanıcının hobileri
- C-) Kullanıcının site içi tıklama yolu
- Cevap D-) Kullanıcının yaş bilgisi
- E-) Kullanıcının satın alma motivasyonu
………………… 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?
- Cevap A-) Psikografik analiz
- B-) Demografik analiz
- C-) Hedef Kitle analizi
- D-) Davranışsal analiz
- E-) Maliyet analizi
Aşağıdakilerden hangisi kullanıcı yolculuğu aşamalarından birisi değildir?
- A-) Farkındalık
- B-) Araştırma
- C-) Karar
- Cevap D-) Kod yazma
- E-) Deneyim
Aşağıdakilerden hangisi bilgi mimarisini en doğru şekilde açıklar?
- A-) Web sitesinin renk paletinin ve tipografisinin seçilmesi
- Cevap B-) İçeriklerin düzenlenip kategorize edilmesi ve kullanıcıların kolayca erişebileceği biçimde yapılandırılması
- C-) Sunucu altyapısının ve veri tabanının ölçeklendirilmesi
- D-) Görsel öğeler için animasyon efektlerinin tasarlanması
- E-) Arama motoru optimizasyonu (SEO) metinlerinin yazılması
Aşağıdakilerden hangisi Wireframe’i en doğru şekilde tanımlar?
- A-) Web sitesinin son hâline yakın, tüm görsel detayları içeren yüksek sadakatli tasarım
- B-) Sunucu yapılandırmasını gösteren teknik diyagram
- Cevap C-) Görsel tasarımdan bağımsız, sitenin iskelet yapısını gösteren düşük sadakatli çizim/diyagram
- D-) Kullanıcı testlerinden elde edilen ısı haritaları
- E-) SEO için anahtar kelime listesi
Aşağıdakilerden hangisi içerik stratejisinin temel başlıklarından birisi değildir?
- A-) Dil ve Üslup
- B-) İçerik Türleri
- Cevap C-) SEO Uyumlu İçerik
- D-) Maliyet analizi
- E-) Güncellenebilirlik
…………………… 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?
- A-) Erişilebilirlik
- Cevap B-) Kullanılabilirlik
- C-) Gestalt psikolojisi
- D-) Yakınlık
- E-) Süreklilik
Aşağıdakilerden hangisi Gestalt ilkelerinden birisi değildir?
- A-) Yakınlık
- B-) Benzerlik
- C-) Süreklilik
- D-) Tamamlama
- Cevap E-) Tutarlılık
Aşağıdakilerden hangisi Jakob Nielsen’in 10 Kullanılabilirlik İlkesinden birisi değildir?
- A-) Sistem durumunun görünürlüğü
- B-) Sistem ve gerçek dünya uyumu
- C-) Kullanıcı kontrolü ve özgürlüğü
- D-) Hata önleme
- Cevap E-) Filtreleme
Unite 3
Arayüz tasarımının (UI) temel amacı aşağıdakilerden hangisidir?
- A-) Kullanıcıların yalnızca görsel olarak etkilenmesini sağlamak
- Cevap B-) Kullanıcıya bilgiye hızlı, kolay ve anlaşılır şekilde erişim sunmak
- C-) Sitenin yalnızca estetik görünümünü düzenlemek
- D-) Yazılım hatalarını ortadan kaldırmak
- E-) Kodlama süresini kısaltmak
Aşağıdakilerden hangisi etkileşim tasarımının (IxD) örneği değildir?
- A-) Bir butona basıldığında renginin değişmesi
- B-) Dosya yüklenirken ilerleme çubuğunun dolması
- C-) Menüde gezinirken tıklanabilir alanların büyümesi
- Cevap D-) Metin içeriğinin anlaşılır olması
- E-) Form doldururken hata mesajının çıkması
Renklerin kullanıcı üzerindeki etkisi ile ilgili aşağıdaki eşleştirmelerden hangisi doğrudur?
- A-) Mavi – Aciliyet ve tehlike
- B-) Kırmızı – Güven ve profesyonellik
- Cevap C-) Yeşil – Doğa ve huzur
- D-) Siyah – Neşe ve iyimserlik
- E-) Sarı – Lüks ve resmiyet
Tipografi ile ilgili aşağıdaki ifadelerden hangisi doğrudur?
- Cevap A-) Sans-serif yazı tipleri dijital ortamda okunabilirliği artırır.
- B-) Serif yazı tipleri küçük puntoda daha okunabilirdir.
- C-) Satır uzunluğu 100–150 karakter olmalıdır.
- D-) Kontrastın düşük olması metin okunabilirliğini artırır.
- E-) Ana metin için genellikle 10px puntolar tercih edilir.
Aşağıdakilerden hangisi grid sisteminin sağladığı avantajlardan biri değildir?
- A-) İçeriğin hizalanmasını sağlamak
- B-) Düzeni ve dengeyi artırmak
- C-) Görsel hiyerarşiyi oluşturmak
- D-) Kullanıcıya estetik bir deneyim sunmak
- Cevap E-) Görsel metaforların geliştirilmesi
Boşluk (white space) kullanımının temel işlevi aşağıdakilerden hangisidir?
- Cevap A-) Vurguyu artırmak ve karmaşayı azaltmak
- B-) Tasarıma daha fazla öğe eklemek
- C-) Okunabilirliği azaltmak
- D-) Sayfanın daha çok reklam almasını sağlamak
- E-) Metaforları güçlendirmek
Aşağıdakilerden hangisi WCAG erişilebilirlik ilkelerinden biri değildir?
- A-) Algılanabilirlik
- B-) Çalıştırılabilirlik
- C-) Anlaşılabilirlik
- D-) Sağlamlık
- Cevap E-) Estetiklik
Bir web sitesinde görsellere açıklayıcı metin eklemek hangi teknikle sağlanır?
- A-) Longdesc
- B-) Tabindex
- Cevap C-) Alt Metin (Alt Text)
- D-) Klavye Navigasyonu
- E-) Flexbox
Mobil öncelikli tasarım (Mobile First) yaklaşımının temel özelliği aşağıdakilerden hangisidir?
- A-) Öncelikle masaüstü tasarımı yapıp sonra mobil uyarlamak
- Cevap B-) Tasarım sürecine küçük ekranlardan başlayıp büyüğe doğru geliştirmek
- C-) Tüm cihazlarda aynı düzeni zorunlu tutmak
- D-) Yalnızca responsive grid sistemleri kullanmak
- E-) Görsel öğeleri küçülterek mobil cihazlara uyarlamak
Aşağıdakilerden hangisi farklı cihazlarda tutarlılık sağlamaya yönelik bir ilke değildir?
- A-) Marka renklerinin korunması
- B-) Navigasyon yapısının benzer kalması
- C-) İkonların aynı işlevi sürdürmesi
- Cevap D-) Farklı cihazlarda tamamen farklı arayüzler geliştirmek
- E-) Tipografinin aynı font ailesinden seçilmesi
Unite 4
HTML belgesinin en üst satırında hangi ibare bulunmalıdır?
- A-) <html>
- Cevap B-) <!DOCTYPE html>
- C-) <head>
- D-) < body>
- E-) < meta />
Aşağıdakilerden hangisi HTML etiketleri arasında yer almaz?
- A-) <header>
- B-) <footer>
- C-) <style>
- D-) <article>
- Cevap E-) <content>
Bir sayfanın başlık bilgisi hangi etiket içinde bulunur?
- A-) <body>
- B-) <footer>
- C-) <h1>
- D-) <meta>
- Cevap E-) <title>
Aşağıdaki etiketlerden hangisi bir görsel eklemek için kullanılır?
- A-) <video>
- B-) <audio>
- Cevap C-) <img>
- D-) <link>
- E-) <canvas>
HTML’de sırasız liste oluşturmak için hangi etiket kullanılır?
- A-) <ol>
- Cevap B-) <ul>
- C-) <li>
- D-) <table>
- E-) <div>
HTML’de başlık seviyelerini belirtmek için hangi etiketler kullanılır?
- A-) < h1> -< /h1> < h3> < /h3>
- Cevap B-) < h1> -< /h1> < h6> < /h6>
- C-) < heading> < /heading>
- D-) < header> - < footer> < /footer> < /header>
- E-) < title> < /title> < header> < /header>
Bir form elemanını tanımlamak için hangi etiket kullanılır?
- A-) <input>
- B-) <button>
- C-) <form>
- D-) <textarea>
- Cevap E-) <html>
Aşağıdakilerden hangisi kullanıcıdan veri toplamak için kullanılan bir HTML etiketidir?
- A-) <img>
- Cevap B-) <form>
- C-) <div>
- D-) <span>
- E-) <figure>
Semantik HTML nedir?
- A-) HTML’in hızlı yazılması.
- B-) Yalnızca görsel öğeleri içermesi.
- C-) Tasarımın estetik açıdan güzel olması.
- Cevap D-) Etiketlerin yapı ve anlamına göre doğru kullanılması.
- E-) Yalnızca metin içermesi.
Responsive (duyarlı) tasarımın amacı nedir?
- A-) Sadece masaüstü kullanıcıları için tasarım yapmak.
- Cevap B-) Farklı cihazlarda uyumlu görünüm sağlamak.
- C-) Sadece mobil cihazlar için tasarım yapmak.
- D-) Hızlı yüklenen sayfalar oluşturmak.
- E-) Görsel öğeleri kaldırmak.
Unite 5
Bir formda kullanıcıdan alınan verilerin gönderileceği hedef adresi belirleyen öznitelik aşağıdakilerden hangisidir?
- A-) method
- B-) name
- Cevap C-) action
- D-) type
- E-) id
Aşağıdaki giriş türlerinden hangisi kullanıcının yalnızca sayı girmesini sağlar?
- A-) <input type=”text”>
- B-) <input type=”password”>
- Cevap C-) <input type=”number”>
- D-) <input type=”email”>
- E-) <input type=”file”>
HTML5’te bir form alanının boş bırakılmamasını sağlayan öznitelik aşağıdakilerden hangisidir?
- A-) maxlenght
- B-) placeholder
- Cevap C-) required
- D-) value
- E-) alt
Bir tablonun başlık hücreleri için kullanılan HTML etiketi aşağıdakilerden hangisidir?
- A-) <tr>
- Cevap B-) <th>
- C-) <td>
- D-) <thead>
- E-) <caption>
Bir hücrenin yatayda birden fazla sütunu kapsamasını sağlayan öznitelik aşağıdakilerden hangisidir?
- Cevap A-) colspan
- B-) rowspan
- C-) align
- D-) merge
- E-) spanrow
Bir web sayfasının ana içeriğini belirtmek için kullanılan semantik HTML5 etiketi aşağıdakilerden hangisidir?
- A-) <section>
- B-) <header>
- C-) <article>
- D-) <footer>
- Cevap E-) <main>
Sayfa içinde gezinme bağlantılarını içeren semantik etiket aşağıdakilerden hangisidir?
- A-) <aside>
- B-) <footer>
- C-) <article>
- Cevap D-) <nav>
- E-) <section>
Görseller için alternatif metin sağlayarak erişilebilirliği artıran öznitelik aşağıdakilerden hangisidir?
- Cevap A-) alt
- B-) title
- C-) aria-label
- D-) id
- E-) name
Formların mantıksal olarak gruplanmasını sağlayan ve ekran okuyucular için açıklama ekleyen etiket ikilisi aşağıdakilerden hangisidir?
- A-) <form> – <input>
- Cevap B-) <fieldset> – <legend>
- C-) <label> – <textarea>
- D-) <section> – <article>
- E-) <main> – <aside>
WCAG standartları ile doğrudan ilişkili olan kavram aşağıdakilerden hangisidir?
- Cevap A-) Erişilebilirlik
- B-) Sayfa yüklenme hızı
- C-) Görsel çözünürlük
- D-) Responsive tasarım
- E-) SEO optimizasyonu
Unite 6
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?
- Cevap A-) HTML içeriğinin görsel düzenini, estetiğini ve sunumunu belirler.
- B-) Web sayfasının iskeletini ve anlamsal yapısını oluşturur.
- C-) Sayfaya yalnızca resim ve bağlantı gibi multimedya öğeleri ekler.
- D-) Sunucu tarafında veri işleme ve veritabanı bağlantılarını yönetir.
- E-) Kullanıcının tarayıcısına web sayfasını indirme hızını artırır.
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?
- A-) Satır İçi CSS Ekleme
- Cevap B-) Harici CSS Ekleme
- C-) Dahili (Sayfa İçi) CSS Ekleme
- D-) Etiket Seçici Kullanımı
- E-) Kimlik Seçici Kullanımı
Bir CSS kuralı, temel olarak üç bileşenden oluşur. Aşağıdakilerden hangisi bu üç temel bileşeni doğru sırasıyla vermektedir?
- A-) İçerik – Boyut – Hizalama
- B-) HTML Etiketi – Sınıf Adı – Değer
- Cevap C-) Seçici – Özellik – Değer
- D-) Seçici – Değer – Tarayıcı
- E-) Özellik – Seçici – Sözdizimi
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?
- A-) Kimlik Seçici (#)
- B-) Evrensel Seçici (*)
- C-) Etiket Seçici (hiçbir ön ek kullanılmaz)
- D-) Sözde Sınıf Seçici (:)
- Cevap E-) Class Seçici (.)
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?
- A-) Seçici (Selector)
- B-) Değer (Value)
- Cevap C-) Özellik (Property)
- D-) Kimlik (ID)
- E-) Sınıf (Class)
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?
- A-) Margin (Dış boşluk)
- B-) Border (Kenarlık)
- C-) Content (İçerik)
- Cevap D-) Padding (İç boşluk)
- E-) Width (Genişlik)
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?
- Cevap A-) border-collapse
- B-) border
- C-) border-color
- D-) padding
- E-) caption-side
Metin biçimlendirme özelliklerinden biri olan letter-spacing, metnin hangi tipografik unsurunu kontrol eder?
- A-) Satırlar arasındaki dikey boşluk.
- B-) Kelimeler arasındaki boşluk.
- C-) Paragrafın ilk satırının girintisi.
- Cevap D-) Bireysel harfler arasındaki yatay boşluk.
- E-) Metnin büyük/küçük harfe dönüştürülmesi.
CSS’te, vw (viewport width) ve vh (viewport height) gibi birimlerin temel özelliği nedir ve modern duyarlı (responsive) tasarımlarda neden tercih edilirler?
- A-) Sabit olmaları ve her cihazda aynı sonucu vermeleri.
- B-) Yalnızca kök (html) elemanının font boyutuna göre hesaplanmaları.
- C-) Geleneksel matbaa ölçüsü kullanmaları (point/pt).
- D-) Sadece metin rengini değiştirmek için kullanılmaları.
- Cevap E-) Cihazın ekran genişliğine veya yüksekliğine göre orantısal olarak değişmeleri.
Bir HTML öğesinin çevresindeki diğer kutularla arasındaki mesafeyi belirleyen ve Kutu Modeli’nin en dış katmanını oluşturan bileşen hangisidir?
- A-) Border
- Cevap B-) Margin
- C-) Padding
- D-) Content
- E-) Box-sizing
Unite 7
Flexbox hangi düzenler için en uygundur?
- A-) Tablo tabanlı düzenler
- B-) İki boyutlu düzenler
- Cevap C-) Tek boyutlu düzenler
- D-) Responsive düzenler
- E-) Grid sistemleri
Flexbox içinde öğelerin yatay hizalanmasını hangi özellik belirler?
- A-) align-items
- Cevap B-) justify-content
- C-) flex-direction
- D-) order
- E-) align-self
Flexbox’ta öğelerin görsel sırasını değiştirmek için hangi özellik kullanılır?
- A-) flex-grow
- B-) justify-items
- C-) flex-shrink
- Cevap D-) order
- E-) gap
Bir öğenin diğerlerinden daha fazla yer kaplaması için hangi özellik kullanılır?
- A-) flex-shrink
- Cevap B-) flex-grow
- C-) align-self
- D-) justify-content
- E-) flex-basis
Grid sisteminde sütunları tanımlamak için kullanılan özellik hangisidir?
- A-) grid-template-rows
- B-) grid-gap
- Cevap C-) grid-template-columns
- D-) grid-area
- E-) grid-auto-flow
Grid’de öğeler arasındaki boşluk hangi özellik ile ayarlanır?
- Cevap A-) grid-gap
- B-) padding
- C-) margin
- D-) justify-content
- E-) align-content
Grid sisteminde “fr” birimi neyi ifade eder?
- A-) Piksel ölçüsü
- B-) Yüzde
- C-) Rem birimi
- D-) Em birimi
- Cevap E-) Esnek pay
Bir öğeyi 2 sütun boyunca genişletmek için doğru yazım hangisidir?
- A-) grid-column: 2;
- B-) grid-template: span 2;
- C-) grid-row: 2;
- Cevap D-) grid-column: span 2;
- E-) grid-auto-flow: column;
Media queries hangi yapı ile tanımlanır?
- A-) @font-face
- Cevap B-) @media
- C-) @keyframes
- D-) @responsive
- E-) @container
Küçük etkileşimlerde kullanılan geçiş efektleri hangi özellik ile yapılır?
- A-) Animation
- B-) Keyframes
- C-) @media
- D-) Transform
- Cevap E-) transition
Unite 8
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?
- A-) yukarı - aşağıya
- B-) kapsayıcı - kutuya
- C-) kutu - kapsayıcıya
- D-) son (main-end) – başlangıça (main-start)
- Cevap E-) başlangıç (main-start) - sona (main-end)
Aşağıdakilerden hangisi Flexbox kapsamında kullanılan özellikler arasında yer almaz?
- A-) align-content
- B-) align-items
- C-) align-self
- Cevap D-) border
- E-) flex
Flexbox’ta öğeleri dikey hizalamak için aşağıdakilerden hangisi kullanılır?
- Cevap A-) align-content
- B-) flex-wrap
- C-) flex
- D-) order
- E-) flex-grow
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?
- Cevap A-) yatay - dikey
- B-) dikey - dikey
- C-) dikey - yatay
- D-) yatay - yatay
- E-) düz - dikey
Aşağıdakilerden hangisi Flexbox özelliklerinden align-self’in değerleri arasında yer almaz?
- A-) auto
- B-) baseline
- C-) flex-start
- D-) stretch
- Cevap E-) margin
CSS Flexbox özelliklerinden flex-directory varsayılan yerleşim yönü aşağıdakilerden hangisidir?
- A-) dikey
- Cevap B-) yatay
- C-) dikey ve yatay
- D-) yukarı
- E-) aşağı
CSS Flexbox’ta birden çok satıra yaymak için hangi özellik kullanılır?
- A-) column
- B-) Align-item
- C-) Align-content
- Cevap D-) Flex-wrap
- E-) Flex-grow
CSS Flexbox’ta flex-direction ve flex-wrap özelliklerini tek seferde tanımlamak için hangi özellik kullanılır?
- A-) Justify-content
- B-) Flex-start
- Cevap C-) Flex-flow
- D-) Flex-end
- E-) space-between
Aşağıdakilerden hangisi CSS Flexbox özelliklerinden justify-content’in değerleri arasında yer alır?
- A-) caption-side
- Cevap B-) center
- C-) transition
- D-) animation-direction
- E-) perspective
CSS Flexbox özelliklerinden order varsayılan aşağıdaki hangi değeri alır?
- A-) -1
- Cevap B-) 0 (sıfır)
- C-) 1
- D-) 2
- E-) 10
Çok satırlı yapılarda ögeleri çapraz eksende (dikey) hizalamak için kullanılan align-content değerlerinden biri aşağıdakilerden hangisidir?
- Cevap A-) space-around
- B-) order
- C-) flex-wrap
- D-) flex-grow
- E-) flex-direction
Aaşağıdakilerden hangisi Flexbox Modeli’ne ait olan bir avantajdır?
- A-) Bazı tarayıcılar tarafından desteklenir.
- B-) Ögelerde boyutlandırma yoktur.
- C-) Ögeler hizalanamaz.
- Cevap D-) Hemen hemen tüm tarayıcılar tarafından desteklenir.
- E-) Duyarlı ve uyarlanabilir web tasarımı sürecini zorlaştırır.
Aşağıdakilerden hangisi CSS (Cascading Style Sheets- Basamaklı Stil Sayfaları)’de Flexbox özellikleri arasında yer alır?
- A-) baseline
- B-) center
- C-) stretch
- Cevap D-) flex-basis
- E-) auto
CSS Flexbox flex-wrap özelliği hangi işlem için kullanılır?
- A-) Esnek kutu düzenin rengini değişmek için
- B-) Esnek kutu düzeninde dikey hizalama için
- C-) Esnek kutu düzeninde yatay hizalama için
- Cevap D-) Esnek kutu düzeninde birden çok satıra yaymak için
- E-) Esnek kutu düzeninde ki metinleri büyütmek için
Flexbox özelliklerinden order özelliğinin işlevi ile ilgili olarak aşağıdakilerden hangisi doğrudur?
- A-) Esnek kapsayıcı içindeki esnek kutu ögelerinin çapraz eksende hizalamasını ayarlar.
- Cevap B-) Esnek kapsayıcı içindeki ögelerin kaçıncı sırada görünmesi gerektiğini belirler.
- C-) Ögenin, esnek kutu içindeki diğer ögelere göre nasıl küçüleceğini belirtir.
- D-) Ögelerin yönünü belirtir.
- E-) Esnek bir uzunluğun bileşenlerini belirtir.
Justify Content değeri ve açıklaması ile ilgili olarak aşağıdakilerden hangisi yanlıştır?
- A-) flex-start: Ögeleri sola dayar ve soldan sağa hizalar.
- B-) flex-end: Ögeler sağa dayalı (bitiş noktası) olarak hizalanır.
- Cevap C-) center: Ögeler sola hizalanır.
- D-) space-between: İlk öge sola, son öğe sağa olacak şekilde ögeler eşit olarak hizalanır.
- E-) space-around: İlk ve son öge dışındaki ögelerin arasında eşit boşluklar bırakılır.
……… esnek ögelerin yerleştirildiği yönü belirler.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?
- A-) Align-items
- B-) Flex-basis
- C-) Align-content
- D-) Flex
- Cevap E-) Flex-direction
Unite 9
Aşağıdakilerden hangisi “Navbar” yapısı tasarlanırken kullanılabilecek elementlerden biri değildir?
- A-) <ul> </ul>
- B-) <ul> <li> </li> </ul>
- C-) <a> </a>
- D-) <ol> </ol>
- Cevap E-) <row> </row>
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?
- A-) Horizontal Navbar
- Cevap B-) Vertical Navbar
- C-) Navbar
- D-) Sticky NavBar
- E-) Fixed Navbar
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?
- Cevap A-) Horizontal Navbar
- B-) Vertical Navbar
- C-) Navbar
- D-) Sticky NavBar
- E-) Fixed Navbar
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?
- A-) pull
- B-) offset
- Cevap C-) float
- D-) margin
- E-) padding
Aşağıdakilerden hangisi bir resim galerisine responsive özelliği kazandırmak için kullanılır?
- Cevap A-) Media Query
- B-) JavaScript
- C-) JQuery
- D-) CSS Grid
- E-) CSS Container
……………….. 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?
- Cevap A-) 2D Transform
- B-) 2D Translate
- C-) 2D Rotate
- D-) 2D Scale
- E-) 2D Skew
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?
- A-) Rotate
- B-) Scale
- C-) Skew
- D-) SkewX
- Cevap E-) Translate
Aşağıdakilerden hangisi Transitions Metodu’na ait özelliklerden biri değildir?
- A-) Transition-delay
- B-) Transition-duration
- C-) Transition-property
- D-) Transition-timing-function
- Cevap E-) Transition-timed-function
“transition-delay” özelliğinin işlevi aşağıdakilerden hangisinde doğru verilmiştir?
- Cevap A-) Geçiş işlemi başlatılmadan önce saniye cinsinden ne kadar süre beklenileceğini belirlemek için kullanılır
- B-) Geçiş işleminin ne kadar sürede tamamlanacağını belirlemek için kullanılır
- C-) Geçiş işleminin hangi elementin özelliğine uygulanacağını belirlemek için kullanılır
- D-) Geçiş işleminin hız eğrisini belirlemek için kullanılır
- E-) Geçiş işlemi başlatılmadan önce dakika cinsinden ne kadar süre beklenileceğini belirlemek için kullanılır
Aşağıdakilerden hangisi 2 boyutlu dönüştürme yöntemlerinden biri değildir?
- A-) rotate
- Cevap B-) grow
- C-) scaleY
- D-) skewX
- E-) matrix
Aşağıdakilerden hangisi geçiş(transition) özellikleri arasında yer almaz?
- A-) transition-delay
- B-) transition-property
- Cevap C-) directional
- D-) ease-in
- E-) ease-in-out
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?
- A-) Translate
- Cevap B-) Rotate
- C-) Scale
- D-) ScaleX
- E-) ScaleY
Aşağıdakilerden hangisi bir nesnenin x ve y eksenindeki eğimini artırıp azaltmak için kullanılır?
- A-) SkewX
- B-) SkewY
- C-) Scale
- Cevap D-) Skew
- E-) Translate
Aşağıdakilerden hangisi geçiş işleminin hız eğrisini belirlemek için kullanılır?
- A-) transition-delay
- B-) linear
- C-) transition-duration
- D-) transition-property
- Cevap E-) transition-timing-function
……. 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?
- Cevap A-) Navbar
- B-) Image Gallery
- C-) 2D Transform
- D-) Transitions
- E-) Scale
Unite 10
Aşağıdakilerden hangisi Bootstrap kullanmanın avantajlarından birisi değildir?
- A-) Responsive (Duyarlı) sayfa tasarımlarının yapılması
- B-) Tasarım işlemlerini standardize etmesi
- C-) Aynı işleve sahip kodların tekrar yazılmasına gerek duyulmaması
- Cevap D-) Tasarım işlemlerini yavaşlatması
- E-) Tasarım işlemlerini daha kolay ve hızlı yapılması
Aşağıdakilerden hangisi Bootstrap v5 tarafından desteklenen internet tarayıcılar arasında yer almaz?
- Cevap A-) Internet Explorer
- B-) Chrome
- C-) Microsoft Edge
- D-) Firefox
- E-) Opera
HTML elementler üzerinde Bootstrap özellikleri ……… tanımı ile kullanılır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?
- A-) data
- B-) style
- Cevap C-) class
- D-) head
- E-) link
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?
- A-) Yalnız I
- B-) Yalnız III
- C-) I ve II
- Cevap D-) I, II ve III
- E-) I, II ve IV
Aşağıdakilerden hangisi Breakpoint (Kesme Noktası) tanımlarından birisi değildir?
- Cevap A-) xs
- B-) sm
- C-) md
- D-) lg
- E-) xxl
Aşağıdakilerden hangisi kullanılan cihaz ya da ekranı tamamen kapsayan “container” tanımıdır?
- A-) container
- Cevap B-) container-fluid
- C-) container-sm
- D-) container-full
- E-) container-xxl
Aşağıdakilerden hangisi bir HTML tablodaki satırları bir açık bir koyu renkte olacak şekilde renklendirir?
- A-) table-colored
- B-) row-colored
- Cevap C-) table-striped
- D-) row-striped
- E-) table-bordered
Aşağıdakilerden hangisi bir tablonun satır ve sütunlarına kenarlık eklemek için kullanılan özelliktir?
- A-) bordered
- Cevap B-) table-bordered
- C-) col-bordered
- D-) row-bordered
- E-) cell-bordered
Aşağıdakilerden hangisi bir HTML tabloya Responsive özelliği kazandırmak için kullanılır?
- A-) responsive
- Cevap B-) table-responsive
- C-) adaptive
- D-) table-adaptive
- E-) responsive adaptive
Aşağıdakilerden hangisi Bootstrap v5 içerisinde yer almaz?
- A-) Html
- B-) Css
- C-) JavaScript
- Cevap D-) JQuery
- E-) TypeScript
Boostrap v5 versiyonu, windows masaüstü ortamında aşağıdaki internet tarayıcılarından hangisi tarafından desteklenmez?
- Cevap A-) Safari
- B-) Firefox
- C-) Opera
- D-) Microsoft Edge
- E-) Chrome
1400 px ölçüsünden büyük kesme noktası tipi aşağıdakilerden hangisidir?
- A-) Small (Küçük)
- B-) Medium (Orta)
- C-) Large (Büyük)
- D-) Extra large (Ekstra büyük)
- Cevap E-) Extra extra large (Ekstra ekstra büyük)
Aşağıdaki Breakpoints (Kesme Noktaları) ile ilgili ifadelerden hangisi yanlıştır?
- A-) 12’lik ızgara yapısından oluşur.
- B-) Cihaza ait ekran ölçüsünü tespit ederek hangi kategoriye ait olduğunu belirler.
- Cevap C-) X-Small ekran boyutu için “xs” class tanımı kullanılır.
- D-) Small ekran boyutu için “sm” class tanımı kullanılır.
- E-) Medium ekran boyutu için “md” class tanımı kullanılır.
Aşağıdakilerden hangisi mouse (fare) imlecinin üzerinde bulunduğu satırı renklendirmek için kullanılan tablo yapısıdır?
- A-) table-mouseover
- Cevap B-) table-hover
- C-) table-responsive
- D-) table-cursor
- E-) table-pointer
Aşağıdakilerden hangisi Windows işletim sistemi tarafından desteklenen internet tarayıcıları arasında yer almaz?
- A-) Chrome
- B-) Firefox
- C-) Microsoft Edge
- D-) Opera
- Cevap E-) Safari
Aşağıdakilerden hangisi bir HTML tabloya Hoverable özelliği kazandırmak için kullanılır?
- A-) table-responsive
- B-) responsive
- C-) table-bordered
- Cevap D-) table-hover
- E-) table-striped
Grid sistemi ile ilgili olarak aşağıdakilerden hangisi yanlıştır?
- A-) Satır ve sütunlardan oluşan flexbox ile geliştirilmiş Layout sisteminin bir parçasıdır.
- B-) Satıları tanımlamak için row, sütunları tanımlamak için ise col class tanımı kullanılır.
- Cevap C-) Her bir satırda toplam 20 adet sütun bulunmaktadır.
- D-) Sütunlar farklı oranlarla birleştirilerek veya kaydırılarak kullanılabilir.
- E-) Container yapısı altında çalışmaktadır.
Unite 11
Aşağıdakilerden hangisi bir form elementinin responsive özelliği kazanabilmesi için alabileceği class tanımlarından biridir?
- A-) form-label-check
- B-) form-responsive
- Cevap C-) form-control
- D-) form-element
- E-) form-adaptive
Aşağıdakilerden hangisi bir form elementini kullanıcı etkileşimine kapatmak için kullanılan özelliktir?
- A-) Readonly
- Cevap B-) Disabled
- C-) Closed
- D-) Form-readonly
- E-) Form-disabled
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?
- A-) form-control-sm
- B-) form-control-xl
- C-) form-control-xxl
- Cevap D-) form-control-lg
- E-) form-larger
………………………… , 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?
- Cevap A-) Horizontal Form
- B-) Inline Form
- C-) Vertical Form
- D-) Legend Form
- E-) Fieldset
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?
- Cevap A-) checkbox
- B-) radio
- C-) selectbox
- D-) inputbox
- E-) dropbox
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?
- A-) form-group
- B-) button-group
- C-) list-group
- D-) label-group
- Cevap E-) input-group
Aşağıdakilerden hangisi “Form Validation (Doğrulama)” işlemi için form elementinin class tanımına eklenmesi gereken ifadedir?
- A-) novalidate
- B-) validate-form
- C-) form-validate
- D-) form-valid
- Cevap E-) needs-validation
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?
- A-) alert-primary
- B-) alert-danger
- Cevap C-) alert-success
- D-) alert-light
- E-) alert-dark
Aşağıdakilerden hangisi içeriklerin yatay ya da dikey sekmeler halinde gruplandırılarak gösterilebilmesi için kullanılan bileşendir?
- Cevap A-) Tab
- B-) List group
- C-) Breadcrumb
- D-) Navbar
- E-) Table
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?
- Cevap A-) Breadcrumb
- B-) Navbar
- C-) Navigation Bar
- D-) Accordion
- E-) Bread Bar
Aşağıdakilerden hangisi Bootstrap bileşenlerinden biri değildir?
- A-) Alert
- B-) Button
- Cevap C-) Square
- D-) Modal
- E-) Toast
Bir form elementinin sunucuya hiçbir şekilde veri göndermemesi için kullanılan özellik aşağıdakilerden hangisidir?
- A-) readonly
- Cevap B-) disabled
- C-) closed
- D-) form-readonly
- E-) form-disabled
Aşağıdakilerden hangisi “Form Validation (Doğrulama)” işlemi için form elementine eklenmesi gereken bir özelliktir?
- Cevap A-) novalidate
- B-) validate-form
- C-) form-validate
- D-) form-valid
- E-) needs-validation
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?
- A-) Input
- Cevap B-) Bootstrap
- C-) Button
- D-) Img
- E-) Table
Unite 12
Aşağıdakilerden hangisi mobil uyumlu web sitesini tanımlamaktadır?
- A-) Tek ekran üzerinden çalışılıp paylaşılan web sayfalarıdır.
- B-) Masaüstü tasarımı olarak ayarlanıp kullanıcıların mobil cihazları ile giriş yaptığı tüm siteler mobil uyumlu web sitelerdir.
- C-) Alan adının önünde sadece “m.alanadi.com” olan siteler mobil uyumlu sitelerdir.
- Cevap D-) Farklı çözünürlük ve boyutlardaki cihazlarda ideal görüntülenmesi için tasarlanan web sayfalarıdır.
- E-) Alan adının sonunda sadece “alanadi.com/m” olan siteler mobil uyumlu sitelerdir.
Tek bir site ve içerik ile ekran boyutuna göre ideal görüntüleme deneyimini sağlayan tasarımlara ne ad verilir?
- A-) Tek sayfalı tasarım
- B-) Görsel tasarım
- C-) Masaüstü tasarım
- D-) Uyarlanabilir tasarım
- Cevap E-) Duyarlı web tasarımı
Tek içerikten farklı boyut oluşturulduğu için tutarsız ara yüzler aşağıdaki tasarımlardan hangisinde oluşmaktadır?
- Cevap A-) Duyarlı web tasarımı
- B-) Uyarlanabilir web tasarımı
- C-) CSS tasarımı
- D-) HTML tasarımı
- E-) HTML 5 tasarımı
Aşağıdakilerden hangisi duyarlı web sitesi avantajlarından biridir?
- A-) Duyarlı web siteleri ile CSS ve HTML kullanmadan web sitesi tasarlanabilmektedir.
- B-) Farklı ekran ölçülerine uygun özgün tasarımlar yapılabilir.
- Cevap C-) 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.
- D-) Duyarlı web tasarımı çevre bilinci ile ilgili konuları kapsamaktadır.
- E-) Duyarlı web tasarımları işitme engelli kişiler için tasarlanmaktadır.
Aşağıdakilerden hangisi duyarlı web sitesi avantajlarından biridir?
- A-) Duyarlı web sitesi ile sadece masaüstü tasarımlar oluşturulabilmektedir.
- B-) HTML ve CSS olmadan da duyarlı web site tasarımları yapılabilir.
- C-) Duyarlı web sitesi sadece bazı konularda oluşturulabilmektedir.
- Cevap D-) Farklı ekranlara göre esnek boyutlandırmada sınırlı kontrol sunmaktadır.
- E-) Duyarlı web sitelerin analitik sayfalarına eklenmesi daha kolaydır.
Farklı boyutlardaki cihazlarda özel tasarımlar yapabilmeyi sağlayan esnek yapılı tasarım aşağıdakilerden hangisidir?
- Cevap A-) Uyarlanabilir Tasarım
- B-) Duyarlı Tasarım
- C-) Uyarlı ve Duyarlı Tasarım
- D-) Masaüstü Görünümlü Tasarım
- E-) UX UI Tasarım
Aşağıdakilerden hangisi uyarlanabilir (adaptive) tasarımın özelliklerinden biridir?
- A-) Tek HTML kodu ve tek site üzerinden tüm boyutlar ayarlandığı için bakımı kolaydır.
- Cevap B-) Uyarlanabilir tasarımda farklı ekranların site bileşenlerinin boyut ve davranışları özelleştirilebilir.
- C-) HTML ve CSS kodları yazılmadan da uyarlanabilir bir tasarım yapılabilir.
- D-) İşitme ve görme engelli kişiler için uyarlanabilir bir yapıdadır.
- E-) Çevre kontenjanına uyarlanabilir web siteleri kullanılabilir.
Aşağıdakilerden hangisi duyarlı ve uyarlanabilir tasarım farklarından biri değildir?
- A-) Cihaz boyutuna göre içeriklerin konumlandırılma durumu
- B-) Piyasaya yeni bir cihaz çıkarılması halinde duyarlı tasarımlar daha hızlı adapte olabilecektir.
- Cevap C-) İki tasarım prensibinin de web sitesini mobil uyumlu hale getirmesi
- D-) Duyarlı web siteleri uyarlanabilir web sitelerine göre daha yavaştır.
- E-) Uyarlanabilir web siteleri duyarlı web sitelerine göre daha esnektir.
Mobil uyumlu web site kütüphanelerinden birisi aşağıdakilerden hangisidir?
- A-) Unification
- B-) Summarize
- Cevap C-) Foundation
- D-) Digitalize
- E-) Performance
Aşağıdakilerden hangisi uyarlanabilir tasarım özelliklerinden biridir?
- Cevap A-) JavaScript kodları, uyarlanabilir tasarımlarda web site bileşenlerini kontrol etmek için kullanılabilir.
- B-) Duyarlı tasarım farklı cihazlarda benzer bir tasarım düzeni sunmaktadır.
- C-) Farklı ekranlara göre farklı düzenlemeler yapılamaz.
- D-) Belirli bir hedef kitlesi yoktur.
- E-) Uyarlanabilir tasarımda farklı ekranların site bileşenlerinin boyut ve davranışları özelleştirilemez.
Aşağıdakilerden hangisi ekran genişliğinin 250px altında olması hâlinde arka plan rengini sarı yapan koddur?
- A-) @media only screen and (max-with: 250px) {body {background-color:red;}}
- Cevap B-) @media only screen and (max-with: 250px) {body {background-color:yellow;}}
- C-) @media only screen and (min-with: 250px) {body {background-color:yellow;}}
- D-) screen and (max-with: 250px) {body {background-color:yellow;}}
- E-) @media only screen and (max-with: 250px)
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?
- Cevap A-) HTML
- B-) Bootstrap
- C-) Semantic - UI
- D-) Foundation
- E-) Materialize
Tasarlanan web sitelerinin mobil uyumlu olduğunu test etmek için aşağıdaki işlemlerden hangisi yapılır?
- A-) Masaüstü tasarımları kontrol edilebilir.
- B-) Tasarımlarda H5 gibi küçük başlık stilleri kullanılabilir.
- C-) Tasarımlarda 50x50 px’i geçmeyecek şekilde resimler kullanılabilir.
- D-) Tasarımlarda logonun büyüklüğü her zaman 70px altında ise site mobil uyumludur.
- Cevap E-) Mobil uyumluluk test siteleri kullanılabilir.
Aşağıdakilerden hangisi mobil uyumluluk testi için kullanılan sitelerden biri değildir?
- A-) search.google.com/test/mobile-friendly
- B-) responsivedesignchecker.com
- C-) ami.responsivedesign.is/
- D-) responsivetesttool.com/
- Cevap E-) google.com/userfriendly
Aşağıdakilerden hangisi @media etiketinde kullanılan medya tipleri arasında yer almaz?
- A-) Screen
- B-) Tty
- C-) Tv
- D-) Projection
- Cevap E-) Bootstrap
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?
- A-) I, II ve III
- B-) I, II ve IV
- C-) I, III ve IV
- D-) II, III ve IV
- Cevap E-) I, II, III ve IV
Unite 13
Aşağıdakilerden hangisi “çapraz tarayıcı uyumluluğu sorununun yaygın nedenleri” arasında yer almaz?
- A-) DOCTYPE kullanımı
- B-) Tarayıcıya özel CSS kullanımı
- C-) CSS sıfırlama
- Cevap D-) Yeni tarayıcı algılama
- E-) Eski tarayıcı algılama
Çapraz tarayıcı uyumluluğunda aşağıdaki ifadelerden hangisi davranış uyumluluğunu ifade eder?
- A-) Web sitesinin istenilen şekilde görünüp görünmediğini kontrol eder.
- B-) CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eder.
- C-) 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.
- D-) Sitenin farklı tarayıcılardaki performansına bakarak performansların yakın olup olmadığını kontrol eder.
- Cevap E-) 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.
Çapraz tarayıcı uyumluluğunda aşağıdaki ifadelerden hangisi kod uyumluluğunu ifade eder?
- A-) Web sitesinin istenilen şekilde görünüp görünmediğini kontrol eder.
- Cevap B-) CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eder.
- C-) Responsive tasarımdaki sitenin farklı mobil cihazlarda farklı çözünürlükteki görünümünü kontrol eder.
- D-) Sitenin farklı tarayıcılardaki performansına bakarak performansların yakın olup olmadığını kontrol eder.
- E-) Web sitesinin istenildiği gibi davranıp davranmadığını kontrol eder.
Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğu ile alakalı değildir?
- Cevap A-) PHP
- B-) JavaScript
- C-) CSS
- D-) HTML
- E-) CSS3
Aşağıdakilerden hangisi dünyada en çok kullanılan tarayıcılardan biri değildir?
- A-) Chrome
- B-) Firefox
- C-) Internet Explorer
- D-) Opera
- Cevap E-) Xcode
Aşağıdakilerden hangisi W3C (World Wide Web) konsorsiyumunun temel amaçları arasında yer alır?
- A-) Yeni yazılım dili oluşturmak
- B-) Teknoloji firmaları arasındaki rekabeti artırmak
- C-) Büyük teknolojik firmaları korumak
- Cevap D-) Web alanında standartlar oluşturmak<br type=”_moz” />
- E-) İnterneti dünyaya yaymak
Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğundaki etkenlerden biridir?
- A-) Kullanıcının işlemcisi
- B-) Kullanıcının ana kartı
- C-) Kullanıcının ekran kartı
- D-) Sunucunun işlemcisi
- Cevap E-) Kullanıcının işletim sistemi
…………. 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?
- Cevap A-) Çapraz tarayıcı uyumluluğu
- B-) Yazılım dili
- C-) JavaScript
- D-) CSS3
- E-) HTML5
Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğu parçalarından biri değildir?
- A-) Kod uyumluluğu
- Cevap B-) İşlemci uyumluluğu
- C-) Ara yüz uyumluluğu
- D-) Davranış uyumluluğu
- E-) Mobil uyumluluk
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?
- A-) Yalnız I
- B-) I ve II
- Cevap C-) I, II ve III
- D-) I ve III
- E-) Yalnız IV
Aşağıdaki tarayıcılardan hangisi CSS’de “-moz” ön ekini kullanmaktadır?
- Cevap A-) Firefox
- B-) Edge
- C-) Internet Explorer
- D-) Chrome
- E-) Opera
Aşağıdakilerden hangisinde HTML de kullanılan “BR” etiketinin W3C standartlarına göre kullanımı doğru verilmiştir?
- A-) <br> <br />
- B-) <br>
- Cevap C-) <br />
- D-) </br>
- E-) br
Aşağıdakilerden hangisi çapraz tarayıcı uyumluluğu testlerinde kullanılabilecek araçlardan biridir?
- Cevap A-) TestComplate
- B-) Photoshop
- C-) Microsoft Word
- D-) Microsoft Accsess
- E-) Paint
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?
- Cevap A-) Kod uyumluluğu
- B-) Ara yüz uyumluluğu
- C-) Davranış uyumluluğu
- D-) Mobil uyumluluk
- E-) Performans uyumluluğu
Kod uyumluluğu testi ile ilgili olarak aşağıdakilerden hangisi doğrudur?
- 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.
- Cevap 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.
Tarayıcıya dokümanın tip bilgisini sunmak için kullanılan etiket aşağıdakilerden hangisidir?
- A-) Browserling
- Cevap B-) Doctype
- C-) TestComplate
- D-) Ghostlab
- E-) Html
Unite 14
Aşağıdakilerden hangisi Mock-Up hazırlama ortamlarından biri değildir?
- Cevap A-) Mockminus
- B-) Moqups
- C-) Mockup Builder
- D-) Origami Studio
- E-) MockPlus
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?
- A-) Z-Deseni
- Cevap B-) Gutenberg
- C-) F-Deseni
- D-) N-Deseni
- E-) V-Deseni
Aşağıdakilerden hangisi WireFrame hazırlama ortamlarından biri değildir?
- Cevap A-) Luxery
- B-) Wireframe.cc
- C-) Balsamiq
- D-) InDesign
- E-) Axure
Aşağıdakilerden hangisi Wireframe kullanmanın faydaları için yanlıştır?
- 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.
- Cevap 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şağıdakilerden hangisinin en temel amacı sitedeki hiyerarşiyi düzenlemektir?
- A-) Tipografi
- B-) InVision
- C-) Mock-Up
- Cevap D-) Wireframe
- E-) prototip
Aşağıdaki tasarım ortamlarından hangisi web tabanlıdır?
- A-) InDesign
- B-) Axure
- Cevap C-) Wireframe.cc
- D-) Adobe XD
- E-) InVision Studio
F-Deseni tasarım modeli için aşağıdakilerden hangisi söylenebilir?
- 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
- Cevap 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ş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?
- Cevap 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
Tipografi aşağıdakilerden hangisi ile ilgilenmez?
- A-) Metin stilleri
- B-) Metin boyutlar
- Cevap C-) Metin içeriği
- D-) Metinlerin konumu
- E-) Metin aralığı
Facebook tarafından geliştirilen Mock-up hazırlama ortamı aşağıdakilerden hangisidir?
- Cevap A-) Origami Studio
- B-) Mockup Builder
- C-) Moqups
- D-) MockPlus
- E-) Sketch
Aşağıdakilerden hangisi prototip hazırlamanın avantajlarından biridir?
- A-) Tasarım süresini kısaltmak
- B-) Metinsel ifadelerin stillerini belirlemek
- C-) Web sitesinin özelliklerini belirlemek
- Cevap D-) Hataların tespit edilmesini kolaylaştırmak
- E-) Tasarım maliyetini azaltmak
Bir web sitesinin tasarım aşamaları sırasıyla aşağıdakilerden hangisinde doğru olarak verilmiştir?
- A-) MockUp - Wireframe - Prototip
- Cevap B-) Wireframe - MockUp - Prototip
- C-) Prototip - MockUp - Wireframe
- D-) MockUp - Prototip - Wireframe
- E-) Wireframe - Prototip - MockUp
Aşağıdakilerden hangisi prototip çalışmalarının amaçlarından biridir?
- A-) Arka plan resimleri, simgeler ve diğer dekoratif ögelerin seçimlerini yapmak
- Cevap 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
Genellikle doğayı ve sürdürülebilirliği çağrıştıran renk aşağıdakilerden hangisidir?
- A-) Turuncu
- B-) Mavi
- Cevap C-) Yeşil
- D-) Kahverengi
- E-) Kırmızı
Aşağıdakilerden hangisi prototip çalışmalarının amaçlarından biri değildir?
- 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
- Cevap 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şağıdakilerden hangisi oluşturduğunuz prototipi size html, css ve ilişkili javascript kodları ile tamamlanmış bir web sitesi şeklinde hazır getirebilir?
- A-) Balsamiq
- Cevap B-) webFlow
- C-) InDesign
- D-) Adobe XD
- E-) Sketch
Aşağıdakilerden hangisi prototip hazırlamanın avantajlarından biri değildir?
- 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.
- Cevap E-) Tasarım maliyetini azaltır.
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?
- A-) Ürün
- B-) Tipografi
- C-) Prototiper
- D-) Mockup
- Cevap E-) WireFrame

Web Tasarımının Temelleri (Dönem 5) - Tüm Sorular

Unite 1

Unite 2

Unite 3

Unite 4

Unite 5

Unite 6

Unite 7

Unite 8

Unite 9

Unite 10

Unite 11

Unite 12

Unite 13

Unite 14