HTML, Third Edition Illustrated Brief

1
HTML, Third EditionIllustrated Brief

• Unit D
• Adding Graphics and Multimedia

2
U n i t O b j e c t i v e s

• Plan graphics use
• Insert images
• Optimize images
• Specify image size
• Add a background image

3
U n i t O b j e c t i v e s

• Link images
• Insert an image map
• Explore multimedia options
• Use multimedia

4
Planning Graphics Use

• Use supported file formats
• Add alternate text
• Keep file size small
• Use graphics wisely

5
Planning Graphics Use
6
Planning Graphics Use
7
Clues to Use

• Changing image file formats
• File management utilities can change file names,
  but do not convert file formats
• Image-editing programs are used to convert files
  to other file types

8
Inserting Images

• Copy the paradise\images folder paste it into the
  paradise folder in your site files open
  htm_D-1.txt and save it as index.htm in your
  paradise folder, replacing the existing file
• Locate the level-one heading at the top of the
  body section, click directly after lth1gt, then
  type ltimg src"images/pm_logo1.jpg" alt"Paradise
  Mountain Family Resort" /gt
• Locate the line that starts with ltpgt Located just
  outside of, click directly before ltpgt, type ltimg
  src"images/trail_ride1.jpg" alt"The end of the
  trail -- A Paradise Mountain guide and guests
  return from a long days ride exploring the
  resort wilderness areas." /gt, press Enter
  twice, then save your work

9
Inserting Images

• Start your Web browser, then open index.htm from
  your paradise site folder
• Click the text editor program button on the
  taskbar, click directly before /gt inside the
  trail_ride1.jpg image tag, type align"right",
  press Spacebar, then save your file and reload
  it in your browser
• Click the text editor program button on the
  taskbar, click directly before /gt in the logo
  image tag, type align"middle", press Spacebar,
  then save your work
• Reload the index.htm page in your browser, then
  rest the pointer over the photo

10
Inserting Images
11
Inserting Images
12
Inserting Images
13
Optimizing Images

• Use the proper Web image resolution
• Crop out unnecessary elements
• Resize the image
• Use the proper file format
• Control the color depth

14
Optimizing Images
15
Optimizing Images
16
Optimizing Images
17
Specifying Image Size

• In your browser, right-click the Paradise
  Mountain Family Resort logo in the upper-left
  corner of the page, then click Properties on the
  shortcut menu
• Click OK to close the dialog box
• Click the text editor program button on the
  taskbar, locate the image tag that references
  pm_logo1.jpg, click just before the closing /,
  type width"159" height"156", then press
  Spacebar

18
Specifying Image Size

• Locate the ltimg /gt tag that references the
  graphic trail_ride1.jpg, click just after the 1
  in the file name, press Backspace, then type 2
• Click directly before the closing / in the same
  tag, then type hspace"15" vspace"5"
• Press Spacebar, type width"261" height"400",
  press Spacebar, then save your work
• Click the browser program button in the taskbar,
  then reload index.htm

19
Specifying Image Size
20
Specifying Image Size
21
Clues to Use

• Resizing Images
• Image width and height properties change the
  images appearance, but not the file size
• Image-editing programs reduce the file dimensions
  as well as the file size

22
Adding a Background Image

• In a separate instance of your browser, open the
  file bkg_samples.htm from the samples folder in
  your paradise\images folder
• Click each of the background samples to view the
  actual file, clicking the Back to samples link
  after viewing each file, then close the
  bkg_samples.htm browser window
• Click the text editor program button on the
  taskbar to return to your page code, click inside
  the ltbodygt tag, directly before the closing gt,
  press Spacebar, then type background"images/pm_
  bkgnd.gif"
• Save your work, click the browser program button
  on the taskbar, then reload index.htm

23
Adding a Background Image

• Click the text editor program button on the
  taskbar, locate the logo image code, click
  directly before the closing quotation mark in the
  image file name, press Backspace five times,
  then type 2.png
• Click directly before the gt in the opening body
  tag, press Spacebar, type topmargin"5", then
  save your work
• Click the browser program button on the taskbar,
  then reload index.htm

24
Adding a Background Image
25
Adding a Background Image
26
Linking Images

• Click the text editor program button on the
  taskbar, drag to select all of the code from the
  basefont tag through the navigation bar, then
  copy the code
• Open the contact.htm page in your text editor,
  click directly before lt/headgt, drag to select all
  of the page code through lt/pgt at the end of the
  site navigation bar, then paste the copied code
• Click between the lth1gt and the ltimg in the
  heading and logo section at the top of the page
  content code area, then type lta href"index.htm"
  title"Return to Paradise Mountain Family Resort
  Home page"gt
• Click directly after the /gt at the end of the
  image tag, type lt/agt, save your work, click the
  browser program button on the taskbar, open
  contact.htm in your browser, then move the mouse
  pointer over the Paradise Mountain graphic logo
• Click the Paradise Mountain logo

27
Linking Images

• Click the text editor program button on the
  taskbar to return to your contact.htm page code,
  click directly after the closing quotation mark
  following the align attribute middle, press
  Spacebar, type border"0", then save your work
• Click the browser program button on the taskbar,
  then click the Contact Us link to reload the
  contact page
• Return to your contact.htm source code, drag to
  select all the code from the basefont tag through
  the lt/pgt of the top navigation bar, then copy the
  code
• Open the rates.htm page in your text editor, drag
  to select from lt/headgt through the closing lt/pgt
  of the navigation bar paragraph, paste the copied
  code, then save your work

28
Linking Images
29
Linking Images
30
Linking Images
31
Inserting an Image Map

• Start another instance of your text editor
  program, then open the file imagemapParadise.txt
  from the paradise folder in the location where
  you store your Data Files
• Drag to select all the text in the file, copy it
  to the clipboard, then close the file
• In your rates.htm file, locate the line that
  begins with ltpgtltstronggtltemgtWatch this space!,
  drag to select the entire paragraph including ltpgt
  and lt/pgt, then press Delete twice
• Find the paragraph that ends with or to make
  reservations.lt/pgt, click after lt/pgt, press
  Enter twice, type ltpgtClick a spot in the map
  below to view the rooms in one of our 2-bedroom
  units.lt/pgt, press Enter twice, paste the image
  map code from the clipboard, then press Enter

32
Inserting an Image Map

• Save your work, click the browser program button
  on the taskbar, then open the rates.htm page
• Move the mouse pointer over the graphic showing
  the two-bedroom floor plan
• Click the master bath hot spot on the image map
• Close the new window and return to the image map
• Repeat the previous two steps for each of the
  other hot spots in the image map

33
Inserting an Image Map
34
Inserting an Image Map
35
Exploring Multimedia Options

• Bandwidth the data transfer capacity of a Web
  users Internet connection
• High-bandwidth Internet connections
• Improved compression shrinks the size of video
  and audio files
• Streaming multimedia technology refers to the
  ability to configure multimedia files to begin
  playing before they are fully downloaded

36
Exploring Multimedia Options

• Animated GIF
• Macromedia Flash animation
• Streaming media
• Embedded audio and video

37
Exploring Multimedia Options
38
Clues to Use

• Finding free graphics and animation
• Numerous Web sites allow you to create your own
  background graphics, text images, and animations
• Use your favorite search engine to search for
  these files
• The Student Online Companion contains links to
  some of these sites

39
Using Multimedia

• Copy the media folder from the paradise folder in
  the place where you store your Data Files to the
  paradise folder in the place where you save your
  site files
• Click the text editor program button on the
  taskbar to return to your rates.htm source code,
  click directly before ltbr clear"all" /gtltbr /gtltbr
  /gt near the bottom of the page, type ltpgtltembed
  src"media/paradise.wmv" width"300" height"400"
  /gtlt/pgt, press Enter twice, then save the file
• Click the browser program button on the taskbar,
  then reload your rates.htm file
• Click the text editor program button on the
  taskbar to return to your rates.htm source code,
  locate the height attribute for the media file,
  click directly after the closing quotation mark
  following it, press Spacebar, type
  autostart"false" align"right vspace"10
  hspace"10", then save your work

40
Using Multimedia

• Click after the closing quotation mark following
  the hspace attribute value, press Spacebar,
  type title"Click to play resort features video,
  or visit the site home page to learn more about
  the resort.", make sure that your name and
  todays date appear in the Page modified by
  paragraph at the bottom of the page, then save
  your work
• Click the browser program button on the taskbar,
  reload the page, then print it
• Click the Play button on the media player to
  activate the video clip
• Close any open files, then transfer your updated
  files to your remote directory on the server

41
Using Multimedia
42
Using Multimedia
43
U n i t S u m m a r y

• Plan graphics use
• Insert images
• Optimize images
• Specify image size
• Add a background image

44
U n i t S u m m a r y

• Link images
• Insert an image map
• Explore multimedia options
• Use multimedia