Cara Membuat Kartu Identitas Dengan Menggunakan HTML

Yosa AP

3/15/2022

---

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

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

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

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.

1 komentar WhatsApp Telegram

Yosa AP

Guru, Desainer, Programmer

Gabung dalam percakapan (1)

1 komentar

Darwoto
16 Maret 2022 pukul 07.48

Profil

Darwoto

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

Lihat profil
Hapus komentar
Masyaallaah. Keren banget. Kalau anak-anak TKJ diajari seperti ini pasti seneng banget, pak. 👍
Balas