Artikel Terbaru

2 Jenis Utama Rasa Percaya dalam Soft Skills Bisnis dan Pekerjaan

Bayangkan jika seseorang menyebutkan kata pebisnis, jika mendengar kata tersebut, sebagian besar orang mungkin akan membayangkan seseorang dengan sebuah setelan jas yang rapi, yang selalu berangkat kerja pada pukul 7.00 hingga 8.00, atau mungkin juga tentang seseorang yang lain seperti agen periklanan yang menjual produk tertentu melalui YouTube, atau bisa juga seseorang yang terlihat sama seperti anda, atau mungkin juga tidak. Tapi, jika dipahami secara umum, pada dasarnya semua orang adalah pebisnis dalam setiap urusan bisnisnya masing-masing.

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, so please be patient :D

Hot Artikel!!!

6 Contoh Program Method Overloading pada Java

Enkapsulasi pada Java

4 Tipe Utama Acces Modifier pada Java