{"id":37777,"date":"2026-01-15T09:41:03","date_gmt":"2026-01-15T06:41:03","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37777"},"modified":"2026-01-15T09:41:03","modified_gmt":"2026-01-15T06:41:03","slug":"html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/","title":{"rendered":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber"},"content":{"rendered":"

HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber<\/h2>\n

Bir web sitesi projesine ba\u015flamak, heyecan verici ve yarat\u0131c\u0131 bir s\u00fcre\u00e7tir. Ancak, bu s\u00fcrecin ilk ad\u0131m\u0131 olan proje kurulumu, \u00e7o\u011fu zaman g\u00f6z ard\u0131 edilen veya hafife al\u0131nan kritik bir a\u015famad\u0131r. Do\u011fru bir ba\u015flang\u0131\u00e7 yapmak, projenizin gelecekteki \u00f6l\u00e7eklenebilirli\u011fini, y\u00f6netilebilirli\u011fini ve genel ba\u015far\u0131s\u0131n\u0131 do\u011frudan etkiler. Bu rehberde, s\u0131f\u0131rdan bir HTML web sitesi projesini nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, hangi ara\u00e7lara ihtiyac\u0131n\u0131z olaca\u011f\u0131n\u0131 ve en iyi uygulamalar\u0131 takip ederek sa\u011flam bir temel olu\u015fturman\u0131n yollar\u0131n\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alaca\u011f\u0131z. \u0130ster ilk web sitenizi yap\u0131yor olun ister mevcut bilginizi tazelemek isteyin, bu kapsaml\u0131 rehber size yol g\u00f6sterecektir.<\/p>\n

Temel Kavramlar ve \u00d6n Haz\u0131rl\u0131k<\/h3>\n

Web sitesi projenize ba\u015flamadan \u00f6nce, baz\u0131 temel kavramlar\u0131 anlamak ve gerekli ara\u00e7lar\u0131 haz\u0131rlamak \u00f6nemlidir. Bu \u00f6n haz\u0131rl\u0131k, geli\u015ftirme s\u00fcrecinizin daha sorunsuz ve verimli olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n

Web Sitesi Nedir?<\/h4>\n

En basit tan\u0131m\u0131yla, bir web sitesi, internet \u00fczerinden eri\u015filebilen ve bir dizi web sayfas\u0131ndan olu\u015fan bir koleksiyondur. Bu sayfalar genellikle HTML (HyperText Markup Language) ile yap\u0131land\u0131r\u0131l\u0131r, CSS (Cascading Style Sheets) ile g\u00f6rsel olarak bi\u00e7imlendirilir ve JavaScript ile etkile\u015fimli hale getirilir.<\/p>\n

* HTML:<\/strong> Bir web sayfas\u0131n\u0131n iskeletini olu\u015fturur. Ba\u015fl\u0131klar, paragraflar, g\u00f6rseller, ba\u011flant\u0131lar gibi t\u00fcm i\u00e7erik elemanlar\u0131 HTML etiketleri kullan\u0131larak tan\u0131mlan\u0131r.
\n* CSS:<\/strong> Web sayfas\u0131n\u0131n stilini belirler. Renkler, yaz\u0131 tipleri, d\u00fczen (layout), bo\u015fluklar gibi g\u00f6rsel \u00f6zellikler CSS kurallar\u0131 ile kontrol edilir.
\n* JavaScript:<\/strong> Web sayfas\u0131na dinamiklik ve etkile\u015fim katar. Form do\u011frulama, animasyonlar, kullan\u0131c\u0131 etkile\u015fimine tepki veren \u00f6\u011feler gibi i\u015flevler JavaScript ile ger\u00e7ekle\u015ftirilir.<\/p>\n

Bu \u00fc\u00e7 teknoloji, “front-end” veya “istemci taraf\u0131” olarak adland\u0131r\u0131lan ve kullan\u0131c\u0131lar\u0131n do\u011frudan etkile\u015fimde bulundu\u011fu web sitesi b\u00f6l\u00fcm\u00fcn\u00fc olu\u015fturur. Sunucu taraf\u0131 (back-end) ise veritaban\u0131 i\u015flemleri, kullan\u0131c\u0131 kimlik do\u011frulama gibi daha karma\u015f\u0131k i\u015flevleri y\u00f6netir, ancak basit bir HTML projesi i\u00e7in genellikle do\u011frudan bir back-end’e ihtiya\u00e7 duyulmaz.<\/p>\n

Gerekli Ara\u00e7lar<\/h4>\n

Verimli bir web geli\u015ftirme deneyimi i\u00e7in do\u011fru ara\u00e7lara sahip olmak \u00e7ok \u00f6nemlidir. \u0130\u015fte ba\u015flang\u0131\u00e7 i\u00e7in ihtiyac\u0131n\u0131z olacak temel ara\u00e7lar:<\/p>\n

* Metin D\u00fczenleyici \/ Kod Edit\u00f6r\u00fc:<\/strong> Kod yazmak ve d\u00fczenlemek i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f bir yaz\u0131l\u0131md\u0131r. S\u0131radan bir not defterinden \u00e7ok daha fazlas\u0131n\u0131 sunar:
\n * VS Code (Visual Studio Code):<\/strong> Microsoft taraf\u0131ndan geli\u015ftirilen, \u00fccretsiz, a\u00e7\u0131k kaynakl\u0131 ve son derece pop\u00fcler bir kod edit\u00f6r\u00fcd\u00fcr. Geni\u015f eklenti deste\u011fi, entegre terminali ve g\u00fc\u00e7l\u00fc \u00f6zellikleri sayesinde web geli\u015ftiricileri i\u00e7in vazge\u00e7ilmezdir. Bu rehberde VS Code kullan\u0131m\u0131n\u0131 temel alaca\u011f\u0131z.
\n * Sublime Text:<\/strong> H\u0131zl\u0131, hafif ve g\u00fc\u00e7l\u00fc bir ba\u015fka pop\u00fcler se\u00e7enektir.
\n * Atom:<\/strong> GitHub taraf\u0131ndan geli\u015ftirilen, \u00f6zelle\u015ftirilebilir ve modern bir edit\u00f6rd\u00fcr.
\n Neden \u00d6nemli?<\/strong> Syntax vurgulama (kodun farkl\u0131 b\u00f6l\u00fcmlerini renklendirme), otomatik tamamlama, kod formatlama gibi \u00f6zellikler sayesinde hatalar\u0131 azalt\u0131r ve kod yazma h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131r.
\n* Web Taray\u0131c\u0131s\u0131:<\/strong> Yazd\u0131\u011f\u0131n\u0131z kodu g\u00f6r\u00fcnt\u00fclemek ve test etmek i\u00e7in bir web taray\u0131c\u0131s\u0131na ihtiyac\u0131n\u0131z olacak.
\n * Google Chrome:<\/strong> Geli\u015ftirici ara\u00e7lar\u0131 (Developer Tools) a\u00e7\u0131s\u0131ndan en zengin ve en s\u0131k kullan\u0131lan taray\u0131c\u0131lardan biridir.
\n * Mozilla Firefox:<\/strong> Chrome’a benzer \u015fekilde g\u00fc\u00e7l\u00fc geli\u015ftirici ara\u00e7lar\u0131na sahiptir ve iyi bir alternatiftir.
\n Neden \u00d6nemli?<\/strong> Taray\u0131c\u0131lar, yazd\u0131\u011f\u0131n\u0131z HTML, CSS ve JavaScript kodunu yorumlayarak g\u00f6rsel bir web sayfas\u0131 haline getirir. Geli\u015ftirici ara\u00e7lar\u0131, sayfan\u0131zdaki hatalar\u0131 ay\u0131klaman\u0131za, CSS kurallar\u0131n\u0131 anl\u0131k olarak de\u011fi\u015ftirerek test etmenize ve performans sorunlar\u0131n\u0131 tespit etmenize olanak tan\u0131r.
\n* Terminal \/ Komut \u0130stemi (Opsiyonel ama Faydal\u0131):<\/strong> Dosya ve dizin i\u015flemleri, s\u00fcr\u00fcm kontrol sistemleri (Git gibi) veya paket y\u00f6neticileri (npm gibi) ile etkile\u015fim kurmak i\u00e7in kullan\u0131l\u0131r.
\n * Windows:<\/strong> Komut \u0130stemi (CMD) veya PowerShell
\n * macOS \/ Linux:<\/strong> Terminal
\n Neden \u00d6nemli?<\/strong> Komut sat\u0131r\u0131 aray\u00fcz\u00fcn\u00fc kullanmak, belirli g\u00f6revleri otomatikle\u015ftirmek ve geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc bir yoldur.
\n* S\u00fcr\u00fcm Kontrol Sistemi (Git):<\/strong> Projenizdeki de\u011fi\u015fiklikleri takip etmek, farkl\u0131 s\u00fcr\u00fcmler aras\u0131nda ge\u00e7i\u015f yapmak ve ekip \u00fcyeleriyle i\u015fbirli\u011fi yapmak i\u00e7in kullan\u0131l\u0131r.
\n * Git:<\/strong> Da\u011f\u0131t\u0131k bir s\u00fcr\u00fcm kontrol sistemidir.
\n * GitHub \/ GitLab \/ Bitbucket:<\/strong> Git depolar\u0131n\u0131 bar\u0131nd\u0131rmak i\u00e7in kullan\u0131lan platformlard\u0131r.
\n Neden Kullanmal\u0131y\u0131z?<\/strong> Yanl\u0131\u015fl\u0131kla bir \u015feyi silseniz bile \u00f6nceki bir s\u00fcr\u00fcme geri d\u00f6nebilirsiniz. Ekip \u00e7al\u0131\u015fmas\u0131nda herkesin ayn\u0131 anda farkl\u0131 \u00f6zellikler \u00fczerinde \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r ve de\u011fi\u015fiklik \u00e7ak\u0131\u015fmalar\u0131n\u0131 y\u00f6netmeye yard\u0131mc\u0131 olur.<\/p>\n

Proje Yap\u0131s\u0131 Planlamas\u0131<\/h4>\n

\u0130yi bir proje yap\u0131s\u0131, projeniz b\u00fcy\u00fcd\u00fck\u00e7e d\u00fczeni koruman\u0131n anahtar\u0131d\u0131r. Ba\u015flang\u0131\u00e7tan itibaren mant\u0131kl\u0131 bir dizin (klas\u00f6r) yap\u0131s\u0131 olu\u015fturmak, dosyalar\u0131n\u0131z\u0131 kolayca bulman\u0131z\u0131 ve y\u00f6netmenizi sa\u011flar.<\/p>\n

* Ana Dizin (Root Folder):<\/strong> T\u00fcm projenizin bulundu\u011fu ana klas\u00f6rd\u00fcr. Projenizin ad\u0131n\u0131 ta\u015f\u0131mal\u0131d\u0131r (\u00f6rn. benim-web-sitem<\/code>).
\n* Alt Dizinler:<\/strong>
\n * css\/<\/code>: T\u00fcm CSS dosyalar\u0131n\u0131z\u0131 i\u00e7erir (\u00f6rn. style.css<\/code>, responsive.css<\/code>).
\n * js\/<\/code>: T\u00fcm JavaScript dosyalar\u0131n\u0131z\u0131 i\u00e7erir (\u00f6rn. script.js<\/code>, main.js<\/code>).
\n * img\/<\/code>: T\u00fcm g\u00f6rsellerinizi i\u00e7erir (\u00f6rn. logo.png<\/code>, banner.jpg<\/code>).
\n * pages\/<\/code> (\u0130ste\u011fe Ba\u011fl\u0131): E\u011fer projeniz \u00e7ok say\u0131da HTML sayfas\u0131 i\u00e7eriyorsa, bunlar\u0131 bu klas\u00f6r alt\u0131nda toplayabilirsiniz (\u00f6rn. pages\/hakkimizda.html<\/code>). Basit projeler i\u00e7in HTML dosyalar\u0131 genellikle ana dizinde bulunur.
\n * assets\/<\/code> (\u0130ste\u011fe Ba\u011fl\u0131): Fontlar, ikonlar, k\u00fc\u00e7\u00fck video dosyalar\u0131 gibi di\u011fer genel varl\u0131klar\u0131 bar\u0131nd\u0131rabilir.
\n* Dosya \u0130simlendirme Kurallar\u0131:<\/strong>
\n * K\u00fc\u00e7\u00fck harf kullan\u0131n:<\/strong> T\u00fcm dosya ve klas\u00f6r isimlerinde k\u00fc\u00e7\u00fck harf kullanmak iyi bir uygulamad\u0131r.
\n * Bo\u015fluk yerine tire kullan\u0131n:<\/strong> benim-resmim.jpg<\/code> yerine benim resmim.jpg<\/code> kullanmaktan ka\u00e7\u0131n\u0131n. Bo\u015fluklar URL’lerde sorunlara neden olabilir.
\n * Anlaml\u0131 isimler verin:<\/strong> resim1.jpg<\/code> yerine ana-sayfa-banner.jpg<\/code> gibi a\u00e7\u0131klay\u0131c\u0131 isimler kullan\u0131n.<\/p>\n

Proje Dizini Olu\u015fturma<\/h3>\n

\u015eimdi, planlad\u0131\u011f\u0131m\u0131z proje yap\u0131s\u0131n\u0131 somutla\u015ft\u0131rma zaman\u0131. \u0130lk olarak ana proje dizinimizi ve ard\u0131ndan gerekli alt dizinleri olu\u015fturaca\u011f\u0131z.<\/p>\n

Ana Dizin (Root Folder) Olu\u015fturma<\/h4>\n

Projenizin t\u00fcm dosyalar\u0131n\u0131 bar\u0131nd\u0131racak olan ana klas\u00f6r\u00fc olu\u015fturun. Bu klas\u00f6r, projenizin ad\u0131n\u0131 ta\u015f\u0131mal\u0131d\u0131r.<\/p>\n

* Grafik Aray\u00fcz Kullanarak (T\u00fcm \u0130\u015fletim Sistemleri):<\/strong>
\n 1. Bilgisayar\u0131n\u0131zda web projelerinizi saklamak istedi\u011finiz bir konuma gidin (\u00f6rn. Belgelerim, Masa\u00fcst\u00fc veya \u00f6zel bir “Web Projeleri” klas\u00f6r\u00fc).
\n 2. Sa\u011f t\u0131klay\u0131n, “Yeni” -> “Klas\u00f6r” se\u00e7ene\u011fini se\u00e7in.
\n 3. Klas\u00f6re anlaml\u0131 bir isim verin, \u00f6rne\u011fin: ilk-web-sitem<\/code> veya proje-adi<\/code>.
\n* Terminal \/ Komut \u0130stemi Kullanarak:<\/strong>
\n 1. Terminali (macOS\/Linux) veya Komut \u0130stemi\/PowerShell’i (Windows) a\u00e7\u0131n.
\n 2. cd<\/code> komutu ile projenizi olu\u015fturmak istedi\u011finiz dizine gidin. \u00d6rne\u011fin:<\/p>\n

cd Documents\/WebProjects<\/code><\/pre>\n
    3.  mkdir<\/code> komutu ile ana dizini olu\u015fturun:<\/p>\n
mkdir ilk-web-sitem<\/code><\/pre>\n
    4.  Yeni olu\u015fturdu\u011funuz dizine girin:<\/p>\n
cd ilk-web-sitem<\/code><\/pre>\n
    Bu ad\u0131mlardan sonra, ilk-web-sitem<\/code> ad\u0131nda bir klas\u00f6r\u00fcn\u00fcz olacak ve t\u00fcm projeniz bu klas\u00f6r\u00fcn i\u00e7inde yer alacak.<\/p>\n
Temel Alt Dizinleri Olu\u015fturma<\/h4>\n
Ana dizininizin i\u00e7ine, projenizin d\u00fczenini sa\u011flamak i\u00e7in gerekli alt dizinleri olu\u015fturun.<\/p>\n
*   Grafik Aray\u00fcz Kullanarak:<\/strong>
\n    1.  ilk-web-sitem<\/code> klas\u00f6r\u00fcn\u00fc a\u00e7\u0131n.
\n    2.  Klas\u00f6r i\u00e7inde sa\u011f t\u0131klay\u0131n, “Yeni” -> “Klas\u00f6r” se\u00e7ene\u011fini se\u00e7in ve s\u0131ras\u0131yla \u015fu klas\u00f6rleri olu\u015fturun:
\n        *   css<\/code>
\n        *   js<\/code>
\n        *   img<\/code>
\n*   Terminal \/ Komut \u0130stemi Kullanarak (Ana dizin i\u00e7indeyken):<\/strong><\/p>\n
mkdir css js img<\/code><\/pre>\n
    Bu komut, ilk-web-sitem<\/code> klas\u00f6r\u00fcn\u00fcn i\u00e7ine css<\/code>, js<\/code> ve img<\/code> ad\u0131nda \u00fc\u00e7 yeni klas\u00f6r olu\u015fturacakt\u0131r.<\/p>\n
\u015eu anda proje yap\u0131n\u0131z a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnmelidir:<\/p>\n
ilk-web-sitem\/\n\u251c\u2500\u2500 css\/\n\u251c\u2500\u2500 js\/\n\u2514\u2500\u2500 img\/<\/code><\/pre>\n
Bu yap\u0131, projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve karma\u015f\u0131kl\u0131\u011f\u0131na g\u00f6re geni\u015fletilebilir. \u00d6rne\u011fin, \u00e7ok say\u0131da HTML sayfan\u0131z varsa pages\/<\/code> klas\u00f6r\u00fc ekleyebilirsiniz.<\/p>\n
Temel HTML Dosyalar\u0131n\u0131 Olu\u015fturma<\/h3>\n
Proje dizinimizi olu\u015fturduktan sonra, web sitemizin temelini olu\u015fturan HTML dosyalar\u0131n\u0131 olu\u015fturmaya ba\u015flayabiliriz. Her web sitesinin bir giri\u015f noktas\u0131 vard\u0131r ve bu genellikle index.html<\/code> dosyas\u0131d\u0131r.<\/p>\n
index.html<\/code> Dosyas\u0131<\/h4>\n
index.html<\/code>, bir web sitesine taray\u0131c\u0131 \u00fczerinden eri\u015fildi\u011finde otomatik olarak y\u00fcklenen ana sayfad\u0131r. Bu dosya, projenizin ana dizininde (yani ilk-web-sitem\/<\/code> klas\u00f6r\u00fcn\u00fcn do\u011frudan i\u00e7inde) bulunmal\u0131d\u0131r.<\/p>\n
*   Dosyay\u0131 Olu\u015fturma:<\/strong>
\n    1.  VS Code’u a\u00e7\u0131n.
\n    2.  “Dosya” -> “Klas\u00f6r\u00fc A\u00e7…” se\u00e7ene\u011fini kullanarak ilk-web-sitem<\/code> klas\u00f6r\u00fcn\u00fcz\u00fc a\u00e7\u0131n.
\n    3.  VS Code’un sol kenar \u00e7ubu\u011fundaki gezgin (Explorer) b\u00f6l\u00fcm\u00fcnde ilk-web-sitem<\/code> klas\u00f6r\u00fcne sa\u011f t\u0131klay\u0131n ve “Yeni Dosya” se\u00e7ene\u011fini se\u00e7in.
\n    4.  Dosyaya index.html<\/code> ad\u0131n\u0131 verin ve Enter tu\u015funa bas\u0131n.
\n*   Temel HTML \u0130skeleti:<\/strong>
\n    index.html<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki temel HTML iskeletini yaz\u0131n. VS Code’da, bo\u015f bir HTML dosyas\u0131nda !<\/code> yaz\u0131p Tab tu\u015funa basarak bu iskeleti otomatik olarak olu\u015fturabilirsiniz (Emmet k\u0131sayolu).<\/p>\n
\n    \n    \n        \n        \n        \u0130lk Web Sitem<\/title>\n        <!-- CSS dosyam\u0131z\u0131 buraya ba\u011flayaca\u011f\u0131z -->\n        <link rel=\"stylesheet\" href=\"css\/style.css\">\n    <\/head>\n    <body>\n        <!-- Sayfa i\u00e7eri\u011fi buraya gelecek -->\n        \n        <p>Bu benim ilk HTML web sitem.<\/p>\n\n        <!-- JavaScript dosyam\u0131z\u0131 buraya ba\u011flayaca\u011f\u0131z -->\n        <script src=\"js\/script.js\"><\/script>\n    <\/body>\n    <\/html><\/code><\/pre>\n<p>    *   <strong><code><!DOCTYPE html><\/code>:<\/strong> Bu, belgenin HTML5 standard\u0131n\u0131 kulland\u0131\u011f\u0131n\u0131 taray\u0131c\u0131ya bildirir. Her HTML belgesinin en \u00fcst\u00fcnde yer almal\u0131d\u0131r.<br \/>\n    *   <strong><code><html lang=\"tr\"><\/code>:<\/strong> T\u00fcm HTML i\u00e7eri\u011fini saran k\u00f6k elementtir. <code>lang=\"tr\"<\/code> niteli\u011fi, sayfan\u0131n i\u00e7eri\u011finin T\u00fcrk\u00e7e oldu\u011funu belirtir, bu da arama motorlar\u0131 ve ekran okuyucular i\u00e7in faydal\u0131d\u0131r.<br \/>\n    *   <strong><code><head><\/code>:<\/strong> Sayfan\u0131n meta bilgilerini i\u00e7erir. Bu bilgiler taray\u0131c\u0131da do\u011frudan g\u00f6r\u00fcnmez ancak sayfan\u0131n nas\u0131l i\u015flenece\u011fi hakk\u0131nda \u00f6nemli bilgiler sa\u011flar.<br \/>\n        *   <code><meta charset=\"UTF-8\"><\/code>: Karakter kodlamas\u0131n\u0131 belirtir. T\u00fcrk\u00e7e karakterler de dahil olmak \u00fczere \u00e7o\u011fu karakterin do\u011fru g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in <code>UTF-8<\/code> kullanmak en iyisidir.<br \/>\n        *   <code><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>: Duyarl\u0131 (responsive) tasar\u0131m i\u00e7in \u00f6nemlidir. Sayfan\u0131n cihaz\u0131n geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenmesini sa\u011flar.<br \/>\n        *   <code><title>\u0130lk Web Sitem<\/title><\/code>: Taray\u0131c\u0131 sekmesinde veya pencere ba\u015fl\u0131\u011f\u0131nda g\u00f6r\u00fcnen sayfa ba\u015fl\u0131\u011f\u0131d\u0131r. Arama motoru optimizasyonu (SEO) i\u00e7in de \u00f6nemlidir.<br \/>\n        *   <code><link rel=\"stylesheet\" href=\"css\/style.css\"><\/code>: Bu etiket, CSS dosyam\u0131z\u0131 HTML belgemize ba\u011flar. <code>href<\/code> niteli\u011fi, CSS dosyas\u0131n\u0131n yolunu belirtir.<br \/>\n    *   <strong><code><body><\/code>:<\/strong> Web sayfas\u0131nda kullan\u0131c\u0131lar\u0131n g\u00f6rd\u00fc\u011f\u00fc t\u00fcm i\u00e7eri\u011fi (metin, g\u00f6rseller, ba\u011flant\u0131lar, videolar vb.) i\u00e7erir.<br \/>\n    *   <code><script src=\"js\/script.js\"><\/script><\/code>: Bu etiket, JavaScript dosyam\u0131z\u0131 HTML belgemize ba\u011flar. Genellikle <code><\/body><\/code> kapan\u0131\u015f etiketinden hemen \u00f6nce yerle\u015ftirilir, b\u00f6ylece HTML i\u00e7eri\u011fi y\u00fcklenmeden JavaScript \u00e7al\u0131\u015fmaya ba\u015flamaz ve DOM (Document Object Model) \u00fczerinde i\u015flem yapabilir.<\/p>\n<h4>Di\u011fer HTML Sayfalar\u0131<\/h4>\n<p>Web siteniz genellikle birden fazla sayfadan olu\u015fur (\u00f6rn. “Hakk\u0131m\u0131zda”, “\u0130leti\u015fim”, “Hizmetlerimiz”). Bu sayfalar\u0131 da benzer \u015fekilde olu\u015fturabilirsiniz.<\/p>\n<p>*   <strong>\u00d6rnek:<\/strong> <code>about.html<\/code> ve <code>contact.html<\/code> dosyalar\u0131n\u0131 ana dizinde olu\u015fturun.<br \/>\n    *   <code>about.html<\/code> i\u00e7eri\u011fi:<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n        <html lang=\"tr\">\n        <head>\n            <meta charset=\"UTF-8\">\n            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n            <title>Hakk\u0131m\u0131zda - \u0130lk Web Sitem<\/title>\n            <link rel=\"stylesheet\" href=\"css\/style.css\">\n        <\/head>\n        <body>\n            \n            <p>Bu sayfa, web sitemiz hakk\u0131nda bilgiler i\u00e7erir.<\/p>\n            <a href=\"index.html\">Ana Sayfaya D\u00f6n<\/a>\n            <script src=\"js\/script.js\"><\/script>\n        <\/body>\n        <\/html><\/code><\/pre>\n<p>    *   <code>contact.html<\/code> i\u00e7eri\u011fi:<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n        <html lang=\"tr\">\n        <head>\n            <meta charset=\"UTF-8\">\n            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n            <title>\u0130leti\u015fim - \u0130lk Web Sitem<\/title>\n            <link rel=\"stylesheet\" href=\"css\/style.css\">\n        <\/head>\n        <body>\n            \n            <p>Bize ula\u015fmak i\u00e7in l\u00fctfen a\u015fa\u011f\u0131daki formu kullan\u0131n veya e-posta g\u00f6nderin.<\/p>\n            <a href=\"index.html\">Ana Sayfaya D\u00f6n<\/a>\n            <script src=\"js\/script.js\"><\/script>\n        <\/body>\n        <\/html><\/code><\/pre>\n<p>*   <strong>Ba\u011flant\u0131 Kurma (<code><a><\/code> etiketi):<\/strong> Sayfalar aras\u0131nda gezinmeyi sa\u011flamak i\u00e7in <code><a><\/code> (anchor) etiketini kullan\u0131r\u0131z. <code>href<\/code> niteli\u011fi, hedeflenen sayfan\u0131n yolunu belirtir.<br \/>\n    *   <code>index.html<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki navigasyon ba\u011flant\u0131lar\u0131n\u0131 ekleyebilirsiniz (\u00f6rne\u011fin <code><\/p>\n<h1><\/code> etiketinden sonra):<\/p>\n<pre><code class=\"language-html\"><nav>\n            <ul>\n                <li><a href=\"index.html\">Ana Sayfa<\/a><\/li>\n                <li><a href=\"about.html\">Hakk\u0131m\u0131zda<\/a><\/li>\n                <li><a href=\"contact.html\">\u0130leti\u015fim<\/a><\/li>\n            <\/ul>\n        <\/nav><\/code><\/pre>\n<p>\u015eu anda proje yap\u0131n\u0131z a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnmelidir:<\/p>\n<pre><code class=\"language-\">ilk-web-sitem\/\n\u251c\u2500\u2500 css\/\n\u251c\u2500\u2500 js\/\n\u251c\u2500\u2500 img\/\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 about.html\n\u2514\u2500\u2500 contact.html<\/code><\/pre>\n<h3>CSS ve JavaScript Dosyalar\u0131n\u0131 Entegre Etme<\/h3>\n<p>HTML iskeletimizi olu\u015fturduktan sonra, web sitemizin g\u00f6rsel tasar\u0131m\u0131n\u0131 ve etkile\u015fimini sa\u011flayacak CSS ve JavaScript dosyalar\u0131n\u0131 olu\u015fturup HTML belgemize ba\u011flayaca\u011f\u0131z.<\/p>\n<h4>CSS Dosyalar\u0131<\/h4>\n<p>CSS (Cascading Style Sheets), web sayfan\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve d\u00fczenini belirler. T\u00fcm stil kurallar\u0131n\u0131z\u0131 tek bir harici dosyada tutmak, kodunuzu daha d\u00fczenli hale getirir ve y\u00f6netimi kolayla\u015ft\u0131r\u0131r.<\/p>\n<p>*   <strong><code>style.css<\/code> Olu\u015fturma:<\/strong><br \/>\n    1.  VS Code’da <code>css\/<\/code> klas\u00f6r\u00fcne sa\u011f t\u0131klay\u0131n ve “Yeni Dosya” se\u00e7ene\u011fini se\u00e7in.<br \/>\n    2.  Dosyaya <code>style.css<\/code> ad\u0131n\u0131 verin.<br \/>\n*   <strong>Temel CSS Kurallar\u0131 Ekleme:<\/strong><br \/>\n    <code>style.css<\/code> dosyan\u0131za basit stil kurallar\u0131 ekleyerek HTML sayfan\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirsiniz.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css <\/em>\/\n    body {\n        font-family: Arial, sans-serif;\n        line-height: 1.6;\n        margin: 0;\n        padding: 20px;\n        background-color: #f4f4f4;\n        color: #333;\n    }\n\n    h1 {\n        color: #0056b3;\n    }\n\n    p {\n        margin-bottom: 10px;\n    }\n\n    nav ul {\n        list-style: none;\n        padding: 0;\n        background: #333;\n        overflow: hidden;\n    }\n\n    nav li {\n        float: left;\n    }\n\n    nav a {\n        display: block;\n        color: white;\n        text-align: center;\n        padding: 14px 16px;\n        text-decoration: none;\n    }\n\n    nav a:hover {\n        background-color: #ddd;\n        color: black;\n    }<\/code><\/pre>\n<p>*   <strong>HTML’e Ba\u011flama (Tekrar Hat\u0131rlatma):<\/strong><br \/>\n    Daha \u00f6nce <code>index.html<\/code>, <code>about.html<\/code> ve <code>contact.html<\/code> dosyalar\u0131m\u0131z\u0131n <code><head><\/code> b\u00f6l\u00fcm\u00fcne a\u015fa\u011f\u0131daki sat\u0131r\u0131 eklemi\u015ftik:<\/p>\n<pre><code class=\"language-html\"><link rel=\"stylesheet\" href=\"css\/style.css\"><\/code><\/pre>\n<p>    Bu sat\u0131r, taray\u0131c\u0131ya <code>css\/style.css<\/code> dosyas\u0131n\u0131 bulmas\u0131n\u0131 ve sayfan\u0131n stilini uygulamak i\u00e7in kullanmas\u0131n\u0131 s\u00f6yler. <code>href=\"css\/style.css\"<\/code> yolu, HTML dosyas\u0131n\u0131n bulundu\u011fu dizinden <code>css<\/code> klas\u00f6r\u00fcn\u00fcn i\u00e7indeki <code>style.css<\/code> dosyas\u0131na giden g\u00f6receli yolu belirtir.<\/p>\n<h4>JavaScript Dosyalar\u0131<\/h4>\n<p>JavaScript, web sitenize etkile\u015fim ve dinamik i\u015flevsellik katman\u0131z\u0131 sa\u011flar.<\/p>\n<p>*   <strong><code>script.js<\/code> Olu\u015fturma:<\/strong><br \/>\n    1.  VS Code’da <code>js\/<\/code> klas\u00f6r\u00fcne sa\u011f t\u0131klay\u0131n ve “Yeni Dosya” se\u00e7ene\u011fini se\u00e7in.<br \/>\n    2.  Dosyaya <code>script.js<\/code> ad\u0131n\u0131 verin.<br \/>\n*   <strong>Temel JavaScript Kodu Ekleme:<\/strong><br \/>\n    <code>script.js<\/code> dosyan\u0131za basit bir JavaScript kodu ekleyerek taray\u0131c\u0131n\u0131z\u0131n konsolunda bir mesaj g\u00f6r\u00fcnt\u00fcleyebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ script.js\n    console.log(\"Web sitemiz y\u00fcklendi!\");\n\n    \/\/ \u00d6rnek: Bir butona t\u0131klama olay\u0131n\u0131 dinleme\n    \/\/ document.addEventListener('DOMContentLoaded', function() {\n    \/\/     const myButton = document.createElement('button');\n    \/\/     myButton.textContent = 'Bana T\u0131kla!';\n    \/\/     document.body.appendChild(myButton);\n\n    \/\/     myButton.addEventListener('click', function() {\n    \/\/         alert('Butona t\u0131klad\u0131n\u0131z!');\n    \/\/     });\n    \/\/ });<\/code><\/pre>\n<p>    <code>console.log()<\/code> mesaj\u0131, taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki “Konsol” sekmesinde g\u00f6r\u00fcnecektir. Bu, JavaScript kodunuzun \u00e7al\u0131\u015f\u0131p \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in harika bir yoldur.<br \/>\n*   <strong>HTML’e Ba\u011flama (Tekrar Hat\u0131rlatma):<\/strong><br \/>\n    <code>index.html<\/code>, <code>about.html<\/code> ve <code>contact.html<\/code> dosyalar\u0131m\u0131z\u0131n <code><\/body><\/code> kapan\u0131\u015f etiketinden hemen \u00f6nce a\u015fa\u011f\u0131daki sat\u0131r\u0131 eklemi\u015ftik:<\/p>\n<pre><code class=\"language-html\"><script src=\"js\/script.js\"><\/script><\/code><\/pre>\n<p>    Bu sat\u0131r, taray\u0131c\u0131ya <code>js\/script.js<\/code> dosyas\u0131n\u0131 y\u00fcklemesini ve i\u00e7indeki kodu \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 s\u00f6yler. JavaScript dosyalar\u0131n\u0131n <code><\/body><\/code> etiketinden \u00f6nce yerle\u015ftirilmesi, HTML i\u00e7eri\u011finin \u00f6nce y\u00fcklenmesini ve i\u015flenmesini sa\u011flar, b\u00f6ylece JavaScript DOM elemanlar\u0131na g\u00fcvenli bir \u015fekilde eri\u015febilir ve manip\u00fcle edebilir.<\/p>\n<h3>Varl\u0131k Y\u00f6netimi: G\u00f6rseller ve Di\u011fer Medyalar<\/h3>\n<p>Web siteleri genellikle g\u00f6rseller, videolar, ses dosyalar\u0131 gibi medya varl\u0131klar\u0131n\u0131 i\u00e7erir. Bu varl\u0131klar\u0131 d\u00fczenli bir \u015fekilde y\u00f6netmek, projenizin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4>G\u00f6rsel Dosyalar\u0131<\/h4>\n<p>G\u00f6rseller, bir web sitesinin g\u00f6rsel \u00e7ekicili\u011fini art\u0131ran \u00f6nemli \u00f6\u011felerdir.<\/p>\n<p>*   <strong><code>img\/<\/code> Dizinine Yerle\u015ftirme:<\/strong><br \/>\n    1.  Kullanmak istedi\u011finiz g\u00f6rselleri (\u00f6rn. <code>logo.png<\/code>, <code>banner.jpg<\/code>, <code>profile.webp<\/code>) <code>img\/<\/code> klas\u00f6r\u00fcne kopyalay\u0131n.<br \/>\n    2.  Dosya isimlerinin k\u00fc\u00e7\u00fck harf ve tirelerle oldu\u011fundan emin olun.<br \/>\n*   <strong>HTML’de Kullanma (<code><img><\/code> etiketi):<\/strong><br \/>\n    G\u00f6rselleri HTML sayfan\u0131za eklemek i\u00e7in <code><img><\/code> etiketini kullan\u0131rs\u0131n\u0131z.<\/p>\n<pre><code class=\"language-html\"><!-- index.html veya ba\u015fka bir HTML dosyas\u0131 i\u00e7inde -->\n    <img decoding=\"async\" src=\"img\/logo.png\" alt=\"\u015eirket Logosu\" width=\"150\" height=\"50\">\n    <img decoding=\"async\" src=\"img\/ana-sayfa-banner.jpg\" alt=\"Web sitesi ana sayfa banner\u0131\"><\/code><\/pre>\n<p>    *   <strong><code>src<\/code> (source):<\/strong> G\u00f6rsel dosyas\u0131n\u0131n yolunu belirtir. Bu, HTML dosyan\u0131zdan <code>img\/<\/code> klas\u00f6r\u00fcndeki g\u00f6rselin g\u00f6receli yoludur.<br \/>\n    *   <strong><code>alt<\/code> (alternative text):<\/strong> G\u00f6rselin y\u00fcklenememesi durumunda veya ekran okuyucular taraf\u0131ndan kullan\u0131lan a\u00e7\u0131klay\u0131c\u0131 bir metindir. SEO ve eri\u015filebilirlik i\u00e7in kritik \u00f6neme sahiptir.<br \/>\n    *   <strong><code>width<\/code> ve <code>height<\/code> (iste\u011fe ba\u011fl\u0131):<\/strong> G\u00f6rselin geni\u015fli\u011fini ve y\u00fcksekli\u011fini piksel cinsinden belirtir. Bu nitelikler, taray\u0131c\u0131n\u0131n g\u00f6rsel i\u00e7in yer ay\u0131rmas\u0131na yard\u0131mc\u0131 olur ve sayfa d\u00fczeni kaymalar\u0131n\u0131 azaltabilir. Ancak genellikle g\u00f6rsellerin boyutland\u0131r\u0131lmas\u0131 ve duyarl\u0131 hale getirilmesi CSS ile yap\u0131l\u0131r.<br \/>\n*   <strong>Dosya Boyutlar\u0131 ve Optimizasyonun \u00d6nemi:<\/strong><br \/>\n    *   B\u00fcy\u00fck boyutlu g\u00f6rseller, web sitenizin yava\u015f y\u00fcklenmesine neden olabilir.<br \/>\n    *   G\u00f6rselleri web i\u00e7in optimize etmek (s\u0131k\u0131\u015ft\u0131rmak, uygun format\u0131 se\u00e7mek – JPEG, PNG, WebP) \u00f6nemlidir. \u00c7evrimi\u00e7i ara\u00e7lar veya grafik d\u00fczenleme yaz\u0131l\u0131mlar\u0131 bu konuda yard\u0131mc\u0131 olabilir.<br \/>\n    *   WebP gibi modern formatlar, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131yla daha iyi kalite sunar.<\/p>\n<h4>Video\/Ses Dosyalar\u0131 (E\u011fer Kullan\u0131lacaksa)<\/h4>\n<p>E\u011fer projenizde video veya ses dosyalar\u0131 kullanacaksan\u0131z, bunlar\u0131 da benzer \u015fekilde ayr\u0131 bir klas\u00f6rde (\u00f6rn. <code>video\/<\/code> veya <code>audio\/<\/code> ya da genel <code>assets\/<\/code> klas\u00f6r\u00fc alt\u0131nda) saklamak iyi bir uygulamad\u0131r.<\/p>\n<p>*   <strong>HTML’de Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><!-- Video i\u00e7in -->\n    <video controls width=\"640\" height=\"360\">\n        <source src=\"assets\/intro-video.mp4\" type=\"video\/mp4\">\n        Taray\u0131c\u0131n\u0131z video etiketini desteklemiyor.\n    <\/video>\n\n    <!-- Ses i\u00e7in -->\n    <audio controls>\n        <source src=\"assets\/background-music.mp3\" type=\"audio\/mpeg\">\n        Taray\u0131c\u0131n\u0131z ses etiketini desteklemiyor.\n    <\/audio><\/code><\/pre>\n<p>    <code>controls<\/code> niteli\u011fi, oynatma\/duraklatma gibi standart medya kontrollerini sa\u011flar.<\/p>\n<h3>Geli\u015ftirme S\u00fcreci ve \u0130pu\u00e7lar\u0131<\/h3>\n<p>Projenizin temelini att\u0131ktan sonra, geli\u015ftirme s\u00fcrecini daha verimli hale getirecek baz\u0131 ara\u00e7lar ve ipu\u00e7lar\u0131 bulunmaktad\u0131r. Bu ara\u00e7lar, kod yazma, hata ay\u0131klama ve de\u011fi\u015fiklikleri y\u00f6netme konusunda size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h4>Canl\u0131 Sunucu (Live Server) Kullan\u0131m\u0131<\/h4>\n<p>Geleneksel olarak, HTML dosyas\u0131nda yapt\u0131\u011f\u0131n\u0131z her de\u011fi\u015fiklikten sonra taray\u0131c\u0131ya gidip sayfay\u0131 yenilemeniz gerekir. Bu, zaman al\u0131c\u0131 ve s\u0131k\u0131c\u0131 olabilir. Canl\u0131 sunucu, bu s\u00fcreci otomatikle\u015ftirir.<\/p>\n<p>*   <strong>VS Code Live Server Eklentisi:<\/strong><br \/>\n    1.  VS Code’u a\u00e7\u0131n.<br \/>\n    2.  Sol kenar \u00e7ubu\u011fundaki “Uzant\u0131lar” (Extensions) simgesine t\u0131klay\u0131n (veya <code>Ctrl+Shift+X<\/code> \/ <code>Cmd+Shift+X<\/code>).<br \/>\n    3.  Arama kutusuna “Live Server” yaz\u0131n.<br \/>\n    4.  “Ritwick Dey” taraf\u0131ndan geli\u015ftirilen “Live Server” eklentisini bulun ve y\u00fckleyin.<br \/>\n*   <strong>Nas\u0131l Kullan\u0131l\u0131r:<\/strong><br \/>\n    1.  VS Code’da <code>index.html<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n.<br \/>\n    2.  Sa\u011f t\u0131klay\u0131n ve “Open with Live Server” se\u00e7ene\u011fini se\u00e7in. Alternatif olarak, VS Code’un sa\u011f alt k\u00f6\u015fesindeki “Go Live” d\u00fc\u011fmesine t\u0131klayabilirsiniz.<br \/>\n    3.  Taray\u0131c\u0131n\u0131zda otomatik olarak projeniz a\u00e7\u0131lacakt\u0131r.<br \/>\n    <strong>Neden \u00d6nemli?<\/strong> Live Server, kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri kaydetti\u011finiz anda taray\u0131c\u0131da otomatik olarak yeniler. Bu, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131r\u0131r ve anl\u0131k geri bildirim alman\u0131z\u0131 sa\u011flar.<\/p>\n<h4>Taray\u0131c\u0131 Geli\u015ftirici Ara\u00e7lar\u0131<\/h4>\n<p>Modern web taray\u0131c\u0131lar\u0131 (Chrome, Firefox, Edge vb.) g\u00fc\u00e7l\u00fc geli\u015ftirici ara\u00e7lar\u0131yla birlikte gelir. Bu ara\u00e7lar, web sitenizi incelemek, hata ay\u0131klamak ve performans\u0131n\u0131 analiz etmek i\u00e7in vazge\u00e7ilmezdir.<\/p>\n<p>*   <strong>Nas\u0131l A\u00e7\u0131l\u0131r:<\/strong><br \/>\n    *   Sayfadayken sa\u011f t\u0131klay\u0131n ve “\u0130ncele” (Inspect) se\u00e7ene\u011fini se\u00e7in.<br \/>\n    *   <code>F12<\/code> tu\u015funa bas\u0131n (Windows\/Linux) veya <code>Cmd+Option+I<\/code> (macOS).<br \/>\n*   <strong>Temel Sekmeler ve Kullan\u0131mlar\u0131:<\/strong><br \/>\n    *   <strong>Elements (\u00d6\u011feler):<\/strong> Sayfan\u0131n HTML yap\u0131s\u0131n\u0131 ve uygulanan CSS stillerini g\u00f6r\u00fcnt\u00fclemenizi ve anl\u0131k olarak d\u00fczenlemenizi sa\u011flar. HTML elementlerinin \u00fczerine gelerek veya se\u00e7erek ilgili CSS kurallar\u0131n\u0131 g\u00f6rebilir ve de\u011fi\u015fiklikleri canl\u0131 olarak test edebilirsiniz.<br \/>\n    *   <strong>Console (Konsol):<\/strong> JavaScript hatalar\u0131n\u0131 ve <code>console.log()<\/code> ile yazd\u0131rd\u0131\u011f\u0131n\u0131z mesajlar\u0131 g\u00f6r\u00fcnt\u00fcler. JavaScript kodunuzda hata ay\u0131klamak i\u00e7in kritik bir ara\u00e7t\u0131r.<br \/>\n    *   <strong>Sources (Kaynaklar):<\/strong> JavaScript kodunuzda kesme noktalar\u0131 (breakpoints) ayarlayarak ad\u0131m ad\u0131m hata ay\u0131klama yapman\u0131z\u0131 sa\u011flar.<br \/>\n    *   <strong>Network (A\u011f):<\/strong> Sayfan\u0131n y\u00fcklenmesi s\u0131ras\u0131nda yap\u0131lan t\u00fcm a\u011f isteklerini (HTML, CSS, JS dosyalar\u0131, g\u00f6rseller vb.) ve bunlar\u0131n y\u00fcklenme s\u00fcrelerini g\u00f6sterir. Performans sorunlar\u0131n\u0131 tespit etmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<br \/>\n    *   <strong>Application (Uygulama):<\/strong> Yerel depolama (localStorage), oturum depolama (sessionStorage), \u00e7erezler (cookies) gibi istemci taraf\u0131 verilerini incelemenizi sa\u011flar.<br \/>\n    <strong>Neden \u00d6nemli?<\/strong> Geli\u015ftirici ara\u00e7lar\u0131, web sitenizin “kaputunun alt\u0131na” bakman\u0131z\u0131 sa\u011flar. Hatalar\u0131 bulmak, stilleri ayarlamak ve sayfan\u0131z\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in olmazsa olmazd\u0131r.<\/p>\n<h4>S\u00fcr\u00fcm Kontrol\u00fc (Git ve GitHub)<\/h4>\n<p>Git, projenizdeki de\u011fi\u015fiklikleri takip etmenizi sa\u011flayan bir s\u00fcr\u00fcm kontrol sistemidir. GitHub (veya GitLab, Bitbucket gibi platformlar), Git depolar\u0131n\u0131z\u0131 \u00e7evrimi\u00e7i olarak bar\u0131nd\u0131rman\u0131za ve di\u011fer geli\u015ftiricilerle i\u015fbirli\u011fi yapman\u0131za olanak tan\u0131r.<\/p>\n<p>*   <strong>Neden Kullanmal\u0131y\u0131z?<\/strong><br \/>\n    *   <strong>De\u011fi\u015fiklik Ge\u00e7mi\u015fi:<\/strong> Kodunuzdaki her de\u011fi\u015fikli\u011fi kaydeder. \u0130stedi\u011finiz zaman \u00f6nceki bir s\u00fcr\u00fcme geri d\u00f6nebilirsiniz.<br \/>\n    *   <strong>Yedekleme:<\/strong> Kodunuzu \u00e7evrimi\u00e7i bir depoda saklayarak veri kayb\u0131n\u0131 \u00f6nler.<br \/>\n    *   <strong>\u0130\u015fbirli\u011fi:<\/strong> Birden fazla geli\u015ftiricinin ayn\u0131 proje \u00fczerinde e\u015f zamanl\u0131 olarak \u00e7al\u0131\u015fmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n    *   <strong>Deneysel \u00d6zellikler:<\/strong> Yeni \u00f6zellikler \u00fczerinde “dallanma” (branching) yaparak ana kod taban\u0131n\u0131 etkilemeden g\u00fcvenle \u00e7al\u0131\u015fabilirsiniz.<br \/>\n*   <strong>Temel Git Komutlar\u0131 (K\u0131sa Giri\u015f):<\/strong><br \/>\n    1.  <strong>Git Kurulumu:<\/strong> Hen\u00fcz y\u00fckl\u00fc de\u011filse, Git’i resmi web sitesinden indirip kurun.<br \/>\n    2.  <strong>Depo Ba\u015flatma:<\/strong> Proje ana dizininizde (\u00f6rn. <code>ilk-web-sitem<\/code>) terminali a\u00e7\u0131n ve Git deposunu ba\u015flat\u0131n:<\/p>\n<pre><code class=\"language-bash\">git init<\/code><\/pre>\n<p>    3.  <strong>De\u011fi\u015fiklikleri Sahneleme:<\/strong> Yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri Git’in takip etmesi i\u00e7in sahneleme alan\u0131na ekleyin:<\/p>\n<pre><code class=\"language-bash\">git add .\n        # veya belirli bir dosya i\u00e7in: git add index.html<\/code><\/pre>\n<p>        <code>.<\/code> (nokta) t\u00fcm de\u011fi\u015fiklikleri sahneleme alan\u0131na ekler.<br \/>\n    4.  <strong>De\u011fi\u015fiklikleri Kaydetme (Commit):<\/strong> Sahneleme alan\u0131ndaki de\u011fi\u015fiklikleri bir “commit” olarak kaydedin ve a\u00e7\u0131klay\u0131c\u0131 bir mesaj ekleyin:<\/p>\n<pre><code class=\"language-bash\">git commit -m \"\u0130lk kurulum: HTML, CSS ve JS dosyalar\u0131 eklendi\"<\/code><\/pre>\n<p>    5.  <strong>Uzak Depoya Y\u00fckleme (Push – GitHub i\u00e7in):<\/strong><br \/>\n        *   GitHub’da yeni bir bo\u015f depo olu\u015fturun.<br \/>\n        *   Yerel deponuzu uzak depoya ba\u011flay\u0131n:<\/p>\n<pre><code class=\"language-bash\">git remote add origin https:\/\/github.com\/kullanici-adiniz\/depo-adiniz.git<\/code><\/pre>\n<p>        *   De\u011fi\u015fiklikleri uzak depoya g\u00f6nderin:<\/p>\n<pre><code class=\"language-bash\">git push -u origin master\n            # veya main, GitHub'\u0131n yeni varsay\u0131lan dal ad\u0131<\/code><\/pre>\n<p>    Bu ad\u0131mlar, projenizi s\u00fcr\u00fcm kontrol\u00fc alt\u0131na alman\u0131n temelini olu\u015fturur.<\/p>\n<h4>Kod D\u00fczenleme ve Temizlik<\/h4>\n<p>Okunabilir ve bak\u0131m\u0131 kolay kod yazmak, hem sizin hem de gelecekte projede \u00e7al\u0131\u015facak di\u011fer ki\u015filer i\u00e7in \u00f6nemlidir.<\/p>\n<p>*   <strong>Girintileme:<\/strong> Kodunuzu tutarl\u0131 bir \u015fekilde girintileyin (genellikle 2 veya 4 bo\u015fluk). VS Code gibi edit\u00f6rler otomatik girintileme \u00f6zelli\u011fine sahiptir.<br \/>\n*   <strong>Yorum Sat\u0131rlar\u0131:<\/strong> Karma\u015f\u0131k veya kritik kod b\u00f6l\u00fcmlerini a\u00e7\u0131klayan yorumlar ekleyin.<\/p>\n<pre><code class=\"language-html\"><!-- Bu, ana navigasyon men\u00fcs\u00fcd\u00fcr -->\n    <nav>...<\/nav><\/code><\/pre>\n<pre><code class=\"language-css\">\/<em> Genel sayfa stilleri <\/em>\/\n    body { ... }<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ Butona t\u0131klama olay\u0131n\u0131 dinle\n    myButton.addEventListener('click', function() { ... });<\/code><\/pre>\n<p>*   <strong>Anlaml\u0131 \u0130simler:<\/strong> De\u011fi\u015fkenlere, fonksiyonlara, CSS s\u0131n\u0131flar\u0131na ve ID’lere a\u00e7\u0131klay\u0131c\u0131 ve anlaml\u0131 isimler verin. <code>div1<\/code> veya <code>resim<\/code> yerine <code>main-header<\/code>, <code>user-profile-image<\/code> gibi isimler kullan\u0131n.<br \/>\n*   <strong>Kod Formatlay\u0131c\u0131lar:<\/strong> VS Code i\u00e7in Prettier gibi eklentiler, kodunuzu otomatik olarak belirli bir stile g\u00f6re formatlayarak tutarl\u0131l\u0131\u011f\u0131 sa\u011flar.<\/p>\n<h3>Projeyi Yay\u0131nlama (Deploy Etme)<\/h3>\n<p>Web sitenizi yerel makinenizde geli\u015ftirirken harika g\u00f6r\u00fcnse de, onu ba\u015fkalar\u0131yla payla\u015fmak i\u00e7in internette yay\u0131nlaman\u0131z gerekir. Bu i\u015fleme “deploy etme” veya “yay\u0131nlama” denir. HTML, CSS ve JavaScript’ten olu\u015fan statik bir web sitesini yay\u0131nlamak olduk\u00e7a kolayd\u0131r.<\/p>\n<h4>Statik Web Sitesi Bar\u0131nd\u0131rma<\/h4>\n<p>Statik web siteleri, sunucu taraf\u0131nda herhangi bir i\u015flem gerektirmeyen (veritaban\u0131, sunucu taraf\u0131 kodlama vb.) sitelerdir. HTML, CSS ve JavaScript dosyalar\u0131n\u0131 do\u011frudan bir sunucuya y\u00fckleyerek yay\u0131nlanabilirler.<\/p>\n<p>*   <strong>GitHub Pages:<\/strong><br \/>\n    *   E\u011fer projenizi Git ve GitHub ile y\u00f6netiyorsan\u0131z, GitHub Pages, statik web sitelerinizi \u00fccretsiz olarak bar\u0131nd\u0131rmak i\u00e7in m\u00fckemmel bir se\u00e7enektir.<br \/>\n    *   Yapman\u0131z gereken tek \u015fey, projenizin ana dal\u0131n\u0131 (genellikle <code>main<\/code> veya <code>master<\/code>) GitHub’a y\u00fcklemek ve deponuzun ayarlar\u0131ndan GitHub Pages’\u0131 etkinle\u015ftirmektir.<br \/>\n    *   <code>kullanici-adiniz.github.io\/depo-adiniz\/<\/code> \u015feklinde bir URL \u00fczerinden sitenize eri\u015febilirsiniz.<br \/>\n*   <strong>Netlify \/ Vercel:<\/strong><br \/>\n    *   Bu platformlar, modern geli\u015ftiriciler i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc ve kullan\u0131m\u0131 kolay bar\u0131nd\u0131rma hizmetleridir.<br \/>\n    *   GitHub\/GitLab\/Bitbucket depolar\u0131n\u0131zla entegre olurlar. Kodunuzu push etti\u011finizde, sitenizi otomatik olarak olu\u015fturur ve yay\u0131nlarlar (CI\/CD).<br \/>\n    *   \u00dccretsiz katmanlar\u0131 genellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli statik web siteleri i\u00e7in yeterlidir.<br \/>\n    *   \u00d6zel alan ad\u0131 ba\u011flama, otomatik SSL sertifikalar\u0131 gibi bir\u00e7ok ek \u00f6zellik sunarlar.<br \/>\n*   <strong>Firebase Hosting:<\/strong><br \/>\n    *   Google’\u0131n Firebase platformunun bir par\u00e7as\u0131d\u0131r. H\u0131zl\u0131, g\u00fcvenli ve \u00f6l\u00e7eklenebilir statik web sitesi bar\u0131nd\u0131rma hizmeti sunar.<br \/>\n    *   CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) \u00fczerinden kolayca deploy edilebilir.<br \/>\n*   <strong>FTP ile Y\u00fckleme (Geleneksel Y\u00f6ntem):<\/strong><br \/>\n    *   Bir bar\u0131nd\u0131rma sa\u011flay\u0131c\u0131s\u0131ndan (Hostinger, GoDaddy, Namecheap vb.) web alan\u0131 sat\u0131n al\u0131rs\u0131n\u0131z.<br \/>\n    *   FTP (File Transfer Protocol) istemcisi (\u00f6rn. FileZilla) kullanarak yerel bilgisayar\u0131n\u0131zdaki proje dosyalar\u0131n\u0131 sunucudaki <code>public_html<\/code> veya <code>www<\/code> klas\u00f6r\u00fcne y\u00fcklersiniz.<br \/>\n    *   Bu y\u00f6ntem hala ge\u00e7erli olsa da, modern CI\/CD (Continuous Integration\/Continuous Deployment) y\u00f6ntemleri (GitHub Pages, Netlify vb.) genellikle daha h\u0131zl\u0131 ve otomatiktir.<\/p>\n<h4>Alan Ad\u0131 ve SSL<\/h4>\n<p>*   <strong>Alan Ad\u0131 (Domain Name):<\/strong> Web sitenizin internetteki adresidir (\u00f6rn. <code>benimsitem.com<\/code>). Profesyonel bir g\u00f6r\u00fcn\u00fcm i\u00e7in kendi alan ad\u0131n\u0131z\u0131 sat\u0131n alman\u0131z \u00f6nerilir. Alan adlar\u0131, alan ad\u0131 kay\u0131t \u015firketlerinden (GoDaddy, Namecheap, T\u00fcrk Telekom vb.) sat\u0131n al\u0131nabilir.<br \/>\n*   <strong>SSL Sertifikas\u0131 (HTTPS):<\/strong> Web siteniz ile kullan\u0131c\u0131lar\u0131n\u0131z aras\u0131ndaki ileti\u015fimi \u015fifreleyen bir g\u00fcvenlik protokol\u00fcd\u00fcr. <code>https:\/\/<\/code> ile ba\u015flayan URL’ler g\u00fcvenlidir. SSL sertifikalar\u0131, kullan\u0131c\u0131lar\u0131n sitenize olan g\u00fcvenini art\u0131r\u0131r ve arama motoru s\u0131ralamalar\u0131 i\u00e7in de \u00f6nemli bir fakt\u00f6rd\u00fcr. \u00c7o\u011fu modern bar\u0131nd\u0131rma hizmeti (GitHub Pages, Netlify, Vercel) \u00fccretsiz SSL sertifikalar\u0131n\u0131 otomatik olarak sa\u011flar (Let’s Encrypt arac\u0131l\u0131\u011f\u0131yla).<\/p>\n<h3>Sonu\u00e7 ve \u0130leri Ad\u0131mlar<\/h3>\n<p>Tebrikler! Bu kapsaml\u0131 rehberi tamamlayarak, bir HTML web sitesi projesini s\u0131f\u0131rdan kurmak i\u00e7in gerekli t\u00fcm temel ad\u0131mlar\u0131 \u00f6\u011frenmi\u015f oldunuz. Art\u0131k sa\u011flam bir proje yap\u0131s\u0131na, temel HTML, CSS ve JavaScript dosyalar\u0131na sahipsiniz ve geli\u015ftirme s\u00fcrecinizi optimize edecek ara\u00e7lar\u0131 tan\u0131yorsunuz.<\/p>\n<p><strong>\u00d6zetle, \u00f6\u011frendikleriniz:<\/strong><\/p>\n<p>*   Bir web sitesinin temel bile\u015fenleri (HTML, CSS, JavaScript).<br \/>\n*   Gerekli geli\u015ftirme ara\u00e7lar\u0131 (kod edit\u00f6r\u00fc, taray\u0131c\u0131, Git).<br \/>\n*   Mant\u0131kl\u0131 bir proje dizini yap\u0131s\u0131 olu\u015fturma.<br \/>\n*   <code>index.html<\/code> ve di\u011fer HTML sayfalar\u0131n\u0131 olu\u015fturma.<br \/>\n*   CSS ve JavaScript dosyalar\u0131n\u0131 entegre etme.<br \/>\n*   G\u00f6rsel ve di\u011fer medya varl\u0131klar\u0131n\u0131 y\u00f6netme.<br \/>\n*   Canl\u0131 sunucu ve taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131 ile verimli geli\u015ftirme.<br \/>\n*   Git ile s\u00fcr\u00fcm kontrol\u00fc yapma.<br \/>\n*   Statik web sitenizi yay\u0131nlama se\u00e7enekleri.<\/p>\n<p>Bu ad\u0131mlar, web geli\u015ftirme yolculu\u011funuzun sadece ba\u015flang\u0131c\u0131d\u0131r. Temel bir HTML projesi kurmak, web d\u00fcnyas\u0131na at\u0131lan ilk ve en \u00f6nemli ad\u0131md\u0131r.<\/p>\n<p><strong>Bir Sonraki Ad\u0131mlar:<\/strong><\/p>\n<p>Bilginizi ve becerilerinizi daha da geli\u015ftirmek i\u00e7in a\u015fa\u011f\u0131daki konulara y\u00f6nelebilirsiniz:<\/p>\n<p>*   <strong>Duyarl\u0131 Tasar\u0131m (Responsive Design):<\/strong> Web sitenizin farkl\u0131 ekran boyutlar\u0131nda (masa\u00fcst\u00fc, tablet, mobil) iyi g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in CSS Media Queries ve esnek d\u00fczenler kullanmay\u0131 \u00f6\u011frenin.<br \/>\n*   <strong>CSS Frameworkleri:<\/strong> Tailwind CSS, Bootstrap gibi framework’ler, \u00f6nceden tan\u0131mlanm\u0131\u015f bile\u015fenler ve stil s\u0131n\u0131flar\u0131 sunarak h\u0131zl\u0131 ve tutarl\u0131 tasar\u0131mlar yapman\u0131z\u0131 sa\u011flar.<br \/>\n*   <strong>JavaScript K\u00fct\u00fcphaneleri\/Frameworkleri:<\/strong> jQuery, React, Vue.js, Angular gibi k\u00fct\u00fcphaneler ve framework’ler, daha karma\u015f\u0131k ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Eri\u015filebilirlik (Accessibility):<\/strong> Web sitenizi engelli kullan\u0131c\u0131lar dahil herkesin kullanabilece\u011fi \u015fekilde tasarlamay\u0131 \u00f6\u011frenin (ARIA nitelikleri, semantik HTML).<br \/>\n*   <strong>Arama Motoru Optimizasyonu (SEO):<\/strong> Web sitenizin arama motorlar\u0131nda daha \u00fcst s\u0131ralarda yer almas\u0131 i\u00e7in meta etiketleri, anlaml\u0131 i\u00e7erik ve site haritas\u0131 gibi teknikleri \u00f6\u011frenin.<br \/>\n*   <strong>Web Performans\u0131:<\/strong> Sayfa y\u00fckleme s\u00fcrelerini optimize etmek i\u00e7in g\u00f6rsel s\u0131k\u0131\u015ft\u0131rma, kod k\u00fc\u00e7\u00fcltme (minification) ve \u00f6nbellekleme (caching) gibi teknikleri ara\u015ft\u0131r\u0131n.<br \/>\n*   <strong>Backend Geli\u015ftirme:<\/strong> E\u011fer web sitenize veritaban\u0131, kullan\u0131c\u0131 kimlik do\u011frulama veya sunucu taraf\u0131 i\u015flevsellik eklemek isterseniz Node.js, Python (Django\/Flask), PHP gibi backend teknolojilerini \u00f6\u011frenmeye ba\u015flayabilirsiniz.<\/p>\n<p>Web geli\u015ftirme alan\u0131 s\u00fcrekli geli\u015fen dinamik bir aland\u0131r. S\u00fcrekli \u00f6\u011frenmeye ve pratik yapmaya devam ederek becerilerinizi geli\u015ftirebilir, daha karma\u015f\u0131k ve etkileyici projeler olu\u015fturabilirsiniz. Ba\u015far\u0131lar dileriz!<\/p>\n","protected":false},"excerpt":{"rendered":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber\nBir web sitesi projesine ba\u015flamak, heyecan verici ve yarat\u0131c\u0131 bir s\u00fcre\u00e7tir. Ancak","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-37777","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber Bir web sitesi projesine ba\u015flamak, heyecan verici ve yarat\u0131c\u0131 bir s\u00fcre\u00e7tir. Ancak\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-15T06:41:03+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\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber\",\"datePublished\":\"2026-01-15T06:41:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\"},\"wordCount\":4291,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\",\"name\":\"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-15T06:41:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 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 SEO Premium plugin. -->","yoast_head_json":{"title":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber","og_description":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber Bir web sitesi projesine ba\u015flamak, heyecan verici ve yarat\u0131c\u0131 bir s\u00fcre\u00e7tir. Ancak","og_url":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-15T06:41:03+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\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber","datePublished":"2026-01-15T06:41:03+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/"},"wordCount":4291,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/","name":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-15T06:41:03+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sitesi-projenizi-kurmak-adim-adim-kapsamli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Web Sitesi Projenizi Kurmak: Ad\u0131m Ad\u0131m Kapsaml\u0131 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\/37777","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=37777"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37777\/revisions"}],"predecessor-version":[{"id":37778,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37777\/revisions\/37778"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}