Puisi: November 2016

Kamis, 10 November 2016

KONTAK

<td valign=top align=center bgcolor="#FFCC00"
width=500>
<table align=center width=470>
<tr><td align=center><br><img src="asus.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>

TAMPILAN OUTPUTNYA SEPERTI DIBAWAH INI :

MENU PRODUK (BAB 6)

<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="IMG_20160914_092457.jpg" width=150 height=200></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="IMG_20160914_092542.jpg" width=150 height=200></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="#FFCC00"
width=500>
<table align=center width=470>
<tr><td align=center><br><img src="seperangkat.png" width=150
height=150></td><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="3.png" width=150
height=150></td>
<td><img src="Joystik.jpg" 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="PR-ASUS-ET2220-AIO-Side-n-Back-s.jpg" width=150
height=150></td>
<td><img src="komplit.jpg" width=150
height=150></td>
<td><img src="lap.jpg" 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>
<td valign=top align=center bgcolor="#FFAA00"
width=200>
<table align=center>
<tr><td align=center><br><img
src="22.png" width=60
height=60><br></td></tr>
<tr><td align=center>
<table align=center>
<tr><td><img src="3.png" width=60
height=60><hr color="#FF7700"></td><td>Seperangkat
Komputer Desktop></td></tr>
<tr><td><img src="asus.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="20.png" width=100
height=100></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="14.png" width=50 height=50></td>
<td><img src="24.png" width=50 height=50></td>
<td><img src="21.png" width=50 height=50></td>
<td><img src="23.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>

OUTPUT NYA SEBAGAI BERIKUT :

MENU PROFIL (BAB 6) HTML

BAB 6. LAYOUT MENU DENGAN HTML

<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="IMG_20160914_092457.jpg" width=150 height=200></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="IMG_20160914_092542.jpg" width=150 height=200></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=password
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="header4.png"></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" width=60
height=60><br></td></tr>
<tr><td align=center>
<table align=center>
<tr><td><img src="3.png" width=60
height=60><hr color="#FF7700"></td><td>Seperangkat
Komputer Desktop></td></tr>
<tr><td><img src="asus.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="20.png" width=100
height=100></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="14.png" width=50 height=50></td>
<td><img src="24.png" width=50 height=50></td>
<td><img src="21.png" width=50 height=50></td>
<td><img src="23.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 sebagai berikut :

AUDIO DAN VIDEO (LANJUTAN BAB 3)

AUDIO DAN VIDEO

Format	Kategori	Ekstensi
AVI	VIDEO	avi
MPEG	VIDEO	Mpg,mpeg
QUICK TIME	VIDEO	Qt,mov
AIFF	AUDIO	Aif,aiff
AU	AUDIO	Au
MIDI	AUDIO	Mid,midi
WAV	AUDIO	wav

Tag<bgsound>

Tag ini berfungsi untuk memainkan suara sebagai latar belakang. Atribut yang digunakan dalam tag <bgsound> :

Atribut	Kegunaan
SRC	Menentukan nama berkas yang akan dimainkan
LOOP	Diisi dengan nilai yang menyatakan berapa kali berkas akan dimainkan. Jika diisi dengan nilai Infinitive maka suara akan dimainkan terus menerus.

Tag<embed>

Tag digunakan untuk memainkan berkas yang serupa suara atapun film.

Atribut	Kegunaan
SRC	Menentukan sumber berkas suara atau video
WIDTH	Menentukan lebar video
HEIGHT	Menentukan tinggi video
UNITS	Menentukan satuan untuk video
HIDDEN	Menyembunyikan control
AUTOSTART	Diisi dengan nilai True dan False untuk menentukan berkas akan dimainkan secara otomatis atau tidak
LOOP	Jika diisi dengan true maka berkas akan dimainkan berulang-ulang.

Contoh 1 :

<html>

<head>

<title>contoh memasukkan title audio</title>

</head>

<body>

<h2> ini contoh memasukkan file audio kedalam dokumen HTML </h2>

<embed src="NirwanaTrio-JanjikuTuHo.mp3" border ="2" align="right" autostart="false" height = "45" width ="400">

</body>

</html>

Contoh 2 :

<html>

<head>

<title>mencriton video di web</title>

</head>

<body>

Selamat Menikmati Klip Video Berikut.

<embed src="Geisha - Seandainya Aku Punya Sayap (lirik).MP4"

height="400" width="400" units="pixels"

autostart="true" loop="false">

</embed>

</body>

</html>

Contoh 3 :

<html>

<head>

<title>contoh memasukkan file audio sebagai background sound</title>

<bgsound src="GEISHA - Sementara Sendiri (OST. SINGLE) Official Video(128kbps).mp3" loop="-1">

</head>

<body>

</body>

</html>

Ø Memasukkant audio dan video langkah-langkahnya sama dengan memasukkan image,video dan audio yang dipilih harus satu folder dengan script.

MEMBUAT TABEL 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>
output nya :