◈ Projeler
◈ HTML Öğren
🌐 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. HTML, CSS (stil) ve JavaScript (davranış) ile birlikte çalışarak modern web sayfaları oluşturur.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
</body>
</html>
Her HTML dosyası <!DOCTYPE html> ile başlar. <head> bölümü sayfanın meta bilgilerini, <body> ise görünen içeriği barındırır.
🏷️ Temel Etiketler
Başlıklar (h1–h6)
H1 en büyük ve en önemli başlıktır. SEO açısından sayfada yalnızca bir adet H1 kullanmak tavsiye edilir.
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Daha Küçük</h3>
<h4>Küçük</h4>
<h5>Çok Küçük</h5>
<h6>En Küçük</h6>
Metin Etiketleri
<p>Paragraf metni buraya gelir.</p>
<strong>Kalın (önemli) metin</strong>
<em>İtalik (vurgulu) metin</em>
<u>Altı çizili metin</u>
<s>Üstü çizili metin</s>
<mark>Sarı vurgulu metin</mark>
<small>Küçük metin</small>
<br> ← Satır sonu (kapanmaz)
<hr> ← Yatay ayırıcı çizgi
Alıntı ve Kod
<blockquote>Büyük alıntı bloğu</blockquote>
<code>Kod parçası</code>
<pre> Boşluklar korunur</pre>
<abbr title="HyperText Markup Language">HTML</abbr>
🔗 Bağlantılar ve Görseller
Link (<a>)
<a href="https://google.com">Google'a git</a>
<a href="https://site.com" target="_blank" rel="noopener">Yeni sekmede aç</a>
<a href="#bolum2">Sayfada aşağı git</a> ← anchor link
<a href="mailto:ornek@mail.com">E-posta gönder</a>
<a href="tel:+905001234567">Ara</a>
Görsel (<img>)
<img src="resim.jpg" alt="Açıklama" width="300" height="200">
<img src="https://site.com/img.png" alt="Uzak görsel" style="border-radius:12px">
<!-- alt özelliği: erişilebilirlik için zorunludur -->
📋 Listeler
Sırasız Liste (ul)
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Çilek</li>
</ul>
Sıralı Liste (ol)
<ol type="1"> ← type: 1 A a I i
<li>Birinci adım</li>
<li>İkinci adım</li>
</ol>
İç İçe Liste
<ul>
<li>Meyveler
<ul>
<li>Elma</li>
<li>Muz</li>
</ul>
</li>
</ul>
🎨 CSS ile Stil
CSS (Cascading Style Sheets) HTML elementlerine görsel tasarım ekler. 3 farklı yöntemle kullanılır: Inline, Internal (<style>), External (ayrı .css dosyası).
Internal CSS (<style>)
<style>
body { background: #0a0a0a; color: #ffffff; font-family: sans-serif; }
h1 { color: #00d4ff; text-align: center; font-size: 36px; }
p { background: #111; padding: 12px; border-radius: 8px; }
.kart { border: 1px solid #333; margin: 10px; }
#baslik { font-weight: bold; } ← ID seçici
</style>
Inline CSS
<p style="color:blue; font-size:18px; margin:0">Mavi metin</p>
Önemli CSS Özellikleri
/* Renkler */
color: red; /* metin rengi */
background-color: #fff;
opacity: 0.8; /* şeffaflık 0-1 */
/* Tipografi */
font-size: 16px;
font-weight: bold; /* veya 100-900 */
font-family: 'Arial', sans-serif;
text-align: center; /* left right justify */
line-height: 1.6;
letter-spacing: 2px;
/* Kutu Modeli */
margin: 10px; /* dış boşluk */
padding: 20px; /* iç boşluk */
border: 1px solid #ccc;
border-radius: 12px;
width: 300px;
height: 200px;
max-width: 100%;
📦 Div, Span ve Semantik Etiketler
Div ve Span
div — blok container (tam satır kaplar). span — inline container (metin içinde kullanılır).
<div style="background:#1a1a2e; padding:20px; border-radius:8px">
<h2>Kart Başlığı</h2>
<p>Normal <span style="color:#ff6b6b">kırmızı</span> metin</p>
</div>
Semantik HTML5 Etiketleri
Semantik etiketler sayfanın anlamını hem tarayıcıya hem arama motorlarına açıklar.
<header>Sayfa üst kısmı / logo</header>
<nav>Navigasyon menüsü</nav>
<main>Ana içerik</main>
<section>İçerik bölümü</section>
<article>Bağımsız makale/yazı</article>
<aside>Yan panel / reklam</aside>
<footer>Sayfa alt kısmı</footer>
📝 Formlar
Formlar kullanıcıdan veri almak için kullanılır. action gönderilecek URL, method ise GET/POST belirtir.
Temel Form Elemanları
<form action="/gonder" method="post">
<label for="isim">İsim:</label>
<input type="text" id="isim" name="isim" placeholder="Adınız" required>
<input type="email" placeholder="E-posta">
<input type="password" placeholder="Şifre">
<input type="number" min="0" max="100">
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<input type="checkbox"> Beni hatırla
<input type="radio" name="cinsiyet"> Erkek
<input type="radio" name="cinsiyet"> Kadın
<textarea rows="4" placeholder="Mesajınız..."></textarea>
<select>
<option>Türkiye</option>
<option>ABD</option>
</select>
<button type="submit">Gönder</button>
</form>
📊 Tablolar
<table border="1" style="border-collapse:collapse; width:100%">
<thead>
<tr>
<th style="padding:10px; background:#1a2540">Ad</th>
<th style="padding:10px; background:#1a2540">Yaş</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:8px">Ali</td>
<td style="padding:8px">25</td>
</tr>
<tr>
<td colspan="2">Birleşik hücre</td>
</tr>
</tbody>
</table>
🎬 Medya Etiketleri
Video
<video src="video.mp4" controls autoplay loop muted width="640">
Tarayıcınız video desteklemiyor.
</video>
Ses
<audio src="muzik.mp3" controls></audio>
YouTube Embed
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
width="560" height="315"
allowfullscreen>
</iframe>
📐 Flexbox ile Düzen
Flexbox, elementleri satır veya sütun olarak hizalamak için kullanılır. Modern web layoutlarının temel taşıdır.
<div style="
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* flex-start | flex-end | space-between | space-around */
align-items: center; /* flex-start | flex-end | stretch */
gap: 16px;
flex-wrap: wrap;
">
<div>Kutu 1</div>
<div>Kutu 2</div>
<div style="flex:1">Kalan alanı kaplar</div>
</div>
🔲 Grid ile Düzen
CSS Grid, iki boyutlu (satır + sütun) düzenler oluşturmak için kullanılır.
<div style="
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
grid-template-columns: 200px auto 200px;
gap: 16px;
">
<div>1</div>
<div style="grid-column: span 2">2 sütun kaplar</div>
<div style="grid-row: span 2">2 satır kaplar</div>
</div>
📱 Responsive Tasarım
Responsive tasarım, sayfanın farklı ekran boyutlarına (mobil, tablet, masaüstü) uyum sağlamasını ifade eder.
Viewport Meta Etiketi (Zorunlu!)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Media Query
<style>
/* Tüm ekranlar */
.kart { width: 300px; }
/* Tablet (768px ve altı) */
@media (max-width: 768px) {
.kart { width: 100%; }
}
/* Mobil (480px ve altı) */
@media (max-width: 480px) {
body { font-size: 14px; }
.sidebar { display: none; }
}
</style>
✨ CSS Animasyonlar
Transition (Geçiş)
<style>
.buton {
background: #3b6bff;
transition: all 0.3s ease; /* özellik süre hız */
}
.buton:hover {
background: #00d4ff;
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
</style>
Keyframe Animasyon
<style>
@keyframes yukar-as {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.ziplayan {
animation: yukar-as 1s ease-in-out infinite;
}
</style>
<div class="ziplayan">🚀 Zıplayan element</div>
⚡ JavaScript Temelleri
Temel Yapılar
<script>
// Değişkenler
let isim = "Ali";
const yas = 25; // sabit, değiştirilemez
var eski = "eski yöntem";
// Koşul
if (yas >= 18) {
alert("Reşit");
} else {
alert("Reşit değil");
}
// Döngü
for (let i = 0; i < 5; i++) {
console.log(i);
}
// Fonksiyon
function topla(a, b) {
return a + b;
}
console.log( topla(3, 4) ); // 7
</script>
DOM Manipülasyonu
<script>
// Element seç
const el = document.getElementById("kutu");
const butonlar = document.querySelectorAll(".btn");
// İçerik değiştir
el.innerHTML = "<b>Yeni İçerik</b>";
el.textContent = "Sadece metin";
// Stil değiştir
el.style.color = "red";
el.style.display = "none";
// Class ekle/çıkar
el.classList.add("aktif");
el.classList.remove("gizli");
el.classList.toggle("acik");
// Tıklama olayı
el.addEventListener("click", function() {
alert("Tıklandı!");
});
</script>
💾 localStorage ile Veri Saklama
localStorage, tarayıcıda veri saklamanın en kolay yöntemidir. Sayfa yenilenince bile veriler kaybolmaz.
<script>
// Kaydet
localStorage.setItem("isim", "Ali");
localStorage.setItem("veri", JSON.stringify({yas: 25}));
// Oku
const isim = localStorage.getItem("isim");
const veri = JSON.parse( localStorage.getItem("veri") );
// Sil
localStorage.removeItem("isim");
localStorage.clear(); // hepsini sil
</script>
🎯 Tam Örnek Proje
Tüm öğrendiklerini bir araya getiren gerçek bir web sayfası örneği:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Profilim</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:sans-serif; background:#0d0d1a; color:#fff; }
header { background:#1a1a2e; padding:20px; text-align:center; }
h1 { color:#00d4ff; }
main { max-width:800px; margin:0 auto; padding:24px; }
.kart { background:#111827; border-radius:12px; padding:20px; margin:16px 0; }
.buton { background:#3b6bff; color:#fff; border:none;
padding:10px 24px; border-radius:8px; cursor:pointer;
transition:0.2s; }
.buton:hover { background:#00d4ff; color:#000; }
footer { text-align:center; padding:20px; color:#555; }
</style>
</head>
<body>
<header>
<h1>👤 Profilim</h1>
<p>HtStudio ile yapıldı</p>
</header>
<main>
<div class="kart">
<h2>Hakkımda</h2>
<p id="bio">Merhaba! Ben bir web geliştiricisiyim.</p>
<button class="buton" onclick="degistir()">Değiştir</button>
</div>
<div class="kart">
<h2>Yetenekler</h2>
<ul>
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>Android</li>
</ul>
</div>
</main>
<footer>© 2025 Profilim</footer>
<script>
function degistir() {
document.getElementById("bio").textContent =
"İçerik güncellendi! 🎉";
}
</script>
</body>
</html>
◈ İndir
🛠️ GELİŞTİRME AŞAMASI
Bu ekran hâlâ geliştiriliyor. Çok yakında HtStudio resmi uygulaması sizlerle olacak.
◈ Lisans & Politika
Cookie Policy
Çerez kullanım politikamız
›
Privacy Policy
Gizlilik ve veri koruma
›
Terms of Service
Kullanım koşulları ve lisans
›