November 2013 ~ NATURAL HEALTH

Rabu, 27 November 2013

Membuat Tulisan Bergerak Dan Memberi Background Dengan Gambar

Saya akan memposting hasil latihan web design saya, yaitu membuat teks bergerak, adapun hasil dari latihan saya seperti dibawah ini :

Berikut ini adalah script yang saya gunakan :

Dibawah ini adalah contoh dari Teks yang bergerak, dengan menggunakan Tag marquee

Latihan Pertama Latihan Kedua Latihan Ketiga

Silahkan download file html nya disini

No comments

Membuat Form dalam table

By Safitra Hamdan on 06.46

Nah, jika sebelumnya saya memposting bagaimana cara membuat sebuah form, sekarang saya akan membuat sebuah form yang berada didalam table, hasil yang saya dapatkan seperti dibawah ini :

adapun script yang saya gunakan seperti dibawah ini :

<html>

<head>

<title>Latihan Form</title>

</head>

<body>

<table width="409" border="0" align="center" bgcolor="#FFFFFF">

<tr>

<td width="403" background="../../../WALLPAPER/Download/Barubaru/lebih baru/Tambah baru/1383340_591603457576733_1847427682_n.jpg" bgcolor="#FFFFFF"><blockquote>

<p class="style12"><span class="style3"> Sign Up</span><span class="style14"><br />

<span class="style7">It's free and always will be</span></span><span class="style6">.</span> </p>

</blockquote>

<hr width="60%" align="left"/>

<table width="403" height="290" border="0" bordercolor="#0099CC" bgcolor="#FFFF00">

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">First Name :</div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><label>

<input type="text" name="textfield" />

</label>

</label></td>

</tr>

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">Last Name : </div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><input type="text" name="textfield2" id="textfield" /></td>

</tr>

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">Your Email :</div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><input type="text" name="textfield3" id="label" /></td>

</tr>

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">Re-enter email :</div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><input type="text" name="textfield4" id="label2" /></td>

</tr>

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">New password :</div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><input type="text" name="textfield5" id="label3" /></td>

</tr>

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">I am : </div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><select name="select4">

<option>Male</option>

<option>Female</option>

<option selected="selected">Select Sex :</option>

</select></td>

</tr>

<tr>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><div align="right">Birthday :</div></td>

<td width="0" bordercolor="#FFFFFF" bgcolor="#FFFF00"><select name="select" id="select">

<option>January</option>

<option>February</option>

<option>Maret</option>

<option>April</option>

<option>Mei</option>

<option>Juni</option>

<option>July</option>

<option>August</option>

<option>September</option>

<option>October</option>

<option>November</option>

<option>December</option>

<option selected="selected">Month :</option>

</select>

<select name="select2" id="label4">

<option selected="selected">Day :</option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

<option>8</option>

<option>9</option>

<option>10</option>

<option>11</option>

<option>12</option>

<option>13</option>

<option>14</option>

<option>15</option>

<option>16</option>

<option>17</option>

<option>18</option>

<option>19</option>

<option>20</option>

<option>21</option>

<option>22</option>

<option>23</option>

<option>24</option>

<option>25</option>

<option>26</option>

<option>27</option>

<option>28</option>

<option>29</option>

<option>30</option>

<option>31</option>

</select>

<label for="label5"></label>

<select name="select3" id="label5">

<option>Year :</option>

<option>1990</option>

<option>1991</option>

<option>1992</option>

<option>1993</option>

<option>1994</option>

<option>1995</option>

<option>1996</option>

<option>1997</option>

<option>1998</option>

<option>1999</option>

<option>2000</option>

</select></td>

</tr>

</table>

<blockquote>

<p><span class="style17">Why do I need to provide my birthday?</span></p>

<p align="left"><span class="style11">

<input name="Submit" type="submit" value="Sign Up"/>

</span></p>

</blockquote>

</blockquote></td>

</tr>

</table>

<br /><br />

<table width="409" border="0" align="center">

<td bgcolor="#F0F0F0"><table width="472" border="0" align="center" bordercolor="#FF0000">

<tr>

<td width="184" bordercolor="#00FFFF" bgcolor="#00FFFF">Email</td>

<td width="178" bordercolor="#00FFFF" bgcolor="#00FFFF">Password</td>

<td width="96" bordercolor="#00FFFF" bgcolor="#00FFFF"> </td>

</tr>

<tr>

<td bordercolor="#00FFFF" bgcolor="#00FFFF"><form id="form4" name="form4" method="post" action="">

<label>

<input name="textfield6" type="text" size="31" maxlength="25" />

</label>

</form> </td>

<td bordercolor="#00FFFF" bgcolor="#00FFFF"><form id="form5" name="form5" method="post" action="">

<label>

<input name="textfield7" type="password" size="30" />

</label>

</form> </td>

<td bordercolor="#00FFFF" bgcolor="#00FFFF"><form id="form2" name="form2" method="post" action="">

<label>

<input type="submit" name="Submit2" value="Sign Up" />

</label>

</form> </td>

</tr>

<tr>

<td bordercolor="#00FFFF" bgcolor="#00FFFF"><form name="form1" method="post" action="">

<label>

<input type="checkbox" name="checkbox" value="checkbox">

</label>

Keep me logged in

</form>

</td>

<td bordercolor="#00FFFF" bgcolor="#00FFFF">Forgot your password ? </td>

<td bordercolor="#00FFFF" bgcolor="#00FFFF"></td>

</tr>

</table>

</body>

</html>

No comments

Pada pelajaran web design berikutnya yaitu membuat sebuah form, berikut ini adalah form yang saya buat :

Adapun script yang saya gunakan seperti dibawah ini :

<html>
<head>
<title>Contoh Penggunaan Formulir</title>
</head>
<body>
<form action="info.htm" method="get">
Nama :
<input type="text" name="Ardaniel" size="20" maxlength="20">
<br><br>
Hobby :
<input type="text" name="Main Bola" size="25" maxlength="40">
<br><br>
<input type="submit" value="Kirim -_-">
<input type="Reset" value="Kosongkan :v">
<br><br>
Buah Yang Anda Sukai : <br>
<input type="checkbox" name="anggur" checked> Anggur <br>
<input type="checkbox" name="jeruk"> Jeruk <br>
<input type="checkbox" name="Semangka" checked> Semangka <br>
<br>
Jenis Kelamin : <br>
<input type="radio" name="sex" checked> Male<br>
<input type="radio" name="sex"> Female<br>
<br>
Komentar Pemirsa-Permisi :<br>
<textarea name="Comment" rows="5 cols="40" wrap>
</textarea> <br>
<br>
Olahraga yang paling anda sukai :<br>
<select name="olahraga">
<option value="Sepak Bola" selected>Sepak Bola
<option value="Bulu Tangkis"> Bulu Tangkis
<option value="Basket"> Basket
<option value="Tenis Meja">Tenis Meja
<option value="Lain-lain">Lain-lain
</select><br>
</form>
</body>

</html>

No comments

Order List dan Unorder List

By Safitra Hamdan on 06.44

Latihan Web Design saya yang selanjutnya yaitu cara membuar order list dan unorder list, penasaran bagaimana hasil yang saya dapat ? Lihat aja gambar dibawah ini, akan tetapi saya membuat nya dengan sangat sederhana

Script yang saya gunakan seperti dibawah ini

<html>

<head>

<title>Latihan Order List</title>

</head>

<body><h3>Ohayou Gozaimasu</h3>

<ol type="a">

<li> item nomor 1

<li> item nomor 2

<li> item nomor 3

</ol>

<ul type="a">

<li>AO

<li>PB

<li>LS

<li>disc

<li>square

<li>circle

</ul>

</body>

</html>

Silahkan download file html nya disini

No comments

Mengatur Font

By Safitra Hamdan on 06.43

Pada latihan web design saya kali ini yaitu mengatur font face dan font size nya, serta membuatkan sebuah link, berikut ini adalah hasil dari pelajaran web design saya kali ini.

Buat yang pengen nyoba, tinggal cobain script ini :

Untuk link, saya melink-kan nya ke facebook.com, anda bisa menggantinya dengan halaman web yang anda sukai.

Silahkan download file html nya disini

No comments

Minggu, 17 November 2013

By Safitra Hamdan on 04.54

FORM PADA WEB DESIGN

From HTML merupakan tag yang paling penting adalam pemorgraman HTML khususnya dalam pembuatan aplikasi berbasis web. Form menyediakan property masukan yang dapat berupa textbox, check box, radio button, dan button.

Untuk mendkelariskan sebuah from digunakan tag <form>…</form>. Di dalam tag ini di definisikan elemen – elemen form sperti yang telah di sebutkan di atas. Selain tag, elemen form juga dapat menuliskan sembarang teks, tag, maupun image.

CONTOH FORM SEDERHANA :

<html>

<head>

<title>Contoh penggunaan formulir</title>

</head>

<body>

<form action="info.htm" method="get">

NAMA:

<input type="text" NAME="nama" size="20"

maxlength="20">

<BR>

HOBBY

<input type="text" NAME="hobby" size="25"

maxlength="40">

<BR>

<input type="SUBMIT" VALUE="KIRIM">

<input type="RESET" VALUE="KOSONGKAN">

<BR>

BUAH YANG ANDA SUKAI:<BR>

<input type="checkbox" NAME="ANGGUR" CHECKED>ANGGUR<BR>

<input type="checkbox" NAME="JERUK">JERUK<BR>

<input type="checkbox" NAME="ANGGUR">MELON<BR>

JENIS KELAMIN:<BR>

<input type="radio" NAME="sex" >PRIA<BR>

<input type="radio" NAME="sex" >WANITA<BR>

KOMENTAR ANDA:<BR>

<TEXTAREA NAME="KOMENTAR.." ROWS="5" COLS="40" WRAP>

</TEXTAREA><br>

OLAHRAGA YANG DISUKAI:<br>

<select name="Olahraga">

<option value="SepakBola">Sepak Bola

<option value="Bulu Tangkis">Bulu Tangkis

<option value="Tenismeja">Tenis Meja

<option value="Basket">Basket

<option value="Lain-lain">Lain-lain

</select>

<form>

</body>

</html>

CONTOH LAINNYA :

No comments

Rabu, 13 November 2013

By Safitra Hamdan on 18.19

FRAME PADA WEB DESIGN

Frame HTML dapat digunakan untuk menampilkan beberapa web page yang ditampilkan dalam satu window browser. Model ini sering dipakai untuk memperjelas penyajian informasi dengan menu-menu yang ada selalu ditampilkan.

Kekurangan penggunaan frame :

Developer web harus menjaga dokumen HTML lebih banyak
Sulit untuk mencetak (print) semua halaman web.

Tag Frameset :

· Tag <frameset> mendefinisikan bagaimana membagi window ke dalam fram-frame.

· Setiap frameset mendefinisikan sebuah set baris (row) atau kolom (colom)

· Setiap nilai rows/column menunjukkan jumlah tampilan area setiap row/colomn.

Tag Frame

Tag <frame> tag mendefinisikan nama dokumen HTML yang dimasukkan dalam frame.

Sebagai contoh dibawah ini adalah frameset dengan dua kolom. Kolom pertama dengan lebar 25% dari browser window. Kolom kedua dengan lebar 75% dari browser window. Dokumen HTML ”frame1.html” diletakkan pada kolom pertama dan dokumen HTML ”frame2.html” diletakkan di kolom kedua.

Contoh frame pada web design

No comments

By Safitra Hamdan on 17.59

TABLE PADA WEB DESIGN

Untuk membuat table pada halaman HTML kita harus menggunakan tag <table>…</table>.Elemen pada table berisi properti <tr>…</tr> untuk menentukan baris (table row) atau membuat baris baru yang di dalamnya terdapat property <td>…</td> untuk menampilkan data pada setiap sel table (table data) atau untuk membuat kolom baru.

Contoh table sederhana :

<html>
<head>
<title>table</title>
</head>
<body>
<body background="file:///D:/gambar/wallpaper/iphone_and_ipad-wallpaper-1366x768.jpg">
<center><b><fontsize="8" fontcolor="gold">DAFTAR PEMAIN SEPAK BOLA DUNIA</b></center>
<center>
<table border="6" bordercolor="gold" bgcolor="green" cellpadding="8">
<tr>
<td>NAMA</td>
<td>KELAS</td>
<td>AGAMA</td>
<td>ALAMAT</td>
<tr>
<td>SAFITRA HAMDAN</td>
<td>XII.TKJ 2</td>
<td>ISLAM</td>
<td>JALAN.BUKIT BARISAN</td>
<tr>
<td>REFLI HUSNI</td>
<td>XII.TKJ 2</td>
<td>ISLAM</td>
<td>JALAN BATAK</td>
</tr>
</center>
</body>
</html>

Contoh table dengan isi gambar:

No comments

NATURAL HEALTH

Rabu, 27 November 2013

Membuat Tulisan Bergerak Dan Memberi Background Dengan Gambar

Membuat Form dalam table

Membuat Form

Order List dan Unorder List

Mengatur Font

Minggu, 17 November 2013

FORM PADA WEB DESIGN

Rabu, 13 November 2013

Tag Frameset :

· Tag <frameset> mendefinisikan bagaimana membagi window ke dalam fram-frame.

· Setiap frameset mendefinisikan sebuah set baris (row) atau kolom (colom)

· Setiap nilai rows/column menunjukkan jumlah tampilan area setiap row/colomn.

Tag Frame

TABLE PADA WEB DESIGN

Popular Posts

Text Widget

Flexible Home Layout

Tabs

Contact Us

Main menu section

Sub menu section

Follow Us

Random News

Page

Side Ads

Footer Ads

Connect Us

Top Ads

Blog Archive

Blogger templates

Blogroll

Search