{"id":33815,"date":"2025-11-07T12:40:50","date_gmt":"2025-11-07T09:40:50","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33815"},"modified":"2025-11-07T12:40:50","modified_gmt":"2025-11-07T09:40:50","slug":"html-ve-css-ile-statik-bir-footer-olusturma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/","title":{"rendered":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi"},"content":{"rendered":"<h2>HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi<\/h2>\n<p>Web sitelerinin vazge\u00e7ilmez bir par\u00e7as\u0131 olan footer (altbilgi), kullan\u0131c\u0131 deneyimi ve site navigasyonu a\u00e7\u0131s\u0131ndan kritik bir rol oynar. Genellikle sayfan\u0131n en alt\u0131nda yer alan bu b\u00f6l\u00fcm, telif hakk\u0131 bilgileri, ileti\u015fim detaylar\u0131, h\u0131zl\u0131 ba\u011flant\u0131lar, sosyal medya ikonlar\u0131 ve bazen de bir site haritas\u0131 gibi \u00f6nemli bilgileri bar\u0131nd\u0131r\u0131r. Bu kapsaml\u0131 rehberde, HTML ve CSS kullanarak nas\u0131l statik bir footer olu\u015fturulaca\u011f\u0131n\u0131, temel yap\u0131dan geli\u015fmi\u015f tasar\u0131mlara, duyarl\u0131l\u0131ktan eri\u015filebilirli\u011fe kadar t\u00fcm detaylar\u0131yla ele alaca\u011f\u0131z. &#8220;Statik&#8221; terimi burada, footer&#8217;\u0131n sayfa i\u00e7eri\u011fiyle birlikte akmas\u0131n\u0131 ve i\u00e7eri\u011fin sonuna yerle\u015fmesini ifade eder; yani, sayfa kayd\u0131r\u0131ld\u0131\u011f\u0131nda footer da yukar\u0131ya veya a\u015fa\u011f\u0131ya hareket eder, sabitlenmi\u015f (fixed) bir konumda kalmaz. Ancak, i\u00e7eri\u011fin k\u0131sa oldu\u011fu durumlarda footer&#8217;\u0131n sayfan\u0131n ortas\u0131nda kalmamas\u0131 i\u00e7in yayg\u0131n olarak uygulanan &#8220;sticky footer&#8221; tekni\u011fini de statik footer&#8217;\u0131n bir varyasyonu olarak inceleyece\u011fiz.<\/p>\n<h3>Footer Nedir ve Neden \u00d6nemlidir?<\/h3>\n<p>Web sitelerinin genellikle en alt\u0131nda bulunan ve tekrarlayan bir yap\u0131ya sahip olan footer, kullan\u0131c\u0131lara web sitesi hakk\u0131nda ek bilgiler sunan bir aland\u0131r. Bir footer&#8217;\u0131n \u00f6nemi birka\u00e7 ana ba\u015fl\u0131k alt\u0131nda toplanabilir:<\/p>\n<p>*   <strong>Navigasyon:<\/strong> Kullan\u0131c\u0131lar\u0131n site i\u00e7inde kolayca gezinmelerini sa\u011flayan h\u0131zl\u0131 ba\u011flant\u0131lar (\u00f6rne\u011fin, hakk\u0131m\u0131zda, hizmetler, ileti\u015fim, kariyer) i\u00e7erir.<br \/>\n*   <strong>Marka Kimli\u011fi ve G\u00fcven:<\/strong> \u015eirket logosu, telif hakk\u0131 bilgileri ve yasal beyanlar (gizlilik politikas\u0131, kullan\u0131m ko\u015fullar\u0131) marka g\u00fcvenilirli\u011fini art\u0131r\u0131r.<br \/>\n*   <strong>\u0130leti\u015fim Bilgileri:<\/strong> Adres, telefon numaras\u0131, e-posta gibi ileti\u015fim bilgilerinin kolayca bulunmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong>Sosyal Medya Entegrasyonu:<\/strong> Sosyal medya hesaplar\u0131na y\u00f6nlendiren ikonlar arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131lar\u0131n markayla farkl\u0131 platformlarda etkile\u015fim kurmas\u0131n\u0131 te\u015fvik eder.<br \/>\n*   <strong>SEO (Arama Motoru Optimizasyonu):<\/strong> Do\u011fru ve ilgili anahtar kelimelerle zenginle\u015ftirilmi\u015f ba\u011flant\u0131lar, arama motorlar\u0131n\u0131n site i\u00e7eri\u011fini daha iyi anlamas\u0131na yard\u0131mc\u0131 olabilir. Ancak a\u015f\u0131r\u0131ya ka\u00e7mamak ve spam g\u00f6r\u00fcn\u00fcm\u00fcnden ka\u00e7\u0131nmak \u00f6nemlidir.<\/p>\n<p>Statik bir footer, i\u00e7eri\u011fin uzunlu\u011funa ba\u011fl\u0131 olarak yer de\u011fi\u015ftiren, ancak her zaman i\u00e7eri\u011fin en alt\u0131nda bulunan bir footer t\u00fcr\u00fcd\u00fcr. Bu, \u00e7o\u011fu web sitesi i\u00e7in standart ve beklenen davran\u0131\u015ft\u0131r.<\/p>\n<h3>Temel HTML Yap\u0131s\u0131 ile Footer Olu\u015fturma<\/h3>\n<p>Bir footer olu\u015fturman\u0131n ilk ad\u0131m\u0131, HTML belgesinde do\u011fru semantik etiketleri kullanmakt\u0131r. <code><footer<\/code>> etiketi, bu b\u00f6l\u00fcm i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r ve arama motorlar\u0131 ile ekran okuyucular i\u00e7in sayfan\u0131n altbilgisi oldu\u011funu belirtir.<\/p>\n<h4>Footer Etiketi ve \u0130\u00e7eri\u011fi<\/h4>\n<p>HTML5 ile tan\u0131t\u0131lan <code><footer<\/code>> etiketi, bir belgenin veya bir b\u00f6l\u00fcm\u00fcn altbilgisini temsil eder. \u0130\u00e7erisinde genellikle a\u015fa\u011f\u0131daki t\u00fcrde bilgiler bulunur:<\/p>\n<p>*   Telif hakk\u0131 bilgileri (<code><\/p>\n<p><\/code>).<br \/>\n*   \u0130leti\u015fim bilgileri (<code><\/p>\n<address><\/code>, <code><\/p>\n<p><\/code>).<br \/>\n*   Site i\u00e7i veya d\u0131\u015f\u0131 ba\u011flant\u0131lar (<code><\/p>\n<nav><\/code>, <code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code>, <code><a><\/code>).<br \/>\n*   Sosyal medya ikonlar\u0131 (<code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code>, <code><a><\/code>, <code><i><\/code> veya <code><svg><\/code>).<br \/>\n*   Site haritas\u0131 veya yasal metinler.<\/p>\n<p>A\u015fa\u011f\u0131da temel bir footer yap\u0131s\u0131 i\u00e7in \u00f6rnek bir HTML kodu bulunmaktad\u0131r:<\/p>\n<pre><code class=\"language-html\"><body>\n    <!-- Sayfa i\u00e7eri\u011fi buraya gelecek -->\n    <main>\n        \n        <p>Bu, sayfan\u0131n ana i\u00e7eri\u011fidir. Footer'\u0131n nas\u0131l davrand\u0131\u011f\u0131n\u0131 g\u00f6rmek i\u00e7in bu i\u00e7eri\u011fi uzatabilirsiniz.<\/p>\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n        <p>Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada.<\/p>\n        <!-- Daha fazla i\u00e7erik eklenebilir -->\n    <\/main>\n\n    <footer class=\"site-footer\">\n        <div class=\"footer-content\">\n            <div class=\"footer-section about\">\n                <h3>Hakk\u0131m\u0131zda<\/h3>\n                <p>\u015eirketimiz, yenilik\u00e7i \u00e7\u00f6z\u00fcmler sunarak dijital d\u00fcnyada fark yaratmay\u0131 hedeflemektedir. M\u00fc\u015fteri memnuniyeti bizim i\u00e7in \u00f6nceliktir.<\/p>\n                <div class=\"contact-info\">\n                    <span class=\"icon\">&#9993;<\/span> info@ornek.com<br>\n                    <span class=\"icon\">&#9742;<\/span> +90 123 456 7890\n                <\/div>\n            <\/div>\n            <div class=\"footer-section links\">\n                <h3>H\u0131zl\u0131 Ba\u011flant\u0131lar<\/h3>\n                <ul>\n                    <li><a href=\"#\">Ana Sayfa<\/a><\/li>\n                    <li><a href=\"#\">Hizmetler<\/a><\/li>\n                    <li><a href=\"#\">Portf\u00f6y<\/a><\/li>\n                    <li><a href=\"#\">Blog<\/a><\/li>\n                    <li><a href=\"#\">\u0130leti\u015fim<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-section social\">\n                <h3>Bizi Takip Edin<\/h3>\n                <div class=\"social-links\">\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Facebook\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\" alt=\"Facebook\"><\/a>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Twitter\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/24\/1da1f2\/ffffff?text=T\" alt=\"Twitter\"><\/a>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Instagram\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/24\/e4405f\/ffffff?text=I\" alt=\"Instagram\"><\/a>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"LinkedIn\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/24\/0077b5\/ffffff?text=L\" alt=\"LinkedIn\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"footer-bottom\">\n            <p>&copy; 2023 T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r. \u00d6rnek \u015eirketi.<\/p>\n        <\/div>\n    <\/footer>\n<\/body><\/code><\/pre>\n<p>Bu HTML yap\u0131s\u0131, footer'\u0131 \u00fc\u00e7 ana b\u00f6l\u00fcme ay\u0131r\u0131r: Hakk\u0131m\u0131zda, H\u0131zl\u0131 Ba\u011flant\u0131lar ve Sosyal Medya. Ayr\u0131ca, telif hakk\u0131 bilgisini i\u00e7eren ayr\u0131 bir alt b\u00f6l\u00fcm (<code>footer-bottom<\/code>) da eklenmi\u015ftir. Bu yap\u0131, CSS ile kolayca \u015fekillendirilebilir ve d\u00fczenlenebilir.<\/p>\n<h3>CSS ile Statik Footer'\u0131 \u015eekillendirme<\/h3>\n<p>HTML yap\u0131s\u0131n\u0131 olu\u015fturduktan sonra s\u0131ra, footer'a g\u00f6rsel bir kimlik kazand\u0131rmaya gelir. CSS ile arka plan rengi, metin rengi, boyutland\u0131rma, hizalama ve di\u011fer estetik detaylar\u0131 belirleyebiliriz.<\/p>\n<h4>Temel Stil Kurallar\u0131<\/h4>\n<p>\u00d6ncelikle, footer'\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirleyen temel stil kurallar\u0131n\u0131 uygulayal\u0131m:<\/p>\n<pre><code class=\"language-css\">\/<em> Genel Ayarlar (iste\u011fe ba\u011fl\u0131, ancak responsive tasar\u0131m i\u00e7in faydal\u0131) <\/em>\/\nbody {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    display: flex; \/<em> Sticky footer i\u00e7in <\/em>\/\n    flex-direction: column; \/<em> Sticky footer i\u00e7in <\/em>\/\n    min-height: 100vh; \/<em> Sticky footer i\u00e7in <\/em>\/\n}\n\nmain {\n    flex-grow: 1; \/<em> Sticky footer i\u00e7in: Ana i\u00e7eri\u011fin esneyerek kalan alan\u0131 doldurmas\u0131n\u0131 sa\u011flar <\/em>\/\n    padding: 20px;\n}\n\n\/<em> Footer'\u0131n genel stilleri <\/em>\/\n.site-footer {\n    background-color: #333; \/<em> Koyu gri arka plan <\/em>\/\n    color: #fff; \/<em> Beyaz metin rengi <\/em>\/\n    padding: 40px 20px; \/<em> \u0130\u00e7 bo\u015fluklar <\/em>\/\n    text-align: center; \/<em> Metni ortala <\/em>\/\n    border-top: 1px solid #555; \/<em> \u00dcst kenarl\u0131k <\/em>\/\n    \/<em> position: relative; \/<\/em> Varsay\u0131lan olarak statik pozisyon *\/\n    \/<em> bottom: 0; \/<\/em> Sticky footer i\u00e7in kullan\u0131labilir, ancak flexbox daha iyidir *\/\n    \/<em> width: 100%; \/<\/em> Sticky footer i\u00e7in kullan\u0131labilir *\/\n}\n\n.site-footer h3 {\n    color: #00bcd4; \/<em> Ba\u015fl\u0131klar i\u00e7in farkl\u0131 bir renk <\/em>\/\n    margin-bottom: 20px;\n    font-size: 1.2em;\n}\n\n.site-footer p {\n    font-size: 0.9em;\n    line-height: 1.6;\n    margin-bottom: 10px;\n}\n\n.site-footer a {\n    color: #fff; \/<em> Ba\u011flant\u0131 metin rengi <\/em>\/\n    text-decoration: none; \/<em> Alt \u00e7izgiyi kald\u0131r <\/em>\/\n    transition: color 0.3s ease; \/<em> Renk ge\u00e7i\u015f efekti <\/em>\/\n}\n\n.site-footer a:hover {\n    color: #00bcd4; \/<em> Ba\u011flant\u0131 \u00fczerine gelindi\u011finde renk de\u011fi\u015fimi <\/em>\/\n}<\/code><\/pre>\n<p>Bu CSS kodlar\u0131, footer'a koyu bir arka plan, beyaz metin ve ba\u015fl\u0131klar i\u00e7in vurgulu bir renk sa\u011flar. Ayr\u0131ca, ba\u011flant\u0131lar\u0131n alt \u00e7izgisini kald\u0131r\u0131r ve \u00fczerine gelindi\u011finde renk de\u011fi\u015ftirmelerini sa\u011flayan bir ge\u00e7i\u015f efekti ekler. <code>body<\/code> ve <code>main<\/code> i\u00e7in yap\u0131lan <code>display: flex<\/code>, <code>flex-direction: column<\/code> ve <code>min-height: 100vh<\/code> ayarlar\u0131, i\u00e7eri\u011fin k\u0131sa oldu\u011fu durumlarda footer'\u0131n ekran\u0131n en alt\u0131na yap\u0131\u015fmas\u0131n\u0131 sa\u011flayan \"sticky footer\" desenini uygulamak i\u00e7indir. <code>main<\/code> \u00fczerindeki <code>flex-grow: 1<\/code> de ana i\u00e7eri\u011fin esneyerek footer'\u0131 a\u015fa\u011f\u0131 itmesini sa\u011flar.<\/p>\n<h4>\u00c7ok S\u00fctunlu D\u00fczen i\u00e7in CSS (Flexbox ile)<\/h4>\n<p>Modern web tasar\u0131m\u0131nda, footer'lar genellikle birden fazla s\u00fctuna ayr\u0131l\u0131r. Bu d\u00fczeni sa\u011flamak i\u00e7in CSS Flexbox veya Grid kullan\u0131labilir. Flexbox, bu t\u00fcr d\u00fczenler i\u00e7in olduk\u00e7a esnek ve g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n<pre><code class=\"language-css\">.footer-content {\n    display: flex; \/<em> Flexbox'\u0131 etkinle\u015ftir <\/em>\/\n    flex-wrap: wrap; \/<em> Gerekirse alt sat\u0131ra ge\u00e7 <\/em>\/\n    justify-content: space-around; \/<em> \u00d6\u011feleri e\u015fit aral\u0131klarla da\u011f\u0131t <\/em>\/\n    max-width: 1200px; \/<em> Maksimum geni\u015flik <\/em>\/\n    margin: 0 auto 30px auto; \/<em> Ortala ve alt bo\u015fluk ekle <\/em>\/\n    gap: 30px; \/<em> S\u00fctunlar aras\u0131 bo\u015fluk <\/em>\/\n}\n\n.footer-section {\n    flex: 1; \/<em> E\u015fit geni\u015flikte s\u00fctunlar <\/em>\/\n    min-width: 250px; \/<em> Minimum s\u00fctun geni\u015fli\u011fi <\/em>\/\n    margin: 0 15px; \/<em> Yan bo\u015fluklar <\/em>\/\n    text-align: left; \/<em> Metni sola hizala <\/em>\/\n}\n\n.footer-section.about .contact-info {\n    margin-top: 15px;\n}\n\n.footer-section.about .contact-info .icon {\n    margin-right: 8px;\n    color: #00bcd4;\n}\n\n.footer-section ul {\n    list-style: none; \/<em> Liste i\u015faretlerini kald\u0131r <\/em>\/\n    padding: 0;\n    margin: 0;\n}\n\n.footer-section ul li {\n    margin-bottom: 10px;\n}\n\n.social-links {\n    margin-top: 15px;\n}\n\n.social-links a {\n    display: inline-block; \/<em> \u0130konlar\u0131 yan yana getir <\/em>\/\n    margin: 0 8px;\n    font-size: 1.5em; \/<em> \u0130kon boyutu <\/em>\/\n    color: #fff;\n}\n\n.social-links img {\n    width: 32px; \/<em> \u0130kon geni\u015fli\u011fi <\/em>\/\n    height: 32px; \/<em> \u0130kon y\u00fcksekli\u011fi <\/em>\/\n    border-radius: 50%; \/<em> Yuvarlak ikonlar i\u00e7in <\/em>\/\n    vertical-align: middle; \/<em> Metinle hizalama <\/em>\/\n    transition: transform 0.3s ease;\n}\n\n.social-links a:hover img {\n    transform: scale(1.1); \/<em> Hover'da b\u00fcy\u00fctme efekti <\/em>\/\n}\n\n.footer-bottom {\n    margin-top: 30px;\n    padding-top: 20px;\n    border-top: 1px solid #555;\n    font-size: 0.85em;\n    color: #bbb;\n}<\/code><\/pre>\n<p>Bu CSS kodlar\u0131, <code>footer-content<\/code> s\u0131n\u0131f\u0131na sahip div'i bir flex konteyneri haline getirerek i\u00e7erisindeki <code>footer-section<\/code> div'lerini yan yana hizalar. <code>flex-wrap: wrap<\/code> \u00f6zelli\u011fi sayesinde, ekran geni\u015fli\u011fi azald\u0131\u011f\u0131nda s\u00fctunlar otomatik olarak alt sat\u0131ra ge\u00e7er. <code>justify-content: space-around<\/code> ise s\u00fctunlar aras\u0131nda e\u015fit bo\u015fluk b\u0131rak\u0131r. Her bir <code>footer-section<\/code> i\u00e7in <code>flex: 1<\/code> e\u015fit geni\u015flikte da\u011f\u0131l\u0131m sa\u011flarken, <code>min-width<\/code> ile s\u00fctunlar\u0131n \u00e7ok daralmas\u0131n\u0131 engelleriz.<\/p>\n<h3>Duyarl\u0131 Tasar\u0131m (Responsive Design)<\/h3>\n<p>G\u00fcn\u00fcm\u00fczde web sitelerinin farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil) d\u00fczg\u00fcn g\u00f6r\u00fcnmesi zorunluluktur. Footer da bu kurala uymal\u0131d\u0131r. Media query'ler kullanarak, ekran boyutuna g\u00f6re footer'\u0131n d\u00fczenini ve stilini de\u011fi\u015ftirebiliriz.<\/p>\n<pre><code class=\"language-css\">\/<em> Duyarl\u0131 Tasar\u0131m \u0130\u00e7in Media Query'ler <\/em>\/\n@media (max-width: 768px) {\n    .footer-content {\n        flex-direction: column; \/<em> Dikey s\u0131ralama <\/em>\/\n        align-items: center; \/<em> Ortala <\/em>\/\n        gap: 40px; \/<em> S\u00fctunlar aras\u0131 daha fazla bo\u015fluk <\/em>\/\n    }\n\n    .footer-section {\n        min-width: 90%; \/<em> Daha geni\u015f s\u00fctunlar <\/em>\/\n        margin: 0; \/<em> Yan bo\u015fluklar\u0131 kald\u0131r <\/em>\/\n        text-align: center; \/<em> Metni ortala <\/em>\/\n    }\n\n    .footer-section.about .contact-info {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .footer-section.about .contact-info span {\n        margin-bottom: 5px; \/<em> \u0130kon ve metin aras\u0131 bo\u015fluk <\/em>\/\n    }\n}\n\n@media (max-width: 480px) {\n    .site-footer {\n        padding: 30px 15px; \/<em> Daha az i\u00e7 bo\u015fluk <\/em>\/\n    }\n\n    .site-footer h3 {\n        font-size: 1.1em;\n    }\n\n    .site-footer p {\n        font-size: 0.85em;\n    }\n\n    .social-links a {\n        font-size: 1.3em;\n        margin: 0 5px;\n    }\n\n    .social-links img {\n        width: 28px;\n        height: 28px;\n    }\n}<\/code><\/pre>\n<p>Yukar\u0131daki media query'ler, ekran geni\u015fli\u011fi 768 pikselin alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde (<code>max-width: 768px<\/code>), flexbox d\u00fczenini s\u00fctunlar\u0131 dikey olarak s\u0131ralayacak \u015fekilde de\u011fi\u015ftirir (<code>flex-direction: column<\/code>). Ayr\u0131ca, s\u00fctunlar\u0131 ortalar (<code>align-items: center<\/code>) ve aralar\u0131ndaki bo\u015flu\u011fu art\u0131r\u0131r. Daha k\u00fc\u00e7\u00fck ekranlar (480 piksel alt\u0131) i\u00e7in font boyutlar\u0131 ve padding de\u011ferleri k\u00fc\u00e7\u00fclt\u00fclerek daha kompakt bir g\u00f6r\u00fcn\u00fcm sa\u011flan\u0131r.<\/p>\n<h3>Eri\u015filebilirlik (Accessibility)<\/h3>\n<p>Web sitelerinin herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131 \u00f6nemlidir. Footer tasar\u0131m\u0131 yaparken eri\u015filebilirlik standartlar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak gerekir:<\/p>\n<p>*   <strong>Semantik HTML:<\/strong> <code><footer<\/code>>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<ul><\/code>, <code><a><\/code> gibi anlaml\u0131 etiketler kullanmak, ekran okuyucular\u0131n sayfa yap\u0131s\u0131n\u0131 daha iyi anlamas\u0131na yard\u0131mc\u0131 olur.<br \/>\n*   <strong>Renk Kontrast\u0131:<\/strong> Metin ve arka plan renkleri aras\u0131nda yeterli kontrast oldu\u011fundan emin olun (WCAG standartlar\u0131na g\u00f6re en az 4.5:1). Bu, g\u00f6rme engelli veya renk k\u00f6r\u00fc kullan\u0131c\u0131lar i\u00e7in \u00f6nemlidir.<br \/>\n*   <strong>Odak Y\u00f6netimi:<\/strong> Klavye ile gezinen kullan\u0131c\u0131lar i\u00e7in ba\u011flant\u0131lar\u0131n ve etkile\u015fimli \u00f6\u011felerin odaklanabilir (focus) ve g\u00f6r\u00fcn\u00fcr oldu\u011fundan emin olun (<code>:focus<\/code> pseudo-class ile stil verin).<br \/>\n*   <strong><code>aria-label<\/code>:<\/strong> Sosyal medya ikonlar\u0131 gibi yaln\u0131zca g\u00f6rsel olan ba\u011flant\u0131lar i\u00e7in <code>aria-label<\/code> kullanarak ekran okuyuculara ba\u011flant\u0131n\u0131n ne hakk\u0131nda oldu\u011funu bildirin (\u00f6rne\u011fin, <code><a href=\"#\" aria-label=\"Facebook Sayfam\u0131z\"><\/code>).<br \/>\n*   <strong>Anlaml\u0131 Ba\u011flant\u0131 Metinleri:<\/strong> \"Buraya T\u0131klay\u0131n\" gibi genel ifadeler yerine, ba\u011flant\u0131n\u0131n nereye gitti\u011fini a\u00e7\u0131klayan metinler kullan\u0131n (\u00f6rne\u011fin, \"Gizlilik Politikam\u0131z\u0131 Okuyun\").<\/p>\n<h3>Yayg\u0131n Sorunlar ve \u00c7\u00f6z\u00fcmleri: \"Sticky Footer\"<\/h3>\n<p>Statik bir footer olu\u015ftururken kar\u015f\u0131la\u015f\u0131lan en yayg\u0131n sorunlardan biri, sayfa i\u00e7eri\u011finin k\u0131sa oldu\u011fu durumlarda footer'\u0131n sayfan\u0131n ortas\u0131nda kalmas\u0131d\u0131r. Kullan\u0131c\u0131lar genellikle footer'\u0131n taray\u0131c\u0131 penceresinin (viewport) en alt\u0131nda olmas\u0131n\u0131 bekler. Bu duruma \"sticky footer\" problemi denir ve \u00e7\u00f6z\u00fcm\u00fc i\u00e7in birka\u00e7 y\u00f6ntem bulunur. Modern ve \u00f6nerilen yakla\u015f\u0131m Flexbox veya CSS Grid kullanmakt\u0131r. Yukar\u0131daki CSS kodunda Flexbox ile bu \u00e7\u00f6z\u00fcm zaten uygulanm\u0131\u015ft\u0131r, ancak detaylar\u0131n\u0131 a\u00e7\u0131klayal\u0131m.<\/p>\n<h4>Flexbox ile Sticky Footer \u00c7\u00f6z\u00fcm\u00fc<\/h4>\n<p>Bu y\u00f6ntem, <code>body<\/code> etiketini bir Flexbox konteyneri haline getirerek, ana i\u00e7eri\u011fin (<code>main<\/code> etiketi veya benzeri bir kapsay\u0131c\u0131) esneyerek kalan bo\u015flu\u011fu doldurmas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-css\">body {\n    display: flex; \/<em> Body'yi flex konteyneri yap <\/em>\/\n    flex-direction: column; \/<em> \u00d6\u011feleri dikey olarak s\u0131rala <\/em>\/\n    min-height: 100vh; \/<em> Body'nin minimum y\u00fcksekli\u011fini viewport y\u00fcksekli\u011fine ayarla <\/em>\/\n    margin: 0; \/<em> Varsay\u0131lan marginleri kald\u0131r <\/em>\/\n}\n\nmain { \/<em> Ana i\u00e7erik kapsay\u0131c\u0131n\u0131z <\/em>\/\n    flex-grow: 1; \/<em> Ana i\u00e7eri\u011fin esneyerek mevcut t\u00fcm bo\u015flu\u011fu doldurmas\u0131n\u0131 sa\u011fla <\/em>\/\n    \/<em> Di\u011fer stil kurallar\u0131 <\/em>\/\n}\n\n.site-footer {\n    \/<em> Footer stilleri <\/em>\/\n    \/<em> Flexbox sayesinde otomatik olarak en alta itilecektir <\/em>\/\n}<\/code><\/pre>\n<p>Bu ayarlarla:<br \/>\n1.  <code>body<\/code> etiketi, dikey bir ak\u0131\u015fa sahip bir flex konteyneri olur.<br \/>\n2.  <code>min-height: 100vh<\/code> ile <code>body<\/code>, taray\u0131c\u0131 penceresinin tamam\u0131n\u0131 kaplar.<br \/>\n3.  <code>main<\/code> etiketi (<code>flex-grow: 1<\/code>) sayesinde, e\u011fer i\u00e7erik k\u0131saysa, <code>main<\/code> etiketi esneyerek <code>body<\/code>'nin geri kalan y\u00fcksekli\u011fini doldurur ve <code>footer<\/code>'\u0131 en alta iter.<br \/>\n4.  E\u011fer i\u00e7erik uzunsa, <code>main<\/code> etiketi yine esner ancak <code>body<\/code>'nin y\u00fcksekli\u011fi <code>100vh<\/code>'den daha fazla olur ve sayfa kayd\u0131r\u0131labilir hale gelir. Footer da i\u00e7eri\u011fin sonunda, sayfan\u0131n en alt\u0131nda kal\u0131r.<\/p>\n<p>Bu y\u00f6ntem, hem i\u00e7eri\u011fin k\u0131sa oldu\u011fu durumlarda footer'\u0131 ekran\u0131n alt\u0131na yap\u0131\u015ft\u0131r\u0131r hem de i\u00e7eri\u011fin uzun oldu\u011fu durumlarda footer'\u0131 do\u011fal ak\u0131\u015f\u0131nda i\u00e7eri\u011fin sonuna yerle\u015ftirir.<\/p>\n<h3>Geli\u015fmi\u015f Footer \u0130\u00e7eri\u011fi ve Optimizasyon<\/h3>\n<p>Bir footer sadece temel bilgileri i\u00e7ermekle kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini ve site performans\u0131n\u0131 art\u0131racak ek \u00f6\u011feler de bar\u0131nd\u0131rabilir.<\/p>\n<h4>Footer Ba\u011flant\u0131lar\u0131n\u0131n SEO Etkisi<\/h4>\n<p>Footer'daki ba\u011flant\u0131lar, sitenizin i\u00e7 ba\u011flant\u0131 yap\u0131s\u0131n\u0131 g\u00fc\u00e7lendirebilir ve \u00f6nemli sayfalara eri\u015fimi kolayla\u015ft\u0131rabilir. Ancak, a\u015f\u0131r\u0131ya ka\u00e7mak veya alakas\u0131z anahtar kelimelerle dolu ba\u011flant\u0131lar kullanmak, arama motorlar\u0131 taraf\u0131ndan spam olarak alg\u0131lanabilir. Anahtar kelime doldurmaktan ka\u00e7\u0131narak, kullan\u0131c\u0131lar i\u00e7in ger\u00e7ekten faydal\u0131 ve sitenizin ana hedefleriyle uyumlu ba\u011flant\u0131lar\u0131 eklemeye \u00f6zen g\u00f6sterin. \u00d6rne\u011fin:<\/p>\n<p>*   Hizmetlerinizin listesi.<br \/>\n*   \u00d6nemli blog kategorileri.<br \/>\n*   S\u0131k\u00e7a Sorulan Sorular (SSS) sayfas\u0131.<br \/>\n*   Kariyer veya ortakl\u0131k sayfalar\u0131.<\/p>\n<h4>Mikro Etkile\u015fimler ve Animasyonlar<\/h4>\n<p>Footer'daki sosyal medya ikonlar\u0131 veya ba\u011flant\u0131lar \u00fczerine gelindi\u011finde hafif animasyonlar (renk de\u011fi\u015fimi, boyut b\u00fcy\u00fcmesi, hafif bir z\u0131plama efekti) kullan\u0131c\u0131 etkile\u015fimini art\u0131rabilir ve footer'a daha modern bir his katabilir. Ancak, a\u015f\u0131r\u0131 ve dikkat da\u011f\u0131t\u0131c\u0131 animasyonlardan ka\u00e7\u0131nmak \u00f6nemlidir. Yukar\u0131daki \u00f6rnekte <code>transform: scale(1.1)<\/code> ile basit bir b\u00fcy\u00fctme efekti kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n<h4>Footer \u0130\u00e7eri\u011fi Y\u00f6netimi<\/h4>\n<p>B\u00fcy\u00fck web sitelerinde, footer i\u00e7eri\u011fi dinamik olarak bir \u0130\u00e7erik Y\u00f6netim Sistemi (CMS) \u00fczerinden y\u00f6netilebilir. Bu, telif hakk\u0131 y\u0131l\u0131n\u0131 otomatik olarak g\u00fcncellemek, yeni ba\u011flant\u0131lar eklemek veya ileti\u015fim bilgilerini de\u011fi\u015ftirmek gibi i\u015flemleri kolayla\u015ft\u0131r\u0131r. K\u00fc\u00e7\u00fck siteler i\u00e7in ise HTML dosyas\u0131n\u0131 do\u011frudan d\u00fczenlemek yeterli olabilir.<\/p>\n<h3>\u00d6rnek Uygulama: Ad\u0131m Ad\u0131m Statik Footer Olu\u015fturma (Tekrar G\u00f6zden Ge\u00e7irme)<\/h3>\n<p>\u015eimdiye kadar \u00f6\u011frendiklerimizi peki\u015ftirmek ad\u0131na, t\u00fcm ad\u0131mlar\u0131 bir araya getirerek basit ve etkili bir statik footer olu\u015fturma s\u00fcrecini \u00f6zetleyelim.<\/p>\n<h4>Ad\u0131m 1: Temel HTML Yap\u0131s\u0131n\u0131 Olu\u015fturma<\/h4>\n<p>Web sayfan\u0131z\u0131n <code><body><\/code> etiketi i\u00e7inde, ana i\u00e7eri\u011finizden sonra <code><footer<\/code>> etiketini ekleyin. \u0130\u00e7erisine telif hakk\u0131, ba\u011flant\u0131lar ve ileti\u015fim bilgileri gibi temel \u00f6\u011feleri yerle\u015ftirin.<\/p>\n<pre><code class=\"language-html\"><body>\n    <main>\n        <!-- Sayfan\u0131z\u0131n ana i\u00e7eri\u011fi -->\n        <p>Uzun bir i\u00e7erik veya k\u0131sa bir i\u00e7erik olabilir.<\/p>\n        <p>Footer'\u0131n her zaman sayfan\u0131n en alt\u0131nda g\u00f6r\u00fcnmesini sa\u011flayaca\u011f\u0131z.<\/p>\n        <p>Bu metin, footer'\u0131n nas\u0131l konumland\u0131\u011f\u0131n\u0131 g\u00f6stermek i\u00e7in eklenmi\u015ftir.<\/p>\n        <!-- Daha fazla i\u00e7erik buraya eklenebilir -->\n    <\/main>\n\n    <footer class=\"site-footer\">\n        <div class=\"footer-content\">\n            <div class=\"footer-section about\">\n                <h3>Hakk\u0131m\u0131zda<\/h3>\n                <p>\u015eirketimiz, yenilik\u00e7i \u00e7\u00f6z\u00fcmler sunarak dijital d\u00fcnyada fark yaratmay\u0131 hedeflemektedir.<\/p>\n            <\/div>\n            <div class=\"footer-section links\">\n                <h3>H\u0131zl\u0131 Ba\u011flant\u0131lar<\/h3>\n                <ul>\n                    <li><a href=\"#\">Ana Sayfa<\/a><\/li>\n                    <li><a href=\"#\">\u0130leti\u015fim<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-section social\">\n                <h3>Bizi Takip Edin<\/h3>\n                <div class=\"social-links\">\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Facebook\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\" alt=\"Facebook\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"footer-bottom\">\n            <p>&copy; 2023 T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r. \u00d6rnek \u015eirketi.<\/p>\n        <\/div>\n    <\/footer>\n<\/body><\/code><\/pre>\n<h4>Ad\u0131m 2: Temel CSS Stillerini Uygulama<\/h4>\n<p>Footer'a arka plan rengi, metin rengi, padding gibi temel stil \u00f6zelliklerini atay\u0131n. <code>body<\/code> ve <code>main<\/code> etiketlerine <code>flexbox<\/code> \u00f6zelliklerini ekleyerek \"sticky footer\" davran\u0131\u015f\u0131n\u0131 sa\u011flay\u0131n.<\/p>\n<pre><code class=\"language-css\">\/<em> Genel ve Sticky Footer Ayarlar\u0131 <\/em>\/\nbody {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n}\n\nmain {\n    flex-grow: 1;\n    padding: 20px; \/<em> Sadece \u00f6rnek i\u00e7in <\/em>\/\n}\n\n\/<em> Footer Temel Stilleri <\/em>\/\n.site-footer {\n    background-color: #333;\n    color: #fff;\n    padding: 40px 20px;\n    text-align: center;\n    border-top: 1px solid #555;\n}\n\n.site-footer h3 {\n    color: #00bcd4;\n    margin-bottom: 20px;\n    font-size: 1.2em;\n}\n\n.site-footer a {\n    color: #fff;\n    text-decoration: none;\n    transition: color 0.3s ease;\n}\n\n.site-footer a:hover {\n    color: #00bcd4;\n}\n\n.footer-bottom {\n    margin-top: 30px;\n    padding-top: 20px;\n    border-top: 1px solid #555;\n    font-size: 0.85em;\n    color: #bbb;\n}<\/code><\/pre>\n<h4>Ad\u0131m 3: \u00c7ok S\u00fctunlu D\u00fczen ve Detayl\u0131 Stil<\/h4>\n<p>Footer i\u00e7eri\u011fini Flexbox kullanarak s\u00fctunlara ay\u0131r\u0131n ve her b\u00f6l\u00fcm i\u00e7in \u00f6zel stiller uygulay\u0131n.<\/p>\n<pre><code class=\"language-css\">.footer-content {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-around;\n    max-width: 1200px;\n    margin: 0 auto 30px auto;\n    gap: 30px;\n}\n\n.footer-section {\n    flex: 1;\n    min-width: 250px;\n    margin: 0 15px;\n    text-align: left;\n}\n\n.footer-section ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.footer-section ul li {\n    margin-bottom: 10px;\n}\n\n.social-links {\n    margin-top: 15px;\n}\n\n.social-links a {\n    display: inline-block;\n    margin: 0 8px;\n}\n\n.social-links img {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    vertical-align: middle;\n    transition: transform 0.3s ease;\n}\n\n.social-links a:hover img {\n    transform: scale(1.1);\n}<\/code><\/pre>\n<h4>Ad\u0131m 4: Duyarl\u0131 Tasar\u0131m Ekleme<\/h4>\n<p>Farkl\u0131 ekran boyutlar\u0131 i\u00e7in media query'ler kullanarak footer'\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc optimize edin. \u00d6zellikle mobil cihazlarda s\u00fctunlar\u0131n alt alta y\u0131\u011f\u0131lmas\u0131n\u0131 sa\u011flay\u0131n.<\/p>\n<pre><code class=\"language-css\">@media (max-width: 768px) {\n    .footer-content {\n        flex-direction: column;\n        align-items: center;\n        gap: 40px;\n    }\n\n    .footer-section {\n        min-width: 90%;\n        margin: 0;\n        text-align: center;\n    }\n}\n\n@media (max-width: 480px) {\n    .site-footer {\n        padding: 30px 15px;\n    }\n\n    .social-links img {\n        width: 28px;\n        height: 28px;\n    }\n}<\/code><\/pre>\n<p>Bu ad\u0131mlar\u0131 takip ederek, modern, duyarl\u0131 ve eri\u015filebilir bir statik footer olu\u015fturabilirsiniz. Bu yap\u0131, \u00e7o\u011fu web projesinin ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131layacak temel bir \u00e7er\u00e7eve sunar.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bir web sitesinin footer'\u0131, genellikle g\u00f6z ard\u0131 edilse de, kullan\u0131c\u0131 deneyimi, navigasyon, marka g\u00fcvenilirli\u011fi ve hatta arama motoru optimizasyonu a\u00e7\u0131s\u0131ndan kritik bir bile\u015fendir. HTML'in semantik etiketleme g\u00fcc\u00fcn\u00fc ve CSS'in esnek stil yeteneklerini kullanarak, sadece g\u00f6rsel olarak \u00e7ekici de\u011fil, ayn\u0131 zamanda i\u015flevsel ve eri\u015filebilir bir footer olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<p>Bu rehberde, <code><footer<\/code>> etiketinin temel kullan\u0131m\u0131ndan, Flexbox ile \u00e7ok s\u00fctunlu d\u00fczenler olu\u015fturmaya, duyarl\u0131 tasar\u0131m tekniklerinden eri\u015filebilirlik ipu\u00e7lar\u0131na ve \"sticky footer\" gibi yayg\u0131n sorunlar\u0131n \u00e7\u00f6z\u00fcm\u00fcne kadar statik bir footer olu\u015fturman\u0131n t\u00fcm y\u00f6nlerini ele ald\u0131k. \u00d6zellikle Flexbox tabanl\u0131 \"sticky footer\" \u00e7\u00f6z\u00fcm\u00fc, i\u00e7eri\u011fin uzunlu\u011fundan ba\u011f\u0131ms\u0131z olarak footer'\u0131n her zaman beklenen konumda kalmas\u0131n\u0131 sa\u011flayan modern ve g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r.<\/p>\n<p>Unutmay\u0131n ki iyi bir footer, kullan\u0131c\u0131lar\u0131n sitenizle etkile\u015fimini kolayla\u015ft\u0131r\u0131r ve onlara ihtiya\u00e7 duyduklar\u0131 bilgilere h\u0131zl\u0131ca ula\u015fma imkan\u0131 sunar. Tasar\u0131m ve geli\u015ftirme s\u00fcrecinde, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n ihtiya\u00e7lar\u0131n\u0131 ve sitenizin genel hedeflerini g\u00f6z \u00f6n\u00fcnde bulundurarak footer'\u0131n\u0131z\u0131 optimize etmeye devam edin. HTML ve CSS'in sundu\u011fu olanaklarla, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanarak benzersiz ve etkili footer'lar tasarlayabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi\nWeb sitelerinin vazge\u00e7ilmez bir par\u00e7as\u0131 olan footer (altbilgi), kullan\u0131c\u0131 deneyimi ve site","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-33815","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML ve CSS ile Statik Bir Footer Olu\u015fturma 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\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi\" \/>\n<meta property=\"og:description\" content=\"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi Web sitelerinin vazge\u00e7ilmez bir par\u00e7as\u0131 olan footer (altbilgi), kullan\u0131c\u0131 deneyimi ve site\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-07T09:40:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi\",\"datePublished\":\"2025-11-07T09:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\"},\"wordCount\":2118,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\",\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\",\"name\":\"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\",\"datePublished\":\"2025-11-07T09:40:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage\",\"url\":\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\",\"contentUrl\":\"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML ve CSS ile Statik Bir Footer Olu\u015fturma 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 ve CSS ile Statik Bir Footer Olu\u015fturma 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\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi","og_description":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi Web sitelerinin vazge\u00e7ilmez bir par\u00e7as\u0131 olan footer (altbilgi), kullan\u0131c\u0131 deneyimi ve site","og_url":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-07T09:40:50+00:00","og_image":[{"url":"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F","type":"","width":"","height":""}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi","datePublished":"2025-11-07T09:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/"},"wordCount":2118,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F","articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/","name":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F","datePublished":"2025-11-07T09:40:50+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#primaryimage","url":"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F","contentUrl":"https:\/\/via.placeholder.com\/24\/3b5998\/ffffff?text=F"},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-statik-bir-footer-olusturma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML ve CSS ile Statik Bir Footer Olu\u015fturma 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\/33815","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=33815"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33815\/revisions"}],"predecessor-version":[{"id":33816,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33815\/revisions\/33816"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}