Markdown’a G\u00f6rsel Ekleme Rehberi: Ad\u0131m Ad\u0131m Resim Kullan\u0131m\u0131<\/title><br \/>\n<body><\/p>\n<p>Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir. Markdown, bu s\u00fcreci inan\u0131lmaz derecede basitle\u015ftirerek, yaz\u0131lar\u0131n\u0131za kolayca resim eklemenize olanak tan\u0131r. Bu rehberde, Markdown’da g\u00f6rsel eklemenin temel y\u00f6ntemlerinden ileri seviye tekniklere kadar her \u015feyi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<h2>Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?<\/h2>\n<p>Markdown, d\u00fcz metin dosyalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kullan\u0131lan hafif bir i\u015faretleme dilidir. Basit ve okunabilir s\u00f6zdizimi sayesinde, geli\u015ftiriciler, yazarlar ve i\u00e7erik \u00fcreticileri aras\u0131nda h\u0131zla pop\u00fclerlik kazanm\u0131\u015ft\u0131r. GitHub, Reddit, Slack gibi bir\u00e7ok platformda yayg\u0131n olarak kullan\u0131l\u0131r ve blog yaz\u0131lar\u0131ndan teknik dok\u00fcmantasyonlara, hatta ki\u015fisel notlara kadar geni\u015f bir yelpazede kar\u015f\u0131m\u0131za \u00e7\u0131kar. Markdown’\u0131n temel amac\u0131, i\u00e7eri\u011fi h\u0131zl\u0131 ve etkili bir \u015fekilde bi\u00e7imlendirmek, b\u00f6ylece yazarlar\u0131n i\u00e7eri\u011fe odaklanmas\u0131n\u0131 sa\u011flamakt\u0131r. HTML’e g\u00f6re \u00e7ok daha az karma\u015f\u0131k olmas\u0131, \u00f6\u011frenme e\u011frisini d\u00fc\u015f\u00fcr\u00fcr ve yaz\u0131m s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n<p>Peki, Markdown gibi metin a\u011f\u0131rl\u0131kl\u0131 bir dilde g\u00f6rseller neden bu kadar \u00f6nemlidir? G\u00f6rseller, sadece estetik birer \u00f6\u011fe olman\u0131n \u00f6tesinde, bilginin aktar\u0131m\u0131nda kritik bir rol oynar. Uzun ve yo\u011fun metin bloklar\u0131, okuyucunun dikkatini da\u011f\u0131tabilir ve yorgunlu\u011fa yol a\u00e7abilir. Bu noktada, g\u00f6rseller devreye girerek metni b\u00f6ler, okuyucunun g\u00f6z\u00fcn\u00fc dinlendirir ve i\u00e7eri\u011fin daha sindirilebilir hale gelmesini sa\u011flar. \u00d6rne\u011fin, bir yaz\u0131l\u0131m rehberinde ad\u0131m ad\u0131m ekran g\u00f6r\u00fcnt\u00fcleri kullanmak, kullan\u0131c\u0131lar\u0131n talimatlar\u0131 \u00e7ok daha kolay takip etmesine yard\u0131mc\u0131 olur. Bir \u00fcr\u00fcn incelemesinde \u00fcr\u00fcn\u00fcn farkl\u0131 a\u00e7\u0131lardan \u00e7ekilmi\u015f foto\u011fraflar\u0131, potansiyel al\u0131c\u0131lar\u0131n karar verme s\u00fcrecini olumlu y\u00f6nde etkiler. G\u00f6rseller ayr\u0131ca, soyut kavramlar\u0131 somutla\u015ft\u0131rmaya, verileri g\u00f6rselle\u015ftirmeye ve hatta okuyucuda belirli duygusal tepkiler uyand\u0131rmaya da yarar. \u0130yi se\u00e7ilmi\u015f bir g\u00f6rsel, bin kelimeye bedeldir s\u00f6z\u00fcn\u00fcn hakk\u0131n\u0131 vererek, karma\u015f\u0131k bir fikri an\u0131nda iletebilir. Dahas\u0131, g\u00f6rseller SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Do\u011fru alt metinleri ve ba\u015fl\u0131klar\u0131 ile g\u00f6rseller, arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi daha iyi anlamas\u0131na ve g\u00f6rsel aramalarda g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fcz\u00fc art\u0131rmas\u0131na yard\u0131mc\u0131 olur. Bu nedenle, Markdown ile olu\u015fturdu\u011funuz i\u00e7eriklerde g\u00f6rselleri etkin bir \u015fekilde kullanmak, hem kullan\u0131c\u0131 deneyimini iyile\u015ftirmek hem de i\u00e7eri\u011finizin genel etkinli\u011fini art\u0131rmak i\u00e7in vazge\u00e7ilmezdir.<\/p>\n<h2>Temel Markdown G\u00f6rsel Ekleme Y\u00f6ntemleri Nelerdir?<\/h2>\n<p>Markdown’da g\u00f6rsel eklemek olduk\u00e7a basittir ve genellikle iki ana y\u00f6ntemle yap\u0131l\u0131r: dahili (inline) ba\u011flant\u0131lar ve referans tipi ba\u011flant\u0131lar. Her iki y\u00f6ntem de kendi i\u00e7inde avantajlara sahiptir ve kullan\u0131m senaryolar\u0131na g\u00f6re tercih edilebilir. Bu b\u00f6l\u00fcmde, her iki y\u00f6ntemi de detayl\u0131ca inceleyerek, nas\u0131l uyguland\u0131klar\u0131n\u0131 ve hangi durumlarda daha uygun olduklar\u0131n\u0131 a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n<h3>Dahili (Inline) G\u00f6rsel Ba\u011flant\u0131lar\u0131 Nas\u0131l Eklenir?<\/h3>\n<p>Dahili g\u00f6rsel ba\u011flant\u0131lar\u0131, Markdown’da resim eklemenin en yayg\u0131n ve do\u011frudan yoludur. Bu y\u00f6ntem, g\u00f6rselin URL’sini ve alternatif metnini do\u011frudan g\u00f6rselin eklenece\u011fi yere yazmay\u0131 i\u00e7erir. S\u00f6zdizimi olduk\u00e7a basittir ve hemen hemen t\u00fcm Markdown yorumlay\u0131c\u0131lar\u0131 taraf\u0131ndan desteklenir. Temel yap\u0131s\u0131 \u015fu \u015fekildedir: <code>![Alt Metni](resim-url.jpg \"Ba\u015fl\u0131k\")<\/code>.<\/p>\n<ul>\n<li><strong>Alt Metni (Alternative Text):<\/strong> Bu k\u0131s\u0131m, g\u00f6rselin i\u00e7eri\u011fini k\u0131sa ve a\u00e7\u0131klay\u0131c\u0131 bir \u015fekilde anlatan metindir. K\u00f6\u015feli parantezler <code>[]<\/code> aras\u0131na yaz\u0131l\u0131r. En \u00f6nemli i\u015flevlerinden biri, g\u00f6rselin y\u00fcklenememesi durumunda kullan\u0131c\u0131ya ne oldu\u011funu bildirmesidir. Ayr\u0131ca, g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in ekran okuyucular taraf\u0131ndan okunur ve g\u00f6rselin anlam\u0131n\u0131 aktar\u0131r. SEO a\u00e7\u0131s\u0131ndan da kritik bir \u00f6neme sahiptir, \u00e7\u00fcnk\u00fc arama motorlar\u0131 g\u00f6rselleri anlamak i\u00e7in bu metni kullan\u0131r. Bu nedenle, anahtar kelimelerle zenginle\u015ftirilmi\u015f, ancak do\u011fal duran alt metinler kullanmak \u00f6nemlidir. \u00d6rne\u011fin, bir “Markdown logosu” g\u00f6rseli i\u00e7in “Markdown logosu” veya “Markdown i\u015faretleme dili logosu” gibi alt metinler idealdir.<\/li>\n<li><strong>Resim URL’si (Image URL):<\/strong> G\u00f6rselin internet \u00fczerindeki konumunu veya yerel dosya yolunu belirten adrestir. Parantezler <code>()<\/code> aras\u0131na yaz\u0131l\u0131r. Bu bir web sitesindeki bir g\u00f6rselin URL’si (\u00f6rn: <code>https:\/\/example.com\/resimler\/logo.png<\/code>) olabilece\u011fi gibi, Markdown dosyan\u0131zla ayn\u0131 dizinde veya alt dizinlerde bulunan yerel bir dosyan\u0131n yolu da olabilir (\u00f6rn: <code>.\/resimler\/logo.png<\/code> veya <code>..\/ortak\/gorsel.jpg<\/code>). Yerel dosyalar\u0131 kullan\u0131rken, yolun do\u011fru oldu\u011fundan ve dosyan\u0131n eri\u015filebilir oldu\u011fundan emin olmal\u0131s\u0131n\u0131z.<\/li>\n<li><strong>Ba\u015fl\u0131k (Title):<\/strong> \u0130ste\u011fe ba\u011fl\u0131 bir \u00f6zelliktir ve \u00e7ift t\u0131rnaklar <code>\"\"<\/code> i\u00e7inde resim URL’sinden sonra yer al\u0131r. Fare imleci g\u00f6rselin \u00fczerine geldi\u011finde bir ipucu olarak g\u00f6r\u00fcn\u00fcr. Kullan\u0131c\u0131ya g\u00f6rsel hakk\u0131nda ek bilgi vermek veya ba\u011flam sa\u011flamak i\u00e7in kullan\u0131labilir. SEO etkisi alt metin kadar g\u00fc\u00e7l\u00fc olmasa da, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir.<\/li>\n<\/ul>\n<p>Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m:<\/p>\n<pre><code>\n ![Markdown Logosu](https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/48\/Markdown-mark.svg \"Markdown \u0130\u015faretleme Dili Logosu\")\n <\/code><\/pre>\n<p>Bu kod blo\u011fu, Wikipedia’dan bir Markdown logosunu sayfan\u0131za ekleyecektir. Alt metni “Markdown Logosu” olacak ve fare g\u00f6rselin \u00fczerine geldi\u011finde “Markdown \u0130\u015faretleme Dili Logosu” ba\u015fl\u0131\u011f\u0131 g\u00f6r\u00fcnecektir. Bu y\u00f6ntem, \u00f6zellikle tek seferlik g\u00f6rsel kullan\u0131mlar\u0131 veya k\u0131sa belgeler i\u00e7in olduk\u00e7a pratiktir.<\/p>\n<h3>Referans Tipi G\u00f6rsel Ba\u011flant\u0131lar\u0131 Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n<p>Referans tipi g\u00f6rsel ba\u011flant\u0131lar\u0131, \u00f6zellikle uzun belgelerde veya ayn\u0131 g\u00f6rselin birden fazla yerde kullan\u0131ld\u0131\u011f\u0131 durumlarda i\u00e7eri\u011fi daha d\u00fczenli ve okunabilir hale getirmek i\u00e7in tercih edilir. Bu y\u00f6ntem, g\u00f6rselin URL’sini ve ba\u015fl\u0131\u011f\u0131n\u0131 belgenin farkl\u0131 bir yerinde (genellikle en alt\u0131nda) tan\u0131mlaman\u0131za olanak tan\u0131r ve g\u00f6rseli eklemek istedi\u011finizde bu tan\u0131ma referans verirsiniz. S\u00f6zdizimi, referans tipi ba\u011flant\u0131lara benzerdir ve iki b\u00f6l\u00fcmden olu\u015fur:<\/p>\n<ol>\n<li><strong>G\u00f6rselin Eklenece\u011fi Yer:<\/strong> <code>![Alt Metni][referans-kimli\u011fi]<\/code><\/li>\n<li><strong>Referans Tan\u0131m\u0131:<\/strong> <code>[referans-kimli\u011fi]: resim-url.jpg \"Ba\u015fl\u0131k\"<\/code><\/li>\n<\/ol>\n<ul>\n<li><strong>Referans Kimli\u011fi (Reference ID):<\/strong> K\u00f6\u015feli parantezler <code>[]<\/code> aras\u0131na yaz\u0131lan benzersiz bir tan\u0131mlay\u0131c\u0131d\u0131r. Bu kimlik, g\u00f6rselin eklenece\u011fi yerde kullan\u0131l\u0131r ve referans tan\u0131m\u0131yla e\u015fle\u015fmelidir. Genellikle k\u00fc\u00e7\u00fck harfler ve k\u0131sa, anlaml\u0131 kelimelerden olu\u015fur.<\/li>\n<li><strong>Referans Tan\u0131m\u0131:<\/strong> Bu k\u0131s\u0131m, referans kimli\u011finin neye kar\u015f\u0131l\u0131k geldi\u011fini belirtir. Genellikle belgenin sonunda, di\u011fer referans tan\u0131mlar\u0131n\u0131n yan\u0131nda toplan\u0131r. Bu, i\u00e7eri\u011fin \u00fcst k\u0131s\u0131mlar\u0131n\u0131n daha temiz kalmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n<p>Referans tipi ba\u011flant\u0131lar\u0131n avantajlar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Okunabilirlik:<\/strong> Uzun URL’ler metin i\u00e7inde karma\u015f\u0131kl\u0131\u011fa neden olabilir. Referans tipi ba\u011flant\u0131lar, metin ak\u0131\u015f\u0131n\u0131 bozmadan g\u00f6rsel eklemenizi sa\u011flar.<\/li>\n<li><strong>Tekrar Kullan\u0131labilirlik:<\/strong> Ayn\u0131 g\u00f6rseli belgenin farkl\u0131 yerlerinde kullanman\u0131z gerekti\u011finde, URL’yi her seferinde tekrar yazmak yerine sadece referans kimli\u011fini kullanman\u0131z yeterlidir. Bu, hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r ve g\u00fcncellemeleri kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Bir g\u00f6rselin URL’si de\u011fi\u015fti\u011finde, sadece referans tan\u0131m\u0131n\u0131 g\u00fcncellemeniz yeterlidir; g\u00f6rselin kullan\u0131ld\u0131\u011f\u0131 t\u00fcm yerler otomatik olarak g\u00fcncellenir.<\/li>\n<\/ul>\n<p>\u00d6rnek bir kullan\u0131m senaryosu:<\/p>\n<pre><code>\n Bu, bir Markdown belgesinde kullan\u0131lan ilk g\u00f6rsel \u00f6rne\u011fidir:\n ![Markdown \u0130konu][markdown-icon]\n\n Ayr\u0131ca bu ikonu ba\u015fka bir yerde de kullanabiliriz:\n ![K\u00fc\u00e7\u00fck Markdown \u0130konu][markdown-icon]\n\n Belgenin sonunda referans tan\u0131mlar\u0131:\n [markdown-icon]: \/assets\/images\/markdown-icon.png \"Markdown Sembol\u00fc\"\n <\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>markdown-icon<\/code> referans kimli\u011fi iki farkl\u0131 yerde kullan\u0131lm\u0131\u015f ve g\u00f6rselin tan\u0131m\u0131 belgenin sonunda yap\u0131lm\u0131\u015ft\u0131r. B\u00f6ylece, <code>\/assets\/images\/markdown-icon.png<\/code> yolu de\u011fi\u015fse bile, sadece tek bir sat\u0131r\u0131 g\u00fcncelleyerek t\u00fcm kullan\u0131mlar\u0131 d\u00fczeltebiliriz. Bu y\u00f6ntem, \u00f6zellikle b\u00fcy\u00fck projelerde veya birden fazla yazar\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 durumlarda i\u015f ak\u0131\u015f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n<h2>G\u00f6rsel Boyutland\u0131rma ve Hizalama Teknikleri Var m\u0131d\u0131r?<\/h2>\n<p>Standart Markdown s\u00f6zdizimi, ne yaz\u0131k ki g\u00f6rselleri do\u011frudan boyutland\u0131rma veya hizalama yetene\u011fi sunmaz. Markdown’\u0131n temel felsefesi, i\u00e7eri\u011fe odaklanmak ve bi\u00e7imlendirmeyi en aza indirmektir. Ancak, modern web geli\u015ftirme ve i\u00e7erik y\u00f6netimi ihtiya\u00e7lar\u0131, g\u00f6rsellerin boyutland\u0131r\u0131lmas\u0131 ve sayfa d\u00fczenine uygun \u015fekilde hizalanmas\u0131n\u0131 zorunlu k\u0131lar. Bu noktada, Markdown’\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri olan HTML ile uyumlulu\u011fu devreye girer. Markdown dosyalar\u0131 genellikle HTML’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc\u011f\u00fc i\u00e7in, do\u011frudan HTML <code><img><\/code> etiketini kullanarak bu t\u00fcr geli\u015fmi\u015f \u00f6zellikleri uygulayabiliriz.<\/p>\n<h3>HTML <code><img><\/code> Etiketini Kullanarak Boyutland\u0131rma ve Hizalama<\/h3>\n<p>Markdown dosyan\u0131z\u0131n i\u00e7ine do\u011frudan HTML <code><img><\/code> etiketini ekleyerek, g\u00f6rseller \u00fczerinde \u00e7ok daha fazla kontrol sahibi olabilirsiniz. Bu, Markdown’\u0131n g\u00fcc\u00fcn\u00fc HTML’in esnekli\u011fiyle birle\u015ftiren yayg\u0131n bir y\u00f6ntemdir. \u0130\u015fte temel bir \u00f6rnek:<\/p>\n<pre><code>\n <img src=\"\/assets\/images\/ornek-gorsel.jpg\" alt=\"\u00d6rnek bir manzara foto\u011fraf\u0131\" width=\"600\" height=\"400\">\n <\/code><\/pre>\n<p>Bu \u00f6rnekte:<\/p>\n<ul>\n<li><code>src<\/code>: G\u00f6rselin dosya yolunu veya URL’sini belirtir. Markdown’daki <code>resim-url.jpg<\/code> ile ayn\u0131 i\u015flevi g\u00f6r\u00fcr.<\/li>\n<li><code>alt<\/code>: G\u00f6rselin alternatif metnidir ve eri\u015filebilirlik ile SEO i\u00e7in kritik \u00f6neme sahiptir.<\/li>\n<li><code>width<\/code> ve <code>height<\/code>: G\u00f6rselin piksel cinsinden geni\u015fli\u011fini ve y\u00fcksekli\u011fini belirlemenizi sa\u011flar. Bu \u00f6zellikler, g\u00f6rselin taray\u0131c\u0131 taraf\u0131ndan y\u00fcklenmeden \u00f6nce yer ayr\u0131lmas\u0131n\u0131 sa\u011flayarak sayfa d\u00fczeni kaymalar\u0131n\u0131 (Cumulative Layout Shift – CLS) \u00f6nlemeye yard\u0131mc\u0131 olur. Ancak, bu de\u011ferlerin g\u00f6rselin ger\u00e7ek oranlar\u0131n\u0131 bozmamas\u0131na dikkat etmek gerekir. Genellikle sadece <code>width<\/code> veya <code>height<\/code> de\u011ferlerinden birini belirlemek, di\u011ferinin otomatik olarak orant\u0131l\u0131 bir \u015fekilde ayarlanmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n<p>Hizalama i\u00e7in ise, do\u011frudan HTML <code><img><\/code> etiketinin kendisine bir <code>align<\/code> \u00f6zelli\u011fi eklemek modern HTML ve CSS uygulamalar\u0131nda \u00f6nerilmez. Bunun yerine, g\u00f6rselleri bir <code><div><\/code> veya <code><p><\/code> etiketi i\u00e7ine al\u0131p, bu kapsay\u0131c\u0131ya CSS ile stil vermek daha do\u011fru bir yakla\u015f\u0131md\u0131r. \u00d6rne\u011fin, bir g\u00f6rseli ortalamak i\u00e7in:<\/p>\n<pre><code>\n <div style=\"text-align: center;\">\n <img src=\"\/assets\/images\/ortalanmis-gorsel.jpg\" alt=\"Ortalanm\u0131\u015f bir g\u00f6rsel\" width=\"700\">\n <\/div>\n <\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte <code>style=\"text-align: center;\"<\/code> inline CSS kullan\u0131lm\u0131\u015ft\u0131r, ancak makalenin genel kurallar\u0131 gere\u011fi, bu t\u00fcr stil tan\u0131mlamalar\u0131n\u0131n d\u0131\u015f CSS dosyalar\u0131 arac\u0131l\u0131\u011f\u0131yla yap\u0131lmas\u0131 idealdir. Ancak Markdown i\u00e7inde h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm olarak g\u00f6sterilebilir. Daha iyi bir yakla\u015f\u0131m, bir CSS s\u0131n\u0131f\u0131 tan\u0131mlay\u0131p onu kullanmakt\u0131r:<\/p>\n<pre><code>\n \n <img src=\"\/assets\/images\/ortalanmis-gorsel.jpg\" alt=\"Ortalanm\u0131\u015f bir g\u00f6rsel\" class=\"ortalanmis-gorsel\" width=\"700\">\n\n \n <code>\n .ortalanmis-gorsel {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n <\/code>\n <\/code><\/pre>\n<p>Bu y\u00f6ntem, g\u00f6rseli blok seviyesinde bir \u00f6\u011fe yapar ve sol\/sa\u011f kenar bo\u015fluklar\u0131n\u0131 otomatik olarak ayarlayarak ortalar. Benzer \u015fekilde, float \u00f6zellikleri ile g\u00f6rselleri metin etraf\u0131nda kayd\u0131rmak (sol veya sa\u011fa hizalamak) da m\u00fcmk\u00fcnd\u00fcr:<\/p>\n<pre><code>\n <img src=\"\/assets\/images\/sol-hizali-gorsel.jpg\" alt=\"Sol hizal\u0131 g\u00f6rsel\" class=\"sol-hizali\" width=\"300\">\n <code>\n .sol-hizali {\n float: left;\n margin-right: 20px; \/* Metin ile g\u00f6rsel aras\u0131nda bo\u015fluk b\u0131rak\u0131r *\/\n }\n <\/code>\n <\/code><\/pre>\n<h3>Duyarl\u0131 (Responsive) G\u00f6rseller ve Modern Yakla\u015f\u0131mlar<\/h3>\n<p>G\u00fcn\u00fcm\u00fcz web d\u00fcnyas\u0131nda, i\u00e7eriklerin farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil) sorunsuz g\u00f6r\u00fcnmesi kritik \u00f6neme sahiptir. Bu ba\u011flamda, g\u00f6rsellerin duyarl\u0131 olmas\u0131 (responsive) gereklidir. HTML <code><img><\/code> etiketi ve CSS ile duyarl\u0131 g\u00f6rseller olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr:<\/p>\n<pre><code>\n <img src=\"\/assets\/images\/duyarli-gorsel.jpg\" alt=\"Duyarl\u0131 bir g\u00f6rsel \u00f6rne\u011fi\" class=\"duyarli\">\n\n <code>\n .duyarli {\n max-width: 100%; \/* G\u00f6rselin kapsay\u0131c\u0131s\u0131n\u0131 a\u015fmas\u0131n\u0131 engeller *\/\n height: auto; \/* Oranlar\u0131 korur *\/\n display: block; \/* Ortalamak i\u00e7in blok seviyesi yapar *\/\n margin: 0 auto; \/* Ortalar *\/\n }\n\n \/* K\u00fc\u00e7\u00fck ekranlar i\u00e7in medya sorgusu \u00f6rne\u011fi *\/\n @media (max-width: 768px) {\n .duyarli {\n width: 90%; \/* K\u00fc\u00e7\u00fck ekranlarda biraz daha k\u00fc\u00e7\u00fcltebiliriz *\/\n }\n }\n <\/code>\n <\/code><\/pre>\n<p><code>max-width: 100%;<\/code> ve <code>height: auto;<\/code> \u00f6zellikleri, g\u00f6rselin kapsay\u0131c\u0131s\u0131n\u0131n boyutlar\u0131na g\u00f6re otomatik olarak k\u00fc\u00e7\u00fclmesini ve orijinal oranlar\u0131n\u0131 korumas\u0131n\u0131 sa\u011flar. Medya sorgular\u0131 (<code>@media<\/code>), farkl\u0131 ekran boyutlar\u0131na g\u00f6re g\u00f6rsellerin stilini daha da \u00f6zelle\u015ftirmenize olanak tan\u0131r. \u00d6rne\u011fin, mobil cihazlarda g\u00f6rsellerin belirli bir y\u00fczdesini kaplamas\u0131n\u0131 sa\u011flayarak daha iyi bir kullan\u0131c\u0131 deneyimi sunabilirsiniz. Ayr\u0131ca, <code><picture><\/code> etiketi, farkl\u0131 ekran boyutlar\u0131 veya \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler i\u00e7in farkl\u0131 g\u00f6rsel kaynaklar\u0131 belirtmenizi sa\u011flayarak daha geli\u015fmi\u015f duyarl\u0131 g\u00f6rsel \u00e7\u00f6z\u00fcmleri sunar. Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan kritik olan durumlarda, taray\u0131c\u0131n\u0131n en uygun g\u00f6rseli se\u00e7mesini sa\u011flar.<\/p>\n<pre><code>\n <picture>\n <source srcset=\"\/assets\/images\/buyuk-ekran.webp\" media=\"(min-width: 1200px)\" type=\"image\/webp\">\n <source srcset=\"\/assets\/images\/orta-ekran.webp\" media=\"(min-width: 768px)\" type=\"image\/webp\">\n <img src=\"\/assets\/images\/kucuk-ekran.jpg\" alt=\"Farkl\u0131 boyutlarda uyarlanabilir g\u00f6rsel\">\n <\/picture>\n <\/code><\/pre>\n<p>Bu <code><picture><\/code> etiketi \u00f6rne\u011fi, taray\u0131c\u0131n\u0131n ekran geni\u015fli\u011fine g\u00f6re farkl\u0131 g\u00f6rsel formatlar\u0131n\u0131 (WebP) ve boyutlar\u0131n\u0131 y\u00fcklemesini sa\u011flar. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 optimize ederken, kullan\u0131c\u0131n\u0131n cihaz\u0131na en uygun g\u00f6rseli sunar. Markdown’\u0131n basitli\u011finden \u00f6d\u00fcn vermeden, HTML’in g\u00fcc\u00fcn\u00fc kullanarak g\u00f6rsellerinizi tam anlam\u0131yla kontrol edebilir ve modern web standartlar\u0131na uygun hale getirebilirsiniz.<\/p>\n<h2>G\u00f6rsel Eri\u015filebilirli\u011fi ve SEO \u0130\u00e7in En \u0130yi Uygulamalar Nelerdir?<\/h2>\n<p>Web i\u00e7eri\u011fi olu\u015ftururken, g\u00f6rsellerin sadece estetik veya bilgilendirici olmas\u0131 yeterli de\u011fildir; ayn\u0131 zamanda eri\u015filebilir ve arama motoru dostu olmas\u0131 da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Eri\u015filebilirlik, engelli kullan\u0131c\u0131lar\u0131n (\u00f6zellikle g\u00f6rme engellilerin) i\u00e7eri\u011finizi t\u00fcketebilmesini sa\u011flarken, SEO (Arama Motoru Optimizasyonu) i\u00e7eri\u011finizin arama motorlar\u0131nda daha \u00fcst s\u0131ralarda yer almas\u0131na yard\u0131mc\u0131 olur. Markdown’da g\u00f6rsel eklerken bu iki fakt\u00f6r\u00fc g\u00f6z \u00f6n\u00fcnde bulundurmak, i\u00e7eri\u011finizin daha geni\u015f bir kitleye ula\u015fmas\u0131n\u0131 ve daha etkili olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3><code>alt<\/code> Metninin \u00d6nemi (Eri\u015filebilirlik ve SEO)<\/h3>\n<p><code>alt<\/code> metni (alternatif metin), bir g\u00f6rselin temel tan\u0131mlay\u0131c\u0131s\u0131d\u0131r ve Markdown’da <code>![Alt Metni](...)<\/code> yap\u0131s\u0131n\u0131n ilk k\u0131sm\u0131n\u0131 olu\u015fturur. Bu metin, g\u00f6rselin y\u00fcklenemedi\u011fi durumlarda veya ekran okuyucular taraf\u0131ndan g\u00f6rselin i\u00e7eri\u011fini anlatmak i\u00e7in kullan\u0131l\u0131r. Eri\u015filebilirlik a\u00e7\u0131s\u0131ndan, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n bir g\u00f6rselin ne hakk\u0131nda oldu\u011funu anlamas\u0131 i\u00e7in hayati \u00f6neme sahiptir. Ekran okuyucular, bu metni okuyarak g\u00f6rselin ba\u011flam\u0131n\u0131 kullan\u0131c\u0131ya aktar\u0131r. Bu nedenle, <code>alt<\/code> metni k\u0131sa, a\u00e7\u0131klay\u0131c\u0131 ve g\u00f6rselin ana fikrini yans\u0131tan bir ifade olmal\u0131d\u0131r. \u00d6rne\u011fin, bir “k\u0131rm\u0131z\u0131 spor araba” g\u00f6rseli i\u00e7in sadece “araba” yerine “parlak k\u0131rm\u0131z\u0131 spor araba, yar\u0131\u015f pistinde” gibi daha detayl\u0131 bir a\u00e7\u0131klama daha faydal\u0131 olacakt\u0131r.<\/p>\n<p>SEO a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, <code>alt<\/code> metni, arama motorlar\u0131n\u0131n g\u00f6rselin i\u00e7eri\u011fini anlamas\u0131na yard\u0131mc\u0131 olan en \u00f6nemli sinyallerden biridir. Arama motorlar\u0131, g\u00f6rselleri do\u011frudan “g\u00f6remez”; bunun yerine, <code>alt<\/code> metni, dosya ad\u0131 ve \u00e7evresindeki metin gibi bilgilere dayanarak g\u00f6rselin neyle ilgili oldu\u011funu \u00e7\u0131kar\u0131r. Bu nedenle, <code>alt<\/code> metinlerinize ilgili anahtar kelimeleri do\u011fal bir \u015fekilde dahil etmek, g\u00f6rsellerinizin g\u00f6rsel aramalarda ve genel arama sonu\u00e7lar\u0131nda daha iyi performans g\u00f6stermesine yard\u0131mc\u0131 olabilir. Ancak anahtar kelime doldurmaktan (keyword stuffing) ka\u00e7\u0131nmak ve her zaman kullan\u0131c\u0131ya anlaml\u0131 bir deneyim sunmay\u0131 \u00f6n planda tutmak \u00f6nemlidir. Anlams\u0131z veya alakas\u0131z anahtar kelimelerle dolu <code>alt<\/code> metinleri, hem kullan\u0131c\u0131 deneyimini k\u00f6t\u00fcle\u015ftirir hem de arama motorlar\u0131 taraf\u0131ndan spam olarak alg\u0131lanabilir.<\/p>\n<h3><code>title<\/code> Metni (Ek Bilgi)<\/h3>\n<p><code>title<\/code> metni, Markdown’da iste\u011fe ba\u011fl\u0131 olarak eklenen ve fare imleci g\u00f6rselin \u00fczerine geldi\u011finde bir ipucu olarak g\u00f6r\u00fcnen metindir. <code>![Alt Metni](resim-url.jpg \"Ba\u015fl\u0131k\")<\/code> yap\u0131s\u0131n\u0131n son k\u0131sm\u0131d\u0131r. <code>alt<\/code> metni kadar kritik olmasa da, kullan\u0131c\u0131ya g\u00f6rsel hakk\u0131nda ek ba\u011flam veya bilgi sa\u011flamak i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, bir grafi\u011fin <code>alt<\/code> metni “Y\u0131ll\u0131k sat\u0131\u015f grafi\u011fi” iken, <code>title<\/code> metni “2020-2023 y\u0131llar\u0131 aras\u0131 k\u00fcresel sat\u0131\u015f trendleri” olabilir. SEO \u00fczerindeki etkisi <code>alt<\/code> metnine g\u00f6re daha azd\u0131r, ancak kullan\u0131c\u0131 deneyimini zenginle\u015ftirerek dolayl\u0131 olarak sitenin genel performans\u0131na katk\u0131da bulunabilir.<\/p>\n<h3>Anlaml\u0131 Dosya Adlar\u0131 ve G\u00f6rsel S\u0131k\u0131\u015ft\u0131rma<\/h3>\n<ul>\n<li><strong>Anlaml\u0131 Dosya Adlar\u0131:<\/strong> G\u00f6rsel dosyalar\u0131n\u0131z\u0131n adlar\u0131 da SEO i\u00e7in \u00f6nemlidir. <code>image123.jpg<\/code> gibi genel adlar yerine, g\u00f6rselin i\u00e7eri\u011fini yans\u0131tan anlaml\u0131 ve anahtar kelime i\u00e7eren adlar kullan\u0131n. \u00d6rne\u011fin, <code>kirmizi-spor-araba-yaris-pistinde.jpg<\/code> gibi bir dosya ad\u0131, arama motorlar\u0131n\u0131n g\u00f6rseli daha iyi indekslemesine yard\u0131mc\u0131 olur. Dosya adlar\u0131nda bo\u015fluk yerine tire (<code>-<\/code>) kullanmaya \u00f6zen g\u00f6sterin.<\/li>\n<li><strong>G\u00f6rsel S\u0131k\u0131\u015ft\u0131rma ve Performans:<\/strong> B\u00fcy\u00fck boyutlu g\u00f6rseller, web sayfalar\u0131n\u0131n yava\u015f y\u00fcklenmesine neden olur, bu da hem kullan\u0131c\u0131 deneyimini k\u00f6t\u00fcle\u015ftirir hem de SEO s\u0131ralamas\u0131n\u0131 olumsuz etkiler. G\u00f6rsellerinizi web i\u00e7in optimize edilmi\u015f formatlarda (JPEG, PNG, WebP) ve m\u00fcmk\u00fcn olan en d\u00fc\u015f\u00fck dosya boyutunda tutmaya \u00f6zen g\u00f6sterin. \u00c7e\u015fitli \u00e7evrimi\u00e7i ara\u00e7lar veya yaz\u0131l\u0131mlar (\u00f6rne\u011fin TinyPNG, ImageOptim) kullanarak g\u00f6rsellerinizi kaliteden \u00f6d\u00fcn vermeden s\u0131k\u0131\u015ft\u0131rabilirsiniz. Modern formatlar olan WebP ve AVIF, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131nda daha iyi kalite sunar ve bu formatlar\u0131 destekleyen taray\u0131c\u0131larda kullanmak sayfa performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/li>\n<li><strong>Lazy Loading (Tembel Y\u00fckleme):<\/strong> \u00d6zellikle uzun sayfalarda veya \u00e7ok say\u0131da g\u00f6rsel i\u00e7eren i\u00e7eriklerde, t\u00fcm g\u00f6rsellerin sayfa y\u00fcklenir y\u00fcklenmez y\u00fcklenmesi performans\u0131 d\u00fc\u015f\u00fcrebilir. Lazy loading (tembel y\u00fckleme), g\u00f6rsellerin sadece kullan\u0131c\u0131 ekran\u0131nda g\u00f6r\u00fcn\u00fcr hale geldi\u011finde y\u00fcklenmesini sa\u011flar. Bu, ilk sayfa y\u00fckleme s\u00fcresini k\u0131salt\u0131r ve bant geni\u015fli\u011finden tasarruf sa\u011flar. Modern taray\u0131c\u0131lar genellikle <code>loading=\"lazy\"<\/code> \u00f6zelli\u011fini destekler: <code><img src=\"gorsel.jpg\" alt=\"A\u00e7\u0131klama\" loading=\"lazy\"><\/code>. Bu \u00f6zelli\u011fi HTML <code><img><\/code> etiketlerinizde kullanarak performans\u0131 art\u0131rabilirsiniz.<\/li>\n<\/ul>\n<p>Bu en iyi uygulamalar\u0131 takip ederek, Markdown ile ekledi\u011finiz g\u00f6rsellerin hem t\u00fcm kullan\u0131c\u0131lar i\u00e7in eri\u015filebilir olmas\u0131n\u0131 hem de arama motorlar\u0131nda daha iyi performans g\u00f6stermesini sa\u011flayabilirsiniz. Bu, i\u00e7eri\u011finizin genel kalitesini ve etkisini art\u0131rman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h2>Modern Web Uygulamalar\u0131nda Markdown ve G\u00f6rsel Kullan\u0131m\u0131: Vaka Analizleri<\/h2>\n<p>Markdown’\u0131n sadeli\u011fi ve esnekli\u011fi, onu modern web uygulamalar\u0131nda i\u00e7erik olu\u015fturmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirmi\u015ftir. \u00d6zellikle blog platformlar\u0131, statik site olu\u015fturucular\u0131, dok\u00fcmantasyon sistemleri ve kod depolar\u0131 gibi alanlarda g\u00f6rsellerle birlikte Markdown kullan\u0131m\u0131 olduk\u00e7a yayg\u0131nd\u0131r. Bu b\u00f6l\u00fcmde, Markdown’\u0131n g\u00f6rsellerle birlikte nas\u0131l entegre edildi\u011fini ve farkl\u0131 platformlarda nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 vaka analizleri \u00fczerinden inceleyece\u011fiz.<\/p>\n<h3>Blog Platformlar\u0131 (Ghost, Jekyll, Hugo) ve Statik Site Olu\u015fturucular<\/h3>\n<p>Statik site olu\u015fturucular (Static Site Generators – SSG) ve modern blog platformlar\u0131, i\u00e7eriklerini Markdown format\u0131nda depolayarak h\u0131zl\u0131, g\u00fcvenli ve bak\u0131m\u0131 kolay web siteleri olu\u015fturmay\u0131 sa\u011flarlar. Bu platformlarda g\u00f6rsellerin y\u00f6netimi genellikle \u015fu \u015fekillerde ger\u00e7ekle\u015fir:<\/p>\n<ul>\n<li><strong>G\u00f6rsel Varl\u0131klar\u0131 Y\u00f6netme:<\/strong> Bu platformlar genellikle <code>\/assets<\/code> veya <code>\/static<\/code> gibi \u00f6zel dizinler sunar. Yazarlar, g\u00f6rsellerini bu dizinlere y\u00fckler ve Markdown dosyalar\u0131nda g\u00f6receli yollarla referans verirler. \u00d6rne\u011fin, <code>![Blog G\u00f6rseli](\/assets\/images\/yazi-kapak.jpg)<\/code> \u015feklinde bir kullan\u0131m yayg\u0131nd\u0131r. Bu yakla\u015f\u0131m, g\u00f6rsellerin s\u00fcr\u00fcm kontrol sistemleriyle (Git gibi) birlikte y\u00f6netilmesini kolayla\u015ft\u0131r\u0131r ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini basitle\u015ftirir.<\/li>\n<li><strong>Otomatik \u0130\u015fleme ve Optimizasyon:<\/strong> Bir\u00e7ok SSG, derleme (build) s\u00fcrecinde g\u00f6rselleri otomatik olarak optimize edebilir. Bu, g\u00f6rsellerin yeniden boyutland\u0131r\u0131lmas\u0131, s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131 veya farkl\u0131 formatlara (WebP gibi) d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi anlam\u0131na gelebilir. \u00d6rne\u011fin, Jekyll i\u00e7in <code>Jekyll-Picture-Tag<\/code> gibi eklentiler, duyarl\u0131 g\u00f6rseller olu\u015fturmak i\u00e7in <code><picture><\/code> etiketini otomatik olarak \u00fcretebilir. Bu, yazarlar\u0131n sadece temel Markdown s\u00f6zdizimini kullan\u0131rken, arka planda geli\u015fmi\u015f g\u00f6rsel optimizasyonlar\u0131ndan faydalanmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>Ger\u00e7ek D\u00fcnya Senaryosu:<\/strong> Bir teknik blog yazar\u0131, bir yaz\u0131l\u0131m rehberi haz\u0131rlarken ekran g\u00f6r\u00fcnt\u00fclerini Markdown dosyas\u0131na dahil etmek istiyor. G\u00f6rselleri <code>\/assets\/screenshots<\/code> klas\u00f6r\u00fcne kaydeder ve yaz\u0131s\u0131nda <code>![Ayarlar Ekran\u0131](\/assets\/screenshots\/settings.png \"Uygulama Ayarlar\u0131\")<\/code> \u015feklinde kullan\u0131r. Blog platformu, bu g\u00f6rselleri otomatik olarak WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve mobil cihazlar i\u00e7in optimize edilmi\u015f farkl\u0131 boyutlar\u0131n\u0131 olu\u015fturur, b\u00f6ylece okuyucular her cihazda h\u0131zl\u0131 ve kaliteli bir deneyim ya\u015far.<\/li>\n<\/ul>\n<h3>GitHub’da README Dosyalar\u0131 ve G\u00f6rseller<\/h3>\n<p>GitHub, yaz\u0131l\u0131m projeleri i\u00e7in bir kod deposu olman\u0131n yan\u0131 s\u0131ra, projeleri tan\u0131tmak ve belgelemek i\u00e7in de yayg\u0131n olarak kullan\u0131l\u0131r. Projelerin ana sayfas\u0131nda yer alan <code>README.md<\/code> dosyalar\u0131, genellikle Markdown format\u0131nda yaz\u0131l\u0131r ve projenin ne oldu\u011funu, nas\u0131l kuruldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klar. Bu README dosyalar\u0131nda g\u00f6rsellerin kullan\u0131m\u0131, projenin anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r:<\/p>\n<ul>\n<li><strong>Ekran G\u00f6r\u00fcnt\u00fcleri ve GIF’ler:<\/strong> Geli\u015ftiriciler, uygulamalar\u0131n\u0131n veya k\u00fct\u00fcphanelerinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6stermek i\u00e7in s\u0131k\u00e7a ekran g\u00f6r\u00fcnt\u00fcleri veya k\u0131sa animasyonlu GIF’ler kullan\u0131rlar. Bu, kullan\u0131c\u0131lar\u0131n projeyi h\u0131zl\u0131ca anlamas\u0131na ve potansiyel kullan\u0131c\u0131lar\u0131 veya katk\u0131da bulunanlar\u0131 \u00e7ekmesine yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir CLI arac\u0131 i\u00e7in \u00e7\u0131kt\u0131n\u0131n bir ekran g\u00f6r\u00fcnt\u00fcs\u00fc veya bir web uygulamas\u0131n\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn bir GIF’i, metinsel a\u00e7\u0131klamalardan \u00e7ok daha etkilidir.<\/li>\n<li><strong>G\u00f6rsel Depolama:<\/strong> GitHub depolar\u0131nda g\u00f6rseller genellikle projenin i\u00e7inde <code>\/images<\/code> veya <code>\/docs\/images<\/code> gibi bir klas\u00f6re y\u00fcklenir ve Markdown’da g\u00f6receli yollarla referans verilir. GitHub, bu g\u00f6rselleri otomatik olarak sunar. \u00d6rne\u011fin, <code>![Uygulama Aray\u00fcz\u00fc](.\/images\/app-screenshot.png)<\/code>.<\/li>\n<li><strong>Ger\u00e7ek D\u00fcnya Senaryosu:<\/strong> Bir a\u00e7\u0131k kaynak k\u00fct\u00fcphanesi geli\u015ftiricisi, k\u00fct\u00fcphanesinin kullan\u0131m\u0131yla ilgili bir <code>README.md<\/code> dosyas\u0131 olu\u015fturur. K\u00fct\u00fcphanenin temel fonksiyonlar\u0131n\u0131 g\u00f6steren birka\u00e7 kod \u00f6rne\u011fi ve bu kodlar\u0131n \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00f6steren ekran g\u00f6r\u00fcnt\u00fcleri ekler. Bu sayede, yeni kullan\u0131c\u0131lar k\u00fct\u00fcphanenin ne i\u015fe yarad\u0131\u011f\u0131n\u0131 ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 sadece README dosyas\u0131n\u0131 okuyarak h\u0131zla kavrayabilirler. G\u00f6rseller, karma\u015f\u0131k kurulum ad\u0131mlar\u0131n\u0131 veya \u00e7\u0131kt\u0131 formatlar\u0131n\u0131 g\u00f6rselle\u015ftirerek kullan\u0131c\u0131lar\u0131n daha az hata yapmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n<h3>Dok\u00fcmantasyon Sistemleri (MkDocs, Docusaurus)<\/h3>\n<p>Teknik dok\u00fcmantasyon, genellikle \u00e7ok say\u0131da g\u00f6rsel (diyagramlar, ekran g\u00f6r\u00fcnt\u00fcleri, kod \u00e7\u0131kt\u0131lar\u0131) i\u00e7erir. Markdown tabanl\u0131 dok\u00fcmantasyon sistemleri, bu g\u00f6rselleri etkin bir \u015fekilde y\u00f6netmek i\u00e7in idealdir:<\/p>\n<ul>\n<li><strong>Yap\u0131land\u0131r\u0131lm\u0131\u015f G\u00f6rsel Klas\u00f6rleri:<\/strong> Bu sistemler, dok\u00fcmantasyonun farkl\u0131 b\u00f6l\u00fcmleri i\u00e7in yap\u0131land\u0131r\u0131lm\u0131\u015f g\u00f6rsel klas\u00f6rleri kullan\u0131r. \u00d6rne\u011fin, <code>\/docs\/user-guide\/images<\/code> veya <code>\/docs\/api-reference\/diagrams<\/code> gibi. Bu, g\u00f6rsellerin d\u00fczenli kalmas\u0131n\u0131 ve Markdown dosyalar\u0131nda kolayca referans verilmesini sa\u011flar.<\/li>\n<li><strong>Diagram-as-Code Entegrasyonu:<\/strong> Baz\u0131 dok\u00fcmantasyon ara\u00e7lar\u0131, Mermaid veya PlantUML gibi “diagram-as-code” ara\u00e7lar\u0131yla entegre \u00e7al\u0131\u015f\u0131r. Bu sayede, diyagramlar do\u011frudan Markdown i\u00e7inde metin olarak tan\u0131mlan\u0131r ve sistem taraf\u0131ndan otomatik olarak g\u00f6rselle\u015ftirilir. Bu, diyagramlar\u0131n s\u00fcr\u00fcm kontrol\u00fcnde tutulmas\u0131n\u0131 ve kolayca g\u00fcncellenmesini sa\u011flar.<\/li>\n<li><strong>Ger\u00e7ek D\u00fcnya Senaryosu:<\/strong> B\u00fcy\u00fck bir yaz\u0131l\u0131m \u015firketinin teknik yazar\u0131, yeni bir API i\u00e7in dok\u00fcmantasyon haz\u0131rl\u0131yor. API \u00e7a\u011fr\u0131lar\u0131n\u0131 ve yan\u0131tlar\u0131n\u0131 g\u00f6steren kod bloklar\u0131na ek olarak, sistem mimarisini a\u00e7\u0131klayan ak\u0131\u015f \u015femalar\u0131 ve \u00f6rnek kullan\u0131m senaryolar\u0131n\u0131 g\u00f6steren ekran g\u00f6r\u00fcnt\u00fcleri kullan\u0131r. Dok\u00fcmantasyon sistemi, Markdown’daki g\u00f6rsel referanslar\u0131n\u0131 al\u0131r, bu g\u00f6rselleri optimize eder ve web sayfas\u0131nda do\u011fru yerlere yerle\u015ftirir. Karma\u015f\u0131k API ak\u0131\u015flar\u0131, g\u00f6rseller sayesinde \u00e7ok daha anla\u015f\u0131l\u0131r hale gelir, bu da geli\u015ftiricilerin API’yi daha h\u0131zl\u0131 \u00f6\u011frenmesine ve entegre etmesine yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\n<p>Bu vaka analizleri, Markdown’\u0131n g\u00f6rsellerle birlikte modern web uygulamalar\u0131nda ne kadar \u00e7ok y\u00f6nl\u00fc ve g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. G\u00f6rseller, metin tabanl\u0131 i\u00e7eri\u011fi zenginle\u015ftirmenin, anla\u015f\u0131l\u0131rl\u0131\u011f\u0131 art\u0131rman\u0131n ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin anahtar\u0131d\u0131r ve Markdown, bu s\u00fcreci basitle\u015ftirerek i\u00e7erik olu\u015fturucular\u0131n i\u015fini kolayla\u015ft\u0131r\u0131r.<\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular ve Sonu\u00e7<\/h2>\n<p>Bu rehber boyunca, Markdown’da g\u00f6rsel eklemenin temelden ileri d\u00fczeye kadar \u00e7e\u015fitli y\u00f6ntemlerini ve en iyi uygulamalar\u0131n\u0131 ele ald\u0131k. Markdown’\u0131n basit s\u00f6zdizimi sayesinde g\u00f6rselleri kolayca i\u00e7eri\u011finize dahil edebilir, HTML etiketlerini kullanarak boyutland\u0131rma ve hizalama gibi geli\u015fmi\u015f kontrol sa\u011flayabilir ve eri\u015filebilirlik ile SEO i\u00e7in \u00f6nemli ad\u0131mlar atabilirsiniz. G\u00f6rseller, metin tabanl\u0131 i\u00e7eriklerinizi daha \u00e7ekici, anla\u015f\u0131l\u0131r ve etkili hale getirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. \u0130ster bir blog yaz\u0131s\u0131, ister bir proje README’si, isterse kapsaml\u0131 bir dok\u00fcmantasyon haz\u0131rl\u0131yor olun, g\u00f6rselleri do\u011fru bir \u015fekilde kullanmak, i\u00e7eri\u011finizin genel kalitesini ve etkile\u015fimini art\u0131racakt\u0131r. Unutmay\u0131n, iyi se\u00e7ilmi\u015f ve optimize edilmi\u015f bir g\u00f6rsel, bin kelimeye bedeldir ve okuyucular\u0131n\u0131z\u0131n i\u00e7eri\u011finizle olan etkile\u015fimini derinle\u015ftirir.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ul>\n<li>\n <strong>Markdown’da resimleri ortalamak m\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/strong><\/p>\n<p>Standart Markdown s\u00f6zdizimi ile do\u011frudan ortalama komutu bulunmamaktad\u0131r. Ancak, HTML <code><img><\/code> etiketini bir <code><div><\/code> i\u00e7ine al\u0131p CSS ile ortalayarak bu i\u015flemi yapabilirsiniz. En yayg\u0131n y\u00f6ntem, g\u00f6rselin bulundu\u011fu <code><div><\/code> veya <code><p><\/code> etiketine <code>text-align: center;<\/code> stilini uygulamak veya g\u00f6rselin kendisine <code>display: block; margin: 0 auto;<\/code> CSS \u00f6zelliklerini vermektir. \u00d6rne\u011fin:<\/p>\n<pre><code>\n <div style=\"text-align: center;\">\n <img src=\"gorsel.jpg\" alt=\"Ortalanm\u0131\u015f G\u00f6rsel\">\n <\/div>\n <\/code><\/pre>\n<p>Ya da harici bir CSS s\u0131n\u0131f\u0131 ile:<\/p>\n<pre><code>\n <img src=\"gorsel.jpg\" alt=\"Ortalanm\u0131\u015f G\u00f6rsel\" class=\"ortalanmis-gorsel\">\n <\/code><\/pre>\n<pre><code>\n <code>\n .ortalanmis-gorsel {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n <\/code>\n <\/code><\/pre>\n<\/li>\n<li>\n <strong>Bir g\u00f6rseli t\u0131klanabilir hale nas\u0131l getiririm?<\/strong><\/p>\n<p>Bir g\u00f6rseli t\u0131klanabilir bir ba\u011flant\u0131 haline getirmek i\u00e7in Markdown’\u0131n ba\u011flant\u0131 s\u00f6zdizimini g\u00f6rsel s\u00f6zdizimiyle birle\u015ftirebilirsiniz. G\u00f6rsel etiketini bir ba\u011flant\u0131 etiketinin i\u00e7ine yerle\u015ftirmeniz yeterlidir:<\/p>\n<pre><code>\n [<img src=\"gorsel.jpg\" alt=\"T\u0131klanabilir G\u00f6rsel\">](https:\/\/www.ornekbaglanti.com \"Ba\u011flant\u0131 Ba\u015fl\u0131\u011f\u0131\")\n <\/code><\/pre>\n<p>Bu, g\u00f6rseli t\u0131klad\u0131\u011f\u0131n\u0131zda belirtilen URL’ye y\u00f6nlendirecektir.<\/p>\n<\/li>\n<li>\n <strong>Markdown ile birden fazla g\u00f6rseli yan yana nas\u0131l g\u00f6steririm?<\/strong><\/p>\n<p>Standart Markdown’da birden fazla g\u00f6rseli yan yana g\u00f6stermek i\u00e7in do\u011frudan bir \u00f6zellik yoktur. Ancak HTML ve CSS kullanarak bunu ba\u015farabilirsiniz. G\u00f6rselleri bir <code><div><\/code> i\u00e7ine al\u0131p, bu <code><div><\/code>‘e <code>display: flex;<\/code> veya <code>display: grid;<\/code> gibi CSS \u00f6zelliklerini uygulayarak yan yana hizalayabilirsiniz. \u00d6rne\u011fin:<\/p>\n<pre><code>\n <div style=\"display: flex; justify-content: space-around;\">\n <img src=\"gorsel1.jpg\" alt=\"G\u00f6rsel 1\" width=\"200\">\n <img src=\"gorsel2.jpg\" alt=\"G\u00f6rsel 2\" width=\"200\">\n <img src=\"gorsel3.jpg\" alt=\"G\u00f6rsel 3\" width=\"200\">\n <\/div>\n <\/code><\/pre>\n<p>Yine, inline stil yerine harici CSS s\u0131n\u0131flar\u0131 kullanmak daha iyi bir yakla\u015f\u0131md\u0131r.<\/p>\n<\/li>\n<li>\n <strong>G\u00f6rselin belirli bir k\u0131sm\u0131na nas\u0131l ba\u011flant\u0131 veririm (Image Map)?<\/strong><\/p>\n<p>Markdown’da do\u011frudan g\u00f6rselin belirli bir k\u0131sm\u0131na (image map) ba\u011flant\u0131 verme \u00f6zelli\u011fi yoktur. Bu, tamamen HTML <code><img><\/code> etiketi, <code>usemap<\/code> \u00f6zelli\u011fi ve <code><map><\/code> ile <code><area><\/code> etiketleri kullan\u0131larak yap\u0131l\u0131r. Bu, Markdown’\u0131n kapsam\u0131 d\u0131\u015f\u0131nda daha ileri d\u00fczey bir HTML konusudur. Markdown dosyan\u0131z\u0131n i\u00e7ine bu HTML yap\u0131s\u0131n\u0131 do\u011frudan ekleyebilirsiniz:<\/p>\n<pre><code>\n <img src=\"harita.jpg\" alt=\"B\u00f6lgeler\" usemap=\"#bolgeharitasi\">\n <map name=\"bolgeharitasi\">\n <area shape=\"rect\" coords=\"0,0,100,100\" href=\"bolge1.html\" alt=\"B\u00f6lge 1\">\n <area shape=\"circle\" coords=\"150,150,50\" href=\"bolge2.html\" alt=\"B\u00f6lge 2\">\n <\/map>\n <\/code><\/pre>\n<\/li>\n<li>\n <strong>WebP gibi modern formatlar\u0131 Markdown’da kullanabilir miyim?<\/strong><\/p>\n<p>Evet, Markdown’da g\u00f6rselleri eklerken WebP, AVIF gibi modern formatlar\u0131 kullanabilirsiniz. Markdown s\u00f6zdizimi sadece g\u00f6rselin URL’sini ve alternatif metnini bekler; dosya format\u0131 Markdown yorumlay\u0131c\u0131s\u0131 taraf\u0131ndan de\u011fil, taray\u0131c\u0131 taraf\u0131ndan i\u015flenir. Dolay\u0131s\u0131yla, destekleyen bir taray\u0131c\u0131da bu formatlar sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenecektir:<\/p>\n<pre><code>\n ![WebP G\u00f6rseli](resim.webp \"Optimize Edilmi\u015f G\u00f6rsel\")\n <\/code><\/pre>\n<p>Daha geli\u015fmi\u015f kontrol ve taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in, HTML <code><picture><\/code> etiketi ile farkl\u0131 formatlarda (\u00f6rn. WebP ve JPEG fallback) g\u00f6rseller sunmak en iyi yakla\u015f\u0131md\u0131r.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Markdown’a G\u00f6rsel Ekleme Rehberi: Ad\u0131m Ad\u0131m Resim Kullan\u0131m\u0131 Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-41358","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>Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?<\/title>\n<meta name=\"description\" content=\"Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir.\" \/>\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\/markdown-nedir-ve-gorseller-neden-onemlidir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?\" \/>\n<meta property=\"og:description\" content=\"Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-15T11:06:51+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=\"25 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?\",\"datePublished\":\"2026-04-15T11:06:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/\"},\"wordCount\":4425,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/\",\"name\":\"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-04-15T11:06:51+00:00\",\"description\":\"Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?\"}]},{\"@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":"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?","description":"Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir.","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\/markdown-nedir-ve-gorseller-neden-onemlidir\/","og_locale":"tr_TR","og_type":"article","og_title":"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?","og_description":"Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir.","og_url":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-04-15T11:06:51+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"25 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?","datePublished":"2026-04-15T11:06:51+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/"},"wordCount":4425,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/","url":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/","name":"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-04-15T11:06:51+00:00","description":"Metin tabanl\u0131 i\u00e7eriklerinizde g\u00f6rsellerin g\u00fcc\u00fcn\u00fc kullanmak, okuyucular\u0131n\u0131z\u0131n dikkatini \u00e7ekmek ve karma\u015f\u0131k bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in hayati \u00f6neme sahiptir.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?"}]},{"@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\/41358","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=41358"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/41358\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=41358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=41358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=41358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":41358,"date":"2026-04-15T14:06:51","date_gmt":"2026-04-15T11:06:51","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/"},"modified":"2026-04-15T14:06:51","modified_gmt":"2026-04-15T11:06:51","slug":"markdown-nedir-ve-gorseller-neden-onemlidir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/markdown-nedir-ve-gorseller-neden-onemlidir\/","title":{"rendered":"Markdown Nedir ve G\u00f6rseller Neden \u00d6nemlidir?"},"content":{"rendered":"