SINAU HTML : Membuat Tabel dan Memasukkan Gambar dalam HTML
Assalamu’alaikum Wr, Wb
Haii sobat redaksi PENS. Gimana Kabar kalian? Semoga kalian semua tetap dalam lindungan-Nya (Aamiin). Jumpa lagi dengan tulisankuu…
Kalo baca tulisanku jangan lupa senyum simetrisnya yaa:) wkwk. Kenalan lagi nih dengan aku, namaku Rizal dari kelas 1 D3 ELKA B. Semoga semua yang aku tulis dalam artikelku bermanfaat bagi kalian semua. Kali ini saya akan membahas tentang bagaimana membuat tabel dan memasukkan gambar dalam HTML.
Membuat Tabel dalam HTML
Tabel merupakan susunan data yang ditampilkan dalam bentuk baris dan kolom. Pembuatan tabel dalam HTML dilakukan dengan menggunakan tag <table>…</table> untuk membuat tabel, <tr>…</tr> untuk membuat baris, dan <td>…</td> untuk membuar kolom dalam baris. Penggunaan <table>..</table> sangat penting, karena tanpa itu kita tidak bisa memfungsikan <tr>…</tr> dan <td>…</td>.
Memasukkan Gambar dalam HTML
Agar tampilan suatu artikel ataupun web tidak membosankan, kalian bisa menambahkan gambar/foto. Untuk menampilkan sebuah gambar/foto kita bisa menggunkan tag <img>…</img> dengan memasukkan atribut src= untuk memanggil nama dan lokasi file gambar/foto yang akan ditampilkan. Penempatan file gambar/foto lebih baik dijadikan satu folder dengan file HTML-nya karena untuk mempermudahkan dalam pemanggilan file gambar/foto.
Langsung saja mari kita membuat program yang menampilkan tabel dalam HTML…
<html>
<head>
<title> BIODATA</title>
</head>
<body bgcolor=”yellow”>
<table border=1 width=50%>
<tr bgcolor=”red”>
<td colspan=”2″ align=”center”><font size = 20><font color = yellow>BIODATA</font></font></td>
</tr>
<tr bgcolor=”pastel”>
<td colspan=”2″ align=”center”><img src=”rizal.jpg” width=20%></td>
</tr>
<tr bgcolor=”red” align=”left”>
<td><font size = 5><font color = yellow>NRP </font></font></td>
<td><font size = 5><font color = yellow>1103191035</font></font></td>
</tr>
<tr bgcolor=”pastel” align=”left”>
<td><font size = 5><font color = yellow>Nama</font></font></td>
<td><font size = 5><font color = yellow>A. Rizal Irwanto</font></font></td>
</tr>
<tr bgcolor=”red” align=”left”>
<td><font size = 5><font color = yellow>Program Studi</font></font></td>
<td><font size = 5><font color = yellow>D3 Teknik Elektronika</font></font></td>
</tr>
<tr bgcolor=”pastel” align=”left”>
<td><font size = 5><font color = yellow>TTL</font></font></td>
<td><font size = 5><font color = yellow>Mojokerto, 14 Januari 2001</font></font></td>
</tr>
<tr bgcolor=”red” align=”left”>
<td><font size = 5><font color = yellow>Alamat</font></font></td>
<td><font size = 5><font color = yellow>Jln. Tegal Mulyorejo Baru No. 69, Surabaya</font></font></td>
</tr>
<tr bgcolor=”pastel” align=”left”>
<td><font size = 5><font color = yellow>No. HP</font></font></td>
<td><font size = 5><font color = yellow>085745747776</font></font></td>
</tr>
</table>
</body>
</html>
Setelah kalian membuat program di atas, akan muncul tampilan seperti :
Penggunaan “colspan” digunakan untuk menggunakan beberapa kolom dalam 1 baris. Kalian bisa mengganti warna tampilan dengan warna yang kalian suka dan juga mengganti warna dan ukuran tulisan. Kita juga bisa mengatur alignment tulisan(left, right, maupun center).
Sampai di sini dulu pembahasan salah satu materi HTML. Kalau mau tanya, silakan DM di akun ig @rizalirwanto01. Masih banyak tulisan yang akan saya buat. Kesempurnaan hanya milik Allah, untuk menyempurnakan saya artikel yang telah saya susun masih memiliki banyak kekurangan baik dari segi teknis maupun non-teknis. Untuk itu saya membuka pintu yang selebar-lebarnya untuk semua pihak agar dapat memberikan saran dan kritik yang membangun demi penyempurnaan yang diperlukan. Dan menghargai di dalam artikel ini dianggap hal-hal yang dianggap tidak berkenan di hati kalian mohon dimaafkan yaa…
Wassalamu’alaikum Wr. Wb.
Recent Comments