Web Sitesi Yapmaya Nereden Başlamalı Hangi Dilleri Öğrenmeliyim

Web sitesi yapmak? Benim lise dönemlerinden başlayan hayalimdi hep web sitesi yapabilmek.önceden işte birkaç kelime html bilgisi ile sitemynet.com free hostingi ile web sitesi yapmaya başlamıştım. o zamanlar internette bulunan hazır kodları alıp kendi ayrılmış alanımın html kaynak dosyasına yapıştırarak değişik değişik şeyler yapardım. Her bulduğum şeyi yapıştırırdım sayfama. Kedi sylvester dan tutun chat sayfasına kadar. Sonraları çok bakmadım işte tek tük arada sırada frontpage ile bir şeyler yapmaya çalışıyordum. Fakat benim için yeterli kaynak yoktu. Şimdiki kadar da internet yaygın değildi.

Yıllar geçti teknolojiler hızla ilerledi biz büyüdük daha farklı anlamları oldu hayatımızın. Üniversite sınavındaki kırılımlarda eğer size sevdiğiniz ve istediğiniz bilgisayar mühendisliği düştüyse sonrasında bazı konuları daha rahat ve anlaşılabilir olarak araştırıyorsunuz. Ben de bu kırılımdan güzellikle faydalandım. Ve yıllar içerisinde birçok konuda kendimi geliştirdim. Şimdi ise öğrenimlerimi insanlarla paylaşmaya çalışıyorum mümkün olduğunca. 

Birçok insan da etrafta gerek hobi olarak gerekse para kazanabilmek adına web işlerine girmeye web teknolojilerini öğrenmeye çalışıyor. Bunların çoğu sabırsız bir şekilde 3-4 günde web sitesi açmak istiyor. 3-4 günde web sitesi açabilir misiniz evet blogger veya wordpress gibi hazır uygulamalar ile açabilirsiniz ama öncelikle bir sağlam temellere oturtulmuş bir web bilginiz olursa size daha farklı daha iyi sunum şekillerinde bir web sitesi ortaya çıkartabilir. O zaman başlayalım

Web sitesi yapmak için ilk öğrenmem gereken nedir?

Web sitesi yapımı için kodlama zemininin başı yan binanın iskeleti tabi ki html dir. Html bilginiz olmadan web sitesi inşa etmeye çalışmanız demir olmadan inşaat dikmeye benzer. ya tek katlı bir yumrukta yıkılacak bir binanız olur ya da bir kulübeniz. Ama html bilirseniz eğer eviniz şekilsiz şemalsiz olsa bile sağlam olur. yıkılmaz kolay kolay. Şimdi isterseniz biraz html den bahsedelim. HTML Nedir ? ne işe yarar?

Aslında html bir programlama dili değildir. HTML bir web sitesinde mutlaka olması gereken ve tarayıcıların web yayını yaparken okuduğu dildir. Programlama dilleri ile oluşturduğumuz kodlar çıktı olarak ekrana html verir. yani ne yaparsak yapalım ekrana hep html çıktı vereceğiz. Tarayıcı da bu çıktıyı okuyup bizim gördüğümüz son haline getirir. Her web sayfası html tag'i ile başlayıp yine html ile bitmek zorundadır. html bloklarının arasında iki ayrı blok daha yer almaktadır. bunlardan biri dışarıya görüntü vermeyen kodların genel olarak çağrıldığı head ve sayfamızın tüm işlemlerini , görüntüsünü içeren body bölümleri.Sayfanın kimlik bilgileri (başlığı,anahtar kelimeleri vb) yine head içerisinde yer alır. Yani kısaca bir html sayfasının içeriğini betimlemek gerekirse şu şekilde gösterebiliriz

	<html>
	<head>
	...
	</head>
	<body>
	...
	</body>
	</html>

body etkietlerinin içerisine gireceğiniz bütün bilgiler bir web sayfasının içeriğini temsil eder. Burada sayfa ile ilgili işlemler yapılır. Sayfada gördüğünüz her şey bu blokta yazılır.

html ile web sayfalarını dinamik hale getiremezsiniz. Yani örneğin html sayfa içerisinde iki sayıyı toplayamazsınız. Ya da formdan gelen verileri bir yerde gösteremezsiniz. html statik bir dil olduğundan sadece sizin yazdığınızı dışarı verir. 

  • html çalışma ile ilgili önerilen kaynak : W3Schools

Bir sayfanın html kaynak kodları dışarıdan görüntülenebilir. Bunun için herhangi bir web sayfasında boş bir yere gelip sayfa kaynağını görüntüle ya da ctrl + U kombinasyonlarını kullanabilirsiniz. Html ile sayfanızdaki her şeye şekil verebilirsiniz. Örneğin resim gösterip resmin boyutunu ayarlayabilir her yazı için ayrı bir font her blok için ayrı bir renk kullanabilirsiniz. Fakat web sayfasının görsel anlamda bir şeye benzemesini bekliyorsanız mutlaka css kullanmak zorundasınız. Evet html ile ilgili genel bilgilerden bahsettiğimize göre web siteleri için olmazsa olmaz css ile ilgili konuşalım.

CSS nedir? CSS ile neler yapılabilir

Css (Cascading Style Sheets) web sitelerinde gördüğünüz görsel arayüzü sağlayan bir stil şablonlarıdır. Css ile hazırlamış olduğunuz html sayfadaki içeriklerin tüm görsel özellikleri ile ilgilenebilirsiniz. Örneğin syfanızda kullanacağınız tüm koyu renkli yazıların kırmızı yazılmasını css sayfanıza ya da head blokunuzda bulunan style etiketleri arasına aşağıdaki kodu ekleyerek sağlayabilirsiniz.

	strong
	{
	color:#FF0000;
	}

Bu etiket ile sayfadaki bütün strong html etiketlerini kırmızı olarak gösterebiliriz. Sadece kırmızı değil yüzlerce özellik tanımlayabiliriz. Font genişliğini,yüksekliğini,gölgesini yani kısaca görsel olarak görmek istediğimiz her şeyi css ile editleyebiliyoruz. Peki sayfadaki tüm strong etiketlerinin kırmızı olmasını istemiyorsak. Yani sadece bizim istediğim strong etiketli strong bloku arasındaki yazılar kırmızı olsa diğerleri normal kalsa. Bunun için class veya id kullanmamız yeterlidir. Örneğin

	.kirmizi
	{
	color:#FF0000;
	}

Yukarıdaki kodu yazdıktan sonra html sayfamızın içerisinde kirmizi class'ını çağırdığımız her yer kırmızı olacaktır. Örnek verecek olursak 

 

<div class="kirmizi">
Buraya yazılan yazılar kırmızı olur
</div>
<p>
Buraya yazılan yazılar normal olur
</p>

Gördüğünüz gibi sayfa içerisinde hangi etikete class olarak kirmizi class'ını tanımlarsak o etiket içerisindeki tüm elemanlar classtaki görünümlere ulaşır. 

Evet html ile ana iskeletini kaba inşaatını yaptığımız binayı css ile şekillendirdik. Tebrikler artık standart bir binaya sahipsiniz. Bu binamızda asansör boşluğu ve pencere delikleri oluşturduk. Kullanılmasalar da artık öyle boşluklarımız var. Peki o boşlukları hareketli hale getirmemiz için ne gerekir ?

Sayfa içindeki hareketler ve dinamizm için javascript

Evet javascript ve onun üzerine geliştirilmiş kütüphaneler sayesinde sayfa içindeki tüm hareketli alanları yapabiliyoruz. Aynı şekilde artık dinamik işlemler yapabiliyoruz. Sayfamızda matematiksel işlemler,kelimeler üzerinde oynayabilme vb. tüm işlemler gibi hareketleri de javascriptler ile halledebiliyoruz. Yani örneğin sayfamıza slider'ı  javascript ile ekleyebiliyoruz. Aynı şekilde bir resmin üzerine geldiğimiz zaman resmin büyümesi,dönmesi gibi dinamik hareketleri javascript ile yapabiliyorsunuz. Javascript yine sayfa içerisinde yazılabildiği gibi başka bir sayfada yazılıp sayfaya dahil de edilebilir. Bugün bir web sitesinde gördüğünüz tüm hareketler javascript ve javasriptten türetilen kütüphaneler sayesinde yapılabiliyor.

Yapmış olduğumuz binamızın javascript sayesinde asansörünü,pencerelerini ve kapılarını hareket edebilir yaptık. Artık binada oturmaya hazırız. Şimdi binamızda yaşayan insanları dinamik hale getirelim. yani her dairemize ayrı ayrı insanlar atayalım. Bunun için programlama dillerine ihtiyacımız var.

Web sitesi Yapmaya Nereden Başlamalı Hangi PRogramala Dilleri

Hangi Programlama Dilini Kullanmalıyım?

Evet geldik işim programlanabilir kısmına. Web sitemizin içeriğini javascript ile kısmen dinamikleştirebiliyorduk. Fakat programlama dilleri ile istediğimiz kadar dinamikleştirebiliriz. Veritabanı bağlantıları ile bunu iyiden iyiye hissettirebiliriz sayfamıza.Bir sayfamız var ve bu sayfada formlar kullanarak formlardaki değerleri alır veritabanına kaydedip istediğimiz zaman istediğimiz yerde kullanabiliriz. O anki tarihi alıp girilmiş olan tarihten çıkarıp yaş hesaplayabiliriz. Bir haber sitesi düşünün ya da. Haber sitesine formlara haberin başlığını, içeriğini giriyorsunuz, resim seçiyorsunuz ve o içerik istediğiniz sayfada karşınıza çıkıyor. Her sayfa için ayrı ayrı sayfa oluşturmak yerine tek bir sayfada hepsini farklı sayfa gibi görüntüleyebilirsiniz. Yani yapabileceklerimiz kısaca özetlersek

  • Dinamik içerik sayfalar (Haber siteleri,forumlar,sözlükler,bloglar ...)
  • Anlık bilgi paylaşımları (Facebook,twitter,insagram tarzı siteler)
  • E-ticaret siteleri 
  • Personel,Ticari uygulamalar
  • Film-dizi siteleri 

Kısaca aklınıza gelebilecek her şeyi programlama dilleri aracılığı ile yapabiliyorsunuz. En basitinden bir sayfanın iletişim bölümüne girdiğiniz formu doldurup gönder butonuna bastığınız zaman bile programlama dili sayesinde o bilgiler mail olarak gider. Keza yine aynı şekilde twitter'da attığınız bir tweet yine veritabanına kaydolur ve programlama aracılığı ile yayınlanır. 

Piyasada en etkin kullanılan iki programlama dili asp.net ve php dir. En yaygın ve kolay kullanım phpdir. Daha önce buradaki yazımda ikisi arasındaki farkları ele alan bir yazı yazmıştım. Bu dillerin yanında yine birden çok veritabanı kullanılmaktadır. MySQL ve MSSQL bunların başında gelmektedir. her iki dil ile de her iki veritabanına bağlanabilmek mümkündür. Ancak erişim kolaylığı bakımından php - MySQL ve Asp.NET - MSSQL bağlantıları daha uygundur.

Yapmış olduğumuz binanın en son pencerelerini kapılarını ve asansörü dinamize etmiştik. Şimdi ise içinde yaşayan insanları taşımamız lazım. Bunun için programlama dillerini ve veritabanlarını kullanabiliriz. Veritabanı sayesinde her daireye bir numara verdik örneğin daire no :5. Sonra programlama dili sayesinde biz bu 5 nolu dairenin içerisini döşüyoruz. Yani programlama dili sayesinde biz veritabanından bir daire seçip bu dairenin içerisine ne koyacaksak ekleyebilir; kaydederek de yine programlama dili aracılığıyla bu eşyaları veritabanına kaydedebiliriz. Bütün dairelerimizi doldurduk diyelim içerisine insanlar ve eşyaları programlama dilleri aracılığı ile veritabanı bağlantıları sayesinde kaydettik. Şimdi bu insanların hangi dairede kaldığını listeleyelim. Aşağıda dış kapıda bulunan kapı zilleriyle bu daireler arasında haberleşme yapabiliriz. Bir zile tıkladığında dairelerin biriyle haberleşmesini gene programa dilleri ve veritabanı sayesinde yapıyoruz.

Benim kendi yazdığım bu web sitesi dahil etrafta dinamik olarak içerik bulunduran bütün siteler programlama dilleri kullanmaktadır.

Ben uzun süre php kullandım. Asp.NET'i keşfettikten sonra bir daha php yazmak işkence gibi geldi. Hem visual studio'nun kolay arayüzü hem de arayüz - kod kısımlarının farklı sayfalarda yapılması sebebiyle daima Asp.NET'i tercih ederim. php kadar kolay bir değil ama öğrendiniz mi sizin hızınıza hız katacaktır. Sıfırdan başlayacaksanız php ile başlayıp sonra asp.net öğrenmeniz de işinizi görebilir.

Evet yapmış olduğum tüm örneklemeler bu işe yeni başlayan insanlar içindir. Bilmeyen insana çok kod göstermeye gerek yoktur. Onlara kendi hayatlarından örnekler vererek bu sistemi anlamaları kolaylaşmaktadır. Eğer bu makaleyi okuyup da eksik kalan ya da kafanızı kurcalayan bir şey olursa aşağıya yorum yazarak bana ulaşabilirsiniz.

11072

(1) Yorum

Gerçekten teşekkürler. Hangi dil ne işe yarıyor çok güzel anladım :D

24/05/2018 11:10Cevapla

Yorumlar