Pemrograman Internet 1 D3 - Teknik Informatika m maatteerrii:: H HTTM MLL ++ C CS SS S ++ JJA AV VA AS SC CR RIIP PTT STMIK AMIKOM YOGYAKARTA YOGYAKARTA 2008 WIDHIARTA, S. KOM
PEMROGRAMAN INTERNET 1 D3 Teknik Informatika I. HTML 1.1 Pengertian HTML 1.2 Dasar-Dasar HTML 1.3 Mengenal Tag 1.4 Pengaturan Properti Halaman Web 1.5 Heading, Paragraph & Break 1.6 Membuat halaman web 1.7 Pemformatan karakter 1.8 Listing 1.9 Marquee 1.10 Menempelkan image 1.11 Membuat Link 1.12 Membuat Table 1.13 Grouping Element 1.14 Membuat Form 1.15 Frame PERHATIAN! TUGAS DAN QUIS DAPAT DIBERIKAN SEWAKTU-WAKTU TANPA PEMBERITAHUAN TERLEBIH DAHULU 2
I. HTML 1. PENGERTIAN HTML HTML ( hypertext markup language ) merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Karena itu, untuk bisa melakukan pemrograman aplikasi di atas web.anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG ( what you see is what you get) seperti Frontpage, DreamWeaver, Netsccape Composer dan masih banyak lagi, namun tetap harus menguasai tag-tag HTML terutama untuk membuat aplikasi di internet. 2. DASAR-DASAR HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language). Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambah elemen atau sering disebut sebagai tagtag. Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan simbol < dan >. Pasangan dari sebuah tag ditandai dengan tanda `/`. Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut : <contoh atribut1= nilai_atribut1 atribut2= nilai_atribut2 >. Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah. 3. MENGENAL TAG Tag adalah kode yang digunakan untuk me-mark-up teks ASCII sehingga membentuk file html. <tag pembuka> Teks ASCII <tag penutup> Contoh: <b>homepage</b> oleh browser akan ditampilkan sebagai homepage <i>homepage</i> oleh browser akan ditampilkan sebagai homepage 3
Kode Warna Kombinasi per dua digit RGB (red, green,blue). Warna Heksadesimal White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Aquamarine #70DB93 Chocolate #5C3317 Violet #9F5F9F Brass #B5A642 Copper #B87333 Pink #FF6EC7 Orange #FF7F00 4. PENGATURAN PROPERTI HALAMAN WEB Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain. Atribut elemen body background = lokasi dan nama file (latar belakang image dan dokumen) bgcolor = warna ( warna latar belakang dokumen, default putih) text = warna ( warna teks dokumen, default hitam) link = warna ( warna link dokumen, default biru ) vlink = warna ( warna visited link dokumen, default ungu) alink = warna ( warna active link dokumen, default merah) 5. HEADING, PARAGRAPH DAN BREAK Tag heading <hx> berfungsi untuk memformat heading ( judul dan sub-judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>. 4
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraph dalam halaman web anda. Dalam elemen paragraph terdapat atribut : align = [left center right] yang berfungsi sebagai pengaturan perataan paragraph, jadi cukup pilih salah satu dari ketiga pilihan tanpa diberi kurung buka dan tutup, sebagai default-nya adalah left. Anda dapat memilih perataan kiri, tengah atau kanan. Tag paragraph <br> berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Tag Break tidak memerlukan tag penutup break. Tag Horisontal Ruler <hr> berfungsi untuk menampilkan garis horizontal di dalam halaman web anda. Tag Horisontal Ruler tidak memerlukan elemen penutup </hr>. (standarisasi terbaru, semua tag pembuka memakai tag penutup). <br> <br /> <hr> <hr /> Atribut Elemen Horisontal Rules align = [ left / center / right ] (perataan horizontal, default center) size = pixel ( tebal garis, default 2 ) noshade = ( garis solid) Contoh: <h1>heading one</h1> <h2>heading two</h2> <h3>heading three</h3> <h4>heading four</h4> <h5>heading five</h5> <h6>heading six</h6> 6. MEMBUAT HALAMAN WEB 1. Buka program aplikasi Notepad. Cara: Klik tombol Start Menu Programs Accessories Notepad Gambar Notepad 5
2. Ketik tag HTML seperti berikut. *keterangan: <html> tag agar web browser mengenali halaman web ditulis dalam HTML (Hypertext Markup Language) diakhiri dengan </html> <head> tag sebagai header sebuah web, diakhiri dengan </head> <title> tag untuk menampilkan informasi di titlebar diakhiri dengan </title> <body> semua yang ditampilkan di dalam isi web ditulis disini, diakhiri dengan </body> Hasil tampilan di browser 6
3. Save File Klik File Save As Buat Folder sesuai kelas masing masing jika belum ada. Buat folder sesuai NIM masing-masing jika belum ada. Simpan file dengan ekstensi.html dan ubah Save as type menjadi All files. Buat folder: PI1 Kelas NIM (xx.xx.xxxx) 7
LATIHAN Latihan01 : 8
Latihan02 : 7. PEMFORMATAN KARAKTER Font pada halaman HTML dapat diformat sesuai dengan desain yang anda tentukan, baik ukuran, jenis maupun warna dengan menggunakan tag <font>. Atribut Elemen Font size = angka (ukuran huruf, default 3) color = warna (warna huruf, default black #000000 - #FFFFFF ) face = jenis huruf (jenis huruf, default Times New Roman) Elemen Ragam Karakter <br /> break = ganti baris <b> </b> menghasilkan huruf tebal (bold) <i> </i> menghasilkan huruf miring (italic) <u> </u> menghasilkan huruf bergaris bawah (underline) Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. <pre>... </pre> 9
Latihan03 : 8. LISTING Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list ). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (unordered list <ol>). Atribut Elemen List Unordered list Tag Attribute Value Description <UL> TYPE SQUARE DISC CIRCLE Bullet Kotak Bullet Titik Bullet Lingkaran Latihan04 : UnOrdered list 10
Output di Browser Ordered list Tag Attribute Value Description <OL> TYPE I i A a Upper Roman Lower Roman Uppercase Lowercase <OL> START n Begin Number Latihan05 : Ordered list 11
9. MARQUE <marquee>text berjalan disini</marquee> <marquee direction="right" behavior="slide" scrollamount="8" scrolldelay="88">text berjalan disini</marquee> Bagaimana membuat teks berjalan secara Vertikal? 10. MENEMPELKAN IMAGE Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkannya digunakan tag IMG. (standarisasi: semua tag menggunakan huruf kecil). <IMG SRC= namafilegambar /> Atribut Elemen Image Src = lokasi dan nama gambar alt = teks ( teks alternatif ) width = pixel ( lebar gambar ) heigh = pixel ( tinggi gambar) align = [ top middle bottom left right ] ( perataan gambar ) border = pixel (tebal garis tepi gambar) 11. MEMBUAT LINK Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul lain. <a href = URL_tujuan > hypertext </a> Contoh: <a href= http://www.aditif.com/ > Art & Digital Technology In Focus </a> <a href=" http://www.aditif.com/"><img src="url" alt="alternate Text"></a> <a href="mailto:admin@aditif.com">send e-mail</a> A named anchor: <a name="tips">useful Tips Section</a> <a href="#tips">jump to the Useful Tips Section</a> 12
12. MEMBUAT TABEL Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan dalam bentuk tabel pada HTML, digunakan tag <table> </table>. Elemen tabel berisi properti <tr> </tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> </td> untuk menampilkan data pada setiap sel tabel (table data). Struktur lengkap dari elemen tabel adalah sebagai berikut: Atribut Elemen Table width = panjang ( lebar tabel, pixel atau persen ) height = panjang ( tinggi tabel, pixel atau persen) border = pixel ( tebal garis tepi ) cellspacing = pixel ( spasi antar sel ) cellpadding = pixel ( spasi di dalam ) align = [ left center right ] ( perataan tabel) bgcolor = warna ( warna latar belakang tabel) Atribut Table Row align valign bgcolor = [left center right] (perataan sebaris sel secara horizontal) = [top middle bottom] (perataan sebaris sel secara vertical) = warna ( warna latar belakang baris) Atribut Table Data rowspan = angka (baris yang di span oleh sel) colspan = angka (kolom yang di span oleh sel) align = [ left center right ] ( perataan horizontal) valign = [top middle bottom ] (perataan vertical) width = pixel ( lebar sel, pixel atau persen ) height = panjang ( tinggi sel, pixel atau persen) bgcolor = warna ( warna latar belakang sel) 13
Latihan Table Pengembangan Table dengan atribut tambahan. 14
13. GROUPING ELEMENT Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara Div digunakan untuk blocklevel content. Latihan Div dan Span : 14. MEMBUAT FORM Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form merupakan properti masukan yang dapat berupa textbox, check box, radio button, dan button. Untuk mendeklarasikan sebuah form digunakan tag <form> </form>. Di dalam tag ini akan mendefisinikan elemen-elemen form seperti yang telah disebutkan di atas. Selain tag elemen form juga dapat menuliskan sembarang text, tag, image. Atribut Elemen Form action = lokasi dan nama file ( yang menangani form ) method = [ get post ] ( metode HTTP untuk men-submit form ) 15
Properti Masukan Pada Elemen Form a. Text Box <input type= text /> Digunakan untuk memasukkan input berupa text. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima name = nama dari variabel yang dikirim ke suatu aplikasi value = akan menampilkan isinya sebagai nilai default b. Password<input type= password /> Digunakan untuk memasukkan password. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima name = nama dari variabel yang dikirim ke suatu aplikasi c. Hidden<input type= hidden /> Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel d. Check Box<input type= checkbox /> Check box digunakan untuk dapat memilih lebih dari satu pilihan. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variable checked = ( checkbox yang sudah ditandai ) e. Radio Button<input type= radio /> Radio Button digunakan untuk dapat memilih hanya satu pilihan. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel checked = ( checkbox yang sudah ditandai ) f. Push Button<input type= button /> Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi. 16
name value = nama dari variabel yang dikirim ke suatu aplikasi = label teks diatas tombol g. Submit<input type= submit /> Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM. name = nama dari variabel yang dikirim ke suatu aplikasi. value = label teks diatas tombol h. Image Submit Button<input type= image src= url /> Digunakan untuk menggantikan tombol standar submit dengan image. name = nama dari variabel yang dikirim ke suatu aplikasi i. Reset<input type= reset /> Digunakan untuk mereset semua masukan form. value = text label on the button j. Text Area<textarea> </textarea> Elemen untuk memasukkan teks secara leluasa seperti notepad. name = nama dari varibel yang dikirim ke suatu aplikasi rows = panjang baris dalam karakter cols = tinggi dalam karakter k. Select<select> </select> Daftar isi dalam property select menggunakan tag <option> size = jumlah pilihan yang dapat terlihat name = nama dari suatu variabel yang terkirim ke suatu aplikasi LatihanForm.html <html> <head> <title> Form Registrasi </title> </head> <body> 17
<h2 align="center"><font color="#9966ff">form Registrasi</font></h2> <form action="proses" method="post" name="form"> <table width="68%" border="0" align="center" cellpadding="0"> <tr> <td width="33%">nama</td> <td width="3%">:</td> <td width="64%"><input name="txtnama" type="text" id="txtnama"></input></td> </tr> <tr> <td>tgl Lahir</td> <td>:</td> <td><input name="txttgl" type="text" id="txttgl" size="4" maxlength="2"></input> / <input name="txtbulan" type="text" id="txtbulan" size="4" maxlength="2"></input> / <input name="txttahun" type="text" id="txttahun" size="8" maxlength="4"></input></td> </tr> <tr> <td>alamat</td> <td> </td> 18
<td><textarea name="txtalamat" cols="40" rows="2" id="txtalamat"></textarea></td> </tr> <tr> <td>kota</td> <td>:</td> <td><input name="txtkota" type="text" id="txtkota"></input> </td> </tr> <tr> <td>pekerjaan</td> <td>:</td> <td><select name="cbojob" id="cbojob"> <option>tani</option> <option>nelayan</option> <option>karyawan</option> </select></td> </tr> <tr> <td>jenis Kelamin</td> <td>:</td> 19
<td><input name="radjk" type="radio" value="1" checked> </input> Laki-Laki <input type="radio" name="radjk" value="2"> </input> Perempuan </td> </tr> <tr> <td>hobby</td> <td>:</td> <td><input name="cekreading" type="checkbox" id="cekreading" value="1"> </input> Reading </td> </tr> <tr> <td> </td> <td> </td> <td><input name="ceksport" type="checkbox" id="ceksport" value="2"> </input> Sport</td> </tr> <tr> <td> </td> <td> </td> <td><input name="ceksing" type="checkbox" id="ceksing" value="3"></input> Singing </td> </tr> 20
<tr> <td> </td> <td> </td> <td><input name="cektravel" type="checkbox" id="cektravel" value="4"></input> Traveling </td> </tr> <tr> <td> </td> <td> </td> <td><input name="btnkirim" type="submit" id="btnkirim" value="kirim"> </input> <input name="btnreset" type="reset" id="btnreset" value="reset"> </input> </td> </tr> </table> 15. FRAME Dengan Frame kita dapat menampilkan lebih dari satu halaman web dalam halaman browser yang sama. Setiap dokumen HTML dapat ditampilkan didalam Frame dan setiap frame adalah bebas antara satu dengan yang lain. Contoh penggunaan tag Frame: <html> <head><title>contoh PENGGUNAAN FRAMESET</title> </head> 21
<body> <frameset cols= 25%,75% > <frame src= frame_a.html> <frame src= frame_b.html> </frameset> </body> </html> Tag Frame: <frameset>... </frameset> <frame>... </frame> <noframes>... </noframes> <iframe>... </iframe> mendefinisikan frameset mendefinisikan jendela (sub) frame mendefinisikan browser yang tidak mendukung frame mendefinisikan inline (sub) frame Contoh: a. Frameset Vertikal <html> <head><title>contoh PENGGUNAAN FRAMESET VERTIKAL</title> </head> <body> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> 22
<frame src="frame_c.html"> </frameset> </body> </html> b. Frameset Horizontal <html> <head><title>contoh PENGGUNAAN FRAMESET HORISONTAL</title> </head> <body> <frameset rows="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </body> </html> c. Penggunaan Noframe <html> <head><title>contoh PENGGUNAAN NOFRAME</title> 23
</head> <body> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> <noframes> <body>your browser does not handle frames! </body> </noframes> </frameset> </body> </html> d. Penggunaan Navigation Frame <html> <head><title>contoh PENGGUNAAN NAVIGATION FRAME</title> </head> <body> <frameset cols="120,*"> <frame src="frame_isi.html"> <frame src="frame_a.html" name="showframe"> </frameset> 24
</body> </html> File : frame_isi.html <html> <body> <a href ="frame_a.html" target ="showframe">frame a</a><br> <a href ="frame_b.html" target ="showframe">frame b</a><br> <a href ="frame_c.html" target ="showframe">frame c</a> </body> </html> e. Penggunaan iframe <html> <head><title>contoh PENGGUNAAN iframeset</title></head> <body> <iframe src="frame_a.html"></iframe> <p>some older browsers don't support iframes.</p> <p>if they don't, the iframe will not be visible.</p> </body> </html> 25