--------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------

Thursday, November 13, 2008

HTML minggu ke-8

---------------------------------------------------------------------------------


 


 


 


 


 

8

LINK HTML


 


 


 

Tujuan Instruksional :


 


 

  1. Mahasiswa memahami tag-tag untuk pembuatan link pada dokumen HTML
  2. Mahasiswa dapat membuat link dengan menggunakan teks
  3. Mahasiswa dapat membuat link dengan menggunakan image
  4. Mahasiswa dapat membuat link untuk mengirimkan pesan melalui email


 


 


 


 


 


 

Link HTML


 

HTML menggunakan hyperlink untuk membuat link ke dokumen lain atau bagian lain dari dokumen di Internet, yaitu dengan tag anchor <a></a>. Tag anchor ini dapat merujuk ke berbagai jenis dokumen multimedia, seperti dokumen teks, gambar/image, suara, video, dan lain-lain.


 

Berikut ini adalah beberapa contoh penggunaan tag <a> dalam HTML :


 

  1. Atribut HREF digunakan untuk memberikan alamat link yang dikehendaki, sedangkan teks yang berada di antara tag <a> dan </a> akan ditampilkan sebagai hyperlink.


 

<a href="nama_file">teks</a>


 

  1. Atribut TARGET digunakan untuk mendefinisikan di mana dokumen pada link tersebut akan dibuka. Pada contoh di atas TARGET="_BLANK" akan membuka dokumen pada window web browser baru. Secara default, tanpa atribut TARGET dokumen akan dibuka pada window yang sama.


 

<a href="nama_file" target="_blank">teks</a>


 

  1. Atribut NAME digunakan untuk memberikan nama anchor. Dengan nama anchor ini dapat dibuat link untuk menuju ke lokasi spesifik pada halaman HTML yang ditunjukkan oleh nama anchor tersebut. Hal ini memudahkan pencarian bagian halaman HTML tanpa menggulung layar web browser.


 

<a name="label">teks</a>


 

Sedangkan link yang digunakan untuk menuju nama anchor seperti yang ditunjukkan di atas adalah sebagai berikut :


 

<a href="#label">link menuju bagian label</a>


 




 


 

8
Latihan 1 : Hyperlink Teks


 

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<p><a href="5-1.html">Teks ini</a> adalah link ke dokumen lain.</p>


 

<p><a href="http://www.yai.ac.id/">Teks ini</a> adalah link ke dokumen lain di Internet.</p>


 

</body>

</html>


 


 


 


 


 

  1. Simpan file di My Document sebagai "coba8-1.html" dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba8-1.html" pada bagian File name, klik tombol Save.
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-1.html), lalu klik OK.


 


 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan bagaimana cara membuat dua hyperlink yang berbeda.


 

Hyperlink pertama digunakan untuk mengakses dokumen lain yang berada pada komputer (server) yang sama. Hal ini terlihat dari nama file yang tertulis pada tag <a> HTML.


 

Sedangkan hyperlink kedua digunakan untuk mengakses dokumen (halaman) lain yang berada di Internet. Oleh karena digunakan sebuah alamat Internet pada tag <a> HTML.


 


 

8
Latihan 2 : Hyperlink Image


 

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<p>

Image juga dapat digunakan sebagai link :

<a href="6-1.html"><img src="buttonnext.gif"></a>

</p>


 

</body>

</html>


 

  1. Simpan file sebagai "coba8-2.html"
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-2.html), lalu klik OK.


 


 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan bagaimana cara membuat hyperlink dengan menggunakan image.


 

Sebagai pengganti teks maka digunakan link berupa image. Image disisipkan dengan menggunakan tag <img src="nama_file_image">.


 


 


 


 

8
Latihan 3 : Link Ke Alamat Email (1)


 

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<p>

Ini adalah contoh link ke alamat email:

<a href="mailto:nama@alamat.com">Kirim Email</a>

</p>


 

</body>

</html>


 

  1. Simpan file sebagai "coba8-3.html"
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-3.html), lalu klik OK.


 


 

&
Penjelasan


 

Contoh latihan di atas mendemonstrasikan bagaimana tag <a> dapat digunakan untuk membuat link ke alamat email. Hal ini berfungsi hanya bila di perangkat komputer yang digunakan telah terinstall program email client, seperti Outlook Express, Eudora, IncrediMail, dan lain-lain.


 

Pada contoh latihan di atas, bila link Kirim Email diklik, program email akan secara otomatis terbuka dengan alamat email yang dituju sesuai dengan yang telah ditentukan pada atribut HREF, yaitu email dengan alamat : nama@alamat.com.


 


 

8
Latihan 4 : Link Ke Alamat Email (2)


 

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :


 

<html>

<body>


 

<p>

Ini adalah contoh link ke alamat email:

<a href="mailto:nama1@alamat.com?cc=nama2@alamat.com&bcc=nam3@alamat.com&subject=Undangan%20Pesta&body=Kamu%20diundang%20ke%20pesta%20ulang%20tahun%20besok%20malam!">Kirim Undangan</a>

</p>


 

</body>

</html>


 


 


 

  1. Simpan file sebagai "coba8-4.html"
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba8-4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba8-4.html), lalu klik OK.


 


 

&
Penjelasan


 

Beberapa informasi tambahan pada email dapat disertakan, seperti subyek email, carbon copy (cc), blind carbon copy (bcc), dan bahkan isi dari email tersebut.


 

Pada contoh, bila link Kirim Undangan diklik, maka akan terbentuk sebuah email dengan informasi sebagai berikut :


 

  • To : nama1@alamat.com
  • Cc : nama1@alamat.com
  • Bcc : nama1@alamat.com
  • Subject : Undangan Pesta
  • Body : Kamu diundang ke pesta ulang tahun besok malam


     

    Perhatikan bahwa untuk setiap spasi digunakan tanda "%20" di mana hal tersebut dimaksudkan agar teks dapat ditampilkan sebagaimana mestinya pada web browser.


 


 


Posted by setsuna.f.seiei at 7:16 PM  

Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
----------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------