html

Selasa, 21 Agustus 2018

Bukit Gibeon.. Holiday with My Mine 💕💕

Senin, 14 November 2016

Contoh latihan Praktek HTML

ini adalah Contoh skrip sebagai berikut:

<html>
<head>
<title> membuat daftar dan font </title>
</head>
<body bgcolor="green" text="blue">
<div align="center"><font face="monotype corsiva" size="12" color="red">PENGETAHUAN TIDAK AKAN DATANG TANPA ADA USAHA UNTUK MENCARINYA</font><hr></div>
<div align="right"><h3>BERIKUT INI ADALAH 7 KEAJAIBAN DUNIA TERBARU VERSI CNN : </h3>
<ol>
<li>grand canyon </li>
<li>great barrier reef</li>
<li>mount everest </li>
<li>air terjun victoria </li>
<li>northern lights</li>
<li>volcano paricutin</li>
<li>pelabuhan rio de janerio</li>
<ul> </div>
<font color="yellow"> <p align="center">NAMA <b> <i> AIR TERJUN VICTORIA </i></b> SENDIRI DIBERIKAN OLEH SEORANG PENJELAJAH AUSTRIA, SYARAT - SYARAT UNTUK MELAKUKAN PERJALANAN PENJELAJAHAN DIANTARANYA :
<ul>
<li> membawa pakaian yang kuat dan ringan</li>
<li> membawa sepatu dan sarung tangan yang kuat dengan ringan</li>
<li> membawa tas yang kuat, dan mudah dibawa</li>
<li> membawa peralatan masak dan makan </li>
<li> membawa keperluan lain yang dibutuhkan </li>
<ul> </font>
</div> <p> SEBAGAIMANA DIKETAHUI, SETIAP DAERAH YANG DIJADIKAN OBJEK WISATA, PASTI MEMILIKI BERANEKA RAGAM JENIS MAKANAN DAN MINUMAN, DIANTARANYA :
<dl><font face="old english" color="white">
<dt> makanan </font>
<dd> nasi goreng </dd>
<dd> nasi putih </dd>
<dd> nasi soto </dd>
<dd> nasi dongen </dd>
<dd> mie goreng </dd>
<dd> mie tembok </dd>
<dd> mie bakso </dd>
</dt><font face="old english" color="white"><dt> MINUMAN</font>
<dd> teh botol </dd>
<dd> teh manis panas </dd>
<dd> teh manis dingin </dd>
<dd> susu panas dingin </dd>
<dd> cendol </dd>
<dd> bandreks </dd> <dt> </dl>
</body>
</html>

OUTPUTNYA:

(LATIHAN ) INI CONTOH SKRIP LATIHAN VERTEBRATA :

<html>
<head>
<title>vertebrata</title>
</head>
<body>
<h1>vertebrata</h1>
<ul>
<li>ikan</span>
<ul>
<li>patin</li>
<li>gurami</li>
<li>mujair</li>
</ul>
</li>
<li>amfibi</span>
<ul>
<li>ordo anura</li>
<ul>
<li>katak hijau</li>
<li>katak darat</li>
<li>katak ungu</li>
</ul>
</li>
<li>ordo urodela
<ul>
<li>salamander</li>
<li>mudpuppy</li>
</ul>
</li>
</ul>
</li>
<li>reptil</span>
<ul>
<li>buaya</li>
<li>ular cobra</li>
<li>penyu</li>
</ul>
</li>
</ul>
</body>
</html>

OUTPUTNYA :

SEKIAN CONTOH SKRIP DARI SAYA, KIRANYA BERMANFAAT BUAT KITA SEMUA

> THANK'S < :) :)

BAB 6 LAYOUT HTML

BAB 6

LAYOUT

LATIHAN 1

<html>
<head>
<title>Layout Dengan Tabel Index</title>
</head>
<body>
<font face="arial" size=3>
<table width=1010 align=center>
<tr>
<td width="240" bgcolor="#FF9900"><font size="3"
face="arial"><strong>Logo Usaha
</strong></font></td>
<td width="758" align=right valign=bottom>
<table bgcolor="FFAA00"
<tr>
<td><strong>Button Home</strong></td>
<td><strong><font size="3" face="arial">Button
Profil </font></strong></td>
<td><strong><font size="3" face="arial">Button
Produk </font></strong></td>
<td><strong><font size="3" face="arial">Button
Kontak </font></strong></td>
</tr>
</table>
</td></tr>
</table>
<table rules=group frame=box align=center>
<thead>
<tr><th bgcolor="#FF7700"colspan=3><p> </p>
<p>Gambar Header</p>
<p> </p></th>
</tr>
</thead>
<tbody>
<tr><th height=30 width=1000 bgcolor="#FF7700"
colspan=3><marquee behavior=alternate
scrollamount=3>
<b><font size="3" face="arial"> Ucapan Selamat Datang Marque </font></b>
</marquee></th></tr>
</tbody>
<tbody>
<tr>

<td valign=top align=center bgcolor="#FFAA00"
width=200>
<table>
<tr><td align=center><br><img src="_20160526_130727.jpg" witdh=250 height =250></td></tr>
<tr><td align=center><br>
<strong>Foto Saya </strong><br></td></tr>
<tr><td align=center><br><p><hr width=200
color="#FF7700">
Adalah Mahasiswa <font size="3" face="arial">AMIK
PARBINUS</font> yang mencoba untuk belajar
selagi masih sempat untuk belajar
<hr width=200 color="#FF7700"></p><br></td></tr>
<tr><td align=center><img src="Foto olvhy sherait1.jpg" witdh=250 height =250></td></tr>
<tr><td align=center>
<table>
<tr><td>Username</td><td><input type=text
size=15></td></tr>
<tr><td>Password</td><td><input type=text
size=15></td></tr>
<tr><td colspan=2><b>Lupa Password?</b></td></tr>
<tr><td colspan=2><a href ="index.html"><input
type=submit value=kirim></a><a
href="index.html"><input type=reset
value=batal></a></td></tr>
</table>
</td></tr>
</table>
</td>

<td valign=top align=center bgcolor="#FFAA00"
width=200>
<table>
<tr><td align=center><br><img
src="header1.png" witdh=200 height =100></td></tr>
<tr>
<td align=center><p><font size="3"
face="arial"><strong>Logo Usaha</strong></font></p>
<hr color="#FF7700"></td></tr>
<tr><td><b>INFO PRODUK TERBARU HARI
INI</b></td></tr>
<tr><td>Berikut daftar produk Terlaku hari ini
:</td></tr>
<tr><td>
<table width=500><tr><td>
<ul>
<li>Colpad</li>
<li>Mouse Variasi</li>
<li>Joystik</li>
</ul>
</td><td align=right><img src="coolpad.jpg"width=80
height=70></td><td align=right><img src="Joystik.jpg"width=80
height=70></td><td align=right></td></tr></table>
</td></tr>
<tr><td><b>INFO PRODUK DISKON 50%</b></td></tr>
<tr><td>Berikut daftar produk yang di diskon
:</td></tr>
<tr><td>
<table width=500><tr><td>
<ul>
<li>Flashdisk 4GB</li>
<li>Speaker Mini</li>
<li>Coling Pad</li>
</ul>
</td><td align=right><img src="flashdisk.png" width=80
height=70></td><td align=right><img src="speaker.png" width=80
height=70></td></tr></table>
</td></tr>
<tr><td><hr color="#FF7700"><b>INFO PRODUK KOMPUTER
DAN LAPTOP</b></td></tr>
<tr><td>Berikut daftar produk Komputer dan Laptop
:</td></tr>
<tr><td>
<table>
<tr>
<td><img src="komputer1.png" width=120
height=100></td>
<td><img src="komputer2.png" width=120 height=100></td>
<td><img src="1.png" width=120 height=100></td>
<td><img src="2.png" width=120
height=100></td>
</tr>
</table>
</td></tr>
</table>
</td>

<td valign=top align=center bgcolor="#FFAA00"
width=200>
<table align=center>
<tr><td align=center><br><img
src="22.png" witdh=60 height=60><br></td></tr>
<tr><td align=center>
<table align=center>
<tr><td><img src="asus.png" width=60
height=60><hr color="#FF7700"></td><td>Seperangkat
Komputer Desktop></td></tr>
<tr><td><img src="komputer2.png" width=60
height=60><hr color="#FF7700"></td><td>Notebook Terbaru Asus
1215B></td></tr>
</table>
</td></tr>
<tr><td align=center><img src="coolpad.jpg" witdh=60 height=60></td></tr>
<tr>
<td align=center>
<marquee direction="down" scrollamount=3>
<table align=center>
<tr>
<td align=center>
<hr color="FF7700" width=200>
Baru kemaren mesan hari ini sudah sampai gan di
temapet ane,rekomended deh pelayanannya,thanks gan
admin
</td>
</tr>
<tr>
<td align=center>
<hr color="#FF7700" width=200>
Harganya murah meriah,ane kemaren beli langsung
banyak,buat toko ane di Banjarmasin
</td>
</tr>
<tr>
<td align=center>
<hr color="#FF7700" width=200>
Wah,gua juga mau nih gan,kira kira ke Jogja
brapa ya ongkirnya?<hr color="#FF7700" width=200>
</td>
</tr>

</table>
</marqueee>
</td>
</tr>
<tr><td><b>Mau Kirim Pesan ?</b></td></tr>
<tr><td><a href="kontak.html"><input type=submit
value="klik disini"></a></td></tr>
<tr><td>

<table>
<tr>
<td><img src="1.png"width=50 height=50></td>
<td><img src="komputer1.png"width=50 height=50></td>
<td><img src="komputer2.png"width=50 height=50></td>
<td><img src="17.png"width=50 height=50></td>
</tr>
</table>
</td></tr>
</table>
</td>
</tr>
</tbody>
<tfoot>

<tr>
<td colspan=3 align=center bg color ="#FF7700"
height=50><b><font size="3"
face="arial"><Footer</font></b></td>
</tr>
</tfoot>
</table>
<br><br>
</font>
</body>

</html>

OUTPUTNYA:

LATIHAN 2

<td valign=top align=center bgcolor="#FFCC00"
width=500>
<table align=center width=470>
<tr><td align=center><br><img src="22.png"
width="350" height="300"><br></td></tr>
<tr><td><b><br>FORM KOMENTAR,PESAN,DAN SARAN</b></td></tr>
<tr><td><hr color="#FF7700">
<table>
<tr><td width=150><b>Nama Lengkap</b></td><td> :
</td><td><input type=text size=45></td></tr>
<tr><td width=150><b>Alamat Web</b></td><td> :
</td><td><input type=text size=45></td></tr>
<tr><td width=150><b>E-mail</b></td><td> :
</td><td><input type=text size=45></td></tr>
<tr><td width=150><b>Password</b></td><td> :
</td><td><input type=password size=45></td></tr>
<tr><td width=150 valign=top><b>Jenis
Kontak</b></td><td> : </td><td><input type=radio
name=kontak>Pesan<br><input type=radio
name=kontak>Kritik<br><input type=radio
name=kontak>Saran<br><input type=radio
name=kontak>Komentar</td></tr>
<tr><td width=150><b>Tanggal Lahir</b></td><td> :
</td><td><select>
<option>--Tanggal--</option>
<option>1</option><option>2</option><option>3</option>
<option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option><option>10</option>
<option>11</option><option>12</option><option>13</option><option>14</option><option>15</option>
<option>16</option><option>17</option><option>18</option><option>19</option>
<option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27
</option><option>28</option><option>29</option><option>30</option><option>31</option>
</select>
<select>
<option>--Bulan--</option>
<option>Jan</option><option>Feb</option><option>Maret</option><option>Apr</option><option>Mei</option>
<option>Juni</option><option>Juli</option><option>Agst</option><option>Sep</option><option>Okt</option>
<option>Nov</option><option>Des</option>
</select>
<select>
<option>--Tahun--</option>
<option>1991</option><option>1992</option><option>1993</option><option>1994</option>
<option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option><option>2000</option>
<option>2001</option><option>2002</option><option>2003</option><option>2004</option>
<option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option><option>2010</option>
<option>2011</option>
</select>
</td></tr>
<tr><td width=150 valign=top><b>Hobby</b></td><td>
: </td><td><input type=checkbox>Olahraga<br>input
type=checkbox>Baca Buku<br><input
type=checkbox>Organisasi<br><input
type=checkbox>Lainnya</td></tr>
<tr><td width=150 valign=top><b>Pesan</b></td><td>
: </td><td><textcare cols=33 rows=3></textcare><hr
color="#FF7700"</td></tr>
<tr><td colspan=2 valign=top><a
href="thanks.html"><input type=submit
value=kirim></a><a href="index.html"><input
type=reset value=batal></a></td>
<td><font size="3" face="arial>Logo Perusahaan
</font></td>
</tr>
</table>
</td></tr>
</table>

</td>

OUTPUTNYA:

LATIHAN 3

<td valign=top align=center bgcolor="#FFCC00"
width=500>
<table align=center width=470>
<tr><td align=center><br><img src="seperangkat.png"><br></td></tr>
<tr><td align=center><b><br>DAFTAR LIST KOMPUTER
DAN LAPTOP</b></td></tr>
<tr><td><hr color="#FF7700">
<table>
<tr>
<td><img src="komputer2.png" width=150
height=150></td>
<td><img src="asus.png" width=150
height=150></td>
<td><img src="1.png" width=150
height=150></td></tr>
<tr align=center><td>CPU dan SOUND</td><td>Notebook
Mini</td><td>ASUS seri game</td></tr>
<tr align=center><td><b>Rp.3000.000,-
</b></td><td><b>Rp.2.500.000,-
</b></td><td><b>Rp.7.000.000,-</b></td></tr>
<tr><td colspan=3><hr color="#FF7700"></td></tr>
</table>
</td></tr>
<tr><td>
<table>
<tr>
<td><img src="download.jpg" width=150
height=150></td>
<td><img src="22.png" width=150
height=150></td>
<td><img src="17.png"width=150
height=150></td></tr>
<tr align=center><td>Deskbok Axioo</td><td>Seperangkat PC</td><td>ASUS Multimedia</td></tr>
<tr align=center><td>CPU dan SOUND</td><td>Notebook
Mini</td><td>ASUS seri game</td></tr>
<tr align=center><td><b>Rp.3000.000,-
</b></td><td><b>Rp.2.500.000,-
</b></td><td><b>Rp.7.000.000,-</b></td></tr>
<tr><td colspan=3><hr color="#FF7700"></td></tr>
</table>
</td></tr>
</table>

</td>

OUTPUTNYA:

LATIHAN 4

q<html>
<head>
<title>Layout dengan Table Index</title>
</head>
<body>
<font face="arial" size=3>
<table width=1010 align=center>
<tr>
<td width="240" bgcolor="#FF9900"><font size="3"
face="arial"><strong><Logo Usaha</strong></font></td>
<td width="758" align=right valign=bottom>
<table bgcolor="#FFAA00">
<tr>
<td><strong>Buttom Home</strong></td>
<td><strong><font size="3" face="arial">Buttom Profil</font></strong></td>
<td><strong><font size="3" face="arial">Buttom Produk</font></strong></td>
<td><strong><font size="3" face="arial">Buttom Kontak</font></strong></td>
</tr>
</table>
</td></tr>
</table>
<table rules=group frame=box align=center>
<thead>
<tr><th bgcolor="#FF7700" colspan=3><p> </p>
<p>Gambar Header</p>
<p> </p></th>
</tr>
</thead>
<tbody>
<tr><th height=30 widht=1000 bgcolor="#FF7700"
colspan=3><marquee behavior=alternate
scrollamount=>
<b><font size="3" face="arial"> Ucapan Selamat
Datang Marque</font></b>
</marquee></th></tr>
</body>
<tbody>

<tr>
<td valign=top align=center bgcolor="#FFAA00"
width=200>
<table>
<tr><td align=center><br><img src="1465904496745.jpg" width=150 height=150></td></tr>
<tr><td align=center><br>
<strong> </strong><br></td></tr>
<tr><td align=center><br><p><hr width=200
color="#FF7700">
Adalah Mahasiswa <font size="3" face="arial"> AMIK
Parbina Nusantara</font>yang mencoba untuk belajar selagi masih sempat untuk belajar
<hr width=200 color="FF7700"></p><br></td></tr>
<tr><td align=center><img src="P_20161028_073200_1_BF_p.jpg"width=150 height=150></td></tr>
<tr><td align=center>
<table>
<tr><td>Username</td><td><input type=text
size=15></td></tr>
<tr><td>Password</td><td><input type=text
size=15></td></tr>
<tr><td colspan=2><b>Lupa Password?</b></td></tr>
<tr><td colspan=2><a href ="thanks.html"><input
type=submit value=kirim></a><a
href="index.html">input type=reset
value=batal></a></td></tr>
</table>
</td></tr>
</table>
</td>

<td valign=top align=center bgcolor="#FFCC00"
width="500">
<table align=center width="470">
<tr><td align=center><br><img src="header1.png"><br></td></tr>
<tr><td><b><br>PROFILE
CAHAYA ILMU KOMPUTER.COM</b></td></tr>
<tr><td>Cahaya ilmu komputer merupakan toko
penjualan alat-alat komputer maupun laptop dan juga
menjual segala aksesoris komputer dan laptop</td></tr>
<tr><td><b><br>SEJARAH
CAHAYA ILMU KOMPUTER.COM</b></td></tr>
<tr><td>Cahay ilmu komputer didirikan pada tanggal
20 Mei 2009 lalu,hingga saat ini masih beroperasi
dan melayani masyarakat dalam penjualan alat-alat
komputer dan selalu berusaha mengikuti perkembangan
zaman</td></tr>
<tr><td><b><br>BIDANG
CAHAYA ILMU KOMPUTER.COM</b></td></tr>
<td><tr>Cahaya Ilmu Komputer melayani penjualan,
service alat-alat komputer dan perbaikan printer
berbagia jenis yang merupakan keunggulan dari
semuanya adalah jasa pembuatan website</td></tr>
<tr><td><b><br>LOGO
CAHAYA ILMU KOMPUTER.COM</b></td></tr>
<td><tr>Logo cahaya ilmu komputer adalah sebagai
berikut:</td></tr>
<tr><td><img src="logoo.png" width=350
height=100></td></tr>
</table>
</td>

<td valign=top align=center bgcolor="#FFAA00"
width=200>
<table align=center>
<tr><td align=center><br><img
src="1.png"<br></td></tr>
<tr><td align=center>
<table align=center>
<tr><td><img src="2.png" width=60
height=60><hr color="#FF7700"></td><td>Seperangkat
Komputer Desktop></td></tr>
<tr><td><img src="asus.jpg" width=60
height=60><hr color="#FF7700"></td><td>Notebook Terbaru Asus
1215B></td></tr>
</table>
</td></
<tr><td align=center><img src="komputer1.png" width=60
height=60></td></tr>
<tr>
<td align=center>
<marquee direction="down" scrollamount=3>
<table align=center>
<tr>
<td align=center>
<hr color="FF7700" width=200>
Baru kemaren mesan hari ini sudah sampai gan di
temapet ane,rekomended deh pelayanannya,thanks gan
admin
</td>
</tr>
<tr>
<td align=center>
<hr color="#FF7700" width=200>
Harganya murah meriah,ane kemaren beli langsung
banyak,buat toko ane di Banjarmasin
</td>
</tr>
<tr>
<td align=center>
<hr color="#FF7700" width=200>
Wah,gua juga mau nih gan,kira kira ke Jogja
brapa ya ongkirnya?<hr color="#FF7700" width=200>
</td>
</tr>

</table>
</marqueee>
</td>
</tr>
<tr><td><b>Mau Kirim Pesan ?</b></td></tr>
<tr><td><a href="kontak.html"><input type=submit
value="klik disini"></a></td></tr>
<tr><td>

<table>
<tr>
<td><img src="speaker.png" width=50 height=50></td>
<td><img src="2.png" width=50 height=50></td>
<td><img src="komputer2.png" width=50 height=50></td>
<td><img src="download.jpg" width=50 height=50></td>
</tr>
</table>
</td></tr>
</table>
</td>
</tr>
</tbody>
<tfoot>

<tr>
<td colspan=3 align=center bg color ="#FF7700"
height=50><b><font size="3"
face="arial"><Footer</font></b></td>
</tr>
</tfoot>
</table>
<br><br>
</font>
</body>

</html>

OUTPUTNYA:

SEKIAN BAB 6 DARI SAYA SEMOGA BERMANFAAT YAH
THANK'S :)

BAB 5 FROM HTML

BAB 5

FROM

5,1 PENGENALAM FROM

From digunakan sebagai fasitilas untuk memasukan data.data yang ditampung di dalam from akan dip roses kelanjutan dari server.proses inilah yang disebut action.ccara mengunakan from adalah dengan menambah elemen <from> yang diikuti beberapa atribut setelah tag pembuka<from>.contoh

5.2 ATRIBUT FROM

1 .ACTION:menjelaskan apa yang terjadi dengan data ketika from di submit.

2. METHOD: ada dua cara untuk mengirim sesuai dengan metode htpp

1.get

2. pos

3. NAME: Digunakan mengandifitasi from sama seperti atribut id ,umumnya tidak di gunakan lagi jika sudah mengunakan id.

4. ID: digunakan mendefinasi elemen from nilai dari atribut ini harus unik

5. ONSUBMIT : untuk menjalani event script client side ketika from di –submit.

6. ONRESET: untuk menjalani event script client side ketika from di reset

7. ENCTYPE: menentukan bagaimana metode pengkodean yang di lakukan browser sebelum data dikirim ke server

8.TARGET : Menunjukan frame atau halaman yang akan dimuat ketika from di submit

5.3KOMPONEN FROM

A.Input Text

Ada 3 jenis kotak input teks yang digunakan pada from:

1. Single –line teks input control.

Contoh: <input type=”text”name=”txtcari”value=”cari” size=”20”maxlegth=”64”/>

2. Password input control

Contoh: <input type=”password”name=”txtpass”value=”size=”20”maxlegth=”20”>

3. Muti-line text input control

Berikut contoh muti-line text input

B.TOMBOL

Control ini digunakan untuk membuat tombol.untuk control ini ,kita juga mengunakan elemen<input> , hanya pada atribut type saja yang di bedakan.ada3 nilai pada atribut type yang sering digunakan

1. Submit; melaksanakan perintah submit from pada saat ditekan.

2. Reset;me reset(menggosokan)semua isian yang ada di dalam from.

3. Button;tombol biasanya menjalankan perintah yang telah disiapkan

C . CEK BOX

Control ini digunakan untuk membuat kotqa cek(checkbox).

Contoh checkbox: <input type=”checkbox” name=”chskill” value=”xhtml”/>XHTML </br>

D. RADIO BUTTONS

Hamper sama seperti checkbox ,hanya saja pilihan yang ter-cek tidak dapat lebih dari satu.value dari antribut type yang di gunakan adalah radio”.

E.SELECT BOXES

Membuat isian pilihan berupa menu drop down.

<select name=”pilwarna”multiple=”muttiple’><option selected=”selected” value=””> pilih warna </option>

<option value=”merah”>merah</option>

<option value=”hijau”>hijau</option>

</select>

F. FILE SELECT BOXES (FILE FIELD)

Digunakan untuk membuat kotak pilihan untuk mengambil file dari dalam computer yang leb ih sering di kenal dengan sebutan upload file.

Contoh : <input type =”file” name=”fileupload”

Accept=”image/*”/>

G. HIDDEN KONTROL (hideen field)

Digunakan untuk komponen yang bersembunyi .

Contoh script: <input type “name= halamantersembunyi”

Value=”home page”/>

H <FIELDSET>dan<LEGEND>

Elemen <fieldset> digunakan membuat bingkai dari komponen from yang di grup untuk memperlihatkan bahwa mereka memiliki hubungan.

Elemen <legend> digunakan untuk membuust judul dari bingkai yang dirancang dengan mengunakan <fieldset>

I. “DISBLED”DAN “READONLY”

Reandonly digunakan untuk memcegah perubahan nilai pada komponen control from.

LATIHAN 1

<head>

<title>creating a file upload control </title>

</head>

<body>

<form action="http://www.example.com/imageUpload.asp"methood="post"

name="froImageUpload" enctype="multipart/form-data">

<input type="file" name="fileupload"

accept="image/*" />

</form>

</body>

</html>

OUTPUTNYA:

LATIHAN 2

<html>

<head>

<title>formulir</title>

</head>

<body>

<hr>

<table>

<tr><td>nama<td> : <input type=text name="nama"size="20"> <tr><td>Alamat<td> : <input type=text name="alamat" size="30">

<tr><td>jenis kelamin<td> : <input type=text name="radio"name="kelamin">Pria<input type="radio"

name="kelamin">Wanita

<tr><td>hoby<td> : <input type="checkbox" name="musik">musik<input type="checkbox"

name="olahraga">Olahraga<input type="checkbox"name="jalan">jalan

<tr><td>agama<td> : <select size="1" name="agama">

<option>Islam</option>

<option>kristen</option>

<option>katolik</option>

<option>hindu</option>

<option>budha</option>

</select>

<tr><td>Asal Sekolah<td> : <input type="text"name=asalsma" size="35">

<tr><td>jurusan<td> : <input type="text"

name="jurusan" size="20">

</table>

</form>

<hr>

</body>

</html>

OUTPUTNYA:

LATIHAN 3

<head>

<title>creating groups of options with a disabled option</title>

</head>

<body>

please select the product you are interested in:<br/>

<option disabled="disabled" value="">-- hardware--</option>

<option value="desktop">desktop computers</option>

</optgroup>

<optional value="officesoftware">office software</option>

<option value="games">games</option>

</optgroup>

<option value ="monitors">monitor</option>

<option value ="input devices">input devices</option>

<option value ="storage">storage</option>

</select>

</form>

</body>

</html>

OUTPUTNYA:

LATIHAN 4

<head>

<title>Select boxes with the &1t;optgroup>element</title>

</head>

<body>

please select the product you are interested in:<br/>

<option value="desktop">desktop computers</option>

<option value="laptop">laptop computers</option>

</optgroup>

<optional value="officesoftware">office software</option>

<option value="games">games</option>

</optgroup>

<option value ="monitors">monitor</option>

<option value ="input devices">input devices</option>

<option value ="storage">storage</option>

</optgroup>

</select>

</form>

</body>

</html>

OUTPUTNYA:

LATIHAN 5

<head>

<title>contact Us</title>

</head>

<body>

<h1>contact Us</h1>

<form action="contact.aspx" method="post"

name="frmRespondToAd">

<legend>your message:</legend>

<table>

<tr>

<td><input type="text" name="txtTo"

readonly="readonly" id="emailTo" size="20" tabindex="2"></textarea></td>

</tr>

</table>

</fieldset>

<legend>how you found us:</legend>

<table>

<tr>

<td>

<option value="google">google</option>

<option value="ad">Local newspaper

ad</option>

<option value="friend">friend</option>

<option value="other">other</option>

</select>

</td>

</tr>

<tr>

<td><label

for="newsletterSignup">Newsletter</label></td>

<td><input type="checkbox" name="chkbody"

id="newsletterSignup" checked="checked" /> Ensure this box is checked if you would like to recive email updates</td>

</tr>

</tabel>

</fieldset>

</form>

</body>

</html>

OUTPUTNYA:

LATIHAN 6

<head>

<title>voting</title>

</head>

<body>

</head>

</body>

<h2>Register your opinion</h2>

<p>How well do you rate the information on this site

(where 1 is very poor, and 5 is very good) ?</p>

<form action="http://www.example.com/ads/respond.aspx"

method="get" name="frmRespondToAD">

<table>

<tr>

<td><input type="radio"name="radVote"value="1"

id="vpoor" /></td>

<td><input type="radio"name="radVote"value="2"

id="poor" /></td>

<td><input type="radio"name="radVote"value="3"

id="avarage" checked="checked /></td>

<td><input type="radio"name="radVote"value="4"

id="good" /></td>

<td><input type="radio"name="radVote"value="5"

id="vgood" /></td>

</tr>

<tr>

<td><label for="avarage">3 <br

/>avarage</label></td>

</tr>

</table>

</form>

</body>

</html>

OUTPUTNYA:

SEKIAN BAB 5 DARI SAYA, SEMOGA BERMANFAAT

THANK'S :)

BAB 4 TABEL HTML

BAB 4

Ø TABEL

1. Membangun Table

Terdapat 3 tag tama yang digunakan dalam pembuatan tabel,yaitu: <table>,<tr>,<td>. Yang perlu diingat adalah bahwa tab <tr> dan <td> harus terletak diantara tag <table> dan </table>

2. Heading Table

Heading table adalah istilah yang digunakan karena isi sel dalam tabel dijadikan judul atau dengan sebutan lain judul kolom. Untuk membuat heading table digunakan elemen <th> yang merupakan singkatan dari table heading. Elemen ini kita gunakan untuk menggantikan elemen <td>.

Ø Contoh :

<body>

<table border="2">

<caption align="bottom">Judul Table</caption>

<thead align="right"><tr><td>Header

Tabel</td></tr></thead>

<tfoot align="center"><tr><td>Footer

Table</td></tr></tfoot>

<tbody>

<tr>

<th>Header Satu</th>

<th>Header Dua</th>

</tr>

<tr>

<td>Isi Body Cell Satu</td>

<td>Isi Body Cell Dua</td>

</tr>

</body>

</table>

</html>

3. Judul table dan grup kolom

Untuk membuat judul tabel,kita gunakan elemen <caption>. Elemen ini ditulis setelah tag pembuka <table> sebelum tag <row>.

4. Tag <table>

Terdiri dari atribut :

a. Align-perataan : rata kiri(left),tengah(center),kanan (right)

b. bgcolor :warna latar belakang (background) dari table.

c. Border : ukuran lebar border tabel (dalam pixel)

d. Cellpadding : jarak antar isi cell dengan batas cell (dalam pixel)

e. Cellspacing : jarak antar cell (dalam pixel)

f. Width : ukuran tabel dalam pixel atau percent.

5. Tag <tr>

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari :

1. Align-pertaan

2. Bgcolor-warna latar belakang garis

3. Valign-perataan vertikal :top,middle atau bottom.

Ø Contoh :

<html>

<head>

<title>Contoh Tabel 2 Dimensi</title>

</head>

<body>

<table border="1"cellpadding="2"width="250">

<caption><b>Tabel Telepon</caption></b>

<tr>

<th width="100"bgcolor="lavender">Telepon</th>

<th width="150"bgcolor="lavender">Nama</th>

</tr>

<tr>

<td width="100">08123456789</td>

<td width="150">Sorta</td>

</tr>

<tr>

<td width="100">08523456789</td>

<td width="150">Maria</td>

</tr>

</table>

</body>

<html>

6. Tag <td>

Tag digunakan untuk membuat kolom baru pada table

Atribut rowspan digunakan untuk menggabungkan beberapa buah baris menjadi satu. Sedangkan colspan digunakan untuk menggabungkan beberapa kolom menjadi satu.

Ø Contoh :

<html>

<head>

<title>Contoh Tabel Dengan Colspan dan Rowspan</title>

</head>

<body>

<table border="1"width="363"bgcolor="#99FF33">

<tr>

<td colspan="2"rowspan="2"

width="141"> </td>

<td colspan="2" width="215"

align="center"><b>COLSPAN</b></td>

</tr>

<tr>

<td width="110"align="center"><b>Kolom

1</b></td>

<td width="104"align="center"><b>Kolom

2</b></td>

</tr>

<tr>

<td rowspan="2"width="79"><b>ROWSPAN</b></td>

<td width="60"align="center"><b>Baris 1</b></td>

<td width="110"><b>Baris 1,Kolom 1</td>

<td width="104"><b>Baris 1,Kolom 2</td>

</tr>

<tr>

<td width="60"align="center"><b>Baris 2</b></td>

<td width="110"><b>Baris 2,Kolom 1</td>

<td width="104"><b>Baris 2,Kolom 3</td>

</tr>

</table>

</body>

</html>

LATIHAN 1

html>

<head>

<title>Contoh Tabel 2 Dimensi</title>

</head>

<body>

<table border="1"cellpadding="2"width="250">

<caption><b>Tabel Telepon</caption></b>

<tr>

<th width="100"bgcolor="lavender">Telepon</th>

<th width="150"bgcolor="lavender">Nama</th>

</tr>

<tr>

<td width="100">08123456789</td>

<td width="150">Riris</td>

</tr>

<tr>

<td width="100">0856789123</td>

<td width="150">Olvhy</td>

</tr>

</table>

</body>

<html>

OUTPUTNYA:

LATIHAN 2

<html>

<head>

<title>Contoh Table Dengan Cospolan</title>

</head>

<body>

<table border="0" cellpadding="2"with="300">

<tr>

<td colspan="2"with="296="center"

bgcolor="#9999FF"><b>Jadwal Kuliah</b></td>

</tr>

<td with="141"align="center"

bgcolor="#99CCFF">senin</td>

<td width="153"align="center"

bgcolor="#99CCFF">Selasa</td>

</tr>

<tr>

<td width="141"align="center"

bgcolor="#99CCFF">Nyangkul</td>

<td width="153"align="center"

bgcolor="#99CCFF">Ngarambet</td>

</tr>

</table>

</body>

</html>

OUTPUTNYA:

LATIHAN 3

<html>

<head>

<title>Contoh Tabel Dengan Colspan

Bertingkat</title>

</head>

<body>

<table bgcolor=#FFFFCC width="301"border="1"

cellpadding="2">

<tr>

<td colspan="3"align="center"width="136"

bgcolor="#FFCC66"><b>Quarter 1</b></td>

<td colspan="3"align="center"width="153"

bgcolor="#FFCC66"><b>Quarter 2</b></td>

</tr>

<tr align="center">

<td width="38"><b>Jan</b></td>

<td width="48"><b>Feb</b></td>

<td width="42"><b>Mar</b></td>

<td width="46"><b>Apr</b></td>

<td width="54"><b>May</b></td>

<td width="45"><b>Jun</b></td>

</tr>

<tr>

<td width="38"><b>100</b></td>

<td width="48"><b>5000</b></td>

<td width="42"><b>200</b></td>

<td width="46"><b>1500</b></td>

<td width="54"><b>2500</b></td>

<td width="45"><b>1750</b></td>

</tr>

<tr>

<td width="38"><b>290</b></td>

<td width="48"><b>5050</b></td>

<td width="42"><b>2300</b></td>

<td width="46"><b>100</b></td>

<td width="54"><b>270</b></td>

<td width="45"><b>300</b></td>

</tr>

</table>

</body>

</html>

OUTPUTNYA :

LATIHAN 4

html>

<head>

<title> Contoh Tabel Dengan Coslpan</title>

</head>

<body>

<tr>

<td rowspan="2"bgcolor="#00CC00"><p

align="center">Satu</td>

<td bgcolor="#99FF33">Empat</td>

</tr>

<tr>

<td bgcolor="#CCFF99">Empat</td>

</tr>

</table>

</body>

</html>

OUTPUTNYA:

LATIHAN 5

<html>

<head>

<title>Contoh Tabel Dengan Colspan dan Rowspan</title>

</head>

<body>

<tr>

<td colspan="2"rowspan="2"

width="141"> </td>

<td colspan="2" width="215"

align="center"><b>COLSPAN</b></td>

</tr>

<tr>

<td width="110"align="center"><b>Kolom

1</b></td>

<td width="104"align="center"><b>Kolom

2</b></td>

</tr>

<tr>

<td rowspan="2"width="79"><b>ROWSPAN</b></td>

<td width="60"align="center"><b>Baris 1</b></td>

<td width="110"><b>Baris 1,Kolom 1</td>

<td width="104"><b>Baris 1,Kolom 2</td>

</tr>

<tr>

<td width="60"align="center"><b>Baris 2</b></td>

<td width="110"><b>Baris 2,Kolom 1</td>

<td width="104"><b>Baris 2,Kolom 3</td>

</tr>

</table>

</body>

</html>

OUTPUTNYA:

SEKIAN BAB 4 DARI SAYA. SMOGA BERMANFAAT YA..

THANK'S :)