Tugas HTML

Desember 19, 2009 oleh wulanxtkj1
Latihan Pertama

<html>
<head>
<title> Latihan Pertamaku </title>
</head>
<body bg color=”#000000?>
<p align=”left”>
Paragraf ini akan rata kiri<br>
Paragraf ini akan rata kiri<br>
Paragraf ini akan rata kiri<br>
<p>
br digunakan untuk ganti baris <br><br>
<b>Kalimat ini akan dicetak Bold </b> <br>
<i>Kalimat ini akan dicetak Italic </i> <br>
<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>
<hr width=”1000?><br>
Perintah hr digunakan untuk membuat garis
</body>
</html>

Hasilnya :




Latihan Tabel 1 
<html>
<head>
<title>Latihan Table 1</title>
</head>
<body>
<table width=”100%” height=”100%” border=”1?  >
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
</tr>
</table>
</body>
</html>

Hasilnya :

Latihan Tabel 2

<html>
<head>
<title>Latihan Table 2</title>
</head>
<body>
<table width=”100%” height=”100%” border=”1? >
<tr>
<td align="center">1</td>
<td colspan=”2? align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
<tr>
<td colspan=”2? align="center">6</td>
<td align="center">7</td>
</tr>
</table>
</body>
</html>


Hasilnya :

Latihan Tabel 3

<html>
<head>
<title>Latihan Table 3</title>
</head>

<body>
<table width=”100%” height=”100%” border=”1?>
<tr>
<td colspan=”3? align="center">1</td>
</tr>
<tr>
<td colspan=”2? align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</body>
</html>

Hasilnya :


Latihan Tabel 4

<html>

<head>
<title>Latihan Table 4</title>
</head>
<body>
<table width=”100%” height=”100%” border=”1? >
<tr>
<td rowspan=”2? align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
</body>
</html>

Hasilnya :

Latihan Tabel 5

<html> <head> <title>Latihan Table 5</title> </head> <body> <table width=”100%” height=”100%” border=”1? > <tr> <td align="center">1</td> <td rowspan=”2? align="center">2</td> </tr> <tr> <td align="center">3</td> </tr> </table> </body> </html>

Hasilnya :

Latihan Tabel 6
<html>

<head>

<title>Latihan Table 6</title>

</head>

<body>

<table width=”100%” height=”100%” border=”1? >

<tr>

<td align="center">1</td>

<td colspan=”2? align="center">2</td>

</tr>

<tr>

<td rowspan=”2? align="center">3</td>

<td colspan=”2? align="center">4</td>

</tr>

<tr>

<td align="center">5</td>

<td align="center">6</td>

</tr>

<tr>

<td rowspan=”2? align="center">7</td>

<td align="center">8</td>

<td rowspan=”2? align="center">10</td>

</tr>

<tr>

<td align="center">9</td>

</tr>

</table>

</body>

</html>
Hasilnya :

Latihan Pertemuan 2:
<html>

<head>

<title> Latihan Pertemuan 2 </title>

</head>

<body bgcolor="#000000" text="#FFFFFF">

<table border="1" align="center" width="80%">

<tr>

<td colspan="2"align="center"heigth="75%"bgcolor="pink">

<font size="16"face="chiller">SITUSKU.COM</font><br>

<hr width="500"><br>

<marquee direction="right">Terdepan Dalam Berita dan Gosip</marquee>

</td>

</tr>

<tr valign="top">

<td width="200"height="450"bgcolor="green">Home</td>

<td bgcolor="#F75454"><font size="13"face="batang">Welcome<b><i>SITUSKU.COM</i></b><br>

Situsku.Com akan selalu konsisten dengan berita - berita terbaru dari segala penjuru Indonesia.<br><br>

Dapatkan berita - berita menarik tentang : politik, hukum, keamanan, gosip artis, dan kuliner Indonesia.

</td>

</tr>

</table>

</body>

</html>
Hasilnya :

Latihan Pertemuan 3:
<html>

<head>

<title>Latihan Pertemuan 3</title>

<body bgcolor="violet">

<table border="1" align="center" width="100%">

<tr>

<td colspan="2" align="center" height=”100">

<font size=”15?>Wulan's Web</font><br>

<hr width=”800?><br>

<font face=”comic sans ms” size=”5" color="yellow">

<marquee direction=”right”> "kita pasti bisa..!!"</marquee>

</font></td></tr>

<tr valign=”top”>

<td width=”100? height=”450?>

<a href=”latihan pertemuan 3.html”>Home</a>

<br><a href=”profile.html”>Profile</a>

<br><a href=”gallery.html”>Gallery</td>

<td><img src="doraemon1.jpg" width=”80%” height=”60%”>

<br><font size="5" face="Harrington"> </td>

</tr>

<tr>

<td colspan=”2? align="center”>

Copyright &copy; Wulan's Web

<br>All right reserved 2009</td></tr>

</table>

</body

</html>
Hasilnya :


Latihan List 1:
<html>

<head>

<title> Ordered List</title>

</head>

<body>

<ol type=”A”>

<li>Jeruk</li>

<li>Nanas</li>

<li>Melon</li>

<li>Jambu</li>

</ol>

</body>

</html>
Hasilnya :

Latihan List2 :
<html>

<head>

<title> Unordered List</title>

</head>

<body>

<ul type=”square”>

<li>Es Campur</li>

<li>ES Jeruk</li>

<li>Es Nanas</li>

<li>Es Teh</li>

</ul>

</body>

</html>
Hasilnya :

Latihan List3 :
<html>

<head>

<title> List 3</title>

</head>

<body> Siswa dan Hobinya:

<ol type=”1?>

<li>Hobbi Riska Anjana:</li>

<ul type=”disc”>

<li>Membaca Komik</li>

<li>Nonton Film</li>

</ul>

<li>Hobbi Cinta:</li>

<ul type=”square”>

<li>Menyanyi</li>

<ol type=”a”>

<li>Lagu Campursari</li>

<li>Lagu Pop</li>

</ol>

<li>Shopping</li>

</ul>

<li>Hobbi Siska</li>

<ul type=”circle”>

<li>Menari</li>

<li>Memasak</li>

</ul>

</ol>

</body>

</html>
Hasilnya :

Latihan From 1:
<html>

<head>

<title> Form 1 </title>

</head>

<body>

<form>

Nama : <input name=”teks1?> <br><br>

Kelas: <input name=”teks2? maxlength=”2?> <br><br>

No : <input value="10"> <br><br>

Hobby: <input name=”teks4? size=”8?> <br><br>

Password: <input name=”teks5?>

</form>

</body>

</html>
Hasilnya :

Latihan From 2 :
<html>

<head>

<title> Form 2 </title>

</head>

<body>

<form name="data" action="form_1.html" method="post">

Nama-nama Guruku: <br><br>

<input type="checkbox" name="c1"> Pak Samino <br>

<input type="checkbox" name="c1" Checked> Pak Arifin <br>

<input type="checkbox" name="c1"> Pak Maryono <br>

<input type="checkbox" name="c1"> Pak Reza <br>

<input type="checkbox" name="c1"> Bu Gandhi <br><br>

Pelajaran favoritku: <br><br>

<input type="radio" name="r1"> Matematika <br>

<input type="radio" name="r1" checked> Fisika <br>

<input type="radio" name="r1"> Kimia <br>

<input type="radio" name="r1"> Biologi <br>

<input type="radio" name="r1"> Sejarah <br><br>

Situs Pilihanku: <br><br>

<select name="s1">

<option> Detik.Com </option>

<option selected> Kapanlagi.Com </option>

<option> Kickandy.Com </option>

<option> Friendster.Com </option>

<option> Debritto.Net </option>

</select> <br><br>

Silahkan tuliskan komentar Anda di bawah ini: <br><br>

<textarea name="kesan" rows="5" cols="20">

Masukkan komentar di sini !!!

</textarea> <br><br>

<input type="submit" value="kirimkan"><br>

<input type="reset" value="ulangi"><br>

</form>

</body>

</html>
Hasilnya :

Latihan From 3 :
<html>

<head>

<title>Latihan Form 3</title>

<body>

<center>

<font size="15">Data Siswa</font></center><br>

<hr width="400">

<form>

<table border="0">

<tr>

<td>Nama Lengkap</td>

<td><input type="text" name="text1"></td></tr>

<tr>

<td>Nama Panggilan</td>

<td><input type="text" name="text2></td></tr>

</table>

<table border="0">

<tr>

<td>Agama</td>

<td><select name="s1">

<option>Islam</option>

<option>Khatolik</option>

</select></td></tr>

<tr>

<td>Jenis Kelamin</td>

<td><select name="s2">

<option>Laki-laki</option>

<option>Perempuan</option>

</select></td></tr>

<tr>

<td>Alamat</td>

<td><textarea name="alamat" rows="5" cols="20"></textarea></td></tr>

<tr>

<td>Hobby</td>

<td><input type="radio" name="r1">Membaca

<input type="radio" name="r1">Menulis

<input type="radio" name="r1">Menyanyi</td></tr>

<tr>

<td>Makanan Favorit</td>

<td><input type="checkbox" name="c1">Soto

<input type="checkbox" name="c1">Bakso

<input type="checkbox" name="c1">Nasi Goreng</td></tr>

<tr>

<td><input type="submit" value="SUBMIT">

<input type="reset" value="RESET"><br></td></tr>

</table>

</form>

</body>

</html>
Hasilnya :

Latihan From 4 :
<html>
<head>
<title>Latihan Form 4</title>
<body>
<form>
<table width=”75%” height=”75%” border=”1? >
<tr>
<td colspan=”2? align=”center”>YAHOO!MAIL, Get Your Yahoo! ID</td></tr>
<tr>
<td>*First name</td>
<td><input name=”text1?></td></tr>
<tr>
<td>*Last name</td>
<td><input name=”text1?></td></tr>
<tr>

<td width=”150?>*Preferred content:</td>

<td><select>

<option selected>Yahoo!U.S</option><option>Google</option></select></td></tr>

<tr>

<td>*Gender:</td>

<td><select>

<option>Male</option>

<option>Female</option></select></td></tr>

<tr>

<td>*Yahoo!ID</td>

<td><input name=”text1?></td></tr>

<tr>

<td colspan=”2? align=”center”>ID may constan of a-z,0-9,underscore etc</td></tr>

<tr>

<td>*Password:</td>

<td><input name=”pass”></td></tr>

<tr>

<td>*Re-type Password:</td>

<td><input name=”pass2?></td></tr>

<tr>

<td><input value=”SUBMIT”></td>

<td><input value=”RESET”></td></tr>

</table>

</form>

</body>

</html>
Hasilnya :

Hello world!

Juli 29, 2009 oleh wulanxtkj1

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!