Bir önceki dersimizde form oluşturma konusunu işlemiştik. Bugunkü dersimize div etiketi nedir, span nedir nasıl kullanılır? sorularını anlatmaya çalışacağız.
İçindekiler
Div Etiketi Nedir?
Div kelimesi ingilizcedeki division kelimesinin kısaltması olarak kullanılır. Dilimizde”bölünme” anlamına gelir. Kısacası sayfamızı bölümlere ayırırken kullanılır. Div etiketini kullandığımız zaman tarayıcı ekranındaki görüntüsünde bir değişiklik olmaz. Div etiketini kullanmadaki amacımız diğer HTML kod parçalarını belirli gruplara ayırarak kod düzenini sağlamak. Div etiketini kullanarak CSS kullanımını kolaylaştırabiliriz.CSS serisini burdan takip edebilirsiniz.
Div etiketlerine CSS ile belirli bir genişlik vermediğimiz sürece div’in genişliği tüm sayfayı kaplayacaktır. Yükseklik değerinide aynı şekilde CSS ile verebiliriz. Belirli bir yükseklik vermezsek div’in yüksekliği, içerik yüksekliği kadar olacaktır. Kısaca div etiketi nedir sorusuna yanıt verdik. Şimdi nasıl kullanıldığını inceleyelim. Örneğin;
<div style="border: 1px solid red;">Deneme yazısı</div>
<br>
<div style="border: 1px solid red;">
</div>
Örneğimizde iki tane div kullandık ilk divin içine deneme yazısı yazdık ve belli bir yükseklik ve genişlik vermedik. Yüksekliği içerikten aldı, genişliği ise tüm sayfayı kapladı. İkinci örnekte ise içerik, belirli yükseklik ve genişlik vermedik. Tarayıcı ekranında düz doğru oluşturdu.
<html>
<head>
<title> Web Odası </title>
</head>
<style>
div{
border: 1px solid red;
width: 150px;
height: 200px;
}
</style>
<body>
<div style="border: 1px solid red;">Deneme yazısı</div>
</body>
</html>
Bu örnekte ise CSS ile belirli yükseklik ve genişlik verdik. CSS ile daha farklı şekilde biçimlendirebilirsiniz.
Örneğin bir site tasarladığımızı düşünelim. Sayfamız menü, content, footer alanlarından oluşsun. Çok basit bir şekilde şu kodlarımızın olduğunu varsayalım.
<html>
<head>
<title> Web Odası </title>
<style>
#menu{list-style-type: none;}
#menu li{float: left;width: 150px;}
#menu a{text-decoration: none;}
</style>
</head>
<body>
<!--Menü-->
<ul id="menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
<!--Content-->
<br>
<p>İçerik için yazmak istediğimiz yazı</p>
<img src="resim.jpg">
<!--Footer-->
<p>Tüm haklar saklıdır</p>
</body>
</html>Gördüğünüz gibi div etiketini kullanmadan da site tasarlayabiliyoruz. Ama div etiketini kullanarak kodlarımızın daha düzenli olmasını ve CSS kullanımını kolaylaştırabiliriz. Şimdi de aynı kodları div etiketini kullanarak yazalım.
<html>
<head>
<title> Web Odası </title>
<style>
#menu{list-style-type: none;}
#menu li{float: left;width: 150px;}
#menu a{text-decoration: none;}
</style>
</head>
<body>
<!--Menü-->
<div id="menu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<!--Content-->
<div id="content">
<p>İçerik için yazmak istediğimiz yazı</p>
<img src="resim.jpg">
</div>
<!--Footer-->
<div id="footer">
<p>Tüm haklar saklıdır</p>
</div>
</body>
</html>Vermiş olduğumuz iki örneğin tarayıcıdaki görüntüsü aynı olacaktır. Bu şekilde kullanım HTML5’ten önce kullanılıyordu. Html5 ile birlikte menü, içerik, footer vb.. kısımlar için div etiketi kullanmak yerine anlamsal etiketleri kullanmaya başladık.
Anlamsal Etiketler
HTML4’te anlamsal yetersilik söz konusuydu. Tasarımcılar bu sorunu class ve id kullanarak çözmeye çalışıyorlar fakat iş karmaşıklaşmaya başlayınca HTML5’te anlamsal elementler (semantic elements) kullanmaya başlamışlar. Basit bir blog sayfasının yapısı aşagıdaki gibidir.
HTML5 gelmeden önceki yapı;
div elementini kullanıp ona sınıflar vererek yapıyı bu şekilde oluşturabiliriz. Ancak gördüğünüz gibi HTML4’de bölümleri anlamsallaştırmak için çokça yazı yazmak gerekiyor. HTML5’te ise bu bölümler için bazı elementler tanımlanmış. Örneğin bir bölümü tanımlamak için section, başlık alanını tanımlamak için header, makaleyi tanımlamak için article, altalanı tanımlamak için footer… Aşağıdaki örnek ise HTML5 sonrasına ait bir yapı.
- <header>, başlık alanını temsil eder.
- <nav>, navigasyon alanını temsil eder.
- <footer>, altalanı temsil eder. Bir sayfanın, bölümün ya da bir yazının altalanı olabilir.
- <section>, genel bölümleme öğesidir. Bu, içinde başlığı ve altalanı olan bir makale olabilir.
- <article>, bir makale ya da yazı alanını temsil eder. Bu bir blog yazısı, yorum alanı, haber v.b. olabilir.
- <aside>,Sayfanın yan tarafını belirtir. Sayfanın ya sağındadır ya da solundadır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, arama kutusu, anketler, sabit bağlantılar ve reklam alanı yer alır.
- <figure>, Sitemizde yer alan görsellerin bu etiket içinde yer alması tavsiye ediliyor.
- <figcaption>, görsellerin <figure> elementi içinde yer alması öneriliyor demiştik. <figcaption> elementi ile bu resmin açıklamalarını yazamak için kullanılır.
- <mark>, cümle içindeki bir kelimeyi ya da sözcük öbeğini fosforlu kalemle çizilmiş gibi önplâna çıkartmak isteyebiliriz. Bunun için <mark> etiketini kullanabiliriz.
Span Nedir? Nasıl Kullanılır?
Span etiketi isteğe bağlı verilerin gösterilmesini yapısal ve görsel yapı oluşturulmasını sağlar. Span etiketi herhangi bir görsel özelliğie sahip olmadığı için CSS ile özelliklerin belirtilmesi gerekiyor. Ve şöyle bir şey var. Div etiketine belirli bir genişlik vermediğimiz sürece sayfanın tamamını kaplıyordu. Span etiketi ise içeriğin genişliği kadar alan kaplar örneğin;
<div style="background: pink;">Deneme yazısı</div>
<br>
<span style="background: pink;">Deneme yazısı</span>
<br>
<p>Bu yazının <span style="color: blueviolet;">rengini</span> değiştirdik</p>
Span etiketi genellikle metin biçimlendirmede kullanıldığı için sayfa düzeninde değişiklik yapmaz. Yukarıdaki örnekte verdiğim gibi yazının vurgulu olarak görüntülenmesini istiyorsak span etiketini kullanırız.
Bugunkü bloğumuzda div etiketi nedir, span etiketi nedir nasıl kullanılır sorularını yanıtlamaya çalıştık. Dilerseniz linkteki videodan konu tekrarı yapabilirsiniz.