HTML - Binus Repository
advertisement
Matakuliah
Tahun
Versi
: T0053/Web Programming
: 2006
:2
Pertemuan 2
Web Design Fundamental
1
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa
akan mampu :
• Menjelaskan elemen dasar Desain web
• Membuat halaman web statis sederhana
2
Outline Materi
•
•
•
•
•
Dasar desain web
Dasar HTML
Membuat Hyperlink dan Images
Pemformatan Tingkat Lanjut
Scripting sisi klien:
– Mengenal JavaScript
– Mengenal VB Script
3
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
4
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
5
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
6
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
7
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>
8
Result
9
Text Formatting
• List (bullet)
• Text Style:
– Italic
– Font
– Underline
– Bold, etc
• Paragraph control
• Etc
10
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>
11
Result
12
Marquee
<title>Contoh marquee</title>
</head>
<body bgcolor=yellow>
<h3><font color=silver></font>
<marquee behavior=alternate >UBinus Cute
HomePage</marquee></font></h3>
</body>
13
Result
14
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>
15
Unordered List
<p>Produk kami terdiri dari :</p>
<ul>
<li>Training</li>
<li>Konsultasi</li>
</ul>
16
Result
17
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>
18
Advanced Formatting
•
•
•
•
Table
Frame
Cascade Style Sheet (CSS)
XSL (XML Style Sheet)
19
Table
<table >
<tr>
<td>no</td>
<td>nama</td>
</tr>
</table>
20
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>
21
Result
22
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>
23
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>
24
Text Area
TextArea is usefull for entering complete data
Mohon masukkan alamat lengkap Anda:<br>
<textarea name="address" rows=5 cols=50></textarea>
25
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">
26
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>
27
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
28
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
29
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>
30
Result
31
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">
32
Result
33
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>
34
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>
7
8<SCRIPT LANGUAGE = "VBScript">
9<!-10
Option Explicit
11
Dim intTotal
12
13
Sub cmdAdd_OnClick()
14
Dim intValue
15
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 Sub
22-->
23</SCRIPT>
24</HEAD>
25
26<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
35
Output
Input dialog
Message dialog
36
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).
37
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
38