Nah dari pembuatan list yang sudah kita pelajari kemarin, mari kita lanjutkan gas poll ya teman..
Kali ini kita akan belajar masih di html dengan tema menyisipkan hyperlink, image, table di laman web buatan kita untuk bahan pembelajaran.
Pertama, kita kenalkan perintah <a></a> yang disebut anchor. Dalam penyisipan link dari web lain kita harus menambahkan atribut href=””. Jika kita contohkan dalam visual studio code jadi begini :
<body>
<p>Klik <a href=”http://www.google.com”> di sini </a> untuk informasi lebih lanjut</p>
</body>
Dalam link kita juga dapat menyisipkan internal link pada perintah nya agar kita bisa kembali ke halaman sebelumnya dengan tombol misal kita ada di halaman ke dua mau kembali kembali ke halaman pertama misal begini :
<a href=”halaman1.html”>kembali ke halaman 1</a>
Kita lanjut belajar ke penyisipan gambar nya ya. Dalam penyisipan gambar, kita dapat memakai perintah <img src=””>. Mode penyisipan nya ada dua kriteria tergantung darimana src (source) atau sumber yang di dapat.
Misal perintah <img src=””> menggunakan internal resource atau data file gambar dari pc atau laptop kita. Jika ditulis dalam perintah maka : <img src=”logo.png”>. Mode yang kedua menggunakan external resource. Resource ini mengharuskan kita mengambil link website dari halaman web orang lain. Maka dari itu saya sarankan jangan mengambil punya orang lain untuk dijadikan img dalam web kita karena ada copy right nya yang notaben nya tidak boleh digunakan secara sembarangan.
Ada juga pemakain alt untuk penyisipan <img> seperti ini ;
<img src=”logo.png” alt=”Project Willy”>. Jika ada nama img yang kita masukkan salah seperti nama file yang harusnya “png” kita ubah ke “pn” saja, maka gambar yang di tampilkan eror dan hanya berupa tulisan Project Willy yang tertera di laman web buatanmu. Namun jika penulisannya nama img nya lengkap misal “png”maka yang muncul gambar dari img yang kita masukkan dalam perintah web nya.
Feature selanjutnya masih dalam penyisipan <img>. Penambahan atribut “title” mempunyai fungsi jika di masukkan ke dalam perintah begini : <img src=”logo.png” title=”Project Willy”> maka nanti akan ada tulisan seperti tag an jika kita meletakkan kursor di atas gambar yang di upload. Lalu untuk mengatur lebar dan besarnya suatu gambar yang di masukkan dapat diatur dengan width dan height. Satuan ukuran yang di masukkan berupa px (pixel) dan % (percent). Jika kita memasukkan angka saja atau dengan embel-embel px maka yang terbaca berupa ukuran px, namun jika kita memasukkan dengan % maka akan di hitung per berapa persen gambar tersebut dari halaman web kita. Untuk struktur penulisannya seperti ini :
<img src=”logo.png” width=”500″>
<img src=”logo.png” width=”50%”>
Lanjut bagian feature tabel teman. Tabel ini sama fungsinya seperti kalian mengerjakan table di microsoft excel entah itu untuk membuat suatu laporan data, kalendar, maupun data numerik yang ingin dibuatkan tabel agar lebih menarik. Dapat kita pakai tag <table></table> untuk penyisipan tabelnya. Nah bagaimana penerapan struktur nya jika ditulis pada laman web kita ?
Caranya seperti ini :
<table> …………………… merupakan tanda tag pembuka tabel
<tr> …………………… table row untuk membuat komposisi baris tabel sekaligus tanda pembuka
<td>…</td> ……………………. table data untuk membuat komposisi kolomnya
</tr> …………………… tanda penutup untuk tag membuat table row
</table> ……………………. tanda penutup untuk mengakhiri pembuatan tabel
Secara jelasnya jika di tulis di web :
<table>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
</table>
Setelah itu kita buat header nya teman seperti ini :
<table>
<thead>
<tr>
<th></th>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Baris 1</th>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<th>Baris 2</th>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</body>
</table>
Nah tag sedemikian itu merupakan pembuatan header di dua sisi ya teman, di sisi atas dan sisi sebelah kiri nantinya. Sudah komplit header manjut ke pembuatan bordernya ya dengan beberapa atribut, apa saja ya…
- Atribut border. Border berfungsi untuk menambahkan garis di sekitar cel yang kita buat
- Atribut cellspacing. Cellspacing berfungsi untuk menambah jarak antar cel
- Atribut cellpadding. Cellpadding berfungi untuk menambah luas di sebuah cel
Untuk penerapannya pada struktur html begini teman :
<table> border=”1″ cellspacing=”0″ cellpadding=”5″
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
</table>
Untuk besar border, cellspacing, dan cellpadding dapat di atur sesuai keinginan kalian ya teman.
Yap demikian pembelajaran kita kali ini tentang hiperlink, img, dan tabel. Seperti biasa akan saya lanjutkan lagi pembelajaran kita dengan tema pembelajaran lanjut agar materi pembelajaran kita dapat menyambung dengan materi ini dan materi sebelumnya. ( will )