Anda di halaman 1dari 25
PPPeeemmmrrrooogggrrraaammmaaannn WWWeeebbb SSS111 --- TTTeeekkknnniiikkk IIInnnfffooorrrmmmaaatttiiikkkaaa mma aat tte
PPPeeemmmrrrooogggrrraaammmaaannn WWWeeebbb
SSS111 --- TTTeeekkknnniiikkk IIInnnfffooorrrmmmaaatttiiikkkaaa
mma aat tte eer rri ii: :: HHT
m
H
TTM
MML LL ++ CCS
+ C
SSS
SS ++ JJA
+ J
AAV
VVA
AAS
SSC
CCR
RRI IIP PPT TT
STMIK AMIKOM YOGYAKARTA
YOGYAKARTA
2008
WIDHIARTA, S. KOM

WWiiddhhiiaarrttaa,, SS KKoomm

PEMROGRAMAN WEB

S1 – 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

WWiiddhhiiaarrttaa,, SS KKoomm

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 tag- tag.

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

WWiiddhhiiaarrttaa,, SS KKoomm

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

WWiiddhhiiaarrttaa,, SS KKoomm

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

program aplikasi Notepad . Cara: Klik tombol Start Menu à Programs à Accessories à Notepad Gambar

Gambar Notepad

5

2. Ketik tag HTML seperti berikut.

WWiiddhhiiaarrttaa,, SS KKoomm

tag HTML seperti berikut. WWiiddhhiiaarrttaa,, SS KKoomm *keterangan: <html> à tag agar web browser

*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

à semua yang ditampilkan di dalam isi web ditulis disini, diakhiri dengan </body> Hasil tampilan di

6

3. Save File Klik File à Save As

WWiiddhhiiaarrttaa,, SS KKoomm

Klik F ile à Save A s WWiiddhhiiaarrttaa,, SS KKoomm Buat Folder sesuai kelas masing –masing

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.

dengan ekstensi .html dan ubah Save as t ype menjadi All files . Buat folder: PI1

Buat folder: PI1 – Kelas – NIM (xx.xx.xxxx)

7

WWiiddhhiiaarrttaa,, SS KKoomm

WWiiddhhiiaarrttaa,, SS KKoomm LATIHAN Latihan01 : 8

LATIHAN

Latihan01 :

WWiiddhhiiaarrttaa,, SS KKoomm LATIHAN Latihan01 : 8

8

Latihan02 :

WWiiddhhiiaarrttaa,, SS KKoomm

Latihan02 : WWiiddhhiiaarrttaa,, SS KKoomm 7. PEMFORMATAN KARAKTER Font pada halaman HTML dapat diformat sesuai dengan

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

color = warna (warna huruf, default black à #000000 - #FFFFFF ) face = jenis huruf (jenis huruf, default Times New Roman)

= angka (ukuran huruf, default 3)

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 :

WWiiddhhiiaarrttaa,, SS KKoomm

Latihan03 : WWiiddhhiiaarrttaa,, SS KKoomm 8. LISTING Properti <li> digunakan untuk menampilkan informasi

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

Bullet Kotak

DISC

Bullet Titik

CIRCLE

Bullet Lingkaran

Latihan04 : UnOrdered list

TYPE SQUARE Bullet Kotak DISC Bullet Titik CIRCLE Bullet Lingkaran Latihan04 : UnOrdered list 10

10

Output di Browser

WWiiddhhiiaarrttaa,, SS KKoomm

Output di Browser WWiiddhhiiaarrttaa,, SS KKoomm Ordered list Tag Attribute Value Description <OL>

Ordered list

Tag

Attribute

Value

Description

<OL>

TYPE

I

Upper Roman

i

Lower Roman

A

Uppercase

a

Lowercase

<OL>

START

n

Begin Number

Latihan05 : Ordered list

Roman A Uppercase a Lowercase <OL> START n Begin Number Latihan05 : Ordered list 11

11

WWiiddhhiiaarrttaa,, SS KKoomm

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 alt width heigh align border

= lokasi dan nama gambar = teks ( teks alternatif ) = pixel ( lebar gambar ) = pixel ( tinggi gambar) = [ top | middle | bottom | left | right ] ( perataan gambar ) = 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

WWiiddhhiiaarrttaa,, SS KKoomm

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 height border cellspacing cellpadding align bgcolor

= panjang ( lebar tabel, pixel atau persen ) = panjang ( tinggi tabel, pixel atau persen) = pixel ( tebal garis tepi ) = pixel ( spasi antar sel ) = pixel ( spasi di dalam ) = [ left | center | right ] ( perataan tabel) = warna ( warna latar belakang tabel)

Atribut Table Row align valign bgcolor

Atribut Table Data rowspan colspan align valign width height bgcolor

= [left| center|right] (perataan sebaris sel secara horizontal) = [top|middle|bottom] (perataan sebaris sel secara vertical) = warna ( warna latar belakang baris)

= angka (baris yang di span oleh sel) = angka (kolom yang di span oleh sel) = [ left | center | right ] ( perataan horizontal) = [top | middle | bottom ] (perataan vertical) = pixel ( lebar sel, pixel atau persen ) = panjang ( tinggi sel, pixel atau persen) = warna ( warna latar belakang sel)

13

à Latihan Table

WWiiddhhiiaarrttaa,, SS KKoomm

à Latihan Table WWiiddhhiiaarrttaa,, SS KKoomm à Pengembangan Table dengan atribut tambahan. 14

à Pengembangan Table dengan atribut tambahan.

à Latihan Table WWiiddhhiiaarrttaa,, SS KKoomm à Pengembangan Table dengan atribut tambahan. 14

14

13. GROUPING ELEMENT

WWiiddhhiiaarrttaa,, SS KKoomm

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara Div digunakan untuk block- level content.

Latihan Div dan Span :

digunakan untuk block- level content. Latihan Div dan Span : 14. MEMBUAT FORM Form HTML merupakan

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.

WWiiddhhiiaarrttaa,, SS KKoomm

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

WWiiddhhiiaarrttaa,, SS KKoomm

name

= nama dari variabel yang dikirim ke suatu aplikasi

value

= 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

name

= jumlah pilihan yang dapat terlihat = nama dari suatu variabel yang terkirim ke suatu aplikasi

LatihanForm.html

<html>

<head> <title> Form Registrasi </title> </head>

<body>

17

WWiiddhhiiaarrttaa,, SS KKoomm

<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>&nbsp;</td>

18

WWiiddhhiiaarrttaa,, SS KKoomm

<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

WWiiddhhiiaarrttaa,, SS KKoomm

<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>&nbsp;</td>

<td>&nbsp;</td>

<td><input name="cekSport" type="checkbox" id="cekSport" value="2"> </input> Sport</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td><input name="cekSing" type="checkbox" id="cekSing" value="3"></input> Singing </td>

</tr>

20

WWiiddhhiiaarrttaa,, SS KKoomm

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td><input name="cekTravel" type="checkbox" id="cekTravel" value="4"></input> Traveling </td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</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

WWiiddhhiiaarrttaa,, SS KKoomm

 

<body>

<frameset cols=”25%,75%”>

<frame src=”frame_a.html>

<frame src=”frame_b.html>

</frameset>

</body>

</html>

Tag Frame:

 

<frameset>

</frameset> à mendefinisikan frameset </frame> à mendefinisikan jendela (sub) frame </noframes> à mendefinisikan browser yang tidak mendukung frame </iframe> à mendefinisikan inline (sub) frame

<frame>

<noframes>

<iframe>

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

WWiiddhhiiaarrttaa,, SS KKoomm

<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

WWiiddhhiiaarrttaa,, SS KKoomm

</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

WWiiddhhiiaarrttaa,, SS KKoomm

</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