- pembuatan grub data
<!DOCTYPE html> = Mendefinisikan komentar.
<html>
<body> = Mendefinisikan body dokumen.
<h2>Grouping Form
Data with Fieldset</h2> = Mendefinisikan heading atau judul.
<p>pengelompokan
data.</p> = Mendefinisikan sebuah paragraf.
<form
action="/action_page.php">
<fieldset> = Sebauh Grup untuk pengelompokan dalam
form
<legend>Personal
information:</legend> = Mendefinisikan sebuah caption dari sebuah
<fieldset> element
First name:<br>
<input type="text"
name="firstname" value="Mickey">
<br> = Mendefinisikan satu baris tunggal
atau sama dengan fungsi enter
Last name:<br>
<input type="text"
name="lastname" value="Mouse">
<br>= Mendefinisikan satu baris tunggal
atau sama dengan fungsi enter
Select Your Car:<br>
<select name="cars">
<option
value="volvo">Volvo</option> = Mendefinisikan sebuah option dari
sebuah daftar drop-down
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
<br><br>
<input type="submit"
value="Submit">
</fieldset> = Sebauh Grup untuk pengelompokan dalam
form
</form>
</body> = Mendefinisikan body dokumen.
</html>
</body>
</html>
- . Mendesain Halaman Web Sederhana
<!DOCTYPE html> = Mendefinisikan komentar.
<html>
<head> = Mendefinisikan
informasi tentang dokumen
<style> = Mendefinisikan
informasi tentang dokumen
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.flex-container > * {
padding: 10px;
flex: 1 100%;
}
.main { = Menentukan
konten utama dari dokumen
text-align: left;
background: cornflowerblue;
}
.header {background:
coral;} = Mendefinisikan
sebuah header untuk dokumen atau bagian dokumen
.footer {background: lightgreen;} = Mendefinisikan
sebuah footer dari sebuah dokumen atau section
.aside1 {background:
moccasin;} = Mendefinisikan selain dari konten halaman
.aside2 {background:
violet;} = Mendefinisikan
selain dari konten halaman
@media all and (min-width:
768px) {
.aside { flex: 1 auto; }
.main
{ flex: 3 0px; }
.aside1 { order: 1; }
.main
{ order: 2; }
.aside2 { order: 3; }
.footer
{ order: 4; }
}
</style> = Mendefinisikan
informasi tentang dokumen
</head> <head>
= Mendefinisikan
informasi tentang dokumen
<body> = Mendefinisikan body dokumen.
<div
class="flex-container"> = Mendefinisikan sebuah bagian dalam sebuah dokumen
<header
class="header">Header</header>
<aside class="aside
aside1">Aside 1</aside>
<article class="main">
<p>ini bagian content</p>
</article>
<aside class="aside
aside2">Aside 2</aside>
<footer
class="footer">Footer</footer>
</div>
</body> = Mendefinisikan body dokumen.
</html>
- Tampilan Form Input Data
<head>
<title>TUGAS 2</title>
</head>
<style>
.box{
width:500px;
height:500px;
background:white;
display:
inline-block;
margin-left:
10px;
}
</style>
</head>
<body>
<div class="box">
<fieldset>
<legend>fValidator</legend>
<table
border=0>
<tr>
<td>ID</td>
<td>:</td>
<td><input type=text name=ID></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password"
name="psw"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input type="password"
name="psw"></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input type=text name=Name></td>
</tr>
<tr>
<td>Sex</td>
<td>:</td>
<td>
<input type="radio" name="gender"
value="male" checked> Male
<input type="radio" name="gender"
value="female"> Female<br>
</tr>
<tr>
<td>Birthday</td>
<td>:</td>
<td><input type=text class="input-tanggal"></td>
</tr>
<tr>
<td>Phone</td>
<td>:</td>
<td><input type=text name=Phone></td>
</tr>
<tr>
<td>Phone 2</td>
<td>:</td>
<td><input type=text name=Phone2></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=”email” name=email ></td>
</tr>
<tr>
<td>URL</td>
<td>:</td>
<td><input type=url name=URL></td>
</tr>
<tr>
<td>State</td>
<td>:</td>
<td>
<select name='State' size='1' >
<option
value="null">--- Select One ---
<option>Kawin
<option>Belum
Kawin
</select>
</td>
</tr>
<tr>
<td>Real (float)</td>
<td>:</td>
<td><input type="Text"></td>
</tr>
<tr>
<td><center><input
type="submit" name="submit" value="Submit"
style="width:80;height:30">
<input type="reset"
name="reset" value="Reset"
style="width:80;height:30"></td></tr>
</aside> </table>
</fieldset></div>
<div class="box">
<form name="output.php"
method="post">
<fieldset>
<legend>The Combo: iMask &
fValidator</legend>
<table
border=0>
<tr>
<td>ID</td>
<td>:</td>
<td><input type=text name=ID></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password"
name="psw"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input type="password"
name="psw"></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input type=text name=Name></td>
</tr>
<tr>
<td>Sex</td>
<td>:</td>
<td>
<input type="radio" name="gender"
value="male" checked> Male
<input type="radio" name="gender"
value="female"> Female<br>
</tr>
<tr>
<td>Birthday</td>
<td>:</td>
<td><input type=date name=Bday></td>
</tr>
<tr>
<td>Phone</td>
<td>:</td>
<td><input type=text name=Phone></td>
</tr>
<tr>
<td>Phone 2</td>
<td>:</td>
<td><input type=”tel></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=email name=Email></td>
</tr>
<tr>
<td>URL</td>
<td>:</td>
<td><input type=url name=URL></td>
</tr>
<tr>
<td>State</td>
<td>:</td>
<td>
<select name='State' size='1'>
<option
value='null' selected='selected'>--- Select One ---
<option
>Kawin
<option
>Belum Kawin
</select>
</td>
</tr>
<tr>
<td>Real (float)</td>
<td>:</td>
<td><input type="Text"></td>
</tr>
<tr>
</article>
</aside>
<tr>
<td><center><input type="submit"
name="submit" value="Submit"
style="width:80;height:30">
<input type="reset"
name="reset" value="Reset"
style="width:80;height:30"></td></tr>
</article> </table> </fieldset>
</tr>
</div>
</body>
</html
Tanda <> : Diartikan sebagai “Tag”.
<html> : Sebagai tanda awal dari HTML.
<head> : yang memuat <title> merupakan judul
dari halaman web yang kita buat.
<style> : di
tulis dalam bagian dari <head>, digunakan untuk mengaplikasikan style atau
kode CSS kedalam
HTML yang berisi atribut css yang ingin kita gunakan.
<Box> : adalah bahasa cpp untuk menanbahkan box/ kotak
kedalam halaman web yang kita buat.
</html> :
akhir dari HTML
<body> : Didalam tag ini diletakkan semua isi dari halaman yang ingin
kita buat didalam
html
</body> :
akhir/penutup dari “body” .
<div> : digunakan untuk menempatkan beberapa elemen
menjadi satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi
style dengan CSS dan perlakuan khusus lainnya yang kemudian dapat diberi
atribut class
<fieldset> : berfungsi untuk mengelompokkan objek yang ingin kita
satatukan dalam satu kelompok
<legend> : berfungsi untuk menampilkan judul dari
kelompok objek form tersebut
<table>
: untuk measukkan table kedalam web yang kita buat
<tr>
: atau table row, digunakan untuk
mendefiniskan baris pada tabel
<td>
: atau table
data, digunakan untuk membuat isi baris
<input>
: digunakan untuk memasukkan karakter
seperti “text”, “email”, “URL” dan lain – lain.
a.
<input type=text> : digunakan untuk memasukkan teks, angka dan
karakter lain.
b.
<input type=password> : digunakan untuk menampilkan karakter
password yang kita masukkan
c.
<input type=radio> : digunakan untuk memilih salah satu pilihan
yang ada.
d.
<input type=email> : digunkan untuk memasukkan alamat email kita.
e.
<input type=url> : digunakan untuk mengisi alamat web.
f.
<input type=date> : digunakan untuk mesukkan tanggal.
g.
<input type = submit> Jika mengklik tombol “submit” maka akan
megirim hasil yang sudah kita isi.
h.
<input type=submit> : Jika mengklik tombol
“submit” maka akan megirim hasil yang sudah kita isi.
i.
<input type=reset> : menghapus seluruh isi dari data yang diisi
<select>
: di gunakan untuk
memilih salah satu isi yang tersedia pada tag tersebut.
<aption>
: merupakan isi
dari “<select>”
Tidak ada komentar:
Posting Komentar