$28 Theyll go $30' - PowerPoint PPT Presentation

1 / 23
About This Presentation
Title:

$28 Theyll go $30'

Description:

Lets go and do an example, using a Cascading Style sheet ... including pictures and supporting files (music, etc) into that same directory ... – PowerPoint PPT presentation

Number of Views:20
Avg rating:3.0/5.0
Slides: 24
Provided by: alcar4
Category:
Tags: theyll

less

Transcript and Presenter's Notes

Title: $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?
Write a Comment
User Comments (0)
About PowerShow.com