JavaScript’in ortaya çıkışı, web sayfalarının yalnızca görüntülenen belgeler olmaktan çıkıp kullanıcıyla iletişim kurabilen yapılara dönüşmesi ihtiyacına dayanır. Web’in ilk yıllarında HTML, metinleri, başlıkları, bağlantıları ve görselleri ortak bir yapı içerisinde sunabiliyordu. CSS ise zamanla bu yapının nasıl görüneceğini belirlemeye başladı. Ancak kullanıcının yaptığı bir işleme anında karşılık vermek, sayfanın belirli bir bölümünü değiştirmek veya tarayıcı içerisinde hesaplama yapmak için standart ve kolay kullanılabilir bir çözüme ihtiyaç vardı.

JavaScript, tam olarak bu ihtiyaca cevap vermek amacıyla geliştirildi. Başlangıçta tarayıcı içerisinde çalışan küçük ve hızlı bir betik dili olarak tasarlanan JavaScript, yıllar içinde web’in temel programlama diline dönüştü. Bugün yalnızca tarayıcılarda değil; sunucularda, masaüstü ve mobil uygulamalarda, geliştirme araçlarında ve çok farklı yazılım ortamlarında kullanılmaktadır. Buna rağmen JavaScript’in web üzerindeki temel görevi değişmemiştir: Kullanıcının yaptığı işlemleri algılamak, sayfanın davranışını yönetmek ve statik içeriği etkileşimli hâle getirmek.

Bu makalede JavaScript’in sözdizimini, değişkenlerini veya fonksiyonlarını ayrıntılı olarak anlatmayacağız. Bunun yerine JavaScript’in neden geliştirildiğini, hangi ihtiyaca cevap verdiğini, HTML ve CSS ile nasıl bir görev paylaşımı kurduğunu ve modern web geliştirmede neden vazgeçilmez olduğunu ele alacağız. Çünkü bir programlama dilini doğru öğrenmenin yolu, yalnızca kod örneklerini ezberlemekten değil; o dilin hangi problemi çözmek için ortaya çıktığını anlamaktan geçer.

Web Sayfaları Yalnızca Belge Olarak Kalmadı

World Wide Web’in ilk yıllarında hazırlanan sayfalar, büyük ölçüde birbirine bağlantılarla bağlanan dijital belgelerden oluşuyordu. Kullanıcı bir bağlantıya tıklıyor, tarayıcı sunucudan yeni bir belge istiyor ve gelen sayfayı ekranda gösteriyordu. Bu yapı; bilimsel metinlerin, duyuruların ve çeşitli bilgilerin paylaşılması için yeterliydi. Web’in öncelikli amacı da kullanıcıya bir uygulama sunmak değil, bilgiye kolayca ulaşılmasını sağlamaktı.

Ancak internetin yaygınlaşmasıyla birlikte kullanıcıların beklentileri değişmeye başladı. Web sayfalarında formlar dolduruluyor, ürünler inceleniyor ve farklı içerik türleriyle etkileşim kuruluyordu. Bir formun eksik doldurulduğunu anlamak için bilgilerin önce sunucuya gönderilmesi, sunucunun yanıt vermesi ve sayfanın yeniden yüklenmesi gerekiyordu. Basit bir işlemin bile bu kadar uzun bir yol izlemesi, hem kullanıcı deneyimini zayıflatıyor hem de sunucular üzerinde gereksiz bir yük oluşturuyordu.

Tarayıcıların, kullanıcının yaptığı işlemlere sayfa yeniden yüklenmeden cevap verebilmesi gerekiyordu. Örneğin bir alan boş bırakıldığında uyarı göstermek, fareyle üzerine gelinen bir öğeyi değiştirmek veya yapılan seçime göre yeni bir içerik sunmak doğrudan tarayıcı içerisinde gerçekleştirilebilmeliydi. HTML belgenin yapısını tanımlıyor, CSS görünümü düzenliyordu; fakat bu iki teknoloji kendi başına karar veren ve işlem yapan bir programlama sistemi sunmuyordu.

İhtiyaç duyulan şey HTML’in ya da CSS’in görevini genişletmek değildi. Web sayfasının yapısını ve görünümünü koruyarak ona davranış kazandıracak yeni bir teknoloji gerekiyordu. JavaScript’in ortaya çıkışına zemin hazırlayan temel ihtiyaç da buydu: Web sayfalarını yalnızca okunan belgeler olmaktan çıkarıp kullanıcıyla etkileşim kurabilen yapılara dönüştürmek.

JavaScript’in Doğuşu: Tarayıcıya Davranış Kazandırmak

1990’lı yılların ortalarında web hızla büyüyor, tarayıcılar arasındaki rekabet artıyor ve web sayfalarından beklenen özellikler çeşitleniyordu. Bu dönemde Netscape, kendi tarayıcısında çalışabilecek; öğrenilmesi görece kolay, hızlı ve HTML ile birlikte kullanılabilen bir betik diline ihtiyaç duydu. Amaç, geliştiricilerin her küçük işlem için sunucuya başvurmak zorunda kalmadan sayfa içerisinde etkileşim oluşturabilmesiydi.

Bu ihtiyaç doğrultusunda Brendan Eich tarafından 1995 yılında geliştirilen dil, önce Mocha, daha sonra LiveScript adıyla anıldı. Kısa süre sonra adı JavaScript olarak değiştirildi. JavaScript adı, o dönemde büyük ilgi gören Java programlama diliyle benzerlik çağrıştırsa da JavaScript ve Java birbirinden farklı dillerdir. İsimlerinin benzemesi, aynı teknoloji oldukları veya birinin diğerinin alt türü olduğu anlamına gelmez.

JavaScript’in ilk kullanım alanları bugünkü web uygulamalarıyla kıyaslandığında oldukça sınırlıydı. Form alanlarını kontrol etmek, durum çubuğunda mesaj göstermek, görselleri değiştirmek ve kullanıcı hareketlerine tepki vermek gibi işlemler öne çıkıyordu. Fakat dilin getirdiği temel yenilik son derece önemliydi: Web sayfası artık tarayıcıya gönderildikten sonra da çalışmaya devam edebiliyor ve kullanıcının yaptığı işlemlere cevap verebiliyordu.

Farklı tarayıcı üreticilerinin benzer dilleri farklı biçimlerde uygulaması, kısa süre içerisinde uyumluluk sorunlarını gündeme getirdi. Bunun üzerine dilin ortak kurallara bağlanması için standartlaştırma çalışmaları başlatıldı. JavaScript’in dayandığı standart olan ECMAScript‘in ilk sürümü, Ecma International tarafından 1997 yılında yayımlandı. Böylece dilin nasıl çalışacağı yalnızca tek bir tarayıcı üreticisinin kararlarına bağlı kalmaktan çıkarak ortak bir standarda kavuştu.

Burada JavaScript ile ECMAScript arasındaki ayrımı doğru kurmak gerekir. ECMAScript, dilin temel kurallarını ve özelliklerini tanımlayan standarttır; JavaScript ise bu standardın en yaygın uygulamasıdır. Günlük kullanımda çoğunlukla JavaScript adı tercih edilse de dilin gelişimini belirleyen yenilikler ECMAScript belirtimleri üzerinden standartlaştırılır.

JavaScript Nedir?

JavaScript, web sayfalarına davranış ve etkileşim kazandırmak amacıyla geliştirilmiş, yüksek seviyeli bir programlama dilidir. Tarayıcı içerisinde çalışan JavaScript kodları; kullanıcının tıklama, yazma, seçim yapma veya sayfayı kaydırma gibi işlemlerini algılayabilir. Bu işlemlere bağlı olarak sayfadaki metinleri, özellikleri, sınıfları ve diğer öğeleri değiştirebilir.

Bu tanım, JavaScript’i yalnızca animasyon oluşturan bir araç olarak görmemek gerektiğini gösterir. JavaScript koşulları değerlendirebilir, hesaplama yapabilir, verileri saklayabilir, sunucularla iletişim kurabilir ve gelen sonuçları sayfanın tamamını yeniden yüklemeden kullanıcıya gösterebilir. Başka bir ifadeyle JavaScript, web sayfasının belirli kurallara göre hareket etmesini sağlayan programlama katmanını oluşturur.

JavaScript çoğu zaman “istemci taraflı” bir dil olarak tanımlanır. Buradaki istemci, kullanıcının web sitesini açtığı tarayıcıdır. Kodun tarayıcıda çalışması, bazı işlemlerin uzak bir sunucuya gönderilmeden kullanıcının cihazında yapılabilmesini sağlar. Ancak JavaScript günümüzde yalnızca istemci tarafıyla sınırlı değildir. Node.js gibi çalışma ortamları sayesinde sunucu tarafında da kullanılabilir ve baştan sona JavaScript tabanlı uygulamalar geliştirilebilir.

JavaScript’in dinamik bir dil olması, geliştiricilere esnek bir çalışma biçimi sunar. Kodlar tarayıcı tarafından çalışma sırasında yorumlanır ve sayfanın mevcut durumuna göre farklı sonuçlar üretebilir. Bu esneklik öğrenme sürecini kolaylaştırabilse de büyük projelerde düzenli kod yazmayı, veri türlerini doğru yönetmeyi ve hataları dikkatle ele almayı önemli hâle getirir.

Dolayısıyla JavaScript, yalnızca web sayfasındaki birkaç öğeyi hareket ettiren yardımcı bir teknoloji değildir. Kullanıcı etkileşimlerini yöneten, uygulama mantığını çalıştıran, verilerle işlem yapan ve modern web uygulamalarının davranış katmanını oluşturan genel amaçlı bir programlama dilidir.

HTML, CSS ve JavaScript Arasındaki Görev Paylaşımı

Modern bir web sayfasını anlamanın en kolay yollarından biri HTML, CSS ve JavaScript’in görevlerini birbirinden ayırmaktır. HTML, sayfadaki içeriğin yapısını ve anlamını belirler. Bir metnin başlık, paragraf, bağlantı, liste veya form alanı olduğunu HTML ile tanımlarız. CSS, bu yapının renklerini, boyutlarını, boşluklarını ve yerleşimini düzenleyerek nasıl görüneceğini belirler.

JavaScript ise oluşturulan bu yapının nasıl davranacağını yönetir. Kullanıcı bir menü düğmesine bastığında menünün açılması, form gönderilmeden önce alanların kontrol edilmesi, bir ürün sepete eklendiğinde toplam tutarın değişmesi veya yeni içeriklerin sayfa yenilenmeden görüntülenmesi JavaScript’in üstlendiği işlemlere örnek verilebilir.

Bu görev paylaşımı kesinlikle teknolojilerin birbirinden kopuk olduğu anlamına gelmez. JavaScript, HTML tarafından oluşturulan belge yapısına Belge Nesne Modeli, yaygın adıyla DOM üzerinden erişebilir. Böylece bir başlığın metnini değiştirebilir, yeni bir öğe ekleyebilir veya mevcut bir öğeyi kaldırabilir. Aynı şekilde CSS sınıflarını değiştirerek sayfanın görünümünü kullanıcı işlemlerine göre güncelleyebilir.

Sağlıklı bir web projesinde bu üç teknoloji kendi temel görevine odaklanır. Anlamlı ve erişilebilir bir yapı için HTML, tutarlı bir görsel sunum için CSS, gerçekten gerekli olan davranışlar için JavaScript kullanılır. JavaScript devre dışı kaldığında temel içeriğin mümkün olduğunca erişilebilir kalması ve etkileşimlerin klavye ile de kullanılabilmesi, iyi web geliştirmenin önemli ilkeleri arasındadır.

JavaScript Web Geliştirmeyi Nasıl Değiştirdi?

JavaScript’in yaygınlaşmasıyla birlikte web sayfaları, her işlemde yeni bir belge yükleyen yapılardan giderek uygulama benzeri deneyimlere dönüştü. Kullanıcıların yaptığı işlemler anında değerlendirilebildi; sayfanın yalnızca gerekli bölümleri güncellenebildi ve daha hızlı geri bildirim sunmak mümkün hâle geldi. Böylece tarayıcı, yalnızca belgeleri gösteren bir yazılım olmaktan çıkarak programların çalışabildiği güçlü bir ortama dönüştü.

Bu değişimin en belirgin sonuçlarından biri, sunucuyla arka planda veri alışverişinin yaygınlaşması oldu. JavaScript sayesinde bir sayfanın tamamını yeniden yüklemeden sunucudan veri alınabilir ve ekrandaki belirli bir alan güncellenebilir. Arama önerileri, anlık bildirimler, sonsuz kaydırma, çevrim içi haritalar ve mesajlaşma uygulamaları gibi bugün sıradan kabul edilen pek çok özellik bu yaklaşım üzerine kuruludur.

JavaScript’in gelişimi yalnızca kullanıcı arayüzlerini değil, yazılım geliştirme biçimini de değiştirdi. React, Vue, Angular ve benzeri araçlar karmaşık arayüzlerin bileşenler hâlinde oluşturulmasını kolaylaştırdı. Node.js, JavaScript’in tarayıcı dışına çıkarak sunucularda çalışabilmesini sağladı. Paket yöneticileri, derleme araçları ve test sistemleriyle birlikte JavaScript çevresinde geniş bir geliştirme ekosistemi oluştu.

Bununla birlikte modern araçların varlığı, JavaScript’in temel özelliklerini öğrenmeyi gereksiz hâle getirmez. Çerçeveler ve kütüphaneler zaman içinde değişebilir; ancak değişkenler, fonksiyonlar, olaylar, nesneler, asenkron işlemler ve DOM ile çalışma gibi temel kavramlar önemini korur. Bir aracı doğru kullanabilmek için önce onun üzerine kurulduğu dili anlamak gerekir.

Modern Web’de JavaScript’in Önemi

Günümüzde web siteleri yalnızca bilgi sunan sayfalardan oluşmamaktadır. Bankacılık hizmetleri, çevrim içi eğitim sistemleri, yönetim panelleri, sosyal ağlar, ofis uygulamaları ve içerik yönetim sistemleri tarayıcı üzerinden kullanılabilmektedir. Bu uygulamaların kullanıcı işlemlerine hızlı biçimde cevap verebilmesi ve verileri dinamik olarak yönetebilmesi büyük ölçüde JavaScript sayesinde mümkün olur.

JavaScript’in önemi yalnızca sunduğu özelliklerden değil, tarayıcıların ortak programlama dili olmasından kaynaklanır. Kullanıcıların ayrıca bir eklenti kurmasına gerek kalmadan modern tarayıcılarda çalışabilir. Tarayıcı standartları geliştikçe JavaScript; ses, görüntü, grafik, dosya işlemleri, gerçek zamanlı iletişim ve çevrim dışı çalışma gibi çok daha geniş yeteneklere erişmiştir.

Bununla birlikte her özelliği JavaScript ile oluşturmak doğru bir yaklaşım değildir. HTML ile yapılabilen bir işlemi gereksiz yere JavaScript’e taşımak; performans, erişilebilirlik ve bakım açısından yeni sorunlar doğurabilir. Benzer biçimde yalnızca görsel sunumla ilgili işlemler çoğu zaman CSS’in sorumluluğundadır. JavaScript, ihtiyaç duyulan davranışı eklemeli; sayfanın temel yapısının ve içeriğinin önüne geçmemelidir.

Doğru kullanıldığında JavaScript, kullanıcıya daha hızlı geri bildirim sunan, gereksiz sayfa yenilemelerini azaltan ve karmaşık işlemleri anlaşılır arayüzlerle yönetebilen uygulamalar geliştirmeyi sağlar. Yanlış veya aşırı kullanıldığında ise sayfanın yavaşlamasına, klavye ve ekran okuyucu kullanıcıları için engeller oluşmasına ya da temel işlevlerin çalışmamasına neden olabilir. Bu nedenle JavaScript öğrenmek, yalnızca kod yazmayı değil; ne zaman ve ne kadar kullanılması gerektiğini de öğrenmeyi gerektirir.

JavaScript Öğrenmeye Nereden Başlanmalı?

JavaScript öğrenmeden önce HTML’in belge yapısını, CSS’in ise görsel sunumu nasıl yönettiğini temel düzeyde bilmek önemli bir avantaj sağlar. Çünkü tarayıcıda yazılan JavaScript kodlarının büyük bölümü, HTML öğeleriyle ve bu öğelere uygulanan stillerle birlikte çalışır. Yapısı anlaşılmayan bir sayfaya davranış kazandırmak, öğrenme sürecini gereksiz biçimde zorlaştırabilir.

İlk aşamada değişkenler, veri türleri, operatörler, koşullar, döngüler ve fonksiyonlar gibi programlama temelleri öğrenilmelidir. Ardından diziler ve nesneler ele alınmalı; daha sonra DOM seçicileri, olaylar ve form işlemleriyle tarayıcı üzerindeki gerçek etkileşimlere geçilmelidir. Asenkron programlama, ağ istekleri, modüller ve hata yönetimi gibi konular ise bu temel sağlamlaştıktan sonra daha anlaşılır hâle gelir.

Öğrenme sürecinde doğrudan büyük çerçevelerle başlamak kısa vadede hızlı sonuç veriyor gibi görünebilir. Ancak JavaScript’in çalışma mantığı anlaşılmadan kullanılan bir çerçeve, karşılaşılan hataların nedenini bulmayı zorlaştırır. Küçük uygulamalar hazırlamak, tarayıcının geliştirici araçlarını kullanmak ve yazılan her kodun sayfada hangi değişikliği oluşturduğunu gözlemlemek daha kalıcı bir öğrenme sağlar.

JavaScript öğrenirken erişilebilirlik de sonradan eklenecek ayrı bir özellik olarak görülmemelidir. Düğme görevi taşıyan öğelerin gerçek düğmelerle oluşturulması, klavye odağının korunması, değişikliklerin gerektiğinde yardımcı teknolojilere bildirilmesi ve hareketli içeriklerin kullanıcı tercihlerine saygı duyması başlangıçtan itibaren dikkate alınmalıdır. Etkileşimli bir sayfa, ancak farklı kullanıcıların aynı işlemlere ulaşabilmesiyle gerçekten işlevsel olur.

Sonuç

JavaScript, web sayfalarını yalnızca görsel olarak hareketlendirmek amacıyla ortaya çıkmadı. Temel amacı, tarayıcı içerisinde çalışan web sayfalarının kullanıcı işlemlerine cevap verebilmesini, belirli kararlar alabilmesini ve sayfa tamamen yenilenmeden değişebilmesini sağlamaktı. Bu ihtiyaç, JavaScript’i HTML ve CSS ile birlikte modern web’in üç temel teknolojisinden biri hâline getirdi.

Başlangıçta form kontrolleri ve basit tarayıcı etkileşimleri için kullanılan dil, bugün istemci ve sunucu tarafında çalışan kapsamlı bir geliştirme ekosistemine sahiptir. Buna rağmen JavaScript’in web üzerindeki temel rolü değişmemiştir. HTML yapıyı, CSS görünümü, JavaScript ise davranışı tanımlar.

JavaScript’i öğrenmeye başlarken ilk hedef, mümkün olduğunca fazla özellik veya kütüphane ezberlemek olmamalıdır. Öncelikle dilin neden geliştirildiği, tarayıcıyla nasıl iletişim kurduğu ve HTML ile CSS’i hangi noktada tamamladığı anlaşılmalıdır. Bu temel kurulduğunda, ilerleyen konularda karşılaşılacak kodlar yalnızca ezberlenen komutlar olmaktan çıkar ve çözülen problemin anlamlı parçalarına dönüşür.

Bir CSS kuralında seçicinin neden süslü parantezlerden önce yazıldığı, özellik ile değerin neden iki noktayla ayrıldığı veya bildirimin sonunda neden noktalı virgül kullanıldığı çoğu zaman üzerinde durulmadan geçilen ayrıntılardır. Oysa bu işaretlerin hiçbiri yalnızca kodu düzenli göstermek amacıyla kullanılmaz. Her biri, CSS söz diziminin bir parçasıdır ve tarayıcıya kodun nasıl yorumlanması gerektiği konusunda belirli bir bilgi verir.

Hazır bir CSS örneğini kopyalamak ile CSS kuralının nasıl oluşturulduğunu anlamak aynı şey değildir. Kullanılan sözcüklerin ve işaretlerin görevleri bilinmediğinde, kodlar çoğunlukla ezberlenen kalıplara dönüşür. Bu durumda geliştirici, daha önce gördüğü bir örneği yeniden yazabilir; ancak yapı değiştiğinde veya söz diziminde bir hata oluştuğunda sorunun kaynağını belirlemekte zorlanabilir.

CSS kuralları rastgele bir yazım düzenine sahip değildir. Tarayıcı; seçiciyi, bildirim bloğunu, özelliği ve değeri birbirinden ayırabilmek için CSS tarafından tanımlanan belirli kurallardan yararlanır. Süslü parantezler, iki nokta ve noktalı virgül gibi işaretler de bu yapının sınırlarını belirler. Başka bir ifadeyle tarayıcı, yazılan CSS kodunu görünüşüne göre değil, söz dizimindeki bölümlere ve bu bölümlerin birbirleriyle kurduğu ilişkiye göre anlamlandırır.

Bu makalede CSS özelliklerinin nasıl kullanıldığını veya seçici türlerinin neler olduğunu anlatmayacağız. Bunun yerine söz dizimi kavramını, temel bir CSS kuralının hangi bölümlerden oluştuğunu, kullanılan işaretlerin ne anlama geldiğini ve tarayıcıların bu yapıyı nasıl yorumladığını ele alacağız. Çünkü CSS’i doğru öğrenmenin ilk adımı, yalnızca çalışan kodlar yazmak değil; yazılan kodun neden o biçimde oluşturulduğunu anlamaktır.

Söz Dizimi (Syntax) Nedir?

Söz dizimi, bir dilde anlamlı ve geçerli ifadelerin hangi kurallara göre oluşturulacağını belirleyen yapıdır. Kullanılan sözcüklerin hangi sırayla yazılacağı, ifadelerin birbirinden nasıl ayrılacağı ve özel işaretlerin nerede kullanılacağı söz dizimi kurallarıyla belirlenir. Bu nedenle bir dili öğrenmek, yalnızca o dilde kullanılan sözcükleri bilmekten ibaret değildir. Bu sözcüklerin ve işaretlerin nasıl bir araya getirileceğini de öğrenmek gerekir.

İnsanların kullandığı doğal dillerde olduğu gibi yazılım geliştirmede kullanılan dillerde de belirli bir düzen bulunur. Bir cümlede sözcüklerin yerleri rastgele değiştirildiğinde anlatım bozulabilir veya cümle anlamını kaybedebilir. Benzer şekilde kod içerisindeki bir sözcüğün, işaretin ya da bölümün yanlış yerde kullanılması da tarayıcının veya ilgili yazılımın ifadeyi doğru yorumlayamamasına neden olabilir.

Ancak bilgisayarların kodları yorumlama biçimi, insanların doğal dilleri anlamlandırma biçiminden farklıdır. İnsanlar, eksik veya hatalı kurulmuş bir cümlenin ne anlatmak istediğini çoğu zaman bağlamdan hareketle tahmin edebilir. Tarayıcılar ise karşılaştıkları kodları önceden tanımlanmış kurallara göre ayrıştırır. Yazılan ifade bu kurallara uymadığında tarayıcı, geliştiricinin ne yapmak istediğini tahmin etmek yerine kodu geçersiz kabul edebilir veya yorumlayamadığı bölümü yok sayabilir.

Bu durum, söz diziminin yalnızca biçimsel bir yazım tercihi olmadığını gösterir. Kodun alt alta veya yan yana yazılması çoğu zaman okunabilirlikle ilgili bir tercih olabilir; ancak iki nokta, noktalı virgül ve süslü parantez gibi işaretlerin görevleri doğrudan dilin yapısıyla ilgilidir. Bu işaretlerden birinin kaldırılması ya da yanlış yerde kullanılması, ifadenin tarayıcı açısından taşıdığı anlamı değiştirebilir.

Her dilin kendine özgü söz dizimi kuralları vardır. Bir dilde geçerli olan yazım biçimi, başka bir dilde aynı görevi yerine getirmeyebilir. Bu nedenle geliştiricinin daha önce başka bir dil öğrenmiş olması, yeni karşılaştığı dilin kurallarını kendiliğinden bildiği anlamına gelmez. Temel düşünceler birbirine benzese bile bu düşüncelerin kod içerisinde nasıl ifade edildiği, kullanılan dilin söz dizimine göre değişir.

CSS de web sayfalarının görsel sunumunu tanımlayan standart bir stil dili olarak kendine özgü söz dizimi kurallarına sahiptir. Tarayıcının bir CSS kuralını anlayabilmesi için seçicinin, bildirim bloğunun, özelliğin ve değerin beklenen yapıya uygun biçimde yazılması gerekir. Bu bölümleri birbirinden ayıran işaretler de CSS söz diziminin ayrılmaz parçalarıdır.
CSS’in hangi ihtiyaç sonucunda geliştirildiğini ve web standartları içerisindeki yerini daha ayrıntılı öğrenmek içinCSS Neden Ortaya Çıktı?” başlıklı makalemizi inceleyebilirsiniz.
Örneğin temel bir CSS kuralı şu yapıya sahiptir:

seçici {
özellik: değer;
}

Bu gösterimde kullanılan sözcükler, gerçek bir CSS kuralının hangi bölümlerden oluştuğunu temsil eder. seçici, kuralın hangi öğeyle ilişkilendirileceğini; özellik, öğenin hangi yönünün ele alındığını; değer ise bu özelliğin nasıl uygulanacağını bildirir. Süslü parantezler, iki nokta ve noktalı virgül de bu bölümlerin başlangıçlarını, sınırlarını ve bitişlerini belirler.

Burada dikkat edilmesi gereken önemli nokta, söz diziminin yalnızca hangi sözcüklerin kullanılacağını değil, bu sözcükler arasındaki ilişkinin nasıl kurulacağını da belirlemesidir. CSS içerisinde geçerli bir özellik adı ve bu özelliğin kabul ettiği geçerli bir değer kullanılmış olsa bile bunlar yanlış sırada yazılır veya aralarındaki iki nokta kaldırılırsa ortaya geçerli bir bildirim çıkmaz. Başka bir ifadeyle doğru parçaların kullanılması, tek başına doğru bir CSS kuralı oluşturmak için yeterli değildir; bu parçaların CSS’in beklediği yapıya göre bir araya getirilmesi gerekir.

Söz dizimini öğrenmek, kod kalıplarını ezberlemekten bu noktada ayrılır. Ezberlenen bir kalıp, yalnızca daha önce görülen örneklerin tekrar edilmesini sağlayabilir. Söz dizimi anlaşıldığında ise geliştirici, karşılaştığı bir CSS kuralını bölümlerine ayırabilir, kullanılan işaretlerin görevlerini belirleyebilir ve yeni kuralların hangi temel yapı üzerine kurulduğunu anlayabilir.

Dolayısıyla CSS öğrenirken yalnızca hangi özelliklerin hangi sonuçları oluşturduğuna bakmak yeterli değildir. Öncelikle bu özelliklerin bir CSS kuralı içerisinde nasıl tanımlandığını ve tarayıcının yazılan ifadeyi hangi kurallara göre okuduğunu anlamak gerekir. Bu temel kurulduğunda, ilerleyen konularda ele alınacak seçiciler, özellikler ve değerler birbirinden bağımsız kod parçaları olmaktan çıkar; CSS’in ortak söz dizimi içerisinde anlam kazanan bölümlere dönüşür.

Bir CSS Kuralının Temel Yapısı

CSS, web sayfasındaki öğelerin nasıl sunulacağını tanımlayan kurallardan oluşur. Bu kurallar, tarayıcıya bir öğenin yalnızca hangi görsel özelliğe sahip olacağını değil, tanımlanan görünümün hangi öğelere uygulanacağını da bildirir. Bu nedenle temel bir CSS kuralında hedef ile uygulanacak bildirimlerin birbirinden ayrılması gerekir.

Bir CSS kuralının genel yapısı şu şekilde gösterilebilir:

seçici {
özellik: değer;
}

Bu gösterim doğrudan kullanılabilecek gerçek bir CSS kodu değildir. Buradaki seçici, özellik ve değer ifadeleri, bir CSS kuralında bulunması gereken bölümleri temsil eder. Gerçek bir kural yazılırken bu ifadelerin yerine tarayıcının tanıdığı seçiciler, CSS özellikleri ve bu özelliklere uygun değerler kullanılır.

Örneğin bir sayfadaki ikinci düzey başlıkların metin rengini belirlemek için şu CSS kuralı yazılabilir:

h2 {
color: darkblue;
}

Bu örnekte h2, kuralın ilişkilendirileceği HTML öğelerini belirtir. Süslü parantezlerin içerisinde bulunan color: darkblue; ifadesi ise bu öğelere uygulanacak bildirimi oluşturur. Tarayıcı bu kuralı okuduğunda, sayfadaki h2 öğelerini bulur ve bu öğelerin metin rengini koyu mavi olarak tanımlar.

Temel bir CSS kuralı, seçici ve bildirim bloğu olmak üzere iki ana bölümden oluşur. Seçici, kuralın hangi HTML öğeleri için tanımlandığını belirler. Bildirim bloğu ise seçilen öğelere uygulanacak görsel kuralları içerir. Böylece tarayıcı, hedef alınan öğeler ile bu öğeler üzerinde yapılacak değişiklikler arasında ilişki kurabilir.

Örneği iki ana bölüme ayırdığımızda yapı daha açık biçimde görülebilir:

h2 /* Seçici */
{
color: darkblue;
} /* Bildirim bloğu */

Buradaki açıklamalar yalnızca bölümleri görünür hâle getirmek için kullanılmıştır. CSS kuralının kendisi, seçicinin ardından gelen ve süslü parantezlerle sınırlandırılan bildirim bloğundan meydana gelir. Seçici ile bildirim bloğu birbirinden bağımsız değildir; blok içerisindeki bütün bildirimler, kendisinden önce yazılan seçiciyle ilişkilendirilir.

Bildirim bloğunun içerisinde yer alan color: darkblue; ifadesine bildirim adı verilir. Bir bildirim, özellik ve değer olmak üzere iki temel parçadan oluşur. Bu örnekte color özelliği, darkblue ise bu özelliğe verilen değerdir. Özellik, HTML öğesinin hangi görsel yönünün tanımlandığını; değer ise bu tanımlamanın nasıl uygulanacağını belirtir.

Bir bildirim bloğunda yalnızca bir bildirim bulunması zorunlu değildir. Aynı seçiciyle ilişkilendirilecek birden fazla bildirim, aynı blok içerisinde yazılabilir:

h2 {
color: darkblue;
text-align: center;
}

Bu örnekte her iki bildirim de h2 seçicisiyle ilişkilidir. Tarayıcı, color: darkblue; bildirimini okuduktan sonra aynı blok içerisindeki text-align: center; bildirimini de değerlendirir. Böylece aynı HTML öğeleri için birden fazla görsel özellik, tek bir CSS kuralı içerisinde tanımlanabilir.

Burada CSS kuralı ile CSS bildirimi arasındaki farkı doğru anlamak önemlidir. color: darkblue; tek başına bir bildirimdir. h2 seçicisi ve bu bildirimi çevreleyen blok bir araya geldiğinde ise CSS kuralı oluşur. Başka bir ifadeyle bildirim, kuralın içerisinde yer alan bir parçadır; kuralın tamamı değildir.

Temel yapıyı daha açık biçimde şu şekilde ifade edebiliriz:

seçici {
bildirim;
}

Bildirimin kendi iç yapısı ise şöyledir:

özellik: değer;

Bu iki yapı bir araya geldiğinde tarayıcının yorumlayabileceği temel CSS kuralı ortaya çıkar. Seçici hedefi belirler, bildirim bloğu o hedef için tanımlanan kuralları bir arada tutar ve her bildirim bir özellik ile bu özelliğe verilen değeri ilişkilendirir.

CSS Kuralını Oluşturan Bölümler Ne Anlama Gelir?

Bir CSS kuralı; sözcükler, değerler ve bunları birbirinden ayıran özel işaretlerden oluşur. Bu parçaların her biri, tarayıcının karşılaştığı kodu doğru biçimde ayrıştırabilmesi için belirli bir görev üstlenir. Bir parçanın eksik veya yanlış konumda bulunması, yazılan ifadenin geçerli bir CSS kuralı olarak yorumlanmasını engelleyebilir.

CSS bildirimlerinin özellik ve değerlerden oluşan temel yapısı, MDN Web Docs tarafından hazırlananCSS söz dizimi kaynağında da ayrıntılı olarak açıklanmaktadır.

Aşağıdaki CSS kuralında yapıyı oluşturan bütün temel parçalar yer almaktadır:

article {
line-height: 1.6;
background-color: #f5f5f5;
}

Seçici

CSS kuralının süslü parantezlerden önce bulunan bölümüne seçici adı verilir. Örnekteki seçici article ifadesidir:

article

Seçici, bildirim bloğunda bulunan kuralların hangi HTML öğeleriyle ilişkilendirileceğini belirtir. Tarayıcı article ifadesini okuduğunda, HTML belgesindeki ilgili öğeleri belirler ve süslü parantezler içerisinde tanımlanan bildirimleri bu öğeler için değerlendirir.

Seçicinin görevi, doğrudan bir görsel özellik tanımlamak değildir. Seçici yalnızca CSS kuralının hedefini belirler. Öğeye uygulanacak görsel tanımlar ise seçiciden sonra gelen bildirim bloğunun içerisinde bulunur.

Açılış ve Kapanış Süslü Parantezleri

Seçiciden sonra kullanılan { işareti, bildirim bloğunun başladığını gösterir. Bloğun sonunda bulunan } işareti ise ilgili seçiciye ait bildirimlerin tamamlandığını belirtir:

article {

}

Süslü parantezler, hangi bildirimlerin seçiciyle ilişkilendirileceğini belirleyen sınırları oluşturur. Açılış süslü parantezinden önce yer alan ifade seçici, iki süslü parantez arasında kalan ifadeler ise seçiciye ait bildirimler olarak değerlendirilir.

Tarayıcı kapanış süslü paranteziyle karşılaştığında ilgili CSS kuralının sona erdiğini anlar. Kapanış işaretinden sonra başlayan başka bir seçici ve bildirim bloğu, ayrı bir CSS kuralı olarak yorumlanır.

Bildirim Bloğu

Açılış ve kapanış süslü parantezlerinin arasında kalan alana bildirim bloğu adı verilir:

{
line-height: 1.6;
background-color: #f5f5f5;
}

Bildirim bloğu, seçilen HTML öğelerine uygulanacak tanımları bir arada tutar. Bir bildirim bloğunda tek bir bildirim bulunabileceği gibi birden fazla bildirim de yer alabilir.

Örnekte line-height: 1.6; ve background-color: #f5f5f5; olmak üzere iki bildirim bulunmaktadır. Her iki bildirim de aynı blok içerisinde yer aldığı için article seçicisiyle ilişkilendirilir.

Bildirim

Bir CSS özelliği ile bu özelliğe verilen değerin oluşturduğu ifadeye bildirim adı verilir. Örnekteki ilk bildirim şöyledir:

line-height: 1.6;

İkinci bildirim ise şu şekilde yazılmıştır:

background-color: #f5f5f5;

Her bildirim, seçilen HTML öğesinin belirli bir yönü hakkında tarayıcıya ayrı bir tanım sunar. Aynı blok içerisinde bulunan bildirimler ortak bir seçiciye bağlıdır; ancak her biri kendi özelliği ve değeri bakımından ayrı ayrı değerlendirilir.

Bir bildirimin temel yapısı şu şekilde gösterilebilir:

özellik: değer;

Bu yapıda özellik ile değer iki noktayla ayrılır ve bildirim noktalı virgülle tamamlanır.

Özellik

Bildirimin iki noktadan önce bulunan bölümüne özellik adı verilir. Örnekte line-height ve background-color ifadeleri birer CSS özelliğidir:

line-height
background-color

Özellik, seçilen HTML öğesinin hangi yönünün tanımlandığını belirtir. line-height satır yüksekliğiyle, background-color ise arka plan rengiyle ilgili bir tanım yapılacağını tarayıcıya bildirir.

Tarayıcı, karşılaştığı özellik adını tanıdığı CSS özellikleriyle karşılaştırır. Özellik adı geçerliyse ardından gelen değeri bu özelliğin kuralları içerisinde değerlendirir. Yanlış yazılan veya tarayıcı tarafından tanınmayan bir özellik adı ise geçerli bir CSS özelliği olarak işleme alınamaz.

İki Nokta

CSS bildiriminde özellik ile değer arasında : işareti kullanılır:

line-height: 1.6;

İki nokta, özellik adının tamamlandığını ve bundan sonra bu özelliğe verilecek değerin başladığını gösterir. Tarayıcı line-height ifadesinin ardından iki noktayla karşılaştığında özellik bölümünü tamamlar ve sonraki ifadeyi değer olarak okumaya başlar.

İki nokta kullanılmadığında özellik ile değer arasındaki yapısal sınır ortadan kalkar:

line-height 1.6;

Bu ifade, geçerli bir özellik adı ve değer içeriyor gibi görünse de CSS bildirim söz dizimine uymaz. Tarayıcı, iki bölüm arasındaki ilişki doğru biçimde kurulmadığı için bildirimi geçerli olarak yorumlayamaz.

Değer

İki noktadan sonra başlayan ve noktalı virgüle kadar devam eden bölüm değer olarak adlandırılır. Örnekte 1.6, line-height özelliğinin; #f5f5f5 ise background-color özelliğinin değeridir:

line-height: 1.6;
background-color: #f5f5f5;

Değer, ilgili özelliğin nasıl uygulanacağını belirtir. Tarayıcı değeri tek başına değerlendirmez; kendisinden önce bulunan özellik ile birlikte ele alır. Bu nedenle bir değerin geçerli olup olmadığı, ilişkilendirildiği özelliğe göre belirlenir.

CSS özellikleri farklı türde değerler kabul edebilir. Ancak söz dizimi bakımından değerin temel konumu değişmez: Özellikten ve iki noktadan sonra yazılır, bildirimin sonuna kadar devam eder.

Noktalı Virgül

CSS bildirimlerinin sonunda ; işareti kullanılır:

line-height: 1.6;

Noktalı virgül, bildirimin sona erdiğini belirtir. Tarayıcı bu işarete ulaştığında özellik ve değer arasındaki tanımın tamamlandığını anlar. Noktalı virgülden sonra aynı bildirim bloğu içerisinde yeni bir özellik yazılabilir.

Bu işaret, birden fazla bildirimin bulunduğu bloklarda bildirim sınırlarının belirlenmesini sağlar:

article {
line-height: 1.6;
background-color: #f5f5f5;
}

İlk noktalı virgül, line-height: 1.6 bildiriminin bittiğini gösterir. Tarayıcı bundan sonra gelen background-color ifadesini yeni bir özelliğin başlangıcı olarak değerlendirir.

Bildirim bloğundaki son bildirimin ardından noktalı virgül kullanılmadığında CSS kuralı bazı durumlarda yine geçerli kabul edilebilir:

article {
line-height: 1.6;
background-color: #f5f5f5
}

Bunun nedeni, kapanış süslü parantezinin aynı zamanda bildirim bloğunun sona erdiğini göstermesidir. Bununla birlikte her bildirimi noktalı virgülle tamamlamak, söz diziminin tutarlı olmasını sağlar ve bloğa yeni bir bildirim eklendiğinde önceki bildirimin yanlışlıkla devam etmesini önler.

Bir CSS kuralında seçici hedefi belirler, süslü parantezler bildirim bloğunun sınırlarını oluşturur, özellik neyin tanımlandığını bildirir ve değer bu tanımın nasıl uygulanacağını belirtir. İki nokta özellik ile değer arasındaki ilişkiyi kurarken noktalı virgül bildirimin tamamlandığını gösterir. Bu parçalar birlikte kullanıldığında tarayıcının ayrıştırabileceği geçerli bir CSS kuralı meydana gelir.

Tarayıcı Bir CSS Kuralını Nasıl Yorumlar?

Tarayıcıya ulaşan CSS kodu, doğrudan ekranda görünen renk, boyut veya yerleşim bilgisine dönüşmez. Öncelikle kodun CSS söz dizimine uygun olup olmadığı incelenir, ardından kurallar kendi bölümlerine ayrılır ve hangi HTML öğeleriyle ilişkilendirileceği belirlenir. Tarayıcı ancak bu işlemler tamamlandıktan sonra ilgili görsel tanımları sayfaya uygulayabilir.

Aşağıdaki HTML öğesi ile CSS kuralını ele alalım:

<h1>CSS Söz Dizimi</h1>
h1 {

color: #8b0000;
font-weight: 700;
}

Tarayıcının elinde başlangıçta birbirinden ayrı iki kaynak bulunur. HTML belgesi sayfanın yapısını, CSS kodu ise bu yapının nasıl sunulacağını tanımlar. Tarayıcının görevi, HTML içerisindeki öğelerle CSS kuralları arasında doğru ilişkiyi kurmaktır.

CSS Kodunun Ayrıştırılması

Tarayıcı, CSS kodunu okurken karşılaştığı karakterleri ve işaretleri söz dizimi kurallarına göre değerlendirir. h1 ifadesinin ardından açılış süslü parantez geldiği için bu ifade seçici olarak yorumlanır. Süslü parantezin açılmasıyla birlikte seçiciye ait bildirim bloğunun başladığı anlaşılır.

Bildirim bloğu içerisinde color ifadesinin ardından iki nokta gelmesi, bunun bir özellik adı olduğunu gösterir. İki noktadan sonra bulunan #8b0000 ifadesi ise color özelliğine verilen değer olarak değerlendirilir. Noktalı virgül bildirimin tamamlandığını belirtir ve tarayıcı bundan sonra yeni bir bildirim aramaya başlar.

Aynı işlem font-weight: 700; bildirimi için de gerçekleştirilir. Kapanış süslü parantezine ulaşıldığında h1 seçicisine ait bildirim bloğunun ve dolayısıyla CSS kuralının sona erdiği anlaşılır.

Kodun bu şekilde anlamlı parçalara ayrılması işlemine ayrıştırma (parsing) adı verilir. Ayrıştırma sırasında tarayıcı yalnızca kodda hangi sözcüklerin bulunduğuna bakmaz. Sözcüklerin konumlarını, aralarındaki işaretleri ve oluşturdukları yapının CSS kurallarına uygunluğunu birlikte değerlendirir.
CSS kodlarının karakterlerden anlamlı kurallara dönüştürülmesini sağlayan ayrıştırma süreci, W3C tarafından yayımlananCSS Syntax Module Level 3 standardında teknik ayrıntılarıyla tanımlanmaktadır.

CSS Kurallarının Yapısal Hâle Getirilmesi

Geçerli CSS kuralları ayrıştırıldıktan sonra tarayıcı, bu kuralları kendi içerisinde işleyebileceği yapısal bir modele dönüştürür. Bu yapıCSS Nesne Modeli (CSSOM) olarak adlandırılır.

CSSOM, stil sayfasındaki kuralların tarayıcı tarafından düzenli bir yapı içerisinde tutulmasını sağlar. Seçiciler, bildirimler, özellikler ve değerler bu yapı içerisinde birbirleriyle ilişkili hâle getirilir. Böylece CSS kodu, tarayıcı açısından yalnızca art arda yazılmış metin olmaktan çıkar ve üzerinde işlem yapılabilen kurallar bütününe dönüşür.

Örnekteki CSS kuralı, CSSOM içerisinde genel olarak şu bilgileri temsil eder:

• Kuralın seçicisi h1 ifadesidir.
• Kuralda color özelliği #8b0000 değerine sahiptir.
• font-weight özelliğinin değeri 700 olarak tanımlanmıştır.
• Her iki bildirim de aynı seçiciyle ilişkilidir.

CSSOM’un oluşturulması, tarayıcının stil kurallarını daha sonra HTML belgesindeki öğelerle eşleştirebilmesi için gereklidir.

HTML Belgesinin Yapısal Hâle Getirilmesi

Tarayıcı, CSS kodunu ayrıştırırken HTML belgesini de kendi içerisinde işlenebilir bir yapıya dönüştürür. HTML etiketlerinden oluşturulan bu yapı Belge Nesne Modeli (DOM) olarak adlandırılır.

DOM içerisinde sayfadaki HTML öğeleri, aralarındaki üst ve alt öğe ilişkileriyle birlikte temsil edilir. Örnekte kullanılan

etiketi de DOM içerisinde bir öğe olarak yer alır. Tarayıcı böylece yalnızca sayfada bir metin bulunduğunu değil, bu metnin h1 öğesi içerisinde yer aldığını da bilir.

HTML ile CSS arasındaki ilişki, DOM ve CSSOM üzerinden kurulur. DOM sayfada hangi öğelerin bulunduğunu, CSSOM ise bu öğeler için hangi stil kurallarının tanımlandığını tarayıcıya bildirir.

Seçicinin HTML Öğesiyle Eşleştirilmesi

CSS kuralı ayrıştırıldıktan sonra tarayıcı, h1 seçicisinin HTML belgesinde hangi öğelerle eşleştiğini belirler. DOM içerisinde bulunan<h1> öğesi, CSS kuralındaki h1 seçicisiyle eşleştiği için bildirim bloğundaki değerler bu öğeyle ilişkilendirilir.

h1 {
color: #8b0000;
font-weight: 700;
}

Bu eşleştirme sonucunda tarayıcı,

öğesinin metin rengini #8b0000, yazı kalınlığını ise 700 olarak hesaplar. Sayfada birden fazla <h1> öğesi bulunması durumunda, seçiciyle eşleşen bütün öğeler aynı kuralın kapsamına girer.

Seçici hiçbir HTML öğesiyle eşleşmezse CSS kuralı geçersiz hâle gelmez. Kural tarayıcı tarafından okunup CSSOM içerisine alınabilir; ancak uygulanabileceği bir öğe bulunmadığı için sayfanın görünümünde herhangi bir sonuç oluşturmaz.

Uygulanacak Değerlerin Belirlenmesi

Bir HTML öğesi aynı anda birden fazla CSS kuralıyla eşleşebilir. Tarayıcı böyle bir durumda bütün eşleşmeleri değerlendirerek hangi bildirimin uygulanacağını belirler. CSS’in basamaklı yapısı, kuralların önceliği ve kaynak sırası bu değerlendirmede etkili olur.

Bu işlem sonucunda her öğe için kullanılacak değerler hesaplanır. Tarayıcı yalnızca geliştirici tarafından yazılan CSS kurallarını değil, tarayıcının varsayılan stillerini ve gerekli durumlarda üst öğelerden aktarılan değerleri de dikkate alır. Böylece öğenin ekranda kullanılacak son görünümü belirlenir.

Kuralın Ekrana Yansıtılması

DOM içerisindeki öğeler ile CSSOM içerisindeki kurallar eşleştirildikten sonra tarayıcı, sayfanın görsel olarak nasıl oluşturulacağını hesaplar. Öğelerin boyutları, konumları ve görsel özellikleri belirlendikten sonra sonuç ekrana çizilir.

Örnekteki

öğesi, tarayıcının gerçekleştirdiği işlemler sonucunda koyu kırmızı ve kalın bir metin olarak görüntülenir. Ekranda görülen bu sonuç, yalnızca color veya font-weight özelliklerinin varlığından kaynaklanmaz. CSS kodunun doğru ayrıştırılması, kuralın yapısal hâle getirilmesi, seçicinin HTML öğesiyle eşleştirilmesi ve uygulanacak değerlerin hesaplanması birlikte bu sonucu oluşturur.

Tarayıcının CSS kodunu yorumlaması; kodu okuma, söz dizimine göre ayrıştırma, kuralları CSSOM içerisinde düzenleme, seçicileri DOM öğeleriyle eşleştirme ve hesaplanan görünümü ekrana yansıtma işlemlerinden oluşur. Bu süreç, CSS söz dizimindeki her bölümün neden belirli bir konuma ve göreve sahip olduğunu da açıklar.

CSS Söz Dizimi Hatalı Yazılırsa Ne Olur?

Tarayıcılar, CSS kodlarını belirlenmiş söz dizimi kurallarına göre ayrıştırır. Bir CSS kuralı bu yapıya uygun yazıldığında seçici, bildirim bloğu, özellik ve değer doğru biçimde belirlenebilir. Söz dizimi bozulduğunda ise tarayıcı, hatalı ifadenin hangi görevi yerine getirdiğini anlayamayabilir.

CSS içerisindeki bir hata, çoğu zaman web sayfasının tamamen çalışmasını engellemez. Tarayıcılar, karşılaştıkları hatalı bölümü mümkün olduğunca sınırlandırmaya ve geçerli olan diğer kuralları işlemeye devam etmeye çalışır. Bu davranış, CSS’in hata toleransı olarak ifade edilebilir.

Örneğin aşağıdaki bildirim geçerli bir CSS söz dizimine sahiptir:

section {
border-color: gray;
}

Özellik ile değer arasında iki nokta bulunduğu ve bildirim noktalı virgülle tamamlandığı için tarayıcı bu yapıyı ayrıştırabilir. İki nokta kaldırıldığında ise özellik ile değer arasındaki ilişki bozulur:

section {
border-color gray;
}

border-color geçerli bir CSS özelliği, gray ise bu özellikle kullanılabilen bir değer olmasına rağmen ifade geçerli bir bildirim oluşturmaz. Tarayıcı, iki bölüm arasındaki ilişkiyi belirleyen iki nokta bulunmadığı için bu bildirimi yok sayar.

Hatalı Bir Bildirimin Yok Sayılması

Bir bildirim bloğunda hem geçerli hem de hatalı bildirimler bulunabilir:

section {
border-color gray;
background-color: white;
}

İlk bildirimde iki nokta bulunmadığı için border-color gray; ifadesi geçerli kabul edilmez. İkinci bildirim ise CSS söz dizimine uygundur. Tarayıcı ilk bildirimi uygulamaz; ancak background-color: white; bildirimini işlemeye devam eder.

Bu davranış sayesinde tek bir bildirimin hatalı olması, aynı blok içerisindeki bütün tanımların zorunlu olarak kaybedilmesine neden olmaz. Tarayıcı, noktalı virgülü kullanarak hatalı bildirimin sona erdiği yeri belirleyebilir ve ardından gelen bildirimi bağımsız olarak değerlendirebilir.

Noktalı Virgülün Unutulması

Noktalı virgül, bir bildirimin sona erdiğini ve yeni bir bildirimin başlayabileceğini belirtir. İki bildirim arasındaki noktalı virgül kaldırıldığında tarayıcı, ikinci özellik adını bir önceki değerin devamı olarak değerlendirebilir:

section {
color: black
background-color: white;
}

Tarayıcı bu kodu iki ayrı bildirim olarak okuyamaz. color özelliğinin değeri, black background-color: white biçiminde geçersiz bir yapıya dönüşür. Sonuç olarak yalnızca color bildirimi değil, onun devamı gibi görünen background-color bildirimi de uygulanmayabilir.

Noktalı virgülün unutulması, hatanın etkisini sonraki bildirime taşıyabilir. Özellikle çok sayıda bildirimin bulunduğu bloklarda, görünürde doğru yazılmış bir özelliğin neden çalışmadığını anlamayı zorlaştıran durumlardan biri budur.

Bildirim bloğundaki son bildirimin ardından noktalı virgül kullanılmaması ise farklı bir durumdur:

section {
background-color: white
}

Kapanış süslü parantezi bildirim bloğunun sona erdiğini gösterdiği için tarayıcı bu bildirimi geçerli kabul edebilir. Bununla birlikte son bildirim de noktalı virgülle tamamlandığında bloğa daha sonra yeni bir bildirim eklenmesi sırasında hata oluşma ihtimali azalır.

Süslü Parantez Hataları

Süslü parantezler, seçiciye ait bildirim bloğunun başlangıç ve bitiş sınırlarını belirler. Açılış veya kapanış süslü parantezinin eksik olması, yalnızca tek bir bildirimi değil, ardından gelen CSS kurallarını da etkileyebilir.

Aşağıdaki örnekte ilk kuralın kapanış süslü parantezi unutulmuştur:

header {
background-color: navy;

footer {
background-color: black;
}

Tarayıcı header kuralının nerede sona erdiğini doğru biçimde belirleyemediği için footer ifadesini bağımsız bir seçici olarak yorumlamakta zorlanır. Bu durumda ikinci kural beklenen şekilde uygulanmayabilir.

Süslü parantez hatalarının etkisi, eksik iki nokta veya geçersiz bir değere göre daha geniş olabilir. Çünkü süslü parantezler tek bir bildirimin değil, bildirim bloğunun sınırlarını oluşturur. Bu sınırların bozulması, hatadan sonra gelen kodların da yanlış yapı içerisinde değerlendirilmesine yol açabilir.

Özellik Adının Yanlış Yazılması

Bir CSS özelliğinin adı yanlış yazıldığında tarayıcı, bu ifadeyi tanıdığı bir özellikle eşleştiremez:

section {
backgroun-color: white;
color: black;
}

backgroun-color ifadesi CSS tarafından tanımlanmış bir özellik değildir. Tarayıcı bu bildirimi yok sayar; ancak söz dizimi doğru olan color: black; bildirimini uygular.

Bu örnekte iki nokta, değer ve noktalı virgül doğru yerde bulunmasına rağmen özellik adı geçerli değildir. Dolayısıyla bir bildirimin yapısal olarak doğru görünmesi, tarayıcı tarafından uygulanması için tek başına yeterli değildir. Kullanılan özellik adının da CSS standartlarında tanımlanmış olması gerekir.

Geçersiz Değer Kullanılması

Bir özellik adı doğru yazılmış olsa bile bu özelliğe uygun olmayan bir değer verilmesi bildirimi geçersiz hâle getirebilir:

section {
text-align: 25px;
color: black;
}

text-align geçerli bir CSS özelliğidir; ancak 25px bu özelliğin kabul ettiği değerlerden biri değildir. Tarayıcı özellik ile değer arasındaki yapıyı ayrıştırabilir, fakat değerin ilgili özellik için geçerli olmadığını belirlediğinde bildirimi uygulamaz.

Ardından gelen color: black; bildirimi geçerli olduğu için işlenmeye devam eder. Tarayıcının hata toleransı, geçersiz değerin etkisini mümkün olduğunca yalnızca ilgili bildirimle sınırlandırır.

Tarayıcı Hatalı Kodu Düzeltmez

Tarayıcının hatalı bildirimi yok sayması, kodun otomatik olarak düzeltildiği anlamına gelmez. Tarayıcı, geliştiricinin hangi özelliği veya değeri kullanmak istediğini tahmin ederek yeni bir kural oluşturmaz. Yalnızca anlayabildiği ve geçerli kabul ettiği bölümleri uygulamaya çalışır.

Örneğin backgroun-color ifadesinin background-color olarak yazılmak istendiği bir insan tarafından kolayca anlaşılabilir. Tarayıcı ise bu iki ifadeyi aynı özellik olarak kabul etmez. Yanlış yazılan bildirim geçersiz kalır ve beklenen görünüm oluşmaz.

CSS hataları genellikle sayfada doğrudan bir hata mesajı göstermez. Web sayfası açılmaya devam eder; ancak ilgili özellik uygulanmadığı için sonuç geliştiricinin beklediğinden farklı görünür. Bu durum, CSS söz dizimi hatalarının fark edilmesini bazen zorlaştırabilir.

Tarayıcının hata karşısındaki temel yaklaşımı, geçersiz bölümü mümkün olduğu ölçüde yok saymak ve geçerli kuralları işlemeye devam etmektir. Hatanın etkisi bazen tek bir bildirimle sınırlı kalırken eksik süslü parantez veya bildirimleri ayırmayan noktalı virgül gibi yapısal sorunlar, kendisinden sonra gelen kodları da etkileyebilir. Bu nedenle CSS’te kullanılan her işaret, yalnızca yazım düzeninin değil, tarayıcının hata sınırlarını belirleyebilmesinin de bir parçasıdır.

CSS Yazmak ile CSS Söz Dizimini Anlamak Arasındaki Fark

Bir CSS kuralını doğru biçimde yazabilmek, her zaman o kuralın yapısını anlamak anlamına gelmez. Geliştirici, daha önce karşılaştığı bir kod örneğini hatırlayarak veya başka bir kaynaktan kopyalayarak çalışan bir sonuç elde edebilir. Ancak kullanılan bölümlerin görevleri bilinmediğinde, yazılan kod çoğunlukla ezberlenmiş bir kalıp olarak kalır.

Örneğin aşağıdaki CSS kuralı, benzer örneklerle daha önce karşılaşmış bir kişi tarafından kolayca yazılabilir:

nav {
background-color: #1d3557;
}

Bu kodun çalıştığını görmek, söz diziminin anlaşıldığını tek başına göstermez. nav ifadesinin neden süslü parantezden önce bulunduğu, background-color ile #1d3557 ifadelerinin neden iki noktayla ayrıldığı ve bildirimin neden noktalı virgülle tamamlandığı bilinmiyorsa geliştirici yalnızca doğru bir yazım kalıbını tekrar etmiş olur.

Söz dizimini anlamak ise kuralın sonucundan önce yapısını görebilmeyi gerektirir. Bu yapıyı bilen geliştirici, nav ifadesini seçici, süslü parantezlerin arasını bildirim bloğu, background-color ifadesini özellik ve #1d3557 ifadesini değer olarak ayırt edebilir. İki noktanın özellik ile değer arasındaki ilişkiyi kurduğunu, noktalı virgülün ise bildirimi tamamladığını bilir.

Bu ayrım, yeni bir CSS kuralı yazılması gerektiğinde daha belirgin hâle gelir. Yalnızca örnekleri ezberleyen kişi, karşılaştığı her yeni ihtiyaç için benzer bir kod aramak zorunda kalabilir. Söz dizimini bilen kişi ise kullanacağı seçici, özellik ve değer değişse bile temel yapının aynı kaldığını bilir:

seçici {
özellik: değer;
}

Bu kalıp, belirli bir CSS özelliğine veya HTML öğesine ait değildir. CSS kurallarının ortak yapısını temsil eder. Seçici değişebilir, bildirim bloğunda farklı özellikler bulunabilir ve özelliklere farklı değerler verilebilir; ancak bu parçaların birbirleriyle kurduğu temel ilişki korunur.

Örneğin iki farklı CSS kuralı görünüşte farklı sözcükler içerebilir:

nav {
background-color: #1d3557;
}
main {
max-width: 1200px;
}

İlk kural bir arka plan rengi, ikinci kural ise en fazla genişlik değeri tanımlar. Buna rağmen her iki kural da aynı söz dizimi üzerine kuruludur. Her ikisinde de önce seçici, ardından süslü parantezlerle sınırlandırılan bildirim bloğu bulunur. Blok içerisindeki özellik ve değer iki noktayla ayrılır, bildirim ise noktalı virgülle tamamlanır.

Söz dizimini anlamak, kullanılan özelliklerin ne sonuç oluşturduğunu bilmekten de farklıdır. Bir geliştirici max-width özelliğinin ne işe yaradığını henüz bilmese bile max-width: 1200px; ifadesinin bir CSS bildirimi olduğunu anlayabilir. İfadenin iki noktadan önceki bölümünün özellik, sonraki bölümünün değer olduğunu ve noktalı virgülle tamamlandığını belirleyebilir.

Aynı şekilde bir CSS özelliğinin anlamını bilmek de bildirimi doğru yazmak için tek başına yeterli değildir. Özellik doğru seçilmiş olsa bile özellik ile değer arasındaki iki nokta unutulduğunda veya bildirim bloğunun sınırları yanlış kurulduğunda tarayıcı kodu beklenen biçimde yorumlayamaz. Teknik bilgi ile bu bilginin doğru söz dizimi içerisinde ifade edilmesi birbirini tamamlayan iki ayrı gerekliliktir.

Söz dizimi bilgisi, hataların kaynağını belirlemeyi de kolaylaştırır. Kopyalanan bir CSS kuralı çalışmadığında yapıyı bilmeyen kişi, sorunun seçicide, özellikte, değerde veya kullanılan işaretlerde olduğunu ayırt etmekte zorlanabilir. Kodun her parçasının görevini bilen geliştirici ise kuralı bölümlerine ayırarak inceleyebilir.

Örneğin aşağıdaki bildirimin neden çalışmadığı, söz dizimi bilindiğinde doğrudan görülebilir:

max-width 1200px;

Burada özellik ve değer doğru seçilmiş olsa da aralarındaki iki nokta eksiktir. Sorun max-width özelliğinin veya 1200px değerinin bilinmemesinden değil, bu iki bölüm arasındaki ilişkinin CSS söz dizimine uygun kurulmamasından kaynaklanır.

Söz dizimini anlamak, yalnızca hatasız kod yazmaya yardımcı olmaz; öğrenilen bilgilerin daha kalıcı olmasını da sağlar. Bir işaretin neden kullanıldığı bilindiğinde o işaret, ezberlenmesi gereken rastgele bir ayrıntı olmaktan çıkar. İki nokta özellik ile değeri ayırdığı, noktalı virgül bildirimi sonlandırdığı ve süslü parantezler bildirim bloğunu sınırlandırdığı için kullanılır.

CSS yazmayı öğrenmek, hazır örnekleri tekrar etmekle başlayabilir; ancak bu örneklerin arkasındaki yapı anlaşılmadığında öğrenme belirli kalıplarla sınırlı kalır. CSS söz dizimini anlamak ise farklı seçicilerin, özelliklerin ve değerlerin aynı temel yapı içerisinde nasıl bir araya geldiğini görmeyi sağlar. Böylece geliştirici yalnızca çalışan kodu değil, tarayıcının neden anlayabildiği bir CSS kuralı yazdığını da bilir.

Sonuç

CSS öğrenme süreci çoğu zaman özelliklerin ve değerlerin nasıl kullanılacağını gösteren hazır kod örnekleriyle başlar. Bu örnekler kısa sürede görünür sonuçlar elde edilmesini sağlasa da CSS kurallarının hangi yapıya göre oluşturulduğunu açıklamak için tek başına yeterli değildir. Yazılan kodun kalıcı biçimde anlaşılabilmesi için seçicinin, bildirim bloğunun, özelliğin, değerin ve kullanılan işaretlerin görevlerinin bilinmesi gerekir.

CSS söz dizimi, tarayıcının bir stil kuralını nasıl okuyacağını belirleyen temel yazım düzenidir. Bir CSS kuralının genel yapısı şu şekilde ifade edilir:

seçici {
özellik: değer;
}

Bu yapı, ezberlenmesi gereken rastgele bir kod kalıbı değildir. Seçici, kuralın hangi HTML öğeleriyle ilişkilendirileceğini belirtir. Süslü parantezler bildirim bloğunun sınırlarını oluşturur. Özellik, öğenin hangi yönünün tanımlandığını; değer ise bu tanımlamanın nasıl uygulanacağını bildirir. İki nokta özellik ile değer arasındaki ilişkiyi kurarken noktalı virgül bildirimin sona erdiğini gösterir.

Tarayıcı, CSS kodunu bu bölümlere ve işaretlere göre ayrıştırır. Geçerli kuralları yapısal hâle getirir, seçicileri HTML belgesindeki öğelerle eşleştirir ve uygulanacak değerleri hesaplayarak sonucu ekrana yansıtır. Söz dizimi kurallarına uymayan bir bildirimle karşılaştığında ise çoğunlukla hatalı bölümü yok sayar ve anlayabildiği diğer CSS kurallarını işlemeye devam eder.

Bu hata toleransı, web sayfasının tek bir CSS hatası nedeniyle tamamen kullanılamaz hâle gelmesini önler. Ancak tarayıcının hatalı kodu yok sayması, geliştiricinin yazım kurallarını dikkate almasına gerek olmadığı anlamına gelmez. Eksik bir iki nokta tek bir bildirimi geçersiz kılabilirken unutulan bir noktalı virgül veya kapanış süslü parantezi, kendisinden sonra gelen ifadelerin de yanlış yorumlanmasına neden olabilir.

CSS söz dizimini anlamak, hazır örnekleri tekrar etmek ile bilinçli biçimde CSS yazmak arasındaki temel farkı oluşturur. Kodun her parçasının neden kullanıldığını bilen geliştirici, farklı kurallarda aynı yapıyı görebilir, söz dizimi hatalarını daha kolay belirleyebilir ve öğrendiği yeni özellikleri doğru bir yapı içerisinde kullanabilir.

CSS’in seçicileri, özellikleri ve değerleri zamanla çeşitlense de bu parçaların bir araya geldiği temel söz dizimi değişmez. Bu nedenle CSS öğreniminde sağlam bir başlangıç yapmak, yalnızca ilk çalışan kodu yazmakla değil; tarayıcının o kodu neden geçerli bir CSS kuralı olarak kabul ettiğini anlamakla mümkündür.

Bu sorunun cevabı, HTML’in eski bir teknoloji olması ya da öğrenmesinin görece kolay olmasında aranmamalıdır. Asıl neden, HTML’in web üzerinde yayımlanan her belgenin ortak yapısını tanımlayan temel teknoloji olmasıdır. Bir web sayfasının yapısı, içeriği ve anlamsal organizasyonu HTML ile belirlenir. Tarayıcıların yorumladığı, arama motorlarının analiz ettiği ve diğer web teknolojilerinin üzerine inşa edildiği ortak belge yapısı da bu tanımlar sayesinde oluşur. Kısacası HTML, bir web sayfasının nasıl görüneceğini değil, neyi temsil ettiğini tanımlar.

HTML’i yalnızca “web sayfası yapmak için kullanılan işaretleme dili” şeklinde tanımlamak, onun web teknolojileri içerisindeki gerçek rolünü açıklamak için yeterli değildir. HTML, yalnızca bir belgeyi görüntülemek amacıyla geliştirilmiş bir teknoloji değildir. Aynı zamanda web üzerinde yayımlanan bilgilerin ortak kurallar çerçevesinde tanımlanmasını, farklı tarayıcılar tarafından yorumlanmasını ve zaman içerisinde gelişen web standartlarıyla uyumlu şekilde varlığını sürdürebilmesini sağlayan temel teknolojilerden biridir. Bugün kullandığımız araçlar, programlama dilleri ve geliştirme yaklaşımları değişmiş olsa da, web’in ortak dili olma özelliğini koruyan teknoloji hâlâ HTML’dir.

Bu makalede HTML’in nasıl yazıldığını veya hangi etiketlerden oluştuğunu anlatmayacağız. Bunun yerine HTML’in neden geliştirildiğini, hangi ihtiyaca cevap verdiğini, tarihsel gelişimini ve günümüzde neden hâlâ web geliştirmenin ilk adımı olarak kabul edildiğini ele alacağız. Çünkü bir teknolojiyi doğru kullanabilmenin ilk şartı, onun sözdizimini ezberlemek değil; hangi problemi çözmek için geliştirildiğini ve web ekosistemi içerisindeki yerini anlamaktır.

HTML’in Ortaya Çıkışı: Web Neden HTML’e İhtiyaç Duydu?

Bugün internet üzerinde dolaşırken bir bağlantıya tıklıyor, saniyeler içerisinde farklı bir web sayfasına geçebiliyor ve dünyanın herhangi bir yerindeki bilgiye erişebiliyoruz. Bu deneyim artık günlük hayatın sıradan bir parçası hâline gelmiş durumda. Ancak web’in ilk yıllarında durum bugünkü kadar gelişmiş değildi.

1980’li yılların sonlarına gelindiğinde farklı bilgisayarlarda tutulan belgeler, birbirinden bağımsız sistemlerde saklanıyor ve ortak bir yapı içerisinde görüntülenemiyordu. Aynı bilgiye ulaşabilmek için farklı dosya biçimleri, farklı yazılımlar ve farklı işletim sistemleri kullanılabiliyordu. Belgelerin paylaşılması mümkündü; ancak bu belgelerin ortak kurallar çerçevesinde tanımlanması ve birbirleriyle ilişkilendirilebilmesi önemli bir problemdi.

1990 yılında, CERN’de görev yapan İngiliz bilgisayar bilimcisi **Tim Berners-Lee**, bu probleme çözüm üretmek amacıyla World Wide Web (WWW) projesini geliştirmeye başladı. Projenin temel hedefi, farklı bilgisayarlarda bulunan belgelerin ortak bir standart üzerinden yayımlanabilmesi ve bu belgeler arasında bağlantılar kurulabilmesiydi.

İşte HTML bu ihtiyacın sonucunda ortaya çıktı.

HTML’in ilk amacı, estetik web sayfaları oluşturmak veya görsel tasarımlar hazırlamak değildi. Asıl amaç, bir belgenin yapısını tanımlamak ve bu belgenin farklı sistemlerde aynı anlamı koruyarak görüntülenebilmesini sağlamaktı. Başlıkların başlık, paragrafların paragraf, bağlantıların ise başka belgelere yönlendiren öğeler olarak tanımlanabilmesi, HTML’in temel yaklaşımını oluşturdu.

HTML’in adında yer alan **HyperText** kavramı da bu yaklaşımın önemli bir parçasıdır. Çünkü web’i diğer belge sistemlerinden ayıran en önemli özelliklerden biri, belgelerin birbirine bağlantılar aracılığıyla bağlanabilmesidir. Böylece kullanıcılar yalnızca tek bir belgeyi okumakla kalmaz; ilgili gördükleri başka belgelere de anında ulaşabilir. Bugün internette yaptığımız her bağlantı geçişi, temelleri o dönemde atılan bu düşüncenin doğal bir sonucudur.

İlk HTML sürümü oldukça sınırlıydı ve yalnızca temel belge yapısını oluşturmaya yönelik az sayıda etiketten oluşuyordu. Buna rağmen HTML, web’in büyümesini mümkün kılan en önemli standartlardan biri hâline geldi. Aradan geçen yıllarda yeni sürümler, yeni etiketler ve yeni standartlar geliştirildi; ancak HTML’in temel amacı değişmedi. Dün olduğu gibi bugün de HTML, web üzerinde yayımlanan bilgilerin ortak bir yapıda tanımlanmasını sağlayan temel teknolojidir.

HTML Nedir?

HTML, web üzerinde yayımlanan belgelerin yapısını tanımlamak için geliştirilmiş standart bir işaretleme dilidir. Bir web sayfasında yer alan içeriklerin hangi görevi üstlendiğini belirler ve bu içeriklerin tarayıcı tarafından doğru şekilde yorumlanmasını sağlar.

Çoğu zaman HTML, “web sayfası oluşturmak için kullanılan dil” şeklinde tanımlanır. Bu ifade yanlış değildir; ancak HTML’in gerçek görevini açıklamak için yeterli değildir. Çünkü HTML’in temel amacı bir web sayfasını tasarlamak değil, sayfanın yapısını tanımlamaktır.

Bir web sayfasını yalnızca metinlerden oluşan düz bir belge olarak düşünelim. Bu durumda tarayıcı için tüm içerikler birbirine benzeyecektir. Hangi metnin başlık, hangisinin paragraf, hangisinin bağlantı veya liste olduğunu ayırt edebilmesi için bu içeriklerin belirli kurallar çerçevesinde tanımlanması gerekir. HTML tam olarak bu görevi üstlenir.

HTML’in adında yer alan **HyperText Markup Language** ifadesi de bu yaklaşımı özetler.

**HyperText**, belgeler arasında bağlantı kurulmasını ifade eder. Web’in en önemli özelliklerinden biri, kullanıcıyı tek bir belgeyle sınırlamaması; bağlantılar aracılığıyla farklı belgelere yönlendirebilmesidir.

**Markup**, bir belgenin belirli bölümlerini işaretleyerek onların anlamını belirtme işlemidir. Başlık, paragraf, liste veya bağlantı gibi öğeler, HTML etiketleri aracılığıyla işaretlenir. Böylece tarayıcı yalnızca metni değil, metnin neyi temsil ettiğini de anlayabilir.

**Language** ise HTML’in belirli kurallara ve sözdizimine sahip standart bir tanımlama sistemi olduğunu ifade eder.

Bu üç kavram bir araya geldiğinde HTML, belgeleri birbirine bağlayabilen ve bu belgelerin yapısını standart kurallarla tanımlayan bir işaretleme dili olarak karşımıza çıkar.

Burada dikkat edilmesi gereken önemli bir nokta vardır. HTML, programlama dilleriyle aynı amacı taşımaz. Programlama dilleri belirli işlemleri gerçekleştirmek, veri işlemek veya algoritmalar oluşturmak için geliştirilmiştir. HTML ise bir belgenin yapısını ve anlamsal düzenini tanımlar. Bu nedenle HTML’i değerlendirirken onu bir programlama diliyle değil, web belgelerinin ortak tanımlama standardı olarak ele almak daha doğru olacaktır.

Kısacası HTML, web sayfalarının görünen yüzünü oluşturan bir teknoloji olmaktan çok, o sayfaların nasıl organize edildiğini tanımlayan yapısal bir dildir. Günümüzde kullanılan tüm modern web teknolojileri değişebilir; ancak tarayıcının anlayacağı ortak belge yapısını tanımlayan temel standart olma özelliğiHTML için hâlâ geçerliliğini korumaktadır .

HTML’in Tarihsel Gelişimi

HTML, ilk kez 1990 yılında Tim Berners-Lee tarafından World Wide Web projesinin bir parçası olarak geliştirildi. İlk sürüm, yalnızca temel belge yapısını oluşturmaya yönelik sınırlı sayıda etiketten oluşuyordu. O dönemde amaç, görsel açıdan zengin web sayfaları hazırlamak değil; belgelerin ortak bir standartta yayımlanmasını ve birbirlerine bağlantılar aracılığıyla ulaşabilmesini sağlamaktı.

Web’in kısa süre içerisinde yaygınlaşması, HTML’in de gelişmesini zorunlu hâle getirdi. Artık yalnızca akademik belgeler değil; kurumsal web siteleri, haber sayfaları, çevrim içi kataloglar ve kişisel web sayfaları da HTML kullanılarak hazırlanıyordu. Kullanım alanı genişledikçe, yeni ihtiyaçlar ortaya çıktı ve HTML standartları düzenli olarak güncellenmeye başladı.

1995 yılında yayımlanan HTML 2.0, ortak bir standart oluşturma yönünde atılan ilk önemli adımlardan biri oldu. Ardından gelen HTML 3.2 ve HTML 4.01 sürümleri, belge yapısını daha güçlü hâle getirirken geliştiricilere daha fazla olanak sundu. Bu süreçte HTML yalnızca yeni etiketler kazanmadı; aynı zamanda daha tutarlı ve standart bir yapıya kavuştu.

2000’li yılların başında XHTML ile daha katı sözdizimi kuralları benimsenmeye çalışıldı. Ancak web’in ihtiyaçları değişmeye devam ediyordu. İnternet artık yalnızca metin tabanlı belgelerin yayımlandığı bir ortam olmaktan çıkmış; video, ses, etkileşimli uygulamalar ve zengin kullanıcı deneyimleri sunan büyük bir platforma dönüşmüştü.

Bu değişim, HTML5’in geliştirilmesini beraberinde getirdi. HTML5 ile birlikte yalnızca yeni etiketler eklenmedi; ses, video, grafik, form yapıları ve anlamsal işaretleme gibi birçok alanda önemli yenilikler getirildi. Böylece HTML, modern web uygulamalarının ihtiyaçlarına cevap verebilecek şekilde gelişimini sürdürdü.

Günümüzde HTML artık belirli aralıklarla yayımlanan klasik sürümlerden çok, **HTML Living Standard** anlayışıyla geliştirilmektedir. Bu yaklaşım sayesinde HTML, web teknolojilerindeki değişimlere uyum sağlayarak sürekli güncellenen yaşayan bir standart hâline gelmiştir.

Yaklaşık otuz yılı aşkın bir geçmişe sahip olmasına rağmen HTML’in temel amacı değişmemiştir. İlk gününde olduğu gibi bugün de görevi, web üzerinde yayımlanan belgelerin yapısını ortak kurallar çerçevesinde tanımlamak ve bu belgelerin farklı tarayıcılar tarafından tutarlı biçimde yorumlanmasını sağlamaktır.

Web Geliştirmeye Neden HTML ile Başlanır?

Web geliştirme dünyası sürekli değişen bir yapıya sahiptir. Her yıl yeni kütüphaneler, yeni çerçeveler ve yeni geliştirme araçları ortaya çıkmaktadır. Buna rağmen web geliştirmeye başlayan kişilere verilen ilk tavsiye uzun yıllardır değişmemiştir: **Önce HTML öğrenin.**

Bu yaklaşım yalnızca bir eğitim geleneği değildir. HTML ile başlanmasının temel nedeni, web üzerinde çalışan her uygulamanın en sonunda tarayıcı tarafından yorumlanacak bir belge yapısına dönüşmesidir. Geliştirici ister doğrudan HTML yazsın ister React, Vue, Angular veya benzeri teknolojileri kullansın, tarayıcının anlayacağı çıktı yine HTML’dir.

Bu durum, HTML’in diğer teknolojilerden daha önemli olduğu anlamına gelmez. Ancak web geliştirme sürecinde üstlendiği rol farklıdır. HTML, üzerine diğer teknolojilerin inşa edildiği ortak zemini oluşturur. Bu zeminin nasıl çalıştığını anlamadan daha üst seviyedeki teknolojilere geçmek mümkündür; fakat geliştirilen uygulamaların çalışma mantığını kavramak çoğu zaman zorlaşır.

Bugün birçok geliştirici, modern araçlar sayesinde HTML kodunu doğrudan yazmadan da web uygulamaları geliştirebilmektedir. Bununla birlikte kullanılan araçlar değişse de ortaya çıkan sonuç değişmez. Tarayıcı, kullanıcıya göstereceği içeriği yine HTML belgesi üzerinden oluşturur. Bu nedenle HTML bilgisi, yalnızca başlangıç seviyesinde öğrenilip geride bırakılan bir konu değildir; web geliştirme sürecinin tamamında karşılaşılan temel kavramlardan biridir.

Sağlam bir HTML bilgisi, yalnızca doğru belge yapıları oluşturmayı sağlamaz. Aynı zamanda erişilebilirlik, arama motoru optimizasyonu, sürdürülebilir kod geliştirme ve web standartlarına uygun uygulamalar oluşturabilmek için de güçlü bir temel oluşturur. Bu nedenle deneyimli geliştiriciler, HTML’i başlangıç teknolojisi olarak değil, web geliştirme bilgisinin ayrılmaz bir parçası olarak değerlendirir.

Web geliştirmeye HTML ile başlanmasının nedeni, öğrenmesi en kolay teknoloji olması değildir. Asıl neden, web’in çalışma mantığını anlamanın en doğru başlangıç noktasının HTML olmasıdır. Çünkü bir teknolojiyi etkili şekilde kullanabilmek için önce üzerine inşa edildiği temeli anlamak gerekir. HTML de bu temelin ilk ve en önemli bileşenidir.

Modern Web’de HTML’in Önemi

Web teknolojileri son otuz yıl içerisinde büyük bir değişim geçirdi. Statik web sayfalarının yerini dinamik uygulamalar, tek sayfa mimarileri (SPA), bulut tabanlı servisler ve zengin kullanıcı deneyimleri sunan modern platformlar aldı. Buna rağmen değişmeyen bir gerçek vardır: Tarayıcılar, kullanıcıya sunacakları içeriği hâlâ HTML üzerinden yorumlamaktadır.

Bugün React, Vue, Angular, Svelte veya benzeri modern geliştirme araçları kullanılarak hazırlanan projelerde geliştiriciler çoğu zaman HTML dosyalarını doğrudan düzenlemez. Ancak bu durum HTML’in ortadan kalktığı anlamına gelmez. Aksine bu araçların büyük bölümü, geliştirme sürecinin sonunda tarayıcının anlayabileceği HTML yapısını üretir. Başka bir ifadeyle değişen HTML değil, HTML’in nasıl üretildiğidir.

HTML’in günümüzdeki önemi yalnızca tarayıcılarla da sınırlı değildir. Arama motorları bir web sayfasını analiz ederken belge yapısını dikkate alır. Ekran okuyucular, içeriği doğru şekilde seslendirebilmek için HTML’in anlamsal yapısından yararlanır. No-code ve low-code platformları, içerik yönetim sistemleri ve yapay zekâ destekli geliştirme araçları da ürettikleri web sayfalarını yine HTML tabanlı olarak oluşturur.

Bu nedenle HTML bilgisi, yalnızca başlangıç seviyesinde öğrenilen bir konu olarak değerlendirilmemelidir. Web geliştirme sürecinde kullanılan araçlar değişebilir, programlama dilleri farklılaşabilir ve yeni teknolojiler ortaya çıkabilir. Ancak web üzerinde yayımlanan bilgilerin ortak bir standartta tanımlanması gerekliliği değişmediği sürece HTML de önemini korumaya devam edecektir.

Bugün başarılı bir web geliştiricisinden beklenen yalnızca kullandığı araçları tanıması değil, bu araçların hangi temeller üzerine inşa edildiğini de anlayabilmesidir. HTML, bu temelin en önemli parçalarından biridir. Çünkü web’in ortak dili olma özelliğini koruyan ve farklı teknolojileri aynı yapı altında buluşturan standart hâlâ HTML’dir.

Web teknolojileri gelişmeye devam edecek, yeni araçlar ve yeni geliştirme yaklaşımları ortaya çıkacaktır. Ancak web’in ortak belge yapısını tanımlama ihtiyacı varlığını sürdürdüğü sürece HTML de önemini korumaya devam edecektir. Bu yönüyle HTML, yalnızca web geliştirmenin ilk adımı değil; geçmişten günümüze uzanan ve gelecekte de varlığını sürdürecek temel web standartlarından biridir.

HTML’in standart yapısını anlamak için HTML Living Standard reysmi dökümantasyonunu inceleyebilirsiniz.

Bir önceki makalede HTML’in ne olduğunu ve web geliştirmeye neden HTML ile başlandığını ele aldık. HTML’in ortaya çıkışını ve web içerisindeki görevini anlamak, şimdi yazacağımız kodların hangi amaca hizmet ettiğini kavramamızı sağlayacak. Bu makalede ise ilk HTML dosyamızı oluşturacak, belgenin temel bölümlerini inceleyecek ve yazdığımız sayfayı tarayıcıda açacağız.

HTML Yazmaya Başlamak İçin Neler Gerekir?

İlk örneğimiz için bilgisayarda düz metin düzenleyebilen bir editör ve bir web tarayıcısı bulunması yeterlidir. Bir alan adı satın almak, hosting hizmeti kullanmak veya WordPress kurmak gerekmez. Hazırlayacağımız dosyayı bilgisayarımızda saklayabilir, sonucunu yine kendi bilgisayarımızdaki tarayıcıda inceleyebiliriz.

Bu aşamada kullanacağımız editörün görevi, yazdığımız metni bir dosyaya kaydetmektir. Tarayıcı ise bu dosyadaki HTML işaretlemesini yorumlayarak sayfayı görüntüler. Kod yazdığımız yer ile sonucu gördüğümüz yer arasındaki bu ayrımı baştan bilmek, uygulama sırasında hangi işlemi nerede yapacağımızı netleştirir.

HTML Belgesinin Temel Yapısı Nasıl Kurulur?

Bir HTML belgesinde, belge hakkındaki bilgiler ile kullanıcıya sunulan içerik ayrı bölümlerde yer alır. Aşağıdaki örnek bu düzeni gösterir. Kodun tamamına ilk kez bakıyorsanız her satırı hemen ezberlemeye çalışmayın. Önce örneği oluşturacak, ardından bölümleri tek tek açıklayacağız.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk HTML Sayfam</title>
</head>
<body>
    <h1>Web Geliştirmeye İlk Adım</h1>
    <p>İlk HTML sayfamı oluşturuyorum.</p>
    <p>Bu sayfada HTML belgesinin temel yapısını öğreniyorum.</p>
</body>
</html>

Örnekte sayfanın dili, karakter kodlaması ve başlığı tanımlanmıştır. Kullanıcının okuyacağı içerik ise bir başlık ve iki paragraftan oluşur. Bu küçük belge üzerinden yapacağımız değişiklikler, her bölümün görevini doğrudan gözlemlememizi sağlayacak.

İlk HTML Dosyası Nasıl Oluşturulur?

Bilgisayarınızda bu çalışma için html-dersleri adında bir klasör oluşturun. Ardından kullandığınız metin veya kod editöründe yeni bir dosya açarak yukarıdaki örneği yapıştırın. Dosyayı bu klasörün içerisine index.html adıyla ve UTF-8 kodlamasıyla kaydedin.

Burada dosya uzantısına dikkat edilmelidir. Dosyanın gerçek adı index.html.txt olmamalıdır. Editörünüz kayıt sırasında dosya türü seçtiriyorsa düz metin uzantısını otomatik eklemeyen seçeneği kullanın; bu seçenek bazı editörlerde “Tüm dosyalar” olarak adlandırılır. Dosya özelliklerinden adını ve uzantısını kontrol edebilirsiniz.

index, ana sayfa dosyalarında yaygın olarak kullanılan bir addır. Bununla birlikte bu alıştırmada dosyayı ilk-sayfam.html olarak adlandırmanız da mümkündür. Biz örneklerimizi aynı dosya üzerinden sürdürebilmek için index.html adını kullanacağız.

Kaydettiğiniz dosyayı tarayıcıyla açın. Dosya başka bir programda açılıyorsa “Birlikte aç” seçeneğiyle tarayıcınızı seçebilirsiniz. Sayfada “Web Geliştirmeye İlk Adım” başlığı ve altında iki paragraf görünmelidir. Tarayıcı sekmesindeki başlık ise “İlk HTML Sayfam” olacaktır.

Belgedeki Satırlar Ne İşe Yarar?

DOCTYPE: Belge Türü Bildirimi

İlk satırdaki <!DOCTYPE html>, modern HTML belgelerinde kullanılan belge türü bildirimidir. Tarayıcının sayfayı standartlar modunda işlemesi için yazılır. Başlık veya paragraf gibi bir içerik öğesi değildir; kapanış etiketi de bulunmaz.

html: Belgenin Kök Öğesi

<html> öğesi, belgenin diğer öğelerini kapsayan kök yapıdır. Örneğimizde head ve body bölümleri onun içerisinde bulunur. Açılıştaki lang="tr" ise belgenin ana dilinin Türkçe olduğunu belirtir.

Dil bilgisi özellikle ekran okuyucuların uygun telaffuzu belirlemesine yardımcı olur. Ancak bu tanım metni Türkçeye çevirmez; mevcut içeriğin dilini bildirir. Ayrıntıları MDN’nin HTML lang niteliği açıklamasında inceleyebilirsiniz.

head: Belge Hakkındaki Bilgiler

<head> bölümü, belgeye ilişkin bilgileri içerir. Örneğimizde karakter kodlaması, görüntüleme alanı ayarı ve belge başlığı bu bölümde yer alır. Kullanıcının okuyacağı paragrafları burada yazmayız.

head adını sayfanın üst kısmındaki logo veya menü alanıyla karıştırmamak gerekir. Bu bölümün görevi sayfanın üstüne içerik yerleştirmek değildir. Belge yapısındaki konumu ve kapsamı, HTML Living Standard’ın head öğesi bölümünde tanımlanır.

meta charset: Karakter Kodlaması

<meta charset="UTF-8"> satırı, belgenin karakter kodlamasını bildirir. Dosyayı da UTF-8 olarak kaydetmek gerekir. Bildirim ile dosyanın gerçek kodlaması uyuşmadığında Türkçe karakterler yanlış görüntülenebilir.

Viewport: Görüntüleme Alanı Ayarı

name="viewport" içeren satır, özellikle mobil tarayıcılarda sayfanın görüntüleme alanının nasıl ele alınacağını belirtir. width=device-width genişliği cihazın görüntüleme alanına göre ayarlar; initial-scale=1.0 başlangıç ölçeğini tanımlar.

Bu satırı eklemek, bütün bir siteyi kendiliğinden mobil uyumlu hâle getirmez. İçerik genişlikleri, görseller ve sayfa düzeni de farklı ekranlara uygun hazırlanmalıdır. Bu ilişkiyi MDN’nin viewport açıklamasında daha ayrıntılı inceleyebilirsiniz.

title: Belgenin Başlığı

<title>, belgenin başlığını tanımlar. Tarayıcı sekmesinde gördüğünüz “İlk HTML Sayfam” metni buradan gelir. Sayfanın içerisinde görünen ana başlık ise örneğimizde <h1> ile yazılmıştır. Bu iki başlığın aynı metni taşıması zorunlu değildir.

body: Sayfanın İçeriği

<body> bölümü, sayfa içeriğinin yer aldığı alandır. Örneğimizdeki <h1> ana başlığı, <p> öğeleri ise paragrafları tanımlar. İlerleyen çalışmalarda bağlantı, liste ve görsel gibi içerikleri de bu bölümde kullanacağız.

Etiket, Öğe ve Nitelik Arasındaki Fark Nedir?

Kodları açıklarken kullandığımız bu üç kavram, HTML öğrenirken sık karşılaşacağımız terimlerdir. Örneğimizdeki tek bir satır üzerinden aralarındaki ilişkiyi görebiliriz:

<html lang="tr">

Burada <html lang="tr"> açılış etiketidir. lang bir nitelik, tr ise onun değeridir. Nitelikler, açılış etiketinde ilgili öğeye ek bilgi kazandırır. html öğesinin tamamı ise açılışından kapanışına kadar içerdiği yapıyla birlikte değerlendirilir.

Her öğe aynı biçimde yazılmaz. Örneğin p bir açılış ve kapanış etiketiyle kullanılırken meta içerik alamayan bir öğedir; </meta> şeklinde kapatılmaz. Temel sözdizimi için MDN’nin HTML sözdizimi rehberine başvurabilirsiniz.

Yazdığımız Sayfada Değişiklik Yapalım

Şimdi editöre dönerek iki küçük değişiklik yapın. Önce title içerisindeki “İlk HTML Sayfam” metnini “HTML Öğreniyorum” olarak değiştirin. Ardından body içerisindeki ilk paragrafı şu şekilde düzenleyin:

<p>Bugün bir HTML dosyası oluşturmayı ve tarayıcıda açmayı öğrendim.</p>

Dosyayı kaydedin ve tarayıcıdaki sayfayı yenileyin. Sekme başlığında “HTML Öğreniyorum”, sayfa içerisinde ise yeni paragraf görünmelidir. Ana başlık değişmeden kalacaktır; çünkü h1 içerisindeki metne dokunmadık.

Bu deneme, belge başlığı ile içerik arasındaki ayrımı görmenizi sağlar. Aynı zamanda çalışma sırasını da pekiştirir: Kod editöründe değişiklik yapılır, dosya kaydedilir ve tarayıcıdaki sonuç kontrol edilir. Değişiklik görünmüyorsa önce dosyayı kaydedip kaydetmediğinize, ardından tarayıcıda aynı dosyayı açtığınıza bakın.

İlk Çalışmada Nelere Dikkat Edilmeli?

İlk sayfayı hazırladıktan sonra kodu tekrar okuyun. head bölümünün body başlamadan önce kapandığını, paragrafların body içerisinde kaldığını ve belgenin sonunda html öğesinin kapatıldığını kontrol edin. Girintiler bu ilişkileri takip etmeyi kolaylaştırır.

Ardından sayfadaki Türkçe karakterleri, sekme başlığını ve paragraf değişikliğini inceleyin. Bunlar küçük kontrollerdir; ancak yazdığınız satır ile tarayıcıdaki sonuç arasında bağlantı kurmanızı sağlar. Bir sorun olduğunda bütün kodu silip yeniden başlamak yerine, hangi değişiklikten sonra ortaya çıktığını belirlemek daha öğretici olacaktır.

Bu çalışmanın sonunda elinizde kendi bilgisayarınızda açabildiğiniz, başlığını ve içeriğini değiştirebildiğiniz bir HTML dosyası bulunmalıdır. Bundan sonraki adım, bu belge içerisindeki içeriği başlıklar ve paragraflarla daha ayrıntılı düzenlemektir. Böylece bugün kurduğumuz temel yapı, yalnızca örnek bir dosya olmaktan çıkıp üzerinde geliştirme yapabildiğimiz bir sayfaya dönüşecektir.

PHP’nin ortaya çıkışı, web sayfalarının her kullanıcıya aynı içeriği sunan sabit belgeler olmaktan çıkmaya başladığı bir döneme dayanır. Web’in ilk yıllarında bir sayfadaki bilgiyi değiştirmek için çoğu zaman ilgili HTML dosyasını açmak ve içeriği elle düzenlemek gerekiyordu. Ziyaretçi sayısını takip etmek, bir formdan gelen veriyi işlemek veya sayfaları ortak bir şablondan üretmek gibi bugün sıradan görülen işlemler, hazır ve kolay bir çözüm bulunmadığında oldukça zahmetli olabiliyordu.

PHP, başlangıçta bu tür günlük ihtiyaçları karşılamak amacıyla geliştirildi. Sunucuda çalışan kodların HTML üretmesini, form verilerini işlemesini ve daha sonra veri tabanlarıyla iletişim kurmasını kolaylaştırdı. Böylece web geliştiricileri her sayfayı ayrı ayrı hazırlamak yerine, belirli kurallara ve verilere göre değişen dinamik sayfalar oluşturabilmeye başladı.

Bu makalede PHP’nin değişkenlerini, fonksiyonlarını veya sözdizimini ayrıntılı biçimde anlatmayacağız. Bunun yerine PHP’nin neden geliştirildiğini, hangi sorunlara çözüm sunduğunu, tarayıcı ile sunucu arasındaki süreçte nasıl bir görev üstlendiğini ve günümüzde neden hâlâ önemli olduğunu ele alacağız. Çünkü bir programlama dilini doğru öğrenmenin yolu, yalnızca kod örneklerini ezberlemekten değil; o dilin hangi ihtiyaca cevap vermek için ortaya çıktığını anlamaktan geçer.

Sabit Web Sayfaları Her İhtiyacı Karşılamıyordu

World Wide Web’in ilk dönemlerinde web siteleri çoğunlukla birbirine bağlantılarla bağlanan HTML belgelerinden oluşuyordu. Bir şirket tanıtımı, kişisel sayfa veya bilgi metni hazırlanıyor; dosya web sunucusuna yükleniyor ve ziyaretçilere olduğu gibi gönderiliyordu. İçerik herkes için aynıydı. Bir değişiklik yapılması gerektiğinde HTML dosyasının yeniden düzenlenip sunucuya yüklenmesi gerekiyordu.

Bu yöntem az sayfalı ve seyrek güncellenen siteler için yeterliydi. Ancak web siteleri büyüdükçe aynı başlık, menü ve alt bilgi kodlarının birçok dosyada tekrar edilmesi önemli bir sorun hâline geldi. Menüye yeni bir bağlantı eklemek gibi basit bir değişiklik bile onlarca dosyanın ayrı ayrı düzenlenmesini gerektirebiliyordu. İçeriğin artması, yalnızca bilgi üretmeyi değil, bu bilgiyi düzenli ve sürdürülebilir biçimde yönetmeyi de zorlaştırıyordu.

Kullanıcılarla etkileşim kurma ihtiyacı da giderek arttı. İletişim formundan gönderilen bilgilerin alınması, ziyaretçi sayısının kaydedilmesi, üyelerin giriş yapması veya farklı kullanıcılara farklı içeriklerin gösterilmesi gerekiyordu. HTML bir belgenin yapısını tanımlıyordu. Daha sonra geliştirilen CSS ise bu belgenin nasıl görüneceğini belirlemeyi kolaylaştırdı. Ancak bu teknolojiler kendi başlarına sunucudaki verileri işleyen ve sonuca göre yeni bir sayfa oluşturan programlama mantığını sunmuyordu.

Web’in ihtiyaç duyduğu şey, her ziyaretçiye önceden hazırlanmış tek bir dosya göndermek yerine gelen isteği değerlendirecek, gerekli verileri işleyecek ve gönderilecek HTML çıktısını o anda oluşturacak bir sistemdi. PHP’nin ortaya çıkışına zemin hazırlayan temel ihtiyaç da buydu: Dinamik web sayfaları oluşturmayı daha kolay ve erişilebilir hâle getirmek.

Burada dinamik sözcüğü, sayfanın hareketli veya animasyonlu olması anlamına gelmez. Önemli olan, gösterilecek içeriğin isteğe göre hazırlanabilmesidir. Örneğin bir arama sayfasının görünümü aynı kalabilir; ancak ziyaretçinin yazdığı kelimeye göre listelenen sonuçlar değişir. PHP, bu kelimeyi alıp hangi bilgilerin gösterileceğini belirleyen sunucu tarafındaki işlemleri yürütebilir. Bu tür işlemler PHP’den önce de yapılabiliyordu; PHP bunları web geliştirme sürecinde kolaylaştıran çözümlerden biri oldu.

PHP’nin Doğuşu: Kişisel Araçlardan Programlama Diline

PHP’nin temelleri, Rasmus Lerdorf’un 1994 yılında kendi internet sitesini yönetmek için hazırladığı küçük araçlara dayanır. Lerdorf, öz geçmiş sayfasını ziyaret edenleri takip etmek ve bazı basit işlemleri gerçekleştirmek amacıyla çeşitli betikler geliştirdi. Başlangıçta kişisel bir ihtiyacı karşılayan bu araçlar, kısa sürede başkalarının da kullanabileceği bir yapıya dönüştü.

İlk dönemlerde PHP adı, “Personal Home Page Tools” ifadesiyle ilişkilendiriliyordu. Daha sonra form verilerini işleme yeteneklerinin eklenmesiyle PHP/FI adı kullanılmaya başlandı. PHP’nin resmî tarihçesinde de belirtildiği gibi, 1995 yılında kaynak kodunun paylaşılması, farklı geliştiricilerin araca katkıda bulunmasını ve PHP’nin kişisel bir yardımcı araç olmaktan çıkarak daha genel amaçlı bir web geliştirme çözümüne dönüşmesini sağladı.

PHP’nin yaygınlaşmasında en önemli etkenlerden biri, geliştiricilerin HTML belgeleri içerisine dinamik işlemleri görece kolay biçimde ekleyebilmesiydi. Karmaşık bir altyapı kurmadan form verileri alınabiliyor, ortak sayfa bölümleri yeniden kullanılabiliyor ve veri kaynaklarından gelen bilgiler HTML çıktısına dönüştürülebiliyordu. Bu yaklaşım, özellikle küçük ve orta ölçekli web projeleri için geliştirme sürecini önemli ölçüde hızlandırdı.

Dilin gelişimi yalnızca ilk araçlarla sınırlı kalmadı. Andi Gutmans ve Zeev Suraski’nin dilin temelini yeniden ele almasıyla PHP 3, 1998 yılında yayımlandı. Bu sürüm, daha genişletilebilir bir yapı ve daha güçlü veri tabanı desteği sundu. PHP adının bugün kullanılan “PHP: Hypertext Preprocessor” açılımı da bu dönemde benimsendi. Bu ifade özyinelemeli bir kısaltmadır; açılımın ilk kelimesi yine PHP’dir.

Bu gelişimin önemli bir parçası da Zend Engine, yani Zend motorudur. Andi Gutmans ve Zeev Suraski tarafından geliştirilen bu motor, 2000 yılında yayımlanan PHP 4 ile kullanılmaya başlandı. Zend adı da geliştiricilerin adlarından türetildi. PHP dilinin yazılan komutları tanımlayan kuralları varsa, Zend motoru da bu komutların sunucuda işlenip çalıştırılmasını sağlayan temel yapıdır.

Başlangıç düzeyinde Zend motorunu ayrı öğrenilmesi gereken bir dil olarak düşünmek gerekmez. Geliştirici PHP kodunu yazar; motor bu kodu işleyerek belirtilen işlemleri yürütür. Örneğin iki sayının toplanmasını isteyen bir komutun sonuca dönüşmesi bu çalışma yapısının bir parçasıdır. PHP’nin sonraki sürümlerinde motor da geliştirilmiş, dilin daha kapsamlı uygulamalarda kullanılmasına katkı sağlamıştır.

Daha sonraki sürümlerde performans, nesne yönelimli programlama, güvenlik, tür sistemi ve modern yazılım geliştirme ihtiyaçları konusunda önemli ilerlemeler sağlandı. Ancak PHP’nin temel amacı değişmedi: Sunucuda çalışan kodlarla dinamik web içeriği üretmeyi kolaylaştırmak ve web uygulamalarının arka plandaki işlemlerini yönetmek.

PHP Nedir?

PHP, özellikle web geliştirmeye uygun, açık kaynaklı bir programlama dilidir. Web uygulamalarında sunucu tarafında çalışır. Bir kullanıcı PHP tabanlı web sayfasını açtığında tarayıcı doğrudan PHP kodunu çalıştırmaz. İstek önce web sunucusuna ulaşır; sunucu PHP kodunu çalıştırır, gerekli işlemleri gerçekleştirir ve ortaya çıkan çıktıyı çoğunlukla HTML olarak tarayıcıya gönderir.

Bu çalışma biçimi önemli bir ayrımı ortaya koyar. Doğru yapılandırılmış bir sunucuda kullanıcı, sayfanın kaynak kodunu görüntülediğinde PHP kodlarını değil, PHP tarafından üretilen sonucu görür. Veri tabanı bağlantıları, iş kuralları, oturum işlemleri ve diğer sunucu tarafı kodları ziyaretçinin tarayıcısına gönderilmez. Ancak bu durum tek başına güvenlik sağlamaz; geliştiricinin parolaları, kullanıcı verilerini ve uygulama yapılandırmasını doğru yöntemlerle koruması gerekir.

PHP, HTML üretmenin yanı sıra form verilerini işleyebilir, dosyalarla çalışabilir, oturumları yönetebilir, çerez oluşturabilir, e-posta işlemleri gerçekleştirebilir ve veri tabanlarıyla iletişim kurabilir. Bir kullanıcının giriş bilgilerini denetlemek, bir yazıyı veri tabanından getirip sayfada göstermek veya alışveriş sepetindeki ürünlerin toplamını hesaplamak PHP ile yapılabilecek işlemlere örnektir.

Örneğin bir ürün sayfasındaki fiyatı düşünelim. HTML, fiyatın sayfanın hangi bölümünde gösterileceğini belirtir. PHP ise hangi ürünün açıldığını belirleyebilir, o ürüne ait fiyatı alabilir ve gösterilecek içeriğe ekleyebilir. Böylece sayfanın düzeni aynı kalırken içerdiği bilgi değişebilir. Bu örnekte PHP’nin görevi görünümü boyamak değil, görünümde kullanılacak bilgiyi hazırlamaktır.

PHP’nin açık kaynaklı olması, dili çalıştıran yazılımın kaynak kodunun incelenebilmesi ve lisans koşulları çerçevesinde geliştirilmesine katkıda bulunulabilmesi anlamına gelir. PHP kullanmaya başlamak için bu kaynak kodu anlamak veya motor üzerinde değişiklik yapmak gerekmez. Yeni başlayan kişinin öğrenmesi gereken, kendi uygulamasına yaptırmak istediği işlemleri PHP ile nasıl ifade edeceğidir.

PHP’nin en belirgin özelliklerinden biri, web sunucuları ve veri tabanı sistemleriyle geniş uyumluluğa sahip olmasıdır. Linux, Windows ve macOS gibi farklı işletim sistemlerinde çalışabilir; MySQL, PostgreSQL, SQLite ve başka veri tabanlarıyla birlikte kullanılabilir. Çok sayıda barındırma hizmetinin PHP desteği sunması, dilin web üzerinde yaygınlaşmasını kolaylaştırmıştır.

Dolayısıyla PHP yalnızca HTML dosyasına birkaç dinamik satır eklemek için kullanılan basit bir betik dili değildir. Kullanıcı isteklerini değerlendiren, uygulama kurallarını çalıştıran, verileri yöneten ve tarayıcıya gönderilecek sonucu oluşturan sunucu taraflı bir programlama dilidir.

Tarayıcı, Sunucu ve PHP Nasıl Birlikte Çalışır?

PHP’nin web içerisindeki görevini anlayabilmek için tarayıcı ile sunucu arasındaki temel süreci bilmek gerekir. Kullanıcı bir bağlantıya tıkladığında veya adres çubuğuna bir web adresi yazdığında tarayıcı ilgili sunucuya bir istek gönderir. İstenen kaynak düz bir HTML dosyasıysa sunucu bu dosyayı doğrudan gönderebilir. İstek bir PHP dosyasına yöneliyorsa önce PHP kodunun çalıştırılması gerekir.

PHP kodu, gelen istekteki bilgileri değerlendirir. Kullanıcının gönderdiği form alanlarını okuyabilir, oturum açıp açmadığını kontrol edebilir veya veri tabanından ilgili kayıtları isteyebilir. Daha sonra bu bilgiler, sayfanın HTML yapısıyla birleştirilir. Ortaya çıkan HTML yanıtı web sunucusu aracılığıyla tarayıcıya gönderilir ve tarayıcı bu içeriği kullanıcıya gösterir.

Örneğin bir haber sitesinde bütün yazılar için ayrı ve tamamen bağımsız HTML dosyaları hazırlamak zorunda olunmaz. Ortak bir sayfa şablonu oluşturulur; başlık, içerik, yazar ve tarih gibi bilgiler veri tabanından alınarak bu şablondaki yerlerine eklenir. Böylece aynı yapı, yüzlerce veya binlerce farklı içerik için kullanılabilir.

Bu süreçte tarayıcıya gönderilen şey, işlemin nasıl yapılacağını anlatan PHP komutları değil, bu işlemlerden elde edilen çıktıdır. Bir haber başlığının hangi kayıttan alındığını sunucudaki kod belirler; tarayıcı ise kendisine ulaşan başlığı görüntüler. Bu nedenle ziyaretçinin bilgisayarında PHP kurulu olması gerekmez. PHP’nin çalışacağı ortam sunucudadır.

PHP tarafından üretilen sayfa tarayıcıya ulaştıktan sonra HTML, CSS ve JavaScript kendi görevlerini üstlenir. HTML içeriğin yapısını tanımlar, CSS görünümü düzenler, JavaScript ise tarayıcıdaki etkileşimleri yönetir. PHP’nin görevi ise bu aşamadan önce, sunucu üzerinde gerekli verileri işlemek ve tarayıcıya gönderilecek içeriği hazırlamaktır.

Bu görev paylaşımı, PHP ile JavaScript’in web sayfalarındaki rolü arasındaki farkı da açıklar. PHP çoğunlukla sunucuda çalışır ve sonucu tarayıcıya gönderir. JavaScript ise çoğunlukla tarayıcıda çalışarak kullanıcının sayfayla kurduğu etkileşimi yönetir. Günümüzde her iki dil de farklı çalışma ortamlarında kullanılabilse de geleneksel web geliştirmedeki temel rolleri bu biçimdedir.

PHP Web Geliştirmeyi Nasıl Değiştirdi?

PHP’nin yaygınlaşmasıyla birlikte dinamik web siteleri geliştirmek daha geniş bir geliştirici kitlesi için erişilebilir hâle geldi. Form işleme, veri tabanından içerik getirme ve ortak şablonları yeniden kullanma gibi işlemler daha az kodla gerçekleştirilebildi. Bu durum hem geliştirme süresini kısalttı hem de web sitelerinin güncellenmesini kolaylaştırdı.

İçeriğin doğrudan HTML dosyaları içerisinde tutulması yerine veri tabanlarında saklanabilmesi, içerik yönetim sistemlerinin gelişmesine zemin hazırladı. Teknik bilgisi sınırlı kullanıcılar bile yönetim panelinden yazı ekleyebilir, sayfaları düzenleyebilir ve görselleri yönetebilir hâle geldi. WordPress, Drupal ve Joomla gibi sistemlerin PHP ile geliştirilmesi, dilin internet üzerindeki etkisini önemli ölçüde artırdı.

PHP aynı zamanda web projelerinin parçalara ayrılarak geliştirilmesini kolaylaştırdı. Başlık, menü, içerik ve alt bilgi gibi ortak bölümler yeniden kullanılabilir dosyalara dönüştürülebildi. Zamanla nesne yönelimli programlama, paket yönetimi ve MVC gibi mimari yaklaşımların yaygınlaşmasıyla daha büyük projeler için düzenli yapılar oluşturmak mümkün oldu.

Laravel ve Symfony gibi modern PHP çerçeveleri; yönlendirme, veri tabanı işlemleri, doğrulama, güvenlik ve test süreçleri için standart araçlar sunmaktadır. Composer ise projelerin ihtiyaç duyduğu paketlerin yönetilmesini kolaylaştırmıştır. Böylece PHP, yalnızca küçük kişisel sayfalarda kullanılan bir çözüm olmaktan çıkarak kapsamlı web uygulamalarının geliştirilebildiği olgun bir ekosisteme dönüşmüştür.

Modern Web’de PHP’nin Önemi

Web geliştirme dünyasında zaman içinde çok sayıda programlama dili, çerçeve ve çalışma ortamı ortaya çıkmıştır. Buna rağmen PHP, geniş barındırma desteği, açık kaynaklı yapısı ve yıllar içinde oluşan ekosistemi sayesinde önemli bir konuma sahip olmaya devam etmektedir. Özellikle içerik ağırlıklı web siteleri, kurumsal projeler ve yönetim panelleri için yaygın olarak kullanılmaktadır.

PHP’nin günümüzdeki önemini yalnızca geçmişten kalan projelerle açıklamak doğru değildir. Dilin modern sürümleri daha yüksek performans, daha güçlü tür özellikleri, gelişmiş hata yönetimi ve daha düzenli uygulama geliştirmeyi destekleyen yenilikler sunmaktadır. Güncel geliştirme standartları izlendiğinde PHP ile bakımı yapılabilir, test edilebilir ve güvenli uygulamalar oluşturulabilir.

PHP’nin yaygın olduğu alanların başında içerik yönetim sistemleri gelir. WordPress’in PHP ile geliştirilmiş olması, temaların ve eklentilerin çalışma mantığını öğrenmek isteyen geliştiriciler için PHP bilgisini gerekli hâle getirir. Ancak PHP yalnızca WordPress’ten ibaret değildir. Özel yönetim sistemleri, web servisleri, API’ler, üyelik uygulamaları ve elektronik ticaret projeleri de PHP ile geliştirilebilir.

Bununla birlikte PHP’nin kolay öğrenilebilir olması, her kodun doğru ve güvenli olduğu anlamına gelmez. Kullanıcıdan gelen verilerin doğrulanmaması, veri tabanı sorgularının güvensiz hazırlanması, parolaların yanlış saklanması ve eski PHP sürümlerinin kullanılması ciddi sorunlara yol açabilir. Bu nedenle dili öğrenirken güvenlik, hata yönetimi ve güncel kodlama standartları temel konuların bir parçası olarak ele alınmalıdır.

PHP Öğrenmeye Nereden Başlanmalı?

PHP öğrenmeye başlamadan önce HTML belgesinin temel yapısını bilmek büyük kolaylık sağlar. Çünkü PHP çoğu web projesinde tarayıcıya gönderilecek HTML çıktısını üretir. Form öğelerini, bağlantıları, başlıkları ve semantik sayfa yapısını anlayan bir geliştirici, PHP ile oluşturduğu verinin kullanıcıya nasıl sunulduğunu daha rahat kavrar.

Bu ilk aşamada önemli olan, bir isteğin sunucuya gittiğini, PHP’nin bu isteğe göre işlem yaptığını ve sonucun tarayıcıya döndüğünü kavramaktır. “Kullanıcı ne istedi?”, “Sunucuda hangi işlem yapılmalı?” ve “Kullanıcıya hangi sonuç gösterilmeli?” soruları, henüz kod yazmadan da düşünülebilir. Dilin kuralları öğrenildikçe bu düşünceler çalıştırılabilir komutlara dönüşür.

İlk aşamada değişkenler, veri türleri, operatörler, koşullar, döngüler ve fonksiyonlar öğrenilmelidir. Ardından diziler, formlar, dosya işlemleri, oturumlar ve çerezler ele alınabilir. Bu temel konular anlaşılmadan doğrudan büyük bir içerik yönetim sistemine veya çerçeveye geçmek, kullanılan kodların neden çalıştığını anlamayı zorlaştırabilir.

Daha sonraki aşamada veri tabanı bağlantıları, hazırlanmış sorgular, hata yönetimi ve nesne yönelimli programlama üzerinde durulmalıdır. Composer ile paket yönetimi, otomatik yükleme, ad alanları ve test yazma gibi modern PHP uygulamaları da temel bilgi yerleştikten sonra öğrenilmelidir. Laravel veya Symfony gibi bir çerçeveye geçmeden önce dilin kendisini öğrenmek, karşılaşılan sorunların kaynağını bulmayı kolaylaştırır.

Geliştirme ortamında güncel ve desteklenen bir PHP sürümü kullanılmalı; hata mesajları geliştirme sırasında görünür, gerçek sunucuda ise güvenli biçimde kaydedilir olmalıdır. Kullanıcı girdilerine hiçbir zaman doğrudan güvenilmemeli, veri tabanı işlemlerinde hazırlanmış sorgular kullanılmalı ve parolalar PHP’nin güvenli parola işlevleriyle saklanmalıdır. Bu alışkanlıkların başlangıçta kazanılması, sonradan düzeltilmesi gereken önemli güvenlik sorunlarını önler.

Sonuç

PHP, web sayfalarına yalnızca birkaç değişken eklemek amacıyla ortaya çıkmadı. Temel amacı; sunucu üzerinde verileri işlemek, tekrar eden işlemleri kolaylaştırmak ve kullanıcı isteğine göre değişen dinamik web sayfaları üretmekti. Kişisel bir internet sitesini yönetmek için hazırlanan araçlardan doğan PHP, zaman içinde web’in en yaygın sunucu taraflı programlama dillerinden biri hâline geldi.

PHP’nin web geliştirmedeki rolünü doğru anlamak için tarayıcı ve sunucu arasındaki görev paylaşımını bilmek gerekir. PHP kodu sunucuda çalışır; veri tabanı ve uygulama kurallarıyla ilgili işlemleri gerçekleştirir; ortaya çıkan sonucu çoğunlukla HTML olarak tarayıcıya gönderir. Tarayıcı ise bu çıktıyı HTML, CSS ve JavaScript aracılığıyla kullanıcıya sunar.

PHP öğrenmeye başlarken ilk hedef, mümkün olduğunca fazla fonksiyon veya çerçeve ezberlemek olmamalıdır. Öncelikle dilin neden geliştirildiği, sunucuda nasıl çalıştığı ve dinamik içerik üretirken hangi sorumlulukları üstlendiği anlaşılmalıdır. Bu temel kurulduğunda PHP kodları yalnızca çalışan komutlar olmaktan çıkar; güvenli, sürdürülebilir ve yönetilebilir web uygulamalarının anlamlı parçalarına dönüşür.