09 HTML – Tag DIV dan SPAN
Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe sama. Fungsinya bisa juga disamakan dengan tag <P>. Saat ini Penggunaan Tag Div sering digunakan para programmer website untuk membuat sebuah template website dengan menggabungkan perintah div dan perintah CSS. perhatikan pada contoh berikut ini :
Contoh 1
<!DOCTYPE html> <html> <head> <title>Belajar DIV</title> </head> <body> <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html>
Untuk lihat hasil, silahkan jalankan CodePen dibawah ini
See the Pen 09 HTML – Div dan Span 1 by Ferdian Rahabista (@frsystem) on CodePen.0
Contoh 2
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div style="background-color: #4CAF50;color: white;padding: 15px;">
<h1>Header Website</h1>
</div>
<div style="float: left;padding: 15px; width: 25%; background: #f1f1f1;">
<ul>
<li>Beranda</li>
<li>Gallery Foto</li>
<li>Download</li>
<li>Hubungi Kami</li>
</ul>
</div>
<div style="float: left;padding: 15px; width: 75%; background: #fff;">
<h1>Belajar Templating Menggunakan DIV HTML</h1>
<p>pada templating kali ini kita masih menggunakan HTML namun dibantu dengan atribut style, dan membuat tampilan menjadi seperti web sungguhan, untuk mendapatkan hasil yang lebih baik, kedepannya kita akan belajar HTML dan CSS</p>
</div>
<div style="clear:both;display: block;"></div>
<div style="background-color: #4CAF50;color: white;padding: 15px; text-align:center;">
<p>Supperted by FR-ACADEMY. Copyright © 2019. All Right Reserved</p>
</div>
</body>
</html>
Untuk melihat Hasilnya silahkan klik Run dibawah ini
See the Pen 09 HTML – DIV dan SPAN 2 by Ferdian Rahabista (@frsystem) on CodePen.0
Contoh 3 :
<!DOCTYPE html> <html> <head> <title>Kita Belajar DIV dan SPAN</title> </head> <body> <div style="padding:15px; border:red 1px solid;"> Senang Belajar di <span style="border:blue 1px solid; padding:5px; color:blue; font-weight:bold;">FR ACADEMY</span> </div> <br> <b>Catatan:</b><br> Border Berwarna merah, kita gunakan Tag DIV sedangkan Border Biru dan Text berwarna Biru kita gunakan Tag SPAN </body> </html>
dan hasilnya bisa kita lihat dibawah ini
See the Pen 09 HTML – DIV dan SPAN 3 by Ferdian Rahabista (@frsystem) on CodePen.0
jika kita hanya murni menggunakan HTML maka tampilan website yang akan kita bangun akan terasa kurang, perintah diatas terlihat lebih menarik karena beberapa bagian kita sedikit sisipkan perintah CSS pada setiap Atribut Style, namun kedepannya kita akan lebih banyak belajar HTML dan CSS untuk mendapatkan tampilan Web yang Responsive dan Mengikuti trend saat ini.
Daftar ISI Dasar-Dasar Pemrograman WEB
- 01 HTML – Pendahuluan
- 02 HTML – Software Pendukung
- 03 HTML – Dasar-dasar HTML
- 04 HTML – Daftar Lengkap TAG HTML
- 05 HTML – Tag < br > BreakRow
- 06 HTML – Tag < p > Paragraph
- 07 HTML – Tag Heading
- 08 HTML – Tag Iframe
- 09 HTML – Tag DIV dan SPAN
