Tutorial Membuat Biodata Keren HTML

"Tutorial Membuat Biodata Keren HTML dengan contoh script"

10 min read

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

Cukup copy paste, jadi deh biodata kerennya. Kamu cukup ganti identitas saya 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. Jadi, 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.

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>

<h2 align="center"><font face="algerian" color="yellow" size=7><u>CURRICULUM VITAE</u></font></h2>

<tr>

<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>SDN 049 Lara 4 Mukti Tama</td>

</tr>

<tr>

<td>SMPN 2 Baebunta</td>

</tr>

<tr>

<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>

<td>Luwu Utara</td>

</tr>

<tr>

<td>Menulis, Travelling</td>

</tr>

<tr>

</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>

<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/><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 Download Script Biodata HTML Keren

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.