Web Tasarımı 2025-2026 Final

JavaScript dilinde ‘slice()’ metodu, bir string (metin) veya array (dizi) içerisindeki belirli bir başlangıç ve bitiş indeksine göre karakter serisinin veya elemanların belirli bir bölümünü kopyalayıp almak için kullanılır. ‘toLowerCase()’ küçük harfe çevirir, ‘toUpperCase()’ büyük harfe çevirir, ‘replace()’ metin değiştirir, ‘concat()’ ise birleştirme yapar.

HTML formlarında sunucuya veri göndermek için temel olarak GET ve POST metotları kullanılır. GET metodu ile gönderilen form verileri, URL adres çubuğunda parametreler halinde açıkça görünür (örnekte ? işareti sonrasında kullanıcı adı ve şifre açıkça adres çubuğuna eklenmiştir). POST metodunda ise veriler arka planda gizli bir şekilde gönderilir.

Eski HTML standartlarında ve temel etiket kullanımlarında bir başlığın veya paragrafın yatayda hizalanması (sağa, sola, ortaya) için ‘align’ parametresi (niteliği) kullanılırdı (örneğin: ). Günümüzde bu işlem CSS ‘text-align’ özelliği ile yapılsa da, klasik HTML etiketi parametresi olarak boşluğa ‘align’ gelmelidir.

DOM (Belge Nesnesi Modeli) olayları (events), kullanıcının veya tarayıcının gerçekleştirdiği eylemleri yakalamak için kullanılır. ‘onload’ (sayfa yüklendiğinde), ‘onunload’ (sayfadan çıkıldığında), ‘onclick’ (tıklandığında) ve ‘onchange’ (değer değiştiğinde) geçerli JavaScript DOM olaylarıdır. Ancak ‘onmouseon’ diye standart bir olay yoktur; doğru kullanım ‘onmouseover’ veya ‘onmouseenter’ şeklinde olmalıdır.

HTML’de dosya yolları (file paths) belirtilirken bulunulan klasörden bir üst (ana) klasöre çıkmak için ‘../’ ifadesi kullanılır. ‘baglanti.html’ dosyası ‘sayfalar’ klasörünün içindedir. ‘iulogo.jpg’ ise onunla aynı seviyedeki ‘gorseller’ klasörünün içindedir. Bu nedenle önce ‘../’ ile ‘WebSayfasi’ (ana) klasörüne çıkılmalı, ardından ‘gorseller’ klasörüne girilerek dosya seçilmelidir.

CSS’te ‘h2’ gibi bir etiket seçici (type selector) tanımlandığında, yazılan stil kuralları HTML belgesindeki o etiketi taşıyan ‘tüm’ elementlere otomatik olarak uygulanır. Bu durumda sayfadaki tüm başlıkları ayrı bir class veya id çağırmaya gerek kalmaksızın otomatik olarak ortalanacaktır (text-align:center).

Kod incelendiğinde toplamda 4 adet (tablo satırı) etiketi kullanıldığı görülmektedir (Yani 4 satır). Sütun sayısına bakıldığında; 1. ve 4. satırlarda 1 adet ve 2 adet olmak üzere toplam 3’er hücre (sütun) vardır. Ortadaki satırlarda ise ‘colspan=”2″‘ kullanılarak hücreler birleştirilmiş ve toplam genişlik yine 3 sütunluk alana oturtulmuştur. Sonuç olarak tablo 4 satır ve 3 sütundan oluşmaktadır.

HTML’deki form ( ) etiketleri; kullanıcıdan sistem girişi için (kullanıcı adı/şifre), web sitesine üye olmak için, iletişim kutularından mesaj göndermek ve genel anlamda veritabanına kaydedilecek veri girişlerini sağlamak için kullanılır. Web sayfasındaki verileri analiz etmek veya özetlemek formların değil, raporlama araçlarının veya analiz dillerinin görevidir.

İşaretleme dilleri (Markup Languages), metinlerin nasıl yapılandırılacağını, biçimlendirileceğini ve gösterileceğini tanımlayan sistemlerdir. HTML (Hypertext Markup Language), XML (eXtensible Markup Language), LaTeX (belge hazırlama sistemi) ve GenCode genel kabul görmüş işaretleme dili veya standartlarıdır. Ancak TexMLP diye tanımlı ve genel geçerli bir işaretleme dili literatürde bulunmamaktadır.

Web tasarımının temelini oluşturan HTML (HyperText Markup Language), zaman içinde gelişerek farklı versiyonlara sahip olmuştur. Tim Berners-Lee tarafından oluşturulan ilk sürümden (1.0) sonra HTML 2.0, HTML 3.2, HTML 4.01 ve günümüzde standart olarak kullanılan HTML5 (5.0) sürümleri yayımlanmıştır. Ancak resmi olarak “HTML 1.5” adıyla yayımlanmış bir sürüm bulunmamaktadır.

CSS’te Evrensel Seçici (Universal Selector), sayfadaki istisnasız tüm HTML elementlerine aynı anda stil atamak (örneğin margin ve padding sıfırlaması yapmak) için kullanılır ve klavyedeki yıldız (*) işareti ile temsil edilir. Nokta (.) sınıf (class) seçicileri, diyez (#) ise kimlik (id) seçicileri için kullanılır.

HTML tablolarında hücreleri yatay veya dikey olarak birleştirmek için veya etiketleri içerisinde ‘colspan’ ve ‘rowspan’ özellikleri kullanılır. Dikey olarak alt alta duran “satırları (row)” birleştirmek için ‘rowspan’ kullanılırken; yan yana duran “sütunları (column)” birleştirmek için ‘colspan’ kullanılır. Soru iki satırı birleştirmeyi sorduğu için doğru kullanım şeklinde olmalıdır.

Dünya genelinde milyonlarca bilgisayarın, sunucunun ve cihazın TCP/IP gibi ortak protokoller aracılığıyla elektronik, optik (fiber) ve kablosuz teknolojiler üzerinden birbirine bağlandığı en geniş, küresel ve devasa iletişim ağına ‘İnternet’ (Ağların Ağı) denir.

DNS (Domain Name System), karmaşık sayılardan oluşan IP adreslerini insanların kolayca hatırlayabileceği alan adlarına (google.com vb.) çeviren sistemdir. Bu süreçte DNS sunucuları, en üst hiyerarşide bulunan ‘kök sunucular’ (root servers) aracılığıyla, aranan ‘alan adının’ fiziksel olarak hangi ‘IP adresinde’ (sunucuda) yer aldığı bilgisini çözer ve tarayıcı ile paylaşır.

HTML formlarında çoktan seçmeli sorularda kullanıcının ‘sadece bir’ seçeneği işaretlemesi isteniyorsa Yuvarlak şekilli Radyo Düğmeleri (radio button) kullanılır. Ancak kullanıcının sunulan seçeneklerden ‘birden fazlasını’ (veya hepsini) aynı anda işaretleyebilmesi isteniyorsa Kare şekilli Onay Kutucuğu (checkbox) form elemanı tercih edilir.

Harici bir CSS (Cascading Style Sheets) dosyasını HTML belgesine bağlamak için HTML’in bölümü içerisinde etiketi kullanılır. Bu etiket, bağlanan dosyanın bir stil şablonu olduğunu belirten ‘rel=”stylesheet”‘ özelliğini ve dosyanın yolunu belirten ‘href=”dosya.css”‘ özelliğini mutlaka içermelidir.

İşletim sistemlerinde ve yazılımlarda kullanıcıların kod veya metin tabanlı komutlar yazmak (Metinsel kullanıcı arayüzü / CLI) yerine; butonlar, pencereler, ikonlar ve görsel paneller kullanarak mouse (fare) ve klavye aracılığıyla cihazla iletişim kurmasını sağlayan etkileşimli görsel ortamlara ‘Grafiksel Kullanıcı Arayüzü’ (GUI – Graphical User Interface) adı verilir.

Profesyonel bir web tasarım sürecinde adımlar hiyerarşik bir mantıkla ilerler. Önce projenin amacı, kitlesi ve beklentileri planlanır (Hedef Belirleme – IV). Ardından görsel şablonlar ve kullanıcı arayüzü çizilir (Tasarım – III). Sonrasında bu tasarım kodlanarak çalışan bir sisteme dönüştürülür (Geliştirme – II). Yayına alınmadan önce olası hataları bulmak için denenir (Test – I). Son olarak site kullanıma açılır ve sürekli takibi yapılır (Yayın, bakım ve güncelleme – V).

HTML tablolarında o tabloya ait ana başlığı, açıklamayı veya tablonun adını belirlemek için etiketi kullanılır. Bu etiket genellikle etiketinden hemen sonra yazılır ve varsayılan olarak tablonun en üstünde, ortalanmış bir şekilde görünür. tablo başlık grubunu,

ise tekil sütun başlığını ifade eder.

Soruda JavaScript ile oluşturulmuş ‘kedi’ objesinin bir fonksiyonu (met) çağrılmaktadır. Fonksiyon içerisinde ‘this.adi’ ifadesi ile kedinin adı olan ‘Nazlı’, araya ‘ ve ‘ kelimesi eklenerek sahibinin adıyla birleştirilmektedir. Kod parçasındaki küçük-büyük harf (‘sahipadi’ ile ‘this.sahipAdi’) uyuşmazlığı bir yazım hatası olsa da, algoritmanın ve sorunun beklediği asıl mantıksal çıktı (iki string’in + operatörü ile birleştirilmesi sonucu) ‘Nazlı ve Fatma’ ifadesidir.

CSS Kutu Modelinde bir element dört temel katmandan oluşur. En içte içerik (content) bulunur. İçerik ile elementi çevreleyen dış kenarlık (border) arasında kalan ve arka plan rengini alan ‘iç boşluğa’ Padding denir. Kenarlığın (border) tamamen dışında kalan, elementler arası mesafeyi ayarlayan ‘dış boşluğa’ ise Margin adı verilir.

HTML5 standartlarında arama motorlarının ve tarayıcıların içeriği daha iyi anlaması için semantik (anlamlı) etiketler geliştirilmiştir. Bir gazete veya dergideki ‘makale’ gibi, sayfanın geri kalanından bağımsız olarak tek başına okunup dağıtıldığında bile tam ve bağımsız bir anlam ifade eden içerikleri sarmalamak için etiketi kullanılır. ise anlamsız, sadece gruplama yapan genel bir kutu etiketidir.

Modern JavaScript’te (ES6) değişken tanımlamak için genellikle let veya const kullanılır. Eğer değişkene atadığımız değer ilerleyen satırlarda değişecekse (örneğin bir sayaç gibi) ‘let’ kullanılır. Ancak pi sayısı, KDV oranı veya değişmeyecek bir ayar değeri gibi başlangıçta bir kez değer atanan ve program boyunca asla değiştirilmemesi (sabit kalması) gereken değişkenler ‘const’ (constant/sabit) anahtar kelimesi ile tanımlanır.

Responsive (duyarlı) web tasarımının kalbini Medya Sorguları (@media queries) oluşturur. Geliştiriciler bu yapı sayesinde tarayıcının genişliğine (örneğin ekran genişliği 768px’den küçükse) bakarak şartlı CSS kodları yazabilirler. Bu sayede bir web sitesinin menüsü veya sütunları masaüstünde yan yana görünürken, mobil cihazlarda algılanıp otomatik olarak alt alta dizilecek şekilde değiştirilebilir.

CSS’te ‘position’ özelliği elemanların yerleşimini belirler. Eğer bir butonu veya menüyü (örneğin ‘Yukarı Çık’ butonu veya ‘Sabit Üst Menü’) sayfayı ne kadar aşağı kaydırırsanız kaydırın ekranın her zaman aynı köşesinde (görünür alanda) asılı bırakmak istiyorsanız ‘position: fixed;’ değerini kullanmanız gerekir. Bu değer, nesneyi belgenin normal akışından kopararak doğrudan tarayıcı penceresine (viewport) sabitler.