Topik sekarang aku mau ngasih contoh gimana sih caranya membuat biodata tapi disertai dengan tabel dan ga lupa foto dong pastinya ;)
Oh iya, sebelumnya aku mau ngingetin untuk ubah dulu deh mindset kalo HTML itu susah, sulit, ribet, rumit, blablablabla... Belajar HTML mudah. Mudah banget! Asik lagi, seru deh pokoknya. Kita bisa membuat "duplikat" suatu web, bahkan bisa lebih baik lagi dari web awal. lumayan dong skill kita kalo terjun ke lapangan kita sudah menguasai HTML, ya ga? YA!
Yaudah biar cepet langsung ke programnya eaa..
Nah, disini aku mau ngasih listing program dari tabel biodata diri.
Q: Lho, bedanya sama yang kemaren apa?
A: Ya beda laah. eh sama sih dikit. Bedanya yang ini tuh ada tabelnya :)
Q: Oh gitu y?!
A: Y!
Daripada kelamaan nunggu, ini nih listing programnya..
Dalam menampilkan data yang terstruktur atau tampilan dari database, biasanya akan dibuat dalam bentuk tabel. dalam hal ini HTML juga menyediakan table tag yang digunakan untuk menampilkan data dalam bentuk tabel.
Ini listing program yang textual:
<!DOCOTYPE html>
<head>
<title> Tabel Biodata </title>
</head>
<body>
<table align=center border="3" style="background-color: lightskyblue">
<tr>
<td colspan="3" style="background-color:darkblue"><center><h2><font color=white>Daftar Mahasiswa PENS</font></h2></td>
</tr>
<tr>
<td>NRP : </td>
<td>1103181056</td>
<td rowspan="7"><img src=vina.png width="150"></td>
</tr>
<tr>
<td>Nama : </td>
<td>Vina Tri Hartini</td>
</tr>
<tr>
<td>Program : </td>
<td>D3</td>
</tr>
<tr>
<td>Jurusan : </td>
<td>Teknik Elekronika</td>
</tr>
<tr>
<td>Kelas : </td>
<td>1</td>
</tr>
<tr>
<td>Paralel</td>
<td>B</td>
</tr>
<tr>
<td>Dosen_Wali : </td>
<td>Madyono</td>
</tr>
<tr>
<td>Tgllahir : </td>
<td>01-06-2000</td>
</tr>
<tr>
<td>Tmplahir : </td>
<td>Sumenep</td>
</tr>
<tr>
<td>Tglmasuk : </td>
<td>19-07-2018</td>
</tr>
<tr>
<td>Jenis_kelamin : </td>
<td>Perempuan</td>
</tr>
<tr>
<td>Warga : </td>
<td>WNI</td>
</tr>
<tr>
<td>Agama : </td>
<td>Islam</td>
</tr>
<tr>
<td>Golongan_Darah : </td>
<td>O</td>
</tr>
<td>Alamat : </td>
<td>Jl. Slamet Riyadi No.117, Pabian, Sumenep</td>
</tr>
<tr>
<td>Kota_tempat_tinggal : </td>
<td>Kota Sumenep</td>
</tr>
<tr>
<td>Notlp : </td>
<td>081938838656</td>
</tr>
<tr>
<td>Jalur_penerimaan : </td>
<td>SIMANDIRI</td>
</tr>
</table>
</body>
</html>
Dari listing program diatas, berikut penjelasannya:
- <!DOCOTYPE html> digunakan untuk mengubah dokumen menjadi html
- Tag <table> Digunakan untuk membuat tabel
- Tag <tr> Adalah singkatan dari table row, digunakan untuk membuat baris.
- Tag <td> Adalah singkatan dari table data, digunakan untuk menginput data ke tabel
- Tag <img src> Digunakan untuk menginput gambar
- <table align=center border="3" style="background-color: lightskyblue"> Fungsinya untuk meletakkan tabe ditengah, dan background color. Pada tag ini diberikan atribut border yang berguna untuk memberikan nilai garis tepi dari tabel. Nilai garis ini dalam ukuran pixel.
- Penggunaan rowspan dan colspan berfungsi untuk menggabungkan sel tabel. Rowspan untuk menggabungkan baris, sedangkan Colspan berfungsi untuk menggabungkan kolom.
Time To Play Guizee~~~!!❤❤❤❤❤
Jadi, Ayo kita buka file yang sudah dibuat menggunakan localhost.
Pertama, Buka aplikasi Xampplite dan setting seperti di gambar yaa..
Kedua, save file yang sudah dibuat menggunakan Visual Studio Code. klik "save" pilih "xampplite" lalu pilih lokasi "htdocs". Seperti gambar dibawah.
Ketiga, beri nama folder. (everything u want for the folder's name^^). Lalu, klik "save".
Keempat, Buka web browser kalian lalu ketik url localhost/namafolder or file/
Gimana Asik-kaann????
Atau mungkin kalian bisa baca juga artikel sebelum ini, kali aja tercerahkan hehe. artikelnya disini
See U Next Post!♥
0 komentar: