kali ini kita akan membuat table dengan HTML :
1.ini scriptnya :
2. dan berikut hasilnya :
Selamat mencoba :)
1.ini scriptnya :
2. dan berikut hasilnya :
Selamat mencoba :)
kita sekarang masuk ke materi HTML dengan menggunakan tampilan Form, mulai dari Checkbox, Radio Button, Text area, text field, dan submit button
NEXT>>>>>>>>>>>
1. ini scriptnya :
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-9: Membuat Form</title>
</head>
<body>
<form action=# method=get>
<p>Nama : <input type=text name=nama>
<p>Alamat : <textarea name=alamat cols=25 rows=4></textarea>
<p>Jenis kelamin:
<input type=radio name=gender value=Pria>Pria
<input type=radio name=gender value=Wanita>Wanita
<p>Tgl. Lahir:
<select name=tgl>
<option value=1>01
<option value=2>02
<option value=3>03
<option value=31>31
</select> -
<select name=bln>
<option value=1>01
<option value=2>02
<option value=3>03
<option value=12>12
</select> -
<select name=thn>
<option value=1901>1901
<option value=1902>1902
<option value=1903>1903
<option value=2000>2000
</select>
<p>Pekerjaan :
<select name=pekerjaan>
<option value=Pelajar>Pelajar/Mahasiswa
<option value="Pegawai Negeri">Pegawai negeri
<option value=Karyawan>Karyawan
<option value=Wiraswasta>Wiraswasta
</select>
<p>Hobby :
<input type=checkbox name=hobby value=Membaca>Games
<input type=checkbox name=hobby value=Kesenian>Sport
<input type=checkbox name=hobby value=Olahraga>Music
<input type=checkbox name=hobby value=Belanja>learn
<p>Komentar : <textarea name=komentar cols=25 rows=4></textarea>
<p><input type=submit value=Kirim data><input type=reset value=Ulangi>
</form
</body>
</html>
2. dan berikut hasilnya :
Semoga bermanfaat :)
teman, kali ini materi y g ingin saya share kepada teman-teman sekalian adalah membuat tampilan CV (Curriculum Vitae) dengan HTML, kebetulan saya pribadi membuat dengan data diri pribadi saya sendiri
berikut cuplikannya :
1.tulis scriptnya di DW(DreamWeaver) :
<html>
<head>
<title>Curriculum Vitae</title> <!-- Judul pada suatu web-->
</head>
<body bgcolor="#f6e6b4" width="800px"> <!-- Membuat body memiliki warna dengan menggunakan bgcolor -->
<div align="center">
<!-- Membuat rata tengah-->
<center>
<h1>
Curriculum Vitae</h1>
<!-- Membuat huruf menjadi besar (Ukuran H1) -->
</center>
<hr />
<h2>
Personal Details</h2>
<!-- Membuat huruf menjadi besar (Ukuran H2) -->
<table width="800px"> <!-- Membuat sebuah table -->
<tr>
<td width="25%">Full Name</td>
<td width="1%">:</td>
<td><b>Ayu Rizki</b></td>
<td rowspan="5"><img src="ayuaa.jpg" alt="Foto Rico" title="Foto Ayu" height="200px" width="150px"></td>
</tr>
<tr>
<td>Place, Date of Birth </td>
<td>:</td>
<td>Jakarta, July 14, 1995</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>Jl.Srikandi, Demangan Kidul</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="mailto:ayurizki348@gmail.com">email Ayu Rizki</a></td>
</tr>
</tbody>
</table>
<h2>
Educational Background</h2>
<table width="800px">
<tbody>
<tr>
<td>2010-2013</td>
<td>:</td>
<td>Senior High School Piri, Yogyakarta</td>
</tr>
<tr>
<td>2007-2010</td>
<td>:</td>
<td>Sidoarjo Junior High School</td>
<tr>
<td>2001-2006</td>
<td>:</td>
<td>Badran Elementary School, Yogyakarta</td>
</tr>
</tr>
</table>
<br /><br /> <!-- br untuk membuat baris baru -->
<a href="achievements.html" title="achievements"><h2>
Achievements >> </h2>
</a> <!-- Pergi ke file achievements.html -->
</div>
</body>
</html>
berikut cuplikannya :
1.tulis scriptnya di DW(DreamWeaver) :
<html>
<head>
<title>Curriculum Vitae</title> <!-- Judul pada suatu web-->
</head>
<body bgcolor="#f6e6b4" width="800px"> <!-- Membuat body memiliki warna dengan menggunakan bgcolor -->
<div align="center">
<!-- Membuat rata tengah-->
<center>
<h1>
Curriculum Vitae</h1>
<!-- Membuat huruf menjadi besar (Ukuran H1) -->
</center>
<hr />
<h2>
Personal Details</h2>
<!-- Membuat huruf menjadi besar (Ukuran H2) -->
<table width="800px"> <!-- Membuat sebuah table -->
<tr>
<td width="25%">Full Name</td>
<td width="1%">:</td>
<td><b>Ayu Rizki</b></td>
<td rowspan="5"><img src="ayuaa.jpg" alt="Foto Rico" title="Foto Ayu" height="200px" width="150px"></td>
</tr>
<tr>
<td>Place, Date of Birth </td>
<td>:</td>
<td>Jakarta, July 14, 1995</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>Jl.Srikandi, Demangan Kidul</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="mailto:ayurizki348@gmail.com">email Ayu Rizki</a></td>
</tr>
</tbody>
</table>
<h2>
Educational Background</h2>
<table width="800px">
<tbody>
<tr>
<td>2010-2013</td>
<td>:</td>
<td>Senior High School Piri, Yogyakarta</td>
</tr>
<tr>
<td>2007-2010</td>
<td>:</td>
<td>Sidoarjo Junior High School</td>
<tr>
<td>2001-2006</td>
<td>:</td>
<td>Badran Elementary School, Yogyakarta</td>
</tr>
</tr>
</table>
<br /><br /> <!-- br untuk membuat baris baru -->
<a href="achievements.html" title="achievements"><h2>
Achievements >> </h2>
</a> <!-- Pergi ke file achievements.html -->
</div>
</body>
</html>
2. hasilnya seperti ini :
jika kita ingin mengirim comment kita kepada orang lain melalui e-mail, caranya adalah seperti ini. ini contoh HTML sederhana yg saya buat :
1. ini scriptnya :
2. hasilnya seperti ini :
1. ini scriptnya :
2. hasilnya seperti ini :
kali ini kita memasuki season HTML submit, button, dan list, berikut contoh sederhana dari saya :
1. ini scrpitnya :
<!DOCTYPE html>
<html><style type="text/css">
<!--
body {
background-color: #FFCC66;
}
-->
</style>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b> pilih sesuai jenis kelamin.</p>
<!DOCTYPE html>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Barka"><br>
Last name: <input type="text" name="LastName" value="Satya"><br>
<input type="submit" value="Submit">
</form>
<p>jika diklik "Submit", form-data akan terkirim pada "html_form_action.asp".</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="sangat baik">sangat baik</option>
<option value="baik">baik</option>
<option value="cukup" selected>cukup</option>
<option value="kurang">kurang</option>
</select>
</form>
</body>
</html>
</body>
</html>
</body>
</html>
1. ini scrpitnya :
<!DOCTYPE html>
<html><style type="text/css">
<!--
body {
background-color: #FFCC66;
}
-->
</style>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b> pilih sesuai jenis kelamin.</p>
<!DOCTYPE html>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Barka"><br>
Last name: <input type="text" name="LastName" value="Satya"><br>
<input type="submit" value="Submit">
</form>
<p>jika diklik "Submit", form-data akan terkirim pada "html_form_action.asp".</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="sangat baik">sangat baik</option>
<option value="baik">baik</option>
<option value="cukup" selected>cukup</option>
<option value="kurang">kurang</option>
</select>
</form>
</body>
</html>
</body>
</html>
</body>
</html>
2. hasilnya seperti ini :
berikut kita memasuki HTML bagian inputan suatu field
ini adalah contoh sederhana yg saya buat :
1. ini sciptnya :
2. hasilnya seperti ini, kita bisa menginputkannya, sebagai contoh saya menginputkan nama depan, nama belakang, dan username beserta paswordnya dengan account saya :
ini adalah contoh sederhana yg saya buat :
1. ini sciptnya :
2. hasilnya seperti ini, kita bisa menginputkannya, sebagai contoh saya menginputkan nama depan, nama belakang, dan username beserta paswordnya dengan account saya :
berikut adalah contoh sederhana HTML Formatting yang saya buat :
perlu diingat bahwa ketika kita membuat HTML formatting itu akan berdampak pada model penulisan (Bold, Italic) <b>, <i>
1. ini scriptnya :
2. dan hasilnya :
perlu diingat bahwa ketika kita membuat HTML formatting itu akan berdampak pada model penulisan (Bold, Italic) <b>, <i>
1. ini scriptnya :
2. dan hasilnya :
Sample Footer
