Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

Introduction to Web & HTMLPertemuan 08

Matakuliah : L0182 / Web & Animation Design

Tahun : 2008

Bina Nusantara

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" :– 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

Bina Nusantara

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 :– 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

Bina Nusantara

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

• Note : browser will recognize HTML code whether you type it all in all caps or in small letters or in a mixture of both.

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

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>

•

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

Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

Documents

Transcript of Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.