Takip et

Alt Başlık

Ana Başlık Alt Başlık Daha Küçük Alt Başlık * Paragraflar (Paragraphs): Metin bloklarını oluşturmak için etiketi kullanılır. Bu, bir paragraf metnidir.

.

* bölümü, web sayfasının kendisi hakkında meta bilgileri (sayfa başlığı, karakter kodlaması, harici CSS dosyalarına bağlantılar vb.) içerir. Bu bölümdeki bilgiler doğrudan tarayıcıda görünmez, ancak sayfanın nasıl işleneceğini ve arama motorları tarafından nasıl indeksleneceğini etkiler. Örneğin, tarayıcı sekmesinde görünen başlık </code> etiketi içinde yer alır.<br /> * <code><body></code> bölümü ise web sayfasının asıl içeriğini barındırır. Kullanıcıların tarayıcıda gördüğü tüm öğeler (metinler, görseller, videolar, bağlantılar vb.) bu bölümün içine yazılır.</p> <h4>Temel HTML Etiketleri ve Kullanım Alanları</h4> <p>HTML, içeriği yapılandırmak için çeşitli etiketler sunar. İşte en sık kullanılanlardan bazıları:</p> <p>* <strong>Başlıklar (Headings):</strong> Bir sayfanın ana başlıklarını ve alt başlıklarını belirtmek için <code></p> <h1></code>‘den <code></p> <h6></code>‘ya kadar etiketler kullanılır. <code></p> <h1></code> en önemli başlığı temsil ederken, <code></p> <h6></code> en az önemli başlığı temsil eder.</p> <div class="code-container"> <pre><code> <h1>Ana Başlık</h1> <h2>Alt Başlık</h2> <h3>Daha Küçük Alt Başlık</h3> </code></pre> </p></div> <p>* <strong>Paragraflar (Paragraphs):</strong> Metin bloklarını oluşturmak için <code></p> <p></code> etiketi kullanılır.</p> <div class="code-container"> <pre><code> <p>Bu, bir paragraf metnidir. Web geliştirmenin temellerini öğrenmek oldukça heyecan verici.</p> </code></pre> </p></div> <p>* <strong>Bağlantılar (Links):</strong> Bir sayfadan başka bir sayfaya veya aynı sayfa içinde farklı bir bölüme gitmek için <code><a></code> (anchor) etiketi kullanılır. <code>href</code> özelliği, bağlantının gideceği URL’yi belirtir.</p> <div class="code-container"> <pre><code> <a href="https://www.ornek.com">Örnek Bir Siteye Git</a> </code></pre> </p></div> <p>* <strong>Görseller (Images):</strong> Web sayfalarına görsel eklemek için <code><img></code> etiketi kullanılır. <code>src</code> özelliği görselin yolunu, <code>alt</code> özelliği ise görselin alternatif metnini (erişilebilirlik ve SEO için önemlidir) belirtir.</p> <div class="code-container"> <pre><code> <img decoding="async" src="resimler/logo.png" alt="Şirket Logosu"> </code></pre> </p></div> <p>* <strong>Listeler (Lists):</strong> Bilgileri düzenli bir şekilde sunmak için listeler kullanılır.<br /> * Sırasız listeler (unordered lists) için <code></p> <ul></code> ve liste öğeleri için <code></p> <li></code>.<br /> * Sıralı listeler (ordered lists) için <code></p> <ol></code> ve liste öğeleri için <code></p> <li></code>. <div class="code-container"> <pre><code> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ol> <li>Birinci Adım</li> <li>İkinci Adım</li> <li>Üçüncü Adım</li> </ol> </code></pre> </p></div> <p>* <strong>Semantik Etiketler:</strong> Modern HTML5 ile birlikte gelen <code></p> <header></code>, <code></p> <nav></code>, <code><main></code>, <code></p> <article></code>, <code></p> <section></code>, <code></p> <aside></code> ve <code></p> <footer></code> gibi etiketler, sayfa içeriğinin anlamsal yapısını daha net belirtmeye yardımcı olur. Bu etiketler, hem arama motorları hem de ekran okuyucular gibi erişilebilirlik araçları için büyük önem taşır. Örneğin, bir web sayfasının üst kısmındaki logo ve menü genellikle <code></p> <header></code> ve <code></p> <nav></code> etiketleri içinde yer alır. Ana içerik <code><main></code> etiketiyle çevrelenirken, her bir makale veya blog yazısı <code></p> <article></code> etiketiyle belirtilebilir.</p> <p>HTML, web sayfalarının temelini oluşturarak içeriğe anlam ve yapı kazandırır. Bu etiketleri doğru ve anlamlı bir şekilde kullanmak, sadece görsel bir düzen sağlamakla kalmaz, aynı zamanda sayfanızın erişilebilirliğini ve arama motoru optimizasyonunu (SEO) da doğrudan etkiler. Bu temel yapı taşlarını anlamak, web geliştirme yolculuğunuzda atacağınız en sağlam adımdır.</p> <h3>CSS Nedir ve Web Sayfalarımızı Nasıl Güzelleştiririz?</h3> <p>HTML, bir web sayfasının iskeletini oluştururken, CSS (Cascading Style Sheets – Basamaklı Stil Sayfaları) bu iskelete estetik bir görünüm kazandıran, renkleri, yazı tiplerini, düzeni ve diğer görsel özellikleri belirleyen dildir. HTML olmadan bir web sayfası sadece düz metin ve bağlantılardan ibaretken, CSS ile bu sayfa canlı, etkileşimli ve görsel olarak çekici bir hale gelir.</p> <h4>Neden CSS Kullanmalıyız?</h4> <p>CSS kullanmanın birçok önemli faydası vardır:</p> <p>* <strong>İçerik ve Tasarımı Ayırma:</strong> CSS, içeriği (HTML) sunumdan (tasarım) ayırır. Bu, HTML dosyasının daha temiz ve okunabilir olmasını sağlar, tasarım değişikliklerini çok daha kolay hale getirir ve aynı HTML yapısına farklı CSS dosyaları uygulayarak farklı temalar oluşturmanıza olanak tanır.<br /> * <strong>Tutarlılık ve Verimlilik:</strong> Bir CSS dosyasıyla birden fazla web sayfasının stilini kontrol edebilirsiniz. Bu, web sitenizdeki tüm sayfaların tutarlı bir görünüme sahip olmasını sağlar ve tek bir değişiklik yaparak sitenizin genel tasarımını güncellemenize olanak tanır.<br /> * <strong>Daha Hızlı Yükleme Süreleri:</strong> CSS kodları genellikle tarayıcılar tarafından önbelleğe alınır. Bu, bir kullanıcının sitenizin farklı sayfalarını ziyaret ettiğinde stil dosyalarını tekrar indirmesine gerek kalmaması anlamına gelir, bu da sayfa yükleme sürelerini hızlandırır.<br /> * <strong>Erişilebilirlik ve Duyarlılık:</strong> CSS, web sayfalarını farklı cihaz boyutlarına ve ekran tiplerine (masaüstü, tablet, mobil) uyumlu hale getirmek için kullanılır. Bu, duyarlı tasarım (responsive design) ilkelerinin temelini oluşturur.</p> <h4>CSS’i HTML’e Bağlama Yolları</h4> <p>CSS kodlarını HTML belgesine dahil etmenin üç temel yolu vardır:</p> <p>1. <strong>Harici Stil Sayfaları (External Style Sheets):</strong> En çok tercih edilen ve önerilen yöntemdir. CSS kodları ayrı bir <code>.css</code> uzantılı dosyada saklanır ve HTML belgesine <code><link></code> etiketi aracılığıyla bağlanır.</p> <div class="code-container"></div> <p> Bu yöntem, içeriği ve tasarımı tamamen ayırır, bakımı kolaylaştırır ve sitenin genelinde tutarlılık sağlar.<br /> 2. <strong>Dahili Stil Sayfaları (Internal Style Sheets):</strong> CSS kodları, HTML belgesinin <code><head></code> bölümünde yer alan <code></p> <style></code> etiketleri arasına yazılır.</p> <div class="code-container"></div> <p> Bu yöntem, tek bir sayfa için özel stiller tanımlamak gerektiğinde kullanışlı olabilir, ancak birden fazla sayfa için tutarlılık sağlamada yetersiz kalır.<br /> 3. <strong>Satır İçi Stiller (Inline Styles):</strong> CSS kodları doğrudan HTML etiketlerinin içine, <code>style</code> özelliği kullanılarak yazılır.</p> <div class="code-container"> <pre><code> <p style="color: blue; font-size: 16px;">Bu paragrafın kendine özgü bir stili var.</p> </code></pre> </p></div> <p> Bu yöntem <strong>genellikle önerilmez</strong>, çünkü içeriği ve tasarımı birbirine karıştırır, kodun okunabilirliğini azaltır ve bakımını zorlaştırır. Acil ve çok spesifik durumlar dışında kaçınılmalıdır.</p> <h4>CSS Seçiciler ve Temel Özellikler</h4> <p>CSS, HTML elementlerini seçmek ve onlara stil uygulamak için seçiciler (selectors) kullanır.</p> <p>* <strong>Element Seçici:</strong> Doğrudan HTML elementinin adını kullanarak stil uygular.</p> <div class="code-container"> <pre><code> p { font-family: Arial, sans-serif; line-height: 1.6; } </code></pre> </p></div> <p>* <strong>Sınıf Seçici (Class Selector):</strong> HTML elementlerine <code>class</code> özelliği ile atanan bir sınıf adına göre stil uygular. Bir sınıfa birden fazla element sahip olabilir.</p> <div class="code-container"> <pre><code> .ozel-metin { color: green; font-weight: bold; } </code></pre> </p></div> <p> HTML'de kullanımı: <code><p class="ozel-metin">Bu özel bir metin.</p></code><br /> * <strong>ID Seçici:</strong> HTML elementlerine <code>id</code> özelliği ile atanan benzersiz bir kimliğe göre stil uygular. Bir ID, bir sayfada yalnızca bir kez kullanılmalıdır.</p> <div class="code-container"> <pre><code> #ana-baslik { text-align: center; margin-bottom: 20px; } </code></pre> </p></div> <p> HTML'de kullanımı: <code><h1 id="ana-baslik">Sayfa Başlığı</h1></code></p> <p><strong>Temel CSS Özellikleri:</strong></p> <p>* <code>color</code>: Metin rengini ayarlar.<br /> * <code>background-color</code>: Elementin arka plan rengini ayarlar.<br /> * <code>font-size</code>: Yazı tipi boyutunu ayarlar.<br /> * <code>font-family</code>: Yazı tipi ailesini ayarlar.<br /> * <code>text-align</code>: Metnin hizalamasını (left, right, center, justify) ayarlar.<br /> * <code>margin</code>: Elementin dış boşluğunu (diğer elementlerle arasındaki boşluk) ayarlar.<br /> * <code>padding</code>: Elementin iç boşluğunu (içeriği ile kenarlığı arasındaki boşluk) ayarlar.<br /> * <code>border</code>: Elementin kenarlığını ayarlar (kalınlık, stil, renk).</p> <p>CSS, web sayfalarımıza görsel bir kimlik kazandırarak onları kullanıcılar için daha çekici ve anlaşılır hale getirir. Doğru CSS kullanımı, sadece estetik değil, aynı zamanda kullanıcı deneyimi ve erişilebilirlik açısından da kritik öneme sahiptir. Bu temel bilgileri öğrenerek, web projelerinize profesyonel bir görünüm kazandırmanın ilk adımlarını atmış olacaksınız.</p> <h3>HTML ve CSS Birlikte Nasıl Çalışır: Gerçek Bir Web Sayfası Oluşturma</h3> <p>HTML ve CSS, web geliştirmenin iki ayrılmaz parçasıdır. HTML, bir web sayfasının yapısını ve içeriğini tanımlarken, CSS bu yapıya görsel stil ve düzen kazandırır. Bu iki dilin uyumlu çalışması, modern ve kullanıcı dostu web sitelerinin temelini oluşturur. Şimdi, bu iki teknolojiyi bir araya getirerek basit bir web sayfası örneği oluşturalım ve adım adım nasıl çalıştıklarını görelim.</p> <p>Hayal edelim ki, küçük bir yerel kahve dükkanı için basit bir tanıtım sayfası hazırlıyoruz. Bu sayfa bir başlık, bir tanıtım metni, bir görsel ve bir iletişim bilgisi içerecek.</p> <h4>Adım 1: HTML İskeletini Oluşturma</h4> <p>İlk olarak, sayfanın temel yapısını <code>index.html</code> adında bir dosya oluşturarak belirleyelim. Bu dosya, sayfanın ana başlığını, bir paragrafı, bir görseli ve iletişim bilgilerini içerecek.</p> <div class="code-container"> <pre><code class="language-html"></p> <header> <h1>Lezzetli Kahve Durağı'na Hoş Geldiniz!</h1> <p class="slogan">Gününüzü tatlandıracak kahveler...</p> </header> <p> <main></p> <section class="hakkimizda"> <h2>Hakkımızda</h2> <p>Lezzetli Kahve Durağı olarak, sabah kahvenizden akşam sohbetlerinize kadar her anınıza eşlik edecek en taze çekirdeklerden hazırlanmış özel kahveler sunuyoruz. Misafirlerimize sıcak bir ortam ve unutulmaz lezzetler vadediyoruz.</p> <p> <img decoding="async" src="https://via.placeholder.com/600x400/FFD700/000000?text=Kahve+Dukkani" alt="Kahve Dükkanı İç Mekanı"></p> <p>Her fincanımızda kalite ve tutku var. Gelin, eşsiz kahve deneyimimizi keşfedin.</p> </section> <section class="iletisim"> <h2>Bize Ulaşın</h2> <ul> <li>Adres: Örnek Cad. No:123, Kahve Şehri</li> <li>Telefon: 0 (XXX) XXX XX XX</li> <li>E-posta: info@lezzetlikahve.com</li> </ul> </section> <p> </main></p> <footer> <p>© 2023 Lezzetli Kahve Durağı. Tüm Hakları Saklıdır.</p> </footer> <div class="github-example-link"><strong>Örnek kod:</strong> <a href="https://github.com/fatihsoysalcom/basic-html-structure-and-tags" target="_blank" rel="noopener noreferrer">github.com/fatihsoysalcom/basic-html-structure-and-tags</a></div> </div> <div class="cs-entry__footer"> <div class="cs-entry__footer-left"> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><a class="cs-meta-author-link url fn n" href="https://fatihsoysal.com/blog/author/fatihsoysal/"><span class="cs-meta-author-by">by</span><span class="cs-meta-author-name">Fatih Soysal</span></a></div><div class="cs-meta-comments"><a href="https://fatihsoysal.com/blog/alt-baslik/#respond" class="comments-link" >0</a></div></div> </div> <div class="cs-entry__footer-right"> <div class="cs-share"> <a class="cs-share__link" target="_blank" href="https://www.facebook.com/sharer.php?text=Alt%20Ba%C5%9Fl%C4%B1k&u=https://fatihsoysal.com/blog/alt-baslik/"> <i class="cs-icon cs-icon-facebook"></i> </a> <a class="cs-share__link" target="_blank" href="https://twitter.com/share?t=Alt%20Ba%C5%9Fl%C4%B1k&url=https://fatihsoysal.com/blog/alt-baslik/"> <i class="cs-icon cs-icon-twitter-x"></i> </a> <a class="cs-share__link" target="_blank" href="https://t.me/share/url?url=%5BURL%5D&text=https://fatihsoysal.com/blog/alt-baslik/"> <i class="cs-icon cs-icon-telegram"></i> </a> <a class="cs-share__link cs-share__copy-link" target="_blank" href="https://fatihsoysal.com/blog/alt-baslik/"> <i class="cs-icon cs-icon-link"></i> </a> </div> </div> </div> <div class="cs-entry__comments" id="comments"> <div class="cs-entry__comments-header"> <div class="cs-entry__comments-left"> <div class="cs-entry__comments-heading">Yorumlar</div> <div class="cs-entry__comments-description h2">İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.</div> </div> <div class="cs-entry__comments-right"> <div class="cs-entry__comments-toggle"> <span class="cs-button" role="button" aria-label="Yorumlar"> <span>Yorum Yaz</span> </span> </div> </div> </div> <div class="cs-entry__comments-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Bir yanıt yazın <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/alt-baslik/#respond" style="display:none;">Yanıtı iptal et</a></small></h2><form action="https://fatihsoysal.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">E-posta adresiniz yayınlanmayacak.</span> <span class="required-field-message">Gerekli alanlar <span class="required">*</span> ile işaretlenmişlerdir</span></p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" aria-required="true" placeholder="Your Comment *"></textarea></p><p class="comment-form-author"><input id="author" name="author" type="text" value="" size="30" aria-required='true' placeholder="Your Name *" /></p> <p class="comment-form-email"><input id="email" name="email" type="email" value="" size="30" aria-required='true' placeholder="Your E-mail *" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"><label for="wp-comment-cookies-consent">Save my name and email in this browser for the next time I comment.</label></p> <p class="form-submit"><button name="submit" type="submit" id="submit" class="submit" value="Yorum gönder" />Gönder </button> <input type='hidden' name='comment_post_ID' value='43206' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="ea9f5fd0cd" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="157"/><script> document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() ); </script> </p></form> </div><!-- #respond --> </div> </div> </div> </div> </div> </div> </div> <section class="cs-read-next"> <h2 class="cs-read-next__heading"> Aşağıdaki içerikler de ilgilinizi çekebilir: </h2> <div class="cs-read-next__list cs-posts-area__archive"> <article class="cs-read-next__item post-43208 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/ucretsiz-guvenlik-taramalari-herkesin-deneyebilecegi-kirilmasi-neredeyse-imkansiz-bir-kalkan-mi/">Ücretsiz Güvenlik Taramaları: Herkesin Deneyebileceği, Kırılması Neredeyse İmkansız Bir Kalkan mı?<div class="cs-entry__post-meta" ><div class="cs-meta-date">9 Temmuz 2026</div></div></a></h2> </div> </div> </div> </article> <article class="cs-read-next__item post-43209 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/ajanlar-icin-dunya-insasi-karmasik-sistemleri-anlama-ve-yonetme-sanati/">Ajanlar İçin Dünya İnşası: Karmaşık Sistemleri Anlama ve Yönetme Sanatı<div class="cs-entry__post-meta" ><div class="cs-meta-date">9 Temmuz 2026</div></div></a></h2> </div> </div> </div> </article> <article class="cs-read-next__item post-43211 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/yapay-zeka-ajanlari-bulduklari-kelime-dagarcigini-nasil-guclendirir-ve-genisletir/">Yapay Zeka Ajanları: Buldukları Kelime Dağarcığını Nasıl Güçlendirir ve Genişletir?<div class="cs-entry__post-meta" ><div class="cs-meta-date">9 Temmuz 2026</div></div></a></h2> </div> </div> </div> </article> <article class="cs-read-next__item post-43213 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/cok-fazla-yapay-zeka-araci-kullanmanin-gizli-maliyeti-verimlilik-tuzagina-dusmeyin/">Çok Fazla Yapay Zeka Aracı Kullanmanın Gizli Maliyeti: Verimlilik Tuzağına Düşmeyin!<div class="cs-entry__post-meta" ><div class="cs-meta-date">10 Temmuz 2026</div></div></a></h2> </div> </div> </div> </article> </div> </section> <div class="cs-subscribe"> <div class="cs-subscribe__content"> <div class="cs-subscribe__header"> <div class="cs-subscribe__heading h2"> E-posta Bülteni </div> <div class="cs-subscribe__subheading h2"> Yazılım Topluluğuna Katılın </div> <div class="cs-subscribe__description"> En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim. </div> </div> <form class="cs-subscribe__form" action="https://codesupply.us13.list-manage.com/subscribe/post?u=41845cb8908fb4302a4df512f&id=b5a5e9c757" method="post" target="_blank" novalidate> <div class="cs-form-group cs-subscribe__form-group"> <input type="email" placeholder="Your E-mail" name="EMAIL" required> <button type="submit" value="Abone Ol" aria-label="Abone Ol" name="subscribe"> <span>Abone Ol</span> </button> </div> </form> </div> </div> </div> </div> </main> </div> </div> <footer class="cs-footer" data-scheme="auto" data-l="light" data-d="dark"> <div class="cs-footer__item cs-footer__item-top-bar"> <div class="cs-container"> <div class="cs-footer__item-inner"> <div class="cs-footer__col cs-col-left"> <div class="cs-footer-columns__nav-menu"> <ul id="menu-menu-5" class="cs-footer-columns__nav "><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19194 csco-menu-item-style-none"><a href="https://fatihsoysal.com/"><span>Anasayfa</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11 csco-menu-item-style-none"><a href="https://fatihsoysal.com/blog/hakkimda/"><span>Hakkımda</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25363 csco-menu-item-style-none"><a href="#"><span>Eğitimler</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30019 csco-menu-item-style-none"><a href="#"><span>Makaleler</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-69 csco-menu-item-style-none"><a href="https://fatihsoysal.com/blog"><span>Blog</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35075 csco-menu-item-style-none"><a href="#"><span>Kategoriler</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-257 csco-menu-item-style-none"><a href="https://fatihsoysal.com/blog/iletisim/"><span>Bana Ulaşın</span></a></li> </ul> </div> </div> <div class="cs-footer__col cs-col-right"> <div class="cs-social"> <a class="cs-social__link" href="https://www.linkedin.com/in/fatihsoysal/" target="_blank" title="Linkedin"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M16.8169 2.00011H3.1831C3.02984 1.998 2.87767 2.02591 2.73526 2.08226C2.59286 2.13861 2.46302 2.22229 2.35316 2.32852C2.24329 2.43475 2.15556 2.56145 2.09496 2.70139C2.03437 2.84133 2.0021 2.99176 2 3.1441V16.8559C2.0021 17.0082 2.03437 17.1587 2.09496 17.2986C2.15556 17.4385 2.24329 17.5653 2.35316 17.6715C2.46302 17.7777 2.59286 17.8614 2.73526 17.9177C2.87767 17.9741 3.02984 18.002 3.1831 17.9999H16.8169C16.9702 18.002 17.1223 17.9741 17.2647 17.9177C17.4071 17.8614 17.537 17.7777 17.6468 17.6715C17.7567 17.5653 17.8444 17.4385 17.905 17.2986C17.9656 17.1587 17.9979 17.0082 18 16.8559V3.1441C17.9979 2.99176 17.9656 2.84133 17.905 2.70139C17.8444 2.56145 17.7567 2.43475 17.6468 2.32852C17.537 2.22229 17.4071 2.13861 17.2647 2.08226C17.1223 2.02591 16.9702 1.998 16.8169 2.00011ZM6.85312 15.3919H4.43863V8.19203H6.85312V15.3919ZM5.64588 7.18404C5.31289 7.18404 4.99354 7.05256 4.75808 6.81851C4.52262 6.58447 4.39034 6.26704 4.39034 5.93606C4.39034 5.60507 4.52262 5.28764 4.75808 5.0536C4.99354 4.81956 5.31289 4.68807 5.64588 4.68807C5.82269 4.66814 6.00175 4.68556 6.17133 4.73918C6.3409 4.7928 6.49717 4.88142 6.6299 4.99924C6.76264 5.11706 6.86883 5.26141 6.94155 5.42285C7.01426 5.58429 7.05185 5.75918 7.05185 5.93606C7.05185 6.11294 7.01426 6.28782 6.94155 6.44926C6.86883 6.6107 6.76264 6.75506 6.6299 6.87287C6.49717 6.99069 6.3409 7.07931 6.17133 7.13293C6.00175 7.18656 5.82269 7.20397 5.64588 7.18404ZM15.5614 15.3919H13.1469V11.528C13.1469 10.56 12.8008 9.928 11.9235 9.928C11.652 9.92998 11.3877 10.0146 11.1661 10.1705C10.9445 10.3264 10.7762 10.5461 10.6841 10.8C10.6211 10.988 10.5938 11.186 10.6036 11.384V15.3839H8.18913V8.18402H10.6036V9.20001C10.823 8.8217 11.142 8.51004 11.5263 8.29859C11.9106 8.08713 12.3457 7.98391 12.7847 8.00003C14.3944 8.00003 15.5614 9.03201 15.5614 11.248V15.3919Z"/></svg> </a> </div> </div> </div> </div> </div> <div class="cs-footer__item cs-footer__item-bottom-bar"> <div class="cs-container"> <div class="cs-footer__item-inner"> <div class="cs-footer__col cs-col-left"> <div class="cs-footer__nav-menu"> <ul id="menu-footer" class="cs-footer__nav "><li id="menu-item-39737" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39737"><a href="https://fatihsoysal.com/blog/category/ai/"><span>AI</span></a></li> <li id="menu-item-39739" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39739"><a href="https://fatihsoysal.com/blog/category/akademik-ve-bilimsel/"><span>Akademik ve Bilimsel</span></a></li> <li id="menu-item-39740" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39740"><a href="https://fatihsoysal.com/blog/category/angular/"><span>Angular</span></a></li> <li id="menu-item-39741" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39741"><a href="https://fatihsoysal.com/blog/category/aws/"><span>AWS</span></a></li> <li id="menu-item-39742" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39742"><a href="https://fatihsoysal.com/blog/category/azure/"><span>Azure</span></a></li> <li id="menu-item-39743" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39743"><a href="https://fatihsoysal.com/blog/category/bash/"><span>Bash</span></a></li> <li id="menu-item-39745" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39745"><a href="https://fatihsoysal.com/blog/category/c-2/"><span>C++</span></a></li> <li id="menu-item-39746" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39746"><a href="https://fatihsoysal.com/blog/category/cloud/"><span>Cloud</span></a></li> <li id="menu-item-39748" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39748"><a href="https://fatihsoysal.com/blog/category/devops/"><span>Devops</span></a></li> <li id="menu-item-39749" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39749"><a href="https://fatihsoysal.com/blog/category/docker/"><span>Docker</span></a></li> <li id="menu-item-39750" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39750"><a href="https://fatihsoysal.com/blog/category/dusunsel-ve-kisisel/"><span>Düşünsel ve Kişisel</span></a></li> <li id="menu-item-39751" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39751"><a href="https://fatihsoysal.com/blog/category/egitim/"><span>Eğitim</span></a></li> <li id="menu-item-39752" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39752"><a href="https://fatihsoysal.com/blog/category/flutter/"><span>Flutter</span></a></li> <li id="menu-item-39754" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-39754"><a href="https://fatihsoysal.com/blog/category/genel/"><span>Genel</span></a></li> <li id="menu-item-39755" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39755"><a href="https://fatihsoysal.com/blog/category/git/"><span>Git</span></a></li> <li id="menu-item-39758" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39758"><a href="https://fatihsoysal.com/blog/category/is-dunyasi/"><span>İş Dünyası</span></a></li> <li id="menu-item-39759" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39759"><a href="https://fatihsoysal.com/blog/category/java/"><span>Java</span></a></li> <li id="menu-item-39760" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39760"><a href="https://fatihsoysal.com/blog/category/kubernetes/"><span>Kubernetes</span></a></li> <li id="menu-item-39761" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39761"><a href="https://fatihsoysal.com/blog/category/mobile/"><span>Mobile</span></a></li> <li id="menu-item-39762" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39762"><a href="https://fatihsoysal.com/blog/category/mongodb/"><span>MongoDB</span></a></li> <li id="menu-item-39763" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39763"><a href="https://fatihsoysal.com/blog/category/mvc/"><span>MVC</span></a></li> <li id="menu-item-39764" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39764"><a href="https://fatihsoysal.com/blog/category/nextjs/"><span>NextJS</span></a></li> <li id="menu-item-39765" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39765"><a href="https://fatihsoysal.com/blog/category/nginx/"><span>Nginx</span></a></li> <li id="menu-item-39766" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39766"><a href="https://fatihsoysal.com/blog/category/powershell/"><span>PowerShell</span></a></li> <li id="menu-item-39767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39767"><a href="https://fatihsoysal.com/blog/category/programming-patterns/"><span>Programming Patterns</span></a></li> <li id="menu-item-39768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39768"><a href="https://fatihsoysal.com/blog/category/python/"><span>Python</span></a></li> <li id="menu-item-39769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39769"><a href="https://fatihsoysal.com/blog/category/redis/"><span>Redis</span></a></li> <li id="menu-item-39770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39770"><a href="https://fatihsoysal.com/blog/category/sed/"><span>Sed</span></a></li> <li id="menu-item-39771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39771"><a href="https://fatihsoysal.com/blog/category/server/"><span>Server</span></a></li> <li id="menu-item-39772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39772"><a href="https://fatihsoysal.com/blog/category/yazilim/net/"><span>.NET</span></a></li> <li id="menu-item-39773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39773"><a href="https://fatihsoysal.com/blog/category/yazilim/ajax/"><span>AJAX</span></a></li> <li id="menu-item-39774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39774"><a href="https://fatihsoysal.com/blog/category/yazilim/asp-net/"><span>ASP.NET</span></a></li> <li id="menu-item-39775" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39775"><a href="https://fatihsoysal.com/blog/category/yazilim/c/"><span>C#</span></a></li> <li id="menu-item-39776" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39776"><a href="https://fatihsoysal.com/blog/category/yazilim/css3-html5/"><span>CSS3 – HTML5</span></a></li> <li id="menu-item-39777" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39777"><a href="https://fatihsoysal.com/blog/category/yazilim/java-android-development/"><span>JAVA – Android</span></a></li> <li id="menu-item-39778" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39778"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/"><span>Javascript</span></a></li> <li id="menu-item-39779" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39779"><a href="https://fatihsoysal.com/blog/category/yazilim/linux/"><span>Linux</span></a></li> <li id="menu-item-39780" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39780"><a href="https://fatihsoysal.com/blog/category/yazilim/php/"><span>PHP</span></a></li> <li id="menu-item-39781" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39781"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/jquery/"><span>jQuery</span></a></li> <li id="menu-item-39782" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39782"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/node-js/"><span>Node.js</span></a></li> <li id="menu-item-39783" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39783"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/react/"><span>React</span></a></li> <li id="menu-item-39784" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39784"><a href="https://fatihsoysal.com/blog/category/yazilim/sql/ms-sql-server/"><span>MS SQL Server</span></a></li> <li id="menu-item-39785" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39785"><a href="https://fatihsoysal.com/blog/category/yazilim/sql/mysql/"><span>MySQL</span></a></li> <li id="menu-item-39786" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39786"><a href="https://fatihsoysal.com/blog/category/yazilim/sql/postgresql/"><span>PostgreSQL</span></a></li> </ul> </div> </div> <div class="cs-footer__col cs-col-right"> <div class="cs-footer__copyright"> © 2026 Fatih Soysal 💻🚀 All rights reserved. Built with passion & caffeine ☕ </div> </div> </div> </div> </div> </footer> <button class="cs-scroll-top" role="button" aria-label="Scroll to top button"> <i class="cs-icon cs-icon-chevron-up"></i> <div class="cs-scroll-top-border"> <svg width="52" height="52" viewBox="0 0 52 52"> <path d="M26,2 a24,24 0 0,1 0,48 a24,24 0 0,1 0,-48" style="stroke-width: 2; fill: none;"></path> </svg> </div> <div class="cs-scroll-top-progress"> <svg width="52" height="52" viewBox="0 0 52 52"> <path d="M26,2 a24,24 0 0,1 0,48 a24,24 0 0,1 0,-48" style="stroke-width: 2; fill: none;"></path> </svg> </div> </button> <script type="text/javascript"> var CF7AppsLoadhCaptcha = function() { var hcaptcha = document.querySelectorAll( '.h-captcha' ); for (var i = 0; i < hcaptcha.length; i++) { hcaptcha[i].setAttribute( 'data-sitekey', '' ); hcaptcha[i].setAttribute( 'data-callback', 'cf7apps_hcaptcha_callback' ); } }; </script> <script src="https://js.hcaptcha.com/1/api.js?onload=CF7AppsLoadhCaptcha" async defer ></script> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/embed-any-document/js/pdfobject.min.js?ver=2.7.12" id="awsm-ead-pdf-object-js"></script> <script id="awsm-ead-public-js-extra"> var eadPublic = []; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/embed-any-document/js/embed-public.min.js?ver=2.7.12" id="awsm-ead-public-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5" id="swv-js"></script> <script id="contact-form-7-js-translations"> ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2026-01-19 21:19:08+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n > 1;","lang":"tr"},"This contact form is placed in the wrong place.":["Bu ileti\u015fim formu yanl\u0131\u015f yere yerle\u015ftirilmi\u015f."],"Error:":["Hata:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); </script> <script id="contact-form-7-js-before"> var wpcf7 = { "api": { "root": "https:\/\/fatihsoysal.com\/blog\/wp-json\/", "namespace": "contact-form-7\/v1" } }; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5" id="contact-form-7-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/sight/render/js/jquery.magnific-popup.min.js?ver=1777452259" id="magnific-popup-js"></script> <script id="sight-block-script-js-extra"> var sight_lightbox_localize = {"text_previous":"Previous","text_next":"Next","text_close":"Close","text_loading":"Loading","text_counter":"of"}; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/sight/render/js/sight.js?ver=1777452259" id="sight-block-script-js"></script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/easy-syntax-highlighter/assets/js/highlight.min.js?ver=11.9.0" id="esh-highlight-js-js"></script> <script id="esh-highlight-js-js-after"> document.addEventListener("DOMContentLoaded", () => { hljs.highlightAll(); }); </script> <script id="esh-frontend-js-extra"> var esh_i18n = {"copied":"\u5df2\u590d\u5236\uff01","copy_failed":"\u590d\u5236\u5931\u8d25"}; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/easy-syntax-highlighter/assets/js/frontend.js?ver=2.0.0" id="esh-frontend-js"></script> <script src="https://www.google.com/recaptcha/api.js?render=6Lfq6JMsAAAAAFwFocaWCzv-A3znzOaIyo9ACOYg&ver=3.0" id="google-recaptcha-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script> <script id="wpcf7-recaptcha-js-before"> var wpcf7_recaptcha = { "sitekey": "6Lfq6JMsAAAAAFwFocaWCzv-A3znzOaIyo9ACOYg", "actions": { "homepage": "homepage", "contactform": "contactform" } }; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.5" id="wpcf7-recaptcha-js"></script> <script id="csco-scripts-js-extra"> var csLocalize = {"siteSchemeMode":"system","siteSchemeToogle":"1","shareCopiedText":"URL copied","subscribeProcess":"Processing your subscription...","subscribeSuccess":"Thank you for subscribing!","subscribeError":"Form submission error"}; </script> <script src="https://fatihsoysal.com/blog/wp-content/themes/intro/assets/js/scripts.js?ver=6.7.11" id="csco-scripts-js"></script> <script src="https://fatihsoysal.com/blog/wp-content/themes/intro/assets/static/js/comment-reply.js?ver=6.7.11" id="csco-comment-reply-js"></script> <script defer src="https://fatihsoysal.com/blog/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1777452205" id="akismet-frontend-js"></script> </div> </body> </html>