HTML Dersleri

<!DOCTYPE html> Etiketi

HTML belgesinin türünü belirtir. Tarayıcıya HTML5 kullanıldığını söyler.

<!DOCTYPE html>
<html>
  <head>
    <title>Başlık</title>
  </head>
  <body>
    <h1>Merhaba Dünya</h1>
  </body>
</html>
  

Canlı Dene

<html> Etiketi

Tüm HTML içeriğini kapsayan kök etikettir.

<html>
  <head></head>
  <body></body>
</html>
  

Canlı Dene

<head> Etiketi

Sayfa başlığı, meta bilgiler, stil ve script dosyaları burada tanımlanır.

<head>
  <title>Sayfa Başlığı</title>
  <meta charset="UTF-8">
</head>
  

Canlı Dene

<body> Etiketi

Kullanıcıya görünen tüm içerikler bu etiketin içinde yer alır.

<body>
  <h1>Hoş Geldiniz</h1>
  <p>Bu bir paragraftır.</p>
</body>
  

Canlı Dene

<title> Etiketi

Tarayıcı sekmesinde görünen sayfa başlığını tanımlar.

<head>
  <title>Recep'in HTML Sayfası</title>
</head>
  

Canlı Dene

<meta> Etiketi

Sayfa hakkında bilgi verir. Genellikle karakter seti ve SEO için kullanılır.

<meta charset="UTF-8">
<meta name="description" content="HTML eğitim sayfası">
  

Canlı Dene

<link> Etiketi

Dış stil dosyalarını bağlamak için kullanılır.

Canlı Dene

<style> Etiketi

Sayfa içine gömülü CSS yazmak için kullanılır.

<style>
  body {
    background-color: #f0f0f0;
  }
</style>
  

Canlı Dene

<script> Etiketi

JavaScript kodlarını sayfaya eklemek için kullanılır.

<script>
  alert("Merhaba Recep!");
</script>
  

Canlı Dene

<h1> - <h6> Etiketleri

Başlık seviyelerini tanımlar. <h1> en büyük, <h6> en küçük başlıktır.

<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Daha Alt Başlık</h3>
  

Canlı Dene

<p> Etiketi

Paragraf tanımlar. Metinleri düzenli bloklar halinde gösterir.

<p>Bu bir örnek paragraftır.</p>

Canlı Dene

<strong> ve <em> Etiketleri

<strong> kalın ve vurgulu metin, <em> italik ve anlam vurgusu için kullanılır.

<p>Bu <strong>önemli</strong> bir metindir.</p>
<p>Bu <em>vurgulu</em> bir ifadedir.</p>
  

Canlı Dene

<mark> Etiketi

Metni fosforlu kalemle işaretlenmiş gibi gösterir.

<p>Bu cümlede <mark>önemli</mark> bir kelime var.</p>

Canlı Dene

<small> Etiketi

Metni daha küçük boyutta gösterir, genellikle dipnotlar için kullanılır.

<p>Bu metin <small>küçük yazı</small> içeriyor.</p>

Canlı Dene

<span> Etiketi

Satır içi stil veya JavaScript işlemleri için kullanılır. Görsel bir etkisi yoktur.

<p>Bu <span style="color:red;">kırmızı</span> kelime dikkat çeker.</p>

Canlı Dene

<br> Etiketi

Satır sonu ekler. Paragraf yerine satır kırmak için kullanılır.

<p>İlk satır<br>İkinci satır</p>

Canlı Dene

<hr> Etiketi

Yatay çizgi ekler. İçerik bölümlerini ayırmak için kullanılır.

<p>Üst içerik</p>
<hr>
<p>Alt içerik</p>
  

Canlı Dene

<ul> ve <li> Etiketleri

Sırasız liste oluşturur. Genellikle madde işaretleriyle gösterilir.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
  

Canlı Dene

<ol> ve <li> Etiketleri

Sıralı liste oluşturur. Numaralandırılmış madde yapısı sunar.

<ol>
  <li>Başlık ekle</li>
  <li>Paragraf yaz</li>
  <li>Görsel ekle</li>
</ol>
  

Canlı Dene

<dl>, <dt> ve <dd> Etiketleri

Tanım listesi oluşturur. Kavram ve açıklama çiftleriyle çalışır.

<dl>
  <dt>HTML</dt>
  <dd>Web sayfası yapısını tanımlar.</dd>
  <dt>CSS</dt>
  <dd>Görsel tasarımı düzenler.</dd>
</dl>
  

Canlı Dene

<table>, <tr>, <th>, <td> Etiketleri

Tablo yapısı oluşturur. Satır ve hücrelerle veri düzenlenir.

<table border="1">
  <tr>
    <th>Ad</th>
    <th>Meslek</th>
  </tr>
  <tr>
    <td>Recep</td>
    <td>Web Geliştirici</td>
  </tr>
</table>
  

Canlı Dene

<a> Etiketi

Bağlantı oluşturur. Diğer sayfalara, bölümlere veya dış sitelere yönlendirir.

<a href="https://example.com">Siteye Git</a>

Canlı Dene

<img> Etiketi

Görsel ekler. src ile dosya yolu, alt ile alternatif metin tanımlanır.

Canlı Dene

<figure> ve <figcaption> Etiketleri

Görsel veya medya öğesine açıklama eklemek için kullanılır.

<figure>
  <img src="grafik.png" alt="Grafik">
  <figcaption>2025 yılı satış grafiği</figcaption>
</figure>
  

Canlı Dene

<audio> Etiketi

Ses dosyası ekler. controls ile oynatma arayüzü gösterilir.

<audio controls>
  <source src="muzik.mp3" type="audio/mpeg">
  Tarayıcınız ses öğesini desteklemiyor.
</audio>
  

Canlı Dene

<video> Etiketi

Video dosyası ekler. controls, width, poster gibi özelliklerle özelleştirilebilir.

<video width="400" controls poster="kapak.jpg">
  <source src="tanitim.mp4" type="video/mp4">
  Tarayıcınız video öğesini desteklemiyor.
</video>
  

Canlı Dene

<form> Etiketi

Form alanlarını kapsayan ana etikettir. action ve method gibi özelliklerle sunucuya veri gönderimi tanımlanır.

<form action="/gonder" method="post">
  <!-- Form elemanları buraya gelir -->
</form>
  

Canlı Dene

<input> Etiketi

Tek satırlık veri girişi sağlar. type özelliğiyle farklı türlerde giriş alınabilir.

<input type="text" placeholder="Adınızı girin">
<input type="email" placeholder="E-posta">
<input type="password" placeholder="Şifre">
  

Canlı Dene

<label> Etiketi

Form elemanlarını tanımlar. Erişilebilirlik ve kullanıcı deneyimi için önemlidir.

<label for="email">E-posta:</label>
<input type="email" id="email" name="email">
  

Canlı Dene

<textarea> Etiketi

Çok satırlı metin girişi sağlar. Genellikle yorum veya açıklama alanlarında kullanılır.

<textarea rows="4" cols="50">Yorumunuzu yazın...</textarea>

Canlı Dene

<select> ve <option> Etiketleri

Açılır liste oluşturur. Kullanıcıya seçenek sunmak için idealdir.

<select name="sehir">
  <option value="izmir">İzmir</option>
  <option value="istanbul">İstanbul</option>
  <option value="ankara">Ankara</option>
</select>
  

Canlı Dene

<button> Etiketi

Form gönderimi veya etkileşim için buton oluşturur.

<button type="submit">Gönder</button>
<button type="reset">Temizle</button>
  

Canlı Dene

<header> Etiketi

Sayfa veya bölüm başlıklarını tanımlar. Genellikle logo, menü ve başlık içerir.

<header>
  <h1>Recep'in Blogu</h1>
  <nav>...menü...</nav>
</header>
  

Canlı Dene

<nav> Etiketi

Gezinme bağlantılarını içerir. Menü yapıları için kullanılır.

<nav>
  <a href="#anasayfa">Ana Sayfa</a>
  <a href="#hakkinda">Hakkında</a>
</nav>
  

Canlı Dene

<main> Etiketi

Sayfanın ana içeriğini tanımlar. Her sayfada yalnızca bir tane olmalıdır.

<main>
  <h2>Makale Başlığı</h2>
  <p>Makale içeriği buraya gelir.</p>
</main>
  

Canlı Dene

<section> Etiketi

İçeriği mantıksal bölümlere ayırır. Genellikle başlık içerir.

<section>
  <h2>Hizmetlerimiz</h2>
  <p>Web geliştirme, eğitim ve danışmanlık...</p>
</section>
  

Canlı Dene

<article> Etiketi

Bağımsız, kendi başına anlamlı içerik bloklarını tanımlar. Blog yazıları, haberler vb. için idealdir.

<article>
  <h2>Yeni Proje Duyurusu</h2>
  <p>Yeni eğitim platformumuz yayında!</p>
</article>
  

Canlı Dene

<aside> Etiketi

Ana içeriğe ek bilgi sağlar. Genellikle yan menü veya öneri kutusu olarak kullanılır.

<aside>
  <p>İlgili makaleler: HTML Formları</p>
</aside>
  

Canlı Dene

<footer> Etiketi

Sayfa veya bölüm sonunu tanımlar. Telif, iletişim ve bağlantılar içerir.

<footer>
  <p>© 2025 Recep Dijital. Tüm hakları saklıdır.</p>
</footer>
  

Canlı Dene

<iframe> Etiketi

Başka bir web sayfasını mevcut sayfaya gömmek için kullanılır.

Canlı Dene

<embed> Etiketi

PDF, video, ses gibi medya dosyalarını sayfaya gömmek için kullanılır.

Canlı Dene

<object> Etiketi

Gömülü içerik veya uygulama yüklemek için kullanılır. Alternatif içerik tanımlanabilir.

<object data="dosya.pdf" type="application/pdf" width="500" height="400">
  PDF görüntülenemiyor.
</object>
  

Canlı Dene

<script> Etiketi

JavaScript kodlarını sayfaya eklemek için kullanılır. Etkileşim ve dinamik yapı sağlar.

<script>
  alert("Merhaba Recep!");
</script>
  

Canlı Dene

<noscript> Etiketi

Tarayıcı JavaScript desteklemiyorsa gösterilecek alternatif içeriktir.

<noscript>
  Tarayıcınız JavaScript desteklemiyor.
</noscript>
  

Canlı Dene

Geolocation API

Kullanıcının konum bilgisine erişmek için kullanılır. JavaScript ile birlikte çalışır.

<script>
  navigator.geolocation.getCurrentPosition(function(pos) {
    alert("Konum: " + pos.coords.latitude + ", " + pos.coords.longitude);
  });
</script>
  

Canlı Dene

Local Storage

Tarayıcıda veri saklamak için kullanılır. Sayfa yenilense bile veri kalıcıdır.

<script>
  localStorage.setItem("kullanici", "Recep");
  alert(localStorage.getItem("kullanici"));
</script>
  

Canlı Dene

<canvas> Etiketi

Grafik, çizim ve oyun gibi görsel içerikler oluşturmak için kullanılır.

<canvas id="cizim" width="200" height="100"></canvas>
<script>
  const c = document.getElementById("cizim");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 150, 75);
</script>
  

Canlı Dene

<progress> ve <meter> Etiketleri

İlerleme ve ölçüm göstergeleri için kullanılır.

<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>
  

Canlı Dene

HTML Dersleri

<!DOCTYPE html> Etiketi

<html> Etiketi

<head> Etiketi

<body> Etiketi

<title> Etiketi

<meta> Etiketi

<link> Etiketi

<style> Etiketi

<script> Etiketi

<h1> - <h6> Etiketleri

<p> Etiketi

<strong> ve <em> Etiketleri

<mark> Etiketi

<small> Etiketi

<span> Etiketi

<br> Etiketi

<hr> Etiketi

<ul> ve <li> Etiketleri

<ol> ve <li> Etiketleri

<dl>, <dt> ve <dd> Etiketleri

<table>, <tr>, <th>, <td> Etiketleri

<a> Etiketi

<img> Etiketi

<figure> ve <figcaption> Etiketleri

<audio> Etiketi

<video> Etiketi

<form> Etiketi

<input> Etiketi

<label> Etiketi

<textarea> Etiketi

<select> ve <option> Etiketleri

<button> Etiketi

<header> Etiketi

<nav> Etiketi

<main> Etiketi

<section> Etiketi

<article> Etiketi

<aside> Etiketi

<footer> Etiketi

<iframe> Etiketi

<embed> Etiketi

<object> Etiketi

<script> Etiketi

<noscript> Etiketi

Geolocation API

Local Storage

<canvas> Etiketi

<progress> ve <meter> Etiketleri

Canlı Kod Deneme Alanı