materi 1 pembelajaranhtml · dalam mode editor bilamana akan menyisipkan script program dalam...
TRANSCRIPT
Pak Guru Eka 1
HTML
HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. Meskipun saat ini sudah banyak aplikasi-aplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a DreamWeafer ataupun Frontpage, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
DASAR DASAR HTML HTTP(Hypertext Transfer Protocol) merupakan protokol
yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini akan mentransfer dokumen-dokumen web yang berformat HTML. Elemen-elemen yang terdapat didalam HTML sering disebut sebagai tag.
Elemen HTML biasanya berupa tag-tag yang saling
berpasangan, setiap tag di tandai dengan simbol “ < ” dan “ > ”, dan pasangannya ditandai dengan “ / ” . Misalnya pasangan dari tag <example> adalah </example>. Selain tag atau elemen, terdapat juga istilah atribut, yang berfungsi untuk mengatur tag atau elemen tersebut. Jadi misalnya elemen <example> bila ditulis dengan atribut-atributnya adalah sebagai berikut <example atribut1=”nilaiAtribut1” atribut2=”nilaiAtribut2” …. >. Dalam menuliskan tag-tag HTML anda tidak perlu khawatir dengan perbedaan huruf besar maupun huruf kecil karena tag-tag HTML bersifat in-caseinsensitive.
Sebagai catatan, dalam penulisan pembahasan mengenai
HTML ini mungkin tidak akan selengkap yang anda harapkan. Namun setidaknya beberapa contoh yang tertulis di buku ini akan dapat anda pahami. Penjelasan lengkap mengenai HTML dapat anda baca pada buku khusus yang membahas tentang HTML.
STRUKTUR DASAR HTML Sebelum mempelajari HTML, akan terlebih dahulu diulas
mengenai aturan penulisan dalam buku ini. Script dituliskan
Pak Guru Eka 2
melalui text editor seperti Notepad, kemudian disimpan dengan ekstensi .htm atau .html. kemudian untuk melihat hasilnya langsung melalui web browser, seperti Internet Exploler atau web browser yang lain dengan mengetikkan lokasi penyimpanan file HTML anda atau anda simpan pada root web server sehingga dapat anda panggil dengan nama komputernya dan nama filenya.
Sebelum menuliskan script-script HTML dan PHP, terlebih
dahulu anda install webServer, php dan mySql. Atau anda langsung menggunakan AppServ.
Setiap dokumen HTML memiliki struktur dasar sebagai
berikut :
Contoh01.html <html> <head> <title> -berisi yang akan luncul di bagian judul web browser- </title> <head> <body> -berisi tentang text, gambar, atau apapun yang akan ditampilkan di halaman web-</body> </html>
Hasil dari script diatas adalah sebagai berikut :
body
title
File dipanggil melalui address
Gb. 1.1: Struktur dasar
HTML
Pak Guru Eka 3
Seperti yang telah anda lihat, tag HTML akan diawali dengan tag <html> dan diakhiri </html>. Didalam tag html terdapat bagian header yang tandai dengan tag <head> … </head> yang mana script yang tertulis pada bagian ini tidak akan tampil pada web broeser seperti <title> … </title> dan yang lain. Dan bagian body yang ditandai dengan tag <body> … </body>, bagian body nantinya adalah bagian yang akan sering anda gunakan. Dalam bagina body ini anda akan melakukan desain halaman web yang akan menampung bergai macam format teks dan gambar.
KODE WARNA Pengaturan pengunaan warna di halaman HTML, dapat
anda gunakan mode kombinasi dari warna dasar (RED, GREEN, BLUE) yang mana tiap-tiap kode warna ditampilkan dua digit nilai hexadesimal. Setiap dua bagian kode mewakili banyaknya intensitas warna. Supaya lebih jelasnya lihat tabel dibawah ini:
Table 1.1: Kode Warna
Warna Kode White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Yellow #FFFF00 Magenta #FF00FF Cyan #00FFFF
PENGATURAN PROPERTI BODY Pengaturan halaman web dapat anda lakukan pada tag
<body> dengan menambahkan bebrapa atribut didalamnya. Sebagai contoh adalah mengatur warna latar balakang, warna teks, warna link, dll.
Atribut elemen body :
Background = lokasi dan nama file (latar belakang image) Bgcolor = warna (warna latar belakang) Text = warna ( warna teks)
Pak Guru Eka 4
Link = warna (warna link) Vlink = warna (warna visited link) Alink = warna (warna active link)
Cobalah script berikut : Contoh02.html
<html> <head> <title> -berisi yang akan luncul di bagian judul web browser- </title> <head> <body bgcolor=”green” text=”blue”>
-berisi tentang text, gambar, atau apapun yang akan ditampilkan di halaman web-</body> </html>
Gb. 1.3: Penggunaan elemen pada body.
HEADING, PARAGRAPH, HORISONTAL RULER DAN BREAK
Tag heading <hx> digunakan untuk memformat judul-sub judul dari suatu halaman web. Di HTML terdapat enam buah macam heading dimulai dari <h1> hingga <h6> yang mana tiap-tiap heading akam mempunyai ukuran sendiri-sendiri.
Tag paragraph <p> digunakan layaknya pengaturan
sebuah paragraf dalam halaman web. Dalam elemen paragraf tersebut dapat anda masukkan atribut align = [left / right / center] yang berfungsi untuk mengatur perataan paragraf. Jika nilai atributnya adalah left maka paragraf tersebut akan rata kiri, jika bernilai center maka paragraf tersebut akan rata
Pak Guru Eka 5
tengah dan jika bernilai right maka akan rata ke sebalah kanan.
Tag break <br> berfungsi untuk memberikan baris baru di halaman web. Tag ini tidak memerlukan penutup seperti tag yang lain.
Tag horisontal ruler <hr> digunakan untuk memberikan garis horisontal. Tag ini juga tidak memerlukan penutup. Anda dapat menambahkan beberapa atribut pada tag ini.
Atribut tag horisontal ruler :
Align = [left / right / center] Size = pixel (tebal garis) Width = n% (panjang garis)
Salin script berikut untuk mencoba heading, paragraf, break dan horisontal ruler. Jangan lupa untuk menyimpannya dengan ekstensi .html atau .htm. setelah itu cobalah anda ubah nilai atribut-atributnya dan perhatikan perubahannya.
Contoh03.html <html> <head> <title> contoh-03 </title> <head> <body bgcolor=”green” text=”blue”> <h1> PENGERTIAN HTML </h1> <hr width=”100%” size=”10” color=”yellow”> <p align=”center”> HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. </p> <p align=”right”> Meskipun saat ini sudah banyak aplikasi-aplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a DreamWeafer ataupun Frontpage, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML. </p> perangkat yang kita butuhkan untuk belajar web adalah :<br> Notepad<br> Php<br> AppServ <hr width=”50%” align=”center” size=”2”> </body> </html>
Pak Guru Eka 6
Hasil tampilannya adalah seperti berikut :
Gb. 1.4: Penggunaan Heading, Paragraf,
Break, Horisontal Ruler
PENGATURAN KARAKTER Karakter yan terdapat di halama HTML juga dapat anda
atur sesuai dengan desain yang telah anda buat, baik dari ukuran, jenis maupun warna dengan menggunakan tag <font> … </font>.
Atribut elemen font :
Size = angka (ukuran huruf) Color = warna (warna huruf) Face = jenis huruf (jenis huruf)
Elemen karakter :
<b> … </b> = huruf tebal <i> …</i> = huruf miring <u> … </u> = huruf garis bawah <sub> … </sub> = huruf subscript <sup> … </sup> = huruf superscript
Tulislah script berikut ini untuk mengetahui penggunaan tag font dan tag ragam karakter. Dan lihat hasilnya melalui web browser.
Pak Guru Eka 7
Contoh04.html <html> <head> <title> contoh-04 </title> <head> <body bgcolor=”green” text=”blue”> <h1> PENGERTIAN HTML </h1> <hr width=”100%” size=”10” color=”yellow”> <p align=”center”> <font color=”magenta” size=”5” face=”Courier New”> <b>HTML<sup>(Hypertext Markup Language)</sup></b> merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. </font> </p> <font color=”red”> <p align=”right”> Meskipun saat ini sudah banyak aplikasi-aplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a <u><sup>DreamWeafer ataupun Frontpage</sup></u>, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML. </p> </font> perangkat yang kita butuhkan untuk belajar web adalah :<br> <i>Notepad<br> Php<br> AppServ</i> <hr width=”50%” align=”center” size=”2”> </body> </html>
Pak Guru Eka 8
Gb. 1.5: Pemformatan karakter
LISTING
Elemen listing <li> digunakan untuk menampilkan informasi dalam bentuk list atau daftar. Di dalam HTML dikenal dua macam bentuk list yaitu list dengan format bullet (unordered list <ul>) dan list dengan format nomor (ordered list <ol>).
Adapun atribut yang terdapat didalam elemen list adalah
: Type = [1 / A / a / I / i] (untuk list dengan format nomor) Type = [disc / square / circle] (untuk list dengan format
bullet) Salin script HTML dibawah ini untuk mencoba tag listing
dengan format unordered list maupun ordered list.
Pak Guru Eka 9
Contoh05.html <html> <head> <title> contoh-05 </title> <head> <body bgcolor=”yellow” text=”blue”> <h1 align=”center” color=”magenta”> Ardhi”ant” Soft</h1> <hr width=”100%” align=”center” size=”4” color=”red”> Buku yang sedang kami rancang : <ol type=”1”> <li>Microsoft Office : <ul type=”square”> <li>MS Word. <li>MS Exel. <li>MS Access. <li>MS Power Point. </ul> <li>Programming : <ul type=”circle”> <li>Visual Basic. <li>Visual Foxpro. <li>Visual C++. <li>Delphi. <li>Java. </ul> <li>Data Base : <ul type=”disc”> <li>SQL Server. <li>MySQL. <li>Oracle. </ul> <li>Internet dan Web Development : <ul type=”square”> <li>HTML. <li>PHP. <li>WAP. <li>Macromedia Dreamweaver. </ul> </ol> </body>
</html>
Pak Guru Eka 10
Gb. 1.6: Penggunaan elemen listing.
MENAMPILKAN GAMBAR Di halam web, anda juga dapat menampilkan gambar
dengan format JPG atau GIF dengan menggunakan tag <img>. Penulisan tag ini di ikuti dengan beberapa atribut yaitu :
Src = lokasi dan nama file gambar. Alt = teks alternatif. Width = pixel (lebar gambar) Height = pixel (tinggi gambar) Align = [top / middle / bottom / left / right] (perataan
gambar) Border = pixel (garis tepi gambar)
Untuk lebih jelasnya dalam penggunaan tag img, salinlah script dibawah ini dan amati hasilnya, serta alkukan perubahan-perubahan pada atribut-atribut di dalam tag img tersebut.
Pak Guru Eka 11
Contoh06.html <html> <head> <title> contoh-06 </title> <head> <body bgcolor=”yellow”> <img src=”gambarContoh02.gif” align=”middle” border=”1”> </body>
</html>
Gb. 1.7: Menampilkan gambar ke halaman web.
MEMBUAT LINK
Elemen link difungsikan untuk menghubungkan antara halaman web yang satu dengan halaman web yang lain atau ke URL yang lain. Format tag link adalah sebagai berikut :
<a href=”halamanTujuan”>text</a>
HalamanTujuan berisi lokasi dan nama file yang akan dituju, sedangkan text berisi sebuah teks yang akan ditampilkan pada halaman web sebagai text link atau penghubung.
Untuk mencoba membuat link, yang anda perlikan
adalah membuat dua buah file HTML. Sebagai contoh, tulislah script dibawah ini dan kemudian simpan dengan nama contoh07a.html.
Pak Guru Eka 12
Contoh07a.html <html> <head> <title> contoh-07a </title> <head> <body bgcolor=”yellow”> <h2 align=”center”> INI ADALAH HALAMAN AWAL </h2> <a href=”contoh07b.html”> Menuju Halaman Berikutnya </a> </body> </html>
Dan juga tulis script dibawah ini, kemudian simpan
dengan nama contoh07b.html.
Contoh07b.html <html> <head> <title> contoh-07b </title> <head> <body bgcolor=”green”> <h2 align=”center”> INI ADALAH HALAMAN TUJUAN </h2> <a href=”contoh07a.html”> Kembali Ke Halaman Sebelumnya </a> </body>
</html>
Gb. 1.8a: Halaman awal. Gb. 1.8b: Halaman tujuan
Pak Guru Eka 13
MEMBUAT TABEL Tabel digunakan untuk menampilkan data dalam bentuk
kolom dan baris yang mana data tersebut dimasukkan kedalam kotak yang disebut sel. Untuk membuat tabel di halaman HTML, gunakan elemen <table> … </table>. Elemen tabel berisi properti <tr> … </tr> yang difungsikan untuk membuat baris (table row) dan properti <td> … </td> yang dogunakan untuk mengisikan data (table data). Struktur dasar tabel dapat anda lihat di script berikut ini :
Contoh08.html
<html> <head> <title> contoh-08 </title> <head> <body> <table> <tr> <td>baris ke-1, kolom ke-1</td> <td>baris ke-1, kolom ke-2</td> </tr> <tr> <td>baris ke-2, kolom ke-1</td> <td>baris ke-2, kolom ke-2</td> </tr> <tr> <td>baris ke-3, kolom ke-1</td> <td>baris ke-3, kolom ke-2</td> </tr> <tr> <td>baris ke-4, kolom ke-1</td> <td>baris ke-4, kolom ke-2</td> </tr> </table> </body>
</html>
Pak Guru Eka 14
Gb. 1.9: Struktur dasar tabel.
Hasil dari script diatas sepertinya memang tidak tampak
selayaknya sebuah tabel, hal ini dikarenakan atribut-atribut yang terdapat didalam tag table belum diatur sehingga secara otomatis akan di set dengan nilai defaultnya.
Adapun atribut elemen tabel dalah sebagai berikut :
Caption = teks (judul tabel) Width = panjang (lebar tabel dalam pixel atau persen) Height = panjang (tinggi tabel dlam pixel atau persen) Border = pixel (tebal garis tepi) Cellspacing = pixel (spasi antar cell) Cellpadding = pixel (spasi di dalam cell) Align = [left / center / right] (perataan tabel) Bgcolor = warna (warna latar belakang tabel)
Selain itu anda dapat mengatur tabel, lebih spesifik anda
juga dapat mengatur kolom dan baris melalui atribut yang terdapat pada elemen tabel row dan table data.
Atribut table row :
Align = [left / center / right] (perataan baris cell secara horisontal)
Valign = [top / middle / bottom] (perataan baris cell secara vertikal)
Bgcolor = warna (warna latar belakang baris)
Atribut table data : Rowspan = angka (baris yang di-merger oleh cell) Colspan = angka (kolom yang di-merger oleh cell) Align = [left / right / center] (perataan horisontal)
Pak Guru Eka 15
Valign = [top / bottom / middle] (perataan vertikal) Width = pixel (lebar cell dalam pixel atau persen) Height = pixel (tinggi cell dalam pixel atau persen) Bgcolor = warna (warna latar belakang cell)
Untuk mencoba, salinlah script berikut dan lihat hasilnya melalui web browser.
Contoh09.html <html> <head> <title> contoh-09 </title> <head> <body> <table width=”75%” align=”center” border=”1” cellspacing=”3”> <caption> Tabel percobaan </caption> <tr bgcolor=”grey”> <td colspan=”2” align=”center”>hasil colspan</td> </tr> <tr align=”right”> <td bgcolor=”pink”>hasil align right</td> <td bgcolor=”cyan”>hasil align right</td> </tr> <tr> <td rowspan=”2” align=”middle” bgcolor=”green”>hasil rowspan</td> <td>baris ke-3, kolom ke-2</td> </tr> <tr> <td>baris ke-4, kolom ke-2</td> </tr> </table> </body> </html>
Gb. 1.10: Penggunaan atribut dalam table, table row dan table
data
Pak Guru Eka 16
MEMBUAT FORM Elemen FORM dalam HTML merupakan bagian terpenting
dalam pemrograman, khususnya dalam pembuatan aplikasi yang berbasiskan web. Form dalam HTML sama layaknya form di bahasa pemrograman yang lain seperti Delphi, VB, Foxpro, dll. Elemen ini juga menyediakan properti textbox, combo box, button, check bok dan option button.
Untuk membuat sebuah form, anda cukup dengan
menggunakan tag <form> … </form>. Selain atribut dan properti yang dimiliki form, anda juga dapat menuliskan teks dan menambahkan image didalamnya.
Atribut elemen form :
Action = lokasi dan nama file (file yang menangani form) Method = [get / post] (methode HTTP untuk men-submit
form)
Berikut adalah properti beserta atribut properti yang dimiliki oleh elemen form :
1. Text Box <input type=”text”>
Digunakan untuk memasukkan input yang berupa teks. Size = ukuran dari text box dalam karakter. Maxsize = maksimal banyaknnya karakter yang dapat
diterima. Name = nama dari variabel text box yang dikirim ke
suatu aplikasi. Value = nilai yang ditampilkan dalam text box sebagai
nilai default. 2. Password <input type=”password”>
Digunakan untuk memasukkan password Size = ukuran dari text box dalam karakter. Maxsize = maksimal banyaknnya karakter yang dapat
diterima. Name = nama dari variabel text box yang dikirim ke
suatu aplikasi. 3. Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi yang tidak untuk dilihat oleh browser. Name = nama yang dikirim ke suatu aplikasi. Value = nilai dari variabel yang dikirim.
Pak Guru Eka 17
4. Check Box <input type=”checkbox”> digunakan untuk melakukan pilihan yang lebih dari satu. Name = nama dari suatu variabel yang dikirim ke suatu
aplikasi. Value = nilai dari suatu variabel. Checked (check box yang sudah ditandai)
5. Radio Button <input type=”radio”> Digunakan untuk melakukan pilihan yang hanya satu pilihan saja. Name = nama dari suatu variabel yang dikirim ke suatu
aplikasi. Value = nilai dari suatu variabel. Checked (check box yang sudah ditandai)
6. Push Button <input type=”button”> Elemen ini biasanya digunakan dengan java script atau VBscript untuk menghasilkan sebuah aksi. Name = nama dari variabel yang dikirim ke suatu
aplikasi. Value = label teks di atas tombol.
7. Submit <input type=”submit”> Digunakan unutk mengirimkan data ke suatu aplikasi yang nilai FORMnya sudah diatur dalam atribut ACTION. Name = nama variabel yang dikirim ke suatu aplikasi. Value = label teks di atas tombol.
8. Image Submit Button <input type=”image” src=”url”> Digunakan untuk menggantikan tombol standar submit. Name = nama dari variabel yang dikirim ke suatu
aplikasi.
9. Reset <input type=”reset”> Digunakan untuk mereset semua masukan di dalam form. Value = text label di atas tombol.
10. Text Area <textarea> … </textarea> Elemen yang digunakan menuliskan teks secara leluasa seperti Notepad atau sebuah listbox. Name = nama dari variabel yang dikirimkan ke suatu
aplikasi. Rows = panjang baris dalam karakter.
Pak Guru Eka 18
Cols = tinggi dalam karakter.
11. Select <select> … </select> Digunakan seperti layaknya combo box, yang mana didalamnya terdapat properti <option> untuk memilih. Size = jumlah pilihan yang dapat terlihat. Name = nama dari variabel yang dikirim ke suatu
aplikasi.
Salin script dibawah ini untuk mencoba tag form beserta properti yang dimilikinya.
Contoh010.html <html> <head> <title> contoh-010 </title> <head> <body> <form> Nomor KTP : <input type=”text” name=”nomorKtp”><br> Nama : <input type=”text” name=”nama”><br> Alamat : <textarea cols=”25” rows=”5”></textarea><br> Jenis Kelamin : <input type=”radio” name=”sex” value=”L”>Laki-laki <input type=”radio” name=”sex” value=”P”>perempuan <br> Agama : <select name=”agama”> <option value=”islam”>islam <option value=”kristen”>kristen <option value=”katholik”>katholik <option value=”hindu”>hindu <option value=”budha”>budha </select><br> Ijasah yang dimiliki : <input type=”checkbox” name=”ijasah” value=”sd”>SD <input type=”checkbox” name=”ijasah” value=”sltp”>SLTP <input type=”checkbox” name=”ijasah” value=”slta”>SLTA <input type=”checkbox” name=”ijasah” value=”diploma”>Diploma <input type=”checkbox” name=”ijasah” value=”sarjana”>Sarjana <input type=”checkbox” name=”ijasah” value=”Magister”>Magister<br> <input type=”reset” value=”ulangi”> </form> </body> </html>
Pak Guru Eka 19
Gb. 1.11: Penggunaan elemen Form
Dari tampilan yang dihasilkan, mungkin anda menilai
kurang rapi. Supaya tampilan terlihat lebih rapi, anda dapat menggunakan bantuan tag table untuk melakukan pembuatan form. Perhatikan script di bawah ini supaya lebih jelas.
Contoh011.html
<html> <head> <title> contoh-011 </title> <head> <body> <form> <table align=”left” border=”1” cellspacing=”2” cellpadding=”3”> <tr> <td>Nomor KTP</td> <td>:</td> <td><input type=”text” name=”nomorKtp”></td> </tr> <tr> <td>Nama</td> <td>:</td> <td><input type=”text” name=”nama”></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><textarea cols=”25” rows=”5”></textarea></td> </tr> <tr> <td>Jenis Kelamin</td>
Pak Guru Eka 20
<td>:</td> <td><input type=”radio” name=”sex” value=”L”>Laki-laki <input type=”radio” name=”sex” value=”P”>perempuan</td> </tr> <tr> <td>Agama</td> <td>:</td> <td><select name=”agama”> <option value=”islam”>islam <option value=”kristen”>kristen <option value=”katholik”>katholik <option value=”hindu”>hindu <option value=”budha”>budha </select></td> </tr> <tr> <td>Ijasah Yang Dimiliki</td> <td>:</td> <td><input type=”checkbox” name=”ijasah” value=”sd”>SD <input type=”checkbox” name=”ijasah” value=”sltp”>SLTP <input type=”checkbox” name=”ijasah” value=”slta”>SLTA <input type=”checkbox” name=”ijasah” value=”diploma”>Diploma <input type=”checkbox” name=”ijasah” value=”sarjana”>Sarjana <input type=”checkbox” name=”ijasah” value=”Magister”>Magister</td> </tr> <tr> <td colspan=”3”><input type=”reset” value=”ulangi”></td> </tr> </form> </body> </html>
Gb. 1.12: Pembuatan form dengan bantuan tag table.
Pak Guru Eka 21
Hasil tampilan diatas masih terdapat garis border table-nya, untuk menghilangkan garis tersebut, anda cukup mengganti nilai atribut border dengan nilai ‘nol’.
LATIHAN Cobalah anda membuat halaman HTML dengan desain
seperti di bawah ini : Desain halaman pertama :
Desain halaman kedua :