Partial HTML
Yeniden kullanılabilir HTML parçaları tasarlamayı öğrenirsin.
Partial nedir?
Partial, bir sayfada birden çok kez kullanılan küçük, bağımsız HTML parçasıdır. Bir kart, bir menü öğesi ya da bir yorum kutusu partial olabilir. Amaç aynı kodu kopyalayıp yapıştırmak yerine, tek bir kaynaktan üretip her yerde kullanmaktır.
Örneğin bir blogda her yazı kartı aynı yapıdadır: görsel, başlık, özet ve bir bağlantı. Bu kartı bir kez partial olarak yazarsan, onu ana sayfada, kategoride ve yazar sayfasında tekrar tekrar kullanırsın. Değişiklik gerektiğinde tek yeri düzeltirsin.
Partial nasıl yazılır?
Bir partial yazarken onu çevreleyen sayfanın değil, kendi işinin merkezinde düşünürsün. İçeriği anlamsal etiketlerle kurar, dışarıya uyumlu bir kök etiketle (örneğin <article> ya da <li>) sunarsın. Böylece partial, listelerin, ana akışın ya da ızgaraların içine sorunsuz yerleşir.
Partial'ı bağımsız kılmak da önemlidir: dışarıdaki bir id'ye ya da sınıfa bağlı kalmasın. İçeride bağlantılar ve metinler partial'a özgü olmalı. Böylece partial'ı başka bir sayfaya taşıdığında bozulmaz.
Partial'ları birleştirmek
Partial'lar tek başına durmaz; bir sayfa iskeletinde yan yana gelirler. Örneğin bir ana sayfa, bir <header> partial'ı, birkaç yazı kartı partial'ı ve bir <footer> partial'ından oluşur. Her partial kendi kök etiketine sahiptir ve ana yapıya bu kökten bağlanır.
Birleştirme sırasında partial'lar arasında tutarlılık da önemlidir: tüm kartlar aynı <article> kök yapısını, aynı başlık hiyerarşisini ve aynı bağlantı desenini izlemeli. Böylece sayfa hem göze hem koda düzenli gelir.
Uygulama Bir yazı kartı partial yaz
Body içine bir yazı kartı partial yaz: bir <article> kök etiketi, içinde dolu bir <h3> (başlık), dolu bir <p> (özet) ve href özniteliği dolu bir <a> (devamı bağlantısı). Dışarıdaki bir id'ye bağımlı olmasın; tüm bağlantılar article içinde kalsın.
Örnek çözümü göster
<body>
<article>
<h3>Bahçe için Sekiz Bitki</h3>
<p>Balkonunda yetiştirebileceğin sekiz dayanıklı bitkiyi tanıtalım.</p>
<a href="/yazilar/bahce-bitkileri">Devamını oku</a>
</article>
</body>Kendini test et
-
Partial tanımını tamamla
<p>Partial, bir sayfada ____ kullanılan küçük HTML parçasıdır.</p>Cevabı göster
<p>Partial, bir sayfada tekrar tekrar kullanılan küçük HTML parçasıdır.</p> -
Bir partial'ı iyi yapan aşağıdakilerden hangisidir?
- Kendi içinde bağımsız olması
- Dışarıdaki bir id'ye bağımlı olması
- Yalnızca bir sayfada kullanılması
- Yalnızca CSS içermesi
Cevabı göster
Kendi içinde bağımsız olması — Doğru. İyi partial kendi içinde bağımsızdır, dış bağım olmadan çalışır.
-
Bileşeni partial olup olmamasına göre eşleştir
- Yazı kartı
- Tekrar eden kart
- Menü öğesi
- Liste içinde kullanılır
- Yorum kutusu
- Birden çok kez gelir
- Tekil ana başlık
- Bir kez geçer