Rabu, 20 Juni 2012

langkah menggabungkan file html dan css

1.       Inline Style
Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini contoh penulisan Inline Style:
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
</head>
<body>

<p>
<h2 style=”color:#FFCC00″>Contoh untuk Inline Style
</p>
</h2
</body>
</html>
Keterangannya : tulisan ‘ Style ‘ itu merupakan perintah CSS untuk tulisan di H2 supaya warna font di rubah menjadi warna #FFCC00 ( Orange )
2.Embedded Style
Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page )
Berikut ini contoh penulisannya :
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<style type=”text/css”>
h2{
color:#FFCC00;
background:#CC0000;
}
</style>
</head>
<body>

<p>

<h2>Contoh untuk Embedded Style
</p>
</h2>
</body>
</html>

Seperti anda lihat contoh penulisan diatas untuk Embedded Style penulisan CSS di antara <head>…</head> disini tulisan CSS langsung di eksekusi oleh browser dan untuk type seperti ini cocok untuk website yang halamannya tidak banyak misalnya untuk company profil dll.


Untuk yang lebih komplek cocoknya menggunakan Link Style yang akan kita bahas di bawah ini.
3.Link Style


Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di antara <head>…</head>.
Berikut ini contoh penulisannya.
File HTML : ( anda simpan dengan nama index.html )
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

<p>

<h2>Contoh untuk Link Style
</p>
</h2>
</body>
</html>
Anda buat folder baru dengan nama css dan anda simpan code dibawah ini dan  anda simpan ke dalam folder tersebut dengan nama  style.css  )
h2{
color: #FFCC00;
background: #CC0000;
}


Anda bisa melihat hasilnya dengan membuka file index.html pada browser anda dengan menklik 2 kali.
Anda masih bisa membuat file html dengan memberi nama yang lain dan letakkan di antara <head>…</head> anda beri linkini:
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
Dan anda bisa merubah tampilan seluruh halaman hanya dengan mengedit file style.css maka seluruh file juga ikut berubah mengikuti apa yang anda rubah.

Menggabungkan Kode CSS ke Kode HTML Tanpa Menggunakan File CSS

<style type="text/css">
.mytable {
    background: #fff;
    border-collapse: collapse;
    margin-bottom: 7px;
    width: 400px;
}
.mytable td {
    border: 1px solid #bbb;
    background: #fff;
    padding: 5px;
    font-family: verdana;
    font-size: 9pt; 
}
.mytable th {
    border: 1px solid #aaa;
    background: #F7F7F7;
    text-align: center;
    padding: 7px;
    font-family: verdana;
    font-size: 9pt; 
}
.recno {
    text-align: center;
    width: 100px;
}
</style>
 
<table class="mytable">
  <tr>
    <th>First Column</th><th>Second Column</th>
  </tr>
  <tr>
    <td class="recno">1.</td><td>First record</td>
  </tr>
  <tr>
    <td class="recno">2.</td><td>Second record</td>
  </tr>
  <tr>
    <td class="recno">3.</td><td>Third record</td>
  </tr>
</table>

menggunakan style-style css

<html>
<head>
<title>Halaman CSS</title>
<link rel=stylesheet href="contoh2.css" type="text/css">49
</head>
<body>
<span>Selamat Datang</span><br>
<div>
Halaman ini menggunakan CSS.<br>
Halaman Situs yang sederhana,<br>
dan biasa saja,<br>
tapi tetap ada keindahan.
</div>
<table border="2"><tr>
<td>
Seperti dapat anda lihat :<br>
Style bahkan dapat bekerja pada elemen table.
</td></tr></table>
<hr>
<div>contoh.html dan contoh2.CSS</div>
<hr>
</body>
</html>

buat file CSS dengan format . css (*misal css.css)

/* CSS tabel */#table tr:hover (*css tabel hover)
{
    background-color:#ccaed0;
    
    font-family: “Century Gothic”, cursive;
    color: #000;
}/** garis tabel **/    
table, tr{
    border-collapse:collapse;
    }th{
    background:#dacde7; (memberikan warna back ground pada pada th )
    
    font-family:”Century Gothic”;
    color:#000;
    padding:10px;
    border: solid thin #FFF;
    border-collapse:collapse;
    border-color:#fff;
}
td
{
    padding:10px;
    border:thin solid #FFF;
    border-collapse:collapse;
    border-color:#fbf3fd;
    
    
}
 
 
 
——————————>>>
nb: (*) merupakan penjelaan dari saya
——————————>>>
 
berikut merupakan tampilannya,,
 

membuat file pada tabel

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”css.css” />   (*link untuk menghubungkan file css)
<title>Belajar CSS</title>
</head>

<table cellpadding=”10″ border=”0″ align=”center” id=”table” style=”font-size:14px”>(* id table merupakan id dengan nama table pada css yang memberikan efek hover pada tabel)
<tr >
    <th > No.</th>
    <th> Calon Asprak </th>
    <th> Matakuliah Dipilih </th>
    <th> Total Penilaian </th>  
   
       
   
</tr>
<tr style=”font-family:’Century Gothic’”>
    <td > 1.</td>
    <td> Tanti</td>
    <td> Basis Data </td>
    <td> 20000 </td>  
 
    </tr>
    
<tr style=”font-family:’Century Gothic’”>
    <td > 2.</td>
    <td> Ichsan</td>
    <td> Basis Data </td>
    <td> 19000 </td>  
    <td colspan=”2″> Tools </td>
</tr>       
   
<body>
</body>
</html>

cara membuat tabel

Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.
<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Cell 1 – Baris 1 Kolom 1 Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1 Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1 Cell 6 – Baris 3 Kolom 2
Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.
Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.
<table border="1" width="75%">
 <tr>
  <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 1</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Baris 1 Kolom 1 Baris 1 Kolom 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
 </tr>
 <tr>
  <td style="width:50%">Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
<table border="1" width="75%">
 <tr>
  <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>
Hasil:
Gabungan Baris 1&2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.
<table border="1" width="75%" cellpadding="8">
 <tr>
  <td style="width:50%;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.
<table border="1" width="75%" cellspacing="8">
 <tr>
  <td style="width:50%">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Membuat titel pada tabel.
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
 <tr>
  <th style="width:50%;">Header Kolom 1</th>
  <th>Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Disini adalah titel tabel ini
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.
<table style="background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.
Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.
Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.
<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>
Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.
<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>
Hasil:
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Membuat tabel pada html

<html>
                <head>
                                <title>Struktur Table</title>
                </head>
                <body>
<table border=”1”>
                                <tr>
                                                <td>data baris 1 kolom 1</td>
                                                <td>data baris 1 kolom 2</td>
                                </tr>

                                <tr>
                                                <td>data baris 2 kolom 1</td>
                                                <td>data baris 2 kolom 2</td>
                                </tr>
                                <tr>
                                                <td>data baris 3 kolom 1</td>
                                                <td>data baris 3 kolom 2</td>
                                </tr>
                </table>
</body>
</html>

Maka akan terlihat seperti ini strukturnya :

Sekarang saya akan menjelaskan atribut yang terdapat dalam tag <table>.
Atribut elemen table :
Width                    = Lebar tabel
Height                   = tinggi table
Border                  = tebal garis table
Cellspacing          = spasi antar sel
Cellpadding        = spasi di dalam sel
Align                      = [left | center | right] perataan table
Bgcolor                 = warna latar belakang table
Atribut table row
Align                      = [left | center | right] perataan sebaris sel secara horizontal
Valign                    = [top | middle | bottom] perataan sebaris sel secara vertical
Bgcolor                 = warna latar belakang baris
Atribut table data :
Rowspan             = menggabungkan baris
Colspan                                = menggabungkan kolom
Align                      = [left | center | right] perataan horizontal
Valign                    = [top | middle | bottom] perataan horizontal
Width                    = lebar sel
Height                   = tinggi sel
Bgcolor                 = warna latar belakang sel
Ketikan script HTML berikut pada note pad lalu simpan dengan ekstensi .HTML lalu jalankan untuk mencobanya.
<html>
                <head>
                                <title>Tabel</title>
                </head>
                <body>
                Berikut ini contoh table dengan rowspan dan colspan
                          <table width=80% border=2 cellspacing=0 cellpading=0>
                                 <tr>
                                                <td>baris 1 kolom 1</td>
                                                <td>baris 1 kolom 2</td>
                                 </tr>
                                 <tr>
                                                <td colspan=2>baris 2 kolom 1</td>
                                 </tr>
                                 <tr>
                                                <td rowspan=2>baris 3 kolom 1</td>
                                                <td>baris 3 kolom 2</td>
                                 </tr>
                                 <tr>
                                                <td>baris 4 kolom 2</td>
                                 </tr>
                         </table>
            </body>
</html>

membuat desain halaman web berbasis frame pada html

man web lebih dari satu halam dalam satu waktu yang melibatkan hyperlink dokumen internal, link email, link gambar, dan link halaman web online dengan memanfaatkan atribut link seperti target=”_blank” title=”Title link”> dapat juga menampilkan bentuk form, semuanya dapat dibuat pada HTML. Printscreen desain:

image
Kode HTML:

Kode pemersatu frame, binner.com.html
 

<!DOCTYPE html> <html lang="en"> <head> <title> R-ZHICX Binner official website </title> </head> <frameset Rows="30%, 60%, 10%" Frameborder="no"> <frame SRC="header-binner.html" scrolling="NO" resize="YES"> <frameset Cols="13%,74%,13%"Frameborder="Yes" border=3 bordercolor="LIME"> <frame SRC="left-binner.html" scrolling="NO"> <frame SRC="center-binner.html" scrolling="YES"> <frame SRC="right-binner.html" scrolling="NO"> </frameset> <frame SRC="footer-binner.html" scrolling="NO" resize="YES"> </frameset><noframe></noframe> </html>

Main content, center-binner.html

<!DOCTYPE html> <html lang="en"> <head> <marquee><title>Pengantar Teknologi Informasi</title></marquee> </head> <body background="belajar_html/bgbinner.jpg" repeat="NO"> <p><img src="belajar_html/pinbinner.png" height="200" align="top"></p> <font color="yellow" face="Arial Narrow"><h1 align="right"> Belajar Pemrograman Berbasis Web</h1></font> <hr><hr> <font color="white" size "14" face="Arial"><p><strong>Binner: Bulletin Electrical Engineering</strong></p> PENDAHULUAN <ul> <font color="lime"><li><a href="#latarberlakang">Latar Belakang</a></li> <li><a href="#tujuan">Tujuan</a></li> <li><a href="#target">Target</a></li></font> <h3 id="latarbelakang"><u>Latar Belakang</u></h3> <p>Dewasa ini perkembangan informasi semakin pesat. Banyak berita dan karya muncul dan kesemuannya tercipta karena daya imajinasi, kreatifitas dan intelejen. Hal itu menyebabkan hanya mahasiswa tertentu yang dapat memperoleh informasi. Mahasiswa biasa seharusnya juga dapat memperoleh informasi sebagaimana harapan dan sesuai bidang yang ditekuni. Oleh karena itu, perlu adanya media informasi yang mudah didapat dan diperoleh oleh civitas akademika. Bulletin Electrical Engineering (BINNER) hadir untuk memberikan informasi tidak hanya seputar jurusan, kampus, tetapi juga tips-trik, saran kritik tentang penyelenggaraan kehidupan di lingkup Jurusan Teknik Elektro Fakultas Teknik Universitas Negeri Malang yang diharapkan oleh civitas akademika. </p> <h3 id="tujuan"><u>Tujuan</u></h3> <p> <b>Tujuan Kegiatan</b> <ul> <li>Membantu mahasiswa khususnya Mahasiswa Jurusan Teknik Elektrodalam upaya menimbulkan jiwa kritis Mahasiswa Jurusan Elektro. <li>Menyiapkan dan mengembangkan minat mahasiswa Jurusan Teknik Elektrodalam berbagai bidang khususnya saling bertukar informasi dan pengalaman. <li>Membentuk mahasiswa Jurusan Teknik Elektroyang mempunyai rasa tanggung jawab yang tinggi, disiplin waktu, kerjasama dan kebersamaan, serta menjalin persaudaraan antar mahasiswa Jurusan Teknik Elektro. <li>Memberikan wawasan yang luas dengan adanya partisipasi dalam kegiatan tukar informasi. </ul> <h3 id="target"><u>Target</u></h3> <p> <b>Target Kegiatan</b> <ul> <li>Mempunyai informasi yang mendukung civitas akademika menuju mahasiswa Jurusan Teknik Elektroyang mandiri dan kritis. <li>Mempunyai nilai-nilai positif dalam kegiatan akademik dan kemahasiswaan. <li>Terjalinnya rasa solidaritas, kekeluargaan dan kerjasama antar mahasiswa Jurusan Teknik Elektro pada khususnya dan mahasiswa UM pada umumnya. <li>Mampu menelaah informasi, pendapat, tips-trik, yang diberikan dalam kegiatan Bulletin Electrical Engeenering (BINNER) secara menyeluruh. </ul> </p> </ul> </font> <hr><hr> <form> <pre> <blockquote><font color="white"> Formulir Login belum ada databasenya!<br> Nama :<INPUT type="text" name="Nama"> E-mail :<INPUT TYPE=TEXT NAME="Email" SIZE=20> Telepon :<INPUT TYPE=TEXT NAME="Telepon" SIZE=7> Jenis Kelamin :<label><input type="radio" name="Radio" value="laki-laki"> Laki-laki</label><label><input type="radio" name="Radio" value="perempuan"> Perempuan</label> Hobi :<input type="checkbox" name="main_game"><label>Belajar Web</label><input type="checkbox" name="Belajar Server"><label>Belajar IT</label><input name="Nama" type="checkbox"><label>Lainnya</label> </font></blockquote> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="CANCEL"> </PRE> </FORM> <hr color="black" size="2" width="90%" align=left> <a href="http://um.ac.id">UM: The Learning University (official site)</a><br> </font> </body> </html>

Right Side, right-binner.html

<!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <body bgcolor="black"> <blink> <br><font color="white"><p align="center">What is Binner?<font size="2" color="lime">?</font><br><blink> Binner Edisi 2</blink><br><a href="binner.com.html" target="_blank" title="klik to back HOME" border="no"><img src="belajar_html/binner_2nd.jpg" width="100" height="150" border="2"></a></font> </body> </html>

Left Side, left-binner.html

<!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <body bgcolor="black"><br> <font color="white"><p align="center"> What is Binner?<font size="2" color="lime">?</font><br> <blink>Binner Edisi 1<br><a href="binner.com.html" target="_blank" title="klik to back HOME" border="no"><img src="belajar_html/binner_1st.jpg" width="100" height="150" border="2"><br><br> </font> </body> </html>

Footer Area, footer-binner.htm







 


Penjelasan Singkat:
Untuk menampilkan lebih dari satu halaman dokumen dalam satu waktu dapat menggunakan frame, frame berbeda dengan table, tiap-tiap frame mencerminkan halam yang independen. Tag pembuatan frame diawali dengan <frameset cols=”ukuran1”,”ukuran2”> untuk membentuk frame colom sebanyak 2 halaman. Dilanjutkan dengan <frame src=”header_frame”/> untuk mencari letak frame yang sudah dibuat agar dapat ditampilkan dalam kesatuan halaman web. Untuk lebih mudah, dapat diilustrasikan sebagai berikut:
image



   

Membuat FORM pada dokumen HTML

FORM merupakan elemen HTML yang berupa blangko yang digunakan untuk menjaring informasi dari pengguna. Untuk membuat FORM dimulai tag <form> dan diakhiri dengan </form>.
Untuk lebih jelasnya, lihat script berikut :
<html>
<head><title>macam-macam FORM</title></head>
<body>
<form>

<p><b><font face=”Verdana” size=”2″>1. contoh INPUT type TEXT:<br>
<input type=”text” name=”nama” size=”15″ maxlength=”12″>

<p>2. contoh INPUT type PASSWORD:<br>
<input type=”password” name=”password” size=”30″ maxlength=”30″>
<p>3. contoh INPUT type CHECKBOX:<br>
<input type=”checkbox” name=”checkbox1″ value=”checkbox_value1″>cek bok
<input type=”checkbox” name=”checkbox2″ value=”checkbox_value2″>cek bok

<p>5. contoh INPUT type RADIO #1:<br>
<input type=”radio” name=”pilih” value=”pilih1″>Ya
<input type=”radio” name=”pilih” value=”pilih2″>Tidak
<p>6. contoh INPUT type RESET:<br>
<input type=”reset”>
<input type=”reset” value=”bersihkan”>

<p>7. contoh INPUT type SUBMIT:<br>
<input type=”submit”>
<input type=”submit” value=”kirim”>
<p>8. contoh TEXTAREA :<br>
<textarea name=”komentar” rows=”4″ cols=”40″>Text</textarea>

<p>9. contoh SELECT #1 :<br>
<select name=”situs”>
<option selected value=”Ethernet”>Ethernet
<option value=”token16″>Token Ring – 16MB
<option value=”token4″>Token Ring – 4MB
<option value=”localtalk”>Localtalk
</select>
<p>10. contoh SELECT #2 (bila size > atau = jumlah pilihan):<br>
<select size=”4″ name=”jarkomp”>
<option selected value=”Ethernet”>Ethernet
<option value=”token16″>Token Ring – 16MB
<option value=”token4″>Token Ring – 4MB
<option value=”localtalk”>Localtalk
</select>

<p>11. contoh SELECT #3 (bila size < jumlah pilihan, perhatikan pengaruh MULTIPLE):<br>
<select size=”4″ multiple name=”jarkomp”>
<option selected value=”Ethernet”>Ethernet
<option value=”token16″>Token Ring – 16MB
<option value=”token4″>Token Ring – 4MB
<option value=”localtalk”>Localtalk
<option value=”wifi”>Wifi
</select>
<br>
Jika masih ada yang lain, silakan isi : <input type=”text” name=”jarkomp_lain”></b></font>
</form>
</body>
</html>

html.jpg

Membuat frame dan form

Pada materi kali ini akan dibahas mengenai cara membuat frame dan form pada halaman web, berikut pembahasannya :
A.     FRAME.
Untuk membuat sebuah frame terlebih dahulu kita harus membuat halaman-halaman web yang ingin kita gabungkan dalam frame tersebut. Berikut adalah halaman-halaman web yang telah dibuat berikut sintaksnya.
Asal.html.
 <HTML>
<HEAD> <TITLE> ASAL </TITLE> </HEAD>
<BODY>
<H1> <center> WELCOME </H1>
<marquee direction="down"> <center> <font size="5">To Edy'S Site's</font> </marquee>
<p><font size="6"> This site connecting people </font></P>
</BODY>
</HTML>
sintaksnya.

menu.html.
<html>
<head><title> menu </title></head>
<body>
<a href="Web 1.html" target="isi">Pembuka</a><br>
<a href="asal.html" target="isi">Iklan</a>
</body>
</html>
sintaksnya

 
web 1.html
<html>
<body>
<head><title>WEB</title></head>
<body>
<p align="center"> <font size="45"></font><hr align="center" width="100"></p>
<p> <font face="arial" color="ff0000" >
One piece adalah film yang menceritakan tentang sebuah perjalanan dari sekelompok
bajak laut yang ingin menjadi raja dari segala bajak laut.</font></p>
<p> Tokoh-tokoh dari One Piece adalah :
<ul type="circle">
       <li>Luffy</li>
       <li>Nami</li>
       <li>Zoro</li>
       <li>Sanji</li>
       <li>Usop</li>
       <li>Choper</li>
       <li>Robin</li>
</ul></P>
<p> <img src="image/luffy2.jpg" width="100" height="110">
<img src="image/nami.jpg" width="85" height="110">
<img src="image/zoro.jpg" width="75" height="110">
<img src="image/sanji.jpg" width="85" height="110">
<img src="image/usop.jpg" width="95" height="110">
<img src="image/choper.jpg" width="85" height="110">
<img src="image/robin.jpg" width="85" height="110">
</body>
</html>
 
 
header.html
<html>
<head><title> awalan </title></head>
<body>
<h1 align="center"><img border="10" src="image/luffy2.jpg" width="100" height="120">Monkey D Luffy</h1>
</body>
</html>
 

isi.html
<html>
<head><title>&nbsp</title></head>
<body>
</body>
</html>

 
Sebenarnya isi.html merupakan sebuah halaman kosong yang sengaja dibuat sebagai halaman awal untuk frame pembuka.
 
Kemudian selanjutnya bila kita gabungkan halaman-halaman web tersebut di dalam sebuah frame maka hasilnya akan seperti berikut :
Berikut adalah sintaksnya :

<html>
<head></head>
<frameset rows="26%,74%">
   <frame src="Section/header.html">
   <frameset cols="13%,67%,20%">
          <frame src="Section/menu.html">
          <frame src="Section/Web 1.html">
          <frame src="Section/isi.html" name="isi">
   </frameset>
</frameset>
</html>    

Selanjutnya tampilan framenya adalah
 
Kemudian bilakita klik pembuka maka tampilan frame yang akan keluar adalah
 
Selanjutnya bila yang diklik adalah iklan maka tampilan framenya
 
 
B.   Form.
Pengertian form adalah suatu halaman web yang digunakan untuk memasukkan data. Proses kerja form pada umumya setelah diisi data akan dikirim oleh client ke server dengan menunjuk kepada program yang akan menerima input di server. Proses inilah yang disebut dengan Action. Dalam form dikenal bebrepa perintah yang sangat penting dan selalu digunakan saat membangun suatu website. Diantaranya METHOD=GET, METHOD=POST dan juga ACTION. Berikut adalah pengertian dari perintah-perintah tersebut :
1.     Method=Get
Yaitu suatu cara bagaimana program di server membaca komponen form yang diterima. Method ini akan mengolah input yang dikirim dengan teknik tertentu. Dalam hal ini yang digunakan adalah membaca parameter dari sebuah fungsi.
2.     Method=Post.
Digunakan untuk mengolah input dari suatu client dengan teknik program yang membaca standard input. Yang menjadi acuan adalah bahasa program seperti ASP/CGI, sehingga seolah-olah program tersebut membaca input dari papan ketik atau keyboard.
3.     Method=Action.
Yang dimaksud dengan Action adalah suatu aksi yang menunjuk pada program CGI/ASP. Dalam hal ini adalah nama program yang berakhiran ASP. Dalam penulisan dokumenHTML khususnya yang berhubungan dengan form ada beberapa komponen input yang sering digunakan. Komponen-komponen tersebut diantaranya yaitu :
Þ      Text
Disebut juga komponen string. Berikut tagnya < INPUT TYPE=TEXT NAME=”nama” SIZE=”20” >
Kemudian dari tag diatas ada beberapa criteria yang harus diketahui :
Ø    Input adalah kata kunci.
Ø    Type adalah jenis atau tipe input.
Ø    Name adalah nama variabel untuk input tersebut
Ø    Size digunkan untuk mengatur lebar komponen tersebut.
Þ      Radio Button
Radio Button adalah suatu tombol yang digunakan untuk mengambil salah satu pilihan dari banyak pilihan yang tersedia. Cara penggunaan perintah tersebut yaitu :
< INPUT TYPE=RADIO NAME=”radio” VALUE=”nama” CHECKED > CAPTION
Þ      Check Box
Komponen ini hampir sama dengan radio, yaitu untuk menampilkan pilihan. Selain bentuk tampilannya yang berbeda, pada Check Box pilihan yang disediakan bebas untuk dipilih atau tidak, bisa dipilih semua bahkan bisa juga dikosongi. Tidak seperti Radio yang hanya satu pilihan saja yang bisa dipilih.
Þ      Button
Dalam HTML terdapat dua tombol yang sangat sering digunakan yaitu Submit dan Reset. Tombol Submit digunkan untuk mwngaktifkan action ketika kita sudah berhadapan dengan ASP/CGI yang ada dalam server. Sedang Reset digunakan untuk membersihkan data pada form yangtelah kita masukkan. Caption pada tombol dapat diganti dengan perintah Value.
Þ    Select dan Option
SELECT adalah perintah yang digunakan untuk memilih salah satu pilihan dari daftar pilihan dalam bentuk dropdown. SELECT digunakan untuk mengidentifikasi pilihan sedangkan untuk membuat dan menampilkan pilihan adalah dengan perintah OPTION.  
Þ      Password
Komponen ini penting untuk menjaga keamanan data yang kita masukkan. Biasanya berupa angka atau huruf yang tidak ditampilkan ketika kita mengisinya. Berikut adalah tagnya  < INPUT TYPE=PASSWORD NAME=”xxxx” SIZE=”xxx” >

Sebenarnya masih banyak lagi komponen-komponen yang lain. Tetapi tidak dapat disebutkan satu-persatu.
               
Kemudian penulisan sintaks form untuk digunakan sebagai pembahas untuk permasalahan diatas yaitu :
<html>
<head><title> &nbsp </title></head>
<body>
<form name="biodata" method="post" action="inisialisasi2.html">
<table border>
<tr>
              <td width="200">User Name</td>
              <td><input type="text" name="user_name" ></td>
</tr>
<tr>
              <td>Password</td>
              <td><input type="password" name="password" ></td>
</tr>
<tr>
              <td>Re-type Password</td>
              <td><input type="password" name="re_password" ></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="e_mail" size="40"></td>
</tr>
<tr>
<td></td></tr>
<tr>
       <td>Nama</td>
       <td><Input type="text" name="nama",size="100"></td>
</tr>
<tr>
       <td>NIM</td>
       <td><Input type="text" name="NIM",size="50"></td>
</tr>
<tr>
       <td>Alamat</td>
       <td><Input type="text" name="alamat",size="50"></td>
</tr>
<tr>
       <td>kota asal</td>
       <td><select name="kota_asal">
       <option selected>&nbsp;</option>
       <option>magelang</option>
       <option>Yogyakarta</option>
       <option>Semarang</option>
 
       </select></td>
</tr>
<tr>
       <td>Jenis kelamin</td>
       <td><input type="radio" name="jenis_kelamin" value="pria">pria
           <input type="radio" name="jenis_kelamin" value="wanita">wanita</td>
</tr>
<tr>
       <td>HOBI</td>
       <td><input type="checkbox" name="hobi" value="coding">coding<br>
           <input type="checkbox" name="hobi" value="PSan">PSan<br>
            <input type="checkbox" name="hobi" value="Bilyard">Bilyard</td>
</tr>
<tr>
       <td>Deskripsi Pribadi</td>
       <td><textarea name="descript" cols="25" rows="10"></textarea></td>
</tr>
<tr>
       <td><input type="submit" name="submit" value="kirim">
           <input type="reset" name="reset" value="hapus"></td>
</tr>
</table>
</form>
</html>