Images and Tables

1
Images and Tables

• http//www.htmlcodetutorial.com/tables/
• http//www.w3schools.com/html/html_tables.asp

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 using html and FrontPage
• Correctly insert scripts into html code
• Know how to move a file to your birdnest space

3
Inserting Images
4
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
5
TABLES

• Be able to insert html inside table format
• http//www.dynamicdrive.com/dynamicindex10/neontex
  t2.htm
• Tables are used for layouts
• www.yahoo.com
• www.webdeveloper.com

6
Text and Graphical Tables
7
(No Transcript)
8
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 ltstylegt body font-size28pt
lt/stylegt 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
9
(No Transcript)
10
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
11
How do you think we can create this table
12

• lttable borders"1" rules"all"gt
• lttrgtltthgtServicelt/thgtltthgtOptionslt/thgtlt/trgt
• lttrgtlttd align"center"gtAutolt/tdgt lttd
  align"center 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

13
(No Transcript)
14
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
15
(No Transcript)
16

• 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
  rowspan2 gt Monday 3pm - Dec 12lt/tdgt lt/trgt
• lttrgtlttd align"center" bgcolor"lime" gtThurs
  2pm lt/tdgt lt/trgt
• lt/tablegt

17
Short Answer Questions What are the two way of
expressing table width? How would you go about
creating this table?
18
(No Transcript)
19
HTML3

• Instructions on my web site
• Move a file to birdnest
• Create a table using FrontPage