Belajar Element Tag Html Div

Tanggal : 19 Aug 2018, Category : HTML, Create By : admin

Div adalah sebuah element box atau kotak yang banyak digunakan di dalam pemprograman html guna menampung  beberapa element menjadi satu kesatuan atau satu kelompok. Pengunaan div dalam pemprograman html biasanya digunakan untuk mempermudah aplikasi penggunaan style css yang kemudian di beri atribut seperti style, class, id dan lain sebagainya.

Pengunaan Tag Div Pada HTML

<div>
 <p>Belajar Element Tag HTML DIV</p>
</div>

Dalam pembuatan tag div tidak membutuhkan element lainya, hanya di dalam tag div tinggal memasukan dalam satu kesatuan tag div tersebut. Kemudian Tag html lainya yang ada di dalam tag element div akan menjadi satu kelompok. Jita blok div pembuka kita memberi sebuat atribut style maka secara otomatis tag html lain yang ada di dalam blok div tersebut akan mengikuti style dari blok div tersebut. Berikut contohnya.

<div>
 <p>Belajar Element Tag HTML DIV</p>
</div>
 
<div style="color:#F00">
 <p>Belajar Element Tag HTML DIV</p>
 <p>Memberi Style dalam div</p>
</div>  

Dari Script di atas ada dua pengelompokan div, yang pertama kelompok tidak memiliki style dan kedua memilik style, dengan sript yang kedua maka tag html di dalam blok div, akan mengikuti style dari blok div. jika di jalankan di browser maka output dari script di atas sebagai berikut.

Begitu pula jika anda dalam penggunaan style div menggunakan atribut class maupun id pengelompokan akan lebih mudah di bandingkan dengan langsung menggunakan style di div, akan tetapi kami menyrankan dalam pengelompokan div lebih fleksibel dengan menggunakan atribut class berikut contohnya

<!DOCTYPE html>
 <html>
 <head>
   <title>Belajar Element Tag HTML DIV</title>
 </head>
 <style>
   .classsatu {
     color:#0F0;
     float:left; 
     margin:100px;
   }
   #idsatu {
     color:#03F;
     float:right;
     margin:100px;
   }
 </style>
 <body>
 <div id="idsatu">
   <p>Penggunaan id tag pertama</p>
 </div>
 <div class="classsatu">
   <p>Penggunaan class tag pertama</p>
 </div> 
 
 <div id="idsatu">
   <p>Penggunaan id tag kedua</p>
 </div>
 <div class="classsatu">
   <p>Penggunaan class tag kedua</p>
 </div> 
 </body>
</html>

Dari script di atas akan membuat dua kelompok yaitu pengempokan dengan mengguakan class dan id, maka outputnya sebagai berikut

Keyword:
  • belajar element tag html div
  • tag div html
  • elemant div html
  • element div
  • contoh penggunaan div
  • div html
  • html div
  • membuat div
  • apa itu div
  • html div

Artikel Lain

Menambah Repositori Centos 7

Date : 08 Oct 2018, Category : Server, Create By : admin

Repositori dalam Linux adalah kumpulan dari beberapa paket - paket sistem operasi linux yang di gunakan untuk  menunjang dan membantu kinerja dari sebuah aplikasi atau program yang telah di instal .....

What Is Html And How To Use It

Date : 13 Feb 2023, Category : HTML, Create By : admin

HTML (Hypertext Markup Language) is a markup language used to create the structure and content of web pages. It provides a way to describe the structure of a web page .....

Operator Php

Date : 17 Oct 2018, Category : Tutorial, Create By : admin

Operator pastinya tidak asing karena dari kita belajar di kelas 1 sekolah dasar kita sudah di ajari mengenai operator untuk perhitungan angka, di dalam bahasa pemprograman php operator yang di .....