Contoh HTML Intermediate
1. Tables
Dalam HTML kita dapat membuat tabel di halaman web kita. Ada beberapa tag yang digunakan yaitu <table border = "1"> berfungsi untuk memberikan garis. kemudian <tr> digunakan untuk mengisi baris pada tabel, <td> untuk menunjukan isi data.
dan ini hasilnya :
2.Unordered List dan Ordered List
Unordered list merupakan teknik membuat list atau point-point seperti bullet dalam bentuk dot. sedangkan ordered list merupakan teknik membuat list atau point dalam bentuk angka.
dan ini hasilnya :
3. Definition List
Dalam definition List digunakan <dl> dan </dl> , <dt></dt> digunakan untuk mengisi list , <dd> dan </dd> digunakan untuk penjelasan dari isi list.
dan ini hasilnya :
4. Layout
Layout digunakan untuk menyimpan konten dalam web. ada beberapa elemen yang digunakan untuk membuat web . Sebagai berikut.
dan ini hasilnya :
5. Form
Form digunakan untuk menginput data pada web.
Untuk menginuput username :
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Untuk menginput nama
<form>
First name: <input type="text" name="firstname"><br>
Last name : <input type="text" name="lastname">
</form>
Untuk memilih suatu pilihan dalam kotak
<form>
<input type="checkbox" name="vehicle" value="Bike">Male<br>
<input type="checkbox" name="vehicle" value="Car">Female
</form>
dan ini hasilnya :
6.Iframe
Iframe dalam HTML digunakan untuk memasukan halaman web dalam web.
element yang digunanakan
<iframe src="http://www.dickypratama-bmpnjbatch2.blogspot.com"></iframe>
<a href="http://www.dickypratama-bmpnjbatch2.blogspot.com">Klik Disini</a>
dan ini hasilnya
Kemudian semua tag yang telah dicoba tadi kita gabungkan
<!DOCTYPE html>
<html>
<body>
<table width="1500" border="0">
<tr>
<td colspan="2" style="background-color:#556B2F;">
<h1><center>F-Style Shop</center></h1>
</td>
</tr>
<tr>
<td style="background-color:#8FBC8B;width:100px;text-align:top;">
<b>Menu</b><br>
Shop<br>
Fashion<br>
About
</td>
<td style="background-color:#FFFFF0;height:200px;width:400px;text-align:top;">
<table border="1">
<p> <b> Daftar Pakaian dan Harga </b> </p>
<tr>
<th> Pakaian</th>
<th> Harga</th>
</tr>
<td> Baju Lengan Panjang</td>
<td> Rp.99.000</td>
</tr>
<tr>
<td> Baju Lengan Pendek </td>
<td> Rp.75.000</td>
</tr>
<tr>
<td> Celana Jeans Panjang</td>
<td> Rp.200.000</td>
</tr>
<tr>
<td> Celana Jeans Pendek</td>
<td> Rp.150.000</td>
</tr>
</table>
<ul>
<li>Baju</li>
<li>Celana</li></ul>
<dl>
<dt>Baju</dt>
<dd>-Baju Panjang</dd>
<dt>Celana</dt>
<dd>-Celana Panjang</dd>
</dl>
<form>
First name: <input type="text" name="firstname"><br>
Last name : <input type="text" name="lastname">
</form>
<form>
<input type="checkbox" name="vehicle" value="Bike">Male<br>
<input type="checkbox" name="vehicle" value="Car">Female
</form>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#556B2F;text-align:center;">
Copyright © Dicky Putra Pratama </td>
</tr>
</table>
</body>
</html>
<iframe src="http://www.dickypratama-bmpnjbatch2.blogspot.com"></iframe>
<a href="http://www.dickypratama-bmpnjbatch2.blogspot.com">Klik Disini</a>
dan ini hasilnya
Semoga bermanfaat:)
0 komentar:
Posting Komentar