Membuat Hyperlink dan List di Tag HTML
Thursday, October 31, 2019
Edit
Kali ini penulis akan membahas lagi mengenai HTML, mari sama2 di simak di hafalkan agar mudah bisa mengenai html. kali ini penulis membahas tentang "Membuat Hyperlink dan List di Tag HTML" semoga bermanfaat.
Dokumen HTML mempunyai kemampuan untuk memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang diidentifikasikan sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hypertekslink.
HTML menggunakan tag<a> yang disebut sebagai taganchor untuk membuat suatu link kepada dokumen lain.
Contoh:
<a href="http://www.msapp.web.id">Link ke www.msapp.web.id</a>
Hasil:
Membuat Link Untuk Window Baru
Untuk membuat link supaya membuka window baru dapat ditambahkan atribut: target="_blank"
Contoh:
Buka halaman <a href="http://www.msapp.web.id" target="_blank">www.msapp.web.id</a> di window baru
Hasil:
Mailto
Berikut ini adalah contoh link untuk menghubungkan ke sebuah alamat email.
Contoh:
Kirim kritik dan saran anda ke <a href="mailto:sukronmoh@gmail.com">Email Kami</a>
Hasil:
Image Hyperlink
Hyperlink dengan gambar, jika gambar di klik akan mengarah ke alamat yang dituju.
Contoh:
<a href="msapp.web.id">
<imgsrc="gambar.png" width="100px" />
</a>
Hasil:
List item di gunakan untuk mengelompokkan data baik berurutan (orderedlist) maupun yang tidak berurutan (unorderedlist).
OrderedList
Untuk membuat list terurut nomor (orderedlist), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag<li> sebagai pembuka dan </li> sebagai penutup.
Contoh:
Daftar Hari:<br>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
Hasil:
Ada beberapa tipe yang bisa digunakan.
<oltype = "1"> - Default
<oltype = "I">
<oltype = "i">
<oltype = "A">
<oltype = "a">
Contoh:
Daftar Hari:<br>
<oltype="i">
<li>Senin</li>
<li>Selasa</li>
</ol>
<oltype="A">
<li>Rabu</li>
<li>Kamis</li>
</ol>
<oltype="a">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
Hasil:
UnorderedList
Untuk membuat list tidak terurut nomor (unorderedlist), kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag<li> sebagai pembuka dan </li> sebagai penutup.
Contoh:
Daftar Hari:<br>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
Hasil:
Ada 3 tipe yang bisa kita gunakan square,disc,circle.
Contoh:
Daftar Hari:<br>
<ultype="square">
<li>Senin</li>
<li>Selasa</li>
</ul>
<ultype="disc">
<li>Rabu</li>
<li>Kamis</li>
</ul>
<ultype="circle">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
Hasil:
Ok Kesimpulannya:
Cukup untuk pembahasan kali ini tentang "Membuat Hyperlink dan List di Tag HTML" di lanjut lagi untuk pembahasan berikutnya. jangan sampai ketinggalan. :)
HTML menggunakan tag<a> yang disebut sebagai taganchor untuk membuat suatu link kepada dokumen lain.
Contoh:
<a href="http://www.msapp.web.id">Link ke www.msapp.web.id</a>
Hasil:
Membuat Link Untuk Window Baru
Untuk membuat link supaya membuka window baru dapat ditambahkan atribut: target="_blank"
Contoh:
Buka halaman <a href="http://www.msapp.web.id" target="_blank">www.msapp.web.id</a> di window baru
Hasil:
Mailto
Berikut ini adalah contoh link untuk menghubungkan ke sebuah alamat email.
Contoh:
Kirim kritik dan saran anda ke <a href="mailto:sukronmoh@gmail.com">Email Kami</a>
Hasil:
Image Hyperlink
Hyperlink dengan gambar, jika gambar di klik akan mengarah ke alamat yang dituju.
Contoh:
<a href="msapp.web.id">
<imgsrc="gambar.png" width="100px" />
</a>
Hasil:
Sekarang Membuat List HTML
List item di gunakan untuk mengelompokkan data baik berurutan (orderedlist) maupun yang tidak berurutan (unorderedlist).
OrderedList
Untuk membuat list terurut nomor (orderedlist), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag<li> sebagai pembuka dan </li> sebagai penutup.
Contoh:
Daftar Hari:<br>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
Hasil:
Ada beberapa tipe yang bisa digunakan.
<oltype = "1"> - Default
<oltype = "I">
<oltype = "i">
<oltype = "A">
<oltype = "a">
Contoh:
Daftar Hari:<br>
<oltype="i">
<li>Senin</li>
<li>Selasa</li>
</ol>
<oltype="A">
<li>Rabu</li>
<li>Kamis</li>
</ol>
<oltype="a">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
Hasil:
UnorderedList
Untuk membuat list tidak terurut nomor (unorderedlist), kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag<li> sebagai pembuka dan </li> sebagai penutup.
Contoh:
Daftar Hari:<br>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
Hasil:
Ada 3 tipe yang bisa kita gunakan square,disc,circle.
Contoh:
Daftar Hari:<br>
<ultype="square">
<li>Senin</li>
<li>Selasa</li>
</ul>
<ultype="disc">
<li>Rabu</li>
<li>Kamis</li>
</ul>
<ultype="circle">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
Hasil:
Ok Kesimpulannya:
Cukup untuk pembahasan kali ini tentang "Membuat Hyperlink dan List di Tag HTML" di lanjut lagi untuk pembahasan berikutnya. jangan sampai ketinggalan. :)