Membuat Bagian dari Dokumen

<div>...</div>

Tag ini digunakan untuk membuat satu tempat dari dokumen yang berisi sekelompok elemen HTML dengan tujuan agar bisa diberi style CSS.

Syntax:

<div>Elemen HTML</div>

Contoh:

Buatlah sebuah file bernama div.html dan masukkan kode berikut ini:

<body style="font-family: helvetica, arial;">

<div style="width:280px;background-color:blue;padding:20px;color:white;font-size:13px;">

<img width="260" src="mancini201603141050.png"  />

<h2 style="color:#f6fe19;margin: 10px;padding: 0;">'Inter Sulitkan Diri Sendiri di Akhir Laga'</h2>

<span style="color:#959595">Sepakbola | Minggu 13 Mar 2016, 10:26 WIB</span>

<p style="text-align:justify">Inter Milan memetik kemenangan saat menjamu Bologna di lanjutan Liga Italia. Pelatih Inter, Roberto Mancini, agak menyesali performa Nerazzurri di akhir laga.

</p>

</div>

<div style="width:280px;background-color:red;padding:20px;color:white;font-size:13px;">

<img width="260" src="donat201603141059.png" /> 

<h2 style="color:#f6fe19;margin: 10px;padding: 0;">Ini Dia Macaron Donut, Paduan Macaron Prancis dan Donat Amerika yang Enak</h2>

<span style="color:#959595">detikFood | Minggu 13 Mar 2016, 10:14 WIB</span>

<p style="text-align:justify">Tren pastry hybrid masih terus berlangsung. Kini ada paduan macaron dan donat yang manis empuk dan enak.

</p>

</div>

<div style="width:280px;background-color:blue;padding:20px;color:white;font-size:13px;">

 <img width="260" src="profDrLiu201603141059.png" />

<h2 style="color:yellow;margin: 10px;padding: 0;">'Laporan dari Beijing

Prof Lu Dau Pei, Bapak Transplantasi Sumsum Tulang Belakang di Asia</h2>

<span style="color:#959595">detikHealth | Minggu 13 Mar 2016, 10:04 WIB</span>

<p style="text-align:justify">

Prof Lu Dau Pei sukses mentransplantasi sumsum tulang belakang pertama di Asia. Inilah Bapak Transplantasi Sumsum Tulang Belakang.

</p>

</div>

</body>

Keterangan:

  • <body style="font-family: helvetica, arial;">, Kode ini berarti font yang digunakan adalah berjenis helvetica dan jika tidak ada maka gunakan arial.
  • <div style="width:280px;background-color:blue;padding:20px;color:white;font-size:13px;">, pada kode ini property background-color digunakan untuk memberikan warna background, padding digunakan untuk mengatur jarak dari isi ke ujung kotak div , font-size digunakan untuk menentukan ukuran font.
  • <h2 style="color:#f6fe19;margin: 10px;padding: 0;">'Inter Sulitkan Diri Sendiri di Akhir Laga'</h2>, Pada kode ini margin digunakan untuk mengatur jarak atas antara elemen h2 ke elemen img dan jarak bawah dari elemen h2 ke elemen span.
  • <p style="text-align:justify">, pada kode ini property text-align digunakan untuk mengatur perataan teks.

Hasil:

Klik 2x nama filemu maka pada browser akan menghasilkan hasil seperti terlihat dibawah ini:

'Inter Sulitkan Diri Sendiri di Akhir Laga'

Sepakbola | Minggu 13 Mar 2016, 10:26 WIB

Inter Milan memetik kemenangan saat menjamu Bologna di lanjutan Liga Italia. Pelatih Inter, Roberto Mancini, agak menyesali performa Nerazzurri di akhir laga.

Ini Dia Macaron Donut, Paduan Macaron Prancis dan Donat Amerika yang Enak

detikFood | Minggu 13 Mar 2016, 10:14 WIB

Tren pastry hybrid masih terus berlangsung. Kini ada paduan macaron dan donat yang manis empuk dan enak.

'Laporan dari Beijing Prof Lu Dau Pei, Bapak Transplantasi Sumsum Tulang Belakang di Asia

detikHealth | Minggu 13 Mar 2016, 10:04 WIB

Prof Lu Dau Pei sukses mentransplantasi sumsum tulang belakang pertama di Asia. Inilah Bapak Transplantasi Sumsum Tulang Belakang.

2016 © Fahmi Basya Kartapura