TM05 - Pengenalan HTML (Tabel, Frame, Form, Layout, Font, Head)

Workshop Desain Web Arif Basofi, S.Kom. MT.
PERTEMUAN 5
HTML Tingkat Lanjut
POKOK BAHASAN:
• Table HTML (Con’t)
• Frame HTML
• Form HTML
• Layout HTML
• Font HTML
• Style HTML
• Head HTML
TUJUAN PEMBELAJARAN:
Setelah mempelajari materi dalam bab ini, mahasiswa diharapkan mampu:
• Mengembangkan dalam pembuatan tabel khusus
• Memahami fungsi dan membuat frame dalam dokumen HTML
• Membuat form dalam dokumen HTML
• Membuat layout dokumen HTML
• Memformat penggunaan font dalam dokumen HTML
• Membuat style dokumen HTML yang baik
• Memahami fungsi head dokumen HTML
3.1 Table HTML

Penggunaan tabel dalam dokumen HTML dapat dikembangkan lagi berdasarkan
kebutuhan pengguna, diantaranya pembuatan cellpadding, cellspacing, empty table dan
table on table (tabel dalam tabel).
3.1.1 Cellpadding Table

Cellpadding table digunakan untuk membuat spasi lebih antara sel dan bordernya.
Untuk membuat cellpadding table digunakan tambahan tag <cellpadding> pada
tag <table>
contoh: <table ... cellpadding=”size”> .... </table>
Contoh:
HTML Code:
<html>
<head>
<title>Coba Cellpadding Tabel</title>
</head>
<body>
<h3>Percobaan Tanpa Cellpadding:</h3>
<table border="1">
<tr>
<td>row-1 , Kol-1</td>
</tr>
<tr>
</tr>
</table>
<h3>Percobaan Dengan Cellpadding:</h3>
<table border="1" cellpadding="20">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
3.1.2 Cellspacing Table
Cellspacing table digunakan untuk menambah jarak antar sel. Untuk membuat
cellspacing table digunakan tambahan tag <cellspacing> pada tag <table>:
<table ... cellspacing=”size”> .... </table>
Contoh:
HTML Code:
<html>
<head>
<title>Coba Cellspacing Tabel</title>
<head>
<body>
<h3>Percobaan Tanpa Cellspacing:</h3>
<table border="1">
<tr>
</tr>
<tr>
</tr>
</table>
<h3>Percobaan Dengan Cellspacing:</h3>

<table border="1" cellspacing="20">

<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
3.1.3 Empty Cell Table
Empty Cell table adalah membuat suatu sel table dalam kondisi kosong. Untuk
membuat empty table, data dapat dikosongi pada sel-nya dan hasil tampilan pada sel yang
kosong tadi tidak akan tampak border. Jika suatu sel yang kosong ingin tetap ditampilkan
bordernya, dapat diisi dengan nilai &nbsp (non breaking space).
Contoh:
Empty Cell tanpa

&nbsp (no border)
Cell dengan nilai: …
Empty Cell dengan

&nbsp (with border)
HTML Code:
<html>
<head>
<title>Coba Empty Cell Tabel</title>
<head>
<body>
<h3>Percobaan Empty Cell Table:</h3>
<table border="1">
<tr>
<td>row-1,col-1</td>
</tr>
<tr>
<td> </td>
<td>...</td>
</tr>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
</tr>
</table>
</table>
</body>
</html>
Penggunaan tag &nbsp digunakan sebagai pengganti spasi jika diinginkan, karena didalam
dokumen HTML, spasi biasa (spacebar) tidak berlaku.
Contoh:
Code HTML:
<html>
<head>
<title>Coba nbsp Tabel</title>
<head>
<body>
<h3>Percobaan penggunaan nbsp sebagai pengganti spasi:</h3>
<table border="1">
<tr>
<td>Tanpanbsp :</td>
<td>Dengan 1-spasi</td>
<td>Dengan 2-spasi</td>
</tr>
<tr>
<td>Dengan &nbspnbsp:</td>
<td>Dengan &nbsp 1-nbsp</td>
<td>Dengan &nbsp &nbsp 2-nbsp</td>
</tr>
</table>
</table>
</body>
</html>
Untuk tampilan dokumen web dengan format khusus sehingga lebih tertata rapi, dapat anda
gunakan table dengan setting border = 0, misal untuk mengatur format tampilan teks agak
jarang-jarang/khusus jangan menggunakan spasi atau tag &nbsp, tapi gunakan table
seperti yang akan dibahas pada bagian Layout pada bab ini.
3.1.4 Table On Table (Tabel dalam Tabel)
Table On Table (tabel dalam tabel) adalah bentuk tabel yang berada didalam tabel
seperti pada gambar dibawah ini.
Contoh:
HTML Code:
<html>
<head>
<title>Coba Nested Tabel</title>
<head>
<body>
<h3>Percobaan Table On Table:</h3>
<table width="75%" border="4" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table align="center" width="90%"

border="1" bordercolor="#FF00FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
3.2 Frame HTML

Frame HTML dapat digunakan untuk menampilkan beberapa web page yang
ditampilkan dalam satu window browser. Model ini sering dipakai untuk memperjelas
penyajian informasi dengan menu-menu yang ada selalu ditampilkan.
Kekurangan penggunaan frame :

• Developer web harus menjaga dokumen HTML lebih banyak (dipersiapkan)
• Sulit untuk mencetak (print) semua halaman web.
Tag Frameset :
• Tag <frameset> mendefinisikan bagaimana membagi window ke dalam fram-
frame.
• Setiap frameset mendefinisikan sebuah set baris (row) atau kolom (colom)
• Setiap nilai rows/column menunjukkan jumlah tampilan area setiap row/colomn.
Tag Frame
• Tag <frame> tag mendefinisikan nama dokumen HTML yang dimasukkan dalam
frame.
Sebagai contoh dibawah ini adalah frameset dengan dua kolom. Kolom pertama dengan
lebar 25% dari browser window. Kolom kedua dengan lebar 75% dari browser window.
Dokumen HTML ”frame1.html” diletakkan pada kolom pertama dan dokumen
HTML ”frame2.html” diletakkan di kolom kedua.
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Tag – tag Frame

Tag Keterangan
<frameset> Mendefinisikan kumpulan frame
<frame> Mendefinisikan bagian dari windows (sebuah frame)
Mendefinisikan bagian noframe untuk browser yang tidak dapat menangani
<noframes>
frame
<iframe> Mendefinisikan suatu frame inline
3.2.1 Frame Kolom
Frame kolom adalah frame dengan bentuk frameset vertikal. Untuk membuat
frameset kolom, set masing-masing ukuran frameset cols dan set masing-masing url
framenya.
Contoh frame kolom:
Listing:
Listing Frame Utama: 02a - FrameKolom.html
<html>
<head>
<title>Contoh Frame Kolom</title>
<head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html">
</frameset>
</html>
Listing Frame 1: frame1.html

<html>
<head>
<title>Index Frame HTML</title>
<head>
<body bgcolor="#FFBF55">
<h3 ALIGN="CENTER"><font COLOR="#FF00FF">F R A M E - 1</font></h3>
<h4 ALIGN="CENTER"><font COLOR="#990099">(Frame1.html )</Font></h4>
</body>
</html>

<html>
<head>
<head>
<body bgcolor="#FFBFFF">
</body>
</html>
<html>
<head>
<head>
<body bgcolor="#99FFFF">
</body>
</html>
3.2.2 Frame Baris
Frame Baris adalah frame dengan bentuk frameset horisontal. Untuk membuat
frameset baris, set masing-masing ukuran frameset rows dan set masing-masing url
framenya.
Contoh frame baris:
Listing Frame Utama: 02b - FrameBaris.html

<html>
<head>
<title>Contoh Frame Baris</title>
<head>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Listing Frame 1 – 2 - 3: Sama dengan diatas.
3.2.3 Frame Campuran

Frame Campuran adalah frame dengan bentuk campuran antara frameset
horisontal dan vertikal. Untuk membuat frameset bentuk campuran harus dirancang
terlebih dahulu berapa baris atau kolom yang diperlukan kemudian tentukan ukuran
masing-masing frameset.
Contoh frame campuran:
Listing Frame Campur: 02c - FrameCampur.html

<html>
<head>
<title>Contoh Frame Campur</title>
<head>
<frameset rows="25%,50%">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
3.2.4 Frame Navigasi

Frame Navigasi adalah bentuk frame yang biasanya digunakan dalam pembuatan
menu navigasi. Frame navigasi terdiri atas sebuah frame yang berfungsi sebagai frame
menu dengan berisi daftar link (misal. “Framenavmenu”), dan frame yang kedua sebagai
targetnya atau dokumen yang di-link (disebut frame target disebelah kanan, misal.
dinamakan “showframe”).
Contoh:
Listing Frame Utama: 02d - FrameNavigasi.html

<html>
<head>
<title>Frame Navigasi HTML</title>
<head>
<frameset cols="200,*">
<frame src="FrameNavMenuBlue.html" name="framenavmenu">
<frame src="FrameShow.html" name="showframe">
</frameset>
</html>
Listing Frame Menu “framenavmenu”: FrameNavMenuBlue.html

<html>
<head>
<title>Menu HTML</title>
<body text="#FFFFFF" bgcolor="#000080" link="#FFFFFF" vlink="#FFFFFF">
<p>Menu Navigasi (FrameNavMenuBlue.html)</p>
<hr>
<p>Show <a href="FrameShow.html" target="showframe">Welcome</a></p>
<p>Show <a href="frame1.html" target="showframe">Frame 1</a></p>
</body>
</html>
Listing Frame “showframe”: FrameShow.html

<html>
<head>
<title>Welcome Frame Page</title>
<head>
<body bgcolor="#FFBFFF">
<h3 ALIGN="CENTER"><font COLOR="#FF00FF">W E L C O M E &nbsp T O
&nbsp M Y &nbsp P A G E</font></h3>
<h4 ALIGN="CENTER"><font COLOR="#990099">( FrameShow.html )</Font></h4>
</body>
</html>
3.2.5 Frame Inline

Frame Inline adalah bentuk frame yang berada didalam suatu dokumen HTML.
Contoh :
Source Code Frame Inline : frameinline.html

<html>
<body>
<iframe src="inwebdoc.html"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Source Code Frame InWeb: inwebdoc.html

<html>
<head>
<title>Web Document</title>
</head>
<body bgcolor="#99FFFF">
<h1>Belajar Web Design </h1>
</body>
</html>
3.3 Form dan Input HTML

Form HTML adalah sebuah area yang mengandung elemen–elemen form. Elemen
form adalah sebuah elemen yang memungkinkan user untuk memasukkan (input)
informasi seperti berupa text, textarea, menu drop-down, radio button, checkbox,dll.
Sebuah form didefinisikan dengan tag <form>.
<form>
…
</form>
3.3.1 Tag-Tag Form

Tag Keterangan
<form> Mendefinisikan form untuk masukan user
<input> Mendefinisikan masukan field
<textarea> Mendefinisikan textarea
<label> Mendefinisikan label kontrol
<fieldset> Mendefinisikan sebuah fieldset
<legend> Mendefinisikan caption sebuah fieldset
<select> Mendefinisikan list (drop-down box)
<optgroup> Mendefinisikan option group
<option> Mendefinisikan option pada drop-down box
<button> Mendefinisikan button
3.3.2 Jenis-Jenis Masukan (Input) dalam Form

Jenis masukan dalam form dibedakan menjadi :
• Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server.
Nilai yang dimasukkan dapat berupa angka ataupun teks.
• Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.
• Check box : menyediakan beberapa pilihan, pilihan bisa lebih dari satu yang
dipilih.
• List : menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat
lebih dari satu.
• Button : digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan
form.
1. SUBMIT : button yang digunakan untuk mengirim data.
2. RESET : button yang digunakan untuk menginisialisasi (mengosongkan) form.
• Text Area : digunakan untuk memasukkan data dalam bentuk teks berupa memo.
3.3.3 Tag-Tag dan Atribut Elemen Form

• Form
<form name="form1" method="post" action=""></form>
Keterangan :
Form : tag yang menandakan sebuah elemen form
Name : nama form
Methode : metode pengiriman data. Bisa berupa “post” atau “get”
Action : nama file dokumen yang memproses pengiriman data.
• Text Field
<input type="text" name="textfield">
Katerangan :
Input : tag yang menandakan sebuah masukan
Type : type sebuah masukan, yaitu ”text”
Name : nama text field
• Text Area
<textarea name="textarea" cols="100" rows="5"></textarea>
Keterangan :
Textarea : tag yang menandakan sebuah masukan textarea
Name : nama textarea
Cols : jumlah kolom textarea
Rows : jumlah baris textarea
• Check box
<input name="checkbox" type="checkbox" value="checkbox" checked>
Keterangan :
Name : nama checkbox
Type : type masukan
Value : nilai yang dikirimkan ke server
Checked : menunjukkan bahwa otomatis pilihan tersebut dipilih. Secara default
atribut tersebut unchecked (tidak dipilih).
• Radio Button
<input name="radiobutton" type="radio" value="radiobutton">
Keterangan :
Name : nama radiobutton
Type : type masukan
Value : nilai yang akan dikirim ke server
• List Box
<select name="select">
<option value="Teknologi Informasi">Teknologi Informasi</option>
</select>
Keterangan :
Select : tag yang menandakan sebuah list/menu
Name : nama list/menu
Option : tag yang menandakan sebuah pilihan list
Value : nilai pilihan yang akan dikirim ke server
• Button – Submit
<input type="submit" name="Submit" value="Submit">
• Button – Reset
<input type="reset" name="Reset" value="Reset">
3.3.3.1 Field Text

Berikut ini adalah contoh penggunakan field text dalam dokumen HTML.
Contoh Field Text :
Listing Field Text : 03a - FieldText.html

<html> <head> <title>Field Text Form</title> <head>

<body>
<form>
Nama Depan :
<input name="NamaDepan" type="text" id="NamaDepan">
<br>
Nama Belakang :
<input name="NamaBelakang" type="text" id="NamaBelakang">
</form>
</body>
</html>
3.3.3.2 Field Text - Password

Berikut ini adalah contoh Field Text dengan masukan berupa password.
Contoh Field Text – Password:
Listing Field Text – Password : 03b - FieldText-passwd.html

<html><head><title>Field Text Form With Password</title><head>
<body>
<form>
Username:
<input type="text" name="user"><br>
Password:
<input type="password" name="password">
</form>
<p>Keterangan : ketika memasukan data di field password, browser akan menampilkan tanda
bintang sebagai pengganti karakter. </p>
</body>
</html>
3.3.3.3 Checkbox
Dengan checkbox, user dapat memilih atau membatalkan pilihan dari checkbox.
Berikut ini adalah contoh penggunaan checkbox dalam dokumen HTML.
Contoh Checkbox:
Contoh - Listing 10.3 : checkbox.html

<html><head><title>Checkbox Form HTML</title><head>
<body>
<p> Hobi Saya :</p>
<form>
<p>Baca Majalah :
<input name="majalah" type="checkbox" id="majalah" value="majalah" checked>
<br>
Olah Raga :
<input name="olahraga" type="checkbox" id="olahraga" value="olahraga">
<br>
Memancing :
<input name="mancing" type="checkbox" id="mancing" value="memancing">
</p>
</form>
</body>
</html>
3.3.3.4 Radio Button

Radio Button adalah bentuk tombol pilihan dengan syarat user harus memilih
salah satu pilihan saja. Berikut ini adalah contoh penggunaan radion button dalam dokumen
HTML.
Contoh Radio Button :

Listing Radio Button : 03d - RadioButton.html

<html><head><title>Radio Button Form HTML</title><head>
<body>
<p>Kota Lahir : </p>
<form>
<p>Surabaya :
<input type="radio" name="kota" value="Surabaya" checked="checked"> <br>
Sidoarjo :
<input type="radio" name="kota" value="Sidoarjo"><br>
Malang :
<input type="radio" name="kota" value="Malang"><br>
Ngawi :
<input type="radio" name="kota" value="NGawi"><br>
</p>
</form>
</body>
</html>
3.3.3.5 Group Radio Button

Group Radio Button adalah bentuk radio button dengan memiliki suatu group
berdasarkan kepentingan tertentu. Contoh berikut membuat group radio button yang
memiliki dua group radio terpisah, yaitu group jenis kelamin dan group usia. Cara yang
dilakukan dengan memberikan nama yang berbeda pada tiap group: sex & age.
Contoh Radio Button :
Listing Group Radio Button : 03e - GroupRadioButton.html

<html><head><title>Group Radio Button Form HTML</title><head>
<body>
<p>Jenis Kelamin & Usia : </p>
<form>
<input type="radio" name="sex" value="Laki-laki" checked> Laki-laki <br>
<input type="radio" name="sex" value="Perempuan"> Perempuan <br>
<input type="radio" name="age" value="Dewasa"> Dewasa <br>
<input type="radio" name="age" value="Anak-anak"> Anak-anak <br>

</form>
</body>
</html>
3.3.3.6 Drop Down Box (ListBox)

Drop Down Box (ListBox) adalah bentuk list/daftar yang dapat dipilih, bentuknya
seperti listbox. Berikut ini adalah contoh penggunaan list box – drop down menu.
Contoh Drop Down Box (ListBox) :
Listing Drop Down Box (ListBox) : 03f - ListBox.html

<html><head><title>Drop Down Box / ListBox Form HTML</title><head>
<body>
<p>Tahun Kelahiran :</p>
<form>
<select name="tahun">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
</select>
</form>
</body>
</html>
3.3.3.7 Text Area

Text Area digunakan untuk membuat suatu input text yang tak terbatas (multi-line).
Berikut ini adalah contoh penggunaan textarea dalam dokumen HTML.
Contoh Text Area:
Listing Text Area : textarea.html

<html><head><title>Text Area Form HTML</title><head>
<body>
<p>Komentar :</p>
<form>
<textarea name="comment" cols="30" rows="5">isikan komentar anda disini</textarea>
</form>
</body>
</html>
3.3.3.8 Button – Submit dan Reset

Button – Submit adalah tombol yang digunakan dalam meng-eksekusi suatu
proses dalam dokumen web. Button / tombol dalam web biasanya digunakan untuk
menyimpan (submit) data ke server, atau bahkan untuk menghapus (reset) field.
Berikut ini adalah contoh penggunaan Submit Button dan Reset Button.
Contoh Button-Submit & Reset :
Listing Button-Submit & Reset : 03h - ButtonSubmit - Reset.html

<html><head><title>Button-Submit & Reset Form HTML</title><head>
<body>
<form>
<input type="submit" name="Submit" value="Send">
<input type="reset" name="Reset" value="Reset">
</form>
</body>
</html>
Value = ”Send” & ”Reset”, menampilkan nilai string pada button.
3.3.3.9 Fieldset Sekitar Data

Fieldset digunakan untuk membuat suatu border sebagai pembatas bagian tertentu
dengan caption pada sekeliling data anda.
Berikut ini adalah contoh penggunaan Fieldset pada jenis input text dan raido button.
Contoh Fieldset :
Listing Fieldset : 03i - Fieldset.html

<html><head><title>Fieldset Form HTML</title><head>
<body>
<fieldset>
<legend>
Informasi Kesehatan :
</legend>
<form>
Tinggi : <input type="text" size="3">
Berat : <input type="text" size="3">
</form>
</fieldset>
<br>
<fieldset>
<legend>
Jenis Kelamin :
</legend>
<form>
Laki-laki : <input type="radio" name="sex" value="co" checked>
Perempuan : <input type="radio" name="sex" value="ce">
</form>
</fieldset>
</body>
</html>
3.4 Layout HTML

Layout HTML digunakan untuk menyusun tampilan yang bagus pada dokumen
web, misal. ingin menampilkan halaman surat kabar yang begitu rapi penyusunan
kolomnya.
Penyusunan layout dokumen HTML sepenuhnya menggunakan tabel (tag <table>)

dengan setting size tertentu dan border = 0, agar tidak tampak bordernya, serta
dikombinasikan dengan warna sesuai keinginan.
Contoh Tampilan Layout Dokumen HTML:
Listing Layout Dokumen HTML: 04 -LayoutHTML.html

<html><head><title>Layout Dokumen HTML</title><head>
<body>
<table border="0" width="100%" cellpadding="20">
<tr>
<td width="50%" valign=top>
Layout HTML digunakan untuk menyusun tampilan yang bagus pada dokumen web, misal. ingin
menampilkan halaman surat kabar yang begitu rapi penyusunan kolomnya.
</td>
<td width="50%" valign=top >
Penyusunan layout dokumen HTML sepenuhnya menggunakan tabel dengan setting size
tertentu dan border = 0, agar tidak tampak bordernya, serta dikombinasikan dengan warna
sesuai keinginan.
</td>
</tr>
</table>
</body>
</html>
3.5 Font HTML
<FONT SIZE=number COLOR="#RRGGBB or name" FACE="facename"> text </font>
Tag <font> menentukan ukuran besar atau kecil dan jenis dari output browser.
Ukuran (size) font secara default adalah 3.
Atribut COLOR (warna) untuk memberikan warna font dengan format rrggbb, 6
digit hexadecimal, untuk tiap dua digit nilai adalah red, green, blue.
Nama warna dapat juga digunakan sebagai pengganti format hexa, seperti warna:
Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver,
Teal, Yellow, and White.
Atribut FACE digunakan untuk menentukan tipe font yang digunakan (misal.
Arial, Courier,dll) berdasarkan font yang ter-install pada koputer client.
Penggunaan tag <font>, sebaiknya mulai dihindarkan, sebagai gantinya dapat
digunakan CSS (Cascading Style Sheets) untuk mendefinisikan property layout dan
display elemen HTML. (Pembahasan CSS pada Bab minggu berikutnya.)
Berikut contoh penggunaan tag <font>:
Listing Font: 05 -FontHTML.html

<html><head><title>Font HTML</title><head>
<body>
<p><font size="2" face="Verdana"> Text dengan type font Verdana dan size 2</font></p>
<p><font size="4" face="Times"> Text dengan type font Times New Roman dan size 4</font></p>
<p><font size="4" color="Teal" face="Times"> Text dengan type font Times New Roman dan size
4 dan warna Teal</font></p>
<font size="1"> Font size 1</font><br>
</body>
</html>
3.6 Style HTML

Penggunaan style lebih jauh akan dibahas pada bab CSS minggu berikutnya.
3.7 Head HTML
<HEAD> head-section </HEAD>

Tag <head> digunakan untuk menuliskan keterangan tentang dokumen web yang
akan ditampilkan. Kebanyakan dokumen web hanya memiliki tag <title> didalam section
tag <head>.
Elemen head berisi informasi umum yang disebut informasi meta, tentang suatu
dokumen. Meta berarti informasi tentang sesuai. Jadi, jika disebutkan meta-data berarti
informasi tentang data, atau meta-informasi berarti informasi tentang informasi.
Elemen-elemen dalam head seharusnya tidak ditampilkan oleh suatu browser.
Merujuk pada standar HTML, hanya beberapa tag yang legal didalam bagian head:
 <base>
 <link>
 <meta>
 <title>
 <style>
 <script>
Sehingga konstruksi sebagai berikut adalah ilegal:
<head>
<p> sekedar tulisan</p>
</head>
Pada kasus ini, browser memiliki dua pilihan:

1. Menampilkan teks tersebut karena berada dalam sebuah elemen paragraf
2. Menyembunyikan teks karena didalam suatu elemen head.
Jika diletakkan sebuah elemen HTML seperti <h1> atau <p> dalam elemen <head> seperti
diatas, maka kebanyakan browser akan menampilkannya mesekipun ilegal.
TUGAS : (dikumpulkan max. Rabu, 30 Sept 2020, jam 18:00)

Membuat layout dokumen web FormBiodata.html seperti pada gambar dibawah ini
dengan menggunakan bahasa HTML dasar murni dan memanfaatkan fitur-fitur tag yang
dijelaskan diatas atau sebelumnya tanpa menggunakan tool/fitur/bahasa lainnya.
Tampilan Form Biodata:
Ketentuan tugas:
1. Link penyimpanan tugas akan di share via PJ mata kuliah.
(Masing-masing buat folder NRP-Nama)
2. 2 File yang dikumpulkan:

1) Hasil dokumen HTML yang dibuat: (nama file: TM03_FormBiodata_NRP-
Nama.html)
2) Laporan berisi:
a) Bagian cover (nama, nrp kelas)
b) Isi laporan berupa capture tampilan dan script dibawahnya (font script/code
gunakan tipe font Courier New)
c) Nama file: TM03_Laporan_NRP-Nama.pdf

Bahasa

TM05 - Pengenalan HTML (Tabel, Frame, Form, Layout, Font, Head)

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

TM05 - Pengenalan HTML (Tabel, Frame, Form, Layout, Font, Head)

Diunggah oleh

Hak Cipta:

Format Tersedia

Workshop Desain Web Arif Basofi, S.Kom. MT.

3.1 Table HTML

3.1.1 Cellpadding Table

3.1.2 Cellspacing Table

<h3>Percobaan Dengan Cellspacing:</h3>

<table border="1" cellspacing="20">

3.1.3 Empty Cell Table

Empty Cell tanpa

Empty Cell dengan

3.1.4 Table On Table (Tabel dalam Tabel)

<table align="center" width="90%"

3.2 Frame HTML

Kekurangan penggunaan frame :

Tag – tag Frame

3.2.1 Frame Kolom

Listing Frame 1: frame1.html

Listing Frame 2: frame2.html

3.2.2 Frame Baris

Listing Frame Utama: 02b - FrameBaris.html

3.2.3 Frame Campuran

Listing Frame Campur: 02c - FrameCampur.html

3.2.4 Frame Navigasi

Listing Frame Utama: 02d - FrameNavigasi.html

Listing Frame Menu “framenavmenu”: FrameNavMenuBlue.html

Listing Frame “showframe”: FrameShow.html

Listing Frame 1 – 2 - 3: Sama dengan diatas.

3.2.5 Frame Inline

Source Code Frame Inline : frameinline.html

Source Code Frame InWeb: inwebdoc.html

3.3 Form dan Input HTML

3.3.1 Tag-Tag Form

3.3.2 Jenis-Jenis Masukan (Input) dalam Form

3.3.3 Tag-Tag dan Atribut Elemen Form

3.3.3.1 Field Text

Listing Field Text : 03a - FieldText.html

<html> <head> <title>Field Text Form</title> <head>

3.3.3.2 Field Text - Password

Listing Field Text – Password : 03b - FieldText-passwd.html

Contoh - Listing 10.3 : checkbox.html

3.3.3.4 Radio Button

Contoh Radio Button :

Listing Radio Button : 03d - RadioButton.html

3.3.3.5 Group Radio Button

Contoh Radio Button :

Listing Group Radio Button : 03e - GroupRadioButton.html

<input type="radio" name="age" value="Anak-anak"> Anak-anak <br>

3.3.3.6 Drop Down Box (ListBox)

Listing Drop Down Box (ListBox) : 03f - ListBox.html

3.3.3.7 Text Area

Listing Text Area : textarea.html

3.3.3.8 Button – Submit dan Reset

Listing Button-Submit & Reset : 03h - ButtonSubmit - Reset.html

3.3.3.9 Fieldset Sekitar Data

Listing Fieldset : 03i - Fieldset.html

3.4 Layout HTML

Penyusunan layout dokumen HTML sepenuhnya menggunakan tabel (tag <table>)

Listing Layout Dokumen HTML: 04 -LayoutHTML.html

3.5 Font HTML

<FONT SIZE=number COLOR="#RRGGBB or name" FACE="facename"> text </font>

Berikut contoh penggunaan tag <font>:

Listing Font: 05 -FontHTML.html

3.6 Style HTML

3.7 Head HTML