HTML ve CSS, web sayfaları oluşturmak için en temel teknolojilerden ikisidir. div etiketi, web sayfalarında belirli bir blok içindeki öğeleri gruplamak için kullanılır. div etiketi, web sayfalarının yapısını belirlemeye yardımcı olur ve CSS ile birlikte kullanıldığında, web sayfalarını görsel olarak düzenlemenize ve stillemenize olanak tanır.
Aşağıdaki örnek, div etiketi kullanarak bir sayfayı temel olarak nasıl düzenleyebileceğinize dair bir fikir verecektir.
HTML Kodu:
<div class="container">
<div class="header">
<h1>Başlık</h1>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</div>
<div class="main-content">
<h2>Ana İçerik</h2>
<p>Bu, web sayfanız
background-color: #f2f2f2;
padding: 10px;
text-align: center;
clear: both;
}
Yukarıdaki CSS kodu, container sınıfına özellikler ekler. max-width özelliği, container sınıfının en fazla genişliğini belirler ve margin özelliği sayesinde, sayfanın merkezinde ortalanmıştır. padding özelliği, sayfanın kenarlarından içeri boşluk bırakır. display: flex özelliği sayesinde, bölümler yan yana sıralanır. flex-wrap özelliği, bölümlerin sığdırılmasını sağlar.
header sınıfı için, display: flex özelliği sayesinde öğeler yatay olarak hizalanır. justify-content özelliği, öğeler arasındaki mesafeyi belirler. align-items özelliği ise, öğelerin dikey hizalamasını belirler.
nav ul ve nav li özellikleri, navigasyon menüsünün biçimlendirilmesini sağlar.
main-content sınıfı, flex-basis özelliği sayesinde, bölümün genişliğini ayarlar ve margin-right özelliği, sağ taraftan bir boşluk bırakır.
sidebar sınıfı, flex-basis özelliği sayesinde bölümün genişliğini ayarlar.
footer sınıfı ise, sayfanın altında yer alan bir bölümdür ve background-color özelliği ile arka plan rengini belirler. padding özelliği, içeriği kenarlardan biraz içeri çeker. text-align özelliği, içeriği ortalar ve clear özelliği ise, float özelliklerinden etkilenmemesi için alt tarafında temiz bir bölge oluşturur.
Bu örnek, div etiketinin nasıl kullanılabileceğine dair bir fikir verecektir. Böylece, web sayfalarınızın yapısını belirleyebilir ve CSS ile birlikte stil ve düzenleme işlemleri yapabilirsiniz.
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.