AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUT (8)

(1)

AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIK ROYAL KISARAN

PROGRAM STUDI MANAJEMEN INFORMATIKA

SATUAN ACARA PERKULIAHAN

PERTEMUAN - 1 :

TEKNOLOGI WEBPAGE

1

. Identitas

Matakuliah : Pemrograman Web 1

Kode Mata Kuliah :

Semester : 3 ( Tiga )

SKS Dan Jumlah Jam : 2 SKS, 2 x 45 menit Matakuliah

Pendukung : - Pemrograman Terstruktur

- Basis Data - Design Grafis Pendukung

Matakuliah : - Pemrograman Web 2

Dosen : Andri Nata, ST, M.Kom

Minggu Ke : 1 ( satu )

2

. Kompetensi

1. Unit Kompetensi : - Menjelaskan konsep dasar dan teknologi _Webpage

2. Elemen Kompetensi : - Menjelaskan tentang konsep WWW

-

Menjelaskan tentang web statis.

- Menjelaskan tentang web dinamis 3. Kriteria Kinerja : Mahasiswa mampu :

- Menjelaskan tentang konsep WWW

- Menjelaskan konsep dasar HTML - Menjelaskan pengertian browser - Menjelaskan pengertian editor - Mengenal Web Server

3. Proses Pembelajaran

(2)

KASI WAKTU ALAT/ BAHAN (Kriteria Unjuk Kerja) DOSEN MAHASISWA

1 15’  Penciptaan

ketertiban suasana belajar

 Berdoa

bersama

 Mengabsensi siswa  Penjelasan

mengenai tujuan pembelajaran Menyimak dan memahami Whiteboard, Laptop & Projektor

-2 65’  Membuat

catatan yang berhubungan dengan software aplikasi serta langkah – langkah melakukan

instalasi software aplikasi dan web server.

 Menjelaskan istilah penting dari situs web  Menjelaskan pengertian dari WWW.  Menjelaskan pengertian dari Browser dan Editor.  Menjelaskan

Jenis – Jenis web server. Memahami dan mempraktekkan Whiteboard, Laptop & Projektor Pengenalan Teknologi Webpage

3 10’  Menutup

proses perkuliahan  Berdoa Bersama

Memahami -

-4. Materi Pembelajaran

A. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:

1. Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer

networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.

(3)

3. HTML digunakan untuk membuat document yang bisa di akses melalui web.

Web Statis dan Web Dinamis.

Halaman web dapat digolongkan menjadi web statis dan web dinamis. Pengertian web statis dan web dinamis seringkali mengundang perdebatan. Sebagian pengguna internet menyatakan jika pada halaman-halaman web dilengkapi dengan animasi yang bergerak maka disebut web dinamis sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar yang tidak bergerak maka disebut web statis. Namun berdasarkan kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut.

Data dan informasi yang ada pada web statis tidak berubah-ubah. Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server. Sedangkan web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa yang disampaikan client. Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server.

B. Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan

document web, yang bisa anda lakukan dengan HTML yaitu: 1. Mengontrol tampilan dari web page dan contentnya.

2. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.

3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi

secara online.

4. Menambahkan object-object seperti image, audio, video dan juga java applet dalam

document HTML.

C. Browser dan Editor Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.

Editor

Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad/Notepad ++.

D. Mengenal web server

(4)

halaman-halaman web yang umumnya berbentuk dokumen HTML. Saat ini tersedia banyak aplikasi web web server diantaranya adalah Apache Web Server, Apache Tomcat, Internet Information Service ( IIS ), Sun Java System Web Server dan lain sebagainya.

5. Metode Pembelajaran : Ceramah, tanya jawab, dan latihan.

6. Materi latihan : Memahami teknologi webserver.

7. Materi Tes :

1. Apakah perbedaan antara web Dinamis dan Statis ? 2. Apakah kegunaan dari dokumen HTML ?

3. Apakah perbedaan antara Browser dan Editor ?

8. Kriteria Penilaian : 1 - 100

9. Pedoman Bukti :

-10. Kunci Jawaban :

1. Skor maksimal = 40

Sebagian pengguna internet menyatakan jika pada halaman-halaman web dilengkapi dengan animasi yang bergerak maka disebut web dinamis sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar yang tidak bergerak maka disebut web statis. Namun berdasarkan kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut.

2. Skor maksimal = 30

1. Mengontrol tampilan dari web page dan contentnya.

2. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.

3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi

Secara online.

4. Menambahkan object-object seperti image, audio, video dan juga java applet dalam

Document HTML.

(5)

Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.

Editor

Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad/Notepad ++.

11. Referensi :

1. http://en.wikipedia.org/wiki/World_Wide_Web

2. http://id.wikipedia.org/wiki/Web

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

. Palembang. Maxikom. 6. Prijono Agus, dkk. 2005.

Mudan dan Cepat Menguasai

Pemrograman WEB

. Bandung. Informatika.

7. Hakim Lukmanul. 2009.

Jalan Pintas Menjadi Master PHP

. Yogyakarta. Lokomedia.

AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIK ROYAL KISARAN

PERTEMUAN - 2 :

STRUKTUR DOKUMEN HTML

1

. Identitas

Kode Mata Kuliah :

SKS Dan Jumlah Jam : Matakuliah

Minggu Ke : 2 ( Dua )

2

. Kompetensi

1. Unit Kompetensi : - Menjelaskan Struktur dokumen HTML

2. Elemen Kompetensi :

(6)

-

Memformat teks pada dokumen HTML. -Menampilkan gambar pada dokumen

HTML.

3. Kriteria Kinerja : Mahasiswa mampu :

-Melengkapi dokumen HTML dengan Head dan title.

-Membuat Body pada dokumen.

-Menambahkan teks dan paragraf sesuai kebutuhan

-Mengatur mengatur letak teks terhadap gambar pada dokumen HTML.

-Menyimpanan dokumen disimpan sesuai dengan penamaan standar.

3. Proses Pembelajaran

No. ALO-KASI WAKTU KEGIATAN MEDIA/ ALAT/ BAHAN HASIL (Kriteria Unjuk Kerja) DOSEN MAHASISWA

 Berdoa

bersama

-2 65’  Merancang

dokumen HTML dengan tag <BR>

 Merancang

dokumen HTML dengan tag <P>

 Merancang dokumen HTML dengan memformat teks  Mempratekkan menambah gambar pada dokumen web.  Mempratekkan pengaturan letak teks terhadap gambar pada dokumen web.  Mempratekkan memberi bingkai gambar pada dokumen web. Memahami dan mempraktekkan Whiteboard, Laptop & Projektor Pengenalan Teknologi Webpage

(7)

-proses perkuliahan  Berdoa Bersama

4. Materi Pembelajaran 1. Struktur HTML Document

Document HTML bisa di bagi mejadi tiga bagian utama: HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML></HTML>

HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META.

BODY

Document body di gunakan untuk menampilkan text, image link dan semua yang akan di

tampilkan pada web page.

2. Basic HTML Element Block Level Element

Block level element yang sering di gunakan : Heading (H1 sampai H6)

Paragraf (P) List Item(LI)

List item di gunakan untuk mengelompokkan databaik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ada dua macam list yang bisa anda tambahkan ke document HTML: 1. Unordered List (Bullet) :

2. Ordered List (Numbering) Contoh :

Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Horizontal Rules (HR)

(8)

Pemformatan Page Break

Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.

Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML

seperti color, size, style dan lainya. Contoh:

Color

Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.

#RRGGBB

Alignment

Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Format text

(9)

Preformatted text

Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.

3. Menampilkan Gambar

Tag HTML yang digunakan untuk menampilkan gambar yaitu <img>. Beberapa jenis gambar yang dapat disertakan dalam sebuah halaman web adalah GIF, JPEG, PNG, TIFF. Tag ini mempunyai banyak atribut, tetapi hanya satu yang harus disertakan, yaitu atribut src.Dengan catatan gambar yang hendak ditampilkan dalam dokumen html,terlebih dahulu copy kan gambar tersebut kedalam folder dimana file html tersebut berada. Artinya file gambar dan file html harus dalam 1 folder.Bentuk paling sederhana dari tag <img> adalah seperti berikut:

6. Materi latihan : Memahami konsep dasar HTML.

7. Materi Tes : Mempraktekkan tag – tag html dan menampilkannya dengan browser yang telah disediakan.

(10)

-10. Kunci Jawaban :

-11. Referensi :

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

Pemrograman WEB

PERTEMUAN - 3 :

STRUKTUR DOKUMEN HTML LANJUTAN

1

. Identitas

Kode Mata Kuliah :

SKS Dan Jumlah Jam : 2 (Dua), 2 x 45 menit (90 Menit) Matakuliah

(11)

Minggu Ke : 3 ( Tiga ) 2

. Kompetensi

1. Unit Kompetensi : - Menjelaskan Struktur dokumen HTML _Lanjutan

- Mempelajari dan mengimplementasikan elemen-elemen HTML tingkat lanjut kedalam suatu tampilan web.

-Membuat form penginputan dengan tag html.

-Membuat tombol submit dan reset. -Memasukkan data dengan tag Input

3. Proses Pembelajaran

 Berdoa

bersama

formulir dengan tag HTML.

 Memasukkan

data dengan input.  Menjelaskan tipe text,checkbox,sele ct,radio dan textarea. Memahami dan mempraktekkan Whiteboard, Laptop & Projektor Merancang formulir penginputan data berbasis web

3 10’  Menutup

Memahami -

(12)

1. Dasar Penggunaan Formulir

Seringkali halaman Web untuk memasukkan data oleh pemakai. Hal seperti ini ditangani melalui formulir. Formulir dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM>. Dua atrribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD.

 ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman Web itu sendiri.

 METHOD digunakan untuk menetukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk attribut ini berupa GET dan POST. POST membuat informasi dikirim secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL. Kedua metode ini akan dijelaskan melalui materi selanjutnya.

Penggalan kode berikut menunjukkan contoh penggunaan pasangan tag <FORM> dan </FORM>

2. Memasukan Data dengan Input

Tag <INPUT> digunakan untuk melakukan pemasukan data. Letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password,, tombol radio, kotak cek serta tombol submit dan reset.

Salah satu tipe masukan data yang umum digunakan yaitu tipe TEXT, yang digunkan untuk memasukkan teks, misalkan nama seseorang. Contoh pemakaian :

Pada kode diatas,

field

teks yang dibentuk diberi nama “nama”, dengan panjang tampilan sebanyak 35 karakter dan jumlah karakter maksimal yang dapat diisi oleh pemakai sebesar 35 buah. Pada contoh ini, nilai yang ditampilkan pada

field

teks berupa string kosong.

Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat atau dijalankan. Contoh penulisan kode dengan tombol submit yang paling sederhana adalah seperti berikut :

(13)

Pada contoh diatas tombol akan dilengkapi dengan tulisan kirim. Adapun tombol RESET berfungsi untuk mengosongkan atau mengembalikan nilai

field

teks ke nilai bawaan. Contoh berikut memperlihatkan penggunaan formulir yang melibatkan

field

teks, tombol Submit dan tombol Reset.

<title>

Contoh penggunaan formulir </title>

</head> <body> <form>

Nama : <input type=”text” name="nama" > <br>

E-mail :<input type="text" name="email" > <br>

</body> </html>

Oleh browser akan ditampilkan seperti terlihat gambar berikut :

- TIPE CHECKBOX

Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukan yang memungkinkan pemakai mencentang atau tidak mencentang pada kotak tersebut dengan cara mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.

(14)

- Tombol Radio

Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama.

Salah satu tombol radio bisa dilengkapi dengan atribut CHECKED, yang menyatakan bahwa tombol itulah yang menjadi nilai bawaan.

Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol bersangkutan diklik. Perhatikan coding berikut :

<TITLE>Contoh Penggunaan Formulir</TITLE> </HEAD>

Jenis Kelamin:<BR>

<INPUT type="radio" name="sex" value="p" CHECKED>Pria<BR> <INPUT type="radio" name="sex" value="w">Wanita<BR>

Hari Latihan : <BR>

<INPUT type="radio" name="hari" value="1">Senin<BR> <INPUT type="radio" name="hari" value="2">Selasa<BR> <INPUT type="radio" name="hari" value="3">Rabu<BR> <INPUT type="radio" name="hari" value="4">Kamis<BR> <INPUT type="radio" name="hari" value="5">Jum’at<BR> <BR>

(15)

Pada kode di atas, kelompok tombol radio yang pertama ( mengandung 2 buah ) diberi nama sex dan kelompok yang kedua ( mengandung 5 buah ) diberi nama hari. Pada kelompok yang pertama, tombol radio pertama dilengkapi dengan atribut CHECKED, yang artinya tombol radio inilah yang secara bawaan dalam kedaan terpilih. VALUE digunakan untuk memberikan nilai terhadap masing-masing tombol. Misalnya jika tombol radio berjudul

rabu

diklik maka

hari

akan berisi “3”.

Gambar berikut menunjukkan keadaan awal setelah kode HTML diproses oleh

browser.

- Masukan dengan TEXTAREA

Pasangan tag <TEXTAREA> dan </TEXTAREA> berguna untuk membentuk suatu masukan yang panjang yang bisa mencakup banyak baris. Atribut-atribut yang digunakan pada tag <TEXTAREA> dapat dilihat pada Tabel dibawah ini

Atribut

Keterangan

NAME

Menentukan nama untuk textarea

ROWS

Menentukan jumlah baris yang tertampil

pada layar

COLS

Menentukan jumlah kolom yang tertampil

pada layar

WRAP

Menentukan teks secara otomatis akan dilipat

(jika baris tidak cukup menampung

keseluruhan teks, maka teks akan diletakkan

pada beberapa baris) pada area teks atau tidak

kalau terlalu panjang.

Contoh berikut menunjukkan penggunaan TEXTAREA.

(16)

<TITLE> Contoh Penggunaan Formulir</TITLE> </HEAD>

Komentar Anda :<BR>

</FORM> </BODY> </HTML>

Pada kode di atas, jumlah baris yang disediakan dalam tampilan mencakup 5 baris, sedangkan jumlah karakter per baris adalah sebesar 40 buah. Perlu dikethui, teks yang berada antara <TEXTAREA> dan </TEXTAREA> akan dijadikan sebagai nilai bawaaan untuk area teks.

Contoh hasil :

- Pemilihan dngan SELECT

Dengan menggunakan pasangan tag <SELECT> Dan</SELECT>, Anda bisa membentuk kotak kombo (

drop-down

) atau daftar pilihan, tergantung dari pengaturan pada tag <SELECT>. Contoh untuk membuat kotak kombo dapat dilihat dibawah ini.

<TITLE>Contoh SELECT – Model Drop Down</TITLE> </HEAD>

Buah yang paling Anda sukai : <BR> <SELECT name="buah">

<OPTION value="jeruk">Jeruk <OPTION value="Apel">Apel

<OPTION value="Manggis">Manggis <OPTION value="Melon">Melon

(17)

</FORM> </BODY> </HTML>

Pada kode diatas ,

<OPTION value="jeruk">Jeruk <OPTION value="Apel">Apel

<OPTION value="Manggis">Manggis <OPTION value="Melon">Melon

Digunakan untuk membentuk kotak kombo yang mengandung 5 pilihan. Masing-masing pilihan ditentukan melalui tag <OPTION>. Nilai pada VALUE menyatakan nilai-nilai pilihan. Atribut SELECTED pada tag < OPTION> menyatakan bahwa nilai pada OPTION inilah yang menjadi nilai bawaan ( nilai yang ditampilkan saat setelah kode HTML diproses ).

Gambar berikut memperlihatkan tampilan kode tersebut.

(18)

6. Materi latihan : STRUKTUR DOKUMEN HTML LANJUTAN.

7. Materi Tes : Merancang formulir pendaftaran menggunakan tag-tag html dan menampilkannya dengan browser yang telah disediakan.

9. Pedoman Bukti :

-11. Referensi :

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

Pemrograman WEB

(19)

PERTEMUAN - 4 :

STRUKTUR DOKUMEN HTML LANJUTAN JILID 2

1

. Identitas

Kode Mata Kuliah :

(20)

Pendukung

Minggu Ke : 4 ( Empat )

2 .

Kompete nsi

1. Unit Kompetensi : - Menjelaskan Struktur dokumen HTML _Lanjutan

- Mempelajari dan mengimplementasikan elemen-elemen HTML tingkat lanjut kedalam suatu tampilan web.

-Membuat tabel dengan tag html

-Merapikan design form dengan tag tabel -Membuat link dengan html.

3. Proses Pembelajaran

 Berdoa

bersama

dokumen HTML dengan tag link.  Membuat tabel

menggunakan html.  Merapikan dokumen html dengan bantuan tabel. Memahami dan mempraktekkan Whiteboard, Laptop & Projektor Mengetahui pembuatan link dan tabel dengan baik.

3 10’  Menutup

Memahami -

(21)

- Menggunakan tabel

Tabel biasa digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca.

Daftar tag untuk pengaturan tabel

Tag Keterangan

<TABLE>…..</TABLE> Mengawali dan mengakhiri sebuah table

<CAPTION>…..</CAPTION> Menentukan judul pada table

<TR>……</TR> Membuat sebuah baris dalam table <TD>……</TD> Membuat sebuah kolom data

<TH>…..</TH> Membuat judul kolom.

Tabel dapat dilengkapi dengan garis untuk kolom maupun baris. Untuk keperluan ini, anda bisa menggunakan attribut BORDER pada tag TABLE, dengan bentuk sebagai berikut :

Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai untuk BORDER dianggap sama dengan nol, dengan akibat garis tidak ditampilkan dengan kata lain

<table>

Identik dengan

Contoh berikut didasarkan pada kode dengan tambahan BORDER=”1” pada tag <TABLE>

<title>

tabel sederhana </title>

</head> <body>

<caption>Buku Tintin Berbahasa Indonesia</caption> <tr>

<th>Judul</th> </tr>

<tr>

<th>Tahun Terbit Pertama Kali</th> </tr>

<tr>

<td>Rahasia pulau hitam</td> <td>1975</td>

(22)

<td>Lotus Biru</td> <td>1984</td> </tr>

<tr>

<td>Penerbangan 714</td> <td>1975</td>

</tr> <tr>

<td>Tintin Di Tibet</td> <td>1980</td>

</tr> </table> </body> </html>

Hasil kode html diatas terlihat sebagai berikut :

HTML juga memungkinkan pembuatan tabel dengan sejumlah baris sel digabungkan, misalny sebagai berikut :

Tintin

Rahasia Pulau Hitam (1975) Titin di Tibet (1980)

Lotus Biru (1982)

Trio Detektif Misteri Puri Setan (1982)_{Misteri Gunung Monster (1986)}

Untuk membentuk sel yang berisi Tintinataupun Trio Detektif, yang menggabungkan beberapa baris sel, anda bisa menggunakan attribut ROWSPAN pada tag <TD>. Contoh :

<title>

</head> <body>

(23)

<caption>Tokoh dan Judul Buku</caption> <tr>

<td rowspan="3">Tintin</td>

<td>Rahasia Pulau Hitam (1975)</td> </tr>

<tr>

<td>Tintin di Tibet (1980)</td> </tr>

<tr>

<td>Lotus Biru (1984)</td> </tr>

<tr>

<td rowspan="2">Trio detektif</td> <td>Misteri Puri Setan (1982)</td> </tr>

<tr>

<td>Misteri Gunung Monster (1964)</td> </tr>

</table> </body> </html>

Pada kode diatas,

Menyatakan bahwa ada 3 buah baris pada kolom pertama yang disatukan. Hasil seperti berikut.

Untuk menggabungkan beberapa sel dalam satu baris, anda bisa menggunakan attribut COLSPAN pada tag <TH> atau <TD>. Contoh berikut menunjukkan penggunaan COLSPAN pada tag <TH>.

<title>

(24)

<body>

<caption>Tokoh dan Judul Buku</caption> <tr>

<th colspan="2">Tintin</th> </tr>

<tr>

<td>Rahasia Pulau Hitam</td> <td>(1975)</td>

</tr> <tr>

<td>Tintin di Tibet</td> <td>(1980)</td>

</tr> <tr>

<td>Lotus Biru</td> <td>(1984)</td> </tr>

<tr>

<th colspan="2">Trio detektif</th> </tr>

<tr>

<td>Misteri Puri Setan</td> <td>(1982)</td>

</tr> <tr>

<td>Misteri Gunung Monster</td> <td>(1964)</td>

(25)

Tabel juga bisa digunakan sebagai alat bantu untuk merapikan sebuah tampilan web atau tampilan, kode berikut contoh penggunaan tabel dalam merapikan sebuah form.

</head> <body>

<tr>

<tr>

<tr>

<td valign="top">Pesan</td> <td valign="top">:</td>

<tr>

(26)

Hasil dari coding tersebut dengan menggunakan bantuan tabel seperti gambar berikut :

- Membuat LINK

Umumnya sebuah halaman Web memiliki

link

atau

hyperlink

( penghubung ) ke halaman-halaman web yang lain. Untuk membuat

link

ke halaman lain, anda menggunakan pasangan tag <A>……</A> atau yang biasa disebut tag jangkar atau

anchor tag

. Bentuk paling sederhana penggunaaan tag jangkar adalah sebagai berikut :

<A HREF=”URL”>LABEL</A>

Dalam hal ini, URL (

Uniform Resource Locator

) dapat berupa alamat email suatu dokumen web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP). Contoh URL tersederhana berupa nama berkas HTML.

(27)

.

7. Materi Tes :

-8. Kriteria Penilaian : 1 - 100

-13. Referensi :

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

Pemrograman WEB

(28)

LATIHAN

1

. Identitas

Kode Mata Kuliah :

Minggu Ke : 5 ( Dua )

2

. Kompetensi

1. Unit Kompetensi : - Latihan

2. Elemen Kompetensi : - Memahami permbuatan form (penginputan) dan tombol submit. 3. Kriteria Kinerja : Mahasiswa mampu :

-Mempraktekan pembuatan formulir pendaftaran siswa baru menggunakan tag input.

-Mempraktekkan penggunaan tabel dalam merapikan dokumen.

3. Proses Pembelajaran

No. ALO-KASI WAKTU

KEGIATAN MEDIA/

ALAT/ BAHAN

HASIL

(Kriteria Unjuk Kerja)

DOSEN MAHASISWA

 Berdoa

bersama

mengenai tujuan pembelajaran

Menyimak dan memahami

Whiteboard, Laptop & Projektor

(29)

pembuatan formulir

pendaftaran siswa baru

menggunakan tag input.

 Mempraktekka

n penggunaan tabel dalam merapikan dokumen.

mempraktekkan Laptop & Projektor

pembuatan formulir pendaftaran siswa/mahasiswa berbasis web.

3 10’  Menutup

Memahami -

-4. Materi Pembelajaran :

-5. Metode Pembelajaran : Ceramah, tanya jawab, dan latihan.

6. Materi latihan : Latihan.

7. Materi Tes : - merancang tampilan form seperti gambar dibawah ini :

(30)

-13. Referensi :

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

Pemrograman WEB

PERTEMUAN - 6 :

QUIZ

1

(31)

Kode Mata Kuliah :

Minggu Ke : 6 ( Enam )

2 .

Kompete nsi

1. Unit Kompetensi : - Quiz

2. Elemen Kompetensi : - Melakukan evaluasi terhadap mahasiswa tentang pemahaman materi yang

3. Kriteria Kinerja :

-3. Proses Pembelajaran

 Berdoa

bersama

mengenai tujuan quiz Menyimak dan memahami Whiteboard, Laptop & Projektor

-2 65’  Mempersiapkan soal yang akan diberikan pada quis.

 Memberikan soal quis dan mengawasi.

Memahami dan mempraktekkan Whiteboard, Laptop & Projektor Dapat menyelesaikan soal yang diberikan.

3 10’  Menutup

Memahami -

-4. Materi Pembelajaran :

(32)

6. Materi latihan : Quiz.

7. Materi Tes : - Rancanglah sebuah form untuk pendaftaran online mahasiswa baru dalam universitas X. Data yang nantinya dimasukkan dalam form pendaftaran adalah: Nama Lengkap (text box), Tempat Lahir (text box), Tanggal Lahir (gunakan 3 buah combo box masing-masing untuk tanggal: 1-31, bulan:1-12 dan tahun: 1970-1987), Alamat Rumah (text area), Jenis Kelamin (gunakan radiobutton: pria/ wanita), Asal Sekolah (text box), Nilai UAN (text box). Tambahkan pula sebuah button dan reset. .

-14. Kunci Jawaban :

-15. Referensi :

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

Pemrograman WEB

ACARA PERKULIAHAN

PERTEMUAN - 7 :

Konsep Dasar CSS

1

. Identitas

(33)

SKS Dan Jumlah Jam : 3 SKS, 2 x 45 menit Matakuliah

Minggu Ke : 7 (Tujuh )

2

. Kompetensi

1. Unit Kompetensi : - Menjelaskan konsep dasar CSS 2. Elemen Kompetensi : - Memahami tentang konsep CSS

-

Memahami aturan penulisan pada CSS - Memahami pembuatan background 3. Kriteria Kinerja : Mahasiswa mampu :

- Menjelaskan tentang konsep CSS

- Menjelaskan aturan penulisan pada CSS - Menjelaskan pembuatan background - Menjelaskan selector sebagai pengontrol design

- Mengenal pengaturan bentuk font

3. Proses Pembelajaran

 Berdoa

bersama

-2 65’ 

Menjelaskan

(34)

 Menjelaskan pembuatan background.  Menjelaskan

selector sebagai pengontrol design.

 Mengenal

pengaturan bentuk font

3 10’  Menutup

Memahami -

-4. Materi Pembelajaran

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

Format penulisan kalimat CSS:

(35)

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1 Property: color Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari

h1

ke warna

merah (red)

.

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag

h1, h2

dan

h3

semua menggunakan warna

merah

, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).

Contoh:

h1,h2,h3 {

color:red;

font-family:arial; font-size:150%; }

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna

merah

, dengan type font

arial

, dan ukuran font

150%

.

(36)

 Inline CSS

 Embed atau memasang kode css ke dalam bagian <head>

 Nge link ke external CSS

 Import CSS file

Yuk kita bahas satu per satu…

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.

Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.

Contoh:

<P> style=”color:blue”>

Isi paragraf.

</p>

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna

biru

. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.

Penulisan CSS dengan cara ini di mulai dengan kata

style:

lalu di ikuti dengan syntax

property: value

.

Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag

<head>

dan

</head>

. Penulisan CSS dengan cara ini diawali dengan tag

<style>

dan diakhiri dengan tag

</style>

.

Contoh:

<html> <head>

<title>Belajar CSS</title> <style type=”text/css”> p {color: white; }

body {background-color: black; } </style>

</head> <body>

(37)

</body>

</html>Dalam contoh di atas semua elemen

<P>

dalam halaman web tersebut akan diformat menggunakan font berwarna

putih

dan

background

akan berwarna hitam.

External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.

Contoh:

1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan:

style.css

, lalu tuliskan kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small;} h1 {color: red; }

2. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>

<head>

<link rel=”stylesheet” href=”style.css” type=”text/css”> </head>

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.

Contoh:

@import "style.css"; atau

(38)

Setelah kita sudah mengetahui Sintaks CSS, Kali ini kita akan mempelajari tentang ID &

Class Dalam CSS

. Selain tag elemen HTML yang menjadi Selector, Ternyata ID

&

Class juga bisa menjadi selector. Ini dikarenakan untuk memberikan beberapa style berbeda dalam satu elemen HTML.

Id Selector

Id selector digunakan untuk menentukan style sebuah elemen unik tunggal. Id menggunakan atribut Id pada elemen HTML, Id didefinisikan dengan tanda "#". Aturan style yang diterapkan pada contoh dibawah ini diterapkan ke sebuah elemen dengan Id="web11".

Contoh :

<html> <head> <style>

#web11 { text-align:center; color:red; }

</style> </head> <body>

<p id="web11">Hallo Dunia!!</p>

<p>Paragraph ini tidak terpengaruh pada style yang dibuat</p>

</body> </html>

Class Selector

Class selector digunakan untuk menentukan style beberapa elemen. Berbeda dengan id selector, Class selector lebih sering digunakan untuk menentukan style dari beberapa elemen. Hal ini memungkinkan kita untuk menetapkan style tertentu dari banyak elemen dengan class yang sama. Class selector menggunakan atribut class HTML, dan didefinisikan dengan ".". Pada contoh dibawah ini, semua elemen class="center" akan berada pada posisi tengah.

(39)

<html> <head> <style> .center {

text-align:center; }

</style> </head> <body>

<h1 class="center">Posisi Tengah Sebuah Judul</h1> <p class="center">Posisi Tengah Sebuah Paragraph</p> </body>

Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai inidapat dipili

h

dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefinedvalue ini adalahpada

style berikut

h1 {

fontstyle : italic;

}

Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal inivalue

‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihanvalue yang

telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique.Perhatikanbahwa

predefined value ditulis tanpa diapit tanda petik.

Bilangan

Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini

contohnya:

p {

lineheight : 2;

}

Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari

ukuran fontnya.

Panjang, Besar dan Prosentase

Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px

(pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini

beberapa contohnya

Panjang, Besar dan Prosentase

(40)

Contohnya :

h1{

fontsize : 20px; /* membuat ukuran font 20 pixel */

}

hr {

width : 20%;

/* membuat garis horizontal dengan panjang 20% terhadap lebar

jendela browser /*

}

URL

Sebuah value juga dapat berupa URL. Berikut ini contohnya

body {

background : url(img/image.jpg);

}

Style di atas untuk memberi background image pada body yang diambil dari folder img

dengan nama file image.jpg.

Warna

Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapatdilakuk

an

yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red,green, yellow, dll)

atau dengan menuliskannya dalam kode hexadesimal. Berikut ini contohnya.

p {

color : red; }

p {

color : #FF0000; /* identik dengan warna merah (hexadesima

l) }

</html>

6. Materi latihan : Memahami konsep dasar CSS.

7. Materi Tes : - Merancang button dengan css.

(41)

13. Referensi :

3. http://mysql.com

4. http://w3c.org

5. Jayan. 2010.

CSS untuk orang awam

Pemrograman WEB