Diktat pemrograman Web 1

(1)

DIKTAT

PEMROGRAMAN WEB I

DISUSUN UNTUK MENUNJANG

PERKULIAHAN PEMROGRAMAN WEB I

Oleh :

Asih Winantu, S.Kom

STMIK EL RAHMA YOGYAKARTA

(2)

PENGANTAR

Alhamdulillah kami ucapkan kehadirat Allah SWT karena dengan izin-Nya lah diktat ini

bisa terselesaikan.

Perkembangan teknologi komputer dan internet dewasa ini semakin cepat. Web sebagai

media informasi juga mengalami perkembangan yang signifikan, seiring dengan semakin

banyaknya sistem informasi berbasis web. Hal ini dikarenakan sifat internet yang cepat, akurat

dan real time.

Diktat ini disusun sebagai bahan acuan mahasiswa dalam mempelajari pemrograman web

dasar. Dengan adanya diktat ini diharapkan para mahasiswa dapat terbantu dalam mengikuti mata

kuliah pemrograman web .

Tentu saja diktat ini masih jauh dari sempurna, untuk itu kami mengharap masukan dari

pembaca sekalian, untuk perbaikan dari diktat ini. Ucapan terimakasih tak lupa kami ucapkan

kepada berbagai pihak, terutama Dosen-dosen dan karyawan STMIK El Rahma, yang telah

banyak membantu terwujudnya diktat ini.

(3)

DAFTAR ISI

Pengantar --- 1

Daftar isi --- 2

Silabi Pemrograman Web--- 3

Bab I : PENDAHULUAN--- 4

Bab II : Pengenalan HTML --- 7

Bab III : Teks dalam paragraf ---

Bab IV : Pemformatan Teks HTML---

Bab V : Link HTML---

Bab VI : Penyisipan Gambar ---

Bab VII : Image Map ---

Bab VIII : List ---

Bab IX : Tabel ---

Bab X : Frame ---

Bab XI :Form dan input ---

Bab XII : Javascript---

Bab XIII : CSS ---

Bab XIV : Mengupload Web ---

Bab XV : Project : membuat web pribadi---

(4)

SILABI

PEMROGRAMAN WEB I

A. Deskripsi

Mata kuliah Pemrograman Web adalah bersifat teori-praktek. Mata kuliah ini

membahas tentang kode-kode program untuk mendesain dan membuat website. Selain

hal tersebut dibahas pula komponen-komponen atau script-script pendukung untuk

membuat web.

B. Tujuan

Setelah menempuh matakuliah ini, mahasiswa diharapkan mampu merancang dan

membuat web sederhana menggunakan kode-kode HTML dan juga script-script

pendukung yang sudah dipelajari.

C. Penilaian

Ujian Akhir Semester : 40 %

Ujian Tengah Semester : 30 %

Tugas : 20 %

Presensi : 10 %

D. Metode Kuliah

Metode yang digunakan selama perkuliahan berlangsung yaitu dengan pola tutorial atau

penjelasan di kelas disertai tanya jawab. Beberapa sesi selama perkuliahan akan

diberikan tugas-tugas guna mengimplementasikan materi yang telah diperoleh. Kegiatan

diskusi juga diselenggarakan selama perkuliahan berlangsung

E. Literatur

1 Betha Sidik,Pemrograman Web Dengan HTML, Informatika, Bandung, 2001.

2 Tim Evans,HTML 4: 10 Minute Guide,QUE,USA,1998.

3 Wahana Komputer, Pembuatan Program Sistem Informasi Akademik Berbasis ASP,

Salemba Infotek,Jakarta,2003.

4 Wahana Komputer, Pemrograman HTML 4.1,Andi, Yogyakarta, 2003.

F. Materi Kuliah

PERTEMUAN TOPIK BAHASAN BACAAN/BAB

Pertemuan 1 Pengenalan web Diktat kuliah/

Pertemuan 2,3 Pengenalan HTML Diktat kuliah/

(5)

Pertemuan 5 Pemformatan teks HTML Diktat kuliah/

Pertemuan 6,7 Tabel

UJIAN TENGAH SEMESTER

Pertemuan 8 Hyperlink Diktat kuliah/

Pertemuan 9 Pengelolaan gambar Diktat kuliah/

Pertemuan 10 Form Diktat kuliah/

Pertemuan 11 Javascript Diktat kuliah/

Pertemuan CSS Diktat kuliah/

Pertemuan 14 Mengupload web Diktat kuliah/

(6)

BAB I

PENDAHULUAN

A. Internet

Interconnected Network - atau yang lebih populer dengan sebutan Internet - adalah

sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan

jaringan-jaringan komputer di seluruh dunia.

Dalam berkomunikasi antar komputer global tersebut diperlukan suatu protokol yang

disebut TCP/IP (transmission Control Protocol/Internet Protocol)

Protokol adalah suatu petunjuk yang menunjukkan pekerjaan yang akan user lakukan

dengan internet (bahasa komunikasi), apakah akan mengakses website, melakukan transfer

file, mengirim email, dan sebagainya. Protocol bisa dibayangkan seperti suatu bahasa yang

digunakan untuk berkomunikasi antara berbagai jenis komputer maupun system operasi yang

terhubung di internet.

B. Web

Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai

komputer yang terhubung ke internet, yang dapat memudahkan pengguna komputer untuk

berinteraksi dengan pengguna internet lainnya dan mencari informasi yang diperlukan.

Informasi-informasi dalam web mempunyai link yang menghubungkan informasi tersebut ke

informasi lain dalam jaringan internet. Link mempunyai tanda khusus, bisa berupa teks

bergaris bawah dan berwarna, ikon maupun gambar yang dikelilingi suatu kotak.

Untuk mengetahui apakah suatu teks atau gambar tersebut merupakan tanda link adalah

dengan melihat perubahan bentuk pointer mouse. Jika penunjuk mouse berubah bentuk

menjadi gambar tangan yang sedang menunjuk,berarti teks atau gambar merupakan suatu link

yang menghubungkan anda ke informasi lain dalam World Wide Web.

System yang menghubungkan informasi-informasi melalui link disebut dengan nama

hypertext. Istilah hypertext kemudian berubah menjadi hypermedia, dimana link-link

penghubung antar informasi bukan lagi hanya berupa teks, tetapi juga bisa berupa file

multimedia seperti gambar, suara dan video.

WWW sendiri bukan sekedar jaringan seperti internet namun didalamnya terdapat set

aplikasi komunikasi dan system perangkat lunak yang memiliki karakteristik sebagai berikut :

Terletak pada internet host dan client.

Protocol yang digunakan adalah TCP/Ip.

Mengenal tag-tag HTML.

Mampu merelasikan komunikasi data dua arah.

Pengguna dapat mengakses informasi text, gambar, suara.

(7)

Pengguna dapat juga mengakses server dengan protocol HTTP, FTP, Telnet dan

sebagainya.

Web saat ini digunakan sebagai standar interface pada layanan-layanan yang ada

diinternet. Kegunaan web antara lain sebagai :

Penyedia informasi

Media komunikasi email

Transaksi bisnis

Didamping itu belakangan ini semakin bnyak perusahaan-perusahaan dan instansi yang

menggunakan web sebagai suatu sistem informasi, karena :

Akses informasi yang mudah (real time)

Setup server lebih mudah

Informasi mudah didistribusikan

Multiplatform

C. Sejarah lahirnya Web

Pada tahun 1993, tim yang dikepalai oleh Berners-Lee di European Particle Physics

Lab (CERN) di Geneva Swiss,mengembangkan suatu cara untuk menshare data antar

koleganya dengan sesuatu yang disebut Hypertext. Pemakai di CERN dapat menampilkan

dokumen pada layar komputer dengan menggunakan software baru. Dengan kode2 khusus

yang disisipkan dalam dokumen tersebut maka pemakai dimungkinkan untuk meloncat dari

dokumen satu ke dokumen lainnya pada monitor dengan memilih sebuah hyperlink. Cara

inilah yang digunakan sebagai dasar dari yang disebut sekarang dengan World Wide

Web,yang sekarang diteliti dan dikembangkan oleh W3C, World Wide Web Consortium.

D. Cara Kerja Web

Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman web

(web pages)

Web page adalah file-file yang disimpan dalam sebuah komputer yang disebut web

server.

Komputer-komputer membaca webpage,disebut sebagai web client.

Web client menampilkan page (halaman web) dengan menggunakan program yang

disebut sebagai browser.

E. HomePage

Setiap institusi perseorangan atau perusahaan yang memiliki informasi di web

memerlukan suatu alamat (URL) khusus yang disebut website. Setiap informasi yang

(8)

informasi dan link yang menghubungkan suatu informasi ke informasi lain baik dalam web

page yang sama atau web page lain pada website yang berbeda.

Sebelum mengakses berbagai informasi pada suatu website,yang pertama dijumpai

adalah halaman web pembuka yang disebut home page. Home page ini merupakan halaman

pertama dari suatu website yang berisi apa dan siapa dari perusahaan atau organisasi pemilik

website tersebut. Home page juga berisi link-link ke dokumen informasi lebih lanjut tentang

isi website tersebut. Pada dasarnya home page adalah sarana untuk memperkenalkan secara

singkat tentang apa yang menjadi isi dari keseluruhan website dari suatu organisasi atau

pribadi.

F. Hypertext Transfer Protocol (HTTP)

HTTP adalah suatu protocol untuk menentukan aturan yang harus diikuti oleh web

browser dalam meminta atau mengambil suatu dokumen, dan oleh web server dalam

menyediakan suatu dokumen yang diminta.

Protocol ini merupakan protocol standar yang digunakan untuk mengakses dokumen

HTML. Jika kita sedang browsing dan pada address bar ada tulisan http://www.yahoo.com

maka ini merupakan salah satu penggunaan protocol HTTP dalam web.

G. Universal Resource Locator

Salah satu subyek internet yang paling awal harus dikenal adalah URL (Uniform

Resource Locator). URL dapat didefinisikan sebagai sarana untuk menentukan alamat yang

akan dipakai untuk mengakses internet, khususnya website.

Secara garis besar , URL terdiri dari jenis protocol yang dipakai, nama webserver, dan

direktori. Keseluruhan URL yang lengkap akan berbentuk seperti :

Protocol:// nama host / path / nama file

Penjelasan :

Protocol adalah protocol yang digunakan oleh suatu browser untuk mengambil

informasi (http,ftp,mailto,dan lain-lain)

Nama host adalah nama dari host yang dipanggil atau internet protocol.

Path adalah lokasi path/direktori tempat file-file diletakkan pada webserver.

nama file adalah nama file yang dipanggil.

Contoh pemanggilan URL :

http://www.stmikelrahma.ac.id/dosen/daftardosen.php

keterangan :

(9)

www.stmikelrahma.ac.id adalah nama dari server komputer dimana informasi yang

dicari berada.

Dosen adalah jalur/path dari informasi yang dicari

Daftardosen.php adalah nama file dimana informasi tersebut berada.

Macam-macam URL sesuai konteksnya :

URL file (FTP : File Transfer Protocol) :

Protocol ini dirancang untuk memungkinkan pemakai mentransfer file dalam format

teks atau biner dalam server komputer di internet. Contoh : ftp.usma.edu/pub/msdos/

URL Gopher :

Protocol ini dirancang untuk mengakses server gopher. Server gopher lebih rumit untuk

diakses dari pada server FTP. Beberapa server gopher dapat berada

Contoh : gopher://wiretrap.spies.com/

URL News (Network News Transfer Protocol) :

Merupakan protocol untuk mendistribusikan berita di usenet. Usenet adalah system

yang dirancang sebagai forum diskusi dengan didasarkan pada topik-topik yang disebut

newsgroup.

Contoh : news:comp.infosystems.www.announce

Telnet

Adalah protocol yang digunakan untuk login ke suatu server komputer.

URL HTTP (Hypertext Transfer Protocol) :

HTTP adalah suatu protocol internet yang digunakan oleh World Wide Web. Dengan

protocol ini sebuah web client (browser) seperti Internet Explorer atau netscape dapat

melakukan pertukaran data hypermedia, seperti teks, gambar, suara, bahkan video

dengan web server.

H. Domain Name System (DNS)

Komputer-komputer di internet menggunakan suatu format penamaan standar untuk

mempermudah pengelolaan server komputer di internet. System penamaan server komputer

adalah Domain Name System (DNS). DNS membuat suatu tingkat-tingkat domain yang

merupakan kelompok komputer yang terhubung ke internet.

Suatu host dikenali berdasarkan nomor IP address, pengalamatan IP address, ini berupa

susunan angka-angka, sedangkan manusia lebih mudah mengingat huruf dibandingkan angka.

(10)

Dengan menggunakan name address ini maka perubahan konfigurasi terhadap sebuah

host tidak mempengaruhi keberadaan host tersebut. Sehingga 1 mesin dapat menggunakan

banyak nama tetapi 1 nama hanya boleh digunakan oleh 1 mesin saja.

Berikut ini adalah nama domain beserta jenis organisasinya :

Nama domain Jenis Organisasi

Com Organisasi komersial

Edu Lembaga pendidikan

Gov Lembaga pemerintahan

Int Organisasi international

Mil Organisasi militer

Net Provider internet

Org Organisasi umum

Au Australia

At Austria

(11)

BAB II

PENGENALAN HTML

HTML kependekan dari HyperText Markup Language. Yaitu suatu format data yang

digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer ke

platform komputer lainnya,tanpa perlu melakukan suatu perubahan apapun.

HTML tidak hanya mampu menampilkan teks tapi juga dapat menampilkan

format-format lain dari teks tersebut, misalnya tabel, list, form, frame serta dapat digabungkan dengan

obyek suara, gambar, video maupun Java.

Dokumen HTML :

Dokumen HTML adalah adalah file teks murni yang dapat dibuat dengan sembarang teks

editor. Disebut juga sebagai web page. Dokumen HTML/web page adalah dokumen yang

disajikan dalam browser,umunya berisi informasi ataupun interface aplikasi dalam internet.

Dokumen ini mempunyai ekstensi file “htm” atau “html”.

Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang

digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut

dalam suatu dokumen. Kita dapat menentukan baris-baris mana yang merupakan judul,

menentukan gambar yang harus tampil dan pengaturan format teks dan lain sebagainya.

Cara membuat dokumen HTML :

1. dengan text editor (notepad,editplus,dll)

2. HTML editor (frontpage,dreamweaver, publisher, webpagemaker,dll)

Elemen HTML

Suatu elemen HTML terdiri dari tag-tag dan atributnya.

Tag :

Sewaktu browser menampilkan halaman web. Browser akan membaca teks pada dokumen

HTML dan mencari kode khusus yang disebut tag. Tag biasanya merupakan suatu pasangan tag

awal <…> dan tag akhir </…>.

Tag yang mengandung tag lain didalamnya disebut sebagai nested tag.

Sebagai catatan,tidak semua tag didukung oleh semua browser. Jika suatu browser tidak

mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang tidak dikenalinya dan

(12)

Atribut :

Tag awal biasanya memiliki beberapa buah atribut yang menyatakan karakteristiknya.

Misal :

digunakan untuk membuat rata kiri suatu paragraph. Tag yang digunakan adalah <p> dan

atribut yang menyertainya adalah align dengan nilai left.

Dalam HTML nilai atribut dalam pasangan tanda petik ganda kecuali jika :

Nilai merupakan suatu kumpulan dari nilai tertentu (misal dalam <P ALIGN=”left”>,

tanda petik ganda boleh dihilangkan. Maka penulisannya boleh <P ALIGN=left>).

Nilai hanya berisi angka,h uruf,dan titik (dalam <IMG SRC=”Picture/alam.gif”

ALT=”menampilkan gambar pemandangan alam”>, kedua nilai tersebut memerlukan

tanda petik ganda karena SRC mengandung tanda “/”, dan ALT mengandung spasi).

Atribut yang menyertai elemen HTML adalah :

Version = cdata (data adalah urutan karakter termasuk karakter khusus. Nilai atribut ini

sudah dispesifikasi oleh HTML DTD yaitu HTML Document Type Definition,yang

berupa definisi tipe dokumen.

Atribut lain yang boleh disertakan :

Lang (language information) = language kode,digunakan untuk mengontrol browser

dalam menampilkan karakter khusus. Atribut ini dangat membantu mencari alamat

web,karakter khusus,dan lainnya.

Format dokumen HTML :

Dokumen HTML disusun oleh elemen-elemen/komponen dasar pembentuk dokumen

HTML. Elemen tersebut dapat berupa teks murni atau bukan teks,atau kombinasinya.

Beberapa elemen yang tidak mengharuskan tag berpasangan :

1. paragraph <p>

2. line break <br>

3. horisontal rule <hr>

4. list item <li>

Aturan penulisan tag :

1. tag HTML diapit dengan dua karakter kurung bersudut < dan >

2. tag HTML secara normal selalu berpasangan seperti <b> dan >/b>

(13)

4. Bebas (huruf kapital atau kecil atau campuran huruf besar –kecil) dan tidak sensitif case

artinya tag <b> berarti sama dengan <B>.

5. jika dalam suatu tag ada tag lagi,maka penulisan tag akhir tidak boleh bersilang,harus berurut.

Misalnya <b><I> maka akhirnya harus </I></b>.

Pola dasar penulisan dokumen HTML :

<HTML >

<HEAD>

…….informasi tentang dokumen HTML

</HEAD>

<BODY>

……Informasi yang ditampilkan dalam browser web

</BODY>

(14)

Penjelasan :

Bagian Head :

Kepala dokumen dinyatakan dengan pasangan tag <HEAD>…</HEAD> yang merupakan

pembuka dari dokumen HTML. HEAD berisi informasi-informasi yang menjelaskan tentang

dokumen HTML,seperti judul dokumen, basis URL suatu dokumen, hubungan antar

dokumen dalam HTML, dan indeks suatu dokumen. Informasi yang ada di bagian HEAD

tidak akan terlihat ketika dokumen tersebut dibuka pada suatu browser.

Elemen-elemen pada bagian Head bertugas mengerjakan hal-hal berikut :

1. menyediakan judul dokumen

2. menjadi jembatan antar dokumen

3. memberi tahu browser untuk membuat form pencarian

4. menyediakan metode untuk mengirim pesan.

Elemen-elemen yang ada pada head :

Elemen Title

Untuk membuat judul pada suatu dokumen HTML digunakan pasangan tag

<TITLE>….</TITLE>. Tag TITLE hanya boleh berada di bagian HEAD dan setiap

dokumen hanya boleh memiliki satu judul.

TITLE bukan bagian dari teks dokumen dan tidak boleh mengandung tag-tag lain. TITLE

biasanya ditampilkan oleh browser pada title bar dari jendela browser dan berfungsi

sebagai label untuk jendela dari browser tersebut.

Listing program 2.1 contoh penggunaan elemen title

<HTML>

<HEAD>

<TITLE> Judul Dokumen HTML</TITLE>

</HEAD>

<BODY>

</BODY>

(15)

Hasilnya dapat dilihat pada gambar berikut :

Gambar 2.1 menampilkan judul dokumen HTML

Elemen Base

Elemen ini dapat digunakan untuk mempersingkat penulisan URL dengan memberikan

hubungan relatif pada link dari dokumen. BASE merupakan suatu elemen pada HTML

yang berfungsi menyediakan suatu jalur pencarian bagi dokumen-dokumen yang

mempunyai hubungan dengan dokumen pengguna tag BASE.

Dengan menggunakan BASE, user dapat mengikuti link dari dokumen HTML yang kita

buat,meskipun dokumen telah berpindah tempat. Hal ini terjadi jika user mengambil suatu

file dan membacanya secara local di komputernya. Tanpa menggunakan BASE referensi

yang menuju dokumen lain akan menjadi kacau karena dokumen yang direferensikan

(16)

Listing program 2.2 : penggunaan tag base

<UL>

<A HREF=HTTP://www.cnn.com>CNN Today</A>

<BR><A HREF=HTTP://www.voa.com>VOA on Focus</A>

</UL>

</BODY>

</HTML>

Elemen Link

Tag <LINK> menyatakan hubungan antara dokumen saat ini dengan dokumen lain. LINK

juga digunakan untuk menyatakan pengarang, indeks dan istilah.

LINK berpengaruh pada keseluruhan isi dokumen,karena itu LINK berada di bagian

kepala. Suatu dokumen dapat banyak mempunyai LINK dengan berbagai atributnya untuk

menyatakan semua hubungan yang mungkin antara dokumen tersebut dengan dokumen

lain yang berhubungan.

Lihat tabel berikut :

Atribut Fungsi

HREF Menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK

tersebut.

REL Menyatakan hubungan antar dokumen saat ini dengan nilai pada HREF

REV Menyatakan hubungan antara dokumen saat ini dengan nilai

HREF,hanya saja dalam hubungan yang berlawanan dengan REL.

TYPE Spesifikasi tipe dan parameter untuk link style sheet.

(17)

Listing program 2.3 : penggunaan tag LINK

<HTML>

<HEAD>

<TITLE> penggunaan tag LINK</TITLE>

<META NAME=”description” CONTENT=” penggunaan tag

LINK”>

Elemem META digunakan untuk memberikan informasi tentang suatu dokumen. Elemen

ini tidak dimaksudkan untuk menggantikan elemen TITLE yang memberikan informsi

tentang judul suatu dokumen tetapi untuk memberikan informasi lain yang ber manfaat

bagi browser ataupun server. Berikut ini contoh penggunaan tag meta :

<META HTTP-EQUIV=”refresh” CONTENT=”60”

URL=”www.friendster.com/asihwinantu”>

elemen META diatas dimaksudkan untuk menginstruksikan browser untuk menunggu 60

detik untuk kemudian memanggil dokumen baru. Instruksi semacam ini digunakan jika

dokumen pindah ke lokasi lain.

Atribut Fungsi

HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon protokol

tertentu.

NAME Untuk menambahkan keterangan elemen. Jika atribut ini tidak

ada diasumsikan sama dengan HTTP-EQUIV.

URL Mendefinisikan target dokumen.

CONTENT Menunjukkan respon nilai dari properti.

(18)

META dengan HTTP Header

Atribut HTTP-EQUIV digunakan sebagai pengganti atribut name untuk menampilkan

dokumen yang ditunjuk lewat HTTP .

Lihat kode berikut :

<META HTTP-EQUIV=”Expires” CONTENT=”tue,23 Jul 2006 17:10:50

GMT”>

dan menghasilkan dalam header HTTP :

Expires : tue,23 Jul 2006 17:10:50 GMT

Dengan demikian,bisa digunakan untuk menentukan slainan yang baru untuk dokumen.

META dengan search engine

Digunakan untuk spesifikasi keyword (kata kunci) oleh search engine. Jika beberapa

META menggunakan atribut “lang” untuk menampilkan hasil pencarian oleh atribut

“lang”, lihat contoh berikut :

< -- for speakers of US english -- >

<META NAME=”keywords” lang=”en-us”

content=”vacation,Greece,Water”>

< -- for speakers of British english -- >

<META NAME=”keywords” lang=”en-us”

content=”holiday,Greece,Water”>

META dan PICS

PICS adalah Platform for Internet Content Selection, merupakan infrastruktur untuk

mengelompokkan label (meta data) dengan isi internet, digunakan untuk membantu

orangtua dan guru mengontrol apa yang bisa diakses anak-anak diinternet.

Listing program 2.4 : deklarasi META untuk menyisipkan PICS <HEAD>

<META HTTP-EQUIV=”pics-Label” Content=’

(PICS-1.1 “http://www.yahooligans.com/v2.5”

labels on “2006.11.05T08:15-0500”

until “2007.12.31T23:59-00:00”

for http://w3.org/PICS/overview.html

ratings (suds 0.5 density 0 color/hue 1))

(19)

<TITLE> …. CHILDREN’S EDUCATION….</TITLE>

</HEAD>

META dan data profile

Atribut profile dalam HEAD menunjukkan lokasi profile meta data. Nilai atribut profile

adalah URL. Browser menggunakan URL untuk 2 hal,yaitu sebagai nama unik dan

sebagai link.

Berikut contoh META dengan “author”, “copyright”, “keywords” dan “date”.

Listing program 2.5 : deklarasi META Data Profile

<TITLE>STMIK El Rahma</TITLE>

<META name=”keywords” content=”Komputer, visi-misi, sejarah,

jurusan”>

</HEAD>

Bagian Body :

Section BODY yang dinyatakan dengan tag <BODY>…</BODY> merupakan elemen

terbesar di dalam dokumen HTML. Bagian ini bukan hanya untuk memasukkan informasi

atau isi dokumen tetapi juga bisa memberikan format tertentu pada suatu kelompok teks,

membuat tabel, form dan lain sebagainya.

Listing program 2.6 : contoh dokumen dasar HTML <HTML>

<HEAD>

<TITLE> Judul Dokumen HTML</TITLE>

</HEAD>

<BODY>

masukkan teks dan isi tampilan halaman HTML disini

</BODY>

</HTML>

Simpan dokumen tersebut dengan ekstensi .htm atau .html. dan buka dengan program web

(20)

file teks tersebut sebagai suatu dokumen HTML dan akan menampilkan isinya sebagai suatu

halaman web.

Gambar 2.2 tampilan dokumen html

Atribut Elemen Body

Elemen BODY mempunyai banyak atribut. Berikut ini adalah atribut-atribut yang menyertai

elemen BODY.

Atribut Fungsi

ALINK Menyatakan warna link yang sedang aktif

BACKGROUND Menyatakan file gambaryang akan digunakan sebagai gambar latar

belakang dari halaman HTML.

BGCOLOR Menyatakan warna yang digunakan sebagai latar belakang halaman web.

BGPROPERTIES Jika diset FIXED, membuat suatu watermark yaitu background tetap (tidak

ikut menggulung jika halaman di scrooling)

LEFTMARGIN Mengatur margin kiri dari isi dokumen dengan ukuran pixel.

LINK Menyatakan warna dari link yang belum pernah dikunjungi.

TEXT Mengatur warna teks dokumen web.

TOPMARGIN Mengatur margin atas dari isi dokumen dengan ukuran pixel.

VLINK Menyatakan warna dari link yang pernah dikunjungi.

Tabel 2.3 : Atribut BODY dan fungsinya

Warna yang digunakan dalam dokumen HTML menggunakan kode heksadesimal atau nama

dari RGB. Berikut ini adalah tabel nama warna dan nomor hexadesimalnya.

Warna Nomor Hexadesimal

Black #000000

Maroon #800000

(21)

Green #008000

Tabel 2.4 : Tabel warna dan Nomor Hexadecimal

Tag-tag Dasar HTML :

1. HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML.

Tag ini harus dituliskan oleh pemrogram web sebagai tag pertama dalam dokumen HTML.

Sintaks:

Tag awal : <HTML> Tag akhir : </HTML>

2. Head

Merupakan tag setelah <HTML>,digunakan untuk menuliskan keterangan tentang dokumen

web yang akan ditampilkan.

Sintaks:

Tag awal : <HEAD> Tag akhir : </HEAD>

3. Title

Merupakan tag dalam head yang harus dituliskan untuk memberi judul/informasi pada

caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam

browser.

Sintaks:

(22)

4. Body

Merupakan section utama dalam dokumen web. Di bagian body inilah semua bagian

dokumen yang akan ditampilkan dalam browser harus dituliskan/didefinisikan.

5. Paragraph

Dalam web,informasi yang merupakan satu pikiran utama disimpan dalam 1 paragraf. Setiap

paragraf dimulai dengan tag <P>, tidak harus dituliskan </P> sebagai akhir paragraf,karena

tag <P> tidak didefinisikan mempunyai tag akhir.

Setiap pergantian paragraf harus dimulai dengan <P>.

6. Line break

Menyisipkan satu baris baru dalam satu paragraf.

7. Heading

Heading = judul topik dalam dokumen

Heading akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga

dimanfaatkan untuk menunjukkan tingkatan kepentingan dari teks yang akan ditampilkan.

Dalam HTML terdapat enam tingkatan heading,yang diberi nomor dari 1-6,dimana heading

nomor 1 merupakan heading terbesar.

Sintaks :

<Hy> teks yang menjadi heading </Hy>

dimana y merupakan nilai/nomor dari heading.

8. Garis mendatar/horisontal rule

Garis pada umumnya digunakan sebagai pemisah antar bagian atau paragraf. Tag <hr>

disisipkan pada bagian yang akan diberi garis. Lebar dan ukuran garis dapat diatur dalam

bentuk poit atau dalam bentuk ukuran relatif dalam window browser.

Sintaks :

<hr width=”x” size=”x”> dimana x berupa angka/nilai.

9. Komentar

Dalam dokumen web ada sebagian teks yang berfungsi sebagai catatan atau komentar

terhadap dokumen itu sendiri, yang tidak ditampilkan dalam browser.

Komentar bisa disisipkan di bagian mana saja di seluruh dokumen web,diletakkan pada

bagian-bagian teks dokumen yang memang perlu dikomentari.

(23)

Listing program 2.7 : Contoh penyisipan komentar dalam dokumen HTML

<!DOCTYPE HTML PUBLIC “ -//W3C//DTD HTML 4.0 Frameset//EN”>

<!saved from url=(0024)http://www.webgaul.com/ -- >

Listing program 2.8 : Contoh dokumen HTML

<HTML>

<HEAD>

<TITLE> World Wide Web</TITLE>

<BODY>

<CENTER><H1>Definisi World Wide Web</H1></CENTER>

WWW adalah layanan yang paling sering digunakan dan memiliki

perkembangan yang sangat cepat karena dengan layanan ini

kita bisa menerima informasi dalam berbagai format

(multimedia). Untuk mengakses layanan WWW dari sebuah

komputer (yang disebut WWW server atau web server) digunakan

program web client yang disebut web browser atau browser

saja. Jenis-jenis browser yang sering digunakan adalah:

Netscape Navigator/Comunicator, Internet Explorer, NCSA

Mosaic, Arena, Lynx, dan lain-lain.

Surfing merupakan istilah umum yang digunakan bila

menjelajahi dunia maya atau web. Tampilan web yang sangat

artistik yang tidak hanya menampilkan teks tapi juga

gambar-gambar yang di tata sedemikian rupa sehingga selalu membuat

betah netter untuk surfing berjam-jam. Karena itu para

netter harus sangat memperhitungkan rencana web mana saja

yang akan dikunjungi atau batasi informasi yang ingin

diakses, karena bila tidak netter akan tersesat kedalam

rimba informasi yang maha luas.

</BODY>

</HTML>

(24)

(25)

BAB III

TEKS DALAM PARAGRAF

Suatu paragraf dalam dokumen HTML ditandai dengan tag <P>…</P>. Tag akhir boleh

tidak dipergunakan. Suatu paragraf secara otomatis akan berakhir jika paragraf baru

dimulai,pemakaian heading, tabel, blockquote, atau list. Atribut yang digunakan dalam paragraf

adalah ALIGN yang mempunyai tiga nilai, yaitu LEFT untuk rata kiri, RIGHT untuk rata kanan,

CENTER untuk rata tengah.

Menambah dan menghapus baris baru

Dalam membuat halaman web, teks dapat ditulis dalam baris baru. Tag <BR> dipergunakan

untuk membuat teks, ditulis pada baris berikutnya. Tag ini merupakan single text, artinya hanya

mempunyai tag awal tetapi tidak mempunyai tag akhir.

Menambahkan heading

Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu

dokumen HTML.HTML menyediakan enam tingkatan heading. Heading dinyatakan dengan tag

<Hx>….</Hx>, dimana x merupakan nomor level heading, dari 1-6.

Atribut yang menyertai tag <H> adal;ah ALIGN, yang memungkinkan sebuah heading untuk

ditampilkan rata kanan,kiri mapupun tengah,yaitu ALIGN = left, ALIGN =right, ALIGN =center.

Listing program 3.1 : Pemakaian heading

(26)

Gambar 3.1 Pemakaian tingkatan heading

Menambahkan garis horisontal

Untuk memberi garis pemisah antar baris, digunakan tag <HR>. tag ini akan membuat garis

horisontal, selebar jendela browser. Atribut yang dipunyai adalah :

Atribut Fungsi

ALIGN Untuk perataaan garis, diset dengan nilai left, right, center.

WIDTH Untuk mengatur panjang garis horisontal yang dapat ditentukan dengan

nilai pixel atau persen.

SIZE Untuk mengatur ketebalan garis horisontal,nilai dalam satuan pixel.

NOSHADE Menampilkan garis horisontal tanpa bayangan 3D.

COLOR Memberi warna pada garis horisontal.

Tabel 3.1 : atribut dari tag <HR>

Penggunaan tag DIV

Tag <DIV> digunakan untuk membagi dokumen HTML dala hierarki yang terstruktur. Teks

yang dikelilingi oleh tag <DIV>…</DIV> akan diformat menurut nilai atribut ALIGN yang

ditentukan di dalamnya. Nilai atribut ALIGN yang digunakan adalah left, right, center.

(27)

Tag ADDRESS digunakan untuk memberikan informasi pembuat situs web, seperti nama,

e-mail, organisasi atau tanggal terakhir update halaman web. Informasi ini biasanya diletakkan di

bagian bawah dokumen.

Listing program 3.2 : penggunaan tag ADDRESS

<H5> author : </H5>

Asih Winantu,S.Kom

[email protected] </A><BR>

</ADDRESS>

Gambar 3.2 tag ADDRESS untuk informasi dokumen

Menggunakan tag blokquote

Tag BLOCKQUOTE digunakan untuk menuliskan suatu kutipan teks. Browser akan

menampilkan kutipan teks dengan mengindentasi teks tersebut atau dengan membuatnya miring.

(28)

Listing program 3.3 : penggunaan tag BLOCKQUOTE

<HTML>

<HEAD><TITLE>QUOTATION</TITLE>

</HEAD>

<BODY>

<H4> Wisdom Of The Day : </H4>

Kita mengukur diri kita dari apa yang kita rasa mampu untuk

Kerjakan. Orang lain menilai diri kita dengan mengukur dari

apa yang telah kita lakukan

</BLOCKQUOTE>

<H5>By :Henry Wadsworth Longfellow</H5>

</BODY>

</HTML>

(29)

BAB IV

PEMFORMATAN TEKS HTML

Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaaan

dan penekanan terhadap isi dan maksud dari teks tersebut.perbedaan ditampilkan dalam bentuk

huruf tebal,miring,garisbawah dan lain sebagainya.

Jenis-jenis pemformatan teks antara lain :

1. Teks pre format

Jarak antar kata/kalimat dalam dokumen web adalah sebesar 1 spasi. Jarak antar kata atau

kalimat yang ditampilkan dalam browser web adalah 1 spasi,berapapun jumlah spasi dalam

dokumen web sesungguhnya.

Agar browser dapat menampilkan dokumen tersebut sesuai dengan yang ada di dalam

editor teks,maka teks yang bersangkutan harus diberi tanda/tag <Pre>…</pre>.

Dengan tag <pre>,teks akan ditampilkan dalam browser dengan ukuran font dan lebar fix.

Tag ini juga akan menjaga spasi,baris baru dan tab sesuai dengan aslinya pada saat

ditampilkan dalam browser. Jadi tag <pre> akan membuat tampilan dokumen HTML pada

browser sama dengan tampilan pada teks editor. Tag ini sangat berguna bila dokumen HTML

digunakan untuk menampilkan kode pemrograman komputer.

Contoh :

<html>

<head>

<title> menggunakan tag pre </title>

</head>

Atau untuk menampilkan kode program seperti ini :

(30)

</html>

Hasilnya di browser :

gambar 2 : tampilan kode program di browser

2. Pemformatan karakter/font

Tag <font> digunakan untuk mengatur jenis,ukuran & warna huruf.

Sintaks :

Keterangan sintaks :

Nama font adalah nama dar jenis font yang terdapat pada komputer. Penggunaan tanda

kutip pada atribut boleh dihilangkan dengan syarat nama font tidak mengandung spasi.

Ukuran font merupakan bilangan,sedangkan warna adalah jenis warna atau kode dari

warna yang bersangkutan.

#000000=hitam #FFFFFF = putih.

3. Pemformatan tampilan teks

Pemformatan tampilan teks pada HTML dibedakan menjadi dua,yaitu logical format dan

physical format.

a. Logical format

Logical format menerapkan layout dokumen secara logis dan terstruktur. Tag-tag yang

(31)

Tag Fungsi

<cite> Untuk menandai suatu kutipan /citation

<code> Untuk menampilkan kode-kode pemrograman

<em> Untuk menandai teks yang ditekankan oleh penulis / emphasis

<kbd> Untuk menandai teks yang harus dimasukkan oleh user melalui keyboard

<samp> Untuk menandai teks yang dimaksudkan sebagai contoh

<strong> Untuk menandai teks yang dianggap sebagai bagian yang penting

<var> Untuk menampilkan nama variabel

<dfn> Untuk menandai sebuah subdefinisi dari daftar definisi

<abbr> Untuk mendefinisikan suatu singkatan

<acronym> Untuk mendefinisikan suatu akronim

<address> Untuk mendefinisikan suatu alamat

<bdo> Untuk mendefinisikan suatu arah teks (by direction order>

<blockquote> Untuk mendefinisikan quotation yang panjang

Table 2 : table daftar tag-tag logical format

b. Physical format

Physical format adalah format terhadap fisik suatu font. Tag yang termasuk physical

format adalah :

Tag Fungsi

<B> Untuk membuat teks tebal /bold

<I> Untuk membuat teks miring/italic

<U> Untuk membuat teks yang digaris bawahi

<TT> Untuk membuat teks yang seperti cetakan mesin ketik / texttype

<s> Untuk membuat teks yang tercoret / strikethrough

<big> Untuk memnampilkan teks dengan huruf lebih besar

<small> Untuk menampilkan teks dengan huruf lebih kecil

<sub> Untuk membuat teks subscript

<sup> Untuk membuat teks superscript.

<strong> Untuk mendefinisikan teks yang ditebalkan

Table 3 : table daftar tag-tag physical format

Contoh penggunaan :

<HTML>

<HEAD>

(32)

</HEAD>

<BODY>

<BR>

<u>Underline</u>

<BR>

<I>Italic</I>

<BR>

<strong>Strong</strong>

<BR>

<em>Emphasis</em>

<BR>

<cite>Citation</cite>

<BR>

<S>strikethrough</s>

<BR>

CO<sup>2</sup>

<BR>

H<sub>2</sub>O

</BODY>

</HTML>

Hasilnya di browser :

gambar 3 : tampilan hasil pemformatan font pada dokumen HTML

4. Karakter khusus/entitas

Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<)

(33)

menginginkan browser untuk menampilkan karakter-karakter tersebut,jkita harus

menyisipkan entitas karakter ke dalam source HTML.

Entitas karakter mempunyai 3 bagian : sebuah ampersand (&),sebuah nama entitas atau

sebuah # dan nomor entitas,dan terakhir adalah sebuah titik koma(;,semicolon).

Kelebihan menggunakan nama dibanding nomor adalah mudah diingat. Kekurangannya

adalah tidak semua browser mendukung nama entitas terbaru;sedangkan dukungan untuk

nomor entitas hampir ada pada setiap browser.

Sebagai catatan , bahwa entitas HTML mempunyai sifat case sensitive.

Untuk mendapatkan kode-kode entitas yang lainnya, kita dapat mengunjungi situs

www.w3.org/TR/WD-entities .

Entitas-entitas yang sering digunakan :

Tabel 4 : Daftar kode-kode entitas

Contoh penggunaan entitas :

<HTML>

<HEAD>

<TITLE> karakter khusus </TITLE>

</HEAD>

 Trade mark

  Non breaking space

& Ampersand

« Anggle quotation mark (left)

» Anggle quotation mark (right)

&poun Poundsterling

&euro Euro

(34)

</HTML>

Hasil di browser :

(35)

BAB V

LINK HTML

Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link dari

satu teks dan atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser

web akan memberikan hightlight pada teks atau gambar yang diidentifikasikan sebagai link

dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link,sering

disingkat sebagai hyperlink atau link saja. Jadi link merupakan suatu gambar/teks yang terkait

dengan suatu alamat tertentu. Jika link diklik,maka dokumen HTML akan menuju ke alamat

tersebut.

Link berhubungan erat dengan anchor. Anchor merupakan suatu yang dapat digunakan

untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan

sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag <A>.

Tag <A> mempunyai dua atribut,yaitu href dan name.

Atribut href digunakan jika sebuah anchor akan digunakan sebagai link, sedangkan atribut

name digunakan jika anchor akan digunakan sebagai tujuan.

Jenis-jenis link :

link relatif

Link ini dibuat jika kita membuat suatu link pada page ke page lain pada komputer yang

sama,tidak perlu menggunakan alamat internet yang lengkap . jika dua page pada direktori

yang sama,kita dapat menuliskan nama file html seperti berikut :

<a href=”file2.html”>Berikutnya </a>

link absolut

Link ini dibuat apabila kita membuat link ke page web lain yang berada pada website lain

di internet. Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut ini

adalah contohnya:

link dalam dokumen yang sama/ pada 1 halaman

Link ini dibuat bila dokumen terlalu panjang,sehingga apabila ditampilkan dalam web

browser akan mengharuskan kita melakukan scroll layar berulang-ulang.

Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link

antarbagian, dengan menandai sertiap bagian tersebut dengan memberinya nama. Sehingga

pada beberapa tempat di dalam dokumen akan ada bagian yang bernama,dan di bagian

(36)

Umumnya teknik ini diimplementasikan pada dokumen-dokumen yang menampilkan

daftar isi dokumen tersebut keudian pada daftar isi ini dimungkinkan untuk diklik langsung

menuju ke isinya.

Caranya:

1 Memberi nama suatu bagian dalam dokumen

a. letakkan kursor pada baris atau teks yang akan menjadi awal dari bagian tersebut.

b. Sisipkan nama bagian tersebut dengan : <a name=”nama bagian”>

2 Membuat link menuju bagian dokumen

Membuat link disini sama dengan cara membuat link absolut atau relatif,hanya saja nama

dokumen dalam link diganti dengan nama bagian dokumen tersebut ditambah tanda #.

<a href=”#namabagian”>Bagian Tentang </a>

Tanda # menunjukkan bahwa link tersebut ditujukan kepada link dalam dokumen yang

(37)

BAB VI

PENYISIPAN GAMBAR

Gambar didalam suatu web page merupakan daya penarik bagi pengunjung suatu website.

Umumnya website dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk

melihat dan membaca isi yang ada di suatu website.

Umumnya browser web dapat menampilkan inline image (yaitu gambar yang disajikan

bersamaan dengan teks),yang mempunyai format :

Graphic Intercahange Format (GIF)

Joint Photographic Experts Group (JPEG)

X Windows / X Bitmap (XBM),gambar dengan tipe hitam-putih.

X-Pixelmap (XPM),yang merupakan tipe lain dari format X-windows.

Portable Network Graphic (PNG)

Format file gambar akan diketahui darti ekstensi nama file gambar tersebut.

Untuk menyertakan sebuah inline image dalam dokumen web digunakan tag :

dimana “nama image” adalah URL dari gambar tersebut.

Bila ingin menggunakan gambar sebagai background/latar belakang dokumen HTML

Tag <img> mempunyai beberapa atribut sebagai berikut :

Atribut Kegunaan

Src Menunjukkan URL atau direktori file gambar

Align Menentukan posisi teks di sekitar gambar dengan nilai :

Top,middle,bottom,left,right

Width Menentukan lebar dari gambar (dalam ukuran pixel)

Height Menentukan tinggi gambar (dalam ukuran pixel)

Alt Menampilkan teks pengganti gambar jika gambar tidak dapat

ditampilkan.

Pada browser tertentu dapat pula ditampilkan sebagai tooltip.

(38)

Untuk mengatur penampilan gambar / alignment,kita mempunyai kefleksibelan pada saat

menampilkan gambar. Kita dapat membuat gambar yang ditampilkan terpisah dari teksnya dan

kemudian menaruhnya agar ditampilkan di kiri,tengah,atau kanan. Atau bisa juga gambar

tersebut ditampilkan bersamaan dengan teks,kemudian diletakkan pada bagian atas,bawah,atau

tengah paragraf. Bila kita tidak mendefinisikan alignment gambar pada atribut,maka secara

default gambar akan ditampilkan secara rata kiri.

Atribut alt pada tag <img> menyediakan tempat untuk menampilkan teks sebagai

pengganti gambar. Pada beberapa browser teks pada atribut alt akan ditampilkan secara

mengambang untuk memberi tahu maksud dari gambar,teks ini muncul apabila kita menaruh

pointer diatas gambar agak lama,disebut juga sebagai tooltips. Atribut “alt” akan memberitahu

reader apa yang dimaksud pada page jika browser tidak dapat menampilkan image.

Contoh image align :

Contoh ini mendemonstrasikan bagaimana mengatur align image dengan teks.

<html>

<head>

<title>Wisata Dunia</title>

</head>

<p align="center"><b><u>Tempat-tempat yang indah didunia

</u></b></p>

<hr>

<p align="left">Inilah tempat-tempat wisata dunia yang banyak

dikunjungi oleh

wisatawan tiap tahunnya:</p>

<p align="left"><img border="0" src=" lawu.jpg" width="148"

height="103">

<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur

Indonesia</p>

<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika <img

border="0" src=" Hawaii.jpg" width="203" height="134"></p>

</body>

</html>

(39)

(40)

Menggunakan gambar sebagai hyperlink :

Menu dalam web page merupakan pilihan link informasi ke web page yang lain. Menu

umumnya dibuat dalam bentuk list ataupun teks bisaa yang mempunyai link. Kita pun dapat

menggunakan image untuk membuat menu,dengan gambar maka menu bisa lebih interaktif

dan langsung memberi gambaran kepada user tentang apa yang akan didapat kalau memilih

menu tersebut.

Contoh

<html>

<body>

<p>

anda bisa menggunakan sebuah gambar sebagai link :

</a>

</p>

</body>

(41)

BAB VII

IMAGE MAP

Image map adalah gambar/image yang mempunyai hyperlink-hyperlink di dalam gambar

tersebut, jadi saat kita mengklik gambar,kita akan diarahkan ke alamat URL yang lain,tergantung

dari bagian gambar yang kita klik. Metode ImageMap mengharuskan pemrogram web untuk

mendefinisikan daerah-daerah dalam suatu gambar (image) yang mempunyai link. Derah yang

didefinisikan berupa bentuk daerah dan koordinat pembatasnya.

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian

koordinat (0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan

bawah gambar (lebar_maks, tinggi_maks).

Definisi bagian atau daerah (map) dalam gambar dinyatakan dalam bentuk obyek :

1. titik (pint)

2. poligon

3. persegi panjang (rect : rectangle)

4. lingkaran (circle)

Informasi dan pemrosesan link yang didefinisikan dengan map ini dibedakan menjadi 2

macam,yaitu :

1. server side

2. client side

Server Side Image Map:

Definisi map disimpan dalam server,sehingga jika suatu daerah dalam gambar yang mempunyai

image map diklik maka browser mengirimkan koordinat daerah gambar yang diklik. Oleh server

koordinat tadi dicocokkan dengan definisi daerah yang ada. Jika koordinat yang diklik tersebut

berada pada definisi daerah yang mempunyai link,maka secara otomatis server akan memberikan

web page baru sesuai definisi link.

Penerapan pada server side image map :

1. definisi peta dari gambar disimpan dalam file teks dengan ekstensi MAP.

2. berikan link berupa URL (dengan nama file berekstensi map),mengapit tag img.

3. tambahkan dalam tag Img atribut ISMAP.atribut ISMAP berfungsi untuk mengindikasikan

bahwa gambar adalah clickable image map.

Format definisi server side imagemap ada dua macam :

format CERN

(42)

format ini mempunyai isi yang sama,akan tetapi berbeda pada peletakan informasinya.

Contoh format NCSA :

#

circle xx.html 52,38,52,17

Contoh format CERN :

#

circle (56,58) xx.html

Berikut ini adalah contoh isi dokumen HTML yang menggunakan server side image map :

Client Side Image Map:

Definisi map disertakan ke dalam dokumen web. Surfer dapat melihat secara langsung

link/webpage yang akan disajikan pada saat pointer mouse berada diatas gambar (pada status bar

dari browser).

Sintaks :

<img src=”nama gambar sebagai map” width=”lebar tampilan

gambar” height=”tinggi tampilan gambar” usemap=”#nama_map”

border=0>

<area shape=”jenis map” coords=”koordinat map” href=”file

yang dipanggil”>

</map>

pada atribut Shape di definisikan nama bentuk daerah:

RECT untuk persegi panjang,dengan coords berupa koordinat pojok kiri atas dan pojok kanan

bawah.

POINT untuk daerah berupa titik,dengan coords berupa x,y.

(43)

CIRCLE untuk daerah berupa lingkaran dengan coords berupa x,y untuk pojok kiri atas dan

x,y untuk pojok kanan bawah,bentuk lingkaran akan disesuaikan dengan definisi

koordinatnya,karena bisa jadi koordinat yang ditampilkan setelah diinterpolasi menunjukkan

suatu bentuk elips.

Penerapan pada client side image map :

berikan definisi map seperti diatas

sisipkan pada tag Img sebuah atribut Usemap

isikan value untuk atribut usemap =”#namapeta”

Value pada atribut usemap diberi tanda # didepan untuk mendefinisikan bahwa definisi peta

berada didalam dokumen html yang bersangkutan.

Software Image Map

Software untuk image map dipergunakan untuk mempermudah pembuatan peta link. Salah

satu contoh software imagemap freeware,adalah MapEdit.

Pada saat mendefinisikan map,maka setiap obyek daerah dalam image tidak boleh

beririsan/overlapping koordinatnya. Maka harus dipersiapkan software pendukungnya,yakni

software untuk membuat gambar/image dan untuk membuat image map.

Software minimum yang fungsional yang dibutuhkan adalah :

MSPaint

MapEdit

WebImage

(44)

gambar 7 : contoh image map

Script dari image map diatas adalah :

<html>

<head><title>Image Map</title></head>

<body>

<area href="profile.html" shape="rect" coords="114, 4,

228, 118">

<area href="fasilitas.html" shape="rect" coords="115,

119, 229, 234">

<area href="Prodi.html" shape="rect" coords="4, 2, 114,

118">

<area href="alumni" shape="rect" coords="4, 115, 114,

232"></map>

<img border="0" src="logostmik.jpg" width="230"

height="235" usemap="#peta"></p>

<p align="center"><b>Selamat Datang</b></p>

</body>

</html>

Link 1 Link 2

(45)

BAB VIII

LIST

List merupakan bentuk yang umum,yang bisaa kita gunakan untuk membuat daftar

sesuatu, jenisnya :

1. list bernomor (ordered list)

list dengan nomor adalah model daftar yang setiap itemnya diberi nomor.

2. list tanpa nomor (unordered list)

adalah model daftar yang setiap itemnya tidak diberi nomor,hanya diberi tanda bullet.

3. list definisi (definition list)

adalah list yang memberikan uraian terhadap suatu item dalam daftar.

Ordered list (list bernomor)

Nomor item secara default adalah menggunakan angka 1,2,3…,dst sampai dengan sejumlah

item dalam list tersebut.

Kita dapat mengubah nomor dalam ordered list tersebut dengan model angka yang lain

dengan mengisi atribut type pada tag <ol>. Type atau jenis nagka yang bisa digunakan untuk

membuat daftar adalah”

• angka romawi (I,II,III atau I,ii,iii)

• huruf (A,B,C atau a,b,c)

Kita bisa mengeset nomor awal permulaan dari daftar dengan memberikan nilai pada atribut

“start” pada tag <ol>.

Contoh:

<P>Shedule for HTML Course</P>

(46)

<li>Creating table</li>

<li>Inserting Image</li>

</ol>

<li>Tuesday</li>

<li>Creating Link</li>

<li>Preparing Website</li>

</ol>

<li>Wednesday</li>

</ol>

</body>

</html>

Gambar 8.1 : penggunaan list bernomor

Unordered list (list tanpa nomor/bulleted list)

secara default adalah menggunakan tanda dot.

Type-type yang bisa digunakan adalah :

• SQUARE / kotak

• DISC / titik

(47)

Contoh :

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<ul>

<li>Sunday</li>

<li>Monday</li>

<li>Tuesday</li>

<li>Wednesday</li>

</ul>

</body>

</html>

Gambar 8.2 : penggunaan list tanpa nomor

Definition list

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag untuk menentukan

(48)

Contoh:

<html>

<head>

<title>Definition List</title>

</head>

<body>

<p><b>List of Internet Resource</b></p>

<dl>

<dt>HTML

<dd>HyperText Markup Langguage is not Language

Programming</dd>

</dt>

<dt>HTTP

<dd>HyperText Transfer Protocol is TCP/IP

Protocol</dd>

</dt>

<dt>Internet

<dd>A network of network</dd>

</dt>

<dt>TCP/IP

<dd>Internet protocol</dd>

</dt>

</dl>

(49)

(50)

BAB IX

TABEL

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap

kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom

menunjukkan kelompok data (item data) dalam satu kesatuan.

Gambar 9.1 : tabel

Elemen-elemen tabel :

Tag Keterangan

<table>...</table> Mendefinisikan sebuah tebel dalam HTML. Jika atribut border

dituliskan, maka browser akan menampilkan tabel dengan border.

<th>…</th> Mendefinisikan sel header tabel, secara default teks dalam sel ini

ditebalkan dan rata tengah.

<tr>…</tr> Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat

mendefinisikan atribut untuk seluruh baris : align(left,center,right)

dan/atau valign (top,middle,bottom)

<td>…</td> Mendefinisikan sebuah sel data tabel, secara default teks dalam sel ini

akan ditampilkan rata kiri dan ditengah secara vertikal. Sel data tabel

dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan

isinya.

<capion>..</caption> Untuk mendefinisikan judul tabel. Caption akan diletakkan rata tengah

dengan huruf tebal /bold. kolom

(51)

Atribut-atribut dalam tabel :

atribut Keterangan

Align={left / center / right} Mendefinisikan perataan sel secara horisontal

Valign={top / middle / bottom } Mendefinisikan perataan sel secara vertikal

Colspan=n Memperlebar sel sejumlah n kolom

Rowspan=n Memperbesar sel sejumlah n baris

Cellpadding = n Mendefinisikan jarak antara isi sel dengan border

Cellspacing=n Mendefinisikan jarakk antar sel

Contoh penggunaan tabel :

<HTML>

<HEAD>

<TITLE> Belajar Tabel </TITLE>

</HEAD>

<BODY>

<h4>Daftar Pegawai STMIK</h4 >

(52)

</TR>

</TABLE>

</BODY>

</HTML>

Tampilan dibrowser :

Gambar 9.2 : contoh tabel di browser

Contoh penggunaan tabel dengan rowspan dan colspan :

<html>

<head>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0"

width="100%">

<caption><b>Daftar Nilai Pemrograman Web 1</b></caption>

<tr>

<th width="67%" colspan="2" >Nilai</th>

</tr>

<tr>

<th width="33%">Tugas</th>

<th width="34%">Praktikum</th>

</tr>

<tr>

<td width="33%">Lutfia</td>

(53)

</tr>

<tr>

<td width="33%">yulia </td>

</tr>

<tr>

<td width="33%">Ardian</td>

</tr>

</table>

</body>

(54)

Tampilan dibrowser :

Gambar 9.3 : tabel dengan elemen rowspan dan colspan

Memberikan background tabel :

Tabel dapat diberi background berupa gambar, dengan cara menambahkan atribut

Background="nama gambar.ext"

Contoh aplikasi penggunaan atribut background :

<html>

<head>

</head>

<body>

<table border="1" Background="isa.jpg" width="50%"

height=50%>

<caption><b>tabel dengan background gambar</b></caption>

<tr>

</tr>

<tr>

</tr>

(55)

</table>

</body>

</html>

Tampilan di browser :

(56)

BAB X

FRAME

Frame adalah elemen dalam HTML yang digunakan untuk membangun halaman web

yang memungkinkan penampilan beberapa halaman web di dalam satu jendela browser. Model

ini sering digunakan untuk memperjelas penyajian informasi.

Tidak semua browser dapat mendukung frame, hanya internet explorer 3.0 keatas dan

netscape navigator 2.0 keatas yang dapat menampilkan frame.

Sintaks :

</frameset>

Dimana n adalah nilai yang digunakan untuk menf=definisikan frame.

Tag-tag pada frame :

Tag Fungsi

<frameset> </frameset> Mendefinisikan himpunan frame

<frame></frame> Mendefinisikan suatu subwindow (frame)

<noframes> Mendefinisikan suatu session tanpa frame, untuk browser yang tidak

mendukung frame

<Iframe></iframe> Mendefinisikan inline frame

Target frame :

Nama target frame Fungsi

_self Digunakan bila target frame adalah ditempat link berada.

_top Digunakan bila target frame adalah window tempat frame berada

_parent Target frame adalah setingkat diatas frame link berada.

(57)

Iframe/inline frame :

Dengan inline frame, memungkinkan pemrogram web untuk membuat frame window yang

mengambang, frame ini berlaku seperti suatu text box, jika browser emlakukan scrool, maka

frame juga aka ikut ter-scroll.

Sintaks :

</iframe>

Contoh inline frame :

<html>

<body>

</body>

</html>

Tampilan dari script diatas :

(58)

Contoh pengaplikasian frame :

<frameset framespacing="0" border="0" rows="64,*,79"

frameborder="0">

<frame name="top" scrolling="no" noresize target="contents"

src="atas.htm">

</frameset>

<frame name="bottom" scrolling="no" noresize

target="contents" src="bawah.htm">

</frameset>

Tampilan dari script diatas adalah :

(59)

BAB XI

FORM DAN INPUT

Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari

pengguna web. Pengguna web dapat memasukkan input melalui halaman web.

Sintaks :

</form>

Keterangan :

1. Atribut action digunakan untuk mendefinisikan URL yang akan digunakan sebagai pemroses

field input form. URL adalah lokasi dokumen yang akan melakukan proses terhadap input

dari form.

2. Pemroses dari form bisa berupa suatu file web, ataupun berupa email :

Contoh Sintaks :

Action berupa file (action=”proses_simpan.php)

Action berupa alamat email (action=mailto:[email protected])

3. Method adalah atribut yang digunakan untuk menyatakan bagaimana masukan-masukan dari

form dikirimkan ke proram CGI (common gateway interface suatu program yang berada di

web server)

Jenis masukan dalam suatu form dibedakan menjadi :

Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa

berupa angka atau teks.

Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya

banyak.

Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.

Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.

List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.

File : untuk menyediakan tombol browse file, untuk inputan yang berupa file

Button : mendefinisikan tombol untuk melakukan pemrosesan form.

o Submit : untuk memenggil url, setelah selesai penginputan form.

o Reset : untuk menginisialisasi setiap elemen form.

o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada

dalam dokumen HTML.

(60)

Contoh penggunaan form :

<tr>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td><input type="radio" value="L" checked

name="jkl">Laki-laki

<input type="radio" name="jkl" value="p">Perempuan</td>

</tr>

<tr>

<td>Alamat</td>

</tr>

<tr>

<td>Propinsi</td>