<![CDATA[KodlarTR - HTML]]> https://kodlar.tr/ Fri, 15 May 2026 11:25:53 +0000 MyBB <![CDATA[DOCTYPE html Nasıl Kullanılır]]> https://kodlar.tr/konu-doctype-html-nasil-kullanilir.html Fri, 23 May 2025 20:06:48 +0000 admin]]> https://kodlar.tr/konu-doctype-html-nasil-kullanilir.html Nasıl Kullanılır?
Kod:
<!DOCTYPE html>
kullanımı oldukça basittir:
HTML

Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfamın Başlığı</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu bir örnek paragraftır.</p>
</body>
</html>
Gördüğünüz gibi, belgenin en üstünde,
Kod:
<html>
etiketinden bile önce yer almalıdır. Bu, tarayıcının sayfayı okumaya başlamadan önce hangi modu kullanacağını bilmesini sağlar.]]> Nasıl Kullanılır?
Kod:
<!DOCTYPE html>
kullanımı oldukça basittir:
HTML

Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfamın Başlığı</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu bir örnek paragraftır.</p>
</body>
</html>
Gördüğünüz gibi, belgenin en üstünde,
Kod:
<html>
etiketinden bile önce yer almalıdır. Bu, tarayıcının sayfayı okumaya başlamadan önce hangi modu kullanacağını bilmesini sağlar.]]> <![CDATA[HTML 'nin Webdeki Rölü]]> https://kodlar.tr/konu-html-nin-webdeki-rolu.html Sat, 19 Apr 2025 19:48:16 +0000 KodlarTR]]> https://kodlar.tr/konu-html-nin-webdeki-rolu.html
HTML (Köprü Metni İşaretleme Dili), webin temel yapı taşıdır. Web sayfalarının iskeletini oluşturan dil olarak, çok önemli bir rol oynar. İşlevini şöyle özetleyebiliriz:
 HTML’in Web’deki Rolü
  1. İçeriğin Yapılandırılması:
    • HTML, bir web sayfasında metinleri, başlıkları, paragrafları, listeleri, görselleri, videoları ve bağlantıları tanımlar.
    • Örneğin bir haber sitesindeki başlık
      Kod:
      <h1>
      , paragraflar
      Kod:
      <p>
      , resimler
      Kod:
      <img>
      gibi etiketlerle belirtilir.
  2. Tarayıcıya Ne Gösterileceğini Söyler:
    • HTML dosyaları, tarayıcılar tarafından okunur ve kullanıcıya görsel olarak sunulur.
    • Yani tarayıcılar (Chrome, Firefox, Safari vb.), HTML kodunu anlayarak sayfayı oluşturur.
  3. Diğer Web Teknolojileriyle İş Birliği Yapar:
    • CSS (Cascading Style Sheets): HTML’in görünümünü (renkler, boyutlar, konumlar) düzenler.
    • JavaScript: Sayfaya etkileşim kazandırır (butona tıklanınca bir şey olması gibi).
    • Bu üçlü (HTML + CSS + JS) modern web’in temelidir.
  4. Arama Motorları ve Erişilebilirlik Açısından Önemlidir:
    • Arama motorları HTML içeriğini okuyarak sayfanın ne hakkında olduğunu anlar.
    • Ekran okuyucular gibi erişilebilirlik araçları, HTML etiketlerini kullanarak görme engelli kullanıcılar için sayfayı sesli hale getirir.
HTML, bir web sayfasının iskeletini oluşturur. Web tasarım ve geliştirme işlerinde her şey onunla başlar. örnek bir HTML sayfası göstererek açıklayalım.


 Aşağıda, temel bir HTML sayfa örneği paylaşıyorum. Bu örnek, başlık, paragraf, resim, bağlantı ve liste gibi temel HTML öğelerini içeriyor:


html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Web Sayfam</title>
</head>
<body>
  <h1>Hoş Geldiniz!</h1>
  <p>Bu, HTML ile oluşturulmuş ilk web sayfam. Web geliştirme dünyasına adım attım </p>

  <h2>Hakkımda</h2>
  <p>Ben bir web geliştirici adayıyım. HTML, CSS ve JavaScript öğreniyorum.</p>

  <h2>İlgi Alanlarım</h2>
  <ul>
    <li>Web Tasarımı</li>
    <li>Oyun Geliştirme</li>
    <li>Yapay Zeka</li>
  </ul>

  <h2>Favori Sitem</h2>
  <p>Daha fazla bilgi için <a href="https://www. domain.com" target="_blank">HTML Öğreniyorum</a> sitesine göz atabilirsiniz.</p>

  <h2>Bir Görsel</h2>
  <img src="https://www. domain.com/html/img1.jpg" alt="HTML Örneği Görseli" width="300">

  <footer>
    <p>&copy; 2025 - Tüm hakları saklıdır.</p>
  </footer>
</body>
</html>


Bu Sayfada Neler Var?

<!DOCTYPE html> → HTML5 olduğunu belirtir.

<html lang="tr"> → Sayfanın dilini Türkçe olarak ayarlar.

<head> → Sayfa başlığı ve karakter kodlaması gibi bilgiler içerir.

<body> → Görünen tüm içerik burada yer alır (başlık, paragraf, liste, resim, link, vs.).

<footer> → Sayfanın alt kısmında telif bilgisi gibi öğeler olur.

Dilersen bu sayfaya CSS veya JavaScript de ekleyebiliriz.]]>
HTML (Köprü Metni İşaretleme Dili), webin temel yapı taşıdır. Web sayfalarının iskeletini oluşturan dil olarak, çok önemli bir rol oynar. İşlevini şöyle özetleyebiliriz:
 HTML’in Web’deki Rolü
  1. İçeriğin Yapılandırılması:
    • HTML, bir web sayfasında metinleri, başlıkları, paragrafları, listeleri, görselleri, videoları ve bağlantıları tanımlar.
    • Örneğin bir haber sitesindeki başlık
      Kod:
      <h1>
      , paragraflar
      Kod:
      <p>
      , resimler
      Kod:
      <img>
      gibi etiketlerle belirtilir.
  2. Tarayıcıya Ne Gösterileceğini Söyler:
    • HTML dosyaları, tarayıcılar tarafından okunur ve kullanıcıya görsel olarak sunulur.
    • Yani tarayıcılar (Chrome, Firefox, Safari vb.), HTML kodunu anlayarak sayfayı oluşturur.
  3. Diğer Web Teknolojileriyle İş Birliği Yapar:
    • CSS (Cascading Style Sheets): HTML’in görünümünü (renkler, boyutlar, konumlar) düzenler.
    • JavaScript: Sayfaya etkileşim kazandırır (butona tıklanınca bir şey olması gibi).
    • Bu üçlü (HTML + CSS + JS) modern web’in temelidir.
  4. Arama Motorları ve Erişilebilirlik Açısından Önemlidir:
    • Arama motorları HTML içeriğini okuyarak sayfanın ne hakkında olduğunu anlar.
    • Ekran okuyucular gibi erişilebilirlik araçları, HTML etiketlerini kullanarak görme engelli kullanıcılar için sayfayı sesli hale getirir.
HTML, bir web sayfasının iskeletini oluşturur. Web tasarım ve geliştirme işlerinde her şey onunla başlar. örnek bir HTML sayfası göstererek açıklayalım.


 Aşağıda, temel bir HTML sayfa örneği paylaşıyorum. Bu örnek, başlık, paragraf, resim, bağlantı ve liste gibi temel HTML öğelerini içeriyor:


html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Benim İlk Web Sayfam</title>
</head>
<body>
  <h1>Hoş Geldiniz!</h1>
  <p>Bu, HTML ile oluşturulmuş ilk web sayfam. Web geliştirme dünyasına adım attım </p>

  <h2>Hakkımda</h2>
  <p>Ben bir web geliştirici adayıyım. HTML, CSS ve JavaScript öğreniyorum.</p>

  <h2>İlgi Alanlarım</h2>
  <ul>
    <li>Web Tasarımı</li>
    <li>Oyun Geliştirme</li>
    <li>Yapay Zeka</li>
  </ul>

  <h2>Favori Sitem</h2>
  <p>Daha fazla bilgi için <a href="https://www. domain.com" target="_blank">HTML Öğreniyorum</a> sitesine göz atabilirsiniz.</p>

  <h2>Bir Görsel</h2>
  <img src="https://www. domain.com/html/img1.jpg" alt="HTML Örneği Görseli" width="300">

  <footer>
    <p>&copy; 2025 - Tüm hakları saklıdır.</p>
  </footer>
</body>
</html>


Bu Sayfada Neler Var?

<!DOCTYPE html> → HTML5 olduğunu belirtir.

<html lang="tr"> → Sayfanın dilini Türkçe olarak ayarlar.

<head> → Sayfa başlığı ve karakter kodlaması gibi bilgiler içerir.

<body> → Görünen tüm içerik burada yer alır (başlık, paragraf, liste, resim, link, vs.).

<footer> → Sayfanın alt kısmında telif bilgisi gibi öğeler olur.

Dilersen bu sayfaya CSS veya JavaScript de ekleyebiliriz.]]> <![CDATA[Söz Sizde]]> https://kodlar.tr/konu-soz-sizde.html Sat, 19 Apr 2025 18:55:10 +0000 admin]]> https://kodlar.tr/konu-soz-sizde.html
  • Söz Sizde Hadi Paylaşalım .Smile
  • HTML öğrenirken sizi en çok zorlayan ne oldu?
  • Semantik etiketleri kullanıyor musunuz? (Kabul edelim çoğumuz önce div'le çözüyoruz ?)
  • En sevdiğiniz HTML "trick" nedir?
    • Yorumlarda deneyimlerinizi ve tavsiyelerinizi bekliyorum. ?
    Kodu paylaş, öğreneni destekle]]>
  • Söz Sizde Hadi Paylaşalım .Smile
  • HTML öğrenirken sizi en çok zorlayan ne oldu?
  • Semantik etiketleri kullanıyor musunuz? (Kabul edelim çoğumuz önce div'le çözüyoruz ?)
  • En sevdiğiniz HTML "trick" nedir?
    • Yorumlarda deneyimlerinizi ve tavsiyelerinizi bekliyorum. ?
    Kodu paylaş, öğreneni destekle]]>         <![CDATA[Yeni Başlayanlar İçin Mini Tavsiyeler]]> https://kodlar.tr/konu-yeni-baslayanlar-icin-mini-tavsiyeler.html Sat, 19 Apr 2025 18:52:06 +0000 admin]]> https://kodlar.tr/konu-yeni-baslayanlar-icin-mini-tavsiyeler.html
    [*]Kodlarınızı 
    Kod:
    Live Server 
    gibi araçlarla anlık gözlemleyin.
    [*]Her etiketin ne işe yaradığını bilin, ezbere değil mantıkla öğrenin.
    [*]HTML5 semantik etiketlerini (header, nav, article, section vs.) zamanla öğrenmeye başlayın.
    [*]Mobil uyumluluğu (responsive yapı) CSS tarafında olsa da, HTML’in yapısı da önemlidir. Doğru yerleştirme = doğru sonuç.]]>
    [*]Kodlarınızı 
    Kod:
    Live Server 
    gibi araçlarla anlık gözlemleyin.
    [*]Her etiketin ne işe yaradığını bilin, ezbere değil mantıkla öğrenin.
    [*]HTML5 semantik etiketlerini (header, nav, article, section vs.) zamanla öğrenmeye başlayın.
    [*]Mobil uyumluluğu (responsive yapı) CSS tarafında olsa da, HTML’in yapısı da önemlidir. Doğru yerleştirme = doğru sonuç.]]>         <![CDATA[HTML'e Giriş]]> https://kodlar.tr/konu-html-e-giris.html Sat, 19 Apr 2025 18:49:58 +0000 admin]]> https://kodlar.tr/konu-html-e-giris.html
    Temelden İleriye Sağlam Bir Başlangıç (Yeni Başlayanlara Yönelik)
    Selam yazılımcı tayfa! 
    Front-end tarafına yeni giriş yapan arkadaşlar için HTML üzerine kısa ama temel taşları oturtacak bir içerik hazırlamak istedim. Eğer sıfırdan başlıyorsan ya da "Ben bunu yaparım ama neden yaptığımı tam bilmiyorum" diyorsan, bu yazı tam sana göre. 
     
    HTML Nedir? Ne Değildir?
    HTML = HyperText Markup Language
    Yani bir programlama dili değil, işaretleme dilidir. Tarayıcıya "şu başlık olacak", "şurada paragraf var", "buraya görsel koy", "şu linke git" gibi komutlar veririz. Bu komutlar ise "etiket (tag)" dediğimiz yapılarla yazılır.
    Temel HTML Yapısı (Anatomi)
    html

    KopyalaDüzenle
    Kod:
    <!DOCTYPE html>
    <html lang="tr">
    <head>
      <meta charset="UTF-8">
      <title>İlk Sayfam</title>
    </head>
    <body>
      <h1>Selam Dünya!</h1>
      <p>HTML ile web'e adım attım!</p>
    </body>
    </html>
    ? <!DOCTYPE html> → HTML5 kullandığımızı belirtir.
    ? <html> → Tüm sayfanın kapsayıcısıdır.
    ? <head> → Sayfa hakkında meta bilgiler (başlık, charset, css bağlantısı vs.).
    ? <body> → Asıl kullanıcıya gösterilecek içerik buradadır.]]>
    Temelden İleriye Sağlam Bir Başlangıç (Yeni Başlayanlara Yönelik)
    Selam yazılımcı tayfa! 
    Front-end tarafına yeni giriş yapan arkadaşlar için HTML üzerine kısa ama temel taşları oturtacak bir içerik hazırlamak istedim. Eğer sıfırdan başlıyorsan ya da "Ben bunu yaparım ama neden yaptığımı tam bilmiyorum" diyorsan, bu yazı tam sana göre. 
     
    HTML Nedir? Ne Değildir?
    HTML = HyperText Markup Language
    Yani bir programlama dili değil, işaretleme dilidir. Tarayıcıya "şu başlık olacak", "şurada paragraf var", "buraya görsel koy", "şu linke git" gibi komutlar veririz. Bu komutlar ise "etiket (tag)" dediğimiz yapılarla yazılır.
    Temel HTML Yapısı (Anatomi)
    html

    KopyalaDüzenle
    Kod:
    <!DOCTYPE html>
    <html lang="tr">
    <head>
      <meta charset="UTF-8">
      <title>İlk Sayfam</title>
    </head>
    <body>
      <h1>Selam Dünya!</h1>
      <p>HTML ile web'e adım attım!</p>
    </body>
    </html>
    ? <!DOCTYPE html> → HTML5 kullandığımızı belirtir.
    ? <html> → Tüm sayfanın kapsayıcısıdır.
    ? <head> → Sayfa hakkında meta bilgiler (başlık, charset, css bağlantısı vs.).
    ? <body> → Asıl kullanıcıya gösterilecek içerik buradadır.]]>