Kata Pengantar

Waktu adalah nikmat Allah, SWT yang paling berharga, maka beruntunglah
orang-orang yang dapat menggunakan waktu dengan baik, karena satu detik
waktu yang telah lalu tidak akan dapat diminta kembali. Maka merugilah orang-
orang yang menyia-nyiakan waktu. Alhamdulillah, atas berkat rahmat dan karunia
Allah, SWT, penulis telah berusaha untuk menyelesaikan penulisan jobsheet ini
dengan sebaik mungkin dengan memanfaatkan waktu yang ada.
Jobsheet ini merupakan buku panduan praktikum untuk matakuliah Praktek
Pemrograman Web yang disusun secara berurutan mulai dari pertemuaan minggu
pertama hingga akhir. Pada setiap modul berisi teori dari topik yang dibahas
disertai praktikumnya. Diakhir setiap modul disertai tugas yang harus dikerjakan
oleh mahasiswa dengan tujuan lebih memperdalam pamahaman dan kemampuan
mahasiswa.
Dalam jobsheet ini, penulis telah berusaha untuk menjelaskan sedetil mungkin
dan disertai latihan dan contoh-contoh nyata dari setiap modulnya, dengan
harapan memudahkan mahasiswa dalam mempraktekan dan memahaminya.
Buku ini dapat diselesaikan dengan baik, tidak terlepas dari peran banyak pihak.
Terima kasih kami ucapkan kepada unsur pimpinan Politeknik Negeri Padang
(PNP), Pimpinan Jurusan Teknologi Informasi PNP dan rekan-rekan staff
pengajar di Jurusan teknologi Informasi yang tidak dapat disebutkan satu persatu.
Akhir kata, semoga kehadiran Jobsheet ini dapat bermanfaat bagi para pembaca
semuanya. Kritik dan saran yang membangun sangat kami harapkan.

Padang, Oktober 2014

Tim Penulis

ii
 Daftar Isi

Lembar Pengesahan
Kata Pengantar
Daftar Isi
Rencana Pembelajaran Semesteran
Panduan Praktikum
Modul 1 : Pengantar Bahasa Pemrograman Web ......................................... 1
Modul 2 : Konsep Dasar HTML .................................................................. 12
Modul 3 : Penanganan Teks dan Warna ....................................................... 25
Modul 4 : Bekerja Dengan List .................................................................... 32
Modul 5 : Bekerja Dengan Table ................................................................. 37
Modul 6 : Bekerja Dengan Gambar ............................................................. 43
Modul 7 : Bekerja Dengan Audio dan Video ............................................... 47
Modul 8 : Bekerja Dengan Form .................................................................. 51
Modul 9 : Bekerja Dengan Link ................................................................... 61
Modul 10 : Bekerja Dengan Frame .............................................................. 67
Modul 11 : Bekerja Dengan Tag <div> ....................................................... 74
Modul 12 : Pengantar Javascript .................................................................. 81
Modul 13 : Bekerja Dengan Javascript ........................................................ 92
Modul 14 : Pengantar Cascading Style Shee (CSS) ..................................... 105
Modul 15 : Bekerja Dengan CSS ................................................................. 118
Modul 16 : Proyek Web Sederhana .............................................................. 128

iii
 FOR/SPM/001.071b E1R0

DEPARTEMEN PENDIDIKAN NASIONAL

POLITEKNIK NEGERI PADANG
JURUSAN TEKNOLOGI INFORMASI
FORMULIR No. Formulir FOR/XXX/000.000-E1R0
Edisi 01
RENCANA PROGRAM DAN Revisi 0
KEGIATAN PEMBELAJARAN SEMESTER (RPKPS) Berlaku Efektif
Halaman
1 November 2010
1 dari 3 Halaman

Mata Kuliah Praktek Pemrograman Web 1 Dosen Yuhefizar, S.Kom, M.Kom

Kode / SKS/Jam /1 sks/4 Jam Kode Dosen
Prasyarat - Status Wajib

Perguruan Tinggi Politeknik Negeri Padang Jurusan Teknologi Informasi

Program Studi Manajemen Informatika
Semester 2 (Dua) Konsentrasi

Deskripsi Singkat Mata Kuliah

Mata Kuliah Praktek Web Desain ini mempelajari dasar-dasar pemrograman web sebagai pengetahuan yang wajib dimiliki oleh
mahasiswa yang akan belajar membangun web. Materi kuliah ini meliputi pembahasan tag-tag pada Hypertext Markup Language
(HTML), Cascading Style Sheet (CSS) dan Javascript.
Mata Kuliah ini diberikan pada semester 2 dan merupakan mata kuliah wajib bagi mahasiswa Program Studi Manajemen Informatika
Jurusan Teknologi Informasi di Politeknik Negeri Padang.

Tujuan Pembelajaran
Setelah mengikuti mata kuliah ini mahasiswa akan mampu membangun website berbasis HTML dan mengkombinasikannya dengan
CSS dan Javascript.

Materi Pembelajaran
01. Pengantar Bahasa Pemrograman Web
1.1 Jenis-Jenis Web
1.2 Jenis-jenis bahasa Pemrograman Web
1.3 Mengenal Tool dalam pemrograman web.

02. Konsep Dasar HTML

2.1 Penanganan teks dan Warna
2.2 Bekerja dengan List
2.3 Bekerja dengan Tabel
2.4 Bekerja dengan Gambar
2.5 Bekerja dengan Audio dan Video
2.6 Bekerja dengan Form
2.7 Bekerja dengan Link
2.8 Bekerja dengan <div> & Frame

03. Cascading Style Sheet

3.1 Memanfaatkan CSS dalam Desain Web
3.2 CSS Referen

04. Javascript
4.1 Mengenal perintah-perintah javascript
4.2 Latihan Javascript

Hasil Pembelajaran
01. Mampu menjelaskan tentang bahasa pemrograman web.
02. Mampu menjelaskan konsep pemrograman web
03. Mampu menjelaskan tag-tag pada HTML
04. Mampu menjelaskan tentang CSS
05. Mampu menjelaskan tentang Javascript

Dibuat Diperiksa Disetujui

Tanggal 24 Oktober 2014 Tanggal 24 Oktober 2014 Tanggal 24 Oktober 2014
Oleh Yuhefizar, S.Kom. M.Kom Oleh Yance Sonatha, S.Kom, MT Oleh Ervan Asri, S.Kom, M.Kom
Jabatan Satff Pengajar Jabatan Ka. Prodi Mnj Informatika Jabatan Ketua Jurusan

Tanda Tangan Tanda Tangan Tanda Tangan

 FOR/SPM/001.071b E1R0

DEPARTEMEN PENDIDIKAN NASIONAL

POLITEKNIK NEGERI PADANG
JURUSAN TEKNOLOGI INFORMASI
FORMULIR No. Formulir FOR/XXX/000.000-E1R0
Edisi 01
RENCANA PROGRAM DAN Revisi 0
KEGIATAN PEMBELAJARAN SEMESTER (RPKPS) Berlaku Efektif
Halaman
1 November 2010
2 dari 3 Halaman

Minggu
ke Topik (Pokok Bahasan) Metode Pembelajaran

1 00. Pendahuluan  Ceramah

0.1 Penjelasan pokok-pokok materi perkuliahan secara  Menggunakan white board
keseluruhan
0.2 Penjelasan tata tertib perkuliahan
0.3 Penjelasan sistem penilaian
2 01. Pengantar Bahasa Pemrograman Web  Praktek
1.1 Mengenal Website  Tanya jawab
1.2 Istilah Penting Seputar Website  Diskusi
1.3 Teknologi Website, 1.4 Jenis-Jenis Website  Mengerjakan latihan dan soal
1.5 Manfaat Website, Praktikum dan Tugas.  Menggunakan white board dan infocus
3 02. Konsep Dasar HTML  Praktek
2.1 Pengertian HTML  Tanya jawab
2.2 Sejarah HTML  Diskusi
2.3 Mengenal Tag-Tag HTML  Mengerjakan latihan dan soal
2.4 Format Dokumen HTML  Menggunakan white board dan infocus
Praktikum dan Tugas.
4 03. Penanganan Teks dan Warna  Praktek
3.1 Penanganan Teks  Tanya jawab, Diskusi
3.2 Penanganan Warna  Mengerjakan latihan dan soal
Praktikum dan Tugas.  Menggunakan white board dan infocus
5 04. Bekerja Dengan List  Praktek
4.1 Order List  Tanya jawab, Diskusi
4.2 Un-Order List  Mengerjakan latihan dan soal
Praktikum dan Tugas.  Menggunakan white board dan infocus
6 05. Bekerja Dengan Table  Praktek
5.1 Bekerja dengan table dengan berbagai kasus  Tanya jawab, Diskusi
Praktikum dan Tugas.  Mengerjakan latihan dan soal
 Menggunakan white board dan infocus
7 06. Bekerja Dengan Gambar  Praktek
6.1 Mengelola Gambar  Tanya jawab, Diskusi
6.2 Menampilkan Gambar dengan Berbagai Cara  Mengerjakan latihan dan soal
Praktikum dan Tugas.  Menggunakan white board dan infocus
8 07. Bekerja Dengan Audio dan Video  Praktek
7.1 Bekerja Dengan Audio  Tanya jawab, Diskusi
7.2 Bekerja Dengan Video  Mengerjakan latihan dan soal
Praktikum dan Tugas.  Menggunakan white board dan infocus

9 UJIAN TENGAH SEMESTER

10 08. Bekerja Dengan Form  Praktek

8.1 Tag <form> dan Tag <input>  Tanya jawab, Diskusi
8.2 Tag <select> dan <option>  Mengerjakan latihan dan soal
8.3 Tag <textarea> dan <fieldset>  Menggunakan white board dan infocus
Praktikum dan Tugas.
11 09. Bekerja Dengan Link  Praktek
9.1 Bekerja Dengan Link dengan Berbagai cara  Tanya jawab, Diskusi
Praktikum dan Tugas.  Mengerjakan latihan dan soal
 Menggunakan white board dan infocus

Dibuat Diperiksa Disetujui

Tanggal 24 Oktober 2014 Tanggal 24 Oktober 2014 Tanggal 24 Oktober 2014
Oleh Yuhefizar, S.Kom. M.Kom Oleh Yance Sonatha, S.Kom, MT Oleh Ervan Asri, S.Kom, M.Kom
Jabatan Satff Pengajar Jabatan Ka. Prodi Mnj Informatika Jabatan Ketua Jurusan

Tanda Tangan Tanda Tangan Tanda Tangan

 FOR/SPM/001.071b E1R0

DEPARTEMEN PENDIDIKAN NASIONAL

POLITEKNIK NEGERI PADANG
JURUSAN TEKNOLOGI INFORMASI
FORMULIR No. Formulir FOR/XXX/000.000-E1R0
Edisi 01
RENCANA PROGRAM DAN Revisi 0
KEGIATAN PEMBELAJARAN SEMESTER (RPKPS) Berlaku Efektif
Halaman
1 November 2010
3 dari 3 Halaman

12 10. Bekerja Dengan Frame  Praktek

10.1 Bekerja Dengan Frame  Tanya jawab, Diskusi
Praktikum dan Tugas.  Mengerjakan latihan dan soal
 Menggunakan white board dan infocus
13 11. Bekerja Dengan tag <div>  Praktek
11.1 Bekerja dengan tag <div>  Tanya jawab, Diskusi
Praktikum dan Tugas.  Mengerjakan latihan dan soal
 Menggunakan white board dan infocus
14 12. Pengantar Javascript  Praktek
12.1 Pengenalan Javascript  Tanya jawab, Diskusi
12.2 Tipe Data, Operator dan Variabel  Mengerjakan latihan dan soal
Praktikum dan Tugas.  Menggunakan white board dan infocus
15 13. Bekerja Dengan Javascript  Praktek
13.1 Struktur Perulangan  Tanya jawab, Diskusi
13.2 Struktur Pengambilan Keputusan  Mengerjakan latihan dan soal
Praktikum dan Tugas. Menggunakan white board dan infocus
16 14. Pengantar Cascading Style Sheet (CSS)  Praktek
14.1 Pengenalan CSS  Tanya jawab, Diskusi
14.2 Manfaat dan Cara Menggunakan CSS  Mengerjakan latihan dan soal
Praktikum dan Tugas.  Menggunakan white board dan infocus
17 15. Bekerja Dengan CSS  Praktek
15.1 Bekerja Dengan CSS dengan Berbagai Cara  Tanya jawab, Diskusi
Praktikum dan Tugas.  Mengerjakan latihan dan soal
 Menggunakan white board dan infocus
18 16. Proyek Web Sederhana  Praktek
16.1 Mengerjakan Proyek Web Sederhana  Tanya jawab dan diskusi

Evaluasi
01. Kemampuan tentang konsep bahasa pemrograman web.
02. Kemampuan tentang tag-tag HTML.
03. Kemampuan tentang javascript.
04. Hasil Diskusi, Tugas dan Quiz
05. UTS dan UAS
06. Tugas Besar

Bahan, Sumber Informasi dan Referensi

01. Betha Sidik, Pemrograman Web Dengan HTML , Penerbit Informatika, 2010.
02. Sugiri, Budi, Desain Web Menggunakan HTML dan CSS, Penerbit Andi, Yogyakarta, 2010.
03. Paul J. Deitel, Javascript for Programmer, Prentice Hall, 2010.

Dibuat Diperiksa Disetujui

Tanggal 24 Oktober 2014 Tanggal 24 Oktober 2014 Tanggal 24 Oktober 2014
Oleh Yuhefizar, S.Kom. M.Kom Oleh Yance Sonatha, S.Kom, MT Oleh Ervan Asri, S.Kom, M.Kom
Jabatan Satff Pengajar Jabatan Ka. Prodi Mnj Informatika Jabatan Ketua Jurusan

Tanda Tangan Tanda Tangan Tanda Tangan

 PANDUAN PRAKTIKUM

Agar tujuan pembelajaran Praktek Pemrograman Web 1 ini tercapai, maka peserta
praktikum (praktikan) perlu diberikan panduan dan persyaratan yang harus dipenuhi.
Materi inti pada matakuliah Praktek Pemrograman Web 1 ini terdiri atas :
1. HTML
2. JavaScript
3. Cascading Style Sheet
Untuk dapat mengikuti perkuliahan ini diharapkan praktikan sudah paham dan terbiasa
dengan teknologi internet dan aplikasinya.

Perangkat yang Dibutuhkan :

Untuk kegiatan praktikum dibutuhkan perangkat :
1. Komputer
2. Editor, yaitu perangkat lunak yang berfungsi untuk membuat script HTML. Ada
banyak pilihan untuk editor ini, namun dalam panduan ini digunakan perangkat
lunak notepdad++ yang dapat didownload secara gratis di http://notepad-plus-
plus.org.
3. Browser adalah perangkat lunak yang digunakan menterjemahkan script HTML
dan menampilkannya menjadi sebuah halaman web. Saat ini banyak sekali
tersedia perangkat lunak browser yang bersifat gratis. Dalam panduan ini
digunakan browser Mozilla Firefox yang dapat di download di
https://www.mozilla.org/en-US/firefox/new.
4. Koneksi Internet jika diperlukan.

Kewajiban Praktikan :
Selama praktikum, praktikan wajib :
1. Mengerjakan seluruh latihan pada setiap modulnya.
2. Membuat kesimpulan setiap selesai mengerjakan setiap modul.
3. Mengerjakan Tugas yang diberikan pada setiap modul.
4. Meng-unggah kesimpulan tersebut ke blog masing-masing.
 MODUL 1
PENGANTAR BAHASA PEMROGRAMAN WEB

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

1. Pengertian dan sejarah website.

2. Teknologi website.
3. Bahasa pemrograman web
4. Manfaat web
5. Praktek menulis script HTML

Saat ini, terminologi website sudah menjadi ungkapan sehari-hari dan sudah tidak
asing lagi bagi seluruh kalangan, terutama dikalangan dunia pendidikan. Sebuah
survey menyimpulkan bahwa 80% informasi yang terdapat Internet disebarkan
melalui layanan website ini. Oleh karena itu, kebutuhan terhadap orang-orang
yang mampu membangun/membuat website akan sangat tingi dimasa mendatang.

Dahulu, website murni digunakan sebagai media untuk menyampaikan informasi,

namun sekarang kehadiran website tidak saja sebagai media untuk menyebarkan
informasi namun juga sebagai media untuk berkomunikasi, berbisnis, belajar dan
lain sebagainya. Sehingganya, kebanyakan aktifitas manusia sudah mulai
terpenuhi melalui layanan-layanan yang disediakan oleh website.

Aplikasi internet berbasis website yang dapat dinikmati, antara lain :

 E-banking, melalui website, transaksi keuangan dapat dilakukan dimana
saja, kapan saja tanpa mesti datang ke kantor bank.
 E-Goverment, melalui website, layanan dan fungsi pemerintah dapat
dilaksanakan dengan mudah.
 E-Commerce/e-business, melalui website sekarang bisa berbisnis online,
sehingga sekarang banyak toko-toko online yang pangsa pasarnya
mendunia.

Modul Praktek Pemrograman Web 1 1

  E-social, melalui website, kebutuhan kita sebagai makluk sosial dapat
terpenuhi, hal ini terbukti dengan munculnya aplikasi social network
berbasis website.
 E-Learning, melalui website e-learning, proses belajar mengajar dapat
dilakukan tanpa harus hadir di ruang kelas, bahkan fasilitasnya lebih
canggih.
 E-News, penyebaran informasi di segala penjuru dunia, sekarang dapat
diperoleh melalui website berita/portal. Dan masih banyak lagi.

1.1 Mengenal Website

Website adalah keseluruhan halaman-halaman web yang terdapat dari sebuah
domain yang mengandung informasi. Sebuah website biasanya dibangun atas
banyak halaman web yang saling berhubungan. Hubungan antara satu halaman
web dengan halaman web yang lainnya, atau antar bagian dalam halaman web
yang sama di sebut dengan Hyperlink sedangkan teks yang dijadikan media
penghubung disebut Hypertext. Sebuah website dapat diakses melalui browser,
yaitu perangkat lunak untuk mengakses halaman-halaman web, seperti Internet
explorer, mozilla firefox, opera, safari, chrome dan lainnya.

Website dapat berjalan di internet seperti saat sekarang ini tidak lain adalah berkat
penemuan teknologi yang disebut HTML oleh Tim Barners Lee pada tahun 1989.
Tim Barners Lee adalah salah seorang staff ahli dari CERN (Conseil Europeen
pour la Recherche Nucleaire), sebuah organisasi penelitian yang berlokasi di
Jenewa, Swiss. HTML adalah singkatan dari HyperText Markup Language yang
merupakan suatu bahasa semi pemrograman yang menjadi dasar terwujudnya
website.

1.2 Istilah Penting Seputar Website

Berikut ini beberapa istilah yang berhubungan dengan website :
 www adalah metode untuk menampilkan informasi di internet yanag dapat
diakses melalui sebuah browser.

Modul Praktek Pemrograman Web 1 2

 Halaman web (web page) adalah sekelompok informasi yang tampil pada
browser, informasi tersebut ditampilkan berdasarkan sebuah URL (Uniform
Resource Locator)
 URL adalah alamat lengkap dari sebuah informasi yang dapat diakses melalui
browser, misalnya http://www.ephi.web.id/images/ephi.jpg
 http adalah protocol untuk layanan hypermedia, komunikasi antara
browser dengan web server.
 www melambangkan layanan web,
 ephi.web.id adalah nama domain,
 images adalah nama folder dan
 ephi.jpg adalah nama sebuah file.
 Situs Web (Website) adalah kumpulan dari keseluruhan halaman web yang
terdapat pada sebuah domain, yang terdiri dari dua atau lebih halaman web.
 Homepage adalah halaman web pertama dari sebuah website yang diakses
berdasarkan domainnya. Misalnya anda mengakses web dengan alamat
www.ephi.web.id, maka halaman yang tampil pertama kali disebut
homepage, namun jika anda telah mengklik link-link yang lain pada halaman
tersebut, maka yang anda buka adalah halaman webnya.
 Domain adalah nama unik yang dimiliki oleh setiap website untuk
memudahkan manusia dalam mengingat nama sebuat website, misalnya
ephi.web.id, lintau.info, polinpdg.ac.id, dan lain-lain.

1.3 Teknologi Website

Perkembangan teknologi dibidang website terus diexplore hingga saat ini telah
mulai memasuki teknologi yang disebut dengan web 3.0. Pada tahun 1994
dibentuklah W3C (World Wide Web Consorsium) sebagai otoritas tunggal bagi
pengembangan web serta berwenang menetapkan standar yang berlaku di
dalamnya. Perkembangan teknologi website hingga saat ini :
1. Web 1.0 (periode 1989 - 2000 )
Ciri utama dari website periode ini adalah masih bersifat statis dan
dibutuhkan pemahaman terhadap bahasa pemrograman web untuk dapat

Modul Praktek Pemrograman Web 1 3

 menambah ataupun memperbaharui konten. Namun, tujuan utamanya
dalam menyampaikan informasi tercapai.

Masih murni menggunakan kode-kode HTML, sehingga pengunjung

hanya bisa mendapatkan informasi (browsing and read) saja, melakukan
pencarian dan belum ada interaksi antara pemilik website dengan
pengunjung.

2. Web 2.0 (Periode 2001 - 2010)

Istilah teknologi web 2.0 pertama kali dicetuskan oleh O’Reilly pada tahun
2003 dan kemudian dipopulerkan dalam konferensi Web 2.0 pertama di
tahun 2004. Pada teknologi Web 2.0 ini keberadaan pengunjung tidak saja
sekedar membaca informasi dari website, namun dapat berkolaborasi dan
berbagi konten dalam website tersebut sehingga tidak hanya programer
saja yang dapat mengupdate website. Hal ini terlihat dari website jejaring
sosial, blog, file sharing, photo sharing, video sharing dan lainnya.

Tidak itu saja, dengan dukungan teknologi seperti ajax atau plug in
lainnya, maka website dapat menjalankan aplikasi layaknya aplikasi di
desktop seperti drag & drop, voice chat, bahkan mirip sistem operasi
dimana kita dapat mengolah data spreadsheet, presentasi dan aplikasi
pengolah kata, seperti layanan google docs.

3. Web 3.0 (Periode 2011 – sekarang)

Konsep dari teknologi Web 3.0 ini sebenarnya telah diperkenalkan oleh
Tim Barness Lee pada tahun 2001, ia menulis sebuah artikel ilmiah yang
menggambarkan Web 3.0 sebagai sebuah sarana bagi mesin untuk
membaca halaman-halaman Web. Hal ini berarti bahwa mesin akan
memiliki kemampuan membaca Web sama seperti yang manusia dapat
lakukan sekarang ini.

Web 3.0 berhubungan dengan konsep Web Semantik, yang

memungkinkan isi web dinikmati tidak hanya dalam bahasa asli pengguna,

Modul Praktek Pemrograman Web 1 4

 tapi juga dalam bentuk format yang bisa diakses oleh agen-agen software.
Oleh karena itu Web 3.0 juga disebut sebagai Web Semantik.

Penekanan lainnya dari Web 3.0 adalah dalam bidang pencarian data, akan
digunakan konsep, dimana manusia dapat berkomunikasi dengan mesin
pencari. Pengguna dapat meminta Web untuk mencari suatu data spesifik
tanpa harus bersusah-susah mencari satu per satu dalam situs-situs Web.
Web 3.0 juga dapat menyediakan keterangan-keterangan yang relevan
tentang informasi yang ingin kita cari, bahkan tanpa kita minta.

Hingga saat ini, penelitian untuk mengembangkan teknologi Web 3.0 ini
terus dilakukan, kita tunggu saja. Yang pasti, teknologi Web 3.0 ini akan
membutuhkan koneksi internet yang super cepat tentunya.

1.4 Jenis-Jenis Website

Seiring dengan perkembangan teknologi informasi yang begitu cepat, website juga
mengalami perkembangan yang sangat berarti. Dalam pengelompokkan jenis web,
lebih diarahkan berdasarkan kepada fungsi, sifat dan bahasa pemrograman yang
digunakan.
Jenis-jenis web berdasarkan sifatnya :
 Website Dinamis, merupakan sebuah website yang menyediakan konten
atau isi yang selalu berubah-ubah setiap saat. Misalnya website berita,
seperti, www.kompas.com, www.detik.com, www.polinpdg.ac.id, dan
lain-lain.
 Website statis, merupakan website yang kontennya sangat jarang diubah
dan untuk mengubahnya memerlukan pengetahuan teknis.
Berdasarkan pada tujuannya, website terbagi atas :
 Personal web, website yang berisi informasi pribadi seseorang,
 Corporate web, website yang dimiliki oleh sebuah perusahaan,
 Portal web, website yang mempunyai banyak layanan, mulai dari layanan
berita, email dan jasa-jasa lainnya.
 Forum web, sebuah web yang bertujuan sebagai media untuk diskusi.

Modul Praktek Pemrograman Web 1 5

  Disamping itu juga ada website e-Government, e-Banking, e-
Payment, e-Procurement, dan lain sebagainya.
Ditinjau dari segi bahasa pemrograman yang digunakan, website terbagi atas
 Server Side, merupakan website yang menggunakan bahasa pemrogram
yang tergantung kepada kepada sebuah server untuk menterjemahkan
kode-kode pemrograman web, seperti : PHP, ASP dan lain sebagainya.
Jika tidak ada server, maka website yang dibangun menggunakan bahasa
pemrograman diatas tidak akan dapat berfungsi sebagaimana mestinya.
 Client Side, adalah website yang langsung dapat dieksekusi dari sisi client
saja (tidak tergantung kepada server). Misalnya : html, javascript.
Disamping jenis-jenis diatas, sekarang pengelolaan website dinamis yang bersifat
server side dapat berupa webiste Konten Management System (CMS), yaitu
sebuah website yang mempunyai pengelolaan kontennya lebih terstruktur
sehingga memudahkan dalam pengelolaannya.

1.5 Mengenal Website CMS

Website Konten Management System atau disingkat WCMS adalah suatu metoda
dalam mengelola sebuah kontent/isi dari website. Konten dapat berupa teks, suara,
gambar video, animasi dan aplikasi lainnya yang disimpan dalam sebuah database
sehingga mudah dalam pengelolaannya, baik bagi orang yang mengerti tentang
teknologi web maupun yang tidak.

Berdasarkan pada fungsinya, WCMS dapat di bagi atas :

 WCMS Portal, adalah sebuah website CMS yang mempunyai banyak
layanan, seperti layanan berita, forum, mailing list, e-mail dan lain
sebagainya. Misalnya : CMS Joomla, CMS Drupal, CMS Wordpress, dan
lainnya.

 WCMS E-Commerce, adalah sebuah website CMS yang bertujuan agar

dapat melakukan proses transaksi online. Misalnya : CMS OsCommerce,
CMS PrestaShop, CMS Magento dan lain-lain

Modul Praktek Pemrograman Web 1 6

  WCMS E-Learning, adalah website CMS yang bertujuan untuk keperluan
proses belajar mengajar jarak jauh. Misalnya : CMS aTutor, CMS Moodle
dan lain sebagainya.

 WCMS Forum, adalah website CMS yang menyediakan media untuk

proses diskusi secara online, misalnya : CMS phpBB, CMS MyBB dan
lain sebagainya.

 WCMS Gallery, adalah website CMS yang menyediakan wadah untuk

menampilkan gallery foto. Misalnya : CMS Galery, CSM Copermine dan
lain sebagainya.

Disamping penggolongan diatas, WCMS juga dapat dikelompokkan berdasarkan

kepada sifatnya, yaitu :
 WCMS Komersial, adalah WCMS yang berbayar, artinya harus
membayar sejumlah harga tertentu untuk dapat menggunakannya serta
untuk mendapatkan source codenya.
 WCMS Open Source, ini merupakan jenis WCMS yang paling banyak
beredar di internet, karena bersifat open source (bebas untuk di unduh,
digunakan dan disebarluaskan) dan berlisensi GPL.

1.6 Manfaat Website

Website mempunyai banyak manfaat, karena kemampuannya dalam
menyampaikan informasi dalam berbagai cara, kemampuannya dalam berinteraksi
dan kemampuannya dalam menjalankan layanan-layanan tertentu, seperti aplikasi
bisnis, aplikasi perbankan, aplikasi pembelajaran online dan seterusnya,

Secara umum, manfaat dari website adalah :

 Media untuk memperkenalkan diri atau mempromosikan
institusi/lembaga, tentunya dengan menyediakan informasi yang akurat
dan jelas pada website.
 Media untuk berkomunikasi, antara perusahaan dengan clientnya, antara
pengelola sekolah dengan siswanya, antara pemerintah dengan warganya,

Modul Praktek Pemrograman Web 1 7

 atau media komunikasi untuk stake holder yang terkait dengan website
tersebut dan masyarakat umum.
 Media untuk berbagi informasi.
 Media untuk belajar dan mengajar.
 Media untuk berbisnis
 Dan seterusnya.

PRAKTIKUM
Pada praktikum awal ini, praktikan akan diajarkan cara memulai pembuatan
script-script website menggunakan editor notepad++. Pastikan dikomputer Anda
sudah terinstall software tersebut, kalau belum, harap unduh terlebih dahulu di
http://notepad-plus-plus.org.
1. Cara membuka Editor
a) Klik tombol Start->All Program->Notepad++->Notepad++, seperti
gambar berikut :

b) Sehingga tampil editor notepad++ seperti berikut :

Modul Praktek Pemrograman Web 1 8

 Bagian paling atas dari editor adalah sekumpulan menu-menu yang
mempunyai fungsi sesuai dengan namanya, serta dibawahnya
terdapat icon-icon yang berfungsi sebagai shortcut. Pada area yang
ditandai pada gambar diatas merupakan lokasi tempat Anda
mengetikkan script-script pemrograman web nantinya.
2. Mengetik Script Pada Editor
c) Setelah editor terbuka, sekarang silahkan Anda ketik script seperti
gambar berikut apa adanya.

Terlihat notepad++ memberikan nomor pada setiap baris script

yang Anda ketikkan. Untuk saat ini kita belum membahas tentang
arti dari script diatas, Anda cukup memahami bahwa semudah
itulah mengetik script pemrograman di notepad++ ini.
3. Cara Menyimpan Script
d) Setelah selesai menulis script, maka Anda harus menyimpannya
terlebih dahulu, agar nanti jika ada perbaikan, Anda dapat

Modul Praktek Pemrograman Web 1 9

 mengeditnya kembali. Untuk menyimpan script ini, silahkan Anda
klik menu File->Save, sehingga tampil seperti gambar berikut :

Langkah pertama, tentukan lokasi folder tempat penyimpanan file

web Anda ini. Pada gambar diatas, disimpan pada folder dengan
nama WEB 1. Kemudian pada bagian file name isi dengan dengan
nama file web ini. Misalnya: lat1.html. Lalu pada bagian Save as
type pastikan Anda pilih Hiper Text Markup Language file.
e) Klik tombol Save untuk menyimpannya.
4. Cara Menjalankan Script
Ada dua cara menjalankan script HTML ini, yaitu :
1. Langsung dari editor notepad++, dengan cara, klik menu Run->lalu
pilih jenis browser yang ada di computer Anda. Perhatikan gambar
berikut :

Modul Praktek Pemrograman Web 1 10

 Terlihat bahwa notepad++ telah menyediakan 4 pilihan browser, yaitu
Firefox, IE, Chrome dan Safari. Pastikan Anda memilih browser yang
telah terinstall di computer Anda.
2. Melalui jendela windows explorer, dengan cara meng-klik langsung
pada file HTML tersebut, perhatikan gambar berikut :

Terlihat pada gambar diatas, file script HTML ini disimpan pada
Drive D, dalam folder WEB 1. Silahkan lakukan klik ganda pada
file HTML (lat1), sehingga akan terbuka sebuah web browser dan
menampilkan hasil dari script tersebut. Perhatikan gambar berikut :

Inilah hasil dari script yang Anda buat tersebut. Selamat, Anda
telah berhasil membuat halaman web yang pertama menggunakan
script HTML.
5. Cara Menutup Editor notepad++.
Jika telah selesai bekerja dengan editor notepad++, maka tutuplah dengan
cara :
f) Klik menu File->Exit atau tekan langsung tombol CTRL+F4,
maka editor notepad++ akan hilang dari monitor.

Modul Praktek Pemrograman Web 1 11

 6. Cara Membuka kembali/mengedit
File script HTML yang telah disimpan sebelumnya, dapat diedit kembali
dengan cara :
g) Aktifkan terlebih dahulu notepad++ Anda.
h) Dari menu yang ada, klik menu File->Open, dari jendela yang
muncul pilih folder lokasi dari file tersebut, kemudian pilih file
yang akan dibuka/diedit, lalu klik tombol Open. Maka script
tersebut akan kembali tampil dan dapat Anda edit kembali.

Selamat mencoba….

REFERENSI LANJUTAN :
1. http://www.evolutionoftheweb.com/?hl=id
2. http://home.web.cern.ch/topics/birth-web
3. http://en.wikipedia.org/wiki/Tim_Berners-Lee
4. http://www.w3.org
5. http://notepad-plus-plus.org

Modul Praktek Pemrograman Web 1 12

 MODUL 2
KONSEP DASAR HTML

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

1. Hypertext Markup Language (HTML)

2. Aturan-aturan penulisan HTML
3. Istilah-istilah penting HTML

Hypertext Markup Language (HTML) merupakan konsep dasar yang harus dipahami
oleh seseorang yang belajar pemrograman web.

2.1 Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language yaitu sebuah bahasa markup
yang memberi nilai tambah/kemampuan lebih dari sebuah teks untuk ditampilkan pada
halaman browser dengan kata lain, HTML merupakan sebuah standar yang digunakan
untuk menampilkan dokumen web. Misalnya sebuah teks ”My WEB” kemudian
dengan HTML diberi tanda <b>My WEB</b>, maka dengan pemberian tanda <b>
menyebabkan teks My WEB tercetak tebal dihalaman browser, begitu juga dengan
pemberian tanda-tanda (tag) lainnya, sehingga dengan tanda-tanda yang dimiliki oleh
HTML membuat teks dapat tampil sesuai keinginan.

HTML bukanlah bahasa pemrograman murni, disebut bahasa Markup atau semi bahasa
pemrograman web. Dikatakan bukan bahasa pemrograman murni karena dalam HTML
tidak terdapat konsep-konsep utama yang harus dimiliki oleh sebuah bahasa
pemrograman, seperti :

 Tidak tersedianya Struktur Perulangan (Looping), seperti for, do, while dan lain-
lain

 Tidak tersedianya Struktur Pengambil Keputusan (Decision Structure), seperti

if, switch, case dan lain-lain.

Walaupun HTML bukanlah bahasa pemrograman, namun HTML adalah tulang

punggung dari sebuah situs web, karena walau bagaimanapun canggihnya sebuah

Modul Praktek Pemrograman Web 1 1

halaman web tetap menggunakan script HTML, script bahasa pemrograman web
hanyalah menyisipkan kode-kodenya kedalam script HTML itu sendiri. Oleh karena itu,
penguasaan tentang HTML wajib dimiliki jika Anda akan mempelajari bahasa
pemrograman web. Beberapa contoh bahasa pemrograman web adalah PHP, JSP, ASP,
Perl dan lainnya.

2.2 Sejarah HTML

Seperti telah dibahas pada modul 1, bahwa penemu konsep HTML ini adalah Sir
Timothy Berners Lee, diawali dengan penemuan konsep WWW dan kemudian baru
diciptakan HTML. Berikut ini sejarah perkembangan HTML :

Tahun Versi Keterangan

1989 Titik awal penemuan HTML

1992 HTML 1.0 Proposal pertamaTim Berners-Lee

1993 HTML+ Perbaikan tampilan HTML 1.0

1994 HTML 2.0 Jadi standar bahasa web

1995 HTML 3.0 Rilis resmi HTML versi 3.0

Jan 1997 HTML 3.2 Fitur baru, seperti fonts, tables, applets, superscripts,
subscripts dan lainnya. (direkomendasikan oleh W3C)

Des 1997 HTML 4.0 Rilis, fitur yang menonjol pada versi ini adalah dukungan
terhadap bahasa CSS.

Apr 1998 HTML 4.0 Direkomendasi menggantikan versi sebelumnya

Des 1999 HTML 4.1 Perbaikan kelemahan dari versi 4.0

Jan 2008 HTML 5.0 Masih dalam bentuk Draft. Beberapa fungsi baru yang
ditambahkan pada versi ini adalah embedding audio, video,
graphics, client-side data storage, dan interactive dokumens

Agt 2009 HTML 5.0 Draft terakhir, masih belum direkomendasikan

2012 HTML 5.0 Kandidat untuk direkomendasikan

Akhir HTML 5.0 Rencana untuk direkomendasikan

2014

Modul Praktek Pemrograman Web 1 2

2.3 Konsep Dasar HTML
Sebelum membahas HTML lebih jauh, perlu diketahui beberapa istilah terkait dengan
HTML :

1. Tag adalah spesial teks markup yang dibatasi oleh tanda < dan >. Terdapat dua
model tag, yaitu start tag/tag pembuka dengan simbol < tagname > dan end
tag/tag penutup dengan simbol </tagname>. Contoh <p> dibaca tag P atau tag
dengan nama P. <p> disebut sebagai tag pembuka dan pasangannya </p>
disebut sebagai tag penutup.

2. Elements, adalah bagian-bagian dari sebuah halaman HTML, diawali oleh start
tag dan diakhiri oleh end tag. Sebuah elements terdiri atas tiga bagian, yaitu
Start tag/Tag Pembuka, Konten dan End tag/Tag Penutup Perhatikan contoh
berikut :

<b> teks ini akan tercetak tebal </b>

Keterangan :

Element HTML Keterangan

<b> Tag pembuka
teks ini akan tercetak Konten
tebal
</b> Tag penutup

Lebih jelasnya perhatikan contoh berikut :

Start tag Konten End tag

<p> Ini paragraf </p>
<h1> My web </h1>
<img src=me.jpg />
<br />

Terlihat dari tabel diatas, bahwa :

 Sebuah element HTML diawali dengan start tag atau disebut juga dengan
tag pembuka.

Modul Praktek Pemrograman Web 1 3

  Sebuah element HTML diakhiri dengan end tag atau tag penutup, namun
terdapat beberapa tag pembuka yang tidak memiliki tag penutup. Misalnya
<br>, <hr> dan <img>. Agar kaidah penulisan HTML menjadi benar, maka
penulisan start tag tersebut ditambahkan karakter / sebelum tanda >, seperti
contoh : <br />

 Segala sesuatu yang terdapat antara start tag dan end tag disebut dengan
konten/element konten.

 Beberapa element HTML ada yang tidak memiliki konten, seperti <img
src=“me.jpg>, oleh karena itu, end tag nya disisipkan pada start tag dengan
cara menambahkan karakter / sebelum tanda >. Sehingga penulisan yang
benar menjadi <img src=“me.jpg />.

 Kebanyakan element HTML memiliki attribut, seperti contoh : <a

href=”http://ephi.web.id”>My Web</a>. href merupakan sebuah attribute
dari tag <a>.

3. Element HTML Bercabang, yaitu sebuah element HTML dalam element

HTML lainnya. Perhatikan contoh berikut :

<p>Ini merupakan <b>pelajaran pertama saya </b>pada materi HTML </p>

Penjelasan :

Pada contoh diatas terdapat 2 Element HTML, yaitu :

1. Element: <b> </b>

Start tag Konten End tag

<b> pelajaran pertama saya </b>

2. Element <p> </p>

Start tag Konten End tag

<p> Ini merupakan <b>pelajaran pertama saya </p>
</b>pada materi HTML

Tidak ada batasan element HTML Bercabang ini, yang perlu diperhatikan adalah
urutan pemberian end tag-nya.

Contoh end tag yang salah :

<b><i><u>teks ini akan tercetak tebal, miring dan bergaris bawah</b></i></u>

Modul Praktek Pemrograman Web 1 4

 Penulisan end tag yang benar adalah :
<b><i><u>teks ini akan tercetak tebal, miring dan bergaris bawah</u></i></b>

<b>
<i>
<u>
Konten
</u>
</i>
</b>

4. Attribute adalah informasi tambahan yang dimiliki oleh sebuah tag. Sebuah
attribut telah mempunyai nilai default, sehingga kebanyakan attribut dari sebuah
tag bersifat pilihan, artinya boleh digunakan dan boleh tidak. Attribut ini di tulis
pada bagian start tag, perhatikan sintak berikut :

<tagname attributname=”value”>
Contoh :
<p align=”right”>konten</p>
Maka ’align’ adalah atribut dari tag <p>. Tag <p> digunakan untuk membuat
sebuah paragraf, secara default setiap paragraf akan rata kiri, namun dengan
penambahan atribut align=right akan membuat paragraf menjadi rata kanan.

Dapat saja sebuah element HTML mempunyai lebih dari satu attribut, misalnya
tag body. Perhatikan contoh berikut :

<body bgcolor=”red” text=”yellow> konten </body>

Antara satu attribut dengan attribut berikunya dipisahkan oleh spasi.
5. Karakter Khusus, dalam kondisi tertentu, kita perlu menampilkan simbol <, >
” ” atau simbol-simbol lainnya yang secara default digunakan oleh element
HTML. Oleh karena itu, HTML menyediakan karakter-karekter khusus untuk
menampilkan simbol-simbol tersebut. Perhatikan tabel berikut :

Simbol Karakter Khusus

< &lt;
> &gt;
” &quot;
Spasi &nbsp;

Modul Praktek Pemrograman Web 1 5

 & &amp;

6. Komentar, yaitu informasi tambahan pada dokumen HTML yang tidak akan
diproses oleh browser. Biasanya digunakan untuk memberikan penjelasan atas
bagian tertentu dari dokumen HTML. Sebuah pesan komentar diawali oleh tanda
<!-- dan diakhiri dengan -->, perhatikan contoh berikut :

<!-- ini hanya contoh -->

2.4 Format Dasar Dokumen HTML

Dokumen HTML adalah seluruh item yang terdapat pada element HTML <html>
konten </html>. Karena itulah seluruh tag-tag HTML dimulai dengan <html> dan
diakhiri oleh </html>. Perhatikan struktur dasar HTML berikut :
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Contoh :

Tag Keterangan
<!DOCTYPE html> Tag ini berfungsi untuk mendefinisikan jenis dokumen dan versi
HTML
<html> Menandakan awal dari dokumen HTML
<head> Berfungsi untuk menyatakan header dari dokumen HTML
<title> Berfungsi untuk memberikan judul dari dokumn HTML dan

Modul Praktek Pemrograman Web 1 6

 harus berada dalam tag <head>
<body> Berfungsi untuk menampilkan seluruh konten dari web,
didalamnya akan terdapat berbagai tag.

PRAKTIKUM
Dalam praktikum modul 2, praktikan akan belajar penggunaan tag-tag dasar dari
HTML.
1. Tag <head>
Tag <head> digunakan untuk memberikan informasi tentang dokumen web yang
sedang dibuat. Tag <head> diletakkan setelah tag <html>. Tidak boleh terbalik.
Dalam tag <head> terdapat tag turunan, yaitu :
 Tag <title>, berguna untuk memberikan judul dari dokumen web. Judul
tersebut akan tampil dibagian atas dari browser. Praktekanlah script
berikut :

Maka hasilnya akan menjadi :

 Tag <meta>, berguna untuk menyediakan metadata dari dokumen web

yang terdiri atas informasi singkat halaman web (description), kata kunci
(keywords), author dan lainnya. Praktekan script berikut :

Modul Praktek Pemrograman Web 1 7

 Informasi-informasi yang ditulis pada tag <meta> tidak akan terlihat
pada halaman web sewaktu di eksekusi.
 Tag <link>, digunakan untuk menghubungkan dokumen web dengan
sumber lain, misalnya dengan file css. Praktekan script berikut :

Pada script diatas, terdapat pemanggilan terhadap file style.css yang

terdapat pada http://www/ephi.web.id/css/style.css. Pembasahan CSS
akan dilakukan pada modul khusus.
 Tag <base>, digunakan untuk menentukan URL dasar untuk semua URL
relative halaman web. Misalnya, sebuah domain web beralamat di
www.ephi.web.id. Praktekan scrip berikut :

Setelah sebuah tag <base> didefinisikan, maka penggunaannya dalam tag

<body> tidak lagi mengikutkan konten dari base URL tersebut.

Modul Praktek Pemrograman Web 1 8

 Perhatikan baris 7, jika tidak menggunakan tag <base> maka harus
ditulis <img src=”http://www.ephi.web.id/images/header.png”
 Tag <style>, digunakan untuk menentukan style sheet dari dokumen saat
ini. Artinya kita dapat membuat fungsi sendiri pada halaman web dan
berfungsi hanya untuk halaman web itu saja. Praktekan script berikut :

Terlihat pada gambar diatas, didefinisikan style khusus dengan nama

myclass dengan aturan warnak background akan berwarna merah dan tex
berwarna putih (#fff) serta berjarak 10px dari pinggir. Jika dieksekusi,
maka hasilnya akan seperti gembar berikut :

 Tag <script>, digunakan untuk menambahkan file script eksternal atau

mendefinisikan script khusus ke dokumen web saat ini. Biasanya
digunakan untuk menyisipkan bahasa pemrograman javascript.
Praktekan contoh berikut :

Modul Praktek Pemrograman Web 1 9

 Terlihat pada gambar diatas, didefinisikan sebuah fungsi dengan nama
Hello, jika fungsi ini dipanggil akan menampilkan “Hello, Saya
Yuhefizar”. Lalu pada baris 12, fungsi ini dipanggil melalui sebuah
tombol (button). Jika dijalankan, maka pertama kali akan tampil sebuah
halaman web dengan sebuah tombol OK, jika tombol tersebut di klik,
maka akan tampil seperti berikut :

2. Komentar
Seperti script pemrograman yang lainnya, pada script HTML juga dapat
disisipkan komentar agar memudahkan dalam mengelola dan memahami script
pemrograman. Sebuah komentar tentu tidak akan diproses/diterjemahkan oleh
browser. Cara memberikan komentar pada HTML adalah :
 Komentar satu baris : <!-- tulis komentar disini -->. Perhatikan script
pada pembahasan tag <meta> diatas.
 Komentar lebih dari satu baris :
<!--
Komentar anda
Disini
-->
3. Tag <br / >, line break
Tag ini digunakan untuk berpindah satu baris kebawah. Ini merupakan salah satu
tag yang tidak mempunyai tag penutup, oleh karena itu penulisannya menjadi
<br / >. Sesudah dan sebelum tanda slash diberi jarak 1 spasi.

Modul Praktek Pemrograman Web 1 10

 Maka hasilnya akan menjadi :

4. Tag <hr />, horizontal line

Tag ini digunakan untuk membuat garis pembatas secara mendatar (horizontal).

Maka hasilnya akan menjadi :

5. Tag <pre>, pre formatted

Modul Praktek Pemrograman Web 1 11

 Tag ini digunakan untuk menampilkan teks apa adanya pada halaman browser
sesuai dengan yang ditulis pada script HTML.

Anda dapat mengetikan apa saja dalam tag <pre>, maka akan ditampilkan apa
adanya, namun tidak boleh menggunakan symbol < >, karena akan dianggap
sebuah tag nantinya.
Maka hasilnya :

Selamat belajar,

REFERENSI LANJUTAN :
1. http://en.wikipedia.org/wiki/Html5
2. http://www.w3schools.com/html/html_head.asp
3. http://www.comptechdoc.org/independent/web/html/guide/htmlhead.html

Modul Praktek Pemrograman Web 1 12

 MODUL 3
PENANGANAN TEKS DAN WARNA

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

1. Penanganan Teks
2. Penanganan Warna

Hypertext Markup Language (HTML) merupakan konsep dasar yang harus dipahami
oleh seseorang yang belajar pemrograman web.

3.1 Penanganan Teks

Teks merupakan komponen terpenting dalam menyampaikan informasi. Oleh karena
itu, agar informasi yang disampaikan melalui web dapat dipahami dengan mudah oleh
pengunjung web, maka perlu diketahui apa saja yang dapat dilakukan oleh HTML
terhadap teks. Berikut ini beberapa tag yang berhubungan dengan hal tersebut.

1. Tag <h>

Tag <h> digunakan membuat dengan ukuran tertentu, mulai dari tag <h1>
sampai dengan tag <h6>. Tag <h1> menandakan bahwa teks akan tercetak
dengan ukuran huruf yang lebih besar daripada ukuran standar. Biasanya tag
<h1> digunakan untuk Judul sebuah konten, tag <h2> untuk sub judul dan
seterusnya.

Tag ini mempunyai satu atribut, yaitu align yang berfungsi untuk mengatur
perataannya. Contoh <h1 align=center>Selamat Datang</h1>

2. Tag <b>, tag <i>, tag <u>

Ini merupakan tag yang umum, dimana tag <b> (bold) digunakan untuk
membuat teks tercetak tebal, tag <i> (italic) untuk membuat teks tercetak miring
dan tag <u> (underline) untuk membuat teks bergaris bawah. Ketiga tag ini tidak
mempunyai atribut.

Modul Praktek Pemrograman Web 1 1

3. Tag <small>, tag <big>

Tag <small> digunakan untuk membuat teks tercetak dengan ukuran kecil,
sebaliknya tag <big> akan membuat teks tercetak dengan ukuran besar.

4. Tag <sup>, tag <sub>

Tag <sup> digunakan untuk membuat teks naik setengah pt (point), sebaliknya
tag <sub> digunakan untuk turun setengah pt. Biasanya tag ini digunakan dalam
pembuatan rumus kimia atau perpangkatan.

5. Tag <font>, Tag <basefont>

Tag <font> digunakan untuk menentukan jenis huruf, ukuran dan warna yang
digunakan terhadap teks, sedangkan tag <basefont> digunakan untuk
menetapkan default warna, ukuran, dan jenis huruf untuk semua teks yang ada
dibawah elemen ini. Tag <basefont> ini hanya didukung oleh browser IE.

6. Tag <P>

Tag <p> digunakan untuk membuat paragraf baru dan mengatur perataannya.

7. Tag <dl>,<dt>,<dd>

Tag ini digunakan untuk memformat teks dalam pendefinisian sebuah istilah.

8. Tag <pre>

Digunakan untuk menampilkan teks apa adanya, seperti yang ditulis di editor.

9. Tag <address>

Biasanya digunakan untuk menampilkan informasi pemilik web atau penulis

artikel.

10. Tag <abbr>

Digunakan untuk memberikan kepanjangan dari sebuah singkatan.

Modul Praktek Pemrograman Web 1 2

PRAKTIKUM
Dalam praktikum modul 3, praktikan akan belajar penggunaan tag-tag HTML yang
berhubungan dengan penanganan teks dan warna. Kerjakan contoh dibawah ini, pahami
lalu ambil kesimpulan.
1. Tag <h>

2. Tag <b>, tag <i>, tag <u>

3. Tag <small>, tag <big>

4. Tag <sup>, tag <sub>

5. Tag <font>, Tag <basefont>

Modul Praktek Pemrograman Web 1 3

6. Tag <p>

7. Tag <dl><dt><dd>

8. Tag <pre>

9. Tag <address>

10. Tag <abbr>

Modul Praktek Pemrograman Web 1 4

3.2 Penanganan Warna
Tata pewarnaan konten web sangat mempengaruhi kualitas website. Oleh karena itu
diperlukan pengetahuan bagaimana cara mengatur pewarnaan tersebut. Dalam bahasa
HTML, perintah-perintah untuk menampilkan warna dapat dilakukan dengan dua cara,
yaitu :
1. Menggunakan Istilah bahasa warna yang umum, seperti :

Kode Bahasa Warna Arti

Black Warna hitam
Yellow Warna kuning
Green Warna hijau
Blue Warna biru
dst Dan seterusnya

2. Menggunakan kombinasi bilang Hexadecimal, yaitu bilangan yang terdiri dari

1,2,3,4,5,6,7,8,9.0.a.b.c.d.f. Dengan aturan : diawali oleh tanda # diikuti oleh
tiga atau 6 bilangan tersebut. Contoh : #fff (warna putih), #ffd700 (warna
kuning)
Berikut ini contoh dan fungsi pengaturan warna ini :

Tag Fungsi
<body bgcolor=red bgcolor merupakan perintah untuk memberi warna latar
color=yellow> belakang. Jika diletakkan pada tag body, maka akan
berpengaruh pada seluruh halaman web.
<font color=green> Hanya berpengaruh pada teks yang diberi tag font hingga
tag tersebut di tutup.
<table bgcolor=cyan> Memberikan efek warna latar belakang pada sebuah
<tr bgcolor=magenta> tabel, baris atau sel.
<td bgcolor=purple>

Contoh :

Modul Praktek Pemrograman Web 1 5

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan :
1. Latihan 1 :

2. Latihan 2 :

3. Latihan 3 :

Selamat belajar,

REFERENSI LANJUTAN :
1. http://www.w3schools.com/tags/ref_colornames.asp
2. http://www.w3schools.com/tags/tag_font.asp
http://www.w3schools.com/tags/tag_basefont.asp

Modul Praktek Pemrograman Web 1 6

 MODUL 4
BEKERJA DENGAN LIST

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi

dan cara menggunakan fitur LIST pada HTML.

LIST merupakan salah satu fitur HTML dalam membuat daftar yang berurutan atau
tidak.

4.1 Daftar Berurutan (Order List)

Daftar berurutan adalah suatu metoda untuk menguraikan suatu topik berdasarkan
urutan tertentu, dapat berupa :
1. Angka (1,2,3, dst).
2. Abjad besar atau kecil (A, B, C, dst atau a, b, c, dst)
3. Angka Rowawi besar atau kecil (I,II,II, dst atau i,ii,iii, dst)
Contoh :
Matakuliah favorit saya : Matakuliah favorit saya :
1. Web Desain A. Web Desain
2. Web Programming B. Web Programming
3. Basis Data C. Basis Data

Untuk membuat order list di awali dengan tag <ol> list </ol>, sedangkan untuk listnya
diberikan tag <li>list item</li>

4.2 Daftar Tidak Berurutan (Unorder List)

Dengan metoda ini, urutan-urutan dari sebuah topik diatur dengan menggunakan
simbol.
Contoh :
Matakuliah favorit saya : Matakuliah favorit saya :
 Web Desain  Web Desain
 Web Programming  Web Programming
 Basis Data  Basis Data
Untuk membuat Unorder list di awali dengan tag <ul> list </ul>, sedangkan untuk
listnya diberikan tag <li>list item</li>.

Modul Praktek Pemrograman Web 1 1

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan :

Order List

1. Latihan 1 :
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

2. Latihan 2 :
<ol type="1">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>

Silahkan Anda ganti nilai type dengan A, a, I dan i untuk menentukan jenis
urutannya.

Type Keterangan
1 List ditampilkan dalam bentuk urutan angka (nilai default)
A List ditampilkan dalam bentuk urutan Abjad Besar
a List ditampilkan dalam bentuk urutan abjad kecil
I List ditampilkan dalam bentuk urutan angka romawi besar
i List ditampilkan dalam bentuk urutan angka romawi kecil

Anda juga dapat menentukan nilai awal dalam daftar urutannya dengan
menambahkan atribut start. Kerjakan latihan berikut :
3. Latihan 3 :
<ol type="1" start=5>
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
Maka daftar urutannya akan dimulai dari angka lima.

Modul Praktek Pemrograman Web 1 2

Un-Order List
4. Latihan 4
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
5. Latihan 5

Silahkan Anda ganti type dengan nilai square, circle, disc atau none, simpan
kemudan lihat perubahannya.
6. Latihan 6.

7. Latihan 7.

Modul Praktek Pemrograman Web 1 3

 8. Latihan 8.

Selamat belajar,

REFERENSI LANJUTAN :
1. http://www.w3schools.com/html/html_lists.asp
2. http://www.echoecho.com/htmllists01.htm

Modul Praktek Pemrograman Web 1 4

 MODUL 5
BEKERJA DENGAN TABLE

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan fitur TABLE pada HTML untuk berbagai

penggunaan.

TABLE merupakan salah satu kemampuan HTML dalam menampilkan konten web
berformat tabel (baris dan kolom). Fitur ini juga banyak digunakan untuk membagi atau
memisahkan antara satu konten dengan konten lainnya dalam sebuah halaman web.
Perhatikan contoh tabel berikut :

No. Nama No. HP Email

1 Doni 08127383938
2 Daffa 08129292344
3 Dzaky 08128292231
Berikut ini tag-tag yang digunakan dalam pembuatan table :
1. Tag <table>, ini menandakan awal membuat tabel dan pastikan ditutup dengan
</table>
2. Tag <tr> digunakan untuk membuat baris dalam tabel dan pastikan ditutup
dengan </tr>
3. Tag <th>. Digunakan untuk membuat judul tabel dan pastikan ditutup dengan
</th>
4. Tag <td>. Digunakan untuk mengisi data tabel dan pastikan ditutup dengan
</th>
Sebelum standar CSS diimplementasikan ke dalam semua browser, kebanyakan
programmer dan desainer web menggunakan tabel untuk mengatur tampilan web.
Membuat menu pada posisi atas dan sisi kanan web bisa diakali dengan menjadikan
halaman web sebagai sebuah tabel yang besar. Hal ini sebenarnya tidak salah, namun
akan membuat pengkodean HTML menjadi rumit. Saat ini anda masih bisa
menggunakan ide tersebut, namun sangat disarankan menggunakan CSS untuk
mengatur tampilan halaman web.

Modul Praktek Pemrograman Web 1 1

Untuk dapat melihat gambaran penggunaannya, silahkan Anda coba kode berikut :

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan :

1. Latihan 1 : Atribut Border

Modul Praktek Pemrograman Web 1 2

2. Latihan 2 : Tabel 1 kolom, dan 2 baris

3. Latihan 3 : Tabel 2 kolom dan 1 baris

4. Latihan 4 : Tabel dengan garis berwarna

5. Latihan 5 : Tabel dengan warna latar belakang

6. Latihan 6 : Tabel dengan judul

Modul Praktek Pemrograman Web 1 3

7. Latihan 7: Tabel dengan caption

8. Latihan 8: Tabel dengan menggabungkan 2 baris

9. Latihan 9: Tabel dengan menggabungkan 2 kolom

Modul Praktek Pemrograman Web 1 4

 10. Latihan 10: Tabel terstruktur

Selamat belajar,

REFERENSI LANJUTAN :
1. http://www.w3schools.com/html/html_tables.asp
2. http://www.duniailkom.com

Modul Praktek Pemrograman Web 1 5

 MODUL 6
BEKERJA DENGAN GAMBAR

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan fitur IMAGE pada HTML untuk berbagai

penggunaan.

Tidak dipungkiri, bahwa gambar merupakan salah konten website yang banyak
digunakan nantinya. Oleh karena itu, pada modul ini khusus dibahas bagaimana cara
menangani gambar pada halaman website.

Format yang digunakan untuk menampilkan gambar ini adalah : <img [attribut] >. Ini
merupakan salah satu tag yang tidak memiliki tag penutup.

Berikut ini attribut yang terdapat pada tag <img> :

Attribut Nilai Fungsi

src url Merujuk ke lokasi file gambar yang akan
ditampilkan.
Alt teks Teks alternative pengganti jika gambar tidak
tampil.
Width pixel Ukuran lebar dari gambar
Height pixel Ukuran tinggi dari gambar
Align Top/middle/bott Pengaturan perataan posisi gambar
om/left/right
Border pixel Ukuran besar garis bingkai dari gambar.
Hspace pixel Jarak gambar dengan konten lainnya secara
mendatar.
vspace pixel Jarak gambar dengan konten lainnya secara tegak
lurus.

Attribut src merupakan atribut yang wajib ada.

Modul Praktek Pemrograman Web 1 1

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan. Asumsi : pastikan dalam folder yang sama dengan file html anda sudah
terdapat sebuah file gambar. Untuk latihan ini file gambar tersebut diberi nama logo.jpg.

1. Latihan 1 : Menampilkan Gambar

Catatan : src=logo.jpg menandakan bahwa file logo.jpg berada pada folder yang
sama dengan file HTMLnya. Nama file gambar ini bersifat case sensitif, artinya
harus ditulis persis sama dengan nama file gambarnya, tidak boleh ditulis
menjadi Logo.jpg, atau logo.JPG dan seterusnya.
2. Latihan 2 : Menampilkan gambar dengan atribut ALT

Atribut ALT digunakan untuk menggantikan posisi Gambar jika gagal

ditampilkan oleh browser karena kesalahan nama, lokasi file dan lain
sebagainya.
3. Latihan 3 : Gambar dengan pengaturan ukuran.

Maka gambar akan ditampilkan dengan ukuran lebar = 200 piksel dan tinggi 150
piksel. Jika atribut ini tidak diberikan, maka gambar akan tampil sesuai dengan
ukuran aslinya. Baris no. 7 diatas dapat juga digantikan dengan :

4. Latihan 4 : Menampilkan gambar pada folder yang berebda

Modul Praktek Pemrograman Web 1 2

 Misalnya seluruh gambar pada sebuah website disimpan dalam folder images
seperti contoh diatas, maka pada atribut src tambahkan nama foldernya.

5. Latihan 5 : Menampilkan gambar dari website lain

6. Latihan 6 : Gambar disertai teks dengan pengaturan perataannya

REFERENSI LANJUTAN :
1. http://www.w3schools.com/html/html_images.asp
2. http://www.w3schools.com/tags/tag_img.asp
3. http://www.htmlcodetutorial.com/images/_IMG.html

Modul Praktek Pemrograman Web 1 3

 MODUL 7
BEKERJA DENGAN AUDIO DAN VIDEO

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan fitur AUDIO dan VIDEO pada HTML

untuk berbagai penggunaan.

Salah satu kelemahan dari HTML versi 4.0 adalah kurangnya support untuk menangani
fitur audio dan video. Kelemahan ini kemudian diakomodir pada HTML versi 5. Oleh
karena itu, pada bab ini akan dikenal tag pada HTML 5 yang berhubungan dengan
AUDIO dan VIDEO.
7.1 AUDIO
Salah satu tag untuk menampilkan audio pada HTML 4 adalah tag <bgsound
[attribute]>. Namun, tag inipun hanya di dukung oleh browser IE, sehingga tidak
disarankan untuk digunakan. Tag ini mempunyai dua atribut, yaitu src=”lokasi file
audio” dan loop untuk menantukan apakah file musiknya akan diputar secara terus
menerus atau hanya satu kali putar saja. File audio yang disupport berformat mid, midi
dan wav. Perhatikan contoh berikut :

Sewaktu halaman web tersebut dijalankan, maka file musik otomatis akan aktif.
Pastikan lokasi file musiknya benar. Dan pengunjung web Anda akan menikmati alunan
music yang tersaji tanpa bisa menghentikannya.
Pada HTML versi 5 telah ditambahkan tag khusus untuk Audio ini, yaitu tag <audio>,
dengan atribut sebagai berikut :
Attribut Nilai Keterangan
autoplay autoplay Membuat audio langsung aktif
controls controls Menampilkan tombol untuk kontrol
loop loop Memutar audio secara terus menerus
muted muted Dapat membuat audio tidak aktif (diam)

Modul Praktek Pemrograman Web 1 1

 auto
preload metadata Menentukan tampilan sebelum audio aktif
none
src URL Lokasi file audio

Saat ini, HTML versi 5 mendukung tiga jenis file audio, yaitu MP3, Wav, dan Ogg.

7.2 VIDEO
Untuk VIDEO, HTML versi 4 tidak dapat menjalankannya secara langsung, dibutuhkan
plugin tambahan seperti flash yang di embed ke script HTMLnya. Perhatikan contoh
dibawah ini untuk menampilkan video dari youtube dengan dua cara.

Pada HTML versi 5 telah disediakan tag khusus, yaitu tag <video>, sehingga dapat
langsung menampilkan video tanpa bantuan plugin tambahan. Tag <video> mempunyai
atribut sebagai berikut :
Attribut Nilai Keterangan
autoplay autoplay Membuat vidio langsung aktif
controls controls Menampilkan tombol untuk kontrol
height pixels Mengatur tinggi dari video player
loop loop Memutar video secara terus menerus
muted muted Dapat membuat video tidak aktif (diam)
Menampilkan sebuah gambar selagi proses loading
poster URL
video.
auto
Menentukan bagaimana video tampil ketika
preload metadata
halaman web di load
none
src URL Lokasi file video
width pixels Mengatur lebar video player

Saat ini, HTML 5 mendukung tiga type file video, yaitu MP4, WebM, dan Ogg.

Modul Praktek Pemrograman Web 1 2

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan. Asumsi : Anda telah memiliki file video dan audio yang dibutuhkan.

1. Latihan 1 : Menampilkan Audio disertai tombol control

Dengan cara yang lain :

2. Latihan 2 : Menampilkan video dengan kontrol

Dengan cara yang lain :

3. Latihan 3 : Menampilkan video

Modul Praktek Pemrograman Web 1 3

REFERENSI LANJUTAN :
1. http://www.w3schools.com/tags/tag_audio.asp
2. www.quackit.com/html_5/tags/html_audio_tag.cfm
3. http://www.w3schools.com/tags/tag_video.asp
4. http://www.quackit.com/html_5/tags/html_video_tag.cfm

Modul Praktek Pemrograman Web 1 4

 MODUL 8
BEKERJA DENGAN FORM

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan fitur FORM yaitu metoda untuk menerima

input atau masukan dari pengunjung web..

HTML memfasilitasi programer guna mendapatkan data dan berinteraksi dengan

pengunjung web. Fitur tersebut adalah FORM. Terdapat beberapa cara untuk melakukan
hal tersebut, yaitu :
1. FORM Membuat formulir
2. INPUT Meminta data dari pemakai (pengunjung)
3. TEXTAREA Meminta sekumpulan teks
4. SELECT Membuat daftar menu pilihan
5. OPTION Membuat menu pilihan
6. FIELDSET Membuat formulir yang terdiri dari beberapa bagian
7. LEGEND Membuat keterangan pada kotak form
8. LABEL Membuat keterangan untuk field (input)

8.1 Tag <FORM>

Tag <form> digunakan untuk menandakan awal pembuatan formulir dan diakhiri
dengan </form>. Tag ini mempunyai 2 atribut utama, yaitu : action dan method.
Perhatikan sintak form berikut :
<form action=”URL” method=get|post> formulir </form>
Action berisi URL tujuan eksekusi dari form ini, sedangkan Method merupakan metoda
eksekusi dari form.

8.2 Tag <input>

Tag <input> adalah perintah untuk meminta masukan (input) dari pengunjung web. Tag
ini beberapa atribut, antara lain:
• TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image |
button ]

Modul Praktek Pemrograman Web 1 1

Maksudnya, TYPE dapat diisi dengan: text, password, checkbox, radio, submit, reset,
file, hidden, image atau button. Fungsinya sebagai berikut :

Type Keterangan
Text Meminta input dari user berupa teks

passord Meminta input dari user, namun inputkan diinputkan

disamarkan dengan ikon *.
Checkbox Meminta input dari user dalam bentuk kotak ceklist.

Radio Meminta input dari user berupa pilihan.

submit Mengirimkan hasil input user ke file pada attribu action di tag
form.
Reset Berfungsi untuk mengosongkan form.

File Meminta input berupa file.

Hidden Meminta input dari user namun data yg diinputkan

disembunyikan.

Button Untuk membuat tombol

8.3 Tag <select> dan <option>

Tag <select> digunakan untuk membuat input dalam bentuk pilihan berupa menu
dropdown. List untuk item yang akan ditampilkan menggunakan tag <option>.
Sintak :
<select [atribut]>
<option [atribut]> konten 1</option>
<option [atribut]> konten 2</option>
<option [atribut]> konten n</option>
</select>
Atribut pada tag select :

Type Keterangan
Name Nama untuk menampung pilihan yang dipilih

Multiple Dapat memilih lebih dari satu dari daftar pilihan yang ada.

Size Jumlah pilihan yang terlihat.

Disabled Menonaktifkan pilihan

Modul Praktek Pemrograman Web 1 2

Atribut pada tag option :

Type Keterangan
Selected Menandakan pilihan yang terpilih secara default

Value Nilai pilihan

Disabled Menonatifkan pilihan

8.4 Tag <textarea>

Tag <textarea> digunakan untuk menerima input dari user dengan kapasitas lebih besar.
Fitur ini merupakan pengembangan dari tag <input type=text>. Biasanya digunakan
untuk buku tamu dan sebagainya.
Sintak : <textarea> konten </textarea>
Atribut utama pada tag ini adalah :

Type Keterangan
cols Menentukan jumlah karakter per kolomnya.

rows Menentukan jumlah baris.

8.5 Tag <fieldset>

Tag ini digunakan untuk membuat formulir yang terdiri atas beberapa bagi
(mengelompokan form)
Sintak : <fieldset> form </fieldset>
Contoh :

Modul Praktek Pemrograman Web 1 3

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan.

1. Latihan 1 : Input dengan type text

Hasilnya :

2. Latihan 2 : Input dengan type password

Hasilnya :

3. Latihan 3 : Input dengan type radio

Hasilnya :

4. Latihan 4 : Input dengan type checkbox

Hasilnya :

Modul Praktek Pemrograman Web 1 4

5. Latihan 5 : Input dengan type file dan button

Hasilnya :

6. Latihan 6 : Input dengan type submit dan reset

Hasilnya :

7. Latihan 7 : Gabungan,

Hasilnya :

Modul Praktek Pemrograman Web 1 5

8. Latihan 8 : Gabungan
<html>
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">
<form action="input.php" method="post">
<p><b>Tag input dengan atribut type="text"</b><br>
<input type="text" name="teks_ku" size="16" maxlength="20"><br>
Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal
karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>

<p><b>Tag input dengan atribut type="password"</b><br>

<input type="password" name="pass" size="16" maxlength="20"<br>
Ini passwordbox dengan nama <i>pass</i> ukuran <i>16 chr</i> dan maksimal
karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>

<p><b>Tag input dengan atribut type="radio"</b><br>

<input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br>
<input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br>
<b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio diatas untuk
mengetahui
perbedannya.</b></p>

<p><b>Tag input dengan atribut type="checkbox"</b><br>

<input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 ->
nama<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>
<input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 ->
nama<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>

<p><b>Tag input dengan atribut type="submit"</b><br>

<input type="submit" value="Tombol Submit"><br>
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang
ada pada form ke file tujuan (action="file_tujuan"))</p>

Modul Praktek Pemrograman Web 1 6

 <p><b>Tag input dengan atribut type="reset"</b><br>
<input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh
isian form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>

<p><b>Tag input dengan atribut type="hidden"</b><br>

<input type="hidden" value="data_ku" name="data">
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.</p>

<p><b>Tag input dengan propeti type="image"</b><br>

<input type="image" src="letak_file_gambar_anda" height="98"
width="98"><br> Image memiliki fungsi yang sama dengan type submit</p>
</form></font>
</body>
</html>

Hasilnya :

9. Latihan 9 : Tag <fieldset> dan <legend>

Modul Praktek Pemrograman Web 1 7

 Hasilnya :

10. Tag <textarea>

Hasilnya :

11. Tag <select> dan <option>

Hasilnya :

Modul Praktek Pemrograman Web 1 8

 12. Tombol

Hasilnya :

REFERENSI LANJUTAN :
1. http://www.w3schools.com/html/html_forms.asp
2. http://www.w3schools.com/tags/tag_form.asp
3. http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml
4. http://htmldog.com/guides/html/beginner/forms/
5. www.eplusgo.com/html/html-form/

Modul Praktek Pemrograman Web 1 9

 MODUL 9
BEKERJA DENGAN LINK

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan fitur LINK yaitu metoda untuk

menghubungkan halaman web dengan data lainnya.

Link atau dalam bahasa Indonesia disebut dengan tautan adalah tulisan atau gambar
yang apabila di klik akan menuju halaman tertentu sesuai dengan yang ditentukan oleh
pembuat link. Link inilah yang membuat sebuah website kaya akan informasi, karena
dapat dihubungan dengan website atau halaman web lainnya.

Tag <a>
Tag <a> merupakan satu-satunya tag yang digunakan untuk keperluan link ini. Tag <a>
digunakan untuk menandakan awal pembuatan link dan diakhiri dengan </a>. Tag ini
mempunyai 3 atribut utama, yaitu : href, name dan target. Perhatikan sintak form
berikut :
<a href=ephi.web.id name=ephi target=_blank>www.ephi,.web.id</a>
Keterangan :
 href, berisi alamat tujuan dari link, dapat berupa :
o Alamat web lengkap : www.ephi.web.id
o Alamat halaman web tertentu : www.ephi.web.id/foto/logo.jpg
o Alamat tertentu dihalaman web yang sama : #atas
o Alamat email : mailto:[email protected]
 Name/id, merupakan identitas dari link.
 Target, merupakan target/tujuan jika link di klik. Dapat bernilai :
o _blank : akan membuka halaman browser yang baru.
o _self : akan aktif pada halaman web saat ini/frame aktif.
o _parent : akan tampil pada frame parent, terkait nantinya dengan tag
frameset.
o _top : akan tampil secara penuh tanpa frame.

Modul Praktek Pemrograman Web 1 1

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan.

1. Latihan 1 : Absolut Link, menggunakan alamat lengkap website tertentu

Hasilnya :

Jika www.ephi.web.id di klik, maka akan diarah ke halaman web ephi.web.id.

2. Latihan 2 : Lokal Link, menghubungkan dengan halaman website yang sama

Hasilnya :

3. Latihan 3 : Link dengan target

Hasilnya : jika link diatas di klik, maka akan terbuka halaman browser yang
baru, karena menggunakan target=_blank.
4. Latihan 4 : Link dengan Gambar

Hasilnya :

Modul Praktek Pemrograman Web 1 2

 Jika file gambarnya berada pada folder yang sama dengan file html Anda, maka
cukup panggil dengan nama filenya saja, misal <img src=ephi.jpg>.
5. Latihan 5 : Link pada halaman yang sama.
Jika anda mempunyai halaman web yang panjang, maka Anda dapat membuat
link antar bagian dari halaman web tersebut. Misalnya pada sebuah halaman web
ada sub judul a, sub judul b, sub judul c dan seterusnya. Maka Anda dapat
membuat link untuk berpindah antar sub judul, dengan catatan setiap sub judul
Anda beri nama terlebih dahulu dengan cara : <a name=sub_a></a>,<a
name=sub_b></a><a name=sub_c></a>. Maka untuk linknya dapat dibuat
seperti berikut :
Klik link berikut untuk <a href="#sub_c">Menuju Sub C </a>
Jika dipanggil dai halaman web yang lain, maka <a
href=namafile.html#sub_c>Sub C</a>

6. Latihan 6 : Link ke email

Hasilnya :

7. Latihan 7 : Link & Map

Modul Praktek Pemrograman Web 1 3

 Hasilnya :

Silahkan anda cari link yang terdapat pada foto tersebut. Selamat mencari…
Silahkan coba latihan berikut dan ambil kesimpulan :

1.

2.

Modul Praktek Pemrograman Web 1 4

 3.

4.

REFERENSI LANJUTAN :
1. http://htmlcssguides.com/hyperlink-html
2. http://www.w3schools.com/html/html_links.asp
3. http://www.tutorialspoint.com/html/html_image_links.htm

Modul Praktek Pemrograman Web 1 5

 MODUL 10
BEKERJA DENGAN FRAME

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan fitur FRAME yaitu metoda untuk

membagi-bagi halaman web berdasakan baris dan kolom.

Frame atau dalam bahasa Indonesia disebut dengan Bingkai merupakan salah satu fitur
HTML yang masih dipertahankan hingga HTML versi 4. Fitur ini digunakan untuk
menampilkan beberapa file HTML dalam satu jendela browser secara bersamaan.
Dengan kata lain, melalui fitur Frame ini, Anda dapat membagi-bagi tampilan halaman
web menjadi beberapa kolom atau baris.

Berbeda dengan tabel, Jika sel pada tabel akan berisi data-data saja, maka pada frame,
setiap framenya akan isi oleh sebuah file html. Oleh karena itu, jika Anda membangun
web dengan frame dengan 2 kolom misalnya, maka Anda harus mempunyai 2 file html
untuk mengisi 2 kolom tersebut dan 1 file html induknya.

Sejak kemunculan CSS, panggunaan frame ini sudah mulai berkurang, namun dalam
proses pembelajaran, Anda sebaiknya juga tahu tentang prinsip kerja dan cara
penggunaannya.

Terdapat dua tag utama dalam pembuatan frame ini, yaitu :

 Tag <frameset [atribut]> content </frameset>
Tag frame set digunakan untuk menentukan berapa banyak baris dan atau kolom
(frame) yang dibuat beserta ukurannya (satuannya % atau piksel). Atribut
penting pada tag <frameset> adalah :
 Rows untuk menentukan jumlah frame berdasarkan baris serta tingginya.
 Cols untuk menentukan jumlah frame berdasarkan kolom serta lebarnya.
Perhatikan contoh berikut :

Modul Praktek Pemrograman Web 1 1

 Kode HTML diatas memerintahkan kepada browser agar dibuatkan 2 buah
frame secara horizontal (baris/rows) dengan ukuran 50% tinggi layar digunakan
untuk frame pertama dan diisi dengan file html dengan nama barissatu.html dan
membuat frame kedua dengan ukuran 50% juga dari tinggi layar monitor dengan
nama filenya barisdua.html.
Dari contoh diatas, terlihat bahwa dibutuhkan 3 buah file untuk dapat
menjalankan frame ini, yaitu 1 file untuk frame kesatu dan 1 frame untuk
mengisi frame kedua serta 1 file induknya. Maka tampilannya seperti berikut :

Yang perlu diingat dalam penggunaan tag <frameset> ini adalah pada script
HTMLnya tidak boleh digunakan tag <body>. Posisinya adalah menggantikan
tag <body> tersebut. Dalam tag <frameset> terdapat minimal satu tag <frame>.

 Tag <frame [atribut]> (tag ini harus berada dalam tag <frameset> .. </frameset>.

Tag ini digunakan untuk mendefinisikan satu buah frame dengan atribut
utamanya adalah src dan name. SRC digunakan untuk memanggil file htmlnya,
dan name untuk memberikan nama dari frame. Perhatikan contoh berikut :

<frame src=barissatu.html>, SRC tersebut mengacu kepada file html yang

ditampilkan. Artinya frame pertama dalam contoh diatas akan diisi dengan file
html dengan nama barissatu.html.

Modul Praktek Pemrograman Web 1 2

Catatan: Ukuran kolom frameset dapat diatur dengan satuan persen dan pixel (cols =
“200.500”), dan salah satu kolom dapat diatur untuk menggunakan ruang yang tersisa,
dengan asterisk (cols = “25%,*”).

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan.

Asumsi, Anda akan membuat desain web seperti berikut :

Header
Menu Iklan
Content web

Footer

Dari gambar diatas dapat diambil kesimpulan,minimal dibutuhkan :

1. Dibutuhkan 1 file html untuk header

2. Dibutuhkan 1 file html untuk menu
3. Dibutuhkan 1 file html untuk content web
4. Dibutuhkan 1 file html untuk iklan
5. Dibutuhkan 1 file html untuk footer.
6. 1 file master.

Untuk no. 1 silahkan Anda buat seperti berikut :

Simpan dengan nama file header.html. lakukan hal yang sama untuk no. 2 s.d 5 simpan
dengan nama file yang berbeda. Sehingga sekarang Anda sudah punya 5 file dengan
nama header.html, menu.html, content.html, iklan.html dan footer.html.

Modul Praktek Pemrograman Web 1 3

Untuk file no. 6, ketikkan kode berikut :

Perhatikan pada frame konten, diberikan atribut name=content. Ini tujuannya nanti
untuk mengarahkan link-link ke lokasi ini. Karena konten ini akan berubah-ubah sesuai
dengan menu yang diklik user nantinya. Jika scrip diatas dijalankan, maka akan tampil
seperti berikut :

Sekarang, silahkan Anda edit file menu.html seperti berikut :

Modul Praktek Pemrograman Web 1 4

Terlihat pada script diatas ditambahkan sebuah menu dengan target=kontent. Kontent
ini adalah nama lokasi content web diatas, sehingga begitu menu ini di klik, maka akan
tampil di halaman content web seperti berikut :

Untuk latihan, silahkan Anda buat untuk tampilan seperti berikut :

1. Menu di sebelah kanan

Kontent Menu

2. Menu dan iklan di sebelah kiri

Menu Konten

Iklan

Modul Praktek Pemrograman Web 1 5

 3. Menu dan iklan di sebelah kiri + footer

Menu Konten

Iklan

Footer

4. Menu sebelah kiri + footer+ Iklan di sebelah kanan

Menu Konten Iklan

Footer

5. Gabungan

Logo Header Gambr

Ucapan selamat datan

Menu Konten Iklan

Footer

REFERENSI LANJUTAN :
1. http://tutorial.belajarweb.net/html/html-frame.html
2. http://manda.com/frames/
3. http://www.tizag.com/htmlT/frames.php
4. http://www.w3schools.com/tags/tag_frameset.asp

Modul Praktek Pemrograman Web 1 6

 MODUL 11
BEKERJA DENGAN TAG <DIV>

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan tag<div> yaitu metoda untuk

mengelompokkan konten web sesuai yang dibutuhkan.

Tag <div> merupakan salah satu tag terpenting pada HTML saat ini dan terus
digunakan pada HTML versi terbaru karena kemampuannya dalam mengelompokkan
konten-konten web sesuai dengan yang dibutuhkan. Tag <div> akan bernilai maksimal
jika digabungkan dengan Cascading Style Sheet (CSS).

Secara umum sintaknya adalah : <div [atribut]> konten </div>

Perhatikan contoh berikut :

<div>Ini Contoh Penggunaan Tag div</div>

Jika ini di eksekusi maka akan tampil tulisan “Ini Contoh Penggunaan Tag div” dengan
tampilan biasa-biasa saja. Agar lebih menarik dan dapat tampil sesuai kebutuhan, maka
dapat ditambahkan css pada tagnya dengan perintah style. Perhatikan contoh berikut :

background: #DEFAA9 ini adalah perintah untuk membuat warna latar belakang, jika
dieksekusi akan tampil seperti berikut :

Maka akan tampil warna latar belakang sesuai dengan yang diberikan namun akan
memberikan efek untuk satu baris teks tersebut.

Untuk itu, kita dapat mengatur panjangnya melalui perintah width, perhatikan contoh
berikut :

Modul Praktek Pemrograman Web 1 1

Maka hasilnya akan seperti berikut :

Terlihat lebar teksnya akan menyesuaikan dengan lebar layar monitor sebesar 15%
sesuai kode yang ditulis.

Sekarang, mari kita tambahkan perintah height dan float, seperti berikut :

Height digunakan untuk mengatur tingginya, sedangkan tag float:left untuk

perataannya. Jika dieksekusi, maka akan tampil seperti berikut :

Menarik bukan, sekarang mari kita tambahkan area untuk header dan footer. Gunakan
kode berikut :

Modul Praktek Pemrograman Web 1 2

Hasilnya akan seperti berikut :

Dari pembahasan diatas dapat disimpulkan bahwa penerapan tag <div> akan berdaya
guna jika dikolaborasikan dengan css. Juga terlihat perbedaannya dengan tag <frame>,
ataupun tag table yang juga dapat dimanfaatkan dalam mengelompokkan konten web.

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan.

Silahkan Anda buat scrip HTML untuk tampilan berikut :

1. Menu di sebelah kanan

Kontent Menu

Modul Praktek Pemrograman Web 1 3

2. Menu dan iklan di sebelah kiri

Menu Konten

Iklan

3. Menu dan iklan di sebelah kiri + footer

Menu Konten

Iklan

Footer

4. Menu sebelah kiri + footer+ Iklan di sebelah kanan

Menu Konten Iklan

Footer

5. Gabungan

Logo Header Gambr

Ucapan selamat datan

Menu Konten Iklan

Footer

Modul Praktek Pemrograman Web 1 4

Silahkan Anda tulis kode berikut :

<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px; }
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px; }
#section {
width:350px;
float:left;
padding:10px; }
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px; }
</style>
<body>
<div id="header">
<h1>Padang dalam Berita</h1>
</div>
<div id="nav">
Walikota<br>
Camat<br>
Luran<br>
</div>
<div id="section">
<h1>Padang</h1>
<p>
Kota Padang adalah kota terbesar di pantai barat Pulau Sumatera sekaligus
ibu kota dari provinsi Sumatera Barat, Indonesia.
<p>
Sejarah Kota Padang tidak terlepas dari peranannya sebagai kawasan rantau
Minangkabau, yang berawal dari perkampungan nelayan di muara Batang Arau
lalu berkembang menjadi bandar pelabuhan yang ramai setelah masuknya
Belanda di bawah bendera Vereenigde Oostindische Compagnie (VOC) </p>
</div>
<div id="footer">
Padang Kota Tercinta, Kujaga dan Kubela
</div>
</body>

Modul Praktek Pemrograman Web 1 5

Outputnya seperti berikut :

Untuk latihan lebih lanjut, silahkan Anda buat tampilan dibawah ini menggunakan tag
<div>

Modul Praktek Pemrograman Web 1 6

REFERENSI LANJUTAN :
1. http://www.tutorialspoint.com/html/html_div_tag.htm
2. http://trikmudahseo.blogspot.com/2012/10/belajar-html-dasar-div-dan-
stylenya.html
3. http://www.zhudesign.com/tutorial-150-belajar-html-memahami-tag-div-
division.html
4. http://www.w3schools.com/html/html_layout.asp
5. http://puji-lestari.pun.bz/tag-div-pada-html.xhtml
6. http://www.w3schools.com/tags/tag_div.asp
7. http://www.chaidir.web.id

Modul Praktek Pemrograman Web 1 7

 MODUL 12
PENGANTAR JAVASCRIPT

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

fungsi dan cara menggunakan Javascript yang digabungkan dengan tag

HTML.

12.1 Sekilas Tentang Javascript

Javascript adalah bahasa pemrograman yang bersifat client side, digunakan pada
bahasa pemrograman web. Kode pemrograman javascript dapat disisipkan kedalam
halaman HTML. Pada awalnya, JavaScript mulai diperkenalkan di browser
Netscape Navigator 2. Namun waktu itu namanya bukan JavaScript,
namun LiveScript. Mengingat pada waktu itu teknologi Java sedang tren, maka
pihak Netscape memutuskan untuk mengganti namanya menjadi JavaScript,
yang sepertinya nama tersebut lebih marketible dibandingkan LiveScript.
Selanjutnya pihak Microsoft (rival Netscape) pun mulai ikut-ikutan memfasilitasi
web browser buatannya, ‘Internet Explorer’, supaya bisa mendukung JavaScript.
Namun mungkin karena gengsi, pihak Microsoft memberi nama bahasa yang
lain, yaitu Jscript.

12.2 Cara Menulis Javascript

Ada dua jenis bagaimana javascript dibuat, pertama javascript ditulis dalam file yang
terpisah dengan HTML, kedua javascript ditulis langsung dalam HTML. Javascript
yang ditulis diluar HTML disebut Eksternal Javascript dengan ektensi file .js. Dalam
HTML, penulisan script diawali dengan <script> … </script>. Script yang akan
dijalankan harus diletakkan diantara <script> dan </script>. Tag <script> memiliki
beberapa atribut, namun yang terpenting adalah atribut language dan type.

Modul Praktek Pemrograman Web 1 1

 Karena Javascript bukan satu-satunya bahasa scripting, maka sangatlah
perlu untuk memberitahukan kepada browser bahwa bahasa script yang
digunakan adalah Javascript dan selanjutnya browser akan menjalankan
modul pendukung Javascript untuk memprosesnya. Sehingga untuk
Javascript, pada tag <script> perlulah ditambahkan atribut berikut ini:
<script language="JavaScript" type="text/javascript">

Script dapat diletakkan di tag <body> dan atau di tag <head> pada bagian halaman
HTML.
Contoh 1

Pada contoh 2 berikut, script di tulis pada bagian <body>

Contoh 2

Modul Praktek Pemrograman Web 1 2

12.3 Tipe Data dan Variabel pada Javascript
Layaknya bahasa pemrograman, javascript juga memiliki tipe data dan variabel.
Variabel pada javascript digunakan untuk menyimpan informasi sementara dan
nilainya dapat berubah-ubah. Sedangkan tipe data, terkait dengan jenis data atau
nilai yang disimpan dalam variabel.

Deklarasi Variabel
Dalam javascript, setiap kali akan menggunakan variabel, langkah pertama yang
harus dilakukan adalah mendeklarasikan keberadaan nama variabel. Hal ini perlu
dilakukan karena dengan adanya deklarasi nama variabel, komputer akan
menyediakan beberapa bagian memori untuk menyimpan nilai pada nama variabel
tersebut. Untuk mendeklarasikan variabel digunakan kata var.
Dalam mendeklarasikan nama variabel ada beberapa aturan yang harus diperhatikan,
yaitu :
1. Nama variabel harus dimulai dengan huruf
2. Nama variabel boleh dimulai dengan $ dan _
3. Nama variabel adalah case sensitive (memperhatikan besar kecilnya huruf).
4. Tidak boleh menggunakan Reserved Word atau kata tercadang sebagai nama
variabel. Kata tercadang adalah kata yang sudah built in dalam javascript yang
sudah bermakna khusus. Penggunaan kata tercadang ini akan mengakibatkan
error.

Contoh 1
var namakota;
namakota=“Padang”;

Contoh 2
var namakota=“Padang”;

Contoh 3
var namakota=“Padang”, propinsi=“Sumatera Barat”, kode=”1”;
Pada contoh 1 di atas, dideklarasikan variabel namakota. Pada awal pendeklarasian,
nilai dari variabel namakota adalah null (kosong). Kemudian variabel namakota diberi
nilai Malang. Untuk memberikan nilai pada suatu variabel digunakan tanda petik dua

Modul Praktek Pemrograman Web 1 3

(“) apabila tipe datanya berupa string. Pada contoh 2 mendeklarasikan variabel
namakota yang sekaligus memberi nilai pada variabel namakota. Contoh 3 di atas
mendeklarasikan beberapa variabel sekaligus. Untuk mendeklarasikan beberapa
variabel digunakan tanda koma (,) untuk memisahkan variabel satu dengan yang
lainnya.

Tipe Data
Tipe data pada javascript meliputi : String, Integer, Float, Array, Object dan
Booleans.

 Tipe data string adalah data yang memuat karakter, misalnya “Padang”. String
adalah sembarang text yang ada di dalam tanda petik, baik petik ganda (“)
maupun petik tunggal (‘).
 Tipe data integer dan float merupakan tipe data numerik.
 Dalam mendeklarasikan tipe data object digunakan tanda kurung kurawal (,
… - ). Setiap property dalam tipe data object dipisahkan dengan
menggunakan tanda koma (, ).
 Tipe data Booleans terdiri dari dua nilai, yaitu true atau false. Berikut
beberapa contoh penggunaan tipe data pada javascript.

Contoh 4
var namakota=“Padang”; // tipe data string
var propinsi=’Sumatera Barat’; // tipe data string
var y=90; // tipe data integer
var e=3.14; // tipe data float
var y=123; // tipe data integer
var x=true; // tipe data boolean

Contoh 5
//berikut beberapa cara mendeklarasikan
Array var mobil=new Array();
mobil[0]=”Toyota”;
mobil[1]=”Daihatsu”;
mobil[2]=”Honda”;

Modul Praktek Pemrograman Web 1 4

 var bulan=new Array(“Januari”,”Febuari”,”Maret”,”April”);
var kampus=[“PNP”,”UNAND”,”UI”,”ITB”,”ITN”];

Contoh 6
var klien={nama:”Daffa”, sex:”Laki-Laki”, id:”5758”};

Operator Aritmatika

Operator aritmatika digunakan untuk melakukan operasi aritmatika antara variabel dan
atau nilai. Misal diberikan y = 5, tabel berikut menjelaskan tentang operator aritmatika.

Operato Deskripsi Contoh Nilai x Nilai y

r
+ Penjumlahan x=y+2 7 5
- Pengurangan x=y – 2 3 5
* Perkalian x=y*2 10 5
/ Pembagian x=y/2 2.5 5
% Modulus (Sisa x=y%2 1 5
bagi) x 6 6
++ Increment =
x 5 6
+
=
x
+ 4 4
-- Decrement y
=
y
x
+ 5 4
--
=
+
y
y
Operator Pemberian Nilai --
Operator pemberian nilai digunakan untuk memberikan nilai pada variabel. Dalam
contoh berikut, diberikan x = 10, dan y = 5. Tabel berikut menjelaskan operator
pemberian nilai.

Operator Contoh Sama dengan hasi

= x=y l
x=
+= x+=y x=x 5
x=1
-= x -=y +y – y
x=x 5
x=
*= x*=y x=x 5
x=5
/= x/=y *y
x=x/ 0
x=
%= x%=y y
x=x%y 2
x=
0
Hirarki Perhitungan

Modul Praktek Pemrograman Web 1 5

Urutan perhitungan dalam JavaScript sama dengan urutan perhitungan dalam Turbo
Pascal atau Turbo C, yaitu yang dalam kurung terlebih dahulu, barulah perkalian dan
pembagian, kemudian penambahan dan pengurangan.

Contoh:

 2+3*6 = 2 + 18 = 20
Kenapa bisa begitu? Kenapa tidak 30? Perkalian dan pembagian dikerjakan terlebih
dahulu, barulah penambahan dan pengurangan. Untuk lebih jelasnya sebagai
berikut: 2+3*6 = 2 + 18, selanjutnya 2 ditambah dengan 18 sama dengan 20.

 (2 + 3) * 6 = 5 * 6 = 30
Yang ini baru 30, yang dikerjakan yang di dalam kurung terlebih dahulu: 2+3 = 5,
selanjutnya 5 * 6 = 30. Sebagai contoh program, lihatlah pasal berikutnya

Operator + yang digunakan pada tipe data String

Operator + juga dapat digunakan untuk menambahkan variabel bertipe data string atau
nilai text.
Contoh 7
//untuk menambahkan dua atau lebih variabel tipe String, gunakan operator +
Var txt1="Selamat Datang";
Var txt2="Di Jurusan Teknologi Informasi";
txt3=txt1+” “+txt2;

Hasil dari script di atas adalah : Selamat Datang Di Jurusan Teknologi Informasi

Contoh 8
//menambahkan String dan Bilangan
x=5+5;
y="5"+5;
z="angka "+5;
Hasil dari script di atas adalah :
10
55
angka 5
Operator Pembanding
Operator pembanding digunakan dalam pernyataan logika untuk menentukan

Modul Praktek Pemrograman Web 1 6

kesamaan atau perbedaan diantara nilai-nilai. Diberikan nilai X = 5, tabel dibawah ini
menjelaskan operator pembanding :

Operator Deskripsi Pembanding Balikan

== Sama dengan X==8 False
X==5 True
=== Sama persis dengan (nilai dan tipe data) X===”5” False
X===5 True
!= Tidak sama dengan X!=8 True
!== Tidak sama dengan (nilai atau tipe data) X!==”5” True
X!==5 False
> Lebih besar dari X>8 False
< Lebih kecil dari X<8 True
≥ Lebih besar sama dengan X>=8 False
≤ Lebih kecil sama dengan X<=8 True

Operator Logika
Operator logika digunakan untuk menunjukkan nilai kebenaran antara
beberapa variabel atau beberapa nilai. Diberikan nilai X = 6 dan Y = 3, table
dibawah menjelaskan operator logika.

Operator Deskripsi Pembanding Balikan

&& Dan (X < 10 && Y > 1) True
|| Atau (X == 5 || Y == 5) False
! Negasi/Ingkaran !(x==y) True

Kelebihan dan Kekurangan Javascript

Kelebihan Javascript
1. Ukuran file kecil, Script dari javascript memiliki ukuran yang kecil sehingga
ketika web yang memiliki javascript ditampilkan di browser maka akses

Modul Praktek Pemrograman Web 1 7

 tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web
yang memiliki script java. Hal ini juga sangat berkepentingan dengan daya kerja
server. Semakin kecil space suatu web yang disimpan dalam suatu server maka
daya kerja server ketika di browsing oleh user di internet akan tidak terlalu berat,
Mudah untuk dipelajari
2. Terbuka, Javascript tidak terikat oleh hardware maupun software tertentu
bahkan system operasi seperti windows maupun unix. Karena ia bersifat
terbuka, maka ia dapat dibuat maupun di baca di semua jenis komputer.
Kekurangan Javascript
1. Script tidak terenkripsi, karena javascript bersifat client side, maka script yang
kita buat di text editor dan telah dijadikan web di server, ketika user me-request
web dari server tersebut maka sintak javascript akan langsung ditampilkan di
browser. User bisa melihat dan menirunya dari sourcenya.
2. Kemampuan terbatas, Walaupun javascript mampu membuat bentuk web
menjadi interaktif dan dinamis, namun javascript tidak mampu membuat
program aplikasi sendiri seperti java.
3. Keterbatasan Objek, Javascript tidak mampu membuat kelas-kelas yang bisa
menampung objek-objek tambahan seperti java karena javascript teleh memiliki
objek yang built-in pada sturktur bahasanya.

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan.

1. Alert :

Modul Praktek Pemrograman Web 1 8

2. Variabel :

3. Operator Aritmatika :

Modul Praktek Pemrograman Web 1 9

4. Konversi Tipe Data

Modul Praktek Pemrograman Web 1 10

 5. Tipe Data Array :

REFERENSI LANJUTAN :
1. https://syaifulhamzah.files.wordpress.com/2013/03/dasar-javascript.pdf
2. http://tito.pandubrahmanto.com/web-development/tutorial-belajar-javascript-
array/
3. http://www.w3schools.com/js/
4. http://www.tutorialspoint.com/javascript/
5. http://www.codecademy.com/en/tracks/javascript
6. http://htmldog.com/guides/javascript/

Modul Praktek Pemrograman Web 1 11

 [Type the document title]

MODUL 13
BEKERJA DENGANJAVASCRIPT

Pada modul ini, Praktikan akan mengetahui dan memahami tentang

struktur perulangan, struktur pengambil keputusan dan fungsi-fungsi

yang berlaku pada Javascript.

13.1 Struktur Perulangan

Perulangan adalah suatu perintah untuk melaksanakan proses perulangan selama syarat yang
ditentukan bernilai benar. Dalam javascript terdapat dua jenis perulangan, yaitu dengan For dan
While.
Perulangan FOR
Perulangan For khusus digunakan tipe data numeric dan untuk perulangan yang jumlah
perulangannya telah diketahui secara pasti. Sintak penulisan dari perulangan for adalah sebagai
berikut :
For (nilai awal; kondisi; step)
{ Kode yang dieksekusi apabila syarat dipenuhi }

Contoh 1

Contoh 2
 [Type the document title]

Dari contoh 1 dan contoh 2 di atas, dapat disimpulkan bahwa perulangan tidak selalu dalam bentuk
increment, akan tetapi juga dapat dalam bentuk decrement. Selain itu kenaikan atau penurunannya
tidak selalu naik 1 atau turun 1. Perhatikan contoh berikut ini :
Contoh 3

Perulangan While & Do … While

Perulangan while dapat digunakan untuk tipe data non numeric dan numerik. Sintaksnya seperti berikut :
while (kondisi) {
pernyataan jika kondisi benar
}

atau

do {
pernyataan jika kondisi benar
}
while (kondisi);

Contoh 4

Contoh 5
 [Type the document title]

13.2 Struktur Pengambil Keputusan

Struktur pengambik keputusan digunakan untuk menampilkan aksi yang berbeda berdasarkan
kondisi yang tertentu.. Terdiri atas :
1. Pernyataan if
2. Pernyataan if … else
3. Pernyataan if … else if …
4. Pernyataan Switch

Pernyataan if
Pernyataan if digunakan untuk mengeksekusi kode apabila syarat yang ditentukan di penuhi (bernilai
benar). Pernyataan if memiliki syntax sebagai berikut :

if (syarat)
{
Kode yang dieksekusi apabila syarat dipenuhi
}

Contoh 6

Pernyataan if … else …
Pernyataan if … else digunakan untuk mengeksekusi dari satu syarat yang dtentukan terpenuhi dan
untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if … else … sebagai berikut

if (syarat)
{
} Else
 [Type the document title]
{ Kode yang dieksekusi apabila syarat dipenuhi
}

Kode yang dieksekusi apabila syarat tidak dipenuhi

Contoh 7

Pernyataan if … else if … else …

Pernyataan if … else if … else … digunakan untuk mengeksekusi satu dari beberapa syarat yang
dtentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if …else
… sebagai berikut

if (syarat 1)
{
Kode yang dieksekusi apabila syarat 1 dipenuhi
}
else if (syarat 2)
{
Kode yang dieksekusi apabila syarat 2 dipenuhi
}
else
{
Kode yang dieksekusi apabila syarat 1 dan syarat 2 tidak dipenuhi
}
 Contoh 8

Pernyataan Switch
Pernyataan switch memiliki fungsi yang sama dengan pernyataan if … else if …
else … Syntax dari pernyataan ini adalah sebagai berikut :

Switch(variabel)
{
case option 1 : pernyataan ke 1 break;
case option 2 : pernyataan ke 2 break;
case option n : pernyataan ke n break;
default: pernyataan x break;
}

Proses dari SWITCH di atas adalah melakukan cek pada value variabel. Apabila
valuenya sama dengan option1 maka statement yang dilakukan adalah pernyataan 1.
Apabila valuenya sama dengan option2 maka pernyataan 2 yang dijalankan, begitu
seterusnya. Namun apabila tidak ada value yang sama, maka pernyataan x yang
dijalankan.

Contoh 9

Modul Praktek Pemrograman Web 1 5

13.3 Fungsi Pada Javascript
Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil
fungsi tersebut. Fungsi merupakan bagian subprogram yang melaksanakan suatu tugas
tertentu ketika diperlukan. Fungsi ini dapat dipanggil dengan cara menuliskan nama
fungsinya saja, dan disertai dengan parameter apabila ada. Jadi parameter dalam suatu
fungsi bersifat opsional. Suatu fungsi ditulis sebagai blok kode dengan syntax sebagai
berikut :

function namafungsi(parameter)
{
Beberapa code untuk dijalankan
}

Contoh 10

Modul Praktek Pemrograman Web 1 6

Suatu fungsi tidak harus terdapat return value. Perhatikan contoh berikut ini.
Contoh 11

PRAKTIKUM
Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil
kesimpulan.

1. Buatlah script Javascript untuk mengkonversi nilai angka ke nilai huruf dengan
aturan sebagai berikut :
80 – 100 :A

Modul Praktek Pemrograman Web 1 7

 70 – 79 :B
60 – 69 :C
50 – 59 :D
0 – 49 :E
Apabila nilai yang dimasukkan tidak dalam rentang 0 – 100, maka akan
muncul keterangan nilai yang dimasukkan tidak valid.
2. Buatlah satu aplikasi web untuk mengkonversi suhu dengan menggunakan
fungsi.
3. Buatlah satu aplikasi web untuk menampilkan besar diskon dari pembelian
barang. Inputan berupa :harga barang dan besar diskon.
4. Latihan IF .

5. Latihan IF

6. Latihan Fungsi

Modul Praktek Pemrograman Web 1 8

7. Form dan Javascript

8. Fungsi :

Modul Praktek Pemrograman Web 1 9

9. S
10. Gabungan : Silahkan Anda kerjakan latihan di bawah ini :
<html>
<head>
<title> Latihan HTML & Javascript</title>
<script languange =”JavaScript”>
function alertx(data){
var nim =(document.data.nim.value);
var nama =(document.data.nama.value);
var fakultas =(document.data.fakultas.value);
var ket = “”;
if (document.data.wanita.checked == true) {
ketx = “Wanita”; }
if (document.data.wanita.checked == false &&
document.data.Wanita.checked == false ||
document.data.alamat.value == false ){
ketx = “”; }
else if (document.data.Wanita.checked == true){
ketx = “Pria”; }
var agama =(document.data.agama.value);
var ket = “”;
var ket1 =””;

Modul Praktek Pemrograman Web 1 10

var ket2 =””;
var ket3 =””;
if (document.data.browsing.checked == true){
ket = “Browsing”; }
if (document.data.baca.checked == true){
ket1 = ” Membaca Buku”; }
if (document.data.bermain.checked == true){
ket2 = ” Bermain”; }
if (document.data.hacking.checked == true){
ket3 = ” Hacking”; }
var alamat =(document.data.alamat.value); {
if(document.data.nim.value === false || document.data.nama.value ==
false ){
alert (” NIM atau Nama atau Alamat belum terisi dengan benar, CEK
KEMBALI !!! “); } else {
alert(“Selamat Datang Di \nFORM INPUT DATA MAHASISWA”);
alert (“NIM\t\t\t\t :\t” + nim + “\nNama\t\t\t :\t” + nama+
“\nFakultas\t\t\t :\t” +fakultas+ “\nJenis Kelamin\t :\t” +ketx+
“\nAgama\t\t\t :\t” +agama+ “\nHobi\t\t\t :\t” +ket+ “” +ket1+ “”
+ket2+ “” +ket3+ “\nAlamat\t\t\t :\t” +alamat);
alert(“Terimakasih telah Mengisi \nFORM INPUT DATA
MAHASISWA”); } } }
</script>
</head>
<body>
<div align=”center”>
<h3> FORM BIODATA MAHASISWA</h3>
<table border=”1″ cellpadding=”10″ cellspacing=”10″>
<tr> <td> <table border=”0″> <tr> <td>
<form name=”data” method=”post” action=””>
<table width=”371″ border=”0″> <tr>
<td colspan=”3″><div align=”center”>Form Biodata </div></td>
</tr> <tr>
<td width=”95″>NIM</td>
<td width=”1″>:</td>
<td width=”253″>
<label> <input type=”text” name=”nim” value=”” required>
Modul Praktek Pemrograman Web 1 11
</label>
</td> </tr> <tr>
<td>Nama</td> <td>:</td> <td>
<label>
<input type=”text” name=”nama” value=”” required>
</label>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>:</td>
<td>
<select name=”fakultas”>
<option>Pilih Fakultas</option>
<option>Teknik dan Ilmu Komputer</option>
<option>Sosial Politik</option>
<option>Hukum</option>
<option>Sasta</option>
<option>Ekonomi</option>
</select>
</td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td>:</td>
<td>
<input type=”radio” value=”wanita” name=”wanita”>Wanita
<input type=”radio” value=”Pria” name=”Wanita”>Pria
</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td>
<select name=”agama”>
<option>Pilih Agama</option>
<option>Islam</option>
Modul Praktek Pemrograman Web 1 12
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Kong Hu Chu</option>
</select>
</td>
</tr>
<tr>
<td height=”45″>Hobi</td>
<td>:</td>
<td>
<label>
<input type=”checkbox” name=”browsing” value=”on”>Browsing
</label>
<label>
<input type=”checkbox” name=”baca” value=”on”>Baca Buku
</label> <br>
<label>
<input type=”checkbox” name=”bermain” value=”on”>Bermain
</label>
<label>
<input type=”checkbox” name=”hacking” value=”on”>Hacking
</label>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>
<label>
<textarea type=”text” name=”alamat” required></textarea>
</label>
</td>
</tr>
<tr>
<td colspan=”3″><div align=”center”>
<input name=”” type=”submit” value=”proses”
Modul Praktek Pemrograman Web 1 13
 onClick=”alertx(this.data)”>
<input name=”” type=”reset”></div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<p align=”center”><a href=polinpdg.ac.id> PNP</a></p>
</body>
</html>

REFERENSI LANJUTAN :
1. Ari, Rosihan. Dasar Javascript. Diakses melalui www.rosihanari.net
2. http://www.w3schools.com/js/
3. http://www.tutorialspoint.com/javascript/
4. http://www.codecademy.com/en/tracks/javascript
5. http://htmldog.com/guides/javascript/

Modul Praktek Pemrograman Web 1 14

 MODUL 14
PENGANTAR CASCADING STYLE SHEET

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

1. Pengertian CSS
2. Memahami Konsep CSS
3. Memahasi Aturan Penulisan CSS
4. Memahami Manipulasi Font, Teks, Image, Background, Border
5. Memahami Manipulasi Tabel, Link dan Kursor Mouse.

14.1 Pengantar CSS

CSS adalah singkatan dari Cascading Style Sheet yaitu kumpulan kode-kode yang
berurutan dan saling berhubungan untuk mengatur format/tampilan suatu halaman
HTML. Dengan CSS kita dapat mengatur tampilan dan melakukan perubahan
struktur, huruf, warna, gambar, latar belakang halaman web dan lainnya secara
sakaligus tanpa mesti merubah satu persatu. Misalnya, Anda ingin merubah jenis
huruf yang digunakan dari Arial ke Helvetica, maka bayangkan jika halaman web
Anda lebih dari 100 halaman, tentu akan sulit memperbaikinya satu persatu,
namun dengan CSS, Anda cukup mengubahnya di CSS saja, maka akan berubah
ke seluruh halaman web Anda.

CSS lahir pada bulan Desember 1996 dengan diluncurkan CSS versi 1, tahun
1998 dirilis CSS versi 2 dan sekarang sudah mencapai CSS versi 3 dengan
perbaikan yang sangat signifikan.

Tata penulisan CSS mempunyai aturan-aturan tertentu agar di kenal oleh browser.
Secara umum penulisan CSS terdiri atas :

 Selector, yaitu tag HTML yang akan diberikan perintah CSS, seperti tag
<h1>, <img>, <table> dan lainnya.

Modul Praktek Pemrograman Web 1 1

  Property, yaitu atribut dari tag HTML yang dikonversi menjadi property
CSS, misalnya color, align dan laiinya.
 Value, adalah nilai yang diberikan ke property.

Sintaknya :

Selector { property: value }

Contoh : Anda dapat menentukan bingkai dari sebuah table seperti berikut :

table{ border :1px solid #C00; }

artinya, jika perintah table anda gunakan pada HTML, maka otomatis akan
diberikan atribut border dengan nila 1, solid dan berwarna #C00.

Satu selector dapat diberikan banyak property sekaligus, perhatikan contoh

berikut :

h1 {
border: 1px;
color: #ccc;
background-color: #000080;
}

Anda juga dapat memberikan CSS pada selector secara bertingkat seperti berikut :
ul em { color: #000; }
Artinya, CSS tersebut hanya berlaku untuk tag <em> yang berada setelah tag
<ul>.
Jika Anda ingin membuat class selector sendiri (bukan dari tag HTML), maka
dapat dilakukan dengan cara :
.black { color: black; }
Implementasinya pada kode HTML seperti berikut :
<p class=black>Tulisan akan berwarna hitam</p>
Namun, jika Anda ingin mengacu kepada id (attribute id), maka penulisannya :
#black { color: black; }
jika dibuat bertingkat, maka :
h1#black { color: black; }

Modul Praktek Pemrograman Web 1 2

ini akan memberikan efek hanya pada tag <h1> yang atribut idnya sama dengan
black. Jika Anda ingin semua tag <h1> akan berwarna black, maka :
#black h1 { color: black; }
Implementasinya pada kode HTML seperti berikut :
<p id=black>Tulisan akan berwarna hitam</p>
Selector group :
Kita dapat membuat selector ini berdasarkan sekelompok tag, dengan cara
memisahkan antara satu selector dengan selector lainnya dengan tanda koma (,).
Contoh :
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Aturan penulisan :
1. Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
2. Nama property bersifat case sensitive.
color : green;

14.2 Manfaat CSS

Beberapa kelebihan dari penggunaan CSS ini adalah :
1. Lebih hemat waktu, karena kode yang yang dibuat dengan CSS dapat
digunakan untuk banyak halaman secara sekaligus.
2. Loading halaman lebih cepat, dengan memanfaatkan CSS, Anda tidak
akan menulis kode HTML yang banyak, sehingga ini membuat loading
halaman web lebih cepat.
3. Mudah dalam mengelolanya, dengan CSS, jika bagian yang salah atau
ingin diperbaiki, maka cukup dilakukan pada file CSSnya saja.
4. Kompatibilitas, CSS dapat dikenal oleh berbagai browser dan device.

Modul Praktek Pemrograman Web 1 3

 5. Standard Web, kedepannya CSS akan terus dikembangkan dan menjadi
bagian yang tak terpisahkan dari sebuah web.
14.3 Cara Menggunakan CSS
Terdapat 3 cara memanfaatkan CSS ini untuk diterapkan pada HTML :
1. Embedded/Internal CSS, yaitu kode CSS langsung disisipkan pada file
HTML (halaman web) dengan terlebih dahulu menambahkan element
style. Tag ini diletakkan pada tag <head> … </head>. Dengan sintak :
<head>
<style type="text/css">
Style Rules
............
</style>
</head>

Contoh :
<head>
<style type="text/css" >
h1{
color: #36C;
}
</style>
</head>
Artinya, setiap Anda menggunakan tag <h1> pada halaman web ini, maka
otomatis akan berwarna #36C.
2. Inline CSS, yaitu kode CSS langsung disisipkan pada tag HTML, dan
hanya memberikan efek pada tag HTML itu saja. Sintaknya :
<element style="...style rules....">
Contoh :
<h1 style="color:#36C;">Inline CSS </h1>
Maka tulisan “Inline CSS akan berwarna #36C dan akan memberikan efek
hingga tag <h1> di tutup (</h1>). Secara default, tag <h1> hanya memiliki
atribut align, namun dengan inline CSS anda dapat memberikan atribut
lainnya dengan style, sehingga keberadaan elemen style ini mampu
memperkaya kemampuan sebuah tag.
3. External CSS, yaitu file CSS diletakkan secara terpisah dengan file
HTMLnya. Artinya Anda harus membuat sebuah file khusus untuk

Modul Praktek Pemrograman Web 1 4

mengumpulkan semua script CSS dan menyimpannya dengan ekstensi
.css. Kemudian pada setiap file HTML yang akan memanggil file css
tersebut harus disisip perintah :
<head>
<link href=" css file " rel="stylesheet"
type="text/css">
</head>
Type=”text/css” merupakan atribut yang wajib diberikan.
href diisi dengan lokasi dan nama file css-nya.
Perhatikan contoh berikut :
1. Buat file baru dengan nama style.css, isi dengan kode berikut :
body {
color: green;
background: cyan;
font-family : arial;
}

h1, h2, h3 {
color: efabcd;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Perintah diatas akan memberikan efek pada setiap file HTML

menggunakan tag <h1>, <h2> dan <h3>, maka otomatis akan
berwarna #36C, font weight = normal, spasi 4em, margin bottom=1em
dan hurufnya kecil.
2. Buat file HTML dengan css.html, lalu isi dengan kode berikut :

Modul Praktek Pemrograman Web 1 5

 Jika file html ini dijalankan, maka tampilannya akan seperti gambar
berikut :

PRAKTIKUM
Untuk lebih memahami CSS ini, silahkan Anda praktek latihan dibawah ini dan
ambil kesimpulannya.
1. Background

Hasilnya :

Modul Praktek Pemrograman Web 1 6

2. Variasi huruf

Hasilnya :

Modul Praktek Pemrograman Web 1 7

3. Manipulasi Teks

Hasilnya :

Modul Praktek Pemrograman Web 1 8

4. Manipulasi Teks Lanjutan :

Hasilnya :

5. Image Properti, pastikan Anda telah memiliki sebuah gambar untuk

mencoba latihan ini.

Hasilnya :

Modul Praktek Pemrograman Web 1 9

6. Manipulasi Link

Hasilnya :

7. Bordel style

Hasilnya :

Modul Praktek Pemrograman Web 1 10

8. Border

Lanjutan :

9. Margin

Modul Praktek Pemrograman Web 1 11

 Hasilnya :

10. Kursor Mouse

Hasilnya :

Modul Praktek Pemrograman Web 1 12

REFERENSI LANJUTAN :
1. http://www.w3schools.com/css/
2. http://www.htmldog.com/guides/css/beginner/
3. http://htmldog.com/guides/css/intermediate/
4. http://www.tutorialspoint.com/css/css_useful_resources.htm
5. http://www.csstutorial.net/

Modul Praktek Pemrograman Web 1 13

 MODUL 15
BEKERJA DENGAN CASCADING STYLE SHEET

Pada modul ini, Praktikan akan mencoba menggunakan CSS dengan

berbagai cara untuk meningkatkan kemampuan dalam memahami CSS.

Pada bab ini Anda akan belajar menerapkan CSS dengan berbagai cara disertai
praktek langsung. Kemudian diakhir percobaan Anda ambil kesimpulan.
15.1 Selektor Untuk Merubah Body

Hasil :

15.2 Selektor Bebas

Modul Praktek Pemrograman Web 1 1

Hasilnya :

15.3 Selektor Dengan Class

Hasil :

15.4 Selektor Dengan id

Modul Praktek Pemrograman Web 1 2

Hasilnya :

15.5. Format Margin

Hasilnya :

15.6. Format Margin

Modul Praktek Pemrograman Web 1 3

Hasilnya :

15.7. Background Campuran

Hasilnya :

Modul Praktek Pemrograman Web 1 4

15.8. Background Image

Properties Value Keterangan

background-image url Alamat gambar yang dituju
background-repeat repeat Diulang
repeat-x Diulang sumbu x
repeat-y Diulang sumbu y
no-repeat Tampil 1 gbr
Background-position top left Atas kiri halaman
top center Atas tengah halaman
top right Atas kanan halaman
center left Tengah kiri
center center Pusat
center right Tengah kanan
bottom left Bawah kiri
bottom center Bawah tengah
bottom right Bawah kanan
x-% y-% Pakai nilai %
x-pos y-pos

Hasilnya :

Modul Praktek Pemrograman Web 1 5

Melakukan pengulangan background pada sumbu y

Hasilnya :

Modul Praktek Pemrograman Web 1 6

Hasilnya :

15.9. Format Text

Properties Value Keterangan

Pengaturan warna
color green, dll
Pengaturan Spasi (jarak antar karakter)
letter-spacing Normal Ukrn standar HTML
Length Ukrn panjang(cm,px)
Perataan Text
text-align left
right center
justify
text-decoration none Bentuk standar
underline Bergaris bawah
overline Bergaris atas
line-through Text dicoret
blink Text berkedip

Modul Praktek Pemrograman Web 1 7

 Properties Value Keterangan

Pengaturan text indentasi

text-indent length Dengn cm, px
% Dengan persentase
Pengubahan Bentuk Karakter
text-transform capitalize
uppercase
lowercase
none

Hasilnya :

Modul Praktek Pemrograman Web 1 8

15.10. Membuat Menu 3d dengan Eksternal CSS
Buatlah file menu.html dengan kode berikut :

Terlihat pada file diatas, memanggil file styleku.css, sekarang dalam folder yang
sama buat file css tersebut dengan kode berikut :

Modul Praktek Pemrograman Web 1 9

Hasilnya :

Sumber : = http://lecturer.eepis- its.edu/~zenhadi

Modul Praktek Pemrograman Web 1 10

 MODUL 16
PROYEK WEB HTML

Pada modul ini, Praktikan akan mencoba membangun web sederhana

menggunakan HTML.

Pada bagian akhirnya perkuliahan ini, praktikan mampu menerapkan semua

materi yang telah diberikan dan diaplikasikan dalam bentuk proyek web
sederhana.

Pada bab ini Anda akan diberikan contoh membangun web sederhana dengan
memanfaatkan semua materi yang telah diberikan.

16.1 Layout Web

Langkah pertama kita adalah menentukan layout dari web yang akan dibangun,
misalnya seperti gambar berikut :

Header

Menu horizontal

Content Widget

Widget widget Widget

Modul Praktek Pemrograman Web 1 1

16.2 Menyiapan struktur folder
Langkah berikutnya adalah menyiapkan struktur file dan folder penyimpanan file-
file web. Misalnya seperti berikut :

Terlihat pada gambar diatas disediakan 3 folder, yaitu :

1. Folder images, untuk menyimpan seluruh file-file gambar yang
diperlukan.
2. Folder sound, untuk menyimpan seluruh file-file audio yang diperlukan.
3. Folder vedos, untuk menyimpan seluruh file-file video yang diperlukan.
Dengan pengaturan seperti ini akan memudahkan kita nantinya dalam mengelola
file-file website.
16.2 Membuat file induk (index.html)
Berikutnya adalah membuat kode pemrograman untuk file utama web, simpan
dengan nama file index.html. Berikut kodenya :
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"
<meta charset="utf-8">
<title>Projek Web Sederhana</title>
</head>

<body>
<div id="wrapper">
<div id="container">
<header>www.ephi.web.id</header> <!--HTML5 -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Artikel</a>
<ul class="submenu">
<li><a href="#">Sains</a></li>
<li><a href="#">Bola</a></li>
</ul>
</li>

Modul Praktek Pemrograman Web 1 2

 <li><a href="video.html">Video</a></li>
<li><a href="kontak.html">Kontak</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</nav> <!--HTML5 -->
<div id="content">
<div id="single">
<div id="featured-image"
style="background:url(images/1.jpg)">&nbsp;</div>
<h2>Penemuan Telegram Kabarkan Dahsyatnya Letusan
Krakatau</h2>
KOMPAS.com - Dibandingkan letusan Gunung Tambora di
Sumbawa (Nusa Tenggara Timur) pada 1815, letusan Gunung
Krakatau masih kalah besar, baik kekuatan maupun
dampaknya. Berbeda dengan letusan Tambora yang terekam
samar dan dampak globalnya baru dideteksi lebih dari
100 tahun kemudian, letusan Krakatau diketahui warga
dunia dalam bilangan jam [...]
<div id="more"><a href="article-1.html">Baca
Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/2.jpg)">&nbsp;</div>
<h2>Pesawat Tanpa Awak UGM Berdaya Jelajah 200
Kilometer</h2>
JAKARTA, KOMPAS.com - Untuk memantau batas wilayah atau
situasi dan kondisi lokasi bencana alam dengan biaya
murah dan efektif, dibutuhkan teknologi pesawat tanpa
awak. Universitas Gadjah Mada (UGM) turut memamerkan
hasil risetnya, berupa pesawat udara tanpa awak mini
(Mini UAV) pada Forum Riset Industri
Indonesia ke-3 2011, Rabu (30/11/2011) di [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/3.jpg)">&nbsp;</div>
<h2>Prasasti Maya Bukan Petunjuk Kiamat</h2>
KOMPAS.com — Beberapa waktu lalu, National Institute of
Anthropology and History di Meksiko mengumumkan
penemuan Prasasti Comalcalco. Prasasti itu memiliki
kalender lingkaran, kombinasi posisi hari dan bulan
yang berulang tiap 52 tahun. Tanggal yang tertera pada
prasasti, diduga 21 Desember 2012, terkait dengan akhir
Baktun (periode tiap 394 tahun) ke-13. Angka 13 [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>

Modul Praktek Pemrograman Web 1 3

</div>
<div id="single">
<div id="featured-image"
style="background:url(images/4.jpg)">&nbsp;</div>
<h2>Seperlima Gletser Himalaya Mencair</h2>
KOMPAS.com — Sebanyak seperlima gletser di Himalaya
telah menyusut karena mencair dalam kurun 30 tahun
terakhir. Rinciannya antara lain, 21 persen gletser
di Nepal dan 22 persen gletser di Butan mencair. Fakta
itu merupakan hasil
penelitian International Center for Integrated Mountain
Development (Icimod), sebuah organisasi yang berbasis
di Kathmandu, Nepal [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/5.jpg)">&nbsp;</div>
<h2>Asteroid Vesta dalam Video 3D</h2>
PASADENA, KOMPAS.com - Asteroid Vesta adalah salah satu
asteroid terbesar di Tata Surya. Diameter asteroid ini
mencapai 530 km. Asteroid ini ditemukan oleh Heinrich
Wilhelm Olbers pada 29 Maret 1807. Penasaran seperti
apa rupa asteroid Vesta? NASA telah memproduksi citra
yang menyuguhkan rupa asteroid Vesta dalam versi 3D.
Citra tersebut diambil oleh wahana antariksa [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>

</div>
<div id="sidebar">
<li class="widget">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk
Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video
3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya
Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Commented Post</h2>
<ul>

Modul Praktek Pemrograman Web 1 4

 <li><a href="#">Prasasti Maya Bukan Petunjuk
Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video
3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya
Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Audio Streaming</h2>
<audio id="audio" src="sounds/mudiak.mp3"
controls></audio>
</li>

</div>
<footer> <!--HTML5 -->
<div id="column">
<h2>Dapatkan Bantuan dan Dukungan</h2>
Untuk mendapatkan petunjuk atau dukungan dari kami,
kunjungi situs <a href="http://ephi.web.id">support</a>
dan submit form anda.
</div>
<div id="column">
<h2>Hubungi Kami</h2> Jl. Bahagia gg. Sukses No. 9<br>
Padang 25000 Sumatera Barat<br> (+62751) 1234567
</div>
<div id="column">
<h2>Temukan Kami di ...</h2>
<a
href="http://facebook.com/yuhefizar">Facebook</a><br>
<a href="http://twitter.com/yuhefizar">Twitter</a>
</div>

</footer>
</div>
</div>

</body>
</html>

16.3 Menyiapan File CSS

Agar tampilan web Anda lebih menarik, gunakan CSS, berikut ini contoh kodenya
: (beri nama filenya style.css)

Modul Praktek Pemrograman Web 1 5

/* CSS Document */
@font-face{
font-family:"Cuprum";
src:url("fonts/Cuprum.otf");
font-weight:normal;
}
@font-face{
font-family:"Calibri";
font-weight:normal;}
body{
font-family:Calibri;
background:url(images/bg.jpg);
background-attachment:fixed;
background-position:center;
}
#container{
padding:10px;
background:#FFFFFF;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#wrapper{
width:960px;
margin:auto;
border:#F00 1px solid;}
header{
Height:100px;
width:940px;
float:left;
background:url(images/header.png);
background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum;
font-style:italic;
font-size:32px;
font-weight:bold;
color:#090;
text-shadow:#000 2px 2px 1px;
}
nav{
height:40px;
width:960px;
float:left;

Modul Praktek Pemrograman Web 1 6

 background:#333;}
nav{
width:958px;
float:left;
overflow:auto;
background:#DFDFDF;
border:#AAAAAA 1px solid;}
nav ul{
list-style:none;
float:left;
overflow:auto;
margin:0px;
padding:0px;}
nav ul li{
display:block;
padding:5px 10px 5px 10px;
float:left;
margin:0px;
border-right:#AAAAAA 1px solid;}
nav ul li .submenu{
display:none;
}
nav ul li:hover .submenu{
display:block;
margin:0px;
width:100px;
position:absolute;
margin-top:5px;
border:#AAAAAA 1px solid;
background:#DFDFDF;
margin-left:-11px;
}
nav ul li:hover .submenu li{
display:block;
width:89px;
padding:5px;
float:left;
border:none;
}
nav ul li:hover{
background:#EDEDED;
}
nav ul li a{
color:#000000;
text-decoration:none;
}

Modul Praktek Pemrograman Web 1 7

nav ul li a:hover{
text-decoration:underline;
}
#wrapper #content{
width:620px;
float:left;
padding:10px;}
#wrapper #content #single{
margin:5px;
border:#DFDFDF 1px solid;
padding:5px; font-size:13px; float:left;
overflow:auto;
}
#wrapper #content #single #featured-image{
width:150px;
height:150px;
-moz-background-size:450px 150px; /* CSS3 Mozilla
Firefox */
background-size:450px 150px; /* CSS3 Other Browser
*/
background-position:center;
float:left; overflow:auto; margin-right:5px;
}
#wrapper #content #single h2{
margin:0px;
font-family:Cuprum; font-size:18px; padding:5px;
border:#DFDFDF 1px solid; background:#EEEEEE;
margin-bottom:10px;
}
#wrapper #content #single #more a{
float:right;
overflow:auto;
padding:2px 10px 2px 10px;
background:#CF6;
border:#FF9933 1px solid;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
margin-bottom:10px;
margin-right:10px;
margin-top:10px;
text-align:center;
text-decoration:none;
color:#000000;
}

Modul Praktek Pemrograman Web 1 8

#wrapper #content #single #more a:hover{
background:#BD5;
color:#093;
border:#CC6600 1px solid;
}
#wrapper #sidebar{
width:300px;
float:left;
padding:10px;}
#wrapper #sidebar .widget{
list-style:none;
}
#wrapper #sidebar .widget ul{
list-style:none;
margin-left:-40px;
}
#wrapper #sidebar .widget li a{
color:#446500;
text-decoration:none;
}
#wrapper #sidebar .widget li a:hover{
text-decoration:underline;
}
footer{
float:left;
background:#333333;
width:960px;
color:#BBBBBB;
}
footer #column{
width:300px;
padding:10px;
float:left;
font-size:14px;
}
footer #column h2{
margin:0px;
margin-bottom:10px;
font-family:Cuprum;
font-size:18px;
color:#FFFFFF;
font-weight:bold;
}
footer #column a{
font-weight:bold;
color:#0099CC;
text-decoration:none;

Modul Praktek Pemrograman Web 1 9

}
footer #column a:hover{
text-decoration:underline;
}
#wrapper #content #single #thumbnail-image{
width:620px;
height:150px;
-moz-background-size:620px 310px;
/* CSS3 Mozilla Firefox */
background-size:620px 310px;
/* CSS3 Other Browser */
background-position:center;
margin-bottom:10px;
}
#wrapper #content #single h2.video-title{
border:none;
}
#wrapper #content #single h2.video-title a{
color:#5f8f00;
text-decoration:none;
font-size:16px;
font-weight:normal;
}
#wrapper #content #single h2.video-title a:hover{
text-decoration:underline;
}

16.4 Menyiapan File Untuk Setiap Halaman Web

Sekarang lengkapi website Anda dengan seluruh link-link yang terdapat pada
menu, misalnya link untuk article yang pertama. Silahkan Anda buat sebuah file
html dengan nama article-1.html dan isi dengan kode berikut :
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"
<meta charset="utf-8">
<title>Projek Web Sederhana</title>
</head>

<body>
<div id="wrapper">
<div id="container">
<header>www.ephi.web.id</header>
<nav>

Modul Praktek Pemrograman Web 1 10

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Artikel</a>
<ul class="submenu">
<li><a href="#">Sains</a></li>
<li><a href="#">Bola</a></li>
</ul>
</li>
<li><a href="video.html">Video</a></li>
<li><a href="kontak.html">Kontak</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</nav> <!--HTML5 -->
<div id="content">
<div id="single">
<div id="thumbnail-image"
style="background:url(images/1.jpg)">&nbsp;</div>
<h2>Penemuan Telegram Kabarkan Dahsyatnya Letusan
Krakatau</h2>
<p>KOMPAS.com - Dibandingkan letusan Gunung Tambora di
Sumbawa (Nusa Tenggara Timur) pada 1815, letusan Gunung
Krakatau masih kalah besar, baik kekuatan maupun
dampaknya. Berbeda dengan letusan Tambora yang terekam
samar dan dampak globalnya baru dideteksi lebih dari
100 tahun kemudian, letusan Krakatau diketahui warga
dunia dalam bilangan jam.</p>
<p>Dampak letusan Tambora baru diketahui ketika
peneliti di kantor meteorologi Amerika Serikat, WJ
Humphreys, pada tahun 1930-an menemukan hubungan antara
cuaca buruk di dunia Barat pada 1816 dan letusan Gunung
Tambora. Adapun letusan Krakatau telah menjadi berita
utama di koran-koran di Eropa tak lama kemudian.</p>
<p>Tsunami yang menyebar luas ke berbagai penjuru dunia
pada 27 Agustus 1883
juga terdeteksi dengan cepat bahwa sumbernya Krakatau.
Sepanjang tanggal 27
Agustus dan sehari setelahnya, telegram dari Batavia
(Jakarta)—160 km dari Krakatau—berkali-kali dikirim ke
Singapura. Dari sana kabar kemudian menyebar jauh
hingga Inggris.</p>
<p>Bunyi telegram menyebutkan kepanikan suasana di
Jakarta waktu itu. "Batavia
saat ini hampir gelap gulita—lampu gas menyala
sepanjang malam—tak dapat berkomunikasi dengan Anjer
(Anyer)— beberapa jembatan hancur, sungai-sungai meluap
karena gelombang laut yang menuju daratan," demikian
isi telegram yang dikirim

Modul Praktek Pemrograman Web 1 11

pada sore hari, 27 Agustus.</p>
<p>Kemudian, pukul 11.00 pada 28 Agustus, sebuah
telegram kembali diterima di Singapura, "Anjer,
Tjeringin, dan Telok Beting hancur lebur." Setengah jam
kemudian kabar buruk kembali dikirim, "Mercusuar di
Selat Sunda menghilang."</p>
<p>Berikutnya, telegram itu mengirim informasi lebih
detail tentang gelombang
laut setinggi 40 meter yang menghanyutkan terumbu
karang seberat 600 ton ke daratan Anyer. Disebutkan,
sedikitnya 36.417 orang tewas, sebagian besar karena
gelombang tsunami, dan 165 desa hancur.</p>
<p>Berita yang cepat menyebar itu tak membuat warga
Australia bagian selatan, Perth, Colombo, dan Rodriguez
(sejauh 4.800 km), harus lama bertanya-tanya tentang
suara gelegar letusan yang terdengar dari rumah mereka
pada 27 Agustus. Demikian halnya warga dunia menjadi
cepat tahu bahwa tsunami yang melanda pantai Sri Lanka
dan perubahan tinggi permukaan air laut di Selandia
Baru, Alaska dan Saluran Inggris pada hari itu adalah
dampak Krakatau.</p>
<p>Para meteorolog dunia juga dengan cepat
menghubungkan bahwa cuaca dingin yang terjadi sepanjang
tahun 1883 hingga paruh pertama 1884 adalah berkat
letusan Krakatau. Awan dari abu vulkanik naik ke atas
mencapai ketinggian 50-80 km dan mengitari bumi dengan
kecepatan jet beberapa kali. Suhu udara menjadi lebih
dingin akibat sinar matahari terhalang abu vulkanik
lebih dari satu tahun lamanya di beberapa wilayah bumi.
Volume material yang dikeluarkan diperkirakan sekitar
18-21 kilometer kubik yang terdiri dari 9-10 kilometer
kubik batu-batu berat.</p>
<p>Letusan Krakatau merupakan bencana besar pertama di
dunia yang terjadi
setelah jaringan kabel telegraf menyambung di seluruh
dunia. Dua belas tahun sejak Samuel Morse pada 24 Mei
1844 mengirimkan pesan pertama dari gedung Mahkamah
Agung di Washington kepada koleganya Alfred Vail, di
Baltimore, telegram sudah disambung ke istana besar di
Buitenzorg ke kantor-kantor di Batavia. Jawa kemudian
terhubung ke dunia internasional sejak 1859, melalui
Singapura, sehingga berita letusan Krakatau bisa dengan
cepat menyebar luas.(Tim Penulis: Ahmad Arif, Indira
Permanasari, Yulvianus Harjono, C Anto Saptowalyono.
Litbang: Rustiono)</p>
</div>
</div>

Modul Praktek Pemrograman Web 1 12

<div id="sidebar">
<li class="widget">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk
Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video
3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya
Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Commented Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk
Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video
3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya
Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Audio Streaming</h2>
<audio id="audio" src="sounds/mudiak.mp3"
controls></audio>
</li>

</div>
<footer> <!--HTML5 -->
<div id="column">
<h2>Dapatkan Bantuan dan Dukungan</h2>
Untuk mendapatkan petunjuk atau dukungan dari kami,
kunjungi situs <a href="http://ephi.web.id">support</a>
dan submit form anda.
</div>
<div id="column">
<h2>Hubungi Kami</h2> Jl. Bahagia gg. Sukses No. 9<br>
Padang 25000 Sumatera Barat<br> (+62751) 1234567
</div>
<div id="column">
<h2>Temukan Kami di ...</h2>
<a
href="http://facebook.com/yuhefizar">Facebook</a><br>
<a href="http://twitter.com/yuhefizar">Twitter</a>

Modul Praktek Pemrograman Web 1 13

</div>
</footer>
</div>
</div>
</body>
</html>

Dengan cara yang sama, silahkan Anda buat halaman web yang lainnya. Pastikan
Anda menyertai file gambar, file audio dan file video yang diperlukan dalam kode
diatas.
16.5 Tampilan Akhir

Jika Pekerjaan web diatas Anda lakukan dengan benar, maka tampilannya seperti
berikut :

Modul Praktek Pemrograman Web 1 14

Jika di klik Baca selengkapnya, maka akan tampil seperti berikut :

Jika di klik tombol Play pada Audio, maka akan terdengar suara dari file audio
yang diberikan.
Jika di klik file video, maka akan tampil :

Jika di klik pada salah satu link yang ada, maka akan tampil :

Modul Praktek Pemrograman Web 1 15

Maka akan tampil sebuah file video yang langsung bisa dinikmati oleh
pengunjung website Anda.

Demikian panduan membuat web sederhana ini menggunakan HTML, silahkan

Anda kembangkan lebih lanjut.

Modul Praktek Pemrograman Web 1 16