Sepetiniz şu anda boş!
<div> HTML Etiketi Kullanımı
1. Temel Kullanım:
<div> etiketi, içeriği gruplandırmak için kullanılır. Örneğin, bir web sayfasını üst bilgi, içerik ve alt bilgi olarak bölmek istediğinizde <div> etiketini kullanabilirsiniz.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Örneği</title>
<style>
.header, .content, .footer {
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="header">
<h1>Üst Bilgi</h1>
</div>
<div class="content">
<p>Bu bir içerik bölümüdür.</p>
</div>
<div class="footer">
<p>Alt Bilgi</p>
</div>
</body>
</html>2. CSS ile Stillendirme:
<div> etiketi, CSS ile stillendirmek için sıklıkla kullanılır. Örneğin, bir menü oluşturmak ve bu menüyü stillendirmek istediğinizde <div> etiketini kullanabilirsiniz.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div ile Menü</title>
<style>
.menu {
background-color: #333;
overflow: hidden;
}
.menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.menu a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Anasayfa</a>
<a href="#">Hakkımızda</a>
<a href="#">Hizmetler</a>
<a href="#">İletişim</a>
</div>
</body>
</html>3. JavaScript ile Etkileşim:
<div> etiketi, JavaScript ile etkileşimli öğeler oluşturmak için de kullanılır. Örneğin, bir butona tıklandığında bir <div> içeriğini gizlemek veya göstermek istediğinizde bu etiketi kullanabilirsiniz.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div ve JavaScript</title>
<style>
#content {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button onclick="toggleContent()">İçeriği Göster/Gizle</button>
<div id="content">
<p>Bu bir içerik bölümüdür.</p>
</div>
<script>
function toggleContent() {
var content = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>
</body>
</html>4. İç İçe <div> Kullanımı:
<div> etiketleri, iç içe kullanılarak daha karmaşık düzenler oluşturulabilir. Örneğin, bir kart yapısı oluşturmak için iç içe <div> etiketleri kullanabilirsiniz.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İç İçe Div</title>
<style>
.card {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card-header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.card-body {
padding: 20px;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<h2>Kart Başlığı</h2>
</div>
<div class="card-body">
<p>Bu bir kart içeriğidir.</p>
</div>
</div>
</body>
</html>Özet:
-
<div>etiketi, içeriği gruplandırmak ve düzenlemek için kullanılır. -
CSS ile stillendirmek ve JavaScript ile etkileşimli öğeler oluşturmak için sıklıkla kullanılır.
-
İç içe
<div>etiketleri, daha karmaşık düzenler oluşturmak için kullanılabilir.
Bu örneklerle, <div> etiketinin nasıl kullanılabileceğini ve web sayfalarında nasıl farklı amaçlar için uygulanabileceğini anlayabilirsiniz.
Bir yanıt yazın
Yorum yapabilmek için oturum açmalısınız.