Modul Design Pemrograman Web

Modul
Design & Pemrograman Web
Dosen:
Achmad Zakki Falani, S.Kom
Fakultas Ilmu Komputer
Universitas Narotama
NEXT
Kriteria Penilaian:
Kehadiran
Tugas
Keaktifan
NIlai UTS
Nilai UAS
:
:
:
:
:
10
15
15
30
30
%
%
%
%
%
BACK
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>
<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
<td>Columns
</tr>
<tr>
<td>Columns
<td>Columns
</tr>
</table>
Item</td>
Item</td>
Item</td>
Item</td>
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
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

li = list item
BACK
NEXT
Dasar Tag HTML
Bullet & Numbering

<html>
<head>
</head>
<body>
<ul type=square>
</ul>
</h3>
</body>
</html>
BACK
NEXT
Dasar Tag HTML
Bullet & Numbering

<html>
<head>
</head>
<body>
<ul type=circle>
</ul>
</h3>
</body>
</html>
BACK
NEXT
Dasar Tag HTML
Bullet & Numbering

<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
Bullet & Numbering
<html>
<head>
</head>
<body>
<ol type=A>
</ol>
</h3>
</body>
</html>
Catatan: ol = ordered list
BACK
NEXT
Dasar Tag HTML
Bullet & Numbering
<html>
<head>
</head>
<body>
<ol type=a>
</ol>
</h3>
</body>
</html>
BACK
NEXT
Dasar Tag HTML
Bullet & Numbering
<html>
<head>
</head>
<body>
<ol type=I>
</ol>
</h3>
</body>
</html>
BACK
NEXT
Dasar Tag HTML
Bullet & Numbering
<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)
<html>
<head>
<title>CSS Inheritance</title>
b { color:blue; text-decoration:underline }
i { color:blue; text-decoration:underline }
</style>
</head>
<body>
<br>
</body>
</html>
Selektor Kontekstual (Contextual Selector)

<html>
<head>
<title>Selektor-Kontekstual</title>
b,i { color:blue;
}
</style>
</head>
<body>
<br>
</body>
</html
BACK
NEXT

Aturan CSS berdasarkan case to case
<html>
<head>
</head>
<body>
<br>
<b style=color:lime>
</b>
</body>
</html>
TIDAK EFEKTIF
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)
- overline (tampil garis diatas text)
- line-trough (tampil garis melalui
text)
- none (non-efek)
<html>
<head>
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-weight:
font-size:14px;
- normal
font-weight:bold;
- 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:
small-caps (mengganti semua
kar.lower-case dengan kar.upper-case)
none (tanpa efek)
<html>
<head>
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)
uppercase (Semua kar. huruf besar)
lowercase (Semua kar. Huruf kecil)
<html>
<head>
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>,
<input type=submit> & <inputy type=button>
BACK
NEXT

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>
BACK
NEXT

Table
<html>
<head>
color:white;
padding-bottom: 10px;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK
NEXT

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
Komentar pada PHP
Tanda komentar PHP:
// , berada dalam satu baris
/*..*/, digunakan apabila pemberian komentar lebih dari satu

baris.
BACK
NEXT
Pengenalan PHP
Komentar pada 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:
tidak ada pendeklarasian khusus pada var.PHP
BACK
NEXT
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
Operator
Fungsi Operator
Contoh Penggunaan
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 terletak di sebelah kiri operator.
$data=10+2;
berapapun nilai $data sebelumnya,
sekarang $data telah terisi 12.
+=
Menambahkan nilai yang di sebelah kanan operator ke

variabel yang disebelah kiri dan hasilnya akan disimpan di
variabel tersebut juga.
Nilai awal $data misalkan 12.

$data += 10;
$data sekarang berisi 22.
-=
Mengurangkan nilai yang di sebelah kanan operator ke

variabel yang disebelah kiri dan hasilnya akan disimpan di
variabel tersebut juga.
Nilai awal $data misalkan 22.

$data += 10;
*=
Mengalikan nilai yang di sebelah kiri operator dengan

variabel yang disebelah kanan dan hasilnya akan disimpan
di variabel tersebut juga.
Nilai awal $data misalnya= 15.

$data *= 2;
/=
Membagi nilai yang di sebelah kiri operator dengan

variabel yang disebelah kanan dan hasilnya akan disimpan
di variabel tersebut juga.

$data /= 6;
%=
Membagi nilai yang di sebelah kiri operator dengan

variabel yang disebelah kanan kemudian sisa pembagian
disimpan di variabel tersebut juga.

$data %= 7;
BACK
NEXT
Simbol
Operator
Fungsi Operator
Contoh
==
Akan bernilai TRUE atau 1 bila dua kondisi yang dibandingkan

memiliki nilai yang sama, selain itu bernilai FALSE atau 0.
$a=10;
$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 memiliki nilai yang tidak sama (selain ini bernilai
FALSE atau 0).
$a=10;
$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 dari yang disebelah kanan (selain ini akan bernilai
FALSE atau 0).
$a=12;
$b=10;
$a>$b, akan bernilai TRUE atau 1,
karena nilai $a lebih besar
dibandingkan nilai $b.
<
lebih kecil dari yang di sebelah kanan (selain ini akan bernilai
FALSE atau 0).
$a=12;
$b=10;
$a<$b, akan bernilai FALSE atau 0,
dibandingkan nilai $b.
>=
lebih besar atau sama dengan dari yang disebelah kanan (selain
ini akan bernilai FALSE atau 0).
$a=11;
$b=10;
$a>=$b, akan bernilai TRUE atau 1,
dibandingkan niali $b. Juga jika $a=10,
nilai tetap akan bernilai TRUE.
<=
lebih kecil atau sama dengan dari yang disebelah kanan (selain
ini akan bernilai FALSE atau 0).
$a=11;
$b=10;
$a<=$b, akan bernilai FALSE atau 0,
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 Design & Pemrograman Web.
Untuk Pengembangan Selanjutnya,

Terserah Anda
Silahkan sharing ilmu bersama:

ym: zakki_falani@yahoo.com
END

Modul Design 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

Modul Design Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul

Design & Pemrograman Web

Konsep Dasar Web Design

Konsep Dasar Web Design

Konsep Dasar Web Design

Desain Halaman Web Dasar

Konsep Dasar Web Design

Bagaimana komentar Anda tentang Template Web berikut?...

Konsep Dasar Web Design

Bagaimana komentar Anda tentang Template Web berikut?...

Konsep Dasar Web Design

Bagaimana komentar Anda tentang Template Web berikut?...

Konsep Dasar Web Design

Bagaimana komentar Anda tentang Template Web berikut?...

Dasar Skrip / Tag HTML

Sulitkah pemrograman HTML?....

Apa yang dimaksud tag dalam HTML?...

Bagaimana belajar dari Design Web yang sudah ada?...

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Mencari artikel dengan tema Design Web

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

BORDER = akan memberikan garis pembatas pada tabel.

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Tuliskan Source Code dari tampilan berikut:

Dasar Tag HTML

Tuliskan Source Code dari tampilan berikut:

Dasar Tag HTML

Tuliskan Source Code dari tampilan berikut:

Dasar Tag HTML

Catatan: img src=image source

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Images & Body Background

Dasar Tag HTML

Images & Table

Dasar Tag HTML

Images & Table

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

Dasar Tag HTML

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

Dasar Tag HTML