1. Pengelompokan
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>
2. Mendesain 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>
<html>
<head>
<title>TUGAS
2</title>
<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
value="kawin" >Kawin
<option
value="Belumkawin">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
value="kawin" >Kawin
<option
value="Belumkawin">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