Contoh Script HTML Biodata Keren
Contoh Script HTML Biodata Keren – Halo selamat datang di blog helmirfansah.com, Pada kali ini saya ingin membagikan ke kalian semua yaitu tentang skrip HTML untuk biodata keren. Pasti kalian mengunjungi website saya ini karena diberikan tugas oleh dosen atau guru webprogramming kalian untuk membuat desain halaman statis dari HTML dan membuat data diri dari HTML tersebut.
Pada contoh HTML saya ini merupakan tugas juga yang diberikan oleh dosen saya haha, Mungkin saya tidak perlu menjelaskan mengenai apa itu HTML ya (atau nanti saya buat artikel yang berbeda) kali ini kita akan fokus pada cara pembuatan script HTML Biodata sederhana ini.
Pertama-tama kita siapkan bahan yang diperlukan yaitu, Laptop/Komputer dan Aplikasi editor text untuk HTML misalnya Notepad++ atau semacamnya kalian pasti paham lah ya. Tanpa perlu berlama-lama lagi mari kita lakukan cara membuat HTML Biodata keren ini:
Contoh Script HTML Biodata Keren
Diatas merupakan hasil akhir dari script HTML yang saya buat, Ya saya tau sangat jelek dan simple tapi mungkin bisa membantu kalian bagi yang belum bisa membuat. Untuk script lengkapnya kalian copy saja kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>My Biodata</title>
<style>
.wrap{
background-color:rgba(255,255,255,0.7);
width: 800px;
color:black;
margin: 20px auto;
padding:15px;
}
</style>
</head>
<body style="background: url(URL-GAMBAR-BACKGROUND.jpg);background-size:cover;background-attachment: fixed;">
<div class="wrap">
<h1 class="class" align="center">BIODATA DIRI</h1><hr/ align="center" width="25%" style="border-top: 3px double #8c8b8b;">
<table>
<tr><td rowspan="10" width="100px">
<img src="URL-FOTOMU.jpg" width="200px" style="display: block;border-radius: 50%;border-color:white;margin-right:30px" border="2px" ></td></tr>
<tr><td><b>Nama</b></td><td>:</td> <td>Helmi Irfansah</td></tr>
<tr><td><b>NIM</b></td><td>:</td> <td>57</td></tr>
<tr><td><b>Alamat</b></td><td>:</td> <td>RUMAH</td></tr>
<tr><td><b>TTL</b></td><td>:</td> <td>Kebumen, 02 Juli 1999</td></tr>
<tr><td><b>Email</b></td><td>:</td> <td>[email protected]</td></tr>
<tr><td><b>Hobi</b></td><td>:</td> <td>Bermain Game</td></tr>
<tr><td><b>Cita-cita</b></td><td>:</td> <td>Webmaster</td></tr></table>
<table>
<h3>Riwayat Pendidikan</h3>
<tr><td><b>SD</b></td><td>:</td> <td>SDN 1 Terserah</td></tr>
<tr><td><b>SMP</b></td><td>:</td> <td>SMPN 1 Terserah</td></tr>
<tr><td><b>SMK</b></td><td>:</td> <td>SMKN 1 Terserah</td></tr></table>
<div>
</body>
</html>Apakah ingin dijelaskan terlebih dahulu mengenai script diatas? Oke akan saya jelaskan
Penjelasan Script HTML Biodata
<head>
<title>My Biodata</title>
<style>
.wrap{
background-color:rgba(255,255,255,0.7);
width: 800px;
color:black;
margin: 20px auto;
padding:15px;
}
</style>
</head>Pertama kita akan bahas kode yang terdapat pada tag <head> disitu tertera tag <title> yang digunakan untuk mendeklarasikan judul file .html tersebut dan pastinya akan muncul pada tab browser. Selanjutnya ada tag <style> digunakan untuk menyisipkan element style atau css yang berisi .wrap dimana nanti akan kita gunakan untuk tag <div> pada bagian <body>.
<body style="background: url(URL-GAMBAR-BACKGROUND.jpg);background-size:cover;background-attachment: fixed;"> <div class="wrap"> <h1 class="class" align="center">BIODATA DIRI</h1><hr/ align="center" width="25%" style="border-top: 3px double #8c8b8b;"> <table> <tr><td rowspan="10" width="100px"> <img src="URL-FOTOMU.jpg" width="200px" style="display: block;border-radius: 50%;border-color:white;margin-right:30px" border="2px" ></td></tr> <tr><td><b>Nama</b></td><td>:</td> <td>Helmi Irfansah</td></tr> <tr><td><b>NIM</b></td><td>:</td> <td>57</td></tr> <tr><td><b>Alamat</b></td><td>:</td> <td>RUMAH</td></tr> <tr><td><b>TTL</b></td><td>:</td> <td>Kebumen, 02 Juli 1999</td></tr> <tr><td><b>Email</b></td><td>:</td> <td>[email protected]</td></tr> <tr><td><b>Hobi</b></td><td>:</td> <td>Bermain Game</td></tr> <tr><td><b>Cita-cita</b></td><td>:</td> <td>Webmaster</td></tr></table> <table> <h3>Riwayat Pendidikan</h3> <tr><td><b>SD</b></td><td>:</td> <td>SDN 1 Terserah</td></tr> <tr><td><b>SMP</b></td><td>:</td> <td>SMPN 1 Terserah</td></tr> <tr><td><b>SMK</b></td><td>:</td> <td>SMKN 1 Terserah</td></tr></table> <div> </body>
Selanjutnya ialah tag <body> dimana akan ada isi dari halaman html tersebut, Disini pertama saya tambahkan tag <body> dengan background jika tidak maka hapus saja. Selanjutnya saya menambahkan tag <div> yang sudah disisipi oleh css wrap tadi. Nah selanjutnya didalam div kita isi dengan konten yang ingin dibuat, Kita disini membuat konten biodata menggunakan table maka mengisinya seperti diatas, Tetapi anda bisa mengkreasikan sesuai dengan kreatifitas kalian sendiri ya.
Mungkin itu saja penjelasan saya mengenai Contoh script HTML Biodata keren kali ini, Jika terdapat kesalahan pada informasi atau penulisan mohon untuk dimaafkan. Namun apabila artikel ini bermanfaat untuk kalian tolong bagikan kepada temanmu yang mungkin membutuhkan, Akhir kata dari saya terima kasih sudah berkunjung.
