W151700011 - Web 1: Pemrograma N

2
MODUL PERKULIAHAN
W151700011 –
PEMROGRAMA
N WEB 1
Pembuatan Halaman Web Statis
Abstrak Sub-CPMK (lihat di RPS)
membuat halaman Mahasiswa mampu membuat halaman

sederhana dengan berbagai sederhana dengan berbagai macam
macam tag tag
Pe
mbahasan
Fakultas Program Studi Tatap Muka Disusun Oleh
03
Wawan Gunawan, S.Kom., M.T.
Ilmu Komputer Teknik Informatika
Cara Membuat Frame HTML
Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian.
Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari
penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan
halaman lainnya.
Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain
menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame,
sedangkan sisi frame yang lain menampilkan isi dokumen
3. Membuat suatu dokumen tanya jawab, dll.
Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang
harus dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat, misalnya
bentuk frame pada contoh berikut:
2021 Pemrograman Web 1

2 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Cara Membuat Frame HTML
Untuk membuat frame seperti Frame A2, sebuah halaman kita bagi menjadi dua bagian
terlebih dahulu secara horizontal seperti Frame A1, kemudian dibagi lagi hingga seperti
Frame A2. Demikian pula untuk membuat Frame B2 harus melalui bentuk Frame B1.
Urutan ini akan sangat memengaruhi bentuk frame yang akan kita bangun.
Tag untuk membuat frame diawali dengan menggunakan <FRAMESET> dan diakhiri
dengan </FRAMESET>. Pada file pendefinisi frame kita tidak lagi memerlukan tag
<BODY></BODY>, sehingga struktur dasar pendefinisi frame adalah sebagai berikut:

Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka
kita gunakan tag <FRAMESET></FRAMESET>. Atribut-atribut yang dapat menyertai tag
ini adalah:
 BORDER, untuk menentukan tebal garis pemisah antar frame
 ROWS, untuk menentukan berapa baris bagian yang akan dibentuk
 COLS, untuk menentukan berapa kolom yang akan dibentuk
Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame
tersebut dengan tag <FRAME>. Atribut-atribut yang dapat menyertai tag ini adalah:
 NAME, untuk memberi identitas/nama bagi frame tersebut. Fungsinya adalah
ketika frame tersebut dijadikan target untuk menampilkan suatu halaman.
 SRC, menunjukkan file yang mengisi frame tersebut.
 SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bar di

samping atau di bawah halaman, opsi inputnya adalah "YES, NO atau AUTO".
Yang perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa kita telah
mempunyai file yang akan digunakan untuk mengisi frame tersebut.
Aturan Pendefinisian Ukuran :

 Nilai angka dalam pixel.
 Nilai angka dalam persentase (%) yang menandakan persentase dari keseluruhan
area tampilan yang tesedia.
 Tanda bintang (*) yang menandakan sisa ruang yang masih ada.
Berikut adalah code yang akan dibuat

Tampilan yang didapat seperti pada gambar di bawah ini
Cara Menambahkan Link di HTML <tag a>
Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan
pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.
Link ditulis dengan <a> yang merupakansingkatan cari anchor (jangkar). Setiap tag <a>
setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href
adalah singkatan dari hypertext reference).

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat
kode seperti dibawah ini.
Contoh penggunaan tag link <a>:
Maka akan tampil hasil seperti gambar di bawah ini
Alamat absolute ditulis dengan lengkap, sebagai contoh

http://www.wawangunawan.web.id,
Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini.
Seandainya nama file kita adalah latihan1.php, dan dalam folder yang sama terdapat
halaman latihan2.php, kita dapat menggunakan href=”latihan2.html” untuk membuat
link ke halaman latihan2.php
Atribut tag <a>: target
Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk
menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di
jendela baru.

Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa
halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru,
gunakan atribut target=”_blank”.
Contoh penggunaan tag link <a>dengan atribut target:
Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru,
dan tidak menimpa tab saat ini.
Selain digunakan untuk menghubungkan halaman HTML, Tag <a> juga bisa digunakan
untuk dihubungkan ke bagian lain dari halaman yang sama, atau disebut Internal Link.
Cara pembuatan internal link adalah dengan membuat link berisi atribut id dari tag lain.
Cara Membuat Internal Link ke Bagian Lain Dokumen (Atribut id)
Jika pada tutorial HTML Dasar kita telah mempelajari cara membuat link ke halaman lain
(baik link dengan alamat absolut maupun alamat relatif), kita juga bisa membuat link ke
bagian lain dari dokumen yang sama. Dalam Tutorial HTML Lanjutan kali ini kita akan
mempelajari Cara Membuat Internal Link ke Bagian Lain Dokumen dengan menggunakan
atribut id.
Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam
HTML sebagai ‘penanda’ bagian dari halaman web.
Apabila paragraf pertama dari halaman kita memiliki id=”paragraf1”, maka kita bisa
membuat link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”,
dengan menuliskan:

<a href="#paragraf1">Kembali ke paragraf
pertama</a>
Jika bagian tersebut dijalankan, web browser akan menampilkannya seperti link ‘normal’,
namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman
yang memiliki id=”paragraf1”. Perhatikan bahwa di dalam tag <a>, kita menggunakan
tanda pagar “#” untuk berpindah ke bagian lain halaman.
Syarat dari link tersebut bisa berfungsi adalah di bagian lain halaman, harus ada tag yang
memiliki atribut id=”paragraf1”.
Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, kita juga bisa
membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian
tertentu. Untuk keperluan ini, kita hanya tinggal menambahkan tanda pagar di akhir
atributhref, seperti contoh berikut ini:
<ahref="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>
Jika digabungkan dengan alamat absolut, kita bisa memandu pengunjung situs ke bagian
tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.
Sebagai contoh, berikut adalah kode HTML cara membuat link ke bagian lain dokumen
HTML:
Dengan hasil seperti gambar di bawah ini

Cara Membuat <a> dengan CSS
Sebelum kita melanjutkan pembuatan menggunakan CSS, mari kita buat nama file
style.css, dan isikan code seperti di bawah ini (tambahkan dari css sebelumnya)
Tambahkan script pembahasan sebelumnya menjadi sseperti di bawah ini

Hasil yang ditampilkan pada browser seperti gambar di bawah ini
Cara Membuat Form HTML
Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai
dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk
mengirimkan data antar halaman web.
Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form
biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user,
dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan
disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan
menjelaskannya pada tutorial tentang PHP dan JavaScript.
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form,
input, textarea,select dan option.

Pengertian tag <form>
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut
untuk dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan
dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP
yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian
form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau
post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method
dengan get (dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka
isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk
query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti
yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada
browser.
Struktur dasar form akan terlihat sebagai berikut:
<form name="frmAnggota" id="frmAnggota" method="post" action="formulirPost.php">
Isi script di sini
</form>

Mengenal tag <input>
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak
bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol
submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang
menerima input berupa text, contohnya digunakan untuk inputan nama, username,
dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut
value yang bisa diisi nilai tampilan awal dari text. Contoh script:
<input type="text" id="txtKode" name="txtKode" size="20" maxlength="10">
 <input type=”password” /> dalam tampilannya sama dengan type text, namun
teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya
hanya digunakan untuk inputan yang sensitif seperti password. Contoh script:
<input type="password" id="txtPasw" name="txtPasw" size="20" maxlength="10">
 <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist
atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini.
Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai
checked, akan membuat chexkbox langsung terpilih pada saat pertama kali
halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user
dapat dipilih beberapa hobi. Contoh script:
<input type="checkbox" name="check" value="Renang">Renang

<input type="checkbox" name="check" value="Browsing">Browsing
<input type="checkbox" name="check" value="Dugem">Dugem</td>
 <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih
satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan
user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis
kelamin. Contoh script:
<input type="radio" id="optsex" name="optsex" value="laki" checked>Laki-

Laki
<input type="radio" id="optsex" name="optsex" value="perempuan">Perempuan

 <input type=”submit” /> akan menampilkan tombol untuk memproses form.
Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan
membuat text tombol submit berubah sesuai inputan nilai value. Contoh script
<input type="submit" name="btnSimpan" value="simpan">
Mengenal tag <textarea>
Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan
dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui
atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea name="txtAlamat" id="txtAlamat" cols="50px" rows="5px">
</textarea>
Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.
Mengenal tag <select>
Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat
memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option
untuk membuat box pilihan.
Contoh penggunaan tag select adalah sebagai berikut:
<select name="cmbAgama" id="cmbAgama" >

<option value=""></option>
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="katolik">Katolik</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>

</select>
Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini
adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika
atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut
value ini tidak akan tampak dalam tampilan form.
Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai
awal. Contoh penggunaanya adalah sebagai berikut yang akan menampilkan Hindu saat
web dijalankan

<option value="hindu" selected>Hindu</option>
</select>
Mengenal Atribut: Name
Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses
oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP
atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh
pemakaiannya adalah sebagai berikut:
<input type="text" id="txtKode" name="txtKode" size="20" maxlength="10">

<input type="text" id="txtNama" name="txtNama" size="20" maxlength="50">
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data,
masing-masing akan dibedakan menurut atribut name.

Akhirnya, Sebuah Form Utuh
Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk
membuat sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML
berikut, lalu save sebagai formulir.php
<div class="form">
<form name="frmAnggota" id="frmAnggota" method="post"
action="formulirPost.php">
<div class="title">Pencarian Data</div>
<div class="fitem">
<label>Kode</label>
<input type="text" id="txtKode" name="txtKode" size="20"
maxlength="10">
</div>
<div class="fitem">
<label>Nama</label>
<input type="text" id="txtNama" name="txtNama" size="50"
maxlength="50">
</div>
<div class="fitem">
<label>Jenis Kelamin</label>
<input type="radio" id="optsex" name="optsex" value="laki"
checked>Laki-Laki
<input type="radio" id="optsex" name="optsex"
value="perempuan">Perempuan
</div>
<div class="fitem">
<label>Agama</label>
<option value="hindu">Hindu</option>
</select>
</div>
<div class="fitem">
<label>Provinsi</label>
<select name="cmbProv" id="cmbProv" onChange="cariKota()">
<option value="dki">Jakarta</option>
<option value="jb">Jawa Barat</option>
</select>
</div>
<div class="fitem">
<label>Kota</label>
<select name="cmbCity" id="cmbCity">
</select>
</div>
<div class="fitem">
<label>Alamat</label>
<textarea name="txtAlamat" id="txtAlamat" cols="50px"
rows="5px"></textarea>
</div>

<div class="fitem">
<label>Password</label>
<input type="password" id="txtPasw" name="txtPasw" size="20"
maxlength="10">
</div>
<div class="fitem">
<label>Hobi</label>
<input type="checkbox" name="check" value="Renang">Renang
<input type="checkbox" name="check" value="Browsing">Browsing
<input type="checkbox" name="check" value="Dugem">Dugem
</div>
<div class="fitem">
<label></label>
<input type="button" onClick="javascript: cariSaya()"
value="simpan">
</div>
</form>
</div>

Daftar Pustaka
Bahra. 2005. Analisis dan Desain Sistem Informasi. Tangerang: Graha Ilmu.
Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming.

Yogyakarta: Andi Yogyakarta.
Hakim, Rachmad dan Sutarto . 2009. Konsep Pemrograman Java dan Penerapannya
untuk Membuat Software Aplikasi. Jakarta: Elex Media Komputindo.
Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan
Praktek Aplikasi Bisnis. Yogyakarta: Andi Yogyakarta.


W151700011 - Web 1: Pemrograma N

Diunggah oleh

Informasi Dokumen

Judul Asli

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

W151700011 - Web 1: Pemrograma N

Diunggah oleh

Hak Cipta:

Format Tersedia

2

Abstrak Sub-CPMK (lihat di RPS)

membuat halaman Mahasiswa mampu membuat halaman

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:

3. Membuat suatu dokumen tanya jawab, dll.

2021 Pemrograman Web 1

2021 Pemrograman Web 1

 COLS, untuk menentukan berapa kolom yang akan dibentuk

 SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bar di

Aturan Pendefinisian Ukuran :

Berikut adalah code yang akan dibuat

2021 Pemrograman Web 1

Cara Menambahkan Link di HTML <tag a>

2021 Pemrograman Web 1

Contoh penggunaan tag link <a>:

Maka akan tampil hasil seperti gambar di bawah ini

Alamat absolute ditulis dengan lengkap, sebagai contoh

Atribut tag <a>: target

2021 Pemrograman Web 1

Contoh penggunaan tag link <a>dengan atribut target:

Cara Membuat Internal Link ke Bagian Lain Dokumen (Atribut id)

2021 Pemrograman Web 1

<ahref="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>

Dengan hasil seperti gambar di bawah ini

2021 Pemrograman Web 1

Tambahkan script pembahasan sebelumnya menjadi sseperti di bawah ini

2021 Pemrograman Web 1

Cara Membuat Form HTML

2021 Pemrograman Web 1

Struktur dasar form akan terlihat sebagai berikut:

<form name="frmAnggota" id="frmAnggota" method="post" action="formulirPost.php">

Isi script di sini

2021 Pemrograman Web 1

<input type="text" id="txtKode" name="txtKode" size="20" maxlength="10">

<input type="password" id="txtPasw" name="txtPasw" size="20" maxlength="10">

<input type="checkbox" name="check" value="Renang">Renang

<input type="radio" id="optsex" name="optsex" value="laki" checked>Laki-

2021 Pemrograman Web 1

<input type="submit" name="btnSimpan" value="simpan">

Mengenal tag <textarea>

Contoh penggunaan textarea adalah sebagai berikut:

<textarea name="txtAlamat" id="txtAlamat" cols="50px" rows="5px">

Mengenal tag <select>

Contoh penggunaan tag select adalah sebagai berikut:

<select name="cmbAgama" id="cmbAgama" >

2021 Pemrograman Web 1

<select name="cmbAgama" id="cmbAgama" >

Mengenal Atribut: Name

<input type="text" id="txtKode" name="txtKode" size="20" maxlength="10">

2021 Pemrograman Web 1

2021 Pemrograman Web 1

2021 Pemrograman Web 1

Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming.

2021 Pemrograman Web 1

Anda mungkin juga menyukai