sovyan.comsovyan.com
html Komputer Pemrograman Web
Beranda / Pemrograman / Web / Elemen div HTML | Tutorial HTML 36

Elemen div HTML | Tutorial HTML 36

Oleh sopyan • Desember 26, 2023 • 4 Dilihat • 8 Menit membaca •
Assalamualaikum sobat, di artikel kali ini kami akan membagikan tutorial
mengenai elemen
<div>
HTML, berikut adalah tutorialnya.

Elemen
<div>

Di HTML, elemen
<div>
digunakan sebagai kontainer atau wadah untuk elemen HTML lainnya.
Elemen
<div>
merupakan sebuah elemen block yang artinya elemen ini akan menutupi semua
lebar yang ada dan akan dilengkapi oleh sebuah baris baru pada bagian awal dan
akhirnya.
Elemen
<div>
tidak memiliki atribut khusus, namun
style,
class
dan
id
sangat umum digunakan.

Contoh Program 1 : Elemen <div> menutupi lebar yang tersedia.

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    background-color : red;
  }
  </style>
</head>
<body>
  <h2>Contoh Elemen div</h2>
  
  ini adalah contoh <div>elemen div </div>yang mana akan memiliki latar belakang berwarna merah
</body>
</html>

Hasil Program 1

Penjelasan Program 1

  • Di baris 5 sampai baris 7 kita membuat elemen div memiliki
    latar belakang berwarna merah.
  • Di baris 11 kita membuat sebuah judul.
  • Di baris 13 kita membuat sebuah teks yang di dalamnya terdapat
    elemen div.
Elemen
<div>
Sebagai Wadah/Kontainer
Elemen
<div>
sering digunakan untuk menyatukan bagian-bagian dari halaman web menjadi satu.

Contoh Program 2 : Elemen <div> Bersama Elemen HTML Lainnya.

<!DOCTYPE html>
<html>
<head>
  <style>
  div {

    background-color: yellow;
  }
  </style>
</head>
<body>
  <h2>Contoh Elemen div</h2>
  
  <div>

    <h2>Bandung</h2>

    <p>Bandung adalah Ibu Kota Provinsi Jawa Barat</p>
  </div>
  
  <p>Di contoh ini warna latar belakang kuning kita tambahkan untuk menunjukan
elemen div</p>
</body>
</html>

Hasil Program 2

Penjelasan Program 2

  • Di baris 5 sampai baris 7 kita membuat elemen div memiliki
    latar belakang berwarna kuning.
  • Di baris 11 kita membuat sebuah judul.
  • Di baris 13 sampai baris 16 kita membuat elemen div yang
    di dalamnya terdapat judul dan juga paragraf.
  • Di baris 18 kita membuat sebuah paragraf.

Perataan Tengah Elemen
<div>

Jika kita mengatur lebar elemen
<div>
tidak 100%. Kita bisa menyetel properti CSS
margin
menjadi
auto
untuk mendapatkan perataan tengah.

Contoh Program 3 : Perataan Tengah Elemen <div>

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 250px;
    margin: auto;
    background-color: green;
  }
  </style>
</head>
<body>
  <h2>Perataan Tengah Elemen div</h2>
  <div>

    <h2>Kota Bandung</h2>
    <p>Kota bandung adalah salah satu kota yang berada di Provinsi Jawa
Barat</p>
    <p>Kota Bandung adalah Kota yang dikelilingi oleh gunung</p>
  </div>
</body>
</html>

Hasil Program 3

Penjelasan Program 3

  • Di baris 5 sampai baris 9 kita mengatur elemen div
    memiliki lebar 250 piksel, rata tengah dan latar belakang berwarna
    hijau.
  • Di baris 13 kita membuat sebuah judul.
  • Di baris 14 sampai baris 18 kita membuat elemen div yang
    di dalamnya terdapat sebuah judul dan 2 buah paragraf.

Banyak Elemen
<div>

Kita bisa membuat banyak elemen
<div>
di halaman yang sama.

Contoh Program 4 : Banyak Elemen <div>

<!DOCTYPE html>
<html>
<body>
  <h2>Banyak Elemen div</h2>
  <div style=“background-color:red;”>

    <h2>Kota bandung</h2>
    <p>Kota bandung adalah salah satu kota di Jawa Barat</p>
  </div>
  <div style=“background-color:yellow;”>

    <h2>Kota Semarang</h2>
    <p>Kota Semarang adalah Kota yang berada di Jawa Tengah</p>
  </div>
  <div style=“background-color:green;”>

    <h2>Kota Surabaya</h2>
    <p>Kota Surabaya adalah Kota yang berada di Jawa Timur</p>
  </div>
</body>
</html>

Hasil Program 4

Penjelasan Program 4

  • Di baris 4 kita membuat sebuah judul.
  • Di baris 5 sampai baris 8 kita membuat elemen div dengan
    latar belakang berwarna merah yang memiliki sebuah judul dan sebuah
    paragraf.
  • Di baris 9 sampai baris 12 kita membuat elemen div yang
    memiliki latar belakang berwarna kuning yang memiliki sebuah judul dan
    sebuah paragraf.
  • Di baris 13 sampai baris 16 kita membuat elemen div yang
    memiliki latar belakang berwarna hijau dan memiliki sebuah judul dan
    sebuah paragraf.

Mengatur Elemen <div> Secara Berdampingan

Ketika membuat sebuah halaman web, kita sering kali menginginkan memiliki
beberapa elemen
<div>
yang diatur berdampingan.
Dengan menggunakan CSS kita bisa membuat elemen menjadi berdampingan, terdapat
beberapa cara yang paling umum dilakukan. Berikut beberapa metodenya.

1. Float

Dengan menggunakan properti CSS
float
kita dapat membuat elemen
<div>
menjadi melayang bersebelahan tanpa tumpang tindih satu sama lain.

Contoh Program 5 : Mengatur elemen
<div>
bersebelahan menggunakan
float

<!DOCTYPE html>
<html>
<head>
  <style>
  div.wadah {
    width : 100%;
    overflow : auto;
  }
  
  div.wadah div {
    width : 33%;
    float : left;
  }
  </style>
</head>

<body>
  <div class=“wadah”>
  <div style=“background-color:red;”>

    <h2>Elemen div pertama</h2>
  </div>
  
  <div style=“background-color:yellow;”>

    <h2>Elemen div kedua</h2>
  </div>
  
  <div style=“background-color:purple;”>

    <h2>Elemen div ketiga</h2>
  </div>
  </div>
</body>
</html>

Hasil Program 5

Penjelasan Program 5

  • Di baris 5 sampai baris 8 membuat elemen div class wadah
    memiliki lebar 100 persen dari lebar halaman web dan mengatur
    overflownya menjadi auto.
  • Di baris 10 sampai baris 13 kita mengatur elemen div yang
    berada pada elemen div class wadah memiliki lebar 33% dari lebar halaman
    web yang kita buat melayang agar tidak tumpang tindih dari kiri ke
    kanan.

2. inline-block

Secara default properti
display
pada elemen
<div>
nilainya adalah
block, jika kita mengganti
block
menjadi
inline-block, elemen
<div>
tidak akan menambahkan baris baru diawal dan diakhir, dan juga elemen
<div>
tidak akan tumpang tindih dan akan ditampilkan secara berdampingan.

Contoh Program 6 : display : inline-block.

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width : 30%;
    display: inline-block;
  }
  </style>
</head>

<body>
  
  <div style=“background-color:red;”>

    <h2>Elemen div pertama</h2>
  </div>
  
  <div style=“background-color:yellow;”>

    <h2>Elemen div kedua</h2>
  </div>
  
  <div style=“background-color:purple;”>

    <h2>Elemen div ketiga</h2>
  </div>
    
</body>
</html>
Baca juga: Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

Hasil Program 6

Penjelasan Program 6

  • Di baris 5 sampai baris 8 kita mengatur elemen div
    memiliki lebar 30% dari lebar halaman web dan mengatur tampilannya
    menjadi inline-block agar tidak saling tumpang tindih.
  • Di baris 14 sampai baris 16 kita membuat elemen div dengan latar
    belakang berwarna merah yang di dalamnya terdapat sebuah judul.
  • Di baris 18 sampai baris 20 kita membuat sebuah elemen div
    dengan latar belakang berwarna kuning yang di dalamnya terdapat sebuah
    judul.
  • Di baris 22 sampai baris 24 kita membuat sebuah elemen div
    dengan latar belakang berwarna ungu yang di dalamnya terdapat sebuah
    judul.

3. Flex

Dengan menggunakan modul layout CSS flexbox kita dapat dengan mudah membuat
struktur tata letak yang responsif tanpa harus menggunakan positioning ataupun
float
Agar metode CSS
flex
berfungsi dengan baik, kita  perlu mengelilingi elemen
<div>
dengan elemen
<div>
lainnya dan memberikannya status sebagai wadah fleksibel.

Contoh Program 7 : CSS Flex

<!DOCTYPE html>
<html>
<head>
  <style>
  .wadah {
    display : flex;
  }
  .wadah div{
    width : 30%;
  }
  </style>
</head>

<body>
  <div class=“wadah”>
  <div style=“background-color:red;”>

    <h2>Elemen div pertama</h2>
  </div>
  
  <div style=“background-color:yellow;”>

    <h2>Elemen div kedua</h2>
  </div>
  
  <div style=“background-color:purple;”>

    <h2>Elemen div ketiga</h2>
  </div>
  </div>
</body>
</html>

Hasil Program 7

Penjelasan Program 7

  • Di baris 5 sampai baris 7 kita mengatur elemen div class
    wadah tampilannya menjadi fleksibel responsif agar elemen div tidak
    saling tumpang tindih.
  • Di baris 8 sampai baris 10 kita mengatur elemen div yang
    berada di dalam elemen div class wadah memiliki lebar 30 persen dari
    lebar halaman web.
  • Di baris 15 sampai baris 27 kita membuat elemen div yang
    akan menjadi wadah untuk beberapa elemen div lainnya.
  • Di baris 16 sampai baris 18 kita membuat elemen div dengan
    latar belakang berwarna merah yang di dalamnya terdapat sebuah judul.
  • Di baris 20 sampai baris 22 kita membuat elemen div dengan
    latar belakang berwarna kuning yang di dalamnya terdapat sebuah judul.
  • Di baris 24 sampai baris 26 kita membuat sebuah elemen div
    dengan latar belakang berwarna ungu yang di dalamnya terdapat sebuah
    judul.

4. Grid

Dengan menggunakan modul layout CSS
grid, kita bisa mengatur tata letak berbasis grid dengan baris dan kolom.
Sehingga kita mudah untuk mendesain halaman web tanpa menggunakan float dan
positioning.
Dengan menggunakan
grid
kita bisa mengatur tata letak lebih dari satu baris dan memposisikan setiap
baris secara satu persatu.
Untuk menggunakan metode CSS
grid
kita harus mengelilingi elemen
<div>
dengan elemen
<div>
lainnya dan memberikan nama class sebagai wadah
grid
dan kita juga harus menentukan lebar setiap kolom.

Contoh Program 8 : Metode CSS grid

<!DOCTYPE html>
<html>
<head>
  <style>
  .wadah-grid {
    display : grid;

    grid-template-columns: 30% 30% 40%;
  }
  </style>
</head>

<body>
  <h2>Metode CSS grid</h2>
  
  <div class=“wadah-grid”>
  <div style=“background-color:red;”>

    <h2>Elemen div pertama</h2>
  </div>
  
  <div style=“background-color:yellow;”>

    <h2>Elemen div kedua</h2>
  </div>
  
  <div style=“background-color:purple;”>

    <h2>Elemen div ketiga</h2>
  </div>
  </div>
</body>
</html>

Hasil Program 8

Penjelasan Program 8

  • Di baris 5 sampai baris 8 kita mengatur elemen div class
    wadah-grid memiliki tampilan grid dan kita mengatur lebar tiap-tiap
    elemen div memiliki lebar 30%, 30% dan 40% dari lebar halaman web.
  • Di baris 13 kita membuat sebuah judul.
  • Di baris 15 sampai baris 27 kita membuat elemen div dengan
    nama class “wadah-grid” sebagai wadah untuk 3 buah elemen div yang
    masing memiliki warna latar belakang merah, kuning dan ungu.

Tag HTML

Tag Deskripsi
<div> Mendefinisikan sebuah section (bagian) dalam sebuah dokumen (tingkat
block)
Itulah tutorial mengenai elemen
<div>
HTML, semoga artikel kali ini bermanfaat, sampai jumpa di tutorial
selanjutnya.

sopyan

Seorang blogger yang senang berbagi berbagai informasi dan tutorial.

Artikel Terkait

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Populer

01

Tips Meningkatkan Kecepatan Website E-commerce untuk Hasil Penjualan yang Lebih Optimal

Oktober 8, 2024 • 58 Dilihat
02

Tutorial HTML part 1: Apa Itu HTML dan Kenapa Penting?

Januari 7, 2025 • 42 Dilihat
03

Strategi Ampuh untuk Launching Produk Baru: Gabungan Online dan Offline

Desember 28, 2024 • 41 Dilihat
04

HTML: Awal Perjalanan Lo di Dunia Coding yang Kece Abis! (Tutorial HTML part 1)

Januari 22, 2025 • 40 Dilihat
05

Cara Monetisasi Blog dengan Google AdSense: Panduan Lengkap untuk Pemula

Januari 10, 2025 • 38 Dilihat