HTML div Tag Elemen, Tutorial Belajar kode editor

HTML div tag

HTML Elemen <div> adalah frame yang dapat dijadikan sebagai wadah untuk menempatkan beberapa elemen HTML menjadi satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi style/gaya dengan CSS dan perlakukan khusus lainnya yang kemudian dapat diberi atribut Class, ID, Title, dan lain sebagainya lebih banyak lagi. lebih jelasnya bisa kita lihat contoh dibawah ini bisa langsung kita jalankan di tab html live code. [hasil]

HTML div tag

1. html tag <div> example

<!DOCTYPE html>
<html>
<head>
<style>
h2 {color:black; font-family:monospace;}
.mydiv { border:5px solid black; background-color: #ddd; padding:10px; text-align: center;}
p {color:black; font-family:monospace; font-size:14px;}
</style>
</head>
<body>
<h2>Contoh: HTML Elemen div </h2> <hr>
<!--div-->
<div class="mydiv">
<h2>Contoh Judul Didalam Elemen Div</h2>
<p>Contoh Text Didalam Elemen Div</p>
</div>
<!--div-->
<p>Contoh Teks Diluar Elemen Div</p>
</body>
</html>
Cicagak Berbagi

2. html tag <div> dua kolom dengan css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

/* Gaya Kolom */
.column {
  margin:1%;
  border-radius:4px;
  float: left;
  font-family:monospace;
  width: 48%;
  padding: 10px;
  height: 300px; /* Ubah Sesuaikan */
  }
.column:hover { box-shadow:0 0 2px #000000; }

/* Hapus mengapung setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both; 
  }
</style>
</head>
<body>

<h1 style="font-family:monospace; text-align:center;">Contoh: HTML Elemen Div Dua Kolom</h1> <hr>

<div class="row">
  <div class="column" style="background-color:#E1D9D1;">
    <h2>Kolom Ke 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="column" style="background-color:#DFD3E3;">
    <h2>Kolom Ke 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

</body>
</html>
Cicagak Berbagi

3. html tag <div> tiga kolom dengan css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

/* Gaya Kolom */
.column {
  margin:1%;
  border-radius:4px;
  float: left;
  font-family:monospace;
  width: 31%;
  padding: 10px;
  height: 300px; /* Ubah Sesuaikan */
 }
.column:hover {box-shadow:0 0 2px #000000;}

/* Hapus mengapung setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both; 
  }
</style>
</head>
<body>

<h1 style="font-family:monospace; text-align:center;">Contoh: HTML Elemen Div Tiga Kolom</h1> <hr>

<div class="row">
  <div class="column" style="background-color:#E1D9D1;">
    <h2>Kolom Ke 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="column" style="background-color:#DFD3E3;">
    <h2>Kolom Ke 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="column" style="background-color:#ffa;">
    <h2>Kolom Ke 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

</body>
</html>
Cicagak Berbagi

4. html tag <div> background warna

<!DOCTYPE html>
<html>
<head>
<style>
h2 {color:black; font-family:monospace;}
.judul {color:white; font-family:monospace;}
.teks {color:white; font-family:monospace; font-size:14px;}
.mydiv1 { border-radius:5px; background-color: coral; padding:10px; text-align: center;}
.mydiv2 { border-radius:5px; background-color: #6698FF; padding:10px; text-align: center;}
.mydiv3 { border-radius:5px; background-color: #9E7BFF; padding:10px; text-align: center;}
</style>
</head>
<body>
<h2>Contoh: HTML Elemen div background warna dengan css</h2> <hr>
<!--div warna 1-->
<div class="mydiv1">
<h2 class="judul">Contoh Judul Didalam Elemen Div</h2>
<p class="teks">Contoh Text Didalam Elemen Div</p>
</div> <br>
<!--div warna 2-->
<div class="mydiv2">
<h2 class="judul">Contoh Judul Didalam Elemen Div</h2>
<p class="teks">Contoh Text Didalam Elemen Div</p>
</div> <br>
<!--div warna 3-->
<div class="mydiv3">
<h2 class="judul">Contoh Judul Didalam Elemen Div</h2>
<p class="teks">Contoh Text Didalam Elemen Div</p>
</div> <br>
</body>
</html>
Cicagak Berbagi

5. html tag <div> scroll horizontal menu

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
  background-color: #A74AC7;
  overflow: auto;
  white-space: nowrap;
  border-radius:2px;
}

div.scrollmenu a {
  font-family:"Roboto Mono", monospace;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #A74AC7;
  border-radius:4px;
  box-shadow:0 0 4px #000000;
  text-shadow: 2px 2px 2px black, 0 0 30px #7B7B7B, 0 0 2px darkblue;
  font-weight:bold;
}
.s {
color:#000;
font-family:"Roboto Mono", monospace;
font-size:20px;
}

</style>
</head>
<body>

<div class="scrollmenu">
  <a href="#link-1" onfocus="document.getElementById('sCaption').innerText = 'One 1'">One 1</a>
  <a href="#link-2" onfocus="document.getElementById('sCaption').innerText = 'Two 2'">Two 2</a>
  <a href="#link-3" onfocus="document.getElementById('sCaption').innerText = 'Three 3'">Three 3</a>
  <a href="#link-4" onfocus="document.getElementById('sCaption').innerText = 'Four 4'">Four 4</a>
  <a href="#link-5" onfocus="document.getElementById('sCaption').innerText = 'Five 5'">Five 5</a>
  <a href="#link-6" onfocus="document.getElementById('sCaption').innerText = 'Six 6'">Six 6</a>
  <a href="#link-7" onfocus="document.getElementById('sCaption').innerText = 'Seven 7'">Seven 7</a>  
  <a href="#link-8" onfocus="document.getElementById('sCaption').innerText = 'Eight 8'">Eight 8</a>
  <a href="#link-9" onfocus="document.getElementById('sCaption').innerText = 'Nine 9'">Nine 9</a>
  <a href="#link-10" onfocus="document.getElementById('sCaption').innerText = 'Ten 10'">Ten 10</a>
  <a href="#link-11" onfocus="document.getElementById('sCaption').innerText = 'Eleven 11'">Eleven 11</a>
  <a href="#link-12" onfocus="document.getElementById('sCaption').innerText = 'Twelve 12'">Twelve 12</a>
  <a href="#link-13" onfocus="document.getElementById('sCaption').innerText = 'Thirteen 13'">Thirteen 13</a>
  <a href="#link-14" onfocus="document.getElementById('sCaption').innerText = 'Fourteen 14'">Fourteen 14</a>
</div>
<br>
<span class="s" >div scroll horizontal menu: </span> 
<span class="s" id="sCaption">...</span>

</body>
</html>
Cicagak Berbagi

Browser Yang Didukung

Element
<div> Ya Ya Ya Ya Ya

Link 1


Link 2


Link 3


Link 4


Link 5


...


Full Screen . Exit . Cicagak Berbagi

Komentar

Posting Komentar