HTML ve CSS ile <div> öğesi, web sayfalarında blok düzeyinde alanlar oluşturmak için kullanılan bir yapı taşıdır. Bir <div> öğesi, sayfanın belirli bir bölgesini işaretleyen bir blok oluşturur. Bu blok, içerdiği diğer öğelerle birlikte stil ve yerleştirme özellikleri kullanılarak özelleştirilebilir.
Aşağıdaki örnek kod, HTML ve CSS kullanarak bir <div> oluşturmanın temel bir yolunu göstermektedir:
html
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sayfa</title>
<style>
/* CSS kullanarak div öğesi biçimlendirilir */
div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<!– HTML kullanarak div öğesi oluşturulur –>
<div>
<h1>Bu bir örnek div öğesidir</h1>
<p>Bu div öğesi, web sayfanızda belirli bir bölgeyi işaretlemek için kullanılabilir.</p>
</div>
</body>
</html>
Bu örnek kod, bir HTML sayfasında <div> öğesi oluşturmanın temel bir yolunu göstermektedir. CSS kullanarak <div> öğesi biçimlendirilir. Örnekteki CSS özellikleri, arka plan rengi, kenarlık, dolgu ve dış kenarlık (margin) gibi stil özelliklerini tanımlar. HTML öğesi içindeki içerik, div öğesinin içindeki blokta görüntülenir.
Bu temel yapı taşı, daha karmaşık tasarımların oluşturulmasına izin verir. Örneğin, birden fazla <div> öğesi yan yana veya üst üste konumlandırılarak sayfanın farklı bölgeleri için farklı bloklar oluşturulabilir. Bu bloklar, farklı stil ve yerleştirme özellikleri kullanılarak özelleştirilebilir.