- Katılım
- 6 Kas 2021
- Mesajlar
- 3,276
- Tepkime puanı
- 4,783
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
Yeni Başlayanlar İçin HTML: Temel Kullanım ve Örnekler
HTML (HyperText Markup Language), web sayfalarının yapı taşını oluşturan temel dildir. Bu rehberde, HTML'in temellerini öğrenmek isteyenler için detaylı açıklamalar ve örnek kodlar sunacağım.HTML Nedir?
HTML, web sayfalarının yapısını tanımlayan bir işaretleme dilidir. Tarayıcılar (Chrome, Firefox, Edge gibi) HTML kodlarını yorumlayarak görsel web sayfalarına dönüştürür.Temel HTML Belge Yapısı
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>Açıklamalar:
- <!DOCTYPE html>: Belgenin HTML5 standardında olduğunu belirtir
- <html>: Tüm HTML içeriğinin kök elementidir
- <head>: Sayfa hakkında meta bilgileri içerir (tarayıcıya yönelik)
- <body>: Sayfada görüntülenecek tüm içeriği kapsar
- <h1>: Başlık etiketi (heading)
- <p>: Paragraf etiketi (paragraph)
Temel HTML Etiketleri ve Kullanımları
1. Başlık Etiketleri (Headings)
HTML'de 6 seviye başlık bulunur:
HTML:
<h1>Ana Başlık (En Büyük)</h1>
<h2>Alt Başlık</h2>
<h3>3. Seviye Başlık</h3>
<h4>4. Seviye Başlık</h4>
<h5>5. Seviye Başlık</h5>
<h6>En Küçük Başlık</h6>Önemli Not: SEO için bir sayfada genellikle tek bir <h1> etiketi kullanılmalıdır.
2. Metin Biçimlendirme
HTML:
<p>Bu normal bir paragraf.</p>
<p><b>Kalın metin</b> - <strong>Önemli metin (semantik)</strong></p>
<p><i>İtalik metin</i> - <em>Vurgulu metin (semantik)</em></p>
<p><u>Altı çizili</u> - <s>Üstü çizili</s></p>
<p>X<sup>2</sup> - H<sub>2</sub>O</p>
<p><mark>Vurgulanmış metin</mark></p>
<p><small>Küçük metin</small></p>3. Linkler (Anchor)
HTML:
<!-- Temel link -->
<a href="https://www.example.com">Example Sitesi</a>
<!-- Yeni sekmede açılan link -->
<a href="https://www.example.com" target="_blank">Yeni Sekmede Aç</a>
<!-- Sayfa içi link (anchor) -->
<a href="#bolum2">Bölüm 2'ye Git</a>
...
<h2 id="bolum2">Bölüm 2</h2>
<!-- E-posta linki -->
<a href="mailto:info@example.com">Bize Yazın</a>
<!-- Telefon linki -->
<a href="tel:+905551234567">Bizi Arayın</a>4. Resim Ekleme
HTML:
<img src="resim.jpg" alt="Açıklayıcı metin" width="400" height="300">Özellikler:
- src: Resim dosyasının yolu
- alt: Resim gösterilemediğinde görünecek alternatif metin (SEO için önemli)
- width/height: Resim boyutları (CSS ile boyutlandırma daha iyi bir yöntemdir)
5. Listeler
Sıralı Liste (Ordered List):
HTML:
<ol>
<li>İlk madde</li>
<li>İkinci madde</li>
<li>Üçüncü madde</li>
</ol>
HTML:
<ul>
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
</ul>
HTML:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>6. Tablolar
HTML:
<table border="1">
<caption>Öğrenci Listesi</caption>
<thead>
<tr>
<th>No</th>
<th>Ad</th>
<th>Soyad</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmet</td>
<td>Yılmaz</td>
</tr>
<tr>
<td>2</td>
<td>Ayşe</td>
<td>Demir</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Toplam 2 öğrenci</td>
</tr>
</tfoot>
</table>Not: Günümüzde tablolar yalnızca gerçek veri tabloları için kullanılmalıdır. Sayfa düzeni için CSS kullanılmalıdır.
7. Formlar
HTML:
<form action="/kayit" method="POST">
<fieldset>
<legend>Kişisel Bilgiler</legend>
<label for="ad">Adınız:</label>
<input type="text" id="ad" name="ad" required><br><br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="sifre">Şifre:</label>
<input type="password" id="sifre" name="sifre" minlength="6" required><br><br>
<label for="dogum">Doğum Tarihi:</label>
<input type="date" id="dogum" name="dogum"><br><br>
<label for="cinsiyet">Cinsiyet:</label>
<select id="cinsiyet" name="cinsiyet">
<option value="erkek">Erkek</option>
<option value="kadin">Kadın</option>
<option value="diger">Diğer</option>
</select><br><br>
<label>Hobiler:</label><br>
<input type="checkbox" id="spor" name="hobi" value="spor">
<label for="spor">Spor</label><br>
<input type="checkbox" id="muzik" name="hobi" value="muzik">
<label for="muzik">Müzik</label><br>
<input type="checkbox" id="gezi" name="hobi" value="gezi">
<label for="gezi">Gezi</label><br><br>
<label>Abonelik:</label>
<input type="radio" id="abonelik_evet" name="abonelik" value="evet" checked>
<label for="abonelik_evet">Evet</label>
<input type="radio" id="abonelik_hayir" name="abonelik" value="hayir">
<label for="abonelik_hayir">Hayır</label><br><br>
<label for="mesaj">Mesajınız:</label><br>
<textarea id="mesaj" name="mesaj" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Gönder">
<input type="reset" value="Temizle">
</fieldset>
</form>8. Medya Elemanları
Video:
HTML:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tarayıcınız video etiketini desteklemiyor.
</video>Ses:
HTML:
<audio controls>
<source src="ses.mp3" type="audio/mpeg">
Tarayıcınız audio etiketini desteklemiyor.
</audio>9. Div ve Span
HTML:
<div style="background-color: lightblue; padding: 20px;">
<h2>Bu bir bölüm</h2>
<p>Div etiketi <span style="color: red;">blok seviyesinde</span> bir elementtir.</p>
</div>- <div>: Blok seviyesinde element (yeni satırda başlar)
- <span>: Satır içi element (içeriğiyle aynı satırda kalır)
HTML5 Semantik Etiketleri
Modern HTML'de anlamsal (semantic) etiketler kullanılmalıdır:
HTML:
<header>
<h1>Site Başlığı</h1>
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Makale Başlığı</h2>
<p>Makale içeriği...</p>
</article>
<aside>
<h3>Yan Menü</h3>
<p>İlgili içerikler...</p>
</aside>
</main>
<footer>
<p>© 2023 Site Adı. Tüm hakları saklıdır.</p>
</footer>- SEO dostu
- Erişilebilirlik artırır
- Kod okunabilirliğini iyileştirir
- Tarayıcılar ve arama motorları için anlamlı yapı sağlar
HTML Örnek Projeler
1. Kişisel Profil Sayfası
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kişisel Profil</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; }
header { text-align: center; margin-bottom: 30px; }
img { border-radius: 50%; width: 150px; height: 150px; object-fit: cover; }
section { margin-bottom: 30px; }
h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 5px; }
ul { list-style-type: square; }
</style>
</head>
<body>
<header>
<img src="profil.jpg" alt="Profil Resmi">
<h1>Ahmet Yılmaz</h1>
<p>Web Geliştirici | İstanbul</p>
</header>
<section>
<h2>Hakkımda</h2>
<p>Merhaba! Ben Ahmet. 5 yıldır web geliştirme alanında çalışıyorum. Frontend teknolojileri üzerine uzmanlaştım ve kullanıcı dostu arayüzler tasarlıyorum.</p>
</section>
<section>
<h2>Beceriler</h2>
<ul>
<li>HTML5, CSS3, JavaScript</li>
<li>React, Vue.js</li>
<li>Node.js, Express</li>
<li>Git, GitHub</li>
</ul>
</section>
<section>
<h2>İletişim</h2>
<p>Email: <a href="mailto:ahmet@example.com">ahmet@example.com</a></p>
<p>Website: <a href="https://www.ahmetyilmaz.com" target="_blank">www.ahmetyilmaz.com</a></p>
</section>
</body>
</html>2. Basit Blog Sayfası
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basit Blog</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; max-width: 900px; margin: 0 auto; padding: 20px; }
header { background: #2c3e50; color: white; padding: 20px; text-align: center; margin-bottom: 30px; }
nav { background: #34495e; padding: 10px; }
nav a { color: white; margin: 0 15px; text-decoration: none; }
article { margin-bottom: 40px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
footer { text-align: center; margin-top: 30px; padding: 20px; background: #ecf0f1; }
</style>
</head>
<body>
<header>
<h1>Basit Blog</h1>
<p>Teknoloji, Yazılım ve Tasarım</p>
</header>
<nav>
<a href="#">Ana Sayfa</a>
<a href="#">Kategoriler</a>
<a href="#">Hakkımda</a>
<a href="#">İletişim</a>
</nav>
<main>
<article>
<h2>HTML Öğrenmeye Başlamak</h2>
<p><small>Yayınlanma Tarihi: 15 Haziran 2023</small></p>
<p>HTML, web geliştirmenin temel taşıdır. Bu yazıda HTML öğrenmeye nasıl başlayacağınızı anlatıyoruz...</p>
<a href="#">Devamını Oku</a>
</article>
<article>
<h2>CSS ile Stil Vermek</h2>
<p><small>Yayınlanma Tarihi: 10 Haziran 2023</small></p>
<p>CSS, HTML elementlerine stil vermek için kullanılır. Bu yazıda temel CSS özelliklerini öğreneceksiniz...</p>
<a href="#">Devamını Oku</a>
</article>
</main>
<footer>
<p>© 2023 Basit Blog. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>HTML Öğrenirken Dikkat Edilmesi Gerekenler
- Doğru Etiket Kullanımı: Her element için doğru HTML etiketini kullanın (örneğin, buton için <button>, metin girişi için <input>)
- Semantik Yapı: <div> yerine <header>, <nav>, <article> gibi semantik etiketleri tercih edin
- Erişilebilirlik: alt özelliği gibi erişilebilirlik özelliklerini ihmal etmeyin
- Geçerli HTML: Kodlarınızın W3C Validator ile uyumlu olduğundan emin olun
- Responsive Tasarım: Viewport meta etiketini unutmayın
- SEO İpuçları: Başlık hiyerarşisine (h1-h6) dikkat edin ve semantik etiketler kullanın
Sonraki Adımlar
HTML öğrendikten sonra:- CSS ile sayfalarınızı stilize edin
- JavaScript ile etkileşim ekleyin
- Responsive Tasarım tekniklerini öğrenin
- Frontend Framework'ler (React, Vue, Angular) keşfedin
- Backend Dilleri (PHP, Node.js, Python) ile dinamik sayfalar oluşturun
