Modul 4.ppt

Modul 4
Dasar Pemrograman Web
Frame dan Form
Gloria Ch Manulangga

Deskripsi Singkat
Deskripsi Singkat mengenai Topik
Materi ini berisi penjelasan mengenai pengenalan dasar HTML.
Tujuan Pembelajaran
1. Mahasiswa mengetahui stuktur pembuatan frame dengan tag HTML
2. Mahasiswa memahami penggunaan tag-tag HTML
3. Mahasiswa mampu menjalankan baris perintah HTML
Alat yang digunakan
1. Browser (Chrome, Mozzilla, dll)
2. Editor (Sublime Text, Notepad++, dll)
Materi Yang akan disampaikan:
1. Frames
2. Form

FRAMES
Frame HTML digunakan untuk membuat tampilan halaman HTML terbagi
menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu
halaman HTML terpisah.
format :
<html>
<head>
</head>
<frameset>
<framesrc>
</frameset>
</html>
Aturan penggunaan atribut rows dan cols pada frameset adalah sebagai
berikut :
<frameset rows =“ , “>
<frameset cols = “ , “>

Model Frame dan Contoh
<html>
<head>
<title>frame</title>
</head>
<frameset cols="35,65">
<frame src= coba3.html name="frame1">
<Frame src= coba2.html
name="frame2">
</frameset>
</html>

Latihan
disimpan dengan nama latihan.html
<html>
<head>
<title> Frame </title>
</head>
<frameset rows="20%,80%" border="2"
frameborder="2" bordercolor=red>
<frame name=atas src=mod.html>
<frameset cols=20%,80% border="2"
frameborder="2" bordercolor=red>
<frame name=kiri src=b.html>
<frame name=kanan src=e.html>
</frameset>
</frameset>
</html>

Simpan dengan nama mod.html
<html>
<head>
<title> Latihan membuat Link
</title>
</head>
<body bgcolor="lightpink">
<table border=0>
<tr>
<td align=center> <img src="gs.jpeg">
</td>
<td><font face=arial size=6 color=Red>
<b>:: SMK RAIHAT HAEKESAK
::</b></font></center> </td>
</tr>
</table>
</body>
</html>

Simpan dengan nama Mod.html
<html>
<head>
<title> Latihan Hyperlink </title>
</head>
<table border=1 witdh=350 bordercolor=red>
<tr>
<td width=200 height=22 bordercolor=red><b> <font Face =cooper black size=3 color=red><center> Menu </c
enter></font></b> </td>
</tr>
<tr>
<td width=200 height=30 bordercolor=red><b> <font Face =cooper black size=3><center>
<a href=e.html target=kanan> HOME </a> </center></font></b> </td>
</tr>
<a href=c.html target=kanan> Ekstrakurikuler </a> </center></font></b> </td>
</tr>
<a href=d.html target=kanan> Keahlian </a> </center></font></b> </td>
</tr>
</table>
</body>
</HTML>

Simpan dengan nama c.html
<html>
<head>
</head>
<h3><font color=red> Kegiatan Eskul
:</h3> </font>
<UL type=square><font color=red>
<li>Futsal</li>
<li>Bola Volley </li>
<li>Tenis Meja </li>
<li>Bulu Tangkis</li>
</font>
</ul>
</body>
</HTML>

Simpan dengan nama d.html
<html>
<head>
</head>
<h3><font color=red> Keahlian
</font></h3>
<OL type=a><font color=red>
<li> Otomotive</li>
<li>Sistem Informasi </li>
<li>Desian Web </li>
<li> Jaringan </li>
</font>
</ol>
</body>
</HTML>

Simpan dengan nama e.html
<html>
<head>
<title> Latihan membuat Link
</title>
</head>
<font face=arial size=4 color=Red>
<marquee><i>Praktek Kerja Industri</i>
</font></marquee>
<font color=red size=5 face=cooper
black> Selamat Datang di Web
kami...</font>
</body>
</html>

FORM
Digunakan untuk menerima masukan/input dari user dan
memproses hasil inputan di server.
Dalam form terdapat beberapa kontrol yaitu :
a. Textbox
b. Checkbox
c. Radio Button
d. List Menu
e. Text Area
f. Drop down menu
g. Elemen Tombol

Sintax Penulisan Form
<form method=“post atau get” action=“program_pemroses”>
Elemen-elemen form
</form>

Atribut METHOD
• Mempunyai dua nilai yaitu POST dan GET
• Metode GET mengirimkan data pada server
dengan cara meletakkan data pada bagian
akhir URL yang ditunjuk.
• Metode POST mengirimkan datanya secara
terpisah.
• POST mengirim data lewat form

TextBox
• Digunakan untuk memasukkan data string sebanyak satu baris.
Ket:
 type untuk menentukan jenis masukkan berupa text
 Name untuk penamaan
 Size untuk menentukan panjang atau banyaknya karakater sebuah
masukkan
 Value untuk memberi nilai suatu masukkan
 Type =“password”, untuk menyembunyikan masukkan yang dituils
oleh user dalam textbox
<input type=text name=textbox1 size=..
Value>>

Latihan
<html>
<head>
<title>form Input dengan Textbox</title>
</head>
<body>
<font size=4 face=arial><B> Login Page
</B></font>
<br>
<br>
<Table border=0>
<tr>
<td width=70> Email </td>
<td width=10> : </td>
<td width=70><input type=text name=1
size=20></td>
</tr>
<tr>
<td width=70> Password </td>
<td width=10> : </td>
<td width=70><input type="password" name=2
size=20></td>
</tr>
</body>
</html>

CheckBox
• Digunakan utuk memberi beberapa pilihan kepada user,
sehingga user dapat memilih salah satu, lebih dari satu pilihan
atau tidak memilih sama sekali.
<input type=checkbox name=checkbox1 Value=on atau off
cheched> Pilihan 1
Ket:
 type untuk menentukan jenis masukkan berupa checkbox
 value untuk menetukan apakah pada keadaan awal checkbox ini terpilih
(ON) atau tidak (OFF)
 Parameter CHECKED menetukan apakah checkbox sedang dicentang atau
tidak

Latihan
<html>
<head>
</head>
<body>
<font size=4 face=arial><B> Silahkan Pilih Program K
eahlian: </B></font>
<br>
<br>
<input type=checkbox name=cb1 checked> Teknik Komp
uter Jaringan <br>
<input type=checkbox name=cb2> Teknik Listrik <br>
<input type=checkbox name=cb3> Teknik Elektronika <br
>
<input type=checkbox name=cb4> Teknik Mesin <br>
<input type=checkbox name=cb4> Teknik Sipil
</body>
</html>

Radio Button
• Digunakan untuk membuat pilihan, user dapat
memilih salah satu pilihan yang tersedia, sehingga
user tidak bisa memilih kurang atau lebih dari satu
pilihan yang disediakan.
<input type=radio name=radio1 Value=on atau off cheched> Pilihan
1

Latihan
<html>
<head>
</head>
<body>
<font size=4 face=arial><B> Pilih Pendidikan Terakhir Anda: <
/B></font>
<br>
<br>
<input type=radio name= sd value="SD" checked> SD <br>
<input type=radio name= smp value="SMP"> SMP <br>
<input type=radio name= sma value="SMA"> SMA
</body>
</html>

Drop-Down Menu
• Digunakan untuk membuat menu pilihan
<select name=menu 1>
<option value=pilihan1> Pilihan 1
Dstnya…
</select>
Ket:
 OPTION berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia. Setiap
pilihan ditentukan isinya dengan parameter value.

Latihan
<html>
<head>
</head>
<body>
<font size=4 face=arial><B> Pilih Salah Satu Jurusan: </B></font
>
<br>
<br>
<select name= Jurusan :>
<option value=TKJ selected>Teknik Komputer Jaringan </option>
<option value=TE>Teknik Elektronika </option>
<option value=TL>Teknik Listrik
</body>
</html>

Text Area
• Digunakan untuk menampilkan masukan berupa text
box yang mampu menerima masukan berupa
string lebih dari satu baris.
<textarea name=textbox1 rows=5 cols=50> isi awal
</textarea>
Ket:
 Cols dan Rows untuk menentukan ukuran kolom dan baris textbox ini dalam
banyak karakter

Latihan
<html>
<head>
</head>
<body>
<font size=4 face=arial><B> Silahkan Tinggalkan Pesan dan Kesan Anda:
</B></font>
<br>
<br>
<textarea name=textbox1 rows=8 cols=50>Pesan dan Kesan :</textarea>
</body>
</html>

Elemen Tombol
• Digunakan untuk menampilkan tombol yang dapat
berupa tombol SUBMIT untuk mengirimkan data ke
pemroses di server, RESET untuk mengosongkan isian
form.
<input type=submit value=SUBMIT name=tombol1> SUBMIT
<input type=submit value=RESET name=tombol1> RESET

Latihan
<html>
<head>
</head>
<body>
<input type=submit value=SUBMIT name=tombol1>    
<input type=submit value=RESET name=tombol2>
</body>
</html>

Modul 4.ppt

More Related Content

Similar to Modul 4.ppt (20)

Recently uploaded (20)

Modul 4.ppt