SPAN NASIL KULLANILIR? NEREDE KULLANILIR?

Editör 29.06.2017 02:38 Html
SPAN NASIL KULLANILIR? NEREDE KULLANILIR?

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:

01 <div style="background:#f5b57f">
02  
03    Div gidebildiği yere kadar gider
04  
05 </div>
06  
07 <span style="background:#9aec9a">
08  
09    Span metin alanı kadar gider
10  
11 </span>

Ç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 vurgulugözükmesini istiyoruz; Bunun için span etiketlere style özellik atayalım.

HTML:

01 <html>
02 <head>
03 </head>
04  <style type="text/css">
05   
06   span.vurgu{
07             color: red;
08             background-color: yellow;
09             }
10  
11 </style>
12  
13 <body>
14  
15 <p>Ne oldum <span class="vurgu">dememeli,</span>
16  
17 ne olacağım <span class="vurgu">demeli.</span></p
18  
19 </body>
20  
21 </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.

 

KAYNAK: http://www.webcebir.com/130-html-div-ve-span-nedir-dersi.html

Bunlarada Bakabilirsiniz