HTML Lanjutan [Gambar dan Tabel]
Coding HTML Lanjutan ?
Hallo sobat JoyBoy ✋
Kali ini kita akan memperdalam lagi ilmu pengcodingan HTML.
HTML sendiri sebenarnya tidak hanya bisa menampilkan teks saja tetapi bisa juga
menampilkan gambar, maka dari itu kali ini kita akan belajar menginputkan
gambar dengan HTML dan juga melengkapinya dengan table agar data lebih teratur.
Cara Menampilkan Gambar pada HTML
Untuk
menampilkan gambar di html adalah dengan membuat perintah <img src =
“namafile.extensi”> . Dan untuk
mengatur panjang dan lebar foto, kita bisa nambahkan perintah width = “ ” dan high = “ ” didalam tag.
#FYI Gambar harus berada pada satu folder yang sama dengan
program
Contoh Program :
<html>
<head>
<title> Biodata Diri </title>
</head><t></t>
<body>
<font color = blue>
<p align='center'> <img src = "hegi.png" width="200"><br>
Hegi Firmansyah<br>
Teknik Electronika
</font></p>
</body>
</html>
Hasil Program
Cara Membuat Table pada HTML
Tabel
pada HTML sangatlah bermanfaat. Selain agar data teratur, table juga membuat
halaman blog lebih cantik dan lebih untuk dilihat.
Contoh 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>
hasilnya
Penjelasan
- <table border=”1”> </table> digunakan untuk membuat table dan menentukan tebal garis border pada tabel.
- <tr> </tr> (table row) digunakan untuk membuat baris sebuah tabel.
- <td> </td> (table data) digunakan untuk membuat kolom sekaligus input data ke table.
Menggabungkan Sel Table
Atribut yang digunakan untuk menggabukan sel table adalah
Contoh penggunaan
Hasilnya
Penjelasan
Membuat Bio Data dengan Table dan Gambar di HTML
Hasilnya
Penjelasan
1. <table border="1" style=background:lightskyblue > digunakan untuk membuat table dengan warna background biru langit
2. <td colspan="3" style=background:mediumblue><center><b><font color=white>Daftar Mahasiswa PENS</font></b></center> digunakan untuk membuat table dengan warna background biru sedang
Sekian pembelajarannya untuk hari ini..
Terimakasih sobat JoyBoy mau berkunjung di blog kami..
Sering-sering mampir disini, karena kami akan update pembelajaran tentang bahasa pemrograman👌
- Colspan untuk
menggabungkan kolom
- Rowspan untuk
menggabungkan baris
Contoh penggunaan
<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>
Hasilnya
- perintah <td colspan="3"> </td> digunkan untuk menggabungkan 3 kolom..
- perintah <td rowspan="3"> </td> digunakan untuk menggabungakan 3 baris
- perintah <br> digunakan untuk berganti ke baris selanjutnya.
Membuat Bio Data dengan Table dan Gambar di HTML
<html>
<head>
<title>Tabel Bio </title>
</head>
<body>
<table border="1" style=background:lightskyblue >
<tr>
<td colspan="3" style=background:mediumblue><center><b><font color=white>Daftar Mahasiswa PENS</font></b></center>
</tr>
<tr>
<td>Nrp</td>
<td>1103181055</td>
<td rowspan="20"><img src="hegi.png" width="100"></td>
</tr>
<tr>
<td>Nama</td>
<td>Hegi Firmansyah</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>Pararel</td>
<td>B</td>
</tr>
<tr>
<td>Dosen_wali</td>
<td>Madyono</td>
</tr>
<tr>
<td>Tgllahir</td>
<td>30-04-2000</td>
</tr>
<tr>
<td>Tmplahir</td>
<td>Pasuruan</td>
</tr>
<tr>
<td>Tglmasuk</td>
<td>19-07-2018</td>
</tr>
<tr>
<td>Jenis_kelamin</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>Warga</td>
<td>WNI</td>
</tr>
<tr>
<td>Agama</td>
<td>Islam</td>
</tr>
<tr>
<td>Golongan_darah</td>
<td>A</td>
</tr>
<tr>
<td>Alamat</td>
<td>Dusun Jawi RT 09 RW 03
Desa Candiwates Kecamatan Prigen Kabupaten Pasuruan Provinsi Jawa Timur</td>
</tr>
<tr>
<td>Kel</td>
<td>Candiwates</td>
</tr>
<tr>
<td>Kec</td>
<td>Kec. Prigen</td>
</tr>
<tr>
<td>Kota_tempat_tinggal</td>
<td>Kabupaten Pasuruan</td>
</tr>
<tr>
<td>Notelp</td>
<td>0895628100061</td>
</tr>
<tr>
<td>Jalur_penerimaan</td>
<td>SIMANDIRI</td>
</tr>
</table>
</body>
</html>
Hasilnya
Penjelasan
1. <table border="1" style=background:lightskyblue > digunakan untuk membuat table dengan warna background biru langit
2. <td colspan="3" style=background:mediumblue><center><b><font color=white>Daftar Mahasiswa PENS</font></b></center> digunakan untuk membuat table dengan warna background biru sedang
Sekian pembelajarannya untuk hari ini..
Terimakasih sobat JoyBoy mau berkunjung di blog kami..
Sering-sering mampir disini, karena kami akan update pembelajaran tentang bahasa pemrograman👌
Comments
Post a Comment