Assalamu'alaykum warahmatullahi wabarakatuh ^^
Dalam kesempatan ini saya mau berbagi ilmu tentang 'HTML' .
HTML ini merupakan pembelajaran dari 'Web Programming'.
Maka dari itu, saya akan berbagi tips Membuat Kode Produk dengan menggunakan Script HTML.
Untuk itu saya akan menjelaskan terlebih dahulu pengertian HTML dan Struktur Dasar HTML.
Pengertian HTML (Hypertext Markup Language)
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 biasa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.
Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol "<" dan berakhir dengan sebuah symbol ">".
Editor teks yang digunakan oleh penyusun adalah menggunakan Notepad.
Aplikasi tersebut bisa anda buka melalui 'START'
Dan juga memerlukan aplikasi XAMPP
Untuk aplikasi XAMPP harus sesuaikan dengan system type masing-masing komputer Anda.
Jika system type komputer Anda merupakan 32 bit, maka download lah XAMPP dengan versi 32 bit.
Jika system type komputer Anda merupakan 64 bit, maka download lah XAMPP dengan versi 64 bit.
Silahkan download XAMPP nya klik disini
Untuk menjalankan HTML tidak memerlukan koneksi Internet.
Struktur Dasar HTML
Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuk simbol "/" diikuti oleh tipe elemen, misalnya </HEAD>.
Sebuah dokumen HTML standar terlihat seperti ini :
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.
Kode-kode dalam HTML biasanya disebut TAG.
Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ). Biasanya Tag dituliskan secara berpasangan, misanya : <h1> dan </h1>.
Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka atau awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemen.
Namun, ada juga Tag yang dalam pemakaiannya tidak berpasangan, diantaranya adalah :
a. Tag untuk ganti paragraph yaitu <p>
b. Tag untuk ganti baris atau line break yaitu <br>
c. Tag untuk garis datar yaitu <hr>
d. Tag list item yaitu <li>
Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis menggunakan pasangannya. Hal ini dilakukan untuk mengantisipasi standar rekomendasi HTML kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ).
Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf kecil semua.
Jenis – jenis tag dalam HTML :
Tabel penting peranannya dalam halaman Web, selain untuk menampilkan teks atau gambar dalam format lajur dan kolom bisa 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.
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 digunakan untuk menggabungkan sel-sel tabel pada kolom yang sama. Atribut colspan digunakan untuk menggabungkan sel-sel tabel pada baris yang sama. Berikut contoh penggabungan kedua jenis :
Cara Membuat Tabel Kode Produk dengan menggunakan Script HTML
3. Aktifkan XAMPP terlebih dahulu
<html>
<head>
<title>Tugas Web Programming</title>
</head>
<body>
<table border=2 align=center width=600>
<tr>
<td colspan=3 align=center bgcolor=purple>
<h2>DAFTAR PRODUK<h/2>
</td>
</tr>
<tr>
<td rowspan=4 align=center bgcolor=maroon> <img src=lipcare.jpg height=200 width=200></td>
</tr>
<tr>
<td bgcolor=lightblue>Nama Produk</td>
<td bgcolor=violet>LIP CARE SR12</td>
</tr>
<tr>
<td bgcolor=lightblue>Harga</td>
<td bgcolor=violet>Rp. 25.000</td>
</tr>
<tr>
<td bgcolor=lightblue>Fitur Produk</td>
<td bgcolor=violet>* Merupakan perawatan untuk bibir kering dan pecah-pecah<br>* Kandungan : Petroleum Jelly, Madu, Gula, dan Essensial Oil<br>
* Manfaat :<br>- Dapat mengembalikan warna asal bibir<br>- Mengangkat sel kulit mati<br>- Sebagai pelembab bibir<br>- Mampu mengembalikan warna asal bibir secara alami<br>
- Mempercantik warna bibir<br>- Mengatasi bibir pecah-pecah<br>* Terdapat 2 Variant :<br>Baby Pink dan Cherry Red</td>
</tr>
</table>
</body>
</html>
<head>
<title>Tugas Web Programming</title>
</head>
<body>
<table border=2 align=center width=600>
<tr>
<td colspan=3 align=center bgcolor=purple>
<h2>DAFTAR PRODUK<h/2>
</td>
</tr>
<tr>
<td rowspan=4 align=center bgcolor=maroon> <img src=lipcare.jpg height=200 width=200></td>
</tr>
<tr>
<td bgcolor=lightblue>Nama Produk</td>
<td bgcolor=violet>LIP CARE SR12</td>
</tr>
<tr>
<td bgcolor=lightblue>Harga</td>
<td bgcolor=violet>Rp. 25.000</td>
</tr>
<tr>
<td bgcolor=lightblue>Fitur Produk</td>
<td bgcolor=violet>* Merupakan perawatan untuk bibir kering dan pecah-pecah<br>* Kandungan : Petroleum Jelly, Madu, Gula, dan Essensial Oil<br>
* Manfaat :<br>- Dapat mengembalikan warna asal bibir<br>- Mengangkat sel kulit mati<br>- Sebagai pelembab bibir<br>- Mampu mengembalikan warna asal bibir secara alami<br>
- Mempercantik warna bibir<br>- Mengatasi bibir pecah-pecah<br>* Terdapat 2 Variant :<br>Baby Pink dan Cherry Red</td>
</tr>
</table>
</body>
</html>
Setelah selesai membuat codingan, save Notepad++ tersebut dengan diakhir penulisan ".html"
contoh : daftarproduk.html
Dan hasil nya seperti ini :
Catatan :
Untuk gambar, save gambar tersebut di folder daftarproduk agar gambar tersebut muncul dalam html.
Sekian tutorial cara membuat kode produk dengan menggunakan script HTML dan penjelasan HTML dari saya
Terimakasih.
Wassalamu'alaykum warahmatullahi wabarakatuh ^^
