Merhabalar, 

Web sitesi geliştiren bir Front-End developer için öncelikle web sitesinin nasıl yapıldığına odaklanıyoruz. Aslında dah da temele basit bir şekilde girerek önce WEB dünyasını kavramamız gerekiyor. Sokrates'in dediği gibi ;

we don't know what we don't know.
//Türkçesi : neyi bilmediğimizi bilmiyoruz.

Web geliştirme açısından internetin nasıl çalıştığını açıklamaya gayret gösterdim.
Başlayalım...

İnternetteki her şey bir İstemci veya Sunucudur. İstemci talep eder ve Sunucu yanıt verir. Basitçe söylemek gerekirse, makineniz bir sunucudan bazı kaynaklar istemek için Tarayıcınızı kullanır ve sunucu yanıt verir. Ve sunucu, internete bağlı başka bir makinedir. Genel olarak yaşananlar bundan ibarettir.

Yani burada, İstemci herhangi bir şey olabilir - cep telefonunuz veya dizüstü bilgisayarınız, Chrome, Firefox, Edge gibi herhangi bir tarayıcıyı kullanabilir ve buna karşılık olarak sunucu olarak, erişmeye çalıştığınız web siteleri, web hizmetleri veya uygulamalar olabilir.

Biraz Daha Derine İnelim:

İnternetteki her makinenin bir IP adresi vardır. Bu aynı zamanda internete bağlı herhangi bir şeye erişmek için kullanılabilen bir IP adresidir. Aslında, dizüstü bilgisayarınızın da bir IP adresi vardır. Ancak sunucular, bazı kaynakları  sunacak olan özel tür makinelerdir. Bu nedenle, bir istemci olarak, tarayıcıda herhangi bir web sitesi yazdığınızda, örneğin www.google.com , bir Alan Adı Sunucusu (DNS) Aramasına yönlendirilirsiniz. DNS, alan adlarını (google.com gibi) IP Adresiyle eşleyen bir tablo gibidir. www.google.com'u ziyaret ettiğinizde, Google'ın Sunucularına bir istek gönderiyorsunuz. Karşılığında, Google'ın sunucusu size bir yanıt verecektir. 

Bu özellik, tarayıcının sunucunun ne tür içerikle yanıt verdiğini değerlendirmesine yardımcı olur. Şimdi, google.com'u ziyaret etmek, tarayıcının içerik türüne göre tanıyacağı bir HTML web sayfasıyla yanıt verebilir: text/html. Yanıtı HTML dosyası olarak ayrıştıracaktır.

Yanıt olarak aşağıdaki HTML’yi aldığımızı varsayalım:

<html>
   <head>
      <link href="/styles/main.css" />
   </head>
   <body>
     :
     :
     <script src="/javascript/app.js" />
   </body>
</html>

Burada, tarayıcı <link> etiketi ile karşılaştığında , 'Eyvah!, bu web sayfası için bu varlığa ihtiyacım var hemen bunu sunucudan isteyelim.' der ve  Bu, tarayıcının main.css dosyayı isteyeceği ve sunucu, Content-Type olarak dosya üzerinden göndereceği zamandır. Aynı şeyler  <script>etiket için de geçerlidir.

Bir örnek görelim:
İçerik türü

Burada, diyor ki content-type : image/gif. Böylece tarayıcı, bu belirli varlığın bir resim olduğunu bilir ve buna göre web sayfasında görüntülenir.

Herhangi bir web sayfasında Öğeyi İnceleyebilir ve Ağ Sekmesine gidip döndürülen herhangi bir varlığa tıklayabilirsiniz. Size ilgili talebi ve yanıtı gösterecektir!

Dikkat edebileceğiniz diğer bazı istekler ve yanıtlar:
  • method: HTTP Yöntemleri, istemcinin varlıklar veya kaynaklarla gerçekleştirilecek eylemi belirlemesini sağlar.
  • cookies: Tanımlama bilgileri, yararlı bilgileri hatırlamak veya göz atma etkinliğinizi kaydetmek için yerel makinenizde depolanan küçük veri parçalarıdır.
  • status code: Bunlar, istemcinin isteğine yanıt olarak sunucu tarafından verilen kodlardır.

Şimdi WEB ile ilgili en azından neyi bilmediğini biliyorsun. Sonunda, web'in nasıl çalıştığını bilmenin kısa vadede web siteleri oluşturmaya katkıda bulunmayacağını ancak uzun vadede faydalar sağlayacağını, çünkü perde arkasında neler olduğunu biliyorsunuz. 

Saygılar...