Embedded Files
Ana kuruluşumuz:
HTML, hiper metin modelleme dili anlamına gelir, yani web sayfaları HTML kullanılarak düzenlenmiştir. HTML, CSS ve JavaScript ile beraber çalıştığında büyük verim alınır.
🧩 1. HTML’nin Temel İskeleti
🧩 1. HTML’nin Temel İskeleti
Her HTML sayfasında bulunması gereken temel yapı:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Benim İlk Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>
Açıklama:
<!DOCTYPE html> → Tarayıcıya bunun bir HTML5 sayfası olduğunu söyler.
<html lang="tr"> → Sayfanın dilinin Türkçe olduğunu belirtir.
<head> → Sayfanın başlık, charset, meta vb. ayarlarının bulunduğu bölüm.
<meta charset="UTF-8"> → Türkçe karakterlerin düzgün çıkması için önemli.
<title> → Tarayıcı sekmesinde görünen başlık.
<body> → Kullanıcının ekranda gördüğü her şey bu etiketin içinde.
🔡 2. Başlıklar (Heading Etiketleri)
🔡 2. Başlıklar (Heading Etiketleri)
HTML’de 6 seviye başlık var: h1–h6.
<h1>En büyük başlık</h1>
<h2>Bir alt başlık</h2>
<h3>Daha küçük başlık</h3>
<h4>h4 başlığı</h4>
<h5>h5 başlığı</h5>
<h6>En küçük başlık</h6>
Açıklama:
h1 → Sayfanın ana başlığı (SEO için önemli).
h2, h3… → Alt başlıklar, içerik hiyerarşisini gösterir.
Sayfada genelde tek tane h1 kullanmak iyi bir pratiktir.
📄 3. Paragraflar ve Metin Biçimlendirme
📄 3. Paragraflar ve Metin Biçimlendirme
<p>Bu bir paragraf metnidir.</p>
<p>Bu da başka bir <strong>kalın</strong> ve <em>eğik</em> metin içerir.</p>
<p>Bu metnin içinde <span style="color: red;">kırmızı bir kelime</span> var.</p>
Açıklama:
<p> → Paragraf etiketi.
<strong> → Anlam olarak vurgulu, görüntüde kalın (bold).
<em> → Anlam olarak vurgulu, görüntüde eğik (italic).
<span> → Satır içi (inline) küçük alanları biçimlendirmek için kullanılır.
🔗 4. Linkler (Bağlantılar)
🔗 4. Linkler (Bağlantılar)
<a href="https://www.google.com">Google'a git</a>
<br>
<a href="sayfa2.html" target="_blank">Yeni sekmede aç</a>
Açıklama:
<a> → Anchor (link) etiketi.
href → Gidilecek adres (URL veya başka bir sayfa).
target="_blank" → Linki yeni sekmede açar.
mailto:, tel: gibi özel kullanımlar da vardır:
href="mailto:ornek@mail.com"
href="tel:+905551112233"
🖼️ 5. Resimler (Images)
🖼️ 5. Resimler (Images)
<img src="kedi.jpg" alt="Şirin bir kedi" width="300">
Açıklama:
<img> → Resim gösterir (kapanış etiketi yoktur).
src → Resmin yolu veya URL’si.
alt → Resim yüklenmezse yerine yazı gösterilir, erişilebilirlik için önemli.
width / height → Piksel cinsinden boyut; CSS ile kontrol etmek daha iyidir ama başlangıç için kullanılabilir.
📋 6. Listeler (Sıralı / Sırasız)
📋 6. Listeler (Sıralı / Sırasız)
Sırasız Liste (madde işaretli)
Sırasız Liste (madde işaretli)
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Muz</li>
</ul>
Sıralı Liste (numaralı)
Sıralı Liste (numaralı)
<ol>
<li>Adım 1</li>
<li>Adım 2</li>
<li>Adım 3</li>
</ol>
Açıklama:
<ul> → Unordered list (sırasız liste, noktalarla).
<ol> → Ordered list (sıralı liste, sayılarla).
<li> → List item (liste elemanı).
📊 7. Tablolar (Tables)
📊 7. Tablolar (Tables)
<table border="1">
<tr>
<th>Ad</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ayşe</td>
<td>12</td>
</tr>
<tr>
<td>Mehmet</td>
<td>14</td>
</tr>
</table>
Açıklama:
<table> → Tablo.
<tr> → Table row (satır).
<th> → Table header (başlık hücresi, kalın ve ortalı).
<td> → Table data (normal hücre).
border="1" → Basit çerçeve; modern projelerde CSS ile stil vermek tercih edilir.
📨 8. Formlar (Form, Input, Button)
📨 8. Formlar (Form, Input, Button)
<form action="/gonder" method="post">
<label for="ad">Adınız:</label>
<input type="text" id="ad" name="ad">
<br><br>
<label for="sifre">Şifre:</label>
<input type="password" id="sifre" name="sifre">
<br><br>
<label>
<input type="checkbox" name="sozlesme"> Şartları kabul ediyorum
</label>
<br><br>
<button type="submit">Gönder</button>
</form>
Açıklama:
<form> → Kullanıcıdan bilgi almak için form.
action → Verilerin gönderileceği adres.
method → get veya post.
<input> → Giriş elemanı (text, password, checkbox, radio, etc.).
<label> → Input’a açıklama ekler, erişilebilirliği artırır.
<button> → Tıklanabilir buton.
📦 9. Div ve Span
📦 9. Div ve Span
<div style="background-color: #f0f0f0; padding: 10px;">
<h2>Bu bir kutu</h2>
<p>Bu kutunun içinde bir <span style="color: blue;">mavi kelime</span> var.</p>
</div>
Açıklama:
<div> → Blok seviye (block-level) kapsayıcı. Sayfayı bölümlere ayırmak için kullanılır.
<span> → Satır içi (inline) kapsayıcı. Küçük metin parçalarını hedefler.
Genellikle CSS ile birlikte kullanılır.
🧱 10. Semantik Etiketler (HTML5)
🧱 10. Semantik Etiketler (HTML5)
Daha anlamlı yapı için HTML5 ile gelen etiketler:
<header>
<h1>Site Başlığı</h1>
</header>
<nav>
<a href="#">Ana Sayfa</a> |
<a href="#">Hakkında</a> |
<a href="#">İletişim</a>
</nav>
<main>
<section>
<h2>Bir Bölüm</h2>
<p>Bu bölümün içeriği.</p>
</section>
<article>
<h2>Bir Makale</h2>
<p>Makale içeriği...</p>
</article>
</main>
<footer>
<p>Tüm hakları saklıdır © 2025</p>
</footer>
Açıklama:
<header> → Sayfa veya bölümün üst kısmı, logo/başlık menü olabilir.
<nav> → Menü, gezinme linkleri.
<main> → Sayfanın asıl içeriği.
<section> → Bölümler, konusal gruplar.
<article> → Bağımsız içerik (blog yazısı, haber vs.).
<footer> → Alt kısım (iletişim, telif vb.).
🎨 11. Basit Bir HTML + CSS Örneği
🎨 11. Basit Bir HTML + CSS Örneği
Aşağıdaki örneği .html dosyası yapıp tarayıcıda açabilirsin:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Mini HTML Wiki Örneği</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1, h2 {
color: #2c3e50;
}
code {
background-color: #f4f4f4;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Mini HTML Wikime Hoş Geldin</h1>
<p>Bu sayfada temel <code>HTML</code> etiketlerinin bazı örneklerini görüyorsun.</p>
<h2>Başlık Örneği</h2>
<p>Bu bir paragraf. Aşağıda bir liste var:</p>
<ul>
<li>HTML iskeleti</li>
<li>Başlıklar</li>
<li>Paragraflar</li>
</ul>
<h2>Link Örneği</h2>
<p><a href="https://www.wikipedia.org" target="_blank">Wikipedia'ya git</a></p>
</body>
</html>
Google Sites
Report abuse