< h t m l>revida.staff.gunadarma.ac.id/downloads/files/83238/minggu+1+dan+… · membentuk...
TRANSCRIPT
< h t m l>
Mark Up LanguageMark Up : informasi tambahan yang ditempatkan pada
teks untuk menjelaskan bagaimana teks tersebut
diinterpretasi
Mark Up ditambahkan bukan untuk tampilan tetapi
untuk memberikan struktur interpretasi/pemberian
arti
HTML (HyperText Markup Language) merupakan subset
dari SGML (Standard Generalized Markup Language)
Mark Up LanguageContoh subset lain dari SGML :
XML (eXtensible Markup Language)
SMIL (Synchronized Multimedia Integration
Language)
MathML (Mathematical Markup Language)
CML (Chemical Markup Language)
Sejarah SGML1. Tahun 1980,
Sebuah ide IBM dalam membuat dokumen yang akan mengenali setiap elemen dari dokumen dengan menggunakan suatu tanda tertentu seperti judul, alamat dan isi dokumen.
IBM (Charles Goldfarb, Edward Mosher dan Raymond Lorie ) membentuk elemen element tersebut menjadi suatu program yang berguna untuk melakukan pemformatan dokumen secara otomatis.
Program ini dikenal sebagai Bahasa pemrograman yang dinamakan Markup Language. IBM menamakan sebagai Generalized Markup Language (GML).
Sejarah SGML2. Tahun 1986,
Konsep tersebut disetujui oleh ISO yang menyatakan bahwa IBM mempunyai suatu konsep tentang dokumen yang sangat baik dan kreatif.
ISO mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standard untuk pembuatan dokumen-dokumen.
Bahasa ini dinamai oleh ISO sebagai SGML (Standard Generalized Markup Language
ISO mempublikasikannya bahwa bahasa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran.
Tetapi di luar perkiraan ISO, HTML juga berguna untuk menjelajahi internet. Khususnya bagi para pengguna World Wide Web (WWW).
Sejarah HTML
1. Awalnya, Pada tahun 1980
Tim berners-Lee ingin membuat sebuah sistem perangkat lunak yang dinamakan dengan ENQUIRE ()
2. Pada Tahun 1989
Lambat laun bertransformasi sebagai sistem markah berbasis internet
Kemudian dari pemikiran Caillau Tim munculah HTML.
Caillau Tim bekerja sama dengan Banners Lee Robert memulai mengembangkan bahasa pemrograman HTML yang dipopulerkan pertama kali dengan browser Mosaic.
HTML mulailah dirancang oleh Tim Berners-Lee berkebangsaan Inggris, yang pada saat itu sebagai peneliti di CERN.
Sejarah HTML
3. Pada akhir tahun 1990
Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya, dan mempulikasikannya dengan nama “HTML Tags”,
Versi awal HTML terdiri dari 18 element,
Selanjutnya tim Berners-Lee merancang HTML yang didasarkan pada konsep Bahasa markup SGML (standard Generalized Markup Language) yang lahir lebih awal.
Sehingga standard-standard yang ada dalam HTML sangat dipengaruhi oleh SGML, seperti halnya kurung siku “<>” yang merupakan adopsi dari SGML.
SGML menjadi Bahasa ibu HTML.
Sejarah HTML
SGML merupakan standard internasional untuk membuat dokumen
markup (tanda), seperti standard untuk membuat paragraph <p>,
heading <h1>…<h6> dan lain sebagainya.
Namun tidak semua standard HTML berasal dari SGML seperti
hyperlink untuk membuat link murni berasal dari HTML
Era awal HTML, file HTML dijalankan menggunakan web browser
yang dinamakan WorldWideWeb, yang namanya Nexus.
Sebuah web browser pertama yang kemudian menginsfirasi
perusahaan-perusahaan teknologi informasi untuk mengembangkan
web browser lain seperti Netscape, Internet Explorer, Mozilla
Firefox, Google Crohme,Safari, Opera dan yang sejenisnya.
Sejarah SGMLHTML : format standar untuk membuat dokumen
web
HTML versi terakhir : HTML 4.01
Spesifikasi HTML standar :
http://www.w3.org/TR/html4
HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus
File HTML berupa file teks (plain text file), bukan binary file
HTML Authoring ToolsText Editor
- OS default
- notepad (Windows)
- vi (Unix)
- EditPlus, Crimson Editor, UltraEdit (Windows)
- dll
Visual Editor
- Macromedia DreamWeaver
- MS Word
- dll
Contoh Dokumen HTML <html>
<head>
<title>Homepage saya</title>
</head>
<body>
<h1>Saya</h1>
<h2>Perkenalan</h2>
<p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i> <b>pertama</b> saya,
karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>
</p>
</body>
</html> <!-- akhir dokumen HTML -->
Tampilan
HTML
HTML Dokumen terdiri
Element HTM
Atribut HTML
Tag HTML
Elemen HTMLElemen HTML didefinisikan dengan menggunakan tag
HTML.
Setiap elemen HTML memiliki sebuah nama elemen
(body, h1, p, br)
Tag awal adalah nama dikelilingi oleh sudut kurung: <h1>
Tag akhir adalah sebuah garis miring dan nama dikelilingi oleh kurung sudut </ h1>
Isi elemen terjadi antara tag awal dan tag akhir
Beberapa elemen HTML tidak memiliki konten dan tag akhir
Atribut HTML Atribut memberikan informasi tambahan kepada elemen
HTML.
Atribut selalu datang dalam pasangan nama / nilai seperti
name = "value"
Atribut selalu ditentukan dalam tag awal elemen HTML
Contoh:
<h1 Align="center"> ini sedang menuju 1 </ h1>
<body Bgcolor="yellow"> Latar Belakang Berwarna!
</ body>
<table Border="1">
Tag HTML
Digunakan untuk menandai elemen HTML dengan menggunakan dua karakter < dan >, yang disebut kurung sudut
Biasanya datang berpasangan seperti <b> dan </ b>
Teks antara tag awal dan tag akhir adalah isi elemen
Tidak case sensitive, <b> berarti sama sebagai <B>
Tags HTML Basic (<html>, <body>, <p>, <br>, …)
Text Formatting (<b>, <i>, …)
Links (<a>)
Frames (<frameset>, <frame>, …)
Tables (<table>, <th>, <tr>, <td>, …)
Lists (<ul>, <ol>, <li>, …)
Forms (<form>, <input>, <textarea>, …)
Images (<img>, <map>, …)
Head (<head>, <meta>, …)
Scripts (<script>, <noscript>, …)
Susunan HTML
18
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>
Struktur HTML document
Document HTML bisa di bagi mejadi tiga bagian utamahtml, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
19
<head>
Bagian header dari document HTML di apit oleh tag <head></head>.
Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul dari halaman web.
<head>
<title>Judul </title>
</head>
20
<body>
Tag <body> di gunakan untuk menampilkan text, image link
dan semua yang akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to my html </title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>21
Tag Judul (Heading) <hn>Judul paragraf</hn>
n = 1,2,3,4,5,6 (tingkat judul)
Untuk menuliskan judul suatu paragraf
Tag Paragraf (Paragraph)
<p>paragraf</p>
Untuk menandai suatu paragraf.
Suatu paragraf akan terlihat dibatasi oleh satu bariskosong
sebelum dan sesudahnya.
Text Formatting1. Untuk menandai bagian kalimat agar dicetak tebal, miring
dan/atau digaris bawahi.
<b>Kalimat yang dicetak tebal</b>
<i>Kalimat yang dicetak miring</i>
<u>Kalimat yang digarisbawahi</u>
2. Untuk menandai bagian karakter agar dicetak tinggi (pangkat) atau rendah (indeks), biasanya untuk rumus
matematika atau kimia.
<sup>bagian yang dicetak tinggi</sup>
<sub>bagian yang dicetak rendah</sub>
Text Formatting
Text Formatting
<br> : Untuk pindah ke baris berikutnya.
Bentuk penulisan lain yang dianjurkan (XML style) :
<br />
Tag Font (Size)
Tag Font (Face)
Tag Font (Face)
Tag List (enumerasi)HTML tag list dibagi menjadi dua jenis, yakni
1. Ordered list (berurutan)
2. Unordered list(tidak berurutan)
Cara penulisan
ordered list ditulis menggunakan tag <ol>
unordered list menggunakan tag <ul>
list-nya sendiri/list item menggunakan tag <li>
Tag List (enumerasi)
1. Ordered list (berurutan) berfungsi untuk membuatdaftar/list yang berurutan akan ditampilkan dengan angkaatau huruf
Ordered list dengan tag <ol>
Untuk penulisannya dimulai dengan tag <ol> dan diakhiridengan tag </ol> dimana diantara kedua tag tersebutterdapat tag <li> ............ tag <li> sebagai daftarnya/ list item.
Jika tidak menuliskan tipe list pada tag <ol> maka tipelist yang akan tampil dalam format angka seperti 1, 2, 3, dst.
Ordered List (List Berurutan)
Contoh
Ordered List (List Berurutan) Di dalam tag <ol> memiliki atribut untuk memformat daftar/list
yaitu atribut type yang berisi nilai (value)= 1, I, i, a, A.
Ordered List (List Berurutan)
Contoh ordered list menggunakan angka desimal, romawi
besar, romawi kecil, huruf besar dan huruf kecil:
Ordered List (List Berurutan)
Tampilan
Ordered List (List Berurutan) Jika sebuah daftar dimulai dari angka desimal = 4, romawi besar dimulai
dari IV, romawi kecil dimulai dari iv, huruf besar dimulai dari D dan huruf
kecil dimulai dari d
Contoh Tampilan
Tag List (enumerasi)2. Unordered list merupakan suatu list dimana item–item yang ada didalamnya
tidak diberi nomor urutan tapi secara default akan ditampilkan bentuk bulatan.
Untuk penulisannya dimulai dengan tag <ul> dan diakhiri dengan tag </ul>
dimana diantara kedua tag tersebut terdapat tag <li> .... tag <li>.sebagai
daftarnya/ list item.
Contoh Tampilan
Unordered List (List Berurutan)
Atribut Type Dalam Tag <ul>
Jika atribut type tidak ditulis pada tag <ul> maka tipe list
yang akan tampil dalam format bulat hitam
<ul type="disc"> </ul> Membuat tanda bulatan hitam untuk
item
<ul type=“circle"> </ul> Membuat tanda lingkaran putih untuk
item
<ul type="square"> </ul> Membuat tanda kotak untuk item
Unordered List (List Berurutan) Contoh Tampilan
Tag ListContoh Tampilan
Tag Garis Mendatar (Horizontal Line)
• <hr> : membentuk garis pemisah mendatar.
• Bentuk penulisan lain yang dianjurkan (XML style) : <hr />
Tag Gambar (Image)
Bentuk penulisan lain yang dianjurkan : <img src="NamaFileGambar" />
<img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai
ekstensi .GIF, .JPG, atau .PNG.
Tag Link (Anchor) <a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a>
Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan = Kata sembarang sebagai penanda
membentuk link ke URL/file/bagian dokumen lain.
Tag Tabel
Fungsi:
- Menampilkan informasi secara terstruktur, ringkas
dan mudah dibaca
- Mengatur tampilan homepage agar lebih menarik
- Menampilkan data dalam bentuk tabel
- Tabel didefinisikan dengan menyatakan baris dan
kolom
Tag Tabel-Data
Atribut :
<table> definisi tabel</table>
Tag untuk penanda baris adalah <tr> definisi baris</tr>
Tag untuk penanda kolom adalah <td>data</td>
.
Membuat tabel sederhana
Tag yang diperlukan:
Membuat baris: <tr> (table row)
Membuat kolom: <td> (table data)
Contoh: <table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
</table>
Menambahkan Judul TabelTag yang diperlukan:
Judul tabel: <caption>
Judul baris/kolom: <th> (table header)
Tampilan:
Contoh:
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>
</table>
Mengatur Lebar dan Tinggi Suatu Tabel
Atribut: weight dan height
Nilai: ukuran % (max 100%) ukuran pixel
Contoh: Tampilan: <table border="1" width=“50%”>
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th>
<th>NPM</th>
<th>Nama</th></tr>
<tr><td width=“20”>1.</td>
<td width=“80” height=“50”>06.100.001</td>
<td width=“180” height=“50”>Amin A. Angkasa</td></tr>
<tr><td width=“20”>2.</td>
<td width=“80” height=70>06.100.002</td>
<td width=“180” height=70>Beni B. Bernardi</td></tr>
Perataan Dalam Tabel
Horisontal: atribut align utk <caption>, <tr>, <td> dan <th>
Vertikal : atribut valign utk <tr>, <td> dan <th>
Contoh: table border="1" align="center"> <caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle“ width="80“height="50">06.100.001</td>
<td align="right" valign="top“ width="180" height="50">Amin A. Angkasa</td></tr>
Perataan Dalam Tabel
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td> Tampilan
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td>
</tr> </table>
Membuat Warna Pada Tabel Atribut: bgcolor
Contoh
<body bgcolor="purple">
<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center" width="20">1.</td>
Membuat Warna Pada Tabel Contoh Tampilan
<td align="left" valign="middle“
width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A. Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left" valign="middle" width="80"
height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle" width="180"
height="40">Beni B. Bernardi</td></tr>
</table> </body>
Penggabungan Baris/Kolom
Menggabungkan beberapa kolom menjadi 1: atribut colspan
Menggabungkan beberapa baris menjadi 1: atribut rowspan
Contoh Tampilan :
• Contoh
• <table border="1" bgcolor="white" align="center">
• <caption align="top">
• <b> Tabel Daftar Nilai Mahasiswa </b> </caption>
• <tr bgcolor="gray"><th rowspan="2">No</th>
• <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
• </tr>
• <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
• <tr><td align="center" width="20">1.</td>
• <td align="left" valign="middle" width="80" height="40">06.100.001</td>
• <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
• <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
• </tr>
• <tr><td width="20">2.</td>
• <td align="left" valign="middle" width="80" height="40">06.100.002</td>
• <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
• <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
• </tr>
• </table>
Cellpading dan Cellspacing
atribut cellpading: mengatur spasi antara border dengan tulisan
atribut cellspasing: mengatur spasi antar 2 buah sel
Contoh Tampilan :
Contoh
• <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">
• <caption align="top">
• <b> Tabel Daftar Nilai Mahasiswa </b> </caption>
• <tr bgcolor="gray"><th rowspan="2">No</th>
• <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
• </tr>
• <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
• <tr><td align="center" width="20">1.</td>
• <td align="left" valign="middle" width="80" height="40">06.100.001</td>
• <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
• <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
• </tr>
• <tr><td width="20">2.</td>
• <td align="left" valign="middle" width="80" height="40">06.100.002</td>
• <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
• <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
• </tr>
• </table>
FORMFungsi:
Menerima informasi atau meminta input/umpan balik dari user yang kemudian memproses informasi tersebut di server
Dua attribut yang paling sering digunakan dalam penggunaan formyaitu
1. Action : Nilai dari attribut ini menunjukkan lokasi dari file pemroses dari form . Contoh “folderX/file.php atau http://contoh.com/file.php
2. Method : Nilai dari atribut menentukan metode data yang dikirim ke file pemroses apakah dengan menggunakan metode GET atau POST
FORM Standar penulisan: <form method=“post/get” action=“. . .”> . . . </form>
Atribut
Kegunaan Method POST dan GET ini sama yaitu
untuk mengirimkan nilai variabel ke halaman lain atau mengirimkan ke database untuk mengambil nilai variabel dari halaman lain atau mengambil data pada database
Atribut Fungsi
Method Metode pengiriman data ke file tujuan (POST atau GET)
Action Aksi yang akan dilakukan jika user menekan tombol Submit
Name Memberikan Nama tiap masukan
Value Memberikan Nilai suatu masukan
Type Tipe form yang akan digunakan
Post dan Get
Perbedaan Post dan Get
Method POST tidak menampilkan nilai variabel pada URL dan Method GET menampilkan nilai variabel yang dikirimkan.
Method POST lebih aman dan Method GET kurang aman (pada contoh berati password ditampilkan pada URL).
Method POST digunakan untuk mengirimkan data rahasia seperti password, Method GET digunakan untuk mengirimkan/mengambil data publik seperti id_user atau id_halaman.
Method GET dibatasi panjang string hingga 2047 karakter, Method POST tidak.
Perbedaan pengambilan data Method POST menggunakan $_POST sedangkan Method GET menggunakan $_GET.
Method POST biasanya digunakan untuk input dari FORM, Method GET menggunakan input dari LINK atau akses menggunakan link.
Post dan Get
CONTOH Method $_POST
Buatlah file dengan nama index.php
<html> <head><title>Fungsi dan Perbedaan Method POST dan GET pada PHP</title></head><body>Silakan Login dengan Username dan Password Anda<form action="lihat.php" method="POST"><table> <tr> <td>Username</td><td><input type="text" name="username"/></td> </tr><tr><td>Password</td> <td><input type="password" name="password"/></td></tr> <tr> <td></td> <td><input type="submit" value="Login"/></td></tr> </table> </form></body></html>
Post dan Get
Kemudian buatlah file lihat.php untuk menampilkan input pada index.phpdengan code dibawah ini.
<html><head><title>Fungsi dan Perbedaan Method POST dan GET pada PHP</title></head><body>Username : <?php echo $_POST["username"]; ?><br/> TampilanPassword : <?php echo $_POST["password"]; ?></body></html>
Post dan Get
CONTOH Method $_POST
Buatlah file dengan nama index.php
<html> <head><title>Fungsi dan Perbedaan Method POST dan GET pada PHP</title></head><body>Silakan Masukkan Username dan Password Anda<form action="lihat.php" method="GET"><table> <tr> <td>Username</td><td><input type="text" name="username"/></td></tr><tr><td>Password</td><td><input type="password" name="password"/></td></tr><tr><td></td><td><input type="submit" value="Login"/></td></tr></table></form></body></html>
Post dan Get
Kemudian buatlah file lihat.php untuk menampilkan input pada index.phpdengan code dibawah ini.
<html><head><title>Fungsi dan Perbedaan Method POST dan GET pada PHP</title></head><body>Username : <?php echo $_GET["username"]; ?><br/> TampilanPassword : <?php echo $_GET["password"]; ?></body></html>
FormDaftar Input nilai yang dapat digunakan pada attribut type:
Selain tag <input> masih ada tag lain yaitu tag <textarea>
Form
Contoh Input Password
<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> Tampilan :
</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
<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" size="20"></td></tr>
</table> <input type="submit" value="Simpan" name="t1">
<input type="reset" value="Reset" name="t2"> </form>
</body>
Tampilan
Checkbox
Fungsi : Untuk memberi beberapa pilihan kepada user <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>
Tampilan
Radio Button
Fungsi : Untuk memberi (hanya) satu pilihan kepada user <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>
Tampilan
Daftar Drop Down
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>
</form>
Tampilan :
Text Area
Fungsi : Sebagai field masukan untuk pengunjung (dapat menerima
lebih dari satu baris teks). Biasa disebut sebagai kotak
komentar
Tag: <textarea>
Atribut
Atribut Fungsi
Rows Metode pengiriman data ke file tujuan (POST atau GET)
Coloum Aksi yang akan dilakukan jika user menekan tombol Submit
Wrap=["off"]"virtual"[physical"] ValueMemberikan Nilai suatu masukan
Text Area
Contoh
<html> Tampilan :
<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>
Inputan FormContoh
1. <html>
2. <head>
3. <title>Registrasi</title>
4. </head>
5. <body>
6. <h2>Form Registrasi</h2>
7. <form action="" method="POST">
8. <label>Nama: </label>
9.<input type="text" size="30" name="nama"><br>
10. <label>Username: </label>
11. <input type="text" size="16" name="uname" maxlength="16"><br>
Inputan FormContoh
12. <label>Password: </label>
13. <input type="password" size="16" name="pass" maxlength="16"><br>
14. <label>Jenis Kelamin: </label>
15. <input type="radio" name="jk" value="pria" checked><span> Pria</span>
16. <input type="radio"name="jk" value="wanita"><span> Wanita</span><br>
17. <label>Hoby: </label><br>
18. <input type="checkbox" name="hob" value="spkbola"><span> SepakBola</span>
19. <input type="checkbox" name="hob" value="game"><span> Game</span>
20. <input type="checkbox" name="hob" value="tidur"><span>Tidur</span><br>
Inputan FormContoh
21. <label>Deskripsikan diri anda: <label><br>
22. <textarea style="height:100px;width:400px" name="desc"></textarea>
23. <hr><br>
24. <label>Darimana anda mendengar kami?</label><br>
25. <select name="dengar">
26. <option value="kuburan">Dari dalam kubur</option>
27. <option value="google">Google</option>
28. <option value="mimpi">Mimpi</option> </select><br>
29. <input type="submit" value="DAFTAR">
32. <input type="reset" value="RESET">
33. </form> </body> </html>
Inputan Form
Tampilan :
Frame Fungsi : Membagi layar dalam beberapa jendela, dimana masing-masing
layer menampilkan web page yang berbeda
Tag dasar
<frameset> . . . . </frameset> -< f rame/> -<noframes> . . . . </noframes>
Basic Atributes
-cols = “values”…. (value biasanya dituliskan dalam% menunjukkan besar
pembagian area)
-rows = “values” -name = “frame_name” -src= “frame_source(url)” – target
= “frame_name”
Standar penulisan:
<frameset [cols=“%,%” [rows=“%,%”]> . . . </frameset>
.
Inputan Form
Frame Vertikal
Contoh Tampilan :
<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 Tampilan :
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"> Tampilan :
</frameset>
</html>
Frame Vertikal - HorisontalContoh
<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> </frameset> </html>
TUGAS Ke 1Contoh Tampilan
MATERI
WORKSHOP KURSUS LOKAL UTAMA
Adi Introduction to XML Web Programming With ASP 3,23 3,47
Visual basic With Database
Oracle Developer Report
Introduction to Oracle: SQL and PL/SQL
Visual Basic With SQL Server
NAMA IPK
Visual Basic With SQL Server 3,53 3,64
Visual basic With Database 3,66 3,39
Ani
Ali