Menampilkan
Gambar dan Mengelola Tabel HTML
Setelah
kita mengetahui tentang apa itu HTML (Hyper Text
Markup Language) maka kita juga harus mengetahui bahwa html tidak hanya
bisa menampilkan teks saja namun juga bisa menampilkan gambar. Dan untuk
menanta tata letak antar teks maupun gambar.
Menampilkan Gambar HTML
Cara menampilkan gambar pada html
adalah dengan cara mengetikan perintah <img src =
"namafile.extensi" width = "lebar" high =
"tinggi"/>. Syarat menampilkan gambar script tersebut yaitu
gambar yang diketikan namanya harus berada pada satu folder yang sama.
Contoh
Program
<html>
<head>
<title> Belajar Menampilkan Gambar </title>
</html>
<body>
<h1> Baelajar Tag Gambar </h1>
<img src = "Shandy.PNG" width = "200" high = "200"/>
<body>
<html>
Hasil
Membuat Tabel Pada HTML
Tabel pada html digunakan untuk mempermudah dalam
penataan teks maupun gambar jadi bila kita memiliki beberapa teks atau gambar
yang letaknya tidak berurutan.
Program
<html>
<head>
<title> Penggunaan Tag table </title>
</head>
<body>
<h1> Belajar Tag Table </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
Penjelasan
1.
<table border=”1”> </table> digunakan untuk
membuat table dan menentukan tebal garis border pada tabel.
2.
<tr> </tr> (table
row) digunakan untuk membuat baris sebuah tabel.
3.
<td> </td>
(table data) digunakan untuk membuat kolom sekaligus
memberikan isi dari sel tabel tersebut.
Menggabungkan Kolom dan Baris
Untuk
membuat tabel yang sesuai dengan
kebutuhan maka kita perlu menggabukan beberapa kolom dan baris. Perintah
yang digunakan yaitu colspan dan rowspan. Colpan digunakan untuk menggabungkan
kolom sedangkan rowspan digunakan untuk menggabungkan baris.
Program
<html>
<head>
<title> Menggabungkan Tabel </title>
</head>
<body>
<h1> Departemen dan Prodi PENS</h1>
<table border = "1">
<tr>
<td colspan="3"> Department Teknik Elektronika</td>
<td colspan="2"> Department Teknik <br> Informatika dan Komputer </td>
</tr>
<tr>
<td rowspan="3"> teknik <br> elektro <br> industri</td>
<td rowspan="3"> teknik <br> elektronika</td>
<td rowspan="3"> teknik <br> telekomunikasi</td>
<td rowspan="3"> teknik <br> informatika</td>
<td rowspan="3"> teknik <br> komputer</td>
</tr>
</table>
</body>
</html>
Hasil
Penjelasan
1. <td
colspan="3"> Department Teknik Elektronika </td> perintah
tersebut digunkan untuk menggabungkan 3 kolom dan di isi dengan tulisan “Department
Teknik Elektronika”.
2. <td
rowspan="3"> teknik <br> elektronika</td> perintah
tersebut digunakan untuk menggabungakan 3 baris dan di isi dengan tulisan “teknik
elektronika”.
3.
<br> digunakan untuk
menambah baris selanjutnya.
Latihan Membuat Biodata
Program
<html>
<head>
<title>Daftar Mahasiswa</title>
</head>
<body style="background-image:
linear-gradient(#3E76A9, #9DA7B1);">
<table style="border:2px
solid #091954 ;background-color:#789DB0; width:100%; border-collapse:
collapse">
<tr>
<td
colspan="3" style =background-color:#091954>
<center>
<font color = white size = "4" > <b>Daftar Mahasiswa PENS </b> </font>
</center>
</td>
</tr>
<tr>
<td>
<table style="width:100%; border-collapse: collapse">
<tr>
<td> NRP </td>
<td> : 1103181031 </td>
<td rowspan="12">
<center>
<img src = "Shandy.PNG" width = "200" high = "200" >
</center>
</td>
</tr>
<tr>
<td> Nama </td>
<td> : Prishandy Hamami Amrulloh </td>
</tr>
<tr>
<td> Program </td>
<td> : D3 </td>
</tr>
<tr>
<td> Jurusan </td>
<td> : Teknik Elektronika </td>
</tr>
<tr>
<td> Kelas </td>
<td> : 1 </td>
</tr>
<tr>
<td> Dosen_wali </td>
<td> : Madyono </td>
</tr>
<tr>
<td> tgllahir </td>
<td> : 17-08-1999 </td>
</tr>
<tr>
<td> tmplahir </td>
<td> : Surabaya </td>
</tr>
<tr>
<td> Jenis_kelamin </td>
<td> : Laki-laki </td>
</tr>
<td> Warga </td>
<td> : WNI </td>
</tr>
<tr>
<td> Agama</td>
<td> : Islam </td>
</tr>
<tr>
<td> Golongan_darah </td>
<td> : AB </td>
</tr>
<tr>
<td> Alamat </td>
<td> : RT.01/Rw02/67477 Desa : Kedungpanji Kec
: Lembeyan Kab : Magetan </td>
</tr>
<tr>
<td> Kota_Tempat_Tinggal </td>
<td> : Kabupaten Surabaya </td>
</tr>
<tr>
<td> Notlp </td>
<td> : 0818275353 </td>
</tr>
<tr>
<td> Jalur_penerimaan </td>
<td> : PMDK Berprestasi </td>
</tr>
<td> </td>
</table>
</td>
</tr>
</table>
</body>
Hasil
Penjelasan
1. background-image: linear-gradient(#3E76A9,
#9DA7B1) digunakan untuk
menampilkan warna barckground dengan warna
degradasi yang di inputkan dalam bentuk hexa.
2. border:2px solid #091954 digunakan untuk membuat border solid dengan warna ditulis
dalam hexa.
3. background-color:#789DB0 digunakan untuk membut background dengan warna yang di
inputkan dalam hexa.
4.
width:100% digunakan untuk menampilkan lebar sesuatu dengan skala persen
5. border-collapse: collapse digunakan untuk menghilangakan border antar sel sehingga
dalam tabel border menjadi satu kesatuan
Sampai sekian dulu
pembahasan kali ini, semoga ilmu yang telah kita pelajari bis bermanfaat dan
berguna. jika ada kekurngan dalam penulisan blog ini silahkan dibahas pada
kolom komentar.
