Images and Tables

1
Images and Tables
2
Objectives

• Learn to place a picture on your web page
• Be able to interpret html for tables
• Understand table tags and attributes
• Simple rows and columns
• Combined rows and columns
• Create a table in FrontPage
• Correctly insert scripts into html code
• Know how to move a file to your birdnest space

3
Inserting Images
4
(No Transcript)
5
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1 -transitional.dtd"gt
lthtml xmlns"http//www.w3.org/1999/xhtml"
xmllang"en" lang"en"gt ltheadgt lttitlegt Dr.
Garrison's 101 page lt/titlegt lt/headgt ltbody gt
ltpgtLets see an imagelt/pgt ltimg src
"smileyface.jpggt lt/bodygt lt/htmlgt
6
Tables
7

• Understand tables
• Be able to insert html inside table format
• http//www.dynamicdrive.com/dynamicindex10/tremble
  .htm

8
Tables are used for layouts

• www.yahoo.com
• www.webdeveloper.com

9
Text and Graphical Tables
10
(No Transcript)
11
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1 -transitional.dtd"gt
lthtml xmlns"http//www.w3.org/1999/xhtml"
xmllang"en" lang"en"gt ltheadgt lttitlegt Basic
Tablelt/titlegt lt/headgt ltbodygt lttable
gt lttrgtltthgtServicelt/thgtltthgtOptionslt/thgtlt/trgt lttrgtltt
d gtAutolt/tdgt lttdgt New and Usedlt/tdgt
lt/trgt lttrgtlttd gtFinancelt/tdgtlttdgt Market summary
and mortgage rateslt/tdgtlt/trgt lttrgtlttd gtGames
lt/tdgtlttdgt Video and Downloadablelt/tdgt
lt/trgt lttrgtlttd gtGroups lt/tdgtlttdgt Science,
education, and hobbieslt/tdgt lt/trgt lt/tablegt lt/body
gt lt/htmlgt
12
(No Transcript)
13
ltbodygt lth2gtTable 7.1 on page 73 contains a list
of style attributes for tables. lt/h2gt lttable
width"50" borders"1" rules"all"gt lttrgtltthgtServi
celt/thgtltthgtOptionslt/thgtlt/trgt lttrgtlttd
align"center"gtAutolt/tdgt lttdgt New and Usedlt/tdgt
lt/trgt lttrgtlttd align"center"gtFinancelt/tdgtlttdgt
Market summary and mortgage rateslt/tdgtlt/trgt lttrgtltt
d align"center"gtGames lt/tdgtlttdgt Video and
Downloadablelt/tdgt lt/trgt lttrgtlttd
align"center"gtGroups lt/tdgtlttdgt Science,
education, and hobbieslt/tdgt lt/trgt lt/tablegt lt/body
gt lt/htmlgt
14
How do you think we can create this table
15

• lttable borders"1" rules"all"gt
• lttrgtltthgtServicelt/thgtltthgtOptionslt/thgtlt/trgt
• lttrgtlttd align"center"gtAutolt/tdgt lttd
  gt New and Usedlt/tdgt lt/trgt
• lttrgtlttd align"center"gtFinancelt/tdgtlttdgt Market
  summary and mortgage rateslt/tdgtlt/trgt
• lttrgtlttd align"center"gtGames lt/tdgtlttdgt Video and
  Downloadablelt/tdgt lt/trgt
• lttrgtlttd align"center"gtGroups lt/tdgtlttdgt Science,
  education, and hobbieslt/tdgt lt/trgt
• lt/tablegt

16
(No Transcript)
17
lttable width"75" borders"1" rules"all"
cellpadding10gt lttrgtltth colspan"2" gtExam
Schedulelt/thgtlt/trgt lttrgtltth gtClasslt/thgtltthgtExamlt/th
gtlt/trgt lttrgtlttd align"center"gtTue 11amlt/tdgtlttd gt
Thursday 1130 - Dec 8lt/tdgt lttrgtlttd
align"center"gtThurs 11amlt/tdgtlttd gt Thursday
1130 - Dec 8 lt/tdgt lt/trgt lttrgtlttd
align"center"gtTue 2pmlt/tdgtlttd gt Monday 3pm - Dec
12lt/tdgt lt/trgt lttrgtlttd align"center" gtThurs
2pmlt/tdgt lttd gt Monday 3pm - Dec
12lt/tdgtlt/trgt lt/tablegt
18
(No Transcript)
19

• lttable width"75" borders"1" rules"all"
  cellpadding10gt
• lttrgtltth colspan"2" bgcolor"yellow"gtExam
  Schedulelt/thgtlt/trgt
• lttrgtltth gtClasslt/thgtltthgtExamlt/thgtlt/trgt
• lttrgtlttd align"center"gtTue 11amlt/tdgtlttd gt
  Thursday 1130 - Dec 8lt/tdgt
• lttrgtlttd align"center"gtThurs 11am lt/tdgtlttd gt
  Thursday 1130 - Dec 8 lt/tdgt lt/trgt
• lttrgtlttd align"center"gtTue 2pm lt/tdgtlttd
  gt Monday 3pm - Dec 12lt/tdgt
  lt/trgt
• lttrgtlttd align"center" gtThurs
  2pm lt/tdgt lt/trgt
• lt/tablegt

20
Short Answer Questions What are the two way of
expressing table width? How would go about
creating this table?
21
(No Transcript)
22
HTML3

• Instructions on my web site

23
Move a file to birdnest
24
Create a table using FrontPage