Mudahnya Belajar HTML: Link dan Marquee

Masih pada pembahasan tentang HTML, kali ini kita akan mengulas tentang link dan marquee pada html.

Link dapat ditemukan ditemukan hampir di semua halaman web. Link dapat kita klik untuk menghubungkan dari halaman satu ke halaman lain. Link merupakan sebuah hyperlink. Hyperlink dapat berupa teks atau gambar yang dapat kita klik serta dapat menghubungkan kita ke file yang dihubungkan.

Dalam HTML, link didefinisikan dengan tag <a> :


<a href="url">link text</a>

Contoh:

 <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Atribut href menentukan alamat tujuan link. Dari contoh di atas linknya akan menuju http://www.w3schools.com/html/
Dari contoh di atas, teks yang akan terlihat yaitu "Visit our HTML tutorial" , apabila kita mengklik tulisan tersebut, maka kita akan di bawa ke alamat yang sudah ditentukan tadi.

Teks link tidak harus berupa teks. Hal ini dapat gambar HTML atau elemen lainnya HTML.

Contoh link seperti ini disebut link absulut. Selain link absolut, ada yang disebut dengan link lokal. Link lokal yaitu link yang menuju situs web yang sama ditentukan dengan url relatif tanpa menggunakan http://

Contoh:

 <a href="html_images.asp">HTML Images</a>

Warna dan Ikon Link

Bila Anda memindahkan kursor mouse di atas link, dua hal yang biasanya akan terjadi:

Mouse panah akan berubah menjadi tangan kecil

Warna elemen link akan berubah

Secara default, link akan muncul karena hal ini di semua browser:

Link yang belum dikunjungi adalah digarisbawahi dan biru

Sebuah link yang dikunjungi adalah digarisbawahi dan ungu

Link aktif adalah digarisbawahi dan merah

Anda dapat mengubah default, menggunakan gaya:

 <style>
a:link    {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover   {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active  {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>

Atribut Target pada Link

Target Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

Gambar Sebagai Link

 <a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

Atribut ID pada Link

Atribut id dapat digunakan untuk membuat bookmark di dalam dokumen HTML. Bookmark tidak ditampilkan secara khusus akan tetapi bisa dilihat oleh pengunjung.

Contoh:
Menambahkan atribut id:

<a id="tips">Useful Tips Section</a>

Kemudian membuat link ke elemen <a>:

<a href="#tips">Visit the Useful Tips Section</a>

Atau bisa seperti ini:

<a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>

Marquee

HTML Marquee adalah teks berjalan baik secara vertikal maupun horisontal pada halaman web. Marquee didefinisikan dengan tag <marquee>.

Contoh sederhana penulisan tag marquee:

<marquee attribute_name="attribute_value"....more attributes>

One or more lines or text message or image

</marquee>

Di bawah ini adalah atribut-atribut pada tag Marquee:

Attribute	Description
width	This specifies the width of the marquee. This can be a value like 10 or 20% etc.
height	This specifies the height of the marquee. This can be a value like 10 or 20% etc.
direction	This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.
behavior	This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.
scrolldelay	This specifies how long to delay between each jump. This will have a value like 10 etc.
scrollamount	This specifies the speed of marquee text. This can have a value like 10 etc.
loop	This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
bgcolor	This specifies background color in terms of color name or color hex value.
hspace	This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
vspace	This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

Di bawah ini adalah contoh-contoh marquee, di contoh tersebut terdapat tab html danresult, untuk melihat kode htmlnya klik saja pada tab html.

Marquee Sederhana:

See the Pen xbmZZM by triediyanto (@faztmob) on CodePen.

Marquee dengan atribut width 50%

See the Pen NPexgv by triediyanto (@faztmob) on CodePen.

Marquee dengan atribut direction right

See the Pen dPwGzP by triediyanto (@faztmob) on CodePen.

Marquee dengan atribut behaviour alternate

See the Pen xbmZLN by triediyanto (@faztmob) on CodePen.

Gambar dengan tag marquee

See the Pen embJGP by triediyanto (@faztmob) on CodePen.

Gambar tabrakan

See the Pen jEXWZz by triediyanto (@faztmob) on CodePen.

Marquee bouncing