1. HTML Nedir?
HTML (Hypertext Markup Language):
- Web sayfalarının yapısal bileşenlerini tanımlayan bir işaretleme dilidir.
- Metin, bağlantılar, resimler ve diğer medya öğelerini organize etmek ve göstermek için kullanılır.
2. HTML Temel Yapısı
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Sayfa Başlığı</title>
</head>
<body>
<!-- Sayfa İçeriği Buraya Gelecek -->
</body>
</html>
<!DOCTYPE html>: HTML5 belgesi kullanılacağını belirtir.<html lang="en">: Belgenin dilini belirtir.<head>: Başlık, meta etiketleri ve stil bağlantıları gibi belge başlığı ile ilgili bilgileri içerir.<body>: Web sayfasının görünen içeriğini içerir.
3. Temel HTML Etiketleri
Metin Etiketleri:
<p>Paragraf</p>
<h1>Başlık 1</h1>
<strong>Kalın Metin</strong>
<em>İtalik Metin</em>
Bağlantı Etiketi:
<a href="https://www.mehmetkuruk.com" target="_blank">Örnek Bağlantı</a>
Resim Etiketi:
<img src="resim.jpg" alt="Açıklama">
4. Liste Oluşturma
Sıralı Liste:
<ol>
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
</ol>
Sırasız Liste:
<ul>
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
</ul>
5. Form Elemanları
<form action="/submit" method="post">
<label for="ad">Ad:</label>
<input type="text" id="ad" name="ad" required>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Gönder">
</form>
6. CSS Bağlantısı
<head>
<link rel="stylesheet" href="stil.css">
</head>
Harici CSS dosyasını bağlamak için <link> etiketi kullanılır.
7. Örnek Bir HTML Sayfası
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mehmet Kuruk</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<header>
<h1>Hoş Geldiniz!</h1>
<p>Bu sayfa Mehmet Kuruk tarafından hazırlanmış örnek bir sayfadır.</p>
</header>
<nav>
<ul>
<li><a href="#anasayfa">Anasayfa</a></li>
<li><a href="#hakkimizda">Hakkımızda</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
<section>
<article>
<h2>İlk Yazı Başlığı</h2>
<p>Bu birinci yazı içeriğidir.</p>
</article>
<article>
<h2>İkinci Yazı Başlığı</h2>
<p>Bu ikinci yazı içeriğidir.</p>
</article>
</section>
<footer>
<p>© 2024 Web Tasarım Dersi</p>
</footer>
</body>
</html>
Bu ders notları, HTML'yi anlamak ve temel web sayfalarını oluşturmak isteyenler için bir başlangıç noktasıdır. İlerleyen aşamalarda CSS ve JavaScript gibi diğer web teknolojileriyle entegrasyonu keşfetmek için bu temel bilgileri kullanabilirsiniz.
Yorumlar (0)
Henüz hiç yorum yapılmamış.
Aşağıdaki formu doldurarak ilk yorumu sen yap.