Apa yang di maksud dengan tanda, jadi seperti ini, pernahkan teman-teman memberikan tanda pada suatu buku, dimana biasannya saya memberikan tanda pada suatu kata yang menurut saya itu penting, dan dengan tag mark kita bisa memberikan efek seperti itu, sudah bisa membayangkan ya, jadi tulisan itu akan ada efek seperti ada backgroundnya, biasanya warnanya kuning pudar, oke tetapi disini kita akan belajar cara membuat tanda pada teks selain menggunakan tag mark. oke jangan kemana-mana simak terus ya teman-teman.
Disini dengan judul cara membuat tanda pada teks selain menggunakan tag mark, saya masih menggunakan template yang sama ya, seperti sebelumnya biar menghemat waktu, oke lalu selain dengan menggunakan tag mark dengan cara apa ? di bootstrap 4 terdapat tag yang fungsinya hampir sama denga tag mark, tapi warnannya lebih tebal kehitaman ya teman-teman, dengna tag <kbd>, kita bisa membuat fungsi seperti tag mark, lagi-lagi di bootstrap 4 membawa tag yang hampir sering di pakai ya, oke langsung saja bagaimana cara membuatanya:
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tanda Pada Teks Selain Menggunakan Tag Mark</title>
<link rel="shortcut icon" type="image/x-icon" href="oktober/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<-e-style type="text/css">
*{padding: 0; margin: 0}
body{
background-color: #6EDAF8;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding:20px 0;
font-size: 30px;
}
.item2 {
grid-row-end:span 3;
}
.container{
width: 800px;
margin: auto;
background: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<h1>Cara Membuat Tanda Pada Teks Selain Menggunakan Tag Mark</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
<p>Jadi jika kita lihat di atas saya membuat contoh ketika kita tidak menggunakan colspan dan rowspan untuk menggabungkan sebuah kolom dan baris, tapi menggunakan grid row end</p>
<!-- FOKUS KESINI -->
<p>gunakan <kbd>ctrl + p</kbd> untuk mencetak hasilnya atau kita <mark>Print</mark> contoh di atas.</p>
</div>
</body>
</html>
Jika kita lihat hampir sama ya caranya bahwa tag kbd, adalah tag yang berpasangan, jadi di dalam situ kita bisa memberikan tulisan didalamnya dimana tulisan itu akan menimbulkan efek seperti ada background hitam, oke seperti apa hasilnya seperti inilah:
Oke bisa dilihat ya, efek yang diberikan pada tag kbd tebal, dan disampingnya mark agak sedikit orange pudar ya, oke seperti ini lah hasil dari tag kbd atau cara membuat tanda pada teks selain menggunakan tag mark, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.