ELEMEN PEMFORMATAN KARAKTER<FONT>
Font pada halaman HTML dapat
diformat sesuai dengan desain yang anda tentukan, baik ukuran , jenis maupun
warna .
PRAKTIKUM 20
<html>
<head><title>warna font 1</title>
</head>
<body>
<h1><font color="red" face="arial">Sekarang saya
belajar membuat HTML</h1>
<h2>Sekarang saya belajar membuat
HTML</h2>
<h3>Sekarang saya belajar membuat
HTML</h3>
<h4>Sekarang saya belajar membuat
HTML</h4>
<h5>Sekarang saya belajar membuat
HTML</h5>
<h6>Sekarang saya belajar membuat
HTML</h6>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 20 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum20.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 21
<html>
<head><title>warna font 2</title>
</head>
<body>
<h1><font color="red" face="arial">Sekarang saya
belajar membuat HTML</h1>
<h2><font color="blue" face="tahoma">Sekarang saya
belajar membuat HTML</h2>
<h3><font color="red" face="tahoma">Sekarang saya belajar
membuat HTML</h3>
<h4><font
color="yellow"
face="arial">Sekarang saya belajar membuat HTML</h4>
<h5><font color="#FF3333" face="arial">Sekarang saya belajar membuat HTML</h5>
<h6>Sekarang saya belajar membuat
HTML</h6>
</body>
</html
1.
Selanjutnya simpan PRAKTIKUM
21 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum21.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 22
<html>
<head><title>warna font 3</title>
</head>
<body>
<font color="red" face="arial"
size="11">Sekarang saya belajar membuat HTML<br>
<font color="blue" face="tahoma"
size="2">Sekarang saya belajar membuat HTML<br>
<font color="red" face="tahoma"
size="3">Sekarang saya belajar membuat HTML<br>
<font color="yellow" face="arial"
size="4">Sekarang saya belajar membuat HTML<br>
<font color="green" face="arial"
size="5">Sekarang saya belajar membuat HTML<br>
Sekarang saya <font
color="#FF3333"
face="arial" size="9"> belajar membuat
HTML<br>
</body>
</html
1.
Selanjutnya
simpan PRAKTIKUM 22 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum22.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 23
<html>
<head><title>warna font 4</title>
<style type="text/css">
<!--
.style1 {color: #0000CC}
-->
</style>
</head>
<body>
<h1>Sekarang <span
class="style1">saya</span> belajar membuat HTML</h1>
<h2>Sekarang saya belajar
membuat HTML</h2>
<h3>Sekarang saya belajar
membuat HTML</h3>
<h4>Sekarang saya belajar
membuat HTML</h4>
<h5>Sekarang saya belajar
membuat HTML</h5>
<h6>Sekarang saya belajar
membuat HTML</h6>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 23 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum23.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 24
<html>
<head><title>warna font 5</title>
<style type="text/css">
<!--
.style1 {color: Yellow}
.style2 {color: #FF0000}
-->
</style>
</head>
<body>
<h1>Sekarang <span
class="style1">saya</span> belajar membuat HTML</h1>
<h2>Sekarang saya <span
class="style2">belajar membuat</span> HTML</h2>
<h3>Sekarang saya belajar membuat
HTML</h3>
<h4>Sekarang saya belajar membuat
HTML</h4>
<h5>Sekarang saya belajar membuat
HTML</h5>
</body>
</html>
1.
Selanjutnya simpan PRAKTIKUM
24 dalam FOLDER NAMA ANDA dengan file name : “ praktikum24.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 25
<html>
<head><title>warna font 6</title>
<style type="text/css">
<!--
.style1 {color: Yellow}
.style2 {color: #FF0000}
.style3 {color: Blue}
-->
</style>
</head>
<body>
<h1>Sekarang <span
class="style1">saya</span> belajar membuat HTML</h1>
<h2>Sekarang saya <span
class="style2">belajar membuat</span> HTML</h2>
<h3><span class="style3">Sekarang</span>
saya belajar membuat HTML</h3>
<h4>Sekarang saya belajar membuat
HTML</h4>
<h5>Sekarang saya belajar membuat
HTML</h5>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 25 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum25.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 26
<html>
<head><title>warna font 7</title>
<style type="text/css">
<!--
.style1 {color: Yellow}
.style2 {color: #FF0000}
.style3 {color: Blue}
.style4 {color: green}
-->
</style>
</head>
<body>
<h1>Sekarang <span
class="style1">saya</span> belajar membuat HTML</h1>
<h2>Sekarang saya <span
class="style2">belajar membuat</span> HTML</h2>
<h3><span
class="style3">Sekarang</span> saya belajar membuat HTML</h3>
<h4>Sekarang saya belajar membuat
HTML</h4>
<h5>Sekarang saya belajar
membuat<span class="style4"> HTML</span></h5>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 26 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum26.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 27
<html>
<head><title>warna font 8</title>
<style type="text/css">
<!--
.style1 {color: Yellow}
.style2 {color: #FF0000}
.style3 {color: Blue}
.style4 {color: gray}
-->
</style>
</head>
<body BGCOLOR="green">
<h1>Sekarang <span
class="style1">saya</span> belajar membuat HTML</h1>
<h2>Sekarang saya <span
class="style2">belajar membuat</span> HTML</h2>
<h3><span
class="style3">Sekarang</span> saya belajar membuat
HTML</h3>
<h4>Sekarang
saya belajar membuat HTML</h4>
<h5>Sekarang saya belajar
membuat<span class="style4"> HTML</span></h5>
<h6>Sekarang saya belajar membuat
HTML</h6>
<span class="style1">Di Pondok
Pesantren Sunan Drajat aku telah mendapatkan banyak yang aku pelajari selama
ini, begitu juga selama sekolah saya juga merasakan rasa menyenagkan juga
kadang-kadang menyebalkan terutama pada bapak guru yang ngajar komputer
" ADUH GALAK BENAR GURU INI ' </span>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 19 dalam FOLDER NAMA ANDA dengan file name : “ praktikum19.html “
2.
Lihat hasilnya dan kesimpulan apa yang dapat anda peroleh dari latihan tersebut
Berikut kode warna , coba lakukan dengan
menganti warna tersebut serta beri nama
.style2 {color: #FF00FF}
.style3 {color: #00FFFF; }
.style4 {color: #FFFF00}
.style5 {color: #0000FF}
.style6 {color: #FF0000}
.style7 {color: #FFFFFF}
.style8 {color: #000066}
.style9 {color: #000000}
.style10 {color: #33FF00}
ELEMEN FORM
Form HTMl
merupakan tag yang paling penting khususnya dalam mebuat aplikasi berbasis web,
form menyediakan property masukan yang dapat berupa texbox, check box, radio
button dan button. Untuk mendeklarasikan sebuah form digunakan tag
<form>….</form>
PRAKTIKUM 28
<html>
<head>
<title>MEMBUAT FORM</title>
</head>
<body>
<table border="0"
width="25%">
<tr>
<td
bgcolor="red" align="center" COLSPAN="3">DATA
WILAYAH</td>
</tr>
<tr>
<td
bgcolor="green">Propinsi</td>
<td></td>
<td><select
name="Propinsi">
<option value="Jawa
Timur">Jawa Timur</option>
<option value="Jawa
Tengah">Jawa Tengah</option>
<option value="Jawa
barat">Jawa Barat</option>
<option
value="Jakarta">Jakarta</option>
<option
value="Banten">Banten</option>
<option
value="Jogjakarta">Jogjakarta</option>
</select></td>
</tr>
<tr>
<td
bgcolor="green">Kabupaten</td>
<td></td>
<td><select
name="Kabupaten">
<option
value="Lamongan">Lamongan</option>
<option
value="Gresik">Gresik</option>
<option
value="Bojonegoro">Bojonegoro</option>
<option
value="Tuban">Tuban</option>
<option
value="Madiun">Madiun</option>
<option
value="Kediri">Kediri</option>
</select></td>
</tr>
<tr>
<td
bgcolor="gray">Kecamatan</td>
<td></td>
<td><select
name="Kecamatan">
<option
value="Babat">Babat</option>
<option
value="Paciran">Paciran</option>
<option
value="Brondong">Brondong</option>
<option
value="Solokuro">Solokuro</option>
<option
value="Kalitengah">Kalitengah</option>
<option
value="Karanggeneng">Karanggeneng</option>
<option value="Tikung">Tikung</option>
<option
value="Pucuk">Pucuk</option>
<option
value="Ngimbang">Ngimbang</option>
<option
value="Laren">Laren</option>
<option
value="Maduran">Maduran</option>
<option
value="Sekaran">Sekaran</option>
</select></td>
</tr>
</table>
</body>
</html>
PRAKTIKUM 29
<html>
<head>
<title>Membuat kolom komentar</title>
</head>
<body>
<table BGCOLOR="#EEE0FF"
border="0" width=45%">
<tr>
<td HEIGHT="30" BGCOLOR="#EEEFFF" ALIGN="CENTER"
colspan="9">KOMENTAR</td>
</tr>
<tr>
<td WIDTH="150">Nama</td>
<td WIDTH="5"></td>
<td colspan="7"> <input type="text"
name="nama" value=""></td>
</tr>
<tr>
<td >Alamat</td>
<td WIDTH="5"></td>
<td WIDTH="240" colspan="7"><textarea
name="" rows="2"
cols="16"></textarea></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir</td>
<td WIDTH="5"></td>
<td WIDTH="100"> <input type="text"
name="Tempat Tanggal lahir" value=""></td>
<td WIDTH="5"> </td>
<td WIDTH="20"> <select name="Tanggal">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option selected value="">31</option>
</select></td>
<td WIDTH="5"> </td>
<td WIDTH="20"> <select name="Bulan">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option selected value="">12</option>
</select></td>
<td WIDTH="90" colspan="2"><select name="Tahun">
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option selected value="">2000</option>
</select></td>
</tr>
<tr>
<td>E-mail</td>
<td WIDTH="5"></td>
<td WIDTH="100"><input type="text"
name="E-mail" value=""></td>
<td WIDTH="5"> </td>
<td WIDTH="20"> </td>
<td WIDTH="5"> </td>
<td WIDTH="20"> </td>
<td WIDTH="50"> </td>
<td WIDTH="40"> </td>
</tr>
<tr>
<td>Komentar</td>
<td WIDTH="5"></td>
<td WIDTH="240" colspan="7"><textarea
name="komentar" rows="2"
cols="16"></textarea></td>
</tr>
<tr>
<td> </td>
<td WIDTH="5"></td>
<td WIDTH="240" colspan="7"></td>
<tr>
<td> </td>
<td WIDTH="5"></td>
<td WIDTH="240" colspan="7"><input
type="button" value="KIRIM"><input
type="reset"></td>
</tr>
</table>
</body>
</html>