Project Pertemuan 13 Matakuliah: L0182 / Web & Animation Design Tahun: 2008

Bina Nusantara Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat dan mempresentasikan web yang sudah dibuat sesuai dengan prinsip-prinsip yang telah diajarkan

Bina Nusantara Outline Materi Eight Golden Rules Top Ten Mistakes in Web Design HTML Text Formatting Tags HTML Images Table Hyperlink CSS Formatting Text with Styles Layout with Styles

Bina Nusantara Eight Golden Rules 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 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 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. Basic HTML Tags : TagDescription Defines an HTML document Defines the document's body to Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

Bina Nusantara Text Formatting Tags TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text

Bina Nusantara HTML Images In HTML, images are defined with the tag. To display an image on a page, you need to use the src attribute. The value of the src attribute is the URL of the image you want to display on your page. The “alt” attribute is used to define an "alternate text" for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images.

Bina Nusantara Table Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Bina Nusantara Hyperlink HTML uses the (anchor) tag to create a link to another document. An anchor can point to any resource on the Web : an HTML page, an image, a sound file, a movie, etc. The tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

Bina Nusantara CSS –Example :  Body element will be displayed in black text color  If the value is multiple words, put quotes around the value  If you wish to specify more than one property, you must separate each property with a semicolon.  You can group selectors. All header elements will be displayed in green text color

Bina Nusantara Formatting Text with Styles PropertyDescription font-family: familynameTo set the font family font-style: italic/oblique/normalTo create italics/oblique/normal text font-weight: bold/normalTo apply bold/normal formatting font-size: sizept, e.g., 12ptTo set the font size line-height: sizept, e.g., 12ptTo set the line height color: #rrggbbTo set the text color background: #rrggbbTo set the text background text-align: left/right/center/justifyTo align text text-decoration: underline/overline/line- through/blink/none To underline/overline/line- through/blink text

Bina Nusantara Layout with Styles PropertyDescription height: size, e.g., 200Setting the element’s height width: size, e.g., 200Setting the element’s width border-top/bottom/left/right: thin/medium/thick or sizepx Setting the border padding-top/bottom/left/right: size, e.g., 10 Adding padding around the element margin-top/bottom/left/right: size, e.g., 10 Setting the margins around an element Vertical-align: baseline/middle/sub/super/text- top/text-bottom/top/bottom Aligning elements vertically