2018

Web Programming I

Disclaimer
Hanya dipergunakan di Lingkungan Internal
Universitas AMIKOM Yogyakarta Program Studi D3 Manajemen Informatika
Fakultas Ilmu Komputer
Universitas AMIKOM Yogyakarta
 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

KATA PENGANTAR
Mata kuliah ini merupakan mata kuliah yang memberikan bekal kepada mahasiswa tentang
pembuatan program web. Materi yang diberikan meliputi teknologi web serta pemrograman web
termasuk di dalamnya, yaitu HTML & HTML5, CSS & CSS3, Web Layout, Teknik Image Slice, JavaScript,
JQuery dan Framework CSS.
Mata kuliah ini juga memberikan tentang dasar-dasar teori desain web, prinsip-prinsip
desain, konsep dasar pemrograman web, perangkat keras, perangkat lunak, web statis, web browser,
arsitektur jenis pemrograman web, komponen penyusun web, interaksi web, aksesibilitas, usabilitas,
dan findabilitas, serta proses hosting dan manajemen situs secara online.
PENGESAHAN
Disusun Oleh Diperiksa & Dikendalikan Oleh Disetujui oleh
Afrig Aminuddin, S.Kom., M.Eng. Sekprodi Kaprodi
M. Nuraminudin, M.Kom. D3 Manajemen Informatika D3 Manajemen Informatika
Ika Nur Fajri, M.Kom.
7 Desember 2018 8 Desember 2018 9 Desember 2018

Modul ini syah dan diberlakukan mulai: 10 Desember 2018

Dekan Fakultas Ilmu Komputer

Modul Mata Kuliah : Web Programming I [#DM079] Hal.1 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

DAFTAR ISI
KATA PENGANTAR ....................................................................................................................................1
PENGESAHAN ...........................................................................................................................................1
DAFTAR ISI ................................................................................................................................................2
PERTEMUAN 1 Konsep Dasar Web dan Internet .....................................................................................3
PERTEMUAN 2 Konsep Dasar HTML.........................................................................................................6
PERTEMUAN 3 HTML Tag: Akronim ...................................................................................................... 18
PERTEMUAN 4 HTML Tag: Image .......................................................................................................... 26
PERTEMUAN 5 HTML Tag: Table .......................................................................................................... 29
PERTEMUAN 6 HTML Tag: Form ........................................................................................................... 36
PERTEMUAN 7 Konsep Dasar CSS ......................................................................................................... 42
PERTEMUAN 8 Implementasi CSS ......................................................................................................... 48
PERTEMUAN 9 Layout Web & Image Slice ............................................................................................ 53
PERTEMUAN 10 Konsep Dasar JavaScript ............................................................................................. 65
PERTEMUAN 11 Implementasi JavaScript ............................................................................................. 75
PERTEMUAN 12 jQuery: JavaScript Framework.................................................................................... 84
PERTEMUAN 13 jQuery UI : jQuery User Interface ............................................................................... 94
PERTEMUAN 14 Final Project ................................................................................................................ 98
DAFTAR PUSTAKA .................................................................................................................................. 99

Modul Mata Kuliah : Web Programming I [#DM079] Hal.2 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 1
Konsep Dasar Web dan Internet
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami dan menjelaskan secara umum konsep dasar web, kompoenen penyusun web
statis, serta arsitektur aplikasi berbasis web client dan server side scripting.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
Pengertian Internet dan Web
Internet adalah seluruh jaringan komputer yang saling terhubung menggunakan standar sistem
global TCP/IP sebagai protokol pertukaran paket untuk melayani miliaran pengguna di seluruh
dunia.

Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar,
animasi, video) di dalamnya yang menggunakan protokol HTTP (hypertext Transfer protocol)
dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser.

Konsep Dasar Web

Situs web merupakan kumpulan dari halaman web yang sudah di publikasikan di jaringan
internet dan memiliki domain/URL yang dapat di akses semua pengguna Internet dengan cara
mengetikkan alamatnya.

HTTP adalah HTTP (HyperTextTransfer Protocol) adalah protokol yang dipergunakan untuk
mentransfer dokumen dalam World Wide Web(WWW).

WWW adalah World Wide Web adalah halaman-halaman website yang dapat saling terkoneksi
satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi

PENGERTIAN URL dan URI

URL adalah Uniform Resource Locator adalah rangkaian karakter menurut suatu format standar
tertentu, yang digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan
gambar di Internet.

URI adalah Uniform Resource Identifier adalah sebuah untaian karakter yang digunakan untuk
mengidentifikasi nama, sumber, atau layanan di Internet.

Perbedaan URL dan URI

URL (Uniform Resource Locator)
- URL digunakan oleh sebuah browser untuk mengidentifikasi sumber daya yang ada di internet
yang dituliskan dalam satu baris teks.
- URL merupakan bagian dari URI
- URL menunjuk ke suatu halaman web yang menggunakan “scheme” tanpa menggunakan code
fragment.
“Scheme” menandakan protocol TCP/IP yang digunakan, contohnya adalah HTTP, HTTPS, FTP,
NEWS, MAILTO, FILE, TELNET.s
Contoh: http://www.google.com

Modul Mata Kuliah : Web Programming I [#DM079] Hal.3 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

URI (Uniform Resurce Identifier)

- URI digunakan browser untuk mengidentifikasi dokumen tunggal dan dituliskan dalam satu
baris teks.
- URI digunakan untuk mengidentifikasi suatu resource dengan lokasi atau nama, ataupun
keduanya.
- URI menunjuk ke suatu halaman web, termasuk lokasi code fragmentnya (apabila ada) dan
“scheme”.
Contoh: ftp://ftp.is.co.za/rfc/rfc1808.txt

Konsep web statis dan dinamis

Web Statis adalah jenis Website yang mana penggunanya tidak bisa merubah kontent dari Web
tersebut secara langsung menggunakan Browser.
Interaksi yang terjadi antara pengguna (client) dan server hanyalah seputar pemrosesan link
saja.

Web dinamis adalah jenis Website dengan interaksi yang terjadi antara pengguna dan server
sangat kompleks. Di mana seseorang (Client) dapat mengubah Content dari halaman tertentu
dengan menggunakan Browser. Request yang dikirimkan oleh pengguna dapat diproses oleh
server untuk kemudian ditampilkan dalam isi yang berbeda-beda menurut alur programnya.

Komponen penyusun web statis

- Bahasa Pemrograman (Client Side Scripting dan Server Side Scripting).
- Web Editor digunakan untuk mengetikkan perintah-perintah dokumen web. Dibagi menjadi 3
yaitu : Editor Teks (Notepad), Editor WYSIWYG (Dreamweaver), Editor berbasis template
(Rapidweaver dan iweb).
- Web Browser merupakan program yang berfungsi untuk menampilkan dokumen-dokumen
web dalam format HTML. Ex: Google Chrome, Mozilla Firefox, IE, Opera, dll.
- Image editor adalah program aplikasi yang berfungsi untuk melakaukan pengolahan
gambar/image. Ex: Adobe Photoshop, Corel Draw, Adobe Flash, dll.

Client Side Scripting adalah salah satu jenis bahasa pemrograman web yang proses
pengolahannya dilakukan di sisi client. Proses pengolahan client side scripting dilakukan oleh
web browser sebagai clientnya.
Contoh : HTML, XHTML, CSS, Javascript, XML(Extensible Markup Language).

Server Side Scripting adalah bahasa pemrograman web yang pengolahannya dilakukan di sisi
server. Maksud server di sini adalah web server yang didalamnya telah mengintegrasikan
komponen web engine.
Contoh : ASP(Active Server Pages), PHP(Hypertext Preprocessor, JSP(Java Server Pages).

Perkembangan Web
- Web 1.0, yaitu teknologi Web generasi pertama yang merupakan revolusi baru di dunia
Internet karena telah mengubah cara kerja dunia industri dan media. Contoh : Situs berita
"cnn.com" atau situs belanja "Bhinneka.com".
- Web 2.0, yaitu pertama kalinya diperkenalkan oleh O’Reilly Media pada tahun 2004 sebagai
teknologi Web generasi kedua yang mengedepankan kolaborasi dan sharing informasi secara
online. Contoh : Situs jejaring sosial facebook.com
- Web 3.0, yaitu teknologi web lebih ke arah Web Cerdas atau Web dengan Engine Kecerdasan
Buatan, yang lebih memudahkan user dalam berinteraksi. Contoh: Web Semantik dan Cloud
Computing

Modul Mata Kuliah : Web Programming I [#DM079] Hal.4 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
Buka browser anda, dan pastikan terhubung ke internet. Buka sebuah website, kemudian tekan
Ctrl + U, kemudian pelajari dengan seksama source code tersebut!

5. Latihan/Tugas
Carilah teknologi web terbaru dan cara implementasi teknologi tersebut. Tuga individu
dikumpulkan pertemuan selanjutnya!

6. Sumber Bacaan
https://www.w3schools.com/

Modul Mata Kuliah : Web Programming I [#DM079] Hal.5 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 2
Konsep Dasar HTML
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami dan menjelaskan Konsep HTML.
b. Mempraktekkan dan berlatih menggunakan elemen-elemen HTML.
c. Mampu memahami tag HTML seperti heading, paragraph, line break, komentar,
memformat karakter, format teks, kutipan, list, dan entitas karakter.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah bahasa untuk
membentuk sebuah halaman web dan html bukan sebuah bahasa pemrograman melainkan
bahasa markup (markup language). Markup language terdiri dari sekumpulan markups tag.
Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda
lebih besar ( > ) yang biasa disebut tag.

Penamaan Dokumen HTML

Untuk membuat program aplikasi yang berjalan di atas web, Anda harus terlebih dahulu
menguasai HTML. Saat ini telah banyak terdapat paket aplikasi yang dapat digunakan untuk
membuat halaman web secara WYSIWYG (What You See Is What You Get) seperti Microsoft
FrontPage, Macromedia DreamWeaver, Netscape Composer dan sebagainya, yang
memudahkan Anda untuk merancang suatu halaman web tanpa harus menguasai tag-tag
HTML. Akan tetapi untuk menjadikan halaman web Anda lebih dinamis dan lebih interaktif,
penguasaan terhadap terhadap tag-tag HTML akan sangat diperlukan.

Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak
jelas adalah ekstensi filenya, yaitu .htm atau .html. Format ekstensi berformat .htm awalnya
hanyalah mengakomodasi penggunaan html dalam operasi DOS. Dalam pemberian nama
sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama r.html akan berbeda
dengan dokumen R.html. Kasus case sensitive akan di jumpai pada dokumen web yang di
hosting di dalam server yang berbasis *nix (keluarga sistem operasi Unix).

Definisi Elemen dan Tag HTML

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Elemen dapat
berupa teks murni, atau bukan teks, atau keduanya. Untuk menandai sebuah elemen dalam
suatu dokumen HTML di sebut tag. Nama elemen ditunjukkan oleh nama dari tagnya. Suatu
elemen biasanya ditandai dengan pasangan tag, walaupun ada beberapa nama elemen yang
ditandai dengan satu tag tanpa harus berpasangan. Diantaranya:
- Image ( <img /> )
- Ganti Baris – Break ( <br /> )
- Horizontal Rule ( <hr /> )
- Input Field ( <input /> )
Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut.
Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang
bersangkutan.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.6 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
Struktur Element

Penggunaan Tag dan Atribut Tag

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML,
memiliki syarat penulisan yaitu:
- Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
- Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
- Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag
akhir.
- Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
- Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan
harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>

latihan1.html
<html>
<head>
<title>informasi dokumen</title>
</head>
<body>
....konten yang di tampilkan
pada halaman browser.....
</body>
</html>

Output di Browser Title Nama File Body

Tag-Tag Dasar HTML

Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama
dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen

Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang
benar akan meningkatkan kegunaan suatu dokumen HTML. Penulisan tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.7 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

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

Elemen yang mungkin terdapat pada bagian head :

- Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah sebagai
berikut:
<title>Judul Dokumen</title>
- Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah sebagai berikut berikut:
<base target="_blank" />
- Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :

Contoh penggunaannya adalah sebagai berikut:

<link rel="stylesheet" href="http://situs.com/style.css" type="text/css" />
- Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML Informasi
meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung
oleh HTML. Tag <meta> mempunyai atribut :

Untuk lebih memperjelas penggunaan atribut tag <meta> perhatikan contoh berikut ini :
<meta http-equiv="refresh" content="50" />

Perintah diatas akan diterjemahkan oleh browser sebagai refresh dokumen setiap “50 detik”,
jadi setara dengan mengklik tombol Refresh / Reload pada browser.
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 properti Keyword untuk
mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk
mendeskripsikan indeks tersebut.

BODY
Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai
dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan
di atas, bagian body diawali oleh tag <body> dan ditutup </body>. Atributnya:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.8 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan2.html
<html>
<head>
<title>Contoh Penggunaan BODY</title> <base
target="_blank" />
<meta http-equiv="refresh" content="50"/>
<meta name="keywords" content="Meta, Body, HTML">
<meta name="description" content="Belajar HTML">
</head>
<body bgcolor="#990099" text="white" vlink="#00FFFF"
link="yellow">
Ini adalah contoh penggunaan body.
Dan ini adalah sebuah <a href="">link</a>.
</body>
</html>

Kode Warna

Modul Mata Kuliah : Web Programming I [#DM079] Hal.9 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Heading
Tag heading <hx> digunakan untuk memformat heading (judul dan sub judul ) dari suatu
halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada
enam buah heading yang dikenal HTML, yaitu dari <h1> sampai dengan <h6>. Tag heading
mempunyai atribut: [ left | center | right ] default left. Sebagai latihan, ketiklah latihan berikut
dan jalankan dibrowser Anda.

latihan3.html
<html>
<head>
<title>Contoh Penggunaan Heading</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>

Horisontal Ruler
Tag Horisontal ruler <hr> berfungsi untuk menampilkan garis horizontal tiga dimensi didalam
halaman web Anda. Tag horizontal ruler juga tidak memerlukan elemen penutup
</hr>.

Atribut elemen horisontal ruler :

align : [ left | center | right ] default center
size : pixel ( tebal garis, default 2 )
width : panjang ( lebar garis, pixel atau persen, default 100%)
noshade ( garis solid )

latihan4.html
<html>
<head>
<title>Contoh Penggunaan HR</title> </head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
</body>
</html>

Paragraf
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web
Anda. Dalam elemen paragraf terdapat atribut : align=[ left | center | right ] yang berfungsi
sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu dari ketiga pilihan
tanpa harus memberi kurung buka dan tutup, dan defaultnya adalah left. Anda dapat memilih
perataan kiri, tengah dan kanan. Bukalah latihan4.html yang sudah Anda buat, kemudian
tambahkan script-script berikut dan simpan dengan nama latihan5.html.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.10 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan5.html
<html>
<head>
<title>Contoh Penggunaan Paragraf</title> </head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<h4>Gadget, HP & Accessories</h4>
<p>Handphone</p>
</body>
</html>

Line Break
Tag Line Break <br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web
Anda. Tag break tidak memerlukan tag penutup break. Bukalah latihan5.html yang sudah Anda
buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan6.html.

latihan6.html
<html>
<head>
<title>Contoh Penggunaan Break</title> </head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<h4>Gadget, HP & Accessories</h4>
<p>Handphone<br>Smartphone<br>Tablet</p>
<h4>Electronic & Home App</h4>
<p>Alat Kebersihan<br>Mesin Cuci<br>Freezer</p>
</body>
</html>

Komentar
Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai
catatan atau komentar terhadap dokumen itu sendiri. Catatan/komentar dalam dokumen ini
tidak di tampilkan dalam browser. Teks yang berfungsi sebagai komentar di simpan dalam
dokumen di tandai dengan tag <!-- sebagai awal, kemudian teks yang di komentari, dan tag -->
sebagai akhir tag. Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garis
miring.

latihan7.html
<html>
<head>
<title>Contoh Penggunaan Komentar</title>
</head>
<body>
<!-- Komentar ini tidak akan ditampilkan -->
<p>Rajin pangkal <b>pandai</b></p>
<!-- <i>Menabung pangkal kaya</i> -->
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.11 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Memformat Karakter
Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat
sebuah dokumen menjadi menarik dan informatif.

Logical Format
Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag ini
memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai berikut:
- <cite>, digunakan untuk menandai suatu kutipan (citation).
- <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C.
- <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis.
- <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui
keyboard.
- <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
- <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu teks.
- <var>, digunakan untuk menampilkan nama variabel.
- <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.

latihan8.html
<html>
<head>
<title>Contoh Penggunaan Logical Format</title>
</head>
<body>
<cite>Ir.Soekarno</cite> adalah Presiden pertama republik
indonesia.<br><br>
Untuk menampilkan data array di pemrograman PHP adalah
<code>echo "$namaarray[]";</code><br><br>
Saya berkata, "Jangan di pegang <em>nanti rubuh</em>."
<br><br>
Untuk mengunjungi website amikom, ketikkan pada url
<kbd>amikom.ac.id</kbd> <br><br>
Pada abjad terdapat 5 huruf vokal, yaitu
<samp>AEIUO</samp>.<br><br>
Katakan tidak untuk <strong>Narkoba</strong> <br><br>
Kode program tersebut diiterasi sebanyak <var>N</var>
kali. <br><br>
<dfn>Ayam adalah hewan berkaki dua.</dfn>
</body>
</html>

Physical Format
Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag
penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :
- <b>, untuk menampilkan huruf tebal.
- <i>, untuk menampilkan huruf miring.
- <u>, untuk menampilkan garis bawah pada teks.
- <tt>, untuk menampilkan huruf seperti huruf mesin ketik.
- <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
- <big>, untuk menampilkan ukuran huruf yang lebih besar.
- <small>, untuk menampilkan ukuran huruf yang lebih kecil.
- <sub>, untuk menampilkan subscript.
- <sup>, untuk menampilkan superscript.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.12 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Catatan :
Semua tag tersebut memerlukan tag penutupnya masing-masing.

latihan9.html
<html>
<head>
<title>Contoh Penggunaan Physical Format</title>
</head>
<body>
<b>Kalimat ini akan dicetak tebal</b><br>
<i>Kalimat ini akan dicetak miring</i><br>
<u>Kalimat ini akan bergaris bawah</u><br>
<strike>Kalimat ini akan bergaris tengah</strike><br>
<tt>Menampilkan huruf seperti huruf mesin ketik.</tt><br>
H₂O<br>
2³=8<br>
</body>
</html>

Format Teks

Preformatted Text
Preformatted text <pre> digunakan untuk menampilakan teks sama seperti yang Anda ketikkan
dalam dokumen HTML. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu
seperti terlihat dalam teks yang ditampilkan oleh aplikasi berbasiskan teks.

latihan10.html
<html>
<head>
<title>Contoh Penggunaan Pre</title>
</head>
<body>
<pre>
void Node::Remove() {
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);
if (next)
next->prev = prev;
parent = null;
}
</pre>
</body>
</html>

Quotation / Identasi
- Kutipan pendek – tag <q>
- Kutipan panjang – tag <blockquote>

Tag <blockquote> digunakan untuk membuat sebagian teks yang di kutip sebagai blok sendiri.
Dengan perintah <blockquote> browser akan menampilkan teks menjorok ke dalam
(mengindentasi teks) atau menampilkan teks.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.13 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Tag <q> tidak melakukan sesuatu yang khusus, tetapi dengan kita telah mendefinisikan sebagai
kutipan, kemudian kita menggunakan style sheet maka kutipan ini bisa di atur pemformatannya
dengan menggunakn style sheet.

latihan11.html
<html>
<head>
<title>Contoh Penggunaan Quotation</title>
</head>
<body>
Berikut adalah teks dengan quotation yang panjang:
<blockquote>
Toko Elektronik Online, Belanja Elektronik Murah,
led murah, beli led, blackberry, laptop, cicil.
</blockquote>
Berikut adalah teks dengan quotation yang pendek:
<q>
Isi quotation pendek
</q>
<p>
Dengan elemen blockquote, browser menyisipkan line
break dan margin baru, tetapi elemen q tidak melakukan sesuatu yang
khusus.
</p>
</body>
</html>

List HTML
List item merupakan perintah yang di gunakan dalam HTML untuk membuat daftar atau
pengelompokkan kata [list]. Ada beberapa jenis-jenis list dalam HTML. HTML menyediakan lima
cara untuk membuat daftar atau list , yaitu :
- Ordered List
- Unordered List
- Directory List
- Menu List
- Definition List
Untuk modul ini, hanya ordered list dan unordered list yang dibahas.

Ordered List (Numbering)

Ordered list digunakan untuk membuat daftar dimana setiap bagiannya memiliki nomor secara
terurut. Ordered list dimulai dengan tag <ol> dan diakhiri dengan </ol>. Untuk menyatakan tiap
bagiannya digunakan tag <li> dan tidak diperlukan tag penutup. Atribut elemen list ,yaitu :

TYPE = [ 1 | a | A | i | I ] ( default 1 )

Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan
simpan dengan nama latihan12.html.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.14 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan12.html
<html>
<head>
<title>Contoh Penggunaan OL</title> </head>
<body bgcolor="#0066FF" text="#FFFFFF"
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<ol type="A">
<li>Gadget, HP & Accessories</li>
<li>Computer & Accessories</li>
<li>Camera & Accessories</li>
<li>Audio Visual Appliance</li>
<li>Electronic & Home App.</li>
</ol>
</body>
</html>

Unordered List (Bullet)

Berbeda dengan ordered list, dalam ordered list tidak dijumpai urutan dalam suatu daftar.
Setiap bagian dari unordered list ditandai dengan tanda bullet. Untuk membuat daftar dengan
tanda ini digunakan tag awal <ul> dan tag penutup </ul> dan untuk tiap bagiannya digunakan
tag <li> tanpa tag penutup. Atribut elemen list ,yaitu :

TYPE = [ disc | square | circle ] ( default disc )

Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan
simpan dengan nama latihan13.html.

latihan13.html
<html>
<head>
<title>Contoh Penggunaan UL</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF">
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<ul type="square">
<li>Gadget, HP & Accessories</li>
<li>Computer & Accessories</li>
<li>Camera & Accessories</li>
<li>Audio Visual Appliance</li>
<li>Electronic & Home App.</li>
</ul>
</body>
</html>

Entitas Karakter HTML

Beberapa karakter khusus mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<)
yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Jika kita
mengingkan browser untuk menampilkan karakter-karakter tersebut, kita harus menyisipkan
entitas karakter ke dalam source HTML.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.15 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Entitas karakter mempunyai 3 bagian: sebuah ampersand (&), sebuah nama entitas atau sebuah
# dan nomor entitas, dan terakhir adalah sebuah tanda titik koma (; /semicolon). Untuk
menampilkan tanda lebih kecil dalam sebuah HTML maka kita harus menuliskannya : &lt; atau
&#60;

Kelebihan dengan menggunakan nama dibanding dengan nomor adalah nama lebih mudah di
ingat. Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru,
sedangkan dukungan untuk nomor entitas hampir ada pada setiap browser.

Entitas karakter yang sering digunakan adalah sebagai berikut:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.16 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan14.html
<html>
<head>
<title>Contoh Penggunaan Karakter Khusus</title>
</head>
<body>
Copyright &copy; <br>
Registered trademark &reg; <br>
Trademark &#8482; <br>
Non breaking&nbsp;space <br>
Ampersand &amp; <br>
Angle quotion mark (left) &laquo; <br>
Angle quotion mark (right) &raquo; <br>
Tanda kutip &quot; <br>
Tanda lebih kecil &lt; <br>
Tanda lebih besar &gt; <br>
Tanda kali &times; <br>
Tanda bagi &divide; <br>
</body>
</html>

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 14 sesuai instruksi modul di atas!

6. Sumber Bacaan
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:
Andi Offset.

Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200
contoh program beserta tampilan grafisnya Edisi Revisi Keempat. Bandung: Informatika.

Rajif Agung Yunmar, S.Kom. 2011. Modul Pemrograman Web HTML & CSS. STMIK AMIKOM
Yogyakarta

Modul Mata Kuliah : Web Programming I [#DM079] Hal.17 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 3
HTML Tag: Akronim
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Mampu memahami tag HTML seperti akronim, address, arah teks, teks sisipan, font,
hyperlink, marquee.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
Singkatan (Akronim)
Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan
(akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag
<acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan
yang ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title.

Sintaks penulisannya :
<abbr title="kepanjangannya">singkatan</abbr>
<acronym title="kepanjangannya">singkatan</acronym>

Ketika menggunakan tag di atas, maka pada saat mouse pointer kita berada di atas singkatan
tersebut yang di tampilkan di browser web, maka kepanjangan dari singkatan tersebut akan
ditampilkan mengambang di atasnya.

4. Instruksi Modul
latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Akronim</title>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr> adalah halaman-
halaman website yang dapat saling terkoneksi satu dengan lainnya
(hyperlink)yang membentuk samudra belantara informasi.
<br>
<acronym title="Hyper Text Transfer
Protocol">HTTP</acronym> adalah protokol yang dipergunakan untuk
mentransfer dokumen dalam World Wide Web(WWW).
</body>
</html>

Address
Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Untuk
membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Dengan
adanya tag ini maka penulisan alamat dapat di standarkan. Secara default tag <address> akan
menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”.
Sintaks penulisannya :
<address>alamat anda</address>
latihan2.html

Modul Mata Kuliah : Web Programming I [#DM079] Hal.18 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Address</title>
</head>
<body>
<address>
STMIK AMIKOM Yogykarta<br />
Kampus Terpadu: Jl.Ring Road Utara<br />
Condong Catur<br />
Sleman<br />
Yogykarta
</address>
</body>
</html>

Arah Teks
Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right – ltr). Di html ada tag
yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left – rtl). Tag yang
digunakan yaitu Tag <bdo> bidirectional override merupakan tag yang digunakan untuk
mendefinisikan arah penulisan teks. Atribut yang digunakan dir.

Sintaks penulisannya :
<bdo dir="rtl">Teks yang mau di arahkan</bdo>

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan BDO</title>
</head>
<body>
<bdo dir="rtl">
STMIK AMIKOM Yogykarta<br />
Jurusan :<br />
S2 Megister Teknik Informatika<br />
S1 Teknik Informatika<br />
S1 Sistem Informasi<br />
D3 Teknik Informatika<br />
D3 Manajemen Informatika
</bdo>
</body>
</html>

Teks yang Disisipkan atau Dihapus

Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag
<ins> dan tag <del>. Tag tersebut kita bisa megkoreksi hasil pekerjaan dengan menyisipkan atau
menghapus. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah.
Sedangkan Tag <del> bukan menghapus teks tetapi mengkoreksi pekerjaan dengan memberikan
garis tengah horizontal pada teks yang dihapus.
Sintaks penulisannya :
Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan

Modul Mata Kuliah : Web Programming I [#DM079] Hal.19 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan INS & DEL</title>
</head>
<body>
Budi membeli perlengkapan kuliah diantarnya sebagai
berikut: <br>
1. Buku tulis Rp.10.000<br>
2. ballpoint pen Rp.15000<br>
3. stabilo Rp.5000 <br>
Total pembeliannya adalah <del>40.000</del>
<ins>30.000</ins>
</body>
</html>

Font
Dengan tag <font> anda bisa menentukan format tampilan font dalam document HTML seperti
color, size, style dan lainnya. Di bawah ini atribut yang bisa digunakan untuk tag font
diantaranya sebagai berikut:

Ukuran Font
Atribut size digunakan untuk mengatur ukuran font. Nilai font dimulai dengan nilai 1 untuk
ukuran huruf terkecil dan nilai 7 untuk ukuran paling besar atau +1 untuk ukuran huruf terkecil
dan nilai +6 untuk ukuran paling besar.

Jenis Font
Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut face harus diisi
dengan string jenis font seperti: Arial, Times New Roman, Verdana, Courier New, Courier,
monospace dan lain sebagainya.

Warna Font
Atribut color digunakan untuk mengatur warna font yang diinginkan. Untuk memberi nilai pada
atribut color ada dua cara, yaitu:
- Dengan menyebutkan nama warna seperti red, green dan blue.
- Dengan menggunakan nilai RGB (Red Green Blue) dari satu warna misalnya: #FF0000 untuk
red, #00FF00 untuk green dan #0000FF untuk Blue.

Sintaks penulisannya :
<font size="1">Ukuran Font</font><br>
<font face="arial">Jenis Font</font><br>
<font color="blue">Warna Font</font>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.20 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan5.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Font</title>
</head>
<body>
<font size="1">Ini ukuran 1</font><br>
<font face="arial">Ini memakai font Arial</font><br>
<font color="blue">Ini Warna Biru</font><br>
<font color="#FF0000" face="Courier New" size="7" > Teks
ini menggunakan warna merah, Jenis font yang digunakan adalah Courier
New, dan ukuran teksnya 7.</font>
</body>
</html>

Link HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain.
Dokumen ini bisa berupa teks dan / atau gambar yang saling menghubungkan menuju ke
dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau
gambar yang di identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan
bahwa itu adalah hyperteks link sering di singkat hyperlink atau link saja.

Tag Anchor
Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a>
diantaranya: atribut href="uri" untuk mendefinisikan lokasi link, atribut name="name" untuk
mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self" untuk _blank
akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di
window browser.

Sintaks penulisannya :
<a href="http://www.amikom.ac.id" target="_blank" name=" amikom">Link web Amikom </a>

Link html terdapat 3 jenis yaitu diantaranya sebagai berikut:

- Link Relatif
- Link Absolut
- Link ke Bagian Lain dalam Dokumen

Link Relatif
Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang
sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada
direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.21 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan6.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Link Relatif</title>
</head>
<body>
Anda ingin melihat format font pada latihan5.html,
silahkan klik <a href="latihan5.html">link berikut</a>.
</body>
</html>

Link Absolut
Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet.
Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah contohnya:

latihan7.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Link Absolut</title>
</head>
<body>
Anda ingin mengunjungi situs resmi amikom. Silahkan klik
<a href="http://www.amikom.ac.id">link berikut</a>.
</body>
</html>

Link ke Bagian Lain dalam Dokumen

Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan
dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi
untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan
menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di
dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakkan link
untuk menuju bagian-bagian tersebut.

Sintaks penulisannya :
<a href="#tujuan">Link asal</a>
Artikel bebas
<a name="tujuan">Posisi tujuan</a>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.22 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan8.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p> <h2>Bab
2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p> <h2>Bab
3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>Bab 4 ini menunjukkan tujuan dari link dalam satu
halaman.</p>
<h2>Bab 5</h2>
<p>Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html>

Link Mailto
Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail
client tidak terpasang).

latihan9.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Link Mailto</title>
</head>
<body>
Anda ingin mengirim tugas pemrograman web bisa melalui <a
href="mailto:[email protected]">email berikut</a>.
</body>
</html>

Marquee
Salah satu bentuk modifikasi tulisan di web/blog adalah dengan membuat efek teks yang bisa
bergerak. Bisa dari kanan ke kiri, atau dari atas ke bawah dan sebaliknya. Teks efek ini disebut
marquee, Marquee adalah bahasa HTML untuk memberikan efek sebuah kata atau kalimat
menjadi berjalan atau bergerak. Marquee ini mempunyai daya tarik tersendiri karena animasi
berjalan/bergeraknya tersebut.
Berikut beberapa atribut yang bisa digunakan untuk marquee agar terlihat lebih bagus dan
cantik adalah sebagai berikut:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.23 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

- bgcolor : Atribut ini digunakan untuk mengatur background dari text yang akan diberi efek
marquee.
- direction : Digunakan untuk mengatur gerakan dari text tersebut (up, down, left right).
- scrollamount : Untuk mengatur kecepatan dari gerakan text (angka dalam px), semakin tinggi
angka yang digunakan, maka akan semakin cepat gerakan dari textnya.
- behaviour : Untuk mengatur efek dari gerakannya (slide, scroll, alternate).
- width : Untuk mengatur lebar dari area text nya (dinyatakan dalam px atau %).
- height : Untuk mengatur tinggi dari area text nya (dinyatakan dalam px atau %).
- align : Untuk mengatur posisi (center, left, right).
- onmouseover : Untuk memberhentikan efek ketia disorot(hover) mouse.
- onmouseout : Untuk melanjutkan efek bila mouse sudah tidak menyorot(hover) text.

latihan10.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Marquee</title> </head>
<body>
<marquee>Standar tag marquee tanpa atribut</marquee>
<marquee direction="up">marquee direction="up"</marquee>
<marquee direction="right">marquee direction="right"</marquee>
<marquee direction="down">marquee
direction="down"</marquee> <marquee direction="left">marquee
direction="left"</marquee>
<marquee behavior="alternate">marquee
behavior="alternate"</marquee>
<marquee behavior="scroll">marquee
behavior="scroll"</marquee> <marquee behavior="slide">marquee
behavior="slide"</marquee>
<marquee scrollamount="10">marquee
scrollamount="10"</marquee> <marquee scrollamount="20">marquee
scrollamount="20"</marquee>
<marquee scrollamount="30">marquee
scrollamount="30"</marquee>
<marquee width="75%">marquee width="75%"</marquee>
<marquee width="30%">marquee width="30%"</marquee>
<marquee height="75%">marquee height="75%"</marquee>
<marquee height="30">marquee height="30"</marquee>
<marquee bgcolor="red">marquee bgcolor="red"</marquee>
<marquee bgcolor="#ddd">marquee bgcolor="#ddd"</marquee>
<marquee direction="down" scrollamount="2"
onmouseover="this.stop()" onmouseout="this.start()" height="100">
Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak
kembali ketika sudah tidak di sorot </marquee>
</body>
</html>

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 10 sesuai dengan instruksi modul di atas!.

6. Sumber Bacaan
Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200
contoh program beserta tampilan grafisnya. Bandung: Informatika.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.24 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:
Andi Offset.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.25 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 4
HTML Tag: Image
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami tag HTML untuk image/gambar.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
Image HTML
Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik.
Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di
web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format
yaitu PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format
gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di
download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena
itu, berhati-hatilah dalam memilih gambar dan menyertakannya ke dalam suatu dokumen.
Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.

Sintaks penulisannya :
<img src="url" />

Tag <img> mempunyai atribut di antaranya:

Atribut Penjelasan

src Url dari file image/direktori gambar

align Letak gambar pada teks, nilai atributnya left, right, top, middle, dan
bottom

width Lebar gambar dalam satuan pixel

height Tinggi gambar dalam satuan pixel

alt Menampilkan teks pengganti jika gambar tidak tampil di brows

border Memberi bingkai pada gambar

Modul Mata Kuliah : Web Programming I [#DM079] Hal.26 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Posisi Img</title>
</head>
<body>
<p>Logo Amikom <img src="amikom.jpg" width="223"
height="226" align="bottom" alt="Logo Amikom"/> menggunakan
align="bottom". </p>
</body>
</html>

Catatan:
Apabila anda ingin melihat perbedaan letak posisi gambar pada latihan1.html, silahkan ganti
pada atribut align="bottom". Apabila anda ingin melihat fungsi atribut alt, url dari file
image/direktori gambar anda salahkan.

latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Border Img</title>
</head>
<body>
<p>Logo Amikom <img src="amikom.jpg" width="223"
height="226" align="bottom" alt="Logo Amikom" border="1" />
menggunakan border="1". </p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan ketebalan border gambar pada latihan2.html, silahkan
ganti pada atribut border=”1”.

Image Sebagai Link

Gambar bisa digunakan sebagai link untuk suatu dokumen.

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Img sebagai suatu link</title> </head>
<body>
<p>
<b>Untuk mengunjungi website amikom klik gambar di
samping</b>
<a href="http://www.amikom.ac.id">
<img src="amikom.jpg" width="50" height="50"
align="middle" alt="Tombol" />
</a>
</p>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.27 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 3 sesuai dengan instruksi modul di atas!.

6. Sumber Bacaan
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200
contoh program beserta tampilan grafisnya. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:
Andi Offset.

Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Modul Mata Kuliah : Web Programming I [#DM079] Hal.28 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 5
HTML Tag: Table
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
b. Memahami tag HTML seperti images dan table.

2. Alat dan Bahan

c. Microsoft Visual Studio
d. Browser

3. Dasar Teori
Tabel HTML
Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah table
mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan
daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain
(tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup
</table>.

Sintaks penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>

Elemen-Elemen Tabel
Elemen Penjelasan

<table> . . . </table> Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil
disertai border. Nilai border 0 – 30.

<caption> . . . Pembentuk judul tabel. judul dapat diberi tag apa saja.
</caption>

Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align (left,
<tr> . . . </tr> center dan right) atau valign(top, middle dan bottom).

Pembentuk sel header tabel. Secara default teks dalam sel ini di
<th> . . . </th> tebalkan dan di tampilkan ditengah.

<td> . . . </td> Pembentuk sel data dalam tabel.

Catatan :
- Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam
elemen tabel, dari <table> . . . </table>.
- Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap
definisi baris, dari <tr> . . . </tr>.
- Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.29 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
Atribut Tag <table>
Catatan :
Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan
alignment default yang didefinisikan dalam <tr> . . . </tr>

Atribut Tag <tr>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.30 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Atribut Tag <td> dan <th>

Atribut Width, Border, Bordercolor

latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Atribut Width, Border, Bordercolor</title> </head>
<body>
<table width="500" border="1" bordercolor="#FF0000">
<caption>Atribut Width, Border,
Bordercolor</caption>
<tr>
<th width="200">Baris 1 Kolom 1</th>
<th width="180">Baris 1 Kolom 2</th>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.31 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Atribut Backround, Height, Cellspacing, Cellpadding

latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Atribut Backround, height, cellspacing,
cellpadding</title>
</head>
<body>
<table width="1024" border="3" background="WindowsXp.jpg"
height="768" cellspacing="25" cellpadding="10" align="center">
<caption>Atribut Backround, height, cellspacing,
cellpadding</caption>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>

Atribut Colspan, Rowspan, Valign

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Atribut Colspan, Rowspan, Valign</title>
</head>
<body>
<table width="500" border="1" bgcolor="#FFFF00"
align="center">
<caption>Atribut Colspan, Rowspan, Valign</caption>
<tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di
Gabung</td>
</tr>
<tr>
<td rowspan="2" valign="top">Baris 2 dan
Baris 3 Di Gabung</td>
<td bgcolor="#0000FF">Baris 2 Kolom 2</td>
</tr>
<tr>
<td bgcolor="red">Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.32 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Empty Cell
Penggunaan mnemonic “&nbsp” untuk menangani tabel yang belum mempunyai isi.
latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Empty Cell</title>
</head>
<body>
<table border="1">
<caption>Empty Cell</caption>
<tr>
<td>Nama</td>
<td>TTL</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Newyogkarto, 23 Maret 1995</td>
</tr>
</table>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.33 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Tabel dalam Tabel

latihan5.html
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Parent 1</td>
<td>
<table border="1">
<tr>
<td>Child 1</td>
<td>
<table border="1">
<tr>

<td>Grandson 1</td>

<td>Grandson 2</td>
</tr>
<tr>

<td>Grandson 3</td>

<td>Grandson 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Parent 2</td>
<td>Parent 3</td>
</tr>
</table>
</body>
</html>

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 5 sesuai dengan instruksi modul di atas!.

6. Sumber Bacaan
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200
contoh program beserta tampilan grafisnya. Bandung: Informatika.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.34 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:
Andi Offset.

Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Modul Mata Kuliah : Web Programming I [#DM079] Hal.35 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 6
HTML Tag: Form
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami tag HTML seperti form, label, fieldset, legend, span, dan div.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
Form dan Input HTML
Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari
pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.
Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat
server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal
<form> dan tag penutup </form>.

Sintaks penulisannya :
<form action="url" method="get|post"></form>

Atribut Tag <form>

Atribut Penjelasan
Method Metode pengiriman data ke tujuan, yaitu:
GET : mengirimkan data pada server dengan cara meletakkan data pada
bagian akhir URL.
POST : mengirimkan datanya secara terpisah.
Action Menentukan lokasi dari script yang akan memproses data dari form

Jenis Masukan dalam Form

Jenis masukan dalam satu formulir dibedakan menjadi:
- Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
- Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
- Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
- List, elemen pilihan dalam bentuk daftar.
- Button, elemen berupa tombol untuk melakukan suatu proses.
- Submit, elemen tombol yang digunakan untuk memanggil url.
- Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
- Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan
proses.
- Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
- File, elemen button yang dapat memanggil file atau gambar dari storage.
- Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

Tag <TEXTAREA>
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai
beberapa atribut, yaitu:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.36 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa
atribut, yaitu:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.37 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Textarea dan Tag Select</title>
</head>
<body>
<table width="100%">
<tr>
<td>Pilih Jenis Kendaraan</td>
<td>
<select name="motor">
<option
value="yamaha">Yamaha</option>
<option
value="honda">Honda</option>
<option
value="suzuki">Suzuki</option>
</select>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<textarea name="alamat" cols="55"
rows="5"></textarea>
</td>
</tr>
</table>
</body>
</html>

Tag <INPUT>
Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta
informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak
memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu:

Tipe input yang dapat dibuat adalah:

- Text, digunakan untuk membuat kotak teks

Modul Mata Kuliah : Web Programming I [#DM079] Hal.38 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

- Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan
dengan tanda *.
- Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
- Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
- File, digunakan untuk memanggil file atau gambar dari storage.
- Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat
oleh browser.
- Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian
form yang telah diberikan.
- Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form
agar diolah.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.39 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Input Data Berita</title>
</head>
<body text="#0000FF">
<h2>Tambah Berita</h2>
<form method="post" action="#" enctype="multipart/form-
data">
<table width="100%">
<tr>
<td>Judul</td>
<td> : <input type="text" name="judul"
size="60"/></td>
</tr>
<tr>
<td>Kategori</td>
<td> :
<select name="kategori">
<option
value="kategori_berita" selected>- Pilih Kategori - </option>
<option
value="komputer">Komputer
<option
value="ekonomi">Ekonomi
<option
value="pendidikan">Pendidikan
</select>
</td>
</tr>
<tr>
<td>Headline</td>
<td> : <input type="radio"
name="headline" value="Y" checked/>Y <input type="radio"
name="headline" value="N"/> N</td>
</tr>
<tr>
<td>Isi Berita</td>
<td> : <textarea name="isi_berita"
cols="45" rows="6"></textarea></td>
</tr>
<tr>
<td>Gambar</td>
<td> : <input type="file"
name="fupload" size="40"></td>
</tr>
<tr>
<td colspan=2>
<input type="submit"
value="Simpan"/>
<input type="reset"
value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.40 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Elemen Label, Fieldset dan Legend

Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form.
Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus
memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id
pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan
elemen masukan sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik
teks yang dihasilkan oleh elemen label. Elemen fieldset merupakan elemen yang digunakan
untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-
elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau
saling berhubungan. Sedangkan Elemen legend digunakan untuk memberikan judul pada
sebuah fieldset.

Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Label, Fieldset dan Legend</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>Form Login</legend>
<label for="username">Username</label>
<input type="text" name="username"
id="username"/>
<label for="password">Password</label>
<input type="password" name="password"
id="password"/>
<input type="submit" name="submit"
value="Login"/>
</fieldset>
</form>
</body>
</html>

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 3 sesuai dengan instruksi modul di atas!.

6. Sumber Bacaan
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200
contoh program beserta tampilan grafisnya. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:
Andi Offset.

Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Modul Mata Kuliah : Web Programming I [#DM079] Hal.41 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 7
Konsep Dasar CSS
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami, menjelaskan konsep dasar CSS dan mengimplementasi elemen-elemen CSS.
b. Menggunakan CSS antara lain embedded style sheet, inline style sheet, dan linked style
sheet.
c. Memahami CSS Selector.
d. Menerangkan CSS property dan menggunakannya.
e. Membuat dropdown menu menggunakan CSS.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
CSS
CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan
untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur
dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh
World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan
menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file
html yang berperan dalam penataan kerangka dan layout web.

Aturan Penulisan CSS

Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang
digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk
mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu
selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan
diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur
melalui style.

Sintaks penulisannya:

Css Bersifat Case Sensitive

Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui
karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.42 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

.nim {
...
}

Maka nim akan dibedakan dengan Nim ataupun NIM.

Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah
dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.
Contoh:
- Nama seperti warnaMerah lebih baik dari pada wmr.
- WarnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah.
- Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
- Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang
berbeda.
- Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh
digunakan untuk nama.

Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan
berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali
dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan
diakhiri */.

Sintaks Penulisannya:
/*
Isi komentar
*/

Cara Menggunakan CSS

Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu Embedded Style Sheet, Inline
Style Sheet, dan Linked Style Sheet.

Embedded Style Sheet

Embedded Style Sheet adalah cara penulisan kode dimana penulisan CSS dilakukan pada tag
HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body> dan ada juga yang
menempatkan pada tag <head>.

Sintaks penulisannya :
<style type="text/css">
<!—Atribut CSS -->
</style>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.43 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 1</title>
<style type="text/css">
/* Ini Selektor h1 di jadikan sebuah komentar
h1{
background-color:purple;
}
*/

body{
background-color:blue;
color:white;
}
h1{
text-align:center;
}
p{
text-align:right;
font-size:18px;
font-weight:bold;
color:yellow;
}
hr{
border-color: red;
}
</style>
</head>
<body>
<h1>=|| TOKO PAKAIAN MURAH MERIAH ||=</h1>
<p>Jl.Gratis No.008, Condong Catur, Sleman<br/>
Yogyakarta
</p>
<hr/>
</body>
</html>

Inline Style Sheet

Inline Style Sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan saja.
Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.

Sintaks penulisannya:
<tag HTML style=”Properti:value/nilai”> ... </tag HTML>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.44 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 2</title>
</head>
<body>
<h1 style="background-color:red; color:white; text-
align:center">Belajar Pemrograman Web CSS</h1>
<p style="border:2px solid blue">CSS adalah aturan untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. </p>
<p>CSS merupakan singkatan dari Cascading Style
Sheet.</p>
</body>
</html>

Linked Style Sheet

Linked Style Sheet adalah cara yang dianjurkan untuk menggunakan kode css dengan HTML.
Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di pisahkan. Untuk
menggunakan kode css yang telah dipisahkan ini, maka dalam kode html dibuat skrip yang isinya
adalah memanggil file css tersebut untuk digunakan dalam kode html. Untuk me-
link/memanggil kode css di dalam kode html, bisa menggunakan kode berikut.

Sintaks penulisannya:
<link rel=”stylesheet” type=”text/css” href=”namafile.css”>

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>TANAMAN HIAS BUNGA</h1>
<h2>ANGGREK</h2>
<p>Suku anggrek-anggrekan atau Orchidaceae merupakan satu
suku tumbuhan berbunga dengan anggota jenis terbanyak. Jenis-jenisnya
tersebar luas dari daerah tropika basah hingga wilayah sirkumpolar,
meskipun sebagian besar anggotanya ditemukan di daerah tropika.</p>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.45 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

style.css
body{
background:url(latar.jpg) no-repeat; font-family:Georgia;
}

h1{
background-color:purple;
text-align:center;
color:white;
}

h2{
color:red;
font-size:25px;
}

p{
margin-left:50px;
color: blue;
font-size:24px;
}

Jenis-Jenis Selektor
Selektor atau pemisah dalam CSS, dibagi menjadi beberapa bagian, antara lain:

Selektor Tag / elemen HTML

Menggunakan tag yang terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan
selector.

Contoh:
h1 {
color:black;
}

Selektor ID
Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu
nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID
digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada ID
yang pertama saja. Penggunaan selector ID akan diawali dengan tanda pagar ( # ).

Contoh:
#atas {
background-color:red;
color:white;
font-size:50px;
text-align:center;
}

Selektor Kelas
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan
ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama
class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.46 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Penggunaan selektor kelas akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian
pada tag HTML ditambahkan class = (nama kelas).

Contoh:
.isi{
font-family:arial;
font-size:30px;
color:blue;
}

latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 4</title>
<link rel="stylesheet" type="text/css" href="gaya.css">
</head>
<body>
<div id="atas">Toko Onlineku</div>
<h1>Deskripsi:</h1>
<div class="isi">Toko online ini menjual barang-barang
elektronik baru dan bekas dengan harga yang terjangkau.</div>
</body>
</html>

gaya.css
/*Selektor ID */
#atas {
background-color:red;
color:white;
font-size:50px;
text-align:center;
}

/*Selektor Tag */
h1 {
color:black;
}

/*Selektor Class */
.isi{
font-family:arial;
font-size:30px;
color:blue;
}

5. Latihan/Tugas
Kerjakan latihan 1 sampai dengan latihan 4 sesuai dengan modul di atas!.

6. Sumber Bacaan
Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan Cascading Style
Sheets dalam halaman Web. Yogyakarta: Andi Offset.

Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.47 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 8
Implementasi CSS
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami, menjelaskan konsep dasar CSS dan mengimplementasi elemen-elemen CSS.
b. Memahami CSS Box Model dan Template Web dengan CSS.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
Grouping Element
Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan
untuk mendefinisikan inline content, sementara div digunakan untuk block level content.
Perbedaan dari kedua tag tersebut adalah sebagai berikut:
- Tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut
tidak diatur format stylenya (css).
- Tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web
ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).

4. Instruksi Modul
latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 5</title>
<style type="text/css">
div{
font-family: sans-serif;
color:#0000FF;
background-color:#FFFF00;
font-size:36px;
text-align:center;
width:800px;
}
</style>
</head>
<body>
<div>
<p>Ini Contoh Penggunaan DIV</p>
</div>
<span style="font-family:serif; color:#FF0000; font-
size:24px"> Ini Contoh dalam Span dengan warna merah</span>
</body>
</html>

Float
Float property berhubungan dengan pengaturan posisi sebuah obyek secara horizontal.
Penggunaan css float property bukan hanya sekedar untuk kepentingan pengaturan posisi
obyek/elemen saja, namun akan berkaitan dengan elemen lain disekitarnya. Ada empat
pengaturan yang dapat dilakukan dengan css float property.
- float:left; Untuk membuat elemen berada disisi sebelah kiri.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.48 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

- float:right; Untuk membuat elemen berada disisi sebelah kanan.

- float:none; Elemen berada disisi sebelah kiri namun menghasilkan penataan ruang berbeda
dengan float:left atau float:right
- float:inherit; Hasilnya hampir sama dengan float:none

Clear Property dan CSS Float Property

Properti css "clear" sangat erat hubungannya dengan css float property. Agar elemen lain
berada tepat di bawah obyek yang menggunakan css float property harus ditambahkan
"clear:both" di bawahnya. Bentuk kodenya adalah sebagai berikut:
<div style="clear:both"></div> atau <br style="clear:both" />

latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 6</title>
<style type="text/css">
.floatnone{float:none;}
.floatleft{float:left;}
.floatright{float:right;}
.border{width:600px; height:300px; border:2px solid
#C33B09;}
img{box-shadow:0 0 6px #666; border-radius:5px;
margin-left:5px; margin-right: 5px;}
</style>
</head>

<body>
<div class="floatnone border">
<h3>Float None CSS</h3>
<img class="floatnone"src="motor.jpg"/>
Konten yang ingin di isi
</div>
<div class="floatleft border">
<h3>Float Left CSS</h3>
<img class="floatleft"src="motor.jpg"/>
Konten yang ingin di isi
</div>
<div class="floatright border">
<h3>Float Right CSS</h3>
<img class="floatright"src="motor.jpg"/>
Konten yang ingin di isi
</div>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.49 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Membuat Drop Down Menu

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 7</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div id="wrapper">
<h3>Drop Down Menu Dengan CSS</h3>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a
href="#">HTML/CSS</a></li>
<li><a
href="#">JavaScript</a></li>
<li><a
href="#">Bootstrap</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.50 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

menu.css
#wrapper {
width:600px;
margin:auto;
}
/*style awal menu dan untuk menghilangkan list style*/
#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
/*membuat menu menjadi horizontal dengan display block*/
#menu ul li {
display: block;
position: relative;
float: left;
}
/*Untuk menyembunyikan ul li (submenu)*/
#menu li ul {
display: none;
}
/*style awal seblum cursor mouse di arahkan (menu utama)*/
#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #000;
/*margin-left: 1px;*/
white-space: nowrap;
}
/*style setelah cursor diarahkan*/
#menu ul li a:hover {
background: #666;
}
/*untuk memunculkan submenu jika pada sebuah menu utama ada tag il ul
(maksudnya ada tag ul ada dalam tag li)*/
#menu li:hover ul {
display: block;
position: absolute;
}
/*meratakan sub menu kanan kiri dan menghilangkan fungsi float left
(mengembalikan ke default)*/
#menu li:hover li {
float: none;
font-size: 11px;
}
/*style awal seblum cursor mouse di arahkan (submenu)*/
#menu li:hover a {
background: #3b3b3b;
}
/*style setelah cursor diarahkan (submenu)*/
#menu li:hover li a:hover {
background: #666;
}

Modul Mata Kuliah : Web Programming I [#DM079] Hal.51 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 3 sesuai dengan instruksi modul di atas!.

6. Sumber Bacaan
Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan Cascading Style
Sheets dalam halaman Web. Yogyakarta: Andi Offset.

Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.52 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 9
Layout Web & Image Slice
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Merancang layout desain web.
b. Memotong gambar atau slice image menggunakan tools photoshop.
c. Membuat layout dengan Cascading Style Sheet.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
LAYOUT WEB
- Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman.
- Layout meliputi penyusunan, pembagian tempat dalam suatu halaman, pengaturan jarak
spasi, pengelompokan teks dan grafik, serta penekanan pada bagian tertentu.
- Dalam pengaturan tersebut, digunakan element <div> dengan id dan class CSS yang kita
sesuaikan
- Diperlukan pemahaman aturan <div> untuk setiap konstruksi penggunaannya di dalam
halaman HTML

Model Top Index

Biasanya layout ini cocok digunakan untuk situs portal. Dengan banyak menu dan fasilitas yang
ditawarkan, atau menampilkan link yang banyak ke situs lain.

Model Layout Bottom Index

Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.53 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Model Layout Left Index

Layout tipe ini lebih akrab dengan pengunjung karena tampilan menu sama dengan sistem
informasi.

Model Layout Right Index

Kebalikan dari left index, cuma bedanya menu di bagian kanan jarang dipakai untuk menu
utama.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.54 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Model Layout alternating index

Biasanya digunakan untuk menampilkan grafik, foto, harga, jumlah, dan lain – lain.

IMAGE SLICE (MEMECAH GAMBAR)

Teknik Image Slice:
- Merupakan teknik memecah/memotong gambar pada website.
- Teknik ini digunakan untuk membuat gambar/desain suatu web lebih fleksibel, cepat, dan
menarik.
- Pecahan gambar tersebut akan di satukan kembali menggunakan kode CSS dan HTML.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.55 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

- Software yang digunakan : Adobe Photoshop, Adobe Ilustrator, Corel Draw, Gimp, dll.
- Crop tool atau Slice tool

Crop tool
- Proses yang dilakukan secara manual
- Cara ini banyak di pakai oleh professional
- Untuk memisahkan objek gambar dengan background transparan

Slice tool
- Proses yang dilakukan secara otomatis dan akan tersimpan dalam satu folder
- Tepat untuk desainer pemula dan menginginkan kepraktisan
- Slicing ujung dan tengah yang mau diambil gambarnya.
- Slicing bidang bergradasi yang mau diambil gambarnya.
- Penamaan folder untuk slicing.

4. Instruksi Modul
KERANGKA LAYOUT

Modul Mata Kuliah : Web Programming I [#DM079] Hal.56 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

SLICE IMAGE
Langkah-langkah Slice Tool:
- Buka software Adobe Photoshop.
- Desain web anda sesuai dengan kerangka layoutnya.
- Pilih bagian-bagian yang ingin anda slicing menggunakan slice tool bisa dilihat seperti gambar
dibawah:

- Setelah selesai proses slicing, klick menu file – Save for Web & Devices

- Pilih format gambar yang anda inginkan kemudian klick save

Modul Mata Kuliah : Web Programming I [#DM079] Hal.57 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

- Lihat hasil slicing dimana di simpan maka akan mendapatkan satu folder images dan satu file
html.
- Folder images berisi pecahan atau potongan-potongan gambar ketika di slice tool.
- Selesai

Langkah-langkah menggabungkan pecahan gambar menggunakan kode HTML dan CSS:

- Buat folder dengan struktur seperti dibawah ini:

- Buka editor teks web anda, misalnya sublime text.

- Ketikkan script HTML dibawah ini dengan filename index.html
- Ketikkan script CSS dibawah ini dengan filename style.css
- Setelah selesai, buka file index.html dengan browser anda misalnya firefox, chrome dan lain-
lain.
- Lihat hasilnya.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.58 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

index.html

Modul Mata Kuliah : Web Programming I [#DM079] Hal.59 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

style.css

Modul Mata Kuliah : Web Programming I [#DM079] Hal.60 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Modul Mata Kuliah : Web Programming I [#DM079] Hal.61 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Modul Mata Kuliah : Web Programming I [#DM079] Hal.62 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Modul Mata Kuliah : Web Programming I [#DM079] Hal.63 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

HASIL AKHIR WEB

5. Latihan/Tugas
Kerjakan sesuai instruksi modul di atas!.

6. Sumber Bacaan
Asep Herman Suryanto , Step by Step Web Design (2009:54)

Modul Mata Kuliah : Web Programming I [#DM079] Hal.64 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 10
Konsep Dasar JavaScript
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami dan menjelaskan konsep dasar dan mengimplementasi serta berlatih
penggunaan elemen JavaScript.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
JavaScript
JavaScript adalah bahasa script, bahasa yang tidak memerlukan kompiler untuk
menjalankannya, cukup dengan interpreter. Javascript untuk membuat program yang digunakan
agar dokumen HTML yang ditampilkan dalam browser menjadi lebih interaktif dan dinamis.
Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript adalah
bahasa script yang membutuhkan interpreter untuk menjalankannya, sedangkan Java adalah
bahasa pemrograman yang membutuhkan proses kompilasi terlebih dahulu agar bisa dijalankan.
Hampir semua browser web sudah ada interpreter javascript. Oleh karena itu, di sarankan
menggunakan browser web versi yang lebih baru agar mendapat dukungan javascript yang lebih
baik.

Struktur Javascript
<script language="javascript" type="text/javascript">
<!--
Penulisan kode javascript
//-->
</script>

Keterangan:
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali
JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan
pada jendela browser.

JavaScript sebagai bahasa berbasis pada obyek

Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.

Sintaks:
Nama_objek.nama_properti = nilai;
window.defaultStatus ="Hello JavaScript";

Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.

Sintaks:
Nama_objek.nama_metode(parameter);
document.write("Belajar JavaScript");

Modul Mata Kuliah : Web Programming I [#DM079] Hal.65 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Menyisipkan JavaScript
Embedded Script
Embedded script adalah cara menyisipkan javascript di dalam dokumen HTML. Anda bisa
menyisipkan script javascript di bagian head dan bagian body. Bagian body biasanya jarang
digunakan.

4. Instruksi Modul
latihan1.html
<!DOCTYPE html>
<html>
<head>
<title>Embedded Script</title>
<script type="text/javascript">
document.write("Hello, Ini Javascript di bagian
&lt;head&gt;");
</script>
</head>
<body>
<h2>Bagian Body</h2>
<script type="text/javascript">
document.write("Belajar JavaScript");
</script>
</body>
</html><h2>Bagian Body</h2>
<script type="text/javascript">
document.write("Belajar JavaScript");
</script>
</body>
</html>

Inline Script
Kode program JavaScript didefinisikan langsung didalam elemen HTML sebagai sebuah atribut.
Atribut pada elemen HTML ini biasanya berkaitan dengan event , yaitu sebuah aksi yang
dilakukan oleh seorang user. Misalnya seperti saat user menekan (klik) sebuah tombol.

latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Inline Script</title>
</head>
<body>
<a href="#" onClick="alert('Makasih Sudah Klik.');">Ayo
Klik! </a>
</body>
</html>

External Script
Menempatkan kode program JavaScript secara terpisah, kode program terhubung dengan
dokumen dengan meletakkanya pada elemen head. File JavaScript disimpan menggunakan
ekstensi .js.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.66 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

hello.js
function hello(){
document.write("Selamat Datang di Lab kami . . .!");
}

latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Eksternal Script</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<script type="text/javascript">
hello()
</script>
</body>
</html>

Dasar-Dasar JavaScript
Pemakaian alert sebagai property window

latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Alert Box</title>
</head>
<body>
<script type="text/javascript">
<!--
window.alert("Selamat Anda Berhasil");
//-->
</script>
</body>
</html>

Pemakaian metode dalam objek.

latihan5.html
<!DOCTYPE html>
<html>
<head>
<title>Metode Dalam Objek</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Belajar JavaScript<br/>");
document.write("Sangat Menarik dan interaktif");
//-->
</script>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.67 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Pemakaian prompt

latihan6.html
<!DOCTYPE html>
<html>
<head>
<title>Pemakain Prompt</title>
</head>
<body>
<script language="javascript">
var nama = prompt("Siapa nama Anda?"," ");
document.write("Hai, " + nama);
</script>
</body>
</html>

Pembuatan fungsi dan cara pemanggilannya

latihan7.html
<!DOCTYPE html>
<html>
<head>
<title>Fungsi dan Pemanggilannya</title>
<script type="text/javascript">
<!--
function pesan(){
alert ("memanggil fungsi javascript lewat
body onload")
}
//-->
</script>
</head>
<body onload=pesan()>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.68 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Dasar-Dasar Pemrograman di JavaScript

Operasi Dasar Aritmatika

latihan8.html
<!DOCTYPE html>
<html>
<head>
<title>Operasi Dasar Aritmatika</title>
<script type="text/javascript">
function test (val1,val2)
{
document.write("Penjumlahan : "+val1)
document.write("+"+val2+" = ")
document.write(val1+val2+"<br/>")
document.write("Perkalian : "+val1)
document.write("*"+val2+" = ")
document.write(val1*val2+"<br/>")
document.write("Pengurangan : "+val1)
document.write("-"+val2+" = ")
document.write(val1-val2+"<br/>")
document.write("Pembagian : "+val1)
document.write("/"+val2+" = ")
document.write(val1/val2+"<br/>")
document.write("Modulus : "+val1)
document.write("%"+val2+" = ")
document.write(val1%val2+"<br/>")
}
</script>
</head>
<body>
<input type="button" name="button1" value="Perhitungan"
onClick=test(8,4)/>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.69 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Operasi Relational
latihan9.html
<!DOCTYPE html>
<html>
<head>
<title>Operasi Relational</title>
<script type="text/javascript">
function test () {
val1=window.prompt("Nilai I :")
val2=window.prompt("Nilai II :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"+"<br>")
document.write(val1<val2)
}
</script>
</head>
<body>
<input type="button" name="button1" value="relational"
onclick=test()/>
</body>
</html>

Seleksi Kondisi (if ... else)

latihan10.html
<!DOCTYPE html>
<html>
<head>
<title>Seleksi If-Else</title>
</head>
<body>
<script type="text/javascript">
<!--
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "";
if (nilai >= 60)
hasil = "Lulus";
else
hasil = "Tidak Lulus"; document.write("Nilai Anda :
" + nilai); document.write("<br/>"); document.write("Anda " + hasil);
//-->
</script>
</body>
</html>

Penggunaan operator switch untuk seleksi kondisi

Modul Mata Kuliah : Web Programming I [#DM079] Hal.70 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

latihan11.html
<!DOCTYPE html>
<html>
<head>
<title>Seleksi Switch</title>
<script type="text/javascript">
<!--
function test () {
val1=window.prompt("Input Nilai (1-5):")
switch (val1) {
case "1" :
document.write("bilangan satu")
break
case "2" :
document.write("bilangan dua")
break
case "3" :
document.write("bilangan tiga")
break
case "4" :
document.write("bilangan empat")
break
case "5" :
document.write("bilangan lima")
break
default :
document.write("bilangan lainnya")
}
}
//-->
</script>
</head>
<body>
<input type="button" name="button1" value="switch"
onclick=test()>
</body>
</html>

Struktur Perulangan For

latihan12.html
<!DOCTYPE html>
<html>
<head>
<title>Struktur Perulangan For</title> </head>
<body>
<script type="text/javascript">
<!--
for (i=0;i<=10;i++) document.write("Sampai jumpa
kebali<br/>")
//-->
</script>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.71 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Struktur Perulangan While

latihan13.html
<!DOCTYPE html>
<html>
<head>
<title>Struktur Perulangan While</title> </head>
<body>
<script type="text/javascript">
<!--
var i=1
while (i<=10){
document.write("Ini Pengulangan ke-
"+i+"<br/>")
i++;
}
// -->
</script>
</body>
</html>

Struktur Perulangan Do ...While

latihan14.html
<!DOCTYPE html>
<html>
<head>
<title>Struktur Perulangan Do While</title>
</head>
<body>
<script type="text/javascript">
var i = 1
do {
document.write("Ini juga pengulangan yang ke-
"+i+"<br/>")
i++;
}
while (i <= 6)
var j = 5
do {
document.write("Perulangan ini kondisinya
tidak terpenuhi<br/>")
j++;
}
while(j <= 3)
</script>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.72 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Validasi Form pada Textfield dan Password

latihan15.html
<!DOCTYPE html>
<html>
<head>
<title>Struktur Perulangan For</title>
<script type="text/javascript">
<!--
function validasi(form){
if (form.user.value == ""){
alert("Anda belum mengisikan
Username?");
form.user.focus();
return (false);
}
if (form.pass.value == ""){
alert("Anda belum mengisikan
Password?");
form.pass.focus();
return (false);
}
return (true);
}
//-->
</script>
</head>
<body>
<form method=POST action="#" onSubmit="return
validasi(this)">
<table>
<tr>
<th colspan="3">Login Area</th>
</tr>
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="user"
/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="pass"
/></td>
</tr>
<tr>
<td><input type="submit"
value="Kirim"></input></td>
<td></td>
<td><input type="reset"
value="Batal"/></td>
</tr>
</table>
</form>
</body>
</html>

5. Latihan/Tugas
Kerjakan latihan 1 sampai latihan 15 sesuai dengan instruksi modul di atas!.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.73 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

6. Sumber Bacaan
https://www.w3schools.com

Modul Mata Kuliah : Web Programming I [#DM079] Hal.74 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 11
Implementasi JavaScript
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Mampu menguasai Javascript sehingga dapat menggunakannya untuk membuat halaman
web yang interaktif dan dinamis.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
KERANGKA LAYOUT

Modul Mata Kuliah : Web Programming I [#DM079] Hal.75 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

4. Instruksi Modul
HASIL AKHIR WEB

Modul Mata Kuliah : Web Programming I [#DM079] Hal.76 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

LAYOUT WEB MENGGUNAKAN BOOTSTRAP

Langkah-langkah pembuatannya:
- Struktur folder project:

- Buka editor teks web anda, misalnya sublime text.

- Ketikkan script HTML dibawah ini dengan filename index.html
- Ketikkan script CSS dibawah ini dengan filename style.css
- Setelah selesai, buka file index.html dengan browser anda misalnya firefox, chrome dan lain-
lain
- Lihat hasilnya.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.77 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

index.html

Modul Mata Kuliah : Web Programming I [#DM079] Hal.78 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Modul Mata Kuliah : Web Programming I [#DM079] Hal.79 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

style.css

Modul Mata Kuliah : Web Programming I [#DM079] Hal.80 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

HASIL AKHIR WEB

Konten Kiri (left)

Info Sekolah
&raquo; 28 Mei 2018<br>
<a href="#"> Belajar Web Desain</a><br/>
<hr color="#B6B4B4"/> &raquo; 27 Mei 2018 <br/>
<a href="#"> Ektrakurikuler Pramuka</a><br/>
<hr color="#B6B4B4"/>

Support Online
<img src="images/support-online.png" width="172"><br>
Catatan : jangan lupa siapkan gambarnya terlebih dahulu dan dimana lokasi gambarnya.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.81 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Award
<img src="images/new_Apicta_2.png" width="172"><br>
Catatan : jangan lupa siapkan gambarnya terlebih dahulu dan dimana lokasi gambarnya.

Konten Tengah (center)

Berita Terabaru
<table width="100%">
<tr>
<td>Senin, 21 April 2013</td>
</tr>
<tr>
<td><a href="#">Judul Berita</a></td>
</tr>
<tr>
<td>
<p>
<img
src="foto_berita/image.tempointeraktif.com.jpg" width="120"
height="100" hspace="10" border="0" align="left"/>
<div align="justify">Isi Berita ... <a
href="#">Selengkapnya</a></div>
</p>
<hr color="#D8D8D8" size="2"/>
</td>
</tr>
<tr>
<td>
<p>
<a href="#">1</a> | <a href="#">2</a> | <a
href="#">Next ></a> | <a href="#">Last >></a>
</p>
</td>
</tr>
</table>

Catatan : jangan lupa siapkan gambarnya terlebih dahulu dan di simpan dalam folder
foto_berita.

Bagian Pencarian
Form Search
Skrip dibawah ini diletakkan pada bagian <div id="logo"> </div>
<div style="padding-left:680px;padding-top:33px; color:#ffffff;font-
size:12px;">
<form method="post" action="#">
<input type="text" onFocus="this.value=''"
onBlur="if(this.value == '')this.value ='search'" value="search..."
name="search" />
<input type="submit" name="Submit" value="Search" />
</form>
</div>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.82 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Implementasinya:

Tips Menggunakan Javascript

Cara Membuat Title Bar Bergerak
Skrip dibawah ini diletakkan pada bagian <head> </head>
<script type="text/javascript">
var txt="Welcome to SMA Prestasi Yogyakarta";
var kecepatan=500;
var segarkan=null;
function bergerak() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);
}
bergerak();
</script>

Implementasinya:

5. Latihan/Tugas
Kerjakan sesuai instruksi modul di atas!.

6. Sumber Bacaan
Bengkel Internet Pens-ITS. Materi III Javascript.

Sidik, Betha. 2011. JavaScript. Informatika: Bandung

Rajif Agung Yunmar, S.Kom. 2011. Modul Pemrograman Web HTML & CSS. STMIK AMIKOM
Yogyakarta

Modul Mata Kuliah : Web Programming I [#DM079] Hal.83 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 12
jQuery: JavaScript Framework
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami dan menjelaskan konsep dasar dan mengimplementasi serta berlatih
penggunaan elemen jQuery.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
JQuery
JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh
beberapa situs yang canggih nan terkenal seperti: Wordpress, Maxcdn, Famo, IBM, Google,
Facebook, Twitter, Youtube, Nokia dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga
ada kok yang telah memakai jQuery, contohnya:VivaNews, Studio 21, Kompas dan lain-lain.
Selengkapnya bisa dilihat di http://jquery.com

Apa itu jQuery?

jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya
jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do
more”.

Mengapa memilih jQuery?

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara
lain:
- Kompatibel dengan hampir seluruh browser
- jQuery telah digunakan oleh website-website raksasa
- Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
- Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
- Didukung oleh banyak komunitas
- Disupport oleh plugin yang lengkap
- Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
- Open source atau Free
- jQuery lebih diminati oleh para developer web saat ini

Apa kemampuan yang dimiliki jQuery?

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:
- Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
- Mempermudah modifikasi/perubahan tampilan halaman web.
- Mempersingkat Ajax (Asynchronous Javacsript and XML).
- Memiliki API (Application Programming Interface).
- Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
- Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.84 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Bagaimana cara kerja jQuery?

Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas sebagai
penjelasannya.

jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan
semua di halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});

Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class
atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")

Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen
yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali
gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};

Dengan memahami cara kerja jQuery, semoga lebih mempermudah untuk mempelajari.

4. Instruksi Modul
Bagaimana menggunakan jQuery?
Langkah-langkah detil menggunakan jquery sebagai berikut:
Download library jQuery di http://jquery.com, silahkan pilih versi jQuery yang diinginkan,
misalnya Download the uncompressed, development jQuery 3.1.1, kemudian di klick nanti
nama file yang terdownload adalah jquery-3.1.1.js. Untuk lebih jelas bisa lihat gambar dibawah
ini.

Simpan file jquery-3.1.1.js pada folder latihan anda, misalkan di D:\latihan. Kemudian buat
dokumen baru yang isinya seperti berikut:

Modul Mata Kuliah : Web Programming I [#DM079] Hal.85 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Selanjutnya panggil library jQuery diantara tag <head>...</head>, maka sekarang skripnya
menjadi (perhatikan teks yang ditebalkan):

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script> </head>
<body>
</body>
</html>

Library jQuery siap digunakan. Untuk contoh penggunaannya bisa lihat dibawah ini.

MEMAHAMI SELECTOR
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan
operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemn tersebut. Adapun
elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut:
- Nama Tag
- Id
- Class
Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan
disajikan beberapa contoh sederhana pada bagian berikutnya.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.86 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Selector Tag
Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya.

selectortag.html
<!DOCTYPE html>
<html>
<head>
<title>Selector Tag</title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").addClass("biru");
});
</script>
<style type="text/css">
.biru{
color : blue;
font-weight: bold;
font-size: 25px;
}
</style>
</head>
<body>
<div>
<p>Belajar JQuery</p>
</div>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.87 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Selector Id
Cara menggunakan Selector id adalah dengan menyertakan tanda kres (#) sebelum nama
elemennya.

selectorid.html
<!DOCTYPE html>
<html>
<head>
<title>Selector Id</title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box").click(function(){
alert("Selamat Pagi");
});
});
</script>
</head>
<body>
<button id="box">Pesan</button>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.88 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Selector Class
Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum nama
elemennya. Latihan-latihan berikut untuk menjelaskan teori di atas.

selectorclass.html
<!DOCTYPE html>
<html>
<head>
<title>Selector Class</title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1100);
});
$(".tombol2").click(function(){
$("p").show(1100);
});
});
</script>
</head>
<body>
<p>Hello JQuery!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>

EVENTS
Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan
dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut,
misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik
(click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.89 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Event Click()
Event click dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan. Untuk lebih
jelasnya, perhatikan skrip sederhana berikut ini:

eventclick.html
<!DOCTYPE html>
<html>
<head>
<title>Event Click</title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Selamat datang di website STMIK
AMIKOM Yogyakarta")
});
});
</script>
</head>
<body>
<a href="http://www.amikom.ac.id">Klik disini untuk
menuju halaman web STMIK AMIKOM Yogyakarta</a>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.90 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Event dblclick()
Event dblclick akan dijalankan setelah terjadi klik 2xpada suatu elemen yang telah ditentukan.
Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini:

eventdbclick.html
<!DOCTYPE html>
<html>
<head>
<title>Event Double Click</title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").dblclick(function(){
$(this).css({background:"orange"});
});
});
</script>
<style type="text/css">
div {
background:purple;
width: 80px;
height:80px;
float:left;
margin:10px;
cursor:pointer;
}
</style>
</head>
<body>
<h2>klik dua kali pada setiap kotak untuk mengubah
warnanya</h2>
<div><h1 align="center">1</h1></div>
<div><h1 align="center">2</h1></div>
<div><h1 align="center">3</h1></div>
<div><h1 align="center">4</h1></div>
<div><h1 align="center">5</h1></div>
<div><h1 align="center">6</h1></div>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.91 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Event mouseover()
Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang ditentukan.

Event mouseleave()
Event mouseleave akan dijalankan ketika kursor mouse meninggalkan elemen yang ditentukan.
Untuk lebih jelasnya penggunaan event mouseover dan mouseleave, perhatikan skrip berikut
ini:
eventmouseoverdanleave.html
<!DOCTYPE html>
<html>
<head>
<title>Event Mouse Over dan Mouse Leave</title>
<script type="text/javascript" src="jquery-
3.1.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").mouseover(function(){
$(this).css({background:"red"});
});
$("div").mouseleave(function(){
$(this).css({background:"orange"});
});
});
</script>
<style type="text/css">
div {
background:purple;
width: 80px;
height:80px;
float:left;
margin:10px;
cursor:pointer;
}
</style>
</head>
<body>
<h2>Arahkan kursor mouse pada setiap kotak untuk mengubah
warnanya</h2>
<div><h1 align="center">1</h1></div>
<div><h1 align="center">2</h1></div>
<div><h1 align="center">3</h1></div>
<div><h1 align="center">4</h1></div>
<div><h1 align="center">5</h1></div>
<div><h1 align="center">6</h1></div>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.92 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

5. Latihan/Tugas
Kerjakan sesuai instruksi modul di atas!.

6. Sumber Bacaan
http://jquery.com/

Modul Mata Kuliah : Web Programming I [#DM079] Hal.93 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 13
jQuery UI : jQuery User Interface
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Memahami dan menjelaskan konsep dasar dan mengimplementasi serta berlatih
penggunaan elemen jQuery UI.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
BERKREASI DENGAN PLUGIN JQUERY UI
jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer jQuery.
Karena sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya.

jQuery UI dibuat oelh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan
efek-efek yang canggih dan komponen librari pelengkap jQuery, diantaranya:
- Accordion
- Dialog
- Effect/animasi
- Datepicker
- Progressbar
- Drag and Drop
- Tabs
- Slider
- Dan lain-lain
Selanjutnya, bagian berikut akan membahas cara penggunaan beberapa komponen library dari
jQuery UI.

4. Instruksi Modul
Instalasi jQuery UI
Download jQuery UI di http://jqueryui.com/download maka akan tampil halaman downloadnya,
klik aja langsung link current (stable), maka file jQuery UI (jquery-ui-1.12.1.zip) akan tersimpan
di komputer anda.

Modul Mata Kuliah : Web Programming I [#DM079] Hal.94 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

Filenya masih berbentuk kompresi (jquery-ui-1.12.1.zip), oleh karena itu gunakan program
winzip/winrar untuk mengekstraknya, nanti semua file jquery-ui akan ditemukan pada folder
jquery-ui-1.12.1
Untuk mencobanya, silahkan klik versi demonya yang ada di folder jquery-ui-1.12.1, nanti klik 2x
file index.html pada folder tersebut, maka akan tampil halaman demo dari jQuery UI.
Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable, accordion,
progressbar, Dialog, Effect, dan lain-lain. Keren kan???
Sekarang pertanyaannya, bagaimana menerapkan library jQuery UI pada website kita? Ikuti aja
pembahasan berikutnya.

DATEPICKER
Datepicker berfungsi untuk mengambil tanggl dari sistem kelender yang ada di komputer,
sehingga memudahkan kita dalam memilih tanggal, karena ditampilkan secara keseluruhan dan
menarik. Oke langsung saja kita jelajahi fiturnya.
datepicker.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-
ui.css">
<script src="jquery-ui-
1.12.1/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.95 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

ACCORDION
Salah satu komponen menarik jQuery UI lainnya adalah accordion. Accordion berfungsi untuk
mengelompokkan content dalam panel-panel yang terpisah, dimana pengunjung dapat
membuka dan menutup panel-panel yang diinginkan. Disamping itu, accordion juga bisa untuk
mengelompokkan menu-menu yang sejenis. Dan sesuai dengan namanya, yaitu accordion, maka
ketika membuka/menutup panel akan terlihat efek seperti alat musik accordion.

<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion</title>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-
ui.css">
<script src="jquery-ui-
1.12.1/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Profil STMIK AMIKOM Yogyakarta</h3>
<div>
<p>Sekolah Tinggi Manajemen Informatika dan
Komputer AMIKOM Yogyakarta (selanjutnya disebut STMIK AMIKOM
YOGYAKARTA) merupakan salah satu perguruan tinggi swasta yang
berkedudukan di Provinsi DIY Kabupaten Sleman di bawah naungan
Yayasan AMIKOM Yogyakarta.</p>
</div>
<h3>Visi STMIK AMIKOM Yogyakarta</h3>
<div>
<p>Visi STMIK AMIKOM Yogyakartaadalah menjadi
sekolah tinggi kelas dunia yang unggul dalam bidang teknologi
informasi dan komunikasi yang berbasis entrepreneurship (private
entrepreneur university).</p>
</div>
<h3>Program Studi di STMIK AMIKOM Yogyakarta</h3>
<div>
<ul>
<li>S2 Teknik Informatika</li>
<li>S1 Teknik Informatika</li>
<li>S1 Sistem Informasi</li>
<li>D3 Teknik Informatika</li>
<li>D3 Manajemen Informatika</li>
</ul>
</div>
</div>
</body>
</html>

Modul Mata Kuliah : Web Programming I [#DM079] Hal.96 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

5. Latihan/Tugas
Kerjakan sesuai instruksi modul di atas!.

6. Sumber Bacaan
http://jqueryui.com/

Modul Mata Kuliah : Web Programming I [#DM079] Hal.97 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

PERTEMUAN 14
Final Project
1. Tujuan Intruksi Khusus
Setelah mengikuti modul ini, mahasiswa diharapkan mampu:
a. Mempresentasikan hasil final project yang telah dibuat mulai dari fitur yang disediakan,
proses pembuatan hingga kelebihan dari web yang dibuat.

2. Alat dan Bahan

a. Microsoft Visual Studio
b. Browser

3. Dasar Teori
HTML, CSS, JavaScript & jQuery

4. Instruksi Modul
Presentasikan hasil final project yang telah dibuat! Mulai dari fitur yang disediakan, proses
pembuatan hingga kelebihan dari web yang dibuat.

5. Latihan/Tugas
-

6. Sumber Bacaan
-

Modul Mata Kuliah : Web Programming I [#DM079] Hal.98 dari 100

 Universitas AMIKOM Yogyakarta
Fakultas Ilmu Komputer - Program Studi Diploma Tiga Manajemen Informatika

DAFTAR PUSTAKA
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:
Andi Offset.

Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200
contoh program beserta tampilan grafisnya Edisi Revisi Keempat. Bandung: Informatika.

Rajif Agung Yunmar, S.Kom. 2011. Modul Pemrograman Web HTML & CSS. STMIK AMIKOM
Yogyakarta

Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan Cascading Style
Sheets dalam halaman Web. Yogyakarta: Andi Offset.

Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom.

Asep Herman Suryanto , Step by Step Web Design (2009:54)

Bengkel Internet Pens-ITS. Materi III Javascript.

Sidik, Betha. 2011. JavaScript. Informatika: Bandung

https://www.w3schools.com/

http://jquery.com/

http://jqueryui.com/

Modul Mata Kuliah : Web Programming I [#DM079] Hal.99 dari 100