HTML and Style

Download Report

Transcript HTML and Style 

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