1. Penggunaa Tag <a>...</a>
Tag ini di gunakan untuk menghubungkan ke sebuah halaman
atau bahasa yang sering digunakan yaitu link atau hyperlink. Bentuk link bisa
tulisan ataupun gambar, semua tulisan atau gambar yang diapit <a>dan
</a> maka akan dianggap link oleh browser.
Ketik contoh dibawah ini :
<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>
<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>
Lihat hasilnya pada gambar dibawah ini
2. 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.
Ketik script dibawah ini
<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>
<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>
Maka hasilnya :
3. Tag <img> (gambar)
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
‐ 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">
<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>
</html>
4. Tag Tag <ol>...</ol>,
<ul>...</ul> dan <li>...</li>
Kali ini kita akan membahas 3 tag sekaligus. Karena
masing-masing tag tidak dapat dipisahkan. Tag <ol> dan <ul>
keduanya membutuhkan tag <li> agar dapat menampilkan output. Tag-tag ini
berguna untuk menyusun suatu daftar yang ingin anda tonjolkan pada pengunjung
website.
Sekarang kita coba praktekan
<html>
<head>
<title>Atribut dari tag ol, ul dan li</title>
</head>
<body>
<p><b>Penggunaan tag ol dengan li</b></p>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
<li>Ini nomor 3</li>
</ol>
<p><b>Penggunaan tag ul dengan li</b></p>
<ul>
<li>Ini bullet 1</li>
<li>Ini bullet 2</li>
<li>Ini bullet 3</li>
</ul>
<p><b>Gabungan tag ol, ul dan li</b></p>
<ul>
<li>Ini bullet 1</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
<li>Ini bullet 2</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
</ul>
</body>
</html>
<head>
<title>Atribut dari tag ol, ul dan li</title>
</head>
<body>
<p><b>Penggunaan tag ol dengan li</b></p>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
<li>Ini nomor 3</li>
</ol>
<p><b>Penggunaan tag ul dengan li</b></p>
<ul>
<li>Ini bullet 1</li>
<li>Ini bullet 2</li>
<li>Ini bullet 3</li>
</ul>
<p><b>Gabungan tag ol, ul dan li</b></p>
<ul>
<li>Ini bullet 1</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
<li>Ini bullet 2</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
</ul>
</body>
</html>
Mudah bukan??? Oke sekian tutorial HTML semoga berguna dan
bermanfaat untuk kalian semua.
