Project Session 13 Subject : L0182 / Web & Animation Design
advertisement
Subject Year : L0182 / Web & Animation Design : 2009 Project Session 13 Learning Outcomes At the end of this session, the students will be able to : • Create and present the Website Bina Nusantara Course Outlines • • • • • • • • HTML Text Formatting Tags HTML Images Table Hyperlink CSS Formatting Text with Styles Layout with Styles 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 : 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
