Title Goes Here - Binus Repository

Download Report

Transcript Title Goes Here - Binus Repository 

Matakuliah
Tahun
: L0182 / Web & Animation Design
: 2008
Introduction to Web & HTML
Pertemuan 08
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• Memahami dasar-dasar dalam mendesain Web yang
baik
• Mengetahui sintaks-sintaks dasar pada HTML
Bina Nusantara
Outline Materi
•
•
•
•
•
•
•
•
User Interface
Eight Golden Rules
World Wide Web
Top Ten Mistakes in Web Design
Advantages of Using Web
HTML
HTML Tags
HTML Tag Attributes
Bina Nusantara
User Interface
• User Interface is a linkage between a human and a device or system
that allows the human to interact with that device or system.
• The user interface provides means of :
– Input, allowing the users to manipulate a system
– Output, allowing the system to produce the effects of the users'
manipulation.
• Currently, the following types of user interface are the most common :
– Graphical User Interface (GUI) accept input via devices such as
computer keyboard and mouse and provide articulated graphical
output on the computer monitor.
– Web User Interface (WUI) accept input and provide output by
generating web pages which are transmitted via the Internet and
viewed by the user using a web browser program.
Bina Nusantara
Good Interaction Design
• To improve the usability of an application it is important to
have a well designed interface.
• Ben Shneiderman's "Eight Golden Rules of Interface
Design" :
–
–
–
–
–
–
–
–
Bina Nusantara
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialog to yield closure
Offer simple error handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load
Design Tools
• CAI software : Macromedia Authorware, IconAuthor,
Quest.
• Multimedia construction tools : HyperCard,
Macromedia Director, Macromedia Flash.
• Slide presentation software : Microsoft PowerPoint.
• Visual programming tools : Microsoft Visual Basic,
Visual Studio .NET), Borland Delphi.
• Web design tools : Macromedia Dreamweaver,
Macromedia Fireworks.
Bina Nusantara
World Wide Web
• World Wide Web (commonly shortened to the Web) is a
system of interlinked hypertext documents accessed via
the Internet.
• With a Web browser, a user views Web pages that may
contain text, images, videos, and other multimedia and
navigates between them using hyperlinks.
Bina Nusantara
Top Ten Mistakes in Web Design
• Jakob Nielsen's Top Ten Mistakes in Web Design :
–
–
–
–
–
–
–
–
–
–
Bina Nusantara
Using Frames
Gratuitous Use of Bleeding-Edge Technology
Scrolling Text, Marquees, and Constantly Running Animations
Complex URLs
Orphan Pages
Long Scrolling Pages
Lack of Navigation Support
Non-Standard Link Colors
Outdated Information
Overly Long Download Times
Advantages of Using Web
•
•
•
•
•
•
•
•
•
•
•
•
Global audience
Operates 24 hours, 7 days a week
Relatively inexpensive
Product advertising
Distribute product catalogs
Online surveys
Announcements
Online discussion forums
Obtain customer feedback
Immediate distribution of information
Multimedia
Formatting capabilities
Bina Nusantara
HTML
• HyperText Markup Language (HTML) is a markup
language used to structure text and multimedia
documents and to set up hypertext links between
documents, used extensively on the World Wide Web.
• Web pages are built with HTML tags (codes) embedded
in the text.
• HTML defines the page layout, fonts and graphic
elements.
• In order to make pages interactive, programming code
can be embedded in an HTML page. For example :
JavaScript and VBScript
Bina Nusantara
HTML Tags
• HTML Tags are commands written between less than
(<) and greater than (>) signs, also known as angle
brackets, that indicate how the browser should display
the text.
Bina Nusantara
Basic HTML Tags
Tag
Description
<html> </html>
Defines an HTML document
<body> </body>
Defines the document's body
<h1> </h1> to <h6> </h6>
Defines header 1 to header 6
<p> </p>
Defines a paragraph
<br>
Inserts a single line break
<hr>
Defines a horizontal rule
<!-- -->
Defines a comment
• Note : browser will recognize HTML code whether you
type it all in all caps or in small letters or in a mixture of
both.
Bina Nusantara
Basic HTML Tags (cont..)
• Headings
– <h1>This is a heading</h1>
• Paragraphs
– <p>This is a paragraph</p>
• Line breaks
– <p>This<br>is a paragraph<br>with line breaks</p>
• <!-- This is a comment -->
Bina Nusantara
HTML Tag Attributes
• Attributes provide additional information to an HTML
element.
• Attributes are always specified in the start tag of an
HTML element.
• Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single
style quotes are also allowed. Example : name="value".
• Examples :
– <h1 align="center"> has additional information about the
alignment.</h1>
– <body bgcolor="yellow"> has additional information about the
background color.</body>
– <table border="1"> has additional information about the border
around the table.</table>
Bina Nusantara
Nesting Tags
• In some cases, you may want to modify your page
contents with more than one tag.
• There are two things to keep in mind here :
– Not all tags can contain all other kinds of tags.
– Order is everything. Whenever you use a closing tag it should
correspond to the last unclosed opening tag.
• Example :
– <H1>Web<I>Animation</I></H1>  correct
– <H1>Web<I>Animation</H1></I>  incorrect
Bina Nusantara
Simple HTML Code
Bina Nusantara