{"id":22,"date":"2024-03-20T15:53:02","date_gmt":"2024-03-20T08:53:02","guid":{"rendered":"http:\/\/www.rumahweb.com\/journal\/dasar-dasar-html-ii.htm"},"modified":"2024-08-27T14:47:23","modified_gmt":"2024-08-27T07:47:23","slug":"belajar-html-part-2","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-html-part-2\/","title":{"rendered":"Belajar HTML Part 2: Menambahkan Gambar dan Membuat Tabel"},"content":{"rendered":"\n

Setelah sebelumnya kami membahas tentang Dasar HTML<\/a>, saat ini kami akan melanjutkan dokumentasi belajar HTML part 2. Pada panduan ini, kami akan membahas cara menambahkan gambar dan membaut table dengan bahasa sederhana HTML. <\/p>\n\n\n\n\n\n

Untuk mengawali belajar HTML part 2, kami akan menjelaskan terlebih dahulu tentang script HTML untuk gambar. <\/p>\n\n\n\n

Menambahkan Gambar<\/h2>\n\n\n\n

Menambah gambar dalam HTML sangat mudah dilakukan. Kita dapat menempatkan gambar pada halaman website. Biasanya untuk website memakai extention gif, jpeg\/jpg, png, svg. Meskipun bisa memakai extention lainnya.<\/p>\n\n\n\n

Untuk menyematkan gambar didalam HTML, menggunakan tag <img> diikuti atribut <src> untuk menetapkan sumber gambar. <\/p>\n\n\n\n

Agar lebih mudah pemanggilan gambar, letakkan sebuah file gambar pada folder yang sama dengan file html yang akan dibuat. (dalam contoh ini, kami memakai nama file gambar_promo.jpg)<\/p>\n\n\n\n

Contoh kode HTML penggunaan tag <img> dan <src>:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n    <head>\n        <title>Dasar-dasar HTML<\/title>\n        <meta name=\"description\" content=\"Tulis deskripsi website singkat disini\">\n    <\/head>\n<body>\n\n<h1>BelajarDasar-dasar HTML II<\/h1>\n<p>Menyematkan gambar dalam HTML<\/p>\n<img src=\"gambar_promo.jpg\" \/>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
 Hasilnya:<\/p>\n\n\n\n
\"Menambahkan<\/a><\/figure>\n\n\n\n
 <\/p>\n\n\n\n
Atribut didalam tag <img><\/strong><\/p>\n\n\n\n
Jika kita menyematkan gambar tanpa atribut, yang terlihat adalah gambar sesuai file asli dan apa adanya. Pada tahap ini, kita akan menyematkan beberapa atribut didalam tag <img>. Berikut beberapa atribut didalam tag <img>:<\/p>\n\n\n\n
 Atribut  alt<\/h3>\n\n\n\n
Atribut alt singkatan dari alternative description. Digunakan sebagai keterangan pada gambar.<\/p>\n\n\n\n
Atribut alt sangat penting digunakan, karena berperan terhadap mesin pencari seperti Google. Cara kerja mesin pencari adalah membaca seluruh teks didalam website. Mesin pencari tidak mengerti isi gambar. Sehingga pengindex-an gambar dibantu oleh atribut alt.<\/p>\n\n\n\n
Atribut width dan height<\/h3>\n\n\n\n
Dari namanya, pasti Anda sudah tahu fungsi atribut ini. Iya benar, atribut  width dan height pasti digunakan untuk mengatur ukuran lebar dan tinggi gambar didalam HTML. Satuan atribut width dan height adalah pixel\/px . <\/p>\n\n\n\n
Kita juga bisa memakai satuan persen (%) untuk mendapatkan ukuran gambar sesuai ukuran layar komputer.<\/p>\n\n\n\n
Agar ukuran gambar porposional, kita dapat memberikan ukuran width saja tanpa height. Misalnya, <\/p>\n\n\n\n
<img src=\"gambar_promo.jpg\" width=\"500px\" \/><\/code><\/pre>\n\n\n\n
Dengan demikian, otomatis tinggi gambar akan diatur porposional sesuai lebar gambar.<\/p>\n\n\n\n
<img src=\"gambar_promo.jpg\" width=\"75%\" \/><\/code><\/pre>\n\n\n\n
Dengan satuan persen, saat ukuran layar browser dikecilkan maka ukuran gambar akan otomatis mengikuti yaitu selebar 75% dari ukuran layar dibrowser.<\/p>\n\n\n\n
Atribut  border<\/h3>\n\n\n\n
Atribut border digunakan untuk menambah garis tepi pada gambar. Nilai dari atribut border adalah angka, yaitu lebar garis tepi dalam satuan pixel\/px<\/em>. <\/p>\n\n\n\n
Berikut contoh pemakaian atribut border.<\/p>\n\n\n\n
<img src=\"gambar_promo.jpg\" width=\"500px\" border=\"2px\"\/><\/code><\/pre>\n\n\n\n
Kode menyematkan gambar dan beberapa atribut:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>Dasar-dasar HTML<\/title>\n        <meta name=\"description\" content=\"Tulis deskripsi website singkat disini\">\n    <\/head>\n<body>\n\n<h1>BelajarDasar-dasar HTML II<\/h1>\n<p>Menyematkan gambar dalam HTML<\/p>\n<img alt=\"gambar promo Rumahweb\" src=\"gambar_promo.jpg\" width=\"500px\" border=\"2\"\/>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Hasilnya:<\/p>\n\n\n\n
\"Belajar<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Membuat Tabel<\/h2>\n\n\n\n
Dengan HTML kita dapat membuat tabel didalam halaman web. Berikut ini tag yang digunakan untuk membuat table:<\/p>\n\n\n\n
1. Tag <table> untuk membungkus tabelnya\n2. Tag <thead> untuk membungkus kepala tabel\n3. Tag <tbody> untuk membungkus body dari tabel\n4. Tag <tr> (tabel row) untuk membuat baris pada tabel\n5. Tag <td> (table data) untuk membuat sel pada table\n6. Tag <th> (table head) untuk membuat judul pada header<\/code><\/pre>\n\n\n\n
Yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td> saja. Sementara tag lainnya adalah optional bisa digunakan ataupun tidak.<\/p>\n\n\n\n
Langsung saja berikut contoh tag membuat tabel.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head><\/head><title>Dasar-dasar HTML<\/title>\n    <\/head>\n<body>\n<p>Membuat table di HTML<\/p>\n\n<table>\n    <tr>\n        <td>baris 1 kolom 1<\/td>\n        <td>baris 1 kolom 2<\/td>\n    <\/tr>\n\n    <tr>\n        <td>baris 2 kolom 1<\/td>\n        <td>baris 2 kolom 2<\/td>\n    <\/tr>\n<\/table>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Hasilnya:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Hasilnya tabel HTML masih polos dan belum ada garisnya. Selanjutnya kita akan menambahkan beberapa artibut table. Berikut beberapa atribut tabel:<\/p>\n\n\n\n
border<\/h3>\n\n\n\n
Atribut border digunakan untuk menampilkan baris pada table dengan nilai 0, 1, 2 dan seteruskan. Semakin besar maka lebar garis semakin tebal.<\/p>\n\n\n\n
cellpadding<\/h3>\n\n\n\n
Atribut Cellpadding digunakan untuk memberikan jarak antara teks didalam tabel dengan garis tabel.<\/p>\n\n\n\n
cellspacing<\/h3>\n\n\n\n
 Digunakan untuk menandai ruang\/spasi antar dua sel. <\/p>\n\n\n\n
bgcolor<\/h3>\n\n\n\n
Atribut bgcolor digunakan untuk memberi warna pada background baris atau kolom tabel. Valuenya kita bisa memakai nama warna langsung, seperti Red, Blue, Black, maupun kode hex warna yang dapat diambil dari tool maupun situs online seperti htmlcolorcodes.com maupun lainnya.<\/p>\n\n\n\n
Berikut hasil penambahan atribut-atribut tersebut pada table.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head><\/head><title>Dasar-dasar HTML<\/title>\n    <\/head>\n<body>\n<p>Membuat table di HTML<\/p>\n\n<table border=\"1\" cellpadding=\"10\" cellspacing=\"0\">\n    <th  bgcolor=\"red\">th baris 1 kolom 1<\/th>\n    <th  bgcolor=\"009EFF\">th baris 1 kolom 2<\/th>\n    <tr>\n        <td>baris 1 kolom 1<\/td>\n        <td>baris 1 kolom 2<\/td>\n    <\/tr>\n\n    <tr>\n        <td>baris 2 kolom 1<\/td>\n        <td>baris 2 kolom 2<\/td>\n    <\/tr>\n<\/table>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Hasilnya:<\/p>\n\n\n\n
\"Belajar<\/a><\/figure>\n\n\n\n
Menggabungkan Sel Tabel<\/h3>\n\n\n\n
Pada tahap ini, kita akan coba menggabungkan sel table memakai rowspan dan colspan:<\/p>\n\n\n\n