Tugas Design Web

Resume tag-tag, attribute, value dalam HTML

Zulkifli 113140707111022
Teknologi Informasi

11

Berikut ini tag-tag html yang sering digunakan: tag heading <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> tag paragraf <p>This is a paragraph</p> horizontal rule <hr /> comment <!-- This is a comment --> line break <br /> Formatting text with html <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is_subscript and ^superscript</p> Preformatted text <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> Abbreviations dan acronyms <abbr title="United Nations">UN</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> Text direction <bdo dir="rtl"> Here is some Hebrew text </bdo>

Quotations A blockquote quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote> A short quotation: <q>This is a short quotation</q> address <address> Donald Duck<br> BOX 555<br> Disneyland<br> USA </address> Computer output tags <code>Computer code</code> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var> Deleted and inserted text <del>twenty</del> <ins>twelve</ins> (bersifat deprecated) link <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> named anchor <a name="label">Any content</a> <a href="#label">Any content</a> mailto link <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andso meoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invi ted%20to%20a%20big%20summer%20party!">Send mail!</a> image <img src="hackanm.gif" align="bottom" width="48" height="48"> <img src ="hackanm.gif" align ="left" width="48" height="48">

Create an image map <img src="planets.gif" width="145" height="126" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> Turn an image into an image map <p> <a href="tryhtml_ismap.htm"> <img src="planets.gif" ismap width="146" height="126"> </a> </p> tabel <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td>

</tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> definision list <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

Standar Atribut
Tag <button> mendukung standar atribut-atribut berikut :

Atribut accesskey class dir id lang style tabindex title xml:lang

Value character

Keterangan Menspesifikasikan shortcut suatu keyboard untuk mengakses suatu elemen classname Menspesifikasikan suatu "classname" untuk suatu elemen rtl Menspesifikasikan arah (direction) teks isi ltr pada suatu elemen id Menspesifikasikan suatu id unik untuk suatu elemen language_code Menspesifikasikan kode bahasa (language)untuk isi pada suatu elemen style_definition Menspesifikasikan "style" inline untuk suatu elemen number Menspesifikasikan perintah tab dari suatu elemen text Menspesifikasikan informasi tambahan (extra) tentang suatu elemen language_code Menspesifikasikan kode bahasa untuk elemen, pada dokumen-dokumen XHTML

Event Attributes
Tag <button> mendukung atribut-atribut event berikut:

Atribut onblur onclick ondblclick onfocus

Value script script script script

onmousedown script onmousemove script onmouseout script

onmouseover script

Keterangan Script akan dijalankan ketika suatu elemen kehilangan fokus ( loses focus) Script akan dijalankan ketika mouse di-klik Script akan dijalankan ketika mouse di-klik dua kali Script akan dijalankan ketika suatu elemen menjadi fokus Script akan dijalankan ketika tombol mouse button ditekan Script akan dijalankan ketika pointer mouse berpindah/bergerak Script dijalankan ketika pointer mouse bergerak keluar dari suatu elemen Script dijalankan ketika pointer mouse bergerak ke suatu elemen

onmouseup onkeydown onkeypress onkeyup

script script script script

Script dijalankan ketika tombol mouse button direlease Script dijalankan ketika suatu "key" ditekan Script dijalankan ketika suatu "key" ditekan dan di-release Script dijalankan ketika suatu "key" di-release

Contoh Tag Button dengan Tipe "Tombol"

Nah, sekarang dengan mengacu pada tabel di atas mari kita coba praktekan beberapa yang sering digunakan, yang lainnya nanti anda praktekkan sendiri, ya Kita mulai dengan fungsi tag <button> sebagai tombol biasa : !!

- Sintaks Dasar Tag <button>

Sintaks dasar dari suatu tag <button> dalam HTML dituliskan : <button>.....</button> Contoh : <button>klik di sini</button> Hasilnya adalah :

- Mengatur Ukuran dan Jenis Font

Kadangkala kita ingin membuat tombol dengan font tertentu yang kita anggap menarik dan kita ingin juga mengatur jenis dan ukurannya, maka contoh perintahnya menjadi : <button style="font: bold 14px verdana">LANJUTKAN</button> Hasilnya adalah :

- Mengatur Warna Font

Jika warna font pada tombol ingin kita rubah-rubah, maka contoh perintahnya : <button style="font: bold 14px verdana ; color: green">LANJUTKAN</button> Hasilnya adalah :

- Menyisipkan Image Sebagai Tombol

Saya ambil contoh : <button><img src="Handphone.jpg" /></button> Hasilnya adalah : Saya rasa cukup ya contoh untuk yang tipe tombol (button). Sekarang saya akan contohkan yang termasuk tipe submit.

Aturan HTML

HTML tidak case sensitive, sedangkan XHTML sebaliknya Nilai Attribut pada HTML/XHTML bisa case sensitive HTML/XHTML sensitive pada satu karakter spasi Elemen pada HTML/XHTML tag haruslah ditutup dengan close tag (e.g. </p> </div>) kecuali kosong Elemen yang tidak digunakan harus diminimalisir Elemen yang ada pada tag harus nested atau bersarang, seperti ini >> <b><i>nested tags </i></b> Attribute harus berada di dalam ini (quote / tanda petik )

Aturan XHTML

Harus ada <!DOCTYPE> indicator Harus ada <html>, <head>, <body> Pada tag <head>, tag <title> harus di dahulukan Semua attribute HARUS di quote ( ) Semua tags harus bersarang secara benar Semua tags harus ada pembuka dan penutup (<p> </p>) Tags harus ditutup, sehingga tag kososng seperti <hr>, <br> menjadi <hr />, <br /> Semua nama attribute dan tag harus menggunakan huruf kecil.

Aturan pada XHTML lebih strict dari pada HTML, karena itu XHTML lebih menjamin kerapian dan kejelasan struktur dari web page.

HTML TAG explained : more example explained than before

<html> dan </html> membatasi awalan dan akhiran sebuah struktur HTML, layakanya begin-end pada bahasa pemrograman lainnya. <head> dan </head> menandakan Header pada sebuah web page <title> dan <title> menandakan judul dari web page tersebut, dan apa yang keluar pada title bar sebuah browser

<body> dan </body> menandakan bagian badan dari sebuah web page. Berisi tulisan, foto, video dsb <h1> </h1> menandakan Heading/headline, atau awalan dari sebuah tulisan <hr /> pada XHTML membuat sebuah garis mendatar dalam layar. <p> </p> menandakan paragraph <b> </b> bold character