Introduction to Web & HTML Pertemuan 08 Matakuliah
advertisement
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
