Html ile Web İşlemleri 19 - Yerleşim Elemanları
HTML etiketlerinin etiket türüne bağlı olarak varsayılan iki tip görüntüleme değeri vardır. Bunlar, blok düzeyinde etiketler ve satır içi etiketlerdir.
Blok Düzeyinde Etiketler
Blok düzeyinde etiketler, her zaman yeni bir satırdan başlar. Blok etiketler, mevcut tam genişliği kaplar. Blok düzeyinde etiketlerin bir alt ve bir üst bir kenarı vardır. Blok etiketler, kapama etiketleri ile kullanılır. <div> etiketi blok düzeyinde bir etikettir.
Satır İçi Etiketler
Satır içi etiketler yeni bir satırdan başlamaz, yalnızca gerektiği kadar genişlik kaplar. Satır içi etiketlerin blok düzeyi etiketlerinde olan alt ve üst kenar bulunmaz. <span> etiketi, satır içi etikettir.
1. <div> Etiketi
<div> etiketi, yerleşim elemanı olarak kullanılan ve diğer HTML etiketlerini içine alabilen bir kutu olarak kullanılır. <div> etiketi ile style, class, id özellikleri kullanılır. Bu özellikleri kullanmak zorunlu değildir. <div> HTML belgesindeki verilerin konumlarını (yukarı, aşağı, sağa ve sola) CSS yardımı ile hizalar. CSS ile kullanıldığında <div> etiketi, içerik bloklarına stil uygulamak için kullanılır. Metinler, resimler ve videolar div içine yerleştirilir. <div> etiketi tablolara benzerlik gösterir fakat tablolar katı, esnek olmayan ve ızgara şeklindedir. <div> etiketleri (Görsel 3.24) ile oluşturulan CSS tabanlı tasarımlar ise daha esnek, akışkan ve genişletilebilir yapıdadır.
Uygulama
HTML5 belge şablonunu <div> etiketini kullanarak yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <div> etiketinin class özelliğini kullanarak header, nav, section, aside ve footer özelliğine sahip div bloklarını oluşturunuz.
3. Adım: <div> etiketinin class özelliği section olan div bloku içine sırasıyla header2, article, ve footer2 özelliğine sahip div bloklarını oluşturunuz.
<head>
<title>DIV ile HTML Şablonu</title>
</head>
<body>
<div class="header"> </div>
<div class="nav"> </div>
<div class="section">
<div class="header2"> </div>
<div class="article"> </div>
<div class="footer2"> </div>
</div>
<div class="aside"> </div>
<div class="footer"></div>
</body>
</html>
Sıra Sizde
<div> etiketini kullanarak farklı renklerde div blokları oluşturunuz.
<h2>div etiketim</h2>
<p>div etiketi bloku tarafından sarılmış ve stil uygulanmış bir paragraf</p>
</div>
 |
| Görsel 3.24: <div> etiketi |
2. <span> Etiketi
<span> etiketi, metin veya HTML belgesinin bir bölümünü işaretlemek için kullanılan satır içi kapsayıcıdır. Yapısal ve görsel olarak bir katman oluşturur. <span> etiketi ile style, class, id özellikleri kullanılır. Bu özellikleri kullanmak zorunlu değildir. CSS ile kullanıldığında <span> etiketi paragraf metinlerine stil uygulamak için kullanılır. <span> etiketi, <div> etiketinden farklı olarak satır içi eleman olduğundan paragraf içinde kullanıldığında ilgili paragrafı keserek alt satıra geçmez (Görsel 3.25).
yeşil renk ve kalın font stil uygulandı</span> paragrafın devamı <span style="color:blue;
font-weight:bold;"> bu metne span etiketi kullanılarak mavi renk ve kalın font stil uygulandı
</span>paragrafın sonu</p>
 |
| Görsel 3.25: <span> etiketi |
Sıra Sizde
Görsel 3.24’te kullanılan HTML belgesinde <div> etiketi yerine <span> yazarak, Görsel 3.25’te kullanılan HTML belgesinde <span> etiketi yerine de <div> yazarak farklı HMTL belgesi olarak kaydediniz. HTML belgelerindeki değişiklikleri gözlemleyiniz.
Hiç yorum yok