HTML Bloğu ve Satır İçi Öğeler

HAZIRLAYAN: MELİH CAN AYDIN

HTML, web sayfalarının yapı taşları olarak işlev gören çeşitli öğelerden oluşur. Bu elemanların her biri iki kategoriden birine girer: blok düzeyindeki öğeler veya satır içi öğeler.

Blok Düzeyindeki Öğeler (BLOCK)

Blok düzeyinde bir öğe her zaman yeni bir satırda başlar ve tarayıcılar otomatik olarak öğenin önüne ve arkasına bir miktar boşluk (kenar boşluğu) ekler.
Blok düzeyinde bir öğe her zaman mevcut olan tüm genişliği kaplar (olabildiğince sola ve sağa doğru uzanır).

Html’deki blok düzeyindeki öğeler

<div> HTML elemanları için bir kap olarak kullanılır.</div>

<form> Kullanıcı girişi için bir HTML formu oluşturmak için kullanılır.</form>

<h1> HTML başlıklarını tanımlamak için kullanılır.</h1>

Yaygın olarak kullanılan iki blok öğesi şunlardır: <p> ve <div>

<p> Ögesi

<p> ögesi, bir HTML belgesindeki bir paragrafı tanımlar.

<div> Ögesi

Genellikle diğer HTML öğelerini kapsayıcı olarak kullanılan blok düzeyi bir öğedir.
Kullanımı çok fazladır.
HTML öğelerini bir kutu içerisine almak gibi düşünebilirsiniz.
Bazı CSS stilleriyle birlikte kullanıldığında <div> öğesi içerik bloklarını biçimlendirmek için kullanılabilir.

Not: <p> etiketi ile <div> etiketi arasındaki fark <p> etiketi içine bir paragraf yani bir içerik, bir metin eklerken <div> etiketi içine bir html parçası eklenir. Yani div ile html sayfasındaki elemanları mantıksal olarak gruplarız.

Burada div içerisine paragrafları aldık. <div> ve <p> etiketlerine ise style özelliğini kullanarak süsledik.

<html>

<body>

<h1>Bilgisayar Oyununun Kodlama Öğrenimine Olan Etkisi: Öğrenciler üzerindeki etkisi</h1>

<p style="background- color:yellow;color:black;padding:30px;">Mersin Ü.</p>

<p>1958 yılında Willy Higinbotham tarafından masa tenisi tarzında bir oyunla (tennis for two) hayata geçirilmiştir.

</p>

<p>(Yağız 2007, s.4) Dediği gibi Oyunlar kişilerin öğrenmek istedikleri konuyu uygulayarak daha kalıcı hale getirebilirler.

</p>

</div>

</body>

</html>

Satır İçi Öğeler (INLINE)

Satır içi elemanları ise normal olarak satırda bir atlama yapmadan aynı satır içerisinde görüntülenir.
Satır içi bir öğe yalnızca gerektiği kadar genişlik kaplar.

HTML'deki satır içi öğeler:

<a> Bir sayfadan diğerine bağlanmak için kullanılan köprüyü tanımlar. </a>

<span> Metin için bir kap olarak kullanılır.</span>

<img> HTML belgeleriniz için görüntü(resim) tanımlar. </img>

Not: Satır içi bir öğe, blok düzeyinde bir öğe içeremez!

Yaygın olarak kullanılan satır içi öğesi şudur: <span>

<span> Ögesi

bir metnin veya bir belgenin bir bölümünü işaretlemek için kullanılan satır içi bir kapsayıcıdır.
Gerekli öznitelikleri yoktur, ancak style, class ve id ortaktır.
CSS ile birlikte kullanıldığında, <span> metnin bazı bölümlerine stil vermek için kullanılabilir.

Burada bir başlık ekledik ve bunun içerisinde Çok Önemli !! kelimesinin renginin farklı olmasını istiyoruz.

<html>

<body>

<h1>Bilgisayar Oyununun Kodlama Öğrenimine Olan Etkisi: Öğrenciler üzerindeki etkisi

<span style="color:red">Çok Önemli !!</span>

Makaledir

</h1>

</body>

</html>

HTML Div ve Span Arasındaki Fark Nedir?

HTML div ve span etiketleri hem CSS hem de web sayfa tasarımında önemli bir role sahiptir. Bu kodlar, web sayfaların düzenlerinde ihtiyaç duyulur ve sayfaların belirli kısımlarında bu etiketlere özellikler atar. Div’ler web düzeninde kullanılırken, span etiketi genelde tabloların yerini almaktadır. Her iki etiketin de nasıl çalıştığını anlamak için web sayfasının tasarımında CSS kullanmak önemli bir yere sahiptir.