Anasayfa / Web Tasarım / HTML / HTML Block ve Inline Elementleri

HTML Block ve Inline Elementleri

Block: Block(blok) değeri alan bir eleman, bulunduğu satırı kaplar ve kendinden gelen sonraki elemanı yeni bir satırda başlatır.

Inline: Inline(satır) değeri alan elemanlar ise bir alt satıra geçmeyerek aynı satırda sıralanır.

Block elementler daha çok paragraflar gibi bölüm olan yapıları elde etmek için kullanılır. Inline elementler de bu paragraflar içerisindeki yazılar olarak düşünebilirsiniz.

HTML elementlerinin varsayılan değerleri değiştirebilir. Block düzeyindeki bir elemanı display: inline; ile satır özelliğindeki bir elemana, inline düzeyindeki bir elemanı da display: block; ile blok düzeyindeki bir elemana çevirebilirsiniz.

 

  • HTML’deki Block Düzeyindeki Öğeler :

<div>   <fieldset>   <form>   <h1>–<h6>   <hr>   <li>   <ol>   <p>

<section>   <table>   <ul>   <video>   <address>   <article>   <aside>

<blockquote>   <canvas>   <dd>   <dl>   <dt>   <figcaption>   <figure>

<footer>   <header>   <main>   <nav>   <noscript>   <output>   <pre>   <tfoot>

 

Daha iyi anlaşılabilmesi için örnek amaçlı ufak bir uygulamaya göz atalım:

HTML Kodlarımız:

 

Ekran Çıktısı :

  • HTML’deki Inline Düzeyindeki Öğeler :

<a>   <b>   <br>   <button>   <i>   <img>   <input>

<label>   <script>   <select>   <span>   <textarea>   <abbr>

<acronym>   <bdo>   <big>   <cite>   <code>   <dfn>   <em>

<kbd>   <map>   <object>   <q>   <samp>   <small>

<strong>   <sub>   <sup>   <time>   <tt>   <var>

 

Örnek uygulamamız ;

HTML Kodlarımız:

 

Ekran Çıktısı:

<span> Öğesi ,

<span> öğesi aslında kullanımı bazı durumlarda gerekli ve kullanışlı bir HTML etiketidir. <span> öğesine “style”, “id”, “class” gibi özellikler verebiliriz. Sadece arasına aldığı metni/yazıyı ve ya bir kelimeyi/harfi etkiler.

Bir örnek verecek olursak;

HTML Kodlarımız:

 

Ekran Çıktısı:

About aysehatun

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: