TUTOR DASAR HTML 4

Belajar dasar HTML 4
Sekarang saya akan bahas kelanjutan dari tutor selanjutnya, mudah-mudahan sobat semua tidak bosan untuk singgah di tempat saya yang sangat sederhana ini, ok kita mulai aja langsung ya.
10.     Tag Image
Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jpeg, gif, png, dan sebagainya. Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan png.
Contoh syntax tag image :
<IMG src="url_file" width="img_width" height="img_height" alt="alt_teks">
Src : digunakan untuk mengetahui letak file yang akan dipanggil.
Widht : untuk mengukur lebar dari sebuah file gambar
Height : untuk mengukur tinggi dari sebuah file gambar
Alt : untuk memberikan keterangan dari file gambar tersebut

Contoh penggunaan :
<img src=" http://4.bp.blogspot.com/-bnCVnV6_2WQ/T6PfB0PrhqI/AAAAAAAAAns/l3EhTA-YugE/s400/LogoCreativoltz.png" width="300" height="150" alt="logo Creativoltz">
Hasilnya seperti berikut :
logo Creativoltz

Untuk menampilkan file gambar animasi gif, penggunaanya sama dengan contoh diatas.


11.     Tag Hiperlink
Dalam sebuah dokumen HTML mempunyai kekuatan utama yang terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka sebuah dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda.
Contoh syntax penulisannya sebagai berikut :
<a href="http://creativoltz.blogspot.com/">creativoltz</a>
Hasilnya seperti berikut :
creativoltz

Mailto :
Berikut ini contoh tag link yang digunakan untuk membuat sebuah link email yang bertujuan untuk memudahkan bagi kita dalam hal mengirim sebuah email kealamat email yang kita tuju. Hal ini dapat dengan mudah dilakukan dengan tag hyperlink ini, yaitu dengan menambah "mailto" dan alamat email tujuan.
Contohnya sebagai berikut :
<a href="mailto:creativoltz@gmail.com">Creativoltz Email</a>
Hasilnya seperti berikut :
Creativoltz Email


12.     Tag Tabel
Dalam sebuah dokumen HTML sering kita menemukan sebuah informasi olahan yang berbentuk tabel, untuk membuat sebuah tag tabel <table> kita memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi, berikut uraian tag yang diperlukan :

Tag
Fungsi
<table></table>
tag utama
<caption></caption>
Menampilkan judul tabel
<tr></tr>
Tag baris
<th></th>
Header table
<td></td>
Tag sel-sel tabel
Berikut ini beberapa atribut dari tag tabel :
Atribut
Fungsi
bgcolor
warna background
width, height
lebar dan tinggi tabel (dalam % atau pixel)
cellspacing
jarak antar cell
cellpadding
jarak teks ke cell
border
lebar garis batas, 0=tanpa garis batas
Berikut contoh syntax tag tabel sederhana :
<table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="orange">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</table>
Maka hasilnya seperti berikut :
No Nama Alamat

Contoh 2 dengan menambahkan beberapa attribut :
<table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="yellow">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td align=left>1</td>
<td align=center>Creative</td>
<td align=right>Sukabumi</td>
</tr>
<tr bgcolor="orange">
<td width="100" height="75" valign=top>2</td>
<td width="35%" height="75" valign=middle>blogger</td>
<td height="75" valign=bottom>Jakarta</td>
</tr>
</table>
Hasilnya sebagai berikut :
No Nama Alamat
1 Creative Sukabumi
2 blogger Jakarta

Contoh 3 :
<table width="100%" border="2" cellspacing="5" cellpadding="5" bgcolor="#4EF807">
<tr>
<td width="30%">&nbsp;</td>
<td colspan="3">colspan=3</td>
</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
</tr>
<tr>
<td width="31%">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
</tr>
</table>
Hasilnya seperti berikut :
  colspan=3
rowspan=4      
     


Mudah-mudahan tutorial yang sangat sederhana ini bisa bermanfaat buat sobat semua, mohon maaf atas segala kekurangannya.
Selamat belajar dan selamat berkreasi


Terimakasih

To be continued..

“Hopefully useful”
Wenks@Creativoltz
Anda baru saja membaca artikel yang berkategori Tutorial dengan judul TUTOR DASAR HTML 4. Anda bisa bookmark halaman ini dengan URL http://creativoltz.blogspot.com/2012/05/tutor-dasar-html-4.html. Terima kasih!