Web Tasarımı 2023-2024 Final Soruları

1. Internet ve Temel Kavramlar

“Internet” (interconnected network), dünya çapındaki bilgisayar ağlarının birbirine bağlanmasıyla oluşan küresel bir iletişim altyapısıdır. Web tasarımı, bu ağ üzerinde sayfaların düzenlenmesi ve sunulması işlevini yerine getirir.

2. Çerçeveler (Frames)

Sayfayı birden çok pencereye bölmek için kullanılan klasik bir HTML yapısıdır. Modern projelerde genellikle iframe veya JavaScript tabanlı çözümler tercih edilir.

3. HTML ve CSS

Web sayfasının iskeletini HTML oluşturur. CSS ise içeriğin görünümünü ve düzenini şekillendirir. ID değerleri için #, sınıf değerleri için . ve evrensel seçici için * kullanılır.

4. Formlar ve Veri Gönderme

HTML formlarıyla kullanıcıdan bilgi alınır. GET metodu verileri URL’ye ekler, POST metodu ise verileri isteğin gövdesinde gönderir.

5. JavaScript Metotları

Örneğin slice(), dizeler veya dizilerden belirli bir bölümü almak için kullanılır. toExponential() ise sayıları üstel biçimde yazmaya yarar.

6. Tablo Yapıları

Veriyi satır ve sütunlar hâlinde göstermek için HTML tabloları kullanılır. <thead>, <tbody> ve <tfoot> etiketleri tabloyu bölümlere ayırır. rowspan satırları, colspan ise sütunları birleştirmeye yarar.

7. Web Geliştirme Süreci

Hedef belirleme, tasarım, geliştirme, test ve yayın/bakım gibi aşamalardan oluşur. Bu adımlar düzenli takip edildiğinde, proje daha sorunsuz ilerler.

8. Tarayıcılar

Günümüzün popüler web tarayıcıları arasında Chrome, Firefox, Safari, Opera ve Edge bulunur. Hepsinde uyumluluk testleri yapmak önemlidir.

9. Grafik ve Tasarım Araçları

Photoshop, Corel Draw, Illustrator gibi yazılımlar görsel tasarımda kullanılır. MySQL gibi sistemler ise veritabanı yönetimi içindir.

10. Türkçe Karakter Sorunu

Türkçe karakterlerin doğru görüntülenmesi için <meta charset=”UTF-8″> kullanılır. Bu sayede ç, ğ, ı, ö, ş, ü gibi harflerde sorun yaşanmaz.

1- Internet kelimesi …………………. kelimelerinin kısaltılmış halidir. Yukarıdaki cümlede boş bırakılan yere aşağıdakilerden hangisi gelmelidir?

A) interconnected network
B) computer network
C) intra network
D) interscan network
E) interstellar network

Cevap : A) interconnected network

Açıklama : “Internet” sözcüğü, “interconnected network” ifadesinin kısaltmasıdır.
Bu ifade, dünya çapında milyonlarca bilgisayar ağının birbirine bağlı olduğu küresel ağı ifade eder.
Web tasarımı açısından, internetin bu geniş bağlantı altyapısı üzerinde çalışması SEO optimizasyonu ve erişilebilirlik için önemlidir.

2- Bir web sayfasında alt pencereler oluşturulmasına olanak sağlayan, sayfanın birden fazla alana bölünüp farklı görüntüleme seçenekleri sunan ana yapı aşağıdakilerden hangisidir?

A) Formlar
B) Listeler
C) Çerçeveler
D) Form Öğeleri
E) Script Kodları

Cevap : C) Çerçeveler

Açıklama : Çerçeveler (frames), bir tarayıcı penceresinde birden fazla bölme oluşturarak
kullanıcılara aynı anda farklı içerik parçalarını gösterme olanağı sağlar.
Modern web tasarım trendlerinde artık çok sık kullanılmasa da tarihsel olarak önem taşır ve SEO uyumlu tasarımda da çerçevelerden kaçınmak tavsiye edilir.

3- Evrensel (global) seçici tanımlamak üzere kullanılan özel işaret aşağıdakilerden hangisidir?

A) * (yıldız)
B) . (nokta)
C) & (ampersand)
D) # (diyez)
E) Herhangi bir özel işaret kullanılmaz.

Cevap : A) * (yıldız)

Açıklama : CSS içerisinde “*” ifadesi, evrensel seçiciyi belirtir ve sayfadaki tüm HTML öğelerini hedef almak için kullanılır.
Global stil tanımlamaları (örneğin sıfırlama stilleri) SEO açısından içerik sunumunun tutarlı olmasını ve kullanıcı deneyiminin gelişmesini sağlar.

4- const dizi1 = [100, 150, 45, 68, 17, 85, 179, 247, 23, 64];
Dizi içerisinde yer alan 179 sayısını bir a değişkenine atayan kod satırı aşağıdakilerden hangisidir?

A) Let a = dizi1[“179”];
B) Let a = dizi1[179];
C) Let a = dizi1[7];
D) Let a = dizi1[6];
E) Let a = dizi1[7, “179”];

Cevap : D) Let a = dizi1[6];

Açıklama : Dizilerde indeks numaraları 0’dan başlar. 179 değeri, dizi1’de altıncı indekstedir (0,1,2,3,4,5,6).
JavaScript kodlamasında doğru değer alınabilmesi için bu indeksin kullanılması gerekir.

5- Bir tabloda iki satır birleştirilmek istendiğinde aşağıdaki etiketlerden hangisi kullanılmalıdır?

A) <td rowspan=2>
B) <tr rowspan=2>
C) <th colspan=2>
D) <tr colspan=2>
E) <td row-span=2>

Cevap : A) <td rowspan=2>

Açıklama : HTML tablolarında satır birleştirme işlemi “rowspan” özelliği ile yapılır.
Hücreyi (td) 2 veya daha fazla satıra yaymak istediğinizde “rowspan” kullanmak doğru yaklaşımdır.
SEO’da tablo yapıları, veri düzenini kolay okunur kılar.

6- “<h1> etiketinde, başlığın sayfanın neresinde görüntülenmesi talep ediliyorsa bunun etiket içerisinde belirtilebilmesi için ……………..
parametresinden yararlanılmaktadır.”

A) weight
B) center
C) meta
D) align
E) title

Cevap : D) align

Açıklama : “align” parametresi, <h1> başta olmak üzere birçok HTML etiketinde
içeriğin konumunu (sola, sağa, ortala vb.) belirlemek için kullanılır.
Ancak HTML5 ile birlikte CSS ile hizalama yapmak daha modern ve SEO-dostu bir yaklaşımdır.

7- “…… diğer metin ve kaynaklara hiperbağlantılar ile referans gösterebilir, imaj, fotoğraf, video, tablo, matematik formülleri vs. içerik sunabilirler.”
Yukarıdaki boşluğa aşağıdakilerden hangisi gelmelidir?

A) Etiketler
B) Komutlar
C) Web kaynakları
D) Hipermetinler
E) Hipergörseller

Cevap : D) Hipermetinler

Açıklama : Hipermetin (hypertext), bir metin içerisinden başka belgelere, sayfalara veya kaynaklara bağlantı vermeyi mümkün kılar.
Web tasarımında, SEO açısından bağlantıların doğru kullanılması arama motoru görünürlüğüne katkı sağlar.

8- “id” tabanlı seçici tanımlamak üzere kullanılan özel işaret aşağıdakilerden hangisidir?

A) . (nokta)
B) & (ampersand)
C) * (yıldız)
D) # (diyez)
E) Herhangi bir işaret kullanılmaz.

Cevap : D) # (diyez)

Açıklama : CSS’te “#” simgesi, “id” değerine sahip HTML etiketlerini seçmek için kullanılır.
Örneğin #main { color: red; } gibi bir tanımlama, id=”main” olan etikete stil uygular.

9- I. Safari
II. NeXTStep
III. Netscape
IV. Firefox
V. Opera
Yukarıda verilenlerden hangileri günümüz web tarayıcıları arasında yer alır?

A) IV ve V
B) I, IV ve V
C) II, IV ve V
D) I, II ve III
E) I ve V

Cevap : B) I, IV ve V

Açıklama : Safari (Apple), Firefox (Mozilla) ve Opera (Opera Software) günümüzde yaygınca kullanılan modern web tarayıcılarıdır.
NeXTStep ise bir işletim sistemiydi, Netscape ise eski bir tarayıcıdır.
SEO araçları ve testleri genellikle bu yaygın tarayıcılarda yapılır.

10- Karakter serisinin belirli bölümünü almak üzere kullanılan metod aşağıdakilerden hangisidir?

A) toUpperCase()
B) toLowerCase()
C) slice()
D) replace()
E) concat()

Cevap : C) slice()

Açıklama : JavaScript’te “slice()” metodu, bir dizge veya diziden belirli bir bölümü kopyalayarak yeni bir değer döndürmek için kullanılır.
Kullanıcı deneyimi ve SEO bakımından dinamik içerik manipülasyonunda sıkça tercih edilir.

11- “……….. metodu ile veri gönderilirken veri herkese açıktır, form parametreleri adres çubuğunda görüntülenir ve karakter sayısında sınır vardır.”
Yukarıdaki ifadedeki boşluğa aşağıdakilerden hangisi gelmelidir?

A) get
B) layer
C) post
D) input
E) form

Cevap : A) get

Açıklama : “get” metodu, form verisini URL üzerinden gönderir, bu yüzden görünür ve belirli bir karakter limitine tabidir.
Arama motoru optimizasyonu (SEO) açısından URL’ler anlamlı olmalıdır fakat hassas veriler “get” ile gönderilmemelidir.

12- Yuvarlatılmış ve üstel notasyon kullanılarak yazılmış bir sayıyı içeren dizeyi döndüren metod aşağıdakilerden hangisidir?

A) parseInt()
B) toString()
C) toExponential()
D) toFixed()
E) Number()

Cevap : C) toExponential()

Açıklama : JavaScript’te “toExponential()”, bir sayıyı üstel (scientific) notasyon şeklinde yazılmış dize olarak döndürür.
Sayısal verilerin sunumunda SEO faktörü düşük olsa da, doğru veri gösterimi kullanıcı memnuniyeti için önemlidir.

13- Sıralı liste yapısı oluşturmak için aşağıdaki etiketlerden hangisi öncelikle kullanılmalıdır?

A) <li>
B) <list>
C) <al>
D) <ul>
E) <ol>

Cevap : E) <ol>

Açıklama : HTML’de numaralı (sıralı) liste yapmak için <ol> etiketi kullanılır.
<li> etiketleri ise her bir maddeyi belirtir. Sıralı listeler, SEO açısından içeriği düzenli ve anlaşılır kılar.

14- “CSS dosyalarını HTML dosyalarına entegre etmek için kullanılan <link> etiketi, yer aldığı dosya ile dış bir dosya arasında bağlantı kurulmasını sağlar.
Etiket içerisinde yer alan ………. parametresi, bağlantı yapılan dış dosyaya hangi amaçla bağlanıldığını ifade etmek için kullanılır.”
Yukarıdaki cümlede boşluğa aşağıdakilerden hangisi gelmelidir?

A) “relation”
B) “rel”
C) “href”
D) “source”
E) “src”

Cevap : B) “rel”

Açıklama : <link rel=”stylesheet” href=”style.css”> gibi kullanımlarda “rel” (relationship) parametresi,
linkin ne amaçla ilişkilendirildiğini (örn. stylesheet) belirtir. Bu bilgi, tarayıcı ve SEO uyumluluğu için önemlidir.

15- Web geliştirme süreci en genel haliyle beş adımdan meydana gelir. Bu adımlardan üçüncüsü aşağıdakilerden hangisidir?

A) Tasarım
B) Yayın, bakım ve güncelleme
C) Geliştirme
D) Hedef Belirleme
E) Test

Cevap : C) Geliştirme

Açıklama : Web geliştirme sürecinde tipik sıralama:
1) Hedef Belirleme, 2) Tasarım, 3) Geliştirme, 4) Test, 5) Yayın-Bakım-Güncelleme şeklindedir.
Geliştirme aşaması, sitenin fonksiyonel olarak kodlandığı, SEO ve diğer teknik yapılandırmaların yapıldığı kritik süreçtir.

16- “file:///F:/webTasarim/WebSayfasi/iletisim.php?username=webTasarim&pas=123456&enter=Gönder”
Bir form vasıtasıyla kullanıcı adı ve şifre girilip ardından giriş düğmesine basıldığında yukarıdaki bağlantı adres çubuğunda görüntüleniyorsa, sayfalar arası istemci-sunucu sürecinde hangi metod kullanılmıştır?

A) Option
B) Post
C) Action
D) Head
E) Get

Cevap : E) Get

Açıklama : Adres çubuğunda form parametreleri görünüyorsa, veriler “GET” metodu ile gönderilmektedir.
SEO açısından bazı veriler (arama sorguları vb.) GET ile gönderilebilir, ancak güvenlik hassasiyeti bulunan veriler POST ile gönderilmelidir.

17- Bir tabloda genel tablo dökümünün ya da tabloya ilişkin açıklamaların eklenebileceği bir alt bölüm oluşturmak üzere <table> etiketi altında kullanılan etiket aşağıdakilerden hangisidir?

A) <th>
B) <tfoot>
C) <thead>
D) <tbody>
E) <caption>

Cevap : B) <tfoot>

Açıklama : <tfoot>, tablo alt bilgisini veya tabloya ilişkin açıklamaları içerecek alt bölümü tanımlar.
<thead> üst bölüm, <tbody> ise iç veri satırlarını barındırır. Doğru tablo yapısı, arama motoru taraması için daha düzenli bir iskelet sunar.

18- Aşağıdakilerden hangisi web tasarımı faaliyetine yönelik kullanılabilecek yazılımlardan değildir?

A) Photoshop
B) MySQL
C) FreeHand
D) Corel Draw
E) Adobe Illustrator

Cevap : B) MySQL

Açıklama : MySQL bir veritabanı yönetim sistemidir, tasarım aracı değildir.
Web tasarımında genellikle Adobe Photoshop, FreeHand, Corel Draw ve Illustrator gibi grafik programları kullanılabilir.
MySQL ise veri depolama ve yönetim sürecinde kullanılır.

19- Tablonun herhangi bir hücresinde yer alan içeriği hücre içerisinde sağa yaslı olacak şekilde ayarlamak için aşağıdaki etiketlerden hangisi kullanılabilir?

A) <td align=”left”>
B) <th align=”left”>
C) <td right>
D) <th align>
E) <td align=”right”>

Cevap : E) <td align=”right”>

Açıklama : HTML tablolarında <td align=”right”> kullanarak içeriği sağa yaslamak mümkündür.
Modern tasarımda ise CSS “text-align: right;” özelliğini kullanmak daha güncel ve SEO uyumludur.

20- Türkçe içerik hazırlanacağı zaman Türkçe karakterlerde gösterim sorunu yaşanmaması için gerekli tanımlamaların yapılması adına kullanılacak etiket aşağıdakilerden hangisidir?

A) <link>
B) <charset>
C) <utf>
D) <title>
E) <meta>

Cevap : E) <meta>

Açıklama : Türkçe karakterlerin doğru görüntülenebilmesi için
<meta charset=”UTF-8″> gibi bir tanımlama yapılır.
SEO optimizasyonunda, doğru karakter kodlaması içerik kalitesini ve kullanıcı memnuniyetini artırır.