Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML - Binus Repository
Document related concepts
no text concepts found
Transcript
Matakuliah Tahun : L0182 / Web & Animation Design : 2008 Project Pertemuan 13 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" : – – – – – – – – 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 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 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 : Tag Bina Nusantara 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 Text Formatting Tags Tag Description <b> </b> Defines bold text <big> </big> Defines big text <em> </em> Defines emphasized text <i> </i> Defines italic text <small> </small> Defines small text <strong> </strong> Defines strong text <sub> </sub> Defines subscripted text <sup> </sup> Defines superscripted text Bina Nusantara HTML Images • In HTML, images are defined with the <img> 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 <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). • A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Bina Nusantara Hyperlink • HTML uses the <a> (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 <a> 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 Property Description font-family: familyname To set the font family font-style: italic/oblique/normal To create italics/oblique/normal text font-weight: bold/normal To apply bold/normal formatting font-size: sizept, e.g., 12pt To set the font size line-height: sizept, e.g., 12pt To set the line height color: #rrggbb To set the text color background: #rrggbb To set the text background text-align: left/right/center/justify To align text text-decoration: underline/overline/linethrough/blink/none To underline/overline/linethrough/blink text Bina Nusantara Layout with Styles Property Description height: size, e.g., 200 Setting the element’s height width: size, e.g., 200 Setting 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, Setting the margins around an e.g., 10 element Vertical-align: baseline/middle/sub/super/texttop/text-bottom/top/bottom Bina Nusantara Aligning elements vertically
