unit44 special topics of xhtml and CSS

unit44 special topics of xhtml and CSS - 5/26/2009 1 1 Unit...

Info iconThis preview shows pages 1–4. Sign up to view the full content.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: 5/26/2009 1 1 Unit 4 Special Topics in XHTML and CSS 2 Special Topics in XHTML and CSS • Tag Types • Generic Containers • Shifting Elements – Float – Clear • Graphics Editors • Computer Representations 1. Storage 2. Binary numbers • Color 1. Color models 2. Color Harmony • CSS Tidbits 3. Position 4. Display 3. Measuring Storage 4. Text and Glyphs 3. Web Colors 3 Tag Types • We‟ve seen that some tags can only go inside other tags • It isn‟t arbitrary • 4 main classes of tags: – Top level tags – Head tags – Block level tags – Inline tags 4 Tag Types • Top level tags define the overall structure of the document – They are the outer most “layers” of the HTML document – Examples: • <html> specifies this as an html document • <head> the header information which is usually not displayed as part of the page • <body> the “meat” of your page, displayed in the browser- Top level tags 5/26/2009 2 5 Tag Types • Head tags go inside the <head> top level tag – Gives information about the page, not things to display on the page – Examples: • <title> Gives the page‟s title at the top of the browser • <link> we use this to apply style sheets • <meta> provides metadata, such as keywords, author, etc.- Head tags 6 Tag Types • Block level tags take up vertical space on the page – Probably most widely used – Goes inside the <body> tag – Some you‟ve seen: • <p> paragraph • <hr> horizontal rule • <h1> heading tag • <ol> ordered list- Block level tags 7 Tag Types • Inline tags are those which can only exist inside block-level tags – Called “inline” because they are placed within the text • Contents of inline tags appear beside the last text … • whereas contents of block-level tags which appear below last block- level tag – Change the way part of a line looks – Examples: • <img> insert an image • <em> emphasis • <a> insert a hyperlink- Inline tags 8 Generic Containers • Currently, we know how to modify the properties of HTML tags using style sheets • But, we can only modify each tag and what it contains – Can‟t modify a group of tags as one • The generic containers, <span> and <div> , allow us to group tags or words 5/26/2009 3 9 Generic Containers • The generic container tags do absolutely nothing until they are modified by attributes • The <span> tag is an inline tag – Can modify the language (lang attribute), font color, font-family, font-style, etc. • The <div> tag is a block-level tag – Allows us to group paragraphs together with lists, etc. – Can be used to create navigation bars 10 • The <span> tag is useful for applying attributes to some text – E.g. I love chocolate-covered espresso beans span.chocolate { font-family: Times; color: #33330; font-weight: bold } I love <span class = “chocolate”> chocolate- covered espresso beans</span> Generic Containers- <span> tag 11 • <span> can be contained within block-level and inline-level elements...
View Full Document

This note was uploaded on 07/30/2009 for the course CMPT 165 taught by Professor Ramesh during the Summer '09 term at Simon Fraser.

Page1 / 25

unit44 special topics of xhtml and CSS - 5/26/2009 1 1 Unit...

This preview shows document pages 1 - 4. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online