WEB DESIGN HTML

MATAKULIAH PILIHAN 1
 HTML FORM
• Form merupakan sebuah element
pada HTML yang digunakan untuk
mengambil data masukan dari user.
• Elemen Form dapat terdiri dari check
box, radio button, menu, text box,
text area, dan button.

<form>
Form element
<form>
Contoh pembuatan Form Buku
Tamu dengan isian seperti
pada gambar di samping
INPUT JENIS TEXT

• Atribut TYPE = “TEXT” digunakan untuk membuat kotak input text (edit)
• Atribut NAME digunakan sebagai variabel untuk menyebut data yang diinput
• Atribut VALUE digunakan untuk memberi nilai default pada inputan
• Atribut SIZE digunakan untuk mengatur lebar inputan
• Atribut MAXLENGTH digunakan untuk mengatur panjang karakter maksimal yang dapat
diketikkan

Contoh :
Nama Lengkap : <input type="text" name="nama_lengkap" size="55">
RADIO BUTTON

• Input type=“radio” akan memunculkan inputan berjenis radio

button

Contoh
Jenis Kelamin :
Laki-laki <input type="radio" name="jenis_kelamin" value="L">
Perempuan <input type="radio" name="jenis_kelamin" value="P">
 CHECKBOX

• Input type=“checkbox” akan memunculkan inputan berjenis checkbox

Contoh
Aktif Pada Sosial Media:
<input type="checkbox" name="facebook" value="Ya">Facebook
<input type="checkbox" name="twitter" value="Ya">Twitter
<input type="checkbox" name="instagram" value="Ya">Instagram
<input type="checkbox" name="path" value="Ya">Path
 RADIO & CHECKBOX

• Pada input type=“radio” dan “checkbox” terdapat atribut tambahan CHECKED yang menandakan
menandakan bahwa pilihan tersebut dipilih

Contoh
<INPUT TYPE=RADIO NAME=“PRODI" VALUE=“RE" CHECKED> Teknik Robotika
<INPUT TYPE=CHECKBOX NAME=“RE“ VALUE="YA“ CHECKED > Teknik Robotika
 DROP-DOWN LIST

• Input type Select Option akan menampilkan inputan berupa pilihan berbentuk drop down list
• Atribut selected digunakan untuk menandai pilihan awal yang terpilih

Contoh
Mengetahui Web Ini dari :
<select name="info">
<option selected="select">-= Pilih =-</option>
<option value="web polibatam">Web POLIBATAM</option>
<option value="surat kabar">Surat Kabar</option>
<option value="teman kerabat">Teman/Kerabat</option>
<option value="browsing internet">Browsing Internet</option>
</select>
 TEXT AREA

• Elemen Text Area mendefinisikan input field multi baris

• Text Area memiliki atribut Rows dan Cols
• Atribut Rows menentukan jumlah garis (line) yang terlihat pada text area
• Atribut Cols menentukan lebar (width) yang terlihat pada text area

Contoh
Pesan <textarea name="pesan" cols="40" rows="3"></textarea>
 INPUT JENIS SUBMIT

• Input jenis Submit mendefinisikan tombol untuk mengirimkan data formulir ke form-handler
• Form-handler biasanya adalah halaman server (ex: halaman file PHP) dengan skrip untuk memproses
data input.
• Form-handler ditentukan dalam atribut aksi form
<form action=“simpan.php” >
…….
<input type="submit" value="Kirim">
</form>
• Kata ‘Kirim’ pada tombol merupakan nilai atribut value
 INPUT JENIS LAINNYA

• Membatalkan isian yang sudah ditulis pada form

<input type="reset" value="Batal">

• Menulis kata sandi supaya tidak terlihat

<input type=“password" value=“Kata Sandi">

• Melakukan Upload berkas (file)

Upload Berkas <input type=“file">
 TABLE
• Membuat tabel dengan menggunakan tag Table <table>..</table>
• Table Row dengan tag <tr>…</tr>
 Yaitu baris pada suatu tabel.

• Table Data dengan tag <td>…</td>

 Yaitu tempat untuk memasukkan informasi dalam suatu tabel
• Table Header dengan tag <th>..</th>
 Digunakan untuk pembuatan judul tabel
ATRIBUT-ATRIBUT TABLE

• Border
Untuk membuat batas tepi tabel.

• Width
Untuk mengatur lebar tabel

• Align
Untuk mengatur perataan horizontal data dalam tabel (left, center, right)

• Valign
Untuk mengatur perataan vertikal data dalam tabel (top, middle, bottom)
CONTOH PEMBUATAN TABLE

Code

Hasil
ATRIBUT-ATRIBUT TABLE (LANJUT)

• Cellspacing
Untuk menentukan jumlah spasi antar sel.

• Cellpadding
Untuk menentukan jumlah spasi yang terdapat diantara border sel dengan isi dalam sel.

• Rowspan
Untuk menggabungkan sel-sel dalam baris.

• Colspan
Untuk menggabungkan sel-sel dalam kolom.
CONTOH PENGGUNAAN
CELLSPACING & CELLPADDING

<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>

<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
LATIHAN 4
PEMBUATAN TABEL
• Buka kembali file tugas anda (nama file: artikel.html), tambahkan elemen table yang
berisi 3 (tiga) nama teman dekat satu kelas matrikulasi dengan format tabel seperti di
bawah ini:
Daftar Teman Dekat Kelas Matrikulasi

NO Nama Lengkap Jenis Kelamin Alamat Asal Sekolah

1
2
3
 HTML LINKS
• HTML Links atau Hyperlinks memungkinkan user untuk dapat
berpindah ke halaman web lain atau bagian dari halaman
tertentu maupun halaman web lain pada bagian tertentu

• Jenis-jenis HTML Link:

• Link External
• Link Internal
• Link Gabungan (External dan Internal)
Link External
<a href=“index.html">Beranda</a> |
<a href=“about.html">Tentang Kami</a> |
<a href=“produk.html">Produk</a> |
<a href=“kontak.html">Kontak</a>

Link External dari Foto

<a href="http://www.polibatam.ac.id" target="_blank"><img
src=“polibatam.jpg" ></a>
►Link untuk masuk ke alamat web :
<a href="http://www.polibatam.ac.id ">

►Link untuk masuk ke alamat ftp :

<a href="ftp.polibatam.ac.id">

►Link untuk masuk ke alamat email :

<a href="mail to:[email protected]">
Link Internal
Dapat digunakan untuk mengarahkan bagian atas suatu halaman web
(ketika pengguna telah berada pada bagian bawah halaman)

Contoh
<a name="atas">
…
…
<a href="#atas">Ke Atas</a>
Link Gabungan (Internal & External)
Membuka halaman baru dan mengarahkan ke bagian tertentu

Pada Halaman Awal

<a href=“home.html#foto">Lihat Foto Kegiatan</a>

Pada home.html bagian foto

<a name=“foto"> <img src=“foto.jpg”>
 TUGAS

Buatlah menu link html seperti pada gambar di atas yang terdiri dari:
• Beranda: sebagai halaman awal penjelasan latar belakang, tujuan dan manfaat project
• Sistem: berisi tentang desain, diagram blok serta penjelasan cara kerja system yang dibuat
• Daftar Komponen berisi tentang peralatan dan bahan apa saja yang dibutuhkan
• Referensi: berisi tentang paper, jurnal, website, buku atau apapun yang menjadi rujukan
• Tentang Kami berisi tentang informasi data diri manpro dan anggota tim