Basit bir DIV kullanımı örneği için aşağıdaki kodu inceleyebilirsiniz:
<!DOCTYPE html>
<html>
<head>
<title>Basit DIV Kullanımı Örneği</title>
<style>
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
h1 {
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Başlık</h1>
<p>Bu bir paragraf örneğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, mi id bibendum lobortis, enim justo lobortis ante, at elementum mauris ipsum ac lectus.</p>
<p>Nulla vel fringilla quam. Sed in orci bibendum, pretium neque vel, lacinia massa. Fusce et arcu eu orci bibendum interdum. Suspendisse congue ex sed enim vestibulum tempus. Duis gravida felis a eros faucibus dictum. </p>
</div>
</body>
</html>
Yukarıdaki örnekte, div etiketi ile belirtilen container sınıfına sahip bir div elemanı oluşturulmuştur. Bu div elemanı içinde bir başlık ve iki paragraf bulunmaktadır. container sınıfına sahip div elemanı, width özelliği ile genişliği 500 piksel olarak ayarlanmıştır. margin özelliği ile div elemanının sayfanın ortasına hizalanması sağlanmıştır. padding özelliği ile div elemanının iç boşluğu belirlenmiştir. background-color ve border özellikleri ile arka plan rengi ve kenarlık belirlenmiştir.
Başlık ve paragrafların stil özellikleri ise ilgili etiketlere göre tanımlanmıştır. Bu örnek sayesinde, div elemanlarını kullanarak belirli bir alanda içerikleri gruplamayı, stil özellikleri ile de görüntüyü düzenlemeyi öğrenebilirsiniz.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.