<![CDATA[KodlarTR - HTML/CSS İpuçları]]> https://kodlar.tr/ Fri, 15 May 2026 12:18:05 +0000 MyBB <![CDATA[CSS Nedir Tanımı]]> https://kodlar.tr/konu-css-nedir-tanimi.html Wed, 23 Apr 2025 17:45:02 +0000 KodlarTR]]> https://kodlar.tr/konu-css-nedir-tanimi.html görsel ve etkileşimli katmanının (frontend) stilini tanımlamak için kullanılan bir stil dilidir. "Cascading Style Sheets" (Basamaklı Stil Sayfaları) kelimelerinin kısaltmasıdır.
CSS'in temel amacı, HTML (HyperText Markup Language) ile oluşturulan web sitesi içeriğinin nasıl görüneceğini belirlemektir. Bu görünüm; renkler, yazı tipleri, düzen, boyutlar, animasyonlar ve daha birçok görsel özelliği kapsar.
İşte Frontend CSS'in ne anlama geldiğini ve neden önemli olduğunu özetleyen ana noktalar:
  • Stil Tanımlama: CSS, HTML elementlerinin (başlıklar, paragraflar, resimler, bağlantılar vb.) nasıl biçimlendirileceğini tanımlar. Örneğin, bir başlığın hangi renkte, hangi boyutta ve hangi yazı tipinde olacağını CSS ile belirlersiniz.
  • Sunumdan Ayrılık: CSS, web sitesinin içeriğini (HTML) sunumundan (stil) ayırır. Bu sayede:
    • Daha Kolay Bakım: Stil değişiklikleri sadece CSS dosyalarında yapılır, HTML yapısına dokunmaya gerek kalmaz. Bu, büyük web sitelerinin bakımını çok daha kolaylaştırır.
    • Tutarlılık: Web sitesinin genelinde aynı stil kurallarını uygulamak kolaylaşır, bu da tutarlı bir kullanıcı deneyimi sağlar.
    • Erişilebilirlik: İçeriğin ve sunumun ayrılması, farklı cihazlar ve erişilebilirlik araçları için daha uygun yapılar oluşturmaya yardımcı olur.
  • Çeşitlilik ve Esneklik: CSS, web tasarımcılarına sonsuz sayıda stil seçeneği sunar. Basit metin biçimlendirmesinden karmaşık düzenlere, animasyonlara ve duyarlı tasarımlara kadar geniş bir yelpazede görsel efektler oluşturulabilir.
  • Duyarlı Tasarım (Responsive Design): CSS, farklı ekran boyutlarına (masaüstü, tablet, mobil) uyum sağlayan web siteleri oluşturmak için temel bir araçtır.
    Kod:
    @media
    sorguları gibi özellikler sayesinde, sitenin farklı cihazlarda en iyi şekilde görünmesi sağlanır.
  • Etkileşim ve Animasyon: CSS3 ile birlikte gelen özellikler sayesinde, basit animasyonlar ve geçiş efektleri kodlayarak web sitelerine dinamik bir hava katılabilir. Bu, kullanıcı etkileşimini artırabilir.
Özetle, Frontend CSS:
  • Web sitelerinin görsel sunumunu kontrol eden bir dildir.
  • HTML içeriğini biçimlendirmek, düzenlemek ve stil vermek için kullanılır.
  • Web geliştiricilere büyük bir esneklik ve kontrol sağlar.
  • Bakımı kolay, tutarlı ve duyarlı web siteleri oluşturmanın temelini oluşturur.
Frontend geliştiricilerinin HTML ve JavaScript ile birlikte en temel becerilerinden biridir. İyi bir CSS bilgisi, kullanıcı dostu ve görsel açıdan çekici web siteleri oluşturmak için kritik öneme sahiptir.]]> görsel ve etkileşimli katmanının (frontend) stilini tanımlamak için kullanılan bir stil dilidir. "Cascading Style Sheets" (Basamaklı Stil Sayfaları) kelimelerinin kısaltmasıdır.
CSS'in temel amacı, HTML (HyperText Markup Language) ile oluşturulan web sitesi içeriğinin nasıl görüneceğini belirlemektir. Bu görünüm; renkler, yazı tipleri, düzen, boyutlar, animasyonlar ve daha birçok görsel özelliği kapsar.
İşte Frontend CSS'in ne anlama geldiğini ve neden önemli olduğunu özetleyen ana noktalar:
  • Stil Tanımlama: CSS, HTML elementlerinin (başlıklar, paragraflar, resimler, bağlantılar vb.) nasıl biçimlendirileceğini tanımlar. Örneğin, bir başlığın hangi renkte, hangi boyutta ve hangi yazı tipinde olacağını CSS ile belirlersiniz.
  • Sunumdan Ayrılık: CSS, web sitesinin içeriğini (HTML) sunumundan (stil) ayırır. Bu sayede:
    • Daha Kolay Bakım: Stil değişiklikleri sadece CSS dosyalarında yapılır, HTML yapısına dokunmaya gerek kalmaz. Bu, büyük web sitelerinin bakımını çok daha kolaylaştırır.
    • Tutarlılık: Web sitesinin genelinde aynı stil kurallarını uygulamak kolaylaşır, bu da tutarlı bir kullanıcı deneyimi sağlar.
    • Erişilebilirlik: İçeriğin ve sunumun ayrılması, farklı cihazlar ve erişilebilirlik araçları için daha uygun yapılar oluşturmaya yardımcı olur.
  • Çeşitlilik ve Esneklik: CSS, web tasarımcılarına sonsuz sayıda stil seçeneği sunar. Basit metin biçimlendirmesinden karmaşık düzenlere, animasyonlara ve duyarlı tasarımlara kadar geniş bir yelpazede görsel efektler oluşturulabilir.
  • Duyarlı Tasarım (Responsive Design): CSS, farklı ekran boyutlarına (masaüstü, tablet, mobil) uyum sağlayan web siteleri oluşturmak için temel bir araçtır.
    Kod:
    @media
    sorguları gibi özellikler sayesinde, sitenin farklı cihazlarda en iyi şekilde görünmesi sağlanır.
  • Etkileşim ve Animasyon: CSS3 ile birlikte gelen özellikler sayesinde, basit animasyonlar ve geçiş efektleri kodlayarak web sitelerine dinamik bir hava katılabilir. Bu, kullanıcı etkileşimini artırabilir.
Özetle, Frontend CSS:
  • Web sitelerinin görsel sunumunu kontrol eden bir dildir.
  • HTML içeriğini biçimlendirmek, düzenlemek ve stil vermek için kullanılır.
  • Web geliştiricilere büyük bir esneklik ve kontrol sağlar.
  • Bakımı kolay, tutarlı ve duyarlı web siteleri oluşturmanın temelini oluşturur.
Frontend geliştiricilerinin HTML ve JavaScript ile birlikte en temel becerilerinden biridir. İyi bir CSS bilgisi, kullanıcı dostu ve görsel açıdan çekici web siteleri oluşturmak için kritik öneme sahiptir.]]> <![CDATA[Semantik HTML Nedir]]> https://kodlar.tr/konu-semantik-html-nedir.html Mon, 21 Apr 2025 18:11:59 +0000 admin]]> https://kodlar.tr/konu-semantik-html-nedir.html Semantik HTML, web sayfalarının içeriğini hem tarayıcılara hem de geliştiricilere anlamlı bir şekilde açıklayan HTML etiketlerini kullanma pratiğidir. Temel amaç, içeriğin yalnızca nasıl göründüğünü değil, ne anlama geldiğini de vurgulamaktır.
Geleneksel HTML'de, içeriği biçimlendirmek için sıklıkla
Kod:
<div>
ve
Kod:
<span>
gibi genel amaçlı etiketler kullanılırdı. Bu etiketler, içeriğin yapısı hakkında çok az bilgi verir veya hiç bilgi vermezdi. Semantik HTML ise
Kod:
<article>
,
Kod:
<nav>
,
Kod:
<aside>
,
Kod:
<header>
,
Kod:
<footer>
gibi içeriğin rolünü ve anlamını açıkça belirten etiketler sunar.
Semantik HTML'in Faydaları Nelerdir?
  • Daha İyi SEO (Arama Motoru Optimizasyonu): Arama motorları, semantik etiketleri kullanarak içeriğin bağlamını ve önemini daha iyi anlayabilir. Bu da arama sonuçlarında daha iyi sıralamalar elde etmeye yardımcı olabilir. Örneğin, bir
    Kod:
    <article>
    etiketi içindeki içeriğin bir makale olduğunu anlarlar ve buna göre değerlendirirler.
  • Daha Erişilebilir Web Siteleri: Ekran okuyucular gibi yardımcı teknolojiler, semantik etiketleri kullanarak içeriği daha doğru bir şekilde yorumlayabilir ve kullanıcılara aktarabilir. Bu, web sitenizin daha geniş bir kitleye ulaşmasını sağlar. Örneğin,
    Kod:
    <nav>
    etiketi bir gezinme bölümünü işaret eder ve ekran okuyucular bu bilgiyi kullanıcılara iletebilir.
  • Daha Anlaşılır ve Bakımı Kolay Kod: Semantik etiketler, HTML kodunun okunabilirliğini ve anlaşılırlığını artırır. Geliştiriciler, etiketlerin anlamını bildikleri için kodun ne yaptığını daha kolay anlayabilir ve üzerinde değişiklik yapabilirler. Bu da uzun vadede web sitesinin bakımını kolaylaştırır.
  • Daha İyi Yapılandırılmış İçerik: Semantik etiketler, içeriğin mantıksal yapısını vurgular. Bu, içeriğin düzenlenmesini ve stilendirilmesini kolaylaştırır. Örneğin, bir
    Kod:
    <aside>
    etiketi genellikle ana içerikle ilgili ancak ayrı bir bilgi bölümünü işaret eder.
  • Daha İyi Tarayıcı Anlaması: Tarayıcılar, semantik etiketleri kullanarak içeriği daha iyi işleyebilir ve sunabilir. Bu, performansı artırabilir ve gelecekteki web teknolojileri için daha iyi bir temel oluşturabilir.
Bazı Yaygın Semantik HTML Etiketleri ve Kullanım Alanları:
  • Kod:
    <article>
    : Bağımsız ve kendi içinde anlamlı bir içeriği temsil eder (örneğin, bir blog gönderisi, bir haber makalesi).
  • Kod:
    <aside>
    : Ana içerikle dolaylı olarak ilişkili ancak ayrı bir içeriği temsil eder (örneğin, kenar çubuğu, alıntılar).
  • Kod:
    <nav>
    : Gezinme bağlantılarını içeren bir bölümü temsil eder (örneğin, menüler).
  • Kod:
    <header>
    : Bir bölümün veya tüm sayfanın tanıtım içeriğini temsil eder (örneğin, başlık, logo).
  • Kod:
    <footer>
    : Bir bölümün veya tüm sayfanın alt bilgisini temsil eder (örneğin, telif hakkı bilgileri, iletişim bilgileri).
  • Kod:
    <main>
    : Belgenin ana içeriğini temsil eder.
  • Kod:
    <section>
    : Tematik olarak gruplandırılmış içeriğin bir bölümünü temsil eder.
  • Kod:
    <figure>
    ve
    Kod:
    <figcaption>
    : Resimler, grafikler vb. gibi bağımsız medyaları ve bunların başlıklarını temsil eder.
  • Kod:
    <mark>
    : Metin içinde vurgulanması gereken bir bölümü işaretler.
  • Kod:
    <time>
    : Tarih ve/veya saat bilgisini temsil eder.
Örnek:
Semantik olmayan HTML:
HTML

Kod:
<div id="header">
  <div class="logo">Web Sitem</div>
  <div class="navigation">
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </div>
</div>
<div id="main">
  <div class="article">
    <h1>Makale Başlığı</h1>
    <p>Makale içeriği...</p>
  </div>
  <div class="sidebar">
    <h3>İlgili Bağlantılar</h3>
    <ul>
      <li><a href="#">Bağlantı 1</a></li>
      <li><a href="#">Bağlantı 2</a></li>
    </ul>
  </div>
</div>
<div id="footer">
  <p>© 2023 Tüm Hakları Saklıdır.</p>
</div>
Semantik HTML:
HTML

Kod:
<header>
  <div class="logo">Web Sitem</div>
  <nav>
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Makale Başlığı</h1>
    <p>Makale içeriği...</p>
  </article>
  <aside>
    <h3>İlgili Bağlantılar</h3>
    <ul>
      <li><a href="#">Bağlantı 1</a></li>
      <li><a href="#">Bağlantı 2</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>© 2023 Tüm Hakları Saklıdır.</p>
</footer>
Bu örnekte görüldüğü gibi, semantik etiketler kullanılarak içeriğin farklı bölümleri (başlık, gezinme, ana içerik, kenar çubuğu, alt bilgi) daha anlamlı bir şekilde işaretlenmiştir. Bu, hem geliştiricilerin hem de tarayıcıların içeriği daha iyi anlamasına yardımcı olur.
Semantik HTML, modern web geliştirmenin önemli bir parçasıdır ve daha erişilebilir, SEO dostu ve bakımı kolay web siteleri oluşturmak için temel bir prensiptir.]]> Semantik HTML, web sayfalarının içeriğini hem tarayıcılara hem de geliştiricilere anlamlı bir şekilde açıklayan HTML etiketlerini kullanma pratiğidir. Temel amaç, içeriğin yalnızca nasıl göründüğünü değil, ne anlama geldiğini de vurgulamaktır.
Geleneksel HTML'de, içeriği biçimlendirmek için sıklıkla
Kod:
<div>
ve
Kod:
<span>
gibi genel amaçlı etiketler kullanılırdı. Bu etiketler, içeriğin yapısı hakkında çok az bilgi verir veya hiç bilgi vermezdi. Semantik HTML ise
Kod:
<article>
,
Kod:
<nav>
,
Kod:
<aside>
,
Kod:
<header>
,
Kod:
<footer>
gibi içeriğin rolünü ve anlamını açıkça belirten etiketler sunar.
Semantik HTML'in Faydaları Nelerdir?
  • Daha İyi SEO (Arama Motoru Optimizasyonu): Arama motorları, semantik etiketleri kullanarak içeriğin bağlamını ve önemini daha iyi anlayabilir. Bu da arama sonuçlarında daha iyi sıralamalar elde etmeye yardımcı olabilir. Örneğin, bir
    Kod:
    <article>
    etiketi içindeki içeriğin bir makale olduğunu anlarlar ve buna göre değerlendirirler.
  • Daha Erişilebilir Web Siteleri: Ekran okuyucular gibi yardımcı teknolojiler, semantik etiketleri kullanarak içeriği daha doğru bir şekilde yorumlayabilir ve kullanıcılara aktarabilir. Bu, web sitenizin daha geniş bir kitleye ulaşmasını sağlar. Örneğin,
    Kod:
    <nav>
    etiketi bir gezinme bölümünü işaret eder ve ekran okuyucular bu bilgiyi kullanıcılara iletebilir.
  • Daha Anlaşılır ve Bakımı Kolay Kod: Semantik etiketler, HTML kodunun okunabilirliğini ve anlaşılırlığını artırır. Geliştiriciler, etiketlerin anlamını bildikleri için kodun ne yaptığını daha kolay anlayabilir ve üzerinde değişiklik yapabilirler. Bu da uzun vadede web sitesinin bakımını kolaylaştırır.
  • Daha İyi Yapılandırılmış İçerik: Semantik etiketler, içeriğin mantıksal yapısını vurgular. Bu, içeriğin düzenlenmesini ve stilendirilmesini kolaylaştırır. Örneğin, bir
    Kod:
    <aside>
    etiketi genellikle ana içerikle ilgili ancak ayrı bir bilgi bölümünü işaret eder.
  • Daha İyi Tarayıcı Anlaması: Tarayıcılar, semantik etiketleri kullanarak içeriği daha iyi işleyebilir ve sunabilir. Bu, performansı artırabilir ve gelecekteki web teknolojileri için daha iyi bir temel oluşturabilir.
Bazı Yaygın Semantik HTML Etiketleri ve Kullanım Alanları:
  • Kod:
    <article>
    : Bağımsız ve kendi içinde anlamlı bir içeriği temsil eder (örneğin, bir blog gönderisi, bir haber makalesi).
  • Kod:
    <aside>
    : Ana içerikle dolaylı olarak ilişkili ancak ayrı bir içeriği temsil eder (örneğin, kenar çubuğu, alıntılar).
  • Kod:
    <nav>
    : Gezinme bağlantılarını içeren bir bölümü temsil eder (örneğin, menüler).
  • Kod:
    <header>
    : Bir bölümün veya tüm sayfanın tanıtım içeriğini temsil eder (örneğin, başlık, logo).
  • Kod:
    <footer>
    : Bir bölümün veya tüm sayfanın alt bilgisini temsil eder (örneğin, telif hakkı bilgileri, iletişim bilgileri).
  • Kod:
    <main>
    : Belgenin ana içeriğini temsil eder.
  • Kod:
    <section>
    : Tematik olarak gruplandırılmış içeriğin bir bölümünü temsil eder.
  • Kod:
    <figure>
    ve
    Kod:
    <figcaption>
    : Resimler, grafikler vb. gibi bağımsız medyaları ve bunların başlıklarını temsil eder.
  • Kod:
    <mark>
    : Metin içinde vurgulanması gereken bir bölümü işaretler.
  • Kod:
    <time>
    : Tarih ve/veya saat bilgisini temsil eder.
Örnek:
Semantik olmayan HTML:
HTML

Kod:
<div id="header">
  <div class="logo">Web Sitem</div>
  <div class="navigation">
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </div>
</div>
<div id="main">
  <div class="article">
    <h1>Makale Başlığı</h1>
    <p>Makale içeriği...</p>
  </div>
  <div class="sidebar">
    <h3>İlgili Bağlantılar</h3>
    <ul>
      <li><a href="#">Bağlantı 1</a></li>
      <li><a href="#">Bağlantı 2</a></li>
    </ul>
  </div>
</div>
<div id="footer">
  <p>© 2023 Tüm Hakları Saklıdır.</p>
</div>
Semantik HTML:
HTML

Kod:
<header>
  <div class="logo">Web Sitem</div>
  <nav>
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Makale Başlığı</h1>
    <p>Makale içeriği...</p>
  </article>
  <aside>
    <h3>İlgili Bağlantılar</h3>
    <ul>
      <li><a href="#">Bağlantı 1</a></li>
      <li><a href="#">Bağlantı 2</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>© 2023 Tüm Hakları Saklıdır.</p>
</footer>
Bu örnekte görüldüğü gibi, semantik etiketler kullanılarak içeriğin farklı bölümleri (başlık, gezinme, ana içerik, kenar çubuğu, alt bilgi) daha anlamlı bir şekilde işaretlenmiştir. Bu, hem geliştiricilerin hem de tarayıcıların içeriği daha iyi anlamasına yardımcı olur.
Semantik HTML, modern web geliştirmenin önemli bir parçasıdır ve daha erişilebilir, SEO dostu ve bakımı kolay web siteleri oluşturmak için temel bir prensiptir.]]> <![CDATA[Semantik HTML Kullanmaktan Çekinme]]> https://kodlar.tr/konu-semantik-html-kullanmaktan-cekinme.html Mon, 21 Apr 2025 18:09:32 +0000 admin]]> https://kodlar.tr/konu-semantik-html-kullanmaktan-cekinme.html
  • Kod:
    <div>
    her derde deva ama her iş için değil.
  • Kod:
    <header>
    ,
    Kod:
    <nav>
    ,
    Kod:
    <section>
    ,
    Kod:
    <article>
    ,
    Kod:
    <footer>
    gibi etiketlerle sayfanın anlamını artır.
    • ? Bu, SEO ve erişilebilirlik için büyük artı puan!

    Semantik HTML Nedir diyenler için Alt Konularda Açıklayıcı bir Yazımız var. Lütfen Takip Edin.]]>
  • Kod:
    <div>
    her derde deva ama her iş için değil.
  • Kod:
    <header>
    ,
    Kod:
    <nav>
    ,
    Kod:
    <section>
    ,
    Kod:
    <article>
    ,
    Kod:
    <footer>
    gibi etiketlerle sayfanın anlamını artır.
    • ? Bu, SEO ve erişilebilirlik için büyük artı puan!

    Semantik HTML Nedir diyenler için Alt Konularda Açıklayıcı bir Yazımız var. Lütfen Takip Edin.]]>         <![CDATA[Doğru Etiket, Doğru İş!]]> https://kodlar.tr/konu-dogru-etiket-dogru-is.html Mon, 21 Apr 2025 18:07:33 +0000 admin]]> https://kodlar.tr/konu-dogru-etiket-dogru-is.html HTML’de hangi etiketi ne için kullanman gerektiğini iyi bilmek, yapıyı güçlü ve anlamlı yapar.
    Örneğin:
    • Kod:
      <strong>
      kalın yazı ve arama motorları için “önemli” anlamına gelir.
    • Kod:
      <b>
      sadece görsel olarak kalın yapar.
    • Kod:
      <em>
      vurgulu yazı için idealdir; screen reader’lar da bunu anlar.
    ? Kısacası, sadece göze değil, yapıya da kod yaz.]]>     HTML’de hangi etiketi ne için kullanman gerektiğini iyi bilmek, yapıyı güçlü ve anlamlı yapar.
    Örneğin:
    • Kod:
      <strong>
      kalın yazı ve arama motorları için “önemli” anlamına gelir.
    • Kod:
      <b>
      sadece görsel olarak kalın yapar.
    • Kod:
      <em>
      vurgulu yazı için idealdir; screen reader’lar da bunu anlar.
    ? Kısacası, sadece göze değil, yapıya da kod yaz.]]>