$28 Theyll go $30'

1
28? Theyll go 30.
http//www.imdb.com/title/tt0048960/

• Danny Devito in Other Peoples Money (1991)

2
Computer Science 101Lecture 27
author.handalak.com/.../ images/javascript.jpg

• Spring Semester 2008
• Monday, March 24
• Week 10/18
• Albert H. Carlson

3
Announcements

• We are moving Exam 2 off by 1 week to March 28,
  due to the movement of last exam
• HW 4 is due Friday, March 28
• Review for Exam on March 26, in class

4
Finishing the Example

• Now that we have a first page, it is time to link
  the other pages together in order to form the
  total package
• Lets make three other pages that we will link
  into
• Practice1.html
• Practice2.html
• Practice3.html

5
End of the Example

• Where we want to go now is to create three very
  simple pages for one reason
• Show linking the pages between each other
• A page that you link to that does not link to
  other pages is called a sink page
• Each of these will have a different background
  color and link to each of the other pages, as
  well as the index page

6
Other HTML Tags - Lists

• ul vs ol
• ol uses numbers
• ul uses one of
• Disc
• Square
• Circle
• Both use ltligt to put an item on the list
• Be sure to remember the header!

7
Linking in HTML

• E-mail (getting the e-mail tool to e-mail back to
  you)
• ltA HREF"mailtocarl3007_at_uidaho.edu"gtClick Here
  To Write Melt/Agt
• To other Pages
• ltA HREF"http//www.htmlgoodies.com"gtClick Here
  For HTMLlt/Agt
• To spots on the same Page
• ltA HREFtop"gtReturn to toplt/Agt
• ltA NAME"purchasing"gt
• Note that the anchor does NOT contain a

8
Cascading Style Sheets

• An addition to HTML
• Found only in the Head of the HTML page
• Have the form tag property value
• H1 color FF0000
• This command makes all text red when it a H1
  command is processed
• Can have more than one property for a tag
• Tell the browser what to do whenever a tag is
  found and processed.

9
CSS

• Almost all tags can be done this way
• Some tags CANNOT be modified
• Title
• Meta tags
• HTML
• Head
• The point of CSS is that they can control a great
  deal of things without having to redefine it each
  and every time

10
CSS

• An example working on the background
• First, what is required to get a CSS started?
• ltstyle typetext/cssgt
• lt/stylegt
• This command tells the browser that a cascading
  style sheet is being used and defined

11
CSS

• ltstyle type"text/css"gt
• body
• background-colorffff00
• background-imageurl(tinafish.jpg)
• background-repeat no-repeat
• color000000
• font-family 'times new roman', arial,
  sans-serif
• lt/stylegt

12
CSS

• One of the really neat things is that you can use
  both a background color and picture.
• Here we are going to use the
• Background-color
• Background-image
• Background-position

13
CSS

• Lets go and do an example, using a Cascading
  Style sheet
• There are OTHER things you can do with a CSS
• The Class
• Starts with a . and has a name
• Ex .red
• Can be used with either a command or a div

14
CSS Classes

• Examples
• lth1 class redgt Title Blocklt/h1gt
• ltdiv class redgt
• lt/divgt
• Everything identified as using the class will
  take the attributes and properties of the class
  red

15
CSS IDs

• Similar to the Class is the ID
• Uses a in the definition
• Can only be used ONE TIME in a page. Using it
  more than once will result in errors
• Example
• red colorred
• ltdiv id redgt
• .
• lt/divgt

16
CSS

• Tutorials
• http//www.blooberry.com/indexdot/css/propindex/al
  l.htm
• http//www.devx.com/projectcool/Article/19813
• http//www.htmldog.com/reference/cssproperties/
• www.w3.org
• www.maxdesign.com.au

17
Now That We Have a Page

• Well, Now you know how to create a web page that
  can be put up on the internet.
• How, exactly, are we going to get to that page
  that is on a computer SOMEWHERE in the world?
• The internet is the key and now we go on to
  discuss networks, and the internet, in general

18
Publishing Your Page

• Here at the U of I, we have reserved space for
  each student
• Each student has a public_html directory in their
  H\ drive
• This is common on Unix/Linix systems. All pages
  MUST be in this directory. It allows the system
  to look in a predefined place
• Put all of your files here for your pages

19
Ways to Get the Page Up

• Copy files to disc or thumb drive
• Go to a Compter Lab on Campus, copy from your
  disc/drive to H\public_html
• Or, use FTP and copy the programs across to the
  same directory
• Remember to copy ALL files, including pictures
  and supporting files (music, etc) into that same
  directory

20
Page Problems

• The most common problems are
• Absolute vs. Relative Addressing
• Absolute addressing is in the form of
  c\web\page2.html
• Note it specifies the EXACT path to the page
• If the path changes AT ALL, this will be a broken
  link
• Relative addressing is of the form ..\page2.html
• It is relative to the PAGE BEING DISPLAYED

21
Page Problems

• Next is BROKEN LINKS
• A link is broken if it cannot find the
  file/picture/whatever it is looking for
• Pictures are most often broken
• Remember to store the pictures along with the
  file
• Misspelling is also a favorite reason for broken
  links

22
Other Page Problems

• Bad color combinations
• Busy backgrounds
• Not watching the text color and making it fade,
  disappear, or go psychedelic
• Not linking between pages (a sink page)
• Not updating regularly (pages get boring)
• Incorrect or misleading meta tags
• No meta tags

23
Questions?