Anda di halaman 1dari 25

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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

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>
<td>row-1 , Kol-2</td>
</tr>
<tr>
<td>row-1 , Kol-1</td>
<td>row-1 , Kol-2</td>
</tr>
</table>
<h3>Percobaan Dengan Cellpadding:</h3>
<table border="1" cellpadding="20">
<tr>
<td>row-1 , Kol-1</td>
<td>row-1 , Kol-2</td>
</tr>
<tr>
<td>row-1 , Kol-1</td>
Workshop Desain Web Arif Basofi, S.Kom. MT.

<td>row-1 , Kol-2</td>
</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>
<td>row-1 , Kol-1</td>
<td>row-1 , Kol-2</td>
</tr>

<tr>
<td>row-1 , Kol-1</td>
<td>row-1 , Kol-2</td>
</tr>
</table>

<h3>Percobaan Dengan Cellspacing:</h3>


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

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


<tr>
<td>row-1 , Kol-1</td>
<td>row-1 , Kol-2</td>
</tr>

<tr>
<td>row-1 , Kol-1</td>
<td>row-1 , Kol-2</td>
</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>
<td>row-1,col-2</td>
</tr>
<tr>
<td> </td>
<td>...</td>
Workshop Desain Web Arif Basofi, S.Kom. MT.

</tr>

<tr>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td>row-4,col-1</td>
<td>row-4,col-2</td>
</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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>

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


border="1" bordercolor="#FF00FF">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Workshop Desain Web Arif Basofi, S.Kom. MT.

</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

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">
<frame src="frame2.html">
<frame src="frame3.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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

Listing Frame 2: frame2.html


<html>
<head>
<title>Index Frame HTML</title>
<head>
<body bgcolor="#FFBFFF">
<h3 ALIGN="CENTER"><font COLOR="#FF00FF">F R A M E - 2</font></h3>
<h4 ALIGN="CENTER"><font COLOR="#990099">(Frame2.html )</Font></h4>
</body>
</html>
Listing Frame 3: frame3.html
<html>
<head>
<title>Index Frame HTML</title>
<head>
<body bgcolor="#99FFFF">
<h3 ALIGN="CENTER"><font COLOR="#FF00FF">F R A M E - 3</font></h3>
<h4 ALIGN="CENTER"><font COLOR="#990099">(Frame3.html )</Font></h4>
</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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

<head>
<frameset rows="25%,50%,25%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</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%">
<frame src="frame1.html">
<frameset cols="25%,75%">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</frameset>
</html>
Listing Frame 1 – 2 - 3: Sama dengan diatas.

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
Workshop Desain Web Arif Basofi, S.Kom. MT.

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>
<p>Show <a href="frame2.html" target="showframe">Frame 2</a></p>
<p>Show <a href="frame3.html" target="showframe">Frame 3</a></p>
</body>
Workshop Desain Web Arif Basofi, S.Kom. MT.

</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>

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

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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

</html>

Source Code Frame InWeb: inwebdoc.html


<html>
<head>
<title>Web Document</title>
</head>
<body bgcolor="#99FFFF">
<h1>Belajar Web Design </h1>
<h2>Belajar Web Design </h2>
<h3>Belajar Web Design </h3>
<h4>Belajar Web Design </h4>
<h5>Belajar Web Design </h5>
<h6>Belajar Web Design </h6>
</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 :
Workshop Desain Web Arif Basofi, S.Kom. MT.

• 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).
Workshop Desain Web Arif Basofi, S.Kom. MT.

• 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


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

<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.
Workshop Desain Web Arif Basofi, S.Kom. MT.

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 :


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

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>
Workshop Desain Web Arif Basofi, S.Kom. MT.

<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>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</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:
Workshop Desain Web Arif Basofi, S.Kom. MT.

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.
Workshop Desain Web Arif Basofi, S.Kom. MT.

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.
Workshop Desain Web Arif Basofi, S.Kom. MT.

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.
Workshop Desain Web Arif Basofi, S.Kom. MT.

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>
<font size="2"> Font size 2</font><br>
<font size="3"> Font size 3</font><br>
<font size="4"> Font size 4</font><br>
<font size="5"> Font size 5</font><br>
<font size="6"> Font size 6</font><br>
<font size="7"> Font size 7</font><br>
</body>
</html>
Workshop Desain Web Arif Basofi, S.Kom. MT.

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.
Workshop Desain Web Arif Basofi, S.Kom. MT.

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