Lists

1
Section 5

• Lists

2
List Elements

• HTML supplies several list elements
• They can be used to create unordered, ordered and
  definition lists
• The first two list types are composed of one or
  more list items ltLIgt elements

3
Unordered Lists

• Items in unordered lists start with a list mark
  such as a bullet
• ltULgtltLIgtList item...lt/LIgtltLIgtList
  item...lt/LIgtltLIgtList item...lt/LIgtlt/ULgt

4
Unordered Lists

• You have the choice of three bullet types Disc
  (default), Circle, Square
• These are controlled in Netscape Navigator by the
  "TYPE" attribute for the ltULgt element

5
Unordered Lists

• ltUL TYPE"SQUARE"gtltLIgtList item...lt/LIgtltLIgtList
  item...lt/LIgtltLIgtList item...lt/LIgtlt/ULgt

6
Ordered Lists

• Items in ordered lists are numbered automatically
  by the browser
• ltOLgtltLIgtList item...lt/LIgtltLIgtList
  item...lt/LIgtltLIgtList item...lt/LIgtlt/OLgt

7
Ordered Lists

• You have the choice of setting the TYPE Attribute
  to one of five numbering styles Arabic numbers
  (1, 2, 3, ), lower alpha (a, b, c, ), upper
  alpha (A, B, C, ), lower roman (i, ii, iii, )
  and upper roman (I, II, III, )
• You can also specify a starting number for an
  ordered list and the value of the START Attribute
  is always an Arabic number

8
Ordered Lists

• ltOL TYPE"i"gtltLIgtList item...lt/LIgtltLIgtList
  item...lt/LIgtlt/OLgtltPgtUnrelated text ... lt/PgtltOL
  TYPE"i" START"3"gtltLIgtList item...lt/LIgtlt/OLgt

9
Definition Lists

• This kind of list is different from the others
• Each item in a DL consists of one or more
  Definition Terms (DT elements) , followed by one
  or more Definition Descriptions (DD elements)

10
Definition Lists

• ltDLgtltDTgtHTMLlt/DTgtltDDgtHyper Text Markup
  Languagelt/DDgtltDTgtDoglt/DTgtltDDgtA human's best
  friend!lt/DDgtlt/DLgt

11
Nested Lists

• You can nest lists by inserting a UL, OL, etc.,
  inside a list item (LI)
• ltUL TYPE"SQUARE"gtltLIgtList item...lt/LIgtltLIgtList
  item...ltOL TYPE"i" START"3"gtltLIgtList
  item...lt/LIgtlt/OLgt lt/LIgtltLIgtList
  item...lt/LIgtlt/ULgt

12
Section 6

• Images

13
Inserting Images

• The following HTML code is used to insert an
  image of a light bulb into a web page
• ltIMG SRCidea.jpggtlt/IMGgt

14
Inserting Images

• The HTML code to insert an image consists of two
  parts
• The ltIMGgtlt/IMGgt (Image) element that defines a
  graphic image on the page
• The SRC (Source) attribute which is the location
  of the image

15
Inserting Images

• Sources can be external to images on other web
  servers
• http//www.pics.com/dir/image1.jpg
• or internal to documents on the local web server
  
• /dir/image2.gif
• Other attributes which can also be used with the
  IMG tag include

16
Inserting Images

• Alternate Text (ALT) - This is a text field that
  describes an image or acts as a label and is
  displayed when people turn the graphics off in
  their browsers, or when they position the cursor
  over a graphic image
• Alignment (ALIGN) - This allows you to align the
  image on your page - options include Bottom,
  Middle, Top, Left, Right, TextTop, ABSMiddle,
  Baseline, and ABSBottom

17
Inserting Images

• Width (WIDTH) - This is the width of the image in
  pixels and this value can be obtained from a
  graphics program or can be left unspecified
• Height (HEIGHT) - This is the height of the image
  in pixels
• Border (BORDER) - This is for a border around the
  image, specified in pixels

18
Inserting Images

• HSPACE - This is for Horizontal Space on both
  sides of the image specified in pixels and a
  setting of 5 will put five pixels of invisible
  space on both sides of the image
• VSPACE - This is for Vertical Space on the top
  and bottom of the image specified in pixels

19
Section 7

• Anchors, URLs And Image Maps

20
Link Elements

• It is normal for HTML documents to contain links
  to other documents, which can be located anywhere
  on the Web
• These links are provided by URLs (Uniform
  Resource Locators) , which give the location and
  filename of a document, and the method used to
  access it

21
Link Elements

• The following elements represent links to other
  documents
• ltA HREF"URL"gt lt/Agt The HREF attribute of the
  anchor element specifies a URL
• If this attribute has a value, the contents of
  the ltAgt lt/Agt element will be highlighted when the
  document is displayed in a browser, and
  Clicking on this content will cause the browser
  to open the file specified by the URL

22
Link Elements

• E.g.
• ltA HREF http//www.paisley.ac.ukgt Paisley
  University lt/Agt
• In this example the text "Paisley University"
  represents the contents that would be highlighted
  as a link to the file named as the value of the
  HREF

23
Link Elements

• There are three major types of links
• Internal Links are links within a document -they
  help in the navigation of large documents
• External Links links to pages on other web
  servers and external links are always the full
  URL
• Local Links are links to documents on the local
  web server

24
Link Elements

• Local links can be the full URL
  http//www.site.com/sales/rep.htm
• or partial, relative to your current directory
• /sales/rep.htm

25
Internal Links

• Links can also be created inside large documents
  to simplify navigation
• Today's world wants to be able to get to the
  information quickly, and move around easily
• Internal links can help you meet these goals

26
Internal Links

• Select some text at a place in the document that
  you would like to create a link to, then add an
  anchor to link to like this
• ltA NAME"bookmark_name"gtBook Marklt/Agt
• The NAME attribute of an anchor element specifies
  a location in the document that we will link to
  shortly

27
Internal Links

• Next select the text that you would like to
  create as a link to the location created above
• Add the following anchor around the text link
• ltA HREF "bookmark_name"gtGoto Book Marklt/Agt
• The surfer will only see the link created in step
  two, they will not see the anchor created in step
  one

28
Client-side Image Maps

• Client-side image maps (USEMAP) use a map file
  that is part of the HTML document (in an element
  called MAP), and is linked to the image by the
  Web browsers

29
Client-side Image Maps

• ltIMG SRC"Picture.gif" USEMAP"map1"gtltMAP
  NAME"map1"gtltAREA SHAPE"RECT" COORDS"9,120,
  56,149" HREF"whatever.htm"gtltAREA SHAPE"RECT"
  COORDS"100,200, 156,249" HREF"wherever.htm"gtlt/M
  APgt

30
Client-side Image Maps

• Shapes available for client-side image maps
• RECT, or RECTANGLE require four co-ordinates
  X1, Y1, X2, and Y2
• CIRC, or CIRCLE requires three co-ordinates
  centerx, centery, and radius
• POLY, or POLYGON requires three or more pairs of
  co-ordinates