1 / 30

Web Design Fundamental Session 2

Web Design Fundamental Session 2. Course : Web Programming Year : 2012. Learning Outcomes. In the end of session, students are expected to be able to : Explain basic elements of web design Create a simple static web page. Outline Materials. Web Design Fundamental HTML Basic

juro
Download Presentation

Web Design Fundamental Session 2

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. Web Design Fundamental Session 2 Course : Web Programming Year : 2012

  2. Learning Outcomes In the end of session, students are expected to be able to : • Explain basic elements of web design • Create a simple static web page

  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, 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> I study at BINUS University</h2></font><br> <p> Welcome to my Website</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> I study at BINUS University</b></font><br> <p> <i> Welcome to my Website</i> </p> </body>

  12. Result

  13. Marquee <title>Marquee Example</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> Important about designing web <ol type=1> <li> Information Design </li> <li> User Interface Design </li> <li> Graphics Design </li> </ol>

  16. Unordered List <p>Tools for Web Design:</p> <ul> <li>Content Authoring (HTML Editor)</li> <li>Adobe Photoshop, Illustrator</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”> My Site </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>number</td> <td>name</td> </tr> </table>

  21. Table <table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" > <tr> <td width="16%" bgcolor="#FFFF00"><b>Number</b></td> <td width="19%" bgcolor="#FFFF00"><b>Name</b></td> <td width="65%" bgcolor="#FFFF00"><b>Class</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 Input your name:<input name=name type=text size=20 maxlength=40><br> and Password :<input name=passwd type=password size=8 maxlength =8><br>

  24. Check and Radio Button Which country you want to visit: <br> <input type="Checkbox" name="cb value="1">Indonesia<br> <input type="checkbox" name=cb value="2" >New York<br> <input type="checkbox" name="cb value="3">Seoul<br> <input type="Checkbox" name=cb value="4" >Paris<br> Gender?<br> <input type="radio" name="cb value=“male">Male<br> <input type="radio" name=cb value=“female" >Female<br>

  25. Text Area TextArea is usefull for entering complete data Please insert your address: <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=“Submit">

  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=“main.htm"> <body> </body> </frameset>

  28. TM1(Kelompok) • Desaindanbuat form Web untuk login, jikasukses login menampilkantabelmahasiswa yang bsdiedit, delete, tambahdan update menggunakan database MySQL, serta JSP. • BuatteoritentangServlet (2 halaman) DIKUMPUL Hardcopy DI PERT 6

  29. 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

More Related