Membuat Hyperlink dan List di Tag HTML

 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.


emoji html
 

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:


link


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:


window baru


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:


email kami


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:


image hyperlink




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:

ordered list



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:

ordered list


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:

UnorderedList


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:

UnorderedList




Ok Kesimpulannya:

Cukup untuk pembahasan kali ini tentang "Membuat Hyperlink dan List di Tag HTML" di lanjut lagi untuk pembahasan berikutnya. jangan sampai ketinggalan. :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel