1. HTML and Style

2. Session overview Leveling-off on the basic concepts of HTML and Styles Discuss Web authoring options

3. Learning Outcomes At the end of this session you will be able to: Recognise HTML document structure, distinguishing between elements and attributes Translate RGB to Hex values for describing colour in HTML Compare methods of adding style information to HTML documents

4. HTML Fundamentals Elements are HTML instructions Attributes specify certain parameters

5. HTML document structure HTML tags need to be nested in order (like Russian dolls) [information about the document] [data to appear on browser page]

6. Document structure (cont.) Structure sections of HTML in a similar way to how documents are encoded in a Word processor:

7. Learning more about HTML HTML is dead! Smarter applications to generate web code automatically Convergence and community

8. Colour on the Web Image file formats –JPG –GIF –PNG RGB and Hex 216 ‘Web-safe’ colours

9. HTML style (the old way) Hello In mid-90s, this was the only way to change browser default styles Whenever you want to update the look and feel of that page, you will need to change each individual style statement. This can be very tedious! In stricter versions of HTML and particularly XHTML, HTML styles are not permitted

10. Cascading style sheets - CSS A language distinct from HTML CSS can control the style of any HTML element. Additionally, you can create classes of HTML elements Integrity of HTML code can be maintained for usability in multiple environments, while more powerful style control can be achieved and managed separately

11. CSS... Replaces the need for HTML tables and styles… sort of. –Internet Explorer 3+ –Netscape Navigator 4+ –Opera 3+ CSS can control the style of any HTML element. Additionally, you can create classes of HTML elements

12. CSS and HTML When using CSS, it is very important to use HTML tags for the purpose designed. Think about what a tag means instead of what effect it has, and use it for that purpose.

13. Using CSS in HTML 3 ways to add CSS to Web documents (the ‘cascade’) –linked stylesheet –in –in-line

14. Summary HTML is a language to create Web documents. It is superceded by XHTML, but will continue to work in browsers for a few years. HTML tags provide structure for text or other information in a document. There are 216 Web-safe colours. While you can use 16million colours, if a user’s monitor cannot display that colour, their computer will ‘dither’ to the nearest colour. To anticipate this, use the Web-safe palette or adaptive dither. There are four ways to encode style information in HTML documents:  The HTML Styles method if you don’t use CSS.  Top-of-the-page styles  The linked CSS document  Inline styles