Stil Sayfaları (CSS) 15 - Tipografi Yapısı
4.4.3.4. Tipografi Yapısı
Bootstrap Framework’ün tipografiyi etkileyen sınıfları ve özel elemanları bulunmaktadır. Varsayılan
olarak yazı boyutları 16 piksel, yazı tipi “Helvatica veya Arial”, satır genişliği 1.5em olarak
ayarlanmıştır.
<small> Elemanı: HTML başlık elemanları içinde kullanılır. Başlığa göre daha açık yazı renginde
ve yazı boyutu başlıktan daha küçük olacak şekilde metin biçimlendirmesi yapar.
<blockquote> Elemanı: Farklı kaynaklardan alıntı yapılan metinleri biçimlendirir.
<dl> Elemanı: HTML <ul> etiketi gibi liste oluşturmak için kullanılır. Fakat <dl> elemanı içine
başlık elemanı için <dt> ve başlığın içeriği için <dd> elemanları kullanılır.
<kbd> Elemanı: Metin içerisinde dikkat çekilmek istenilen içerik <kbd> elamanı biçimlendirilebilir.
<pre> Elemanı: HTML kodları arasına yazılan metinler kod yazımı esnasında belli bir düzenle alt
alta da yazılsa kodlar çalıştığında satıra sığana kadar metinler yan yana görüntülenecektir. <pre>
elamanı içine yazılan tüm metinler, kodlama esnasındaki düzenleri ile görüntülenir.
Uygulama
Bootstrap Framework’e özel tipografi elemanlarını kullanarak metin biçimlendirme
işlemlerini yönergeler doğrultusunda gerçekleştiriniz.
1. Adım: HTML sayfası oluşturunuz ve Bootstrap Framework bağlantı kodlarını ekleyiniz.
2. Adım: <body> elemanı içine ekranı tüm çözünürlüklerde tek parçaya ayıracak
aşağıdaki kodları ekleyiniz.
<div class="container">
<div class="row bg-light">
<div class="col-12">
<!-- Kodlarınız -->
</div>
</div>
</div>
3. Adım: Aşağıdaki numaralandırılmış kodları sırasıyla Adım 2’de bulunan <!-- Kodlarınız
--> ifadesi yerine yazınız ve web sitesini çalıştırınız.
1.<h3>Büyük Başlık <small> Küçük Başlık</small></h3>
2.<blockquote class="blockquote">
<p>HTML bir web sitesinin vücudunu oluşturur.CSS ise o vücudun üzerindeki elbiseleri,
aksesuarları ve makyajı oluşturur.</p>
<footer class="blockquote-footer">11.Sınıf Web Tabanlı Uygulama Geliştirme Kitabı</
footer>
</blockquote>
3.<dl>
<dt>HTML, CSS</dt>
<dd>-Ön Uç(Frontend) dillerdir.</dd>
<dt>ASP, PHP</dt>
<dd>-Arka Uç(Backend) dillerdir</dd>
</dl>
4.<p>Yazdığınız kodları sık sık <kbd>ctrl + s</kbd> ile kaydetmelisiniz.</p>
5.<pre> Bu etiket kullanmadan yazılan
metin içerikleri satır sonuna kadar
yan yana yazılır.</pre>
Hiç yorum yok