Html Block ve Inline Elementler

Onceki dersimizde CSS konusundan oldukca bahsettik ve dersin sonuna dogru padding,border,margin gibi onemli yeni bilgiler ogrendik. Simdi tekrar icin kucuk bir ornek yapalim.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Html Block | Inline</title>
	<style>
		a{
			text-decoration: none;		/*Linklerin alti cizili olmasin*/
			font-size: 30px;
			border:1px solid green;
			padding:12px;
		}
		h1{
			font-size: 30px;
			border:1px solid green;
			padding:12px;
		}
	</style>
</head>
<body>
	<a href="#">Java</a>
	<a href="#">Php</a>
	<h1>CSS</h1>
	<h1>Html</h1>
</body>
</html>

Kodun ekran goruntusune baktigimizda linklerin(a) yanyana dizildigini oysa basliklarin(h1) tum satiri kapladigini goruyoruz. Html de bazi elementler ornekteki linkler gibi davranir ,bazilari ise baslik gibi davranir. Simdi bu 2 grubu taniyalim.

Html Block Duzeyi Elemanlari

Bir blok duzeyindeki html elemani herzaman yeni bir satirla baslar ve mumkun oldugu kadar tum satiri kullanir.

  • Baslik etiketleri blok duzeyindedir (h1,h2,h3,h4,h5,h6)
  • Paragraf etiketi blok duzeyindedir(p)
  • form etiketi blok duzeyindedir(sonraki derslerin konusu)
  • table etiketi blok duzeyindedir (sonraki derslerin konusu)
  • div etiketi blok duzeyindedir
  • ul etiketi blok duzeyindedir (sonraki derslerin konusu)
  • ol etiketi blok duzeyindedir (sonraki derslerin konusu)
  • (Bunlar sadece bazilari)

Ekran goruntusunu inceleyiniz,ozellikle border,background gibi stil degerleri verildiginde elemanin kapladigi alan daha net gorulur.
<h1 style="border:1px solid red;">Bu Bir Baslik</h1>
<p style="border:1px solid red;">Bu Bir Paragraf</p>
<div style="border:1px solid red;">Bu bir div elementi</div>

Bu Bir Baslik

Bu Bir Paragraf

Bu bir div elementi

Html Inline/Satir ici Elementler

Satir ici elementler(inline) blok duzeyi elementler gibi yeni satira baslamaz oncekinden devam ederler, ayrica sadece ihtiyac duydugu kadar genislik degerine sahiptir.

  • span etiketi
  • a link etiketi
  • img resim etiketi
  • button,input,i,small,sub,sup,b,strong.. gibi etiketler
  • (Bunlar sadece bazilari)
Ekran goruntusune bakmak sanirim cok daha aciklayici.
<a href="#" style="border:1px solid red;">Bu Bir Link</a>
<img style="border:1px solid red;" src="img/resim.jpg" alt="Burda Resim Var"/>
<span style="border:1px solid red;">Bu bir span elementi</span>
Bu Bir Link Burda Resim Var Bu bir span elementi
div elementi genel olarak diger elementler icin bir konteyner/kapsayici olarak kullanilir.
span elementi bazi metin bolumleri icin bir kapsayici olarak kullanilir.
Bu 2 elementede id ve class degerleri verilerek cok etkili kullanilabilir.

Simdi div ve span kullanimina bir ornek verelim,ayrica onceki konularida bir miktar tekrarlamis oluruz.
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Div - Span</title>
	<style>
		#menu_bolumu{
			border:1px solid red;
			padding: 15px;
		}

		a{
			text-decoration: none;
			font-size: 20px;
			border:1px solid black;
			background-color: lightblue;
			padding:6px;
			margin-right: 10px;	/*Sadece sag kenara margin verdik*/
		}
	</style>
</head>
<body>
	<div id="menu_bolumu">
		<!-- Linkler  Basladi -->
		<div id="linkler">
			<a href="#">1.Link</a>
			<a href="#">2.Link</a>
			<a href="#">3.Link</a>
			<a href="#">4.Link</a>
		</div>
		<!-- Linkler Bitti -->

		<div id="baslik_metni">

			<!-- h1 icinde span kullandik -->
			<h1>Div ve Span <span style="color:green;">Nedir?</span></h1>
		</div>
	</div>
</body>
</html>

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com