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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg879pE9uyKGBsPrXUEdutO7-IAae_i5tPvnejnxaoRIp9KBLqDAwtCifOGLK6gAgrsXK2TIjpA7MmAQMrXRhp4M4Je7Ab-e_hZ0ZfbvC8tt3C0tpDSULVB6aQl9c40F5iaw_P7gMoqhqZ4/s400/LogoCreativoltz.png" width="300" height="150" alt="logo Creativoltz">
Hasilnya seperti berikut :


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 https://creativoltz.blogspot.com/2012/05/tutor-dasar-html-4.html?m=0. Terima kasih!

Artikel terkait :