Pertemuan 2 Web Design Fundamental

38
1 Pertemuan 2 Web Design Fundamental Matakuliah : T0053/Web Programming Tahun : 2006 Versi : 2

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 Presentation

Transcript of Pertemuan 2 Web Design Fundamental

Page 1: Pertemuan 2 Web Design Fundamental

1

Pertemuan 2Web Design Fundamental

Matakuliah : T0053/Web Programming

Tahun : 2006

Versi : 2

Page 2: Pertemuan 2 Web Design Fundamental

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

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

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

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

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

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

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

9

Result

Page 10: Pertemuan 2 Web Design Fundamental

10

Text Formatting

• List (bullet)

• Text Style:– Italic– Font– Underline– Bold, etc

• Paragraph control

• Etc

Page 11: Pertemuan 2 Web Design Fundamental

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

12

Result

Page 13: Pertemuan 2 Web Design Fundamental

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

14

Result

Page 15: Pertemuan 2 Web Design Fundamental

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

16

Unordered List

<p>Produk kami terdiri dari :</p>

<ul>

<li>Training</li>

<li>Konsultasi</li>

</ul>

Page 17: Pertemuan 2 Web Design Fundamental

17

Result

Page 18: Pertemuan 2 Web Design Fundamental

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

19

Advanced Formatting

• Table

• Frame

• Cascade Style Sheet (CSS)

• XSL (XML Style Sheet)

Page 20: Pertemuan 2 Web Design Fundamental

20

Table

<table >

<tr>

<td>no</td>

<td>nama</td>

</tr>

</table>

Page 21: Pertemuan 2 Web Design Fundamental

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

22

Result

Page 23: Pertemuan 2 Web Design Fundamental

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

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

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

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

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

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

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

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

31

Result

Page 32: Pertemuan 2 Web Design Fundamental

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

33

Result

Page 34: Pertemuan 2 Web Design Fundamental

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

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

36

Output

Input dialog

Message dialog

Page 37: Pertemuan 2 Web Design Fundamental

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

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