Web Geliştirme Nedir? HTML, CSS ve JavaScript ile Web Sitesi Oluşturma Rehberi

İnternette ziyaret edilen kurumsal siteler, bloglar, e-ticaret platformları, haber portalları ve çevrim içi uygulamalar farklı web teknolojilerinin birlikte çalışmasıyla oluşturulur. Bir sayfanın başlıkları, metinleri ve bağlantıları HTML ile yapılandırılırken görsel düzeni CSS ile hazırlanır. Kullanıcının gerçekleştirdiği işlemlere göre sayfanın değişmesi ve etkileşimli özelliklerin çalışması ise JavaScript ile sağlanabilir.

Web geliştirme, yalnızca ekrana birkaç metin ve görsel yerleştirmekten oluşmaz. Sayfanın farklı cihazlarda doğru görüntülenmesi, kullanıcıların içeriklere kolayca ulaşabilmesi, formların anlaşılır olması, bağlantıların doğru çalışması ve arayüzün erişilebilir biçimde hazırlanması gerekir. Modern bir web sitesi; teknik yapı, tasarım, içerik, performans ve kullanıcı deneyimi gibi birbiriyle bağlantılı birçok konuyu içerir.

HTML, CSS ve JavaScript web geliştirmenin temel teknolojileridir. HTML sayfanın anlamlı iskeletini oluşturur. CSS bu yapının görünümünü ve yerleşimini düzenler. JavaScript ise sayfaya davranış ve etkileşim kazandırır. Bu üç teknoloji birlikte kullanıldığında statik bir içerik sayfasından dinamik ve kullanıcı odaklı bir web arayüzüne kadar farklı projeler geliştirilebilir.

Bu rehberde web geliştirmenin ne olduğu, web sitelerinin nasıl çalıştığı, HTML etiketleri, CSS seçicileri, responsive tasarım, JavaScript programlama mantığı, DOM işlemleri, form yapıları, erişilebilirlik, performans ve web geliştirme öğrenme süreci ayrıntılı biçimde ele alınmaktadır.

Temel web teknolojilerini yapılandırılmış bir öğrenme içeriğiyle incelemek isteyenler için HTML, CSS ve JavaScript ile web geliştirme, bir web sayfasının içerik yapısından etkileşimli özelliklerine kadar uzanan temel konuları bir araya getirmektedir.

Web Geliştirme Nedir?

Web geliştirme, internet tarayıcıları üzerinden erişilebilen web sitelerinin ve web uygulamalarının tasarlanması, kodlanması, test edilmesi ve sürdürülebilir biçimde yayımlanması sürecidir.

Web geliştirme kapsamında gerçekleştirilebilecek çalışmalar şunlardır:

Kurumsal web sitesi hazırlamak
Blog veya haber sitesi oluşturmak
E-ticaret arayüzleri geliştirmek
Kullanıcı kayıt ve giriş ekranları hazırlamak
Yönetim panelleri oluşturmak
Form ve anket sistemleri geliştirmek
Dinamik ürün katalogları hazırlamak
Web tabanlı iş uygulamaları oluşturmak
Mobil cihazlara uyumlu sayfalar geliştirmek
API servislerinden alınan verileri göstermek

Web geliştirme süreci projenin kapsamına göre yalnızca kullanıcı arayüzünü veya arka plandaki sunucu işlemlerini içerebilir. Bazı geliştiriciler frontend alanında çalışırken bazıları backend sistemleriyle ilgilenir. İki alanın birlikte ele alınması ise full stack geliştirme olarak adlandırılır.

Web Sitesi Nasıl Çalışır?

Bir kullanıcı tarayıcıya bir web adresi yazdığında tarayıcı ilgili sunucuya istek gönderir. Sunucu bu isteğe HTML, CSS, JavaScript, görseller veya farklı veri türleriyle yanıt verir. Tarayıcı gelen dosyaları yorumlayarak kullanıcıya görsel bir sayfa sunar.

Temel çalışma süreci şu şekilde özetlenebilir:

Kullanıcı tarayıcıya bir alan adı veya sayfa adresi girer.
Tarayıcı ilgili web sunucusuna HTTP isteği gönderir.
Sunucu gerekli dosyaları veya verileri hazırlar.
HTML sayfanın içerik yapısını oluşturur.
CSS görsel düzeni uygular.
JavaScript etkileşimli özellikleri çalıştırır.
Tarayıcı bütün bileşenleri bir araya getirerek sayfayı gösterir.

Web sayfası yalnızca sabit dosyalardan oluşabileceği gibi sunucu tarafında oluşturulan dinamik veriler de içerebilir. Örneğin bir e-ticaret sitesindeki ürün bilgileri veri tabanından alınarak kullanıcı arayüzüne aktarılabilir.

Frontend Geliştirme Nedir?

Frontend geliştirme, web sitesinin kullanıcı tarafından görülen ve etkileşim kurulan bölümünün hazırlanmasıdır. Sayfa düzeni, menüler, butonlar, formlar, tablolar, animasyonlar ve farklı ekran boyutlarına uyum frontend kapsamındadır.

Frontend geliştiriciler genellikle şu teknolojilerle çalışır:

HTML
CSS
JavaScript
Tarayıcı geliştirici araçları
Responsive tasarım teknikleri
Versiyon kontrol sistemleri
Frontend kütüphaneleri ve frameworkleri

Frontend yalnızca görsel tasarım değildir. Kullanıcının işlemleri kolayca tamamlaması, hata mesajlarını anlaması, klavye ile gezinebilmesi ve farklı cihazlarda benzer bir deneyim yaşaması da frontend geliştirme sürecinin parçasıdır.

Backend Geliştirme Nedir?

Backend, web uygulamasının sunucu tarafında çalışan ve kullanıcı tarafından doğrudan görülmeyen bölümüdür. Kullanıcı doğrulama, veri tabanı sorguları, iş kuralları, dosya işlemleri ve API servisleri backend üzerinde yönetilir.

Örneğin kullanıcı bir iletişim formunu gönderdiğinde frontend formdaki verileri alır. Backend ise bilgilerin geçerli olup olmadığını kontrol eder, verileri kaydeder veya ilgili sisteme iletir ve işlem sonucunu kullanıcı arayüzüne gönderir.

HTML, CSS ve JavaScript bilgisini sunucu taraflı uygulamalarla tamamlamak isteyenler için PHP ile backend web geliştirme, form verilerinin ve veri tabanı işlemlerinin arka planda nasıl yönetildiğini anlamaya yardımcı olabilir.

HTML Nedir?

HTML, HyperText Markup Language ifadesinin kısaltmasıdır. Türkçede hiper metin işaretleme dili olarak ifade edilebilir. Web sayfalarının içerik yapısını ve anlamsal bölümlerini tanımlamak için kullanılır.

HTML bir sayfada şu içeriklerin yapılandırılmasını sağlar:

Başlıklar
Paragraflar
Bağlantılar
Listeler
Görseller
Tablolar
Formlar
Ses ve video içerikleri
Sayfa bölümleri
Gezinme menüleri

HTML çoğunlukla etiketlerden oluşur. Bir etiket, tarayıcıya ilgili içeriğin ne olduğunu ve sayfada hangi görevi üstlendiğini bildirir. Başlık için başlık etiketi, paragraf için paragraf etiketi ve bağlantı için bağlantı etiketi kullanılır.

HTML Belgesinin Temel Yapısı

Bir HTML belgesi, tarayıcının sayfayı doğru yorumlayabilmesi için belirli bir temel yapıya sahiptir. Belgenin türü, dil bilgisi, karakter kodlaması, sayfa başlığı ve görüntülenecek içerik farklı bölümlerde tanımlanır.

Temel bir HTML belgesinde şu bölümler bulunabilir:

Belge türü bildirimi
HTML kök etiketi
Head bölümü
Meta bilgileri
Sayfa başlığı
CSS ve diğer kaynak bağlantıları
Body bölümü
Kullanıcıya gösterilen içerikler

Head bölümü çoğunlukla tarayıcı ve arama motorları için teknik bilgiler içerir. Body bölümü ise kullanıcının sayfada gördüğü başlık, paragraf, görsel, form ve diğer arayüz bileşenlerini barındırır.

HTML Etiketi Nedir?

HTML etiketi, sayfadaki bir içeriğin türünü veya işlevini belirleyen işaretleme yapısıdır. Etiketlerin önemli bir bölümü açılış ve kapanış etiketlerinden oluşur. Bazı etiketler ise kendi başına kullanılabilir.

HTML etiketleri seçilirken yalnızca görsel sonuç düşünülmemelidir. İçeriğin anlamını doğru ifade eden semantik etiketlerin kullanılması; erişilebilirlik, arama motoru görünürlüğü ve kod okunabilirliği açısından önemlidir.

Örneğin yalnızca büyük yazı görüntüsü oluşturmak için paragraf etiketini biçimlendirmek yerine gerçek başlıklar uygun başlık etiketleriyle hazırlanmalıdır.

Semantik HTML Nedir?

Semantik HTML, içeriğin anlamını ve sayfadaki görevini açık biçimde ifade eden etiketlerin kullanılmasıdır. Header, nav, main, section, article, aside ve footer gibi etiketler sayfanın bölümlerini tanımlar.

Semantik HTML kullanımının sağlayabileceği katkılar şunlardır:

Kod yapısını daha anlaşılır hâle getirmek
Ekran okuyucu teknolojilerini desteklemek
Arama motorlarının içeriği yorumlamasını kolaylaştırmak
Sayfa bölümlerini anlamlı biçimde ayırmak
Ekip çalışmasında kod okunabilirliğini geliştirmek

Bütün içerikleri yalnızca genel amaçlı kutular içerisinde sunmak görsel olarak çalışabilir; ancak sayfanın anlamsal yapısını zayıflatabilir.

HTML5 Nedir?

HTML5, modern web sayfalarının hazırlanmasında kullanılan HTML standardının gelişmiş yapısını ifade eder. Semantik sayfa bölümleri, ses ve video desteği, gelişmiş form özellikleri ve tarayıcı tabanlı farklı işlevler bu yapı içerisinde ele alınır.

HTML5 ile ilişkilendirilen başlıca özellikler şunlardır:

Semantik sayfa etiketleri
Yerleşik ses ve video desteği
Yeni form alanları
Canvas tabanlı çizimler
Tarayıcı depolama seçenekleri
Mobil cihazlara uygun yapılandırmalar

HTML5 yalnızca yeni etiketler kullanmak anlamına gelmez. Sayfanın daha anlamlı, erişilebilir ve farklı cihazlarla uyumlu biçimde hazırlanmasını destekleyen daha geniş bir web geliştirme yaklaşımıdır.

HTML Bağlantı Etiketi Ne İşe Yarar?

Bağlantılar, kullanıcıların aynı site içerisindeki farklı sayfalara veya başka web kaynaklarına geçmesini sağlar. HTML içerisinde bağlantı oluşturmak için a etiketi kullanılır.

Bağlantılar şu amaçlarla kullanılabilir:

Ana sayfadan alt sayfalara geçiş sağlamak
Blog yazılarını birbirine bağlamak
Dosya indirme bağlantısı oluşturmak
E-posta veya telefon işlemi başlatmak
Sayfanın belirli bir bölümüne yönlendirmek
Başka bir web sitesine geçiş yapmak

Bağlantı metinlerinin “buraya tıklayın” gibi belirsiz ifadeler yerine hedef sayfayı açıklayan doğal kelimelerden oluşması kullanıcı deneyimi ve erişilebilirlik açısından daha uygundur.

HTML Öz Nitelikleri Nedir?

HTML öz nitelikleri, bir etiket hakkında ek bilgi verir veya etiketin davranışını değiştirir. Bağlantının hedef adresi, görselin kaynağı, form alanının adı veya bir bileşenin kimliği öz niteliklerle belirlenebilir.

Yaygın kullanılan HTML öz niteliklerine şu örnekler verilebilir:

href
src
alt
id
class
name
value
placeholder
required
disabled

Öz nitelikler yalnızca teknik ihtiyaçlar için değil, erişilebilirlik ve form kullanılabilirliği için de önemlidir. Örneğin görsellere açıklayıcı alt metin eklenmesi, görseli göremeyen kullanıcıların içeriği anlamasına yardımcı olur.

HTML ile Görsel Nasıl Eklenir?

Web sayfasına görsel eklemek için img etiketi kullanılır. Görsel dosyasının adresi src öz niteliğiyle, içeriğini açıklayan alternatif metin ise alt öz niteliğiyle belirtilir.

Web sayfalarındaki görseller hazırlanırken şu konulara dikkat edilmelidir:

Dosya boyutu gereksiz ölçüde büyük olmamalıdır.
Görselin sayfadaki amacı açıklanmalıdır.
Uygun dosya biçimi seçilmelidir.
Farklı ekran boyutlarına uyum sağlanmalıdır.
Görsel yüklenmediğinde anlam kaybolmamalıdır.
Dekoratif görseller erişilebilirlik açısından doğru işaretlenmelidir.

Büyük boyutlu görseller sayfanın açılış süresini olumsuz etkileyebilir. Görselin ekranda gösterileceği boyuta uygun biçimde optimize edilmesi gerekir.

HTML ile Ses ve Video Nasıl Eklenir?

HTML5 ile web sayfalarına ses ve video içerikleri yerleşik etiketler aracılığıyla eklenebilir. Kullanıcıya oynatma, durdurma ve ses kontrolü gibi seçenekler sunulabilir.

Ses ve video içeriklerinde şu konular değerlendirilmelidir:

Tarayıcıların desteklediği dosya biçimleri
Dosya boyutu ve yükleme süresi
Otomatik oynatmanın kullanıcı deneyimine etkisi
Altyazı ve metin dökümü
Mobil veri kullanımı
Kontrol bileşenlerinin erişilebilirliği

Sesli içerikler için metin dökümü, videolar için altyazı sunulması farklı kullanıcıların içeriğe erişmesini kolaylaştırır.

HTML Listeleri

HTML listeleri, birbiriyle ilişkili maddeleri düzenli biçimde sunmak için kullanılır. Sıralı, sırasız ve açıklama listeleri farklı içerik türlerine göre tercih edilebilir.

Listeler şu içeriklerde kullanılabilir:

Ürün özellikleri
Uygulama adımları
Menü seçenekleri
Program içerikleri
Sık kullanılan bağlantılar
Tanımlar ve açıklamalar

Yalnızca satır başına sembol yazarak görsel liste oluşturmak yerine gerçek liste etiketleri kullanmak, sayfanın anlamsal yapısını güçlendirir.

HTML Tabloları

Tablolar, satır ve sütun ilişkisi bulunan verilerin düzenli biçimde gösterilmesini sağlar. Fiyat listeleri, karşılaştırmalar, raporlar ve takvim verileri tablo yapısıyla sunulabilir.

HTML tablolarında şu bileşenler bulunabilir:

Tablo başlığı
Sütun başlıkları
Satırlar
Veri hücreleri
Tablo açıklaması
Başlık ve gövde bölümleri

Tablolar sayfa yerleşimi oluşturmak amacıyla kullanılmamalıdır. Görsel düzen için CSS yerleşim araçları tercih edilmelidir.

HTML Formu Nedir?

HTML formu, kullanıcıdan bilgi alınmasını sağlayan arayüz yapısıdır. İletişim, kayıt, giriş, arama, sipariş ve geri bildirim süreçleri formlar üzerinden yürütülebilir.

Bir formda şu alanlar bulunabilir:

Metin kutusu
E-posta alanı
Parola alanı
Sayı alanı
Tarih seçimi
Onay kutusu
Radyo düğmesi
Açılır seçim listesi
Dosya yükleme alanı
Gönderim butonu

Formun görsel olarak hazırlanması bilgilerin güvenli biçimde işlendiği anlamına gelmez. Kullanıcı tarafından gönderilen veriler sunucu tarafında da doğrulanmalıdır.

Input Etiketi ve Türleri

Input etiketi, formlarda farklı türlerde kullanıcı verisi almak için kullanılır. Alanın amacı type öz niteliğiyle belirlenebilir.

Yaygın input türleri şunlardır:

text
email
password
number
date
checkbox
radio
file
submit

Alan türünün doğru belirlenmesi özellikle mobil cihazlarda uygun klavyenin açılmasını ve tarayıcının temel doğrulama özelliklerinden yararlanılmasını sağlayabilir.

Value, Readonly ve Disabled Arasındaki Fark

Value öz niteliği bir form alanının başlangıç değerini belirleyebilir. Readonly, alanın kullanıcı tarafından değiştirilmesini engeller ancak değer çoğunlukla form verileriyle birlikte gönderilebilir. Disabled ise alanı kullanılamaz hâle getirir ve değerin form gönderimindeki davranışı farklılaşabilir.

Bu özellikler şu senaryolarda kullanılabilir:

Önceden belirlenmiş bir değeri göstermek
Kullanıcının değiştirmemesi gereken bilgileri sunmak
Belirli koşullar oluşana kadar bir alanı kapatmak
Form adımlarına göre alanları etkinleştirmek

Yalnızca readonly veya disabled kullanmak güvenlik sağlamaz. Kullanıcı tarayıcı araçlarıyla bu özellikleri değiştirebilir. Kritik kontroller her zaman sunucu tarafında yapılmalıdır.

Size ve Maxlength Ne İşe Yarar?

Size, belirli form alanlarının ekranda görünen yaklaşık genişliğini etkileyebilir. Maxlength ise kullanıcının alana girebileceği en fazla karakter sayısını sınırlar.

Karakter sınırı belirlenirken yalnızca veri tabanı alanı düşünülmemelidir. Kullanıcıya neden sınır bulunduğu ve kaç karakter daha yazabileceği konusunda açık geri bildirim verilmesi kullanıcı deneyimini geliştirebilir.

Fieldset ve Legend Nedir?

Fieldset, form içerisindeki ilişkili alanları bir grup hâlinde düzenlemeyi sağlar. Legend ise bu grubun başlığını tanımlar.

Örneğin bir başvuru formunda kişisel bilgiler, iletişim bilgileri ve adres bilgileri ayrı fieldset gruplarında sunulabilir. Bu yapı hem görsel düzeni hem de ekran okuyucu kullanıcılarının formu anlamasını destekleyebilir.

Select Etiketi Nedir?

Select, kullanıcının önceden belirlenmiş seçenekler arasından seçim yapmasını sağlayan açılır liste bileşenidir.

Select alanları şu bilgiler için kullanılabilir:

Şehir seçimi
Kategori seçimi
Departman seçimi
Ürün türü
Dil tercihi
Sıralama yöntemi

Seçenek sayısının çok fazla olduğu durumlarda arama destekli veya farklı filtreleme arayüzleri daha kullanışlı olabilir.

CSS Nedir?

CSS, Cascading Style Sheets ifadesinin kısaltmasıdır. HTML ile oluşturulan içeriklerin renk, yazı tipi, boşluk, boyut, konum ve yerleşim özelliklerini düzenlemek için kullanılır.

CSS ile gerçekleştirilebilecek işlemler şunlardır:

Metin renklerini ve boyutlarını düzenlemek
Sayfa arka planını değiştirmek
Boşluk ve kenarlıkları ayarlamak
Menü tasarlamak
Butonları biçimlendirmek
Sütunlu sayfa düzenleri oluşturmak
Mobil uyumlu tasarım hazırlamak
Geçiş ve animasyonlar uygulamak

HTML içeriğin anlamlı yapısından, CSS ise ağırlıklı olarak görsel sunumundan sorumludur. Bu sorumlulukların ayrılması kodun daha kolay yönetilmesini sağlar.

CSS Seçici Nedir?

CSS seçicileri, hangi HTML elemanlarına stil uygulanacağını belirler. Etiket adı, sınıf, kimlik, öz nitelik veya elemanlar arasındaki ilişki üzerinden seçim yapılabilir.

Yaygın seçici türleri şunlardır:

Etiket seçicisi
Class seçicisi
ID seçicisi
Öz nitelik seçicisi
Alt eleman seçicisi
Durum seçicileri
Sözde elemanlar

Tekrar kullanılacak stiller için class seçicileri genellikle daha esnek bir yapı sunar. Çok uzun ve yüksek özgüllüğe sahip seçiciler, ilerleyen aşamalarda stillerin değiştirilmesini zorlaştırabilir.

CSS Box Model Nedir?

CSS box model, her HTML elemanını içerik, iç boşluk, kenarlık ve dış boşluktan oluşan bir kutu olarak değerlendirir.

Box model bileşenleri şunlardır:

Content: Asıl içerik alanı
Padding: İçerik ile kenarlık arasındaki boşluk
Border: Kutunun kenarlığı
Margin: Eleman ile diğer elemanlar arasındaki dış boşluk

Bir elemanın gerçek boyutu hesaplanırken genişlik ve yüksekliğin yanında padding ile border değerleri de etkili olabilir. Box-sizing özelliği bu hesaplama davranışını daha öngörülebilir hâle getirebilir.

CSS ile Sayfa Düzeni

Web sayfasındaki bölümlerin yatay veya dikey biçimde konumlandırılması için farklı CSS yerleşim yöntemleri kullanılabilir.

Modern sayfa düzenlerinde öne çıkan araçlar şunlardır:

Normal belge akışı
Flexbox
CSS Grid
Position özellikleri
Responsive ölçü birimleri

Flexbox tek boyutlu satır veya sütun düzenlerinde, CSS Grid ise satır ve sütunların birlikte kontrol edildiği iki boyutlu yapılarda kullanılabilir.

Responsive Web Tasarım Nedir?

Responsive web tasarım, bir web sayfasının masaüstü bilgisayar, tablet ve akıllı telefon gibi farklı ekran boyutlarında kullanılabilir biçimde görüntülenmesini sağlayan yaklaşımdır.

Responsive tasarım için şu tekniklerden yararlanılabilir:

Esnek genişlikler
Akışkan görseller
Media query kullanımı
Flexbox ve CSS Grid
Mobil öncelikli tasarım
Okunabilir yazı boyutları
Dokunmaya uygun kontrol alanları

Mobil uyumluluk yalnızca sayfanın küçük ekrana sığması değildir. Menülerin kolay açılması, butonların rahat seçilmesi, formların anlaşılır olması ve içerik sırasının korunması da gerekir.

Mobil Öncelikli Tasarım Nedir?

Mobil öncelikli tasarım, temel arayüzün önce küçük ekranlar için hazırlanması ve daha geniş ekranlara doğru geliştirilmesi yaklaşımıdır.

Bu yaklaşımın sağlayabileceği katkılar şunlardır:

Öncelikli içeriklerin belirlenmesi
Gereksiz arayüz karmaşıklığının azaltılması
Küçük ekran deneyiminin baştan düşünülmesi
CSS yapısının daha kontrollü genişletilmesi

Masaüstü tasarımın sonradan küçültülmesi bazı içeriklerin sıkışmasına ve kullanıcı deneyiminin zayıflamasına neden olabilir.

JavaScript Nedir?

JavaScript, web sayfalarına programlama mantığı ve etkileşim kazandıran bir dildir. Kullanıcı işlemlerini algılamak, sayfa içeriğini değiştirmek, form verilerini kontrol etmek ve sunucudan veri almak için kullanılabilir.

JavaScript ile şu işlemler gerçekleştirilebilir:

Menü açmak ve kapatmak
Form alanlarını kontrol etmek
Modal pencere göstermek
Slayt ve galeri oluşturmak
Sayfa içeriğini dinamik değiştirmek
Kullanıcı olaylarını yönetmek
API üzerinden veri almak
Filtreleme ve arama işlemleri yapmak
Tarayıcı depolama alanlarını kullanmak

JavaScript yalnızca tarayıcı tarafında kullanılmaz. Farklı çalışma ortamları sayesinde sunucu taraflı uygulamalarda ve farklı yazılım projelerinde de kullanılabilir.

JavaScript Değişkenleri ve Veri Türleri

Değişkenler program içerisinde kullanılacak değerlerin saklanmasını sağlar. Kullanıcı adı, ürün fiyatı, buton durumu veya API’den alınan veriler değişkenlerde tutulabilir.

JavaScript içerisinde karşılaşılabilecek temel veri türleri şunlardır:

String
Number
Boolean
Undefined
Null
Object
Array

Dinamik tür yapısı geliştirme sürecini esnek hâle getirebilir; ancak beklenmeyen tür dönüşümleri hatalara yol açabilir. Karşılaştırmalar ve form verileri üzerinde çalışırken değerlerin türleri dikkatle kontrol edilmelidir.

JavaScript Karar Yapıları

Karar yapıları, belirli koşullara göre farklı işlemler gerçekleştirilmesini sağlar. If, else if, else ve switch yapıları farklı senaryolarda kullanılabilir.

Karar yapılarının kullanılabileceği durumlar şunlardır:

Form alanının boş olup olmadığını kontrol etmek
Kullanıcının yaşına göre mesaj göstermek
Menünün açık veya kapalı durumunu yönetmek
Ürün stok durumunu değerlendirmek
API yanıtına göre farklı arayüz göstermek

JavaScript Döngüleri

Döngüler, dizilerdeki kayıtları ekrana yazdırmak veya belirli işlemleri tekrar etmek için kullanılabilir.

JavaScript içerisinde kullanılabilen döngü yapılarına şu örnekler verilebilir:

for
while
do-while
for...of
Dizi metotları

Bir ürün listesindeki her kayıt için kart oluşturmak veya form alanlarını toplu biçimde kontrol etmek döngülerle gerçekleştirilebilir.

JavaScript Fonksiyonu Nedir?

Fonksiyon, belirli bir görevi yerine getiren ve gerektiğinde yeniden çağrılabilen kod bloğudur. Menü açma, form doğrulama, fiyat hesaplama veya veri biçimlendirme işlemleri fonksiyon hâline getirilebilir.

Fonksiyon kullanımı şu katkıları sağlayabilir:

Kod tekrarını azaltmak
İşlemleri küçük görevlere ayırmak
Kodun test edilmesini kolaylaştırmak
Okunabilirliği geliştirmek
Aynı işlemi farklı verilerle kullanmak

DOM Nedir?

DOM, Document Object Model ifadesinin kısaltmasıdır. Tarayıcının HTML belgesini programlama yoluyla erişilebilen nesne yapısına dönüştürmesini ifade eder.

JavaScript DOM üzerinden şu işlemleri gerçekleştirebilir:

Bir HTML elemanını seçmek
Metin içeriğini değiştirmek
Yeni eleman oluşturmak
Eleman silmek
CSS sınıfı eklemek veya kaldırmak
Form değerlerini okumak
Öz nitelikleri güncellemek

Örneğin kullanıcı bir butona tıkladığında JavaScript belirli bir menüye aktif sınıfı ekleyerek menünün görünmesini sağlayabilir.

JavaScript Olayları

Olaylar, kullanıcının veya tarayıcının gerçekleştirdiği işlemleri temsil eder. JavaScript bu olayları dinleyerek uygun fonksiyonları çalıştırabilir.

Yaygın olay türleri şunlardır:

Tıklama
Form gönderme
Metin girişi
Seçim değişikliği
Fare hareketi
Klavye kullanımı
Sayfanın yüklenmesi
Pencere boyutunun değişmesi

JavaScript kodlarının doğrudan HTML öz nitelikleri içerisine yazılması küçük örneklerde çalışabilir; ancak kapsamlı projelerde olay dinleyicilerinin ayrı JavaScript dosyalarında yönetilmesi daha düzenli bir yapı sağlar.

JavaScript ile Dinamik Sayfa Nasıl Oluşturulur?

Dinamik sayfa, kullanıcı işlemleri veya alınan verilere göre içeriği değişebilen web sayfasıdır. Sayfanın tamamı yeniden yüklenmeden belirli bölümler güncellenebilir.

Dinamik sayfalarda şu özellikler bulunabilir:

Açılır menüler
Ürün filtreleri
Arama sonuçları
Canlı karakter sayacı
Form hata mesajları
Modal pencereler
Sekmeli içerikler
API verilerinin listelenmesi

Dinamik özellikler kullanıcıya gerçek değer sağlamalıdır. Gereksiz animasyonlar ve karmaşık etkileşimler sayfanın performansını ve erişilebilirliğini olumsuz etkileyebilir.

JavaScript ile Form Doğrulama

JavaScript, form gönderilmeden önce alanların doldurulup doldurulmadığını ve temel biçim kurallarına uyulup uyulmadığını kontrol edebilir.

Frontend doğrulamasında şu kontroller yapılabilir:

Zorunlu alan kontrolü
E-posta biçimi kontrolü
Karakter uzunluğu kontrolü
Parola tekrarının eşleşmesi
Sayısal değer aralığı
Onay kutusunun seçilmesi

JavaScript ile yapılan doğrulamalar kullanıcı deneyimini geliştirir ancak güvenlik sağlamaz. Kullanıcı tarayıcıdaki kodları değiştirebilir veya sunucuya doğrudan istek gönderebilir. Bu nedenle bütün önemli kontroller backend tarafında yeniden uygulanmalıdır.

API Nedir ve Frontend ile Nasıl Kullanılır?

API, farklı yazılım sistemlerinin belirli kurallar üzerinden veri alışverişi yapmasını sağlar. JavaScript bir API’ye istek göndererek ürün, kullanıcı, hava durumu veya farklı uygulama verilerini alabilir.

Temel API kullanım süreci şu şekilde ilerler:

JavaScript ilgili API adresine istek gönderir.
Sunucu isteği işler.
Sonuç çoğunlukla JSON biçiminde gönderilir.
JavaScript gelen veriyi işler.
İçerik DOM aracılığıyla sayfaya aktarılır.

HTML, CSS ve JavaScript bilgisini backend ve API geliştirme süreçleriyle birleştirmek isteyenler için full stack geliştirme, arayüz ile sunucu katmanının nasıl haberleştiğini gösteren tamamlayıcı bir öğrenme alanıdır.

Web Tasarımı ve Web Geliştirme Arasındaki Fark

Web tasarımı, arayüzün görsel yapısı, renkleri, tipografisi ve kullanıcı deneyimi üzerine yoğunlaşır. Web geliştirme ise bu tasarımın çalışan bir web sayfasına veya uygulamaya dönüştürülmesini içerir.

Web tasarımında şu konular öne çıkabilir:

Renk sistemi
Tipografi
Görsel hiyerarşi
Sayfa yerleşimi
Kullanıcı akışı
Arayüz tutarlılığı

Web geliştirmede ise HTML yapısı, CSS kodları, JavaScript etkileşimleri, performans ve teknik uyumluluk daha belirgin rol oynar. Küçük projelerde bu görevleri aynı kişi yürütebilir.

Kullanıcı arayüzlerinin görsel ve işlevsel yapısını daha ayrıntılı ele almak isteyenler için kullanıcı arayüzü tasarımı, web geliştirme bilgisini tasarım ilkeleriyle tamamlayabilir.

Kullanıcı Deneyimi Nedir?

Kullanıcı deneyimi, bir kişinin web sitesiyle etkileşim kurarken yaşadığı bütün süreci kapsar. Sayfanın hızlı açılması, menülerin anlaşılır olması, işlemlerin kolay tamamlanması ve hata mesajlarının yönlendirici olması kullanıcı deneyimini etkiler.

İyi bir kullanıcı deneyimi için şu noktalar değerlendirilebilir:

İçeriklerin kolay bulunması
Gezinme yapısının açık olması
Buton ve bağlantıların anlaşılır olması
Formların gereksiz alan içermemesi
Mobil kullanımın kolay olması
Sayfaların hızlı yüklenmesi
Hata durumlarında çözüm sunulması

Web projelerinde kullanılabilirlik araştırmaları ve kullanıcı odaklı tasarım süreçleri hakkında daha fazla bilgi edinmek isteyenler için UX tasarımı ve kullanılabilirlik tamamlayıcı bir gelişim alanıdır.

Web Erişilebilirliği Nedir?

Web erişilebilirliği, web sitelerinin farklı fiziksel, duyusal veya bilişsel özelliklere sahip kullanıcılar tarafından kullanılabilmesini amaçlayan yaklaşımdır.

Erişilebilirlik açısından dikkat edilmesi gereken temel noktalar şunlardır:

Görsellere anlamlı alt metin eklemek
Form alanlarını etiketlerle ilişkilendirmek
Klavye ile gezinmeyi desteklemek
Yeterli renk kontrastı kullanmak
Başlık sıralamasını korumak
Bağlantı metinlerini açıklayıcı yazmak
Video içeriklerine altyazı eklemek
Hata mesajlarını açık biçimde sunmak

Erişilebilirlik geliştirme sürecinin sonunda eklenen ayrı bir özellik değil, HTML yapısından tasarım kararlarına kadar bütün aşamalarda dikkate alınması gereken bir kalite ölçütüdür.

Web Sitesi Performansı Neden Önemlidir?

Bir web sayfasının yavaş açılması kullanıcıların içeriğe ulaşmasını zorlaştırabilir. Performans sorunları büyük görsellerden, gereksiz JavaScript kodlarından, çok sayıda kaynaktan veya hatalı sunucu yapılandırmalarından kaynaklanabilir.

Temel performans iyileştirmeleri şunlardır:

Görselleri optimize etmek
Gereksiz CSS ve JavaScript kodlarını kaldırmak
Dosya sayısını ve boyutlarını kontrol etmek
Kaynakları uygun sırayla yüklemek
Tarayıcı önbelleğinden yararlanmak
Yalnızca gerekli içerikleri yüklemek
Mobil bağlantı koşullarını test etmek

Performans çalışmaları tahminlere göre değil, tarayıcı analiz araçlarından alınan ölçümlere göre yapılmalıdır.

Tarayıcı Geliştirici Araçları

Modern tarayıcılar, web sayfalarının HTML, CSS, JavaScript, ağ istekleri ve performans bilgilerini incelemeyi sağlayan geliştirici araçları sunar.

Bu araçlarla şu işlemler gerçekleştirilebilir:

HTML yapısını incelemek
CSS özelliklerini geçici olarak değiştirmek
JavaScript hatalarını görmek
Ağ isteklerini analiz etmek
Farklı ekran boyutlarını test etmek
Sayfa performansını incelemek
Depolama alanlarını kontrol etmek

Geliştirici araçlarında yapılan değişiklikler çoğunlukla geçicidir. Kalıcı düzenlemelerin proje dosyalarında uygulanması gerekir.

Web Geliştirmede Dosya Yapısı

Küçük bir projede bütün kodların tek dosyada bulunması mümkün olsa da proje büyüdükçe düzenli bir klasör yapısı gerekir.

Temel bir web projesi şu bölümlerden oluşabilir:

HTML sayfaları
CSS dosyaları
JavaScript dosyaları
Görseller
Yazı tipleri
Video ve ses dosyaları
Harici kütüphaneler

Dosya ve klasör adlarının açık, tutarlı ve web ortamına uygun seçilmesi bağlantı hatalarını azaltabilir.

Versiyon Kontrolü Nedir?

Versiyon kontrolü, proje dosyalarında yapılan değişikliklerin kaydedilmesini ve gerektiğinde önceki sürümlere dönülebilmesini sağlar. Git, web geliştirme projelerinde yaygın kullanılan araçlardan biridir.

Versiyon kontrolünün sağlayabileceği katkılar şunlardır:

Değişiklik geçmişini görmek
Hatalı düzenlemeleri geri almak
Farklı özellikleri ayrı dallarda geliştirmek
Ekip üyeleriyle ortak çalışmak
Projenin farklı sürümlerini yönetmek

Web Sitesi Nasıl Yayımlanır?

Yerel bilgisayarda geliştirilen web sitesinin internet üzerinden erişilebilmesi için bir alan adı ve barındırma ortamı kullanılabilir. Statik HTML, CSS ve JavaScript projeleri farklı web sunucularında yayımlanabilir.

Yayımlama sürecinde şu konular değerlendirilmelidir:

Alan adı seçimi
Barındırma hizmeti
Dosyaların sunucuya aktarılması
HTTPS sertifikası
Mobil uyumluluk
Bağlantıların kontrolü
Performans testleri
Yedekleme

Yayımlama öncesinde form, bağlantı, görsel, menü ve farklı ekran boyutları test edilmelidir.

Web Geliştirmede Güvenlik

HTML, CSS ve JavaScript ile hazırlanan arayüzler kullanıcıların değiştirebileceği ortamlarda çalışır. Bu nedenle frontend üzerinde yapılan kontroller güvenlik için tek başına yeterli değildir.

Web geliştirmede dikkat edilmesi gereken güvenlik konuları şunlardır:

Kullanıcı girdilerini güvenilir kabul etmemek
Form verilerini sunucu tarafında doğrulamak
Hassas bilgileri JavaScript dosyalarında saklamamak
Güvenilir olmayan içerikleri doğrudan sayfaya eklememek
Harici kaynakları kontrollü kullanmak
HTTPS üzerinden iletişim kurmak
Paket ve kütüphaneleri güncel tutmak

Web Siteleri Nasıl Test Edilir?

Web sitesi yalnızca geliştiricinin kullandığı cihazda değil, farklı tarayıcı ve ekranlarda da test edilmelidir.

Test edilmesi gereken alanlar şunlardır:

Bağlantıların doğru çalışması
Form doğrulamaları
Menü ve buton etkileşimleri
Mobil görünüm
Klavye ile kullanım
Görsel yükleme sorunları
JavaScript hataları
Sayfa performansı
Farklı tarayıcı uyumluluğu

Web uygulamalarındaki işlevsel süreçleri otomatik testlerle değerlendirmek isteyenler için test otomasyonu, geliştirme sürecini kalite güvence yaklaşımıyla destekleyebilir.

HTML, CSS ve JavaScript Öğrenme Sırası

Web geliştirme öğrenme sürecinde konuların birbirini destekleyen bir sırayla ele alınması gerekir. Frameworklere erken geçmek temel teknolojilerin anlaşılmasını zorlaştırabilir.

Önerilen öğrenme sırası şu şekildedir:

İnternet ve web sitelerinin çalışma mantığı
HTML belge yapısı
Başlık, paragraf, bağlantı ve liste etiketleri
Görsel, ses ve video ekleme
Semantik HTML
Tablo ve form yapıları
CSS seçicileri
Box model
Flexbox ve CSS Grid
Responsive tasarım
JavaScript değişkenleri ve veri türleri
Karar yapıları ve döngüler
Fonksiyonlar
Diziler ve nesneler
DOM ve olay yönetimi
Form doğrulama
API kullanımı
Versiyon kontrolü
Test ve yayımlama

Web Geliştirme Öğrenirken Yapılabilecek Projeler

Web geliştirme becerilerinin kalıcı hâle gelmesi için her konu küçük projeler üzerinde uygulanmalıdır.

Başlangıç seviyesinde geliştirilebilecek projeler şunlardır:

Kişisel tanıtım sayfası
Özgeçmiş sitesi
Ürün tanıtım sayfası
Blog yazısı şablonu
İletişim formu
Fotoğraf galerisi
Responsive menü
Hesap makinesi
Yapılacaklar listesi
Sık sorulan sorular bileşeni

Projeler aşamalı olarak geliştirilebilir. Örneğin kişisel tanıtım sayfası önce yalnızca HTML ile oluşturulabilir. Ardından CSS ile görsel düzen hazırlanabilir ve JavaScript ile mobil menü veya form kontrolü eklenebilir.

Web Geliştirmede Sık Yapılan Hatalar

Yeni başlayanların yaptığı bazı hatalar kodun bakımını ve sayfanın kullanılabilirliğini zorlaştırabilir.

Sık karşılaşılan hatalar şunlardır:

HTML etiketlerini yalnızca görünüme göre seçmek
Bütün stilleri HTML içerisinde yazmak
Aynı CSS kodunu tekrar etmek
Mobil görünümü son aşamaya bırakmak
Görsellere alt metin eklememek
Form alanlarını etiketsiz kullanmak
JavaScript kodlarını tek büyük fonksiyonda toplamak
Kullanıcı girdilerini yalnızca frontend üzerinde kontrol etmek
Tarayıcı hata mesajlarını incelememek
Hazır kodları çalışma mantığını anlamadan kopyalamak
Farklı tarayıcı ve cihazlarda test yapmamak
Dosya isimlerini düzensiz belirlemek

Web Geliştirici Olmak İçin Neler Bilinmelidir?

Web geliştirici olmak yalnızca HTML etiketlerini veya CSS özelliklerini ezberlemek anlamına gelmez. Problem çözme, kullanıcı deneyimi ve teknik kalite gibi farklı alanlarda da bilgi geliştirmek gerekir.

Temel yetkinlik alanları şunlardır:

HTML ve semantik yapı
CSS ve responsive tasarım
JavaScript programlama
DOM ve olay yönetimi
Tarayıcı geliştirici araçları
Web erişilebilirliği
Temel kullanıcı deneyimi
Git ve versiyon kontrolü
Performans optimizasyonu
Test ve hata ayıklama
Temel web güvenliği

Web Geliştirme Bilgisi Hangi Mesleki Rollerde Kullanılır?

HTML, CSS ve JavaScript bilgisi farklı dijital üretim ve yazılım rollerinde kullanılabilir. Bir eğitim programının tamamlanması tek başına belirli bir unvan veya istihdam garantisi oluşturmaz. Proje deneyimi ve sürekli uygulama da önemlidir.

Web geliştirme bilgisiyle ilişkilendirilebilecek roller şunlardır:

Frontend geliştirici
Web geliştirici
Junior JavaScript geliştirici
Web arayüz geliştiricisi
Full stack geliştirici
UI geliştirici
Web içerik uzmanı
E-ticaret arayüz geliştiricisi
Web test uzmanı

Web Geliştirme Kimler İçin Uygundur?

Web geliştirme, internet üzerinde içerik veya uygulama oluşturmak isteyen farklı eğitim ve deneyim seviyelerindeki kişiler tarafından öğrenilebilir.

Bu alan özellikle şu kişiler için uygun olabilir:

Yazılım geliştirmeye başlamak isteyenler
Kendi web sitesini oluşturmayı hedefleyenler
Frontend geliştirmeye yönelmek isteyenler
Web tasarım bilgisini kodlamayla tamamlamak isteyenler
Yazılım ve bilgisayar alanında eğitim alan öğrenciler
Dijital içerik ve e-ticaret alanında çalışanlar
Teknik kariyer değişikliği planlayanlar
Backend bilgisini frontend ile tamamlamak isteyenler

Başlangıç aşamasında ileri düzey programlama bilgisi zorunlu değildir. HTML ve CSS ile temel sayfalar oluşturulduktan sonra JavaScript programlama mantığına geçilebilir.

Web Geliştirme Eğitiminde Hangi Konular Ele Alınır?

İstanbul Kent Üniversitesi Yaşam Boyu Eğitim Merkezi tarafından sunulan programda web sayfası yapısı, görsel düzen ve kullanıcı etkileşimleri HTML, CSS ve JavaScript teknolojileri üzerinden ele alınmaktadır.

Resmî program içeriğinde öne çıkan konu başlıkları şunlardır:

Web programlamada içerik ve tasarım ilkeleri
Ses ve görüntü ekleme prensipleri
HTML’e giriş
HTML bağlantı etiketi
HTML öz nitelikleri
HTML5 yapısı
Görsel ekleme işlemleri
CSS temelleri
JavaScript ile dinamik sayfa oluşturma
HTML form yapısı
Fieldset ile form alanlarını gruplama
Select alanlarının kullanımı
Value öz niteliği
Readonly ve disabled alanlar
Size ve maxlength özellikleri
Responsive tasarım yaklaşımı
Menü ve kullanıcı etkileşimleri
Temel kullanıcı deneyimi ilkeleri

Web Geliştirme HTML, CSS ve JavaScript Eğitim Programı, bir web sayfasının temel içerik yapısından görsel tasarımına ve dinamik kullanıcı etkileşimlerine kadar uzanan konuları aynı öğrenme çerçevesinde bir araya getirmektedir.

Sık Sorulan Sorular

Web geliştirme nedir?

Web geliştirme, tarayıcı üzerinden erişilen web sitelerinin ve web uygulamalarının oluşturulması, kodlanması, test edilmesi ve yayımlanması sürecidir.

HTML nedir?

HTML, web sayfasındaki başlık, paragraf, bağlantı, görsel, form ve diğer içeriklerin yapısını tanımlayan işaretleme dilidir.

CSS nedir?

CSS, HTML ile oluşturulan içeriklerin renk, boyut, boşluk, yerleşim ve responsive görünüm özelliklerini düzenlemek için kullanılır.

JavaScript nedir?

JavaScript, web sayfasına programlama mantığı ve etkileşim kazandıran; kullanıcı olaylarını, dinamik içerikleri ve API iletişimini yönetebilen programlama dilidir.

HTML, CSS ve JavaScript arasındaki fark nedir?

HTML sayfanın yapısını, CSS görünümünü, JavaScript ise davranışını ve etkileşimli özelliklerini yönetir.

Web sitesi yapmak için hangi diller öğrenilmelidir?

Frontend web geliştirmeye başlamak için öncelikle HTML, CSS ve JavaScript öğrenilebilir. Dinamik veri tabanlı uygulamalar için daha sonra backend teknolojileri ve SQL bilgisi eklenebilir.

HTML bir programlama dili midir?

HTML bir programlama dili değil, web içeriklerinin yapısını tanımlayan işaretleme dilidir.

CSS öğrenmeden web sitesi yapılabilir mi?

HTML ile temel içerik sayfası oluşturulabilir. Ancak görsel düzen, yerleşim ve mobil uyumluluk için CSS bilgisi gerekir.

JavaScript öğrenmek zor mudur?

JavaScript değişken, koşul, döngü ve fonksiyon gibi programlama kavramları içerir. Konuların küçük projelerle ve aşamalı biçimde uygulanması öğrenme sürecini kolaylaştırabilir.

Responsive tasarım nedir?

Responsive tasarım, web sayfasının masaüstü, tablet ve mobil ekranlarda kullanılabilir biçimde görüntülenmesini sağlayan yaklaşımdır.

DOM ne işe yarar?

DOM, JavaScript’in HTML elemanlarını seçmesini, değiştirmesini, silmesini veya yeni elemanlar oluşturmasını sağlar.

Frontend ve backend arasındaki fark nedir?

Frontend kullanıcının gördüğü arayüzdür. Backend ise veri tabanı, kullanıcı doğrulama ve iş kuralları gibi sunucu taraflı işlemleri yönetir.

Web geliştirmek için tasarım bilmek gerekir mi?

Profesyonel tasarım uzmanlığı zorunlu değildir. Ancak renk, tipografi, boşluk, görsel hiyerarşi ve kullanıcı deneyimi konularında temel bilgi yararlıdır.

HTML, CSS ve JavaScript ile hangi projeler yapılabilir?

Kişisel siteler, ürün tanıtım sayfaları, blog arayüzleri, formlar, hesap makineleri, yapılacaklar listeleri ve API tabanlı dinamik sayfalar geliştirilebilir.

HTML, CSS ve JavaScript ile Web Geliştirmeye Başlayın

Web geliştirme, içerik yapısı, görsel tasarım ve kullanıcı etkileşimlerinin birlikte planlandığı çok yönlü bir alandır. HTML sayfanın anlamsal temelini oluştururken CSS bu yapının farklı cihazlarda nasıl görüneceğini belirler. JavaScript ise kullanıcı işlemlerine yanıt veren dinamik özelliklerin geliştirilmesini sağlar.

Öğrenme sürecinde önce anlamlı HTML yapıları oluşturulmalı, ardından CSS ile yerleşim ve responsive tasarım konularına geçilmelidir. JavaScript aşamasında değişken, koşul, döngü ve fonksiyon gibi programlama temelleri öğrenildikten sonra DOM, olay yönetimi, form doğrulama ve API kullanımı ele alınabilir.

Hazır şablonları yalnızca kopyalamak yerine her özelliğin nasıl çalıştığını anlamak önemlidir. Küçük ve tamamlanabilir projeler geliştirmek, tarayıcı hata mesajlarını incelemek ve sayfaları farklı cihazlarda test etmek web geliştirme becerilerinin kalıcı hâle gelmesine katkı sağlar.

İstanbul Kent Üniversitesi Web Geliştirme HTML, CSS ve JavaScript Eğitim Programı, temel içerik ve tasarım ilkelerinden HTML form yapılarına, CSS kullanımından JavaScript ile dinamik sayfa geliştirmeye kadar uzanan konuları yapılandırılmış bir öğrenme kapsamında ele almaktadır.

Web Geliştirme Nedir? HTML, CSS ve JavaScript Nasıl Öğrenilir?