BUKU AJAR PEMROGRAMAN WEB

BUKU AJAR

PEMROGRAMAN WEB

Penyusunan Bahan/Buku Ajar dalam Kurikulum Berbasis Kompetensi ini dibiayai oleh Program Hibah Penguatan Politeknik Kerjasama Pemda (PHP-PKP)

Direktorat Pembelajaran dan Kemahasiswaan _Dikjen Dikti Kementrian Pendidikan dan Kebudayaan

Tahun Anggaran 2012

Disususn Oleh : Ekkal Prasetyo, M. Kom

Program Studi Teknik Informatika POLITEKNIK SEKAYU

ii

HALAMAN PENGESAHAN

1. Identitas Buku Ajar

a. Judul Buku / Bahan Ajar : Pemrograman Web b. Mata Kuliah / Semester : Pemrograman Web / IV c. SKS (T/P) / Jam (T/P) : SKS 2/2 Jam 4/6 d. Program Studi : Teknik Informatika e. Kode Mata Kuliah : TI208.0 / TI208.9

2. Penulis

a. Nama : Ekkal Prasetyo, M. Kom b. NIDN : 0205070601

c. Jabatan Fungsional : Asisten Ahli (AA) d. Program Studi : Teknik Informatika e. Pusat Penelitian : Politeknik Sekayu

f. Alamat Institusi : Jl. Kolonel Wahid Udin Lk. I Kel.Kayuara Kecamatan Sekayu Kabupaten Musi

Banyuasin Kode Pos 30711 g. Telepon/ Fax :+62 714 321099

Mengetahui

Ka. Prodi Teknik Informatika

Ali Subhan Afrizal, ST

Sekayu, 15 Juli 2012 Penulis,

Ekkal Prasetyo, M.Kom Menyetujui,

Direktur Politeknik Sekayu

Drs. Yulianto Wasisran, MM

iii   

Kata Pengantar

Puji syukur kehadirat Allah SWT atas nikmat kesehatan dan kesempatan yang telah diberikan kepada penyusun, sehingga penyusun dalam menyelesaikan Rancangan Buku Ajar Pemrograman Web ini tepat Pada waktunya. Shalawat dan Salam tercurah pada Muhammad SAW yang telah membawa kita dari kegelapan menuju dunia yang terang benerang.

Buku Ajar ini yang akan disusun ini bertujuan sebagai pedoman bagi dosen dan mahasiswa Politeknik Sekayu dalam kegiatan belajar mengajar mata kuliah Pemograman Web.

Ucapan terima kasih penyusun haturkan kepada semua pihak yang telah membantu dalam penyusunan Rancangan Buku Ajar ini antara lain kepada :

1. Bapak Drs.Yulianto Wasiran, MM Selaku Direktur Politeknik Sekayu 2. Bapak Markus,ST.,M.T Selaku Pembantu Direktur I Politeknik Sekayu 3. Bapak Ir. Zuher Effendi Selaku Pembantu Direktur II Politeknik Sekayu 4. Bapak Ali Subhan Afrizal, ST Selaku Ketua Program Studi Teknik

Informatika.

5. Teman – teman Staf Pengajar Program Studi Teknik Informatika Politeknik Sekayu

6. Semua Pihak yang tidak dapat penyusun sebutkan satu persatu.

Orang bijak mengatakan “tiada gading yang tak retak” penyusun menyadari Rancangan Buku Ajar ini masih jauh dari sempurna karena kebenaran dan kesempurnaan hanya milik Allah SWT. Oleh sebab itu kritik dan saran sangat kami diharapkankan untuk menjadi masukan menyempurnakan Buku Ajar ini. Demikian semoga bermamfaat.

Terima Kasih

Sekayu, Juli 2012

iv   

Daftar Isi

LEMBAR JUDUL ... i

HALAMAN PENGESAHAN……… ... ii

KATA PENGANTAR ... iii

DAFTAR ISI ... iv

BAB I DESKRIPSI MATA KULIAH 1.1 Identitas Mata Kuliah ... 1

1.2 Ringkasan Topik / Silabus ... 1

1.3 Kompetensi yang di tunjang... 1

1.4 Tujuan Pembelajaran Umum... 1

BAB II TUJUAN PEMBELAJARAN UMUM DAN KHUSUS ... 2

BAB III TUJUAN PEMBELAJARAN KHUSUS POKOK BAHASAN ... 3

BAB IV POKOK BAHASAN DAN SUB POKOK BAHASAN ... 4

BAB IV SKEMA HUBUNGAN POKOK BAHASAN ... 6

BAB VI KRITERIA PENILAIAN HASIL PEMBELAJARAN ... 6

DAFTAR PUSTAKA LAMPIRAN

- GBPP - SAP

1   

BAB I DESKRIPSI MATA KULIAH

1.1. Identitas Mata Kuliah

Judul Mata Kuliah : Pemrograman Web Nomor Kode / SKS : TI208.0 / 2

Semester / Tingkat : 4 / II

Prasyarat : Algoritma dan Pemograman Bahasa Pemograman Basis Data

Jumlah Jam / Minggu : 4 / 18

1.2Ringkasan Topik / Silabus :

Mata kuliah ini meliputi konsep dasar web, mencakup terminologi, komponen pembangun, mekanisme kerja web dan pemrograman web, desain halaman web dengan sintaks HTML, membuat Link, Tabel, Frame dan Form, pemanfaatan CSS untuk representasi dan layout web, pemrograman PHP disisi server dan client serta koneksi dengan database MySQL dan memanipulasi basisdata melalui halaman web.

1.3Kompetensi yang di tunjang :

Mampu Merancang dan menyusun sistem multimedia dan web yang menerapkan dari segi aspek interaksi manusia dan komputer

1.4 Tujuan Pembelajaran Umum :

1. Memiliki pengetahuan mengenai konsep dasar internet dan pemrograman web, dan pemanfaatannnya untuk mendistribusikan informasi serta contoh-contoh pemanfaatan web pada real world.

2. Mampu membuat program berbasis web yang interaktif untuk

menyediakan dokumen dengan content statik, dengan memanfaatkan HTML, CSS untuk layout dokumen, dan JavaScript sebagai Client Side Scripting.

3. Mampu membuat program database web yang interaktif untuk

menyediakan informasi dengan content dinamis, dengan memanfaatkan PHP sebagai Server Side Scripting dan database MySQL sebagai DBMS.

2   

BAB II TUJUAN PEMBELAJARAN UMUM DAN KHUSUS TUJUAN PEMBELAJARAN

UMUM (TPU)

TUJUAN PEMBELAJARAN KHUSUS (TPK) 1 Mahasiswa dapat mengetahui dan

memahami dasar-dasar Web

1. Mahasiswa dapat menerangkan konsep dasar web dan arsitektur web.

2. Mahasiswa dapat menyebut dan menerangkan pengertian HTTP dan penggunaannya.

3. Mahasiswa dapat menerangkan client side dan server side programming dan fungsinya. 4. Mahasiswa dapat menyebutkan

contoh web server dan melakukan instalasi.

2 Mahasiswa dapat mengetahui dan memahami HTML

1. Mahasiswa dapat membuat contoh sederhana menggunakan format teks dasar, URL, link, image.

2. Mahasiswa dapat membuat tabel, frame dan form

3 Mahasiswa dapat mengetahui dan memahami CSS

1. Mahasiswa dapat menerangkan definisi dan kegunaan CSS

2. Mahasiswa dapat menerangkan CSS property dan menggunakannya 4 Mahasiswa dapat mengetahui dan

memahami JavaScript

1. Mengenal Pemrograman JavaScript. 2. Memahami Struktur JavaScript. 3. Mengenal macam-macam tipe data

dan operator.

4. Mampu menerapkannya dalam pemrograman JavaScript. 5. Mengerti esensi penggunaan

Percabangan (pemilihan/kodisional) dalam JavaScript.

6. Memahami bentuk umum Percabangan.

7. Mengerti esensi penggunaan Pengulangan (Looping) dalam JavaScript.

5 Mahasiswa dapat mengetahui dan memahami pemograman web dengan PHP

Mahasiswa dapat menerangkanelemen-elemen dasarpemrograman web dengan PHPserta membuat contoh

aplikasisederhana dengan

menggunakan elemen-elemen dasar tersebut

3   

6 Mahasiswa mengetahui dan memahami konsep pengaksesan basisdata dalam pemrograman web dengan PHP

Mahasiswa dapat menerangkan pembuatan basis data dengan MySQL serta pengaksesannya dengan PHP serta membuat contoh aplikasi sederhana yang menggunakan database.

BAB III TUJUAN PEMBELAJARAN KHUSUS POKOK BAHASAN TUJUAN PEMBELAJARAN

KHUSUS (TPK)

POKOK BAHASAN 1. Mahasiswa dapat menerangkan

konsep dasar web dan arsitektur web.

2. Mahasiswa dapat menyebut dan menerangkan pengertian HTTP dan penggunaannya.

3. Mahasiswa dapat menerangkan client side dan server side programming dan fungsinya. 4. Mahasiswa dapat menyebutkan

contoh web server dan melakukan instalasi.

Dasar-dasar Web

1. Mahasiswa dapat membuat contoh sederhana menggunakan format teks dasar, URL, link, image. 2. Mahasiswa dapat membuat tabel,

frame dan form

HTML (Hyper Text Markup Languange)

1. Mahasiswa dapat menerangkan definisi dan kegunaan CSS 2. Mahasiswa dapat menerangkan

CSS property dan menggunakannya

3. Memberikan uraian tentang konsep dasar, sintaks CSS, dan

pemanfaatannya untuk representasi dan layout dokumen pada

lingkungan web

CSS (Cascading Style Sheet )

1. Mengenal Pemrograman JavaScript.

2. Memahami Struktur JavaScript. 3. Mengenal macam-macam tipe data

dan operator.

4. Mampu menerapkannya dalam pemrograman JavaScript.

4   

5. Mengerti esensi penggunaan Percabangan

(pemilihan/kodisional) dalam JavaScript.

6. Memahami bentuk umum Percabangan.

7. Mengerti esensi penggunaan Pengulangan (Looping) dalam JavaScript.

Mahasiswa dapat

menerangkanelemen-elemen dasarpemrograman web dengan PHPserta membuat contoh aplikasi sederhana dengan menggunakan elemen-elemen dasar tersebut

PHP

Mahasiswa dapat menerangkan pembuatan basis data dengan MySQL serta pengaksesannya dengan PHP serta membuat contoh aplikasi sederhana yang

menggunakan database.

MySQL dengan PHP

BAB IV POKOK BAHASAN DAN SUB POKOK BAHASAN

POKOK BAHASAN SUB POKOK BAHASAN

Dasar-dasar Web • Konsep dasar Web • Arsitektur Web • HTTP

• Client Side Programming • Server Side Programming

• Web Server Software

(PHPTriad,XAMPP) HTML (Hyper Text Markup

Languange) • Struktur Dasar HTML • Bagian Head • Bagian Body • Memberi Komentar • Memberi Identitas • Memformat Dokumen HTML • Memformat Karakter • Menambahkan Gambar • Menggunakan Link • Menggunakan Tabel

5    • Menggunakan Form • Menggunakan Frame CSS (Cascading Style Sheet ) • Fonts • Colors • Images • Text Formatting • Indentation • Lists

Java Script • Pengantar Javascript • Tipe Data dasar • Tipe data bentukan • Operator • Kondisional If Then Else Switch…case • Looping For While Continue break PHP • Dasar PHP • Variabel PHP • Operator • Kontrol • Fungsi • Form • Cookies • File

• Time dan Date MySQL dengan PHP • Pengenalan MySQL

• Tes Koneksi ke Server MySQL • Membuat Database pada MySQL • Error handling

• Membuat tabel pada MySQL • Insert Data

• View Data • Searching Data • Delete Data • Update Data

6    BAB [1] BAB [5] BAB [4] BAB [2] BAB [3] BAB [6]

BAB V SKEMA HUBUNGAN POKOK BAHASAN

BAB VI KRITERIA PENILAIAN HASIL PEMBELAJARAN

SUB POKOK BAHASAN KRITERIA PENILAIAN • Konsep dasar Web

• Arsitektur Web • HTTP

• Client Side Programming • Server Side Programming

• Web Server Software (PHPTriad, • XAMPP

Tugas mendownload dan menginstalasi salah satu web server software dan contoh program

• Struktur Dasar HTML • Bagian Head • Bagian Body • Memberi Komentar • Memberi Identitas • Memformat Dokumen HTML • Memformat Karakter • Quiz Materi HTML

• Tugas Membuat Web Statik Menggunakan HTML

7    • Menambahkan Gambar • Menggunakan Link • Menggunakan Tabel • Menggunakan Form • Menggunakan Frame • Fonts • Colors • Images • Text Formatting • Indentation • Lists

Tugas Mempercantik Tampilan Web Dengan CSS

• Pengantar Javascript • Tipe Data dasar • Tipe data bentukan • Operator • Kondisional If Then Else Switch…case • Looping For While Continue break

• Tugas Membuat Beberapa Contoh Penerapan Java Script Pada Web • UTS Materi HTML, CSS, dan Java

Script • Dasar PHP • Variabel PHP • Operator • Kontrol • Fungsi • Form • Cookies • File

• Time dan Date

• Quiz Materi PHP

• Tugas Membuat Website dengan PHP

• Pengenalan MySQL

• Tes Koneksi ke Server MySQL • Membuat Database pada MySQL • Error handling

• Membuat tabel pada MySQL • Insert Data

• View Data • Searching Data • Delete Data • Update Data

• Tugas Kelompok Membuat Sistem Informasi Bebasis Web menggunakan PHP dan My SQL

• UAS materi PHP dan MySQL

Daftar Pustaka

Hakim, Lukmanul. 2008. Membongkar Trik Rahasia Master PHP. Lokomedia:Yogyakarta

http://ilmukomputer.com/ Key : JavaScript diakses tanggal 28 Juni 2012 Jayan.2010. CSS Untuk Orang Awam. Maxikom : Palembang

Kadir, Abdul. 2008. Dasar dan Implementasi Database Relational. Andi:Yogyakarta

Kurniawan, Rulianto. 2008 Membangun Situs dengan PHP Untuk Orang Awam. Maxikom : Palembang

Nugroho, Bunafit. 2008. Membuat Website Sendiri Dengan PHP dan Mysql. MediaKita:Yogyakarta

Peranginangin, Kasiman 2006. Aplikasi Web dengan PHP dan MySQL. Andi:Yogyakarta

Prasetio, Adhi. 2011. Tip dan Trik Menjadi Master PHP. Media Kita : Jakarta Raharjo, Budi dkk. 2010. Modul Pemrograman Web ( HTML, PHP & MySQL).

Modula : Bandung

Saputra, Agus. 2011. Trik & Solusi Menjadi Master PHP. ElexMediaKomputindo:Jakarta

Setiawan, Andi. 2004. Mudah Tepat Singkat Pemrograman HTML. YramaWidya:Bandung

Simarmata, Janner 2007. Perancangan Basis Data. Andi:Yogyakarta

Utomo, Eko Priyo. 2008. 125 Tips Menguasai Bahasa PHP. YramaWidya:Bandung

BIOADATA

Nama : Ekkal Prasetyo, S.Kom., M.Kom

Alamat korespondensi : Jl. Kolonel Wahid Udin Lk. I Kel.Kayuara Kecamatan Sekayu Kabupaten Musi Banyuasin

Kode Pos 30711 Telepon/ Fax :+62 714 321099

HP : 08194806788

Email : excal.polsky@gmail.com

Riwayat Pendidikan

No Tahun Lulus Perguruan Tinggi Bidang Spesialisasi 1 2009

Fakultas Ilmu Komputer Universitas Bina Darma

Palembang

Teknik Informatika Komputer

2 2011

Magister Teknik Informatika Universitas Bina Darma

Palembang

IT Insftratructure

Nama Mata Kuliah yang Diampu

No Nama Mata Kuliah Jenjang

1 Pengantar Teknologi Informasi D3

2 PB 1 :Aplikasi Perkantoran dan Internet D3 

3 Basis Data D3 

4 Jaringan Komputer D3 

5 PB 2 : Pemograman PHP D3 

6 Perancangan Web D3

Jumlah Mahasiswa yang Pernah diluluskan Strata Jumlah

D3 24

D4  -

Pengalaman Penelitian 5 Tahun Terakhir

Tahun Topik / Judul Penelitian Sumber Dana 2011

Perancangan VLAN (Virtual Local Area Network) untuk Manajemen IP Address Pada Politeknik

Sekayu

Politeknik Sekayu

Pengalaman Publikasi di berkala ilmiah 5 Tahun Terakhir Nama Penulis Tahun Terbit Judul Artikel Nama Berkala Volume dan Halaman Status Akreditasi Ikhtison Mekongga, ST dan Ekkal Prasetyo 2010 Rancang Bangun Pemantau dan Pembatas Virus Pada Jaringan Berbasis Router JUPITER Volume II Nomor I - Ekkal Prasetyo 2011 Sistem Pengolahan Data Pasien Berbasis WEB OCPUS Volume 3, Nomor 1 - Sekayu, 14 Juli 2012

N J K S P R M m L P m No. Rev. : 00

Judul Mata Kulia Kode Mata Kulia Semester

Prasyarat

Ringkasan Topi Matakuliah ini mekanisme kerj Link, Tabel, Fra PHP disisi serv melalui halaman

GARI

ah ah/SKS ik: meliputi kon a web dan pemr ame dan Form, ver dan client s

n web. B

IS GARIS

: Pemrograma : TI208.0 / 2 : 4 : Algoritma d Bahasa Pem Basis Data

nsep dasar web rograman web, pemanfaatan C serta koneksi de Berlaku tgl : --/

Y A Y A S

P

P

O

O

L

L

IT

I

P R O G R A M

Jl. Kolonel W web: w

BESAR PR

an Web dan Pemograman mograman b, mencakup desain halaman CSS untuk repre engan database --/--

S A N M U B

T

T

E

E

K

K

N

N

I

I

M S T U D I T E K

Wahid Udin Lk. I K www.polsky.ac.id m Tel. / Fax.: +62

ROGRAM P

n terminologi, k n web dengan sin esentasi dan lay

MySQL dan m

B A S E J A H

I

I

K

K

S

S

E

E

K

K

K N I K I N F O R

Kel. Kayuara, Se mail: polsky@polsky 2 714 321099

PEMBELAJA

komponen pem ntaks HTML, m yout web, pemro memanipulasi b

H T E R A

K

K

A

A

Y

Y

U

U

R M A T I K A

ekayu30711 y.ac.id Program Stu

ARAN (GB

mbangun, membuat ograman basisdata H udi : DIII Tekn

BPP)

Teori : 4 jam

Hal. : -6 1 nik Informatika m/minggu

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -6 2

Kompetensi yang ditunjang :

Mampu Merancang dan menyusun sistem multimedia dan web yang menerapkan dari segi aspek interaksi manusia dan komputer

Tujuan Pembelajaran

1. Memiliki pengetahuan mengenai konsep dasar internet dan pemrograman web, dan pemanfaatannnya untuk mendistribusikan informasi serta contoh-contoh pemanfaatan web pada real world.

2. Mampu membuat program berbasis web yang interaktif untuk menyediakan dokumen dengan content statik, dengan memanfaatkan HTML, CSS untuk layout dokumen, dan JavaScript sebagai Client Side Scripting.

3. Mampu membuat program database web yang interaktif untuk menyediakan informasi dengan content dinamis, dengan memanfaatkan PHP sebagai Server Side Scripting dan database MySQL sebagai DBMS

Evaluasi :

UTS = 40 % * ( Quiz + Tugas ) + 60% (Nilai Tengah Semester) UAS = 40 % * ( Quiz + Tugas ) + 60% (Nilai Tengah Semester) NA = 50 % UTS + 50% UAS

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -6 3

Pertemuan ke Pokok Bahasan Sub-Pokok Bahasan Referensi

1, 2 Dasar-dasar Web • Konsep dasar Web

• Arsitektur Web

• HTTP

• Client Side Programming

• Server Side Programming

• Web Server Software (PHPTriad,, XAMPP)

3,4,5 HTML (Hyper Text Markup Languange) • Struktur Dasar HTML

• Bagian Head • Bagian Body • Memberi Komentar • Memberi Identitas • Memformat Dokumen HTML • Memformat Karakter • Menambahkan Gambar • Menggunakan Link • Menggunakan Tabel • Menggunakan Form • Menggunakan Frame 6,7 CSS (Cascading Style Sheet ) • Fonts • Colors • Images • Text Formatting • Indentation • Lists

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -6 4

8,9 Java Script • Pengantar Javascript

• Tipe Data dasar

• Tipe data bentukan

• Operator • Kondisional If Then Else Switch…case • Looping For While Continue break

10 UTS ( Ujian Tengah Semester )

11,12,13 PHP • _{Dasar PHP} • Variabel PHP • Operator • Kontrol • Fungsi • Form • Cookies • File

• Time dan Date

14,15,16, MySQL dengan PHP • Pengenalan MySQL

• Tes Koneksi ke Server MySQL

• Membuat Database pada MySQL

• Error handling

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -6 5 • Insert Data • View Data • Searching Data • Delete Data • Update Data

17 Review Materi • _{Dasar-dasar Web}

• HTML (Hyper Text Markup Languange) • CSS (Cascading Style • Sheet ) • Java Script • PHP • MySQL dengan PHP

18 UAS ( Ujian Akhir Semester )

Referensi:

1. Hakim, Lukmanul. 2008. Membongkar Trik Rahasia Master PHP. Lokomedia:Yogyakarta 2. http://ilmukomputer.com/ Key : JavaScript diakses tanggal 28 Juni 2012

3. Jayan.2010. CSS Untuk Orang Awam. Maxikom : Palembang

4. Kadir, Abdul. 2008. Dasar dan Implementasi Database Relational. Andi:Yogyakarta

5. Kurniawan, Rulianto. 2008 Membangun Situs dengan PHP Untuk Orang Awam. Maxikom : Palembang 6. Nugroho, Bunafit. 2008. Membuat Website Sendiri Dengan PHP dan Mysql. MediaKita:Yogyakarta 7. Peranginangin, Kasiman 2006. Aplikasi Web dengan PHP dan MySQL. Andi:Yogyakarta

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -6 6 8. Prasetio, Adhi. 2011. Tip dan Trik Menjadi Master PHP. Media Kita : Jakarta

9. Raharjo, Budi dkk. 2010. Modul Pemrograman Web ( HTML, PHP & MySQL). Modula : Bandung 10.Saputra, Agus. 2011. Trik & Solusi Menjadi Master PHP. ElexMediaKomputindo:Jakarta

11.Setiawan, Andi. 2004. Mudah Tepat Singkat Pemrograman HTML. YramaWidya:Bandung 12.Simarmata, Janner 2007. Perancangan Basis Data. Andi:Yogyakarta

No. Rev JUDUL KODE M WAKTU Pertemu Ke (1) 1, 2 v. : 00 MATA KULIA MK/SKS U PERTEMUA uan Pokok Bahasan (2) Dasar-dasar We AH : Pemrog : TI208. AN : 4 Jam n Sub Poko ( eb • Konsep • Arsitektu • HTTP • Client S Program • Server S Program • Web Ser (PHPTri Berlaku

SAT

graman Web 0 / 2 ok Bahasan (3) dasar Web ur Web ide mming Side mming rver Software iad,XAMPP) u tgl : --/--/--

Y A Y A

P

P

O

O

LI

L

P R O G R A

Jl. Kolonel web

TUAN ACA

Tujuan Pembelajaran Umum (TIU) (4) Mahasiswa dapat mengetahui dan memahami dasar-dasar Web

A S A N M U

I

I

T

T

E

E

K

K

N

N

A M S T U D I T

Wahid Udin Lk. b: www.polsky.ac.id Tel. / Fax.: +

ARA PENGA

n Tujuan Pem Khusu (5 i 1. Mahasisw menerang dasar web arsitektur 2. Mahasisw menyebut menerang pengertian pengguna 3. Mahasisw menerang side dan s programm fungsinya

B A S E J A

N

N

I

I

K

K

S

S

E

E

T E K N I K I N F O

I Kel. Kayuara, d mail: polsky@po +62 714 321099

AJARAN (

Teori mbelajaran s (TIK) 5) wa dapat gkan konsep b dan r web. wa dapat t dan gkan n HTTP dan aannya. wa dapat gkan client server side ming dan a.

A H T E R A

E

E

K

K

A

A

Y

Y

U

U

O R M A T I K A

, Sekayu30711 olsky.ac.id

SAP)

i = 4 Jam Kegiatan (6) Tutorial, Diskusi Hal

U

U

Program Studi Evaluasi (7) Tugas mendownload dan menginstalasi salah satu web server softwar dan contoh program . : -4 1 : DIII Teknik I Acu (8 d b re Informatika uan 8)

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -4 2 4. Mahasiswa dapat

menyebutkan contoh web server dan melakukan instalasi. 3,4,5 HTML (Hyper Text Markup Languang e) • Struktur Dasar HTML • Bagian Head • Bagian Body • Memberi Komentar • Memberi Identitas • Memformat Dokumen HTML • Memformat Karakter • Menambahkan Gambar • Menggunakan Link • Menggunakan Tabel • Menggunakan Form • Menggunakan Frame Mahasiswa dapat mengetahui dan memahami HTML 1. Mahasiswa dapat membuat contoh sederhana menggunakan format teks dasar, URL, link, image.

2. Mahasiswa dapat membuat tabel, frame dan form

Tutorial, • Quiz Materi HTML • Tugas Membuat Web Statik Menggunaka n HTML 6,7 CSS (Cascadin g Style Sheet ) • Fonts • Colors • Images • Text Formatting • Indentation • Lists Mahasiswa dapat mengetahui dan memahami CSS 1. Mahasiswa dapat menerangkan definisi dan kegunaan CSS 2. Mahasiswa dapat menerangkan CSS property dan menggunakannya Tutorial, Tugas Mempercantik Tampilan Web Dengan CSS 8,9 Java Script • Pengantar Javascript

• Tipe Data dasar

• Tipe data bentukan

• Operator • Kondisional If Then Else Mahasiswa dapat mengetahui dan memahami JavaScript 1. Mengenal Pemrograman JavaScript. 2. Memahami Struktur JavaScript. 3. Mengenal macam-Tutorial, • Tugas Membuat Beberapa Contoh Penerapan Java Script

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -4 3 Switch…case • Looping For While Continue break

macam tipe data dan operator. 4. Mampu menerapkannya dalam pemrograman JavaScript. 5. Mengerti esensi penggunaan Percabangan (pemilihan/kodisional ) dalam JavaScript. 6. Memahami bentuk umum Percabangan. 7. Mengerti esensi penggunaan Pengulangan (Looping) dalam JavaScript. Pada Web • UTS Materi HTML, CSS, dan Java Script

10 UTS ( Ujian Tengah Semester ) 11,12,13 PHP • Dasar PHP • Variabel PHP • Operator • Kontrol • Fungsi • Form • Cookies • File

• Time dan Date

Mahasiswa dapat mengetahui dan memahami pemograman web dengan PHP Mahasiswa dapat menerangkanelemen-elemen dasarpemrograman web dengan PHPserta membuat contoh aplikasisederhana dengan menggunakan elemen-elemen dasar tersebut

Tutorial, • Quiz Materi PHP • Tugas Membuat Website dengan PHP 14,15,16, MySQL dengan PHP • Pengenalan MySQL • Tes Koneksi ke Server MySQL Mahasiswa mengetahui dan memahami konsep Mahasiswa dapat menerangkan pembuatan basis data dengan MySQL serta

Tutorial, • Tugas Kelompok Membuat Sistem

No. Rev. : 00 Berlaku tgl : --/--/-- Hal. : -4 4

• Membuat Database

pada MySQL

• Error handling

• Membuat tabel pada MySQL • Insert Data • View Data • Searching Data • Delete Data • Update Data pengaksesan basisdata dalam pemrograman web dengan PHP pengaksesannya dengan PHP serta membuat contoh aplikasi sederhana yang menggunakan database. Informasi Bebasis Web menggunaka n PHP dan My SQL • UAS materi PHP dan MySQL 17 Review Materi

Tujuan Instruksional Umum :

Mahasiswa dapat mengetahui dan memahami tentang HTML Tujuan Instruksional Khusus :

1. Mahasiswa dapat membuat contoh sederhana menggunakan format teks dasar, URL, link, image.

2. Mahasiswa dapat membuat table, frame dan form

BAB II

HTML (Hyper Text MarkUp Language)

 

 

 

 

 

 

2.1. Pendahuluan

HTML yang merupakan kepanjangan dari (Hyper Text MarkUp Language) memiliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). HTML bukan merupakan suatu bahasa pemrograman, karena sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan sebagai program. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ), dan disebut tag.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standart Generalized Mark-Up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

2.2 Struktur Dasar HTML

File-file HTML merupakan dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan maupun editing dokumen HTML dapat menggunakan berbagai macam editor, dalam hal ini digunakan Notepad. Struktur

dasar dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut:

Gambar 2.1. Struktur Dasar HTML. Keterangan :

a) <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.

b) <head> </head> : mendefinisikan head dalam sebuah file HTML.

c) <title> </title> : mendefinisikan judul yang hendak ditampilkan pada browser.

d) <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.

 

Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya Notepad. Dapat juga menggunakan HTML editor yang bersifat Visual, misalnya Frontpage.

Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi filenya, yaitu .htm atau .html.

Struktur Dasar HTML : <HTML> <HEAD> ……… </HEAD> <BODY> ……… </BODY> </HTML>

Contoh :

Gunakanlah teks editor (notepad), tuliskan kode dibawah ini : <HTML>

<HEAD>

<TITLE> Web Sederhana </TITLE> </HEAD>

<BODY>

Ini halaman web pertama saya </BODY>

</HTML>

Simpan dengan nama coba.htm, pada bagian save as type ubah menjadi all files. Setelah disimpan, buka internet explorer, klik File > Open > browse (cari file coba.htm) > Open

2.3. Bagian HEAD

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head – kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut.

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut: a) Menyediakan judul dokumen

b) Menjembatani hubungan antar dokumen

c) Memberitahu browser untuk membuat form pencarian d) Menyediakan metode untuk mengirim pesan ke tipe browser

Elemen yang mungkin terdapat pada bagian head :

a) Tag <TITLE>, digunakan untuk memberi judul dokumen. Penggunaannya adalah sebagai berikut :

<TITLE> Judul </TITLE>

b) Tag <BASE>, digunakan untuk menentukan basis URL sebuah dokumen. Penggunaannya adalah sebagai berikut berikut :

<BASE HREF=”URL”> Contoh :

<BASE HREF=”//www.alamat.com/direktori”>

c) Tag <LINK>, digunakan untuk menunjukkan relasi antar dokumen HTML. Tag ini mempunyai beberapa atribut :

Tabel 2.1. Jenis Atribut dan Fungsi Tag Link

ATRIBUT FUNGSI

HREF Menunjuk pada URL dokumen lain

REL Mendefinisikan relasi terhadap sebuah

dokumen dan dokumen lain yang berisi informasi tentang personil yang memberi kontribusi terhadap dokumen tersebut

REV Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain

TYPE Menentukan tipe dan parameter dari Penggunaannya adalah sebagai berikut :

<LINK[{REVIREL}=”eks”] HREF=”URL”> Contoh :

<LINK REV=”made” HREF=”mailto:nama@alamat.com”> <LINK REL=”toc” HREF=”contents.htm”>

<LINK REL=”index” HREF=”index.htm”>

<LINK REL=”copyright” HREF=”copyright.htm”>

d) Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar HTML Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML.

Tag <META> mempunyai atribut :

Tabel 2.2. Jenis Atribut dan Fungsi Tag Meta

ATRIBUT FUNGSI

HTTP-EQUIV Mendefinisikan properti dari elemen

NAME Menyediakan deskripsi tambahan dari elemen

URL Mendefinisikan target dokumen dari sebuah

CONTENT Menyediakan nilai respon dari properti

Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan contoh berikut ini :

<META HTTP-EQUIV=”refresh” CONTENT=”60”URL=”www.alamat.com”>

Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik, kemudian panggil dokumen baru pada www.alamat.com”. Jika atribut URL tidak disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan mengklik tombol Refresh/Reload pada browser.

Penggunaan elemen <META> yang paling populer adalah penggunaan properti Keyword dan Description. Kedua properti ini sangat berguna

untuk membantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut.

Contoh : <HTML> <HEAD>

<TITLE> General Officers of the US Army in the Civil War </TITLE>

<META NAME=”Keywords” CONTENT=”Yankee, Grand Army of the Republic, War Between the Satates”>

<META NAME=”Description” CONTENT=”A Listing of the General officers of the US Army in the Civil WAR”>

</HEAD>

2.4. Bagian BODY

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

Atributnya :

Tabel 2.3. Jenis Atribut dan Fungsi Tag </BODY>.

ATRIBUT FUNGSI

ALINK Menentukan warna link aktif

BACKGROUND Merujuk URL atau direktori dari file gambar yang

BGCOLOR Menentukan warna latar belakang

BGPROPERTIES Jika nilai atribut ini diisi “FIXED”, maka gambar latar

LEFTMARGIN Batas kiri dokumen

LINK Menentukan warna link yang belum dikunjungi

TOPMARGIN Menentukan batas atas

VLINK Menentukan warna link yang telah dikunjungi

Contoh : <HTML> <HEAD>

<TITLE> Penggunaan BODY </TITLE> </HEAD>

<BODY BGCOLOR=”Silver” TEXT=”Blue” ALINK=#000000 VLINK=#FF0000

LINK=”Green”>ini adalah contoh penggunaan body ini adalah sebuah

<A HREF=””> link </A> </BODY>

</HTML>

Gambar 2.3. Tampilan File Body.htm

Tabel 2.4. Warna dan Nilai

WARNA NILAI

Black #000000 Maroon #800000

Green #008000 Olive #808000 Navy #000080 Purple #800080 Teal #008080 Gray #808080 Silver #C0C0C0 Red #FF0000 Lime #00FF00 Yellow #FFFF00 Blue #0000FF Fuchsia #FF00FF Aqua #00FFFF White #FFFFFF 2.5. Memberi Komentar

Untuk mempermudah pembacaan kembali kode-kode HTML, kadang-kadang ditambahkan komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca pada browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda --> .

Contoh : <HTML> <HEAD>

<!-- ini adalah bagian head -->

</HEAD>

<BODY BGCOLOR=#FF0000 >

<!-- warna background adalah merah --> </BODY>

</HTML>

2.6. Memberi Identitas

Kadang-kadang orang yang merancang suatu halaman web ingin mencantumkan namanya pada dokumen web tersebut atau mungkin mencantumkan hak cipta terhadap dokumen tersebut. Untuk mencantumkan informasi-informasi tersebut digunakan tag <ADDRESS>. Umumnya informasi tersebut diletakkan pada bagian paling akhir suatu dokumen.

Contoh : <HTML> <HEAD>

<TITLE> Penggunaan Address </TITLE> </HEAD>

<BODY>

Selamat datang di web amatir <ADDRESS>

Dokumen ini di rancang oleh Ekkal Prasetyo <BR> Pada tanggal 13 Sept 2005

</ADDRESS> </BODY> </HTML>

2.7. Memformat Dokumen HTML

Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen. Tag-tag tersebut diantaranya adalah :

a) Tag <BR>, membuat baris baru Tidak memerlukan penutup </BR> b) Tag <P>, memulai paragaraf baru Tidak memerlukan penutup </P> c) Tag <HR>, membuat garis batas horizontal

Atrbutnya :

Tabel 2.5. Jenis Atribut dan Fungsi Tag <HR>

ATRIBUT FUNGSI

ALIGN Merupakan posisi vertikal garis pemisah. Nilainya adalah LEFT, RIGHT,atau CENTER

WIDTH Lebar dari garis batas. Nilai yang dimasukkan dapat berupa pixel

SIZE Menentukan tebal garis batas. NOSHADE Menonaktifkan efek tiga dimensi.

COLOR Menentukan warna garis batas.

d) Tag <Hn>, heading sebuah dokumen Nilai n berkisar antara 1 hingga 7. Contoh :

<HTML> <HEAD>

<TITLE> Format Dokumen HTML </TITLE> </HEAD>

<BODY>

Ini Web coba-coba saya <BR> Nama saya Ekkal Prasetyo <P>

Saya belajar web di Politeknik Sekayu Jl. Kolonel Wahid Udin, Kayuara, Sekayu <P>

Hobbi saya travelling, olahraga dan komputer <HR>

Terima kasih <HR>

<H1> Bab I HTML </H1> ini adalah isi bab 1

<H2> 1.1 subbab HTML </H2> ini adalah isi subbab 1.1

<H3> 1.1.1 Sub-subbab HTML </H3> ini adalah isi sub subbab 1.1.1 </BODY>

</HTML>

e) Tag <PRE>, membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR> jadi tidak diperlukan lagi.

Contoh :

<HTML> <HEAD>

<TITLE> Web Sederhana </TITLE> </HEAD>

<BODY> <PRE>

Tampilan ini sama dengan tampilan di teks editor. Klasemen

Team Main Menang Seri Kalah

===========================================

Team A 3 2 1 0

Team B 3 2 0 1

Team c 3 1 1 1

============================================== kode program : For I = 1 to 10

For J = 1 to 5 A(I,J)=I*J Next Next </BODY> </HTML>

f) Tag <CENTER>, Teks rata tengah Contoh :

<HTML> <HEAD>

<TITLE> Web Sederhana </TITLE> </HEAD>

<BODY> <Center>

Teks ini rata tengah </CENTER>

</BODY> </HTML>

Gambar 2.6. Tampilan Hasil_Tagcenter.html

g) Tag <UL> dan <OL>

Suatu cara pemformatan lain yang akan sangat banyak berguna adalah LIST (daftar). Ada dua macam daftar, yaitu ORDERED lists (OL) dan UNORDERED lists (UL).

Ini adalah ordered list : 1. Puntadewa

2. Bima

Ini adalah unordered list : merah

3. Arjuna 4. Nakula 5. Sadewa lama baru ungu Contoh 1: <HTML> <HEAD> <TITLE>Order List</TITLE> </HEAD> <BODY>

Kepribadian yang saya sukai <UL>

<LI>pribadi yang jujur <LI>pribadi yang ramah <LI>rumah pribadi <LI>mobil pribadi <LI>sekretaris pribadi </UL> </BODY> </HTML>

Contoh 2: <HTML> <HEAD> <TITLE>Order List</TITLE> </HEAD> <BODY>

Kepribadian yang saya sukai <OL>

<LI>pribadi yang jujur <LI>pribadi yang ramah <LI>rumah pribadi <LI>mobil pribadi <LI>sekretaris pribadi </OL> </BODY> </HTML>

h) Tag <ACRONYM>, untuk memberi keterangan atau screen tips Contoh : <html> <head> <title>Singkatan</title> </head> <body>

<acronym title="word wide web"> www

</acronym>

<p>Bila kita meletakkan kursor di atas kata www maka muncul kata word wide web pada screen

tips</p> </body> </html>

2.8. Memformat Karakter

Format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat sebuah dokumen HTML yang menarik.Pemformatan karakter tersebut mencakup beberapa hal :

• Logical Format • Physical Format • Tag <BLOCKQUOTE> • Tag <FONT> • Karakter Khusus Logical Format

Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Tag-tag yang termasuk logical format adalah sebagai berikut :

• <CITE>, digunakan untuk menandai suatu kutipan (Citation).

• <CODE>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C.

• <EM>, digunakan untuk menandai suatu teks yang ditekankan oleh penulis.

• <KBD>, dugunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.

• <SAMP>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.

• <STRONG>, digunakan untuk menandai bagian yang terpenting dari suatu teks.

• <VAR>, digunakan untuk menampilkan nama variabel.

• <DFN>, digunakan untuk menandai sebuah subdefinisidari daftar definisi. Semua tag tersebut memerlukan tag penutupnya masing-masing.

<HTML> <HEAD>

<TITLE> Logical Format </TITLE> </HEAD>

<BODY>

<CITE> Tom Sawyer </CITE> adalah salah satu

tokoh penting di dunia satra amerika. <BR><BR>

Kode yang paling pertama dipelajari oleh programmer C adalah :

<CODE>puts (“Hello World!”);</CODE> <BR><BR>

Ia berkata , “Sekali tidak tetap <EM>tidak</EM>.” <BR> <BR>

Untuk berpindah ke direktor root , ketikkan <KBD>cd / </KBD>. <BR> <BR> Pada abjad terdapat 5 huruf vokal, yaitu <SAMP>AEIUO</SAMP>. <BR> <BR>

Hal yang harus diingat-ingat adalah <STRONG>Jangan Panik !</STRONG> <BR> <BR> Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali . <BR> <BR>

<DFN>Trenggiling adalah hewan pemakan semut. </DFN> </BODY>

</HTML>

Physical Format

Physical format adalah format terhadap fisik suatu font. Tag-tag yang termasuk physical format adalag sebagai berikut :

• <B>, untuk menampilkan huruf tebal. • <I>, untuk menampilkan huruf miring.

• <U>, untuk menampilkan garis bawah pada teks.

• <TT>, untuk menampilkan huruf seperti huruf mesin ketik.

• <STRIKE>, untuk menampilkan garis horizontal pada bagian tengah huruf. • <BIG>, untuk menampilkan ukuran huruf yang lebih besar.

• <SMALL>, untuk menampilkan ukuran huruf yang lebih kecil. • <SUB>, untuk menampilkan subscript.

• <SUP>, untuk menampilkan superscript.

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

<HTML> <HEAD>

<TITLE> Memformat Karakter </TITLE> </HEAD>

<BODY>

<B> kalimat ini akan dicetak tebal. </B><BR> <I> kalimat ini akan dicetak miring </I><BR> <U> kalima ini akan bergaris bawah </U><BR>

<STRIKE> kalimat ini akan bergaris tengah </STRIKE> </BODY>

Gambar 2.11. Tampilan Hasil_Physical_Format.html Tag <BLOCKQUOTE>

Digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen, misalnya kutipan kitab suci, kata mutiara dan lain - lain. Teks yang diberi ini akan menjorok ke dalam.

Contoh : <HTML> <HEAD>

<TITLE> Penggunaan Blockquote </TITLE> </HEAD>

<BODY> <PRE>

Definisi Sistem menurut Steven B Shop adalah : <BLOCKQUOTE> Sistem adalah kumpulan dari komponen-komponen yang saling bekerjasama untuk mencapai suatu tujuan.

</BLOCKQUOTE> </BODY>

Gambar 2.12. Tampilan Hasil_ Blockquote.html Tag <FONT>

Digunakan untuk mengatur jenis, ukuran dan warna font Contoh :

<HTML> <HEAD>

<TITLE> Memformat Font </TITLE> </HEAD>

<BODY> <PRE>

<FONT FACE=”Arial” SIZE=1 COLOR=#FF0080>

Jenis font ini adalah Arial,berwarna biru,ukurannya 1 </FONT>

<FONT FACE=”Monotype Corsiva” SIZE=5 COLOR=BLUE>

Jenis font ini adalah Arial,berwarna biru,ukurannya 5 </FONT>

</BODY> </HTML>

Gambar 2.13. Tampilan Hasil_ TagFont.html Karakter Khusus

Kadang-kadang dalam suatu dokumen HTML ingin ditampilkan karakter-karakter tertentu, misalnya tanda lebih besar, lebih kecil dan lain-lain.

Tabel 2.6. Karakter ISO Latin-1

&Agrave; À capital A, grave

accent &iuml; ï

small i, diæresis/umlaut

&agrave; à small a, grave

accent &ETH; Ð

capital Eth, Icelandic

&Aacute; Á capital A, acute

accent &eth; ð small eth, Icelandic

&aacute; á small a, acute

&Acirc; Â capital A,

circumflex &ntilde; ñ small n, tilde

&acirc; â small a,

circumflex &Ograve; Ò

capital O, grave accent

&Atilde; Ã capital A, tilde &ograve; ò small o, grave accent

&atilde; ã small a, tilde &Oacute; Ó capital O, acute accent

&auml; ä small a,

diæresis/umlaut &Ocirc; Ô

capital O, circumflex

&Aring; Å capital A, ring &ocirc; ô small o, circumflex

&aring; å small a, ring &Otilde; Õ capital O, tilde

&AElig; Æ capital AE ligature &otilde; õ small o, tilde

&aelig; æ small ae ligature &Ouml; Ö capital O, diæresis/umlaut

&Ccedil; Ç capital C, cedilla &ouml; ö small o, diæresis/umlaut

&ccedil; ç small c, cedilla &Oslash; Ø capital O, slash

&Egrave; È capital E, grave

&egrave; è small e, grave

accent &Ugrave; Ù

capital U, grave accent

&Eacute; É capital E, acute

accent &ugrave; ù

small u, grave accent

&eacute; é small e, acute

accent &Uacute; Ú capital U, acute accent &Ecirc; Ê capital E, circumflex &uacute; ú small u, acute accent &ecirc; ê small e, circumflex &Ucirc; Û capital U, circumflex &Euml; Ë capital E,

diæresis/umlaut &ucirc; û small u, circumflex

&euml; ë small e,

diæresis/umlaut &Uuml; Ü

capital U, diæresis/umlaut

&Igrave; Ì capital I, grave

accent &uuml; ü

small u, diæresis/umlaut

&igrave; ì small i, grave

accent &Yacute; Ý

capital Y, acute accent

&Iacute; Í capital I, acute

accent &yacute; ý

small y, acute accent

&iacute; í small i, acute

accent &THORN; Þ capital Thorn, Icelandic &Icirc; Î capital I, circumflex &thorn; þ small thorn, Icelandic

&icirc; î small i, circumflex &szlig; ß small sharp s, German sz &Iuml; Ï capital I, diæresis/umlaut &yuml; ÿ small y, diæresis/umlaut

Tabel 2.6. Karakter-karakter ISO 8859-1

&#160 &nbsp; non-breaking space &#161 &iexcl; ¡ inverted exclamation mark &#162 &cent; ¢ cent sign

&#163 &pound; £ pound sign &#164 &curren; ¤ general currency sign &#165 &yen; ¥ yen sign &#166 &brvbar; ¦ broken (vertical) bar &#167 &sect; § section sign &#168 &uml; ¨ umlaut/dieresis &#169 &copy; © copyright sign &#170 &ordf; ª ordinal indicator, fem &#171 &laquo; « angle quotation mark, left &#172 &not; ¬ not sign &#173 &shy; soft hyphen &#174 &reg; ® registered sign &#175 &macr; ¯ macron

&#177 &deg; ° degree sign &#177 &plusmn; ± plus-or-minus sign &#178 &sup2 ² superscript two &#179 &sup3 ³ superscript three &#180 &acute; ´ Acute accent &#181 &micro; µ micro sign

&#183 &middot; · middle dot &#184 &cedil; ¸ cedilla &#185 &sup1; ¹ superscript one &#186 &ordm; º ordinal indicator, male

&#187 raquo; » angle quotation mark, right &#188 &frac14; ¼ fraction one-quarter

&#189 &frac12; ½ fraction one-half &#190 &frac34; ¾ fraction three-quarters &#191 &iquest; ¿ inverted question mark &#215 &times; × multiply sign

&#247 &div; ÷ division sign

2.9. Memformat Dokumen HTML

Dokumen HTML akan menarik bila ditambah gambar. Format gambar yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Format gambar yang dikenal oleh hampir semua browser adalah GIF dan JPEG.

Untuk menambah gambar digunakan tag <IMG>. Tag <IMG> mempunyai atribut :

Tabel 2.7. Jenis Atribut Tag <IMG>

ATRIBUT KETERANGAN

SRC Merujuk URL atau direktori file gambar ALIGN Posisi teks di sekitar gambar, nilainya adalah TOP,

MIDDLE, BOTTOM, LEFT,RIGHT WIDTH Lebar gambar dalam pixel HEIGHT Tinggi gambar dalam pixel

ALT Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan.

Contoh :

<HTML> <HEAD>

<TITLE> Menambah Gambar </TITLE> </HEAD>

<BODY>

<IMG SRC=”c:\windows\bubbles.bmp” ALT=”GambarGelembung” ALIGN=Middle>

Gambar ini terdapat pada windows 98 secara default, anda boleh menggantinya.

</BODY> </HTML>

2.10. Menggunakan LINK

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan Anchor, yaitu tag <A>.

Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribut HREF digunakan jika sebuah anchor akan digunakan sebagai link, sedangkan atribut NAME digunakan jika anchor akan digunakan sebagai tujuan.

Contoh :

<HTML> <HEAD>

<TITLE> Penggunaan Link </TITLE> </HEAD>

<BODY>

<A HREF=”http://www.yahoo.com”> klik disini </A> untuk menuju situs yahoo.com. <BR>

atau dapat juga mengklik gambar ini : <A HREF=”http://www.yahoo.com”>

<IMG SRC=”c:\windows\tintin.jpg” ALT=”www.yahoo.com”></A>

<BR><BR> </BODY> </HTML>

Gambar 2.14. Tampilan Tag_LINK.html

2.11. Menggunakan Tabel

HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu : Tag <TABLE> : untuk mendefinisikan sebuah tebel Tag <TR> : untuk mendefinisikan baris tabel

Tag <TH> : untuk mendefinisikan judul tiap kolom atau baris Tag <TD> : untuk mendefinisikan isi tiap kolom

Contoh :

<HTML> <HEAD>

<TITLE> Menggunakan Tabel </TITLE> </HEAD>

<TABLE BORDER> <TR> <TH> Kolom 1 </TH> <TH> Kolom 2 </TH> <TH> Kolom 3 </TH> </TR> <TR> <TD> Baris 1 kolom 1 </TD> <TD> Baris 1 kolom 2 </TD> <TD> Baris 1 kolom 3 </TD> </TR> TR> <TD> Baris 2 kolom 1 </TD> <TD> Baris 2 kolom 2 </TD> <TD> Baris 2 kolom 3 </TD> </TR> </TABLE> </BODY> </HTML>

Atribut untuk tag <TABLE> adalah sebagai berikut : Tabel 2.8. Jenis Atribut Tag <TABLE>

ATRIBUT KETERANGAN

ALIGN Posisi horizontal tabel

BACKGROUND Menentukan gambar latar belakang tabel

BGCOLOR Menentukan warna latar belakang tabel

BORDER Menentukan tebal bingkai tabel

BORDERCOLOR Menentukan warna bingkai tabel

BORDERCOLORLIGHT Menentukan warna depan bingkai tabel

BORDERCOLORDARK Menentukan warna bayangan bingkai tabel

CELLSPACING Menentukan jarak spasi antar sel

CELLPADDING Menentukan jarak isi sel dengan bingkai

HEIGHT Menentukan tinggi tabel

WIDTH Menentukan lebar tabel

VALIGN Menentukan posisi vertikal teks dalam sel

Sedangkan atribut tag <TD> adalah : Tabel 2.9. Jenis Atribut Tag <TD>

ATRIBUT KETERANGAN

ALIGN Posisi horizontal teks dalam sel

BACKGROUND Menentukan gambar latar belakang sel

BGCOLOR Menentukan warna latar belakang sel

BORDERCOLOR Menentukan warna bingkai sel

BORDERCOLORLIGHT Menentukan warna depan bingkai sel

BORDERCOLORDARK Menentukan warna bayangan bingkai sel

COLSPAN Menentukan jumlah kolom yang digabung

HEIGHT Menentukan tinggi sel

NOWRAP Menentukan teks agar tetap satu baris

ROWSPAN Menentukan lebar tabel

VALIGN Menentukan posisi vertikal teks dalam sel

2.12. Menggunakan Form

Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user untuk kemudian diolah. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side.

Untuk membuat sebuah form, tag-tag yang diperlukan adalah : • Tag <FORM>

• Tag <TEXTAREA> • Tag <SELECT> • Tag <INPUT> Tag <FORM>

Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form. Tag ini mempunyai dua atribut, yaitu METHOD dan ACTION.

Tabel 2.10. Jenis Atribut Tag <FORM>

ATRIBUT KETERANGAN

METHOD Untuk menentukan metode pengolahan form

ACTION Untuk menentukan URL atau direktori dari file yang digunakan untukmengolah form tersebut

Tag <TEXTAREA>

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

Tabel 2.11. Jenis Atribut Tag <TEXTAREA>

ATRIBUT KETERANGAN

NAME Mendefinisikan nama objek textarea ROWS Menentukan jumlah baris textarea COLS Menentukan lebar textarea

Contoh : <HTML> <HEAD> <TITLE>Text Area</TITLE> </HEAD> <BODY> <FORM>

<TEXTAREA NAME=teksarea1 ROWS=10 COLS=40> Teks ini akan tertulis di dalam textarea </TEXTAREA>

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

Gambar 2.16. Tampilan Tag_TextArea.html

Tag <SELECT>

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

Tabel 2.12. Jenis Atribut Tag <SELECT>

ATRIBUT KETERANGAN

NAME Mendefinisikan nama dari objek select

SIZE Menentukan berapa pilhan yang akan ditampilkan. Jika atribut ini tidak disertakan atau diberi nilai 1, pilihan akan ditampilkan sebagai drop- down list. Jika diberi nilai 2 atau lebih, pilihan akan ditampilkan sebagai scroll box. Jika nilai SIZE lebih besar dari jumlah pilihan yang ada pada <SELECT>, pilihan kosong akan ditambahkan. Jika user memilih pilihan ini maka nilainya adalah kosong.

MULTIPLE Mengizinkan untuk memilih lebih dari satu

Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>. Tag <OPTION> sendiri mempunyai dua atribut yaitu VALUE yang digunakan untuk memberi nama item pilihan dan SELECTED yang menunjukkan pilihan yang terpilih secara deafult. Tag <OPTION> tidak perlu ditutup dengan </OPTION>. Contoh : <HTML> <HEAD> <TITLE>SELECT</TITLE> </HEAD> <BODY>

Berapa besar memori yang Anda pakai : <FORM>

<SELECT NAME=”memori”>

<OPTION SELECTED VALUE=”16 MB”>16 MB <OPTION VALUE=”32 MB”>32 MB <OPTION VALUE=”64 MB”>64 MB <OPTION VALUE=”128 MB”>128 MB <OPTION VALUE=”128keatas”>Lebih 128 MB </SELECT> </FORM> </BODY> </HTML>

Gambar 2.17. Tampilan Tag_Select.html Tag <INPUT>

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

Tabel 2.13. Jenis Atribut Tag <INPUT>

ATRIBUT KETERANGAN

NAME Mendefinisikan nama dari objek input. Atribut ini harus dituliskan kecuali untuk tipe submit dan clear

SIZE Menentukan ukuran kotak teks

MAXLENGTH Menentukan jumlah maksimum karakter yang dapat VALUE Untuk kotak teks, menentukan teks yang tertulis. Untuk

check box atauradio, menentukan nilai item yang dipilih. Untuk Submit dan Reset, menentukan teks yang tertulis pada tombol

CHECKED Hanya digunakan untuk check box atau radio. Menentukan pilihan yang terpilih secara default. TYPE Menentukan tipe input yang dibuat

Tipe input yang dapat dibuat adalah :

• Text, digunakan untuk membuat kotak teks

• Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.

• Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.

• Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.

• Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.

• Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.

Contoh : <HTML> <HEAD> <TITLE>Belajar Form</TITLE> </HEAD> <BODY> <FORM> <PRE>

Silakan masukkan data pribadi Anda

Nama :<INPUT TYPE=text NAME=txtnama>

Alamat :<INPUT TYPE=text NAME=txtalamat

SIZE=50>

No Telpon :<INPUT TYPE=text NAME=txttelpon

SIZE=10>

Masukkan Password Anda : <INPUT TYPE=password MAXLENGTH=6> Hobby Anda (boleh lebih dari satu) : <INPUT TYPE=checkbox NAME=hobby VALUE=baca> Membaca <INPUT TYPE=checkbox NAME=hobby VALUE=ORaga> Olah

Raga

<INPUT TYPE=checkbox NAME=hobby VALUE=nonton> Nonton Film

<INPUT TYPE=checkbox NAME=hobby VALUE=travel> Travelling

<!--perhatikan bahwa untuk satu kelompok pilihan yang sama nilai atribut NAME harus sama-->

Jenis Kelamin :

<INPUT TYPE=radio NAME=jk VALUE=pria> Laki-laki <INPUT TYPE=radio NAME=jk VALUE=wanita> Perempuan <HR>

<INPUT TYPE=submit VALUE=kirim> <INPUT TYPE=Reset VALUE=hapus>

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

2.13. Menggunakan Frame

Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-masing bagian terdiri dari dokumen HTML tersendiri. Frame pertama kali diperkenalkan oleh Netscape Navigator 2.0.

Untuk membuat sebuah frame, tag yang digunakan adalah : • Tag <FRAMESET>

• Tag <FRAME>

• Tag <NOFRAME>, digunakan untuk menampilkan sebuah alternatif dokumen jika browser tidak mendukung penggunaan frame. Sebuah frame dapat didefinisikan di dalam frame lain.

Tag <FRAMESET> mempunyai beberapa atribut : Tabel 2.14. Jenis Atribut Tag <FRAMESET>

ATRIBUT KETERANGAN

ROWS Membuat frame secara mendatar (baris) sekaligus mendefinisikan labar masing-masing

COLS Membuat frame secara vertikal (kolom) sekaligus mendefinisikan labar masing-masing

BORDERCOLOR Mendefinisikan warna bingkai frame

Untuk mendefinisikan lebar frame pada atribut ROWS dan COLS ada tiga cara yang dapat digunakan, yaitu dengan nilai tetap, nilai persentase, dan nilai proporsional. Misalnya ingin dibuat tiga buah frame, maka penggunaannya adalah sebagai berikut :

¾ Dengan nilai tetap

<FRAMESET ROWS=”100,240,400”> ¾ Dengan nilai persentase

<FRAMESET COLS=”30%,40%,30%”> ¾ Dengan nilai proporsional

<FRAMESET ROWS=” *,2*,3*”>

kurang baik karena jika resolusi monitor user tidak sama dengan resolusi monitor pada saat perancangan frame, maka frame yang terbentuk akan menjadi kacau. Dengan nilai persentase, lebar setiap frame didefinisikan sebagai persentase dari lebar jendela browser sehingga resolusi monitor tidak akan berpengaruh.

Dengan nilai proporsional, lebar setiap frame juga didefinisikan sebagai persentase dari lebar jendela browser, hanya saja pembacaannya agak berbeda. Misalnya nilai proporsionalnya adalah “*,2*,*”, jumlah bintang seluruhnya adalah 1+2+1=4, frame pertama akan memiliki lebar ¼ dari jendela browser, frame kedua 2/4 atau ½ dari jendela browser, dan frame ketiga ¼ dari jendela browser.

Tag <FRAME> mempunyai atribut : Tabel 2.15. Jenis Atribut Tag <FRAME>

ATRIBUT KETERANGAN

SRC Menentukan nama file HTML yang digunakan sebagai isi frame

MARGINHEIGHT Menentukan batas atas dan bawah antara dokumen dengan bingkai dalam pixel

MARGINWIDTH Menentukan batas kiri dan kanan antara dokumen dengan bingkai dalam pixel

SCROLLING Menentukan apakah frame dapat memiliki scroll bar. Nilainya adalah YES, NO, AUTO

NORESIZE Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya

NAME Mendefinisikan nama dari objek frame. Nama ini dapat digunakan sebagai tujuan sebuah link

Contoh :

<html> <head>

<title>Frame Kiri</title> </head>

<body bgcolor = "white"> <h1>Frame di Sebelah Kiri</h1> </body>

</html>

Simpan dengan nama : framekiri.htm <html>

</head>

<title>Frame Kanan</title> <head>

<body bgcolor = "white">

<h1>Frame di Sebelah Kanan</h1> </body>

</html>

Simpan dengan nama : framekanan.htm <html>

<head>

<title>Contoh Penggunaan Frame</title> </head> <frameset cols=30%,*"> <frame src="framekiri.htm"> <frame src="framekanan.htm"> </frameset> </html>

¾ HTML yang merupakan kepanjangan dari (Hyper Text MarkUp Language) memiliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya Notepad.

¾ Sruktur dasar HTML terdiri dari : 1) <html> </html>

mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.

2) <head> </head>

mendefinisikan head dalam sebuah file HTML. 3) <title> </title>

mendefinisikan judul yang hendak ditampilkan pada browser. 4) <body> </body>

mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.

¾ Beberapa hal yang dapat dilakukan oleh HTML dalam mendesain halaman web adalah antara lain : memberi komentar, memberi identitas, memformat dokumen html, memformat karakter, menambahkan gambar, menggunakan link, menggunakan table, menggunakan form, menggunakan frame

1. Jelaskan yang anda ketahui tentang HTML ?

2. Jelaskan fungsi elemen – elemen pada bagian Head ? 3. Jelaskan yang dimaksud dengan Link ?

4. Tuliskan beberapa Tag yang biasa digunakan dalam sebuah form ? 5. Jelaskan fungsi dari tag berikut ini :

a. Tag <TABLE> b. Tag <TR> c. Tag <TH> d. Tag <TD>

Buatlah sebuah website pribadi yang terdiri dari beberapa halaman yang terdiri hari halaman utama, galeri foto, biodata dan form buku tamu yang saling berhubungan dengan menggunakan HTML dengan bantuan notepad !

TUGAS

LATIHAN