Artikel Terbaru

Cara Mudah Menggunakan Atribut OnDradEnd pada Elemen HTML

Atribut event ondragend merupakan salah satu atribut pada html yang akan bekerja ketika user telah selesai melakukan drag pada elemen html. Fitur drag and drop merupakan fitur yang umum pada html5. Setiap elemen pada html dapat dilakukan drag dengan menggunakan atribut draggable pada html5.

6 Contoh Cara Membuat Teks Menjorok Menggunakan Tag Div HTML

Tag div dikenal juga dengan istilah tag divisi pada HTML. Tag div digunakan untuk membuat pembagian konten pada halaman website seperti teks, gambar, headerfooter, bilah navigasi, dan lain sebagainya. Tag div memiliki tag pembukaan dan tag penutupan. Tag div adalah tag yang paling berguna dalam pengembangan website karena membantu dalam memisahkan data pada halaman website dan membuat pembagian tertentu untuk data ataupun untuk fungsi tertentu.

  • Tag div adalah tag level blog.
  • Tag div adalah generic container tag.
  • Tag div digunakan untuk mengelompokkan berbagai tag HTML sehingga bagiannya dapat dibuat dan diterapkan beserta style yang juga telah diatur pada bagian tersebut.

Seperti yang diketahui bahwa tag Div adalah tag level blog, dimana tag tersebut dapat ditampilkan pada setiap baris baru pada dokumen html, dan bukan pada baris yang sama.

Contoh 1:

<html>

 

<head>

 

<title>

Tag Div

</title>

 

<style type=text/css>

p

{

background-color:gray;

margin: 10px;}

 

div

{

color: white;

background-color: 009900;

margin: 2px;

font-size: 25px;}

</style>

 

</head>

 

<body>

<div > tag div </div>

<div > tag div </div>

<div > tag div </div>

<div > tag div </div>

</body>

 

</html>

Output:
tag div
tag div
tag div
tag div

Tag div digunakan untuk mengelompokkn elemen-elemen HTML secara bersama-sama dan diterapkan style CSS beserta tata letak didalamnya. Perhatikan contoh berikut ini untuk penggunaan tag div yang menerapkan style CSS untuk setiap bagian tag.

Contoh 2:

<html>

 

<head>

 

<title>

Tag div

</title>

 

<style type=text/css>

p{

color: white;

background-color: 009900;

width: 400px;}

 

h1

{

color: white;

background-color: 009900;

width: 400px;}

 

h2

{

color: white;

background-color: 009900;

width: 400px;}

</style>

 

</head>

 

<body>

<h1>Toko Mang Ujang</h1>

<p>Selamat datang di Toko Mang Ujang, disini disediakan granat, senjata laras panjang, sianida, dan berbagai perlengkapan perang lainnya yang sedang populer saat ini.

</p>

 

<h2>Warung Makan Bu Santi</h2>

<p>Warung makan Bu Santi adalah warung makan yang menyediakan berbagai aneka penyet, mulai dari penyet tikur bakar, penyet ati kodok, penyet titi* buaya, dan lain sebagainya.

</p>

</body>

 

</html>

Output:

Toko Mang Ujang

Selamat datang di Toko Mang Ujang, disini disediakan granat, senjata laras panjang, sianida, dan berbagai perlengkapan perang lainnya yang sedang populer saat ini.

Warung Makan Bu Santi

Warung makan Bu Santi adalah warung makan yang menyediakan berbagai aneka penyet, mulai dari penyet tikur bakar, penyet ati kodok, penyet titi* buaya, dan lain sebagainya.


Menciptakan Web Layout Menggunakan Tag Div
Tag div adala tag container yang didalamnya dapat ditempatkan lebih dari satu elemen HTML dan dapat dikelompokkan bersamaan dengan penerapan kode CSS. Tag div dapat digunakan untuk membuat tata letak halaman website. Contoh berikut ini akan menunjukkan cara pembuatan halaman website pada dokumen HTML dalam bentuk komplek untuk dilakukan modifikasi tata letak yang sifatnya fleksibel berdasarkan blok-blok tertentu.

Contoh 3:

<html>

 

<head>

 

<title>

Tag Div

</title>

 

<style type=text/css>

.leftdiv

{

float: left;}

 

.middlediv

{

float: left;

background-color:gray}

 

.rightdiv

{

float: left;}

 

div{

padding : 1%;

color: white;

background-color: 009900;

width: 30%;

border: solid black;}

</style>

 

</head>

 

<body>

<div class="leftdiv">

<h1>Toko Mang Ujang</h1>

<p>Selamat datang di Toko Mang Ujang, disini disediakan granat, senjata laras panjang, sianida, dan berbagai perlengkapan perang lainnya yang sedang populer saat ini.

</p>

 

<h2>Warung Makan Bu Santi</h2>

<p>Warung makan Bu Santi adalah warung makan yang menyediakan berbagai aneka penyet, mulai dari penyet tikur bakar, penyet ati kodok, penyet titi* buaya, dan lain sebagainya.

</p>

</div>

 

 

 

 

<div class="middlediv">

<h1>Lebaran</h1>

<p>Suatu masa, dunia sedang dilanda kedukaan besar. Putra mahkota negara api tiba-tiba masuk Islam, padahal negara Api sudah menyatakan bahwa kerajaannya tidak boleh memiliki agama dan hanya makan satu piring setiap jam.

</p>

 

<h2>Yahudi</h2>

<p>Jerman merupakan negara yang terkenal dengan efisiensi dalam segala aspek kehidupannya, tidak hanya dari segi pekerjaan, juga dalam hal pemilihan keturunan, negara Jerman hanya memilih kualitas-kualitas terbaik baik para induknya.

</p>

</div>

 

 

 

 

<div class="rightdiv">

<h1>Zoka</h1>

<p>Zoka adalah avatar ke 20 yang dilahirkan dari keluarga bangsawan Inggris. Sehari-hari Zoka hanya melakukan apa yang ingin dia sukai, selain makan, tidur, dan mengincar perawan-perawan yang ada dikampungnya, sesekali juga perjaga jika dia sedang sangat bahagia.

</p>

 

<h2>Tusbol</h2>

<p>Tusbol adalah permainan yang berasal dari daerah Utara Pulau Jawa. Tusbol merupakan permainan yang mengandalkan ketangkasan fisik serta daya tahan mental yang sangat luar biasa. Para pemainnya dipilih berdasarkan kekuatan dan warna kulit yang mereka miliki.

</p>

</div>

</body>

 

</html>



Dengan menggunakan tag div maka dapat dilakukan penutupan celah antara tag heading dan tag paragraf. Juga, Dapat pula menggunakan kode CSS untuk setiap bagian divisi pada dokumen HTML dengan menggunakan metode berikut ini:

satu, Menggunakan Class, Dapat dilakukan penggunaan class pada div tertentu baik dalam CSS internal ataupun CSS eksternal.
  • Pada CSS Internal: perlu dilakukan pendefinisian Class pada bagian <head> HTML dalam elemen <style>.
  • Pada CSS Eksternal: perlu diciptakan file .css terpisah dan memasukkan ke dalam kode HTML pada bagian <head> menggunakan elemen <link>, dimana nama class harus berbeda antara satu dengan lainnya, jika tidak, maka CSS yang digunakan untuk file HTML tersebut dapat memengaruhi divisi lainnya dalam dokumen HTML tersebut.
Contoh 4:

<html>

 

<head>

 

<link 

rel="stylesheet" 

href="color.css">

 

<title>

Tag Div

</title>

 

</head>

 

<body>

 

<center>

<!--opening tag -->

<div class="color">

<caption>

<h1>

Virgin Hunter

</h1>

</caption>

 

<h1>

Inline CSS tidak digunakan pada method ini.

</h1>

 

</div>

<!--closing tag -->

</center>

 

</body>

 

</html>


  • File CSS untuk warna clss dengan nama file color.css.

.color

{

height:400px;

width:600px;

border:1px solid;

background-color: 009900;

}


Dalam contoh tersebut, digunakan class untuk div tertentu pada dokumen html dengan nama file color.css yang merupakan properti dari div. File ini adalah file terpisah yang akan ditautkan oleh tag link ke dalam kode HTML yang ingin dituju.

dua, Menggunakan inline CSS: Dapat pula dilakukan dengan cara lain dalam menyertakan kode CSS pada dokumen html untuk tag div yang tidak membutuhkan class, dimana tag div pada HTML digunakan sebagai tag penampung dari tag lainnya.

Contoh :

<html>

 

<head>

 

<title>

Tag Div

</title>

 

</head>

 

<body>

 

<center>

<!--opening tag -->

<div 

style="height:300px; width:500px; color:white;

border:1px solid; background-color: 009900;">

 

<caption>

<h1>Jual Budak</h1>

</caption>

 

<h1>

Inline CSS digunakan pada method ini.

</h1>

 

</div>

<!--closing tag -->

</center>

 

</body>

 

</html>

Dari contoh tersebut diterapkan CSS sebaris pada tag div dengan menggunakan atribut style yang hanya berlaku untuk tag div yang dikenai style tersebut.

Perbedaan Antara Tag Div dan Tag Span
Tag div dan tag span merupakan dua jenis tag umum yang sering digunakan pada dokumen HTML yang digunakan untuk menjalankan fungsionalitas yang berbeda pada kedua jenis tag tersebut. Dimana tag div merupakan elemen level blok, sedangkan tag span merupakan elemen sebaris dari tag div yang digunakan untuk membuat jeda baris dan secara default juga membuat pembagian antara teks yang muncul setelah tag awalan dan tag tag akhiran dari tag div. Tag div juga dalam penggunaannya memiliki fungsi untuk membuat kotak atau wadah terpisah untuk semua elemen yang berada dalam tag tersebut seperti teks, gambar, paragraf, dan lain sebagainya seperti diperlihatkan pada tabel 1.

Tabel 1 Perbedaan antara tag div dan span pada HTML
PropertiesDiv TagSpan Tag
Elements TypesBlock-LevelInline
Space/WidthMengadung seluruh width yang tersediaHanya mengambil width yang dibutuhkan
ExamplesHeadings, Paragraph, formAttribute, image
UsesWeb-layoutcontainer untuk beberapa teks
AttributesNot required,with common css, classNot required,with common css, class

Tag span tidak membuat jeda baris yang mirip dengan tag div. Tag span memungkinkan user untuk memisahkan hal-hal tertentu dari elemen lain terhadap sekitarnya pada halaman dalam baris yang sama.

Contoh:

<html>

 

<head>

 

<title>

Tag Div

</title>

 

<style type=text/css>

p{

background-color:gray;

margin: 10px;}

 

div

{

color: white;

background-color: 009900;

margin: 2px;

font-size: 25px;}

 

span

{

color: black;

background-color: gray;

margin: 5px;

font-size: 25px;}

</style>

 

</head>

 

<body>

<!-- tag div -->

<div > tag div </div>

<div > tag div </div>

<div > tag div </div>

<div > tag div </div>

 

<!-- tag span -->

<span> tag span </span>

<span> tag span </span>

<span> tag span </span>

<span> tag span </span>

</body>

 

</html>

Output:
tag div
tag div
tag div
tag div
tag span tag span tag span tag span

Komentar

  1. Apa yang dimaksud dengan tag div pada html?

    BalasHapus
    Balasan
    1. Tag div merupakan tag html yang digunakan untuk mendefinisikan divisi atau pembagian dalam dokumen HTML. Tag tersebut digunakan sebagai wadah atau container untuk elemen HTML yang disertakan didalamnya yang kemudian ditata dengan menggunakan kode CSS atau dimanipulasi dengan menggunakan JavaScript.

      Hapus
    2. Tag div merupakan wadah tingkat blok umum yang digunakan untuk menampung elemen lain pada html.

      Hapus
  2. Apakah div merupakan salah satu tag yang paling penting pada html?

    BalasHapus
    Balasan
    1. Tag div memiliki peran yang penting dalam pembuatan dokumen html, dengan menggunakan tag tersebut dapat diatur posisi dan perataan pada dokumen html tanpa perlu menggunakan tag table sehingga proses pembuatan dokumen menjadi lebih dinamis.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

Perbedaan Antara int main() dan int main(void) pada Bahasa C

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

Cara Tepat Penulisan void main dan main pada Bahasa C