Bu yazımızda Html’de en sık kullandığımız etiketlerden olan div ve span etiketlerinden bahsedeceğim. Div nedir? Div kullanarak sayfa tasarımı nasıl olmalı? Div ile site yapımı nasıl olmalı? Span nedir? Span kullanımı nasıl olmalı? gibi sorularımıza cevap bulacağız.
HTML DİV NEDİR? HTML DİV KULLANIMI NASIL OLMALI?
Sayfa tasarımlarımızı yaparken belki de en fazla kullandığımız Html etiketi div’dir. Peki div nedir? Html div etiketi neden kullanılır?
Div etiketi, Html sayfasındaki diğer etiketleri kapsayan ve HTML sayfasını belli bölümlere ayıran bir etikettir.
Html div etiketinin özel bir anlamı yoktur. Div etiketini kullandığımızda sayfamızın tarayıcıdaki görüntüsünde herhangi bir değişiklik olmaz. Div etiketini kullanırken asıl amacımız diğer Html kod parçalarını belirli gruplara ayırarak kod düzenini sağlamaktır. Aynı zamanda bu şekilde yapılan bir kodlama, Css kullanımında da bize fayda sağlayacaktır. Çünkü div içerisine aldığımız tüm Html etiketlerine toplu bir şekilde Css kodu uygulayabilir ve yönetimi kolaylaştırabiliriz.
⇒ Bildiğiniz gibi bazı Html etiketleri bulundukları satırı tamamen kaplarken (block) bazıları da satır içi (inline) yer kaplarlar. Html div etiketi, block bir etikettir. Yani bulunduğu satırı tamamen kaplar.
⇒ Div etiketinin bir diğer kullanım amacı da, sayfamızdaki kodları anlamsal olarak gruplamaktır.
Örneğin bir web sayfası tasarladığımızı düşünelim. Sayfamız menü, içerik ve footer kısımlarından oluşsun. Çok basit olarak şu şekilde kodlarımız olduğunu varsayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Html Div ve Span Nedir?</title> </head> <body> <!--Menu--> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımda</a></li> <li><a href="#">İletişim</a></li> </ul> <!--Content--> <p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</p> <img src="Url" alt="Resim Bilgisi" /> <!--Footer--> <p>Tüm Hakları Saklıdır.</p> </body> </html> |
Gördüğünüz gibi bu şekilde de sayfalarımızı oluşturabiliriz. Ama bu alanları div etiketi ile gruplayarak oluşturursak hem daha düzenli bir kod yapısı oluşmuş olur hem de bu alanlara Css kodu yazarken yönetimi kolaylaştırmış oluruz.
Şimdi her alanı yani menü, içerik ve footer kısımlarının her birini kapsayıcı bir div içerisine alalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Html Div ve Span Nedir?</title> </head> <body> <!--Menu--> <div id="menu"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımda</a></li> <li><a href="#">İletişim</a></li> </ul> </div> <!--Content--> <div id="content"> <p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</p> <img src="Url" alt="Resim Bilgisi" /> </div> <!--Footer--> <div id="footer"> <p>Tüm Hakları Saklıdır.</p> </div> </body> </html> |
Yukarda da bahsettiğimiz gibi, oluşturduğumuz 2 sayfada tarayıcıda aynı görüntülenecektir.
Div etiketinin kullanım mantığı bu şekilde. Yalnız bu kullanım şeklini Html5’ten önce kullanıyorduk. Html5 ile birlikte menü, içerik, footer vb.. kısımlar için div etiketi kullanmak yerine anlamsal etiketleri kullanmaya başladık.
Peki bu anlamsal etiketler nelerdir bir de onlara bakalım. Html5 ile gelen anlamsal etiketler şunlardır;
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Anlamsal etiketleri kullanmamız arama motorları açısından da çok önemlidir. Arama motorları sitemizi indexlemeye geldiğinde bu etiketleri görünce neyle ilgili olduğunu anlayacak ve buda sitemize seo açısından olumlu katkı sağlayacaktır.
Yukarda vermiş olduğumuz örneği şimdi de anlamsal etiketleri kullanarak yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>Html Div ve Span Nedir?</title> </head> <body> <!--Menu--> <nav> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımda</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> <!--Content--> <main> <p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</p> <img src="Url" alt="Resim Bilgisi" /> </main> <!--Footer--> <footer> <p>Tüm Hakları Saklıdır.</p> </footer> </body> </html> |
Gördüğünüz gibi,
- <div id=”menu”> </div> yerine <nav> </nav>
- <div id=”content”> </div> yerine <main> </main>
- <div id=”footer”> </div> yerine <footer> </footer>
kullandık.
Sanırım Div nedir? Div kullanarak sayfa tasarımı konuları anlaşılmıştır. Artık Span nedir? ve Span kullanımı nasıl olmalı? konularına geçelim.
SPAN NEDİR? SPAN KULLANIMI NASIL OLMALI?
Div etiketi block özelliğe sahip olduğu için içerisine genelde Html kod parçalarını yerleştiriyoruz. Span etiketi ise inline özelliğe sahiptir.
⇒ Span etiketi kullandığımızda da tıpkı div etiketi gibi sayfanın tarayıcıdaki görüntüsünde herhangi bir değişiklik olmaz. Span etiketini genelde inline (satır içi) öğelere Css kodu uygulamak için kullanıyoruz.
Örneğin p etiketi ile şöyle bir paragraf tanımlayalım.
|
1 2 3 |
<p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit.</p> |
Burda ki paragrafın içerisinden bir kısmına farklı bir Css kodu yazmak istediğimizi varsayalım.
Eğer p etiketine Css kodlarını uygularsak tüm paragrafa uygulanmış olacak.
Paragraf içerisinden bir kısmını seçip, bu seçilen kısma Css kodu yazmak için span etiketini kullanabiliriz. Span etiketi inline özelliğe sahip olduğu için herhangi bir satır atlama durumu vs.. de oluşmayacaktır.
Örneğin paragrafın bir kısmını span etiketi içerisine alalım ve bu kısmın yazı rengini kırmızı yapalım.
|
1 2 3 |
<p>Tincidunt integer <span style="color:red;"> eu augue augue nunc elit dolor</span> , luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit.</p> |
Gördüğünüz gibi sadece span etiketi ile seçtiğimiz kısmın rengini kırmızı yapmış olduk.
Evet, span kullanımı da bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
