download

Matakuliah
Tahun
: Web Programming
: 2009
Web Design Fundamental
Pertemuan 2
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa
akan mampu :
• Menjelaskan elemen dasar Desain web
• Membuat halaman web statis sederhana
3
Outline Materials
•
•
•
•
•
•
•
Web Design Fundamental
HTML Basic
HTML Structure
Tags & Elements
Text Formatting
Lists, Hyperlinks, Images
Tables, Frames
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, sensemaking, 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
References
• Internet & WWW How to Program, Deitel & Deitel
• “Fundamental Web Design Principles”,
http://ausweb.scu.edu.au/aw99/papers/turner/paper.html
• “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
• http://www.w3schools.com
29

Download Report