Assalamualaikum wr.wb sobat programmer. Saya akan memberikan sebuah materi yang saya dapatkan untuk dibagikan kepada kalian semua. Materi kali ini kita akan mengenal generic elemen dan membuat Div dan Span pada HTML.
Generic elemen
Sebagai sebuah wadah yang murni, elemen <div> tidak merepresentasikan apapun. Elemen ini lebih sering digunakan untuk mengelompokkan sebuah konten sehingga dapat memudahkan styling dengan menggunakan atribut class atau id.
Untuk kode sederhana penerapannya seperti berikut ini :
Generic elemen
Setelah mengenal beberapa elemen yang ada, bagaimana jika tidak terdapat elemen sesuai yang mampu menggambarkan konten kita? Dalam dunia nyata, jenis informasi sangat beragam dan mungkin tidak semua semantik elemen yang kalian ketahui dapat menggambarkan jenis informasinya. Untungnya, HTML menyediakan dua tipe elemen umum (generic element) yang bisa kita kustomisasi untuk menggambarkan konten kita dengan tepat.
Terdapat dua generic elemen yang dapat kita manfaatkan.
A. Div
Yang pertama elemen <div>, elemen ini merupakan sebuah wadah (container) yang bersifat umum untuk menampung beberapa konten. Elemen ini tidak akan memberikan efek apapun pada konten atau layout sebelum menerapkan sebuah style menggunakan CSS.Sebagai sebuah wadah yang murni, elemen <div> tidak merepresentasikan apapun. Elemen ini lebih sering digunakan untuk mengelompokkan sebuah konten sehingga dapat memudahkan styling dengan menggunakan atribut class atau id.
Untuk kode sederhana penerapannya seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Div Element</title>
<style>
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
</style>
</head>
<body>
<div class="shadowbox">
<p>IT Programmer Tegal </p>
</div>
</body>
</html>
<html>
<head>
<title>Div Element</title>
<style>
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
</style>
</head>
<body>
<div class="shadowbox">
<p>IT Programmer Tegal </p>
</div>
</body>
</html>
Dari kode diatas, maka akan tampil di browser seperti ini :
Nah untuk <div> jika tidak digabung dengan css maka hasilnya seperti paragraf biasa.
B. Span
Yang kedua elemen <span>, elemen ini memberikan manfaat yang sama seperti <div>, bedanya elemen ini digunakan sebagai phrase elements dan tidak terdapat line breaksketika menggunakannya. Sederhananya, <span> merupakan sebuah <div> yang digunakan dalam sebuah baris teks yang dapat diwadahi oleh paragraf, list, headingatau lainnya.
Mari kita ambil contoh. Tidak ada elemen pada inline element yang memiliki arti untuk menampung sebuah informasi telepon. Maka dari itu, tiap item pada nomor telepon bisa ditampung dalam elemen <span> dan diklasifikasikan (menggunakan atribut class) dengan nilai “Tempattinggal”.
Dengan menggunakan elemen <span>, kita dapat menentukan sebuah styling pada teks tersebut.
Untuk kodenya seperti berikut ini. Saya ambil contoh yang sederhana saja :
<style>
.Tempattinggal {
font-weight: bold;
}
</style>
<ul>
<li>keyro: <span class="Tempattinggal">Mexico</span></li>
<li>Bambang: <span class="Tempattinggal">Sumatra</span></li>
<li>zein: <span class="Tempattinggal">Arab</span></li>
</ul>
.Tempattinggal {
font-weight: bold;
}
</style>
<ul>
<li>keyro: <span class="Tempattinggal">Mexico</span></li>
<li>Bambang: <span class="Tempattinggal">Sumatra</span></li>
<li>zein: <span class="Tempattinggal">Arab</span></li>
</ul>
Dari kode diatas maka akan tampil dibrowser seperti dibawah ini :
Anda bisa ubah kodenya sesuai dengan keinginan anda sendiri. Jangan takut mencoba jika ingin mendapatkan hasil yang maksimal.
Sekian materi yang dapat saya sampaikan. Semoga bermanfaat.
Wassalamualaikum wr.wb
0 Comments