{"id":37981,"date":"2026-01-20T14:01:02","date_gmt":"2026-01-20T11:01:02","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/"},"modified":"2026-01-20T14:01:02","modified_gmt":"2026-01-20T11:01:02","slug":"html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/","title":{"rendered":"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131"},"content":{"rendered":"<h2>HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131<\/h2>\n<p>\u0130nternet d\u00fcnyas\u0131n\u0131n g\u00f6r\u00fcn\u00fcr y\u00fcz\u00fcn\u00fc olu\u015fturan web sayfalar\u0131n\u0131n temelini merak ediyor musunuz? Her bir web sayfas\u0131n\u0131n arkas\u0131nda, i\u00e7eri\u011fi d\u00fczenleyen, yap\u0131land\u0131ran ve taray\u0131c\u0131lara nas\u0131l g\u00f6sterilece\u011fini bildiren g\u00f6r\u00fcnmez bir iskelet bulunur. \u0130\u015fte bu iskeletin ad\u0131 HTML&#8217;dir (HyperText Markup Language). Bu makalede, HTML&#8217;in ne oldu\u011funu, web sayfalar\u0131 i\u00e7in neden bu kadar kritik bir rol oynad\u0131\u011f\u0131n\u0131, temel yap\u0131 ta\u015flar\u0131n\u0131 ve modern web geli\u015ftirmedeki yerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. HTML&#8217;in temel prensiplerini anlayarak, dijital d\u00fcnyada kendi ayaklar\u0131 \u00fczerinde duran sa\u011flam ve anlaml\u0131 web yap\u0131lar\u0131 olu\u015fturman\u0131n ilk ad\u0131m\u0131n\u0131 atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n<h3>HTML Nedir ve Web&#8217;in \u0130skeleti Olma Rol\u00fc<\/h3>\n<p>HTML, web sayfalar\u0131n\u0131 ve web uygulamalar\u0131n\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan standart bir i\u015faretleme dilidir. Bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7in bir dizi &#8220;etiket&#8221; (tag) kullan\u0131r. Bu etiketler, taray\u0131c\u0131lara i\u00e7eri\u011fin ne anlama geldi\u011fini (\u00f6rne\u011fin, bir ba\u015fl\u0131k, bir paragraf, bir resim veya bir ba\u011flant\u0131) s\u00f6yler. HTML, web&#8217;in temelini olu\u015fturur ve di\u011fer teknolojilerle (CSS ve JavaScript gibi) birlikte \u00e7al\u0131\u015farak zengin ve etkile\u015fimli kullan\u0131c\u0131 deneyimleri sunar.<\/p>\n<h4>HTML&#8217;in Tan\u0131m\u0131 ve Tarih\u00e7esi<\/h4>\n<p>HTML, 1990&#8217;lar\u0131n ba\u015f\u0131nda Tim Berners-Lee taraf\u0131ndan CERN&#8217;de geli\u015ftirilmi\u015ftir. Amac\u0131, bilim insanlar\u0131n\u0131n belgeleri kolayca payla\u015fabilmesi ve birbirine ba\u011flayabilmesi i\u00e7in bir yol sa\u011flamakt\u0131. \u0130lk s\u00fcr\u00fcm\u00fcnden bu yana bir\u00e7ok evrim ge\u00e7irdi. En g\u00fcncel ve yayg\u0131n olarak kullan\u0131lan s\u00fcr\u00fcm\u00fc HTML5&#8217;tir. HTML5, multimedya deste\u011fi, yeni semantik etiketler ve daha iyi mobil uyumluluk gibi \u00f6nemli yenilikler getirerek modern web&#8217;in temelini atm\u0131\u015ft\u0131r.<\/p>\n<h4>Neden &#8220;\u0130skelet&#8221; Benzetmesi Yap\u0131l\u0131r?<\/h4>\n<p>Web sayfalar\u0131n\u0131 bir insan v\u00fccuduna benzetirsek, HTML kesinlikle iskelettir. \u0130skelet, v\u00fccudun genel yap\u0131s\u0131n\u0131, duru\u015funu ve ana hatlar\u0131n\u0131 belirler. T\u0131pk\u0131 bunun gibi, HTML de bir web sayfas\u0131n\u0131n temel yap\u0131s\u0131n\u0131, i\u00e7eri\u011finin hiyerar\u015fisini ve \u00f6\u011felerin yerle\u015fimini tan\u0131mlar. CSS (Cascading Style Sheets) bu benzetmede cildi ve k\u0131yafetleri temsil ederek sayfan\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve stilini belirlerken, JavaScript ise sinir sistemi gibi etkile\u015fim ve dinamik davran\u0131\u015flar\u0131 sa\u011flar. HTML olmadan, ne CSS ne de JavaScript&#8217;in \u00fczerine in\u015fa edebilece\u011fi bir yap\u0131 olmazd\u0131.<\/p>\n<h4>HTML&#8217;in Di\u011fer Teknolojilerle \u0130li\u015fkisi (CSS, JavaScript)<\/h4>\n<p>HTML tek ba\u015f\u0131na bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini yap\u0131land\u0131r\u0131r, ancak g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve etkile\u015fimini kontrol etmez. \u0130\u015fte bu noktada CSS ve JavaScript devreye girer:<\/p>\n<ul>\n<li><strong>CSS (Cascading Style Sheets):<\/strong> HTML \u00f6\u011felerinin nas\u0131l g\u00f6r\u00fcnece\u011fini (renkler, fontlar, boyutlar, d\u00fczen vb.) tan\u0131mlar. HTML iskeleti kurarken, CSS bu iskeleti giydirir ve estetik bir g\u00f6r\u00fcn\u00fcm kazand\u0131r\u0131r.<\/li>\n<li><strong>JavaScript:<\/strong> Web sayfalar\u0131na dinamik ve etkile\u015fimli \u00f6zellikler ekler. Kullan\u0131c\u0131 eylemlerine yan\u0131t verme, animasyonlar olu\u015fturma, veri do\u011frulama gibi i\u015flevleri sa\u011flar. HTML iskeleti \u00fczerine hareket ve zeka katar.<\/li>\n<\/ul>\n<p>Bu \u00fc\u00e7 teknoloji, modern web geli\u015ftirmenin temel \u00fc\u00e7l\u00fcs\u00fcn\u00fc olu\u015fturur ve birlikte \u00e7al\u0131\u015farak zengin, i\u015flevsel ve estetik web deneyimleri sunar.<\/p>\n<h3>Temel HTML Belge Yap\u0131s\u0131 ve Ana Etiketler<\/h3>\n<p>Her HTML belgesi, taray\u0131c\u0131lar\u0131n i\u00e7eri\u011fi do\u011fru bir \u015fekilde yorumlamas\u0131 i\u00e7in belirli bir temel yap\u0131ya sahiptir. Bu yap\u0131, belgenin t\u00fcr\u00fcn\u00fc belirten bir bildirimle ba\u015flar ve i\u00e7eri\u011fi iki ana b\u00f6l\u00fcme ay\u0131r\u0131r: <code><head><\/code> ve <code><body><\/code>.<\/p>\n<h4><code><!DOCTYPE html><\/code> ve <code><html><\/code> Etiketi<\/h4>\n<p>Bir HTML belgesinin ilk sat\u0131r\u0131 genellikle <code><!DOCTYPE html><\/code> bildirimi olmal\u0131d\u0131r. Bu, taray\u0131c\u0131ya belgenin HTML5 standard\u0131n\u0131 kulland\u0131\u011f\u0131n\u0131 bildirir. Bu bildirim bir HTML etiketi de\u011fildir, sadece bir talimatt\u0131r. Hemen ard\u0131ndan gelen <code><html><\/code> etiketi, t\u00fcm HTML belgesini kapsayan k\u00f6k etikettir. Genellikle sayfan\u0131n dilini belirtmek i\u00e7in <code>lang<\/code> \u00f6zniteli\u011fi kullan\u0131l\u0131r, \u00f6rne\u011fin <code><html lang=\"tr\"><\/code>.<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n  <!-- Belgenin geri kalan\u0131 buraya gelecek -->\n<\/html><\/pre>\n<p><\/code><\/p>\n<h4><code><head><\/code> B\u00f6l\u00fcm\u00fc: Meta Bilgiler ve Kaynaklar<\/h4>\n<p>HTML belgesinin <code><head><\/code> b\u00f6l\u00fcm\u00fc, web sayfas\u0131n\u0131n kendisi hakk\u0131nda meta bilgileri (g\u00f6r\u00fcnmez veriler) ve harici kaynak ba\u011flant\u0131lar\u0131n\u0131 i\u00e7erir. Bu b\u00f6l\u00fcmdeki bilgiler do\u011frudan taray\u0131c\u0131da g\u00f6r\u00fcnmez, ancak sayfan\u0131n nas\u0131l i\u015flenece\u011fi, arama motorlar\u0131 taraf\u0131ndan nas\u0131l indekslenece\u011fi veya taray\u0131c\u0131 sekmelerinde nas\u0131l g\u00f6r\u00fcnece\u011fi gibi \u00f6nemli i\u015flevleri yerine getirir.<\/p>\n<ul>\n<li><strong><code><meta><\/code> Etiketleri:<\/strong> Karakter kodlamas\u0131 (<code>charset<\/code>), sayfa a\u00e7\u0131klamas\u0131 (<code>description<\/code>), anahtar kelimeler (<code>keywords<\/code>), yazar (<code>author<\/code>), viewport ayarlar\u0131 gibi bilgileri sa\u011flar.<\/li>\n<li><strong><code><title><\/code> Etiketi:<\/strong> Taray\u0131c\u0131 sekmesinde veya pencere ba\u015fl\u0131\u011f\u0131nda g\u00f6r\u00fcnen sayfa ba\u015fl\u0131\u011f\u0131n\u0131 tan\u0131mlar. SEO i\u00e7in kritik \u00f6neme sahiptir.<\/li>\n<li><strong><code><link><\/code> Etiketi:<\/strong> Harici CSS dosyalar\u0131n\u0131 veya favicon gibi di\u011fer kaynaklar\u0131 ba\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><strong><code><script><\/code> Etiketi:<\/strong> JavaScript kodunu do\u011frudan sayfaya eklemek veya harici JavaScript dosyalar\u0131n\u0131 ba\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<pre><code class=\"language-html\"><head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta name=\"description\" content=\"HTML iskeleti ve temel yap\u0131s\u0131 hakk\u0131nda teknik makale.\">\n  <title>HTML: Web Sayfalar\u0131n\u0131n \u0130skeleti<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<\/head><\/pre>\n<p><\/code><\/p>\n<h4><code><body><\/code> B\u00f6l\u00fcm\u00fc: G\u00f6r\u00fcn\u00fcr \u0130\u00e7eri\u011fin Yuvas\u0131<\/h4>\n<p>HTML belgesinin <code><body><\/code> b\u00f6l\u00fcm\u00fc, bir web sayfas\u0131nda kullan\u0131c\u0131lar taraf\u0131ndan g\u00f6r\u00fclebilen t\u00fcm i\u00e7eri\u011fi bar\u0131nd\u0131r\u0131r. Metinler, resimler, videolar, ba\u011flant\u0131lar, listeler, tablolar, formlar ve di\u011fer t\u00fcm g\u00f6rsel \u00f6\u011feler bu b\u00f6l\u00fcm i\u00e7inde yer al\u0131r. <code><body><\/code> etiketi, web sayfas\u0131n\u0131n ana i\u00e7eri\u011fini tan\u0131mlayan kapsay\u0131c\u0131d\u0131r.<\/p>\n<pre><code class=\"language-html\"><body>\n  <!-- Kullan\u0131c\u0131lar\u0131n g\u00f6rece\u011fi t\u00fcm i\u00e7erik buraya gelecek -->\n  <h2>Ho\u015f Geldiniz!<\/h2>\n  <p>Bu bir paragraf \u00f6rne\u011fidir.<\/p>\n<\/body><\/pre>\n<p><\/code><\/p>\n<h4>Ba\u015fl\u0131k Etiketleri (<code><\/p>\n<h2><\/code>, <code><\/p>\n<h3><\/code>, vb.) ve Paragraflar (<code><\/p>\n<p><\/code>)<\/h4>\n<p>\u0130\u00e7eri\u011fi yap\u0131land\u0131rman\u0131n en temel yollar\u0131ndan biri ba\u015fl\u0131klar ve paragraflard\u0131r. HTML, alt\u0131 farkl\u0131 seviyede ba\u015fl\u0131k etiketi sunar: <code><\/p>\n<h1><\/code>'den <code><\/p>\n<h6><\/code>'ya kadar. <code><\/p>\n<h1><\/code> en \u00f6nemli ba\u015fl\u0131k seviyesini (genellikle sayfa ba\u015fl\u0131\u011f\u0131) temsil ederken, <code><\/p>\n<h6><\/code> en az \u00f6nemli olan\u0131 temsil eder. Bu makalede <code><\/p>\n<h2><\/code> ve <code><\/p>\n<h3><\/code> kulland\u0131\u011f\u0131m\u0131z gibi, ba\u015fl\u0131k seviyeleri i\u00e7eri\u011fin hiyerar\u015fisini ve \u00f6nemini belirtir. Paragraflar (<code><\/p>\n<p><\/code>) ise metin bloklar\u0131n\u0131 d\u00fczenlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-html\"><h2>Ana Ba\u015fl\u0131k<\/h2>\n<p>Bu, ana ba\u015fl\u0131\u011f\u0131n alt\u0131ndaki bir paragraft\u0131r. Metin i\u00e7eri\u011fi burada yer al\u0131r.<\/p>\n<h3>Alt Ba\u015fl\u0131k<\/h3>\n<p>Bu da alt ba\u015fl\u0131\u011fa ait bir paragraft\u0131r. Detayl\u0131 a\u00e7\u0131klamalar burada sunulur.<\/p><\/pre>\n<p><\/code><\/p>\n<h3>\u0130\u00e7eri\u011fi Yap\u0131land\u0131rma: Metin, Ba\u011flant\u0131lar ve Medya<\/h3>\n<p>Web sayfalar\u0131 sadece ba\u015fl\u0131k ve paragraflardan ibaret de\u011fildir. \u0130\u00e7eri\u011fi daha zengin ve anlaml\u0131 hale getirmek i\u00e7in metin bi\u00e7imlendirme, ba\u011flant\u0131lar ve medya \u00f6\u011feleri kullan\u0131l\u0131r.<\/p>\n<h4>Metin Bi\u00e7imlendirme Etiketleri (<code><strong><\/code>, <code><em><\/code>, <code><span><\/code>)<\/h4>\n<p>Metinleri vurgulamak veya belirli bir anlam katmak i\u00e7in \u00e7e\u015fitli HTML etiketleri kullan\u0131l\u0131r:<\/p>\n<ul>\n<li><strong><code><strong><\/code>:<\/strong> Metnin \u00f6nemli oldu\u011funu belirtir (genellikle kal\u0131n yaz\u0131l\u0131r).<\/li>\n<li><strong><code><em><\/code>:<\/strong> Metnin vurgulu oldu\u011funu belirtir (genellikle italik yaz\u0131l\u0131r).<\/li>\n<li><strong><code><span><\/code>:<\/strong> Sat\u0131r i\u00e7i metinlerin veya k\u00fc\u00e7\u00fck metin par\u00e7alar\u0131n\u0131n stilini de\u011fi\u015ftirmek i\u00e7in genel ama\u00e7l\u0131 bir kapsay\u0131c\u0131d\u0131r. Semantik bir anlam\u0131 yoktur, genellikle CSS ile birlikte kullan\u0131l\u0131r.<\/li>\n<li><strong><code><mark><\/code>:<\/strong> Metni vurgulamak i\u00e7in kullan\u0131l\u0131r (genellikle sar\u0131 renkte vurgulan\u0131r).<\/li>\n<li><strong><code><small><\/code>:<\/strong> K\u00fc\u00e7\u00fck yaz\u0131lm\u0131\u015f metinleri belirtir (telif hakk\u0131, yasal metinler vb.).<\/li>\n<\/ul>\n<pre><code class=\"language-html\"><p>Bu metin <strong>\u00f6nemlidir<\/strong> ve bu k\u0131s\u0131m <em>vurgulanm\u0131\u015ft\u0131r<\/em>.<\/p>\n<p>Bu bir <span style=\"color: blue;\">mavi metin<\/span> \u00f6rne\u011fidir.<\/p><\/pre>\n<p><\/code><\/p>\n<h4>K\u00f6pr\u00fcler (<code><a><\/code>): Web'in Navigasyon Sistemi<\/h4>\n<p>K\u00f6pr\u00fcler veya ba\u011flant\u0131lar (<code><a><\/code> etiketi), bir web sayfas\u0131n\u0131 di\u011ferine ba\u011flaman\u0131n veya ayn\u0131 sayfa i\u00e7inde farkl\u0131 b\u00f6l\u00fcmlere at\u0131fta bulunman\u0131n temel yoludur. <code>href<\/code> \u00f6zniteli\u011fi, ba\u011flant\u0131n\u0131n hedefini (URL) belirtir. <code>target=\"_blank\"<\/code> \u00f6zniteli\u011fi ise ba\u011flant\u0131n\u0131n yeni bir sekmede a\u00e7\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-html\"><p>Daha fazla bilgi i\u00e7in <a href=\"https:\/\/www.example.com\" target=\"_blank\">buraya t\u0131klay\u0131n<\/a>.<\/p>\n<p>Makalenin <a href=\"#sss\">SSS b\u00f6l\u00fcm\u00fcne git<\/a>.<\/p><\/pre>\n<p><\/code><\/p>\n<h4>G\u00f6rseller (<code><img><\/code>): Web Sayfalar\u0131na G\u00f6rsel Katk\u0131<\/h4>\n<p>G\u00f6rseller (<code><img><\/code> etiketi), web sayfalar\u0131na g\u00f6rsel \u00e7ekicilik ve bilgi katman\u0131n vazge\u00e7ilmez bir yoludur. <code>src<\/code> \u00f6zniteli\u011fi g\u00f6rselin dosya yolunu, <code>alt<\/code> \u00f6zniteli\u011fi ise g\u00f6rselin alternatif metnini belirtir. <code>alt<\/code> metni, g\u00f6rsel y\u00fcklenemedi\u011finde veya ekran okuyucular taraf\u0131ndan kullan\u0131ld\u0131\u011f\u0131nda \u00f6nemlidir ve eri\u015filebilirlik ile SEO i\u00e7in kritik bir rol oynar.<\/p>\n<pre><code class=\"language-html\"><img fetchpriority=\"high\" decoding=\"async\" src=\"resimler\/iskelet.jpg\" alt=\"HTML web sayfas\u0131 iskeleti\" width=\"500\" height=\"300\"><\/pre>\n<p><\/code><\/p>\n<h4>Listeler (<code><\/p>\n<ul><\/code>, <code><\/p>\n<ol><\/code>, <code><\/p>\n<dl><\/code>): Bilgiyi D\u00fczenli Sunma<\/h4>\n<p>HTML, bilgiyi d\u00fczenli ve okunabilir bir \u015fekilde sunmak i\u00e7in \u00fc\u00e7 t\u00fcr liste sunar:<\/p>\n<ul>\n<li><strong><code>\n<ul><\/code> (S\u0131ras\u0131z Liste):<\/strong> \u00d6\u011felerin s\u0131ras\u0131n\u0131n \u00f6nemli olmad\u0131\u011f\u0131 listeler i\u00e7in kullan\u0131l\u0131r (madde i\u015faretli listeler). Her liste \u00f6\u011fesi <code><\/p>\n<li><\/code> etiketi ile tan\u0131mlan\u0131r.<\/li>\n<li><strong><code>\n<ol><\/code> (S\u0131ral\u0131 Liste):<\/strong> \u00d6\u011felerin s\u0131ras\u0131n\u0131n \u00f6nemli oldu\u011fu listeler i\u00e7in kullan\u0131l\u0131r (numaral\u0131 listeler). Her liste \u00f6\u011fesi yine <code><\/p>\n<li><\/code> etiketi ile tan\u0131mlan\u0131r.<\/li>\n<li><strong><code>\n<dl><\/code> (Tan\u0131m Listesi):<\/strong> Terim ve a\u00e7\u0131klamalar\u0131n\u0131 listelemek i\u00e7in kullan\u0131l\u0131r. Terim <code><\/p>\n<dt><\/code> ile, a\u00e7\u0131klamas\u0131 ise <code><\/p>\n<dd><\/code> ile belirtilir.<\/li>\n<\/ul>\n<pre><code class=\"language-html\"><h3>S\u0131ras\u0131z Liste \u00d6rne\u011fi<\/h3>\n<ul>\n  <li>HTML<\/li>\n  <li>CSS<\/li>\n  <li>JavaScript<\/li>\n<\/ul>\n\n<h3>S\u0131ral\u0131 Liste \u00d6rne\u011fi<\/h3>\n<ol>\n  <li>Giri\u015f<\/li>\n  <li>Geli\u015fme<\/li>\n  <li>Sonu\u00e7<\/li>\n<\/ol>\n\n<h3>Tan\u0131m Listesi \u00d6rne\u011fi<\/h3>\n<dl>\n  <dt>HTML<\/dt>\n  <dd>Web sayfalar\u0131n\u0131 yap\u0131land\u0131rmak i\u00e7in kullan\u0131lan i\u015faretleme dili.<\/dd>\n  <dt>CSS<\/dt>\n  <dd>Web sayfalar\u0131n\u0131n stilini belirlemek i\u00e7in kullan\u0131lan stil sayfas\u0131 dili.<\/dd>\n<\/dl><\/pre>\n<p><\/code><\/p>\n<h3>Geli\u015fmi\u015f Yap\u0131sal Etiketler ve Semantik HTML5<\/h3>\n<p>Modern web geli\u015ftirme, i\u00e7eri\u011fi sadece g\u00f6rsel olarak de\u011fil, anlamsal olarak da yap\u0131land\u0131rmaya b\u00fcy\u00fck \u00f6nem verir. HTML5 ile birlikte gelen semantik etiketler, bu amaca hizmet eder.<\/p>\n<h4>Tablolar (<code><\/p>\n<table><\/code>): Veriyi Sat\u0131r ve S\u00fctunlarda G\u00f6sterme<\/h4>\n<p>Tablolar, verileri sat\u0131r ve s\u00fctunlar halinde d\u00fczenli bir \u015fekilde sunmak i\u00e7in kullan\u0131l\u0131r. <code><\/p>\n<table><\/code> etiketi tabloyu kapsar, <code><\/p>\n<thead><\/code> ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fc, <code><\/p>\n<tbody><\/code> i\u00e7erik b\u00f6l\u00fcm\u00fcn\u00fc ve <code><\/p>\n<tfoot><\/code> altbilgi b\u00f6l\u00fcm\u00fcn\u00fc tan\u0131mlar. <code><\/p>\n<tr><\/code> sat\u0131rlar\u0131, <code><\/p>\n<th><\/code> ba\u015fl\u0131k h\u00fccrelerini ve <code><\/p>\n<td><\/code> veri h\u00fccrelerini belirtir.<\/p>\n<pre><code class=\"language-html\"><table border=\"1\">\n  <thead>\n    <tr>\n      <th>Dil<\/th>\n      <th>Kullan\u0131m Alan\u0131<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>HTML<\/td>\n      <td>Yap\u0131land\u0131rma<\/td>\n    <\/tr>\n    <tr>\n      <td>CSS<\/td>\n      <td>Stil<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table><\/pre>\n<p><\/code><\/p>\n<h4>Formlar (<code><\/p>\n<form><\/code>): Kullan\u0131c\u0131dan Veri Alma<\/h4>\n<p>Formlar, kullan\u0131c\u0131dan bilgi toplamak i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, kay\u0131t formlar\u0131, ileti\u015fim formlar\u0131). <code><\/p>\n<form><\/code> etiketi t\u00fcm formu kapsar. \u0130\u00e7erisinde <code><input><\/code>, <code><textarea><\/code>, <code><select><\/code>, <code><button><\/code> gibi \u00e7e\u015fitli giri\u015f \u00f6\u011feleri bulunur. <code>action<\/code> \u00f6zniteli\u011fi form verilerinin g\u00f6nderilece\u011fi URL'yi, <code>method<\/code> \u00f6zniteli\u011fi ise HTTP y\u00f6ntemini (GET veya POST) belirtir.<\/p>\n<pre><code class=\"language-html\"><form action=\"\/submit-form\" method=\"post\">\n  <label for=\"ad\">Ad\u0131n\u0131z:<\/label><br>\n  <input type=\"text\" id=\"ad\" name=\"ad\" required><br><br>\n  <label for=\"email\">E-posta:<\/label><br>\n  <input type=\"email\" id=\"email\" name=\"email\" required><br><br>\n  <input type=\"submit\" value=\"G\u00f6nder\">\n<\/form><\/pre>\n<p><\/code><\/p>\n<h4>HTML5 Semantik Etiketleri (<code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><main><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<footer><\/code>)<\/h4>\n<p>HTML5, web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 daha anlaml\u0131 hale getiren yeni semantik etiketler sunmu\u015ftur. Bu etiketler, i\u00e7eri\u011fin ne anlama geldi\u011fini taray\u0131c\u0131lara ve arama motorlar\u0131na bildirir, bu da eri\u015filebilirlik ve SEO i\u00e7in b\u00fcy\u00fck faydalar sa\u011flar.<\/p>\n<ul>\n<li><strong><code><br \/>\n<header><\/code>:<\/strong> Sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn ba\u015fl\u0131k k\u0131sm\u0131n\u0131 i\u00e7erir (logo, site ba\u015fl\u0131\u011f\u0131, navigasyon).<\/li>\n<li><strong><code><br \/>\n<nav><\/code>:<\/strong> Navigasyon ba\u011flant\u0131lar\u0131n\u0131 i\u00e7erir.<\/li>\n<li><strong><code><main><\/code>:<\/strong> Belgenin ana i\u00e7eri\u011fini temsil eder. Bir belgede yaln\u0131zca bir <code><main><\/code> etiketi olmal\u0131d\u0131r.<\/li>\n<li><strong><code><br \/>\n<article><\/code>:<\/strong> Kendi ba\u015f\u0131na ba\u011f\u0131ms\u0131z ve yeniden da\u011f\u0131t\u0131labilir bir i\u00e7erik par\u00e7as\u0131 (blog yaz\u0131s\u0131, haber makalesi).<\/li>\n<li><strong><code><br \/>\n<section><\/code>:<\/strong> Belgenin tematik olarak grupland\u0131r\u0131lm\u0131\u015f bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder.<\/li>\n<li><strong><code><br \/>\n<aside><\/code>:<\/strong> Ana i\u00e7erikten ayr\u0131, ancak onunla ili\u015fkili i\u00e7eri\u011fi (kenar \u00e7ubu\u011fu, reklamlar) i\u00e7erir.<\/li>\n<li><strong><code><br \/>\n<footer><\/code>:<\/strong> Sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn altbilgisini i\u00e7erir (telif hakk\u0131 bilgisi, ileti\u015fim bilgileri).<\/li>\n<\/ul>\n<pre><code class=\"language-html\"><header>\n  <h1>Siteme Ho\u015f Geldiniz<\/h1>\n  <nav>\n    <ul>\n      <li><a href=\"#\">Anasayfa<\/a><\/li>\n      <li><a href=\"#\">Hakk\u0131m\u0131zda<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/header>\n\n<main>\n  <article>\n    <h2>HTML'in G\u00fcc\u00fc<\/h2>\n    <p>HTML, web'in temelidir...<\/p>\n  <\/article>\n<\/main>\n\n<footer>\n  <p>&copy; 2023 T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n<\/footer><\/pre>\n<p><\/code><\/p>\n<h4>Div ve Span: Genel Ama\u00e7l\u0131 Grupland\u0131rma<\/h4>\n<p>Semantik etiketlerin yan\u0131 s\u0131ra, HTML'de genel ama\u00e7l\u0131 iki \u00f6nemli etiket daha bulunur: <code><\/p>\n<div><\/code> ve <code><span><\/code>.<\/p>\n<ul>\n<li><strong><code>\n<div><\/code> (Division):<\/strong> Blok seviyesinde bir kapsay\u0131c\u0131d\u0131r. Genellikle sayfan\u0131n belirli b\u00f6l\u00fcmlerini grupland\u0131rmak ve CSS ile stil uygulamak i\u00e7in kullan\u0131l\u0131r. Semantik bir anlam\u0131 yoktur, sadece yap\u0131sal bir grupland\u0131rma sa\u011flar.<\/li>\n<li><strong><code><span><\/code>:<\/strong> Sat\u0131r i\u00e7i bir kapsay\u0131c\u0131d\u0131r. Metinlerin veya k\u00fc\u00e7\u00fck \u00f6\u011felerin belirli k\u0131s\u0131mlar\u0131na stil uygulamak i\u00e7in kullan\u0131l\u0131r. T\u0131pk\u0131 <code>\n<div><\/code> gibi, semantik bir anlam\u0131 yoktur.<\/li>\n<\/ul>\n<p>Bu etiketler, semantik etiketlerin yeterli olmad\u0131\u011f\u0131 veya \u00f6zel stilizasyon gerektiren durumlarda esneklik sa\u011flar.<\/p>\n<h3>Eri\u015filebilirlik ve SEO \u0130\u00e7in HTML<\/h3>\n<p>Sa\u011flam bir HTML iskeleti olu\u015fturmak sadece i\u00e7eri\u011fi yap\u0131land\u0131rmakla kalmaz, ayn\u0131 zamanda web sitenizin eri\u015filebilirli\u011fini art\u0131r\u0131r ve arama motoru optimizasyonu (SEO) performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde etkiler.<\/p>\n<h4>Anlamsal HTML'in SEO'ya Katk\u0131s\u0131<\/h4>\n<p>Arama motorlar\u0131, web sayfalar\u0131n\u0131 tararken i\u00e7eri\u011fin ne anlama geldi\u011fini anlamaya \u00e7al\u0131\u015f\u0131r. Semantik HTML etiketleri (<code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<footer><\/code> vb.) kullanmak, arama motorlar\u0131na sayfan\u0131z\u0131n yap\u0131s\u0131 ve i\u00e7eri\u011finin hiyerar\u015fisi hakk\u0131nda de\u011ferli ipu\u00e7lar\u0131 verir. \u00d6rne\u011fin, bir <code><\/p>\n<nav><\/code> etiketi i\u00e7indeki ba\u011flant\u0131lar\u0131n navigasyon ama\u00e7l\u0131 oldu\u011funu, bir <code><\/p>\n<article><\/code> etiketinin ise ba\u011f\u0131ms\u0131z bir i\u00e7erik par\u00e7as\u0131 oldu\u011funu anlarlar. Bu, sayfan\u0131z\u0131n i\u00e7eri\u011fini daha iyi indekslemelerine ve ilgili aramalarda daha \u00fcst s\u0131ralarda yer almas\u0131na yard\u0131mc\u0131 olabilir.<\/p>\n<ul>\n<li>Do\u011fru ba\u015fl\u0131k hiyerar\u015fisi (<code><br \/>\n<h2><\/code>, <code><\/p>\n<h3><\/code> kullan\u0131m\u0131) i\u00e7eri\u011fin \u00f6nemini belirtir.<\/li>\n<li><code>alt<\/code> \u00f6zniteli\u011fi ile g\u00f6rsellere a\u00e7\u0131klay\u0131c\u0131 metinler eklemek, g\u00f6rsel aramalarda g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc art\u0131r\u0131r.<\/li>\n<li>Anlamsal etiketler, sayfa yap\u0131s\u0131n\u0131 daha net hale getirerek arama motorlar\u0131n\u0131n i\u00e7eri\u011fi daha etkili bir \u015fekilde anlamas\u0131na olanak tan\u0131r.<\/li>\n<\/ul>\n<h4>Eri\u015filebilirlik Standartlar\u0131 ve HTML<\/h4>\n<p>Eri\u015filebilirlik, web sitelerinin engelli ki\u015filer (g\u00f6rme, i\u015fitme, motor veya bili\u015fsel engelliler) taraf\u0131ndan da kullan\u0131labilir olmas\u0131n\u0131 sa\u011flamak anlam\u0131na gelir. HTML, bu konuda temel bir rol oynar:<\/p>\n<ul>\n<li><strong>Anlamsal Etiketler:<\/strong> Ekran okuyucular, semantik etiketleri kullanarak sayfa yap\u0131s\u0131n\u0131 engelli kullan\u0131c\u0131lara daha iyi aktarabilir. \u00d6rne\u011fin, bir <code><br \/>\n<nav><\/code> etiketini \"navigasyon alan\u0131\" olarak duyurabilir.<\/li>\n<li><strong><code>alt<\/code> \u00d6zniteli\u011fi:<\/strong> G\u00f6rseli g\u00f6remeyen kullan\u0131c\u0131lar i\u00e7in g\u00f6rselin ne anlama geldi\u011fini a\u00e7\u0131klar.<\/li>\n<li><strong>Form Etiketleri:<\/strong> <code><label><\/code> etiketlerini <code><input><\/code> \u00f6\u011feleriyle ili\u015fkilendirmek, ekran okuyucular\u0131n form alanlar\u0131n\u0131 do\u011fru bir \u015fekilde tan\u0131mlamas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Do\u011fru Ba\u015fl\u0131k Hiyerar\u015fisi:<\/strong> Sayfa i\u00e7eri\u011finde gezinmeyi kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>ARIA Nitelikleri:<\/strong> HTML'in eri\u015filebilirlik yeteneklerini daha da geni\u015fletmek i\u00e7in kullan\u0131lan ek niteliklerdir (\u00f6rne\u011fin, dinamik i\u00e7erik veya \u00f6zel widget'lar i\u00e7in).<\/li>\n<\/ul>\n<p>Eri\u015filebilir bir web sitesi olu\u015fturmak, sadece yasal bir gereklilik de\u011fil, ayn\u0131 zamanda daha geni\u015f bir kitleye ula\u015fman\u0131n ve kapsay\u0131c\u0131 bir internet deneyimi sunman\u0131n etik bir yoludur.<\/p>\n<h4>Do\u011fru Etiket Kullan\u0131m\u0131n\u0131n \u00d6nemi<\/h4>\n<p>HTML etiketlerini do\u011fru ve ama\u00e7lar\u0131na uygun kullanmak (semantik HTML), hem arama motorlar\u0131 hem de eri\u015filebilirlik a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. \u00d6rne\u011fin, bir metni kal\u0131n yapmak i\u00e7in <code><b><\/code> yerine <code><strong><\/code> kullanmak, sadece g\u00f6rsel bir de\u011fi\u015fiklik de\u011fil, ayn\u0131 zamanda metnin anlamsal olarak \u00f6nemli oldu\u011funu belirtir. Benzer \u015fekilde, bir liste olu\u015fturmak i\u00e7in sadece <code><\/p>\n<p><\/code> etiketleri kullanmak yerine <code><\/p>\n<ul><\/code> veya <code><\/p>\n<ol><\/code> kullanmak, i\u00e7eri\u011fin bir liste oldu\u011funu a\u00e7\u0131k\u00e7a ifade eder. Bu, taray\u0131c\u0131lar\u0131n, arama motorlar\u0131n\u0131n ve yard\u0131mc\u0131 teknolojilerin i\u00e7eri\u011fi daha iyi anlamas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>HTML, web sayfalar\u0131n\u0131n temel iskeletidir ve modern web'in vazge\u00e7ilmez bir yap\u0131 ta\u015f\u0131d\u0131r. \u0130\u00e7eri\u011fi yap\u0131land\u0131rarak, taray\u0131c\u0131lara neyin ne oldu\u011funu bildirir ve di\u011fer web teknolojileri olan CSS ve JavaScript i\u00e7in sa\u011flam bir temel olu\u015fturur. Do\u011fru ve anlamsal HTML kullan\u0131m\u0131, sadece web sayfalar\u0131n\u0131n g\u00f6rsel olarak d\u00fczenli olmas\u0131n\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda eri\u015filebilirlik, SEO ve genel kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan da kritik \u00f6neme sahiptir. Bu makalede ele ald\u0131\u011f\u0131m\u0131z temel etiketler ve yap\u0131sal prensipler, dijital d\u00fcnyada kendi izini b\u0131rakmak isteyen herkes i\u00e7in sa\u011flam bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmaktad\u0131r. HTML'i anlamak, web geli\u015ftirme yolculu\u011funuzda ataca\u011f\u0131n\u0131z en \u00f6nemli ad\u0131mlardan biridir.<\/p>\n<h3 id=\"sss\">S\u0131k Sorulan Sorular (SSS)<\/h3>\n<h4>1. HTML \u00f6\u011frenmek zor mu?<\/h4>\n<p>Hay\u0131r, HTML \u00f6\u011frenmek genellikle web geli\u015ftirme d\u00fcnyas\u0131na yeni ba\u015flayanlar i\u00e7in en kolay ad\u0131mlardan biridir. Temel etiketleri ve yap\u0131lar\u0131 anlamak olduk\u00e7a basittir. Ancak, modern ve semantik HTML yazma pratiklerini benimsemek zaman ve pratik gerektirebilir.<\/p>\n<h4>2. HTML tek ba\u015f\u0131na bir web sitesi olu\u015fturmak i\u00e7in yeterli mi?<\/h4>\n<p>HTML tek ba\u015f\u0131na bir web sitesinin i\u00e7eri\u011fini ve yap\u0131s\u0131n\u0131 olu\u015fturmak i\u00e7in yeterlidir, ancak stil (g\u00f6r\u00fcn\u00fcm) ve etkile\u015fim (dinamik davran\u0131\u015flar) eklemek i\u00e7in CSS ve JavaScript'e ihtiya\u00e7 duyulur. HTML, iskeleti sa\u011flar; CSS giydirir, JavaScript ise hareket ve i\u015flevsellik katar.<\/p>\n<h4>3. HTML5'in \u00f6nceki HTML s\u00fcr\u00fcmlerinden fark\u0131 nedir?<\/h4>\n<p>HTML5, multimedya deste\u011fi (video ve ses etiketleri), yeni semantik etiketler (<code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<footer><\/code> vb.), form giri\u015f tipleri ve taray\u0131c\u0131 i\u00e7i depolama gibi bir\u00e7ok \u00f6nemli yenilik getirmi\u015ftir. Bu yenilikler, daha anlaml\u0131, eri\u015filebilir ve dinamik web sayfalar\u0131 olu\u015fturmay\u0131 m\u00fcmk\u00fcn k\u0131lm\u0131\u015ft\u0131r.<\/p>\n<h4>4. Semantik HTML kullanmak neden \u00f6nemlidir?<\/h4>\n<p>Semantik HTML kullanmak, i\u00e7eri\u011fin anlam\u0131n\u0131 taray\u0131c\u0131lara, arama motorlar\u0131na ve yard\u0131mc\u0131 teknolojilere (ekran okuyucular gibi) a\u00e7\u0131k\u00e7a belirtir. Bu, web sitenizin SEO performans\u0131n\u0131 art\u0131r\u0131r, eri\u015filebilirli\u011fini geli\u015ftirir ve gelecekteki bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4>5. Bir HTML belgesinde <code><\/p>\n<div><\/code> ve <code><span><\/code> etiketleri ne i\u015fe yarar?<\/h4>\n<p><code><\/p>\n<div><\/code> ve <code><span><\/code> etiketleri genel ama\u00e7l\u0131 kapsay\u0131c\u0131lard\u0131r. <code><\/p>\n<div><\/code> blok seviyesinde bir alan\u0131 grupland\u0131rmak i\u00e7in kullan\u0131l\u0131rken, <code><span><\/code> sat\u0131r i\u00e7i metin par\u00e7alar\u0131n\u0131 grupland\u0131rmak i\u00e7in kullan\u0131l\u0131r. Genellikle CSS ile belirli b\u00f6lgelere stil uygulamak i\u00e7in kullan\u0131l\u0131rlar ve semantik bir anlam ta\u015f\u0131mazlar.<\/p>\n","protected":false},"excerpt":{"rendered":"\u0130nternet d\u00fcnyas\u0131n\u0131n g\u00f6r\u00fcn\u00fcr y\u00fcz\u00fcn\u00fc olu\u015fturan web sayfalar\u0131n\u0131n temelini merak ediyor musunuz? Her bir web sayfas\u0131n\u0131n arkas\u0131nda, i\u00e7eri\u011fi d\u00fcz&#8230;","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-37981","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 Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131 - 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-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131\" \/>\n<meta property=\"og:description\" content=\"\u0130nternet d\u00fcnyas\u0131n\u0131n g\u00f6r\u00fcn\u00fcr y\u00fcz\u00fcn\u00fc olu\u015fturan web sayfalar\u0131n\u0131n temelini merak ediyor musunuz? Her bir web sayfas\u0131n\u0131n arkas\u0131nda, i\u00e7eri\u011fi d\u00fcz...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-20T11:01:02+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=\"15 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-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131\",\"datePublished\":\"2026-01-20T11:01:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\"},\"wordCount\":2744,\"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-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\",\"name\":\"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-20T11:01:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131\"}]},{\"@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 Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131 - 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-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131","og_description":"\u0130nternet d\u00fcnyas\u0131n\u0131n g\u00f6r\u00fcn\u00fcr y\u00fcz\u00fcn\u00fc olu\u015fturan web sayfalar\u0131n\u0131n temelini merak ediyor musunuz? Her bir web sayfas\u0131n\u0131n arkas\u0131nda, i\u00e7eri\u011fi d\u00fcz...","og_url":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-20T11:01:02+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131","datePublished":"2026-01-20T11:01:02+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/"},"wordCount":2744,"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-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/","url":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/","name":"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-20T11:01:02+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-web-sayfalarinin-temel-iskeleti-ve-yapi-taslari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML: Web Sayfalar\u0131n\u0131n Temel \u0130skeleti ve Yap\u0131 Ta\u015flar\u0131"}]},{"@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\/37981","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=37981"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37981\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}