Tutorial Membuat Biodata Keren HTML

Tutorial Membuat Biodata Keren HTML

Script HTML Biodata Keren - Tutorial belajar HTML untuk pemula sebenarnya sudah banyak bertebaran secara gratis di internet. Tidak terkecuali saat saya mendapat tugas membuat biodata HTML, contoh-contoh script HTML tentang biodata diri sudah ready untuk digunakan.
tutorial membuat html biodata keren sekali
Contoh script HTML membuat biodata keren - pixabay

Cukup copy paste, jadi deh biodata kerennya. Kamu cukup ganti identitas Admin Soksimon.com dengan biodatamu sendiri. Berikut contoh script dan cara membuat biodata keren HTML dengan kode sederhana.

Alat dan Bahan Belajar HTML


Inilah yang menyebabkan saya senang belajar HTML. Tidak membutuhkan perangkat lapto yang berspesifikasi tinggi. Dengan ini, kita sudah bisa belajar desain web sederhana dengan HTML.

1. Notepad

Sebenarnya banyak aplikasi editor teks yang dapat digunakan untuk coding script HTML, seperti Notepad++, Sublime Text dan lain-lain. Tapi dalam tutorial belajar HTML sederhana, saya hanya menggunakan notepad bawaan windows.

Cara buka Notepad di windows 7 dan windows 10

Tekan Tombol Windows + R > maka akan muncul kotak Run, langsung saja ketik Notepad dan klik ok > Notepad sudah terbuka dan siap digunakan.

2. Aplikasi web browser

Saya lebih suka menggunakan browser Chorme. So, saya sarankan pakai itu aja.

Tutorial Membuat Biodata Keren dengan HTML


Setelah alat dan bahan disiapkan, kita langsung saja belajar membuat biodatanya.

1. Buat Folder Baru


Buat folder baru di salah satu partisi hardisk di laptop Bro and sista sekalian.

cara membuat biodata keren HTML
Belajar HTML dasar membuat biodata keren
 Seperti contoh gambar di atas, buat 2 dokumen baru dengan notepad. Ingat untuk menyimpan menggunakan save as.

Dokumen yang pertama buat dengan nama page1.html
Dokumen yang kedua dengan nama page2.html

Save as type ubah menjadi all files.

2. Copy 2 gambar ke folder yang sama


Gambar pertama beri nama 1.jpg
Gambar kedua beri nama 2.jpg


3. Copas dan Edit Script HTML



Agar lebih mudah, silahkan copy kode berikut dan pastekan di file HTML page1.html

<html>
<head>
<title>Curriculum Vitae</title>
</head>
<body bgcolor="grey">
<h2 align="center"><font face="algerian" color="yellow" size=7><u>CURRICULUM VITAE</u></font></h2>
<center><table border="7" bgcolor="silver">
<tr><td rowspan="16" style="border:4px solid dodgerblue" bgcolor="black" align="center">.....</td></tr>
<tr>
<td>Nama</td>
<td> : </td>
<td>Weldy Simon</td>
</tr>
<tr>
<td>Alamat</td><td> : </td>
<td>Jln. Pongsimpin</td>
</tr>
<tr>
<td>Tempat, Tanggal Lahir</td><td> : </td>
<td>Malaysia, 13 Februari 1999</td></tr><tr>
<td>Agama</td><td> : </td>
<td>Kristen</td>
</tr>
<tr><th colspan="3" style="border:4px solid dodgerblue" bgcolor="yellow" align="center"><b>Pendidikan</b></th></tr>
<tr>
<td>2006-2011</td><td> : </td>
<td>SDN 049 Lara 4 Mukti Tama</td>
</tr>
<tr>
<td>2011-2014</td><td> : </td>
<td>SMPN 2 Baebunta</td>
</tr>
<tr>
<td>2014-2017</td><td> : </td>
<td>SMAN 3 Baebunta</td>
</tr>
<tr>
<td>2017-Sekarang</td><td> : </td>
<td>Universitas Cokroaminoto Palopo</td>
</tr>
<tr><th colspan="3" style="border:4px solid dodgerblue" bgcolor="yellow" align="center"><b>About Me</b></th></tr>
<tr><th colspan="3" bgcolor="grey"><img src="1.jpg" height="200" width="170""/></th></tr>
<tr>
<td>Asal</td><td> : </td>
<td>Luwu Utara</td>
</tr>
<tr>
<td>Hobi</td><td> : </td>
<td>Menulis, Travelling</td>
</tr>
<tr>
<td>Blog</td><td> : </td>
<td><a href="https://Soksimon.com" target="_blank"><b>https://Soksimon.com</b></a></td>
</tr></table>
</br><button><a href="page2.html"><b>Next</b></a></button></center>
<p align="right"><i>Created by Weldy Simon</i>
<br/><footer><marquee><font face="algerian" color="green" bgcolor="yellow"><i>Copy &copy Weldy Simon 2018</i></font></marquee></footer>
</body</html>

Berikut contoh tampilan script page1.html di  Browser Chorme

gambar Google membuat biodata keren HTML
Contoh script HTML membuat biodata keren
Penjelasan:

Contoh di atas termasuk script HTML sederhana. Beberapa tag HTML yang digunakan:
  • Tag font untuk mengedit jenis font
  • Tag table untuk membuat tabel
* colspan untuk menggabungkan kolom dan rowspan untuk menggabungkan baris tabel dalam HTML.
* Tag tr (Table Row) untuk baris baru tabel dan tag td (Table Data) untuk kolom data.
  • Tag button untuk membuat tombol
  • Tag marquee untuk teks yang running
Tag lainnya merupakan tag yang umum digunakan dalam HTML.
Untuk page2.html, copas script HTML berikut ini ke notepad.

<html>
<head><title>Halaman 2</title></head>
<body bgcolor="grey">
<center>
<font size=25 face="algerian" color="yellow">Motto</font>

<p align="center"><font size=6 face="comic sans MS">"Tidak sesulit yang terpikirkan dan tidak semudah yang dibayangkan."
<p><font size=4 face="comic sans MS">Thank you ^^</font>

<br/><img src="2.jpg" border="5"/>

<br/><font size=4 face="comic sans MS">Salam Tugas!</font>
</font>
<p><button><a href="page1.html"><b>Previous</b></a></button></center>
<p align="right"><i>Created by Weldy Simon</i>
<br/><footer><marquee><font face="algerian" color="green" bgcolor="yellow"><i>Copy &copy Weldy Simon 2018</i></font></marquee></footer>
</body></html>

Berikut contoh tampilan script page2.html di Browser Chorme
Gambar Contoh script html keren biodata diri
Tutorial membuat biodata keren HTML
Penjelasan kode HTML:

Tag yang digunakan juga masih sama. Hanya saja, di script page2.html ini, kita sudah tidak membuat tabel lagi.

Jika terletak dalam folder yang sama dan dengan nama yang sama serta ekstensi file gambar JPG maka tampilannya akan seperti di atas dan pastinya dengan foto yang agan tempatkan di dalam folder baru yang dibuat tadi.

Tombol next dan previous juga akan berfungsi jika ditempatkan dalam folder yang sama.
Agar gambar lebih rapi bisa diedit dengan aplikasi CorelDRAW maupun Paint bawaan windows agar pixelnya lebih kecil.

Untuk yang tidak mau repot, silahkan

Demikianlah tutorial belajar HTML dasar untuk pemula tentang cara mudah membuat biodata diri keren dengan menggunakan script HTML sederhana. Semoga bermanfaat dan terima kasih telah berkunjung.
Advertisement

Baca juga:

Apa Pendapatmu?
Blogger
Disqus
1 Komentar Anda, 1000 Kebaikan Untuk Kita!

No comments

Komentar Brother's and Sista sangat dibutuhkan!