AUZEF Web Tasarım Çıkmış Sorular

Web Tasarım dersi; internetin ve web'in temel işleyişini, HTML, CSS ve JavaScript ile sayfa hazırlamayı, web projesinin aşamalarını ve tasarım ilkelerini kapsar. Sınavda hem kavramsal bilgi hem de etiket ve parametre bilgisi sorulur.

İnternet, web ve protokoller

• İnternet, birbirine bağlı ağların küresel bütünüdür; sözcük 'interconnected network' ifadesinden kısaltılmıştır.
• TCP/IP verinin paketlenmesini, doğru adrese ulaşmasını ve hata denetimini düzenleyen temel protokol takımıdır.
• DNS, alan adını IP adresiyle ilişkilendirir; kök sunucular alan adının hangi IP adresinde olduğunu bildirir.
• Barındırma (hosting), site dosyalarının sürekli bağlı sunucularda saklanması hizmetidir.
• Dosya aktarımı bağlantıları ftp: ile başlayan adreslerle verilir.

HTTP, istek yöntemleri ve durum kodları

• Durum kodu grupları: 1xx bilgi, 2xx başarı, 3xx yönlendirme, 4xx istemci hatası, 5xx sunucu hatası.
• Geçerli istek yöntemleri Get, Post, Head ve Options'tır; Header yöntem değil, mesaj başlığıdır.
• GET verileri adres çubuğunda görünür ve uzunluğu sınırlıdır; POST verileri arka planda iletir.
• Adreste ?username=...&pas=... görülüyorsa gönderim GET ile yapılmıştır.
• F12 tuşu geliştirici araçlarını açarak sayfanın kaynak kodunu incelemeye olanak verir.

Web projesi süreci ve ekip

• Aşama sırası: hedef belirleme, tasarım, geliştirme, test, yayın-bakım-güncelleme.
• Proje mimarı müşteri beklentisi, sektör ve hedef kitleye bakarak sitenin genel kurgusunu belirler.
• Test uzmanı işlevleri ve güvenliği yayından önce denetleyip hata ve eksikleri bulur.
• Photoshop, Illustrator, FreeHand, Corel Draw ve SWiSH Max tasarım yazılımlarıdır; MySQL bunlardan değil, veri tabanıdır.
• Arama motoru optimizasyonu (SEO) sitenin arama sonuçlarında görünürlüğünü artırır.

Tasarım ilkeleri ve temel kavramlar

• İşlevsellik ilkesi sayfalar arası kopukluksuz, en kısa yoldan erişimi sağlayan bağlantı yapısını gerektirir.
• İçerik ilkesi sade, özgün, kopyasız ve göz yormayan içerik hazırlamayı ifade eder.
• Hipermetin, bağlantılarla başka kaynaklara geçiş verir ve görsel, video, tablo gibi içerik barındırır.
• Grafiksel kullanıcı arayüzü simge, pencere, düğme ve panellerin tümüdür.
• Güncel tarayıcılar Chrome, Firefox, Safari ve Opera'dır; NeXTStep işletim sistemidir, Netscape eski bir tarayıcıdır.

HTML etiketleri ve yapısı

• Belgenin başına DOCTYPE bildirimi konur; HTML sürümleri 1.0, 2.0, 3.2, 4.01 ve 5'tir, 1.5 yoktur.
• Görünür tüm öğeler body içine yazılır; title sayfa başlığını verir, head'de yer alır.
• Meta etiketi charset ile Türkçe karakter sorununu çözer; http-equiv refresh ile content otomatik yenileme sağlar.
• img etiketi kapatma gerektirmez; src görselin yolunu verir.
• Altı çizili metin için u, sırasız liste için ul, sıralı liste için ol, madde için li kullanılır.
• a etiketinde target pencereyi belirler; _blank yeni sekmede açar. Başlık hizası align ile verilir.

Tablo, form ve çerçeve

• caption tablo başlığını, tfoot alt bölümü verir; üst bölüm thead, veri satırları tbody'dir.
• Satır birleştirme td rowspan, sütun birleştirme td colspan ile yapılır; hücre içeriğini sağa yaslamak için td align=right kullanılır.
• Onay kutucuğunda birden fazla seçim yapılır, radyo düğmesinde tek seçim yapılır.
• Formlar giriş, üyelik, iletişim ve veri girişi içindir; veri özetleme formun işi değildir.
• Çerçeveler sayfayı bağımsız bölümlere ayırır; frameborder 0 kenarlığı kaldırır, 1 gösterir.

CSS

• Harici stil dosyası link rel=stylesheet href=dosya.css ile bağlanır.
• Evrensel seçici yıldız (*), id seçicisi diyez (#) işaretiyle yazılır.
• Padding içerik ile kenarlık arası iç boşluktur; dışındaki boşluk margin'dir.
• position: fixed eleman kaydırmada pencerede sabit kalır; box-sizing: border-box kenarlık ve iç boşluğu toplam boyuta dahil eder.
• @media sorguları farklı ekranlara duyarlı tasarım sağlar.

JavaScript ve HTML5

• Değişebilen değer let, sabit kalacak değer const ile tanımlanır.
• Veri tipleri String, Number, BigInt, Boolean gibidir; Loop veri tipi değil döngü yapısıdır.
• slice() metnin istenen kısmını alır; toExponential() sayıyı üstel gösterimle dize yapar.
• Dizi indeksi 0'dan başlar; 179 değeri dizi1[6] ile alınır.
• DOM olaylarına onload, onclick, onchange örnektir; onmouseon yoktur. Düğmede onclick ile getElementById('ilk').src değiştirilir.
• article etiketi bağımsız içerikleri belirten HTML5 anlamsal etiketidir.

Hipermetin

Başka kaynaklara bağlantı verebilen, görsel ve video gibi içerikler taşıyabilen metin yapısı.

TCP/IP

Verinin paketlenmesini ve hata denetimini düzenleyen temel internet protokol takımı.

DNS

Alan adlarını IP adresleriyle eşleştiren sistem.

Hosting

Site dosyalarının sunucularda tutulması hizmeti.

SEO

Sitenin arama motorlarında üst sıralarda çıkması için yapılan çalışmalar.

GUI

Grafiksel kullanıcı arayüzü; simge, pencere ve düğmelerle etkileşim ortamı.

GET ve POST

GET veriyi adreste gösterir, POST gizli iletir.

meta

Sayfa hakkında tarayıcıya bilgi veren etiket; charset ve refresh için kullanılır.

padding ve margin

Padding kenarlık içindeki, margin kenarlık dışındaki boşluktur.

rowspan ve colspan

Hücreyi sırasıyla birden çok satıra veya sütuna yayar.

@media

Ekran koşuluna göre farklı CSS uygulayan duyarlı tasarım yapısı.

const ve let

const sabit kalacak, let değişebilecek değer için kullanılır.

• ul sırasız liste, ol sıralı liste, u ise altı çizili metin etiketidir; üçü karıştırılmamalı.
• 3xx yönlendirmedir, uyum diye bir grup yoktur; Header yöntem değildir.
• Gerçek olmayan seçeneklere dikkat: HTML 1.5, onmouseon, tlink, TexMLP ve Loop veri tipi yanlış şıklardır.
• Başlık hizası align, link hedefi target ve _blank, görsel yolu src ile verilir.
• Süreç sırası hedef, tasarım, geliştirme, test, yayındır; mimar kurguyu, test uzmanı hata denetimini yapar.