1 mastering the internet and html images and image tags
TRANSCRIPT
![Page 1: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/1.jpg)
1
Mastering the Internet and Mastering the Internet and HTMLHTML
Images and Image Tags
![Page 2: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/2.jpg)
2
OutlineOutline
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
![Page 3: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/3.jpg)
3
GoalGoal
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
![Page 4: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/4.jpg)
4
ObjectivesObjectives
IntroductionImage formatsImage softwareDealing with images (creation, editing,
capturing, scaling, hyperlinks, multiple use, and list items)
GIF animationTiling
![Page 5: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/5.jpg)
5
IntroductionIntroduction
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
![Page 6: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/6.jpg)
6
Image formatsImage 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
![Page 7: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/7.jpg)
7
Image softwareImage 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
![Page 8: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/8.jpg)
8
Figure 10.1 Image creation coordinate system
![Page 9: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/9.jpg)
9
Image tagsImage 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
![Page 10: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/10.jpg)
10
Creating imagesCreating images
Many image software existsMS Windows Paint program (figure 10.2)
comes installed with Windows OSTo 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)
![Page 11: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/11.jpg)
11
Figure 10.2 MS Windows Paint program
(Cont’d)
![Page 12: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/12.jpg)
12
Creating imagesCreating 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>
![Page 13: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/13.jpg)
13
Editing and capturing imagesEditing 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
![Page 14: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/14.jpg)
14
Scaling imagesScaling 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
![Page 15: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/15.jpg)
15
Image hyperlinksImage 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)
![Page 16: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/16.jpg)
16
Figure 10.5 Image hyperlink
![Page 17: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/17.jpg)
17
Multiple use of imagesMultiple 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>
![Page 18: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/18.jpg)
18
Image list itemsImage 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)
<HTML><HEAD><TITLE>A Web page with image list
items</TITLE></
HEAD><BODY><H2><B><CENTER><FONT COLOR="blue">Web page with image list items</FONT></CENTER></B></H2>
<! Include the image><DL><DT><IMG SRC = "myImage.gif"><DD>This is the original image
<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 = "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.
</DL>
</BODY>
</HTML> (Cont’d)
![Page 19: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/19.jpg)
19
Figure 10.7 Image list items
![Page 20: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/20.jpg)
20
GIF animationGIF 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
![Page 21: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/21.jpg)
21
TilingTiling 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)
![Page 22: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/22.jpg)
22
Figure 10.9 Tiling a Web page
![Page 23: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/23.jpg)
23
TutorialsTutorialsTutorial 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 right-justified 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>
![Page 24: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/24.jpg)
24
FAQsFAQsQ: 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)
![Page 25: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/25.jpg)
25
FAQsFAQsQ: 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.
![Page 26: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/26.jpg)
26
SummarySummary– 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
![Page 27: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/27.jpg)
27
ExercisesExercises
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)
![Page 28: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/28.jpg)
28
<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)
![Page 29: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/29.jpg)
29
![Page 30: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/30.jpg)
30
ProblemsProblems
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)
![Page 31: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/31.jpg)
31
<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)
![Page 32: 1 Mastering the Internet and HTML Images and Image Tags](https://reader036.vdocuments.site/reader036/viewer/2022062322/56649e7c5503460f94b7f005/html5/thumbnails/32.jpg)
32