Pages

Friday, November 26, 2010

Praktikum Pemodelan dan Simulasi - 22 November 2010

Assalamualaikum
Bissmillah

Kembali lagi bersama saya di Praktikum Pemodelan dan Simulasi. Setelah kemarin membahas dan mempraktikan tentang "Input Gambar dan Tabel". Pada pertemuan kali ini Kita akan membahas tentang "Pembuatan Form dan Daftar isi".

Oh iy, tag HTML yang nanti akan Kita praktekkan dipisah menjadi 2 bagian. Yang pertama, tag HTML tentang pembuatan form dan yang ke dua tentang pembuatan daftar isi. Dan hasil/file-nya pun dipecah menjadi 2 bagian.
Oke.. agar lebih mudah dalam mempraktekkannya. Kalian dapat melihat hasil/tampilan-tampilan berikut terlebih dahulu.

 Tampilan pada tag HTML "Pembuatan Form"

Tampilan pada tag HTML "Pembuatan Daftar Isi"

  • Tag HTML untuk Pembuatan Form
<html>

<head>
<title>
Form
</title>
</head>

<center>
<h1><font color =green>Form</font></h1>
</center>

<form method="post"
action="http://hohoho.adil.co.id/htbin-post/post-query">

Nama &nbsp &nbsp &nbsp &nbsp : <input type=text name="nama"
size=10 max length=15><br>

Alamat &nbsp &nbsp &nbsp :&nbsp <input type=txt name="alamat"><br>

Password &nbsp : <input type=password name="pass"><br>

Kelamin &nbsp &nbsp : <input type=radio name="sex" value="L" checked>

Laki-Laki <input type=radio name="sex" value="P"> Perempuan<br>

Komputer &nbsp : <input type=checkbox name="acer"> Acer
<input type=checkbox name="hp"> Hewlet Packard
<input type=checkbox name="sony"> Sony Vaio
<input type=checkbox name="thosiba"> Thosiba <br>

<select name="os">
<option> Windows 3.11 </option>
<option> Windows 95 </option>
<option> Windows NT </option>
<option> Windows 98 </option>
<option> Windows 2000 </option>
<option> Windows ME </option>
<option> Windows XP </option>
<option> Windows Mac </option>
<option> Windows 7 </option>
<option> Windows OS2 </option>
<option> Linux </option>
</select><br>

<textarea name="area" rows=4 cols=40>Tuliskan Komentar
dan Saran Anda disini </textarea><br>

<input type=submit value="proses">
<input type=reset value="batal">

<body>
<hr width="25%" size="5" color="green">

<center>
<address>
Nama : Wisnu Jati Primadana<br>
TTL : Jakarta, 11 Februari 1990<br>
Gol. Darah : O<br>
No. Mahasiswa : 107091002272<br>
No. Telp : 021-59147236<br>
No. HP : 085693096966<br>
Email : demongpok@gmail.com<br>
Alamat : Jl. Sarangan Raya/No. 6 Perumnas 2 Karawaci Tangerang<br>
</address>
</center>
<hr width="25%" size="5" color="green">
</form>
</body>
</html> 
Sedikit penjelasan : Dalam tag HTML. Selain berisi mengenai pembuatan form, juga terdapat cara penulisan/cara pembuatan checkedbox.

  • Tag HTML untuk Pembuatan Daftar Isi
<html>
<head>
<title>
Daftar Isi
</title>
</head>

<body>
<center>
<h1>Daftar Isi</h1>
</center>

<ol>
<li><a href="struktur.html">Struktur Dasar HTML</a>

<ul>
<li><a href="content1.html">Bagian Pertama Dari Kalimat dan Paragraf</a>
<li><a href="content2.html">Format Paragraf</a>
<li><a href="content2.html#pre">Pre</a>
<li><a href="content2.html#blockquote">Blockquote</a>
</ul>

<ul>
<li><a href="content3.html#font">Font</a>
<li><a href="content3.html#type">Jenis Font</a>
<li><a href="content3.html#size">Ukuran</a>
<li><a href="content3.html#color">Warna</a>
</ul>

<li><a href="content4.html#list">Daftar Berurut dan tak Berurut</a>
<li><a href="content4.html#gambar">Gambar dan Posisinya</a>
<li><a href="content4.html#tabel">Tabel Baris dan Kolom</a>

</body>
</html>
Sedikit Penjelasan : Dalam tag HTML Pembuatan Daftar Isi ini, hampir seluruhnya berisi perintah list yang pada pertemuan lalu pernah sedikit dicontohkan. Dan untuk pembuatan daftar isi ini memperlukan file .HTML yang lainnya. Sebab, didalamnya terdapat perintah yang menyatakan kalau di klik maka akan menuju ke halaman yang dituju (men-link/mengoper).

Langkah selanjutnya, Save file dengan ekstensi .html (ingat jangan .txt) kalau Kalian menggunakan notepad dalam pengerjaannya. Lalu run/buka/jalankan file ini dengan browser (IE, Mozilla atau Opera).

Mungkin untuk materi Pembuatan Form dan Daftar Isi, yang dapat saya sampaikan hanya segini saja. Mohon maaf kalau ada yang salah dan ada kekurangan didalamnya.

Mau tidak ribet dan tidak capek...
>>Download Disini<< 
 
Terimakasih
Wassalam...


0 comments:

Post a Comment

Popular Posts