Cara membuat kotak menggunakan div pada CSS

Hello, kembali lagi bersama segalacoding. Mohon maaf saya baru update kembali. Kali ini saya akan memberikan tutorial tentang bagaimana caranya membuat kotak menggunakan tag <div> menggunakan sentuhan CSS. Tag <div> adalah tag dari HTML, seperti yang saya bilang pada artikel sebelumnya. Sedikit saya jelaskan menurut versi saya. Tag <div> menurut saya adalah seperti ruangan yang belum di modifikasi alias masih kosong. Itu menurut versi dan pendapat saya yah, mungkin bagi orang lain yang sudah biasa mengenal tag <div> beda lagi artinya yang dimaksud. Ok dari pada saya lebih banyak lagi untuk mengobrolnya gimana kita langsung peraktekan saja.

Ok seperti biasa yang kita persiapkan ada dibawah ini dan berikut langkah-langkahnya :

Persiapan :

1. Pastikan anda mempunyai text editor (Software untuk membuat dokumen HTML yang nantinya akan ada beberapa code CSS didalam HTML) contoh text editor : notepad ++, sublime text, Adobe Dreamweaver dll.

2. Browser yang ingin digunakan

Langkah - Langkah :
1. Buka text editor kalian

2. Berikut dibawah ini terdapat sebuah script sederhana HTML yang belum ditambahi sedikit sentuhan CSS :

 
<!DOCTYPE html>
<html>
<head>
 <title>Ini Membuat Kotak</title>
</head>
<body>

 <div>INI KITA COBA BUAT KOTAK</div>

</body>
</html>

3. Berikut dibawah script CSS untuk membuat kotaknya :

 
<style type="text/css">
 div{
  width: 300px;
  height: 300px;
  border:2px solid #000;
  padding: 10px;
  background: red;
  color:white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
 }
</style>

4. Berikut kalau kita gabungin scriptnya :

 
<!DOCTYPE html>
<html>
<head>
 <title>Ini Membuat Kotak</title>

<style type="text/css">
 div{
  width: 300px;
  height: 300px;
  border:2px solid #000;
  padding: 10px;
  background: red;
  color:white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
 }
</style>

</head>
<body>

 <div>INI KITA COBA BUAT KOTAK</div>

</body>
</html>

5. Biasa kalau sudah anda dapat menyimpannya dengan contoh.html lalu double klik saja dan lihat hasilnya di browser.

Penjelasan :

1. Diatas adalah script / barisan kode sederhana

2. Tingkat kesulitan dalam pembuatan termasuk rendah

Mudahkan cara membuatnya, anda baru saja membuat sebuah tampilan sederhana dengan dokumen HTML dan CSS. Jangan lupa tinggalkan sebuah komentar agar lebih semangat membuat sebuah artikel.

Ok mungkin segitu saja dari saya, abapila ada tutur kata saya yang kurang berkenan di hati para pembaca mohon maafkan saya. Terima Kasih

- Segalacoding

Denny S

Saya senang dengan namanya dunia teknologi. Maka dari itu saya masih ingin belajar tentang pemrograman berbasis web agar ilmu saya menjadi bertambah.
Terima Kasih

Segala Coding

Cara membuat kotak menggunakan div pada CSS

Denny S

Artikel Terkait