Post on 10-Jan-2016
description
1
Pertemuan 2Web Design Fundamental
Matakuliah : T0053/Web Programming
Tahun : 2006
Versi : 2
2
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa
akan mampu :
• Menjelaskan elemen dasar Desain web
• Membuat halaman web statis sederhana
3
Outline Materi
• Dasar desain web
• Dasar HTML
• Membuat Hyperlink dan Images
• Pemformatan Tingkat Lanjut
• Scripting sisi klien:– Mengenal JavaScript– Mengenal VB Script
4
Web Design Fundamental
• Web Design play important role in successful Web Application, it is the interface from computer to human world
• Web Application = Web Design + Web Programming
A web site designer must start by structuring the information content in ways that allow for
connection, interaction and interference. This principle concerns the format of a web site: the
structure, sense-making, navigation and interface
5
Web Design Fundamental
• Important about designing web :– Information Design– User Interface Design– Graphics design
• Tools for Web Design:– Content Authoring (HTML Editor)– Adobe Photoshop, Illustrator
6
HTML Basic
• HTML– Hypertext Markup Language– Not procedural– Markup language
• Identify elements of a page so that a browser can render that page on your computer screen
• Used to format text and information– Marked up with elements, delineated by tags– Tags: keywords contained in pairs of angle brackets
• HTML tags – Not case sensitive– Good practice to keep all the letters in one case
• Forgetting to close tags is a syntax error
7
HTML Structure
• Always include the <HTML>…</HTML> tags• Comments placed inside <!--…--> tags• HTML documents
– <HEAD>… </HEAD> section• Info about the document• Info in header not generally rendered in display window• <TITLE>… </TITLE> element names your Web page
– <BODY>… </BODY> section• Page content• Includes text, images, links, forms, etc.• Elements include backgrounds, link colors and font faces• <P> element forms a paragraph, blank line before and after
8
Simple HTML Pages
<html><head><Title> Web Programming </Title></head><body bgcolor=silver><font color=blue><H2> Saya Mahasiswa UBinus </h2></font><br><p> Selamat Datang di Web Saya</p></body></html>
9
Result
10
Text Formatting
• List (bullet)
• Text Style:– Italic– Font– Underline– Bold, etc
• Paragraph control
• Etc
11
Font Formatting
<Title> Web Programming </Title>
</head>
<body bgcolor=#00FF00>
<font color=blue size=5>
<b> Saya Mahasiswa UBinus</b></font><br>
<p> <i> Selamat Datang di Web Saya</i> </p>
</body>
12
Result
13
Marquee
<title>Contoh marquee</title>
</head>
<body bgcolor=yellow>
<h3><font color=silver></font>
<marquee behavior=alternate >UBinus Cute HomePage</marquee></font></h3>
</body>
14
Result
15
Ordered List
<p>Tiga hal yang harus diperhatikan Siswa<ol type=1><li> Sayangilah <b>Ibumu</b> melebihi sayangmu
dengan do’i mu<li> Hormatilah dosenmu melebihi hormatmu
pada<u> Pak Polisi</u><li> Jangan<i> malas </i>belajar text book dan
internet</ol>
16
Unordered List
<p>Produk kami terdiri dari :</p>
<ul>
<li>Training</li>
<li>Konsultasi</li>
</ul>
17
Result
18
Hyperlink and Images
• We can use Hyperlink to let user jump to other location or resources
• Hyperlink can used internally (within same page) or externally
• Syntax:<a href=”www.widodo.com”> Situs Saya</a>
<img src=”widodo.jpg” width=300 height=400></img>
19
Advanced Formatting
• Table
• Frame
• Cascade Style Sheet (CSS)
• XSL (XML Style Sheet)
20
Table
<table >
<tr>
<td>no</td>
<td>nama</td>
</tr>
</table>
21
Table
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" >
<tr> <td width="16%" bgcolor="#FFFF00"><b>No</b></td> <td width="19%"
bgcolor="#FFFF00"><b>Nama</b></td> <td width="65%"
bgcolor="#FFFF00"><b>Kelas</b></td> </tr> <tr> <td width="16%">1</td> <td width="19%">Iwan</td> <td width="65%">Web Programming</td>
22
Result
23
Inputbox and Password
Inputbox and password are usefull for inserting data
Masukkan nama Anda :<input name=name type=text size=20 maxlength=40><br>
dan Password :<input name=passwd type=password
size=8 maxlength =8><br>
24
Check and Radio Button
Negara mana yang ingin anda kunjungi:<br><input type="Checkbox" name="cb value="1">Asia<br>
<input type="checkbox" name=cb value="2" >Afrika<br>
<input type="checkbox" name="cb value="3">North Amerika<br>
<input type="Checkbox" name=cb value="4" >Europe<br>
Jenis kelamin Anda ?<br><input type="radio" name="cb value="pria">Laki-Laki<br>
<input type="radio" name=cb value="wanita" >Wanita<br>
25
Text Area
TextArea is usefull for entering complete data
Mohon masukkan alamat lengkap Anda:<br>
<textarea name="address" rows=5 cols=50></textarea>
26
Reset and Submit Button
Reset Button for clearing message, submit button for
submitting data
<input type=reset value="Clear fields">
<input type=submit value="Kirim">
27
Frame
<title>UBinus Homepage</title></head><frameset rows="64,*"><frame name="banner" scrolling="no" noresize
target="contents" src="banner.htm"><frameset cols="150,*"><frame name="contents" target="main" src="menu.htm"><frame name="main" src="utama.htm"><body></body>
</frameset>
28
Client Side Scripting
• Client Side Scripting is script that execute in client side, that is Web Browser
• Client Side Scripting useful for standard input validation that no require any validation against database
• 2 popular Client Side Scripting:– Java Script: Java language like scripting,
supported by Netscape– VB Script: Visual Basic like scripting,
supported by Internet Explorer
29
Introduction to JavaScript
• JavaScript scripting language– Originally created by Netscape– Facilitates disciplined approach to designing
computer programs– Enhances functionality and appearance of Web pages– <SCRIPT>…</SCRIPT> tag:– Encloses entire script– Attribute LANGUAGE=“JavaScript”
• Indicates scripting language (JavaScript default in IE5 & Netscape)
• JScript– Microsoft’s version of JavaScript
30
Example Javascript
<HTML><script language=jscript>function mulai(){ alert ('Selamat datang di situs Web Programming!');}</script><BODY> <input type = button onclick="mulai()" value="process"> </BODY></HTML>
31
Result
32
Example Javascript
<Script Language=JScript>function pangkat(bil,p){ var hasil=1 for (var hit=1 ; hit<=p ; hit++) { hasil=hasil*bil; } return (hasil)}function process(){ var hasil; hasil = pangkat(in1.value,in2.value)*in3.value; out1.value=hasil}</Script><BODY bgcolor=yellow>Kalkulator Sederhana <br> <Input type=text name=in1 value=2>^ <Input type=text name=in2 value=3>* <Input type=text name=in3 value=5>= <Input type=text name=out1 disabled> <BR> <Input type=button onclick="process()" value="Hitung">
33
Result
34
Introduction to VBScript
• VB Script is a scripting language that similar to Visual Basic
• Develop bye Microsoft and supported by Internet Explorer
• Contoh:
<SCRIPT LANGUAGE = "VBScript">
Dim nama
Dim alamat
</SCRIPT>
35
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML>3<!--Fig. 22.15: addition.html -->
5<HEAD>6<TITLE>Our first VBScript</TITLE>78<SCRIPT LANGUAGE = "VBScript">9<!--10 Option Explicit11 Dim intTotal1213 Sub cmdAdd_OnClick()14 Dim intValue15 16 intValue = InputBox("Enter an integer", "Input Box", , _17 1000, 1000)18 intTotal = CInt( intTotal ) + CInt( intValue )19 Call MsgBox("You entered " & intValue & _20 "; total so far is " & intTotal, , "Results")21 End Sub22-->23</SCRIPT>24</HEAD>2526<BODY>27Click the button to add an integer to the total.28<HR>29<FORM>30<INPUT NAME = "cmdAdd" TYPE = "BUTTON" 31 VALUE = "Click Here to Add to the Total">32</FORM>33</BODY>34</HTML>
1.1. Set language to VBScript
1.2. OptionExplicit statement
1.3.Define procedure OnClick for the cmAdd button
1.4.Use CInt to convert input values from string subtype to integer subtype
36
Output
Input dialog
Message dialog
37
Summary
• Dokumen web statis dapat dibuat menggunakan HTML
• Untuk membuat dokumwen web yang dinamis, dapat menggunakan vbscript, javscript serta bahasa pemrograman web lainnya
• Client side scripting ialah script yang dieksekusi di klien (Web browser).
38
References
• Internet & WWW How to Program, Deitel & Deitel• “Fundamental Web Design Principles”,
http://ausweb.scu.edu.au/aw99/papers/turner/paper.html• Widodo Budiharto, “Panduan Lengkap Pemrograman
Web Menggunakan J2EE”, Andi Offset Yogyakarta 2005• “Introduction to Web Programming 4 days”: http://
www.wdvl.com/Authoring/Scripting/Tutorial• Introduction to Web Design 3 days:
http://www.wdvl.com/Authoring/HTML/Tutorial/index.html• www.widodo.com• http://www.w3schools.com