HTML - Brian Whitworth

Download Report

Transcript HTML - Brian Whitworth 

Mastering the Internet and
HTML
Images and Image Tags
1
Outline









Goal
Objectives
Introduction
Image formats
Image software
Image tags
Creating images
Editing images
Capturing images










Scaling images
Image hyperlinks
Multiple use of images
Image list items
GIF Animation
Tiling
Tutorials
FAQs
Summary
Exercises/Homework
2
Goal
This chapter covers images, their use in Web
pages, their formats, and their tags. It also
covers how to deal with images such as
creation, editing, capture, and scaling
3
Objectives

Introduction
 Image formats
 Image software
 Dealing with images (creation, editing,
capturing, scaling, hyperlinks, multiple use,
and list items)
 GIF animation
 Tiling
4
Introduction

Images, icons, and logos enhance Web page
design
 Images are best viewed or downloaded using
broadband Internet connections. Larger images
take longer to download
 Web authors can create images, scan them, or link
to them
 If used in Web pages, images should be small
(thumbnails) and simple
5
Image formats

Image resolution and format affects its file size.
Higher resolution produces larger size
 Three image formats are widely supported by the
Web. They are GIF, JPEG (JPG), and PNG
 The GIF format supports the most commonly used
256 (8-bit) colors; the JPEG format supports the
16.7 million (24-bit) colors
 Use the GIF format for simple images created via
image programs. Use the JPEG format for
complex high-quality images created via scanning
real photos, or digital photos
6
Image software

Images can be created via drawing, scanning, or
digital cameras
 Image creation and editing include Adobe
Photoshop, Adobe Illustrator, Mapedit, Paint Shop
Pro, ThumbsPlus, and WebImage
 Image software is 2D. Its coordinate system has an
origin in the top left corner of the drawing window
(figure 10.1)
 Inage viewing software allows viewing large
libraries of images. Samples are CompuPic, Lview
Pro, ViewSafe, and SnapShot
7
Figure 10.1 Image creation coordinate system
8
Image tags

The <IMG> tag, with its attributes, provides
Web authors with the control they need to
deal with images
 The attributes of the <IMG> tag are SRC,
ALT, BORDER, WIDTH, HEIGHT,
ALIGN, HSPACE, VSPACE, USEMAP,
LONGDESC, and ISMAP
9
Creating images

Many image software exists
 MS Windows Paint program (figure 10.2)
comes installed with Windows OS
 To access Paint, click: Start (menu on
bottom left corner of desktop) =>
Programs => Accessories => Paint
 The Paint GUI is simple to use and intuitive
(Cont’d)
10
Figure 10.2 MS Windows
Paint program
(Cont’d)
11
Creating images

Example 10.1 Image in a
Web page (figure 10.3)
<HTML>
<HEAD>
<TITLE>A Web page with images</TITLE>
</HEAD>
<BODY>
<H2><B><CENTER><FONT COLOR="blue">Web page with a simple
image</FONT></CENTER></B></H2>
<! Include the image>
<IMG SRC = "myImage.GIF"
ALT = "A GIF image drawn in Paint“
BORDER = 5 ALIGN = "middle“
HSPACE = 10 VSPACE = 15>Text aligned middle<BR>
This text is placed 15 pixels<BR>
below the image<BR>
</BODY></HTML>
12
Editing and capturing images

Image editing may mean changing image content
(cropping it or adding graphics/colors/text), or
changing its size (compressing (encoding) or
decompressing (decoding) it)
 GIF compression maintains the image original
colors, while JPEG compression reduces the number
of colors
 Web authors should not compress and then
decompress JPEG images more than once
 To capture and save an image off the Web, right
click on it and follow prompts
13
Scaling images

The WIDTH and HEIGHT attributes
of the <IMG> tag are used to scale images
 Example 10.2 Scaling images (Fig. 10.4)
<HTML><HEAD>
<TITLE>A Web page with scaled images</TITLE>
</HEAD><BODY><H2><B><CENTER><FONT
COLOR="blue">Web page with a scaled
image</FONT></CENTER></B></H2>
<! Include the image>
<IMG SRC = "myImage.GIF“
ALT = "A GIF image drawn in Paint“
BORDER = 5 ALIGN = "middle" HSPACE = 10
VSPACE = 15 WIDTH=100 HEIGHT=125>Text
aligned middle<BR>This text is placed 15
pixels<BR>
below the image<BR></BODY></HTML>
Figure 10.4 Scaling
an image
14
Image hyperlinks

Images can be used, instead
 of text, as hyperlinks
 Example 10.3 Image hyperlinks (Fig. 10.5)
<HTML><HEAD>
<TITLE>A Web page with image hyperlink</TITLE>
</HEAD><BODY>
<H2><B><CENTER><FONT COLOR="blue">Web page with an image
hyperlink</FONT></CENTER></B></H2>
<! Include the image>
<A HREF = "myIMage.gif"><IMG SRC = "myImage.GIF"
ALT = "A GIF image drawn in Paint" ALIGN = "middle"
HSPACE = 10 VSPACE = 15 WIDTH = 40 HEIGHT = 50></A>
Text aligned middle<BR>
This text is placed 15 pixels<BR>
below the image<BR>
</BODY></HTML>
(Cont’d)
15
Figure 10.5 Image
hyperlink
16
Multiple use of images


The same image could be used
more than once in the same Web
page
Example 10.4 Multiple use of an
image (figure 10.6)
(shortened from the top)
<IMG SRC = "myImage.gif">
<IMG SRC = "myImage.gif" WIDTH =
100 HEIGHT = 125>
<A HREF = "myIMage.gif"><IMG SRC
= "myImage.GIF" ALT = "A GIF
image drawn in Paint" ALIGN =
"middle" HSPACE = 10 VSPACE = 15
WIDTH = 40 HEIGHT = 50></A>
Text aligned middle<BR>
This text is placed 15 pixels<BR> below
the image<BR></BODY></HTML>
17
Image list items

Images can be used as list items
or item hyperlinks in unordered,
ordered, or definition lists
Example 10.5 Image list items
(Figure 10.7)
<FONT COLOR="red"><DT>Image
list item</FONT>
<DD>An image may be used as a list
item in unordered, ordered, or

definition lists.
<DT><A HREF =
"myIMage.gif"><IMG SRC =
<HTML><HEAD>
"myImage.GIF" ALT = "A GIF image
<TITLE>A Web page with image list
drawn in Paint" ALIGN = "middle"
items</TITLE>
HSPACE = 10 VSPACE = 15
</HEAD><BODY><H2><B><CENTER
WIDTH = 40 HEIGHT = 50></A>
><FONT COLOR="blue">Web page
<DD>This is an image hyperlink as a list
with image list
item.
items</FONT></CENTER></B></H2
>
</DL>
<! Include the image>
</BODY>
<DL>
</HTML>
(Cont’d)
<DT><IMG SRC = "myImage.gif">
<DD>This is the original image
18
Figure 10.7 Image
list items
19
GIF animation

GIF animation allows a Web author to create a set of image
frames in the desired sequence and save them in one GIF
file, as shown below in figure 10.8
Figure 10.8
Animation
sequence of a
ball
20
Tiling


When a Web author uses an
image as a page background,
the browser repeats it
horizontally and vertically in a
pattern, thus creating a tiling
effect
Example 10.6 Tiling a Web
page
<HTML><HEAD><TITLE>A Web
page with tiling</TITLE>
</HEAD>
<BODY BACKGROUND =
"myBox.gif">
<H2><B><CENTER><FONT
COLOR="blue">Web page with
tiling</FONT></CENTER></B></H2>
<! Include the image>
<DL>
<DT><IMG SRC = "myImage.gif">
<DD>This is the original image
<FONT COLOR="blue"><DT>Image
list item</FONT>
<DD>An image may be used as a list
item in unordered, ordered, or
definition lists.
<DT><A HREF =
"myIMage.gif"><IMG SRC =
"myImage.GIF" ALT = "A GIF image
drawn in Paint" ALIGN = "middle"
HSPACE = 10 VSPACE = 15
WIDTH = 40 HEIGHT = 50></A>
<DD>This is an image hyperlink as a list
item.
</BODY></HTML>
(Figure 10.9)
21
Figure 10.9 Tiling a
Web page
22
Tutorials
Tutorial 10.6.1 Right justify an
image (top tags are not shown)
<! Include the image><IMG SRC =
"myBox.gif" BORDER = 2 ALIGN =
"right">This is an image that is rightjustified relative to this text.
<P>It seems that the right and left
justifications are more practical than
the vertical (top, middle, or bottom)
justification.
<P>Yet, a better way of formatting Web
pages is to use tables. Yes, HTML uses
tables to format Web pages very
precisely.
More on tables later. As you can see in
this screen capture, the text flows
underneath the image as we expect.
</BODY>
</HTML>
23
FAQs

Q: Why is the browser not displaying the
image in my Web page?
– A: The reason is usually unintentional
misuse of the <IMG> tag. Quite often a
Web author forgets to close the quotes in
the <IMG> tag; for example, <IMG SRC
= “xxx.jpg>. Check the <IMG> tag
carefully and ensure that its syntax is
correct.
(Cont’d)
24
FAQs

Q: How can I control the positioning of text
around an image in my Web page?
– A: Positioning of text around images in
Web pages cannot be controlled without
using tables to format the page, as
discussed in chapter 16 of this book.
Without tables, Web authors can use the
ALIGN attribute which aligns text as
shown in figures 10.4 and 10.5.
25
Summary
–
–
–
–
–
Images enhance Web page design and presentation
Images are best used with broadband connections
Image variables are resolution and format
Web image formats are GIF, JPEG (JPG), and PNG
Use GIF format for simple images, and JPEG format for
complex images (e.g. photos and scanned pictures)
– The HTML image tag is <IMG>. Its attributes are SRC,
ALT, BORDER, WIDTH, HEIGHT, ALIGN, HSPACE,
VSPACE, USEMAP, LONGDESC, and ISMAP
– Images can be created, edited, compressed, captured,
scaled, animated, and/or used as hyperlinks or list items
26
Exercises

Problem 10.3. Use two images in a Web page.Use
the first image as is, and scale the second one
down by 50%. Use the ALT, BORDER, WIDTH,
HEIGHT, ALIGN, HSPACE, and VSPACE
attributes of the <IMG> tag.
– Solution strategy: Follow examples 10.1 and
10.2. Use a text editor to write and debug the
HTML code. Use a browser to display the
results
(Cont’d)
27
<HTML><HEAD>
<TITLE>A Web page with scaled images</TITLE>
</HEAD><BODY>
<H2><B><CENTER><FONT COLOR="blue">Web page with a scaled
image</FONT></CENTER></B></H2>
<! Include the first image without scaling>
<IMG SRC = "problem10.1Image.gif" ALT = "A GIF image without scaling"
BORDER = 5 ALIGN = "middle" HSPACE = 10 VSPACE = 15>Text
aligned middle<BR>
This text is placed 15 pixels<BR>
below the image<BR>
<! Include the second image with 50% scaling>
<IMG SRC = "problem10.2Image.gif" ALT = "A GIF image with 50% scaling"
BORDER = 5 ALIGN = "middle" HSPACE = 10 VSPACE = 15 WIDTH
= 200 HEIGHT = 100>Text aligned middle<BR>
This text is placed 15 pixels<BR>
below the image<BR></BODY></HTML>
(Cont’d)
28
29
Problems

Problem 10.15 Create a Web page that uses an
image for a tiling effect. Choose your
favorite image for tiling. You could draw it
or download it.
– Solution strategy: Follow example 10.6. Use a
text editor to write the HTML code. Use a
browser to test it
(Cont’d)
30
<HTML>
<HEAD>
<TITLE>A Web page with tiling</TITLE>
</HEAD>
<BODY BACKGROUND = "tileImage.gif">
<H2><B><CENTER><FONT COLOR="blue">Web page with
tiling</FONT></CENTER></B></H2>
<! Include the image>
<DL>
<DT><IMG SRC = "myDog2.jpg">
<DD>This is the original image
<FONT COLOR="blue"><DT>Image list item</FONT>
<DD>An image may be used as a list item in unordered, ordered, or definition lists.
<DT><A HREF = "myDog3.jpg"><IMG SRC = "myDog3.jpg" ALT = "My dog Lucy"
ALIGN = "middle" HSPACE = 10 VSPACE = 15 WIDTH = 100 HEIGHT = 70></A>
<DD>This is an image hyperlink as a list item.
</BODY></HTML>
(Cont’d)
31
32