Creating Web Documents

1
Creating Web Documents

• CSS examples
• (do more later)
• Lab/Homework Read chapters 15 16. Work on
  Project 3, do postings

2
Cascading Style sheets

• The focus on HTML is/was structure content, not
  presentation.
• Web originated as medium for communication among
  researchers, not artists or advertisers
• Very, very difficult to control display across
  different platforms, different window sizes,
  different computers.
• Cascading Style Sheets is attempt to improve
  presentation
• separate structure content from display
• Specify display for multiple instances of tags,
  multiple pages
• Evolving technologies XML, XSL, ?

3
Styles

• specify aspects of the formatting of tags in
  addition or to change current formatting.
• Aspects can include
• fonts
• NOTE font tag sets specific attributes in fixed
  order. Can also use font-family, font-size, etc.
• color and background color
• position, indenting, action of overlap
• borders

4
CSS examples

• p background yellow font-family arial color
  red
• p.intro text-indent 200pt background gray
  font-family impact color red
• ltpgt .
• ltp class"intro"gt

5
CSS rules can be in

• External file. Save as basestyles.css.
• ltLINK RELstylesheet TYPEtext/css
  HREFbasestyles.cssgt
• Internal in head section
• ltstylegt rules lt/stylegt
• In-line applies to just one section of HTML
• ltp style"color red text-indent 100px"gt
• Cascading refers to which rules apply the one
  closest to the code wins.

6

• lthtmlgtltheadgtlttitlegtCSS test lt/titlegt
• ltstylegt H1 font times font-size 20pt
• img border groove
• P font-size 10pt color red text-align
  justified
• p.intro font-size 11pt background yellow
  text-align left
• lt/stylegt lt/headgt ltbodygt
• Here is text outside any tag.
• lth1gt here is a heading 1 lt/h1gt
• ltp class"intro"gtHere is an introductory
  paragraph lt/pgt
• ltpgt here is a regular paragraph.
• lt/bodygt lt/htmlgt

7
CSS Layout concepts

• ltdivgt is a new block type tag with no default
  characteristics to be used as you define it.
• Tags are in parent tags
• lthtmlgtltbodygt lth1gt ltpgt lt/h1gt ltpgt lt/pgt ltdiv
  id"sp"gt ltpgt lt/divgt lt/bodygt lt/htmlgt
  The body tag is parent to the h1 and the second p
  tag. The h1 tag is parent to the first p tag.
  The div tag is parent to the 3rd p tag.
• Certain style calculations are based on the tags
  parent.

8
div

• Can have id or class to identify it for a style
• Div can also be used to divide portions of the
  HTML document
• AD/Preview Creating Dynamic Web Documents goes
  more into styles.
• See also examples from my home page.

9
CSS layout concepts

• relative positioning is from where the element
  would otherwise be. Absolute positioning from
  the parent.
• Offsets are the top and left position values. Top
  is from the top so higher numbers mean further
  down the page. Default unit is pixels.
• IMG position absolute top 100 left 0

10
Challenge(s)

• Use styles to specify absolute location of 3
  images on page.
• give each image its unique id.
• specify style for each img id to be in specific
  location.
• can also specify border, padding, margin.

11
CSS layout concepts

• Images are surrounded by
• padding
• border. Can specify which edge (top, left,
  bottom, right), type (double, ridge, others),
  thickness (thin, medium, thick or value 10px)
  and color.
• margin
• IMG padding 30 border groove red margin 40
• The rule can be
• in head section applies to all
• in parent applies to all tags in parent
• in tag itself

12
image has transparent background
padding
margin
border
13
External file

• Create set of rules (copy and paste what you just
  did) and save as base.css
• Find/create HTML file (copy what you just did)
• lthtmlgtltheadgtlttitlegtCSS test lt/titlegt
• ltlink relstylesheet href"base.css"gt
• ltstylegt
• lt/stylegt lt/headgt ltbodygt
• lt/bodygt lt/htmlgt
• Caution textbook examples in chapter 16 refer to
  styles defined in chapter 15 using an external
  style sheet.

add additional or overriding rules
14
Meta tags

• Go in head section. Various types. One use is
  for browsers and search engines.
• ltmeta name"keywords" content"American
  Literature, student projects, Native American
  poetry, Harlem Renaissance"gt
• ltmeta name"description" content"College
  American Literature course student projects"gt

15
Project 3 requirements

• At least one use of CSS
• Put keyword meta tag in the head section of the
  index.html file.
• This may be a frameset file.
• You could include keyword description meta tags
  for all the pages.
• Frames, tables, lists, image map, animated gif,
  mailto, YOUR NAME, biblio/works cited page if you
  use other sources, JavaScript, form(s)

16
Homework

• Postings
• Do searches using 'your' keywords, use at least 2
  search sites, comment on results.
• Work on Project 3 (due May 6)
• Get Project 1 Project 2 up on TA's class site.
• If you are continuing your project 2, you still
  need a link from both lists.