Studi Informatika

Panduan Pembelajaran Ilmu Teknologi & Komputer

Tuesday, April 10, 2018

Tutorial Membuat Biodata Keren Dengan HTML

Dalam membuat biodata diri dengan menggunakan coding HTML hal pertama yang harus dipersiapkan.
=> Pastikan sudah install notepad++ versi terbaru
=> Pastikan sudah install xampp versi terbaru

Jika sudah install keduanya buka xampp dan tekan star pada Apache dan MySql, sekarang yang pasti kita gunakan adalah Apache, jika sudah ada tanda warna hijau maka sudah aktif seperti gambar dibawah:


Kemudian selanjutnya buka notepad++ kemudian copy kan saja coding dibawah ini:

<html>
<head>
<title> web profile </title>
<body background="backgr.png">
<br>
<br>
<h1  align="center"> <p style="color:rgb(100, 0, 0);";"> Bioadata Saya</p> </h1>
<center><img src="saya.png"style="width:150px;height:150px;"></center>
<br>
<center>
 <table>
 <tr>
 <td style="border:2px solid DodgerBlue;"> <p style="color:hightseagreen;">Nama :</p></td>
 <td style="border:2px solid DodgerBlue;">  Andri Yusuf</td>
 </tr>
  <tr>
 <td style="border:2px solid DodgerBlue;">Npm :</td>
 <td style="border:2px solid DodgerBlue;"> 150210244</td>
 </tr>
 <tr>
 <td style="border:2px solid DodgerBlue;">Tempat/Tanggal Lahir :</td>
 <td style="border:2px solid DodgerBlue;">  Tembilahan, 16 Juli 1996 </td>
 </tr>
 <tr>
 <td style="border:2px solid DodgerBlue;">Alamat :</td>
 <td style="border:2px solid DodgerBlue;">  Tanjung Uma, Batam </td>
 </tr>
 <tr>
 <td style="border:2px solid DodgerBlue;">Hobi :</td>
 <td style="border:2px solid DodgerBlue;">  Olahraga, Belajar Agama </td>
 </tr>
 <tr>
 <td style="border:2px solid DodgerBlue;">Status :</td>
 <td style="border:2px solid DodgerBlue;">  Mahasiswa </td>
 </tr>
 <tr>
 </center>
</body>
</head>
</html>


Paste kan coding diatas ke notepad++ seperti gambar di bawah :


Setelah dicopy save notepad ++ nya di tempat kalian install xampp. Biasanya di local disk (C:) => xampp => htdocs => Kemudian buat folder baru di dalam htdocs, dimana folder tersebut nanti yang akan kita gunakan untuk memanggil localhost/namafolderyangkitabuat.

Jika sudah di save lansung saja buka browser dan ketikkan "localhost/namafolder" saya membuat nama foldernya "tugas" maka yang saya ketikkan di browser adalah "localhost/tugas" kemudian enter maka hasilnya seperti gambar dibawah :



Itulah cara membuat biodata diri yang lebih terlihat menarik, sebenarnya ini masih sederhana dan mudah untuk di ikutin terutama bagi pemula.

Jika ada yang ingin bertanya cara mengedit coding untuk merubah nama,foto,background dll silahkan saja tanyakan di komentar.

Terimakasih semoga bermafaat....



Tuesday, April 10, 2018 April 10, 2018 - tanpa komentar

No comments:

Post a Comment