Welcome to Systems Development PAL Session 4

1
Welcome to Systems Development PAL
Session 4
2
Session Overview

• URLs and anchors
• HTML Tables
• Images

3
URLs

• Refresh your memory a HTML hyperlink
• lta hrefhttp//www.uwe.ac.uk/jtwebb/ufce47-20-1
  gt The UWE Website lt/agt
• This is known as an ABSOLUTE link (i.e. its full
  address)

4
URLs

• You can also use relative links
• lta hrefpage1.htmlgtPage 1lt/agt

5
URLs

• lta href/pictures/brownnose.jpggtMy Doglt/agt

6
URLs

• lta href../pictures/brownnose.jpggtMy Doglt/agt

If you are in this folder
7
Anchors

• Used when you want to jump to a specific section
  on a web page
• First you must name the section in the web page
• lta namesection1gtSection 1lt/agt
• Then you can link to it
• lta hrefpage1.htmlsection1gtGo to section 1lt/agt

8
HTML Tables

• Tables can be used for organising data and format
  web page layout
• The basic tags are
• lttablegt - starts the table
• ltcaptiongt - gives the table a title or
  description
• lttrgt - starts a new row
• ltthgt - gives a header (strong text)
• lttdgt - gives the cell value

9
HTML Tables

• Tables have several basic attributes
• lttable cellspacinggt - controls the spacing
  between cells
• lttable cellpaddinggt - sets the amount of space
  around the cell
• lttable bgcolorgt - gives a background colour to
  the table
• lttr aligngt - align text in that row
• lttd colspangt - spans more than one column
• These are just a few of the many attributes you
  can use

10
Exercise

• Duplicate the following web pages
• Attributes needed
• Colour of table is FFFFC
• Colour of top row is 99999F
• Colour of bottom two cells is green
• Colour of bottom right cell is red
• Cell spacing is 40
• Cell padding is 30
• Border is 2

11
lthtmlgt ltheadgt lttitlegtTables Examplelt/titlegt lt/he
adgt ltbodygt lta name"top"gtlth1 align"center"gtMy
Tablelt/h1gtlt/agt ltpgtlttable bgcolor"FFFFC"
align"center" border2 cellpadding30
cellspacing40gt ltth bgcolor"9999FF"gtColumn
1lt/thgt ltth bgcolor"9999FF"gtColumn 2lt/thgt ltth
bgcolor"9999FF"gtColumn 3lt/thgt lttrgt lttdgtABC
lt/tdgt lttdgtDEFlt/tdgt lttdgtGHIlt/tdgt lt/trgt ltt
r align"center"gt lttdgtKLMlt/tdgt lttdgtOPQlt/tdgt
lttdgtRSTlt/tdgt lt/trgt lttr bgcolor"red"gt ltt
dgtUVWlt/tdgt lttdgtXYZlt/tdgt lttd
bgcolor"green"gt123lt/tdgt lt/trgt lt/tablegtlt/pgt
12
ltpgt lttable border1gt ltthgtImagelt/thgt ltthgtLin
k tolt/thgt ltthgtPicture Locationlt/thgt lttrgt lttd
gtlta href"http//www.uwe.ac.uk"gtltimg border0

srcwww.dognoses.com/brownnose.jpg" width"265
height"340"gtlt/agt lttdgtUWE
Websitelt/tdgt lttdgthttp//www.dognoses.com/brownn
ose.jpglt/tdgt lt/trgt lttrgt lttdgtlta
href"http//www.cems.uwe.ac.uk"gt ltimg

src"http//www.dognoses.com/bignose6.jpg"
width"358"
height"269"gtlt/agtlt/tdgt lttd
gtCEMS Websitelt/tdgt lttdgthttp//www.dognoses.com/
bignose6.jpglt/tdgt lt/trgt lt/tablegt
lt/pgt ltpgtlta href"session4.htmtop"gtBack to
toplt/agtlt/pgt lt/bodygt lt/htmlgt
13
Images

• All browsers display GIF and JPEG images, some
  display PNG images
• Use the ltimggt tag to insert an image
• Attributes of ltimggt include
• ltimg srcgt - to state the source of the image
• ltimg aligngt - to align the image
• ltimg altgt - for a tooltip style text box and to
  create text in non graphical browsers
• ltimg height/width/vspace/hspace/bordergt
• Images can be used as hyperlinks
• lta hrefhttp//.....gtltimg srcbrownnose.jpggtlt/a
  gt

14
Summary

• Use absolute URLs for foreign web pages or
  files
• Use relative URLs for pages or files on your site
• Use anchors to jump to a specific part of a web
  page
• lta namesection1gtSection 1lt/agt
• lta hrefpage1.htmlsection1gtGo to section 1lt/agt
• Tables
• lttablegt - starts the table
• ltcaptiongt - gives the table a title or
  description
• lttrgt - starts a new row
• ltthgt - gives a header (strong text)
• lttdgt - gives the cell value
• Images
• Images have many HTML attributes for manipulation
  (such as ltimg aligncentergt)
• Be aware of the different types and their
  properties (GIF, JPEG, PNG)
• Create an image hyperlink by inserting the ltimg
  srcgt tag where the title of the hyperlink
  would go