Dokumen ini menjelaskan tentang cara kerja website dan alat pendukung yang diperlukan untuk mengelola server web, termasuk perangkat keras dan perangkat lunak seperti XAMPP, database, dan perangkat scripting. Juga dibahas konsep dasar HTML, struktur elemen dalam dokumen HTML, serta elemen-elemen yang digunakan untuk membangun halaman web. Selain itu, terdapat langkah-langkah praktikum untuk instalasi XAMPP dan pembuatan direktori serta dokumen HTML.

1. 2012 - BPP – Design Web – MI 1
Nama :………………………………………………
Kelas :………………………………………………
NPM :………………………………………………
Materi Kuliah
SEMESTER 1

2. 2012 - BPP – Design Web – MI 2
Pertemuan : 1 (Satu)
Materi : Memahami cara kerja website dan installasi perangkat pendukung
web se
Teori
A. Cara Kerja Website
World Wide Web (WWW) adalah sebuah layanan di internet yang berjalan diatas protocol HyperText Transfer Protokol (HTTP). WWW merupakan halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudera belantara informasi. Dengan kata lain, WWW merupakan server di Internet yang berisikan Halaman-halaman Web terbentuk dari kumpulan file-file teks murni (plain text) yang pada awalnya berupa script-script HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan perangkat lunak web browser yang dimiliki oleh client.
Pada saat sebuah alamat ditulis pada sebuah web browser maka, data (request) akan dilewatkan oleh suatu protocol HTTP melewati port 80 ke web server. Alamat ini adalah URL dari suatu situs web yang mempunyai nama domain yang unik di Internet dan terdaftar pada DNS server. Web Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnyua, aturan ini biasa disebut sebagai protocol. Web browser terinstallasi pada perangkat di sisi user (client) bertugas menerjemahkan kode-kode HTML yang dikirim (respon) dari web server, kemudian menampilkan hasil interpreting dalam bentuk informasi ke halaman browser.
Gambar 1. Cara Kerja Web
Catatan :
Halaman web yang termasuk kedalam client side script , hanya memerlukan web browser untuk menjalankannya. Sedangkan dan Halaman web yang dibangun dengan konsep server side script, harus menggunakan web server untuk dapat menjalankannya.

3. 2012 - BPP – Design Web – MI 3
B. Perangkat Pendukung Server Web
Agar website dapat berjalan dan dijalankan secara sempurna disebuah web server, maka diperlukan beberapa perangkat pendukung yang disajikan seperti pada gambar 2.
Gambar 2. Perangkat Pendukung Web Server
Server web merupakan server internet yang berfungsi untuk menyimpan sumber daya data dan melayani koneksi transfer data melalui protocol HTTP. Web server merupakan hal yang terpenting dari server di internet dibandingkan server lainnya seperti e-mail server, ftp server ataupun news server. Hal ini disebabkan web server telah dirancang untuk dapat melayani beragam jenis data, dari text sampai grafis 3 dimensi. Web server juga dapat menggabungkan dengan dunia mobile wireless internet atau yang sering disebut sebagai WAP (Wireless Access Protocol), yang banyak digunakan sebagai sarana handphone yang memiliki fitur WAP. Dalam kondisi ini, webserver tidak lagi melayani data file HTML tetapi telah dapat melayani WML (Wireless Markup Language).
Kebutuhan perangkat web server terbagi dalam dua macam, yaitu perangkat keras (komputer server) dan perangkat lunak. Untuk kebutuhan perangkat lunak yang harus disediakan adalah :
 Perangkat Lunak Sistem Operasi
Misalnya : Windows dan atau Linux
 Perangkat Lunak Web Server
Misalnya : Apache, IIS, tomcat, dll
 Perangkat Lunak Database Management System (DBMS)
Misalnya : MySQL, Postgree, dll
 Perangkat Lunak Server Side Script
Misalnya : PHP, CGI, Perl, Python, JSP, ASP, dll
Namun seiring perkembangan teknologi perangkat lunak yang semakin pesat, dan tujuan untuk menghindari kerumitan proses installasi web server, maka telah banyak perangkat lunak khusus web server yang telah mem-bundle kebutuhan perangkat lunak seperti Apache, MySQL, PHP dalam sebuah software. Perangkat lunak penunjang tersebut antara lain XAMPP, PHPtriad, AppServer dan lain-lain.
C. Perangkat Lunak Pendukung Scripting
Penulisan script untuk Design Web dapat dilakukan dengan menggunakan bantuan perangkat lunak pengolah text sederhana atau dengan perangkat lunak khusus untuk keperluan scripting Design Web. Perangkat lunak yang paling sederhana adalah NOTEPAD, dan perangkat lunak khusus yang paling banyak digunakan oleh web programmer adalah MACROMEDIA DREAMWEAVER. Selain kedua perangkat lunak tersebut masih banyak lagi perangkat lunak yang dapat digunakan untuk keperluan scripting.

4. 2012 - BPP – Design Web – MI 4
Kerjakan langkah-langkah percobaan installasi XAMPP, untuk kebutuhan web server berikut ini :
A. Pendahuluan
XAMPP adalah sebuah aplikasi yang digunakan untuk membangun dan mengelola kebutuhan web server. Aplikasi XAMPP secara default menyediakan kebutuhan seperti web server (Apache), Database (MySQL) dan Server-Side Engine (PHP).
B. Installasi XAMPP
1) Pastikan aplikasi setup XAMPP sudah tersedia
2) Jalankan program setup XAMPP tersebut, dengan cara Double klik atau klik kanan lalu klik Run pada file setup yang dimaksud. Kemudian pertama kali akan muncul dialog pemilihan bahasa yang digunakan. Pilihlah bahasa yang diinginkan lalu klik (OK).
3) Layar Dialog “Welcome” akan disajikan. Pada dialog ini pilih tombol (NEXT) untuk memulai installasi XAMPP.
4) Layar Dialog “Choose Install Location” akan disajikan. Pada dialog ini diminta untuk menentukan letak/lokasi drive dan folder dimana file XAMPP akan di letakkan. Lokasi default adalah “c:xampp”. Jika sudah anda tentukan, klik (NEXT).

5. 2012 - BPP – Design Web – MI 5
5) Layar Dialog “XAMPP Option” akan disajikan. Pada dialog ini Anda diminta untuk menentukan konfigurasi ( desktop icon, start menu dan services action ) XAMPP. Pilih Install Apache as service dan Install MySQL as service, Filezilla ftp server diabaikan. Untuk melanjutkan installasi klik (INSTALL).
6) Layar Dialog “Installing” akan disajikan. Tunggulah beberapa saat hingga proses installasi selesai dilaksanakan.
7) Proses installasi selesai ditandai dengan kemunculan window dialog “Complete Setup”.
Lalu klik (Finish) untuk mengakhiri.

6. 2012 - BPP – Design Web – MI 6
8) Beberapa saat kemudian akan muncul kotak dialog informasi, yang menunjukkan bahwa installasi services telah selesai. Klik (OK).
9) Beberapa saat kemudian akan muncul kotak dialog informasi “congratulation”, yang menunjukkan bahwa installasi telah selesai seluruhnya. Dan pada dialog pemilihan kondisi pilih (YES) untuk langsung mengaktifkan aplikasi XAMPP Control Panel.
10) Window control panel XAMPP disajikan sebagai berikut :
Konfigurasi pada kontrol panel cukup sederhana. Menyajikan informasi tentang keadaan [Running] untuk Apache, Mysql, Filezilla dan Mercury. Pada bagian [Svc] checkbox menunjukkan layanan apa saja yang telah anda tentukan sebelumnya pada saat
installasi.
Masing-masing layanan menyajikan informasi keadaan [Running] Untuk masuk ke system file dari xampp, Check kondisi apakah web server telah berhasil dijalankan, pada control panel silahkan klik tombol (explore). Atau jalankan web browser, kemudian tuliskan alamat pada addresses bar sebagai berikut : localhost <enter>

7. 2012 - BPP – Design Web – MI 7
C. Membuat Direktori Aktif dalam web server
Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori sebagai berikut : “pw”, kemudian didalam direktori “pw” buatlah sub- direktori dengan nama “praktikum1”.
7. Tugas dan Pertanyaan
 Lakukan pengecekan apakah web server telah berhasil dijalankan, amati dan analisislah hasilnya dan simpan catatan anda (*.doc) dalam direktori “pw/praktikum1”.
 Lakukan pengecekan apakah DBMS MySQL telah berhasil dijalankan, amati dan analisislah hasilnya. dan simpan catatan anda (*.doc) dalam direktori “pw/praktikum1”.
 Lakukan pengecekan apakah PHP engine telah berhasil dijalankan, amati dan analisislah hasilnya dan simpan catatan anda (*.doc) dalam direktori “pw/praktikum1”.
 Berikan hasil analisis anda terhadap prosedur dan proses installasi XAMPP secara keseluruhan. dan simpan catatan (*.doc) anda dalam direktori “pw/praktikum1”.
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Terinstallasinya sebuah Web Server aktif yang siap digunakan
 Terinstallasinya sebuah DBMS MySQL aktif yang siap digunakan
 Terinstallasinya sebuah PHP Engine aktif yang siap digunakan

8. 2012 - BPP – Design Web – MI 8
Minggu ke : 2
Unit Kompetensi : Client Side Script : Hypertext Markup Language (HTML)
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai konsep dasar script Hypertext Markup Language (HTML)
 Menguasai elemen-elemen pada tag HEAD HTML
 Menguasai elemen-elemen pada tag BODY HTML
2. Indikator Konerja
 Mampu menjelaskan konsep dasar script Hypertext Markup Language (HTML)
 Mampu mengidentifikasi dan menggunakan elemen-elemen tag HEAD pada dokumen HTML
 Mampu mengidentifikasi dan menggunakan elemen-elemen tag BODY pada dokumen HTML
 Mampu menggunakan elemen untuk memformat halaman
3. Teori
A. Konsep Dasar script Hypertext Markup Language (HTML)
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (Script) yang digunakan untuk membangun sebuah halaman web. Script akan diinterpretasikan oleh browser dan browser juga akan memberikan hasilnya pada halaman browser. File HTML berekstensi :
„html‟ atau „htm‟. Untuk membuat dokumen HTML, dapat menggunakan aplikasi-aplikasi editor teks (notepad, dll) atau aplikasi khusus scripting (Macromedia Dreamweaver, dll).
HTML merupakan standar bahasa yang digunakan untuk menampilkan dokumen web. Unsur bahasa atau elemen HTML dinyatakan dengan tanda khusus, yang disebut dengan TAG. Sebuah tag ditandai dengan nama elemen (TAG) yang diapit oleh simbol “<” dan “>”.
Bentuk umum penulisan sintak tag HTML :
<ELEMENT [ATRIBUT1 =”value” … ATRIBUTN=”value”] > … </ELEMENT>
Keterangan :
• ELEMENT : Nama Tag HTML
• ATRIBUT : Atribut dari Tag HTML (optional)
• VALUE : Nilai dari Atribut Tag HTML (optional)
Contoh : < BODY BGCOLOR =”red”> ……… </BODY> Pemahaman tentang tag HTML
 Open Element
Merupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak memiliki elemen penutup. Format penulisan <name element />
Contoh : <hr/>, <br/>
 Close Element
Merupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki elemen penutup. Format penulisan <name element > ….. </name element>
Contoh : <body>…<body/>, <div>…</div>, dll
 Comment
Merupakan baris yang tidak akan dieksekusi oleh penerjemah. Biasanya digunakan untuk informasi script . Format Penulisan : < ! - - comment text -- >
Contoh : < ! - - Hallo saya adalah baris yang tidak akan diekskusi -- >

9. 2012 - BPP – Design Web – MI 9
Struktur Elemen dalam Dokumen HTML
Struktur elemen dalam dokumen HTML adalah struktur dasar penulisan script untuk dokumen HTML. Berikut ini adalah gambar struktur dokumen HTML, dan hubungannya dengan output pada halaman web browser.
<html>
<head>
…………
</head>
<body>
…………
</body>
</html>
Gambar 3. Struktur Elemen dalam Dokumen HTML
B. Elemen-Elemen Pada Tag HEAD HTML
Elemen-elemen pada tag HEAD HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <HEAD> dan </HEAD>. Ada beberapa macam elemen pada tag HEAD HTML, yaitu antara lain :
 TITLE
Tag yang digunakan untuk menampilkan judul homepage/ halaman web pada title browser area.
Contoh :
< TITLE > halaman web pertamaku </TITLE>
 META
Tag yang digunakan untuk mendefinisikan informasi (keywords, http header, dll) dan
identitas (author, copyright, dll) pada sebuah halaman web (dokumen HTML). Contoh :
< META keywords = “web, pemrograman”/>
< META name =”author” content =”eko win kenali”/>
< META name =”copyright” content =”2006”/>
 LINK
tag yang digunakan untuk menyertakan dokumen lain ke dalam halaman web untuk tujuan khusus. Dokumen lain tersebut biasa berupa file dengan format CSS, PHP, ICO dan lain- lain.
Contoh :
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon“/>
<link rel="stylesheet" href="../css/style.css" media="screen" type="text/css“/>
C. Elemen-elemen pada tag BODY HTML
Elemen-elemen pada tag BODY HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <BODY> dan </BODY>.
Ada beberapa macam elemen pada tag BODY HTML, dan agar lebih memudahkan dalam pemahaman, macam-macam elemen tersebut akan disajikan berdasarkan tugas dan fungsinya:

10. 2012 - BPP – Design Web – MI 10
Elemen untuk memformat halaman :
 HEADING
Heading adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks sebagai kepala (judul/title). Ada 6 macam elemen heading, yaitu H1, H2, H3, H4, H5 dan H6.
Contoh :
< H1 > Contoh Heading 1 </H1>
 PARAGRAPH
Paragraph adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks atau lebih sebagai paragraph. Elemen Paragraph ditandai dengan close tag <p>..</p>.
Contoh :
<p>
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</p>
 LIST ITEMS
List Item adalah tag digunakan untuk mengelompokkan data (teks) baik dengan metode pengelompokan tidak berurutan (unordered list) maupun pengelompokan berurutan (ordered list).
Contoh :
Unordered List
Order List
<ul>
<li>minggu</li>
<li>rabu</li>
<li>jum‟at</li>
<li>kamis</li>
<li>sabtu</li>
<li>selasa</li>
<li>senin</li>
</ul>
<ol>
<li>minggu</li>
<li>rabu</li>
<li>jum‟at</li>
<li>kamis</li>
<li>sabtu</li>
<li>selasa</li>
<li>senin</li>
</ol>
 DEFINITON LIST
Definition List fungsinya sama dengan list item. Elemen Definition List ditandai oleh tag
<DL> … </DL>. Didalam tag Definition List terdapat tag Definition Term <DT>, yaitu tag untuk menentukan definition term. Serta tag Definition <DD>, yaitu tag untuk menentukan definition itu sendiri. Contoh :
Contoh :
<dl>
<dt>HTML
<dd>HyperText Markup Language is not Language programming</dd>
</dt>
<dt>HTTP
<dd>HyperText Transfer Protocol is TCP/IP Protocol</dd>
</dt>
<dt>Internet
<dd>A network of network</dd>
</dt>
<dt>TCP/IP
<dd>Internet protocol</dd>
</dt>
</dl>
 HORIZONTAL RULE
Horizontal rule adalah tag digunakan untuk menggambar garis horizontal dalam document
HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh :
<hr/>

11. 2012 - BPP – Design Web – MI 11
 BREAK LINE
Break Line adalah tag di gunakan untuk memulai/ganti baris baru pada document HTML. Elemen Break Line ditandai dengan tag <br>.
Contoh :
<br/>
 QUOTES / IDENTASI
Quotes adalah tag yang digunakan untuk membuat indentasi paragraph. Elemen Quotes ditandai dengan tag <blockquote> .. </blockquote> atau <Q>..</Q>.
Contoh :
<p>
<blockquotes>
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</blockquote>
</p>
 FONT
Font adalah tag di gunakan untuk menentukan format font pada dokumen html. Elemen
Font ditandai dengan tag <font>…</font>. Contoh :
<font face=”arial, verdana” color=”#FF3300” size=”12px”>
DESIGN WEB
</font>
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori sebagai berikut : “pw”, kemudian didalam direktori “pw” buatlah sub- direktori dengan nama “praktikum2”.
2. Merancang halaman web sederhana.
a. Buatlah dokumen HTML Baru dan ketiklah script berikut :
1 <html>
2 <head>
3 </head>
4 <body>
5 </body>
6 </html>
b. Simpan dokumen dengan nama percobaan2_1.html dan simpanlah di dalam direktori
“pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
3. Merancang halaman web dengan meletakkan script elemen pada tag HEAD
a. Buatlah dokumen HTML Baru dan Ketiklah script berikut :

12. 2012 - BPP – Design Web – MI 12
1 <html>
2 <head>
3 <title > halaman web pertamaku </title>
4 </head>
5 <body>
6 </body>
7 </html>
b. Simpan dokumen dengan nama percobaan2_2.html dan simpanlah di dalam direktori
“pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
4. Merancang halaman web dengan meletakkan script elemen pada tag HEAD
a. Buatlah dokumen HTML Baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > halaman web keduaku </title>
4 <meta keywords = “web, pemrograman”>
5 <meta name =”author” content =”eko win kenali”>
6 <meta name =”copyright” content =”2006”>
7 <link rel="stylesheet" href="../css/style.css" media="screen"
8 type="text/css">
9 </head>
10 <body>
11 </body>
12 </html>
b. Simpan dokumen dengan nama percobaan2_3.html dan simpanlah di dalam direktori
“pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum1” pada address bar browser, dan amati hasil ouput.
5. Merancang halaman web dengan meletakkan script elemen pada tag BODY untuk keperluan
Formating Page.
5.1. Membuat Heading
d. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head>
3 <title > Percobaan Heading </title>
4 </head>
5 <body>
6 <h1> Heading 1 </h1>
7 <h2> Heading 3 </h2>
8 <h3> Heading 3 </h3>
9 <h4> Heading 4 </h4>
10 <h5> Heading 5 </h5>
11 <h6> Heading 6 </h6>
12 </body>
13 </html>
e. Simpan dokumen dengan nama percobaan2_4.html dan simpanlah di dalam direktori “pwpraktikum2”.
f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.

13. 2012 - BPP – Design Web – MI 13
5.2. Membuat Paragraph
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head>
3 <title > Percobaan Paragraph </title>
4 </head>
5 <body>
<h1> Definisi HTML </h1>
6 <p>
7 HyperText Markup Language (HTML) adalah suatu bahasa pengkodean
8 (Script) yang digunakan untuk membangun sebuah halaman web.
9 </p>
10 </body>
11 </html>
b. Simpan dokumen dengan nama percobaan2_5.html dan simpanlah di dalam direktori “pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
5.3. Membuat List Items
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head><title > Percobaan List Items </title></head>
3 <body>
4 <h3> Definisi List Items Underlist List, Order List, dan Definition List </h3>
5 <h4> Under List </h4>
6 <ul>
7 <li>minggu</li>
8 <li>rabu</li>
9 <li>jum‟at</li>
10 <li>kamis</li>
11 <li>sabtu</li>
12 <li>selasa</li>
13 <li>senin</li>
14 </ul>
15 <h4> Order List </h4>
16 <ol>
17 <li>minggu</li>
18 <li>rabu</li>
19 <li>jum‟at</li>
20 <li>kamis</li>
21 <li>sabtu</li>
22 <li>selasa</li>
23 <li>senin</li>
24 </ol>
25 <h4> Definition List </h4>
26 <dl>
27 <dt>HTML
28 <dd>HyperText Markup Langguage is not Language Programming</dd>
29 </dt>
30 <dt>HTTP
31 <dd>HyperText Transfer Protocol is TCP/IP Protocol</dd>
32 </dt>
33 <dt>Internet
34 <dd>A network of network</dd>
35 </dt>

14. 2012 - BPP – Design Web – MI 14
36 <dt>TCP/IP
37 <dd>Internet protocol</dd>
38 </dt>
39 </dl>
40 </body>
41 </html>
b. Simpan dokumen dengan nama percobaan2_6.html dan simpanlah di dalam direktori “pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
5.4. Membuat Horizontal Rule
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head>
3 <title > Percobaan Horizontal Rule </title>
4 </head>
5 <body>
6 <h3> Garis dibawah ini dibuat dengan tag horizontal rule </h3>
7 <hr/>
8 </body>
9 </html>
b. Simpan dokumen dengan nama percobaan2_7.html dan simpanlah di dalam direktori “pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
5.5. Membuat Break Line
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head>
3 <title > Percobaan Break Line </title>
4 </head>
5 <body>
6 <h3> Percobaan membuat break line </h3>
7 Teks pertama <br/> Teks kedua <br/> Teks ketiga <br/> Teks keempat
8 </body>
9 </html>
b. Simpan dokumen dengan nama percobaan2_8.html dan simpanlah di dalam direktori “pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
5.6. Membuat Quotes / Identasi
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head>
3 <title > Percobaan Break Line </title>
4 </head>
5 <body>
6 <h3> Percobaan membuat Quotes/Identasi </h3>
7 <p>
8 <blockquotes>

15. 2012 - BPP – Design Web – MI 15
9 HyperText Markup Language (HTML) adalah suatu bahasa pengkodean
10 (coding/scripting) yang digunakan untuk membangun sebuah halaman
11 web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser,
12 kemudian browser akan menampilkan hasil ke pengguna.
13 </blockquote>
14 </p>
15 </body>
16 </html>
b. Simpan dokumen dengan nama percobaan2_9.html dan simpanlah di dalam direktori “pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
5.7. Memodifikasi Font pada teks
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
1 <html>
2 <head>
3 <title > Percobaan Memodifikasi font </title>
4 </head>
5 <body>
6 <h3> Percobaan memodifikasi font pada teks </h3>
7 <p>
8 <font face=”arial, verdana” color=”#FF3300” size=”12px”>
9 HyperText Markup Language (HTML) </font> adalah suatu bahasa
10 pengkodean (coding/scripting) yang digunakan untuk membangun
11 sebuah halaman web. Script HTML akan diinterpretasikan dan
12 diterjemahkan oleh browser, kemudian browser akan menampilkan hasil
13 ke pengguna.
14 </p>
15 </body>
16 </html>
b. Simpan dokumen dengan nama percobaan2_10.html dan simpanlah di dalam direktori “pwpraktikum2”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.
7. Tugas dan Pertanyaan
 Buatlah tutorial tentang lingkungan kerja Macromedia Dreamweaver.
 Buatlah dokumen HTML sederhana, yang mampu menampilkan identitas web sesuai dengan identitas anda. Kemudian lakukan analisa terhadap script dan hasil output pada halaman browser.
 Buatlah dokument dan script HTML untuk menampilkan halaman web yang memuat informasi berikut :
Profil Manajemen Informatika
Jurusan Ekonomi dan Bisnis Politeknik Negeri Lampung
Visi
Text here

16. 2012 - BPP – Design Web – MI 16
Misi
1. text item 1 here
2. text item 2 here
3. ….
Tujuan
 text item 1 here
 text item 2 here
 ….
Kompetensi Lulusan
Kompetensi 1
text item kompetensi 1
Kompetensi 1
text item kompetensi 1
….
Kompetensi n
text item kompetensi n
Nama / NPM / Jurusan
Simpanlah dokumen dengan format nama file sebagai berikut : tugas_p2_1_npm.html
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML sederhana
 Dokumen HTML lengkap dengan identitas website
 Dokumen tutorial lingkungan kerja Macromedia Dreamweaver
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan memformat halaman

17. 2012 - BPP – Design Web – MI 17
Minggu ke : 3
Unit Kompetensi : Client Side Script : Hypertext Markup Language (HTML)
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai elemen-elemen pada tag BODY HTML
2. Indikator Konerja
 Mampu menggunakan elemen untuk memformat Teks
3. Teori
Memformat teks dapat dibedakan ke dalam 2 cara pandang, yaitu (1) physical formatting dan (2) logical formatting. Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam hal memformat teks yang diklasifikasikan berdasarkan cara pandang tersebut, yaitu :
 BOLD
Bold adalah tag digunakan untuk menebalkan bentuk teks pada dokumen html. Elemen
Bold ditandai dengan tag <b>…</b>. Contoh :
Mata Kuliah <b> DESIGN WEB </b>
 ITALIC
Italic adalah tag digunakan untuk memiringkan bentuk teks pada dokumen html. Elemen
Italic ditandai dengan tag <i>…</i>. Contoh :
Mata Kuliah <i> DESIGN WEB </i>
 UNDERLINE
Underline adalah tag digunakan untuk membuat garis bawah pada teks dalam dokumen html. Elemen Underline ditandai dengan tag <u>…</u>.
Contoh :
Mata Kuliah <u> DESIGN WEB </u>
 BIG
Big adalah tag digunakan untuk merubah ukuran teks menjadi lebih besar dari ukuran normal dalam dokumen html. Elemen Big ditandai dengan tag <big>…</big>.
Contoh :
Mata Kuliah <big> DESIGN WEB </big>
 SMALL
Small adalah tag digunakan untuk merubah ukuran teks menjadi lebih kecil dari ukuran normal dalam dokumen html. Elemen Small ditandai dengan tag <small>…</small>.
Contoh :
Mata Kuliah <small> DESIGN WEB </small>
 STRIKE
Strike adalah tag digunakan untuk memberi garis ditengah teks dalam dokumen html. Elemen Strike ditandai dengan tag <strike>…</strike>.
Contoh :
Mata Kuliah <strike> DESIGN WEB </strike>
 SUPERSCRIPT
Superscript adalah tag digunakan untuk mengubah teks ke bentuk superscript text dalam dokumen html. Elemen Superscript ditandai dengan tag ^….
Contoh :
E=MC ²

18. 2012 - BPP – Design Web – MI 18
 SUBSCRIPT
Subscript adalah tag digunakan untuk mengubah teks ke bentuk subscript text dalam dokumen html. Elemen Subscript ditandai dengan tag _….
Contoh : H₂O
 CENTER
Center adalah tag digunakan untuk memformat teks menjadi rata tengah dalam dokumen html. Elemen Center ditandai dengan tag <center>…</center>.
Contoh :
<center>SAYA MENGAMBIL KULIAH DESIGN WEB </center>
 STRONG
Strong adalah tag yang tugas dan fungsinya sama dengan tag <b>, digunakan untuk menebalkan bentuk teks pada dokumen html. Elemen Strong ditandai dengan tag
<strong></strong>. Contoh :
SAYA MENGAMBIL KULIAH <strong>DESIGN WEB </strong>
 EM
EM adalah tag yang tugas dan fungsinya sama dengan tag <i>, digunakan untuk memiringkan bentuk teks pada dokumen html. Elemen EM ditandai dengan tag
<em></em>. Contoh :
SAYA MENGAMBIL KULIAH <em>DESIGN WEB </em>
 INS
INS adalah tag yang tugas dan fungsinya sama dengan tag <u>, digunakan untuk membuat garis bawah pada teks dalam dokumen html. Elemen INS ditandai dengan tag <ins></ins>. Contoh :
SAYA MENGAMBIL KULIAH <ins>DESIGN WEB </ins>
 DEL
DEL adalah tag yang tugas dan fungsinya sama dengan tag <strike>, digunakan untuk memberi garis ditengah teks dalam dokumen html. Elemen DEL ditandai dengan tag
<del></del>. Contoh :
SAYA MENGAMBIL KULIAH <del>DESIGN WEB </del>
 PRE
PRE adalah tag yang digunakan untuk menampilkan teks sesuai format aslinya dalam dokumen html. Elemen PRE ditandai dengan tag <pre>…</pre>.
Contoh :
<p><pre>
To run web applications,you need a web server. A web server is software that serves files in response to requests from web browsers.
</pre></p>
 ANCHOR
Anchor adalah tag yang digunakan untuk menentukan hyperlink dalam document HTML. Elemen Anchor ditandai dengan tag <a>…</a>.
Contoh :
<a href=”Hyperlink”> Klik Saya Sekarang </a>
Keterangan :
• Hyperlink : Link Address
• Absolute Address : merupakan full internet address (URL) yang meliputi protocol, network-location, path dan filename. Contoh: http ://www.yahoo.com/index.html
• Relatif Address : URL yang tidak menyebutkan protocol dan network location (hanya
path dan nama filenya). Contoh : ./content/profil.html
• Section Address : merupakan hyperlink ke section tertentu dalam satu dokumen.
Contoh : #namesection

19. 2012 - BPP – Design Web – MI 19
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), Google
Chrome, dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori : “praktikum3”, didalam direktori aktif web server (direktori “pw”).
2. Merancang halaman web dengan meletakkan script elemen pada tag BODY untuk keperluan
Formating Teks.
2.1. Menebalkan bentuk Huruf/teks menggunakan tag <b> dan atau <strong>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3
<title > Percobaan menebalkan bentuk Huruf/Teks </title>
4 </head>
5 <body>
6 <h2> Percobaan Menebalkan Bentuk Huruf/Teks </h2>
7 <hr/>
8 <p>
9 Berdasarkan cara pandang dimana sebuah script di interpretasikan, script
10 dibedakan menjadi 2 macam, yaitu <b>client-side script</b> dan
11 <strong>server-side script </strong>.
12 </p>
13 </body>
14 </html>
b. Simpan dokumen dengan nama percobaan3_1.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.
2.2. Memiringkan bentuk Huruf/teks menggunakan tag <i> dan atau <em>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > Percobaan memiringkan bentuk Huruf/Teks </title>
4 </head>
5 <body>
6 <h2> Percobaan Memiringkan Bentuk Huruf/Teks </h2>
7 <hr/>
8 <p>
9 Berdasarkan cara pandang dimana sebuah script di interpretasikan, script
10 dibedakan menjadi 2 macam, yaitu <i>client-side script</i> dan
11 <em>server-side script </em>.
12 </p>
13 </body>
14 </html>

20. 2012 - BPP – Design Web – MI 20
b. Simpan dokumen dengan nama percobaan3_2.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.
2.3. Membuat garis bawah pada Huruf/teks menggunakan tag <u> dan atau <ins>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > Percobaan membuat garis bawah pada Huruf/Teks </title>
4 </head>
5 <body>
6 <h2> Percobaan Membuat Garis Bawah pada Huruf/Teks </h2>
7 <hr/>
8 <p>
9 Berdasarkan cara pandang dimana sebuah script di interpretasikan, script
10 dibedakan menjadi 2 macam, yaitu <u>client-side script</u> dan
11 <ins>server-side script </ins>.
12 </p>
13 </body>
14 </html>
b. Simpan dokumen dengan nama percobaan3_3.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.
2.4. Membuat garis ditengah Huruf/teks menggunakan tag <strike> dan atau <del>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > Percobaan membuat garis ditengah Huruf/Teks </title>
4 </head>
5 <body>
6 <h2> Percobaan Membuat Garis ditengah Huruf/Teks </h2>
7 <hr/>
8 <p>
9 Berdasarkan cara pandang dimana sebuah script di interpretasikan, script
10 dibedakan menjadi 2 macam, yaitu <strike>client-side script</strike> dan
11 <del>server-side script </del>.
12 </p>
13 </body>
14 </html>
b. Simpan dokumen dengan nama percobaan3_4.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.

21. 2012 - BPP – Design Web – MI 21
2.5. Memodifikasi bentuk fisik huruf menggunakan tag <big>, <small>, <sup>, <sub> dan
<center>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > Percobaan memodifikasi bentuk fisik Huruf/Teks </title>
4 </head>
5 <body>
<h2> Percobaan Memodifikasi Bentuk Fisik Huruf/Teks </h2>
6 <hr/>
7 <p>
8 Berdasarkan <big>cara pandang</big> dimana sebuah script di
9 interpretasikan, <small>script dibedakan menjadi 2 macam, yaitu client-
10 side script dan server-side script </small>.
11 <center>Apakah benar saya telah berada di tengah halaman</center>
12 <br>
13 Rumus kimia air adalah H₂O
14 .<br>
15 Rumus Enstain adalah E=MC²
16 </p>
17 </body>
</html>
b. Simpan dokumen dengan nama percobaan3_5.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.
2.6. Menampilkan teks sesuai dengan format aslinya, menggunakan tag <pre>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > Percobaan tag PRE </title>
4 </head>
5 <body>
<h2> Percobaan tag PRE </h2>
6 <hr/>
7 <pre>
8 To run web applications,you need a web server.
9 A web server is software that serves files in response to
10 requests from web browsers.
11 </pre>
12 </body>
13 </html>
b. Simpan dokumen dengan nama percobaan3_6.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.
2.7. Memformat teks sebagai hyperlink, menggunakan tag anchor <a>
a. Buatlah dokumen HTML baru dan Ketiklah script berikut :
1 <html>
2 <head>
3 <title > Percobaan hyperlink </title>
4 </head>
5 <body>
6 <h2> Percobaan thyperlink </h2>
7 <hr/>

22. 2012 - BPP – Design Web – MI 22
8 <pre>
9 Praktikum pada hari ini, saya telah membuat halaman-halaman sebagai
10 berikut :
11
12 <a href=”percobaan3_1.html” target=”_blak”> percobaan3_1</a><br>
13 <a href=”percobaan3_2.html” target=”_blak”> percobaan3_2</a><br>
14 <a href=”percobaan3_3.html” target=”_blak”> percobaan3_3</a><br>
15 <a href=”percobaan3_4.html” target=”_blak”> percobaan3_4</a><br>
16 <a href=”percobaan3_5.html” target=”_blak”> percobaan3_5</a><br>
17 <a href=”percobaan3_6.html” target=”_blak”> percobaan3_6</a><br>
18 <a href=”percobaan3_7.html” target=”_blak”> percobaan3_7</a><br>
19
20 Dan berdasarkan beberapa percobaan diatas saya telah menguasai
21 penggunaan tag-tag HTML untuk keperluan formatting text.
22 </pre>
23 </body>
24 </html>
b. Simpan dokumen dengan nama percobaan3_7.html dan simpanlah di dalam direktori “pwpraktikum3”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum3” pada address bar browser, dan amati hasil ouput.
7. Tugas dan Pertanyaan
Modifikasilah tugas praktikum 3 (tugas_p3_1_npm.html) dengan memanfaatkan elemen-elemen formatting teks. Kemudian hasil modifikasi di simpan dengan nama tugas_p3_2_npm.html
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan memformat teks
 Dokumen HTML dan halaman web untuk keperluan informasi program studi dengan teks terformat.

23. 2012 - BPP – Design Web – MI 23
Minggu ke : 4
Unit Kompetensi : Client Side Script : Hypertext Markup Language (HTML)
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai elemen-elemen pada tag BODY HTML
2. Indikator Konerja
 Mampu menggunakan elemen Multimedia
 Mampu menggunakan elemen grouping
3. Teori
A. Elemen-elemen multimedia (Importing)
Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam menampilkan format multimedia (image dan video), yaitu :
 IMAGE
image adalah tag digunakan mendefinisikan sebuah image pada dokumen html. Elemen image ditandai dengan tag <img>…</img>.
Contoh :
<img src=“relatif-addresess“ />
Keterangan :
Relatif Address - URL yang tidak menyebutkan protocol dan network location (hanya path
dan nama filenya). Contoh : “image1.jpg” atau “/images/image1.jpg”
 APPLET
Applet adalah tag digunakan mendefinisikan file-file applet (java) ke dalam sebuah dokumen html. Elemen Applet ditandai dengan tag <applet>…</applet>.
Contoh :
<applet code=" relatif-addresess " codebase = "./flash "></applet>
Keterangan :
Relatif Address - URL yang tidak menyebutkan protocol dan network location (hanya path
dan nama filenya). Contoh : “flashfile.fla” atau “/flash/movie.swf”
 OBJECT
Object adalah tag digunakan mendefinisikan file-file objek multimedia (flash file) ke dalam sebuah tabel pada dokumen html. Elemen object ditandai dengan tag <object>…</object>.
Contoh :
<object >
<param name="movie" value="flashku.fla" />
<param name="quality" value="high" />
<embed src="flashku.fla" quality="high" type="application/x-shockwave-flash"></embed>
</object>
B. Elemen-elemen GROUPING
Elemen grouping memiliki fungsi untuk mengelompokkan atau mengisolasi data/informasi/elemen-tag didalam halaman web. Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam hal pengelompokan elemen-elemen (tag) lain, yaitu :

24. 2012 - BPP – Design Web – MI 24
 SPAN
Span adalah tag digunakan mengelompokkan elemen-elemen kategori text formatting pada dokumen html. Elemen Span ditandai dengan tag <span>…</span>.
Contoh :
<span style="font-size:25; color:#FF3300">
baris ini dalam span dengan warna orange.
</span>
 DIV
DIV adalah tag digunakan mengelompokkan elemen-elemen kategori page formating dan text formatting pada dokumen html. Elemen DIV ditandai dengan tag <div>…</div>.
Contoh :
<div style="font-size:25; color:#FF3300">
<b>DIV 1</b>. Area ini adalah DIV Pertama.
</div>
<div style="font-size:25; color:#CCCCCC">
<b>DIV 2</b>. Area ini adalah DIV kedua.
</div>
 TABLE
Elemen Table digunakan untuk membuat tabel di dalam halaman web. Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam hal merancang dan membangun sebuah tabel, yaitu :
Keterangan :
• Table, tag untuk mendefinisikan sebuah tabel pada dokumen html. <table>…</tabel>.
• Table Row, tag untuk mendefinisikan sebuah baris atau lebih dalam sebuah tabel pada dokumen html. <tr>…</tr>.
• Table Column, tag untuk mendefinisikan sebuah kolom atau lebih dalam sebuah tabel pada dokumen html. <td>…</td>.
• Column Title, tag untuk mendefinisikan judul kolom dalam sebuah tabel pada dokumen html. <th>…</th>.
Contoh :
<table>
<tr>
<th>No</th><th>Nama</th>
</tr>
<tr>
<td>1.</td><td>Surya Darma</td>
</tr>
<tr>
<td>2.</td><td>Sinta Sari</td>
</tr>
</table>

25. 2012 - BPP – Design Web – MI 25
Menyatukan/Menggabungkan Baris / Kolom :
Menyatukan 2 baris <tr> :
- Atribut Rowspan:
- Contoh : rowspan=“2”
Menyatukan 2 kolom <td> :
- Atribut Colspan
- Contoh : colspan=“2”
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), Google
Chrome, dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori : “praktikum4”, didalam direktori aktif web server (direktori “pw”).
2. Merancang halaman web dengan meletakkan script elemen pada tag BODY untuk keperluan
Importing Multimedia
2.1. Menampilkan image/gambar pada halaman web
a. Persiapkan file gambar format (jpg/jpeg). Dan letakkan di dalam direktori yang sama dengan file html.
b. Gantilah nama / rename file gambar tersebut dengan nama “gambar”
c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script berikut diantara tag <body>..</body>:
<img src=”gambar.jpg”/>
<img src=”gambar.jpg” width=”200px” height=”200px” title=”ini gambar pertamaku”/>
e. Simpan dokumen dengan nama percobaan4_1.html dan simpanlah di dalam direktori “pwpraktikum4”.
f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.
2.2. Menampilkan Java Applet pada halaman web
a. Persiapkan file java applet. (download). Dan letakkan di dalam direktori yang sama dengan file html.
b. Gantilah nama / rename file applet tersebut dengan nama “jappletku”
c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script berikut diantara tag <body>..</body>:
<applet code="jappletku " codebase = "./flash "></applet>
e. Simpan dokumen dengan nama percobaan4_2.html dan simpanlah di dalam direktori “pwpraktikum4”.
f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.

26. 2012 - BPP – Design Web – MI 26
2.3. Menampilkan Java Applet pada halaman web
a. Persiapkan file Flash/Swish. (download). Dan letakkan di dalam direktori yang sama dengan file html.
b. Gantilah nama / rename file applet tersebut dengan nama “flashku.fla”
c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script berikut diantara tag <body>..</body>:
<object >
<param name="movie" value="flashku.fla" />
<param name="quality" value="high" />
<embed src="flashku.fla" quality="high" type="application/x-shockwave- flash"></embed>
</object>
e. Simpan dokumen dengan nama percobaan4_3.html dan simpanlah di dalam direktori “pwpraktikum4”.
f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.
3. Merancang halaman web dengan meletakkan script elemen pada tag BODY untuk keperluan
Grouping
3.1. Membuat grouping dengan menggunakan tag <span>
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<span style=”width:100%; padding:5px; border:1px solid #CCCCCC;”>
<h2>Span 1</h2>
<p>Teks ini berada pada area tag span<p>
</span>
<br/>
<span style=”width:50%; padding:5px; border:1px solid #CCCCCC;”>
<h2>Span 2</h2>
<p>Teks ini berada pada area tag span<p>
</span>
c. Simpan dokumen dengan nama percobaan4_4.html dan simpanlah di dalam direktori “pwpraktikum4”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.
3.2. Membuat grouping dengan menggunakan tag <div>
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<div style=”width:100%; padding:5px; border:1px solid #CCCCCC;”>
<h2>DIV 1</h2>
<p>Teks ini berada pada area tag div<p>
</div>
<br/>
<div style=”width:50%; padding:5px; border:1px solid #CCCCCC;”>
<h2>DIV 2</h2>
<p>Teks ini berada pada area tag div<p>
</div>
c. Simpan dokumen dengan nama percobaan4_5.html dan simpanlah di dalam direktori “pwpraktikum4”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.

27. 2012 - BPP – Design Web – MI 27
3.3. Membuat grouping dengan menggunakan tag <table>
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<h2>Contoh Tabel</h2>
<TABLE width=”100%” cellpadding=”0” cellspacing=”0” border=”1”>
<tr><th>No.</th><th>NPM</th><th>Nama Lengkap</th><th>email</th></tr>
<tr><td>1</td><td>11210001</td><td>Reno</td><td>r2reno@gmail.com</td></tr>
<tr><td>2</td><td>11210002</td><td>Budiono</td><td>onobudi@gmail.com</td></tr>
</TABLE>
c. Simpan dokumen dengan nama percobaan4_6.html dan simpanlah di dalam direktori “pwpraktikum4”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.
7. Tugas dan Pertanyaan
1) Buatlah satu dokumen HTML untuk menampilkan informasi seperti layout dibawah ini
(simpan file dengan nama : tugas4_1_npm.html):
2) Buatlah satu dokumen HTML untuk menampilkan informasi seperti layout dibawah ini
(simpan file dengan nama : tugas4_2_npm.html):
3) Buatlah satu dokumen HTML untuk menampilkan tabel seperti layout dibawah ini (simpan file dengan nama : tugas4_3A_npm.html, tugas4_3B_npm.html, tugas4_3C_npm.html dan tugas4_3D_npm.html):

28. 2012 - BPP – Design Web – MI 28
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan importing multimedia
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan grouping

29. 2012 - BPP – Design Web – MI 29
Minggu ke : 5
Unit Kompetensi : Client Side Script : Hypertext Markup Language (HTML)
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai elemen-elemen pada tag BODY HTML
2. Indikator Konerja
 Mampu menggunakan elemen Form
 Mampu menggunakan HTML Input Elemen
3. Teori
A. Elemen Form
Elemen form berfungsi sebagai kerangka kerja/framework untuk HTML input elemen
(pengolahan data). Bentuk umum elemen form adalah sebagai berikut :
<form method=“metode” action=“relatif-addresess”>
…………..
//HTML input/textarea/select elemen
…………..
</form>
Keterangan :
• Method : GET / POST
• Relatif Address - URL yang tidak menyebutkan protocol dan network location (hanya path
dan nama filenya). Contoh : ./content/profil.html
B. HTML Input Elemen
Didalam sebuah form, elemen-elemen input HTML diletakkan, Berfungsi untuk menerima inputan dari user. Tag yang digunakan adalah <input/>, <textarea></textarea> dan
<select></select>.
 INPUT
Input adalah sebuah elemen form yang digunakan menerima masukan dari user dalam sebuah form. Elemen input terdiri dari berbagai macam type, berikut ini adalah daftar type elemen input yang umum digunakan:
No Type Sintak Type
1
Button
<input type=“button”/>
2
Text
<input type=“text”/>
3
Checkbox
<input type=“checkbox”/>
4
Radio
<input type=“radio”/>
5
Submit
<input type=“submit”/>
6
Reset
<input type=“reset”/>
 TEXTAREA
textarea adalah elemen input text dengan daya tampung text masukan berukuran besar. Contoh :
<textarea cols=“12” rows=“5”/> </textarea>
 SELECT
Select adalah elemen input HTML yang digunakan menampilkan combo pilihan. dan dari combo pilihan tersebut, user wajib memilih salah satu diantara pilihan yang disajikan.

30. 2012 - BPP – Design Web – MI 30
Contoh :
<select name=“pilihpekerjaan” size=“1”>
<option value=“1”>items1</option>
<option value=“2”>items2</option>
……..
</select>
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), Google
Chrome, dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori : “praktikum5”, didalam direktori aktif web server (direktori “pw”).
2. Membuat form sederhana 1
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<form name=”form1” methode=”GET” action=”#” />
Masukkan nama :<br>
<input type=”text” name="nama" size=”30” maxlength=”30” /><br>
Pilih Jenis Kelamin : <br>
<input type=”radio” name="sex" size=”1” value=”L” /> Laki-Laki
<input type=”radio” name="sex" size=”1” value=”P” />Perempuan<br>
Masukkan email : <br>
<input type=”text” name="email" size=”50” maxlength=”50” /><br>
<input type=”submit” value=”Simpan” />
</form>
c. Simpan dokumen dengan nama percobaan5_1.html dan simpanlah di dalam direktori
“pwpraktikum5”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum5” pada address bar browser, dan amati hasil ouput.
3. Membuat form sederhana 2
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<form name=”form2” methode=”GET” action=”#” />
Masukkan nama :<br>
<input type=”text” name="nama" size=”30” maxlength=”30” /><br>
Masukkan alamat : <br>
<textarea name="alamat" cols="12" rows="4"></textarea><br>
<input type=”submit” value=”Simpan” />
</form>

31. 2012 - BPP – Design Web – MI 31
c. Simpan dokumen dengan nama percobaan5_2.html dan simpanlah di dalam direktori
“pwpraktikum5”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum5” pada address bar browser, dan amati hasil ouput.
4. Membuat form sederhana 3
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<form name=”form3” methode=”GET” action=”#” />
Pilih Pekerjaan: <br>
<select name=”job” size=”1”>
<option value="1" >Pegawai Negeri Sipil</option>
<option value="2" >TNI/POLRI</option>
<option value="3" >Pegawai Swasta</option>
<option value="4" >Wiraswasta</option>
</select>
</form>
c. Simpan dokumen dengan nama percobaan5_3.html dan simpanlah di dalam direktori
“pwpraktikum5”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum5” pada address bar browser, dan amati hasil ouput.
5. Membuat form sederhana 4
a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<form name=”form4” methode=”GET” action=”#” />
Username :<br>
<input type=”text” name="username" size=”30” maxlength=”30” /><br>
Password : <br>
<input type=”password” name="password" size=”30” maxlength=”30” /><br>
<input type=”submit” value=”Login” />
</form>
c. Simpan dokumen dengan nama percobaan5_4.html dan simpanlah di dalam direktori
“pwpraktikum5”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum5” pada address bar browser, dan amati hasil ouput.
7. Tugas dan Pertanyaan
1) Buatlah satu dokumen HTML untuk menampilkan form registrasi data mahasiswa baru dengan format layout bebas (simpan file dengan nama : Tugas5_1_npm.html):
2) Buatlah satu dokumen HTML untuk menampilkan form registrasi data pegawai dengan format layout bebas (simpan file dengan nama : Tugas5_2_npm.html):
3) Buatlah satu dokumen HTML untuk menampilkan form login (seperti pada gambar) untuk sistem informasi akademik. dengan format layout seperti pada gambar dibawah ini (simpan file dengan nama : Tugas5_3_npm.html):

32. 2012 - BPP – Design Web – MI 32
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan importing multimedia
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan grouping

33. 2012 - BPP – Design Web – MI 33
Minggu ke : 6
Unit Kompetensi : Client Side Script : Casecading Style Sheet (CSS)
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai Konsep Dasar Script Casecading Style Sheet (CSS)
 Menguasai desain layout web dengan metode inline style sheet, outline style sheet dan crossline style sheet.
2. Indikator Konerja
 Mampu menjelaskan konsep dasar Script Casecading Style Script (CSS)
 Mampu mendesain layout halaman dengan metode inline style sheet
 Mampu mendesain layout halaman dengan metode outline style sheet
 Mampu mendesain layout halaman dengan metode crossline style sheet
3. Teori
Pengantar Casecading Style Sheet (CSS) :
• CSS, merupakan fitur yang sangat penting dalam hal merancang atau mendesain halaman
web (HTML).
• CSS merupakan teknik dan mekanisme untuk mendesain, mengontrol dan mengelola style
elemen-elemen tag HTML.
• CSS mendeskripsikan bagaimana interface dokumen HTML di layar monitor.
• Dengan CSS, efek-efek spesial di dalam halaman web bisa disajikan.
• CSS technology support pada hampir semua web Browser. Karena CSS telah di standar-kan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.
• Secara teoritis CSS, dapat disertakan (embeded) dalam dokumen html untuk mendukung
desain style halaman web.
CSS dalam sebuah dokumen HTML, dapat disertakan dengan 3 mekanisme (metode), yaitu :
1) Inline Style Sheet
suatu mekanisme penulisan script style sheet (CSS) langsung pada elemen-elemen tag HTML. Penggunaan Inline style ditandai dengan penulisan atribut „style‟ pada sebuah elemen tag HTML.
2) Outline Style Sheet
suatu mekanisme pengelompokan dan penulisan script style sheet (CSS) pada area tersendiri. Penggunaan outline style ditandai dengan penulisan tag <style>..</style> didalam area tag <head></head>.

34. 2012 - BPP – Design Web – MI 34
3) Crossline Style Sheet
Suatu mekanisme pengelompokan dan penulisan script style sheet (CSS) pada file tersendiri (*.CSS), kemudian file CSS tersebut disertakan (embeded) ke dalam halaman web (file html) yang menggunakannya.
Penggunaan Crossline style ditandai dengan penulisan tag <link> didalam area tag
<head></head>.
Konsep dasar penulisan script CSS dan istilah-istilah penting :
 Style Rule
Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua
<H2> di tampilkan dengan warna orange.
 Selector, Property dan Value
Selector adalah sebuah nama tag HTML, property adalah properti-properti yang dimiliki oleh sebuah selector, dan value adalah nilai dari sebuah property.
Contoh :

35. 2012 - BPP – Design Web – MI 35
Selector { property:value;
property:value;
…………….
}
H1 {
}
font-size:100%; font-weight:bold; color:#000000;
 Komentar
Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan mengapit selector berserta deklarasinya dengan
tanda /* …. */
Contoh :
/* H1 { font-size:100%; font-weight:bold; } */
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), Google
Chrome, dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori : “praktikum6”, didalam direktori aktif web server (direktori “pw”).
2. Menggunakan Inline Style Sheet pada elemen <body>, <h1> dan <p>.
a. Buatlah dokumen HTML lengkap dengan strukturnya dan Ketiklah script berikut :
<html>
<head>
<title> Belajar CSS </title>
</head>
<body style=” background-color:#333333; color:#F1F1F1; font-size:100%; ”>
Elemen H1 Standar <br>
<h1> Heading 1 </h1>
Elemen H1 dimodifikasi dengan Stylesheet (CSS) <br>
<h1 style=”color:#FFCC00; font-weight:bold; font-size:140%;“> Heading 1
</h1>
<p style=” font-size:100%; color:#cccccc; line-height:12px; width:400px; “>
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</p>
</body>
</html>
b. Simpan dokumen dengan nama percobaan6_1.html dan simpanlah di dalam direktori
“pwpraktikum6”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum6” pada address bar browser, dan amati hasil ouput.

36. 2012 - BPP – Design Web – MI 36
3. Menggunakan Inline Style Sheet untuk mendesain menu a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:
<div style=" width:100%; padding:5px; border:none; height:30px; background-color:
#003366; float-left; margin:0; color:#FFFFFF; ">
<ul style=" margin:0; padding:0; list-style:none; ">
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #0066CC; color:#FFFFFF; text-align:center; ">Home</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #0066CC; color:#FFFFFF; text-align:center; ">Profile</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #0066CC; color:#FFFFFF; text-align:center; ">Produk</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #0066CC; color:#FFFFFF; text-align:center; ">Kontak</li>
</ul>
</div>
c. Simpan dokumen dengan nama percobaan6_2.html dan simpanlah di dalam direktori
“pwpraktikum6”.
d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum6” pada address bar browser, dan amati hasil
4. Menggunakan Outline Style Sheet pada elemen <body>, <h1> dan <p>.
a. Buatlah dokumen HTML lengkap dengan strukturnya dan Ketiklah script berikut :
<html>
<head>
<title> Belajar CSS (OUTLINE STYLESHEET) </title>
<style>
Body { background-color:#333333; color:#F1F1F1; font-size:100%; } H1 { color:#FFCC00; font-weight:bold; font-size:140%; }
P { font-size:100%; color:#cccccc; line-height:12px; width:400px; }
</style>
</head>
<body>
<h1> HTML </h1>
<p>
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</p>
</body>
</html>
b. Simpan dokumen dengan nama percobaan6_3.html dan simpanlah di dalam direktori “pwpraktikum6”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum6” pada address bar browser, dan amati hasil

37. 2012 - BPP – Design Web – MI 37
5. Menggunakan Outline Style Sheet untuk mendesain menu a. Buatlah dokumen HTML lengkap dengan strukturnya
b. Ketiklah script dibawah ini, letakkan didalam <head></head>:
<style>
#model {
width:100%; padding:5px; border:none; background-color:#000000; float-left;
color:#FFFFFF; text-align:center; font-family:arial; font-size:120%;
}
ul { margin:0; padding:0; list-style:none; }
li { float: left; list-style:none; margin:3px; padding:2px; width:100px; background- color: #0066CC; color:#FFFFFF; text-align:center;
}
</style>
c. Ketiklah script berikut diantara tag <body>..</body>:
<div id=”model”>
<ul>
<li>Home</li>
<li >Profile</li>
<li>Produk</li>
<li >Kontak</li>
</ul>
</div>
d. Simpan dokumen dengan nama percobaan6_4.html dan simpanlah di dalam direktori
“pwpraktikum6”.
e. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum6” pada address bar browser, dan amati hasil
6. Menggunakan Crossline Style Sheet : Merancang dokumen CSS sederhana dan menggunakannya dalam dokumen HTML.
a. Buatlah dokumen CSS baru dan ketikkan script css berikut ini
/* CSS Document */
Body { background-color:#333333; color:#F1F1F1; font-size:100%; margin:0;
padding:0; font-family:Arial, Helvetica, sans-serif;}
#mainarea {width:80%; margin:0; margin:auto; padding:0; background-color:none;
height:100%;}
#leftarea {width:25%; margin:5px; float:left; background-color:#000000;
padding:5px;}
#rightarea {width:72%; margin:5px; float:right;} Div { margin-bottom:5px;}
#blok1 { background-color:#1226BA; color:#F1F1F1; padding:10px; width:100%;
margin:0;}
#blok2 { background-color:#268006; color:#F1F1F1; padding:10px; width:100%;
margin:0;}
#blok3 { background-color:#D6E304; color:#000000; padding:10px; width:100%;
margin:0;}
#model {
height:auto; width:100%; padding:0; border:none; background-color:none; float- left; color:#FFFFFF; text-align:center; font-family:arial; font-size:120%;
}
ul { margin:0; padding:0; list-style:none; }
li { float: left; list-style:none; margin:3px; padding:2px; width:97%; background- color: #0066CC; color:#FFFFFF; text-align:center;
}

38. 2012 - BPP – Design Web – MI 38
b. Simpanlah Dokumen CSS diatas dengan nama style_1.css
c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script HTML berikut:
<html>
<head>
<title> Belajar CSS (CROSSLINE STYLESHEET) </title>
<link href="style_1.css" type="text/css" media="screen" rel="stylesheet" />
</head>
<body>
<div id="mainarea" >
<div id="leftarea">
<div id="model">
<ul>
<li>Home</li>
<li >Profile</li>
<li>Produk</li>
<li >Kontak</li>
</ul>
</div>
</div>
<div id="rightarea">
<div id="blok1">
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</div>
<div id="blok2">
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</div>
<div id="blok3">
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna.
</div>
</div>
</body>
</html>
e. Simpan dokumen dengan nama percobaan6_5.html dan simpanlah di dalam direktori
“pwpraktikum6”.
f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum6” pada address bar browser, dan amati hasil

39. 2012 - BPP – Design Web – MI 39
7. Tugas dan Pertanyaan
Buatlah sebuah homepage dengan memanfaatkan file CSS yang anda rancang untuk kebutuhan desain homepage tersebut. Ketentuan.
1) Simpan dokumen HTML dengan nama (tugas6_1_npm.html)
2) Simpan dokumen CSS dengan nama (style_2.css).
3) Dengan Layout Homepage adalah sebagai berikut :
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML yang dilengkapi dengan desain layout menggunakan Casecading style sheet.
 Dokumen HTML yang dilengkapi dengan desain layout menggunakan berbagai metode scripting pada Casecading style sheet.

40. 2012 - BPP – Design Web – MI 40
Minggu ke : 7
Unit Kompetensi : Client Side Script : JAVAScript
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai konsep dasar JAVAScript
2. Indikator Konerja
 Mampu menjelaskan konsep dasar pemrograman JAVAScript
 Mampu membuat script sederhana dengan JAVAScript
 Mampu membuat script untuk objeck dan form dengan JAVAScript
3. Teori
A. Sekilas Tentang Javascript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server.
Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
B. Struktur Dokumen Javascript
Secara umum struktur dari JavaScript adalah sebagai berikut :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.
C. Javascript Pemrograman Berorientasi Objek
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.
Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”)

41. 2012 - BPP – Design Web – MI 41
D. Letak Kode Program Javascript dalam dokumen HTML
Kode program (script) Javascript dalam dokumen HTML diletakkan pada :
 area Head
 Dan bias juga pada area Body (jarang digunakan).
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :
Dengan nama direktori : “praktikum7”, didalam direktori aktif web server (direktori “pw”).
2. Dasar-dasar pemrograman javascript
Pemakaian alert sebagai property window
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD><TITLE>Alert Box</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.alert("Ini merupakan pesan untuk Anda");
//-->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_1.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Pemakaian metode dalam objek.
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD><TITLE>Skrip JavaScript</TITLE></HEAD>
<BODY>
Percobaan memakai JavaScript:<BR>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Selamat Mencoba JavaScript<BR>");
document.write("Semoga sukses!");
//-->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_2.html dan simpanlah di dalam direktori “pwpraktikum7”.

42. 2012 - BPP – Design Web – MI 42
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Penggunaan Prompt
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD><TITLE>Pemasukan Data</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama Anda?","Masukkan nama anda");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_3.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Pembuatan fungsi dan cara pemanggilannya
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD>
<SCRIPT language="Javascript">
function pesan(){
alert ("memanggil javascript lewat body onload")
}
</SCRIPT>
<BODY onload=pesan()>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_4.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Operasi dasar aritmatika
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD>
<SCRIPT language="Javascript">
function test (val1,val2)
{
document.write("<br>"+"Perkalian : val1*val2 "+"<br>") document.write(val1*val2) document.write("<br>"+"Pembagian : val1/val2 "+"<br>") document.write(val1/val2) document.write("<br>"+"Penjumlahan : val1+val2 "+"<br>") document.write(val1+val2) document.write("<br>"+"Pengurangan : val1-val2 "+"<br>") document.write(val1-val2)
document.write("<br>"+"Modulus : val1%val2 "+"<br>")

43. 2012 - BPP – Design Web – MI 43
document.write(val1%val2)
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="arithmetic" onclick=test(9,4)>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_5.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Operasi relational
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript"> function test () { val1=window.prompt("Nilai I :") val2=window.prompt("Nilai II :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2) document.write("<br>"+"val1!=val2"+"<br>") document.write(val1!=val2) document.write("<br>"+"val1&gtval2"+"<br>") document.write(val1>val2) document.write("<br>"+"val1&ltval2"+"<br>") document.write(val1<val2) }
</SCRIPT>
<BODY>
<input type="button" name="button1" value="relational" onclick=test()>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_6.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Seleksi kondisi (if..else)
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = ""; if (nilai >= 60) hasil = "Lulus";

44. 2012 - BPP – Design Web – MI 44
else
hasil = "Tidak Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_7.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Penggunaan operator switch untuk seleksi kondisi
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function test ()
{
val1=window.prompt("Input Nilai (1-5):")
switch (val1)
{
case "1" : document.write("bilangan satu") break
case "2" : document.write("bilangan dua") break
case "3" : document.write("bilangan tiga") break
case "4" : document.write("bilangan empat") break
case "5" :
document.write("bilangan lima")
break default :
document.write("bilangan lainnya")
}
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="switch" onclick=test()>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_8.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.

45. 2012 - BPP – Design Web – MI 45
Pemakaian looping < for >
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
for (x=0;x<=10;x++)
document.write(x+"<br>")
// -->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_9.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Pemakaian looping < do..while >
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
var x=0 do{ document.write(x+"<br>") x++;
}
while (x<=10)
// -->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_10.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Pemakaian looping < while >
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
var x=0
while (x<=10){

46. 2012 - BPP – Design Web – MI 46
document.write(x+"<br>")
x++;
}
// -->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_11.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Pembuatan Form Input
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<html>
<head> </head>
<SCRIPT language="Javascript">
function test () {
var val1=document.kirim.T1.value if (val1%2==0) document.kirim.T2.value="bilangan genap" else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20"> MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1" onclick=test()>
</p>
</form>
</body>
</html>
b. Simpan dokumen dengan nama percobaan7_12.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
Pembuatan Form Button
a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :
<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function ubahWarnaLB(warna) {
document.bgColor = warna;
}
function ubahWarnaLD(warna) {
document.fgColor = warna;
}
//-->
</SCRIPT>
<H1>TES</H1>

47. 2012 - BPP – Design Web – MI 47
<FORM>
<INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Hijau" onClick = "ubahWarnaLB('GREEN')">
<INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Putih" onClick = "ubahWarnaLB('WHITE')">
<INPUT TYPE = "BUTTON"
VALUE = "Teks Kuning"
onClick = "ubahWarnaLD('YELLOW')">
<INPUT TYPE = "BUTTON" VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Dimodifikasi terakhir pada " +
document.lastModified);
//-->
</SCRIPT>
</BODY>
</HTML>
b. Simpan dokumen dengan nama percobaan7_13.html dan simpanlah di dalam direktori “pwpraktikum7”.
c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat
“localhost/pw/praktikum7” pada address bar browser, dan amati hasil ouput.
7. Tugas dan Pertanyaan
1) Buat halaman html untuk mengkonversi nilai angka menjadi nilai huruf dengan menggunakan javascript. Simpanlah dokumen dengan format nama file sebagai berikut : tugas_p7_1_npm.html
Konversi :
0-40 =E
41-55=D
56-60=C
61-65=BC
66-70=B
71-80=AB
81-100=A
2) Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan menggunakan javascript.
Contoh Tampilan :
Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau / ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan operasi arithmetic sesuai dengan tombol yang ditekan.
Simpanlah dokumen dengan format nama file sebagai berikut : tugas_p7_2_npm.html

48. 2012 - BPP – Design Web – MI 48
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan memformat halaman

49. 2012 - BPP – Design Web – MI 49
Minggu ke : 8
Unit Kompetensi : UTS
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai HTML & CSS
2. Indikator Konerja
 Mampu melakukan instalasi joomla
 Mampu memahami struktur joomla
3. Teori
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
7. Tugas dan Pertanyaan
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan memformat halaman

50. 2012 - BPP – Design Web – MI 50
Minggu ke : 9
Unit Kompetensi : Mengenal Joomla
Waktu : 240 menit
Tempat Laboratorium Komputer Software
1. Elemen Kompetensi
 Menguasai komponen-komponen joomla
2. Indikator Konerja
 Mampu melakukan instalasi joomla
 Mampu membuat category di joomla
3. Teori
CMS adalah software yang digunakan untuk membuat, mengubah dan mempublikasikan content ke dalam sebuah website. Fasilitas yang umumnya terdapat dalam CMS sangat banyak, terutama yang berkaitan dengan publikasi isi website, pengaturan halaman, pengubahan isi, pencarian dan lain-lain. Sebuah CMS, dapat berbentuk program yang sederhana, atau dapat juga merupakan suatu program kompleks yang terdiri dari berbagai modul-modul sesuai dengan fasilitas yang terdapat didalamnya.
Kita memerlukan CMS karena para pengelola atau pemilik website yang tidak mahir dalam menggunakan kode HTML dapat melakukan pembuatan, pengubahan dan publikasi content terhadap website-nya sendiri. CMS menyediakan framework manajemen proses yang dibutuhkan dalam pengembangan website yang menghendaki pengelolaan yang sering / dalam frekuensi yang tinggi.
Salah satu CMS yang banyak digunakaan adalah Joomla. Joomla merupakan perangkat lunak untuk manajemen konten web atau sering juga di sebut dengan CMS ( Content Management System ). Konten yang bisa di tangani Joomla antara lain publikasi web, mengedit web, menghapus web dan lain-lain. CMS saat ini semakin populer kemudahan dalam menggunakannya.
Dahulu jika kita ingin membuat web, kita harus bersusah payah belajar bahasa pemrograman web seperti ASP, PHP, dan Java. Dengan adanya CMS khususnya Joomla, orang awam dapat membuat web dengan mudah dan cepat. CMS yang sejenis Joomla banyak, antara lain Mamboo, PHPNuke, AuraCMS dan masih banyak yang lainnya.
4. Bahan dan Alat
 Personal Komputer
 Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), dll)
 Perangkat lunak bundling web server (yaitu: XAMPP)
 Perangkat lunak : Notepad atau Dreamweaver
5. Organisasi
 Mandiri (Perseorangan)
6. Prosedur Kerja
A. Installasi Joomla
Sebelumnya install web server, anda dapat menggunkan web server (lihat pertemuan 1). Setelah itu pastikan web server anda telah berjalan dengan normal.

51. 2012 - BPP – Design Web – MI 51
B. Install joomla
1. Letakkan installer joomla pada folder c://xampp/htdocs

52. 2012 - BPP – Design Web – MI 52
2. Extract installer tersebut dan sesuaikan nama foldernya, (pada contoh diatas menggunkan nama pelatihan)
3. Buka lah web browser, ketikkan url berikut http://localhost/pelatihan
Tentukan ilihan bahasa yang anda inginkan.
4. Selanjutnya pastikan pre installation joomla tidak ada masalah
7. Tugas dan Pertanyaan
8. Pustaka
Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.
9. Hasil Praktikum
 Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan memformat halaman