A. Tag <a>...</a>
Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang menuju
halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah tulisan atau
gambar yang merujuk/membuka halaman suatu website. Segala tulisan atau tag lainnya yang
diapit tanda <a> dan </a> akan dianggap link oleh browser.
Silahkan ketikan coding berikut
__________________________________________________________________________________
<html>
<head>
<title>Atribut dari tag A</title>
</head>
<body>
<p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan
tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada
dalam tag <a> dan </a> akan dianggap link oleh browser. Atribut yang
sangat penting dalam tag a adalah atribut <i>href</i>. Isi dari atribut ini
adalah alamat website yang dituju.</p>
<p>Contoh link ke alamat Google</p>
<a href="http://www.google.com">Ini link ke google.com</a>
<p>Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan
window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent",
"_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi
atribut default dari target adalah "_self" dimana alamat website akan dibuka pada
window yang sama.
<p>Contoh link dengan atribut target="_blank"</p>
<a target="_blank" href="http://www.rahasia-webmaster.com">Bagaimana Menjadi
Webmaster dalam 30 Hari</a>
<p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas
Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan
bohlam.</p>
</body>
</html>
__________________________________________________________________________________
Simpan dengan nama tag_a.html, maka hasilnya akan seperti gambar berikut :
B. Tag <body>...</body>
Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan berpengaruh
pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa atribut namun ada dua
yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk
membuat sebuah gambar menjadi latar dari halaman. Sedangkan bgcolor digunakan untuk
menset warna dari latar halaman website. Kali ini yang akan dibahas hanyalah tag bgcolor
karena tag background nilainya sama dengan tag image yang akan dibahas kemudian.
Silahkan ketikan coding berikut
__________________________________________________________________________________
<html>
<head>
<title>Atribut dari Tag Image</title>
</head>
<body bgcolor="#000000" link="http://www.google.com">
<font color="#ffffff" face="verdana">
<p><b>Ini body dengan bgcolor="#000000" atau samadengan "black"</b><br> dan font
color diset ="#ffffff" atau samadengan "white".</p>
<p>Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf
seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p>
</body>
</html>
__________________________________________________________________________________
Simpan dengan nama tag_body.html, maka hasilnya akan nampak seperti gambar berikut:
C. Tag <img>
Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu
anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar
pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img
bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut
yaitu
‐ src : letak file gambar yang akan ditampilkan
‐ border: tebal bingkai gambar
‐ height: menentukan tinggi image/gambar
‐ width: menentukan lebar image/gambar
Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file
html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika
letak filenya berada pada sub folder/direktori maka nilainya adalah
src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas
file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash).
Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama
tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya
src=”../nama_folder/nama_file.jpg”.
Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat sebelumnya.
Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah nama folder itu gambar.
Lalu copykan satu gambar apa saja kedalam folder gambar tersebut.
Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda.
__________________________________________________________________________________
<html>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p>
<img src="../gambar/e-book.jpg">
<p><b>Tag img dengan border="1"</b></p>
<img src="../gambar/e-book.jpg" border="1"</b><p>
<p><b>Tag img dengan height dan width</b></p>
<img src="../gambar/e-book.jpg" border="1" height="300" width="200">
</body>
</html>
__________________________________________________________________________________
Lalu simpan dengan nama tag_img.html.
No comments:
Post a Comment