Web Tasarımda En Basit Programlama Dili Hangisi?

Web tasarımda öğrenmesi en kolay dil HTML’dir. Bir sayfadaki başlığı, paragrafı, görseli ve bağlantıyı tanımlamak için kullanılır ve birkaç saat içinde ilk sayfanızı yazabileceğiniz kadar sadedir. Teknik olarak HTML bir programlama dili değil, bir işaretleme dilidir; web tarayıcısında çalışan ilk gerçek programlama dili ise JavaScript’tir.

Web sayfaları üç katmandan oluşur: HTML içeriği ve yapıyı, CSS görünümü, JavaScript de davranışı belirler. Bu yüzden önerilen başlangıç sırası da budur. Aşağıda her dilin ne işe yaradığını, ne zaman sunucu tarafı bir dile ihtiyaç duyulduğunu ve öğrenmeye nereden başlanabileceğini anlatıyoruz.

HTML: sayfanın iskeleti

HTML (HyperText Markup Language), tarayıcıya sayfada neyin ne olduğunu söyler. Bir metnin başlık olduğunu <h1> etiketiyle, paragraf olduğunu <p> etiketiyle, bir bağlantı olduğunu <a> etiketiyle belirtirsiniz. Mantık yürütmez, hesap yapmaz; içeriği anlamlı parçalara ayırır.

HTML’i doğru kullanmak, göründüğünden daha önemlidir. Başlıkların sırayla kullanılması, görsellere açıklayıcı alt metin yazılması ve formlardaki alanların etiketlenmesi, sayfanın ekran okuyucu kullanan ziyaretçiler ve arama motorları tarafından doğru anlaşılmasını sağlar. İyi yazılmış bir HTML, hem erişilebilirliğin hem de arama motoru uyumunun temelidir.

HTML5 ile gelen anlamsal etiketler bu işi kolaylaştırır. Sayfanın üst bölümü <header>, menüsü <nav>, ana içeriği <main>, alt bilgisi <footer> etiketiyle işaretlenir. Her şeyi anlamsız <div> kutularıyla yazmak da çalışır, ama tarayıcıya ve yardımcı teknolojilere sayfanın hangi bölümünün ne olduğunu anlatma fırsatını kaçırırsınız.

CSS: sayfanın görünümü

CSS (Cascading Style Sheets), HTML ile tanımlanan öğelerin nasıl görüneceğini belirler: renkler, yazı tipleri, boşluklar, kutuların ekrandaki yerleşimi. Aynı HTML sayfası farklı CSS dosyalarıyla bambaşka görünebilir. Söz dizimi basittir; zorluk, öğeleri farklı ekran boyutlarında düzgün yerleştirmeyi öğrenmektedir.

Bugünün sitelerinde CSS’in en çok kullanılan iki yerleşim aracı Flexbox ve Grid’dir. Medya sorguları (media queries) ise sayfanın telefonda, tablette ve bilgisayarda farklı düzenlenmesini sağlar. Telefon ekranından başlayıp büyük ekranlara doğru ilerlemek, duyarlı (responsive) tasarımı öğrenmenin en kolay yoludur.

Proje büyüdükçe CSS dosyaları da uzar ve düzenli tutmak zorlaşır. CSS değişkenleri, renk ve boşluk gibi değerleri tek bir yerde tanımlayıp her yerde kullanmayı sağlar. Sass gibi önişlemciler ise kodu dosyalara bölmeye ve tekrarı azaltmaya yarar. Başlangıçta bunlara ihtiyacınız yok; düz CSS ile rahat yazmaya başladığınızda kendiliğinden gerek duyacaksınız.

JavaScript: sayfanın davranışı

JavaScript, tarayıcıda çalışan programlama dilidir. Açılır menüler, form alanlarının kontrolü, sekmeler, görsel kaydırıcılar ve sayfayı yenilemeden veri getiren bölümler JavaScript ile yapılır. Değişkenler, koşullar, döngüler ve fonksiyonlar gibi programlamanın temel kavramlarıyla ilk kez burada karşılaşırsınız.

JavaScript artık tarayıcının dışında da kullanılıyor. Node.js ile sunucu tarafı uygulamalar, React Native ile mobil uygulamalar yazılabiliyor. Biz de kendi ürünlerimizde bu araçları kullanıyoruz; örneğin sürü takip programımız Akıllı Sürü‘nün Android uygulaması React Native ile geliştirildi. Bu yüzden JavaScript, web tasarımla başlayıp yazılım geliştirmeye geçmek isteyenler için iyi bir köprüdür.

React, Vue.js ve bunların üzerine kurulan Next.js ile Nuxt gibi çatılar, çok sayıda ekranı ve veriyi olan uygulamaları düzenli yazmayı sağlar. Bir kurumsal tanıtım sitesi için çoğu zaman gerekmezler; bir yönetim paneli ya da müşteri portalı gibi uygulamalarda ise işi büyük ölçüde kolaylaştırırlar. Bu çatılara geçmeden önce düz JavaScript’i rahat yazabiliyor olmak, öğrenme sürecini kısaltır.

Sunucu tarafı diller: PHP ve diğerleri

HTML, CSS ve JavaScript ile tarayıcıda görünen her şey yapılabilir. Ancak form verilerini kaydetmek, üyelik sistemi kurmak, ürünleri bir veritabanından listelemek ya da yönetim paneli hazırlamak için sunucuda çalışan bir dile ihtiyaç vardır. Bu alanda en yaygın dillerden biri PHP’dir; WordPress de PHP ile yazılmıştır.

PHP’nin bugünkü en yaygın çatılarından biri Laravel’dir. Biz kurumsal siteleri çoğunlukla WordPress ile, B2B, bayi ve iş takip sistemlerini ise Laravel ve Vue.js ile geliştiriyoruz. Node.js ve onun üzerine kurulan NestJS de sunucu tarafında sık tercih edilen seçeneklerdir. Hangi dilin seçileceği, projenin ihtiyacına ve onu yıllarca geliştirecek ekibin uzmanlığına göre belirlenir. Yeni başlayan biri için bu seçimin acelesi yoktur; tarayıcı tarafındaki üç dili rahat kullanmaya başladığınızda sunucu tarafına geçmek çok daha kolay olur.

Hangi sırayla öğrenmeli?

Başlamak için pahalı bir araca gerek yok. Ücretsiz bir kod editörü (örneğin Visual Studio Code) ve bir web tarayıcısı yeterlidir. Tarayıcının geliştirici araçları, bir sayfanın HTML ve CSS kodunu canlı olarak incelemenize ve değiştirmenize izin verir; beğendiğiniz sitelerin nasıl kurulduğunu görmek için iyi bir öğrenme yoludur.

Web tasarıma yeni başlayan birine şu sırayı öneririz:

1. HTML ile birkaç sayfalık basit bir site yazın: başlıklar, paragraflar, listeler, görseller ve bağlantılar.
2. CSS ile bu sayfaları biçimlendirin; Flexbox ve Grid’i öğrenip sayfayı telefonda da düzgün gösterin.
3. JavaScript’in temellerini öğrenin ve sayfaya bir açılır menü ya da form kontrolü ekleyin.
4. Kodunuzu Git ile sürüm kontrolüne alın ve küçük bir projeyi baştan sona yayına çıkarın.
5. Sonra ilginize göre bir yol seçin: WordPress tema geliştirme ve PHP, ya da JavaScript çatıları ve Node.js.

Kaynak olarak Mozilla’nın ücretsiz MDN Web Docs belgeleri, her üç dil için başlangıçtan ileri seviyeye kadar düzenli bir rehber sunar. Öğrendiklerinizi küçük ama gerçek bir projede, örneğin bir tanıdığınızın işletmesi için tek sayfalık bir tanıtım sitesinde denemek, ezberden çok daha kalıcıdır.

İşletme sahibi olarak kod bilmeniz gerekir mi?

Gerekmez. Bir işletme sahibinin sitesini yönetmek için kod yazması beklenmez; iyi kurulmuş bir yönetim panelinden metin, görsel ve sayfa eklemek yeterlidir. Yine de bu dillerin ne işe yaradığını bilmek, ajansla konuşurken neyin kolay, neyin emek isteyen bir iş olduğunu anlamanıza yardım eder.

Örneğin bir sayfanın rengini değiştirmek CSS ile dakikalar süren bir iştir, ama sitenize bayilerin giriş yapıp sipariş verebildiği bir bölüm eklemek sunucu tarafında yazılım geliştirmeyi gerektirir. Sitenizin hangi tarafa yakın olduğunu bilmek için kurumsal web sitesi tasarımı ve özel yazılım geliştirme sayfalarımıza göz atabilirsiniz. Bir web projesinin adımlarını ise web tasarım hizmeti nelerden oluşur yazımızda anlattık.

Sık sorulan sorular

HTML bir programlama dili mi?

Hayır. HTML bir işaretleme dilidir; içeriğin yapısını tanımlar ama koşul, döngü ya da hesaplama içermez. Günlük dilde “web tasarım dilleri” denirken HTML ve CSS de sayılır, ama ilk programlama dili JavaScript’tir.

WordPress kullanmak için kod bilmek gerekir mi?

İçerik eklemek ve güncellemek için gerekmez. Tema geliştirmek, sitenin yapısını değiştirmek ya da özel bir özellik eklemek için ise HTML, CSS, PHP ve biraz JavaScript bilgisi gerekir.

Mobil uygulama yapmak için hangi dili öğrenmeliyim?

Web dillerini biliyorsanız JavaScript tabanlı React Native ile hem iOS hem Android için uygulama geliştirebilirsiniz. Platforma özel geliştirme için Swift (iOS) ve Kotlin (Android) kullanılır. Bu konudaki çalışmalarımızı mobil uygulama geliştirme sayfamızda anlattık.

Kod yazmakla uğraşmadan bir web sitesine ya da yazılıma ihtiyacınız varsa iletişim sayfasından bize yazabilir ya da 0850 885 40 74 numarasından arayabilirsiniz.