DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Html # Membuat Link Dan Menu

advertisement
Cara membuat link dan menu di html

Salah satu hal penting yang perlu kita pelajari dalam membuat halaman web adalah cara membuat sebuah link dan menu.
Hal ini penting, karena dapat mempermudah pengunjung beralih dari satu halaman ke halaman lainnya.
Dengan menggunakan link, pengunjung tidak perlu lagi  mengetikan url yang dituju namun cukup mengklik link terkait yang nantinya pengunjung akan diarahkan ke halaman tujuan.
Pada tutorial kali ini kita akan belajar membuat sebuah link dan menu sebagai navigasi halaman web kita.
Yuk kita mulai tutorialnya!

Apa Itu Link?

Link atau hyperlink adalah sebuah elemen yang ditandai dengan tag <a> yang memiliki fungsi untuk menghubungkan suatu halaman dengan halaman lainya.
Link memiliki atribut khusus dan wajib untuk di berikan, yaitu href.
Atribut ini digunakan untuk meletakan alamat url halaman tujuan.
Membuat link building


Bukan hanya berfungsi sebagai penghubung halaman web.
Link juga dapat digunakan untuk keperluan scrolling pada single page, download file, membuka file, keperluan seo, menjalankan kode javascript dan lain sebagainya.

Cara Membuat Link

Untuk membuat sebuah link kita hanya perlu menggunakan tag <a> dengan atribut href yang diisi alamat halaman tujuan.
Cara membuat link di html
Contoh,
Silahkan kalian buka teks editor kalian masing-masing, kemudian ketik kode dibawah ini,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <a href="page2.html">link to page2</a>
    </body>
</html>
Simpan dengan nama file contoh_link.html.
Kemuadian buat file html kedua dengan nama page2.html satu folder dengan file contoh_link.html, kemudian ketik kode berikut didalamnya.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <p>ini halaman kedua </p><a href="contoh_link.html">Kembali</a>
    </body>
</html>
Contoh pembuatan link
Hasilnya,
Contoh link di html
Kita juga bisa mengganti isi dari atribut href dengan alamat website lain,
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  Pergi ke <a href="https://deretcode.com">deretcode.com</a>
    </body>
</html>
Hasilnya,
direct link html

Atribut-atribut pelengkap link

Link juga memiliki beberapa atribut lainnya selain href .
Yaitu,
  • rel digunakan untuk keperluan seo
  • title digunakan untuk memberikan teks informasi ketika link disorot kursor
  • download digunakan untuk membuat link download
  • target digunakan untuk menentukan target pembukaan link

Atribut rel

Atribut rel dapat disini dofollow atau nofollow
<a href="https://deretcode.com" rel="dofollow">deretcode</a>

Atribut title

Atribut title dapat kita isi dengan teks keterangan link atau judul link itu sendiri
<a href="https://deretcode.com" title="link ini menuju ke blog deretcode">deretcode</a>

Atribut Download

Atribut ini tidak memiliki value apapun, cukup tulis nama atribut tersebut pada <a> 
<a href="https://deretcode.com/file.zip" title="link unduh" download>Unduh</a>

Atribut target

Atribut target memiliki value khusus yaitu,
1.  _blank , link akan membuka tab baru browser
2.  _self, link akan dibuka pada frame itu sendiri (bawaan browser).
3. nama_iframe, link akan dibuka pada iframe target.
4.  _top, link akan dibuka pada pada top parent
5. _parent, link akan dibuka pada frame induk.
Untuk lebih jelasnya kita tes satu satu,

_blank taget

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  Buka tab baru <a href="https://deretcode.com" target="_blank">deretcode.com</a>
    </body>
</html>
Hasilnya,
Contoh link blank target

_self target

Tanpa ditulis otomatis link yang dibuat akan memiliki settingan self target
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  Buka tab baru <a href="https://deretcode.com" target="_self">deretcode.com</a>
    </body>
</html>
Hasilnya,
Contoh self target

iframe target

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  Buka di iframe <a href="https://deretcode.com" target="myframe" >deretcode.com</a>
	  <hr/>
	  <iframe name="myframe" width="500px" height="500px"/>
    </body>
</html>
Hasilnya,
Contoh iframe taget

_parent target

Parent target agak sedikit rumit untuk dijelaskan.
Jadi kita langsung praktik aja.
Buat 3 buah file html dengan nama page1.html, page2.html dan page3.html. Kemudian tulis kode berikut
page1.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  Ini Page 1
	  <hr/>
	  <iframe src="page2.html" width="500px" height="500px"/>
    </body>
</html>
page2.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body align="center">
	  Ini Page 2
	  <hr/>
	  <iframe src="page3.html" width="400px" height="400px"/>
    </body>
</html>
page3.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body align="center">
	  Ini Page 3 <br/>
	  Buka <a href="https://deretcode.com" target="_parent">deretcode.com</a>
    </body>
</html>
Silahkan kalian buka file page1.html menggunakan browser, maka hasilnya seperti berikut,
Contoh target parent
Jadi ketika kita menggunakan target="_parent"  yang akan menjadi targetnya adalah page2, karena page2 adalah parent pertama dari page3.

_top target

Sedikit berbeda dengan _parent target, jika kita menggunakan _top yang akan menjadi target adalah frame parent paling atas.
Silahkan kalian edit page3.html yang sudah kita buat tadi menjadi seperti berikut,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body align="center">
	  Ini Page 3 <br/>
	  Buka <a href="https://deretcode.com" target="_top">deretcode.com</a>
    </body>
</html>
Kemudian buka kembali page1.html menggunakan browser,  maka hasilnya seperti berikut,
Contoh top taget link
Jadi ketika kita menggunakan target="_top"  yang akan menjadi targetnya adalah page1, karena page1 adalah parent teratas.

Membuat Link Gambar

Membuat link tidak hanya berupa teks, kita juga bisa membuat link dari gambar atau elemen lainnya,
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body align="center">
	  <a href="https://deretcode.com"><img src="gambar.png" width="50px"/></a>
    </body>
</html>
Hasilnya,
Membuat link gambar

Membuat Link Menu

Setelah kita berhasil membuat link, yuk kita coba membuat menu navigasi sederhana pada halaman website.

  1. Buat 3 buah file html dengan nama home.html, about-us.html dan contact-us.html.
  2. Tulis kode berikut pada home.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Deretcode.com</title>
        </head>
        <body align="center">
    	  <h1>Deretcode.com
    	  <hr/>
    	  <a href="home.html">Home</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a>
    	  <article>
    		<p>
    		 Apa yang ingin kamu cari?
    		</p>
    	  </article>
        </body>
    </html>
  3. Tulis kode berikut pada about-us.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Deretcode.com</title>
        </head>
        <body align="center">
    	  <h1>Deretcode.com
    	  <hr/>
    	  <a href="home.html">Home</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a>
    	  <article>
    		<p>
    		 Kami adalah pemenang
    		</p>
    	  </article>
        </body>
    </html>
  4. Tulis kode berikut pada contact-us.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Deretcode.com</title>
        </head>
        <body align="center">
    	  <h1>Deretcode.com
    	  <hr/>
    	  <a href="home.html">Home</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a>
    	  <article>
    		<p>
    		 Hubungi Kami Di 085xxxxxxxx
    		</p>
    	  </article>
        </body>
    </html>
  5. Buka home.html lewat browser
Hasilnya,
Contoh membuat navigasi

Membuat Scroll Menu

Scroll menu adalah menu yang ketika menu tersebut di klik, halaman akan menampilkan bagian elemen tertentu sesuai id elemen tersebut. 
Scroll menu, biasanya digunakan pada website single page.
Membuat scroll menu hanya perlu mengisi atribut href dengan # + [id elemen tujuan]
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body align="center">
      <a href="#bottom_page">Go To Bottom</a>
	  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  <div id="bottom_page">This is bottom of page</div>
   </body>
</html>
Hasilnya,
Contoh scrolling menu


Sampai disini tutorail cara membuat link html. Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.

advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat Link Dan Menu"

Silahkan berkomentar dengan baik dan bijak!