Tutorial HTML - Membuat Form #3 (dengan Tabel)
Tutorial HTML - Membuat Form #3 (dengan Tabel)
Selasa, 23 April 2019
Tutorial HTML - Membuat Form #2 (Textarea, Select, Button)
Tutorial HTML - Membuat Form #2 (Textarea, Select, Button)
Tutorial HTML - Membuat Tabel
Tabel dalam sebuah website berfungsi untuk menampilkan data-data tertentu agar data tersebut terstruktur dan rapi. Tidak hanya sebatas hanya untuk sebuah tabel, element tabel dalam html juga digunakan untuk hal-hal lain agar tampilan lebih baik. Misalnya dipembahasan berikut nya, kita akan membuat sebuah Form menggunakan element tabel agar tampilanya lebih rapi. Cara penulisanya :
<table border="1" >
<tr>
<td>Baris ke-1, Kolom ke-1</td>
<td>Baris ke-1, Kolom ke-2</td>
<tr>
<tr>
<td>Baris ke-2, Kolom ke-1</td>
<td>Baris ke-2, Kolom ke-2</td>
<tr>
<table>
<tr>
<td>Baris ke-1, Kolom ke-1</td>
<td>Baris ke-1, Kolom ke-2</td>
<tr>
<tr>
<td>Baris ke-2, Kolom ke-1</td>
<td>Baris ke-2, Kolom ke-2</td>
<tr>
<table>
| - <table> | : Tag yang menjadi bungkus tabelnya |
| - border | : Atribut tabel untuk memberi border/bingkai |
| - <tr> | : Tag untuk membuat baris |
| - <td> | : Tag untuk membuat kolom |
Tutorial HTML - Memuat Gambar
Memuat gambar kedalam sebuah halaman website merupakan hal yang cukup penting untuk meningkatkan desain dan tampilan website, hal itu dapat menarik perhatian pengunjung dan membuat nyaman ketika mellihat website itu.
Dalam HTML untuk memuat sebuah gambar diperlukan element atau tag <img>, dan untuk tag <img> tidak memerlukan tag penutup. Kemudian didalam nya ada atribut wajib yaitu src=" ", untuk menuliskan nama gambar yang akan kita muat dalam website.<img src="amartha.jpg">
#Catatan : Nama gambar dan nama ekstensi gambar yang dituliskan harus persis sama, baik kapital atau tidak kapital.
Gambar di Folder lain
Kode atribut src diatas bernilai nama gambar yang satu folder dengan file .html nya, bagaimana jika letak gambarnya didalam folder yang berbeda? maka penulisan nilai nya pun ada perbedaan, kita harus menulis nama folder nya pula.
Contoh penulisan jika gambar didalam folder img
Gambar berada diatas folder tersebut
Bagaiman jika letak filenya berada diatas folder tersebut, maka penulisanya dengan cara menambahkan kode ../ untuk mencari gambar naik satu folder.
Gambar di Folder lain
Kode atribut src diatas bernilai nama gambar yang satu folder dengan file .html nya, bagaimana jika letak gambarnya didalam folder yang berbeda? maka penulisan nilai nya pun ada perbedaan, kita harus menulis nama folder nya pula.
Contoh penulisan jika gambar didalam folder img
<img src="img/amartha.jpg">
Gambar berada diatas folder tersebut
Bagaiman jika letak filenya berada diatas folder tersebut, maka penulisanya dengan cara menambahkan kode ../ untuk mencari gambar naik satu folder.
<img src="../img/amartha.jpg">
Gambar yang diambil dari website
Jika ingin mengambil gambar atau image dari website lain, biasa nya ada website-website penyedia untuk upload dan download gambar. Maka copy alamat url gambarnya, dan masukan dalam atribut src.
<img src="https://www.google.com/amartha.jpg">
Selain atribut wajibnya, ada beberapa atribut lainya yaitu :
Atribut alt
Yaitu atribut yang digunakan untuk menyediakan teks alternatif, jika gambar yidak ditampilkan di browser karna beberapa alasan, misalnya karena koneksi yang lambar, kesalahan dalam atribut src dan lainya. Dan value atau nilai dari atribut ini harus sesuatu yang menggambarkan gambar itu.
Atribut width dan height
Yaitu atribut yang berfungsi untuk menentukan lebar dan tinggi gambar. Jika width dan height tidak diatur maka browser akan menampilkan ukuran asli gambar. <img src="amartha.jpg" alt="Logo Amartha"> Atribut width dan height
<img src="amartha.jpg" alt="Logo Amartha" width="200" height="200"> Membuat gambar menjadi sebuah LINK
Seperti yang tertulis dipostingan sebelumnya, Tutorial Membuat Link pada HTML. Disana kita belajar untuk membuat LINK dari sebuah tulisan atau teks, dan pada kali ini kita akan membuat LINK dari sebuah gambar. Cara penulisanya dengan menuliskan tag <a> terlebih dahulu, lalu didalamnya kita masukan tag <img>.
<a href="https://amartha95.blogspot.com/">
<img src="amartha.jpg" alt="Logo Amartha">
</a> Untuk tutorial kali ini sekian
-- Terimakasih --
