Transcript Chapter 5

Links
Images
Multimedia
CSCE 102 - General Applications
Programming
By
Benito Mendoza
Department of
Computer Science & Engineering
2016/4/8
Benito Mendoza
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
1
Links
Images
Multimedia
Internal Links
External Links
The power of the WWW lies in the ability to
quickly load, via hyperlinks, one document from
another at the click of a mouse
Links are in-line element
External Links:
Link to another webpage
Internal Links:
Link some part of the same document
Web Site Structure:
Web sites are normally broken in several pages
(files) instead of a single file because small files load
faster and smaller documents are easier for people to
read
2016/4/8
Benito Mendoza
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
2
Links
Images
Multimedia
Internal Links
External Links
Website Structure
Any opened HTML document always uses
current working path as default location
http://www.cse.sc.edu/~mendoza2/csce102/index.html
Can link to any document within path without
using full location
csce102syllabus.html
Full path location required when not located on
the same server/computer
http://www.google.com
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Internal Links
External Links
The anchor <a> tag and "href" attribute are used
to create a hyperlink.
<a href =
“http://www.cse.sc.edu/~mendoza2/index
.html”</a>
The value of the href attribute for an external link is
a valid URL.
The link will be rendered in the browser
What happens if an exact file is not specified?
The web server will send the default document specified
in the server setup
What happens if the specified URL does nor exist?
The web server will return the error
2016/4/8
Benito Mendoza
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
4
Links
Images
Multimedia
Internal Links
External Links
Links within the same document require a
target anchor and a hyperlink anchor
The target anchor is of the form:
<a id=“somelabel”>
The hyperlink anchor is of the form:
<a href=“#somelabel”>
The “#” indicates that this is a target internal
to the document
2016/4/8
Benito Mendoza
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
5
Links
Images
Multimedia
Internal Links
External Links
Combining External and Internal Links
It is possible to link to a document and then
target an intermediate location in the page
1. Create the internal target in the page to be
linked to
2. Use an external hyperlink with an internal target
hyperlink
An example:
http://www.mysite.com/myfile.html#contents
2016/4/8
Benito Mendoza
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
6
Links
Images
Multimedia
Types
Images in XHTML
Creating/Saving Images
GIF – Graphics Interchange Format
Lossless compression
256 colors
Patented (cannot use free software to create)
JPEG – Joint Photographic Experts Group
Lossy compression
16 million colors
PNG – Portable Network Graphics
Patent free solution to GIF
5% -25% more compressible than GIF
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Types
Images in XHTML
Creating/Saving Images
<img> is an empty element
<img src=“URL of image” alt=“Alternative
Text” />
Image location can be local or remote
Alternative Text is to be displayed in lieu of
image.
Required in XHTML
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Types
Images in XHTML
Creating/Saving Images
Inline image alignment
Use “align” attribute (deprecated)
<img src=“URL” align=“center” alt=“Centered image” />
align values: left, center, right, top, middle, bottom
affects alignment with respect to inline text
Use <p> tag with “align” attribute
<p align=“center”>
<img src=“URL” alt=“Centered image” />
</p>
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Types
Images in XHTML
Creating/Saving Images
More Image attributes
Width and Height
<img src=“ImageURL” alt=“Text about
Image” width=“50” height=“100” />
Can be either pixels or percentage
50 and 100 are just example pixel numbers
Ordering of attributes not critical
Append % to number for percentage
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Images as Links
Types
Images in XHTML
Creating/Saving Images
Link an image to a URL
<a href=“SomeURL”><img src=“ImageURL”
alt=“Text about image” /></a>
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Types
Images in XHTML
Creating/Saving Images
Links & Images Code Summary
Consult page 136
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Types
Images in XHTML
Creating/Saving Images
Links & Images Code Summary
Images may be obtained from graphic art
collections either on the web or on a CDROM, or you may create them yourself
Images may be copied right off a web
page by putting the cursor over the image,
right clicking, and then selecting “Save
Picture as…” (Internet Explorer) or “Save
Image as…” (Navigator)
MS Paint
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Audio files can be quite large and take a long time to
download; video images are huge
Streaming the audio or video is a method used to playback
the audio/video data before the download completes, but this
requires a fast connection with sufficient bandwidth
The non-standard <embed> tag is used to place audio/video
content in a web page
Animated GIF files are image files that have multiple images
stored inside a single file
Animated GIFs are played back by the browser and require
only a standard image tag
Embedding an audio (or video) file in a Web page with the
full console of controls:
<embed src="soundeffect.wav" autostart="false" width="280"
height="45" align="right" />
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Image Maps
Images can be configured with multiple
hyperlinks using an image as a client-side image
map
The image “hotspots” (hyperlinks) can be
rectangular, circles, or polygons
The hotspots are located on the image using
coordinates
Use the paint program to determine the
coordinates on an image; the x,y coordinates can
be read at the bottom of the application as one
moves the cursor over the image
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links
Images
Multimedia
Creating an Image Map
<a href="http://www.frenchtravel.com"><img
src="eiffel.gif" alt="Eiffel Tower Picture" /></a>
Creating clickable map regions (two rectangles, in this
case):
<map id="myFirstMap" name="myFirstMap">
<area shape="rect" coords="x1,y1,x2,y2"
href="someURL" />
<area shape="rect" coords="x3,y3,x4,y4"
href="anotherURL" />
</map>
Overlaying an image on the clickable map regions to
create an image map:
<img src="mapimage.gif" alt="Client-side map image"
usemap="#myFirstMap" width="250" height="376" />
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)