FORM dan FRAME
FORM Fungsi: Menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server Standar penulisan: <form method=“post/get” action=“. . .”> . . . </form>
Textbox Tag: <input>
Contoh: <body> <b>Login: <b> <br> <form method="post"> <table> <tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr> <tr> <td>Password:</td> <td><input type="password" name="password"size="20"></td></tr> </table> </form> </body>
Submit dan Reset Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form
Contoh: <body> <b>Data Pengunjung: <b> <br> <form method="post" action="data.html"> <table> <tr> <td>Nama:</td> <td><input type="text" name="nama" size="20"></td></tr> <tr> <td>Alamat:</td> <td><input type="text" name="alamat" </table> <input type="submit" value="Simpan" name="t1"> <input type="reset" value="Reset" name="t2"> </form> </body>
Checkbox Fungsi: Untuk memberi beberapa pilihan kepada user Contoh: <form method="post"> Bacaan yang Anda sukai: <br> <input type="checkbox" name="bacaan" value="novel"> Novel <br> <input type="checkbox" name="bacaan" value="koran"> Koran <br> <input type="checkbox" name="bacaan" value="majalah"> Majalah <br> <input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br> </form>
Radio Button Fungsi: Untuk memberi (hanya) satu pilihan kepada user Contoh: <form method="post"> Apakah Anda setuju dengan kenaikan SPP: <br> <input type="radio" name="opsi" value="ya"> Ya <br> <input type="radio" name="opsi" value="tidak"> Tidak <br> <input type="radio" name="opsi" value="ragu"> Ragu-ragu <br> </form>
Daftar Drop Down Contoh: Fungsi: Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja) Contoh: <form method="post"> Jurusan: <br> <select name="jurusan"> <option value="TInf"> Teknik Informatika <br> <option value="MI"> D3 Manajemen Informatika <br> <option value="TI"> Teknik Industri <br> </select> </form>
Text area Fungsi: Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak Komentar Tag: <textarea>
Contoh: <html> <head> <title> Penggunaan Text Area </title> </head> <body> <b>Komentar: <b> <br> <form method="post"> <textarea rows="10" cols=“40" wrap="physical“ name="komentar"> </textarea><br> </html> TAMPILAN :
FRAME Untuk membuat sebuah frame terlebih dahulu kita harus membuat halaman-halaman web yang ingin kita gabungkan dalam frame tersebut. Berikut adalah halaman-halaman web yang telah dibuat berikut sintaksnya.
Frame <FRAME> adalah Tag HTML yang berfungsi untuk membagi layar Beberapa perintah itu adalah <FRAMESET> < FRAME> <IFRAME> <FRAMESET>..</FRAMESET> memiliki parameter : ROWS = panjang baris (pixel) COLS=panjang kolom (pixel) ONLOAD=string (semua frame sudah diload) ONUNLOAD(=string (semua string telah dihapus) <FRAME>..</FRAME> memiliki parameter : NAME =nama frame SRC = URL (isi frame) FRAMEBORDER =[0 | 1] MARGINWIDTH=pixel (batas kiri thd isi frame) MARGINHEIGHT=pixel (batas atas thd isi frame) SCROLLING =[yes | no ] Modul-3 HTML (2)
FRAME BENTUK PENULISAN Standar penulisan: <frameset [cols=“%,%”] [rows=“%,%”]> . . . </frameset> Atribut-atribut:
Nama dan Target Frame Frame dapat diberi nama dan diatur targetnya dengan menggunakan tag base target. Contoh: Frame menu dapat digunakan sebagai link untuk mengakses halaman di frame content.
Contoh membuat Frame (1) Buatlah satu file HTML berisi sbb : disimpan dalam KeteranganFrame.html : Buatlah satu file HTML berisi sbb : Klik 3 kali Demo sebenarnya Modul-3 HTML (2)
Contoh membuat Frame (2) Membagi layar menjadi 4 bagian Sediakan 3 buah gambar dan 1 buah file HTML Ketik kode HTML sebagai berikut ( hanya ditulis SRC saja) Modul-3 HTML (2)
Frame Vertikal Contoh: <html> <head> <title> Membuat Frame Vertikal </title> </head> <frameset cols="25%,*"> <frame name="kiri" src="kiri.html" scrolling="no"> <frame name="kanan“ src="kanan.html"> </frameset> </html>
Frame Horisontal Contoh: <html> <head> <title> Membuat Frame Horisontal </title> </head> <frameset rows="40%,*"> <frame name="atas" src="atas.html“ scrolling="no"> <frame name="bawah“ src="bawah.html"> </frameset> </html>
Gabungan Frame Vertikal - Horisontal Contoh: <html> <head> <title> Membuat Frame Vertikal-Horisontal </title> </head> <frameset rows="20%,*"> <frame name="atas" src="atas.html“ scrolling="no"> <frameset cols="40%,*"> <frame name="kiri" src="kiri.html"> <frame name="kanan" src="kanan.html"> </frameset> </html>
IFRAME IFRAME adalah cara membuat frame dengan lebar dan tinggi ditentukan sendiri (dalam pixel) Selanjutnya frame dapat diletakkan ditengah, kiri atau kanan layar <IFRAME SRC=“sumber” WIDTH=lebar HEIGHT=tinggi> Modul-3 HTML (2)
Entitas Karakter HTML Beberapa entitas (atau simbol) tidak dapat ditulis langsung di halaman web karena tidak ada di keyboard. Oleh karena itu diperlukan kombinasi entitas. Terdapat tiga bagian untuk setiap entitas, yaitu: i. Dimulai dengan sebuah ampersand [“&”] ii. Diberi nama entitas, misalnya [“copy”] iii. Diakhiri dengan semicolon [“;”]
Contoh: <html> <head><title>Entitas karakter</head> <body> Simbol "copyright" : "©" <br/> Simbol "alpha" : "α" <br/> </body> </html>
Spasi Tambahan & Simbol “<“ “>” Spasi tambahan (“ “) dapat dibuat dengan kombinasi entitas Contoh: <html> <head><title>Spasi Tambahan</title></head> <body> <p>Setelah ini ada lima spasi tambahan:" ". Sekarang lanjut kalimat lagi.</p> </body> </html> Tampilan :
“<“ -> < [less than] “>” -> > [greater than] Contoh: Kombinasi entitas untuk menampilkan simbol“<“ dan “>” di dalam halaman web: “<“ -> < [less than] “>” -> > [greater than] Contoh: <html> <head><title>Simbol "<" dan ">"</title></head> <body><p>Karakter "Kurang dari" : "<" <br/> Karakter "Lebih dari" : ">"</p> </body> </html>
Meta Tag Digunakan untuk men-supply informasi kepada search engines yang tidak akan terlihat oleh pengunjung web kecuali jika mereka menampilkan kode dari halaman HTML yang diaksesnya. Penggunaan meta tag akan membuat search bot yang ada mengenali website tersebut sehingga dapat tampil di daftar search engine dan tentu saja mudah dicari oleh pengguna Internet
Meta tag keywords Fungsi: Meletakkan kata kunci (keyword) dari website Format: <head> <meta name="keywords" content=" macam_macam keyword yang digunakan" /> </head>
Meta tag description Fungsi: menunjukkan deskripsi singkat dari halaman web kepada search engine Format: <head> <meta name="description" content=“deskripsi_yang_diinginkan" /> </head> Tag description dan keywords sangat mirip. Jika tidak ada kecocokan/relasi antara nilai dua tag ini mungkin saja situs anda tidak diproses oleh search engine, jadi anda harus cerdas menentukan keyword dan deskripsinya.
Meta tag revised Fungsi: Untuk mencatat kapan update terakhir dilakukan terhadap situs web Format: <head> <meta name="revised" content=“tanggal_update_terakhir" /> </head>
Refresh page dan redirect Fungsi: Digunakan untuk keperluan redirect. Dengan meta tag refresh, pengunjung akan di-redirect (atau di-refresh) ke halaman web yang telah ditentukan. Format: <head> <meta http-equiv="refresh" content=“jumlah selang detik untuk me-refresh halaman; url=…“ /> </head>
Embed Tag Fungsi: menyisipkan media (misalnya musik) ke dalam halaman web Standar penulisan: <embed src=“file_media” /> Atribut-atribut:
Contoh: <html> <head> <title> Penggunaan Embed (Musik) </title> </head> <body> <embed src="flourish.mid" width=”360” height=”160” hidden="false"/> </body> </html>
Latihan
Lat 1 - asal.html <HTML> <HEAD> <TITLE> ASAL </TITLE> </HEAD> <BODY> <H1> <center> WELCOME </H1> <marquee direction="down"> <center> <font size="5">To Ari'S Site's</font> </marquee> <p><font size="6"> This site connecting people </font></P> </BODY> </HTML>
Lat 2 – menu.html <html> <head><title> menu </title></head> <body> <a href="Web 1.html" target="isi">Pembuka</a><br> <a href="asal.html" target="isi">Iklan</a> </body> </html>
Lat 3– web1.html <html> <body> <ul type="circle"> <li>Luffy</li> <li>Nami</li> <li>Zoro</li> <li>Sanji</li> <li>Usop</li> <li>Choper</li> <li>Robin</li> </ul></P> <p> <img src="image/luffy2.jpg" width="100" height="110"> <img src="image/nami.jpg" width="85" height="110"> <img src="image/zoro.jpg" width="75" height="110"> <img src="image/sanji.jpg" width="85" height="110"> <img src="image/usop.jpg" width="95" height="110"> <img src="image/choper.jpg" width="85" height="110"> <img src="image/robin.jpg" width="85" height="110"> </body> </html> <html> <body> <head><title>WEB</title></head> <p align="center"> <font size="45"></font><hr align="center" width="100"></p> <p> <font face="arial" color="ff0000" > One piece adalah film yang menceritakan tentang sebuah perjalanan dari sekelompok bajak laut yang ingin menjadi raja dari segala bajak laut.</font></p> <p> Tokoh-tokoh dari One Piece adalah :
Lat 4 – header.html <html> <head><title> awalan </title></head> <body> <h1 align="center"><img border="10" src="image/luffy2.jpg" width="100" height="120">Monkey D Luffy</h1> </body> </html>
Lat 5 – isi.html <html> <head><title> </title></head> <body> </body> </html>
Lat 6 <html> <head></head> <frameset rows="26%,74%"> <frame src="Section/header.html"> <frameset cols="13%,67%,20%"> <frame src="Section/menu.html"> <frame src="Section/Web 1.html"> <frame src="Section/isi.html" name="isi"> </frameset> </frameset> </html>
Hasil Gabungan
Form