html and style. session overview leveling-off on the basic concepts of html and styles discuss web...
TRANSCRIPT
HTML and Style
Session overview
• Leveling-off on the basic concepts of HTML and Styles
• Discuss Web authoring options
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
HTML Fundamentals
• Elements are HTML instructions
• Attributes specify certain parameters
HTML document structure
• HTML tags need to be nested in order (like Russian dolls)
<HTML>
<HEAD>[information about the document]</HEAD>
<BODY>[data to appear on browser page]</BODY>
</HTML>
Document structure (cont.)
• Structure sections of HTML in a similar way to how documents are encoded in a Word processor:
<h1><h2>
<h3>
Learning more about HTML
• HTML is dead!
• Smarter applications to generate web code automatically
• Convergence and community
Colour on the Web
• Image file formats– JPG– GIF– PNG
• RGB and Hex
• 216 ‘Web-safe’ colours
HTML style (the old way)
<P><font face=”Arial, Helvetica” size=”2” color=”#336699”> Hello</font></P>
• 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
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
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
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.
Using CSS in HTML
• 3 ways to add CSS to Web documents (the ‘cascade’)– linked stylesheet – in <head> – in-line
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