{"id":37679,"date":"2026-01-12T11:41:10","date_gmt":"2026-01-12T08:41:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37679"},"modified":"2026-01-12T11:41:10","modified_gmt":"2026-01-12T08:41:10","slug":"htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/","title":{"rendered":"HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi"},"content":{"rendered":"<\/p>\n
HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi<\/h2>\n
Giri\u015f<\/h3>\n
Web sayfalar\u0131n\u0131n g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi, b\u00fcy\u00fck \u00f6l\u00e7\u00fcde g\u00f6rsellerin nas\u0131l sunuldu\u011funa ba\u011fl\u0131d\u0131r. HTML’deki <\/code> ve <\/p>\n<\/code> elementleri, web i\u00e7eri\u011fine g\u00f6rsel \u00f6\u011feler eklemek i\u00e7in temel yap\u0131 ta\u015flar\u0131d\u0131r. Ancak bu elementleri sadece HTML ile eklemek yeterli de\u011fildir; modern ve etkile\u015fimli bir kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturmak i\u00e7in CSS ile kapsaml\u0131 bir \u015fekilde \u015fekillendirilmelidirler. Bu makale, <\/code> ve <\/p>\n<\/code> elementlerinin CSS ile nas\u0131l detayl\u0131 bir \u015fekilde stilize edilece\u011fini, duyarl\u0131 tasar\u0131m ilkelerini, performans optimizasyonunu ve eri\u015filebilirlik konular\u0131n\u0131 kapsayan kapsaml\u0131 bir rehber sunmaktad\u0131r.<\/p>\n
<\/code> elementi, bir resim dosyas\u0131n\u0131 do\u011frudan sayfaya g\u00f6mmek i\u00e7in kullan\u0131l\u0131rken, <\/p>\n<\/code> elementi genellikle bir resim, kod blo\u011fu, grafik veya ba\u015fka bir g\u00f6rsel \u00f6\u011feyi ve onunla ilgili bir a\u00e7\u0131klamay\u0131 (<\/code>) gruplamak i\u00e7in kullan\u0131lan semantik bir kapsay\u0131c\u0131d\u0131r. Bu iki elementin do\u011fru kullan\u0131m\u0131 ve CSS ile etkili bir \u015fekilde \u015fekillendirilmesi, web sitenizin hem estetik hem de i\u015flevsel a\u00e7\u0131dan zenginle\u015fmesini sa\u011flar. Bu rehberde, basit boyutland\u0131rmadan geli\u015fmi\u015f g\u00f6rsel efektlere kadar bir\u00e7ok tekni\u011fi ele alarak, g\u00f6rsellerinizi web sitenizde en iyi \u015fekilde sergilemenize yard\u0131mc\u0131 olaca\u011f\u0131z.<\/p>\n
<\/code> Elementini Anlamak ve \u015eekillendirmek<\/h3>\n
<\/code> elementi, web sayfalar\u0131na resim eklemenin en temel yoludur. src<\/code> (kaynak) ve alt<\/code> (alternatif metin) \u00f6znitelikleri, bu elementin olmazsa olmazlar\u0131d\u0131r. src<\/code> resmin yolunu belirtirken, alt<\/code> ise resmin i\u00e7eri\u011fini a\u00e7\u0131klayan metni i\u00e7erir ve eri\u015filebilirlik ile SEO a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n
Temel Boyutland\u0131rma ve D\u00fczenleme<\/h4>\n
G\u00f6rselin boyutlar\u0131n\u0131 kontrol etmek, stilize etmenin ilk ad\u0131m\u0131d\u0131r. width<\/code> ve height<\/code> \u00f6zelliklerini kullanarak resmin boyutlar\u0131n\u0131 piksel cinsinden (px<\/code>), y\u00fczde cinsinden (%<\/code>) veya di\u011fer CSS birimleriyle belirleyebilirsiniz. Ancak, duyarl\u0131 tasar\u0131m i\u00e7in genellikle max-width: 100%;<\/code> ve height: auto;<\/code> kombinasyonu tercih edilir. Bu, resmin kapsay\u0131c\u0131s\u0131ndan ta\u015fmamas\u0131n\u0131 ve en-boy oran\u0131n\u0131 koruyarak otomatik olarak boyutlanmas\u0131n\u0131 sa\u011flar.<\/p>\n
* display<\/code> \u00d6zelli\u011fi:<\/strong> <\/code> elementi varsay\u0131lan olarak inline-block<\/code> bir elementtir. Bu, metin ak\u0131\u015f\u0131 i\u00e7inde yer alabilece\u011fi anlam\u0131na gelir. Ancak, resmi sayfan\u0131n ortalamak veya blok seviyesinde davran\u0131\u015f sergilemesini sa\u011flamak i\u00e7in display: block;<\/code> olarak de\u011fi\u015ftirmek gerekebilir. Blok seviyesine getirildi\u011finde, margin: 0 auto;<\/code> ile yatay olarak ortalanabilir. \n* object-fit<\/code> \u00d6zelli\u011fi:<\/strong> Bu \u00f6zellik, resmin kendi boyutlar\u0131 ile kapsay\u0131c\u0131s\u0131n\u0131n boyutlar\u0131 farkl\u0131 oldu\u011funda resmin nas\u0131l davranaca\u011f\u0131n\u0131 belirler. cover<\/code> de\u011feri, resmin kapsay\u0131c\u0131y\u0131 tamamen doldurmas\u0131n\u0131 sa\u011flarken en-boy oran\u0131n\u0131 korur ve gerekirse resmin bir k\u0131sm\u0131n\u0131 k\u0131rpar. contain<\/code> ise resmin t\u00fcm\u00fcn\u00fcn kapsay\u0131c\u0131 i\u00e7inde g\u00f6r\u00fcnmesini sa\u011flar, ancak kapsay\u0131c\u0131da bo\u015fluklar olu\u015fabilir. fill<\/code> ise resmi kapsay\u0131c\u0131ya s\u0131\u011fd\u0131rmak i\u00e7in en-boy oran\u0131n\u0131 bozabilir.<\/p>\n
G\u00f6rsel Efektler ve Dekorasyon<\/h4>\n
G\u00f6rsellere estetik bir dokunu\u015f katmak i\u00e7in \u00e7e\u015fitli CSS \u00f6zellikleri kullan\u0131labilir.<\/p>\n
* Kenarl\u0131klar ve G\u00f6lgeler:<\/strong> border<\/code> \u00f6zelli\u011fi ile resimlere farkl\u0131 kal\u0131nl\u0131k, stil ve renkte kenarl\u0131klar ekleyebilirsiniz. \u00d6rne\u011fin, border: 2px solid #ccc;<\/code> hafif bir kenarl\u0131k olu\u015fturur. box-shadow<\/code> ise resme derinlik katan g\u00f6lgeler ekler. box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);<\/code> gibi bir ifade, resmin alt\u0131na ve sa\u011f\u0131na hafif bir g\u00f6lge d\u00fc\u015f\u00fcr\u00fcr. \n* Yuvarlak K\u00f6\u015feler:<\/strong> border-radius<\/code> \u00f6zelli\u011fi ile resimlerin k\u00f6\u015felerini yuvarlayabilirsiniz. border-radius: 10px;<\/code> ile hafif yuvarlak k\u00f6\u015feler elde edilebilirken, border-radius: 50%;<\/code> ile kare bir resmi m\u00fckemmel bir daireye d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. \n* Filtreler:<\/strong> filter<\/code> \u00f6zelli\u011fi, resimlere \u00e7e\u015fitli g\u00f6rsel efektler uygulamak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. grayscale()<\/code>, sepia()<\/code>, blur()<\/code>, brightness()<\/code>, contrast()<\/code> gibi fonksiyonlarla resimlerin renklerini, keskinli\u011fini veya parlakl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirebilirsiniz. \u00d6rne\u011fin, filter: grayscale(100%);<\/code> resmi siyah beyaza \u00e7evirir. \n* Ge\u00e7i\u015fler ve Animasyonlar:<\/strong> Kullan\u0131c\u0131 etkile\u015fimini art\u0131rmak i\u00e7in transition<\/code> ve transform<\/code> \u00f6zelliklerini kullanabilirsiniz. \u00d6rne\u011fin, bir resmin \u00fczerine gelindi\u011finde (hover) boyutunu veya parlakl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in transition: all 0.3s ease-in-out;<\/code> ve transform: scale(1.1);<\/code> gibi ifadeler kullan\u0131labilir. Bu, resimlerin daha dinamik g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
Hizalama ve Konumland\u0131rma<\/h4>\n
Resimlerin web sayfas\u0131ndaki d\u00fczeni, genel esteti\u011fi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkiler.<\/p>\n
* float<\/code> \u00d6zelli\u011fi:<\/strong> Metin ak\u0131\u015f\u0131 etraf\u0131nda resimleri kayd\u0131rmak i\u00e7in float: left;<\/code> veya float: right;<\/code> kullan\u0131labilir. Bu durumda, metin resmin etraf\u0131nda akar. clear<\/code> \u00f6zelli\u011fi ise float edilen elementlerin etkisini sona erdirmek i\u00e7in kullan\u0131l\u0131r. \n* margin<\/code> ve padding<\/code>:<\/strong> Resimlerin etraf\u0131ndaki bo\u015fluklar\u0131 kontrol etmek i\u00e7in margin<\/code> (d\u0131\u015f bo\u015fluk) ve padding<\/code> (i\u00e7 bo\u015fluk) kullan\u0131labilir. \u00d6rne\u011fin, margin: 10px;<\/code> resmin her taraf\u0131na 10 piksellik bo\u015fluk ekler. \n* Flexbox ve Grid:<\/strong> Modern CSS d\u00fczenleme teknikleri olan Flexbox ve Grid, resimleri kapsay\u0131c\u0131lar\u0131 i\u00e7inde hizalamak ve d\u00fczenlemek i\u00e7in \u00e7ok daha g\u00fc\u00e7l\u00fc ve esnek yollar sunar. Bir div<\/code> i\u00e7inde birden fazla resmi yatay veya dikey olarak hizalamak, aralar\u0131ndaki bo\u015fluklar\u0131 ayarlamak veya responsive galeriler olu\u015fturmak i\u00e7in bu teknikler idealdir. \u00d6rne\u011fin, display: flex; justify-content: center; align-items: center;<\/code> ile bir resmi dikey ve yatay olarak kapsay\u0131c\u0131s\u0131n\u0131n ortas\u0131na kolayca yerle\u015ftirebilirsiniz.<\/p>\n
<\/p>\n<\/code> ve <\/code> Elementlerini Anlamak ve \u015eekillendirmek<\/h3>\n
<\/p>\n<\/code> elementi, HTML5 ile tan\u0131t\u0131lan semantik bir element olup, web i\u00e7eri\u011findeki ba\u011f\u0131ms\u0131z bir birimi (resim, kod blo\u011fu, tablo vb.) ve bu birime ait a\u00e7\u0131klamay\u0131 (<\/code>) gruplamak i\u00e7in kullan\u0131l\u0131r. Bu, i\u00e7eri\u011fin ba\u011flam\u0131n\u0131 iyile\u015ftirir ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan faydal\u0131d\u0131r.<\/p>\n
<\/p>\n<\/code> elementi varsay\u0131lan olarak taray\u0131c\u0131lar taraf\u0131ndan belirli bir margin<\/code> ile gelir. Bu varsay\u0131lan stilleri s\u0131f\u0131rlamak veya de\u011fi\u015ftirmek, genellikle ilk ad\u0131md\u0131r.<\/p>\n
* Boyutland\u0131rma ve D\u00fczenleme:<\/strong> <\/p>\n<\/code> elementi varsay\u0131lan olarak blok seviyesinde bir elementtir. width<\/code> ve max-width<\/code> \u00f6zellikleri ile geni\u015fli\u011fini kontrol edebilirsiniz. T\u0131pk\u0131 <\/code> elementinde oldu\u011fu gibi, max-width: 100%;<\/code> duyarl\u0131 tasar\u0131m i\u00e7in \u00f6nemlidir. margin: 0 auto;<\/code> ile yatay olarak ortalanabilir. \n* Arka Plan ve Kenarl\u0131klar:<\/strong> <\/p>\n<\/code> elementine bir arka plan rengi (background-color<\/code>), kenarl\u0131k (border<\/code>) veya g\u00f6lge (box-shadow<\/code>) ekleyerek g\u00f6rsel olarak dikkat \u00e7ekici bir \u00e7er\u00e7eve olu\u015fturabilirsiniz. \u00d6rne\u011fin, hafif bir arka plan rengi ve yuvarlak k\u00f6\u015felerle resim ve a\u00e7\u0131klamas\u0131n\u0131 bir b\u00fct\u00fcn olarak sunabilirsiniz. \n* \u0130\u00e7 Bo\u015fluklar (padding<\/code>):<\/strong> <\/p>\n<\/code> elementinin i\u00e7ine yerle\u015ftirilen g\u00f6rsel ve figcaption<\/code> aras\u0131nda bir bo\u015fluk b\u0131rakmak veya bu elementleri kapsay\u0131c\u0131dan biraz uzakla\u015ft\u0131rmak i\u00e7in padding<\/code> kullan\u0131labilir. Bu, i\u00e7eri\u011fin daha okunakl\u0131 ve d\u00fczenli g\u00f6r\u00fcnmesini sa\u011flar. \n* Hizalama:<\/strong> <\/p>\n<\/code> elementini sayfa i\u00e7inde hizalamak i\u00e7in margin: 0 auto;<\/code> (yatay ortalama), float<\/code> (metin ak\u0131\u015f\u0131 etraf\u0131nda kayd\u0131rma) veya modern Flexbox\/Grid d\u00fczenleme teknikleri kullan\u0131labilir. Flexbox veya Grid, birden fazla <\/p>\n<\/code> elementini bir galeri gibi d\u00fczenlemek i\u00e7in \u00f6zellikle etkilidir.<\/p>\n
Figcaption’\u0131 \u015eekillendirme<\/h4>\n
<\/code> elementi, <\/p>\n<\/code> i\u00e7indeki i\u00e7eri\u011fin a\u00e7\u0131klamas\u0131n\u0131 sa\u011flar. Bu a\u00e7\u0131klaman\u0131n stilize edilmesi, okunabilirli\u011fi ve esteti\u011fi art\u0131r\u0131r.<\/p>\n
* Yaz\u0131 Tipi \u00d6zellikleri:<\/strong> font-size<\/code>, font-family<\/code>, font-weight<\/code>, font-style<\/code> ve color<\/code> gibi \u00f6zelliklerle a\u00e7\u0131klaman\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen de\u011fi\u015ftirebilirsiniz. Genellikle, <\/code> metni ana metinden biraz daha k\u00fc\u00e7\u00fck ve\/veya italik olarak ayarlan\u0131r. \n* Metin Hizalama:<\/strong> text-align<\/code> \u00f6zelli\u011fi ile <\/code> metnini sola, sa\u011fa veya ortaya hizalayabilirsiniz. text-align: center;<\/code> genellikle resmin alt\u0131na ortalanm\u0131\u015f bir a\u00e7\u0131klama i\u00e7in kullan\u0131l\u0131r. \n* \u0130\u00e7 ve D\u0131\u015f Bo\u015fluklar:<\/strong> <\/code> elementinin etraf\u0131ndaki bo\u015fluklar\u0131 margin<\/code> ve padding<\/code> ile ayarlayabilirsiniz. Bu, a\u00e7\u0131klaman\u0131n g\u00f6rselden veya <\/p>\n<\/code> kapsay\u0131c\u0131s\u0131ndan ne kadar uzakta olaca\u011f\u0131n\u0131 belirler. \u00d6rne\u011fin, padding-top: 10px;<\/code> ile a\u00e7\u0131klama ile resim aras\u0131nda bir bo\u015fluk b\u0131rak\u0131labilir. \n* Konumland\u0131rma:<\/strong> Bazen <\/code>‘\u0131 g\u00f6rselin \u00fczerine veya farkl\u0131 bir konumuna yerle\u015ftirmek isteyebilirsiniz. Bu durumda, <\/p>\n<\/code> elementine position: relative;<\/code> verip, <\/code>‘a position: absolute;<\/code> uygulayarak istedi\u011finiz konuma getirebilirsiniz. \u00d6rne\u011fin, bottom: 0; left: 0;<\/code> ile a\u00e7\u0131klama g\u00f6rselin sol alt k\u00f6\u015fesine yerle\u015ftirilebilir.<\/p>\n
* Ak\u0131\u015fkan G\u00f6rseller:<\/strong> img { max-width: 100%; height: auto; display: block; }<\/code> kural\u0131, duyarl\u0131 g\u00f6rseller i\u00e7in alt\u0131n standartt\u0131r. Bu, resmin kapsay\u0131c\u0131s\u0131n\u0131n geni\u015fli\u011fini a\u015fmamas\u0131n\u0131 ve en-boy oran\u0131n\u0131 koruyarak otomatik olarak y\u00fckseklik kazanmas\u0131n\u0131 sa\u011flar. display: block;<\/code> ise resmin varsay\u0131lan inline-block<\/code> davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirerek daha \u00f6ng\u00f6r\u00fclebilir bir d\u00fczen sa\u011flar. \n* picture<\/code> Elementi ve srcset<\/code>:<\/strong> <\/code> elementinin yan\u0131 s\u0131ra, HTML5 ile tan\u0131t\u0131lan <\/code> elementi ve <\/code> elementinin srcset<\/code> \u00f6zniteli\u011fi, farkl\u0131 ekran boyutlar\u0131 veya \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler i\u00e7in optimize edilmi\u015f farkl\u0131 resim kaynaklar\u0131 sunman\u0131za olanak tan\u0131r. Bu, bant geni\u015fli\u011fini korur ve daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri sa\u011flar. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlar i\u00e7in d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir resim, b\u00fcy\u00fck ekranlar i\u00e7in y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir resim sunulabilir. \n* object-fit<\/code> ve Duyarl\u0131l\u0131k:<\/strong> object-fit<\/code> \u00f6zelli\u011fi, \u00f6zellikle <\/p>\n<\/code> i\u00e7inde kullan\u0131lan g\u00f6rsellerin duyarl\u0131 bir \u015fekilde kapsay\u0131c\u0131ya nas\u0131l uyaca\u011f\u0131n\u0131 belirlemede \u00e7ok faydal\u0131d\u0131r. Kapsay\u0131c\u0131n\u0131n boyutu de\u011fi\u015fti\u011finde, object-fit: cover;<\/code> veya object-fit: contain;<\/code> resmin nas\u0131l yeniden boyutland\u0131r\u0131laca\u011f\u0131n\u0131 ve k\u0131rp\u0131laca\u011f\u0131n\u0131 kontrol eder. \n* Medya Sorgular\u0131 (@media queries<\/code>):<\/strong> CSS medya sorgular\u0131, belirli ekran geni\u015fliklerine, y\u00fcksekliklerine veya cihaz \u00f6zelliklerine g\u00f6re farkl\u0131 stiller uygulaman\u0131za olanak tan\u0131r. \u00d6rne\u011fin, mobil cihazlarda g\u00f6rsellerin daha k\u00fc\u00e7\u00fck g\u00f6r\u00fcnmesini veya farkl\u0131 bir d\u00fczende yerle\u015fmesini sa\u011flamak i\u00e7in @media (max-width: 768px) { ... }<\/code> gibi kurallar kullanabilirsiniz. Bu, g\u00f6rsellerin her cihazda en iyi \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
Performans ve Eri\u015filebilirlik \u0130pu\u00e7lar\u0131<\/h3>\n
G\u00f6rsel stilizasyonu yaparken performans ve eri\u015filebilirli\u011fi g\u00f6z ard\u0131 etmemek, modern web geli\u015ftirmenin temelidir.<\/p>\n
Performans Optimizasyonu<\/h4>\n
* G\u00f6rsel S\u0131k\u0131\u015ft\u0131rma:<\/strong> Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseller sayfa y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. G\u00f6rselleri s\u0131k\u0131\u015ft\u0131rmak (\u00f6rne\u011fin, JPEG i\u00e7in TinyPNG, PNG i\u00e7in PNGGauntlet gibi ara\u00e7larla) ve uygun dosya format\u0131n\u0131 (WebP, AVIF gibi modern formatlar daha iyi s\u0131k\u0131\u015ft\u0131rma sunar) se\u00e7mek performans\u0131 art\u0131r\u0131r. \n* Lazy Loading (Tembel Y\u00fckleme):<\/strong> \u00d6zellikle uzun sayfalarda veya \u00e7ok say\u0131da g\u00f6rsel i\u00e7eren sayfalarda, t\u00fcm g\u00f6rselleri ayn\u0131 anda y\u00fcklemek yerine, kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a g\u00f6rselleri y\u00fcklemek (loading=\"lazy\"<\/code> \u00f6zniteli\u011fi ile) sayfa y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Bu, <\/code> elementine loading=\"lazy\"<\/code> ekleyerek kolayca yap\u0131labilir. \n* Boyut \u00d6znitelikleri:<\/strong> <\/code> elementine width<\/code> ve height<\/code> \u00f6zniteliklerini eklemek, taray\u0131c\u0131n\u0131n resim i\u00e7in ayr\u0131lacak alan\u0131 \u00f6nceden bilmesini sa\u011flar. Bu, sayfa i\u00e7eri\u011finin kaymas\u0131n\u0131 (layout shift) \u00f6nleyerek daha iyi bir kullan\u0131c\u0131 deneyimi sunar ve Cumulative Layout Shift (CLS) skorunu iyile\u015ftirir.<\/p>\n
Eri\u015filebilirlik<\/h4>\n
* alt<\/code> \u00d6zniteli\u011fi:<\/strong> alt<\/code> \u00f6zniteli\u011fi, g\u00f6rselin i\u00e7eri\u011fini a\u00e7\u0131klayan metni i\u00e7erir. Ekran okuyucular bu metni g\u00f6rme engelli kullan\u0131c\u0131lara okur. Ayr\u0131ca, resim y\u00fcklenemedi\u011finde veya taray\u0131c\u0131 resimleri kapatt\u0131\u011f\u0131nda bu metin g\u00f6r\u00fcnt\u00fclenir. alt<\/code> metni anlaml\u0131 ve a\u00e7\u0131klay\u0131c\u0131 olmal\u0131d\u0131r. Dekoratif g\u00f6rseller i\u00e7in alt=\"\"<\/code> (bo\u015f alt) kullan\u0131labilir. \n* Semantik HTML:<\/strong> <\/p>\n<\/code> ve <\/code> elementlerini do\u011fru bir \u015fekilde kullanmak, i\u00e7eri\u011fin anlamsal yap\u0131s\u0131n\u0131 g\u00fc\u00e7lendirir. Bu, hem arama motorlar\u0131 hem de yard\u0131mc\u0131 teknolojiler i\u00e7in faydal\u0131d\u0131r. \n* Kontrast:<\/strong> G\u00f6rsel \u00fczerindeki metinler veya <\/code> metni i\u00e7in yeterli renk kontrast\u0131 sa\u011flamak, d\u00fc\u015f\u00fck g\u00f6rme yetisine sahip kullan\u0131c\u0131lar i\u00e7in okunabilirli\u011fi art\u0131r\u0131r. Web Content Accessibility Guidelines (WCAG) kontrast oranlar\u0131 i\u00e7in standartlar belirlemi\u015ftir.<\/p>\n
Geli\u015fmi\u015f Stil Teknikleri ve \u00d6rnekler<\/h3>\n
Basit stilizasyonun \u00f6tesine ge\u00e7erek, g\u00f6rselleri daha etkile\u015fimli ve dinamik hale getirebiliriz.<\/p>\n
Resim Galerileri ve D\u00fczenler<\/h4>\n
* Flexbox ile Galeri:<\/strong> Birden fazla <\/p>\n<\/code> elementini veya <\/code> elementini yan yana d\u00fczenlemek ve aralar\u0131ndaki bo\u015fluklar\u0131 kontrol etmek i\u00e7in Flexbox idealdir. \u00d6rne\u011fin, bir kapsay\u0131c\u0131ya display: flex; flex-wrap: wrap; justify-content: space-around;<\/code> uygulayarak duyarl\u0131 bir resim galerisi olu\u015fturabilirsiniz. \n* CSS Grid ile Galeri:<\/strong> Daha karma\u015f\u0131k ve \u0131zgara tabanl\u0131 d\u00fczenler i\u00e7in CSS Grid \u00e7ok daha g\u00fc\u00e7l\u00fcd\u00fcr. display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 20px;<\/code> gibi bir yap\u0131 ile g\u00f6rselleri otomatik olarak d\u00fczenleyebilir ve farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flamalar\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n
Hover Efektleri<\/h4>\n
Kullan\u0131c\u0131 bir g\u00f6rselin \u00fczerine geldi\u011finde (hover), \u00e7e\u015fitli CSS efektleri ile g\u00f6rseli canland\u0131rabilirsiniz.<\/p>\n
* Zoom Efekti:<\/strong> transform: scale(1.1);<\/code> ile resmin boyutunu hafif\u00e7e b\u00fcy\u00fctebilirsiniz. transition<\/code> \u00f6zelli\u011fi ekleyerek bu b\u00fcy\u00fcmeyi p\u00fcr\u00fczs\u00fcz hale getirebilirsiniz. \n* Overlay (Katman) Efekti:<\/strong> G\u00f6rselin \u00fczerine yar\u0131 saydam bir renkli katman ekleyerek veya bir metin a\u00e7\u0131klamas\u0131n\u0131 g\u00f6r\u00fcn\u00fcr hale getirerek etkile\u015fimli efektler olu\u015fturabilirsiniz. Bu genellikle position: absolute;<\/code> ve opacity<\/code> \u00f6zellikleri kullan\u0131larak yap\u0131l\u0131r. \n* G\u00f6rsel Filtre De\u011fi\u015fikli\u011fi:<\/strong> filter<\/code> \u00f6zelli\u011fini hover<\/code> durumunda de\u011fi\u015ftirerek, resmin renk tonunu, parlakl\u0131\u011f\u0131n\u0131 veya doygunlu\u011funu dinamik olarak de\u011fi\u015ftirebilirsiniz. \u00d6rne\u011fin, normalde gri tonlamal\u0131 bir resmin \u00fczerine gelindi\u011finde renkli hale gelmesi.<\/p>\n
Maskeleme ve K\u0131rpma<\/h4>\n
* clip-path<\/code> \u00d6zelli\u011fi:<\/strong> Bu \u00f6zellik, bir elementin g\u00f6r\u00fcnen k\u0131sm\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Daire, poligon veya \u00f6zel SVG \u015fekilleri ile g\u00f6rselleri standart dikd\u00f6rtgenlerin d\u0131\u015f\u0131na \u00e7\u0131kararak benzersiz \u015fekillerde k\u0131rpabilirsiniz. \u00d6rne\u011fin, clip-path: circle(50% at 50% 50%);<\/code> bir resmi daire \u015feklinde k\u0131rpar. \n* mask-image<\/code> \u00d6zelli\u011fi:<\/strong> Bir g\u00f6rseli ba\u015fka bir g\u00f6rsel veya SVG maskesi kullanarak maskelemek i\u00e7in mask-image<\/code> kullan\u0131labilir. Bu, g\u00f6rsellerin belirli bir \u015fekle sahip olmas\u0131n\u0131 veya yar\u0131 saydam alanlar i\u00e7ermesini sa\u011flar.<\/p>\n
CSS De\u011fi\u015fkenleri ile Temal\u0131 G\u00f6rseller<\/h4>\n
CSS de\u011fi\u015fkenleri (--primary-color<\/code>, --image-border-width<\/code> gibi) kullanarak g\u00f6rsellerin stillerini merkezi bir yerden y\u00f6netebilirsiniz. Bu, \u00f6zellikle farkl\u0131 temalara sahip web siteleri i\u00e7in veya stil tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamak i\u00e7in \u00e7ok faydal\u0131d\u0131r. \u00d6rne\u011fin, tema rengi de\u011fi\u015fti\u011finde t\u00fcm resim kenarl\u0131klar\u0131n\u0131n rengini otomatik olarak de\u011fi\u015ftirebilirsiniz.<\/p>\n
Sonu\u00e7<\/h3>\n
HTML’deki <\/code> ve <\/p>\n<\/code> elementlerini CSS ile \u015fekillendirmek, web tasar\u0131m\u0131nda estetik, i\u015flevsellik ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik bir rol oynar. Bu rehberde ele ald\u0131\u011f\u0131m\u0131z temel boyutland\u0131rma ve d\u00fczenleme tekniklerinden, geli\u015fmi\u015f g\u00f6rsel efektlere, duyarl\u0131 tasar\u0131m ilkelerine, performans optimizasyonuna ve eri\u015filebilirlik konular\u0131na kadar geni\u015f bir yelpazede bilgiler sunduk.<\/p>\n
Unutulmamal\u0131d\u0131r ki, g\u00f6rseller sadece i\u00e7eri\u011fi zenginle\u015ftirmekle kalmaz, ayn\u0131 zamanda web sitenizin kimli\u011fini ve profesyonelli\u011fini de yans\u0131t\u0131r. Do\u011fru CSS tekniklerini uygulayarak, g\u00f6rsellerinizin her cihazda ve her kullan\u0131c\u0131 i\u00e7in en iyi \u015fekilde g\u00f6r\u00fcnmesini sa\u011flayabilir, sayfa y\u00fckleme s\u00fcrelerini optimize edebilir ve web sitenizin genel kalitesini art\u0131rabilirsiniz. Modern web geli\u015ftirme standartlar\u0131na uygun olarak, g\u00f6rsellerinizi sadece g\u00fczel de\u011fil, ayn\u0131 zamanda h\u0131zl\u0131, eri\u015filebilir ve duyarl\u0131 hale getirmek, ba\u015far\u0131l\u0131 bir web deneyiminin anahtar\u0131d\u0131r. Bu teknikleri prati\u011fe d\u00f6kerek, g\u00f6rsel i\u00e7eri\u011finizi bir sonraki seviyeye ta\u015f\u0131yabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi\nGiri\u015f\nWeb sayfalar\u0131n\u0131n g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi, b\u00fcy\u00fck","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":[126],"tags":[],"class_list":{"0":"post-37679","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi - 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\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi\" \/>\n<meta property=\"og:description\" content=\"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi Giri\u015f Web sayfalar\u0131n\u0131n g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi, b\u00fcy\u00fck\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-12T08:41:10+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=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi\",\"datePublished\":\"2026-01-12T08:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\"},\"wordCount\":2421,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\",\"name\":\"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-12T08:41:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi - 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\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi","og_description":"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi Giri\u015f Web sayfalar\u0131n\u0131n g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi, b\u00fcy\u00fck","og_url":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-12T08:41:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi","datePublished":"2026-01-12T08:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/"},"wordCount":2421,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/","name":"HTML'de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-12T08:41:10+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/htmlde-figure-ve-image-elementlerini-css-ile-sekillendirme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML’de Figure ve Image Elementlerini CSS ile \u015eekillendirme Rehberi"}]},{"@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\/37679","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=37679"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37679\/revisions"}],"predecessor-version":[{"id":37680,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37679\/revisions\/37680"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}