Web geliştirme dünyasına adım atanlar için HTML temel yapı taşıdır. Bu rehber, HTML’in en yaygın kullanılan etiketlerini, açıklamalarını ve nasıl kullanıldıklarını içerir. HTML’in gücünü keşfetmek ve web sayfaları oluştururken pratik yapmak için bu bilgileri kullanabilirsiniz.
1. Temel HTML Yapısı
Her HTML belgesi belirli bir yapıya sahiptir. Aşağıdaki kod, HTML dokümanlarında bulunması gereken temel öğeleri içerir.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sayfa Başlığı</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu, ilk HTML sayfanızdır.</p>
</body>
</html>2. Başlık Etiketleri (Headings)
HTML’de başlıklar <h1> ile <h6> arasında değişir. <h1> en büyük başlıktır, <h6> ise en küçük başlıktır.
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>Doğru başlık hiyerarşisi kullanıldığında, sayfanın düzeni belirginleşir. Ayrıca, arama motorları içeriğin yapısını daha iyi analiz eder.
3. Paragraflar ve Metin Biçimlendirme
HTML’de metinler <p> etiketi ile paragraflara ayrılır. Aşağıdaki etiketler, metin biçimlendirmede yaygın olarak kullanılır:
<p>Bu bir paragraftır.</p>
<strong>Bu metin kalın yazılmıştır.</strong>
<em>Bu metin italik yazılmıştır.</em>
<u>Bu metin altı çizili yazılmıştır.</u>Biçimlendirme, içeriğin daha okunabilir olmasını sağlar. Okuyucular, vurgulanan bölümleri daha kolay fark eder.
4. Bağlantılar (Links)
Bağlantılar, kullanıcıları başka bir sayfaya yönlendirir.
<a href="https://www.example.com">Ziyaret Et</a>Bağlantılar, sayfanın daha kullanışlı olmasını sağlar. Eğer bağlantının yeni bir sekmede açılması isteniyorsa şu kod kullanılır:
<a href="https://www.example.com" target="_blank">Yeni Sekmede Aç</a>5. Görseller (Images)
Bir web sayfasına görsel eklemek için <img> etiketi kullanılır.
<img src="resim.jpg" alt="Açıklama" width="200" height="150">Görseller, içeriğin daha ilgi çekici hale gelmesine yardımcı olur. alt etiketi, SEO açısından önemli olduğu gibi, görselin yüklenmediği durumlarda açıklama sağlar.
6. Listeler (Lists)
HTML’de liste kullanımı, içeriğin düzenlenmesini kolaylaştırır.
Sıralı Liste:
<ol>
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ol>Sırasız Liste:
<ul>
<li>Öğe A</li>
<li>Öğe B</li>
<li>Öğe C</li>
</ul>7. Tablolar (Tables)
Tablolar, verileri düzenli bir şekilde göstermek için kullanılır.
<table border="1">
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
<tr>
<td>Veri 1</td>
<td>Veri 2</td>
</tr>
</table>border özelliği tablonun çerçevesini belirler. Daha gelişmiş stil için CSS kullanılmalıdır.
8. Formlar (Forms)
Kullanıcılardan veri almak için HTML formları kullanılır.
<form action="submit.php" method="post">
<label for="name">Adınız:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Gönder">
</form>Formlar, etkileşimli öğeler oluşturarak kullanıcı deneyimini iyileştirir.
9. Div ve Span Kullanımı
div ve span etiketleri, sayfa düzenlemesinde büyük kolaylık sağlar.
<div style="background-color:lightgray; padding:10px;">
<p>Bu bir div içinde.</p>
</div>
<span style="color:red;">Bu bir span etiketi.</span><div> blok elemanı olarak geniş alanları kapsarken, <span> satır içi düzenlemelerde kullanılır.
10. HTML5 Yeni Etiketler
HTML5, sayfanın yapısını daha anlaşılır hale getiren semantik etiketler sunar.
<header>Başlık Alanı</header>
<nav>Menü Alanı</nav>
<section>İçerik Bölümü</section>
<article>Makale İçeriği</article>
<aside>Yan Bilgi</aside>
<footer>Alt Bilgi</footer>Bu etiketler, sayfanın farklı bölümlerini tanımlayarak SEO açısından avantaj sağlar.
Sonuç
Bu HTML cheat sheet, HTML’in temel öğelerini öğrenmek isteyenler için kapsamlı bir rehber sunar. HTML öğrenmek, web geliştirme sürecinde ilk adımdır. Daha gelişmiş web siteleri oluşturmak için CSS ve JavaScript bilgisi de edinmek gerekir.
Etiketler: #HTML #WebGeliştirme #Kodlama #HTML5 #Programlama #SEO
