Belajar Web Design 5

Hy..Guys,,,,apa kabar, kita akan lanjutkan pembahasan html berikutnya kali ini kita akan membahas tentang list, blocks, layout, dan forms

“LIST”

Untuk memasukan list ada dua cara berbeda

1.List Ordered

2.List Unordered

HTML Unordered Lists

Sebuah daftar unordered dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>.

Daftar item ditandai dengan peluru (lingkaran hitam biasanya kecil).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Bagaimana kode HTML di atas terlihat dalam browser seperti dibawah ini:

  • Kopi
  • Susu

HTML Ordered List

Ordered list dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>.

Daftar item ditandai dengan angka.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Bagaimana kode HTML di atas terlihat dalam browser:

  1. Kopi
  2. Susu

 “BLOCKS”

HTML Blok Elements

Sebagian besar elemen HTML didefinisikan sebagai tingkat blok elemen atau sebagai inline elemen.

Blok elemen-elemen tingkat biasanya mulai (dan akhir) dengan baris baru ketika ditampilkan dalam browser.

Contoh: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Elemen inline biasanya ditampilkan tanpa memulai baris baru.

Contoh: <b>, <td>, <a>, <img>

Elemen HTML <div>

Unsur <div> HTML adalah tingkat blok elemen yang dapat digunakan sebagai wadah untuk mengelompokkan elemen HTML lainnya.

Unsur <div> tidak memiliki arti khusus. Kecuali itu, karena merupakan elemen level blok, browser akan menampilkan satu baris sebelum dan setelah itu.

Ketika digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur gaya atribut blok besar konten.

Lain penggunaan umum dari unsur <div>, adalah untuk tata letak dokumen. Ini menggantikan “cara lama” mendefinisikan tata letak menggunakan tabel. Menggunakan tabel bukanlah penggunaan yang benar dari elemen table. Tujuan dari elemen <table> adalah untuk menampilkan data tabular.

HTML <span> Elemen

Elemen HTML <span> merupakan elemen inline yang dapat digunakan sebagai wadah untuk teks.

Elemen <span> tidak memiliki arti khusus.

Ketika digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk mengatur gaya atribut bagian dari teks.

“LAYOUT”

          Layout sangat bermanfaat sekali untuk membuat website kita terlihat bagus dan menarik dengan desain dan tata letak yang mungkin bisa kita atur sedemikian rupa sehingga website idaman kita terwujud.

Pembuatan layout bisa menggunakan tag <div> dan tag <table>, disarankan menggunakan <div>, karena <table> lebih umum digunakan sebagai pembuatan data tabular.

HTML Layouts – Menggunakan Elemen <div>

Elemen div adalah tingkat elemen blok digunakan untuk mengelompokkan elemen HTML.

Contoh berikut ini menggunakan lima elemen div untuk membuat tata letak beberapa kolom, menciptakan hasil yang sama seperti pada contoh sebelumnya:

Contoh

<!DOCTYPE html>
<html>
<body>

<div id=”container” style=”width:500px”>

<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1></div>

<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
Content goes here</div>

<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
Copyright © W3Schools.com</div>

</div>

</body>
</html>

Kode HTML di atas akan menghasilkan hasil sebagai berikut

Main Title of Web Page

MenuHTML

CSS

JavaScript

Content goes here
Copyright © W3Schools.com

 

” FORMS AND INPUT”

 HTML Form digunakan untuk berbagai jenis inputan yang mungkin bisa digunakan pengguna.

Bentuk HTML digunakan untuk melewatkan data ke server.

Form dapat berisi elemen input seperti bidang teks, checkbox, radio-tombol, tombol submit dan banyak lagi. Form A juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label.

Tag <form> digunakan untuk membuat bentuk HTML:

<form>
.
input elements
.
</form>

 

HTML Forms – The Elemen Input

Unsur bentuk yang paling penting adalah elemen input.

Elemen input digunakan untuk memilih informasi pengguna.

Sebuah elemen input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut. Sebuah elemen input dapat dari bidang jenis teks, kotak centang, sandi, tombol radio, tombol submit, dan banyak lagi.

Jenis input yang paling digunakan dijelaskan di bawah ini.

Teks Area

<input type=”text”> mendefinisikan bidang satu baris masukan bahwa seorang pengguna dapat memasukkan teks ke:

<form>
First name: <input type=”text” name=”firstname”><br>
Last name: <input type=”text” name=”lastname”>
</form>

 

Password

<input type=”password”> mendefinisikan password:

<form>
Password: <input type=”password” name=”pwd”></form>

Radio Buttons

<input type=”radio”> mendefinisikan tombol radio. Tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan:

<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>

 

Checkbox

<input type=”checkbox”> mendefinisikan kotak centang. Checkbox membiarkan pengguna pilih NOL atau LEBIH pilihan dari sejumlah pilihan.

<form>
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car
</form>

 

Kirim Tombol

<input type=”submit”> mendefinisikan tombol kirim.

Sebuah tombol submit digunakan untuk mengirim data formulir ke server. Data dikirim ke halaman tertentu dalam atribut action form. File didefinisikan dalam atribut action biasanya melakukan sesuatu dengan input yang diterima:

<form name=”input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user”><input type=”submit” value=”Submit”></form>

 

sumber referencee : www.w3schools.comSekarang ngerti kan..mau tambah ilmu lagi ??

Kunjungi terus blog “Engineering Apllications

 

About priyatna