Pemrograman Web

Modul
Pemrograman Web
NANANG SUARTO
NEXT
Konsep Dasar Web Design
 Perencanaan website
Proses ini merupakan awal dalam
merencanakan halaman web. Dimulai
dengan mengumpulkan seluruh data
serta informasi kemudian hasil akhirnya
adalah sebuah “site map” lalu dimulai
dengan merancang tata letak (LayOut)
halaman, biasanya dilakukan mendesain
tata letak halaman depan dan halaman
kedua. Dalam mendesain halaman ini
beberapa komponen penting biasanya
masuk adalah content, rencana letak
image, copyright/hak cipta (bagian
footer), serta komponen website dan hal
lain yang dianggap perlu (animasi,
video, musik, dll).
NEXT
BACK NEXT
 Desain Halaman Web Dasar
Berdasarkan hal diatas selanjutnya kita mulai melakukan desain web dengan
menterjemahkan perencanaan ke dalam software desain, keahlian yang mesti
diperdalam adalah typografi (kemampuan memilih font yang tepat), tata
letak halaman (menguasai kemampuan membagi ruang halaman),
pewarnaan (menguasai konsep warna dan pemilihan warna berdasarkan
warna perusahaan dan teori pencampuran warna). Software yang digunakan
salah satunya Adobe Photoshop, dengan mempelajari pembuatan
tombol/navigasi, background, bekerja dengan teks, manipulasi gambar/image,
dan khususnya memperdalam teknik – teknik desain website.
BACK NEXT
 Bagaimana komentar Anda tentang Template Web berikut?...
BACK NEXT
BACK NEXT
BACK NEXT
BACK NEXT
Dasar Skrip / Tag HTML
Pertanyaan mendasar dari web designer pemula:
 Sulitkah pemrograman HTML?....
 Apa yang dimaksud tag dalam HTML?...
 Bagaimana belajar dari Design Web yang sudah ada?...
BACK NEXT
<html>
<head>
<title>Judul / Title</title>
</head>
<body>
Isi / Content
</body>
</html>
BACK NEXT
Heading
<html>
<head>
<title>Latihan 01</title>
</head>
<body>
<h1> Heading 1 - 24 Point </h1>
Normal body text - 12 Point
</body>
</html>
BACK NEXT
Paragraf dan Break
<html>
<head>
</head>
<body>
Universitas Narotama Surabaya
<br>
Fakultas Ilmu Komputer
<p>
Jurusan Sistem Komputer & Sistem
Informasi
</body>
</html>
BACK NEXT
HR (Horizontal Rule)
<html>
<head>
</head>
<body>
<h1>Universitas Narotama Surabaya</h1>
<hr>
</body>
</html>
BACK NEXT
Font
<html>
<head>
</head>
<body>
<font face=verdana size=3
color=blue>Fakultas Ilmu
Komputer</font>
</body>
</html>
BACK NEXT
Soal (1)
Tuliskan Source Code dari tampilan berikut:
VIEW
BACK NEXT
Soal (2)
VIEW
BACK NEXT
Soal (3)
VIEW
BACK NEXT
Tugas (1)
 Mencari artikel dengan tema Design Web
 Pelajari dengan seksama artikel yang Anda dapatkan
BACK NEXT
Dasar Tag HTML
 Catatan:
Jika Anda ingin menambahkan komentar pada dokumen HTML,maka

tulislah Tag <!...................>,misal:
<!perubahan terakhir 27/6/96>
NEXT
Dasar Tag HTML
Table
Salah satu cara yang paling kompak dan paling mudah dibaca dalam
menampilkan item informasi adalah dengan tabel.
Manfaat Tabel:
 Tabel dapat digunakan untuk menampilkan teks, link, grafik atau item lainnya
yang dapat dikirimkan ke tempat lain manapun melalui halaman web.
 Tabel dapat digunakan untuk menyajikan informasi, atau bahkan dapat diperkuat
dengan batas, warna, dan grafik sedemikian rupa, sehingga tabel itu sendiri
menjadi item – item dekorasi.
NEXT
Dasar Tag HTML
Table
<table>
<tr>
<td>Columns Item</td>
</tr>
<tr>
</tr>
</table>
Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap
item diapit dengan tag <td></td>, dan setiap baris diapit dengan tag
<tr></tr>.
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Earth</td>
<td>Air</td>
</tr>
<tr>
<td>Fire</td>
<td>Water</td>
</tr>
</table>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Table
Table Properties:
 BORDER = akan memberikan garis pembatas pada tabel.
 CELLSPACING = akan menset jarak dalam piksel antara batas dalam dan batas
luar.
 CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya.
 ALIGN = penjajaran rata kanan, kiri atau tengah.
 BGCOLOR = akan memberikan efek warna pada tabel.
 ROWSPAN = untuk menset jumlah baris ke bawah.
 COLSPAN = untuk menset jumlah kolom ke kanan.
 WIDTH = untuk menset batas lebar / panjang tabel.
 HEIGHT = untuk menset batas tinggi tabel.
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3>
<tr>
<td align=center>NIM</td>
<td align=center>NAMA LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK NEXT
Dasar Tag HTML
Table
(kolom bewarna)
<html>
<head>
</head>
<body>
<table border=1 cellpadding=3 cellspacing=3>
<tr bgcolor=silver>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3 align=center>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=silver>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3 align=center>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=silver>
<td align=center colspan=2>
NIM & NAMA LENGKAP
</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table></body></html>
BACK NEXT
Dasar Tag HTML
 Soal (8)
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (9)
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (10)
VIEW
BACK NEXT
Dasar Tag HTML
 Images
Tag HTML untuk memasukkan gambar:

<img src=filename>
Catatan: img src=image source
BACK NEXT
Dasar Tag HTML
 Images
Images Properties:
 HSPACE = memberikan spasi di kanan dan di kiri gambar.
 VSPACE = memberikan spasi di atas dan di bawah gambar.
 WIDTH = untuk menset batas lebar / panjang gambar.
 HEIGHT = untuk menset tinggi gambar.
 BORDER = memberikan garis batas yang mengelilingi gambar.
BACK NEXT
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<img src=test.gif
width=400 height=300>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Center</h2>
<center>
<img src= test.jpg
width=400 height=300>
</center>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Border</h2>
<center>
<img src= test2.jpg
width=400 height=300 border=1>
</center>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Images & Body Background
<html>
<head>
</head>
<body background=bg.gif>
</body>
</html>
VIEW
BACK NEXT
Dasar Tag HTML
 Images & Table
<html>
<head>
</head>
<body>
<table border=1 cellpadding=3
cellspacing=3>
<tr align=center>
<td background=bg2.gif>NIM</td>
<td background=bg2.gif>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
VIEW
BACK NEXT
Dasar Tag HTML
 Images & Table
<html>
<head>
</head>
<body>
<table border=10 cellspacing=10 cellpadding=10>
<tr>
<td><img src=photo1.jpg width=200 height=200></td>
</tr>
<tr>
<td>Wallpaper1.JPG 800 X 600</td>
</tr>
</table>
</body>
</html>
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (11)
Filename:logo_unnar.gif
Size:250X250
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (12)
Filename:bg2.gif
Size:7X30
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (13)
Filename:photo1.gif
Size:300X400
Filename:photo2.gif
Size:300X400
VIEW
BACK NEXT
Dasar Tag HTML
Link
Tag Link pada HTML:

<a href=url/filename>……..</a>
Catatan:
HREF=Hypertext REFerence
NEXT
Dasar Tag HTML
Link URL
<html>
<head>
</head>
<body>
<a href=http://yahoo.com>Yahoo</a>
<p>
<a href=http://google.com>Google</a>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Link File
<html>
<head>
</head>
<body>
<a href=latihan_27.html>Latihan 27</a>
<p>
<a href=latihan_28.html>Latihan 28</a>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Link E-mail
<a href=mailto:nama_email>Send to E-mail</a>
BACK NEXT
Dasar Tag HTML
Marquee
Marquee = Menampilkan objek dengan memberikan efek

berjalan.
BACK NEXT
Dasar Tag HTML
Marquee
Tag Marquee pada HTML:

<marquee behavior=…>……..</marquee>
BACK NEXT
Dasar Tag HTML
Marquee
Style Maquee:
 ALTERNATE
 SCROLL
 SLIDE
BACK NEXT
Dasar Tag HTML
Marquee
Direction Maquee:
 Down
 Left
 Right
 Up
BACK NEXT
Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate direction=up>Universitas Narotama
Surabaya</marquee>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate width=100>Universitas Narotama
Surabaya</marquee>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate width=100 scrolldelay=500>
</marquee>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Soal
 Tuliskan Source Code dari tampilan berikut:
PREVIEW BACK NEXT

Dasar Tag HTML
Soal
PREVIEW BACK NEXT

Dasar Tag HTML
Soal
PREVIEW BACK NEXT

Dasar Tag HTML
Form
Awal formulir ditandai dengan Tag <FORM>, dan berisi dua kata kunci:
METHOD dan ACTION.
<form name=nama_form method=post/get action=nama_file/email>
BACK NEXT
Dasar Tag HTML
Form
<html>
<head>
</head>
<body>
<form name=mhs_baru method=post action=proses.php>
………………
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Form
Input Text:
<input name=nama_input type=text size=lebar_input maxlength=kar._maks.>
<html>
<head>
</head>
<body>
<h2>Form Mahasiswa</h2>
<form name=form_mahasiswa>
NIM<br>
<input name=nim type=text size=20
maxlength=8><br>
Nama Lengkap<br>
<input name=nama type=text size=40>
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Form
Radio Button:
<input name=nama_input type=radio checked>
<html>
<head>
</head>
<body>
<form name=form_jeniskelamin>
Jenis Kelamin:<br>
<input name=gender type=radio checked>
Laki-laki<br>
<input name=gender type=radio>
Perempuan
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Form
Check Box:
<input name=nama_input type=checkbox checked>
<html>
<head>
</head>
<body>
<form name=form_fak>
Fakultas Ilmu Komputer:<br>
<input name=si type=checkbox checked>
Sistem Informasi<br>
<input name=sk type=checkbox>
Sistem Komputer
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Form
Drop-down List:
<select name=nama_list>
<option value=nama_opsi1>…</option>
</select>
BACK NEXT
Dasar Tag HTML
Form
Drop-down List:
<html>
<head>
</head>
<body>
<form name=list>
Level:<br>
<select name=level>
<option value=stand>Standart</option>
<option value=prof>Professional</option>
</select>
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Form
Textarea:
<textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar>
</textarea>
BACK NEXT
Dasar Tag HTML
Form
Textarea:
<html>
<head>
</head>
<body>
<form name=alamat>
Alamat:<br>
<textarea name=alamat rows=4 cols=40>
</textarea>
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Form
Button:
<input type=submit/reset value=caption>
Catatan:
type=submit, akan mendefinisikan sebagai tombol untuk menyerahkan
umpan balik.
type=reset, akan mendefinisikan tombol untuk menghapus isi formulir.
BACK NEXT
Dasar Tag HTML
Form
Button:
<html>
<head>
</head>
<body>
<form name=frm_submit method=post
action=latihan_39.html>
Alamat:<br>
<textarea name=alamat rows=4 cols=40>
</textarea><br>
<input type=submit value=Kirim>
<input type=reset value=Reset>
</form>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Soal (14)
Catatan: Username dan Password panjang karakter = 10
BACK NEXT
Dasar Tag HTML
 Soal (15)
Catatan: Event submit terletak pada list
BACK NEXT
Dasar Tag HTML
 Soal (16)
Catatan: Tombol submit bertipe gambar
BACK NEXT
Dasar Tag HTML
 Soal (17)
Catatan: Nama dan Alamat tidak dapat ditulisi
BACK NEXT
Dasar Tag HTML
 Soal (18)
Catatan: NIM dan Nama tidak bisa mendapatkan set focus
BACK END
Dasar Tag HTML
Tugas
 Buatlah suatu home page yang berisi biografi Anda dengan menggunakan
notepad.
 Berilah nama file dokumen html dengan NIM Anda.
misal: 04206063.html
 Kirim melalui e-mail: zakki_falani@yahoo.com
catatan:
Apabila dokumen Anda ternyata terbuat dari Web Editor selain notepad,
maka tidak akan ada koreksi.
END
Dasar Tag HTML
Text Alignment
<html>
<head>
</head>
<body>
<h1 align=center>Text
Alignment</h1>
<p align=center>Set in the
centre of the window
<p>Back to Normal
<p align=right>Align to Right
<p align=left>Align to Left
</body>
</html>
BACK NEXT
Dasar Tag HTML
Style pada Font
<b>……</b>
Tag ini untuk membuat bold (tebal)
<i>.…..</i>
Tag ini untuk membuat italic (miring)
<u>…..</u>
Tag ini untuk membuat underline (garis bawah)
<tt>…..<tt>
Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier)
BACK NEXT
Dasar Tag HTML
Style pada Font
<html>
<head>
</head>
<body>
<b>If you set words in bold</b>
<p>
<i>If you set words in italic</i>
<p>
<u>If you set words in underline</u>
<p>
<tt>If you set words in typewriter</tt>
</body>
</html>
VIEW
BACK NEXT
Dasar Tag HTML
Background
<html>
<head>
</head>
<body bgcolor=blue>
</body>
</html>
Catatan:
*) Pemberian warna pada background dapat juga menggunakan kode
heksadesimal
VIEW
BACK NEXT
Dasar Tag HTML
 Catatan:
Browser akan mengabaikan spasi
yang berlebihan. Sehingga Anda
dapat membuat spasi sekehendak
hati Anda untuk memudahkan
pembacaan kode Anda.
<html>
<head>
</head>
<body>
<h2>Words1 Words2</
h2>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Bullet & Numbering
Variasi bullet pada HTML:

 Disc, memberikan efek lingkaran (default)
 Square, memberikan efek persegi empat
 Circle, memberikan efek lingkaran yang transparan
BACK NEXT
Dasar Tag HTML
 Bullet & Numbering
<html>
<head>
</head>
<body>
<h3>Daftar Fakultas:
<ul type=disc>
<li>Fakultas Ekonomi</li>
<li>Fakultas Hukum</li>
<li>Fakultas Ilmu Komputer</li>
<li>Fakultas Teknik Sipil</li>
</ul>
</h3>
</body>
</html>
Catatan: ul = unordered list BACK NEXT

li = list item
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ul type=square>
</ul>
</h3>
</body>
</html>
BACK NEXT
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ul type=circle>
</ul>
</h3>
</body>
</html>
BACK NEXT
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ul type=circle>
</ul>
</h3>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Bullet & Numbering
Daftar bernomor pada HTML:

 i adalah angka romawi kecil, misal: i,ii,iii,iv,dst
 I adalah angka romawi besar, misal: I,II,III,IV,dst
 a adalah huruf kecil, misal: a,b,c,d,dst
 A adalah huruf kapital, misal: A,B,C,D,dst
 1 adalah angka dalam standar, misal: 1,2,3,4,dst
BACK NEXT
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=A>
</ol>
</h3>
</body>
</html>
Catatan: ol = ordered list BACK NEXT

Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=a>
</ol>
</h3>
</body>
</html>
BACK NEXT
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=I>
</ol>
</h3>
</body>
</html>
BACK NEXT
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=i>
</ol>
</h3>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Soal (4)
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (5)
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (6)
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (7)
VIEW
END
CSS (Cascading Style Sheet)
Manfaat:
 Memperindah tampilan halaman website.

 Mempermudah mengubah secara keseluruhan warna dan tampilan.
 Memformat ulang situs Anda secara cepat.
 Menghemat kode dan waktu dalam mendesain tampilan website.
NEXT
Konsep:
 Pewarisan (inheritance)
 Selektor-Kontekstual (Contextual Selector)
 Kelas (classes)
BACK NEXT
Ketentuan Mendasar
 Penulisan script CSS terletak diantara tag <HEAD>…</HEAD>

 Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration.
<HTML>
<HEAD>
<TITLE>…..</TITLE>
<STYLE TYPE=text/css>
selector { declaration }
</STYLE>
</HEAD>
<BODY>
……..
</BODY>
</HTML>
BACK NEXT
Tag Komentar
<html>
<head>
<title>……</title>
<style type=text/css>
…aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */
</style>
</head>
<body>
…………………
</body>
</html>
BACK NEXT
CSS Pewarisan (inheritance)
Text
<html>
<head>
<title>CSS_01</title>
b { color:lime }
</style>
</head>
<body>
<br>
<b>Fakultas Ilmu Komputer</b>
</body>
</html>
Catatan: Untuk declaration color dapat juga menggunakan kode heksa BACK NEXT
CSS Selektor-Kontekstual (Contextual Selector)
Text
<html>
<head>
b,i { color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<b>Universitas Narotama Surabaya</b>
<br>
<i>Fakultas Ilmu Komputer</i>
</body>
</html>
Catatan: selector ini kesemuanya untuk bold+italic text BACK NEXT

Perbedaan CSS pewarisan (inheritance) dengan
CSS Selektor-Kontekstual (Contextual Selector) !!!
Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector)
<html> <html>
<head> <head>
<title>CSS Inheritance</title> <title>Selektor-Kontekstual</title>
<style type=text/css> <style type=text/css>
b { color:blue; text-decoration:underline } b,i { color:blue;
i { color:blue; text-decoration:underline } text-decoration:underline;
</style> }
</head> </style>
<body> </head>
<b>Universitas Narotama Surabaya</b> <body>
<br> <b>Universitas Narotama
<i>Fakultas Ilmu Komputer</i> Surabaya</b>
</body> <br>
</html> <i>Fakultas Ilmu Komputer</i>
</body>
</html
BACK NEXT
Aturan CSS berdasarkan case to case
<html>
<head>
</head>
<body>
<br>
TIDAK EFEKTIF
<b style=color:lime>
Fakultas Ilmu Komputer
</b>
</body>
</html>
BACK NEXT
Text
<html>
<head>
i { color:#ff3333 }
</style>
</head>
<body>
<br>
</body>
</html>
BACK NEXT
Text
<html>
<head>
u { color:#3333CC }
</style>
</head>
<body>
<br>
<u>Fakultas Ilmu Komputer</u>
</body>
</html>
BACK NEXT
Text
<html>
<head>
h3 { color:#009900 }
</style>
</head>
<body>
<h3>Fakultas Ilmu Komputer</h3>
</body>
</html>
BACK NEXT
Text
<html>
<head>
h2 { color:#009900 }
h3 { color:#FF3333 }
</style>
</head>
<body>
<h2>Sistem Informasi</h2>
<br>
<h3>Sistem Komputer</h3>
</body>
</html>
BACK NEXT
Text text-decoration:
- underline (tampil garis dibawah text)
<html> - overline (tampil garis diatas text)
<head> - line-trough (tampil garis melalui
text)
- none (non-efek)
b,i { color:blue;
font-family:Tahoma;
}
</style>
</head>
<body>
<br>
</body>
</html>
BACK NEXT
Text
<html>
<head>
b,i { color:blue;
font-family:Tahoma;
font-size: 28px;
}
</style>
</head>
<body>
<br>
</body>
</html>
BACK NEXT
 Soal (1)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
PREVIEW BACK NEXT

 Soal (2)
PREVIEW BACK NEXT

 Soal (3)
PREVIEW END
Text
<html>
<head>
i { color:blue;
font-family:Tahoma;
font-size:14px; font-weight:
font-weight:bold; - normal
} - bold
</style>
</head>
<body>
<i>Universitas Narotama Surabaya</i>
</body>
</html>
NEXT
Text
<html>
<head>
p { color:blue;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>Universitas Narotama Surabaya</p>
</body>
</html>
BACK NEXT
Text
font-variant:
<html> small-caps (mengganti semua
<head> kar.lower-case dengan kar.upper-case)
none (tanpa efek)
p { color:blue;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>Universitas Narotama Surabaya</p>
</body>
</html>
Catatan: font-variant tidak berlaku pada browser Netscape BACK NEXT

Text
text-transform:
capitalize (Kar.pertama huruf besar)
<html> uppercase (Semua kar. huruf besar)
<head> lowercase (Semua kar. Huruf kecil)
p { color:blue;
font-family:Tahoma;
text-transform:lowercase;
}
</style>
</head>
<body>
<p>UNIVERSITAS NAROTAMA SURABAYA</p>
</body>
</html>
BACK NEXT
Text
<html>
<head>
p { color:blue;
font-family:Tahoma;
letter-spacing:10px;
}
</style>
</head>
<body>
<p>UNIVERSITAS NAROTAMA</p>
</body>
</html>
letter-spacing = mengendalikan jumlah spasi antar karakter BACK NEXT

Text
<html>
<head>
p { color:blue;
font-family:Tahoma;
text-indent:30px;
}
</style>
</head>
<body>
<p>UNIVERSITAS NAROTAMA</p>
</body>
</html>
text-indent = membuat indent untuk awal paragraf BACK NEXT

Body
<html>
<head>
body
{
background-color:blue;
}
</style>
</head>
<body>
</body>
</html>
BACK NEXT
Body
<html>
<head>
body
{ background-image:
url(bg.jpg);
}
</style>
</head>
<body>
</body>
</html>
BACK NEXT
Catatan:
Nilai list-style-type:
disc -> efek lingkaran

circle -> efek persegi empat
square -> efek lingkaran yang transparan
decimal -> 1,2,3,…dst
lower-roman -> i,ii,iii,…dst
upper-roman -> I,II,III,…dst
lower-alpha -> a,b,c,…dst
upper-alpha -> A,B,C,…dst
None -> Tanpa Efek
BACK NEXT
Bullet & Numbering
<html>
<head>
li { list-style-type:square;
font-weight:bold;
}
</style>
</head>
<body>
<h3>Fakultas Ilmu Komputer</h3>
<ol>
<li>Sistem Informasi</li>
<li>Sistem Komputer</li>
</ol>
</body>
</html>
BACK NEXT
 Soal (4)
PREVIEW BACK NEXT

 Soal (5)
PREVIEW BACK NEXT

 Soal (6)
PREVIEW END
Link
Link Properties:
 A:link
 A:hover
 A:active
NEXT
Link
Definisi style link:

 A:link -> memberikan efek pada saat normal (unlink)
 A:hover -> memberikan efek pada saat mouse pointer diatas
object
 A:active -> memberikan efek setelah event click
BACK NEXT
Link
<html>
<head>
a { color: #000000; /* kode warna hitam */
text-decoration: none; }
a:hover { color : #FF9900; /* kode warna orange */
text-decoration : underline; }
</style>
</head>
<body>
<a href=#>Link 1</a>
<br><br>
</body>
</html>
PREVIEW BACK NEXT
Link
<html>
<head>
a { color: #000000; } /* kode warna hitam */
a:hover { color : #FF9900; } /* kode warna orange */
a:active { color: #006699; } /* kode warna biru */
</style>
</head>
<body>
<a href=#>Link 1</a><br><br>
</body>
</html>
PREVIEW BACK NEXT

 Soal (7)
PREVIEW BACK NEXT

 Soal (8)
PREVIEW BACK NEXT

Kursor Link
PREVIEW BACK NEXT

 Soal (9)
PREVIEW BACK NEXT

Form
<html>
<head>
<title>Form_01</title>
input { background:yellow; }
</style>
</head>
<body>
NIM<br>
<input name=nim type=text size=20><br>
Nama Lengkap<br>
</form>
</body>
</html>
Catatan: untuk selector input berlaku pada,

<input type=radio>, <input type=checkbox>, BACK NEXT
<input type=submit> & <inputy type=button>
Form
<html>
<head>
input { background:yellow;
border: 1px solid red;}
</style>
</head>
<body>
NIM<br>
Nama Lengkap<br>
</form>
</body>
</html>
BACK NEXT
Form
<html>
<head>
input { background:yellow;
border: 1px solid red;
color: blue; }
</style>
</head>
<body>
NIM<br>
Nama Lengkap<br>
</form>
</body>
</html>
BACK NEXT
Form
<html>
<head>
select { background:yellow;
color: blue; }
</style>
</head>
<body>
<form>
Program Studi:<br>
<select name=prodi>
<option value=SK>Sistem Komputer</option>
<option value=SI>Sistem Informasi</option>
</select>
</form>
</body>
</html>
BACK NEXT
Form
<html>
<head>
textarea { background:yellow;
color: blue; }
</style>
</head>
<body>
<form>
Alamat:<br>
<textarea name=alamat cols=30 rows=5></textarea>
</form>
</body>
</html>
BACK NEXT
 Soal (FORM_01)
PREVIEW BACK NEXT

 Soal (FORM_02)
PREVIEW END
Table
<html>
<head>
table { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<td>NIM</td><td>NAMA</td>
</tr>
<tr>
<td>04102001</td><td>Lukmanul Khakim</td>
</tr>
<tr>
<td>04102002</td><td>Indra Cahyo</td>
</tr>
</table>
</body></html>
Catatan: Untuk declaration solid dapat juga menggunakan kode heksa BACK NEXT
Table
<html>
<head>
table { background-color: cyan;
border: 1px solid orange; }
</style>
</head>
<body>
<table>
<tr>
<td>NIM</td><td>NAMA</td>
</tr>
<tr>
</tr>
<tr>
<td>04102002</td><td>Indra Cahyo</td>
</tr>
</table>
</body></html>
BACK NEXT
Table
<html>
<head>
tr {background-color: blue;
color:white;
text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<td width=100>NIM</td><td width=200>NAMA</td>
</tr>
<tr>
</tr>
</table></body></html>
Catatan: deklarasi border tidak berlaku pada selector <TR> BACK NEXT
Table
<html>
<head>
td {background-color: blue;
color:white;
padding-left: 15px;
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Catatan: deklarasi padding tidak berlaku pada selector <TR> BACK NEXT
Table
<html>
<head>
color:white;
padding-top: 10px;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Table
<html>
<head>
color:white;
padding-bottom: 10px;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Table
<html>
<head>
color:white;
border-bottom: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
Table
<html>
<head>
color:white;
border-top: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
Table
<html>
<head>
color:white;
border-right: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
Table
<html>
<head>
color:white;
border-left: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
 Soal (10)
PREVIEW BACK NEXT

 Soal (11)
PREVIEW BACK NEXT

 Soal (12)
PREVIEW BACK NEXT

 Soal (13)
PREVIEW BACK NEXT

 Soal (14)
PREVIEW BACK NEXT

CSS (Cascading Style Sheet) Classes
Penulisan
.variable { … deklarasi … }
</style>
Catatan: bagian deklarasi harus diawali dengan tanda . (titik) BACK NEXT
Text
<html>
<head>
<title>Kelas_01</title>
.text { font-family:tahoma; font-size: 16px;
color: #006699; font-weight: bold; }
</style>
</head>
<body>
<a class=text>Universitas Narotama Surabaya</a>
</body>
</html>
PREVIEW BACK NEXT

Link
<html>
<head>
<title>Kelas (LINK)</title>
.link { font-family:tahoma; color:#0000FF; text-decoration:underline;}
.link:hover,.link:active { font-family:tahoma;
color:#FF9900;text-decoration:underline; }
</style>
</head>
<body>
<a href=# class=link>Link 1</a><br><br>
<a href=# class=link>Link 2</a>
</body>
</html>
PREVIEW BACK NEXT

Form
<html>
<head>
<title>Kelas_Form</title>
.inputbox1 { background:silver; border: 1px dotted red;color: blue;}
.inputbox2 { background:silver; border: 1px solid blue;color: red;}
</style>
</head>
<body>
<form>
<br> NIM: <br> <input type=text name=nim size=20
class=inputbox1><br> Nama: <br> <input type=text name=nama
size=40 class=inputbox2>
</form>
</body></html>
PREVIEW BACK NEXT

Pengenalan PHP
Penulisan script PHP diawali dengan:
 <?php ……………… ?>, atau

 <? …………….. ?>,atau
 <script language=PHP>…….</script>
BACK NEXT
Pengenalan PHP
 Fungsi Perintah echo!!!
echo,print atau printf berfungsi untuk menampilkan sesuatu dilayar

browser sekaligus menjalankan tag HTML.
<?php
echo “dicetak ke browser dengan echo”;
echo “<br>”;
print “dicetak ke browser dengan print”;
print “<br>”;
printf “dicetak ke browser dengan printf”;
printf “<hr>”;
?>
BACK NEXT
Pengenalan PHP
 HTML & PHP:
<html>
<head>
<title>Latihan-01</title>
</head>
<body>
<?php
echo “Hallo PHP,aku akan menaklukanmu!!!”;
?>
</body>
</html>
BACK NEXT
Pengenalan PHP
 Komentar pada PHP
Komentar merupakan penjelasan

yang menerangkan maksud dari
skrip agar skrip tersebut dapat
mudah dipahami.
BACK NEXT
Pengenalan PHP
Tanda komentar PHP:

 // , berada dalam satu baris
 /*…..*/, digunakan apabila pemberian komentar lebih dari satu
baris.
BACK NEXT
Pengenalan PHP
<?php
//perintah echo untuk menampilkan sesuatu pada layar browser.
/*
Tag <br> merupakan tag HTML yang berfungsi untuk melakukan
pergantian baris.
*/
?>
BACK NEXT
Pengenalan PHP
 Variabel:
Suatu tempat untuk menyimpan data.

Data yang disimpan sewaktu bisa kita
panggil atau diganti dengan data lain.
BACK NEXT
Pengenalan PHP
Variabel Pada PHP:
 Mendefinisikan var.cukup dengan
memilih sebuah kata
 Bersifat case sensitif
 Di awali tanda $
Contoh:
$hari=“senin”;
$tgl=30;
Catatan:
BACK NEXT
tidak ada pendeklarasian khusus pada var.PHP
Pengenalan PHP
Menampilkan Var. PHP:
<html>
<head>
</head>
<body>
<?php
$i=“Universitas Narotama”;
echo $i;
?>
</body>
</html>
BACK NEXT
Pengenalan PHP
Menampilkan Var. PHP:
<html>
<head>
</head>
<body>
<?php
$angka1=10;
$angka2=2;
$hasil=$angka1+$angka2;
echo $hasil;
?>
</body>
</html>
BACK NEXT
Pengenalan PHP
Operator Aritmatika: digunakan untuk perhitungan
Simbol Fungsi Operator Contoh Penggunaan

Operator
+ Melakukan Penjumlahan $jumlah = 2+4;
- Melakukan Pengurangan $kurang = 4-3;
* Melakukan Perkalian $kali = 4*2;
/ Melakukan Pembagian $bagi=10/2;
% Menghasilkan sisa pembagian $sisa=10%3;
$sisa berisi 1
BACK NEXT
Pengenalan PHP
Operator Assignment:Digunakan untuk mengisi variabel yang terletak di sebelah kiri operator
dengan nilai yang ada di sebelah kanan operator.
Simbol Operator Fungsi Operator Contoh Penggunaan

= Mengisikan nilai yang disebelah kanan operator ke variabel yang $data=10+2;
terletak di sebelah kiri operator. berapapun nilai $data sebelumnya,
sekarang $data telah terisi 12.
+= Menambahkan nilai yang di sebelah kanan operator ke variabel Nilai awal $data misalkan 12.
yang disebelah kiri dan hasilnya akan disimpan di variabel tersebut $data += 10;
juga. $data sekarang berisi 22.
-= Mengurangkan nilai yang di sebelah kanan operator ke variabel Nilai awal $data misalkan 22.
yang disebelah kiri dan hasilnya akan disimpan di variabel tersebut $data += 10;
*= Mengalikan nilai yang di sebelah kiri operator dengan variabel yang Nilai awal $data misalnya= 15.
disebelah kanan dan hasilnya akan disimpan di variabel tersebut $data *= 2;
/= Membagi nilai yang di sebelah kiri operator dengan variabel yang Nilai awal $data misalnya= 12.
disebelah kanan dan hasilnya akan disimpan di variabel tersebut $data /= 6;
%= Membagi nilai yang di sebelah kiri operator dengan variabel yang Nilai awal $data misalnya= 10.
disebelah kanan kemudian sisa pembagian disimpan di variabel $data %= 7;
tersebut juga. $data sekarang berisi 3.
BACK NEXT
Simbol Fungsi Operator Contoh
Operator
== Akan bernilai TRUE atau 1 bila dua kondisi yang dibandingkan memiliki $a=10;
nilai yang sama, selain itu bernilai FALSE atau 0. $b=10;
$a==$b, akan bernilai TRUE atau 1, karena
keduanya memiliki nilai yang sama.
<> Akan bernilai TRUE atau 1 hanya jika dua kondisi yang dibandingkan $a=10;
memiliki nilai yang tidak sama (selain ini bernilai FALSE atau 0). $b=10;
$a<>$b, akan bernilai FALSE atau 0, karena
kedua nilainya tidak sama.
> Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih besar $a=12;
dari yang disebelah kanan (selain ini akan bernilai FALSE atau 0). $b=10;
$a>$b, akan bernilai TRUE atau 1, karena
nilai $a lebih besar dibandingkan nilai $b.
< Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih kecil $a=12;
dari yang di sebelah kanan (selain ini akan bernilai FALSE atau 0). $b=10;
$a<$b, akan bernilai FALSE atau 0, karena
nilai $a lebih besar dibandingkan nilai $b.
>= Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih besar $a=11;
atau sama dengan dari yang disebelah kanan (selain ini akan bernilai $b=10;
FALSE atau 0). $a>=$b, akan bernilai TRUE atau 1, karena
nilai $a lebih besar dibandingkan niali $b.
Juga jika $a=10, nilai tetap akan bernilai
TRUE.
<= Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih kecil $a=11;
atau sama dengan dari yang disebelah kanan (selain ini akan bernilai $b=10;
FALSE atau 0). $a<=$b, akan bernilai FALSE atau 0, karena
nilai $a lebih besar dibandingkan niali $b.
Juga jika $a=10, nilai tetap akan bernilai
TRUE.
BACK NEXT
Pengenalan PHP
Operator Logika:
Berguna untuk menggabungkan dua kondisi atau lebih.

 && atau AND, simbol dari operator AND. Hasilnya akan
bernilai 1 atau TRUE jika kedua kondisi memiliki nilai 1.,
selain ini hasil akan bernilai 0 atau FALSE.
 || atau OR, simbol dari operator OR. Hasilnya akan bernilai 0
jika kedua kondisi memiliki nilai 0, selain ini hasil akan
bernilai 1 atau TRUE.
 XOR, operator xor akan menghasilkan nilai 1 atau TRUE jika
kedua kondisi sama dan 0 atau FALSE bila keduanya tidak
sama.
 !, simbol dari operator NOT, akan menghasilkan nilai yang
berlawanan. Jika 1 (TRUE) ,akan menjadi 0 (FALSE),
sedangkan 0 (FALSE) akan menjadi 1 (TRUE).
BACK NEXT
Pengenalan PHP
Kalimat Bersyarat:
If (syarat/kondisi)
{
…….aksi………;
}
BACK NEXT
Pengenalan PHP
Jika memiliki dua syarat,
Nilai syarat yang satu berlawanan dengan yang lain
If (syarat/kondisi)
{
…….aksi………;
}
Else
{
…….aksi………;
}
BACK NEXT
Pengenalan PHP
Kalimat Bersyarat:
<?php
$a=10;
$b=12;
if ($b>$a)
{ echo “Nilai \$b lebih besar dari \$a”; }
else
{ echo “Nilai \$b tidak lebih besar dari \$a”; }
?>
BACK NEXT
Pengenalan PHP
Kalimat Bersyarat:
Switch (….kondisi…)
{
case …..syarat1…:
….aksi……;
break;
case …..syarat2…:
….aksi……;
break;
…………..
default:
………….aksi apabila semua syarat tidak terpenuhi…….
}
BACK NEXT
Pengenalan PHP
Kalimat Bersyarat:
<?php
$a=5;
Echo “\$a bernilai $a <br>”;
Switch ($a)
{
case $a=10:
echo “Berarti \$a = 10”;
break;
case $a>10:
echo “Berarti \$a > 10”;
break;
default:
echo “Berarti \$a < 10”;
}
?>
BACK NEXT
Pengenalan PHP
Perulangan (While)
While(….syarat….)
{
………aksi…….;
}
BACK NEXT
Pengenalan PHP
Perulangan (While)
$angka=9;
Echo “Bil. Ganjil antara 10 hingga 30:
<br>”;
While($angka < 29)
{
$angka += 2;
echo “$angka <br>”;
}
BACK NEXT
Pengenalan PHP
Perulangan (For)
For (nilai awal,syarat perulangan, pola penambahan)

{
………aksi……….;
}
BACK NEXT
Pengenalan PHP
Perulangan (For)
<?php
$angka = 10;
$cek = 1;
Echo “Bil. Genap antara 10 hingga 30: <br>”;
For ($cek=1;$cek<10;$cek++)
{
$angka += 2;
echo “$angka <br>”;
}
?>
BACK NEXT
Pengenalan PHP
Array
Seperti halnya variabel, array berfungsi juga sebagai

penyimpan data, akan tetapi array mampu menyimpan
lebih dari satu data.
BACK NEXT
Pengenalan PHP
Array
<?php
$bulan=array(“Januari”,”Februari”,”Maret”,”April”);
Echo “Musim hujan biasanya terjadi pada bulan: <br> ”;
//akses array
Echo “$bulan[0] <br>”;
?>
BACK NEXT
Pengenalan PHP
Include() & Require()
 Require(), digunakan untuk merefensi file yang

berisikan variabel dan fungsi global yang digunakan
pada seluruh bagian dari script utama.
 Include(), digunakan untuk menyisipkan kode script
atau tag HTML pada program utama.
BACK NEXT
Pengenalan MySQL
MySQL (My Stucture Query Language)
Jenis Perintah MySQL terbagi:

 DDL (Data Definition Language)
bentuk bahasa yang digunakan untuk melakukan
pendefinisian data.
 DML (Data Manipulation Language)
operasi input,edit,hapus serta melihat data.
BACK NEXT
Pengenalan MySQL
DDL (Data Definition Language):

 CREATE DATABASE data;
 CREATE TABLE nama_tabel;
 SHOW TABLES;
 ALTER TABLE nama_tabel_lama RENAME
nama_tabel_baru;
 ALTER TABLE nama_tabel CHANGE
field_lama field_baru type_data
(panjang)
BACK NEXT
Pengenalan MySQL
DML (Data Manipulation Language):

 SELECT nama_field FROM nama_tabel
 INSERT INTO nama_tabel (field1,field2,…) VALUES
(nilai1,nilai2,…)
 UPDATE nama_tabel SET field1=nilai1,….
 DELETE FROM nama_tabel WHERE field1=nilai1
BACK NEXT
Pengenalan MySQL
Implementasi MySQL
dengan PhpMyAdmin
BACK NEXT
PHP & MySQL
Studi Kasus:
 Membuat File Koneksi

 Menampilkan Data pada MySQL dengan PHP
 Form, method: Post & Get
BACK NEXT
Finish
Sekian Materi Pemrograman Web.
Untuk Pengembangan Selanjutnya,
Terserah Anda…
END

Pemrograman Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul

Jika Anda ingin menambahkan komentar pada dokumen HTML,maka

Tag HTML untuk memasukkan gambar:

Catatan: img src=image source

Tuliskan Source Code dari tampilan berikut:

Tuliskan Source Code dari tampilan berikut:

Tuliskan Source Code dari tampilan berikut:

Tag Link pada HTML:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

<a href=mailto:nama_email>Send to E-mail</a>

Marquee = Menampilkan objek dengan memberikan efek

Tag Marquee pada HTML:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

 Tuliskan Source Code dari tampilan berikut:

PREVIEW BACK NEXT

 Tuliskan Source Code dari tampilan berikut:

PREVIEW BACK NEXT

 Tuliskan Source Code dari tampilan berikut:

PREVIEW BACK NEXT

<form name=nama_form method=post/get action=nama_file/email>

type=reset, akan mendefinisikan tombol untuk menghapus isi formulir.

Variasi bullet pada HTML:

Catatan: ul = unordered list BACK NEXT

Daftar bernomor pada HTML:

Catatan: ol = ordered list BACK NEXT

 Memperindah tampilan halaman website.

 Penulisan script CSS terletak diantara tag <HEAD>…</HEAD>

Catatan: selector ini kesemuanya untuk bold+italic text BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Catatan: font-variant tidak berlaku pada browser Netscape BACK NEXT

letter-spacing = mengendalikan jumlah spasi antar karakter BACK NEXT

text-indent = membuat indent untuk awal paragraf BACK NEXT

disc -> efek lingkaran

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Definisi style link:

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

Catatan: untuk selector input berlaku pada,

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

 <?php ……………… ?>, atau