Cara Membuat Tabel Produk Menggunakan Script HTML
Nama : Cindy Windari
Kelas : 12.2A.37
NIM : 12181575
Assalamualaikum.wr.wb
Kali ini saya akan menshare sedikit tutorial membuat tabel menggunakan HTML..
Bagi kalian yang masih bingung materi tentang HTML disarankan untuk membaca dan memahami materinya dari awal disertai dengan prakteknya. jadi saya akan membagi dulu sedikit materi dasar HTML..
Semoga membantu, Terima Kasih☺☺❤
Wassalamualaikum.wr.wb
Kelas : 12.2A.37
NIM : 12181575
Assalamualaikum.wr.wb
Kali ini saya akan menshare sedikit tutorial membuat tabel menggunakan HTML..
Bagi kalian yang masih bingung materi tentang HTML disarankan untuk membaca dan memahami materinya dari awal disertai dengan prakteknya. jadi saya akan membagi dulu sedikit materi dasar HTML..
"PENGENALAN HTML"
1. Pengertian HTML
Hypertext Markup Language(HTML)adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.
2. Struktur Dasar HTML
Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Keterangan :
1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan dipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam suatu document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>. Judul ini akan muncul dalam titlebar dari browser. 4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.
3. Pembuatan Tabel Menggunakan HTML
Tabel penting peranannya dalam halaman Web, selain untuk menampilkan teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk membantu me-layout tampilan halaman. Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column. Untuk membuat tabel, anda menggunakan tag <table> dan menutupnya dengan tag </table>. Anda bisa juga menambahkan atribut lain di tag <table> pembuka. Misalnya menentukan warna, border, dan sebagainya. Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :
a. Tag <tr> Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.
b. Tag <td> Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag <tr>. TD singkatan dari Table Data.
c. Tag <th> Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header tabel. TH singkatan dari Table Header.
4. Menggabungkan sel
Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Keterangan :
1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan dipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam suatu document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>. Judul ini akan muncul dalam titlebar dari browser. 4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.
3. Pembuatan Tabel Menggunakan HTML
Tabel penting peranannya dalam halaman Web, selain untuk menampilkan teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk membantu me-layout tampilan halaman. Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column. Untuk membuat tabel, anda menggunakan tag <table> dan menutupnya dengan tag </table>. Anda bisa juga menambahkan atribut lain di tag <table> pembuka. Misalnya menentukan warna, border, dan sebagainya. Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :
a. Tag <tr> Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.
b. Tag <td> Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag <tr>. TD singkatan dari Table Data.
c. Tag <th> Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header tabel. TH singkatan dari Table Header.
4. Menggabungkan sel
Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita ingin
membuat sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-sel lainnya,
maka satu-satunya cara yang bisa kita lakukan adalah dengan menggabungkan
beberapa sel menjadi satu. Cara ini disebut merge atau penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau colspan.Atribut rowspan(vertikal) digunakan untuk menggabungkan sel-sel tabel pada kolom yang
sama. Atribut colspan(horizontal) untuk menggabungkan sel-sel tabel pada baris yang sama.
Contoh script pembuatan tabel produk menggunakan HTML
<html>
<head>
<title>Cindy Windari</title>
</head>
<body>
<table border=1 align=center width="800">
<tr>
<th colspan="3" bgcolor="yellow">DAFTAR PRODUK</th>
</tr>
<tr>
<td rowspan="4">
<img src="realme-3-1.jpg" width="200" height="230" />
</td>
</tr>
<tr>
<td style="background-color: red;">Nama produk</td>
<td style="background-color: orange;">Realme 3</td>
</tr><tr>
<td style="background-color: red;">Harga Produk</td>
<td style="background-color: skyblue;">Rp 1.799.000</td>
</tr><tr>
<td style="background-color: red;">Fitur Produk</td>
<td style="background-color: pink;">
<ul>
<li>Dimensions :156.1 x 75.6 x 8.3 mm (6.15 x 2.98 x 0.33 in)</li>
<li>Protection :Corning Gorilla Glass 3</li>
<li>OS :Android 9.0 (Pie); ColorOS 6</li>
<li>Chipset :Mediatek MT6771 Helio P60 (12 nm)</li>
<li>Memory :64 GB, 4 GB RAM or 32 GB, 3 GB RAM</li>
<li>Camera :13 MP, f/1.8, 1/3", 1.12µm, PDAF</li>
<li>Battery :Non-removable Li-Ion 4230 mAh battery</li>
<li>Sensors :Fingerprint (rear-mounted), accelerometer, proximity</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\ buat folder baru
untuk menyimpan file di dalam folder htdocs. Simpan file. Pembuatan nama file pada saat penyimpanan harus diakhiri dengan
extention “.html”
Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla,
google chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar
“Localhost\Nama Folder Penyimpanan\”.
pastikan anda telah menjalankan Module
Apache pada Xampp Control Panel.
NOTE: gambar harus disimpan di dalam 1 folder produk.html jika tidak gambar tidak akan muncul.
Kemudian akan muncul tampilan seperti ini:
Semoga membantu, Terima Kasih☺☺❤
Wassalamualaikum.wr.wb
Komentar
Posting Komentar