Tugas HTML

Desember 19, 2009 pukul 5:59 am | Ditulis dalam Tugas | Tinggalkan komentar

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>

Latihan Pertemuan (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>

Latihan Pertemuan (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>

Latihan Pertemuan (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>

Latihan Pertemuan (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>

Latihan Pertemuan (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>

Latihan Pertemuan (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>

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” height=”100″ bgcolor=”#3A2BD1″>

<font size=”16″ face=”Arial”>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″>Selamat Datang di <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 di Indonesia.

</td>

</tr>

</table>

</body>

</html>

Latihan Pertemuan 3:

<html>

<head>

<title>Latihan Pertemuan 3</title>

<body bgcolor=”pink”>

<table border=”1″ align=”center” width=”100%”>

<tr>

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

<font size=”15″>Syifa Safrina`S Web.com</font><br>

<hr width=”800″><br>

<font face=”comic sans ms” size=”5″ color=”green”>

<marquee direction=”right”>Assalamualaikum</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=”DD.jpg” width=”80%” height=”60%”></td>

</tr>

<tr>

<td colspan=”2″ align=”center”>

Copyright &copy; Syifa Safrina’s Web

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

</table>

</body

</html>

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>

Latihan List 2:

<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>

Latihan List 3:

<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>

Latihan List Utama:

<html>

<head>

<title>List utama</title>

<body>

<table border=”1″ align=”center” width=”80%”>

<tr>

<td colspan=”2″ align=”center” height=”75%”>

<font size=”15″>TUTORIAL LIST HTML</font></td></tr>

<tr valign=”top”>

<td width=”100″ height=”350″>

<ol type=”square”>

<li><a href=”home.html”>Home</a></li>

<li><a href=”profil.html”>Profile</a></li></ol></td>

<td>Selamat datang di tutorial HTML:<br>

<ol>

<li><a href=”lat_form.html”>List 1</a></li>

<li><a href=”lat_form1.html”>List 2</a></li>

<li><a href=”lat_form2.html”>List 3</a></li></ol></td>

</tr>

<tr>

<td colspan=”2″ align=”center”>

Copyright &copy; Syifa Safrina

<br>2009</td></tr>

</table>

</body

</html>

Latihan Form 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>

Latihan Form 2:

<html>

<head>

<title> Form 2 </title>

</head>

<body>

<form action=”form_1.html” method=”post”>

Nama-nama Guruku: <br><br>

<input> Pak Samino <br>

<input Checked> Pak Arifin <br>

<input> Pak Maryono <br>

<input> Pak Reza <br>

<input> Bu Gandhi <br><br>

Pelajaran favoritku: <br><br>

<input> Matematika <br>

<input checked> Fisika <br>

<input> Kimia <br>

<input> Biologi <br>

<input> Sejarah <br><br>

Situs Pilihanku: <br><br>

<select>

<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 rows=”5″ cols=”20″>

Masukkan komentar di sini !!!

</textarea> <br><br>

<input value=”kirimkan”><br>

<input value=”ulangi”><br>

</form>

</body>

</html>

Latihan Form 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”></td></tr>

<tr>

<td>Nama Panggilan</td>

<td><input type=”text”MsoNormal”></table>

<table border=”0″>

<tr>

<td>Agama</td>

<td><select name=”s1″>

<option>Islam</option>

<option>Khatolik</option>

<option>Budha</option

<option>Hindu</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”>Membaca

<input type=”radio”>Menulis

<input type=”radio”>Menyanyi</td></tr>

<tr>

<td>Makanan Favorit</td>

<td><input type=”checkbox”>Soto

<input type=”checkbox”>Bakso

<input type=”checkbox”>Nasi Goreng</td></tr>

<tr>

<td><input value=”SUBMIT”>

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

</table>

</form>

</body>

</html>

Latihan Form 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>

Latihan Form Utama:

<html>

<head>

<title>Latihan Form utama</title>

<body>

<table border=”1″ align=”center” width=”80%”>

<tr>

<td colspan=”2″ align=”center” height=”75%”>

<font size=”15″>TUTORIAL FORM HTML</font></td></tr>

<tr valign=”top”>

<td width=”100″ height=”350″>

<ol>

<li><a href=”home.html”>Home</a></li>

<li><a href=”profil.html”>Profile</a></li></ol></td>

<td>Selamat datang di tutorial HTML:<br>

<ol>

<li><a href=”lat_form.html”>Form 1</a></li>

<li><a href=”lat_form1.html”>Form 2</a></li>

<li><a href=”lat_form2.html”>Form 3</a></li></ol></td>

</tr>

<tr>

<td colspan=”2″ align=”center”>

Copyright &copy; Syifa Safrina

<br>2009</td></tr>

</table>

</body

</html>

About these ads

Tinggalkan sebuah Komentar »

Umpan RSS untuk komentar-komentar pada pos ini. TrackBack URI

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Buat situs web atau blog gratis di WordPress.com. | The Pool Theme.
Entries dan komentar feeds.

Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: