7. Link HTML

Kita pasti menemukan banyak sekali link pada halaman web, dalam HTML link di definisikan dalam tag

<a href="URL" atribut="nilai atribut">Teks Link</a>

Contoh:

- Link Biasa

<a href="http://detik.com">Website detik</a>

- Link dengan atribut target

<a href="http://detik.com" target="_BLANK">Website detik ke new window</a>

target="_BLANK" jika diklik akan membuka url di window yang berbeda. btw tidak perlu atribut itu jika anda mengkliknya menggunakan "klik kanan" => "open in new tab" hehehe...

- Lnk ke halaman lokal

<a href="/content/coba.html" title="Ke halaman lokal">Ke hlm coba.html</a>

Tidak perlu URL nya di isi http:// langsung diarahkan ke link halamannya saja, jika link bukan berupa halaman web, maka akan di download oleh browser, misal format doc, xls, zip, dll.

Integrasi layout dengan link

Masih ingat tutorial Layout Halaman HTML? disini kita akan menggunakan file layout_table.html yang telah kita buat, kalau belum membuat silahkan ketik kode dibawah ini.

<!DOCTYPE html>
<html>

   <head>
      <title>Layout HTML menggunakan table</title>
   </head>

   <body>
      <table width = "100%" border = "0">         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3" style="padding:10px">
               <h1>Ini adalah header halaman web</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaaaaa" width = "30%" style="padding:10px">
               <h2>Main Menu</h2>
               <ul>
                    <li><a href="layout_table.html" title="Home">Home</a></li>
                    <li><a href="halaman_html.html" title="HTML">HTML</a></li>
                    <li><a href="halaman_css.html" title="CSS">CSS</a></li>
                    <li><a href="halaman_javascript.html" title="Javascript">Javascript</a></li>
               </ul>
            </td>
            
            <td bgcolor = "#eeeeee" width = "70%" height = "300" style="padding:10px">
               <p>Ini adalah isi dari home</p>
               <p>Ada ditengah dengan background #eeeeee</p>
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3" style="padding:10px">
               <center>
                  Footer area<br />Copyright 2018 namawebmu.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

Buat lagi file dengan nama: halaman_html.html, halaman_css.html, dan halaman_javascript.html

Isi file tersebut dengan kode yang sama dengan layout_table.html

Namun pada bagian:

            <td bgcolor = "#eeeeee" width = "70%" height = "300" style="padding:10px">
               <p>Ini adalah isi dari home</p>
               <p>Ada ditengah dengan background #eeeeee</p>
            </td>

Ganti teks sesuai keinginan, misalnya "Ini adalah isi dari home" diganti dengan "Ini adalah isi dari HTML", "Ini adalah isi dari Javascript", dst..

Lalu jalankan, hasilnya spt di bawah ini:

SIlahkan coba klik link yang ada di menu kiri, seharusnya halaman akan tampil berbeda2 sesuai link yang klik.

Sementara cukup dulu materi tentang link, lanjut ke materi FORM HTML, siappp....