materi tugas HTML
cara membuat table HTML
<TABLE></TABLE> – merupakan tag awal, sebagai penanda awal dan menjadi akhir dari suatu pembuatan tabel.
<TR></TR> – merupakan tag yang berfungsi untuk menandakan suatu baris yang ada di dalam tabel
<TD></TD> – merupakan tag yang berguna untuk membagi baris tabel untuk menjadi beberapa kolom.
Dan dari tag tersebut memiliki atribut seperti di bawah ini:
bgcolor - untuk warna backgorund dari tabel
background - ini dpaat kita gunakan apabila ingin membuat background tabel di ambil dari suatu gambar
width – berguna sebagai atribut untuk menentukan lebar tabel
height – menentukan tinggi tabel
align - atribut yang berguna untuk mengatur perataan horizontal
valign – atribut yang berguna untuk mengatur perataan vertikal
border - atribut ini berguna sebagai atribut untuk menentukan lebar bingkai pada tabel
cellspacing – atribut untuk menentukan jarak antar kolom
cellpadding – menentukan jarak antara isi dengan tepi kolom (bisa di bilang margin)
colspan – atribut yang berguna untuk menentukan berapa kolom tabel yang akan digabung
cowspan – atribut yang berguna untuk menentukan berapa baris yang akan digabung
Sebagai contoh dari penggunaan tabel, dapat dilihat melalui beberapa contoh tabel dan coding html nya:
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″>
<TR>
<TD>Ini kolom pertama</TD>
<TD>Ini kolom kedua</TD>
</TR>
<TR>
<TD>Ini kolom pertama baris kedua</TD>
<TD>Ini kolom kedua baris
kedua</TD>
</TR>
</TABLE>
</BODY>
</HTML>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%”
BORDER=”1″>
<TR>
<TD bgcolor=”#009900″>Ini kolom pertama</TD>
<TD background=”background.gif”>Ini kolom kedua</TD>
</TR>
<TR>
<TD>Ini kolom pertama baris kedua</TD>
<TD>Ini kolom kedua baris kedua</TD>
</TR>
</TABLE>
</BODY>
</HTML>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″>
<TR>
<TD bgcolor=”#009900″ width=”70%”>
Ini kolom pertama</TD>
<TD background=”background.gif” width=”30%”>
Ini kolom kedua</TD>
</TR>
<TR height=”200″>
<TD valign=”top”>Ini kolom pertama baris kedua</TD>
<TD
align=”right”>Ini kolom kedua baris kedua</TD>
</TR>
</TABLE>
</BODY>
</HTML>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″ CELLPADDING=”5″>
<TR>
<TD
bgcolor=”#009900″ width=”70%”>
Ini kolom pertama</TD>
<TD
background=”background.gif” width=”30%”>
Ini kolom kedua</TD>
</TR>
<TR height=”200″>
<TD valign=”top”>Ini kolom pertama baris
kedua</TD>
<TD align=”right”>Ini kolom kedua baris kedua</TD>
</TR>
</TABLE>
</BODY>
</HTML>
———————————————————————
<HTML>
<BODY>
<TABLE WIDTH=”80%” BORDER=”1″ CELLSPACING=”5″>
<TR>
<TD
bgcolor=”#009900″ width=”70%”>
Ini kolom pertama</TD>
<TD
background=”background.gif” width=”30%”>
Ini kolom kedua</TD>
</TR>
<TR height=”200″>
<TD valign=”top”>Ini kolom pertama baris
kedua</TD>
<TD align=”right”>Ini kolom kedua baris kedua</TD>
</TR>
</TABLE>
</BODY>
</HTML>
———————————————————————
<TABLE WIDTH=”80%” BORDER=”1″
CELLSPACING=”5″>
<TR>
<TD bgcolor=”#009900″ COLSPAN=”2″>
Ini kolom
gabungan</TD>
</TR>
<TR height=”200″>
<TD
valign=”top”>Ini kolom pertama baris kedua</TD>
<TD align=”right”>Ini kolom kedua
baris kedua</TD>
</TR>
</TABLE>
———————————————————————
<TABLE WIDTH=”80%” BORDER=”1″ CELLSPACING=”5″>
<TR>
<TD
bgcolor=”#009900″ width=”70%” ROWSPAN=”2″>
Ini kolom pertama gabungan</TD>
<TD
background=”background.gif” width=”30%”>
Ini kolom kedua</TD>
</TR>
<TR height=”200″>
<TD align=”right”>Ini kolom kedua baris kedua</TD>
</TR>
</TABLE>
cara membuat ganbar HTML
Kode HTML 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=”../nama folder/nama file.jpg”>
<p><b>Tag img dengan border=”1″</b></p>
<img src=”../nama folder/nama file.jpg” border=”1″</b><p>
<p><b>Tag img dengan height dan width</b></p>
<img src=”../nama folder/nama file.jpg” border=”1″ height=”300″ width=”200″>
</body>
</html>
Itulah contoh Kode HTML untuk menampilkan gambar, semoga artikel saya ini bermanfaat buat temen-temen, tetap semangat ya
Label: pmrograman
