Proje Detayları
Bu projede, üç farklı CSS dahil etme yöntemini kullanarak bir web sayfası oluşturacaksınız. Bu alıştırma, her yöntemin nasıl uygulandığını ve aralarındaki farkları anlamanıza yardımcı olacaktır.
Proje Adımları:
- Temel bir HTML sayfası oluşturun (başlık, paragraflar, listeler ve bir resim içeren)
- Sayfanın başlığını inline CSS kullanarak stilleyin (renk, boyut, hizalama)
- Paragrafları internal CSS kullanarak stilleyin (yazı tipi, satır aralığı, kenar boşlukları)
- Bir external CSS dosyası oluşturun ve sayfaya bağlayın
- External CSS dosyasında liste öğeleri ve resim için stiller tanımlayın
- Sayfanın genel düzenini (arkaplan, kenar boşlukları) external CSS ile ayarlayın
- Her üç yöntemin de aynı sayfada nasıl çalıştığını gözlemleyin
Başlangıç Kodu:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dahil Etme Yöntemleri</title>
<!-- Internal CSS buraya gelecek -->
<!-- External CSS bağlantısı buraya gelecek -->
</head>
<body>
<!-- Inline CSS ile başlık -->
<h1>CSS Dahil Etme Yöntemleri</h1>
<!-- Internal CSS ile paragraflar -->
<p>Bu paragraf, internal CSS kullanılarak stillendirilecektir.</p>
<p>Bu da başka bir paragraf örneğidir.</p>
<!-- External CSS ile liste -->
<h2>CSS'in Avantajları</h2>
<ul>
<li>İçerik ve sunum ayrımı sağlar</li>
<li>Kod tekrarını önler</li>
<li>Bakımı kolaylaştırır</li>
<li>Tutarlı tasarım sağlar</li>
</ul>
<!-- External CSS ile resim -->
<img src="https://via.placeholder.com/300x200" alt="Örnek Resim">
</body>
</html>Bu HTML dosyasını ve boş bir styles.css dosyasını oluşturun, ardından yukarıdaki adımlara göre CSS kodlarını ekleyin.