SRC='mypic.gif' Name of the picture file ...

1
Images and Tables
2
Displaying Image

• ltimg src"URL or location of the file" /gt
• ltIMG SRC"mypic.gif" aligntop height50 width40
  /gt
• Attributes
• SRC"mypic.gif" Name of the picture file
• SRC"pic/mygif.jpg" Name of file found in pic
  directory
• Optional
• ALIGN"bottom", "middle", "top"
• ALIGN tells the browser how to align the image
  with the neighboring text.
• HEIGHT"n" or WIDTH"n"
• HEIGHT and WIDTH specify the display height and
  width (in pixels) for the image.

3
Image Links

• Use the ltagtlt/agt tags to define the start and
  ending of an anchor
• lta hrefhttp//www.espn.com/ gtESPN Homelt/agt
• lta hrefhttp//www.espn.com/ gt ltimg
  src"pic/espn.gif"/gtlt/agt
• lta hrefhttp//www.mu.edu/ gt
• ltimg src"http//www.mu.edu/pic/mu.gif" /gtlt/agt

4
HTML - Other Links

• HTML - Email Links
• lta href"mailtoow_at_mu.edu?subjectFeedback"gt Send
  me a Messagelt/agt
• HTML Download document
• lta hrefhttps//marqone.busadm.mu.edu/tow/resume.
  pdfgtMy Resumelt/agt
• or
• lta href"resume.pdf"gtMy Resumelt/agt

5
HTML - Images

• Use the ltimg /gt tag to place an image
• ltimg src"mypic.gif" /gt
• Determining the source of image
• srchttp//www.mu.edu/pics/union.gif
• src"union.gif"
• src"pictures/union.gif"
• src"../pictures/union.gif"
• HTML Image Height and Width
• ltimg src"union.gif" height"50" width"100"/gt

6
Controlling the Font and Size

• My text ltfont size 2gtresize the textlt/FONTgt
  text
• My text ltfont size -2gtresize the textlt/FONTgt
  text
• ltfont size2gtdefine the font sizelt/fontgt
• ltfont size2 face"arial" color"red"gtdefine the
  font facelt/fontgt
• ltfont face"arial, helvetica"gtbrowser will try
  Arial first, then Helvetica if Arial is not
  presentlt/fontgt

7
Table

• Basic tags
• ltTABLEgt defines a table in HTMLlt/TABLEgt
• ltCAPTIONgtthe title of the tablelt/CAPTIONgt
• ltTRgta row within a tablelt/TRgt
• ltTHgta table header celllt/THgt
• ltTDgta table data cell with the text aligned left
  and centered verticallylt/TDgt

• Attributes
• BORDER - appearing in the TABLE tag
• ALIGN - can appear in CAPTION, TR, TH, or TD
• values left, center, and right, e.g.
  aligncenter.
• VALIGN - can appear inside a TR, TH, or TD
• values top, middle, bottom.
• WIDTHltvalue_or_percentgt

8
A Table Template
ltTABLE border1gt lt!-- start table --gt ltTRgt
lt!-- start first row --gt ltTHgt first header cell
contents lt/THgt ltTHgt last header cell
contents lt/THgt lt/TRgt lt!-- end first row
--gt ltTRgt lt!-- Start the second row --gt ltTDgt
second row, first cell contents lt/TDgt ltTDgt
second row, last cell contents lt/TDgt
lt/TRgt lt!-- end of second row --gt ltTRgt lt!--
Start last row --gt ltTDgt last row, first cell
contents lt/TDgt ltTDgt last row, last cell contents
lt/TDgt lt/TRgt lt/TABLEgt lt!-- end table --gt
9
Images - ex3.html

• Create a table with 3 rows and 3 columns.
• Add an image or words into each cell.

10
Other things to define the table

• lttable border0 width600 height200
  cellspacing0 cellpadding5gt
• lttd width400 height40 bgcolorB4F864
  align"center"gt
• lttd colspan"2"gt
• lttd rowspan"2"gt
• Try with different attribute values to get what
  you want.

11
Other things to define the table

• lttd colspan"2"gt
• lttd rowspan"2"gt

12
Other things to define the table

• lttd rowspan"2"gt

lttablegt lttrgt lttdgt lt/tdgt lttdgt lt/tdgt lttdgt
lt/tdgt lt/trgt lttrgt lttdgt lt/tdgt lttd
rowspan"2"gt lt/tdgt lttdgt lt/tdgt lt/trgt lttrgt lttd
gt lt/tdgt lttdgt lt/tdgt lt/trgt lt/tablegt
13
Other things to define the table

• lttd colspan"2"gt

lttablegt lttrgt lttdgt lt/tdgt lttd
colspan"2"gtlt/tdgt lt/trgt lttrgt lttdgt
lt/tdgt lttdgt lt/tdgt lttdgt lt/tdgt lt/trgt lttrgt lttd
gt lt/tdgt lttdgt lt/tdgt lttdgt lt/tdgt lt/trgt lt/tablegt
14
ex4.html
15
Ex4.html