Week 2

1
Week 2
Structure, Behavior Presentation

• Due Today Assignment 1
• Q A
• Any FTP challenges?
• Review Week 1
• Review Structure Elements, Tags, Attributes
• Introduction to CSS (Cascading Style Sheets)
• In-Class Exercise
• Assignment Project 1 revised

2
Review Week 1

• Web servers store and deliver Web pages.
• Browsers retrieve pages and render their content
  based on the HTML and CSS.
• We markup content with tags using HTML to provide
  structure and create CSS for the presentation.
• lth1gtColumbia College Chicagolt/h1gt
• This is an element that tells the browser to
  display the words Columbia College Chicago at the
  heading 1 size, the largest size.

3
Structure Review

• Magic formula of HTML
• ltelement attributevaluegt
• Example
• lta hrefdirections.htmgtDetailed Directionslt/agt
• Element ltagtlt/agt
• Tags opening tag (anchor will create a link) ltagt
  closing tag lt/agt
• Tells the browser that something specific is
  going to happen.
• Attributes href (hypertext reference)
• Provides additional information to the element
• Tells browser the destination link.
• Value is directions.htm
• The actual name of the file.

4
Planning your path

• Relative Path
• Links within the same document.
• Links to another folder ../filename
• Tells the browser to go up to the parent folder
  (root folder)
• This is also an absolute path within the same
  site
• Absolute Path
• Using a URL
• The path is made up of all the folders you go
  through to get to the document you want.

5
Planning your path

• lta hrefdirections.htmgtDetailed Directionslt/agt
• Browser looks for the document in the same
  folder.
• lta hrefparty/directions.htmgtDetailed
  Directionslt/agt
• Browser looks for the document in the folder
  above.
• lta href../directions.htmgtDetailed
  Directionslt/agt
• Browser looks for the document in the root
  folder.
• lth2gtlta idnamegtA word to go tolt/agtlth2gt
• Id attribute in the ltagt element is a identifier
  to a location within a page.
• lta hrefindex.htmdocumentwordgtSee the wordlt/agt
• symbol links specifically to a destination
  anchor on another page within the same site.
• lta target_blank hrefhttp//name.comlt/agt
• Opens a page in a new window.
• Can be problematic within different browsers.
• lta hrefhttp//name.comNamegtNametoshowlt/agt
• Links to a specific destination anchor on a site.

6
CSS Basic Concept

• Style Rules
• Selector
• The link between the HTML document and the style
  sheet
• All HTML element types are possible selectors.
• Declaration
• Two parts property and value
• Ex to set the text color of 'H1' elements to
  blue
• H1 color blue
• selector ('H1') and declaration ('color blue').
• Style Sheets will determine the final
  presentation of the document.

7
CSS Basic Concepts

• Four ways to combine style and HTML
• In-Line
• 'STYLE' attribute on an element inside 'BODY'.
• Embedded
• 'STYLE' element inside the 'HEAD' element.
• Linked
• using the 'LINK' element to link an external
  style sheet.
• Import
• imported style sheet using the CSS '_at_import'
  notation.
• Uncertain support from different browsers.

8
Grouping in CSS

• Use comma-separated lists to reduce the size of
  style sheets.
• H1, H2, H3 font-family helvetica
• Declarations can also be grouped
• H1 font-weight bold font-size 12pt
  line-height 14pt font-family helvetica
  font-variant normal font-style normal
• Some properties have their own grouping syntax
• H1 font bold 12pt/14pt helvetica
• Relates to the previous example.

Source http//www.w3.org/TR/CSS1
9
CSS (Embedded)

• Used to control presentation
• Can be added directly to an HTML Web page by
  putting the CSS rules inside the ltstylegt element.
  The ltstylegt element should always be inside the
  ltheadgt element.
• Example
• lt?xml version"1.0" encoding"UTF-8"?gtlt!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN""http//www.w3.org/TR/xhtml1/DTD/
  xhtml1-transitional.dtd"gtlthtml lang"en"
  xmllang"en" xmlns"http//www.w3.org/1999/xhtml"
  gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetISO-8859-1" /gt
• lttitlegtYour Title Herelt/titlegt
• ltstyle type"text/css"gt
• p
• color maroon
• lt/stylegt
• lt/headgt
• ltbodygt
• all your info
• lt/bodygt
• lt/htmlgt

10
CSS - External Style Sheet

• An external style sheet that is linked to the
  XHTML file.
• Example
• lt?xml version"1.0" encoding"UTF-8"?gtlt!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN""http//www.w3.org/TR/xhtml1/DTD/
  xhtml1-transitional.dtd"gtlthtml lang"en"
  xmllang"en" xmlns"http//www.w3.org/1999/xhtml"
  gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetISO-8859-1" /gt
• lttitlegtYour Title Herelt/titlegt
• ltlink typetext/css relstylesheet
  hrefname.css /gt
• lt/headgt
• ltbodygt
• all your info
• lt/bodygt
• lt/htmlgt
• ltLinkgt element
• Links-in external information.
• text/css is the type of informationa CSS style
  sheet.
• The location of the file is the href. It can
  also be a URL.

11
CSS - External Style Sheet

• Use braces to surround the style for the
  element to create the rule.
• Element property value
• Ex p
• font-family sans-serif
• color gray
• P is the selector - the element
• The rule applies the style to all the ltpgt
  elements.
• Font-family is the property
• Sans-serif is the value
• /comments the browser will ignore it/

12
Elements as a Class

• Using XHTML and CSS a class of elements can be
  defined.
• Then the styles are applied to any element that
  belongs to that class.
• To select a class
• selector.classname property value
• In the XHTML file add this line of code into the
  body.
• ltselector classclassnamegt
• Ex p.blueberry color purple
• Then in your html document add this line of code.
• ltp classblueberrygt

13
Two main types of elements Block-level and
Inline.

• Inline elements
• An inline element shares a line space with other
  elements.
• Ex ltpgtSeveral ltemgtemphasizedlt/emgt words
  ltstronggtappearlt/stronggt.lt/Pgt
• Several emphasized words appear.
• ltqgt, ltemgt, and ltagt are inline elements
• Block-level elements
• They stand on their own and are displayed with
  space above and below the content within them.
• ltpgt, ltblockquotegt, ltolgt, ltulgt and ltligt

14
Inheritance

• The normal inheritance rules apply to classed
  elements they inherit values from their parent
  in the document structure.
• Not every style is inherited. Properties are
  inherited so generally how your text looks is
  inherited.
• Ex If a property that is inherited is set for
  the ltbodygt element, all the ltbodygts child
  elements will inherit it.
• Font color (color property)
• Font size, weight, style
• font family
• Use references to check which CSS properties are
  inherited and which are not.
• http//www.w3.org/TR/CSS1basic-concepts
• You can always override properties that are
  inherited by creating a more specific rule for
  the element you want to change.

15
Inheritance
Elements inherit styles from their parents. In
this example who will get the inheritance?
Source Head First HTML with CSSXHTML by
Elisabeth Freeman Eric Freeman
16
Inheritance
Blockquotes have no CSS rules, so it inherits the
color from the body.
img element doesnt get a color inheritances.
Source Head First HTML with CSSXHTML by
Elisabeth Freeman Eric Freeman
17
Three kinds of lists

• Unordered list
• ltulgt ltligtthe first list itemlt/ligt ltligtthe second
  list itemlt/ligt ltligtthe third list itemlt/ligt lt/ulgt
  
• Always end the list with the lt/ulgt end tag, but
  that the lt/ligt is optional and can be left off.
• Ordered list
• ltolgt ltligtthe first list itemlt/ligt ltligtthe second
  list itemlt/ligt ltligtthe third list itemlt/ligt lt/olgt
  
• Definition list
• ltdlgt ltdtgtthe first termlt/dtgt ltddgtits
  definitionlt/ddgt ltdtgtthe second termlt/dtgt ltddgtits
  definitionlt/ddgt ltdtgtthe third termlt/dtgt ltddgtits
  definitionlt/ddgt lt/dlgt
• The end tags lt/dtgt and lt/ddgt are optional and can
  be left off.
• Lists can be nested, one within another.
• ltolgt ltligtthe first list itemlt/ligt ltligt the second
  list item ltulgt ltligtfirst nested itemlt/ligt
  ltligtsecond nested itemlt/ligt lt/ulgt lt/ligt ltligtthe
  third list itemlt/ligt lt/olgt

Source http//www.w3.org/MarkUp/Guide/
18
Elements

• The DIV and SPAN elements, in conjunction with
  the id and class attributes, offer a generic
  mechanism for adding structure to documents.
• ltspangt separates inline content.
• ltdivgt divides logical sections for block level
  content.
• ltclassgt is a reusable attribute that may be
  applied to any element on a page.
• ltidgt is a unique attribute that is used only
  once per page.

19
XHTML Basics

• A valid XHTML Code
• lt?xml version"1.0" encoding"UTF-8"?gtlt!DOCTYP
  E html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN""http//www.w3.org/TR/xhtml1/DTD/
  xhtml1-transitional.dtd"gtlthtml lang"en"
  xmllang"en" xmlns"http//www.w3.org/1999/xhtml"
  gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetISO-8859-1" /gt
• lttitlegtYour Title Herelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  hrefanyname.css" /gt
• lt/headgt
• ltbodygt
• ltpgtType page content here. to
• lta href"http//example.org/"gtexample.orglt/agt
• lt/pgt
• lt/bodygt
• lt/htmlgt

20
Assignments

• In-Class assignment
• 1) Create a CSS document
• 2) Pet Palace Lounge page
• Includes ol, ul, div, span, class, id, css
• 3) Use CSS to update your Analysis homework
• Homework Due next week
• Take home Quiz 1 - Due next week
• Non-Linear Visual Series
• Read online articles