\u0130lk Web Sayfam<\/title>\n<\/head>\n<body>\n <h1>Merhaba D\u00fcnya!<\/h1>\n <p>Bu benim ilk paragraf\u0131m.<\/p>\n <a href=\"https:\/\/www.google.com\">Google'a Git<\/a>\n <img decoding=\"async\" src=\"resim.jpg\" alt=\"A\u00e7\u0131klay\u0131c\u0131 Resim\">\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod blo\u011funda, <code><\/p>\n<h1><\/code> bir ana ba\u015fl\u0131\u011f\u0131, <code><\/p>\n<p><\/code> bir paragraf\u0131, <code><a><\/code> bir ba\u011flant\u0131y\u0131 ve <code><img><\/code> bir resmi temsil eder. Her etiket, i\u00e7eri\u011fi belirli bir anlamsal anlamla i\u015faretler.<\/p>\n<h3>CSS: Web Sayfalar\u0131 Nas\u0131l G\u00fczelle\u015ftirilir?<\/h3>\n<p><strong>CSS (Cascading Style Sheets)<\/strong>, HTML ile olu\u015fturulan iskeletin g\u00f6rsel tasar\u0131m\u0131n\u0131 ve stilini belirlemek i\u00e7in kullan\u0131lan bir stil sayfas\u0131 dilidir. HTML \"ne\" ise, CSS \"nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc\" belirler. Renkler, yaz\u0131 tipleri, boyutlar, bo\u015fluklar, hizalamalar, arka planlar ve animasyonlar gibi t\u00fcm g\u00f6rsel \u00f6zellikler CSS ile tan\u0131mlan\u0131r. CSS sayesinde, ayn\u0131 HTML yap\u0131s\u0131n\u0131 kullanarak tamamen farkl\u0131 g\u00f6r\u00fcn\u00fcmlere sahip web siteleri olu\u015fturabiliriz. Bu, tasar\u0131mc\u0131lara b\u00fcy\u00fck bir esneklik sa\u011flar.<\/p>\n<p>Yukar\u0131daki HTML'e stil eklemek i\u00e7in basit bir CSS \u00f6rne\u011fi:<\/p>\n<pre><code>\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n color: #333;\n margin: 20px;\n}\n\nh1 {\n color: #0056b3;\n text-align: center;\n}\n\np {\n line-height: 1.6;\n}\n\na {\n color: #007bff;\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu CSS kurallar\u0131, sayfan\u0131n genel yaz\u0131 tipini, arka plan rengini, ba\u015fl\u0131k rengini ve ba\u011flant\u0131 stilini belirler. Bu sayede sayfa daha estetik ve kullan\u0131c\u0131 dostu bir g\u00f6r\u00fcn\u00fcme kavu\u015fur.<\/p>\n<h3>JavaScript: Web Sayfalar\u0131na Hayat Vermek \u0130\u00e7in Ne Gerekir?<\/h3>\n<p><strong>JavaScript<\/strong>, web sayfalar\u0131na etkile\u015fim ve dinamizm katmak i\u00e7in kullan\u0131lan bir programlama dilidir. HTML ve CSS dura\u011fan i\u00e7erikler olu\u015ftururken, JavaScript bu i\u00e7eri\u011fi hareketli ve kullan\u0131c\u0131 ile etkile\u015fimli hale getirir. JavaScript ile men\u00fcler a\u00e7\u0131p kapatabilir, form verilerini do\u011frulayabilir, dinamik i\u00e7erik y\u00fckleyebilir, animasyonlar olu\u015fturabilir ve hatta taray\u0131c\u0131 tabanl\u0131 oyunlar geli\u015ftirebiliriz. Web'i g\u00fcn\u00fcm\u00fczdeki zengin ve interaktif deneyim haline getiren anahtar teknolojidir.<\/p>\n<p>Bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda mesaj g\u00f6steren basit bir JavaScript \u00f6rne\u011fi:<\/p>\n<pre><code>\n<button onclick=\"gosterMesaj()\">Mesaj G\u00f6ster<\/button>\n\n<script>\nfunction gosterMesaj() {\n alert(\"Merhaba! JavaScript \u00e7al\u0131\u015f\u0131yor!\");\n}\n<\/script>\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, \"Mesaj G\u00f6ster\" d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda <code>gosterMesaj()<\/code> fonksiyonu \u00e7al\u0131\u015f\u0131r ve ekranda bir uyar\u0131 penceresi (alert) belirir. Bu, JavaScript'in bir web sayfas\u0131na nas\u0131l etkile\u015fim katt\u0131\u011f\u0131n\u0131n en temel \u00f6rne\u011fidir. Modern web geli\u015ftirmede, JavaScript \u00e7ok daha karma\u015f\u0131k uygulamalar ve tek sayfal\u0131k uygulamalar (SPA'lar) olu\u015fturmak i\u00e7in React, Angular, Vue.js gibi k\u00fct\u00fcphane ve framework'lerle birlikte kullan\u0131l\u0131r. Bu \u00fc\u00e7 dilin birle\u015fimi, g\u00fcn\u00fcm\u00fcz\u00fcn zengin ve dinamik web deneyimlerini m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<h2>Web G\u00fcvenli\u011fi ve Performans Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n<p>Bir web sitesinin sadece g\u00fczel g\u00f6r\u00fcnmesi veya i\u015flevsel olmas\u0131 yeterli de\u011fildir. Ayn\u0131 zamanda g\u00fcvenli ve h\u0131zl\u0131 olmas\u0131 da kritik \u00f6neme sahiptir. Kullan\u0131c\u0131lar, verilerinin g\u00fcvende oldu\u011fundan emin olmak isterken, yava\u015f y\u00fcklenen bir site ziyaret\u00e7ileri ka\u00e7\u0131rabilir. Bu b\u00f6l\u00fcmde, web g\u00fcvenli\u011finin temel direklerinden olan HTTPS ve SSL sertifikalar\u0131n\u0131 ve web sitesi performans\u0131n\u0131 art\u0131rmak i\u00e7in kullanabilece\u011fimiz y\u00f6ntemleri inceleyece\u011fiz.<\/p>\n<h3>HTTPS ve SSL Sertifikalar\u0131 Neden \u00d6nemli?<\/h3>\n<p>\u0130nternet \u00fczerindeki bilgi al\u0131\u015fveri\u015finin g\u00fcvenli\u011fini sa\u011flamak, hem kullan\u0131c\u0131lar hem de web sitesi sahipleri i\u00e7in birincil \u00f6nceliktir. \u0130\u015fte bu noktada <strong>HTTPS (Hypertext Transfer Protocol Secure)<\/strong> ve <strong>SSL\/TLS Sertifikalar\u0131<\/strong> devreye girer. Daha \u00f6nce bahsetti\u011fimiz HTTP, veriyi a\u00e7\u0131k metin olarak g\u00f6nderir; bu da k\u00f6t\u00fc niyetli ki\u015filerin bu veriyi kolayca ele ge\u00e7irmesine ve okumas\u0131na olanak tan\u0131r. \u00d6zellikle \u015fifreler, kredi kart\u0131 bilgileri veya ki\u015fisel veriler gibi hassas bilgilerin aktar\u0131m\u0131 i\u00e7in bu durum b\u00fcy\u00fck bir g\u00fcvenlik riskidir.<\/p>\n<p>HTTPS, HTTP'nin \u015fifrelenmi\u015f halidir. Bir web sitesi HTTPS kulland\u0131\u011f\u0131nda, taray\u0131c\u0131n\u0131z ile web sunucusu aras\u0131ndaki t\u00fcm ileti\u015fim <strong>SSL (Secure Sockets Layer)<\/strong> veya daha g\u00fcncel ad\u0131yla <strong>TLS (Transport Layer Security)<\/strong> protokolleri arac\u0131l\u0131\u011f\u0131yla \u015fifrelenir. Bu \u015fifreleme, verilerin \u00fc\u00e7\u00fcnc\u00fc taraflarca okunmas\u0131n\u0131, de\u011fi\u015ftirilmesini veya \u00e7al\u0131nmas\u0131n\u0131 engeller. HTTPS kullanan sitelerin adres \u00e7ubu\u011funda genellikle bir kilit simgesi veya \"G\u00fcvenli\" yaz\u0131s\u0131 bulunur. Bu, kullan\u0131c\u0131lara sitenin g\u00fcvenli oldu\u011funu ve verilerinin korundu\u011funu g\u00f6sterir.<\/p>\n<p>Bir web sitesinin HTTPS kullanabilmesi i\u00e7in bir SSL\/TLS sertifikas\u0131na sahip olmas\u0131 gerekir. Bu sertifika, bir sertifika yetkilisi (CA) taraf\u0131ndan verilir ve web sitesinin kimli\u011fini do\u011frular. Taray\u0131c\u0131, bu sertifikay\u0131 kontrol ederek sunucunun ger\u00e7ekten iddia etti\u011fi sunucu olup olmad\u0131\u011f\u0131n\u0131 anlar. Bir web sitesi sahibi olarak SSL sertifikas\u0131 edinmek, kullan\u0131c\u0131 g\u00fcvenli\u011fini sa\u011flaman\u0131n yan\u0131 s\u0131ra SEO a\u00e7\u0131s\u0131ndan da \u00f6nemlidir, \u00e7\u00fcnk\u00fc arama motorlar\u0131 g\u00fcvenli siteleri daha \u00fcst s\u0131ralarda listeleme e\u011filimindedir.<\/p>\n<h3>Web Sitesi Performans\u0131n\u0131 Art\u0131rmak \u0130\u00e7in Hangi Y\u00f6ntemler Kullan\u0131l\u0131r?<\/h3>\n<p>H\u0131zl\u0131 y\u00fcklenen bir web sitesi, kullan\u0131c\u0131 deneyimi, arama motoru s\u0131ralamas\u0131 ve genel ba\u015far\u0131 i\u00e7in hayati \u00f6neme sahiptir. Kullan\u0131c\u0131lar yava\u015f siteleri terk etme e\u011filimindedir. Peki, bir web sitesinin performans\u0131n\u0131 art\u0131rmak i\u00e7in neler yap\u0131labilir?<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Web sitelerinin b\u00fcy\u00fck \u00e7o\u011funlu\u011funun y\u00fcklenme s\u00fcresinin temel nedeni g\u00f6rsellerdir. G\u00f6rselleri s\u0131k\u0131\u015ft\u0131rarak (kaliteden \u00f6d\u00fcn vermeden boyutunu k\u00fc\u00e7\u00fclterek), do\u011fru formatlarda (JPEG, PNG, WebP) kullanarak ve uygun boyutlarda sunarak y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabiliriz. \"Lazy loading\" (tembel y\u00fckleme) tekni\u011fi ile sadece ekranda g\u00f6r\u00fcnen g\u00f6rselleri y\u00fcklemek de performans\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>\u00d6nbellekleme (Caching):<\/strong> Web sitesinin baz\u0131 b\u00f6l\u00fcmleri (HTML, CSS, JavaScript dosyalar\u0131, g\u00f6rseller) sunucudan her seferinde yeniden \u00e7ekilmek yerine kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda veya ara sunucularda ge\u00e7ici olarak saklanabilir. Bu sayede, kullan\u0131c\u0131 ayn\u0131 siteyi tekrar ziyaret etti\u011finde, bu dosyalar daha h\u0131zl\u0131 bir \u015fekilde y\u00fcklenir.<\/li>\n<li><strong>CDN (Content Delivery Network) Kullan\u0131m\u0131:<\/strong> CDN'ler, web sitesi i\u00e7eri\u011fini (g\u00f6rseller, videolar, statik dosyalar) d\u00fcnyan\u0131n farkl\u0131 co\u011frafi b\u00f6lgelerindeki sunucularda (edge servers) kopyalayarak saklayan a\u011flard\u0131r. Bir kullan\u0131c\u0131 web sitesine eri\u015fmek istedi\u011finde, i\u00e7erik ona en yak\u0131n CDN sunucusundan teslim edilir. Bu, verinin daha az yol katetmesini sa\u011flayarak y\u00fckleme h\u0131z\u0131n\u0131 dramatik \u015fekilde art\u0131r\u0131r. \u00d6zellikle global kitleye hitap eden siteler i\u00e7in vazge\u00e7ilmezdir.<\/li>\n<li><strong>Kod Minifikasyonu ve S\u0131k\u0131\u015ft\u0131rma:<\/strong> HTML, CSS ve JavaScript dosyalar\u0131ndaki gereksiz bo\u015fluklar\u0131, yorumlar\u0131 ve sat\u0131r sonlar\u0131n\u0131 kald\u0131rarak (minifikasyon) ve bu dosyalar\u0131 s\u0131k\u0131\u015ft\u0131rarak (Gzip gibi algoritmalarla) boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek, sunucudan taray\u0131c\u0131ya aktar\u0131lma s\u00fcrelerini k\u0131salt\u0131r.<\/li>\n<\/ul>\n<p><strong>Vaka Analizi: Bir Haber Sitesinin Yava\u015f Y\u00fcklenmesi ve \u0130yile\u015ftirilmesi<\/strong><\/p>\n<p>Pop\u00fcler bir haber sitesinin, \u00f6zellikle yo\u011fun haber anlar\u0131nda \u00e7ok yava\u015f y\u00fcklendi\u011fini fark ettiniz. Siteye giren ziyaret\u00e7ilerin b\u00fcy\u00fck bir k\u0131sm\u0131, haberin a\u00e7\u0131lmas\u0131n\u0131 beklemeden siteyi terk ediyordu. Yap\u0131lan analizler sonucunda \u015fu sorunlar tespit edildi:<\/p>\n<ul>\n<li>Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve optimize edilmemi\u015f g\u00f6rseller, haber makalelerini a\u015f\u0131r\u0131 derecede b\u00fcy\u00fct\u00fcyor.<\/li>\n<li>Siteye her giri\u015fte t\u00fcm CSS ve JavaScript dosyalar\u0131 yeniden indiriliyor, \u00f6nbellekleme d\u00fczg\u00fcn \u00e7al\u0131\u015fm\u0131yor.<\/li>\n<li>D\u00fcnya genelinden gelen okuyucular i\u00e7in i\u00e7erik tek bir sunucudan servis ediliyor, bu da uzak b\u00f6lgelerdeki kullan\u0131c\u0131lar i\u00e7in gecikmelere yol a\u00e7\u0131yor.<\/li>\n<\/ul>\n<p>\u00c7\u00f6z\u00fcm olarak a\u015fa\u011f\u0131daki ad\u0131mlar uyguland\u0131:<\/p>\n<ul>\n<li>T\u00fcm g\u00f6rseller, yay\u0131n \u00f6ncesinde otomatik bir optimizasyon arac\u0131ndan ge\u00e7irildi ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc. Ayr\u0131ca \"lazy loading\" uyguland\u0131.<\/li>\n<li>Taray\u0131c\u0131 \u00f6nbellekleme politikalar\u0131 (HTTP Cache-Control ba\u015fl\u0131klar\u0131) do\u011fru \u015fekilde yap\u0131land\u0131r\u0131larak statik dosyalar\u0131n belirli bir s\u00fcre boyunca kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131nda saklanmas\u0131 sa\u011fland\u0131.<\/li>\n<li>Bir CDN servisi kullan\u0131ma al\u0131nd\u0131. B\u00f6ylece haber i\u00e7eri\u011fi, kullan\u0131c\u0131lara co\u011frafi olarak en yak\u0131n sunucudan servis edilmeye ba\u015fland\u0131.<\/li>\n<li>CSS ve JavaScript dosyalar\u0131 minifiye edildi ve sunucu taraf\u0131nda Gzip s\u0131k\u0131\u015ft\u0131rmas\u0131 etkinle\u015ftirildi.<\/li>\n<\/ul>\n<p>Bu iyile\u015ftirmelerin sonucunda, haber sitesinin y\u00fckleme s\u00fcresi %60 oran\u0131nda azald\u0131. Ziyaret\u00e7i terk oranlar\u0131 d\u00fc\u015ft\u00fc, siteye ayr\u0131lan ortalama s\u00fcre artt\u0131 ve arama motorlar\u0131ndaki s\u0131ralamas\u0131 y\u00fckseldi. Performans optimizasyonu, bir web sitesinin ba\u015far\u0131s\u0131 i\u00e7in kesinlikle g\u00f6z ard\u0131 edilmemesi gereken bir yat\u0131r\u0131md\u0131r.<\/p>\n<h2>Modern Web Geli\u015ftirme ve \u0130leri D\u00fczey Kavramlar Nelerdir?<\/h2>\n<p>Web teknolojileri s\u00fcrekli evrim ge\u00e7irmekte ve yeni trendler ortaya \u00e7\u0131kmaktad\u0131r. Temel kavramlar\u0131 ve g\u00fcvenlik\/performans optimizasyonlar\u0131n\u0131 anlad\u0131ktan sonra, modern web geli\u015ftirmenin baz\u0131 ileri d\u00fczey kavramlar\u0131na ve \u00f6zellikle mobil uyumlu tasar\u0131m\u0131n neden vazge\u00e7ilmez oldu\u011funa de\u011finelim.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, sadece statik sayfalar sunmaktan \u00e7ok daha fazlas\u0131n\u0131 yap\u0131yor. Art\u0131k bankac\u0131l\u0131k uygulamalar\u0131ndan karma\u015f\u0131k sosyal medya platformlar\u0131na kadar her \u015fey web \u00fczerinde \u00e7al\u0131\u015f\u0131yor. Bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in <strong>API'ler (Application Programming Interfaces)<\/strong> ve mikroservisler gibi kavramlar \u00f6n plana \u00e7\u0131km\u0131\u015ft\u0131r. API'ler, farkl\u0131 yaz\u0131l\u0131m bile\u015fenlerinin veya uygulamalar\u0131n birbirleriyle g\u00fcvenli ve standart bir \u015fekilde ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan kurallar ve protokoller b\u00fct\u00fcn\u00fcd\u00fcr. \u00d6rne\u011fin, bir hava durumu uygulamas\u0131 kendi hava durumu verilerini toplamak yerine, bir hava durumu sa\u011flay\u0131c\u0131s\u0131n\u0131n API'sini kullanarak anl\u0131k verilere eri\u015febilir. Mikroservisler ise, b\u00fcy\u00fck bir uygulamay\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve birbirleriyle API'ler arac\u0131l\u0131\u011f\u0131yla ileti\u015fim kuran servisler olarak tasarlama yakla\u015f\u0131m\u0131d\u0131r. Bu, uygulamalar\u0131n daha esnek, bak\u0131m\u0131 daha kolay ve \u00f6l\u00e7eklenebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Ayr\u0131ca, web geli\u015ftiricileri art\u0131k sadece HTML, CSS ve JavaScript yazmaktan ziyade, bu dillerin \u00fczerine in\u015fa edilmi\u015f g\u00fc\u00e7l\u00fc \u00e7er\u00e7eveler ve k\u00fct\u00fcphaneler (\u00f6rne\u011fin, React, Angular, Vue.js gibi front-end \u00e7er\u00e7eveleri veya Node.js ile Express, Python ile Django\/Flask gibi back-end \u00e7er\u00e7eveleri) kullanarak daha h\u0131zl\u0131 ve verimli uygulamalar geli\u015ftirmektedir. Bu ara\u00e7lar, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, kod tekrar\u0131n\u0131 azalt\u0131r ve daha karma\u015f\u0131k etkile\u015fimlerin kolayca hayata ge\u00e7irilmesini sa\u011flar.<\/p>\n<h3>Mobil Uyumlu Tasar\u0131m (Responsive Design) Neden \u015eartt\u0131r?<\/h3>\n<p>G\u00fcn\u00fcm\u00fczde internet trafi\u011finin b\u00fcy\u00fck bir k\u0131sm\u0131 mobil cihazlardan gelmektedir. Ak\u0131ll\u0131 telefonlar ve tabletler, art\u0131k web'e eri\u015fimin birincil yolu haline gelmi\u015ftir. Bu nedenle, bir web sitesinin farkl\u0131 ekran boyutlar\u0131na ve cihazlara otomatik olarak uyum sa\u011flayabilmesi, yani <strong>Mobil Uyumlu Tasar\u0131m (Responsive Design)<\/strong> olmas\u0131 mutlak bir gerekliliktir. Responsive tasar\u0131m, web sitesinin d\u00fczeninin, g\u00f6rsellerinin ve metinlerinin, kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n ekran boyutuna g\u00f6re dinamik olarak ayarlanmas\u0131n\u0131 sa\u011flar. B\u00f6ylece kullan\u0131c\u0131lar, ister b\u00fcy\u00fck bir masa\u00fcst\u00fc ekran\u0131nda ister k\u00fc\u00e7\u00fck bir ak\u0131ll\u0131 telefon ekran\u0131nda olsun, tutarl\u0131 ve optimize edilmi\u015f bir kullan\u0131c\u0131 deneyimi ya\u015farlar.<\/p>\n<p>Mobil uyumlu tasar\u0131m\u0131n temel prensipleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Esnek Izgaralar (Flexible Grids):<\/strong> Sayfa d\u00fczeni, sabit piksel de\u011ferleri yerine y\u00fczde de\u011ferleri veya esnek birimler kullan\u0131larak olu\u015fturulur.<\/li>\n<li><strong>Esnek G\u00f6rseller (Flexible Images):<\/strong> G\u00f6rsellerin geni\u015flikleri ekran boyutuna g\u00f6re otomatik olarak ayarlan\u0131r (genellikle <code>max-width: 100%;<\/code> ile).<\/li>\n<li><strong>Medya Sorgular\u0131 (Media Queries):<\/strong> CSS'in \u00f6zel bir \u00f6zelli\u011fidir. Belirli ekran geni\u015flikleri veya cihaz \u00f6zellikleri i\u00e7in farkl\u0131 stil kurallar\u0131 tan\u0131mlamam\u0131z\u0131 sa\u011flar. Bu sayede, \u00f6rne\u011fin bir telefon ekran\u0131nda farkl\u0131 bir men\u00fc d\u00fczeni, tablet ekran\u0131nda farkl\u0131 bir s\u00fctun d\u00fczeni uygulanabilir.<\/li>\n<\/ul>\n<p>A\u015fa\u011f\u0131da, mobil uyumlu bir tasar\u0131m i\u00e7in gerekli temel meta etiketi ve basit bir medya sorgusu \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n<pre><code>\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n\n<style>\n\/* Varsay\u0131lan stil - geni\u015f ekranlar i\u00e7in *\/\nbody {\n font-size: 18px;\n padding: 20px;\n}\n\n.container {\n width: 960px;\n margin: 0 auto;\n}\n\n\/* Medya sorgusu: Ekran geni\u015fli\u011fi 768px veya daha k\u00fc\u00e7\u00fck oldu\u011funda uygulanacak stiller *\/\n@media screen and (max-width: 768px) {\n body {\n font-size: 16px;\n padding: 10px;\n }\n .container {\n width: 100%; \/* Konteyner tam geni\u015fli\u011fi kaplas\u0131n *\/\n padding: 0 10px;\n }\n h2 {\n font-size: 24px;\n }\n}\n\n\/* Medya sorgusu: Ekran geni\u015fli\u011fi 480px veya daha k\u00fc\u00e7\u00fck oldu\u011funda uygulanacak stiller (daha k\u00fc\u00e7\u00fck telefonlar) *\/\n@media screen and (max-width: 480px) {\n body {\n font-size: 14px;\n }\n h2 {\n font-size: 20px;\n }\n .main-navigation ul {\n flex-direction: column; \/* Mobil men\u00fcy\u00fc dikey yap *\/\n }\n}\n<\/style>\n <\/pre>\n<p><\/code><\/p>\n<p><code><meta name=\"viewport\"><\/code> etiketi, taray\u0131c\u0131ya sayfan\u0131n cihaz\u0131n ekran geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenmesini s\u00f6yler. CSS'teki <code>@media<\/code> kurallar\u0131 ise, belirli ekran boyutlar\u0131 i\u00e7in farkl\u0131 stil kurallar\u0131 tan\u0131mlayarak sayfan\u0131n farkl\u0131 cihazlarda otomatik olarak farkl\u0131 g\u00f6r\u00fcn\u00fcmler kazanmas\u0131n\u0131 sa\u011flar. Bu sayede, bir web sitesi hem masa\u00fcst\u00fcnde hem de mobilde kullan\u0131c\u0131 dostu bir deneyim sunabilir.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Mobil uyumlu tasar\u0131mda \"mobil \u00f6ncelikli\" (mobile-first) yakla\u015f\u0131m benimsemek, sitenizi daha performansl\u0131 ve y\u00f6netilebilir k\u0131lar. Yani, \u00f6ncelikle en k\u00fc\u00e7\u00fck ekranlar i\u00e7in temel stilleri yaz\u0131n, ard\u0131ndan medya sorgular\u0131 kullanarak daha b\u00fcy\u00fck ekranlar i\u00e7in ek stiller ekleyin. Bu, gereksiz CSS y\u00fcklemesini azalt\u0131r ve mobil cihazlar i\u00e7in daha h\u0131zl\u0131 bir deneyim sunar.\n <\/div>\n<h2>Dijital Evrendeki Yolculu\u011fumuz: \u00d6\u011frendiklerimizi \u00d6zetlemek<\/h2>\n<p>Bu kapsaml\u0131 makale boyunca, dijital d\u00fcnyan\u0131n temelini olu\u015fturan internet ve web kavramlar\u0131ndan ba\u015flayarak, bir web sayfas\u0131n\u0131n taray\u0131c\u0131n\u0131za ula\u015fma ser\u00fcvenini, web sitelerini olu\u015fturan HTML, CSS ve JavaScript gibi temel yap\u0131 ta\u015flar\u0131n\u0131 ve modern web geli\u015ftirmenin olmazsa olmazlar\u0131 olan g\u00fcvenlik, performans ve mobil uyumlu tasar\u0131m konular\u0131n\u0131 ad\u0131m ad\u0131m inceledik. \u0130nternet ve web'in sadece birer terimden ibaret olmad\u0131\u011f\u0131n\u0131, alt\u0131nda karma\u015f\u0131k ancak bir o kadar da mant\u0131kl\u0131 bir sistemin yatt\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fck.<\/p>\n<p>Art\u0131k, bir web adresini yazd\u0131\u011f\u0131n\u0131zda arka planda DNS sunucular\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, sunucunun size nas\u0131l yan\u0131t verdi\u011fini ve taray\u0131c\u0131n\u0131z\u0131n bu kodlar\u0131 nas\u0131l g\u00f6rsel bir \u015f\u00f6lene d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fc biliyorsunuz. Web'in iskeleti HTML, giysisi CSS ve beyni JavaScript sayesinde dinamik ve etkile\u015fimli deneyimler sundu\u011funu \u00f6\u011frendik. Dahas\u0131, veri g\u00fcvenli\u011finin HTTPS ile, h\u0131z\u0131n ise CDN'ler ve \u00f6nbellekleme ile sa\u011fland\u0131\u011f\u0131n\u0131, mobil cihazlar\u0131n web deneyimindeki artan \u00f6nemini ve responsive tasar\u0131m\u0131n bu konudaki rol\u00fcn\u00fc kavrad\u0131k. Bu bilgiler, sadece bir kullan\u0131c\u0131 olarak de\u011fil, ayn\u0131 zamanda potansiyel bir web geli\u015ftiricisi veya dijital i\u00e7erik \u00fcreticisi olarak da size g\u00fc\u00e7l\u00fc bir temel sunmaktad\u0131r.<\/p>\n<p>Dijitalle\u015fen d\u00fcnyada bu temel kavramlar\u0131 anlamak, sadece teknolojiye hakim olmakla kalmaz, ayn\u0131 zamanda \u00e7evrimi\u00e7i deneyimlerimizi daha bilin\u00e7li bir \u015fekilde y\u00f6netmemizi sa\u011flar. Bu bilgilerle donanarak, dijital evrende \u00e7ok daha g\u00fcvenli, verimli ve bilin\u00e7li bir yolculuk yapabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li>\n <strong>Web hosting nedir ve neden gereklidir?<\/strong><\/p>\n<p>Web hosting, bir web sitesinin dosyalar\u0131n\u0131 (HTML, CSS, g\u00f6rseller vb.) bar\u0131nd\u0131ran ve internet \u00fczerinden eri\u015filebilir hale getiren bir hizmettir. Bir web sitesinin yay\u0131nlanabilmesi i\u00e7in bu dosyalar\u0131n s\u00fcrekli olarak internete ba\u011fl\u0131 bir sunucuda tutulmas\u0131 gerekir. Hosting sa\u011flay\u0131c\u0131lar\u0131, bu sunucular\u0131 ve gerekli altyap\u0131y\u0131 sunarak web sitelerinin 7\/24 yay\u0131nda kalmas\u0131n\u0131 sa\u011flar.<\/p>\n<\/li>\n<li>\n <strong>URL ve URI aras\u0131ndaki fark nedir?<\/strong><\/p>\n<p>URI (Uniform Resource Identifier), bir kayna\u011f\u0131 tan\u0131mlayan genel bir etikettir (\u00f6rne\u011fin, bir web sayfas\u0131, bir kitap, bir ki\u015fi). URL (Uniform Resource Locator) ise, URI'nin bir alt k\u00fcmesidir ve kayna\u011f\u0131n internet \u00fczerindeki konumunu belirten, ayn\u0131 zamanda o kayna\u011fa nas\u0131l eri\u015filece\u011fini de g\u00f6steren bir adrestir. Yani her URL bir URI'dir, ancak her URI bir URL de\u011fildir.<\/p>\n<\/li>\n<li>\n <strong>Front-end ve Back-end geli\u015ftirme ne anlama gelir?<\/strong><\/p>\n<p>Front-end geli\u015ftirme, kullan\u0131c\u0131lar\u0131n do\u011frudan etkile\u015fimde bulundu\u011fu web sitesinin g\u00f6rsel ve etkile\u015fimli k\u0131sm\u0131n\u0131 olu\u015fturmakla ilgilenir (HTML, CSS, JavaScript). Back-end geli\u015ftirme ise, web sitesinin \"arka plan\u0131nda\" \u00e7al\u0131\u015fan, veritaban\u0131 y\u00f6netimi, sunucu mant\u0131\u011f\u0131, API'ler ve g\u00fcvenlik gibi kullan\u0131c\u0131ya do\u011frudan g\u00f6r\u00fcnmeyen k\u0131s\u0131mlar\u0131n\u0131 olu\u015fturur (\u00f6rne\u011fin Python, Node.js, PHP gibi dillerle).<\/p>\n<\/li>\n<li>\n <strong>Cookies (\u00c7erezler) ne i\u015fe yarar ve g\u00fcvenli midir?<\/strong><\/p>\n<p>\u00c7erezler, web sitelerinin kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131nda depolad\u0131\u011f\u0131 k\u00fc\u00e7\u00fck veri par\u00e7ac\u0131klar\u0131d\u0131r. Kullan\u0131c\u0131 tercihleri (dil, tema), oturum bilgileri (giri\u015f yapm\u0131\u015f kullan\u0131c\u0131lar) veya al\u0131\u015fveri\u015f sepeti i\u00e7eri\u011fi gibi bilgileri saklamak i\u00e7in kullan\u0131l\u0131rlar. Genellikle g\u00fcvenlidirler, ancak k\u00f6t\u00fc niyetli web siteleri veya yetersiz g\u00fcvenlik \u00f6nlemleri nedeniyle \u00e7erezler k\u00f6t\u00fcye kullan\u0131labilir. Modern taray\u0131c\u0131lar ve d\u00fczenlemeler (GDPR gibi), \u00e7erez kullan\u0131m\u0131 hakk\u0131nda daha fazla \u015feffafl\u0131k ve kullan\u0131c\u0131 kontrol\u00fc sa\u011flamaktad\u0131r.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-31497","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber<\/title>\n<meta name=\"description\" content=\"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-10T13:01:23+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-10T13:01:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\"},\"wordCount\":4629,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\",\"name\":\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-10T13:01:23+00:00\",\"description\":\"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","description":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","og_description":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.","og_url":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-10T13:01:23+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-10T13:01:23+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/"},"wordCount":4629,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","name":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-10T13:01:23+00:00","description":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31497"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31497\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\u0130nternet ve web aras\u0131ndaki temel fark\u0131 anlad\u0131ktan sonra, bu sistemlerin i\u015fleyi\u015fini sa\u011flayan temel bile\u015fenlere odaklanal\u0131m. Bir web sayfas\u0131n\u0131n taray\u0131c\u0131n\u0131za ula\u015fabilmesi i\u00e7in bir\u00e7ok farkl\u0131 teknoloji ve protokol birlikte \u00e7al\u0131\u015f\u0131r. Bu b\u00f6l\u00fcmde, internetin ve web’in temel ta\u015flar\u0131n\u0131 olu\u015fturan kritik kavramlar\u0131 ele alaca\u011f\u0131z: IP adresleri, alan adlar\u0131 (domain names), DNS, sunucular (servers) ve taray\u0131c\u0131lar (browsers).<\/p>\n

\u00d6ncelikle IP Adresi (Internet Protocol Address)<\/strong> ile ba\u015flayal\u0131m. T\u0131pk\u0131 her evin bir posta adresi oldu\u011fu gibi, internete ba\u011fl\u0131 her cihaz\u0131n da benzersiz bir IP adresi vard\u0131r. Bu adres, cihazlar\u0131n birbirlerini bulmas\u0131n\u0131 ve aralar\u0131nda veri al\u0131\u015fveri\u015fi yapmas\u0131n\u0131 sa\u011flar. IP adresleri genellikle d\u00f6rt say\u0131 grubundan olu\u015fur ve her grup noktalarla ayr\u0131l\u0131r (\u00f6rne\u011fin, 192.168.1.1). IPv4 ve daha yeni olan IPv6 gibi farkl\u0131 formatlar\u0131 bulunur. Ancak bu say\u0131lar\u0131 ak\u0131lda tutmak olduk\u00e7a zordur, de\u011fil mi? \u0130\u015fte bu noktada Alan Adlar\u0131 (Domain Names)<\/strong> devreye girer. Alan adlar\u0131, ak\u0131lda kal\u0131c\u0131 ve okunabilir metinlerdir (\u00f6rne\u011fin, “google.com” veya “hepsiburada.com”) ve asl\u0131nda karma\u015f\u0131k IP adreslerinin insan dostu kar\u015f\u0131l\u0131klar\u0131d\u0131r.<\/p>\n

Peki, taray\u0131c\u0131n\u0131za bir alan ad\u0131 yazd\u0131\u011f\u0131n\u0131zda, bu alan ad\u0131 nas\u0131l oluyor da ilgili IP adresine \u00e7evriliyor? \u0130\u015fte burada DNS (Domain Name System)<\/strong> kritik bir rol oynar. DNS, internetin telefon rehberi gibi \u00e7al\u0131\u015f\u0131r. Bir alan ad\u0131n\u0131 (\u00f6rne\u011fin, “ornek.com”) bir IP adresine \u00e7eviren da\u011f\u0131t\u0131k bir sistemdir. Taray\u0131c\u0131n\u0131z bir alan ad\u0131 istedi\u011finde, DNS sunucular\u0131 bu alan ad\u0131na kar\u015f\u0131l\u0131k gelen IP adresini bulur ve taray\u0131c\u0131n\u0131za geri g\u00f6nderir. Bu sayede taray\u0131c\u0131n\u0131z do\u011fru sunucuya ba\u011flanabilir. DNS olmasayd\u0131, her web sitesine eri\u015fmek i\u00e7in o sitenin IP adresini bilmemiz gerekirdi ki bu da imkans\u0131z olurdu.<\/p>\n

Bir web sitesinin i\u00e7eri\u011fini bar\u0131nd\u0131ran ve kullan\u0131c\u0131lardan gelen istekleri yan\u0131tlayan bilgisayarlara Sunucu (Server)<\/strong> denir. Sunucular, genellikle g\u00fc\u00e7l\u00fc donan\u0131mlara sahip, 7\/24 kesintisiz \u00e7al\u0131\u015fan \u00f6zel bilgisayarlard\u0131r. Bir web sitesine eri\u015fmek istedi\u011finizde, taray\u0131c\u0131n\u0131z asl\u0131nda bu sunuculara bir “istek” g\u00f6nderir. Sunucu, bu iste\u011fi al\u0131r, i\u015fler ve istenen web sayfas\u0131n\u0131n dosyalar\u0131n\u0131 (HTML, CSS, JavaScript, g\u00f6rseller vb.) bir “yan\u0131t” olarak taray\u0131c\u0131n\u0131za geri g\u00f6nderir. Bu ileti\u015fim s\u00fcreci, \u0130stemci-Sunucu (Client-Server) Modeli<\/strong> olarak bilinir; burada taray\u0131c\u0131n\u0131z “istemci”, web sitesini bar\u0131nd\u0131ran bilgisayar ise “sunucu”dur.<\/p>\n

Son olarak, Taray\u0131c\u0131 (Browser)<\/strong> nedir? Google Chrome, Mozilla Firefox, Microsoft Edge veya Safari gibi taray\u0131c\u0131lar, web sunucular\u0131ndan gelen web sayfalar\u0131n\u0131 yorumlayan ve g\u00f6rsel olarak ekranda g\u00f6steren yaz\u0131l\u0131mlard\u0131r. Taray\u0131c\u0131lar, HTML, CSS ve JavaScript kodlar\u0131n\u0131 okuyarak sayfay\u0131 d\u00fczenler, stillendirir ve interaktif hale getirir. Bu temel bile\u015fenlerin uyumlu \u00e7al\u0131\u015fmas\u0131 sayesinde, internetin ve web’in sonsuz kaynaklar\u0131na kolayca eri\u015febiliriz.<\/p>\n

\n Uzman \u0130pucu: \u0130nternet altyap\u0131s\u0131ndaki bu temel bile\u015fenlerin her biri, veri paketlerinin do\u011fru hedefe ula\u015fmas\u0131 ve do\u011fru \u015fekilde i\u015flenmesi i\u00e7in hayati \u00f6nem ta\u015f\u0131r. A\u011f sorunlar\u0131n\u0131 giderirken veya web sitelerinin neden yava\u015f y\u00fcklendi\u011fini anlamaya \u00e7al\u0131\u015f\u0131rken bu bile\u015fenlerin her birinin potansiyel bir sorun noktas\u0131 olabilece\u011fini unutmay\u0131n. \u00d6rne\u011fin, yava\u015f bir DNS yan\u0131t\u0131 veya a\u015f\u0131r\u0131 y\u00fcklenmi\u015f bir sunucu, kullan\u0131c\u0131 deneyimini do\u011frudan etkiler.\n <\/div>\n
Bir Web Sayfas\u0131 Taray\u0131c\u0131n\u0131za Nas\u0131l Ula\u015f\u0131r? Ad\u0131m Ad\u0131m \u0130nternet Maceras\u0131<\/h2>\n
\u015eimdiye kadar internetin ve web’in temel kavramlar\u0131n\u0131 \u00f6\u011frendik. Peki, g\u00fcnl\u00fck hayatta defalarca yapt\u0131\u011f\u0131m\u0131z, bir web sitesi adresini taray\u0131c\u0131ya yaz\u0131p Enter tu\u015funa basma eyleminin arka plan\u0131nda tam olarak ne gibi s\u00fcre\u00e7ler i\u015fliyor? Bu b\u00f6l\u00fcm, bir web sayfas\u0131n\u0131n sunucudan taray\u0131c\u0131n\u0131za ula\u015fana kadar ge\u00e7irdi\u011fi “ad\u0131m ad\u0131m internet maceras\u0131n\u0131” ayr\u0131nt\u0131l\u0131 olarak a\u00e7\u0131klayacak ve bu s\u00fcrecin arkas\u0131ndaki teknolojileri daha yak\u0131ndan inceleyecek.<\/p>\n
1. URL Yazma ve DNS Sorgusu:<\/strong> Her \u015fey, taray\u0131c\u0131n\u0131z\u0131n adres \u00e7ubu\u011funa bir URL (Uniform Resource Locator)<\/strong> yazman\u0131zla ba\u015flar. \u00d6rne\u011fin, “https:\/\/www.ornek.com” yazd\u0131\u011f\u0131n\u0131z\u0131 varsayal\u0131m. Taray\u0131c\u0131, bu alan ad\u0131n\u0131 bir IP adresine \u00e7evirmek i\u00e7in yerel DNS \u00f6nbelle\u011fini kontrol eder. E\u011fer bulamazsa, iste\u011fi yerel DNS sunucunuza (genellikle internet servis sa\u011flay\u0131c\u0131n\u0131z taraf\u0131ndan sa\u011flan\u0131r) iletir. Bu DNS sunucusu da kendi \u00f6nbelle\u011fine bakar. Bulamazsa, daha \u00fcst seviye DNS sunucular\u0131na (root sunucular\u0131, TLD sunucular\u0131 gibi) sorgu g\u00f6ndererek “ornek.com”un IP adresini bulmaya \u00e7al\u0131\u015f\u0131r. Bu i\u015flem saniyeler i\u00e7inde ger\u00e7ekle\u015fir ve sonucunda taray\u0131c\u0131n\u0131z, “ornek.com”un hangi IP adresine sahip oldu\u011funu \u00f6\u011frenir.<\/p>\n
2. HTTP\/HTTPS \u0130ste\u011fi:<\/strong> IP adresi elde edildikten sonra, taray\u0131c\u0131n\u0131z bu IP adresindeki sunucuya bir ba\u011flant\u0131 kurar. Bu ba\u011flant\u0131 \u00fczerinden bir HTTP (Hypertext Transfer Protocol)<\/strong> veya HTTPS (Hypertext Transfer Protocol Secure)<\/strong> iste\u011fi g\u00f6nderir. HTTP, web taray\u0131c\u0131lar\u0131 ve web sunucular\u0131 aras\u0131nda bilgi al\u0131\u015fveri\u015fini sa\u011flayan protokold\u00fcr. HTTPS, HTTP’nin g\u00fcvenli versiyonudur; verileriniz sunucuya ula\u015fmadan \u00f6nce \u015fifrelenir ve b\u00f6ylece \u00fc\u00e7\u00fcnc\u00fc taraflarca okunamaz hale gelir. Taray\u0131c\u0131n\u0131z, sunucudan “ornek.com” ana sayfas\u0131n\u0131n i\u00e7eri\u011fini ister.<\/p>\n
3. Sunucu Yan\u0131t\u0131 ve Dosya G\u00f6nderimi:<\/strong> Web sunucusu, taray\u0131c\u0131n\u0131zdan gelen iste\u011fi al\u0131r. \u0130stenen sayfa veya kaynak (HTML dosyas\u0131, resim, video vb.) sunucuda bulunur. Sunucu, bu dosyalar\u0131 bir HTTP yan\u0131t\u0131 i\u00e7inde taray\u0131c\u0131n\u0131za geri g\u00f6nderir. Bu yan\u0131t, genellikle bir durum kodu (\u00f6rne\u011fin, 200 OK ba\u015far\u0131y\u0131 belirtir, 404 Not Found ise sayfan\u0131n bulunamad\u0131\u011f\u0131n\u0131 g\u00f6sterir) ve istenen i\u00e7eri\u011fi (HTML kodu, CSS stilleri, JavaScript dosyalar\u0131, g\u00f6rseller) i\u00e7erir.<\/p>\n
4. Taray\u0131c\u0131n\u0131n Sayfay\u0131 Olu\u015fturmas\u0131 (Rendering):<\/strong> Taray\u0131c\u0131n\u0131z sunucudan gelen HTML, CSS ve JavaScript dosyalar\u0131n\u0131 ald\u0131\u011f\u0131nda, bu kodlar\u0131 yorumlamaya ba\u015flar. \u00d6ncelikle HTML’i ayr\u0131\u015ft\u0131rarak sayfan\u0131n temel yap\u0131s\u0131n\u0131 (DOM – Document Object Model) olu\u015fturur. Ard\u0131ndan CSS kurallar\u0131n\u0131 uygulayarak sayfan\u0131n g\u00f6rsel stilini belirler (renkler, yaz\u0131 tipleri, d\u00fczen). Son olarak, JavaScript kodlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak sayfaya etkile\u015fim ve dinamik \u00f6zellikler ekler (animasyonlar, form do\u011frulamalar\u0131, i\u00e7erik g\u00fcncellemeleri). Bu ad\u0131mlar\u0131n sonunda, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz, t\u0131klayabildi\u011finiz, okuyabildi\u011finiz web sayfas\u0131 ekran\u0131n\u0131zda belirir.<\/p>\n
Vaka Analizi: Bir E-ticaret Sitesine Eri\u015fim<\/strong><\/p>\n
Diyelim ki bir e-ticaret sitesinden ayakkab\u0131 sat\u0131n almak istiyorsunuz. Taray\u0131c\u0131n\u0131za “www.ayakkabidunyasi.com” yaz\u0131p Enter tu\u015funa basars\u0131n\u0131z:<\/p>\n
\n
Taray\u0131c\u0131n\u0131z, ayakkabidunyasi.com<\/code> i\u00e7in bir DNS sorgusu yapar ve sitenin IP adresini (\u00f6rne\u011fin, 198.51.100.10<\/code>) \u00f6\u011frenir.<\/li>\n
Taray\u0131c\u0131n\u0131z, bu IP adresine sahip web sunucusuna bir HTTPS iste\u011fi g\u00f6nderir ve ana sayfan\u0131n HTML, CSS, JavaScript ve g\u00f6rsel dosyalar\u0131n\u0131 ister.<\/li>\n
Web sunucusu, iste\u011fi al\u0131r, istenen dosyalar\u0131 (\u00fcr\u00fcn listeleri, indirim bannerlar\u0131, al\u0131\u015fveri\u015f sepeti bilgileri vb.) toplar ve bir HTTPS yan\u0131t\u0131 olarak taray\u0131c\u0131n\u0131za g\u00f6nderir.<\/li>\n
Taray\u0131c\u0131n\u0131z bu dosyalar\u0131 al\u0131r almaz, HTML’i i\u015fleyerek sayfan\u0131n yap\u0131s\u0131n\u0131 kurar, CSS’i uygulayarak \u00fcr\u00fcn resimlerini, fiyatlar\u0131 ve d\u00fc\u011fmeleri do\u011fru \u015fekilde hizalar ve renklendirir. JavaScript kodlar\u0131 ise “sepete ekle” d\u00fc\u011fmesinin \u00e7al\u0131\u015fmas\u0131n\u0131 veya bir \u00fcr\u00fcn\u00fcn \u00fczerine gelindi\u011finde detaylar\u0131n g\u00f6sterilmesini sa\u011flar.<\/li>\n
Saniyeler i\u00e7inde, g\u00f6z\u00fcn\u00fcz\u00fcn \u00f6n\u00fcnde rengarenk ayakkab\u0131larla dolu, etkile\u015fimli bir e-ticaret sitesi belirir.<\/li>\n<\/ol>\nBu s\u00fcre\u00e7, arka planda h\u0131zla ve kusursuzca i\u015fledi\u011fi i\u00e7in biz kullan\u0131c\u0131lar genellikle fark\u0131nda olmay\u0131z. Ancak bu ad\u0131mlar\u0131n her biri, web’in g\u00fcvenli ve verimli bir \u015fekilde \u00e7al\u0131\u015fabilmesi i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n Web Geli\u015ftirmenin Temel Ta\u015flar\u0131 Nelerdir? Web Siteleri Nas\u0131l Olu\u015fturulur?<\/h2>\nBir web sayfas\u0131n\u0131n taray\u0131c\u0131n\u0131za nas\u0131l ula\u015ft\u0131\u011f\u0131n\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi de bu web sayfalar\u0131n\u0131 olu\u015fturan temel teknolojilere odaklanal\u0131m. Bir web sitesi in\u015fa etmek, t\u0131pk\u0131 bir bina yapmak gibidir. \u00d6nce iskeleti kurar\u0131z, sonra d\u0131\u015f\u0131n\u0131 g\u00fczelle\u015ftiririz ve son olarak elektrik, su gibi i\u015flevsel sistemleri d\u00f6\u015feriz. Web geli\u015ftirme d\u00fcnyas\u0131nda bu iskelet, g\u00fczelle\u015ftirme ve i\u015flevsellikten sorumlu \u00fc\u00e7 temel dil vard\u0131r: HTML, CSS ve JavaScript.<\/p>\n HTML: Web’in \u0130skeleti Nas\u0131l Olu\u015fturulur?<\/h3>\nHTML (HyperText Markup Language)<\/strong>, bir web sayfas\u0131n\u0131n iskeletini olu\u015fturan temel i\u015faretleme dilidir. HTML, taray\u0131c\u0131lara bir sayfan\u0131n yap\u0131s\u0131n\u0131, i\u00e7eri\u011fini ve bu i\u00e7eri\u011fin hiyerar\u015fisini anlat\u0131r. Metinler, ba\u015fl\u0131klar, paragraflar, resimler, ba\u011flant\u0131lar, listeler ve tablolar gibi t\u00fcm i\u00e7erik elemanlar\u0131 HTML etiketleri kullan\u0131larak tan\u0131mlan\u0131r. HTML, web sayfas\u0131n\u0131n “ne” oldu\u011funu tan\u0131mlarken, “nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc” tan\u0131mlamaz; bu g\u00f6rev CSS’e aittir. Her web sayfas\u0131n\u0131n ba\u015flang\u0131\u00e7 noktas\u0131 bir HTML belgesidir.<\/p>\n Basit bir HTML yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcn\u00fcr:<\/p>\n \n\n\n\n \n \n \u0130lk Web Sayfam<\/title>\n<\/head>\n<body>\n <h1>Merhaba D\u00fcnya!<\/h1>\n <p>Bu benim ilk paragraf\u0131m.<\/p>\n <a href=\"https:\/\/www.google.com\">Google'a Git<\/a>\n <img decoding=\"async\" src=\"resim.jpg\" alt=\"A\u00e7\u0131klay\u0131c\u0131 Resim\">\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod blo\u011funda, <code><\/p>\n<h1><\/code> bir ana ba\u015fl\u0131\u011f\u0131, <code><\/p>\n<p><\/code> bir paragraf\u0131, <code><a><\/code> bir ba\u011flant\u0131y\u0131 ve <code><img><\/code> bir resmi temsil eder. Her etiket, i\u00e7eri\u011fi belirli bir anlamsal anlamla i\u015faretler.<\/p>\n<h3>CSS: Web Sayfalar\u0131 Nas\u0131l G\u00fczelle\u015ftirilir?<\/h3>\n<p><strong>CSS (Cascading Style Sheets)<\/strong>, HTML ile olu\u015fturulan iskeletin g\u00f6rsel tasar\u0131m\u0131n\u0131 ve stilini belirlemek i\u00e7in kullan\u0131lan bir stil sayfas\u0131 dilidir. HTML \"ne\" ise, CSS \"nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc\" belirler. Renkler, yaz\u0131 tipleri, boyutlar, bo\u015fluklar, hizalamalar, arka planlar ve animasyonlar gibi t\u00fcm g\u00f6rsel \u00f6zellikler CSS ile tan\u0131mlan\u0131r. CSS sayesinde, ayn\u0131 HTML yap\u0131s\u0131n\u0131 kullanarak tamamen farkl\u0131 g\u00f6r\u00fcn\u00fcmlere sahip web siteleri olu\u015fturabiliriz. Bu, tasar\u0131mc\u0131lara b\u00fcy\u00fck bir esneklik sa\u011flar.<\/p>\n<p>Yukar\u0131daki HTML'e stil eklemek i\u00e7in basit bir CSS \u00f6rne\u011fi:<\/p>\n<pre><code>\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n color: #333;\n margin: 20px;\n}\n\nh1 {\n color: #0056b3;\n text-align: center;\n}\n\np {\n line-height: 1.6;\n}\n\na {\n color: #007bff;\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu CSS kurallar\u0131, sayfan\u0131n genel yaz\u0131 tipini, arka plan rengini, ba\u015fl\u0131k rengini ve ba\u011flant\u0131 stilini belirler. Bu sayede sayfa daha estetik ve kullan\u0131c\u0131 dostu bir g\u00f6r\u00fcn\u00fcme kavu\u015fur.<\/p>\n<h3>JavaScript: Web Sayfalar\u0131na Hayat Vermek \u0130\u00e7in Ne Gerekir?<\/h3>\n<p><strong>JavaScript<\/strong>, web sayfalar\u0131na etkile\u015fim ve dinamizm katmak i\u00e7in kullan\u0131lan bir programlama dilidir. HTML ve CSS dura\u011fan i\u00e7erikler olu\u015ftururken, JavaScript bu i\u00e7eri\u011fi hareketli ve kullan\u0131c\u0131 ile etkile\u015fimli hale getirir. JavaScript ile men\u00fcler a\u00e7\u0131p kapatabilir, form verilerini do\u011frulayabilir, dinamik i\u00e7erik y\u00fckleyebilir, animasyonlar olu\u015fturabilir ve hatta taray\u0131c\u0131 tabanl\u0131 oyunlar geli\u015ftirebiliriz. Web'i g\u00fcn\u00fcm\u00fczdeki zengin ve interaktif deneyim haline getiren anahtar teknolojidir.<\/p>\n<p>Bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda mesaj g\u00f6steren basit bir JavaScript \u00f6rne\u011fi:<\/p>\n<pre><code>\n<button onclick=\"gosterMesaj()\">Mesaj G\u00f6ster<\/button>\n\n<script>\nfunction gosterMesaj() {\n alert(\"Merhaba! JavaScript \u00e7al\u0131\u015f\u0131yor!\");\n}\n<\/script>\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, \"Mesaj G\u00f6ster\" d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda <code>gosterMesaj()<\/code> fonksiyonu \u00e7al\u0131\u015f\u0131r ve ekranda bir uyar\u0131 penceresi (alert) belirir. Bu, JavaScript'in bir web sayfas\u0131na nas\u0131l etkile\u015fim katt\u0131\u011f\u0131n\u0131n en temel \u00f6rne\u011fidir. Modern web geli\u015ftirmede, JavaScript \u00e7ok daha karma\u015f\u0131k uygulamalar ve tek sayfal\u0131k uygulamalar (SPA'lar) olu\u015fturmak i\u00e7in React, Angular, Vue.js gibi k\u00fct\u00fcphane ve framework'lerle birlikte kullan\u0131l\u0131r. Bu \u00fc\u00e7 dilin birle\u015fimi, g\u00fcn\u00fcm\u00fcz\u00fcn zengin ve dinamik web deneyimlerini m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<h2>Web G\u00fcvenli\u011fi ve Performans Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n<p>Bir web sitesinin sadece g\u00fczel g\u00f6r\u00fcnmesi veya i\u015flevsel olmas\u0131 yeterli de\u011fildir. Ayn\u0131 zamanda g\u00fcvenli ve h\u0131zl\u0131 olmas\u0131 da kritik \u00f6neme sahiptir. Kullan\u0131c\u0131lar, verilerinin g\u00fcvende oldu\u011fundan emin olmak isterken, yava\u015f y\u00fcklenen bir site ziyaret\u00e7ileri ka\u00e7\u0131rabilir. Bu b\u00f6l\u00fcmde, web g\u00fcvenli\u011finin temel direklerinden olan HTTPS ve SSL sertifikalar\u0131n\u0131 ve web sitesi performans\u0131n\u0131 art\u0131rmak i\u00e7in kullanabilece\u011fimiz y\u00f6ntemleri inceleyece\u011fiz.<\/p>\n<h3>HTTPS ve SSL Sertifikalar\u0131 Neden \u00d6nemli?<\/h3>\n<p>\u0130nternet \u00fczerindeki bilgi al\u0131\u015fveri\u015finin g\u00fcvenli\u011fini sa\u011flamak, hem kullan\u0131c\u0131lar hem de web sitesi sahipleri i\u00e7in birincil \u00f6nceliktir. \u0130\u015fte bu noktada <strong>HTTPS (Hypertext Transfer Protocol Secure)<\/strong> ve <strong>SSL\/TLS Sertifikalar\u0131<\/strong> devreye girer. Daha \u00f6nce bahsetti\u011fimiz HTTP, veriyi a\u00e7\u0131k metin olarak g\u00f6nderir; bu da k\u00f6t\u00fc niyetli ki\u015filerin bu veriyi kolayca ele ge\u00e7irmesine ve okumas\u0131na olanak tan\u0131r. \u00d6zellikle \u015fifreler, kredi kart\u0131 bilgileri veya ki\u015fisel veriler gibi hassas bilgilerin aktar\u0131m\u0131 i\u00e7in bu durum b\u00fcy\u00fck bir g\u00fcvenlik riskidir.<\/p>\n<p>HTTPS, HTTP'nin \u015fifrelenmi\u015f halidir. Bir web sitesi HTTPS kulland\u0131\u011f\u0131nda, taray\u0131c\u0131n\u0131z ile web sunucusu aras\u0131ndaki t\u00fcm ileti\u015fim <strong>SSL (Secure Sockets Layer)<\/strong> veya daha g\u00fcncel ad\u0131yla <strong>TLS (Transport Layer Security)<\/strong> protokolleri arac\u0131l\u0131\u011f\u0131yla \u015fifrelenir. Bu \u015fifreleme, verilerin \u00fc\u00e7\u00fcnc\u00fc taraflarca okunmas\u0131n\u0131, de\u011fi\u015ftirilmesini veya \u00e7al\u0131nmas\u0131n\u0131 engeller. HTTPS kullanan sitelerin adres \u00e7ubu\u011funda genellikle bir kilit simgesi veya \"G\u00fcvenli\" yaz\u0131s\u0131 bulunur. Bu, kullan\u0131c\u0131lara sitenin g\u00fcvenli oldu\u011funu ve verilerinin korundu\u011funu g\u00f6sterir.<\/p>\n<p>Bir web sitesinin HTTPS kullanabilmesi i\u00e7in bir SSL\/TLS sertifikas\u0131na sahip olmas\u0131 gerekir. Bu sertifika, bir sertifika yetkilisi (CA) taraf\u0131ndan verilir ve web sitesinin kimli\u011fini do\u011frular. Taray\u0131c\u0131, bu sertifikay\u0131 kontrol ederek sunucunun ger\u00e7ekten iddia etti\u011fi sunucu olup olmad\u0131\u011f\u0131n\u0131 anlar. Bir web sitesi sahibi olarak SSL sertifikas\u0131 edinmek, kullan\u0131c\u0131 g\u00fcvenli\u011fini sa\u011flaman\u0131n yan\u0131 s\u0131ra SEO a\u00e7\u0131s\u0131ndan da \u00f6nemlidir, \u00e7\u00fcnk\u00fc arama motorlar\u0131 g\u00fcvenli siteleri daha \u00fcst s\u0131ralarda listeleme e\u011filimindedir.<\/p>\n<h3>Web Sitesi Performans\u0131n\u0131 Art\u0131rmak \u0130\u00e7in Hangi Y\u00f6ntemler Kullan\u0131l\u0131r?<\/h3>\n<p>H\u0131zl\u0131 y\u00fcklenen bir web sitesi, kullan\u0131c\u0131 deneyimi, arama motoru s\u0131ralamas\u0131 ve genel ba\u015far\u0131 i\u00e7in hayati \u00f6neme sahiptir. Kullan\u0131c\u0131lar yava\u015f siteleri terk etme e\u011filimindedir. Peki, bir web sitesinin performans\u0131n\u0131 art\u0131rmak i\u00e7in neler yap\u0131labilir?<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Web sitelerinin b\u00fcy\u00fck \u00e7o\u011funlu\u011funun y\u00fcklenme s\u00fcresinin temel nedeni g\u00f6rsellerdir. G\u00f6rselleri s\u0131k\u0131\u015ft\u0131rarak (kaliteden \u00f6d\u00fcn vermeden boyutunu k\u00fc\u00e7\u00fclterek), do\u011fru formatlarda (JPEG, PNG, WebP) kullanarak ve uygun boyutlarda sunarak y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabiliriz. \"Lazy loading\" (tembel y\u00fckleme) tekni\u011fi ile sadece ekranda g\u00f6r\u00fcnen g\u00f6rselleri y\u00fcklemek de performans\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>\u00d6nbellekleme (Caching):<\/strong> Web sitesinin baz\u0131 b\u00f6l\u00fcmleri (HTML, CSS, JavaScript dosyalar\u0131, g\u00f6rseller) sunucudan her seferinde yeniden \u00e7ekilmek yerine kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda veya ara sunucularda ge\u00e7ici olarak saklanabilir. Bu sayede, kullan\u0131c\u0131 ayn\u0131 siteyi tekrar ziyaret etti\u011finde, bu dosyalar daha h\u0131zl\u0131 bir \u015fekilde y\u00fcklenir.<\/li>\n<li><strong>CDN (Content Delivery Network) Kullan\u0131m\u0131:<\/strong> CDN'ler, web sitesi i\u00e7eri\u011fini (g\u00f6rseller, videolar, statik dosyalar) d\u00fcnyan\u0131n farkl\u0131 co\u011frafi b\u00f6lgelerindeki sunucularda (edge servers) kopyalayarak saklayan a\u011flard\u0131r. Bir kullan\u0131c\u0131 web sitesine eri\u015fmek istedi\u011finde, i\u00e7erik ona en yak\u0131n CDN sunucusundan teslim edilir. Bu, verinin daha az yol katetmesini sa\u011flayarak y\u00fckleme h\u0131z\u0131n\u0131 dramatik \u015fekilde art\u0131r\u0131r. \u00d6zellikle global kitleye hitap eden siteler i\u00e7in vazge\u00e7ilmezdir.<\/li>\n<li><strong>Kod Minifikasyonu ve S\u0131k\u0131\u015ft\u0131rma:<\/strong> HTML, CSS ve JavaScript dosyalar\u0131ndaki gereksiz bo\u015fluklar\u0131, yorumlar\u0131 ve sat\u0131r sonlar\u0131n\u0131 kald\u0131rarak (minifikasyon) ve bu dosyalar\u0131 s\u0131k\u0131\u015ft\u0131rarak (Gzip gibi algoritmalarla) boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek, sunucudan taray\u0131c\u0131ya aktar\u0131lma s\u00fcrelerini k\u0131salt\u0131r.<\/li>\n<\/ul>\n<p><strong>Vaka Analizi: Bir Haber Sitesinin Yava\u015f Y\u00fcklenmesi ve \u0130yile\u015ftirilmesi<\/strong><\/p>\n<p>Pop\u00fcler bir haber sitesinin, \u00f6zellikle yo\u011fun haber anlar\u0131nda \u00e7ok yava\u015f y\u00fcklendi\u011fini fark ettiniz. Siteye giren ziyaret\u00e7ilerin b\u00fcy\u00fck bir k\u0131sm\u0131, haberin a\u00e7\u0131lmas\u0131n\u0131 beklemeden siteyi terk ediyordu. Yap\u0131lan analizler sonucunda \u015fu sorunlar tespit edildi:<\/p>\n<ul>\n<li>Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve optimize edilmemi\u015f g\u00f6rseller, haber makalelerini a\u015f\u0131r\u0131 derecede b\u00fcy\u00fct\u00fcyor.<\/li>\n<li>Siteye her giri\u015fte t\u00fcm CSS ve JavaScript dosyalar\u0131 yeniden indiriliyor, \u00f6nbellekleme d\u00fczg\u00fcn \u00e7al\u0131\u015fm\u0131yor.<\/li>\n<li>D\u00fcnya genelinden gelen okuyucular i\u00e7in i\u00e7erik tek bir sunucudan servis ediliyor, bu da uzak b\u00f6lgelerdeki kullan\u0131c\u0131lar i\u00e7in gecikmelere yol a\u00e7\u0131yor.<\/li>\n<\/ul>\n<p>\u00c7\u00f6z\u00fcm olarak a\u015fa\u011f\u0131daki ad\u0131mlar uyguland\u0131:<\/p>\n<ul>\n<li>T\u00fcm g\u00f6rseller, yay\u0131n \u00f6ncesinde otomatik bir optimizasyon arac\u0131ndan ge\u00e7irildi ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc. Ayr\u0131ca \"lazy loading\" uyguland\u0131.<\/li>\n<li>Taray\u0131c\u0131 \u00f6nbellekleme politikalar\u0131 (HTTP Cache-Control ba\u015fl\u0131klar\u0131) do\u011fru \u015fekilde yap\u0131land\u0131r\u0131larak statik dosyalar\u0131n belirli bir s\u00fcre boyunca kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131nda saklanmas\u0131 sa\u011fland\u0131.<\/li>\n<li>Bir CDN servisi kullan\u0131ma al\u0131nd\u0131. B\u00f6ylece haber i\u00e7eri\u011fi, kullan\u0131c\u0131lara co\u011frafi olarak en yak\u0131n sunucudan servis edilmeye ba\u015fland\u0131.<\/li>\n<li>CSS ve JavaScript dosyalar\u0131 minifiye edildi ve sunucu taraf\u0131nda Gzip s\u0131k\u0131\u015ft\u0131rmas\u0131 etkinle\u015ftirildi.<\/li>\n<\/ul>\n<p>Bu iyile\u015ftirmelerin sonucunda, haber sitesinin y\u00fckleme s\u00fcresi %60 oran\u0131nda azald\u0131. Ziyaret\u00e7i terk oranlar\u0131 d\u00fc\u015ft\u00fc, siteye ayr\u0131lan ortalama s\u00fcre artt\u0131 ve arama motorlar\u0131ndaki s\u0131ralamas\u0131 y\u00fckseldi. Performans optimizasyonu, bir web sitesinin ba\u015far\u0131s\u0131 i\u00e7in kesinlikle g\u00f6z ard\u0131 edilmemesi gereken bir yat\u0131r\u0131md\u0131r.<\/p>\n<h2>Modern Web Geli\u015ftirme ve \u0130leri D\u00fczey Kavramlar Nelerdir?<\/h2>\n<p>Web teknolojileri s\u00fcrekli evrim ge\u00e7irmekte ve yeni trendler ortaya \u00e7\u0131kmaktad\u0131r. Temel kavramlar\u0131 ve g\u00fcvenlik\/performans optimizasyonlar\u0131n\u0131 anlad\u0131ktan sonra, modern web geli\u015ftirmenin baz\u0131 ileri d\u00fczey kavramlar\u0131na ve \u00f6zellikle mobil uyumlu tasar\u0131m\u0131n neden vazge\u00e7ilmez oldu\u011funa de\u011finelim.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, sadece statik sayfalar sunmaktan \u00e7ok daha fazlas\u0131n\u0131 yap\u0131yor. Art\u0131k bankac\u0131l\u0131k uygulamalar\u0131ndan karma\u015f\u0131k sosyal medya platformlar\u0131na kadar her \u015fey web \u00fczerinde \u00e7al\u0131\u015f\u0131yor. Bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in <strong>API'ler (Application Programming Interfaces)<\/strong> ve mikroservisler gibi kavramlar \u00f6n plana \u00e7\u0131km\u0131\u015ft\u0131r. API'ler, farkl\u0131 yaz\u0131l\u0131m bile\u015fenlerinin veya uygulamalar\u0131n birbirleriyle g\u00fcvenli ve standart bir \u015fekilde ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan kurallar ve protokoller b\u00fct\u00fcn\u00fcd\u00fcr. \u00d6rne\u011fin, bir hava durumu uygulamas\u0131 kendi hava durumu verilerini toplamak yerine, bir hava durumu sa\u011flay\u0131c\u0131s\u0131n\u0131n API'sini kullanarak anl\u0131k verilere eri\u015febilir. Mikroservisler ise, b\u00fcy\u00fck bir uygulamay\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve birbirleriyle API'ler arac\u0131l\u0131\u011f\u0131yla ileti\u015fim kuran servisler olarak tasarlama yakla\u015f\u0131m\u0131d\u0131r. Bu, uygulamalar\u0131n daha esnek, bak\u0131m\u0131 daha kolay ve \u00f6l\u00e7eklenebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Ayr\u0131ca, web geli\u015ftiricileri art\u0131k sadece HTML, CSS ve JavaScript yazmaktan ziyade, bu dillerin \u00fczerine in\u015fa edilmi\u015f g\u00fc\u00e7l\u00fc \u00e7er\u00e7eveler ve k\u00fct\u00fcphaneler (\u00f6rne\u011fin, React, Angular, Vue.js gibi front-end \u00e7er\u00e7eveleri veya Node.js ile Express, Python ile Django\/Flask gibi back-end \u00e7er\u00e7eveleri) kullanarak daha h\u0131zl\u0131 ve verimli uygulamalar geli\u015ftirmektedir. Bu ara\u00e7lar, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, kod tekrar\u0131n\u0131 azalt\u0131r ve daha karma\u015f\u0131k etkile\u015fimlerin kolayca hayata ge\u00e7irilmesini sa\u011flar.<\/p>\n<h3>Mobil Uyumlu Tasar\u0131m (Responsive Design) Neden \u015eartt\u0131r?<\/h3>\n<p>G\u00fcn\u00fcm\u00fczde internet trafi\u011finin b\u00fcy\u00fck bir k\u0131sm\u0131 mobil cihazlardan gelmektedir. Ak\u0131ll\u0131 telefonlar ve tabletler, art\u0131k web'e eri\u015fimin birincil yolu haline gelmi\u015ftir. Bu nedenle, bir web sitesinin farkl\u0131 ekran boyutlar\u0131na ve cihazlara otomatik olarak uyum sa\u011flayabilmesi, yani <strong>Mobil Uyumlu Tasar\u0131m (Responsive Design)<\/strong> olmas\u0131 mutlak bir gerekliliktir. Responsive tasar\u0131m, web sitesinin d\u00fczeninin, g\u00f6rsellerinin ve metinlerinin, kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n ekran boyutuna g\u00f6re dinamik olarak ayarlanmas\u0131n\u0131 sa\u011flar. B\u00f6ylece kullan\u0131c\u0131lar, ister b\u00fcy\u00fck bir masa\u00fcst\u00fc ekran\u0131nda ister k\u00fc\u00e7\u00fck bir ak\u0131ll\u0131 telefon ekran\u0131nda olsun, tutarl\u0131 ve optimize edilmi\u015f bir kullan\u0131c\u0131 deneyimi ya\u015farlar.<\/p>\n<p>Mobil uyumlu tasar\u0131m\u0131n temel prensipleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Esnek Izgaralar (Flexible Grids):<\/strong> Sayfa d\u00fczeni, sabit piksel de\u011ferleri yerine y\u00fczde de\u011ferleri veya esnek birimler kullan\u0131larak olu\u015fturulur.<\/li>\n<li><strong>Esnek G\u00f6rseller (Flexible Images):<\/strong> G\u00f6rsellerin geni\u015flikleri ekran boyutuna g\u00f6re otomatik olarak ayarlan\u0131r (genellikle <code>max-width: 100%;<\/code> ile).<\/li>\n<li><strong>Medya Sorgular\u0131 (Media Queries):<\/strong> CSS'in \u00f6zel bir \u00f6zelli\u011fidir. Belirli ekran geni\u015flikleri veya cihaz \u00f6zellikleri i\u00e7in farkl\u0131 stil kurallar\u0131 tan\u0131mlamam\u0131z\u0131 sa\u011flar. Bu sayede, \u00f6rne\u011fin bir telefon ekran\u0131nda farkl\u0131 bir men\u00fc d\u00fczeni, tablet ekran\u0131nda farkl\u0131 bir s\u00fctun d\u00fczeni uygulanabilir.<\/li>\n<\/ul>\n<p>A\u015fa\u011f\u0131da, mobil uyumlu bir tasar\u0131m i\u00e7in gerekli temel meta etiketi ve basit bir medya sorgusu \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n<pre><code>\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n\n<style>\n\/* Varsay\u0131lan stil - geni\u015f ekranlar i\u00e7in *\/\nbody {\n font-size: 18px;\n padding: 20px;\n}\n\n.container {\n width: 960px;\n margin: 0 auto;\n}\n\n\/* Medya sorgusu: Ekran geni\u015fli\u011fi 768px veya daha k\u00fc\u00e7\u00fck oldu\u011funda uygulanacak stiller *\/\n@media screen and (max-width: 768px) {\n body {\n font-size: 16px;\n padding: 10px;\n }\n .container {\n width: 100%; \/* Konteyner tam geni\u015fli\u011fi kaplas\u0131n *\/\n padding: 0 10px;\n }\n h2 {\n font-size: 24px;\n }\n}\n\n\/* Medya sorgusu: Ekran geni\u015fli\u011fi 480px veya daha k\u00fc\u00e7\u00fck oldu\u011funda uygulanacak stiller (daha k\u00fc\u00e7\u00fck telefonlar) *\/\n@media screen and (max-width: 480px) {\n body {\n font-size: 14px;\n }\n h2 {\n font-size: 20px;\n }\n .main-navigation ul {\n flex-direction: column; \/* Mobil men\u00fcy\u00fc dikey yap *\/\n }\n}\n<\/style>\n <\/pre>\n<p><\/code><\/p>\n<p><code><meta name=\"viewport\"><\/code> etiketi, taray\u0131c\u0131ya sayfan\u0131n cihaz\u0131n ekran geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenmesini s\u00f6yler. CSS'teki <code>@media<\/code> kurallar\u0131 ise, belirli ekran boyutlar\u0131 i\u00e7in farkl\u0131 stil kurallar\u0131 tan\u0131mlayarak sayfan\u0131n farkl\u0131 cihazlarda otomatik olarak farkl\u0131 g\u00f6r\u00fcn\u00fcmler kazanmas\u0131n\u0131 sa\u011flar. Bu sayede, bir web sitesi hem masa\u00fcst\u00fcnde hem de mobilde kullan\u0131c\u0131 dostu bir deneyim sunabilir.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Mobil uyumlu tasar\u0131mda \"mobil \u00f6ncelikli\" (mobile-first) yakla\u015f\u0131m benimsemek, sitenizi daha performansl\u0131 ve y\u00f6netilebilir k\u0131lar. Yani, \u00f6ncelikle en k\u00fc\u00e7\u00fck ekranlar i\u00e7in temel stilleri yaz\u0131n, ard\u0131ndan medya sorgular\u0131 kullanarak daha b\u00fcy\u00fck ekranlar i\u00e7in ek stiller ekleyin. Bu, gereksiz CSS y\u00fcklemesini azalt\u0131r ve mobil cihazlar i\u00e7in daha h\u0131zl\u0131 bir deneyim sunar.\n <\/div>\n<h2>Dijital Evrendeki Yolculu\u011fumuz: \u00d6\u011frendiklerimizi \u00d6zetlemek<\/h2>\n<p>Bu kapsaml\u0131 makale boyunca, dijital d\u00fcnyan\u0131n temelini olu\u015fturan internet ve web kavramlar\u0131ndan ba\u015flayarak, bir web sayfas\u0131n\u0131n taray\u0131c\u0131n\u0131za ula\u015fma ser\u00fcvenini, web sitelerini olu\u015fturan HTML, CSS ve JavaScript gibi temel yap\u0131 ta\u015flar\u0131n\u0131 ve modern web geli\u015ftirmenin olmazsa olmazlar\u0131 olan g\u00fcvenlik, performans ve mobil uyumlu tasar\u0131m konular\u0131n\u0131 ad\u0131m ad\u0131m inceledik. \u0130nternet ve web'in sadece birer terimden ibaret olmad\u0131\u011f\u0131n\u0131, alt\u0131nda karma\u015f\u0131k ancak bir o kadar da mant\u0131kl\u0131 bir sistemin yatt\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fck.<\/p>\n<p>Art\u0131k, bir web adresini yazd\u0131\u011f\u0131n\u0131zda arka planda DNS sunucular\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, sunucunun size nas\u0131l yan\u0131t verdi\u011fini ve taray\u0131c\u0131n\u0131z\u0131n bu kodlar\u0131 nas\u0131l g\u00f6rsel bir \u015f\u00f6lene d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fc biliyorsunuz. Web'in iskeleti HTML, giysisi CSS ve beyni JavaScript sayesinde dinamik ve etkile\u015fimli deneyimler sundu\u011funu \u00f6\u011frendik. Dahas\u0131, veri g\u00fcvenli\u011finin HTTPS ile, h\u0131z\u0131n ise CDN'ler ve \u00f6nbellekleme ile sa\u011fland\u0131\u011f\u0131n\u0131, mobil cihazlar\u0131n web deneyimindeki artan \u00f6nemini ve responsive tasar\u0131m\u0131n bu konudaki rol\u00fcn\u00fc kavrad\u0131k. Bu bilgiler, sadece bir kullan\u0131c\u0131 olarak de\u011fil, ayn\u0131 zamanda potansiyel bir web geli\u015ftiricisi veya dijital i\u00e7erik \u00fcreticisi olarak da size g\u00fc\u00e7l\u00fc bir temel sunmaktad\u0131r.<\/p>\n<p>Dijitalle\u015fen d\u00fcnyada bu temel kavramlar\u0131 anlamak, sadece teknolojiye hakim olmakla kalmaz, ayn\u0131 zamanda \u00e7evrimi\u00e7i deneyimlerimizi daha bilin\u00e7li bir \u015fekilde y\u00f6netmemizi sa\u011flar. Bu bilgilerle donanarak, dijital evrende \u00e7ok daha g\u00fcvenli, verimli ve bilin\u00e7li bir yolculuk yapabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li>\n <strong>Web hosting nedir ve neden gereklidir?<\/strong><\/p>\n<p>Web hosting, bir web sitesinin dosyalar\u0131n\u0131 (HTML, CSS, g\u00f6rseller vb.) bar\u0131nd\u0131ran ve internet \u00fczerinden eri\u015filebilir hale getiren bir hizmettir. Bir web sitesinin yay\u0131nlanabilmesi i\u00e7in bu dosyalar\u0131n s\u00fcrekli olarak internete ba\u011fl\u0131 bir sunucuda tutulmas\u0131 gerekir. Hosting sa\u011flay\u0131c\u0131lar\u0131, bu sunucular\u0131 ve gerekli altyap\u0131y\u0131 sunarak web sitelerinin 7\/24 yay\u0131nda kalmas\u0131n\u0131 sa\u011flar.<\/p>\n<\/li>\n<li>\n <strong>URL ve URI aras\u0131ndaki fark nedir?<\/strong><\/p>\n<p>URI (Uniform Resource Identifier), bir kayna\u011f\u0131 tan\u0131mlayan genel bir etikettir (\u00f6rne\u011fin, bir web sayfas\u0131, bir kitap, bir ki\u015fi). URL (Uniform Resource Locator) ise, URI'nin bir alt k\u00fcmesidir ve kayna\u011f\u0131n internet \u00fczerindeki konumunu belirten, ayn\u0131 zamanda o kayna\u011fa nas\u0131l eri\u015filece\u011fini de g\u00f6steren bir adrestir. Yani her URL bir URI'dir, ancak her URI bir URL de\u011fildir.<\/p>\n<\/li>\n<li>\n <strong>Front-end ve Back-end geli\u015ftirme ne anlama gelir?<\/strong><\/p>\n<p>Front-end geli\u015ftirme, kullan\u0131c\u0131lar\u0131n do\u011frudan etkile\u015fimde bulundu\u011fu web sitesinin g\u00f6rsel ve etkile\u015fimli k\u0131sm\u0131n\u0131 olu\u015fturmakla ilgilenir (HTML, CSS, JavaScript). Back-end geli\u015ftirme ise, web sitesinin \"arka plan\u0131nda\" \u00e7al\u0131\u015fan, veritaban\u0131 y\u00f6netimi, sunucu mant\u0131\u011f\u0131, API'ler ve g\u00fcvenlik gibi kullan\u0131c\u0131ya do\u011frudan g\u00f6r\u00fcnmeyen k\u0131s\u0131mlar\u0131n\u0131 olu\u015fturur (\u00f6rne\u011fin Python, Node.js, PHP gibi dillerle).<\/p>\n<\/li>\n<li>\n <strong>Cookies (\u00c7erezler) ne i\u015fe yarar ve g\u00fcvenli midir?<\/strong><\/p>\n<p>\u00c7erezler, web sitelerinin kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131nda depolad\u0131\u011f\u0131 k\u00fc\u00e7\u00fck veri par\u00e7ac\u0131klar\u0131d\u0131r. Kullan\u0131c\u0131 tercihleri (dil, tema), oturum bilgileri (giri\u015f yapm\u0131\u015f kullan\u0131c\u0131lar) veya al\u0131\u015fveri\u015f sepeti i\u00e7eri\u011fi gibi bilgileri saklamak i\u00e7in kullan\u0131l\u0131rlar. Genellikle g\u00fcvenlidirler, ancak k\u00f6t\u00fc niyetli web siteleri veya yetersiz g\u00fcvenlik \u00f6nlemleri nedeniyle \u00e7erezler k\u00f6t\u00fcye kullan\u0131labilir. Modern taray\u0131c\u0131lar ve d\u00fczenlemeler (GDPR gibi), \u00e7erez kullan\u0131m\u0131 hakk\u0131nda daha fazla \u015feffafl\u0131k ve kullan\u0131c\u0131 kontrol\u00fc sa\u011flamaktad\u0131r.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-31497","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber<\/title>\n<meta name=\"description\" content=\"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-10T13:01:23+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-10T13:01:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\"},\"wordCount\":4629,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\",\"name\":\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-10T13:01:23+00:00\",\"description\":\"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","description":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","og_description":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.","og_url":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-10T13:01:23+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-10T13:01:23+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/"},"wordCount":4629,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/","name":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-10T13:01:23+00:00","description":"G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f durumda. Peki, her g\u00fcn kulland\u0131\u011f\u0131m\u0131z bu devasa a\u011f\u0131n ve \u00fczerinde gezindi\u011fimiz web sitelerinin asl\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Elektronik postalar\u0131m\u0131zdan sosyal medya platformlar\u0131na, online al\u0131\u015fveri\u015f sitelerinden bulut depolama servislerine kadar her \u015fey, belirli temel prensipler ve teknolojiler \u00fczerine kurulu. Bu makale, internet ve web'in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 en temelden ba\u015flayarak ad\u0131m ad\u0131m ke\u015ffetmenize yard\u0131mc\u0131 olacak, dijital d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralayan bir yol haritas\u0131 sunacak.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/web-ve-internet-temellerini-anlamak-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web ve \u0130nternet Temellerini Anlamak: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31497"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31497\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}