Cara Membuat Kartu Identitas Dengan Menggunakan HTML

Membuat Kartu Identitas Keren di HTML - Hai sobat, pada kesempatan ini saya akan memposting tentang cara membuat kartu identitas yang menarik di HTML. HTML merupakan salah satu bahasa pemrograman yang biasaanya digunakan untuk website. Untuk pembuatannya sendiri cukup mudah karena hanya perlu menggunakan HTML Editor yang sudah tersedia di blog ini.


Membuat kartu identitas di HTML
Membuat kartu identitas di HTML


Daftar Isi :

1. Alat dan Bahan

2. Cara Pembuatan

3. Cara Pengujian


Alat dan Bahan


Alat dan bahan yang digunakan adalah sebagai berikut :
1. HTML Editor


Cara Pembuatan


1. Buka halaman HTML Editor disini.

2. Salin skrip dibawah ini ke HTML Editor.


<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">KARTU IDENTITAS</h2>
<div class="card">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi7EqJRXy9FTPM0jy5wCug5kTg2RGtrOB1tRYLAIqCte5t0BJME18-l2b4Txveo5H3i4wLDavzIf1DqAJZjzhBCND_BXEVg8VupJudz20mFAVtmloYxoD57wVGWm7zfSVMnbjWwdZoI3jcB51fx99qb6SYOsX-9TBB7d2KbmmMUeBOglC9Jv4QRJ7u2" alt="Yosa" style="width:100%">
<h1>Yosa AP</h1>
<p class="title">Guru Produktif TKJ</p>
<p>SMK Tunas Bangsa Tawangsari</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-whatsapp"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p><button>Kontak</button></p>
</div>
</body>
</html>

Catatan : Yosa AP bisa diganti menjadi nama Anda - Guru Produktif bisa diganti menjadi jabatan Anda - SMK Tunas Bangsa Tawangsari bisa diganti menjadi tempat kerja Anda  


Baca Juga : Cara Membuat Flip Card Menggunakan HTML


Cara Pengujian Code Label di HTML Editor


Untuk pengujiannya mudah saja yaitu tinggal klik "Run" pada HTML Editor maka akan secara otomatis hasilnya muncul di kolom bawah. Apabila berhasil maka tampilannya akan seperti dibawah ini :


Hasil pengujian kartu identitas di HTML
Hasil pengujian kartu identitas di HTML

Sekian tutorial tentang cara membuat kartu identitas di HTML. Semoga sedikit ilmu ini bermanfaat. Selamat mencoba dan sampai jumpa di tutorial berikutnya. Terimakasih telah berkunjung.


Baca Juga :
Guru, Desainer, Programmer

1 komentar

  1. Masyaallaah. Keren banget. Kalau anak-anak TKJ diajari seperti ini pasti seneng banget, pak. 👍