Adobe Dreamweaver
merupakan program aplikasi keluaran Adobe System yang dulunya dikenal sebagai
Macromedia Dreamweaver keluaran dari Macromedia. Dreamweaver salah satu program
aplikasi untuk membuat, mendesain dan mengedit halaman website. Di dalam
Dreamweaver kita dapat membuat web secara visual maupun kodingan. Dokumen yang
kita bisa edit pada Dreamweaver antara lain: HTML, CSS, ColdFusion, PHP,
JavaScript, XML dan lain-lain.
Gambar diatas merupakan tampilan awal Dreamweaver
Gambar diatas merupakan tampilan ruang kerja Dreamweaver
Pada tampilan ruang kerja kita dapat
melihat beberapa elemen utama, diantaranya sebagai berikut:
- Menu Bar berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver.
- Insert Bar berisi tombol-tombol untuk menyisipkan berbagai macam objek, seperti: image, tabel dan frame, ke dalam dokumen.
- Document Toolbar berisi tombol-tombol menu pop-up yang menyediakan tampilan berbeda Document Window. Misalnya Code, Split, atau Design.
- Properties berfungsi mengubah berbagai properti dari objek dan teks yang sudah dipilih.
- Panel Group merupakan kumpulan panel yang saling berkaitan.
- File Panel berfungsi mengatur file-file dan folder-folder yang membentuk situs web
Pada laporan kali ini saya akan menjelaskan
dari pembuatan form data mahasiswa dengan menggunakan dreamweaver. Berikut
langkah-langkahnya:
- Buka Dreamweaver lalu pilih HTML
- Pilih Design untuk merancang tampilan form yang kita inginkan.
- Kemudian klik Insert -> Form
- Lalu Insert -> Image untuk menyisipkan logo gunadarma dan di samping logo gunadarma ketikan teks “Data MHS”. Pada logo gunadarma klik kanan pilih Align -> Absolute Middle
- Selanjutnya Insert -> Table -> atur kolom dan baris nya -> OK.
Baris 1 -> pada kolom 1 ketik “Nama”, di kolom 2 ketik
titik dua (:), dan kolom 3 pilih Insert -> Form -> Text Field.
Baris 2 -> pada kolom 1 ketik “NPM”, di kolom 2 ketik titik dua (:), dan kolom 3
pilih Insert -> Form -> Text Field.
Baris 3 -> pada kolom 1 ketik “Kelas”, di kolom 2 ketik titik dua (:), dan kolom 3
pilih Insert -> Form -> Text Field.
Baris 4 -> pada kolom 1 ketik “Alamat”, di kolom 2 ketik titik dua (:), dan kolom 3
pilih Insert -> Form -> Textarea.
Baris 5 -> pada kolom 1 ketik “Jkel”, di kolom 2 ketik titik dua (:), dan kolom 3
pilih Insert -> Form -> Radio button -> ketik “Laki-laki” pada label -> OK.
Baris 6 -> pada kolom 3 pilih Insert -> Form -> Radio button -> ketik “Perempuan” pada label -> OK.
Baris 7 -> pada kolom 1 ketik “Agama”, di kolom 2 ketik titik dua (:), dan kolom 3
pilih Insert -> Form -> List/Menu -> OK. Kemudian pada Properties klik
List Values lalu isikan dengan Islam, Kristen Protestan,
Kristen Katolik, Hindu, Budha.
- Lalu Save dengan nama yang kita inginkan dengan extention .HTML
Hasil form data mahasiswa
yang telah dibuat pada tampilan Design
List Coding pada tampilan Code:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Form
Data Mahasiswa</title>
<style
type="text/css">
#form1 h2
marquee {
font-family: Verdana, Geneva, sans-serif;
}
#form1 h2 {
font-family: Verdana, Geneva, sans-serif;
}
#form1 table tr
td {
font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>
<body
background="../../../Pictures/corerdraw/back.jpg"
text="#FF6600">
<form
id="form1" name="form1" method="post"
action="">
<h2><img
src="Untitled-2.png" width="75" height="75"
align="absmiddle" /><marquee>Data
MHS</marquee></h2>
<table width="200"
border="0">
<tr>
<td
width="75">Nama</td>
<td
width="13">:</td>
<td width="90"><label
for="textfield"></label>
<input type="text"
name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>NPM</td>
<td>:</td>
<td><label
for="textfield2"></label>
<input type="text"
name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td><label
for="textfield3"></label>
<input type="text"
name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><label
for="textarea"></label>
<textarea name="textarea"
id="textarea" cols="45"
rows="5"></textarea></td>
</tr>
<tr>
<td>JKel</td>
<td>:</td>
<td><input
type="radio" name="ok" id="radio"
value="radio" />
<label
for="radio">Laki-Laki</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input
type="radio" name="ok" id="radio2"
value="radio2" />
<label
for="radio2">Perempuan</label></td>
</tr>
<tr>
<td
height="24">Agama</td>
<td>:</td>
<td><label
for="select"></label>
<select name="select"
id="select">
<option>Islam</option>
<option>Kristen
Protestan</option>
<option>Kristen
Katolik</option>
<option>Hindu</option>
<option>Budha</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>
Logika:
Dalam
pembuatan form data mahasiswa ini kita menggunakan bahasa HTML, dimana terbagi
mejadi tiga bagian tag pembuka, body/isi, dan tag penutup. Berikut ini adalah
penjelasan dari tag-tag kodingan tersebut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml"> merupakan tag pembuka yang
menyatakan pada browser bahwa dokumen web yang digunakan adalah HTML
<head> merupakan kepala dari dokumen HTML dan ditutup dengan </head>
<title>Form Data Mahasiswa</title> menyatakan judul dari dokumen HTML
yang akan di tampilkan pada title bar atau tab di browser
<style type="text/css"> merupakan style text yang akan di
gunakan dan ditutup dengan tag </style>
#form1 h2 marquee {font-family: Verdana, Geneva,
sans-serif;}
#form1 h2 {font-family: Verdana, Geneva, sans-serif;}
#form1 table tr td {font-family: Verdana, Geneva,
sans-serif;}
<body
background="../../../Pictures/corerdraw/back.jpg"
text="#FF6600"> menyatakan isi dari dokumen HTML dengan gambar latar belakang
dan teks berwarna
<form id="form1" name="form1"
method="post" action=""> menyatakan untuk pembuatan form
<h2> menyatakan heading 2 dan di tutup dengan </h2>
<img src="Untitled-2.png"
width="75" height="75" align="absmiddle" />, image
source menyatakan lokasi penyimpan gambar atau lokasi dimana gambar diambil
dengan panjang dan lebar 75, posisi teks berada di samping gambar dan
tengah-tengah
<marquee>Data MHS</marquee> menyatakan teks “Data MHS” bergerak
dari kanan ke kiri
<table
width="200" border="0"> menyatakan untuk pembuatan tabel
dengan lebar 200 dan border 0
<tr> Table Row mendefinisikan baris pada tabel dan di akhiri
dengan tag </tr>
<td width="75">Nama</td> Table Data, terletak di dalam tag tr,
yang berfungsi untuk memasukkan data-data, dengan lebar 75
<td width="13">:</td> table date dengan lebar 13
<label for="textfield"></label> menyatakan label dari text field
<input type="text" name="textfield"
id="textfield" />
<label for="textarea"></label> menyatakan label dari textarea
<textarea name="textarea" id="textarea"
cols="45" rows="5"></textarea> menyatakan untuk membuat inputan
dengan textarea
<input type="radio" name="ok"
id="radio" value="radio" /> menyatakan untuk inputan dengan radio
button
<label
for="radio">Laki-Laki</label> menyatakan label radio button dengan
teks “Laki=laki”
<label for="select"></label> menyatakan label dari List/Menu
<select name="select"
id="select"></select> menyatakan pembuatan List/Menu
<option>Islam</option> menyatakan pilihan dari List/Menu
</table> menyatakan untuk mengakhiri pembuatan tabel
</form> menyatakan untuk mengakihri form
</body> menyatakan mengakhiri penulisan isi web
</html> merupakan tag penutup untuk mengahiri dokumen HTML 
0 komentar:
Post a Comment