Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Html 5 div ve span etiketleri nedir ve hangi amaçlar kullanılır?
Html div etiketi aynen bir paragraf etiketi gibi block etiketidir yani bulunduğu satırı olduğu gibi kaplar.
<p> etiketi ile <div> etiketi arasındaki fark <p> etiketi içine bir paragraf yani bir içerik, bir metin eklerken <div>etiketi içine bir html parçası eklenir. Yani div ile html sayfasındaki elemanları mantıksal olarak gruplarız.
Örneğin başlık kısmını;
menu kısmını
içerik kısmını
footer kısmını
olarak tanımladığımız div etiketi arasına alarak gruplamış oluruz.
<span> etiketi ise bir inline etikettir. Yani span etiketinin kapsamı içindeki elemanın kapsadığı yer kadardır.
Yukarıdaki örnekte kapsayıcı container ismindeki bir div içerisine <h1> etiketi ve 2 tane de aynı amaca hizmet eden bölme yani div eklenmiştir. Her bir service div' i içerisine bir <h2> bir <img> ve bir <p> etiketi eklenmiştir.
Ayrıca <p> etiketi içindeki açıklama yazısının "halı yıkamada" kısmının rengini değiştirmek için span etiketi kullandığıma dikkat ediniz.
<span> bir inline etiket olduğundan dolayı paragraf gene aynı satırda olmaya devam edecek ancak bir bölümü span içerisine alıp o bölüme yazı rengi uyguladım.
** div etiketinin kullanımı css ile iç içe olduğundan dolayı css bölümünde sıklıkla bahsedeceğimiz bir etikettir. Dolayısıyla bu aşamada sadece <div> etiketi nedir ve hangi amaçla kullanılır bunu bilmemiz yeterlidir.
Html div etiketi aynen bir paragraf etiketi gibi block etiketidir yani bulunduğu satırı olduğu gibi kaplar.
<p> etiketi ile <div> etiketi arasındaki fark <p> etiketi içine bir paragraf yani bir içerik, bir metin eklerken <div>etiketi içine bir html parçası eklenir. Yani div ile html sayfasındaki elemanları mantıksal olarak gruplarız.
Örneğin başlık kısmını;
Kod:
<div id="header">
</div>menu kısmını
Kod:
<div id="menu">
</div>içerik kısmını
Kod:
<div id="content">
</div>footer kısmını
Kod:
<div id="footer ">
</div>olarak tanımladığımız div etiketi arasına alarak gruplamış oluruz.
<span> etiketi ise bir inline etikettir. Yani span etiketinin kapsamı içindeki elemanın kapsadığı yer kadardır.
Kod:
<div id="container">
<h1>Halı yıkamada kaliteli hizmet</h1>
<div id="service-1">
<h2>Kaliteli hizmet</h2>
<img src="">
<p>Kocaeli İzmit' de <span style="color:red;">halı yıkamada</span> kaliteli hizmet sunmaktayız.</p>
</div>
<div id="service-2">
<h2>Halınızı evden teslim alalım</h2>
<img src="">
<p>Kocaeli İzmit' de çevresinde halınızı evden teslim alalım.</p>
</div>
</div>Yukarıdaki örnekte kapsayıcı container ismindeki bir div içerisine <h1> etiketi ve 2 tane de aynı amaca hizmet eden bölme yani div eklenmiştir. Her bir service div' i içerisine bir <h2> bir <img> ve bir <p> etiketi eklenmiştir.
Ayrıca <p> etiketi içindeki açıklama yazısının "halı yıkamada" kısmının rengini değiştirmek için span etiketi kullandığıma dikkat ediniz.
<span> bir inline etiket olduğundan dolayı paragraf gene aynı satırda olmaya devam edecek ancak bir bölümü span içerisine alıp o bölüme yazı rengi uyguladım.
Kod:
<span style="color:red;">** div etiketinin kullanımı css ile iç içe olduğundan dolayı css bölümünde sıklıkla bahsedeceğimiz bir etikettir. Dolayısıyla bu aşamada sadece <div> etiketi nedir ve hangi amaçla kullanılır bunu bilmemiz yeterlidir.
