Oke temen-temen bertemu lagi dengan saya, kali ini kita akan melanjutkan pembahasan dari postingan saya yang sebelumnya yaitu tentang HTML. Dimana sebelumnya kita sudah belajar tentang bagaimana menampilkan tulisan di web. Nnaahh untuk pertemuan kali ini kita akan membahas hal yang lebih keren lagi temen-temen, yaitu untuk menampilkan gambar dan tabel di web. Kalian nanti akan bisa menampilkan foto temen-temen setelah kita belajar bersama sama disini. Tak berlama-lama kita langsung saja.
Cara Menampilkan Gambar
Bagaimana cara menampilkan gambar ? pasti susah yaa? jawabannya TIDAK. Ini sangatlah mudah temen-temen, caranya adalah buat perintah <img src= "nama file.type" width=angka high=angka > , width adalah lebar dan high adalah panjang. Dengan catatan file gambar yang ingin temen-temen inputkan ke program harus tersimpan di laptop/pc temen-temen dan berada di 1 folder yang sama dengan program temen-temen. Contoh program :
Hasil output
Hasil Output
<html>
<head>
<title>Belajar Menampilkan Gambar</title>
</head>
<body>
<h1> <ins>Belajar Menampilkan Gambar </ins></h1>
<img src = "fotoku.PNG" width = 200 high = 100>
</body>
</html>
Hasil output
Cara Membuat Tabel
Sangat penting untuk kita bisa menampilkan tabel di halaman web, karena dengan adanya tabel akan memudahkan kita untuk menampilan informasi dengan jumlah yang banyak. Bagaimana caranya? oke mari kita belajar bersama.
Teknik Dasar Tabel
<html>
<head>
<title> Membuat Tabel </title>
</head>
<body>
<h1> <ins>Pemahaman Teknik Dasar Tabel</ins> </h1>
<table border="1">
<tr>
<td> Baris 1, Kolom 1 </td>
<td> Baris 1, Kolom 2 </td>
<td> Baris 1, Kolom 3 </td>
</tr>
<tr>
<td> Baris 2, Kolom 1 </td>
<td> Baris 2, Kolom 2 </td>
<td> Baris 2, Kolom 3 </td>
</tr>
<tr>
<td> Baris 3, Kolom 1 </td>
<td> Baris 3, Kolom 2 </td>
<td> Baris 3, Kolom 3 </td>
</tr>
<tr>
<td> Baris 4, Kolom 1 </td>
<td> Baris 4, Kolom 2 </td>
<td> Baris 4, Kolom 3 </td>
</tr>
</table>
</body>
</html>
Hasil Output
Penjelasan Program
- <table border = "1">, untuk mengatur ketebalan border.
- <tr> </tr> , (table rows) yakni untuk menampilkan baris pada tabel.
- <td></td>, (table data) yakni untuk menampilkan sel dan untuk menginputkan data pada sel.
Baik temen-temen kita akan membuat program yang lebih kompleks yakni membuat tabel yang didalamnya terdapat gambar. Saya akan membuat contoh tentang biodata diri saya.
<html>
<head>
<title> DAFTAR MAHASISWA </title>
</head>
<body style="background-image: linear-gradient(rgb(197, 197, 255),
rgb(109, 109, 255));">
<table style=" width: 100%;border-collapse:collapse;
background-color:rgb(157, 179, 207)" >
<tr style=background-color:rgb(0,0,39) <font color=white><font>
<td colspan="3"><center><font color=white><font size= 4><b>
Daftar Mahasiswa PENS </b></center><font><font></td>
</tr>
<tr>
<td> <b> NRP </b> </td>
<td>: 1103181035 </td>
<td rowspan="12"><right><img src = "fotoku.png"
width = 200 high = 100 ></right> </td>
</tr>
<tr>
<td> <b> Nama </b> </td>
<td>: Rahmat Fauzi Yulianto</td>
</tr>
<tr>
<td> <b> Program </b> </td>
<td> : D3</td>
</tr>
<tr>
<td> <b> Jurusan </b> </td>
<td> : Teknik Elektronika </td>
</tr>
<tr>
<td> <b> Kelas </b> </td>
<td> : 1 </td>
</tr>
<tr>
<td> <b> Paralel </b> </td>
<td>: B </td>
</tr>
<tr>
<td> <b> Dosen Wali </b> </td>
<td> : Madyono </td>
</tr>
<tr>
<td> <b> Tanggal Lahir </b> </td>
<td> : 24-07-2000 </td>
</tr>
<tr>
<td> <b> Tempat Lahir </b> </td>
<td> : Jombang </td>
</tr>
<tr>
<td> <b> Tanggal Masuk </b> </td>
<td> : 14 Mei 2018</td>
</tr>
<tr>
<td> <b> jenis Kelamin </b> </td>
<td> : Laki-Laki</td>
</tr>
<tr>
<td> <b> Warga </b> </td>
<td> : WNI </td>
</tr>
<tr>
<td> <b> Agama </b> </td>
<td> : Islam</td>
</tr>
<tr>
<td> <b> Golongan Darah </b> </td>
<td> : O </td>
</tr>
<tr>
<td> <b> Alamat </b> </td>
<td> : Ds.Cangkir Dsn.Wates RT 08 RW 02 Driyorejo Gresik
</td>
</tr>
<tr>
<td> <b> Kota Tempat Tinggal </b> </td>
<td> : Kabupaten Gresik</td>
</tr>
<tr>
<td> <b> No Telepon </b> </td>
<td> : 082292535304 </td>
</tr>
<tr>
<td> <b> Jalur penerimaan </b> </td>
<td> : PMDK</td>
</tr>
</table>
</body>
</html>
Penjelasan Program
1. style=background-image: linear-gradien, untuk
memberi warna pada background web.
2. <table style>, deklarasi untuk mendesign tabel sesuai
keinginan programmer.
3. border-collapse : collapse, untuk menghilangan border
antar sel.
4. background-color, untuk meberi warna pada tabel.
5. width=100%, untuk menampilkan tabel secara full layar.
Tetapi juga bisa digunakan untuk menampilan sesuatu
yang lain dengan skala persen.
5. <font color>, untuk memberi warna pada tulisan.
6. <colspan>, untuk menggabung beberapa baris menjadi
satu baris.
7. <center> </center>, untuk menempatkan sesuatu pada
posisi tengah (center).
Oke temen-temen saya kira cukup belajar bareng untuk kali ini. Semoga apa yang kita pelajari kali ini bisa berguna untuk sekarang, besok dan kapanpun, amin. Jika ada saran, komentar, kritik, pertanyaan dan request bisa temen-temen tulis di kolom komentar. Oke guys sampai bertemu di pembahasan selanjutnya.
-byee
#SalamOrangBodo
Tidak ada komentar:
Posting Komentar