Belajar HTML Cepat Dan Interaktif Bagi Pemula

Mengenal HTML
<html> <head> <title>Judul page</title> </head> <body> Ini adalah homepage Saya yang pertama. <b>Tulisan ini menggunakan bold</b> </body> </html> Hasilnya:
<h5> Ini contoh dari sebuah heading 5</h5> <h6> Ini contoh dari sebuah heading 6</h6> <p>Gunakan tag heading hanya untuk Heading, jangan gunakan untuk membuat tuliasan supaya menjadi besar. Gunakan tag yang lain untuk keperluan itu.</p> </body> </html> Hasilnya
Line breabk
<html> <body> <p>Untuk memotong <br>baris<br>dalam sebuah<br>paragraph<br>gunakan tag br.</p>
Element huruf miring dan tebal

<body> Ini adalah homepage Saya yang pertama. <b><i>Tulisan ini menggunakan bold</b></i> </body> Hasilnya ;
</body> </html> Hasilnya
Membuat Link HTML Membuat link pages
Membuat paragrap
<html> <body> <p>Ini sebuah paragraph baris 1.</p> <p>Ini sebuah paragraph baris 2.</p> <p>Ini sebuah paragraph baris 3.</p> <p>Elemen-elemen Paragraph didefenisikan dengan tag p.</p> </body> </html> Hasilnya
<html> <body> <p> <a href="lastpage.htm"> This text </a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web. </p> </body> </html> Hasilnya
Membuat heading
<html> <body> <h1> Ini contoh dari sebuah heading 1</h1> <h2> Ini contoh dari sebuah heading 2</h2> <h3> Ini contoh dari sebuah heading 3</h3> <h4> Ini contoh dari sebuah heading 4</h4> Membuat Link Image <html>
<body> <p> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="tblNext.bmp" width="65" height="38"></a> </p> </body> </html> Hasilnya
<p>This chapter explains ba bla bla</p> </body> </html> Hasilnya
Membuat sebuah link ke alamat e-mail

<html> <body> <p> This is a mail link: <a href="mailto:Marsudi@smk prambon.com?Subject=Hello again">Send Mail</a> </p> </body> </html> Hasilnya
Membuat sebuah Link pada windows broser baru

<html> <body> <a href="lastpage.htm" target="_blank">Last Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html> Hasilnya
Cara ke 2 membuat link ke alamat e-mail

<html> <body> <p> This is another mailto link: <a href="mailto:marsudi@tedcbandung.com? cc=slamet@yahoo.com& bcc=made@tedcbandung.com& subject=Summer%20Party& body=You%20are%20invited%20to %20a%20big%20summer%20party!">Send mail!</a> </p> <p><b> Note:</b>Spaces between words, should be replaced by%20 (instead of a space). This way the browser will display your text properly in the mail. </p> </body> </html> Hasilnya
Membuat sebuah link pada halaman yang sama.

<html> <body> <p><a href="#C4">See also Chapter 4.</a></p> <p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <a name="C4"><h2>Chapter 4</h2></a> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2>
Bingkai ( Frame ) HTML.

Mengatur Frame Vertikal
<html> <frameset cols="25%,50%,25%"> <frame src="tryhtml_frame_a.htm"> <frame src="tryhtml_frame_b.htm"> <frame src="tryhtml_frame_c.htm"> </frameset> </html> Hasilnya
1. Frameset Campuran (Mixed).

<html> <frameset rows="50%,50%"> <frame src="tryhtml_frame_a.htm"> <frameset cols="25%,75%"> <frame src="tryhtml_frame_b.htm"> <frame src="tryhtml_frame_c.htm"> </frameset> </frameset> </html> Hasilnya
Mengatur Frame Horizontal

<html> <frameset rows="25%,50%,25%"> <frame src="tryhtml_frame_a.htm"> <frame src="tryhtml_frame_b.htm"> <frame src="tryhtml_frame_c.htm"> </frameset> </html>
2. Frame Navigasi (Navigation Frame).

<html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="tryhtml_frame_a.htm" name="showframe"> </frameset> </html> Hasilnya
Hasilnya
Berikut ini adalah isi dari file tryhtml_contents.htm <html> <body>
Frame
<html> <frameset cols="25%,75%"> <frame src="tryhtml_frame_a.htm"> <frame src="tryhtml_frame_b.htm"> </frameset> </html> Hasilnya
<a href ="tryhtml_frame_a.htm" target ="showframe">Frame a</a><br> <a href ="tryhtml_frame_b.htm" target ="showframe">Frame b</a><br> <a href ="tryhtml_frame_c.htm" target ="showframe">Frame c</a> </body> </html>
</tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td></tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td></tr> <tr> <td>400</td> <td>500</td> <td>600</td></tr> </table> </body> </html> Hasilnya :
3. Sisipan dalam Frame (Inline frame).

<html> <body> <iframe src ="index.htm"> </iframe> <p>Some older browsers don't support iframes.<p> <p>If they don't, the iframe will not be visible.</p> </body> </html>
4. Melompat ke lokasi spesifik dengan sebuah frame.

<html> <frameset cols="20%,80%"> <frame src="tryhtml_frame_a.htm"> <frame src="link.htm#C10"> </frameset> </html> Hasilnya :
1. Tanda pembatas dalam Tabel (border)

<html> <body> <h4>With a normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td></tr> </table> <h4>With a thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr> </table> <h4>With a very thick border:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html>
Membuat tabel dengan HTML

Dengan HTML Anda dapat membuat tabel.
<html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td>
Hasilnya :
2. Tabel tanpa pembatas (border)
<html> <body> <h4>Tabel ini tidak mempunyai border:</h4> <table> <tr><td>100</td><td>200</td><td>300</td></tr> <tr><td>400</td><td>500</td><td>600</td></tr> </table> <h4>Tabel ini tidak mempunyai border, karena nilai atribut= 0 </h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td></tr> <tr> <td>400</td> <td>500</td> <td>600</td></tr> </table> </body> </html>
<body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td></tr> <tr> <td></td> <td>Some text</td></tr> </table> <p> Seperti yang Anda lihat salah satu Cell tidak punya border. Itu
disebabkan oleh karena isinya kosong. Coba masukkan sebuah space kedalam Cell. Apakah tetap tidak tanpa border ? </p> <p> Trick untuk memasukkan sebuah nobreaking space (" ") kedalam cell. No-breaking space adalah sebuah karakter entity. Bila Anda tidak mengetahui apa yang dimaksud dengan karakter entity, baca penjelasan sebelumnya.
</p> </body> </html>
Hasilnya :
3. Heading didalam sebuah Tabel.

<html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th></tr> <tr><td>Binsar Siagian</td> <td>6554486</td></tr> </table>
4. Tabel dengan menggunakan Caption.

<th>Telephone</th> <td>6652326</td> <html> <body> <h4> Tabel ini memiliki sebuah Caption, dan border yang tebal: </h4> <table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td></tr> <tr> <td>400</td> <td>500</td> <td>600</td></tr> </table> </body> </html>
<h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Binsar Siagian</td></tr> <tr> <th>Telephone:</th> <td>6652326</td> </tr> <tr> <th>Telephone:</th> <td>6654486</td> </tr> </table> </body> </html>
Hasilnya :
Hasilnya :
4. Tabel kosong.
<html>
5. Tabel dengan rentangan beberapa kolom/baris per Cell.

<html> <body> <h4>Cell dengan rentang dua kolom:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr><td>Binsar Siagian</td><td>6652326</td><td>6554486</td> </tr> </table> <h4>Cell dengan rentang dua baris:</h4> <table border="1"> <tr><th>First Name:</th><td>Binsar Siagian</td></tr> <tr><th rowspan="2">Telephone:</th><td>6652326</td></tr> <tr><td>6554486</td></tr> </table> </body> </html>
7. Menggunakan cell padding didalam sebuah Tabel.

<html> <body> <h4>Tanpa cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr> </table> <h4>Menggunakan cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html>
Hasilnya :
Hasilnya : 6. Tag didalam sebuah Tabel.

<html> <body> <table border="1"> <tr> <td><p>Ini sebuah paragraph !</p><p>Ini paragraph yang berikutnya</p></td> <td>Cell ini memiliki sebuah tabel:
<table border="1"> <tr><td>A</td><td>B</td></tr> <tr><td>C</td><td>D</td></tr> </table> </td>

</tr> <tr> <td>Cell ini memiliki sebuah list (daftar): <ul> <li>Appel</li><li>Pisang</li><li>Pepaya</li> </ul>
8. Menggunakan Cell spacing didalam sebuah Tabel.

<html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr> </table> <h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr> </table>
</td> <td> </td> </tr> </table> </body> </html>
Hasilnya :
</body> </html>
Hasilnya :
11. Meluruskan isi (content ) dalam sebuah cell tabel. 9. Menambahkan background color atau background image kedalam sebuah Tabel.
<html> <body> <h4>A background color:</h4> <table border="1" bgcolor="red"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>A background image:</h4> <table border="1" background="background.jpg"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> </body> </html> <html> <body> <table width="400" border="1"> <tr> <th align="left">Tabungan bulan....</th> <th align="right">Januari</th> <th align="right">Februari</th> </tr> <tr> <td align="left">Pakaian</td> <td align="right">Rp. 25.000,-</td> <td align="right">Rp. 17.500,-</td> </tr> <tr> <td align="left">Make-Up</td> <td align="right">Rp. 4.500,-</td> <td align="right">Rp. 8.250,-</td> </tr> <tr> <td align="left">Jajanan</td> <td align="right">Rp. 7.500,-</td> <td align="right">Rp. 2.500,-</td> </tr> <tr> <th align="left">Jumlah</th> <th align="right">Rp. 37.000,-</th> <th align="right">Rp. 28.250,-</th> </tr> </table> </body> </html>
Hasilnya :
Hasilnya : 10. Menambahkan background color atau background image kedalam sebuah Cell tabel.
<html> <body> <h4>Cell backgrounds:</h4> <table border="1"> <tr><td bgcolor="red">First</td><td>Row</td></tr> <tr> <td background="background.jpg">Second</td><td>Row</td> </tr> </table> </body> </html>
12. Mengaktifkan beberapa atribut untuk bingkai (frame).

<html> <body> <p>
Hasilnya :
Bila tidak ada frame diseputar tabel pada contoh ini, berarti browser Anda sudah tertinggal (versi lama tidak mendukung fungsi ini). </p> <h4>With frame="border":</h4> <table frame="border"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="box":</h4> <table frame="box"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="void":</h4> <table frame="void"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="above":</h4> <table frame="above"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="below":</h4> <table frame="below"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="hsides":</h4> <table frame="hsides"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="vsides":</h4> <table frame="vsides"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="lhs":</h4> <table frame="lhs"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <h4>With frame="rhs":</h4> <table frame="rhs"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> </body> </html> Hasilnya :
HTML Lists
Dukungan HTML untuk defenition lists 1. Unordered list
<html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
ordered, undordered dan
Hasilnya :
2. Ordered list
<html> <body> <h4>Numbered list:</h4>
<ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li>
HTML Forms and Input

1.Field Input untuk text
<html> <body> <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html>
<li>Oranges</li> </ol>
<ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Roman numbers list:</h4>
<h4>Lowercase Roman numbers list:</h4> <ol type="i">
<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>
Hasilnya :
</ol> </body> </html>
Hasilnya :
2. Field Input untuk Password.

<html> <body> <form> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> <p> Catatan: Bila anda mengisi pada filed password, angka yang ditampilkan berubah menjadi tanda bintang, untuk melindungi tulisan dari pembacaan orang lain ! </p> </body> </html>
3. Definition Lists
</html> <body> <h4> Contoh Definition Lists </h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html>
Hasilnya :
Hasilnya : 9
B. Tindakan untuk atribut Form dan Tombol Kirim.

<html> <body> <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
3. Field Input untuk Radio Buttons.

<html> <body> <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> </body> </html>
</body> </html>
Hasilnya :
Hasilnya : Radio Button

<html> <body> <form> Male: <input type="radio" checked name="Sex"> <br> Female: <input type="radio" name="Sex"> </form>
4. Field Input untuk Checkboxes.

<html> <body> <form> <input type="checkbox" name="bike" value="yes">I have a bike<br> <input type="checkbox" name="car" value="yes">I have a car </form> </body> </html>
<p> Bila pemakai memilih click pada radio-button, maka button menjadi terpilih dengan tanda lingkaran hitam ditengahnya, dan button yang lain akan berubah menjadi tidak terpilih. </p> </body> </html>
Hasilnya :
Hasilnya :
Drop down box sederhana

<html> <body>
10
</p>
<form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> <p> Klick tanda segitiga pilihan dan sorot salah satu pilihan, ketika mouse dilepas maka yang terpilih tampil pada text field. </p> </body> </html>
<textarea rows="10" cols="30"> Saya sedang melakukan ujicoba penulisan pada text Area. </textarea> </body>
</html>
Hasilnya :
Hasilnya :
Membuat Button <html> <body> <form> <input type="button" value="Hello world!"> </form>
Drop down box dalam bentuk lain

<html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat" selected>Fiat <option value="audi">Audi </select> </form> </body> </html>
</body> </html>
Hasilnya :
Membuat Fieldset diseputar data

<html> <body> <fieldset> <legend> Informasi Kesehatan: </legend> <form> Tinggi badan <input type="text" size="3"> Berat badan <input type="text" size="3"> </form> </fieldset> </body> </html> Hasilnya :
Membuat Textarea
<html> <body> <p> Contoh ini dapat di edit seperti editor biasa. Silahkan
tulis apa saja didalamnya!
11
<input type="text" name="comment" value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>
Hasilnya :
Membuat Form input dengan tombol kirim

<html> <body> <form name="input" method="get"> action="html_form_action.asp"
Enter your first name: <input type="text" name="FirstName" value="Mickey"> <br>Enter your last name: <input type="text" name="LastName" value="Mouse"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html>
Tag untuk Form:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard Start Tag <form> <input> <textarea> <label> <fieldset> <legend> <select> NN IE W3C Purpose 3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 4.0 4.0 4.0 4.0 4.0 4.0 3.0 3.0 3.2 4.0 4.0 4.0 Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead
Hasilnya :
<optgroup> 6.0 <option> <button> <isindex>
3.0 3.0 3.2
Tag untuk List:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
NN IE
W3C Purpose Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description Deprecated. Use <ul> instead
Mengirimkan E-mail lewat Form input dengan tombol kirim

<html>
<body> <form action="MAILTO:Marsudi@tedcbandung.com" method="post" enctype="text/plain"> <h3>Mail ini akan dikirim ke TEDC Bandung</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail" value="yourmail" size="25"> <br> Comment:<br>
<ol> <ul> <li> <dl> <dt> <dd> <dir>
3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2
12
<menu>
Deprecated. Use <ul> instead
Table Tags:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag <table> <th> <tr> <td> <caption> <colgroup>
NN IE
W3C Purpose Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table header that will not scroll Defines a table body that scrolls within a fixed table header and table footer Defines a table footer that will not scroll
3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 3.0 3.0 3.2 3.0 4.0
<col>
3.0 4.0
<thead>
4.0 4.0
<tbody>
4.0 4.0
<tfoot>
4.0 4.0
Tag frame
Start Tag <frameset> <frame> <noframes> <iframe> NN 3.0 3.0 3.0 6.0 IE 3. 0 3. 0 3. 0 3. 0 W3C 4.0 4.0 4.0 4.0 Purpose Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)
Tag Link dan target:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard Start Tag <a> NN 3.0 IE 3.0 W3C 3.2 Purpose Loads the new document in a new blank window Loads the new document in the same window as the anchor (default) Loads the new document in the parent frame (when using frames) Loads the new document in the entire browser window (nice way to break out of frames) Purpose Defines an anchor
Target Attributes target="_blank" target="_self"
target="_parent" target="_top"
13

Belajar HTML Cepat Dan Interaktif Bagi Pemula

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajar HTML Cepat Dan Interaktif Bagi Pemula

Diunggah oleh

Hak Cipta:

Format Tersedia

Mengenal HTML

Element huruf miring dan tebal

</body> </html> Hasilnya

Membuat Link HTML Membuat link pages

<p>This chapter explains ba bla bla</p> </body> </html> Hasilnya

Membuat sebuah link ke alamat e-mail

Membuat sebuah Link pada windows broser baru

Cara ke 2 membuat link ke alamat e-mail

Membuat sebuah link pada halaman yang sama.

Bingkai ( Frame ) HTML.

1. Frameset Campuran (Mixed).

Mengatur Frame Horizontal

2. Frame Navigasi (Navigation Frame).

Berikut ini adalah isi dari file tryhtml_contents.htm <html> <body>

3. Sisipan dalam Frame (Inline frame).

4. Melompat ke lokasi spesifik dengan sebuah frame.

1. Tanda pembatas dalam Tabel (border)

Membuat tabel dengan HTML

2. Tabel tanpa pembatas (border)

3. Heading didalam sebuah Tabel.

4. Tabel dengan menggunakan Caption.

5. Tabel dengan rentangan beberapa kolom/baris per Cell.

7. Menggunakan cell padding didalam sebuah Tabel.

Hasilnya : 6. Tag didalam sebuah Tabel.

<table border="1"> <tr><td>A</td><td>B</td></tr> <tr><td>C</td><td>D</td></tr> </table> </td>

8. Menggunakan Cell spacing didalam sebuah Tabel.

</td> <td> </td> </tr> </table> </body> </html>

12. Mengaktifkan beberapa atribut untuk bingkai (frame).

ordered, undordered dan

HTML Forms and Input

<h4>Roman numbers list:</h4>

<h4>Lowercase Roman numbers list:</h4> <ol type="i">

<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>

</ol> </body> </html>

2. Field Input untuk Password.

B. Tindakan untuk atribut Form dan Tombol Kirim.

3. Field Input untuk Radio Buttons.

Hasilnya : Radio Button

4. Field Input untuk Checkboxes.

Drop down box sederhana

Drop down box dalam bentuk lain

Membuat Fieldset diseputar data

tulis apa saja didalamnya!

Membuat Form input dengan tombol kirim

Tag untuk Form:

<optgroup> 6.0 <option> <button> <isindex>

3.0 3.0 3.2

Tag untuk List:

Mengirimkan E-mail lewat Form input dengan tombol kirim

<ol> <ul> <li> <dl> <dt> <dd> <dir>

Deprecated. Use <ul> instead

Start Tag <table> <th> <tr> <td> <caption> <colgroup>

Tag Link dan target:

Target Attributes target="_blank" target="_self"

Anda mungkin juga menyukai