inf104: web design - ocw.upj.ac.idocw.upj.ac.id/files/handout-inf104-inf104-pertemuan-4.pdf ·...
TRANSCRIPT
Pertemuan 4:
INF104: WEB DESIGN
Dasar dan Aplikasi HTML
Dosen: Wayan Suparta
Dasar HTML (lanjutan….)
1. Form Awal formulir ditandai
dengan Tag <FORM>,
dan berisi dua kata kunci:
METHOD dan ACTION.
<form name=nama_form
method=post/get
action=nama_file/email>
<html> <body> <form name=mhs_baru method=post action=proses.php> ……………… </form> </body> </html>
Form
Input Text:
<input name=nama_input type=text size=lebar_input maxlength=karakter_maksimum>
<html>
<body>
<h2>Form Mahasiswa</h2>
<form name=form_mahasiswa>
NIM<br>
<input name=nim type=text size=20
maxlength=8><br>
Nama Lengkap<br>
<input name=nama type=text size=40>
</form>
</body>
</html>
Contoh 1:
2. Radio Button: <input name=nama_input type=radio checked>
<html>
<body>
<form name=form_skala_likert>
Skala Likert:<br>
<input name=scale type=radio>Sangat memuaskan<br>
<input name=scale type=radio>Memuaskan<br>
<input name=scale type=radio>Biasa saja<br>
<input name=scale type=radio checked>Kurang memuaskan<br>
<input name=scale type=radio>Tidak memuaskan
</form>
</body>
</html>
Contoh 2:
Format:
<input name=nama_input type=checkbox checked>
<html>
<body>
<form name=form_ftd>
Fakultas Teknologi dan Desain:<br>
<input name=ar type=checkbox > Arsitektur<br>
<input name=sk type=checkbox> Sistem Komputer<br>
<input name=si type= checkbox>Informatika checked<br>
<input name=psi type=checkbox>Teknik Sipil
</form>
</body>
</html>
3. Form Check Box:
4. Form – Drop-down List
Format:
<select name=nama_list>
<option value=nama_opsi1>…</option>
<option value=nama_opsi2>…</option>
<option value=nama_opsi3>…</option>
</select>
Contoh 4:
<html>
<body>
<form name=list>
Level:<br>
<select name=level>
<option value=stand>Standard</option>
<option value=prof>Professional</option>
<option value=amatir>Amateur</option>
</select>
</form>
</body>
</html>
Form - Textarea
Format:
• <textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar> </textarea>
• Button: <input type=submit/reset value=caption>
• type=submit, akan mendefinisikan sebagai tombol untuk menyerahkan umpan balik.
• type=reset, akan mendefinisikan tombol untuk menghapus isi formulir.
Contoh 5:
<html>
<body>
<form name=frm_submit method=post action=contoh.html>
Alamat:<br>
<textarea name=alamat rows=4 cols=40>
</textarea><br>
<input type=submit value=Kirim>
<input type=reset value=Reset>
</form>
</body>
</html>
5. Bullet & Numbering (1)
Variasi bullet pada HTML:
• Disc, memberikan efek lingkaran (default)
• Square, memberikan efek persegi empat
• Circle, memberikan efek lingkaran yang transparan
<html>
<body>
<h3>Daftar Fakultas:
<ul type=disc> <li>Fakultas Ekonomi</li></ul>
<ul type=square> <li>Fakultas Hukum</li></ul>
<ul type=circle> <li>Fakultas Teknik</li></ul>
</h3>
</body>
</html>
Bullet & Numbering (2)
Bullet & Numbering
Daftar bernomor pada HTML:
• i adalah angka romawi kecil, misal: i,ii,iii,iv,dst
• I adalah angka romawi besar, misal: I,II,III,IV,dst
• a adalah huruf kecil, misal: a,b,c,d,dst
• A adalah huruf kapital, misal: A,B,C,D,dst
• 1 adalah angka dalam standar, misal: 1,2,3,4,dst
<html>
<bbody>
<h3>Daftar Fakultas:
<ol type=A> <li>Fakultas Ekonomi</li></ol>
<ol type=a> <li>Fakultas Hukum</li></ol>
<ol type=I> <li>Fakultas Teknik</li></ol>
<ol type=i> <li>Fakultas MIPA</li></ol>
<ol type=1> <li>Fakultas MIPA</li></ol>
</h3>
</body>
</html>
6. Frame • Gunakan tag <frameset>
• Tidak membutuhkan tag <body>
• Setiap frame ditandai dengan tag <frame>
Formatnya:
<html>
<head>
<title></title>
</head>
<frameset>
--- bagian frame ---
</frameset>
</html>
Contoh:
<html>
<head>
<title>Frame</title>
</head>
<body bgcolor="yellow">
<h4>Latihan</h4>
Mencoba latihan membuat Frame HTML
</body>
</html>
Contoh Program Pembuatan Frame
<html>
<head>
<title>konten</title>
</head>
<body>
<h3>ini konten</h3>
</body>
</html>
<html>
<head>
<title>header</title>
</head>
<body bgcolor="yellow">
<h1>ini header</h1>
</body>
</html> <html>
<head>
<title>footer</title>
</head>
<body>
<center>
<h3>ini footer</h3>
</center>
</body>
</html>
<html>
<head>
<title>sidebar</title>
</head>
<body bgcolor="grey">
<h3>ini sibebar</h3>
</body>
</html>
Panggil program dalam index.html <html>
<head>
<title>Belajar HTML :
farme</title>
</head>
<frameset rows="20%,*,10%"
border="1">
<frame name="header"
src="header.html"></frame>
<frameset cols="25%,*"
border="1">
<frame name="sidebar"
src="sidebar.html"></frame>
<frame name="konten"
src="konten.html"></frame>
</frameset>
<frame name="footer“
src="footer.html"></frame>
</frameset>
</html>
Outputnya:
LATIHAN (Praktikum)
1. Tuliskan program form dengan hasil tampilan berikut:
2. Buatlah program frame dengan output seperti berikut:
3. Buatlah sebuah webpage yang
berisi CV atau biografi Anda,
minimal seperti gambar di
samping dengan HTML.
Berilah nama file dengan nama
Anda: CV_NIM_Nama4huruf
(misalkan:
04206063_Arya.html)
• TUGAS 1
• Kirim ke link:
https://drive.google.com/dri
ve/u/1/folders/1vwIIvzFIgC
ApZ3uT6YSNUcI4Fz03r9B
o
• Kerjakan maksimal 6 hari.