Web Tasarımı

Web Tasarımının Temelleri: Başarılı Bir Web Sitesi İçin Kılavuz

Özet

Bu makale, web tasarımının temel kavramlarını ve başarılı bir web sitesi oluşturmanın ana unsurlarını ele almaktadır. İstanbul Üniversitesi Açık ve Uzaktan Eğitim Fakültesi (Auzef) Bilgisayar Programcılığı bölümünün “Web Tasarımı” dersi için hazırlanmış olan bu kaynak, öğrencilere web tasarımı ve kodlama konularında temel bilgiler sunar. Web tarayıcılarının anlaşılmasından, hipertekst kavramına, HTTP durum kodlarından, web sitesi geliştirme sürecine kadar birçok konu detaylı bir şekilde işlenmiştir. Amacımız, öğrencilerin bu bilgileri edinerek sınavlarda başarılı olmalarını sağlamak ve aynı zamanda gerçek dünya uygulamalarında kullanacakları temel becerileri kazanmalarına yardımcı olmaktır.

Giriş

Web tasarımı, günümüzde dijital dünyada varlık göstermenin en önemli unsurlarından biridir. Etkili bir web tasarımı, kullanıcı deneyimini iyileştirir, site trafiğini artırır ve nihayetinde site üzerinden elde edilen geliri maksimize eder. Bu nedenle, web tasarımının temel prensiplerini anlamak her web geliştiricisinin ve tasarımcısının öncelikleri arasında yer almalıdır.

Web Tarayıcıları ve Hipertekst

Web tarayıcıları, kullanıcıların internet üzerindeki bilgilere erişim sağladığı araçlardır. Firefox, Chrome, Safari ve Opera gibi günümüzde popüler olan tarayıcılar, web sitesi içeriklerini kullanıcıya sunar. Hipertekst ise, web sayfaları arasında bağlantı kurarak zengin bir kullanıcı deneyimi sunan metinlerdir. Bu kavramlar, web tasarımının temel taşlarıdır ve etkili bir web sitesi oluşturmak için derinlemesine anlaşılmalıdır.

HTTP Durum Kodları ve Web Geliştirme Süreci

HTTP, sunucu ile istemci arasındaki iletişimi düzenleyen bir protokoldür. HTTP durum kodları, web sitesine erişim isteklerinin durumunu belirtir. Başarı, bilgi, yönlendirme, istemci hatası ve sunucu hatası gibi çeşitli kategoriler altında toplanan bu kodlar, web geliştiricileri için önemli bilgiler sağlar. Web geliştirme süreci ise, hedef belirleme, tasarım, geliştirme, test ve yayın aşamalarından oluşur. Bu süreç, projenin başarılı bir şekilde tamamlanması için dikkatlice yönetilmelidir.

Web Tasarım İlkeleri

Başarılı bir web tasarımı, işlevsellik, kullanılabilirlik ve içerik gibi temel ilkelere dayanır. Kullanıcıların aradıkları bilgilere hızla ulaşmalarını sağlayan bir navigasyon yapısı, okunabilir ve anlaşılır içerikler, tarayıcılar arası uyum ve görsel estetik, etkili bir web sitesinin olmazsa olmazlarıdır.

Sonuç

Web tasarımı, teknik becerilerin yanı sıra yaratıcılığı da gerektiren bir alandır. Bu makalede ele alınan temel kavramlar ve ilkeler, öğrencilerin web tasarımı konusunda sağlam bir temel oluşturmalarına yardımcı olmak için tasarlanmıştır. lolonolo.com olarak, öğrencilere yönelik sunduğumuz bu ve benzeri kaynaklarla, onların akademik ve profesyonel hayatlarında başarılı olmalarına katkıda bulunmayı hedefliyoruz

1- Aşağıdakilerden hangisi günümüz web tarayıcıları arasında yer almaz?

A) Firefox
B) NeXTStep
C) Chrome
D) Safari
E) Opera

Cevap : B) NeXTStep

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

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

Cevap : C) Hipermetinler

3- Sunucular web sitelerine erişim isteklerini HTTP çerçevesinde işlemektedir. Sunucu-istemci arasındaki iletişim esnasında çeşitli durum kodları üretilerek veri alışverişi hakkında genel bir sonuca varılabilmektedir.
Aşağıdakilerden hangisi bu durum kodlarından biri değildir?

A) 1**-bilgi
B) 5**-sunucu hatası
C) 3**-uyum
D) 4**-tarayıcı hatası
E) 2**-başarı

Cevap : C) 3**-uyum

4- Müşterinin ihtiyaçlarına, web sitesinin kullanılacak iş alanına ve web sitesinin hedef kullanıcı profiline göre projenin genel konseptini belirleyen web sitesi geliştirme ekip üyesi aşağıdakilerden hangisidir?

A) İçerik tasarımcı
B) Proje mimarı
C) Proje müşteri temsilcisi
D) Web geliştirici
E) Web tasarımcı

Cevap : B) Proje mimarı

5- “Sayfa bağlantıları, kullanıcının mümkün olan en kısa sürede ve kolaylıkla aradığı içeriğe ulaşacağı şekilde yapılandırılmış olmalıdır. Sayfalar arasında kopukluk olmamalıdır. Mümkün oldukça her sayfadan diğer tüm sayfalara erişilebilecek şekilde bağlantılar sağlanmalıdır. ”
Yukarıdaki durum hangi web tasarım ilkesi kapsamında dikkat edilmesi gereken hususlar arasındadır?

A) İşlevsellik
B) Hedef
C) Sayfa tasarımı
D) Tarayıcı uyumu
E) İçerik

Cevap : A) İşlevsellik

6- Web tarayıcıdaki sayfa alanında tanımlanan bağlantıya tıkladığında bağlantının nerede açılacağını belirleyen parametre ve tıklanan bağlantının yeni bir sayfada açılması için bu parametreye atanması gereken değer sırasıyla hangi seçenekte doğru verilmiştir?

A) Target, _blank
B) Target, align
C) Target, _parent
D) Target, blank_
E) Target, parent_

Cevap : A) Target, _blank

7- Alan Adı Sistemi (Domain Name System-DNS) sunucuları ….. ile ….. hangi sunucuda ve hangi ….. yer aldığı bilgisini paylaşmaktadır.
Yukarıda verilen ifadede boş bırakılan yerlere sırasıyla aşağıdakilerden hangisi gelmelidir?

A) Kök sunucular-kullanıcı adının-alt sunucuda
B) Kullanıcı adı-IP adresinin-bilgisayarda
C) Kök sunucular-IP adresinin-gizli sunucularda
D) Kullanıcı adı-kök sunucularının-IP adresinde
E) Kök sunucular-alan adının-IP adresinde

Cevap : E) Kök sunucular-alan adının-IP adresinde

8- “Metinsel içeriklerin anlaşılır, uzun ve gereksiz cümlelerden arındırılmış olması gerekmektedir. Kopyalanmış ve orijinal olmayan metinler yerine web sitesine özgü farklı konularda insanların ihtiyaç duyduğu içerikler hazırlanmalıdır.
Vurgulama yapılırken olumsuz etkiler bırakmayacak ölçüde sadelik esasına bağlı kalınmalıdır. Görsel öğeler ilgi çekici bile olsa gözü yormayacak renk tonlamalarına sahip olmalıdır. İçerikler arasında kullanıcının kaybolmaması ve yorulmaması gerekmektedir.”
Yukarıda ifade edilen durumlar hangi web tasarım ilkesi başlığı altında dikkat edilmesi gereken hususlar arasındadır?

A) Kullanılabilirlik
B) Tarayıcı uyumu
C) İşlevsellik
D) Sayfa tasarımları
E) İçerik

Cevap : E) İçerik

9- Bazı web tarayıcıları HTML dosya tipini otomatik olarak algılayabilirken bazılarında bu özellik mevcut değildir.
Bu nedenle uyumsuzluk sorunu oluşmaması adına aşağıdaki etiketlerden hangisi dosya başına eklenmelidir?

A) <DOCTYPE HTM>
B) <HTML !DOCTYPE>
C) <!DOCTYPE HTML >
D) <head>
E) <meta>

Cevap : C) <!DOCTYPE HTML >

10- Web sayfası içerisinde sırasız liste yapısı oluşturmak için hangi etiket kullanılır?

A) <ul>
B) <uol>
C) <ol>
D) <list>
E) <dl>

Cevap : A) <ul>

11- Aşağıdakilerden hangisi HTML versiyonlarından biri değildir?

A) HTML 3.2
B) HTML 1.0
C) HTML 4.01
D) HTML 1.5
E) HTML 5.0

Cevap : D) HTML 1.5

12- İnternet üzerindeki iletişim sırasında herhangi bir taraftan gönderilecek veri paketlenerek iletilmektedir. Temel olarak verinin iletimi sırasında ağda nasıl paketleneceğini ve içerisinde hata olup olmadığının ne şekilde denetleneceğini belirleyen kurallar dizisi aşağıdakilerden hangisidir?

A) Hiper Metin Transfer Protokolü (Hyper Text Transfer Protokol-HTTP)
B) Dosya Transfer Protokolü (File Transfer Protocol-FTP)
C) Postane Protokolü (Post Oce Protocol-POP3)
D) Veri Paketleme Protokolü (Data Packing Protocol-DPP)
E) İletim Kontrol Protokolü/İnternet Protokolü (Transmission Control Protocol/Internet Protocol-TCP/IP)

Cevap : E) İletim Kontrol Protokolü/İnternet Protokolü (Transmission Control Protocol/Internet Protocol-TCP/IP)

13- Türkçe içerik hazırlanacağı zaman Türkçe karakterlerde gösterim sorunu yaşanmaması için sırasıyla aşağıdaki hangi etiket ve parametresi kullanılmalıdır?

A) Head, meta
B) Meta, keyword
C) Meta, http-equiv
D) Meta, abstract
E) Meta, charset

Cevap : E) Meta, charset

14- Fare, klavye, monitör gibi donanımsal bileşenler vasıtasıyla kullanıcının etkileşimde bulunduğu simgeler, pencereler, düğmeler, hipermetinler ve panellerin bütünü ….. olarak ifade edilmektedir.
Boşluğa aşağıdaki ifadelerden hangisi gelmelidir?

A) Grafiksel kullanıcı arayüzü
B) Web arka planı
C) Web tasarımı
D) Kullanıcı formu
E) Metinsel kullanıcı arayüzü

Cevap : A) Grafiksel kullanıcı arayüzü

15- Aşağıdakilerden hangisi biçimlendirme-işaretleme dilleri arasında yer almaz?

A) GenCode
B) LaTeX
C) TexMLP
D) XML
E) HTML

Cevap : C) TexMLP

16- “Elektronik, kablosuz ve optik ağ teknolojileri kullanılarak, çeşitli protokoller ile iletişim kurmak amacıyla birbirine bağlı bilgisayarlar ağının tamamıdır.” tanımı aşağıdaki kavramlardan hangisine aittir?

A) Protokol
B) İstemci
C) Sunucu
D) İnternet
E) Yerel ağ

Cevap : D) İnternet

17- I- Test
II- Geliştirme
III- Tasarım
IV- Hedef Belirleme
V- Yayın, bakım ve güncelleme
Yukarıda verilen web geliştirme süreci adımlarının doğru sıralanışı aşağıdakilerden hangisidir?

A) IV-V-I-II-III
B) III-I-II-IV-V
C) IV-II-III-I-V
D) IV-III-II-I-V
E) I-II-III-IV-V

Cevap :  D) IV-III-II-I-V

18- Web sayfasında metinlere yer verilecektir. Bu metinlerin belirli bölümünü değil de hepsini birden biçimlendirmek üzere kullanılan etiket hangisidir?

A) <body>
B) <title>
C) <basefont>
D) <font>
E) <text>

Cevap : A) <body>

19- Aşağıdakilerden hangisi <body> etiketine ait parametrelerden değildir?

A) Background
B) Text
C) Tlink
D) Vlink
E) Bgcolor

Cevap : C) Tlink

20- Photoshop, Adobe Illustrator, FreeHand, Corel Draw, SWiSH Max gibi yazılımlar hangi faaliyete yönelik kullanılabilecek yazılımlardır?

A) Proje yönetimi
B) Web sitesi-veri tabanı bağlantısı kurma
C) Web tasarımı
D) Kullanıcı deneyimi analizleri
E) Web sitesi test faaliyetleri

Cevap : C) Web tasarımı

21- ….. etiketinde, başlığın sayfanın neresinde görüntülenmesi talep ediliyorsa bunun etiket içerisinde belirtilebilmesi için ….. parametresinden yararlanılmaktadır.
Boşluklara sırasıyla gelebilecek uygun ikili hangisidir?

A) <h1>-align
B) <meta>-align
C) <h3>-center
D) <head>-title
E) <h1>-weight

Cevap : B) <meta>-align