1 MODUL PEMROGRAMAN WEB 1 OLEH : ENDAR NIRMALA, S.Kom, MT JURUSAN TEKNIK INFORMATIKA UNIVERSITAS PAMULANG 12 KATA PENGANTAR Web merupakan salah satu s...
KATA PENGANTAR Web merupakan salah satu sumber informasi yang banyak digunakan. Berbagai aplikasi web dibuat dengan tujuan agar pemakai dapat berinteraksi dengan penyedia informasi dengan mudah dan cepat melalui dunia Internet. HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen teks. Sehubungan dengan kebutuhan untuk membangun aplikasi web yang bersifat dinamis modul ini dibuat dengan mengkombinasikan HTML dan Java Script. Harapan yang diinginkan agar pembaca khususnya mahasiswa dapat belajar sendiri untuk mengimplementasikannya.
Dengan pendekatan "belajar dengan
mencoba dan berlatih", modul ini dapat menuntun mahasiswa memiliki kemampuan dasar dalam membuat aplikasi web yang dinamis. Modul ini mencakup tentang HTML dan Java Script sehingga pembaca khusunya mahasiswa dapat membuat web sederhana yang cukup menarik. Semua contoh latihan sudah diuji dilingkungan Windows . Untuk lebih melengkapi modul ini anda dapat mendownload sendiri situs-situs tutorial yang berhubungan dengan HTML dan Java Script yang berada di Internet. Akhir kata semoga modul ini dapat memberikan manfaat. Jakarta, Mei 2011 Penulis
DAFTAR ISI .......................................................................................................................... 3 BAB I PENGENALAN WEB ................................................................................................... 5 1.1 World Wide Web...................................................................................................... 5 1.2 Sekilas Cara Kerja Web ............................................................................................ 6 1.3 Pengenalan HTML ................................................................................................... 7 1.3.1 Elemen HTML .................................................................................................... 8 1.3.2 Browser dan Editor ........................................................................................... 8 1.3.3 Struktur script HTML : ....................................................................................... 8 BAB II BASIC TAG HTML.................................................................................................... 10 2.1 Struktur Dasar HTML .............................................................................................. 10 2.1.1 HEAD ............................................................................................................... 10 2.1.2 BODY ............................................................................................................... 11 2.2 Format Dokumen HTML ......................................................................................... 11 BAB III FORMAT TEKS DAN KARAKTER KHUSUS ........................................................... 16 3.1 Format Teks............................................................................................................ 16 3.2 Karakter Khusus ..................................................................................................... 16 BAB IV MENYISIPKAN GAMBAR, SUARA DAN VIDEO ..................................................... 20 4.1. Menyisipkan Gambar ............................................................................................ 20 4.2 Menyisipkan Suara ................................................................................................. 20 4.3 Menyisipkan Video ................................................................................................. 21 BAB V HYPERLINK ............................................................................................................ 22 BAB VI LIST ...................................................................................................................... 25 BAB VII TABEL ................................................................................................................... 29 BAB VIII FORM .................................................................................................................. 33 BAB IX FRAME .................................................................................................................. 38 BAB X CASCADING STYLE SHEET (CSS)............................................................................ 43 10.1. Penulisan CSS ...................................................................................................... 43 10.2 Menggunakan Style sheet .................................................................................... 44 Modul Pemrograman Web 1
BAB XI PENGENALAN JAVA SCRIPT ................................................................................. 52 11.1 Penulisan Java Script ............................................................................................ 52 11.2 Variabel ................................................................................................................ 54 11.3. Tipe Data ............................................................................................................. 55 11.4 Jenis Operator ...................................................................................................... 56 BAB XII STRUKTUR KENDALI DAN FUNGSI ..................................................................... 61 12.1 Struktur Kendali ................................................................................................... 61 12.2 LOOP.................................................................................................................... 64 BAB XIII
FUNCTION DAN ARRAY .................................................................................... 67
13.1. FUNCTIONS ......................................................................................................... 67 13.2 Array ..................................................................................................................... 68 BAB IV KOLEKSI CODE JAVA SCRIPT ................................................................................. 70 14.1 Membuat tanggal ................................................................................................ 70 14.2 Teks jalan distatus bar.......................................................................................... 70 14.3 Animasi Kursor ..................................................................................................... 71 DAFTAR PUSTAKA ............................................................................................................. 74
BAB I PENGENALAN WEB 1.1 World Wide Web Internet merupakan jaringan global yang merupakan sumber daya informasi dengan menghubungkan suatu network dengan network lainnya di seluruh dunia. World Wide Web telah berkembang sangat pesat sejak kemunculannya diawal tahun 1990 an.
Semua perhatian public, baik dari media massa, bisnis,
pemerintah, ataupun perseorangan, tertuju kepada World Wide Web. Melihat daya jangkauannya yang luar biasa, mereka pun mulai berlomba-lomba memanfaatkan World Wide Web untuk memperlancar usahanya. World Wide Web dibangun dari halaman web atau dikenal dengan home page.
Home page sendiri dibuat dengan menggunakan Hypertext Markup
Language (HTML). Tanpa HTML, tidak akan ada home page, dan tanpa home page tidak akan ada World Wide Web. HTML merupakan pondasi dari World Wide Web. HTML merupakan format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer lainnya tanpa perlu melakukan suatu perubahan apapun. Dokumen HTML sebenarnya merupakan suatu dokumen teks biasa sehingga di platform apapun dokumen tersebut dapat dibaca. Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Dengan sistem hypertext pada dokumen HTML, pengguna tidak harus membaca suatu dokumen secara berurutan dari atas ke bawah, tetapi dapat menuju ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung yang akan membawa kita ke suatu topik atau dokumen lain secara langsung.
World Wide Web bekerja berdasarkan dengan tiga mekanisme, yaitu:
Protocol merupakan standard aturan yang digunakan untuk berkomunikasi dengan komputer networking, protokol untuk World Wide Web adalah Hypertex Transfer Protocol (HTTP).
Address, World Wide Web memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) sebagai standard alamat internet.
HTML digunakan untuk membuat dokumen yang dapat diakses melalui web.
1.2 Sekilas Cara Kerja Web Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan dilewatkan oleh suatu protocol HTTP melewati port 80 pada server. Alamat ini adalah URL dari suatu situs yang mempunyai alamat yang unik di Internet. Web Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnya, aturan ini biasa disebut sebagai protocol, standar protocol menggunakan TCP/IP, proses ini dimulai dengan melakukan 3 way handshakes antara sumber dan tujuan. Web browser, suatu aplikasi pada client yang akan menampilkan halaman web sites dari internet. Web browser di install di sisi user (OS) menampilkan informasi ke komputer dengan interpreting bahasa pengkodean HTML, dimana homepage berisi gambar, suara, multimedia, dan resources lainnya yang dapat diakases. Files Coding pada HTML memberikan datanya ke browser apa yang akan ditampilkan ke sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi dari web servernya dan browser akan menginterpretasikan tag HTML untuk link ke halaman berikutnya
1.3 Pengenalan HTML Hypertext Markup Language merupakan bahasa standard yang digunakan untuk menampilkan dokumen web.
Hal-hal yang dapat dilakukan dengan
menggunakan HTML, yaitu: 1. Mengontrol tampilan web page dan content-nya 2. Mempublikasikan dokumen secara on-line sehingga dapat di akses dari seluruh dunia 3. Membuat on-line form yang dapat digunakan untuk menangani pendaftaran, transaksi secara on-line 4. Menambahkan objek-objek seperti image, audio, video dan java applet. Perbedaan utama dokumen HTML dengan dokumen pada umumnya adalah dokumen HTML memiliki elemen-elemen HTML beserta tag-tagnya.
Elemen HTML merupakan komponen penyusun suatu dokumen HTML. Elemen ini dibagi atas 2 bagian utama, yaitu:
Elemen-elemen yang memberikan informasi tentang dokumen tersebut
Elemen-elemen yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser.
1.3.2 Browser dan Editor
a. Browser Browser merupakan software yang di install pada mesin client yang berfungsi untuk meneterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering digunakan biasanya Internet Explorer, Netscape Navigator, Mozilla dan Opera. b. Editor Editor adalah program yang digunakan untuk membuat dokumen HTML, diantaranya MS FrontPage, Notepad, Macromedia DreamWeaver, EditPlus, CuteHTML dan lain sebagainya. 1.3.3 Struktur script HTML :
Latihan : 1. Apa perbedaan Web, Portal dan Blog ! 2. Apa yang dimaksud dengan Web Browser, berikan contoh ! 3. Apa yang dimaksud dengan Web Server, berikan contoh ! 4. Ceritakan proses kerja web !
BAB II BASIC TAG HTML 2.1 Struktur Dasar HTML HTML digunakan untuk membangun suatu halaman web. Banyak orang menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ) , dan disebut tag. Tag biasanya merupakan suatu pasangan, yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk dan tag akhir dinyatakan dalam bentuk . Ada beberapa macam bentuk tag yang dikenal dalam HTML, yaitu :
Tag berpasangan Format : teks
Tag tunggal Format :
Tag yang disertai attribut Format : teks Atribut adalah properti dari suatu elemen HTML
2.1.1 HEAD
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
Menyediakan judul dokumen
Menjembatani hubungan antar dokumen
Memberitahu browser untuk membuat form pencarian
Menyediakan metode untuk mengirim pesan ke tipe browser
Tag <TITLE>, digunakan untuk memberi judul dokumen. Bentuk umumnya : <TITLE> Judul
Tag , digunakan untuk menentukan basis URL sebuah dokumen. Bentuk umumnya : Contoh :
Tag , digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar HTML.
Penggunaan elemen <META> yang paling populer adalah penggunaan properti Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan
pada
menggunakan
properti
teks
yang
Keyword
untuk
terdapat
pada
mengindeks properti
dokumen
Description
dan untuk
mendeskripsikan indeks tersebut. 2.1.2 BODY
Berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam web page. Bentuk Umum : Bgcolor latar belakang : warna Background latar belakang: gambar
2.2 Format Dokumen HTML
: membuat baris baru, tidak memerlukan penutup
: memulai paragaraf baru, tidak memerlukan penutup
: heading sebuah dokumen, nilai n berkisar antara 1 hingga 6.
: membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor. Dengan tag
, maka tag
dan tag tidak diperlukan lagi.
: membuat tampilan menjorok ke dalam seperti identasi. Bentuk umum : ....
Latihan 1 The Cool Web Movie Database Welcome to the Cool Web Movie Database. So far we offer information on the many brilliant films of David Lean: soon, a lot more will be online.
Films with Sam Spiegel Productions
The Bridge on the River Kwai (1957)
Produced by Sam Spiegel, this film was the first of the Lean blockbuster movies, and featured a young Alec Guinness, William Holden, and a brilliant performance from Sessue Hayakawa.
Lawrence of Arabia (1962)
One of my all-time favorite movies, this epic adventure starring Peter O’Toole established Lean as a director who could truly envision film on a grand scale.
Teks dengan Align="center" akan diratakan pada margin tengah.
Teks dengan Align="right" akan diratakan pada margin kanan. <pre> Teks ini mempergunakan s p a s i dan juga tombol ENTER untuk berpindah ke baris ini. Asisten Status ======================= Frans Single Budi Single juga Riyo Double, lho? Chandra duda, he he he...
BAB III FORMAT TEKS DAN KARAKTER KHUSUS 3.1 Format Teks
Font, HTML menyediakan elemen yang dapat dipakai untuk mengubah ukuran, jenis, dan warna suatu teks. …… Face : jenis huruf Size : ukuran huruf yang memiliki nilai dari 1 hingga 7. Nilai 1 digunakan untuk membuat ukuran terkecil, sedangkan nilai 7 adalah ukuran terbesar. Nilai default dari ukuran standar teks adalah 3. Default standar ukuran teks dapat diubah dengan menggunakan tag Color : warna
Latihan 1 FONTSIZE terhadap BASEFONT size=5 teks dengan size=3 teks dengan size= -2
teks dengan size=-1
teks dengan size=+1 teks dengan size=+2 teks dengan size=+3 Latihan 2 Karakter Khusus <pre> Tag ...menebalkan teks Tag ... membuat teks terlihat miring miring Tag ...menggaris bawahi teks Tag <S>... memberikan coretan <s>coretan pada teks Tag <Strike>... memberikan <STRIKE>Coretan sama seperti elemen <S>
Tag membuat teks Tag ... menampilkan teks dalam font Typewriter Tag ... membesarkan teks Tag <SMALL>... <small>mengecilkan teks Tag <SUB>... membuat teks <sub>subscript Tag <SUP>... membuat teks <sup>supercript Tag ... menandai suatu definisi Tag <EM>... menandai suatu <em>penekanan teks Tag ... menyatakan suatu kode program Tag ... menyatakan suatu keyboard Tag ... menyatakan suatu variabel Tag <STRONG>... <strong>menyatakan teks dengan penekanan yang kuat Tag membuat suatu komentar atau keterangan
BAB IV MENYISIPKAN GAMBAR, SUARA DAN VIDEO 4.1. Menyisipkan Gambar Format gambar yang dapat ditampilkan dalam dokumen HTML diantaranya GIF, JPEG, PCX, PNG, WMF, dan BMP, namun yang hanpir sering dikenal disemua browser adalah GIF dan JPG.
height =” ...”
src : nama file gambar Height : tinggi gambar Width : lebar gambar Align : mengatur letak image terhadap teks (top| bottom| middle| left| right|center) Alt : menampilkan teks pada saat image tidak dapat tampil
4.2 Menyisipkan Suara Menyisipkan suara pada halaman web dapat menggunakan embed atau bgsound. Format suara yang dapat disisipkan diantaranya : .wav, .mid, .mp3, dan .au. <embed src="filename.ext" width="x" height="x" autoplay="x" hidden="x" loop="x" volume="x">
Jika ingin memutar file secara otomatis saat halaman web di-load, set autoplay = "true", jika tidak ingin file tersebut diputar secara otomatis, set autoplay = "false". Jika ingin kotak kontrol disembunyikan, gunakan atribut hidden= "true". Biasanya file tersebut akan berhenti bermain setelah selesai, jika ingin diputar secara terus menerus atribut loop = "true". Volume dapat disetting dengan atribut volume, Modul Pemrograman Web 1
nilai dari 1 hingga 100 (default adalah 50). Kotak mengontrol ukuran yang memainkan suara dapat bervariasi dari browser ke browser, tetapi beberapa versi dari Netscape tidak akan menampilkan kotak kecuali ditentukan. (145 dan 60 biasanya baik). Contoh :
Pada beberapa browser bgsound tidak dapat bekerja.
4.3 Menyisipkan Video <embed src="... " width="..." height="..." type=”...”>
BAB V HYPERLINK Kelebihan utama dari HTML adalah kemampuannya untuk memberikan link dari satu teks/gambar menuju dokumen lain atau bagian lain dalam suatu dokumen. Ada empat jenis link :
1. Link relative Membuat link dari satu page ke page yang lain pada komputer yang sama. ….. Contoh : perpustakaan 2. Link absolute Membuat link ke page web lain yang berada pada web site lain di Internet. …. Contoh : Google 3. Link dalam dokumen yang sama : Link jenis ini dibuat apabila dokumen panjang, sehingga apabila ditampilkan dalam bowser web mengharuskan untuk melakukan scroll layer berulang-ulang. Navigasi untuk memudahkan penelusuran dokumen dengan membuat link antar bagian dengan memberinya nama. …….
Link Email Link pada suatu pesan email. ….. Contoh : kirim email
Latihan 1 <TITLE> Contoh Hyperlink <pre> Home | Profil | About | Gallery | Kontak Selamat datang di halaman webku... Terimakasih anda telah berkunjung, jika anda ingin mencari saya dapat searching ke google Jika anda memiliki kesulitan dapat menghubungi saya by email
Latih 2
Lengkapi halaman web diatas sehingga saling terhubung antara halaman yang satu dengan halaman yang lain.
Simpan halaman web sesuai dengan nama linknya, misalnya about.html, profil.html, galery.html, dan kontak.html
Carilah Domain dan Hosting gratis (searching di Internet)
Buatlah Domain untuk alamat web anda dan cobalah lakukan hosting (langkah-langkah pembuatan dan hosting cari di Internet, jika ada masalah diskusikan dengan teman atau Dosen anda)
Kirimkan alamat web anda melalui email ke dosen anda.
Latihan 1 Using List Common Foods of the French Quarter You can visit New Orleans and have a great time without ever leaving the picturesque and partyin’ French Quarter area, particularly if you partake of some of these fabulous local foods:
Beignets - small deepfried donuts in powdered sugar. Best with a steaming fresh cup of coffee.
Seafood Gumbo - a stewlike soup that’s delicious. Typically served with a side of white rice that’s best dumped into the soup directly. Skip the chicken gumbo some places serve too: the seafood is definitely better!
Jambalaya the best of all possible dinners. You’ll just have to order it so you can find out what it’s about.
alcohol - it’s the grease on the wheels of the tourist experience in the French Quarter, but I’m not convinced it’s as necessary for a good time as the bars suggest...
Whatever you do, make sure you have FU N!
Komputer
Komputer adalah seperangkat alat elektornik yang bekerja secara otomatis mempunyai internal storage dan untuk melakukan poses data
Software merupakan kumpulan dari perintahperintah yang digunakan untuk melakukan proses sesuai dengan perintah yang diberikan dan sesuai dengan bahasa pemrograman yang digunakan.
Latihan 2 The Cool Web Movie Database Welcome to the Cool Web Movie Database. So far we offer information on the many brilliant films of David Lean: soon, a lot more will be online.
BAB VIII FORM Form merupakan elemen HTML yang digunakan untuk :
Memperoleh feedback dari pengguna web
Memperoleh informasi pembelian secara online
Memperoleh data-data user baik nama, alamat, dan data lainya untuk mendaftar pada service yang disediakan url : lokasi file yang akan melakukan proses terhadap input dari form method : menyatakan bagaimana masukan-masukan berasal dari form di kirimkan kepada program CGI
Jenis masukan dalam Form :
Text : nilai yang dimasukkan dapat berupa angka atau teks Value pada size menunjukkan besar text box Value pada maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih. pilihan 1 pilihan 2 pilihan 3
Checkbox : menyediakan beberapa pilihan, dapat lebih dari satu pilihan
pilihan 1 pilihan 2 pilihan List atau Dropdown box : menyediakan pilihan dalam bentuk list.3