Modul-Design Web

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).
• Bagaimana komentar Anda tentang Template Web berikut?...
Pertanyaan mendasar dari web designer pemula:
• Sulitkah pemrograman HTML?....
• Apa yang dimaksud tag dalam HTML?...
• Bagaimana belajar dari Design Web yang sudah ada?...
<html>
<head>
<title>Judul / Title</title>
</head>
<body>
Isi / Content
</body>
</html>
Heading
<html>
<head>
<title>Latihan 01</title>
</head>
<body>
<h1> Heading 1 - 24 Point </h1>
Normal body text - 12 Point
</body>
</html>
Paragraf dan Break
<html>
<head>
</head>
<body>
STTR
<br>
STT RONGGOLAWE CEPU
<p>
Jurusan Sistem Komputer & Sistem
Informasi
</body>
</html>
HR (Horizontal Rule)
<html>
<head>
</head>
<body>
<h1>STT RONGGOLAWE</h1>
<hr>
</body>
</html>
Font
<html>
<head>
</head>
<body>
<font face=verdana size=3 color=blue >STTR CEPU</font>
</body>
</html>
• Catatan:
Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag
<!...................>,misal:
<!perubahan terakhir 27/6/96>
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.
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>.
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>
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.
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>
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>
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>
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>
• Soal (8)
Tuliskan Source Code dari tampilan berikut:
• Soal (9)
• Soal (10)
• Images
Tag HTML untuk memasukkan gambar:

<img src=filename>
Catatan: img src=image source
• 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.
• Images
<html>
<head>
</head>
<body>
<img src=test.gif
width=400 height=300>
</body>
</html>
• Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Center</h2>
<center>
<img src= test.jpg
width=400 height=300>
</center>
</body>
</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>
• Images & Body Background
<html>
<head>
</head>
<body background=bg.gif>
</body>
</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>
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>
Dasar Tag HTML
• Soal
Filename:bg2.gif
Size:7X30
Dasar Tag HTML
• Soal
Filename:photo1.gif
Size:300X400
Filename:photo2.gif
Size:300X400
Dasar Tag HTML
Link
Tag Link pada HTML:
<a href=url/filename>……..</a>
Catatan:
HREF=Hypertext REFerence
Link URL
<html>
<head>
</head>
<body>
<a href=http://yahoo.com>Yahoo</a>
<p>
<a href=http://google.com>Google</a>
</body>
</html>
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>
Link E-mail
<a href=mailto:nama_email>Send to E-mail</a>

Dasar Tag HTML
Marquee
Marquee = Menampilkan objek dengan memberikan efek
berjalan.
Marquee
Tag Marquee pada HTML:
<marquee behavior=…>……..</marquee>
Marquee
Style Maquee:
• ALTERNATE
• SCROLL
• SLIDE
Dasar Tag HTML
Marquee
Direction Maquee:
• Down
• Left
• Right
• Up
Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate direction=up> STTR CEPU </marquee>
</body>
</html>
Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate width=100> STTR CEPU
</body>
</html>
Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate width=100 scrolldelay=500>
STTR CEPU
</marquee>
</body>
</html>
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>
Dasar Tag HTML
Form
<html>
<head>
</head>
<body>
<form name=mhs_baru method=post action=proses.php>
………………
</form>
</body>
</html>
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>
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>
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>
Dasar Tag HTML
Form
Drop-down List:
<select name=nama_list>
<option value=nama_opsi1>…</option>
</select>
Dasar Tag HTML
Form
Drop-down List:
<html>
<head>
</head>
<body>
<form name=list>
Level:<br>
<select name=level>
<option value=stand>Standart</optio n>
<option value=prof>Professional</o ption>
</select>
</form>
</body>
</html>
Dasar Tag HTML
Form
Textarea:
<textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar>
</textarea>
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>
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.

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>
Dasar Tag HTML
• Soal
Catatan: Username dan Password panjang karakter = 10
Dasar Tag HTML
• Soal
Catatan: Event submit terletak pada list
Dasar Tag HTML
• Soal
Catatan: Tombol submit bertipe gambar
Dasar Tag HTML
• Soal
Catatan: Nama dan Alamat tidak dapat ditulisi
Dasar Tag HTML
• Soal (18)
Catatan: NIM dan Nama tidak bisa mendapatkan set focus
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
catatan:
Apabila dokumen Anda ternyata terbuat dari Web Editor selain notepad, maka tidak
akan ada koreksi.
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>
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)
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>
Dasar Tag HTML
Background
<html>
<head>
</head>
<body bgcolor=blue>
</body>
</html>
Catatan:
*) Pemberian warna pada background dapat juga menggunakan kode
heksadesimal
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>
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
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
Dasar Tag HTML

<html>
<head>
</head>
<body>
<ul type=square>
</ul>
</h3>
</body>
</html>
Dasar Tag HTML

<html>
<head>
</head>
<body>
<ul type=circle>
</ul>
</h3>
</body>
</html>
Dasar Tag HTML

<html>
<head>
</head>
<body>
<ul type=circle>
</ul>
</h3>
</body>
</html>
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
Dasar Tag HTML

<html>
<head>
</head>
<body>
<ol type=A>
</ol>
</h3>
</body>
</html>
Catatan: ol = ordered list

Dasar Tag HTML

<html>
<head>
</head>
<body>
<ol type=a>
</ol>
</h3>
</body>
</html>
Dasar Tag HTML

<html>
<head>
</head>
<body>
<ol type=I>
</ol>
</h3>
</body>
</html>
Dasar Tag HTML

<html>
<head>
</head>
<body>
<ol type=i>
</ol>
</h3>
</body>
</html>
Dasar Tag HTML
• Soal
Dasar Tag HTML
• Soal
Dasar Tag HTML
• Soal
Dasar Tag HTML
• Soal
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.
Konsep:
• Pewarisan (inheritance)
• Selektor-Kontekstual (Contextual Selector)
• Kelas (classes)
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>
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>
CSS Pewarisan (inheritance)
Text
<html>
<head>
<title>CSS_01</title>
b { color:lime }
</style>
</head>
<body>
STTR CEPU
<br>
<b> Ilmu Komputer</b>
</body>
</html>
CSS Selektor-Kontekstual (Contextual Selector)
Text
<html>
<head>
b,i { color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<b>STTR CEPU</b>
<br>
<i>Ilmu Komputer</i>
</body>
</html>
Catatan: selector ini kesemuanya untuk bold+italic text

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>STTR CEPU</b> <body>
<br> <b> STTR CEPU </b>
<i> Ilmu Komputer</i> <br>
</body> <i> Ilmu Komputer</i>
</html> </body>
</html
Aturan CSS berdasarkan case to case
<html>
<head>
</head>
<body>
STTR CEPU
<br>
<b style=color:lime>
Ilmu Komputer
</b>
</body>
</html>
Text
<html>
<head>
i { color:#ff3333 }
</style>
</head>
<body>
STTR CEPU
<br>
<i> Ilmu Komputer</i>
</body>
</html>
Text
<html>
<head>
u { color:#3333CC }
</style>
</head>
<body>
STTR CEPU
<br>
<u> Ilmu Komputer</u>
</body>
</html>
Text
<html>
<head>
h3 { color:#009900 }
</style>
</head>
<body>
<h3> Ilmu Komputer</h3>
</body>
</html>
Text
<html>
<head>
h2 { color:#009900 }
h3 { color:#FF3333 }
</style>
</head>
<body>
<h2>Sistem Informasi</h2>
<br>
<h3>Sistem Komputer</h3>
</body>
</html>
Text text-decoration:
- underline (tampil garis dibawah text)
<html> - overline (tampil garis diatas text)
- line-trough (tampil garis melalui text)
<head>
- none (non-efek)
b,i { color:blue;
font-family:Tahoma;
}
</style>
</head>
<body>
<b> STTR CEPU </b>
<br>
<i>Ilmu Komputer</i>
</body>
</html>
Text
<html>
<head>
b,i { color:blue;
font-family:Tahoma;
font-size: 28px;
}
</style>
</head>
<body>
<b> STTR CEPU </b>
<br>
<i> Ilmu Komputer</i>
</body>
</html>
Text
<html>
<head>
i { color:blue;
font-family:Tahoma;
font-size:14px; font-weight:
font-weight:bold; - normal
} - bold
</style>
</head>
<body>
<i>STTR CEPU </i>
</body>
</html>
Text
<html>
<head>
p { color:blue;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p> STTR CEPU </p>
</body>
</html>
Text
font-variant:
<html> small-caps (mengganti semua kar.lower-case dengan
<head> 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> STTR CEPU </p>
</body>
</html>
Catatan: font-variant tidak berlaku pada browser Netscape
Text
text-transform: capitalize (Kar.pertama huruf
besar) uppercase (Semua kar. huruf besar)
<html> lowercase (Semua kar. Huruf kecil)
<head>
p { color:blue;
font-family:Tahoma;
text-transform:lowercase;
}
</style>
</head>
<body>
<p> STTR CEPU </p>
</body>
</html>
Text
<html>
<head>
p { color:blue;
font-family:Tahoma;
letter-spacing:10px;
}
</style>
</head>
<body>
<p> STTR CEPU </p>
</body>
</html>
Text
<html>
<head>
p { color:blue;
font-family:Tahoma;
text-indent:30px;
}
</style>
</head>
<body>
<p> STTR CEPU </p>
</body>
</html>
Body
<html>
<head>
body
{
background-color:blue;
}
</style>
</head>
<body>
</body>
</html>
Body
<html>
<head>
body
{ background-image:
url(bg.jpg);
}
</style>
</head>
<body>
</body>
</html>
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
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>
• Soal (4)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
• Soal
• Soal (6)
Link
Link Properties:
• A:link
• A:hover
• A:active
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
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>
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>
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>,
Form
<html>
<head>
input { background:yellow;
border: 1px solid red;}
</style>
</head>
<body>
NIM<br>
Nama Lengkap<br>
</form>
</body>
</html>
Form
<html>
<head>
input { background:yellow;
border: 1px solid red;
color: blue; }
</style>
</head>
<body>
NIM<br>
Nama Lengkap<br>
</form>
</body>
</html>
Form
<html>
<head>
select { background:yellow;
color: blue; }
</style>
</head>
<body>
<form>
Program Studi:<br>
<select name=prodi>
<option value=SK>Sistem Komputer</optio n>
<option value=SI>Sistem Informasi</option >
</select>
</form>
</body>
</html>
Form
<html>
<head>
textarea { background:yellow;
color: blue; }
</style>
</head>
<body>
<form>
Alamat:<br>
<textarea name=alamat cols=30 rows=5></te xtarea>
</form>
</body>
</html>
• Soal (FORM_01)
• Soal
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>
Table
<html>
<head>
table { background-color: cyan;
border: 1px solid orange; }
</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>
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>NA MA</td>
</tr>
<tr>
</tr>
</table></body></html>
Table
<html>
<head>
td {background-color: blue;
color:white;
padding-left: 15px;
</style>
</head>
<body>
<table><tr>
<td width=100>NIM</td><td width=200>NAMA</td>
</tr>
<tr>
</tr></table>
</body></html>
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>
Table
<html>
<head>
color:white;
border-top: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Table
<html>
<head>
color:white;
border-right: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Table
<html>
<head>
color:white;
border-left: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
• Soal
• Soal

• Soal

• Soal

CSS (Cascading Style Sheet) Classes
Penulisan
.variable { … deklarasi … }
</style>
Catatan: bagian deklarasi harus diawali dengan tanda . (titik)

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> STTR CEPU </a>
</body>
</html>
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>
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>
Pengenalan PHP
Penulisan script PHP diawali dengan:
• <?php ……………… ?>, atau

• <? …………….. ?>,atau
• <script language=PHP>…….</script>
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>”;
?>
Pengenalan PHP
• HTML & PHP:
<html>
<head>
<title>Latihan-01</title>
</head>
<body>
<?php
echo “Hallo PHP,aku akan menaklukanmu!!!”;
?>
</body>
</html>
Pengenalan PHP
• Komentar pada PHP
Komentar merupakan penjelasan yang menerangkan maksud dari skrip agar
skrip tersebut dapat mudah dipahami.
Pengenalan PHP
Tanda komentar PHP:

• // , berada dalam satu baris
• /*…..*/, digunakan apabila pemberian komentar lebih dari satu baris.

Pengenalan PHP
<?php
//perintah echo untuk menampilkan sesuatu pada layar browser.
/*
Tag <br> merupakan tag HTML yang berfungsi untuk melakukan
pergantian baris.
*/
?>
Pengenalan PHP
• Variabel:
Suatu tempat untuk menyimpan data.

Data yang disimpan sewaktu bisa kita
panggil atau diganti dengan data lain.
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
Pengenalan PHP
Menampilkan Var. PHP:
<html>
<head>
</head>
<body>
<?php
$i=“ STTR CEPU”;
echo $i;
?>
</body>
</html>
Pengenalan PHP
Menampilkan Var. PHP:
<html>
<head>
</head>
<body>
<?php
$angka1=10;
$angka2=2;
$hasil=$angka1+$angka2;
echo $hasil;
?>
</body>
</html>
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
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.
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.
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).
Pengenalan PHP
Kalimat Bersyarat:
If (syarat/kondisi)
{
…….aksi………;
}
Jika memiliki dua syarat,

Nilai syarat yang satu berlawanan dengan yang lain
If (syarat/kondisi)
{
…….aksi………;
} Else
{
…….aksi………;
}
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”; }
?>
Pengenalan PHP
Kalimat Bersyarat:
Switch (….kondisi…)
{
case …..syarat1…:
….aksi……;
break;
case …..syarat2…:
….aksi……;
break;
…………..
default:
………….aksi apabila semua syarat tidak terpenuhi…….
}
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”;
}
?>
Pengenalan PHP
Perulangan (While)
While(….syarat….)
………aksi…….;
}
Pengenalan PHP
Perulangan (While)
$angka=9;
Echo “Bil. Ganjil antara 10 hingga 30: <br>”;
While($angka < 29)
$angka += 2;
echo “$angka <br>”;
}
Pengenalan PHP
Perulangan (For)
For (nilai awal,syarat perulangan, pola penambahan)

{
………aksi……….;
}
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>”;
}
?>
Pengenalan PHP
Array
Seperti halnya variabel, array berfungsi juga sebagai penyimpan data,

akan tetapi array mampu menyimpan lebih dari satu data.
Pengenalan PHP
Array
<?php
$bulan=array(“Januari”,”Februari”,”Maret”,”April”);
Echo “Musim hujan biasanya terjadi pada bulan: <br> ”;
//akses array
Echo “$bulan[0] <br>”; Echo
“$bulan[1] <br>”; Echo
“$bulan[2] <br>”;
?>
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.
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.
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)
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
PHP & MySQL
Implementasi MySQL
dengan PhpMyAdmin
Studi Kasus:
• Membuat File Koneksi
• Menampilkan Data pada MySQL dengan PHP
• Form, method: Post & Get

Modul-Design Web

Diunggah oleh

Informasi Dokumen

Judul Asli

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 Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Konsep Dasar Web Design

Tag HTML untuk memasukkan gambar:

Catatan: img src=image source

Tuliskan Source Code dari tampilan berikut:

Tuliskan Source Code dari tampilan berikut:

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

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

Style pada Font

Style pada Font

Bullet & Numbering

Variasi bullet pada HTML:

• Bullet & Numbering

• Bullet & Numbering

• Bullet & Numbering

• Bullet & Numbering

Bullet & Numbering

Daftar bernomor pada HTML:

• Bullet & Numbering

Catatan: ol = ordered list

• Bullet & Numbering

• Bullet & Numbering

• Bullet & Numbering

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

Catatan: selector ini kesemuanya untuk bold+italic text

Perbedaan CSS pewarisan (inheritance) dengan

Aturan CSS berdasarkan case to case

disc -> efek lingkaran

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

Catatan: bagian deklarasi harus diawali dengan tanda . (titik)

• <?php ……………… ?>, atau

echo,print atau printf berfungsi untuk menampilkan sesuatu dilayar

Tanda komentar PHP:

• /*…..*/, digunakan apabila pemberian komentar lebih dari satu baris.

Suatu tempat untuk menyimpan data.

Simbol Fungsi Operator Contoh Penggunaan

Simbol Operator Fungsi Operator Contoh Penggunaan

= Mengisikan nilai yang disebelah kanan operator ke variabel yang $data=10+2;

Berguna untuk menggabungkan dua kondisi atau lebih.

Jika memiliki dua syarat,

For (nilai awal,syarat perulangan, pola penambahan)

Seperti halnya variabel, array berfungsi juga sebagai penyimpan data,

DDL (Data Definition Language):

Anda mungkin juga menyukai

• /…../, digunakan apabila pemberian komentar lebih dari satu baris.