ali_akbar.staff.gunadarma.ac.idali_akbar.staff.gunadarma.ac.id/.../55730/materi+html.docx · web...
TRANSCRIPT
Materi HTML
TAGTAG adalah sebuh kode atau tanda yang mengandung arti tertentu. TAG, anda gunakan untuk membuat struktur dokumen HTML (Seperti: Text, List, Image, Link, Form, Table). Jadi, ketika anda ingin membuat table, anda membutuhkan TAG untuk table. Atau anda ingin membuat image, anda harus menggunakan TAG untuk image. Jadi, tiap TAG memiliki arti yang khusus. Bentuk TAGPerhatikan contoh berikut ini:
<p>Hello, World!</p> p adalah sebuah tag yang digunakan untuk membuat paragraf. TAG, memiliki istilah, yaitu: TAG pembuka dan TAG penutup. Pada contoh diatas, yang dimaksud dengan TAG penbuka untuk paragraf adalah <p>, sedangkan yang dimaksud dengan TAG penutup untuk paragraf adalah </p>. Berikut ini adalah bentuk umum untuk TAG pembuka:
<namatag> Berikut ini adalah bentuk umum untuk TAG penutup:
</namatag> Sesuatu yang berada diantara TAG pembuka dan TAG penutup disebut Content, maka pada contoh diatas, text Hello, World! merupakan content dari TAG p. TAG PenutupTAG pembuka dan TAG penutup melingkupi content. Tiap TAG yang memiliki content, pasti memiliki TAG penutup. Tapi, tidak semua TAG HTML memiliki content. Contoh TAG yang tidak memiliki content contohnya adalah TAG img. Tag img digunakan untuk membuat image. Karena TAG img tidak memiliki content, maka, tidak ada keharusan untuk membuat TAG penutupnya. Sehingga, anda bisa membuat TAG pembukanya saja, seperti terlihat pada contoh berikut ini:
<img> Tapi, ada cara yang disarankan untuk membuat TAG yang tidak ada TAG penutupnya (Walaupun hasilnya tidak berbeda alias sama saja), seperti terlihat pada contoh berikut ini:
<img /> Berikut ini adalah bentuk umum yang disarankan untuk membuat TAG yang tidak memiliki TAG penutup:
<namatag />
AttributeAttribute adalah suatu informasi "tambahan" yang dimiliki oleh TAG. Attribtue atau Informasi ini terletak didalam TAG pembuka. Perhatikan contoh berikut ini:
<p align="center">Hello, World!</p> Pada contoh diatas align adalah sebuah attribute yang dimiliki oleh TAG p. Attribute ini berfungsi untuk mengatur posisi content secara horizontal. Sedangkan center adalah value atau nilai yang diberikan pada attribute align. Atribute yang dimiliki oleh tiap TAG bisa berbeda, dan jumlahnya juga bisa lebih dari satu buah attribute. Bahkan ada TAG yang tidak memiliki attibute sama sekali. Bila sebuah TAG memiliki 5 buah attribute, anda bisa menggunakan semua attribute yang dimilikinya, atau sebagian dari attributenya atau tidak sama sekali. Bentuk AttributeBerikut ini adalah bentuk umum untuk membuat attribute:
namaattribtue="nilaiattribute" Nama attribute diikuti dengan tanda sama dengan dan nilai attribute yang dilingkupi dengan titik dua. Berikut ini contoh penggunaan satu buah attribute pada TAG img:
<img src="foo.gif" />
Berikut ini contoh penggunaan lebih dari satu buah attribute pada TAG img: <img src="foo.gif" height="100" width="100" /> Bila anda menggunakan attribute lebih dari satu, pemisah antar attribute dengan menggunakan spasi. Catatan:
Jika sebuah Tag memiliki banyak attribute, Anda tidak harus menggunakan semua attribute pada tag pembuka, karena fungsi dari attribute mempengaruhi isi dari tag, maka, gunakan sesuai dengan keperluanya.
ContentContent adalah sesuatu yang terletak diantara TAG pembuka dan TAG penutup. Perhatikan contoh berikut ini: <p align="left">Hello, World!</p> Pada contoh diatas, content dari TAG p adalah text.
Nested TAGContent dari sebuah tag bisa berisi TAG lain atau TAG yang sama. perhatikan contoh berikut ini: <head> <title>Judul</title> </head>
Pada contoh diatas, content dari TAG head adalah title, sedangkan content dari TAG title adalah text "Judul". Sifat content berupa TAG lain adalah bersarang (nested), maksudnya pembuka dan penutup dari TAG tersebut tidak saling tumpang tindih dengan TAG yang diluarnya. Berikut ini adalah contoh lain untuk TAG yang memiliki content berupa TAG juga: <p> <b>Hello</b>, World! <p> <b>Hello</b>, World! </p> </p> Pada contoh diatas, TAG yang berada didalam tidak memotong dengan TAG pembuka dan TAG penutup yang ada diluarnya.
ElementElement adalah bagian-bagian yang menyusun atau membentuk halamam Web. Element mencakup TAG pembuka, attribute, content dan TAG penutupnya. Perhatikan contoh berikut ini:
<body bgcolor="blue"> <p>Halo, Dunia!</p> </body> Pada kode diatas terdapat 2 buah Element. Pertama adalah body Element dimulai dari tag pembuka <body> sampai dengan tag penutup </body>. Kedua adalah p Element dimulai dari tag pembuka <p> sampai dengan tag penutup </p>.
Struktur Dasar Dokumen HTML
Setelah anda mengetahui istilah dari TAG, attribute, Content, dan Element, kini saatnya anda menggunakan istilah-istilah tersebut pada tiap dokumen HTML yang akan anda buat. Tapi, sebelumnya anda harus mengetahui struktur dasar yang membentuk sebuah dokumen HTML. Contoh berikut ini adalah struktur dasar atau minimum yang dipunyai oleh sebuah dokumen HTML:
<html> <head> <title>Halaman Pertama</title> </head> <body> <p>Halo, Dunia!</p> </body> </html>
Sebuah dokumen HTML memiliki TAG utama yaitu TAG html. Content atau isi yang boleh berada didalam TAG ini adalah TAG head dan TAG body.
TAG html merupakan TAG utama dari sebuah dokumen HTML. Maksudnya, TAG lainnya terletak diantara TAG pembuka dan TAG penutup html.
TAG head terletak didalam TAG html. TAG ini merupakan header dari sebuah dokumen HTML. Content yang berada didalam TAG ini tidak akan terlihat oleh browser.
TAG body merupakan bagian body dari sebuah dokumen HTML. Pada bagian inilah tempat untuk TAG lainnya seperti: list, image, table, form, dan link berada. Content yang berada didalam TAG ini akan terlihat oleh browser.
title ElementMempelajari HTML sangat mudah, anda hanya butuh sebuah dokumentasi HTML yang menerangkan tentang element yang anda butuhkan. Seperti contoh dari title element berikut ini:
TAG <title>...</title>
Attribute -
Content Plain text
Contained In
head
Penjelasan untuk title element diatas adalah, TAG yang digunakan adalah title. Element title tidak memiliki attribute. Element ini terletak didalam TAG head, sedangkan isi dari element ini berupa text. Elemen title digunakan untuk memberikan judul pada sebuah dokumen HTML. Contoh berikut ini membuat sebuah dokumen HTML dengan judul "PHP: Web Development":
<html> <head> <title>PHP: Web Development</title> </head> <body> <p>Ini halaman pertamaku.</p> </body> </html>
Gambar berikut ini adalah hasil dari kode diatas:
Bila anda perhatikan, Content dari TAG title tidak terlihat pada halaman browser, tapi terlihat pada bagian judul dari browser (Bagian kiri atas). Sedangkan apa yang terlihat oleh browser, berasal dari content TAG body.
Paragraf
Tag <p>...</p>
Attribute align = [ left | center | right | justify ]
Content Inline Element
Contained In
body, div, form, li, td ,... (lihat dokumentasi)
Contoh: <p align="justify"> Pemerintah menilai penetapan free trade zone di Batam secara enclave lebih menguntungkan karena menghabiskan biaya yang lebih kecil yakni Rp 48 miliar. </p> Hasil:
Keterangan:
align = [ left | center | right | justify ] maksudnya, anda memilih salah satu nilai untuk attribute align, yaitu: left, center, right, atau justify.
Attribute align dengan nilai justify, mengakibatkan text rata kiri dan kanan. Penekanan Pada Text
Tag em dan strong digunakan untuk melakukan penekanan pada text. Tag em akan menyebabkan text menjadi Italic dan Tag strong menyebabkan text menjadi tebal.
Contoh: <em>Rabu, 15/09/2004 07:04 WIB</em><br /> <strong>FTZ Secara Enclave di Batam hanya Butuh Biaya Rp 48 M</strong><br /> <p align="justify"> Pemerintah menilai penetapan free trade zone di Batam secara enclave lebih menguntungkan karena menghabiskan biaya yang lebih kecil yakni Rp 48 miliar. </p> Hasil:
Line BreakTag <br /> digunakan untuk membuat baris baru.
HeadingHeading digunakan untuk memberikan keterangan atau judul pada sebuah dokumen. Pada HTML, heading mempunyai 6 level, yaitu h1, h2, h3, h4, h5, dan h6. h6 adalah heading dengan font terkecil. Setiap TAG heading akan menyebabkan efek Line-Break (baris baru). Contoh:
<h3>My first web page</h3> <h4>What this is</h4> <p>A simple page put together using HTML</p> <h6>Why this is</h6> <p>To learn HTML</p> Hasil:
ImageElement berikut ini digunakan untuk menampilkan image:
Tag <img>
Attribute
src = (Lokasi dari image)alt = (Alternate Text)width (besar image)height = (Tinggi Image)border= (ketebalan bingkai)Untuk attribute yang lain, lihat manual
Contoh:<img src="detik.gif" width="130" height="50" alt="Detik" border="0" /> Hasil:
Unordered ListUnordered list adalah daftar yang tidak memiliki urutan tertentu (Tidak berdasarkan urutan huruf atau angka). Unordered list ditandakan dengan penggunaan simbol yang sama. Berikut ini adalah TAG yang dibutuhkan untuk membuat unordered list:
Tag <ul>...</ul>
Attribute
type = [ disc | square | circle ]
Content
li Element (Elemen ini dugunakan sebagai isi dari daftar)
Berikut ini adalah contoh unordered list:
<h4>MATERI WEB TERPADU</h4> <ul type="disc"> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</liI> <li>PHP</li> <li>MYSQL</li> </ul> Hasil:
Keterangan:
Pemilihan simbol yang digunakan tergantung nilai yang diberikan pada attribute type. pilihanya adalah: disc, cicle, dan square.
Ordered ListOrdered list adalah daftar yang memiliki urutan tertentu (misalnya berdasarkan urutan huruf atau angka). Berikut ini adalah TAG yang dibutuhkan untuk membuat ordered list:
Tag <ol>...</ol>
Attribute
type = [ 1 | a | A | i | I ]
Content
li Element
Berikut ini adalah contoh ordered list:
<h4>MATERI WEB TERPADU</h4> <ol type="a"> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> <li>PHP</liI> <liI>MYSQL</li> </ol> Hasil:
Keterangan:
Pemilihan urutan yang digunakan tergantung nilai yang diberikan pada attribute type. pilihanya adalah: 1, a, A, i, I.
Definition ListBerikut ini adalah TAG yang dibutuhkan untuk membuat definition list:
Tag <dl>...</dl>
Content
<dt> (Definition Term) atau <dd> (Definition Descritption)
Berikut ini adalah contoh membuat definition list:
<dl> <dt>PHP</dt> <dd> <p align="justify"> PHP singkatan dari PHP Hypertext Preprocessor: adalah Bahasa pemrograman Yang sesuai untuk lingkungan WEB. </p> </dd> <dt>MYSQL</dt> <dd>Relational Database Management System</dd> </dl> Hasil:
table ElementElement ini digunakan untuk membuat table:
Tag <table>...</table>
Attribute
width=(Besar Table)border=(Bingkai Table)cellspacing=(Spasi diantara cell)cellpadding=(Spasi didalam cell)Untuk attribute lain, lihat manual.
Content
tr Element. Untuk Content lain, lihat manual
tr ElementElement ini digunakan untuk membuat baris:
Tag <tr>...</tr>
Attribute valign=[ top | middle | bottom | baseline ]Untuk attribute lain, lihat manual.
Content td Element atau th Element.
Contained In
table
td ElementElement ini digunakan untuk membuat kolom:
Tag <td>...</td>
Attribute width=(Besar Kolom)nowrap (Nowrap content)rowspan=(Menggabungkan baris)colspan=(Menggabungkan kolom)align=[ left | center | right | justify | char ]Untuk Conten lain, lihat manual.
Content Inline elements, block-level elements (Lihat manual)
Contained tr
In
Aturan Membuat TableAda beberapa hal yang perlu anda perhatikan dalam membuat table. Berikut ini adalah petunjuk yang dapat anda gunakan saat membuat table:
Jumlah kolom dalam tiap baris pada sebuah table harus sama.
Jika jumlah kolom tidak sama, pilih satu buah baris sebagai acuan. Jika yang menjadi acuan jumlah kolomnya lebih banyak, gunakan attribute colspan pada kolom yang lebih sedikit. Tapi, jika yang menjadi acuan jumlah kolomnya lebih sedikit, buat table baru pada kolom yang lebih banyak.
Untuk menggabungkan kolom berdasarkan baris, gunakan attribute rowspan.
Table Dengan Jumlah Kolom Yang SamaPada contoh berikut ini, tiap baris memiliki jumlah kolom yang sama:
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </table> Hasil:
Table Dengan Jumlah Kolom Tidak SamaBerikut ini akan dijelaskan solusi dari table yang memiliki jumlah kolom yang tidak sama. Menggunakan Attribute colspanPada contoh table berikut ini, baris ke dua dan ketiga memiliki jumlah kolom yang tidak sama dengan baris pertama (baris pertama 4 kolom, baris kedua 3 kolom, sedangkan baris ketiga 2 kolom). Untuk
menjadikan jumlah kolom sama, pada contoh berikut ini yang menjadi acuan berdasarkan kolom yang lebih banyak (yaitu baris pertama dengan 4 kolom), maka, solusinya adalah dengan menggunakan attribute colspan pada baris kedua dan ketiga (agar jumlah kolom menjadi sama). pada baris kedua pada kolom ketiga, yang mempunyai nilai 7, colspan = 2 untuk menggabungkan 2 kolom ,karena yang menjadi acuan adalah baris pertama. pada baris ketiga, pada kolom pertama dengan nilai 8, menggunakan colspan = 3, sehingga total kolom menjadi 4: attribute colspan dapat diartikan sebagai penggabung (merge) kolom secara horizontal (dari kiri ke kanan).
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td colspan="2">7</td> </tr> <tr> <td colspan="3">8</td> <td>9</td> </tr> </table> Hasil:
Membuat Table BaruContoh table berikut ini terdiri dari tiga buah baris, baris pertama terdiri dari 1 kolom dan dijadikan sebagai acuan (acuan berdasarkan kolom yang lebih sedikit). Solusi untuk acuan dengan jumlah kolom yang lebih sedikit adalah dengan membuat table baru pada baris yang mempunyai kolom lebih banyak. pada baris dua harus dibuat table baru yang terdiri dari satu buah baris yang memiliki 3 buah kolom. sedangkan baris tiga juga dibuat table baru, tapi memiliki satu baris dengan 2 buah kolom:
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> </TR> <tr> <td> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr>
<td>2</td> <td>3</td> <td>4</td> <tr> </table> </td> </tr> <tr> <td> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>5</td> <td>6</td> <tr> </table> </td> </tr> </table> Hasil:
Menggabungkan Kolom Berdasarkan Baris Dengan Menggunakan Attribute rowspanContoh table berikut ini menggabungkan kolom berdasarkan baris dengan menggunakan attribute rowspan. Attribute rowspan menggabungkan kolom secara vertical (dari atas ke bawah).
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td rowspan="2">5</td> </tr> <tr> <td>6</td> </tr> </table> Hasil:
a ElementUntuk membuat link, anda membutuhkan a Element:
Tag <a>...</a>
Attribute
href=(alamat link tujuan absolute atau relative)name=(nama link). Untuk attribute lainya, lihat manual.
Attribute href berisi alamat tujuan (file yang akan direquest). Dalam penulisan alamat tujuan, anda bisa menuliskannya secara absolute atau relative. AbsoluteAbsolute maksudnya, penyebutan nama file atau alamat secara lengkap. Lihat contoh berikut ini:
http://www.yahoo.com/ http://mail.com/index.php c:\wamp\www\index.html RelativeRelative maksudnya, penyebutan nama file atau alamat mengacu pada current directory (berdasarkan letak file yang dipanggil). Berikut ini adalah contoh-contoh pemanggilan dengan relative path:
index.html images/foo.gif ../index.html ../../index.html ./index.html images/football/foo.gif Keterangan:
tanda ../ berarti mundur satu direktori dari current directory (direktori dari file yang dipanggil berada).
tanda ../../ berarti mundur 2 direktori dari current directory tanda ./ berarti current directory Membuat Link Berikut ini contoh membuat sebuah link yang isinya berupa text: <a href="http://www.yahoo.com/">Yahoo</a> Hasil:
Keterangan:Saat tulisan Yahoo di klik, browser akan membuka atau menuju alamat http://www.yahoo.com/. Link dengan ImageBerikut ini contoh membuat link yang isinya berupa image:
<a href="http://www.php.net/"><img src="php.gif" border="0" /></a> Hasil:
Keterangan:Saat gambar php di klik, browser akan membuka atau menuju alamat http://www.php.net/.
ElementBerikut ini adalah element-element yang digunakan untuk membuat form:
Tag <form>...</form>
Attribute
name=(nama form)method=(Nilainya get atau post)action=(alamat tujuan)enctype="multipart/form-data" (Attribute ini untuk upload file)Untuk attribute yang lain, lihat manual
Content
input, textarea, select
Tag <input>
Attribu type=[text|password|checkbox|radio|submit|reset|file|hidden|image|button]
te name=(nama form element)value=(nilai form)size=(ukuran form)checked (check radio button atau checkbox)src=(nama image)untuk attribute lainya, lihat manual
Tag <textarea>...</textarea>
Attribute
name=(nama form element),cols=(jumlah kolom)rows=(jumlah baris)untuk attribute lainya, lihat manual
Content
Text
Tag <select>...</select>
Attribute
name=(nama form element)multiple(bisa memililh banyak pilihan)size=(ukuran)
Content
option
Tag <option>...</option>
Attribute
value=(nilai)selected(item yang terpilih)
Content
Text
Membuat FormUntuk membuat sebuah form, harus didahului dengan TAG form. Kemudian, isi diantara TAG pembuka dan penutup form adalah elemen-elemen dari form. Yang termasuk elemen-elemen dari form seperti: input, select, option, button, textarea, label, fieldset.
<form name="nama_form" method="post" action="alamat_tujuan"> element dari form berada diantara tag pembuka dan penutup form </form>
Membuat TextBoxUntuk membuat sebuah TextBox, anda membutuhkan TAG input dengan type = "text":
<form name="theform" method="post" action="index.html"> <input type="text" name="username" value="Hello, Ini TextBox" /> </form> Hasil:
Keterangan:
Tag form digunakan untuk membuat form
Attribute action berisi url atau file yang akan di request saat submit form
Tag input berada diantara tag <form> dan </form>
Jika attribute value terisi, maka, isi tersebut akan terlihat berada didalam textbox. Tapi, Jika nilai attribute value="", maka, textbox akan terlihat kosong.
Membuat TextBox Untuk PasswordUntuk membuat sebuah TextBox yang akan anda gunakan untuk password, anda membutuhkan TAG input dengan type = "password":
<form name="theform" method="post" action="index.html"> <input type="password" name="password" value="tulisan ini menjadi bintang" /> <input type="hidden" name="id" value="tidak terlihat" /> </form> Hasil:
Keterangan:
Tipe password menyebabkan isi terlihat menjadi tanda * (bintang) Tipe hidden menyebabkan form element tidak terlihat
Membuat CheckBoxUntuk membuat sebuah CheckBox, anda membutuhkan TAG input dengan type = "checkbox":
<form name="theform" method="post" action="index.html"> <input type="checkbox" name="cek" value="nilai" checked /> Label CheckBox <br /> <input type="checkbox" name="cek" value="nilai" /> Label CheckBox Tanpa tanda Checked</form> Hasil:
Keterangan:
penambahan attribute checked akan meyebabkan ada tanda cek pada CheckBox.
Membuat Radio ButtonUntuk membuat sebuah Radio Button, anda membutuhkan TAG input dengan type = "radio":
<form name="theform" method="post" action="index.html"> <input type="radio" name="rad" value="nilai" checked /> Label Radio <br /> <input type="radio" name="rad" value="nilai" /> Label Radio Tanpa tanda Checked </form> Hasil:
Keterangan:
Penggunaan attribute checked, meyebabkan adanya tanda cek pada radio button tersebut.
File BrowserUntuk membuat sebuah File Browser, anda membutuhkan TAG input dengan type = "file":
<form name="theform" method="post" action="index.html" enctype="multipart/form-data" > <input type="file" name="upload" value="" /> </form> Hasil:
Keterangan:
Khusus untuk type file anda harus menambahkan attribute enctype='multipart/formdata' pada TAG form. Jika anda mengklik tombol browse, maka akan muncul sebuah window untuk memilih file.
Membuat Tombol Reset, Submit, Button, dan ImageTombol Reset, Submit, Button, dan Image, anda hanya mengubah nilai attribute type pada TAG input menjadi: reset, submit, image, atau button:
<form name="theform" method="post" action="index.html"> <input type="reset" name="res" value="Label Reset" /> <br /> <input type="submit" name="sb" value="Label Submit" /> <br /> <input type="image" name="gambar" value="" src="php.gif" /> <br /> <input type="button" name="but" value="Label Button" /> </form> Hasil:
Keterangan:
Pada type image, ada penambahan attribute src. Attribute ini digunakan untuk menentukan lokasi image yang digunakan.
Membuat MemoUntuk membuat memo atau box yang ada banyak barisnya menggunakan TAG textarea:
<form name="theform" method="post" action="index.html"> <textarea name="alamat" rows="3" cols="9">Letak Text ada diantara TAG textarea.</textarea></form> Hasil:
Keterangan:
Untuk mengatur panjang dan lebar textarea, gunakan attribute rows (panjang) dan cols (lebar).
Membuat ComboBoxUntuk membuat combobox atau box yang ada banyak barisnya menggunakan TAG select:
<form name="theform" method="post" action="index.html"> <select name="pekerjaan"> <option value="1">Pelajar</option> <option value="2" selected>Pegawai Swasta</option> <option value="3">Pegawai Negeri</option> </select></form> Hasil:
Keterangan:
Tag option terletak dantara TAG <select> dan </select> Attribute selected pada TAG option menandakan sebagai item yang terpilih (yang terlihat) Membuat Form Dalam Table Contoh Berikut ini adalah form yang berada didalam table: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <form name="theform" method="post" action="index.html"> <tr> <td>Username</td> <td><input type="text" name="username" value="" /></td>
</tr> <tr> <td>Password</td> <td><input type="password" name="password" value=""></td> </tr> <tr> <td colspan="2" align="center"><input type="submit"
name="submit" value="Login"></td> </tr> </form> </table> Hasil: