Membuat Teks Menjorok Menggunakan Tag Div HTML
 |
| Ilustrasi Tag Div HTML |
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.
<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>
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.
<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>
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.
<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>
- 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.
<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;
}
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>
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.
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.
<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>
- 3 Atribut Utama Penggunaan Tag Form pada HTML [klik]
- 10 Atribuat Utama Penggunaan Tag Frame pada HTML [klik]
- 5 Atribut Utama pada Penggunaan Tag Frameset HTML [klik]
- 2 Contoh Cara Mengatur Ukuran Huruf Menggunakan Heading HTML [klik]
- 3 Contoh Program Penggunaan Tag Head pada HTML [klik]
- Cara Mudah Mengatur Heading Menggunakan Tag Hgroup HTML [klik]
- 2 Contoh Program Tujuan Penggunaan Tag HTML [klik]
5 komentar untuk "Membuat Teks Menjorok Menggunakan Tag Div HTML"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Apa yang dimaksud dengan tag div pada html?
BalasHapusTag 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.
HapusTag div merupakan wadah tingkat blok umum yang digunakan untuk menampung elemen lain pada html.
HapusApakah div merupakan salah satu tag yang paling penting pada html?
BalasHapusTag 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