Selasa, 30 November 2010

Pertemuan Keempat: MEMBUAT FORM, KOTAK SARAN DAN MENU BERTAUTAN

sourcecode FORM nya nih gan:
<html>
<head>
<title>
</title>
</head>
<body>
<h2><font color=”black”>FORM </font></h2></br>
<form methode=”post”
action=”http://agung.iqbal@gmail.co.id/htbin-post/post-query“>
Nama : <input type=text name=”nama” size=10 maxlenght=15><br>
Alamat :<input type=txt name=”alamat”><br>
Password:<input type=password name=”pass”><br>
Kelamin :<input type=radio name=”sex” value=”L” checked>Laki-laki
  <input type=radio name=”sex” value=”P” checked>perempuan <br>
Komputer : <br> <input type=checkbox name=”acer”>acer <br>
  <input type=checkbox name=”hp”>hewlet packard<br>
  <input type=checkbox name=”sony”>sony vaio<br>
  <input type=checkbox name=”toshiba”>toshiba<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 di sini </textarea>
 <br>
<input type=submit value=”proses”>
<input type=reset value=”batal”>
<br>
<hr size=5 width=50% color=RED>
<center>
Nama: Brus Don Mardo<br>
TTL: Tangerang, 19 Juli 1989<br>
Nim : 107091002264<br>
No telp: 085781147591<br>
Email:onyet.lovers@gmail.com<br>
Alamat :Jatiuwung, kota tangerang<br>

<hr size=5 width=50% color=red>
</form>
</body>
</html>

sourcecode membuat menu bertautan :
<html>
<head>
<title>membuat link pada sebuat website</title>
</head>

<body>
<h1><center> DAFTAR ISI</center></h1>

<ol>
<li><a href="#isi dengan link yang kita kehendaki">Struktur dasar HTML</a>
<ul>
<li><a href="
#isi dengan link yang kita kehendaki
 ">bagian pertama dari kalimat dan paragraf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">format paragraf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">pre</a>
<li><a href="
#isi dengan link yang kita kehendaki
">blockquote</a>
</ul>

<ul>
<li><a href="
#isi dengan link yang kita kehendaki
">Font</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Tipe Huruf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Ukuran Huruf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Warna Huruf</a>
</ul>

<li><a href="
#isi dengan link yang kita kehendaki
">Struktur dasar HTML</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Gambar dan Posisinya</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Tabel Baris dan Kolom</a>

</body>
</html>

Minggu, 21 November 2010

Pertemuan Ketiga: Membuat Website dengan HTML (lanjutan)

Penampakan nya gan :



Codingnya :
<html>

<head>
<title>Gambar dalam web page</title>
</head>


<body>

<center>

<h1><font color =green>GAMBAR</font></h1>

</center>

Anda dapat menambahkan gambar <img src="1.jpg" width="50" size> di dalam semua web page anda. Gambar ini akan berada di sebelah kiri dan kanan teks yang ada.</br>
</br>

<p><img align=left src="1.jpg" width="50">Gunakan attribut ALIGN=LEFT jika anda ingin meletakkan gambar di sebelah kiri teks anda seperti dalam contoh ini.</br>
</br>
</br>

<p><img align=right src="1.jpg" width="50">Gunakan attribut ALIGN=RIGHT jika anda ingin meletakkan gambar di sebelah kiri teks anda seperti dalam contoh ini.</br>
</br>
</br>


<p>ALIGN=TOP Teks rata dengan bagian atas <img align=top src="1.jpg" width="50"> gambar.
</br>
</br>


<p>ALIGN=MIDDLE Teks rata dengan bagian atas <img align=middle src="1.jpg" width="50"> gambar.
</br>
</br>


<p>ALIGN=BOTTOM Teks rata dengan bagian atas <img align=bottom src="1.jpg" width="50"> (default) gambar.
</br>
</br>

<hr size="5">

<h2>WIDTH dan HEIGHT</h2>

<img width=100 height=90 src="1.jpg">
WIDTH=100, HEIGHT=90

<hr size="5">

<h2>ALT</h2>
Jika gambar tidak tampil akan digantikan sebuah teks alternatif dengan memberi attribut alt, saat gambar di sorot oleh mouse.</br>

<img src="alt.jpg" align=middle width=100 height=90 alt="Gambar diriku"></br>

Arahkan mouse pada gambar yang tidak tampil

<hr size="5">

<dl>
<dt><img src="1.jpg" width="10%"> Menu Satu
<dt><img src="1.jpg" width="10%"> Menu Dua
<dt><img src="1.jpg" width="10%"> Menu Tiga
<dt><img src="1.jpg" width="10%"> Menu Empat
</dl>

<hr size="5">

<center>
<h1>Tabel</h1>
<caption><b>Judul Tabel</b></caption>

<table width=70% height=70% border=1>
<tr>
<th>Baris 1 Kolom 1</th>
<th colspan=2>Baris 1 Kolom 2-3</th>

</tr>

<tr>
<th>Baris 2 Kolom 1</th>
<td rowspan=2>Baris 2-3 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>

<tr>
<th>Baris 3 Kolom 1</th>
<td>Baris 3 Kolom 3</td>
</tr>

<tr>
<td align=left>LEFT</td>
<td align=center>CENTER</td>
<td align=right>RIGHT</td>
</tr>

<tr>
<td valign=top>TOP</td>
<td valign=middle>MIDDLE</td>
<td valign=bottom>BOTTOM</td>
</tr>
</table>




</center>



<center>
<hr width="25%" size="5" color="green">
<img src="1.jpg" width="20%">
<hr width="25%" size="5" color="green">
<address>
Nama    : Brus Don Mardo </br>
TTL    : Tangerang, 19 Juli 1989 </br>
NIM    : 107091002264</br>
No.Tlp    : 085781147591 </br>
E-mail    : onyet.lovers@gmail.com </br>
Ym    : bruz_moza </br>
Fb    : onyet.lovers@gmail.com </br>
Blog    : bruztechdunk.blogspot.com </br>
Alamat    : Kp.Cikoneng Girang No.46 Kel. Manis Jaya Kec. Jaituwung Kota Tangerang-Banten
</address>
<hr size="5" color="blue">
</center>

</body>

</html>

Minggu, 07 November 2010

Pertemuan Kedua : Membuat Website dengan HTML (lanjutan)

Coding HTML:
<html>
<head>
<! Bagian Kepala dari Dokumen HTML>
<title> Membuat Halaman Web Sendiri
</title>
</head>

<body bgcolor=blue>
<font color = "white" font face= "tahoma"><h3 align=center >MEMBUAT HOME PAGE
 DENGAN HTML</h3></font>

<! Isi dari dokumen HTML>
<b><i><u>Membuat sebuah halaman home page bukanlah suatu hal
yang sulit dan rumit<br></b></i></u>Hanya dengan menggunakan suatu
program editor teks (seperti notepad), dan sebuah browser
(IE Explorer) yang sudah tersedia bahkan dapat diunduh
dari internet. <p>Hal terpenting yang perlu diketahui adalah
cara untuk membuat beberapa elemen HTML, seperti paragraf,
tabel, list (daftar), format teks, teks hyperlink dan
elemen lainnya yang akan digunakan sebagai simulasi.</p>
<hr size=5>
<pre>
"Performatted text: membuat tesks terlihat seperti apa yg diketikan.
Kalimat ini terletak pada baris baru yang dibuat dengan penekanan tombol Enter.
P e r h a t i k a n . . . bahwa kita dapat memberikan spasi sebanyak yang kita suka"</pre>

<hr size="3">

<blockquote>
Blockquote akan memformat teks kedalam format suatu kutipan teks dengan identasi dikiri dan kanan,margin seperti terlihat pada contoh ini
</blockquote>

<hr size="3">
<center><h1>Format Teks</h1>
<b>Teks Tebal</b><br>
<i>Teks Miring</i><br>
<u>Teks Bergaris Bawah</u>

<h2><font color="white"> < FONT > </font></h2>
<h3><font color="yellow">Ukuran Font</font></h3>
<font size=1>Ukuran = 1</font><br>
<font size=2>Ukuran = 2</font><br>
<font size=3>Ukuran = 3</font><br>
<font size=4>Ukuran = 4</font><br>
<font size=5>Ukuran = 5</font><br>
<font size=6>Ukuran = 6</font><br>
<font size=7>Ukuran = 7</font>

<h3><font color="black">Warna Font</font></h3>
<font color=white>Putih</font><br>
<font color=Yellow>Kuning</font><br>
<font color=Purple>Ungu</font><br>

<h3><font color="red">Jenis Font</font></h3>
<font face="Arial">Arial</font><br>
<font face="Times">Times</font><br>
<font face="Wingdings">Wingdings</font><br>

<h1>Daftar/List</h1>
</center>

<ol>
<li>Daftar Berurut &lt;OL&gt;

<ol type=1>
<li>Bilangan Biasa &lt;OL TYPE=1&gt;
</ol>

<ol type=I>
<li>Bilangan Romawi Besar &lt;OL TYPE=I&gt;
</ol>

<ol type=1>
<li>Bilangan Romawi Kecil &lt;OL TYPE=i&gt;
</ol>

<ol type=A>
<li>Huruf Besar &lt;OL TYPE=A&gt;
</ol>

<ol type=a>
<li>Huruf Kecil &lt;OL TYPE=a&gt;
</ol>


<li>Daftar Tak Berurut &lt;UL&gt;

<ul type=disc>
<li>Cakram</ul>

<ul type=circle>
<li>Lingkaran</ul>

<ul type=square>
<li>Kotak</ul>

<li>Daftar Direktori & Menu &lt;DIR&gt; &lt;MENU&gt;

<dir>
<li>autoexec.bat
<li>config.sys
</dir>

<menu>
<li>File
<li>Edit
</menu>

<li>Daftar Definisi &lt;DL&gt;

<dl>
<dt>DL
<dd>Definition List

<dt>DT
<dd>Definition Term

<dt>DD
<dd>Definition Data
</dl>

</ol>

<hr size="3">

<center><img width=210 src  =  "gw.jpg"></center>

<address><center>
Brus Don Mardo<br>
Kp. Cikoneng Girang No.46 Kel.Manis Jaya Kec. Jaituwung<br>
Kota Tangerang<br>
HandPhone : 085781147591<br>
E-mail : onyet.lovers@gmail.com
</address></center>
<hr size=7>


</body>

</html>
 

Hasil Tampilan nya: