HTML DİV ve SPAN NEDİR?

Div etiketi bir HTML belgesi içinde bir bölüm belirtmek için kullanılır. Div html içinde verileri sağa, sola, yukarı veya aşağıya CSS yardımı ile hizalamaya yarar. Kısacası div'leri birer kutu olarak düşünebiliriz. Metinler, Resimler ve videolar div içinde yerleştirilebilir. Div tablolara benzer ama onları CSS ile Şekillendirilebilir. website tasarımında tablo kullanımında div'in avantajları ve kolaylıkları vardır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

DIV ve SPAN elemanları anlamsız etiketlerdir; Yani "p" veya "h1" gibi diğer etiketlerin aksine, onlar ile ilgili herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir. CSS ile Sahip oldukları tüm özellikler genellikle "sınıf" ve "id" nitelikleri ile, geliştirici tarafından kendilerine tahsis edilmelidir.

DIV etiketi blok düzeyi unsurudur. Her Div etiketi açılıp kapandığında bir alt satıra geçer. Div'leri tek olarak veya iç içe girmiş bir yapı olarakta kullanabiliriz.

SİTE YAPISI


DIV etiketi de yaygın sayfa düzeninde kullanılır. CSS kullanarak, bir DIV elemanı site içerisinde heryere konumladırabilir ve içine istediğimiz herhangi bir unsur yerleştirebilirsiniz.

Örnek site yapısı:


div ve span tag

header :Sitenin başlık ve açıklama içeriğini yer alır. Sadece başlığınız olacaksa altı seviyeli başlıklardan (h1-h6) birini kullanmanız yeterli.

nav : Menüleri, Gezinti (navigation) alanını temsil eder. Gezinti bağlantıları ya da içerik listesi için kullanılabilir.

section : Genel bölümleme öğesidir. İç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 : Ana içerikten ayrı yazılan, yüzeysel bir bağlantısı olan içeriğe denir.

footer : Altalanı temsil eder. Bu bir sayfanın, bir bölümün ya da bir yazının altalanı olabilir.

Site yapısının html kodların gösterimi:

HTML:







Site yapımızın html kodları yukardaki gibi olacaktır; ancak bu halde bir anlam ifade etmez bunu CSS ile şekillendirmemiz gerekir.

SPAN ETİKETİ


HTML SPAN etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar. SPAN, DIV etiketinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni keserek bir alt satıra geçmez.

SPAN elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir.

Div'ler websayfada ekranın sonuna kadar yani gidebildiği yere kadar gider. span ise sadece metnin kapladığı alanı kapsar. Bir örnekle açıklayalım.

HTML:


Div gidebildiği yere kadar gider
Span metin alanı kadar gider

ÇIKTI:

html div-span nedir

Span etiketleri genellikle metin biçimlendirmek için kullanılan ve bir sayfanın düzenini etkilemez. Örneğin website sayfamızda bazı kelimelerin vurgulu gözükmesini istiyoruz; Bunun için span etiketlere style özellik atayalım.

HTML:


<html>
<head>
</head>
 <style type="text/css">
 
  span.vurgu{
            color: red;
		    background-color: yellow;
            }

</style>

<body>

Ne oldum dememeli, ne olacağım demeli.

</body> </html>

ÇIKTI:

html div-span nedir

Sonuç:

Hem DIV etiketi ve SPAN etiketi CSS ve websayfa tasarımında çok önemli bir role sahiptir. Bu kodlar websayfa düzeninde kullanır ve sayfanın belli bölümlerinde özellik atanır. Bu HTML kodlarına Class(sınıf) ve Tekil(id) CSS seçicileri ile birlikte kullanılır. DIV etiketi web düzenin de kullanılır. SPAN etiketi esas metin ile kullanıldığında ise, Tabloların yerini alır. Bu iki etiketin nasıl çalıştığını anlamak ve websayfa tasarımında CSS kullanmada önemli yer teşkil eder.

Şefik Selli 27/03/2018

Kardeşim harika bir anlatım ellerine sağlık.

Bilal 27/03/2018

Anlatımın cok güzel, yanında örneklerle daha da güzel ve akılda kalıcı, çok çok teşekkür ederim. Kayan yazı vs. için gelmiştim siteye, Şuan baştan aşağı okuyorum siteyi.

Elnur Əliyev 27/03/2018

Faydali məlumat idi. teşekkür edirəm.

Bahar 27/03/2018

Harika gerçekten ellerine sağlık okuduğum bölüm bu ama birçok kişiden güzel bir anlatımınız var :) çok teşekkür ederim.

Pars 02/04/2018

Merhaba eline sağlık Çok güzel anlatmışsın kardeşim. İki kutu arasına nasıl bir boşluk birakabilirim.

yönetici 03/04/2018

css margin konusuna bakınız.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5868

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.