<\/code> etiketi i\u00e7inde yer al\u0131r.<br \/>\n* <code><body><\/code> b\u00f6l\u00fcm\u00fc ise web sayfas\u0131n\u0131n as\u0131l i\u00e7eri\u011fini bar\u0131nd\u0131r\u0131r. Kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131da g\u00f6rd\u00fc\u011f\u00fc t\u00fcm \u00f6\u011feler (metinler, g\u00f6rseller, videolar, ba\u011flant\u0131lar vb.) bu b\u00f6l\u00fcm\u00fcn i\u00e7ine yaz\u0131l\u0131r.<\/p>\n<h4>Temel HTML Etiketleri ve Kullan\u0131m Alanlar\u0131<\/h4>\n<p>HTML, i\u00e7eri\u011fi yap\u0131land\u0131rmak i\u00e7in \u00e7e\u015fitli etiketler sunar. \u0130\u015fte en s\u0131k kullan\u0131lanlardan baz\u0131lar\u0131:<\/p>\n<p>* <strong>Ba\u015fl\u0131klar (Headings):<\/strong> Bir sayfan\u0131n ana ba\u015fl\u0131klar\u0131n\u0131 ve alt ba\u015fl\u0131klar\u0131n\u0131 belirtmek i\u00e7in <code><\/p>\n<h1><\/code>‘den <code><\/p>\n<h6><\/code>‘ya kadar etiketler kullan\u0131l\u0131r. <code><\/p>\n<h1><\/code> en \u00f6nemli ba\u015fl\u0131\u011f\u0131 temsil ederken, <code><\/p>\n<h6><\/code> en az \u00f6nemli ba\u015fl\u0131\u011f\u0131 temsil eder.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <h1>Ana Ba\u015fl\u0131k<\/h1>\n <h2>Alt Ba\u015fl\u0131k<\/h2>\n <h3>Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k<\/h3>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Paragraflar (Paragraphs):<\/strong> Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in <code><\/p>\n<p><\/code> etiketi kullan\u0131l\u0131r.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <p>Bu, bir paragraf metnidir. Web geli\u015ftirmenin temellerini \u00f6\u011frenmek olduk\u00e7a heyecan verici.<\/p>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Ba\u011flant\u0131lar (Links):<\/strong> Bir sayfadan ba\u015fka bir sayfaya veya ayn\u0131 sayfa i\u00e7inde farkl\u0131 bir b\u00f6l\u00fcme gitmek i\u00e7in <code><a><\/code> (anchor) etiketi kullan\u0131l\u0131r. <code>href<\/code> \u00f6zelli\u011fi, ba\u011flant\u0131n\u0131n gidece\u011fi URL’yi belirtir.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <a href=\"https:\/\/www.ornek.com\">\u00d6rnek Bir Siteye Git<\/a>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>G\u00f6rseller (Images):<\/strong> Web sayfalar\u0131na g\u00f6rsel eklemek i\u00e7in <code><img><\/code> etiketi kullan\u0131l\u0131r. <code>src<\/code> \u00f6zelli\u011fi g\u00f6rselin yolunu, <code>alt<\/code> \u00f6zelli\u011fi ise g\u00f6rselin alternatif metnini (eri\u015filebilirlik ve SEO i\u00e7in \u00f6nemlidir) belirtir.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <img decoding=\"async\" src=\"resimler\/logo.png\" alt=\"\u015eirket Logosu\">\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Listeler (Lists):<\/strong> Bilgileri d\u00fczenli bir \u015fekilde sunmak i\u00e7in listeler kullan\u0131l\u0131r.<br \/>\n * S\u0131ras\u0131z listeler (unordered lists) i\u00e7in <code><\/p>\n<ul><\/code> ve liste \u00f6\u011feleri i\u00e7in <code><\/p>\n<li><\/code>.<br \/>\n * S\u0131ral\u0131 listeler (ordered lists) i\u00e7in <code><\/p>\n<ol><\/code> ve liste \u00f6\u011feleri i\u00e7in <code><\/p>\n<li><\/code>.\n<div class=\"code-container\">\n<pre><code>\n <ul>\n <li>HTML<\/li>\n <li>CSS<\/li>\n <li>JavaScript<\/li>\n <\/ul>\n\n <ol>\n <li>Birinci Ad\u0131m<\/li>\n <li>\u0130kinci Ad\u0131m<\/li>\n <li>\u00dc\u00e7\u00fcnc\u00fc Ad\u0131m<\/li>\n <\/ol>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Semantik Etiketler:<\/strong> Modern HTML5 ile birlikte gelen <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<aside><\/code> ve <code><\/p>\n<footer><\/code> gibi etiketler, sayfa i\u00e7eri\u011finin anlamsal yap\u0131s\u0131n\u0131 daha net belirtmeye yard\u0131mc\u0131 olur. Bu etiketler, hem arama motorlar\u0131 hem de ekran okuyucular gibi eri\u015filebilirlik ara\u00e7lar\u0131 i\u00e7in b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n \u00fcst k\u0131sm\u0131ndaki logo ve men\u00fc genellikle <code><\/p>\n<header><\/code> ve <code><\/p>\n<nav><\/code> etiketleri i\u00e7inde yer al\u0131r. Ana i\u00e7erik <code><main><\/code> etiketiyle \u00e7evrelenirken, her bir makale veya blog yaz\u0131s\u0131 <code><\/p>\n<article><\/code> etiketiyle belirtilebilir.<\/p>\n<p>HTML, web sayfalar\u0131n\u0131n temelini olu\u015fturarak i\u00e7eri\u011fe anlam ve yap\u0131 kazand\u0131r\u0131r. Bu etiketleri do\u011fru ve anlaml\u0131 bir \u015fekilde kullanmak, sadece g\u00f6rsel bir d\u00fczen sa\u011flamakla kalmaz, ayn\u0131 zamanda sayfan\u0131z\u0131n eri\u015filebilirli\u011fini ve arama motoru optimizasyonunu (SEO) da do\u011frudan etkiler. Bu temel yap\u0131 ta\u015flar\u0131n\u0131 anlamak, web geli\u015ftirme yolculu\u011funuzda ataca\u011f\u0131n\u0131z en sa\u011flam ad\u0131md\u0131r.<\/p>\n<h3>CSS Nedir ve Web Sayfalar\u0131m\u0131z\u0131 Nas\u0131l G\u00fczelle\u015ftiririz?<\/h3>\n<p>HTML, bir web sayfas\u0131n\u0131n iskeletini olu\u015ftururken, CSS (Cascading Style Sheets – Basamakl\u0131 Stil Sayfalar\u0131) bu iskelete estetik bir g\u00f6r\u00fcn\u00fcm kazand\u0131ran, renkleri, yaz\u0131 tiplerini, d\u00fczeni ve di\u011fer g\u00f6rsel \u00f6zellikleri belirleyen dildir. HTML olmadan bir web sayfas\u0131 sadece d\u00fcz metin ve ba\u011flant\u0131lardan ibaretken, CSS ile bu sayfa canl\u0131, etkile\u015fimli ve g\u00f6rsel olarak \u00e7ekici bir hale gelir.<\/p>\n<h4>Neden CSS Kullanmal\u0131y\u0131z?<\/h4>\n<p>CSS kullanman\u0131n bir\u00e7ok \u00f6nemli faydas\u0131 vard\u0131r:<\/p>\n<p>* <strong>\u0130\u00e7erik ve Tasar\u0131m\u0131 Ay\u0131rma:<\/strong> CSS, i\u00e7eri\u011fi (HTML) sunumdan (tasar\u0131m) ay\u0131r\u0131r. Bu, HTML dosyas\u0131n\u0131n daha temiz ve okunabilir olmas\u0131n\u0131 sa\u011flar, tasar\u0131m de\u011fi\u015fikliklerini \u00e7ok daha kolay hale getirir ve ayn\u0131 HTML yap\u0131s\u0131na farkl\u0131 CSS dosyalar\u0131 uygulayarak farkl\u0131 temalar olu\u015fturman\u0131za olanak tan\u0131r.<br \/>\n* <strong>Tutarl\u0131l\u0131k ve Verimlilik:<\/strong> Bir CSS dosyas\u0131yla birden fazla web sayfas\u0131n\u0131n stilini kontrol edebilirsiniz. Bu, web sitenizdeki t\u00fcm sayfalar\u0131n tutarl\u0131 bir g\u00f6r\u00fcn\u00fcme sahip olmas\u0131n\u0131 sa\u011flar ve tek bir de\u011fi\u015fiklik yaparak sitenizin genel tasar\u0131m\u0131n\u0131 g\u00fcncellemenize olanak tan\u0131r.<br \/>\n* <strong>Daha H\u0131zl\u0131 Y\u00fckleme S\u00fcreleri:<\/strong> CSS kodlar\u0131 genellikle taray\u0131c\u0131lar taraf\u0131ndan \u00f6nbelle\u011fe al\u0131n\u0131r. Bu, bir kullan\u0131c\u0131n\u0131n sitenizin farkl\u0131 sayfalar\u0131n\u0131 ziyaret etti\u011finde stil dosyalar\u0131n\u0131 tekrar indirmesine gerek kalmamas\u0131 anlam\u0131na gelir, bu da sayfa y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r.<br \/>\n* <strong>Eri\u015filebilirlik ve Duyarl\u0131l\u0131k:<\/strong> CSS, web sayfalar\u0131n\u0131 farkl\u0131 cihaz boyutlar\u0131na ve ekran tiplerine (masa\u00fcst\u00fc, tablet, mobil) uyumlu hale getirmek i\u00e7in kullan\u0131l\u0131r. Bu, duyarl\u0131 tasar\u0131m (responsive design) ilkelerinin temelini olu\u015fturur.<\/p>\n<h4>CSS’i HTML’e Ba\u011flama Yollar\u0131<\/h4>\n<p>CSS kodlar\u0131n\u0131 HTML belgesine dahil etmenin \u00fc\u00e7 temel yolu vard\u0131r:<\/p>\n<p>1. <strong>Harici Stil Sayfalar\u0131 (External Style Sheets):<\/strong> En \u00e7ok tercih edilen ve \u00f6nerilen y\u00f6ntemdir. CSS kodlar\u0131 ayr\u0131 bir <code>.css<\/code> uzant\u0131l\u0131 dosyada saklan\u0131r ve HTML belgesine <code><link><\/code> etiketi arac\u0131l\u0131\u011f\u0131yla ba\u011flan\u0131r.<\/p>\n<div class=\"code-container\"><\/div>\n<p> Bu y\u00f6ntem, i\u00e7eri\u011fi ve tasar\u0131m\u0131 tamamen ay\u0131r\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve sitenin genelinde tutarl\u0131l\u0131k sa\u011flar.<br \/>\n2. <strong>Dahili Stil Sayfalar\u0131 (Internal Style Sheets):<\/strong> CSS kodlar\u0131, HTML belgesinin <code><head><\/code> b\u00f6l\u00fcm\u00fcnde yer alan <code><\/p>\n<style><\/code> etiketleri aras\u0131na yaz\u0131l\u0131r.<\/p>\n<div class=\"code-container\"><\/div>\n<p> Bu y\u00f6ntem, tek bir sayfa i\u00e7in \u00f6zel stiller tan\u0131mlamak gerekti\u011finde kullan\u0131\u015fl\u0131 olabilir, ancak birden fazla sayfa i\u00e7in tutarl\u0131l\u0131k sa\u011flamada yetersiz kal\u0131r.<br \/>\n3. <strong>Sat\u0131r \u0130\u00e7i Stiller (Inline Styles):<\/strong> CSS kodlar\u0131 do\u011frudan HTML etiketlerinin i\u00e7ine, <code>style<\/code> \u00f6zelli\u011fi kullan\u0131larak yaz\u0131l\u0131r.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <p style=\"color: blue; font-size: 16px;\">Bu paragraf\u0131n kendine \u00f6zg\u00fc bir stili var.<\/p>\n <\/code><\/pre>\n<\/p><\/div>\n<p> Bu y\u00f6ntem <strong>genellikle \u00f6nerilmez<\/strong>, \u00e7\u00fcnk\u00fc i\u00e7eri\u011fi ve tasar\u0131m\u0131 birbirine kar\u0131\u015ft\u0131r\u0131r, kodun okunabilirli\u011fini azalt\u0131r ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Acil ve \u00e7ok spesifik durumlar d\u0131\u015f\u0131nda ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.<\/p>\n<h4>CSS Se\u00e7iciler ve Temel \u00d6zellikler<\/h4>\n<p>CSS, HTML elementlerini se\u00e7mek ve onlara stil uygulamak i\u00e7in se\u00e7iciler (selectors) kullan\u0131r.<\/p>\n<p>* <strong>Element Se\u00e7ici:<\/strong> Do\u011frudan HTML elementinin ad\u0131n\u0131 kullanarak stil uygular.<\/p>\n<div class=\"code-container\">\n<pre><code>\n p {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n }\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>S\u0131n\u0131f Se\u00e7ici (Class Selector):<\/strong> HTML elementlerine <code>class<\/code> \u00f6zelli\u011fi ile atanan bir s\u0131n\u0131f ad\u0131na g\u00f6re stil uygular. Bir s\u0131n\u0131fa birden fazla element sahip olabilir.<\/p>\n<div class=\"code-container\">\n<pre><code>\n .ozel-metin {\n color: green;\n font-weight: bold;\n }\n <\/code><\/pre>\n<\/p><\/div>\n<p> HTML'de kullan\u0131m\u0131: <code><p class="ozel-metin">Bu \u00f6zel bir metin.<\/p><\/code><br \/>\n* <strong>ID Se\u00e7ici:<\/strong> HTML elementlerine <code>id<\/code> \u00f6zelli\u011fi ile atanan benzersiz bir kimli\u011fe g\u00f6re stil uygular. Bir ID, bir sayfada yaln\u0131zca bir kez kullan\u0131lmal\u0131d\u0131r.<\/p>\n<div class=\"code-container\">\n<pre><code>\n #ana-baslik {\n text-align: center;\n margin-bottom: 20px;\n }\n <\/code><\/pre>\n<\/p><\/div>\n<p> HTML'de kullan\u0131m\u0131: <code><h1 id="ana-baslik">Sayfa Ba\u015fl\u0131\u011f\u0131<\/h1><\/code><\/p>\n<p><strong>Temel CSS \u00d6zellikleri:<\/strong><\/p>\n<p>* <code>color<\/code>: Metin rengini ayarlar.<br \/>\n* <code>background-color<\/code>: Elementin arka plan rengini ayarlar.<br \/>\n* <code>font-size<\/code>: Yaz\u0131 tipi boyutunu ayarlar.<br \/>\n* <code>font-family<\/code>: Yaz\u0131 tipi ailesini ayarlar.<br \/>\n* <code>text-align<\/code>: Metnin hizalamas\u0131n\u0131 (left, right, center, justify) ayarlar.<br \/>\n* <code>margin<\/code>: Elementin d\u0131\u015f bo\u015flu\u011funu (di\u011fer elementlerle aras\u0131ndaki bo\u015fluk) ayarlar.<br \/>\n* <code>padding<\/code>: Elementin i\u00e7 bo\u015flu\u011funu (i\u00e7eri\u011fi ile kenarl\u0131\u011f\u0131 aras\u0131ndaki bo\u015fluk) ayarlar.<br \/>\n* <code>border<\/code>: Elementin kenarl\u0131\u011f\u0131n\u0131 ayarlar (kal\u0131nl\u0131k, stil, renk).<\/p>\n<p>CSS, web sayfalar\u0131m\u0131za g\u00f6rsel bir kimlik kazand\u0131rarak onlar\u0131 kullan\u0131c\u0131lar i\u00e7in daha \u00e7ekici ve anla\u015f\u0131l\u0131r hale getirir. Do\u011fru CSS kullan\u0131m\u0131, sadece estetik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan da kritik \u00f6neme sahiptir. Bu temel bilgileri \u00f6\u011frenerek, web projelerinize profesyonel bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131n ilk ad\u0131mlar\u0131n\u0131 atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n<h3>HTML ve CSS Birlikte Nas\u0131l \u00c7al\u0131\u015f\u0131r: Ger\u00e7ek Bir Web Sayfas\u0131 Olu\u015fturma<\/h3>\n<p>HTML ve CSS, web geli\u015ftirmenin iki ayr\u0131lmaz par\u00e7as\u0131d\u0131r. HTML, bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini tan\u0131mlarken, CSS bu yap\u0131ya g\u00f6rsel stil ve d\u00fczen kazand\u0131r\u0131r. Bu iki dilin uyumlu \u00e7al\u0131\u015fmas\u0131, modern ve kullan\u0131c\u0131 dostu web sitelerinin temelini olu\u015fturur. \u015eimdi, bu iki teknolojiyi bir araya getirerek basit bir web sayfas\u0131 \u00f6rne\u011fi olu\u015ftural\u0131m ve ad\u0131m ad\u0131m nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131n\u0131 g\u00f6relim.<\/p>\n<p>Hayal edelim ki, k\u00fc\u00e7\u00fck bir yerel kahve d\u00fckkan\u0131 i\u00e7in basit bir tan\u0131t\u0131m sayfas\u0131 haz\u0131rl\u0131yoruz. Bu sayfa bir ba\u015fl\u0131k, bir tan\u0131t\u0131m metni, bir g\u00f6rsel ve bir ileti\u015fim bilgisi i\u00e7erecek.<\/p>\n<h4>Ad\u0131m 1: HTML \u0130skeletini Olu\u015fturma<\/h4>\n<p>\u0130lk olarak, sayfan\u0131n temel yap\u0131s\u0131n\u0131 <code>index.html<\/code> ad\u0131nda bir dosya olu\u015fturarak belirleyelim. Bu dosya, sayfan\u0131n ana ba\u015fl\u0131\u011f\u0131n\u0131, bir paragraf\u0131, bir g\u00f6rseli ve ileti\u015fim bilgilerini i\u00e7erecek.<\/p>\n<div class=\"code-container\">\n<pre><code class=\"language-html\"><\/p>\n<header>\n<h1>Lezzetli Kahve Dura\u011f\u0131'na Ho\u015f Geldiniz!<\/h1>\n<p class=\"slogan\">G\u00fcn\u00fcn\u00fcz\u00fc tatland\u0131racak kahveler...<\/p>\n<\/header>\n<p> <main><\/p>\n<section class=\"hakkimizda\">\n<h2>Hakk\u0131m\u0131zda<\/h2>\n<p>Lezzetli Kahve Dura\u011f\u0131 olarak, sabah kahvenizden ak\u015fam sohbetlerinize kadar her an\u0131n\u0131za e\u015flik edecek en taze \u00e7ekirdeklerden haz\u0131rlanm\u0131\u015f \u00f6zel kahveler sunuyoruz. Misafirlerimize s\u0131cak bir ortam ve unutulmaz lezzetler vadediyoruz.<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\" alt=\"Kahve D\u00fckkan\u0131 \u0130\u00e7 Mekan\u0131\"><\/p>\n<p>Her fincan\u0131m\u0131zda kalite ve tutku var. Gelin, e\u015fsiz kahve deneyimimizi ke\u015ffedin.<\/p>\n<\/section>\n<section class=\"iletisim\">\n<h2>Bize Ula\u015f\u0131n<\/h2>\n<ul>\n<li>Adres: \u00d6rnek Cad. No:123, Kahve \u015eehri<\/li>\n<li>Telefon: 0 (XXX) XXX XX XX<\/li>\n<li>E-posta: info@lezzetlikahve.com<\/li>\n<\/ul>\n<\/section>\n<p> <\/main><\/p>\n<footer>\n<p>© 2023 Lezzetli Kahve Dura\u011f\u0131. T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n<\/footer>\n<div class=\"github-example-link\"><strong>\u00d6rnek kod:<\/strong> <a href=\"https:\/\/github.com\/fatihsoysalcom\/basic-html-structure-and-tags\" target=\"_blank\" rel=\"noopener noreferrer\">github.com\/fatihsoysalcom\/basic-html-structure-and-tags<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"Ana Ba\u015fl\u0131k Alt Ba\u015fl\u0131k Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k * Paragraflar (Paragraphs): Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in etiketi kullan\u0131l\u0131r. Bu, bir paragraf metnidir.","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-43206","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Alt Ba\u015fl\u0131k - 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\/alt-baslik\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Alt Ba\u015fl\u0131k\" \/>\n<meta property=\"og:description\" content=\"Ana Ba\u015fl\u0131k Alt Ba\u015fl\u0131k Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k * Paragraflar (Paragraphs): Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in etiketi kullan\u0131l\u0131r. Bu, bir paragraf metnidir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-09T18:06:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T18:06:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\" \/>\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=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Alt Ba\u015fl\u0131k\",\"datePublished\":\"2026-07-09T18:06:05+00:00\",\"dateModified\":\"2026-07-09T18:06:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\"},\"wordCount\":1490,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\",\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\",\"name\":\"Alt Ba\u015fl\u0131k - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\",\"datePublished\":\"2026-07-09T18:06:05+00:00\",\"dateModified\":\"2026-07-09T18:06:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\",\"url\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\",\"contentUrl\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Alt Ba\u015fl\u0131k\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Alt Ba\u015fl\u0131k - 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\/alt-baslik\/","og_locale":"tr_TR","og_type":"article","og_title":"Alt Ba\u015fl\u0131k","og_description":"Ana Ba\u015fl\u0131k Alt Ba\u015fl\u0131k Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k * Paragraflar (Paragraphs): Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in etiketi kullan\u0131l\u0131r. Bu, bir paragraf metnidir.","og_url":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-09T18:06:05+00:00","article_modified_time":"2026-07-09T18:06:20+00:00","og_image":[{"url":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","type":"","width":"","height":""}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Alt Ba\u015fl\u0131k","datePublished":"2026-07-09T18:06:05+00:00","dateModified":"2026-07-09T18:06:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"},"wordCount":1490,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","url":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","name":"Alt Ba\u015fl\u0131k - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","datePublished":"2026-07-09T18:06:05+00:00","dateModified":"2026-07-09T18:06:20+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage","url":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","contentUrl":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani"},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Alt Ba\u015fl\u0131k"}]},{"@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\/43206","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=43206"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43206\/revisions"}],"predecessor-version":[{"id":43207,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43206\/revisions\/43207"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43206,"date":"2026-07-09T21:06:05","date_gmt":"2026-07-09T18:06:05","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"},"modified":"2026-07-09T21:06:20","modified_gmt":"2026-07-09T18:06:20","slug":"alt-baslik","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","title":{"rendered":"Alt Ba\u015fl\u0131k"},"content":{"rendered":"

<\/code>.<\/p>\n

* <\/code> b\u00f6l\u00fcm\u00fc, web sayfas\u0131n\u0131n kendisi hakk\u0131nda meta bilgileri (sayfa ba\u015fl\u0131\u011f\u0131, karakter kodlamas\u0131, harici CSS dosyalar\u0131na ba\u011flant\u0131lar vb.) i\u00e7erir. Bu b\u00f6l\u00fcmdeki bilgiler do\u011frudan taray\u0131c\u0131da g\u00f6r\u00fcnmez, ancak sayfan\u0131n nas\u0131l i\u015flenece\u011fini ve arama motorlar\u0131 taraf\u0131ndan nas\u0131l indekslenece\u011fini etkiler. \u00d6rne\u011fin, taray\u0131c\u0131 sekmesinde g\u00f6r\u00fcnen ba\u015fl\u0131k <\/code> etiketi i\u00e7inde yer al\u0131r.<br \/>\n* <code><body><\/code> b\u00f6l\u00fcm\u00fc ise web sayfas\u0131n\u0131n as\u0131l i\u00e7eri\u011fini bar\u0131nd\u0131r\u0131r. Kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131da g\u00f6rd\u00fc\u011f\u00fc t\u00fcm \u00f6\u011feler (metinler, g\u00f6rseller, videolar, ba\u011flant\u0131lar vb.) bu b\u00f6l\u00fcm\u00fcn i\u00e7ine yaz\u0131l\u0131r.<\/p>\n<h4>Temel HTML Etiketleri ve Kullan\u0131m Alanlar\u0131<\/h4>\n<p>HTML, i\u00e7eri\u011fi yap\u0131land\u0131rmak i\u00e7in \u00e7e\u015fitli etiketler sunar. \u0130\u015fte en s\u0131k kullan\u0131lanlardan baz\u0131lar\u0131:<\/p>\n<p>* <strong>Ba\u015fl\u0131klar (Headings):<\/strong> Bir sayfan\u0131n ana ba\u015fl\u0131klar\u0131n\u0131 ve alt ba\u015fl\u0131klar\u0131n\u0131 belirtmek i\u00e7in <code><\/p>\n<h1><\/code>‘den <code><\/p>\n<h6><\/code>‘ya kadar etiketler kullan\u0131l\u0131r. <code><\/p>\n<h1><\/code> en \u00f6nemli ba\u015fl\u0131\u011f\u0131 temsil ederken, <code><\/p>\n<h6><\/code> en az \u00f6nemli ba\u015fl\u0131\u011f\u0131 temsil eder.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <h1>Ana Ba\u015fl\u0131k<\/h1>\n <h2>Alt Ba\u015fl\u0131k<\/h2>\n <h3>Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k<\/h3>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Paragraflar (Paragraphs):<\/strong> Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in <code><\/p>\n<p><\/code> etiketi kullan\u0131l\u0131r.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <p>Bu, bir paragraf metnidir. Web geli\u015ftirmenin temellerini \u00f6\u011frenmek olduk\u00e7a heyecan verici.<\/p>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Ba\u011flant\u0131lar (Links):<\/strong> Bir sayfadan ba\u015fka bir sayfaya veya ayn\u0131 sayfa i\u00e7inde farkl\u0131 bir b\u00f6l\u00fcme gitmek i\u00e7in <code><a><\/code> (anchor) etiketi kullan\u0131l\u0131r. <code>href<\/code> \u00f6zelli\u011fi, ba\u011flant\u0131n\u0131n gidece\u011fi URL’yi belirtir.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <a href=\"https:\/\/www.ornek.com\">\u00d6rnek Bir Siteye Git<\/a>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>G\u00f6rseller (Images):<\/strong> Web sayfalar\u0131na g\u00f6rsel eklemek i\u00e7in <code><img><\/code> etiketi kullan\u0131l\u0131r. <code>src<\/code> \u00f6zelli\u011fi g\u00f6rselin yolunu, <code>alt<\/code> \u00f6zelli\u011fi ise g\u00f6rselin alternatif metnini (eri\u015filebilirlik ve SEO i\u00e7in \u00f6nemlidir) belirtir.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <img decoding=\"async\" src=\"resimler\/logo.png\" alt=\"\u015eirket Logosu\">\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Listeler (Lists):<\/strong> Bilgileri d\u00fczenli bir \u015fekilde sunmak i\u00e7in listeler kullan\u0131l\u0131r.<br \/>\n * S\u0131ras\u0131z listeler (unordered lists) i\u00e7in <code><\/p>\n<ul><\/code> ve liste \u00f6\u011feleri i\u00e7in <code><\/p>\n<li><\/code>.<br \/>\n * S\u0131ral\u0131 listeler (ordered lists) i\u00e7in <code><\/p>\n<ol><\/code> ve liste \u00f6\u011feleri i\u00e7in <code><\/p>\n<li><\/code>.\n<div class=\"code-container\">\n<pre><code>\n <ul>\n <li>HTML<\/li>\n <li>CSS<\/li>\n <li>JavaScript<\/li>\n <\/ul>\n\n <ol>\n <li>Birinci Ad\u0131m<\/li>\n <li>\u0130kinci Ad\u0131m<\/li>\n <li>\u00dc\u00e7\u00fcnc\u00fc Ad\u0131m<\/li>\n <\/ol>\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>Semantik Etiketler:<\/strong> Modern HTML5 ile birlikte gelen <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<aside><\/code> ve <code><\/p>\n<footer><\/code> gibi etiketler, sayfa i\u00e7eri\u011finin anlamsal yap\u0131s\u0131n\u0131 daha net belirtmeye yard\u0131mc\u0131 olur. Bu etiketler, hem arama motorlar\u0131 hem de ekran okuyucular gibi eri\u015filebilirlik ara\u00e7lar\u0131 i\u00e7in b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n \u00fcst k\u0131sm\u0131ndaki logo ve men\u00fc genellikle <code><\/p>\n<header><\/code> ve <code><\/p>\n<nav><\/code> etiketleri i\u00e7inde yer al\u0131r. Ana i\u00e7erik <code><main><\/code> etiketiyle \u00e7evrelenirken, her bir makale veya blog yaz\u0131s\u0131 <code><\/p>\n<article><\/code> etiketiyle belirtilebilir.<\/p>\n<p>HTML, web sayfalar\u0131n\u0131n temelini olu\u015fturarak i\u00e7eri\u011fe anlam ve yap\u0131 kazand\u0131r\u0131r. Bu etiketleri do\u011fru ve anlaml\u0131 bir \u015fekilde kullanmak, sadece g\u00f6rsel bir d\u00fczen sa\u011flamakla kalmaz, ayn\u0131 zamanda sayfan\u0131z\u0131n eri\u015filebilirli\u011fini ve arama motoru optimizasyonunu (SEO) da do\u011frudan etkiler. Bu temel yap\u0131 ta\u015flar\u0131n\u0131 anlamak, web geli\u015ftirme yolculu\u011funuzda ataca\u011f\u0131n\u0131z en sa\u011flam ad\u0131md\u0131r.<\/p>\n<h3>CSS Nedir ve Web Sayfalar\u0131m\u0131z\u0131 Nas\u0131l G\u00fczelle\u015ftiririz?<\/h3>\n<p>HTML, bir web sayfas\u0131n\u0131n iskeletini olu\u015ftururken, CSS (Cascading Style Sheets – Basamakl\u0131 Stil Sayfalar\u0131) bu iskelete estetik bir g\u00f6r\u00fcn\u00fcm kazand\u0131ran, renkleri, yaz\u0131 tiplerini, d\u00fczeni ve di\u011fer g\u00f6rsel \u00f6zellikleri belirleyen dildir. HTML olmadan bir web sayfas\u0131 sadece d\u00fcz metin ve ba\u011flant\u0131lardan ibaretken, CSS ile bu sayfa canl\u0131, etkile\u015fimli ve g\u00f6rsel olarak \u00e7ekici bir hale gelir.<\/p>\n<h4>Neden CSS Kullanmal\u0131y\u0131z?<\/h4>\n<p>CSS kullanman\u0131n bir\u00e7ok \u00f6nemli faydas\u0131 vard\u0131r:<\/p>\n<p>* <strong>\u0130\u00e7erik ve Tasar\u0131m\u0131 Ay\u0131rma:<\/strong> CSS, i\u00e7eri\u011fi (HTML) sunumdan (tasar\u0131m) ay\u0131r\u0131r. Bu, HTML dosyas\u0131n\u0131n daha temiz ve okunabilir olmas\u0131n\u0131 sa\u011flar, tasar\u0131m de\u011fi\u015fikliklerini \u00e7ok daha kolay hale getirir ve ayn\u0131 HTML yap\u0131s\u0131na farkl\u0131 CSS dosyalar\u0131 uygulayarak farkl\u0131 temalar olu\u015fturman\u0131za olanak tan\u0131r.<br \/>\n* <strong>Tutarl\u0131l\u0131k ve Verimlilik:<\/strong> Bir CSS dosyas\u0131yla birden fazla web sayfas\u0131n\u0131n stilini kontrol edebilirsiniz. Bu, web sitenizdeki t\u00fcm sayfalar\u0131n tutarl\u0131 bir g\u00f6r\u00fcn\u00fcme sahip olmas\u0131n\u0131 sa\u011flar ve tek bir de\u011fi\u015fiklik yaparak sitenizin genel tasar\u0131m\u0131n\u0131 g\u00fcncellemenize olanak tan\u0131r.<br \/>\n* <strong>Daha H\u0131zl\u0131 Y\u00fckleme S\u00fcreleri:<\/strong> CSS kodlar\u0131 genellikle taray\u0131c\u0131lar taraf\u0131ndan \u00f6nbelle\u011fe al\u0131n\u0131r. Bu, bir kullan\u0131c\u0131n\u0131n sitenizin farkl\u0131 sayfalar\u0131n\u0131 ziyaret etti\u011finde stil dosyalar\u0131n\u0131 tekrar indirmesine gerek kalmamas\u0131 anlam\u0131na gelir, bu da sayfa y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r.<br \/>\n* <strong>Eri\u015filebilirlik ve Duyarl\u0131l\u0131k:<\/strong> CSS, web sayfalar\u0131n\u0131 farkl\u0131 cihaz boyutlar\u0131na ve ekran tiplerine (masa\u00fcst\u00fc, tablet, mobil) uyumlu hale getirmek i\u00e7in kullan\u0131l\u0131r. Bu, duyarl\u0131 tasar\u0131m (responsive design) ilkelerinin temelini olu\u015fturur.<\/p>\n<h4>CSS’i HTML’e Ba\u011flama Yollar\u0131<\/h4>\n<p>CSS kodlar\u0131n\u0131 HTML belgesine dahil etmenin \u00fc\u00e7 temel yolu vard\u0131r:<\/p>\n<p>1. <strong>Harici Stil Sayfalar\u0131 (External Style Sheets):<\/strong> En \u00e7ok tercih edilen ve \u00f6nerilen y\u00f6ntemdir. CSS kodlar\u0131 ayr\u0131 bir <code>.css<\/code> uzant\u0131l\u0131 dosyada saklan\u0131r ve HTML belgesine <code><link><\/code> etiketi arac\u0131l\u0131\u011f\u0131yla ba\u011flan\u0131r.<\/p>\n<div class=\"code-container\"><\/div>\n<p> Bu y\u00f6ntem, i\u00e7eri\u011fi ve tasar\u0131m\u0131 tamamen ay\u0131r\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve sitenin genelinde tutarl\u0131l\u0131k sa\u011flar.<br \/>\n2. <strong>Dahili Stil Sayfalar\u0131 (Internal Style Sheets):<\/strong> CSS kodlar\u0131, HTML belgesinin <code><head><\/code> b\u00f6l\u00fcm\u00fcnde yer alan <code><\/p>\n<style><\/code> etiketleri aras\u0131na yaz\u0131l\u0131r.<\/p>\n<div class=\"code-container\"><\/div>\n<p> Bu y\u00f6ntem, tek bir sayfa i\u00e7in \u00f6zel stiller tan\u0131mlamak gerekti\u011finde kullan\u0131\u015fl\u0131 olabilir, ancak birden fazla sayfa i\u00e7in tutarl\u0131l\u0131k sa\u011flamada yetersiz kal\u0131r.<br \/>\n3. <strong>Sat\u0131r \u0130\u00e7i Stiller (Inline Styles):<\/strong> CSS kodlar\u0131 do\u011frudan HTML etiketlerinin i\u00e7ine, <code>style<\/code> \u00f6zelli\u011fi kullan\u0131larak yaz\u0131l\u0131r.<\/p>\n<div class=\"code-container\">\n<pre><code>\n <p style=\"color: blue; font-size: 16px;\">Bu paragraf\u0131n kendine \u00f6zg\u00fc bir stili var.<\/p>\n <\/code><\/pre>\n<\/p><\/div>\n<p> Bu y\u00f6ntem <strong>genellikle \u00f6nerilmez<\/strong>, \u00e7\u00fcnk\u00fc i\u00e7eri\u011fi ve tasar\u0131m\u0131 birbirine kar\u0131\u015ft\u0131r\u0131r, kodun okunabilirli\u011fini azalt\u0131r ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Acil ve \u00e7ok spesifik durumlar d\u0131\u015f\u0131nda ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.<\/p>\n<h4>CSS Se\u00e7iciler ve Temel \u00d6zellikler<\/h4>\n<p>CSS, HTML elementlerini se\u00e7mek ve onlara stil uygulamak i\u00e7in se\u00e7iciler (selectors) kullan\u0131r.<\/p>\n<p>* <strong>Element Se\u00e7ici:<\/strong> Do\u011frudan HTML elementinin ad\u0131n\u0131 kullanarak stil uygular.<\/p>\n<div class=\"code-container\">\n<pre><code>\n p {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n }\n <\/code><\/pre>\n<\/p><\/div>\n<p>* <strong>S\u0131n\u0131f Se\u00e7ici (Class Selector):<\/strong> HTML elementlerine <code>class<\/code> \u00f6zelli\u011fi ile atanan bir s\u0131n\u0131f ad\u0131na g\u00f6re stil uygular. Bir s\u0131n\u0131fa birden fazla element sahip olabilir.<\/p>\n<div class=\"code-container\">\n<pre><code>\n .ozel-metin {\n color: green;\n font-weight: bold;\n }\n <\/code><\/pre>\n<\/p><\/div>\n<p> HTML'de kullan\u0131m\u0131: <code><p class="ozel-metin">Bu \u00f6zel bir metin.<\/p><\/code><br \/>\n* <strong>ID Se\u00e7ici:<\/strong> HTML elementlerine <code>id<\/code> \u00f6zelli\u011fi ile atanan benzersiz bir kimli\u011fe g\u00f6re stil uygular. Bir ID, bir sayfada yaln\u0131zca bir kez kullan\u0131lmal\u0131d\u0131r.<\/p>\n<div class=\"code-container\">\n<pre><code>\n #ana-baslik {\n text-align: center;\n margin-bottom: 20px;\n }\n <\/code><\/pre>\n<\/p><\/div>\n<p> HTML'de kullan\u0131m\u0131: <code><h1 id="ana-baslik">Sayfa Ba\u015fl\u0131\u011f\u0131<\/h1><\/code><\/p>\n<p><strong>Temel CSS \u00d6zellikleri:<\/strong><\/p>\n<p>* <code>color<\/code>: Metin rengini ayarlar.<br \/>\n* <code>background-color<\/code>: Elementin arka plan rengini ayarlar.<br \/>\n* <code>font-size<\/code>: Yaz\u0131 tipi boyutunu ayarlar.<br \/>\n* <code>font-family<\/code>: Yaz\u0131 tipi ailesini ayarlar.<br \/>\n* <code>text-align<\/code>: Metnin hizalamas\u0131n\u0131 (left, right, center, justify) ayarlar.<br \/>\n* <code>margin<\/code>: Elementin d\u0131\u015f bo\u015flu\u011funu (di\u011fer elementlerle aras\u0131ndaki bo\u015fluk) ayarlar.<br \/>\n* <code>padding<\/code>: Elementin i\u00e7 bo\u015flu\u011funu (i\u00e7eri\u011fi ile kenarl\u0131\u011f\u0131 aras\u0131ndaki bo\u015fluk) ayarlar.<br \/>\n* <code>border<\/code>: Elementin kenarl\u0131\u011f\u0131n\u0131 ayarlar (kal\u0131nl\u0131k, stil, renk).<\/p>\n<p>CSS, web sayfalar\u0131m\u0131za g\u00f6rsel bir kimlik kazand\u0131rarak onlar\u0131 kullan\u0131c\u0131lar i\u00e7in daha \u00e7ekici ve anla\u015f\u0131l\u0131r hale getirir. Do\u011fru CSS kullan\u0131m\u0131, sadece estetik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan da kritik \u00f6neme sahiptir. Bu temel bilgileri \u00f6\u011frenerek, web projelerinize profesyonel bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131n ilk ad\u0131mlar\u0131n\u0131 atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n<h3>HTML ve CSS Birlikte Nas\u0131l \u00c7al\u0131\u015f\u0131r: Ger\u00e7ek Bir Web Sayfas\u0131 Olu\u015fturma<\/h3>\n<p>HTML ve CSS, web geli\u015ftirmenin iki ayr\u0131lmaz par\u00e7as\u0131d\u0131r. HTML, bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini tan\u0131mlarken, CSS bu yap\u0131ya g\u00f6rsel stil ve d\u00fczen kazand\u0131r\u0131r. Bu iki dilin uyumlu \u00e7al\u0131\u015fmas\u0131, modern ve kullan\u0131c\u0131 dostu web sitelerinin temelini olu\u015fturur. \u015eimdi, bu iki teknolojiyi bir araya getirerek basit bir web sayfas\u0131 \u00f6rne\u011fi olu\u015ftural\u0131m ve ad\u0131m ad\u0131m nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131n\u0131 g\u00f6relim.<\/p>\n<p>Hayal edelim ki, k\u00fc\u00e7\u00fck bir yerel kahve d\u00fckkan\u0131 i\u00e7in basit bir tan\u0131t\u0131m sayfas\u0131 haz\u0131rl\u0131yoruz. Bu sayfa bir ba\u015fl\u0131k, bir tan\u0131t\u0131m metni, bir g\u00f6rsel ve bir ileti\u015fim bilgisi i\u00e7erecek.<\/p>\n<h4>Ad\u0131m 1: HTML \u0130skeletini Olu\u015fturma<\/h4>\n<p>\u0130lk olarak, sayfan\u0131n temel yap\u0131s\u0131n\u0131 <code>index.html<\/code> ad\u0131nda bir dosya olu\u015fturarak belirleyelim. Bu dosya, sayfan\u0131n ana ba\u015fl\u0131\u011f\u0131n\u0131, bir paragraf\u0131, bir g\u00f6rseli ve ileti\u015fim bilgilerini i\u00e7erecek.<\/p>\n<div class=\"code-container\">\n<pre><code class=\"language-html\"><\/p>\n<header>\n<h1>Lezzetli Kahve Dura\u011f\u0131'na Ho\u015f Geldiniz!<\/h1>\n<p class=\"slogan\">G\u00fcn\u00fcn\u00fcz\u00fc tatland\u0131racak kahveler...<\/p>\n<\/header>\n<p> <main><\/p>\n<section class=\"hakkimizda\">\n<h2>Hakk\u0131m\u0131zda<\/h2>\n<p>Lezzetli Kahve Dura\u011f\u0131 olarak, sabah kahvenizden ak\u015fam sohbetlerinize kadar her an\u0131n\u0131za e\u015flik edecek en taze \u00e7ekirdeklerden haz\u0131rlanm\u0131\u015f \u00f6zel kahveler sunuyoruz. Misafirlerimize s\u0131cak bir ortam ve unutulmaz lezzetler vadediyoruz.<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\" alt=\"Kahve D\u00fckkan\u0131 \u0130\u00e7 Mekan\u0131\"><\/p>\n<p>Her fincan\u0131m\u0131zda kalite ve tutku var. Gelin, e\u015fsiz kahve deneyimimizi ke\u015ffedin.<\/p>\n<\/section>\n<section class=\"iletisim\">\n<h2>Bize Ula\u015f\u0131n<\/h2>\n<ul>\n<li>Adres: \u00d6rnek Cad. No:123, Kahve \u015eehri<\/li>\n<li>Telefon: 0 (XXX) XXX XX XX<\/li>\n<li>E-posta: info@lezzetlikahve.com<\/li>\n<\/ul>\n<\/section>\n<p> <\/main><\/p>\n<footer>\n<p>© 2023 Lezzetli Kahve Dura\u011f\u0131. T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n<\/footer>\n<div class=\"github-example-link\"><strong>\u00d6rnek kod:<\/strong> <a href=\"https:\/\/github.com\/fatihsoysalcom\/basic-html-structure-and-tags\" target=\"_blank\" rel=\"noopener noreferrer\">github.com\/fatihsoysalcom\/basic-html-structure-and-tags<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"Ana Ba\u015fl\u0131k Alt Ba\u015fl\u0131k Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k * Paragraflar (Paragraphs): Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in etiketi kullan\u0131l\u0131r. Bu, bir paragraf metnidir.","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-43206","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Alt Ba\u015fl\u0131k - 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\/alt-baslik\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Alt Ba\u015fl\u0131k\" \/>\n<meta property=\"og:description\" content=\"Ana Ba\u015fl\u0131k Alt Ba\u015fl\u0131k Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k * Paragraflar (Paragraphs): Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in etiketi kullan\u0131l\u0131r. Bu, bir paragraf metnidir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-09T18:06:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T18:06:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\" \/>\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=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Alt Ba\u015fl\u0131k\",\"datePublished\":\"2026-07-09T18:06:05+00:00\",\"dateModified\":\"2026-07-09T18:06:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\"},\"wordCount\":1490,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\",\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\",\"name\":\"Alt Ba\u015fl\u0131k - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\",\"datePublished\":\"2026-07-09T18:06:05+00:00\",\"dateModified\":\"2026-07-09T18:06:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage\",\"url\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\",\"contentUrl\":\"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Alt Ba\u015fl\u0131k\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Alt Ba\u015fl\u0131k - 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\/alt-baslik\/","og_locale":"tr_TR","og_type":"article","og_title":"Alt Ba\u015fl\u0131k","og_description":"Ana Ba\u015fl\u0131k Alt Ba\u015fl\u0131k Daha K\u00fc\u00e7\u00fck Alt Ba\u015fl\u0131k * Paragraflar (Paragraphs): Metin bloklar\u0131n\u0131 olu\u015fturmak i\u00e7in etiketi kullan\u0131l\u0131r. Bu, bir paragraf metnidir.","og_url":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-09T18:06:05+00:00","article_modified_time":"2026-07-09T18:06:20+00:00","og_image":[{"url":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","type":"","width":"","height":""}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Alt Ba\u015fl\u0131k","datePublished":"2026-07-09T18:06:05+00:00","dateModified":"2026-07-09T18:06:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"},"wordCount":1490,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","url":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/","name":"Alt Ba\u015fl\u0131k - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","datePublished":"2026-07-09T18:06:05+00:00","dateModified":"2026-07-09T18:06:20+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/alt-baslik\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#primaryimage","url":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani","contentUrl":"https:\/\/via.placeholder.com\/600x400\/FFD700\/000000?text=Kahve+Dukkani"},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/alt-baslik\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Alt Ba\u015fl\u0131k"}]},{"@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\/43206","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=43206"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43206\/revisions"}],"predecessor-version":[{"id":43207,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43206\/revisions\/43207"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}