1 / 38

Pertemuan 2 Web Design Fundamental

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

kyrene
Télécharger la présentation

Pertemuan 2 Web Design Fundamental

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 areusefull 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> 7 8<SCRIPT LANGUAGE = "VBScript"> 9<!-- 10 Option Explicit 11Dim intTotal 12 13Sub cmdAdd_OnClick() 14Dim intValue 15 16 intValue = InputBox("Enter an integer", "Input Box", , _ 17 1000, 1000) 18 intTotal = CInt( intTotal ) + CInt( intValue ) 19Call MsgBox("You entered " & intValue & _ 20 "; total so far is " & intTotal, , "Results") 21End 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

  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

More Related