STMIK AMIKOM YOGYAKARTA YOGYAKARTA

(1)

D

3

3 -

-

T

e

k

n

i

k

I

n

f

o

r

m

a

t

i

k

a

m

a

t

e

r

i

:

H

T

M

L

+

C

S

+

J

A

V

A

S

C

R

I

P

T

STMIK AMIKOM YOGYAKARTA

YOGYAKARTA

2008

(2)

2 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

(3)

3 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

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

(4)

4

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

(5)

5

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

(6)

6

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>

(7)

7

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.

(8)

8

LATIHAN

Latihan01 :

(9)

9

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>

(10)

10

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

(11)

11

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

(12)

12

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>

(13)

13

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 = [left| center|right] (perataan sebaris sel secara horizontal) valign = [top|middle|bottom] (perataan sebaris sel secara vertical) bgcolor = 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)

(14)

14

à Latihan Table

(15)

15

13. GROUPING ELEMENT

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 :

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 )

(16)

16

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.

(17)

17

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 = jumlah pilihan yang dapat terlihat name = nama dari suatu variabel yang terkirim ke suatu aplikasi

LatihanForm.html

<html>

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

(18)

18

<h2 align="center"><font color="#9966FF">Form Registrasi</font></h2>

<tr>

</tr>

<tr>

<td>Tgl Lahir</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> /

</tr>

<tr>

<td>Alamat</td>

(19)

19

</tr>

<tr>

</td>

</tr>

<tr>

<td>Pekerjaan</td>

<option>Tani</option> <option>Nelayan</option> <option>Karyawan</option> </select></td> </tr> <tr> <td>Jenis Kelamin</td> <td>:</td>

(20)

20

<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><input name="cekReading" type="checkbox" id="cekReading" value="1"> </input> Reading </td>

</tr>

<tr>

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

</tr>

<tr>

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

(21)

21

<tr>

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

</tr>

<tr>

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

(22)

22

<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> ... </frame> à mendefinisikan jendela (sub) frame

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

Contoh:

a. Frameset Vertikal

<html>

<head><title>CONTOH PENGGUNAAN FRAMESET VERTIKAL</title>

</head>

<body>

(23)

23

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

(24)

24

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

(25)

25

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

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>