N9:Adding Graphic Elements

1
N9 Adding Graphic Elements

• Niederst, Jennifer. (2003). Learning Web Design
  A Beginner's Guide to HTML, Graphics, and Beyond
  (2nd Edition). O'Reilly.

2
Images on the Web

• Obvious uses
• photographs
• icons
• logos
• buttons
• Subtle (or not-so-obvious) uses
• backgrounds
• invisible spacers
• visual effects such as rounded corners on boxes

3
Image Formats

• Only the following image formats are displayed by
  browsers
• GIF
• JPEG (or JPG)
• PNG
• Other popular formats that will not display
  inline on a web page include
• TIFF
• BMP
• EPS

4
The ltimg /gt Tag

• Standalone, so make it self-closing
• Attributes required or recommended include
• src
• alt
• width and height
• Other useful attributes include
• border
• align (top middle bottom) to affect the
  vertical alignment of a graphic in relation to
  neighboring text
• align (left right) to affect horizontal
  alignment of the graphic
• hspace to add space to left and right of image
• vspace to add space above and below image

5
The ltbr /gt Tag Revisited

• The line break with the clear attribute starts
  the next line against the page margin, not next
  to the graphic.
• ltbr clear"all"gt

6
N10 Adding Links

• Niederst, Jennifer. (2003). Learning Web Design
  A Beginner's Guide to HTML, Graphics, and Beyond
  (2nd Edition). O'Reilly.

7
Changing Link Colors

• Some designers recommend not changing the default
  link colors.
• Niederst says to go ahead and change link colors,
  but be consistent throughout the site to avoid
  confusing visitors.
• ltbody link"aqua" vlink"teal" alink"red"gt

8
The Anchor ltagt Tag

• Text or graphics within the anchor container tag
  will display as a link in the browser.
• By default, links appear as underlined text or as
  blue outlined (bordered) graphics in most
  browsers.

9
Two Ways To Specify URLs

• Absolute URLs include the protocol, domain name
  and path name.
• Example http//www.oreilly.com
• Relative URLs describe the pathname to the linked
  file relative to the current document.
• Example recipes/index.html

10
Important Pathname Don'ts

• Don't use backslashes (\)
• Don't start with the drive name (D, C, etc.)
• Dont start with file//

11
Linking Within Your Own Site

• Relative pathnames starting with the root
  directory (/) are useful for content that might
  not always be in the same directory.
• Use "./" to link back to the home page from any
  page on your site. See Dan's Web Tips for more
  information.

12
Opening a Link in a New Window

• lta href"resume.html" target"_blank"gtView my
  résumé.lt/agt
• Opening a new window is not generally recommended
  as standard practice, as it can be somewhat
  counterintuitive or confusing for a user.

13
Mail Links

• lta href"mailtoaklecker_at_hotmail.com"gt Contact
  Al Kleckerlt/agt
• If the client's computer is configured to launch
  a mail program, a new outgoing message will open
  with the specified address in the "To" field.
• Be aware that by putting an e-mail address on a
  page you will make it susceptible to receiving
  spam. People who generate spam lists often use
  bots to scour the Web for e-mail addresses. There
  are a number of workarounds for this.

14
N11 Tables

• Niederst, Jennifer. (2003). Learning Web Design
  A Beginner's Guide to HTML, Graphics, and Beyond
  (2nd Edition). O'Reilly.

15
How Tables Are Used

• Data display
• Better text alignment
• Overall page structure
• Holding together a multipart (sliced) image

16
Basic Table Structure

• The lttablegt tag identifies the beginning and end
  of the table.
• Rows are created with lttrgt (table row) tags.
• Cells are created with lttdgt (table data) tags
  placed within each row.
• The number of columns in a table is determined by
  the number of table cells in each row.

17
Spanning Cells

• One fundamental and useful feature of table
  structure is cell spanning, stretching a cell to
  cover several rows or columns.
• Column spans are created with the colspan
  attribute in the lttdgt tag.
• Row spans are created with the rowspan attribute
  in the lttdgt tag.

18
Nesting Tables

• You can nest a table inside the cell of another
  table by putting all of the table's code between
  lttdgt tags.

19
Designing Tables

• Sketch it!
• Find the grid
• Plan the spans
• Start building
• Use comments to leave notes to yourself in the
  document.

20
Three Ways To Position Content

• Tables
• CSS-P (positioning)
• Frames

21
Page Size