HtStudio

🌐 HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan bir işaretleme dilidir. Tarayıcılar bu kodu okuyarak sayfayı görsel hale getirir.

<!DOCTYPE html>
<html>
  <head>
    <title>Sayfam</title>
  </head>
  <body>
    <h1>Merhaba Dünya!</h1>
  </body>
</html>

🏷️ Temel Etiketler

Başlıklar

H1–H6 arası 6 başlık seviyesi vardır. H1 en büyük, H6 en küçüktür.

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

Metin Etiketleri

<p>Paragraf metni buraya gelir.</p>
<strong>Kalın metin</strong>
<em>İtalik metin</em>
<br>   ← Satır sonu
<hr>   ← Yatay çizgi

🔗 Bağlantılar ve Görseller

Link (a)

<a href="https://google.com">Google'a git</a>
<a href="#" target="_blank">Yeni sekmede aç</a>

Görsel (img)

<img src="resim.jpg" alt="Açıklama" width="300">

📋 Listeler

Sırasız (ul) ve Sıralı (ol)

<ul>
  <li>Elma</li>
  <li>Armut</li>
</ul>

<ol>
  <li>Birinci adım</li>
  <li>İkinci adım</li>
</ol>

🎨 CSS ile Stil

CSS (Cascading Style Sheets) HTML elementlerine görsel tasarım ekler.

<style>
  h1 {
    color: #3b6bff;
    font-size: 32px;
    text-align: center;
  }
  p {
    background: #f0f4ff;
    padding: 12px;
    border-radius: 8px;
  }
</style>

Inline CSS

<p style="color:blue; font-size:18px">Mavi metin</p>

📦 Div ve Span

div — blok container (tam satır kaplar). span — inline container (metin içinde kullanılır).

<div style="background:#e0f2fe; padding:20px; border-radius:8px">
  Bu bir kutu
</div>

<p>Normal <span style="color:red">kırmızı</span> metin</p>

📝 Formlar

<form>
  <label>İsim:</label>
  <input type="text" placeholder="Adınız">
  <input type="email" placeholder="E-posta">
  <input type="password" placeholder="Şifre">
  <button type="submit">Gönder</button>
</form>

⚡ JavaScript Temelleri

<script>
  // Alert kutusu
  alert("Merhaba!");

  // Element içeriğini değiştir
  document.getElementById("id").innerHTML = "Yeni İçerik";

  // Fonksiyon tanımla
  function selamla() {
    alert("Selam!");
  }
</script>

<button onclick="selamla()">Tıkla!</button>

🎯 Tam Örnek Proje

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>İlk Sayfam</title>
  <style>
    body { font-family: sans-serif; background: #0a0a0a; color: #fff; }
    h1   { color: #00d4ff; text-align: center; padding: 20px; }
    .kart { background: #111; padding: 24px; margin: 16px; border-radius: 12px; }
  </style>
</head>
<body>
  <h1>🚀 İlk Sayfam</h1>
  <div class="kart">
    <p>HtStudio ile kodladım!</p>
    <button onclick="alert('Tebrikler! 🎉')">Tıkla</button>
  </div>
</body>
</html>

🛠️ GELİŞTİRME AŞAMASI

Bu ekran hâlâ geliştiriliyor. Çok yakında HtStudio resmi uygulaması sizlerle olacak.

🍪

Cookie Policy

Çerez kullanım politikamız

›

🔒

Gizlilik ve veri koruma

›

📄

Kullanım koşulları ve lisans

›