Contoh HTML Intermediate
CONTOH MEMBUAT
HTML INTERMEDIATE
Hai
sebelumnya saya telah memposting tentang HTML, kali ini saya masih membahas
tentang konsep HTML Intermediate. Disini saya akan mencoba membuat contoh dari
beberapa konsepnya seperti Table, List, Layout, Form &Input, juga iFrame. Yuk
sambil belajar mempraktikkannya :)
1) Table
Tabel
terdiri dari baris dan kolom, untuk membuat baris dalam tabel menggunakan
element <tr> yang berarti table rows dan untuk membuat kolom dalam tabel
menggunakan element <td> yang berarti table data. Untuk membentuk garis dalam
tabel digunakan element <table border = "1">. kemudian tag
<tr> untuk membuat satu baris dan baris tersebut diisi oleh cell dengan
tag <td>row ,cell </td>. Seperti contoh pada baris &kolom pertama
<td>Buah</td> dan untuk baris pertama kolom kedua tertulis
<td>Apel</td> dan begitu seterusnya.
Tampilan pada Notepad++
Tampilan pada Halaman Web
2. Table
Headers
Table
Heading sebenarnya sama seperti table diatas, perbedaannya hanya diberi heading
pada baris pertama sebagai judul agar tampil dengan tulisan bold. Cara membuat
heading pada tabel adalah dengan menggunakan tag <th> dan tag
</th>. Berikut contohnya :
Tampilan pada Notepad++
Tampilan pada Halaman Web
3. Unordered
List
Unordered
list adalah pembuatan list menggunakan dot. Untuk membuat unordered list pada
list yaitu menggunakan tag <ul> dan diakhiri dengan </ul>, lalu untuk
mengisi tulisan pada list menggunakan tag <li> dan diakhiri dengan
</li>. Seperti contoh <ul> <li>Coffee</li> </ul>.
Berikut contohnya :
Tampilan pada Notepad++
Tampilan pada Halaman Web
4. Ordered
List
Ordered
list adalah list yang berurutan dengan menggunakan angka. Untuk membuat ordered
list digunakan tag <ol> dan </ol> serta isi dari list nya adalah tag
<li> dan </li>. Berikut contohnya :
Tampilan pada Notepad++
Tampilan pada Halaman Web
5. Definition
List
Definition
list sama dengan list di atas hanya saja pada setiap list ada penjelasannya.
Untuk membuat definition list digunakan tag <dl> dan </dl>. Untuk mengisi
listnya menggunakan tag <dt> dan </dt> dan untuk penjelasan list
menggunaan tag <dd> dan </dd>. Berikut contohnya :
Tampilan pada Notepad++
Tampilan pada Halaman Web
6. Layout
Layout digunakan
untuk menaruh konten di web dan dapat juga mengatur warna untuk web. Untuk
membuat layout dari html caranya adalah menggunakan gabungan dari beberapa
element seperti tag <body> dan </body>, tag <div>
</div> untuk menaruh isi dari web dan lainnya. Berikut contohnya :
Tampilan pada Notepad++
Tampilan pada Halaman Web
7. Forms dan
Input
Forms
pada HTML digunakan untuk menginput atau memasukkan data diri pada web.
Biasanya form digunakan pada saat sign up/log in atau mengisi formulir untuk
mengakses halaman web. Pembuat form pada web menggunakan elemen <form>
dan diakhiri dengan </form>.
- Untuk memberikan form pengisian nama menggunakan tag <input type = “text” name = “first/ last name”>.
- Untuk mengisi password menggunakan tag <input type = "password" name = "pwd">
- Untuk memilih suatu pilihan kita dapat menggunakan tag <input type = "radio" name = "sex" value = "male/female">
- Untuk memilih menggunakan check box kita dapat menggunakan dengan tag <input type = "checkbox" name = "vehicle" value = "I have a car/ bike">
- Untuk menginput data membutuhkan username dan tombol submit. Form username dibuat dengan menggunakan tag <input type = “text” name = “user”> dan untuk menginput hasil form maka menggunakan tombol submit <input type = “submit” value = “Submit”>
Tampilan pada Notepad++
Tampilan pada Halaman Web
8. Iframe
Iframe digunakan untuk
menampilkan halaman web pada sebuah halaman web dalam bentuk frame yang
berbeda-beda. Untuk membuat iframe menggunakan elemen http://URL. URL/web page
yang akan dimasukkan harus satu folder dengan folder html iframe tersebut. Berikut
contohnya :
Tampilan pada Notepad++
Tampilan pada Halaman Web
9. Entities
Entities
digunakan untuk menampilkan lambang atau simbol yang ada pada HTML. Contohnya :
< untuk simbol <, < untuk simbol <, > untuk simbol
>, ¢ untuk simbol ¢, © untuk simbol ©.
Tampilan pada Notepad++
Tampilan pada Halaman Web
Sekian Percobaan membuat
HTML kali ini, semoga dapat bermanfaat. Terimakasih sudah berkunjung :)
About the Author
0 komentar