KERAH: Praktikum Pemrograman Internet (Pertemuan 3)

MODUL 3

DASAR – DASAR HTML

A. Tujuan Praktikum

1. Memahami konsep hyperlink,form, dan frame.

2. Mengimplementasikan dengan contoh – contoh yang ada.

B. Dasar Teori

1. Membuat link

Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL (uniform resource locator) lain bahkan dalam satu halaman untuk berpindah ke sub judul yang lain, format tag ini adalah sebagai berikut :

<a href = URL_tujuan>hypertext</A>

URL_tujuan bernilai lokasi dan nama file yang akan dituju, sedangkan hypertext nilainya akan ditampilkan dibrowser sebagai text linkn atau tombol penghubung.

2. Link ke Protocol yang Lain

Selain protocol yang lain HTTP (yang memungkinkan HTML bisa ditransfer melalui intyernet), internet juga menyediakan layanan yang lain, seperti transfer file, email, dan sebagainya. Berikut beberapa contoh daftar protocol untuk URL :

URL	Layanan	Contoh
http://	Web	http://www.detik.com
ftp://	Server FTP	ftp://ftp.domain.com.public
File:///	File FTP	File:///html/bab-2/sampel.html
mailto:	e-mail	mailto:ditputra@yahoo.com

3. Elemen Form <form>

Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form menyediakan propertin masukan yang dapat berupa textbox, check box, radio button, dan button. Untuk mendeklarasikan sebuah form digunakan tag <form>…..</form>. Di dalam tag ini kita akan mendefinisikan elemen – elemen form seperti yang telah disebutkan diatas.

Atribut Elemen Form

ACTION = URL (dari file yang menangani form)

METHOD = [get|post] (method HTTP untuk men-submit form)

Property Masukan Pada Elemen Form <input>, <textarea>, <select>

1. Property masukan “Textbox”, ”Password”, ”Hidden”.

Metode Penulisan :

a. Text Box <input type=”text”>

Digunakan untuk memasukan input berupa beberapa text.

b. Password <input type=”password”>

Digunakan untuk memasukan password.

c. Hidden <input type=”hidden”>

Digunakan untuk mengirim data ke suatu aplikasi yang tidak kita inginkan untuk dilihat oleh browser.

Property Masukan

SIZE = ukuran textbox dalam karakter, default 30.

MAXSIZE = karakter maksimum yang akan diterima.

NAME = nama variable yang akan dikirim ke aplikasi.

VALUE = akan menampilkan isinya sebagai nila degault.

2. Property masukan “Button” dan “Check box”.

Metode Penulisan :

a. Check Box <input type=”checkbox”>.

Digunakan untuk memilih lebih dari satu pilihan.

b. Radio Button <input type=”radio”>.

Digunakan untuk dapat memilih hanya salah satu pilihan.

c. Push Botton <input type=”button”>.

Digunakan dengan javascript atau VBSscript untuk menghasilkan suatu aksi.

Property Masukan :

NAME = nama variable yang akan dikirim ke aplikasi.

VALUE = akan menampilkan isinya sebagai nila degault.

CHECKED (beri tanda ‘check’ pada radio button atau checkbox. Pada push button property ini tidak dipakai)

3. Property masukan “Submit” dan ”Reset”.

Metode Penulisan :

a. Submit <input type = “submit”>

Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.

b. Image Submit Button <input type = “image” src=”URL”>

Digunakan untuk menggantikan tombol standar submit dengan image.

c. Reset <input type =”reset”>

Digunakan untuk mereset semua masukan dalam form.

Property masukan :

NAME = nama variable yang akan dikirim ke aplikasi.

VALUE = berisi label berupa text pada tombol

4. Property masukan “Text Area”

Metode penulisan :

Text area <text area>………..</textarea>

Elemen untuk memasukan teks secara leluasa seperti notepad.

Property masukan :

NAME = nama variable yang dikirim ken aplikasi

ROWS = jumlah baris

COLS = jumlah kolom

5. Property masukan “Select”

Metode penulisan :

Select <select>………..</select>

Daftar dala property select menggunakan tag<option>

Property masukan :

SIZE = jumlah pilihan yang dapat dilihat

NAME = nama variable yang dikirim ke aplikasi

Frame

Membuat frame berarti membagi web browser menjadi beberapa bagian dalam satu window, dengan tampilan yang dapat diatur tersendiri. Sebuah halaman web dengan frame merupakan halaman web yang khusus mendefinisikan ukuran dan lokasi tiap kandungan frame. Halaman frame paling sederhana adalah dengan dua frame, yaitu satu untuk menampilkan hyperlink (atau sering disebut dengan navigasi) dan yang lain untuk menampilkan halaman yang ditunjukan oleh daftar hyperlink tersebut. Isi dari frame tidak lain adalah satu halaman yang lain.

Tag <frameset>

Tag ini untuk mendefinisikan bahwa sauatu halaman web menggunakan frame. Misalkan didefinisikan untuk tag tersebut <frameset cols=”100,*”>, maka halaman ini akan membagi frame mwnjadi dua bagian kiri dan kanan, dan sebelah kiri didefinisikan sebasar 150 pixel. Property dari tad frameset adalah COLS, dan ROWS. COLS akan mendefinisikan beberapa koilom dalam frame tersebut, sedangkan ROWS akan membagi frame dalam beberapa baris. Penggunaan COLS dan ROWS tidak diijinkan secara bersamaan. Jika diinginkan membagi frame dalam dua baris dan baris dibawah terdiri dari dua kolom, maka didefinisikan dahulu untuk frame baris, kemudian buat frameset untuk kolom.

Property yang lain pada frameset antara lain :

- FRAMSPACING = mendefinisikan jarak antar frame

- BORDER = untuk memberikan batas antar frame, jika tidak diinginkan adanya border maka diberikan nilai false pada border.

- FRAMEBORDER = jika border diberikan, maka frameborder ini akan mengatur lebar border.

Tag <frame>

Tag ini mendefinisikan isi dari frame yang telah diatur dalam FRAMESET, seperti halaman yang menjadi resource dari isi frame.

Beberapa property dalam tag ini antara lain :

- SRC, menunjukan URL halaman yang akan dimasukan dalam frame.

- SCROLLING, akan menunjukan perizinan pengguna web browser untuk melakukan scrolling jika ternyata halaman yang ditampilkan lebih besar dari window maka nilainya yes atau no.

- NORESIZE, pengguna web browser tidsk diizinkan melakukan perubahan ukuran frame.

- NAME, pendefiunisian untuk frame yang dipakai, Nama ini akan berhubungan dengan pendefinisian target. Misalkan untuk frame kiri dan kanan, dan masing – masing diberi nama LEFT dan RIGHT, maka semua link didalam frame LEFT diberi penjelasan bahwa target dari link adalah frame yang bernama RIGHT, maka semua link didalam LEFT jika dikunjungi akan mangakibatkan perubahan pada frame RIGHT.

- TARGET, pendefinisian tujuan dari hyperlink pada frame. Jika target adalah pada nama frame yang ada, maka perubahan akan terjadi pada frame dengan nama tersebut. Jika nama frame itu tidak ada, maka web browser akan membuka window baru.

Pendefinisian target antara lain adalah :

_SELF, akan mendefinisikan target pada frame yang sama.

_TOP, akan mendefinisikan taget pada frame yang paling atas, sehingga akan mengubah seluruh halaman.

_BLANK, akan mendefinisikan target untuk membuka window yang baru.

_PARENT, seperti pada TOP, tetapi pendefinisian target pada halaman yang berada pada frame.

Contoh Penggunaan Frame

1. Hasil Pencarian

Untuk mempermudah dan meringankan beban pekerja web, maka pada beberapa search engine menggunakan metode frame untuk menampilkan hasil pencariannya. Sehingga, form untuk pencarian masih tetap terus muncul, dengan hasil yang akan tetap ditampilkanmpada frame yang lain. Metode ini juga bisa digunakan bila kita ingin menggunakan search engine yang sudah ada pada halaman kita.

2. Banner, menu dan navigasi

Pada beberapa situs, frame digunakan untuk memunculkan banner atau menu pada setiap halaman di web tersebut. Contohnya adalah beberapa web freemail seperti yahoomail. Pada yahoomail menu di frame kiri akan muncul terus, untuk memberikan bantuan link ke berbagai menu yang berada di web tersebut.

3. Cloacking page

Cloacking page berarti menyembunyikan halaman. Dengan memanfaatkan frame yang didefinisikan mengisi halaman penuh maka setiap kali mengunjungi link yang ada pada halaman tersebut, maka alamat yang ditujukan oleh web browser.

LATIHAN

1. Latihan 01 : link01 dan link02.html

Syntax Program

<html>

<head>

</head>

<body>

<h3>berikut ini contoh link ke file link_02.html</h3>

<a href="link_02.html">coba klik disini</a>

</body>

</html>

Tampilan Program

Link 02.html

Script Program

<html>

<head>

</head>

<body>

<h3>ini halaman file link_02.html</h3>

<a href="link_01.html">Kembali ke halaman sebelumnya</a>

</body>

</html>

Tampilan Program

Analisis Program:

2. Latihan 02 : mail.html

Syntax Program

<html>

<head>

<title>Contoh e-mail</title>

</head>

<body>

Klik<a href="mailto:Gilbran.pawitra@gmail.com">

Gilbran.pawitra@gmail.com</a>untuk memberikan komentar dan saran terhadap modul ini.

</body>

</html>

Tampilan Program

Analisis Program:

3. Latihan 03 : form.html

Syntax Program

<html>

<head>

<title>latihan form</title>

</head>

<body>

<tr>

</tr>

<tr>

<td width="100">Alamat</td><td>:</td>

<tr>

<td width="100">Telepon</td><td>:</td>

</tr>

<tr>

<td width="100">Email</td><td>:</td>

<tr>

<td width="100">Pekerjaan</td><td>:</td>

<option value=mahasiswa>mahasiswa

<option value=pelajar>pelajar

<option value=peg_negri>peg_negri

<option value=presiden>presiden

<option value=menteri>menteri

</select>

</td>

</tr>

<tr>

<td width="100">Anggota</td><td>:</td><td width="120">

<input type=radio name=anggota value=nya check>ya

<input type=radio name=anggota value=bukan

check>bukan

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

Tampilan Program

Analisis program

4. Latihan 04

File 1 : frame.html

Syntak Program :

<html>

<head>

<title>Contoh penggunaan frame</title>

</head>

</frameset>

</html>

Tampilan Program :

File 2 : framekir.html

Syntax Program:

<html>

<head>

<title>Frame Kiri</title>

</head>

<h1>frame disebelah kiri</h1>

</body>

</html>

Tampilan program

File 3 : Framekan.html

Syntax Program :

<html>

<head>

<title>Frame Kanan</title>

</head>

<h1>frame disebelah Kanan</h1>

<tr>

</tr>

<tr>

<td width="100">Alamat</td><td>:</td>

</tr>

<tr>

<td width="100">Telepon</td><td>:</td>

</tr>

<tr>

<td width="100">Email</td><td>:</td>

<tr>

<td width="100">Pekerjaan</td><td>:</td><td width="120">

<option value=mahasiswa>mahasiswa

<option value=pelajar>pelajar

<option value=peg_negri>peg_negri

<option value=presiden>presiden

<option value=menteri>menteri

</select>

</td>

</tr>

<tr>

<td width="100">Anggota</td><td>:</td><td width="120">

<input type=radio name=anggota value=nya check>ya

<input type=radio name=anggota value=bukan check>bukan

</td>

</tr>

</td></tr>

</table>

</form>

</body>

</html>

Tampilan Program

Analisis ketiga hasil:

CATATAN :

untuk menampilkan program nya copy kan semua syntax dan paste kan di notepad di sarankan notepad++ , save notepad tersebut dengan format .Html

KERAH

Saturday, October 31, 2015

Praktikum Pemrograman Internet (Pertemuan 3)

No comments:

Post a Comment