2. 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
3. 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 = “ , “>
9. 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>
10. Simpan dengan nama Mod.html
<html>
<head>
<title> Latihan Hyperlink </title>
</head>
<body bgcolor="lightpink">
<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>
<td width=200 height=30 bordercolor=red><b> <font Face =cooper black size=3><center>
<a href=c.html target=kanan> Ekstrakurikuler </a> </center></font></b> </td>
</tr>
<td width=200 height=30 bordercolor=red><b> <font Face =cooper black size=3><center>
<a href=d.html target=kanan> Keahlian </a> </center></font></b> </td>
</tr>
</table>
</body>
</HTML>
11. Simpan dengan nama c.html
<html>
<head>
<title> Latihan Hyperlink </title>
</head>
<body bgcolor="lightpink">
<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>
12. Simpan dengan nama d.html
<html>
<head>
<title> Latihan Hyperlink </title>
</head>
<body bgcolor="lightpink">
<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>
13. Simpan dengan nama e.html
<html>
<head>
<title> Latihan membuat Link
</title>
</head>
<body bgcolor="lightpink">
<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>
14.
15. 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
17. 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
18. 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>>
20. 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
21. Latihan
<html>
<head>
<title>form Input dengan Textbox</title>
</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>
22. 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
23. Latihan
<html>
<head>
<title>form Input dengan Textbox</title>
</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>
24. Drop-Down Menu
• Digunakan untuk membuat menu pilihan
<select name=menu 1>
<option value=pilihan1> Pilihan 1
<option value=pilihan2> Pilihan 2
<option value=pilihan3> Pilihan 3
<option value=pilihan4> Pilihan 4
Dstnya…
</select>
Ket:
OPTION berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia. Setiap
pilihan ditentukan isinya dengan parameter value.
25. Latihan
<html>
<head>
<title>form Input dengan Textbox</title>
</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>
26. 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
27. Latihan
<html>
<head>
<title>form Input dengan Textbox</title>
</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>
28. 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