pertemuan 2 web design fundamental
DESCRIPTION
Pertemuan 2 Web Design Fundamental. Matakuliah: T0053/Web Programming Tahun: 2006 Versi: 2. Learning Outcomes. Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Menjelaskan elemen dasar Desain web Membuat halaman web statis sederhana. Outline Materi. Dasar desain web - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/1.jpg)
1
Pertemuan 2Web Design Fundamental
Matakuliah : T0053/Web Programming
Tahun : 2006
Versi : 2
![Page 2: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/2.jpg)
2
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa
akan mampu :
• Menjelaskan elemen dasar Desain web
• Membuat halaman web statis sederhana
![Page 3: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/3.jpg)
3
Outline Materi
• Dasar desain web
• Dasar HTML
• Membuat Hyperlink dan Images
• Pemformatan Tingkat Lanjut
• Scripting sisi klien:– Mengenal JavaScript– Mengenal VB Script
![Page 4: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/4.jpg)
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
![Page 5: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/5.jpg)
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
![Page 6: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/6.jpg)
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
![Page 7: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/7.jpg)
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
![Page 8: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/8.jpg)
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>
![Page 9: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/9.jpg)
9
Result
![Page 10: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/10.jpg)
10
Text Formatting
• List (bullet)
• Text Style:– Italic– Font– Underline– Bold, etc
• Paragraph control
• Etc
![Page 11: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/11.jpg)
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>
![Page 12: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/12.jpg)
12
Result
![Page 13: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/13.jpg)
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>
![Page 14: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/14.jpg)
14
Result
![Page 15: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/15.jpg)
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>
![Page 16: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/16.jpg)
16
Unordered List
<p>Produk kami terdiri dari :</p>
<ul>
<li>Training</li>
<li>Konsultasi</li>
</ul>
![Page 17: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/17.jpg)
17
Result
![Page 18: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/18.jpg)
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>
![Page 19: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/19.jpg)
19
Advanced Formatting
• Table
• Frame
• Cascade Style Sheet (CSS)
• XSL (XML Style Sheet)
![Page 20: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/20.jpg)
20
Table
<table >
<tr>
<td>no</td>
<td>nama</td>
</tr>
</table>
![Page 21: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/21.jpg)
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>
![Page 22: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/22.jpg)
22
Result
![Page 23: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/23.jpg)
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>
![Page 24: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/24.jpg)
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>
![Page 25: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/25.jpg)
25
Text Area
TextArea is usefull for entering complete data
Mohon masukkan alamat lengkap Anda:<br>
<textarea name="address" rows=5 cols=50></textarea>
![Page 26: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/26.jpg)
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">
![Page 27: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/27.jpg)
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>
![Page 28: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/28.jpg)
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
![Page 29: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/29.jpg)
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
![Page 30: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/30.jpg)
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>
![Page 31: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/31.jpg)
31
Result
![Page 32: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/32.jpg)
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">
![Page 33: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/33.jpg)
33
Result
![Page 34: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/34.jpg)
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>
![Page 35: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/35.jpg)
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
![Page 36: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/36.jpg)
36
Output
Input dialog
Message dialog
![Page 37: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/37.jpg)
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).
![Page 38: Pertemuan 2 Web Design Fundamental](https://reader035.vdocuments.net/reader035/viewer/2022062422/568141fd550346895daddd01/html5/thumbnails/38.jpg)
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