MODUL PERKULIAHAN

HyperText Markup Language

(HTML) bagian 2









Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
Ilmu Komputer Teknik Informatika
03
87044 Rakhmat Arianto, S.ST., M.Kom



Abstract Kompetensi

Bagian ini akan menjelaskan dasar-
dasar HTML yang meliputi: membuat
link, memasukkan gambar, membuat
list, dan membuat tabel
Mahasiswa dapat mengetahui
bagaimana cara membuat link,
memasukkan gambar, membuat list,
dan membuat tabel dalam HTML.

2014
2
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

Membuat Link
Hampir semua halaman web yang kita jumpai di internet selalu menyediakan link ke
dokumen atau halaman lain. Link (sebuah singkatan dari Hyperlink Text) berguna untuk
memudahkan user dalam menelusuri seluruh isi atau informasi yang tersimpan dalam
website bersangkutan. Secara default, link dalam dokumen HTML ditandai dengan teks
berwarna biru dan memiliki garis bawah serta jika mengarahkan kursor mouse ke teks
tersebut, maka penunjuk mouse akan berubah menjadi gambar tangan. Padabagian ini kita
akan mempelajari teknik-teknik pembuatan link yang dapat diterapkan dalam dokumen
HTML.
Tag <a> (anchor)
Untuk pembuatan link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang
berpasangan dengan tag </a>. Setiap teks yang diapait oleh tag ini akan ditampilkan
sebagai link.Bentuk umum pembuatan link dalam dokumen HTML adalah sebagai berikut:
<a href=DokumenLain>Teks Link </a>
Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau halaman
mana yang akan dipanggil pada saat link tersebut diklik atau dipilih oleh user.
Jenis-jenis Link
HTML membedakan jenis link berdasarkan lokasi dokumen yang akan diakses.
Adapun jenis-jenis tersebut adalah sebagai berikut:
Link absolut
Link Relatif
Link dalam dokumen yang sama
Link Absolut
Link absolut adalah suatu link yang tujuannya mengarah ke alamat website lain.
Sebagai contoh, kita ingin mengembangkan web yang berisi tentang pemrograman
database, lalu kita ingin menyediakan suatu link yang berkaitan dengan isi website kia
(misalnya ke website Oracle), dengan menuliskan kode seperti berikut:
<a href=http://www.oracle.com>Oracle Website</a>
2014
3
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

Link seperti di atas disebut sebgai link absolut. Di sini, alamat website tujuan harus
ditulis secara lengkap. Berikut contoh kode yang akan menunjukkan penggunaan link
absolut.

Hasil dari contoh kode program di atas adalah seperti pada gambar di bawah ini.

Link Relatif
Link relatif adalah suatu link yang tujuannya mengarah ke dokumen-dokumen lain
yang masih berada di dalam satu komputer yang sama. Penulisan alamat tujuannya pun
tidak perlu ditulis secara lengkap, cukup nama dokumennya saja. Perhatikan contoh kode
berikut:
index.html

Kode di atas digunakan untuk membuat link ke file kontak.html yang lokasinya
berada dalam satu folder dengan file index.html.
2014
4
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

kontak.html

Ketika file index.html dipanggil melalui suatu web browser, hasil yang akan
ditampilkan adalah sebagai berikut:

Jika link dalam dokumen di atas dipilih atau diklik, maka tampilan akan berubah
menjadi seperti berikut:

Link yang terdapat dalam dokumen kontak.html berguna untuk mengarah kembali ke
dokumen awal. Jika kita ingin mengakses dokumen lain yang berada dalam subfolder
tertentu, maka menggunakan format penulisan sebagai berikut:
<a href=programming/web/contohlink.html>Pemrograman Web</a>
2014
5
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

Format penulisan di atas mengartikan bahwa Programming adalah subfolder dari
folder yang menyimpan file index.html dan web adalah subfolder dari folder Programming.
Jika digambarkan, posisi penempatan folder dan file-nya adalah sebagai berikut:

Link dalam Dokumen yang Sama
Link juga dapat berperan untuk mengaktifkan bagian teks atau gambar tertentu yang
masih berada dalam satu dokumen yang sama. Link seperti ini sepertinya biasanya dijumpai
pada halaman yang web yang memiliki informasi yang panjang atau pada dokumen yang
memiliki daftar isi di bagian atasnya. Untuk membuat link seperti ini, terlebih dahulu kita
perlu memberikan nama pada bagian teks atau gambar tertentu sebagai bagian yang akan
dituju ketika link tersebut diklik. Pemberian nama tersebut dilakukan dengan cara
menuliskan kode berikut:
<a name=TujuanLink>Teks atau gambar</a>
Selanjutnya, untuk membuat link yang akan mengarah ke teks atau gambar yang telah
dinamai tersebut adalah dengan cara seperti berikut:
<a href=#TujuanLink>Teks atau gambar</a>
Tanda # di atas menunjukkan bahwa tujuan link adalah nama bagian, bukan berupa file.
Untuk membuktikan konsep di atas, berikut contoh penggunaannya di bawah ini.
Root
Programming
Web
Contohlink.html
index.html
2014
6
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id


Link ke Bagian Tertentu dalam Dokumen Lain
Link juga dapat mengarah ke suatu bagian tertentu yang terdapat dalam dokumen lain.
Untuk membuat link semacam ini, bagian tertentu harus ditandai dengan pemberian nama
seperti di atas. Yang berbeda hanyalah pada penulisan tujuan link-nya saja. Pada kasus
seperti ini, kita perlu menambahkan nama bagian pada tujuan link, seperti berikut:
<a href=NamaFile#NamaBagian>Teks atau gambar</a>
Contoh :
File1.html











2014
7
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

File2.html

Hasilnya adalah seperti gambar di bawah ini.

Jika link di atas diklik, maka akan menampilkan hasil seperti gambar di bawah ini .

2014
8
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

Penentuan Target Link
Target atau tujuan dokumen yang dihubungkan melalui suatu link dapat ditentukan
sendiri oleh kita. Target yang dimaksud di sini adlaah tempat dimana dokumen akan
ditempatkan atau ditampilkan. Dalam keadaan default (ketika atribut TARGET tidak
disertakan), dokumen baru yang ditampilkan pada saat link dipilih akan menimpa dokumen
lama. Untuk melakukan hal ini, kita hanya perlu menambahkan atribut TARGET di dalam tag
<a> yang memiliki bentuk umum penulisan seperti berikut:
<a href=NamaDokumen target=NamaTarget>Text Link</a>
NamaDokumen adalah nama dokumen yang akan ditampilkan jika link bersangkutan
dipilih/diklik dan NamaTarget adalah target atau tempat tujuan dari dokumen yang akan
ditampilkan. NamaTarget bias bernilai TOP, _BLANK, maupun nama frame (jika layar web
kita bagi dengan menggunakan frame).
Link untuk Email
Untuk menambahkan link yang memungkinkan pengunjung halaman web yang
dibuat mengirimkan email dengan tujuan mengirimkan pesan, pertanyaan, atau komentar
ditujukan secara langsung kepada pemilik halaman web, kita dapat menggunakan tag <a
href> namun ditambahkan beberapa kode sebagai berikut:
<a href=mailto:AlamatEmail>Teks atau gambar</a>
Jika kita menginginkan link email memiliki subyek tertentu, maka kita dapat menuliskan kode
sebagai berikut:
<a href="mailto:AlamatEmail?subject=Subyek">Teks atau gambar</a>
Apabila kita menginginkan pengunjung mengirimkan email dengan setting isi body email
tertentu, maka kita dapat menuliskan kode sebagai berikut:
<a href="mailto:AlamatEmail?body=IsiBodyEmail">Teks atau Gambar</a>
Atau kita dapat mengkombinasikan keduanya dengan menggunakan kode berikut:
<a href="mailto:AlamatEmail?subject=Subyek&body=IsiBodyEmail">Teks
atau Gambar</a>


2014
9
Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning
Rakhmat Arianto, S.ST., M.Kom.
http://www.mercubuana.ac.id

Tugas
Buat halaman web sederhana, yaitu halaman web pribadi mengenai riwayat hidup saudara,
dengan menampilkan daftar list sebagai berikut:
1. Judul Homepage : Homepage Pribadi
2. Tampilan :

1. Nama: [nama anda]
2. NIM : [nim anda]
3. Kelas : [kelas anda]
4. Tempat/Tanggal Lahir : [tempat lahir anda]/[tanggal lahir anda]
5. Alamat :
[alamat anda (petunjuk bila alamatlebih dari 10 huruf harus pindah baris)]
6. Riwayat Pendidikan :
A. SD :
B. SMP :
C. SMA :
7. Email : [email anda (petunjuk gunakan link address)]
8. Homepage : [homepage anda (petunjuk gunakan link address)]
9. Hobby :
[hobby anda (petunjuk bila hoby lebih dari satu, maka harus pindah
baris]
<----------------------------- horisontal rules ---------------------------------------------->
10. Diskripsi Pribadi Saya :
[berisi tentang pribadi anda (petunjuk gunakan pemformatan page untuk
memperindah tampilan)]