HTML5 Blok Etiketleri Nelerdir ?

Artık yavaş yavaş klasikleşmiş HTML yapısından çıkıp yeni bir şeyler öğrenmek adına bir üst basamağa geçebiliriz. Bu olay ise HTML blok kullanımı işlemine yavaş yavaş geçtiğimizin göstergesidir. Eğitim serimizin bu 14 üncü yazılı ve videolu içeriğinde ise HTML blok ve HTML satır içi ögeler başlığı ile devam edeceğiz.

Bu bağlamda baktığınızda artık bir çok CSS kodlarını biliyor ve internet sitemizi oluşturacağımız da bazı şeyleri bloklara ve satır içlerine bölebiliriz. Sadece internet sitesinde belirli bir kısmın etkilenmesini istediğimiz kodları blok etiketi sayesinde işimizi halleder iken sadece yazıda ki bir kısmın düzenlenmesi konusunu ise HTML satır içi etiketi işimizi görecektir.

HTML Blok Etiketleri

HTML block etiketleri denildiği zaman akla gelen iki tane etiket vardır. Bunların biri yukarıda da belirtmiş olduğum gibi belirlediğiniz alanda bazı değişiklikleri yapmak için kullanır iken bir diğerini ise yazıda ki bir kısmı değiştirmek için kullanabilirsiniz.

İnternet sitesi oluşturacağımız da güzel bir görünümde elde etmek istiyor isek yapmamız gereken işlem bloklara bölerek düzenlemeler yapmak olacaktır. Bir biri ile alakalı kısımları bir blok olarak nitelendirir isek o kısımda yer alan etiketlere birden hükmetmemiz daha kolay olacaktır. Bunun için HTML blokları kullanmak her zaman bizim işimize gelecek ve internet sitesi oluşturur iken işimize hız katacaktır.

[accordion] [accordion_content title=”HTML Div Etiketi Kullanımı” icon=”” active=”active”]Bu etiketi internet sitenizde bir çok kısmı bir blok içine almak ve kolay düzenlemeler yapabilmenize olanak sağlar. Örnek olarak siz internet sitenizde sayfa içinde birden fazla metin ve paragraf etiketi kullanabilirsiniz. Örneğin bir sayfa içinde belirli bir yere kadar kısmın arka plan rengini değiştirmek, yazı fontunu değiştirmek gibi kısaca diğer bütün işlemleri div etiketi sayesinde gerçekleştirebiliriz. Kullanımı ise :

<div style="background-color:black; color:white;">

<h2>İzmir<h2>

<p>İzmir 'de bugün hava 10 derece.</p>

<h2>İstanbul</h2>

<p>İstanbul 'da bugün hava 5 derece</p>

</div>

şeklinde kullanılır. Body kısmı içinde istediğiniz kısmı div etiketleri içine olarak o kısmı blok altına almış olur ve o kısımların hepsine teker teker sınıf özniteliği yada teker teker CSS kodları eklemek yerine bu kısım için hepsine tek bir şekilde gerekli düzenlemeleri ; etiketi sayesinde yapabiliriz.[/accordion_content][accordion_content title=”HTML Span Etiketi Kullanımı” icon=”” active=”active”]
Birde gerekli bir satır içinde bir yeri düzeltmek, her hangi bir kelimenin rengini değiştirmek, fontunu gibi değiştirmek için ise kullanacağımız satır içi gerekli olan bir etiket bulunmaktadır. Bu etiketi ise span etiketidir. Her hangi bir paragraf, başlık ve metin etiketi içinde ki istenilen kelimede istenilen değişiklikleri yapmak için kullanılan etikettir.

<p>Güzel bir <span style="background-color:red;"kış</span> günüydü</p>

Satır içi istenilen kelimeyi düzenleme etiketi olarak kullanılan span ise yukarıda yer alan kod satırında örnek kullanımı verilmiştir. Span etiketini her hangi bir metin, paragraf, başlık etiketi içinde istediğiniz kelimede istediğiniz değişiklikleri yapabilmek için kullanabilirsiniz.
[/accordion_content] [/accordion]

Yukarıda yer alan şekilde HTML için blok etiketlerini kullanabilirsiniz. Şu anlık sizler için bir şey ifade etmese bile ilerleyen zaman ve ilerleyen ders videolarında ne kadar çok işimize yaradıklarına az çok sizlerde şahit olacaksınız. Şimdi fırsatınız var iken önemli olan ise her şeyi ha bu benim işime gelmez, yaramaz demeden, neyi nerede kullanacağınızı bilerek öğrenmeniz.